/* 客の注文画面
   ══════════════════════════════════════════════════════════════════
   ■ 使う人と状況
     来店客。全世代（高齢者を含む）。自分のスマホ。アプリなし・会員登録なし。
     **説明を一切受けずに初見で使う**。居酒屋なら薄暗い店内、片手操作、
     酔っている可能性、同卓の複数人が順に触る。不安なのは「注文が本当に通ったか」。
     アレルギー情報は安全に直結する。
     → **本プロダクトで最も失敗が許されない画面**。ここが使いにくいと、
       導入した店が自分の客に恥をかく。オーナーは自分の不便は我慢するが、
       客に不便をかけるサービスは続けない。

   ■ この画面だけ基準を上げている点（根拠つき）
     1. 文字サイズの下限を13pxにした（旧: 11px が7箇所）。
        薄暗い店内で高齢の客が読む前提では11pxは読めない。
     2. タップ領域を52〜58pxにした（一般の44pxより大きい）。
        片手・急いでいる・酔っている、の3条件が重なるため。
     3. **アレルゲン表示のタップ領域を22px→44pxに拡大**。
        旧実装は font-size:11px / padding:2px で実効約22px しかなかった。
        これは意匠の問題ではなく安全の問題。
     4. コントラストは本文でAAA(7:1)を狙う。薄暗い環境では規格の
        最低ライン(4.5:1)では足りない。
   ══════════════════════════════════════════════════════════════════ */

.order-body {
  background: var(--bg);
  /* 下部固定のカートバーに最後の商品が隠れないようスクロール余白を確保 */
  padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px));
}
.order-app { max-width: var(--maxw); margin: 0 auto; min-height: 100vh; }

/* ══════════ ヘッダ ══════════ */
.o-header {
  position: sticky; top: 0; z-index: 20;
  background: rgba(255, 255, 255, .92);
  backdrop-filter: saturate(1.3) blur(10px);
  border-bottom: 1px solid var(--line);
  padding: 12px 16px;
  padding-top: max(12px, env(safe-area-inset-top, 0px));
}
/* 店名はこのページの主題なので h1。見た目は小さいままでよい
   （画面の主役は品書きで、店名は「どの店にいるか」の確認にすぎない）。 */
.o-header__shop { font-size: 13.5px; color: var(--ink-soft); font-weight: 700; margin: 0; letter-spacing: 0; }
.o-header__seat { display: flex; align-items: center; gap: 8px; margin-top: 2px; }
/* 席番号は「自分がどの席として注文しているか」の唯一の手がかり。
   間違った席で注文されると料理が別の卓に行くので、大きく確実に見せる。 */
.o-header__seat strong { font-size: 21px; font-weight: 900; letter-spacing: -.01em; }

/* ══════════ カテゴリタブ ══════════ */
.o-tabs {
  /* ヘッダの実高に追従させる。旧実装は top:58px 固定で、
     セーフエリアのある端末や店名が2行になる店で隙間/重なりが出ていた。 */
  position: sticky; top: calc(58px + env(safe-area-inset-top, 0px)); z-index: 19;
  display: flex; gap: 8px; overflow-x: auto;
  padding: 10px 16px;
  background: var(--bg);
  border-bottom: 1px solid var(--line);
  -webkit-overflow-scrolling: touch; scrollbar-width: none;
}
.o-tabs::-webkit-scrollbar { display: none; }
.o-tab {
  flex: 0 0 auto;
  min-height: 44px;                    /* 基準どおり44px。横スクロール内でも押し損ねは起きる */
  border: 1px solid var(--line-strong);
  background: var(--card); color: var(--ink-2);
  border-radius: 999px;
  padding: 8px 17px;
  font-size: 14.5px; font-weight: 700;
  white-space: nowrap;
}
.o-tab.active {
  background: var(--ink); color: #fff; border-color: var(--ink);   /* 18:1 */
}

/* ══════════ メニュー ══════════ */
/* 下の余白はカートバーが出ているときだけ確保する（空のときは品書きに使う） */
.o-menu { padding: 8px 16px 28px; }
.o-menu.with-cart { padding-bottom: 150px; }
.o-cat { scroll-margin-top: 112px; }
.o-cat__title {
  font-size: 18px; font-weight: 900; margin: 26px 2px 12px;
  letter-spacing: -.01em;
}
.o-item {
  display: flex; gap: 13px;
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 13px;
  margin-bottom: 10px; box-shadow: var(--shadow-xs);
}
.o-item--out { opacity: .5; }
.o-item__thumb {
  flex: 0 0 78px; width: 78px; height: 78px;
  border-radius: var(--radius-sm);
  background: var(--bg-sunk);
  object-fit: cover;
  display: flex; align-items: center; justify-content: center;
  color: var(--ink-faint);
  overflow: hidden;
}
/* 写真のない品目は、灰色の枠を置かずに本文を全幅で使う。
   空の枠は「写真を入れ忘れている」という欠落の記号になる。置かなければ
   「文字だけの品書き」という選択に見える。写真は全品に用意できるものではない。 */
.o-item--nophoto { padding: 14px 15px; }
.o-item--nophoto .o-item__name { font-size: 16.5px; }
.o-item__body { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.o-item__name { font-weight: 800; font-size: 16px; line-height: 1.5; letter-spacing: -.01em; }
/* 説明文は14px以上を維持（高齢の客の可読性）。色は --ink-soft で 6.68:1。 */
.o-item__desc {
  font-size: 14px; color: var(--ink-soft); margin-top: 3px; line-height: 1.65;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.o-item__foot {
  margin-top: auto; display: flex; align-items: center; justify-content: space-between;
  padding-top: 8px; gap: 8px;
}
.o-item__price { font-weight: 900; font-size: 17px; letter-spacing: -.02em; }

/* ══════════ 数量ステッパ・追加 ══════════
   52px。一般の44pxより大きくしている理由は冒頭のとおり。 */
.stepper { display: flex; align-items: center; gap: 3px; }
.stepper button {
  width: var(--tap-lg); height: var(--tap-lg);
  border-radius: var(--radius-sm);
  border: 1.5px solid var(--brand); background: var(--card); color: var(--brand-dark);
  display: flex; align-items: center; justify-content: center;
  line-height: 1;
}
.stepper button:active { background: var(--brand-light); }
.stepper button:disabled { opacity: .35; }
.stepper .qty {
  min-width: 34px; text-align: center;
  font-weight: 900; font-size: 18px; font-variant-numeric: tabular-nums;
}
.add-btn {
  width: var(--tap-lg); height: var(--tap-lg);
  border-radius: var(--radius-sm); border: none;
  background: var(--brand); color: #fff;        /* 4.66:1 */
  display: flex; align-items: center; justify-content: center;
  line-height: 1; box-shadow: var(--shadow-xs);
}
.add-btn:active { background: var(--brand-dark); }

/* ══════════ バッジ ══════════
   旧実装は全て11px。薄暗い店内では読めないため13pxへ。
   配色は全て実測でAA以上（アレルゲンは安全に関わるため特に確保）。 */
.o-badges { display: flex; flex-wrap: wrap; gap: 5px; margin: 4px 0 5px; }
.o-badge {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 13px; font-weight: 800; line-height: 1.5;
  padding: 4px 10px; border-radius: 999px; border: none;
}
.o-badge .ic { width: 14px; height: 14px; stroke-width: 2.1; }
/* 「おすすめ」はブランド色に揃える。別の色にすると、ボタンとバッジで
   画面に主張色が2つある状態になり、どちらを見ればよいか迷う。 */
.o-badge.rec { background: var(--brand-light); color: var(--brand-dark); }  /* 7.99:1 */
.o-badge.pop { background: #FBF1DA; color: #6b4a02; }   /* 7.18:1 */
.o-badge.alc { background: #eef2fb; color: #2c4a97; }   /* 7.39:1 */
/* アレルゲンは「押せること」が安全に直結する。
   旧: font-size:11px / padding:2px 8px → 実効タップ領域 約22px（基準の半分）
   新: min-height:44px を明示して確実に押せるようにする。 */
.o-badge.alg {
  background: var(--bg-sunk); color: #4a463f;           /* 8.17:1 */
  border: 1px solid var(--line-strong);
  cursor: pointer;
  min-height: 44px; padding: 6px 14px;
  font-size: 13.5px;
}
.o-badge.alg:active { background: var(--line); }

/* ══════════ カートバー（下部固定＝親指到達域）══════════
   片手で持ったときに親指が自然に届くのは画面下部。
   最も重要な操作（注文へ進む）を必ずここに置く。

   カートが空のあいだは出さない。以前は「0点／¥0」の灰色ボタンを常時置いていたが、
   (1) 押せないボタンが画面の下1/6を占め続け、品書きの表示面積を削る
   (2) 押しても何も起きないので「壊れている」と読まれる
   1品入った瞬間に下からせり上がることで、「入った」という手応えにもなる。 */
.cart-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px));
  background: linear-gradient(to top, var(--bg) 62%, rgba(255, 255, 255, 0));
  display: flex; justify-content: center; pointer-events: none;
  transform: translateY(130%); visibility: hidden;
  transition: transform .3s cubic-bezier(.2, .8, .3, 1), visibility .3s;
}
.cart-bar.show { transform: none; visibility: visible; }
@media (prefers-reduced-motion: reduce) { .cart-bar { transition: none; } }
.cart-bar__inner { pointer-events: auto; width: 100%; max-width: calc(var(--maxw) - 32px); }
.cart-bar .btn {
  box-shadow: var(--shadow-lg);
  min-height: var(--tap-xl);           /* 58px。押し損ねが最も痛い操作 */
  font-size: 17px;
}
.cart-bar__count {
  background: rgba(255, 255, 255, .26);
  border-radius: 999px; padding: 2px 11px;
  font-size: 15px; font-weight: 900; font-variant-numeric: tabular-nums;
}

/* ══════════ シート（カート・完了）══════════ */
.sheet-backdrop {
  position: fixed; inset: 0; background: rgba(20, 17, 14, .5); z-index: 40;
  opacity: 0; pointer-events: none; transition: opacity .2s ease;
}
.sheet-backdrop.show { opacity: 1; pointer-events: auto; }
.sheet {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 41;
  background: var(--bg);
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  max-width: var(--maxw); margin: 0 auto;
  transform: translateY(100%);
  transition: transform .26s cubic-bezier(.32, .9, .28, 1);
  max-height: 90vh; display: flex; flex-direction: column;
  box-shadow: var(--shadow-lg);
}
.sheet.show { transform: translateY(0); }
.sheet__handle { width: 42px; height: 4px; background: var(--line-strong); border-radius: 4px; margin: 10px auto 4px; }
.sheet__head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 18px 12px; border-bottom: 1px solid var(--line);
}
.sheet__head h2 { font-size: 18px; font-weight: 900; }
/* 閉じるボタン: 旧34px → 44px。誤って背景を押して閉じてしまう事故も減る。 */
.sheet__body { overflow-y: auto; padding: 14px 18px; -webkit-overflow-scrolling: touch; }
.sheet__foot {
  padding: 14px 18px calc(18px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--line); background: var(--card);
}

/* ══════════ カート明細 ══════════ */
.cart-line { display: flex; align-items: center; gap: 12px; padding: 13px 0; border-bottom: 1px solid var(--line); }
.cart-line__name { flex: 1; font-weight: 700; font-size: 15px; }
.cart-line__main { flex: 1; min-width: 0; }
.cart-line__main .cart-line__name { flex: none; }
/* 旧: 11px / #9a7c2e（3.96:1・不適合）→ 13px / --warn-ink（7.9:1相当） */
.cart-line__alg { font-size: 13px; color: var(--warn-ink); margin-top: 3px; line-height: 1.6; font-weight: 700; }
.cart-line__price { font-weight: 800; min-width: 76px; text-align: right; font-variant-numeric: tabular-nums; }
.cart-total { display: flex; justify-content: space-between; align-items: baseline; padding: 16px 0 6px; font-weight: 900; }
.cart-total .amount { font-size: 26px; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }

/* お通し・席料（最初の注文にだけ加算される）
   金額が予想外に増える箇所なので、左の縦罫で「通常の商品ではない」ことを示す。

   旧実装は説明文・ステッパ・金額を横一列に並べていた。ステッパ(144px)と
   金額(76px)が固定幅なので、375px幅では説明文に80pxしか残らず、
   「ご来店人数を選んでください」が7行に折り返して読めなくなっていた。
   説明を読ませたい箇所なので、説明を全幅に置き、操作を次の行に落とす。 */
.cart-charge {
  padding: 13px 14px;
  margin-top: 10px; background: var(--warn-bg);
  border: 1px solid #e0cfa8; border-left: 4px solid var(--warn);
  border-radius: var(--radius-sm);
}
.cart-charge__txt { min-width: 0; }
.cart-charge__name { font-weight: 800; font-size: 15px; }
.cart-charge__sub { font-size: 13px; color: var(--warn-ink); margin-top: 4px; line-height: 1.65; }  /* 旧11px/3.81:1 */
/* 操作行：ステッパは左、金額は右。人数を変えると金額が動くのが同じ行で見える */
.cart-charge__row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin-top: 10px;
}
.cart-charge__row .cart-line__price { font-size: 17px; }
.cart-note-alc, .cart-note-alg {
  font-size: 13.5px; border-radius: var(--radius-sm); padding: 10px 13px; margin-top: 10px; line-height: 1.75;
}
.cart-note-alc { background: var(--info-bg); color: var(--info-ink); }    /* 8.6:1 */
.cart-note-alg { background: var(--bg-sunk); color: var(--ink-2); }       /* 7.7:1 */
/* アレルギー確認のチェックボックス。安全に関わるため領域を大きく取る。 */
.cart-allergy {
  display: flex; align-items: flex-start; gap: 11px;
  font-size: 13.5px; line-height: 1.75; color: var(--warn-ink);
  background: var(--warn-bg); border: 1.5px solid #e5c690;
  border-radius: var(--radius-sm); padding: 13px; margin-top: 10px;
  cursor: pointer; min-height: var(--tap);
}
.cart-allergy input { width: 24px; height: 24px; flex: 0 0 auto; margin-top: 1px; accent-color: var(--brand); }

/* ══════════ アレルゲンのポップアップ ══════════ */
.alg-pop { position: fixed; inset: 0; z-index: 60; display: flex; align-items: center; justify-content: center; }
.alg-pop__card {
  position: relative; z-index: 61; background: var(--card);
  border-radius: var(--radius-lg); padding: 22px; margin: 20px;
  max-width: 360px; width: calc(100% - 40px); box-shadow: var(--shadow-lg);
}
.alg-pop__card h3 { margin: 0 0 8px; font-size: 18px; font-weight: 900; }
.alg-pop__label { font-size: 13.5px; font-weight: 700; color: var(--ink-soft); margin: 0 0 10px; }
.alg-pop__chips { display: flex; flex-wrap: wrap; gap: 7px; }
.alg-pop__chips .chip {
  background: var(--danger-bg); color: var(--danger-ink);   /* 8.2:1 */
  font-weight: 800; font-size: 14px; padding: 6px 13px;
}

/* ══════════ 完了画面 ══════════
   「注文が本当に通ったのか」が客の最大の不安。ここは過剰なくらい強く出す。
   確認が弱いと、不安になった客が二重に注文してしまう（店の損害になる）。 */
.done-screen {
  min-height: 100vh; display: flex; flex-direction: column;
  padding: 24px 20px calc(24px + env(safe-area-inset-bottom, 0px));
}
.done-card {
  background: var(--card); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md); padding: 30px 22px; text-align: center; margin-top: 8px;
}
.done-check {
  width: 72px; height: 72px; border-radius: 50%;
  background: var(--ok-bg); color: var(--ok);
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 16px;
}
.done-card h2 { font-size: 22px; font-weight: 900; }
/* 受付番号は店員に伝える唯一の識別子。離れて見ても読める大きさにする。 */
.ticket-big { font-size: 14px; color: var(--ink-soft); font-weight: 700; margin-top: 20px; }
.ticket-big .num {
  display: block; font-size: 66px; font-weight: 900; color: var(--brand-dark);
  line-height: 1.05; letter-spacing: 1px; font-variant-numeric: tabular-nums;
}
.seat-big { font-size: 32px; font-weight: 900; color: var(--brand-dark); letter-spacing: -.02em; }

/* ══════════ 進行ステータス ══════════ */
.steps { display: flex; align-items: center; justify-content: center; gap: 6px; margin: 24px 0 6px; }
.step { display: flex; flex-direction: column; align-items: center; gap: 7px; flex: 0 0 auto; width: 84px; }
.step__dot {
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--bg-sunk); color: var(--ink-faint);
  display: flex; align-items: center; justify-content: center;
  font-weight: 900; font-size: 16px;
}
/* 旧: 12px / --ink-faint(#948c80) = 3.0:1 で不適合だった。
   新トークンで --ink-faint 自体が 4.66:1 になり、サイズも13pxへ。 */
.step__label { font-size: 13px; color: var(--ink-soft); font-weight: 700; }
.step.active .step__dot { background: var(--brand); color: #fff; }
.step.active .step__label { color: var(--brand-dark); font-weight: 800; }
.step.done .step__dot { background: var(--ok); color: #fff; }
.step.done .step__label { color: var(--ok-ink); }
.step__bar { flex: 1; height: 3px; background: var(--bg-sunk); border-radius: 3px; min-width: 12px; margin-top: 18px; }
.step__bar.fill { background: var(--ok); }

.fallback-note {
  margin-top: 18px; background: var(--warn-bg); color: var(--warn-ink);   /* 7.9:1 */
  border-radius: var(--radius-sm); padding: 13px 15px; font-size: 13.5px; line-height: 1.75;
}
.order-recap {
  background: var(--card); border-radius: var(--radius);
  padding: 4px 16px; margin-top: 16px; box-shadow: var(--shadow-xs);
}
.order-recap .cart-line:last-child { border-bottom: none; }

/* ══════════ 全画面メッセージ（エラー・準備中）══════════ */
.full-msg {
  min-height: 80vh; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 14px;
  text-align: center; padding: 30px; color: var(--ink-soft);
}
.full-msg .emoji { color: var(--ink-faint); }   /* 中身はSVGアイコン。クラス名はJSが参照するため据え置き */
.full-msg h2 { font-size: 20px; font-weight: 900; color: var(--ink); }
.full-msg p { font-size: 15px; line-height: 1.8; }

/* ══════════ 注文履歴 ══════════ */
.hist { border-top: 1.5px dashed var(--line-strong); margin-top: 14px; padding-top: 12px; text-align: left; }
.hist--canceled { opacity: .5; }
.hist__head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.hist__n { font-size: 13px; font-weight: 800; color: var(--ink-soft); }
.hist__st {
  font-size: 13px; font-weight: 800; padding: 3px 11px; border-radius: 999px;
  background: var(--bg-sunk); color: var(--ink-2);
}
.hist__st.st-received { background: #fdeee6; color: #a8390f; }   /* 5.69:1 */
.hist__st.st-cooking  { background: #eef2fb; color: #2c4a97; }   /* 7.39:1 */
.hist__st.st-done     { background: var(--ok-bg); color: var(--ok-ink); }
.hist__st.st-paid     { background: var(--ok-bg); color: var(--ok-ink); }
.hist__ticket { font-size: 13px; font-weight: 800; }
.hist__time { margin-left: auto; font-size: 13px; color: var(--ink-soft); font-weight: 700; font-variant-numeric: tabular-nums; }
.hist__items { margin-top: 5px; }
.hist__total { text-align: right; font-weight: 800; margin-top: 3px; }
.cart-line__name.adj { color: var(--warn-ink); }