/* トリフライ — 素のCSSのみ。パレットはロール名で参照し、
   3テーマ(ブルー/レッド/ダーク)を html[data-theme] で切替。既定はダーク(黒テーマ)。

   テーマ差し替え設計:
   - 配色は :root(ブルー基準値)に対する各テーマブロックの上書きで表現する
   - ヒーロー写真は --hero-image、その上の可読性オーバーレイは --hero-overlay、
     サイドバーは --sidebar-bg、検索フォームの面は --hero-panel で差し替える
   - ダーク: assets/hero-dark.jpg(機窓からの夕景・暖色系)
   - ブルー/レッド: assets/hero-day.jpg(昼の空と翼。写真は両テーマ共通でアクセント色のみ変更)
   - 「本日のマイル価値ランキング」パネル(.mile-ranking)はダークテーマ専用要素 */
:root {
  /* ブルー: ライト背景 + 青系アクセント */
  color-scheme: light;
  --page: #f3f6fa;
  --surface-1: #fbfcfe;
  --text-primary: #0b0b0b;
  --text-secondary: #52514e;
  --text-muted: #767471; /* 注記・ラベルの可読性のため一段濃く(対 #f3f6fa で約5:1) */
  --grid: #e2e5ea;
  --baseline: #c3c6cc;
  --border: rgba(11, 11, 11, 0.10);
  --series-price: #2a78d6;    /* 価格 = 青 */
  --series-mile: #1baf7a;     /* 獲得マイル = 緑 */
  --series-pp: #eda100;       /* PP/FOP = オレンジ */
  --series-unit: #7e5bd4;     /* PP/FOP単価 = 紫(安いほど長い逆スケール) */
  --series-mileunit: #d8478f; /* マイル単価 = ピンク(同・逆スケール) */
  --good-text: #006300;
  --accent: #2a78d6;
  --row-selected: rgba(42, 120, 214, 0.08);
  --sidebar-bg: #fbfcfe;
  --sidebar-text: #52514e;
  --hero-image: url("assets/hero-day.jpg");
  /* 1枚目=横方向の可読性オーバーレイ / 2枚目=ゾーン下部(注目運賃・絞り込み)を暗くする縦グラデーション */
  --hero-overlay: linear-gradient(180deg, transparent 0%, transparent 30%, rgba(9, 28, 56, 0.55) 55%, rgba(9, 28, 56, 0.78) 100%), linear-gradient(105deg, rgba(9, 28, 56, 0.62) 0%, rgba(9, 28, 56, 0.34) 55%, rgba(9, 28, 56, 0.22) 100%);
  --hero-panel: rgba(251, 252, 254, 0.88);
}
:root[data-theme="red"] {
  /* レッド: ブルーと同じレイアウト・写真のまま、アクセントのみ赤系 */
  --page: #faf4f3;
  --surface-1: #fefbfa;
  --grid: #ece2e0;
  --baseline: #d0c4c2;
  --accent: #d03b3b;
  --row-selected: rgba(208, 59, 59, 0.08);
  --sidebar-bg: #fefbfa;
  --hero-overlay: linear-gradient(180deg, transparent 0%, transparent 30%, rgba(46, 12, 16, 0.55) 55%, rgba(46, 12, 16, 0.78) 100%), linear-gradient(105deg, rgba(46, 12, 16, 0.60) 0%, rgba(46, 12, 16, 0.34) 55%, rgba(46, 12, 16, 0.22) 100%);
  --hero-panel: rgba(254, 251, 250, 0.88);
}
:root[data-theme="dark"] {
  /* ダーク(黒テーマ・既定): ダークネイビー〜黒のUI + 暖色系の夕景ヒーロー */
  color-scheme: dark;
  --page: #0b0e15;
  --surface-1: #151a26;
  --text-primary: #f7f9fc;
  --text-secondary: #e6eaf2;
  --text-muted: #c6cddd; /* ラベル・注記も白寄りに(対 #0b0e15 で約12:1。数値等の primary との強弱は維持) */
  --grid: #272e3d;
  --baseline: #394153;
  --border: rgba(255, 255, 255, 0.10);
  --series-price: #3f8ded;
  --series-mile: #21b380;
  --series-pp: #e39420;
  --series-unit: #9578ea;
  --series-mileunit: #e05f9f;
  --good-text: #38c172;
  --accent: #3f8ded;
  --row-selected: rgba(63, 141, 237, 0.14);
  --sidebar-bg: linear-gradient(180deg, #0e1322, #090c14);
  --sidebar-text: #e2e7f0; /* 可読性改善(2026-07-12): 白寄りに引き上げ */
  --hero-image: url("assets/hero-dark.jpg");
  --hero-overlay: linear-gradient(180deg, transparent 0%, transparent 30%, rgba(8, 11, 20, 0.60) 55%, rgba(8, 11, 20, 0.82) 100%), linear-gradient(100deg, rgba(8, 11, 20, 0.80) 0%, rgba(8, 11, 20, 0.48) 42%, rgba(8, 11, 20, 0.20) 72%, rgba(8, 11, 20, 0.45) 100%);
  --hero-panel: rgba(13, 17, 28, 0.74);
}

* { box-sizing: border-box; }
/* hidden 属性は display 指定を持つ要素(flex等)でも必ず非表示にする */
[hidden] { display: none !important; }
body {
  margin: 0;
  background: var(--page);
  color: var(--text-primary);
  font-family: system-ui, -apple-system, "Segoe UI", "Hiragino Sans", "Yu Gothic UI", sans-serif;
  font-size: 14px;
  line-height: 1.5;
}
.page { max-width: 1240px; margin: 0 auto; padding: 14px 24px 48px; }

/* ---- 全体レイアウト(左サイドバー + メイン) ------------------------------ */

.layout { display: flex; min-height: 100vh; align-items: stretch; }
.sidebar {
  flex: 0 0 224px; width: 224px;
  position: sticky; top: 0; height: 100vh;
  display: flex; flex-direction: column; gap: 14px;
  background: var(--sidebar-bg);
  border-right: 1px solid var(--border);
  padding: 18px 12px 14px;
}
.main { flex: 1; min-width: 0; }

/* ロゴ(サイドバー最上部)。正式ロゴ画像(透過PNG)を背景ボックスなしで表示。
   紺色主体のロゴはダーク系サイドバーでは沈むため、ダークテーマのみ CSS フィルタで
   明トーンに反転(invert+hue-rotate で青系の色相を保ったまま明色化)して視認性を確保する */
.brand { padding: 0 2px 2px; border-bottom: 1px solid var(--border); }
.brand-logo {
  margin: 0 0 8px; display: flex; align-items: center; justify-content: center;
  padding: 2px 4px;
}
/* ロゴはリンク(クリックでダッシュボード=ページ最上部へ戻る)。
   アンカーは画像にぴったり沿わせ、装飾は付けない */
.brand-link { display: flex; align-items: center; justify-content: center; text-decoration: none; }
.brand-logo img { display: block; height: 104px; width: auto; }
:root[data-theme="dark"] .brand-logo img { filter: invert(1) hue-rotate(180deg) brightness(1.12); }
h1 { font-size: 17px; font-weight: 800; letter-spacing: 0.04em; margin: 0; color: var(--text-primary); }

/* サイドバーナビ。文字はデザインレビューの推奨値(13.5px / weight 500 /
   ダークは #c6ccda ≈ 11.5:1)。アイコンは列幅固定+opacityでなく色で減光し、
   非アクティブ項目が「無効」に見えないようにする */
.side-nav { display: flex; flex-direction: column; gap: 4px; }
.side-link {
  display: flex; align-items: center; gap: 10px;
  font: inherit; font-size: 13.5px; font-weight: 500; line-height: 1.4; letter-spacing: 0.02em;
  text-align: left; text-decoration: none;
  color: var(--sidebar-text); background: transparent; border: none;
  padding: 10px 12px; border-radius: 9px; cursor: pointer; white-space: nowrap;
}
.side-ico { width: 18px; text-align: center; font-size: 15px; color: var(--text-muted); flex-shrink: 0; }
.side-link:hover { color: var(--text-primary); background: var(--row-selected); }
.side-link.is-active {
  color: #f5f7fb; font-weight: 700;
  background: linear-gradient(90deg, var(--accent), color-mix(in srgb, var(--accent) 55%, var(--series-unit)));
  box-shadow: 0 2px 8px color-mix(in srgb, var(--accent) 35%, transparent);
}
.side-link.is-active .side-ico { color: inherit; }
.side-link.is-disabled { cursor: default; opacity: 0.55; }
.side-link.is-disabled:hover { color: var(--sidebar-text); background: transparent; }
/* 注目運賃モードのオン状態(表を注目運賃だけに絞り込み中) */
.side-link.is-on { color: var(--accent); }
.side-link.is-on .side-ico { color: var(--accent); }
:root[data-theme="dark"] .side-link:hover { color: #e8ebf2; background: rgba(255, 255, 255, 0.05); }
:root[data-theme="dark"] .side-link.is-active:hover { color: #f5f7fb; }
.soon {
  margin-left: auto; font-size: 9px; font-weight: 600; color: var(--text-muted);
  border: 1px solid var(--border); border-radius: 999px; padding: 0 6px; flex-shrink: 0;
}
/* サイドバーの折りたたみトグル: 操作可能なボタンであることが分かるよう、
   面のあるボタン+ダブルシェブロンで明示する(折りたたみ時はCSSで矢印を反転) */
.side-collapse {
  margin-top: 12px;
  display: flex; align-items: center; justify-content: center; gap: 7px;
  border: 1px solid var(--baseline);
  background: color-mix(in srgb, var(--text-primary) 5%, transparent);
  color: var(--sidebar-text);
  font: inherit; font-size: 12px; font-weight: 600;
  padding: 8px; border-radius: 9px; cursor: pointer;
}
.side-collapse:hover { color: var(--text-primary); border-color: var(--accent); background: var(--row-selected); }
.sc-ico { width: 15px; height: 15px; flex-shrink: 0; transition: transform 0.15s; }
body.sidebar-collapsed .sc-ico { transform: rotate(180deg); }
.side-foot { margin-top: auto; font-size: 10.5px; color: var(--text-muted); padding: 0 6px; text-align: center; }

/* 折りたたみ状態(デスクトップのみ): ロゴのマーク部分+アイコンだけの細いバーになる */
@media (min-width: 981px) {
  body.sidebar-collapsed .sidebar { flex-basis: 68px; width: 68px; padding: 16px 10px 12px; }
  body.sidebar-collapsed .side-label,
  body.sidebar-collapsed .soon,
  body.sidebar-collapsed .side-foot { display: none; }
  body.sidebar-collapsed .side-link { justify-content: center; padding: 10px 0; }
  /* 折りたたみ時の展開ボタン: アクセント色のベタ塗り+大きめシェブロンで
     「押せば開く」ことが一目で分かるようにする */
  body.sidebar-collapsed .side-collapse {
    background: var(--accent); border-color: var(--accent); color: #fff;
    padding: 9px 0;
    box-shadow: 0 2px 8px color-mix(in srgb, var(--accent) 40%, transparent);
  }
  body.sidebar-collapsed .side-collapse:hover {
    background: color-mix(in srgb, var(--accent) 82%, #fff); color: #fff;
    border-color: color-mix(in srgb, var(--accent) 82%, #fff);
  }
  body.sidebar-collapsed .sc-ico { width: 19px; height: 19px; transform: rotate(180deg); }
  body.sidebar-collapsed .brand { padding: 0; display: flex; justify-content: center; }
  /* ロゴはマーク部分(管制塔+飛行機)だけを正方形に切り出して表示。
     flexの中央寄せとネガティブマージンは干渉するため絶対配置で切り出す */
  body.sidebar-collapsed .brand-logo {
    display: block; position: relative;
    width: 48px; height: 48px; overflow: hidden; border-radius: 10px; padding: 0; margin: 0 auto;
  }
  body.sidebar-collapsed .brand-logo img {
    position: absolute; top: -8px; left: -26px;
    height: 96px; width: auto; max-width: none; margin: 0;
  }
}

/* 上部ツールバー(ステータス要約ピル + デフォルトに戻す)。ヒーローの上に右寄せで置く。
   クイック編集(.status-editor)のドロップダウン基準位置になるため position: relative */
.topbar { position: relative; display: flex; align-items: center; justify-content: flex-end; gap: 8px; margin-bottom: 10px; }

.segmented-sm .seg-btn { font-size: 11px; padding: 2px 9px; }

.header-reset-btn {
  border: 1px solid var(--border); background: var(--surface-1); color: var(--text-muted);
  font: inherit; font-size: 11px; white-space: nowrap;
  height: 28px; padding: 0 9px; border-radius: 8px; cursor: pointer;
}
.header-reset-btn:hover { color: var(--text-primary); border-color: var(--accent); }

/* 設定メニュー(サイドバーの「設定」で開くモーダル内。項目クリックで詳細セクションへ) */
.settings-menu { display: flex; flex-direction: column; }
.menu-item {
  border: none; background: transparent; color: var(--text-primary);
  font: inherit; font-size: 13px; text-align: left;
  padding: 8px 10px; border-radius: 6px; cursor: pointer;
}
.menu-item:hover { background: var(--row-selected); color: var(--accent); }

/* 設定の保存有無トグル(設定メニュー最下部) */
.persist-toggle {
  display: flex; align-items: center; gap: 7px;
  padding: 8px 10px; margin-top: 2px; border-top: 1px solid var(--grid);
  font-size: 12.5px; color: var(--text-secondary); cursor: pointer; user-select: none;
}
.persist-toggle input { accent-color: var(--accent); margin: 0; flex-shrink: 0; }
.persist-toggle:hover { color: var(--text-primary); }
.setting-select-row .unit-select { margin-left: auto; }

/* ---- ヒーロー(空写真 + オーバーレイ + 検索フォーム) ---------------------- */

/* ヒーローゾーン: 背景写真+オーバーレイを敷く外側ラッパー。ヒーロー本体〜
   注目運賃〜絞り込みパネルの下端までをカバーする(テーブル以下には及ばない)。
   【重要】overflow: hidden を指定しないこと — 空港ドロップダウン(.dd-panel)が
   ゾーン境界でクリップされ、項目がクリック不能になる不具合の原因になる。
   背景の角丸は border-radius だけで効く */
.hero-zone {
  position: relative; margin-bottom: 16px;
  border: 1px solid var(--border); border-radius: 16px;
  background-color: #0a0d16;
  background-image: var(--hero-overlay), var(--hero-image);
  background-size: cover, cover;
  background-position: center 38%, center 38%;
  padding-bottom: 4px;
}
/* ゾーン直下に置く各パネルの左右余白(ヒーロー内側の余白と揃える) */
.hero-zone > .ad-unit,
.hero-zone > .filter-panel { margin-left: 16px; margin-right: 16px; }
.hero { position: relative; }
.hero-inner { display: flex; align-items: stretch; gap: 24px; padding: 30px 28px 18px; }

/* ヒーロー文言は全テーマとも暗色オーバーレイの上に白文字で載せる */
.hero-copy { flex: 1; min-width: 0; color: #fff; text-shadow: 0 1px 12px rgba(0, 0, 0, 0.45); }
.hero-eyebrow {
  margin: 0; font-size: 11px; font-weight: 700; letter-spacing: 0.16em;
  color: rgba(255, 255, 255, 0.78);
}
.hero-eyebrow::before {
  content: ""; display: inline-block; width: 22px; height: 2px; border-radius: 2px;
  background: var(--accent); vertical-align: middle; margin-right: 8px;
}
.hero-title { margin: 10px 0 12px; font-size: 30px; font-weight: 800; line-height: 1.32; letter-spacing: 0.01em; }
.subtitle { margin: 0; color: rgba(255, 255, 255, 0.84); max-width: 560px; font-size: 12.5px; line-height: 1.65; }
.subtitle strong { color: #fff; font-weight: 700; }

/* 本日のマイル価値ランキング(ヒーロー右上の固定パネル。ダークテーマ専用)。
   比較データ内でマイル単価(円/マイル)が良い順の静的ランキング表示 */
.mile-ranking {
  display: none;
  flex: 0 0 320px; width: 320px; align-self: flex-start;
  background: rgba(10, 14, 24, 0.72);
  -webkit-backdrop-filter: blur(7px); backdrop-filter: blur(7px);
  border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 13px;
  padding: 13px 15px 10px; color: #edf0f6;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.35);
}
:root[data-theme="dark"] .mile-ranking { display: block; }
.mr-head { display: flex; flex-direction: column; gap: 1px; margin-bottom: 4px; }
.mr-title { font-size: 13px; font-weight: 800; letter-spacing: 0.05em; }
.mr-sub { font-size: 10.5px; color: rgba(255, 255, 255, 0.88); }
.mr-list { list-style: none; margin: 6px 0 2px; padding: 0; }
.mr-item {
  display: flex; align-items: center; gap: 9px;
  padding: 6px 1px; border-top: 1px solid rgba(255, 255, 255, 0.09);
}
.mr-item:first-child { border-top: none; }
.mr-rank {
  width: 19px; height: 19px; border-radius: 50%; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 10.5px; font-weight: 800;
  background: rgba(255, 255, 255, 0.13); color: rgba(255, 255, 255, 0.85);
}
/* 上位3位はメダル風の色分け */
.mr-item:nth-child(1) .mr-rank { background: rgba(233, 180, 76, 0.28); color: #f4cf7d; }
.mr-item:nth-child(2) .mr-rank { background: rgba(196, 206, 222, 0.24); color: #d9e0ec; }
.mr-item:nth-child(3) .mr-rank { background: rgba(206, 137, 86, 0.26); color: #e2a97e; }
.mr-main { flex: 1; min-width: 0; line-height: 1.3; }
.mr-route { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; }
.mr-route .airline-mark { margin-right: 0; }
.mr-fare {
  display: block; font-size: 10.5px; color: rgba(255, 255, 255, 0.88);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.mr-unit { flex-shrink: 0; text-align: right; white-space: nowrap; }
.mr-unit strong { font-size: 13px; font-weight: 800; color: var(--series-mileunit); font-variant-numeric: tabular-nums; }
/* PP/FOP単価表示時は単価数値を系列色(紫)に切替(比較表の列色と揃える) */
.mile-ranking.is-pp .mr-unit strong { color: var(--series-unit); }
.mr-unit .mr-unit-label { display: block; font-size: 10px; color: rgba(255, 255, 255, 0.88); }
.mr-note { margin: 7px 0 0; font-size: 10.5px; color: rgba(255, 255, 255, 0.88); }

/* 検索フォーム(半透明パネル。中のコントロールIDは従来の絞り込みと同一)。
   details による折りたたみ式(見出し行クリックで開閉) */
.hero-search {
  /* z-index: 後続の注目運賃カード等(position: relative)より上に、
     内包する空港ドロップダウンのパネルを描画するために必須 */
  position: relative; z-index: 20; margin: 2px 16px 18px;
  background: var(--hero-panel);
  -webkit-backdrop-filter: blur(9px); backdrop-filter: blur(9px);
  border: 1px solid var(--border); border-radius: 13px;
  box-shadow: 0 8px 26px rgba(0, 0, 0, 0.30);
}
.hs-head {
  display: flex; align-items: baseline; gap: 8px;
  padding: 9px 16px; cursor: pointer; user-select: none;
  list-style: none; font-size: 13px;
}
.hs-head::-webkit-details-marker { display: none; }
.hs-title { font-weight: 700; white-space: nowrap; }
.hs-head:hover .hs-title { color: var(--accent); }
.hs-sub {
  flex: 1; min-width: 0; font-size: 11px; color: var(--text-muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.hs-head .fp-toggle { align-self: center; }
.hero-search:not([open]) .fp-toggle { transform: rotate(180deg); }
.hs-body { padding: 11px 16px 12px; border-top: 1px solid var(--grid); }
/* 全入力項目を1つのフレックス行にまとめ、幅が十分なら1行に収める
   (幅・余白は最小限に圧縮。狭い画面では自然に折り返す) */
.search-fields { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px 10px; }
.sf-field { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.hero-search .unit-select { font-size: 12.5px; padding: 6px 8px; min-width: 0; border-radius: 8px; }
.hero-search .date-input { width: 138px; }
.hero-search .dd-toggle { display: inline-flex; align-items: center; justify-content: space-between; gap: 6px; min-width: 84px; cursor: pointer; }
.hero-search .icon-btn { width: 30px; height: 30px; background: var(--surface-1); }
/* 検索ボタン: 他の入力欄と高さを揃えた控えめなサイズ。行の右端に寄せる */
.hero-search-btn {
  margin-left: auto; border: none; cursor: pointer;
  background: var(--accent);
  color: #fff; font: inherit; font-size: 12.5px; font-weight: 600; letter-spacing: 0.05em;
  padding: 7px 16px; border-radius: 8px;
}
.hero-search-btn:hover { filter: brightness(1.08); }
/* 日付選定の注記(フィールド行の下・全幅) */
.hero-search .date-note { display: block; margin-top: 8px; }
.ab-row { display: flex; align-items: center; gap: 5px; }

/* 設定詳細モーダル */
.modal {
  position: fixed; inset: 0; z-index: 80;
  background: rgba(0, 0, 0, 0.42);
  display: flex; align-items: flex-start; justify-content: center;
  padding: 9vh 16px 16px;
}
.modal[hidden] { display: none; }
.modal-box {
  width: 520px; max-width: 100%; max-height: 80vh;
  display: flex; flex-direction: column;
  background: var(--surface-1); border: 1px solid var(--baseline); border-radius: 10px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
}
.modal-head {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; border-bottom: 1px solid var(--grid);
}
.modal-head strong { flex: 1; text-align: center; font-size: 14px; }
.modal-close {
  border: none; background: transparent; color: var(--text-muted);
  font: inherit; font-size: 15px; cursor: pointer; padding: 2px 6px;
}
.modal-close:hover { color: var(--text-primary); }
.modal-body { padding: 12px 14px; overflow-y: auto; }

/* モーダル内の情報セクション共通スタイル */
.settings-info { font-size: 12.5px; color: var(--text-secondary); }
.settings-info h2 { font-size: 13px; margin: 0 0 6px; color: var(--text-primary); }
.settings-info ul { margin: 0; padding-left: 18px; }
.settings-info li { margin-bottom: 4px; }
.settings-info p { margin: 0; }
.settings-info a { color: var(--accent); }
.settings-row {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  margin-bottom: 8px; white-space: nowrap;
}
.settings-row .unit-select { max-width: 180px; }
.settings-note { margin: 2px 0 0; font-size: 11px; color: var(--text-muted); }
.settings-check-row { margin: -2px 0 8px; }
.settings-check {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12.5px; cursor: pointer; user-select: none;
}
.settings-check input { accent-color: var(--accent); cursor: pointer; }
.settings-hint { display: block; margin-top: 2px; font-size: 11px; color: var(--text-muted); }

/* ステータスボーナスの適用状況(トップバーのピル型チップ。クリックでクイック編集)。
   デザインレビュー準拠: 28px高・角丸ピル・情報の強弱を明度3段階で表現 */
.status-summary {
  display: inline-flex; align-items: center; gap: 5px;
  height: 28px; padding: 0 12px; border-radius: 14px;
  border: 1px solid var(--grid); background: transparent;
  font-size: 11.5px; white-space: nowrap;
  color: var(--text-secondary); cursor: pointer; user-select: none;
}
.status-summary:hover {
  border-color: color-mix(in srgb, var(--accent) 55%, var(--grid));
  background: color-mix(in srgb, var(--accent) 8%, transparent);
}
.status-summary:focus-visible { outline: 2px solid color-mix(in srgb, var(--accent) 50%, transparent); outline-offset: 1px; }
.ss-airline { font-weight: 600; }
.ss-ANA { color: #00408f; }
.ss-JAL { color: #b8001f; }
.ss-airline.is-off { color: var(--text-muted); font-weight: 400; }
.ss-detail { color: var(--text-muted); }
.ss-rate { color: var(--text-primary); font-weight: 600; }
.ss-sep { color: var(--baseline); margin: 0 3px; }
.ss-edit { font-size: 10px; color: var(--text-muted); margin-left: 4px; }
.status-summary:hover .ss-edit { color: var(--text-primary); }
/* ダークテーマ: 小サイズでも沈まない明るめのブランド色・明度3段階(レビュー推奨値) */
:root[data-theme="dark"] .ss-ANA { color: #5b8ff0; }
:root[data-theme="dark"] .ss-JAL { color: #e05a6d; }
:root[data-theme="dark"] .ss-detail { color: #c6cddd; }
:root[data-theme="dark"] .ss-rate { color: #f2f4f8; }
:root[data-theme="dark"] .ss-airline.is-off { color: #a7b0c4; }
:root[data-theme="dark"] .ss-sep { color: #5c6579; }

/* ステータスのクイック編集フォーム(トップバー直下のドロップダウン) */
.status-editor {
  position: absolute; top: calc(100% + 4px); right: 0; z-index: 65;
  width: 340px; max-width: calc(100vw - 32px);
  background: var(--surface-1); border: 1px solid var(--baseline); border-radius: 10px;
  padding: 10px 12px;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.35);
}
.qe-actions {
  display: flex; align-items: center; gap: 10px;
  margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--grid);
}
.qe-save {
  border: 1px solid var(--accent); background: var(--accent); color: #fff;
  font: inherit; font-size: 12.5px; font-weight: 600;
  padding: 4px 16px; border-radius: 7px; cursor: pointer;
}
.qe-save:disabled { opacity: 0.8; cursor: default; }

/* 絞り込み・並べ替えの折りたたみパネル */
.filter-panel {
  background: var(--surface-1); border: 1px solid var(--border); border-radius: 10px;
  margin-bottom: 12px;
}
.filter-panel > summary {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 12px; cursor: pointer; user-select: none;
  list-style: none; font-size: 13px;
}
.filter-panel > summary::-webkit-details-marker { display: none; }
.fp-title { font-weight: 600; white-space: nowrap; }
.fp-state {
  flex: 1; min-width: 0; color: var(--text-muted); font-size: 12px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.fp-toggle { color: var(--text-muted); font-size: 10px; transition: transform 0.15s; }
.filter-panel:not([open]) .fp-toggle { transform: rotate(180deg); }
.filter-panel-body { padding: 8px 12px 10px; border-top: 1px solid var(--grid); }

/* トースト通知(画面上部中央。1件のみ・4秒で自動的に消える) */
.toast {
  position: fixed; top: 14px; left: 50%; transform: translateX(-50%); z-index: 100;
  display: flex; align-items: center; gap: 10px;
  max-width: min(92vw, 420px);
  background: var(--surface-1); border: 1px solid var(--baseline); border-radius: 10px;
  padding: 9px 13px; font-size: 12.5px; color: var(--text-primary);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
  animation: toast-in 0.18s ease-out;
}
.toast[hidden] { display: none; }
.toast-close {
  border: none; background: transparent; color: var(--text-muted);
  font-size: 11px; padding: 2px; cursor: pointer; flex-shrink: 0;
}
.toast-close:hover { color: var(--text-primary); }
@keyframes toast-in {
  from { opacity: 0; transform: translate(-50%, -8px); }
  to { opacity: 1; transform: translate(-50%, 0); }
}

/* 比較パネルの「選択のみ表示」トグルのオン状態 */
.note-btn.is-on { color: var(--accent); border-color: var(--accent); font-weight: 700; }

/* サイドバーのアンカー/スクロール移動先の上余白 */
#fare-table { scroll-margin-top: 12px; }

/* 空港の二階層ドロップダウン(すべて+主要空港+折りたたみ地域行 → クリックで展開) */
.airport-dd { position: relative; display: inline-block; }
.dd-toggle { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.dd-caret { font-size: 9px; color: var(--text-muted); }
.dd-panel {
  position: absolute; z-index: 70; top: calc(100% + 4px); left: 0;
  min-width: 172px; max-height: 320px; overflow-y: auto;
  background: var(--surface-1); border: 1px solid var(--baseline); border-radius: 8px;
  padding: 4px; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18);
}
.dd-item, .dd-region {
  display: block; width: 100%; text-align: left;
  border: none; background: transparent; color: var(--text-primary);
  font: inherit; font-size: 12.5px; padding: 6px 9px; border-radius: 6px; cursor: pointer;
}
.dd-item:hover, .dd-region:hover { background: var(--row-selected); color: var(--accent); }
.dd-item.is-selected { color: var(--accent); font-weight: 700; }
.dd-region { color: var(--text-muted); font-weight: 700; font-size: 12px; }
.dd-region-caret { display: inline-block; width: 14px; }
.dd-item-sub { padding-left: 28px; }
@media (max-width: 760px) {
  .dd-item, .dd-region { padding: 8px 10px; font-size: 13px; }
}

/* 日付選定欄(将来機能のプレースホルダー。データに影響しないため控えめなトーン) */
.date-input {
  color: var(--text-muted);
  border-style: dashed;
  background: transparent;
}
/* 注記は検索フォーム最下段の全幅に表示(可読性のためサイズ・ウェイトを底上げ) */
.date-note {
  flex-basis: 100%;
  font-size: 11.5px; font-weight: 500; line-height: 1.5; color: var(--text-muted);
}
.date-note.is-emphasized { animation: date-note-flash 1.6s ease-out; }
@keyframes date-note-flash {
  0%, 60% { color: var(--accent); }
  100% { color: var(--text-muted); }
}

/* controls */
.controls { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; }
.control-group { display: flex; align-items: center; gap: 8px; }
/* ラベルは小さめ・太字・グレーで、選択肢ボタンと視覚的に区別する */
.control-label {
  font-size: 11.5px; font-weight: 700; color: var(--text-muted);
  letter-spacing: 0.04em; white-space: nowrap;
}
/* ラベル列は固定幅にして、全行でコントロール側の左端(縦の区切り位置)を揃える。
   最長ラベル「PP/FOP単価」が収まる幅を基準にする */
.controls .control-label { flex: 0 0 74px; }
.segmented { display: inline-flex; background: var(--surface-1); border: 1px solid var(--border); border-radius: 8px; padding: 2px; }
.seg-btn {
  border: none; background: transparent; color: var(--text-secondary);
  font: inherit; font-size: 13px; padding: 4px 12px; border-radius: 6px; cursor: pointer;
}
.seg-btn:hover { color: var(--text-primary); }
.seg-btn.is-active { background: var(--accent); color: #fff; }
.control-hint { font-size: 12px; color: var(--text-muted); margin: 0; }
/* プルダウンは一回り小さく(モバイルではタップしやすさ確保のため少し戻す) */
.unit-select, #sort-select {
  font: inherit; font-size: 12px; color: var(--text-primary);
  background: var(--surface-1); border: 1px solid var(--border); border-radius: 7px;
  padding: 3px 6px;
}
@media (max-width: 760px) {
  .unit-select, #sort-select { font-size: 12.5px; padding: 5px 7px; }
}
.fare-type-group { align-items: flex-start; flex-basis: 100%; }
.fare-type-group .control-label { margin-top: 4px; }
.fare-type-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.filter-chip {
  display: inline-flex; align-items: center;
  font-size: 12px; color: var(--text-secondary);
  background: var(--page); border: 1px solid var(--border);
  border-radius: 999px; padding: 1px 10px; cursor: pointer; user-select: none;
}
.filter-chip input { display: none; }
.filter-chip:hover { color: var(--text-primary); border-color: var(--baseline); }
.filter-chip.is-on {
  background: var(--row-selected); border-color: var(--accent);
  color: var(--text-primary); font-weight: 600;
}
.filter-chip.is-on::before { content: "✓ "; color: var(--accent); }

.empty-row td, .empty-msg {
  padding: 28px 16px; text-align: center; color: var(--text-muted); font-size: 13px;
}

/* table */
.table-wrap { overflow-x: auto; background: var(--surface-1); border: 1px solid var(--border); border-radius: 10px; }
table { border-collapse: collapse; width: 100%; min-width: 1020px; font-size: 13px; }
thead th {
  position: sticky; top: 0; background: var(--surface-1);
  text-align: left; font-size: 12px; font-weight: 600; color: var(--text-secondary);
  padding: 6px 10px; border-bottom: 1px solid var(--baseline); white-space: nowrap;
}
thead th.sortable { cursor: pointer; user-select: none; }
thead th.sortable:hover { color: var(--text-primary); }
thead th .sort-ind { color: var(--text-muted); font-size: 10px; margin-left: 3px; }
th.th-num { text-align: left; }
/* 列ごとの系列色ドット(価格=青 / PP・FOP=オレンジ / PP・FOP単価=紫 / 獲得マイル=緑 / マイル単価=ピンク) */
.dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 5px; vertical-align: baseline; }
.dot-price { background: var(--series-price); }
.dot-mile { background: var(--series-mile); }
.dot-pp { background: var(--series-pp); }
.dot-unit { background: var(--series-unit); }
.dot-mileunit { background: var(--series-mileunit); }
tbody td { padding: 4px 10px; border-bottom: 1px solid var(--grid); vertical-align: middle; }
tbody tr:last-child td { border-bottom: none; }

.cell-route .route-name { font-weight: 600; }
.cell-route .fare-line { font-size: 12px; color: var(--text-secondary); }

/* 運賃(路線別)セル: バッジ・運賃名を1単位ずつ折り返すフレックス配置。
   フレックス化は td 自体ではなく内側ラッパーに適用する
   (td の display を table-cell から変えると列見出しと本体がズレるため) */
.cell-fare { min-width: 210px; }
/* 路線名(固定幅)→ バッジ(固定幅)→ 運賃名 の順で開始位置を全行で揃える。
   長い運賃名は運賃名スパンの内部で折り返す(行頭に落とさない) */
.cell-fare-inner { display: flex; flex-wrap: nowrap; align-items: center; gap: 2px 6px; }
.cell-fare .fare-name { font-weight: 600; flex: 1 1 auto; min-width: 0; }
.cell-fare .airline-mark { margin-right: 0; flex-shrink: 0; }
.cell-fare .chip { margin-left: 0; }
/* フラット表示時に各行へ表示する路線名 */
.row-route { font-weight: 600; color: var(--text-secondary); }
/* テーブル(フラット表示)では路線名を固定幅の列にして、
   後続の会社バッジ・運賃名の開始位置を全行で揃える */
.cell-fare .row-route { flex: 0 0 120px; }

/* 出発・到着日時列(将来の日付別データ用プレースホルダー) */
.cell-time { white-space: nowrap; font-size: 12px; }
.chip {
  display: inline-block; font-size: 11px; padding: 0 6px; border-radius: 4px;
  border: 1px solid var(--border); color: var(--text-secondary); margin-left: 6px;
}
/* 会社バッジ: ロゴ・エンブレムは使用せず、テキストのみの色付きピルで表現する。
   各社ブランドカラー固定(カラーテーマの影響を受けない)。
   白文字とのコントラストを確保した濃色をベタ塗りで使用 */
/* 幅は固定(ANA/JALの文字幅差で後続の運賃名の開始位置がずれないように) */
.airline-mark { display: inline-block; width: 38px; box-sizing: border-box; text-align: center; font-size: 11px; font-weight: 600; padding: 0; border-radius: 4px; border: 1px solid var(--baseline); margin-right: 6px; }
.airline-mark.airline-ANA { background: #00408f; border-color: #00408f; color: #fff; }
.airline-mark.airline-JAL { background: #b8001f; border-color: #b8001f; color: #fff; }

/* 数値+行内バー(棒: 高さ10px、データ端のみ4px角丸、基線側は直角) */
.num { font-variant-numeric: tabular-nums; white-space: nowrap; }
/* 重要指標の強調: 価格は太め、PP/FOP単価は最重要として最も強く */
.cell-price .num { font-weight: 600; }
.cell-ppunit .num { font-weight: 700; font-size: 13.5px; }
.measure { min-width: 132px; }
.measure .num { display: block; margin-bottom: 2px; }
.bar-track { position: relative; width: 120px; height: 9px; background: var(--grid); border-radius: 0 4px 4px 0; }
/* PP/FOP単価ゲージの「10円」目安の点線(スケール連動位置) */
.unit-mark {
  position: absolute; top: -2px; bottom: -2px; width: 0;
  border-left: 1px dashed color-mix(in srgb, var(--text-secondary) 70%, transparent);
  pointer-events: none;
}
.bar { height: 9px; border-radius: 0 4px 4px 0; min-width: 2px; }
.bar-price { background: var(--series-price); }
.bar-mile { background: var(--series-mile); }
.bar-pp { background: var(--series-pp); }
.bar-unit { background: var(--series-unit); }
.bar-mileunit { background: var(--series-mileunit); }
.na { color: var(--text-muted); }

.best-chip {
  display: inline-block; font-size: 11px; font-weight: 600; color: var(--good-text);
  margin-left: 6px; white-space: nowrap;
}

.note-btn {
  border: 1px solid var(--border); background: transparent; color: var(--text-secondary);
  border-radius: 6px; font: inherit; font-size: 12px; padding: 1px 8px; cursor: pointer;
}
.note-btn:hover { color: var(--text-primary); border-color: var(--baseline); }
tr.note-row td {
  background: var(--page); font-size: 12px; color: var(--text-secondary);
  padding: 6px 12px;
}
tr.note-row .calc { color: var(--text-muted); margin-top: 4px; }

/* assumptions footer */
/* 前提条件・算出方法(設定パネル内に表示) */
.assumptions { margin: 0; }
.assumptions h2 { font-size: 13px; margin: 0 0 8px; }
.assumptions dl { margin: 0 0 10px; display: grid; grid-template-columns: max-content 1fr; gap: 4px 14px; font-size: 12.5px; }
.assumptions dt { color: var(--text-muted); white-space: nowrap; }
.assumptions dd { margin: 0; color: var(--text-secondary); }
/* 算出方法の大枠説明(具体的な計算式は非公開) */
.assumptions .calc-note { margin: 0 0 10px; font-size: 12.5px; color: var(--text-secondary); }
.assumptions ul { margin: 0; padding-left: 18px; font-size: 12px; color: var(--text-muted); }
.assumptions li { margin-bottom: 2px; }
.assumptions .ref-note { margin: 10px 0 0; font-size: 12px; color: var(--text-muted); }

/* 路線グルーピング */
tr.group-row td {
  background: var(--page);
  font-weight: 600; font-size: 13px;
  padding: 4px 10px;
  border-top: 1px solid var(--baseline);
}
tr.group-row:first-child td { border-top: none; }
.group-count { font-size: 11px; font-weight: 400; color: var(--text-muted); margin-left: 4px; }

/* 路線グループの縦線インジケーター(路線ごと表示時のみ)。
   左端の細い縦線がグループ内で連続し、隣接グループと濃淡が交互に変わることで
   スクロール中でも路線の切れ目が分かる。フラット表示ではclassが付かず非表示 */
#fare-table tbody tr > td:first-child { border-left: 3px solid transparent; }
tr.route-band-a > td:first-child { border-left-color: color-mix(in srgb, var(--accent) 45%, transparent); }
tr.route-band-b > td:first-child { border-left-color: var(--baseline); }

/* 選択行 */
.th-check { width: 34px; }
.cell-check { text-align: center; }
.row-check { width: 15px; height: 15px; accent-color: var(--accent); cursor: pointer; }
tr.fare-row.is-selected td { background: var(--row-selected); }
.m-card.is-selected { border-color: var(--accent); }

/* 可変幅バー(カード・比較パネル用) */
.bar-track-fluid { width: 100%; }

/* 比較パネル(下部固定)。デスクトップではサイドバー分を右へ寄せる */
.compare-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
  background: var(--surface-1); border-top: 1px solid var(--baseline);
  box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.12);
}
@media (min-width: 981px) {
  .compare-bar { left: 224px; }
  body.sidebar-collapsed .compare-bar { left: 68px; }
}
.compare-inner { max-width: 1240px; margin: 0 auto; padding: 10px 24px 12px; }
.compare-head { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; font-size: 13px; }
.compare-cards { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 4px; }
.c-card {
  flex: 0 0 auto; width: 220px;
  border: 1px solid var(--border); border-radius: 8px; padding: 8px 10px;
  background: var(--page); font-size: 12px;
}
.c-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 2px; }
.c-remove { border: none; background: transparent; color: var(--text-muted); cursor: pointer; font-size: 13px; padding: 0 2px; }
.c-remove:hover { color: var(--text-primary); }
.c-fare { color: var(--text-secondary); margin-bottom: 6px; }
.c-line { display: grid; grid-template-columns: 44px 1fr; gap: 2px 8px; align-items: center; margin-bottom: 4px; }
.c-line .bar-track-fluid { grid-column: 1 / -1; height: 8px; }
.c-line .bar { height: 8px; }
.c-label { color: var(--text-muted); }
.c-units { display: flex; gap: 12px; margin-top: 6px; color: var(--text-secondary); flex-wrap: wrap; }
body.has-compare .page { padding-bottom: 230px; }

/* スマホ用カード表示(PCでは非表示) */
.cards { display: none; }

/* アイコンボタン(現在地など)。タップしやすいサイズを確保 */
.icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; flex: 0 0 auto;
  border: 1px solid var(--border); background: transparent; color: var(--text-secondary);
  border-radius: 7px; cursor: pointer;
}
.icon-btn:hover { color: var(--accent); border-color: var(--accent); }

/* ---- レスポンシブ: サイドバーを上部バー化(タブレット以下) ---------------- */
@media (max-width: 980px) {
  .layout { flex-direction: column; }
  .sidebar {
    position: static; width: 100%; height: auto; flex: 0 0 auto;
    flex-direction: row; align-items: center; gap: 12px;
    padding: 10px 14px; border-right: none; border-bottom: 1px solid var(--border);
  }
  .brand-logo { padding: 2px 4px; }
  .brand-logo img { height: 48px; }
  .side-collapse { display: none; } /* 上部バー化するモバイルでは折りたたみ不要 */
  /* ナビは横スクロール・折り返しともに発生させず、必ず1段に収める
     (スマホ幅ではさらにアイコンを外して文字のみのコンパクトなタブにする) */
  .side-nav { flex-direction: row; flex: 1; flex-wrap: nowrap; min-width: 0; overflow: visible; gap: 2px 4px; }
  .side-link { padding: 6px 8px; font-size: 12.5px; gap: 6px; }
  .side-ico { width: 15px; font-size: 13px; }
  .brand { border-bottom: none; padding: 0; }
  .brand-logo { margin: 0; }
  .soon { display: none; }
  .side-foot { display: none; }
  /* 狭い画面では文言が写真の明部(夕日周辺)と重なるため、オーバーレイを一段濃くする */
  .hero-zone { background-image: linear-gradient(rgba(8, 11, 20, 0.42), rgba(8, 11, 20, 0.42)), var(--hero-overlay), var(--hero-image); }
  .hero-inner { flex-direction: column; gap: 16px; padding: 22px 18px 12px; }
  .mile-ranking { width: 100%; flex-basis: auto; }
  .hero-title { font-size: 24px; }
  .hero-search { margin: 2px 12px 14px; }
  .hero-search-btn { margin-left: 0; width: 100%; }
}

@media (max-width: 760px) {
  .page { padding: 12px 12px 40px; }
  .table-wrap { display: none; }
  .cards { display: block; }
  .control-hint { display: none; }
  .icon-btn { width: 30px; height: 30px; }
  .sf-field { flex: 1 1 46%; }
  .sf-field .unit-select, .sf-field .airport-dd, .sf-field .dd-toggle { width: 100%; }

  /* スマホの上部タブ: アイコンを外した文字のみのタブにして、
     実機幅(375〜430px)でも横スクロール・折り返しなしの1段に必ず収める */
  .sidebar { gap: 8px; padding: 8px 10px; }
  .brand-logo { padding: 2px; }
  .brand-logo img { height: 40px; }
  .side-nav { gap: 2px; }
  .side-link { padding: 7px 5px; font-size: 11.5px; gap: 0; letter-spacing: 0; }
  .side-ico { display: none; }

  /* 搭乗日入力(date)は OS 既定の見た目だと他の入力欄より大きく描画され
     重なりの原因になるため、外観を無効化して他のプルダウンと同じ箱に揃える */
  .sf-field .unit-select, .sf-field .dd-toggle { min-height: 33px; }
  .sf-field .date-input {
    -webkit-appearance: none; appearance: none;
    height: 33px; min-width: 0; max-width: 100%;
  }
  .sf-field .date-input::-webkit-date-and-time-value { text-align: left; }

  .m-group { margin-bottom: 12px; }
  .m-group.route-band-a { border-left: 3px solid color-mix(in srgb, var(--accent) 45%, transparent); padding-left: 7px; }
  .m-group.route-band-b { border-left: 3px solid var(--baseline); padding-left: 7px; }
  .m-group-title { font-size: 14px; margin: 0 0 6px; }
  .m-card {
    background: var(--surface-1); border: 1px solid var(--border); border-radius: 10px;
    padding: 8px 10px; margin-bottom: 6px;
  }
  /* ヘッダー行: 会社・運賃名 + 右端に PP/FOP単価(最重要)と根拠ボタン。
     背景の左からの塗りが PP/FOP単価ゲージ(安いほど長い) */
  .m-head {
    display: flex; align-items: center; gap: 6px; margin-bottom: 5px;
    padding: 3px 6px; margin-left: -6px; margin-right: -6px; border-radius: 6px;
  }
  .m-head-gauge {
    position: relative;
    background: linear-gradient(
      90deg,
      color-mix(in srgb, var(--series-unit) 22%, transparent) var(--fill),
      transparent var(--fill)
    );
  }
  /* PP/FOP単価の「10円」目安の点線(ヘッダーゲージと同じスケールで配置)。
     .m-head-marked はスケール内のときだけJSが付与する(右端に無意味な
     点線の切れ端が映り込むのを防ぐ) */
  .m-head-marked::after {
    content: ""; position: absolute; left: var(--mark); top: 3px; bottom: 3px;
    border-left: 1px dashed color-mix(in srgb, var(--text-secondary) 70%, transparent);
    pointer-events: none;
  }
  /* 運賃名が1行に収まらない場合: PP/FOP単価と根拠ボタンを運賃名の上の行へ */
  .m-head-stacked { flex-wrap: wrap; }
  .m-head-stacked .m-head-right { order: -1; width: 100%; justify-content: flex-end; margin-left: 0; }
  .m-fare { font-weight: 600; min-width: 0; }
  .m-checklabel { display: inline-flex; align-items: center; }
  .m-head-right { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; flex: 0 0 auto; }
  .m-head-unit { font-size: 15px; font-weight: 700; color: var(--accent); }

  /* 指標は1行の横並びグリッド(狭い幅では折り返し) */
  .m-grid {
    display: flex; flex-wrap: wrap; gap: 4px 10px;
    border-top: 1px solid var(--grid); padding-top: 5px;
  }
  .m-cell { display: flex; flex-direction: column; gap: 0; flex: 1 1 20%; min-width: 68px; }
  /* 日時セル(出発日時・到着日時)は2つで1行目を占有し、
     価格〜マイル単価の指標群を2行目に落とす */
  .m-cell-time { flex: 1 1 42%; }
  .m-cell-label { font-size: 10px; font-weight: 400; color: var(--text-muted); white-space: nowrap; }
  .m-cell-value { font-size: 12.5px; font-weight: 600; }
  .m-note {
    font-size: 12px; color: var(--text-secondary);
    background: var(--page); border-radius: 8px; padding: 8px 10px; margin-top: 8px;
  }
  .m-note .calc { color: var(--text-muted); margin-top: 4px; }

  .compare-inner { padding: 8px 12px 10px; }
  .c-card { width: 180px; }
  body.has-compare .page { padding-bottom: 250px; }
}

/* ---- 一般公開向け追加スタイル ------------------------------------------- */

td.th-note { white-space: nowrap; }

/* 広告枠(hidden 属性が外されるまで非表示。表示時は「広告」ラベル付き) */
.ad-unit {
  margin: 0 0 20px; padding: 10px 12px;
  background: var(--surface-1); border: 1px solid var(--border); border-radius: 10px;
  text-align: center;
}
.ad-unit[hidden] { display: none; }
.ad-label {
  display: block; font-size: 10px; color: var(--text-muted);
  letter-spacing: 0.1em; margin-bottom: 6px;
}
.ad-slot { min-height: 90px; }

/* サイトフッター(運営者・プライバシーポリシー・コピーライトのみのコンパクト表示。
   免責事項・前提条件・広告についての詳細は設定パネル内に記載) */
.site-footer {
  margin-top: 16px; padding: 8px 12px;
  background: var(--surface-1); border: 1px solid var(--border); border-radius: 10px;
  font-size: 12px; color: var(--text-muted);
}
.site-footer a { color: var(--accent); }
/* 1行目: 運営者・お問い合わせ・リンク類(中央寄せ) / 2行目: コピーライト(中央揃え) */
.footer-meta { display: flex; flex-wrap: wrap; gap: 4px 16px; align-items: center; justify-content: center; }
.footer-nav { display: flex; flex-wrap: wrap; gap: 4px 14px; }
.site-footer .copyright { display: block; text-align: center; margin-top: 4px; }

/* プライバシーポリシー等の記事ページ(サイドバー無しの単独ページ)用の簡易ヘッダー */
.page-header { margin-bottom: 14px; padding-bottom: 10px; border-bottom: 1px solid var(--grid); }
.page-header h1 { font-size: 21px; }
.page-header .subtitle { color: var(--text-secondary); max-width: 720px; }
.page-header .subtitle strong { color: var(--text-primary); }

/* プライバシーポリシー等の記事ページ */
.article {
  background: var(--surface-1); border: 1px solid var(--border); border-radius: 10px;
  padding: 20px 22px; margin-bottom: 20px;
}
.article h2 { font-size: 16px; margin: 22px 0 8px; }
.article h2:first-child { margin-top: 0; }
.article p, .article ul { color: var(--text-secondary); font-size: 13.5px; }
.article ul { padding-left: 20px; }
.article li { margin-bottom: 4px; }
.article a { color: var(--accent); }
.article .revision { color: var(--text-muted); font-size: 12px; margin-top: 20px; }
.back-link { display: inline-block; margin-bottom: 14px; font-size: 13px; color: var(--accent); }