/* ------------------------------------------------------------------
   우리의 봄날 다이어리 — 디자인 토큰 & 컴포넌트
   서체: Pretendard Variable (로컬 서브셋 2,350자 우선 로드, 드문 글자는 전체 폰트를 지연 로드)
   ------------------------------------------------------------------ */
@font-face {
  font-family: 'Pretendard Variable';
  font-weight: 45 920; font-style: normal; font-display: swap;
  src: url('../fonts/PretendardVariable.woff2') format('woff2-variations');
}
@font-face {
  font-family: 'Pretendard Variable';
  font-weight: 45 920; font-style: normal; font-display: swap;
  src: url('../fonts/PretendardVariable-subset.woff2') format('woff2-variations');
  unicode-range: U+0020-007E, U+00A0-00FF, U+2000-206F, U+3000-303F, U+3131-318E, U+AC00-D7A3, U+FF01-FF60;
}

:root {
  color-scheme: light;
  --bg: #FAF8F4;            /* 아이보리 바탕 */
  --surface: #FFFFFF;       /* 카드 */
  --line: #EDE8F3;          /* 헤어라인 */
  --ink: #3D3850;           /* 본문 */
  --ink-soft: #7C7690;      /* 보조 */
  --ink-faint: #AFA9BE;     /* 힌트 */
  --lav-50: #F5F1FC; --lav-100: #ECE5F9; --lav-200: #D8CCF3; --lav-300: #BBA9E9; --lav-400: #9D86DB; --lav-500: #8B74C9; --lav-600: #7560B2; --lav-700: #5C4A8F;
  --rose-100: #F7DCE3; --rose-600: #C2697F;
  --butter-100: #FBEFCB; --butter-600: #B08426;
  --mint-100: #D6EEE2; --mint-600: #3F8A66;
  --sky-100: #D9E7F8; --sky-600: #4A7AB5;
  --peach-100: #FBE3D3; --peach-600: #C27A49;
  --shadow-card: 0 1px 2px rgba(61,56,80,.04), 0 10px 28px -14px rgba(117,96,178,.22);
  --shadow-float: 0 12px 32px -12px rgba(92,74,143,.45);
  --font: 'Pretendard Variable', Pretendard, 'Apple SD Gothic Neo', 'Noto Sans KR', system-ui, -apple-system, sans-serif;
}

html { -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font); color: var(--ink); background: var(--bg);
  background-image: radial-gradient(900px 420px at 50% -120px, #EFE8FA 0%, rgba(239,232,250,0) 70%);
  min-height: 100dvh; -webkit-font-smoothing: antialiased; font-feature-settings: 'ss05' 1; letter-spacing: -0.005em;
}
.num { font-variant-numeric: tabular-nums; }

/* ---- 하단 내비 ---- */
.nav-btn { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 8px 0 11px; font-size: 11px; font-weight: 500; color: var(--ink-faint); transition: color .2s; }
.nav-btn .nav-ico { display: grid; place-items: center; width: 40px; height: 28px; border-radius: 12px; transition: background .2s, color .2s; }
.nav-btn .nav-ico svg { width: 22px; height: 22px; }
.nav-btn.active { color: var(--lav-600); font-weight: 600; }
.nav-btn.active .nav-ico { background: var(--lav-100); }

/* ---- 카드 · 뱃지 ---- */
.card { background: var(--surface); border: 1px solid var(--line); border-radius: 22px; box-shadow: var(--shadow-card); }
.ibadge { display: inline-grid; place-items: center; flex: none; border-radius: 12px; }
.ibadge-xs { width: 20px; height: 20px; border-radius: 6px; }
.ibadge-sm { width: 30px; height: 30px; border-radius: 10px; }
.ibadge-md { width: 38px; height: 38px; }
.ibadge-lg { width: 46px; height: 46px; border-radius: 15px; }
.ibadge-round { border-radius: 999px; }
.eyebrow { font-size: 12px; font-weight: 600; letter-spacing: .02em; color: var(--ink-soft); }

/* ---- 칩 ---- */
.chip { display: inline-flex; align-items: center; gap: 5px; height: 34px; padding: 0 13px; border-radius: 999px; font-size: 13px; font-weight: 500; line-height: 1; border: 1px solid var(--line); background: #fff; color: var(--ink-soft); transition: all .15s; }
.chip svg { width: 15px; height: 15px; }
.chip svg.face { width: 36px; height: 36px; }
.chip.on { background: var(--lav-100); border-color: var(--lav-300); color: var(--lav-700); }
.chip:active { transform: scale(.96); }
.tag { display: inline-flex; align-items: center; gap: 4px; height: 26px; padding: 0 10px; border-radius: 999px; font-size: 12px; font-weight: 500; background: var(--lav-50); color: var(--lav-700); }
.tag b { font-weight: 700; font-variant-numeric: tabular-nums; }

/* ---- 입력 ---- */
.input { width: 100%; border: 1px solid var(--line); background: #fff; border-radius: 14px; padding: 12px 14px; font-size: 15px; font-family: inherit; color: var(--ink); outline: none; transition: border-color .15s, box-shadow .15s; }
.input::placeholder { color: var(--ink-faint); }
.input:focus { border-color: var(--lav-300); box-shadow: 0 0 0 4px var(--lav-50); }
.label { display: block; font-size: 12px; font-weight: 600; color: var(--ink-soft); margin: 0 0 7px 2px; letter-spacing: .01em; }
textarea.input { resize: none; line-height: 1.65; }

/* ---- 버튼 ---- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 48px; border-radius: 15px; padding: 0 18px; font-size: 15px; font-weight: 600; font-family: inherit; transition: transform .1s, opacity .2s, box-shadow .2s; }
.btn svg { width: 18px; height: 18px; }
.btn:active { transform: scale(.97); }
.btn:disabled { opacity: .5; }
.btn-primary { background: linear-gradient(135deg, var(--lav-400), var(--lav-600)); color: #fff; box-shadow: 0 8px 18px -8px rgba(117,96,178,.6); }
.btn-ghost { background: #fff; border: 1px solid var(--line); color: var(--lav-700); }
.btn-soft { background: var(--lav-100); color: var(--lav-700); }
.btn-danger { background: var(--rose-100); color: var(--rose-600); }
.btn-sm { height: 36px; padding: 0 13px; font-size: 13px; border-radius: 11px; }
.btn-sm svg { width: 15px; height: 15px; }
.icon-btn { width: 40px; height: 40px; border-radius: 13px; display: grid; place-items: center; color: var(--ink-soft); background: #fff; border: 1px solid var(--line); }
.icon-btn svg { width: 19px; height: 19px; }

/* ---- 체크박스 ---- */
.check { width: 26px; height: 26px; border-radius: 9px; border: 2px solid var(--lav-200); display: grid; place-items: center; color: transparent; background: #fff; transition: all .18s; flex: none; }
.check svg { width: 15px; height: 15px; stroke-width: 3; }
.check.on { background: var(--lav-500); border-color: var(--lav-500); color: #fff; }
.row-done .t { text-decoration: line-through; text-decoration-color: var(--lav-300); color: var(--ink-faint); }

/* ---- 진행 스텝퍼 ---- */
.step { display: flex; flex-direction: column; align-items: center; gap: 6px; flex: 1; position: relative; }
.step-dot { width: 30px; height: 30px; border-radius: 999px; display: grid; place-items: center; background: rgba(255,255,255,.7); color: var(--lav-300); border: 1.5px solid rgba(255,255,255,.9); }
.step-dot svg { width: 15px; height: 15px; }
.step.done .step-dot { background: var(--lav-500); color: #fff; border-color: var(--lav-500); }
.step.now .step-dot { background: #fff; color: var(--lav-600); border-color: var(--lav-500); box-shadow: 0 0 0 4px rgba(139,116,201,.18); }
.step span { font-size: 11px; font-weight: 500; color: var(--ink-faint); }
.step.now span { color: var(--lav-700); font-weight: 700; }
.step.done span { color: var(--lav-600); }
.step-line { position: absolute; top: 15px; left: 12%; right: 12%; height: 2px; background: rgba(255,255,255,.8); }

/* ---- 바텀 시트 · 다이얼로그 ---- */
.backdrop { position: fixed; inset: 0; background: rgba(61,56,80,.38); backdrop-filter: blur(3px); z-index: 40; animation: fade .2s ease; }
.sheet { position: fixed; left: 50%; bottom: 0; transform: translateX(-50%); width: 100%; max-width: 28rem; max-height: 92dvh; overflow-y: auto; background: var(--bg); border-radius: 26px 26px 0 0; padding: 10px 20px calc(env(safe-area-inset-bottom) + 20px); z-index: 41; animation: up .3s cubic-bezier(.2,.8,.2,1); }
.sheet::before { content: ""; display: block; width: 38px; height: 5px; border-radius: 999px; background: var(--lav-200); margin: 4px auto 14px; }
.sheet h2 { font-size: 20px; font-weight: 700; letter-spacing: -0.01em; }
.dialog { position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); width: calc(100% - 48px); max-width: 22rem; background: #fff; border-radius: 22px; padding: 22px 20px 20px; z-index: 61; box-shadow: 0 24px 60px -24px rgba(61,56,80,.5); }
@keyframes up { from { transform: translate(-50%, 40px); opacity: 0; } to { transform: translate(-50%, 0); opacity: 1; } }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }

/* ---- 로딩 쉬머 ---- */
.shimmer { background: linear-gradient(90deg, #F0EBF6 25%, #F8F5FC 50%, #F0EBF6 75%); background-size: 200% 100%; animation: shimmer 1.4s infinite; border-radius: 8px; }
@keyframes shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

/* ---- 타임라인 ---- */
.tl-item { position: relative; padding-left: 52px; padding-bottom: 14px; }
.tl-item .tl-line { position: absolute; left: 18px; top: 44px; bottom: -4px; width: 2px; background: var(--line); border-radius: 2px; }
.tl-item:last-child .tl-line { display: none; }
.tl-item .ibadge { position: absolute; left: 0; top: 2px; }

/* ---- 유틸 ---- */
.hscroll { display: flex; gap: 10px; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.hscroll::-webkit-scrollbar { display: none; }
.fade-in { animation: fade .3s ease; }
.dots { background-image: radial-gradient(rgba(255,255,255,.55) 1.2px, transparent 1.4px); background-size: 14px 14px; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } }

/* ---- v3: 스위치 · 녹음 버튼 ---- */
.switch { position: relative; flex: none; width: 46px; height: 28px; }
.switch input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; z-index: 1; }
.switch i { position: absolute; inset: 0; border-radius: 999px; background: var(--lav-100); transition: background .2s; }
.switch i::after { content: ""; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 999px; background: #fff; box-shadow: 0 1px 3px rgba(61,56,80,.25); transition: transform .2s; }
.switch input:checked + i { background: var(--lav-500); }
.switch input:checked + i::after { transform: translateX(18px); }
.rec-btn { width: 88px; height: 88px; border-radius: 999px; display: grid; place-items: center; color: #fff; background: linear-gradient(135deg, var(--lav-400), var(--lav-600)); box-shadow: var(--shadow-float); transition: transform .15s; }
.rec-btn.on { background: linear-gradient(135deg, #E59AAE, var(--rose-600)); animation: pulse 1.6s ease-in-out infinite; }
@keyframes pulse { 0%,100% { box-shadow: 0 0 0 0 rgba(194,105,127,.35); } 50% { box-shadow: 0 0 0 16px rgba(194,105,127,0); } }