:root {
  /* ベース（ヘッダーは白基調で明るく軽やかに。ページ全体は淡い若葉クリームで優しい印象を出す） */
  --bg: #ffffff;
  --bg-page: #f6f8ef;
  --panel: #ffffff;
  --ink: #253321;
  --muted: #5a6653;
  --line: #e4e9dc;

  /* ブランド/操作色（ボタン・リンク・フォーカスリング専用。安全ステータス色とは分離する）。
     ロゴの若葉グリーン系。brand-600 は白地で 5:1 のコントラストを満たしテキストにも使える。 */
  --brand-500: #5c9e43;
  --brand-600: #3e7b2b;
  --brand-700: #2f5e20;

  /* アクセント（ロゴのスマイル由来の温かい黄）。バッジ・装飾専用でテキスト色には使わない
     （白地では低コントラストのため）。文字を載せる時は --accent-ink を使う。 */
  --accent-400: #f5c542;
  --accent-ink: #6b5200;

  /* 安全性ステータス色（メニュー単位の行・地図マーカー・凡例専用。意味を固定＝変更しない） */
  --status-safe-bg: #dcfce7;
  --status-safe-fg: #15803d;
  --status-caution-bg: #ffedd5;
  --status-caution-fg: #9a3412;
  --status-unclear-bg: #e5e7eb;
  --status-unclear-fg: #1f2937;
  --status-info-bg: #e0e7ff;
  --status-info-fg: #3730a3;
  --status-danger-fg: #b91c1c;
  --status-neutral-fg: #334155;

  /* 地図マーカーの塗り色（行より濃い実色）。neutralはアレルゲン未選択時の「安全性の主張なし」用。
     ★neutral はブランド色(緑)から独立させる：ブランド緑を参照すると safe マーカーの緑と紛らわしく、
       「主張なし」ピンが「不使用」に見える健康直結のリスクがあるため、別系統のティールで固定する。 */
  --marker-safe: #16a34a;
  --marker-caution: #d97706;
  --marker-unclear: #6b7280;
  --marker-neutral: #0e7490;

  /* タイプスケール */
  --fs-xs: 12px;
  --fs-sm: 13px;
  --fs-base: 16px;
  --fs-lg: 18px;
  --fs-xl: 20px;
  --lh-tight: 1.25;
  --lh-normal: 1.5;
  --lh-relaxed: 1.6;

  /* スペーシング（4pxベース） */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;

  /* 角丸/影（Soft UI：やや大きめの角丸＋ブランド色を帯びた柔らかい多層シャドウ） */
  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-pill: 999px;
  --shadow-sm: 0 1px 3px rgba(62, 123, 43, .08), 0 1px 2px rgba(62, 123, 43, .06);
  --shadow-md: 0 8px 24px rgba(62, 123, 43, .13), 0 2px 6px rgba(62, 123, 43, .08);

  --focus-ring: var(--brand-600);
}

* { box-sizing: border-box; }
html, body {
  margin: 0;
  height: 100%;
  font-family: "M PLUS Rounded 1c", system-ui, -apple-system, "Hiragino Kaku Gothic ProN", "Noto Sans JP", sans-serif;
  font-size: var(--fs-base);
  line-height: var(--lh-normal);
  color: var(--ink);
  background: var(--bg-page);
}
body { display: flex; flex-direction: column; height: 100vh; height: 100dvh; }

a { color: var(--brand-600); }

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

:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }

.icon { width: 1em; height: 1em; display: inline-block; flex-shrink: 0; vertical-align: -0.125em; }

input[type="checkbox"] { accent-color: var(--brand-600); }

/* ヘッダー（白基調＋下線で明るく軽やかに。ブランドロゴ画像を主役にする） */
#topbar {
  background: var(--bg);
  color: var(--ink); display: flex; align-items: center; gap: var(--space-4);
  padding: var(--space-3) var(--space-4); flex-wrap: wrap;
  border-bottom: 1px solid var(--line);
}
.brand { font-weight: 800; font-size: var(--fs-xl); margin: 0; display: flex; align-items: center; gap: var(--space-2); letter-spacing: .01em; }
.brand img { height: 32px; width: auto; display: block; }
/* サイトの内容が一目で伝わるキャッチ文言（可視）。ロゴ横に控えめに置く。
   核メッセージ「アレルギー × 食べたいもの」は OG/Twitter 説明と揃える。 */
#brand-tagline { margin: 0; font-size: var(--fs-sm); font-weight: 600; color: var(--brand-600); white-space: nowrap; }
/* 免責は淡い黄の帯で常時明示（濃色ヘッダー時代の白抜き文字をやめ、白地で 7:1 超の茶字にする）。 */
#disclaimer { font-size: var(--fs-sm); font-weight: 500; color: var(--status-caution-fg); display: flex; align-items: center; gap: var(--space-1); background: var(--status-caution-bg); border-radius: var(--radius-sm); padding: 4px 10px; }
#disclaimer .icon { color: var(--status-caution-fg); }
/* ヘッダー常時表示のプライバシーポリシー・利用規約導線。初回同意モーダルを閉じた後もいつでも
   戻れるようにする（クレジット欄末尾のリンクは結果パネル最下部で埋もれるため、常時見えるヘッダーにも置く）。
   2リンクは1つの nav（#topbar-links）にまとめ、折り返し時も上下に分かれず必ず横並びで
   1行に収まるようにする（コンテナごと次行へ落ちるため、狭幅でリンクが縦積みにならない）。
   margin-left:auto はコンテナに付けて右端へ寄せる。 */
#topbar-links { display: flex; align-items: center; gap: var(--space-3); margin-left: auto; flex-shrink: 0; }
#topbar-privacy, #topbar-terms { flex-shrink: 0; color: var(--brand-600); font-size: var(--fs-sm); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; white-space: nowrap; }
#topbar-privacy:hover, #topbar-privacy:focus-visible, #topbar-terms:hover, #topbar-terms:focus-visible { color: var(--brand-700); }

/* レイアウト（モバイルファースト：地図は常時全画面表示＋パネルはボトムシート） */
#layout { flex: 1; display: flex; flex-direction: column; min-height: 0; position: relative; }

#panel { background: var(--panel); }

/* ボトムシートの開閉ハンドル（モバイルのみ表示。デスクトップは非表示） */
#panel-handle { display: none; }
.panel-handle-chevron { color: var(--muted); transition: transform .2s ease; flex-shrink: 0; }
#panel-handle[aria-expanded="true"] .panel-handle-chevron { transform: rotate(180deg); }

/* アレルギー選択（別モーダル）でも使う共通パーツ */
.hint { font-size: var(--fs-xs); color: var(--muted); margin: 0 0 var(--space-2); }
.allergen-groups { padding-bottom: var(--space-1); }

.group-title { font-size: var(--fs-xs); color: var(--muted); margin: var(--space-3) 0 var(--space-1); font-weight: 600; }
.allergen {
  display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-sm); font-weight: 500;
  background: var(--bg-page); border: 1px solid var(--line); border-radius: var(--radius-pill);
  padding: 12px 14px; min-height: 44px; margin: 0 8px 8px 0; cursor: pointer;
  transition: border-color .2s ease, background-color .2s ease, box-shadow .2s ease;
}
.allergen:hover { border-color: var(--brand-500); box-shadow: var(--shadow-sm); }
.allergen input { margin: 0; width: 18px; height: 18px; }
.allergen.on { background: var(--status-safe-bg); border-color: var(--marker-safe); color: var(--status-safe-fg); box-shadow: var(--shadow-sm); }

.auto { display: flex; align-items: center; gap: 8px; font-size: var(--fs-sm); color: var(--muted); min-height: 44px; margin-top: var(--space-3); cursor: pointer; }

/* 食べたいもの検索：検索条件モーダルではなく、地図上部に常時表示する浮遊バー。
   入力中はサジェスト取得のみ行い、実際の検索は Enter/OSキーボードの検索実行や候補選択で行う。 */
#map-search-wrap { position: absolute; top: var(--space-3); left: var(--space-3); right: 60px; max-width: 420px; z-index: 10; }
#map-search-bar {
  display: flex; align-items: center; gap: var(--space-2);
  background: #fff; border-radius: var(--radius-pill);
  padding: 10px 14px; box-shadow: var(--shadow-md);
  transition: box-shadow .15s ease;
}
#map-search-bar:focus-within { box-shadow: var(--shadow-md), 0 0 0 2px var(--focus-ring); }
#map-search-bar .icon { color: var(--muted); flex-shrink: 0; }
#map-search-bar #keyword {
  flex: 1; min-width: 0; border: 0; background: transparent; padding: 4px 0;
  font: inherit; font-size: var(--fs-base); color: var(--ink);
}
#map-search-bar #keyword:focus { outline: none; }
#keyword-clear {
  flex-shrink: 0; width: 28px; height: 28px; border-radius: 50%; border: 0;
  background: var(--bg-page); color: var(--muted); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
#keyword-clear[hidden] { display: none; }
#keyword-clear:hover { background: var(--status-unclear-bg); }
#keyword-clear .icon { width: 14px; height: 14px; }

/* メニュー名サジェスト（入力中はライブ検索せず、候補提示のみ） */
#keyword-suggestions {
  position: absolute; top: calc(100% + 6px); left: 0; right: 0;
  background: #fff; border-radius: var(--radius-md); box-shadow: var(--shadow-md);
  list-style: none; margin: 0; padding: 6px; max-height: 260px; overflow-y: auto; z-index: 11;
}
.keyword-suggestion {
  padding: 10px 12px; border-radius: var(--radius-sm); font-size: var(--fs-sm); cursor: pointer;
  display: flex; align-items: center; gap: 8px; color: var(--ink);
}
.keyword-suggestion .icon { width: 14px; height: 14px; color: var(--muted); flex-shrink: 0; }
.keyword-suggestion:hover, .keyword-suggestion.is-active { background: var(--status-info-bg); }

/* アレルギー選択ボタン（右下常設のラベル付きピル）。アイコンのみのFABより「何をする所か」が伝わる。
   選択中はバッジで件数を示す。バッジは危険色(赤)ではなくブランドの黄アクセントで「危険表示」と分離する。 */
#allergen-fab {
  position: fixed; right: var(--space-4); bottom: calc(64px + var(--space-3)); z-index: 15;
  min-height: 48px; padding: 0 var(--space-4); border-radius: var(--radius-pill); border: 0;
  background: var(--brand-600); color: #fff; cursor: pointer;
  display: inline-flex; align-items: center; gap: var(--space-2);
  font: inherit; font-size: var(--fs-sm); font-weight: 700;
  box-shadow: var(--shadow-md); transition: background-color .2s ease, transform .15s ease;
}
#allergen-fab:hover { background: var(--brand-700); }
#allergen-fab:active { transform: scale(.97); }
#allergen-fab .icon { width: 20px; height: 20px; flex-shrink: 0; }
.fab-label { white-space: nowrap; }
#allergen-fab.has-selection { background: var(--brand-700); }
.fab-badge {
  min-width: 20px; height: 20px; padding: 0 6px;
  border-radius: var(--radius-pill); background: var(--accent-400); color: var(--accent-ink);
  font-size: 11px; font-weight: 800; display: flex; align-items: center; justify-content: center;
}
.fab-badge[hidden] { display: none; }
@media (min-width: 768px) {
  #allergen-fab { bottom: var(--space-5); }
}

#results-wrap { padding: var(--space-3) var(--space-4) var(--space-4); }

#status { font-size: var(--fs-sm); color: var(--muted); margin: 0 0 var(--space-1); min-height: 1.2em; }
#status-error { font-size: var(--fs-sm); color: var(--status-danger-fg); font-weight: 600; margin-bottom: var(--space-1); }
#status-error:empty { display: none; }

/* 地図の凡例（地図オーバーレイの1箇所のみに集約。サイドパネル側には置かない） */
#map-legend {
  position: absolute; left: var(--space-2); bottom: var(--space-2);
  background: rgba(255, 255, 255, .92); border-radius: var(--radius-md);
  padding: 6px 10px; font-size: 11px; color: var(--status-neutral-fg, #334155);
  box-shadow: var(--shadow-sm);
  display: flex; flex-wrap: wrap; gap: 4px 10px; max-width: 240px; z-index: 5;
}
.legend-item { display: inline-flex; align-items: center; gap: 6px; }
.legend-swatch {
  width: 14px; height: 14px; border-radius: 50%; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center; color: #fff;
}
.legend-swatch.safe { background: var(--marker-safe); border: 2px solid #fff; box-shadow: 0 0 0 1px var(--marker-safe); }
.legend-swatch.caution { background: var(--marker-caution); border: 2px dashed #fff; box-shadow: 0 0 0 1px var(--marker-caution); }

/* スケルトンローディング */
.skeleton-pill, .skeleton-card {
  background: linear-gradient(90deg, var(--status-info-bg) 25%, #f5f8ff 37%, var(--status-info-bg) 63%);
  background-size: 400% 100%; animation: skeleton-shimmer 1.4s ease infinite;
}
.skeleton-pill { display: inline-block; width: 76px; height: 40px; border-radius: var(--radius-pill); margin: 0 8px 8px 0; }
.skeleton-card { display: block; height: 68px; border-radius: var(--radius-md); margin-bottom: var(--space-3); list-style: none; }
@keyframes skeleton-shimmer { 0% { background-position: 100% 0; } 100% { background-position: 0 0; } }
@media (prefers-reduced-motion: reduce) {
  .skeleton-pill, .skeleton-card { animation: none; background: var(--status-info-bg); }
}

/* 0件時の代替導線 */
#results li.empty-state { cursor: default; border: none; border-left: none; box-shadow: none; padding: var(--space-6) var(--space-3); text-align: center; color: var(--muted); }
#results li.empty-state:hover { border: none; box-shadow: none; transform: none; }
.empty-state .icon-circle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 56px; height: 56px; border-radius: 50%; margin-bottom: var(--space-3);
  background: var(--status-info-bg); color: var(--status-info-fg);
}
.empty-state .icon-circle .icon { width: 26px; height: 26px; }
.empty-state p { margin: 0 0 var(--space-3); font-size: var(--fs-sm); }
.empty-state-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); justify-content: center; }
.empty-state-actions button {
  display: inline-flex; align-items: center; gap: 6px; font: inherit; font-size: var(--fs-sm); font-weight: 600;
  min-height: 44px; padding: 8px 16px; border-radius: var(--radius-pill);
  border: 1px solid var(--brand-600); background: #fff; color: var(--brand-600); cursor: pointer;
  transition: background-color .2s ease, color .2s ease, box-shadow .2s ease;
}
.empty-state-actions button:hover { background: var(--brand-600); color: #fff; box-shadow: var(--shadow-sm); }

/* 検索結果リスト（左端に安全性ステータス色のアクセント。中身はメニュー単位の状態が主役） */
#results { list-style: none; padding: 0; margin: 0; }
#results li {
  border: 1px solid var(--line); border-left: 4px solid var(--line); border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4); margin-bottom: var(--space-3);
  cursor: pointer; background: #fff; box-shadow: var(--shadow-sm);
  transition: border-color .2s ease, box-shadow .2s ease, transform .15s ease;
}
#results li:hover { border-color: var(--brand-500); box-shadow: var(--shadow-md); transform: translateY(-1px); }
#results li.result-card--safe { border-left-color: var(--marker-safe); }
#results li.result-card--caution { border-left-color: var(--marker-caution); }
#results li.result-card--unclear { border-left-color: var(--marker-unclear); }
#results .name { font-weight: 700; font-size: var(--fs-base); margin-bottom: 8px; }
#results .meta-row { margin-top: 8px; }
.meta-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: var(--fs-xs); color: var(--muted); }
.genre { color: var(--muted); }

/* メニュー単位の状態行（使用有無・コンタミ有無を視覚的に示す主役コンテンツ） */
.menu-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.menu-row {
  display: flex; align-items: center; gap: 6px; font-size: var(--fs-sm);
  padding: 6px 10px; border-radius: var(--radius-sm); line-height: var(--lh-tight);
}
.menu-row--safe { background: var(--status-safe-bg); color: var(--status-safe-fg); }
.menu-row--caution { background: var(--status-caution-bg); color: var(--status-caution-fg); font-weight: 600; }
.menu-row--partial { background: var(--status-unclear-bg); color: var(--status-unclear-fg); }
.menu-row--plain { background: var(--bg-page); color: var(--ink); }
.menu-row--more { background: transparent; color: var(--brand-600); font-weight: 600; padding-left: 10px; }
.menu-empty { font-size: var(--fs-sm); color: var(--muted); margin: 4px 0; }

#credits { font-size: var(--fs-xs); color: var(--muted); margin-top: var(--space-4); line-height: var(--lh-relaxed); border-top: 1px solid var(--line); padding-top: var(--space-2); }

/* 地図 */
/* z-index を明示してスタッキングコンテキストを作る。マーカーのタップ前面化（BASE_TAP_Z=100〜）は
   祖先にスタッキングコンテキストが無いと直上のオーバーレイ層(詳細シート/アレルゲンモーダル)まで
   突き抜けてしまうため、地図コンテナ内に閉じ込める。 */
#map-wrap { flex: 1; min-height: 40vh; position: relative; z-index: 1; }
#map { position: absolute; inset: 0; }

/* 地図マーカー（色＋アイコン＋線種の3重差別化。neutralはアレルゲン未選択時の中立ピン）。
   外側 .map-marker-anchor は MapLibre が位置決め用 transform を当てるため、
   選択時の拡大・発光は内側 .map-marker にだけ適用する（位置がズレないように分離）。 */
.map-marker-anchor { width: 30px; height: 30px; cursor: pointer; }
.map-marker {
  width: 100%; height: 100%; border-radius: 50%; color: #fff;
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--shadow-md); transition: transform .15s ease;
}
.map-marker .icon { width: 16px; height: 16px; }
.map-marker--safe { background: var(--marker-safe); border: 3px solid #fff; }
.map-marker--caution { background: var(--marker-caution); border: 3px dashed #fff; }
.map-marker--unclear { background: var(--marker-unclear); border: 3px dotted #fff; }
.map-marker--neutral { background: var(--marker-neutral); border: 3px solid #fff; }

/* 選択中の店舗マーカー：常時はっきり見えるリングを固定表示しつつ、
   リング自体を継続的に明るさが変化する「呼吸するような発光」にし、
   外側に広がって消えるリップル(::after)も重ねて「選択中はずっとアニメーションしている」ことを強調する。 */
.map-marker--selected {
  transform: scale(1.35);
  position: relative;
  z-index: 3;
  animation: marker-glow 1.4s ease-in-out infinite;
}
.map-marker--selected::after {
  content: "";
  position: absolute; inset: -9px; border-radius: 50%;
  border: 2px solid var(--brand-500);
  animation: marker-ping 1.6s cubic-bezier(0, 0, .2, 1) infinite;
}
@keyframes marker-glow {
  0%, 100% { box-shadow: 0 0 0 4px #fff, 0 0 0 8px var(--brand-500), 0 0 10px 3px rgba(92, 158, 67, .35), var(--shadow-md); }
  50% { box-shadow: 0 0 0 4px #fff, 0 0 0 8px var(--brand-500), 0 0 22px 9px rgba(92, 158, 67, .7), var(--shadow-md); }
}
@keyframes marker-ping {
  0% { transform: scale(1); opacity: .8; }
  100% { transform: scale(1.7); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .map-marker--selected { animation: none; box-shadow: 0 0 0 4px #fff, 0 0 0 8px var(--brand-500), var(--shadow-md); }
  .map-marker--selected::after { animation: none; display: none; }
}

/* 詳細ボトムシート：画面の半分以下に収め、地図・選択中マーカーが見える余白を残す。
   店名・信頼度などはスティッキーヘッダーに固定し、メニュー一覧だけがスクロールする。
   max-height は app.js の detailSheetOffset() が実測して使うため、片方だけ変えても崩れない。 */
#detail-sheet { position: fixed; inset: 0; z-index: 50; pointer-events: none; }
#detail-sheet.is-open { pointer-events: auto; }
#detail-sheet-backdrop {
  position: absolute; inset: 0; background: rgba(37, 51, 33, .45);
  opacity: 0; transition: opacity .2s ease;
}
#detail-sheet.is-open #detail-sheet-backdrop { opacity: 1; }
#detail-sheet-panel {
  position: absolute; left: 0; right: 0; bottom: 0; margin: 0 auto;
  max-width: 640px; max-height: 46vh; width: 100%;
  background: #fff; border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  box-shadow: var(--shadow-md);
  display: flex; flex-direction: column;
  transform: translateY(100%); transition: transform .25s ease;
}
#detail-sheet.is-open #detail-sheet-panel { transform: translateY(0); }

/* ヘッダーはできるだけ小さく：本文（メニュー一覧）の表示面積を優先する。 */
#detail-sheet-header {
  position: relative; flex-shrink: 0;
  padding: var(--space-2) var(--space-4) var(--space-2);
  border-bottom: 1px solid var(--line);
}
.detail-sheet-handlebar { width: 36px; height: 4px; border-radius: 2px; background: var(--line); margin: 0 auto var(--space-1); }
#detail-sheet-close {
  position: absolute; top: var(--space-2); right: var(--space-2);
  width: 28px; height: 28px; border-radius: 50%; border: 0; background: var(--bg-page);
  color: var(--muted); cursor: pointer; display: flex; align-items: center; justify-content: center;
}
#detail-sheet-close:hover { background: var(--status-unclear-bg); }
.detail-sheet-title { font-size: var(--fs-base); font-weight: 800; line-height: var(--lh-tight); margin: 0 var(--space-6) 4px 0; }
.detail-sheet-meta-row { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; font-size: var(--fs-xs); color: var(--muted); }

/* 「出典を見る」は独立した行にし、その右横に注意事項アイコンを置く */
.detail-sheet-source-row { display: flex; align-items: center; gap: var(--space-2); margin-top: 4px; }
.detail-sheet-source-row:empty { display: none; margin: 0; }
.detail-sheet-source-row a { font-size: var(--fs-xs); font-weight: 600; }

/* 注意事項トグル：ヘッダーの高さを変えず、押した時だけポップオーバーで詳細を見せる */
.detail-note-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 50%; border: 0; cursor: pointer;
  background: var(--status-caution-bg); color: var(--status-caution-fg); flex-shrink: 0;
}
.detail-note-toggle .icon { width: 15px; height: 15px; }
.detail-note-popover {
  position: absolute; top: 100%; right: var(--space-4); left: var(--space-4); margin-top: 6px;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius-md);
  box-shadow: var(--shadow-md); padding: var(--space-3); z-index: 2;
  max-height: 40vh; overflow-y: auto;
}
.detail-note-item {
  font-size: var(--fs-xs); color: var(--status-caution-fg); line-height: var(--lh-normal);
  display: flex; gap: 6px; align-items: flex-start;
}
.detail-note-item + .detail-note-item { margin-top: var(--space-2); padding-top: var(--space-2); border-top: 1px solid var(--line); }
.detail-note-item .icon { margin-top: 2px; flex-shrink: 0; }

#detail-sheet-scroll { flex: 1; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: var(--space-2) var(--space-4) var(--space-4); }
.detail-section-title { font-size: var(--fs-sm); font-weight: 700; color: var(--muted); margin: 0 0 var(--space-2); }
.detail-meta { font-size: var(--fs-xs); color: var(--muted); margin: 4px 0; }
.detail-disclaimer {
  font-size: var(--fs-xs); color: var(--muted); margin-top: var(--space-4);
  border-top: 1px solid var(--line); padding-top: var(--space-3);
  display: flex; gap: 6px; align-items: flex-start;
}

/* アレルギー選択モーダル（詳細ボトムシートと同じ視覚言語：backdrop+ボトムシート）。
   縮小表示はせず、スティッキーヘッダー／スクロール本文／スティッキーフッター(検索ボタン)の3段構成。 */
#allergen-modal { position: fixed; inset: 0; z-index: 55; pointer-events: none; }
#allergen-modal.is-open { pointer-events: auto; }
#allergen-modal-backdrop {
  position: absolute; inset: 0; background: rgba(37, 51, 33, .45);
  opacity: 0; transition: opacity .2s ease;
}
#allergen-modal.is-open #allergen-modal-backdrop { opacity: 1; }
#allergen-modal-panel {
  position: absolute; left: 0; right: 0; bottom: 0; margin: 0 auto;
  max-width: 640px; max-height: 80vh; width: 100%;
  background: #fff; border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  box-shadow: var(--shadow-md);
  display: flex; flex-direction: column;
  transform: translateY(100%); transition: transform .25s ease;
}
#allergen-modal.is-open #allergen-modal-panel { transform: translateY(0); }
#allergen-modal-header { position: relative; flex-shrink: 0; padding: var(--space-3) var(--space-5); border-bottom: 1px solid var(--line); }
#allergen-modal-close {
  position: absolute; top: var(--space-3); right: var(--space-3);
  width: 32px; height: 32px; border-radius: 50%; border: 0; background: var(--bg-page);
  color: var(--muted); cursor: pointer; display: flex; align-items: center; justify-content: center;
}
#allergen-modal-close:hover { background: var(--status-unclear-bg); }
#allergen-modal-title { font-size: var(--fs-lg); font-weight: 800; margin: 0 var(--space-6) 4px 0; }
#allergen-modal-scroll { flex: 1; min-height: 0; overflow-y: auto; padding: var(--space-3) var(--space-5); }
#allergen-modal-footer { flex-shrink: 0; padding: var(--space-3) var(--space-5); border-top: 1px solid var(--line); background: #fff; }
#allergen-search-btn {
  width: 100%; display: flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 12px 16px; border: 0; border-radius: var(--radius-pill);
  background: var(--brand-600); color: #fff; font: inherit; font-size: var(--fs-base); font-weight: 700;
  cursor: pointer; box-shadow: var(--shadow-sm); transition: background-color .2s ease, box-shadow .2s ease;
}
#allergen-search-btn:hover { background: var(--brand-700); box-shadow: var(--shadow-md); }

/* モバイル（〜767px）：地図を常時全画面表示し、パネルは下からのボトムシートにする。
   入れ子スクロール（アレルゲン一覧／結果一覧が個別にスクロール）を避け、
   展開時はシート全体を1つのスクロール領域にする。 */
@media (max-width: 767.98px) {
  /* 狭幅ではヘッダーが折り返す。プライバシーポリシー・利用規約リンクをブランドと同じ行の右端へ回し、
     免責文を独立行に落とすことで、リンク追加によるヘッダーの段数増（＝地図領域の圧迫）を防ぐ。 */
  /* 規約リンクは必ずロゴと同じ行の右端に収め、ロゴの下の行へ落とさない。「プライバシーポリシー」は
     全角10文字と横幅が大きいため、狭幅（〜360px）でも「ロゴ＋2リンク」が1行に入るよう、
     ヘッダーの横パディング・列間隔を詰め、副次導線のリンクは fs-xs＋詰めた間隔にし、ロゴも
     モバイルでは控えめに縮小する（免責文・キャッチは従来どおり独立行に落とす）。 */
  #topbar { row-gap: var(--space-1); column-gap: var(--space-2); padding-left: var(--space-2); padding-right: var(--space-2); }
  #topbar .brand { order: 1; }
  #topbar .brand img { height: 28px; }
  #topbar-links { order: 2; gap: var(--space-1); }
  #topbar-privacy, #topbar-terms { font-size: var(--fs-xs); }
  /* 狭幅ではキャッチ文言を独立行に落として折り返し可にする（ロゴ・規約リンクと同居させない）。 */
  #brand-tagline { order: 3; flex-basis: 100%; white-space: normal; }
  #topbar #disclaimer { order: 4; margin-left: 0; flex-basis: 100%; }

  #panel {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 20;
    max-height: 64px; overflow: hidden;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    box-shadow: var(--shadow-md);
    transition: max-height .25s ease;
  }
  #panel.panel--expanded { max-height: 85vh; max-height: 85dvh; overflow-y: auto; }
  #panel-handle {
    display: flex; align-items: center; gap: var(--space-2);
    width: 100%; min-height: 64px; padding: 0 var(--space-4);
    background: var(--panel); border: 0; border-radius: inherit;
    cursor: pointer; font: inherit; text-align: left;
    position: sticky; top: 0; z-index: 1;
  }
  .panel-handle-bar { width: 36px; height: 4px; border-radius: 2px; background: var(--line); flex-shrink: 0; }
  .panel-summary { flex: 1; min-width: 0; font-size: var(--fs-sm); font-weight: 600; color: var(--status-neutral-fg, #334155); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}

/* タブレット以上：左右2ペイン（パネルはサイドバー・結果一覧のみスクロール） */
@media (min-width: 768px) {
  #layout { flex-direction: row; }
  #panel {
    display: flex; flex-direction: column; min-height: 0;
    width: clamp(320px, 28vw, 380px); border-right: 1px solid var(--line);
  }
  #results-wrap { flex: 1; min-height: 0; overflow-y: auto; }
  #map-wrap { min-height: 0; }
}

/* デスクトップ：余白を拡張 */
@media (min-width: 1024px) {
  #panel { width: clamp(360px, 26vw, 420px); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}

/* 初回同意モーダル：他モーダルより手前(z-index:60)に出す能動的同意ゲート。
   ボトムシートではなく画面中央のダイアログ。同意ボタン以外では閉じない（backdrop/Escape無効）。 */
#consent-modal { position: fixed; inset: 0; z-index: 60; pointer-events: none; }
#consent-modal.is-open { pointer-events: auto; }
#consent-modal-backdrop {
  position: absolute; inset: 0; background: rgba(37, 51, 33, .55);
  opacity: 0; transition: opacity .2s ease;
}
#consent-modal.is-open #consent-modal-backdrop { opacity: 1; }
#consent-modal-panel {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -46%);
  width: calc(100% - var(--space-8)); max-width: 460px; max-height: 90vh; overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  background: #fff; border-radius: var(--radius-lg); box-shadow: var(--shadow-md);
  padding: var(--space-6) var(--space-5) var(--space-5);
  opacity: 0; transition: opacity .2s ease, transform .25s ease;
}
#consent-modal.is-open #consent-modal-panel { opacity: 1; transform: translate(-50%, -50%); }
.consent-brand { display: block; width: 56px; height: 56px; margin: 0 auto var(--space-3); }
#consent-modal-title {
  display: flex; align-items: center; justify-content: center; gap: var(--space-2);
  font-size: var(--fs-lg); font-weight: 800; line-height: var(--lh-tight);
  margin: 0 0 var(--space-4); text-align: center;
}
#consent-modal-title .icon { color: var(--status-caution-fg); width: 1.15em; height: 1.15em; }
.consent-points { list-style: none; margin: 0; padding: 0; }
.consent-points li {
  display: flex; gap: var(--space-2); align-items: flex-start;
  font-size: var(--fs-sm); line-height: var(--lh-relaxed); color: var(--ink);
}
.consent-points li + li { margin-top: var(--space-3); }
.consent-points .icon { margin-top: 3px; color: var(--brand-600); flex-shrink: 0; }
.consent-points strong { font-weight: 700; }
.consent-agree-note {
  font-size: var(--fs-xs); color: var(--muted); line-height: var(--lh-normal);
  margin: var(--space-4) 0 var(--space-3);
  padding-top: var(--space-3); border-top: 1px solid var(--line);
}
.consent-hide {
  display: flex; align-items: center; gap: var(--space-2);
  font-size: var(--fs-sm); color: var(--muted); min-height: 44px; cursor: pointer;
}
.consent-hide input { width: 18px; height: 18px; margin: 0; flex-shrink: 0; }
#consent-agree {
  width: 100%; display: flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; margin-top: var(--space-2); padding: 12px 16px;
  border: 0; border-radius: var(--radius-pill);
  background: var(--brand-600); color: #fff; font: inherit; font-size: var(--fs-base); font-weight: 700;
  cursor: pointer; box-shadow: var(--shadow-sm); transition: background-color .2s ease, box-shadow .2s ease;
}
#consent-agree:hover { background: var(--brand-700); box-shadow: var(--shadow-md); }
/* モーダル表示中は背後をスクロールさせない */
body.modal-open { overflow: hidden; }

/* ===== 広告枠（Google Ad Manager / GPT）=================================
   ads.js が有効時に <html> へ .ads-on を付けたときだけ実体化する。フラグ OFF では
   .ads-on が付かず、下の min-height/ラベルは一切効かない＝空 div は高さ0でレイアウト不変。
   ポリシー: 「広告」ラベルを明示し、検索結果・地図操作UIと視覚的に区別する。 */
.ad-slot[hidden], .ad-sticky[hidden] { display: none !important; }

/* 初期表示広告（PC）：左パネル最下部・クレジットの上に 300x250。表示前から領域確保＝CLS対策。 */
html.ads-on .ad-slot--panel {
  display: flex; flex-direction: column; align-items: center;
  min-height: 268px; /* 250 + ラベル分 */
  margin: var(--space-4) var(--space-3) 0; padding: var(--space-2);
  background: var(--bg-page); border-radius: var(--radius-md);
}
html.ads-on .ad-slot--panel::before,
html.ads-on .ad-slot--dynamic:not([hidden])::before {
  content: "広告"; display: block; font-size: var(--fs-xs); color: var(--muted);
  letter-spacing: .08em; text-align: center; margin-bottom: var(--space-1);
}
/* 動的広告：表示中(:not([hidden]))だけ領域を確保する。 */
html.ads-on .ad-slot--dynamic:not([hidden]) {
  display: block; min-height: 274px;
  margin: var(--space-3); padding: var(--space-2);
  background: var(--bg-page); border-radius: var(--radius-md);
}
/* 未フィル時は ads.js が .ad-slot--unfilled を付与し、予約領域を畳む（空の白枠を残さない）。 */
html.ads-on .ad-slot--unfilled { min-height: 0 !important; display: none !important; }

/* 初期表示広告（SP）：ボトムシート直上のスティッキー 320x50。閉じるボタン付き。
   z-index 19 ＝パネル展開(20)・詳細シート(50)・アレルギーモーダル(55)の下（展開時は自然に隠れる）。 */
@media (max-width: 767.98px) {
  html.ads-on .ad-slot--panel { display: none !important; } /* SP では PC 枠を出さない */
  html.ads-on .ad-sticky:not([hidden]) {
    position: fixed; left: 0; right: 0; bottom: 64px; z-index: 19;
    display: flex; align-items: center; justify-content: center;
    min-height: 50px; padding: 2px 0;
    background: rgba(255, 255, 255, .97); box-shadow: var(--shadow-sm);
  }
  html.ads-on .ad-sticky .ad-sticky-label {
    position: absolute; left: 6px; top: 2px; font-size: 10px; color: var(--muted); letter-spacing: .05em;
  }
  html.ads-on #ad-sticky-close {
    position: absolute; right: 4px; top: 4px; width: 24px; height: 24px;
    border: 0; border-radius: 50%; background: var(--bg-page); color: var(--muted);
    cursor: pointer; display: flex; align-items: center; justify-content: center;
    font-size: 13px; line-height: 1;
  }
  /* スティッキー表示中は FAB を枠の上へ退避（重なり防止）。ads.js が .ad-sticky-shown を付与。 */
  html.ads-on.ad-sticky-shown #allergen-fab { bottom: calc(64px + 50px + var(--space-3)); }
}
@media (min-width: 768px) {
  html.ads-on .ad-sticky { display: none !important; } /* PC ではスティッキーを出さない */
}

/* ===== アクセス解析(GA4)の告知バナー ==========================================
   非ブロッキング（開示＋オプトアウト方式）。検索・地図操作・#ad-sticky/#consent-modal を
   塞がない配置にする。analytics.js が #consent-modal 解決後に hidden を外して表示する。 */
#analytics-banner[hidden] { display: none !important; }
#analytics-banner {
  position: fixed; z-index: 18; /* ad-sticky(19)/panel展開(20)の下＝それらが開けば自然に隠れる */
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-md);
  box-shadow: var(--shadow-md); padding: var(--space-3) var(--space-4);
}
#analytics-banner p { margin: 0 0 var(--space-2); font-size: var(--fs-xs); color: var(--muted); line-height: var(--lh-normal); }
#analytics-banner p a { color: var(--brand-600); font-weight: 600; }
/* オプトアウト操作は /privacy のトグルに一本化（ここは「閉じる」のみ）。ボタン1つのため右寄せにする。 */
.analytics-banner-actions { display: flex; justify-content: flex-end; }
#analytics-banner-close {
  font: inherit; font-size: var(--fs-xs); font-weight: 600; border-radius: var(--radius-pill);
  padding: 6px 14px; cursor: pointer; white-space: nowrap;
  background: var(--brand-600); border: 0; color: #fff;
}
#analytics-banner-close:hover { background: var(--brand-700); }

/* SP: ボトムシート直上（#ad-sticky と同じスロット）。両方表示時は #ad-sticky の上へ積む。 */
@media (max-width: 767.98px) {
  #analytics-banner { left: var(--space-3); right: var(--space-3); bottom: 64px; max-width: none; }
  html.ads-on.ad-sticky-shown #analytics-banner { bottom: calc(64px + 50px + var(--space-2)); }
  /* バナー表示中も FAB と重ならないよう押し上げる（.ga-banner-shown は analytics.js が付与）。 */
  html.ga-banner-shown:not(.ad-sticky-shown) #allergen-fab { bottom: calc(64px + 90px + var(--space-3)); }
}
/* PC: 左下フローティングカード（#allergen-fab は右下のため空間的に衝突しない）。 */
@media (min-width: 768px) {
  #analytics-banner { left: var(--space-4); bottom: var(--space-4); max-width: 360px; }
}