/* css/views-detail-hero-rest.css
   【後回し分（issue #104）】css/views-detail-hero.css から出した、**初回画面に当たらない**規則。
   index.html で media="print" → onload で当てる＝ダウンロードはすぐ始まるが描画は止めない。
   中身はタブの中（料金・レイアウト/ホール・動画・口コミ）、ハザード表、ホールマップ、
   モーダル、スケルトンなど。**初回画面に出るものをここへ移さない**（移すと初期表示が崩れる）。
   分け方の実測手順は css/views-detail-hero.css の冒頭。
*/


.detail-hero-band__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
}

.detail-hero-band__logo {
  height: 24px;
  width: auto;
  display: block;
}

/* プランカードの「更新中」。日付を変えたときの進行表示（js/views/detail.js）。
   **同じコースの再描画ではスケルトンに落とさない**ので、進行はここだけで示す。 */
.detail-plan__busy {
  margin: 0 0 var(--space-3);
  font-size: var(--text-sm);
  color: var(--ink-500);
}

/* 【読み込み前のグレーの枠（issue #84）】写真はAPIが返ってから入るので、それまで同じ大きさの
   枠を出しておく＝届いても高さが変わらない（作者の求め・2026-08-30）。押せる要素ではないので
   span で出し、読み上げからも外す（course-facts-card.js の photoSkeletonHtml）。 */
.detail-photostrip .detail-gallery__thumb--skeleton {
  cursor: default;
  pointer-events: none;
  animation: photostrip-skeleton 1.4s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
  .detail-photostrip .detail-gallery__thumb--skeleton { animation: none; }
}

/* 【選択枠は出さない】サムネを押しても左上のヒーロー写真は変わらず、プレビューが開くだけ。
   枠を出すと「今この写真を見ている」という嘘になる（作者指摘・2026-08-26）。
   選択の表示が要るのはプレビュー側のサムネ列（.photo-lightbox__thumb.is-selected）だけ。 */

/* ── レイアウト・攻略カード（Figma 98:3269 / 情報が少ないときは 124:325） ───────
   器は「ゴルフ場詳細」と同じ .detail-card。ここが持つのは、上に置く要約タイルと
   空状態の見た目だけ（ホールのカード・ハザードの表は既存の実装をそのまま入れる）。 */
.detail-layout__lead {
  /* 下は comp と同じ16px（節と節の32pxはブロックどうしの間隔で、リード文は別） */
  margin: 0 0 var(--space-4);
  font-size: var(--text-sm);
  line-height: 1.7;
  color: var(--ink-900);
}

/* 「コース概要」のタイル。4列。comp の 8px gap / 8px 角丸 / 12px 内側余白 */
.detail-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.detail-stat {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-3);
  border-radius: var(--radius-sm);
  background: rgba(20, 24, 26, 0.04);
}

/* 【12px未満を置かない — 読ませる文字だけ（issue #77）】#65 は静的HTMLの
   `.price-band__count` だけを12pxにしていて、SPAが描き直したあとの10pxが45個残っていた。
   2026-08-28 に部品ごとに12pxへ上げて実測し、**レイアウトが1pxも動かない**ものだけ上げた
   （grid/flex の子で幅がセル側で決まるため。文字切れ0件・親からのはみ出し0px・
   ページの横スクロール0px）。
   **上げないもの**: ヒストグラムの目盛り `.price-pos__scale > span`（16個中8個が1行→2行に
   なる。唯一動く部品）と、記号・単位（`.detail-plan__price-value > span` の「〜」・
   `.detail-stat__unit` の「ヤード」・`.review-rank__value` の「位」・`.video-card__dur`）。
   これらは読む文字ではなく大きな主値に付く目印なので10pxのままにする（作者の判断）。
   サイズは px 直書きをやめて --text-xs（12px）＝トークンの下限に合わせる。 */
.detail-stat__label {
  font-size: var(--text-xs);
  font-weight: 700;
  line-height: 21.7px;
  color: var(--ink-500);
}

/* 数値が主役（20px）。単位と補足は小さく添える */
.detail-stat__value {
  display: flex;
  align-items: baseline;
  gap: 4px;
  /* comp は 20px。--text-lg(18) でも --text-xl(22) でもないので直値（タブ帯と同じ扱い） */
  font-size: 20px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--ink-900);
}

/* 【長い値は小さくして1行に収める】「適度なアップダウン」は20pxだとタイル幅を超えて2行になり、
   その列だけ高さが変わる（作者の指摘・2026-08-26）。値の文字数で判断する（course-layout-card.js） */
.detail-stat__value--long {
  font-size: var(--text-sm);
}

.detail-stat__unit {
  font-size: 10px;
  font-weight: 400;
}

.detail-stat__note {
  font-size: 12px;
  color: var(--ink-500);
}

/* ── 口コミカード（Figma 109:5717） ─────────────────────────────────
   概要文 → 満足度（4軸） → 特徴（3軸） → 県内ランキングのタイル。
   バーは既存の .rating-breakdown（css/views-filters-misc.css）をそのまま使う。 */
.detail-review-card .review-summary {
  /* 【下に余白を持たせる】.detail-card__block の上マージンは :first-of-type で消えるので、
     概要文と「満足度」の見出しがくっつく（2026-08-26 実測で 0px）。
     **節の間と同じ32px**にする（--space-5 の24pxではまだ詰まって見えた。作者の指摘・同日。
     comp も概要文の下16px＋カードのgap16px＝32px） */
  margin: 0 0 var(--space-6);
  font-size: var(--text-sm);
  line-height: 1.7;
  /* 【--text は未定義】ホールマップ節だけが使う別系統の語彙で、ここに1行だけ持ち込まれていた。
     同じ役割の .detail-layout__lead は --ink-900（2026-08-26 の監査） */
  color: var(--ink-900);
}

/* タイルは4枚→3枚の2段（Figma）。**枚数が変わっても崩れないように grid で折り返す**
   （順位を持たない軸はタイルごと出さないので、5枚や6枚になることがある）
   【`.detail-review-card` で囲まない】同じタイルを静的HTML（scripts/prerender-course.mjs）も
   出すので、口コミカードの中でしか効かない形にしない（2026-08-26 / issue #54） */
.review-ranks {
  list-style: none;
  margin: var(--space-2) 0 var(--space-3);
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-2);
}

.review-rank {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-3);
  /* 【8px】comp（Figma 109:5717）は8px。同じ形の .detail-stat（コース概要のタイル）も
     8pxなので揃える（作者の指示・2026-08-26。ここだけ12pxだった） */
  border-radius: var(--radius-sm);
  background: var(--surface-sunken);
}

/* いちばん良い順位の軸だけ色を付ける（Figma の緑のタイル） */
.review-rank--best {
  background: var(--accent-light);
}

.review-rank__label {
  font-size: var(--text-xs);
  font-weight: 700;
  line-height: 1.4;
  /* Figma は rgba(20,24,26,0.64)。トークンで近いのは --ink-500 */
  color: var(--ink-500);
}

.review-rank__value {
  font-size: 12px;
  color: var(--ink-900);
}

.review-rank__value b {
  margin-right: 2px;
  font-size: 20px;
  font-variant-numeric: tabular-nums;
}

.review-rank__avg {
  font-size: var(--text-xs);
  color: var(--ink-500);
}

@media (max-width: 700px) {
  /* 375px では4列だとタイルが70px弱になり「フェアウェイの広さ」が3行になる。2列にする */
  .review-ranks {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ホールがまだ無いコース（Figma 124:325）。文とリクエスト導線だけ */

.detail-layout__empty {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
}

.detail-layout__empty-text {
  margin: 0;
  font-size: var(--text-xs);
  line-height: 16.8px;
  color: var(--ink-500);
}

.detail-layout__request {
  min-height: 40px;
  border-radius: var(--radius-pill);
  padding-inline: 17px;
  font-size: var(--text-xs);
  font-weight: 700;
}

/* カードの中では節の見出しと中身の間隔をカード側の作法に合わせる
   （既存の .detail-section は余白を自分で持っているので、カードの中では殺す） */
.detail-layout-card .detail-section {
  margin-bottom: 0;
}

@media (max-width: 700px) {
  .detail-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* 「これまでの開催 ◯件」。行の中でリンクと同じ見た目にする（押すと一覧のモーダル） */
/* SNSの行（公式サイトの下）。リンクを横に並べる。文字はプラットフォーム名だけで、
   アカウント名は出さない（作者の指示・2026-08-30。並べたときに形が崩れない） */
.course-sns {
  display: inline-flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-4);
}

.detail-facts__more {
  padding: 0;
  border: 0;
  background: none;
  color: var(--accent);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
  text-align: left;
}

.detail-facts__more:hover {
  text-decoration: underline;
}

/* 一覧モーダル（js/components/modal.js の openListModal）。中身は .detail-facts の表。
   表が2つ（プロ・連盟／過去のアマ大会）並ぶので、間を空けて区切りが分かるようにする */
.list-modal__body .detail-facts + .detail-facts {
  margin-top: var(--space-5);
}

/* 最終行の罫線は出さない（次の見出しとの間に線だけが浮く。作者の指摘・2026-08-26） */
.detail-facts__row:last-child {
  border-bottom: 0;
}

.detail-facts__value a {
  color: var(--accent);
}

/* 3本の行（プレー日・スタート時間・詳細条件）の中の文字。枠（ピル）は
   プレー日・スタート時間が .sidebar-picker__toggle、詳細条件が .sidebar-accordion__summary。 */
.detail-plan__field-label {
  flex: none;
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--ink-500);
}

.detail-plan__field-value {
  flex: 1 1 0;
  min-width: 0;
  text-align: right;
  font-size: var(--text-sm);
  letter-spacing: -0.011em;
  color: var(--ink-900);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* プラン一覧モーダルの条件行（プレー日・スタート時間・詳細条件）。
   カードと同じ .detail-plan__fields をそのまま入れるので、幅と余白だけ整える。 */
.plans-modal__fields {
  /* 【罫線を引かない】一番上のプランカードの上辺にくっついて二重線に見える
     （作者の指摘・2026-08-26）。条件行とプランの区切りは余白だけで足りる。
     【左右は持たない】この要素は .modal（padding 24px）の直下なので、左右を足すと
     下のプラン行より24px内側にずれる（2026-08-26 の監査で実測） */
  padding: 0 0 var(--space-4);
}

.plans-modal__fields .detail-plan__fields {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

/* 詳細条件のパネルはモーダルの中でも**下に押し出さず**重ねて出す（カードと同じ作法） */
.plans-modal__fields .detail-plan__filters > .sidebar-accordion__body {
  max-height: min(320px, 50vh);
}

@media (max-width: 700px) {
  .plans-modal__fields {
    padding: 0 0 var(--space-3);
  }
}

/* 「すべてのプランを見る（N件）」。カードには5件までしか並べない（残りはモーダル） */
.detail-plan__more {
  width: 100%;
  min-height: 40px;
  margin-top: var(--space-3);
  padding: 10px var(--space-4);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-pill);
  background: var(--surface);
  color: var(--ink-900);
  font-size: var(--text-xs);
  font-weight: 700;
  cursor: pointer;
}

.detail-plan__more:hover {
  background: var(--surface-sunken);
}

/* 料金の断りは一覧の下に1回だけ（行ごとに繰り返さない） */
.detail-plan__note {
  margin: var(--space-2) 0 0;
  font-size: 12px;
  color: var(--ink-500);
}

/* 詳細条件。閉じているときは他の2行（プレー日・スタート時間）と同じピルに見せ、
   開くと検索トップと同じ条件パネルをその場に出す（ページは移らない） */
.detail-plan__filters {
  width: 100%;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-pill);
  background: var(--surface);
}

/* 開いてもレイアウトを押し下げない（プレー日のカレンダーと同じ作法＝トグルの真下に絶対配置）。
   作者の指示は「トップページのようにポップアップで出す」なので、行の高さは変えない */
.detail-plan__filters {
  position: relative;
}

.detail-plan__filters > .sidebar-accordion__summary {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 44px;
  padding: 9px 17px;
  list-style: none;
  cursor: pointer;
}

.detail-plan__filters > .sidebar-accordion__summary::-webkit-details-marker {
  display: none;
}

.detail-plan__filters .detail-plan__field-value {
  flex: 1 1 0;
  text-align: right;
}

/* アコーディオン既定のシェブロンは使わない（他の2行と大きさ・余白が違い、値の右端がずれる） */
.detail-plan__filters > .sidebar-accordion__summary::after {
  display: none;
}

/* 開いたら向きを変える（閉じているときは他の2行と同じ「下向き」） */
.detail-plan__filters[open] > .sidebar-accordion__summary .detail-plan__field-chevron {
  margin-top: 3px;
  transform: rotate(-135deg);
}

.detail-plan__filters > .sidebar-accordion__body {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  width: 100%;
  max-height: min(420px, 60vh);
  overflow-y: auto;
  /* 【固定CTA(60)より上】900px以下ではカードがページ最下部にあり、パネルは下へ開く。
     40 のままだと画面下の固定CTA（高さ68px＋safe-area）に潜って**その部分が押せない**
     （2026-08-26 の監査）。モーダル(100)より下は保つ */
  z-index: 70;
  padding: var(--space-3);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  background: var(--surface);
  box-shadow: var(--shadow-lg);
}

/* 注記は行の外に小さく出す（行の高さを崩さない） */
.detail-plan__fields .detail-date__note {
  display: block;
  margin-top: var(--space-1);
  padding-inline: 17px;
  font-size: 12px;
  line-height: 1.5;
  color: var(--ink-400);
}

.detail-plan__field-chevron {
  flex: none;
  width: 8px;
  height: 8px;
  margin-top: -3px;
  border-right: 2px solid var(--ink-400);
  border-bottom: 2px solid var(--ink-400);
  transform: rotate(45deg);
}

.detail-plan__submit {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 40px;
  margin-top: var(--space-4);
  padding-inline: 17px;
  border: 1px solid var(--accent);
  border-radius: var(--radius-pill);
  background: var(--accent);
  color: var(--accent-contrast);
  font-size: var(--text-xs);
  font-weight: 700;
  line-height: 14.4px;
  cursor: pointer;
}

.detail-plan__submit:hover {
  background: var(--accent-dark);
  border-color: var(--accent-dark);
}

/* ── 同じエリアの他のゴルフ場（カード一覧） ─────────────────────
   Figma 75:207 の 174:5848。**このブロックは #app の外**（プリレンダが SEO のために
   退避する唯一の内部リンク経路）なので、ビューの配線が届かない。
   平日/休日の切替は**ラジオと :checked ~ だけ**で作る（JSを増やさない）。
   マークアップは scripts/prerender-course.mjs の siblingLinksHtml が唯一の実装。 */
.sibling-grid {
  max-width: 1200px;
  margin: 0 auto;
  padding: var(--space-6) var(--space-6) var(--space-7);
}

/* ラジオは見せない（操作はラベル＝チップ側で行う）。
   display:none だとキーボードで到達できなくなるので、視覚的にだけ隠す */
.sibling-grid__radio {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.sibling-grid__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

.sibling-grid__title {
  margin: 0;
  font-size: 28px;
  font-weight: 700;
  line-height: 48px;
  color: var(--ink-900);
}

.sibling-grid__switch {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.sibling-grid__switch-label {
  font-size: var(--text-sm);
  color: var(--ink-500);
}

.sibling-grid__chip {
  min-width: 96px;
  padding: 8px var(--space-4);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-pill);
  background: var(--surface);
  color: var(--ink-500);
  font-size: var(--text-xs);
  font-weight: 700;
  text-align: center;
  cursor: pointer;
}

/* 選択中のチップ。ラジオはリストより前にあるので `~` で届く */
#sibling-price-weekday:checked ~ .sibling-grid__head label[for='sibling-price-weekday'],
#sibling-price-holiday:checked ~ .sibling-grid__head label[for='sibling-price-holiday'] {
  background: var(--ink-900);
  border-color: var(--ink-900);
  color: #fff;
}

/* キーボード操作でも選択位置が分かるようにする */
.sibling-grid__radio:focus-visible ~ .sibling-grid__head .sibling-grid__chip {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.sibling-grid__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-4);
}

.sibling-card {
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  background: var(--surface);
  overflow: hidden;
}

.sibling-card__link {
  display: flex;
  flex-direction: column;
  height: 100%;
  color: inherit;
  text-decoration: none;
}

.sibling-card__link:hover .sibling-card__name {
  text-decoration: underline;
}

/* 写真はプリレンダのデータに無いので、写真の無いコースと同じ面で出す */
.sibling-card__media {
  display: block;
  width: 100%;
  /* 【height: auto が要る】img の height 属性（240）が presentational hint として効くため、
     これが無いと aspect-ratio が使われず**ほぼ正方形**になる（実測 0.99。作者の指摘
     「縦長になっている・左右がトリムされている気がする」の正体） */
  height: auto;
  aspect-ratio: 4 / 3;
  /* object-fit が無いと写真が枠に合わせて歪む。検索結果カードと同じく cover で切り取る */
  object-fit: cover;
  background: linear-gradient(160deg, var(--accent-light) 0%, var(--surface-sunken) 100%);
}

.sibling-card__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-4);
}

.sibling-card__name {
  font-size: var(--text-md);
  font-weight: 700;
  line-height: 1.45;
  color: var(--ink-900);
}

.sibling-card__where,
.sibling-card__meta {
  font-size: var(--text-sm);
  color: var(--ink-500);
}

.sibling-card__price {
  margin-top: auto;
  padding: var(--space-4);
  border-top: 1px solid var(--border-color);
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--ink-900);
}

/* 平日/休日の出し分け。**どちらか一方だけを出す** */
#sibling-price-weekday:checked ~ .sibling-grid__list .sibling-card__price--holiday,
#sibling-price-holiday:checked ~ .sibling-grid__list .sibling-card__price--weekday {
  display: none;
}

.sibling-grid__more {
  margin: var(--space-5) 0 0;
  text-align: center;
}

.sibling-grid__more-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 0 var(--space-5);
  border-radius: var(--radius-pill);
  background: var(--accent);
  color: var(--accent-contrast);
  font-size: var(--text-xs);
  font-weight: 700;
  text-decoration: none;
}

.sibling-grid__more-link:hover {
  background: var(--accent-dark);
}

@media (max-width: 900px) {
  .sibling-grid {
    padding-inline: var(--space-4);
  }

  .sibling-grid__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .sibling-grid__title {
    font-size: var(--text-2xl);
    line-height: 1.3;
  }
}

@media (max-width: 560px) {
  .sibling-grid__list {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* 左カラムに借りてきた「同じエリアの他のゴルフ場」。
   退避ブロックは section.view > .container.prerender の形なので、
   左カラムの中では余白と最大幅を打ち消す（.container は 1200px 想定のため）。 */
.detail-redesign__siblings:empty {
  display: none;
}

.detail-redesign__siblings .container.prerender {
  max-width: none;
  padding: 0;
}

.detail-redesign__siblings .sibling-grid {
  max-width: none;
  padding: var(--space-5) 0 0;
}

/* 【左カラムでも3列】752px に3列で1枚 240px（comp は 228.67px）なので収まる。
   2列にしていたが、作者の指示で comp どおり 3列×3行＝9件にする（2026-08-26）。 */
.detail-redesign__siblings .sibling-grid__list {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

@media (max-width: 900px) {
  .detail-redesign__siblings .sibling-grid__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 560px) {
  .detail-redesign__siblings .sibling-grid__list {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ── サイドバーのプラン一覧（Figma 174:4878） ─────────────────
   行の実装は js/components/plan-row.js（.plan-row）が唯一。ここは**360pxの中に
   収める見た目だけ**を上書きする。検索結果の一覧と同じ部品なので、
   あちらの .plan-row を壊さないよう必ず .detail-plan__list の中だけに効かせる。 */
/* 【検索ボタンとの間は16px】カードの gap は12pxなので、一覧の頭だけ足す
   （作者の指示・2026-08-26）。hidden のときは余白ごと消える */
.detail-plan__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  width: 100%;
  margin-top: var(--space-4);   /* 検索ボタンとの間（実測で16pxになることを確認する） */
}

.detail-plan__list .plan-row {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: 17px;
  /* 【border-color は上書きしない】`border` の一括指定は border-color も含むので、
     `.plan-row:hover { border-color: var(--ink-300) }`（同じ詳しさ・先に読まれる）を
     打ち消して**サイドバーの行だけホバーが死んでいた**（2026-08-26 の監査）。
     幅と種類だけを指定して、色はホバー側に譲る */
  border-width: 1px;
  border-style: solid;
  border-color: var(--border-color);
  border-radius: var(--radius-sm);
  background: var(--surface);
  box-shadow: var(--shadow-xs);
}

.detail-plan__list .plan-row:hover {
  border-color: var(--ink-300);
  box-shadow: var(--shadow-sm);
}

.detail-plan__list .plan-row__info {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.detail-plan__list .plan-row__title {
  font-size: var(--text-md);
  font-weight: 700;
  line-height: 24.8px;
  letter-spacing: -0.02em;
  color: var(--ink-900);
}

/* 【行を横に並べない】360px では料金とボタンが1行に収まらない。
   comp は 750px 幅のサイドバーを想定していないので、縦に積む */
.detail-plan__list .plan-row__footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
}

.detail-plan__list .plan-row__price-value {
  font-size: var(--text-lg);
  font-weight: 700;
  line-height: 27.9px;
  letter-spacing: -0.024em;
  color: var(--ink-900);
}

.detail-plan__list .plan-row__actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

/* 【時間チップは横スクロール】クラスは .plan-times（plan-row.js が持つ名前）。
   360px のサイドバーでは6枠が収まらず、実測で 290px の枠に 1,146px 出ていた。
   **入れ物の名前を間違えると気づけない**ので、はみ出し幅を測って確認すること。 */
.detail-plan__list .plan-times {
  overflow-x: auto;
  scrollbar-width: thin;
  flex-wrap: nowrap;
}

/* 【検索ボタンとの間は16px】カードの中の縦の刻みは16px（値段の箱・条件の3行・検索ボタン・
   プラン一覧がすべて margin-top: 16px）。ここだけ 0 だったので、プランが0件の日に
   ボタンとテキストがくっついて見えていた（作者の指摘・2026-08-27。実測 0px → 16px）。
   一覧モーダルの中（.plans-modal__body の唯一の子）でも同じ余白でよい */
.detail-plan__empty {
  margin: var(--space-4) 0 0;
  font-size: var(--text-xs);
  color: var(--ink-500);
}

/* ── 料金の県内での位置（js/components/price-position.js） ──────────────
   静的HTMLとSPAの両方で使う。**列1本＝1つの価格帯**で、高さは件数の比。
   デザインはこれから決める前提の素の形（2026-08-27）。 */
.price-pos {
  list-style: none;
  margin: var(--space-3) 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

/* 【ラベルの下に金額】左右に離すと右端の金額がヒストグラムの最大料金に見える
   （作者の指摘・2026-08-27） */
.price-pos__head {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-bottom: var(--space-2);
}

.price-pos__label {
  font-size: var(--text-sm);
  color: var(--ink-500);
}

.price-pos__value {
  font-size: var(--text-lg);
  font-variant-numeric: tabular-nums;
  color: var(--ink-900);
}

/* 価格帯のヒストグラム。左が安い帯・右が高い帯 */
.price-bands {
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  align-items: end;
  gap: 3px;
  height: 64px;
  margin: var(--space-2) 0 6px;
}

/* 列1本（押すとその価格帯のコース一覧） */
.price-band {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 2px;
  height: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  position: relative; /* ツールチップ（[data-tooltip]:hover::after）の基準 */
}

.price-band:disabled {
  cursor: default;
}

.price-band__bar {
  width: 100%;
  border-radius: 3px 3px 0 0;
  background: var(--border-color);
  transition: background 0.15s ease;
}

/* このコースが入る帯 */
.price-band--current .price-band__bar {
  background: var(--accent);
}

.price-band__count {
  /* 【12px未満にしない（issue #65・2026-08-27）】10pxで24個あり、375pxでの可読性の
     下限を割っていた。件数の最大は45（2桁・全県×全回り方で実測）なので、
     36pxの列に12pxでも収まる */
  font-size: 12px;
  color: var(--ink-500);
  font-variant-numeric: tabular-nums;
}

.price-pos__scale {
  /* 列8本に対して目盛りは1つおき（4つ）。列2本ぶんの幅に1つずつ左寄せで置くと、
     どの列がどの帯かが目で追える */
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 3px;
  font-size: 10px;
  color: var(--ink-500);
  font-variant-numeric: tabular-nums;
}

/* 【モバイルは上下の境目で必ず折り返す（作者の指摘・2026-08-28）】375pxでは
   `¥6,000〜¥7,999` が1行・`¥10,000〜¥12,999` が2行と**桁数で高さが変わり**、
   目盛りの行が不揃いに見えていた。上限だけの帯（`〜¥3,999`）は1要素なので1行のまま。
   デスクトップは幅に余裕があるので折り返さない（横に伸ばしたほうが読みやすい）。 */
@media (max-width: 700px) {
  .price-pos__scale > span > span {
    display: block;
  }
}

.price-pos__note {
  margin: 6px 0 0;
  font-size: var(--text-xs);
  color: var(--ink-900);
}

/* 価格帯のコース一覧（モーダルの中身 / 静的HTMLの「同じ価格帯のゴルフ場」） */
.price-band-list {
  list-style: none;
  margin: var(--space-3) 0 0;
  padding: 0;
}

.price-band-list__item {
  display: flex;
  align-items: baseline;
  /* 【名前の逃げ場を作る（2026-09-02）】行は「料金 / 名前 / 補足 / 評価」の横並びで、
     名前だけが伸び縮みする要素。気候モーダルの補足（`24.9℃ ・ 744m`）は設計者モーダルの
     補足（県名3文字）より広く、375pxで名前が**1文字ずつ折り返して**いた。
     入りきらないときは補足と評価を次の行へ送る。 */
  flex-wrap: wrap;
  gap: var(--space-3);
  padding: 8px 0;
  border-bottom: 1px solid var(--border-color);
  font-size: var(--text-sm);
}

/* 2番目の子＝コース名（リンク or 素のテキスト、「このページ」の行では span で包まれる）。
   クラスが無いので位置で指す。ここだけが余白を吸う */
.price-band-list__item > :nth-child(2) {
  flex: 1 1 9em;
  min-width: 0;
}

.price-band-list__item:last-child {
  border-bottom: 0;
}

.price-band-list__price {
  min-width: 72px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--ink-900);
}

.price-band-list__self {
  margin-left: var(--space-2);
  font-size: 12px;
  color: var(--ink-500);
}

.price-band-list__rest {
  margin: var(--space-2) 0 0;
  font-size: var(--text-xs);
  color: var(--ink-500);
}

/* 同じ価格帯のコース（押さずに見える先頭5件。issue #60）。モーダルの中の一覧と
   同じ .price-band-list を使い、ここでは見出しと「すべて見る」だけを足す。 */
.price-peers {
  margin-top: var(--space-5);
}

.price-peers__title {
  margin: 0 0 var(--space-2);
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--ink-700, var(--ink-900));
  line-height: 1.5;
}

/* 【見出しの右に平日/休日のタブを置く（作者の提案・2026-08-28）】縦に2つ並べると
   12件×2でページが伸び、ヒストグラムから遠いほうは見出しを読まないとどちらの話か
   分からなかった。切り替えにすれば**どちらも12件のまま**1つ分の高さに収まる。
   並べ方は「料金の県内での位置」の 18H/9H と同じ（.tabs--pill-inline）。
   `.tabs--pill-inline` は h2/h3 だけを1列目に置く指定なので、h4 もその仲間に入れる。 */
.tabs.tabs--pill-inline > .price-peers__title {
  grid-column: 1;
  margin-bottom: 0;
}

/* 帯の範囲はパネルの中に出す（平日と休日で帯が違い、見出しは切り替わらないため）。 */
.price-peers__range {
  margin: var(--space-2) 0 0;
  font-size: var(--text-xs);
  color: var(--ink-500);
  font-variant-numeric: tabular-nums;
}

/* 【気候の「◯◯県で9月に涼しいコース」も同じボタン（作者の求め・2026-09-02）】
   同じ「一覧をモーダルで開く」導線なので見た目をそろえる。宣言を2つ書くと
   どちらかだけ直ってズレるので、セレクタを足して共有する（.designer-link と同じ扱い）。 */
.price-peers__more,
.climate-peers__link {
  margin-top: var(--space-2);
  padding: 8px 14px;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-pill);
  background: var(--surface);
  color: var(--ink-900);
  font-size: var(--text-xs);
  font-weight: 700;
  cursor: pointer;
}

.price-peers__more:hover,
.climate-peers__link:hover {
  background: var(--surface-sunken);
}

/* 【中立な名前にした（2026-09-03）】価格帯モーダルの並べ替えで生まれた部品だが、
   設計者モーダルと気温の帯（最高/最低/県内平均の切り替え）でも同じ形を使う＝3か所目。
   `.price-band-sort` のままだと「価格の部品を借りている」ようにしか読めないので改名した
   （js/components/price-position.js に「呼び出し元が増えたら中立な名前に変える」と
   書いてあったのを実行した）。 */
.pill-tabs {
  display: flex;
  /* 設計者モーダルは3つ並ぶ（口コミ評価が高い順／安い順／県ごと）。375px で溢れさせない */
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
}

.pill-tabs__btn {
  padding: 6px 12px;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-pill);
  background: var(--surface);
  color: var(--ink-500);
  font-size: var(--text-xs);
  font-weight: 700;
  cursor: pointer;
}

/* 【選択状態は黒（作者の指摘・2026-09-02「pillタブは選択状態は黒のはずだった」）】
   デザインシステム側の同じ形（css/views-detail.css の `.tabs--pill` の is-active）が
   `--ink-900` を使っている。緑は `.tabs--pill-accent` のほうの変種で、こちらではない。 */
.pill-tabs__btn.is-active {
  border-color: var(--ink-900);
  background: var(--ink-900);
  color: #fff;
}

.pill-tabs__btn:hover {
  background: var(--surface-sunken);
}

/* 見出しと同じ行に置く小さいピル（css/views-detail.css の `.tabs--pill-sm` と同じ寸法）。
   32px のままだと見出しの行が高くなり、行の中で縦位置がそろわない。気温の帯が使う */
.pill-tabs--sm > .pill-tabs__btn {
  padding: 3px 10px;
  font-size: 12px;
}

/* 選択中は hover で色が動かない（`.tabs--pill` と同じ挙動） */
.pill-tabs__btn.is-active:hover {
  background: var(--ink-900);
}

/* 一覧の行に出す補足（設計者モーダルの県名）。評価は margin-left:auto で右端に寄るので、
   これは名前のすぐ後ろに置く。価格帯モーダルは同じ県内なので note を渡さない＝出ない */
.price-band-list__note {
  font-size: var(--text-xs);
  color: var(--ink-500);
  white-space: nowrap;
}

/* 「コース情報」の設計者名（押すと同じ設計者のゴルフ場一覧が開く）。
   表の行の中に置くので、ボタンではなく**本文と同じ大きさのリンク**に見せる
   （周りの行は文字なので、ボタンの箱を並べると設計者だけが浮く） */
.designer-link {
  display: inline;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}

.designer-link:hover {
  text-decoration-thickness: 2px;
}

/* 手がけたコース数。押す前に「何件あるか」がわかると、開くかどうかを決められる */
.designer-link__count {
  margin-left: 3px;
  font-size: var(--text-xs);
  color: var(--ink-500);
  text-decoration: none;
  font-variant-numeric: tabular-nums;
}

.designer-link__count::before {
  content: '(';
}

.designer-link__count::after {
  content: ')';
}

/* 一覧の行に出す口コミ評価（並べ替えの根拠が見えるように） */
.price-band-list__rating {
  margin-left: auto;
  padding-left: var(--space-3);
  font-size: var(--text-xs);
  color: var(--ink-500);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  /* 【評価が無い行でも同じ幅を取る（作者の報告・2026-09-02）】`★4.4` のぶん
     （box-sizing: border-box なので padding-left も含んだ幅）。ここが0幅だと、
     その行だけ手前の列（気温・県名）が★の位置まで右へ滑る。
     **偽の「★0.0」を隠して置く手は採らない**（この一覧は静的HTMLにも出るので、
     見えない評価の文字がページの中身として残る） */
  min-width: 3.6em;
  text-align: right;
}

/* 一覧の中の外部リンク（ページを持たないコースは楽天GORAへ） */
.price-band-list__ext {
  margin-left: 6px;
  font-size: 12px;
  color: var(--ink-500);
}

/* 「月別の気温」の月別の帯（issue #108）。
   【数字は必ず文字でも出す】バーは補助で、読むのは下の数字（料金の位置の節と同じ方針）。
   12列を375pxに収める必要があるので、1列あたり約26px（343 / 12 ≒ 28）に収まる寸法にする。 */
/* 帯の見出しの行。**見出しと同じ行の右にピル**（作者の求め・2026-09-02）。
   料金の 9H/18H と同じ形。狭いときはピルが下の行へ回る（375pxでは3つ並べる幅が無い） */
.climate-graph-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-3);
  margin: var(--space-4) 0 0;
}

.climate-graph-title {
  margin: 0;
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--ink-900);
}

.climate-series {
  margin: 0;
}

.climate-strip {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 2px;
  list-style: none;
  padding: 0;
  margin: var(--space-2) 0 0;
  /* 【幅は器いっぱい（作者の求め・2026-09-02）】480px で止めていたのでデスクトップだと
     カードの左半分に寄っていた。列が広がるぶんバーも太くなる（下の __bar は割合指定）。 */
}
.climate-strip__col {
  display: grid;
  /* バー / 気温 / 月 の3段。バーの行だけ高さを固定して、値の大小が高さで読めるようにする */
  grid-template-rows: 40px auto auto;
  align-items: end;
  justify-items: center;
  gap: 2px;
}
.climate-strip__bar {
  /* 列幅に対する割合にして、狭い画面では従来どおり（375px で列23.9px → 約14px）、
     広い画面では列が広がるぶん太くなるようにする。太くなりすぎる手前で止める */
  width: 60%;
  max-width: 32px;
  border-radius: 2px 2px 0 0;
  background: var(--accent-light-strong);
}
.climate-strip__col.is-peak .climate-strip__bar {
  background: var(--accent);
}
.climate-strip__temp {
  white-space: nowrap;
  /* 【単位を足したので1段小さくする】`10月` は var(--text-xs)=12px だと375pxの列(約24px)に
     収まらない。11px にすると収まる（実測）。表のほうは var(--text-sm) のままなので、
     数字を読むのは表・帯は形を見るもの、という役割分担は変わらない */
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  color: var(--ink-700);
}
.climate-strip__col.is-peak .climate-strip__temp {
  font-weight: 700;
  color: var(--ink-900);
}
.climate-strip__month {
  /* 【折り返させない（2026-09-02 の実測で発覚）】`10月` が375pxの列に収まらず2行になり、
     帯の下がガタついていた。はみ出しの検査（scrollWidth > clientWidth）は**折り返すと
     引っかからない**ので見落としていた。収まる大きさまで落として、折り返しを禁止する */
  white-space: nowrap;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  color: var(--ink-500);
}

/* これからの3か月の表（issue #108）。4列×3行しかないので横スクロールに倒さず、
   375px にそのまま収める（.prerender-table は min-width 720px なので使えない）。 */
.climate-table {
  border-collapse: collapse;
  /* 帯と同じく器いっぱい（作者の求め・2026-09-02）。上下で幅がそろっていないと、
     表の「9月」と帯の「9月」が同じ列に見えない */
  width: 100%;
  margin: var(--space-3) 0 0;
  font-size: var(--text-sm);
  font-variant-numeric: tabular-nums;
  /* 【列幅を決め打つ（作者の求め・2026-09-02）】自動レイアウトだと4列が器いっぱいに
     広がり、数字が右端まで散っていた。上の「コース」の表と縦のラインをそろえる */
  table-layout: fixed;
}
.climate-table th,
.climate-table td {
  /* 【左の余白は取らない】余白があると文字の左端が列の境界から8pxずれ、上の表とそろわない
     （実測でそうなった）。列の境界＝文字の左端にする */
  padding: var(--space-1) var(--space-2) var(--space-1) 0;
  border-bottom: 1px solid var(--border-color);
  /* 【左寄せでラインをそろえる】値の**左端**が上の表の値と同じ位置に来るようにする。
     右寄せだと列の右端でしかそろわず、上の表（値は左寄せ）とは重ならない */
  text-align: left;
  white-space: nowrap;
}
/* 月の列は上の表のラベル列と同じ幅にする（.detail-facts__row の grid-template-columns と
   同じ 153px）。これで「最高」の値が上の表の値と同じ縦線から始まる */
.climate-table th:first-child,
.climate-table td:first-child {
  width: 153px;
  font-weight: 700;
}
/* 最高・最低は内容ぶんだけ。余りは最後の列（県内平均）が持ち、右に余白が出る
   （作者の指示・2026-09-02「右にスペースができてもいい」） */
.climate-table th:nth-child(2),
.climate-table td:nth-child(2),
.climate-table th:nth-child(3),
.climate-table td:nth-child(3) {
  width: 110px;
}
.climate-table thead th {
  color: var(--ink-500);
  font-weight: 600;
  font-size: var(--text-xs);
}
.climate-table thead th:first-child {
  font-weight: 600;
}
/* 県内平均は「比べる相手」なので、自分の値より弱く見せる */
.climate-table .is-area {
  color: var(--ink-500);
}

/* 【モバイルは詰める（作者の指示・2026-09-02「モバイルではスペースの確保が難しいので
   今のままでいい」）】375px では153pxの列を置くと数字の居場所が無くなる。
   自動レイアウトに戻し、数字は右寄せで列の右端にそろえる */
@media (max-width: 700px) {
  .climate-table {
    table-layout: auto;
  }
  .climate-table th,
  .climate-table td {
    padding: var(--space-1) var(--space-2);
    text-align: right;
  }
  .climate-table th:first-child,
  .climate-table td:first-child,
  .climate-table th:nth-child(2),
  .climate-table td:nth-child(2),
  .climate-table th:nth-child(3),
  .climate-table td:nth-child(3) {
    width: auto;
  }
  .climate-table th[scope='row'],
  .climate-table thead th:first-child {
    text-align: left;
  }
}

/* 「◯◯県で9月に涼しいコース」を開くボタン */
.climate-peers {
  margin: var(--space-3) 0 0;
  font-size: var(--text-sm);
}

/* 「ニュース」（issue #116）。出すのは日付・題名・出典リンクだけ。
   一覧の見た目は価格帯モーダルの行（.price-band-list）と同じ語彙にそろえる
   ＝読者が既に知っている形になり、CSSも写経しないで済む。 */
.course-news {
  list-style: none;
  margin: 0;
  padding: 0;
}

.course-news__item + .course-news__item {
  border-top: 1px solid var(--border-color);
}

.course-news__link {
  display: flex;
  gap: var(--space-2);
  align-items: baseline;
  padding: 10px 0;
  color: inherit;
  text-decoration: none;
}

.course-news__link:hover .course-news__title {
  text-decoration: underline;
}

/* 日付は折り返さない（鮮度の判断に使うので、題名より先に読ませたい） */
.course-news__date {
  flex: 0 0 auto;
  color: var(--ink-500);
  font-size: var(--text-xs);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.course-news__title {
  font-size: var(--text-sm);
  font-weight: 700;
}

/* 375px では日付と題名を縦に積む（横並びだと題名が2〜3文字ずつになる） */
@media (max-width: 480px) {
  .course-news__link {
    display: block;
  }

  .course-news__date {
    display: block;
    margin-bottom: 2px;
  }
}