/* 検索ページ（search.php）と、店カード・詳細/投票ダイアログ。
   ★ チップ・検索欄・ダイアログ・トースト・企画詳細の中身は MAP も使う（map.php は search.css を読む）。
     それらの基本はここに置いたまま、新しいページの見た目は css/theme.css が .themed 付きで上書きする。
     カード・絞り込みの引き出し・結果の行はこのページだけのもので、ここに書く（2026-10-24 に作り直し）。 */

.search-main {
  margin: 0 auto;
  max-width: var(--container);
  padding: var(--gap-5) var(--gap-4) var(--gap-12);
  width: 100%;
}

/* 見出し（模擬店を探す）は置かない。縦を使うぶん結果が下がる。何のページかはナビで分かる */
.search-layout {
  display: block;
}

.search-aside__inner {
  position: static;
}

/* --- 絞り込みの引き出し ---
   スマホでは「絞り込み」ボタン（.filter-open。結果の行にある）で下から出るシート。
   PC（1024px〜）では同じ DOM を左の欄にそのまま置く（下の media）。
   開閉は js/search.js の setupFilterDrawer()（.is-open の付け外しと body のスクロール止め）。 */
.filter-drawer {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  display: none;
}

.filter-drawer.is-open {
  display: block;
}

.filter-drawer__backdrop {
  position: absolute;
  inset: 0;
  background: color-mix(in srgb, var(--ink) 50%, transparent);
}

.filter-drawer__sheet {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  display: flex;
  max-height: 88dvh;
  flex-direction: column;
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  background: var(--cream-100);
  padding: var(--gap-5) var(--gap-5) 0;
  outline: none;
  animation: sheet-up 0.3s var(--ease-out);
}

@keyframes sheet-up {
  from { transform: translateY(2rem); opacity: 0; }
  to { transform: none; opacity: 1; }
}

/* 「すべて解除」と選んだ数の丸は、出し入れで行の高さ・幅が変わらないように場所を取ったまま隠す
   （隠すとき display: none にすると行が 32px→44px になり、下の選択肢が全部ずれていた。2026-10-24） */
.filter-head {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  gap: var(--gap-3);
  min-height: 2.75rem;
}

.filter-head__label {
  font-size: var(--text-xl);
  font-weight: 900;
  color: var(--ink);
}

/* 選んでいる数。深い橙の丸にクリームの字（ボタンと同じ組み合わせ） */
.filter-head__count {
  display: inline-flex;
  min-width: 1.5rem;
  height: 1.5rem;
  align-items: center;
  justify-content: center;
  margin-left: 0.5rem;
  border-radius: var(--radius-pill);
  background: var(--ink); /* 「選んでいる数」なので選択状態の色（12px の字は深い橙だと 4.0 で足りない） */
  font-size: var(--text-caption);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  vertical-align: 0.3em;
  color: var(--cream-50);
  padding-bottom: 0.17em; /* 数字の形を丸の真ん中に（字体のつくりで 0.086em 下に寄る。2026-10-27） */
}

.filter-head__count[hidden] {
  display: inline-flex;
  visibility: hidden;
}

.filter-head__reset {
  margin-left: auto;
  min-height: 2.75rem;
  padding: 0 0.5rem;
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--ink-soft);
  text-decoration: underline;
  text-underline-offset: 4px;
}

@media (hover: hover) and (pointer: fine) {
  .filter-head__reset:hover {
    color: var(--ink);
  }
}

.filter-head__reset[hidden] {
  display: inline-flex;
  visibility: hidden;
}

.filter-drawer__close {
  display: flex;
  width: 2.5rem;
  height: 2.5rem;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-pill);
  background: var(--cream-50);
  font-weight: 700;
  color: var(--ink);
}

.filter-groups {
  margin-top: var(--gap-4);
  display: flex;
  min-height: 0;
  flex-direction: column;
  gap: var(--gap-5);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-bottom: var(--gap-3);
}

.filter-drawer__foot {
  flex-shrink: 0;
  padding: var(--gap-3) 0 calc(var(--gap-4) + env(safe-area-inset-bottom, 0px));
}

.filter-drawer__apply {
  width: 100%;
}

.filter-group {
  border: none;
  padding: 0;
  margin: 0;
}

.filter-group__legend {
  font-size: var(--text-caption);
  letter-spacing: 0.16em;
  color: var(--color-sumi-soft);
  padding: 0;
}

.filter-group__options {
  margin-top: var(--gap-2);
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
}

/* 指で押せる高さ(44px)を確保する。
   学祭では歩きながら片手で操作されるため。 */
.chip {
  display: flex;
  height: 2.75rem;
  align-items: center;
  border-radius: var(--radius-pill);
  border: 1px solid var(--color-line-strong);
  padding: 0 0.875rem;
  font-size: var(--text-sm);
  transition: border-color 0.15s, background-color 0.15s, color 0.15s;
}

/* ★ :hover の色替えは、このファイル全体でカーソルのある端末だけに限る（@media (hover: hover)）。
   スマホでは押した要素に :hover が残り、別の所を押すまで外れない。このチップは :hover の
   文字色（濃い橙）が選んだ状態（橙の地に白文字）より強いので、選んだ瞬間に橙の上に濃い橙の
   文字が乗って読めなかった（2026-10-19 に指摘。map.css・base.css も同じ扱い） */
@media (hover: hover) and (pointer: fine) {
  /* 選んだチップには掛けない（PC でも、カーソルを載せた間だけ橙の上に濃い橙の文字になる） */
  .chip:hover:not(:disabled):not([aria-pressed="true"]) {
    border-color: var(--color-orange);
    color: var(--color-orange-deep);
  }
}

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

/* 選んでいないのに0件なら、押しても結果が消えるだけなので無効にする */
.chip:disabled {
  cursor: not-allowed;
  border-color: var(--color-line);
  color: var(--color-sumi-faint);
}

/* 件数の欄は 2 桁ぶんの幅に固定する。条件を変えて桁数が変わるたびにチップの幅が変わり、
   隣のチップの位置がずれていた（2026-10-19 に指摘）。件数は最大 96 件で 2 桁に収まる */
.chip__count {
  display: inline-block;
  min-width: 2ch;
  font-variant-numeric: tabular-nums;
  margin-left: 0.375rem;
  font-size: var(--text-caption);
  text-align: left;
  color: var(--color-sumi-faint);
}

.chip[aria-pressed="true"] .chip__count {
  color: color-mix(in srgb, var(--color-on-orange) 75%, transparent);
}

/* --- 検索欄 --- */
.search-field {
  position: relative;
}

/* type="search" にすると Chrome が独自の余白とクリアボタンを
   付けるため、こちらの padding と二重になって文字が右にずれる。
   type="text" にして、アイコンとクリアは自前で置く。 */
.search-field__input {
  height: 2.75rem;
  width: 100%;
  border-radius: var(--radius-xl);
  border: 1px solid var(--color-line-strong);
  background: var(--color-surface);
  padding: 0 2.5rem 0 2.25rem;
  /* ★ 16px を下回らせないこと。iPhone の Safari は 16px 未満の入力欄にフォーカスすると、
     そこへページごと拡大する（検索欄の中の「絞り込み」を押そうとして拡大された。2026-10-21）。
     --text-base は狭い画面で 15px になる */
  font-size: max(var(--text-base), 16px);
  color: inherit;
}

.search-field__input::placeholder {
  color: var(--color-sumi-faint);
}

.search-field__input:focus {
  border-color: var(--color-orange);
}

.search-field__icon {
  pointer-events: none;
  position: absolute;
  top: 50%;
  left: 0.75rem;
  width: 1rem;
  height: 1rem;
  transform: translateY(-50%);
  color: var(--color-sumi-faint);
}

.search-field__clear {
  position: absolute;
  top: 50%;
  right: 0.625rem;
  display: flex;
  width: 1.5rem;
  height: 1.5rem;
  transform: translateY(-50%);
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  color: var(--color-sumi-faint);
}

@media (hover: hover) and (pointer: fine) {
  .search-field__clear:hover {
    background: var(--color-washi-deep);
    color: var(--color-sumi);
  }
}

/* 過去に検索したことばの候補。履歴は端末内(localStorage)だけに置く
   ── 何を検索したかをサーバーに送る必要はない。 */
.search-history {
  position: absolute;
  inset-inline: 0;
  top: 100%;
  z-index: var(--z-overlay);
  margin-top: 0.375rem;
  overflow: hidden;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-line);
  background: var(--color-surface);
  box-shadow: var(--shadow-card);
}

.search-history__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--gap-2) var(--gap-3) var(--gap-1);
  font-size: var(--text-caption);
  color: var(--color-sumi-faint);
}

.search-history__clear {
  text-decoration: underline;
  text-underline-offset: 2px;
}

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

.search-history__item {
  width: 100%;
  padding: var(--gap-2) var(--gap-3);
  text-align: left;
  font-size: var(--text-sm);
}

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

/* --- 結果 ------------------------------------------------------------ */

.search-results {
  margin-top: var(--gap-5);
  min-width: 0;
  flex: 1;
  scroll-margin-top: 5rem;
}

/* 件数 ／ 絞り込み（スマホだけ） ／ 並べ替え */
/* 一覧（#results）は JS が組み立てる（search.php の注）。JS が動く前は空なので、そのままだと
   最初の 1 コマだけフッターの協賛の絵が上がってきて一瞬映る（2026-10-24 夜に指摘。スマホで目立つ）。
   空の間は画面 1 つ分の高さを確保して、フッターを下に押しておく。中身が入れば自然に外れる */
#results:empty {
  min-height: 100dvh;
}

.results-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--gap-3);
}

/* 左＝件数。右の道具（MAP・絞り込み）とは margin で離す */
.results-bar__count {
  margin-right: auto;
  display: flex;
  align-items: baseline;
  gap: 0.25rem;
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--ink-soft);
}

.results-bar__num {
  font-size: var(--text-xl);
  font-weight: 900;
  line-height: 1;
  color: var(--ink);
  /* 大きな数字は「店」の下端より 0.8〜1.5px 浮いて見えたので下げる（2026-10-27。home.css の .hero__facts .num と同じ理由） */
  position: relative;
  top: 0.045em;
}

.results-bar__total {
  margin-left: 0.25rem;
  font-weight: 500;
  color: var(--ink-soft);
}

/* 右＝MAP・絞り込み（右下の固定の板 .tool-float と同じ並び） */
.results-bar__tools {
  display: flex;
  align-items: center;
  gap: var(--gap-2);
}

.filter-open {
  position: relative;
  gap: 0.375rem;
}

.filter-open svg {
  width: 1rem;
  height: 1rem;
}

/* 効いている条件の数。ボタンの右上に重ねる（字の右に並べると、無いときも場所が空いて
   「右に何かある」ように見えた。2026-10-24 夜）。重ねるので、出ても消えてもボタンの幅は変わらない */
.filter-open__count {
  position: absolute;
  top: -0.45rem;
  right: -0.45rem;
  display: inline-flex;
  min-width: 1.375rem;
  height: 1.375rem;
  padding: 0 0.3rem 0.17em; /* 下の詰めは数字の形を丸の真ん中に（字体のつくりで 0.086em 下に寄る。2026-10-27） */
  align-items: center;
  justify-content: center;
  border: 2px solid var(--cream-100);
  border-radius: var(--radius-pill);
  background: var(--ink);
  font-size: var(--text-caption);
  line-height: 1;
  color: var(--cream-50);
}

/* 「絞り込み」ボタンの数の丸も場所を取ったまま隠す（ボタンの幅が変わって隣がずれないように） */
.filter-open__count[hidden] {
  display: none;
}

/* 「MAPで見る」（結果の行の右。常に出す。今の条件を持ってマップへ。js/search.js の mapHrefFor）。
   スマホは「件数＋マップ＋絞り込み」が 390px の 1 行に入るように詰めを小さく（実測。640px〜で既定に戻す） */
.results-bar__map {
  gap: 0.375rem;
  padding: 0 0.625rem;
  white-space: nowrap;
}

@media (min-width: 640px) {
  .results-bar__map {
    padding: 0 1rem;
  }
}

.results-bar__map .icon {
  width: 1rem;
  height: 1rem;
}

/* スマホでは「絞り込み」の隣に入るように字を短く「MAP」。640px〜は「MAPで見る」 */
.results-bar__map-long {
  display: none;
}

@media (min-width: 640px) {
  .results-bar__map-short {
    display: none;
  }
  .results-bar__map-long {
    display: inline;
  }
}

/* --- 右下に固定する「MAP」「絞り込み」（search.php の .tool-float。js/search.js の setupToolFloat） ---
   トップなどの投票の浮きボタン（css/theme.css の .vote-float）と同じ位置・高さ。このページには投票の浮きボタンが無い。
   2 つのボタンを 1 枚の板に入れ、間に細い線。字は焦げ茶（主の操作ではないので橙にしない） */
.tool-float {
  position: fixed;
  right: max(1rem, env(safe-area-inset-right, 0px));
  bottom: max(1rem, env(safe-area-inset-bottom, 0px));
  z-index: var(--z-sticky);
  display: flex;
  border-radius: var(--radius-pill);
  background: var(--cream-50);
  box-shadow: var(--shadow-float);
  transition: transform 0.2s var(--ease-out), opacity 0.2s;
}

.tool-float.is-hidden {
  opacity: 0;
  transform: translateY(0.75rem);
  pointer-events: none;
}

.tool-float__btn {
  position: relative;
  display: inline-flex;
  min-height: 3.25rem;
  align-items: center;
  gap: 0.375rem;
  padding: 0 1.125rem;
  font-size: var(--text-base);
  font-weight: 700;
  white-space: nowrap;
  color: var(--ink);
}

.tool-float__btn + .tool-float__btn::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.875rem;
  bottom: 0.875rem;
  width: 1px;
  background: var(--line-strong);
}

.tool-float__btn .icon,
.tool-float__btn svg {
  width: 1.125rem;
  height: 1.125rem;
}

.tool-float__btn .icon {
  position: relative;
  top: 0.055em;
}

/* 数の丸は「絞り込み」の右上に重ねる（結果の行の .filter-open__count と同じ） */
.tool-float__filter .filter-open__count {
  top: 0.125rem;
  right: 0.25rem;
}

.tool-float__map-long {
  display: none;
}

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

@media (min-width: 640px) {
  .tool-float {
    right: 1.5rem;
    bottom: 1.5rem;
  }
  .tool-float__btn {
    min-height: 3.5rem;
  }
}

/* PC は絞り込みが左の欄に出ているので、マップだけ */
@media (min-width: 1024px) {
  .tool-float__filter {
    display: none;
  }
  .tool-float__map-short {
    display: none;
  }
  .tool-float__map-long {
    display: inline;
  }
}

/* 並べ替えの板は 2 行目にまるごと（1024px〜は 1 行に収まるので折らない。
   1024px〜は「絞り込み」が左の欄に行くので、1 行目は「件数 ……… 並べ替え MAPで見る」。
   MAP を右端に置くのは、右下の固定の板と同じ側にするため） */
@media (max-width: 1023px) {
  .sort-buttons {
    flex-basis: 100%;
  }
}

@media (min-width: 1024px) {
  .results-bar__tools {
    order: 1;
  }
}

/* 360px では「96店 ／ 全96店」＋マップ＋絞り込みが 1 行に入らないので、「／ 全N店」を省く（件数だけ残す。実測） */
@media (max-width: 379px) {
  .results-bar__total {
    display: none;
  }
}


/* 並べ替え。1 つの板を割った切り替え（選んだ側が焦げ茶）。4 つ入らない幅では横に流す */
.sort-buttons {
  display: flex;
  max-width: 100%;
  gap: 0.25rem;
  overflow-x: auto;
  border-radius: var(--radius-pill);
  background: var(--cream-50);
  padding: 0.25rem;
  scrollbar-width: none;
}

.sort-buttons::-webkit-scrollbar {
  display: none;
}

.sort-button {
  flex-shrink: 0;
  white-space: nowrap;
}

/* スマホでは 4 つが 1 行に収まる大きさ（13px・左右 10px）。切れて横に流すより全部見えるほうがよい */
@media (max-width: 639px) {
  .sort-buttons .sort-button {
    padding: 0 0.625rem;
    font-size: 0.8125rem;
  }
}


.sort-button {
  display: flex;
  height: 2.5rem;
  align-items: center;
  border-radius: var(--radius-pill);
  padding: 0 0.75rem;
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--ink-soft);
  transition: background-color 0.15s, color 0.15s;
}

@media (hover: hover) and (pointer: fine) {
  .sort-button:hover:not([aria-pressed="true"]) {
    color: var(--ink);
  }
}

.sort-button[aria-pressed="true"] {
  background: var(--ink);
  color: var(--cream-50);
}

/* いま効いている条件の札（js/search.js の paintConditions）。焦げ茶の面＝選んでいる状態の色 */
.conditions {
  margin-top: var(--gap-3);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.375rem;
}

.conditions[hidden] {
  display: none;
}

.conditions__label {
  margin-right: 0.25rem;
  font-size: var(--text-caption);
  font-weight: 700;
  color: var(--ink-soft);
}

.cond {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  min-height: 2rem;
  border-radius: var(--radius-pill);
  background: var(--ink);
  padding: 0 0.75rem 0 0.625rem; /* × が左なので左の詰めを小さく */
  font-size: var(--text-caption);
  font-weight: 700;
  color: var(--cream-50);
}

.cond__x {
  font-size: 0.7em;
  opacity: 0.8;
}


.notice {
  margin-top: var(--gap-3);
  border-radius: var(--radius-md);
  background: var(--color-washi-deep);
  padding: var(--gap-2) var(--gap-3);
  font-size: var(--text-sm);
  color: var(--color-sumi-soft);
}

.empty-state {
  margin-top: var(--gap-8);
  border-radius: var(--radius-lg);
  border: 1px dashed var(--color-line-strong);
  padding: var(--gap-8);
  text-align: center;
  color: var(--color-sumi-soft);
}

.shop-grid {
  margin-top: var(--gap-5);
  display: grid;
  /* ★ minmax(0, 1fr) にすること。auto だと折り返さない品目の行（nowrap）の幅まで列が広がり、
     スマホでカードが画面の右にはみ出す */
  grid-template-columns: minmax(0, 1fr);
  gap: var(--gap-2);
}

/* --- エリアの塊（エリア別のとき。js/search.js の paintGrouped） ---
   見出しはヘッダーの下に貼り付く。飛び先の帯はその上に貼り付く（高さを --jump-h で持つ）。
   ヘッダーの高さは base.css の .site-header__inner（3.5rem / 640px〜 4.25rem） */
.search-results {
  --header-h: 3.5rem;
  --jump-h: 3.25rem;
}

.area-jump {
  position: sticky;
  top: var(--header-h);
  z-index: 2;
  margin: var(--gap-4) calc(-1 * var(--gap-4)) 0;
  display: flex;
  height: var(--jump-h);
  align-items: center;
  gap: var(--gap-2);
  overflow-x: auto;
  background: var(--cream-100);
  padding: 0 var(--gap-4);
}

.area-jump__link {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  gap: 0.375rem;
  height: 2.5rem;
  border-radius: var(--radius-pill);
  background: var(--cream-50);
  padding: 0 0.875rem;
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--ink);
}

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

.shop-group {
  /* 飛んだとき、貼り付いた帯の下に見出しが来るように */
  scroll-margin-top: calc(var(--header-h) + var(--jump-h));
}

.shop-group__head {
  position: sticky;
  top: calc(var(--header-h) + var(--jump-h));
  z-index: 1;
  margin: var(--gap-3) calc(-1 * var(--gap-4)) 0;
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  background: var(--cream-100);
  padding: var(--gap-3) var(--gap-4) var(--gap-2);
  font-size: var(--text-xl);
  font-weight: 900;
  line-height: 1.2;
  color: var(--ink);
}

.shop-group__count {
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--ink-soft);
}

/* 塊が 1 つだけで帯が無いとき、見出しはヘッダーの直下に */
.shop-group:first-child {
  scroll-margin-top: var(--header-h);
}

.shop-group:first-child .shop-group__head {
  top: var(--header-h);
}

.shop-group .shop-grid {
  margin-top: var(--gap-2);
}

/* --- 店カード --------------------------------------------------------
   96 店を縦に繰るので低く。左に画像、真ん中に字、右に「投票」。枠線は引かない。
   見せる順序を 店名 → 品目 → 場所・団体 → 評価 に固定する。 */
.shop-card {
  position: relative;
  display: flex;
  height: 100%;
  align-items: center;
  gap: var(--gap-3);
  border-radius: var(--radius-lg);
  background: var(--cream-50);
  padding: 0.625rem 0.625rem 0.625rem 0.75rem;
  box-shadow: var(--shadow-raise);
  transition: box-shadow 0.2s;
}

@media (hover: hover) and (pointer: fine) {
  .shop-card:hover {
    box-shadow: var(--shadow-card);
  }
}

/* 店の画像（サイト本体の企画画像）。正方形・角丸 */
.shop-card__thumb {
  width: 3.75rem;
  height: 3.75rem;
  flex-shrink: 0;
  /* 上下中央（カードの align-items: center に従う）。右の星とボタンも中央なので左右の軸がそろう。
     2026-10-25 までは上揃えで、品目が 2 行の店は画像の下だけ空いて見えた */
  overflow: hidden;
  border-radius: var(--radius-md);
  background: var(--cream-100);
}

.shop-card__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.shop-card__body {
  min-width: 0;
  flex: 1;
}

.shop-card__name {
  font-size: var(--text-base);
  line-height: 1.3;
  font-weight: 900;
  color: var(--ink);
  /* 行末の「。」「、」は枠の外にぶら下げる。禁則で「。」が行頭に来られず、直前の字ごと次の行へ送られて
     「今日好きになりました。」が早く折れていた（2026-10-25）。Safari が対応。未対応では今までどおり */
  hanging-punctuation: allow-end;
}

/* カード全体を押せるようにする。見出しのボタンを ::after でカードいっぱいに広げる。
   読み上げでは「店名」の 1 項目になり、投票のボタンはその上に残る */
.shop-card__open {
  text-align: left;
  font: inherit;
  color: inherit;
}

.shop-card__open::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
}

/* 品目は 2 行まで（1 行で切ると「たこ焼き 6個入り・たこ…」になり、食べた物と照らせない） */
.shop-card__item {
  margin-top: 0.125rem;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: var(--text-sm);
  font-weight: 700;
  line-height: 1.5;
  color: var(--orange-deep);
}

/* 団体名。3 行目。1 行に収めて入らない分は … で切る。近い順のときは距離を添える */
.shop-card__circle {
  margin-top: 0.125rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--text-caption);
  font-weight: 700;
  line-height: 1.5;
  color: var(--ink-soft);
}

.shop-card__distance {
  margin-left: 0.5rem;
  color: var(--ink);
}

/* 右の列の評価。星は小さく、数字だけ読めれば足りる */
.shop-card .rating {
  gap: 0.25rem;
}

.shop-card .rating-stars {
  font-size: 0.6875rem;
  letter-spacing: 0.02em;
}

.shop-card .rating__value {
  font-size: var(--text-caption);
}

.tag-list {
  margin-top: 0.5rem;
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap-1);
}

/* 一覧のカードには品目の札を出さない（1 件が 1〜2 行増えて 96 店が長くなる。絞り込みで分かる）。
   詳細ダイアログと MAP のシートには出る（.tag-list は共有） */
.shop-card .tag-list {
  display: none;
}

.tag {
  border-radius: var(--radius-pill);
  background: var(--color-washi-deep);
  padding: 0.125rem var(--gap-2);
  font-size: var(--text-caption);
  color: var(--color-sumi-soft);
}

/* 投票済みの印。画像の左上に小さく */
.shop-card__voted {
  position: absolute;
  top: 0.5rem;
  left: 0.5rem;
  z-index: 1;
  border-radius: var(--radius-pill);
  background: var(--ink);
  padding: 0.05rem 0.5rem;
  font-size: var(--text-caption);
  font-weight: 700;
  white-space: nowrap;
  color: var(--cream-50);
}

.shop-card__voted[hidden] {
  display: none;
}

/* 右の列（評価と投票）。カード全体を覆う ::after より上に置く */
.shop-card__side {
  position: relative;
  z-index: var(--z-base);
  display: flex;
  flex-shrink: 0;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.375rem;
}

.shop-card__vote {
  min-width: 3.75rem;
  padding: 0 0.75rem;
}

/* 一覧の「投票」は影（橙のにじみ）を付けない。96 店ぶん並ぶとにじみが続いてうるさい（2026-10-27 の指摘）。
   トップの主ボタンなど 1 つだけのボタンには残す */
.shop-card__vote.btn--primary,
.shop-card__vote.btn--primary:active {
  box-shadow: none;
}

/* 投票のきまり（検索欄の下）。トップを飛ばして来た人（看板の QR など）にも見えるように */
.search-rule {
  margin-top: var(--gap-3);
  font-size: var(--text-sm);
  line-height: 1.7;
  color: var(--ink-soft);
}

.search-rule strong {
  margin: 0 0.1em;
  font-weight: 900;
  color: var(--ink);
}

/* --- PC レイアウト --- */
@media (min-width: 640px) {
  .search-main {
    padding-left: var(--gap-6);
    padding-right: var(--gap-6);
  }
  .search-results {
    --header-h: 4.25rem;
  }
  .area-jump,
  .shop-group__head {
    margin-left: 0;
    margin-right: 0;
    padding-left: 0;
    padding-right: 0;
  }
  .shop-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--gap-3);
  }
  .shop-card {
    padding: var(--gap-4);
  }
  .shop-card__thumb {
    width: 4.5rem;
    height: 4.5rem;
  }
  .shop-card__name {
    font-size: var(--text-lg);
  }
}

@media (min-width: 1024px) {
  /* PC の組み（2026-10-25。サイト本体の企画検索 TOP /visitor/search/top と同じ構え）:
     左の欄は画面の左端に付く 1 本の柱（24rem・薄い地・右に罫線）で、ヘッダーの下から画面の下まで。
     結果はその右に流れ、フッターも右の列に入る（左の柱はフッターの横まで続く）。
     以前は 72rem の枠の中に左 18rem・右 1fr を置いていて、画面の左右に余白が残り、欄も狭かった。
     body を grid にし、main と .search-layout は display: contents で箱を消して、ヘッダー・欄・結果・
     フッターを直接 grid に置く（search.php の DOM 順: header, main > .search-layout > aside + .search-results, footer） */
  body.page-search {
    display: grid;
    grid-template-columns: 24rem minmax(0, 1fr); /* 22rem から少し広げた（2026-10-25） */
    grid-template-rows: auto 1fr auto;
  }
  .page-search .site-header {
    grid-column: 1 / -1;
    grid-row: 1;
  }
  .page-search .search-main,
  .page-search .search-layout {
    display: contents;
  }
  .search-aside {
    grid-column: 1;
    grid-row: 2 / span 2;
    background: var(--cream-50);
    border-right: 1px solid var(--line);
  }
  /* 欄の中身は画面に貼り付けて、あふれる分だけこの中でスクロールさせる（ヘッダー 65px の下）。
     スクロールするのは余白の外側のこの箱（スクロールバーが欄の右端の罫線のきわに来る。余白の内側で
     スクロールさせると、バーが 24px 内側に入って邪魔だった。2026-10-25）。バーは細く。
     欄の端まで送ってもページ全体は動かさない（overscroll-behavior。欄があふれていないときは js/search.js が止める） */
  .search-aside__inner {
    position: sticky;
    top: 65px;
    max-height: calc(100dvh - 65px);
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    /* バーの溝は常に確保する。チップを押すと「すべて解除」が下に出て欄があふれ、バーが現れた分だけ幅が縮んで
       チップが折り返し直していた（「絞り込みボタンを押すと改行される」2026-10-25） */
    scrollbar-gutter: stable;
    padding: var(--gap-5);
  }
  /* 検索欄は欄の地（cream-50）と同じ色で同化していたので、白い面に枠を付ける（チップと同じ） */
  .themed .search-aside .search-field__input {
    background: #fff;
    border: 1px solid var(--line-strong);
  }
  .themed .search-aside .search-field__input:focus {
    border-color: var(--orange-deep);
  }
  .search-results {
    grid-column: 2;
    grid-row: 2;
    min-width: 0;
    width: 100%;
    max-width: 72rem;
    padding: var(--gap-6) var(--gap-6) var(--gap-12); /* 左右の余白は 3rem から 2rem に（2026-10-25） */
    --header-h: 65px;
    /* 結果が少なくてもフッターの広告が最初の画面に上がってこないように、結果の列は最低でも画面 1 つ分（2026-10-25） */
    min-height: calc(100dvh - 65px);
  }
  /* 「今の条件」の行は、条件が無いときも場所を取ったまま隠す。出たり消えたりでカードが上下に動いていた（2026-10-25）。
     行はできるだけ低く（1.5rem の札・上の余白 0.5rem。マウスなので指の高さは要らない） */
  .conditions {
    margin-top: 0.5rem;
    min-height: 1.5rem;
    gap: 0.25rem;
  }
  .conditions .cond {
    min-height: 1.5rem;
    padding: 0 0.5rem 0 0.4rem;
    font-size: 0.6875rem;
    gap: 0.25rem;
  }
  .conditions__label {
    font-size: 0.6875rem;
  }
  .conditions[hidden] {
    display: flex;
    visibility: hidden;
  }
  .page-search .site-footer {
    grid-column: 2;
    grid-row: 3;
  }
  .filter-drawer {
    position: static;
    display: block;
  }
  .filter-drawer__backdrop,
  .filter-drawer__close,
  .filter-drawer__foot,
  .results-bar .filter-open {
    display: none;
  }
  .filter-drawer__sheet {
    position: static;
    max-height: none;
    border-radius: 0;
    background: transparent;
    padding: 0;
    animation: none;
  }
  /* 左の欄: 「食べた模擬店に星1〜5で投票。」の文と「絞り込み」の見出しは出さない（PC では言わずもがな）。
     欄を 22rem に広げたので、チップは押しやすい大きさ（2.25rem）に戻し、1 行に 3 つ入る。
     品目 12・場所 5・部門 3 で欄の高さは約 660px、1280×800 の画面でもスクロール無し（実測） */
  .search-rule {
    display: none;
  }
  /* 見出しの行（「絞り込み」・選んだ数・「すべて解除」）は PC では「すべて解除」だけが要る。
     検索欄と品目の間に 56px の空きを作っていた（数の丸が visibility: hidden で場所を取っていた）ので、
     行ごと選択肢の下へ回し（order）、数の丸は出さず、「すべて解除」は無いときは場所も取らない
     （下に回したので、出ても選択肢は動かない） */
  .filter-head {
    order: 2;
    margin-top: var(--gap-3);
    min-height: 0;
  }
  .filter-head__label,
  .filter-head__count {
    display: none;
  }
  .filter-head__reset[hidden] {
    display: none;
  }
  .filter-head__reset {
    margin-left: 0;
    padding-left: 0;
  }
  .filter-groups {
    margin-top: var(--gap-4); /* 検索欄のすぐ下に品目 */
    gap: var(--gap-3);
    overflow: visible;
    padding-bottom: 0;
  }
  .filter-group__options {
    margin-top: 0.5rem;
    gap: 0.375rem;
  }
  .chip {
    height: 2.25rem; /* 2.5rem だと欄の高さ 736px で 1280×800 の画面に収まらず、少しスクロールが出た */
    padding: 0 0.875rem;
    font-size: var(--text-sm);
  }
  /* チップは theme.css では「cream-50 の板・枠なし」（スマホのシートの cream-100 の地で浮く作り）。PC の欄の地は
     cream-50 なので同じ色で消えて字だけに見えた。欄の中では白い面に薄い枠でボタンに見せる（.themed 付きで theme.css に勝つ）。
     選んだ状態（焦げ茶の塗り）と 0 件（薄く）は theme.css のまま */
  .themed .search-aside .chip {
    border-color: var(--line);
    background: #fff;
  }
  .themed .search-aside .chip[aria-pressed="true"] {
    border-color: var(--ink);
    background: var(--ink);
  }
  .themed .search-aside .chip:disabled {
    border-color: transparent;
    background: var(--cream-50);
  }
  .filter-head__reset {
    min-height: 2.25rem;
  }
  .search-results {
    margin-top: 0;
  }
}

/* カードは 2 列（1200px〜。1024〜1199px は結果の列が 670px ほどで、2 列だと店名が 2 行に折れて窮屈） */
@media (min-width: 1200px) {
  .shop-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}


/* ============================================================
   ダイアログ（企画詳細・投票）
   ============================================================ */

.dialog-backdrop {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  background: rgba(74, 53, 32, 0.42);
}

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

@media (min-width: 640px) {
  .dialog-backdrop {
    align-items: center;
    padding: var(--gap-4);
  }
}

/* --- 企画詳細 --- */
.detail-dialog {
  display: flex;
  max-height: 88dvh;
  width: 100%;
  max-width: 32rem;
  flex-direction: column;
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  background: var(--color-surface);
  box-shadow: var(--shadow-float);
  /* 引いて閉じる（js/ui/shop-detail-dialog.js）。指を離したら元の位置へ戻る／画面の下へ送る動き。
     掴んでいる間（.is-dragging）は指に即座に付いてくるように transition を切る */
  animation: sheet-up 0.3s var(--ease-out);
  transition: translate 0.25s var(--ease-out);
}

.detail-dialog.is-dragging {
  transition: none;
}

/* つまみ。マップのシートと同じ見た目（css/map.css の .sheet__grip）。掴んで引ける */
.detail-dialog__handle {
  flex-shrink: 0;
  padding: var(--gap-3) var(--gap-4) 0;
  cursor: grab;
  touch-action: none;
}

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

@media (min-width: 640px) {
  .detail-dialog {
    max-height: 85dvh;
    max-width: 36rem; /* 紹介文を読む幅。32rem は PC では少し窮屈だった（2026-10-25） */
    border-radius: var(--radius-lg);
    animation: none;
  }
  .detail-dialog__handle {
    display: none;
  }
}

/* 見出し。スクロールしても残す。スマホでは掴んで引ける（touch-action: none でブラウザのスクロールに取られない） */
.detail-dialog__head {
  display: flex;
  align-items: flex-start;
  gap: var(--gap-3);
  border-bottom: 1px solid var(--color-line);
  padding: var(--gap-4);
  touch-action: none;
}

@media (min-width: 640px) {
  .detail-dialog__head {
    touch-action: auto;
  }
}

.detail-dialog__headings {
  min-width: 0;
  flex: 1;
}

.detail-dialog__name {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  line-height: 1.375;
  font-weight: 700;
  /* balance だと 2 行の名前が半分ずつに割られて、1 行目が妙な所で折れた（2026-10-25）。1 行目を埋めてから折る */
  text-wrap: pretty;
  hanging-punctuation: allow-end; /* 行末の「。」をぶら下げる（.shop-card__name の注） */
}

.detail-dialog__item {
  margin-top: 0.125rem;
  font-size: var(--text-base);
  color: var(--color-orange-deep);
}

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

/* 閉じるボタン。スマホのシートでは見せない（下に引く・外側を押すで閉じられるので要らず、見出しの幅を
   44px 食って企画名が早く折り返していた。2026-10-25）。読み上げとキーボードのために要素は残す（sr-only と同じ隠し方）。
   PC（640px〜）の中央のモーダルでは右上に出す */
.detail-dialog__close {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@media (min-width: 640px) {
  .detail-dialog__close {
    position: static;
    margin: -0.25rem -0.25rem 0 0;
    display: flex;
    width: 2.25rem;
    height: 2.25rem;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    overflow: visible;
    clip: auto;
    border-radius: 999px;
    color: var(--color-sumi-faint);
    transition: background-color 0.15s, color 0.15s;
  }
}

@media (hover: hover) and (pointer: fine) {
  .detail-dialog__close:hover {
    background: var(--color-washi-deep);
    color: var(--color-sumi);
  }
}

.detail-dialog__body {
  min-height: 0;
  flex: 1;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: var(--gap-4);
}

/* 操作。下に固定して、長い紹介文の末尾まで送らないようにする */
.detail-dialog__foot {
  display: flex;
  flex-shrink: 0;
  gap: var(--gap-2);
  border-top: 1px solid var(--color-line);
  padding: var(--gap-4);
}

.detail-dialog__foot .btn-map {
  display: flex;
  height: 2.75rem;
  flex: 1;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-line-strong);
  padding: 0 var(--gap-4);
  font-size: var(--text-sm);
  transition: border-color 0.15s, color 0.15s;
}

@media (hover: hover) and (pointer: fine) {
  .detail-dialog__foot .btn-map:hover {
    border-color: var(--color-orange);
    color: var(--color-orange-deep);
  }
}

/* 見た目は .btn-cast（下の「投票のボタン」）。ここは並びだけ */
.detail-dialog__foot .btn-vote {
  flex: 1.4;
  padding: 0 var(--gap-3);
}

/* 投票済み（評価を変える）は目立たせない。王冠と厚みを外し、隣の「MAPで見る」と同じ枠のボタンにする。
   王冠＋「評価を変える」＋「今は★4」の札ではスマホの幅に収まらず、はみ出していた（2026-10-28 の指摘） */
.detail-dialog__foot .btn-cast--again {
  min-width: 0;
  height: 2.75rem;
  gap: 0.375rem;
  padding: 0 var(--gap-2);
  border: 1px solid var(--color-line-strong);
  border-radius: var(--radius-md);
  background: transparent;
  font-size: var(--text-sm);
  font-weight: 700;
  letter-spacing: 0;
  color: var(--ink);
  box-shadow: none;
}

.detail-dialog__foot .btn-cast--again:active {
  transform: none;
  box-shadow: none;
}

.detail-dialog__foot .btn-cast--again .btn-cast__crown {
  display: none;
}

.detail-dialog__foot .btn-cast--again .btn-cast__mine {
  background: none;
  padding: 0;
  color: var(--orange-deep);
}

/* 幅 320px の端末では、「MAPで見る」の余白も詰めないと「今は★4」が数 px はみ出す */
@media (max-width: 359px) {
  .detail-dialog__foot:has(.btn-cast--again) .btn-map {
    padding: 0 var(--gap-2);
  }
}

/* 情宣画像。
   絵柄の主役が店名の文字であることが多いので一覧のサムネには使わず、
   大きく出せる詳細でだけ使う。正方形で切らずに contain で収める
   ── 背景が白・青・黒とばらばらなので、cover だと端の文字が落ちる。 */
/* 見出しの左の店の画像（5.5rem 角。マップのシートの .sheet-thumb--detail と同じ大きさ。
   以前は本文に幅いっぱいの正方形 .shop-image を置いていた。js/ui/shop-detail-dialog.js の注） */
.detail-dialog__thumb {
  flex-shrink: 0;
  width: 5.5rem;
  height: 5.5rem;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: #fff;
}

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

.detail-facts {
  margin-top: var(--gap-4);
  display: flex;
  flex-direction: column;
  gap: var(--gap-2);
  border-top: 1px solid var(--color-line);
  padding-top: var(--gap-3);
  font-size: var(--text-sm);
}

.detail-facts__row {
  display: flex;
  gap: var(--gap-3);
}

.detail-facts__key {
  width: 3rem;
  flex-shrink: 0;
  color: var(--color-sumi-faint);
}

/* --- 企画詳細の中身（紹介文・SNS・関連企画） --- */
.detail-body {
  margin-top: var(--gap-4);
  display: flex;
  flex-direction: column;
  gap: var(--gap-4);
}

.detail-section__title {
  font-size: var(--text-caption);
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--color-sumi-soft);
}

.detail-paragraphs {
  margin-top: var(--gap-1);
  display: flex;
  flex-direction: column;
  gap: var(--gap-2);
  font-size: var(--text-sm);
  line-height: 1.625;
}

/* 注意事項は読み飛ばされると困るので、地の色を変えて締める。
   もちの喉詰まりなど安全に関わる内容が入っている。 */
.detail-considerations {
  border-radius: var(--radius-md);
  border: 1px solid var(--color-line);
  background: var(--color-washi-deep);
  padding: 0.625rem var(--gap-3);
}

.detail-considerations__title {
  font-size: var(--text-caption);
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--color-orange-deep);
}

.detail-date {
  font-size: var(--text-sm);
  color: var(--color-sumi-soft);
}

.sns-list {
  margin-top: var(--gap-1);
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap-2);
}

.sns-link {
  display: flex;
  height: 2.25rem;
  align-items: center;
  gap: 0.375rem;
  border-radius: var(--radius-xl);
  border: 1px solid var(--color-line-strong);
  padding: 0 var(--gap-3);
  font-size: var(--text-sm);
  transition: border-color 0.15s, color 0.15s;
}

@media (hover: hover) and (pointer: fine) {
  .sns-link:hover {
    border-color: var(--color-orange);
    color: var(--color-orange-deep);
  }
}

.sns-link svg {
  width: 0.875rem;
  height: 0.875rem;
  flex-shrink: 0;
}

.related-list {
  margin-top: var(--gap-1);
  display: flex;
  flex-direction: column;
  gap: var(--gap-1);
}

.related-item {
  display: flex;
  min-height: 2.75rem;
  width: 100%;
  align-items: center;
  gap: var(--gap-2);
  border-radius: var(--radius-md);
  padding: 0.375rem var(--gap-2);
  text-align: left;
  transition: background-color 0.15s;
}

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

/* 店の画像（js/ui/shop-detail-body.js。企画検索の関連企画のカードに揃えて 2026-10-28 に足した） */
.related-item__thumb {
  width: 3.25rem;
  height: 3.25rem;
  flex-shrink: 0;
  overflow: hidden;
  border-radius: var(--radius-md);
  background: var(--color-washi-deep);
}

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

.related-item__body {
  min-width: 0;
  flex: 1;
}

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

.related-item__name {
  display: block;
  min-width: 0;
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--text-sm);
  font-weight: 700;
}

/* 評価と品目（2026-10-28）。一覧の店（MAP の .sheet-item、模擬店を探すの .shop-card）と同じく
   評価は「★3.0」の文字だけ、品目は朱の 1 行 */
.related-item__rating {
  flex-shrink: 0;
  font-size: var(--text-caption);
  color: var(--color-sumi-soft);
}

.related-item__food {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--text-caption);
  color: var(--color-orange-deep);
}

.related-item__meta {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--text-caption);
  color: var(--color-sumi-soft);
}

.related-item__arrow {
  flex-shrink: 0;
  color: var(--color-sumi-faint);
}

/* 読み込み中の帯。文字が出る場所と同じ高さの帯を出して、
   入れ替わりでレイアウトが飛ばないようにする。 */
.detail-skeleton {
  margin-top: var(--gap-4);
  display: flex;
  flex-direction: column;
  gap: var(--gap-2);
}

.detail-skeleton span {
  display: block;
  height: 1rem;
  border-radius: var(--radius-sm);
  background: var(--color-line);
  animation: pulse 1.6s ease-in-out infinite;
}

@keyframes pulse {
  50% { opacity: 0.45; }
}

/* --- 投票ダイアログ ---
   検索（theme.css を読む）と MAP（読まない）で同じ見た目にする（2026-10-28。以前は MAP だけ古い見た目だった）。
   だから色は base.css の --cream-* / --orange / --ink から取り、.themed を付けずに書く */
.vote-dialog {
  width: 100%;
  max-width: 24rem;
  border-radius: var(--radius-xl);
  background: var(--cream-50);
  padding: var(--gap-6) var(--gap-5) var(--gap-5);
  color: var(--ink);
  box-shadow: var(--shadow-float);
  margin: var(--gap-4);
}

@media (min-width: 640px) {
  .vote-dialog { margin: 0; }
}

.vote-dialog__eyebrow {
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--ink-soft);
}

.vote-dialog__name {
  margin-top: var(--gap-1);
  font-family: var(--font-body);
  font-size: var(--text-xl);
  font-weight: 900;
  line-height: 1.25;
  color: var(--ink);
}

.vote-dialog__circle {
  margin-top: var(--gap-1);
  font-size: var(--text-sm);
  color: var(--ink-soft);
}

/* 星は左から順に押せるようにする。
   旧実装は flex-direction:row-reverse の CSS トリックで
   ホバーを作っていて、キーボードでは操作できなかった。 */
.vote-stars {
  margin-top: var(--gap-6);
  display: flex;
  justify-content: center;
  gap: var(--gap-2);
}

/* 星。押すと弾む（投票はこの企画の中心なので、ここだけは手応えを大きく） */
.vote-star {
  font-size: 2.75rem;
  line-height: 1;
  color: var(--line-strong);
  transition: color 0.15s, transform 0.25s var(--ease-pop);
}

@media (hover: hover) and (pointer: fine) {
  .vote-star:hover {
    transform: scale(1.1);
  }
}

.vote-star.is-on {
  color: var(--orange);
}

.vote-star.is-bump {
  animation: star-bump 0.45s var(--ease-pop);
}

@keyframes star-bump {
  0% { transform: scale(0.6) rotate(-20deg); }
  60% { transform: scale(1.25) rotate(8deg); }
  100% { transform: scale(1) rotate(0); }
}

.vote-dialog__score {
  margin-top: var(--gap-3);
  min-height: 2.5rem;
  text-align: center;
  font-size: var(--text-xl);
  font-weight: 900;
  color: var(--ink);
}

.vote-dialog__score.is-empty {
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--ink-soft);
}

.vote-dialog__error {
  margin-top: var(--gap-3);
  border-radius: var(--radius-md);
  background: var(--cream-200);
  padding: var(--gap-2) var(--gap-3);
  font-size: var(--text-sm);
  color: var(--ink);
}

.vote-dialog__error[hidden] { display: none; }

.vote-dialog__actions {
  margin-top: var(--gap-5);
  display: flex;
  align-items: center;
  gap: var(--gap-3);
}

/* 「やめる」は字だけで控えめに。投票のボタンと同じ強さで並ぶと、どちらを押すか迷う */
.vote-dialog__cancel {
  flex: none;
  height: 3.25rem;
  border-radius: var(--radius-pill);
  padding: 0 var(--gap-4);
  font-size: var(--text-base);
  font-weight: 700;
  color: var(--ink-soft);
}

@media (hover: hover) and (pointer: fine) {
  .vote-dialog__cancel:hover {
    background: var(--cream-100);
  }
}

/* 狭い画面（360px 前後）で「星4で投票する」がダイアログの外へはみ出していたので、横の余白を詰めて縮められるようにする */
.vote-dialog__send {
  min-width: 0;
  flex: 1;
  padding: 0 var(--gap-3);
}

/* ============================================================
   投票のボタン（.btn-cast）
   ------------------------------------------------------------
   投票ダイアログの「星4で投票する」・企画詳細の「投票する」・MAP の「この模擬店に投票する」。
   この企画でいちばん押してほしいボタンなので、ほかのボタンと違う形にする（2026-10-28 の指示）。
     - 右下の浮きボタン（theme.css の .vote-float）と同じ王冠を添える。王冠 = 投票の印
     - 下に一段濃い縁（厚み）を付け、押すと沈む。押したことが指に返る
     - 投票済みの店は「評価を変える」を白抜きにする（まだの店と見分ける）
   ============================================================ */
.btn-cast {
  display: inline-flex;
  height: 3.25rem;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  border: 2px solid var(--orange-deep);
  border-radius: var(--radius-pill);
  background: var(--orange-deep);
  padding: 0 var(--gap-5);
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: 900;
  letter-spacing: 0.04em;
  white-space: nowrap;
  color: var(--cream-50);
  box-shadow: 0 4px 0 #8f3d0e, 0 8px 18px rgba(94, 40, 29, 0.18);
  transition: transform 0.08s, box-shadow 0.08s, background-color 0.15s;
}

.btn-cast__crown {
  width: 1.5rem;
  height: auto;
  flex: none;
}

@media (hover: hover) and (pointer: fine) {
  .btn-cast:hover {
    background: #b85712;
  }
}

.btn-cast:active {
  transform: translateY(3px);
  box-shadow: 0 1px 0 #8f3d0e, 0 3px 8px rgba(94, 40, 29, 0.16);
}

/* 投票済み（評価を変える）。白抜きにして、今の星を札で添える */
.btn-cast--again {
  background: var(--cream-50);
  color: var(--orange-deep);
  box-shadow: 0 4px 0 color-mix(in srgb, var(--orange-deep) 35%, transparent);
}

@media (hover: hover) and (pointer: fine) {
  .btn-cast--again:hover {
    background: var(--cream-100);
  }
}

.btn-cast--again:active {
  box-shadow: 0 1px 0 color-mix(in srgb, var(--orange-deep) 35%, transparent);
}

.btn-cast__mine {
  border-radius: var(--radius-pill);
  background: var(--orange-deep);
  padding: 0.125rem 0.625rem;
  font-size: var(--text-sm);
  letter-spacing: 0;
  color: var(--cream-50);
  font-variant-numeric: tabular-nums;
}

/* 星を選ぶ前。「押せないが在る」が分かる濃さにして、厚みは付けない（押しても沈まない） */
.btn-cast:disabled {
  border-color: var(--cream-200);
  background: var(--cream-200);
  color: var(--ink-soft);
  box-shadow: none;
  transform: none;
  cursor: not-allowed;
}

.btn-cast:disabled .btn-cast__crown {
  opacity: 0.35;
  filter: grayscale(1);
}

@media (prefers-reduced-motion: reduce) {
  .btn-cast,
  .btn-cast:active {
    transition: none;
    transform: none;
  }
}

/* ============================================================
   投票が通ったときの星の飛び散り（js/ui/vote-dialog.js の celebrate）
   画面の真ん中から 14 個の星が飛ぶ。1 秒で消える。検索と MAP の両方（2026-10-28 に theme.css から移した）
   ============================================================ */
.burst {
  pointer-events: none;
  position: fixed;
  left: 50%;
  top: 50%;
  z-index: calc(var(--z-modal) + 1);
  width: 0;
  height: 0;
}

.burst__star {
  position: absolute;
  left: 0;
  top: 0;
  font-size: var(--size, 1.5rem);
  line-height: 1;
  color: var(--color, var(--orange));
  transform: translate(-50%, -50%);
  animation: burst-fly 0.9s var(--ease-out) var(--delay, 0s) both;
}

@keyframes burst-fly {
  0% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(0.4) rotate(0deg);
  }
  70% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(1) rotate(var(--rot));
  }
}

@media (prefers-reduced-motion: reduce) {
  .burst {
    display: none;
  }
}

/* ============================================================
   知らせの帯（Toast）
   ------------------------------------------------------------
   投票してもダイアログが閉じるだけだと、人混みの中では押せたのか
   どうか分からず、二度押しの原因になる。
   ============================================================ */
.toast {
  position: fixed;
  inset-inline: 0;
  bottom: var(--gap-6);
  z-index: var(--z-modal);
  margin: 0 auto;
  width: fit-content;
  max-width: calc(100vw - 2rem);
  border-radius: var(--radius-xl);
  background: var(--color-sumi);
  padding: var(--gap-3) var(--gap-5);
  text-align: center;
  font-size: var(--text-sm);
  color: var(--color-washi);
  box-shadow: var(--shadow-float);
  transition: opacity 0.3s, transform 0.3s;
}

.toast[hidden] {
  display: none;
}

.toast.is-hiding {
  opacity: 0;
  transform: translateY(0.5rem);
}

/* 投票して「ガラポンまであとN店」を 2 行目に出す知らせ（js/ui/vote-dialog.js）。
   2 行だと丸い帯（theme.css の pill）は端が膨らむので、角丸を xl にする */
body .toast.toast--lines {
  border-radius: var(--radius-xl);
}

.toast__line {
  display: block;
}

.toast__line + .toast__line {
  font-weight: 900;
}

.toast__line strong {
  margin-inline: 0.15em;
  font-size: 1.25em;
  color: var(--yellow);
}

/* 3 店目の投票（ガラポンの権利が付いた 1 回）だけの知らせ。js/ui/vote-dialog.js。
   来場者が一番待っている知らせなので、帯ではなくガラポンの絵を添えたカードにする（2026-10-28）。
   検索（theme.css の .themed .toast）と MAP の両方で同じ見た目にするため、body から書いて勝たせる。
   色は base.css の --cream-* / --orange / --ink（MAP も base.css は読む） */
body .toast.toast--garapon {
  display: flex;
  align-items: center;
  gap: var(--gap-3);
  width: min(23rem, calc(100vw - 2rem));
  border: 3px solid var(--orange);
  border-radius: var(--radius-xl);
  background: var(--cream-50);
  padding: var(--gap-3) var(--gap-4);
  text-align: left;
  color: var(--ink);
}

body .toast.toast--garapon[hidden] {
  display: none;
}

.toast__pic {
  flex: none;
  width: 3rem;
  height: auto;
  animation: toast-garapon-pop 0.55s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

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

.toast__sub,
.toast__note {
  font-size: var(--text-caption);
  font-weight: 700;
  line-height: 1.5;
  color: var(--ink-soft);
  overflow-wrap: anywhere;
}

.toast__main {
  font-size: 1.0625rem;
  font-weight: 900;
  line-height: 1.35;
}

/* 句の途中で折らない（「引けま／す！」を防ぐ。MAP は theme.css の .nobr を読まないのでここで決める） */
.toast__main > span,
.toast__note > span {
  display: inline-block;
  white-space: nowrap;
}

.toast__main em {
  font-style: normal;
  color: var(--orange-deep);
}

/* 絵が弾んで出る（1 回だけ） */
@keyframes toast-garapon-pop {
  0% { opacity: 0; transform: scale(0.4) rotate(-18deg); }
  60% { opacity: 1; transform: scale(1.12) rotate(6deg); }
  100% { transform: scale(1) rotate(0); }
}

@media (prefers-reduced-motion: reduce) {
  .toast__pic {
    animation: none;
  }
}