/* ═══════════════════════════════════════════════════════════════
   법마디 디자인 토큰 — 네이비 테마
   초록(H145) → 네이비(H215) 회전. 명도·채도 곡선은 원본 유지.
   램프 2개: brand(악센트·CTA·링크) / neutral(텍스트·테두리·표면)
   ─ 이 파일이 유일한 색 정의처다. 컴포넌트 CSS에 hex 를 쓰지 말 것.
   ═══════════════════════════════════════════════════════════════ */

:root {
  /* ── 브랜드 램프 (네이비) ── */
  --brand-50: #EDF1F7;
  --brand-100: #DBE4F0;
  --brand-200: #C6D3E7;
  --brand-300: #A8BEDC;
  --brand-400: #8DABD4;
  --brand-500: #6D8DBB;
  --brand-600: #3D5E8B;
  --brand-700: #2D4D7A;
  --brand-800: #1F385C;
  --brand-900: #172436;
  --brand-950: #0D131C;

  /* ── 중립 램프 (네이비 틴트) ── */
  --neutral-50: #F4F6F8;
  --neutral-100: #E4E8ED;
  --neutral-200: #D4DBE4;
  --neutral-300: #B8C0CC;
  --neutral-400: #8B98AA;
  --neutral-500: #7A879A;
  --neutral-600: #5D6A7D;
  --neutral-700: #4A586B;
  --neutral-800: #2D3540;
  --neutral-900: #1A222E;
  --neutral-950: #10141A;

  /* ── RGB 채널 토큰 — 알파가 붙는 자리에 쓴다: rgb(var(--brand-600-rgb) / .3) ── */
  --brand-50-rgb: 237 241 247;
  --brand-100-rgb: 219 228 240;
  --brand-200-rgb: 198 211 231;
  --brand-300-rgb: 168 190 220;
  --brand-400-rgb: 141 171 212;
  --brand-500-rgb: 109 141 187;
  --brand-600-rgb: 61 94 139;
  --brand-700-rgb: 45 77 122;
  --brand-800-rgb: 31 56 92;
  --brand-900-rgb: 23 36 54;
  --brand-950-rgb: 13 19 28;
  --neutral-50-rgb: 244 246 248;
  --neutral-100-rgb: 228 232 237;
  --neutral-200-rgb: 212 219 228;
  --neutral-300-rgb: 184 192 204;
  --neutral-400-rgb: 139 152 170;
  --neutral-500-rgb: 122 135 154;
  --neutral-600-rgb: 93 106 125;
  --neutral-700-rgb: 74 88 107;
  --neutral-800-rgb: 45 53 64;
  --neutral-900-rgb: 26 34 46;
  --neutral-950-rgb: 16 20 26;
  --surface-rgb: 255 255 255;
  --success-rgb: 45 122 78;
  --danger-rgb: 188 71 71;

  /* ── 시맨틱: 라이트 ── */
  --bg: var(--neutral-50);
  --surface: #FFFFFF;
  --surface-raised: #FFFFFF;
  --text-main: var(--neutral-900);
  --text-muted: var(--neutral-700);
  --text-subtle: var(--neutral-500);
  --border: var(--neutral-200);
  --border-strong: var(--neutral-300);
  --primary: var(--brand-600);
  --primary-dark: var(--brand-700);
  --primary-light: var(--brand-50);
  --on-primary: #FFFFFF;
  --sidebar-bg: var(--neutral-950);
  --success: #2D7A4E;
  --success-bg: #EAF5EE;
  --danger: #BC4747;
  --danger-bg: #FBEDED;
  --warning: #8A6D1F;
  --accent-gold: #8A6D1F;
  /* 배지 배경용 골드 — 전경용(--accent-gold)과 역할이 반대다.
     어두운 글자(--on-accent-gold)를 얹으므로 밝은 쪽이 대비가 산다.
     라이트 6.38:1 · 다크 9.30:1 */
  --accent-gold-surface: #B8922D;
  --on-accent-gold: var(--brand-950);
  --card-bg: var(--surface);
  --border-color: var(--border);
  --bg-secondary: var(--neutral-100);
  --bg-hover: var(--neutral-100);
  --footer-bg: var(--neutral-950);
  --footer-text: var(--neutral-500);
  --footer-border: var(--neutral-800);
  --footer-warn: #8A6D1F;

  /* ── 타이포 스케일 (137개 → 12단계) ── */
  --font-sans: 'Pretendard Variable', Pretendard, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --text-2xs: 0.6875rem;  /* 11px */
  --text-xs: 0.75rem;  /* 12px */
  --text-sm: 0.8125rem;  /* 13px */
  --text-base: 0.875rem;  /* 14px */
  --text-md: 1rem;  /* 16px */
  --text-lg: 1.125rem;  /* 18px */
  --text-xl: 1.3125rem;  /* 21px */
  --text-2xl: 1.625rem;  /* 26px */
  --text-3xl: 2rem;  /* 32px */
  --text-4xl: 2.5rem;  /* 40px */
  --text-5xl: 3rem;  /* 48px */
  --text-6xl: 4rem;  /* 64px */
  --leading-tight: 1.25;
  --leading-snug: 1.4;
  --leading-normal: 1.6;
  --leading-relaxed: 1.75;
  --tracking-tight: -0.02em;
  --tracking-normal: 0;
  --tracking-wide: 0.04em;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
  --weight-black: 800;

  /* ── 형태 (39개 → 10단계) ── */
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 10px;
  --radius-xl: 12px;
  --radius-2xl: 14px;
  --radius-3xl: 16px;
  --radius-4xl: 20px;
  --radius-5xl: 24px;
  --radius-full: 9999px;

  /* ── 고도 (150개 → 5단계 + 브랜드 틴트) ── */
  --shadow-e1: 0 1px 2px rgba(16,20,26,0.05);
  --shadow-e2: 0 2px 8px rgba(16,20,26,0.07);
  --shadow-e3: 0 4px 16px rgba(16,20,26,0.10);
  --shadow-e4: 0 8px 24px rgba(16,20,26,0.14);
  --shadow-e5: 0 16px 48px rgba(16,20,26,0.18);
  --shadow-e-brand-sm: 0 2px 8px rgba(61,94,139,0.22);
  --shadow-e-brand-md: 0 4px 16px rgba(61,94,139,0.28);
  --shadow-e-brand-lg: 0 8px 32px rgba(61,94,139,0.34);

  /* ── 레이아웃 (기존 값 유지) ── */
  --frame-pad: 28px;
  --frame-max: 1080px;
  --sidebar-width: 280px;
}

@media (max-width: 900px) { :root { --frame-pad: 16px; } }

/* ── 시맨틱: 다크 ──
   이 사이트는 다크가 기본값이다(app-inline-ko.js: savedDarkMode !== "false").
   컴포넌트별 오버라이드가 아니라 토큰 재정의로만 처리한다. ── */
html.dark-mode, body.dark-mode {
  --bg: var(--neutral-950);
  --surface: var(--neutral-900);
  --surface-raised: var(--neutral-800);
  --text-main: var(--neutral-200);
  --text-muted: var(--neutral-400);
  --text-subtle: var(--neutral-500);
  --border: var(--neutral-800);
  --border-strong: var(--neutral-700);
  --primary: var(--brand-400);
  --primary-dark: var(--brand-300);
  --primary-light: var(--brand-900);
  --on-primary: var(--neutral-950);
  --sidebar-bg: var(--neutral-950);
  --success: #5AAD7E;
  --success-bg: #16261D;
  --success-rgb: 90 173 126;
  --danger-rgb: 224 138 138;
  --danger: #E08A8A;
  --danger-bg: #2E1A1A;
  --warning: #D4B45A;
  --accent-gold: #D4B45A;
  --accent-gold-surface: #D4B45A;
  --on-accent-gold: var(--brand-950);
  --card-bg: var(--surface);
  --border-color: var(--border);
  --bg-secondary: var(--neutral-800);
  --bg-hover: var(--neutral-800);
  --footer-bg: var(--neutral-950);
  --footer-text: var(--neutral-500);
  --footer-border: var(--neutral-800);
  --footer-warn: #D4B45A;
}

/* JS 가 꺼졌거나 아직 실행 전일 때의 답. theme-init.js 가 실행되면
   html 에 .dark-mode / .theme-explicit 가 붙어 이 블록은 물러난다. */
@media (prefers-color-scheme: dark) {
  html:not(.theme-explicit):not(.dark-mode) {
    --bg: var(--neutral-950);
    --surface: var(--neutral-900);
    --surface-raised: var(--neutral-800);
    --text-main: var(--neutral-200);
    --text-muted: var(--neutral-400);
    --text-subtle: var(--neutral-500);
    --border: var(--neutral-800);
    --border-strong: var(--neutral-700);
    --primary: var(--brand-400);
    --primary-dark: var(--brand-300);
    --primary-light: var(--brand-900);
    --on-primary: var(--neutral-950);
    --sidebar-bg: var(--neutral-950);
    --success: #5AAD7E;
    --success-bg: #16261D;
    --success-rgb: 90 173 126;
    --danger-rgb: 224 138 138;
    --danger: #E08A8A;
    --danger-bg: #2E1A1A;
    --warning: #D4B45A;
    --accent-gold: #D4B45A;
    --accent-gold-surface: #D4B45A;
    --on-accent-gold: var(--brand-950);
    --card-bg: var(--surface);
    --border-color: var(--border);
    --bg-secondary: var(--neutral-800);
    --bg-hover: var(--neutral-800);
    --footer-bg: var(--neutral-950);
    --footer-text: var(--neutral-500);
    --footer-border: var(--neutral-800);
    --footer-warn: #D4B45A;
  }
}