/* ============================================================
   receipt.css – Restaurant Receipt Generator 専用スタイル
   既存の css/style.css の変数（--ink, --paper, --accent 等）を継承
   ============================================================ */

/* ── 明細作成画面 ログインゲート ─────────────────────────────── */
.auth-gate {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--paper-warm);
  padding: 20px;
}
.auth-gate__box {
  width: 100%;
  max-width: 340px;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 32px 24px;
  box-shadow: 0 8px 28px rgba(40,24,8,.12);
  text-align: center;
}
.auth-gate__title {
  font-size: 18px;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 4px;
}
.auth-gate__hint {
  font-size: 13px;
  color: var(--muted);
  margin-bottom: 20px;
}
.auth-gate__input {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 16px;
  text-align: center;
  box-sizing: border-box;
}
.auth-gate__input:focus {
  outline: none;
  border-color: var(--accent);
}
.auth-gate__error {
  color: var(--accent);
  font-size: 13px;
  margin-top: 10px;
}

/* ── POS 固定トップバー（検索 + カテゴリータブ） ─────────── */
/* 検索バーとカテゴリータブを1つのブロックとしてヘッダー直下に固定。
   タブバーは横スクロール可能（.cat-nav の overflow-x は style.css で定義済み） */
.pos-topbar {
  position: sticky;
  top: 56px;              /* .site-header の高さ */
  z-index: 90;
  background: var(--paper-warm);
  box-shadow: 0 2px 6px rgba(0,0,0,.06);
}
.pos-topbar .search-bar,
.pos-topbar .cat-nav {
  position: static;       /* 個別の sticky を無効化（親でまとめて固定） */
}
/* POS 操作向けにタブを大きめ・タップしやすく */
.pos-topbar .cat-nav__btn {
  padding: 10px 18px;
  font-size: 14px;
  font-weight: 600;
}

/* ── 商品検索バー ─────────────────────────────────────────── */
.search-bar {
  position: sticky;
  top: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  background: var(--paper-warm);
  border-bottom: 1px solid var(--border);
}
.search-bar__input {
  flex: 1;
  max-width: 480px;
  padding: 10px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 14px;
  background: var(--card-bg);
  color: var(--ink);
}
.search-bar__input:focus {
  outline: none;
  border-color: var(--accent);
}
.search-bar__clear {
  border: none;
  background: none;
  font-size: 20px;
  color: var(--muted);
  cursor: pointer;
  padding: 0 6px;
}
.search-empty {
  padding: 40px 20px;
  text-align: center;
  color: var(--muted);
  font-size: 14px;
}

/* ── カート内 品名（英語サブ） ───────────────────────────────── */
.cart-list__name-en {
  font-size: 11px;
  color: var(--muted);
  margin-top: 2px;
}

/* ── 明細作成完了モーダル ─────────────────────────────────── */
.receipt-no-display {
  font-size: 32px;
  font-weight: 700;
  letter-spacing: .06em;
  color: var(--accent);
  margin-top: 8px;
  font-family: monospace;
}

/* ── 明細検索ページ ─────────────────────────────────────────── */
.receipt-search-page {
  max-width: 480px;
  margin: 0 auto;
  padding: 40px 20px;
}
.receipt-search-page__title {
  font-size: 20px;
  font-weight: 700;
  text-align: center;
  margin-bottom: 8px;
}
.receipt-search-page__hint {
  text-align: center;
  color: var(--muted);
  font-size: 13px;
  margin-bottom: 24px;
}
.receipt-search-form {
  display: flex;
  gap: 10px;
  margin-bottom: 24px;
}
.receipt-search-form input {
  flex: 1;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 16px;
  text-align: center;
  letter-spacing: .05em;
  font-family: monospace;
}
.receipt-result {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px;
}
.receipt-result__store {
  text-align: center;
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 4px;
}
.receipt-result__time {
  text-align: center;
  font-size: 12px;
  color: var(--muted);
  margin-bottom: 16px;
}
.receipt-result__list {
  list-style: none;
  margin: 0 0 12px;
  padding: 0;
}
.receipt-result__list li {
  display: flex;
  justify-content: space-between;
  padding: 8px 0;
  border-bottom: 1px solid var(--border);
  font-size: 14px;
}
.receipt-result__total {
  display: flex;
  justify-content: space-between;
  font-size: 17px;
  font-weight: 700;
  border-top: 2px solid var(--ink);
  padding-top: 12px;
  margin-top: 8px;
}
.receipt-result__notice {
  margin-top: 16px;
  font-size: 11px;
  color: var(--muted);
  line-height: 1.7;
  border-top: 1px solid var(--border);
  padding-top: 12px;
}
.receipt-search-page__footer-notice {
  margin-top: 32px;
  font-size: 11px;
  color: var(--muted);
  text-align: center;
  line-height: 1.8;
}
.receipt-expired {
  text-align: center;
  padding: 40px 20px;
  color: var(--muted);
}
.receipt-expired__icon {
  font-size: 40px;
  margin-bottom: 12px;
}

/* ── 印刷（Browser Print / 感熱プリンター） ───────────────────
   58mm・80mm 幅の感熱紙に対応。通常表示では非表示。 */
.print-only {
  display: none;
}

@media print {
  body * {
    visibility: hidden;
  }
  .print-only, .print-only * {
    visibility: visible;
  }
  .print-only {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
  }
  .print-receipt {
    width: 80mm; /* デフォルト80mm。58mm機は body.print-58mm で切り替え */
    font-family: 'Noto Sans JP', sans-serif;
    font-size: 12px;
    color: #000;
    padding: 4mm;
  }
  body.print-58mm .print-receipt {
    width: 58mm;
    font-size: 11px;
  }
  .print-receipt__header {
    text-align: center;
    margin-bottom: 6px;
  }
  .print-receipt__name {
    font-size: 15px;
    font-weight: 700;
  }
  .print-receipt__no {
    font-size: 13px;
    font-family: monospace;
    margin-top: 2px;
  }
  .print-receipt__time {
    font-size: 10px;
    margin-top: 2px;
  }
  .print-receipt__divider {
    border-top: 1px dashed #000;
    margin: 6px 0;
  }
  .print-receipt__table {
    width: 100%;
    border-collapse: collapse;
  }
  .print-receipt__table td {
    padding: 3px 0;
    vertical-align: top;
  }
  .print-receipt__item-name-en {
    font-size: 10px;
    color: #333;
  }
  .print-receipt__item-qty {
    text-align: center;
    white-space: nowrap;
    padding: 0 4px !important;
  }
  .print-receipt__item-price {
    text-align: right;
    white-space: nowrap;
  }
  .print-receipt__total {
    display: flex;
    justify-content: space-between;
    font-size: 14px;
    font-weight: 700;
    margin-top: 4px;
  }
  .print-receipt__footer {
    margin-top: 8px;
    font-size: 9px;
    line-height: 1.5;
    border-top: 1px dashed #000;
    padding-top: 6px;
  }
}

/* ── 前台モーダル基礎（既存の完了モーダルにも適用） ─────────── */
.modal-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(20, 16, 12, .55);
  z-index: 200;
  align-items: center;
  justify-content: center;
  padding: 16px;
}
.modal {
  background: var(--paper, #fff);
  border-radius: 14px;
  width: 100%;
  max-width: 480px;
  max-height: min(86vh, 720px);
  display: flex;
  flex-direction: column;
  box-shadow: 0 18px 50px rgba(0,0,0,.28);
  overflow: hidden;
}
.modal__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  padding: 16px 20px 12px;
  border-bottom: 1px solid var(--border);
}
.modal__title { font-size: 17px; font-weight: 700; }
.modal__close {
  background: none;
  border: none;
  font-size: 24px;
  color: var(--muted);
  line-height: 1;
  padding: 2px 8px;
  border-radius: 6px;
}
.modal__close:hover { background: var(--paper-warm); color: var(--ink); }

/* ── オプション選択モーダル ─────────────────────────────────── */
.option-modal { max-width: 520px; }
.option-modal__subtitle { font-size: 12px; color: var(--muted); margin-top: 2px; }
.option-modal__body {
  overflow-y: auto;
  padding: 8px 20px 4px;
  flex: 1;
}
.option-group { margin: 12px 0 16px; }
.option-group__title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 700;
  margin-bottom: 8px;
}
.option-group__badge {
  font-size: 10.5px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 10px;
  background: var(--accent, #b3412f);
  color: #fff;
}
.option-group__badge--optional { background: var(--border); color: var(--ink-soft); }
.option-group__hint { font-size: 11px; color: var(--muted); font-weight: 400; }
.option-group__error { font-size: 12px; color: var(--accent, #b3412f); margin-top: 4px; display: none; }
.option-choice {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1.5px solid var(--border);
  border-radius: 10px;
  margin-bottom: 6px;
  cursor: pointer;
  transition: border-color .12s, background .12s;
  font-size: 14px;
}
.option-choice:hover { background: var(--paper-warm); }
.option-choice--checked { border-color: var(--ink); background: var(--paper-warm); }
.option-choice input { width: 18px; height: 18px; accent-color: var(--ink); flex-shrink: 0; }
.option-choice__name { flex: 1; }
.option-choice__name-en { font-size: 11px; color: var(--muted); }
.option-choice__price { font-size: 13px; font-weight: 700; white-space: nowrap; }
.option-choice__price--plus { color: var(--accent, #b3412f); }
.option-choice__price--minus { color: #1d7a3f; }
.option-choice__price--zero { color: var(--muted); font-weight: 500; }

.option-modal__memo {
  padding: 10px 20px;
  border-top: 1px dashed var(--border);
}
.option-modal__memo-label { font-size: 12px; color: var(--muted); display: block; margin-bottom: 6px; }
.option-modal__memo-input {
  width: 100%;
  padding: 9px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 14px;
  font-family: inherit;
}
.option-modal__footer {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 20px 16px;
  border-top: 1px solid var(--border);
  background: var(--paper-warm);
}
.option-modal__price { flex: 1; text-align: right; }
.option-modal__price-label { display: block; font-size: 10.5px; color: var(--muted); }
.option-modal__price-val { font-size: 19px; font-weight: 700; }

/* ── 明細パネルの行（オプション・メモ・行操作） ─────────────── */
.cart-list__item--line { display: block; }
.cart-list__row { display: flex; justify-content: space-between; gap: 10px; }
.cart-list__options { font-size: 12px; color: var(--ink-soft); margin-top: 3px; line-height: 1.6; }
.cart-list__memo { font-size: 12px; color: var(--accent, #b3412f); margin-top: 2px; }
.cart-list__right { text-align: right; flex-shrink: 0; }
.cart-list__unit { display: block; font-size: 11px; color: var(--muted); }
.cart-list__ctrl-row { margin-top: 6px; }
.cart-line-ctrl { display: flex; align-items: center; gap: 8px; justify-content: flex-end; }
.cart-line-ctrl .qty-val { min-width: 20px; text-align: center; font-weight: 600; }
.cart-line-remove {
  background: none;
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--muted);
  font-size: 12px;
  padding: 4px 8px;
  margin-left: 6px;
}
.cart-line-remove:hover { color: var(--accent, #b3412f); border-color: var(--accent, #b3412f); }

/* 印刷明細のオプション・メモ行 */
.print-receipt__opt { font-size: 10.5px; line-height: 1.5; }
.print-receipt__memo { font-size: 10.5px; }

/* ════════════════════════════════════════════════════════════
   POS 大型タッチ操作（Material Design / Apple HIG 準拠）
   ・最小 48×48px、推奨 56px。ボタン間隔 12px 以上で誤タップ防止
   ・touch-action: manipulation でダブルタップズームを無効化
   ════════════════════════════════════════════════════════════ */

/* 商品カードの ± 操作列（カード下部・中央寄せ） */
.qty-ctrl--card {
  justify-content: center;
  gap: 16px;
  padding: 10px 12px 14px;
  border-top: 1px solid var(--border);
  margin-top: auto; /* カード下端に固定 */
}
.qty-ctrl--card .qty-btn {
  width: 56px;
  height: 56px;
  min-width: 48px;
  min-height: 48px;
  border-radius: 14px;
  font-size: 28px;
  font-weight: 700;
  border-width: 2px;
  touch-action: manipulation;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition: background .1s, border-color .1s, transform .06s;
}
.qty-ctrl--card .qty-btn--plus {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}
.qty-ctrl--card .qty-btn--plus:hover:not(:disabled),
.qty-ctrl--card .qty-btn--plus:active:not(:disabled) {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}
.qty-ctrl--card .qty-btn:active:not(:disabled) { transform: scale(.92); }
.qty-ctrl--card .qty-btn:disabled {
  opacity: .3;
  background: var(--paper);
  color: var(--muted);
  border-color: var(--border);
}
.qty-ctrl--card .qty-val {
  min-width: 44px;
  text-align: center;
  font-size: 24px;
  font-weight: 700;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.qty-ctrl--card .qty-val--active { color: var(--ink); }

/* 追加時の即時視覚フィードバック */
@keyframes qty-flash {
  0% { transform: scale(1.35); color: var(--accent); }
  100% { transform: scale(1); }
}
.qty-val--flash { animation: qty-flash .25s ease-out; display: inline-block; }

/* カードをフレックス縦並びにして ± 列を下端へ */
.menu-card { display: flex; flex-direction: column; }

/* 小さい画面ではボタンをやや縮小（最小 48px は維持） */
@media (max-width: 480px) {
  .qty-ctrl--card { gap: 12px; }
  .qty-ctrl--card .qty-btn { width: 48px; height: 48px; font-size: 24px; }
}

/* ── 右側明細パネルの行操作（44px 以上のタッチ対象） ──────── */
.cart-line-ctrl .qty-btn {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  font-size: 22px;
  font-weight: 700;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.cart-line-ctrl .qty-btn:active { transform: scale(.92); }
.cart-line-ctrl { gap: 10px; }
.qty-val--editable {
  min-width: 48px;
  height: 44px;
  border: 1.5px dashed var(--border);
  border-radius: 10px;
  background: var(--paper);
  font-size: 18px;
  font-weight: 700;
  font-family: inherit;
  color: var(--ink);
  cursor: text;
  touch-action: manipulation;
  font-variant-numeric: tabular-nums;
}
.qty-val--editable:hover { border-color: var(--ink); }
.qty-input {
  width: 64px;
  height: 44px;
  text-align: center;
  font-size: 18px;
  font-weight: 700;
  font-family: inherit;
  border: 2px solid var(--accent);
  border-radius: 10px;
  outline: none;
}
.cart-line-remove {
  height: 44px;
  padding: 0 12px;
  font-size: 13px;
  border-radius: 10px;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

/* オプション選択モーダルの選択肢も 48px 以上のタッチ対象に */
.option-choice { min-height: 48px; touch-action: manipulation; }
.option-choice input { width: 22px; height: 22px; }

/* ════════════════════════════════════════════════════════════
   POS コンパクトカード（高密度・状態表示・落ち着いた和風配色）
   選択状態の強調色は既存パレットの --gold（芥子色）を使用。
   高彩度の赤・青は使わない。
   ════════════════════════════════════════════════════════════ */

/* 未追加状態：白背景 + 薄いグレー枠 */
.menu-card--pos {
  background: #fff;
  border: 1.5px solid var(--border);
  border-left: 4px solid transparent;
  border-radius: var(--radius);
  overflow: hidden;
  transition: border-color .15s, background .15s, box-shadow .15s;
}
.menu-card__pos-body {
  padding: 10px 12px 4px;
  min-height: 0;
}
.menu-card__short-name {
  font-size: 18px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--ink);
  /* 長い名称は最大2行で自動折り返し（カード高を抑える） */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.menu-card__pos-price {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink-soft);
  margin-top: 2px;
  font-variant-numeric: tabular-nums;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* 追加済み状態：金色の枠 + 左バー + ごく淡い金色背景 */
.menu-card--in-cart {
  border-color: var(--gold);
  border-left-color: var(--gold);
  background: #fcf8ec;
  box-shadow: 0 1px 6px rgba(201, 147, 10, .12);
}
.menu-card--in-cart .qty-val--active {
  color: #9a7107; /* --gold を読みやすく暗めに */
  font-weight: 800;
}

/* カード内 ± 列（コンパクト化しつつ 48px 以上を確保） */
.menu-card--pos .qty-ctrl--card {
  padding: 6px 10px 10px;
  gap: 14px;
  border-top: none;
}
.menu-card--pos .qty-ctrl--card .qty-btn {
  width: 52px;
  height: 48px;
  border-radius: 12px;
  font-size: 26px;
}

/* 操作フィードバック：カード全体 98% → 100%（約180ms） */
@keyframes card-tap {
  0% { transform: scale(.98); }
  100% { transform: scale(1); }
}
.menu-card--tap { animation: card-tap .18s ease-out; }

/* 数量数字の短い拡大（既存 qty-flash を150〜200msに調整） */
.qty-val--flash { animation: qty-flash .18s ease-out; }

/* ── 高密度グリッド（明細作成画面のみ） ─────────────────────
   Desktop: 多カラム / Tablet: 2〜3カラム / Mobile: 2カラム */
.page-layout--with-cart .menu-grid {
  grid-template-columns: repeat(auto-fill, minmax(168px, 1fr));
  gap: 10px;
}
.menu-main { padding: 12px 14px 90px; }
@media (max-width: 1024px) {
  .page-layout--with-cart .menu-grid {
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  }
}
@media (max-width: 640px) {
  .page-layout--with-cart .menu-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
  }
  .menu-card__short-name { font-size: 16px; }
  .menu-card--pos .qty-ctrl--card .qty-btn {
    width: 48px;
    height: 48px;
    font-size: 24px;
  }
  .menu-card--pos .qty-ctrl--card { gap: 10px; }
}
/* ごく狭い画面は1カラム */
@media (max-width: 340px) {
  .page-layout--with-cart .menu-grid { grid-template-columns: 1fr; }
}

/* 検索結果のカテゴリー見出しもコンパクトに */
.page-layout--with-cart .menu-section { margin-bottom: 20px; }
.page-layout--with-cart .menu-section__heading { margin-bottom: 8px; }

/* 品切れカード */
.menu-card--pos.menu-card--soldout { opacity: .55; }
.menu-card--pos .menu-card__soldout-badge {
  font-size: 10.5px;
  color: var(--accent);
  border: 1px solid var(--accent);
  border-radius: 8px;
  padding: 0 6px;
}

/* ── オプションモーダル：数量型・数値型ステッパー ─────────── */
.option-stepper-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 12px;
  border: 1.5px solid var(--border);
  border-radius: 10px;
  margin-bottom: 6px;
  min-height: 56px;
}
.option-stepper { display: flex; align-items: center; gap: 10px; }
.option-stepper .qty-btn {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  font-size: 24px;
  font-weight: 700;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.option-stepper .qty-btn:active:not(:disabled) { transform: scale(.92); }
.opt-step-val {
  min-width: 32px;
  text-align: center;
  font-size: 20px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.option-stepper__unit { font-size: 13px; color: var(--ink-soft); margin-right: 2px; }
.option-stepper-row__unit { display: block; font-size: 12px; color: var(--muted); margin-top: 2px; }
.option-stepper-row__price { font-size: 12px; }
.option-number-info { display: block; font-size: 12.5px; color: var(--ink-soft); line-height: 1.5; }

/* 明細検索ページ：英語併記の補助テキスト */
.bilingual-sub {
  font-size: .82em;
  color: var(--muted);
  font-weight: 400;
}

/* ════════════════════════════════════════════════════════════
   カテゴリー切り替え（Page + Swipe）
   ════════════════════════════════════════════════════════════ */

/* 分類按鈕：固定寬度の大型ボタン（小さなタグ様式は使わない） */
.pos-topbar .cat-nav {
  gap: 8px;
  padding: 8px 12px 10px;
}
.pos-topbar .cat-nav__btn {
  width: 118px;
  min-width: 118px;      /* 全ボタン同一幅（固定） */
  height: 50px;          /* 48〜56px の大型タッチ対象 */
  padding: 0 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  border: 1.5px solid var(--border);   /* 非選択：淺灰外框 */
  background: var(--card-bg);          /* 非選択：淺色背景 */
  color: var(--ink-soft);              /* 非選択：深灰文字 */
  font-size: 14.5px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  touch-action: manipulation;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition: background .15s, color .15s, border-color .15s, box-shadow .15s;
}
.pos-topbar .cat-nav__btn:active { transform: scale(.97); }
/* 現在のカテゴリー：主色（墨色）+ 白文字 + 太字 + 影 */
.pos-topbar .cat-nav__btn--active,
.pos-topbar .cat-nav__btn--active:hover {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
  font-weight: 800;
  box-shadow: 0 3px 10px rgba(26, 17, 8, .28);
}
@media (max-width: 640px) {
  .pos-topbar .cat-nav__btn {
    width: 104px;
    min-width: 104px;
    height: 48px;
    font-size: 14px;
  }
}

/* 商品ページの水平スライド（250ms・チラつきなし） */
#menu-root {
  position: relative;
  overflow: hidden;
  touch-action: pan-y; /* 縦スクロールはブラウザ、横スワイプはJSで処理 */
}
.cat-page--abs {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  transition: transform .25s ease;
  will-change: transform;
}

/* ── 起動時 Loading（一括データ取得中・1回のみ表示） ─────────── */
.boot-loading {
  position: fixed;
  inset: 0;
  z-index: 900; /* auth-gate(1000) より下、他すべてより上 */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  background: var(--paper-warm);
}
.boot-loading__logo {
  width: 96px;
  height: 96px;
  border-radius: 22px;
  box-shadow: 0 6px 24px rgba(40,24,8,.18);
}
.boot-loading__spinner {
  width: 28px;
  height: 28px;
  border: 3px solid var(--border);
  border-top-color: var(--ink);
  border-radius: 50%;
  animation: boot-spin .8s linear infinite;
}
@keyframes boot-spin { to { transform: rotate(360deg); } }
.boot-loading__text {
  font-size: 13.5px;
  color: var(--ink-soft);
}

/* ════════════════════════════════════════════════════════════
   タップ式商品カード（カード全体 = 追加ボタン、± なし）
   ════════════════════════════════════════════════════════════ */
.menu-card--tappable {
  position: relative;
  cursor: pointer;
  min-height: 76px;               /* 大型タッチ対象を確保 */
  padding-right: 44px;            /* 数量バッジのスペース */
  touch-action: manipulation;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition: border-color .12s, background .12s, box-shadow .12s, transform .08s;
}
.menu-card--tappable:active:not(.menu-card--soldout) { transform: scale(.97); }
.menu-card--tappable:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}
.menu-card--tappable .menu-card__pos-body { padding: 12px 4px 12px 12px; }
.menu-card--tappable.menu-card--soldout { cursor: default; }

/* 数量バッジ（右上・0のときは薄く表示） */
.menu-card__qty-badge {
  position: absolute;
  top: 50%;
  right: 10px;
  transform: translateY(-50%);
  min-width: 30px;
  height: 30px;
  padding: 0 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 15px;
  font-size: 15px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  background: var(--paper-warm);
  color: var(--border);
  transition: background .12s, color .12s;
}
.menu-card__qty-badge--on {
  background: var(--gold);
  color: #fff;
  box-shadow: 0 2px 6px rgba(201,147,10,.35);
}
@keyframes badge-pop {
  0% { transform: translateY(-50%) scale(1.45); }
  100% { transform: translateY(-50%) scale(1); }
}
.menu-card__qty-badge--pop { animation: badge-pop .18s ease-out; }

/* 再編集モードのバナー */
.editing-banner {
  background: var(--gold);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  text-align: center;
  padding: 8px 12px;
}

/* ── 明細履歴ページ ─────────────────────────────────────────── */
.history-page {
  max-width: 760px;
  margin: 0 auto;
  padding: 14px 14px 60px;
}
.history-toolbar {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.history-toolbar__input {
  flex: 1;
  min-width: 180px;
  padding: 10px 14px;
  border: 1px solid var(--border);
  border-radius: 10px;
  font-size: 14px;
  font-family: inherit;
}
.history-toolbar__date {
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  font-size: 14px;
  font-family: inherit;
  background: var(--card-bg);
}
.history-toolbar__sort { white-space: nowrap; }

.history-card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 16px;
  margin-bottom: 10px;
}
.history-card__no {
  font-size: 16px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  display: flex;
  align-items: center;
  gap: 10px;
}
.history-card__meta {
  font-size: 12.5px;
  color: var(--muted);
  margin-top: 3px;
}
.history-card__meta strong { color: var(--ink); font-size: 14px; }
.history-card__actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 10px;
}
.history-card__actions .btn { min-height: 40px; }
.history-status {
  font-size: 11px;
  font-weight: 700;
  padding: 2px 10px;
  border-radius: 12px;
}
.history-status--done { background: var(--paper-warm); color: var(--ink-soft); border: 1px solid var(--border); }
.history-status--editing { background: var(--gold); color: #fff; }
.history-empty {
  text-align: center;
  color: var(--muted);
  padding: 48px 20px;
}