/* 店舗詳細ページ（SSR）。地図と同じ配色・書体で揃える。 */
*,*::before,*::after { box-sizing: border-box; }
:root {
  color-scheme: light dark;
  --bg:#f7f5f2; --panel:#fff; --fg:#1b1a18; --muted:#6d6963;
  --line:#e3ded6; --accent:#e0361a; --accent-2:#2f6fd0;
}
@media (prefers-color-scheme: dark) {
  :root { --bg:#17161a; --panel:#201f25; --fg:#eae8e5; --muted:#9b968f; --line:#34323b; }
}
html, body { margin:0; background:var(--bg); color:var(--fg);
  font-family:-apple-system,BlinkMacSystemFont,"Hiragino Sans","Noto Sans JP",sans-serif;
  line-height:1.85; -webkit-font-smoothing:antialiased; }
.wrap { max-width:640px; margin:0 auto; padding:1rem 1.1rem 4rem; }

.crumb { margin:0 0 1.2rem; }
.back { display:inline-block; font-size:.8rem; color:var(--accent-2);
  text-decoration:none; padding:.4rem .7rem; border:1px solid var(--line);
  border-radius:999px; background:var(--panel); }
.back:active { opacity:.6; }

/* ---------- 左端の縦棒（§11.75）----------
   地図の右端の棒と対。右へ払うか押すと、地図の同じ場所へ戻る。
   ★当たりは幅 16px。本文の左の余白（1.1rem ≒ 17.6px）より狭くして、
     本文のリンクに被せない（被ると、押したつもりのリンクが地図へ戻る）。
   ★縦の位置は、地図の右端の棒（styles.css）と文字まで同じ式。理由はあちらに書いた。
     前は top:50% で、地図の棒と高さがずれていた（iPhone 17 で100pt ほど）。
   ★draggable=false と -webkit-user-drag:none は念のため。リンクを掴むと
     ドラッグ（URLの持ち運び）が始まって払う動きが切れうる。ただし外しても
     E2E（CDP のマウス操作）は通ったので、切れることは確かめられていない（§11.75）。 */
.edge-back {
  position: fixed; z-index: 5; left: 0;
  top: calc(50vh - 94px);
  top: calc(50svh - 94px);
  width: 16px; height: 120px; margin-top: -60px;
  touch-action: none; -webkit-tap-highlight-color: transparent;
  -webkit-user-drag: none; -webkit-touch-callout: none; user-select: none;
  transform: translateX(var(--pull, 0px));
  transition: transform .18s ease-out;
}
.edge-back::before {
  content: ""; position: absolute; top: 0; bottom: 0; left: 5px; width: 5px;
  border-radius: 999px; background: var(--fg); opacity: .32;
}
/* 払っている間だけ、行き先を棒の横に出す */
.edge-back::after {
  content: attr(data-hint);
  position: absolute; top: 50%; left: 18px; transform: translateY(-50%);
  white-space: nowrap; font-size: .75rem; font-weight: 600; line-height: 1.4;
  padding: .3rem .65rem; border-radius: 999px;
  background: var(--panel); color: var(--fg); border: 1px solid var(--line);
  opacity: 0; transition: opacity .12s; pointer-events: none;
}
.edge-back.is-held { transition: none; }
.edge-back.is-held::after { opacity: 1; }
.edge-back.is-ready::after, .edge-back.is-going::after {
  background: var(--accent-2); color: #fff; border-color: transparent; }
.edge-back:focus-visible::before { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .edge-back { transition: none; } }

/* ---------- おすすめ度（§11.76）----------
   ★ホットペッパーグルメの評価ではない。* と注記を必ず添える（出し方は /help#score）。
   ★星は5つの字を並べ、塗る幅だけをクラスで変える（ページにスクリプトを増やさない） */
.osusume { margin:.1rem 0 1.1rem; }
.os-head { margin:0; display:flex; align-items:baseline; gap:.4rem; flex-wrap:wrap; }
.os-label { font-size:.78rem; font-weight:600; color:var(--muted); }
.os-stars { font-size:1.05rem; letter-spacing:.06em; line-height:1;
  background:linear-gradient(90deg, #e3a008 var(--fill), var(--line) var(--fill));
  -webkit-background-clip:text; background-clip:text; color:transparent; }
.os-stars.s25 { --fill:50%; } .os-stars.s30 { --fill:60%; } .os-stars.s35 { --fill:70%; }
.os-stars.s40 { --fill:80%; } .os-stars.s45 { --fill:90%; } .os-stars.s50 { --fill:100%; }
.os-num { font-size:1.05rem; font-weight:700; font-variant-numeric:tabular-nums; }
.os-mark { font-weight:700; color:var(--accent-2); text-decoration:none; padding:0 .15rem; }
.os-why { margin:.25rem 0 0; font-size:.85rem; line-height:1.6; }
.os-axes { margin:.15rem 0 0; font-size:.75rem; color:var(--muted); font-variant-numeric:tabular-nums; }
.os-nobudget { font-size:.78rem; color:var(--muted); margin:.15rem 0 0; }
.os-nobudget a { color:var(--accent-2); margin-left:.3em; }
.os-note { margin:.2rem 0 0; font-size:.72rem; color:var(--muted); line-height:1.6; }
.os-note a { color:var(--accent-2); }

h1 { font-size:1.4rem; line-height:1.4; margin:0 0 .4rem; letter-spacing:-.01em; }
.catch { margin:0 0 1.2rem; color:var(--muted); font-size:.85rem; }

.photo { margin:0 0 1.2rem; position:relative; border-radius:12px; overflow:hidden; }
.photo img { width:100%; height:auto; aspect-ratio:1 / 1; display:block; background:var(--line); }   /* ★届く前から場所を取る（ズレを出さない・§11.233） */
/* 写真はタップでホットペッパーの配信URLを別窓で開く（出典を辿れるようにする）。
   a を block にしないと行ボックスぶんの隙間が下に出て、角丸から地が覗く。 */
.photo a { display:block; cursor:zoom-in; }
.photo a:active { opacity:.85; }
.photo figcaption { position:absolute; left:0; right:0; bottom:0;
  padding:.25rem .5rem; font-size:.58rem; color:#fff; background:rgba(0,0,0,.55); }

/* 必ず出す機械項目 */
/* 機械項目。★table ではなく dl（名前と値の組であって表形式データではない。§11.28）。
   見た目は table と同じにする ── 見出し列の幅を揃え、行ごとに区切り線を引く。
   ★grid の1列目を 6.5em 固定にすることで、table の width:6.5em と同じ絵になる。
   dt/dd は既定で display:block、dd には margin-inline-start が付くので、
   どちらも grid item にして潰す（潰さないと値が右へずれる）。 */
.spec { margin:0 0 1.6rem;
  background:var(--panel); border:1px solid var(--line); border-radius:11px;
  overflow:hidden; font-size:.85rem; }
.spec-row { display:grid; grid-template-columns:6.5em 1fr;
  border-bottom:1px solid var(--line); }
.spec-row:last-child { border-bottom:0; }
.spec dt, .spec dd { margin:0; padding:.6rem .8rem; text-align:left; }
.spec dt { white-space:nowrap; color:var(--muted); font-weight:600;
  background:color-mix(in srgb, var(--line) 30%, transparent); }
/* ★min-width:0 が要る。無いと中身（長い店名や営業時間）が列を押し広げ、
   1fr が効かずに枠からはみ出す */
.spec dd { min-width:0; }

/* 紹介文（あれば） */
/* ★紹介文と表のあいだを1行ぶん空ける。空けないと本文の最後の行と
   表の1行目（店名）が地続きに見える（§11.50）。
   下に案内（.ftn）が入る時は、そちらが間を持つ */
.intro { margin:0 0 1.4rem; }
.intro p { margin:0 0 1rem; font-size:.92rem; }
/* 料理と雰囲気の段落の見出し（§11.90）。「この店のポイント」の見出し（.pt-head）と揃える。
   ★class 名は広告っぽくしない（§11.83）。intro-head は手元の広告ブロッカー17本に当たらない */
.intro-head { font-size:.95rem; margin:0 0 .35rem; }
/* 点線の語が押せることを伝える1行。チップ一覧の代わり */
.ftn { margin:-.6rem 0 1.4rem; font-size:.78rem; color:var(--muted); }
.intro.pending { padding:.9rem 1rem; border:1px dashed var(--line); border-radius:11px; }
/* この店のポイント（§11.88）。ホットペッパーの項目からルールで作った2〜3文。
   ★class 名は広告っぽくしない（§11.83）。pt-* は広告ブロッカーの規則 43,214件に当たらないのを確かめた */
.pt { margin:0 0 1.4rem; padding:.85rem 1rem; border:1px solid var(--line); border-radius:11px; }
.pt-head { font-size:.95rem; margin:0 0 .35rem; }
.pt-body { margin:0; font-size:.92rem; line-height:1.75; }
.pt-note { margin:.45rem 0 0; font-size:.76rem; color:var(--muted); }
/* 利用シーン判定の欄「こんな時に」（§11.181・§11.183）。一般にも出す（該当・条件付き該当）。
   枠は「この店のポイント」（.pt）と同じ実線。長い語（規則の名前・抜き書き）は折り返し、スマホで横にはみ出さない */
.sc { margin:0 0 1.4rem; padding:.85rem 1rem; border:1px solid var(--line); border-radius:11px;
  overflow-wrap:anywhere; }
.sc-head { font-size:.95rem; margin:0 0 .35rem; display:flex; flex-wrap:wrap; align-items:baseline; gap:.2rem .5rem; }
.sc-badge { font-size:.72rem; font-weight:400; color:var(--accent-2); }
.sc-lead { margin:0 0 .6rem; font-size:.78rem; line-height:1.6; color:var(--muted); }
.sc.is-none .sc-lead { margin:0; }
.sc-type { margin:.9rem 0 0; padding-top:.7rem; border-top:1px solid var(--line); }
.sc-type h3 { font-size:.9rem; margin:0 0 .3rem; }
.sc-tier { font-size:.78rem; margin:.6rem 0 .3rem; color:var(--muted); font-weight:700; }
.sc-tier.t-needs-check { color:var(--accent); }
/* 要確認の候補は一般には畳んで件数だけ（§11.183）。押すと開く */
/* 新方式の型（§11.190）: 見出しに合う場面の札・お店の事実・合わない場面・確かめること */
.sc-v2 .sc-tags { display:block; font-size:.78rem; font-weight:400; color:var(--accent-2); margin-top:.1rem; }
.sc-facts { margin:.35rem 0 0; padding:0 0 0 1.1rem; font-size:.84rem; line-height:1.65; }
.sc-facts li { margin:.1rem 0; }
.sc-miss, .sc-check, .sc-note { margin:.35rem 0 0; font-size:.78rem; line-height:1.55; color:var(--muted); }
.sc-check { color:var(--fg); }
/* ストーリーのカード（20回目）。名前・文・「このお店なら」。曜日は名前の横に小さく */
.sc-stories { margin:.45rem 0 0; }
.sc-st-when { margin-left:.4rem; font-size:.74rem; font-weight:400; color:var(--accent-2); }
.sc-facts-box { margin-top:.55rem; }
.sc-common { margin:0 0 .4rem; font-size:.8rem; line-height:1.6; color:var(--fg); }
.sc-fold { margin:.6rem 0 0; }
.sc-fold > summary.sc-tier { margin:0; cursor:pointer; color:var(--muted); }
.sc-fold[open] > summary.sc-tier { margin-bottom:.3rem; }
.sc-fold > .sc-lead { margin:0 0 .4rem; }
.sc-list { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.55rem; }
.sc-item { padding:.5rem .65rem; border:1px solid var(--line); border-radius:9px; background:var(--panel); }
.sc-item p { margin:0; }
.sc-title { font-size:.86rem; line-height:1.45; }
.sc-mark { display:inline-block; margin-right:.35rem; padding:0 .35rem; border-radius:4px;
  font-size:.7rem; line-height:1.5; border:1px solid currentColor; vertical-align:.08em; }
.sc-mark.is-cond { color:var(--accent-2); }
.sc-mark.is-check, .sc-mark.is-conflict { color:var(--accent); }
.sc-story { font-size:.8rem; line-height:1.6; color:var(--muted); margin-top:.15rem !important; }
.sc-when, .sc-cond { font-size:.78rem; line-height:1.55; margin-top:.25rem !important; }
/* 「近くで、この場面に合うお店を地図で」（§11.241） */
.sc-near { font-size:.78rem; margin-top:.35rem !important; }
.sc-near a { color:var(--accent); text-decoration:none; font-weight:600; }
.sc-near a:hover { text-decoration:underline; }
/* カードの下の 👍 👎（§11.200）。押した方に青い輪。👎 の下に書ける欄（rate.js が足す） */
.sc-rate { display:flex; align-items:center; flex-wrap:wrap; gap:.3rem; margin-top:.4rem !important; font-size:.72rem; color:var(--muted); }
.sc-rate-q { margin-right:.2rem; }
/* AI の画面によくある白黒の線の親指。押した方は灰色の面（塗り）で、どちらを押したか分かる（§11.212） */
.sc-vote { display:inline-flex; align-items:center; justify-content:center; width:34px; height:30px; padding:0; border:0; border-radius:8px;
  background:transparent; color:var(--fg); cursor:pointer; }
.sc-vote.is-down .sc-thumb { transform:rotate(180deg); }
.sc-vote:hover { background:color-mix(in srgb, var(--fg) 8%, transparent); }
.sc-vote:focus-visible { outline:2px solid var(--accent-2); outline-offset:2px; }
.sc-vote[aria-pressed="true"] { background:color-mix(in srgb, var(--fg) 12%, transparent); color:#8e8e93; }
.sc-vote[aria-pressed="true"] .sc-thumb path { fill:#8e8e93; fill-opacity:.35; }
/* 一番下のプライバシーポリシー・利用規約・会社概要（§11.212） */
.legal { margin:2rem 0 1rem; font-size:.78rem; color:var(--muted); text-align:center; }
.legal a { color:var(--muted); }
.sc-rate-form { display:flex; flex-direction:column; gap:.35rem; margin-top:.4rem; }
.sc-rate-form textarea { box-sizing:border-box; width:100%; min-height:4.5rem; resize:vertical; padding:.5rem .6rem;
  border:1px solid var(--line); border-radius:8px; background:var(--bg); color:var(--fg); font:inherit; font-size:.8rem; line-height:1.6; }
.sc-rate-form textarea:focus-visible { outline:2px solid var(--accent-2); outline-offset:1px; }
.sc-rate-bar { display:flex; gap:.5rem; }
.sc-rate-send, .sc-rate-close { min-height:34px; padding:.3rem .9rem; border-radius:999px; font:inherit; font-size:.8rem; cursor:pointer; }
.sc-rate-send { border:1px solid var(--accent-2); background:var(--accent-2); color:#fff; font-weight:700; }
.sc-rate-close { border:1px solid var(--line); background:var(--panel); color:var(--muted); }
.sc-rate-send:focus-visible, .sc-rate-close:focus-visible { outline:2px solid var(--accent-2); outline-offset:2px; }
.sc-cond { color:var(--accent-2); }
.sc-snip { color:var(--muted); }
/* 注意書きは本文を赤にしない（読ませたいのはストーリーと利用条件。ユーザー判断）。赤は行頭の点だけ */
.sc-notice { margin:.3rem 0 0; padding:0 0 0 1.1rem; font-size:.76rem; line-height:1.55; color:var(--muted); }
.sc-notice li::marker { color:var(--accent); }
.sc-why { margin-top:.3rem; }
.sc-why > summary { font-size:.76rem; color:var(--fg); opacity:.85; cursor:pointer; }
.sc-why ul { margin:.3rem 0 0; padding:0 0 0 1.1rem; font-size:.74rem; line-height:1.55; }
.sc-why li.sc-other { color:var(--muted); }
.sc-why code, .sc-id code { font-size:.68rem; color:var(--muted); }
.sc-id { margin:.2rem 0 0 !important; }
.muted { color:var(--muted); font-size:.82rem; margin:0; }
/* 紹介文の生成日時。ページ内のもう一つの注記(.hp-note)と大きさを揃える。
   ★セレクタは .intro p より詳しくすること。単に .genstamp と書くと
   （0,1,0）で `.intro p`（0,1,1）に負け、本文と同じ .92rem のままになる。 */
.intro p.genstamp { margin:.2rem 0 0; font-size:.78rem; color:var(--muted);
  text-align:right; font-variant-numeric:tabular-nums; }

.actions { margin:1.8rem 0 0; }
/* ホットペッパーへ送り出す前の一言。ボタンと縦に並べる */
.hp-note { margin:0 0 .6rem; font-size:.78rem; color:var(--muted); line-height:1.7; }
.hp-link { display:inline-block; padding:.8rem 1.2rem; border-radius:999px;
  background:var(--accent); color:#fff; text-decoration:none; font-weight:700;
  font-size:.9rem; }
.hp-link:active { opacity:.85; }

/* ★ボタンの直下に置く。ページ末尾ではないので、区切り線と大きな余白は要らない */
.credit { margin:.9rem 0 0;
  display:flex; align-items:center; gap:.6rem; flex-wrap:wrap;
  font-size:.55rem; color:var(--muted); }
.credit img { display:block; opacity:.85; }

/* ---------- 2軒目の候補（§11.11） ----------
   「バーが近い」ではなく「もう一杯やれる」と伝える。目的を先に置く。 */
.nx { margin:2.2rem 0 0; padding-top:1.2rem; border-top:1px solid var(--line); }
.nx-head { font-size:1.02rem; margin:0 0 .3rem; }
.nx-lead { font-size:.82rem; color:var(--muted); margin:0 0 .9rem; }
.nx-list { list-style:none; margin:0; padding:0; display:flex;
  flex-direction:column; gap:1rem; }
.nx-group { }
/* 目的の見出し行。目的を先に置く（「バーが近い」ではなく「もう一杯やれる」） */
.nx-head-row { display:flex; align-items:center; gap:.5rem; margin:0 0 .35rem; }
.nx-purpose {
  font-size:.74rem; font-weight:700; color:#fff;
  background:var(--accent-2); border-radius:999px; padding:.24rem .7rem;
  white-space:nowrap;
}
.nx-genre { font-size:.76rem; color:var(--muted); }
.nx-shops { list-style:none; margin:0; padding:0; display:flex;
  flex-direction:column; gap:.4rem; }
/* ★縦積みにした。店名の下にキャッチを添えるため（§11.22）。
   店名と徒歩の分は今までどおり1行に並べる（.nx-head-line） */
.nx-link {
  display:flex; flex-direction:column; gap:.15rem;
  padding:.6rem .8rem; border:1px solid var(--line); border-radius:11px;
  background:var(--panel); color:var(--fg); text-decoration:none;
}
.nx-head-line {
  display:flex; align-items:baseline; justify-content:space-between; gap:.7rem;
}
/* キャッチコピー。★太字にしない。店名との差が「格」になる */
.nx-catch {
  font-size:.76rem; font-weight:400; line-height:1.4; color:var(--muted);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.nx-link:active { background:var(--line); }
.nx-name { font-size:.86rem; font-weight:700; line-height:1.35; min-width:0; }
.nx-meta { font-size:.76rem; color:var(--muted); white-space:nowrap;
  font-variant-numeric:tabular-nums; flex:0 0 auto; }
.nx-note { font-size:.74rem; color:var(--muted); margin:1rem 0 0; }
/* 3軒目の位置。地図へ戻して、その目的の店だけを見せる */
.nx-more { margin:.4rem 0 0; display:flex; gap:.9rem;
  justify-content:flex-end; flex-wrap:wrap; }
.nx-more a { font-size:.78rem; color:var(--accent-2); text-decoration:none;
  font-weight:600; white-space:nowrap; }
.nx-more a:active { opacity:.6; }
/* 電話。値は持っていないので、ホットペッパーの電話ページへ送り出す */
.tel-link { color:var(--accent-2); text-decoration:none; font-weight:600; }
.tel-link:active { opacity:.6; }

/* ---------- 同じブランドの他店（§11.19） ----------
   狙いは「渋谷の店に行くつもりだったが、新宿にもあるならそっち」。
   ★駅名を主役に置く。人は「新宿」で考えるのであって「6.2km」では考えない。
   距離は判断の材料として右に小さく添えるだけ。 */
.bz { margin:2.2rem 0 0; padding-top:1.2rem; border-top:1px solid var(--line); }
.bz-head { font-size:1.02rem; margin:0 0 .3rem; }
.bz-lead { font-size:.82rem; color:var(--muted); margin:0 0 .9rem; }
.bz-list { list-style:none; margin:0; padding:0;
  display:flex; flex-direction:column; gap:.5rem; }
.bz-link { display:flex; flex-wrap:wrap; align-items:baseline; gap:.15rem .6rem;
  padding:.7rem .85rem; border:1px solid var(--line); border-radius:.7rem;
  text-decoration:none; color:inherit; background:var(--panel); }
.bz-link:active { opacity:.85; }
/* 駅名は幅を決めて左に揃える。ばらつくと一覧として読みにくい */
.bz-station { flex:0 0 5.5em; font-weight:700; font-size:.92rem; }
.bz-branch { flex:1 1 auto; min-width:0; font-size:.82rem; color:var(--muted);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.bz-dist { flex:0 0 auto; font-size:.78rem; color:var(--muted);
  font-variant-numeric:tabular-nums; }
/* キャッチコピー（§11.120）。駅・支店・距離の下に1行。「この店の代わりに」の .al-catch と同じ見た目 */
.bz-catch { flex:1 0 100%; font-size:.76rem; line-height:1.4; color:var(--muted);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.bz-more { margin:.7rem 0 0; font-size:.78rem; color:var(--muted); text-align:right; }

/* ---------- 代わりになる近くの店（§11.78） ----------
   満席・定休日だった時の替え先。店名と徒歩の分を1行に、その下に「なぜ代わりになるか」を1行。
   ★2軒目の候補（.nx）と見た目は揃えるが、クラスは分ける（E2E が .nx-name を数えている） */
.al { margin:2.2rem 0 0; padding-top:1.2rem; border-top:1px solid var(--line); }
.al-head { font-size:1.02rem; margin:0 0 .3rem; }
.al-lead { font-size:.82rem; color:var(--muted); margin:0 0 .9rem; }
.al-list { list-style:none; margin:0; padding:0;
  display:flex; flex-direction:column; gap:.4rem; }
.al-link {
  display:flex; flex-direction:column; gap:.15rem;
  padding:.6rem .8rem; border:1px solid var(--line); border-radius:11px;
  background:var(--panel); color:var(--fg); text-decoration:none;
}
.al-link:active { background:var(--line); }
.al-head-line { display:flex; align-items:baseline; justify-content:space-between; gap:.7rem; }
.al-name { font-size:.86rem; font-weight:700; line-height:1.35; min-width:0; }
.al-meta { font-size:.76rem; color:var(--muted); white-space:nowrap;
  font-variant-numeric:tabular-nums; flex:0 0 auto; }
/* 代わりになる理由。店名とキャッチのあいだに、目立ちすぎない色で */
.al-why { font-size:.76rem; line-height:1.4; color:var(--accent-2); }
.al-catch {
  font-size:.76rem; font-weight:400; line-height:1.4; color:var(--muted);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.al-note { font-size:.74rem; color:var(--muted); margin:1rem 0 0; }
.al-note a { color:var(--accent-2); }

/* 営業時間の各行（§11.20）。
   ★ぶら下げインデント。掛けないと「折り返した続き」と「次の行」が
   見分けられず、改行した意味が半分になる（実測の比較で判断） */
.oh { display:block; padding-left:1.2em; text-indent:-1.2em; }
.oh + .oh { margin-top:.15em; }

/* ---------- 予算帯の位置づけ（§11.21） ----------
   金額のうしろに一言、その下に実例のアコーディオン。
   ★<details> の開閉はブラウザ任せ。このページはスクリプトを持たない。 */
/* ★注記(*1)と離れないように、位置づけごと1かたまりにする。
   別々だと「…安いほう」で折り返して *1 だけが次の行に落ちる */
.pz-label { margin-left:.5rem; font-size:.78rem; color:var(--accent);
  font-weight:700; white-space:nowrap; }
.pz-label + .fn { margin-left:0; }
.pz { margin-top:.5rem; }
.pz > summary { font-size:.8rem; color:var(--fg); opacity:.85; cursor:pointer;
  list-style:none; display:inline-flex; align-items:center; gap:.3rem; }
.pz > summary::-webkit-details-marker { display:none; }
/* 開閉の向きが分かる印。★小さすぎると「押せる」と分からない。
   実際 .7em では点にしか見えなかったので、大きさと色を上げた */
.pz > summary::before { content:"▸"; font-size:1em; color:var(--accent);
  transition:transform .15s; }
.pz[open] > summary::before { transform:rotate(90deg); }
.pz-list { list-style:none; margin:.6rem 0 0; padding:0;
  display:flex; flex-direction:column; gap:.4rem; }
.pz-list li { display:flex; align-items:center; gap:.5rem; }
/* 安い側・高い側の印。色だけに頼らず文字も置く */
.pz-mark { flex:0 0 auto; font-size:.68rem; font-weight:700; color:#fff;
  border-radius:.3rem; padding:.12rem .3rem; line-height:1.2; }
.pz-mark.is-lo { background:#1f7a4d; }
.pz-mark.is-hi { background:#b3401c; }
.pz-link { flex:1 1 auto; min-width:0; display:flex; align-items:baseline;
  gap:.5rem; text-decoration:none; color:inherit; }
.pz-link:active { opacity:.85; }
.pz-name { flex:1 1 auto; min-width:0; font-size:.84rem;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pz-yen { flex:0 0 auto; font-size:.72rem; color:var(--muted);
  font-variant-numeric:tabular-nums; }
.pz-dist { flex:0 0 auto; font-size:.72rem; color:var(--muted);
  font-variant-numeric:tabular-nums; }
/* ★狭い画面では2本が1行に収まらない。flex で折り返し、
   リンクの中では折らない（「いま営業中だ／け →」と割れていた） */
.pz-more { margin:.7rem 0 0; font-size:.78rem;
  display:flex; flex-wrap:wrap; justify-content:flex-end; gap:.3rem .9rem; }
.pz-more a { white-space:nowrap; }
/* 営業時間の欄の「このあたりのいま営業中の店を／地図で見る →」（§11.167）。長いので、収まらない時は2つの塊の間で2行に折る。
   ★折らないと、文字幅の広い Safari（iPhone）で表の枠からはみ出した */
.pz-more.oh-open a { white-space:normal; }
.pz-more.oh-open .nw { white-space:nowrap; display:inline-block; }

/* 最寄駅の徒歩表記（§11.23）。駅名のすぐ後ろに、位置づけより前 */
.pz-walk { margin-left:.5rem; font-size:.8rem; color:var(--muted);
  font-variant-numeric:tabular-nums; white-space:nowrap; }
.pz-mark.is-near { background:#2f6fd0; }

/* ---------- 住所と最寄り交差点（§11.65） ----------
   1行目に住所、2行目に最寄り交差点。営業時間の `.oh` と同じで、
   <br> ではなく行ごとの要素にする（折り返しの続きと次の行を見分けるため）。
   ★名前は loc-（location）。前は ad-（address の略）で、EasyList と AdGuard の `##.ad-line` に当たり、
     iPhone の広告ブロッカーで住所の文字だけが消えていた（§11.83）。ad・ads・banner・sponsor で始めない。
     実ブラウザ E2E が、本物の一覧を DOM に当てて見張る */
.loc-line { display:block; }
.loc-ix { display:block; margin-top:.35rem; font-size:.8rem; color:var(--muted); }
/* ★交差点名だけは本文色・太字。住所の下に灰色で全部並ぶと、
   どれが地物の名前なのか読み取れない */
.loc-ix-name { color:var(--fg); font-weight:700; }
/* 駅名・交差点名は、その駅・交差点のページ（/eki/・/kousaten/・§11.153）へのリンク。
   ★字の色は変えず（地物の名前として読ませる）、下線で押せることを示す */
a.to-place { color:inherit; text-decoration:underline; text-decoration-color:var(--muted);
  text-underline-offset:.18em; text-decoration-thickness:1px; }
a.to-place:hover { text-decoration-color:currentColor; }
.loc-ix-walk { margin-left:.5rem; font-variant-numeric:tabular-nums;
  white-space:nowrap; }
/* 注記(*9)は徒歩表記から離さない（.pz-tag と同じ理由） */
.loc-ix .fn { margin-left:.1rem; }

/* 海抜（§11.66）。交差点と同じ行の最後に付ける。
   ★色や記号で危険を煽らない。判断の材料であって、判定ではない（Notion §13）。
   ★`.6rem` 空ける。徒歩の `47m` と海抜の `3m` が隣り合うので、
     詰めると「徒歩1分・47m 海抜3m」が1つの数字の並びに見える
   ★注記(*10)を中に入れて1かたまりにする（.pz-tag と同じ）。
     外に出すと、狭い画面で `*10` だけが次の行に落ちる */
.loc-asl { margin-left:.6rem; font-variant-numeric:tabular-nums;
  white-space:nowrap; display:inline-block; }
/* ★交差点が取れない店では海抜だけの行になる。その時は左に空けない
   （行頭が1文字ぶんずれて、住所とそろわなくなる） */
.loc-ix > .loc-asl:first-child { margin-left:0; }
/* ★海面より低い土地だけ、数字を本文色にして少し目立たせる。
   色は付けない（赤にすると「危険」と言ったことになる）。
   `-1m` の `-` は小さく、灰色のままだと読み飛ばされる */
.loc-asl.is-below { color:var(--fg); font-weight:700; }
/* ★海抜が取れなかった店の `海抜 ―`（§11.72）。値のある店より一段引く。
   赤や太字にしない ── 「取れなかった」は警告ではなく、ただの事実 */
.loc-asl.is-none { opacity:.7; }

/* アコーディオンの中の交差点。店舗と違ってリンク先が無いので <a> にしない */
.ix-list li { gap:.45rem; }
/* 信号のある交差点と、名前だけの交差点（junction）を区別する。
   ★色だけに頼らず文字も置く（.pz-mark と同じ方針） */
.pz-mark.is-sig { background:#3c3a36; }
.pz-mark.is-jun { background:#8a857d; }
.ix-name { flex:1 1 auto; min-width:0; font-size:.84rem;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ix-dir { flex:0 0 auto; font-size:.72rem; color:var(--muted); }
.ix-walk { flex:0 0 auto; font-size:.72rem; color:var(--muted);
  font-variant-numeric:tabular-nums; white-space:nowrap; }

/* 注記（*1）。押すと使い方ページの該当する節へ（§11.26）。
   ★小さくしすぎない。指で押せる大きさを padding で確保する */
.fn { margin-left:.15rem; font-size:.7rem; color:var(--accent);
  text-decoration:none; font-weight:700; padding:.25rem .3rem;
  vertical-align:super; line-height:1; }
.fn:active { opacity:.6; }
/* 位置づけと注記(*1)を1かたまりに。途中で行が割れないようにする */
.pz-tag { white-space:nowrap; display:inline-block; }
/* 位置づけを出せなかった時は、かたまりの中が注記(*11)だけになる。
   `.fn` の margin(.15rem) のままだと金額に貼り付いて読点のように見えるので、
   その時だけ少し空ける（位置づけがある時は `.pz-label + .fn` が 0 にする） */
.pz-tag > .fn:first-child { margin-left:.4rem; }

/* 営業時間の1行目「いま営業中か」（§11.29）。
   ★時刻を必ず添える。添えないと、いつ時点の話か分からない */
.ohs { margin:0 0 .35rem; display:flex; align-items:baseline;
  flex-wrap:wrap; gap:.15rem .45rem; font-size:.8rem; }
.ohs-when { color:var(--muted); font-size:.74rem;
  font-variant-numeric:tabular-nums; white-space:nowrap; }
.ohs-open   { color:#1f7a4d; }
.ohs-soon   { color:#b3701c; }
.ohs-closed { color:var(--muted); font-weight:600; }
.ohs-sub { color:var(--muted); font-size:.74rem;
  font-variant-numeric:tabular-nums; white-space:nowrap; }

/* これから7日の営業（§11.30）。
   ★日付・祝日名・時間の3列。祝日名は空でも列を保つ（行が揃う） */
.wk-list { list-style:none; margin:.6rem 0 0; padding:0;
  display:flex; flex-direction:column; gap:.3rem; }
.wk-row { display:grid; grid-template-columns:4.4em 1fr auto;
  align-items:baseline; gap:.5rem; font-size:.8rem; }
.wk-day { color:var(--muted); font-variant-numeric:tabular-nums; white-space:nowrap; }
.wk-day b { color:var(--fg); font-weight:700; margin-left:.15em; }
.wk-hol { color:#b3401c; font-size:.72rem; min-width:0;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.wk-time { font-variant-numeric:tabular-nums; white-space:nowrap; }
/* ★休みの日は薄くするだけでなく「休み」と字で書く（色だけに頼らない） */
.wk-row.is-off .wk-time { color:var(--muted); }
.wk-row.is-off .wk-day b { color:var(--muted); }
.wk-note { margin:.7rem 0 0; font-size:.72rem; color:var(--muted); line-height:1.6; }

/* ---------- 週間カレンダー（§11.31）----------
   ★7列。390px の画面では1列38pxしかないので、時刻は**縦に積む**
   （「11:00–15:00」は横に置けない。試作して測った）。 */
.cal { margin-top:.5rem; }
.cal-top { display:flex; align-items:center; justify-content:space-between;
  gap:.4rem; margin:0 0 .35rem; }
.cal-span { font-size:.78rem; color:var(--muted);
  font-variant-numeric:tabular-nums; }
/* ★指で押せる大きさを確保する。矢印そのものは小さくてよい */
.cal-nav { display:inline-flex; align-items:center; justify-content:center;
  min-width:2rem; min-height:1.9rem; border-radius:.4rem;
  color:var(--accent); text-decoration:none; font-size:.8rem;
  background:color-mix(in srgb, var(--line) 40%, transparent); }
.cal-nav.is-off { color:var(--line); background:transparent; }
.cal-nav:active { opacity:.6; }
.cal-grid { display:grid; grid-template-columns:repeat(7,1fr);
  border:1px solid var(--line); border-radius:.5rem; overflow:hidden; }
.cal-h, .cal-c { padding:.25rem .1rem; text-align:center; line-height:1.35;
  border-right:1px solid var(--line); border-bottom:1px solid var(--line); }
.cal-6, .cal-13, .cal-20, .cal-27 { border-right:0; }
.cal-h { font-size:.68rem; font-weight:700; color:var(--muted);
  background:color-mix(in srgb, var(--line) 30%, transparent); }
.cal-c { font-size:.62rem; }
.cal-grid > .cal-c:nth-last-child(-n+7) { border-bottom:0; }
/* ★日曜は赤、土曜は青。カレンダーの慣習に合わせる */
.cal-h:first-child, .cal-c:nth-child(8) { color:#b3401c; }
.cal-h:nth-child(7), .cal-c:nth-child(14) { color:#2f6fd0; }
.cal-d { display:block; font-weight:700; font-size:.74rem; color:var(--fg); }
.cal-hol { display:block; font-size:.58rem; color:#b3401c; font-weight:700; }
.cal-t { display:block; font-variant-numeric:tabular-nums; white-space:nowrap;
  color:var(--fg); }
.cal-t.is-off, .cal-c.is-off .cal-d { color:var(--muted); }
/* 今日を囲む。色だけに頼らず枠でも示す */
.cal-c.is-today { background:color-mix(in srgb, var(--accent) 12%, transparent);
  outline:2px solid var(--accent); outline-offset:-2px; }

/* カレンダーの天気（§11.32）。★1マス38pxなので1文字＋降水確率まで */
.cal-wx { display:block; font-weight:700; font-size:.66rem; line-height:1.3; }
.cal-wx.is-sun   { color:#c2610c; }
.cal-wx.is-cloud { color:var(--muted); }
.cal-wx.is-rain  { color:#2f6fd0; }
.cal-wx.is-snow  { color:#4a7fb5; }
.cal-wx.is-storm { color:#7a3ba8; }
.cal-pop { display:block; font-size:.56rem; color:var(--muted);
  font-variant-numeric:tabular-nums; line-height:1.2; }

/* ---------- このあたりのほかのジャンル（§11.33）---------- */
.ng-groups, .ng-list { list-style:none; margin:0; padding:0; }
.ng-groups { display:flex; flex-direction:column; gap:.9rem; margin-top:.6rem; }
.ng-head { display:flex; align-items:center; gap:.5rem; margin:0 0 .35rem; }
.ng-n { font-size:.72rem; color:var(--muted); font-variant-numeric:tabular-nums; }
.ng-list { display:flex; flex-direction:column; gap:.3rem; }
.ng-link { display:flex; align-items:baseline; gap:.5rem;
  padding:.45rem .6rem; border:1px solid var(--line); border-radius:.6rem;
  text-decoration:none; color:inherit; background:var(--panel); }
.ng-link:active { opacity:.85; }
.ng-name { flex:1 1 auto; min-width:0; font-size:.82rem;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ng-dist { flex:0 0 auto; font-size:.72rem; color:var(--muted);
  font-variant-numeric:tabular-nums; }
/* 店舗ページのジャンルの札。地図と同じ色を使う（正は map.js） */
.genre-chip { flex:0 0 auto; font-size:.68rem; font-weight:700; line-height:1;
  color:#fff; padding:.2rem .45rem .22rem; border-radius:999px;
  white-space:nowrap; }

/* ページ先頭へ戻るアンカー（§11.34）。表が長くなったので、
   表の店名と、2軒目候補の後ろの2か所から頭へ帰れる */
/* ★指で押せる高さを持たせる。文字のままだと16pxしかなく、
   押しそこねる（実測して気づいた）。負の margin で行の高さは変えない */
.to-top { color:inherit; text-decoration:none;
  display:inline-block; padding:.4rem .1rem; margin:-.4rem -.1rem; }
.to-top span { margin-left:.3em; color:var(--accent); font-size:.85em; }
.to-top:active { opacity:.6; }
/* 店名の横から地図へ（この店が中心・吹き出しが開いた状態で開く）。
   ★店名より一段小さく、色で分ける。同じ大きさだと店名が2本のリンクに割れて
     見え、どちらが名前なのか分からなくなる。
   ★to-top と同じく padding で押せる高さを作り、負の margin で行の高さは戻す。
   ★折り返させない。「地図で見る」が「地図で／見る」に割れると押しどころが濁る */
.to-map { color:var(--accent-2); text-decoration:none; font-weight:600;
  font-size:.82em; white-space:nowrap;
  display:inline-block; padding:.4rem .1rem; margin:-.4rem -.1rem -.4rem .55em; }
.to-map:active { opacity:.6; }
/* 「いま見ているお店」。他店の名前を10軒以上読んだあとなので、思い出させる */
/* ★見出しの直後に置くので、上の余白は詰める（見出しと離すと関係が切れる） */
.here { margin:.2rem 0 .7rem; padding:.7rem .9rem; font-size:.84rem;
  color:var(--muted); background:var(--panel);
  border:1px solid var(--line); border-radius:.7rem; }
.here .to-top { color:var(--fg); font-weight:700; margin-left:.4em; }
/* 飛んだ先（見出し）が画面の上端にぴったり付かないようにする */
#top { scroll-margin-top:.8rem; }

/* ---------- この店にあるもの（設備のチップ・§11.36）----------
   ★色を変えず、点線の下線だけにする。紹介文のすぐ下に十数個並ぶので、
   色付きリンクにすると本文が読みにくくなる（wikiの語リンクと同じ考え方）。 */
/* ★本文の中の印。行の高さは本文のまま（line-height を触ると行間が乱れる）。
   説明は title 属性で出す（吹き出しの箱は本文の中では邪魔になる）。 */
.ft-chip {
  color:inherit; text-decoration:none;
  border-bottom:1px dotted var(--muted);
}
.ft-chip:hover, .ft-chip:focus-visible { border-bottom-style:solid; }
.ft-chip:active { opacity:.6; }
/* 表のジャンル・予算帯（§11.133）。その値で絞った地図へ。設備のチップと同じ点線（色付きにすると表が読みにくい） */
.to-filter { color:inherit; text-decoration:none; border-bottom:1px dotted var(--muted); }
.to-filter:hover, .to-filter:focus-visible { border-bottom-style:solid; }

/* 定休日が読めない時の但し書き（§11.43）。
   ★表の直後に置く。表だけ見て「毎日やっている」と思われないように */
.wk-warn { margin:.6rem 0 0; padding:.5rem .65rem; border-radius:.5rem;
  background:color-mix(in srgb, #b3701c 12%, transparent);
  border:1px solid color-mix(in srgb, #b3701c 35%, transparent);
  font-size:.74rem; line-height:1.6; color:var(--fg); }
.wk-warn b { color:#b3401c; }

/* 定休日が読めない時の但し書き（§11.43）。
   ★表の直後に置く。表だけ見て「毎日やっている」と思われないように */
.wk-warn { margin:.6rem 0 0; padding:.5rem .65rem; border-radius:.5rem;
  background:color-mix(in srgb, #b3701c 12%, transparent);
  border:1px solid color-mix(in srgb, #b3701c 35%, transparent);
  font-size:.74rem; line-height:1.6; color:var(--fg); }
.wk-warn b { color:#b3401c; }

/* ---------- 元データの食い違いの注意書き（§11.49）----------
   ★目立たせすぎない。9.8%の店に出るので、赤で大きく出すと
     「壊れている」と読まれる。事実を静かに並べる面にする。 */
.dcw { margin:1rem 0 0; padding:.7rem .85rem;
  border:1px solid var(--line); border-left:3px solid var(--muted);
  border-radius:.5rem; background:var(--panel); }
.dcw-head { margin:0 0 .4rem; font-size:.82rem; font-weight:700; color:var(--fg); }
.dcw ul { margin:0; padding-left:1.1rem; }
.dcw li { font-size:.8rem; line-height:1.75; color:var(--muted); }
.dcw-ask { margin:.45rem 0 0; font-size:.78rem; color:var(--muted); }

/* --- 掲載が終わった店の札（§11.62）------------------------------------
   ★ページの見出しのすぐ下に置く。いちばん先に知りたいことなので、
     注意書き（.dcw）より強く。ただし赤一色にはしない ── 危険の赤ではなく
     「もう無い」という事実なので、地の色を落として静かに伝える。 */
.closed { margin:.2rem 0 1.2rem; padding:.8rem .9rem;
  border:1px solid var(--line); border-left:3px solid var(--accent);
  border-radius:.5rem; background:var(--panel); }
.cl-head { margin:0 0 .45rem; font-size:.95rem; font-weight:700; color:var(--fg); }
.closed p { margin:0 0 .3rem; font-size:.84rem; line-height:1.75; color:var(--muted); }
.closed p:last-child { margin-bottom:0; }
.cl-seen, .cl-tbl { font-size:.78rem; }

/* 札が出ている間は、店名も少し落ち着かせる（営業中と同じ見え方にしない） */
.closed ~ .spec dt { color:var(--muted); }

/* --- 最近変わったところ（§11.62）--------------------------------------
   紹介文のすぐ後ろ。日付と本文を2列に組むので、日付が縦に揃う。 */
.chg { margin:0 0 1.4rem; padding:.7rem .85rem;
  border:1px solid var(--line); border-radius:.5rem; background:var(--panel); }
.chg-head { margin:0 0 .45rem; font-size:.82rem; font-weight:700; color:var(--fg); }
.chg ul { margin:0; padding:0; list-style:none;
  display:grid; grid-template-columns:auto 1fr; gap:.28rem .7rem; }
.chg li { display:contents; }
.chg time { font-size:.76rem; color:var(--muted); white-space:nowrap;
  font-variant-numeric:tabular-nums; }
.chg li span { font-size:.8rem; line-height:1.7; color:var(--muted); }
/* 紹介文より後の変更。★色だけで示さない（色覚多様性）。印を前に足す */
.chg li.is-after time::before { content:"›"; margin-right:.25rem; color:var(--accent); }
.chg li.is-after span { color:var(--fg); }
.chg-note { margin:.5rem 0 0; font-size:.76rem; color:var(--muted); }

/* 日付が折り返すほど狭い画面では、1列に積む */
@media (max-width:380px) {
  .chg ul { grid-template-columns:1fr; gap:.1rem; }
  .chg li { display:block; margin-bottom:.5rem; }
  .chg time { display:block; }
}

/* ---------- 右側の外部サービスの棒（§11.93）----------
   Google マップ・食べログ・ホットペッパー・Retty・その他（ぐるなび）。
   ★ロゴではなく自前の絵（§11.131。前は短い字の印）。名前と動作は aria-label と title が持つ。
   ★本文に重ねない。棒の幅（右から 6px＋42px）ぶん、狭い画面では本文の右を空ける。
     広い画面（本文 640px の外に 56px 以上ある）では空けない。
   ★縦の位置は左の縦棒（.edge-back）と同じ式の中心に揃える。 */
.xrail { position: fixed; z-index: 6; right: 6px;
  /* ★低い画面（横向きのスマホ）で上が切れないよう、中心を棒の高さの半分より下に保つ */
  top: max(calc(50vh - 94px), 136px); top: max(calc(50svh - 94px), 136px);
  transform: translateY(-50%); }
.xrail ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.xrail li { margin: 0; }
.xr-gap { height: 4px; }
.xr-btn { position: relative; display: flex; align-items: center; justify-content: center;
  width: 42px; height: 42px; border-radius: 50%;
  background: var(--panel); color: var(--fg); border: 1px solid var(--line);
  box-shadow: 0 1px 4px rgba(0,0,0,.12);
  text-decoration: none; font-weight: 700; font-size: .95rem; line-height: 1;
  cursor: pointer; -webkit-tap-highlight-color: transparent; }
/* ★サービスの色で一目で分かるようにする（ロゴは使わず、色と字の印）。
   地は各社の色、字は白。★白い字との対比が 3:1 以上になる濃さに寄せている
   （UI部品の対比の目安。test_xrail_layout.js が測る）。暗い配色でも同じ色のまま。
   Google マップだけは白地に Google の青の G（地を青にすると、ただの青い丸に見える） */
.xrail { --xr-gmap:#1a73e8; --xr-tabelog:#d06f00; --xr-hotpepper:#c8161e; --xr-retty:#e0440e; }
.xr-gmap { background: #fff; color: var(--xr-gmap); border-color: #dadce0; font-size: 1.1rem; }
/* 吹き出しの中の点（Retty）は、地の色で抜く */
.xr-retty { --xr-ico-cut: var(--xr-retty); }
.xr-tabelog { background: var(--xr-tabelog); }
.xr-hotpepper { background: var(--xr-hotpepper); }
.xr-retty { background: var(--xr-retty); }
.xr-tabelog, .xr-hotpepper, .xr-retty { color: #fff; border-color: transparent; }
/* 外へ出ることの印。「その他」の開閉ボタンには付けない（押しても外へは出ない） */
a.xr-btn::after { content: "↗"; position: absolute; right: -2px; top: -3px;
  font-size: .58rem; font-weight: 700; color: var(--muted); }
.xr-more > summary:hover, .xr-more > summary:focus-visible { border-color: var(--accent-2); color: var(--accent-2); }
a.xr-btn:hover { filter: brightness(1.08); }
.xr-btn:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 2px; }
.xr-btn:active { opacity: .7; }
.xr-more { position: relative; }
.xr-more > summary { list-style: none; }
.xr-more > summary::-webkit-details-marker { display: none; }
.xr-more[open] > summary { border-color: var(--accent-2); color: var(--accent-2); }
/* 開いた一覧は棒の左に出す。右端に出すと画面の外へはみ出す */
.xr-menu { position: absolute; right: calc(100% + 8px); bottom: 0;
  list-style: none; margin: 0; padding: .35rem; min-width: 12.5rem;
  background: var(--panel); border: 1px solid var(--line); border-radius: 11px;
  box-shadow: 0 4px 16px rgba(0,0,0,.16); }
.xr-item { display: block; padding: .55rem .7rem; border-radius: 8px;
  color: var(--fg); text-decoration: none; font-size: .85rem; white-space: nowrap; }
/* 「その他」の中も、サービスの色の丸を頭に付けて見分ける */
/* 「その他」の中は、各社の色の小さな絵（§11.131）。前は色の丸だった */
.xr-ico-s { display: inline-flex; vertical-align: -.2em; margin-right: .45rem; color: var(--xr-c, var(--muted)); }
.xr-ico { display: block; }
.xr-item.xr-gnavi { --xr-c: #e50012; }
.xr-item.xr-instagram { --xr-c: #d62976; }
.xr-item.xr-x { --xr-c: var(--fg); }
.xr-item.xr-tiktok { --xr-c: #fe2c55; }
/* ★TikTok・Instagram は各社の色に寄せるが、目印（ずらした2色・グラデーション）は真似しない（§11.131） */
.xr-item:hover, .xr-item:focus-visible { background: color-mix(in srgb, var(--accent-2) 12%, transparent); }
@media (max-width: 760px) {
  .wrap.has-xrail { padding-right: calc(6px + 42px + .8rem); }
}
@media print { .xrail { display: none; } }

/* ---------- 地図の右側に入れた時（§11.124・?embed=1）----------
   横に地図が見えているので「← 地図の同じ場所へ戻る」と左端の棒は出さない。
   ★頁の中身は同じ。隠すのは地図へ戻る導線だけ */
.embed .crumb .back, .embed .edge-back { display: none; }
.embed .crumb { margin-bottom: .4rem; }
.embed main.wrap { padding-top: .9rem; }

/* ---------- 2分割へのボタン（§11.129）----------
   広い画面で店舗ページを直接開いた時、上の真ん中に「地図と並べて見る」。地図の「2分割に戻す」（styles.css .split-restore）と同じ絵と形。
   ★狭い画面（並べる幅が無い）と、地図の右の枠の中（もう並んでいる）では出さない */
.to-split { display: none; }
@media (min-width: 900px) {
  .to-split { display: flex; align-items: center; justify-content: center; position: fixed; z-index: 30;
    top: 10px; left: 50%; transform: translateX(-50%); width: 44px; height: 30px; border-radius: 15px;
    background: var(--panel); color: var(--fg); border: 1px solid var(--line); box-shadow: 0 1px 3px rgba(0,0,0,.18); }
  .to-split:hover { color: var(--accent); border-color: var(--accent); }
  .to-split:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
}
.embed .to-split { display: none; }

/* ---------- AI に聞く（§11.173） ---------- */
/* 「その他」の中の AI は落ち着いた1色（各社の色やロゴは使わない） */
.xr-item.xr-chatgpt, .xr-item.xr-claude, .xr-item.xr-gemini, .xr-item.xr-perplexity { --xr-c: var(--accent-2); }

.ask-ai { margin: 2rem 0 1rem; padding: 1rem; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); }
.ask-ai h2 { font-size: 1rem; margin: 0 0 .5rem; }
.ask-ai-note { font-size: .8rem; color: var(--muted); margin: .4rem 0; line-height: 1.6; }
.ask-ai-note b { color: var(--fg); font-weight: 600; }
.ask-ai textarea { box-sizing: border-box; width: 100%; min-height: 7.5rem; resize: vertical; padding: .6rem .7rem;
  font: inherit; font-size: .9rem; line-height: 1.6; color: var(--fg); background: var(--bg);
  border: 1px solid var(--line); border-radius: 8px; }
.ask-ai textarea:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 1px; }
.ask-ai-row { display: flex; align-items: center; justify-content: space-between; gap: .75rem; margin-top: .4rem; }
.ask-ai-meta { font-size: .75rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.ask-ai-reset { min-height: 36px; padding: .35rem .8rem; font: inherit; font-size: .8rem; color: var(--accent-2);
  background: transparent; border: 1px solid var(--line); border-radius: 8px; cursor: pointer; }
.ask-ai-reset:hover { border-color: var(--accent-2); }
.ask-ai-reset:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 2px; }
/* 節の見出し・表の項目名を押すとリンクをコピー（anchor.js・§11.202）。押せる所は手の形、触ると薄い #、押したら一瞬光る */
.can-copy { cursor: pointer; }
.can-copy:hover::after { content: " #"; color: var(--muted); font-weight: 400; font-size: .8em; }
.is-copied, :target { animation: fn-land 1.6s ease-out; }
@keyframes fn-land { from { background: color-mix(in srgb, var(--accent) 22%, transparent); } to { background: transparent; } }
.copy-toast { position: fixed; left: 50%; bottom: 1.2rem; transform: translateX(-50%); z-index: 50;
  max-width: min(90vw, 28rem); padding: .55rem .9rem; border-radius: 8px; font-size: .8rem; line-height: 1.5;
  background: #1b1a18; color: #fff; opacity: 0; pointer-events: none; transition: opacity .2s; }
.copy-toast.show { opacity: .95; }
@media (prefers-reduced-motion: reduce) { .is-copied, :target { animation: none; } .copy-toast { transition: none; } }
/* ★「こんな時に」の 👍 👎 の「ありがとうございます」（.sc-toast）も同じ見た目（rate.js が両方の class を付ける） */
.ask-ai-toast { position: fixed; left: 50%; bottom: 1.2rem; transform: translateX(-50%); z-index: 50;
  max-width: min(90vw, 28rem); padding: .55rem .9rem; border-radius: 8px; font-size: .8rem; line-height: 1.5;
  background: #1b1a18; color: #fff; opacity: 0; pointer-events: none; transition: opacity .2s; }
.ask-ai-toast.show { opacity: .95; }
@media (prefers-reduced-motion: reduce) { .ask-ai-toast { transition: none; } }
/* AI に聞く（§11.173）のボタン。「…」のすぐ下。吹き出しの絵を青で */
.xr-ai > summary { color: var(--accent-2); }
/* ★低い画面（横向きのスマホ）では棒のボタンを少し小さく（§11.173）。AI のボタンを足して棒が伸び、
   高さ 360px で棒の上が画面の外に出た。中心の式（左の縦棒と揃える）は変えずに、棒を縮める */
@media (max-height: 420px) {
  .xrail ul { gap: 4px; }
  .xr-btn { width: 36px; height: 36px; }
  .xr-gap { height: 2px; }
}

/* 最近見たお店（§11.197）。端末の中だけ。recent.js が並べる */
.recent { margin: 1.2rem 0 0; padding: .8rem .9rem; border: 1px solid var(--line, #e5e2dc); border-radius: 12px; }
.recent-head { margin: 0 0 .4rem; font-size: .95rem; }
.recent ul { margin: 0; padding: 0; list-style: none; }
.recent li { display: flex; flex-wrap: wrap; gap: .2rem .6rem; align-items: baseline; padding: .25rem 0; border-top: 1px solid var(--line, #eee); font-size: .9rem; }
.recent li:first-child { border-top: 0; }
.recent li small { color: var(--muted, #777); font-size: .78rem; }
.recent-note { margin: .5rem 0 0; font-size: .78rem; color: var(--muted, #777); }
.recent-note button { margin-left: .5rem; font-size: .78rem; padding: .1rem .6rem; border: 1px solid var(--line, #ccc); border-radius: 999px; background: #fff; }


/* そろい具合（％・§11.224）。カードの名前の横に小さく。条件付きは控えめな色 */
.sc-fit { margin-left:.5em; font-size:.75rem; font-weight:600; color:var(--muted); font-variant-numeric:tabular-nums; white-space:nowrap; }
.sc-fit.is-cond { color:var(--accent-2); }

/* ---------- ブックマーク（§11.232）・右下の「^」----------
   右上（← 地図へ と同じ行の右端）に印。押すと付け外し、付いている時は塗る。横の「ブックマーク n ↓」で下の一覧へ。
   ★端末の中（gourmet:bookmarks）だけ。枠（2分割の右）の中でも出す（← 地図へ だけ隠す） */
.crumb.has-bm { display: flex; align-items: center; justify-content: space-between; gap: .6rem; }   /* ★店舗ページだけ（ほかの頁の crumb は「／」でつなぐ文）*/
.bm-top { display: inline-flex; align-items: center; gap: .4rem; margin-left: auto; }
.bm-jump { font-size: .78rem; color: var(--accent-2); text-decoration: none; white-space: nowrap;
  padding: .3rem .6rem; border: 1px solid var(--line); border-radius: 999px; background: var(--panel); font-variant-numeric: tabular-nums; }
.bm-jump[hidden] { display: none; }
/* 上限（200軒）が近い・来た時の一言（§11.232） */
.bm-warn { margin: 0 0 .4rem; padding: .35rem .6rem; border-radius: 8px; font-size: .8rem; line-height: 1.6;
  color: var(--fg); background: color-mix(in srgb, var(--accent) 10%, transparent); }
.bm-warn[hidden] { display: none; }
/* 一覧は新しい20軒から。「もっと見る」で20軒ずつ（§11.232） */
.bm-more-row { margin: .3rem 0 0; }
.bm-more { font: inherit; font-size: .8rem; padding: .35rem .9rem; color: var(--accent-2); background: var(--panel);
  border: 1px solid var(--line); border-radius: 999px; cursor: pointer; }
.bm-more[hidden] { display: none; }
.bm-more:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 2px; }
/* ★狭い画面では「1 ↓」だけ（「← 地図でこの店のまわりを見る」が折り返さないように）。読み上げには「ブックマーク」を残す */
@media (max-width: 480px) {
  .bm-word { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
}
.bm-jump span[aria-hidden] { margin-left: .25em; }
.bm-btn { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; padding: 0;
  border: 1px solid var(--line); border-radius: 50%; background: var(--panel); color: var(--muted); cursor: pointer;
  -webkit-tap-highlight-color: transparent; }
.bm-btn:hover { color: var(--fg); }
.bm-btn[aria-pressed="true"] { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); }
.bm-btn[aria-pressed="true"] .bm-ico path { fill: currentColor; }
.bm-btn:focus-visible, .bm-jump:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 2px; }
.bm-btn:active { transform: scale(.92); }
.to-top-fab { position: fixed; z-index: 7; right: 12px; bottom: calc(14px + env(safe-area-inset-bottom, 0px));
  display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%;
  background: var(--panel); color: var(--fg); border: 1px solid var(--line); box-shadow: 0 2px 8px rgba(0,0,0,.18);
  text-decoration: none; opacity: 0; pointer-events: none; transform: translateY(8px); transition: opacity .2s, transform .2s; }
.to-top-fab.show { opacity: .95; pointer-events: auto; transform: none; }
.to-top-fab:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .to-top-fab { transition: none; } .bm-btn:active { transform: none; } }
@media print { .bm-top, .to-top-fab { display: none; } }