/*
 * web/styles.css ｜ 客側UI スタイル
 *
 * デザイン方針: 案B「NYピッツェリア風（濃色）」 — YF承認 2026-08-02（暫定）
 *   ブランドHPを並行制作中のため、確定後に §1 のトークンの値だけを差し替えれば追従できる。
 *   トークン以外の場所に色・書体・角丸を直書きしないこと。
 *
 * 守っている規約（DESIGN_customer_ui §7.1 ／ HANDOFF §2）:
 *   - タップ領域 最小48×48px・主要CTA高さ56px・本文16px以上・ボタン18px相当
 *   - コントラスト WCAG AA・状態を色だけで伝えない（バッジ文字併記）
 *   - スマホ縦（375px基準）第一・横スクロールを発生させない
 * 変更点（2026-08-02）:
 *   - 全面Webフォント（Zen Kaku Gothic New ／ 数字 Anton）。読込は各HTMLの<link>
 *   - ダークモード・大きな文字は端末設定に自動追従（画面内に切替ボタンは置かない）
 *   - 文字サイズを rem 基準に変更（端末の文字サイズ設定が効くようにするため）
 */

/* =========================================================================
 * §1 デザイントークン（ここだけを差し替えればブランドに追従できる）
 * ========================================================================= */
:root {
  /* -- 書体 -- */
  --font-base: "Zen Kaku Gothic New", "Hiragino Sans", "Yu Gothic UI", "Yu Gothic", Meiryo, system-ui, sans-serif;
  --font-num:  "Anton", var(--font-base);   /* 価格・時刻・注文番号など数字のみの箇所 */

  /* -- 寸法（アクセシビリティ規約。px固定のままにする） -- */
  --tap-min: 48px;
  --cta-height: 56px;
  --app-width: 480px;

  /* -- 角丸・線 -- */
  --r-card: 6px;
  --r-btn: 6px;
  --r-pill: 3px;
  --rule-w: 3px;             /* ヘッダ下・カートバー上の赤ライン */

  /* -- 余白 -- */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;

  /* -- 配色（ライト＝生成り地） -- */
  --c-bg: #f6efe2;
  --c-surface: #fffdf8;
  --c-text: #1b1a17;
  --c-sub: #6f6759;
  --c-border: #ded2ba;

  --c-accent: #c62828;        /* ブランドレッド */
  --c-accent-dark: #9c1f1f;
  --c-on-accent: #ffffff;

  --c-head-bg: #141a22;       /* 看板の濃紺 */
  --c-head-text: #f6efe2;
  --c-head-sub: #a9b2bd;

  --c-banner: #ece2cf;
  --c-photo: #eee5d3;
  --c-photo-line: #e2d6bd;

  --c-error: #a41f1f;
  --c-info-bg: #e3ebf3;
  --c-busy-bg: #f6e7c8;
  --c-busy-line: #c08b28;
  --c-disabled-bg: #d8cfbe;
  --c-disabled-text: #7d7565;

  --c-cart-bg: rgba(20, 26, 34, 0.96);
  --shadow-card: none;
}

/* -- 配色（ダーク＝端末設定に追従。画面内に切替は置かない） -- */
@media (prefers-color-scheme: dark) {
  :root {
    --c-bg: #101620;
    --c-surface: #18202c;
    --c-text: #f0ece2;
    --c-sub: #9aa4b0;
    --c-border: #2b3646;

    --c-accent: #e33b3b;
    --c-accent-dark: #c62828;
    --c-on-accent: #ffffff;

    --c-head-bg: #0a0e14;
    --c-head-text: #f0ece2;
    --c-head-sub: #96a0ac;

    --c-banner: #182130;
    --c-photo: #212b39;
    --c-photo-line: #2a3646;

    --c-error: #ff9c96;
    --c-info-bg: #16202c;
    --c-busy-bg: #2a2314;
    --c-busy-line: #c08b28;
    --c-disabled-bg: #2b3340;
    --c-disabled-text: #8b95a1;

    --c-cart-bg: rgba(10, 14, 20, 0.96);
  }
}

/* =========================================================================
 * §2 土台
 * ========================================================================= */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

body {
  font-family: var(--font-base);
  /* rem 基準。端末・ブラウザの文字サイズ設定をそのまま受ける（px 固定にしない） */
  font-size: 1rem;
  line-height: 1.65;
  color: var(--c-text);
  background: var(--c-bg);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

.app { max-width: var(--app-width); margin: 0 auto; padding-bottom: 96px; }

img { max-width: 100%; }
h2 { font-size: 1.15rem; font-weight: 900; letter-spacing: .01em; margin: .6em 0; }
h3 { font-size: 1.05rem; font-weight: 700; margin: .6em 0; }
small { color: var(--c-sub); }

/* キーボード操作時のフォーカスを必ず見せる（アクセシビリティ） */
:focus-visible {
  outline: 3px solid var(--c-accent);
  outline-offset: 2px;
}

/* =========================================================================
 * §3 店舗ヘッダ（FR-03 常時表示）— 案Bの「看板」
 * ========================================================================= */
.store-header {
  position: sticky; top: 0; z-index: 10;
  background: var(--c-head-bg);
  color: var(--c-head-text);
  border-bottom: var(--rule-w) solid var(--c-accent);
  padding: 12px var(--sp-4);
}
.store-name {
  font-weight: 900; font-size: 1.12rem; letter-spacing: .01em; line-height: 1.3;
}
.store-sub { font-size: .8rem; color: var(--c-head-sub); margin-top: 2px; }
.header-wait { font-size: .9rem; color: var(--c-head-sub); margin-top: 6px; }
.header-wait strong, .header-wait b { color: var(--c-head-text); font-weight: 700; }

/* =========================================================================
 * §4 バッジ
 * ========================================================================= */
.badge {
  display: inline-block; padding: 2px 9px; border-radius: var(--r-pill);
  font-size: .75rem; font-weight: 700; letter-spacing: .02em;
}
.badge-route   { background: var(--c-accent); color: var(--c-on-accent); }
.badge-reco    { background: var(--c-accent); color: var(--c-on-accent); }
.badge-soldout { background: var(--c-sub);    color: var(--c-surface); margin-left: 6px; }

/* =========================================================================
 * §5 バナー・注記
 * ========================================================================= */
.banner { padding: 10px var(--sp-4); font-size: .88rem; line-height: 1.55; }
.banner-fresh { background: var(--c-banner); color: var(--c-text); }
.banner-info  { background: var(--c-info-bg); color: var(--c-text); }
.banner-busy  { background: var(--c-busy-bg); border-left: 4px solid var(--c-busy-line); }
.note { font-size: .85rem; color: var(--c-sub); padding: 0 var(--sp-4); }
.inline-error { color: var(--c-error); font-size: .9rem; font-weight: 700; padding: var(--sp-2) 0; }

/* =========================================================================
 * §6 パネル
 * ========================================================================= */
.panel {
  background: var(--c-surface);
  border: 1.5px solid var(--c-border);
  border-radius: var(--r-card);
  margin: var(--sp-3);
  padding: var(--sp-4);
  box-shadow: var(--shadow-card);
}
.panel .note { padding: 0; }
.panel > h2:first-child { margin-top: 0; }

/* =========================================================================
 * §7 メニュー
 * ========================================================================= */
.menu-section { padding: var(--sp-1) var(--sp-4); }
.menu-section h2 {
  display: flex; align-items: center; gap: var(--sp-2);
  margin: var(--sp-5) 0 var(--sp-3);
}
/* 見出しの頭に赤いアクセント（看板の帯を小さく引き継ぐ） */
.menu-section h2::before {
  content: ""; flex: 0 0 auto;
  width: 4px; height: 1.05em;
  background: var(--c-accent); border-radius: 2px;
}

.product-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.product-card {
  display: flex; flex-direction: column; align-items: stretch; text-align: left;
  min-height: var(--tap-min);
  background: var(--c-surface);
  border: 1.5px solid var(--c-border);
  border-radius: var(--r-card);
  padding: 0; overflow: hidden;
  font: inherit; color: inherit; cursor: pointer;
}
.product-card.is-soldout { opacity: .5; cursor: default; }

.product-photo {
  width: 100%; aspect-ratio: 4 / 3; object-fit: cover;
  background: var(--c-photo); display: block;
}
/* 写真未投入の枠。斜線で「まだ入っていない」ことが分かるようにする */
.product-photo-empty {
  background-image: repeating-linear-gradient(
    45deg, transparent 0 9px, var(--c-photo-line) 9px 10px);
}
.product-name  { font-size: .95rem; font-weight: 700; line-height: 1.4; padding: 10px 11px 0; }
.product-price {
  font-family: var(--font-num); font-size: 1.1rem; font-weight: 700;
  letter-spacing: .01em; padding: 2px 11px 12px; margin-top: auto;
}

/* =========================================================================
 * §8 ボタン
 * ========================================================================= */
.btn {
  display: block; width: auto;
  min-height: var(--cta-height);
  border: none; border-radius: var(--r-btn);
  font-family: var(--font-base); font-size: 1.06rem; font-weight: 700; letter-spacing: .02em;
  cursor: pointer; padding: 12px 20px; text-align: center; text-decoration: none;
  color: var(--c-text);
}
.btn-block { width: 100%; margin-top: var(--sp-3); }
.btn-primary { background: var(--c-accent); color: var(--c-on-accent); }
.btn-primary:active { background: var(--c-accent-dark); }
.btn-primary:disabled { background: var(--c-disabled-bg); color: var(--c-disabled-text); cursor: default; }
.btn-secondary {
  background: var(--c-surface); color: var(--c-text);
  border: 1.5px solid var(--c-border);
}
.btn-link {
  background: none; border: none; color: var(--c-accent);
  font-family: inherit; font-size: 1rem; font-weight: 700;
  padding: var(--sp-2) 0; cursor: pointer; text-decoration: underline;
}
.btn-qty {
  min-width: var(--tap-min); min-height: var(--tap-min);
  font-family: var(--font-base); font-size: 1.35rem; font-weight: 700;
  border: 1.5px solid var(--c-border); border-radius: var(--r-btn);
  background: var(--c-surface); color: var(--c-text); cursor: pointer; margin: 0 var(--sp-1);
}
.qty-row { display: flex; align-items: center; gap: var(--sp-2); margin: var(--sp-3) 0; }
.qty-value { min-width: 2em; text-align: center; font-family: var(--font-num); font-size: 1.15rem; font-weight: 700; }

/* =========================================================================
 * §9 カート固定バー
 * ========================================================================= */
.cart-bar {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 20;
  padding: 10px var(--sp-4) calc(10px + env(safe-area-inset-bottom));
  background: var(--c-cart-bg);
  border-top: var(--rule-w) solid var(--c-accent);
}
.cart-bar .btn { width: 100%; max-width: 448px; margin: 0 auto; }

/* =========================================================================
 * §10 カート
 * ========================================================================= */
.cart-line { border-bottom: 1px solid var(--c-border); padding: 10px 0; }
.cart-line-main { display: flex; justify-content: space-between; gap: var(--sp-3); font-weight: 700; }
.cart-children { font-size: .85rem; color: var(--c-sub); }
.cart-line-ctrl { display: flex; align-items: center; margin-top: 6px; }
.cart-line-ctrl .btn-link { margin-left: auto; }
.cart-total {
  display: flex; justify-content: space-between; align-items: baseline;
  font-size: 1.18rem; font-weight: 900; padding: var(--sp-3) 0;
  border-top: 2px solid var(--c-text); margin-top: var(--sp-2);
}

/* =========================================================================
 * §11 受取枠（S6）— 2026-08-04 改訂
 *   最短カード ＋ 受取日/時間帯のプルダウン ＋ 分の空き状況（○×）
 *   満枠を隠さず × で見せる（AC-04 改訂）。「表示されない＝満枠」は
 *   仕組みを知る側にしか通じず、初めての客は選べない理由が分からないため
 * ========================================================================= */

/* 最短カード */
.soonest-card {
  display: flex; align-items: center; gap: var(--sp-3); width: 100%; text-align: left;
  border: 2px solid var(--c-accent); border-radius: var(--r-btn);
  background: var(--c-accent); color: var(--c-on-accent);
  font-family: var(--font-base); padding: 13px var(--sp-3); cursor: pointer;
  min-height: var(--cta-height);
}
.soonest-card:active { background: var(--c-accent-dark); }
.soonest-main { display: flex; flex-direction: column; }
.soonest-label { font-size: .78rem; font-weight: 700; letter-spacing: .08em; }
.soonest-time { font-family: var(--font-num); font-size: 1.75rem; line-height: 1.1; }
.soonest-sub { margin-left: auto; text-align: right; font-size: .82rem; opacity: .92; }
.slot-or {
  display: flex; align-items: center; gap: 10px;
  color: var(--c-sub); font-size: .82rem; margin: var(--sp-3) 0 2px;
}
.slot-or::before, .slot-or::after { content: ""; flex: 1; height: 1px; background: var(--c-border); }

/* 受取日・時間帯のプルダウン */
.slot-picker { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.slot-picker .field { margin: var(--sp-3) 0 0; }
.field select {
  -webkit-appearance: none; appearance: none;
  width: 100%; min-height: var(--cta-height);
  border: 2px solid var(--c-border); border-radius: var(--r-btn);
  background: var(--c-surface); color: var(--c-text);
  font-family: var(--font-base); font-size: 1.02rem; font-weight: 700;
  padding: 0 38px 0 var(--sp-3);
  /* 矢印は背景画像で描く（擬似要素は select に置けないため） */
  background-image:
    linear-gradient(45deg, transparent 50%, var(--c-sub) 50%),
    linear-gradient(135deg, var(--c-sub) 50%, transparent 50%);
  background-position: right 20px center, right 14px center;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
}

.slot-avail-title { font-weight: 900; font-size: .92rem; color: var(--c-sub); margin: var(--sp-4) 0 var(--sp-2); }
.slot-date { font-weight: 900; font-size: .95rem; color: var(--c-sub); margin: var(--sp-3) 0 var(--sp-2); }
.slot-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; margin: var(--sp-2) 0; }

/* 分のセル。○=選べる／×=選べない。押せるのは button だけ */
.slot-btn, .slot-cell {
  min-height: 62px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1.15;
  border: 2px solid var(--c-border); border-radius: var(--r-btn);
  background: var(--c-surface); color: var(--c-text);
  font-family: var(--font-base); cursor: pointer;
}
.slot-cell-time { font-family: var(--font-num); font-size: 1.02rem; letter-spacing: .02em; }
.slot-cell-mark { font-size: 1rem; font-weight: 900; margin-top: 1px; color: #1a7f4b; }

/* 選べない枠。色だけでなく × の記号でも示す（色だけで伝えない規約） */
.slot-cell.is-unavailable {
  background: var(--c-banner); border-color: var(--c-border);
  color: var(--c-sub); cursor: default;
}
.slot-cell.is-unavailable .slot-cell-mark { color: var(--c-sub); font-weight: 700; }

/* 選択状態 */
.slot-btn.is-selected {
  border-color: var(--c-accent); background: var(--c-accent); color: var(--c-on-accent);
}
.slot-btn.is-selected .slot-cell-mark { color: var(--c-on-accent); font-size: .8rem; }
.slot-btn.is-selected .slot-cell-mark::after { content: " ✓"; }

.slot-legend {
  display: flex; flex-wrap: wrap; gap: var(--sp-4);
  font-size: .8rem; color: var(--c-sub); margin-top: var(--sp-2);
}

/* =========================================================================
 * §12 お客様情報・決済（S7）
 * ========================================================================= */
.field { display: block; margin: var(--sp-3) 0; }
.field span { display: block; font-weight: 700; margin-bottom: var(--sp-1); }
.field input {
  width: 100%; min-height: var(--tap-min); font-size: 1rem;
  font-family: inherit; color: var(--c-text); background: var(--c-surface);
  border: 1.5px solid var(--c-border); border-radius: var(--r-btn); padding: var(--sp-2) var(--sp-3);
}
.pay-card {
  display: block; border: 2px solid var(--c-border); border-radius: var(--r-card);
  background: var(--c-surface); padding: 14px; margin: 10px 0; cursor: pointer;
}
.pay-card:has(input:checked) { border-color: var(--c-accent); }
.pay-card input { width: 20px; height: 20px; margin-right: var(--sp-2); vertical-align: middle; accent-color: var(--c-accent); }
.pay-card-head { font-size: 1.05rem; font-weight: 700; }
.pay-card-desc { display: block; font-size: .85rem; color: var(--c-sub); margin-top: var(--sp-1); }
.legal-summary {
  background: var(--c-banner); border-radius: var(--r-card);
  padding: 10px 14px; font-size: .85rem; margin: var(--sp-3) 0;
}

/* =========================================================================
 * §13 完了（S9）・照会（S10）
 * ========================================================================= */
.order-no-card {
  background: var(--c-head-bg); color: var(--c-head-text);
  border-radius: var(--r-card); text-align: center;
  padding: var(--sp-4); margin: var(--sp-3) 0;
}
.order-no-label { font-size: .9rem; color: var(--c-head-sub); }
.order-no {
  font-family: var(--font-num); font-size: 2.6rem; font-weight: 700;
  letter-spacing: .06em; line-height: 1.15; color: var(--c-head-text);
}
.done-list { display: grid; grid-template-columns: auto 1fr; gap: var(--sp-1) var(--sp-4); margin: var(--sp-3) 0; }
.done-list dt { color: var(--c-sub); }
.done-list dd { margin: 0; font-weight: 700; }
.howto { padding-left: 1.4em; }
.howto li { margin: .35em 0; }
.items { padding-left: 1.2em; }
.item-child { color: var(--c-sub); font-size: .9rem; list-style: circle; }
.status-state strong { font-size: 1.25rem; font-weight: 900; color: var(--c-accent); }

/* =========================================================================
 * §14 停止中（S11）・エラー
 * ========================================================================= */
.stop-panel { text-align: center; }
.stop-panel .btn { margin-top: var(--sp-4); }
.error-panel { text-align: center; color: var(--c-text); }

/* =========================================================================
 * §15 ダイアログ（D1〜D4）
 *   ネイティブ confirm/alert は使わない（HANDOFF §2 U-1）。ここが唯一の確認手段
 * ========================================================================= */
.dialog-backdrop {
  position: fixed; inset: 0; z-index: 100;
  background: rgba(0, 0, 0, .6);
  display: flex; align-items: center; justify-content: center; padding: var(--sp-4);
}
.dialog {
  background: var(--c-surface); color: var(--c-text);
  border: 1.5px solid var(--c-border);
  border-top: var(--rule-w) solid var(--c-accent);
  border-radius: var(--r-card);
  max-width: 420px; width: 100%; max-height: 85vh; overflow-y: auto;
  padding: var(--sp-5) var(--sp-4) var(--sp-4); position: relative;
}
.dialog-close {
  position: absolute; top: var(--sp-2); right: var(--sp-2);
  width: var(--tap-min); height: var(--tap-min);
  border: none; background: none; color: var(--c-text);
  font-size: 1.5rem; cursor: pointer;
}
.modal-photo { width: 100%; border-radius: var(--r-card); background: var(--c-photo); }
.modal-price { font-family: var(--font-num); font-size: 1.3rem; font-weight: 700; }
.choice-group { border-top: 1px solid var(--c-border); padding: var(--sp-2) 0; }
.choice-title { font-weight: 700; margin-bottom: var(--sp-1); }
/* トッピング（任意・複数可）。選ばなくてよいことを明示する */
.choice-note { font-size: .82rem; color: var(--c-sub); margin-bottom: var(--sp-1); line-height: 1.5; }
.choice-group.is-multi .choice-price { font-weight: 700; color: var(--c-text); }
.choice-row {
  display: flex; align-items: center; gap: var(--sp-2);
  min-height: var(--tap-min); cursor: pointer;
}
.choice-row input { width: 20px; height: 20px; accent-color: var(--c-accent); }
.choice-price { margin-left: auto; color: var(--c-sub); }

/* =========================================================================
 * §16 フッター（法務3点・NFR-09 全画面）
 * ========================================================================= */
.legal-footer {
  display: flex; flex-wrap: wrap; gap: var(--sp-3); justify-content: center;
  padding: var(--sp-5) var(--sp-4) 32px; font-size: .8rem;
}
.legal-footer a { color: var(--c-sub); }

/* =========================================================================
 * §17 法務ページ（規約3点）
 *   もとは3ファイルに同じ内容が直書きされ、色が固定でダークに追従しなかった。
 *   トークンへ寄せてここに集約する（各ページ固有の指定だけHTML側に残す）
 * ========================================================================= */
.legal-page {
  background: var(--c-surface);
  border: 1.5px solid var(--c-border);
  border-radius: var(--r-card);
  margin: var(--sp-3); padding: 20px var(--sp-4); font-size: .95rem;
}
.legal-page h2 { font-size: 1rem; margin-top: 1.4em; }
.legal-page ol { padding-left: 1.4em; }
.legal-page table { width: 100%; border-collapse: collapse; font-size: .88rem; }
.legal-page th, .legal-page td {
  border: 1px solid var(--c-border); padding: 8px; text-align: left; vertical-align: top;
}
.legal-page th { background: var(--c-banner); font-weight: 700; }

.draft-note {
  background: var(--c-busy-bg); border-left: 4px solid var(--c-busy-line);
  padding: var(--sp-2) var(--sp-3); font-size: .85rem;
}
.placeholder { color: var(--c-error); font-weight: 700; }
.todo {
  font-size: .8rem; background: var(--c-banner);
  border: 1px dashed var(--c-busy-line); border-radius: var(--r-card);
  padding: 10px 10px 10px 26px; margin: var(--sp-2) 0 var(--sp-1); line-height: 1.6;
}
.todo li { margin-bottom: 6px; }
.todo .who { color: var(--c-sub); }
.contact { background: var(--c-banner); border-radius: var(--r-card); padding: 10px var(--sp-3); }