/* ===================================================================
   freshstreet-digital - Base CSS (Theme Tokens)
   将来テンプレート切替時、ここの :root 値だけ変更すれば全体が変わる
   =================================================================== */

:root {
  /* === COLOR TOKENS === */
  --color-bg-base: #14110D;          /* 最深背景 */
  --color-bg-surface: #1F1A14;       /* セクション背景 */
  --color-bg-elevated: #2A2218;      /* カード背景 */
  --color-bg-hover: #3A2E1F;         /* ホバー時 */

  --color-text-primary: #FAFAFA;
  --color-text-secondary: #D4C9B8;
  --color-text-tertiary: #8B7E6A;
  --color-text-muted: #6B6155;

  --color-accent-primary: #E89B3B;    /* 暖かいオレンジ(カレー色) */
  --color-accent-secondary: #FCD34D;  /* 黄色(既存ブランド継承) */
  /* アクセント背景の上に乗せる文字色。既定は白(濃いアクセント前提)。明るいアクセントの
     テーマ(charcoal等)や明るいカスタムアクセントでは濃色に上書きする(白だと埋もれる)。 */
  --color-on-accent: #ffffff;
  --color-accent-warm: #DC6B2F;       /* 深いオレンジ */
  --color-accent-cool: #3DA38C;       /* 緑系アクセント */

  --color-divider: rgba(212, 201, 184, 0.12);
  --color-overlay-dark: rgba(20, 17, 13, 0.85);
  --color-overlay-light: rgba(250, 250, 250, 0.05);

  /* === TYPOGRAPHY TOKENS === */
  --font-display: 'Noto Serif JP', 'Hiragino Mincho ProN', serif;
  --font-body: 'Noto Sans JP', 'Hiragino Sans', sans-serif;
  --font-number: 'Bebas Neue', 'Impact', sans-serif;

  /* tagline is the main hero headline; subTagline (heroAccent) acts as
     a supporting sub-headline rather than competing in size with the
     main line. */
  --fs-hero: clamp(2rem, 4.5vw, 3.5rem);
  --fs-hero-accent: clamp(1rem, 1.7vw, 1.4rem);
  --fs-h1: clamp(1.75rem, 4vw, 2.75rem);
  --fs-h2: clamp(1.4rem, 3vw, 2.1rem);
  --fs-h3: clamp(1.15rem, 2vw, 1.5rem);
  --fs-body: clamp(0.95rem, 1.2vw, 1.05rem);
  --fs-small: clamp(0.85rem, 1vw, 0.95rem);
  --fs-micro: 0.75rem;

  /* === LAYOUT TOKENS === */
  --radius-card: 16px;
  --radius-button: 12px;
  --radius-small: 8px;

  --space-xs: 0.25rem;
  --space-sm: 0.5rem;
  --space-md: 1rem;
  --space-lg: 2rem;
  --space-xl: 4rem;
  --space-2xl: 6rem;

  --container-max: 1400px;
  --container-padding: clamp(1rem, 4vw, 2rem);

  /* === ANIMATION TOKENS === */
  --duration-fast: 0.2s;
  --duration-normal: 0.4s;
  --duration-slow: 0.8s;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);

  /* === SHADOW TOKENS === */
  --shadow-card: 0 8px 32px rgba(0, 0, 0, 0.35);
  --shadow-elevated: 0 16px 48px rgba(0, 0, 0, 0.5);
  --shadow-glow-accent: 0 0 32px rgba(232, 155, 59, 0.3);

  /* === THEME-AWARE CHROME TOKENS ===
     ページ背景の上に乗る「白っぽいUIクローム」(極薄ボーダー/塗り/ホバー/影)
     をトークン化。ダーク既定値は従来のハードコードと同じ。ライト系テーマでは
     これらを黒側に反転させる (下の light theme ブロック参照)。
     ※ 写真や色付きバッジの上の白(バッジ/休業バナー/売切れ幕/影付き文字)は
        テーマ非依存なので各 CSS にリテラルのまま残す。 */
  --hairline:    rgba(255, 255, 255, 0.10);  /* 標準ボーダー */
  --hairline-2:  rgba(255, 255, 255, 0.06);  /* やや薄いボーダー */
  --hairline-3:  rgba(255, 255, 255, 0.04);  /* 最薄ボーダー/区切り線 */
  --fill-1:      rgba(255, 255, 255, 0.025); /* 最薄の面塗り */
  --fill-2:      rgba(255, 255, 255, 0.05);  /* 薄い面塗り */
  --fill-3:      rgba(255, 255, 255, 0.09);  /* ホバー時の面塗り */
  --shadow-color:      rgba(0, 0, 0, 0.30);  /* 標準ドロップシャドウ色 */
  --shadow-color-soft: rgba(0, 0, 0, 0.18);  /* 弱いドロップシャドウ色 */

  /* === ACCENT-DERIVED TONES ===
     アクセント色由来の半透明トーン。選択ハイライト/グロー/タグ枠など、
     かつて #E89B3B(rgba(232,155,59,..)) でハードコードされていた箇所を
     これらに置換。--color-accent-primary から派生するので、テーマ切替で
     アクセント色が変わると自動的に追従する(ember=琥珀, garden=緑 等)。 */
  --accent-tint-1: color-mix(in srgb, var(--color-accent-primary) 10%, transparent);
  --accent-tint-2: color-mix(in srgb, var(--color-accent-primary) 16%, transparent);
  --accent-tint-3: color-mix(in srgb, var(--color-accent-primary) 24%, transparent);
  --accent-line:   color-mix(in srgb, var(--color-accent-primary) 32%, transparent);
  --accent-glow:   color-mix(in srgb, var(--color-accent-primary) 38%, transparent);

  /* ヘッダー配色は admin の headerStyle で選択する (既定=dark)。
     customer JS (applyBrandPatch) が headerStyle に応じて
     --color-header-bg と --color-header-text を上書きする。
     既定値はダークガラス+明文字なので、白ロゴ画像でも常に安全。
       dark(既定) / light / auto(テーマ追従) / accent / transparent */
  --color-header-bg: rgba(20, 17, 13, 0.85);
  --color-header-text: #FAFAFA;
}

/* ===================================================================
   PRESET THEMES (data-theme on <html>)
   --------------------------------------------------------------------
   menu.js applyThemeConfig() sets <html data-theme="{preset}"> from the
   admin theme_config. The :root block above IS the "ember" archetype
   (温かい琥珀・炉端) — FSC's home palette — so ember needs no override.
   These blocks only redefine the COLOR tokens for the other dark
   archetypes; typography/layout/animation tokens are inherited from
   :root. A per-shop accentColor (inline style on <html>) still wins
   over the preset's --color-accent-primary.

   Phase 1 = dark family (ember / charcoal / midnight). The light
   family (linen / garden / paper / citrus) is added in a later pass
   once the component CSS alpha colors are variable-ised.
   =================================================================== */

/* Charcoal — 職人・無彩色。アクセントをほぼ白にして、ページ上の唯一の
   「色」を料理写真そのものにする。鮨・専門コーヒー・シェフ系ビストロ向け。 */
[data-theme="charcoal"] {
  --color-bg-base: #161514;
  --color-bg-surface: #211F1D;
  --color-bg-elevated: #2A2826;
  --color-bg-hover: #38352F;

  --color-text-primary: #F2F0EC;
  --color-text-secondary: #C4C1BA;
  --color-text-tertiary: #8E8B83;
  --color-text-muted: #6B6862;

  --color-accent-primary: #E6E4DF;   /* ボーン(ほぼ白) */
  --color-on-accent: #1A1815;        /* ↑が明るいので、アクセント上の文字は濃色に(白だと埋もれる) */
  --color-accent-secondary: #C9C6BF;
  --color-accent-warm: #B7B4AE;
  --color-accent-cool: #A8BCB6;

  --color-divider: rgba(242, 240, 236, 0.12);
  --color-overlay-dark: rgba(22, 21, 20, 0.85);
  --color-overlay-light: rgba(242, 240, 236, 0.05);

  --shadow-glow-accent: 0 0 32px rgba(230, 228, 223, 0.18);
}

/* Midnight — 夜・寒色。藍の背景にスカイ/ティールのアクセント。
   バー・居酒屋・深夜営業・カクテル主体の店向け。 */
[data-theme="midnight"] {
  --color-bg-base: #0E1320;
  --color-bg-surface: #161D2E;
  --color-bg-elevated: #1E2740;
  --color-bg-hover: #2A3654;

  --color-text-primary: #EEF3FA;
  --color-text-secondary: #B9C6DB;
  --color-text-tertiary: #7F8FA8;
  --color-text-muted: #5E6B82;

  --color-accent-primary: #5DA3E0;   /* スカイブルー */
  --color-accent-secondary: #7FD0C4; /* ティール */
  --color-accent-warm: #6FA8DC;
  --color-accent-cool: #3DA38C;

  --color-divider: rgba(238, 243, 250, 0.12);
  --color-overlay-dark: rgba(14, 19, 32, 0.85);
  --color-overlay-light: rgba(238, 243, 250, 0.05);

  --shadow-glow-accent: 0 0 32px rgba(93, 163, 224, 0.28);
}

/* ===================================================================
   LIGHT FAMILY (Phase 2) — linen / garden / paper / citrus
   明るく誠実・カジュアル。日中の食卓のような明るさで、写真は自然光寄り。
   --------------------------------------------------------------------
   まず全ライトテーマ共通で「クローム・トークン」を黒側へ反転させる
   (極薄の白ボーダー/塗り → 極薄の黒)。これで明るい背景でもカードの
   輪郭やホバーが見える。テキストは --color-text-* がパレットで反転する
   ため自動的に可読。overlay-dark (モーダル背景の暗幕) は両モードで暗いまま。
   =================================================================== */
[data-theme="linen"],
[data-theme="garden"],
[data-theme="paper"],
[data-theme="citrus"] {
  --hairline:    rgba(0, 0, 0, 0.12);
  --hairline-2:  rgba(0, 0, 0, 0.08);
  --hairline-3:  rgba(0, 0, 0, 0.05);
  --fill-1:      rgba(0, 0, 0, 0.02);
  --fill-2:      rgba(0, 0, 0, 0.04);
  --fill-3:      rgba(0, 0, 0, 0.07);
  --shadow-color:      rgba(0, 0, 0, 0.12);
  --shadow-color-soft: rgba(0, 0, 0, 0.07);
  --color-overlay-light: rgba(0, 0, 0, 0.04);
  --shadow-card: 0 6px 24px rgba(0, 0, 0, 0.08);
  --shadow-elevated: 0 12px 40px rgba(0, 0, 0, 0.12);
}

/* Linen — 暖かいクリーム。ベーカリー・ブランチ・カフェ・デリ向け。 */
[data-theme="linen"] {
  --color-bg-base: #FBF6EE;
  --color-bg-surface: #FFFFFF;
  --color-bg-elevated: #FFFFFF;
  --color-bg-hover: #F3ECE0;

  --color-text-primary: #2A2218;
  --color-text-secondary: #6B5E49;
  --color-text-tertiary: #9A8C76;
  --color-text-muted: #B8AB95;

  --color-accent-primary: #E08A2B;   /* 焼き色のオレンジ */
  --color-accent-secondary: #D9A441;
  --color-accent-warm: #C2541F;
  --color-accent-cool: #3DA38C;

  --color-divider: rgba(42, 34, 24, 0.10);
  --color-overlay-dark: rgba(42, 34, 24, 0.55);
  --shadow-glow-accent: 0 0 32px rgba(224, 138, 43, 0.20);
}

/* Garden — やわらかな緑。サラダ・ヴィーガン・ジュース・農場直送向け。 */
[data-theme="garden"] {
  --color-bg-base: #F4F7F0;
  --color-bg-surface: #FFFFFF;
  --color-bg-elevated: #FFFFFF;
  --color-bg-hover: #E9F0DE;

  --color-text-primary: #22311E;
  --color-text-secondary: #4F6043;
  --color-text-tertiary: #7E8F70;
  --color-text-muted: #9DAA8E;

  --color-accent-primary: #5C8A2C;   /* 葉のグリーン */
  --color-accent-secondary: #97C459;
  --color-accent-warm: #639922;
  --color-accent-cool: #2F9E8A;

  --color-divider: rgba(34, 49, 30, 0.10);
  --color-overlay-dark: rgba(34, 49, 30, 0.55);
  --shadow-glow-accent: 0 0 32px rgba(92, 138, 44, 0.20);
}

/* Paper — ギャラリー白のミニマル。インク黒のアクセント。パティスリー・
   モダン和食・デザイン志向向け。 */
[data-theme="paper"] {
  --color-bg-base: #F7F6F3;
  --color-bg-surface: #FFFFFF;
  --color-bg-elevated: #FFFFFF;
  --color-bg-hover: #EDEBE5;

  --color-text-primary: #2C2C2A;
  --color-text-secondary: #5F5E5A;
  --color-text-tertiary: #888780;
  --color-text-muted: #A8A79F;

  --color-accent-primary: #2C2C2A;   /* インク (ほぼ黒) */
  --color-accent-secondary: #5F5E5A;
  --color-accent-warm: #444441;
  --color-accent-cool: #5F5E5A;

  --color-divider: rgba(44, 44, 42, 0.10);
  --color-overlay-dark: rgba(20, 20, 19, 0.55);
  --shadow-glow-accent: none;
}

/* Citrus — 鮮やかな赤橙ポップ。ストリートフード・バーガー・テイクアウト・
   高回転のファストカジュアル向け。 */
[data-theme="citrus"] {
  --color-bg-base: #FFF8F0;
  --color-bg-surface: #FFFFFF;
  --color-bg-elevated: #FFFFFF;
  --color-bg-hover: #FFEAD8;

  --color-text-primary: #1A1A1A;
  --color-text-secondary: #5C5048;
  --color-text-tertiary: #8A7E73;
  --color-text-muted: #A89C90;

  --color-accent-primary: #E8421E;   /* 食欲の赤橙 */
  --color-accent-secondary: #F5A623;
  --color-accent-warm: #C5341A;
  --color-accent-cool: #2FA39B;

  --color-divider: rgba(26, 26, 26, 0.12);
  --color-overlay-dark: rgba(26, 26, 26, 0.55);
  --shadow-glow-accent: 0 0 32px rgba(232, 66, 30, 0.18);
}

/* ===== Reset & Base ===== */
*, *::before, *::after {
  box-sizing: border-box;
}

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

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.7;
  color: var(--color-text-primary);
  background: var(--color-bg-base);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img {
  max-width: 100%;
  display: block;
  -webkit-user-drag: none;
}

button {
  font-family: inherit;
  cursor: pointer;
}

a {
  color: inherit;
  text-decoration: none;
}

::selection {
  background: var(--color-accent-primary);
  color: var(--color-bg-base);
}

/* ===== Common Layout Utilities ===== */
.container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding-left: var(--container-padding);
  padding-right: var(--container-padding);
}

.section {
  /* 6rem → 4rem so the heading + first card fit comfortably above the
     fold on most viewports. Previous value forced a screen of empty
     dark space between the section title and its content. */
  padding: var(--space-xl) 0;
  position: relative;
}

.section-tight {
  padding: var(--space-xl) 0;
}

.gradient-overlay {
  background: linear-gradient(
    to bottom,
    transparent 0%,
    var(--color-bg-base) 100%
  );
}

/* ===== Typography ===== */
.font-display { font-family: var(--font-display); }
.font-body { font-family: var(--font-body); }
.font-number { font-family: var(--font-number); }

.text-hero {
  font-size: var(--fs-hero);
  font-weight: 900;
  line-height: 1.05;
  letter-spacing: -0.02em;
}

.text-h1 {
  font-size: var(--fs-h1);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.01em;
}

.text-h2 {
  font-size: var(--fs-h2);
  font-weight: 700;
  line-height: 1.2;
}

.text-h3 {
  font-size: var(--fs-h3);
  font-weight: 600;
  line-height: 1.3;
}

.text-muted { color: var(--color-text-tertiary); }
.text-accent { color: var(--color-accent-primary); }

/* ===== Animations ===== */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(40px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes scaleIn {
  from { opacity: 0; transform: scale(0.92); }
  to { opacity: 1; transform: scale(1); }
}

@keyframes float {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-8px); }
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.6; }
}

.animate-fadeInUp { animation: fadeInUp var(--duration-slow) var(--ease-out) both; }
.animate-fadeIn { animation: fadeIn var(--duration-normal) var(--ease-out) both; }
.animate-scaleIn { animation: scaleIn var(--duration-normal) var(--ease-bounce) both; }

/* ===== Scroll Reveal (basic intersection observer ready) =====
   0.8s(--duration-slow)は「各項目が遅れて出てくる」体感の主因だったため、
   0.45s+小さめの移動量に短縮(上質さは保ちつつ機敏に)。transition は
   all でなく対象プロパティを明示(意図しないプロパティの遅延を防ぐ)。 */
.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.45s var(--ease-out), transform 0.45s var(--ease-out);
}

.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ===== Print Styles ===== */
@media print {
  body {
    background: white;
    color: black;
  }
  .no-print { display: none !important; }
}

/* ═══════════════════════════════════════════════════════════════
   テイクアウト (takeout アドオン): 店内/お持ち帰りトグル + 注記バナー
   takeoutEnabled の店だけ menu.js が描画する。色はテーマトークン追従。
   ═══════════════════════════════════════════════════════════════ */
/* トグル併用時のヘッダーは 3 トラックの grid。
   左spacer(1fr) | ロゴ(auto) | 右(1fr,トグル)。左右が等幅なので center 配置の
   ロゴは「トグルがあっても」完全に中央へ来る。JS が logoAlign から
   --logo-grid-col / --logo-self を入れて、左=左端 / 右=トグルの左隣 も成立。

   セレクタは .header__inner を二重指定して詳細度を上げる。theme-fsc-rich.css の
   `.header__inner { display:flex }` が base.css より後に読み込まれるため、
   単一クラスだと flex に負けて grid が効かず、logo+toggle が中央に寄ってしまう。

   max-width:100% で .container の最大幅を解除し、ヘッダー全幅に広げる。これで
   トグルはビュー右端付近まで寄り、ロゴは全幅の中央 = ビュー中央(= ヒーロー中央)
   にちょうど来る。 */
.header__inner.header__inner--has-toggle {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 12px;
  max-width: 100%;
}
.header__inner.header__inner--has-toggle > .header__logo {
  grid-column: var(--logo-grid-col, 2);
  justify-self: var(--logo-self, center);
  min-width: 0;
}
/* 画像ロゴは grid セル内で高さ基準にフィット (flex 用の width:100% を解除) */
.header__inner.header__inner--has-toggle > .header__logo--image {
  width: auto;
  max-width: 100%;
}
.header__inner.header__inner--has-toggle > .header__toggles {
  grid-column: 3;
  justify-self: end;
}
/* 言語チップ単独時の右上アンカー(多言語化):
   has-toggle グリッドを使わず絶対配置にする。グリッド化すると画像ロゴの
   %ベース max-width が auto セルで潰れてロゴが極小になるため(2026-07-03)。
   モバイルではヘッダーに出さない(ボトムナビ quick-nav の🌐が担う)。 */
.header__inner { position: relative; }
.header__langside {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
}
@media (max-width: 768px) {
  .header .mf-lang-chip { display: none; }
}

/* 右上クラスタ: 店内/お持ち帰り + 時間帯トグルを横並びで集約 */
.header__toggles {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
  min-width: 0;
}
.mf-svc-toggle {
  display: inline-flex;
  gap: 2px;
  padding: 3px;
  border-radius: 999px;
  background: var(--fill-1, rgba(127, 127, 127, 0.1));
  border: 1px solid var(--hairline, rgba(127, 127, 127, 0.2));
  flex-shrink: 0;
}
.mf-svc-toggle__btn {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--color-header-text, #fff);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: 6px 14px;
  border-radius: 999px;
  cursor: pointer;
  opacity: 0.65;
  transition: background-color 0.2s ease, color 0.2s ease, opacity 0.2s ease;
  white-space: nowrap;
}
.mf-svc-toggle__btn:hover {
  opacity: 1;
}
.mf-svc-toggle__btn.is-active {
  background: var(--color-accent-primary, #e89b3b);
  color: var(--color-on-accent, #fff);
  opacity: 1;
}

/* タイムコントロール: バンド外で隠す対象 (#customize 等)。
   wizard の inline display 操作に勝つよう !important。 */
.mf-tc-hidden {
  display: none !important;
}

/* ─── 案A: 時間帯チップ ───────────────────────────────────────────
   ヘッダー右上に「🕐 いまの時間帯 ⌄」を1個だけ出す。タップで下からシートが
   出る。色はすべてテーマトークン由来 (--color-header-text / --fill-* /
   --hairline / --color-accent-primary) なので全7アーキタイプに追従する。 */
.mf-band-chip {
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 38px;
  padding: 8px 12px 8px 11px;
  border-radius: 999px;
  background: var(--fill-2, rgba(127, 127, 127, 0.06));
  border: 1px solid var(--hairline, rgba(127, 127, 127, 0.2));
  color: var(--color-header-text, #fff);
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.2s var(--ease-out, ease), border-color 0.2s var(--ease-out, ease);
}
.mf-band-chip:hover {
  background: var(--fill-3, rgba(127, 127, 127, 0.09));
  border-color: var(--hairline, rgba(127, 127, 127, 0.3));
}
.mf-band-chip__cue {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  color: var(--color-accent-primary, #e89b3b);
}
.mf-band-chip__caret {
  width: 13px;
  height: 13px;
  flex-shrink: 0;
  opacity: 0.5;
  transition: transform 0.2s var(--ease-out, ease);
}

/* ─── 段2: 店内/お持ち帰りバー (スクロールで畳む) ──────────────────
   .header__inner の直下に置く全幅行。max-height を 0 にして滑らかに畳む。 */
.header__svcbar {
  overflow: hidden;
  /* 大きめのヘッダー余白でも内容が切れないよう余裕を持たせる(畳む時は 0 へ)。 */
  max-height: 200px;
  opacity: 1;
  transition: max-height 0.32s var(--ease-out, ease), opacity 0.2s var(--ease-out, ease);
}
.header__svcbar-inner {
  display: flex;
  justify-content: center;
  /* ロゴ↔店内/お持ち帰り の間隔。--header-padding-y に比例(スライダー連動)。
     下端の余白は .header の padding-bottom(=--header-padding-y)が担うので 0。 */
  padding-top: calc(var(--header-padding-y, 16px) * 0.55);
  padding-bottom: 0;
}
.header.is-collapsed .header__svcbar {
  max-height: 0;
  opacity: 0;
  pointer-events: none;
}

/* ─── 時間帯ボトムシート ─────────────────────────────────────────── */
.mf-band-sheet {
  position: fixed;
  inset: 0;
  z-index: 200;
}
.mf-band-sheet[hidden] {
  display: none;
}
.mf-band-sheet__backdrop {
  position: absolute;
  inset: 0;
  background: var(--color-overlay-dark, rgba(20, 17, 13, 0.6));
  opacity: 0;
  transition: opacity 0.28s var(--ease-out, ease);
}
.mf-band-sheet.is-open .mf-band-sheet__backdrop {
  opacity: 1;
}
.mf-band-sheet__panel {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  max-width: 520px;
  margin: 0 auto;
  background: var(--color-bg-elevated, #2a2218);
  border-top-left-radius: var(--radius-card, 16px);
  border-top-right-radius: var(--radius-card, 16px);
  box-shadow: var(--shadow-elevated, 0 16px 48px rgba(0, 0, 0, 0.5));
  padding: 8px 16px calc(18px + env(safe-area-inset-bottom, 0px));
  transform: translateY(110%);
  transition: transform 0.28s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.mf-band-sheet.is-open .mf-band-sheet__panel {
  transform: translateY(0);
}
.mf-band-sheet__grip {
  width: 38px;
  height: 4px;
  border-radius: 999px;
  background: var(--color-text-tertiary, #8b7e6a);
  opacity: 0.4;
  margin: 4px auto 8px;
}
.mf-band-sheet__title {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--color-text-tertiary, #8b7e6a);
  text-align: center;
  margin: 0 0 8px;
}
.mf-band-sheet__list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.mf-band-sheet__opt {
  appearance: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  min-height: 52px;
  padding: 13px 16px;
  border-radius: var(--radius-button, 12px);
  border: 1px solid var(--hairline, rgba(127, 127, 127, 0.18));
  background: var(--fill-1, rgba(127, 127, 127, 0.03));
  color: var(--color-text-primary, #fafafa);
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
  transition: background-color 0.18s var(--ease-out, ease), border-color 0.18s var(--ease-out, ease);
}
.mf-band-sheet__opt:hover {
  background: var(--fill-2, rgba(127, 127, 127, 0.06));
}
.mf-band-sheet__opt.is-active {
  border-color: var(--accent-line, rgba(232, 155, 59, 0.32));
  background: var(--accent-tint-2, rgba(232, 155, 59, 0.16));
}
.mf-band-sheet__opt-label {
  display: inline-flex;
  align-items: center;
}
.mf-band-sheet__now {
  margin-left: 8px;
  font-size: 11px;
  font-weight: 600;
  color: var(--color-accent-primary, #e89b3b);
  background: var(--accent-tint-2, rgba(232, 155, 59, 0.16));
  padding: 2px 8px;
  border-radius: 999px;
}
.mf-band-sheet__tick {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  color: var(--color-accent-primary, #e89b3b);
  opacity: 0;
}
.mf-band-sheet__opt.is-active .mf-band-sheet__tick {
  opacity: 1;
}

/* 視覚モーション低減設定の利用者にはアニメーションを無効化する。 */
@media (prefers-reduced-motion: reduce) {
  .header__svcbar,
  .mf-band-sheet__backdrop,
  .mf-band-sheet__panel,
  .mf-band-chip,
  .mf-band-chip__caret {
    transition: none !important;
  }
}
/* 持ち帰りモードで上乗せ料金が発生する商品の価格に添える小ラベル。
   「この値段は持ち帰り価格(容器代込み)です」と一目で伝える。 */
.mf-takeout-tag {
  /* column-flex な card content 内では inline-flex でも cross 軸 stretch で
     全幅に伸びてしまう。fit-content + align-self:start で内容幅に固定する。 */
  display: inline-flex;
  align-self: flex-start;
  width: fit-content;
  max-width: 100%;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.02em;
  line-height: 1;
  padding: 4px 9px;
  border-radius: 999px;
  /* テーマ非依存で常に読める配色: 文字は本文色 (テーマがコントラストを保証)、
     アクセント感は枠線+アイコンで出す。塗りはアクセントの薄い面。
     ベタ塗り+白文字だと、明るいアクセント(linen/citrus)や ember の中間色
     オレンジで白が 2:1 程度になり読めなくなるため避ける。 */
  background: var(--accent-tint-2, rgba(232, 155, 59, 0.16));
  color: var(--color-text-primary, #fff);
  border: 1px solid var(--accent-line, rgba(232, 155, 59, 0.32));
  white-space: nowrap;
  vertical-align: middle;
}
.mf-takeout-tag::before {
  content: "🛍";
  font-size: 10px;
  line-height: 1;
}
/* カード種別ごとの配置微調整 */
.main-card .mf-takeout-tag,
.set-card .mf-takeout-tag {
  margin-top: 8px;
}
.topping-card__takeout-tag {
  display: flex;
  justify-content: flex-end;
  margin-top: 8px;
}

/* 詳細モーダル: 持ち帰り情報ボックス (容器代の内訳 + 商品ごとの補足メモ)。 */
.detail-modal__takeout-info {
  margin-top: 14px;
  padding: 11px 13px;
  border-radius: 12px;
  background: var(--accent-tint-1, rgba(232, 155, 59, 0.1));
  border: 1px solid var(--accent-line, rgba(232, 155, 59, 0.28));
}
.detail-modal__takeout-info-head {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--color-accent-primary, #e89b3b);
  letter-spacing: 0.02em;
}
.detail-modal__takeout-info-surcharge {
  margin-left: auto;
  font-variant-numeric: tabular-nums;
}
.detail-modal__takeout-info-note {
  margin-top: 7px;
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--color-text-primary, inherit);
  opacity: 0.9;
  white-space: pre-wrap;
}

/* ===================================================================
   適応コンパクト行 (menu-compact)
   品数が多いカテゴリで縦スクロールを抑えるための行リスト表示。
   全テーマ共通のトークンだけで組み、JS(menu.js)が件数に応じて付与する。
   data-*-id を保持しているのでクリック/詳細モーダルは通常カードと同じ。
   =================================================================== */
.menu-compact {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-width: 640px;
  margin-inline: auto;
}
.mc-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px;
  border-radius: 14px;
  background: var(--color-bg-surface, rgba(127, 127, 127, 0.06));
  border: 1px solid var(--hairline, rgba(127, 127, 127, 0.18));
  cursor: pointer;
  transition: background var(--duration-fast, 0.15s) ease, transform var(--duration-fast, 0.15s) ease;
}
.mc-row:active { transform: scale(0.99); }
@media (hover: hover) {
  .mc-row:hover { background: var(--color-bg-surface-2, rgba(127, 127, 127, 0.12)); }
}
.mc-row.is-soldout { opacity: 0.55; }
.mc-row__thumb {
  position: relative;
  flex: 0 0 auto;
  width: 64px;
  height: 64px;
  border-radius: 10px;
  overflow: hidden;
  background: var(--color-bg-base, rgba(127, 127, 127, 0.1));
}
.mc-row__thumb img,
.mc-row__thumb picture {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.mc-row__thumb-ph { display: block; width: 100%; height: 100%; }
.mc-row__veil {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.45);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
}
.mc-row__body { flex: 1 1 auto; min-width: 0; }
.mc-row__name {
  display: block;
  font-family: var(--font-display, inherit);
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1.35;
  color: var(--color-text-primary, inherit);
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.mc-row__price {
  flex: 0 0 auto;
  font-family: var(--font-number, var(--font-body, inherit));
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--color-text-primary, inherit);
  white-space: nowrap;
}
.mc-row__suffix {
  margin-left: 3px;
  font-size: 0.72em;
  font-weight: 500;
  color: var(--color-text-tertiary, inherit);
}