/* =========================================================
   CHUN SYSTEM — Design Tokens v2  (light / dark)
   - 모든 색·크기는 이 변수만 사용한다. 하드코딩 금지.
   - 테마: <html data-theme="light|dark">  (미지정 시 OS 설정 따름)
   ========================================================= */

@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.min.css");

:root,
:root[data-theme="light"] {
  color-scheme: light;

  /* Surface */
  --bg:            #F4F5F7;   /* 페이지 바탕 */
  --surface:       #FFFFFF;   /* 카드·테이블 */
  --surface-2:     #F8F9FA;   /* 테이블 헤더, 필터바 */
  --surface-3:     #EEF0F3;   /* hover */
  --surface-sel:   #F6ECEE;   /* 선택 행 */
  --hover-row:     #F3F5F8;
  --hover-col:     rgba(29, 91, 208, .045);
  --border:        #E4E7EB;
  --border-strong: #CFD4DA;
  --grid:          #EDEFF2;   /* 테이블 셀 구분선(옅게) */

  /* Text */
  --text:   #15181C;          /* 본문·숫자 */
  --text-2: #49515C;          /* 라벨·헤더 */
  --text-3: #6B7380;          /* 보조·단위 */
  --text-4: #9AA1AB;          /* 비활성·0값 */
  --text-on-solid: #FFFFFF;
  --ink-on-light:  #15181C;   /* 밝은 배경(사용자 형광펜 등) 위 글자 — 테마 무관 고정 */

  /* Brand (로고 레드 #8A2632 기반) */
  --brand:        #8A2632;    /* 버튼 배경, 활성 탭 */
  --brand-hover:  #721E29;
  --brand-text:   #8A2632;    /* 링크·브랜드 글자 */
  --brand-soft:   #F6ECEE;

  /* Market semantics — 한국식 (상승=빨강, 하락=파랑) */
  --up:        #CF222E;
  --up-soft:   #FDECEE;
  --down:      #1D5BD0;
  --down-soft: #EAF0FC;
  --flat:      #6B7380;

  /* Status */
  --warn:      #9A5B00;  --warn-soft:    #FFF4E0;
  --ok:        #17794D;  --ok-soft:      #E7F5EE;
  --info:      #1D5BD0;  --info-soft:    #EAF0FC;

  /* Diverging heat scale (-3 … +3) — Z-Score·히트맵 전용 */
  --heat-n3: #2A5FC4; --heat-n3-text: #FFFFFF;
  --heat-n2: #A9C2EE; --heat-n2-text: #0F2A5C;
  --heat-n1: #DDE7F9; --heat-n1-text: #15181C;
  --heat-0:  #F1F2F4; --heat-0-text:  #49515C;
  --heat-p1: #FBE0E3; --heat-p1-text: #15181C;
  --heat-p2: #F2A7AE; --heat-p2-text: #5C0E15;
  --heat-p3: #C8222E; --heat-p3-text: #FFFFFF;

  /* Chart series (순서 고정) */
  --c1: #8A2632; --c2: #1D5BD0; --c3: #17794D; --c4: #B7791F; --c5: #6B4FBB; --c6: #6B7380;

  --focus-ring: 0 0 0 3px rgba(138, 38, 50, .28);
  --shadow-1: 0 1px 2px rgba(16, 24, 40, .05);
  --shadow-2: 0 6px 20px rgba(16, 24, 40, .10);
}

:root[data-theme="dark"] {
  color-scheme: dark;

  --bg:            #0D1015;
  --surface:       #151920;
  --surface-2:     #1A1F27;
  --surface-3:     #222833;
  --surface-sel:   #2A1E23;
  --hover-row:     #1D232C;
  --hover-col:     rgba(92, 155, 255, .06);
  --border:        #272E39;
  --border-strong: #38414E;
  --grid:          #20262F;

  --text:   #E7EAEF;
  --text-2: #B6BDC8;
  --text-3: #8C95A3;
  --text-4: #5E6774;
  --text-on-solid: #FFFFFF;
  --ink-on-light:  #15181C;   /* 밝은 배경(사용자 형광펜 등) 위 글자 — 테마 무관 고정 */

  --brand:        #B23A49;
  --brand-hover:  #C64B5A;
  --brand-text:   #F08C98;
  --brand-soft:   #2C1C21;

  --up:        #FF6B6B;
  --up-soft:   #35191C;
  --down:      #5C9BFF;
  --down-soft: #172438;
  --flat:      #8C95A3;

  --warn: #F2B544; --warn-soft: #33270F;
  --ok:   #4CC38A; --ok-soft:   #13291F;
  --info: #5C9BFF; --info-soft: #172438;

  --heat-n3: #3C6FD8; --heat-n3-text: #FFFFFF;
  --heat-n2: #26457E; --heat-n2-text: #DCE6FA;
  --heat-n1: #1A2638; --heat-n1-text: #C9D4E6;
  --heat-0:  #1C2129; --heat-0-text:  #8C95A3;
  --heat-p1: #33201F; --heat-p1-text: #EBC9C9;
  --heat-p2: #6E2A31; --heat-p2-text: #FFE1E4;
  --heat-p3: #D0404B; --heat-p3-text: #FFFFFF;

  --c1: #F08C98; --c2: #5C9BFF; --c3: #4CC38A; --c4: #E3B341; --c5: #A58BFA; --c6: #8C95A3;

  --focus-ring: 0 0 0 3px rgba(240, 140, 152, .35);
  --shadow-1: 0 1px 2px rgba(0, 0, 0, .4);
  --shadow-2: 0 8px 24px rgba(0, 0, 0, .45);
}

/* OS 설정 따르기 (data-theme 미지정 시) */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) { /* chun-theme.js가 로드 전 data-theme를 넣으므로 보통 사용되지 않음 */ }
}

:root {
  /* Typography */
  --font: "Pretendard Variable", Pretendard, "Nanum Gothic", -apple-system, "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", "D2Coding", ui-monospace, monospace;
  --fs-2xs: 11px;  /* 테이블 단위·각주 */
  --fs-xs:  12px;  /* 테이블 헤더, 배지 */
  --fs-sm:  13px;  /* 테이블 본문(compact), 라벨 */
  --fs-md:  14px;  /* 기본 본문, 테이블(comfortable) */
  --fs-lg:  16px;  /* 카드 제목 */
  --fs-xl:  20px;  /* 페이지 제목 */
  --fs-2xl: 26px;  /* KPI 값 */
  --fs-3xl: 32px;  /* 히어로 값 */
  --lh-tight: 1.25; --lh: 1.5;
  --fw-r: 400; --fw-m: 500; --fw-sb: 600; --fw-b: 700;

  /* Space (4px grid) */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 20px; --s6: 24px; --s8: 32px; --s10: 40px;

  /* Radius */
  --r-xs: 4px; --r-sm: 6px; --r-md: 8px; --r-lg: 12px; --r-pill: 999px;

  /* Layout */
  --nav-h: 56px;
  --page-max: 1680px;
  --row-compact: 28px;
  --row-comfort: 36px;
}