/* ============================================================
   Tone C — Toss 밝은 파스텔
   둥근 카드 · 선명한 파랑 · 한국 친화 · 따뜻하고 단단
   ============================================================ */
/* Pretendard Variable — 로컬 자체 호스팅 (오프라인 보장) */
@font-face {
  font-family: 'Pretendard Variable';
  font-weight: 45 920;
  font-style: normal;
  font-display: swap;
  /* ⛔ 서브셋(우리가 쓰는 글자만 남긴 판)을 쓴다 — [실측] 2,057,688 → 478,604 바이트(76.7%↓).
     그게 첫 화면 무게의 76% 를 차지하던 덩어리였다.
     ⚠️ 새 글자가 들어오면 `tools/subset_font.py --check` 가 빨개진다(시험이 그걸 돌린다) —
     손님이 네모를 보기 전에 막힌다. 다시 만드는 법: `python3 tools/subset_font.py`
     되돌리려면 이 줄을 `fonts/PretendardVariable.woff2` 로 되돌리면 끝이다(원본 안 지웠다).
     (2026-09-15 · 최예린 · 세션 a0453ee2) */
  src: url('fonts/PretendardVariable.subset.woff2') format('woff2-variations');
}

:root {
  --bg:       #FFFFFF;
  --bg-1:     #F9FAFB;
  --bg-2:     #F2F4F6;
  --bg-3:     #E5E8EB;
  --fg:       #191F28;
  --fg-1:     #333D4B;
  --fg-2:     #4E5968;
  --fg-3:     #6B7684;
  --fg-4:     #8B95A1;
  --fg-5:     #B0B8C1;
  --line:     rgba(25,31,40,0.06);
  --line-2:   rgba(25,31,40,0.10);
  --line-3:   rgba(25,31,40,0.14);
  --accent:   #3182F6;   /* Toss blue */
  --accent-2: #1B64DA;
  --accent-w: #E8F3FF;
  --go:       #15803D;  --go-w:  #E7F7ED;
  --caution:  #A85400;  --cau-w: #FFEFD3;
  --nogo:     #C62828;  --no-w:  #FEECEC;
  --info:     #3182F6;  --info-w:#E8F3FF;
  --mint:     #0FBEB5;
  --yellow:   #FFCC00;
  --r-xs:8px; /* @kind radius */ --r-sm:12px; --r-md:16px; --r-lg:20px; --r-xl:28px;
  --shadow-1: 0 1px 2px rgba(0,0,0,0.04);
  --shadow-2: 0 2px 8px rgba(0,27,55,0.08);
  --shadow-3: 0 8px 32px rgba(0,27,55,0.12);
  --ease:   cubic-bezier(.22,1,.36,1);   /* @kind other */
  --spring: cubic-bezier(.34,1.56,.64,1); /* @kind other */

  /* ── 움직임 토큰 (2026-09-15 · 최예린 · 세션 a0453ee2 · 작업표 5번) ──
     값은 지어낸 게 아니라 [실측] 토스 코드 조각 35개에서 뽑은 것이다.
     ⛔ 여기 말고 다른 곳에 cubic-bezier 를 새로 적지 마라 — 두 벌이 되면 갈린다. */
  --ease-out:  cubic-bezier(.37,.31,0,1);      /* 토스 bezier.out — 들어올 때 */
  --ease-in:   cubic-bezier(.4,0,1,1);         /* 토스 bezier.in  — 나갈 때 */
  --ease-soft: cubic-bezier(.25,.46,.45,.94);  /* 토스 CSS 기본 · 500ms */
  --dur-1: .2s;   /* 작은 것 */
  --dur-2: .3s;   /* 보통 */
  --dur-3: .5s;   /* 토스 CSS 기본 */
  --dur-4: .9s;   /* 큰 전환(0.8~1초) */
  --stagger: 5ms; /* 글자 순차 — 토스 0.005초/글자 */
  --font-sans: 'Pretendard Variable', -apple-system, sans-serif;
}

* { box-sizing:border-box; margin:0; padding:0; }
html,body { background:var(--bg); color:var(--fg); font-family:var(--font-sans); font-size:15px; line-height:1.5; -webkit-font-smoothing:antialiased; letter-spacing:-0.01em; }
a { color:inherit; text-decoration:none; }
button { font:inherit; color:inherit; background:none; border:none; cursor:pointer; }
.mono { font-variant-numeric:tabular-nums; }

.btn { display:inline-flex; align-items:center; justify-content:center; gap:6px; padding:14px 22px; border-radius:var(--r-sm); font-size:15px; font-weight:700; border:none; background:var(--bg-2); color:var(--fg); transition:all .15s var(--ease); white-space:nowrap; }
.btn:hover { background:var(--bg-3); }
.btn:active { transform:scale(0.98); }
.btn-primary { background:var(--accent); color:#fff; }
.btn-primary:hover { background:var(--accent-2); }
.btn-dark { background:var(--fg); color:#fff; }
.btn-dark:hover { background:#000; }
.btn-ghost { background:transparent; color:var(--accent); padding:8px 12px; font-weight:600; }
.btn-lg { padding:18px 28px; font-size:17px; }
.btn-block { width:100%; }

.chip { display:inline-flex; align-items:center; gap:4px; padding:4px 10px; border-radius:999px; font-size:12px; font-weight:700; background:var(--bg-2); color:var(--fg-2); }
.chip-acc { background:var(--accent-w); color:var(--accent); }
.chip-go  { background:var(--go-w);  color:var(--go); }
.chip-cau { background:var(--cau-w); color:var(--caution); }
.chip-no  { background:var(--no-w);  color:var(--nogo); }

.card { background:var(--bg); border-radius:var(--r-lg); box-shadow:var(--shadow-2); }
.card-flat { background:var(--bg-1); border-radius:var(--r-lg); box-shadow:none; }

.eyebrow { font-size:13px; font-weight:700; color:var(--accent); }

.topbar { display:flex; align-items:center; justify-content:space-between; padding:16px 28px; background:#fff; border-bottom:1px solid var(--line); position:sticky; top:0; z-index:50; }
.brand { display:flex; align-items:center; gap:10px; font-weight:800; font-size:19px; letter-spacing:-0.02em; }
.brand-dot { width:24px; height:24px; border-radius:7px; background:var(--accent); position:relative; }
.brand-dot::after { content:''; position:absolute; inset:5px; border:2.5px solid #fff; border-radius:3px; border-right-color:transparent; }
.topnav { display:flex; gap:28px; font-size:15px; font-weight:600; color:var(--fg-2); }
.topnav a:hover { color:var(--fg); }

@keyframes fadeUp { from{opacity:0; transform:translateY(16px);} to{opacity:1; transform:none;} }
.fade-up { animation:fadeUp .6s var(--spring) both; }
@keyframes bounceIn { 0%{opacity:0; transform:scale(.9);} 60%{transform:scale(1.02);} 100%{opacity:1; transform:scale(1);} }
.bounce { animation:bounceIn .5s var(--spring) both; }

@media (prefers-reduced-motion:reduce) { *,*::before,*::after { animation-duration:.001s !important; transition-duration:.001s !important; } }