/* ============================================================
   高速道路SA/PAハイウェイガイド — 車載ハイコントラストUI
   ============================================================ */

:root {
  --bg: #0b1220;
  --bg-2: #101a2c;
  --card: #152238;
  --card-next: #16324f;
  --line: #263a58;
  --txt: #f4f8ff;
  --txt-dim: #9db2cf;
  --accent: #37c3ff;
  --accent-2: #ffd23f;
  --sa: #37c3ff;
  --pa: #ff9d3f;
  --ic: #b388ff;
  --jct: #34d399;   /* JCT専用色: IC(紫)・SA(青)・PA(橙)と明確に区別 */
  --sic: #00d6e7;   /* [TSK-018-1] スマートIC専用色: IC(紫)とは別のバッジ色 */
  --ok: #3ddc84;
  --warn: #ff5470;
  --chip-off: #2a3a55;
  --shadow: rgba(0, 0, 0, 0.5);
}

[data-theme="light"] {
  --bg: #eef2f8;
  --bg-2: #ffffff;
  --card: #ffffff;
  --card-next: #eaf6ff;
  --line: #c9d6e8;
  --txt: #101826;
  --txt-dim: #54657f;
  --accent: #0067c5;
  --accent-2: #b37e00;
  --sa: #0067c5;
  --pa: #d9750a;
  --ic: #6a3de8;
  --jct: #0d7a63;   /* JCT専用色(ライトテーマ): IC(紫)と明確に区別 */
  --sic: #0a9cb0;   /* [TSK-018-1] スマートIC専用色(ライトテーマ) */
  --ok: #1a8f55;
  --warn: #d12f4d;
  --chip-off: #d6deea;
  --shadow: rgba(30, 50, 80, 0.18);
}

/* ---------- [TSK-039-2 R6/R7] 夜間モード: テーマ(data-theme)を変えずに照度だけを落とす ----------
   ・data-night-mode="on" のときのみ filter: brightness() で画面全体の輝度を減衰させる。
     (data-theme の配色はそのまま＝テーマ切替とは独立)
   ・#night-dimmer は pointer-events:none の全画面ディマー（補助的な減光レイヤー）。
   ・輝度係数 --night-brightness / ディマー不透明度 --night-dim は js/night_mode.js が
     インラインスタイルで設定する（初期値: 減光なし）。 */
:root { --night-brightness: 1; --night-dim: 0; }
html[data-night-mode="on"] { filter: brightness(var(--night-brightness, 1)); }
html[data-night-mode="on"] #night-dimmer { opacity: 1; }
#night-dimmer {
  position: fixed;
  inset: 0;
  z-index: 80;
  pointer-events: none;
  opacity: 0;
  background: rgba(0, 0, 0, var(--night-dim, 0));
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  background: var(--bg);
  color: var(--txt);
  font-family: "Hiragino Kaku Gothic ProN", "Hiragino Sans", "BIZ UDPGothic",
               "Meiryo", system-ui, -apple-system, sans-serif;
  -webkit-font-smoothing: antialiased;
  overscroll-behavior: none;
}

body {
  display: flex;
  flex-direction: column;
  min-height: 100dvh;
  padding-bottom: env(safe-area-inset-bottom);
}

/* ---------- ボタン共通 ---------- */
.ctl-btn {
  appearance: none;
  border: 2px solid var(--line);
  background: var(--bg-2);
  color: var(--txt);
  border-radius: 14px;
  padding: 12px 16px;
  font-size: 20px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 56px;
  cursor: pointer;
  transition: transform .06s ease, border-color .15s;
}
.ctl-btn:active { transform: scale(.96); }
.ctl-btn .ic { font-size: 24px; line-height: 1; }
.ctl-btn .ctl-label { letter-spacing: .02em; }
.ctl-btn.active {
  border-color: var(--accent);
  background: var(--accent);
  color: #fff;
}
[data-theme="light"] .ctl-btn.active { color: #fff; }

/* ---------- ヘッダー ---------- */
.hdr {
  background: var(--bg-2);
  border-bottom: 2px solid var(--line);
  padding: 10px 14px 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.hdr-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* ---------- ハンバーガーボタン ---------- */
.menu-btn { flex: 0 0 auto; }
.menu-btn .ic { font-size: 30px; }
.flip-btn { flex: 0 0 auto; }
/* [TSK-018-1] ヘッダー操作系 (切替 / 方向) の幅を揃えて視認性を確保 */
.route-switch-btn, .dir-btn { flex: 0 0 auto; }
.sel-dir-hidden { display: none; }

.brand { display: flex; align-items: center; gap: 10px; }
.brand-badge {
  background: var(--accent);
  color: #fff;
  font-weight: 800;
  font-size: 16px;
  padding: 6px 9px;
  border-radius: 10px;
  letter-spacing: .03em;
}
.brand-name { font-size: 22px; font-weight: 800; letter-spacing: .02em; }

.sel-wrap { display: flex; flex-direction: column; gap: 4px; }
.sel-wrap.grow { flex: 1; }
.sel-cap {
  font-size: 13px; font-weight: 700; color: var(--txt-dim);
  padding-left: 2px; letter-spacing: .06em;
}
.sel {
  appearance: none;
  background: var(--bg);
  color: var(--txt);
  border: 2px solid var(--line);
  border-radius: 12px;
  font-size: 22px;
  font-weight: 700;
  padding: 12px 34px 12px 14px;
  min-height: 56px;
  width: 100%;
  background-image: linear-gradient(45deg, transparent 50%, var(--txt-dim) 50%),
                    linear-gradient(135deg, var(--txt-dim) 50%, transparent 50%);
  background-position: calc(100% - 20px) 50%, calc(100% - 13px) 50%;
  background-size: 7px 7px, 7px 7px;
  background-repeat: no-repeat;
}

.gps-btn.active { border-color: var(--ok); background: var(--ok); color: #fff; }
.mode-tag {
  font-size: 18px; font-weight: 800;
  padding: 6px 12px; border-radius: 999px;
  background: var(--bg); border: 2px solid var(--line); color: var(--txt-dim);
}
.mode-tag.live { border-color: var(--ok); color: var(--ok); }
.gps-status { font-size: 16px; color: var(--txt-dim); font-weight: 700; }
.menu-status { display: flex; align-items: center; gap: 10px; padding: 0 18px 6px; }

/* ---------- [TSK-011-2] 上部 sticky ナビバー (進行方向・件数・スワイプヒント) ---------- */
.cards-topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 16px;
  background: var(--bg-2);
  border-top: 2px solid var(--line);
  border-bottom: 1px solid var(--line);
  font-size: 14px;
  font-weight: 800;
  color: var(--txt-dim);
  -webkit-backdrop-filter: saturate(1.2);
  backdrop-filter: saturate(1.2);
}
.cards-topbar .topbar-dir {
  color: var(--accent);
  font-weight: 900;
  letter-spacing: .04em;
  flex: 0 0 auto;
}
.cards-topbar .topbar-count {
  color: var(--txt);
  font-weight: 800;
  flex: 0 0 auto;
}
.cards-topbar .topbar-hint {
  margin-left: auto;
  color: var(--txt-dim);
  font-size: 13px;
  font-weight: 700;
}

/* ---------- [TSK-011-2] 「次のSA/PAへ」ジャンプボタン (FAB・固定) ---------- */
.jump-next {
  position: fixed;
  right: 14px;
  bottom: calc(70px + env(safe-area-inset-bottom));
  z-index: 50;
  display: none;
  align-items: center;
  gap: 8px;
  appearance: none;
  border: 2px solid var(--accent);
  border-radius: 999px;
  background: var(--accent);
  color: #06121f;
  font-family: inherit;
  font-size: 16px;
  font-weight: 900;
  padding: 10px 16px;
  min-height: 48px;
  cursor: pointer;
  box-shadow: 0 6px 18px var(--shadow);
  transition: transform .06s ease, opacity .12s ease;
}
.jump-next.show { display: inline-flex; }
.jump-next:active { transform: scale(.97); }
.jump-next .jump-ic { font-size: 20px; line-height: 1; }

/* ---------- [TSK-011-3] 「現在位置に戻る」クイック復帰ボタン (FAB・固定・左) ----------
   右側「次のSA/PAへ」(.jump-next: 具体的な次施設名ラベル) と補完する、
   ジェネリックな「現在の位置(=次のSA/PA先頭)へ戻る」操作入口。
   前後スクロール閲覧中 (scrollTop > 閾値・現在位置から離脱) にのみ表示
   (app.js の scroll 監視で .show 付与)、タップで現在位置へスムーズ復帰。 */
.pos-return {
  position: fixed;
  left: 14px;
  bottom: calc(70px + env(safe-area-inset-bottom));
  z-index: 50;
  display: none;
  align-items: center;
  gap: 8px;
  appearance: none;
  border: 2px solid var(--accent-2);
  border-radius: 999px;
  background: var(--accent-2);
  color: #1a1204;
  font-family: inherit;
  font-size: 16px;
  font-weight: 900;
  padding: 10px 16px;
  min-height: 48px;
  cursor: pointer;
  box-shadow: 0 6px 18px var(--shadow);
  transition: transform .06s ease, opacity .12s ease;
}
.pos-return.show { display: inline-flex; }
.pos-return:active { transform: scale(.97); }
.pos-return .pos-ic { font-size: 20px; line-height: 1; }

/* ---------- カード列 (前方UPCOMING_AHEAD + 後方UPCOMING_BEHIND・上下スクロール) ---------- */
.cards {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 14px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
  overscroll-behavior: contain;
}

/* [TSK-011-2] 後方(通過済み)施設カード: 現在地(次のSA/PA)と視覚的に区別。
   減衰・「通過済み」感の表現 (前方ファースト順の末尾に配置) */
.card.is-past {
  opacity: .62;
  border-left-color: var(--line);
  background: var(--bg-2);
}
.card.is-past .card-name { color: var(--txt-dim); }
.card.is-past .dist-num { color: var(--txt-dim); font-weight: 800; }
.card.is-past .dist-time { color: var(--txt-dim); }
.card.is-past .card-sub { color: var(--txt-dim); }
.card.is-past .tap-hint { color: var(--txt-dim); }
[data-theme="light"] .card.is-past { background: #f3f6fa; opacity: .7; }

/* [TSK-034-1 R2/R4] 接近・通過済み施設のグレー表示（非表示にせず表示維持）: * .card-near    … 手前0.5km以内まで接近した施設（グレー） * .card-recent  … 越えて1.0km以内（現在位置の直上にグレー保持） * .card-archive … 1.0km超を離脱（上スクロール領域＝リスト上段に保持、 *                 初期ビュー scrollTop はアンカー位置なので視野外） */
.card.card-near,
.card.card-recent,
.card.card-archive { opacity: .55; }
.card.card-near .card-name,
.card.card-recent .card-name,
.card.card-archive .card-name { color: var(--txt-dim); }
.card.card-near .dist-num,
.card.card-recent .dist-num,
.card.card-archive .dist-num { color: var(--txt-dim); }
.card.card-near .dist-time,
.card.card-recent .dist-time,
.card.card-archive .dist-time { color: var(--txt-dim); }
[data-theme="light"] .card.card-near,
[data-theme="light"] .card.card-recent,
[data-theme="light"] .card.card-archive { background: #f3f6fa; opacity: .7; }
/* [TSK-034-1 R4] 1km超離脱(archive)の非表示制御（hidden 属性の明示解決） */
.card[hidden] { display: none; }

.card {
  background: var(--card);
  border: 2px solid var(--line);
  border-left: 12px solid var(--line);
  border-radius: 20px;
  padding: 18px 18px 16px;
  box-shadow: 0 6px 18px var(--shadow);
  position: relative;
}
.card.is-next {
  background: var(--card-next);
  border-left-color: var(--accent-2);
  border-color: var(--accent);
}
.card.sa { border-left-color: var(--sa); }
 .card.sa { border-left-color: var(--sa); }
 .card.pa { border-left-color: var(--pa); }
 .card.ic { border-left-color: var(--ic); }
 .card.jct { border-left-color: var(--jct); }
 .card.sic { border-left-color: var(--sic); }   /* [TSK-018-1] SIC専用(ICと分離) */
 .card.is-next.sa, .card.is-next.pa, .card.is-next.ic, .card.is-next.jct, .card.is-next.sic { border-left-color: var(--accent-2); }
 
 .card-top { display: flex; align-items: flex-start; gap: 12px; }
 .kind-tag {
   /* [TSK-014-1] 種別判別性の強化: 大きく太い種別バッジ (SA/PA/IC/JCT を一目で) */
   flex: 0 0 auto;
   font-size: 21px; font-weight: 900; color: #fff;
   padding: 6px 13px; border-radius: 12px;
   letter-spacing: .08em;
   min-width: 48px; text-align: center;
   line-height: 1.1;
   box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .35);
 }
 .kind-tag.sa { background: var(--sa); }
 .kind-tag.pa { background: var(--pa); }
 .kind-tag.ic { background: var(--ic); }
 .kind-tag.jct { background: var(--jct); }   /* JCT専用バッジ: [JCT] を独立色で表示 */
 .kind-tag.sic { background: var(--sic); }   /* [TSK-018-1] SIC専用バッジ: IC(紫)と分離した独立色 */

.card-name {
  font-size: 34px; font-weight: 900; line-height: 1.15;
  margin: 0; letter-spacing: .01em;
}
.card.know-note .card-name { color: var(--txt-dim); }
.card-sub { font-size: 17px; color: var(--txt-dim); margin: 4px 0 0; font-weight: 700; }

.card-dist {
  display: flex; align-items: baseline; gap: 14px;
  margin: 12px 0 4px;
}
.dist-main { display: flex; align-items: baseline; }
.dist-num { font-size: 64px; font-weight: 900; line-height: 1; letter-spacing: -.01em; }
.dist-unit { font-size: 26px; font-weight: 800; color: var(--txt-dim); margin-left: 4px; }
/* [TSK-032-2 R3/R4] 残り時間のフォント拡大 (22px → 28px, 900)。
 * 情報の優先順位は バッジ(.kind-tag) ＞ 施設名(.card-name) ＞ 残り時間(.dist-time)。
 * 施設名は右端まで届くことは稀なので、行末の残り時間は折返しなしで大きく表示する。 */
.dist-time {
  margin-left: auto; text-align: right;
  font-size: 28px; font-weight: 900; color: var(--accent-2);
  white-space: nowrap;
  flex: 0 0 auto;
}
.dist-time .t-small { display: block; font-size: 14px; color: var(--txt-dim); font-weight: 700; }

/* 設備チップ */
.fac { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.fac-chip {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 17px; font-weight: 800;
  padding: 8px 12px; border-radius: 12px;
  background: var(--bg-2); border: 2px solid var(--line); color: var(--txt);
}
.fac-chip .c-ic { font-size: 20px; }
.fac-chip.off { opacity: .38; text-decoration: none; }
.fac-chip.ev.on   { border-color: var(--ok);   color: var(--ok); }
.fac-chip.h24.on  { border-color: var(--accent-2); color: var(--accent-2); }
.fac-chip.gs.on   { border-color: var(--warn); color: var(--warn); }
.fac-chip.rest.on { border-color: var(--sa);   color: var(--sa); }
.fac-chip.conb.on { border-color: var(--pa);   color: var(--pa); }
.fac-chip.smart.on{ border-color: #b388ff; color: #b388ff; }
/* [TSK-013-1] 一覧(カード)は全画面共通で設備バッジを非表示 → 表示エリア最大化 */
.card .fac { display: none; } /* 詳細ビュー側は下記ルールで再表示 */
.detail-body .fac { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }

 /* 公式施設案内ボタン: カード内（別タブ遷移） */

/* 公式サイトリンク（別タブ） */
.card-official {
  display: flex; align-items: center; gap: 10px;
  margin-top: 12px; padding: 14px 16px;
  border-radius: 12px;
  background: var(--accent); color: #fff;
  font-size: 19px; font-weight: 900; letter-spacing: .02em;
  text-decoration: none;
  box-shadow: 0 2px 8px var(--shadow);
}
.card-official:active { transform: scale(.99); }
[data-theme="light"] .card-official { color: #fff; }
.card-official .off-ic { font-size: 22px; }
/* IC 用 Google Maps 連携リンク（TSK-009-1）:
   IC は個別の公式施設ページを持たないため、
   マスターデータの緯度経度(f.lat, f.lng)に基づく
   https://www.google.com/maps/search/?api=1&query={lat},{lng} を別タブで開く */
.card-maps {
  display: flex; align-items: center; gap: 10px;
  margin-top: 12px; padding: 14px 16px;
  border-radius: 12px;
  background: #1a73e8; color: #fff;
  font-size: 19px; font-weight: 900; letter-spacing: .02em;
  text-decoration: none;
  box-shadow: 0 2px 8px var(--shadow);
}
.card-maps:active { transform: scale(.99); }
[data-theme="light"] .card-maps { color: #fff; }
.card-maps .off-ic { font-size: 22px; }
.card-note { font-size: 16px; color: var(--txt-dim); margin-top: 10px; font-weight: 700; }

/* 空表示 */
.card-empty {
  margin: auto;
  text-align: center;
  padding: 40px 24px;
  color: var(--txt-dim);
  border: 2px dashed var(--line);
  border-radius: 20px;
}
.empty-title { font-size: 26px; font-weight: 800; color: var(--txt); margin: 0 0 12px; }
.empty-sub { font-size: 18px; line-height: 1.7; margin: 0; }

/* ---------- 状態バー ---------- */
.statusbar {
  display: flex; gap: 10px;
  padding: 10px 14px;
  background: var(--bg-2);
  border-top: 2px solid var(--line);
}
.stat {
  flex: 1;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  background: var(--bg); border: 2px solid var(--line); border-radius: 14px;
  padding: 8px 6px;
}
.stat-cap { font-size: 14px; font-weight: 700; color: var(--txt-dim); letter-spacing: .04em; }
.stat-val { font-size: 34px; font-weight: 900; line-height: 1; }
.stat-unit { font-size: 15px; font-weight: 800; color: var(--txt-dim); margin-left: 3px; }
.stat.wake { flex: 1.3; flex-direction: row; align-items: center; justify-content: center; gap: 10px; }
.wake-btn {
  appearance: none; border: 2px solid var(--line); background: var(--bg-2);
  color: var(--txt); font-size: 18px; font-weight: 900;
  border-radius: 10px; padding: 8px 14px; min-height: 44px;
}
.wake-btn.on { border-color: var(--ok); background: var(--ok); color: #fff; }
/* [TSK-012-1] 設定メニュー内の常時点灯バッジ（ステータスバーと同様の判りやすい表示） */
.wake-menu-row { padding-left: 18px; }
.menu-section #wake-badge { min-width: 84px; }

 /* ---------- IC表示切替（ヘッダー） ---------- */
 .ic-toggle { flex: 0 0 auto; }
 .ic-toggle .ic { font-size: 22px; }
 .ic-toggle.active { border-color: var(--ic); background: var(--ic); color: #fff; }
 [data-theme="light"] .ic-toggle.active { color: #fff; }

/* ---------- スライドメニュー（ハンバーガー） ---------- */
.menu-scrim {
  position: fixed; inset: 0; z-index: 60;
  background: rgba(0, 0, 0, .55);
}
.menu-scrim[hidden] { display: none; }
.side-menu {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 61;
  width: min(86vw, 420px);
  background: var(--bg-2);
  border-left: 3px solid var(--accent);
  box-shadow: var(--shadow);
  transform: translateX(105%);
  transition: transform .18s ease-out;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  display: flex; flex-direction: column;
}
.side-menu.open { transform: translateX(0); }
.menu-brand {
  display: flex; align-items: center; gap: 10px;
  padding: 16px 18px;
  border-bottom: 2px solid var(--line);
  position: sticky; top: 0; background: var(--bg-2); z-index: 1;
}
.menu-brand .ctl-btn { margin-left: auto; }
.menu-section { padding: 14px 18px; border-bottom: 1px solid var(--line); }
.menu-sec-title {
  font-size: 15px; font-weight: 900; letter-spacing: .06em;
  color: var(--txt-dim); margin: 0 0 10px;
}
.menu-item {
  display: flex; align-items: center; gap: 12px;
  width: 100%; min-height: 56px;
  appearance: none; border: 2px solid var(--line); border-radius: 14px;
  background: var(--bg); color: var(--txt);
  font-size: 20px; font-weight: 800;
  padding: 12px 16px; margin-bottom: 10px;
  text-align: left; cursor: pointer;
  font-family: inherit;
}
.menu-item:active { transform: scale(.99); }
.menu-item .ic { font-size: 26px; }
.menu-item .mi-label { flex: 1; }
.menu-item .mi-state { font-size: 16px; font-weight: 800; color: var(--txt-dim); }
.menu-item.gps-btn.active { border-color: var(--ok); background: var(--ok); color: #fff; }
.menu-item.gps-btn.active .mi-state { color: #fff; }
.menu-item.toggle { cursor: pointer; }
.menu-item.toggle input { width: 30px; height: 30px; accent-color: var(--accent); }
.menu-item.toggle:has(input:checked) { border-color: var(--accent); }
.filter-clear { margin-top: 4px; width: 100%; }

/* ---------- デバッグパネル（メニュー内） ---------- */
.debug-box {
  border: 2px solid var(--accent); border-radius: 14px;
  padding: 14px; background: var(--bg); margin-bottom: 6px;
}
.debug-box[hidden] { display: none; }
.dbg-note { font-size: 15px; color: var(--txt-dim); margin: 0 0 10px; line-height: 1.5; }
.dbg-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.dbg-field { display: flex; flex-direction: column; gap: 4px; }
.dbg-field span { font-size: 13px; font-weight: 800; color: var(--txt-dim); }
.dbg-field input {
  appearance: none; border: 2px solid var(--line); border-radius: 10px;
  background: var(--bg-2); color: var(--txt);
  font-size: 20px; font-weight: 800; padding: 10px;
  font-family: inherit;
}
.dbg-sub { font-size: 14px; font-weight: 900; color: var(--txt-dim); margin: 12px 0 6px; }
.dbg-cong { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.cong-btn {
  appearance: none; border: 2px solid var(--line); border-radius: 12px;
  background: var(--bg-2); color: var(--txt);
  font-size: 17px; font-weight: 900; padding: 10px; min-height: 48px;
  font-family: inherit;
}
.cong-btn.active { border-color: var(--warn); background: var(--warn); color: #fff; }
.dbg-apply {
  width: 100%; margin-top: 12px; min-height: 56px;
  appearance: none; border: 2px solid var(--accent); border-radius: 14px;
  background: var(--accent); color: #06121f;
  font-size: 21px; font-weight: 900; cursor: pointer; font-family: inherit;
}
.dbg-apply:active { transform: scale(.99); }
.dbg-result {
  margin-top: 12px; padding: 12px;
  border: 2px dashed var(--line); border-radius: 12px;
  font-size: 16px; line-height: 1.6; font-weight: 700;
}
.dbg-result[hidden] { display: none; }
.dbg-result .r-line { display: block; }
.dbg-result .r-warn { color: var(--warn); }
.dbg-presets { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.preset-btn {
  appearance: none; border: 2px solid var(--line); border-radius: 10px;
  background: var(--bg-2); color: var(--txt);
  font-size: 14px; font-weight: 800; padding: 8px; min-height: 44px;
  text-align: left; cursor: pointer; font-family: inherit; line-height: 1.3;
}
.preset-btn:active { transform: scale(.98); }
.preset-btn small { display: block; color: var(--txt-dim); font-weight: 700; }
/* [TSK-039-1 R5] プリセット編集UI（行単位編集・JSON入出力） */
.dbg-edit { display: grid; gap: 8px; }
.dbg-edit-row {
  display: grid; grid-template-columns: 1fr 1fr; gap: 6px;
  border: 2px dashed var(--line); border-radius: 12px; padding: 8px;
}
.dbg-edit-row .cong-btn { grid-column: 1 / -1; }
.dbg-field textarea, .dbg-field input[type="file"] {
  appearance: none; border: 2px solid var(--line); border-radius: 10px;
  background: var(--bg-2); color: var(--txt);
  font-size: 14px; font-weight: 700; padding: 8px; width: 100%;
  min-width: 0; box-sizing: border-box; font-family: inherit;
}
.dbg-field textarea { resize: vertical; line-height: 1.4; word-break: break-all; }
.dbg-field-full { grid-column: 1 / -1; margin-top: 8px; }

/* ---------- 詳細ビュー（1ボタン復帰） ---------- */
.detail-view {
  position: fixed; inset: 0; z-index: 70;
  background: var(--bg);
  display: flex; flex-direction: column;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.detail-view[hidden] { display: none; }
.detail-head {
  position: sticky; top: 0; z-index: 1;
  background: var(--bg-2);
  border-bottom: 3px solid var(--accent);
  padding: 14px 16px calc(14px + env(safe-area-inset-top));
}
.back-btn {
  width: 100%; min-height: 64px;
  appearance: none; border: 3px solid var(--accent); border-radius: 16px;
  background: var(--accent); color: #06121f;
  font-size: 24px; font-weight: 900; cursor: pointer; font-family: inherit;
}
.back-btn:active { transform: scale(.99); }
.detail-body { padding: 16px 16px calc(24px + env(safe-area-inset-bottom)); }
.detail-hero {
  display: flex; align-items: flex-start; gap: 12px;
  border-left: 8px solid var(--sa);
  background: var(--card); border-radius: 16px;
  padding: 16px; margin-bottom: 14px;
}
.detail-hero.pa { border-left-color: var(--pa); }
.detail-hero.ic { border-left-color: var(--ic); }
.detail-hero.jct { border-left-color: var(--jct); }
.detail-hero.sic { border-left-color: var(--sic); }   /* [TSK-018-1] SIC専用 */
.detail-hero .grow { flex: 1; }
.detail-hero h1 { font-size: 30px; margin: 0; line-height: 1.2; }
.detail-hero .d-sub { font-size: 18px; color: var(--txt-dim); font-weight: 700; margin: 6px 0 0; }
.detail-sec {
  background: var(--card); border-radius: 16px;
  padding: 16px; margin-bottom: 14px;
}
.detail-sec h2 {
  font-size: 18px; font-weight: 900; letter-spacing: .04em;
  color: var(--txt-dim); margin: 0 0 12px;
}
.gs-brands {
  display: flex; flex-wrap: wrap; gap: 10px;
}
.gs-brand {
  border: 2px solid var(--warn); border-radius: 999px;
  padding: 8px 16px; font-size: 19px; font-weight: 900; color: var(--warn);
}
.detail-dist-row {
  display: flex; gap: 14px; align-items: center; margin-bottom: 12px;
}
.detail-dist-num { font-size: 56px; font-weight: 900; line-height: 1; }
.detail-dist-unit { font-size: 20px; font-weight: 800; color: var(--txt-dim); }
.detail-eta-line { font-size: 20px; font-weight: 800; }
.detail-note { font-size: 16px; color: var(--txt-dim); margin: 10px 0 0; font-weight: 700; line-height: 1.5; }

/* [TSK-023-6] 参考値バッジ・注記（新基準の残存/欠落に関わる施設の明示） */
.ref-badge {
  display: inline-block; margin-top: 6px;
  font-size: 15px; font-weight: 900; letter-spacing: .04em;
  color: var(--bg); background: var(--accent-2);
  border-radius: 999px; padding: 3px 12px;
}
.ref-note { font-size: 16px; color: var(--accent-2); font-weight: 800; margin: 6px 0 0; line-height: 1.5; }

/* カードのタップ操作感 */
.card { cursor: pointer; }
.card .tap-hint {
  position: absolute; top: 12px; right: 14px;
  font-size: 14px; font-weight: 800; color: var(--txt-dim);
  border: 2px solid var(--line); border-radius: 999px; padding: 4px 10px;
}
.card { position: relative; }

/* ---------- フッター ---------- */
.ftr {
  padding: 8px 16px calc(8px + env(safe-area-inset-bottom));
  font-size: 13px; color: var(--txt-dim);
  text-align: center; line-height: 1.5;
}
.ftr-sep { margin: 0 8px; }

 /* ---------- スマホ / 縦並び（幅狭）最適化: EV/GS等の設備アイコン縮小 ---------- */
 @media (max-width: 899px) {
   .fac { gap: 6px; }
   .fac-chip { font-size: 13px; padding: 6px 9px; gap: 4px; border-radius: 10px; }
   .fac-chip .c-ic { font-size: 14px; }
   .card-name { font-size: 24px; }
   .dist-num { font-size: 44px; }
   .card-official { font-size: 15px; padding: 10px 12px; gap: 8px; }
   .card-official .off-ic { font-size: 17px; }
   .card-maps { font-size: 15px; padding: 10px 12px; gap: 8px; }
   .card-maps .off-ic { font-size: 17px; }
 }

/* [TSK-011-3] スマホ縦長 (portrait) 最適化: 1画面にできるだけ多くのポイントを表示。
   GS/設備バッジ(.fac)・公式/Maps リンクを非表示にし、ヘッダー・topbar・ステータスバー
   余白とカードサイズを極限まで圧縮。(詳細ビューで全設備は確認できるため、
   一覧では前後関係の可読性と「現在位置に戻る」操作の確保を優先) */
@media (max-width: 899px) and (orientation: portrait) {
  /* ヘッダー圧縮: 路線/方向セレクタとボタンを最小高さへ
     [TSK-033-1 R1/R2/R4] 幅320pxでも折り返し含め画面内に収まるよう、
     gap・パディング・アイコン寸を絞り、行は wrap を許容する
     (ボタン高さ min-height:48px は維持して押しやすさを担保)。 */
  .hdr { padding: 6px 12px 8px; gap: 6px; }
  .hdr-row { gap: 3px; flex-wrap: wrap; }
  .sel-wrap { gap: 2px; min-width: 0; }
  .sel { font-size: 14px; padding: 6px 20px 6px 8px; min-height: 48px; border-radius: 10px; }
  .sel-cap { font-size: 11px; }
  .ctl-btn { font-size: 13px; padding: 6px 6px; min-height: 48px; border-radius: 10px; gap: 3px; }
  .ctl-btn .ic { font-size: 15px; }
  .menu-btn .ic { font-size: 18px; }
  .mode-tag { font-size: 14px; padding: 4px 8px; }
  .gps-status { font-size: 13px; }
  .brand-name { font-size: 18px; }
  .brand-badge { font-size: 13px; padding: 4px 7px; }
  /* sticky ナビバー圧縮 */
  .cards-topbar { padding: 5px 12px; gap: 8px; font-size: 12px; }
  .cards-topbar .topbar-hint { font-size: 11px; }
  /* カード列 + カード圧縮 (1画面多件数表示) */
  .cards { gap: 8px; padding: 8px; }
  .card { padding: 8px 10px; border-radius: 12px; border-left-width: 8px; box-shadow: none; }
  .card-top { gap: 6px; }
  .kind-tag { font-size: 11px; padding: 2px 7px; border-radius: 8px; }
  .card-name { font-size: 18px; }
  .card-sub { font-size: 11px; margin: 2px 0 0; }
  .tap-hint { display: none; }
  .card-dist { gap: 6px; margin-top: 6px; }
  .dist-num { font-size: 26px; }
  .dist-unit { font-size: 12px; }
  /* [TSK-032-2 R3] 残り時間フォント拡大 12px → 18px (優先順位: バッジ＞施設名＞残り時間は維持) */
  .dist-time { font-size: 18px; }
  .dist-time .t-small { font-size: 11px; }
  /* GS/設備バッジ (.fac) と リンク (.card-official / .card-maps) は縦長一覧では非表示 */
  .card .fac { display: none; }
  .card .card-official { display: none; }
  .card .card-maps { display: none; }
  .card-note { display: none; }
  .card.is-past { opacity: .5; }
  /* ステータスバー / フッター圧縮 */
  .statusbar { padding: 6px 10px; gap: 6px; }
  .stat { padding: 5px 4px; border-radius: 10px; }
  .stat-cap { font-size: 11px; }
  .stat-val { font-size: 26px; }
  .stat-unit { font-size: 12px; }
  .wake-btn { font-size: 14px; padding: 5px 10px; min-height: 38px; }
  .ftr { padding: 4px 10px; font-size: 11px; }
  /* 復帰系 FAB (右: 次(もっと) / 左: 現在位置に戻る) はコンパクト化・PCと同一機構 */
  .jump-next { right: 10px; font-size: 14px; padding: 8px 12px; min-height: 44px; bottom: calc(62px + env(safe-area-inset-bottom)); }
  .pos-return { left: 10px; font-size: 14px; padding: 8px 12px; min-height: 44px; bottom: calc(62px + env(safe-area-inset-bottom)); }
  .jump-next .jump-ic, .pos-return .pos-ic { font-size: 18px; }

  /* ---------- [TSK-014-1] スマホ(縦長)のカードサイズ・種別視認性の最適化 ----------
     標準6件を取得しつつ、1画面には 3.5〜4件 が視覚的に収まるよう各要素を拡大。
     SA / PA / IC / JCT は種別バッジ(.kind-tag)のコントラストと大きさで一目判別。 */
  .cards { gap: 12px; }
  /* カード1枚の実効高 ≈ 150+12(gap) = 162px → 縦長の可視領域(約640px)に
     約3.9枚（3.5〜4件）が視覚的に収まるサイズ設計 */
  .card { min-height: 150px; }
  .card-top { gap: 10px; }
  .kind-tag {
    font-size: 16px; padding: 4px 10px; border-radius: 10px;
    min-width: 46px; text-align: center;
  }
  .card-name { font-size: 26px; }
  .card-sub { font-size: 13px; margin: 4px 0 0; }
  .card-dist { margin: 14px 0 4px; gap: 10px; }
  .dist-num { font-size: 44px; }
  .dist-unit { font-size: 17px; }
  /* [TSK-032-2 R3] 残り時間フォント拡大 17px → 22px (運転席からの視認性向上) */
  .dist-time { font-size: 22px; }
  .dist-time .t-small { font-size: 12px; }
  .card.is-next { box-shadow: 0 0 0 2px var(--accent); }
}

/* ---------- 大画面 / 横長（車載）最適化 ---------- */
@media (min-width: 900px) {
  /* [TSK-035-1 R7] 横長・大画面でも上下スクロール仕様（上=過去 / 下=今後）と一貫させ、
     9枚が横一列（幅4,000px超・カード幅不均一）になる崩れを解消する。 */
  .cards { flex-direction: column; align-items: stretch; }
  .card { flex: 0 0 auto; width: 100%; }
  .card-name { font-size: 40px; }
  .dist-num { font-size: 76px; }
  .card-empty { align-self: center; }
}
 @media (min-height: 700px) and (orientation: landscape) {
   .hdr { padding-top: 6px; padding-bottom: 8px; }
 }

/* ---------- [TSK-019-1] トースト通知（操作結果の一時的表示） ---------- */
.toast {
  position: fixed;
  left: 50%;
  bottom: 14px;
  transform: translateX(-50%);
  max-width: 92vw;
  padding: 8px 14px;
  border-radius: 10px;
  background: rgba(20, 28, 44, .92);
  color: var(--txt);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.35;
  text-align: center;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .35);
  z-index: 30;
}
.toast[hidden] { display: none; }

/* 動きの最小化希望 */
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}

/* ============================================================
 * [TSK-036-1 / TSK-037-1] R1/R2: フォントサイズ階層の単一定義と設定スケール
 *  R1: 階層を 残り距離(.dist-num) ＞ 残り時間(.dist-time) ≧ 施設名(.card-name)
 *      ＞ 種別バッジ(.kind-tag) に統一（距離の方をひと回り大きくする）。
 *      残り時間内部の .t-small は inherit で .dist-time と一体同サイズ。
 *  R2: 設定 #sel-font-size（小/標準/大/特大）の --fs-scale に連動させ、
 *      枠（.card / .kind-tag / .card-dist / .card-top）も一緒に拡大する。
 *  ※ 本節は全メディアクエリの後に配置され、同特異度の従来宣言より後勝ちになる。
 * ============================================================ */
:root {
  --fs-tag: 21px;  --fs-name: 34px;  --fs-num: 64px;
  --fs-unit: 24px; --fs-time: 48px;  --fs-scale: 1;
}
@media (max-width: 899px) {
  :root { --fs-name: 24px; --fs-num: 44px; --fs-unit: 20px; --fs-time: 32px; }
}
@media (max-width: 899px) and (orientation: portrait) {
  :root { --fs-tag: 16px; --fs-name: 26px; --fs-num: 44px; --fs-unit: 20px; --fs-time: 32px; }
}
@media (min-width: 900px) {
  :root { --fs-name: 40px; --fs-num: 76px; --fs-unit: 28px; --fs-time: 52px; }
}
:root[data-fs="small"]  { --fs-scale: 0.9; }
:root[data-fs="normal"] { --fs-scale: 1; }
:root[data-fs="large"]  { --fs-scale: 1.15; }
:root[data-fs="xlarge"] { --fs-scale: 1.3; }
/* R1: 一覧カードの実効フォントサイズ = 各画面幅の基準値 × --fs-scale（距離＞時間） */
.cards .kind-tag   { font-size: calc(var(--fs-tag, 21px) * var(--fs-scale, 1)); }
.cards .card-name  { font-size: calc(var(--fs-name, 34px) * var(--fs-scale, 1)); }
.cards .dist-num   { font-size: calc(var(--fs-num, 64px) * var(--fs-scale, 1)); }
.cards .dist-unit  { font-size: calc(var(--fs-unit, 24px) * var(--fs-scale, 1)); }
.cards .dist-time  { font-size: calc(var(--fs-time, 48px) * var(--fs-scale, 1)); }
/* 残り時間「約22分」は内部要素も inherit で一体同サイズ（基準は .dist-time） */
.cards .dist-time .t-small { font-size: inherit; }
#detail-view .kind-tag { font-size: calc(var(--fs-tag, 21px) * var(--fs-scale, 1)); }
/* R2: 特大（xlarge）でも枠内収まりを担保するため、距離行は折返し・縮小を許容する */
.card-dist { flex-wrap: wrap; row-gap: calc(2px * var(--fs-scale, 1)); }
.card-dist .dist-main { flex: 0 1 auto; min-width: 0; }
.card-dist .dist-time { white-space: normal; flex: 0 1 auto; min-width: 0; }
.card-top .grow { flex: 1 1 auto; min-width: 0; }
/* R2: 枠を必ず内容の高さまで伸ばす（flex 縮小によるクリッピング防止） */
.card { flex: 0 0 auto; }
/* R2: --fs-scale に連動した枠サイズ（高さ・パディング）の拡大 */
.cards .kind-tag {
  min-height: calc(22px * var(--fs-scale, 1));
  padding: calc(4px * var(--fs-scale, 1)) calc(10px * var(--fs-scale, 1));
}
@media (max-width: 899px) and (orientation: portrait) {
  /* 縦長スマホ: フォント設定の段階に合わせて枠（高さ・余白）を拡大する */
  :root[data-fs="small"]  .card { min-height: 135px; padding: 7px 9px; }
  :root[data-fs="normal"] .card { min-height: 150px; padding: 8px 10px; }
  :root[data-fs="large"]  .card { min-height: 173px; padding: 9px 10px; }
  :root[data-fs="xlarge"] .card { min-height: 205px; padding: 10px 10px; }
  :root[data-fs="xlarge"] .cards { gap: 10px; }
}

/* ============================================================
 * [TSK-043 R4] 詳細画面ヘッダー（.detail-hero）の文字の収まり
 *  ・「約X分」や距離数値は 1 文字ずつ縦に折り返さない（nowrap）
 *  ・行自体は折返しを許容し、横はみ出し（scrollWidth > clientWidth）を避ける
 * [TSK-043 R9] デバッグ欄・プリセット編集欄の入力枠の横はみ出し防止
 *  ・入力枠は min-width:0 / width:100% / box-sizing:border-box で親内に収める
 * ※ 本節は全メディアクエリの後に配置し、同特異度の従来宣言より後勝ちにする。
 * ============================================================ */
.detail-hero { flex-wrap: wrap; row-gap: 8px; }
.detail-hero .kind-tag { flex: 0 0 auto; }
.detail-hero .grow { flex: 1 1 auto; min-width: 0; }
.detail-hero h1 {
  font-size: calc(26px * var(--fs-scale, 1));
  line-height: 1.25; overflow-wrap: anywhere;
}
.detail-hero .d-sub {
  font-size: calc(17px * var(--fs-scale, 1));
  line-height: 1.45; overflow-wrap: anywhere;
}
.detail-hero .ref-note { font-size: calc(15px * var(--fs-scale, 1)); line-height: 1.45; }
.detail-dist-row { flex: 0 0 auto; flex-wrap: wrap; column-gap: 8px; }
.detail-dist-num { font-size: calc(44px * var(--fs-scale, 1)); white-space: nowrap; }
.detail-dist-unit { font-size: calc(20px * var(--fs-scale, 1)); white-space: nowrap; }
.detail-eta-line { font-size: calc(20px * var(--fs-scale, 1)); white-space: nowrap; }
/* デバッグ欄（.debug-box）内のグリッド・入力枠はすべて親コンテナ内に収める */
.debug-box { min-width: 0; }
.debug-box > * { min-width: 0; }
.dbg-grid, .dbg-cong, .dbg-presets, .dbg-edit { min-width: 0; }
.dbg-field { min-width: 0; }
.dbg-field > span { min-width: 0; overflow-wrap: anywhere; }
.dbg-field input, .dbg-field select, .dbg-field textarea {
  width: 100%; min-width: 0; max-width: 100%; box-sizing: border-box;
}
.dbg-edit-row { min-width: 0; }
.dbg-edit-row input { width: 100%; min-width: 0; box-sizing: border-box; }
.dbg-apply, .cong-btn, .preset-btn { min-width: 0; box-sizing: border-box; }
.preset-btn span { min-width: 0; overflow-wrap: anywhere; }
/* [TSK-043 R8] デバッグ欄は縦密度を高め、プリセットボタン〜編集UIが1画面に収まるようにする
 * （汎用 → 詳細の順で置き、後勝ちで上書きされるようにする） */
.debug-box .dbg-note { font-size: 13px; margin-bottom: 8px; }
.debug-box .dbg-sub { font-size: 13px; margin: 5px 0 2px; }
.debug-box .dbg-field { gap: 3px; }
.debug-box .dbg-field > span { font-size: 12px; line-height: 1.2; }
.debug-box .dbg-field input,
.debug-box .dbg-field select,
.debug-box .dbg-field textarea { font-size: 15px; padding: 5px 6px; }
.debug-box textarea { line-height: 1.35; }
.debug-box .dbg-presets, .debug-box .dbg-cong, .debug-box .dbg-edit { gap: 6px; }
.debug-box .dbg-cong { grid-template-columns: repeat(3, 1fr); }
.debug-box .preset-btn, .debug-box .cong-btn { min-height: 40px; padding: 6px; font-size: 14px; }
.debug-box .preset-btn small { font-size: 11px; line-height: 1.25; }
.debug-box .dbg-edit { gap: 4px; }
.debug-box .dbg-edit-row { gap: 3px; padding: 4px; }
.debug-box .dbg-edit-row input { padding: 3px 5px; font-size: 14px; }
.debug-box .dbg-edit-row .dbg-field > span { font-size: 11px; }
.debug-box .dbg-apply { min-height: 44px; font-size: 16px; margin-top: 8px; }
.debug-box .dbg-result { margin-top: 8px; padding: 8px; font-size: 14px; line-height: 1.5; }
/* ---------- [TSK-046-1 R3/R4] 路線表示設定・カスタム路線取込（ドロワー内・はみ出しゼロ） ---------- */
.filter-item { display: flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 700; padding: 4px 0; min-width: 0; max-width: 100%; box-sizing: border-box; }
.filter-item input[type="checkbox"] { width: 22px; height: 22px; flex: 0 0 auto; accent-color: var(--accent); }
.filter-item .mi-label { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.vr-item { border: 2px dashed var(--line); border-radius: 10px; padding: 6px 8px; }
#visible-routes-list, #custom-state { min-width: 0; max-width: 100%; }