/* ============================================================
   SafeAcademy 통합 고대비 테마 CSS — theme.css v3
   원칙: 배경/텍스트 대비 WCAG AA 보장. 예외만 명시.
   ============================================================ */

/* ── 공용 CSS 변수 (다크 기본) ── */
:root {
  --text-color:   #f1f5f9;
  --sub-text:     #cbd5e1;
  --bg-color:     #0f172a;
  --panel-bg:     rgba(15,23,42,0.93);
  --btn-bg:       #1e293b;
  --border-color: #38bdf8;
  --log-bg:       rgba(0,0,0,0.82);
  --accent:       #38bdf8;
  --accent2:      #00ff9d;
}
.light, body.light {
  --text-color:   #0f172a;
  --sub-text:     #334155;
  --bg-color:     #f1f5f9;
  --panel-bg:     rgba(255,255,255,0.98);
  --btn-bg:       #e2e8f0;
  --border-color: #2563eb;
  --log-bg:       rgba(241,245,249,0.97);
  --accent:       #1d4ed8;
  --accent2:      #059669;
}

/* ══════════════════════════════════════════════════════
   핵심 원칙 ①
   body 전체: color 를 강제 → 상속으로 모든 자식에 적용
   inline style 이 이를 덮으므로, 아래에서 inline 전수 무력화
   ══════════════════════════════════════════════════════ */

body {
  color: var(--text-color) !important;
  background: var(--bg-color) !important;
}

/* ══════════════════════════════════════════════════════
   핵심 원칙 ②
   모든 div·span·p·label·b·small·td·th·li·h1~h6
   → color 를 상속받게 강제 (inline style override 전략)
   단, !important 없이 — inline style 이 더 높은 우선순위
   이므로, 아래 inline 무력화 블록이 핵심
   ══════════════════════════════════════════════════════ */

body * {
  /* text-shadow 제거로 다크 배경 위 어두운 그림자 방지 */
  text-shadow: none !important;
}

/* ══════════════════════════════════════════════════════
   핵심 원칙 ③
   LIGHT MODE — inline style 에 박힌 어두운 배경용 색상들
   을 모두 읽기 가능한 어두운 색으로 교체
   ══════════════════════════════════════════════════════ */

/* 흰색/밝은 계열 → 어둡게 */
body.light [style*="color:white"]      { color: #1e293b !important; }
body.light [style*="color: white"]     { color: #1e293b !important; }
body.light [style*="color:#fff"]       { color: #1e293b !important; }
body.light [style*="color: #fff"]      { color: #1e293b !important; }
body.light [style*="color:#ffffff"]    { color: #1e293b !important; }
body.light [style*="color: #ffffff"]   { color: #1e293b !important; }
body.light [style*="color:#f1f5f9"]    { color: #334155 !important; }
body.light [style*="color: #f1f5f9"]   { color: #334155 !important; }
body.light [style*="color:#f3f4f6"]    { color: #334155 !important; }
body.light [style*="color: #f3f4f6"]   { color: #334155 !important; }
body.light [style*="color:#e2e8f0"]    { color: #475569 !important; }
body.light [style*="color: #e2e8f0"]   { color: #475569 !important; }
body.light [style*="color:#cbd5e1"]    { color: #475569 !important; }
body.light [style*="color: #cbd5e1"]   { color: #475569 !important; }
body.light [style*="color:#94a3b8"]    { color: #475569 !important; }
body.light [style*="color: #94a3b8"]   { color: #475569 !important; }
body.light [style*="color:#64748b"]    { color: #334155 !important; }
body.light [style*="color: #64748b"]   { color: #334155 !important; }
body.light [style*="color:#475569"]    { color: #1e293b !important; }
body.light [style*="color: #475569"]   { color: #1e293b !important; }
/* rgba 흰/밝은 계열 */
body.light [style*="color:rgba(255"]   { color: #1e293b !important; }
body.light [style*="color: rgba(255"]  { color: #1e293b !important; }

/* 강조색 → 라이트에서 진하게 */
body.light [style*="color:#38bdf8"]    { color: #1d4ed8 !important; }
body.light [style*="color: #38bdf8"]   { color: #1d4ed8 !important; }
body.light [style*="color:#00ff9d"]    { color: #047857 !important; }
body.light [style*="color: #00ff9d"]   { color: #047857 !important; }
body.light [style*="color:#00d2ff"]    { color: #0369a1 !important; }
body.light [style*="color: #00d2ff"]   { color: #0369a1 !important; }
body.light [style*="color:#f59e0b"]    { color: #92400e !important; }
body.light [style*="color: #f59e0b"]   { color: #92400e !important; }
body.light [style*="color:#facc15"]    { color: #92400e !important; }
body.light [style*="color: #facc15"]   { color: #92400e !important; }
body.light [style*="color:#fde047"]    { color: #92400e !important; }
body.light [style*="color: #fde047"]   { color: #92400e !important; }
body.light [style*="color:#8b5cf6"]    { color: #5b21b6 !important; }
body.light [style*="color: #8b5cf6"]   { color: #5b21b6 !important; }

/* 이미 어두운 색은 그대로 유지 */
body.light [style*="color:#0f172a"]    { color: #0f172a !important; }
body.light [style*="color:#1e293b"]    { color: #1e293b !important; }
body.light [style*="color:#ef4444"]    { color: #b91c1c !important; }
body.light [style*="color:#10b981"]    { color: #065f46 !important; }

/* ══════════════════════════════════════════════════════
   핵심 원칙 ④
   DARK MODE — 어두운 색이 inline에 박혀 배경과 섞이는 경우
   ══════════════════════════════════════════════════════ */

body:not(.light) [style*="color:#0f172a"]  { color: #94a3b8 !important; }
body:not(.light) [style*="color: #0f172a"] { color: #94a3b8 !important; }
body:not(.light) [style*="color:#1e293b"]  { color: #94a3b8 !important; }
body:not(.light) [style*="color: #1e293b"] { color: #94a3b8 !important; }
body:not(.light) [style*="color:#334155"]  { color: #94a3b8 !important; }
body:not(.light) [style*="color: #334155"] { color: #94a3b8 !important; }
body:not(.light) [style*="color:#475569"]  { color: #cbd5e1 !important; }
body:not(.light) [style*="color: #475569"] { color: #cbd5e1 !important; }
body:not(.light) [style*="color:#64748b"]  { color: #cbd5e1 !important; }
body:not(.light) [style*="color: #64748b"] { color: #cbd5e1 !important; }
body:not(.light) [style*="color:rgba(0,0,0"]  { color: #cbd5e1 !important; }
body:not(.light) [style*="color: rgba(0,0,0"] { color: #cbd5e1 !important; }

/* ══════════════════════════════════════════════════════
   패널 배경 강제 — 텍스트와 배경 대비 보장
   ══════════════════════════════════════════════════════ */

/* 라이트: 모든 패널 흰 배경 */
body.light .ui-panel,
body.light .ctrl-panel,
body.light .chart-panel,
body.light .status-panel,
body.light .log-panel,
body.light #configPanel,
body.light #boardingPanel,
body.light [class*="-panel"],
body.light .collapsible-panel {
  background: var(--panel-bg) !important;
  color: var(--text-color) !important;
  border-color: #93c5fd !important;
}

/* 다크: 모든 패널 어두운 배경 */
body:not(.light) .ui-panel,
body:not(.light) .ctrl-panel,
body:not(.light) .chart-panel,
body:not(.light) .status-panel,
body:not(.light) .log-panel,
body:not(.light) #configPanel,
body:not(.light) #boardingPanel,
body:not(.light) [class*="-panel"],
body:not(.light) .collapsible-panel {
  background: var(--panel-bg) !important;
  color: var(--text-color) !important;
}

/* ══════════════════════════════════════════════════════
   버튼 공통
   ══════════════════════════════════════════════════════ */

body.light .btn {
  color: #0f172a !important;
  background: #e2e8f0 !important;
  border: 1px solid #94a3b8 !important;
  font-weight: 700 !important;
}
body.light .btn:hover  { background: #dbeafe !important; color: #1d4ed8 !important; }

/* 녹색·빨강 액션 버튼 — 글자 강제 */
body.light .btn[style*="background:#00ff9d"],
body.light .btn[style*="background: #00ff9d"] { color: #064e3b !important; }
body.light .btn[style*="background:#10b981"]   { color: #fff !important; }
body.light .btn[style*="background:#ef4444"]   { color: #fff !important; }

body:not(.light) .btn {
  color: #f1f5f9 !important;
  background: #1e293b !important;
  border-color: #475569 !important;
}
body:not(.light) .btn:hover { border-color: #38bdf8 !important; color: #38bdf8 !important; }

/* ══════════════════════════════════════════════════════
   기타 공통 요소
   ══════════════════════════════════════════════════════ */

/* select·input */
body.light select,
body.light input[type="text"],
body.light input[type="number"] {
  color: #0f172a !important; background: #fff !important; border: 1px solid #94a3b8 !important;
}
body:not(.light) select,
body:not(.light) input[type="text"],
body:not(.light) input[type="number"] {
  color: #f1f5f9 !important; background: #1e293b !important; border-color: #475569 !important;
}

/* 버스 레이블 */
body.light .bus-label {
  background: rgba(255,255,255,0.97) !important;
  color: #0f172a !important;
  border-color: #2563eb !important;
}
body.light .bus-label * { color: #0f172a !important; }

/* 로그 패널 */
body.light .log-panel  { color: #1d4ed8 !important; }
body.light .log-header { background: rgba(226,232,240,0.95) !important; }
body.light .log-header,
body.light .log-header * { color: #0f172a !important; }

body:not(.light) .log-header { background: rgba(0,0,0,0.65) !important; }
body:not(.light) .log-header,
body:not(.light) .log-header * { color: #e2e8f0 !important; }

/* top-summary */
body.light .top-summary,
body.light .top-summary * { color: #0f172a !important; }
body.light .sum-lbl       { color: #475569 !important; }
body.light .sum-val       { color: #0f172a !important; }
body.light .sum-val.highlight { color: #1d4ed8 !important; }

/* 차트 */
body.light .bar       { background: #3b82f6 !important; }
body.light .bar.danger { background: #dc2626 !important; }

/* 패널 헤더 */
body.light .panel-header div,
body.light .panel-header span,
body.light .panel-header h2,
body.light .panel-header h3 { color: #0f172a !important; }
body.light .toggle-icon      { color: #475569 !important; }

body:not(.light) .panel-header div,
body:not(.light) .panel-header span { color: #f1f5f9 !important; }

/* ── 지도 타일 필터 ── */
body:not(.light) .leaflet-tile-pane {
  filter: invert(100%) hue-rotate(180deg) brightness(88%) contrast(115%) !important;
}
body.light .leaflet-tile-pane  { filter: none !important; }
body.force-osm .leaflet-tile-pane { filter: none !important; }