/*
 * ============================================================================
 *  밀리AI 디자인 토큰 — 디자인 참고 저장소 1:1 이식본
 * ============================================================================
 *
 *  원본: .reference/miliai-hddn/src/app/design-system/tokens.css
 *  기준: 43a6835 (2026-08-06, "Merge pull request #30 from hddnfig/codex/restore-static-root")
 *  부분 반영: 43a6835 의 토큰 변경은 **전부 보류**했다(아래). 앵커는 "어디까지 검토했는가"라 옮긴다.
 *
 *  ── 43a6835 에서 보류한 토큰 변경과 그 이유 (2026-08-06 사용자 확인) ──────────
 *    참고가 치수 토큰을 한꺼번에 손봤다. 우리 값은 전부 앵커와 같아(= 우리가 손댄 적 없어)
 *    3자 비교로는 "이식"이지만, **레이아웃 전반을 다른 작업에서 손보는 중**이라 유지한다.
 *    다음 실행에서 다시 검토할 것 — 그때 docs 의 §3-2 치수 토큰 경고를 먼저 읽는다.
 *
 *      --mili-content-max            1440px → 1200px(= --mili-container-standard-max)
 *      --mili-page-padding             32px → 48px
 *      --mili-tablet-grid-gutter       16px → 20px
 *      --mili-tablet-page-padding      24px → 32px
 *      --mili-mobile-grid-gutter       12px → 16px
 *      --mili-mobile-page-padding      16px → 20px
 *      --mili-container-wide-max              신설 1440px
 *      --mili-container-standard-max          신설 1200px
 *      --mili-sidebar-collapsed-width  80px → 삭제
 *        ↑ 아이콘 LNB 축소 모드(1024–1279px)를 참고가 통째로 걷어내며 함께 지웠다.
 *          우리는 reference.css:147 이 아직 이 토큰을 쓰므로 지우면 그 미디어쿼리가 깨진다.
 *
 *  ⚠️ 이 파일은 손으로 고치지 않는다.
 *     참고 저장소가 바뀌면 원본 diff 를 그대로 옮긴다.
 *     우리 사정으로 값을 바꿔야 하면 theme/variables.css 에서 덮어쓰고 이유를 주석으로 남긴다.
 *     (현재 덮어쓰는 것: --mili-font-sans / --mili-font-metric — 한글 폴백 스택 때문)
 *
 *  스코프 규약(참고와 동일):
 *      :root        = 다크(기본)
 *      .mili-light  = 라이트 오버라이드
 *      .mili-dark   = 다크 스코프 표식(값을 재정의하지 않는다. [data-palette] 분기에만 쓰인다)
 *
 *  참고는 이 클래스를 <main> 에 붙이지만(PortalApp.tsx:292), 우리는 SiteMesh 구조상 <body> 에 붙인다.
 *  SiteMesh3 은 콘텐츠 페이지 <body> 의 class 를 데코레이터 <body> 로 넘겨준다(검증 완료).
 * ============================================================================
 */

:root {
  color-scheme: dark;
  --mili-app-bg: #0E1013;
  --mili-sidebar-bg: #090A0C;
  --mili-surface: #15181C;
  --mili-surface-raised: #1E2227;
  --mili-surface-interactive: #2B3036;
  --mili-text: #F8F9FA;
  --mili-text-secondary: #ADB5BD;
  --mili-text-muted: #868E96;
  --mili-border: #2B3036;
  --mili-border-strong: #3F454C;
  --mili-primary: #B4FF39;
  --mili-primary-strong: #C7FF68;
  --mili-primary-bg: #2D4511;
  --mili-primary-border: #79AB25;
  --mili-primary-on: #18210E;
  --mili-info: #62B6F5;
  --mili-info-bg: #102E44;
  --mili-success: #63D392;
  --mili-success-bg: #163725;
  --mili-warning: #F6B84A;
  --mili-warning-bg: #3C2A0B;
  --mili-error: #FF8790;
  --mili-error-bg: #421C22;

  --mili-font-family: Pretendard;
  --mili-font-family-numeric-title: "Orbitron Variable";
  --mili-font-sans: var(--mili-font-family), -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mili-font-metric: var(--mili-font-family-numeric-title), Orbitron, sans-serif;
  --mili-focus: #C7FF68;
  --mili-control-height: 32px;
  --mili-control-height-lg: 40px;
  --mili-control-height-sm: 24px;
  --mili-font-size-t1: 0.75rem;
  --mili-font-size-t2: 0.8125rem;
  --mili-font-size-t3: 0.875rem;
  --mili-font-size-t4: 1rem;
  --mili-font-size-t5: 1.125rem;
  --mili-font-size-t6: 1.25rem;
  --mili-font-size-t7: 1.5rem;
  --mili-font-size-t8: 1.5rem;
  --mili-font-size-t9: 2rem;
  --mili-font-size-t10: 2.5rem;
  --mili-font-size-t11: 3rem;
  --mili-line-height-t1: 1rem;
  --mili-line-height-t2: 1.125rem;
  --mili-line-height-t3: 1.25rem;
  --mili-line-height-t4: 1.5rem;
  --mili-line-height-t5: 1.625rem;
  --mili-line-height-t6: 1.75rem;
  --mili-line-height-t7: 2rem;
  --mili-line-height-t8: 2.1rem;
  --mili-line-height-t9: 2.625rem;
  --mili-line-height-t10: 3.25rem;
  --mili-line-height-t11: 3.75rem;
  --mili-font-weight-regular: 400;
  --mili-font-weight-medium: 500;
  --mili-font-weight-bold: 700;
  --mili-text-xs: var(--mili-font-size-t1);
  --mili-text-sm: var(--mili-font-size-t3);
  --mili-text-md: var(--mili-font-size-t4);
  --mili-text-lg: var(--mili-font-size-t6);
  --mili-text-xl: var(--mili-font-size-t9);
  --mili-line-tight: var(--mili-line-height-t3);
  --mili-line-body: var(--mili-line-height-t4);
  --mili-text-label-size: var(--mili-font-size-t3);
  --mili-text-label-line-height: var(--mili-line-height-t3);
  --mili-text-badge-size: var(--mili-font-size-t1);
  --mili-text-badge-line-height: var(--mili-line-height-t1);
  --mili-space-1: 4px;
  --mili-space-2: 8px;
  --mili-space-3: 12px;
  --mili-space-4: 16px;
  --mili-space-5: 20px;
  --mili-space-6: 24px;
  --mili-space-8: 32px;
  --mili-radius-none: 0;
  --mili-radius-button: 5px;
  --mili-radius-control: 10px;
  --mili-radius-filter: 8px;
  /* 2026-09-18 16px → 12px 되돌림. VOD/PBL 목록 카드(node 3499:83845, get_design_context 직접
     확인) 재실측 중 이 토큰이 8px 요구와 충돌하는 걸 발견해 사용자에게 재확인 — 마이페이지
     개요 화면도 실제로는 12px가 맞다고 확인(2026-08-27 16px 결정 철회), VOD/PBL 카드도
     별도 예외 없이 이 전역 토큰(12px)을 그대로 쓰기로 결정. */
  --mili-radius-card: 12px;
  --mili-radius-badge: 99px;
  --mili-radius-pill: 9999px;
  /* 2026-09-18 신설(GNB 모바일 하단 탭바 항목, node 2859:109854 재실측) — 기존 8종 어느 것과도
     안 맞아 사용자 확인 후 새 칸 추가. */
  --mili-radius-tab: 14px;
  --mili-sidebar-width: 240px;
  --mili-sidebar-collapsed-width: 80px;
  --mili-topbar-height: 72px;
  --mili-content-max: 1440px;
  --mili-grid-columns: 12;
  --mili-grid-gutter: 24px;
  --mili-page-padding: 32px;
  --mili-tablet-grid-columns: 8;
  --mili-tablet-grid-gutter: 16px;
  --mili-tablet-page-padding: 24px;
  --mili-mobile-grid-columns: 4;
  --mili-mobile-grid-gutter: 12px;
  --mili-mobile-page-padding: 16px;
  --mili-motion-fast: 170ms;
  --mili-motion-standard: 200ms;
}

.mili-light {
  --mili-focus: #78AE28;
  /* 2026-08-24 Figma 재확인(node 2178:37017 GNB 인스턴스, 8qAqeXw50F8GKDGkeW0Pua): 페이지 배경과
     사이드바 카드 배경이 서로 뒤바뀌어 있었다 — 시안은 페이지가 흰색(Neutral/50 #ffffff)이고
     그 위에 얹힌 사이드바 카드가 옅은 회색(Neutral/100 #f8f9fa)이다. */
  --mili-app-bg: #FFFFFF;
  --mili-sidebar-bg: #F8F9FA;
  --mili-surface: #FFFFFF;
  --mili-surface-raised: #FFFFFF;
  --mili-surface-interactive: #F1F3F5;
  --mili-text: #1E2227;
  --mili-text-secondary: #5C636B;
  --mili-text-muted: #868E96;
  --mili-border: #DEE2E6;
  --mili-border-strong: #CED4DA;
  --mili-primary: #618F20;
  --mili-primary-strong: #4D731B;
  --mili-primary-bg: #E8F8C8;
  --mili-primary-border: #94C83A;
  --mili-primary-on: #FFFFFF;
  --mili-info: #1B6DA8;
  --mili-info-bg: #EFF8FF;
  --mili-success: #237A4B;
  --mili-success-bg: #EAF7EF;
  --mili-warning: #A96A08;
  --mili-warning-bg: #FFF6E5;
  --mili-error: #BA3B45;
  --mili-error-bg: #FFF0F1;
}

[data-palette="ocean"]  { --course-accent: #1B6DA8; --course-header: #1B6DA8; }
[data-palette="sky"]    { --course-accent: #0B759F; --course-header: #0B759F; }
[data-palette="violet"] { --course-accent: #5D3D9D; --course-header: #5D3D9D; }
[data-palette="plum"]   { --course-accent: #823671; --course-header: #823671; }
[data-palette="coral"]  { --course-accent: #A23E31; --course-header: #A23E31; }
[data-palette="amber"]  { --course-accent: #935B1B; --course-header: #935B1B; }
[data-palette="teal"]   { --course-accent: #19756D; --course-header: #19756D; }
[data-palette="rose"]   { --course-accent: #923852; --course-header: #923852; }

.mili-dark [data-palette="ocean"]  { --course-accent: #62B6F5; --course-header: #1B6DA8; }
.mili-dark [data-palette="sky"]    { --course-accent: #59C1F2; --course-header: #0B759F; }
.mili-dark [data-palette="violet"] { --course-accent: #AA83F2; --course-header: #5D3D9D; }
.mili-dark [data-palette="plum"]   { --course-accent: #D878BD; --course-header: #823671; }
.mili-dark [data-palette="coral"]  { --course-accent: #F68168; --course-header: #A23E31; }
.mili-dark [data-palette="amber"]  { --course-accent: #E8AC45; --course-header: #935B1B; }
.mili-dark [data-palette="teal"]   { --course-accent: #4FC5B5; --course-header: #19756D; }
.mili-dark [data-palette="rose"]   { --course-accent: #E87894; --course-header: #923852; }