/* ============================================================
   theme.css — AeroNexus 색 토큰 (라이트 · 다크)
   출처: sein/mockups/css/mockup-common.css (시안 A) — 값을 그대로 이식하고
   현행 index.html이 쓰던 변수명(--ink·--muted·--blue·--border·--live·--err)을
   새 토큰에 **브리지**한다. 그래야 기존 규칙 200여 줄을 안 고치고도 테마를 따라온다.

   ⛔ 지도(타일 배경·항적·공역·기상 레이어·기체 아이콘)는 이번 범위에서 제외 —
      다크에서도 지도는 밝게 남는다 (사용자 확정 2026-08-24).
      그래서 #map / .leaflet-container 배경만 토큰을 쓰지 않는다.

   테마 전환은 <html data-theme="light|dark">.
   ⚠ 시안 A 목업은 <body>에 걸지만 여기서는 **<html>이어야 한다** — 아래 «브리지 변수»는
     :root(=html)에서 계산되므로, data-theme이 body에만 있으면 브리지는 html의 라이트 값으로
     굳어 다크가 반만 먹는다 (--text-primary는 흰색인데 --ink는 검정으로 남는 식).
   ============================================================ */

:root {
  /* 브라우저 기본 UI(스크롤바·select 드롭다운·체크박스)도 테마를 따라가게 한다.
     ⚠ 이게 없으면 다크에서 <select>의 선택지 목록이 흰 배경 + 흰 글자로 떠 못 읽는다. */
  color-scheme: light;

  /* ── 시안 A 토큰 (라이트) ── */
  --bg-space: #eef2f6;
  --bg-surface: rgba(255, 255, 255, 0.94);
  --bg-surface-elevated: #ffffff;
  --bg-surface-glass: rgba(255, 255, 255, 0.85);
  --bg-surface-float: rgba(255, 255, 255, 0.97);   /* 지도 위에 뜨는 바·버튼 */
  --bg-sunken: #f6f8fa;                            /* 입력·연한 상자 (시안 A에 없어 신설) */
  --bg-hover: #eef3fa;                             /* 호버 (시안 A에 없어 신설) */

  --border-subtle: #e2e8f0;
  --border-medium: #cbd5e1;
  --border-highlight: rgba(2, 132, 199, 0.4);

  --text-primary: #0f172a;
  --text-secondary: #475569;
  --text-tertiary: #64748b;
  --text-inverse: #ffffff;

  --accent-cyan: #0284c7;
  --accent-blue: #1d4ed8;
  --accent-indigo: #4f46e5;
  --accent-teal: #0e8a8a;                          /* 홀딩 지시 계열 */
  --accent-teal-soft: #e9f6f6;
  --status-live: #059669;
  --status-live-bg: rgba(5, 150, 105, 0.12);
  --status-live-soft: #f6faf7;
  --status-warn: #b45309;
  --status-warn-bg: rgba(217, 119, 6, 0.12);
  --status-danger: #c2261f;
  --status-danger-bg: rgba(220, 38, 38, 0.12);
  --status-danger-soft: #fff4f2;
  --status-info: #0284c7;
  --chip-bg: #454b5e;                              /* AI 위험도 칩 */
  --chip-fg: #ffffff;
  --pink: #d6336c;                                 /* 경고 건수 배지 */

  /* ── 글꼴 (사용자 지시 2026-08-25 「팝업 메뉴마다 글꼴이 모두 다름 — 통일」
        + 「세련된 글자 · 모바일에서도 이쁜 글자로」) ──
     웹폰트 CDN은 금지(번들 자족성)라 **설치된 글꼴로 가장 좋은 조합**을 고른다.
     CSS 글꼴 폴백은 «낱자 단위»라 목록 앞쪽이 이긴다 — 그래서 순서가 곧 정책이다.
       Windows(이 PC 실측: Noto Sans KR VF 설치됨) : 한글·라틴·숫자 **모두 Noto Sans KR**
       Android                                     : 시스템 기본이 Noto Sans KR — **위와 같은 얼굴**
       macOS·iOS                                   : SF Pro + Apple SD Gothic Neo (그 기기의 정본 UI 글꼴)
       Noto가 없는 Windows                          : Segoe UI Variable + 맑은 고딕
     ⛔ Noto를 -apple-system보다 **앞에** 두는 이유: 한 화면에서 라틴과 한글이 서로 다른 가족에서
        오면 굵기·높이·자간이 미묘하게 어긋나 «글꼴이 다 다르다»는 인상이 남는다. 한 가족으로
        덮을 수 있는 기기에서는 한 가족으로 덮는다. (애플 기기에는 Noto가 없어 자동으로 SF+SD로 간다)
     ⚠ 한글 얼굴은 sans·mono가 **같아야** 한다 — 그래서 mono 목록 끝에도 같은 한글 글꼴을 단다.
       (Consolas·SF Mono·Roboto Mono에는 한글이 없다. 이게 화면마다 글꼴이 달라 보이던 원인.) */
  --font-sans: 'Pretendard Variable', Pretendard, 'Noto Sans KR',
               -apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo',
               'Segoe UI Variable Text', 'Segoe UI', Roboto, "Malgun Gothic", system-ui, sans-serif;
  --font-mono: 'SF Mono', 'IBM Plex Mono', 'JetBrains Mono', Consolas, 'Roboto Mono', Menlo,
               'Noto Sans KR', 'Apple SD Gothic Neo', "Malgun Gothic", monospace;
  /* 브랜드 워드마크 전용 서체 (2026-09-04, AeroNexus Korea Branding.pdf 글꼴 이식) — 위 --font-sans와
     달리 **실제로 로드된다**(features/vendor-font-iceland, CDN 아님·저장소 벤더링). 대문자 전용
     디자인이라 로고·짧은 챕터 제목에만 쓰고 본문에는 쓰지 않는다(자세한 사정: 그 폴더의 .md). */
  --font-display: 'Iceland', var(--font-sans);

  /* ── 글자 크기 계단 6단 (사용자 지시 2026-08-25 「일관성있고 간결하게」
        → 1차 적용 후 「글자가 너무 커서 더 안이쁨」으로 **한 단 낮춰 재확정**) ──
     종전에는 9·9.5·10·10.5·11·11.5·12·12.5·13·13.5·14·15·16·17·19px **15종**이 섞여 있었다.
     새로 쓰는 값은 반드시 아래 토큰 중 하나여야 한다 — px를 직접 적지 않는다.
       xs 10  = 눈금·배지·표 안 작은 글씨    sm 11 = 캡션·메타·부가설명·작은 버튼
       md 12  = **본문 기본**                lg 13 = 패널·팝오버 제목
       xl 15  = 지표 수치(고도·속도)        hero 17 = 브랜드·기체 편명
     ⚠ 2026-08-24의 「본문 12.5px」 확정을 대체한다 — 그때 지적은 «11px 본문이 안 읽힌다»였고,
       12px는 그 하한 위다. 더 줄이지 말 것. */
  --fs-xs: 10px;
  --fs-sm: 11px;
  --fs-md: 12px;
  --fs-lg: 13px;
  --fs-xl: 15px;
  --fs-hero: 17px;

  --shadow-sm: 0 2px 8px rgba(15, 23, 42, 0.06);
  --shadow-md: 0 8px 24px rgba(15, 23, 42, 0.10);
  --shadow-lg: 0 16px 40px rgba(15, 23, 42, 0.15);
  --shadow-glow: 0 0 20px rgba(2, 132, 199, 0.15);

  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-full: 9999px;

  --transition-fast: 0.15s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-smooth: 0.25s cubic-bezier(0.16, 1, 0.3, 1);

  /* ── 좌측 네비 레일 전용 색 (사용자 확정 2026-09-02 — 일반 사용자 건의 ③
       「왼쪽 side bar 배경이 흰색보다는 DarkGray가 나을듯」) ──────────────────
     ⭐ 레일만 **라이트 테마에서도 어둡다.** 그래서 일반 배경 토큰(--bg-surface 등)을
        쓰지 못하고 이 한 벌을 따로 둔다 — 레일에 «흰 바탕용» 글자색이 새어들면
        어두운 바탕에 어두운 글자가 되어 메뉴가 통째로 안 읽힌다.
     ⛔ 범위는 **레일(58px 아이콘 줄)뿐이다.** 서랍(#drawer)은 흰색 그대로 둔다 —
        서랍 안에는 sector-traffic·flight-board가 밝은 색을 코드에 박아 둔 표를
        그린다(둘 다 다른 호스트도 쓰는 공용 모듈). 배경만 어둡게 하면 그 표들이
        흰 바탕에 흰 글자가 된다. 서랍까지 어둡게 하려면 그 두 모듈의 색 토큰화가 먼저다.
     ⚠ CSS 색 이름 `darkgray`는 실제로 #A9A9A9로 `gray`(#808080)보다 **밝다**.
        그 값은 글자 대비가 WCAG AA(4.5:1)에 못 미쳐 쓰지 않았다(실측 비교 후 확정).
     ⚠ 강조색은 --accent-cyan(#0284c7)이 아니라 밝은 하늘색을 쓴다 — 라이트용 시안은
        어두운 레일 위에서 대비가 3.3:1로 모자란다. 다크 테마의 시안과 같은 값이다. */
  --rail-bg: #2b3440;
  --rail-fg: #c9d3de;
  --rail-fg-strong: #ffffff;
  --rail-hover: #3a4553;
  --rail-accent: #38bdf8;
  --rail-accent-bg: rgba(56, 189, 248, 0.16);
  --rail-border: rgba(255, 255, 255, 0.10);
  --rail-sep: rgba(255, 255, 255, 0.14);

  /* ── 현행 변수명 브리지 (기존 CSS 규칙이 그대로 테마를 따라간다) ── */
  --ink: var(--text-primary);
  --muted: var(--text-secondary);
  --blue: var(--accent-cyan);
  --border: var(--border-subtle);
  --live: var(--status-live);
  --err: var(--status-danger);
  --plate: var(--bg-surface-elevated);
  --sans: var(--font-sans);
  --mono: var(--font-mono);
}

[data-theme="dark"] {
  color-scheme: dark;
  --bg-space: #070d18;
  --bg-surface: rgba(15, 23, 42, 0.92);
  --bg-surface-elevated: #131c2e;
  --bg-surface-glass: rgba(15, 23, 42, 0.65);
  --bg-surface-float: rgba(19, 28, 46, 0.95);
  --bg-sunken: rgba(255, 255, 255, 0.05);
  --bg-hover: rgba(255, 255, 255, 0.10);

  --border-subtle: rgba(255, 255, 255, 0.12);
  --border-medium: rgba(255, 255, 255, 0.20);
  --border-highlight: rgba(56, 189, 248, 0.45);

  --text-primary: #f8fafc;
  --text-secondary: #a3b1c2;
  --text-tertiary: #7c8ca0;
  --text-inverse: #0f172a;

  /* 레일 — 다크에서는 앱 표면과 같은 색으로 되돌린다. 라이트에서만 «홀로 어두운» 것이지,
     다크에서까지 #2b3440을 쓰면 레일만 주변보다 밝게 떠 보인다(라이트의 의도와 반대 결과).
     ⚠ 종전 다크 레일은 rgba(15,23,42,.92) + blur였다 → **불투명**으로 바꿨다.
        blur는 배경이 불투명하면 결과가 100% 가려져 비용만 남는다(#drawer에서 같은 이유로
        2026-08-25에 제거, 실측 약 7ms/프레임). 레일은 항상 떠 있고 뒤에서 지도가 계속 바뀐다. */
  --rail-bg: #131c2e;
  --rail-fg: #a3b1c2;
  --rail-fg-strong: #f8fafc;
  --rail-hover: rgba(255, 255, 255, 0.10);
  --rail-accent: #38bdf8;
  --rail-accent-bg: rgba(56, 189, 248, 0.16);
  --rail-border: rgba(255, 255, 255, 0.12);
  --rail-sep: rgba(255, 255, 255, 0.12);

  --accent-cyan: #38bdf8;
  --accent-blue: #3b82f6;
  --accent-indigo: #818cf8;
  --accent-teal: #2dd4bf;
  --accent-teal-soft: rgba(45, 212, 191, 0.14);
  --status-live: #34d399;
  --status-live-bg: rgba(16, 185, 129, 0.18);
  --status-live-soft: rgba(16, 185, 129, 0.10);
  --status-warn: #fbbf24;
  --status-warn-bg: rgba(245, 158, 11, 0.18);
  --status-danger: #f87171;
  --status-danger-bg: rgba(239, 68, 68, 0.18);
  --status-danger-soft: rgba(239, 68, 68, 0.14);
  --status-info: #38bdf8;
  --chip-bg: #38bdf8;
  --chip-fg: #06121f;
  --pink: #f472b6;

  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.35);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.50);
  --shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.65);
  --shadow-glow: 0 0 20px rgba(56, 189, 248, 0.25);
}

/* ============================================================
   기능 모듈이 뿜는 UI의 다크 보정
   ------------------------------------------------------------
   features/*.js 는 자기 <style>을 넣거나 inline style="…"로 색을 박는다.
   ⛔ 모듈 JS는 고치지 않는다 — 고치면 정본(agents/·features/)과의 괴리가 늘고,
      추적 대상이 그만큼 커진다. 대신 여기서 덮는다 (선택자 특정성이 더 높다).
   모듈이 토큰화되면 이 블록은 통째로 지운다.
   ============================================================ */

/* --- 섹터현황 (features/sector-traffic, #sectorTraffic 안에 자기 style 주입) --- */
[data-theme="dark"] #sectorTraffic .sthd,
[data-theme="dark"] #sectorTraffic .stfoot,
[data-theme="dark"] #sectorTraffic .stnone { color: var(--text-secondary); }
[data-theme="dark"] #sectorTraffic .strow { border-color: var(--border-subtle); }
[data-theme="dark"] #sectorTraffic .strow:hover { background: var(--bg-hover); }
[data-theme="dark"] #sectorTraffic .stsub { color: var(--text-tertiary); }
/* 선택 행·선택 칩 — 모듈은 라이트 전제 옅은 파랑(#e8effa·#dbe4f2)을 쓴다. 다크에서 그대로 두면
   밝은 배경 위에 밝은 글자가 얹혀 **선택한 행만 안 읽히는** 상태가 된다 (사용자 신고 2026-08-24). */
[data-theme="dark"] #sectorTraffic .strow.on,
[data-theme="dark"] #sectorTraffic .strow.inf,
[data-theme="dark"] #sectorTraffic .stsub.stinb.on { background: rgba(56, 189, 248, 0.16); }
[data-theme="dark"] #sectorTraffic .stsub.stinb:hover { background: var(--bg-hover); }
[data-theme="dark"] #sectorTraffic .strow .pt:hover { background: var(--bg-hover); }

/* --- 공항 운항 현황 보드 (features/flight-board, 지도 팝업 안) --- */
[data-theme="dark"] .fblive:hover { background: var(--bg-hover) !important; }
[data-theme="dark"] .fbt b { color: var(--status-warn) !important; }

/* --- inline style로 박힌 밝은 배경들 (다크에서 흰 상자로 남는 것만 최소 교정) ---
   ⚠ inline style은 !important 없이는 못 덮는다. 아래 목록은 «밝은 배경 + 어두운 글자»
      전제로 쓰여 다크에서 읽을 수 없게 되는 것들뿐이다. 글자색만 있는 inline은 두었다
      (상태색은 다크 배경에서도 읽힌다). */
[data-theme="dark"] [style*="background:#fff3d6"] {   /* amos 강조 행 */
  background: var(--status-warn-bg) !important; color: var(--status-warn) !important;
}
[data-theme="dark"] [style*="background:#f6f8fa"] {   /* notam 원문 <pre> */
  background: var(--bg-sunken) !important; color: var(--text-secondary) !important;
}
[data-theme="dark"] [style*="background:#f0f9f2"] {   /* notam 선택 행 (CDR) */
  background: var(--status-live-bg) !important;
}
[data-theme="dark"] [style*="background:#fdf3f2"] {   /* notam 선택 행 (일반) */
  background: var(--status-danger-bg) !important;
}
[data-theme="dark"] [style*="color:#5a6a7a"],
[data-theme="dark"] [style*="color:#7a8a99"] { color: var(--text-secondary) !important; }
/* radar.js가 «수평·유지»(추세 없음)에 쓰는 회색 — 다크 배경에서 거의 안 보인다 */
[data-theme="dark"] [style*="color:#5c6b7a"] { color: var(--text-tertiary) !important; }
[data-theme="dark"] [style*="color:#1b7f3a"],
[data-theme="dark"] [style*="color:#1a7f37"],
[data-theme="dark"] [style*="color:#2f9e44"] { color: var(--status-live) !important; }
[data-theme="dark"] [style*="color:#c2261f"],
[data-theme="dark"] [style*="color:#e03131"] { color: var(--status-danger) !important; }
[data-theme="dark"] [style*="color:#b45309"] { color: var(--status-warn) !important; }
/* 공항경보 칩 (features/airport-warning) — 옅은 분홍 배경에 진한 빨강 글자를 함께 박아 두어
   다크에서도 «읽히기는» 하지만 라이트 조각처럼 떠 보인다. 배경만 다크 톤으로 되돌린다. */
[data-theme="dark"] [style*="background:#fde8e8"] {
  background: var(--status-danger-bg) !important; color: var(--status-danger) !important;
}

/* --- 지도 팝업 안 표 (features 공통: 흰 배경 전제의 테두리) --- */
[data-theme="dark"] .leaflet-popup-content table th,
[data-theme="dark"] .leaflet-popup-content table td { border-color: var(--border-subtle); }


/* --- GNSS 환경 블록 등급 색 (features/gnss-sky) — 좋음/보통/낮음 --------------------
   사용자 확정 2026-08-24: 「일반인은 SIL·NIC 용어를 모른다 — 좋음/보통/낮음 글자와 색 원으로」.
   모듈은 var(--gs-good,#1a7f37)처럼 **폴백을 품고** 쓰므로 이 정의가 없어도 라이트 색으로 뜬다.
   여기서는 다크 테마에서만 상태색 토큰으로 갈아끼운다(어두운 배경에서 라이트 녹색은 잘 안 읽힌다).
   ⚠ 순서 주의 — 위 [data-theme="dark"] 블록과 명시도가 같으므로 :root를 먼저, 다크를 뒤에 둔다. */
:root {
  --gs-good: #1a7f37;
  --gs-fair: #c9820a;   /* 사용자가 말한 '노랑색 원' — 흰 배경 가독성을 위해 진한 황갈로 */
  --gs-bad:  #d0021b;
}
[data-theme="dark"] {
  --gs-good: var(--status-live);
  --gs-fair: var(--status-warn);
  --gs-bad:  var(--status-danger);
}

/* --- 예측교통량 합계 칸 색조 (index.html fcstMatrixHtml) ------------------------
   같은 30분 열 안에서 최저=녹색·최고=빨강·중간=중립. 종전에는 밝은 배경(#fff1f0 등)을
   HTML에 박아 두고 글자만 var(--ink)를 썼는데, 다크 테마에서 --ink가 밝은 색이 되면서
   밝은 배경 위 밝은 글자가 되어 **아무것도 안 읽혔다**(사용자 신고 2026-08-24).
   ⚠ 순서 주의 — 위 [data-theme="dark"] 블록과 명시도가 같으므로 :root를 먼저, 다크를 뒤에. */
:root {
  --fc-hi-bg: #fff1f0;  --fc-hi-fg: #c2261f;
  --fc-lo-bg: #effaf1;  --fc-lo-fg: #16803c;
  --fc-mid-bg: #eef3fa; --fc-mid-fg: #1e2933;
}
[data-theme="dark"] {
  --fc-hi-bg: rgba(239, 68, 68, 0.22);   --fc-hi-fg: #fca5a5;
  --fc-lo-bg: rgba(16, 185, 129, 0.20);  --fc-lo-fg: #6ee7b7;
  --fc-mid-bg: rgba(148, 163, 184, 0.16); --fc-mid-fg: var(--text-primary);
}

/* --- 예측교통량 편별 목록 팝업(#fcstPop) 안의 밝은 색 고정값 구제 ---------------
   목록 표는 features가 아니라 index.html이 그리며 일부 칸이 라이트 전제 색을 갖는다.
   위쪽 [style*=...] 브리지와 같은 방식으로, 다크에서만 토큰으로 되돌린다. */
[data-theme="dark"] #fcstPop { color: var(--text-primary); }
[data-theme="dark"] #fcstPop [style*="color:#1e2933"],
[data-theme="dark"] #fcstPop [style*="color:#12212f"],
[data-theme="dark"] #fcstPop [style*="color:#0b3d91"] { color: var(--text-primary) !important; }
[data-theme="dark"] #fcstPop [style*="background:#fff"],
[data-theme="dark"] #fcstPop [style*="background:#f7f9fb"] { background: transparent !important; }

/* --- 예상경로 라벨 박스 (features/route-predict .rp-label) ----------------------
   지도·항적 위에 얹히는 상자라 배경은 불투명이어야 한다. 모듈이 라이트 폴백을 품고 있으니
   여기서는 다크 값만 준다. ⚠ :root를 먼저, 다크를 뒤에 (위 블록과 명시도 동일). */
:root {
  --rp-bg: #ffffff;  --rp-fg: #12212f;  --rp-line: #b8c2cc;
}
[data-theme="dark"] {
  --rp-bg: #172033;
  --rp-fg: var(--text-primary);
  --rp-line: var(--border-medium);
}

/* --- 운항현황판 행 hover (features/flight-board .fblive) ------------------------
   모듈이 hover 배경을 라이트 고정색(#eef3f8)으로 주입한다 — 지도 팝업(라이트 전제)에선
   무해했지만 「공항」 탭 서랍은 테마를 따르므로 다크에서 행이 하얗게 번쩍였다
   (2026-08-24 리뷰 P2). 규칙대로 모듈은 고치지 않고 다크에서만 여기서 덮는다. */
[data-theme="dark"] .fblive:hover { background: var(--bg-hover); }
