/* =========================================================
   Metropy — 서울 지하철 착석 효용 최적화
   CSS Variables & Theme Definitions
   ========================================================= */

/* ───── 다크 모드 (기본) ───── */
:root {
  --bg: #0a0c14;
  --bg2: #0f1220;
  --surface: #151929;
  --surface2: #1c2137;
  --surface3: #232845;
  --border: #2a3050;
  --text: #e8eaf0;
  --text-dim: #7c829e;
  /* --surface(4.99:1)·--surface2(4.54:1) 위에서 본문으로 읽히는 값.
     이전 #5a6070 은 2.78:1 이라 캡션과 placeholder 가 안 보였다. */
  --text-muted: #8288a4;
  /* 메인 #2457D6 를 다크 배경에서 읽히게 밝힌 값.
     원색 그대로 쓰면 어두운 면 위에서 대비가 부족하다. */
  --accent: #5b87f5;
  --accent2: #2457d6;
  --accent-soft: rgba(91,135,245,.14);
  /* 그림자·연한 배경처럼 알파가 제각각인 자리에 쓴다.
     리터럴로 두면 테마를 바꿔도 옛 색이 그대로 남는다. */
  --accent-rgb: 91,135,245;
  /* 포인트. CTA와 1순위 강조에만 쓴다. 넓은 면에는 쓰지 않는다. */
  --point: #ff7a45;
  --point2: #e85f28;
  --point-soft: rgba(255,122,69,.14);
  --point-rgb: 255,122,69;
  /* 주황 위에 얹는 글자색. 흰 글자는 대비 2.59:1 로 못 쓴다. */
  --point-ink: #1a1d26;
  --green: #34d399;
  --green-dim: rgba(52,211,153,.12);
  --red: #f87171;
  --red-dim: rgba(248,113,113,.12);
  --yellow: #fbbf24;
  --radius: 16px;
  --radius-sm: 10px;
  --shadow: 0 8px 32px rgba(0,0,0,.4);
  --transition: .2s ease;
  --max-w: 1080px;
  --nav-h: 60px;
}

/* ───── 라이트 모드 ───── */
[data-theme="light"] {
  --bg: #f5f7fa;
  --bg2: #eef1f6;
  --surface: #ffffff;
  --surface2: #f0f2f5;
  --surface3: #e8eaef;
  --border: #d1d5dc;
  --text: #1a1d26;
  --text-dim: #5a6070;
  --text-muted: #6b7280;
  /* 지정 메인 컬러. 흰 배경 위 대비 6.4:1 로 본문 텍스트에도 쓸 수 있다. */
  --accent: #2457d6;
  --accent2: #1b45ad;
  --accent-soft: rgba(36,87,214,.10);
  --accent-rgb: 36,87,214;
  /* 포인트. 흰 글자를 얹는 채움 버튼과 1순위 강조 전용. */
  --point: #ff5a1f;
  --point2: #e8541a;  /* hover 배경. 더 어두우면 --point-ink 대비가 4.5 아래로 떨어진다 */
  --point-soft: rgba(255,90,31,.10);
  --point-rgb: 255,90,31;
  --point-ink: #1a1d26;
  --green: #22c088;
  --green-dim: rgba(34,192,136,.15);
  --red: #e55555;
  --red-dim: rgba(229,85,85,.15);
  --yellow: #e5a500;
  --shadow: 0 8px 32px rgba(0,0,0,.12);
}

/* ───── 라이트 모드 하드코딩 보정 ───── */
[data-theme="light"] .navbar {
  background: rgba(245, 247, 250, .92);
}

[data-theme="light"] .loading-overlay {
  background: rgba(245, 247, 250, .95);
}

[data-theme="light"] .card:hover {
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.1);
}

[data-theme="light"] .autocomplete-suggestions {
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

[data-theme="light"] .modal-content {
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
}

[data-theme="light"] .modal-overlay {
  background: rgba(0, 0, 0, .5);
}

[data-theme="light"] .car-block:hover {
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.15);
}

[data-theme="light"] .swap-btn {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

[data-theme="light"] .btn-hero-secondary:hover,
[data-theme="light"] .btn-hero-github:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

[data-theme="light"] .stat-box:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

[data-theme="light"] .shortcut-item kbd {
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.06);
}