/* =============================================================================
 * swnm 디자인 토큰 — 단일 소스(Single Source of Truth)
 * -----------------------------------------------------------------------------
 * 색은 여기 정의된 토큰만 쓴다. CSS/JSP에 hex 하드코딩 금지.
 *   사용 예:  color: var(--text-primary);  background: var(--bg-surface);
 *
 * 다크/라이트: 기본값은 다크(:root). 라이트는 아래 두 신호 중 하나면 적용됨
 *   - html[data-theme="light"]   ★ 표준(확정 2026-06-11) — 신규 코드는 이것만 사용
 *   - body.body--light           (레거시 — 기존 메인 앱, data-theme로 점진 치환)
 *   → 마이그레이션 동안 둘 다 지원하지만 목표는 [data-theme] 단일화.
 *
 * 값 근거: claudedocs/ui-conventions/02_color_tokens.md (swnm 실제 최다 사용색 기반)
 * 1차 = 핵심 색 15종. chart/gauge 등 도메인 색은 2차 토큰으로 후속.
 * ============================================================================= */

:root {
  /* --- 배경 --- */
  --bg-page:        #0E172A;   /* 페이지 전체 바탕(최외곽 캔버스) */
  --bg-surface:     #1E2D4A;   /* 카드/패널 면 (실제 카드 최다 네이비, 페이지서 떠 보임) */
  --bg-surface-alt: #26344F;   /* 카드 내부 행/구획 (surface와 어울리는 네이비) */
  --bg-hover:       #2E363E;   /* 호버 강조 */

  /* --- 텍스트 --- */
  --text-primary:   #FFFFFF;   /* 본문/제목 */
  --text-secondary: #CFE0EF;   /* 보조 텍스트 */
  --text-muted:     #8799A8;   /* 흐린/캡션 */

  /* --- 보더 --- */
  --border:         #2E363E;   /* 기본 선 */
  --border-strong:  #586169;   /* 강조 선 */

  /* --- 입력 컨트롤 (input/select/textarea 면·선) --- */
  --bg-input:       #0E172A;   /* 입력칸 배경 (페이지/카드와 구분) */
  --border-input:   #586169;   /* 입력칸 테두리 */

  /* --- 모달 --- */
  --bg-modal:       #232B32;   /* 모달 패널 면 (카드와 구분되는 전용색) */
  --overlay:        rgba(0, 0, 0, 0.5);  /* 모달 뒷배경 (다크·라이트 공통) */

  /* --- 브랜드 / 강조 (다크·라이트 공통) --- */
  --primary:        #2563EB;   /* 주색: 링크/값/강조 (※ 버튼 primary는 다크 권장 — 버튼 규칙 참조) */
  --accent:         #A2FFFE;   /* 시안 하이라이트 */

  /* --- 상태 (공통) --- */
  --status-normal:   #0BD89E;  /* 정상/success */
  --status-caution:  #FFE74D;  /* 주의/warning (채움색) */
  --status-critical: #FF594A;  /* 위험/danger */
  --status-caution-text: #FFE74D;  /* 주의 "글자"용 — 다크는 노랑 OK / 라이트는 아래서 주황 오버라이드 */
  --status-normal-text:  #0BD89E;  /* 정상 "글자"용 — 다크는 #0BD89E OK / 라이트는 아래서 진한 초록 오버라이드 */

  /* 상태 연한 배경 (배지/하이라이트용) */
  --status-normal-bg:   rgba(11, 216, 158, 0.15);
  --status-caution-bg:  rgba(255, 231, 77, 0.15);
  --status-critical-bg: rgba(255, 89, 74, 0.15);
  --primary-bg:         rgba(37, 99, 235, 0.15);    /* info 뱃지 연배경 */
  --neutral-bg:         rgba(135, 153, 168, 0.15);  /* neutral 뱃지 연배경 */

  /* ===== 간격 (spacing) — margin/padding/gap 등 모든 간격은 이 스케일에서만 ===== */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 32px;

  /* ===== 타이포 ===== */
  --font-sans: 'Pretendard', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-xs:   12px;   /* 캡션/뱃지 */
  --font-sm:   13px;   /* 보조 */
  --font-base: 14px;   /* 본문 기본 */
  --font-md:   16px;   /* 강조 본문 */
  --font-lg:   18px;   /* 소제목 */
  --font-xl:   20px;   /* 제목 */
  --font-2xl:  24px;   /* 큰 제목 */
  --font-3xl:  36px;   /* 큰 지표 숫자 (KPI 값 등) */
  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;

  /* ===== radius ===== */
  --radius-sm:   4px;    /* 입력/작은 요소 */
  --radius-md:   8px;    /* 버튼/칩 */
  --radius-lg:   12px;   /* 카드/모달 */
  --radius-pill: 9999px; /* 알약형 뱃지 */

  /* ===== elevation (shadow) — 다크 기본값, 라이트는 아래 오버라이드 ===== */
  --shadow-sm: 0 1px 4px rgba(0, 0, 0, 0.30);   /* 미세 */
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.40);  /* 카드 */
  --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.45);  /* 드롭다운/오버레이 */
  --shadow-xl: 0 16px 40px rgba(0, 0, 0, 0.50); /* 모달/큰 팝업 */

  /* ===== z-index 레이어 (위로 갈수록 앞) ===== */
  --z-base:     1;     /* 일반 쌓임 */
  --z-dropdown: 100;   /* 드롭다운/툴팁 */
  --z-sticky:   200;   /* 고정 헤더/툴바 */
  --z-overlay:  1000;  /* 사이드바/오버레이 */
  --z-modal:    2000;  /* 모달 */
  --z-toast:    3000;  /* 토스트(항상 최상단) */

  /* ===== 레이아웃 골격 (스펙: claudedocs/ui-conventions/10_layout_spec) =====
   * ⚠️ 아직 기존 .layout/.content--fixed 에 연결 안 함(추가만, 무해).
   *    실제 정리(매직넘버·!important·--sb-width 235/255 충돌 제거)는 하네스 단계(B)에서.
   *    신규 레이아웃 코드는 처음부터 이 토큰을 사용. */
  --edge-gap:    24px;   /* 화면 가장자리 ↔ header/sidebar */
  --header-h:    50px;   /* 헤더 높이 */
  --toolbar-h:   64px;   /* 툴바 높이(메뉴 있을 때) */
  --sidebar-w:   255px;  /* 사이드바 폭 (255 단일 — 기존 235/255 충돌 해소 목표값) */
  --layout-gap:  36px;   /* sidebar/header ↔ content 간격 */
  /* content 오프셋 = 위 값들로 파생(수동 매직넘버 315/112 대체) */
  --content-left-derived:  calc(var(--edge-gap) + var(--sidebar-w) + var(--layout-gap));      /* =315 */
  --content-right-derived: var(--edge-gap);                                                   /* =24  */
  --content-top-derived:   calc(var(--edge-gap) + var(--header-h) + var(--toolbar-h) + var(--layout-gap)); /* 툴바 포함 */
  /* 반응형 브레이크포인트(참고용 상수 — @media는 var() 불가라 리터럴 사용):
   * 태블릿 하한 1024 / 1280 / 1440 / 1920. 1024~1279=사이드바 햄버거 숨김. */

  /* ===== 2차 — 데이터품질/차트 도메인 색 (히트맵·차트라인·KPI·범례) =====
   * data-quality-tokens.css(페이지 로컬 병렬 팔레트)를 단일소스로 흡수.
   * 범위이탈/임계는 1차(--primary/--status-critical)로 매핑(소비처서 직접 참조).
   * 아래 4색은 1차 대응이 없어 차트 토큰으로 등록(값 유지). JS는 getComputedStyle로 읽음.
   * 2026-06-24 · jiwon · 데이터품질 2차 색 단일소스 흡수(하이브리드 매핑) */
  --chart-measured: #727CF5;   /* 차트 측정값 라인 */
  --chart-valid:    #22C55F;   /* 정상(Valid) */
  --chart-holding:  #F59E0B;   /* 정체(Holding) */
  --chart-missing:  #FF99B7;   /* 결측(Missing) */
  --chart-pipe:     #4EA2FF;   /* 지도 파이프 폴리라인 (테마 공통) */
  --chart-incident: #8B7BFF;   /* 이상감지 히트맵 incident(이벤트) — measured(인디고)와 구분되는 바이올렛 */
  --chart-measured-bg: color-mix(in srgb, var(--chart-measured) 14%, transparent);
  --chart-valid-bg:    color-mix(in srgb, var(--chart-valid)    14%, transparent);
  --chart-holding-bg:  color-mix(in srgb, var(--chart-holding)  14%, transparent);
  --chart-missing-bg:  color-mix(in srgb, var(--chart-missing)  14%, transparent);
}

/* =============================== 라이트 모드 =============================== */
/* 두 가지 테마 신호 모두에 대응 */
html[data-theme="light"],
body.body--light {
  /* --- 배경 --- */
  --bg-page:        #FFFFFF;   /* 페이지 = 흰색 */
  --bg-surface:     #F7F8FA;   /* 카드 = 흰 페이지서 살짝 회색 + --border로 경계 */
  --bg-surface-alt: #F1F5F9;   /* 카드 내부 행/구획 (surface보다 살짝 진함) */
  --bg-hover:       #E2E8F0;

  /* --- 텍스트 --- */
  --text-primary:   #1A202C;
  --text-secondary: #2D3748;
  --text-muted:     #6B7280;

  /* --- 보더 --- */
  --border:         #E2E8F0;
  --border-strong:  #CBD5E0;

  /* --- 입력 컨트롤 --- */
  --bg-input:       #EBF1FB;   /* 입력칸 배경 (옅은 파랑, search-bar 실측) */
  --border-input:   #E2E8F0;   /* 입력칸 테두리 */

  /* --- 모달 (overlay는 :root 공통) --- */
  --bg-modal:       #FFFFFF;   /* 라이트 모달 패널 = 순백 */

  /* 브랜드/강조/상태는 다크와 공통(위 :root 값 유지). */
  /* 단, 주의 "글자"는 흰 배경에서 노랑이 안 읽혀 주황으로 (채움색 #FFE74D는 유지) */
  --status-caution-text: #FF9600;
  /* 정상 "글자"도 흰/연배경에서 밝은 초록이 안 읽혀 진한 초록으로 (채움색 #0BD89E는 유지, emerald-700, WCAG AA) */
  --status-normal-text: #047857;

  /* elevation 라이트 (다크보다 옅게) */
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.12);
  --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.16);
  --shadow-xl: 0 16px 40px rgba(0, 0, 0, 0.20);

  /* 간격·타이포·radius·z-index는 테마 무관 → :root 값 그대로 사용 */

  /* 2차 차트색 라이트 (흰 배경 대비). -bg는 color-mix라 자동 추종 */
  --chart-measured: #4F46E5;
  --chart-valid:    #15803D;
  --chart-holding:  #D97706;
  --chart-missing:  #BE185D;
  --chart-incident: #6338F0;   /* 라이트: 흰 배경 대비 깊은 바이올렛 */
}

/* =============================================================================
 * [마이그레이션 메모]
 * - 이 파일은 "새 이름 토큰"만 정의한다. 기존 --bg/--text/--panel/--line/--gray-*
 *   (main.css) 는 건드리지 않으므로 기존 페이지 색 변화 없음(안전, 추가만).
 * - 기존 코드를 점진적으로 var(--bg-page)/var(--text-primary)/... 로 치환해 흡수.
 * - 신규 코드(사람·AI)는 처음부터 이 토큰만 사용.
 * ============================================================================= */