/*
 * site_common.css — 全ユーザー向けページ共通のデザイン基盤（Phase 1）
 * 設計: temp/agent/20261025_design_unification_design.md §3.1 / §3.2 / §3.3
 * - デザイントークン（色・角円・余白・フォント・文字サイズはrem基準）
 * - 共通ヘッダー（PC=ロゴ左+横並びテキストメニュー、SP=ロゴ+右上ハンバーガー）
 * - SP全面オーバーレイメニュー
 * - ボタン/入力の基本スタイル（共通クラス .sc-*, Phase 2/3 で段階適用）
 * ブレークポイントは 600px と 900px の2つのみ（max-width:768 上書き方式は廃止）。
 */

:root {
    /* フォント（§3.1 統一フォント・日本語考慮系） */
    --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Noto Sans JP", Meiryo, sans-serif;

    /* 色（現行ダークテーマの変数化） */
    --bg: #08111f;
    --bg-deep: #0d1a2d;
    --panel: #101826;
    --panel-soft: rgba(255, 255, 255, 0.06);
    --text: rgba(255, 255, 255, 0.92);
    --muted: rgba(255, 255, 255, 0.62);
    --accent: #4ecdc4;
    --accent-soft: rgba(78, 205, 196, 0.16);
    --accent-border: rgba(78, 205, 196, 0.35);
    --danger: #ff6b6b;
    --border: rgba(255, 255, 255, 0.14);

    /* 角円・余白 */
    --radius: 12px;
    --radius-sm: 8px;
    --gap: 14px;

    /* 文字サイズ（rem基準: 基準 SP 16px / PC 15px） */
    --fs-h1: 1.5rem;
    --fs-h2: 1.25rem;
    --fs-body: 1rem;
    --fs-sub: 0.85rem;

    /* 共通ヘッダー */
    --header-height: 3.25rem;
    /* 全面メニューはページ固有のstickyヘッダー(map/route/itinerary等 z-index 4200-4310)より上。
       同意モーダル(9998/9999)・エラー報告(9999)はこれより上に保つ。
       ※ .site-header 自体には z-index を付けない（スタッキングコンテキストを作ると
          内部の position:fixed オーバーレイがヘッダーの z 順に閉じ込められるため） */
    --z-site-overlay: 9500;

    /* ネイティブUI（selectドロップダウン・dateピッカー・スクロールバー）を
       ダークテーマで描画させる。Windows Chrome で select の option リストが
       白背景になり、明るい文字色を継承して読めなくなる問題の根本対策。 */
    color-scheme: dark;
}

/* select の選択肢リストはUA既定では白背景のため、option に明示的に
   ダーク背景+明るい文字色を指定する（2026-10-28 時刻select白背景修正）。
   --bg-input / --text-main は timetable.html 等ページ側で定義される変数。
   未定義ページではリテラル（site_common.css トークン準拠のダーク配色）が効く。 */
select option {
    background: var(--bg-input, #101826);
    color: var(--text-main, rgba(255, 255, 255, 0.92));
}

/* rem基準: SP=16px / PC(>=900px & pointer:fine)=15px。
   PC側の拡張は実ポインティングデバイスがマウス等(fine)のとき限定:
   タッチ端末(pointer:coarse)が「デスクトップ版サイト」等で幅~980pxを報告しても
   PCレイアウトに切り替えず、基本(モバイルファースト1列)のままにする（指示A）。
   さらに設計 §9.2: PCブロック内の全セレクタは :root:not([data-ua-mobile]) プレフィックスで、
   モバイルUA（_site_header.html 冒頭の早期スクリプトで html[data-ua-mobile] 付与）でも
   pointer:fine を報告する端末（DeX等マウス接続）ではPCスタイルを適用しない。 */
html {
    font-size: 16px;
}

@media (min-width: 900px) and (pointer: fine) {
    html:not([data-ua-mobile]) {
        font-size: 15px;
    }
}

/* 指示A: タッチ端末が幅900px以上（Android「デスクトップ版サイト」の~980px等）のとき。
   PCブロックは適用されず1列レイアウトのまま。幅が広いためrem基準の文字が
   物理的に小さくなるので、基準を約2倍に拡大して可読性を保つ
   （旧237.5%はユーザー評価「少し大きい」のため200%に縮小。2026-10-28）。 */
@media (min-width: 900px) and (pointer: coarse) {
    html {
        font-size: 200%;
    }
}

/* 設計 §9.2: モバイルUA（data-ua-mobile）が幅600px以上を報告したときの文字サイズ拡大。
   coarse判定が効かないケース（DeX等でpointer:fineを報告）でも、coarse時と同水準の
   約2倍拡大で可読性を保つ。600px未満の通常スマホ幅では適用されない。 */
@media (min-width: 600px) {
    html[data-ua-mobile] {
        font-size: 200%;
    }
}

body {
    font-family: var(--font-body);
    -webkit-text-size-adjust: 100%;
}

/* ページ固有のタイトル行が依存する共通レイアウト（旧nav_menu.cssから継承） */
[data-common-page-header-row] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    width: 100%;
    min-width: 0;
}

[data-common-page-header-row] > :first-child {
    min-width: 0;
}

/* ============================================================
 * 共通ヘッダー
 * ============================================================ */
.site-header {
    position: relative;
    width: 100%;
    background: rgba(8, 17, 31, 0.94);
    border-bottom: 1px solid var(--border);
    color: var(--text);
    font-family: var(--font-body);
    font-size: var(--fs-body);
}

.site-header-inner {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    max-width: 1280px;
    margin: 0 auto;
    padding: 0.4rem 0.75rem;
    min-height: var(--header-height);
    box-sizing: border-box;
}

.site-brand {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
    text-decoration: none;
}

.site-brand img {
    display: block;
    height: 1.75rem;
    width: auto;
}

/* ページタイトル（設計 §8.1 ヘッダー1段化）:
   ロゴの右に現在位置を表示し、長い場合は省略。ヘッダー内タイトルが各ページのh1を兼ねる。 */
.site-page-title {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--text);
    font-size: 1.02rem;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: 0.01em;
}

/* ロゴのみモード(TOP): タイトルはサイト名表記。広がらずロゴの隣に置く */
.site-header[data-header-mode="logo"] .site-page-title {
    flex: 0 1 auto;
}

.site-page-title:empty {
    display: none;
}

/* PC: 現在位置としての視認性を上げる（1行ヘッダー内で h1 相当の地位） */
@media (min-width: 900px) and (pointer: fine) {
            :root:not([data-ua-mobile]) .site-page-title {
        font-size: 1.15rem;
    }
}

/* 設計 §9.2 (2026-10-28): モバイルUAの拡大文字 (600px以上で root 200%) では
   1行省略だとタイトルが「時…」のようにほとんど消えるため、600px以上では
   折り返し表示に切り替える。<600pxの通常スマホは従来の1行省略のまま
   （rem定数ではなくラベル自体の省略挙動の切替のためメディアクエリで幅限定）。 */
@media (min-width: 600px) {
    html[data-ua-mobile] .site-page-title {
        white-space: normal;
        overflow: visible;
        text-overflow: clip;
    }
}

/* スクリーンリーダー専用テキスト（SEO用の追記やページ内h1など） */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* SP: 横並びメニューは非表示（PCで表示） */
.site-nav {
    display: none;
    flex: 0 0 auto;
    min-width: 0;
}

.site-nav-list {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    list-style: none;
    margin: 0;
    padding: 0;
    white-space: nowrap;
}

.site-nav-list a {
    display: block;
    padding: 0.4rem 0.6rem;
    border-radius: var(--radius-sm);
    color: var(--text);
    text-decoration: none;
    font-weight: 600;
    line-height: 1.4;
}

.site-nav-list a:hover {
    background: var(--accent-soft);
    color: var(--accent);
}

.site-nav-list a[aria-current="page"] {
    background: var(--accent-soft);
    color: var(--accent);
    box-shadow: inset 0 -2px 0 var(--accent);
}

.site-header-utility {
    display: none;
    flex: 0 0 auto;
    margin-left: auto;
}

.site-header-utility a {
    color: var(--muted);
    font-size: var(--fs-sub);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.site-header-utility a:hover {
    color: var(--accent);
}

/* SP: 右上ハンバーガー */
.site-menu-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    margin-left: auto;
    width: 2.75rem;
    height: 2.5rem;
    border-radius: var(--radius-sm);
    border: 1px solid var(--accent-border);
    background: rgba(0, 0, 0, 0.25);
    color: var(--accent);
    cursor: pointer;
    padding: 0;
}

.site-menu-btn:hover {
    background: var(--accent-soft);
}

.site-menu-btn svg {
    display: block;
    width: 1.4rem;
    height: 1.4rem;
}

/* ============================================================
 * SP全面オーバーレイメニュー（<900px）
 * ============================================================ */
.site-menu-overlay {
    position: fixed;
    inset: 0;
    z-index: var(--z-site-overlay);
    background: rgba(4, 10, 20, 0.72);
}

.site-menu-panel {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    padding: 0.5rem 1rem 1.25rem;
    overflow-y: auto;
    background: linear-gradient(160deg, var(--bg-deep) 0%, var(--bg) 70%);
    color: var(--text);
    font-family: var(--font-body);
}

.site-menu-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    min-height: var(--header-height);
}

.site-menu-title {
    color: var(--muted);
    font-size: var(--fs-sub);
    font-weight: 700;
    letter-spacing: 0.06em;
}

.site-menu-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.5rem;
    border-radius: var(--radius-sm);
    border: 1px solid var(--accent-border);
    background: rgba(0, 0, 0, 0.25);
    color: var(--accent);
    cursor: pointer;
    padding: 0;
    font-size: 1.25rem;
    line-height: 1;
}

.site-menu-close:hover {
    background: var(--accent-soft);
}

.site-menu-list {
    list-style: none;
    margin: 1rem 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.site-menu-list a {
    display: block;
    padding: 0.9rem 1rem;
    border-radius: var(--radius-sm);
    color: var(--text);
    text-decoration: none;
    font-size: 1.15rem;
    font-weight: 700;
    line-height: 1.4;
}

.site-menu-list a:hover {
    background: var(--accent-soft);
    color: var(--accent);
}

.site-menu-list a[aria-current="page"] {
    background: var(--accent-soft);
    color: var(--accent);
    box-shadow: inset 3px 0 0 var(--accent);
}

.site-menu-utility {
    margin-top: auto;
    padding-top: 1rem;
    border-top: 1px solid var(--border);
    display: grid;
    gap: 0.5rem;
    font-size: var(--fs-sub);
    color: var(--muted);
}

.site-menu-utility > a {
    color: var(--muted);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.site-menu-utility > a:hover {
    color: var(--accent);
}

.site-menu-version {
    color: var(--muted);
}

.site-menu-version summary {
    cursor: pointer;
    list-style: none;
    color: var(--muted);
}

.site-menu-version summary::-webkit-details-marker {
    display: none;
}

.site-menu-version-body {
    display: grid;
    gap: 0.2rem;
    padding: 0.35rem 0 0;
}

.site-menu-version-row {
    display: flex;
    justify-content: space-between;
    gap: 0.75rem;
}

.site-menu-version-label {
    white-space: nowrap;
}

.site-menu-version-value {
    text-align: right;
    word-break: break-word;
    color: var(--text);
}

/* TOPランディング専用のロゴのみヘッダー（_site_header.html の data-header-mode="logo"）。
   ナビ・ハンバーガーはテンプレート側で省略されるため、エラー報告だけ常時表示する。 */
.site-header[data-header-mode="logo"] .site-header-utility {
    display: block;
    margin-left: auto;
    padding-right: 0.25rem;
}

/* 開いている間は背面スクロールを止める */
body.site-menu-open {
    overflow: hidden;
}

/* 600px以上のPC拡張（大きめスマホ縦/タブレット縦）: ヘッダーの密度を少し上げる。
   タッチ端末のデスクトップモード(~980px)では適用しない（指示A: pointer:fine 限定） */
@media (min-width: 600px) and (pointer: fine) {
            :root:not([data-ua-mobile]) .site-header-inner {
        padding: 0.45rem 1.25rem;
    }
            :root:not([data-ua-mobile]) .site-brand img {
        height: 2rem;
    }
}

/* PC(>=900px & pointer:fine): ロゴ左＋横並びテキストメニュー6項目1行。
   タッチ端末(pointer:coarse)はデスクトップモード幅でもSPヘッダー(ハンバーガー)のまま */
@media (min-width: 900px) and (pointer: fine) {
            :root:not([data-ua-mobile]) .site-nav {
        display: block;
    }
            :root:not([data-ua-mobile]) .site-nav-list {
        flex-wrap: nowrap;
    }
            :root:not([data-ua-mobile]) .site-header-utility {
        display: block;
    }
            :root:not([data-ua-mobile]) .site-menu-btn,:root:not([data-ua-mobile]) .site-menu-overlay {
        display: none !important;
    }
            :root:not([data-ua-mobile]) body.site-menu-open {
        overflow: auto;
    }
}

/* ============================================================
 * ボタン/入力の基本スタイル（共通クラス: Phase 2/3 で段階適用）
 * ============================================================ */
.sc-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    box-sizing: border-box;
    min-height: 2.6rem;
    padding: 0.5rem 1.1rem;
    border-radius: var(--radius-sm);
    border: 1px solid rgba(78, 205, 196, 0.45);
    background: rgba(78, 205, 196, 0.14);
    color: var(--accent);
    font-family: inherit;
    font-size: var(--fs-body);
    font-weight: 700;
    line-height: 1.3;
    cursor: pointer;
    text-decoration: none;
}

.sc-btn:hover {
    background: rgba(78, 205, 196, 0.24);
}

.sc-btn-primary {
    border-color: var(--accent);
    background: var(--accent);
    color: #06231f;
}

.sc-btn-primary:hover {
    background: #66ded5;
}

.sc-input,
.sc-select {
    box-sizing: border-box;
    min-width: 8rem;
    max-width: 100%;
    min-height: 2.6rem;
    padding: 0.4rem 0.7rem;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    background: var(--panel);
    color: var(--text);
    font-family: inherit;
    font-size: var(--fs-body);
    line-height: 1.4;
}

.sc-input:focus,
.sc-select:focus {
    outline: 2px solid var(--accent);
    outline-offset: 1px;
}

.sc-card {
    box-sizing: border-box;
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: var(--gap);
}

/* ============================================================
 * 共通空港入力 (.sc-airport-field) — Phase 2（設計 §3.4）
 * 統一構造:
 *   span.sc-airport-field (position:relative = 入力ボックス本体・高さは入力と同じ)
 *     ├─ input[type=text]      (幅100%・右に⌖ボタン分の余白)
 *     └─ span.airport-quick-picker   (内側右の⌖ボタン+簡易選択メニュー)
 *   div.airport-resolver-ui    (状態表示: ボックス直下にフロー配置・候補はドロップダウン)
 * 旧来の JS注入CSS (airport_resolver.js / airport_quick_picker.js) を廃止し、
 * ここに統一した。旧クラス名 (airport-resolver-anchor 等) は互換フックとして併用。
 * ============================================================ */
.sc-airport-field {
    position: relative;
    display: block;
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    max-width: 100%;
}

.sc-airport-field > input[type="text"],
.sc-airport-field > input:not([type]) {
    display: block;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
    /* 内側右の⌖ボタン(34px+0.3rem)の分。狭いボックスでもテキスト領域を確保する */
    padding-right: 2.6rem;
}

/* ⌖ボタン（簡易選択）: 入力ボックスの内側右に配置。
   wrap をボックスの高さ全体に伸ばし、ボタンは min(34px, 100%) で
   低い入力欄（desktop の 32px 前後など）でもはみ出さない */
.airport-quick-picker {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0.3rem;
    z-index: 1200;
    display: inline-flex;
    align-items: center;
}

.airport-quick-picker-trigger {
    width: 34px;
    height: min(34px, 100%);
    padding: 0;
    border: 1px solid #8aa4c1;
    border-radius: 7px;
    background: #fff;
    color: #18324d;
    cursor: pointer;
    font-size: 19px;
    line-height: 1;
}

.airport-quick-picker-trigger:focus-visible,
.airport-quick-picker-menu button:focus-visible {
    outline: 3px solid #1684d8;
    outline-offset: 1px;
}

.airport-quick-picker-menu {
    position: absolute;
    right: 0;
    top: calc(100% + 5px);
    width: max-content;
    min-width: 150px;
    max-width: min(88vw, 240px);
    max-height: min(60vh, 320px);
    overflow: auto;
    padding: 5px;
    border: 1px solid #9aa9ba;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 5px 18px #0004;
    z-index: 1200;
}

.airport-quick-picker-menu[hidden] {
    display: none;
}

.airport-quick-picker-menu button {
    display: block;
    width: 100%;
    padding: 8px;
    border: 0;
    border-radius: 5px;
    background: transparent;
    color: #172538;
    text-align: left;
    cursor: pointer;
    white-space: nowrap;
}

.airport-quick-picker-menu button:hover {
    background: #e8f2fc;
}

/* 状態表示: ボックス直下（ボックスの兄弟要素としてフロー配置） */
.airport-resolver-ui {
    position: relative;
    display: block;
    min-width: 0;
}

.airport-resolver-status {
    display: block;
    font-size: 0.8em;
    min-height: 1.2em;
    padding: 2px 0;
    background: transparent;
}

.airport-resolver-status.valid {
    color: #28a745;
}

.airport-resolver-status.invalid {
    color: #dc3545;
}

.airport-resolver-status .warn {
    color: #ffc107;
}

/* 候補ドロップダウン: 入力ボックス直下に重ねて開く（フローは押さない） */
.airport-resolver-candidates {
    display: none;
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    width: max(100%, 240px);
    max-width: min(360px, 92vw);
    padding: 4px;
    border: 1px solid rgba(144, 166, 255, 0.42);
    border-radius: 8px;
    background: rgba(38, 46, 82, 0.96);
    box-shadow: 0 8px 20px rgba(15, 23, 42, 0.24);
    z-index: 1100;
}

.airport-resolver-candidates.is-open {
    display: block;
}

.airport-resolver-candidate {
    width: 100%;
    display: flex;
    justify-content: space-between;
    gap: 8px;
    border: none;
    background: rgba(255, 255, 255, 0.02);
    padding: 7px 8px;
    border-radius: 6px;
    cursor: pointer;
    text-align: left;
    color: #eef3ff;
    transition: background 0.15s ease, color 0.15s ease;
}

.airport-resolver-candidate:hover {
    background: rgba(120, 144, 255, 0.24);
    color: #fff;
}

.airport-resolver-code {
    font-weight: 700;
    color: #9ed7ff;
}

.airport-resolver-name {
    color: #d7e0ff;
    flex: 1;
}

/* ============================================================
 * 共通カレンダーフィールド (.sc-date-field) — Phase 2（設計 §3.4）
 * 統一構造（timetable式）:
 *   .sc-date-field (position:relative、ボックス全体がクリック領域)
 *     ├─ input[type=date]     (全面を覆う透明オーバーレイ)
 *     └─ .sc-date-display     (表示用ボックス + カレンダーアイコン)
 * ボックスクリックでカレンダーが出る挙動は site_common.js の共通化。
 * ============================================================ */
.sc-date-field {
    position: relative;
    display: block;
    box-sizing: border-box;
    min-width: 8rem;
    max-width: 100%;
    cursor: pointer;
}

.sc-date-field input[type="date"] {
    /* レガシーなページCSS (.header-controls input[type=date] 等) が
       透明オーバーレイを膨らませないよう、包含を !important で固定する */
    position: absolute !important;
    inset: 0 !important;
    z-index: 1;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: none !important;
    opacity: 0 !important;
    cursor: pointer;
    color-scheme: dark;
    /* filter:invert系のアイコン色ハックはここに集約（各ページの重複を廃止） */
    filter: invert(60%) sepia(80%) saturate(300%) hue-rotate(140deg);
}

.sc-date-field input[type="date"]::-webkit-calendar-picker-indicator {
    filter: invert(60%) sepia(80%) saturate(300%) hue-rotate(140deg);
}

.sc-date-field:focus-within .sc-date-display {
    border-color: var(--accent);
    background: rgba(255, 255, 255, 0.15);
}

.sc-date-display {
    display: flex;
    align-items: center;
    box-sizing: border-box;
    width: 100%;
    min-height: 2.4rem;
    padding: 0.45rem 2.1rem 0.45rem 0.7rem;
    border: 1px solid var(--accent-border);
    border-radius: var(--radius-sm);
    background: var(--panel-soft);
    color: var(--text);
    font-family: inherit;
    font-size: var(--fs-body);
    line-height: 1.2;
    white-space: nowrap;
    position: relative;
    cursor: pointer;
}

/* カレンダーアイコン（表示/入力の二重実装の代替: 共通で常時表示） */
.sc-date-display::after {
    content: '';
    position: absolute;
    right: 11px;
    top: 50%;
    transform: translateY(-50%);
    width: 14px;
    height: 14px;
    border: 1.5px solid var(--accent);
    border-radius: 3px;
    box-sizing: border-box;
    opacity: 0.72;
    background:
        linear-gradient(var(--accent), var(--accent)) 3px 1px / 2px 3px no-repeat,
        linear-gradient(var(--accent), var(--accent)) 9px 1px / 2px 3px no-repeat,
        linear-gradient(var(--accent), var(--accent)) 2px 5px / 10px 1.5px no-repeat,
        linear-gradient(var(--accent), var(--accent)) 2px 8px / 10px 1.5px no-repeat;
}

/* ============================================================
 * 視覚統一パス共通（設計 §7）: ページ第一画面の見出し+一行説明
 * 全ページ共通の様式: 共通ヘッダー → h1 + .sc-page-lead → 統一パネル
 * ============================================================ */
.sc-page-lead {
    margin: 0.15rem 0 0;
    color: var(--muted);
    font-size: var(--fs-sub);
    line-height: 1.55;
}

/* 統一パネル内のフォーム用ラベル（route/map などヘッダーコントロール用） */
.sc-control-label {
    color: var(--muted);
    font-size: var(--fs-sub);
    font-weight: 700;
    line-height: 1.4;
    white-space: nowrap;
}