/* JEDA Classic 디자인 토큰 — design/build_tokens.py 가 만든다. 직접 고치지 않는다. */
:root, [data-theme="light"] {
  color-scheme: light;
  /* 기본 토큰 (팔레트) — 화면에서 직접 쓰지 않는다 */
  --base-navy-700: #213985;
  --base-blue-500: #1B7DC1;
  --base-cyan-400: #36B8EA;
  --base-green-500: #2EAD6C;
  --base-gold-400: #F2B84B;
  --base-orange-500: #F2704B;
  --base-gray-900: #333333;
  --base-gray-600: #6E6E6E;
  --base-gray-100: #F2F2F2;
  --base-white: #FFFFFF;
  --base-navy-800: #1A2D6B;
  --base-navy-50: #EEF1F9;
  --base-navy-100: #DDE3F3;
  --base-blue-700: #15629A;
  --base-green-700: #1B7348;
  --base-green-50: #E8F6EE;
  --base-gold-800: #8A5A00;
  --base-gold-50: #FDF5E4;
  --base-orange-700: #B23F1D;
  --base-orange-50: #FDEEE9;
  --base-gray-500: #8A8F98;
  --base-gray-700: #5B5F66;
  --base-gray-200: #E6E7EA;
  --base-gray-300: #DCDEE3;
  --base-gray-400: #C6C9D2;
  --base-gray-50: #F7F8FB;

  /* 의미 토큰 — 화면 코드는 이것만 쓴다 */
  --color-bg: var(--base-gray-100);  /* 페이지 바탕 */
  --color-surface: var(--base-white);  /* 패널·카드·머리글 바탕 (머리글은 흰색 — 회사 심볼 규칙) */
  --color-surface-sunken: var(--base-gray-50);  /* 줄무늬 행·읽기 전용 칸·코드 */
  --color-line: var(--base-gray-300);  /* 구분선 */
  --color-line-strong: var(--base-gray-400);  /* 입력칸 테두리 */
  --color-text: var(--base-gray-900);  /* 본문 */
  --color-text-sub: var(--base-gray-600);  /* 보조 글자 (라벨·설명·시각) */
  --color-text-inverse: var(--base-white);  /* 주 버튼 글자 */
  --color-primary: var(--base-navy-700);  /* 주 버튼·선택 탭·제목 강조 */
  --color-primary-hover: var(--base-navy-800);  /* 주 버튼 hover·누름 */
  --color-primary-text: var(--base-navy-700);  /* Navy 글자 — 제목 강조·선택 탭 (어두운 화면은 밝힌 Navy) */
  --color-link: var(--base-blue-700);  /* 링크·글자 버튼 */
  --color-focus: var(--base-blue-500);  /* 포커스 테두리 (2px) */
  --color-selected: var(--base-navy-50);  /* 선택된 행·바뀐 칸 바탕 */
  --color-selected-strong: var(--base-navy-100);  /* 선택+hover */
  --color-accent: var(--base-cyan-400);  /* 드문 강조 (장식·선택 표시 막대). 글자 금지 */
  --color-ok: var(--base-green-700);  /* 정상 글자·아이콘 */
  --color-ok-fill: var(--base-green-500);  /* 정상 점·막대 */
  --color-ok-bg: var(--base-green-50);  /* 정상 배지·메시지 바탕 */
  --color-warn: var(--base-gold-800);  /* 주의 글자·아이콘 */
  --color-warn-fill: var(--base-gold-400);  /* 주의 점·막대 */
  --color-warn-bg: var(--base-gold-50);  /* 주의 배지·메시지 바탕 */
  --color-bad: var(--base-orange-700);  /* 오류·위험 글자·아이콘, 위험 버튼 */
  --color-bad-fill: var(--base-orange-500);  /* 오류 점·막대 */
  --color-bad-bg: var(--base-orange-50);  /* 오류 배지·메시지 바탕 */
  --color-bad-solid: var(--base-orange-700);  /* 위험 버튼 바탕 (흰 글자) */
  --color-unknown: var(--base-gray-700);  /* 모름(확인 전·수집 안 됨) 글자 */
  --color-unknown-fill: var(--base-gray-500);  /* 모름 점·막대 */
  --color-unknown-bg: var(--base-gray-200);  /* 수집 안 된 날 칸 */
  --color-table-head: var(--base-navy-700);  /* 보고형 표 머리줄 바탕 (D-5) */
  --color-table-head-text: var(--base-white);  /* 보고형 표 머리줄 글자 */

  /* 차트 계열 — 순서 고정, 8개 넘으면 '기타' */
  --series-1: #1B7DC1;
  --series-2: #EB6834;
  --series-3: #1BAF7A;
  --series-4: #EDA100;
  --series-5: #E87BA4;
  --series-6: #008300;
  --series-7: #6250D6;
  --series-8: #E34948;
  --series-other: #9AA1AB;
  --seq-1: #CDE2FB;
  --seq-2: #9EC5F4;
  --seq-3: #6DA7EC;
  --seq-4: #3987E5;
  --seq-5: #256ABF;
  --seq-6: #184F95;
  --seq-7: #0D366B;
  --cal-1: #CDE2FB;  --cal-on-1: #333333;
  --cal-2: #9EC5F4;  --cal-on-2: #333333;
  --cal-3: #6DA7EC;  --cal-on-3: #333333;
  --cal-4: #184F95;  --cal-on-4: #FFFFFF;
  --cal-5: #0D366B;  --cal-on-5: #FFFFFF;

  /* 글자 — Pretendard 4가지 굵기 (BluStoneDXT) */
  --font-family: "Pretendard", "Malgun Gothic", "맑은 고딕", system-ui, sans-serif;
  --font-weight-light: 300;     /* 큰 숫자 단위·보조 설명 */
  --font-weight-regular: 500;   /* 본문 (Pretendard Medium) */
  --font-weight-strong: 600;    /* 라벨·표 머리줄·소제목 */
  --font-weight-heavy: 800;     /* 화면 제목·KPI 숫자 */
  --font-size-caption: 12px;    /* 최소. 시각·각주 (11px 이하 쓰지 않는다) */
  --font-size-small: 13px;      /* 라벨·표 머리줄·배지 */
  --font-size-body: 15px;       /* 본문·입력칸·표 본문 */
  --font-size-section: 17px;    /* 패널 제목 */
  --font-size-title: 20px;      /* 화면 제목 */
  --font-size-display: 28px;    /* KPI 숫자 */
  --line-height-tight: 1.25;
  --line-height-body: 1.5;

  /* 간격 — 4px 단위 */
  --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px;
  --space-5: 24px; --space-6: 32px; --space-7: 40px; --space-8: 48px;

  /* 모서리 — BluStoneDXT */
  --radius-s: 4px;     /* 입력칸·배지 */
  --radius-m: 6px;     /* 버튼·카드·패널 */
  --radius-l: 10px;    /* 대화상자·큰 상자 */
  --radius-pill: 999px;

  /* 높이 */
  --control-s: 32px;   /* 표 안 버튼·세그먼트 */
  --control-m: 40px;   /* 기본 버튼·입력칸 (휴대폰 최소 터치 높이와 같다) */
  --control-l: 48px;   /* 로그인·주요 동작 */
  --header-height: 56px;

  /* 그림자 — 떠 있는 것에만 */
  --shadow-card: 0 1px 3px rgba(33, 57, 133, .10), 0 1px 2px rgba(33, 57, 133, .06);
  --shadow-raised: 0 4px 12px rgba(33, 57, 133, .14);   /* 대화상자·메뉴 */

  /* 움직임 — 상태 변화만 */
  --transition-fast: 120ms ease-out;

  /* 화면 폭 기준 (CSS 변수는 @media 에 못 쓰므로 참고값) — 휴대폰 ≤640px · 좁은 화면 ≤1024px · 넓은 화면 */
}

/* 어두운 화면 — 운영체제 설정을 따른다. data-theme="dark"/"light" 를 단 요소(보통 <html>)는 설정과 상관없이 그 모양 */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --color-bg: #16181C;
    --color-surface: #1E2126;
    --color-surface-sunken: #262A30;
    --color-line: #33383F;
    --color-line-strong: #4A5059;
    --color-text: #E8EAED;
    --color-text-sub: #A3A9B2;
    --color-text-inverse: #FFFFFF;
    --color-primary: #4767CF;
    --color-primary-hover: #3A58BE;
    --color-primary-text: #A5B6EE;
    --color-link: #7DB8E8;
    --color-focus: #7DB8E8;
    --color-selected: #2A3550;
    --color-selected-strong: #2A3550;
    --color-accent: #36B8EA;
    --color-ok: #5CC98F;
    --color-ok-fill: #5CC98F;
    --color-ok-bg: #262A30;
    --color-warn: #F2C46B;
    --color-warn-fill: #F2C46B;
    --color-warn-bg: #262A30;
    --color-bad: #F7967A;
    --color-bad-fill: #F7967A;
    --color-bad-bg: #262A30;
    --color-bad-solid: #B8452A;
    --color-unknown: #A3A9B2;
    --color-unknown-fill: #7D838C;
    --color-unknown-bg: #262A30;
    --color-table-head: #262A30;
    --color-table-head-text: #E8EAED;
    --series-1: #3987E5;
    --series-2: #D95926;
    --series-3: #199E70;
    --series-4: #C98500;
    --series-5: #D55181;
    --series-6: #008300;
    --series-7: #9085E9;
    --series-8: #E66767;
    --series-other: #6B7280;
    --seq-1: #0D366B;
    --seq-2: #184F95;
    --seq-3: #256ABF;
    --seq-4: #3987E5;
    --seq-5: #6DA7EC;
    --seq-6: #9EC5F4;
    --seq-7: #CDE2FB;
    --cal-1: #0D366B;  --cal-on-1: #E8EAED;
    --cal-2: #184F95;  --cal-on-2: #E8EAED;
    --cal-3: #6DA7EC;  --cal-on-3: #16181C;
    --cal-4: #9EC5F4;  --cal-on-4: #16181C;
    --cal-5: #CDE2FB;  --cal-on-5: #16181C;
    --shadow-card: 0 1px 3px rgba(0, 0, 0, .40);
    --shadow-raised: 0 4px 12px rgba(0, 0, 0, .50);
  }
}
[data-theme="dark"] {
  color-scheme: dark;
  --color-bg: #16181C;
  --color-surface: #1E2126;
  --color-surface-sunken: #262A30;
  --color-line: #33383F;
  --color-line-strong: #4A5059;
  --color-text: #E8EAED;
  --color-text-sub: #A3A9B2;
  --color-text-inverse: #FFFFFF;
  --color-primary: #4767CF;
  --color-primary-hover: #3A58BE;
  --color-primary-text: #A5B6EE;
  --color-link: #7DB8E8;
  --color-focus: #7DB8E8;
  --color-selected: #2A3550;
  --color-selected-strong: #2A3550;
  --color-accent: #36B8EA;
  --color-ok: #5CC98F;
  --color-ok-fill: #5CC98F;
  --color-ok-bg: #262A30;
  --color-warn: #F2C46B;
  --color-warn-fill: #F2C46B;
  --color-warn-bg: #262A30;
  --color-bad: #F7967A;
  --color-bad-fill: #F7967A;
  --color-bad-bg: #262A30;
  --color-bad-solid: #B8452A;
  --color-unknown: #A3A9B2;
  --color-unknown-fill: #7D838C;
  --color-unknown-bg: #262A30;
  --color-table-head: #262A30;
  --color-table-head-text: #E8EAED;
  --series-1: #3987E5;
  --series-2: #D95926;
  --series-3: #199E70;
  --series-4: #C98500;
  --series-5: #D55181;
  --series-6: #008300;
  --series-7: #9085E9;
  --series-8: #E66767;
  --series-other: #6B7280;
  --seq-1: #0D366B;
  --seq-2: #184F95;
  --seq-3: #256ABF;
  --seq-4: #3987E5;
  --seq-5: #6DA7EC;
  --seq-6: #9EC5F4;
  --seq-7: #CDE2FB;
  --cal-1: #0D366B;  --cal-on-1: #E8EAED;
  --cal-2: #184F95;  --cal-on-2: #E8EAED;
  --cal-3: #6DA7EC;  --cal-on-3: #16181C;
  --cal-4: #9EC5F4;  --cal-on-4: #16181C;
  --cal-5: #CDE2FB;  --cal-on-5: #16181C;
  --shadow-card: 0 1px 3px rgba(0, 0, 0, .40);
  --shadow-raised: 0 4px 12px rgba(0, 0, 0, .50);
}