@charset "UTF-8";
/* ==========================================================================
   米粉と鉄板 モバイルオーダー — 共通スタイル
   --------------------------------------------------------------------------
   デザインコンセプト：「鉄板の熱と、米粉の白」

     ・生成り（off-white）＝ 米粉。紙のようにあたたかい面
     ・鉄黒（iron）        ＝ 鉄板。締まりを与える線と、夜の画面
     ・きつね色（焼き色）  ＝ 唯一のアクセント。押せるもの・熱いものだけに使う
     ・見出しは明朝体、本文はゴシック体。和の品を明朝の縦画で出す
     ・鉄板の「焼き目」を細いストライプのテクスチャとして各所に忍ばせる

   外部フォントは読み込まず、OS 標準の日本語フォントで組んでいます。
   店内 Wi-Fi にインターネットが無くても崩れないようにするためです。
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. デザイントークン（色・間隔・影などの「決めごと」）
   -------------------------------------------------------------------------- */
:root {
  /* 素材色 */
  --iron-900: #14110f;
  --iron-800: #1d1916;
  --iron-700: #2a2320;
  --iron-600: #3b322c;
  --iron-400: #6b5e55;

  --rice-50:  #faf6ef;
  --rice-100: #f3ece0;
  --rice-200: #e7dccb;
  --rice-300: #d6c7b0;

  --kitsune-700: #8a4f16;
  --kitsune-600: #a76122;
  --kitsune-500: #c87b2e;
  --kitsune-400: #dd9a4e;
  --kitsune-100: #f6e6cf;

  --matcha-600: #55693b;
  --matcha-500: #6b7f4b;
  --matcha-100: #e4ead8;

  --beni-600: #9d3a32;
  --beni-500: #b5433a;
  --beni-100: #f6dedb;

  --ai-600: #35516a;
  --ai-500: #43647f;
  --ai-100: #dde6ed;

  /* セマンティック（意味で使う色）— ライトモード */
  --bg:            var(--rice-50);
  --bg-elevated:   #fffdf8;
  --surface:       #fffdf8;
  --surface-2:     var(--rice-100);
  --text:          var(--iron-900);
  --text-muted:    #6f635a;
  --text-faint:    #9a8d83;
  --border:        var(--rice-200);
  --border-strong: var(--rice-300);
  --accent:        var(--kitsune-600);
  --accent-hover:  var(--kitsune-700);
  --accent-soft:   var(--kitsune-100);
  --on-accent:     #fffdf8;

  --ok:      var(--matcha-600);
  --ok-soft: var(--matcha-100);
  --danger:      var(--beni-600);
  --danger-soft: var(--beni-100);
  --info:      var(--ai-600);
  --info-soft: var(--ai-100);

  /* 影は「茶を含んだ影」にする。青みのある灰色の影は生成りの紙から浮いてしまう */
  --shadow-sm: 0 1px 2px rgba(58, 42, 26, .07);
  --shadow-md: 0 2px 4px rgba(58, 42, 26, .06), 0 10px 24px -14px rgba(58, 42, 26, .30);
  --shadow-lg: 0 4px 8px rgba(58, 42, 26, .07), 0 24px 48px -20px rgba(58, 42, 26, .38);

  /* 角丸 */
  --r-sm: 6px;
  --r-md: 12px;
  --r-lg: 18px;
  --r-full: 999px;

  /* 余白のリズム（8px 基準） */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;
  --sp-8: 64px;

  /* 書体 */
  --font-serif: "Hiragino Mincho ProN", "Yu Mincho", YuMincho, "Shippori Mincho",
                "Noto Serif JP", "MS PMincho", serif;
  /* ★ 店名（ロゴの紋と並べる「米粉と鉄板」）専用の明朝。
       ---------------------------------------------------------------
       --font-serif とは別に持つこと。理由は 1 つです:

         .theme-snow  { --font-serif: var(--font-sans); }
         .theme-night { --font-serif: var(--font-sans); }

       どちらのテーマも --font-serif をゴシックに潰しています
       （「明朝はブランド専用に格下げし、見出しもゴシックで組む」）。
       つまり画面の中で var(--font-serif) と書いても<b>明朝にはなりません</b>。

       2026-09-23 に、これを知らずに「明朝にしました」と報告しました。
       実測すると Hiragino Kaku Gothic ProN（ゴシック）で出ていました。
       <b>トークンの名前だけ見て、解決後の値を測らなかったのが原因です。</b>

       ここはテーマ側で上書きしないこと。上書きすると、ロゴの中の
       「米粉と鉄板」だけ明朝で、隣の文字がゴシックという状態に戻ります。 */
  --font-brand: "Hiragino Mincho ProN", "Yu Mincho", YuMincho, "Shippori Mincho",
                "Noto Serif JP", "MS PMincho", serif;
  --font-sans:  "Hiragino Kaku Gothic ProN", "Yu Gothic", YuGothic, "Noto Sans JP",
                "Meiryo", sans-serif;
  --font-num:   "Helvetica Neue", Arial, "Yu Gothic", sans-serif;

  /* レイアウト */
  --page-max: 720px;
  --wide-max: 1200px;
  --tap: 48px;
  /* ★ 押せるものの高さ。2026-09-26 に 1 か所へ集約（店主「44px で全部統一して、
       前みたいに統一出来なかったりするからコンポーネント化して」）。
       それまで 36/44/48/56px が 43 か所に散らばっていました。
       44px は Apple HIG の下限ちょうど。これより低くしないこと。
       大小は文字と左右の余白で表す。高さは変えない。
       Figma のコンポーネント「ボタン」（03 部品）と対になっています。 */
  --btn-h: 44px;          /* 指で押す最小サイズ */
  --header-h: 56px;
}

/* ダークモード（OS の設定に追従）。
   鉄板の面をそのまま画面にしたような、わずかに赤みのある黒にする。 */
@media (prefers-color-scheme: dark) {
  :root {
    --bg:            var(--iron-900);
    --bg-elevated:   var(--iron-800);
    --surface:       var(--iron-800);
    --surface-2:     var(--iron-700);
    --text:          #f2ece3;
    --text-muted:    #b0a498;
    --text-faint:    #857a70;
    --border:        #332b26;
    --border-strong: #473c35;
    --accent:        var(--kitsune-400);
    --accent-hover:  var(--kitsune-500);
    --accent-soft:   #3a2a17;
    --on-accent:     #1a1310;

    --ok:      #9dba75;
    --ok-soft: #2a3220;
    --danger:      #e28a80;
    --danger-soft: #3a221f;
    --info:      #8fb2cc;
    --info-soft: #1f2b35;

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, .5);
    --shadow-md: 0 2px 6px rgba(0, 0, 0, .45), 0 12px 28px -16px rgba(0, 0, 0, .7);
    --shadow-lg: 0 4px 12px rgba(0, 0, 0, .5), 0 28px 56px -24px rgba(0, 0, 0, .8);
  }
}

/* --------------------------------------------------------------------------
   2. リセットと土台
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.75;
  color: var(--text);
  background-color: var(--bg);
  /* 紙のざらつき。ごく薄いノイズを重ねると、のっぺりした単色面が「素材」になる */
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.035'/%3E%3C/svg%3E");
  -webkit-font-smoothing: antialiased;
  overflow-wrap: break-word;
}

h1, h2, h3, h4 {
  font-family: var(--font-serif);
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: .02em;
  margin: 0 0 var(--sp-3);
}

h1 { font-size: 1.5rem; }
h2 { font-size: 1.25rem; }
h3 { font-size: 1.0625rem; }

p { margin: 0 0 var(--sp-3); }

a {
  color: var(--accent);
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
a:hover { color: var(--accent-hover); }

img { max-width: 100%; height: auto; display: block; }

hr {
  border: 0;
  border-top: 1px solid var(--border);
  margin: var(--sp-5) 0;
}

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 3px;
}

/* 数字は幅を揃える。金額や番号が並んだときガタつかない */
.num, .price, td.num, .stat__value, .order-number {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

/* --------------------------------------------------------------------------
   3. レイアウト
   -------------------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--page-max);
  margin-inline: auto;
  padding-inline: var(--sp-4);
}

.container--wide { max-width: var(--wide-max); }

.page {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

.page__body {
  flex: 1;
  padding-block: var(--sp-5) var(--sp-8);
}

.stack > * + * { margin-top: var(--sp-4); }
.stack-sm > * + * { margin-top: var(--sp-2); }
.stack-lg > * + * { margin-top: var(--sp-6); }

.row {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
}
.row--between { justify-content: space-between; }
/* 横並びの中のボタンは縮めない。
   .input が width:100% を主張するので、放っておくとボタンだけが潰される */
.row > .btn { flex: 0 0 auto; }
.row--wrap { flex-wrap: wrap; }
/* .row の中で残り幅を分け合う入力欄（2026-09-17）。

   「入力がいくつか並んで、右端にボタン」という形が設計にいくつもある
   （ト11b カテゴリの追加、ト05f 税率の改定、ト15b スタッフの追加）。
   .row > .btn は縮まない決まりなので、残りをこれで分け合う。
   min-width:0 が無いと、中の .input（width:100%）が押し返して折り返さない。 */
.row__grow { flex: 1 1 220px; min-width: 0; }
/* ★ 入力の行は下ぞろえ（2026-09-17・店主の指摘）。

   .row の既定は align-items: center。ラベル付きの入力は「ラベル＋入力欄」で
   背が高く、ボタンは 48px しかないので、中央でそろえると<b>ボタンだけ上に浮きます</b>。
   カテゴリの追加と税率の改定の 2 画面で同じずれ方をしていました。 */
.row:has(.row__grow) { align-items: flex-end; }

/* ★ .catlist は 2026-09-20 に落としました。

   もとは「1 行に入力欄・更新・↑↓・削除が並ぶカテゴリ一覧」で、
   小さいボタンだけ 40px になって頭が 8px 沈む問題を直すための目印でした
   （2026-09-17・店主の指摘）。その画面（admin/categories.html）が
   カテゴリの 3 枚化で無くなったので、目印ごと消しています。

   ★ 見張っていたテスト（HeadingSizeAndRowAlignTest の 2 本）も同時に落としました。
     片方だけ残すと「どこにも効かない規則」か「必ず落ちるテスト」になります。 */
.spacer { flex: 1; }

.grid {
  display: grid;
  gap: var(--sp-4);
}
/* ★ 1fr ではなく minmax(0, 1fr) と書くこと（2026-09-22）。

     1fr の下限は「中身の最小幅」です。中身が縮まない塊（QR の画像 220px、
     折り返さない文言、決まった幅のボタン）を抱えた列は<b>そこで止まり</b>、
     はみ出したぶんだけ画面ごと横に動きます。
     QR の画面がまさにそれで、札 303px × 3 ＋ 間 48 ＝ 957px が
     iPad の本文 897px を +35px 超えていました（実測）。

     minmax(0, 1fr) にすると下限が 0 になり、列は入る幅まで素直に縮みます。
     中身のほうは max-width: 100% を持っているので、一緒に小さくなります。 */
@media (min-width: 640px) {
  .grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 960px) {
  .grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* --------------------------------------------------------------------------
   4. ヘッダー（のれん）
   -------------------------------------------------------------------------- */
.app-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: saturate(1.4) blur(12px);
  border-bottom: 1px solid var(--border);
}

/* のれんの下端に走る細い二重線。和の記号としてのアクセント */
.app-header::after {
  content: "";
  display: block;
  height: 2px;
  background: linear-gradient(90deg,
    var(--accent) 0 22%, transparent 22% 26%,
    var(--accent) 26% 100%);
  opacity: .55;
}

.app-header__inner {
  min-height: var(--header-h);
  display: flex;
  align-items: center;
  gap: var(--sp-3);
}

.app-header__title {
  font-family: var(--font-serif);
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: .12em;
  margin: 0;
  color: var(--text);
  text-decoration: none;
}

.app-header__sub {
  font-size: .75rem;
  color: var(--text-faint);
  letter-spacing: .08em;
  margin: 0;
}

.app-header__nav {
  display: flex;
  gap: var(--sp-1);
  margin-left: auto;
  align-items: center;
}

.app-header__nav a {
  display: inline-flex;
  align-items: center;
  padding: 6px 10px;
  border-radius: var(--r-sm);
  font-size: .875rem;
  color: var(--text-muted);
  text-decoration: none;
  white-space: nowrap;
}
.app-header__nav a:hover { background: var(--surface-2); color: var(--text); }
.app-header__nav a.is-active { color: var(--accent); font-weight: 600; }

/* --------------------------------------------------------------------------
   5. 見出し（明朝＋右へ抜ける罫）
   -------------------------------------------------------------------------- */
.section-title {
  display: flex;
  align-items: baseline;
  gap: var(--sp-3);
  margin: var(--sp-6) 0 var(--sp-4);
}

.section-title__text {
  font-family: var(--font-serif);
  font-size: 1.25rem;
  font-weight: 600;
  letter-spacing: .1em;
  white-space: nowrap;
  margin: 0;
}

/* ★ 2026-09-22：--text-faint（実効 #a9a9a9・白地で 2.35:1）は薄すぎました。
     補足は --text-muted（#828282）に揃えます。 */
.section-title__count {
  font-size: .75rem;
  color: var(--text-muted);
  letter-spacing: .05em;
}

/* 見出しから右端まで細い線を引いて、視線を横に流す */
.section-title::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, var(--border-strong), transparent);
}

.lead {
  color: var(--text-muted);
  font-size: .9375rem;
}

/* --------------------------------------------------------------------------
   6. カード / パネル
   -------------------------------------------------------------------------- */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-sm);
}

.card__body { padding: var(--sp-4); }
.card__head {
  padding: var(--sp-3) var(--sp-4);
  border-bottom: 1px solid var(--border);
  font-weight: 600;
  font-family: var(--font-serif);
  letter-spacing: .06em;
}
.card__foot {
  padding: var(--sp-3) var(--sp-4);
  border-top: 1px solid var(--border);
  background: var(--surface-2);
  border-radius: 0 0 var(--r-md) var(--r-md);
}

/* 鉄板の焼き目テクスチャ。厨房・サイネージなど「熱い側」の画面で使う */
.griddle {
  background-image:
    repeating-linear-gradient(
      -45deg,
      rgba(255, 255, 255, .022) 0 2px,
      transparent 2px 9px
    );
}

/* --------------------------------------------------------------------------
   7. ボタン
   -------------------------------------------------------------------------- */
.btn {
  --btn-bg: var(--surface);
  --btn-fg: var(--text);
  --btn-bd: var(--border-strong);

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  min-height: var(--btn-h);
  /* 左右 24px は設計のボタン部品（3:12 の px-24）。もとは 16px で、
     Fable の検証（2026-09-07）で全ボタン 8px ずつ痩せていると分かった。
     .btn--sm / .btn--lg は自前の padding-inline を持つので巻き込まれない。 */
  padding: 0 var(--sp-5);
  /* ラベルを折り返さない。
     幅が足りないと「決定」が「決／定」と縦に割れる。
     日本語は1文字ずつ折り返せてしまうため、英語より起きやすい。
     ボタンの文字は短いので、折り返して収めるより溢れさせて気づくほうがよい。 */
  white-space: nowrap;
  border: 1px solid var(--btn-bd);
  /* ★ 角丸は 8px で固定（2026-09-20、店主の決定）。共有の --r-sm は使いません。
       --r-sm は :root 6px / .theme-snow 12px / .theme-desk 4px と層ごとに
       書き換わるため、同じ「ボタン」がお客さま側 12px・店側 4px に割れていました。
       入力・カード・探す欄など 11 か所が同じ --r-sm を見ているので、
       トークンのほうを動かすとボタン以外まで巻き込みます。ここで直値にします。
       8px は札とそろえた値（Bootstrap/Tailwind/Primer の 6px より一段柔らかい）。 */
  border-radius: 8px;
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-family: inherit;
  font-size: .9375rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-decoration: none;
  cursor: pointer;
  transition: transform .12s ease, box-shadow .12s ease, background-color .12s ease;
  -webkit-tap-highlight-color: transparent;
}

.btn:hover { box-shadow: var(--shadow-sm); }
.btn:active { transform: translateY(1px); }
.btn:disabled, .btn.is-disabled {
  opacity: .45;
  cursor: not-allowed;
  pointer-events: none;
}

.btn--primary {
  --btn-bg: var(--accent);
  --btn-fg: var(--on-accent);
  --btn-bd: var(--accent);
  box-shadow: var(--shadow-sm);
}
.btn--primary:hover { --btn-bg: var(--accent-hover); --btn-bd: var(--accent-hover); }

.btn--danger { --btn-bg: transparent; --btn-fg: var(--danger); --btn-bd: var(--danger); }
.btn--danger:hover { --btn-bg: var(--danger-soft); }

.btn--ok { --btn-bg: var(--ok); --btn-fg: #fff; --btn-bd: var(--ok); }

.btn--ghost { --btn-bg: transparent; --btn-bd: transparent; --btn-fg: var(--text-muted); }
.btn--ghost:hover { --btn-bg: var(--surface-2); --btn-fg: var(--text); }

/* 枠線だけのボタン（設計「暗/ボタン 種類=枠線」）。
   塗りは無し、枠は 1px の線、文字は補足の色。
   .btn--ghost は枠まで透明なので、押せる範囲が見えない。
   「やめる」のように、押しても何も起きないほうが安全なボタンに使う。 */
.btn--outline { --btn-bg: transparent; --btn-bd: var(--border); --btn-fg: var(--text-muted); }
.btn--outline:hover { --btn-bg: var(--surface-2); --btn-fg: var(--text); }

.btn--block { width: 100%; }
.btn--lg { font-size: 1.0625rem; padding-inline: var(--sp-5); }
/* ★ お客さま側（スマホの注文画面）は今回の統一の対象外です。
     端末もデザインも別で、店主と詰めたのはスタッフの iPad 画面でした。
     従来の値をここで残します。まとめるなら別途フィグマを出してから。 */
.theme-night { --btn-h: 48px; }
.theme-night .btn--lg { min-height: 56px; }

/* ★ 大きさの variant は<b>高さを変えません</b>（2026-09-26）。
   変えるのは文字と左右の余白だけ。高さは --btn-h が 1 か所で決めます。 */
.btn--sm { font-size: .8125rem; padding-inline: var(--sp-3); }

/* --------------------------------------------------------------------------
   8. バッジ・チップ
   -------------------------------------------------------------------------- */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: var(--r-full);
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .06em;
  line-height: 1.7;
  white-space: nowrap;
  border: 1px solid transparent;
}

.badge--gf      { background: var(--ok-soft);     color: var(--ok);     border-color: currentColor; }
.badge--rec     { background: var(--accent-soft); color: var(--accent); border-color: currentColor; }
/* 売り切れは「タグ」ではなく「状態」。
   ほかのバッジと同じ薄さだと、注文できない品だと気づかずに押される。
   塗りつぶして、周りより一段強く見せる。 */
.badge--soldout { background: var(--text-muted);  color: var(--bg);         border-color: transparent; }
.badge--allergen{ background: transparent; color: var(--text-muted); border-color: var(--border-strong); font-weight: 500; }
/* 管理画面の表で使う「止まっている」印。
   お客さま側の .badge--soldout（塗りつぶし）と分けているのは、
   あちらは「押しても無駄だと一目で伝える」ための強さが要るのに対し、
   こちらは 68px の行がずらりと並ぶ中で、赤が強すぎると表が読めなくなるため。
   同じ「品切れ」でも、置かれる場所で必要な強さが違う。 */
.badge--stop    { background: var(--danger-soft); color: var(--danger); border-color: currentColor; }
/* 押せない案内（2026-09-17）。「残数ゼロ」のように、こちらからは動かせない事実を出す。

   ★ 水色にしてグレーにしないのは、意味が違うため。
     グレーは「本当は押せるはずなのに死んでいる」に見えるが、
     水色は「これは案内です」に見える。残数ゼロは壊れているのではなく
     ただの事実の報告なので、水色のほうが正確。
   ★ この水色はお知らせ帯（.alert--info）・注記ですでに使っている色。色を増やさない。
   ★ 枠を持たせないこと。「枠＝押せる」が形の側の規則なので、ここで破ると
     見分ける手がかりが消える。 */
.badge--info    { background: var(--info-soft);   color: var(--info);   border-color: transparent; }

/* 掲載・販売の 3 択／2 択（設計 08-2 のセグメント）。

   ★ 見た目はボタンの列だが、中身はラジオ。
     チェックボックス 3 つにすると「2 つ選ぶ」ができてしまう。
     状態はどれか 1 つなので、構造のほうもどれか 1 つにする。

   ★ クラス名を .segmented にしないこと（2026-09-07 に踏んだ）。
     売上画面の期間切り替え（1か月／3か月／6か月／1年）が
     先に .segmented を使っている。同じ名前で書いたら、
     あちらの定義が app.css の後ろにあるぶん勝ってしまい、
     こちらのラジオが素の見た目に戻っていた。
     app.css は 1 枚なので、名前がかぶった時点で必ずどちらかが壊れる
     （10 節の .tab と同じ事故）。 */
/* 商品を追加・編集する画面（設計 08-2 315:1983 ／ 08-3 318:2012）。
   寸法は設計データそのものから取っている（画面写真の目分量ではない）。 */

/* 見出しの帯。左に題と説明、右に保存の 2 つ */
.formhead {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 28px;
}
.formhead__left { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.formhead__title { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.formhead__name { margin: 0; font-size: 28px; font-weight: 700; line-height: 1.3; }
.formhead__note { margin: 0; font-size: 14px; color: var(--text-muted); }
.formhead__actions { display: flex; align-items: center; gap: 12px; margin-left: auto; flex: none; }
/* ★ 押せない「掲載する」は消さずに薄くする（設計は不透明度 40%）。
     隠すと、何を入れれば出てくるのかが画面から読み取れない */
.formhead__actions .btn:disabled { opacity: .4; cursor: not-allowed; }

/* 編集中の札（設計 298:2063）。幅 86・角丸 4・面 状態/案内 薄 */
.statetag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 86px;
  padding: 6px 8px;
  border-radius: 4px;
  background: var(--info-soft);
  color: var(--info);
  font-size: 14px;
  line-height: 1.6;
}

/* もどるリンクと見出しの帯の間（設計 315:2105 の本文 gap-28）。
   p の既定（12px）に任せると帯に張り付いて見える。この画面専用の目印 */
.formback { margin-bottom: 28px; }

/* カードの中の「見出し付きの塊」（写真・掲載・販売）だけ、
   ラベルと中身の間を 10px にする（設計 319:2041 / 316:2015 の gap-10）。
   入力欄のラベル（label 要素）は 8px のまま（.label の共通値）。
   span か label かで書き分けているのは、設計がこの 2 種類で
   間隔を分けているから（入力欄 8 ／ 塊の見出し 10）。 */
.formcard span.label { margin-bottom: 10px; }
/* チップと但し書きの間も 10px（設計 316:2015。共通の .help は 4px） */
.formcard .statepick + .help { margin-top: 10px; }

/* 入力カード（設計 316:1993）。見出しの帯は付けない */
.formcard {
  display: flex;
  flex-direction: column;
  gap: 28px;
  padding: 32px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--bg-elevated);
}
.formcard__rule { width: 100%; height: 1px; margin: 0; border: 0; background: var(--border); }

/* 掲載と販売は 1 組（2026-09-19、設計 ト10b 745:7822「あき 24」）。

   店主の指摘「販売と掲載の間に余計な余白が合ったから消した」。実測:

     直す前  .field の下マージン 16 ＋ .formcard の gap 28 ＝ 44px
     設計    24px

   ★ .formcard の gap（28）は動かさないこと。
     あれは商品名・価格・写真のあいだにも効いていて、
     ここだけのために動かすと 4 か所が一緒に動きます。
     この 2 つを包んで、中の間隔だけ 24 にします。

   ★ 3 幅とも同じ値です（1432 / 1024 / 1920 で実測 44 → 24）。
     この画面に幅ごとの上書きは無いので、1 か所直せば 3 つとも直ります。 */
.statefields {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
/* 包んだぶん .field の下マージンが中で効くと 24 + 16 になる */
.statefields .field { margin-bottom: 0; }
/* 2 列。狭い画面では縦に落ちる */
.formrow { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
@media (max-width: 900px) { .formrow { grid-template-columns: 1fr; } }
/* 入力のラベルだけ補足色（設計 316:1994 など）。
   写真・掲載・販売の見出しは本文色のまま */
.label--soft { color: var(--text-muted); }

/* 写真（設計 319:2041）。見本 160×120・破線・角丸 8 */
.photopick { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.photopick__empty,
.photopick__preview {
  width: 160px;
  height: 120px;
  border-radius: 8px;
  flex: none;
}
.photopick__empty {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px dashed var(--border);
  background: var(--surface);
  color: var(--text-muted);
  font-size: 14px;
}
.photopick__preview { object-fit: cover; border: 1px solid var(--border); }
.photopick__side { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.photopick__buttons { display: flex; gap: 12px; flex-wrap: wrap; }
/* label をボタンの形にしているので、中のチェックは見せない。
   ただし display:none にはしない（キーボードで辿れなくなる） */
.photopick__erase input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.photopick__erase { position: relative; }
.photopick__erase:has(input:checked) {
  background: var(--danger-soft);
  border-color: var(--danger);
  color: var(--danger);
}

/* 画面には出さないが、支援技術とキーボードには残す。
   display:none や visibility:hidden にすると、そこへ辿り着けなくなる */
.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.statepick { display: inline-flex; gap: 12px; flex-wrap: wrap; }
.statepick__item { position: relative; }
/* ラジオ本体は見せないが、消してはいけない。
   display:none にするとキーボードで辿れなくなるので、透明にして重ねる */
.statepick__item input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}
/* 設計 314:2128（選択中）／314:2134（押せない）
     上下 11・左右 20 ／ 角丸 8 ／ 文字 15
     選択中 … 面 緑700・白文字・太字
     未選択 … 面 薄いグレー・枠・補足色（Regular） */
.statepick__item span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;          /* CLAUDE.md「タップ領域は 48px 以上」 */
  padding: 11px 20px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  font-size: 15px;
  font-weight: 400;
  color: var(--text-muted);
}
/* ★ 選択中は白地・緑枠・緑文字（2026-09-17・店主の指摘）。

   ここは長く var(--accent) の塗りつぶしでした。--accent は :root では黒ですが
   .theme-desk がティール（--green-700）に上書きするため、
   スタッフ側のこの選択だけ旧色のまま残っていました。
   売上の期間切り替えと同じ取り残しです。

   設計（ト10b 745:7822）は白地に緑の枠と文字で、
   今日そろえた「押せるものの形」と同じです
   （.recbtn の記録する、.badge--act の掲載中）。 */
.statepick__item input:checked + span {
  background: var(--bg-elevated);
  border-color: var(--action);
  color: var(--action);
  font-weight: 700;
}
/* 押せない選択肢。消さずに残すのは、何をすれば選べるのかを見せるため */
.statepick__item input:disabled + span { opacity: .5; cursor: not-allowed; }
.statepick__item input:disabled { cursor: not-allowed; }
.statepick__item input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }

/* 見出しのすぐ下に置く一行（設計 08-2 の「〜と、掲載できるようになります」）。
   状態によって文が入れ替わるので、page-head と離して独立させてある */
.page-head__note { margin: 8px 0 0; font-size: 13px; color: var(--text-muted); }

/* 折りたたむ「詳しい設定」。消したのではなく畳んだだけ、が伝わる見た目にする */
.foldout__head {
  cursor: pointer;
  padding: 12px 0;
  font-size: 15px;
  font-weight: 700;
  color: var(--accent);
}
.foldout__head::marker { color: var(--text-muted); }

/* 書きかけ（編集中）。設計 08-2 の見出し横に付く札と同じ色。
   ★ 掲載中（緑）とも掲載停止（灰）とも違う色にすること。
     作りかけは「出していない」仲間だが、直せば出せるものなので、
     止めた品と同じ見た目だと探すときに紛れる。 */
/* --info-soft は #edeefc で、設計の「状態/案内 薄」と同じ値。
   フォールバックを書いていたが要らないので外した（2 か所に値を持たない） */
.badge--draft {
  background: var(--info-soft);
  color: var(--info);
  border-color: transparent;
  text-decoration: none;
}
.badge--draft:hover { filter: brightness(.95); }

/* 表の中で押せるもの（商品一覧の「掲載」「販売」）。

   ★ button は font を継承しない。これが無いと、この 2 つだけ
     OS のフォーム既定書体で描かれ、同じ 11px でも隣の列と字幅が揃わない。

   ★ 2026-09-17：札の形をやめて、ボタンの形にした。

     ここには長く「形は .badge のまま。押せることは色と手の形で伝える」と
     書いてありましたが、これは<b>成立していませんでした</b>。
     色は押せない札（.badge--stop など）と共通で、手の形はカーソルを
     載せるまで出ない（タッチの端末では最後まで出ない）。つまり
     静止した状態で押せると分かる手がかりが 1 つも無かった。

     実際に「販売」列には、字も色も形も同じ「品切れ」が 2 つ並んでいました。
     片方は押せる button、もう片方は押せない span です。

     いまの規則はこう:

         枠と ▸ がある  → 押せる
         平らで枠が無い → 読むだけ（.badge--info）

     色は意味のほうを運ぶ（緑＝売っている／赤＝止めた／水色＝動かせない）。
     押せるかどうかは形が決める。「編集中」は水色なのに押せるので、
     色だけの規則では説明が付かない。 */
.badge--act {
  font: inherit;
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .06em;
  line-height: 1.7;
  cursor: pointer;
  /* 触れる面であることを形で示す。--r-sm は .theme-desk で 4px なので、
     表の中で浮かない程度に角が立つ */
  border-radius: var(--r-sm);
  border: 1px solid currentColor;
  background: var(--bg-elevated);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .10);
  padding: 4px 10px;
  /* 既定は落ち着いた色（「掲載停止」）。色付きのものは下で上書きする */
  color: var(--text-muted);
}
/* ★ 押せる緑は草緑（--action）。読むだけの .badge--gf は --ok のまま。

   .badge--gf は「確認済」「稼働中」「いま有効」「小麦不使用」など
   押せない札で 10 か所以上使われている。あちらまで草緑にすると
   全部「押せそう」に見えるので、草緑にするのは .badge--act と重なったときだけ。 */
.badge--act.badge--gf    { color: var(--action); }
.badge--act.badge--stop  { color: var(--danger); }
.badge--act.badge--draft { color: var(--info); }
/* カーソルに頼らない目印。タッチの端末では hover が起きないので、
   静止した状態で見えるものが要る */
.badge--act::after {
  content: "\25B8";           /* ▸ */
  font-size: .625em;
  opacity: .55;
  margin-left: 1px;
}
.badge--act:hover  { filter: brightness(.95); }
.badge--act:active { transform: translateY(1px); box-shadow: none; }
.badge--act:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.status-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 12px;
  border-radius: var(--r-full);
  font-size: .8125rem;
  font-weight: 700;
  letter-spacing: .06em;
  border: 1px solid currentColor;
}
.status-chip::before {
  content: "";
  width: 7px; height: 7px;
  border-radius: 50%;
  background: currentColor;
}

/* --------------------------------------------------------------------------
   9. メニュー一覧
   -------------------------------------------------------------------------- */
.menu-item {
  display: grid;
  grid-template-columns: 92px 1fr;
  gap: var(--sp-4);
  padding: var(--sp-4);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  text-decoration: none;
  color: inherit;
  box-shadow: var(--shadow-sm);
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.menu-item:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  border-color: var(--border-strong);
}
/* --------------------------------------------------------------------------
   売り切れの見せ方

   もとは .menu-item 全体を opacity: .55 にしていた。
   これだと「売り切れ」バッジまで一緒に薄くなり、
   いちばん見せたい情報がいちばん見えなくなる。逆効果だった。

   ★ 一度は写真を白黒にしたが、やめた。
     たしかに一目で分かる。ただ、メニューは「食べたい」と思わせる場所で、
     白黒の料理写真はその気持ちを削ぐ。
     売り切れの品も、次に来たときは頼めるかもしれない。
     色を奪うのは、伝えたいこと（いまは頼めない）に対して代償が大きすぎた。

   いま効かせているのは 3 つだけ。
     背景  … 一段沈める（カード自体が引っ込んで見える）
     文字  … 少し落とす（読めなくはしない。値段は知りたい）
     バッジ… 塗りつぶして強調する
   写真はそのまま。料理は美味しそうなままにしておく。
   -------------------------------------------------------------------------- */
.menu-item.is-soldout { opacity: 1; background: var(--surface-2); }
.menu-item.is-soldout:hover { transform: none; box-shadow: var(--shadow-sm); }

.menu-item.is-soldout .menu-item__name,
.menu-item.is-soldout .menu-item__desc,
.menu-item.is-soldout .menu-item__price {
  color: var(--text-faint);
}

.menu-item__thumb {
  width: 92px;
  height: 92px;
  border-radius: var(--r-sm);
  object-fit: cover;
  background: var(--surface-2);
}

/* 画像未登録のときのプレースホルダ。焼き目の縞をそのまま絵にする */
.menu-item__thumb--empty {
  display: grid;
  place-items: center;
  font-family: var(--font-serif);
  font-size: 1.5rem;
  color: var(--text-faint);
  background-image: repeating-linear-gradient(
    -45deg,
    var(--surface-2) 0 6px,
    var(--bg) 6px 12px
  );
}

.menu-item__name {
  font-family: var(--font-serif);
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: .03em;
  margin: 0 0 2px;
}

.menu-item__desc {
  font-size: .8125rem;
  color: var(--text-muted);
  line-height: 1.6;
  margin: 0 0 var(--sp-2);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.menu-item__price {
  font-family: var(--font-num);
  font-size: 1.0625rem;
  font-weight: 700;
  letter-spacing: .02em;
}
.menu-item__price small {
  font-size: .6875rem;
  font-weight: 400;
  color: var(--text-faint);
  margin-left: 3px;
  letter-spacing: 0;
}

.menu-item__badges {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: var(--sp-2);
}

/* ★ 札が 1 つも無いときは、置き場ごと消す。

   フラグメントは中身が空でも枠だけは出す（中の札がそれぞれ条件付きのため）。
   札を品名の上へ移した結果、その空の枠が親の gap を 1 つ余分に生み、
   <b>札を持たない品まで品名が下がる</b>ことになった。
   札は付いている品のほうが少ないので、影響は全体に出る。

   ★ :empty ではなく :not(:has(*)) を使うこと。
     :empty は「子ノードが 1 つも無い」で、改行や字下げの空白も子として数える。
     Thymeleaf は条件が偽の要素を消したあとも空白を残すので、
     見た目は空でも :empty には一致しない（実際それで効かなかった）。
     :has(*) なら「中に要素があるか」だけを見るので、空白は関係ない。 */
.menu-item__badges:not(:has(*)) { display: none; }

/* 品名の上に置く場合、上の余白は親の gap が持つ。
   ここで margin-top を足すと、写真と札のあいだだけ広くなる */
.thumb > .menu-item__badges,
.drink-row__body > .menu-item__badges { margin-top: 0; }

/* 表示直後にふわりと持ち上げる。段差をつけて順に出す */
.reveal {
  animation: rise .5s cubic-bezier(.2, .7, .3, 1) backwards;
}
@keyframes rise {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .reveal { animation: none; }
  * { scroll-behavior: auto !important; }
}

/* --------------------------------------------------------------------------
   10. カテゴリタブ
   -------------------------------------------------------------------------- */
.tabs {
  position: sticky;
  top: var(--header-h);
  z-index: 40;
  display: flex;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-4);
  margin-inline: calc(var(--sp-4) * -1);
  overflow-x: auto;
  scrollbar-width: none;
  background: color-mix(in srgb, var(--bg) 92%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
}
.tabs::-webkit-scrollbar { display: none; }

.tab {
  flex: 0 0 auto;
  padding: 6px 14px;
  border-radius: var(--r-full);
  border: 1px solid var(--border-strong);
  background: var(--surface);
  color: var(--text-muted);
  font-size: .875rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-decoration: none;
  white-space: nowrap;
}
.tab:hover { color: var(--text); }
.tab.is-active {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--on-accent);
}

/* --------------------------------------------------------------------------
   11. フォーム
   -------------------------------------------------------------------------- */
.field { margin-bottom: var(--sp-4); }

/* ★ 2026-09-22：700 → 500（設計に寄せる）。設計は ト10b が Medium(500)、
     食材の画面が Regular(400)。700 はどちらより太く、項目名が
     入力した値より目立っていました。 */
.label {
  display: block;
  font-size: .8125rem;
  font-weight: 500;
  letter-spacing: .06em;
  color: var(--text-muted);
  /* 入力枠との間は 8px（設計の入力欄部品 45:3110 の gap-8）。
     もとは 6px で、Fable の検証（2026-09-07）で全欄 2px 詰まっていると分かった。
     この値は全フォーム共通。 */
  margin-bottom: 8px;
}
.label .req {
  color: var(--danger);
  font-size: .6875rem;
  margin-left: 4px;
}

.input, .select, .textarea {
  width: 100%;
  min-height: var(--tap);
  padding: 10px var(--sp-3);
  font-family: inherit;
  font-size: 1rem;   /* iOS で 16px 未満だとフォーカス時に拡大されるので下げない */
  color: var(--text);
  background: var(--bg-elevated);
  border: 1px solid var(--border-strong);
  /* ★ 2026-09-20：var(--r-sm) をやめて直値 8px。ボタン・札と同じ値です。
       --r-sm は :root 6 / .theme-snow 12 / .theme-desk 4 と層ごとに変わるので、
       同じ入力欄がお客さま側 12px・店側 4px に割れていました（ボタンと同じ罠）。
     ★ 設計（Figma）の入力は角 0 ですが、そちらには寄せていません。
       店主が「ボタンも札も 8px」と決めた直後で、同じ行に並ぶ入力だけ角 0 だと
       そろえた意味が消えるためです。0 に寄せたいときはここを 0 にしてください。 */
  border-radius: 8px;
  transition: border-color .12s ease, box-shadow .12s ease;
}
.textarea { min-height: 88px; resize: vertical; line-height: 1.7; }

.input:focus, .select:focus, .textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent);
}

.input.is-error, .select.is-error, .textarea.is-error { border-color: var(--danger); }

/* 数字を数文字入れるだけの欄。全幅にすると、隣のボタンを潰したうえに
   「たくさん書く欄」に見えて、入力の手が止まる */
.input--narrow { max-width: 8rem; }

.help  { font-size: .75rem; color: var(--text-faint); margin-top: 4px; }
.error { font-size: .8125rem; color: var(--danger); margin-top: 4px; font-weight: 600; }

/* 選択肢（ラジオ／チェック）をカード状にして押しやすくする */
.choice {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  min-height: var(--tap);
  padding: var(--sp-2) var(--sp-3);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: var(--surface);
  cursor: pointer;
  transition: border-color .12s ease, background-color .12s ease;
}
.choice + .choice { margin-top: var(--sp-2); }
.choice:hover { border-color: var(--border-strong); }
.choice input { width: 20px; height: 20px; accent-color: var(--accent); flex: 0 0 auto; }
.choice:has(input:checked) {
  border-color: var(--accent);
  background: var(--accent-soft);
}
.choice.is-soldout { opacity: .5; cursor: not-allowed; }
.choice__name { flex: 1; font-size: .9375rem; }
.choice__price { font-family: var(--font-num); font-size: .875rem; color: var(--text-muted); }

/* 数量ステッパー */
.qty {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-sm);
  overflow: hidden;
  background: var(--surface);
}
.qty__btn {
  width: 44px; height: 44px;
  display: grid; place-items: center;
  border: 0;
  background: transparent;
  color: var(--text);
  font-size: 1.25rem;
  cursor: pointer;
}
.qty__btn:hover { background: var(--surface-2); }
.qty__value {
  min-width: 48px;
  text-align: center;
  font-family: var(--font-num);
  font-size: 1.0625rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  border: 0;
  background: transparent;
  color: var(--text);
}

/* --------------------------------------------------------------------------
   12. お知らせ（アラート）
   -------------------------------------------------------------------------- */
/* お知らせの帯。

   ★ 上下の余白を既定で持たせています（2026-09-17・店主の指摘）。
     それまでは内側の余白しか持っておらず、前後の要素に張り付いていました。
     画面側で mt-4 を足して逃げていましたが、71 か所のうち余白クラスが
     付いていたのは 21 か所だけ。残りは書いた人が気づかないまま
     張り付いていたことになります。
     「使う側が毎回思い出さないと正しくならない部品」は部品のほうが悪い。

   ★ ユーティリティ（.mt-4 / .mb-0 など）は 1595 行あたり＝ここより後ろなので、
     今までどおり上書きできます。余白を消したいところは mb-0 のままで動きます。 */
.alert {
  margin: var(--sp-4) 0;
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--r-sm);
  border-left: 4px solid currentColor;
  font-size: .9375rem;
  font-weight: 500;
}
.alert p:last-child, .alert ul:last-child { margin-bottom: 0; }

/* --------------------------------------------------------------------------
   浮かせて出す報告（toast）— 2026-09-20
   --------------------------------------------------------------------------
   店主の指示「固定位置じゃなくて開いてるページトップ 40px からポッと出て来て
   3 秒したら上にゆっくり消えていく仕様にしたらいちいち上に戻るみたいな動作
   無くなっていいんじゃない？」。

   それまで報告は本文のいちばん上に<b>場所を取って</b>出ていました。
   100 品の下のほうで掲載を止めると、何が起きたかを読むために毎回
   いちばん上まで戻る必要がありました。

   ★ 上からの距離は toast.js が入れます。上の帯（.topbar）は sticky で
     常に残るので、その高さ＋40px です。帯の無い画面では 40px になります。
     CSS に 96px と書くと、帯の高さを変えたときにここだけ取り残されます。

   ★ pointer-events: none。浮いているあいだも下のボタンを押せます。
     3 秒とはいえ、押したい所に蓋をしてはいけません。

   ★ 色は .alert--success / .alert--info が持っています。
     ここでは<b>形と動きだけ</b>を決めます。 */
.toast-stack {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  z-index: 60;            /* 上の帯（30）より上、モーダルよりは下 */
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: center;
  width: max-content;
  max-width: min(720px, calc(100vw - 32px));
  pointer-events: none;
}
.toast {
  margin: 0;              /* .alert の上下 margin を消す。浮いているので要らない */
  padding: 16px 24px;
  border-left: 0;         /* .alert の左の線は流れの中用。浮く札では枠が主役 */
  border-radius: 8px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, .16);
  font-size: 16px;
  text-align: center;
  /* 出る 0.18 秒 → 3 秒待つ → 0.5 秒かけて上へ消える */
  animation: toast-in .18s ease-out, toast-out .5s ease-in 3s forwards;
}

/* ★ 浮かせるときは地に色を付けます（設計 試作C 1290:14070）。
     流れの中の .alert--success は「白地＋緑の左線＋✓」ですが、
     これは<b>本文の一部として読む</b>ための形です。
     浮いた札は本文から切り離れて出るので、地が白いと
     何の上に乗っているのか分からず、ただの四角に見えます。
   ★ .alert--success は display:flex（✓ を前に置くため）なので、
     text-align だけでは中央になりません。justify-content が要ります。 */
/* ★ 色は 2 つだけ（2026-09-20、店主の決定
     「警告ポップアップは赤、変更とかは緑で良いんじゃない？ポップアップは
       押せないものでしょ？」）。

     緑 … 変更が成った（掲載を止めた・品切れにした・材料を外した…）
     赤 … 警告／できなかった（アカウントを消した・選ばれていない・変わらなかった）

   ★ 2026-09-16 に「成功通知の面を緑で塗らない」と決めた件との関係。
     あのときの理由は「押せるボタン色と似ていて、押せるものに見える」でした。
     浮かせる札は 560px 幅・影つき・中央で、ボタンとは形がまるで違い、
     <b>押せるものが 1 つも無い</b>ので混ざりません。
     そのうえで、押せるボタンの緑（--action #0b7a1a）と --ok-soft は
     使いません（ActionGreenTokenTest が見張っています）。

   ★ 青（info）は廃止しました。「変更が成った」のに青で出るものと
     緑で出るものが混ざっていて、色が何も言っていませんでした。 */
/* ★★ 文字色も必ず書くこと（2026-09-22 に事故を直した）。
     地を #eef7f2 と<b>決め打ちにしたのに、文字色は var(--text) のまま</b>
     テーマから取っていた。お客さまの画面は .theme-night（暗い地）で
     --text が #ffffff なので、<b>薄緑の上に白文字</b>が出ていた。
     コントラスト 1.09:1 ——「注文リストに追加しました」が読めない。

     地を決め打ちにしたら、文字も決め打ちにする。
     var() の文字色は var() の地とだけ組ませること。 */
.toast.alert--success {
  justify-content: center;
  background: #eef7f2;
  border: 1px solid #cfe6d8;
  color: #1c1c1c;   /* 15.6:1 */
}
/* ★ 赤は .alert--error に寄せます。新しい色名を作りません。
     .alert--warn はきつね色の<b>常設の案内</b>で既に 38 箇所（「カテゴリが
     ありません」「受付を止めています」）。あれは状態であって報告ではないので、
     同じ名前に赤を足すと、JS が動かなかったときに<b>同じクラスが
     画面によって赤ときつね色に割れます</b>。
     「うまくいかなかった」の赤は .alert--error として既にあるので、それを使います。 */
.toast.alert--error {
  justify-content: center;
  background: #fdebeb;
  border: 1px solid #f3cccc;
  /* ★ var(--danger) にしてはいけない（2026-09-22）。緑の札と同じ事故。
       .theme-night では #e28a80 で 2.23:1、明るいテーマの #d33f3f でも
       4.01:1 と、<b>どちらのテーマでも AA(4.5:1) に届いていなかった</b>。
       #9d3a32 は :root の --beni-600（--danger の本体）そのもの。
       新しい色を足さずに 5.92:1 まで上がる。 */
  color: #9d3a32;   /* 5.92:1 */
}
@keyframes toast-in {
  from { opacity: 0; transform: translateY(-12px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes toast-out {
  from { opacity: 1; transform: translateY(0); }
  to   { opacity: 0; transform: translateY(-16px); }
}

/* ★ 動きを減らす設定の端末では動かしません（974 行の方針と同じ）。
     消えること自体は残します——消えないと画面に札が積み上がります。 */
@media (prefers-reduced-motion: reduce) {
  .toast { animation: toast-out .01s linear 3s forwards; }
}
.alert ul { margin: 0; padding-left: 1.2em; }

.alert--info    { color: var(--info);   background: var(--info-soft); }
.alert--error   { color: var(--danger); background: var(--danger-soft); }
.alert--warn    { color: var(--accent); background: var(--accent-soft); }

/* ★★ 机で読む画面の常設案内は緑（2026-09-23・店主の判断
       「茶色のpopアップは緑に統一して」）。

   ★ 経緯。2026-09-22 に、ここを<b>きつね色</b>にしました。
     .theme-desk は --accent を --action（押せる緑 #0b7a1a）に差し替えているため、
     押せない帯が<b>押せる緑と同じ見た目</b>になっていたからです
     （税理士の今月のまとめ・消費税の集計で実測。地 #e6f4e8 / 字 #0b7a1a）。
     「緑は押せるものだけ」という決まりの、いちばん大きな破れでした。

   ★ それでも緑に戻した理由は、机の画面できつね色が<b>浮いていた</b>ことです。
     スタッフ側は白と緑で組んであり、茶色はお客さま側（暗い地・和モダン）の色でした。
     1 枚の画面に系統の違う色が混ざるほうが、規則の破れより目につきます。

   ★ 代わりに<b>形で見分けます</b>。帯は角丸 6px・面だけで、枠も影も持ちません。
     ボタンは枠か塗りを持ちます（.btn）。色が同じでも、押せるものには縁があります。

   ★ 戻したくなったらこの 1 行を
       color: var(--kitsune-700); background: var(--kitsune-100);
     に差し替えてください。お客さま側（.theme-night）は元からきつね色のままです。 */
.theme-desk .alert--warn { color: var(--action); background: var(--action-soft); }

/* 「追加しました」などの成功通知（2026-09-16・店主の判断）。
   もとは薄い緑の地に緑文字だった。

   ★ 押せるものを全部 1 つの緑にそろえた結果、面を緑で塗った通知が
     ボタンと同じ家族に見えるようになった。緑が「押せる」を意味しなくなる。
     押せないものをボタンと同じ見た目にすると、押して反応がない体験になる。

   ★ そこで面はグレーに落とし、「良い知らせ」は色ではなく ✓ に言わせる。
     色を 1 つの意味に絞ると、記号のほうが仕事をしてくれる。
     白地ではなくグレー地にしたのは、通知が出たこと自体に気づけるようにするため。

   ★ ✓ は CSS で足している。テンプレートを触らずに済むので、
     この見た目をやめたくなったらここだけ消せば戻る。 */
.alert--success {
  display: flex;
  align-items: baseline;
  gap: var(--sp-2);
  color: var(--text);
  background: var(--surface);
  border-left-color: var(--action);
}
.alert--success::before {
  content: "✓";
  color: var(--action);
  font-weight: 700;
  flex: none;
}

/* --------------------------------------------------------------------------
   13. カート（下部固定バー）
   -------------------------------------------------------------------------- */
.cart-bar {
  position: sticky;
  bottom: 0;
  z-index: 60;
  margin-top: var(--sp-6);
  padding: var(--sp-3) var(--sp-4) calc(var(--sp-3) + env(safe-area-inset-bottom));
  background: color-mix(in srgb, var(--bg) 92%, transparent);
  backdrop-filter: blur(12px);
  border-top: 1px solid var(--border);
}

.cart-bar__inner {
  max-width: var(--page-max);
  margin-inline: auto;
  display: flex;
  align-items: center;
  gap: var(--sp-3);
}

.cart-bar__summary { line-height: 1.3; }
.cart-bar__count { font-size: .75rem; color: var(--text-muted); }
.cart-bar__total {
  font-family: var(--font-num);
  font-size: 1.25rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.cart-line {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--sp-2) var(--sp-3);
  padding: var(--sp-4) 0;
  border-bottom: 1px solid var(--border);
}
.cart-line:last-child { border-bottom: 0; }
.cart-line__name { font-family: var(--font-serif); font-weight: 600; }
.cart-line__opts { font-size: .8125rem; color: var(--text-muted); }
.cart-line__price { font-family: var(--font-num); font-weight: 700; text-align: right; }

/* 合計欄 */
.total-table { width: 100%; border-collapse: collapse; }
.total-table td { padding: 6px 0; font-size: .9375rem; }
.total-table td:last-child { text-align: right; font-family: var(--font-num); font-variant-numeric: tabular-nums; }
.total-table tr.is-grand td {
  padding-top: var(--sp-3);
  border-top: 1px solid var(--border-strong);
  font-size: 1.25rem;
  font-weight: 700;
}

/* --------------------------------------------------------------------------
   14. 注文番号（お客さんの控え画面）
   -------------------------------------------------------------------------- */
.receipt {
  position: relative;
  text-align: center;
  padding: var(--sp-6) var(--sp-4);
  border-radius: var(--r-lg);
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-md);
  overflow: hidden;
}

/* 呼び出し中は、鉄板の熱が広がるような暖色の光を背後に置く */
.receipt.is-ready::before {
  content: "";
  position: absolute;
  inset: -40%;
  background: radial-gradient(circle at 50% 45%,
    color-mix(in srgb, var(--accent) 30%, transparent) 0%, transparent 62%);
  animation: heat 2.4s ease-in-out infinite;
  pointer-events: none;
}
@keyframes heat {
  0%, 100% { opacity: .55; transform: scale(1); }
  50%      { opacity: 1;   transform: scale(1.06); }
}

.receipt__label {
  position: relative;
  font-size: .75rem;
  letter-spacing: .3em;
  color: var(--text-faint);
  margin: 0 0 var(--sp-2);
}

.order-number {
  position: relative;
  font-family: var(--font-num);
  font-size: clamp(4.5rem, 26vw, 7rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.03em;
  margin: 0;
  color: var(--text);
}
.receipt.is-ready .order-number { color: var(--accent); }

.receipt__status { position: relative; margin-top: var(--sp-4); }

.receipt__wait {
  position: relative;
  margin-top: var(--sp-3);
  font-size: .9375rem;
  color: var(--text-muted);
}

/* 進捗のステップ表示 */
.steps {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  margin: var(--sp-5) 0 0;
  padding: 0;
  list-style: none;
}
.steps__item {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: .75rem;
  color: var(--text-faint);
  letter-spacing: .05em;
}
.steps__item + .steps__item::before {
  content: "";
  width: 28px;
  height: 1px;
  background: var(--border-strong);
  margin: 0 var(--sp-2);
}
.steps__dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  border: 2px solid var(--border-strong);
}
.steps__item.is-done  { color: var(--text-muted); }
.steps__item.is-done .steps__dot { background: var(--text-muted); border-color: var(--text-muted); }
.steps__item.is-current { color: var(--accent); font-weight: 700; }
.steps__item.is-current .steps__dot { background: var(--accent); border-color: var(--accent); }

/* --------------------------------------------------------------------------
   15. 厨房ボード
   -------------------------------------------------------------------------- */
.board {
  display: grid;
  gap: var(--sp-4);
  grid-template-columns: 1fr;
}
@media (min-width: 900px) {
  .board { grid-template-columns: repeat(3, 1fr); align-items: start; }
}

.lane {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  overflow: hidden;
}
.lane__head {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-4);
  border-bottom: 1px solid var(--border);
  font-family: var(--font-serif);
  font-weight: 600;
  letter-spacing: .1em;
}
.lane__head .count {
  margin-left: auto;
  font-family: var(--font-num);
  font-size: .8125rem;
  padding: 1px 9px;
  border-radius: var(--r-full);
  background: var(--surface-2);
  color: var(--text-muted);
}
.lane--received .lane__head { border-top: 3px solid var(--info); }
.lane--cooking  .lane__head { border-top: 3px solid var(--accent); }
.lane--ready    .lane__head { border-top: 3px solid var(--ok); }

.lane__body {
  padding: var(--sp-3);
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  min-height: 80px;
}

.lane__empty {
  padding: var(--sp-5);
  text-align: center;
  color: var(--text-faint);
  font-size: .875rem;
}

.ticket {
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: var(--bg-elevated);
  padding: var(--sp-3);
}
.ticket.is-late { border-color: var(--danger); box-shadow: 0 0 0 1px var(--danger) inset; }

.ticket__head {
  display: flex;
  align-items: baseline;
  gap: var(--sp-2);
  margin-bottom: var(--sp-2);
}
.ticket__num {
  font-family: var(--font-num);
  font-size: 1.75rem;
  font-weight: 800;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.ticket__name { font-size: .8125rem; color: var(--text-muted); }
.ticket__time { margin-left: auto; font-size: .8125rem; color: var(--text-faint); font-variant-numeric: tabular-nums; }
.ticket.is-late .ticket__time { color: var(--danger); font-weight: 700; }

.ticket__items { list-style: none; margin: 0 0 var(--sp-3); padding: 0; }
.ticket__items li {
  display: flex;
  gap: var(--sp-2);
  padding: 3px 0;
  font-size: .9375rem;
  border-bottom: 1px dashed var(--border);
}
.ticket__items li:last-child { border-bottom: 0; }
.ticket__qty {
  font-family: var(--font-num);
  font-weight: 700;
  min-width: 2.2em;
  color: var(--accent);
}
.ticket__opt { font-size: .75rem; color: var(--text-muted); }

.ticket__note {
  padding: var(--sp-2);
  border-radius: var(--r-sm);
  background: var(--accent-soft);
  color: var(--accent);
  font-size: .8125rem;
  font-weight: 600;
  margin-bottom: var(--sp-3);
}

.ticket__actions { display: flex; gap: var(--sp-2); }
.ticket__actions form { flex: 1; }
.ticket__actions .btn { width: 100%; }

/* --------------------------------------------------------------------------
   16. 呼び出しサイネージ
   -------------------------------------------------------------------------- */
.signage {
  min-height: 100dvh;
  background: var(--iron-900);
  color: var(--rice-50);
  display: flex;
  flex-direction: column;
  padding: clamp(16px, 3vw, 40px);
  background-image: repeating-linear-gradient(
    -45deg, rgba(255,255,255,.02) 0 2px, transparent 2px 10px);
}

.signage__head {
  display: flex;
  align-items: baseline;
  gap: var(--sp-4);
  padding-bottom: var(--sp-4);
  border-bottom: 1px solid rgba(255, 255, 255, .12);
}
.signage__shop {
  font-family: var(--font-serif);
  font-size: clamp(1.25rem, 3vw, 2rem);
  letter-spacing: .18em;
  margin: 0;
}
.signage__clock {
  margin-left: auto;
  font-family: var(--font-num);
  font-size: clamp(1rem, 2.5vw, 1.75rem);
  color: var(--rice-300);
  font-variant-numeric: tabular-nums;
}

.signage__panels {
  flex: 1;
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(16px, 2vw, 32px);
  padding-top: var(--sp-5);
}
@media (min-width: 800px) {
  .signage__panels { grid-template-columns: 1fr 1.4fr; }
}

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

.signage__panel-title {
  font-family: var(--font-serif);
  font-size: clamp(1rem, 2.4vw, 1.5rem);
  letter-spacing: .3em;
  color: var(--rice-300);
  margin: 0 0 var(--sp-4);
  padding-left: var(--sp-3);
  border-left: 4px solid currentColor;
}
.signage__panel--ready .signage__panel-title { color: var(--kitsune-400); }

.number-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(clamp(110px, 14vw, 190px), 1fr));
  gap: clamp(10px, 1.4vw, 20px);
  align-content: start;
}

.number-cell {
  display: grid;
  place-items: center;
  aspect-ratio: 5 / 3;
  border-radius: 14px;
  font-family: var(--font-num);
  font-size: clamp(2.5rem, 7vw, 5rem);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.03em;
  border: 2px solid rgba(255, 255, 255, .14);
  color: var(--rice-200);
  background: rgba(255, 255, 255, .035);
}

.number-cell--ready {
  color: var(--iron-900);
  background: linear-gradient(160deg, var(--kitsune-400), var(--kitsune-600));
  border-color: var(--kitsune-400);
  box-shadow: 0 0 40px -8px rgba(221, 154, 78, .6);
  animation: callout 1.8s ease-in-out infinite;
}
@keyframes callout {
  0%, 100% { box-shadow: 0 0 36px -10px rgba(221, 154, 78, .55); }
  50%      { box-shadow: 0 0 60px -6px rgba(221, 154, 78, .95); }
}

.signage__empty {
  color: rgba(255, 255, 255, .35);
  font-size: clamp(1rem, 2vw, 1.5rem);
  padding: var(--sp-6) 0;
}

/* --------------------------------------------------------------------------
   17. テーブル（管理画面）
   -------------------------------------------------------------------------- */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }

.table {
  width: 100%;
  border-collapse: collapse;
  font-size: .9375rem;
  white-space: nowrap;
}
.table th, .table td {
  padding: var(--sp-3);
  border-bottom: 1px solid var(--border);
  text-align: left;
}
.table th {
  font-size: .75rem;
  letter-spacing: .08em;
  color: var(--text-muted);
  background: var(--surface-2);
  font-weight: 700;
  position: sticky;
  top: 0;
}
.table td.num, .table th.num { text-align: right; font-variant-numeric: tabular-nums; }

/* ★ .right を表の中でも効かせる（2026-09-02 修正）
   ユーティリティの .right（20 節）は詳細度 (0,1,0) で、
   すぐ上の .table th, .table td（0,1,1）に負けていました。
   そのため <th class="right"> は 13 テンプレート 37 箇所すべてで左寄せのまま、
   <td class="right"> も .num を併記したセルしか右に寄っていませんでした。

   見出しが左・数字が右で食い違って見えていた原因です。
   表の見出しをベタ塗りにするまで気づきにくい、古くからのずれでした。 */
.table th.right, .table td.right { text-align: right; }
/* この列だけ折り返しを許す。
   .table は既定で nowrap（狭い端末で表が崩れないようにするため）だが、
   長い商品名が 1 列を独占すると、右端の操作列が表示領域の外へ出てしまう。
   「押す列」を守るために、名前のほうを折り返させる。 */
.table td.wrap { white-space: normal; }
.table tbody tr:hover { background: color-mix(in srgb, var(--accent) 5%, transparent); }

/* --------------------------------------------------------------------------
   18. 数値パネル（売上）
   -------------------------------------------------------------------------- */
.stat {
  padding: var(--sp-4);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
}
.stat__label {
  font-size: .75rem;
  letter-spacing: .1em;
  color: var(--text-faint);
  margin: 0 0 4px;
}
.stat__value {
  font-family: var(--font-num);
  font-size: 1.75rem;
  font-weight: 800;
  line-height: 1.2;
  margin: 0;
}
.stat__unit { font-size: .875rem; font-weight: 500; color: var(--text-muted); margin-left: 2px; }

/* 棒グラフ（CSS だけで作る簡易版） */
.bars { display: flex; align-items: flex-end; gap: 4px; height: 140px; }
.bars__item { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; height: 100%; }
.bars__bar {
  background: linear-gradient(180deg, var(--kitsune-400), var(--kitsune-600));
  border-radius: 3px 3px 0 0;
  min-height: 2px;
}
.bars__label { font-size: .625rem; color: var(--text-faint); text-align: center; margin-top: 4px; }

/* --------------------------------------------------------------------------
   19. 印刷（QR ポップ）

   設計 ト13b「QR まとめて印刷（印刷シート）」841:10452 に合わせています
   （2026-09-20）。それまでは 1 卓 = 1 枚で、手順 ①〜④ と「ご請求額は…」まで
   刷っていました。設計の札は 卓名・QR・一行の案内・URL だけです。

   ★ 単位を mm で書いている理由（px で写すと紙の上で 1.24 倍になる）。
     設計の A4 は 640x905px で、640px が 210mm。つまり 3.048px/mm です。
     いっぽう CSS の px は印刷時に 1/96 インチ = 3.78px/mm に固定されます。
     同じ「220px」でも、設計では 72mm、CSS では 58mm と別物になります。
     だから設計値は割り算して mm で書きます（QR 220 ÷ 3.048 = 72mm）。

   ★ 1 枚に 2 卓。破線は飾りではなく、切って卓に置くための切り取り線です。
   -------------------------------------------------------------------------- */
@page { size: A4; margin: 7.9mm 15.7mm; }   /* 設計の紙の余白 24px / 48px */

.print-sheet {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5.3mm;                    /* 設計 16px */
  height: 135mm;                 /* 設計 412px */
  padding: 6.6mm 0;              /* 設計 20px */
  text-align: center;
  background: #fff;
  border: 1px dashed #c7c7c7;    /* 切り取り線 */
  border-radius: 0;
  /* 札が途中で改ページされると、切り取り線の内側で紙が変わってしまう */
  break-inside: avoid;
  page-break-inside: avoid;
}
.print-sheet + .print-sheet { margin-top: 7.9mm; }   /* 設計 札の間 24px */

.print-sheet__shop  { margin: 0; font-size: 4.6mm;  color: #828282; }   /* 設計 14px */
.print-sheet__table { margin: 0; font-size: 10.5mm; line-height: 1.2;
                      font-weight: 700; color: #1c1c1c; }               /* 設計 32px Bold */
.print-sheet__qr    { display: block; width: 72mm; height: 72mm; margin: 0; }  /* 設計 220px */
.print-sheet__lead  { margin: 0; font-size: 5.3mm; color: #1c1c1c; }    /* 設計 16px */
.print-sheet__url   { margin: 0; font-size: 3.9mm; color: #828282;
                      word-break: break-all; }                          /* 設計 12px */

@media print {
  .no-print, .app-header, .cart-bar { display: none !important; }
  body { background: #fff; color: #000; }

  /* 2 卓ごとに改ページ。最後の札に付けると白紙が 1 枚増えるので外す */
  .print-sheets > .print-sheet:nth-child(2n):not(:last-child) { page-break-after: always; }
  /* 改ページ直後の札に札間の余白を足さない（紙の上端からずれる） */
  .print-sheets > .print-sheet:nth-child(2n+1) { margin-top: 0; }
}

/* --------------------------------------------------------------------------
   20. ユーティリティ
   -------------------------------------------------------------------------- */
.muted   { color: var(--text-muted); }
.faint   { color: var(--text-faint); }
.small   { font-size: .8125rem; }
.tiny    { font-size: .75rem; }
.center  { text-align: center; }
/* img はグローバルで display: block にしてある（下に隙間ができるのを防ぐため）。
   ブロック要素は text-align では中央に寄らないので、余白を自動にして寄せる。
   .center の中の文字だけ中央、画像は左のまま、という食い違いが起きていた。 */
.center > img { margin-inline: auto; }
.right   { text-align: right; }
.bold    { font-weight: 700; }
.serif   { font-family: var(--font-serif); }
.mt-0 { margin-top: 0; }
.mb-0 { margin-bottom: 0; }
.mt-4 { margin-top: var(--sp-4); }
.mt-6 { margin-top: var(--sp-6); }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.empty-state {
  text-align: center;
  padding: var(--sp-8) var(--sp-4);
  color: var(--text-faint);
}
.empty-state__mark {
  font-family: var(--font-serif);
  font-size: 2.5rem;
  opacity: .35;
  margin-bottom: var(--sp-3);
}

.app-footer {
  padding: var(--sp-5) 0 calc(var(--sp-6) + env(safe-area-inset-bottom));
  border-top: 1px solid var(--border);
  color: var(--text-faint);
  font-size: .75rem;
  text-align: center;
  letter-spacing: .06em;
}

/* ==========================================================================
   21. SnowUI テーマ「.theme-snow」（2026-08-18: スタッフ側 → 08-18夜: お客さん側にも拡大）
   --------------------------------------------------------------------------
   配色・質感の上書き。
   参考: Figma Community「Dashboard UI Kit (SnowUI)」
     ・白基調、色はほぼ「黒の透過階調」だけで組む（100/40/20/10/4%）
     ・カードは枠線なし・薄いグレー面 #F7F9FB・角丸大きめ
     ・数値カードだけパステル 2 色（#E3F5FF / #EDEEFC）で差す
     ・アイコンは Phosphor duotone（fragments/icons.html）

   仕組み: body に .theme-snow が付くと、ここで CSS 変数を上書きする。
   既存の部品（.card .btn .table .stat …）は全部トークン経由で
   色を参照しているので、変数の差し替えだけで全画面が転調する。

   ★ 適用範囲を間違えないこと（2026-09-01 追記）
     .theme-snow は customer / staff / accountant / plain の
     <b>4 レイアウト全部</b>に付いている。08-18 夜にお客さん側へ広げたため。
     ここに「スタッフ側だけ変えたい」ものを書くと、必ず注文画面に漏れる。
     管理側だけを変えたいときは 30 節の .theme-desk を使う。
   ========================================================================== */
.theme-snow {
  --bg:            #ffffff;
  --bg-elevated:   #ffffff;
  --surface:       #f7f9fb;
  --surface-2:     #eef1f4;
  --text:          #1c1c1c;
  /* ★ 2026-09-22・店主の決定「グレーは #828282」。
       透明度で作るのをやめ、色で書きます。合成後の見た目は同じですが、
       地が白でないところ（淡い札の上など）で色が変わらなくなります。 */
  --text-muted:    #828282;
  --text-faint:    rgba(28, 28, 28, .38);
  --border:        rgba(28, 28, 28, .10);
  --border-strong: rgba(28, 28, 28, .20);

  /* SnowUI の主役は「黒」。押せるものは黒、が基本文法 */
  --accent:        #1c1c1c;
  --accent-hover:  #000000;
  --accent-soft:   rgba(28, 28, 28, .05);
  --on-accent:     #ffffff;

  /* --------------------------------------------------------------------
     押せるものの緑（2026-09-16 に派生を整え、この層へ移した）

     ★ ここに置く理由。ログイン画面は layout/plain で .theme-desk が
       付かない。.theme-desk に置くと参照できず、ベタ書きに戻るしかない。
       4 レイアウト共通のこの層なら、どの画面からでも同じ栓を握れる。

     ★ 定義するだけでは何も変わらない。参照した場所だけが緑になる。
       いま参照しているのは .theme-desk のボタンとログインのボタンだけで、
       お客さん側のボタンは --accent（黒）のまま。

     ★ ティール（--green-700 #0b7a78）との違いは「青の量」だけ。
       R=11 G=122 は両方同じで、青を 120 → 26 に落としてある。
       明度はむしろわずかに暗い（対白 5.16:1 → 5.51:1）。
       つまり明るくしたのではなく、くすみを取った。
       色相 179 度（ほぼシアン）→ 128 度（緑）。

     ★ なぜこの明度で止めるか。もっと明るくすると対白が 4.5:1 を割り、
       白地に緑文字（.recbtn の枠と文字）で読めなくなる。
     -------------------------------------------------------------------- */
  --action:        #0b7a1a;   /* 押せる（対白 5.51:1） */
  --action-hover:  #0a6b17;   /* 押している間・hover。--action より一段暗く */
  /* ★ 2026-09-22：#e6f4e8 → #ddf0e0（設計に寄せる）。
       サイドバーの現在地・アカウントの丸・未処理札・ご要望メモ・おすすめ札が
       設計より明るく、実測で 4 画面ぶん同じ差が出ていました。
       ここ 1 行で 16 箇所が揃います（var(--action-soft) を読んでいる数）。 */
  --action-soft:   #ddf0e0;   /* 押せるものの薄い面（hover の地・選択の残り香） */
  --on-action:     #ffffff;   /* 草緑の上に載せる文字（対 --action 5.51:1） */
  --action-danger: #c94444;   /* 押したら戻しにくい（対白 4.78:1） */

  --ok:            #3f8e6d;
  --ok-soft:       #def8ee;
  --danger:        #d33f3f;
  --danger-soft:   #fdebeb;
  --info:          #4e5ba6;
  --info-soft:     #edeefc;

  --shadow-sm: none;
  --shadow-md: 0 1px 2px rgba(28, 28, 28, .04);
  --shadow-lg: 0 8px 24px rgba(28, 28, 28, .08);

  --r-sm: 12px;
  --r-md: 16px;
  --r-lg: 20px;

  /* 明朝はブランド専用に格下げし、見出しもゴシックで組む */
  --font-serif: var(--font-sans);

  color: var(--text);
  background-color: var(--bg);
}

/* 紙のノイズテクスチャは和モダン専用。SnowUI はフラットな白 */
body.theme-snow { background-image: none; }

/* ==========================================================================
   21-2. お客さまの注文画面の配色（.theme-night）— 2026-09-05
   --------------------------------------------------------------------------
   設計（Figma「02 スマホ（お客さん）」暗00〜暗24）の配色。
   <b>お客さま側だけ</b>に付けます。店側は .theme-snow のままです。

   ★ なぜ暗くするのか
     この画面は店の照明の下、片手で持ったスマホで見ます。
     白い面いっぱいの画面は、暗い店内では顔に光が当たって眩しく、
     卓の上で目立ちすぎます。地を落とすと、料理の写真だけが浮きます。

   ★ .theme-snow の「押せるものは黒」は、ここでは使えません
     地が黒いので、黒は押せる印になりません。
     暗い画面では<b>きつね色が唯一の押せる色</b>です。
     だから CLAUDE.md の「アクセント色は押せるもの・熱いものだけ」が
     いっそう効きます。ここできつね色を飾りに使うと、押す場所が消えます。

   ★ 3 層のどこに置くか
     :root（全画面の土台）は触りません。ここは .theme-snow と同じ段の
     「配色」の層で、body に付け替えるだけで入れ替わります。
     ========================================================================== */
.theme-night {
  /* ★ お客さま側だけ、本文の幅をスマホのままにする（2026-09-06）。

     :root の --page-max は 720px です。スタッフ側（管理・厨房・ホール・税理士）は
     机の画面で表を読むので、その幅が要ります。
     ところがお客さま側は<b>390px でしか描かれていません</b>。
     720px で開くと本文の幅がほぼ倍になり、サムネイル 112px はそのままなので
     横に散らばります。実機と比べたときに「横長」に見えるのはこれです。

     440 にしてあるのは、いまいちばん広いスマホ（iPhone 16 Pro Max = 440pt）でも
     左右に黒い帯が出ないためです。390 で止めると、大きい端末で
     左右 25px ずつ地の色が見えます。実機で損をしてまで
     PC の見え方をそろえる理由はありません。

     440 を超える画面（PC・タブレット・横向き）では、
     440px の柱が中央に立ちます。スマホと同じ比率で確認できます。

     ここに書けば .container / .tabbar / .tabs / .cartbar / .submitbar が
     まとめて追従します（どれも var(--page-max) を読んでいる）。
     :root を触ってはいけません。スタッフ側まで細くなります。 */
  --page-max:      440px;

  --bg:            #141414;   /* 地 */
  --bg-elevated:   #202020;   /* 一段持ち上げた面（本文の地） */
  --surface:       #232323;   /* カード・行の面 */
  --surface-2:     #202020;
  --text:          #ffffff;
  --text-muted:    #9e9e9e;
  --text-faint:    #7a7a7a;
  --border:        #333333;
  --border-strong: #444444;

  /* 暗い地の上では、きつね色だけが押せる色 */
  --accent:        #dd9a4e;
  --accent-hover:  #e8ab63;
  --accent-soft:   #2a2118;
  /* ボタンの文字は白ではなく地の色。きつね色の上に白を載せると読みにくい */
  --on-accent:     #141414;

  --ok:            #7fbf9a;
  --ok-soft:       #1e2a24;
  --danger:        #e28a80;
  --danger-soft:   #2e1e1c;
  --info:          #9aa3d8;
  --info-soft:     #1f2130;

  --shadow-sm: none;
  --shadow-md: none;
  --shadow-lg: 0 8px 24px rgba(0, 0, 0, .45);

  --r-sm: 8px;
  --r-md: 8px;
  --r-lg: 12px;

  --font-serif: var(--font-sans);

  color: var(--text);
  background-color: var(--bg);
}

body.theme-night { background-image: none; }

/* 見出しの「和」の演出は落とす（.theme-snow と同じ扱い） */
.theme-night .section-title__text { letter-spacing: 0; }
.theme-night .section-title::after { display: none; }

/* 節見出し（設計「暗/節見出し」358x28）

   左にきつね色の丸 10px、間 8px、16px の太字、右端に品数を 14px の灰色で。
   丸は ::before で描く。同じ場所に ::after で罫線を引いていたものを
   上で消してあるので、片方を出して片方を消す形になる。 */
.theme-night .section-title {
  align-items: center;
  gap: 8px;
}
.theme-night .section-title::before {
  content: "";
  flex: none;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--accent);
}
.theme-night .section-title__text {
  font-size: 16px;
  font-weight: 700;
  /* 16 × 1.75 = 28。行高 28px が設計の見出しの高さそのものなので、
     既定の line-height に任せると崩れる */
  line-height: 1.75;
}
.theme-night .section-title__count {
  /* 品数は右端へ。間の余白は丸と見出しの 8px ではなく、余った幅ぜんぶ */
  margin-left: auto;
  font-size: 14px;
  line-height: 22px;
  letter-spacing: 0;
  color: var(--text-muted);
}

/* 価格はきつね色。設計では写真カード・飲み物の行・サムネイルのいずれも
   価格がきつね色で、白のままだと品名と同じ重みに見えて値段が探せない。
   （伝票の行だけは白。あちらは金額を読む画面なので別の部品） */
.theme-night .menu-item__price {
  color: var(--accent);
  /* 数字専用の書体をやめる。Helvetica だと「¥」と桁区切りだけ和文と別書体になる。
     桁の縦ぞろえは tabular-nums で担保する（.price と同じ手当て） */
  font-family: var(--font-sans);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
}
.theme-night .menu-item__name { letter-spacing: 0; }

/* カードは枠線ではなく面の色で区切る */
.theme-night .card,
.theme-night .stat { border-color: transparent; box-shadow: none; background: var(--surface); }

/* 本文の地は、いちばん外の地より一段明るい。
   写真カードや行が「面の上に置かれている」ように見せるため。
   上の余白 16px は設計どおり（左右は中の .container が 16px 持っている） */
.theme-night .page__body { background: var(--bg-elevated); padding-top: 16px; }

/* 「注文リストに追加しました」の札（設計 暗25 / 370:3959）。

   ★ 分けているのは「色」ではなく「1 回きりかどうか」です（2026-09-06 に広げた）。
     もとは .alert--success（緑）だけをこの形にしていました。
     ところが「ご注文をキャンセルしました」は info（青）で、
     同じ 1 回きりの報告なのに左に線を引いた別の形で出ていました。
     設計（暗28）で両方が同じ札になったので、条件を色から is-transient に移しています。

     is-transient が付くのは、出した側が「1 回きりの報告」と言ったものだけです
     （fragments/common.html の flash）。
     常設の案内（お持ちする卓・お会計の場所・公開デモの説明）には付きません。
     あちらは読ませる文章なので、中央ぞろえにすると行頭が揃わず読みにくくなります。

     エラーにも付きません。エラーは複数行の箇条書きになることがあり、
     中央ぞろえだと読みにくいうえ、消えても困ります。

   ★ 色は指定しません。--ok / --info がそれぞれの塗りを持っているので、
     どの色の札でもこの 1 つの指定で形だけが揃います。
     ここで hex を書くと、テーマの色を変えたときにここだけ取り残されます。

   ★ 角丸 6px は設計の値。--r-sm は 8px なので、そこだけ合いません。
     トークンを 6 に変えると全画面の角が変わるため、この札にだけ効かせています。 */
/* ★ 「札」の形は 2 つの印から呼ばれます（2026-09-06 に is-notice を足した）。

     is-transient … 1 回きりの報告（数秒で消える）
     is-notice    … 消えないが、同じ札の形で出すもの
                    （店舗端末の「送っていない品があります」など）

   どちらも「押した結果」や「いま手が要る状態」を短く伝えるものなので、
   形は同じにしてあります。違うのは消えるかどうかだけです。

   ★ 常設の案内（お持ちする卓・お会計の場所・公開デモの説明）には
     どちらも付けません。あちらは読ませる文章で、
     中央ぞろえにすると行頭が揃わず読みにくくなります。 */
.theme-night .alert.is-transient,
.theme-night .alert.is-notice {
  /* 左だけの 4px をやめ、四辺を 1px で囲う。
     border の一括指定なので、.alert の border-left もこれで上書きされる */
  border: 1px solid currentColor;
  border-radius: 6px;
  text-align: center;
}

/* 文言に入れた改行をそのまま出す。
   幅まかせの折り返しだと「…確定し／ていません」のような
   意味の切れない場所で折れる（390 と 360 で折り返し位置も変わる）。

   ★ 箱ではなく中の <p> に付けること。
     箱に付けると、テンプレートの字下げ（<div> と <p> のあいだの改行）まで
     行として数えられ、上下に空行が 3 つずつ入って高さが 77 → 131px になる。
     <p> の中身は th:text がまるごと差し替えるので、
     余計な空白が入り込む余地がない。 */
.theme-night .alert.is-transient p,
.theme-night .alert.is-notice p { white-space: pre-line; }

/* --------------------------------------------------------------------------
   上の大分類タブ（お食事／ドリンク／サービス／伝票・会計）

   スマホの上端は時計やノッチがあるので、上に 32px 空けてから項目を置く。
   env(safe-area-inset-top) を足すのは、ノッチのある端末で
   タブの文字が時計に重なるのを避けるため。
   -------------------------------------------------------------------------- */
/* ★ 本文と同じ幅（--page-max）に収めて中央に置くこと。
   これはスマホの画面なので、PC で開いたときに帯だけ画面いっぱいに伸びると、
   720px の本文の上に 2000px の帯が乗った形になって縮尺が壊れる。
   本文が中央の 1 列にいるのだから、帯もその列の中にいる。 */
:root {
  /* 大分類タブの寸法。設計（Figma 暗/大分類タブ）は 390x70。
     ★ ここを直接 px で書き散らさないこと。
       カテゴリの帯（.tabs）はこの帯の下に固定するので、
       高さの出どころが 2 か所あると必ずずれる（実際ずれた。26 節を見ること）。 */
  --tabbar-item-h: 70px;
  --tabbar-top: 32px;
}

.tabbar {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  /* width:100% を明示する。親（.page）の並べ方によっては
     flex コンテナが内容の幅まで縮み、4 項目が中央に寄った短い帯になる */
  width: 100%;
  max-width: var(--page-max);
  margin-inline: auto;
  /* 左右 8px は設計（暗/大分類タブ 71:3438 の px-8）。
     0 にすると、選択中の面（#202020）が画面の端まで届いて
     帯そのものと地続きに見え、どれが選ばれているのか分かりにくくなる。
     8px 空けると、面が「タブ 1 つぶん」として見える。 */
  padding: calc(var(--tabbar-top) + env(safe-area-inset-top, 0px)) 8px 0;
  background: var(--bg);
  /* ★ 下の罫線は border ではなく内側の影で描く。
     border だと箱の外に 1px 足されるので、この帯の高さが
     「32 + 70 + 1」になり、下に固定するカテゴリの帯（--sticky-top）と
     端数でずれる（実測で 0.5px 重なった）。
     Figma の線はもともと箱の内側に描かれるので、内側の影のほうが設計にも忠実。 */
  box-shadow: inset 0 -1px 0 var(--border);
}
.tabbar__item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  height: var(--tabbar-item-h);
  /* 左右は 0。子は flex:1 なので、帯の左右 8px を引いた
     (390 − 16) ÷ 4 = 93.5px を自分で取る */
  padding: 10px 0;
  /* 角は丸めない。選択中の面（#202020）が下のカテゴリ帯と地続きに見えるのが
     設計の意図で、上角を丸めるとその繋がりが切れる */
  border-radius: 0;
  color: var(--text);
  text-decoration: none;
  font-size: 14px;
  /* 行送りを決め打ちにする。既定のままだと 14 × 1.6 = 22.4 になり、
     10 + 24 + 4 + 22 + 10 = 70 の積み上げが 0.4px ずつずれる */
  line-height: 22px;
  white-space: nowrap;
}
.tabbar__item .ic { width: 24px; height: 24px; }
/* 現在地はきつね色。暗い地では、きつね色だけが「いまここ」を言える */
.tabbar__item.is-active { background: var(--bg-elevated); color: var(--accent); }

/* --------------------------------------------------------------------------
   下に貼り付くカートバー

   ★ 本文の下に、バーの高さぶんの余白を作ること。
     入れないと最後の 1 品がバーに隠れ、
     「いちばん下の品だけ選べない」という壊れ方をする。
   -------------------------------------------------------------------------- */
.page--seated .page__body { padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px)); }

.cartbar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  /* タブ帯と同じ理由で本文の幅に収める。
     left/right を 0 にしたまま margin-inline:auto を効かせて中央に置く */
  max-width: var(--page-max);
  margin-inline: auto;
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  /* 下 23px は設計の 24px から上枠の 1px を返したもの
     （Figma の枠は面の内側にあり 96px に含まれる。CSS の border は外に足される）。
     行送りをすべて明示しているのも同じ理由で、
     既定のままだと文字の行間で高さが決まり 96px に収まらない */
  padding: 24px 16px calc(23px + env(safe-area-inset-bottom, 0px));
  background: var(--bg);
  border-top: 1px solid var(--border);
  text-decoration: none;
}
.cartbar__text  { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
/* 「注文未確定」を金額と同じ場所に置く。気づく場所と押す場所を離さない */
.cartbar__note  { font-size: 13px; line-height: 16px; font-weight: 500; color: var(--accent); }
.cartbar__total { font-size: 20px; line-height: 24px; font-weight: 700; color: var(--text); font-family: var(--font-num); }
.cartbar__go {
  flex: none;
  padding: 14px 24px;
  border-radius: 8px;
  background: var(--accent);
  color: var(--on-accent);
  font-size: 16px;
  line-height: 19px;
  font-weight: 700;
  white-space: nowrap;
}

/* 見出しの「和」の演出（字間・右へ抜ける罫線）を落としてミニマルに */
.theme-snow .section-title__text { letter-spacing: 0; }
.theme-snow .section-title::after { display: none; }

/* カード: 枠線を消して面の色だけで区切る（SnowUI 流）
   ★ .print-sheet はここから外しました（2026-09-20）。
     印刷の札の破線は飾りではなく「ここで切る」という指示なので、
     消すと紙の上でどこを切ればいいか分からなくなります。
     この 1 行のせいで、切り取り線は今日までずっと見えていませんでした。 */
.theme-snow .card,
.theme-snow .stat,
.theme-snow .lane {
  border-color: transparent;
  box-shadow: none;
}
.theme-snow .card__head { border-bottom-color: rgba(28, 28, 28, .06); }
.theme-snow .card__foot { border-top-color: rgba(28, 28, 28, .06); background: rgba(28, 28, 28, .02); }

/* 数値カード: 最初の 2 枚だけパステルで差す（キットの Overview と同じ手つき） */
.theme-snow .grid .stat:nth-child(1) { background: #e3f5ff; }
.theme-snow .grid .stat:nth-child(2) { background: #edeefc; }

/* 入力欄: 枠線を薄く、面をわずかに沈める */
.theme-snow .input,
.theme-snow .select,
.theme-snow .textarea {
  background: #ffffff;
  /* ★ 2026-09-22：rgba(28,28,28,.14)（実効 #dfdfdf）→ #c7c7c7。
       設計は画面によって #c7c7c7（ト10c/ト11b/ト11c/ト12b/ト04b/ト05f）と
       #e3e3e3（ト10b/ト14）に割れていたので、数の多いほうに寄せました。
       角丸は 8px のまま（店主の決定「ボタンも札も 8px」。設計の 0px は追わない）。 */
  border-color: #c7c7c7;
}

/* テーブルの見出し行はほぼ気配だけ */
.theme-snow .table th { background: rgba(28, 28, 28, .03); }

/* --------------------------------------------------------------------------
   サイドバーシェル（layout/staff.html 専用）
   -------------------------------------------------------------------------- */
/* サイドバーは 2 つの姿を持つ。

     232px 文字つき … 店長が机で使う。13 項目あるので、探すには名前が要る
      64px 帯       … 現場が立って使う。3 項目しか出ないので、名前より面積が要る

   ★ どちらになるかは「画面の幅」ではなく「画面の役割」で決める（2026-08-27 変更）

   もとは @media (max-width: 960px) だけで切り替えていた。
   ところが厨房・ホールで使うタブレットは 1024px ある。961px 以上なので
   判定に掛からず、現場には帯が一度も出ていなかった。
   下の @media に「現場は濡れた手で押すので文字より面積を優先する」と
   書いてあるのに、その現場にだけ届いていなかった。

   幅で分けようとしたのが間違いだった。1024px は「広い画面」だが
   「立って使う画面」でもある。幅と役割は別の軸で、重ねて 1 本にはできない。
   いまは layout/staff.html が /kitchen と /hall のときに .staff-shell--floor を付け、
   ここで帯にする。幅が本当に狭いとき（スマホ・縦向きタブレット）は
   これまでどおり @media でも帯にする。条件は 2 つ、姿は 1 つ。

   ★ 姿の違いは下の変数の差し替えだけで表す。
     部品ごとに display:none を並べると、条件が増えるたびに同じ行が増える。
     .theme-snow と同じやり方。 */
/* --------------------------------------------------------------------------
   上の帯（ヘッダー）— 2026-09-04

   営業中に「いま店がどうなっているか」を、画面を移らずに読める場所。
   高さは 64px。Figma は 88px だが、あれは 1432px の広い画面での寸法で、
   ここは 1024px のタブレットでも本文が十分に残る必要がある。
   帯に取られた高さは、そのまま「一度に見える注文の数」から引かれる。

   位置は sticky。スクロールしても状態は見えていてほしいが、
   fixed にすると本文の上端に余白を足す責任が別の場所に移るので、
   レイアウトの流れの中に置いたまま貼り付ける。
   -------------------------------------------------------------------------- */
.staff-frame {
  /* ★ 56px は Render のダッシュボードの実測値（2026-09-13）。
       設計 287:5547 は 88px でしたが、店主から「帯と見出しの寸法を
       Render にそろえてほしい」と指示があり、そちらを正としています。
       88 → 56 で本文が 32px ぶん増えます（盤面の伝票が 1 レーンあたり
       0.2 枚ぶん多く見える計算）。
     ★ 画面幅で変えないこと。32 節にあった 96px / 104px の段は外しました。
       Render は 3807px の画面でも 56px のままです。 */
  --topbar-h: 56px;
  /* 店名ブロックの幅。サイドバーと同じ値にして、右端をそろえる。
     ★ ここ（.staff-frame）に置くこと。
       .staff-shell に書くと、その外にあるヘッダーには届かない。 */
  --brand-w: 264px;
  /* 店名ブロックの左右の余白。
     ★ 数値を直に書かず変数にしてあるのは、広い画面で一緒に動かす必要があるためです。

       設計（287:5547 と 432:2046）がそろえているのは<b>文字の列</b>です。
         店名     … 余白 16 ＋ ロゴ 28 ＋ すきま 10 ＝ 54px
         サイドバー … 余白 12 ＋ 項目の余白 12 ＋ アイコン 20 ＋ すきま 10 ＝ 54px
       ロゴ 28px とアイコン 20px で大きさが違うので、中心は 4px ずれます。
       そろっているのは中心ではなく、その右にくる文字の頭です。

       32 節はサイドバー側（--sb-pad / --sb-item-pad / アイコン）だけを
       大きくしていたので、広い画面でこの 54px の関係が壊れていました。
       実測：1432px で 0px ／ 1920px で -6px ／ 2560px で -12px。
       値は 32 節（ファイル末尾）で一緒に動かします。 */
  --brand-pad-x: 16px;
  min-height: 100dvh;
}


/* アンカー（#item-◯）で飛んだとき、その行が上の帯の裏に潜らないようにする。
   帯は position:sticky なので、飛び先の上端に帯の高さぶんの逃げが要る。
   品切れ・残数の「押した行に戻る」で使う（kitchen/stock.html） */
.staff-frame [id] { scroll-margin-top: calc(var(--topbar-h) + 8px); }

.topbar {
  height: var(--topbar-h);
  display: flex;
  align-items: center;
  gap: 10px;
  /* 左は 0。左端の余白は店名ブロック（264px）の内側に持たせて、
     サイドバーの内側の余白と同じ位置から文字が始まるようにする */
  padding: 0 20px 0 0;
  background: #ffffff;
  /* ★ 罫線と補足の色は直値で書く（2026-09-13 に var から戻した）。
     設計（287:5547）は #e8e8e8 と #828282 だが、
     var(--border) は .theme-snow で rgba(28,28,28,.10)、
     var(--text-muted) は rgba(28,28,28,.55) に定義されている。
     白地では近い色に見えるものの、不透明度で書いた線は端末の表示倍率で
     さらに薄く丸められるため、設計どおりには出ない。
     この帯の中の #e8e8e8 / #828282 は、どれもその置き換えです。 */
  border-bottom: 1px solid #e8e8e8;
  position: sticky;
  top: 0;
  z-index: 30;
}

/* ★ 幅 264px は「たまたま」ではない。サイドバーと同じ幅にしてある。
     店名ブロックの右端と、サイドバーの右端（本文が始まる線）が一直線にそろう。
     内容の幅で縮める（hug）と、この線がずれて帯と本文の関係が崩れる。
     .topbar の左 padding 16 は店名ブロックの内側に持たせ、264 の中に含める */
.topbar__brand {
  flex: 0 0 var(--brand-w);
  width: var(--brand-w);
  /* 帯が 56px になったので、中の店名ブロックは 40px（上下に 8px ずつ残る）。
     Render のワークスペース切り替えも 56px の帯に対して 36px 級です */
  height: 40px;
  overflow: hidden;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 var(--brand-pad-x);
  /* 帯の gap は 10px（受付ピル→未提供ピルの値）。
     店名と受付のあいだだけ設計は 12px なので、2px 足して差を作る */
  margin-right: 2px;
  min-width: 0;
}
/* 店舗の切り替え（将来の複数店対応）。いまは押せないので印だけ置く */
.topbar__brand-caret { font-size: 12px; color: #828282; flex: none; }

/* ★ 設計（287:5547）では、ここは #0b7a78 で塗った 28px の丸です。
     実装は店のロゴ画像（/images/logo.jpg）のまま残しています。
     設計の丸は置き場所を示す仮置きで、2026-08-18 に
     「公式サイトと同じ画像を、のれんの紋として置く」と決めた経緯が
     CLAUDE.md の 22 節にあります。単色の丸に戻すと店の印が消えます。 */
.topbar__logo {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  object-fit: cover;
  flex: none;
  background: #fff;
  border: 1px solid #e8e8e8;
}
.topbar__brand-text { line-height: 1.25; min-width: 0; }
/* 帯の主要な文字はすべて 16px（Render の実測値）。画面幅では変えません */
.topbar__brand-name { display: block; font-size: 16px; font-weight: 700; white-space: nowrap; }
.topbar__brand-sub  { display: block; font-size: 12px; color: #828282; }

/* 受付の状態。丸い点＋文字。面は白のままで、点の色だけが状態を持つ。
   line-height を明示するのは、これを既定のままにすると
   ピルの高さが文字の行送りで決まってしまい、設計の 38px に収まらないため */
.topbar__state {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  /* 上下 9px は設計の 10px から 1px 引いたもの。
     Figma の枠線は面の内側に引かれるので、38px の中に枠の 1px が含まれる。
     CSS の border は padding の外に足されるため、同じ 10px にすると
     18 + 20 + 2 = 40px になって 2px 高くなる。枠のぶんを padding から返す */
  padding: 9px 17px 9px 15px;
  border: 1px solid #e8e8e8;
  border-radius: 999px;
  background: #ffffff;
  /* Render の帯の主要な文字は 16px。ここも合わせる（設計は 15px でした） */
  font-size: 16px;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
}
.topbar__dot { width: 10px; height: 10px; border-radius: 50%; flex: none; }
/* 修飾は is- 接頭辞。BEM の -- ではなく is- にしてあるのは、
   テンプレート側の th:classappend の式に __ を書けないため
   （Thymeleaf が __...__ を前処理の記号として読む）。layout/staff.html のコメント参照 */
.topbar__state.is-on  .topbar__dot { background: var(--ok); }
.topbar__state.is-off .topbar__dot { background: var(--danger); }
.topbar__state.is-off { color: var(--danger); border-color: var(--danger); }

/* 未提供の件数。押すと厨房ボードへ飛ぶ。0 件のときはテンプレート側で出さない */
.topbar__pending {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  /* 上下 9px の理由は .topbar__state と同じ（枠のぶんを padding から返す）。
     左右は設計どおり。中身が絵文字ではなくアイコン SVG なので、幅は文字送りで決まる */
  padding: 9px 12px 9px 14px;
  border: 1px solid var(--danger);
  border-radius: 999px;
  background: var(--danger-soft);
  color: var(--danger);
  font-size: 13px;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
}
.topbar__pending:hover { background: var(--danger); color: #fff; }
.topbar__pending:hover .ic { color: #fff; }
.topbar__pending .ic { width: 20px; height: 20px; flex: none; }
.topbar__pending-count { font-size: 16px; font-weight: 700; font-family: var(--font-num); }
.topbar__pending-go { font-size: 15px; font-weight: 700; }

.topbar__spacer { flex: 1; }

.topbar__day { display: inline-flex; align-items: baseline; gap: 8px; white-space: nowrap; }
.topbar__day-label { font-size: 13px; color: #828282; }
.topbar__day-value { font-size: 16px; font-weight: 700; font-family: var(--font-num); }

.topbar__divider { width: 1px; height: 20px; background: #e8e8e8; flex: none; }

.topbar__help {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid #e8e8e8;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
  color: #828282;
  text-decoration: none;
  flex: none;
}
.topbar__help:hover { background: rgba(28, 28, 28, .04); color: var(--text); }

.topbar__avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  /* 設計（287:5547）の #ddf0ec。文字は同系統のティール。
     ★ ここに「厨房・ホールでは黒になる」と書いてありましたが誤りでした
       （2026-09-13 に訂正）。layout/staff.html の body は
       class="theme-snow theme-desk" 固定なので、.theme-desk は
       厨房・ホールにも付きます。どの画面でもティールです。
       CLAUDE.md が 2026-09-07 に訂正したのと同じ取り違えが残っていました。 */
  background: var(--accent-soft);
  color: var(--accent);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
  flex: none;
}

/* 帯が置ける幅がないときは、店名と営業日だけ残して畳む。
   受付の状態と未提供は厨房ボードにも出るので、ここで無理に残さない */
@media (max-width: 720px) {
  .topbar { padding: 0 12px; gap: 8px; }
  .topbar__brand-text,
  .topbar__day-label,
  .topbar__divider,
  .topbar__help { display: none; }
  .topbar__state { padding: 8px 12px; font-size: 13px; }
}

.staff-shell {
  display: flex;
  /* 帯のぶんを引く。100dvh のままだと、帯の高さだけ縦スクロールが増える */
  min-height: calc(100dvh - var(--topbar-h, 0px));

  --sb-w: 264px;                    /* サイドバーの幅。ヘッダーの店名ブロックと同じ幅 */
  --sb-pad: 12px;                   /* サイドバーの内側の余白 */
  --sb-text: block;                 /* 文字（ブランド名・グループ見出し・項目名・アカウント名） */
  --sb-item-pad: 0 12px;            /* 項目の左右の余白。高さは --tap で確保する */
  --sb-item-justify: flex-start;
  --sb-brand-justify: flex-start;
  --sb-brand-pad: 8px;
  --sb-account-dir: row;
  --sb-account-pad: 10px 8px 4px;
  --sb-account-gap: 10px;
}

/* ★ 画面ごとに畳む .staff-shell--floor は 2026-09-05 に廃止した。
   厨房・ホール・品切れだけ 64px のアイコンの帯にしていたが、
   設計（Figma）に畳んだ姿は無く、全画面 264px で描いてある。

   サイドバーから厨房へ移った瞬間にナビが別物に変わると、
   いまどこにいるのかを読み直すことになる。行き先の名前も消えていた。
   「立って使うから文字より面積」という当初の判断より、
   「画面ごとにナビが変わらない」ほうが効く、と入れ替えた。

   幅が足りないとき（960px 以下）に畳むのは下の @media に残してある。
   あちらは物理的な理由なので、画面ごとの判断とは別の話。 */

.sb {
  flex: 0 0 var(--sb-w);
  width: var(--sb-w);
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--sb-pad);
  border-right: 1px solid var(--border);
  background: #ffffff;
  position: sticky;
  /* 上の帯のぶんだけ下げて貼り付ける。0 のままだと帯の裏に潜り込む */
  top: var(--topbar-h, 0px);
  height: calc(100dvh - var(--topbar-h, 0px));
  /* サイドバー全体ではなく、下の .sb__nav だけをスクロールさせる。
     全体をスクロールにしていたため、項目が多い店長の画面では
     いちばん下のログアウトが画面の外に出ていた（1024×768 で実測 830px）。
     アカウント欄は常に見えていないと、閉じ込められたように感じる。 */
  overflow: hidden;
}

.sb__brand {
  display: flex;
  align-items: center;
  justify-content: var(--sb-brand-justify);
  gap: 10px;
  padding: var(--sb-brand-pad);
  margin-bottom: 8px;
}
.sb__brand-mark {
  width: 28px; height: 28px;
  flex: none;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--accent);
  color: var(--on-accent);
  /* ブランドの一文字だけは明朝を残す（店の顔） */
  font-family: "Hiragino Mincho ProN", "Yu Mincho", serif;
  font-size: 15px;
}
.sb__brand-text { display: var(--sb-text); line-height: 1.3; min-width: 0; }
.sb__brand-name { display: block; font-weight: 700; font-size: 14px; white-space: nowrap; }
.sb__brand-sub  { display: block; font-size: 11px; color: var(--text-faint); }

/* スクロールするのはここだけ。min-height:0 が無いと flex の子は縮まず、
   はみ出したぶんがそのまま外へ出る（アカウント欄が押し出される） */
.sb__nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;

  /* ★ スクロールバーを場所を取らない形にすること。
     項目が多いのでこの中はスクロールするが、既定のスクロールバーは
     <b>幅を 23px も食う</b>。畳んだ帯（64px）では
     内側 47px のうち 24px しか残らず、
       ・項目がアイコン 1 つぶんに縮む
       ・--sb-item-justify: center が効かない（24px の中で中央に置いても動かない）
       ・アイコンが左端に寄る
     という壊れ方をしていた。実測して初めて分かった（clientWidth が 24px）。

     広いサイドバーでも 23px は大きい。項目名が早く折り返す。
     消してもホイールとドラッグでスクロールできる。 */
  scrollbar-width: none;
}
.sb__nav::-webkit-scrollbar { width: 0; height: 0; }

/* 小見出し。設計は 高さ28・余白 12/0/2/8・12px。
   左が 8px と項目（12px）より内側なのは、見出しは押せないので
   項目の面の左端ではなく、アイコンの位置に頭をそろえるほうが列として静かになるため */
.sb__label {
  display: var(--sb-text);
  margin: 0;
  padding: 12px 0 2px 8px;
  font-size: 12px;
  line-height: 14px;
  color: var(--text-muted);
}

.sb__item {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: var(--sb-item-justify);
  gap: 10px;
  /* CLAUDE.md の「タップ領域は 48px 以上」。
     もとは padding 9px 上下で実測 38px しかなく、規約を満たしていなかった。
     押しにくいぶんを補うために、ダッシュボードへ同じ行き先のボタンを
     6 つ並べていた（＝重複はこの高さ不足の症状だった）。
     高さを直したので、そちらは消してある。 */
  min-height: var(--tap);
  padding: var(--sb-item-pad);
  border-radius: 6px;
  /* ★ 16px / 行間 24px は Render の実測値（2026-09-13）。
       15px だったのを、店主から「小さい」と指摘されて上げました。
       ★ 画面幅で変えないこと。32 節にあった 17px / 19px の段は外しました。
         Render は 3807px の画面でも 16px のままです。
       ★ 下の 30-5 節に「本文より一段小さく保つ」という注記がありますが、
         それはこの 15px を前提にした話です。16px は本文と同じ大きさで、
         あちらの画面はそれで成立しています。 */
  font-size: 16px;
  line-height: 24px;
  color: var(--text);
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;

  /* ★ 幅いっぱいに広げること。
     広げないと項目は中身の幅（アイコン 1 つぶん＝24px）に縮み、
     --sb-item-justify: center が効かない（24px の中で中央に置いても動かない）。
     厨房・ホールの畳んだ帯（64px）で、アイコンが左端に寄って見えていた原因。
     押せる面も 24px しかなく、CLAUDE.md の「タップ領域は 48px 以上」も
     横方向については満たせていなかった。 */
  width: 100%;
}

.sb__item span { display: var(--sb-text); }
.sb__item:hover { background: var(--action-soft); color: var(--text); }

/* 現在地。設計（Figma）は 面 #ddf0ec ／ 文字とアイコン #0b7a78 ／ 太字。
   もとは面がグレー（黒の 5%）＋左に黒い縦棒で、SnowUI の流儀のままだった。
   店側のトンマナを白と緑にした時点で、ここだけ取り残されていた。

   ★ 左の縦棒は消した。
     設計に無いだけでなく、緑の面が付いた時点で二重の目印になる。
     「いまここ」を 2 つの記号で言うと、どちらが本体か分からなくなる。

   ★ 2026-09-16: ティール → 草緑（--action）。店主の判断。
     2 つの緑は明度がほぼ同じ（0.1535 と 0.1406）で、色相だけが違う。
     明度が違えば「強い／弱い」の階層になるが、同じ明度で色相だけ違う 2 色は
     階層ではなく「揃っていない」に見える。同じ画面にボタンと現在地が並ぶと、
     緑が 2 つあることのほうが先に目に入っていた。

     ★ 意味の区別は形が持っている。主ボタン＝ベタ塗り＋白文字、
       枠線ボタン＝白地＋緑枠、現在地＝薄い地＋太字。形がまったく違うので、
       色まで分ける必要がない。色は「このアプリの緑はこれ」を言うだけでよい。 */
.sb__item.is-active {
  background: var(--action-soft);
  color: var(--action);
  font-weight: 700;
}

.sb .ic { width: 20px; height: 20px; flex: none; }
/* アイコンは文字色に追従する（fill="currentColor"）。
   opacity を掛けていたのをやめた。設計では現在地のアイコンも
   ラベルと同じ緑の濃さで出る。薄めると、緑にした意味が半分消える。 */

/* アカウント欄（左下固定） */
/* .sb__nav が伸びるので margin-top:auto は要らない。
   flex-shrink:0 で、項目が増えてもここだけは縮まないようにする */
/* アカウント欄も同じ理由で広げる（畳んだ帯で左に寄っていた） */
.sb__account { width: 100%; }
.sb__account {
  flex: none;
  display: flex;
  flex-direction: var(--sb-account-dir);
  align-items: center;
  gap: var(--sb-account-gap);
  padding: var(--sb-account-pad);
  border-top: 1px solid var(--border);
}
.sb__avatar {
  width: 28px; height: 28px;
  flex: none;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--surface-2);
  font-size: 13px;
  font-weight: 700;
}
.sb__account-text { display: var(--sb-text); line-height: 1.3; min-width: 0; flex: 1; }
.sb__account-name { display: block; font-size: 13px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sb__account-role { display: block; font-size: 11px; color: var(--text-faint); }
.sb__logout-form { flex: none; }
.sb__logout {
  display: grid; place-items: center;
  /* ★ 36px → 44px（2026-09-26）。36px は Apple の下限 44pt を割っていました。 */
  width: var(--btn-h); height: var(--btn-h);
  border: 0; border-radius: 10px;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
}
.sb__logout:hover { background: rgba(28, 28, 28, .05); color: var(--text); }

/* コンテンツ側 */
.staff-main {
  flex: 1;
  min-width: 0;
  padding: 20px 28px 48px;

  /* ★ 幅の上限は付けない（2026-09-05）★
     いちどは 1168px で止めたが、それは「レスポンシブ」ではなく
     使わない幅を作っているだけだった。2560px で 1105px が丸ごと空く。
     ダッシュボードは幅を埋めるもの。

     「広い画面でサイドバーの字が小さく見える」は、下の
     @media (min-width: 1800px) で UI ごと一段上げて受ける。
     幅を狭めるのではなく、寸法のほうを画面に合わせる。 */
}

/* --------------------------------------------------------------------------
   幅が足りないときは帯（64px）に畳む。

   ★ 境目は 1380px（2026-09-13 に 960px から引き上げ）。
     もとは「960px 以下は全画面／1380px 以下は盤面だけ」の 2 本立てでしたが、
     Figma 07 の iPad 版を店主と見て「iPad は全画面アイコンだけ」に決めたので、
     1 本にまとめました。1380px は iPad 横の最大（12.9 型の 1366px）を含む線です。

     これで 1025〜1380px のノート PC でも管理画面のサイドバーが畳まれます。
     iPad（1024）の本文が 712 → 912px に広がり、商品の表が横スクロールなしで
     「販売」列まで見えるようになるのが狙いです。

   ★ 畳む条件は「幅が足りない」の 1 つだけにすること。
     画面ごとの出し分け（:has(.kitchenboard) など）は 2026-09-13 に廃止しました。
     同じ幅なのに画面によってサイドバーの姿が変わると、行き来したときに
     本文の開始位置が動いて読み手が迷います。
   -------------------------------------------------------------------------- */
@media (max-width: 1380px) {
  .staff-shell {
    --sb-w: 64px;
    --sb-pad: 12px 8px;
    --sb-text: none;
    --sb-item-pad: 0;
    --sb-item-justify: center;
    --sb-brand-justify: center;
    --sb-brand-pad: 4px;
    --sb-account-dir: column;
    --sb-account-pad: 8px 0 0;
    --sb-account-gap: 6px;
  }
  /* 店名ブロックも同じ幅にする。ここを 264px のままにすると、
     細い帯の上に太い店名が乗って右端がそろわない */
  .staff-frame { --brand-w: 64px; }
  .topbar__brand { padding: 0; justify-content: center; margin-right: 12px; }
  .topbar__brand-text,
  .topbar__brand-caret { display: none; }
}

/* 本文の余白は、ほんとうに狭いときだけ詰める（スマホ級）。
   1024px の iPad では 40 節の一段下げ（上下 48）が効くので、ここは触らない */
@media (max-width: 960px) {
  .staff-main { padding: 16px 16px 40px; }
}

/* ==========================================================================
   22. 店ロゴ（公式サイトと同じ画像 /images/logo.jpg）— 2026-08-18
   -------------------------------------------------------------------------- */
/* お客さん側ヘッダー。稲穂の円形ロゴを「のれんの紋」として置く */
.brand-logo {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  object-fit: cover;
  flex: none;
  background: #fff;   /* ロゴの白地を保つ（ダークモードでも紋として成立させる） */
}

/* スタッフ側サイドバーのブランドマーク */
.sb__brand-logo {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  object-fit: cover;
  flex: none;
  background: #fff;
  border: 1px solid var(--border);
}

/* ==========================================================================
   23. お客さん側の SnowUI 磨き込み（2026-08-18）
   --------------------------------------------------------------------------
   theme-snow をお客さん側にも適用したうえでの、QR注文フロー特有の調整。
   構造・文言・機能は一切変えず、見た目の文法だけを SnowUI に揃える。
   ========================================================================== */

/* のれんの二重線（和の記号）は外す。区切りは通常の 1px ボーダーだけで足りる */
.theme-snow .app-header::after { display: none; }

/* 店名のワードマークだけは明朝を残す（ロゴと同じ「店の顔」。
   theme-snow は --font-serif をゴシックに倒すので、ここだけ書体を明示する） */
.theme-snow .app-header__title {
  font-family: "Hiragino Mincho ProN", "Yu Mincho", YuMincho, "Noto Serif JP", serif;
}

/* メニューカード: 枠線を消して面(#F7F9FB)と角丸で区切る。ホバーは影でなく沈み色 */
.theme-snow .menu-item {
  border-color: transparent;
  box-shadow: none;
  border-radius: var(--r-md);
}
.theme-snow .menu-item:hover {
  transform: none;
  box-shadow: none;
  background: #f0f3f6;
  border-color: transparent;
}

/* 写真なしプレースホルダ: 焼き目ストライプ → フラットな面＋頭文字 */
.theme-snow .menu-item__thumb--empty {
  background-image: none;
  background-color: var(--surface-2);
}

/* カテゴリタブ: アクティブは黒（--accent がそのまま黒になるので実は無指定でOKだが、
   非アクティブの枠線を SnowUI らしく薄める） */
.theme-snow .tab { border-color: rgba(28, 28, 28, .12); }

/* 下部固定バー: 白面＋上ボーダーのみ（にじみ背景はそのまま活きる） */
.theme-snow .cart-bar { border-top-color: rgba(28, 28, 28, .08); }

/* 会計金額などの合計行の罫線もごく薄く */
.theme-snow .total-table tr.is-grand td { border-top-color: rgba(28, 28, 28, .15); }

/* ==========================================================================
   24. ジャンルのタブと、スワイプで切り替わる面（2026-08-19）
   --------------------------------------------------------------------------
   お客さんのメニュー画面。マクドナルドのモバイル注文と同じ形にしています。

     ・上のタブは画面に貼り付いたまま動かない（position: sticky）
     ・左右のスワイプでジャンルが切り替わる
     ・タブを押しても切り替わる

   スワイプは JavaScript で指の動きを追いかけているのではなく、
   ブラウザ標準の「横スクロール ＋ scroll-snap」でやっています。
   自前で実装すると慣性やはじきの加減が不自然になりがちですが、
   標準の仕組みに任せると OS 本来の動きがそのまま出ます。
   ========================================================================== */

/* --- タブ本体。既存の .tabs は sticky 済みなので、見た目だけ下線タイプにする --- */
.tabs {
  gap: 0;
  padding-inline: var(--sp-4);
}

.tab {
  /* 丸いピル型から、下線で選択を示す形に変える */
  border: 0;
  border-radius: 0;
  background: transparent;
  padding: 12px 16px 10px;
  font-size: .9375rem;
  cursor: pointer;
  position: relative;
  /* タブは指で押すものなので、確実に届く高さを確保する */
  min-height: 44px;
}

.tab.is-active {
  background: transparent;
  border-color: transparent;
  color: var(--text);
  font-weight: 700;
}

/* 選択中の下線。::after を伸ばすことで、文字幅にぴったり合う */
.tab::after {
  content: "";
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 0;
  height: 3px;
  border-radius: 3px 3px 0 0;
  background: var(--accent);
  transform: scaleX(0);
  transition: transform .18s ease;
}
.tab.is-active::after { transform: scaleX(1); }

@media (prefers-reduced-motion: reduce) {
  .tab::after { transition: none; }
}

/* --- 横に並ぶ面。ここをスワイプする --- */
.pager {
  display: flex;
  overflow-x: auto;
  /* mandatory: 指を離したら必ずどれかの面に吸い付く（中途半端な位置で止まらない） */
  scroll-snap-type: x mandatory;
  /* iOS で画面の端から戻る操作と喧嘩しないようにする */
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  /* 面の高さは中身なりにする。stretch のままだと全部いちばん高い面に揃ってしまう */
  align-items: flex-start;
  /* 高さは JS が表示中の面に合わせて詰める（menu.html の fitHeight）。
     何もしないと、いちばん高い面（ドリンク）に全部が引きずられ、
     お好み焼きを見ているとき下に何画面ぶんもの空白が続く */
  overflow-y: hidden;
}
.pager::-webkit-scrollbar { display: none; }

.pager__panel {
  flex: 0 0 100%;
  min-width: 0;          /* flex の子が中身の幅で押し広げられるのを防ぐ */
  scroll-snap-align: start;
  scroll-snap-stop: always;   /* 一気に何ジャンルも飛ばさない。1回のスワイプで1つ隣へ */
}

/* 面の中の余白。container が両側に付くので、ここでは上下だけ */
.pager__panel > .container {
  padding-top: var(--sp-4);
}

/* 指で払ったときに文字を選択してしまわないように（誤操作が地味に多い） */
.pager { -webkit-user-select: none; user-select: none; }
.pager a, .pager p { -webkit-user-select: text; user-select: text; }

/* ==========================================================================
   25. ヘッダーの作り直し（2026-08-19）
   --------------------------------------------------------------------------
   実機で「米粉と鉄板」が3行に折り返し、ヘッダーが背高くなっていた。
   ヘッダーは position: sticky で上に居座るので、背が高くなると
   その下に貼り付くはずのタブを覆い隠してしまう
   （タブが消えたように見えたのは、これが原因）。

   直し方は「折り返させない」こと。
   店名と卓名は1行に固定し、入りきらないぶんは … で省く。
   ========================================================================== */

.app-header__inner {
  /* 縦位置を揃えたまま、名前の側だけが縮むようにする */
  flex-wrap: nowrap;
}

/* 店名と卓名をまとめている箱。
   min-width: 0 を書かないと、flex の子は「中身より小さくならない」ため
   いくら nowrap にしても隣を押しのけて溢れる。ここが要点。 */
.app-header__inner > div {
  min-width: 0;
  flex: 1 1 auto;
}

.app-header__title {
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.app-header__sub {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 右側の「お席の伝票 / 注文リスト」は縮ませない。金額と点数は常に読めること */
.app-header__nav {
  flex: 0 0 auto;
  position: relative;   /* 未確定の吹き出しを、この中に絶対配置するため */
}

/* 画面が狭いときは、文字と余白を詰めて1行に収める */
@media (max-width: 480px) {
  .app-header__title { font-size: .9375rem; letter-spacing: .06em; }
  .app-header__sub   { font-size: .6875rem; letter-spacing: .04em; }
  .app-header__nav a { padding: 6px 7px; font-size: .8125rem; gap: 2px; }
  .brand-logo        { width: 32px; height: 32px; }
}

/* --------------------------------------------------------------------------
   未確定のお知らせ（注文リストの真下に出る赤い吹き出し）
   「追加した＝注文した」と思われるのが、実店舗でいちばん困る誤解。
   注文リストに何か入っているあいだ、押すべき場所を指して出し続ける。
   -------------------------------------------------------------------------- */
.pending-note {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 60;
  max-width: min(78vw, 320px);
  padding: 7px 11px;
  border-radius: var(--r-md);
  background: var(--danger);
  color: #fff;
  font-size: .75rem;
  font-weight: 700;
  line-height: 1.55;
  letter-spacing: .02em;
  white-space: normal;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .18);
  pointer-events: none;   /* 吹き出しが下のリンクを塞がないように */
}

/* 吹き出しの三角。注文リストのあたりを指す */
.pending-note::before {
  content: "";
  position: absolute;
  top: -5px;
  right: 26px;
  width: 10px;
  height: 10px;
  background: inherit;
  transform: rotate(45deg);
  border-radius: 2px;
}

/* --------------------------------------------------------------------------
   ヘッダーの高さを確定させ、タブをその真下に固定する（2026-08-19）

   当初は JavaScript でヘッダーの高さを測って CSS 変数に入れていましたが、
   測るタイミング（フォント読み込みの前後など）で 1px ずれ、
   タブとの間に細い隙間ができてスクロール中に下の文字がチラつきました。

   測るのをやめ、高さそのものを決め打ちにします。
   店名・卓名は 25章 で1行に固定してあるので、中身が高さを押し広げません。
   「測って合わせる」より「動かないようにする」ほうが確実です。
   -------------------------------------------------------------------------- */
.app-header__inner {
  height: var(--header-h);
}

/* タブを貼り付ける位置は 26 節の --sticky-top が 1 か所で持つ。
   ここにも top を書いていたが、上にいる帯が .app-header か .tabbar かで
   高さが違うため、2 か所に散らすと必ず片方が取り残される（実際そうなった）。 */

/* ==========================================================================
   26. 大カテゴリのタブを画面に固定する（2026-08-19）
   --------------------------------------------------------------------------
   sticky で書いていたが、実機ではスクロールすると上に消えていた。

   原因は position: sticky の性質。
   sticky は「親要素の箱の中でだけ」貼り付きます。
   タブを包んでいた <div> はタブと同じ高さしか無かったため、
   貼り付ける余地が 0 で、スクロールした瞬間に一緒に流れていました。
   （親を content 全体に広げれば sticky でも直りますが、
     入れ子の作りに依存しない fixed のほうが、あとから中身を足しても壊れません）

   fixed は流れから外れるので、
   ・タブの高さを決め打ちにする（--tabs-h）
   ・同じ高さの空箱 .tabs-slot を元の位置に置く
   の2つで、下のメニューが裏に潜らないようにしています。
   ========================================================================== */

:root {
  /* 設計（暗/お食事のカテゴリ・暗/ドリンクのカテゴリ）は 390x72。
     内訳は 上 16 ＋ チップ 40 ＋ 下 16。
     部品シートの「暗/カテゴリチップ 390x56」は下 16px を含まない見本で、
     画面に置かれているのはこちらの 72px のほう（暗01 / 暗02 で確認） */
  --tabs-h: 72px;

  /* カテゴリの帯を貼り付ける位置＝上にいる帯の高さ。
     卓に着く前は店名だけのヘッダー（.app-header）が上にいる。 */
  --sticky-top: calc(var(--header-h) + 1px);
}

/* ★ 卓に着いている画面では、上にいるのは .app-header ではなく .tabbar。
     ここを更新し忘れて、カテゴリの帯が大分類タブの下半分を覆っていた
     （2026-09-05 に発覚。お食事／ドリンク／サービス／伝票・会計 の文字が
      帯の裏に隠れて読めず、しかも帯のほうが z-index で勝っていた）。

     高さを直接書かず --tabbar-item-h から組み立てるのは、
     タブの高さを変えたときにここが取り残されないようにするため。
     取り残されても画面は落ちない。ただ黙って重なるだけなので、たちが悪い。 */
.page--seated {
  /* 罫線を内側の影で描いているので、+1px は要らない（.tabbar のコメント参照） */
  --sticky-top: calc(var(--tabbar-top) + env(safe-area-inset-top, 0px)
                     + var(--tabbar-item-h));
}

/* ★ 店舗端末では、大分類タブの上にもう 1 本（席の帯）が乗る。

     その高さを足し忘れると、カテゴリの帯が 72px ぶん上にずれて
     「お食事／ドリンク／サービス／伝票・会計」に重なる。
     上のコメントにある 2026-09-05 の不具合と、まったく同じ形。
     あのときは .app-header から .tabbar への切り替えを忘れ、
     今度は帯が 1 本増えたことを忘れた。

     ★ 数えるものが増えたら、必ずここも足すこと。
       画面は落ちない。黙って重なるだけなので、たちが悪い。

     env(safe-area-inset-top) を 2 回足していないのは、
     ノッチのぶんを空けるのはいちばん上の 1 本（席の帯）だけだから。
     .staffbar が min-height にそれを含んでいるので、
     ここでは帯そのものの高さだけを足す。

     高さを直接書かず --staffbar-h から組み立てるのは、
     帯の高さを変えたときにここが取り残されないようにするため
     （上の --tabbar-item-h と同じ考え）。 */
.page--seated:has(.staffbar) {
  /* ★ 大分類タブの上余白を 32 → 16 に詰める（設計 店04 410:4276 / 2026-09-06）。
       店舗端末だけ。お客さま側は 32 のまま。

     ★ なぜ店舗端末だけ詰めるのか
       お客さま側で 32 空けているのは、上にいるのが店名だけの細いヘッダーで、
       そこから離して「ここから選ぶ」を始めるため。
       店舗端末は上に席の帯（72px）が乗っているので、
       32 のままだと帯 → 空白 → タブと段が 3 つに見えて、
       画面の上 174px が移動の道具で埋まる。

     ★ ここに書けば、席の帯が出るすべての画面（メニュー・注文リスト・
       伝票・サービス）に一度で効く。.tabbar は子なので継承する。

     ★ この 1 行で下の --sticky-top も 174 → 158 に動く。
       同じ要素に書いた変数を calc が読むので、書き換えは 1 か所で済む。
       逆に言えば、ここを直接 16px と書くと連動が切れる。 */
  --tabbar-top: 16px;

  --sticky-top: calc(var(--staffbar-h) + env(safe-area-inset-top, 0px)
                     + var(--tabbar-top) + var(--tabbar-item-h));
}

/* ★ 大分類タブも、席の帯の<b>下</b>に貼り付けること。

     .staffbar と .tabbar はどちらも sticky で、既定では両方 top:0。
     並んでいる間は問題ないが、指で少し送った瞬間に大分類タブが
     席の帯の裏へ 72px 潜り込む（席の帯のほうが z-index で勝っている）。
     アイコンが消えて文字だけが残り、その下には潜ったぶんと同じ 72px の
     隙間が空いて、本文がその奥を流れていく。

     ★ 上の --sticky-top（カテゴリの帯の位置）とは別物。
       あちらは position:fixed で「上にいる帯の高さの合計」を数える。
       こちらは sticky なので「すぐ上の帯 1 本ぶん」だけ下げる。
       混ぜて書くとどちらかが必ず合わなくなる。

     ★ 見えているときは正しく、送った瞬間だけ壊れる。
       止まった画面を見比べても気づけない類の崩れなので、
       直したらスクロールした状態で確かめること。 */
.page--seated:has(.staffbar) .tabbar {
  top: calc(var(--staffbar-h) + env(safe-area-inset-top, 0px));
}

.tabs-slot {
  height: var(--tabs-h);
}

/* ★ 場所取りの箱（.tabs-slot）と、固定した帯（.tabs）の位置を合わせる。

   .theme-night .page__body は上に 16px 空けている。ところが .tabs-slot は
   その本文の先頭にあるので、スロットだけ 16px 下から始まり、
   帯は --sticky-top（大分類タブの直下）に固定される。
   16px ぶんの死に幅ができ、帯の下 16px と合わせて余白が 2 本になる。

   :has() で「カテゴリの帯がある画面だけ」に絞る。
   .page--seated だけで書くと、伝票やカートの画面まで上の余白が消える。
   :has() が使えないブラウザではこの行ごと無視され、いままでどおり 16px 空く。 */
.page__body:has(.tabs-slot) { padding-top: 0; }

.tabs {
  position: fixed;
  top: var(--sticky-top);
  left: 0;
  right: 0;
  height: var(--tabs-h);
  /* 帯も本文と同じ幅に収めて中央へ。大分類タブ（.tabbar）と同じ扱いにする。
     以前は左右 0 の全幅で、広い画面では帯の地色だけが画面いっぱいに伸び、
     720px で止まる上の帯と幅が食い違っていた */
  max-width: var(--page-max);
  margin-inline: auto;
  /* 上下 16 ／ 左右 16。チップ 40 と合わせて 16 + 40 + 16 = 72 */
  padding: 16px;
  /* stretch にするとチップが帯いっぱいに伸びて、上下 16px の余白が消える */
  align-items: flex-start;
  gap: 16px;
  /* 地は本文と同じ #202020。選択中の大分類タブの面と地続きに見せるための色で、
     ここを #141414（いちばん外の地）にすると帯だけ浮いて画面が 2 段に割れる */
  background: var(--bg-elevated);
  /* 10 節の名残り。設計に帯の枠線は無く、border-box なので 56px の中身が 55px に潰れる */
  border-bottom: 0;
  /* 同じく 10 節の名残り。上で不透明色を敷いたので効果が無く、合成レイヤーだけ増える */
  backdrop-filter: none;
}

/* 横スクロールの末尾で padding-right が効かないブラウザがあるため、
   実体のある箱で右端の余白を作る（29 節に同じ手当ての先例がある） */
.tabs::after {
  content: "";
  flex: 0 0 16px;
}

.tab {
  display: inline-flex;
  align-items: center;
  /* ★ button は font を継承しない。ここが無いと、カテゴリのチップだけ
     OS のフォーム既定書体（iOS は system-ui / Android は Roboto）で描かれ、
     同じ 14px でも字幅と行の乗り方が他の部品と揃わない。
     font 一括はあとの指定を消すので、必ずこの順で書くこと */
  font: inherit;
  /* 設計（暗/チップ1つ 122x40）の中身の位置。
       ラベル  x=12 y=6  （98x22）
       下線    x=12 y=32 （98x2）
     上から 6 ＋ ラベル 22 ＋ 4 ＋ 下線 2 ＋ 6 で 40。
     上下を 9 ずつにして中央に置くと、下線がラベルに近づきすぎる。 */
  padding: 6px 12px 12px;
  min-height: 0;
  font-size: 14px;
  font-weight: 400;
  line-height: 22px;
  letter-spacing: 0;
}

/* 選択中はきつね色。暗い地では、きつね色だけが「いまここ」を言える。
   下線だけ色を変えて文字を白のままにすると、選択が弱く見える */
.tab.is-active {
  color: var(--accent);
  font-weight: 700;
}

/* 下線は設計どおり 2px・角丸なし。左右はチップの余白と同じ 12px にして、
   文字の幅にちょうど収まるようにする。
   下から 6px 浮かせるのも設計どおり（y=32、下線 2px、チップ 40px）。
   bottom: 0 にすると、チップの底に貼り付いて帯の区切りのように見える。 */
.tab::after {
  left: 12px;
  right: 12px;
  bottom: 6px;
  height: 2px;
  border-radius: 0;
}

/* --------------------------------------------------------------------------
   27. 見学モード（公開デモのゲスト）
   --------------------------------------------------------------------------
   ゲストが管理画面を開いたときに出る帯と、押せなくなったボタン。

   色は --info（藍）にしている。--danger（紅）だと「何か失敗した」に見え、
   --accent（狐色）だと本文の主役ボタンと張り合ってしまう。
   ここで伝えたいのは失敗でも誘導でもなく「いまは見るだけの状態です」という
   事実なので、いちばん静かな色を割り当てる。
   -------------------------------------------------------------------------- */

.viewer-note {
  display: flex;
  flex-wrap: wrap;
  gap: 0 6px;
  align-items: baseline;
  margin-bottom: var(--sp-4);
  padding: 10px 14px;
  border: 1px solid var(--info);
  /* 左だけ太くして「注記」であることを形でも示す */
  border-left-width: 4px;
  border-radius: var(--radius-md, 8px);
  background: var(--info-soft);
  color: var(--text);
  font-size: .875rem;
  line-height: 1.6;
}

.viewer-note strong { font-weight: 700; }

/* 無効化されたボタン。
   押せないことが見て分かることが目的なので、色を抜いて影も消す。
   cursor: not-allowed は「押せない」を最も短く伝える手段。 */
.staff-main button:disabled,
.staff-main input[type="submit"]:disabled {
  opacity: .45;
  cursor: not-allowed;
  box-shadow: none;
  filter: grayscale(1);
}

.staff-main button:disabled:hover,
.staff-main input[type="submit"]:disabled:hover {
  /* hover で色が戻ると「押せそう」に見えてしまうので打ち消す */
  background: inherit;
}

/* --------------------------------------------------------------------------
   28. 送信中の見た目
   --------------------------------------------------------------------------
   公開デモは 1 リクエストにおよそ 1 秒かかる。
   押しても何も変わらない 1 秒は、待ち時間ではなく故障に見える。

   速さは変えられないので、「受け付けた」ことを即座に返す。
   ここで大事なのは派手さではなく、0.1 秒以内に何かが変わることそのもの。
   -------------------------------------------------------------------------- */

/* 押されたボタン。ぐるぐるを右に出す */
.btn.is-sending,
button.is-sending {
  position: relative;
  /* 回転する丸の分だけ右に余白。文字が寄って見えないように */
  padding-right: 2.4em;
  pointer-events: none;
}

.btn.is-sending::after,
button.is-sending::after {
  content: "";
  position: absolute;
  right: .9em;
  top: 50%;
  width: 1em;
  height: 1em;
  margin-top: -.5em;
  border: 2px solid currentColor;
  /* 1辺だけ透明にすると、回したときに「欠けた輪」に見える */
  border-right-color: transparent;
  border-radius: 50%;
  animation: sending-spin .6s linear infinite;
}

@keyframes sending-spin {
  to { transform: rotate(360deg); }
}

/* ページ全体。うっすら沈めて「いま操作を受け付けていない」を示す。
   透明度を下げすぎると画面が消えたように見えるので浅くかける */
body.is-sending {
  cursor: progress;
}

body.is-sending .app-main,
body.is-sending .staff-main {
  opacity: .6;
  /* 沈むまでを一瞬にしない。ここが速すぎると「点滅した」に見える */
  transition: opacity .15s ease-out;
  pointer-events: none;
}

/* 動きを減らす設定にしている人には、回転も沈みも出さない。
   目が回る・気分が悪くなる、という実害がある設定なので必ず尊重する */
@media (prefers-reduced-motion: reduce) {
  .btn.is-sending::after,
  button.is-sending::after { animation: none; }
  body.is-sending .app-main,
  body.is-sending .staff-main { transition: none; }
}

/* --------------------------------------------------------------------------
   29. 品切れ・残数パネル
   --------------------------------------------------------------------------
   カテゴリのチップ（.stock-nav / .stock-chip）は 2026-09-07 に外しました。

   14 個の札を折り返して並べ、押すと見出しへ飛ぶ作りでしたが、
   飛んでも<b>ページの中を移動するだけ</b>で、目的の行に着くまで
   残り 13 カテゴリぶんを通り過ぎていました
   （実測の高さ：1024px で 4 段 216px ／ 390px で 10 段 552px）。

   いまは「カテゴリを 1 つ選ぶ → その中だけ出す」に変えたので、
   通り過ぎるものがありません。選択の UI は .catpick（8 節）にあります。
   -------------------------------------------------------------------------- */

/* ── 飛んだ先で見出しが隠れないようにする ──
   アンカーで飛ぶと、対象の「上端」が画面の上端にぴったり合う。
   .section-title は margin-top を持っているが、margin は無視されるため、
   そのままだと見出しが天井に貼り付いて窮屈に見える
   （将来この画面に貼り付くヘッダーを足したときは、その高さぶん増やすこと）。
   scroll-margin-top は「この要素へ飛ぶときは、この余白を空けてね」という指定。 */
.section-title[id] {
  scroll-margin-top: 24px;
}

/* かつて .section-title--anchored（折り返し許可）と .stock-backtop（▲ カテゴリ一覧）を
   ここに置いていましたが、両方とも外しました。
   48px のタップ領域を持つリンクを 14 個ぶん見出しに足すと、
   align-items: baseline の .section-title は行高そのものが 28px → 48px に押し上げられ、
   実測で 1024px なら +280px、390px なら +647px（ページ全体の約 6%）伸びます。
   94 行のスクロールを減らすための変更が、出口のほうでそれ以上増やしていました。
   チップは <a href="#cat-N"> なので履歴に積まれ、ブラウザの戻るで位置が復元されます。 */

/* ============================================================================
   30. 机で使う画面の寸法とトンマナ（.theme-desk / .theme-ledger）
   ============================================================================
   対象は店側の全画面。layout/staff と layout/accountant の 2 つ。

   対象外
     ・お客さんの注文画面 … 和モダンのまま。店の見た目そのものなので触らない
     ・/admin/qr-print とログイン … layout/plain。
       卓名は元から 3rem なので、そもそも寸法の問題が無い

   ★ 厨房ボードについて
     はじめは外していた（立って一瞬見る画面で、行を大きくすると
     1 画面に入る注文数が減るため）。だが同じサイドバーの中で
     厨房・ホール・品切れだけ古い見た目のまま取り残され、
     「画面ごとに別物」になっていた。そちらの実害のほうが大きいので入れた。
     現場で件数が足りなくなったら、.staff-shell--floor だけ
     30-2 の余白を戻すのが最小の直し方。

   ★ なぜ .theme-snow に書かないのか（いちばん大事な注意）
     CLAUDE.md には「スタッフ側の見た目を変えるときは .theme-snow を触る」と
     書いてあるが、これは 2026-08-18 夜に .theme-snow をお客さん側へ広げる前の
     前提のまま残っている記述。いま .theme-snow は customer / staff /
     accountant / plain の 4 レイアウト全部に付いている。
     ここに寸法を足すと、変えてはいけない注文画面まで一緒に大きくなる。
     だから body に別のクラス .theme-desk を足して、その配下だけに書く。

   ★ なぜ px 直書きか
     font-size の 7 割が rem で、ルートを動かすとお客さん側まで連動する。
     ここは「机で読む画面の下限を保証する層」なので、絶対値で書く。

   参考にした寸法（さくらのVPS 仕様ページの実測値）
     本文 16px / 行間 28px、表の見出し 16px 太字・ベタ塗りに白抜き、
     表の中身 16px・上下余白 20px、見出し 32〜24〜20px、ボタン角丸 4px。
     色だけは他社のものを使わず、このアプリのきつね色に置き換えている。
   ========================================================================= */

/* --------------------------------------------------------------------------
   30-1. 色 — 白と緑
   --------------------------------------------------------------------------
   参考サイトから実測した緑。ページ全体で 141 箇所に使われている 1 色で、
   ボタン・表の見出し・現在地・下線が全部これ。ほかは白と薄いグレーだけ。

     #0e9794  さくらの緑そのもの
     #ddf0ec  薄い面（注意書きの地など）44 箇所
     #f3faf8  ごく薄い面（表の行）

   ★ ただし #0e9794 に白文字を載せると 3.6:1 で、WCAG の 4.5:1 に届かない。
     16px 太字は「大きい文字」（18.66px 太字以上）の扱いにならないため、
     参考サイトの表の見出しは基準を満たしていない。そのまま真似ると
     こちらも満たさなくなるので、文字を載せる面だけ 1 段暗い #0b7a78
     （5.2:1）を使う。同じ緑に見えて、読めなくならない。

   .theme-snow が --accent を黒（#1c1c1c）に潰しているので、
   ここで差し替えるとボタン・リンク・フォーカス枠・表の hover が
   一斉に緑になる。
   -------------------------------------------------------------------------- */
.theme-desk {
  /* ★ 下の 2 つは捨てた色です（2026-09-18）。ティールで、いまの草緑ではありません。
       使わないこと。押せるものは --action（#0b7a1a）、薄い面は --action-soft。
       消していないのは、厨房ボードなど数か所がまだ直接読んでいるためです。 */
  --green-700: #0b7a78;   /* 【捨てた】ティール。--action を使うこと */
  --green-600: #0e9794;   /* 面だけ。文字を載せない印に使う */
  --green-100: #ddf0ec;   /* 【捨てた】ティールの薄い面。--action-soft を使うこと */
  --green-50:  #f3faf8;

  /* --------------------------------------------------------------------
     押せるものの色（2026-09-12 追加）
     --------------------------------------------------------------------
     ★ なぜ --green-700 と分けるのか
       それまでボタンの塗りも表の見出しも同じ #0b7a78 でした。
       表の見出しは 27 画面すべてに出る一番大きな緑の面なので、
       <b>押せる部分と押せない部分が同じ色</b>になっていました。
       CLAUDE.md「アクセント色は押せるもの・熱いものだけに使う」に反しています。

     ★ 彩度ではなく色相をずらしてある
       明るくすると白文字が読めなくなる、と当初考えましたが逆でした。
       緑は輝度への寄与が一番大きいチャンネルなので、ティールから草緑へ
       寄せると白文字は<b>読みやすくなります</b>（実測 5.16:1 → 5.51:1）。

     ★ 赤は「押したら戻しにくい操作」だけ
       会計を締めると売上が確定し、取り消しには別操作とログが要ります。
       #d85555 / #e54343 は白文字で 3.9:1 と AA 未達だったので、
       明度を一段落として #c94444（4.78:1）にしてあります。

     ★ 当面はボタンの塗りだけがこれを参照します（狭い適用）。
       チップ・ラジオ・選択中の行・サイドバー現在地はティールのまま。
       1 つのモーダルの中で「選ぶ＝ティール／実行する＝草緑」と分かれるので、
       かえって読み分けやすくなります。広げたくなったらここを参照する側を増やすだけ。
     -------------------------------------------------------------------- */
  /* --------------------------------------------------------------------
     押せるものの緑（2026-09-16 に派生を整えた）

     ★ ティール（--accent #0b7a78）との違いは「青の量」だけ。
       R=11 G=122 は両方同じで、青を 120 → 26 に落としてある。
       明度はむしろわずかに暗い（対白 5.16:1 → 5.51:1）。
       つまり<b>明るくした</b>のではなく<b>くすみを取った</b>。
       色相 179 度（ほぼシアン）→ 128 度（緑）。

     ★ なぜこの明度で止めるか。
       もっと明るくすると対白コントラストが 4.5:1 を割り、
       白地に緑文字（.recbtn の枠と文字）で読めなくなる。
       5.51:1 は「白地に緑文字でも安全」な上限に近い。

     ★ hover をベタ書きしない（2026-09-16）。
       #0a6b17 が 2 か所に重複していて、--action だけ動かすと
       hover のほうが明るくなる逆転が起こりえた。
     -------------------------------------------------------------------- */
  /* ★ --action 系は .theme-snow（29 節）へ移した（2026-09-16）。
        ログイン画面は layout/plain で .theme-desk が付かないため、
        ここに置くと参照できず、ベタ書きに戻すしかなくなる。
        4 レイアウト共通の層に置けば、どの画面からでも同じ栓を握れる。 */

  /* ★ 2026-09-18：草緑に付け替えました。

       このセッションで 6 回、同じ取り違えを踏みました。
       売上の期間ボタン／商品の掲載・販売／レシピの編集／食材の記録する／
       品切れのカテゴリ選択中／店舗設定のチェックと強調。

       原因はどれも同じで、ここが捨てたティール（--green-700 = #0b7a78）を
       指していたことです。var(--accent) は 73 か所から読まれているので、
       1 か所ずつ潰しても、新しく書いた所からまた出てきます。

       お客さん側は動きません。.theme-desk はスタッフ側のレイアウトにしか
       付かないので、注文画面のきつね色（:root の --accent）はそのままです。 */
  --accent:       var(--action);
  --accent-hover: var(--action-hover);
  --accent-soft:  var(--action-soft);
  --on-accent:    var(--on-action);

  /* 角を落として「仕様書」の面構えにする。
     SnowUI の 12/16/20px は、机で数字を読む画面には丸すぎた。 */
  --r-sm: 4px;
  --r-md: 6px;
  --r-lg: 8px;

  font-size: 16px;
  line-height: 1.75;
}

/* 数値カードのパステル 2 色（#e3f5ff / #edeefc）を消す。
   SnowUI のキットから持ってきた水色と藤色で、きつね色と喧嘩する。
   面で差をつけるのをやめ、数字の大きさで差をつける。 */
.theme-desk .grid .stat:nth-child(1),
.theme-desk .grid .stat:nth-child(2) { background: #ffffff; }
.theme-desk .stat {
  background: #ffffff;
  border: 1px solid var(--border-strong);
}

/* 補足文が薄すぎた。--text-faint は不透明度 38% で、
   16px にしても読みづらさは残る。判断の根拠が書いてある行なので、
   本文と同じ濃さの一段手前（55%）まで戻す。 */
.theme-desk .help,
.theme-desk .stat__label,
.theme-desk .bars__label { color: var(--text-muted); }

/* --------------------------------------------------------------------------
   30-2. 余白
   --------------------------------------------------------------------------
   文字だけ大きくして余白を据え置くと、かえって窮屈に見える。
   参考サイトが広く見える理由の半分は余白のほうで、節と節のあいだに
   120px も取っている（実測）。ただしあれは読み物のページで、
   こちらは 1 画面に情報を集める道具なので、そのままは持ち込めない。
   8px 基準のリズムのまま、1 段ずつ広げる。

     本文の外周   20/28px → 32/40px
     節の間隔     32px    → 48px
     カードの中   16px    → 24px
     カードの頭   12/16px → 20/24px
     カード同士   16px    → 24px
   -------------------------------------------------------------------------- */
/* 左右 24px はサイドバーの右端から本文までのあき（元データの値）。
   上下は 48px 固定（2026-09-13、Figma 06 ページ＝Render 基準）。
   ★ もとは 64px で、広い画面の段（32 節）が 72／80 に上げ、盤面 4 画面が
     :has で 32 に絞る、という 3 段構えでした。設計を Render 実測の 48px に
     そろえたので、段はすべて廃止して 1 つの値にしています。
     Render は 3807px の画面でも上下 48px のままです。
   値を変数にしてあるのは .sheet が同じ量を打ち消すため（30-6-3 節） */
/* ★ 本文の上限 1920px ＋ 中央（2026-09-13）。
     店主が参考に挙げた Render のダッシュボードを<b>実物で</b>測った値です。
       main { max-width: 1920px; margin-inline: auto; padding-inline: 48px }
       帯 56px ／ ブロックの上下 48px

     前日にスクリーンショットから測ったときは「上限で止めていない」と読みましたが、
     誤りでした。あちらの窓は 1999px で、サイドバー 232px を引いた 1767px が
     上限 1920px に届いていなかっただけです。

     ★ 上限は盤面ではなく本文に置くこと。
       盤面だけを寄せると、見出しの帯・数字カード・盤面の左端がばらばらになります。

     ★ 1920px 以下の画面では 1px も変わりません。
       効きはじめるのは本文が 1920px を超えるところ（サイドバー込みで 2900px 級）。
       3807px の画面では本文が 3155px まで伸びて、厨房のレーンが
       1 本 1040px になっていました。左右の余白が足りないのではなく、
       止まるところが無かった、というのが実際のところです。 */
.theme-desk .staff-main   { --main-pad-y: 32px; --main-pad-x: 24px;
                            padding: var(--main-pad-y) var(--main-pad-x);
                            max-width: 1920px;
                            margin-inline: auto; }
.theme-desk .section-title { margin: 48px 0 24px; }
/* いちばん上の見出しにまで 48px 付けると、頭が間延びする */
.theme-desk .staff-main > :first-child { margin-top: 0; }

/* 枠線ボタンの面（2026-09-15、店主の指摘から）。
   設計（ト04c 840:10123「← 食材・在庫へ戻る」）は「白・枠 #c7c7c7・高さ 48・左右 24」。

   ★ 素の .btn は地が var(--surface)＝#f7f9fb（うすい灰）でした。
     カードを白に直したので、そのままだとボタンだけ灰色が残って浮きます。
   ★★ 詳細度に注意（2026-09-17 に事故りました）。

     このセレクタは (0,2,0) なので、クラス 1 つだけの規則
     （.btn--primary や .hallmodal__main）には<b>勝ちます</b>。
     つまり「塗りボタンは自分で --btn-bg を持つから大丈夫」ではありません。
     実際には 3573 行の .theme-desk .btn--primary が (0,2,0) で
     救済しているだけです。

     救済から漏れると、地だけ白に戻って --btn-fg: #fff がそのまま残り、
     <b>白地に白文字＝文字の消えたボタン</b>になります。
     ホールのモーダルの「次へ」「ご案内する」が実際にそうなっていました。

     白い文字を載せるボタンを足すときは、必ずクラス 2 つ以上で書くこと。
     HallModalColourTest がこれを見ています。 */
/* ★ 2026-09-22：枠 #c7c7c7 → #e8e8e8（設計に寄せる）。
     6 グループの監査で同じ指摘が出ていた、いちばん広い差です
     （戻る・印刷・再発行・二次ボタンの全部）。 */
.theme-desk .btn {
  --btn-bg: #ffffff;
  --btn-bd: #e8e8e8;
}

/* カードの面（2026-09-15、店主の指摘から）。
   設計（ト03 / ト04c / ト05 とも）は「白・枠 #e8e8e8・角丸 6」。

   ★ 素の .card は地が var(--surface)＝.theme-snow の #f7f9fb（うすい灰）で、
     枠も rgba(28,28,28,.10) と、ほぼ透明でした。
     机で読む画面はカードが主役（数字も表も全部この上に載る）なので、
     地が灰色だと画面全体がくすんで見えます。

   ★ 品切れ・残数には 34-3 節に同じ内容の上書きが先にあり、そこには
     「.card は地が #f7f9fb で枠が透明なので、設計の白・#e8e8e8・角丸 6 に直す」
     と理由まで書いてありました。1 画面だけ直して共通側が取り残されていた、
     というのが本当の姿です（同じ取り残しを catpick の高さでもやりました）。
     共通側を直したので、あちらの上書きは外してあります。

   ★ お客さん側には漏れません。.theme-desk はスタッフ側だけです
     （.theme-snow に書くと 4 レイアウト全部＝注文画面にも効きます）。 */
.theme-desk .card {
  background: #ffffff;
  border-color: #e8e8e8;
}

.theme-desk .card__body { padding: 24px; }
.theme-desk .card__head { padding: 20px 24px; }
.theme-desk .card__foot { padding: 20px 24px; }
.theme-desk .stat       { padding: 24px; }
.theme-desk .grid       { gap: 24px; }
.theme-desk .alert      { padding: 20px 24px; }

@media (max-width: 960px) {
  /* 狭い画面で 40px も左右に取ると、本文の幅が足りなくなる */
  .theme-desk .staff-main    { --main-pad-y: 20px; --main-pad-x: 20px;
                               padding: 20px 20px 48px; }
  .theme-desk .section-title { margin: 32px 0 16px; }
  .theme-desk .card__body,
  .theme-desk .stat          { padding: 16px; }
  .theme-desk .grid          { gap: 16px; }
}

/* --------------------------------------------------------------------------
   30-3. 見出し — 3 段（32 / 24 / 20）
   --------------------------------------------------------------------------
   参考サイトは 48/36/32/28/24/20 の 6 段だが、このアプリの見出しは実質 3 階層。
   .section-title__text ひとつが h1 と h2 を兼ねているので、6 段は当てられない。

   48px を採らなかったのは実測の理由。.section-title__text は nowrap で、
   960px 以下ではサイドバーが 64px 帯になり、390px 端末の実効幅は約 294px。
   48px × 12 字（「商品の売上（注文ベース）」）= 576px で確実に横スクロールする。
   -------------------------------------------------------------------------- */
.theme-desk .section-title__text { font-size: 24px; font-weight: 700; }
.theme-desk h1,
/* ★ 行間も書くこと（2026-09-18・店主の指摘「ホール会計のフォントまだ統一されてないくない？」）。
     字は 32px でそろっていましたが、行間の指定が無く 1.4 倍＝44.8px になっていて、
     .page-head__title（36px 明示）より行が 9px 高くなっていました。
     実測で 22 画面中 8 枚（ホール・品切れ・食材・税理士 5）がこちら側。
     同じ 32px でも、行が高いぶん大きく見えます。 */
.theme-desk h1.section-title__text { font-size: 32px; font-weight: 700; line-height: 36px; }
.theme-desk h2,
.theme-desk h2.section-title__text { font-size: 24px; font-weight: 700; }
.theme-desk h3,
.theme-desk .card__head { font-size: 20px; font-weight: 700; }
.theme-desk .section-title__count { font-size: 14px; }  /* 2026-09-22：設計 14px */
.theme-desk .lead { font-size: 16px; }

/* 大きくした以上、折り返しを許さないと画面の外へ出る。
   .theme-snow は見出しから右へ抜ける罫線を既に消しているので、
   折り返しても見た目は壊れない。 */
.theme-desk .section-title__text { white-space: normal; }

@media (max-width: 960px) {
  /* サイドバーが 64px の帯になり、本文の幅が一気に減る幅。
     ここで一段落とさないと、長い見出しが 3 行になる。 */
  .theme-desk h1,
  .theme-desk h1.section-title__text { font-size: 24px; }
  .theme-desk h2,
  .theme-desk h2.section-title__text { font-size: 20px; }
}

/* --------------------------------------------------------------------------
   30-4. 表 — ここが今回の山
   --------------------------------------------------------------------------
   見出し行をきつね色でベタ塗りして白抜きにする。
   いままでは 12px・薄いグレー・ほぼ透明な地で、どこからが表なのか
   分からなかった。参考サイトが「表が主役」に見えるのは、
   見出しを塗って、行の高さをはっきり取っているから。

   ★ 上下の余白だけ 20px にして、左右は 12px のまま据え置く。
     仕入れレシート登録（inventory/purchase-form）は 8 列で、列幅の指定合計が
     1024px ある。1366px のノートで使える幅は 1078px しかなく、
     左右も 20px にすると 8 列 ×2 で +128px 増えて確実に溢れる。
     参考サイトの仕様も「上下 20px」であって左右は広げていない。
   -------------------------------------------------------------------------- */
.theme-desk .table { font-size: 16px; }
.theme-desk .table th,
.theme-desk .table td { padding: 20px var(--sp-3); }

/* 列見出し。Render のダッシュボードの実測値（2026-09-13）。
   12px / 太さ 400 / 字間 0.24px / 色 #272727 / 面は白。

   ★ もとは緑のベタ塗りに白 16px 太字でした。
     「表の見出しがどこか分からない」を直したときの形ですが、
     表が 10 画面あるので、開くたびに緑の帯が目に入ります。
     Render は逆に、見出しを<b>いちばん小さく・いちばん静かに</b>して、
     中身（店主が読みたい名前と数字）を立たせています。

   ★ background を透明にしないこと。
     この行は .table th（17 節）で position: sticky / top: 0 になっています。
     面が無いと、スクロールしたときに下の行が見出しの裏に透けます。

   ★ 字間 0.24px は「小さい文字の列見出し」に見せるための唯一の手がかりです。
     あちらは大文字にもしていますが、日本語には大文字が無いので、
     効くのは大きさ・色・字間の 3 つだけになります。 */
.theme-desk .table th {
  font-size: 12px;
  font-weight: 400;
  letter-spacing: .24px;
  background: #ffffff;
  color: #272727;
}

/* 罫線は行の下だけ。縦罫は引きません（Render も引いていません）。
   色を var(--border)（黒 10%）ではなく直値にしてあるのは、
   不透明度で書いた線が端末の表示倍率でさらに薄く丸められるためです
   （この 1 日で同じ取り違えを 5 回踏んでいます。33 節の注記と同じ理由）。 */
.theme-desk .table th,
.theme-desk .table td { border-bottom: 1px solid #e3e3e3; }

/* 数字は等幅で桁をそろえ、少しだけ重くする。
   本文まで太字にすると、どこを見ればいいのか分からなくなる。 */
.theme-desk .table td.num,
/* ★ 2026-09-22：600 → 400（設計に寄せる）。設計はどの表も数値を Regular で
     置いています。太らせると、金額だけが見出しより強く見えます。 */
.theme-desk .table td.right { font-weight: 400; font-variant-numeric: tabular-nums; }

/* ★ 縞（1 行おきの塗り）は 2026-09-13 に外しました。
     見出しを静かにしたのに 1 行おきに緑が入ると、結局そちらが目に付きます。
     Render も縞を引かず、罫線と hover だけで行をたどらせています。
     指している行の強調は残します。こちらは「いまどこを見ているか」の手当てで、
     縞（行の並びを追う手当て）とは目的が違います。 */
.theme-desk .table tbody tr:hover { background: var(--green-50); }

/* --------------------------------------------------------------------------
   30-5. 数値カード
   --------------------------------------------------------------------------
   .stat__value は 32px が上限。grid--4 は 960px でも 4 列のままで、
   1 枚の中身は約 172px しかない。これ以上大きくすると
   「¥183,200」が桁の途中で改行する。
   -------------------------------------------------------------------------- */
.theme-desk .stat__label { font-size: 14px; letter-spacing: .04em; }
.theme-desk .stat__value { font-size: 32px; font-variant-numeric: tabular-nums; }
.theme-desk .stat__unit  { font-size: 16px; }

/* --------------------------------------------------------------------------
   30-6. ボタン・入力・補足文
   -------------------------------------------------------------------------- */
/* 角丸は --r-sm（4px）が効くので、ここでは太さだけ足す */
/* 本文のリンクは草緑（2026-09-17・店主の指摘）。

   共通の a は var(--accent) で、:root では黒、.theme-desk ではティールに
   化けます。仕入れ・経費の取引先の名前が旧緑のまま残っていました。
   リンクは押せるものなので --action にそろえます。

   ★ :not([class]) で本文のリンクだけに絞ること。
     .theme-desk a と書くと (0,1,1) になり、.sb__item（0,1,0）に勝って
     サイドバーの項目まで全部緑になります。
     クラスの付いたリンク（.btn / .sb__item / .badge--draft）は
     それぞれ自分の色を持っているので、触ってはいけません。

   ★ お客さま側は巻き込みません。あちらの --accent はきつね色で、
     和モダンの骨格そのものです（CLAUDE.md）。.theme-desk に閉じ込めます。 */
.theme-desk a:not([class]) { color: var(--action); }
.theme-desk a:not([class]):hover { color: var(--action-hover); }

.theme-desk .btn { font-weight: 700; }
/* 小ボタンの 36px は CLAUDE.md の「タップ領域 48px 以上」に元から反していた。
   表の行に並ぶので 48px までは上げられないが、40px までは戻す。 */
/* ★★ 2026-09-22：40px → 48px。
     CLAUDE.md の「タップ領域は 48px 以上」に自分で違反していました。
     税理士の「直す」60 個・「開く」11 個、カテゴリの「編集する」15 個が
     すべて 40px。設計側も h40 で描かれていますが、
     <b>店主の決めた 48px が設計より上</b>です（品切れの行高で同じ判断済み）。 */
.theme-desk .btn--sm { font-size: 15px; }

/* --------------------------------------------------------------------------
   塗りボタンは草緑に統一（2026-09-12）
   --------------------------------------------------------------------------
   それまで .btn--primary は --accent（＝--green-700 のティール）を参照していて、
   <b>表の見出しとまったく同じ色</b>でした。27 画面すべてに出る一番大きな緑の面と
   ボタンが同色だと、押せる部分と押せない部分が見分けられません。

   ★ --accent そのものは変えません。
     リンクの文字色・札・現在地など、押せないものまで巻き込むためです。
     変えるのは「塗りボタン」の 2 種類だけに絞ります（狭い適用）。

   ★ .btn--danger は枠線のままにします。
     取り消し系は塗らずに枠だけ、という既存の判断を崩さないため。
   -------------------------------------------------------------------------- */
.theme-desk .btn--primary,
.theme-desk .btn--ok {
  --btn-bg: var(--action);
  --btn-fg: var(--on-action);
  --btn-bd: var(--action);
}
.theme-desk .btn--primary:hover,
.theme-desk .btn--ok:hover {
  --btn-bg: var(--action-hover);
  --btn-bd: var(--action-hover);
}

/* ★ 危険ボタンの枠は赤のまま（2026-09-19、実測で発見）。

   上の「.btn--danger は枠線のままにします」という判断は生きています。
   問題は枠の<b>色</b>でした。

     .btn--danger        { --btn-bd: var(--danger) }   (0,1,0)
     .theme-desk .btn    { --btn-bd: #c7c7c7 }         (0,2,0)  ← こちらが勝つ

   机で読む画面では枠だけ灰色に落ちて、赤い文字に灰色の枠という
   中途半端な見た目になっていました（実測 rgb(199,199,199)）。
   設計の部品「ボタン／種類=危険」は 白地・枠 #d33f3f・文字 #d33f3f です。

   ★ 地は白のままでよいので、枠だけ戻します。
     .btn--ok のように 3 つまとめて上書きすると塗りボタンになってしまいます。 */
.theme-desk .btn--danger { --btn-bd: var(--danger); }

/* --------------------------------------------------------------------------
   30-7b. 札とボタンの統一規格を実装へ（2026-09-20）

   設計（部品「店/札」1065:13127 ／「ボタン」1092:13298）に合わせます。
   規格じたいは 2026-09-20 に店主が決めていたのに、実装へ届いていませんでした。
   実測で出た差は次のとおりです（実装 → 設計）。

     札の角丸   999px（丸い薬型） → 4px
     札の高さ   21.4 / 25.6 / 28.2 / 29.6px とバラバラ → 26px
     押せない札 緑（#def8ee/#3f8e6d、#e6f4e8/#0b7a1a、白地に緑字）→ #efefef / #444444
     編集の口   灰色の枠 #c7c7c7 → 緑の枠 #0e9721

   ★ なぜ .theme-desk に絞るか。
     .badge はお客さん側でも使っています。素の .badge を触ると、
     注文画面の「おすすめ」「グルテンフリー」まで灰色になります。
     設計があるのは店側の画面だけなので、そこだけに効かせます。

   ★ なぜ変種クラス単独で書かないか。
     .theme-desk .btn (0,2,0) が .btn--edit (0,1,0) に勝つためです。
     すぐ上の .btn--danger で 2026-09-19 に踏んだ罠と同じものです。
   -------------------------------------------------------------------------- */

/* ★ 札の寸法（13px / 行送り 16 / 上下 4）と角丸 4px は、
     この下にある既にある指定のほうへ書きました。
     同じことを 2 か所で言うと、片方だけ直して食い違う原因になります。
       寸法 … 「札の寸法はここが正」の .theme-desk .badge
       角丸 … 「札。★ 素の .badge は丸のまま」の .theme-desk .badge
     ここには色の決まりだけを置きます。 */

/* 押せない札に緑を使わない。
   赤（品切れ中・注意）は「気づかせる」ための色なので残します
   ——店主の言葉は「緑を使わない」であって「色を使わない」ではありません。 */
.theme-desk .badge--gf:not(.badge--act),
.theme-desk .badge--ok:not(.badge--act),
.theme-desk .badge--rec:not(.badge--act) {
  background: #efefef;
  color: #444444;
  border-color: transparent;
}

/* ★ .badge--ok を忘れないこと。--ok(#3f8e6d)/--ok-soft(#def8ee) は
     .badge--gf と同じ見た目なのに別の変種です。実測で気づくまで、
     卓の「使用中」10 個だけが緑のまま取り残されていました。 */

/* ★ ホールと品切れの札は、ここに書き足さないこと（2026-09-20 に一度やって戻した）。
     あちらには既に .hallboard .billcard .badge / .soldoutpage .table .badge--rec が
     あります。ここに同じ名前で足すと、
       ・テストが CSS 本文を「最初に見つかった .hallboard .billcard .badge」で
         切り出すため、中身の薄いこちらを読んでしまう
       ・読む人も、どちらが効いているか 2 か所見ないと分からない
     という 2 つが同時に起きます。直すときは元の規則のほうを直します。 */

/* 押せる札は白地に緑の枠（設計の「表示中（押せる）」）。
   押せるものにだけ緑を使う、という線引きはここで守ります。
   ★ 地は #fff を直に書きます。var(--surface) は #f7f9fb で、
     設計の白（#ffffff）より薄く灰色がかっていました（実測）。 */
.theme-desk .badge--act { background: #fff; }
.theme-desk .badge--act.badge--gf {
  color: var(--action);
  border-color: currentColor;
}

/* 編集の口は緑の枠。緑＝前に進む（直しに行く）、灰色＝元に戻る。 */
.theme-desk .btn--edit {
  /* 地は #fff を直に。var(--surface) は #f7f9fb で、設計の白より灰色がかる */
  --btn-bg: #fff;
  --btn-bd: #0e9721;
  --btn-fg: var(--action);
}

.theme-desk .label { font-size: 16px; letter-spacing: .02em; }
/* 入力欄は 16px・48px のまま。16px 未満にすると iOS が勝手に拡大する（11 節） */

/* 補足文は 14px。12px は小さすぎるが、16px まで上げると
   店舗設定の 1 画面だけで縦が 340px 伸びる。本文 16px との差で
   「補足」だと分かる必要もあるので、1 段下に置く。 */
.theme-desk .help,
.theme-desk .small,
.theme-desk .tiny { font-size: 14px; }

/* 札の寸法はここが正（2026-09-20）。設計の部品「店/札」1065:13127 は 26px 固定。
   4 + 16 + 4 + 枠 2 = 26。それまでは 14px / 行送り 1.4 で 29.6px あり、
   同じ表の中で 21.4 / 25.6 / 28.2 / 29.6px と 4 種類に割れていました。 */
.theme-desk .badge {
  font-size: 13px;
  line-height: 16px;
  padding: 4px 8px;
  letter-spacing: .02em;
}

/* 薄すぎる字を一段濃くする。
   .faint は不透明度 38%。白地では実効 #9e9e9e で 2.8:1 しかなく、
   WCAG の 4.5:1 を下回っていた。数字の内訳や補足がここに入っているので、
   「読ませる気が無い」のではなく「読ませたいが控えめ」に直す（55% = 4.9:1）。 */
.theme-desk .faint { color: var(--text-muted); }

/* --------------------------------------------------------------------------
   30-6-2. ページの見出し・検索・タブつきの表 — 2026-09-05
   --------------------------------------------------------------------------
   商品一覧のために作った 3 つの部品。設計（Figma「08 商品」）の寸法どおり。

   ★ タブと表のあいだに隙間を作らないこと。
     選ばれたタブと表の見出し帯が同じ緑でひと続きに見えることで、
     「この表はいまこの絞り込みの結果だ」が形で伝わる。
     ここに 1px でも隙間が入ると、タブと表が別々のものに見える。
   -------------------------------------------------------------------------- */

/* 見出し（大きな題＋添え字＋右のボタン） */
.page-head {
  display: flex;
  align-items: center;
  /* ★ 2026-09-20：16 → 12（店主の判断「画面側を正とする」）。
       設計ファイルの中で食い違っていました——
         部品の原本「見出し/ページ」 … 900x80・間 16  ← どの画面からも使われていない
         画面側の帯（1432 の 21 枚）  … 1120x82・間 12 ← 実際に描かれているのはこちら
       部品は寸法（900x80）からして画面と別物で、古い版でした。
       ★ 上下の余白 16 はこのままにします。設計は「行送り 36 を高さ 82 の中で
         縦中央」、実装は「行送り 50 に上下 16」で、どちらも<b>字の中心が
         帯の上から 41px</b>です。数字だけ見て 0 にすると逆に崩れます。 */
  gap: 12px;
  padding: 16px 40px;

  /* ★ 行の高さを固定する（2026-09-18・店主の指摘
       「見出しの位置が全部微妙にズレて見える」）。

       原因は余計な余白ではなく、<b>行の中でいちばん背の高いもの</b>でした。
       この行は align-items: center なので、隣に何を置いたかで題が上下します。

           題だけ          行 36px → 題の下がり 0px  → 上から 48px
           ＋ボタン 48px    行 48px → 題の下がり 6px  → 上から 54px
           ＋日付の帯 50px  行 50px → 題の下がり 7px  → 上から 55px

       ★ 床は「行」ではなく「題」に敷くこと。
         .page-head は box-sizing: border-box なので、行に min-height: 50px と
         書いても padding 32px を含んでしまい、中身の床は 18px にしかなりません。
         行はすでに 68px あるので、1 ミリも効きませんでした（2026-09-18 に実測）。
         題に敷けば padding にも iPad の一段下げにも左右されません。 */

  /* ★ 入りきらないときは行を増やす（2026-09-18）。
       もとは既定の nowrap で、狭いと中身を片端から縮めていました。
       日付・月の帯を題の行へ入れたあと、iPad 幅（1024px）の
       仕入れ・経費で次のことが起きていました。

         題「仕入れ・経費」 196×36 →  167×64  ＝ 2 行に折れた
         帯               355×50 →  346×102 ＝ 2 段に割れた

       あそこは題・帯・税率マスタ・レシートを登録が並ぶ唯一の画面で、
       1024px では素直に入りません。入らないものを縮めるより、
       行を増やすほうが読めます。 */
  flex-wrap: wrap;
}
/* 見出しは Render の実測値 32px / 行間 36px。
   行間を倍率（1.4＝44.8px）ではなく px で持つのは、あちらが 36px 固定だからです。
   ★ 太さは 700 のまま。Render は 500 ですが、日本語（Noto Sans JP）の 500 は
     欧文の 500 より細く見え、ページの題が本文に埋もれます。 */
/* ★ 題は縮めない（2026-09-18）。縮むと「仕入れ・経費」が 2 行に折れます。
     画面の名前が折れると、まず目に入るものが崩れて見えます。 */
.page-head__title  { font-size: 32px; font-weight: 700; margin: 0; line-height: 36px; flex-shrink: 0;
                     /* 行の中でいちばん背の高い中身（日付の帯 50px）に合わせた床。
                        隣に何を置いても題の位置が動かなくなります。 */
                     min-height: 50px; display: flex; align-items: center; }
.page-head__sub    { font-size: 14px; color: var(--text-muted); }
.page-head__spacer { flex: 1; }

/* ★ 帯の右端に並ぶボタンをひと組にする（2026-09-18）。
     仕入れ・経費のように 2 つ並ぶ画面で、入りきらないときに
     片方だけが次の行へ落ちるのを防ぎます。
     「行が増える」のは読めますが、「ボタンが 1 つだけ離れる」のは壊れて見えます。 */
.page-head__actions {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-shrink: 0;
  /* 行が増えたときも右端に付く。1 行に収まっているときは
     のばす（.page-head__spacer）が同じ仕事をするので、二重でも害はない */
  margin-left: auto;
}

/* 戻るボタンを先頭に置いた帯（2026-09-15、店主の判断・設計 898:9098）。

   ★ なぜ左へ動かしたか
     戻るは「移動」、保存や追加は「実行」で、種類が違います。
     それまで両方が右端に並んでいて、「分類をまとめて付ける」では
     ← 食材・在庫へ戻る と 選んだ分類を保存する が隣り合っていました。
     40 件ぶん選び終えた直後に、選択が全部消えるボタンが隣にある形です。
     左＝戻る／右＝実行に分ければ、この事故は構造的に起きません。

   ★ 左右を 0 にする理由
     下のカードや表は本文の左端から始まるのに、帯だけ 40px 内側にあり、
     画面に左端が 2 つある状態でした。戻るボタンは面があるぶん、
     題だけのときよりズレが目立ちます。

   ★ 24px を足すのは gap が 16px だから（16 ＋ 24 ＝ 設計の 40）。
     gap 自体を 40 にすると、題と補足のあいだまで広がります。 */
.page-head:has(> .btn:first-child) { padding-inline: 0; }
.page-head > .btn:first-child { margin-right: 24px; }

/* 探す。入力欄そのものが 64px の面になる */
/* ★ 見出し・探す・表のあいだは 48px（設計 08 商品 17:965 の gap-48）。

   実装では 3 つが<b>隙間ゼロで密着</b>していました（実測 0px）。
   箱そのものの寸法（高さ 64・左右 12・角丸 6）は設計と合っていたので、
   並べて見ないと気づけない類のずれです。

   ★ .staff-main 側に gap を持たせないこと。
     あそこは全部の管理画面が通る器で、いまは display:block。
     flex にすると、各画面が使っている mt-4 などの margin と足し算になり、
     20 画面以上の余白が一斉に変わります。
     .searchbox と .tabtable はこの画面にしか無いので、こちら側で持ちます。 */
.searchbox { margin-top: 48px; }
.tabtable  { margin-top: 48px; }

/* カテゴリ一覧のように、見出しのすぐ下が表の画面（設計 09 カテゴリ）。
   ★ .page-head 側に margin-bottom を持たせないこと。
     .page-head は仕入れ・経費でも使っていて、あちらの間はまだ設計を見ていない。
     「見出しの直後が表のときだけ」に絞れば、確かめた画面だけが動く。 */
.page-head + .table-wrap { margin-top: 48px; }

.searchbox {
  display: flex;
  align-items: center;
  gap: 8px;
  /* 64 → 48px（2026-09-13、店主指示で統一）。
     64 は設計 現04 の値でしたが、品切れだけ 48 に落としていて
     同じ探す欄が画面ごとに 2 種類ある状態でした。
     ボタン・タップの床・サイドバーの項目と同じ 48 に一本化。
     Figma 07 ページの 7 か所も同日に 48 へ更新済み */
  height: 48px;
  padding: 0 12px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg-elevated);
}
.searchbox__icon { display: inline-flex; color: var(--text-muted); flex: none; }
.searchbox__icon .ic { width: 16px; height: 16px; }
.searchbox__input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: transparent;
  font: inherit;
  font-size: 14px;
  color: var(--text);
}
/* 角と枠は Render のトンマナへ（2026-09-13）。
   ★ .theme-desk の中だけで書くこと。素の .searchbox は
     お客さま側では使っていないが、同じ流儀にそろえておく。
     枠の #e3e3e3 は表の罫と同じ値（白地で 2 種類の濃さを混ぜない） */
.theme-desk .searchbox { border-radius: 0; border-color: #e3e3e3; }
/* 札。★ 素の .badge は丸のまま（お客さま側のメニューのチップで使っている）。
   CLAUDE.md「管理画面だけ変えたいときは .theme-desk 配下に書く」

   ★ 2026-09-20：角 0 → 4px。店主の指摘そのものです——
     「表示中非表示は角丸が無くて統一感ないので 4px のランド付けて」。
     2026-09-13 に Render のトンマナへ寄せて角を落としましたが、
     ボタンも入力も 4px の中で札だけ角 0 だったため浮いていました。 */
.theme-desk .badge { border-radius: 8px; }
.searchbox__input::placeholder { color: var(--text-muted); }
.searchbox__input:focus { outline: none; }
.searchbox:focus-within { border-color: var(--accent); }

/* タブつきの表。
   ★ 列そのものが下線（通し罫）を持つ（2026-09-13、Render の作り）。
     選択中のタブに面が付き、列の罫はそのまま下を走ります。
     gap を 0 にしてあるのは、Render のタブが隙間なしで並ぶため */
/* --------------------------------------------------------------------------
   タブの右の「並べ替え」（2026-09-20・設計は倉庫の試作A／試作B）
   --------------------------------------------------------------------------
   店主の指示「編集中の隣に並び順を原価率の高い低いとか
   Windows フォルダの並び変えみたいなのを実装仕様と思うんだよね」。

   ★ これは<b>見え方だけ</b>の並べ替えです。お客さまのメニューに出る順番
     （MenuItem#sortOrder）には触れません。

   ★ 下の罫はタブの列が持っています（.tabtable__tabs の border-bottom）。
     この行に罫を足すと、タブの下で 2 本になります。 */
/* ★ 入りきらなければ折り返す（2026-09-22）。
     タブ 5 枚で 712px ＋ 間 16 ＋ 並べ替え 310 ＝ 1038px。
     iPad の本文は 897px しかなく、<b>画面ごと横に動いて</b>いました
     （実測 +117px）。タブもボタンも中身が決まった幅なので、
     どちらも縮みません。押し込めないなら段を変えるのが素直です。

     幅が足りるとき（1432 の本文 1120px）は 1 行のままなので、
     設計の見た目は変わりません。@media で幅を決め打ちせず、
     入るか入らないかで自然に切り替わります。 */
.tabsort {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 16px;
}
.tabsort .tabtable__tabs { flex: 1 1 auto; }
.tabsort .sortpick { flex: none; margin-bottom: 8px; }

/* 開いたら重ねて出す。押し出すと下の表が毎回ずれて、
   どこを見ていたか分からなくなります（カテゴリの選択と同じ考え方） */
.sortpick { position: relative; }
.sortpick__head {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 48px;
  padding: 0 16px;
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  background: #fff;
  font-size: 15px;
  cursor: pointer;
  white-space: nowrap;
  list-style: none;
}
.sortpick__head::-webkit-details-marker { display: none; }
.sortpick[open] .sortpick__head { border-color: #0e9721; color: var(--action); }
.sortpick__mark { color: var(--text-muted); }
.sortpick[open] .sortpick__mark { color: var(--action); }

.sortpick__list {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  z-index: 20;
  display: flex;
  flex-direction: column;
  min-width: 260px;
  padding: 8px 0;
  border: 1px solid #e8e8e8;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 4px 16px rgba(0, 0, 0, .12);
  /* 6 個しか無いので普段は効きませんが、増えたときのために。
     こちらも picker.js が画面の下端まででかけ直します */
  max-height: 60vh;
  overflow-y: auto;
}
.sortpick:not([open]) .sortpick__list { display: none; }
.sortpick__item {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 16px;
  color: var(--text);
  text-decoration: none;
  white-space: nowrap;
}
.sortpick__item:hover { background: var(--bg-elevated); }
.sortpick__item.is-active { background: #eef7f2; color: var(--action); font-weight: 700; }
/* ✓ の幅を空けておく。選んでいない行だけ字が左にずれるのを防ぐ */
.sortpick__check { flex: none; width: 14px; color: var(--action); }

.theme-desk .tabtable__tabs { display: flex; gap: 8px; border-bottom: 1px solid #e3e3e3; }
.tabtable__tabs { display: flex; gap: 0; }

/* ★ 必ず .theme-desk で囲うこと（2026-09-05 に事故を直した）。

   ここは「机で見る表の上に乗るタブ」で、幅 136px・高さ 56px・明るい地。
   ところが .tab というクラス名は、お客さまのスマホのメニューで
   カテゴリの切り替え（粉もの／たこ焼き／…）にも使われている。

   囲わずに書いたせいで、この定義が app.css のいちばん後ろにあることから
   お客さま側の定義（10 節・24 節）を全部打ち消していた。結果、
   暗い帯の中に明るい箱が 136px ずつ並び、幅 390px の画面に 2 つ半しか入らず、
   高さ 46px の帯から 10px はみ出していた。

   CLAUDE.md の「管理画面だけ変えたいときは .theme-desk 配下に書く」は
   このためのルール。.theme-desk .tab（詳細度 0,2,0）は .tab（0,1,0）に勝ち、
   .theme-desk が付かないお客さま側には届かない。 */
.theme-desk .tab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 136px;
  height: 56px;
  padding: 0 18px;
  /* 角丸 8px（2026-09-20）。
     2026-09-13 は 0 でした。「表の見出しも札も角 0 にしたので、
     ここだけ丸いと浮く」という理由でしたが、その前提が変わりました——
     札もボタンも入力も 8px にそろえたので、いまは<b>タブだけ角 0 だと浮きます</b>。
     ★ 下は表とつながるので、上の 2 隅だけ丸めます。 */
  border-radius: 8px 8px 0 0;
  background: var(--surface-sunken, #eef1f4);
  border: 1px solid var(--border);
  border-bottom: 0;
  /* ★ 2026-09-16: ティール → 草緑（--action）。店主の指摘
     「商品の すべて・掲載中 とかのボタンが旧色」。
     同じ画面の「＋商品を追加」が草緑なのに、すぐ下のタブがティールで
     色が食い違っていた。タブは見た目が押せるボタンそのものなので、
     押せる側に寄せる。 */
  color: var(--action);
  font-size: 15px;
  /* リンクの既定（600）が効くと、未選択のタブまで太くなって
     どれが選ばれているのか形で分からなくなる。太いのは選択中だけ */
  font-weight: 400;
  text-decoration: none;
  white-space: nowrap;
}
.theme-desk .tab:hover { background: var(--action-soft); }
.theme-desk .tab.is-active {
  background: var(--action);
  border-color: var(--action);
  color: var(--on-action);
  font-weight: 700;
}
.tab__num   { display: inline-flex; align-items: baseline; gap: 1px; }
.tab__count { font-size: 13px; font-weight: 700; color: var(--text-muted); font-family: var(--font-num); }
.tab__unit  { font-size: 12px; color: var(--text-muted); }
/* 選択中の中の件数は、地の草緑に載る薄い色。
   ティールの薄面（--green-100）のままだと、緑の上に青みが乗って濁る */
.theme-desk .tab.is-active .tab__count,
.theme-desk .tab.is-active .tab__unit { color: var(--action-soft); }

/* 商品の表。
   見出しの余白 16、行の余白 20 は設計どおり。
   見出しのほうが狭いのは、緑のベタ塗りが厚く見えるのを抑えるため。
   高さは行が 68、見出しが 64 になる（中身 28 ＋ 余白）。 */
/* ★ .theme-desk .table th（詳細度 0,2,1）が padding: 20px var(--sp-3) を持つので、
     .table--items th（0,1,1）では負ける。同じ 0,2,1 まで上げて勝たせる。
     この表は「見出し 16 / 行 20」と上下で余白が違う唯一の表なので、
     共通側（.theme-desk .table）を動かさず、こちらで受ける。 */
.theme-desk .table--items th { padding: 16px; height: 64px; }
/* 行は 68px（設計 ト10「行」1120x68・セルは上下 0／左右 20 で中央ぞろえ）。

   ★ 2026-09-19：上下の余白を 20/19 から 0 に変えました（店主の指摘
     「表のレイアウトがズレててみずらかった」）。実測で 80px ありました。

     原因は余白ではなく<b>並び列の並べ替えボタン（40px）</b>でした。
       文字 21 ／ 札・フォーム 29.6 ／ 並べ替えボタン 40
     20 + 40 + 19 = 79 に区切り線 1 を足して 80。

     上下を 0 にすると 40px が収まり、height の 67 が効いて
     区切り線 1 と合わせてちょうど 68 になります。
     <b>ボタンは 1px も小さくしていません。</b>

   ★ 67 なのは、区切り線が設計では面の内側にあるため。
     CSS の border は外に足されるので、そのぶんを引いておく（ピルと同じ理由）。 */
.theme-desk .table--items td { padding: 0 20px; height: 68px; vertical-align: middle; }

/* 列幅は設計どおり（合計 1120）。
   画面が 1432px より広いときは、この比率のまま横に伸びる */
.table--items { table-layout: fixed; }

/* 仕入れの表。見出し 16／行 20 と列幅は商品の表と同じ流儀（設計どおり） */
.theme-desk .table--purchases th { padding: 16px; height: 64px; }
.theme-desk .table--purchases td { padding: 20px 20px 19px; height: 68px; }
.table--purchases { table-layout: fixed; }
/* ★ 2026-09-22：px → 割合。iPad（幅 1024）で本文は 897px しかなく、
     px の列が合計 1120 あると table-layout:fixed では width:100% と書いても
     <b>表が 1120 から縮みません</b>。右の列が初期表示で見切れていました。
     商品の表を 09-20 に % 化したのと同じ直しです（比は 1120 基準で不変）。 */
.table--purchases th:nth-child(1), .table--purchases td:nth-child(1) { width: 13.393%; }  /* 150 */
.table--purchases th:nth-child(2), .table--purchases td:nth-child(2) { width: 26.786%; }  /* 300 */
.table--purchases th:nth-child(3), .table--purchases td:nth-child(3) { width: 14.286%; }  /* 160 */
.table--purchases th:nth-child(4), .table--purchases td:nth-child(4) { width: 15.179%; }  /* 170 */
.table--purchases th:nth-child(5), .table--purchases td:nth-child(5) { width: 19.643%; }  /* 220 */
.table--purchases th:nth-child(6), .table--purchases td:nth-child(6) { width: 10.714%; }  /* 120 */
/* 金額も左揃え。設計は数字を含めて全部左でそろえてある
   （右寄せは列の中で数字が離れて、名前と金額を目で結びにくい） */
.table--purchases td.num, .table--purchases th.num { text-align: left; }
/* 商品の表（設計 ト10・2026-09-14 に原価列を追加して 7 列）。
   340/240/160 → 280/200/140 に詰め、空いた 120px を原価に充てる。合計 1120 のまま。
   ★ 在庫モジュールを切った店では 4 列目（原価）が出ず 6 列になるが、
     table-layout: fixed は「出ている列」に幅を当てるので、この指定のままで
     商品名 280…掲載 120 と前へ詰まり、余りは最後の列に寄る。列が消えても崩れない */
/* 列ごとの揃え方（設計 ト10 731:4408・2026-09-19、店主の指摘
   「表のレイアウトがずれてる」）。

   設計の指定（見出し・行とも同じ）

     商品名 ／ カテゴリ ／ 価格（税込）   左
     原価 ／ 掲載 ／ 販売 ／ 並び         中央

   直す前の実測。見出しが全部左なのに中身が右や中央で、
   見出しと数字が 1 本の線に乗っていませんでした。

     列            見出し   行
     商品名         左      左
     カテゴリ       左      左
     価格（税込）   左      右   ★
     原価          左 ★    右   ★
     掲載          左 ★    左寄り ★
     販売          左 ★    左寄り ★
     並び          左 ★    左寄り ★

   ★ 揃えはクラスで当てること。原価の列は在庫モジュールを切った店では
     出ないので、nth-child で当てると列がずれた瞬間に別の列へ効きます。

   ★ .num（数字をそろえる指定）は残す。あれは等幅の数字を使うためのもので、
     揃え方とは別の役目です。

   ★★ セレクタに th / td を付けること（2026-09-19 に 1 回踏みました）。
     1566 行の .table td.num が text-align: right を持っていて、
     詳細度が (0,2,1) あります。クラスだけの .table--items .col-price は
     (0,2,0) で<b>負けます</b>。見出しだけ直って行が右のまま残りました。
     th/td を付けて (0,2,1) にし、あちらより後ろに置けば勝ちます。 */
.table--items th.col-name,  .table--items td.col-name,
.table--items th.col-cat,   .table--items td.col-cat,
.table--items th.col-price, .table--items td.col-price { text-align: left; }
.table--items th.col-cost,  .table--items td.col-cost,
.table--items th.col-state, .table--items td.col-state,
.table--items th.col-act,   .table--items td.col-act { text-align: center; }
/* 中央の列は中身も中央へ。掲載・販売・並びのセルは中がフォームで、
   並びは .row（flex）なので text-align だけでは寄りません */
.table--items td.col-state > form,
.table--items td.col-order > form { justify-content: center; }

/* ★ 中央ぞろえの列は左右の余白を詰める（2026-09-19、実測で発見）。

   設計の余白は 20px ですが、<b>設計自身の中身がそれでは収まっていません</b>。

     列     セル  余白20のとき中に使える  中身      結果
     原価   120        80              100〜115   あふれる
     販売   130        90               94.8      あふれる
     並び   120        80              131.3      あふれる

   左ぞろえの列では余白が「字の始まる位置」を決めるので動かせませんが、
   中央ぞろえの列では余白は<b>使える幅を削るだけ</b>で、位置には効きません。
   なので 8px にして中身の置き場を広げます。中央という設計の指定は守ったまま。

   ★ それでも原価（¥377（31.9%）＝114.8）と並び（↑↓＋数字＝131.3）は
     まだ収まりません。列を広げると設計の合計 1120 が崩れるので、
     いまは詰めるところまで。ボタンの大きさは 1px も変えていません。 */
.table--items th.col-cost,  .table--items td.col-cost,
.table--items th.col-state, .table--items td.col-state,
.table--items th.col-act,   .table--items td.col-act { padding-inline: 8px; }

/* ★ 掲載の札だけ、商品の表の中では 40px のボタンの大きさにします（2026-09-20）。
     店主の指摘「編集、掲載中、未登録は同じボタンの大きさにしないと押せる感じしなくない？」。

     同じ行に押せるものが 3 つ並ぶのに、40 / 26 / 21px とバラバラで、
     いちばん小さい「未登録」は枠も面も無い赤字でした。

   ★ 部品「店/札」の 26px は崩しません。ここは<b>商品の表の中だけ</b>の例外です。
     ほかの一覧（カテゴリ・卓・スタッフ・仕入れ）の札は 26px のままです。
     カテゴリの表で同じ手を使っています（.table--cats td.col-state .badge--act）。

   ★ 形だけ大きくして、色は変えていません（白地＋緑の枠＋緑の字）。
     押すと掲載が止まる「切り替え」なので、塗りにすると
     100 行ぶんの緑の面が並んで一覧が読めなくなります。 */
.table--items td.col-state .badge--act {
  /* ★ 2026-09-20：商品の表の中だけ、掲載の札をボタンの大きさにします。
       店主の指摘「編集、掲載中、未登録は同じボタンの大きさにしないと
       押せる感じしなくない？」。同じ行に押せるものが 3 つ並ぶのに、
       48 / 26 / 21px とバラバラでした（設計は倉庫の試作A で 3 つとも 48px）。
     ★ 部品「店/札」の 26px は崩しません。ほかの一覧の札は 26px のままです。
     ★ 色は変えません（白地＋緑の枠＋緑の字）。押すと掲載が止まる「切り替え」なので、
       塗りにすると 100 行ぶんの緑の面が並んで一覧が読めなくなります。 */
  min-height: var(--btn-h);
  padding-inline: 16px;
  font-size: 15px;
  border-radius: 8px;
}

/* --------------------------------------------------------------------------
   並び順のつまみ（2026-09-19・店主の指示「ドラック＆ドロップで入れ替え」）
   --------------------------------------------------------------------------
   ★ 既定では隠してあります。items-reorder.js が表に is-reorderable を
     付けたときだけ現れます。JavaScript が動かない環境で、押しても何も
     起きないものを見せないため。

   ★ つまみは <button>。キーボードで選べて ↑ ↓ で動かせます。
     div にすると tabindex を足す羽目になり、「押せるもの」だと
     読み上げにも伝わりません。

   ★ touch-action: none が要ります。これが無いと、指で動かしたときに
     ブラウザが「画面を縦にスクロールする操作」と解釈して、
     pointermove が途中で来なくなります（iPad で実際に効きます）。 */
.dragdot { display: none; }
.is-reorderable .dragdot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* ★ 高さ 36px → var(--btn-h)（2026-09-26）。指でつまむ取っ手なので、
       ほかの押せるものと同じ 44px にそろえます。36px は Apple の下限割れ。
       幅は 32px のまま。並べ替えの列を太らせたくないためで、
       Apple も「縦横どちらかが足りていれば実用上は届く」寄りの書き方です。 */
  width: 32px;
  height: var(--btn-h);
  padding: 0;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: var(--text-muted);
  font-size: 16px;
  line-height: 1;
  cursor: grab;
  touch-action: none;
}
.is-reorderable .dragdot:hover { background: var(--surface-2); color: var(--text); }
.is-reorderable .dragdot:active { cursor: grabbing; }
/* キーボードで選んだときは、どの行を動かすのか分かるように強く出す */
.is-reorderable .dragdot:focus-visible {
  outline: 2px solid var(--action);
  outline-offset: 2px;
  color: var(--action);
}

/* 動かしている行（2026-09-19・店主の指示
   「ドラッグ＆ドロップしてる時の動かしてるアニメーション追加して欲しいかな」）。

   ★ 掴んだ行は<b>指に付いてくる</b>。位置は JavaScript が transform で動かします。
     ここでは「持ち上がって見える」見た目だけを決めます。

   ★ position: relative と z-index が要ります。付けないと、
     動かしている行が下の行の<b>後ろ</b>に潜って見えます。
     表の行は既定では重なり順を持たないためです。

   ★ transition は書かないこと。指に付いてくる動きに transition を当てると、
     指より遅れてついてきて「引きずっている」感じになります。
     遅れてよいのは<b>よける行</b>と<b>指を離したあと</b>だけです。 */
.is-reorderable tr.is-dragging {
  position: relative;
  z-index: 2;
  background: var(--action-soft);
  box-shadow: 0 6px 16px rgba(28, 28, 28, .18);
  cursor: grabbing;
}
/* 指を離したあと、本来の位置へ滑って収まるあいだ */
.is-reorderable tr.is-landing { position: relative; z-index: 2; }

/* 動かしているあいだは文字を選ばせない。指でなぞると選択が始まって
   「掴んでいるのか選んでいるのか」分からなくなる */
.is-reorderable tbody.is-dragging-rows { user-select: none; cursor: grabbing; }

/* ★ 「動きを減らす」設定の人には滑らせない。
     並べ替えそのものは同じように使えて、演出だけ止まります。
     JavaScript 側でも見ていますが、CSS でも止めておくと
     取りこぼしがありません。 */
@media (prefers-reduced-motion: reduce) {
  .is-reorderable tbody tr { transition: none !important; }
  .is-reorderable tr.is-dragging { box-shadow: none; }
}

/* ★ 2026-09-20：px → 割合。設計の 1120px 幅での比をそのまま使います
     （280/200/140/120/130/130/120 ＝ 25 / 17.857 / 12.5 / 10.714 / 11.607 / 11.607 / 10.714%）。
     px 固定だと、縦スクロールバーが出た瞬間に使える幅が 1120 → 1105 に減り、
     表が 15px はみ出して横スクロールが生まれていました（実測）。
     割合なら、幅が変わっても設計の比のまま収まります。 */
/* ★ 列はクラスで指定すること（nth-child にしない）。
     原価の列は在庫モジュールを切ると <b>列ごと消えます</b>。
     nth-child だと、そこから右が 1 つずつ前にずれて別の列に当たります
     （カテゴリ一覧で同じ罠を踏みました）。

   ★ 値は割合。px 固定だと、縦スクロールバーが出た瞬間に使える幅が
     1120 → 1105px に減り、表が 15px はみ出して横スクロールが生まれます。

   ★ 2026-09-20：編集の列を足しました（店主の指示）。
     はじめは「販売中と並びの間に足して、余っている所から幅を集める」案でしたが、
     店主が<b>販売（品切れ）の列そのものを編集に置き換える</b>と決めたので、
     幅はどこも削らずに済みました。設計（ト10）の 280/200/140/120/130/130/120 が
     そのまま使えています。同じ切り替えは「品切れ・残数」の画面にあります。

     （参考：削る案のときの実測）
       掲載・販売 … 札の最大は「品切れ中」の 83.3px。左右 8px を足しても 99.3px で、
                    128.3px の割当に 29px ずつ余っていた（<form> が横いっぱいに
                    広がるのを「中身の幅」と数えて、余り 0 と読み違えていた）
       価格       … 24.6px 余り
       並び       … 41.8px 余り
     おかげで商品名とカテゴリは削らずに済み、原価はむしろ 118 → 130 に広げられました
     （¥377（31.9%）が入りきっていなかった）。

     結局どこも削らず、設計どおり 280 / 200 / 140 / 120 / 130 / 130 / 120 ＝ 1120。 */
/* ★ 2026-09-20：並びの列を外したので 7 → 6 列。空いた 118px を配り直しました
     （設計は倉庫の試作A）。224 / 314 / 156 / 134 / 146 / 146 ＝ 1120。
     商品名が 276 → 314px に広がり、長い名前の折り返しが減ります。 */
.table--items th.col-cat,   .table--items td.col-cat   { width: 20%; }      /* 224 */
.table--items th.col-name,  .table--items td.col-name  { width: 28.036%; }  /* 314 */
.table--items th.col-price, .table--items td.col-price { width: 13.929%; }  /* 156 */
.table--items th.col-cost,  .table--items td.col-cost  { width: 11.964%; }  /* 134 */
.table--items th.col-state, .table--items td.col-state { width: 13.036%; }  /* 146 掲載 */
.table--items th.col-act,   .table--items td.col-act   { width: 13.036%; }  /* 146 編集 */
/* 編集ボタンは中央に置く（カテゴリ一覧と同じ） */
.table--items th.col-act, .table--items td.col-act { text-align: center; }

/* レシピ・原価表（設計 ト09 731:4147）。見出し 64／行 68 は商品の表と同じ流儀。

   列は 商品 300 ／ 売価税込 140 ／ 原価税込 140 ／ 原価率税込 150 ／
   原価税抜 140 ／ 原価率税抜 150 ／ 操作 100 ＝ 1120。

   ★ 幅は nth-child ではなく<b>クラス</b>で指定すること。
     原価の 4 列は店長と見学者にしか出ません（スタッフには 3 列）。
     順番で当てると、隠れたぶんだけ別の列に幅が当たります。

   ★ 商品の列にも幅を書くこと。7 本の合計を 1120 にすると、
     table-layout: fixed が 3 つの幅を勝手に作り分けてくれます（実測で確認）。

       1432px  入れ物 1120 ＝ 合計 1120       → 設計どおりの実寸
       1024px  入れ物  912 ＜ 合計 1120       → 表は 1120 のまま。
                                                .table-wrap が横スクロール。
                                                設計 トi11 の「実機では横にスクロール
                                                します（表の幅 1120px）」と同じ
       1920px  入れ物 1444 ＞ 合計 1120       → 全列が比例して伸びる。
                                                387/181/181/193/181/193/129 となり、
                                                設計 トp11 の実測値と一致

     いちど商品の列だけ幅を書かずに「残りを吸わせる」形にしたところ、
     iPad で商品名の列が 92px まで潰れました（実測）。合計が 1120 に
     届かないと、入れ物より狭くなって横スクロールが働かないためです。 */
.theme-desk .table--recipes th { padding: 16px; height: 64px; }
.theme-desk .table--recipes td { padding: 0 20px; height: 68px; vertical-align: middle; }
.table--recipes { table-layout: fixed; }
/* ★ 2026-09-22：px → 割合。iPad（幅 1024）で本文は 897px しかなく、
     px の列が合計 1120 あると table-layout:fixed では width:100% と書いても
     <b>表が 1120 から縮みません</b>。右の列が初期表示で見切れていました。
     商品の表を 09-20 に % 化したのと同じ直しです（比は 1120 基準で不変）。 */
.table--recipes .col-name  { width: 26.786%; }  /* 300 */
.table--recipes .col-money { width: 12.5%; }  /* 140 */
.table--recipes .col-rate  { width: 13.393%; }  /* 150 */
.table--recipes .col-act   { width: 8.929%; }  /* 100 */

/* ★ 操作の列だけ左右の余白を詰める（2026-09-19、実測で発見）。

   設計の操作の列は 100px で、中身は「編集」という<b>文字</b>です。
   実装は .recbtn というボタンで、min-width が 88px あります。

     セル 100 － 左右の余白 20×2 ＝ 中に使えるのは 60px
     ボタン 88px  →  28px はみ出す（1432px と 1024px で実測）

   列を広げると設計の 1120 が崩れるので、余白のほうを詰めます。
   100 － 6×2 ＝ 88 でちょうど収まります。
   （1920px では列が 128.9 に伸びるので元から収まっていました） */
.theme-desk .table--recipes td.col-act,
.theme-desk .table--recipes th.col-act { padding-inline: 6px; }

/* カテゴリの表（設計 09 カテゴリ 41:1725）。
   見出し 16／行 20 の流儀は商品・仕入れと同じ。列幅だけ違う（合計 1120） */
.theme-desk .table--cats th { padding: 16px; height: 64px; }
/* ★ 2026-09-19：上下の余白を 0 にしました（店主の指摘「レイアウトちょっとズレてる」）。

     並べ替えのつまみ（36px）を置いたら、20 + 36 + 19 ＋ 区切り線 1 ＝ 76px になり、
     設計の 68px から 8px はみ出していました。上下を 0 にすると 36px が収まり、
     height の 67 が効いて区切り線と合わせてちょうど 68 になります。
     <b>つまみは 1px も小さくしていません。</b>商品・レシピの表と同じ直し方です。 */
.theme-desk .table--cats td { padding: 0 20px; height: 68px; vertical-align: middle; }

/* 卓の表（2026-09-19 に追加）。

   ★ <b>それまで指定が 1 行もありませんでした。</b>カテゴリと並べると、
     列幅は中身任せ（table-layout: auto）、見出しは 61.5px、
     セルの余白は 20/12 と、どこもそろっていませんでした。実測:

       項目            カテゴリ   卓（直す前）
       列幅            固定       自動（355.1 / 148 / 167.3 / 238.4 / 211.2）
       見出しの高さ     64         61.5
       行の高さ         68         77
       セルの余白       16 / 16    20 / 12

   ★ 列幅は設計（ト12）の 320 / 180 / 240 を引き継ぎ、
     設計に無い「並び」を 160（カテゴリと同じ）、残りを状態へ。
     320 + 180 + 240 + 220 + 160 ＝ 1120。 */
.theme-desk .table--tables th { padding: 16px; height: 64px; }
.theme-desk .table--tables td { padding: 0 20px; height: 68px; vertical-align: middle; }
.table--tables { table-layout: fixed; }
/* ★ 2026-09-22：px → 割合。iPad（幅 1024）で本文は 897px しかなく、
     px の列が合計 1120 あると table-layout:fixed では width:100% と書いても
     <b>表が 1120 から縮みません</b>。右の列が初期表示で見切れていました。
     商品の表を 09-20 に % 化したのと同じ直しです（比は 1120 基準で不変）。 */
.table--tables th:nth-child(1), .table--tables td:nth-child(1) { width: 28.571%; }  /* 320 */
.table--tables th:nth-child(2), .table--tables td:nth-child(2) { width: 16.071%; }  /* 180 */
.table--tables th:nth-child(3), .table--tables td:nth-child(3) { width: 21.429%; }  /* 240 */
.table--tables th:nth-child(4), .table--tables td:nth-child(4) { width: 19.643%; }  /* 220 */
.table--tables th:nth-child(5), .table--tables td:nth-child(5) { width: 14.286%; }  /* 160 */
.table--cats { table-layout: fixed; }
/* ★ 2026-09-20：操作（編集する）列を足して 5 本にしました（設計 ト11）。

     カテゴリ名 340 ／ 品数 140 ／ 状態 300 ／ 操作 180 ／ 並び 160 ＝ 1120。

   ★ nth-child ではなくクラスで当てること。
     列は th:if で消えることがあり、nth-child だと 1 本減った瞬間に
     別の列へ幅が当たります（.table--recipes が先にこの形に直してあります）。 */
.table--cats { /* 合計 1120。fixed なので、足りないと .table-wrap の横スクロールが効かない */ }
/* ★ 2026-09-22：px → 割合。iPad（幅 1024）で本文は 897px しかなく、
     px の列が合計 1120 あると table-layout:fixed では width:100% と書いても
     <b>表が 1120 から縮みません</b>。右の列が初期表示で見切れていました。
     商品の表を 09-20 に % 化したのと同じ直しです（比は 1120 基準で不変）。 */
.table--cats th.col-name, .table--cats td.col-name { width: 30.357%; }  /* 340 */
.table--cats th.col-count, .table--cats td.col-count { width: 12.5%; }  /* 140 */
.table--cats th.col-state, .table--cats td.col-state { width: 26.786%; }  /* 300 */
.table--cats th.col-act, .table--cats td.col-act { width: 16.071%; }  /* 180 */
.table--cats th.col-order, .table--cats td.col-order { width: 14.286%; }  /* 160 */

/* ★ 状態の札は押せる（2026-09-20）。編集画面からチェックを外したので、
     表示／非表示を切り替えられるのはここだけになりました。
     .badge--act が枠と ▸ を足して「押せる」を形で伝えます（2026-09-17 の決まり）。

   ★ 寸法は設計 ト11 の実測に合わせてあります（店主の指摘
     「表示中のボタンとかフィグマと違うから修正して」）。

       設計   64 x 24   pad 4/10   字 13
       実装   79.9 x 48（直す前）  ← min-height: 48px を入れていた

     いったん「押すものだからタップ領域 48px」と考えて床を入れましたが、
     設計は 24px で、商品一覧の札（29.6px）とも食い違っていました。
     .theme-desk .badge の 14px が効いているので、ここだけ 13px に戻します。
     4 + 16 + 4 = 24。

   ★ カテゴリの表に絞ること。.badge--act は商品一覧でも使っていて、
     あちらの設計（ト10）は押せない札のまま（59x16 の塗りつぶし）です。
     全体を動かすと、商品一覧で「押せる札だけ小さい」がその場で起きます。 */
.table--cats td.col-state .badge--act {
  font-size: 13px;
  line-height: 16px;
  /* ★ 2026-09-20 に 3px → 4px へ戻しました。
       当時この札は設計で 24px でしたが、それは部品「店/札」の
       インスタンス 81 個が「中身に合わせる」に化けて縮んでいたためでした
       （原本はずっと 26px 固定）。原本どおりに戻したので、こちらも 26 に合わせます。
       4 + 16 + 4 + 枠 2 = 26。 */
  padding-block: 4px;
  /* 設計の文字と ▸ の間は 1px。.badge の gap 4px と
     .badge--act::after の margin-left 1px が足されて 5px になっていました */
  gap: 0;
  /* ★ 2026-09-26：高さを商品の表とそろえました。
       2026-09-20 の決定「編集、掲載中、未登録は同じボタンの大きさにしないと
       押せる感じしなくない？」は<b>幅によらない</b>話です。
       それまでは iPad（1380px 以下）でだけ 44px になり、PC では 26px に
       戻っていました。同じ画面を PC と iPad で見ると札の大きさが変わる、
       という状態です（実測で見つけました）。 */
  min-height: var(--btn-h);
}

/* ★ 操作列の［編集する］（設計 ト11）。

       設計   84 x 40   枠 #0e9721   字 15   文字色 #0b7a1a
       実装   87.8 x 48 枠 #c7c7c7（直す前）

     部品としては「枠線・小」です。この設計システムでは
     小さい枠線ボタンだけ緑枠（標準と大はグレー）になっています。
     行の中の「直しに行く」口は緑、という使い分けです。

   ★ .theme-desk から書くこと。.table--cats .btn--sm だけ（0,2,0）だと、
     あとに出てくる .theme-desk .btn--sm（同じ詳細度）に負けます。

   ★ 40px は CLAUDE.md の「タップ領域 48px 以上」を割ります。
     .btn--sm は他の画面でも 40px で出荷済みなので、ここだけ広げると
     設計とも他画面とも食い違います。設計に合わせ、床は入れていません。 */
.theme-desk .table--cats .btn--sm {
  --btn-bd: #0e9721;
  --btn-fg: var(--action);
}

/* 操作列は中央ぞろえ（設計 ト11。セルの揃えは CENTER） */
.table--cats th.col-act, .table--cats td.col-act { text-align: center; }

/* ── カテゴリの編集画面の商品表（2026-09-20・設計 ト11b） ──────────────

   ★ .table--items を流用しないこと。あちらは 7 列ぶんの幅を持っているので、
     4 列に当てると先頭 4 本だけ効いて残りが最終列に寄ります。

   選ぶ 72 ／ 商品名 468 ／ 価格 180 ／ 状態 400 ＝ 1120。
   見出し 64 / 行 67（＋区切り線 1 ＝ 68）は、カテゴリ・卓・商品とそろえた値です。 */
.table--catitems { table-layout: fixed; }
.theme-desk .table--catitems th { padding: 16px; height: 64px; }
.theme-desk .table--catitems td { padding: 0 20px; height: 68px; vertical-align: middle; }
/* ★ 2026-09-22：px → 割合。iPad（幅 1024）で本文は 897px しかなく、
     px の列が合計 1120 あると table-layout:fixed では width:100% と書いても
     <b>表が 1120 から縮みません</b>。右の列が初期表示で見切れていました。
     商品の表を 09-20 に % 化したのと同じ直しです（比は 1120 基準で不変）。 */
.table--catitems th.col-check, .table--catitems td.col-check { width: 6.429%; }  /* 72 */
.table--catitems th.col-name,  .table--catitems td.col-name  { width: 41.786%; }  /* 468 */
.table--catitems th.col-price, .table--catitems td.col-price { width: 16.071%; }  /* 180 */
/* ★ 2026-09-20：状態 400 → 240。空いた 160px を並びの列にしました
     （設計 ト11b 1145:13371）。状態には札が 1 つ入るだけで、
     実際に要るのは 90px ほどなので、削っても窮屈になりません。
     72 ＋ 468 ＋ 180 ＋ 240 ＋ 160 ＝ 1120。 */
.table--catitems th.col-state, .table--catitems td.col-state { width: 21.429%; }  /* 240 */
.table--catitems th.col-order, .table--catitems td.col-order { width: 14.286%; }  /* 160 */
.table--catitems th.col-price, .table--catitems td.col-price { text-align: right; }
.table--catitems th.col-check, .table--catitems td.col-check { text-align: center; padding-inline: 8px; }

/* ★ 表の中のチェックボックスは、このアプリで初めてです（既存 0 件）。
     .choice を流用しないこと。あちらは枠付き 48px のカードなので、
     表のセルに入れると行が札だらけになります。

     セル全体を押せるようにして、タップ領域 48px を満たします。 */
.checkcell {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: var(--tap);
  cursor: pointer;
}
.checkcell input[type="checkbox"] { width: 20px; height: 20px; accent-color: var(--action); }

/* ★ カードの中に置いた .alert の余白。
     .alert は margin: 16px 0 を持ち、<main> の直下でだけ 0 に潰しています。
     カードの中では 16px が生きるので、.card__body の 24px と足されて
     「別のカード」に見えてしまいます。 */
.card__body > .alert { margin-block: 0; }

/* .alert の中に押せるものを 2 つ並べる（同名で止めたときの［ここへ移す］）。
   .alert が面倒を見ているのは p:last-child と ul:last-child だけでした。 */
.alert__actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 12px; align-items: center; }
.alert__actions form { display: contents; }

/* ★「＋ 新しい大分類を作る」を選んだときだけ出す欄（2026-09-20）。

     JS ではなく :has で出し入れします。app.css はすでに :has を 48 か所で
     使っているので、対応そのものは懸念になりません。

   ★ 既定を「出す」にしてあるのは、CSS が効かない環境で
     操作不能にしないためです（datenav.js が明文化している方針）。
     .field は display 指定を持たないので、隠すときに素直に消えます。 */
/* ★ :has() の中に :has() を入れないこと。仕様で禁止されていて、
     規則ごと無効になります。エラーは出ず、欄が出しっぱなしになるだけなので、
     測るまで気づけませんでした（実測 display: block のまま）。

     × .catnew:has(select:not(:has(option[value="__new__"]:checked)))
     ○ .catnew:not(:has(option[value="__new__"]:checked))            ← 入れ子なし */
.catnew:not(:has(option[value="__new__"]:checked)) .catnew__name { display: none; }

/* 名前を変える欄は既定で畳む。開けるのは JS（無ければ出たまま＝操作はできる） */
.nameeditor[data-name-editor="closed"] { display: none; }

/* 厨房ボードの見出しカード（設計 現01 434:2045 / 2026-09-07 に実測合わせ）は
   2026-09-12 に 33 節（.kitchenboard）へ移しました。
   同じ値が 2 箇所にあると必ず片方だけ古くなるためです。 */

/* ==========================================================================
   食材・在庫（設計 現04 441:2715 / 2026-09-07 の編集を反映）
   ========================================================================== */
/* この画面だけ縦の余白を 32 にする（設計で 64 → 32 に編集された）。
   ★ 共通の --main-pad-y は触らない。全管理画面が一斉に動くため。
     :has の中のクラスは食材・在庫の見出しにしか付いていない。
     詳細度は (0,3,0) で、共通定義（.theme-desk .staff-main = 0,2,0）に勝つ */
/* ★ Figma で上下 64px なのはこの 3 画面だけ（01 ページ採寸 2026-09-13）。
     ほかは基準の 32px が当たります。
     ★ 厨房ボードはここに入れないこと。01 ページは 64px ですが、
       05 ページ「現01 厨房ボード」は 32px で、そちらは iPad で伝票が
       1.7 枚しか見えない問題を詰めたときの版です。店主の判断待ちのあいだは
       32px（基準）のままにしてあります。 */
/* ★ 2026-09-17 に外しました（店主の指摘「食材の見出しだけ上の余白が大きい」、
     続けてレシピ・売上・バックアップ・ダッシュボードも）。

     実測すると、店主が挙げた画面がそのまま「見出しの上が 120px の組」で、
     ほかの 7 画面は 88px でした。この 3 画面はここで 64px にしていたぶんです。

     根拠は上に書いてあるとおり 01 ページ（古い版）の採寸でした。
     いま正としている 07 ページで測り直すと

       食材 32 ／ レシピ 64 ／ バックアップ 64 ／ 商品 64 ／ 品切れ 32 ／ 売上 64

     と設計そのものがばらついていて、根拠になりません。
     そろえるほうを採り、基準の 32px に統一しました。 */

/* 見出しの帯（設計 441:2852）。左右 40・上下 16 の内側に題・日付・ボタンを並べる。
   ★ ボタンは右端。margin-left:auto で押し出す。
     .theme-snow が .section-title::after（右へ抜ける罫線＝すきま役）を
     消しているので、これが無いとボタンが日付のすぐ隣に居座る。
   ★ 左右 40 は設計どおり。表（左右 0）より一段内側に入る。 */
.stockpage .inv-ingredients {
  align-items: center;
  gap: 16px;
  padding: 16px 40px;
  margin: 0 0 16px;
}
/* ★ 最初のボタンだけ右へ送ること（2026-09-18・店主の指摘）。

   flex の margin:auto は余白を吸収します。すべての .btn に付けると、
   ボタンが 2 つ並んだとき<b>余白が半分ずつ分配されて間が開きます</b>。
   （「まとめて棚卸し」を足した 2026-09-18 に実際そうなりました）

   仕入れ・経費は「のばす」を前に 1 つだけ置いて 2 つまとめて送る形で、
   そちらが正しい組み方です。ここは目印が付けにくいので、
   最初の 1 つだけに auto を効かせて同じ結果にします。 */
.stockpage .inv-ingredients .btn:first-of-type { margin-left: auto; }

/* しぼり込み（設計 466:5915）。2 つの間は 42。上の間隔は見出しの 16 に任せる。
   ★ 高さは素の .searchbox が 64 で設計どおりなので、何も足さない。
     以前は .searchbox--slim で 48 に落としていたが、設計が 64 だったので外した
     （品切れ・残数も素の .searchbox なので、2 画面で高さがそろう）。 */
.stockpage .stockfind { gap: 42px; margin-top: 0; }
/* しぼり込みと表の間は 16 */
.stockpage > .table-wrap { margin-top: 16px; }

/* 食材の表の寸法（設計 ト04 725:4457）。列幅は合計 1120。

   ★ 2026-09-19：高さを設計の実測値にそろえました。

       見出し  実装 49.5 → 設計 56
       行      実装 67   → 設計 72

     見出しは「上下 14 ＋ 中身」で書いてあり、中身が 12px の文字で 21.5 しか
     無いため 49.5 止まりでした。設計の中身は 28 なので、高さを直接敷きます。

   ★ 行は 71 で書くこと。区切り線（border-bottom 1px）が設計では面の内側に
     あり、72 の中に含まれます。CSS の border は外に足されるので 1 引きます
     （商品・レシピの表と同じ理由）。 */
.theme-desk .table--stock th { padding-top: 14px; padding-bottom: 14px; }
.theme-desk .table--stock td { padding-top: 16px; padding-bottom: 16px; }
/* ★ 高さは :has(.recbtn) で絞ること（2026-09-19）。
     同じ .table--stock を「未学習のレシート品名」の表も使っていて、
     あちらは設計に無い別の表です。絞らずに敷くと、
     関係のない表の行まで 50 → 72px に太ります（下の余白の指定と同じ理由）。 */
.theme-desk .table--stock:has(.recbtn) th { height: 64px; }
.theme-desk .table--stock:has(.recbtn) td { height: 68px; }

/* 「少ない」「マイナス」の札（設計 ト04 は 11px・49x21）。
   共通の .theme-desk .badge は 14px なので、この表だけ一段小さくする。
   行が 72px の中に名前と札が並ぶので、14px だと札のほうが目立ちすぎる。 */
.theme-desk .table--stock .badge { font-size: 11px; line-height: 1.4; padding: 2px 8px; }

/* ★ 行の上下 9 は「記録する」ボタンがある表だけ（2026-09-07）。
     ボタンが高さ 54 なので、上下 16 のままだと行が 86px になり、
     1 画面に入る食材が 2 つ減る。9 にすると設計どおり 72px（9 + 54 + 9）。

     :has で絞っているのは、同じ .table--stock を
     「未学習のレシート品名」の表（下のほう）も使っているから。
     あちらにはボタンが無いので、9 にすると理由もなく詰まる。 */
.theme-desk .table--stock:has(.recbtn) td { padding-top: 9px; padding-bottom: 9px; }
.table--stock { table-layout: fixed; }
/* ★ 2026-09-22：px → 割合。iPad（幅 1024）で本文は 897px しかなく、
     px の列が合計 1120 あると table-layout:fixed では width:100% と書いても
     <b>表が 1120 から縮みません</b>。右の列が初期表示で見切れていました。
     商品の表を 09-20 に % 化したのと同じ直しです（比は 1120 基準で不変）。 */
.table--stock th:nth-child(1), .table--stock td:nth-child(1) { width: 21.429%; }  /* 240 */
.table--stock th:nth-child(2), .table--stock td:nth-child(2) { width: 8.929%; }  /* 100 */
.table--stock th:nth-child(3), .table--stock td:nth-child(3) { width: 10.714%; }  /* 120 */
.table--stock th:nth-child(4), .table--stock td:nth-child(4) { width: 11.607%; }  /* 130 */
.table--stock th:nth-child(5), .table--stock td:nth-child(5) { width: 24.107%; }  /* 270 */
.table--stock th:nth-child(6), .table--stock td:nth-child(6) { width: 12.5%; }  /* 140 */
.table--stock th:nth-child(7), .table--stock td:nth-child(7) { width: 10.714%; }  /* 120 */

/* 「記録する」（設計 466:6111 / 2026-09-07）。
   文字リンク → 枠付きのボタン。一覧を眺めている段階で「押せる」と分かる必要がある。
   文字だけだと、同じ行にある食材名のリンクと見分けが付かなかった。

   枠と文字だけを緑にして面は白のまま。面まで塗ると 1 画面に 6〜10 個並んだとき、
   緑の帯が縦に連なって表の数字より目立つ。押せることが分かれば足りる。

   ★ 色は --action（2026-09-17・店主の指摘「編集ボタンが昔のまま」）。
     それまで var(--accent) を使っていて、これは :root では黒だが
     .theme-desk がティールに上書きするため、スタッフ側のここだけ旧色で
     残っていました。設計（ト09 731:4147 の「ボタン／編集」）は
     枠も文字も #0b7a1a＝--action で、遅れていたのはコードのほうです。

   ★ 寸法は 設計 60×34 に対して 幅は中身なり・高さ 48px にしています。
     34px は CLAUDE.md の「タップ領域は 48px 以上」を割るため。
     品切れ・残数の表でも同じ判断をしていて、そこには
     「押せるものなので 48px は割らない」と書いてあります。
     幅は 100% で列いっぱいに伸ばしていたのをやめました。
     設計は 60px の小さなボタンで、列幅いっぱいの帯ではありません。 */
.recbtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 88px;
  height: var(--btn-h);
  padding-inline: 16px;
  border: 1px solid var(--action);
  /* ★ 角丸 6px → 8px（2026-09-26）。ほかのボタンは全部 8px でした。 */
  border-radius: 8px;
  background: var(--bg-elevated);
  color: var(--action);
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}
.recbtn:hover { background: var(--action-soft); }

/* ★ 狭い画面では幅の主張をやめる（2026-09-22）。

     列幅を % にして表そのものは iPad（本文 897px）に収まったのに、
     <b>このボタンだけが縮まず</b>セルから溢れて、箱の横スクロールが
     残っていました（レシピ 14px・食材 4px）。
     操作列は設計 100px ＝ 1120 の 8.9% なので、897px では 80px しかなく、
     min-width 88px のボタンはどうやっても入りません。

     直すのは「幅」だけ。<b>ここでは</b>高さ 48px を触りません。

   ★ 2026-09-26 に方針が変わりました。iPad（〜1140px）の<b>一覧の表の中だけ</b>、
     タップを 44px に下げています（店主の判断）。44px は Apple（44pt）と
     WCAG 2.1 AAA が揃って認める床で、Material の 48 は下回ります。
     下げるのは「落ち着いて探す」画面だけで、入力欄・画面下の送信ボタン・
     厨房ボードは 48px のままです。CLAUDE.md の 48px は<b>既定</b>として残ります。

   ★ 区切りは 1100px。この数字はこのファイルで既に使っている
     タブレットの境目（.detail2・日付の帯・売上の段組み）に合わせてあります。
     新しい境目を増やすと、どの幅で何が変わるのかを追えなくなります。 */
@media (max-width: 1100px) {
  /* ★ 2026-09-26：min-width: 0 をやめ、文字が 1 行に収まる幅を残します。
       0 まで潰していたので、操作列を広げてもボタンは 44px のままで、
       「編集」の 2 文字すら折り返して<b>高さが 48px</b>になっていました
       （nowrap があるのに 2 行に見えたのはこれが理由）。
       レシピの行だけ 57px で、ほかの一覧（53px）とそろわない原因でした。
     ★ 72px は「登録する」（13px × 5 文字 ＝ 65）＋左右 8px の実測から。 */
  .recbtn { min-width: 72px; padding-inline: 8px; }
}

/* まだ手を付けていない行（2026-09-19・店主の指摘
   「編集するは緑だけど登録するは赤の方が良いんじゃない？」）。

   緑＝もう済んでいる／赤＝まだ。行ごとの状態がボタンの色で読める。

   ★ 形は .recbtn のまま、枠と文字の色だけ変える。
     塗りつぶしにはしない。押すと編集画面が開くだけで、
     消したり止めたりするボタンではないため。
     この画面のほかの赤（単価不明の札）とも同じ色でそろう。

   ★ .recbtn 自体は変えないこと。食材・在庫の「記録する」も同じクラスで、
     あちらに「済み／未済」の区別は無い。 */
.recbtn--todo {
  border-color: var(--danger);
  color: var(--danger);
}
.recbtn--todo:hover { background: var(--danger-soft); }

/* 品切れ・残数の「探す／カテゴリを選ぶ」（設計 現03 439:2496 / 2026-09-07）。
   2 つを横に並べる。狭い画面では縦に落ちる */
.stockfind {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-top: 48px;
}
@media (max-width: 900px) {
  .stockfind { grid-template-columns: 1fr; }
}
/* 商品の「探す」と「カテゴリーから検索」（2026-09-19、設計 ト10 731:4408）。

   設計は「しぼり込み 527x48」を 2 つ、あいだ 42px。
   ただし設計の箱は 1096px で右端が 1384、見出しと表（1408）より
   24px 短かったので、実装は 1120 いっぱいに伸ばしてそろえている
   （Figma 側も 1120 に直した）。1 つあたり (1120 - 42) / 2 = 539px。

   ★ .stockfind と作りは同じだが別名にしている。
     あちらは品切れ・残数と食材・在庫の 2 画面で使っていて、
     間隔（42px）は .stockpage で上書きしている。相乗りすると
     「片方を直すともう片方が動く」関係ができる。 */
.itemfind {
  display: grid;
  grid-template-columns: 1fr 1fr;
  /* ★ 2026-09-20：42 → 16。設計（ト10 しぼり込みの列）の間は 16px です。
     42 は「2 枚並べた残りを埋めた結果」の数で、余白の刻み（8/16/24/32/48）に
     ありません。設計では 552 ＋ 16 ＋ 552 ＝ 1120 でぴったり合います。 */
  gap: 16px;
}
/* カテゴリが 1 つも無い店では 1 列。2 列のまま片側を空けると壊れて見える */
.itemfind--single { grid-template-columns: 1fr; }
/* ★ .searchbox は単独で置かれる前提の margin-top: 48px を持っている。
     grid の中だとセルの中で効いて、探す欄だけ 48px 下にずれる。
     段の間隔は外側（.theme-desk .staff-main > main の gap 48）が決める。 */
.itemfind .searchbox { margin-top: 0; }

/* ★ 中に入れた探す欄の上マージンを消す（2026-09-07 に修正）。
     .searchbox は単独で置かれる前提で margin-top:48px を持っている。
     grid の中だとこれがセルの中で効き、行の高さが 64 → 112 に伸びて、
     探す欄だけ 48px 下にずれていた。間隔は外側（.stockfind）で決める。
     品切れ・残数（現03）でも同じずれ方をしていた。 */
.stockfind .searchbox { margin-top: 0; }

/* カテゴリの選択。押すと下に一覧が出る（details）。
   ★ JavaScript は使わない。開閉はブラウザが持っている機能で、
     切られていても「閉じない」だけで中のリンクは押せる。 */
.catpick {
  /* ★ 2026-09-20：開いた一覧を重ねて出すための基準（店主の指摘
       「カテゴリ選択しようとするたびに表が動いて使いづらかった」）。
       それまでは一覧が場所を取る作りで、開くと下の表が最大 320px 押し下げられ、
       見ていた行が画面の外へ出ていました。並べ替え（.sortpick）と同じ形にします。 */
  position: relative;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg-elevated);
}
.catpick__head {
  display: flex;
  align-items: center;
  gap: 10px;
  /* 探す欄（.searchbox の height）と外形をそろえる。並べたときに段差があると
     「片方は入力欄、片方はボタン」に見えて種類が違うものだと誤解される。

     ★ そろえる相手は「外形」であって、この数字ではありません。
       .searchbox    … height:48px。自分に枠があり border-box なので外形 48
       .catpick      … 枠 1px。高さ指定が無く、中のこの値で決まる
       .catpick__head… ここ。外形は 1 + この値 + 1
     なので 48 − 2 = 46 が正しい値です。

     ★ 2026-09-14 に 62px → 48px → 46px と 2 度直しました。
       62 は取り残し（探す欄は 2026-09-13 に 64→48 へ統一済みだったのに、
       追いかける側が数字を直書きしていた）。
       48 は<b>わたしの誤り</b>で、枠のぶん 2px 高いままでした。
       品切れ・残数には最初から 46px の上書きがあり、そこには
       「枠 1px ＋ 46px ＝ 48px」と正しい理由が書いてありました。
       FilterRowHeightTest が枠を足した外形で突き合わせています。 */
  min-height: 46px;
  padding: 0 14px;
  cursor: pointer;
  font-size: 15px;
  color: var(--text);
  list-style: none;
}
.catpick__head::-webkit-details-marker { display: none; }
/* 開いているかを示す丸。閉じているときは枠だけ、開くと塗る */
/* 開閉のしるし。下向きの三角（設計 466:5911 と同じ形。2026-09-09 に丸から変更）。
   丸だと「選択済みの印」に見えて、押すと開くことが伝わらなかった。
   三角は開くと上を向くので、いまの状態も一目で分かる。
   ★ border で三角を描いているので、開いたときに border-color を
     一括で変えないこと（4 辺すべてが塗られて三角が四角になる） */
.catpick__mark {
  width: 0; height: 0;
  flex: none;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 6px solid var(--text-muted);
  border-bottom: 0 solid transparent;
}
/* 開いたら上向き。★ transform: rotate は使わない。
   幅 0・高さ 0 の箱では効かず（実測で identity のまま）、
   色だけ変わって向きが変わらない状態になった。
   塗る辺を上下で入れ替えるほうが確実。 */
.catpick[open] .catpick__mark {
  border-top: 0 solid transparent;
  border-bottom: 6px solid var(--accent);
}

/* 品切れ／販売再開のボタン（2026-09-09）。
   文言の長さが違う（6 字 と 4 字）ので、幅を決めておかないと押すたびに
   ボタンの大きさが変わり、行ごと動いて次の品を押し間違える。
   6 字が収まる幅で固定する。 */
.stock-toggle { min-width: 148px; white-space: nowrap; }
/* ★ 2026-09-20：下線をやめました。一覧を重ねて出すようにしたので、
     頭の下に線だけ残ると、つながっていないものがつながって見えます。
     開いていることは枠の色で伝えます（並べ替えと同じ）。 */
.catpick[open] { border-color: #0e9721; }
.catpick[open] .catpick__head { color: var(--action); }

/* ★ 閉じているあいだは中身を出さない（2026-09-07 に修正）。
     details の中身はブラウザが隠してくれるが、こちらで display を
     指定すると<b>その指定が勝って開きっぱなしになる</b>。
     下の display:flex がまさにそれで、「押すと下に一覧が出る」はずの
     カテゴリ選択が、最初から一覧を出したままになっていた。
     品切れ・残数（現03）でも同じ状態だった。 */
.catpick:not([open]) .catpick__list { display: none; }

.catpick__list {
  /* ★ 2026-09-20：場所を取らずに重ねて出します。
       開いても下の表は 1px も動きません。
     ★ left/right を 0 にして、閉じているときの欄と同じ幅で出します。
       中身の幅で決めると、カテゴリ名の長さによって毎回幅が変わります。 */
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 8px);
  z-index: 20;
  display: flex;
  flex-direction: column;
  padding: 6px;
  border: 1px solid #e8e8e8;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 4px 16px rgba(0, 0, 0, .12);
  /* ★ 上限は picker.js が開いた瞬間に「画面の下端まで」で入れ直します
       （店主の指摘「下にスクロールしなくても良い場合はしないぐらい
         max ま下まで表示して欲しい」）。
       ここの 60vh は<b>JS が動かないときの受け皿</b>です。320px 固定だと、
       画面の下に十分な余りがあるのに 14 個中 6 個しか見えませんでした。 */
  max-height: 60vh;
  overflow-y: auto;
}
.catpick__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  /* CLAUDE.md の「タップ領域は 48px 以上」 */
  min-height: 48px;
  padding: 0 12px;
  border-radius: 4px;
  color: var(--text);
  text-decoration: none;
  font-size: 15px;
}
.catpick__item:hover { background: var(--accent-soft); }
/* ★ 2026-09-18：--accent をやめました。:root では黒ですが .theme-desk では
     --green-700（＝ #0b7a78・古いティール）になり、選択中だけティールに
     なっていました。押せるもの・選ばれているものは --action 系で持ちます。
     サイドバーの選択中（#0b7a1a / 薄い緑）と同じ見え方になります。 */
.catpick__item.is-active { background: var(--action-soft); color: var(--action); font-weight: 700; }
.catpick__count {
  flex: none;
  font-size: 13px;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}
.catpick__item.is-active .catpick__count { color: var(--action); }

/* 構成比の棒（注文履歴の「売れた商品」）。

   ★ 画像も JavaScript も使わず、幅だけで描く。
     店内 Wi-Fi にネットが無くても崩れない、という決まり（CLAUDE.md）に沿う。
   ★ 数字を棒の中に入れず、右に並べる。
     短い棒（数 %）のときに数字がはみ出して読めなくなるため。 */
.sharebar {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-width: 140px;
}
.sharebar__fill {
  height: 8px;
  min-width: 2px;
  max-width: 100%;
  border-radius: 999px;
  background: var(--accent);
  flex: none;
}
.sharebar__num {
  font-size: 13px;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
  flex: none;
}

/* 売上の配分表の「差」（設計 14 売上）。
   ★ プラスが赤。ふつうの増減とは色が逆になる。
     費目は少ないほうがよいので、目標を上回っている＝使いすぎ。
     ここを緑にすると「よく出来ている」と読めてしまう。 */
.table--breakdown .is-over  { color: var(--danger); font-weight: 700; }
.table--breakdown .is-under { color: var(--text-muted); }

/* スタッフの表（設計 13 スタッフ 41:2170）。合計 1120 */
.theme-desk .table--staff th { padding: 16px; height: 64px; }
.theme-desk .table--staff td { padding: 20px 20px 19px; height: 68px; }
.table--staff { table-layout: fixed; }
/* ★ 2026-09-20：330/270 → 320/280。設計（ト15 732:4888）の実測値です。
     合計はどちらも 1120 なので、見た目では気づけませんでした。 */
/* ★ 2026-09-22：px → 割合。iPad（幅 1024）で本文は 897px しかなく、
     px の列が合計 1120 あると table-layout:fixed では width:100% と書いても
     <b>表が 1120 から縮みません</b>。右の列が初期表示で見切れていました。
     商品の表を 09-20 に % 化したのと同じ直しです（比は 1120 基準で不変）。 */
.table--staff th:nth-child(1), .table--staff td:nth-child(1) { width: 28.571%; }  /* 320 */
.table--staff th:nth-child(2), .table--staff td:nth-child(2) { width: 25%; }  /* 280 */
.table--staff th:nth-child(3), .table--staff td:nth-child(3) { width: 19.643%; }  /* 220 */
.table--staff th:nth-child(4), .table--staff td:nth-child(4) { width: 26.786%; }  /* 300 */

/* --------------------------------------------------------------------------
   30-6-3. 売上・ダッシュボードの面（.sheet）— 2026-09-05
   --------------------------------------------------------------------------
   商品一覧のような「白地に表」ではなく、
   薄いグレーの地に白いパネルが浮く形。設計（Figma「14 売上」）どおり。

   地の色を変えているのは、この画面だけ<b>読む画面</b>だから。
   商品や卓は「直す」画面なので、白地のまま操作対象を目立たせる。
   売上は数字を見比べる画面なので、面を分けて塊を作る。
   -------------------------------------------------------------------------- */
.sheet {
  display: flex;
  flex-direction: column;
  gap: 20px;
  background: var(--surface);
  /* .staff-main の余白を打ち消して、地を端まで敷く。
     打ち消す量は変数で結んである。直接 -64px と書くと、
     広い画面で本文の余白を変えたときにここだけ取り残されて、
     地が端まで届かない（または はみ出す）ずれになる */
  margin: calc(var(--main-pad-y) * -1) calc(var(--main-pad-x) * -1);
  padding: 32px var(--main-pad-x);
}

/* ★ .monthnav（月を移る文字リンク式の帯）は廃止しました（2026-09-18）。
     店主の指示「売り上げの ← 前月 2026年08月 翌月 → のデザインは
     昔のものだから新しいものに統一させて」。
     売上が最後の利用者でした。いまは全画面が .datenav です。 */
/* 仕入れの詳細の 2 カラム（設計 ト05e 840:9735・2026-09-17）。

   左＝証憑としての状態＋明細、右＝レシート画像。
   この画面の仕事は「紙と見比べる」ことなので、数字と画像が同時に見えないと
   スクロールで往復することになる。

   狭い画面では 1 列に落とす。そのとき画像が下に来るのは、
   先に読むのが数字のほうだから（左の列を先に書いてある）。 */
.detail2 {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 356px;
  gap: var(--sp-4);
  align-items: start;
}
.detail2__main { min-width: 0; }
@media (max-width: 1100px) {
  .detail2 { grid-template-columns: minmax(0, 1fr); }
}
/* レシートは縦長なので、高さで頭打ちにする。
   横幅だけ 100% にすると、縦長の写真が列を押し下げて明細と高さが合わない */
.receiptshot {
  display: block;
  width: 100%;
  max-height: 420px;
  object-fit: contain;
  object-position: top;
  background: var(--surface-2);
  border-radius: var(--r-sm);
}

/* 日付・月の切り替えの帯（注文履歴・仕入れ・経費・売上・税理士 5 枚・2026-09-17）。

   並びは 前 → 入力 → 表示 → 次 で統一（店主の指示）。
   .input は width:100% を主張するので、帯の中では実寸に落とす。
   注文履歴は style="max-width:12rem" を直接書いていたが、
   2 画面で同じ形になったのでここへ寄せた。

   高さ（--tap 48px）と文字（16px）は落とさない。触る端末で押しにくくなるのと、
   iOS が 16px 未満の入力欄でフォーカス時に画面を拡大するため（CLAUDE.md）。 */
/* ★ min-width を必ず持たせること（2026-09-17・店主の指摘）。
     日本語の年月は「2026年09月」で、右にカレンダーのアイコンも付きます。
     仕入れ・経費は .input--narrow（max-width: 8rem＝128px）を使っていて、
     月が切れて表示されていました。 */

/* ★ 帯じたいが並びを決めます（2026-09-18・店主の指示）。
     もとは .row .row--wrap と組にして使い、題の行とは別のブロックとして
     下に置いていました。題の行（.page-head / .section-title）の中へ
     移したので、外から並びをもらう形をやめて自分で持たせています。

     店主の指示はこうです。
       「← 前月 2026年08月 翌月 → の配置場所は見出しの右側、
         売り上げの場所を参考に統一させてほしい」

     「いま何月を見ているか」は題とひと続きで読む情報なので、
     離して置くと題を読んでから視線を下げてもう一度読むことになります。 */
.datenav {
  display: flex;
  align-items: center;
  gap: var(--sp-3);

  /* ★ 帯は縮めない・折らない（2026-09-18）。
       前月・入力欄・翌月の 3 つで<b>ひとつの操作</b>なので、
       割れると「前月 / 入力欄」「翌月」のように意味が切れます。

       題の行の中に入ったことで、狭い画面では周りから押されるように
       なりました。iPad 幅の仕入れ・経費で実際に 2 段（346×102）に
       割れていたのを、これで止めます。
       入りきらないときは .page-head 側が行を増やします。 */
  flex-shrink: 0;
  flex-wrap: nowrap;
}
.datenav .input { width: auto; min-width: 11rem; max-width: 14rem; }

/* ★ 前月・翌月は緑の枠にする（2026-09-22・設計に寄せる）。
     設計（帯／月 1036:10977 ほか）の枠は #0e9721、文字は #0b7a1a。
     実装は白ボタンの既定（灰の枠・黒い文字）のままで、
     売上・注文履歴・税理士 5 枚の 7 画面で同じ差が出ていました。

   ★ ここは<b>緑にするのが正しい</b>数少ない場所です。
     「緑は押せるものだけ」の決まりのとおり、これは押すものです。
     逆に押せない帯（.alert--warn）からは緑を外しました（下の 1281 行あたり）。 */
.theme-desk .datenav .btn { --btn-bd: #0e9721; --btn-fg: var(--action); }

/* ★ iPad 幅では入力欄を少し詰める（2026-09-18）。
     帯を題の行へ入れた結果、いちばん混む画面（仕入れ・経費）が
     1024px で 13px だけ足りず、レシートを登録が 2 行目へ落ちていました。

       題 171 ＋ 帯 355 ＋ 税率マスタ 128 ＋ レシートを登録 159
       ＋ 間隔 16×4 ＝ 877 ／ 使える幅 864

     11rem（176px）は「2026年09月」とカレンダーの絵が切れないための下限で、
     2026-09-17 に店主の指摘で入れた値です。実測では 9.5rem（152px）でも
     切れないので、狭いときだけそこまで詰めます。
     字は 16px のまま（iOS が 16px 未満の入力欄で画面を拡大するため）。 */
@media (max-width: 1100px) {
  .datenav .input { min-width: 9.5rem; }

  /* ★ 題の行の部品の間隔も一段詰める（2026-09-18）。
       上下 16→12、左右 40→24 と同じ一段下げの続きです。
       いちばん混む仕入れ・経費が、16px のままだと 7px 足りずに
       ボタンが次の行へ落ちていました（「＋」を足したぶん）。 */
  .page-head { gap: 12px; }
  .page-head__actions { gap: 12px; }
}

/* ★ 題の行が帯を持つときは縦中央でそろえる。
     .section-title の既定は align-items: baseline です。文字どうしを
     並べるには正しいのですが、高さ 50px の入力欄が入ると
     文字の下端に合わせようとして帯が沈みます。
     .page-head はもともと center なので、こちらだけ上書きします。 */
.section-title:has(.datenav) { align-items: center; }

/* ★ 「この日を表示 / この月を表示」は既定で隠します（2026-09-18・店主の判断）。
     datenav.js が、カレンダーで選んだ瞬間に送信するので押す必要がありません。
     消さずに隠すのは、JavaScript が動かない環境ではこのボタンが
     唯一の送信手段だからです。そのときは各レイアウトの <head> にある
     <noscript> が display を戻して、今までどおり押せる形に復帰します。 */
.datenav__go { display: none; }

.page-head--bare { padding: 0; }

/* 3 つの数字 */
.statrow { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.statcard {
  display: flex;
  flex-direction: column;
  gap: 8px;
  /* 上下 19px は設計の 20px から枠の 1px を返したもの。
     Figma の枠は面の内側にあり 128px に含まれるが、CSS の border は外に足される */
  padding: 19px 20px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 10px;
}
/* 行送りを明示するのは、既定のままだと文字の行間で高さが決まり、
   設計の 128px（17 + 38 + 17 ＋ 余白 40 ＋ 間隔 16）に収まらないため */
.statcard__label { font-size: 14px; line-height: 17px; color: var(--text-muted); margin: 0; }
.statcard__value { font-size: 32px; line-height: 38px; font-weight: 700; font-family: var(--font-num); margin: 0; }
.statcard__delta { display: flex; align-items: baseline; gap: 6px; margin: 0; font-size: 14px; line-height: 17px; font-weight: 700; }
.statcard__delta .is-up   { color: var(--ok); }
.statcard__delta .is-down { color: var(--danger); }
.statcard__note { font-size: 13px; font-weight: 400; color: var(--text-muted); }
/* 値に添える単位（「3 卓」「6 件」）。設計 01 ダッシュボード（15:319）。
   数字と同じ大きさで書くと 3 卓が 34 に見間違う */
.statcard__unit { font-size: 14px; font-weight: 400; color: var(--text-muted); margin-left: 4px; }

/* 背の高いほう（仕入れ・経費）。設計は 357x202・余白 40/24・間隔 16・角 6。
   売上の 128px 版と分けているのは、置かれる数が違うから。
   あちらは 3 枚を推移グラフの上に敷くので低く、
   こちらは画面の主役が数字そのものなので大きく取る。 */
.statcard--tall {
  gap: 16px;
  /* 上下 39px は設計の 40px から枠の 1px を返したもの（枠は面の内側にある）。
     中身は 30 + 16 + 38 + 16 + 22 = 122、枠込みで 202px になる */
  padding: 39px 24px;
  border-radius: 6px;
}
.statcard--tall .statcard__label { font-size: 20px; line-height: 30px; font-weight: 700; }
.statcard--tall .statcard__value { font-size: 32px; line-height: 38px; font-weight: 900; }
.statcard--tall .statcard__note  { font-size: 14px; line-height: 22px; margin: 0; }
/* 3 枚を並べる列。仕入れの設計は間隔 24（売上の 20 より広い）。
   カードが大きいぶん、間も広く取らないと 3 枚が 1 つの塊に見える */
.statrow--wide { gap: 24px; }

/* 白いパネル */
.panel {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 20px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 10px;
}
.panel__head { display: flex; align-items: baseline; gap: 10px; }
/* h2 の既定（.theme-desk で 24px）より小さくする。
   パネルの題はページの見出しではなく「この箱の名前」なので、
   32px の「売上」と同じ強さで出ると、どこが章でどこが箱か分からなくなる */
/* .theme-desk h2（詳細度 0,1,1）が 24px を持つので、こちらも 0,1,1 まで上げる */
/* 節の見出しは Render の実測値 20px / 行間 28px（あちらは太さ 600）。
   17px だと、すぐ上のページ見出し 32px との差が開きすぎて
   「章」と「箱」のあいだの段が抜けて見えていました */
.theme-desk h2.panel__title,
.panel__title { font-size: 20px; font-weight: 700; margin: 0; line-height: 28px; }
.panel__sub { font-size: 13px; color: var(--text-muted); }
.panel__spacer { flex: 1; }

/* 期間の切り替え（1か月／3か月／6か月／1年） */
.segmented {
  display: inline-flex;
  gap: 2px;
  /* 2px は設計の 3px から枠の 1px を返したもの（数値カードと同じ理由） */
  padding: 2px 3px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
}
.segmented__item {
  padding: 6px 14px;
  border-radius: 6px;
  font-size: 13px;
  /* 16px（設計の文字の高さ）を明示。既定の行送りだと 28px に収まらない */
  line-height: 16px;
  font-weight: 400;
  color: var(--text-muted);
  text-decoration: none;
  white-space: nowrap;
}
.segmented__item:hover { background: var(--bg-elevated); }
/* ★ アクティブは草緑（2026-09-17）。

   ここは長く var(--accent) でした。--accent は :root では黒ですが
   .theme-desk がティール（--green-700）に上書きするため、
   スタッフ側のこの帯だけ旧色のまま残っていました。

   設計（ト16 売上 765:8446）では、この帯のアクティブはすでに #0b7a1a で
   変数に結ばれています。遅れていたのはコードのほうでした。 */
.segmented__item.is-active { background: var(--action); color: var(--on-action); font-weight: 700; }

/* 折れ線。座標は Java 側で計算済みなので、ここは見た目だけ。
   preserveAspectRatio="none" で横に伸ばすため、
   線幅が横方向に潰れないよう vector-effect で実寸を保つ */
/* ★ 点を SVG の中に置かないこと（2026-09-05）★
   preserveAspectRatio="none" は横だけを引き伸ばすので、
   <circle> は画面幅に応じて楕円に潰れる。
   1440px で 13×7 の楕円になっていた（vector-effect は線の太さしか守らない）。
   線と面は伸びてよい（それが折れ線の意味）が、点は形が意味なので伸ばせない。
   点だけ HTML 側に出し、% で置く。 */
.linechart__wrap { position: relative; }
.linechart { width: 100%; height: 264px; display: block; }
.linechart__grid line { stroke: var(--border); stroke-width: 1; vector-effect: non-scaling-stroke; }
.linechart__area { fill: var(--action-soft); opacity: .55; }
.linechart__line {
  fill: none;
  stroke: var(--accent);
  stroke-width: 2;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}
.linechart__dot {
  position: absolute;
  width: 9px;
  height: 9px;
  margin: -5px 0 0 -5px;      /* 中心を座標に合わせる（枠 1px を含めて 5px） */
  border-radius: 50%;
  border: 2px solid var(--accent);
  background: var(--bg-elevated);
  pointer-events: none;
}
.linechart__dot.is-last { background: var(--accent); }

/* 月のラベル。SVG の中に置くと横に引き伸ばされるので HTML で並べる。
   ★ 金額は 2026-09-07 にここから点のそば（.linechart__plabel）へ移した。
     設計 14 売上（17:1038）は金額が点に添い、軸の下は月だけ。 */
.linechart__xaxis { display: flex; padding-left: 56px; }
.linechart__xaxis > span { flex: 1; text-align: center; display: flex; flex-direction: column; gap: 2px; }
.linechart__xaxis i { font-size: 12px; font-style: normal; color: var(--text-muted); }
.linechart__xaxis > span.is-last i { color: var(--accent); font-weight: 700; }

/* 縦軸の目盛り（¥120万 など）。設計にはあるのに描いていなかった（2026-09-07）。
   罫線と同じ y 座標に % で置く。SVG の中に書くと横に引き伸ばされる */
.linechart__ylabel {
  position: absolute;
  left: 0;
  transform: translateY(-50%);
  font-size: 12px;
  color: var(--text-muted);
  font-family: var(--font-num);
  pointer-events: none;
}

/* 点に添える金額。売上（月ごと）は全点、ダッシュボード（時間帯別）はピークだけ。
   線に重なっても読めるよう、地の色で細く縁取る */
.linechart__plabel {
  position: absolute;
  transform: translate(-50%, -100%);
  margin-top: -10px;
  font-size: 12px;
  color: var(--text-muted);
  font-family: var(--font-num);
  white-space: nowrap;
  pointer-events: none;
  text-shadow: 0 1px 0 var(--bg-elevated), 0 -1px 0 var(--bg-elevated),
               1px 0 0 var(--bg-elevated), -1px 0 0 var(--bg-elevated);
}
.linechart__plabel.is-last { color: var(--accent); font-weight: 700; }

/* --------------------------------------------------------------------------
   売上の配分（設計 14 売上 290:2012。2026-09-07 に帯グラフを実装）
   --------------------------------------------------------------------------
   左＝目標と実績の帯、右＝明細（520px 固定）。
   帯の色は明細のしるし（.breakdown__chip の inline style）と揃えること。
   帯と表で同じ費目が違う色だと、対応が目で追えなくなる。
   -------------------------------------------------------------------------- */
.alloc { display: flex; gap: 32px; align-items: flex-start; }
.alloc__left { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.alloc__right { width: 520px; max-width: 100%; flex: none; }
@media (max-width: 1100px) {
  .alloc { flex-direction: column; }
  .alloc__right { width: 100%; }
}

.allocbar { display: flex; align-items: center; gap: 10px; }
.allocbar__label {
  width: 32px;
  flex: none;
  text-align: right;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-muted);
}
.allocbar__track {
  flex: 1;
  min-width: 0;
  display: flex;
  height: 24px;
  border-radius: 6px;
  overflow: hidden;   /* 両端の区画の角を丸に合わせる */
}
/* 区画の幅は flex-grow に % の値を入れて分け合う（合計 100）。
   幅を width:% で書くと枠線 1px のぶん合計が 100% を超えて折り返す */
.allocbar__seg {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  flex-basis: 0;
  border: 1px solid var(--border);
  overflow: hidden;
}
.allocbar__seg + .allocbar__seg { border-left: none; }
.allocbar__seg span { font-size: 11px; font-weight: 700; }
.allocbar__seg--f      { background: var(--action); color: #fff; }
.allocbar__seg--l      { background: var(--green-600); color: #fff; }
.allocbar__seg--util   { background: var(--action-soft); color: var(--text); }
.allocbar__seg--misc   { background: var(--surface-2); color: var(--text-muted); }
.allocbar__seg--rent   { background: var(--surface);   color: var(--text-muted); }
.allocbar__seg--rent-over { background: var(--danger); color: #fff; }
.allocbar__seg--profit { background: var(--ok); color: #fff; }

/* ことわり書き（賃貸が目標を超えた月の赤い箱） */
.allocnote {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 10px 12px;
  border-radius: 6px;
  background: var(--danger-soft);
  font-size: 12px;
}
.allocnote__main { margin: 0; font-weight: 500; color: var(--danger); }
.allocnote__sub  { margin: 0; color: var(--text-muted); }

/* 明細の寸法（設計 290:2048。ふつうの .table より詰める） */
.breakdown__chip {
  display: inline-block;
  width: 10px; height: 10px;
  border-radius: 2px;
  margin-right: 8px;
  vertical-align: 0;
  border: 1px solid var(--border);
}
.theme-desk .table--breakdown th { padding: 0 0 2px 8px; font-size: 12px; height: auto; }
.theme-desk .table--breakdown td { padding: 8px 0 8px 8px; font-size: 13px; }
.theme-desk .table--breakdown th:first-child,
.theme-desk .table--breakdown td:first-child { padding-left: 0; font-size: 14px; font-weight: 500; }
.theme-desk .table--breakdown td.bold { font-size: 15px; }
.theme-desk .table--breakdown td:last-child { font-size: 12px; }

/* --------------------------------------------------------------------------
   棚卸し・廃棄を記録するページ（設計 現05 443:2940。2026-09-07）
   --------------------------------------------------------------------------
   共通の .card / .grid より一段詰めた寸法。ここだけに効かせるため
   .recpage-head / .recgrid で絞る（.card__head を直接いじると全カードが動く）。
   ★ 入力欄の文字は設計 15px だが 16px のまま（CLAUDE.md：16 未満にしない）。
   -------------------------------------------------------------------------- */
.recpage-head {
  display: flex;
  align-items: baseline;
  gap: 16px;
  padding: 16px 40px;
  overflow: hidden;           /* 注記が長いときに折らずに切る（設計はノーラップ） */
}
.recpage-head h1 { margin: 0; font-size: 32px; line-height: 1.6; font-weight: 700; }
.recpage-head__sub { font-size: 14px; color: var(--text-muted); white-space: nowrap; }

/* .theme-desk .grid { gap:24px }（30 節）に勝つため、こちらも 2 段で書く */
.theme-desk .recgrid { gap: 16px; }
.recgrid .card { border-radius: 6px; }
.recgrid .card__head {
  padding: 14px 20px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.6;
}
.recgrid .card__body { display: flex; flex-direction: column; gap: 16px; padding: 20px; }
.recgrid .card__body > * { margin: 0; }   /* 縦の間隔は gap に一本化。margin と二重にしない */
.recgrid .grid--2 { gap: 16px; }
.recgrid .grid--3 { gap: 12px; }
.recgrid .label { font-size: 13px; margin-bottom: 6px; }
.recgrid .input, .recgrid .select { border-radius: 4px; padding-left: 14px; padding-right: 14px; }
.recgrid .help { font-size: 12px; }
.recgrid .btn { align-self: flex-start; }   /* 角丸は .btn の 8px を継ぐ（2026-09-20） */

/* --------------------------------------------------------------------------
   ホール・会計ボード（設計 現02 437:2305。2026-09-07）
   --------------------------------------------------------------------------
   立って一瞬見る画面なので、共通のスタッフ画面より 1 段小さく組む。
   数字（卓数・金額）だけを大きく残し、ラベルと注記を落として、
   1 画面に入る卓の数を増やすのが狙い。

   ★ .theme-desk は /hall にも付いている（layout/staff.html の body は
     class="theme-snow theme-desk" 固定）。「厨房・ホールには付かない」は
     誤りなので、ここの指定は .theme-desk の値を上書きする形で書く。
   -------------------------------------------------------------------------- */
/* 本文の縦余白 64→32（設計どおり）。共通の変数は触らず、この画面だけ絞る */
/* ★ ここにあった :has(.hallboard) { --main-pad-y: 32px } は 2026-09-13 に外しました。
     基準が 32px になったので二重定義です（30 節）。 */

.hallboard .section-title { margin: 40px 0 24px; }
.hallboard .section-title:has(h1) { margin-top: 0; }
/* ページ見出しの帯は左右 40px の内側余白を持つ。
   ★ 数字カードと盤面は左右 0 のまま。見出しだけ一段内側に入るのが設計の形で、
     食材・在庫（.stockpage .inv-ingredients）と品切れ・残数（.soldout-head）も同じです。

   ★ 上下は 16px（2026-09-18・店主の指示「全体に合わせて欲しい」）。

     ここは長く 20px でした。設計（現02 ホール・会計 542:3710）が 20/40・帯 88px で、
     「立って見る画面だけ帯を厚くする」という判断が入っていたためです。
     2026-09-13 に 16px へ下げて、一度 20px に戻した経緯もあります。

     その結果、この画面だけ題が 4px 下にありました。

         他の 16 画面   器 32 ＋ 行 16 ＋ 字の余り 0 ＝ 上から 48px
         ホール・会計   器 32 ＋ 行 20 ＋ 字の余り 0 ＝ 上から 52px

     店主が全画面を見くらべて「ズレて見える」と言ったのがこれです。
     4px の厚みより、どの画面でも題が同じ高さにあることを採りました。
     厚さで区別したくなったら、帯ではなく字の大きさで差を付けること。 */
.hallboard .section-title:has(h1) { padding: 16px 40px; }
/* ★ 題は 32px（2026-09-17・店主の指摘）。

   設計（ト02 725:2103）は 28px でしたが、設計側の取りこぼしと判断しました。
   すぐ上に「立って見る画面だけ帯を厚くする、という判断が入っています」と
   書いてあるのに、題だけ小さいのは筋が通りません。
   Figma の他の画面（ダッシュボード・品切れ・残数・商品・売上）は全部 32px です。 */
.hallboard h1.section-title__text { font-size: 32px; }
/* 節見出しだけ字間を開ける。.theme-snow が letter-spacing を 0 に
   落としているので、ここで開け直す（設計 438:2438 の 2px） */
.hallboard h2.section-title__text { font-size: 20px; letter-spacing: 2px; }
.hallboard .section-title__count { font-size: 12px; }
/* ★ 2026-09-18：13px の上書きをやめました（店主の指示）。
     .theme-desk の 16px にそろえます。節の補足は画面ごとに
     16 / 13 / 14px とばらついていました。 */

/* ★ 数字カード（在席・未提供・空席の 3 枚）の規則はここにありましたが、
     2026-09-14 にカードの段ごと畳みました。店主の指摘
     「3 つの情報って分けずに在卓、お会計待ち、バッシングでまとめられるよね」。
     在席はレーン見出しの「4卓 ／ 9名」へ、未提供は上の帯のチップへ、
     空席は新規お客様ボタンの脇へ。Figma は現02・ト02・トi02・トp02 を直し済み。
     戻すときは git 履歴の .hallboard .stat を参照。 */

/* 伝票カード（設計「ホール/伝票カード」453:5744）。
   見出し帯・本体・足に分かれた .card ではなく、平らな 1 枚。
   卓名から金額まで、線に区切られずに目で降りられる */
.hallboard .billcard {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 24px;
  /* ★ 白で固定する。--surface は .theme-snow で #f7f9fb（薄グレー）になっていて、
       列の面（#fcfffe など）との差が出ず、カードが浮かなかった（実測で判明）

     ★ 枠も設計の直値。var(--border) は黒 10% で、白い面の上では薄すぎる */
  background: #ffffff;
  border: 1px solid #e8e8e8;
  border-radius: 6px;
}
/* ★ 頭は「卓名 ← → 札」で両端に寄せる（設計 540:3509 の SPACE_BETWEEN）。
     札の位置が卓名の長さで動くと、列に並べたとき札の縦線が揃わない */
.hallboard .billcard__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
  /* ★ 設計（ト02「ホール/頭」）は札の有無にかかわらず 36px。
       実装は札があると 37.6px、無いと 33.6px でした。4px ちがうと
       その下の「人数／滞在」「金額」「ボタン」が全部 4px ずれ、
       レーンをまたいで段が揃いません。床を敷いてどちらも 36 にします。

     ★ padding が 0 の要素なので min-height がそのまま中身の床になります
       （padding があると box-sizing: border-box に食われる。CLAUDE.md 参照）。 */
  min-height: 36px;
}
.hallboard .billcard__table { font-size: 24px; font-weight: 700; line-height: 1.4; }
/* ★ 札は「塗りつぶし・枠なし」に統一する（2026-09-12）。
     面と枠の両方に状態色を置くと、同じことを色で二度言うことになり、
     カードが警告ボックスに見える。枠はカード共通のグレー 1 本だけにする。
     border-color をここで透明にしているのは、.badge--stop などを
     ほかの画面（商品一覧・品切れ）で使い回しているため。あちらは変えない

     寸法は設計（ホール/札）の実測値：上下 8・左右 16・角丸 999・14px 太字 */
.hallboard .billcard .badge {
  font-size: 14px;
  font-weight: 700;
  padding: 8px 16px;
  /* ★ 2026-09-20：999px（丸い薬型）→ 4px。
       部品「ホール/札」545:3602 も同じ日に角丸 4px へそろえました。
       この画面だけ丸いと、同じ札が幅を変えるたびに形が変わって見えます。
       ★ 2026-09-20 夕：4px → 8px。ボタンと札を 8px でそろえる決定に合わせました。 */
  border-radius: 8px;
  /* ★ 設計の札はちょうど 36px（上下 8 ＋ 文字 20）。
       素の .badge が border:1px solid transparent を持っているため、
       透明でも上下 2px ぶん高くなり 38px になります。この画面では枠を消します
       （枠の色を透明にするだけでは太さは残る。実測 38 → 36）。

       36px にそろえると、札のあるカードと無いカードで頭の高さが同じになり、
       下の「人数／滞在」「金額」「ボタン」が 1px もずれません。 */
  border: 0;
  line-height: 20px;
}
/* 調理中あり。.badge--rec は .theme-snow で --accent がほぼ黒になるので、
   この画面だけ設計どおりの緑（面 #ddf0ec ／ 文字 #0b7a78）に差し替える */
/* ★ 2026-09-20：「調理中あり」は押せない札なので緑をやめました
   （店主の決定「押せない掲載中などは灰色か黒で緑を使わない」）。
   設計の部品「ホール/札」も同じ日に 地 #efefef ／ 字 #444444 へ直しています。
   ★「お会計待ち」の赤（.badge--stop）は残します。あれは気づかせるための色で、
     店主が禁じたのは緑だけです。 */
.hallboard .billcard .badge--rec { background: #efefef; color: #444444; }
/* バッシングは色相を持たせない（ルーチン作業。設計 545:3601）。
   面 #eef1f4 ／ 文字は本文色。薄い文字にしないのは、静かにしたいのは
   色相であって読みやすさではないため */
.hallboard .billcard .badge--cleanup { background: #eef1f4; color: var(--text); }
/* 補足（人数・滞在・ラベル・内訳）は 14px。本文 16px の一段下 */
.hallboard .billcard__meta,
.hallboard .billcard__label {
  margin: 0;
  font-size: 14px;
  line-height: 1.4;
  color: var(--text-muted);
}
/* 金額の行。設計（ト02「Frame 2」）は 280x39・gap 25・NO_WRAP。

   ★ 2026-09-19：wrap をやめました（店主の指摘「line がズレてる」）。
     折り返すと行が 39.2px → 80px に伸び、その下のボタンだけ 42.8px 下がります。
     同じ列でも注記の長さで伸びたり伸びなかったりするので、
     カードごとにボタンの高さが変わって見えていました。実測:

       カウンター札1「テーブルチャージ ¥900 を含む」   → 収まる  39.2px
       カウンター札3「テーブルチャージ ¥1,800 を含む」 → あふれる 80px（★）

   ★ 注記は「消す」のではなく「中で折る」。金額（28px）は縮めず、
     注記だけ min-width:0 で縮ませます。12px の 2 行は 33.6px なので
     金額の 39.2px に収まり、行の高さは変わりません。
     設計の注記は金額を書いていません（「テーブルチャージ を含む」）が、
     いくら乗っているかは会計前に知りたい数字なので実装では残します。 */
.hallboard .billcard__amount {
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: nowrap;
  min-height: 39px;
}
.hallboard .billcard__yen {
  font-size: 28px;
  font-weight: 700;
  line-height: 1.4;
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}
/* ★ 内訳だけ 12px（設計どおり）。
     ほかの補足は 14px ですが、これは 28px の金額の真横に置く注記で、
     14px にすると金額と competing して、どちらを読めばいいか分からなくなります */
/* min-width:0 が無いと、flex の子は中身より小さくなれず行からあふれる */
.hallboard .billcard__note { font-size: 12px; line-height: 1.4; color: var(--text-muted); min-width: 0; }
/* ★ カードのボタンだけ 44px（設計 453:5744 ほかの実測値）。
     2026-09-12 に「Figma を正とする」とユーザーが決めたので、設計に合わせた。
     それまでは CLAUDE.md の「タップ領域は 48px 以上」を優先して 48px にしていた。

     CLAUDE.md の規約は生きている。<b>例外はこの 1 か所だけ</b>で、
     ほかの画面のボタンは今までどおり var(--tap)（48px）のまま。
     44px は Apple のガイドラインの最小値（44pt）と同じ値で、
     根拠なく小さくしたわけではない。ただし店のタブレットで押しにくいと
     感じたら、ここを消せば 48px に戻る（--tap を継ぐだけになる） */
.hallboard .billcard .btn {
  font-size: 15px;
  /* 角丸は .btn の 8px を継ぐ（2026-09-20 に直値 4px をやめた） */
}

/* --------------------------------------------------------------------------
   ホール盤面の 3 列（2026-09-12。設計 現02 542:3705）
   --------------------------------------------------------------------------
   列そのものを「卓の状態」にする。厨房ボードの .board / .lane を借りる。

   ★ 状態の色は「列の面 ＋ 見出しの上罫線 ＋ 札 ＋ ボタン」に置き、
     カードは 3 列とも白＋共通のグレー枠で固定する。
     カードの面まで状態色にすると、同じことを色で二度言うことになる。

   ★ 強さは重要度の順：在卓（緑）＞ お会計待ち（赤）＞ バッシング（無彩色）。
     いちばん手が伸びる列を左に、色を持たないルーチンを右に置く。
   -------------------------------------------------------------------------- */
/* 見出しの右端に置く操作ボタン（設計 現02 の「＋ 新規お客様」）。
   .section-title は baseline 揃えなので、ボタンだけ中央に戻す。

   ★ margin-left: auto で右端まで押し出す（2026-09-12 に追加）。
     設計（542:3710）は 題 → 説明 → <b>余白 555px</b> → ボタン の並びで、
     その「余白」がボタンを右端へ送っています。
     これを入れるまでは説明文のすぐ右に貼り付いていました。
     .theme-snow が .section-title::after（右へ抜ける罫線＝すきま役）を
     display:none にしているので、罫線には頼れません。 */
.hallboard .section-title { align-items: center; }
.hallboard .section-title__action {
  align-self: center;
  margin-left: auto;
  white-space: nowrap;
}

/* ★ 列は 360px 固定。画面幅いっぱいに伸ばさない（2026-09-12。設計 現02）。
     厨房ボードの .board は repeat(3, 1fr) で画面を埋める作りですが、
     ホールのカードは 360px で設計されていて、引き伸ばすと
     卓名と金額の間が間延びし、1 行に入る情報量も変わりません。

     設計の本文は 1120px（360×3 ＋ 間 16×2）。左寄せにして、
     余った幅は空けたままにします。ダッシュボードと違い、
     ここは「埋めるべき幅」ではなく「読む単位」なので。 */
/* ★ .theme-desk 側の指定に負けるので、同じ強さで書く（2026-09-12）。
     .hallboard .board だけだと grid-template-columns が上書きされず、
     実機で 956px × 3 に引き伸ばされていた（実測で判明） */
/* ★ 数字カードとのあいだは 56px（2026-09-12 に 0 → 56 へ）。
     設計（現02 ホール・会計 542:3705）の本文は縦並びで gap 24 ですが、
     「いまの状況」と「伝票の列」のあいだにだけ、高さ 8px の白い矩形が
     1 枚挟んであります。そこだけ広く見せるために置かれたもので、
     実際のあきは 24 ＋ 8 ＋ 24 ＝ 56px になります。

     gap の 24 だけを読んで実装していたため、ここは長らく 0px でした
     （.grid--3 にも .board にも margin を書いた定義が 1 本も無く、
     数字カードの下辺と在卓レーンの上辺が密着していた）。
     見えていた隙間は .stat の枠線と .lane__head の内側余白だけです。 */
/* ★ max-width: 1120px はここにありましたが、2026-09-13 に外しました。
     35 節で列を repeat(3, minmax(0, 1fr)) に変えても、ここで幅が
     1120px に止められていると 1 ミリも伸びません（理由は 35-5）。
     列の指定そのものも 35-2 が後ろで持つので、ここでは書きません。 */
/* ★ margin-top はもう無い（2026-09-14）。
     56px（数字カードと盤面のあいだの、8px の白い矩形ぶんの広いあき）
     → 41 節の gap 24 ＋ 32px → 数字カードの段そのものを畳んだので 0。
     いまは見出しの帯から gap 24 だけで盤面が始まります（Figma 現02 も同じ）。 */
.theme-desk .hallboard .board,
.hallboard .board {
  justify-content: start;
  gap: 16px;
}
/* ★ 数字カードの .grid--3 をそろえる 1 本はここにありましたが、
     2026-09-14 にカードの段ごと畳んだので消しました（4189 行の注記と同じ話）。 */
/* ★ ここにあった @media (max-width: 1240px) の auto-fit は
     2026-09-12 に外しました（35 節へ移動）。閾値が間違っていたためです。

     測っていたのはビューポート幅ですが、制約がかかるのは .board の
     コンテナ幅で、そこはサイドバー 264 ＋ 本文余白 48 のぶん 312px 狭い。
     固定 3×360 ＋ 間 16×2 ＝ 1112px を置くには 1424px 必要だったので、
     1241〜1423px の 183px ぶんの帯で盤面が本文をはみ出していました。

     加えて auto-fit 側も 3 列にはなりませんでした。有効なのは 1240px 以下で、
     そこでのコンテナ幅は最大 928px。3 列に要る 992px に届かないので、
     固定 3 列から<b>いきなり 2 列に飛んでいました</b>。
     閾値を直すのではなく、35 節で「常に 3 列・足りなければ縮む」に変えています。 */

.hallboard .lane { border: 0; border-radius: 0; overflow: visible; }
.hallboard .lane--seated  { background: #fcfffe; }
.hallboard .lane--closing { background: #fffbfb; }
.hallboard .lane--cleanup { background: #ffffff; }

/* 見出しは上下 16・左右 16、題は 16px 太字。
   上罫線だけ状態色にして、下は共通のグレーで本体と区切る */
.hallboard .lane__head {
  padding: 16px;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0;
  color: var(--text);
  background: transparent;
  /* 設計の直値。var(--border) は黒 10% で、白い面の上では見えない */
  border-bottom: 1px solid #e8e8e8;
}
.hallboard .lane--seated  .lane__head { border-top: 2px solid #0e9794; }
.hallboard .lane--closing .lane__head { border-top: 2px solid #d33f3f; }
.hallboard .lane--cleanup .lane__head { border-top: 2px solid #e8e8e8; }

/* 件数は丸い錠剤。設計は上下 1・左右 9・角丸 999・面 #eef1f4 */
/* 件数のピル。数字カードの段を畳んだ（2026-09-14・HallStatMergeTest）ので、
   ここが「在卓 4卓 ／ 9名」の唯一の置き場になった。
   旧カードの数字は 28px——畳んだとき「遠くから読める大きさ」まで捨てていて、
   店主から「読みにくい。重要な情報だし」。

   ★ 大きさは 2 回上げた。最初は数字 18px／単位 14px（太さと濃さだけ）で、
     「余白だけ大きくなって文字そのまま」。ピルの器だけ数字につられて育ち、
     文字が大きくなった感じがしなかった。単位ごと 16px へ、数字は 20px へ。

   ★ 灰色のピル（#eef1f4・角丸 999px）もやめた（店主「背景の灰色は色なしに」）。
     灰色の面があると数字が「部品の中の飾り」に見えて沈む。数字は裸で置く。
     共通の .lane__head .count（8 節）のピルは他画面が使うので剥がさない */
/* ★ background: none は「行を消す」ではだめで、明示が要る。
     共通の .lane__head .count（8 節）がピル（--surface-2・角丸・padding）を
     持っているので、ここで宣言しないと基礎のピルが透けて戻ってくる */
.hallboard .lane__head .count {
  margin-left: auto;
  padding: 0;
  border-radius: 0;
  background: none;
  color: #828282;
  font-size: 16px;
  font-weight: 400;
}
.hallboard .lane__head .count b { font-size: 20px; font-weight: 700; color: #1c1c1c; }

/* 空席（見出しの帯・新規お客様ボタンの左）も同じ扱い。
   .section-title__count の 12px のままでは読み流されるので一段上げる */
.hallboard .spacer + .section-title__count { font-size: 16px; color: #828282; }
.hallboard .spacer + .section-title__count b { font-size: 20px; font-weight: 700; color: #1c1c1c; }

/* バッシングカードの席数（説明文の代わり・2026-09-14）。
   「2名待ってるからこの 4名席 を先に片付けるか」を選ぶための数字なので、
   レーン見出し・空席と同じ 20px。カードの土台（.billcard__meta 14px）より
   単位も一段上げるので、席数の行だけ 16px を別に指定する */
.hallboard .billcard--cleanup .billcard__meta { font-size: 16px; }
.hallboard .billcard--cleanup .billcard__meta b { font-size: 20px; font-weight: 700; color: #1c1c1c; }

/* 中身は上下 24・左右 16、カード間 24（設計 ト02「Frame 11」pad 24/16/24/16）。

   ★ 2026-09-19：左右を 24 から 16 へ戻しました（店主の指摘「line がズレてる」）。
     8px×2 を余分に食っていたせいでカードが 15.3px 細くなり、
     卓名の横に札が入らず 2 行目に落ちていました。落ちると
     その下の行が全部 45.6px 下がるので、金額とボタンの段が
     レーンをまたいで揃わなくなります。実測:

       設計   列 360 → 本文 328（左右 16）→ 頭 280   卓名 135 + 8 + 札 102 = 245（あまり 35）
       実装   列 363 → 本文 315（左右 24）→ 頭 265   卓名 158 + 8 + 札 108 = 274（★ -9.3）

     卓名が長いのも一因（設計の見本は「カウンター2」6 文字、実物は
     「カウンター札1」7 文字）。ただし設計どおりの幅に戻せば 7 文字でも収まります。 */
.hallboard .lane__body { padding: 24px 16px; gap: 24px; }
.hallboard .lane__empty { padding: 24px 0; }

/* ボタンは既存の --btn-* の仕組みに乗せる（.btn の形は変えない）。
   在卓 #0b7a78 ／ お会計待ち #d85555 ／ バッシングは枠線だけ。

   ★ 塗ってあるのが「その列でやること」。バッシングだけ枠線なのは、
     隣の在卓と同じ緑の塗りだと押し間違えるため（実機で並べて確認済み） */
.hallboard .billcard__action {
  --btn-bg: var(--action);
  --btn-fg: #fff;
  --btn-bd: var(--action);
}
/* ★ 会計を締めると売上が確定し、取り消しには別操作とログが要る。
     「押せる＝草緑」の中で、ここだけ赤にして一段違えておく */
.hallboard .billcard--closing .billcard__action {
  --btn-bg: var(--action-danger);
  --btn-bd: var(--action-danger);
}
.hallboard .billcard--cleanup .billcard__action {
  --btn-bg: #ffffff;
  --btn-fg: var(--text);
  --btn-bd: #d1d1d1;
}

/* ==========================================================================
   ホールのモーダル（2026-09-12。設計 ホール/モーダル・* ）
   --------------------------------------------------------------------------
   ご案内（人数→卓）とお会計（注文の確認→お会計）の 4 画面で共通の器。

   ★ 幅 520・内側の余白 24 均等・段の間 20 で全部そろえる。
     .card__body（24 均等）と同じ扱い。帯として分けていないので上下も詰めない。

   ★ 文字の使い分けは盤面と同じ：本文 16 ／ 操作 15 ／ 補足 14。
   ========================================================================== */
.hallmodal {
  width: 520px;
  max-width: calc(100vw - 32px);
  max-height: calc(100dvh - 48px);
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 6px;
  /* 地は白（設計 ト02b〜02e の「ホール/モーダル」は #ffffff）。
     var(--surface) は .theme-snow で #f7f9fb の薄い青グレーで、
     暗幕越しに見ると沈んで見えた（2026-09-14 に店主の指摘で直した）。
     白の変数は --bg-elevated。名前のとおり「浮いている面」に使うもの */
  background: var(--bg-elevated);
  box-shadow: 0 8px 24px rgba(0, 0, 0, .12);
  color: var(--text);
}
/* 後ろを暗くしてぼかす。ぼかしを入れるのは、盤面の色（赤い列・緑のボタン）が
   暗幕越しに透けて、モーダルの中身と competing するため */
.hallmodal::backdrop {
  background: rgba(28, 28, 28, .4);
  backdrop-filter: blur(3px);
}
/* ★ 2026-09-18：設計（ト02c 725:2910 ほか）に合わせました（店主の指摘
     「枠幅とか枠の色とか…も違うし」）。上下 40・左右 24、枠 #e3e3e3 1px。
     実測では上下も 24px で、枠は 1 本も引かれていませんでした。 */
.hallmodal__box {
  display: flex;
  flex-direction: column;
  /* ★ 設計（ト02c/d/e）は 32px（2026-09-18・店主の指摘）。
       20px だと、この箱は縦積みなので<b>中の段という段が 12px ずつ狭く</b>なります。
       店主が気づいたのは「どちらか選ばないと締められません」と
       ボタンの間でしたが、原因は 1 か所ではなくここでした。 */
  gap: 32px;
  padding: 40px 24px;
  border: 1px solid #e3e3e3;
}
/* ★ 段を積んでいるのは箱ではなくこちら（2026-09-18）。
     箱（.hallmodal__box）の gap を 32px にしても中身は動きませんでした。
     箱が積んでいるのは「面」で、面の中の段を積むのがここです。
     実測して気づきました。設計（ト02c/d/e）は 32px。 */
.hallmodal__pane { display: flex; flex-direction: column; gap: 32px; }
.hallmodal__pane[hidden] { display: none; }

.hallmodal__head {
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
}
.hallmodal__title { margin: 0; font-size: 20px; font-weight: 700; line-height: 1.4; }
/* 卓を選ぶ画面の題だけ 24px（設計 ト02c 725:2910）。
   あちらは題が人数（4 名様）で、この画面のいちばん大きい文字になります。 */
.hallmodal__title--lg { font-size: 24px; }
.hallmodal__sup { font-size: 14px; color: var(--text-muted); }
.hallmodal__close {
  margin-left: auto;
  min-width: var(--tap);
  min-height: var(--tap);
  padding: 0;
  border: 0;
  background: none;
  color: var(--text-muted);
  font: inherit;
  font-size: 16px;
  cursor: pointer;
}
.hallmodal__close:hover { color: var(--text); }

.hallmodal__field { display: flex; flex-direction: column; gap: 8px; }
.hallmodal__label { font-size: 14px; color: var(--text-muted); }
.hallmodal__hint  { font-size: 14px; color: var(--text-muted); white-space: nowrap; }
.hallmodal__note  { margin: 0; font-size: 14px; color: var(--text-muted); }
.hallmodal__empty { padding: 24px 0; text-align: center; color: var(--text-faint); }
.hallmodal__row { display: flex; align-items: center; gap: 8px; }
.hallmodal__row--label { justify-content: space-between; }

/* 足元。副ボタン 1 ： 主ボタン 3。押す回数が多いほうを広く取る */
.hallmodal__foot { display: flex; gap: 12px; }
/* 設計（ト02c/d/e）の副ボタンは枠 #d1d1d1。共通の .btn は --border-strong が
   効いて #c7c7c7 になっていました（2026-09-18 の実測）。 */
/* ★ 戻る・やめるは 115px で固定（設計 ト02c/d/e・2026-09-18）。
     両方を伸ばすと、内容の長さでボタンの幅が決まってしまいます
     （「← 戻る」と「お会計（伝票を締める）」で 139 / 317 になっていました）。
     115 ＋ 12（gap）＋ 345 ＝ 472 で、箱の中身の幅とぴったり合います。
     枠の #d1d1d1 も設計の値（共通の .btn は --border-strong で #c7c7c7）。 */
/* 角丸は .btn の 8px を継ぎます（2026-09-20 に直値 4px をやめた） */
.hallmodal__sub  { flex: 0 0 115px; min-height: 48px; font-size: 15px;
                   border-color: #d1d1d1; }
/* ★ セレクタを .hallmodal から書くこと（2026-09-17・店主の指摘で判明）。

   .hallmodal__main だけ（0,1,0）だと、3401 行の .theme-desk .btn（0,2,0）に
   負けて --btn-bg だけ #ffffff に戻されます。--btn-fg: #fff は誰も上書きしないので、
   結果は「白地に白文字」＝文字が消えたボタンになります。

   実際にそうなっていました。「次へ」「ご案内する」が空のボタンに見えて、
   店主は押せると思わず別の操作で進んでいました。営業中に使う画面なので、
   これはいちばん痛い種類の不具合です。

   .btn--primary / .btn--ok は 3573 行の .theme-desk .btn--primary が
   (0,2,0) で救済しています。ここはその救済から漏れていました。 */
.hallmodal .hallmodal__main {
  /* ★ 残りを埋める（2026-09-18）。副ボタンが 115px 固定になったので、
       割合（3 1 0）ではなく「残り全部」でよくなりました。
       115 ＋ 12（gap）＋ 345 ＝ 472。設計の幅と一致します。 */
  flex: 1;
  min-height: 48px;
  font-size: 15px;
  /* 角丸は .btn の 8px を継ぎます（2026-09-20 に直値 4px をやめた） */
  --btn-bg: var(--action);
  --btn-fg: #fff;
  --btn-bd: var(--action);
}
/* ★ 会計を締めるボタンだけ赤。押したら売上が確定して戻しにくい。
     確認ダイアログでも止めているが、色でも一段違えておく */
.hallmodal .hallmodal__main--danger {
  --btn-bg: var(--action-danger);
  --btn-bd: var(--action-danger);
}

/* 見出しの右の「＋ 新規お客様」も押せるものなので同じ緑 */
.hallboard .section-title__action {
  --btn-bg: var(--action);
  --btn-fg: #fff;
  --btn-bd: var(--action);
}

/* ご請求額の帯（注文の確認の足元） */
.hallmodal__total {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px;
  border-radius: 6px;
  background: #f7f9fb;
  font-size: 16px;
  font-weight: 700;
}
.hallmodal__total b { font-size: 28px; font-variant-numeric: tabular-nums; }

/* --- 進み具合（2 段） --------------------------------------------------- */
.steps2 { display: flex; align-items: center; gap: 12px; padding-bottom: 8px; }
.steps2__item { display: inline-flex; align-items: center; gap: 8px; }
.steps2__dot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 999px;
  border: 1px solid #d1d1d1;
  background: var(--surface);
  color: var(--text-muted);
  font-size: 14px;
  font-weight: 700;
}
.steps2__label { font-size: 16px; color: var(--text-muted); }
/* 済み・現在は緑の丸。現在だけ文字を濃い太字にして「いまここ」を示す */
.steps2__item.is-done .steps2__dot,
.steps2__item.is-current .steps2__dot {
  background: var(--action);
  border-color: var(--action);
  color: #fff;
}
.steps2__item.is-current .steps2__label { color: var(--text); font-weight: 700; }
.steps2__link { flex: 1 1 auto; height: 1px; background: var(--border); }
.steps2__link.is-done { background: var(--action); }

/* --- 高さを決めて中だけ動かす枠 ---------------------------------------- */
/* 卓や注文が増えてもモーダルの高さが変わらないようにする。
   スクロールするのに窓が小さいと「どれくらいあるか」が分からないので、
   卓は 6 行＋半分、注文は 9 行ぶんが見える高さにしてある */
.scrollbox {
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: #a5a5a5 #e8e8e8;
}
.scrollbox::-webkit-scrollbar { width: 8px; }
.scrollbox::-webkit-scrollbar-track { background: #e8e8e8; border-radius: 999px; }
.scrollbox::-webkit-scrollbar-thumb { background: #a5a5a5; border-radius: 999px; }
.scrollbox--seat  { display: flex; flex-direction: column; gap: 8px; max-height: 438px; padding-right: 6px; }
.scrollbox--lines {
  max-height: 420px;
  padding: 0 14px 0 14px;
  border: 1px solid var(--border);
  border-radius: 6px;
}

/* --- 人数のチップ ------------------------------------------------------- */
.chiprow { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 108px;
  min-height: 50px;
  padding: 16px 24px;
  border: 1px solid #d1d1d1;
  border-radius: 4px;
  background: var(--surface);
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
}
/* ラジオ本体は隠す。枠ごと押せるほうが指で確実 */
.chip input { position: absolute; opacity: 0; width: 0; height: 0; }
.chip:has(input:checked) {
  background: var(--action);
  border-color: var(--action);
  color: #fff;
}
.chip:has(input:focus-visible) { outline: 2px solid var(--action); outline-offset: 2px; }

/* --- 卓の行 ------------------------------------------------------------- */
.seatrow {
  display: flex;
  align-items: center;
  gap: 12px;
  /* ★ 最低 60px。札の有無で高さが変わると、並べたとき行がガタつく */
  min-height: 60px;
  padding: 12px 16px;
  /* ★ 2026-09-18：設計は 地 #ffffff・枠 #e8e8e8（店主の指摘「枠の色」）。
       var(--border) は .theme-desk で文字色に寄っていて、
       実測では #1c1c1c の黒い枠になっていました。地も #f7f9fb で灰色がかっていました。 */
  border: 1px solid #e8e8e8;
  border-radius: 6px;
  background: #ffffff;
  cursor: pointer;
}
.seatrow input { width: 18px; height: 18px; accent-color: var(--action); flex: 0 0 auto; }
.seatrow__name  { font-size: 16px; font-weight: 700; }
.seatrow__gap   { flex: 1 1 auto; }
.seatrow__seats { font-size: 14px; color: var(--text-muted); white-space: nowrap; }
.seatrow:has(input:checked) { background: var(--action-soft); border-color: var(--action); }

/* --- 注文の明細 --------------------------------------------------------- */
.lineitem { padding: 12px 0; }
.lineitem + .lineitem { border-top: 1px solid var(--border); }
.lineitem__row { display: flex; align-items: center; gap: 8px; }
.lineitem__name  { font-size: 16px; }
.lineitem__qty   { font-size: 16px; color: var(--text-muted); white-space: nowrap; }
.lineitem__gap   { flex: 1 1 auto; }
.lineitem__price { font-size: 16px; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.lineitem__opt   { margin: 2px 0 0; font-size: 14px; color: var(--text-muted); }

/* --- お客さまの見学入口（設計 暗31 1597:16742）-------------------------
   Figma の全ノードを測って写しています。目測していません。

     画面        390x844・地 #141414・左右 pad 24・上下中央
     中央ブロック 幅 342・段の間 24・中央寄せ
     ロゴ        72x72 の円（images/logo.jpg・白地のまま）
     店名        24px 明朝 600・行高 140%・字間 12%・#ffffff
     役割        13px・行高 160%・#9e9e9e
     カード      #232323・r8・pad 24・段の間 20
       題        20px Bold・行高 140%・#ffffff
       説明      14px・行高 160%・#9e9e9e
       ボタン    高さ 56・r8・地 #dd9a4e・字 16 Bold #141414
       補足      12px・行高 160%・#7a7a7a
     リンク      13px・#dd9a4e

   ★ 店名が明朝なのは実装（.app-header__title）に合わせたものです。
     --font-serif・font-weight 600・letter-spacing .12em。
     ここをゴシックにすると、ヘッダーの店名と別物に見えます。

   ★ 上下中央は margin:auto で取ること。
     justify-content: center だと、画面が低い端末で中身がはみ出したときに
     <b>上が切れて二度と読めなくなります</b>（スクロールでも戻れない）。
     margin:auto なら、入るときは中央・はみ出すときは素直に流れます。 */
.theme-night .demogate {
  display: flex;
  min-height: 100dvh;
  padding: 24px;
}
.theme-night .demogate__inner {
  margin: auto;            /* 上下中央。切れない中央寄せはこれ */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  width: 100%;
  max-width: 342px;
}

.theme-night .demogate__brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-align: center;
}
/* 白地はそのまま残す。暗い地の上で紋として立たせるため（.brand-logo と同じ扱い） */
.theme-night .demogate__logo {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  object-fit: cover;
  background: #fff;
}
.theme-night .demogate__name {
  margin: 0;
  /* ★ --font-serif は .theme-night がゴシックに潰すので使わない。
       ロゴと同じ明朝を出すのは --font-brand のほう。 */
  font-family: var(--font-brand);
  font-size: 24px;
  font-weight: 600;
  letter-spacing: .12em;
  line-height: 1.4;
  color: var(--text);
}
.theme-night .demogate__role {
  margin: 0;
  font-size: 13px;
  line-height: 1.6;
  color: var(--text-muted);
}

.theme-night .demogate__card {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 24px;
  border-radius: 8px;
  background: var(--surface);
}
.theme-night .demogate__title {
  margin: 0;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.4;
  color: var(--text);
}
.theme-night .demogate__lead {
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-muted);
}
/* 唯一の押せるもの。きつね色はここと下のリンクだけに使う。

   ★ width: 100% を外さないこと。
     .btn は inline-flex なので、<button> は<b>中身の幅まで縮みます</b>。
     リンク（<a>）だったときは気づきませんでしたが、
     伝票を開く操作になった＝フォームにした時点で 294px → 166.5px に縮みました。
     設計は 294（カードの内側いっぱい）。見た目では「少し小さいかな」程度にしか
     見えないので、実測しないと分かりません。 */
.theme-night .demogate__go {
  --btn-bg: var(--accent);
  --btn-bd: var(--accent);
  --btn-fg: var(--on-accent);
  width: 100%;
  min-height: 56px;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 700;
}
.theme-night .demogate__note {
  margin: 0;
  font-size: 12px;
  line-height: 1.6;
  color: var(--text-faint);
}
.theme-night .demogate__link {
  font-size: 13px;
  line-height: 1.6;
  color: var(--accent);
}

/* --- お客さまの入口（設計 暗00 卓の QR を読んだ直後 91:3739）---------
   全 36 ノードを Figma から取り出して写しています。目測はしていません。

     本文        VERTICAL pad 32/16/0/16・gap 24（段の間は 6 か所すべて 24）
     題          24px Bold #ffffff・行高 140%・<b>丸は無し</b>
     ご案内      #232323・r8・pad 24/16・gap 8
                   1 行目 16px Regular #ffffff
                   2 行目 14px Regular #9e9e9e
     来店人数    14px Regular #9e9e9e
     人数ボタン  76x52・r8・16px Bold・4 列・gap 12（行間も 12）
                   選択中   地 #dd9a4e / 字 #141414・枠なし
                   未選択   地 #232323 / 字 #ffffff・枠 1px #333333
     9 名以上    入力欄 220x52（地 #232323・枠 1px #333333）＋ 決定 110x52・gap 12
                   決定は<b>枠なし</b>（地 #232323・16px Bold #ffffff）
     注意書き    #232323・左 4px #dd9a4e・pad 32/24・16px #ffffff

   ★ 色が付くのは「選んだ人数」と「注意書きの帯」だけ。どちらもきつね色。
     お客さま側のアクセントはこの 1 色なので、ここに他の色を足さないこと。

   ★ ここは .startpage で囲ってあり、共通部品そのものは変えていません。
     .section-title の丸・.label の 13px・.card の pad 16 は、伝票・カート・
     メニューを含む 24 画面が使っている値です。この画面の設計に合わせて
     共通側を動かすと、丸つきの節見出し（暗04「お席の伝票」＝16px＋丸 10px）が
     いっしょに崩れます。実際 Figma 側でも、題（24px・丸なし）と
     節見出し（16px・丸あり）は別の部品として作り分けられています。 */

/* 段組みそのもの。mt-4 / mt-6 をやめて、設計と同じ gap 24 の 1 本にする */
.theme-night .startpage .container {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding-top: 32px;
}
/* 段ごとに振ってあった上下の余白を無効にする（gap と二重になるため）。
   .mt-6 は (0,1,0) なので、この (0,3,0) が素直に勝つ */
.theme-night .startpage .container > * { margin-top: 0; margin-bottom: 0; }

/* ★ 空の入れ物が段を 1 つ食うのを防ぐ。
     fragments/common の flash は、出すものが無くても <div class="stack-sm"> を
     必ず 1 つ残します。flex + gap では、中身が空でも 24px のすきまになります。
     :empty は使えません——Thymeleaf が改行とインデントを残すため、
     空白テキストがあって一致しません。「要素の子を持たない」で見ます。 */
.theme-night .startpage .container > .stack-sm:not(:has(*)) { display: none; }

/* 題。24px Bold・丸なし（丸つき 16px は節見出しのほうの部品） */
.theme-night .startpage .section-title { margin: 0; gap: 0; }
.theme-night .startpage .section-title::before { display: none; }
.theme-night .startpage h1.section-title__text { font-size: 24px; line-height: 1.4; }

/* ご案内カード */
.theme-night .startpage .card__body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 24px 16px;
}
.theme-night .startpage .card__body > * { margin: 0; }
.theme-night .startpage .card__body .lead { font-size: 16px; color: var(--text); }
.theme-night .startpage .card__body .small { font-size: 14px; }

/* 人数のフォーム。ここも設計どおり段の間 24（ラベルと人数の間も 24） */
.theme-night .startpage form { display: flex; flex-direction: column; gap: 24px; }
.theme-night .startpage form > * { margin: 0; }
.theme-night .startpage .label { font-size: 14px; font-weight: 400; margin-bottom: 0; }

/* 人数ボタン 76x52。
   ★ gap は 12。16px のままだと 76x4 + 16x3 = 352 になり、
     入れ物の 343 をはみ出します（実測でボタンが枠から出ていた）。
     12 なら 340 で収まります。 */
.theme-night .startpage .grid--4 { gap: 12px; }
.theme-night .startpage .guestpick {
  min-width: 76px;
  min-height: 52px;
  padding: 0 8px;
  border-radius: 8px;
  border: 1px solid var(--border);
  font-size: 16px;
  font-weight: 700;
  white-space: nowrap;
}
/* 選んでいる人数。塗りで示すので枠は持たせない */
.theme-night .startpage .guestpick.btn--primary {
  --btn-bg: #dd9a4e;
  --btn-bd: #dd9a4e;
  --btn-fg: #141414;
  border-color: #dd9a4e;
}

/* 9 名以上の行 */
.theme-night .startpage .guestother { display: flex; gap: 12px; align-items: center; }
.theme-night .startpage .guestother__input {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 52px;
  /* 設計は面と同じ #232323。--surface-2（#202020）だと一段沈んで見える */
  background: var(--surface);
  border-color: var(--border);
  font-size: 16px;
}
.theme-night .startpage .guestother__go {
  flex: 0 0 auto;
  min-width: 110px;
  min-height: 52px;
  /* 設計は枠なし。地の #232323 だけで面を示す */
  border: 0;
  font-size: 16px;
  font-weight: 700;
  white-space: nowrap;
}

/* 注意書き。青い .alert--info ではありません（設計は面＋左の帯） */
.theme-night .startpage .notice-night {
  padding: 32px 24px;
  background: var(--surface);
  border-left: 4px solid #dd9a4e;
  font-size: 16px;
  line-height: 1.75;
}

/* --- 伝票ページ（設計 ト02n 1540:30863 ／ ト02m 1542:20590）-------------
   実測値：見出し pad 0 40、戻る＋題の間 40、題 32px Bold。
   帯 1168×120・pad 16 40 16 24。引き出し pad 24 24 24 288・段の間 24。

   ★ 会計をモーダルからページに移しました（2026-09-23）。
     モーダルは 520px で、14 品の明細のうち 8 品しか一度に出せず、
     読み上げながら指でスクロールすることになっていました。 */
.billpage {
  /* 帯のぶんの余地。入れないと、いちばん下のカードが帯に隠れる */
  padding-bottom: 140px;
}

/* --- 見出し（戻る＋題を同じ行に）--------------------------------------- */
.billhead {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 0 40px;
}
/* 見本（トp13b カテゴリを編集）と同じ組み方。かたまりの中を 40px 空ける */
.billhead__lead  { display: flex; align-items: center; gap: 40px; }
.billhead__title { margin: 0; font-size: 32px; font-weight: 700; line-height: 1.2; }
.billhead__sub   { font-size: 14px; color: var(--text-muted); }
.billhead__gap   { flex: 1 1 auto; }
.billhead__state { font-size: 14px; color: var(--text-muted); }
/* 戻るは道案内。枠は持つが、押してほしい操作の顔にはしない */
.billpage .billhead__back { min-height: var(--tap); font-size: 15px; --btn-bd: #e8e8e8; }

/* --- 足もとの帯（画面の下に貼り付く）------------------------------------ */
/* ★ position: sticky。ページの下端に固定すると、会計のたびに
     最下部までスクロールすることになります。 */
.billbar {
  position: sticky;
  bottom: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 48px;
  padding: 16px 40px 16px 24px;
  background: var(--surface);
  border-top: 1px solid var(--border);
  /* 手前にあることを示す。無いと、浮いた板に見える */
  box-shadow: 0 -2px 8px rgba(0, 0, 0, .10);
}
.billbar__label { font-size: 15px; font-weight: 700; }
.billbar__total { font-size: 28px; font-weight: 700; font-variant-numeric: tabular-nums; }
.billbar__gap   { flex: 1 1 auto; }
/* ★ セレクタは .billbar から書くこと（CLAUDE.md の詳細度の罠）。
     .billbar__go だけ（0,1,0）では .theme-desk .btn（0,2,0）に負けます。 */
.billbar .billbar__quit,
.billbar .billbar__go { min-height: var(--tap); padding: 0 24px; font-size: 15px; font-weight: 700; }
.billbar .billbar__quit { --btn-bd: #e8e8e8; --btn-fg: var(--text); }
/* まだ締めないので緑。赤は引き出しの「伝票を締める」だけ */
.billbar .billbar__go { --btn-bg: var(--action); --btn-bd: var(--action); --btn-fg: var(--on-action); }

/* --- お会計の引き出し（下から出る）-------------------------------------- */
/* ★ 中央のモーダルではありません。明細が上に見えたまま残るので、
     何に対して払うのかを見ながら支払い方法を選べます。 */
.billdrawer {
  width: 100%;
  max-width: none;
  margin: auto 0 0;              /* 下端に寄せる */
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 16px 16px 0 0;
  background: var(--surface);
  color: var(--text);
}
.billdrawer::backdrop { background: rgba(28, 28, 28, .4); backdrop-filter: blur(3px); }
.billdrawer__box  { display: flex; flex-direction: column; gap: 24px; padding: 24px 24px 24px 288px; }
.billdrawer__head { display: flex; align-items: center; gap: 12px; }
.billdrawer__title{ margin: 0; font-size: 20px; font-weight: 700; }
.billdrawer__gap  { flex: 1 1 auto; }
.billdrawer__body { display: flex; flex-direction: column; gap: 24px; }
.billdrawer__foot {
  display: flex;
  align-items: center;
  gap: 16px;
  padding-top: 24px;
  border-top: 1px solid var(--border);
}
.billdrawer__label { font-size: 15px; font-weight: 700; }
.billdrawer__total { font-size: 28px; font-weight: 700; font-variant-numeric: tabular-nums; }
.billdrawer .billdrawer__quit,
.billdrawer .billdrawer__go { min-height: var(--tap); padding: 0 24px; font-size: 15px; font-weight: 700; }
.billdrawer .billdrawer__quit { --btn-bd: #e8e8e8; --btn-fg: var(--text); }
/* ★ 赤の塗りに白文字。押してほしいが、戻しにくい一歩でもある。
     目立たせるのは大きさと塗り、危険を伝えるのは色相、と役割を分けています。 */
.billdrawer .billdrawer__go {
  --btn-bg: var(--action-danger);
  --btn-bd: var(--action-danger);
  --btn-fg: #ffffff;
}

/* 狭い画面ではサイドバーぶんの余白をやめる */
@media (max-width: 1100px) {
  .billdrawer__box { padding-left: 24px; }
  .billhead        { padding-inline: 0; }
  .billbar         { padding-inline: 16px; }
}

/* --- 厨房ボード（2 レーン・品ごと）-------------------------------------
   設計 ト01 厨房ボード（1548:20793）を<b>実数値で測って</b>写しています。
   目測で書いた値が何か所もズレていたので、2026-09-23 に測り直しました。

     本文 1168 / pad 24 / 段の間 16
     レーン枠 1120・間 24。未調理 736 ／ 調理済み 368
     レーンの見出し 54 高・pad 12 16・題 20px Bold・件数 20px Bold
     レーンの中身 pad 12・札の間 12
     伝票 710・枠 #e3e3e3。帯 38 高・pad 10 16・間 8
     品目 pad 14 16・行の間 10。品目行 48 高・間 10
     数の箱 49×30・pad 4 10・字 18px Bold #ffffff（角丸なし）
     品名 20px Bold #1c1c1c
     調理済み 200×48・pad 8 12・角丸 8・枠 #0e9721・字 14px Bold #0b7a1a
     ✕ 48×48・角丸 999・地も枠もなし
     渡す札 342・pad 14 16・段の間 10・枠 #d7d7d7（角丸なし）
     卓名 24px Bold。調理済みの品 48 高・間 6・字 14px Medium
     ← 戻す 58×48・pad 6 8・角丸 8・字 13px Bold #444444（地も枠もなし）
     あき（押し間違い防止）10。提供済み 308×48・pad 12 0・枠 #0e9721

   ★ 色は 2 つしか意味を持ちません（設計書 3 節）。
       緑 = 押して進める（調理済み・提供済み）
       赤 = 10 分を過ぎた（帯の面だけ）
     灰は「意味を持たせない」ための色です。

   ★ レーンの見出しに色を付けないこと。
     以前は未調理が緑・調理済みが赤の線でしたが、赤が「遅れ」と
     「このレーン」の 2 つを指してしまい、レーンごと遅れているように読めました。 */
/* ページ見出しは共通部品 .page-head を使います（自前のクラスは持ちません）。
   31 画面で同じ見出しなので、ここだけ別の値にすると画面を行き来したときに
   題の大きさが変わります。値は 4005 行付近の .page-head を見てください。 */

.kboard { display: flex; gap: 24px; align-items: flex-start; }
.klane {
  flex: 0 0 auto;
  /* ★ 設計の実測は #ffffff。var(--surface) は #f7f9fb（薄い青灰）で別物です。
       トークンの名前だけで選ばず、値を確かめること（2026-09-23 に踏みました）。
       レーンも伝票も札も、地はすべて白。違いは枠の色だけです
       （レーン #e3e3e3 ／ 渡す札 #d7d7d7）。 */
  background: #ffffff;
  border: 1px solid #e3e3e3;
  overflow: hidden;
}
/* ★ どちらも<b>縮められる</b>ようにしておくこと。
     調理済みを flex-shrink: 0 にしていたため、iPad（1024）で
     736 + 24 + 368 = 1128 が内側 912 に収まらず <b>216px はみ出して</b>いました。
     基準幅（1432）では設計どおり 736 : 368 で出ます。 */
.klane--todo { flex: 1 1 736px; min-width: 0; }
.klane--done { flex: 0 1 368px; min-width: 0; }

.klane__head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  /* ★ 実測は 上 3px ／ 下 1px（左右は 0）。レーンの枠（1px）より太い線が
       頭に乗ることで、レーンの始まりが遠目にも分かります。
       下 1px だけにしていたので、見出しがただの行に見えていました。 */
  border-top: 3px solid #e3e3e3;
  border-bottom: 1px solid #e3e3e3;
}
/* ★ 16px。ホール盤面のレーン見出し（在卓／お会計待ち／バッシング）と同じ値です
     （店主：「未調理、調理済みのフォントが大きすぎる」）。
     設計の厨房は 20px でしたが、隣り合う 2 つの盤面で見出しの大きさが違うと、
     画面を行き来したときに<b>どちらが上位の見出しか分からなくなります</b>。
     レーンの見出しは「その列が何か」を言うだけの札なので、揃えるほうが正しい。
     Figma（ト01・ト01b・トi01）も 16px に直してあります。 */
.klane__title { font-size: 16px; font-weight: 700; }
.klane__count { margin-left: auto; padding: 1px 9px; font-size: 16px; font-weight: 700; }
.klane__body  { display: flex; flex-direction: column; gap: 12px; padding: 12px; }
.klane__empty { margin: 0; padding: 24px 0; text-align: center; color: #828282; }

/* --- 未調理の伝票 ------------------------------------------------------- */
/* 角丸は付けません（設計の実測は 0）。札を四角にすると、
   同じ卓のまとまりが紙の伝票らしく見えます */
.kticket { background: #ffffff; border: 1px solid #e3e3e3; }
.kticket__band {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
}
/* ★ 10 分を過ぎた伝票。面を薄赤にするだけで、枠は変えません。
     枠を赤くすると、押せる ✕ の赤い線と同じ「赤い線」になって見分けがつきません。
     帯なら面なので種類が違い、しかも卓名のすぐ後ろに乗ります。 */
.kticket--late .kticket__band { background: #fdebeb; }
.kticket--late .kticket__table,
.kticket--late .kticket__no,
.kticket--late .kticket__time { color: #9d3a32; }

.kticket__table { font-size: 15px; font-weight: 500; }
.kticket__no    { font-size: 13px; color: #828282; }
.kticket__gap   { flex: 1 1 auto; }
/* ★ ふつうの伝票の経過時間は <b>#1c1c1c</b>（本文と同じ濃さ）。
     薄い灰にしていましたが、設計では卓名と同じ濃さで出ます。
     遅れた伝票だけ上の --late で #9d3a32 に変わります。 */
.kticket__time  { font-size: 14px; font-weight: 700; color: #1c1c1c; }
.kticket__lines { display: flex; flex-direction: column; gap: 10px; padding: 14px 16px; }
.kticket__note  { margin: 0; padding: 0 16px 14px; font-size: 14px; color: #828282; }

.kline {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  min-height: 48px;
}
/* ★ 数量の箱。黒＝鉄板で焼く品、白＝焼かない品（飲み物など）。
     角丸は付けません（設計の実測は 0）。
     一番大事なのは品名なので、数は小さく黒い箱に押し込めます */
/* 焼かない品（飲み物・ポテサラ）：白地・枠 #828282・字 #828282。
   実測 51×32 は 49×30 ＋ 枠 1px ずつ。min-width は中身の 49 で指定します */
.kline__qty {
  flex: 0 0 auto;
  min-width: 49px;
  padding: 4px 10px;
  background: #ffffff;
  border: 1px solid #828282;
  color: #828282;
  font-size: 18px;
  font-weight: 700;
  line-height: 22px;
  text-align: center;
}
/* 焼く品：黒地・白字・<b>枠なし</b>（実測 49×30、枠の色は付いていません） */
.kline__qty--fire { background: #1c1c1c; border-color: #1c1c1c; color: #ffffff; }
/* ★ 品名が主役（20px Bold）。卓名 15px より大きいのは意図的です。
     店主の最初の指摘がここでした——
     「一番大事な商品名が小さくてカウンター6とか卓情報が大きくて使いずらい」 */
/* ★ 品名は 20px。太さは鉄板かどうかで変わります（設計の実測）。
     焼く品 Bold ／ 焼かない品 Regular。数の箱の色と同じ判断です。 */
.kline__name       { font-size: 20px; font-weight: 400; }
.kline__name--fire { font-weight: 700; }
.kline__gap        { flex: 1 1 auto; }
/* 焼き加減・増し。行の外（品目の直下）に、行と同じ 10px の間隔でぶら下がる */
.kline__opt { margin: 0; font-size: 14px; color: #828282; }

/* --- 調理済みの札（卓ごと）---------------------------------------------- */
.kserve {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px 16px;
  background: #ffffff;
  border: 1px solid #d7d7d7;
}
.kserve__head  { display: flex; align-items: baseline; gap: 8px; }
/* こちらは卓名が主役。何を運ぶかより、どこへ運ぶかが先に要る */
.kserve__table { font-size: 24px; font-weight: 700; }
.kserve__no    { font-size: 12px; color: #828282; }
/* 実測：行 48 高・間 6・MIN/CENTER。品名が伸び、ボタン 2 つが右端に並ぶ */
.kserve__line  { display: flex; align-items: center; gap: 6px; min-height: 48px; }
.kserve__name  { flex: 1 1 auto; min-width: 0; font-size: 14px; font-weight: 500; color: #1c1c1c; }
.kserve__rest  { margin: 0; font-size: 12px; color: #828282; }
/* ★ 「← 戻す」と「提供済み」を離す（店主：「間違って押しそう」）。
     実測は 仕切り 1px ＋ あき 10px。押し間違いの被害が非対称で、
     提供済みを誤爆すると札ごと消えて追えません */
.kserve__foot  { margin-top: 10px; padding-top: 10px; border-top: 1px solid #e8e8e8; }

/* --- 厨房ボードのボタン -------------------------------------------------- */
/* ★ ボタンは form に包まれています（POST が要るため）。
     設計ではボタンが行の直接の子なので、包みが幅を持つと位置がずれます。
     form 自体は大きさを持たず、中のボタンの寸法をそのまま通します。 */
.kboard .kline form,
.kboard .kserve__line form { display: flex; flex: 0 0 auto; margin: 0; }
/* ★ 卓の札の「提供済み」は<b>縦積みの中</b>にあるので、上の横並びの規則とは別。
     一緒にして margin:0 を当てたせいで、仕切りとの間の 10px が消えていました。
     設計の実測は「仕切り 1px ＋ あき 10px」。 */
.kboard .kserve__foot { display: block; width: 100%; }

/* ★ セレクタは .kboard から書くこと（CLAUDE.md の詳細度の罠）。
     .kbtn だけ（0,1,0）では .theme-desk .btn（0,2,0）に負けて
     --btn-bd が #e8e8e8 に戻されます。あとに書いても勝てません。 */
/* ★ 実測：調理済み 200×48・pad 8/12、✕ 48×48・pad 8/10。
     どちらも<b>高さ 48 で、行（48）の上下に余りゼロ</b>です。
     行は MIN/CENTER なので、48 のもの同士は自然にぴったり揃います。
     box-sizing: border-box なので、padding は 48 の内側に入ります
     （高さに足されません。CLAUDE.md の「床は中身に敷く」と同じ話）。 */
.kboard .kbtn {
  height: var(--btn-h);
  min-height: var(--btn-h);
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 700;
  /* ★ 折り返さない。.btn は持っていますが、この画面のボタンは
       設計の実寸に合わせて幅を決めているので、1px でも足りないと
       文字が 2 行になって行の高さごと崩れます。 */
  white-space: nowrap;
}
/* 調理済みは 200px 固定（実測）。文字の長さで幅が変わると、
   行によってボタンの左端がずれて、押す位置を毎回探すことになります。
   狭い画面では下の帯で縮めます（幅より、品名が読めることを優先） */
.kboard .kbtn--go { width: 200px; }
/* ★ 字の緑は必ず var(--action)。実値（#0b7a1a）をベタ書きすると、
     色を変えたときにここだけ取り残されて誰も気づけません
     （ActionGreenTokenTest が定義の 1 箇所以外を禁じています）。

   ★ 枠の #0e9721 は直値でよい。これは --action より一段明るい<b>枠専用</b>の値で、
     トークンになっていません（.btn--edit や .sortpick も直値で書いています）。
     設計の実測も 枠 #0e9721 / 字 #0b7a1a です。 */
.kboard .kbtn--go { --btn-bd: #0e9721; --btn-fg: var(--action); }
/* 卓の札の「提供済み」だけ幅いっぱい・15px（実測 308×48・pad 12 0） */
/* 卓の札の「提供済み」だけ幅いっぱい・15px（実測 308×48・pad 12 0）。
   上の 200px 固定を打ち消します */
/* 実測 308×48・pad 12 0・中央ぞろえ。札の中身幅いっぱい（右の余り 1px）。
   上の 200px 固定を打ち消します */
.kboard .kbtn--block { display: flex; width: 100%; padding: 12px 0; font-size: 15px; }
/* 戻すは「直す」系。✕ と同じ静かさに寄せます（案A・2026-09-23 採用）。
   実測 58×48・字 13px Bold #444444・地も枠もなし */
/* ✕（品を取り消す）。実測 48×48・pad 8/10・角丸 999・地も枠もなし。
   .linex は伝票ページと共通なので、厨房の実測値をここで固定します */
.kboard .kline__x {
  flex: 0 0 auto;
  white-space: nowrap;
  width: var(--btn-h);
  height: var(--btn-h);
  min-width: var(--btn-h);
  min-height: var(--btn-h);
  padding: 8px 10px;
}

/* ← 戻す。実測 58×48・pad 6/8・角丸 8。
   ★ 文字に使える幅は 58 − 8×2 = <b>42px ちょうど</b>で、
     設計の「← 戻す」も実測 42px。余裕がゼロなので、
     白抜きの字送りが 1px でも違うと折り返して行が崩れます。
     nowrap を必ず付けること（2026-09-23 に踏みました）。
   ★ 幅は min-width で持ち、width では固定しません。
     縮まないことだけ保証して、はみ出す側は許します。 */
.kboard .kback {
  min-width: 58px;
  white-space: nowrap;
  flex: 0 0 auto;
  height: var(--btn-h);
  min-height: var(--btn-h);
  padding: 6px 8px;
  /* ★ 枠を付けます（2026-09-23・店主の判断
       「←戻すは枠付けてボタンとして認識できないから」）。
     設計の実測は枠なしでしたが、実機では押せるものに見えませんでした。
     ✕ と同じ「静かな灰色」にしていたのが行きすぎで、
     ✕ は記号そのものが操作を表すのに対し、「← 戻す」はただの文字列です。
     形（枠）が無いと、隣の品名と区別がつきません。
     色は足しません——灰の枠なので、緑（進める）とはぶつかりません。 */
  background: #ffffff;
  border: 1px solid #c7c7c7;
  border-radius: 8px;
  color: #444444;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}
.kboard .kback:hover { background: #f0f0f0; }

/* --- 厨房ボード：狭い画面（iPad 1024 など）---------------------------
   ★ 設計は 1432 の 1 枚だけです（iPad 版・PC 版は作っていません）。
     勝手な寸法を足さず、<b>基準の値を縮める</b>方針にしています。

   ★ 区切りは 1100px。CLAUDE.md の「新しい境目を増やさない」に従い、
     既にこのファイルで使っているタブレットの境目に合わせます。

   実測（1024）：内側 912 = 1024 − 畳んだサイドバー 64 − 本文の余白 24×2。
   基準のレーン合計 1128 では 216px はみ出すので、ここで縮めます。 */
@media (max-width: 1100px) {
  /* 調理済みは中身（342 の札）が入る幅まで。未調理が残りを取る */
  .kboard .klane--done { flex: 0 1 320px; }
  /* 品名が読めることを優先して、ボタンの固定幅をやめる。
     ★ :not(.kbtn--block) を必ず付けること。
       卓の札の「提供済み」は同じ .kbtn--go を持っていて、
       こちらの width:auto が基準の width:100% を打ち消していました
       （あとに書いた規則が勝つため）。結果、iPad で提供済みの右が空きます。 */
  .kboard .kbtn--go:not(.kbtn--block) { width: auto; min-width: 110px; padding: 6px 10px; }

  /* ★★ 案C（2026-09-23・店主の判断）。1 画面に載る件数を優先します。
       「厨房は一度に多くの情報載せたいんだけど、これだと上下の余白が多すぎて
         iPad 版だと 4 件くらいしか見えない」

     実測で、iPad（1024×768）に見える伝票は 3.6 枚でした。
     4.7 枚まで増やしています（伝票の平均 155 → 122px）。

     ★ 効くのは<b>ボタンの高さ</b>です。行の高さはボタンで決まるので、
       48 → 40 が全行に効きます。文字を 2px 落としても 2px しか減りません
       （案A＝文字そのまま・余白だけ、で 3.9 枚。案B＝44px で 4.1 枚）。

     ★ --tap（48px）をこの帯でだけ割ります。
       厨房は手が濡れていて急ぐ場所なので、本来は割りたくない決まりです。
       枚数を取るという判断なので、<b>押し間違いが増えたらここから戻すこと。</b>
       基準幅（1432）は 48px のままです。

     ★★ 2026-09-26 に 40px → 44px。店主の指示「ボタンの高さ統一させて」
        （「厨房のもどすボタン…高さが違うでしょって」）。

        厨房だけ 40px で、ほかは表の行 44px・見出しと本文 48px でした。
        40px は Apple の 44pt も割っています。

        ★ 枚数は減りませんでした。iPad（1024×768）で測り直した結果:
            40px … 伝票 3 枚ぶん／品の行 4 行がまるごと見える
            44px … 伝票 3 枚ぶん／品の行 4 行（<b>同じ</b>）
          2026-09-23 に「44px だと 4.1 枚」と書いたのは伝票の平均高さからの
          見積もりで、実際に画面に収まる枚数は変わりませんでした。 */
  /* ★ ボタンの高さはここで指定しません（2026-09-26）。--btn-h が 1 か所で
       決めています。ここに書くと、また画面ごとにズレる元になります。
       行の最低高さだけ、ボタンに合わせて残します。 */
  .kboard .kline,
  .kboard .kserve__line { min-height: var(--btn-h); }
  .kboard .kline__name   { font-size: 16px; }
  .kboard .kticket__table{ font-size: 13px; }
  .kboard .kticket__band { padding: 6px 12px; }
  .kboard .kticket__lines{ padding: 8px 12px; gap: 6px; }
  .kboard .klane__body   { padding: 8px; gap: 6px; }
  .kboard .kserve        { padding: 10px 12px; gap: 6px; }
}

/* --- 明細の ✕（お会計から取り除く）------------------------------------
   設計 1461:17582 まわり。実測した値だけで組んでいます。

   ★ 地も枠も持たせません（店主の判断・2026-09-22）。
       「×ボタンはそんなに目立たせたいものでも押させたいモノでもないから
         灰色×だけで枠も要らない気がしてきた」
     取り消しは<b>見つかる必要はあるが、誘う必要がない</b>操作です。
     枠を付けると、隣の「お会計する」と同じ重さになります。

   ★ 見た目を静かにするのと、字を薄くするのは別です。
     一度 #828282 まで落として 3.84:1 で AA を割りました。
     #444444 なら 9.74:1。静かにするのは枠と地を外すことでやります。

   ★ 当たり判定は 48px（--tap）。見た目が文字ひとつでも、ここは削りません。 */
.linex {
  flex: 0 0 auto;
  min-width: var(--tap);
  min-height: var(--tap);
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: none;
  color: #444444;
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
}
.linex:hover { background: #f0f0f0; }
.linex:focus-visible { outline: 2px solid var(--action); outline-offset: 2px; }

/* --- 品を 1 つ取り消す確認（設計 1461:17582）----------------------------
   実測値：箱 520 幅・角丸 8・枠 #e3e3e3 1px。
   題 20/Bold、品名 15/Medium、補足 13/Regular #828282。
   選択肢 角丸 8・padding 14 16・段の間 12。足もと padding 16 24・gap 12。 */
.linecancel { width: 520px; }
.linecancel__box { gap: 0; padding: 0; border-radius: 8px; border: 1px solid #e3e3e3; }
.linecancel__head {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 24px 24px 20px;
}
.linecancel__title { margin: 0; font-size: 20px; font-weight: 700; line-height: 1.2; }
.linecancel__item  { margin: 0; font-size: 15px; font-weight: 500; }
.linecancel__note  { margin: 0; font-size: 13px; color: #828282; }

.linecancel__choices {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 0 24px 20px;
}
/* 選んだほうだけ枠を緑の 2px に。丸だけ塗って枠を 1px のままにすると、
   どちらが選ばれているか離れて見て分かりません（Figma 側でも同じ穴に落ちました） */
.linecancel__choice {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border: 1px solid #e3e3e3;
  border-radius: 8px;
  cursor: pointer;
}
/* 緑は --action を使うこと。実値をベタ書きすると、色を変えたときに
   ここだけ取り残されて、誰も気づけません（ActionGreenTokenTest が見張っています） */
.linecancel__choice:has(input:checked) { border: 2px solid var(--action); padding: 13px 15px; }
.linecancel__choice input { flex: 0 0 auto; width: 20px; height: 20px; accent-color: var(--action); }
.linecancel__choice span  { display: flex; flex-direction: column; gap: 2px; }
.linecancel__choice b     { font-size: 16px; font-weight: 700; }
.linecancel__choice small { font-size: 13px; color: #828282; }

/* 実測 pad 20/24・間 12・右寄せ。仕切りは 1px #e3e3e3 */
.linecancel__foot {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 20px 24px;
  border-top: 1px solid #e3e3e3;
}
.linecancel__gap { flex: 1 1 auto; }
/* 両方とも 48px（--tap）。押し間違えたくないので、主・副のどちらも塗りません。
   地を塗ると「押してほしいボタン」に見えます。

   ★ セレクタは必ず .linecancel から書くこと（CLAUDE.md の詳細度の罠）。
     .linecancel__cancel だけ（0,1,0）では 3663 行の .theme-desk .btn（0,2,0）に
     負けて、--btn-bd が #e8e8e8 に戻されます。あとに書いても勝てません。 */
.linecancel .linecancel__cancel,
.linecancel .linecancel__go {
  min-height: var(--tap);
  padding: 14px 24px;
  font-size: 15px;
  font-weight: 700;
}
.linecancel .linecancel__cancel { --btn-bd: #e3e3e3; --btn-fg: #1c1c1c; }
.linecancel .linecancel__go     { --btn-bd: #d33f3f; --btn-fg: #9d3a32; }

/* --- 金額の内訳 --------------------------------------------------------- */
.sumbox {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 16px;
  border-radius: 6px;
  background: #f7f9fb;
}
.sumbox__row { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 16px; }
.sumbox__row span:first-child { color: var(--text-muted); }
.sumbox__line { height: 1px; background: var(--border); }
.sumbox__row--total span:first-child { color: var(--text); font-weight: 700; }
.sumbox__row--total b { font-size: 28px; font-variant-numeric: tabular-nums; }
.sumbox__row--tax { font-size: 14px; }

/* --- 深夜料金のチェックと支払方法 --------------------------------------- */
.checkline { display: flex; align-items: center; gap: 10px; font-size: 15px; cursor: pointer; }
.checkline input { width: 20px; height: 20px; accent-color: var(--action); }
.payrow { display: flex; gap: 8px; }
.payopt {
  flex: 1 1 0;
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  padding: 12px 16px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface);
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
}
.payopt input { width: 18px; height: 18px; accent-color: var(--action); }
.payopt:has(input:checked) { background: var(--action-soft); border-color: var(--action); }

/* 盤面のエリア見出し（卓 2/3。2026-09-07）。
   節見出し（在席の伝票／空席）の 1 段下のまとまりなので、小さく・薄く。
   全卓がエリア未設定のときは描画されない（HallController.groupByArea） */
.hallboard .areahead {
  margin: 0 0 12px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 1.5px;
  color: var(--text-muted);
}
.hallboard .grid + .areahead { margin-top: 24px; }

/* ご案内の入口と、入力画面の足元（2026-09-11）。
   盤面では「＋ 新規お客様」1 つ、入力画面では「やめる／ご案内する」の 2 つが入る。
   どちらも押し間違えたくないボタンなので、上下に空きを取って独立させる。
   .choice の行が続いたすぐ下に置くと、最後の卓の一部に見える */
.hallboard .seatbar {
  display: flex;
  gap: 12px;
  align-items: center;
  margin: 24px 0;
}
/* 盤面では「＋ 新規お客様」1 つしか入らない。ここで margin-left:auto を
   使うと、その 1 つが右端へ飛んで見つけにくくなる（一度そう書いて戻した） */

@media (max-width: 960px) {
  .statrow { grid-template-columns: 1fr; }
  .sheet { margin: -20px -20px; padding: 20px; }
}

/* --------------------------------------------------------------------------
   30-7. サイドバー
   --------------------------------------------------------------------------
   本文が 16px になると、13〜14px のサイドバーだけが取り残されて見える。

   ★ かつて「大きくすると、いちばん下のログアウトが画面の外に出る」という
     実測（1024×768 で 830px）を理由に触らないことになっていたが、
     その後 .sb__nav だけを overflow-y:auto にする形に直してあり、
     はみ出しても中でスクロールするだけでアカウント欄は残る。
     根拠のほうが先に解消していたので、ここで上げる。

   厨房・ホールではサイドバーがアイコンだけの帯（.staff-shell--floor）に
     畳まれ、文字そのものが出ないので、ここの指定は効かない。

   ★ 2026-09-05 — 項目とグループ見出しの上書きを外した。
     設計（Figma）は項目 15px・見出し 12px で、サイドバー全体を
     本文より一段小さく保つ配分になっている。ここで 16/14 に上げると
     「本文と同じ大きさのナビ」になり、目が本文に向かなくなる。
     .sb__item / .sb__label の素の値（15px / 12px）をそのまま使う。
   -------------------------------------------------------------------------- */
.theme-desk .sb__brand-name  { font-size: 16px; }
.theme-desk .sb__brand-sub   { font-size: 13px; }
.theme-desk .sb__account-name { font-size: 15px; }
.theme-desk .sb__account-role { font-size: 13px; }

/* --------------------------------------------------------------------------
   30-8. 帳簿だけの上振れ（.theme-ledger）
   --------------------------------------------------------------------------
   税理士の画面は、机で読む画面のなかでもとくに数字を長時間追う。
   1 桁の読み違いが申告の誤りになるので、補足文にも 16px の床を敷く。

   2 クラス重ね（0,3,0）で書いているのは、記述順に頼らないため。
   .theme-desk の (0,2,0) に必ず勝つので、この節を上に動かしても壊れない。
   -------------------------------------------------------------------------- */
.theme-desk.theme-ledger { line-height: 1.9; }

/* ★ 題の行の上下を、店舗管理の見出し帯にそろえる（2026-09-18・店主の指摘）。

     「上下の余白も統一感ないんだけど調べて」を実測したところ、
     税理士だけ「器の上 ～ 題」が 39px（他は 55px）、
     「題 ～ 次のブロック」が 55px（他は 71px）でした。

     差はちょうど 16px ずつ。原因は<b>題の行の上下 padding</b>だけです。

         店舗管理 .page-head      padding 16・16 → 帯の高さ 82
         税理士   .section-title  padding  0・0  → 帯の高さ 50

     ★ 2026-09-19：左右も 40px にしました。
       それまでは「.staff-main の --main-pad-x に任せる」としていましたが、
       店主の「３パターンズレないようにね」で 3 幅を測ったところ、
       税理士だけ題が 40px 左に飛び出していました。

         画面      題の左    見出しの左右余白
         税理士     288       0 / 0      ← 飛び出している
         商品       328       40 / 40
         売上       328       40 / 40

       ほかの画面は「本文は 288 から、題はそこから 40 内側」という組み方です
       （設計も同じ。本文 pad 24 で 288、帯 pad 40 で 328）。
       税理士だけ題が本文の左端に貼り付いていました。 */
.theme-ledger .section-title:has(h1) { padding-block: 16px; padding-inline: 40px; }
/* 題に床を敷く。行に敷いても border-box で padding に食われて効きません。
   .theme-ledger だけでなく机で使う画面すべてに。題を .section-title__text で
   出している画面（食材・在庫・品切れ・ホール・税理士）が対象です。 */
.theme-desk h1.section-title__text { min-height: 50px; display: flex; align-items: center; }

/* iPad では帯も一段詰める（.page-head の 8px 24px と同じ）。
   ★ 2026-09-26 に 12px → 8px。税理士 5 画面もこの帯を使っているので、
     ここを置いていくと店舗側 24 画面が 64px・税理士 5 画面が 74px に割れます
     （実測で気づきました。「3 画面だけ」と思っていたのは間違いでした）。 */
@media (max-width: 1380px) {
  .theme-ledger .section-title:has(h1) { padding-block: 8px; padding-inline: 24px; }
}

.theme-desk.theme-ledger .help,
.theme-desk.theme-ledger .small,
.theme-desk.theme-ledger .tiny { font-size: 16px; }

.theme-desk.theme-ledger .table td.bold { font-size: 20px; font-weight: 700; }

/* ★ 2026-09-20：税理士の表の高さを設計（64 / 68）にそろえました。
     それまでは高さの指定が無く、.theme-ledger の行間 1.9 に引っ張られて
     63.3 / 71.4 / 79 / 89 と画面ごとにバラバラでした（実測）。
     表の height は最低値として効くので、2 行になる欄は自然に伸びます。 */
.theme-desk.theme-ledger .table th { height: 64px; }
/* ★ 行の高さは指定しません。設計は 68px ですが、税理士の画面は
     .theme-ledger で行間 1.9 にしてあり（読みやすさのための上振れ）、
     中身だけで 71〜89px になります。height は表では最低値としてしか効かないので、
     68 と書いても何も起きません。縮めるには行間 1.9 をやめることになり、
     それは「税理士が読む画面は一段大きく」という前の判断を戻すことになります。 */
.theme-desk.theme-ledger .btn--lg { font-size: 20px; }

/* 帳簿の合計行 */
.theme-desk.theme-ledger .total-table th,
.theme-desk.theme-ledger .total-table td { font-size: 16px; }
.theme-desk.theme-ledger .total-table tr:last-child th,
.theme-desk.theme-ledger .total-table tr:last-child td { font-size: 20px; font-weight: 700; }

/* ==========================================================================
   31. お客さまのスマホ画面の部品（2026-09-05）
   --------------------------------------------------------------------------
   設計: Figma「02 スマホ（お客さん）」暗01 お好み焼き / 暗02 ビール・サワー /
         暗03 サービス / 暗04 伝票・会計 と、その素になっている 暗/ 部品。

   ★ 行送りは全部 px で書き切ること。
     この設計は「12 + 28 + 12 = 52」のように、行送りが高さを決めている。
     line-height を省くとブラウザの既定（およそ 1.45〜1.5）で計算され、
     箱の高さが数 px ずつずれて、縦のリズムが全部崩れる。

   ★ 枠線は箱の内側に描かれている（Figma の仕様）。
     border を素直に足すと箱がその分ふくらむので、
     box-sizing: border-box を効かせるか、余白から 1px 返すこと。
     この 2 つを外すと、いつも同じ壊れ方をする。
   ========================================================================== */

/* --------------------------------------------------------------------------
   31-1. 写真カード（暗/写真カード 358x276）

   その分類でいちばん見せたい 1 品。写真 358x210 ＋ 名前の帯。
   帯は説明が無ければ 66、あれば 77（設計 品名と説明 373:2184 の 12＋53＋12）。
   -------------------------------------------------------------------------- */
.photo-card {
  display: block;
  /* 売り切れ・残数のバッジを写真の上に重ねるための基準 */
  position: relative;
  border-radius: 8px;
  /* 写真そのものには角丸を付けず、カード側で切る（設計の作りどおり）。
     img に border-radius を付けると、下の帯との境目で角が二重に見える */
  overflow: hidden;
  background: var(--surface);
  color: inherit;
  text-decoration: none;
}
.photo-card__img {
  display: block;
  width: 100%;
  /* 358 : 210。幅が変わっても写真の形が変わらないように比で持つ */
  aspect-ratio: 358 / 210;
  object-fit: cover;
}
/* 写真の上に重ねるバッジ。fragments/common :: allergens が .menu-item__badges を出す。
   帯の中に入れると帯が伸びてカードの高さが崩れるので、写真の側に逃がしている。
   （帯の高さは説明の有無で 66 か 77。バッジを足すと、そのどちらでもなくなる） */
.photo-card > .menu-item__badges {
  position: absolute;
  top: 12px;
  left: 12px;
  right: 12px;
  margin: 0;
}

.photo-card__bar {
  display: flex;
  /* ★ baseline ではなく flex-start（設計 名前の帯 の items-start）。
     品名の下に説明が付いたので、baseline のままだと価格が
     「列の最初の行」ではなく列全体の基準に引っぱられて位置が動く。
     flex-start にしても、説明が無いときの帯の高さは 66 のまま変わらない
     （価格の行送り 42 のほうが品名の 28 より高いので、そちらが帯を決める）。 */
  align-items: flex-start;
  padding: 12px 16px;
}
/* 品名と説明で 1 列（設計 品名と説明 373:2184）。
   縦に積むのはこの箱の仕事。品名そのものに flex を持たせない。 */
.photo-card__text {
  flex: 1;
  /* これが無いと flex が縮まず、長い品名が価格を右へ押し出す */
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.photo-card__name {
  margin: 0;
  font-size: 20px;
  font-weight: 500;
  line-height: 28px;
  letter-spacing: 0;
  /* 帯の高さは「品名が 1 行」の前提。2 行になるとカードが伸びる */
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
/* 説明は 13px（設計）。品名との差は 7px あるが、読み分けているのは
   大きさより色。白と #9e9e9e で、どちらが品名かは一目で分かる。

   ★ 1 行で切ること。説明は 300 字まで入るので、折り返しを許すと
     カードの高さが品によって変わり、下のサムネイルの並びが上下にずれる。
   ★ 行送り 21 は 13 × 1.6 の切り上げ。28 ＋ 4 ＋ 21 で、
     設計の「品名と説明」の高さ 53 にちょうど収まる。 */
.photo-card__note {
  margin: 0;
  font-size: 13px;
  line-height: 21px;
  color: var(--text-muted);
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.photo-card__price {
  flex: none;
  font-size: 24px;
  font-weight: 700;
  line-height: 42px;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   31-2. おすすめ帯とサムネイル（暗/おすすめ帯 360x194 ／ 暗/サムネイル 112x194）

   ★ 帯の幅は 360px で、同じ画面の写真カード（358）より 2px 広い。
     これは間違いではなく「画面からはみ出して横に流れる」という設計の意思表示。
     3 枚を 358 に押し込もうとすると、写真か間隔のどちらかを削ることになる。
     素直に横スクロールにする。
   -------------------------------------------------------------------------- */
/* 2 品目から下は 2 列に並べ、そのまま下へ流す（設計 361:3809 / 2026-09-06）。

   ★ 以前は横スクロールだった。やめた理由:
     指を横に動かさないと 3 品目が見えないので、<b>そこに品があること自体</b>が
     伝わらない。画面は縦に読むものなので、横に隠すと「これで全部」に見える。
     設計も 2 列に置き直され、右端の縦スクロールバーだけが残っている。

   ★ 幅は決め打ちにしない。
     設計のカードは 152px だが、あれは 390 の画面でスクロールバーのぶんを
     内側に空けた結果の数字。こちらは画面ごと縦に流れるので、
     内側に空ける必要がない。2 列を等分して、端をきちんと合わせる。 */
/* ★ 行の高さいっぱいに伸ばして、価格を下端でそろえる。

     以前は align-items: start（上端でそろえる）だった。品名も説明も
     1 行か 2 行かで高さが変わるので、隣り合う 2 枚で価格の位置が最大 40px
     ずれていた（実測でも ¥1,380 と ¥1,480 が 20px ずれた）。
     価格は<b>隣と見比べる</b>ものなので、そろっていないと
     どちらが高いのかを目で追えない。

     start をやめても写真が潰れないよう、写真には flex: none を付けてある
     （伸びる役は下の余白が引き受ける）。 */
.thumb-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px 12px;
  align-items: stretch;
}

.thumb {
  min-width: 0;
  /* 行の高さいっぱいまで伸びる。中身が短い側に余白ができ、
     その余白が価格を下へ押し下げる（下の margin-top: auto） */
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 8px;
  color: inherit;
  text-decoration: none;
}
.thumb__img {
  display: block;
  /* ★ 伸び縮みさせない。これが無いと、行の高さに合わせて写真が縦に潰れ、
     aspect-ratio で決めた形が崩れる（stretch にした代償をここで払う） */
  flex: none;
  width: 100%;
  /* 設計のカードは 152 x 158（写真の部分）。幅を決め打ちにせず比で持つ。
     こうしておくと 360 の端末でも 440 の端末でも、同じ形のまま伸び縮みする */
  aspect-ratio: 152 / 158;
  /* こちらは写真そのものに角丸が付く（写真カードとは作りが違う）。
     16 は設計の値。横に小さく並べていた頃の 8 では、大きくなったぶん角が立つ */
  border-radius: 16px;
  object-fit: cover;
}
.thumb__name {
  margin: 0;
  /* 2 列になって 1 枚が大きくなったぶん、文字も 14 → 16（設計どおり）。
     14 のままだと写真に対して名前が痩せて見える */
  font-size: 16px;
  font-weight: 400;
  line-height: 1.75;
  letter-spacing: 0;
  /* 2 行で切る。3 行になると隣の列と下端がそろわず、並びがガタつく */
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
/* 説明は品名と価格のあいだ（設計 暗/サムネイル 373:3999）。

   ★ 2 行で切る。写真カードと違って 1 行にしないのは、
     2 列に並べたぶん 1 枚が細い（390 の端末で 173px）ので、
     1 行では十数文字しか出ず、途中で切れた文が並ぶだけになるため。
   ★ 2 行を超えると、隣の列と下端がそろわず並びがガタつく。
     品名を 2 行で切っているのと同じ理由。 */
.thumb__note {
  font-size: 13px;
  line-height: 1.6;
  color: var(--text-muted);
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.thumb__price {
  /* 余った高さを全部この上に寄せて、価格を下端に貼り付ける。
     説明が 1 行の品と 2 行の品が隣り合っても、金額は同じ高さに並ぶ */
  margin-top: auto;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.6;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}

/* --------------------------------------------------------------------------
   31-3. 品の行（暗/飲み物の行 358x96 / 78 / 52）

   写真と補足の有無で高さが 3 段階に変わる。
     写真あり・補足あり  12 + 72 + 12 = 96
     写真なし・補足あり  12 + 54 + 12 = 78
     写真なし・補足なし  12 + 28 + 12 = 52
   高さを決めているのは写真（72px）で、余白ではない。
   写真を消した瞬間に、高さの支配権が文字の側に移る。

   ★ この行だけ左右の余白が 0。伝票の行（16）や合計行（8）と揃っていないので、
     共通の「行」クラスにまとめると必ずどこかがずれる。
   -------------------------------------------------------------------------- */
.drink-row {
  display: flex;
  align-items: center;
  gap: 12px;
  /* 下線 1px は箱の内側。下の余白から 1px 返して 96 / 78 / 52 を守る */
  padding: 12px 0 11px;
  border-bottom: 1px solid var(--border);
  color: inherit;
  text-decoration: none;
}
.drink-row__img {
  flex: none;
  width: 72px;
  height: 72px;
  border-radius: 8px;
  object-fit: cover;
}
.drink-row__body {
  flex: 1 0 0;
  /* min-width: 0 が無いと、長い品名で行が縮まず価格が右へ押し出される */
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.drink-row__name {
  margin: 0;
  font-size: 16px;
  font-weight: 400;
  line-height: 28px;
  letter-spacing: 0;
}
.drink-row__note {
  margin: 0;
  font-size: 14px;
  line-height: 22px;
  color: var(--text-muted);
}
.drink-row__price {
  flex: none;
  /* 桁が増えても左の文字が動かないように幅を決め打ちにする（設計どおり） */
  width: 64px;
  text-align: right;
  font-size: 16px;
  font-weight: 700;
  line-height: 28px;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
/* 売り切れの品は押せない。行ごと薄くして、価格の代わりに理由を出す */
.drink-row.is-soldout { opacity: .45; pointer-events: none; }

/* --------------------------------------------------------------------------
   31-4. サービスのタイル（暗/サービスのタイル 112x112）

   ★ 3 列に並べると 112×3 ＋ 間 12×2 = 360 で、本文の幅 342 に収まらない。
     画面（暗03）側は 106x112 で置かれているので、幅はグリッドに決めさせる。
     部品の 112 は「単体で置いたときの大きさ」であって、3 列のときの幅ではない。
   -------------------------------------------------------------------------- */
.svc-grid {
  display: grid;
  /* ★ minmax(0, 1fr) と書くこと。repeat(3, 1fr) だと各マスの最小幅が
     「中身の幅」になり、いちばん長い札（スタッフを呼ぶ）のマスだけ広がる。
     実際 124 / 97 / 97 と不揃いになった。設計は 3 つとも 106px。

     ★ はみ出しは、はみ出させずに解いた（2026-09-06 に直した）。
       もとは「札のほうがはみ出すのが正しい」と書いていたが、
       設計は「スタッフを呼ぶ」だけ 14px にして 1 行に収めている。
       ほかの品名も折り返せるようにしたので、いまはどれも収まる。 */
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px 12px;
}
.svc-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  /* ★ button は「中身の幅」に縮む。block や flex にしても伸びない。
     タイルは 1 つずつ form で包んであり（form は入れ子にできないため）、
     マス目を取っているのは form のほう。width: 100% を書かないと、
     3 列の枠は 106px なのにボタンだけ 44px という見た目になる。 */
  width: 100%;
  /* 中身は 32 + 8 + 28 = 68。112 との差 44 を上下 22 ずつで分ける */
  height: 112px;
  /* ★ button が既定で持つ左右 6px を消す。
     これが残っていると、106px のタイルの中身が 94px になり、
     98px の「スタッフを呼ぶ」が入らずに 2 行へ折り返す。
     設計のタイルに横の余白は無く、札はタイルの幅いっぱいに中央ぞろえ。
     border: 0 だけでは消えない（padding は別の指定）。 */
  padding: 0;
  border: 0;
  border-radius: 8px;
  /* ★ タイルは本文の地より「暗い」（設計 暗03）。
     本文が --bg-elevated（#202020）で、タイルが --bg（#141414）。
     カードは面を明るくするのがふつうだが、この画面は逆で、
     押せるところが窪んで見える。2026-09-06 まで --surface（#232323）を
     敷いていたので、明暗が設計と反対だった。 */
  background: var(--bg);
  color: var(--text);
  font: inherit;
  font-size: 16px;
  /* font: inherit のあとに書くこと。先に書くと inherit に戻される */
  font-weight: 500;
  line-height: 28px;
  text-align: center;
  text-decoration: none;
  /* ★ nowrap をやめた（2026-09-06）。
     サービスの品名は店が管理画面から変えられるので、
     長い名前が来るとタイルからはみ出していた。
     折り返せば 2 行まではタイルに収まる（32 + 8 + 56 = 96 < 112）。
     設計に載っている 7 つはどれも 1 行に収まるので、見た目は変わらない。

     ★ anywhere ではなく break-word。
       anywhere は「最小幅の計算」まで変えるので、
       収まるはずの札まで折り返す。実際「スタッフを呼ぶ」は
       98px でタイル 106px に収まるのに 2 行になった。
       break-word なら、本当にはみ出すときだけ折れる。 */
  overflow-wrap: break-word;
  cursor: pointer;
}

/* 「スタッフを呼ぶ」だけ小さく太く（設計 暗03）。

   ★ 理由は長さです。16px だと 112px になり、106px のタイルからはみ出す
     （実測 6px）。設計はここだけ 14px Bold にして 1 行に収めています。
     ほかの品と違い、この札は店が変えないので値を決め打ちにできます。 */
.svc-tile--call {
  font-size: 14px;
  font-weight: 700;
  line-height: 1.6;
}
.svc-tile .ic { width: 32px; height: 32px; color: var(--accent); }
.svc-tile:active { background: var(--bg-elevated); }

/* --------------------------------------------------------------------------
   31-5. 伝票（暗/伝票の行 342x52 ／ 暗/合計行 342x60）

   ★ 金額の色が 3 か所で違う。設計どおりなので揃えないこと。
       品の行     白      … 何を頼んだかを読む行
       合計       きつね  … いちばん見たい数字
       品の価格   きつね  … メニュー側（押せるものの値段）
   -------------------------------------------------------------------------- */
/* 伝票の画面だけ左右 24px。本文の幅が 390 − 48 = 342 になる（設計 暗04） */
.bill-page { padding-inline: 24px; }

/* 伝票の画面は、タブ帯の下を 32px 空ける（設計 暗04 の本文 pt-32）。
   .theme-night .page__body が全画面ぶんの 16px を持っているので、
   差の 16px をここで足す。
   ★ page__body 側を 32 にしないこと。メニュー（暗01）は 16 が正しく、
     全画面が下がる。上の余白は画面ごとに違う（暗01=16 / 暗03=24 / 暗04=32）。 */
.bill-page { padding-block-start: 16px; }

/* 伝票の節見出しだけ、左右を 40px 内側に入れる（設計 暗04 の 87:3716）。
   ★ 見出しが中身より内側に入るのは、ふつうとは逆です。
     設計にそう描かれているのでそのまま実装しています。
     やめるならこの padding-inline を消すだけで、明細の位置は動きません。

   ★ 上の余白は 0 に戻す。
     .section-title は自前で上に 32px 持っているので、
     上の padding（16 + 16 = 32）と足されて 64px になっていた。
     設計はタブ帯の下 32px でこの見出しが始まる。 */
.bill-page .section-title {
  margin-block-start: 0;
  padding-inline: 40px;
}

/* --------------------------------------------------------------------------
   31-7. 品を選ぶモーダル（設計「暗05 トッピングを選ぶ」）

   幅 342（390 − 24×2）、角丸 16、上下は画面に対して中央。
   後ろのメニューは 30% の覆いとぼかしで沈める。
   -------------------------------------------------------------------------- */
.sheet-modal {
  width: 342px;
  max-width: calc(100vw - 48px);
  /* 高さは中身しだい。ただし画面からはみ出さない。
     設計の 722px は「中身がこれくらいのとき」の実測であって、決め打ちの高さではない */
  max-height: calc(100dvh - 96px);
  padding: 0;
  border: 0;
  border-radius: 16px;
  background: var(--surface);
  color: var(--text);
  overflow: hidden;
}

/* ::backdrop は dialog の後ろに敷かれる面。
   ここをぼかすと、後ろの要素に filter を掛けずに済む。
   .page に filter を掛けると position: fixed のカートバーが
   その中に閉じ込められて動き、画面がガタつく */
.sheet-modal::backdrop {
  background: rgba(0, 0, 0, .3);
  backdrop-filter: blur(4px);
}

/* 閉じる（×）。写真の上に重なるので、丸い面を敷いて字を浮かせる。

   44px あるのは、指で押す的の大きさ（--tap は 48 だが、
   ここは写真を隠したくないので少し小さくしてある）。
   position: absolute の基準は .sheet-modal（dialog）そのもの。 */
.sheet-modal { position: relative; }
.sheet-modal__close {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  /* 写真は明るいものも暗いものもある。どちらでも読めるよう、地は必ず敷く */
  background: rgba(20, 20, 20, .6);
  color: #ffffff;
  cursor: pointer;
}
.sheet-modal__close .ic { width: 22px; height: 22px; }
.sheet-modal__close:active { background: rgba(20, 20, 20, .8); }

/* 中身は商品ページをそのまま入れているので、縦に長くなればここがスクロールする */
.sheet-modal__body {
  max-height: calc(100dvh - 96px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* モーダルの中では、商品ページの「メニューに戻る」と外側の余白は要らない。
   閉じるのは やめる ボタンと Esc と背面のタップ。

   下の 18px は設計どおり（本文 509 の中で、ボタンの列が 435 + 56 = 491 まで）。
   これが無いとボタンが箱の底に貼り付いて、切れているように見える。 */
.sheet-modal__body .container { padding: 0 18px 18px; }
.sheet-modal__body .back-link { display: none; }

/* ★ 写真はモーダルの上辺いっぱいに出す（設計は 342x213）。

   商品ページの写真は .card の中にあり、その .card は 18px の余白を持つ
   .container の中にいる。そのままだと写真の左右に 18px の隙間が空いて、
   角丸のモーダルの中に小さい写真が浮いた見た目になる。
   余白のぶんだけ外へ引っぱり出して、上辺いっぱいに戻す。 */
.sheet-modal__body .card {
  margin: 0 -18px;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.sheet-modal__body .item-photo { border-radius: 0; }
/* 品名と価格は写真の下、左右 18px（設計の「品名と価格」は x=18） */
.sheet-modal__body .card__body { padding: 18px; }

/* ★ 選択肢の箱。設計（暗05）でスクロールするのは<b>ここだけ</b>。

   設計の「トッピング」は 306x190 の枠で、中に 56px の行が 6 つ入っている。
   3 行と少しだけ見えていて、下が切れていることで「まだ下にある」と伝えている。
   スクロールバーもこの枠の中（右端 6px）に出る。

   モーダル全体をスクロールさせると、品名も写真もボタンも一緒に流れて、
   いま何を選んでいるのか見失う。選択肢だけが動くほうが迷わない。

   max-height なので、選択肢が 2 つしかない「麺の変更」は
   そのまま全部出る（枠にも届かないので何も起きない）。 */
/* --------------------------------------------------------------------------
   トッピングを選ぶ（設計「暗05」）— 選択肢の行

   ★ ここは 2026-09-06 に設計へ寄せ直しました。
     それまでは 1 行ずつ枠で囲んだカード（.choice の既定）で、設計とは別物でした。
       行の高さ 48（設計 56）／ 1px の枠と角丸あり（設計は枠なし・区切り線）
       チェックは 20px のブラウザ既定（設計は 24px の四角）
     「よく見ると全然違う」と言われたのはここです。
   -------------------------------------------------------------------------- */
.sheet-modal__body .choice-list {
  max-height: 190px;
  overflow-y: auto;
  /* 設計のバーは箱の右端 6px。中身とぶつからないよう、その幅を余白で空けておく。
     スマホのバーは中身の上に浮いて出る（幅を取らない）ので、
     これを入れないと選択肢の文字の上にバーが重なる */
  padding-right: 10px;
}

/* 行。枠で囲まず、区切り線だけで分ける（設計 170:3513） */
.sheet-modal__body .choice {
  min-height: 56px;
  /* 左 24 ／ 右 26。左右で 2px 違うのは設計どおり。
     右はスクロールバーのぶんだけ内側に寄っている */
  padding: 12px 26px 12px 24px;
  gap: 12px;
  border: 0;
  border-radius: 0;
  background: var(--surface);
}
.sheet-modal__body .choice + .choice {
  margin-top: 0;
  border-top: 1px solid var(--border);
}
/* 選択中の行は、きつね色を 10% だけ敷く。
   枠線で示すと、押せる的が増えたように見えて他の行と読み分けにくい */
.sheet-modal__body .choice:has(input:checked) {
  border-color: transparent;
  background: color-mix(in srgb, var(--accent) 10%, var(--surface));
}
.sheet-modal__body .choice:hover { border-color: transparent; }

/* チェック。ブラウザ既定の見た目を捨てて、設計の 24px の四角にする。
   ★ 印は白ではなく黒（#141414）。きつね色の上に置くので、
     白だと沈む。書き出しの stroke がそうなっている。 */
.sheet-modal__body .choice input {
  appearance: none;
  width: 24px;
  height: 24px;
  margin: 0;
  border: 1.5px solid var(--text-muted);
  border-radius: 4px;
  background: transparent;
  cursor: pointer;
}
/* 1 つだけ選ぶ組は丸にする。設計に描かれているのは複数選べる
   トッピングだけだが、四角のままだと「いくつでも選べる」に見える */
.sheet-modal__body .choice input[type="radio"] { border-radius: 50%; }
.sheet-modal__body .choice input:checked {
  border-color: var(--accent);
  background-color: var(--accent);
  /* 書き出し（14x14 / 線幅 1.86667 / 端は丸）をそのまま data URI に。
     外部の読み込みを増やさず、店内にネットが無くても崩れない */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14' fill='none'%3E%3Cpath d='M2.33333 7.29167L5.54167 10.5L11.6667 4.08333' stroke='%23141414' stroke-width='1.86667' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
}

.sheet-modal__body .choice__name {
  flex: 1 0 0;
  min-width: 0;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.4;
}
/* 金額は右端でそろえる。幅を決め打ちにしているのは、
   「＋¥180」と「＋¥1,200」で桁が動いても列がぶれないようにするため */
.sheet-modal__body .choice__price {
  flex: none;
  width: 80px;
  text-align: right;
  font-size: 15px;
  font-weight: 700;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}

/* WebKit（iOS Safari / Android Chrome）用。設計どおり 6px。

   ★ scrollbar-width / scrollbar-color を一緒に書かないこと。
     新しい Chrome は標準の指定があるとそちらを優先し、
     ::-webkit-scrollbar の指定を丸ごと無視する。
     実際それでバーが 0px（浮いて出るだけ）になっていた。 */
.sheet-modal__body .choice-list::-webkit-scrollbar { width: 6px; }
/* ★ 溝にも色を置くこと（設計 173:4130 は #3d3d3d）。
     透明にすると「下にまだ続いている」ことが、つまみを見つけるまで分からない。
     上下 8px 空けているのも設計どおりで、箱の角丸から浮かせるため。 */
.sheet-modal__body .choice-list::-webkit-scrollbar-track {
  background: #3d3d3d;
  border-radius: 3px;
  margin-block: 8px;
}
/* ★ つまみは明るい灰（#c9c9c9）。
     --border-strong（#444）だと地の #232323 との差が小さく、
     暗い店内では動かせるものだと気づけない。 */
.sheet-modal__body .choice-list::-webkit-scrollbar-thumb {
  background: #c9c9c9;
  border-radius: 3px;
}

/* Firefox には ::-webkit-scrollbar が無いので、標準の指定で細くする。
   @supports で囲って、WebKit 側には届かないようにしてある */
@supports not selector(::-webkit-scrollbar) {
  .sheet-modal__body .choice-list {
    scrollbar-width: thin;
    /* WebKit 側と同じ色（つまみ #c9c9c9 ／ 溝 #3d3d3d）。
       ここだけ透明にしておくと、Firefox でだけ溝が見えなくなる */
    scrollbar-color: #c9c9c9 #3d3d3d;
  }
}

/* 数量（設計「暗/数量の行」129:3927）。

   ★ 既定の .qty（44px の連結した長丸）とは別物。
     あちらは 1 つの枠の中に −／数／＋ が並ぶ形で、
     設計は 32px の丸が 2 つ離れて置かれる。
     ＋ だけきつね色なのは「増やすほうが主」だから。
     31-10 節（時価の品）と同じ形なので、見た目もそろえてある。 */
.sheet-modal__body .qty {
  gap: 10px;
  border: 0;
  border-radius: 0;
  background: transparent;
  overflow: visible;
}
.sheet-modal__body .qty__btn {
  width: 32px;
  height: 32px;
  border: 1px solid var(--border);
  border-radius: 50%;
  color: var(--text-muted);
  font-size: 16px;
  font-weight: 700;
  line-height: 1;
}
/* 2 つ目のボタンが「増やす」。順番で決めているのは、
   マークアップに印を足さずに済ませるため（−／数／＋ の並びは動かさない） */
.sheet-modal__body .qty__btn:last-child {
  border-color: var(--accent);
  color: var(--accent);
}
.sheet-modal__body .qty__btn:hover { background: var(--surface-2); }
.sheet-modal__body .qty__value {
  width: 24px;
  min-width: 24px;
  font-size: 16px;
  font-weight: 700;
}
/* 数量の行の右端に出す金額（設計は幅 72・右そろえ）。
   下のボタンにも同じ金額が出るが、選択肢を選んでいる最中は
   ボタンまで目が届かない。増減させた手のすぐ横で変わるほうが早い */
.qty-amount {
  flex: none;
  width: 72px;
  text-align: right;
  font-size: 16px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* 商品の写真。設計（暗05）の見出し写真は 342 : 213 */
.item-photo {
  display: block;
  width: 100%;
  aspect-ratio: 342 / 213;
  object-fit: cover;
  border-radius: 12px 12px 0 0;
}

/* ★ やめる／注文に追加 の 2 つ並び（設計 100 : 196、間 10）。

   商品ページのボタンは .cart-bar（画面下に貼り付く帯）の中にいて、
   左右に 16px の余白と枠線を持っている。モーダルの中では
   その 32px ぶん幅が減り、「注文リストに追加 ¥1,180」が入りきらずに
   右へはみ出していた（実測 102 + 10 + 257 が 274 の中）。

   帯としての飾りを外し、幅を本文いっぱい（306px）に戻す。 */
.sheet-modal__body .cart-bar {
  padding: 0;
  background: transparent;
  backdrop-filter: none;
  border-top: 0;
  /* 貼り付かせない。設計ではボタンは本文の流れの中にあり、その下に 18px 空く。
     sticky のままだと箱の底に貼り付いて、下の余白が生まれない。
     選択肢の箱（.choice-list）が高さを持つので、本文全体は長くならない */
  position: static;
}
.sheet-modal__foot {
  display: flex;
  gap: 10px;
  margin-top: 24px;
}
/* btn--block の width:100% を打ち消し、縮められるようにする。
   min-width: 0 が無いと、flex は中身の幅より小さくならない */
.sheet-modal__foot .btn {
  flex: 1 1 0;
  min-width: 0;
  width: auto;
  padding-inline: 12px;
}
.sheet-modal__foot .btn--outline { flex: 0 0 100px; }

/* ★ ここにあった .svc-grid--calls と .svc-tile--call を消しました（2026-09-06）。
     どちらもテンプレートから 1 度も使われていませんでした。

     残しておくと実害が出ます。svc-tile--call は
     「スタッフを呼ぶ」の札を小さくする指定として作り直したので、
     ここに古い background が残っていると、
     ファイルの下にあるぶん<b>あとから読まれて上書きされます</b>。
     設計では地と同じ #141414 なのに、1 枚だけ #202020 で浮くことになります。 */

/* --------------------------------------------------------------------------
   31-6. ホール画面に出る「お客さまからの呼び出し」

   ★ ここは .theme-night ではなく .theme-snow（白基調）の上に乗る。
     ホールは店員がスマホや卓上端末で見る画面で、お客さまの画面とは配色が違う。
     色は変数経由でしか触らないこと。直接 #dd9a4e と書くと、
     白い地の上でだけコントラストが足りなくなる。
   -------------------------------------------------------------------------- */
.callbar {
  display: flex;
  flex-direction: column;
  gap: 1px;
  margin-bottom: var(--sp-5);
  border: 1px solid var(--accent);
  border-radius: var(--r-md);
  background: var(--border);
  overflow: hidden;
}
.callbar__row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: var(--accent-soft);
}
.callbar__mark { display: inline-flex; color: var(--accent); flex: none; }
.callbar__mark .ic { width: 24px; height: 24px; }
.callbar__text { flex: 1; min-width: 0; }
.callbar__text b { margin-right: 6px; }
/* 待たせている時間。数字が伸び縮みしても右の並びが動かないよう桁を揃える */
.callbar__waited {
  flex: none;
  color: var(--text-muted);
  font-size: 14px;
  font-variant-numeric: tabular-nums;
}

.bill-row {
  display: flex;
  align-items: baseline;
  gap: 12px;
  /* 左右 8px（設計 暗/伝票の行 82:3455）。16px にすると、
     品名の始まりと金額の終わりが 8px ずつ内側に寄る */
  padding: 12px 8px;
  font-size: 16px;
  font-weight: 400;
  line-height: 28px;
}
.bill-row + .bill-row { border-top: 1px solid var(--border); }

/* 明細のいちばん下にも線を引く（設計 暗04 の 148:4045）。

   ★ 線は「明細の締めくくり」であって「合計の飾り」ではない。
     もとは .bill-total の border-top で描いていたので、
     線が合計にくっついて、設計にある 32px の間が消えていた。
     線を明細側に移し、合計は間を空けてから置く。 */
.bill-lines .bill-row:last-child { border-bottom: 1px solid var(--border); }

/* 行が 1 本も無いときだけ畳む。

   注文が 0 件でもテーブルチャージの行は出るので、ふつうはここに来ない。
   来るのは「注文もチャージも無い」＝チャージ 0 円の店の、頼む前だけ。
   そのとき締めの線だけが 1 本浮くので、箱ごと消す。

   ★ :empty ではなく :not(:has(*))。
     :empty は改行や字下げの空白も子として数えるので、
     Thymeleaf が残す空白に一致せず効かない（この CSS 内に同じ手当ての先例が 2 つある）。 */
.bill-lines:not(:has(*)) { display: none; }

/* まだ 1 品も頼んでいないことを言う一行（設計 暗30）。

   ★ 上下の間は 32 で、明細・合計・但し書きと同じ刻み。
     ここだけ違う数字にすると、伝票の縦のリズムがこの行で崩れる。
   ★ 色は --text-faint（設計の 暗/かすれ）。
     補足（#9e9e9e）より弱くするのは、これが金額でも品名でもなく
     「いま中身が無い」という状態の説明だから。 */
.bill-empty {
  margin: 32px 0 0;
  text-align: center;
  font-size: 16px;
  line-height: 28px;
  color: var(--text-faint);
}
.bill-row__name { flex: 1 0 0; min-width: 0; }
/* 選んだ内容。承りました（暗07）では品名と同じ行に括弧付きで続く */
.bill-row__note,
.bill-row__state { font-size: 14px; color: var(--text-muted); }
.bill-row__state { margin-left: 8px; }

/* 伝票の明細だけ、トッピングを品名の下に置く（設計 暗29）。

   ★ 承りました（暗07）には効かせない。
     あちらは「（米粉そば ／ チーズ）」と括弧付きで品名に続く形が設計で、
     .bill-row__note を共有しているだけ。ここを全体に効かせると、
     暗07 の括弧書きが 2 行目に落ちる。

   ★ 品名と個数は .bill-row__title で包んである。
     包まずに縦並びにすると、「肉玉米粉そば」と「×2」が別の行に分かれる。 */
.bill-lines .bill-row__name {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.bill-lines .bill-row__note {
  /* 14px の文字に 28px（品名と同じ行送り）は開きすぎる。
     設計は 1.6（＝22.4px） */
  line-height: 1.6;
}
.bill-row__amount {
  flex: none;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.bill-total {
  display: flex;
  align-items: baseline;
  gap: 12px;
  /* 明細との間は 32px（設計 暗04 の本文 gap）。
     ★ 線はここで引かない。明細の最後の行が持っている（.bill-lines 参照）。
       ここで border-top を引くと、線が合計にくっついて間が消える */
  margin-top: 32px;
  padding: 16px 8px;
  font-size: 20px;
  font-weight: 700;
  /* ここだけ行送りが 1.4。20 × 1.4 = 28 で、上の品の行（16 × 1.75 = 28）と
     実際の高さがそろうように合わせてある。1.75 のままにすると 35px になり、
     行のリズムが 7px 崩れる */
  line-height: 28px;
}
.bill-total__label { flex: 1 0 0; min-width: 0; }
.bill-total__amount {
  flex: none;
  color: var(--accent);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* 合計の下の但し書き。2 行に収まる長さで書くこと */
.bill-note {
  margin: 32px 0 0;
  font-size: 14px;
  line-height: 22px;
  color: var(--text-muted);
}

/* --------------------------------------------------------------------------
   31-8. 注文内容の確認（設計「暗06 注文内容の確認」）

   ★ 伝票（暗04）とは行の形が違う。揃えないこと。
       伝票   … 1 行 1 品。金額を読むだけ。罫線で区切る
       確認   … まだ直せる画面。面（#232323）を敷いて「触れるもの」に見せ、
                行ごとに「変更」を持つ

     同じ「品名と金額の行」でも、読む画面と直す画面で役目が違う。
   -------------------------------------------------------------------------- */
.order-list {
  display: flex;
  flex-direction: column;
  margin-top: var(--sp-4);
}

/* 行そのものが <details>。開くと下に −／＋／削除 が出る。
   ★ 「変更」だけを <details> にしてはいけない。
     開いた操作が右の列の中に入り、品名の幅が 250 → 110 に潰れる
     （長い品名が 4 行に折り返す）。2026-09-06 に実測して直した。 */
.order-row {
  background: var(--surface);
}
.order-row__summary {
  display: flex;
  gap: 12px;
  /* 上下は 16、左右は 20。伝票の行（12/16）より広いのは、
     ここが「押せる行」だから。指が触れる余白を持たせてある */
  padding: 16px 20px;
  cursor: pointer;
  /* Safari が付ける三角を消す。list-style だけでは消えない */
  list-style: none;
}
.order-row__summary::-webkit-details-marker { display: none; }
/* 罫線は行と行のあいだにだけ。いちばん上と下には引かない
   （面の縁と二重になって、線が太く見える） */
.order-row + .order-row { border-top: 1px solid var(--border); }
.order-row:first-child { border-radius: 8px 8px 0 0; }
.order-row:last-child { border-radius: 0 0 8px 8px; }

/* この品を消す「−」（設計 暗06 / 383:2187）。

   ★ 押せる面は行の高さいっぱい。
     見た目の丸は 32px のままだが、的が 32×32 しかないと
     指がずれたときに何も押せない。行の高さに合わせて伸ばしている。 */
.order-row__del {
  flex: none;
  display: flex;
  align-self: stretch;
}
.order-row__delbtn {
  align-self: stretch;
  width: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}
.order-row__delmark {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  font-size: 16px;
  line-height: 1;
  /* 隣の「変更」と同じきつね色（2026-09-06）。

     ★ 白っぽい灰色（#E8E8E8）から変えた理由
       このプロジェクトでは<b>アクセント色は「押せるもの」にだけ</b>使う、
       と決めてある（CLAUDE.md）。灰色の丸は、同じ行の中で
       きつね色の「変更」と並ぶと<b>飾りに見えます</b>。
       押せるものだけが同じ色をしていれば、色そのものが
       「これは押せる」という説明になります。

     ★ 線と文字で 2 回書かない
       ここで 1 つ決めて両方から参照する。別々に書くと、
       片方だけ変えたときに取り残される。 */
  --del-ink: var(--accent);
  border: 1px solid var(--del-ink);
  color: var(--del-ink);
}

.order-row__main {
  flex: 1 0 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.order-row__name {
  font-size: 16px;
  font-weight: 500;
  line-height: 1.5;
  /* 長い品名で折り返しても、右の金額に食い込まないようにする */
  overflow-wrap: anywhere;
}
.order-row__opts {
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-muted);
}

.order-row__side {
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.order-row__amount {
  font-size: 16px;
  font-weight: 700;
  line-height: 1.5;
  text-align: right;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* 「変更」。設計は 56x28 の枠線ボタン。

   ★ 押した先が設計に無いので、その場で −／＋／削除 を開く形にした。
     商品ページへ飛ばすと、あちらは「カートに入れる」しか持っていないので
     同じ品がもう 1 行増える。直したいのに増えるのは、直せないより悪い。
     JavaScript は足していない（<details> だけで開閉する）。

   ★ これ自体は押せる部品ではない（行全体が summary）。
     見た目だけを設計に合わせ、「ここを押せばいい」と言わせている。 */
.order-row__editbtn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 28px;
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--accent);
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
}
.order-row[open] .order-row__editbtn {
  background: var(--surface-2);
}

/* 開いたときの操作。行の下いっぱいを使う。
   上に余白を作らないのは、summary の下 16px がすでに空いているため */
.order-row__controls {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 20px 16px;
}
.order-row__qty {
  min-width: 2.5em;
  text-align: center;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* 送信ボタン（設計「暗06」の下に固定された帯 390x124）。

   ★ .cart-bar（本文の中に置く帯）ではなく、画面の幅いっぱいに置くこと。
     本文の中に入れると、container の左右 16px の内側にもう 16px 入って
     ボタンが 32px 細くなる。設計より痩せて見えるうえ、
     同じ画面のカードと右端がそろわない。
     レイアウトの .cartbar（注文へ進む）と同じ置き方にそろえてある。

   ★ この帯とレイアウトの .cartbar は同時に出ない。
     注文リストの画面では .cartbar を出さないようにしてある
     （layout/customer.html）。両方出ると「注文へ進む」と
     「この内容で注文する」が縦に並び、どちらを押すのか分からなくなる。 */
.submitbar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  max-width: var(--page-max);
  margin-inline: auto;
  z-index: 30;
  /* 下 32px は設計どおり。端末の下端のくぼみぶんを足す */
  padding: 24px 16px calc(32px + env(safe-area-inset-bottom, 0px));
  background: var(--bg);
  border-top: 1px solid var(--border);
  /* ボタンが 2 つ入る（注文する／取り消す）。間隔 12px は設計どおり。
     0 だと 2 つが接して 1 つの塊に見え、送るつもりで取り消す事故になる */
  display: flex;
  flex-direction: column;
  gap: 12px;
}
/* 帯のぶん、本文の下に逃げ場を作る。
   これが無いと最後の行がボタンの下に隠れ、金額が読めないまま押すことになる。
   ★ ボタンが 2 つになったぶん増やしてある（24+56+12+56+32 = 180）。
     ここを直し忘れると、最後の行が帯の下に潜る */
.submitbar-room { padding-bottom: 200px; }

/* --------------------------------------------------------------------------
   31-9. 店舗版スマホ注文（2026-09-06）

   店員がスマホ・iPad から番号を選んで注文を受ける画面。
   お客さまの夜テーマをそのまま着る（同じメニュー画面を使い回すため、
   ここだけ白基調にすると、番号を押した瞬間に配色が変わって別のアプリに見える）。
   -------------------------------------------------------------------------- */

/* 席の帯の高さ。
   ★ ここ 1 か所で決めること。
     カテゴリの帯（.tabs）が「上に何本あるか」を数えて位置を決めるので、
     2 か所に書くと、片方だけ変えたときに黙って重なる。
   ★ .staffbar の中ではなく :root に置く理由
     数える側（.page--seated）は帯の親なので、
     帯の中で定義した変数は見えない（変数は子孫にしか継承されない）。 */
:root { --staffbar-h: 72px; }

/* いま何番を開いているかの帯。品を選んでいる最中も貼り付いたまま。
   店員は卓を渡り歩くので、「これはどの卓だったか」が
   この画面でいちばん起きやすい事故 */
.staffbar {
  position: sticky;
  top: 0;
  z-index: 25;
  display: flex;
  align-items: center;
  gap: 12px;
  /* ★ width:100% を明示する。
     親（.page）の並べ方によっては flex コンテナが中身の幅まで縮み、
     3 つの文字が中央に寄った短い帯になる（実測で 390 → 253px）。
     すぐ下のタブ帯（.tabbar）が同じ理由で同じ指定を持っている。 */
  width: 100%;
  max-width: var(--page-max);
  margin-inline: auto;
  /* 高さ 72px（設計 暗/席の帯 410:4274）。
     ★ 43px だと、下の大分類タブ（102px）に対して細すぎて
       「画面の一部」に見える。72 あると、番号がひとつの塊として立つ。
       店員が見失ってはいけない情報なので、帯として成立させる。

     ★ 高さは --staffbar-h（すぐ上で定義）から引くこと。
       カテゴリの帯（.tabs）が「上に何本あるか」を数えて位置を決めるので、
       ここを直接書くと、変えたときにあちらが取り残されて重なる。
     env(safe-area-inset-top) はノッチのぶん。
     min-height にしているのは、そこを足しても中身が潰れないようにするため */
  min-height: calc(var(--staffbar-h) + env(safe-area-inset-top, 0px));
  padding: calc(8px + env(safe-area-inset-top, 0px)) 16px 8px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  font-size: 13px;
}
.staffbar__back,
.staffbar__out {
  flex: none;
  color: var(--accent);
  text-decoration: none;
  font-weight: 700;
}
.staffbar__out { color: var(--text-muted); font-weight: 400; }
/* 番号がいちばん強い。ここを読み違えると別の卓に送ることになる */
.staffbar__seat {
  flex: 1 0 0;
  min-width: 0;
  text-align: center;
  /* 16px は設計どおり。左右の 13px より一段大きくして、
     目が先にここへ行くようにしてある */
  font-size: 16px;
  font-weight: 700;
  color: var(--text);
}

/* 上下 40px、要素の間は 32px（設計 店01 409:4228）。

   ★ 間隔を 32 で通しているのは、この画面が「押す番号を探す」ためだけの
     ものだからです。見出し・札・説明・盤面の 4 つしか無いので、
     詰めるより離したほうが、番号の塊がひとまとまりに見えます。 */
/* ★ 画面いっぱいまで暗いままにすること（2026-09-23）。

     この 3 画面（番号の盤面・人数・番号の移動）は
     <body class="theme-snow">（明るい）の中に
     <main class="theme-night staff-order">（暗い）を置いた作りです。
     つまり<b>暗いのは main の高さぶんだけ</b>で、
     中身より画面が高いと、その下に body の白が出ます。

     「人数」の画面は中身が 430px しかありません。
     店舗端末はタブレットなので縦は 768〜1024px あり、
     <b>下の半分が白い板になっていました</b>（実測 44%）。
     薄暗い店内でこれを手渡すことになります。

   ★ 見た目では気づけません。開発中は画面が短いと下まで埋まって見えるうえ、
     スクロールしないページなので「白い帯」が出るのは実機の高さだけです。
     ポートフォリオ用に 1372x772 で撮って初めて出ました。 */
.staff-order { padding-block: 40px; min-height: 100vh; }

/* ★ 間隔を持つのは .container のほう。
     .staff-order（main）の直下は .container 1 つだけなので、
     そちらに gap を付けても効かない。 */
.staff-order > .container {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

/* フラッシュの枠は、中身が空でも出る（中の 3 つがそれぞれ条件付きのため）。
   そのままだと gap を 1 つ余分に生んで、見出しが 32px 下がる。
   ★ :empty ではなく :not(:has(*))。:empty は改行や字下げの空白も
     子として数えるので、Thymeleaf が残す空白に一致しない。 */
.staff-order > .container > .stack-sm:not(:has(*)) { display: none; }
.staff-order__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  /* 左右 8px は設計どおり。マスは内側に 16px 持つので、
     見出しの文字がマスの中の文字と近い位置で始まる */
  padding-inline: 8px;
}
.staff-order__title { margin: 0; font-size: 20px; font-weight: 700; }
.staff-order__out { font-size: 13px; color: var(--text-muted); text-decoration: none; }
/* 余白は親の gap（32px）が持つ。ここで margin を足すと、
   要素ごとに間隔がばらつく */
.staff-order__lead { margin: 0; color: var(--text-muted); font-size: 14px; }
.staff-order__note { margin: 0; font-size: 13px; color: var(--text-muted); }
.staff-order__actions { display: flex; flex-direction: column; gap: 12px; }

/* 番号の盤面。片手で押す前提なので 2 列。
   1 列だと画面に 4 つしか入らず、10 卓ある店ではスクロールが要る。
   3 列にすると 1 マスが 110px を切り、人数と時刻が入らない */
.seat-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  /* 行間 24・列間 12（設計 店01）。
     ★ 縦横を同じにしないこと。同じにすると 2×2 の塊に見えて、
       どれが「横に並んだ 2 つ」なのか分からなくなる。
       行間を広げると、左右の 2 つが 1 組として読める */
  gap: 24px 12px;
}
.seat {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-height: 96px;
  padding: 16px;
  border-radius: 12px;
  text-decoration: none;
  color: var(--text);
}
/* 使用中はきつね色の枠。押せるもの＝アクセント色、の決まりに合わせてある。
   空席は枠だけにして、使用中の卓が先に目に入るようにする */
.seat--busy { background: var(--surface); border: 1px solid var(--accent); }
.seat--free { background: var(--bg); border: 1px solid var(--border); }
/* お会計待ちの札（卓 3/3。2026-09-07）。バッジだけだと小さな画面で
   埋もれるので、札の縁も同じ意味の色にする（ホールの badge--stop と同系） */
.seat--closing { border-color: var(--danger); background: var(--danger-soft); }
.seat__name { font-size: 17px; font-weight: 700; overflow-wrap: anywhere; }
.seat__meta { font-size: 13px; color: var(--text-muted); }
.seat__dot { opacity: .5; }
.seat__amount {
  margin-top: auto;
  font-size: 15px;
  font-weight: 700;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}
.seat__free { margin-top: auto; font-size: 13px; color: var(--text-muted); }

/* 人数の選択。数字だけの大きなボタンにして、選ぶ→決定の 2 手にしない */
.guest-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}
.guest {
  min-height: 72px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
  color: var(--text);
  font-size: 22px;
  font-weight: 700;
  cursor: pointer;
}
.guest:active { background: var(--bg-elevated); border-color: var(--accent); }

/* 飲み物の見出し（設計 暗08 / 166:4013）。

   粉もの（暗05）は写真を 213px の帯で出すが、飲み物はこの 1 行に収める。
   品数が多く写真映えの差も小さいので、大きく出すより
   濃さや数量を早く出したほうが用が済む。
   一覧を行で並べているのと同じ判断。 */
.drink-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 18px 18px 0;
}
.drink-head__img {
  flex: none;
  width: 72px;
  height: 72px;
  border-radius: 10px;
  object-fit: cover;
}
.drink-head__body {
  flex: 1 0 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.drink-head__name {
  margin: 0;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.4;
  /* 長い銘柄（クラフトジン ソーダ など）で価格を押し出さない */
  overflow-wrap: anywhere;
}
.drink-head__note {
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-muted);
}
.drink-head__price {
  flex: none;
  font-size: 18px;
  font-weight: 700;
  color: var(--accent);
  white-space: nowrap;
}

/* 削除の確認（設計 暗26 / 384:4011）。

   ★ 幕は 60%。後ろを完全に隠さないのは、何が消えるのかが
     見えていないと判断できないため。
   ★ 色はトークンから取る。--surface は夜のテーマで #232323 で、
     設計のダイアログの地と同じ値。 */
.confirm {
  width: 302px;
  max-width: calc(100vw - 48px);
  padding: 0;
  border: 0;
  border-radius: 16px;
  background: var(--surface);
  color: var(--text);
}
.confirm::backdrop { background: rgba(0, 0, 0, .6); }
.confirm__box {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 24px;
}
.confirm__title {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.6;
  text-align: center;
}
/* 消そうとしている品の写真（設計 暗26 / 377:2102）。

   ★ 文字だけより速い。「肉玉米粉そば ×1」を読んで確かめるより、
     写真を見るほうが「これで合っている」と分かるのが早い。
     消す操作は取り消せないので、確かめるのが速いほど間違いが減る。

   ★ 幅は決め打ちの 112px。ここは比で伸ばさない。
     ダイアログの幅は端末で変わるが、写真が大きくなるとボタンが
     画面の外へ出る。確かめる材料であって、見せる写真ではない。 */
.confirm__photo {
  display: block;
  width: 112px;
  height: 112px;
  border-radius: 8px;
  object-fit: cover;
}
.confirm__photo[hidden] { display: none; }

.confirm__target {
  margin: 0;
  font-size: 13px;
  line-height: 1.6;
  color: var(--text-muted);
  text-align: center;
}
.confirm__actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
  margin-top: 12px;
}

/* 確認画面の合計は、伝票と違って面を敷いた箱（設計 109:3766）。
   罫線ではなく面で区切るのは、上のカードと地続きに見せないため */
.bill-total--boxed {
  margin-top: var(--sp-4);
  padding: 16px 10px;
  border-top: 0;
  border-radius: 4px;
  background: var(--surface);
}

/* --------------------------------------------------------------------------
   31-10. 時価・おまかせの品（設計「暗21」「暗22」）

   価格が決まっていない品を開いたときの中身。
   モーダルの器（.sheet-modal 342 / 角丸 16）はそのまま使い、
   中身だけこの形に差し替える。

   ★ ふつうの商品ページと形を変えているのは意図的。
     金額の出ない「注文に追加」を他の品と同じ形で並べると、
     いくらか分からないまま頼めてしまう。
     設計でも、主要なのは「スタッフを呼ぶ」のほうになっている。
   -------------------------------------------------------------------------- */
.askstaff .card__body {
  display: flex;
  flex-direction: column;
  /* 設計の本文は 上 22 ／ 左右 18 ／ 下 18、要素の間 14 */
  gap: 14px;
  padding: 22px 18px 18px;
}
.askstaff__name {
  font-size: 20px;
  font-weight: 700;
  line-height: 1.4;
}
.askstaff__desc {
  margin: 0;
  font-size: 14px;
  line-height: 1.75;
  color: var(--text-muted);
}
.askstaff__rule {
  width: 100%;
  height: 1px;
  margin: 0;
  border: 0;
  background: var(--border);
}

/* 注意書き（暗/注意書き）。
   ★ 地の #414141 はトークンに無い一度きりの色。
     --surface（#232323）だとモーダルの面と同じで、囲いが見えなくなる。
     きつね色の枠だけで浮かせると、押せるボタンに見えてしまう。
     「読むもの」だと分かる明るさが要るので、ここだけ実数で置いている。 */
.askstaff__notice {
  padding: 16px;
  border: 1px solid var(--accent);
  border-radius: 8px;
  background: #414141;
  font-size: 16px;
  line-height: 1.75;
  color: var(--text);
}

/* 数量の行。高さ 72、左右 16、上下 12 */
.askstaff__qty {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 72px;
  padding: 12px 16px;
}
.askstaff__qty-label {
  flex: 1 0 0;
  min-width: 0;
  font-size: 16px;
  font-weight: 500;
}
.askstaff__stepper {
  flex: none;
  display: flex;
  align-items: center;
  gap: 10px;
}
/* ★ .qty（44px の連結した長丸）とは別物。
     あちらは 1 つの枠の中に −／数／＋ が並ぶ形で、
     こちらは 32px の丸が 2 つ離れて置かれる。
     設計で ＋ だけきつね色になっているのは「増やすほうが主」だから。 */
.askstaff__step {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 50%;
  background: transparent;
  color: var(--text-muted);
  font-size: 16px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
}
.askstaff__step--plus {
  border-color: var(--accent);
  color: var(--accent);
}
.askstaff__count {
  width: 24px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--text);
  font-size: 16px;
  font-weight: 700;
  text-align: center;
  font-variant-numeric: tabular-nums;
  /* 数字の上下ボタンは出さない。左右の丸で増減するので二重になる */
  appearance: textfield;
}
.askstaff__count::-webkit-outer-spin-button,
.askstaff__count::-webkit-inner-spin-button { appearance: none; margin: 0; }

/* 金額の欄。「—」を置く。
   幅を決め打ちにしているのは、金額が入る品と桁位置をそろえるため */
.askstaff__amount {
  flex: none;
  width: 72px;
  text-align: right;
  font-size: 16px;
  font-weight: 700;
}

/* 下の 2 つ（やめる／注文に追加）。設計は 間 10、やめるは 100px */
.askstaff__row {
  display: flex;
  align-items: stretch;
  gap: 10px;
}
/* ★ flex: 0 0 100px では 103px になった。
     flex アイテムの min-width は既定が auto なので、
     中身（文字＋ボタンの左右余白）のほうが広いと基準値を押しのける。
     幅を直接指定して、伸び縮みを切る。 */
.askstaff__cancel {
  flex: none;
  width: 100px;
  min-width: 0;
  padding-inline: 0;
}
.askstaff__add { flex: 1 0 0; min-width: 0; }

/* 押せない理由。押せないボタンのすぐ下に、小さく置く。
   ここを alert（きつね色の枠）にすると、上の注意書きと 2 つ並んで
   どちらが大事なのか読めなくなる */
.askstaff__why {
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-muted);
}

/* --------------------------------------------------------------------------
   31-9. ご注文を承りました（設計「暗07 注文を承りました」）

   ★ 画面の真ん中に置く。上から積まない。
     ここは読んで終わりの画面で、次の操作は 1 つだけ（メニューに戻る）。
     上詰めにすると、下に何か続くように見えて指が下を探す。
   -------------------------------------------------------------------------- */
.placed {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 24px;
  /* ヘッダーぶんを引いた高さで中央に置く。100dvh にすると
     アドレスバーの出入りで位置が動く端末がある */
  min-height: calc(100dvh - 160px);
  padding-block: var(--sp-6);
  text-align: center;
}

/* 完了マーク（88px の丸に 2px のきつね色、中に 40px のチェック） */
.placed__mark {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 88px;
  height: 88px;
  border: 2px solid var(--accent);
  border-radius: 50%;
  color: var(--accent);
}
.placed__mark .ic { width: 40px; height: 40px; }

/* チェックを線で引く。

   注文が通った瞬間の画面なので、印が「描かれる」ほうが、
   すでにそこにあるより「いま通った」ことが伝わる。

   ★ 仕掛け
     線を「全長ぶんの実線＋全長ぶんの空白」にして、その位置を端までずらすと
     線が隠れる（stroke-dashoffset: 1）。ずらす量を 0 に戻すと、
     根元から先端へ向かって現れる。これが「引いている」ように見える。

   ★ 長さの 1 は SVG 側の pathLength="1" と対になっている。
     あちらが「この線の全長は 1」と宣言しているので、
     ここに実寸（約 38.3）を書き写さずに済む。
     数えた長さを 2 箇所に置くと、チェックの形を直したときに必ずずれる。

   ★ 0.12 秒待ってから引き始める。
     画面が出た瞬間に始めると、描画の途中から見えることがある。
     少し待つと、必ず「何も無いところに線が引かれる」ところから見える。 */
@keyframes placed-check-draw {
  from { stroke-dashoffset: 1; }
  to   { stroke-dashoffset: 0; }
}
.placed__mark .ic path {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: placed-check-draw 520ms cubic-bezier(.65, 0, .35, 1) 120ms forwards;
}

/* 動きを控えめにしたい人の設定（OS 側）を尊重する。
   ここは飾りなので、動かさずに最初から引かれた状態で出す。
   animation: none だけだと stroke-dashoffset: 1 が残って
   チェックが消えたままになるので、0 に戻すことまでが対で必要。 */
@media (prefers-reduced-motion: reduce) {
  .placed__mark .ic path {
    animation: none;
    stroke-dashoffset: 0;
  }
}

.placed__title {
  margin: 0;
  font-size: 22px;
  font-weight: 700;
  line-height: 1.5;
}
.placed__lead {
  margin: 0;
  font-size: 15px;
  line-height: 1.7;
  color: var(--text-muted);
}

/* 承った内容。伝票の行（.bill-row）をそのまま入れる箱 */
.placed__slip {
  width: 100%;
  padding: 12px 8px;
  border-radius: 12px;
  background: var(--surface);
  text-align: left;
}
.placed__slip .bill-row { line-height: 1.75; }

/* ==========================================================================
   33. 厨房ボード — 設計「現01 厨房ボード」552:6627 に合わせる（2026-09-12）
   --------------------------------------------------------------------------
   ※ 番号は 33 だが、置き場所は 32 節の手前。
     32 節（広い画面）は「ファイルのいちばん最後に置くこと」という決まりがあり、
     30 節の寸法より後ろに無いと同じ詳細度で負けるため。

   15 節の .board / .lane / .ticket は 2026-08 に組んだ共通の作りで、
   ホール盤面（.hallboard）と 2 画面で共用しています。
   ここは厨房だけに効く層です。board.html の main に付けた .kitchenboard の
   中でだけ設計の値へ寄せ、共通の定義は 1 行も動かしません
   （CLAUDE.md「立って見る画面を小さく組みたいときは、その画面に絞る」）。

   ★ 色は変数を経由せず直値で書いています。
     var(--border) は .theme-snow で「黒 10%」に定義されていて、
     設計の #e8e8e8 とは別物でした。実効 0.83px のごく薄いグレーになるため、
     枠がほとんど見えません。ホール盤面で同じ取り違えを 3 回したので、
     設計に直値があるものは直値で書く、と決めています。

   ★ 設計と 1 箇所だけ変えています。
     キャンセルの高さ … 設計 40px → 48px。
     CLAUDE.md「タップ領域は 48px 以上（--tap）」は、立って濡れた手で使う
     画面のための約束なので、そちらを優先しました。
     設計どおりにするなら、下の .btn--danger の min-height を 40px に戻します。
   ========================================================================== */

/* 本文の外周。設計は上下 32（共通は 64）。
   食材・在庫と同じやり方で、この画面の本文にだけ渡す。共通の値は触らない */
/* ★ ここにあった :has(.kitchenboard) { --main-pad-y: 32px } は 2026-09-13 に外しました。
     基準が 32px になったので二重定義です（30 節）。 */

/* --------------------------------------------------------------------------
   33-1. 見出しと稼働状況
   --------------------------------------------------------------------------
   設計は「白・角丸 6・枠も影も無し」。.card は面が #f7f9fb ＋枠＋影なので、
   この画面ぶんだけ打ち消す。本文の地が白なので、カードとしては見えなくなり、
   題と稼働状況が本文に直接載っているように読める。 */
.kitchenboard .griddle {
  margin-top: 0;
  /* background-color だけを上書きする。shorthand（background）で書くと
     .griddle の焼き目テクスチャ（background-image）まで消える */
  background-color: #ffffff;
  border: 0;
  border-radius: 6px;
  box-shadow: none;
}
/* 見出しの帯。他の画面（.page-head / .section-title）と同じ 16px 40px。

   ★ 2026-09-19：20px 24px から変えました（店主の指摘
     「厨房の見出しだけ余白がズレてみえる」）。実測:

       画面            題の x   帯の上の余白
       厨房ボード       312      20     ← ここだけ
       ホール・会計     328      16
       品切れ・残数     328      16
       商品            328      16
       食材・在庫       328      16
       注文履歴         328      16
       卓              328      16

     16px 左・4px 下にいました。画面を行き来すると題が動いて見えます。

   ★ 実装は設計（ト01）のとおりでした。ズレていたのは設計のほうです。
     設計も ト01 / トi01 / トp01 の帯を 16/40 に直してあります。

       設計 ト01 厨房   帯 pad 20/24 → 題 x=312
       設計 ト03 品切れ 帯 pad 16/40 → 題 x=328
       設計 ト10 商品   帯 pad  0/40 → 題 x=328 */
.kitchenboard .griddle .card__body { padding: 16px 40px; }
.kitchenboard .griddle .row { gap: 16px; }
/* 題と説明は横並び（設計は 1 行）。縦に積むと帯が 2 行ぶんの高さになる */
.kitchenboard .griddle__title {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
  min-width: 0;
}
/* 他のページの題（.page-head__title）と同じ 32px / 36px にそろえる。
   ここだけ 28px だったので、画面を行き来すると題の大きさが変わっていました */
.kitchenboard .griddle h1 { font-size: 32px; line-height: 36px; }
/* ★ 題の箱の高さも他の画面とそろえる（.page-head__title と同じ 50px）。
     字は 36px なので、50px の中で縦中央に置くと字の中心が他と同じ 129px に来ます。
     床が無いと 36px のまま上に詰まり、字の中心が 126px になって 3px 上にずれます。

   ★ 床は「帯」ではなく「題」に敷くこと。帯（.card__body）に min-height を
     書いても box-sizing: border-box で padding に食われます（CLAUDE.md 参照）。 */
.kitchenboard .griddle h1 {
  min-height: 50px;
  display: flex;
  align-items: center;
}
.kitchenboard .griddle .small { font-size: 13px; color: #828282; }
.kitchenboard .griddle .tiny { font-size: 12px; color: #828282; }

/* 未処理の件数。設計のチップに枠は無いので、.badge の枠（currentColor）を消す。
   面と文字は設計の #ddf0ec / #0b7a78 で、卓のご要望と同じ組み合わせ */
.kitchenboard .griddle .badge {
  padding: 4px 12px;
  font-size: 13px;
  background: var(--action-soft);
  color: var(--action);
  border-color: transparent;
}

/* ★★ ここから下の .ticket__cancel* は<b>旧 3 レーンの厨房ボード</b>のものです
     （2026-09-23 に 2 レーン・品ごとへ作り替えました）。

   ★ いまの厨房ボードは使っていません。取り消しは .kline__x です。
     一度この名前を使い回して事故りました——
     下の「display: none」と @media の「position: absolute」が効いて、
     <b>✕ が消えたうえに右上へ飛んでいました</b>。
     設計（ト01 1548:20793）の ✕ は行の中に 48×48 で並びます。

   ★ 消していないのは、ホール盤面の .ticket が同じ部品を使っているためです。
     厨房から参照が無くなっただけで、規則そのものは生きています。 */

/* 取り消しの「✕」は、設計 1432px の版には出てきません。
   タブレット幅でだけ出す印なので、ここでは隠しておきます。
   ラベルのほうはこの幅では素の文字のまま（.btn が面と枠を持っています）。 */
.kitchenboard .ticket__cancel-mark { display: none; }
/* ★ この 1 本は @media の外に置くこと。
     タブレット幅で位置をずらして隠すとき、値を上書きするだけで済みます。
     @media の中で display を切り替える形にすると、
     「見た目は消えたが読み上げからも消えた」を踏みやすくなります。 */
.kitchenboard .ticket__cancel-label { position: static; }

/* --------------------------------------------------------------------------
   33-2. 3 レーン
   --------------------------------------------------------------------------
   設計は幅いっぱいの 3 等分で、1120px のとき 1 列 363px。
   上限を 1120px にしてあるのは、それを超えるとレーンだけが間延びして
   1 枚のチケットが横長になるため（ホール盤面で 2026-09-12 に
   「レスポンス対応で横に引き延ばされてる」と言われて直したのと同じ考え方）。
   列の指定そのものは 15 節の @media(min-width:900px) が持っているので触らない。 */
/* 盤面そのものには上限を持たせません。幅の上限は 35-5 で
   本文（main.kitchenboard）ごと 1 か所にまとめてあります。 */
.kitchenboard .board {
  margin-top: 24px;
  gap: 16px;
}

.kitchenboard .lane {
  background: #f7f9fb;
  border: 1px solid #e8e8e8;
  border-radius: 6px;
}

/* レーンの見出し。共通は明朝＋字間 .1em だが、設計はゴシックの素の字間で 16px 太字 */
.kitchenboard .lane__head {
  padding: 12px 16px;
  gap: 8px;
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: normal;
  color: #1c1c1c;
}
/* 上の 3px がそのレーンの色。設計では下の 1px も同じ色の線（太さ違いの 1 本）。
   受付＝藍、調理中＝ティール、提供待ち＝緑。左から右へ進むほど「出来上がりに近い」 */
.kitchenboard .lane--received .lane__head { border-top: 3px solid #4e5ba6; border-bottom-color: #4e5ba6; }
.kitchenboard .lane--cooking  .lane__head { border-top: 3px solid var(--action); border-bottom-color: var(--action); }
.kitchenboard .lane--ready    .lane__head { border-top: 3px solid #3f8e6d; border-bottom-color: #3f8e6d; }

/* 件数はホールと同じ型（2026-09-14。数字 20px Bold 濃色・灰色の器なし）。
   ホールで作った読みやすさを、同じレーン形式のこちらにもそろえた。
   レーン名 16px より数字が大きいのは意図どおり——見るのは数字のほう */
.kitchenboard .lane__head .count {
  font-family: var(--font-sans);
  font-size: 20px;
  font-weight: 700;
  padding: 0;
  border-radius: 0;
  background: none;   /* 8 節の基礎ピルを打ち消す（ホールと同じ理由） */
  color: #1c1c1c;
}

.kitchenboard .lane__body { padding: 12px; gap: 12px; }
.kitchenboard .lane__empty { font-size: 14px; color: #828282; }

/* --------------------------------------------------------------------------
   33-3. 伝票カード
   --------------------------------------------------------------------------
   中の 5 つ（頭・明細・ご要望・操作・取り消し）は 12px ずつ空ける。
   縦に積む箱にして gap で決めているのは、どれが出る／出ないでも間隔がそろうため。
   ご要望は注文にメモがあるときだけ、取り消しは見学者以外にだけ出るので、
   それぞれに margin を持たせると組み合わせのぶんだけ間隔が狂う。 */
.kitchenboard .ticket {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px;
  background: #ffffff;
  border: 1px solid #e8e8e8;
  border-radius: 4px;
}
.kitchenboard .ticket > * { margin: 0; }
/* 15 分超えの赤枠。内側の影まで足すと枠が 2px に見えて設計とずれるので、色だけ変える */
.kitchenboard .ticket.is-late { border-color: #d33f3f; box-shadow: none; }

.kitchenboard .ticket__head { gap: 8px; }

/* 卓名。共通の .ticket__num は 3 桁の番号を大きく出すための見た目
   （数字用フォント・1.75rem）で、日本語の卓名が入るとはみ出す。
   設計は 20px 太字のゴシックなので、そちらに合わせる。
   2026-09-12 以前は board.html の inline style に同じ値が書いてあった。 */
.kitchenboard .ticket__num {
  font-family: var(--font-sans);
  font-size: 20px;
  font-weight: 700;
  letter-spacing: .02em;
  line-height: 1.4;
  color: #1c1c1c;
  word-break: break-all;
}
.kitchenboard .ticket__name,
.kitchenboard .ticket__time { font-size: 13px; color: #828282; }
.kitchenboard .ticket.is-late .ticket__time { color: #d33f3f; }

/* 同卓のバッジ。未処理と同じ色づかいで、一回り小さい */
.kitchenboard .ticket__head .badge {
  padding: 2px 8px;
  font-size: 11px;
  background: var(--action-soft);
  color: var(--action);
  border-color: transparent;
}

/* 明細。行の下の罫は設計が実線 #e8e8e8（共通は破線）。
   設計は最後の行にも引いてあるので、共通の :last-child の打ち消しを戻す。
   ここで 1 本入ると「品物はここまで」と「ここから操作」の境になる。 */
.kitchenboard .ticket__items li,
.kitchenboard .ticket__items li:last-child {
  gap: 8px;
  padding: 3px 0;
  font-size: 15px;
  border-bottom: 1px solid #e8e8e8;
}
/* 数量。34px は「×1」から「×12」までが同じ位置で縦にそろう幅。
   ★ nowrap を外さないこと。ここが折り返すと「×」と「1」が上下に割れ、
     行の高さが 2 倍になって品名との対応も読めなくなる（狭い画面で実測）。 */
.kitchenboard .ticket__qty {
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 700;
  min-width: 34px;
  white-space: nowrap;
  color: var(--action);
}
/* 品名の入れ物は縮んでよい。
   flex の子は既定で min-width: auto（＝中身より狭くならない）ので、
   品名に英数字や記号のまとまりが混じると、その塊のぶんだけ行がはみ出す。
   .lane は overflow: hidden（15 節）なので、はみ出したぶんは
   横スクロールにならず<b>無言で切れる</b>。
   iPad Pro 11 の縦（1 列 233px）で実測 3px はみ出していた（2026-09-12）。

   ★ :not(.ticket__qty) を外さないこと。
     数量も li の直下の span なので、絞らないと上の min-width: 34px まで
     0 に潰れる。実際それをやって「×1」が 2 行に割れた（2026-09-12）。 */
.kitchenboard .ticket__items li > span:not(.ticket__qty) {
  min-width: 0;
  overflow-wrap: anywhere;
}
.kitchenboard .ticket__opt { font-size: 13px; color: #828282; }

.kitchenboard .ticket__note {
  padding: 8px;
  border-radius: 4px;
  background: var(--action-soft);
  color: var(--action);
  font-size: 13px;
  font-weight: 500;
}

/* --------------------------------------------------------------------------
   33-4. ボタン
   --------------------------------------------------------------------------
   設計は 3 レーンとも操作ボタンの高さがそろっていて、間は 16px。
   塗ってあるほう（--action の草緑）がそのレーンの標準の一手、
   白地に薄い枠のほうが「飛ばす・戻す」の例外操作。

   ★ 高さは 2026-09-13 に 56px → var(--tap)（48px）へ。
     同じ画面のボタンなのに高さが 3 通りありました。
       操作 56px ／ キャンセル 48px ／ タブレット幅の操作 48px（35-3 で別指定）
     幅を変えるとボタンの高さが変わる状態だったので、1 本にまとめています。

     ★ ここには長いあいだ「設計は 56px」と書いてありましたが、誤りでした。
       Figma（現01 厨房ボード 552:6627）を測ると操作は 48px、キャンセルが 40px です。
       56px はどこにも無い値で、この 1 行のせいで 2 回「設計どおり」に戻しかけています。
       設計側も 2026-09-13 に 48px でそろえました（部品「厨房/伝票」を直したので
       現01・PC01 の両方に反映されています）。

     数値ではなく var(--tap) で書いているのは、<b>この値が意匠ではなく規約だ</b>と
     読んで分かるようにするためです（CLAUDE.md「タップ領域は 48px 以上」）。
     40px に下げたくなったときは、CSS ではなく CLAUDE.md の側を先に直します。

     なお 40px にしても、1 レーンに入る枚数は 0.1〜0.2 枚しか増えません（実測）。
     カードの高さを決めているのはボタンではなく行数です。 */
.kitchenboard .ticket__actions { gap: 16px; }
.kitchenboard .ticket__actions .btn {
  padding: 10px 16px;
  /* 角丸は .btn の 8px を継ぐ（2026-09-20 に直値 4px をやめた） */
  font-size: 14px;
  font-weight: 700;
  letter-spacing: normal;
}
/* 例外操作。共通の .btn は面が #f7f9fb・枠が --border-strong なので、設計の白＋#e8e8e8 に直す */
.kitchenboard .ticket__actions .btn:not(.btn--primary):not(.btn--danger) {
  --btn-bg: #ffffff;
  --btn-bd: #e8e8e8;
  --btn-fg: #1c1c1c;
}
/* キャンセルは白地に赤枠・赤字。区別は色でつける。
   ★ 高さはここに書かないこと（2026-09-13）。
     設計は 40px で、CLAUDE.md の「タップ領域は 48px 以上」を優先して
     48px に上げてありました。上の 1 本が var(--tap) になったので、
     同じ値がここにもあると片方だけ古くなります。 */
.kitchenboard .ticket__actions .btn--danger {
  --btn-bg: #ffffff;
  --btn-bd: #d33f3f;
  --btn-fg: #d33f3f;
}

/* ==========================================================================
   34. 品切れ・残数 — 設計「現03 品切れ・残数」439:2496 に合わせる（2026-09-12）
   --------------------------------------------------------------------------
   ※ 33 節と同じく、置き場所は 32 節（広い画面）の手前。

   ★ この画面には長らく目印のクラスが付いていませんでした。
     app.css には .stockpage で始まる定義が 4 本ありますが、
     .stockpage が付いているのは食材・在庫（/inventory/ingredients）だけで、
     この画面（/kitchen/stock）には 1 本も効いていません。
     そのため main に .soldoutpage を足し、寸法はすべてここに集めます。

   ★ 色は変数を経由せず直値。var(--border) は .theme-snow で「黒 10%」＝
     実効 0.83px のグレーで、設計の #e8e8e8 1px とは別物です。

   ★ 設計と変えているのは「押せるものの高さ」だけです。
     設計は 入力欄 38px / 設定 36px / 品切れにする 38px ですが、
     CLAUDE.md の「タップ領域は 48px 以上（--tap）」を優先して 48px のままにしています。
     厨房で立って使う表なので、行の高さより押しやすさを取りました。
     設計どおりにするなら、下の 34-4 の min-height を外します。
   ========================================================================== */

/* 本文の外周。設計は上下 32（共通は 64）。食材・在庫と同じやり方 */
/* ★ ここにあった :has(.soldoutpage) { --main-pad-y: 32px } は 2026-09-13 に外しました。
     基準が 32px になったので二重定義です（30 節）。 */

/* --------------------------------------------------------------------------
   34-1. 見出し（設計「見出し／ページ」）
   --------------------------------------------------------------------------
   カードをやめて 1 行の帯にした。左右 40・上下 16 の内側に
   題・状態・掲載数を横一列。食材・在庫（.inv-ingredients）と同じ寸法。 */
.soldoutpage .soldout-head {
  align-items: center;
  gap: 16px;
  padding: 16px 40px;
  margin: 0 0 24px;
}
/* 題は 32px。.section-title__text は既定 24px なので、この画面だけ上げる
   （設計では h1 ＝ ページの題、h2 ＝ 節の題、と大きさで段を付けている） */
.soldoutpage .soldout-head .section-title__text { font-size: 32px; }
/* 「／ 掲載中 94 品」。件数は本文より一段小さい補足 */
/* ★ 2026-09-18：14px をやめて 16px（.theme-desk の既定）にそろえました。 */
.soldoutpage .soldout-head .section-title__count { color: #828282; }

/* --------------------------------------------------------------------------
   34-2. しぼり込み（設計「Frame 3」）
   --------------------------------------------------------------------------
   2 つ並びで間は 42px、高さは 48px。
   ★ ここにあった .soldoutpage .searchbox { height: 48px } は
     2026-09-13 に外しました。素の .searchbox が 48px に統一されたので、
     同じ値の二重定義になっていたためです（片方だけ動く事故のもと）。 */
.soldoutpage .stockfind {
  grid-template-columns: 1fr 1fr;
  gap: 42px;
  margin-top: 24px;
  /* ★ ここにあった max-width: 1096px は 2026-09-15 に外しました（店主の指摘）。
       設計の Render 版もしぼり込みだけ 1096 で、節見出しと表（どちらも 1120）より
       右に 24px 余っていました。同じ画面で右端が 2 つあることになるので、
       描き間違いと判断して表に合わせています。
       固定値を入れ直さないこと——広い画面（32 節）では本文が広がり、
       表は width:100% で追従するので、上限があるとずれが開きます。 */
}
/* ★ ここにあった .soldoutpage .catpick__head { min-height: 46px } は
     2026-09-14 に外しました。共通側（8 節）を 46px に直したので、
     同じ値の二重定義になっていたためです（片方だけ動く事故のもと）。
     2026-09-13 に .soldoutpage .searchbox を外したときと同じ判断。
     文字だけはこの画面の寸法（14px）なので残します。 */
.soldoutpage .catpick__head { font-size: 14px; }
.soldoutpage .searchbox { border-color: #e8e8e8; }
.soldoutpage .catpick { border-color: #e8e8e8; }

/* --------------------------------------------------------------------------
   34-3. 節見出しと表の枠
   -------------------------------------------------------------------------- */
/* 上の 40px は、設計の gap 24 ＋ 節見出しの padding-top 16 の合計 */
.soldoutpage .soldout-sec { margin: 40px 0 24px; }
.soldoutpage .soldout-sec .section-title__text { font-size: 20px; }
.soldoutpage .soldout-sec .section-title__count { font-size: 12px; color: #828282; }

/* ★ ここにあった .soldoutpage .card（白・#e8e8e8・角丸 6）は
     2026-09-15 に外しました。共通側（30-2 節の .theme-desk .card）を
     同じ値に直したので、二重定義になっていたためです。
     この画面で先に見つけていた正解を、全画面へ広げた形です。 */

/* --------------------------------------------------------------------------
   34-4. 表
   -------------------------------------------------------------------------- */
/* 見出し行。地のティールと白文字は共通のまま、寸法だけ設計に寄せる */
/* ★ 2026-09-18：色を設計（ト03 725:4168）にそろえました（店主の指摘）。
     「線色とかおススメが昔の緑だったりしてるから」

     下線が #0b7a78（古いティール）で、表の頭に緑の線が 1 本入って見えていました。
     設計は #e3e3e3。字も 13px でしたが設計は 12px です。 */
/* ★ 2026-09-20：見出しだけ 48px にそろえました（実測 49.5 → 48）。
     ★ 行は 73px のままにします。設計は 69px ですが、それは
       <b>ボタンが 38px だった前提</b>の値です。38px は「小さいボタンは
       PC 48px」という店主のルールに無い寸法なので採りませんでした。
       いまの行は 48（ボタン）＋ 12＋12（上下）＋ 1（罫）＝ 73 で、
       中身から決まっています。行だけ 69 に縮めることはできません。 */
.soldoutpage .table th {
  height: 48px;
  /* ★ 上下 13px・行送り 20px で中身を 46px に収めます。
       14px＋行送り既定（12px×1.7＝20.4）だと中身が 48.4px になり、
       height: 48px は表では「最低値」なので効かず 49.5px で出ていました。
       中身を床より小さくして初めて 48px にそろいます。 */
  padding: 13px 16px;
  font-size: 12px;
  line-height: 20px;
  border-bottom-color: #e3e3e3;
}
.soldoutpage .table td {
  padding: 12px 16px;
  font-size: 15px;
  /* 設計は #e3e3e3（#e8e8e8 だと 1 段薄い） */
  border-bottom: 1px solid #e3e3e3;
}
/* 列幅（設計：商品は残り全部／価格 100／状態 110／残数 240／操作 170） */
.soldoutpage .table th:nth-child(2), .soldoutpage .table td:nth-child(2) { width: 100px; }
.soldoutpage .table th:nth-child(3), .soldoutpage .table td:nth-child(3) { width: 110px; }
.soldoutpage .table th:nth-child(4), .soldoutpage .table td:nth-child(4) { width: 240px; }
.soldoutpage .table th:nth-child(5), .soldoutpage .table td:nth-child(5) { width: 170px; }

/* ★ 狭い端末では残数の列を詰める（2026-09-13）。
     固定 4 列の合計 620px に対し、旧 iPad の縦（本文 664px）では
     商品名の列に 44px しか残らず、表が 4px はみ出して横スクロールが出ていました。
     入力欄 84 ＋ 設定ボタン ＋ 間 8 は 200px でも収まるので、そこだけ削ります。 */
/* ★ 狭い端末の詰めは、この節のいちばん下（.stock-toggle の定義より後ろ）に置いてあります。
     同じ詳細度（0,2,0）なので、先に書くと後ろの 170px に負けます。実際 1 度踏みました。 */

/* ★ 縞をやめる（設計は行が全部白）。
     共通の .theme-desk .table は 1 行おきに #f3faf8 を敷いていますが、
     設計の 5 行は白で、薄緑が出ているのは 1 行だけ＝指を乗せた行の見本です。
     そこで縞を白に戻し、その薄緑を hover に回します
     （共通の hover は #ddf0ec で、5 列の表では濃すぎて行が飛び出して見える）。 */
.soldoutpage .table tbody tr:nth-child(even) { background: #ffffff; }
.soldoutpage .table tbody tr:hover { background: #f3faf8; }

/* 価格。設計は 15px の中太。右寄せは共通の td.num のまま残している */
.soldoutpage .table td.num { font-size: 15px; font-weight: 500; }

/* 「おすすめ」。品名より小さく、地は薄い緑。

   ★ 2026-09-18：ティールから緑へ（店主の指摘）。
     地 #ddf0ec → 設計 #ddf0e0、文字 #0b7a78 → 設計 #0b7a1a。
     どちらも 1 文字ちがいなので、並べて見ないと気づけませんでした。
     ベタ書きをやめて --action 系で持ちます。他の画面と同じ栓になるので、
     色を変えるときに、ここだけ取り残されることがなくなります。 */
.soldoutpage .table .badge--rec {
  padding: 2px 8px;
  font-size: 11px;
  background: var(--action-soft);
  color: var(--action);
  border-color: transparent;
}

/* 状態のチップ。見出しのチップ（3/12・13px・丸 7px）より一回り小さい */
.soldoutpage .table .status-chip { padding: 3px 10px; font-size: 12px; }
.soldoutpage .table .status-chip::before { width: 6px; height: 6px; }

/* 残数の欄と「設定」。設計は 38px / 36px だが、押せるものなので 48px は割らない */
/* ★ 14px にしないこと（2026-09-18）。CLAUDE.md の
     「入力欄の font-size は 16px 未満にしない」に反します。
     iOS は 16px 未満の入力欄にフォーカスすると画面を勝手に拡大し、
     営業中に卓の画面が飛びます。狭いなら幅で詰めること。 */
.soldoutpage .table .input { font-size: 16px; }
/* ★ 2026-09-26：min-height を 48 → 44 に。ほかの一覧（商品・カテゴリ・卓・
     レシピ）の表のボタンは 44px です（40 節の
     .theme-desk .table .btn:not(.badge)）。ここだけ 48px を持っていたため、
     品切れ・残数の表のボタンだけ 4px 高く残っていました（実測）。

   ★ しばらく「詳細度どおりに効かない」と見えて追いかけましたが、原因は
     CSS ではありませんでした。<b>テンプレートに直書きされていた</b>のです。

       kitchen/stock.html: <button class="btn btn--sm" style="min-height: 48px">

     インラインの指定は、どんなセレクタよりも強い。app.css をいくら直しても
     動かないときは、まず要素の style 属性を見ること。
     この 1 行のために、詳細度・メディアクエリ・@layer を順に疑いました。 */
.soldoutpage .table .btn--sm {
  padding-inline: 14px;
  font-size: 13px;
  --btn-bg: #ffffff;
  --btn-bd: #e8e8e8;
  --btn-fg: #1c1c1c;
}
/* 「品切れにする」「販売再開」。幅は設計の 170px にそろえる
   （文言の長さが変わっても行が動かないように固定するのは従来どおり） */
.soldoutpage .stock-toggle { min-width: 170px; font-size: 13px; }
.soldoutpage .stock-toggle.btn--danger {
  --btn-bg: #ffffff;
  --btn-bd: #d33f3f;
  --btn-fg: #d33f3f;
}

/* --------------------------------------------------------------------------
   34-5. 狭い端末（iPad の縦など）
   --------------------------------------------------------------------------
   この表は table-layout: auto なので、列幅の指定は「目安」でしかありません。
   縮まない中身があると、そこが最後まで残って表を押し広げます。
   実測（旧 iPad の縦・本文 664px）では列が 96/78/104/188/202 = 667px になり、
   4px はみ出して表の中に横スクロールが出ていました。
   いちばん縮まないのは操作列の 202px（ボタン min-width 170 ＋ 左右 padding 32）です。

   ★ この節は .soldoutpage .stock-toggle の定義より<b>後ろ</b>に置くこと。
     どちらも詳細度 (0,2,0) なので、前に書くと 170px に負けます（1 度踏みました）。 */
@media (max-width: 900px) {
  .soldoutpage .table th:nth-child(4), .soldoutpage .table td:nth-child(4) { width: 200px; }
  /* 「品切れにする」6 字は 160px でも収まる（170px は 1432px 幅のときの値） */
  .soldoutpage .stock-toggle { min-width: 160px; }

  /* ★ 探す欄とカテゴリ選択を縦に積む（2026-09-13 に直した）。
       共通側には 3549 行に @media (max-width: 900px) { .stockfind { 1fr } } が
       もともとありましたが、34-2 で書いた .soldoutpage .stockfind（詳細度 0,2,0）が
       条件なしでそれを潰していました。幅 360px で 67px はみ出し、
       ページ全体に横スクロールが出ていた原因です。 */
  .soldoutpage .stockfind { grid-template-columns: minmax(0, 1fr); }
}

/* ==========================================================================
   35. タブレット対応 — 厨房ボードとホール盤面（2026-09-12）
   --------------------------------------------------------------------------
   ※ 33/34 節と同じく、置き場所は 32 節（広い画面）の手前。

   店で実際に使うのは 1432px の PC ではなく iPad です。
   ところが盤面の 3 列は、どの iPad でも成立していませんでした。

     厨房のチケットは 1 列 331px 必要（実データの卓名「カウンター札6」だと 341px）。
     それに対して本文に使える幅は

       1366 横（iPad Pro 12.9）  1054px → 1 列 330px   1px 足りない
       1194 横（iPad Pro 11）     882px → 1 列 283px
       1080 横（iPad 10.2）       768px → 1 列 245px
       1024 横／12.9 縦           712px → 1 列 226px   全機種で最狭
        834 縦（iPad Pro 11）     730px → 1 列 232px
        768 縦（旧 iPad）         664px → 1 列 210px

   ★ 壊れ方が見えないのがいちばん厄介でした。
     .btn は white-space: nowrap（7 節）、.lane は overflow: hidden（15 節）。
     はみ出したボタンは横スクロールにならず<b>そのまま切り落とされます</b>。
     「提供済みにする」が「提供済みにす」で途切れ、押せる面積も欠けます。
     バーも出ないので、見ている人は欠けていることに気づけません。

   ★ 1024px 横が全機種で最も狭い、というのが直感に反する点です。
     834px 縦（730px）より狭い。サイドバーが 960px 以下で 64px に畳まれる差
     200px が、ビューポートの差 190px を食い切るためです。

   直しは 3 段です。
     35-1  厨房・ホールではサイドバーを 64px の帯にする（横向きで 200px 稼ぐ）
     35-2  列の指定を「常に 3 列・足りなければ縮む」に変える
     35-3  それでも足りない狭い帯だけ、中身を詰める
   ========================================================================== */

/* --------------------------------------------------------------------------
   35-1. サイドバーの畳みは 21 節へ移した（2026-09-13）
   --------------------------------------------------------------------------
   ここには「厨房・ホールだけ 1380px 以下で畳む」という :has の帯がありました。
   Figma 07 の iPad 版を店主と見て「iPad は全画面アイコンだけ」に決めたので、
   21 節（@media max-width: 1380px）の素の .staff-shell に一本化しています。

   当時ここに書いた理由（264px を払うと 3 列が物理的に入らない。
   iPad Pro 11 横で 1 列 283px、必要なのは 331px）はそのまま生きていて、
   それが全画面に広がっただけです。境目の 1380px も当時の計算のまま
   （341×3 ＋ 32 ＋ 264 ＋ 48 ＝ 1367px を切り上げ）。 */

/* --------------------------------------------------------------------------
   35-2. 列は常に 3 つ。足りなければ縮む
   --------------------------------------------------------------------------
   ★ minmax(0, …) の 0 が要ります。
     grid の列は既定で min-width: auto（＝中身より狭くならない）なので、
     これが無いと縮まずに親をはみ出します。今回のはみ出しの半分はこれです。 */

/* 厨房。15 節の .board は @media (min-width: 900px) ではじめて 3 列になるため、
   iPad 縦（834px）はそこに届かず 1 列に落ちていました。
   この画面の 3 列は仕事の順序（受付 → 調理中 → 提供待ち）そのものなので、
   狭くても列は崩しません。崩すと「左から右へ流す」という読み方が消えます。 */
.kitchenboard .board { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* ホール。列は厨房と同じく伸ばす（2026-09-13）。
   上限も下限も持たせません。
     ・下限を外す理由：1241〜1423px のはみ出しと、900px 未満の横スクロールが止まる
     ・上限（360px）を外す理由：ここだけ止めると、同じ 1920px の画面で
       厨房のレーンが 471px、ホールが 360px になり、隣り合う 2 画面の
       見え方がそろわない。設計で 360px 固定だったのは 1432px しか
       描いていないからで、そこでは FILL と同じ結果になります（35-5）。
   数字カードの .grid--3 も並べていたが、2026-09-14 にカードの段ごと畳んだ。 */
.theme-desk .hallboard .board,
.hallboard .board { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* --------------------------------------------------------------------------
   35-5. 広い画面は上限で止めず、左右の余白で読ませる（2026-09-13）
   --------------------------------------------------------------------------
   ★ ここは 1 日のうちに 2 回向きを変えています。経緯を残します。

     1 回目：盤面が左に寄って見えたので、本文ごと max-width: 1120px ＋
             margin-inline: auto にしました。2560px で左右 506px ずつ空きます。
     2 回目（これ）：店主から参考の管理画面を渡されて、やめました。

   渡された画面（Render のダッシュボード）のスクリーンショットを測ると、
   1999px 幅の窓で サイドバー 232px・本文の左右余白 158/171px・表の幅 1438px。
   ここから「上限で止めていない」と読みました。

   ★ この読みは誤りでした（同じ日に実物を開いて判明）。
     あちらは main { max-width: 1920px; margin-inline: auto; padding-inline: 48px }
     です。1999px の窓ではサイドバーを引いた 1767px が上限に届かないので、
     上限が効いていない状態だけを見ていたことになります。

   正しい結論は「1120px という<b>小さすぎる</b>上限をやめる」で、
   「上限そのものをやめる」ではありません。上限は 30 節（.theme-desk .staff-main）に
   1920px で入れ直してあります。ここで廃止したのは 1120px のほうだけです。

   1120px で止めるのが良くなかった点は 2 つ。
     ・使える幅を捨てる。2560px では 4 割しか使いません。
     ・32 節の方針と矛盾する。あそこは「幅の上限で止めるのではなく、
       寸法のほうを画面に合わせる」と書いてあり、1168px で止めて
       2560px に 1105px の空きができたのを失敗として記録しています。

   ★ 余白は 1 か所（--main-pad-x）に集約してあります。
     盤面ではなく本文が持つので、見出しの帯・数字カード・盤面の左端が
     そろったまま動きます。値は 32 節（ファイル末尾）にあります。

   ★ 「レーンが伸びると卓名と経過時間が離れる」という心配は残ります。
     ただしガターを足したあとは 1920px でレーン 471px（設計 360px）、
     2560px でも 625px で、700px 級にはなりません。
     1432px までは 1px も変わりません。 */

/* （盤面そのものには何も指定しません。幅の調整は本文の左右余白で行います） */

/* --------------------------------------------------------------------------
   35-3. 狭い帯だけ中身を詰める
   --------------------------------------------------------------------------
   サイドバーを畳んでも、1 列 331px に届かない幅が残ります。
   境目は 1137px（＝ 331×3 ＋ 間 32 ＋ サイドバー 64 ＋ 本文余白 48）。
   切りのいいところで 1140px にしています。

   ★ 2026-09-13 に設計ができました（Figma「iPad01 厨房ボード（1024×768）」）。
     それまでは 1432px の版を保ったまま入らないものから削る当座のしのぎで、
     ここで卓名を 20 → 17px、ボタンを 14 → 13px に落としていました。
     設計を起こして確かめたところ、レーン 293px でも
     <b>卓名 20・明細 15・ボタン 14 のまま収まりました</b>。
     入らないのは伝票の頭の 1 行だけで、そこは折り返せば済みます。

   ★ 縮めない理由。
     この 2 画面は立ったまま離れて一瞬だけ見る画面で、卓名は運び先そのものです。
     読み違えると料理が違う卓へ行きます。1 画面に入る件数が 1〜2 枚減るほうを取ります。
     詰めてよいのは余白だけ、というのがこの帯の線引きです。 */
@media (max-width: 1140px) {
  .kitchenboard .lane__body { padding: 8px; gap: 8px; }

  /* ★ 余白は 12 → 10、すきまは 10 → 8（2026-09-13）。
       position: relative はキャンセルの ✕ を右上に置くための足場です。
       ここを外すと ✕ が本文ごと画面の右上へ飛びます。 */
  .kitchenboard .ticket { padding: 10px; gap: 8px; position: relative; }

  /* 頭の 1 行（卓名・番号・同卓・経過時間）は折り返してよい。
     .ticket__head は flex のままなので、wrap が無いと押し合って潰れる。

     ★ row-gap を 2px にすること。
       折り返すのは「同卓 n 件」が付いた伝票だけです（実測：付かない伝票の頭は
       29px の 1 行、付くと 60px の 2 行）。既定の gap 8px が行間にも効くので、
       2px にすると 2 行でも 49px に収まります。
     ★ padding-right は ✕ の場所です。40px 要ります。
       経過時間は margin-left: auto で<b>行の右端に寄る</b>作りなので、
       ここが足りないと ✕ の下に潜り込みます（768px で実測 10px 重なり）。
       ✕ は伝票の内側 2px から 48px なので、伝票の余白 10px を差し引いて 40px。
       最初 30px にして 1 回踏みました。 */
  .kitchenboard .ticket__head { flex-wrap: wrap; row-gap: 2px; padding-right: 40px; }

  /* 明細の行の上下。33 節が「li, li:last-child」の 2 本立て（詳細度 0,3,1）で
     指定しているので、こちらも 2 本書かないと最後の 1 行に届きません */
  .kitchenboard .ticket__items li,
  .kitchenboard .ticket__items li:last-child { padding: 2px 0; }
  .kitchenboard .ticket__note { padding: 6px 8px; }

  .kitchenboard .ticket__actions { gap: 8px; }
  /* ★ 高さはここで上書きしないこと。33-4 の var(--tap) に任せます。
       もともとここは 48px を書いていましたが、33 節が 56px だったので
       「幅を変えるとボタンの高さが変わる」状態を作っていました。
       詰めてよいのは左右の余白だけです */
  .kitchenboard .ticket__actions .btn { padding: 10px 8px; }

  /* ------------------------------------------------------------------
     キャンセルを伝票の右上の ✕ に移す
     ------------------------------------------------------------------
     全伝票に必ず付く 48px の行（＋すきま 8px）が、1 枚あたり 56px を
     食っていました。1024×768 のレーンに入るのが 1.7 枚しかなかった
     いちばんの理由がこれです。

     ★ 当たり判定は --tap（48px）のまま。見た目だけ小さくします。
       厨房は手が濡れていて急いでいる場面なので、ここは削れません。
     ★ 面と枠は消しますが、色は danger のまま残します。
       取り消しは戻せない操作なので、印だけになっても赤であることが要ります。 */
  .kitchenboard .ticket__cancel {
    position: absolute;
    top: 2px;
    right: 2px;
    margin: 0;
  }
  .kitchenboard .ticket__cancel .btn {
    width: var(--btn-h);
    height: var(--btn-h);
    min-height: var(--btn-h);
    padding: 0;
    background: transparent;
    border-color: transparent;
    box-shadow: none;
  }
  .kitchenboard .ticket__cancel-mark { display: block; font-size: 15px; line-height: 1; }
  /* ★ display: none にしないこと。読み上げからも消えます。
       位置だけ画面の外へ送って、見た目だけ隠します */
  .kitchenboard .ticket__cancel-label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  /* ------------------------------------------------------------------
     画面の上も詰める
     ------------------------------------------------------------------
     伝票を詰めるだけでは 2.6 枚どまりでした。レーンの見える高さは
     「768px − 帯 88 − 本文の上余白 − 見出しブロック 79 − レーンの見出し」で、
     上の 2 つを詰めると 70px ぶん増えます。カードには触らずに 3 枚に届きます。

     ★ 帯は 31 画面共通なので、盤面の 2 画面にだけ効かせること（35-1 と同じ書き方）。
       素の .topbar に書くと、机で見る管理画面まで一緒に縮みます。 */
  /* ★ ここにあった --topbar-h: 64px は 2026-09-13 に外しました。
       基準の帯が 88 → 56px（Render の値）になったので、
       64px だと<b>タブレットのほうが背が高くなる</b>逆転が起きます。 */
  .staff-frame:has(.kitchenboard) .topbar__brand,
  .staff-frame:has(.hallboard) .topbar__brand { height: 40px; }

  /* 左右は .page-head と同じ 24px にそろえる（2026-09-19）。
     ここだけ 16px だと、狭い画面でも厨房の題だけ 8px 左にずれる */
  /* ★ このセレクタはいま何にも当たりません（2026-09-26 に確認）。
       .griddle というクラスはテンプレートに 1 つも無く、
       厨房ボードの見出しは共通の .page-head を使っています。
       値だけ .page-head とそろえてあります。消すかどうかは別途。 */
  .kitchenboard .griddle .card__body { padding: 8px 24px; }
  .kitchenboard .board { margin-top: 16px; }

  .hallboard .lane__body { padding: 12px; gap: 12px; }
  .hallboard .billcard { padding: 16px; }
  .hallboard .billcard .btn { padding-inline: 12px; }
}

/* 操作ボタンを横に 2 つ並べられなくなる幅（1 列 257px 未満）。
   「提供済みにする」＋「調理中に戻す」で 213px 必要で、
   ここはボタンの文言を削らないかぎり縮みません。
   横に置けないなら縦に積みます。1 枚が高くなるぶん 1 画面に入る注文は減りますが、
   切り落とされて押せなくなるよりはるかにましです。 */
/* --------------------------------------------------------------------------
   35-4. 3 列をやめる下限（2026-09-13 に追加）
   --------------------------------------------------------------------------
   ★ 35-2 で列を「常に 3 列」にしたとき、下限を付け忘れていました。
     iPad で 3 列を保つことだけを見ていて、それより狭い画面を測っていなかったためです。

   実測（幅を 320〜1600 で振った結果）:

       660px 以上 … 厨房・ホールとも はみ出し 0
       600px      … ホールで 12 件（伝票カードのボタンが縮まない）
       540px      … 厨房 3 件 / ホール 30 件
       480px      … 厨房 15 件 / ホール 38 件、横スクロールも発生
       390px      … 1 列 85px。3 列のまま潰れて 110 件

   3 列は「受付 → 調理中 → 提供待ち」「在卓 → お会計待ち → バッシング」という
   仕事の順序そのものなので、入るかぎり崩しません。ただし物理的に入らない幅では、
   潰して読めなくするより縦に積むほうがましです。
   境目は実測の 660px に余裕を見て 700px にしていました。

   ★ 2026-09-13 に 729px へ上げました。
     上の実測はページ全体の横スクロール（document の溢れ）を見たもので、
     <b>レーンの中で切られているぶんを数えていませんでした</b>。
     .lane は overflow: hidden なので、はみ出しは横スクロールにならず黙って切れます。
     要素ごとに測り直した結果:

         730px 以上 … 厨房・ホールとも 溢れなし
         720px      … ホール 5 件・最大 3px（伝票カードのボタン）
         710px      … ホール 5 件・最大 4px
         700px      … 厨房 3 件・最大 4px ／ ホール 5 件・最大 6px

     実機は iPad mini の縦 744px と旧 iPad の 768px。どちらも 3 列のまま残ります。

   ★ 上の帯（31 画面共通）を畳むのは別の話なので、699px に置いたままにします。
     あちらは 430px 級で右端が出る問題で、一緒に上げると
     700px 台で営業日が消えます。 */
@media (max-width: 729px) {
  .kitchenboard .board,
  .theme-desk .hallboard .board,
  .hallboard .board {
    grid-template-columns: minmax(0, 1fr);
    max-width: none;
  }
}

@media (max-width: 699px) {
  /* ホールの見出しは左右 40px の内側余白と「＋ 新規お客様」を持っていて、
     320px では題だけで幅を超えます。余白を詰めて、ボタンは次の行へ落とす */
  .hallboard .section-title:has(h1) { padding: 16px 20px; flex-wrap: wrap; }
  .hallboard .section-title__action { margin-left: 0; }

  /* ★ 上の帯（31 画面共通）は、この幅だと中身が並びきりません。
       実測 430px で右端が 517px まで出て、ページ全体に横スクロールが出ていました
       （厨房・ホールとも docW=517 で同値。犯人は本文ではなく帯）。

       営業日と「未提供」の語を落として 126px ぶん詰めます。
       営業日は画面の中の見出しにも出ているので、ここでは省けます。
       未提供は鍋のアイコンと件数が残るので、意味は伝わります。
       受付中／停止中のピルは残します。ここだけは色ではなく文字で伝えたいので。 */
  .topbar__day { display: none; }
  .topbar__pending-label { display: none; }

  /* それでも足りない幅（320px 級）では、ページごと横に動かすのではなく
     帯の中だけを動かせるようにする。情報はどれも消しません */
  .topbar { overflow-x: auto; scrollbar-width: none; }
  .topbar::-webkit-scrollbar { height: 0; }
}

/* --------------------------------------------------------------------------
   35-6. 操作ボタンを縦に積む幅（2026-09-13 に 920 → 1000px へ）
   --------------------------------------------------------------------------
   ★ 境目を上げた理由。
     もともとは 920px でした。921〜1000px でも横に 2 つ置けていたのは、
     35-3 がボタンの文字を 13px に縮めていたからです。
     設計（iPad01）に合わせて 14px に戻したところ、この帯が溢れました。

     実測（文字を 14px に戻したあと）:
         1024px … 溢れなし（レーン 293px）
          960px … 3 件・最大 2px（.ticket__actions）
          921px … 6 件・最大 15px（.ticket__actions）

     横に 2 つ置くには 1 レーン 269px ほど要ります。1024px で 293px、
     960px で 267px なので、境目はそのあいだ。切りよく 1000px にしました。

   ★ 縮めるのではなく積む、というのがこの帯の決め事です（35-3 の注記）。
     積むと 1 枚が高くなり、1 画面に入る注文が 1〜2 枚減ります。
     それでも、卓名やボタンの文字を削るより安いと判断しています。 */
@media (max-width: 1000px) {
  .kitchenboard .ticket__actions { flex-direction: column; }
  /* ★ 高さの指定はここに書きません（2026-09-26）。--btn-h が 44px で決めます。
       もとは「縦に 2 つ積むので 56 → 48 まで落とす」と書いてありましたが、
       いまは全画面 44px なので、幅で落とす必要そのものがありません。 */
}

@media (max-width: 920px) {
  /* ★ 縦向きでは注文番号を出しません（2026-09-13）。
       ここだけの事情です。頭に入るのは「入れ物 183px」で、
       卓名 134 ＋ 番号 29 ＝ 163 に ✕ の場所 30px を足すと入りません。
       そのため頭が 4 行に割れて 106px になりました（横向きは 54px）。
       4 行の頭は、詰めた意味を打ち消すどころか読みにくくなります。

       消すのは番号です。理由は、番号が「厨房の控えや伝票と突き合わせるときだけ」
       使う値だからです（board.html の注記）。卓名・同卓・経過時間は
       運ぶ判断そのものなので残します。
       キャンセルの確認ダイアログには番号が出るので、取り違えの守りは残ります。

       ★ display: none で構いません。読み上げからも消えますが、
         同じ情報は伝票の中の他の値（卓名）で足ります。
         ここを visibility や位置ずらしで隠すと、場所が空かず意味がありません。 */
  .kitchenboard .ticket__head .ticket__name { display: none; }

  /* 明細を 15 → 14px（CLAUDE.md の下限ちょうど）。
     ★ これは見た目の好みではなく、はみ出しを止めるための寸法です。
       日本語の行分割には「あと数 px 足りないだけでは折り返さず、
       もう少し狭くなってはじめて折り返す」帯があります。
       実測では品名の入れ物が 143〜149px のあいだ、
       「サッポロ赤星（中瓶）」（150px）が 1 行のまま最大 7px はみ出し、
       .lane の overflow: hidden に無言で切られていました。
       142px 以下では正しく 2 行になります。
       14px にすると同じ品名が 140px に収まり、この帯を踏みません。
     ★ :last-child ぶんも書くこと。33 節が
       「li, li:last-child」の 2 本立て（詳細度 0,3,1）で罫線を指定しているため、
       li だけに書くと最後の 1 行に届きません（これで 1 度空振りしています）。 */
  .kitchenboard .ticket__items li,
  .kitchenboard .ticket__items li:last-child { font-size: 14px; }

  .hallboard .lane__body { padding: 8px; gap: 8px; }
  .hallboard .billcard .btn { padding-inline: 8px; }
}

/* ==========================================================================
   36. ログイン — 設計「現08 ログイン」641:5267（2026-09-12）
   --------------------------------------------------------------------------
   ※ 33〜35 節と同じく、置き場所は 32 節（広い画面）の手前。

   ★ なぜ直したか
     この画面は layout/plain なので .theme-desk が付きません。
     そのため寸法も配色もお客さま側の土台のままで、1280px の PC で開いても
     390px のスマホで開いても<b>ほぼ同じ絵</b>になっていました（実測）。
     地は白、カードは枠も影も無し（.theme-snow が .card の枠を透明にしている）、
     店名は字間 .22em。結果「スマホのログイン画面」に見えていました。

   ★ 効いているのは地の色です
     白地に白いカードだと輪郭が無く、ページそのものが細い柱に見えます。
     地を #f7f9fb（スタッフ画面の面）にしてカードに枠を戻すと、
     同じ 400px でも「アプリのログイン」に見えます。

   ★ .theme-desk を付ける手もありましたが、やめました。
     layout/plain はエラー画面と QR 印刷にも使われていて、
     body に足すとそちらまで一緒に動きます。
     他の画面と同じく、main に目印（.loginpage）を付けて絞ります。

   ★ 直値で書く理由
     .theme-snow は --r-sm を 12px、--border-strong を黒 20%、
     --surface を #f7f9fb に定義しています。設計の 4px / #e8e8e8 / #ffffff とは
     別物なので、変数を経由すると設計どおりになりません。
   ========================================================================== */

/* 地と、中央に寄せる枠組み。設計は縦横とも中央、要素の間は 24px */
/* ★ 地は #ffffff（設計 ト08 725:5301 の実測）。
     #f7f9fb は --surface の値で、名前から選ぶと当たりがちだが設計は白。
     地を白にすると、白いカードを分けているのは 1px の枠だけになる。
     だから下の枠色（#e3e3e3）は薄くしすぎないこと。 */
.loginpage { background: #ffffff; }
.loginpage__body {
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 24px;
}

/* 店名。字間を .22em（≒5px）から 2px に詰める。
   広い字間は、お客さま側の「のれん」の意匠として入れていたもの */
/* ★ 縦積みにしたのは、見学入口（/demo/staff）がここにロゴを置くためです。
     ログイン画面にはロゴが無いので、<img> が無ければ今までどおり
     店名と役割が 2 行で中央に並ぶだけで、見た目は変わりません。
     設計 ト08 の店名の段は gap 4。 */
.loginpage__brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  text-align: center;
}
/* 見学入口のロゴ。白地はそのまま残す（.brand-logo と同じ扱い）。
   72px はお客さま側の入口（.demogate__logo）とそろえてある */
.loginpage__logo {
  width: 72px;
  height: 72px;
  margin-bottom: 4px;
  border-radius: 50%;
  object-fit: cover;
  background: #fff;
}
.loginpage__name {
  margin: 0;
  /* ★ ロゴの紋の中の「米粉と鉄板」と同じ明朝にそろえる
       （2026-09-23・店主の指示「フォントはロゴと一緒にして」）。
       var(--font-serif) ではなく --font-brand を使うこと。
       前者はテーマがゴシックに潰すので、書いても明朝になりません。 */
  font-family: var(--font-brand);
  font-size: 24px;
  font-weight: 700;
  letter-spacing: 2px;
  line-height: 1.2;
  color: #1c1c1c;
}
/* ★ margin-top は持たせないこと。
     .loginpage__brand を flex（gap 4）にしたので、margin 4 を残すと
     <b>足されて 8 になります</b>（2026-09-23 に実測して気づきました）。
     設計の店名→役割は 4。間隔を持つのは gap 側の 1 か所だけにします。
     ロゴ→店名が 8 なのは、ロゴに margin-bottom: 4 を足しているためで、
     こちらは意図どおりです（gap 4 ＋ margin 4）。 */
.loginpage__role {
  margin: 0;
  font-size: 13px;
  letter-spacing: 3px;
  color: #828282;
}

/* カード。.theme-snow が枠を透明・影を無しにしているので、両方戻す。
   面も --surface（#f7f9fb）のままだと地と同化するので白を指定する */
/* ★ .loginpage を前に付けること（詳細度 0,2,0）。
     .loginpage__card 単体（0,1,0）だと .theme-snow .card（0,2,0）の
     border-color: transparent に負けて、枠が透明のままになります。
     実測で 1px rgba(0,0,0,0) になっていて気づきました（2026-09-12）。 */
/* 設計 ト08 の実測: 400x400・角丸 0・地 #ffffff・枠 1px #e3e3e3。
   ★ 角丸は 0。入力欄とボタンだけが 8 で、カードは角を立てている。
     「カードだから丸める」と思い込むと 6px になる（実際そうなっていた）。 */
.loginpage .loginpage__card {
  width: min(400px, 100%);
  background: #ffffff;
  border: 1px solid #e3e3e3;
  border-radius: 0;
  box-shadow: none;
}
.loginpage__card .card__body { padding: 32px; }
/* カードの中の間隔は 20px（共通の .stack は 16px） */
.loginpage__card .card__body.stack > * + * { margin-top: 20px; }

/* 入力欄（設計の「入力欄」部品 45:3110 と同じ寸法）。
   ラベル 16px 中太 → 8px あけて → 高さ 48px の枠 */
.loginpage .label {
  font-size: 16px;
  font-weight: 500;
  letter-spacing: normal;
  color: #1c1c1c;
}
/* 設計 ト08 の実測: 336x48・pad 0/12・角丸 8・地 #ffffff・枠 1px #e3e3e3。
   ★ 角丸はここが 8 で、外側のカードが 0。カードと逆なので取り違えないこと。
     border-radius は 2 行下の .loginpage .input, .select でまとめて 8 にしている。 */
.loginpage .input {
  min-height: 48px;
  padding: 0 12px;
  font-size: 16px;
  background: #ffffff;
  border: 1px solid #e3e3e3;
  border-radius: 4px;
  color: #1c1c1c;
}
.loginpage .input:focus { border-color: var(--action); }
/* ★ 角丸は共通の 8px を継ぐ（2026-09-20）。ここだけ 4px が残っていました */
.loginpage .input, .loginpage .select { border-radius: 8px; }
/* 欄と欄、欄とボタンの間も 20px にそろえる（共通の .field は 16px） */
.loginpage .field { margin-bottom: 20px; }

/* ボタン。角丸は .btn の 8px を継ぎます
   （2026-09-20 に .btn を直値 8px へ固定したので、ここで戻す必要がなくなった）。
   主ボタンは盤面と同じ「押せる緑」。.theme-snow の --accent は黒なので指定する */
.loginpage .btn {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: normal;
}
/* ★ ログイン画面はベタ書きだった（2026-09-16 に変数へ寄せた）。
      トークンを通らない色は、色を変えたときに必ず取り残される。
      ここは layout/plain なので .theme-desk が付かず、
      上の .theme-desk .btn--primary が効かない——だから個別に要る。 */
.loginpage .btn--primary {
  --btn-bg: var(--action);
  --btn-fg: var(--on-action);
  --btn-bd: var(--action);
}
.loginpage .btn--primary:hover {
  --btn-bg: var(--action-hover);
  --btn-bd: var(--action-hover);
}
/* 「ゲストで参加する」は枠線のまま。白地に薄い枠 */
.loginpage .btn:not(.btn--primary) {
  --btn-bg: #ffffff;
  --btn-bd: #e3e3e3;
  --btn-fg: #1c1c1c;
}

/* カードの中の注記と、カードの外の出口リンク */
/* 設計は 12px。カードの中でいちばん小さい字で、
   入力欄（16）・ボタン（15）より一段下げて注記だと分かるようにしてある */
/* ゲストの入口（設計 トi08s 1620:14352）。
   白地 ＋ 緑の枠 ＋ 緑の太字。塗らないのは、押させたい主役が上の
   「ログイン」だからです。同じ緑の塗りが 2 つ縦に並ぶと、どちらが本筋か
   分からなくなります。枠と字だけ緑にして「押せるが脇道」を表します。

 ★ 設計の緑（#0e9721）は採っていません。白地に対して 3.84:1 しかなく、
   AA の 4.5:1 に届かないためです。--action（#0b7a1a）は 5.51:1 で届きます。
   15px の太字は「大きい文字」の扱い（18.66px 以上）に入らないので、
   3.0:1 ではなく 4.5:1 が要ります。
   見た目はほとんど同じですが、薄い緑は屋外や安いタブレットで先に読めなくなります。 */
/* ★ セレクタは .loginpage .btn.loginpage__guest（0,3,0）にすること。
     .loginpage .loginpage__guest（0,2,0）だと、すぐ上の
     .loginpage .btn:not(.btn--primary) に負けます。
     :not() は<b>中のクラスが詳細度に数えられる</b>ので、あちらは (0,3,0) です。
     CLAUDE.md の「.theme-desk .btn は (0,2,0) なので単一クラスでは勝てない」と
     同じ罠で、2026-09-23 に実測で踏みました（枠が灰のままだった）。 */
.loginpage .btn.loginpage__guest {
  --btn-bg: #ffffff;
  --btn-bd: var(--action);
  --btn-fg: var(--action);
}

/* 「または」の仕切りと、ゲストの補足。
   ★ --text-faint は使わないこと。.theme-snow では rgba(28,28,28,.38)＝
     実効 #a9a9a9 で、白地に対して 2.35:1 しかありません。
     2026-09-22 に「補足は --text-muted に揃える」と決めた件と同じ話です
     （app.css 393 行）。 */
.loginpage__or { color: var(--text-muted); }
.loginpage__guest-note { color: var(--text-muted); }

.loginpage__note {
  margin: 0;
  font-size: 12px;
  line-height: 20px;
  color: #828282;
  text-align: center;
}
.loginpage__link { margin: 0; font-size: 13px; }
.loginpage__link a { color: var(--action); }

/* ==========================================================================
   37. 通知とページ見出しのあいだ（2026-09-12）
   --------------------------------------------------------------------------
   厨房・ホール・品切れの 3 画面は、ページ見出しが本文のいちばん上に来る前提で
   margin-top を 0 にしてあります。

     .hallboard .section-title:has(h1)   4025 行
     .kitchenboard .griddle              33 節
     .soldoutpage .soldout-head          34 節

   ところがこの 3 画面はどれも操作のたびにフラッシュメッセージが出ます
   （「『テーブル3』を片付け完了にして、10 名さまをご案内しました」など）。
   通知が出ると、そのゼロがそのまま効いて<b>通知と見出しがくっつきます</b>。
   実際ホール盤面で「＋ 新規お客様」のボタンが通知の枠に重なっていました。

   ★ :has(.alert) で「通知が実際に出ているときだけ」に絞ります。
     .stack-sm（通知の入れ物）は通知が無くても空の箱として必ず出力されるので、
     :empty では判定できません（Thymeleaf が中に改行を残すため、空になりません）。
   ========================================================================== */
.hallboard    .stack-sm:has(.alert) + .section-title,
.kitchenboard .stack-sm:has(.alert) + .griddle,
.soldoutpage  .stack-sm:has(.alert) + .soldout-head { margin-top: 24px; }

/* ==========================================================================
   38. ダッシュボード — 設計「01 ダッシュボード」15:319（2026-09-12）
   --------------------------------------------------------------------------
   ※ 33〜37 節と同じく、置き場所は 32 節（広い画面）の手前。

   ★ 構造は設計とほぼ一致していました。
     見出し → いまの状況（3 枚）→ 今日の数字（3 枚）→ 折れ線 → ランキング表、
     という並びも、.statrow / .statcard / .panel / .linechart という部品も同じ。
     違っていたのは寸法と色だけなので、ここではその差だけを埋めます。

   ★ .sheet は売上画面（admin/sales.html）と共用です。
     共通側は 1 行も触らず、main に付けた .dashpage の中だけで上書きします。

   ★ 色は直値。.theme-snow の --border は「黒 10%」で、
     設計の #e8e8e8 とは別物です（実効 0.83px のグレーになり枠が見えない）。
   ========================================================================== */

/* --------------------------------------------------------------------------
   38-1. 面と間隔
   --------------------------------------------------------------------------
   ★ 地を白にします（設計の「ダッシュボード」フレームは #ffffff）。

     .sheet は 3697 行のコメントのとおり「読む画面だから面を分ける」という
     判断で var(--surface)（#f7f9fb）のグレーを敷いています。
     設計は白地で、カードの #e8e8e8 の枠だけで塊を作る形でした。
     設計を採ったので、売上画面（グレーのまま）とは地の色が分かれます。
     戻すならこの 1 行を消してください。 */
.dashpage { background: #ffffff; }
/* 節と節の間は 48px（.sheet は 20px）。設計の本文が gap 48 */
.dashpage { gap: 48px; }

/* --------------------------------------------------------------------------
   38-2. 見出し
   -------------------------------------------------------------------------- */
/* 副題は 14 → 16px。日付は本文と同じ大きさで読む（設計 16px） */
.dashpage .page-head__sub { font-size: 16px; color: #828282; }

/* --------------------------------------------------------------------------
   38-3. 数字カード
   --------------------------------------------------------------------------
   「いまの状況」と「今日の数字」の 2 段が同じ .statcard を使っています。 */
/* ★ 数字カードは 3 列のまま崩さない（2026-09-13 にタブレット対応）。
     共通の .statrow は @media (max-width: 960px) で 1 列に落ちるので、
     iPad の縦（834 / 768）だと 3 枚が縦に積まれ、
     「在席・進行中・提供待ち」を一目で見比べられなくなっていました。
     3 つ並んでいることに意味がある行なので、狭くても 3 列を保ちます。
     minmax(0, …) の 0 が要ります。grid の列は既定で中身より狭くならないため、
     これが無いと縮まずに親をはみ出します（厨房・ホールと同じ）。 */
.dashpage .statrow { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* トンマナは Render（Figma 07・2026-09-13 店主承認）：角丸 0・枠 #e3e3e3・影なし。
   設計 15:319 は角丸 10・#e8e8e8 ですが、寸法（レイアウト）だけを設計から取り、
   面の作りは 07 のトンマナに合わせます。表（30 節）が既に #e3e3e3 なので、
   ここが #e8e8e8 のままだと同じ画面で罫の濃さが 2 種類になります。 */
.dashpage .statcard {
  padding: 20px;
  border-color: #e3e3e3;
  border-radius: 0;
  box-shadow: none;
  background: #ffffff;
}
/* 前週比の行は折り返してよい。
   「＋6.4%」＋「先週の同じ曜日と比べて」で 198px あり、
   1 列 208px（768px 幅）だとカードの内側 166px に入りません。
   広い画面では 1 行に収まるので、ここを足しても見た目は変わりません。 */
.dashpage .statcard__delta { flex-wrap: wrap; }
.dashpage .statcard__label { color: #828282; }
.dashpage .statcard__value { color: #1c1c1c; }
/* 値に添える単位（「3 卓」の「卓」）。設計は 15px */
.dashpage .statcard__unit { font-size: 15px; color: #828282; }
.dashpage .statcard__note { color: #828282; }

/* --------------------------------------------------------------------------
   38-4. パネル（折れ線とランキング）
   -------------------------------------------------------------------------- */
.dashpage .panel {
  border-color: #e3e3e3;
  border-radius: 0;
  box-shadow: none;
  background: #ffffff;
}
/* 表のパネルだけ中の間隔が 16（グラフのパネルは 12）。
   :has で「表を抱えているパネル」に絞る */
.dashpage .panel:has(.table-wrap) { gap: 16px; }

/* --------------------------------------------------------------------------
   38-5. 折れ線グラフ
   -------------------------------------------------------------------------- */
.dashpage .linechart__grid line { stroke: #e3e3e3; }
/* 線は 2 → 2.5px（設計） */
.dashpage .linechart__line { stroke: var(--action); stroke-width: 2.5; }
/* ★ 線の下の塗りは設計にありません。
     設計の「折れ線」フレームには罫線・線・点しか無く、面が塗られていません。
     マークアップと Java（SalesView.Chart.area()）はそのまま残し、
     この画面でだけ隠します。戻すのはこの 1 行を消すだけ。 */
.dashpage .linechart__area { display: none; }
/* 点は 9px の白抜きに枠 2.5px。設計では最後の点も白抜きのまま */
.dashpage .linechart__dot { border: 2.5px solid var(--action); background: #ffffff; }
.dashpage .linechart__dot.is-last { background: #ffffff; }
/* 目盛りと横軸。設計では最後の「2時」も他と同じ色・太さ */
.dashpage .linechart__ylabel { color: #828282; }
.dashpage .linechart__xaxis i { color: #828282; }
.dashpage .linechart__xaxis > span.is-last i { color: #828282; font-weight: 400; }
/* ピークに添える金額だけ緑の太字（設計の「¥7,100」） */
.dashpage .linechart__plabel { color: var(--action); font-weight: 700; }

/* --------------------------------------------------------------------------
   38-6. ランキング表
   --------------------------------------------------------------------------
   ★ ここが設計といちばん離れていました。
     共通の .theme-desk .table は見出し行をティールで塗って白抜き 16px にします
     （入力や並べ替えをする管理画面の表の作り）。
     設計のこの表は<b>パネルの中に置いた読み物</b>で、見出しは塗らず
     13px のグレー、行は上に細い罫線を引くだけです。
     表の外側にすでにパネルの枠があるので、中でもう一度濃い帯を出すと
     箱の中に箱がある見え方になります。 */
.dashpage .table--ranking th {
  padding: 10px 12px 10px 0;
  background: transparent;
  color: #828282;
  font-size: 13px;
  font-weight: 500;
  border-bottom: 0;
}
.dashpage .table--ranking td {
  padding: 14px 12px 14px 0;
  font-size: 15px;
  border-bottom: 0;
  border-top: 1px solid #e3e3e3;
}
/* 商品名だけ一段太く（設計は商品のみ Medium、他は Regular） */
.dashpage .table--ranking td:first-child { font-weight: 500; }
/* 縞は引かない（設計の行はすべて白） */
.dashpage .table--ranking tbody tr:nth-child(even) { background: #ffffff; }
.dashpage .table--ranking tbody tr:hover { background: #f3faf8; }
/* ★ 商品名だけ折り返しを許す（2026-09-13）。
     .table は white-space: nowrap（狭い端末で表を崩さないため）ですが、
     商品列は table-layout: fixed の「残り全部」なので、画面が狭いほど細くなります。
     実測では 1024px で 121px、768px で 73px まで縮み、
     「きのことチーズの鉄板オープンオムレツ」が 148px はみ出していました。
     品名は 2 行になってよい情報なので、ここだけ折り返します
     （品切れ・残数の表が td.wrap で同じことをしているのと同じ考え方）。 */
.dashpage .table--ranking td:first-child { white-space: normal; }

/* 列幅（設計：商品は残り全部／カテゴリ 170／数量 120／売上 150／構成比 110） */
.dashpage .table--ranking { table-layout: fixed; }
.dashpage .table--ranking th:nth-child(2), .dashpage .table--ranking td:nth-child(2) { width: 170px; }
.dashpage .table--ranking th:nth-child(3), .dashpage .table--ranking td:nth-child(3) { width: 120px; }
.dashpage .table--ranking th:nth-child(4), .dashpage .table--ranking td:nth-child(4) { width: 150px; }
.dashpage .table--ranking th:nth-child(5), .dashpage .table--ranking td:nth-child(5) { width: 110px; }

/* --------------------------------------------------------------------------
   38-7. 狭い画面（2026-09-13 に追加）
   --------------------------------------------------------------------------
   38-3 で数字カードを「常に 3 列」にしたとき、厨房・ホードと同じく下限を
   付け忘れていました。実測すると 600px で 1 枚 152px になり、
   「¥53,302」（32px で約 124px）がカードの内側 112px に入りません。 */

/* 表の列幅は 1432px 幅を前提にした固定値（170/120/150/110 の合計 550px）です。
   本文が 556px を切ると入らなくなるので、そこから下は内容に合わせる形に戻し、
   足りないぶんは .table-wrap（overflow-x: auto）の中で横に送ります。
   境目の 760px は実測から。iPad の縦（768px）はここに掛かりません。 */
@media (max-width: 760px) {
  .dashpage .table--ranking { table-layout: auto; }
  .dashpage .table--ranking th,
  .dashpage .table--ranking td { width: auto; }
}

/* 3 列をやめる下限。厨房・ホールの 700px と同じ境目にそろえる */
@media (max-width: 699px) {
  .dashpage .statrow { grid-template-columns: minmax(0, 1fr); }
}

/* ==========================================================================
   39. 売上 — 設計「14 売上」17:1038 × トンマナ Render（2026-09-13）
   --------------------------------------------------------------------------
   ★ 中身の並び（月ナビ → 数値 3 枚 → 売上推移 → 配分の二列 → ランキング）は
     もともと 17:1038 から実装してあるので、ここで足すのは 2 つだけです。
       ・見出しの帯：題と月ナビを 1 本に（テンプレート側で同居させた）
       ・トンマナ：ダッシュボード（38 節）と同じ Render
   ★ .sheet のグレー地は設計に無いので白へ。38-1 が「売上はグレーのまま」と
     書いていましたが、店主が 17:1038 を正としたので、そちらも白になりました。
   ★ 折れ線の金額ラベルは触らないこと。売上（月次）は各点グレー＋最後だけ緑、
     という共通側の既定が設計そのものです（ダッシュボードだけ 38-5 で全緑）。 */
.salespage { background: #ffffff; }

/* 題と月ナビの間はトi18（737:7983）の 24px（共通の .page-head は 12px）。
   ★ ここは設計に根拠があるので、2026-09-20 に共通を 12px へそろえたときも残しました。
   月ナビは題のすぐ隣に置く（配置はトi18、デザインは 17:1038 のまま） */
.salespage .page-head { gap: 24px; }

/* ★ 売上の月ナビ上書きは廃止（2026-09-18）。帯が .datenav になり、
     箱を落とす必要そのものが無くなりました。 */

.salespage .statcard {
  border-color: #e3e3e3;
  border-radius: 0;
  box-shadow: none;
  background: #ffffff;
}
.salespage .statcard__delta { flex-wrap: wrap; }
.salespage .panel {
  border-color: #e3e3e3;
  border-radius: 0;
  box-shadow: none;
  background: #ffffff;
}

/* 期間の切り替え（1か月／3か月…）。角だけ落とし、選択中の緑は残す */
.salespage .segmented {
  border-radius: 0;
  border-color: #e3e3e3;
  background: #f0f0f0;
}
.salespage .segmented__item { border-radius: 0; }

.salespage .linechart__grid line { stroke: #e3e3e3; }
.salespage .linechart__line { stroke: var(--action); stroke-width: 2.5; }
.salespage .linechart__area { display: none; }
.salespage .linechart__dot { border: 2.5px solid var(--action); background: #ffffff; }
.salespage .linechart__dot.is-last { background: #ffffff; }

/* ランキング表はパネルの中の読み物（38-6 と同じ理由・同じ寸法） */
.salespage .table--ranking th {
  padding: 10px 12px 10px 0;
  background: transparent;
  color: #828282;
  font-size: 13px;
  font-weight: 500;
  border-bottom: 0;
}
.salespage .table--ranking td {
  padding: 14px 12px 14px 0;
  font-size: 15px;
  border-bottom: 0;
  border-top: 1px solid #e3e3e3;
}
.salespage .table--ranking td:first-child { font-weight: 500; white-space: normal; }
.salespage .table--ranking tbody tr:nth-child(even) { background: #ffffff; }
.salespage .table--ranking tbody tr:hover { background: #f3faf8; }
.salespage .table--ranking { table-layout: fixed; }
.salespage .table--ranking th:nth-child(2), .salespage .table--ranking td:nth-child(2) { width: 170px; }
.salespage .table--ranking th:nth-child(3), .salespage .table--ranking td:nth-child(3) { width: 120px; }
.salespage .table--ranking th:nth-child(4), .salespage .table--ranking td:nth-child(4) { width: 150px; }
.salespage .table--ranking th:nth-child(5), .salespage .table--ranking td:nth-child(5) { width: 110px; }

/* ★ 狭い画面で見出しを畳むのは .page-head だけでは足りない（2026-09-19）。

   店主の指示「３パターンズレないようにね」で 1432 / 1024 / 1920 の 3 幅を
   ぜんぶ測ったところ、1024px（iPad）でこの 3 画面だけ畳まれずに残っていました。

     画面        題の x    帯の高さ
     ホール       128       82     ← 畳まれていない
     品切れ       128       82     ← 畳まれていない
     食材         128       82     ← 畳まれていない
     ほかの 8 枚   112       74

   題を .page-head ではなく .section-title 系で出している 3 枚で、
   下の .page-head { padding: 12px 24px } が当たりません。16px 左に残ります。

   ★ min-width: 700px を付けているのは、699px 以下に別の指定
     （.hallboard は 16px 20px）があり、そちらはこれより前にあるため、
     付けないと後ろのこれが勝って 699px 以下の指定が死ぬからです。

   ★ この規則は次の節（端末の段差）の<b>外</b>に置くこと。中に入れると、
     あの節を「節の見出しのあとの最初の @media (max-width: 1380px)」で
     探しているテスト（DeviceStepDownTest・TitleStepsDownOnIpadTest）が
     こちらを掴んで、5 件まとめて落ちます（2026-09-19 に実際そうなりました）。

   ★ この説明文に節の名前をそのまま書かないこと。
     書くとテストの indexOf がこの<b>コメント</b>を先に見つけて、
     外へ出したのに同じ 5 件が落ち続けます（これも実際に踏みました）。 */
@media (max-width: 1380px) and (min-width: 700px) {
  /* ★ 2026-09-26 に 12px → 8px。下の .page-head と同じ値にそろえます。
       ここだけ 12px で残すと、ホール・品切れ・食材の 3 画面だけ
       題が 4px 下にいる状態に戻ります（実際にその状態を 1 度作りました）。 */
  .hallboard .section-title:has(h1) { padding: 8px 24px; }
  .soldoutpage .soldout-head        { padding: 8px 24px; }
  .stockpage .inv-ingredients       { padding: 8px 24px; }
}

/* ==========================================================================
   40. 端末の段差 — iPad の帯（1380px 以下）は一段下げる（2026-09-13）
   --------------------------------------------------------------------------
   店主とB案で合意したルール：
     1432（設計幅）が基準。iPad の帯では<b>大きい文字だけ一段落とし、
     器の余白も一段詰める</b>。本文・表・ボタンの文字（床）は触らない。
     PC（1440+）は文字据え置きでガターだけ広げる（32 節）。

   境目の 1380px は、盤面のサイドバー畳み（35-1）と同じ線です。
   「サイドバーが畳まれる幅＝タブレットの帯」の 1 本に段差もそろえます。

   ★ 置き場所はここ（38・39 節の後ろ）。
     .dashpage .page-head__sub（0,2,0）などと同じ詳細度で上書きするので、
     前に置くと後勝ちで負けます。32 節（min-width）とは帯が重ならないので順不同。
   ★ 床は書かないこと。本文 16・ボタン 15・列見出し 12・タップ 48・
     表の行 68/64・左右 24 はこの帯でも据え置きです。 */
@media (max-width: 1380px) {
  /* 文字：一段だけ。
     ★ h1 付きで書くこと。.theme-desk h1（30 節・0,1,1）が 32px を持っていて、
       クラス単独（0,1,0）では負けます。値と箱の題だけ縮んで題だけ 32px のまま、
       という形で 1 回踏みました（実測で発見）。 */
  h1.page-head__title,
  .page-head__title { font-size: 28px; line-height: 32px; }
  .kitchenboard .griddle h1 { font-size: 28px; line-height: 32px; }

  /* ★ 題を .section-title__text で出している画面も落とす（2026-09-18・店主の指摘）。

       「iPad の食材・在庫、品切れ・残数管理、税理士の見出しのフォントが
         大きいけど、これレスポンス対応できてないよね」

     そのとおりでした。この帯は .page-head__title しか見ておらず、
     .section-title__text の題は素通りしていました。落ちる場所は
     別にあるのですが、そちらは 960px 以下です。

         1380px 以下 … .page-head__title       32 → 28   15 枚
          960px 以下 … h1.section-title__text  32 → 24    8 枚

     iPad は 1024px。ちょうど 2 つの帯のあいだに落ちていました。
     実測（1432 と 1024 で全 22 画面）で取り残されていたのは
     ホール・会計／品切れ・残数／食材・在庫／税理士 5 枚の 8 枚です。

     ★ ホール・会計も含めています。立って使う画面を小さく組まない決まりは
       ありますが（CLAUDE.md）、厨房ボードは前から一段下がっています（1 つ上の行）。
       立って使う 2 画面で動きが違うほうが説明できません。

     ★ .theme-desk h1 付きで書くこと。30 節の
       .theme-desk h1.section-title__text（0,2,1）に、
       クラス単独でも h1 だけでも負けます。 */
  .theme-desk h1.section-title__text { font-size: 28px; line-height: 32px; }

  /* ★ 品切れ・残数だけは、これを足さないと落ちません。
       あちらは .soldoutpage .soldout-head .section-title__text（0,3,0）で
       32px を持っていて、上の行（0,2,1）では負けます。
       クラスの数が 3 対 2 なので、後ろにあっても勝てません。
       実測で 8 枚中 7 枚だけ直っているのを見つけました。 */
  .soldoutpage .soldout-head .section-title__text { font-size: 28px; line-height: 32px; }
  .theme-desk h2.panel__title,
  .panel__title { font-size: 18px; line-height: 24px; }
  .statcard__value { font-size: 28px; line-height: 34px; }
  .dashpage .statcard__value { font-size: 28px; line-height: 34px; }
  .dashpage .page-head__sub { font-size: 14px; }

  /* 余白：一段だけ。上下 15px はカードの枠 1px を返して 16 にするいつもの理由。
     ★ --main-pad-y はここで触りません（2026-09-13）。
       基準が 64 → 32px になったので、48px に「詰める」と逆に広がります。
       Figma も上下余白を画面幅で変えていません。
     ★ ブロックの間（48→32）は 41 節に移しました（2026-09-13）。
       41 節がこの帯より後ろにあり、あちらの .theme-desk .staff-main > main は
       詳細度 0,2,1。ここに .dashpage { gap: 32px }（0,1,0）を残すと、
       読めるのに効かない 1 行になります。 */
  /* ★ 見出しの帯を iPad で 64px にそろえる（2026-09-26・店主の決定
       「8 の倍数だし帯 64px 題の床 48 にするか、なんか締まってみえるし」）。

       帯の高さを決めているのは<b>余白ではなく中身</b>です。実測（1024px）:

         上 8 ＋ 中身 50 ＋ 下 8 ＝ 66      ← 中身 50 は題の床（min-height）
         上 8 ＋ 中身 48 ＋ 下 8 ＝ 64      ← 床を 48 に下げるとこうなる

       ★ 床を 48 より下げないこと。帯の中のボタンが 48px（--tap）なので、
         40 にするとボタンのある画面は 64、無い画面（厨房・品切れ・
         ダッシュボード）は 56 になり、画面ごとに題がずれます。
         48 はボタンと同じ値なので、ボタンの有無にかかわらず 64 に揃います。

       ★ 余白だけ詰めても 8px しか減りません（表の行 0.12 行ぶん）。
         数字を 8 の倍数にそろえるための変更で、詰めるための変更ではありません。

       ★ PC（1432px）は 16 ＋ 50 ＋ 16 ＝ 82 のままです。
         ここは iPad の段差ブロックなので PC には効きません。 */
  .page-head { padding: 8px 24px; }

  /* 題の床。base（17 節 .page-head__title／30 節 .theme-desk h1.section-title__text）の
     50px を、iPad だけ 48px に下げます。base は動かしません。 */
  .page-head__title                  { min-height: 48px; }
  .theme-desk h1.section-title__text { min-height: 48px; }

  /* ★ 日付の帯（売上・注文履歴・税理士 5 画面）の入力欄も 48px に。
       この 7 画面は見出しの中に .datenav を抱えていて、その中の入力欄が
       <b>指定ではなく中身の計算で 50px</b> になります（実測）。
       題の床だけ 48 に下げても、こんどは入力欄が天井になって帯が 66 のまま残り、
       ほかの 18 画面（64）と 2px 割れます。並んでいる ＜ ＞ ボタンは元から 48px。 */
  .datenav .input { height: 48px; }

  /* ──────────────────────────────────────────────────
     一覧の表を iPad で詰める（2026-09-26・試し）
     ──────────────────────────────────────────────────
     ★ 行の高さは <b>中身のいちばん高いもの</b>で決まります。余白ではありません。
       実測（1024 幅）:
         商品     編集ボタン 48 ／ 掲載切替の FORM 48   → 行 69
         レシピ   recbtn 48                              → 行 69
         カテゴリ ボタン 40 ／ 並べ替え 36               → 行 68（※ 32px は余白）
         卓       並べ替え 36 のみ                       → 行 68（※ 32px は余白）
         注文履歴 22.8                                   → 行 47（もう詰まっている）
       札（掲載中・未登録）は 22〜29px で、どこでも天井になっていません。
       縮めても 1px も動きません。

     ★ 5 つの表が height: 68px を直書きしています。これを外さないと、
       中身を小さくしても行は 68 に戻ります。

     ★ タップは 44px。Apple（44pt）と WCAG 2.1 AAA が揃って認める床です。
       Material の 48 は下回りますが、WCAG 2.2 AA（24px）は大きく上回ります。
       下げるのは<b>一覧の表の中だけ</b>。入力欄と画面下の送信ボタンは 48 のまま。
       打ち間違いの代償が大きい画面と、落ち着いて探す画面を分けています。
       厨房ボードも別扱い（手が濡れていて急いでいるため）。 */
  .theme-desk .table--items td,
  .theme-desk .table--purchases td,
  .theme-desk .table--recipes td,
  .theme-desk .table--cats td,
  .theme-desk .table--tables td { height: auto; padding: 4px 12px; }
  .theme-desk .table--items th,
  .theme-desk .table--purchases th,
  .theme-desk .table--recipes th,
  .theme-desk .table--cats th,
  .theme-desk .table--tables th { height: auto; padding: 8px 12px; }
  .theme-desk .table td { font-size: 15px; }
  /* 表の中で押せるものだけ 44px。.field .input と .btn--block は触らない。

   ★ .row は外すこと。あれは「横に並べる」ためのユーティリティで、
     <b>押せるものとは限りません</b>。当てたら注文履歴が 47 → 67px に、
     品切れが 69 → 73px に<b>広がりました</b>（2026-09-26 に実測）。
     詰めるつもりで逆のことをしていました。

   ★ button も無条件には当てないこと。「掲載中」は button.badge で、
     札の形をした押せるものです。44px に押し広げると札に見えなくなります。
     札は押せても札の高さのまま——これが列の中で
     「状態を表すもの」と「操作するもの」を見分ける手がかりです。 */
  /* ★ 表の中のボタンの高さもここでは指定しません（2026-09-26）。--btn-h が
       全画面で 44px を決めています。 */
  /* ★ .recbtn は height: 48px を<b>直接</b>持っています。min-height では勝てないので、
       表の中だけ height も 44 に落とします。
     ★ この 2 行を上の列挙の<b>途中</b>に差し込まないこと。
       コメントを間に入れて規則を割ってしまい、.btn:not(.badge) が
       min-height を失って 48px に戻りました（2026-09-26 に実測で気づいた）。 */


  /* ★ 商品の絞り込みを上に貼り付ける（2026-09-26・店主の指示
       「すべて〜編集中、並び替えまでをスティッキーで固定して、
         スクロールするとそれ以下の商品名とかの情報が変わる仕様に」）。

       100 件の中から探す画面なので、下まで送ったときに
       <b>いま何で絞っているのか</b>が見えなくなるのが困ります。
       タブ（すべて／掲載中／品切れ／掲載停止／編集中）と並び替えを残し、
       動くのは商品の行だけにします。

     ★ 列見出しの top には触らないこと（2026-09-26 に実測して分かったこと）。
       17 節の .table th は position: sticky; top: 0 と書いてありますが、
       <b>この表では貼り付いていません</b>。Chrome 152 で測ると、
       スクロール 900 のとき列見出しの上端は -489 まで流れていきます。

       貼り付かないのに top だけは効くので、top: 145px と書くと
       列見出しが 145px 下へずれ、2 行目と 3 行目の間に割り込みます
       （実測 411 → 556。ずれ幅は top の値ちょうど）。
       border-collapse を separate にしても変わりませんでした。

       絞り込みだけを貼り付け、列見出しは素直に流す。
       店主の指示（「全て〜編集中、並び替えまでを固定」）もこの形です。 */
  .itempage .tabsort,
  .tabtable .tabsort {
    position: sticky;
    top: 0;
    z-index: 3;
    /* 下の行が透けないように面を敷く。透明だと商品名が裏を通る */
    background: #ffffff;
    padding-top: 8px;
    padding-bottom: 8px;
    /* 貼り付いていることが分かる細い線。スクロールして初めて意味が出る */
    box-shadow: 0 1px 0 #e3e3e3;
  }
  /* ★ 掲載の札は「札のまま」にしない。
       商品とカテゴリの表では、店主の指示で<b>編集ボタンと同じ大きさ</b>に
       してあります（2026-09-20「編集、掲載中、未登録は同じボタンの大きさに
       しないと押せる感じしなくない？」）。同じ行に押せるものが 3 つ並ぶので、
       大きさが揃っていないと「押せるもの」に見えません。
       だから 0 に戻すのではなく、編集と同じ 44px に揃えます。 */
  .theme-desk .table--items td.col-state .badge--act,
  .theme-desk .table--cats td.col-state .badge--act { min-height: var(--btn-h); }
  /* それ以外の一覧の札（状態を表すだけのもの）は札の高さのまま */
  .theme-desk .table .badge:not(.badge--act) { min-height: 0; }

  /* ★ レシピ・原価表の操作列を広げる（2026-09-26）。
       割合は 1120px 基準で、操作列は 8.929%＝100px のつもりでした。
       ところが iPad の本文は 890px しかなく、<b>79.5px にしかなりません</b>。
       そこへ「登録する」を入れるとボタンが幅 44px に潰れて<b>文字が 2 行</b>になり、
       高さ 48px → 行 57px になっていました。
       ほかの一覧は 53px なので、ここだけ 4px 高い原因がこれです。

     ★ 数字の列から少しずつ分けます。原価率は「31.9%」の 5 文字で、
       12.5% でも 111px あるので削る余地があります。 */
  .table--recipes .col-name  { width: 22%; }
  .table--recipes .col-money { width: 12%; }
  .table--recipes .col-rate  { width: 12.5%; }
  .table--recipes .col-act   { width: 17%; }

  /* 厨房の見出しの帯も一緒に畳む（2026-09-19）。
     ここに書かないと 1141〜1380px のあいだだけ厨房が 16/40 のまま残り、
     ほかの画面（12/24）と題の位置が 16px ずれます */
  /* ★ このセレクタはいま何にも当たりません（2026-09-26 に確認）。
       .griddle というクラスはテンプレートに 1 つも無く、
       厨房ボードの見出しは共通の .page-head を使っています。
       値だけ .page-head とそろえてあります。消すかどうかは別途。 */
  .kitchenboard .griddle .card__body { padding: 8px 24px; }
  .statcard:not(.statcard--tall),
  .dashpage .statcard:not(.statcard--tall) { padding: 15px 16px; }
  .panel { padding: 16px; }
}

/* ==========================================================================
   42. レシートの読み取り確認（設計 ト05d・2026-09-14）
   --------------------------------------------------------------------------
   ★ 色は 2 種類だけ。直すべき行だけを光らせる。
     薄い赤 … 費目が食材なのに、どの食材にも紐付いていない（この画面で作れる）
     薄い黄 … 紐付いているのに量が空（保存はできる。金額の記録としては完全）
     洗剤のような「紐付けないのが正しい行」は光らせない。
     全部光らせると、警告そのものが無視されるようになる（30 節の品切れと同じ判断）。

   ★ 行の色は td に敷くこと。tr に background を置いても、
     .table の td 側が地を持っているので隠れる（実測）。 */
/* 入口の 2 枚（設計 ト05c）。撮るほうが主役で幅を伸ばし、手入力は 360px の脇役。
   本文は 41 節で縦オートレイアウトなので、ここだけ横に並べ直す */
.receiptstart {
  display: flex;
  gap: 24px;
  align-items: flex-start;
}
.receiptstart > .card { flex: 1 1 0; min-width: 0; }
.receiptstart > .receiptstart__manual { flex: 0 0 360px; }
.receiptstart__title { margin: 0 0 4px; font-size: 20px; font-weight: 700; line-height: 1.4; }
/* 狭い画面では縦に積む。横に並べたままだと、手入力のカードが潰れて読めない */
@media (max-width: 960px) {
  .receiptstart { flex-direction: column; }
  .receiptstart > .card,
  .receiptstart > .receiptstart__manual { flex: 1 1 auto; width: 100%; }
}

/* 写真の受け口。点線の枠ごとラベルにして、枠のどこを押しても開くようにする */
.receiptdrop {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 48px 16px;
  background: #fafafa;
  border: 1px dashed #c7c7c7;
  cursor: pointer;
}
.receiptdrop:hover { background: #f3f3f3; }
/* キーボードで辿り着けること。input は visually-hidden なので、
   focus の輪は枠のほうに出す（:focus-within） */
.receiptdrop:focus-within { outline: 2px solid var(--accent); outline-offset: 2px; }
.receiptdrop__icon { font-size: 32px; line-height: 1; }
.receiptdrop__lead { font-size: 15px; color: var(--text); text-align: center; }
.receiptdrop__note { font-size: 12px; color: var(--text-muted); }

.receiptpage tr.is-unlinked > td { background: #fdf2f2; }
.receiptpage tr.is-missing-qty > td { background: rgba(245, 158, 11, .12); }

/* 操作の列。ボタンは行の高さを押し上げない小さいもの（.btn--sm）。
   ✕ は Render の「…」と同じ位置＝いちばん右。並ぶときも ✕ が右端に来る */
.receiptpage .receiptline__ops {
  white-space: nowrap;
}
.receiptpage .receiptline__ops .btn + .btn { margin-left: 8px; }
.receiptpage .receiptline__remove {
  border-color: transparent;
  color: var(--text-muted);
  padding-inline: 10px;
}
.receiptpage .receiptline__remove:hover { border-color: var(--border); }

/* ==========================================================================
   43. 数字の帯（設計 ト04c 食材の詳細 840:10125・2026-09-14）
   --------------------------------------------------------------------------
   Figma の「いまの在庫／あと◯営業日／警告残量」は、カードを 3 枚並べたものでは
   なく 1 本の帯です。既存の .stat は grid--3 の中に 3 枚置く作りなので、
   枠が 3 つに割れてしまい同じ形になりません。ここだけ新しく足しました。

   ★ 数字の型がホール（20px / 16px）と違うのは意図どおり。
     ホールは立って 2m 先から読む板、ここは座って 1 品を調べる画面で、
     Figma もそれぞれ別の値を指定しています（24px / 14px）。
     「前にそろえた型があるから」と 20/16 に寄せないこと。

   ★ 危険色は「もちが短い」ときだけ。在庫量そのものは赤にしない。
     赤が 2 つ並ぶと、どちらを先に見ればいいか分からなくなる。
   -------------------------------------------------------------------------- */
.statline {
  display: flex;
  gap: 48px;
  align-items: center;
  flex-wrap: wrap;
  padding: 16px 24px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
}
.statline__item { display: flex; gap: 8px; align-items: baseline; }
.statline__label {
  font-size: 14px;
  color: var(--text-muted);
}
.statline__value {
  font-size: 24px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--text);
}
.statline__value--danger { color: var(--danger); }

/* 「理論値です」の断り書き。のばして右端へ送る（Figma の「のばす」） */
.statline__note {
  margin-left: auto;
  font-size: 12px;
  color: var(--text-muted);
}

/* iPad では 48px の間隔が広すぎて 3 つ目が折り返す。
   40 節（端末の段差）と同じ 1380px で詰める */
@media (max-width: 1380px) {
  .statline { gap: 28px; padding: 14px 20px; }
  .statline__note { margin-left: 0; flex-basis: 100%; }
}

/* ==========================================================================
   41. 本文の縦の並び — Figma の本文は縦のオートレイアウト（2026-09-13）
   --------------------------------------------------------------------------
   ★ 置き場所は 38〜40 節の後ろ、32 節（広い画面）の手前。
     40 節（iPad の一段下げ）より後ろでないと、ブロック間の詰めが効かない。

   ★ 何をそろえたか
     Figma 01 ページの本文フレームは、全画面が縦のオートレイアウトで、
     ブロックの間は 48px でした（厨房 24 / 売上 20 だけ例外）。
     いまのコードは要素ごとの margin で作っていたので、
     1432px で採寸すると 1 画面の中に 0・4・11・15・16・24・31・32・40・57px が
     混ざっていました。48px で揃っていたのは 4 画面だけです。

     margin を 1 つずつ直すと、ブロックを足す人が毎回同じ作業をやり直します。
     Figma がオートレイアウトで持っているものは、こちらもオートレイアウトで持つ。

   ★ 踏んだ罠 1 ── flex では margin が相殺されない
     gap を入れただけだと、子に残った margin がそのまま足し算されます
     （48 + 24 = 72 のような値になる）。子の margin-block は 0 にすること。

   ★ 踏んだ罠 2 ── gap は高さ 0 の子にも入る
     お知らせの枠（fragments/common :: flash）は、出すものが無くても
     <div class="stack-sm"> だけは必ず出ます。放っておくと
     全画面の先頭に 48px の空白ができます。
     :empty は「空白だけの中身」の扱いがブラウザで割れるので、
     :not(:has(*))（要素の子がひとつも無い）で見ます。

   ★ 税理士の 5 枚はここでは触らない
     layout/accountant.html は <main class="staff-main"> で、
     本文がこの入れ子になっていません。同じ 48px なので後で入れますが、
     一度に広げると壊れたときの切り分けができなくなります。
   ========================================================================== */

.theme-desk .staff-main > main {
  display: flex;
  flex-direction: column;
  gap: var(--block-gap, 48px);
}
/* ★ dialog を除くこと（2026-09-14）。
     モーダルはブラウザが margin: auto で画面の中央へ置く決まりで、
     上下の margin を 0 にすると<b>天井に張り付く</b>。
     ホールの <dialog> は <main> の直下にいるので、この 1 行の巻き添えになった
     （実測：上下 margin 0px・左右 447px ＝ 左右だけ中央）。
     gap のほうは害がない。閉じているモーダルは display:none、
     開いているモーダルは position:fixed で流れから外れるため。 */
.theme-desk .staff-main > main > *:not(dialog) { margin-block: 0; }

/* ★ .sheet の上の打ち消しを効かせる（2026-09-17・店主の指摘）。

   .sheet（ダッシュボード・売上）は「本文の余白を打ち消して地を端まで敷く」ために
   負のマージンを持っています。ところが 3410 行の

     .theme-desk .staff-main > :first-child { margin-top: 0; }   (0,2,0)

   が .sheet（0,1,0）に勝って、上だけ打ち消せていませんでした。結果、
   32px（本文）＋ 32px（.sheet 自身）で余白が二重になり、この 2 画面だけ
   見出しが 32px 下がっていました（実測 120px 対 88px）。

   地を端まで敷くという元の意図は正しいので、詳細度を上げて効かせます。
   左右の打ち消しは .sheet 本体が持ったままです。 */
.theme-desk .staff-main > main.sheet { margin-top: calc(var(--main-pad-y) * -1); }

/* 共通の指定に巻き込まれても中央が守られるよう、こちらでも明示しておく */
dialog[open] { margin: auto; }
.theme-desk .staff-main > main > .stack-sm:not(:has(*)) { display: none; }

/* 例外（Figma がその値で描いている）。
   ★ 変数で渡すこと。gap を直接書くと、下の iPad の帯と勝ち負けの話になる

   ★ 立って使う 3 画面は 24px。
     厨房・ホール・品切れは 2026-09-12 に作り直してあり（現01 552:6627 /
     現02 542:3705 / 現03 439:2496）、どれも本文の gap が 24 です。
     01 ページの古い版は 48 で描かれていますが、そちらを採ると
     1 画面に入る伝票が減ります。机で読む 13 画面が 48、立って使う 3 画面が 24。

   ★ 売上は 20px（14 売上 17:1038）。カードとパネルが多く、48 だと 1 画面に入らない */
.theme-desk .staff-main > main.kitchenboard,
.theme-desk .staff-main > main.hallboard,
/* ★ 品切れの 24px は残します（2026-09-20 に 48 へ広げかけて戻した）。
     立って使う画面で、店主の「2 つしか見えなくて視認性が悪い」を受けて
     2026-09-12 に詰めた経緯があります。広げると 1 画面に入る行が減るので、
     設計ページ 07 が 48 でも、ここは前の判断を優先します。
   ★ 売上の 20px は外しました。8/16/24/32/48 の刻みに無い値で、
     ページ内でも売上 3 画面にしか無い外れ値だったためです（既定の 48／32 に）。 */
.theme-desk .staff-main > main.soldoutpage { --block-gap: 24px; }

/* 節の見出し（h2）も Figma に部品がある（見出し/節 24:1397）。
   中見出し 24px ＋ 補足 14px を 16/40 の中に置いた 68px の帯。
   文字の大きさは合っていたが左右の 40px が無く、ページの見出しより
   40px 外側から始まっていた。同じ画面に見出しの左端が 2 つあることになる。

   ★ 立って使う 3 画面は外す。現02・現03 の節見出しは 20px・左右 0 で、そちらが正。
     ここを一律にすると、詰めてある盤面の画面が 1 段ぶん広がる。 */
.theme-desk .staff-main > main:not(.kitchenboard):not(.hallboard):not(.soldoutpage) > .section-title:has(h2) { padding: 16px 40px; }

/* iPad の帯（1380px 以下）。B案の「ブロックの間 48→32」はここ。
   ★ 例外の 2 画面も書き直すこと。書かないと基準の 32px に広がってしまう
     （24 や 20 より広くなるので、詰めたつもりが逆になる） */
@media (max-width: 1380px) {
  .theme-desk .staff-main > main { --block-gap: 32px; }
  .theme-desk .staff-main > main.kitchenboard,
  .theme-desk .staff-main > main.hallboard,
  /* 売上の上書きは 2026-09-20 に撤去（既定の 32px に任せる）。品切れは据え置き */
  .theme-desk .staff-main > main.soldoutpage { --block-gap: 24px; }

  /* 節の見出しも帯なので、B案の「帯 16/40 → 12/24」に乗せる。
     ★ ここを書き忘れると、ページの見出しだけ 24px に寄って
       節の見出しが 40px に取り残され、iPad で左端が 2 本になる（実測で判明）。 */
  .theme-desk .staff-main > main:not(.kitchenboard):not(.hallboard):not(.soldoutpage) > .section-title:has(h2) { padding: 12px 24px; }
}

/* ==========================================================================
   32. 広い画面（1800px 以上）— 2026-09-05
   --------------------------------------------------------------------------
   ★ ファイルのいちばん最後に置くこと。
     .theme-desk の寸法（30 節）より前に書くと、同じ詳細度で後勝ちに負ける。
     実際 30-6-4 に置いていたときは、表の文字だけ 16px のまま上がらなかった。

   ★ 幅の上限で止めるのではなく、寸法のほうを画面に合わせる。
     いちど本文を 1168px で止めてみたが、2560px で 1105px が丸ごと空いた。
     それは「使わない幅を作った」だけで、ダッシュボードの形ではない。

     ここで上げているのは寸法だけで、設計の比率
     （サイドバー：本文＝264：1168）は保っていない。
     1800px 以上はそもそも設計に無い画面幅なので、
     「設計どおり」ではなく「同じ密度に見えること」を目標にしている。
   ========================================================================== */
/* 1440px から。設計は 1432px で描いてあるので、
   それを超えた時点で「設計より広い画面」になる。
   1800px にしていたときは、1536px や 1600px のノート PC で
   一度も効かず、「まだ小さい」と言われていた。 */
@media (min-width: 1440px) {
  .staff-shell {
    /* ★ サイドバーの幅を 264 → 300 へ<b>連続</b>で太らせます（2026-09-26）。
         それまで 1440px ちょうどで 36px 跳ね、同じ瞬間にガターも 24 → 40 に
         跳ねるため、<b>画面を広げたのに本文が 67px 縮む</b>という逆転が
         起きていました（実測 1439px で本文 1127px、1440px で 1060px）。
         1440〜1600px のあいだで少しずつ太らせて段差を消します。
         傾きは (300 − 264) / (1600 − 1440) = 0.225。
       ★ サイドバーの幅はここ（--sb-w）で決まります。--brand-w は
         ロゴと店名の枠で、別物です。1 度ここを取り違えました。 */
    --sb-w: clamp(264px, calc(264px + (100vw - 1440px) * 0.225), 300px);
    --sb-pad: 14px;
    --sb-item-pad: 0 14px;
  }
  /* ★ 文字の大きさはここで変えません（2026-09-13）。
       もとは サイドバー 15→17px、店名 14→16px、営業日 17→19px と
       上げていましたが、Render は 3807px の画面でも 16px のままです。
       店主の指示は「Render にそろえる」なので、基準の値を上げたうえで
       画面幅による増減はやめました（RenderAlignedTypeTest）。
       ここに残すのは<b>寸法</b>だけ：サイドバーの幅・余白・アイコンです。 */
  .staff-shell .sb__item  { border-radius: 8px; }
  .staff-shell .sb__label { padding: 14px 0 4px 10px; }
  .sb .ic          { width: 22px; height: 22px; }

  /* 店名の幅はサイドバーと同じ値。ここがずれると右端がそろわない。
     ★ --brand-pad-x も一緒に動かすこと。
       この段はサイドバー側だけを大きくしていて（--sb-pad 12→14、
       --sb-item-pad 12→14、アイコン 20→22）、店名側は 16px のままでした。
       そのため設計がそろえていた「文字の左端 54px」が崩れ、
       1920px で 6px ずれていました（実測）。
       サイドバーの文字は 14 ＋ 14 ＋ 22 ＋ 10 ＝ 60px から始まるので、
       店名側は 60 − ロゴ 28 − すきま 10 ＝ 22px。
     ★ --topbar-h はここに書かないこと。帯は全幅で 56px です。 */
  .staff-frame     { --brand-w: 300px; --brand-pad-x: 22px; }

  /* 本文の左右余白（ガター）。2026-09-13 に 40px 固定から一次式へ。
     40px だと 1920px の画面で本文が端に貼り付いて見え、
     店主から「参考の画面は左右に空白があって読みやすい」と指摘されました。

     通るのは (1920, 88) と (2560, 160) の 2 点。傾きは 72 / 640 = 0.1125 です。
     88px は Figma「PC01 厨房ボード（1920・左右に余白）」の実測値で、
     そこでレーンが 471px（設計 360px）になります。
       1440px → 40px（下限）／1600px → 52px／1920px → 88px
       2400px → 142px／2560px → 160px（上限）

     ★ 上限 160px を外さないこと。青天井にすると、4K で本文が痩せて
       32 節が失敗として記録している「幅で止めた」状態に戻ります。
     ★ 2000px の段でこの値を再指定しないこと（上書きで一次式が死にます）。
     ★ .sheet はこの値を負のマージンで打ち消します（30-6-3 節）。
       calc(var(--main-pad-x) * -1) は clamp が入っても成立します。 */
  /* ★ --main-pad-y はここで上げないこと（2026-09-13）。
       Figma は上下余白を画面幅で変えていません。横（ガター）だけ持ちます。 */
  .theme-desk .staff-main {
    /* ★ 下限を 40px → 24px にしました（2026-09-26）。
         1440px ちょうどで 24 → 40 と跳ねるのが、サイドバーの 36px の段と
         重なって「広げたのに本文が縮む」を作っていました。1440px では
         その手前（24px）と同じ値から始めて、そこから増やします。
         1920px で 88px という到達点は変えていません（Figma の実測値）。
         傾きは (88 − 24) / (1920 − 1440) = 0.13333。 */
    --main-pad-x: clamp(24px, calc(24px + (100vw - 1440px) * 0.13333), 160px);
  }
  /* 盤面まわりの 4 画面は、設計どおり上下 32px にしてあります。
     1432px ならそれで釣り合いますが、3807px では左右が 930px 空くのに
     上下が 32px のままで、枠として成り立ちません。
     参考にした Render も左右 833px に対して上下 48px なので、そこにそろえます。
     ★ 詳細度を 0,3,0 でそろえること。0,2,0 だと :has 側（32px）に負けます。 */

  /* ★ 見出しはここで変えません（2026-09-13）。
       32px / 20px は Render の実測値で、あちらは画面幅で変えません。
       表と数字カードは残します。あちらは幅が広いほど<b>読める情報が増える</b>
       ので、画面に合わせて大きくする理由があります（見出しには無い）。 */
  /* ★ 列見出しはここで大きくしないこと（2026-09-13）。
       もとは .table--items th を 17px に上げていましたが、見出しが 12px に
       なったので、17px まで上げると中身（17px）と同じ大きさになり、
       見出しに見えなくなります。中身のほうだけ残します。 */
  .theme-desk .table      { font-size: 17px; }
  .statcard__value  { font-size: 36px; line-height: 42px; }
  .linechart        { height: 300px; }
}

/* もう一段。27 インチ級（2000px 以上）だと、上の一段でもまだ小さい。
   ここまで来ると画面と目の距離も遠いので、素直に大きくしてよい */
@media (min-width: 2000px) {
  .staff-shell {
    --sb-w: 332px;
    --sb-pad: 16px;
    --sb-item-pad: 0 16px;
    --tap: 56px;
  }
  /* ★ 文字はここでも変えません（2026-09-13、1440px の段と同じ理由）。
       サイドバー 19px・営業日 21px まで上げていましたが、
       Render は 3807px でも 16px です。寸法だけを残します。 */
  .sb .ic { width: 24px; height: 24px; }

  /* サイドバーの文字は 16 ＋ 16 ＋ アイコン 24 ＋ すきま 10 ＝ 66px から。
     店名側は 66 − 28 − 10 ＝ 28px（1440px の段と同じ考え方） */
  .staff-frame { --brand-w: 332px; --brand-pad-x: 28px; }

  /* ★ ここに --main-pad-x を書かないこと。
       1440px の段の一次式（ガター）を上書きして殺します。 */
  /* 1440px の段と同じ理由で、列見出しはここでも大きくしません */
  .theme-desk .table      { font-size: 18px; }
  .statcard__value  { font-size: 40px; line-height: 46px; }
  .linechart        { height: 340px; }
}

/* ==========================================================================
   42. レシピの取り込み（設計 ト09b 806:8314・2026-09-16）
   --------------------------------------------------------------------------
   「読む → 人が照合して直す → まとめて登録」の確認画面。
   レシート確認画面と同じ形なので、土台は .card / .table / .btn の使い回し。
   ここに足すのは、Figma にあって既存の組み合わせでは出せない見た目だけ。

   ★ .theme-desk に書かない。
     あの層は厨房・ホールにも付く（2026-09-07 に実測で判明）。
     この画面だけの話なので .importcard / .importsource / .importfoot に絞る。

   ★ 色は Figma の生の値ではなくトークンを使う。
     Figma のボタンは #0b7a78（ティール）だが、実装の --action は #0b7a1a。
     2026-09-12 に「表の見出しの面と押せるボタンが同じティールで
     見分けが付かない」という理由で意図して色相をずらしたもの。
     ト09b は古い値のまま作られたモックなので、実装側が正。
   ========================================================================== */

/* 照合の結果を表すバッジ。既存の --gf（アレルゲン）／--stop（使用停止）は
   見た目は近いが意味が違う。名前で意味が読めるほうを足す。 */
.badge--ok { background: var(--ok-soft);     color: var(--ok);     border-color: currentColor; }
.badge--ng { background: var(--danger-soft); color: var(--danger); border-color: currentColor; }

/* 行の中に置くセレクト。表のセルや見出しの並びに混ぜるので、
   ブロックいっぱいに広げない（既定の .select は幅 100%）。 */
.select--inline { width: auto; min-width: 12rem; }

/* 読み取り元の帯（Figma 806:8456）。サムネイル＋ファイル名＋右端にリンク。 */
.importsource {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
}
.importsource__thumb {
  width: 72px;
  height: 48px;
  object-fit: cover;
  border: 1px solid var(--border);
  border-radius: var(--r-1);
}

/* 商品カードの見出し（Figma 807:1689）。
   商品名・バッジ・選び直し・のばす・外す、を 1 行に並べる。
   狭い画面では折り返す（サイドバーがあるぶん本文は広くない）。 */
.importcard__head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--sp-3);
  margin-bottom: var(--sp-4);
}
.importcard__name { font-size: 20px; }

/* 文字リンクの見た目をした submit（設計 ト09b 806:8314・2026-09-18）。

   Figma の実測:
     ＋ 材料を足す    #0b7a1a 14px Bold  面は白・枠なし
     ＋ その場で作成  #d33f3f 14px Bold  面は白・枠なし

   実装は前者が白い枠ボタン、後者が緑の塗りボタンでした。とくに後者は逆で、
   いちばん強い見た目が「まだ食材が無い」という<b>不足の合図</b>に付いていました。

   ★ 枠を持たせない理由。表の中に枠付きのボタンが行ごとに並ぶと、
     読みたい数字より枠のほうが目立ちます。.recbtn のコメントにも
     「面まで塗ると緑の帯が縦に連なって表の数字より目立つ」と同じ趣旨があります。

   ★ 高さは 48px を割りません。設計の「＋ 材料を足す」は 21px の行ですが、
     押せるものなので CLAUDE.md の「タップ領域は 48px 以上」を優先します。 */
.linkbtn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: var(--btn-h);
  padding: 0;
  border: 0;
  background: none;
  color: var(--action);
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.6;
  white-space: nowrap;
  cursor: pointer;
}
.linkbtn:hover { text-decoration: underline; }
.linkbtn:focus-visible { outline: 2px solid var(--action); outline-offset: 2px; }
/* 不足の合図。押せるが「足りていない」ことを先に伝えたいので赤。 */
.linkbtn--danger { color: var(--danger); }
.linkbtn--danger:focus-visible { outline-color: var(--danger); }

/* 状態の列。一致は緑、未一致はその場で作る道を出す。 */
/* ★ 設計の「✓ 一致」は #0b7a1a＝--action（2026-09-18 に実測）。
     --ok（#3f8e6d）のままだと、隣の「＋ その場で作成」と並んだときに
     2 つの緑が混ざります。この画面の緑は 1 つに絞ります。 */
.importcard__ok { color: var(--action); font-weight: 700; font-size: 14px; }
.importcard__make {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  flex-wrap: wrap;
}
.importcard__make .select--inline { min-width: 5rem; }

/* フッター（Figma 808:1737）。左＝やめる（移動）／右＝登録（実行）。
   09-15 に決めた「左＝戻る／右＝実行」と同じ並びにしてある。 */
.importfoot {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--sp-4);
}

/* ==========================================================================
   43. レシピ取り込みの入口（設計 ト09d 842:10404・2026-09-16）
   --------------------------------------------------------------------------
   写真・CSV・貼り付けの 3 枚を横に並べる。Figma は 3 等分（gap 24）。

   ★ 3 つのうち 2 つ（CSV・貼り付け）は AI が要らない。
     Figma では写真のカードだけ枠が濃い＝おすすめだが、いまは AI 読取が
     未実装で押せない。押せないものを一番目立たせても仕方ないので、
     濃い枠（.is-recommended）は動く CSV に付けてある。
     AI 読取を作ったら写真へ戻す。

   ★ カードの高さをそろえる。ボタンが行ごとにばらけると
     「どれを押せばいいか」を探す手間が増える。
     .importentry__foot を下端に寄せる（Figma の「のばす」に相当）。
   ========================================================================== */

.importentry {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-5);
  margin-bottom: var(--sp-5);
}
@media (max-width: 1100px) {
  .importentry { grid-template-columns: 1fr; }
}

/* ★ 地・枠・角丸は .card に任せる。
     .theme-desk .card が白・#e8e8e8・角丸を持っていて（3258 行）、
     それが Figma の rounded-6 / border #e8e8e8 と一致している。
     ここで上書きすると、テーマを直したときに 1 枚だけ取り残される。 */
.importentry__card {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  padding: var(--sp-5);
}
/* いま動く道を濃い枠で示す。Figma の「おすすめ」の扱い */
.importentry__card.is-recommended { border: 2px solid var(--action); }

.importentry__mark  { font-size: 32px; line-height: 1; margin: 0; }
.importentry__title { font-size: 20px; font-weight: 700; margin: 0; }
.importentry__lead  { font-size: 14px; margin: 0; }

.importentry__for {
  margin: 0;
  padding-left: 1.2em;
  color: var(--text-muted);
  font-size: 13px;
  line-height: 1.6;
}

/* 「のばす」（Figma 842:10555）。ボタンをカードの下端にそろえる */
.importentry__foot { margin-top: auto; display: grid; gap: var(--sp-2); }

/* 共通の注意（Figma 842:10580）。この 1 文がこの機能の性格を決めている */
.importentry__note {
  background: var(--surface);
  padding: var(--sp-3) var(--sp-4);
  font-size: 13px;
  margin-bottom: var(--sp-4);
}

/* --------------------------------------------------------------------------
   44. スタッフの行カード（設計 ト15b 838:9390・2026-09-17）

   1 人 1 枚。表示名・権限・新しいパスワードをその場で直して、
   右端の「この内容で更新する」で保存する。

   ★ 更新と削除は左右に並べる（店主の指示）。
     設計では削除が更新の下に積まれていて、そのカードだけ高さが 136px、
     ほかは 110px だった。横に並べると全部のカードが同じ高さで揃い、
     目が「操作はこの位置」と覚えられる。

   ★ 横に入らなくなったら縦に折り返す。店舗の端末は 1280px だが、
     ノートを持ち込まれることがあるので、潰れて読めなくなるより折り返す。
   -------------------------------------------------------------------------- */
.staffcards {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  margin-top: var(--sp-4);
}

.staffcard {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
}

/* 設計の列幅: ユーザー名 65 ／ 表示名 240 ／ 権限 136 ／ 新しいパスワード 240。

   ★ 設計に無い「ログインを許可する」を足したぶん、欄が 1 行に収まりません
     （実測: 欄だけで約 1230px、カードの内側は約 1072px）。
     そこで欄を 2 段にし、操作は<b>2 段にまたがって右端で縦中央</b>に置きます。
     操作を 2 段目にぶら下げると、そのぶんカードが縦に伸びてしまうためです。 */
.staffcard__form {
  display: grid;
  grid-template-columns: auto minmax(160px, 240px) 136px minmax(160px, 240px) auto;
  grid-template-areas:
    "id name role pw  act"
    "id en   en   en  .";
  /* 下端で揃える。入力欄もボタンも 48px なので、これで底辺が 1 本の線に乗る */
  align-items: end;
  gap: var(--sp-3) var(--sp-4);
  padding: var(--sp-4) var(--sp-5);
}

.staffcard__id      { grid-area: id; }
.staffcard__name    { grid-area: name; }
.staffcard__role    { grid-area: role; }
.staffcard__pw      { grid-area: pw; }
.staffcard__enabled { grid-area: en; justify-self: start; }
/* ★ 操作は 1 段目だけ。2 段にまたがらせて縦中央に置くと、
   入力欄の行から下へずれて「行が揃っていない」状態になる（店主の指摘・2026-09-17）。 */
.staffcard__act     { grid-area: act; align-self: end; justify-self: end; }

/* .field の既定は下に余白を持つが、ここは flex の gap で間隔を作るので消す。
   残っていると欄ごとに下だけ空いて、ボタンとの下端が揃わない。 */
.staffcard__form .field { margin-bottom: 0; }

.staffcard__id {
  display: flex;
  flex-direction: column;
  /* 縦積みの flex は既定で子を横いっぱいに伸ばす。
     これが無いと「ログイン中」の札が列幅いっぱいの帯になる */
  align-items: flex-start;
  gap: 6px;
  min-width: 96px;
  align-self: start;
  padding-top: 26px;   /* 隣の欄のラベル（16px）＋ラベル下の 8px ぶん下げて、入力欄と行を揃える */
}
.staffcard__id strong { font-size: 15px; }

/* ★ ここが今回の肝。更新と削除を横に並べる。 */
.staffcard__act {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
}

/* 狭い画面では 1 列ずつに崩す。
   無理に押し込むとボタンが潰れて押しにくくなる。
   操作は左端から始める（右端に寄せると指が届きにくい）。 */
@media (max-width: 1100px) {
  .staffcard__form {
    grid-template-columns: minmax(0, 1fr) 136px;
    grid-template-areas:
      "id   id"
      "name role"
      "pw   pw"
      "en   en"
      "act  act";
  }
  .staffcard__id  { padding-top: 0; }
  .staffcard__act { justify-self: start; }
}