/**
 * 03-menu.css — メニューの見た目（段階 1・2026-10-25 PM 決定＝C 案「目次から選ぶ」）
 *   開いた最初に章のタイルが並び、押すとその章へ。章の題は読んでいる間ずっと上に残る。右上の「目次」でいつでも最初に戻る。
 *   形は public/js/menu.js が組む。値はすべて 01-variables.css のトークン。
 *   経緯（A・B 案と比べて選んだ）＝docs/段階1_デザイン3案.md
 */

html { scroll-behavior: smooth; }

/* 禁則を厳しく（小さい「ュ」「ッ」などを行の頭に置かない） */
.mn { line-break: strict; }

/* 本文の器（02-base.css の .app-main）の上の余白は使わない＝目次のタイルの上の余白で取る */
.mn { padding-top: 0; }

/* --- 目次＝タイル（上に残らない・最初の画面） --- */
.mn-nav { margin: var(--sp-5) 0 var(--sp-4); }
.mn-nav-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));  /* どの幅でも 2 列（PC で細いタイルにしない） */
  gap: var(--sp-2);
}
.mn-nav-item {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;  /* 上揃え＝同じ行のタイルで日本語の頭が揃う */
  gap: var(--sp-1);
  min-height: var(--tile-min-h);
  padding: var(--sp-3);
  color: inherit;
  text-decoration: none;
  background: var(--bg-surface);
  border: var(--line-w) solid var(--gold-line);
  border-radius: var(--radius-lg);
}
/* 章の名前は「・」と空白の後でだけ折る（menu.js の breakable が <wbr> を挟む） */
.mn-nav-ja { font-family: var(--font-serif); font-size: var(--font-md); font-weight: 600; line-height: 1.35; word-break: keep-all; overflow-wrap: anywhere; }
.mn-nav-en { font-size: var(--font-xs); letter-spacing: 0.12em; color: var(--accent); }

/* --- お席料などの案内 --- */
.mn-info { margin: 0 0 var(--sp-4); font-size: var(--font-sm); color: var(--text-secondary); text-align: center; }
.mn-info-line { margin: 0; }

/* --- 章 --- */
.mn-chapter { scroll-margin-top: var(--app-header-h); padding-bottom: var(--sp-6); }

/* 章の題：読んでいる間ずっと上に残る */
.mn-chapter-title {
  position: sticky;
  top: var(--app-header-h);
  z-index: 4;
  margin: var(--sp-5) 0 var(--sp-3);
  padding: var(--sp-2) 0;
  font-weight: 600;
  background: var(--bg-header);
  border-bottom: var(--line-w) solid var(--gold-line);
  /* 背景だけを左右の余白まで塗る（箱は広げない＝はみ出しを作らない） */
  box-shadow: 0 0 0 100vmax var(--bg-header);
  clip-path: inset(0 -100vmax);
}
.mn-ct { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-3); }
.mn-ct-ja { font-family: var(--font-serif); font-size: var(--font-xl); color: var(--accent); word-break: keep-all; overflow-wrap: anywhere; }
.mn-ct-en { font-size: var(--font-xs); letter-spacing: 0.18em; color: var(--text-secondary); }

/* 区画の題：大きな英語を薄く */
.mn-section { margin-top: var(--sp-5); }
.mn-section-title { margin: 0 0 var(--sp-2); font-weight: 600; }
.mn-st { display: flex; flex-direction: column; }
.mn-st-en { order: -1; font-family: var(--font-serif); font-size: var(--font-2xl); line-height: 1.1; color: var(--text-faint); overflow-wrap: anywhere; }
.mn-st-ja { font-size: var(--font-md); word-break: keep-all; overflow-wrap: anywhere; }

/* 小見出し */
.mn-sub {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 var(--sp-2);
  margin: var(--sp-4) 0 var(--sp-1);
  font-size: var(--font-sm);
  font-weight: 600;
  color: var(--accent);
}
.mn-sub-en,
.mn-sub-size { font-size: var(--font-xs); color: var(--text-secondary); }
.mn-sub-size { margin-left: auto; }

/* --- 品目：細い罫で区切る。価格は「円」 --- */
.mn-items { list-style: none; margin: 0; padding: 0; }
.mn-item { padding: var(--sp-3) 0; border-bottom: var(--line-w) solid var(--bg-elevated); }
.mn-item-main { display: flex; align-items: baseline; gap: var(--sp-2); }
/* 品名は「・」と空白の後でだけ折る（menu.js の breakable）。区切りの無い長い名前だけは、はみ出さずに折る */
.mn-name { min-width: 0; word-break: keep-all; overflow-wrap: anywhere; }
.mn-leader { flex: 1; min-width: var(--sp-4); }
.mn-price { flex-shrink: 0; white-space: nowrap; font-variant-numeric: tabular-nums; font-size: var(--font-lg); font-weight: 600; }
.mn-price::after { content: "円"; margin-left: 0.1em; font-size: var(--font-xs); font-weight: 400; color: var(--text-secondary); }
.mn-price-none { display: none; }
.mn-item-sub,
.mn-item-size { font-size: var(--font-xs); color: var(--text-secondary); }
.mn-item-desc { font-size: var(--font-xs); color: var(--text-tertiary); }

.mn-note { margin: var(--sp-3) 0; font-size: var(--font-sm); color: var(--text-secondary); }
.mn-text { margin: 0; font-size: var(--font-sm); color: var(--text-secondary); }

/* --- 「目次」ボタン（最初のタイルに戻る）：上のヘッダーの右端に置く＝品目や価格に重ならない --- */
.mn-toc-btn {
  position: fixed;
  top: calc((var(--app-header-h) - var(--tap-min)) / 2);
  right: max(var(--sp-4), env(safe-area-inset-right));
  z-index: 11;
  display: flex;
  align-items: center;
  height: var(--tap-min);
  padding: 0 var(--sp-4);
  font-size: var(--font-sm);
  font-weight: 700;
  color: var(--accent);
  text-decoration: none;
  border: var(--line-w) solid var(--gold-line-strong);
  border-radius: var(--radius-pill);
}
/* 目次のタイルが見えている間はボタンを出さない（押しても同じ所＝意味が無い） */
.mn.is-toc-visible .mn-toc-btn { display: none; }

/* --- 読めなかった時・下の版の札 --- */
.mn-error { color: var(--text-tertiary); font-size: var(--font-xs); }
.app-footer { display: flex; justify-content: center; gap: var(--sp-3); }
.mn-edition { font-size: var(--font-xs); color: var(--text-tertiary); }