*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
  :root {
    --navy:   #0f172a;
    --navy2:  #1e293b;
    --blue:   #3b82f6;
    --red:    #ef4444;
    --orange: #f97316;
    --yellow: #eab308;
    --green:  #22c55e;
    --gray:   #94a3b8;
    --bg:     #f1f5f9;
    --white:  #ffffff;
    --radius: 12px;
  }

  /* ══════════════════════════════════════════════════════════════
     DataMix Design System v2 — 공식 Artifact 기준 (Sprint: Official
     UI Migration)

     이 블록은 Claude Artifact b2ae3a0c-4383-4dbf-ae29-43aeed6d752c
     ("DataMix v1.0 — Sprint07.2 Progress Intelligence Dashboard")의
     디자인 토큰·컴포넌트 CSS를 그대로 이식한 것이다 — HTML 마크업이나
     JS 로직은 가져오지 않았다(그건 SAMPLE 데이터를 렌더링하는 프로토타입
     전용 코드다). 이 파일에서 실제로 쓰는 건 :root 토큰 값과 클래스별
     CSS 규칙뿐이고, 데이터는 전부 실제 API 응답을 그대로 쓴다.

     이전 v1(Sprint08.2 초안, wooi-datalab-pages 기반)은 폐기했다 —
     사용자가 "그건 공식 디자인이 아니다"라고 명시적으로 확정했다.

     여전히 전부 --dm- / .dm- 접두어를 쓴다 — 위 :root의 레거시 토큰
     (--blue/--red/--green/--bg 등, 값이 다름)과 이름이 겹치면 아직
     마이그레이션되지 않은 Chapter들의 색이 조용히 바뀌어버리기 때문
     이다. 이 접두어 자체는 v1에서 이미 충돌 없이 검증된 구조라 그대로
     재사용했다(사용자 지시 §0: "구조적 장점만 재사용 가능").
     ══════════════════════════════════════════════════════════════ */
  :root {
    color-scheme: light;
    --dm-page: #f7f6f3; --dm-surface: #ffffff; --dm-surface-2: #f1efe9;
    --dm-ink: #14161a; --dm-ink-2: #52514e; --dm-ink-3: #898781;
    --dm-line: #e3e0d6; --dm-ring: rgba(11,11,11,0.09);
    --dm-brand: #2a78d6; --dm-brand-dark: #1c5cab; --dm-brand-wash: #e8f1fc;
    --dm-vs: #d95926; --dm-vs-wash: #fbe9df;
    --dm-good: #0ca30c; --dm-good-wash: #e4f6e4;
    --dm-warning: #9c6a10; --dm-warning-wash: #fbf0da;
    --dm-critical: #b23131; --dm-critical-wash: #fbe6e6;
    --dm-purple: #6d4fc4; --dm-purple-wash: #efeafb;
    --dm-font: "Pretendard", "Apple SD Gothic Neo", "Malgun Gothic", system-ui, -apple-system, sans-serif;
    --dm-radius: 14px; --dm-radius-sm: 10px; --dm-radius-pill: 999px;
    --dm-sidebar-w: 220px;
  }
  :root[data-theme="dark"] {
    color-scheme: dark;
    --dm-page: #0d0d0d; --dm-surface: #17181b; --dm-surface-2: #1e2024;
    --dm-ink: #f4f3f0; --dm-ink-2: #c3c2b7; --dm-ink-3: #8f8d86;
    --dm-line: #2c2c2a; --dm-ring: rgba(255,255,255,0.10);
    --dm-brand: #3987e5; --dm-brand-dark: #6db0f2; --dm-brand-wash: #142a40;
    --dm-vs: #e0793f; --dm-vs-wash: #3a2318;
    --dm-good: #0ca30c; --dm-good-wash: #123216;
    --dm-warning: #e3a530; --dm-warning-wash: #3a2c0c;
    --dm-critical: #e66767; --dm-critical-wash: #3a1414;
    --dm-purple: #9985ea; --dm-purple-wash: #241d3d;
  }
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
      color-scheme: dark;
      --dm-page: #0d0d0d; --dm-surface: #17181b; --dm-surface-2: #1e2024;
      --dm-ink: #f4f3f0; --dm-ink-2: #c3c2b7; --dm-ink-3: #8f8d86;
      --dm-line: #2c2c2a; --dm-ring: rgba(255,255,255,0.10);
      --dm-brand: #3987e5; --dm-brand-dark: #6db0f2; --dm-brand-wash: #142a40;
      --dm-vs: #e0793f; --dm-vs-wash: #3a2318;
      --dm-good: #0ca30c; --dm-good-wash: #123216;
      --dm-warning: #e3a530; --dm-warning-wash: #3a2c0c;
      --dm-critical: #e66767; --dm-critical-wash: #3a1414;
      --dm-purple: #9985ea; --dm-purple-wash: #241d3d;
    }
  }