/* マップページ（map.php）。 */

/* ヘッダーを出していないので画面いっぱいを使う。
   ★ 背景は絵（img/map/campus.webp）の余白と同じ**白**にすること。
   地図を回したり引いたりして絵の外が見えても、同じ色なら分からない。
   これがあるので、回転を角度で制限しなくてよい（js/map/map-transform.js の clampToBounds）。
   以前（MapLibre を使っていた頃）は背景を変えられなかったが、いまは自前なので自由。
   クリーム（--color-washi-deep）にすると、回したときに絵の角が見える。 */
.map-page {
  position: relative;
  height: 100dvh;
  overflow: hidden;
  background: #fff;
  /*
   * この画面だけ、面の色を和紙のクリームではなく白にする（2026-10-19。「クリーム色が変」という指摘）。
   * シート・検索の帯・丸いボタン・エリアの札の地は、どれもこの変数から色を取っている。
   * 他のページ（トップ・一覧・マイページ）は base.css の値のまま。
   *
   * ★ 押したときの地（washi-deep。「絞り込みを解除」「一覧へ戻る」、条件が効いている絞り込みボタン、
   *   一覧の項目を押したとき）は**黄みの無い薄い灰**にする。
   *   2026-10-19 の昼までは、明るくしたベージュ系の絵に合わせて面を薄いベージュ（#faf8f4）、
   *   押した地を黄みの灰（#efeae2）にしていたが、同日夕方に絵を MAP検索と同じもの（白地に灰の道、
   *   建物は澄んだ色）へ差し替えたので、ベージュ系だけが濁って見えた（「気持ち悪い色」と指摘）。
   *   面は白に戻し（検索欄には枠線と影があるので、絵の白い余白とは見分けが付く）、
   *   押した地は MAP検索の薄い灰に寄せる。
   */
  --color-surface: #ffffff;
  --color-washi: #ffffff;
  --color-washi-deep: #f0f0f1;
  /* 橙の上の文字は白（濃い茶だと「橙に黒文字」で読みにくい。2026-10-19 に指摘）。投票ボタン・結果の札に効く */
  --color-on-orange: #ffffff;
  /*
   * 明るい橙（#f08530）はこの画面では使わない（「うるさい」2026-10-19 に指摘）。
   * 結果のピン・開いているエリア・投票ボタンなど「橙」と書いてある所はすべて深い橙になる。
   * 押した瞬間の色（strong）はさらに一段深く。js 側の値は js/map/map-layers.js の ACTIVE_AREA_COLOR。
   */
  --color-orange: #d64a2f;
  --color-orange-strong: #b53a22;
  --color-accent: #d64a2f;
  /* 画面全体で文字を選べなくする。地図を掴んで動かしたときに、シートの
     文字まで選択（青く反転）されて目障りだった（2026-10-18 に指摘）。
     この画面で文字を写し取ることはまず無いので、検索欄だけ例外にする。 */
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

.map-page input {
  -webkit-user-select: text;
  user-select: text;
}

/* 地図を掴む所。指の縦スワイプをブラウザに取られないよう
   touch-action: none を必ず指定する（PORTING.md 5-4）。
   指定しないと、払ったときにページごと動いて地図もシートもずれる。 */
.map-canvas {
  position: relative; /* 下に敷く絵の canvas（.map-picture）の基準 */
  height: 100%;
  width: 100%;
  overflow: hidden;
  touch-action: none;
}

/* 地図の絵。表示領域と同じ大きさで、js/map/map-picture.js が毎フレーム今の倍率で描き直す（そこの注）。
   帯・ピン・札の下に敷く。指の操作は .map-canvas が受ける。
   ★ CSS の transform で拡大する箱（以前の .map-stage / .map-layers）はもう無い（js/map.js の注）。
     拡大した箱の中身は、スマホで倍率が上がるとぼやける */
.map-picture {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* 縮めた画像にしない。
   この地図は上限まで寄ると絵を 5 倍ほどに引き伸ばすので、縮めると白くぼやける。
   中身は平坦な色の地図なので、可逆のままでも 43KB しかない。
   重いのはファイルではなく展開後の画素数なので、余白を切り落として減らした
   （js/lib/map-projection.js の CAMPUS_IMAGE_WIDTH の注）。 */
.map-image {
  /* <canvas>（js/map.js。動かしてもぼやけないように）。描けなければ <img> に戻るので両方に効く */
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: fill;
  pointer-events: none;
  /* ★ filter を掛けないこと。彩度を落とすために一度 filter: saturate() を掛けたが、フィルタ付きの
     要素は拡大・移動のたびに描き直しが要り、動かしている間は粗い解像度で描かれてぼやけた
     （2026-10-19 に指摘）。色味は画像そのものに焼き込んである（彩度 0.6 倍にして白と 38% 混ぜる。
     濃い建物と道を起こして全体を明るくするため。「雰囲気が暗すぎる」2026-10-19）。
     元の絵は git の履歴 e726e47 の campus.webp。作り直すときは Pillow で同じ処理をする */
}

/* 帯・札・ピン・設備・現在地を入れる箱。
   画像と**同じ矩形**に重ねる（これが 0〜1 座標の基準になる）。
   画像と同じ箱に描くと、描き直しのたびに画像ごと消えてしまう。 */
/* ピン・札・設備・現在地を入れる箱。stage の**外**にあり、表示領域と同じ大きさで変換は掛けない
   （js/map/map-layers.js の placeMarkers の注。stage の中に置くと倍率が上がったときにぼやけた）。
   箱自体は指を受けない（下の帯と地図に届くように）。中身（.map-marker）だけ受ける */
.map-overlay {
  pointer-events: none;
  position: absolute;
  inset: 0;
  /* 現在地の方位。js/map.js が書き換える */
  --user-heading: 0deg;
}

/* --- エリアの帯 ---
   箱も svg も表示領域と同じ大きさで変換を掛けない。変換は svg の中の <g> に js が掛ける
   （js/map/map-layers.js の placeBands）。箱と svg は指を受けず、面（.map-band）だけ受ける */
.map-bands-box {
  pointer-events: none;
  position: absolute;
  inset: 0;
}

.map-bands {
  pointer-events: none;
  position: absolute;
  inset: 0;
  z-index: 5;
  height: 100%;
  width: 100%;
  overflow: visible;
}

.map-band {
  pointer-events: none;
  transition: stroke-opacity 0.15s;
}

.map-band.is-clickable {
  pointer-events: auto;
  cursor: pointer;
}

/* --- 地図の上に置くもの ---
   位置は常に中心合わせ。地図をどれだけ拡大・回転しても、中身の見た目の
   大きさと向きは変わらないよう、親（.map-stage）の変換を打ち消す。
   打ち消す値は .map-overlay の CSS 変数で、js/map.js が指の動きに合わせて
   書き換える（要素は作り直さない。search/map の .map-pins > * と同じ）。
   ★ 中身で transform を上書きしないこと ── 地図の上の別の場所へ飛ぶ。 */
/* 位置は js が transform に入れる（translate3d(画面x, 画面y) translate(-50%, -50%)）。
   ★ 中身で transform を上書きしないこと ── 位置ごと飛ぶ。 */
.map-marker {
  pointer-events: auto;
  position: absolute;
  left: 0;
  top: 0;
  transform: translate(-50%, -50%);
}

.z-label { z-index: 25; }
.z-pin { z-index: 20; }
.z-pin-hover { z-index: 30; }
.z-selected { z-index: 40; }
.z-facility { z-index: 10; }
.z-garapon { z-index: 15; }
.z-me { z-index: 30; }
.z-building { z-index: 5; }

/* --- 建物の名前（本館・東1号館 など。js/lib/building-labels.js） ---
   MAP検索（search/map/map.css の .facility-label）と同じ見え方。白地に灰色の太字。
   押せるものではないので pointer-events は切る（枠や影を付けないこと。押せる物に見える）。
   描き直しのたびに入れ替わるので、浮かび上がる animation は付けない（点滅して見える） */
.building-label {
  pointer-events: none;
  padding: 2px 6px;
  border-radius: 3px;
  background: #fff;
  color: #555;
  font-size: 11px;
  font-weight: bold;
  white-space: nowrap;
}

/* --- ガラポン ---
   投票の目的地。設備より目立たせ、名前を添える。
   押すと案内が出る（2026-10-28〜。js/map/info-dialog.js）。箱は指を通し、中のボタンだけ受ける。 */
.garapon {
  pointer-events: none;
}

.garapon__button {
  pointer-events: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.125rem;
  cursor: pointer;
}

.garapon__icon {
  width: 2.25rem;
  height: 2rem;
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.92);
  padding: 0.125rem;
  box-shadow: var(--shadow-raise);
}

/* 名前は朱の地に白（2026-10-28。「ガラポン赤背景でもいいかも、字の方」）。白い札だと建物の名前
   （.building-label）と同じ見た目で、投票の目的地だと分からなかった。朱は投票ボタンと同じ色 */
.garapon__name {
  font-family: var(--font-display);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: #fff;
  background: var(--color-orange);
  border-radius: var(--radius-pill);
  padding: 0.0625rem 0.5rem;
  box-shadow: var(--shadow-raise);
  white-space: nowrap;
}

/* 検索・絞り込み・店の選択中（map-layers.js の garaponMarkers の注）。
   名前を引っ込め、絵を薄く小さくする。位置は変えない（名前は display: none ではなく
   透明にする。箱の高さが変わると、中心合わせの絵が上下にずれる）。 */
.garapon.is-quiet .garapon__icon {
  opacity: 0.45;
  transform: scale(0.75);
  box-shadow: none;
}

.garapon.is-quiet .garapon__name {
  opacity: 0;
  box-shadow: none;
}

/* --- エリアの札 ---
   地はエリアの色そのものにする。どの札がどの面のものか、
   線で結ばなくても分かる。文字は白ではなく濃い茶
   （エリアの色は薄いので、白抜きだと読めない）。

   **件数を主役にする**（「エリアA」より「4件」のほうが、
   どこに何があるか一目で見るときには重要）。 */
.area-label {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  border-radius: var(--radius-pill);
  border: 2px solid;
  padding: var(--gap-1) 0.625rem;
  white-space: nowrap;
  box-shadow: var(--shadow-raise);
  transition: background-color 0.15s;
  /* 現れるときは淡く浮かび上がる。描き直しで一瞬で入れ替わるとちらつく（2026-10-19「ぬめぬめ感」） */
  animation: map-fade-in 0.2s ease-out;
}

@keyframes map-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

/*
 * 区画の札（図書館A など）は、スマホでは**区画の文字と件数だけ**にする（「A 3件」）。区画は 9 つ並ぶと
 * 名前入りの札が重なって読めない。どの区画かは大分類の札（名前入り）と、押したときの一覧の見出しで分かる。
 * 名前は title に残す。PC は名前入りのまま（区画の文字は名前に入っているので出さない）。
 * 2026-10-19〜10-27 は件数だけの丸（MAP検索の件数入りのピンと同じ見せ方）だったが、「③」が区画の番号に
 * 読まれた（2026-10-28 の確認会。「A とか英語の振り分けだけ見えるようにした方が混乱しない」）。
 */
.area-label__letter {
  display: none;
}

@media (max-width: 1023px) {
  .area-label--block {
    gap: 0.25rem;
    padding: 0.125rem 0.125rem 0.125rem 0.5rem;
  }

  .area-label--block .area-label__name {
    display: none;
  }

  /* 文字も数字と同じく少し下に見える（測って 1px）ので、そのぶん上げる */
  .area-label--block .area-label__letter {
    display: block;
    font-family: var(--font-display);
    font-size: 0.9375rem;
    font-weight: 700;
    line-height: 1;
    color: var(--color-sumi);
    transform: translateY(-0.0625rem);
  }

  /* 「店」は数字と下をそろえる。漢字の字面は数字より下まで伸びていて、そのままだと数字が上に寄って見えた
     （2026-10-28。6 倍に拡大して測ると「店」の下端が 0.67px 下）。0.08em 持ち上げる */
  .area-label--block .area-label__count::after {
    content: "店";
    margin-left: 0.0625rem;
    vertical-align: 0.08em;
    font-size: 0.625rem;
    font-weight: 700;
  }

  .area-label--block.is-active .area-label__letter,
  .area-label--block.is-result .area-label__letter {
    color: #fff;
  }
}

/* 開いているエリアの札。結果の札（.is-result）と同じ橙に白文字 */
.area-label.is-active {
  background-color: var(--color-orange-strong) !important;
  border-color: #fff !important;
  box-shadow: 0 1px 4px rgba(90, 52, 12, 0.45);
}

.area-label.is-active .area-label__count {
  background: #fff;
  color: var(--color-orange-deep);
}

.area-label.is-active .area-label__name {
  color: #fff;
}

/* 絞り込み中の札。ピン（.shop-pin__dot）と同じ橙に白い縁で、
   「全件」の札（場所の色）と一目で区別がつくようにする。
   件数は白地に濃い橙で、主役のまま。 */
.area-label.is-result {
  background-color: var(--color-orange-strong);
  border-color: #fff;
  box-shadow: 0 1px 4px rgba(90, 52, 12, 0.45);
}

.area-label.is-result .area-label__count {
  background: #fff;
  color: var(--color-orange-deep);
}

.area-label.is-result .area-label__name {
  color: #fff;
}

/*
 * 数字は字体のつくりで丸の真ん中より下に見える（本番で測って 1.5px = 0.1em 下。2026-10-28 に「丸に対して
 * 超絶若干中央より下にずれてる」）。行の高さを字の大きさちょうど（1）にして、上下の余白を 0.1em / 0.3em に
 * 分ける。丸の高さは前と同じ（1.4em）で、字だけ 0.1em 上がる。
 */
.area-label__count {
  font-variant-numeric: tabular-nums;
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--color-washi) 80%, transparent);
  padding: 0.1em 0.375rem 0.3em;
  font-size: 0.9375rem;
  font-weight: 700;
  line-height: 1;
  color: var(--color-sumi);
}

.area-label__name {
  font-family: var(--font-display);
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  color: var(--color-sumi);
}

/* --- 模擬店のピン ---
   地の丸＋品目のアイコンの2色だけで描く。絵文字を入れていたときは
   この縮尺で絵柄が潰れて読めなかった。面で描いた図形なら
   小さくても形が残る。 */
.shop-pin,
.selected-pin {
  animation: map-fade-in 0.2s ease-out;
}

.shop-pin {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* 名前を出すのはホバー中だけ。吹き出しはピンの内側で absolute に
   持ち上げる（外側の位置をずらすと、拡大率の分だけピンが飛んで見える）。 */
.shop-pin__name {
  position: absolute;
  bottom: 100%;
  margin-bottom: var(--gap-1);
  max-width: 11rem;
  overflow: hidden;
  text-overflow: ellipsis;
  border-radius: var(--radius-md);
  background: #fff;
  padding: var(--gap-1) var(--gap-2);
  font-size: 0.75rem;
  line-height: 1.25;
  font-weight: 500;
  white-space: nowrap;
  color: var(--color-sumi);
  box-shadow: var(--shadow-card);
}

/* 丸の中にアイコン。絵柄は白抜き。
   以前は橙地に濃い茶だったが、絵柄が12px四方しかないので
   形が沈んで団子に見えていた。白なら小さくても形が立つ
   （絵柄はコントラスト比ではなく「形が読めるか」で決めてよい）。
   縁は白のままにして、地図のどんな色の上でも丸が浮くようにする。 */
.shop-pin__dot {
  display: flex;
  width: 1.375rem;
  height: 1.375rem;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  border: 2px solid #fff;
  background: var(--color-orange-strong);
  color: #fff;
  box-shadow: 0 1px 4px rgba(90, 52, 12, 0.45);
}

.shop-pin__dot.is-voted {
  background: var(--color-kincha);
}

.pin-icon {
  width: 0.75rem;
  height: 0.75rem;
}

/* --- 選んだ模擬店の目印 ---
   丸ではなく雫形にして、先端が実際の位置を指すようにする。
   全体を箱の半分だけ上へ持ち上げて、下端＝先端を中心に合わせる
   （以前は先端が店より 32px 下にあり、押すとピンが下に動いて見えた）。 */
.selected-pin {
  pointer-events: none;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* 選んでいる店のピン。丸のまま赤く塗って外側にリング（MAP検索の .pin-marker.is-selected と同じ）。
   ★ transform は書かない（位置は .map-marker の transform が決めている） */
.shop-pin__dot.is-selected {
  background: #e23b3b;
  box-shadow: 0 0 0 4px rgba(226, 59, 59, 0.35), 0 2px 8px rgba(0, 0, 0, 0.45);
}

/* 名前は白地に濃い橙。橙地に濃茶だと、地図の上で札そのものが
   ピンと同じ色の塊になって、どこからどこまでか分かりにくい。 */
.selected-pin__name {
  position: absolute;
  bottom: 100%;
  margin-bottom: 0.125rem;
  max-width: 11rem;
  overflow: hidden;
  text-overflow: ellipsis;
  border-radius: var(--radius-pill);
  border: 1px solid var(--color-orange);
  background: #fff;
  padding: var(--gap-1) 0.625rem;
  font-size: 0.75rem;
  line-height: 1.25;
  font-weight: 700;
  white-space: nowrap;
  color: var(--color-orange-deep);
  box-shadow: var(--shadow-card);
}

/* --- 検索で当たった施設（トイレ・休憩所・案内所 …。map-layers.js の facilityHitMarkers） ---
   ガラポンと同じ組み立て（絵の下に名前）。結果なので、ピンと同じ橙の輪で囲んで目立たせる。
   押せるものではないので pointer-events は切る（一覧から押せば寄る） */
.z-facility-hit { z-index: 35; }

.facility-hit {
  pointer-events: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.125rem;
}

.facility-hit__icon {
  width: 2rem;
  height: 2rem;
  padding: 0.3rem;
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 0 0 2px var(--color-orange), var(--shadow-raise);
}

.facility-hit__name {
  font-family: var(--font-display);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--color-sumi);
  background: rgba(255, 255, 255, 0.92);
  border-radius: var(--radius-pill);
  padding: 0 0.375rem;
  white-space: nowrap;
}

/* --- 設備 --- */
/* 2026-10-28 に一回り大きくした。寄るほど大きくなる（丸 28 → 34px、絵は丸より 8px 小さい）。
   --facility-size は js/map/map-layers.js の placeMarkers が倍率から毎フレーム入れる。
   ★ 段階の境目で大きい版に切り替える形（.is-large）は、いきなり大きくなるのが変なのでやめた */
.facility {
  pointer-events: none;
  display: flex;
  width: var(--facility-size, 1.75rem);
  height: var(--facility-size, 1.75rem);
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
}

.facility img {
  width: calc(var(--facility-size, 1.75rem) - 0.5rem);
  height: calc(var(--facility-size, 1.75rem) - 0.5rem);
}

/* --- 現在地 ---
   青にする。地図アプリで青い丸といえば自分の位置、という約束が
   広く通っているので、それに合わせる。オレンジは模擬店のピンで
   使っている色なので、現在地に使うと店の一つに見えてしまう。 */
.my-location {
  pointer-events: none;
  display: block;
  width: 1rem;
  height: 1rem;
}

.my-location__dot {
  position: absolute;
  inset: 0;
  border-radius: 999px;
  border: 2px solid #fff;
  background: #2f7de1;
  box-shadow: 0 0 0 6px rgba(47, 125, 225, 0.24), 0 1px 3px rgba(0, 0, 0, 0.3);
}

/* 向きの扇。丸と同じ入れ物の中で回す（外側で回すと、地図の拡大を
   打ち消す変換と噛み合わずに位置がずれる）。
   向きには**地図の回転を足す**。入れ物は地図の回転を打ち消してあるので、
   この中では上＝画面の上。--user-heading は真北基準なので、地図が回って
   いればそのぶんずらす（--map-rotation を足す）。 */
.my-location__fan {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 3rem;
  height: 3rem;
  /* base.css の svg { max-width: 100% } が丸の幅(1rem)に押し縮め、扇が丸の下に隠れて見えなかった（2026-10-19） */
  max-width: none;
  /* 方位（北基準）に地図の回転（js/map.js が .map-page の --map-rotation に入れる）を足して画面基準にする */
  transform:
    translate(-50%, -50%)
    rotate(calc(var(--user-heading) + var(--map-rotation, 0deg)));
}

/* ============================================================
   地図の上のボタン
   ------------------------------------------------------------
   文字のボタンを縦に4つ並べると、スマホでは地図の右側を常に
   塞いでしまう（模擬店が密集しているのは画像の中央付近なので、
   ちょうど見たい所に重なる）。丸いアイコンにして幅を詰める。
   ============================================================ */

.map-controls {
  pointer-events: none;
  position: absolute;
  inset-inline: 0;
  /* 地図の上のもの（帯 5・札 25・選んだピン 40）より上、シート（--z-sheet）より下。
     無いと札やトイレの絵がボタンに乗って押せなかった（2026-10-21 に指摘）。検索の帯は --z-overlay */
  z-index: var(--z-sticky);
  /* 検索の帯（.map-search。高さ 2.75rem + 上の余白）の下から */
  top: calc(2.75rem + var(--gap-3));
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
  padding: var(--gap-3);
}

.map-controls__group {
  pointer-events: auto;
  display: flex;
  flex-direction: column;
  gap: var(--gap-2);
}

/* 押せる大きさ(44px)は必ず確保する
   ── 学祭では歩きながら片手で操作されるため。 */
.control-button {
  display: flex;
  width: 2.75rem;
  height: 2.75rem;
  touch-action: manipulation; /* 素早く 2 回押してもブラウザがページを拡大しない */
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--color-surface) 95%, transparent);
  color: var(--color-sumi-soft);
  box-shadow: var(--shadow-raise);
  transition: background-color 0.15s, color 0.15s;
}

@media (hover: hover) and (pointer: fine) {
  .control-button:hover {
    color: var(--color-orange-deep);
  }
}

/* display: flex がブラウザ既定の [hidden] に勝ってしまうので、明示する（方位針は回したときだけ出す） */
.control-button[hidden] {
  display: none;
}

.control-button[aria-pressed="true"] {
  background: var(--color-orange);
  color: var(--color-on-orange);
}

.control-button svg {
  width: 1.25rem;
  height: 1.25rem;
}

/* 方位針。地図の回転（js/map.js の applyTransform が --map-rotation に入れる）と同じだけ回す。
   絵は「上が北」で描いてあるので、地図と同じ角度を掛ければ常に北を指す。
   transition は付けない ── 指の動きに毎フレーム追従するので、遅れて追いかけると針が泳ぐ。 */
.compass__needle {
  transform: rotate(var(--map-rotation, 0deg));
}

/* 「戻る」は PC だけ右上の列に出す（スマホでは検索の帯の左端。下の .map-search__back）。
   PC では左上の「<」が、検索の帯の「戻る」と左のパネルを畳む「<」で二つ並んで紛らわしかった
   （2026-10-21 に指摘）。display: flex がブラウザ既定の [hidden] に勝たないよう、hidden より先に書く */
.control-button--back {
  display: none;
}

@media (min-width: 1024px) {
  .map-controls {
    left: 22rem;
    top: 0; /* PC では検索の帯は左のパネルの上端にあるので、右上はそのまま */
  }

  .control-button--back {
    display: flex;
  }

  /* 検索の帯の左端の「戻る」は PC では出さない（右上の列に移した）。
     検索をやめるのは Esc・「検索する」・欄の外を押す、のどれでもできる。
     .map-search__back の display: flex は下にあるので、親を付けて勝たせる */
  .map-search__row .map-search__back {
    display: none;
  }
}

/* ============================================================
   検索の帯（地図の上部に常に出す。js/map/search-bar.js）
   ------------------------------------------------------------
   [戻る] [検索欄 … (絞り込み)] を1行に置く。「絞り込み」の札は検索欄の中の右端
   （MAP検索の検索欄と同じ形。search-bar.js の冒頭の注）。検索中は下に「検索する」と
   最近の検索を垂らす。2026-10-19 までは検索欄はシートの中にあった
   （シートの中だとスマホでキーボードとぶつかる。shop-sheet.js の冒頭の注）。
   PC では左のパネルの上端に重なる（パネル側が頭を空けている）。
   ============================================================ */
.map-search {
  pointer-events: none; /* 帯の余白の下の地図は触れるように。中身だけ受ける */
  position: absolute;
  inset-inline: 0;
  top: 0;
  z-index: var(--z-overlay); /* シートより上。検索中の垂らしがシートに隠れないように */
  padding: var(--gap-3);
}

.map-search__row {
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: var(--gap-2);
}

/* 丸いボタン（戻る）。地図の上のボタン（.control-button）と同じ見た目 */
.map-search__back {
  position: relative;
  display: flex;
  width: 2.75rem;
  height: 2.75rem;
  touch-action: manipulation; /* 素早く 2 回押してもブラウザがページを拡大しない */
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--color-surface) 95%, transparent);
  color: var(--color-sumi-soft);
  box-shadow: var(--shadow-raise);
  transition: background-color 0.15s, color 0.15s;
}

/* ★ hover の色替えは、カーソルのある端末だけ。スマホでは押した要素に :hover が残り、
   別の所を押すまで色が戻らない（「押したときに色が変わらず、ほかを押したら変わる」
   2026-10-19 に指摘） */
@media (hover: hover) and (pointer: fine) {
  .map-search__back:hover {
    color: var(--color-orange-deep);
  }

  .search-field__filter:hover {
    filter: brightness(0.96);
  }
}

/* 表示の切り替えは hidden 属性で行う（入力欄を差し替えないため）。
   display を持つ要素（flex のボタンや件数）にも必ず効くようにする */
.map-search [hidden] {
  display: none !important;
}

.map-search__back-icon {
  width: 1.25rem;
  height: 1.25rem;
}

/* 検索欄。丸い枠の中に [入力欄の箱] [絞り込みの札] を横に並べる（search-bar.js の注）。
   丸いボタンと同じ浮いた見た目にする。影に加えて薄い枠線も付ける
   （地図の余白が白いので、影だけだと欄の形が分からない。2026-10-19 に指摘） */
.map-search__field {
  display: flex;
  min-width: 0;
  flex: 1;
  height: 2.75rem;
  align-items: center;
  border-radius: var(--radius-pill);
  border: 1px solid var(--color-line-strong);
  background: var(--color-surface);
  padding-right: 0.375rem;
  box-shadow: var(--shadow-raise);
}

/* 入力欄に触れている間は枠を濃くする（枠は箱に付いているので :focus-within で見る） */
.map-search__field:focus-within {
  border-color: var(--color-sumi-soft);
}

.search-field__box {
  position: relative;
  min-width: 0;
  flex: 1;
}

/* 枠・地・影は箱（.map-search__field）が持つので、入力欄そのものは素のまま。
   左右の余白は詰める（PC の左のパネルは幅 22rem で、札のぶん入力欄が狭い） */
.map-search .search-field__input {
  height: 2.625rem;
  border: 0;
  border-radius: var(--radius-pill);
  background: transparent;
  padding: 0 2rem 0 2rem;
}

.map-search .search-field__icon {
  left: 0.75rem;
}

/* base.css の :focus-visible は橙の輪を出す。入力欄はタップで触れただけでも :focus-visible になるので、ここは出さない
   （枠の色替えで足りる。上の :focus-within） */
.map-search .search-field__input:focus-visible {
  outline: none;
}

.map-search .search-field__clear {
  right: 0.25rem;
  width: 1.75rem;
  height: 1.75rem;
}

/* 「絞り込み」の札。検索欄の中の右端。条件が効いている間・開いている間は濃い茶に白文字で件数を添える
   （橙は使わない。検索まわりの橙がうるさい、という指摘。2026-10-19。橙は地図の結果と投票ボタンだけ） */
.search-field__filter {
  display: flex;
  height: 2rem;
  flex-shrink: 0;
  touch-action: manipulation; /* 素早く 2 回押してもブラウザがページを拡大しない */
  align-items: center;
  gap: 0.25rem;
  border-radius: var(--radius-pill);
  background: var(--color-washi-deep);
  padding: 0 0.5rem 0 0.375rem;
  font-size: 0.8125rem;
  font-weight: 700;
  white-space: nowrap;
  color: var(--color-sumi);
  transition: background-color 0.15s, color 0.15s;
}

.search-field__filter.is-active {
  background: var(--color-sumi-soft);
  color: #fff;
}

.search-field__filter-icon {
  width: 1rem;
  height: 1rem;
}

.search-field__filter-count {
  font-variant-numeric: tabular-nums;
}

.search-field__clear-icon {
  width: 1rem;
  height: 1rem;
}

/* 検索中に帯の下へ垂らす箱。長い履歴は中で繰る */
.map-search__panel {
  pointer-events: auto;
  margin-top: var(--gap-2);
  max-height: calc(100dvh - 8rem);
  overflow-y: auto;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-line);
  background: var(--color-surface);
  padding: var(--gap-2);
  box-shadow: var(--shadow-card);
}

.map-search__panel[hidden] {
  display: none;
}

.map-search__go {
  display: flex;
  height: 2.5rem;
  width: 100%;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-pill);
  border: 1px solid var(--color-line-strong);
  background: var(--color-surface);
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--color-sumi);
}

@media (hover: hover) and (pointer: fine) {
  .map-search__go:hover {
    background: var(--color-washi-deep);
  }
}

.map-search__hint {
  padding: var(--gap-4) var(--gap-2);
  text-align: center;
  font-size: var(--text-sm);
  color: var(--color-sumi-faint);
}

.map-search__history-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--gap-3) var(--gap-2) var(--gap-1);
}

.map-search__history-title {
  font-size: var(--text-caption);
  letter-spacing: 0.16em;
  color: var(--color-sumi-soft);
}

.map-search__history-clear {
  font-size: var(--text-sm);
  color: var(--color-sumi-soft);
  text-decoration: underline;
  text-underline-offset: 4px;
}

.map-search__history-item {
  display: flex;
  min-height: 2.75rem;
  width: 100%;
  align-items: center;
  gap: 0.625rem;
  border-radius: var(--radius-md);
  padding: 0 var(--gap-2);
  text-align: left;
}

@media (hover: hover) and (pointer: fine) {
  .map-search__history-item:hover {
    background: var(--color-washi-deep);
  }
}

.map-search__history-icon {
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
  color: var(--color-sumi-faint);
}

/* PC では左のパネル（幅 22rem）の上端に重ねる */
@media (min-width: 1024px) {
  .map-search {
    inset-inline: auto;
    left: 0;
    width: 22rem;
    padding: var(--gap-4) var(--gap-3) 0;
  }
}

/* 投票後の知らせ（js/ui/toast.js。body の直下に出る）。スマホでは下にシートと投票ボタンがあり、
   そこに重なっていたので、検索の帯の下に出す。下の地図・ボタンは押せるままにする（2026-10-28） */
@media (max-width: 1023.98px) {
  body:has(.map-search) .toast {
    pointer-events: none;
    top: calc(2.75rem + var(--gap-3) * 2);
    bottom: auto;
  }
}

/* ============================================================
   ボトムシート
   ------------------------------------------------------------
   PC では左側の常設パネル、スマホでは下から出るシートになる。
   検索欄はここには無く、地図の上部の帯（上の「検索の帯」）に常に出す（2026-10-19〜）。
   ============================================================ */

.sheet {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  z-index: var(--z-sheet);
  display: flex;
  flex-direction: column;
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  border-top: 1px solid var(--color-line);
  /*
   * シートの地だけ、ごく薄いクリーム（2026-10-28。「ボトムシート白すぎるかも」）。一覧の項目（.sheet-item）は
   * 白に近い地なので、白い地のままでは項目と地の境が影だけになっていた。地図の上に重なる検索の帯や
   * 丸いボタンは白のまま（面全体をベージュにして「濁って見えた」2026-10-19 の轍を踏まない）。
   */
  --sheet-bg: #fbf6e4;
  background: var(--sheet-bg);
  box-shadow: var(--shadow-float);
  /* 高さは JS が段(SNAP_HEIGHT)から入れる。
     ★ 高さに transition を掛けないこと。段が変わるときの動きは JS が transform で付ける
     （shop-sheet.js の applyHeight。高さを動かすと中の一覧の配置計算が毎フレーム走って重い）。 */
  will-change: transform;
}

/* 閉じる動きの間、シートは上にずらした状態から下りてくるので、その下に地図が一瞬見える。
   同じ色の板をシートの下に続けて置いて隠す。 */
.sheet::after {
  content: "";
  pointer-events: none;
  position: absolute;
  top: 100%;
  inset-inline: 0;
  height: 100vh;
  background: var(--sheet-bg);
}

/* 表示の切り替えは hidden 属性で行う（要素を差し替えると、検索欄の
   フォーカスが外れる）。display を持つ要素にも必ず効くようにする。 */
.sheet [hidden] {
  display: none !important;
}

/* つまみ。押すだけでも開閉できる（画面下端のスワイプはブラウザの
   操作と重なって掴みにくい）。指で操作する所なので touch-action を
   必ず指定する。縦横とも自分で受けるので none。 */
.sheet__handle {
  display: block;
  width: 100%;
  flex-shrink: 0;
  padding: var(--gap-3) var(--gap-4) var(--gap-2);
  cursor: grab;
  touch-action: none;
}

.sheet__grip {
  display: block;
  margin: 0 auto;
  width: 3rem;
  height: 0.375rem;
  border-radius: var(--radius-pill);
  background: var(--color-line-strong);
}

/* 検索欄まわりの帯。ここも払えば開閉する（押しただけなら地の部分でだけ）。
   縦の払いはこちらで受け取る(pan-x)。横は残す（検索欄の文字を選べるように）。 */
.sheet__head {
  flex-shrink: 0;
  padding: 0 var(--gap-3) var(--gap-2);
  touch-action: pan-x;
}

/* 高さは「絞り込みを解除」の札（2rem）に合わせて固定する。札が出たり消えたりするたびに
   行の高さが変わると、下の一覧がガタッとずれる（2026-10-19 に指摘） */
.sheet__count-row {
  margin-top: 0;
  display: flex;
  min-height: 2rem;
  align-items: center;
  gap: var(--gap-2);
}

.sheet__count {
  min-width: 0;
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  font-size: var(--text-sm);
  color: var(--color-sumi-soft);
}

/* 条件を外して全件に戻す（「絞り込みを解除」）。畳んだ状態(peek)でも見える所に置く。
   枠線だけだと地に沈んで押せる物に見えなかったので、薄く塗る（2026-10-18 に指摘） */
.sheet__show-all {
  display: flex;
  height: 2rem;
  flex-shrink: 0;
  align-items: center;
  gap: 0.375rem;
  border-radius: var(--radius-pill);
  border: 1px solid var(--color-line-strong);
  background: var(--color-washi-deep);
  padding: 0 0.75rem 0 0.5rem;
  font-size: var(--text-sm);
  font-weight: 700;
  white-space: nowrap;
  color: var(--color-sumi);
}

.sheet__show-all-icon {
  width: 1.125rem;
  height: 1.125rem;
  flex-shrink: 0;
}

/* 「近い順」（js/map/shop-sheet.js の nearBtn）。「解除」と同じ形。押している間は絞り込みの札と同じ朱。
   スマホだけ（PC は会場で使う想定ではないので、並び替えは絞り込みのパネルの中だけ） */
.sheet__near {
  display: flex;
  height: 2rem;
  flex-shrink: 0;
  align-items: center;
  gap: 0.25rem;
  border-radius: var(--radius-pill);
  border: 1px solid var(--color-line-strong);
  background: var(--color-washi-deep);
  padding: 0 0.75rem 0 0.5rem;
  font-size: var(--text-sm);
  font-weight: 700;
  white-space: nowrap;
  color: var(--color-sumi);
}

.sheet__near[aria-pressed="true"] {
  border-color: var(--color-orange);
  background: var(--color-orange);
  color: var(--color-on-orange);
}

.sheet__near[hidden] {
  display: none;
}

.sheet__near-icon {
  width: 1.125rem;
  height: 1.125rem;
  flex-shrink: 0;
}

@media (min-width: 1024px) {
  .sheet__near {
    display: none;
  }
}
/* 「一覧へ戻る」。詳細を開いている間だけ、検索欄と同じ場所に出す。
   本文ではなく上端に固定するのは、読み進めると本文ごと流れて
   消えてしまうため。右には今見ている店の場所を添える。 */
.sheet__back-row {
  display: flex;
  align-items: center;
  gap: var(--gap-2);
}

/* 灰色の枠に文字の「‹」では戻るボタンに見えなかった（2026-10-18 に指摘）。
   矢印の絵柄を付け、橙の太字で「押せば一覧に戻る」と分かるようにする */
.sheet__back {
  display: flex;
  height: 2.75rem;
  flex-shrink: 0;
  align-items: center;
  gap: 0.375rem;
  border-radius: var(--radius-pill);
  border: 1px solid var(--color-line-strong);
  background: var(--color-washi-deep);
  padding: 0 var(--gap-4) 0 var(--gap-3);
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--color-sumi);
}

.sheet__back-icon {
  width: 1.25rem;
  height: 1.25rem;
  flex-shrink: 0;
}

.sheet__back-place {
  min-width: 0;
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: right;
  font-size: var(--text-sm);
  color: var(--color-sumi-faint);
}

/* 一覧と詳細を入れる箱。**同じ箱**なのでスクロール位置が残る
   ── 切り替えたら明示的に戻すこと（js 側で行う）。
   縦のスクロールは sheet-snap が touchmove で見ているので、
   ここで touch-action を切らない（切ると一覧が読めなくなる）。 */
.sheet__body {
  min-height: 0;
  flex: 1;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 0 var(--gap-3) var(--gap-4);
}

/* --- 一覧 ---
   1件＝1枚のカード。左に広報用画像の正方形、右に 店名（2行まで）・品目・場所。
   MAP検索の一覧カード（search/map/map.css の .project-list-item）と同じ並びで、色はこの画面のもの。
   2026-10-19 までは枠の無い文字の行（店名と「品目・場所」の2行）で、区切りが分かりにくかった。 */
.sheet-list {
  display: flex;
  flex-direction: column;
  gap: var(--gap-2);
  padding-top: var(--gap-1);
}

.sheet-item {
  display: flex;
  width: 100%;
  align-items: center;
  gap: var(--gap-3);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  background: #fff;
  box-shadow: var(--shadow-raise);
  padding: var(--gap-2);
  text-align: left;
  /*
   * 画面に入っていない項目は配置計算を省く。
   * シートは高さを変えて開閉する（0.3s の transition と、つまみを引いている間の追従）ので、
   * その間ずっと一覧 88 件の配置計算が毎フレーム走る。見えている数件だけにして軽くする
   * （シートの操作が重い、という指摘への対応。2026-10-19）。
   * 高さの見込み（contain-intrinsic-size）は1件ぶん（画像 4rem + 上下の余白 0.5rem×2 + 枠 = 82px）。
   */
  content-visibility: auto;
  contain-intrinsic-size: auto 82px;
}

.sheet-item:active {
  background: var(--color-washi);
}

@media (hover: hover) and (pointer: fine) {
  .sheet-item:hover {
    border-color: var(--color-line-strong);
    background: var(--color-washi);
  }
}

/* 広報用画像の正方形（shop-sheet.js の thumbEl）。正方形の絵なので cover でも切れない */
.sheet-thumb {
  display: block;
  flex-shrink: 0;
  overflow: hidden;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-sm);
  background: #fff;
}

.sheet-thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.sheet-thumb--list {
  width: 4rem;
  height: 4rem;
}

.sheet-thumb--detail {
  width: 5.5rem;
  height: 5.5rem;
}

.sheet-item__body {
  display: flex;
  min-width: 0;
  flex: 1;
  flex-direction: column;
  gap: 0.125rem;
}

/* 店名は 1 行で、入りきらなければ「…」（2026-10-21。2 行にして行の高さがそろわないより
   1 行で切るほうがよい、と言われた。それまでは「似た名前の店と見分けられない」として 2 行まで）。
   全文は詳細で読める */
.sheet-item__name {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: var(--font-display);
  font-size: var(--text-base);
  font-weight: 700;
  line-height: 1.3;
}

.sheet-item__food,
.sheet-item__place {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--text-sm);
  line-height: 1.35;
}

/* 品目は詳細（.sheet-detail__item）と同じ濃い橙。何を売っている店かが先に目に入るように */
.sheet-item__food {
  color: var(--color-orange-deep);
}

.sheet-item__place {
  color: var(--color-sumi-faint);
}

/* 近い順のときに場所の行の頭に付く距離（js/map/sheet-content.js の walkPrefix）。場所より濃く */
.sheet-item__walk {
  font-weight: 700;
  color: var(--color-sumi);
}

/* 評価は「★4.3」の文字だけ。星の絵を88行ぶん並べると騒がしい。上端（店名の行）にそろえる */
.sheet-item__rating {
  flex-shrink: 0;
  align-self: flex-start;
  font-size: var(--text-sm);
  color: var(--color-sumi-soft);
}

/* 施設の一覧（検索語にトイレ・休憩所などが当たったとき。shop-sheet.js の facilityListEl）。
   店の行（.sheet-item）と同じ箱で、左の正方形の代わりに施設の絵を置く */
.sheet-item__facility-icon {
  display: flex;
  width: 2.5rem;
  height: 2.5rem;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: #fff;
  border: 1px solid var(--color-line);
}

.sheet-item__facility-icon img {
  width: 1.25rem;
  height: 1.25rem;
}

/* 施設と模擬店の両方が当たったときの、模擬店側の小見出し */
.sheet-subhead {
  margin: var(--gap-3) 0 0;
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--color-sumi-soft);
}

.sheet-empty {
  padding: var(--gap-6) var(--gap-2);
  text-align: center;
  font-size: var(--text-sm);
  color: var(--color-sumi-soft);
}

/* --- 絞り込みのパネル（js/map/filter-panel.js） ---
   画面を覆って出す。スマホは画面いっぱいのシート（MAP検索の #genre-panel と同じ）、
   PC は検索の帯の下に垂らす箱（下の @media）。外側の暗い地を押すと閉じる。
   2026-10-19 までは一覧のシートの中身を入れ替えて出していた。 */
.filter-dialog {
  position: absolute;
  inset: 0;
  z-index: var(--z-modal);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  background: rgba(74, 53, 32, 0.42);
}

.filter-dialog[hidden] {
  display: none;
}

.filter-dialog__sheet {
  display: flex;
  width: 100%;
  height: 100%;
  flex-direction: column;
  overflow: hidden;
  background: var(--color-surface);
}

.filter-dialog__head {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--color-line);
  padding: var(--gap-2) var(--gap-2) var(--gap-2) var(--gap-4);
}

.filter-dialog__title {
  font-family: var(--font-display);
  font-size: var(--text-base);
  font-weight: 700;
}

.filter-dialog__close {
  display: flex;
  width: 2.75rem;
  height: 2.75rem;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-pill);
  color: var(--color-sumi-soft);
}

.filter-dialog__close-icon {
  width: 1.25rem;
  height: 1.25rem;
}

.filter-dialog__body {
  display: flex;
  min-height: 0;
  flex: 1;
  flex-direction: column;
  padding: var(--gap-3) var(--gap-4) calc(var(--gap-3) + env(safe-area-inset-bottom, 0px));
}

.filter-panel {
  display: flex;
  min-height: 0;
  flex: 1;
  flex-direction: column;
}

.filter-panel__scroll {
  min-height: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--gap-5);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 0 var(--gap-1) var(--gap-3);
}

@media (min-width: 1024px) {
  /* PC は検索の帯の下に垂らす箱。帯は左のパネルの上端に重なっている（.sheet__head の padding-top） */
  .filter-dialog {
    align-items: flex-start;
    justify-content: flex-start;
  }

  /* 横幅はたっぷり取る。品目 13 個が 2 行に収まり、場所・部門・並び替えを合わせても
     ふつうの画面の高さに入るので、PC では繰らずに全部見える（「PC で絞り込みをスクロール
     させる意味は無い」2026-10-19 に指摘）。max-height は低い画面の保険 */
  .filter-dialog__sheet {
    width: min(46rem, calc(100vw - var(--gap-3) * 2));
    height: auto;
    max-height: calc(100dvh - 2.75rem - var(--gap-3) * 4);
    margin: calc(2.75rem + var(--gap-3) * 2) 0 0 var(--gap-3);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-float);
  }

  /* 品目は1行目いっぱい、場所・部門・並び替えは横に並べて高さを詰める（低い画面でも繰らずに済むように） */
  .filter-dialog .filter-panel__scroll {
    flex-direction: row;
    flex-wrap: wrap;
    gap: var(--gap-4) var(--gap-6);
  }

  .filter-dialog .filter-group {
    flex: 0 1 auto;
  }

  .filter-dialog .filter-group:first-child {
    flex-basis: 100%;
  }
}

/* --- 地図の上の案内（ガラポン・使い方。js/map/info-dialog.js） ---
   骨組みは絞り込みのパネルと同じ（.filter-dialog__*）。スマホは下から出る板で、高さは中身ぴったり
   （画面いっぱいにはしない）。PC は画面の真ん中の箱。 */
.info-dialog .filter-dialog__sheet {
  height: auto;
  max-height: 88dvh;
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
}

.info-dialog .filter-dialog__sheet:focus {
  outline: none;
}

.info-dialog__body {
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: var(--gap-4) var(--gap-4) calc(var(--gap-4) + env(safe-area-inset-bottom, 0px));
  font-size: var(--text-sm);
  line-height: 1.75;
  color: var(--color-sumi);
}

@media (min-width: 1024px) {
  .info-dialog.filter-dialog {
    align-items: center;
    justify-content: center;
  }

  .info-dialog .filter-dialog__sheet {
    width: min(30rem, calc(100vw - var(--gap-3) * 2));
    margin: 0;
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-float);
  }
}

.info-dialog__lead {
  margin-bottom: var(--gap-3);
}

/* ガラポンまでの残り（「いま 1 店に投票済み・あと 2 店」） */
.info-dialog__progress {
  margin-bottom: var(--gap-4);
  border-radius: var(--radius-md);
  background: #fbf6e4;
  padding: var(--gap-2) var(--gap-3);
  font-weight: 700;
}

.info-dialog__progress strong {
  font-size: 1.125rem;
  color: var(--color-orange);
}

.info-dialog__actions {
  display: flex;
  flex-direction: column;
  gap: var(--gap-2);
}

.info-dialog__button {
  display: flex;
  height: 2.75rem;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-line-strong);
  background: #fff;
  font-weight: 700;
  color: var(--color-sumi);
  text-decoration: none;
}

.info-dialog__button--primary {
  border-color: var(--color-orange);
  background: var(--color-orange);
  color: #fff;
}

@media (hover: hover) and (pointer: fine) {
  .info-dialog__button:hover {
    background: var(--color-washi-deep);
  }

  .info-dialog__button--primary:hover {
    background: var(--color-orange-strong);
  }
}

/* 使い方の項目（絵＋説明の行） */
.help-list {
  display: flex;
  flex-direction: column;
  gap: var(--gap-3);
  margin-bottom: var(--gap-4);
}

.help-list__item {
  display: flex;
  align-items: flex-start;
  gap: var(--gap-3);
}

.help-list__mark {
  display: flex;
  flex-shrink: 0;
  width: 2rem;
  height: 2rem;
  align-items: center;
  justify-content: center;
}

.help-list__title {
  display: block;
  font-weight: 700;
}

/* ピンの絵柄の凡例。ピン（.shop-pin__dot）と同じ朱の丸に白い絵 */
.help-legend {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(6.5rem, 1fr));
  gap: var(--gap-2);
  margin: var(--gap-1) 0 var(--gap-4);
}

.help-legend__item {
  display: flex;
  align-items: center;
  gap: var(--gap-2);
  font-weight: 700;
}

.help-legend__dot {
  display: flex;
  width: 1.5rem;
  height: 1.5rem;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  border: 2px solid #fff;
  background: var(--color-orange);
  color: #fff;
  box-shadow: 0 1px 3px rgba(90, 52, 12, 0.35);
}

.help-legend__dot.is-voted {
  background: var(--color-kincha);
}

/* 「エリアを押す」の絵。大分類の札の件数の丸と同じ形 */
.help-area-sample {
  display: flex;
  min-width: 1.75rem;
  height: 1.5rem;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-pill);
  border: 2px solid #d9c7a0;
  background: #f1e6c9;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.help-legend__dot .pin-icon {
  width: 0.875rem;
  height: 0.875rem;
}

.help-subhead {
  margin: var(--gap-2) 0 0;
  font-family: var(--font-display);
  font-weight: 700;
}

/* 絞り込みの品目のボタンに添える絵（ピンと同じ絵。js/map/filter-panel.js） */
.chip__icon {
  display: inline-flex;
  margin-right: 0.25rem;
}

.chip__icon .pin-icon {
  width: 0.875rem;
  height: 0.875rem;
}

.filter-group__head {
  display: flex;
  align-items: baseline;
  gap: var(--gap-2);
}

.filter-group__note {
  font-size: var(--text-caption);
  color: var(--color-sumi-faint);
}

/* 絞り込みのパネルではチップを一段低くする（スマホで品目13個を4行に収めるため）。検索ページは 44px のまま。 */
.filter-dialog .chip {
  height: 2.5rem;
}

/* 「エリアAのみ」などの但し書き。橙の地の上に出るので、
   薄い茶ではなく橙の上の文字色を薄めたものにする */
.chip__detail {
  margin-left: var(--gap-1);
  font-size: var(--text-caption);
  color: color-mix(in srgb, var(--color-on-orange) 75%, transparent);
}

.filter-panel__foot {
  display: flex;
  flex-shrink: 0;
  gap: var(--gap-2);
  border-top: 1px solid var(--color-line);
  padding-top: var(--gap-3);
}

.filter-panel__clear {
  display: flex;
  height: 2.75rem;
  align-items: center;
  border-radius: var(--radius-pill);
  border: 1px solid var(--color-line-strong);
  padding: 0 var(--gap-4);
  font-size: var(--text-sm);
}

.filter-panel__done {
  display: flex;
  height: 2.75rem;
  flex: 1;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-pill);
  background: var(--color-orange);
  font-size: var(--text-sm);
  color: var(--color-on-orange);
}

.filter-panel__done-label {
  margin-left: var(--gap-1);
}

/* --- 企画詳細（シートの中） --- */
.sheet-detail {
  padding: 0 var(--gap-1);
}

/* 画像（左）と 店名・品目・団体（右）。一覧のカードと同じ並び */
.sheet-detail__head {
  display: flex;
  align-items: flex-start;
  gap: var(--gap-3);
}

.sheet-detail__heading {
  min-width: 0;
  flex: 1;
}

.sheet-detail__name {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 700;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.sheet-detail__item {
  margin-top: var(--gap-1);
  font-size: var(--text-base);
  color: var(--color-orange-deep);
}

.sheet-detail__circle {
  margin-top: 0.125rem;
  font-size: var(--text-sm);
  color: var(--color-sumi-soft);
}

.sheet-detail__rating {
  margin-top: var(--gap-3);
}

/* 「徒歩◯分」は場所の右に添える（600m 以内のときだけ出る） */
.sheet-detail__walk {
  margin-left: var(--gap-2);
  color: var(--color-sumi-soft);
}

/* 投票ボタンはシートの下に固定する。
   この画面は投票してもらうためのものなのに、投票が本文のいちばん下
   （実測 2.4画面ぶん下）にあった。 */
.sheet__foot {
  flex-shrink: 0;
  border-top: 1px solid var(--color-line);
  padding: var(--gap-3);
}

/* 見た目は search.css の .btn-cast（投票のボタン）。ここは幅だけ */
.sheet__vote {
  width: 100%;
}

/* 店名の帯（畳んだ段でだけ出す。下の .is-peek-shop） */
.sheet__foot-name {
  display: none;
}

/*
 * 店を選んだまま一番下の段に下げたとき（js/map/shop-sheet.js の paintPeek。スマホだけ）。
 * 段の高さ 8.5rem に「一覧へ戻る」の行と幅いっぱいの投票ボタンが収まらず、ボタンの下が切れていたので、
 * 「店名・場所 ＋ 投票ボタン」の 1 行にする（2026-10-28）。帯を押すか上へ払うと開いて、詳細と「一覧へ戻る」が出る。
 */
@media (max-width: 1023.98px) {
  .sheet.is-peek-shop .sheet__head,
  .sheet.is-peek-shop .sheet__body {
    display: none;
  }

  .sheet.is-peek-shop .sheet__foot {
    display: flex;
    flex: 1;
    align-items: center;
    gap: var(--gap-3);
    border-top: 0;
    padding: 0 var(--gap-4) var(--gap-3);
    cursor: pointer;
    touch-action: none;
  }

  .sheet.is-peek-shop .sheet__foot-name {
    display: block;
    min-width: 0;
    flex: 1;
  }

  .sheet__foot-shop,
  .sheet__foot-place {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  .sheet__foot-shop {
    font-size: var(--text-base);
    font-weight: 900;
    line-height: 1.4;
    color: var(--ink);
  }

  .sheet__foot-place {
    font-size: var(--text-caption);
    color: var(--ink-soft);
  }

  .sheet.is-peek-shop .sheet__vote {
    width: auto;
    flex: none;
    padding: 0 var(--gap-4);
  }

  /* 帯では短く（「投票する」「評価を変える」）。今の星の札は開くと見える */
  .sheet.is-peek-shop .sheet__vote-pre,
  .sheet.is-peek-shop .btn-cast__mine {
    display: none;
  }
}

/* PC では左に寄せた常設パネルにする */
@media (min-width: 1024px) {
  .sheet {
    inset-inline: auto;
    left: 0;
    top: 0;
    bottom: 0;
    width: 22rem;
    height: auto !important;
    border-radius: 0;
    border-top: 0;
    border-right: 1px solid var(--color-line);
    /* !important は js/map/sheet-height.js がシートに書くインラインの transition（none / transform）に
       勝たせるため。無いと幅が一瞬で変わり、0.3s で動く開閉ボタン（.sheet-toggle）だけが遅れて
       パネルから離れて見えた（2026-10-30）。PC は高さが固定なので transform の滑りは要らない。 */
    transition: width 0.3s cubic-bezier(0, 0, 0.2, 1) !important;
  }

  /* 畳んだときは幅0。**開き直すボタンはこの中に置かないこと**
     ── 一緒に切り取られて二度と開けなくなる（PORTING.md 5-6）。 */
  .sheet.is-collapsed {
    width: 0;
    overflow: hidden;
    border-right: 0;
  }

  .sheet__handle {
    display: none;
  }

  /* 上端には検索の帯（.map-search）が重なるので、そのぶん空ける */
  .sheet__head {
    padding-top: calc(var(--gap-4) + 2.75rem + var(--gap-3));
  }

  /* 畳む／開くボタンはパネルの**外**、右端の縦中央に置く */
  .sheet-toggle {
    position: absolute;
    top: 50%;
    left: 22rem;
    z-index: var(--z-sheet);
    display: flex;
    width: 1.75rem;
    height: 4rem;
    transform: translateY(-50%);
    align-items: center;
    justify-content: center;
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
    border: 1px solid var(--color-line-strong);
    border-left: 0;
    /*
     * 白地で目立たせない。PC ではパネルを閉じることは少なく、いつも出っ張っている物なので、操作の
     * じゃまにならないほうがよい（赤地・山吹の地・パネルと同じクリームも試して、白に決めた。2026-10-30）。
     * 矢印は文字（‹）だと細くて見えにくいので、太い線画にしてある。
     */
    background: #fff;
    color: var(--color-sumi-soft);
    box-shadow: var(--shadow-card);
    transition: left 0.3s cubic-bezier(0, 0, 0.2, 1);
  }

  .sheet-toggle__icon {
    width: 1.125rem;
    height: 1.125rem;
    stroke-width: 2.75;
  }

  .sheet-toggle.is-collapsed {
    left: 0;
  }

  .sheet-toggle.is-collapsed .sheet-toggle__icon {
    transform: scaleX(-1);
  }

  @media (hover: hover) and (pointer: fine) {
    .sheet-toggle:hover {
      color: var(--color-sumi);
    }
  }
}

@media (max-width: 1023px) {
  .sheet-toggle {
    display: none;
  }
}

/* 関連企画（js/ui/shop-detail-body.js）。MAP では一覧の項目（.sheet-item）と同じ白いカードにする
   （シートの地が薄いクリームなので、地のままだと押せる物に見えない。2026-10-28） */
.map-page .related-item {
  border: 1px solid var(--color-line);
  background: #fff;
  box-shadow: var(--shadow-raise);
  padding: var(--gap-2);
}