/* =========================================================================
   学術バーQ モバイルオーダー — デザインシステム
   ・紙(paper)と墨(ink)を基調に、温かみのある真鍮色(brass)を差し色に。
   ・システムフォントのみ(オフライン前提)。見出しは明朝で知的な佇まいに。
   ========================================================================= */

:root {
  /* --- palette: paper & ink -------------------------------------------- */
  --paper: #fbf9f4;        /* ページ背景(温かい紙色) */
  --paper-sunk: #f3efe6;   /* 一段沈んだ面 */
  --surface: #ffffff;      /* カード面 */
  --ink: #1c1a15;          /* 本文(温かい墨) */
  --ink-soft: #4a463f;     /* 副次テキスト */
  --muted: #857f72;        /* 補助テキスト */
  --line: #e8e2d5;         /* 罫線 */
  --line-strong: #d8d0bd;  /* 強い罫線 */

  /* --- accent: brass (差し色は主要アクション/状態のみに) ----------------- */
  --accent: #9c6b1c;
  --accent-strong: #7c5312;
  --accent-soft: #f5ead3;
  --accent-line: #e3d0a4;

  /* --- semantic states -------------------------------------------------- */
  --success: #2f6a45;
  --success-soft: #e6efe7;
  --danger: #b03a2e;
  --danger-strong: #8f2d23;
  --danger-soft: #f8e6e2;

  /* --- type ------------------------------------------------------------- */
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI",
    "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Noto Sans JP", Meiryo, sans-serif;
  /* Android(Times New Roman を持たない端末が多い)向けに、和文明朝の候補を
     明示して素の serif フォールバックへ落ちにくくする(2026-08-12 T2)。 */
  --font-serif: "Hiragino Mincho ProN", "Yu Mincho", YuMincho, "Noto Serif JP",
    "Noto Serif CJK JP", serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  --fs-xs: 0.78rem;
  --fs-sm: 0.875rem;
  --fs-base: 1rem;
  --fs-lg: 1.125rem;
  --fs-xl: 1.375rem;
  --fs-2xl: 1.75rem;
  --fs-3xl: 2.5rem;

  /* --- space ------------------------------------------------------------ */
  --s1: 4px;
  --s2: 8px;
  --s3: 12px;
  --s4: 16px;
  --s5: 24px;
  --s6: 32px;
  --s8: 48px;

  /* --- radius & shadow -------------------------------------------------- */
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-pill: 999px;
  --shadow-sm: 0 1px 2px rgba(28, 26, 21, 0.06);
  --shadow-md: 0 6px 20px rgba(28, 26, 21, 0.09);

  /* --- motion(押下・入場の共通トークン) ---------------------------------- */
  --ease-out: cubic-bezier(0.2, 0.7, 0.3, 1);
  --dur-press: 90ms;
  --dur-enter: 180ms;
}

* {
  box-sizing: border-box;
}

/* 画面固定(2026-09-02): iOSのバウンスで白地が出ないよう html/body 両方に
   背景色を持たせ、height:100%/min-height:100%で高さを確保する。
   overscroll-behavior: none は画面全体の引っ張りゴム効果自体を止めるもので、
   個別スクロール領域の overscroll-behavior: contain(下方に多数残存)とは
   別物なので共存させる。イベンター(eventer.css)はダーク背景のため
   html の背景色だけ上書きする。 */
html {
  -webkit-text-size-adjust: 100%;
  height: 100%;
  overscroll-behavior: none;
  background: var(--paper);
}

body {
  margin: 0 auto;
  max-width: 480px;
  padding: 0 var(--s4) calc(var(--s6) + env(safe-area-inset-bottom));
  font-family: var(--font-sans);
  color: var(--ink);
  background: var(--paper);
  line-height: 1.65;
  letter-spacing: 0.01em;
  min-height: 100%;
  overscroll-behavior: none;
}

body.admin {
  max-width: none;
  padding-left: var(--s5);
  padding-right: var(--s5);
}

h1, h2, h3 {
  margin: 0 0 var(--s3);
  line-height: 1.3;
  font-weight: 700;
}

h1 {
  font-family: var(--font-serif);
  font-size: var(--fs-2xl);
  letter-spacing: 0.02em;
}

h2 {
  font-size: var(--fs-lg);
}

a {
  color: var(--accent-strong);
  text-underline-offset: 2px;
}

.num {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
}

.muted {
  color: var(--muted);
}

.center {
  text-align: center;
}

/* =========================================================================
   Brand header (Q モチーフ)
   ========================================================================= */

.site-header {
  padding: var(--s5) 0 var(--s3);
}

.site-header.center {
  text-align: center;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--s3);
}

.site-header.center .brand {
  justify-content: center;
}

.brand-mark {
  width: 40px;
  height: 40px;
  flex: none;
  color: var(--accent);
}

.brand-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  line-height: 1.1;
}

.brand-name {
  font-family: var(--font-serif);
  font-size: var(--fs-xl);
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--ink);
}

.brand-sub {
  font-size: var(--fs-xs);
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: 2px;
}

.tagline {
  text-align: center;
  color: var(--ink-soft);
  font-size: var(--fs-sm);
  margin: var(--s2) 0 0;
}

.lead {
  color: var(--muted);
  text-align: center;
  margin: var(--s2) 0 var(--s5);
}

.page-title {
  font-family: var(--font-serif);
  text-align: center;
  padding: var(--s5) 0 var(--s2);
  margin: 0 0 var(--s4);
  position: relative;
}

.page-title::after {
  content: "";
  display: block;
  width: 32px;
  height: 2px;
  background: var(--accent);
  margin: var(--s3) auto 0;
}

/* =========================================================================
   Cards & surfaces
   ========================================================================= */

.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-sm);
  padding: var(--s4);
  margin-bottom: var(--s3);
}

/* =========================================================================
   Buttons
   ========================================================================= */

button,
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s2);
  min-height: 46px;
  padding: 0 var(--s5);
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  background: var(--accent);
  color: #fff;
  font-family: inherit;
  font-size: var(--fs-base);
  font-weight: 700;
  letter-spacing: 0.02em;
  cursor: pointer;
  text-decoration: none;
  /* ダブルタップでのピンチズームを無効化(2026-08-12 T1)。コンテナには当てない
     (.menu-list は T17 のスワイプのため pan-y のまま)。 */
  touch-action: manipulation;
  transition: background 0.12s ease, border-color 0.12s ease,
    transform var(--dur-press) var(--ease-out);
}

/* hover は「ホバーできる入力機器」だけに限定する。タッチ端末ではタップ後に
   :hover が貼り付いたまま残り(sticky hover)、ボタンが押しっぱなしの色に
   見え続ける不具合になるため(メニューカードが常にうすオレンジに見える等)。 */
@media (hover: hover) {
  button:hover:not(:disabled),
  .btn:hover {
    background: var(--accent-strong);
  }
}

button:disabled {
  background: var(--line-strong);
  color: #fff;
  cursor: default;
}

button.block,
.btn.block {
  display: flex;
  width: 100%;
  /* ラベルは中央に置く(全ロール共通の店長要望 2026-07-31)。左寄せに
     見えていたのは flex の既定 justify が start のため。左右2要素を持つ
     ボタンは子の margin-left:auto が justify より優先されるので壊れない。 */
  justify-content: center;
  align-items: center;
  text-align: center;
}

button.danger,
.btn.danger {
  background: var(--danger);
}

button.danger:hover:not(:disabled) {
  background: var(--danger-strong);
}

button.ghost,
.btn.ghost {
  background: var(--surface);
  color: var(--accent-strong);
  border-color: var(--accent-line);
}

button.ghost:hover:not(:disabled) {
  background: var(--accent-soft);
}

button.small {
  min-height: 36px;
  padding: 0 var(--s3);
  font-size: var(--fs-sm);
}

/* 真鍮ガラスの主CTA(共通クラス)。「注文する」(#order-btn)・アイスシート内の
   「注文する」(#ice-order-btn)・チェックインの主ボタン(.ck-primary)が同じ
   質感を共有する。以前は同じ宣言が2か所に複製されており、3つ目のボタンを足す
   たびにコピーが増えていた(そして #ice-order-btn は取り残されて素の --accent
   ベタ塗りのままだった)。
   body.ambient に閉じ込めないのは、チェックイン画面(#checkin-view)が
   body.ambient を持たないまま同じ夜空の上に出るため。注文画面は常に
   body.ambient なので、スコープを外しても見た目は変わらない。
   角丸はここでは決めない(注文バーの主CTA=--r-md / シート内=999px と場所ごとに
   違うため、各要素側で指定する)。
   .ck-primary をクラス付与ではなくセレクタで合流させているのは、
   auth.js / eventer-login.js の17か所が 'ck-primary block' を組み立てており、
   全箇所に 'glass-cta' を足すと変更範囲が広がるだけで得るものが無いため。 */
.glass-cta,
.checkin-card .ck-primary {
  background: rgba(228, 196, 133, 0.18);
  color: #f6e8cb;
  border: 1px solid rgba(228, 196, 133, 0.6);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.24),
    0 0 20px rgba(228, 196, 133, 0.2),
    0 8px 30px rgba(0, 0, 0, 0.3);
}

@media (hover: hover) {
  .glass-cta:hover:not(:disabled),
  .checkin-card .ck-primary:hover:not(:disabled) {
    background: rgba(228, 196, 133, 0.28);
  }
}

/* 無効時もガラス系で通す。素の button:disabled(--line-strong のベタ塗り)に
   落ちると、シート内の「注文する」だけ質感が変わって別の部品に見える。 */
.glass-cta:disabled,
.checkin-card .ck-primary:disabled {
  background: rgba(255, 255, 255, 0.09);
  color: var(--glass-muted);
  border: 1px solid var(--glass-line);
  box-shadow: none;
  text-shadow: none;
}

.link-ticket {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: var(--s3) 0;
  color: var(--accent-strong);
  font-weight: 700;
  font-size: var(--fs-sm);
  /* <a> は button,.btn の対象外なので個別に(2026-08-12 T1)。 */
  touch-action: manipulation;
}

/* =========================================================================
   Forms & inputs
   ========================================================================= */

input[type="text"],
input[type="password"],
input[type="number"] {
  width: 100%;
  min-height: 46px;
  padding: 0 var(--s3);
  font-family: inherit;
  font-size: var(--fs-base);
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
}

input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

#checkin-form {
  display: flex;
  flex-direction: column;
  gap: var(--s3);
  margin-top: var(--s2);
}

#checkin-form label {
  font-weight: 700;
}

#status {
  margin-top: var(--s4);
}

/* =========================================================================
   Place banner / notices
   ========================================================================= */

.place-header {
  display: flex;
  align-items: center;
  gap: var(--s2);
  background: var(--accent-soft);
  border: 1px solid var(--accent-line);
  border-radius: var(--r-md);
  padding: var(--s3) var(--s4);
  margin: var(--s3) 0 var(--s4);
  font-weight: 700;
  color: var(--accent-strong);
}

.error {
  background: var(--danger-soft);
  border: 1px solid #e9c3bc;
  color: var(--danger-strong);
  border-radius: var(--r-md);
  padding: var(--s4);
  margin-bottom: var(--s4);
}

.notice {
  background: var(--success-soft);
  border: 1px solid #cbe0cf;
  color: var(--success);
  border-radius: var(--r-md);
  padding: var(--s4);
  margin-bottom: var(--s4);
  font-weight: 700;
}

/* =========================================================================
   Menu (customer)
   ========================================================================= */

.category {
  margin: var(--s5) 0 var(--s2);
  font-family: var(--font-serif);
  font-size: var(--fs-lg);
  font-weight: 700;
  color: var(--ink);
  padding-bottom: var(--s2);
  border-bottom: 2px solid var(--accent-line);
}

/* --- 2階層ドリルダウン: 戻る(items ビューのみ) ---------------------------- */
.menu-nav {
  display: flex;
  align-items: center;
  gap: var(--s3);
  margin-bottom: var(--s3);
  padding-bottom: var(--s2);
  border-bottom: 1px solid var(--line);
}

.menu-back {
  flex: none;
  min-height: 38px;
  padding: 0 var(--s3);
  background: var(--surface);
  color: var(--accent-strong);
  border: 1px solid var(--accent-line);
  font-size: var(--fs-sm);
  font-weight: 700;
}

@media (hover: hover) {
  .menu-back:hover:not(:disabled) {
    background: var(--accent-soft);
  }
}

/* --- 大分類タブ(常設・2026-08-12 T16): cats/items 両ビューの先頭に置く。
   横に並べ、幅が入らなければ横スクロール(スクロールバーは他の一覧と同じく隠す)。 */
.menu-tabs {
  display: flex;
  gap: var(--s2);
  margin-bottom: var(--s3);
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.menu-tabs::-webkit-scrollbar { width: 0; height: 0; }

.menu-tab {
  flex: none;
  min-height: 38px;
  padding: 0 var(--s4);
  background: var(--surface);
  color: var(--ink-soft);
  border: 1px solid var(--line-strong);
  font-size: var(--fs-sm);
  font-weight: 700;
}
.menu-tab.is-active {
  background: var(--accent-soft);
  color: var(--accent-strong);
  border-color: var(--accent-line);
}
@media (hover: hover) {
  .menu-tab:hover:not(.is-active) { background: var(--surface-2, rgba(0, 0, 0, 0.03)); }
}

.breadcrumb {
  min-width: 0;
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: var(--fs-base);
  color: var(--ink-soft);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* --- 大分類/中分類 カード(タップでドリルダウン) --------------------------- */
.nav-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s3);
  width: 100%;
  text-align: left;
  min-height: 56px;
  padding: var(--s3) var(--s4);
  margin-bottom: var(--s2);
  background: var(--surface);
  color: var(--ink);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  font-weight: 700;
  font-size: var(--fs-base);
}

@media (hover: hover) {
  .nav-card:hover:not(:disabled) {
    background: var(--accent-soft);
    border-color: var(--accent-line);
  }
}

.nav-card .nav-card-label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.nav-card .nav-card-right {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  flex: none;
}

.nav-card .nav-card-meta {
  color: var(--muted);
  font-size: var(--fs-sm);
  font-weight: 400;
}

.nav-card .chev {
  color: var(--accent-strong);
  font-size: var(--fs-xl);
  line-height: 1;
}

/* --- ご注文ボタン(メニュー初期状態: 畳んだ単一ボタン。タップで大分類一覧へ展開) ---
   .nav-card と同じガラス世界観のまま、最初にここを押すと分かる主役級の大きな一枚。 */
.order-open-btn {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: var(--s2);
  width: 100%;
  min-height: 60px;
  padding: var(--s3) var(--s4);
  background: var(--surface);
  color: var(--ink);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-md);
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: var(--fs-xl);
  letter-spacing: 0.12em;
}
.order-open-btn .order-open-icon { font-size: 1.3rem; line-height: 1; }
.order-open-btn .order-open-chev {
  font-family: var(--font-sans);
  font-weight: 400;
  color: var(--muted);
  margin-left: var(--s1);
}

/* 品目一覧の器。左右スワイプ(2026-08-12 T17・隣接カテゴリ送り)は縦スクロールと
   競合させたくないので pan-y(縦は常にブラウザへ、横は JS 側で preventDefault
   しないため素通り=空振り)。コンテナに manipulation を当てないこと ── ダブル
   タップ拡大無効化(T1)は button/.btn だけに絞る。 */
.menu-list {
  touch-action: pan-y;
}

/* --- 品目行(名前 + 価格 + note + 数量ステッパー + カートに追加) ------------ */
.menu-item {
  display: flex;
  flex-direction: column;
  gap: var(--s2);
  padding: var(--s3) 0;
  border-bottom: 1px solid var(--line);
}

.menu-item .info {
  min-width: 0;
}

.menu-item .name-line {
  display: flex;
  align-items: baseline;
  gap: var(--s2);
  flex-wrap: wrap;
}

.menu-item .name {
  font-weight: 700;
}

.menu-item .cart-badge {
  color: var(--accent-strong);
  font-size: var(--fs-xs);
  font-weight: 700;
}

.menu-item .price {
  color: var(--ink-soft);
  font-size: var(--fs-sm);
  margin-top: 2px;
}

.menu-item .note {
  color: var(--muted);
  font-size: var(--fs-xs);
  margin-top: 2px;
}

.menu-item .controls {
  display: flex;
  align-items: center;
  gap: var(--s3);
}

.menu-item .controls .stepper {
  flex: none;
}

.stepper {
  display: flex;
  align-items: center;
  gap: var(--s1);
}

.stepper button {
  width: 44px;
  min-width: 44px;
  height: 44px;
  padding: 0;
  font-size: var(--fs-xl);
  border-radius: var(--r-sm);
  background: var(--surface);
  color: var(--accent-strong);
  border: 1px solid var(--accent-line);
  /* 「−」(U+2212)と「＋」(U+FF0B)は字形の実測幅が揃わない端末フォントがある
     (特に Android)。tabular-nums + line-height:1 で上下・字幅のブレを抑える
     (2026-08-12 T2)。 */
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

@media (hover: hover) {
  .stepper button:hover:not(:disabled) {
    background: var(--accent-soft);
  }
}

.stepper .qty {
  min-width: 30px;
  text-align: center;
  font-weight: 700;
  font-size: var(--fs-lg);
}

/* Fixed order bar */
.order-bar {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: 0;
  width: 100%;
  max-width: 480px;
  padding: var(--s3) var(--s4) calc(var(--s3) + env(safe-area-inset-bottom));
  /* この紙色の背景はアンビエント以外(現状は無い)の保険。実際の注文画面は body.ambient
     の下でこの上に暗色すりガラス(backdrop-filter)を重ねて上書きする(下記アンビエント節)。 */
  background: rgba(251, 249, 244, 0.98);
  border-top: 1px solid var(--line-strong);
  box-shadow: 0 -4px 16px rgba(28, 26, 21, 0.07);
  /* 席シート(.seat-sheet-panel)と同じ「下から立ち上がる面」の角丸。下端は
     画面端に接しているので上2隅だけ丸める。ambient 側の上書きは色だけなので、
     この1行で両テーマに効く。 */
  border-radius: var(--r-lg) var(--r-lg) 0 0;
}

/* バー内の主CTA。素の button の --r-sm(8px)は角ばって見えるので一段大きくする
   (店長指定)。ambient のガラス上書きは色だけで角丸を触らないため、ここ1か所で
   両テーマに効く。 */
#order-btn {
  border-radius: var(--r-md);
}

body.has-bar {
  padding-bottom: 160px;
}

/* 注文バー内のカート内訳(品目ごとに数量調整・削除・「カートを空にする」)。
   注文確定前に誤タップを是正する導線。品目が多いときはこの領域だけ縦スクロール。 */
.cart-summary {
  margin-bottom: var(--s3);
  padding-bottom: var(--s2);
  border-bottom: 1px solid var(--line);
}

.cart-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s2);
  margin-bottom: var(--s2);
}

.cart-head .cart-title {
  font-weight: 700;
  font-size: var(--fs-sm);
  color: var(--ink-soft);
}

/* カート見出しは開閉トグル(タップで内訳を展開/格納)。内訳が長くてもメニューを
   圧迫しないよう、既定は「カート(N点)」の1行だけを見せる。 */
.cart-head .cart-toggle {
  flex: 1;
  min-width: 0;
  min-height: 34px;
  padding: 0;
  justify-content: flex-start;
  gap: var(--s2);
  background: transparent;
  border: 0;
  color: var(--ink-soft);
  font-size: var(--fs-sm);
  font-weight: 700;
  text-align: left;
}
.cart-toggle .cart-chev {
  flex: none;
  color: var(--accent-strong);
  font-size: var(--fs-xs);
}

/* 汎用 button:hover(濃色ベタ)がトグルに乗らないよう、透明のまま文字色だけ変える */
@media (hover: hover) {
  .cart-head .cart-toggle:hover:not(:disabled) {
    background: transparent;
    color: var(--ink);
  }
  body.ambient .cart-head .cart-toggle:hover:not(:disabled) {
    background: transparent;
    color: var(--glass-text);
  }
}

.cart-head .cart-clear {
  flex: none;
  min-height: 0;
  padding: 6px 12px;
  font-size: var(--fs-xs);
  font-weight: 700;
  /* 小さな補助操作はピル型に。四角い小ボタンは削除系の危険な操作に見える。 */
  border-radius: var(--r-pill);
  background: var(--surface);
  color: var(--accent-strong);
  border: 1px solid var(--accent-line);
}

@media (hover: hover) {
  .cart-head .cart-clear:hover {
    background: var(--accent-soft);
  }
}

.cart-lines {
  display: flex;
  flex-direction: column;
  gap: var(--s2);
  max-height: 34vh;
  overflow-y: auto;
}

.cart-line {
  display: flex;
  align-items: center;
  gap: var(--s2);
}

.cart-line .cart-line-name {
  flex: 1;
  min-width: 0;
  font-size: var(--fs-sm);
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cart-line .cart-line-sub {
  flex: none;
  min-width: 64px;
  text-align: right;
  font-size: var(--fs-sm);
  color: var(--ink-soft);
}

.cart-stepper {
  flex: none;
}

.cart-stepper button {
  width: 34px;
  min-width: 34px;
  height: 34px;
  font-size: var(--fs-lg);
  /* 34px 角の +/- は正方形だと詰まって見える。丸にしてタップ点を明確にする
     (.stepper button の --r-sm を後勝ちで上書き)。 */
  border-radius: 50%;
}

.cart-stepper .qty {
  min-width: 22px;
  font-size: var(--fs-base);
}

.cart-line .cart-remove {
  flex: none;
  width: 34px;
  min-width: 34px;
  height: 34px;
  padding: 0;
  font-size: var(--fs-lg);
  line-height: 1;
  /* 数量ボタンと同じ丸型に揃える(隣り合う 34px 角の操作なので形が違うと不揃い)。 */
  border-radius: 50%;
  background: transparent;
  color: var(--muted);
  border: 1px solid var(--line);
}

@media (hover: hover) {
  .cart-line .cart-remove:hover {
    color: var(--danger);
    border-color: var(--danger);
  }
}

/* =========================================================================
   Ticket (customer)
   ========================================================================= */

.customer-number {
  text-align: center;
  padding: var(--s2) 0;
}

.customer-number .label {
  color: var(--muted);
  font-size: var(--fs-sm);
  letter-spacing: 0.14em;
}

.customer-number .value {
  font-size: var(--fs-3xl);
  font-weight: 800;
  letter-spacing: 0.04em;
  color: var(--ink);
  line-height: 1.1;
}

.customer-number.xl .value {
  font-size: 4.5rem;
  color: var(--accent-strong);
}

#display-name {
  color: var(--ink-soft);
  margin-top: var(--s1);
}

.row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: var(--s2) 0;
}

.row .k {
  color: var(--muted);
}

.row .v {
  font-weight: 700;
}

.totals .row.grand,
.row.grand {
  border-top: 2px solid var(--line-strong);
  margin-top: var(--s2);
  padding-top: var(--s3);
  font-size: var(--fs-xl);
}

.totals .row.grand .v,
.row.grand .v {
  color: var(--accent-strong);
}

.order {
  border-bottom: 1px solid var(--line);
  padding: var(--s3) 0;
}

.order:last-child {
  border-bottom: none;
}

.order-line {
  display: flex;
  justify-content: space-between;
  gap: var(--s3);
  padding: 2px 0;
}

.badge {
  display: inline-block;
  padding: 3px 12px;
  border-radius: var(--r-pill);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.04em;
}

.badge.open {
  background: var(--accent-soft);
  color: var(--accent-strong);
}

.badge.delivered {
  background: var(--success-soft);
  color: var(--success);
}

.badge.cancelled {
  background: var(--paper-sunk);
  color: var(--muted);
  text-decoration: line-through;
}

/* 会計ボタン下の案内(注文がまだ無く会計に進めないとき)。伝票ページは紙UIのまま */
.checkout-hint {
  margin: var(--s2) 0 0;
  text-align: center;
  font-size: var(--fs-sm);
}

.qr-img {
  display: block;
  margin: var(--s4) auto;
  width: 220px;
  max-width: 100%;
  height: auto;
  image-rendering: pixelated;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  padding: var(--s2);
  background: #fff;
}

/* =========================================================================
   Admin — login
   ========================================================================= */

.login-wrap {
  max-width: 380px;
  margin: var(--s8) auto;
}

.login-card {
  display: flex;
  flex-direction: column;
  gap: var(--s3);
}

.login-card h1 {
  text-align: center;
  font-size: var(--fs-xl);
  margin-bottom: var(--s2);
}

/* =========================================================================
   Admin — header & tabs
   ========================================================================= */

.admin-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s4);
  padding: var(--s4) 0 var(--s2);
  flex-wrap: wrap;
}

.admin-header .role {
  font-size: var(--fs-sm);
  color: var(--muted);
  letter-spacing: 0.16em;
}

.tabs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2);
  position: sticky;
  top: 0;
  background: var(--paper);
  padding: var(--s3) 0;
  margin-bottom: var(--s4);
  border-bottom: 1px solid var(--line);
  z-index: 5;
}

.tab {
  background: var(--surface);
  color: var(--ink-soft);
  border: 1px solid var(--line-strong);
  min-height: 42px;
  padding: 0 var(--s4);
  font-weight: 700;
}

.tab:hover:not(.active) {
  background: var(--paper-sunk);
  color: var(--ink);
}

.tab.active {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}

/* =========================================================================
   Admin — kitchen board (要: 遠くからでも一目で読める)
   ========================================================================= */

.kitchen-board {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: var(--s4);
}

.order-card {
  margin-bottom: 0;
  display: flex;
  flex-direction: column;
  gap: var(--s3);
  border-top: 4px solid var(--accent);
  box-shadow: var(--shadow-md);
}

.order-meta {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}

.order-meta .muted {
  font-size: var(--fs-sm);
}

.order-meta .cust {
  font-weight: 800;
  font-size: var(--fs-xl);
  color: var(--ink);
}

.order-place {
  font-family: var(--font-serif);
  font-size: 1.9rem;
  font-weight: 800;
  color: var(--accent-strong);
  line-height: 1.15;
}

.order-items {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: var(--s3) 0;
}

.order-item {
  padding: var(--s1) 0;
  font-size: var(--fs-lg);
  font-weight: 600;
}

.order-actions {
  display: flex;
  gap: var(--s2);
}

.order-actions button {
  flex: 2;
  min-height: 52px;
  font-size: var(--fs-lg);
}

.order-actions .danger {
  flex: 1;
  background: var(--surface);
  color: var(--danger);
  border-color: #e2b8b1;
  font-size: var(--fs-base);
  font-weight: 700;
}

.order-actions .danger:hover:not(:disabled) {
  background: var(--danger-soft);
}

/* =========================================================================
   Admin — data tables
   ========================================================================= */

table.grid {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: var(--s4);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  overflow: hidden;
}

table.grid th,
table.grid td {
  text-align: left;
  padding: var(--s3) var(--s4);
  border-bottom: 1px solid var(--line);
  vertical-align: middle;
}

table.grid tbody tr:last-child td {
  border-bottom: none;
}

table.grid th {
  color: var(--muted);
  font-size: var(--fs-sm);
  font-weight: 700;
  letter-spacing: 0.04em;
  background: var(--paper-sunk);
  border-bottom: 2px solid var(--line-strong);
}

table.grid tr.clickable {
  cursor: pointer;
}

table.grid tr.clickable:hover {
  background: var(--accent-soft);
}

/* Search / add forms */
.search-form,
.field-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2);
  margin-bottom: var(--s4);
  align-items: center;
}

.search-form input,
.field-row input {
  flex: 1;
  width: auto;
  min-width: 120px;
}

.add-form {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: var(--s4);
  margin-bottom: var(--s4);
}

.add-form h2 {
  font-size: var(--fs-base);
  color: var(--ink-soft);
}

/* =========================================================================
   Admin — checkout desk (レシート風)
   ========================================================================= */

.checkout-card {
  max-width: 480px;
}

.co-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--s3);
  margin-bottom: var(--s3);
  padding-bottom: var(--s3);
  border-bottom: 1px dashed var(--line-strong);
}

.co-number {
  font-size: var(--fs-2xl);
  font-weight: 800;
  color: var(--ink);
}

.co-row {
  display: flex;
  justify-content: space-between;
  padding: var(--s2) 0;
  color: var(--ink-soft);
}

/* 会計明細の特典ラベル(イベンターの0円行の理由)。品名の右に小さく添える。 */
.co-perk {
  display: inline-block;
  margin-left: var(--s2);
  padding: 1px var(--s2);
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent-strong);
  font-size: var(--fs-xs);
  white-space: nowrap;
}

.co-grand {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  border-top: 2px solid var(--ink);
  margin-top: var(--s3);
  padding-top: var(--s3);
  font-size: var(--fs-3xl);
  font-weight: 800;
  color: var(--accent-strong);
}

/* 会計画面の割引入力(WP-E)。金額+理由(任意)+適用ボタンを1行に。 */
.co-discount {
  margin-top: var(--s3);
}

.co-discount-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2);
  align-items: center;
}

.co-discount-row input[type="number"] {
  width: 96px;
  flex: none;
}

.co-discount-row input[type="text"] {
  flex: 1 1 140px;
}

.co-note {
  background: var(--accent-soft);
  color: var(--accent-strong);
  border-radius: var(--r-sm);
  padding: var(--s3) var(--s4);
  font-weight: 700;
  font-size: var(--fs-sm);
  margin: var(--s4) 0;
}

.checkout-card h3 {
  margin-top: var(--s4);
  padding-top: var(--s3);
  border-top: 1px dashed var(--line-strong);
  font-size: var(--fs-base);
  color: var(--muted);
}

.checkout-list-title {
  margin-top: var(--s6);
  font-family: var(--font-serif);
  font-size: var(--fs-lg);
}

/* QR thumbnails */
.qr-thumb {
  width: 72px;
  height: 72px;
  image-rendering: pixelated;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fff;
}

/* =========================================================================
   Admin — settings
   ========================================================================= */

.settings-form {
  max-width: 440px;
  display: flex;
  flex-direction: column;
  gap: var(--s3);
}

.settings-form h2 {
  font-family: var(--font-serif);
}

.settings-form label {
  display: flex;
  flex-direction: column;
  gap: var(--s1);
  font-weight: 700;
}

.settings-form .hint {
  font-weight: 400;
  color: var(--muted);
  font-size: var(--fs-sm);
}

/* =========================================================================
   Form controls — select (base) & inline compact
   ========================================================================= */

select {
  width: 100%;
  min-height: 46px;
  padding: 0 var(--s3);
  font-family: inherit;
  font-size: var(--fs-base);
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  cursor: pointer;
}

select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

.type-select {
  min-height: 38px;
  width: auto;
  min-width: 100px;
  padding: 0 var(--s2);
  font-size: var(--fs-sm);
}

input[type="date"],
input[type="month"] {
  width: auto;
  min-height: 42px;
  padding: 0 var(--s2);
  font-family: inherit;
  font-size: var(--fs-sm);
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
}

/* =========================================================================
   Check-in — customer type radios (index)
   ========================================================================= */

.type-choice {
  display: flex;
  gap: var(--s2);
}

.type-choice label {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--s2);
  min-height: 46px;
  padding: 0 var(--s3);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  background: var(--surface);
  font-weight: 700;
  cursor: pointer;
}

.type-choice label:has(input:checked) {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--accent-strong);
}

.type-note {
  color: var(--muted);
  font-size: var(--fs-sm);
  margin: 0;
}

/* =========================================================================
   Admin — cash drawer (レジ金) widget
   ========================================================================= */

.drawer-widget {
  border-top: 4px solid var(--accent);
}

.drawer-widget h2 {
  font-family: var(--font-serif);
  margin-bottom: var(--s3);
}

.drawer-grid {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s5);
  align-items: flex-end;
}

.drawer-field {
  display: flex;
  flex-direction: column;
  gap: var(--s1);
  font-weight: 700;
  font-size: var(--fs-sm);
}

.drawer-input-row {
  display: flex;
  gap: var(--s2);
  align-items: center;
}

.drawer-input-row input {
  width: 150px;
}

.drawer-input-row button {
  min-height: 42px;
}

.drawer-stat {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.drawer-stat .lbl {
  color: var(--muted);
  font-size: var(--fs-sm);
  font-weight: 400;
}

.drawer-stat .val {
  font-weight: 800;
  font-size: var(--fs-xl);
  color: var(--ink);
}

.drawer-stat.accent .val {
  color: var(--accent-strong);
}

/* =========================================================================
   Admin — payment picker (精算)
   ========================================================================= */

.pay-picker {
  margin-top: var(--s4);
  padding-top: var(--s4);
  border-top: 1px dashed var(--line-strong);
}

.pay-picker .pay-title {
  font-size: var(--fs-sm);
  color: var(--muted);
  font-weight: 700;
  margin: 0 0 var(--s2);
}

.pay-methods {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2);
}

.pay-method {
  flex: 1 1 auto;
  min-width: 92px;
  min-height: 46px;
  padding: 0 var(--s3);
  background: var(--surface);
  color: var(--ink-soft);
  border: 1px solid var(--line-strong);
  font-weight: 700;
}

.pay-method:hover:not(.active) {
  background: var(--paper-sunk);
  color: var(--ink);
}

.pay-method.active {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}

.pay-sub {
  margin-top: var(--s3);
}

.pay-sub label {
  display: flex;
  flex-direction: column;
  gap: var(--s1);
  font-weight: 700;
  font-size: var(--fs-sm);
}

.pay-change {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-top: var(--s3);
  padding-top: var(--s2);
  border-top: 1px dashed var(--line);
  font-weight: 700;
}

.pay-change .num {
  font-size: var(--fs-lg);
  color: var(--accent-strong);
}

/* =========================================================================
   Admin — sales / analytics (売上)
   ========================================================================= */

.sales-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--s3);
  margin-bottom: var(--s4);
}

.sales-controls .ctl {
  display: flex;
  flex-direction: column;
  gap: var(--s1);
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--ink-soft);
}

/* inline-flex は中身なりの幅に縮み、ボタンが詰まって「企画中」の3文字目が落ちる。
   親幅いっぱいの flex にして各ボタンに余白を残す。
   ※ コメントはセレクタの外に置く(宣言の直前に挟むと `.seg {` 直後が
      `display: flex;` にならず、CSS の回帰テストが読めなくなる)。 */
.seg {
  display: flex;
  gap: var(--s1);
}

.seg-btn {
  min-height: 42px;
  padding: 0 var(--s4);
  background: var(--surface);
  color: var(--ink-soft);
  border: 1px solid var(--line-strong);
  font-weight: 700;
  /* 3文字ラベルが2行に割れて下が切れるのを防ぐ(タブ廃止後も他の seg に残る)。 */
  white-space: nowrap;
}

.seg-btn:hover:not(.active) {
  background: var(--paper-sunk);
  color: var(--ink);
}

.seg-btn.active {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}

.sales-totals {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s3);
  margin-bottom: var(--s5);
}

.sales-totals .tile {
  flex: 1 1 140px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-sm);
  padding: var(--s3) var(--s4);
}

.sales-totals .tile .lbl {
  color: var(--muted);
  font-size: var(--fs-sm);
}

.sales-totals .tile .val {
  font-weight: 800;
  font-size: var(--fs-xl);
  color: var(--ink);
  margin-top: 2px;
}

.report-table-details { margin-top: var(--s5); }
.report-controls { margin-top: var(--s3); }
.report-kind { flex-wrap: wrap; margin-bottom: var(--s3); }
.report-table-scroll { max-height: 420px; overflow: auto; }
.report-table thead th { position: sticky; top: 0; z-index: 1; background: var(--surface); }
.report-table .num { text-align: right; }
.report-table .report-major td { font-weight: 800; background: var(--paper-sunk); }
.report-table .report-subcategory td:first-child { padding-left: var(--s5); font-weight: 700; }
.report-table .report-item td:first-child { padding-left: var(--s7); }

.chart-block {
  margin-bottom: var(--s6);
}

.chart-block h3 {
  font-family: var(--font-serif);
  font-size: var(--fs-lg);
  margin-bottom: var(--s3);
}

/* Horizontal CSS bar chart ------------------------------------------------ */

.cbars {
  display: flex;
  flex-direction: column;
}

/* 2px 地色ギャップ: rows separated by ground color, bars never touch */
.cbar-row {
  display: flex;
  align-items: center;
  gap: var(--s3);
  margin-bottom: 2px;
}

.cbar-row:last-child {
  margin-bottom: 0;
}

.cbar-name {
  flex: 0 0 96px;
  text-align: right;
  color: var(--ink-soft);
  font-size: var(--fs-sm);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cbar-track {
  flex: 1 1 auto;
  min-width: 40px;
  height: 16px;
  background: var(--paper-sunk);
  border-radius: 2px;
}

/* データ端(右)のみ 4px 角丸、基線側(左)は角丸なし */
.cbar-fill {
  height: 100%;
  background: #9c6b1c;
  border-radius: 0 4px 4px 0;
}

.cbar-fill.cash {
  background: #9c6b1c;
}

.cbar-fill.elec {
  background: #2f62b5;
}

/* 値ラベルはインク色(系列色の文字は使わない) */
.cbar-val {
  flex: 0 0 88px;
  text-align: right;
  color: var(--ink);
  font-size: var(--fs-sm);
}

.chart-legend {
  display: flex;
  gap: var(--s4);
  margin-bottom: var(--s3);
  font-size: var(--fs-sm);
  color: var(--ink-soft);
}

.legend-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.legend-swatch {
  width: 12px;
  height: 12px;
  border-radius: 3px;
  display: inline-block;
}

.legend-swatch.cash { background: #9c6b1c; }
.legend-swatch.elec { background: #2f62b5; }

.csv-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--s3);
}

.csv-controls .ctl {
  display: flex;
  flex-direction: column;
  gap: var(--s1);
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--ink-soft);
}

/* =========================================================================
   Admin — sales 強化(今日の売上 / 期間プリセット / 縦棒チャート)
   ========================================================================= */

/* 今日の売上(最上部・常時) */
.today-sales {
  margin-bottom: var(--s5);
  padding: var(--s3) var(--s4) var(--s4);
  background: var(--accent-soft);
  border: 1px solid var(--accent-line);
  border-radius: var(--r-md);
}

.today-sales > h3 {
  font-family: var(--font-serif);
  font-size: var(--fs-base);
  color: var(--accent-strong);
  margin-bottom: var(--s3);
}

.today-sales .sales-totals {
  margin-bottom: 0;
}

/* 期間の手動指定(副次UI) */
.sales-controls .range-manual {
  flex: 1 1 100%;
  font-size: var(--fs-sm);
  color: var(--ink-soft);
}

.range-manual > summary {
  cursor: pointer;
  list-style: none;
  padding: var(--s2) 0;
  color: var(--accent-strong);
  font-weight: 700;
}

.range-manual > summary::-webkit-details-marker { display: none; }
.range-manual > summary::before { content: "▸ "; }
.range-manual[open] > summary::before { content: "▾ "; }

.range-manual-body {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--s3);
  margin-top: var(--s2);
}

/* 併設する小さな表 */
table.grid.mini {
  max-width: 380px;
}

table.grid.mini th,
table.grid.mini td {
  padding: var(--s2) var(--s3);
  font-size: var(--fs-sm);
}

#pay-rows tr.sum td {
  font-weight: 800;
  color: var(--ink);
  border-top: 2px solid var(--line-strong);
}

/* 無効化した CSV リンク(対象月が空のとき) */
.btn.disabled {
  pointer-events: none;
  opacity: 0.45;
}

/* 縦棒チャート(期間推移・単一系列=真鍮) --------------------------------- */
/* 規則: 棒細め / 上端のみ4px角丸 / 隣接2px地色ギャップ / 値ラベルはインク色 /
   単一系列は凡例なし / 罫線は基線のみ控えめ / title属性ツールチップ */
.vbars {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  height: 200px;
  padding-top: 18px;
  margin-bottom: var(--s3);
  border-bottom: 1px solid var(--line);
  overflow-x: auto;
}

.vbar-col {
  flex: 1 1 0;
  min-width: 20px;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.vbar-track {
  width: 100%;
  height: calc(100% - 20px);
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.vbar-fill {
  position: relative;
  width: 100%;
  max-width: 28px;
  min-height: 0;
  background: #9c6b1c;
  border-radius: 4px 4px 0 0;
}

.vbar-val {
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  margin-bottom: 3px;
  font-size: 0.68rem;
  color: var(--ink);
  white-space: nowrap;
  line-height: 1;
}

.vbars.dense .vbar-val { display: none; }

.vbar-label {
  margin-top: var(--s1);
  font-size: var(--fs-xs);
  color: var(--muted);
  white-space: nowrap;
  line-height: 1.1;
}

.vbars.dense .vbar-label {
  font-size: 0.62rem;
}

/* 未来スロット(棒なし)はラベルを薄く見せて非活性を示す */
.vbar-col.future .vbar-label {
  opacity: 0.5;
}

/* =========================================================================
   Customer — 全画面星空 + チェックインカード(index)
   ========================================================================= */

/* 星空は背景層。pointer-events:none で前面のフォーム操作を一切妨げない */
.sky-layer {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: #070d20;
}

.sky-layer canvas {
  display: block;
  width: 100%;
  height: 100%;
}

/* =========================================================================
   Ambient: チェックイン後も夜空を除去せず背後に常駐(減光・穏やか)。
   注文UIは星空の上に重なる半透明の紙(不透明度で透かす。常時アニメの上での
   毎フレーム再ラスタライズを避けるため backdrop-filter は使わない)。動くのは背景の星だけ。
   ========================================================================= */

/* アンビエント時は本文背景を透過し、背後の星空(減光)を見せる */
body.ambient {
  background: transparent;
}

/* 注文UIを星空層(z-index:0)より前面へ(独自スタッキング文脈) */
body.ambient #order-view {
  position: relative;
  z-index: 1;
}

body.ambient .order-bar {
  z-index: 2;
}

/* 署名演出: 注文UIを opacity 0 → 遅延付きで静かにフェードイン。
   星の減速(フェーズ2)に重なるよう 0.5s 遅らせる。カード自体は動かさない */
body.ambient #order-view.reveal-anim {
  opacity: 0;
}

body.ambient #order-view.reveal-anim.revealed {
  opacity: 1;
  /* 流星群の完了(finalize)後に revealed が付くので、遅延は短い「ひと呼吸」のみ */
  transition: opacity 0.8s ease 0.15s;
}

@media (prefers-reduced-motion: reduce) {
  body.ambient #order-view.reveal-anim,
  body.ambient #order-view.reveal-anim.revealed {
    opacity: 1;
    transition: none;
  }
}

/* -------------------------------------------------------------------------
   アンビエント注文UI = 星空に浮かぶ「すりガラス」。夜のバーの窓越しに星を見る趣。
   紙(不透明)をやめ、暗色の半透明パネル + backdrop-filter で背後の星を透かす。
   文字は明色(light-on-glass)に。上端の微かなハイライト(inset)で「星明かりに
   縁が光るガラス」を全パネル共通の署名にする。真鍮の差し色と明朝はブランドとして継続。
   実装方針(元コードの GPU/電池コストへの配慮を踏まえる):
   ・#menu は素の入れ物にし、ガラス面は nav-card / menu-item / menu-nav 等の「板」側に
     持たせる(入れ子の backdrop-filter を避け、ブラー領域を必要な板だけに限定)。
   ・base 規則は不透明寄りの暗色=backdrop-filter 非対応環境の堅牢な代替(可読性は同等)。
     @supports で初めて半透明化 + ブラーへ格上げする。
   ・-webkit-backdrop-filter を併記(iOS Safari / LINE アプリ内ブラウザ対応)。
   ------------------------------------------------------------------------- */

/* 明色テキスト/縁/ガラスのトークン(アンビエント注文UI + チェックインで共有) */
body.ambient,
.checkin-view {
  --glass-text: #f2efe6;                       /* 本文(温白) */
  --glass-soft: rgba(242, 239, 230, 0.74);     /* 副次テキスト */
  --glass-muted: rgba(242, 239, 230, 0.6);     /* 補助テキスト */
  --glass-brass: #e4c485;                       /* 暗色ガラス上で読める明るい真鍮 */
  --glass-line: rgba(255, 255, 255, 0.16);      /* 罫線(すりガラスの縁) */
  --glass-line-lit: rgba(255, 255, 255, 0.26);  /* 強い縁 */
  --glass-fill: rgba(18, 24, 44, 0.85);         /* 板の代替色(不透明寄り) */
  --glass-sub: rgba(255, 255, 255, 0.08);       /* ガラス上の小面(±・オプション等) */
  --glass-edge:                                 /* 星明かりの縁 = 上リム + 下影の面取り */
    inset 0 1px 0 rgba(255, 255, 255, 0.24),
    inset 0 -1px 0 rgba(0, 0, 0, 0.10);
  --glass-shadow: 0 8px 24px rgba(0, 0, 0, 0.24);
}

/* #menu は素の入れ物(パネル化しない)。板は各要素側で持つ */
body.ambient #menu {
  background: transparent;
  border: 0;
  padding: 0;
}

/* 空の上に直接載る文字(見出し・伝票リンク)は読める明色に */
body.ambient #order-view > h2 {
  color: var(--glass-text);
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.55);
}
body.ambient .link-ticket {
  color: var(--glass-brass);
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.55);
}

/* --- 常時ヘッダー(〇〇様 / 番号 / 席) --- */
body.ambient .visit-header {
  background: var(--glass-fill);
  border: 1px solid var(--glass-line);
  box-shadow: var(--glass-edge);
}
body.ambient .visit-header .vh-name { color: var(--glass-text); }
body.ambient .visit-header .vh-type {
  background: rgba(255, 255, 255, 0.1);
  border-color: var(--glass-line-lit);
  color: var(--glass-brass);
}
body.ambient .visit-header .vh-member {
  background: rgba(255, 255, 255, 0.1);
  border-color: var(--glass-line-lit);
  color: var(--glass-brass);
}
body.ambient .visit-header .vh-num { color: var(--glass-brass); }
body.ambient .visit-header .vh-place { color: var(--glass-soft); }
body.ambient .visit-header .vh-charge { color: var(--glass-soft); }
body.ambient .visit-header .vh-stats { color: var(--glass-soft); }
body.ambient .visit-header .vh-plan-name { color: var(--glass-brass); }
body.ambient .visit-header .vh-plan-badge {
  background: rgba(228, 196, 133, 0.16);
  border-color: var(--glass-line-lit);
  color: var(--glass-brass);
}

/* --- 大分類 / 中分類カード(星の上に浮くガラス板) --- */
body.ambient .nav-card {
  background: var(--glass-fill);
  color: var(--glass-text);
  border: 1px solid var(--glass-line);
  border-radius: var(--r-md);
  box-shadow: var(--glass-edge);
}
@media (hover: hover) {
  body.ambient .nav-card:hover:not(:disabled) {
    background:
      linear-gradient(155deg,
        rgba(255, 255, 255, 0.11) 0%,
        rgba(255, 255, 255, 0.03) 40%,
        rgba(255, 255, 255, 0) 72%),
      rgba(228, 196, 133, 0.12);               /* ホバー = 真鍮色の透過光 */
    border-color: rgba(228, 196, 133, 0.40);
  }
}
body.ambient .nav-card .nav-card-meta { color: var(--glass-muted); }
body.ambient .nav-card .chev { color: var(--glass-brass); }

/* ご注文ボタン(アンビエント): 「注文する」ボタンと同系統の真鍮ガラス+柔らかな発光で
   星空の下でも最初に目が行く一枚にする。 */
body.ambient .order-open-btn {
  background: rgba(228, 196, 133, 0.16);
  color: #f6e8cb;
  border: 1px solid rgba(228, 196, 133, 0.55);
  border-radius: var(--r-md);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.22),
    0 0 22px rgba(228, 196, 133, 0.18),
    0 8px 30px rgba(0, 0, 0, 0.3);
}
@media (hover: hover) {
  body.ambient .order-open-btn:hover {
    background: rgba(228, 196, 133, 0.26);
    border-color: rgba(228, 196, 133, 0.7);
  }
}
body.ambient .order-open-btn .order-open-icon {
  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.4));
}
body.ambient .order-open-btn .order-open-chev { color: var(--glass-soft); }

/* --- パンくずバー(← 戻る + 現在地) --- */
body.ambient .menu-nav {
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: var(--s2) 0;
  box-shadow: none;
}
body.ambient .menu-back {
  background: var(--glass-sub);
  color: var(--glass-brass);
  border: 1px solid var(--glass-line-lit);
}
@media (hover: hover) {
  body.ambient .menu-back:hover:not(:disabled) { background: rgba(255, 255, 255, 0.16); }
}
body.ambient .menu-tab {
  background: var(--glass-sub);
  color: var(--glass-soft);
  border: 1px solid var(--glass-line-lit);
}
body.ambient .menu-tab.is-active {
  background: rgba(228, 196, 133, 0.16);
  color: #f6e8cb;
  border-color: rgba(228, 196, 133, 0.55);
}
@media (hover: hover) {
  body.ambient .menu-tab:hover:not(.is-active) { background: rgba(255, 255, 255, 0.16); }
}
body.ambient .breadcrumb { color: var(--glass-text); }

/* --- 品目行(それぞれが小さなガラス板) --- */
/* 品目一覧はN枚の板ではなく「1枚のガラス板」に集約し、行はヘアライン罫線で
   刻む。積み重なる紺のスラブ感を消し、空が1枚の板越しに読める。 */
body.ambient .menu-list {
  background: var(--glass-fill);   /* backdrop-filter 非対応環境の代替(@supportsで半透明化) */
  border: 1px solid var(--glass-line);
  border-radius: var(--r-md);
  box-shadow: var(--glass-edge), var(--glass-shadow);
  overflow: hidden;
}
body.ambient .menu-item {
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--glass-line);
  border-radius: 0;
  padding: var(--s3) var(--s4);
  margin: 0;
  box-shadow: none;
}
body.ambient .menu-item:last-child { border-bottom: 0; }
body.ambient .menu-item .name { color: var(--glass-text); }
body.ambient .menu-item .cart-badge { color: var(--glass-brass); }
body.ambient .menu-item .price { color: var(--glass-soft); }
body.ambient .menu-item .note { color: var(--glass-muted); }

/* ガラスが澄んだ分、明るい星が背後を過るときだけ効く可読性ガード。 */
body.ambient .menu-item .price,
body.ambient .menu-item .note,
body.ambient .nav-card .nav-card-meta,
body.ambient .cart-line .cart-line-sub,
body.ambient .visit-header .vh-place,
body.ambient .visit-header .vh-charge,
body.ambient .visit-header .vh-stats,
body.ambient .visit-header .vh-plan-name,
body.ambient .breadcrumb {
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

/* --- 夜空の書体: 読みもの(見出し/分類/品名/パンくず)は明朝系で上品に。
   可読性はウェイト(600)と字間・既存の可読性ガード(text-shadow)で担保し、
   操作ボタンと数字は従来のゴシック/等幅のまま迷いなく押せるようにする。 --- */
body.ambient #order-view > h2,
body.ambient .nav-card .nav-card-label,
body.ambient .menu-item .name,
body.ambient .breadcrumb,
body.ambient .visit-header .vh-name,
.seat-sheet-title {
  font-family: var(--font-serif);
}
body.ambient .nav-card .nav-card-label {
  font-weight: 600;
  letter-spacing: 0.08em;
}
body.ambient .menu-item .name {
  font-weight: 600;
  letter-spacing: 0.04em;
}
body.ambient #order-view > h2 {
  font-weight: 500;
  letter-spacing: 0.22em;
}
body.ambient .breadcrumb { letter-spacing: 0.08em; }

/* オプション多数でも崩れないよう、行のコントロールは折り返し可に */
.menu-item .controls { flex-wrap: wrap; }

/* ステッパー(±)= ガラス上の小面 */
body.ambient .stepper button {
  background: var(--glass-sub);
  color: var(--glass-brass);
  border: 1px solid var(--glass-line-lit);
}
@media (hover: hover) {
  body.ambient .stepper button:hover:not(:disabled) { background: rgba(255, 255, 255, 0.16); }
}
body.ambient .stepper button:disabled {
  color: var(--glass-muted);
  background: rgba(255, 255, 255, 0.04);
}
body.ambient .stepper .qty { color: var(--glass-text); }

/* --- 飲み方オプションのボタン群(狭幅で折り返す小さなガラスのコースター) --- */
.opt-btns {
  flex: 1 1 100%;              /* ステッパーの下へ回り込み、全幅を使って折り返す */
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2);
}
.opt-btn {
  flex: 1 1 auto;
  min-width: 84px;
  min-height: 44px;
  padding: 0 var(--s3);
  font-size: var(--fs-sm);
  background: var(--glass-sub);
  color: var(--glass-brass);
  border: 1px solid var(--glass-line-lit);
}
@media (hover: hover) {
  .opt-btn:hover:not(:disabled) { background: rgba(255, 255, 255, 0.16); }
}
.opt-btn:disabled {
  color: var(--glass-muted);
  background: rgba(255, 255, 255, 0.04);
  border-color: var(--glass-line);
}

/* --- 下部の注文バー + カート内訳 --- */
body.ambient .order-bar {
  background: rgba(12, 17, 34, 0.92);          /* base = 不透明寄りの代替 */
  border-top: 1px solid var(--glass-line-lit);
  box-shadow: var(--glass-edge), 0 -6px 24px rgba(0, 0, 0, 0.4);
}

/* --- 押下の微フィードバック: 90ms のわずかな縮み(GPUコストほぼゼロ) --- */
body.ambient .nav-card, body.ambient .menu-back, body.ambient .menu-tab,
body.ambient .stepper button,
body.ambient .opt-btn, body.ambient #order-btn,
.seat-option, .seat-chip, .order-open-btn {
  transition: background var(--dur-enter) ease, border-color var(--dur-enter) ease,
    transform var(--dur-press) var(--ease-out);
}
.nav-card:active:not(:disabled),
.order-open-btn:active:not(:disabled),
.seat-chip:active,
#order-btn:active:not(:disabled) { transform: scale(0.985); }
.menu-back:active, .menu-tab:active, .opt-btn:active:not(:disabled),
.seat-option:active, .cart-toggle:active, .cart-clear:active, .cart-remove:active,
.stepper button:active:not(:disabled), .dawn-back-btn:active { transform: scale(0.94); }
@media (prefers-reduced-motion: reduce) {
  .nav-card:active, .order-open-btn:active, .seat-chip:active, #order-btn:active,
  .menu-back:active, .menu-tab:active, .opt-btn:active, .seat-option:active,
  .cart-toggle:active, .cart-clear:active, .cart-remove:active, .stepper button:active,
  .dawn-back-btn:active { transform: none; }
}

/* --- ドリルダウンの入場: 180ms のフェード + 4px の浮き上がり(操作時のみ) --- */
@keyframes menu-in {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: none; }
}
body.ambient #menu.view-in { animation: menu-in var(--dur-enter) var(--ease-out) both; }
@media (prefers-reduced-motion: reduce) {
  body.ambient #menu.view-in { animation: none; }
}

/* --- 注文するの周りを回る小さな金の星(注文可能になったときだけ灯る) --- */
body.ambient #order-btn { position: relative; }
.order-orbit {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  pointer-events: none;
  overflow: visible;
  opacity: 0;
  transition: opacity 0.5s var(--ease-out);
  z-index: 1;
}
.order-star {
  position: absolute;
  top: 0; left: 0;
  width: 12px; height: 12px;
  margin: -6px 0 0 -6px;
  background: radial-gradient(closest-side, #fff, #e4c485 55%, rgba(228, 196, 133, 0) 100%);
  clip-path: polygon(50% 0%, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0% 50%, 39% 39%);
  filter: drop-shadow(0 0 5px rgba(228, 196, 133, 0.9));
  opacity: 0.9;
  will-change: transform;
}
@media (prefers-reduced-motion: reduce) {
  .order-orbit { display: none; }
}

body.ambient .cart-summary { border-bottom-color: var(--glass-line); }
body.ambient .cart-head .cart-title { color: var(--glass-soft); }
body.ambient .cart-head .cart-toggle {
  background: transparent;
  color: var(--glass-soft);
}
body.ambient .cart-toggle .cart-chev { color: var(--glass-brass); }
body.ambient .cart-head .cart-clear {
  background: var(--glass-sub);
  color: var(--glass-brass);
  border: 1px solid var(--glass-line-lit);
}
@media (hover: hover) {
  body.ambient .cart-head .cart-clear:hover { background: rgba(255, 255, 255, 0.16); }
}
body.ambient .cart-line .cart-line-name { color: var(--glass-text); }
body.ambient .cart-line .cart-line-sub { color: var(--glass-soft); }
body.ambient .cart-line .cart-remove {
  color: var(--glass-muted);
  background: transparent;
  border: 1px solid var(--glass-line);
}
@media (hover: hover) {
  body.ambient .cart-line .cart-remove:hover {
    color: #f0a89c;
    border-color: rgba(240, 130, 110, 0.6);
  }
}

/* --- 通知 / エラー(色付きのガラス面。意味色は保ちつつ暗色ガラス上で読める明度に) --- */
body.ambient .notice {
  background: rgba(30, 70, 48, 0.5);
  border: 1px solid rgba(120, 200, 150, 0.4);
  color: #d7efdb;
}
body.ambient .error,
.checkin-view .error {
  background: rgba(120, 40, 32, 0.42);
  border: 1px solid rgba(220, 130, 115, 0.45);
  color: #f4c9c0;
}

/* すりガラス本体: backdrop-filter 対応環境でのみ半透明化 + ブラー(未対応は上の
   不透明寄り base が代替)。-webkit- 併記で iOS Safari / LINE アプリ内ブラウザに対応。 */
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  body.ambient .visit-header,
  body.ambient .nav-card,
  body.ambient .menu-list {
    /* 淡い白のシーン(上方から光を受けるガラス) + ごく薄い夜色。ブラーは 12px に
       抑えて背後の星を点として残し、brightness で透過光を持ち上げる。 */
    background:
      linear-gradient(155deg,
        rgba(255, 255, 255, 0.07) 0%,
        rgba(255, 255, 255, 0.02) 40%,
        rgba(255, 255, 255, 0) 72%),
      rgba(26, 36, 66, 0.10);
    -webkit-backdrop-filter: blur(7px) saturate(135%) brightness(1.16);
    backdrop-filter: blur(7px) saturate(135%) brightness(1.16);
  }
  body.ambient .order-bar {
    background: rgba(12, 17, 34, 0.26);
    -webkit-backdrop-filter: blur(10px) saturate(130%) brightness(1.10);
    backdrop-filter: blur(10px) saturate(130%) brightness(1.10);
  }
  body.ambient .notice {
    background: rgba(30, 70, 48, 0.34);
    -webkit-backdrop-filter: blur(14px) saturate(130%);
    backdrop-filter: blur(14px) saturate(130%);
  }
  body.ambient .error,
  .checkin-view .error {
    background: rgba(120, 40, 32, 0.3);
    -webkit-backdrop-filter: blur(14px) saturate(130%);
    backdrop-filter: blur(14px) saturate(130%);
  }
}

/* チェックイン前: 星空の上に浮かぶ中央カード */
.checkin-view {
  position: relative;
  z-index: 1;              /* 星空(z-index:0)より前面 */
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--s5) 0;
}

/* チェックインカードも星空の上に浮くすりガラス(注文UIと同じ質感で統一)。
   base は不透明寄りの暗色(代替)、@supports で半透明 + ブラーへ格上げ。 */
.checkin-card {
  width: 100%;
  max-width: 380px;
  margin-bottom: 0;
  background: rgba(18, 24, 44, 0.9);
  border: 1px solid var(--glass-line-lit);
  box-shadow: var(--glass-edge), 0 10px 40px rgba(0, 0, 0, 0.45);
  color: var(--glass-text);
}

@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .checkin-card {
    background: rgba(18, 24, 44, 0.24);
    -webkit-backdrop-filter: blur(12px) saturate(140%) brightness(1.08);
    backdrop-filter: blur(12px) saturate(140%) brightness(1.08);
  }
}

/* カード内の文字/入力は暗色ガラスに合わせて明色化(paper 前提の ink 色を上書き) */
.checkin-card .checkin-title { color: var(--glass-text); }
.checkin-card .checkin-subtitle { color: var(--glass-muted); }
.checkin-card .checkin-brand .brand-mark { color: var(--glass-brass); }
.checkin-card label { color: var(--glass-text); }
.checkin-card .type-note { color: var(--glass-muted); }

.checkin-card input[type="text"] {
  background: rgba(255, 255, 255, 0.08);
  color: var(--glass-text);
  border: 1px solid var(--glass-line-lit);
}
.checkin-card input[type="text"]::placeholder { color: var(--glass-muted); }
.checkin-card input:focus {
  border-color: var(--glass-brass);
  box-shadow: 0 0 0 3px rgba(228, 196, 133, 0.22);
}

.checkin-card .type-choice label {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--glass-line);
  color: var(--glass-soft);
}
.checkin-card .type-choice label:has(input:checked) {
  border-color: var(--glass-brass);
  background: rgba(228, 196, 133, 0.18);
  color: var(--glass-brass);
}

.checkin-brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  margin-bottom: var(--s2);
  text-align: center;
}

.checkin-brand .brand-mark {
  color: var(--accent);
}

.checkin-title {
  font-family: var(--font-serif);
  font-size: var(--fs-xl);
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--ink);
}

.checkin-subtitle {
  font-size: var(--fs-xs);
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--muted);
}

#checkin-error {
  margin-bottom: 0;
}

/* 席料の事前開示(チェックインカード内・auth.js が /api/config から埋める)。
   夜空ガラスに馴染む控えめな面。真鍮のラベル + 淡色の本文で「読めるが出しゃばらない」。 */
.checkin-seat-charge {
  padding: var(--s2) var(--s3);
  border-radius: var(--r-sm);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--glass-line);
  text-align: center;
}
.checkin-seat-charge-main {
  margin: 0;
  font-size: var(--fs-sm);
  line-height: 1.5;
  color: var(--glass-soft);
}
.checkin-seat-charge-label {
  margin-right: 6px;
  font-weight: 700;
  color: var(--glass-brass);
}
.checkin-seat-charge-note {
  margin: 3px 0 0;
  font-size: var(--fs-xs);
  color: var(--glass-muted);
}

/* チェックイン後の常時ヘッダー(〇〇様 / 番号 / 区分 / 現在の席) */
.visit-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s2) var(--s3);
  background: var(--accent-soft);
  border: 1px solid var(--accent-line);
  border-radius: var(--r-md);
  padding: var(--s3) var(--s4);
  margin: var(--s4) 0 var(--s3);
}

.visit-header .vh-main {
  display: flex;
  align-items: baseline;
  gap: var(--s2);
  min-width: 0;
}

.visit-header .vh-name {
  font-family: var(--font-serif);
  font-size: var(--fs-lg);
  font-weight: 700;
  color: var(--ink);
}

.visit-header .vh-type {
  flex: none;
  font-size: var(--fs-xs);
  font-weight: 700;
  padding: 2px 10px;
  border-radius: var(--r-pill);
  background: var(--surface);
  border: 1px solid var(--accent-line);
  color: var(--accent-strong);
}

/* 友の会バッジ(要求18)。区分(vh-type)とは別軸なので success で分ける。 */
.visit-header .vh-member {
  flex: none;
  font-size: var(--fs-xs);
  font-weight: 700;
  padding: 2px 10px;
  border-radius: var(--r-pill);
  background: var(--success-soft);
  border: 1px solid var(--success);
  color: var(--success);
}

.visit-header .vh-meta {
  display: flex;
  align-items: center;
  gap: var(--s3);
  font-size: var(--fs-sm);
  font-weight: 700;
}

.visit-header .vh-num {
  color: var(--accent-strong);
  font-family: var(--font-mono);
}

.visit-header .vh-place {
  color: var(--ink-soft);
}

.visit-header .vh-charge {
  color: var(--ink-soft);
}

/* 在店時間・現在会計額の行。名前より小さく控えめに。自前の行(flex-basis:100%)へ
   折り返し、tabular-nums で桁幅を固定して値のティックでレイアウトを揺らさない。 */
.visit-header .vh-stats {
  flex-basis: 100%;
  width: 100%;
  font-size: var(--fs-xs);
  color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
}

/* プラン名 + 特典ドリンク残数の行(統計行の下・自前の行で折り返す)。バッジの有無で
   行数が変わらないよう常に1行で、値のティックでも他要素を揺らさない。 */
.visit-header .vh-plan {
  flex-basis: 100%;
  width: 100%;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--s2);
  font-size: var(--fs-xs);
}
.visit-header .vh-plan-name {
  font-weight: 700;
  color: var(--accent-strong);
}
.visit-header .vh-plan-badge {
  padding: 1px 8px;
  border-radius: var(--r-pill);
  background: var(--accent-soft);
  border: 1px solid var(--accent-line);
  color: var(--accent-strong);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* =========================================================================
   Customer — 星のきらめきタップ演出 / すりガラス席ピッカー・シート / 品切れ表示
   夜空 + すりガラス(暗色半透明・blur・真鍮 #e4c485 の差し色・星明かりの縁 inset)の
   デザイン言語を踏襲。
   ========================================================================= */

/* --- タップで弾ける小さな星(最前面・pointer-events:none で操作を妨げない) --- */
.sparkle-layer {
  position: fixed;
  inset: 0;
  z-index: 9999;             /* 席シート(60)より前面。タップは透過。 */
  pointer-events: none;
  overflow: hidden;
}

/* 4方向にとがった星形(clip-path)。星明かりの淡い金白 or 真鍮でグローさせる。 */
.sparkle {
  position: absolute;
  width: 12px;
  height: 12px;
  margin: -6px 0 0 -6px;     /* 中心をタップ点に合わせる */
  background: radial-gradient(closest-side,
    #ffffff, #ffe9c2 55%, rgba(228, 196, 133, 0) 100%);
  clip-path: polygon(50% 0%, 61% 39%, 100% 50%, 61% 61%,
    50% 100%, 39% 61%, 0% 50%, 39% 39%);
  filter: drop-shadow(0 0 4px rgba(228, 196, 133, 0.9));
  opacity: 0;
  transform: translate(0, 0) scale(0) rotate(0deg);
  will-change: transform, opacity;
  animation: sparkle-pop var(--sd, 0.5s) cubic-bezier(0.2, 0.7, 0.3, 1) forwards;
}
.sparkle.brass {
  background: radial-gradient(closest-side,
    #ffe9c2, #e4c485 55%, rgba(228, 196, 133, 0) 100%);
  filter: drop-shadow(0 0 4px rgba(228, 196, 133, 0.85));
}

/* 放射方向へ短く散り、瞬いて消える(~600ms)。粒ごとに --dx/--dy/--sc/--rot/--sd。 */
@keyframes sparkle-pop {
  0% {
    opacity: 0;
    transform: translate(0, 0) scale(0.2) rotate(0deg);
  }
  30% {
    opacity: 1;
    transform: translate(calc(var(--dx) * 0.5), calc(var(--dy) * 0.5))
      scale(var(--sc, 1)) rotate(calc(var(--rot, 0deg) * 0.5));
  }
  100% {
    opacity: 0;
    transform: translate(var(--dx), var(--dy)) scale(0) rotate(var(--rot, 0deg));
  }
}

/* 動きを控える設定では演出そのものを表示しない(JS 側でも生成を抑止) */
@media (prefers-reduced-motion: reduce) {
  .sparkle-layer { display: none; }
}

/* --- 席チップ(常時表示の小さなピル。タップで席シートを開く。裁定14) ---
   未選択の間は「お席を選ぶ」、選ぶと席名(+area)に切り替わる。[hidden] は
   メニュー読み込み前(#order-bar 自体が隠れている間)の初期状態だけに使う。 */
.seat-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  max-width: 100%;
  min-height: 34px;
  margin-bottom: var(--s2);
  padding: var(--s1) var(--s3);
  border-radius: 999px;
  background: rgba(28, 35, 58, 0.9);        /* 席名の可読性のため不透明寄りで固定 */
  color: var(--glass-text, var(--ink));
  border: 1px solid var(--glass-line-lit, var(--line-strong));
  font-weight: 700;
  font-size: var(--fs-sm);
}
/* class の display 指定が UA の [hidden]{display:none} に勝つため明示的に隠す。 */
.seat-chip[hidden] { display: none; }
@media (hover: hover) {
  .seat-chip:hover {
    background: rgba(40, 48, 74, 0.92);
    border-color: rgba(228, 196, 133, 0.4);
  }
}
.seat-chip .seat-chip-icon { flex: none; font-size: 1rem; line-height: 1; }
.seat-chip .seat-chip-value {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.seat-chip .seat-chip-edit {
  flex: none;
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--glass-brass, var(--accent-strong));
  letter-spacing: 0.04em;
}

/* --- 席選択のすりガラス・シート(全画面オーバーレイ + ボトムシート) --- */
.seat-sheet {
  position: fixed;
  inset: 0;
  z-index: 60;               /* order-bar(2)より前面 */
  display: flex;
  align-items: flex-end;     /* モバイルはボトムシート風に下から */
  justify-content: center;
}

.seat-sheet-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(5, 8, 16, 0.55);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  animation: seat-fade 0.2s ease;
}

.seat-sheet-panel {
  position: relative;
  width: 100%;
  max-width: 480px;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
  padding: var(--s4) var(--s4) calc(var(--s4) + env(safe-area-inset-bottom));
  background: rgba(18, 24, 44, 0.92);       /* base = 不透明寄り(未対応環境の代替) */
  border: 1px solid var(--glass-line-lit);
  border-radius: var(--r-lg) var(--r-lg) 0 0;
  box-shadow: var(--glass-edge), 0 -10px 40px rgba(0, 0, 0, 0.5);
  color: var(--glass-text);
  outline: none;
  /* ばね感のある立ち上がり(y>1 のベジェで僅かなオーバーシュート)。 */
  animation: seat-rise 0.34s cubic-bezier(0.34, 1.42, 0.64, 1);
}
@media (prefers-reduced-motion: reduce) {
  .seat-sheet-panel, .seat-sheet-backdrop { animation: none; }
}

@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .seat-sheet-panel {
    background: rgba(18, 24, 44, 0.34);
    -webkit-backdrop-filter: blur(14px) saturate(140%) brightness(1.08);
    backdrop-filter: blur(14px) saturate(140%) brightness(1.08);
  }
}

@keyframes seat-rise {
  /* 拡縮を混ぜると backdrop-filter を持つパネルが毎フレーム再ラスタライズされ、
     入場がカクつく。ばね感はオーバーシュートの bezier(.seat-sheet-panel の
     animation)が受け持つので、ここは translateY だけにする。 */
  from { transform: translateY(26px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}
@keyframes seat-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .seat-sheet-panel,
  .seat-sheet-backdrop { animation: none; }
}

.seat-sheet-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s2);
  margin-bottom: var(--s3);
}
.seat-sheet-title {
  margin: 0;
  font-family: var(--font-serif);
  font-size: var(--fs-lg);
  font-weight: 700;
  color: var(--glass-text);
}
.seat-sheet-close {
  flex: none;
  min-height: 40px;
  min-width: 40px;
  padding: 0;
  font-size: var(--fs-xl);
  line-height: 1;
  border-radius: var(--r-sm);
  background: var(--glass-sub);
  color: var(--glass-brass);
  border: 1px solid var(--glass-line-lit);
}
@media (hover: hover) {
  .seat-sheet-close:hover:not(:disabled) { background: rgba(255, 255, 255, 0.16); }
}

.seat-sheet-body {
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: var(--s4);
  /* 縦フレックスの子は min-height:auto のままだと縮まず、パネルの
     max-height:80vh を超えた分がスクロールにならず切られる。
     .chat-sheet-body だけが自前で指定していて、そこだけ正しく動いていた。
     flex-grow はあえて足さない。既定の flex-shrink:1 で縮めば足り、grow を足すと
     品数が少ない日にパネルが不必要に伸びるため。代わりにこの領域には余剰スペースが
     生まれない(高さ=中身の高さ)ので、下端の装飾は中身に直接当たる。 */
  min-height: 0;
  /* 既定のスクロールバーは glass 調のシート上で明るく浮くため隠し、指/ホイール
     のスクロールだけで動かす。消えると「まだ下に続く」手がかりが無くなるので、
     パネル下端のフェード(.seat-sheet-panel::after)で代替する。 */
  scrollbar-width: none;              /* Firefox */
  -ms-overflow-style: none;           /* 旧 Edge */
  overscroll-behavior: contain;       /* 端まで来ても背景を巻き込まない */
}
.seat-sheet-body::-webkit-scrollbar { width: 0; height: 0; }

/* 「まだ下に続く」手がかり。スクロールバーを隠した代わりの視覚的な合図。
   pointer-events: none で、下に隠れたボタンのタップを妨げない。
   チャットシートは下端に入力欄を固定しており、フェードが被るため除外する
   (.chat-sheet-panel も .seat-sheet-panel を併せ持つ ─ index.html:156)。 */
.seat-sheet-panel:not(.chat-sheet-panel)::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 28px;
  pointer-events: none;
  background: linear-gradient(to top,
    rgba(10, 14, 30, 0.55) 0%, rgba(10, 14, 30, 0) 100%);
  border-bottom-left-radius: inherit;
  border-bottom-right-radius: inherit;
}
.seat-sheet-empty {
  color: var(--glass-muted);
  text-align: center;
  padding: var(--s5) 0;
}

.seat-group-label {
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--glass-brass);
  letter-spacing: 0.04em;
  margin-bottom: var(--s2);
}
.seat-group-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: var(--s2);
}
/* 席選択だけは「1」〜「25」の数字なので列幅を詰め、25席を1画面に収める。
   同じ .seat-group-grid は一杯シートの受取人ボタンでも使い回しており、
   あちらは氏名が入るので 120px が要る。素のクラスは触らず、席側にだけ
   修飾クラスを足して上書きする。 */
.seat-group-grid.seat-num-grid {
  grid-template-columns: repeat(auto-fill, minmax(64px, 1fr));
}
.seat-option {
  min-height: 48px;
  padding: 0 var(--s3);
  text-align: center;
  border-radius: var(--r-md);
  background: var(--glass-sub);
  color: var(--glass-text);
  border: 1px solid var(--glass-line-lit);
  font-weight: 700;
  font-size: var(--fs-base);
}
@media (hover: hover) {
  .seat-option:hover:not(:disabled) { background: rgba(255, 255, 255, 0.14); }
}
.seat-option.is-selected {
  background: rgba(228, 196, 133, 0.18);
  border-color: var(--glass-brass);
  color: var(--glass-brass);
}

/* 背景スクロールをシート表示中は抑止(任意の保険) */
body.seat-sheet-open { overflow: hidden; }

/* =========================================================================
   Customer — 「一杯を贈る」導線 + シート(席シートの glass 資産を再利用)
   ・導線: 伝票リンク近くの glass カード(真鍮の透過光で「特別な一手」に見せる)。
   ・シート本体は #seat-sheet の .seat-sheet* / .seat-group* / .seat-option を流用し、
     追加要素(メッセージ欄・金額説明・確認/完了)だけをここで定義する。
   ========================================================================= */

/* --- 導線カード(注文画面の伝票リンク近く) --- */
.treat-entry {
  display: flex;
  align-items: center;
  gap: var(--s3);
  width: 100%;
  min-height: 52px;
  margin: 0 0 var(--s4);
  padding: var(--s3) var(--s4);
  text-align: left;
  border-radius: var(--r-md);
  background: var(--surface);              /* 非アンビエント時の代替(通常は下の glass) */
  color: var(--accent-strong);
  border: 1px solid var(--accent-line);
  font-weight: 700;
  font-size: var(--fs-base);
}
.treat-entry .treat-entry-icon {
  flex: none;
  font-size: var(--fs-xl);
  line-height: 1;
}
.treat-entry .treat-entry-label {
  flex: 1;
  min-width: 0;
}
.treat-entry .treat-entry-chev {
  flex: none;
  font-size: var(--fs-xl);
  line-height: 1;
  color: var(--accent);
}

/* アンビエント(星空)上の導線: 真鍮の透過光を帯びたガラス板。ブランドの明朝は継続。 */
body.ambient .treat-entry {
  background:
    linear-gradient(155deg,
      rgba(228, 196, 133, 0.16) 0%,
      rgba(228, 196, 133, 0.05) 52%,
      rgba(255, 255, 255, 0) 100%),
    var(--glass-fill);
  color: var(--glass-brass);
  border: 1px solid rgba(228, 196, 133, 0.42);
  box-shadow: var(--glass-edge);
}
body.ambient .treat-entry .treat-entry-label {
  font-family: var(--font-serif);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.55);
}
body.ambient .treat-entry .treat-entry-chev { color: var(--glass-brass); }
@media (hover: hover) {
  body.ambient .treat-entry:hover {
    background:
      linear-gradient(155deg,
        rgba(228, 196, 133, 0.24) 0%,
        rgba(228, 196, 133, 0.08) 52%,
        rgba(255, 255, 255, 0) 100%),
      var(--glass-fill);
    border-color: rgba(228, 196, 133, 0.6);
  }
}
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  body.ambient .treat-entry {
    background:
      linear-gradient(155deg,
        rgba(228, 196, 133, 0.16) 0%,
        rgba(228, 196, 133, 0.05) 52%,
        rgba(255, 255, 255, 0) 100%),
      rgba(26, 36, 66, 0.10);
    -webkit-backdrop-filter: blur(7px) saturate(135%) brightness(1.16);
    backdrop-filter: blur(7px) saturate(135%) brightness(1.16);
  }
}

/* --- 受け取った一杯の導線 + 案内バナー(§2.4) --- */
/* 骨格・余白・ホバーは .treat-entry をそのまま継承する(4枚目のコピーを作らない)。
   「贈る」と「受け取る」が縦に並ぶので、縁だけ少し強くして取り違えを防ぐ。 */
.credit-entry { border-color: var(--accent); }
body.ambient .credit-entry { border-color: rgba(228, 196, 133, 0.62); }
.credit-entry[hidden] { display: none; }

.treat-credit-banner {
  margin: 0 0 var(--s3);
  padding: var(--s2) var(--s3);
  border-radius: var(--r-md);
  border: 1px solid var(--accent-line);
  background: var(--surface);
  color: var(--accent-strong);
  font-size: var(--fs-sm);
  font-weight: 700;
}
body.ambient .treat-credit-banner {
  background: var(--glass-fill);
  border: 1px solid rgba(228, 196, 133, 0.42);
  color: var(--glass-brass);
  box-shadow: var(--glass-edge);
}
.treat-credit-banner[hidden] { display: none; }

/* アプリ内ブラウザ/スキャンビューワの誘導バナー(2026-08-12 T18)。閉じられる
   (誤検知しても注文を妨げないフェイルオープン)。treat-credit-banner と同系の
   質感(通常/ambient 両対応)。 */
.ephemeral-banner {
  display: flex;
  align-items: center;
  gap: var(--s3);
  margin: 0 0 var(--s3);
  padding: var(--s3);
  border-radius: var(--r-md);
  border: 1px solid var(--accent-line);
  background: var(--surface);
  color: var(--ink);
  font-size: var(--fs-sm);
}
body.ambient .ephemeral-banner {
  background: var(--glass-fill);
  border: 1px solid rgba(228, 196, 133, 0.42);
  color: var(--glass-text);
  box-shadow: var(--glass-edge);
}
.ephemeral-banner[hidden] { display: none; }
.ephemeral-banner-text {
  flex: 1 1 auto;
  margin: 0;
}
.ephemeral-banner-actions {
  flex: none;
  display: flex;
  align-items: center;
  gap: var(--s2);
}
.ephemeral-banner-btn {
  flex: none;
  min-height: 36px;
  padding: 0 var(--s3);
  font-size: var(--fs-xs);
  font-weight: 700;
  border-radius: var(--r-pill);
  background: var(--accent-soft);
  color: var(--accent-strong);
  border: 1px solid var(--accent-line);
}
.ephemeral-banner-close {
  flex: none;
  width: 28px;
  height: 28px;
  min-height: 28px;
  padding: 0;
  background: transparent;
  border: none;
  color: inherit;
  font-size: var(--fs-base);
  line-height: 1;
}

/* --- シート内: メッセージ欄(任意) --- */
.treat-field {
  display: flex;
  flex-direction: column;
}
.treat-message {
  width: 100%;
  min-height: 84px;
  padding: var(--s3);
  font-family: inherit;
  font-size: var(--fs-base);
  line-height: 1.5;
  color: var(--glass-text);
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid var(--glass-line-lit);
  border-radius: var(--r-sm);
  resize: vertical;
}
.treat-message::placeholder { color: var(--glass-muted); }
.treat-message:focus {
  outline: none;
  border-color: var(--glass-brass);
  box-shadow: 0 0 0 3px rgba(228, 196, 133, 0.18);
}

/* --- シート内: 金額説明(送信前に必ず明示) --- */
.treat-amount-note {
  margin: 0;
  padding: var(--s3);
  text-align: center;
  border-radius: var(--r-sm);
  background: rgba(228, 196, 133, 0.1);
  border: 1px solid rgba(228, 196, 133, 0.28);
  color: var(--glass-brass);
  font-weight: 700;
  font-size: var(--fs-sm);
}
.treat-amount-note .num { font-size: var(--fs-base); }

/* --- シート内: 一杯 / スパチャ の切り替えと金額入力(裁定12) --- */
.treat-mode-tabs {
  display: flex;
  gap: var(--s2);
  margin-bottom: var(--s3);
}

.treat-mode-tab {
  flex: 1 1 0;
  padding: var(--s2) var(--s3);
  border-radius: var(--r-sm);
  border: 1px solid rgba(255, 255, 255, 0.22);
  background: rgba(255, 255, 255, 0.06);
  color: inherit;
  font-weight: 700;
}

.treat-mode-tab.is-selected {
  background: rgba(228, 196, 133, 0.16);
  border-color: rgba(228, 196, 133, 0.5);
  color: var(--glass-brass);
}

.treat-amount-input {
  width: 100%;
  margin-top: var(--s2);
  padding: var(--s2) var(--s3);
  border-radius: var(--r-sm);
  border: 1px solid rgba(255, 255, 255, 0.22);
  background: rgba(255, 255, 255, 0.06);
  color: inherit;
  text-align: center;
}

/* 公開チャットの「誰でも一杯」受け取りボタン(🥂ボタンと同じ見た目) */
.chat-claim-btn { margin-left: var(--s2); }

/* --- シート内: 確認ステップ --- */
.treat-confirm-lead {
  margin: 0;
  text-align: center;
  font-family: var(--font-serif);
  font-size: var(--fs-lg);
  font-weight: 700;
  color: var(--glass-text);
}
.treat-confirm-lead .treat-recipient,
.treat-success-title .treat-recipient {
  color: var(--glass-brass);
}
.treat-msg-preview {
  padding: var(--s3);
  border-radius: var(--r-sm);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--glass-line);
  color: var(--glass-soft);
  font-size: var(--fs-sm);
  line-height: 1.5;
  white-space: pre-wrap;
  word-break: break-word;
}

/* 送信/戻る/続けて贈る/閉じるの行 */
.treat-actions {
  display: flex;
  gap: var(--s2);
  margin-top: var(--s1);
}
.treat-actions .treat-send-btn { flex: 2; }
.treat-actions .treat-back-btn { flex: 1; }

/* 副次アクション(戻る・続けて贈る)= glass のゴースト。主(贈る・閉じる)は真鍮ベタ。 */
.treat-back-btn {
  background: var(--glass-sub);
  color: var(--glass-brass);
  border: 1px solid var(--glass-line-lit);
}
@media (hover: hover) {
  .treat-back-btn:hover:not(:disabled) { background: rgba(255, 255, 255, 0.16); }
}

/* --- シート内: 完了表示 --- */
.treat-success {
  text-align: center;
  padding: var(--s3) 0 var(--s1);
}
.treat-success-emoji {
  font-size: 2.4rem;
  line-height: 1;
}
.treat-success-title {
  margin: var(--s3) 0 var(--s2);
  font-family: var(--font-serif);
  font-size: var(--fs-xl);
  font-weight: 700;
  color: var(--glass-text);
}
.treat-success-sub {
  margin: 0;
  color: var(--glass-soft);
  font-size: var(--fs-sm);
}

/* =========================================================================
   Customer — 「今夜のチャット」導線 + シート(席/一杯シートの glass 資産を再利用)
   ・導線: 伝票リンク近くの glass カード(一杯=真鍮に対し、こちらは星明かりの
     ニュートラルなガラスで「もう一つの入口」として静かに置く)。
   ・シート本体は #seat-sheet の .seat-sheet* を流用し、チャット向けの縦レイアウト
     (メッセージ一覧が伸び、下部に入力欄を固定)と行/バッジ/入力だけをここで定義する。
   ========================================================================= */

/* --- 導線カード(注文画面の伝票リンク近く) --- */
.chat-entry {
  display: flex;
  align-items: center;
  gap: var(--s3);
  width: 100%;
  min-height: 52px;
  margin: 0 0 var(--s4);
  padding: var(--s3) var(--s4);
  text-align: left;
  border-radius: var(--r-md);
  background: var(--surface);              /* 非アンビエント時の代替(通常は下の glass) */
  color: var(--accent-strong);
  border: 1px solid var(--accent-line);
  font-weight: 700;
  font-size: var(--fs-base);
}
.chat-entry .chat-entry-icon {
  flex: none;
  font-size: var(--fs-xl);
  line-height: 1;
}
.chat-entry .chat-entry-label {
  flex: 1;
  min-width: 0;
}
.chat-entry .chat-entry-chev {
  flex: none;
  font-size: var(--fs-xl);
  line-height: 1;
  color: var(--accent);
}
/* 今夜のチャットの未読バッジ。導線ボタン右端(シェブロンの左)に小さく置く。
   0件なら hidden 属性で消える。1〜99+ の短い数字を真鍮のピルで示す。 */
.chat-entry .chat-unread-badge,
.credit-entry .chat-unread-badge {
  flex: none;
  min-width: 20px;
  padding: 2px 7px;
  border-radius: var(--r-pill);
  font-size: var(--fs-xs);
  font-weight: 700;
  line-height: 1.35;
  text-align: center;
  color: #fff;
  background: var(--accent-strong);
}
.chat-entry .chat-unread-badge[hidden],
.credit-entry .chat-unread-badge[hidden] { display: none; }
/* アンビエント(星空)上では暗色ガラスに映える真鍮のピルにする。 */
body.ambient .chat-entry .chat-unread-badge,
body.ambient .credit-entry .chat-unread-badge {
  color: #241a06;
  background: var(--glass-brass);
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.45);
}

/* アンビエント(星空)上の導線: 星明かりのニュートラルなガラス板(nav-card 系の質感)。
   一杯シートの真鍮カードと差別化し、二枚が同じ色で並ばないようにする。 */
body.ambient .chat-entry {
  background:
    linear-gradient(155deg,
      rgba(255, 255, 255, 0.07) 0%,
      rgba(255, 255, 255, 0.02) 40%,
      rgba(255, 255, 255, 0) 72%),
    var(--glass-fill);
  color: var(--glass-text);
  border: 1px solid var(--glass-line-lit);
  box-shadow: var(--glass-edge);
}
body.ambient .chat-entry .chat-entry-label {
  font-family: var(--font-serif);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.55);
}
body.ambient .chat-entry .chat-entry-icon,
body.ambient .chat-entry .chat-entry-chev { color: var(--glass-brass); }
@media (hover: hover) {
  body.ambient .chat-entry:hover {
    background:
      linear-gradient(155deg,
        rgba(255, 255, 255, 0.11) 0%,
        rgba(255, 255, 255, 0.03) 40%,
        rgba(255, 255, 255, 0) 72%),
      var(--glass-fill);
    border-color: var(--glass-line-lit);
  }
}
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  body.ambient .chat-entry {
    background:
      linear-gradient(155deg,
        rgba(255, 255, 255, 0.07) 0%,
        rgba(255, 255, 255, 0.02) 40%,
        rgba(255, 255, 255, 0) 72%),
      rgba(26, 36, 66, 0.10);
    -webkit-backdrop-filter: blur(7px) saturate(135%) brightness(1.16);
    backdrop-filter: blur(7px) saturate(135%) brightness(1.16);
  }
}

/* --- シート: メッセージ一覧が伸び、下部に入力欄を固定する縦レイアウト --- */
/* .seat-sheet-panel(max-height:80vh)より高い固定高にし、会話に十分な縦幅を確保。
   ソース順で後置のため .chat-sheet-panel が席シートの高さ指定に勝つ。 */
.chat-sheet-panel {
  height: 86vh;
  max-height: 86vh;
}
/* iOS Safari の vh はURLバーを含む「大きい方」の高さなので、vh のままだと
   バーが出ている間はシートが画面より高くなり、下端の入力欄がバーの裏へ入る。
   dvh(実際に見えている高さ)が使える環境ではそちらを優先する。 */
@supports (height: 86dvh) {
  .chat-sheet-panel {
    height: 86dvh;
    max-height: 86dvh;
  }
}

/* 読み返し中に届いた発言の合図。押すと最下部へ降りる。一覧と入力欄の間に
   置くので、縦フレックスの中では縮ませない。 */
.chat-new {
  flex: none;
  align-self: center;
  min-height: 32px;
  margin-top: var(--s2);
  padding: 0 var(--s3);
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--glass-brass);
  background: rgba(228, 196, 133, 0.18);
  border: 1px solid var(--glass-line-lit);
  border-radius: var(--r-pill);
}
/* 一覧は残り高を埋めて自身の中でスクロール(min-height:0 で flex 子の収縮を許可)。
   overflow-y とスクロールバー非表示は .seat-sheet-body(併記クラス)から効く。 */
.chat-sheet-body {
  flex: 1 1 auto;
  min-height: 0;
  gap: var(--s3);
  padding-bottom: var(--s2);
  overscroll-behavior: contain;
}

/* --- メッセージ行 --- */
.chat-msg {
  display: flex;
  flex-direction: column;
  gap: var(--s1);
}
.chat-msg-head {
  display: flex;
  align-items: baseline;
  gap: var(--s2);
}
.chat-author {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: var(--fs-sm);
  color: var(--glass-text);
  word-break: break-word;
}
.chat-badge {
  flex: none;
  font-size: var(--fs-xs);
  font-weight: 700;
  line-height: 1;
  padding: 3px 7px;
  border-radius: var(--r-pill);
  border: 1px solid var(--glass-line-lit);
}
.chat-badge-staff {
  color: var(--glass-brass);
  background: rgba(228, 196, 133, 0.14);
  border-color: rgba(228, 196, 133, 0.4);
}
.chat-badge-eventer {
  color: #cdd8ff;
  background: rgba(150, 170, 255, 0.14);
  border-color: rgba(150, 170, 255, 0.42);
}
.chat-time {
  flex: none;
  margin-left: auto;
  font-size: var(--fs-xs);
  color: var(--glass-muted);
  white-space: nowrap;
}
.chat-msg-body {
  font-size: var(--fs-base);
  line-height: 1.5;
  color: var(--glass-text);
  white-space: pre-wrap;      /* 改行を保持 */
  word-break: break-word;
}
/* 本文中の URL(index.js の linkifyInto が作る <a>)。長いURLでもスマホ幅で
   横に溢れないよう任意位置で折り返す。色は暗色ガラス上で読める真鍮。 */
.chat-link {
  color: var(--glass-brass, var(--accent-strong));
  text-decoration: underline;
  text-underline-offset: 2px;
  word-break: break-all;
  overflow-wrap: anywhere;
}
.chat-link:focus-visible {
  outline: 2px solid var(--glass-text, #f2efe6);
  outline-offset: 2px;
  border-radius: 2px;
}

/* --- 入力欄(下部固定)+送信 --- */
.chat-form {
  display: flex;
  flex-direction: column;
  gap: var(--s2);
  margin-top: var(--s3);
  padding-top: var(--s3);
  border-top: 1px solid var(--glass-line);
}
.chat-input-row {
  display: flex;
  align-items: flex-end;
  gap: var(--s2);
}
.chat-input {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 46px;
  max-height: 120px;
  padding: var(--s3);
  font-family: inherit;
  font-size: var(--fs-base);
  line-height: 1.4;
  color: var(--glass-text);
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid var(--glass-line-lit);
  border-radius: var(--r-sm);
  resize: none;
  /* chatAutoGrow が 120px で頭打ちにするため、長文を打つとここにスクロールバーが
     出る。glass 調のシート上では明るく浮いて悪目立ちするので、メッセージ一覧
     (.seat-sheet-body)と同じ3点セットで隠す。overflow は auto のまま残す:
     hidden にするとキャレットが下端から出たときに追従しなくなる。 */
  overflow-y: auto;
  scrollbar-width: none;              /* Firefox */
  -ms-overflow-style: none;           /* 旧 Edge */
}
.chat-input::-webkit-scrollbar { width: 0; height: 0; }
.chat-input::placeholder { color: var(--glass-muted); }
.chat-input:focus {
  outline: none;
  border-color: var(--glass-brass);
  box-shadow: 0 0 0 3px rgba(228, 196, 133, 0.18);
}
.chat-send-btn {
  flex: none;
  min-height: 46px;
  padding: 0 var(--s4);
  background: rgba(228, 196, 133, 0.18);
  color: #f6e8cb;
  border: 1px solid rgba(228, 196, 133, 0.6);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.24);
  font-weight: 700;
}
@media (hover: hover) {
  .chat-send-btn:hover:not(:disabled) { background: rgba(228, 196, 133, 0.28); }
}
.chat-send-btn:disabled {
  background: rgba(255, 255, 255, 0.09);
  color: var(--glass-muted);
  border: 1px solid var(--glass-line);
  text-shadow: none;
  box-shadow: none;
}
.chat-send-btn:active:not(:disabled) { transform: scale(0.96); }
@media (prefers-reduced-motion: reduce) {
  .chat-send-btn:active { transform: none; }
}
.chat-error { margin: 0; }

/* --- 自分の発言の控えめな識別(名前の後に「(自分)」) --- */
.chat-self-tag {
  flex: none;
  font-size: var(--fs-xs);
  color: var(--glass-muted);
  font-weight: 400;
}

/* --- 各メッセージ行の🥂ボタン(他のお客さんに一杯を贈る) ---
   夜空/glass に馴染む控えめな真鍮ピル。ヘッダ右端に置き、行の可読性を損なわない。
   baseline 揃えのヘッダ内でも中央に見えるよう align-self:center。 */
.chat-treat-btn {
  flex: none;
  align-self: center;
  margin-left: var(--s2);
  display: inline-flex;
  align-items: center;
  gap: 2px;
  min-height: 30px;
  padding: 5px 10px;
  font-size: var(--fs-xs);
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  color: var(--glass-brass);
  background: rgba(228, 196, 133, 0.12);
  border: 1px solid rgba(228, 196, 133, 0.42);
  border-radius: var(--r-pill);
}
@media (hover: hover) {
  .chat-treat-btn:hover { background: rgba(228, 196, 133, 0.22); }
}
.chat-treat-btn:active { transform: scale(0.96); }
@media (prefers-reduced-motion: reduce) {
  .chat-treat-btn:active { transform: none; }
}

/* --- 送信完了フィードバック(入力欄の上に数秒表示) --- */
.chat-treat-feedback {
  margin-top: var(--s3);
  padding: var(--s3);
  text-align: center;
  border-radius: var(--r-sm);
  background: rgba(228, 196, 133, 0.14);
  border: 1px solid rgba(228, 196, 133, 0.4);
  color: var(--glass-brass);
  font-weight: 700;
  font-size: var(--fs-sm);
}
.chat-treat-feedback-name { color: var(--glass-text); }

/* --- 客→客の一杯 確認パネル(入力欄と入れ替わる) --- */
.chat-treat {
  display: flex;
  flex-direction: column;
  gap: var(--s2);
  margin-top: var(--s3);
  padding-top: var(--s3);
  border-top: 1px solid var(--glass-line);
}
.chat-treat-lead {
  margin: 0;
  text-align: center;
  font-family: var(--font-serif);
  font-size: var(--fs-base);
  font-weight: 700;
  color: var(--glass-text);
}
.chat-treat-name { color: var(--glass-brass); }
.chat-treat-note {
  margin: 0;
  padding: var(--s3);
  text-align: center;
  border-radius: var(--r-sm);
  background: rgba(228, 196, 133, 0.1);
  border: 1px solid rgba(228, 196, 133, 0.28);
  color: var(--glass-brass);
  font-weight: 700;
  font-size: var(--fs-xs);
  line-height: 1.5;
}
.chat-treat-msg {
  width: 100%;
  min-height: 56px;
  padding: var(--s3);
  font-family: inherit;
  font-size: var(--fs-base);
  line-height: 1.5;
  color: var(--glass-text);
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid var(--glass-line-lit);
  border-radius: var(--r-sm);
  resize: none;
}
.chat-treat-msg::placeholder { color: var(--glass-muted); }
.chat-treat-msg:focus {
  outline: none;
  border-color: var(--glass-brass);
  box-shadow: 0 0 0 3px rgba(228, 196, 133, 0.18);
}
.chat-treat-error { margin: 0; }
.chat-treat-actions {
  display: flex;
  gap: var(--s2);
}
.chat-treat-actions .chat-treat-send { flex: 2; }
.chat-treat-actions .chat-treat-cancel { flex: 1; }
/* 主(贈る)= 真鍮ベタ。副(やめる)= glass ゴースト。一杯シートの流儀に合わせる。 */
.chat-treat-send {
  min-height: 46px;
  background: rgba(228, 196, 133, 0.18);
  color: #f6e8cb;
  border: 1px solid rgba(228, 196, 133, 0.6);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.24);
  font-weight: 700;
}
@media (hover: hover) {
  .chat-treat-send:hover:not(:disabled) { background: rgba(228, 196, 133, 0.28); }
}
.chat-treat-send:disabled {
  background: rgba(255, 255, 255, 0.09);
  color: var(--glass-muted);
  border: 1px solid var(--glass-line);
  text-shadow: none;
  box-shadow: none;
}
.chat-treat-cancel {
  min-height: 46px;
  background: var(--glass-sub);
  color: var(--glass-brass);
  border: 1px solid var(--glass-line-lit);
  font-weight: 700;
}
@media (hover: hover) {
  .chat-treat-cancel:hover:not(:disabled) { background: rgba(255, 255, 255, 0.16); }
}
.chat-treat-cancel:disabled { color: var(--glass-muted); }

/* --- 品切れ品目(グレーアウト・非操作・名前/価格は読める) --- */
body.ambient .menu-item.sold-out {
  opacity: 0.6;
  filter: saturate(0.35);
}
body.ambient .menu-item.sold-out .name { color: var(--glass-soft); }
.menu-item .soldout-badge {
  flex: none;
  font-size: var(--fs-xs);
  font-weight: 700;
  padding: 1px 8px;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid var(--glass-line-lit);
  color: var(--glass-soft);
  letter-spacing: 0.04em;
}

/* =========================================================================
   Customer — 「今週のアイス!」導線(note 連載への外部リンク)
   ・一杯/チャット導線と同じファミリ(アイコン + ラベル + シェブロン)。差別化のため
     アンビエントでは冷たいミントのガラス(真鍮=贈る / ニュートラル=チャット と分ける)。
   ========================================================================= */
.ice-entry {
  display: flex;
  align-items: center;
  gap: var(--s3);
  width: 100%;
  min-height: 52px;
  margin: 0 0 var(--s4);
  padding: var(--s3) var(--s4);
  text-align: left;
  text-decoration: none;
  border-radius: var(--r-md);
  background: var(--surface);              /* 非アンビエント時の代替(通常は下の glass) */
  color: var(--accent-strong);
  border: 1px solid var(--accent-line);
  font-weight: 700;
  font-size: var(--fs-base);
}
.ice-entry .ice-entry-icon {
  flex: none;
  font-size: var(--fs-xl);
  line-height: 1;
}
.ice-entry .ice-entry-label {
  flex: 1;
  min-width: 0;
}
.ice-entry .ice-entry-chev {
  flex: none;
  font-size: var(--fs-xl);
  line-height: 1;
  color: var(--accent);
}
/* アンビエント(星空)上の導線: 冷たいミントの透過光を帯びたガラス板。 */
body.ambient .ice-entry {
  background:
    linear-gradient(155deg,
      rgba(150, 224, 210, 0.15) 0%,
      rgba(150, 224, 210, 0.05) 52%,
      rgba(255, 255, 255, 0) 100%),
    var(--glass-fill);
  color: var(--glass-text);
  border: 1px solid rgba(150, 224, 210, 0.4);
  box-shadow: var(--glass-edge);
}
body.ambient .ice-entry .ice-entry-label {
  font-family: var(--font-serif);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.55);
}
body.ambient .ice-entry .ice-entry-chev { color: rgba(174, 232, 220, 0.95); }
@media (hover: hover) {
  body.ambient .ice-entry:hover {
    background:
      linear-gradient(155deg,
        rgba(150, 224, 210, 0.22) 0%,
        rgba(150, 224, 210, 0.08) 52%,
        rgba(255, 255, 255, 0) 100%),
      var(--glass-fill);
    border-color: rgba(150, 224, 210, 0.58);
  }
}
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  body.ambient .ice-entry {
    background:
      linear-gradient(155deg,
        rgba(150, 224, 210, 0.15) 0%,
        rgba(150, 224, 210, 0.05) 52%,
        rgba(255, 255, 255, 0) 100%),
      rgba(26, 36, 66, 0.10);
    -webkit-backdrop-filter: blur(7px) saturate(135%) brightness(1.16);
    backdrop-filter: blur(7px) saturate(135%) brightness(1.16);
  }
}

/* =========================================================================
   Customer — 補助導線(メニュー下): 当店Wi-Fi 情報シート + 本日の資料(外部)
   ・注文の主役ではないので、贈る/チャット導線より一段控えめな小さめ2ボタン。
   ・Wi-Fi 情報シートは #seat-sheet の glass 資産を流用(値の行 + コピー)だけ足す。
   ========================================================================= */
.util-row {
  display: flex;
  gap: var(--s2);
  /* 上マージン必須: ご注文ボタン(#menu 直下)と密着して「重なって見える」ため。 */
  margin: var(--s4) 0;
}
.util-btn {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--s2);
  min-height: 44px;
  padding: var(--s2) var(--s3);
  text-align: center;
  text-decoration: none;
  border-radius: var(--r-md);
  background: var(--surface);
  color: var(--ink-soft);
  border: 1px solid var(--line-strong);
  font-weight: 600;
  font-size: var(--fs-sm);
}
.util-btn .util-btn-icon {
  flex: none;
  font-size: var(--fs-base);
  line-height: 1;
}
.util-btn .util-btn-label { min-width: 0; }
@media (hover: hover) {
  .util-btn:hover { background: var(--surface-2, rgba(0, 0, 0, 0.03)); }
}
/* アンビエント(星空)上では控えめなガラス小片(導線カードより弱く)。 */
body.ambient .util-btn {
  background: var(--glass-sub);
  color: var(--glass-soft);
  border: 1px solid var(--glass-line-lit);
}
body.ambient .util-btn .util-btn-label {
  font-family: var(--font-serif);
  letter-spacing: 0.04em;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
}
body.ambient .util-btn .util-btn-icon { color: var(--glass-brass); }
@media (hover: hover) {
  body.ambient .util-btn:hover { background: rgba(255, 255, 255, 0.14); }
}

/* --- 「今後のイベント」カレンダーシート内(#events-sheet) ---------------------
   .seat-sheet の glass 資産の上に、月グリッドだけを足す。7列固定なので幅は
   1fr ずつ。375px でも崩れないよう、マスの余白と字送りを最小限にしている
   (375px - body の左右 var(--s4)×2 - パネル padding ×2 ≒ 311px / 7列 ≒ 44px)。 */
.cal-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s2);
}
.cal-nav-btn {
  flex: none;
  min-width: 44px;
  min-height: 44px;
  padding: 0;
  font-size: var(--fs-lg);
  line-height: 1;
  border-radius: var(--r-sm);
  background: var(--glass-sub);
  color: var(--glass-brass);
  border: 1px solid var(--glass-line-lit);
}
/* :not(:disabled) は詳細度のため(共通規則 button:hover:not(:disabled) に負けると
   真鍮のベタ塗りになる ── .dawn-back-btn:hover と同じ理由)。 */
@media (hover: hover) {
  .cal-nav-btn:hover:not(:disabled) { background: rgba(255, 255, 255, 0.14); }
}
.cal-month {
  flex: 1 1 auto;
  text-align: center;
  font-family: var(--font-serif);
  font-size: var(--fs-lg);
  font-weight: 700;
  color: var(--glass-text);
}

.cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
}
.cal-weekday {
  padding: var(--s1) 0;
  text-align: center;
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--glass-muted);
}
.cal-weekday.is-sun { color: #f0b7ae; }   /* 日曜(暗色ガラス上で読める淡い紅) */
.cal-weekday.is-sat { color: #a9c6ea; }   /* 土曜(同じく淡い藍) */

.cal-cell {
  min-height: 46px;
  padding: 2px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid transparent;
  overflow: hidden;
}
.cal-cell.is-pad {
  background: transparent;   /* 月初の余白マス(前月ぶん)は枠も出さない */
}
.cal-day {
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--glass-soft);
  text-align: center;
}
/* イベントのある日は縁と塗りで分かるようにする(色だけに頼らず、下に名前も出る)。 */
.cal-cell.has-events {
  background: rgba(228, 196, 133, 0.14);
  border-color: var(--glass-line-lit);
}
/* 今日は真鍮の枠 + 日付を真鍮に(イベントの有無と両立する)。 */
.cal-cell.is-today {
  border-color: var(--glass-brass);
}
.cal-cell.is-today .cal-day { color: var(--glass-brass); }

.cal-event {
  margin-top: 2px;
  padding: 2px 3px;
  border-radius: 4px;
  background: rgba(10, 14, 30, 0.45);
  font-size: 10px;
  line-height: 1.25;
  /* 名前が長くてもマスを押し広げない(はみ出す分は折り返して縦に伸びる)。 */
  word-break: break-word;
  overflow-wrap: anywhere;
}
.cal-event-name {
  display: block;
  color: var(--glass-text);
  font-weight: 700;
}
.cal-event-who {
  display: block;
  color: var(--glass-brass);
}
.cal-error { margin-top: var(--s3); }

/* =========================================================================
   Customer — 注文成功の「夜明け」全画面演出(夕焼け→朝焼けへ静かに移ろう)
   ・純CSSの二層グラデーション: 夕焼けを上に重ね opacity 1→0 で下の朝焼けへ交差フェード。
   ・昇る太陽のグロー(radial-gradient)とうっすら瞬く星(朝とともに消える)で奥行き。
   ・外部画像なし・自己完結。全画面で下のUIと席シートを覆い、操作を遮る(ボタン以外で
   　は閉じない=背景タップ/Esc では戻らない)。z-index は席シート(60)より前面・きらめき
   　層(9999)より背面(小さな星は文言の上に瞬いてもよい)。
   ・prefers-reduced-motion では交差を省き、朝焼け+文言+ボタンを即時提示。
   ========================================================================= */

.dawn-overlay {
  position: fixed;
  inset: 0;
  z-index: 200;                 /* 席シート(60)より前面・きらめき(9999)より背面 */
  overflow: hidden;
  opacity: 0;
  transition: opacity 0.5s ease;
  background: #1a1a3e;          /* グラデ描画前でも下UIを透かさぬ確実な下地 */
}
.dawn-overlay.playing { opacity: 1; }   /* 全画面フェードイン(~0.5s) */
.dawn-overlay.closing { opacity: 0; }   /* 「戻る」でフェードアウト(~0.5s) */

/* 二枚のペインタリーな空。夕焼け(上)が朝焼け(下)へ交差フェードする */
.dawn-sky {
  position: absolute;
  inset: 0;
}
.dawn-dawn {
  /* 朝焼け: 琥珀の金 → ばら → 藤 → 明けの群青(下=地平 → 上=空)。
     白っぽく飛ばないよう彩度と深さを残し、余韻のある夜明けにする。 */
  background: linear-gradient(to top,
    #f2b563 0%, #e8935f 20%, #cf7375 42%,
    #a06c96 58%, #56659f 82%, #3d4f8c 100%);
}
.dawn-sunset {
  /* 夕焼け: 深い琥珀 → 燃える橙 → マゼンタ → 藍の空 */
  background: linear-gradient(to top,
    #f0a35a 0%, #e0742f 22%, #b83b34 42%,
    #7d2b57 64%, #33306a 86%, #1a1a3e 100%);
  opacity: 1;
}

/* 昇る太陽のグロー(地平近くから静かに上りつつ明るくなる) */
.dawn-sun {
  position: absolute;
  left: 50%;
  bottom: 6%;
  width: 360px;
  height: 360px;
  margin-left: -180px;
  border-radius: 50%;
  background: radial-gradient(circle,
    rgba(255, 238, 196, 0.75) 0%,
    rgba(255, 214, 156, 0.42) 28%,
    rgba(255, 196, 132, 0.16) 52%,
    rgba(255, 196, 132, 0) 70%);
  filter: blur(3px);
  transform: translateY(48px) scale(0.9);
  opacity: 0.35;
}

/* うっすら瞬く星(藍の空に)。朝が来るにつれ静かに消える */
.dawn-stars {
  position: absolute;
  inset: 0;
  opacity: 0.85;
  background-repeat: no-repeat;
  background-image:
    radial-gradient(1.6px 1.6px at 12% 16%, rgba(255, 255, 255, 0.9), transparent 60%),
    radial-gradient(1.2px 1.2px at 24% 9%,  rgba(255, 255, 255, 0.7), transparent 60%),
    radial-gradient(1.4px 1.4px at 38% 20%, rgba(255, 255, 255, 0.8), transparent 60%),
    radial-gradient(1px 1px at 51% 12%,     rgba(255, 255, 255, 0.65), transparent 60%),
    radial-gradient(1.5px 1.5px at 63% 18%, rgba(255, 255, 255, 0.85), transparent 60%),
    radial-gradient(1.1px 1.1px at 72% 8%,  rgba(255, 255, 255, 0.7), transparent 60%),
    radial-gradient(1.3px 1.3px at 84% 22%, rgba(255, 255, 255, 0.8), transparent 60%),
    radial-gradient(1px 1px at 91% 13%,     rgba(255, 255, 255, 0.6), transparent 60%),
    radial-gradient(1.2px 1.2px at 18% 30%, rgba(255, 255, 255, 0.55), transparent 60%),
    radial-gradient(1.4px 1.4px at 46% 33%, rgba(255, 255, 255, 0.6), transparent 60%),
    radial-gradient(1.1px 1.1px at 68% 30%, rgba(255, 255, 255, 0.55), transparent 60%),
    radial-gradient(1.3px 1.3px at 88% 34%, rgba(255, 255, 255, 0.5), transparent 60%);
}

/* 中央の文言 + ボタン(空面は操作を受けず、ボタンのみ pointer-events 復帰) */
.dawn-content {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--s6);
  padding: var(--s5);
  text-align: center;
  pointer-events: none;
}

/* 透明感のある佇まい: 細身・広いレタースペース・淡い白 + やわらかなグロー */
.dawn-message {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--s3);
  font-family: var(--font-serif);
  font-weight: 300;
  /* 最長行「お席にて少々お待ちください。」(15字+字間)が狭い端末でも
     1行に収まるよう、ビューポート幅に追従させる。 */
  font-size: clamp(14px, 4.4vw, 26px);
  letter-spacing: 0.12em;
  line-height: 1.9;
  color: rgba(255, 255, 255, 0.92);
  text-shadow:
    0 1px 10px rgba(255, 255, 255, 0.35),
    0 2px 24px rgba(255, 240, 220, 0.25);
  opacity: 0;                   /* 交差開始の少し後にフェードイン */
}
.dawn-message span { display: block; white-space: nowrap; }

/* スモークガラスのピル(星明かりの縁 inset を継承したデザイン言語)。
   塗りは白ではなく夜色 rgba(10,10,30,0.35) ── 白い塗りは白文字の下地を明るく
   持ち上げ、朝焼けの明るい帯では 2.43:1、一杯メッセージのパレット最明色でも
   3.61:1 までしか出なかった(白塗りのままでは alpha をほぼ 0 にしない限り
   AA 4.5:1 に届かない)。夜色に反転すると、縦長メッセージでボタンが下がる
   20%帯まで含めても 4.6:1 以上・パレット上は 7.8:1 以上になり、輪郭は白枠
   0.4 と inset ハイライトが引き続き担う。@supports(ぼかし)側も同じ塗り
   ── ブラウザが実際に描く方の値が薄いままでは保証にならない。
   数値は tests/test_treat_credit.py が合成計算で固定している。 */
.dawn-back-btn {
  pointer-events: auto;         /* 唯一の操作対象。これ以外では閉じない */
  min-height: 48px;
  padding: 0 var(--s6);
  border-radius: var(--r-pill);
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: var(--fs-base);
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.95);
  background: rgba(10, 10, 30, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.4);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.5),
    0 8px 30px rgba(0, 0, 0, 0.18);
  opacity: 0;                   /* しばらく後にフェードイン */
  /* タップ時に端末既定のハイライト(黄~橙の矩形)が朝焼けの上に乗るのを止める。
     押下感は :active の scale(0.94) と星のきらめき(index.js)が担う。 */
  -webkit-tap-highlight-color: transparent;
}
/* ホバー色は「夜色を少し濃く」が意図。:not(:disabled) を足しているのは詳細度の
   ためで、これが無いと共通規則 `button:hover:not(:disabled)`(0,2,1)が
   `.dawn-back-btn:hover`(0,2,0)に勝ち、ボタンが真鍮 var(--accent-strong)
   =#7c5312 のベタ塗りに化けていた(朝焼けの上で黄土色に浮く不具合)。 */
@media (hover: hover) {
  .dawn-back-btn:hover:not(:disabled) { background: rgba(10, 10, 30, 0.46); }
}
/* フォーカスリング(キーボード操作の可視表示)。朝焼け(明)と夜色の塗り(暗)の
   両方の上で見えるよう、温白の輪 + その外側に夜色のハローの二重構成にする。
   単独の規則にしてあるのは、:focus-visible 未対応の旧ブラウザでこの規則だけが
   捨てられ、他の宣言(上のホバー/塗り)を巻き添えにしないため。 */
.dawn-back-btn:focus-visible {
  outline: 2px solid var(--glass-text, #f2efe6);
  outline-offset: 3px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.5),
    0 8px 30px rgba(0, 0, 0, 0.18),
    0 0 0 6px rgba(10, 10, 30, 0.45);
}

@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .dawn-back-btn {
    background: rgba(10, 10, 30, 0.35);
    -webkit-backdrop-filter: blur(10px) saturate(130%);
    backdrop-filter: blur(10px) saturate(130%);
  }
}

/* --- 再生(.playing 付与)でアニメを頭から開始。JS は毎回 reflow で再スタート --- */
.dawn-overlay.playing .dawn-sunset {
  animation: dawn-crossfade 7s ease-in-out forwards;
}
.dawn-overlay.playing .dawn-sun {
  animation: dawn-sunrise 7.5s ease-out forwards;
}
.dawn-overlay.playing .dawn-stars {
  animation: dawn-starfade 5s ease-in forwards;
}
.dawn-overlay.playing .dawn-message {
  animation: dawn-fade-in 1.8s ease-out 1.4s forwards;
}
.dawn-overlay.playing .dawn-back-btn {
  animation: dawn-fade-in 1.4s ease-out 5s forwards;
}

@keyframes dawn-crossfade {
  0% { opacity: 1; }
  100% { opacity: 0; }
}
@keyframes dawn-sunrise {
  0%   { transform: translateY(48px) scale(0.9); opacity: 0.35; }
  100% { transform: translateY(-12px) scale(1.06); opacity: 0.6; }
}
@keyframes dawn-starfade {
  0%   { opacity: 0.85; }
  30%  { opacity: 0.6; }
  70%  { opacity: 0; }
  100% { opacity: 0; }
}
@keyframes dawn-fade-in {
  0%   { opacity: 0; transform: translateY(8px); }
  100% { opacity: 1; transform: translateY(0); }
}

/* prefers-reduced-motion: 交差を省き、朝焼け状態 + 文言 + ボタンを即時提示 */
@media (prefers-reduced-motion: reduce) {
  .dawn-overlay { transition: none; }
  .dawn-overlay.playing .dawn-sunset,
  .dawn-overlay.playing .dawn-stars {
    animation: none;
    opacity: 0;                 /* 夕焼け・星を消し、下の朝焼けを見せる */
  }
  .dawn-overlay.playing .dawn-sun {
    animation: none;
    transform: translateY(-12px) scale(1.06);
    opacity: 0.95;
  }
  .dawn-overlay.playing .dawn-message,
  .dawn-overlay.playing .dawn-back-btn {
    animation: none;
    opacity: 1;
    transform: none;
  }
}

/* =========================================================================
   Admin — トレンドナビ(日/週/月 + ◀▶)と details トグル(売上)
   ========================================================================= */

.trend-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s3);
  margin-bottom: var(--s4);
}

.trend-nav {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
}

.trend-period-label {
  min-width: 11em;
  text-align: center;
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: var(--fs-base);
  color: var(--ink);
}

.nav-arrow {
  min-height: 40px;
  min-width: 44px;
  padding: 0 var(--s3);
  background: var(--surface);
  color: var(--ink-soft);
  border: 1px solid var(--line-strong);
  font-weight: 700;
}

.nav-arrow:hover:not(:disabled) {
  background: var(--paper-sunk);
  color: var(--ink);
}

.nav-arrow:disabled {
  opacity: 0.4;
  background: var(--surface);
  color: var(--muted);
}

/* カテゴリ別/メニュー別の details トグル(縦長を抑制) */
.chart-details {
  margin-bottom: var(--s6);
}

.chart-details > summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  gap: var(--s2);
  font-family: var(--font-serif);
  font-size: var(--fs-lg);
  font-weight: 700;
  color: var(--ink);
  margin-bottom: var(--s3);
}

.chart-details > summary::-webkit-details-marker { display: none; }

.chart-details > summary::before {
  content: "▸";
  color: var(--accent-strong);
  font-size: 0.8em;
}

.chart-details[open] > summary::before {
  content: "▾";
}

/* 場所タブの操作列(編集/保存/キャンセル/削除) */
.row-ops {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2);
}

/* =========================================================================
   Admin — 注文修正モーダル(フロア行タップ)
   paper × ink × 真鍮。390px でも崩れないようトークンで構成。
   ========================================================================= */

.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: var(--s5) var(--s4);
  background: rgba(28, 26, 21, 0.45);
  overflow-y: auto;
}

.modal-card {
  position: relative;
  width: 100%;
  max-width: 460px;
  margin: auto;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-md);
  padding: var(--s5) var(--s4) var(--s4);
}

.modal-close {
  position: absolute;
  top: var(--s2);
  right: var(--s2);
  min-height: 36px;
  min-width: 36px;
  padding: 0;
  font-size: var(--fs-xl);
  line-height: 1;
  background: var(--surface);
  color: var(--muted);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
}

.modal-close:hover:not(:disabled) {
  background: var(--paper-sunk);
  color: var(--ink);
}

/* パネル: ヘッダ(No./名前/席/種別) */
.fm-head {
  padding-right: 44px;   /* ×ボタンぶんの余白 */
  padding-bottom: var(--s3);
  margin-bottom: var(--s3);
  border-bottom: 1px dashed var(--line-strong);
}

.fm-num {
  font-size: var(--fs-2xl);
  font-weight: 800;
  color: var(--ink);
  line-height: 1.15;
}

.fm-name {
  font-weight: 700;
  color: var(--ink-soft);
}

.fm-place {
  margin-top: 2px;
  color: var(--muted);
  font-size: var(--fs-sm);
}

.fm-section-title {
  font-family: var(--font-serif);
  font-size: var(--fs-base);
  margin: var(--s4) 0 var(--s2);
}

/* 注文明細の行(品目 ×数量 / 金額 / 削除) */
.fm-items {
  margin-bottom: var(--s2);
}

.fm-item {
  display: flex;
  align-items: center;
  gap: var(--s3);
  padding: var(--s2) 0;
  border-bottom: 1px solid var(--line);
}

.fm-item:last-child {
  border-bottom: none;
}

.fm-item-name {
  flex: 1 1 auto;
  min-width: 0;
  font-weight: 600;
}

.fm-item-amt {
  flex: none;
  color: var(--ink-soft);
}

.fm-item .danger.small {
  flex: none;
}

/* 追加フォーム(カテゴリ別 select + 数量 + 追加) */
.fm-add {
  margin-top: var(--s3);
  padding-top: var(--s3);
  border-top: 1px dashed var(--line-strong);
}

/* 退店(伝票取消)。追加フォームと視覚的に切り離し、右端に寄せて誤タップを防ぐ */
.fm-void {
  margin-top: var(--s3);
  padding-top: var(--s3);
  border-top: 1px dashed var(--line-strong);
  text-align: right;
}

.fm-add-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2);
  align-items: center;
}

.fm-add-row .fm-menu-select {
  flex: 1 1 100%;
}

.fm-add-row .fm-qty {
  width: 84px;
  flex: none;
  text-align: center;
}

.fm-add-row button {
  flex: 1 1 auto;
}

/* 「特典を使う(残N杯)」。追加フォームの直下に置く1行のチェックボックス */
.fm-perk {
  display: flex;
  align-items: center;
  gap: var(--s2);
  margin-top: var(--s2);
  font-size: 0.92rem;
}

/* =========================================================================
   Admin — メニュータブ(大分類→中分類 アコーディオン + 品目行 + 追加フォーム)
   ========================================================================= */

.menu-tree {
  margin-bottom: var(--s4);
}

/* 大分類(details) */
details.menu-group {
  border: 1px solid var(--line-strong);
  border-radius: var(--r-md);
  background: var(--surface);
  margin-bottom: var(--s3);
  overflow: hidden;
}

details.menu-group > summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  gap: var(--s2);
  padding: var(--s3) var(--s4);
  font-family: var(--font-serif);
  font-size: var(--fs-lg);
  font-weight: 700;
  color: var(--ink);
  background: var(--paper-sunk);
  border-bottom: 1px solid transparent;
}

details.menu-group[open] > summary {
  border-bottom-color: var(--line);
}

details.menu-group > summary::-webkit-details-marker { display: none; }

details.menu-group > summary::before {
  content: "▸";
  color: var(--accent-strong);
  font-size: 0.8em;
}

details.menu-group[open] > summary::before { content: "▾"; }

.menu-group-body {
  padding: var(--s3) var(--s4) var(--s4);
}

/* 中分類(details) */
details.menu-cat {
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--surface);
  margin-bottom: var(--s2);
}

details.menu-cat:last-child { margin-bottom: 0; }

details.menu-cat > summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  gap: var(--s2);
  padding: var(--s2) var(--s3);
  font-weight: 700;
  color: var(--ink-soft);
}

details.menu-cat > summary::-webkit-details-marker { display: none; }

details.menu-cat > summary::before {
  content: "▸";
  color: var(--accent-strong);
  font-size: 0.75em;
}

details.menu-cat[open] > summary::before { content: "▾"; }

.menu-cat-body {
  padding: 0 var(--s3) var(--s3);
}

/* 品目行(名前/価格/note/提供中トグル/削除) */
.mi-row {
  display: flex;
  align-items: center;
  gap: var(--s3);
  flex-wrap: wrap;
  padding: var(--s2) 0;
  border-bottom: 1px solid var(--line);
}

.mi-row:last-child { border-bottom: none; }

.mi-main {
  flex: 1 1 auto;
  min-width: 140px;
}

.mi-name { font-weight: 700; }

.mi-price {
  color: var(--ink-soft);
  font-size: var(--fs-sm);
  margin-left: var(--s2);
}

.mi-note {
  color: var(--muted);
  font-size: var(--fs-xs);
  margin-top: 2px;
}

.mi-ops {
  display: flex;
  align-items: center;
  gap: var(--s3);
  flex: none;
}

.mi-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--ink-soft);
  cursor: pointer;
}

.mi-toggle input { width: auto; min-height: 0; }

/* その分類へ直接追加するインラインフォーム */
.mi-add {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s2);
  margin-top: var(--s2);
  padding-top: var(--s3);
  border-top: 1px dashed var(--line-strong);
}

.mi-add input {
  width: auto;
  min-height: 40px;
}

.mi-add .mi-add-name { flex: 2 1 130px; }
.mi-add .mi-add-price { flex: 1 1 80px; min-width: 72px; }
.mi-add .mi-add-note { flex: 2 1 130px; }
.mi-add button { flex: none; min-height: 40px; }

/* =========================================================================
   Global guard: the hidden attribute must always win.
   (author display:flex etc. on a class otherwise overrides the UA's
    [hidden]{display:none} — e.g. .checkin-view stayed visible after checkin)
   ========================================================================= */
[hidden] {
  display: none !important;
}

/* =========================================================================
   Customer — チェックイン多段ウィザード(初来店確認 → メールで呼び出し / 初回登録)
   既存のガラス調チェックインカード(.checkin-card / --glass-* トークン)に馴染ませる。
   夜空 + すりガラス(真鍮 #e4c485 の差し色・星明かりの縁 inset)のデザイン言語を踏襲。
   ステップ本体は #checkin-steps に auth.js が描画する。
   ========================================================================= */

.checkin-steps {
  display: flex;
  flex-direction: column;
  gap: var(--s3);
}

/* 各ステップの問いかけ見出し(明朝で上品に) */
.checkin-card .ck-question {
  margin: 0;
  font-family: var(--font-serif);
  font-size: var(--fs-lg);
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--glass-text);
  text-align: center;
}

/* STEP1: 初来店確認の大きな二択ボタン(縦積み・ガラス面) */
.ck-choices {
  display: flex;
  flex-direction: column;
  gap: var(--s3);
}
.checkin-card .ck-choice {
  display: flex;
  flex-direction: column;
  /* ラベルは中央(店長要望 2026-07-31: ボタンの文字が真ん中にないのが嫌)。 */
  align-items: center;
  justify-content: center;
  gap: 2px;
  width: 100%;
  min-height: 68px;
  padding: var(--s3) var(--s4);
  text-align: center;
  border-radius: var(--r-md);
  background: var(--glass-sub);
  color: var(--glass-text);
  border: 1px solid var(--glass-line-lit);
  box-shadow: var(--glass-edge);
}
@media (hover: hover) {
  .checkin-card .ck-choice:hover:not(:disabled) {
    background: rgba(228, 196, 133, 0.14);
    border-color: rgba(228, 196, 133, 0.5);
  }
}
.ck-choice .ck-choice-label {
  font-family: var(--font-serif);
  font-size: var(--fs-lg);
  font-weight: 700;
  letter-spacing: 0.04em;
}

/* 主アクション(呼び出す / チェックイン / 次へ / 入店する)= 真鍮ガラスの発光ボタン。
   質感は共通ブロック(.glass-cta, .checkin-card .ck-primary)で「注文する」と共有
   している。ここに残すのはチェックインカード内での配置だけ。 */
.checkin-card .ck-primary {
  width: 100%;
  margin-top: var(--s1);
}

/* 副アクション(もう一度入力 など)= 輪郭だけのガラスボタン */
.checkin-card .ck-secondary {
  width: 100%;
  background: var(--glass-sub);
  color: var(--glass-brass);
  border: 1px solid var(--glass-line-lit);
}
@media (hover: hover) {
  .checkin-card .ck-secondary:hover:not(:disabled) {
    background: rgba(255, 255, 255, 0.16);
  }
}

/* 「← 戻る」= 小さめのガラスチップ(左寄せ) */
.checkin-card .ck-back {
  align-self: flex-start;
  min-height: 38px;
  padding: 0 var(--s3);
  font-size: var(--fs-sm);
  font-weight: 700;
  background: var(--glass-sub);
  color: var(--glass-brass);
  border: 1px solid var(--glass-line-lit);
}
@media (hover: hover) {
  .checkin-card .ck-back:hover:not(:disabled) {
    background: rgba(255, 255, 255, 0.16);
  }
}

/* おかえりなさいの挨拶(既存客・呼び出し成功時) */
.checkin-card .ck-greeting {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  text-align: center;
}
.ck-greeting .ck-greeting-main {
  font-family: var(--font-serif);
  font-size: var(--fs-lg);
  font-weight: 700;
  color: var(--glass-text);
}
.ck-greeting .ck-greeting-sub {
  font-size: var(--fs-sm);
  color: var(--glass-brass);
}

/* 補足文(任意メールの案内 など) */
.checkin-card .ck-hint {
  margin: 0;
  color: var(--glass-muted);
  font-size: var(--fs-sm);
}

/* 未登録などの案内メッセージ(中立のガラス面) */
.checkin-card .ck-message {
  margin: 0;
  padding: var(--s3) var(--s4);
  border-radius: var(--r-md);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--glass-line);
  color: var(--glass-soft);
  font-weight: 700;
  text-align: center;
}

/* 席番号セレクト(WP-A①)。既存の text/email 入力と高さ・余白を揃える。 */
.checkin-card select.ck-seat-select {
  width: 100%;
  min-height: 46px;
  font-family: inherit;
  font-size: var(--fs-base);
  color: var(--glass-text);
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid var(--glass-line-lit);
  border-radius: var(--r-sm);
  padding: 0 var(--s3);
}
.checkin-card select.ck-seat-select:focus {
  outline: none;
  border-color: var(--glass-brass);
  box-shadow: 0 0 0 3px rgba(228, 196, 133, 0.22);
}

/* 初回プロフィール設問の入力欄まとめ */
.ck-fields {
  display: flex;
  flex-direction: column;
  gap: var(--s3);
}

/* メール欄 / textarea もガラス調に(既存 .checkin-card input[type="text"] を踏襲) */
.checkin-card input[type="email"],
.checkin-card textarea {
  width: 100%;
  min-height: 46px;
  font-family: inherit;
  font-size: var(--fs-base);
  color: var(--glass-text);
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid var(--glass-line-lit);
  border-radius: var(--r-sm);
}
.checkin-card input[type="email"] {
  padding: 0 var(--s3);           /* 名前欄(text)と高さ・余白を揃える */
}
.checkin-card textarea {
  min-height: 64px;
  padding: var(--s2) var(--s3);
  line-height: 1.6;
  resize: vertical;
}
.checkin-card input[type="email"]::placeholder,
.checkin-card textarea::placeholder {
  color: var(--glass-muted);
}
.checkin-card input[type="email"]:focus,
.checkin-card textarea:focus {
  outline: none;
  border-color: var(--glass-brass);
  box-shadow: 0 0 0 3px rgba(228, 196, 133, 0.22);
}

/* 押下の微フィードバック(既存のガラスUIと同じ ~90ms の縮み。base button の
   transform トランジションに乗る) */
.ck-choice:active:not(:disabled),
.ck-primary:active:not(:disabled) { transform: scale(0.985); }
.ck-back:active:not(:disabled),
.ck-secondary:active:not(:disabled) { transform: scale(0.94); }
@media (prefers-reduced-motion: reduce) {
  .ck-choice:active, .ck-primary:active,
  .ck-back:active, .ck-secondary:active { transform: none; }
}

/* =========================================================================
   Customer — 料金プラン選択ステップ(プランカード + 在店予定時間スライダー)
   既存のガラス調チェックインカード(.checkin-card / --glass-* トークン)に馴染ませる。
   スライダーを動かすと各カードの「この滞在で」料金とお得メッセージが実額で更新され、
   最有利プラン(.is-best)を控えめな真鍮の光で強調する。
   ========================================================================= */

.ck-plan-cards {
  display: flex;
  flex-direction: column;
  gap: var(--s2);
}

/* 各プランカード(選択可能なガラス面のボタン)。選択= .is-selected、最有利= .is-best。 */
.checkin-card .ck-plan-card {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 3px;
  width: 100%;
  padding: var(--s3);
  text-align: left;
  border-radius: var(--r-md);
  background: var(--glass-sub);
  color: var(--glass-text);
  border: 1px solid var(--glass-line-lit);
  box-shadow: var(--glass-edge);
}
@media (hover: hover) {
  .checkin-card .ck-plan-card:hover {
    background: rgba(228, 196, 133, 0.12);
    border-color: rgba(228, 196, 133, 0.4);
  }
}
/* 選択中: 真鍮の縁 + 淡い発光(注文するボタンと同系の質感) */
.checkin-card .ck-plan-card.is-selected {
  background: rgba(228, 196, 133, 0.16);
  border-color: var(--glass-brass);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.2),
    0 0 0 1px rgba(228, 196, 133, 0.35),
    0 0 18px rgba(228, 196, 133, 0.14);
}
/* 最有利(お得度が最大)のプランは、左の真鍮帯+淡い金の面で一目で分かる
   ようにする(在店時間ステップの料金プレビュー is-best と同じ意匠。左帯
   だけでは目立たず不親切、という店長指摘)。選択中 .is-selected の全周
   ボーダー+発光とは重なっても両立する。 */
.checkin-card .ck-plan-card.is-best {
  border-left-color: var(--glass-brass);
  border-left-width: 3px;
  background: rgba(228, 196, 133, 0.1);
}
.checkin-card .ck-plan-card.is-best.is-selected {
  background: rgba(228, 196, 133, 0.16);
}

.ck-plan-card .ck-plan-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s2);
}
.ck-plan-card .ck-plan-name {
  font-family: var(--font-serif);
  font-size: var(--fs-base);
  font-weight: 700;
  letter-spacing: 0.03em;
}
/* 「いちばんお得」タグ(最有利プランのみ表示) */
.ck-plan-card .ck-plan-best {
  flex: none;
  padding: 1px 8px;
  border-radius: var(--r-pill);
  background: rgba(228, 196, 133, 0.22);
  border: 1px solid rgba(228, 196, 133, 0.5);
  color: var(--glass-brass);
  font-size: var(--fs-xs);
  font-weight: 700;
}
.ck-plan-card .ck-plan-sub {
  font-size: var(--fs-xs);
  color: var(--glass-muted);
}
.ck-plan-card .ck-plan-charge-row {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin-top: 2px;
}
.ck-plan-card .ck-plan-charge-label {
  font-size: var(--fs-xs);
  color: var(--glass-soft);
}
.ck-plan-card .ck-plan-charge-val {
  font-size: var(--fs-lg);
  font-weight: 700;
  color: var(--glass-text);
  font-variant-numeric: tabular-nums;
}
.ck-plan-card .ck-plan-deal {
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--glass-brass);
}

/* 押下の微フィードバック(既存ガラスUIと同じ縮み) */
.ck-plan-card:active { transform: scale(0.99); }
@media (prefers-reduced-motion: reduce) {
  .ck-plan-card:active { transform: none; }
}

/* --- 在店予定時間スライダー -------------------------------------------------- */
.ck-plan-slider {
  display: flex;
  flex-direction: column;
  gap: var(--s2);
  padding: var(--s3);
  border-radius: var(--r-md);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--glass-line);
}
.ck-plan-slider-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s2);
}
.ck-plan-slider-label {
  font-weight: 700;
  color: var(--glass-text);
}
.ck-plan-slider-val {
  font-family: var(--font-serif);
  font-size: var(--fs-lg);
  font-weight: 700;
  color: var(--glass-brass);
  font-variant-numeric: tabular-nums;
}
.ck-plan-hint {
  margin: 0;
  font-size: var(--fs-xs);
  color: var(--glass-muted);
}

/* レンジ入力(大きめの触りやすいツマミ + ガラス調のトラック)。iOS/Android で
   統一の見た目にするため appearance をリセットして自前描画する。ヒット領域は
   44px 以上を確保する。 */
.ck-plan-range {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  min-height: 44px;
  margin: 0;
  padding: 0;
  background: transparent;
  cursor: pointer;
}
.ck-plan-range::-webkit-slider-runnable-track {
  height: 6px;
  border-radius: var(--r-pill);
  background: rgba(228, 196, 133, 0.28);
  border: 1px solid var(--glass-line-lit);
}
.ck-plan-range::-moz-range-track {
  height: 6px;
  border-radius: var(--r-pill);
  background: rgba(228, 196, 133, 0.28);
  border: 1px solid var(--glass-line-lit);
}
.ck-plan-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 30px;
  height: 30px;
  margin-top: -13px;             /* トラック(6px)中央にツマミを載せる */
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fbeecb 0%, #e4c485 55%, #c8a35c 100%);
  border: 1px solid rgba(255, 255, 255, 0.6);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4), 0 0 12px rgba(228, 196, 133, 0.35);
}
.ck-plan-range::-moz-range-thumb {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fbeecb 0%, #e4c485 55%, #c8a35c 100%);
  border: 1px solid rgba(255, 255, 255, 0.6);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4), 0 0 12px rgba(228, 196, 133, 0.35);
}
.ck-plan-range:focus { outline: none; }
.ck-plan-range:focus-visible::-webkit-slider-thumb {
  box-shadow: 0 0 0 4px rgba(228, 196, 133, 0.3), 0 2px 6px rgba(0, 0, 0, 0.4);
}
.ck-plan-range:focus-visible::-moz-range-thumb {
  box-shadow: 0 0 0 4px rgba(228, 196, 133, 0.3), 0 2px 6px rgba(0, 0, 0, 0.4);
}

/* --- 在店予定時間ステップの料金プレビュー(スライダーに追従して更新) ---------- */
.ck-stay-prices {
  display: flex;
  flex-direction: column;
  gap: var(--s2);
  padding: var(--s3);
  border-radius: var(--r-md);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--glass-line);
}
.ck-stay-prices-label {
  font-weight: 700;
  color: var(--glass-text);
}
/* 一般/学生切替は type-choice(既存ラジオ)を小ぶりに流用 */
.ck-stay-type label { min-height: 38px; }
.ck-stay-price-rows {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
/* 各行は2段グリッド: 1行目=プラン名(左)+金額(右)、2行目=タグ・特典
   (あるときだけ・全幅)。タグを1行目に混ぜると狭い画面で折り返して
   読みにくいため、金額行には名前と金額以外を置かない。 */
.ck-stay-price-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline;
  column-gap: var(--s2);
  row-gap: 2px;
  padding: 6px 8px;
  border-radius: var(--r-sm);
  font-size: var(--fs-sm);
  color: var(--glass-text);
}
/* 最有利の行はプランカードの is-best と同じ真鍮の左帯+淡い面で示す */
.ck-stay-price-row.is-best {
  background: rgba(228, 196, 133, 0.1);
  box-shadow: inset 3px 0 0 var(--glass-brass);
}
.ck-stay-price-name {
  color: var(--glass-muted);
  min-width: 0;
}
.ck-stay-price-row.is-best .ck-stay-price-name { color: var(--glass-text); }
.ck-stay-price-val {
  justify-self: end;
  white-space: nowrap;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.ck-stay-price-row.is-best .ck-stay-price-val { color: var(--glass-brass); }
/* 2行目(タグ+特典)。 */
.ck-stay-price-sub {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: var(--fs-xs);
  color: var(--glass-muted);
}
/* 「いちばんお得」タグ(プランカードの ck-plan-best と同じ真鍮トーン) */
.ck-stay-price-best {
  flex: none;
  padding: 0 6px;
  border-radius: var(--r-pill);
  background: rgba(228, 196, 133, 0.22);
  border: 1px solid rgba(228, 196, 133, 0.5);
  color: var(--glass-brass);
  font-size: var(--fs-xs);
  font-weight: 700;
}

/* =========================================================================
   Ticket — 会計時アンケート(オーバーレイ)+ 領収書セクション
   紙(card)デザインに合わせたモーダル。星は視認性重視(塗り/枠)。
   ========================================================================= */

/* オーバーレイ: 画面を薄墨で覆い、中央に紙のモーダルを重ねる。長い時は縦スクロール */
.survey-overlay {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: var(--s5) var(--s4) calc(var(--s5) + env(safe-area-inset-bottom));
  overflow-y: auto;
  background: rgba(28, 26, 21, 0.5);
}

.survey-overlay[hidden] {
  display: none;
}

.survey-modal {
  width: 100%;
  max-width: 440px;
  margin: auto;   /* 短いときは上下中央、長いときは overlay 側でスクロール */
}

.survey-modal h2 {
  font-family: var(--font-serif);
}

.survey-lead {
  margin: 0 0 var(--s3);
  font-size: var(--fs-sm);
}

.survey-field {
  padding: var(--s3) 0;
  border-top: 1px solid var(--line);
}

.survey-field:first-of-type {
  border-top: none;
  padding-top: var(--s2);
}

.survey-q {
  font-weight: 700;
  margin-bottom: var(--s2);
}

/* タップで選ぶ星ウィジェット */
.star-widget {
  display: inline-flex;
  gap: var(--s1);
}

.star {
  width: 46px;
  min-width: 46px;
  min-height: 46px;
  height: 46px;
  padding: 0;
  background: transparent;
  border: none;
  border-radius: var(--r-sm);
  color: var(--line-strong);
  font-size: 2rem;
  line-height: 1;
}

.star.on {
  color: var(--accent);
}

@media (hover: hover) {
  .star:hover:not(:disabled) {
    background: var(--paper-sunk);
  }
}

/* コメント/改善案の textarea(紙UIの入力に合わせる) */
.survey-field textarea {
  width: 100%;
  min-height: 64px;
  margin-top: var(--s2);
  padding: var(--s2) var(--s3);
  font-family: inherit;
  font-size: var(--fs-base);
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  line-height: 1.6;
  resize: vertical;
}

.survey-field textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

/* ご所属(sv-affiliation)の一行入力(2026-08-12 T10)。textarea と質感を揃える。 */
.survey-field input[type="text"] {
  width: 100%;
  min-height: 44px;
  margin-top: var(--s2);
  padding: 0 var(--s3);
  font-family: inherit;
  font-size: var(--fs-base);
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
}

.survey-field input[type="text"]:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

/* また来たいですか: 3択ボタン(単一選択) */
.revisit-choice {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2);
}

.revisit-btn {
  flex: 1 1 auto;
  min-width: 96px;
  min-height: 44px;
  padding: 0 var(--s3);
  background: var(--surface);
  color: var(--ink-soft);
  border: 1px solid var(--line-strong);
  font-weight: 700;
  font-size: var(--fs-sm);
}

.revisit-btn.active {
  background: var(--accent-soft);
  color: var(--accent-strong);
  border-color: var(--accent-line);
}

@media (hover: hover) {
  .revisit-btn:hover:not(.active) {
    background: var(--paper-sunk);
    color: var(--ink);
  }
}

/* 今後のイベント案内の設問: 「参加したいイベント」の複数選択(チェックボックス)。
   紙UIの入力(.revisit-btn / .survey-optin)と同じ色・触り心地に揃える。 */
.survey-subq {
  margin-top: var(--s3);
  font-weight: 700;
  font-size: var(--fs-sm);
  color: var(--ink-soft);
}

.survey-events-list {
  display: flex;
  flex-direction: column;
  gap: var(--s1);
  margin-top: var(--s2);
  /* 予定が多い月でもアンケートが縦に伸び切らないよう、この欄だけスクロールさせる。 */
  max-height: 176px;
  overflow-y: auto;
}

.survey-event-option {
  display: flex;
  align-items: center;
  gap: var(--s2);
  min-height: 44px;
  padding: var(--s1) var(--s2);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  font-size: var(--fs-sm);
  cursor: pointer;
}

.survey-event-option input {
  width: 20px;
  height: 20px;
  flex: none;
}

.survey-event-text {
  min-width: 0;
  color: var(--ink-soft);
  line-height: 1.4;
}

.survey-optin {
  display: flex;
  align-items: center;
  gap: var(--s2);
  padding: var(--s3) 0;
  border-top: 1px solid var(--line);
  font-weight: 700;
  cursor: pointer;
}

.survey-optin input {
  width: 20px;
  height: 20px;
  flex: none;
}

.survey-actions {
  display: flex;
  gap: var(--s2);
  margin-top: var(--s4);
}

.survey-actions #sv-skip {
  flex: 1 1 0;
}

.survey-actions #sv-submit {
  flex: 2 1 0;
}

.survey-msg {
  margin-top: var(--s3);
  text-align: center;
  font-weight: 700;
  color: var(--success);
}

.survey-msg.is-error {
  color: var(--danger-strong);
}

/* 領収書セクション(#checkout-view / #paid-view 共通) */
.receipt-section h2 {
  font-family: var(--font-serif);
  font-size: var(--fs-lg);
}

.receipt-label {
  display: block;
  font-weight: 700;
  font-size: var(--fs-sm);
  margin-bottom: var(--s1);
}

.receipt-section input[type="text"] {
  margin-bottom: var(--s3);
}

.receipt-msg {
  margin-top: var(--s3);
  text-align: center;
  font-weight: 700;
}

.receipt-msg.is-error {
  color: var(--danger-strong);
}

.receipt-msg a {
  font-weight: 700;
}

/* --- 今週のアイス シート --- */
/* 品が未登録/未取得のときの一文。 */
.ice-empty {
  margin: 0;   /* .seat-sheet-body の flex gap と加算されないよう自前の余白は持たない */
  text-align: center;
  color: var(--glass-muted);
}
/* 連載記事(note)への導線。シート末尾に置く控えめなリンクボタン。
   本文の商品行と質感を変え、注文操作と読み物の導線を取り違えないようにする。 */
.ice-article-link {
  display: flex;
  align-items: center;
  /* 中身は「スタッフAyuの記事を見る」+「★」の2つだけ。★は文末の一文字なので
     間に gap を入れない(入れると別のアイコンに見える)。 */
  gap: 0;
  width: 100%;
  min-height: 44px;
  /* 上の余白は #ice-sheet-body(.seat-sheet-body)の gap: var(--s4) が付ける。
     margin-top を足すと 32px に倍化するので持たせない。 */
  padding: var(--s3) var(--s4);
  border: 1px solid var(--glass-line-lit);
  border-radius: var(--r-md);
  background: var(--glass-sub);
  color: var(--glass-text);
  text-decoration: none;
}
.ice-article-icon { font-size: var(--fs-lg); }
/* flex: 1 を持たせない。持たせると★が右端まで押し出され、文末の飾りではなく
   行末アイコン(>のような記号)に見えてしまう。 */
.ice-article-label { font-weight: 700; }
@media (hover: hover) {
  .ice-article-link:hover {
    background: rgba(228, 196, 133, 0.14);
    border-color: rgba(228, 196, 133, 0.5);
  }
}
/* シート内の常設「注文する」。全画面シートに覆われて押せない #order-btn の代役。
   見た目の土台は共通の .glass-cta(真鍮ガラス)で、下部バーの「注文する」と
   同じ質感にする。角丸は必須(店長指定で角ばりNG)で、シート内は pill のまま。 */
.ice-order-btn {
  /* 品目が多い日でも潰れない。記事リンク(.ice-article-link)と同じ扱い。 */
  flex: 0 0 auto;
  width: 100%;
  /* 上の余白は #ice-sheet-body の gap: var(--s4) で 16px 付く。ここだけ 8px 足して
     24px にするのは、読み物リンクの真下で注文が確定してしまう誤タップを避けるため。 */
  margin-top: var(--s2);
  min-height: 48px;
  border-radius: 999px;
}

/* アイスシートの品目領域。ここだけがスクロールし、記事リンクは下に残る。
   品数が増えても記事リンクへ届くのに全部スクロールしなくて済む。
   バーは .seat-sheet-body と同じ作法で消す(glass 調の上で明るく浮くため)。 */
.ice-scroll {
  flex: 1 1 auto;
  min-height: 0;
  /* 縦だけスクロールさせ、横は切る。overflow-y だけを書くと overflow-x が
     visible から auto に計算されるため、両軸を明示する。2値の短縮形は
     Safari 15+ でしか解釈されないので使わない。 */
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: none;              /* Firefox */
  -ms-overflow-style: none;           /* 旧 Edge */
}
.ice-scroll::-webkit-scrollbar { width: 0; height: 0; }
/* 記事リンクは縮ませない(品目が多い日に潰れないように)。 */
.ice-article-link { flex: 0 0 auto; }

/* 本日の資料シート: 資料1件=1行のタップ領域(名前 + サイズ・イベンター名)。 */
.docs-list { display: flex; flex-direction: column; gap: 8px; }
.docs-item { display: flex; flex-direction: column; gap: 2px; width: 100%;
  text-align: left; padding: 12px 14px; border-radius: 14px;
  border: 1px solid var(--glass-line, rgba(255, 255, 255, .16));
  background: transparent; color: inherit; font: inherit; cursor: pointer; }
.docs-item[disabled] { opacity: .6; cursor: default; }
.docs-item-name { word-break: break-all; }
.docs-item-meta { font-size: 12px; opacity: .7; }
/* 余白は .seat-sheet-body の gap に任せる(自前の margin と加算させない)。 */
.docs-empty, .docs-note, .docs-error { margin: 0; }
.docs-empty { text-align: center; color: var(--glass-muted); }
/* ポップアップが塞がれた/自動保存が効かない環境向けの手動リンク(通常は hidden)。 */
.docs-note { font-size: 13px; word-break: break-all; }
.docs-note a { color: var(--glass-text, inherit); }

/* =========================================================================
   受け取った一杯のメッセージ全画面表示(#treat-msg-overlay)
   ・「受け取ったドリンクの注文」を押すと、贈られた一杯を1件ずつ全画面で見せる。
   ・背景色は index.js が暗色8色のパレットから選んで inline で当てる(CSS 側は
   　下地の1色だけ持つ = パレットを2箇所に持たない)。
   ・文字は .dawn-message(:3740)と同じ「白い光彩」で読ませる。暗い影ではなく
   　光彩なのは、パレットが全て暗色なので明るい側へ抜くほうが輪郭が立つため。
   ・ボタンは .dawn-back-btn と同じ夜色のスモークガラスピル。backdrop-filter は
   　-webkit- を先に書き、@supports の外にフォールバックを置く。塗りは
   　@supports の内外で同値(コントラスト保証をぼかしに依存させない)。
   ・z-index は席シート(60)より前面・注文成功の夜明け(200)より背面。
   ・hidden 属性は :4235 の [hidden]{display:none !important} が常勝するので、
   　display: flex を持っていても確実に隠れる。
   ========================================================================= */

.treat-msg-overlay {
  position: fixed;
  inset: 0;
  z-index: 190;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--s5);
  padding: var(--s5);
  text-align: center;
  background: #1a1a3e;          /* パレット未適用でも下のUIを透かさぬ確実な下地 */
}

/* 地平の光のにじみ。パレットのどの色に乗っても同じ「夕暮れの奥行き」が出る単一の重ね。

   アルファ 0.11 は「見た目の好み」ではなく上限そのもの。この光は暖色を明るい側
   へ足すので、下地が明るくなるぶん白文字のコントラストが下がる。旧値 0.28 では
   パレット最明色 #b83b34(燃える紅)の上で下地が #cc6651 相当まで持ち上がり、
   そこでは純白でも 3.76:1 ── どんな文字アルファを積んでも AA(4.5:1)に届かない
   死点だった(文字側だけを濃くしても直らない種類の不足)。
   中心アルファを下げるとこうなる(#b83b34 の中心・文字 0.95 での比):
     0.28 → 3.54:1 / 0.16 以上 → 純白でも 4.5 未満 / 0.12 → 4.46:1 / 0.11 → 4.52:1
   よって 0.11 が「8色すべて・全文字が AA を通る最大の光」。上げると即 AA を割る。
   2つ目の停止色も同じ比率(0.10/0.28)で 0.04 へ下げ、グラデの形は保つ。 */
.treat-msg-overlay::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(120% 80% at 50% 88%,
    rgba(255, 214, 156, 0.11) 0%,
    rgba(255, 196, 132, 0.04) 38%,
    rgba(255, 196, 132, 0) 68%);
}

.treat-msg-content {
  position: relative;           /* ::before の光の上に載せる */
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s5);
  width: 100%;
  max-width: 30rem;
}

/* メッセージ本文。.dawn-message と同じ白光彩。
   アルファは 0.95 ── この画面の「読める白」は光のにじみを含めた実測でここに1本化
   した(案内・残りN杯も同値)。旧値 0.92 では光の中心で 4.46:1 で AA を割る。
   「本文は柔らかく、添え字は控えめに」という濃淡のラダーは、この暗色パレット8色
   の上ではアルファで作れない。弱さは書体(serif の 300)と字間と寸法で出す。 */
.treat-msg-body {
  margin: 0;
  font-family: var(--font-serif);
  font-weight: 300;
  font-size: clamp(16px, 5.2vw, 28px);
  letter-spacing: 0.08em;
  line-height: 1.9;
  color: rgba(255, 255, 255, 0.95);
  text-shadow:
    0 1px 10px rgba(255, 255, 255, 0.35),
    0 2px 24px rgba(255, 240, 220, 0.25);
  white-space: pre-wrap;        /* 贈り主が入れた改行をそのまま見せる */
  word-break: break-word;
}

/* 「〜様より」。本文より一段小さく、同じ光彩で揃える。
   ここが最後まで残っていた不足箇所。旧値 0.86 は光のにじみを外しても #b83b34 の
   上で 4.60:1(余裕 0.10)しかなく、光を少しでも乗せると即 AA を割った。
   本文と同じ 0.95 へ。「一段小さく」は font-size と字間が担う。 */
.treat-msg-from {
  margin: 0;
  font-family: var(--font-serif);
  font-size: clamp(13px, 3.8vw, 18px);
  letter-spacing: 0.12em;
  color: rgba(255, 255, 255, 0.95);
  text-shadow:
    0 1px 10px rgba(255, 255, 255, 0.35),
    0 2px 24px rgba(255, 240, 220, 0.25);
}

/* 「残りN杯」。最後の画面だけ出る(JS が hidden を外す)
   アルファ 0.90 では、パレット最明色 #b83b34(燃える紅)の上で 4.88:1、
   ::before の光がにじむ位置では AA(4.5:1)を割る。ボタンと同じ 0.95 まで上げる
   ── 「残り何杯か」は注文の判断材料なので、ここを弱い文字にして得られる静けさより
   読めることを優先する。光を 0.11 に下げた今、この 0.95 で中心でも 4.52:1。 */
.treat-msg-count {
  margin: 0;
  font-size: var(--fs-base);
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.95);
  text-shadow:
    0 1px 10px rgba(255, 255, 255, 0.35),
    0 2px 24px rgba(255, 240, 220, 0.25);
}

/* 「次へ」「注文する」のスモークガラスピル(.dawn-back-btn と同じデザイン
   言語)。夜色の塗りである理由と数値は .dawn-back-btn のコメントを参照
   (白塗り 0.14 ではパレット最明色 #b83b34+光の上で 3.61:1 だった)。 */
.treat-msg-btn {
  min-height: 48px;
  padding: 0 var(--s6);
  border-radius: var(--r-pill);
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: var(--fs-base);
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.95);
  background: rgba(10, 10, 30, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.4);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.5),
    0 8px 30px rgba(0, 0, 0, 0.18);
}
/* :not(:disabled) は詳細度のため(.dawn-back-btn:hover と同じ理由 ── 無いと
   共通規則 button:hover:not(:disabled) の真鍮 #7c5312 に負ける)。 */
@media (hover: hover) {
  .treat-msg-btn:hover:not(:disabled) { background: rgba(10, 10, 30, 0.46); }
}

/* 右上の×。注文を強制しないための常設の逃げ道(いつでも閉じられる) */
.treat-msg-close {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 2;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  font-size: 20px;
  line-height: 1;
  color: rgba(255, 255, 255, 0.95);
  background: rgba(10, 10, 30, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.4);
}

/* タップで次へ の小さな案内(最後の画面では JS が隠す)
   12px でパレット8色の上に直接載るこの1行が、この画面でいちばん読めない文字
   だった。アルファ 0.70 では #b83b34 の上で 3.55:1、::before の光がにじむ位置
   では 3.23:1(AA は 4.5:1)。0.82 でも 4.31:1 で足りないので、ボタンと同じ
   0.95 まで上げる ── これでパレット8色すべてで 5.26:1 以上、光を 0.11 に
   下げた今は中心でも 4.52:1 以上になる。「控えめさ」はアルファではなく 12px
   という寸法と字間で出す(アルファを下げて弱さを表現すると、そのまま AA を割る)。 */
.treat-msg-hint {
  position: relative;
  z-index: 1;
  margin: 0;
  font-size: 12px;
  letter-spacing: 0.1em;
  color: rgba(255, 255, 255, 0.95);
}

@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .treat-msg-btn,
  .treat-msg-close {
    background: rgba(10, 10, 30, 0.35);
    -webkit-backdrop-filter: blur(10px) saturate(130%);
    backdrop-filter: blur(10px) saturate(130%);
  }
}

/* =========================================================================
   微細な粒子(フィルムグレイン)。ガラスと紙に素材感を足す。
   ・輝度中立(50%グレー中心のノイズ × overlay)なので平均の明るさと
     コントラストは変えない。opacity 0.035 は肉眼で「質感」とだけ感じる上限側。
   ・AAの余白が最も薄い一杯メッセージ画面(.treat-msg-*)と夜明け演出には
     載せない(あちらは計算テストで 4.5:1 を張り詰めて保証しているため)。
   ・SVG feTurbulence の data URI 1枚をタイルするだけ ── 画像取得なし。
   ========================================================================= */
/* ノイズ画像は1回だけ定義して使い回す。イベンター側は eventer.css が
   自分のスコープ規律の中でこの変数を参照する。 */
:root {
  --grain-img: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23g)'/%3E%3C/svg%3E");
}
.checkin-card,
body.ticket .card {
  position: relative;
}
.checkin-card::after,
.seat-sheet-panel::before,
body.ticket .card::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background-image: var(--grain-img);
  background-size: 160px 160px;
  opacity: 0.035;
  mix-blend-mode: overlay;
}