/* ═══════════════════════════════════════════════════════════════
   UNI:SOL 디자인 토큰 v1 — ui-spec.md 2절 · audit-baseline 반영
   [1단계 원칙] 시각 변화 0에 가깝게: 값 통합은 회색만, 나머지는 현행 최다값을 토큰 값으로 채택.
   - 빨강/초록/주황/청록 = 스펙 제안값 대신 현행 최다 사용값 (동인 확정 2026-09-06)
   - 기존 변수(--bg, --text, --enui-* 등 224개)는 이름 유지 — token-map.md 의 매핑으로 값만 연결
   - 이 파일은 모든 페이지 "최상단" 로드 (다른 CSS보다 먼저)
   ═══════════════════════════════════════════════════════════════ */
:root {
  /* ── Brand · interaction (파랑 — 스펙 그대로) ── */
  --blue-50:  #EBF3FE;   /* 현행 #EBF3FF 통합 대상(1비트 차) */
  --blue-100: #D3E4FD;
  --blue-200: #A5C8FB;
  --blue-400: #5A9BF8;   /* K 신설 — 다크 링크·아이콘용 */
  --blue-500: #3182F6;   /* primary */
  --blue-600: #1B64DA;   /* hover / pressed */
  --blue-700: #1550B3;

  /* ── Semantic status (현행 최다값 채택 — 스펙 제안값 아님) ──
   [H 규칙] --*-700 토큰은 텍스트 전용. 배경은 500·600만. 유색 배경 위 글자는 --text-on-brand 또는 --gray-900 고정. */
  --red-500:   #F04452;   /* B① 2026-09-06: 최다 사용값(228회)으로 통일 — #FF453A(164회)도 이 토큰으로 흡수 */
  --green-500: #00D084;
  --amber-500: #E8A13C;
  --teal-500:  #00B493;
  --teal-600:  #007A63;   /* C 신설 — 채워진 버튼 배경(흰 글자 5.3) */
  --teal-700:  #00614F;   /* C 신설 — 텍스트·배지(흰 배경 7.5) */
  --yellow-500: #F7C948;  /* H: 현행값 이관(정식 토큰) */
  --yellow:    var(--yellow-500);   /* 호환 별칭(다크 override 는 toss-vars 유지) */
  --purple-500: #8A74F9;  /* B③ 신설 — 역할 미정(텍스트·포인트) */
  --purple-600: #6D4FE0;  /* I 신설 — 보라 배경 전용(흰 글자 5.47) */
  --amber-600: #E8590C;
  --amber-700: #9A5B00;   /* 3E③ 신설 — 텍스트 전용(흰 배경 5.4) */
  --teal-50:  #E6FAF5;    /* 4F① 신설 — 상태 배지(정상) 배경 */
  --teal-100: #C6F0E6;    /* 4F① 신설 — 상태 배지(발전 중) 배경 */
  --amber-50: #FFF4E5;    /* 4F① 신설 — 상태 배지(경고) 배경 */
  --red-50:   #FFF0F0;    /* 4F① 신설 — 상태 배지(오류) 배경 */
  --red-700:   #C0212C;   /* 3E⑥ 신설 — 텍스트 전용(15px 소형 수치용) */   /* B④ 신설 — amber 와 별개 진주황(hex 잔존 금지) */
  --accent-energy: var(--teal-500);   /* 발전·에너지 역할 별칭 */

  /* ── Gray ramp — 스펙 10단계. 이 외 회색 사용 금지 ── */
  --gray-50:  #F9FAFB;
  --gray-100: #F2F4F6;
  --gray-200: #E5E8EB;
  --gray-300: #D1D6DB;
  --gray-400: #B0B8C1;
  --gray-500: #8B95A1;
  --gray-600: #65707E;   /* D 2026-09-06: tertiary가 sunken 위 4.56 확보(구 #6B7684) */
  --gray-700: #4E5968;
  --gray-800: #333D4B;
  --gray-900: #191F28;

  /* ── Surface / text 역할 별칭 — 화면 코드는 이 별칭 우선 ── */
  --bg-page:        var(--gray-100);  /* H: gray-50 폐기 — 현행 페이지색 유지 */
  --bg-surface:     #FFFFFF;
  --bg-sunken:      var(--gray-100);
  --border-subtle:  var(--gray-200);
  --border-strong:  var(--gray-300);
  --text-primary:   var(--gray-900);
  --text-secondary: var(--gray-700);
  --text-tertiary:  var(--gray-600);  /* C 2026-09-06: gray-500→600 — 흰 배경 대비 4.53(크롬 점검) */
  --text-disabled:  var(--gray-400);
  --text-on-brand:  #FFFFFF;
  --text-inverse:       var(--gray-50);   /* D4 — 어두운 배경 위 본문(라이트 회색 텍스트 별칭) */
  --text-inverse-muted: var(--gray-400);  /* D4 — 어두운 배경 위 보조 */
  --text-link:      var(--blue-600);
  --btn-primary-bg:    var(--blue-600);   /* C 신설 — 주 버튼(흰 글자 대비) */
  --btn-primary-hover: var(--blue-700);

  /* ── [5D①] 상태·선택 역할 별칭 — 화면 코드의 원시 램프 직접 참조 금지(5C 재발 방지).
     다크 대응은 참조 대상 토큰의 다크 재정의를 그대로 따른다(별도 다크 블록 불필요) ── */
  --bg-selected:        var(--blue-50);
  --bg-disabled:        var(--border-subtle);   /* 라이트 gray-200 동일값 · 다크 자동 전환 */
  --border-focus:       var(--blue-500);        /* 포커스 링 — 양 테마 동일 블루 */
  --state-ok-bg:        var(--teal-50);
  --state-ok-strong-bg: var(--teal-100);
  --state-ok-text:      var(--teal-700);
  --state-warn-bg:      var(--amber-50);
  --state-warn-text:    var(--amber-700);
  --state-err-bg:       var(--red-50);
  --state-err-text:     var(--red-700);
  --state-err-solid:    var(--red-500);         /* 채운 위험 배경·위험 강조(양 테마 동일) */
  --state-done-bg:      var(--teal-600);        /* 완료 채움(흰 글자 전제) */
  --state-idle:         var(--gray-500);        /* 유휴 점·중립 표시(중간 회색, 양 테마 공용) */

  /* ── 폰트 ── */
  --font-sans: 'Pretendard Variable', Pretendard, -apple-system, 'Noto Sans KR', sans-serif;
  --font-mono: 'JetBrains Mono', Consolas, monospace;

  /* ── 타이포 (스펙 2-3 · 정의만 — 이번 단계 미적용) ── */
  --t-display-size: 28px; --t-display-lh: 38px; --t-display-w: 700;
  --t-h1-size: 22px;      --t-h1-lh: 32px;      --t-h1-w: 700;
  --t-h2-size: 18px;      --t-h2-lh: 26px;      --t-h2-w: 600;
  --t-h3-size: 16px;      --t-h3-lh: 24px;      --t-h3-w: 600;
  --t-body-size: 15px;    --t-body-lh: 24px;    --t-body-w: 400;
  --t-body-sm-size: 14px; --t-body-sm-lh: 21px; --t-body-sm-w: 400;
  --t-caption-size: 13px; --t-caption-lh: 18px; --t-caption-w: 400;
  --t-label-size: 12px;   --t-label-lh: 16px;   --t-label-w: 600;

  /* ── 간격 4px 배수 (정의만) ── */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px; --sp-5: 20px;
  --sp-6: 24px; --sp-8: 32px; --sp-10: 40px; --sp-14: 56px; --sp-20: 80px;

  /* ── 모서리 (정의만) ── */
  --radius-4: 4px;    /* 배지·태그·칩 */
  --radius-8: 8px;    /* 버튼·입력·셀렉트 */
  --radius-12: 12px;  /* 카드·패널 */
  --radius-16: 16px;  /* 모달·바텀시트 */
  --radius-pill: 999px;

  /* ── 그림자 4단계 (정의만 — 기존 --shadow-sm/md/lg 와 이름 비충돌) ── */
  --shadow-0: none;
  --shadow-1: 0 1px 3px rgba(25,31,40,.08);
  --shadow-2: 0 4px 16px rgba(25,31,40,.10);
  --shadow-3: 0 12px 32px rgba(25,31,40,.14);
}

/* ── 다크 셋 — 현행 토글 방식 2종 모두 커버: html/body .dark 클래스(주 방식, F-22) + data-theme(일부) ── */
html.dark, body.dark, [data-theme="dark"] {
  /* C 2026-09-06: 임시값 폐기 — 앱 현행 다크 값 채택(현행 유지 원칙) */
  --bg-page:        #121416;
  --bg-surface:     #1E2025;
  --bg-sunken:      #0C0E10;
  --border-subtle:  #33373E;
  --border-strong:  #4A4F58;
  --text-primary:   #F2F4F6;
  --text-secondary: #B0B8C1;
  --text-tertiary:  #8B95A1;   /* 표면 위 5.36 */
  --text-disabled:  #6B7684;
  --text-link:      var(--blue-400);   /* K: 다크 링크 대비 */
  --blue-50:        #1A2B45;   /* 선택 배경용 */
  --teal-700:       #2ED3B0;   /* 배지 텍스트용 */
  --amber-700:      #FFB84D;   /* 3E③ 다크 손실 수치 */
  --teal-50:        #123A31;   /* 4F① 다크 배지 배경 */
  --teal-100:       #16493D;
  --amber-50:       #3D2E14;
  --red-50:         #43181C;
  --red-700:        #FF8A94;   /* 4F①: 다크 배지(red-50 위 6.72) — 구 red-500 참조는 4.06 미달로 상향 */
}

/* ── H: OS 다크(prefers) 초기 페인트 대응 — 토글 클래스 부여 전 구간(F-21 설계 승계) ── */
@media (prefers-color-scheme: dark) {
  /* I: 저장값 없을 때만 OS 다크 적용 — 저장 라이트(html.light / data-theme=light)면 미적용 */
  :root:not(.light):not([data-theme="light"]) {
  /* C 2026-09-06: 임시값 폐기 — 앱 현행 다크 값 채택(현행 유지 원칙) */
  --bg-page:        #121416;
  --bg-surface:     #1E2025;
  --bg-sunken:      #0C0E10;
  --border-subtle:  #33373E;
  --border-strong:  #4A4F58;
  --text-primary:   #F2F4F6;
  --text-secondary: #B0B8C1;
  --text-tertiary:  #8B95A1;   /* 표면 위 5.36 */
  --text-disabled:  #6B7684;
  --text-link:      var(--blue-400);   /* K: 다크 링크 대비 */
  --blue-50:        #1A2B45;   /* 선택 배경용 */
  --teal-700:       #2ED3B0;   /* 배지 텍스트용 */
  --amber-700:      #FFB84D;   /* 3E③ 다크 손실 수치 */
  --teal-50:        #123A31;   /* 4F① 다크 배지 배경 */
  --teal-100:       #16493D;
  --amber-50:       #3D2E14;
  --red-50:         #43181C;
  --red-700:        #FF8A94;   /* 4F①: 다크 배지(red-50 위 6.72) — 구 red-500 참조는 4.06 미달로 상향 */
}
}

/* I: 라이트 값은 :root 에만 — 명시 라이트 블록 폐기(토글 회귀 원인). 저장 라이트는 아래 @media 의 :not 가드가 담당 */

/* ── C-R3: 플레이스홀더 전역 — 하드코딩(#757575 등) 대체 ── */
::placeholder { color: var(--text-tertiary); }

/* 4C: 숫자 열 세로 정렬(스펙 2-3) — 수치 표시 계열 전역. app.css 국소 규칙에서 승격 */
table td, .num, .metric, .result-card .v, .stat-v, .kpi-v {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

/* ── D2→E1: 입력·아웃라인 테두리 전역 — var(--border) 경유분 해결.
   !important 대신 커스텀 프로퍼티 재정의: 페이지 CSS 의 border:1px solid var(--border) 가
   이 요소 범위 안에서만 강한 값으로 해석된다. 포커스(--blue-500)·오류(--red-500)는
   border-color 직접 지정이라 자연히 이김(!important 는 오류 상태 테두리를 막아 폐기 — E1).
   체크박스·라디오 제외 — checked 상태 border-color 표현 보호. */
input:not([type=checkbox]):not([type=radio]), select, textarea,
.btn-secondary, .btn-outline {
  --border: var(--border-strong);
  --border-subtle: var(--border-strong);
}

/* ── F-3a: 폼 컨트롤 UA 기본 폰트(Arial 등) 차단 — 페이지 폰트 상속 ── */
button, input, select, textarea { font: inherit; }

/* ── H-4a: 폼 라벨 기본 층 — 캡션(tertiary)과 분리 ── */
label, .form-label, .t-section-label { color: var(--text-secondary); }