/* =============================================================
   나노웹 · Design Tokens v2
   원칙: 무채색 캔버스 + 데이터비주얼이 색을 담당 + 절제된 포인트
   ============================================================= */

:root {
  /* ---------- Brand (포인트 1색 · CTA/핵심 강조에만) ---------- */
  /* 다크 바탕에서 읽히도록 원래 #1463ff보다 한 단계 밝게 */
  --brand:        #4b86ff;
  --brand-strong: #6b9dff;   /* hover — 다크에선 밝아지는 쪽이 자연스럽다 */
  --brand-ink:    #a9c4ff;
  --brand-tint:   rgba(75,134,255,0.14);

  /* ---------- Data-viz 팔레트 (차트가 색을 담당) ---------- */
  --viz-blue:   #2f6bff;
  --viz-green:  #2fb37a;
  --viz-amber:  #f6a623;
  --viz-coral:  #fb5d62;
  --viz-violet: #8b6cf0;
  --viz-sky:    #45b5e6;

  /* ---------- Neutral · dark (기본 테마) ----------
     의미는 그대로다: ink=가장 강한 글자, paper=바탕.
     값만 뒤집어서 사이트 전체가 다크로 간다.
     다크에선 "떠 있는 면일수록 밝다" — paper < paper-2 < paper-3 순으로 밝아진다. */
  --ink:        #f4f5f7;   /* 헤드라인 */
  --ink-2:      #e2e4e9;
  --text:       #c3c6cf;   /* 본문 */
  --muted:      #8d93a0;   /* 보조 */
  --faint:      #666c78;   /* 캡션/비활성 */

  --line:       rgba(255,255,255,0.10);   /* 헤어라인 */
  --line-soft:  rgba(255,255,255,0.06);

  --paper:      #0b0c0f;   /* 페이지 바탕 */
  --paper-2:    #121419;   /* 한 단계 떠 있는 면 (카드·패널) */
  --paper-3:    #1b1e25;   /* 칩·썸네일 자리 */

  --ink-bg:     #06070a;   /* 더 깊게 파인 강조 섹션 */
  --ink-bg-2:   #0f1115;
  --on-dark:        #ffffff;
  --on-dark-muted:  rgba(255,255,255,0.60);
  --on-dark-line:   rgba(255,255,255,0.12);

  /* ---------- Typography · family ---------- */
  /* 실측(2026-09-16): fastcampus·likelion·spartaclub 3/3 Pretendard 단독.
     본문은 그 합의를 따르고, display만 Wanted Sans로 갈라 차별 축을 만든다
     (Pretendard 단독 display = 국내 사이트 클리셰) */
  --font-display: "Wanted Sans Variable", "Wanted Sans", "Pretendard Variable", sans-serif;
  --font-sans: "Pretendard Variable", "Pretendard", -apple-system,
               BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --font-mono: "Geist Mono", "Fragment Mono", ui-monospace,
               "SFMono-Regular", Menlo, monospace;

  /* ---------- Typography · scale ---------- */
  --text-xs:   0.75rem;    /* 12 */
  --text-sm:   0.875rem;   /* 14 */
  --text-base: 1rem;       /* 16 */
  --text-md:   1.125rem;   /* 18 */
  --text-lg:   1.25rem;    /* 20 */
  --text-xl:   1.5rem;     /* 24 */
  --text-2xl:  1.875rem;   /* 30 */
  --text-3xl:  2.25rem;    /* 36 */
  --text-4xl:  2.8125rem;  /* 45 */
  /* 디스플레이 — 실측 기반 축소.
     3사 최대 헤딩이 32/36/32px이고 초대형 display는 0/3건.
     강의 판매(전환형)라 큰 타이포보다 정보 밀도가 우선이다. */
  --display:    clamp(1.75rem, 1.15rem + 2.4vw, 2.5rem);    /* 28 → 40 */
  --display-sm: clamp(1.5rem,  1.15rem + 1.4vw, 1.875rem);  /* 24 → 30 */

  /* ---------- Typography · weight / leading ---------- */
  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;
  /* 실측: 3사 모두 자간 normal, 본문 lh 1.5, 헤딩 lh 1.36~1.5.
     국문은 라틴만큼 조이면 깨지므로 display도 -1.5%까지만 */
  --lh-tight:   1.25;   /* 국문 display */
  --lh-snug:    1.38;   /* 헤딩 */
  --lh-normal:  1.55;   /* 본문 */
  --track-tight: -0.015em;
  --track-snug:  -0.005em;

  /* ---------- Spacing (8px 기반, 넉넉하게) ---------- */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.5rem;
  --space-6:  2rem;
  --space-7:  3rem;
  --space-8:  4.5rem;
  --space-9:  6.5rem;
  --space-10: 9rem;

  /* ---------- Radius ---------- */
  --radius-sm:   10px;
  --radius-md:   14px;
  --radius-lg:   20px;
  --radius-xl:   28px;
  --radius-pill: 999px;

  /* ---------- Shadow (중립 · 평평) ---------- */
  --shadow-hair: 0 1px 2px rgba(13,13,15,0.04);
  --shadow-sm:   0 1px 2px rgba(13,13,15,0.04), 0 6px 16px rgba(13,13,15,0.05);
  --shadow-md:   0 2px 4px rgba(13,13,15,0.04), 0 16px 40px rgba(13,13,15,0.07);

  /* ---------- Layout ---------- */
  /* 컨테이너는 하나만 둔다 — 섹션마다 폭이 다르면 좌우 끝선이 어긋나 '깨진 것'으로 읽힌다.
     미리보기 플레이어를 키우려고 1180 → 1280으로 한 단계 올렸다 (플레이어 약 900px) */
  --container: 1280px;
  --container-narrow: 760px;
}