/* Pretendard(본문·한글) — self-host. Variable woff2 단일 파일로 전 웨이트(100~900). OFL 오픈소스.
   원본: cdn.jsdelivr.net/npm/pretendard@1.3.9 · 웹서빙 사본: ./fonts/pretendard/ (오프라인 대비) */
@font-face{
  font-family:'Pretendard';
  src:url('./fonts/pretendard/PretendardVariable.woff2') format('woff2');
  font-weight:100 900; font-style:normal; font-display:swap;
}

/* ============================================================
   Lecture DS — Tokens (CSS custom properties)
   출처: system/foundations/tokens/*.json (DTCG 원본) + 브랜드 가이드.
   이 파일은 "소비용" 파생물. 값 변경은 DTCG 원본을 먼저 고치고 여기 반영.
   상태: 브랜드 출처 = official / 그 외 = candidate (color-usage.md 규칙 준수)
   ============================================================ */

/* --- Web fonts: Mark Pro (디스플레이, self-host · MyFonts/FontFont 정품 OTF) ---
   원본 마스터: resources/font/MyFonts Order .../FontFont - Mark Pro *.otf
   웹서빙 사본: ./fonts/markpro/*.otf  (경로는 이 CSS 기준 상대 → styleguide·decks 공용)
   웨이트 매핑: Bold=700 · Heavy=800 · Black=900.
   디스플레이 제목은 대부분 weight:800 → Heavy로 렌더.
   (더 무겁게=900 Black, 더 가볍게=700 Bold. 나머지 Extlight~Medium은 필요 시 추가) */
@font-face{ font-family:'Mark Pro'; src:url('./fonts/markpro/markpro-medium.otf') format('opentype'); font-weight:500; font-style:normal; font-display:swap; }
@font-face{ font-family:'Mark Pro'; src:url('./fonts/markpro/markpro-bold.otf')  format('opentype'); font-weight:700; font-style:normal; font-display:swap; }
@font-face{ font-family:'Mark Pro'; src:url('./fonts/markpro/markpro-heavy.otf') format('opentype'); font-weight:800; font-style:normal; font-display:swap; }
@font-face{ font-family:'Mark Pro'; src:url('./fonts/markpro/markpro-black.otf') format('opentype'); font-weight:900; font-style:normal; font-display:swap; }

:root {
  /* --- Brand: OPEN MINT ramp (official) --- */
  --mint-50:  #E5FCFA;  --mint-100: #CFF7F7; --mint-200: #A6F2F2;
  --mint-300: #73EDEB;  --mint-400: #42E6DE; --mint-500: #28D7D2; /* primary */
  --mint-600: #03C9C7;  --mint-700: #05B0B0; --mint-800: #0A9696; --mint-900: #0D7D7D;
  --mint-calm: #0A3634; /* 차분한 딥그린 — 대면적/다크 배경 (candidate) */
  --brand-primary: var(--mint-500);

  /* --- Neutral: PATH BLACK ramp (official) --- */
  --neutral-900: #191919; /* PATH BLACK */
  --neutral-800: #333333; --neutral-700: #4D4D4D; --neutral-600: #666666;
  --neutral-500: #808080; --neutral-400: #999999; --neutral-300: #B2B2B2;
  --neutral-200: #D9D9D9; --neutral-100: #F0F0F0; --neutral-white: #FFFFFF;
  --neutral-offwhite: #FEFEFE; /* 다크 위 텍스트·배지 (모드 불변) */
  --neutral-black: #000000;  /* Basic/Black — 제목 등 (덱 관측) */
  --neutral-cool:  #8B9095;  /* Grayscale/Gray05 — eyebrow 뮤트 (candidate) */

  /* --- Functional: 목적별 색 (candidate — color-usage.md) --- */
  --fn-positive: var(--mint-500);
  --fn-info:     #2F6BFF;
  --fn-warning:  #F5A623;
  --fn-danger:   #E5484D;
  --fn-neutral:  var(--neutral-500);

  /* --- Critique: 좋은 예 / 나쁜 예 (Do / Don't) — 덱 `dodont` 패턴 (candidate) ---
     Do = 민트 계열(브랜드 정렬, ≈ mint-800) · Don't = 따뜻한 레드(주의) */
  --do-fg:   #0A9273; --do-bg:   #E7F7F1; --do-border:   #CBEADE; --do-mark:   #12A97F;
  --dont-fg: #CF3B28; --dont-bg: #FCEBEA; --dont-border: #F5D5D3; --dont-mark: #E0503B;

  /* --- Difficulty: mint 명도 단계 (candidate) --- */
  --diff-beginner:     var(--mint-200);
  --diff-intermediate: var(--mint-500);
  --diff-advanced:     var(--mint-calm);

  /* --- Type: family (D4: Pretendard 본문 + Mark Pro 디스플레이) --- */
  --font-sans: 'Pretendard', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --font-display: 'Mark Pro', var(--font-sans);
  /* sizes (px @ 1920×1080) */
  --fs-display: 160px; --fs-cover-subject: 140px; --fs-title-xl: 100px;
  --fs-title-page: 70px; --fs-header: 40px; --fs-subtitle: 36px;
  --fs-eyebrow: 28px; --fs-badge: 30px; --fs-body: 24px; --fs-caption: 18px;
  /* emphasis (다크 위 텍스트 위계 = opacity) */
  --emph-full: 1; --emph-muted: .6; --emph-faint: .3; --emph-ghost: .2;

  /* --- Spacing scale --- */
  --sp-4: 4px; --sp-8: 8px; --sp-12: 12px; --sp-16: 16px; --sp-20: 20px;
  --sp-24: 24px; --sp-32: 32px; --sp-40: 40px; --sp-48: 48px; --sp-64: 64px; --sp-80: 80px;

  /* --- Radius / border --- */
  --radius-sm: 4px; --radius-card: 16px; --radius-pill: 100px;
  --border-hair: 1px; --border-tag: 3px; --border-emph: 4px;

  /* --- Canvas --- */
  --canvas-w: 1920px; --canvas-h: 1080px; --safe-edge: 80px;

  /* ===== TIER 2 · SEMANTIC (역할 · LIGHT 기본) ===== */
  --surface: var(--neutral-white);
  --surface-alt: var(--neutral-100);
  --text: var(--neutral-900);
  --text-title: var(--neutral-black);
  --text-muted: var(--neutral-cool);
  --border: var(--neutral-400);
  --accent: var(--brand-primary);
  --accent-subtle: color-mix(in srgb, var(--accent) 12%, transparent); /* 강조 배경/하이라이트 존 */
  --focus: var(--accent);
  /* 덱 카드/패널 표면 (candidate) — surface-alt보다 미세하게 밝은 카드 채움 + hairline */
  --surface-card: #F5F7F8;
  --surface-line: #E8EBED;
  --surface-deck-dark: #0A0A0A; /* 다크 슬라이드 배경 (강조·polar 패턴) */

  /* ===== TIER 3 · COMPONENT (부품별 · semantic 참조) ===== */
  --callout-bg: var(--neutral-white);   /* callout = 모드 불변 밝은 카드 */
  --callout-fg: var(--neutral-black);
  --callout-border: var(--accent);
  --badge-bg: var(--neutral-offwhite);  /* 번호배지 = 모드 불변 offwhite */
  --badge-fg: var(--neutral-black);
  --table-border: #B9B9B9;
  --table-head-bg: color-mix(in srgb, var(--neutral-black) 6%, transparent);
  --table-rowhead-bg: color-mix(in srgb, var(--neutral-black) 3%, transparent);
}

/* --- DARK 모드 = semantic 스왑만 (최신 덱 방향: 다크 주력) --- */
:root[data-theme="dark"] {
  --surface: var(--neutral-900);
  --surface-alt: var(--mint-calm);
  --text: var(--neutral-offwhite);
  --text-title: var(--neutral-offwhite);
  --text-muted: var(--neutral-400);
  --border: var(--neutral-700);
  --accent: var(--brand-primary);
  /* component: 표 라인은 다크에서 밝은 저알파로 (callout/badge는 모드 불변이라 유지) */
  --table-border: var(--neutral-700);
  --table-head-bg: color-mix(in srgb, var(--neutral-white) 8%, transparent);
  --table-rowhead-bg: color-mix(in srgb, var(--neutral-white) 4%, transparent);
}