/* ============================================================
   수심달 Design System — Canonical Tokens v1.0  (Toss-3x)
   근거: Susimdal Brand Identity Manual v2.0 (정환 사인본)
   RED #C8102E · Pretendard · 하트 모티프 · Black #1A1A1A
   이 파일이 모든 HTML/LP/IR/리포트 산출물의 단일 토큰 소스.
   변경 시 BI Manual v2.x와 정합 + 정환 사인.
   ============================================================ */
@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.css');

:root{
  /* ---- Brand color (Manual BS-03) ---- */
  --red:#C8102E; --red-dark:#8E0B20; --red-soft:#FBE9EC; --pink:#FFE0E6;
  --ink:#1A1A1A; --g70:#5C5C5C; --g40:#999999; --g15:#E6E6E6; --g08:#F4F4F5; --white:#FFFFFF;
  --ok:#1F9D55; --warn:#B7791F; --info:#2563EB;
  --grad-red:linear-gradient(135deg,#C8102E,#8E0B20);
  --grad-soft:radial-gradient(1200px 620px at 82% -12%,#fde7eb 0%,#fff 60%);

  /* ---- Data ramp: Violet (진행량 전용) — 정환 등재 2026-07-22 ----
     브랜드 색이 아니라 **데이터 인코딩 전용 색**이다. 브랜드 RED는 '중요/강조',
     이 보라는 '얼마나 채웠나(크기)'만 뜻한다. 둘의 역할이 다르므로 섞어 쓰지 않는다.

     왜 필요했나: 학생앱의 두 지도가 같은 분홍 계열을 정반대 뜻으로 쓰고 있었다
     (성장지도 분홍=약함 / 진도지도 분홍=조금 함). 크기(sequential)와
     강약(diverging)은 색상군을 공유하면 안 된다.
     검증: 보라 ↔ 초록(#1F9D55) 색맹 ΔE 30.3 · 보라 ↔ 레드(#C8102E) ΔE 31.0 — 안전.
     대비: v500 위 흰 글씨 4.5:1 이상(AA), v100 위 v900 글씨로 0% 구간 가독성 확보.

     용법: 진행률·이수도·점유율 등 **양(量)** 히트맵/막대에만. 상태·경고에는 쓰지 않는다.
     현재 소비처: 학생앱 progmap.js(진도 지도 이수도). */
  --v900:#4C1D95; --v700:#6D28D9; --v500:#7C3AED; --v300:#C4B5FD; --v100:#EDE9FE;
  --v-empty:#F4F4F6;                    /* 미시작 = 중립 회색(보라 아님) */
  --grad-violet:linear-gradient(135deg,#6D28D9,#4C1D95);

  /* ---- Type scale (modular 1.20 · Pretendard) ---- */
  --font:'Pretendard',system-ui,-apple-system,sans-serif;
  --fs-cap:.78rem; --fs-sm:.88rem; --fs-base:1rem; --fs-lg:1.2rem;
  --fs-h4:1.44rem; --fs-h3:1.73rem; --fs-h2:2.07rem; --fs-h1:2.99rem; --fs-display:4.3rem;
  --lh-tight:1.18; --lh-head:1.25; --lh-body:1.7;
  --ls-head:-.025em; --ls-body:-.01em; --ls-display:-.04em;
  --fw-light:300; --fw-reg:400; --fw-semi:600; --fw-bold:700; --fw-black:800;

  /* ---- Spacing scale (4pt base) ---- */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:48px; --s8:64px; --s9:96px; --s10:128px;

  /* ---- Radius ---- */
  --r-sm:8px; --r-md:12px; --r-lg:16px; --r-xl:22px; --r-pill:999px;

  /* ---- Elevation (2-layer soft shadow = 프리미엄 핵심) ---- */
  --sh-1:0 1px 2px rgba(26,26,26,.05);
  --sh-2:0 6px 24px rgba(26,26,26,.07),0 1px 3px rgba(26,26,26,.06);
  --sh-3:0 18px 50px rgba(26,26,26,.12),0 2px 6px rgba(26,26,26,.06);
  --sh-4:0 28px 80px rgba(26,26,26,.18);
  --sh-red:0 10px 30px rgba(200,16,46,.28);

  /* ---- Motion (choreographed) ---- */
  --e-out:cubic-bezier(.22,.61,.36,1);      /* ease-out expressive */
  --e-inout:cubic-bezier(.65,.05,.36,1);
  --e-spring:cubic-bezier(.34,1.56,.64,1);  /* subtle overshoot */
  --t-fast:.14s; --t-base:.22s; --t-slow:.4s; --t-cine:.7s;

  /* ---- Layout ---- */
  --maxw:1080px; --maxw-wide:1240px; --maxw-read:680px;
  --z-base:0; --z-card:10; --z-nav:100; --z-cta:200; --z-modal:1000; --z-toast:1100;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:var(--font);color:var(--ink);background:var(--white);
  font-size:var(--fs-base);line-height:var(--lh-body);letter-spacing:var(--ls-body);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
h1,h2,h3,h4{margin:0;line-height:var(--lh-head);letter-spacing:var(--ls-head);text-wrap:balance}
h1{font-size:var(--fs-h1);font-weight:var(--fw-black)} h2{font-size:var(--fs-h2);font-weight:var(--fw-bold)}
h3{font-size:var(--fs-h3);font-weight:var(--fw-bold)} h4{font-size:var(--fs-h4);font-weight:var(--fw-semi)}
p{margin:0;text-wrap:pretty} a{color:var(--red);text-decoration:none} strong{font-weight:700}
.display{font-size:var(--fs-display);font-weight:var(--fw-black);letter-spacing:var(--ls-display);line-height:var(--lh-tight)}
.lead{font-size:var(--fs-lg);color:var(--g70)} .red{color:var(--red)} .muted{color:var(--g70)}
.cap{font-size:var(--fs-cap);color:var(--g40)}

/* ---- Accessibility (토스 AA → 우리 AAA 지향) ---- */
:where(a,button,input,select,textarea,[tabindex]):focus-visible{
  outline:3px solid var(--red);outline-offset:2px;border-radius:4px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important;scroll-behavior:auto!important}}

/* ============ Components ============ */

/* Button — full state machine (default/hover/active/focus/disabled/loading) */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-family:var(--font);font-weight:var(--fw-semi);font-size:var(--fs-base);
  padding:14px 24px;border-radius:var(--r-md);border:1px solid transparent;cursor:pointer;
  transition:transform var(--t-fast) var(--e-out),box-shadow var(--t-base) var(--e-out),background var(--t-base);
  line-height:1;white-space:nowrap}
.btn:active{transform:translateY(1px) scale(.99)}
.btn[disabled]{opacity:.45;cursor:not-allowed;pointer-events:none}
.btn-primary{background:var(--grad-red);color:#fff;box-shadow:var(--sh-red)}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 16px 40px rgba(200,16,46,.34)}
.btn-secondary{background:#fff;color:var(--ink);border-color:var(--g15);box-shadow:var(--sh-2)}
.btn-secondary:hover{border-color:var(--g40);transform:translateY(-1px)}
.btn-ghost{background:transparent;color:var(--red)} .btn-ghost:hover{background:var(--red-soft)}
.btn-lg{padding:18px 32px;font-size:var(--fs-lg)} .btn-sm{padding:9px 16px;font-size:var(--fs-sm)}

/* BottomCTA — 토스 핵심 패턴을 신뢰문구·세이프에어리어까지 강화 */
.bottom-cta{position:fixed;left:0;right:0;bottom:0;z-index:var(--z-cta);
  background:rgba(255,255,255,.86);backdrop-filter:saturate(160%) blur(14px);
  border-top:1px solid var(--g15);padding:14px 20px calc(14px + env(safe-area-inset-bottom));
  box-shadow:0 -10px 30px rgba(26,26,26,.06)}
.bottom-cta .inner{max-width:var(--maxw);margin:0 auto;display:flex;gap:12px;align-items:center}
.bottom-cta .btn-primary{flex:1}
.bottom-cta .assure{font-size:var(--fs-cap);color:var(--g40)} /* "우리 아이에게 맞는 길, 함께 고민해드리겠습니다" */

/* Card / ListRow / Badge / Chip / Callout / Tag — 기존 brand.css 패턴 토큰화 */
.card{background:#fff;border:1px solid var(--g15);border-radius:var(--r-xl);padding:var(--s5) var(--s5);box-shadow:var(--sh-2);
  transition:transform var(--t-base) var(--e-out),box-shadow var(--t-base) var(--e-out)}
.card:hover{transform:translateY(-3px);box-shadow:var(--sh-3)}
.listrow{display:flex;align-items:center;gap:14px;padding:16px 4px;border-bottom:1px solid var(--g15)}
.listrow:last-child{border-bottom:none} .listrow .lr-main{flex:1} .listrow .lr-sub{color:var(--g40);font-size:var(--fs-sm)}
.badge{display:inline-block;font-size:var(--fs-cap);font-weight:700;padding:3px 9px;border-radius:var(--r-pill);background:var(--red-soft);color:var(--red-dark)}
.chip{display:inline-block;background:var(--g08);border:1px solid var(--g15);border-radius:var(--r-pill);padding:5px 13px;font-size:var(--fs-sm);font-weight:600;color:var(--g70);margin:2px}
.callout{border-left:4px solid var(--red);background:var(--red-soft);padding:14px 18px;border-radius:0 var(--r-md) var(--r-md) 0;margin:14px 0}
.callout.warn{border-color:var(--warn);background:#FFF7E6} .callout.ink{border-color:var(--ink);background:var(--g08)}
.tag{display:inline-block;font-size:.68rem;font-weight:700;padding:2px 8px;border-radius:var(--r-pill);box-shadow:inset 0 0 0 1px rgba(0,0,0,.03)}
.tag.fact{background:var(--red-soft);color:var(--red-dark)} .tag.est{background:#EEF2FF;color:#3949AB}
.tag.measuring{background:#FFF7E6;color:var(--warn)} .tag.l2{background:#1A1A1A;color:#fff}

/* KPI / Stat band */
.kpi{font-size:2.6rem;font-weight:var(--fw-black);letter-spacing:-.04em;line-height:1;
  background:var(--grad-red);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.kpi-label{font-size:var(--fs-cap);color:var(--g70);font-weight:600;margin-top:6px}

/* Stat band — 증거 밴드 (proof-forward 핵심 컴포넌트) */
.statband{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border:1px solid var(--g15);
  border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--sh-2);margin-top:var(--s4)}
.statband > div{padding:18px 16px;border-right:1px solid var(--g15)}
.statband > div:last-child{border-right:none}
.statband .v{font-size:1.7rem;font-weight:var(--fw-black);line-height:1;
  background:var(--grad-red);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.statband .l{font-size:var(--fs-cap);color:var(--g70);margin-top:5px;font-weight:600}
@media (max-width:560px){ .statband{grid-template-columns:1fr 1fr} }

/* Trust band — 교육 구매자(학부모) 신뢰 엔지니어링 (토스보다 강화 축) */
.trustbar{display:flex;gap:10px;flex-wrap:wrap;margin-top:var(--s4)}
.trust{display:inline-flex;align-items:center;gap:6px;background:#fff;border:1px solid var(--g15);
  border-radius:var(--r-md);padding:8px 13px;font-size:var(--fs-sm);font-weight:700;color:var(--g70);box-shadow:var(--sh-1)}
.trust b{color:var(--red)}

/* Reveal on scroll (scroll-experience와 연동, reduced-motion 존중) */
.reveal{opacity:0;transform:translateY(18px);transition:opacity var(--t-slow) var(--e-out),transform var(--t-slow) var(--e-out)}
.reveal.in{opacity:1;transform:none}

/* Layout helpers */
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--s5)}
.section{padding:var(--s9) 0}
.grid{display:grid;gap:var(--s5)} .g2{grid-template-columns:repeat(2,1fr)} .g3{grid-template-columns:repeat(3,1fr)} .g4{grid-template-columns:repeat(4,1fr)}
::selection{background:var(--pink)}
hr{border:none;border-top:1px solid var(--g15);margin:var(--s6) 0}

/* Dark mode — OPT-IN only (<html data-theme="dark">). 자동 prefers-color-scheme 미사용.
   소비자 LP·마케팅물은 BI 라이트 팔레트(흰·RED·핑크·잉크) 고정 = 가독성·BI 정합 보장.
   다크가 필요한 내부 도구만 data-theme="dark"로 명시 적용. */
[data-theme="dark"]{--white:#141416;--ink:#F4F4F5;--g08:#1E1E22;--g15:#2A2A30;--g40:#8A8A93;--g70:#B8B8C0;--red-soft:#2A1216;
  --grad-soft:radial-gradient(1200px 620px at 82% -12%,#2A1216 0%,#141416 60%)}
[data-theme="dark"] .btn-secondary,[data-theme="dark"] .card,[data-theme="dark"] .trust{background:#1B1B1F}
[data-theme="dark"] .bottom-cta{background:rgba(20,20,22,.82)}

/* Responsive */
@media (max-width:860px){ .g4{grid-template-columns:1fr 1fr} .g3{grid-template-columns:1fr} }
@media (max-width:560px){ :root{--fs-h1:2.3rem;--fs-display:3rem;--fs-h2:1.8rem} .g2,.g4{grid-template-columns:1fr} }
@media print{ a{color:inherit} .bottom-cta{display:none} body{-webkit-print-color-adjust:exact;print-color-adjust:exact} }