/*
 * 共通の部品（2026-10-24〜）。トップ・検索・投票状況のページが読む。MAP は読まない。
 *
 * lib/view.php の page_header() が fullscreen でないページにだけこのファイルを足し、
 * <body class="themed"> を付ける。search.css の共有部品（チップ・検索欄・ダイアログ・トースト）の
 * 新しい見た目は、ここで .themed 付きで上書きする。だから MAP は以前のまま。
 *
 * 考え方
 *   - 強弱は「字の大きさと太さ」と「余白」で付ける。枠線・影・飾りで付けない
 *   - 塗りは 2 色だけ。深い橙（--orange-deep）= 押してほしい操作、焦げ茶 = 選んでいる状態。
 *     ボタンの橙を明るい橙（--orange。ロゴ・数字・線）より一段深くするのは、クリームの字を載せて読めるようにするため
 *     （明るい橙にクリームは 2.5、茶を載せると 4.5 だが濁って見にくい。深い橙にクリームで 4.0。2026-10-24 の指摘）
 *   - 面はほぼ白のクリーム（cream-50）。枠線は引かないか、薄い 1px
 *   - 角丸は大きさで 3 段（ボタン pill・カード lg・ダイアログ xl）
 *   - 動きは「押したものが応える」ときだけ。ページ読み込みの動きはトップのロゴ 1 回（home.css）
 *
 * ★ 色の値は base.css の --cream-* / --orange / --ink から取る。ここに生の色を書かない。
 */

body.themed {
  background: var(--cream-100);
  color: var(--ink);
  font-weight: 500;
  /* 本文の行間は 1.7（1.8 だと字の背が高い Zen Maru Gothic では行がばらけて見えた。2026-10-27 のチェックで
     1.8 / 1.7 / 1.6 を並べて比べた。1.6 は 3〜4 行の段落で詰まって見えた） */
  line-height: 1.7;
}

.themed h1,
.themed h2,
.themed h3 {
  font-weight: 900;
  line-height: 1.25;
}

/* フォーカスの輪。橙はクリームの地で 2.0〜2.4 しか無いので、焦げ茶の輪をクリームで縁取る二重の輪 */
.themed :focus-visible {
  outline: 3px solid var(--ink);
  outline-offset: 2px;
  box-shadow: 0 0 0 2px var(--cream-50);
}

/* 句の途中で折り返さない（「もう1／回」「3店に投／票」を防ぐ） */
.nobr {
  white-space: nowrap;
}

.space-ajust{
  margin-left: 0.2em;
  margin-right: -0.4em;
}
/* 本文のリンク */
.themed a:not([class]) {
  color: var(--orange-deep);
  text-decoration: underline;
  text-underline-offset: 0.2em;
  text-decoration-thickness: 2px;
}

/* 押せると分かるように、乗せたら薄くする（2026-10-30）。
   焦げ茶にすると本文と同じ色になって溶けた。色・下線は変えない（下線を消すとリンクに見えなくなる） */
@media (hover: hover) and (pointer: fine) {
  .themed a:not([class]):hover {
    opacity: 0.6;
  }
}

/* ============================================================
   見出し（lib/view.php の section_heading()）
   ------------------------------------------------------------
   深い橙の太い字（平ら）の後ろに、大きさの違う 3 つの点（素材の背景の点の並び）。2026-10-27 に作り直した。
   以前の「下半分に黄の帯＋王冠」は、帯の上で橙の字のコントラストが 3.72 から 3.00 に落ちて読みにくく、
   王冠は小さく浮いて見えたのでやめた。ロゴと同じ縁取り＋右下の影も試したが、落ち影で字がページから浮いて見え、
   ほかの見出し（ガラポン・賞の枠）が平らな字なので見出しだけ別の部品に見えた（同日）。
   大きさは手順の見出し（.steps__title）より一段大きく、見出しだと大きさでも分かるように。
   ============================================================ */
.title {
  font-size: calc(var(--text-xl) * 1.15); /* 1.3 倍は大きすぎた（2026-10-27） */
  font-weight: 900;
  line-height: 1.3;
  letter-spacing: 0.04em;
  color: var(--orange-deep);
  /* text-wrap: balance は付けない。後ろの点まで含めて均等に割ろうとして「投票までの／流れ」と字を折る。
     付けなければ、入らないときは点だけが次の行へ回る。2 行になる見出しは .nobr で句ごとに折る */
}

/* 3 つの点。最後の行の後ろに続く。
   句（.nobr）に分けた見出しは、点を最後の句の中に付ける。入らないときに点だけが次の行へ落ちず、
   最後の句ごと下りる（「総合優勝と／3つの部門賞●●●」。2026-10-27） */
.title__text:has(> .nobr)::after {
  content: none;
}

.title__text::after,
.title__text > .nobr:last-child::after {
  content: "";
  display: inline-block;
  width: 1.9em;
  height: 0.5em;
  margin-left: 0.4em;
  vertical-align: 0.05em;
  background:
    radial-gradient(circle at 0.25em 50%, var(--orange) 0.24em, transparent 0.25em),
    radial-gradient(circle at 0.95em 50%, var(--yellow) 0.18em, transparent 0.19em),
    radial-gradient(circle at 1.55em 50%, #f3ae79 0.13em, transparent 0.14em);
}

/* 節の見出しではない見出し（結果発表の「FINALE のステージで」）。点を付けない */
.title--plain .title__text::after,
.title--plain .title__text > .nobr:last-child::after {
  content: none;
}

/* 「FINALEのステージで」は句の途中で折らない（.nobr）ので、320px では入らない。狭い画面だけ一段小さく */
@media (max-width: 359px) {
  .title--plain {
    font-size: var(--text-xl);
  }
}

/* ページの題（投票状況など）。節の見出しより一段大きい */
.title--page {
  font-size: calc(var(--text-2xl) * 1.15);
}

.title--sm {
  font-size: var(--text-lg);
}

/* 見出しの下に添える 1〜2 行 */
.lede {
  margin-top: var(--gap-3);
  /* 1 行の長さ。36rem だと PC（1200〜1500px）で右の列の 6 割で止まり、右が毎回空いた（2026-10-25）。
     44rem は 16px で約 44 字。読みやすさの上限内 */
  max-width: 44rem;
  font-size: var(--text-base);
  line-height: 1.7;
  color: var(--ink-soft);
}

/* ============================================================
   ボタン
   ------------------------------------------------------------
   丸い板。深い橙（主）・焦げ茶（選択・副）・枠だけ（第三）。
   主ボタンは深い橙 --orange-deep にクリームの字（コントラスト 4.0）。明るい橙 --orange に字を載せない
   （クリームは 2.5 で読めず、茶は 4.5 でも濁って見にくい。2026-10-24）。
   押した瞬間に少し沈む。hover はカーソルのある端末だけ（スマホでは hover が残る）。
   ============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 3rem;
  border-radius: var(--radius-pill);
  border: 2px solid transparent;
  padding: 0 1.5rem;
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
  color: var(--ink);
  transition: transform 0.12s var(--ease-out), background-color 0.15s, border-color 0.15s, color 0.15s, box-shadow 0.15s;
}

.btn:active {
  transform: scale(0.97);
}

/* 主ボタンは同じ色の柔らかい影で少し浮かせる（押してほしい 1 つだと一目で分かるように）。
   押すと影が縮んで沈む。ぼかしを広げると周りが橙に焼けて見えた（2026-10-27）ので、狭く薄く */
.btn--primary {
  background: var(--orange-deep);
  border-color: var(--orange-deep);
  color: var(--cream-50);
  box-shadow: 0 4px 8px rgba(201, 96, 26, 0.25), 0 1px 2px rgba(201, 96, 26, 0.3);
}

.btn--primary:active {
  box-shadow: 0 2px 6px rgba(201, 96, 26, 0.3);
}

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

.btn--ink {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--cream-50);
}

@media (hover: hover) and (pointer: fine) {
  .btn--ink:hover {
    background: #74352a;
    border-color: #74352a;
  }
}

.btn--ghost {
  border-color: var(--line-strong);
  background: transparent;
}

@media (hover: hover) and (pointer: fine) {
  .btn--ghost:hover {
    border-color: var(--ink);
    background: var(--cream-50);
  }
}

.btn--lg {
  min-height: 3.5rem;
  padding: 0 2rem;
  font-size: var(--text-lg);
}

/* 小さいボタンも指で押せる高さ（44px）は守る。歩きながら片手で押される */
.btn--sm {
  min-height: 2.75rem;
  padding: 0 1rem;
  font-size: var(--text-sm);
}

.btn:disabled {
  background: var(--line);
  border-color: transparent;
  color: var(--ink-faint);
  transform: none;
  cursor: not-allowed;
}

/* ボタン・リンクに添える絵（lib/view.php の icon()）。字の高さに合わせる */
.icon {
  width: 1.2em;
  height: 1.2em;
  flex-shrink: 0;
}

/* 字（Zen Maru Gothic）の形は行の箱の中で下に寄っていて、箱の中心より 0.055em ほど下に中心がある。
   箱の中心どうしでそろえると絵が上に浮いて見えるので、絵を同じだけ下げる
   （「模擬店を探して投票する」の虫めがねが上に見えた。2026-10-27 のチェック。20px で 1.1px 上だった） */
.btn .icon {
  position: relative;
  top: 0.055em;
  margin-left: -0.25em;
}

.btn--sm .icon {
  width: 1.1em;
  height: 1.1em;
}

/* 押せる物は全部ボタン（.btn）にする。字だけのリンクは「押せる物に見えない・どこへ行くか分からない」ので使わない
   （2026-10-24 の指示。以前の .textlink は廃止） */

/* ============================================================
   常に出ている投票への導線（lib/view.php の page_footer()）
   右下に固定した深い橙の板にクリームの字。投票する search.php では出さない。
   ============================================================ */
.vote-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: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 3.25rem;
  border-radius: var(--radius-pill);
  background: var(--orange-deep);
  padding: 0 1.25rem 0 1rem;
  font-size: var(--text-base);
  font-weight: 700;
  white-space: nowrap;
  color: var(--cream-50);
  box-shadow: 0 10px 24px rgba(94, 40, 29, 0.22);
  transition: transform 0.2s var(--ease-out), opacity 0.2s, box-shadow 0.15s, background-color 0.15s;
}

.vote-float__crown {
  width: 1.375rem;
  height: auto;
  flex-shrink: 0;
}

@media (hover: hover) and (pointer: fine) {
  a.vote-float:hover {
    background: #b85712;
  }
}

a.vote-float:active {
  transform: scale(0.97);
}

/* 同じ行き先のボタンやフッターが見えている間は隠す（js/ui/vote-float.js） */
.vote-float.is-hidden {
  opacity: 0;
  transform: translateY(0.75rem);
  pointer-events: none;
}

/* PC（1024px〜）では出さない。ナビの「模擬店を探す」が常に見えていて要らず、賞の板の字に重なっていた（2026-10-25）。
   スマホでは親指の届く位置の導線として要る */
@media (min-width: 1024px) {
  .vote-float {
    display: none;
  }
}

.vote-float--closed {
  background: var(--cream-50);
  color: var(--ink-soft);
  box-shadow: var(--shadow-card);
  font-size: var(--text-sm);
}

@media (min-width: 640px) {
  .vote-float {
    right: 1.5rem;
    bottom: 1.5rem;
    min-height: 3.5rem;
    padding: 0 1.5rem 0 1.25rem;
    font-size: var(--text-lg);
  }
  .vote-float__crown {
    width: 1.5rem;
  }
}

/* 浮きボタンはフッターが見えたら隠れる（js/ui/vote-float.js）ので、余白の加算は要らない */

/* ============================================================
   星の評価（base.css の .rating-stars を上書き）
   ============================================================ */
.themed .rating-stars::before {
  color: var(--line-strong);
}

.themed .rating-stars::after {
  color: var(--orange);
}

.themed .rating__value {
  font-weight: 700;
  color: var(--ink);
}


.themed .rating--empty {
  color: var(--ink-soft);
}

/* ============================================================
   search.css の共有部品の上書き（チップ・検索欄・タグ・ダイアログ・トースト）
   ============================================================ */

/* チップ。クリームの面に字だけ。選んだものは焦げ茶の面にクリームの字 */
.themed .chip {
  border: 2px solid transparent;
  background: var(--cream-50);
  font-weight: 700;
  color: var(--ink);
}

@media (hover: hover) and (pointer: fine) {
  .themed .chip:hover:not(:disabled):not([aria-pressed="true"]) {
    border-color: var(--line-strong);
    color: var(--ink);
  }
}

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

/* 0 件のチップ。有効なものより弱く見せる（枠を出すと逆に輪郭が強くなる） */
.themed .chip:disabled {
  background: var(--cream-50);
  border-color: transparent;
  color: var(--ink);
  opacity: 0.45;
}

/* 件数は絞り込みの判断材料なので、薄すぎない色（ink-faint は 2.3 で読めない） */
.themed .chip__count {
  color: var(--ink-soft);
}

.themed .chip[aria-pressed="true"] .chip__count {
  color: color-mix(in srgb, var(--cream-50) 70%, transparent);
}

.themed .filter-group__legend {
  font-size: var(--text-sm);
  font-weight: 700;
  letter-spacing: 0;
  color: var(--ink-soft);
}

.themed .search-field__input {
  height: 3.25rem;
  border: 2px solid transparent;
  border-radius: var(--radius-pill);
  background: var(--cream-50);
  padding-left: 2.75rem;
  font-weight: 700;
  color: var(--ink);
  box-shadow: var(--shadow-raise);
}

.themed .search-field__input::placeholder {
  font-weight: 500;
  color: var(--ink-faint);
}

.themed .search-field__input:focus {
  background: #fff;
  border-color: var(--ink);
  outline: none;
}

.themed .search-field__icon {
  left: 1rem;
  width: 1.125rem;
  height: 1.125rem;
  color: var(--ink-soft);
}

.themed .search-field__clear {
  right: 0.25rem;
  width: 2.75rem;
  height: 2.75rem;
  color: var(--ink-soft);
}

.themed .search-history {
  border: 0;
  border-radius: var(--radius-lg);
  background: var(--cream-50);
  box-shadow: var(--shadow-float);
}

.themed .search-history__head {
  color: var(--ink-soft);
}

.themed .search-history__item {
  font-weight: 700;
  color: var(--ink);
}

/* 品目の札。小さく、ポスターの地の色で */
.themed .tag {
  background: var(--cream-200);
  padding: 0.125rem 0.625rem;
  font-size: var(--text-caption);
  font-weight: 700;
  color: var(--ink);
}

.themed .notice {
  border-radius: var(--radius-md);
  background: var(--cream-50);
  color: var(--ink-soft);
}

.themed .empty-state {
  border: 0;
  background: transparent;
  color: var(--ink-soft);
  font-weight: 700;
}

/* --- ダイアログ（企画詳細・投票） --- */
.themed .dialog-backdrop {
  background: color-mix(in srgb, var(--ink) 50%, transparent);
}

.themed .detail-dialog {
  border: 0;
  background: var(--cream-50);
  color: var(--ink);
  box-shadow: var(--shadow-float);
}

.themed .detail-dialog__head,
.themed .detail-dialog__foot {
  border-color: var(--line);
}

.themed .detail-dialog__name {
  font-family: var(--font-body);
  font-size: var(--text-xl);
  font-weight: 900;
  line-height: 1.25;
  color: var(--ink);
}

.themed .detail-dialog__item {
  font-weight: 700;
  color: var(--orange-deep);
}

.themed .detail-dialog__circle,
.themed .detail-date,
.themed .detail-facts__key,
.themed .related-item__meta,
.themed .detail-section__title {
  color: var(--ink-soft);
}

.themed .detail-section__title {
  font-size: var(--text-sm);
  letter-spacing: 0;
}

/* スマホのシートでは ✕ を見せない（css/search.css の .detail-dialog__close が sr-only と同じ隠し方）。
   大きさの上書きは PC（640px〜）のモーダルだけに */
@media (min-width: 640px) {
  .themed .detail-dialog__close {
    width: 2.75rem;
    height: 2.75rem;
    background: var(--cream-200);
    color: var(--ink);
  }
  .themed .detail-dialog__close .icon {
    width: 1.375rem;
    height: 1.375rem;
  }
}

.themed .detail-considerations {
  border: 0;
  background: var(--cream-200);
}

.themed .detail-considerations__title {
  color: var(--ink);
}

.themed .sns-link,
.themed .related-item {
  border-color: var(--line-strong);
  color: var(--ink);
}

.themed .related-item {
  border: 0;
  background: var(--cream-100);
  margin-top: var(--gap-1);
}

.themed .detail-dialog__foot .btn-map {
  height: 3rem;
  border-radius: var(--radius-pill);
  border: 2px solid transparent;
  font-size: var(--text-base);
  font-weight: 700;
  color: var(--ink);
}

.themed .detail-dialog__foot .btn-map {
  border-color: var(--line-strong);
  background: transparent;
}

/* 詳細の「MAPで見る」はピンを添える（js/ui/shop-detail-dialog.js）。
   幅は中身なり（折らない）にして、残りを「投票する」に回す。1 : 1.4 で割ると、ピンを足してから
   390px 以下で「マップで／見る」と折れていた（2026-10-27 実測。360px でボタン 139px・要るのは 156px） */
.themed .detail-dialog__foot .btn-map {
  flex: none;
  gap: 0.375rem;
  white-space: nowrap;
}

.themed .detail-dialog__foot .btn-map .icon {
  position: relative;
  top: 0.055em;
  width: 1.125rem;
  height: 1.125rem;
}

/* 投票ダイアログと投票のボタン（.btn-cast）は MAP と同じ見た目にするため search.css に移した（2026-10-28） */

.themed .toast {
  border-radius: var(--radius-pill);
  background: var(--ink);
  font-weight: 700;
  color: var(--cream-50);
  box-shadow: var(--shadow-float);
}