/* =============================================================================
 * ハウステンボス 本日のエクスプレスパス 予約アプリ
 * 1画面1アトラクション / 日付選択→日時リスト / スクロールなしで画面内に収まる
 * スマホ・タブレット最適化（HTBブランド風エレガント・白基調）
 * =========================================================================== */

:root {
  /* ===== HUIS TEN BOSCH 公式ブランドトークン ===== */
  --black:#000000; --navy:#0B2E5E; --orange:#FA5000; --teal:#2EB6AA; --cream:#F0ECCD;
  /* スタイルガイド 05 TOKENS のフォント指定に準拠。
   * フォールバックは有償ブランド書体の筑紫（TsukuMin/TsukuGo）。
   * 使用ウェイトはガイドの定義内に限定する：明朝 400/500/700/900、ゴシック 300/400/500/700。 */
  --font-mincho:'Zen Old Mincho','TsukuMin Pr6',serif;
  --font-gothic:'Zen Kaku Gothic New','TsukuGo Pr6',sans-serif;

  /* ブランド色の「文字用」濃色版。
   * 白背景ではブランド原色のコントラストが不足するため（例: #FA5000 は 3.38:1）、
   * 面・図形＝原色 / 文字＝濃色版 と使い分けてWCAG AA(4.5:1)を担保する。 */
  --orange-deep:#C93F00;  /* 白文字を載せるボタン地 … 白との比 5.0:1 */
  --orange-text:#B83900;  /* 白・淡橙の上の文字   … 白との比 5.8:1 */
  --teal-text:#0F7A72;    /* 白・淡緑の上の文字   … 白との比 5.2:1 */

  /* ===== 面（白基調） ===== */
  --paper:#FFFFFF; --paper-2:#FFFFFF;        /* 地色・面ともに白 */
  --surface-2:#F5F7FA;                       /* 微差の面（フィルタ帯・無効行） */
  --line:#E2E6EC;                            /* 罫線（白地に馴染むニュートラル） */

  /* ===== 文字 ===== */
  --ink:#0B2E5E; --ink-soft:#4A5A73;         /* 主 13.4:1 / 副 7.0:1 */
  --disabled:#8B94A3;                        /* 操作不可（情報を持たない要素のみ） */

  /* 既存クラス名エイリアス */
  --navy-900:#0B2E5E; --navy-800:#0B2E5E; --navy-700:#0B2E5E; --navy-600:#0B2E5E;
  --gold:#FA5000;                            /* = --orange。旧名の後方互換 */

  /* ===== 在庫ステータス（面＝原色 / 文字＝濃色版） ===== */
  --ok:#2EB6AA;   --ok-bg:#E4F4F2;  --ok-text:var(--teal-text);     /* 空きあり */
  --low:#FA5000;  --low-bg:#FFE7DC; --low-text:var(--orange-text);  /* 残りわずか */
  --sold:#8f8b7d; --sold-bg:#EDEEF1; --sold-text:#6B6656;           /* 満売・受付終了 */

  --shadow:0 8px 24px rgba(11,46,94,.10);
  --accent:#0B2E5E;
  font-synthesis:none;
}
* { box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html, body { height:100%; margin:0; overflow:hidden; overscroll-behavior:none; }
body {
  font-family:var(--font-gothic); color:var(--ink);
  background:var(--paper);
  -webkit-font-smoothing:antialiased; -webkit-text-size-adjust:100%;
}
button { font-family:inherit; cursor:pointer; border:0; background:none; }

/* フォーカスリング：白地でも視認できるよう全操作要素に共通付与 */
:where(button, select, input, a):focus-visible {
  outline:3px solid var(--orange); outline-offset:2px; border-radius:8px;
}

/* スクリーンリーダー専用テキスト */
.visually-hidden {
  position:absolute; width:1px; height:1px; margin:-1px; padding:0;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

/* ===== パスワードゲート（stock.html のみ・クライアントサイド） ===== */
.gate { display:none; }
html.gate-on, html.gate-on body { overflow:hidden; }
.gate-on .gate {
  display:flex; position:fixed; inset:0; z-index:1000; align-items:center; justify-content:center; padding:24px;
  background:var(--paper);
  padding-top:calc(24px + env(safe-area-inset-top)); padding-bottom:calc(24px + env(safe-area-inset-bottom));
}
.gate-inner { width:100%; max-width:360px; text-align:center; color:var(--ink); }
.gate-lang { position:absolute; top:calc(16px + env(safe-area-inset-top)); right:16px; }
.gate-logo { height:34px; width:auto; display:inline-block; margin:0 auto 26px; }
.gate-title { font-family:var(--font-mincho); font-weight:700; font-size:20px; margin:0 0 12px; color:var(--ink); }
.gate-desc { font-size:13px; color:var(--ink-soft); line-height:1.8; margin:0 0 24px; }
.gate-form { display:flex; flex-direction:column; gap:12px; }
.gate-input { width:100%; padding:13px 16px; border-radius:10px; border:1.5px solid var(--line); background:var(--paper-2); color:var(--ink); font-size:16px; font-family:inherit; }
.gate-input::placeholder { color:var(--ink-soft); opacity:1; }
.gate-input:focus-visible { outline:3px solid var(--orange); outline-offset:2px; border-color:var(--orange); }
.gate-btn { padding:14px 16px; border-radius:999px; font-size:16px; font-weight:700; color:#fff; cursor:pointer;
  background:var(--orange-deep); box-shadow:0 4px 12px rgba(201,63,0,.24); }
.gate-btn:active { transform:translateY(1px); }
.gate-error { color:var(--orange-text); font-size:13px; font-weight:700; margin:14px 0 0; }

/* ===== アプリシェル（100dvhに固定） ===== */
.app {
  /* 100vh を先に書いて 100dvh で上書きする（逆順だと dvh 対応ブラウザでも
   * 後勝ちで 100vh が採用され、モバイルSafariでツールバー分がはみ出す） */
  height:100vh; height:100dvh; width:100%; max-width:1080px; margin:0 auto;
  display:flex; flex-direction:column; overflow:hidden;
  background:var(--paper);
  padding-top:env(safe-area-inset-top); padding-bottom:env(safe-area-inset-bottom);
}

/* ===== ヘッダー ===== */
.hdr {
  flex:none; display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:10px 16px; color:var(--ink);
  background:var(--paper);
  border-bottom:2px solid var(--orange);   /* 白地に映えるブランドアクセント */
}
.hdr__brand { display:flex; align-items:center; gap:12px; min-width:0; }
/* ロゴPNGは白背景・不透明。ヘッダーが白になったのでプレート不要 */
.hdr__logo { height:30px; width:auto; flex:none; display:block; }
/* 英語表記は日本語より長くなるため、狭い画面ではサブラベルだけを省略記号で詰める
 * （ロゴ・言語切替・時計は固定幅を確保する） */
.hdr__sub { font-family:var(--font-mincho); font-size:13px; font-weight:700; color:var(--ink); white-space:nowrap;
  padding-left:12px; border-left:1px solid var(--line); line-height:1.25;
  min-width:0; overflow:hidden; text-overflow:ellipsis; }
.hdr__tools { flex:none; display:flex; align-items:center; gap:10px; }
.hdr__clock { font-size:16px; font-weight:700; font-variant-numeric:tabular-nums; color:var(--ink-soft); flex:none; }

/* ===== 言語切替（日本語 / English） =====
 * 選択肢は常に両方見せ、現在の言語を面色と aria-pressed の両方で示す
 * （色だけに頼らない）。ボタン名は各言語の自称表記で固定する。 */
.lang { flex:none; display:inline-flex; align-items:center; gap:2px; padding:2px;
  background:var(--surface-2); border:1px solid var(--line); border-radius:999px; }
.lang__btn { padding:5px 11px; border-radius:999px; line-height:1.2; white-space:nowrap;
  font-size:11.5px; font-weight:700; color:var(--ink-soft); transition:.12s; }
.lang__btn:hover:not([aria-pressed="true"]) { color:var(--ink); }
.lang__btn[aria-pressed="true"] { background:var(--navy-800); color:#fff; }  /* 白文字 13.4:1 相当 */
.lang__abbr { display:none; }

/* ===== プラン選択フィルタ（ドロップダウン） ===== */
.planfilter { flex:none; display:flex; align-items:center; gap:12px; padding:10px 16px;
  background:var(--surface-2); border-bottom:1px solid var(--line); }
.planfilter__label { flex:none; font-size:11px; font-weight:700; letter-spacing:.14em; color:var(--ink-soft); }
.planfilter__control { position:relative; flex:1; min-width:0; }
.planfilter__control select {
  width:100%; appearance:none; -webkit-appearance:none; font-family:inherit; font-size:16px; font-weight:700; color:var(--ink);
  background:var(--paper-2); border:1.5px solid var(--line); border-radius:10px;
  padding:11px 40px 11px 14px; cursor:pointer; text-overflow:ellipsis;
}
/* ドロップダウン一覧の文字サイズ。Androidはここで決まる（iOSは端末のピッカー準拠） */
.planfilter__control select option { font-size:16px; }
.planfilter__chev { position:absolute; right:14px; top:50%; transform:translateY(-50%); color:var(--ink-soft); font-size:11px; pointer-events:none; }

/* フィルタはフォーカス枠を出さない。
 * selectはクリック／タップでも :focus-visible が当たるブラウザが多く、選択のたびに
 * リングが残るため。共通指定（:where(...):focus-visible）の outline・border-radius も
 * ここで打ち消す。通常時と同じ見た目に固定する。
 * ※キーボード操作時に現在位置が見えなくなる点は承知のうえでの指定。 */
.planfilter__control select:focus,
.planfilter__control select:focus-visible {
  outline:none; border-color:var(--line); border-radius:10px;
}
.datepick__wrap select:focus,
.datepick__wrap select:focus-visible {
  outline:none; border-color:var(--line); border-radius:8px;
}

/* ===== ヒーロー ===== */
.hero {
  flex:none; display:flex; align-items:center; gap:14px; padding:14px 16px; color:var(--ink);
  background:var(--paper); border-bottom:1px solid var(--line);
}
.hero__main { flex:1; min-width:0; }
.hero__top { display:flex; align-items:center; gap:8px; }
.hero__title { font-family:var(--font-mincho); font-size:19px; font-weight:700; margin:5px 0 3px; line-height:1.25; color:var(--ink); }
.hero__tag { font-size:11.5px; color:var(--ink-soft); line-height:1.45; margin:0; }
.hero__price { flex:none; text-align:right; }
.hero__price-label { display:block; font-size:11px; color:var(--ink-soft); }
.hero__price-val { font-size:22px; font-weight:700; font-variant-numeric:tabular-nums; color:var(--ink); }
.hero__price-unit { font-size:12px; color:var(--ink-soft); }

/* バッジ */
.badge { font-size:11px; font-weight:700; padding:3px 9px; border-radius:999px; display:inline-flex; align-items:center; gap:5px; }
/* display 指定がブラウザ既定の [hidden]{display:none} に勝ってしまうため明示する */
.badge[hidden] { display:none; }
.badge::before { content:""; width:7px; height:7px; border-radius:50%; }
.badge--ok { background:var(--ok-bg); color:var(--ok-text); } .badge--ok::before { background:var(--ok-text); }
.badge--low { background:var(--low-bg); color:var(--low-text); } .badge--low::before { background:var(--low-text); }
.badge--sold { background:var(--sold-bg); color:var(--sold-text); } .badge--sold::before { background:var(--sold-text); }

/* ===== ステージ（カレンダー＋日時リスト） ===== */
.stage { flex:1; min-height:0; display:flex; gap:0; }

/* カレンダー */
.cal {
  flex:none; width:340px; display:flex; flex-direction:column; padding:14px 16px;
  background:var(--paper-2); border-right:1px solid var(--line);
}
.cal__head { display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; }
.cal__month { font-family:var(--font-mincho); font-size:16px; font-weight:700; }
.cal__nav { width:40px; height:40px; border-radius:50%; font-size:22px; color:var(--navy-700); background:var(--surface-2); display:grid; place-items:center; }
.cal__nav:disabled { color:var(--disabled); background:transparent; }
.cal__week { display:grid; grid-template-columns:repeat(7,1fr); text-align:center; font-size:10.5px; color:var(--ink-soft); font-weight:700; margin-bottom:4px; }
.cal__week span:first-child { color:var(--sold-text); } .cal__week span:last-child { color:var(--navy-600); }
.cal__grid { display:grid; grid-template-columns:repeat(7,1fr); gap:3px; flex:1; min-height:0; }
.day {
  position:relative; border-radius:9px; display:flex; flex-direction:column; align-items:center; justify-content:center;
  font-size:13px; font-weight:700; color:var(--ink); background:var(--surface-2); border:1px solid transparent; min-height:0;
}
.day.is-empty { background:transparent; }
.day.is-disabled { color:var(--disabled); background:transparent; }
.day.is-selectable:hover { border-color:var(--accent); }
.day.is-selected { background:var(--navy-800); color:#fff; }
.day.is-today::after { content:"今日"; position:absolute; top:2px; font-size:8.5px; font-weight:700; color:var(--low-text); }
.day.is-selected.is-today::after { color:#fff; }
.day__dot { width:6px; height:6px; border-radius:50%; margin-top:3px; }
.day.is-selected .day__dot { outline:1px solid rgba(255,255,255,.5); }
.dot--ok { background:var(--ok); } .dot--low { background:var(--low); } .dot--sold { background:var(--sold); }
.cal__legend { display:flex; gap:14px; justify-content:center; font-size:10.5px; color:var(--ink-soft); margin-top:10px; }
.cal__legend span { display:inline-flex; align-items:center; gap:5px; }
.dot { width:8px; height:8px; border-radius:50%; display:inline-block; }

/* 日時リスト */
.times { flex:1; min-width:0; min-height:0; display:flex; flex-direction:column; background:var(--paper); }
.times__head { flex:none; display:flex; align-items:center; justify-content:space-between; gap:12px; padding:14px 18px 12px; width:100%; max-width:940px; margin:0 auto; }
.times__date { display:none; font-family:var(--font-mincho); font-size:16px; font-weight:700; } /* 通常は日付プルダウンを使用。スマホのみ表示 */
.times__hint { font-size:11.5px; color:var(--ink-soft); flex:none; }
.times__list { flex:1; min-height:0; overflow-y:auto; list-style:none; margin:0 auto; padding:0 14px 14px; width:100%; max-width:940px; -webkit-overflow-scrolling:touch; }

/* 日付プルダウン（Desktop/タブレット）
 * 主役は時間帯リストなので、利用日は控えめに置く。
 * ただし font-size は16px を維持（iPad等で focus 時の自動ズームを防ぐため）。 */
.datepick { display:flex; align-items:center; gap:8px; min-width:0; }
.datepick__label { font-size:12px; font-weight:500; color:var(--ink-soft); flex:none; }
.datepick__wrap { position:relative; }
.datepick__wrap select {
  appearance:none; -webkit-appearance:none; font-family:inherit; font-size:16px; font-weight:500; color:var(--ink-soft);
  background:transparent; border:1px solid var(--line); border-radius:8px; padding:6px 32px 6px 11px; cursor:pointer;
  min-width:0; max-width:60vw;
}
.datepick__wrap select:hover { border-color:var(--ink-soft); }
/* フォーカス表示はプラン選択と共通（上の「フィルタのフォーカス表示」で指定） */
.datepick__wrap select option { font-size:16px; }
.datepick__chev { position:absolute; right:11px; top:50%; transform:translateY(-50%); color:var(--ink-soft); font-size:10px; pointer-events:none; }

.time-row {
  display:flex; align-items:center; gap:12px; padding:12px 14px; margin-bottom:8px; min-height:64px;
  background:var(--paper-2); border:1.5px solid var(--line); border-radius:12px; transition:.12s; width:100%; text-align:left;
  color:var(--ink);
}
.time-row:hover:not(:disabled) { border-color:var(--accent); box-shadow:var(--shadow); }
.time-row.is-selected { border-color:var(--navy-700); background:#EEF2FB; box-shadow:inset 0 0 0 1px var(--navy-700); }
/* 無効行：opacityで一律に薄めると「受付終了」が読めなくなる（2.2:1）ため、
 * 面と文字を個別指定して可読性（4.5:1以上）を確保しつつ非活性に見せる。 */
.time-row:disabled { cursor:not-allowed; background:var(--surface-2); border-color:var(--line); color:var(--sold-text); }
.time-row:disabled .time-row__price,
.time-row:disabled .time-row__price strong,
.time-row:disabled .time-row__chev { color:var(--sold-text); }
.time-row__time { font-size:17px; font-weight:700; font-variant-numeric:tabular-nums; flex:none; min-width:104px; }
.time-row__stat { flex:1; min-width:0; font-size:12px; color:var(--ink-soft); display:flex; align-items:baseline; gap:3px; }
/* ○△×ページで残り5枚以下のときの実数表記。記号と同じ位置に揃える */
.time-row__stat--center { justify-content:center; }
.time-row__stat b { font-size:24px; font-weight:700; line-height:1; font-variant-numeric:tabular-nums; }
.time-row__stat b.ok { color:var(--ok-text); } .time-row__stat b.low { color:var(--low-text); } .time-row__stat b.sold { color:var(--sold-text); }
/* 満員・受付終了は数字が出ないぶん文言だけが残るので、読める大きさにする */
.time-row:disabled .time-row__stat { color:var(--sold-text); font-size:14px; font-weight:700; }
.time-row__price { flex:none; text-align:right; font-size:12px; color:var(--ink-soft); }
.time-row__price strong { display:block; font-size:15px; color:var(--ink); font-weight:700; }
.time-row__chev { flex:none; color:var(--ink-soft); font-size:18px; }
.times__empty { padding:40px 20px; text-align:center; color:var(--ink-soft); font-size:13px; }

/* ===== ローダー ===== */
.loader { position:fixed; inset:0; display:grid; place-items:center; background:rgba(255,255,255,.72); backdrop-filter:blur(2px); z-index:50; opacity:0; pointer-events:none; transition:.2s; }
.loader.is-show { opacity:1; pointer-events:auto; } /* ロード中は操作をブロック */
.loader__ring { width:44px; height:44px; border-radius:50%; border:4px solid rgba(11,46,94,.18); border-top-color:var(--orange); animation:spin .7s linear infinite; }
.loader__rm { display:none; font-size:14px; font-weight:700; color:var(--ink); }
@keyframes spin { to { transform:rotate(360deg); } }
/* アニメーション抑制設定では回転が止まり、リングが「処理中」に見えない。
 * リングを隠してテキストで状態を伝える。 */
@media (prefers-reduced-motion: reduce) {
  .loader__ring { display:none; }
  .loader__rm { display:block; }
}

/* ===== トースト ===== */
.toast {
  position:fixed; left:50%; bottom:calc(24px + env(safe-area-inset-bottom)); transform:translateX(-50%) translateY(16px);
  background:var(--navy-900); color:#fff; padding:11px 18px; border-radius:12px; font-size:13px; font-weight:700;
  box-shadow:0 12px 30px rgba(0,0,0,.35); opacity:0; pointer-events:none; transition:.3s; z-index:60;
  border-left:3px solid var(--gold); max-width:calc(100vw - 32px); text-align:center;
}
.toast.is-show { opacity:1; transform:translateX(-50%) translateY(0); }

/* =============================================================================
 * レスポンシブ
 * PC/タブレット横: カレンダー左・リスト右の2カラム
 * スマホ/タブレット縦: 縦積み。カレンダーは高さ固定、リストが内部スクロール
 * =========================================================================== */
@media (max-width: 820px) {
  .stage { flex-direction:column; }
  .cal { width:auto; border-right:0; border-bottom:1px solid var(--line); padding:12px 16px 10px; }
  .cal__grid { gap:2px; }
  .day { min-height:34px; }
  .cal__legend { margin-top:8px; }
  .times__head { padding:12px 16px 8px; }
}

/* スマホ縦（狭い）でさらに詰める */
@media (max-width: 560px) {
  .hero__tag { display:none; }              /* 省スペース */
  .hero__title { font-size:17px; }
  .hero__price-val { font-size:19px; }
  .hdr__logo { height:24px; }
  .hdr__sub { font-size:12px; padding-left:9px; }
  .cal { display:none; }
  .datepick { display:none; }               /* スマホは当日のみ（日付選択を隠す） */
  .times__date { display:block; }
  .times__head { padding:14px 16px 10px; }
  .time-row__time { min-width:92px; font-size:16px; }

  /* プラン選択はこの画面の主操作。ラベルを上段に逃がして選択肢に横幅を全部渡し、
   * プラン名が省略されずに読めるようにする。あわせて文字とタップ領域を拡大
   * （高さ48px＝推奨44px以上を確保）。 */
  .planfilter { flex-direction:column; align-items:stretch; gap:5px; padding:9px 16px 11px; }
  .planfilter__label { font-size:10.5px; letter-spacing:.12em; }
  .planfilter__control { flex:none; }
  .planfilter__control select { font-size:17px; padding:13px 42px 13px 14px; }
  .planfilter__control select option { font-size:17px; }
}

/* 極小幅（iPhone SE 375px 等）：
 * サブラベル「本日のエクスプレスパス」はこの画面の主題なので隠さず、
 * ロゴ・時計側を詰めて必ず表示する。 */
@media (max-width: 400px) {
  .hdr { padding:9px 12px; gap:8px; }
  .hdr__brand { gap:8px; }
  .hdr__logo { height:22px; }
  .hdr__sub { font-size:11px; padding-left:8px; }
  .hdr__clock { font-size:14px; }
  .hdr__tools { gap:7px; }
  /* 「English」→「EN」。ボタン名は aria-label で "English" のまま
   * （表示文言 EN を含むため WCAG 2.5.3 を満たす） */
  .lang__btn { padding:5px 8px; font-size:11px; }
  .lang__full { display:none; }
  .lang__abbr { display:inline; }
}

/* 横向き低い画面（スマホ landscape）: カレンダーを左に戻して高さを稼ぐ */
@media (max-height: 520px) and (orientation: landscape) {
  .hero { display:none; }
  .stage { flex-direction:row; }
  .cal { width:300px; border-right:1px solid var(--line); border-bottom:0; max-height:none; }
}

@media (prefers-reduced-motion: reduce) { * { animation:none !important; transition:none !important; } }

/* ===== Desktop：在庫を1画面に（複数カラム・原則スクロールなし） ===== */
@media (min-width: 821px) {
  .times__head, .times__list { max-width:1040px; }
  .times__list {
    display:grid; grid-template-columns:repeat(auto-fill, minmax(300px, 1fr));
    gap:8px 14px; align-content:start;
  }
  .time-row { margin-bottom:0; height:100%; }
}

/* ===== ○△× 表示パターン（?stock=mark） ===== */
/* 記号の意味は aria-label（STATE_LABEL）で読み上げに伝える */
.time-row__mark { flex:1; text-align:center; font-size:24px; font-weight:700; line-height:1; }
.time-row__mark.ok   { color:var(--ok-text); }    /* ○ 残り11枚以上＝ティール */
.time-row__mark.low  { color:var(--low-text); }   /* △ 残り6〜10枚＝オレンジ（5枚以下は実数表記） */
.time-row__mark.sold { color:var(--sold-text); }  /* × 0＝ニュートラル */
.time-row__mark.past { color:var(--sold-text); font-size:14px; font-weight:700; }