/* 씽씽짐 - 핑크 키티풍 테마(색상만, 캐릭터 이미지는 사용자가 직접 추가) + 부위별 파스텔
   수정이력
    2026-10-30 / 배경색을 푸른 기 도는 핑크(#FCF0F6)로, 핑크 면 색도 같은 계열로 조정 / 클로드
    2026-10-30 / 사진 보기를 transform 확대 방식으로 바꿈(두 손가락 확대) / 클로드
    2026-10-30 / 운동한 날 입력줄, 아이콘 배치용 스타일 추가 / 클로드
    2026-10-30 / 기구·자세 화면 상단(이름 옆 있음/없음/모름, 고정 메모 sticky)과 오늘 카드 고정 메모 스타일 / 클로드
    2026-10-30 / 다꾸 스티커 스타일, 빈 화면·토스트·달력 키티, 판다·공룡·발바닥·풍선 제거 / 클로드
    2026-10-30 / 하단 탭이 마지막 버튼을 가리지 않게 아래 여백 늘림, 기록 카드 수정·삭제 버튼, 전체 체크 버튼 / 클로드
    2026-10-30 / 세트 줄에 × 삭제 칸 추가(칸 너비 조정), 운동 카드 버튼 한 줄 / 클로드
    2026-10-30 / 저장 알림 [수정] 버튼, 오늘 한 운동 제목 / 클로드
    2026-10-30 / 세트 ✓ 칸 없앰(세트 줄 칸 너비 다시 나눔) / 클로드
    2026-10-30 / 다크 테마 삭제, 폰이 다크 모드여도 항상 밝은 핑크(color-scheme: light) / 클로드
    2026-10-30 / 글자 약 1.15배·아이콘/스티커 약 1.25배 키움, 입력칸 최소 16px·두 번 탭 확대 막기 / 클로드
*/
:root {
  --bg: #FCF0F6;
  --card: #FFFFFF;
  --ink: #4A3640;
  --muted: #9C8590;
  --line: #F7DCE5;
  --accent: #EC5B88;
  --accent-ink: #FFFFFF;
  --shadow: 0 5px 16px rgba(229, 69, 111, .10);
  --p-back: #D3E4FF;
  --p-legs: #FFCFDA;
  --p-shoulder: #E3D8FF;
  --p-hip: #F6C6E6;
  --p-abs: #FFEFB8;
  --p-chest: #CDEFD9;
  --p-arms: #CDEEF3;
  --p-cardio: #EBDDE5;
  --ok: #2E9E6B;
  --warn: #C0496A;
  --radius: 18px;
  color-scheme: light;
}
* { font-synthesis: none; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; background: var(--bg); color: var(--ink); touch-action: manipulation; }
body {
  font-family: "Gamja Flower", "Gowun Dodum", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", system-ui, sans-serif;
  font-size: 18px; line-height: 1.4; -webkit-font-smoothing: antialiased;
  padding-bottom: calc(140px + env(safe-area-inset-bottom));
}
#app { max-width: 560px; margin: 0 auto; padding: 0 16px; }
button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; border: 0; background: none; }
h1, h2, h3, p { margin: 0; }

/* 상단 */
.topbar { display: flex; align-items: center; justify-content: space-between; padding: calc(14px + env(safe-area-inset-top)) 0 10px; }
.topbar h1 { font-size: 23px; color: var(--accent); font-weight: 800; letter-spacing: -.02em; }
.topbar .sub { font-size: 15px; color: var(--muted); margin-top: 2px; }
.icon-btn { width: 44px; height: 44px; border-radius: 14px; background: var(--card); box-shadow: var(--shadow); font-size: 23px; }

/* 카드/공통 */
.card { background: var(--card); border-radius: var(--radius); padding: 16px; box-shadow: var(--shadow); margin-bottom: 14px; }
.muted { color: var(--muted); font-size: 16px; }
.small { font-size: 15px; }
.row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.row.between { justify-content: space-between; }
.grow { flex: 1; min-width: 0; }
.btn { min-height: 46px; font-size: 16.5px; padding: 0 18px; border-radius: 14px; background: var(--card); border: 1.5px solid var(--line); font-weight: 700; }
.btn.primary { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.btn.block { width: 100%; }
.btn.small { min-height: 38px; padding: 0 12px; font-size: 16px; border-radius: 12px; }
.btn.danger { color: var(--warn); }
.chips { display: flex; gap: 8px; flex-wrap: wrap; }
.chip { min-height: 36px; padding: 0 14px; border-radius: 999px; background: var(--card); border: 1.5px solid var(--line); font-size: 15px; font-weight: 600; }
.chip[aria-pressed="true"] { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.pill { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: 14px; font-weight: 700; color: #4A3640; background: var(--c, var(--p-cardio)); }
.tag-warn { display: inline-block; font-size: 14px; font-weight: 700; color: var(--warn); background: rgba(192, 73, 106, .12); padding: 2px 8px; border-radius: 8px; }
.part-back { --c: var(--p-back); } .part-legs { --c: var(--p-legs); } .part-shoulder { --c: var(--p-shoulder); }
.part-hip { --c: var(--p-hip); } .part-abs { --c: var(--p-abs); } .part-chest { --c: var(--p-chest); }
.part-arms { --c: var(--p-arms); } .part-cardio { --c: var(--p-cardio); }

/* 오늘: 시작 카드 */
.hero h2 { font-size: 20.5px; font-weight: 800; margin-bottom: 6px; }
.hero .suggest { margin: 14px 0; padding: 12px 14px; border-radius: 14px; background: var(--c, var(--p-cardio)); color: #4A3640; }
.hero .suggest b { font-size: 18.5px; }
.part-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 12px; }
.part-card { min-height: 76px; border-radius: 16px; background: var(--c); color: #4A3640; font-weight: 800; font-size: 18.5px; text-align: left; padding: 12px 14px; }
.part-card small { display: block; font-weight: 600; font-size: 14px; opacity: .75; margin-top: 2px; }

/* 오늘: 운동 카드 */
.today-head { display: flex; align-items: center; justify-content: space-between; margin: 4px 0 10px; }
.part-bar { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 6px; margin-bottom: 8px; }
.part-bar .chip { flex: none; }
.ex { position: relative; background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow); margin-bottom: 30px; border-top: 6px solid var(--c, var(--p-cardio)); }
.ex-head { display: flex; gap: 10px; align-items: flex-start; padding: 14px 14px 6px; }
.ex-head h3 { font-size: 18px; font-weight: 800; }
.ex-head .prev { font-size: 15px; color: var(--muted); margin-top: 2px; word-break: keep-all; }
.ex-head .thumb { width: 60px; height: 60px; border-radius: 12px; object-fit: cover; flex: none; background: var(--c); }
.sets { padding: 4px 14px 6px; }
.set { display: grid; grid-template-columns: 20px 1fr 76px 30px; gap: 6px; align-items: center; margin: 8px 0; }
.set .n { font-weight: 800; color: var(--muted); text-align: center; }
.set .w { display: flex; align-items: center; gap: 4px; }
.set .w button { width: 32px; height: 44px; border-radius: 12px; background: var(--bg); font-size: 23px; font-weight: 700; flex: none; }
.set input { width: 100%; min-width: 0; height: 44px; border-radius: 12px; border: 1.5px solid var(--line); background: var(--card); text-align: center; font-size: 18px; font-weight: 700; }
.set input.suggested { background: color-mix(in srgb, var(--c, var(--p-cardio)) 45%, var(--card)); border-style: dashed; }
.set .check { width: 44px; height: 44px; border-radius: 12px; border: 1.5px solid var(--line); font-size: 25.5px; font-weight: 800; color: var(--muted); }
.set.done .check { background: var(--ok); border-color: var(--ok); color: #fff; }
.set.done input { opacity: .65; }
.ex-actions { display: flex; gap: 6px; flex-wrap: nowrap; padding: 6px 14px 12px; }
.ex-actions .btn.small { flex: 1 1 auto; padding: 0 8px; white-space: nowrap; }
.ex-actions .btn.small.arrow { flex: 0 0 38px; padding: 0; }
.set .del-set { width: 28px; height: 44px; border-radius: 10px; color: var(--muted); font-size: 23px; font-weight: 700; padding: 0; }
.set .del-set:disabled { opacity: .25; cursor: default; }
.avail { padding: 10px 14px 14px; border-top: 1px dashed var(--line); }
.avail .label { font-size: 15px; color: var(--muted); margin-bottom: 8px; }
.subs { margin-top: 10px; }
.subs .label { font-size: 15px; color: var(--muted); margin-bottom: 6px; }
.finish { margin: 4px 0 16px; }

/* 종목 / 기록 */
.search { width: 100%; height: 48px; border-radius: 14px; border: 1.5px solid var(--line); background: var(--card); padding: 0 14px; margin-bottom: 10px; }
.ex-list-item { display: flex; gap: 12px; align-items: center; width: 100%; text-align: left; background: var(--card); border-radius: 16px; padding: 12px; margin-bottom: 10px; box-shadow: var(--shadow); border-left: 6px solid var(--c); }
.ex-list-item .thumb { width: 60px; height: 60px; border-radius: 12px; object-fit: cover; background: var(--c); flex: none; }
.ex-list-item h3 { font-size: 18.5px; font-weight: 800; }
.chart { width: 100%; height: auto; display: block; }
.chart text { font-size: 12.5px; fill: var(--muted); }
.chart .bar { fill: var(--c, var(--accent)); }
.hist { padding: 12px 14px; border-radius: 16px; background: var(--card); margin-bottom: 10px; box-shadow: var(--shadow); border-left: 6px solid var(--c, var(--p-cardio)); }
.hist h4 { margin: 0 0 6px; font-size: 17px; }
.hist .item { font-size: 16px; padding: 6px 0; border-top: 1px dashed var(--line); word-break: keep-all; white-space: pre-line; }
.hist .item:first-of-type { border-top: 0; }

/* 시트(모달) */
.sheet-backdrop { position: fixed; inset: 0; background: rgba(20, 20, 30, .45); z-index: 30; display: flex; align-items: flex-end; justify-content: center; }
.sheet { width: 100%; max-width: 560px; max-height: 88vh; overflow-y: auto; background: var(--bg); border-radius: 24px 24px 0 0; padding: 16px 16px calc(24px + env(safe-area-inset-bottom)); }
.sheet .grab { width: 44px; height: 5px; border-radius: 3px; background: var(--line); margin: 0 auto 12px; }
.sheet h2 { font-size: 23px; font-weight: 800; margin-bottom: 4px; }
.photos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 10px 0; }
.photos figure { margin: 0; position: relative; }
.photos img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 12px; display: block; }
.photos .del { position: absolute; top: 4px; right: 4px; width: 28px; height: 28px; border-radius: 50%; background: rgba(0, 0, 0, .55); color: #fff; font-size: 18.5px; }
.photos figcaption { font-size: 12.5px; color: var(--muted); margin-top: 3px; }
.note-line { font-size: 16px; padding: 4px 0; word-break: keep-all; }
.field { margin: 10px 0; }
.field label { display: block; font-size: 15px; color: var(--muted); margin-bottom: 4px; }
.field input[type="text"], .field select, .field input[type="number"] { width: 100%; height: 46px; border-radius: 12px; border: 1.5px solid var(--line); background: var(--card); padding: 0 12px; }
.list-edit { display: flex; align-items: center; gap: 6px; padding: 6px 0; border-bottom: 1px dashed var(--line); }

/* 하단 탭 */
nav.tabs { position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; display: flex; justify-content: center; padding: 8px 16px calc(10px + env(safe-area-inset-bottom)); pointer-events: none; }
nav.tabs .inner { pointer-events: auto; width: 100%; max-width: 520px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; background: var(--card); border-radius: 22px; padding: 6px; box-shadow: 0 8px 26px rgba(40, 30, 10, .14); border: 1px solid var(--line); }
nav.tabs button { min-height: 62px; border-radius: 16px; font-weight: 800; font-size: 15px; color: var(--muted); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; }
nav.tabs button img { width: 48px; height: 48px; object-fit: contain; }
nav.tabs button[aria-selected="true"] { background: #FADCEB; color: var(--accent); }
#toast { position: fixed; left: 50%; bottom: calc(110px + env(safe-area-inset-bottom)); transform: translateX(-50%) translateY(20px); opacity: 0; transition: .25s; background: #5A4350; color: #fff; padding: 10px 16px; border-radius: 14px; font-size: 16px; z-index: 40; pointer-events: none; max-width: 88vw; text-align: center; }
#toast.show { opacity: 1; transform: translateX(-50%); }
a.btn { display: inline-flex; align-items: center; text-decoration: none; color: inherit; }
.empty { text-align: center; color: var(--muted); padding: 28px 10px; }

/* 유산소 입력줄: 시간(필수) / 경사 / 속도 */
.set.cardio { grid-template-columns: 18px 1.2fr 1fr 1fr 30px; align-items: end; }
.set.cardio .n { align-self: center; }
.set.cardio .cf { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.set.cardio .cf span { font-size: 12.5px; font-weight: 700; color: var(--muted); text-align: center; }
.set.cardio input { font-size: 18.5px; }
.set.cardio input.need { border-color: #e26b6b; background: #fff1f1; }

/* 콤보박스(select) 꾸미기: 브라우저 기본 모양 대신 둥근 핑크 스타일 */
select { appearance: none; -webkit-appearance: none; min-height: 44px; padding: 0 38px 0 14px; border-radius: 14px; border: 1.5px solid var(--line); background-color: var(--card);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1.5 1.5 7 7l5.5-5.5' fill='none' stroke='%23E5456F' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center; font-weight: 700; color: var(--ink); max-width: 100%; }
select:focus, input:focus { outline: 2px solid color-mix(in srgb, var(--accent) 45%, transparent); outline-offset: 1px; }

/* 사진 크게 보기 */
#viewer { position: fixed; inset: 0; z-index: 60; background: rgba(30, 15, 22, .88); display: flex; flex-direction: column; align-items: center; justify-content: center; }
#viewer { touch-action: none; }
#viewer .vbox { width: 100%; height: 100%; overflow: hidden; display: flex; align-items: center; justify-content: center; }
#viewer .vbox img { max-width: 100vw; max-height: 100vh; object-fit: contain; cursor: zoom-in; touch-action: none; transform-origin: center; will-change: transform; user-select: none; -webkit-user-select: none; -webkit-user-drag: none; }
#viewer.zoom .vbox img { cursor: zoom-out; }
#viewer .vclose { position: fixed; top: calc(12px + env(safe-area-inset-top)); right: 12px; width: 44px; height: 44px; border-radius: 50%; background: rgba(255,255,255,.9); font-size: 30px; z-index: 2; color: #4A3640; }
#viewer .vhint { position: fixed; bottom: calc(14px + env(safe-area-inset-bottom)); color: #fff; font-size: 15px; opacity: .8; pointer-events: none; }

/* 달력 */
.cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.cal-w { text-align: center; font-size: 14px; color: var(--muted); padding-bottom: 4px; }
.cal-w:first-child { color: var(--accent); }
.cal-cell { min-width: 0; height: 46px; padding: 0; border-radius: 12px; background: transparent; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; font-size: 16px; color: var(--ink); }
.cal-cell.empty { pointer-events: none; }
.cal-cell.has { background: #FBE9F3; }
.cal-cell.today .dn { background: var(--accent); color: #fff; border-radius: 999px; padding: 0 7px; }
.cal-cell.sel { outline: 2px solid var(--accent); outline-offset: -2px; }
.cal-cell .dots { display: flex; gap: 2px; height: 7px; }
.cal-cell .dots i { width: 7px; height: 7px; border-radius: 50%; background: var(--c); box-shadow: 0 0 0 1px rgba(74, 54, 64, .25); display: block; }
.cal-title { font-size: 18.5px; }
.cal-sel { margin: 6px 2px 8px; font-size: 17px; color: var(--accent); }

/* 이미지 아이콘 */
.brand { display: flex; align-items: center; gap: 10px; }
.brand .logo { width: 50px; height: 50px; object-fit: contain; }
div.empty:not(.cal-cell)::before { content: ""; display: block; width: 116px; height: 116px; margin: 0 auto 8px; background: url("../img/st/kitty-bowhug.png") center / contain no-repeat; }
#party { position: fixed; inset: 0; z-index: 70; pointer-events: none; overflow: hidden; }
#party img { position: absolute; width: 118px; height: 118px; object-fit: contain; opacity: 0; animation: pop 1.7s ease-out forwards; }
#party .p1 { left: 8%; bottom: 22%; } #party .p2 { right: 10%; bottom: 40%; animation-delay: .1s; }
#party .p3 { left: 30%; bottom: 10%; animation-delay: .2s; } #party .p4 { right: 24%; bottom: 18%; animation-delay: .15s; width: 140px; height: 140px; }
#party .p5 { left: 12%; bottom: 46%; animation-delay: .25s; width: 100px; height: 100px; }
@keyframes pop { 0% { opacity: 0; transform: translateY(40px) scale(.6) rotate(-10deg); } 25% { opacity: 1; transform: translateY(-20px) scale(1.1) rotate(6deg); } 80% { opacity: 1; } 100% { opacity: 0; transform: translateY(-120px) scale(1) rotate(-4deg); } }

/* 운동한 날 */
.date-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0 0 10px; }
.date-row label { font-size: 16px; color: var(--muted); }
.date-row input[type="date"] { min-height: 40px; padding: 0 12px; border-radius: 12px; border: 1.5px solid var(--line); background: var(--card); font-weight: 700; }

/* 아이콘 배치 */
.ico { width: 32px; height: 32px; object-fit: contain; vertical-align: middle; }
.ico-lg { width: 40px; height: 40px; }
.hero h2 .ico { margin-left: 4px; }
.cal-title .ico { margin-right: 4px; }
.btn .ico { margin-right: 6px; width: 28px; height: 28px; }
div.empty.ex-empty::before { background-image: url("../img/st/kitty-surprise.png"); }
div.empty.today-empty::before { background-image: url("../img/st/kitty-folder.png"); }

/* 기구·자세 화면 상단(이름·기구 유무·고정 메모) */
.sheet-top { position: sticky; top: -16px; z-index: 3; background: var(--bg); margin: 0 -16px; padding: 8px 16px 10px; border-bottom: 1px dashed var(--line); }
.detail-head { display: flex; gap: 10px; align-items: flex-start; }
.title-line { display: flex; align-items: center; gap: 6px 10px; flex-wrap: wrap; margin-bottom: 4px; }
.title-line .chips { gap: 6px; }
.title-line .chip { min-height: 32px; padding: 0 11px; }
.ex-title { font-size: 23px; font-weight: 800; text-align: left; padding: 2px 0; }
.ex-title .pen { font-size: 17px; color: var(--muted); }
.row.nowrap { flex-wrap: nowrap; }
.pin-box { margin-top: 10px; padding: 10px; border-radius: 14px; background: var(--card); box-shadow: var(--shadow); }
.pin-list { max-height: 30vh; overflow-y: auto; margin-top: 6px; }
.pin-line { display: flex; align-items: center; gap: 8px; padding: 6px 2px; border-top: 1px dashed var(--line); font-size: 16.5px; word-break: keep-all; }
.pin-line:first-child { border-top: 0; }
.pin-line .del { width: 28px; height: 28px; border-radius: 50%; color: var(--muted); font-size: 20.5px; flex: none; }
.pin-mini { list-style: none; margin: 6px 0 0; padding: 6px 10px; border-radius: 10px; background: color-mix(in srgb, var(--c, var(--p-cardio)) 30%, var(--card)); font-size: 15.5px; }
.pin-mini li { padding: 1px 0; word-break: keep-all; }
.pin-mini li::before { content: "📌 "; font-size: 12.5px; }
.pin-mini li.more { color: var(--muted); font-size: 14px; }
.pin-mini li.more::before { content: ""; }

/* 다꾸 스티커 (누르는 동작을 막지 않게 pointer-events: none) */
.card, .hist, .pin-box { position: relative; }
.card.hero { margin-top: 10px; }
.st, .deco { position: absolute; pointer-events: none; object-fit: contain; z-index: 2; user-select: none; -webkit-user-select: none; }
.st { filter: drop-shadow(0 2px 3px rgba(200, 80, 120, .20)); }
.tilt-l { transform: rotate(-9deg); } .tilt-r { transform: rotate(8deg); }
.st-tr { top: -24px; right: -8px; width: 72px; height: 72px; }
.st-md { width: 82px; height: 82px; top: -28px; }
.st-lg { width: 100px; height: 100px; top: -30px; right: -10px; }
.st-br { bottom: -24px; right: -6px; width: 76px; height: 76px; }
.st-card { top: -32px; right: 16px; width: 54px; height: 54px; }
.search-wrap { position: relative; }
.search-wrap .search { padding-right: 66px; }
.st-search { right: 6px; top: -10px; width: 60px; height: 60px; transform: rotate(10deg); }
.deco-tr { top: -10px; right: 12px; width: 32px; height: 32px; transform: rotate(12deg); opacity: .95; }
.deco-lg { width: 46px; height: 46px; top: -14px; }
.deco-bl { left: -8px; bottom: -12px; width: 52px; height: 52px; transform: rotate(-14deg); }
.deco.deco-inline { position: static; display: inline-block; width: 28px; height: 28px; vertical-align: -4px; margin-left: 4px; transform: rotate(-12deg); }
.grab-st { display: block; width: 56px; height: 48px; object-fit: contain; margin: -6px auto 2px; pointer-events: none; }
.cal-cell { position: relative; }
.cal-cell.has::after { content: ""; position: absolute; top: 1px; right: 1px; width: 18px; height: 18px; background: url("../img/st/kitty-plain.png") center / contain no-repeat; transform: rotate(10deg); }
#toast::before { content: ""; display: inline-block; width: 24px; height: 24px; margin-right: 6px; vertical-align: -5px; background: url("../img/st/kitty-plain.png") center / contain no-repeat; }

/* 기록 카드 수정·삭제, 전체 체크 */
.hist-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 8px; padding-top: 8px; border-top: 1px dashed var(--line); }
.btn.all-done { color: var(--ok); border-color: color-mix(in srgb, var(--ok) 40%, var(--line)); }

/* 저장 알림의 [수정] 버튼: 버튼이 있을 때만 누를 수 있게 */
#toast.has-btn { pointer-events: auto; }
#toast .toast-btn { margin-left: 10px; padding: 3px 12px; border-radius: 10px; background: #fff; color: var(--accent); font-weight: 800; font-size: 15px; }
.today-done { margin-top: 22px; }

/* 아이폰은 16px보다 작은 입력칸을 누르면 화면을 확대하므로 입력칸은 최소 16px */
input, select, textarea { font-size: max(16px, 1em); }