/* css/views-detail-rest.css
   【後回し分（issue #104）】css/views-detail.css から出した、**初回画面に当たらない**規則。
   index.html で media="print" → onload で当てる＝ダウンロードはすぐ始まるが描画は止めない。
   中身はタブの中（料金・レイアウト/ホール・動画・口コミ）、ハザード表、ホールマップ、
   モーダル、スケルトンなど。**初回画面に出るものをここへ移さない**（移すと初期表示が崩れる）。
   分け方の実測手順は css/views-detail.css の冒頭。
*/
/* ==========================================================================
   11. コース詳細ページ
   ========================================================================== */
.detail-back-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--ink-700);
  margin-bottom: var(--space-4);
}

.detail-back-link:hover {
  color: var(--accent-dark);
}

/* 写真は右カラム上部（またはモバイル最上部）。全幅ヒーローをやめ、列幅に対して 3:2 の
   ランドスケープで表示する（画像上に文字は乗せない＝可読性優先）。 */
.detail-hero {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  aspect-ratio: 3 / 2;
}

.detail-hero__image {
  position: absolute;
  inset: 0;
}

.detail-hero__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, 0.55) 100%);
}

.detail-hero__content {
  position: relative;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: var(--space-2);
  padding: var(--space-5);
  color: #fff; /* 意図的な例外: 暗い写真スクリム上の白文字（トークン化しない） */
}

.detail-hero__title {
  font-size: var(--text-2xl);
  color: #fff;
}

.detail-hero__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  font-size: var(--text-sm);
  color: rgba(255, 255, 255, 0.92);
}

/* コース写真ギャラリー（#30a）: メイン大写真 + サブサムネイル横列（booking.com のホテル詳細風）。
   写真0〜1枚（mock 含む）はサムネ列が hidden のままで現行の1枚表示と同じ見た目になる。 */
.detail-gallery {
  /* 余白はレイアウトグリッドの gap が持つ（モバイルは行gap、デスクトップは右カラム内の row-gap）。 */
  margin: 0;
  /* .detail-main と同じ理由で必須（実測 2026-07-31）: これが無いと grid item の
     min-width:auto により、サムネ列（.detail-gallery__thumbs は 96px × 写真枚数）の
     intrinsic 幅がトラックへ伝播する。375px 幅・写真5枚で 1fr トラックが 343→516px に
     広がり、右 157px がビューポート外へ出ていた（body の overflow-x:clip が溢れを
     切り捨てるため「横スクロールは 0」に見えるが、実際には見えず触れない）。
     実害: プレー日フィールドの日付値・カレンダーの金土列・「次の月」ボタンが画面外。 */
  min-width: 0;
}

/* サムネ列: モバイル375pxでも崩れないよう横スクロール1列に閉じ込める */

.detail-gallery__thumbs {
  display: flex;
  gap: var(--space-2);
  margin-top: var(--space-2);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  padding: 2px; /* 選択枠線・フォーカスリングのクリップ防止 */
}

/* モバイル: 単一カラム。DOM順（ギャラリー→本文→サマリー）でそのまま縦積み＝画像が最上部。 */
.detail-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
}

/* grid item の min-width:auto により子（時間チップ列など）の intrinsic 幅が
   親に伝播して横溢れするのを防ぐ。.plan-times の overflow-x:auto を効かせる前提 */
.detail-main {
  min-width: 0;
}

/* コース名・所在地・評価の左カラム見出し（画像上オーバーレイの置き換え）。 */
.detail-heading {
  margin-bottom: var(--space-6);
}

.detail-heading__title {
  font-size: var(--text-2xl);
  font-weight: 700;
  color: var(--ink-900);
  margin-bottom: var(--space-2);
}

.detail-heading__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--text-sm);
  color: var(--ink-700);
}

/* デスクトップ: 左=本文（見出し＋各セクション）、右=画像→サマリー（min-content 1fr で
   右カラムを上詰めに密着させる。実測で確認済み）。 */
@media (min-width: 960px) {
  .detail-layout {
    grid-template-columns: minmax(0, 1fr) 320px;
    grid-template-rows: min-content 1fr;
    grid-template-areas:
      'main gallery'
      'main summary';
    align-items: start;
    column-gap: var(--space-6);
    row-gap: var(--space-5);
  }
  .detail-layout > .detail-gallery {
    grid-area: gallery;
  }
  .detail-layout > .detail-main {
    grid-area: main;
  }
  .detail-layout > .detail-summary-card {
    grid-area: summary;
  }
}

.detail-section {
  margin-bottom: var(--space-6);
}

.detail-section__title {
  font-size: var(--text-lg);
  font-weight: 700;
  margin-bottom: var(--space-3);
}

/* コース情報セクション内の属性ピル列（コースデータ定義リストの下）。
   旧 detail.js のインライン style="margin-top: 12px" をこちらへ集約。 */
.detail-section .course-card__tags {
  margin-top: var(--space-3);
}

.tabs__tab:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* ── ピル型のタブ（.tabs--pill） ─────────────────────────────────────
   **1つの実装をコース区分（OUT/IN）・コース動画のチャンネル/ラウンドで共有する**
   （2026-08-26 の作者の指摘「別のコンポーネントになっている？」。以前はレイアウトカードと
   動画で別々に書いており、動画側だけホバーが濃色になっていた）。
   マークアップは共通の tabsHtml（.tabs > .tabs__list > .tabs__tab）そのままで、
   使う側は className: 'tabs--pill' を渡すだけ。

   **`.tabs.tabs--pill` と重ねる**のは、コース詳細では外側の濃色タブ帯
   （.detail-tabs .tabs__list / .tabs__tab＝クラス2つ）の中に入るため。同じ詳しさだと
   後から読まれるあちらが勝ち、列の地色が濃色のまま残る（2026-08-26 実測）。
   **直下の子だけに当てる**のは、コース動画がチャンネル→ラウンドの2段（入れ子のタブ）で、
   子孫セレクタだと下の段まで親の色になるため（2026-08-26 実測: ラウンド行が緑になっていた）。 */
.tabs.tabs--pill > .tabs__list {
  min-height: 0;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
  padding: 2px;
  border-bottom: 0;
  background: transparent;
  justify-content: flex-start;
  /* 数が多いとき（36Hの4区分・7チャンネル・12ラウンド）は横スクロール。折り返さない */
  overflow-x: auto;
  scrollbar-width: thin;
}

.tabs.tabs--pill > .tabs__list > .tabs__tab {
  flex: none;
  /* 基本の幅は128px、長いラベルは左右16pxの余白ぶんだけ伸びる（作者の指示・2026-08-26） */
  min-width: 128px;
  /* 【高さは固定する】行の高さは置いた場所（カード・ホールマップ）で違い、同じ指定でも
     32px と 36px にずれていた（2026-08-26 実測）。
     【縦中央は自分で指定する（作者の指摘・2026-08-28）】上のコメントは「ボタンは中身を
     縦中央に置く」と書いていたが、**切り替えるものが無いときのラベルは `<span>`**
     （js/components/price-position.js。回り方が1つのコースは押すものが無いのでタブにしない）で、
     span には UA の中央寄せが効かず**文字が上へズレていた**。ボタンでもラベルでも同じに
     なるよう flex で揃える */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 32px;
  min-height: 0;
  margin-bottom: 0;
  padding: 0 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;
  letter-spacing: normal;
  text-align: center;
}

.tabs.tabs--pill > .tabs__list > .tabs__tab:hover {
  background: var(--surface-sunken);
}

.tabs.tabs--pill > .tabs__list > .tabs__tab.is-active {
  border-color: var(--ink-900);
  background: var(--ink-900);
  color: #fff;
}

.tabs.tabs--pill-inline > .tabs__list {
  grid-column: 2;
  /* .tabs__list の既定の下マージン（--space-5）はここでは邪魔になる */
  margin-bottom: 0;
}

/* 見出しの横に置く小さいピル。128px幅・32px高は見出しの行には大きすぎる
   （2〜3文字のラベルしか載らない） */
.tabs.tabs--pill.tabs--pill-sm > .tabs__list > .tabs__tab {
  min-width: 0;
  height: 26px;
  padding: 0 var(--space-3);
  /* 当たり判定を広げる ::before の基準（issue #65） */
  position: relative;
}

/* 【当たり判定を広げるには箱のクリップを先に外す】`.tabs--pill` の `.tabs__list` は
   `overflow-x: auto`（横スクロール）で、**overflow-y も auto になる**ため、下の ::before は
   縦にはみ出したぶんがクリップされて当たらなかった（2026-08-28 のブラウザ実測。
   `elementFromPoint` が枠の外でヒットしなかった）。paddingで箱を広げ、marginで戻す。 */
.tabs.tabs--pill.tabs--pill-sm > .tabs__list {
  padding: 5px 0;
  margin: -5px 0;
}

/* 【見た目は26pxのまま当たり判定だけ広げる（issue #65）】375pxの実測でページ内の
   タップ領域の下位に入っていた（43.6 × 26）。高さを増やすと見出しと同じ行に置いた
   レイアウト（.tabs--pill-inline）が崩れるので、`.info-tip` と同じやり方で重ねる。
   **横には広げない**（隣のピルと重なって取り違えが起きる）。
   実測（2026-08-28・375px）: 縦の当たり判定 26px → **34px**（絶対配置の基準は
   相対配置した要素の**パディングボックス**なので、1pxの枠のぶんだけ36pxより小さい）。 */
.tabs.tabs--pill.tabs--pill-sm > .tabs__list > .tabs__tab::before {
  content: '';
  position: absolute;
  inset: -5px 0;
}

/* 選択中を緑にする段（コース動画のチャンネル行）。2段が同じ色だとどちらの段を
   操作したのか分からない＝作者のデザイン案（Figma 238:9498）の要点。
   **直下の列だけ**に当てる（入れ子のラウンド行まで緑になる） */
.tabs.tabs--pill-accent > .tabs__list > .tabs__tab.is-active {
  border-color: var(--accent);
  background: var(--accent);
  color: #fff;
}

/* ==========================================================================
   節の導入文（.section-lead）と「ラベル＋値」の行リスト（.spec-list）。
   ハザード（js/components/hazard-section.js）と県内順位
   （js/components/ranking-section.js）が共有する。SPAのコース詳細と、コースページの
   静的HTML（scripts/prerender-course.mjs）が**同じマークアップ**を出すので、
   どちらの文脈でも成立するように .detail-* に依存しないクラスで書く。
   （2026-08-11 に .hazard-lead / .hazard-summary から改名して共通化。2つ目の利用者が
   出た時点でコピペせず元を汎用化する＝CLAUDE.md の再利用ファースト）
   ========================================================================== */
.section-lead {
  max-width: 640px;
  margin: 0 0 var(--space-4);
  color: var(--ink-700);
}
/* 分母・取得時点のような「主張の前提」を1行で置く用（js/components/ranking-section.js）。
   文ではなく注記なので本文より小さく淡く。行ごとに同じ語を繰り返さないための集約先。 */
.section-caption {
  max-width: 640px;
  margin: 0 0 var(--space-3);
  color: var(--ink-500);
  font-size: var(--text-sm);
}
.spec-list {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--space-5);
  max-width: 640px;
}
.spec-list li {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--border-color);
}
@media (min-width: 480px) {
  .spec-list li {
    flex-direction: row;
    flex-wrap: wrap;
    gap: var(--space-2) var(--space-3);
  }
}
/* 狭幅（375px）ではラベルを値の上に積む。2カラムのままだと「池・川が絡むホール」が
   2行に折れ、値の「36ホール中 13ホール（36%）」も折れて、行の高さがばらついた（実測）。 */
.spec-list li span {
  flex-shrink: 0;
  color: var(--ink-500);
  font-size: var(--text-sm);
}
@media (min-width: 480px) {
  .spec-list li span {
    width: 9.5em; /* 「池・川が絡むホール」が折り返さない幅（span は --text-sm） */
  }
}
.spec-list li b {
  flex: 1;
  min-width: 0;
  color: var(--ink-900);
  font-variant-numeric: tabular-nums;
}
/* 県内順位の強調（「同率6位」「+0.7」）。数字が主役なので色は使わず字面で立てる。 */
.spec-list li b .spec-list__accent {
  font-weight: 700;
}
.spec-list li b .spec-list__sub {
  margin-left: 0.5em;
  color: var(--ink-500);
  font-size: var(--text-sm);
  font-weight: 400;
}

/* ホール別の表。4列しかないので狭幅でも横スクロールは起こらないが、区分名が
   「オールドコースOUT」のように長くなるためタブ列（.tabs__list）は横スクロールする。 */
/* ドラコン(D)・ニアピン(N)推奨ホールの印。H セルの中に小さく置く（列を増やすと375pxで
   横スクロールが出るため。js/components/hazard-section.js）。文字は2文字までなので円形。 */
.hazard-table__hole-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  margin-left: 4px;
  border-radius: var(--radius-pill);
  background: var(--surface-sunken);
  /* --ink-500 では 4.36:1 で AA（4.5:1）に届かない（10px/700 は large text 扱いにならない）。
     2026-08-11 の実測で判明 → --ink-700 に上げる */
  color: var(--ink-700);
  font-size: 12px;
  font-weight: 700;
  vertical-align: middle;
}
/* 凡例の D/N は記号（●○）と違い文字なので、丸の中に収める見た目に合わせる */
.hazard-legend__mark--letter {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: var(--radius-pill);
  background: var(--surface-sunken);
  color: var(--ink-700);
  font-size: 12px;
  font-weight: 700;
}

.hazard-table-wrap {
  /* 【表は全幅】comp（Figma 98:3269）で 640px なのは表の**上の段落**（98:3536）で、
     表本体（98:3538）はカード幅いっぱい（718px）。上限が段落と入れ替わっていた
     （作者の指示・2026-08-26。デスクトップで表だけ78px狭かった） */
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  /* **絶対配置の子をこの枠に閉じ込める。** 見出しの `.visually-hidden`（動画列など）は
     position:absolute なので、包含ブロックが外にあるとスクロール枠の外へ出て
     **ページ全体を横に広げる**。375px・7列で20px溢れた（2026-08-13 実測。
     プランタブでは溢れず、表を display:none にすると解消することで特定）。 */
  position: relative;
}
.hazard-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
  font-variant-numeric: tabular-nums;
}
.hazard-table th,
.hazard-table td {
  padding: var(--space-2) var(--space-3);
  /* 375px では「ストレート」を含む4〜5列が 343px に収まらず、写真列から潰れる */
  border-bottom: 1px solid var(--border-color);
  /* 見出し・本文・合計をすべて左揃えで統一する。以前は基準が right・ホール番号だけ left・
     池川だけ center の3種混在で、見出しと値の位置も列ごとに食い違っていた（2026-08-08 指摘）。 */
  text-align: left;
  white-space: nowrap;
}
/* 行の高さを固定する。写真（27px）や動画アイコン（18px）は文字より背が高いため、
   列がある区分とない区分で行高が変わり、**タブを切り替えるたびに表の高さが跳ねていた**
   （2026-08-08 指摘）。列の有無に関わらず「ある側」の高さに揃える。 */
/* 【行高を1つの要因で決める】行の高さは「セルの padding（上下8px）＋ line-height（24px）」＝40px
   だけで決まるようにする。基準は 28px＝**いちばん背の高い中身（写真27px）が収まる高さ**。
   動画アイコン（18px）もこの箱の中で中央寄せにする（下の __photo / __video を参照）。
   以前は height・padding・中身の実寸が競合し、動画列のある区分だけ行が高くなって
   **タブ切替で表の高さが跳ねていた**（2026-08-08 指摘・実測で7px差）。 */
.hazard-table tbody th,
.hazard-table tbody td {
  line-height: 28px;
}
.hazard-table thead th {
  color: var(--ink-500);
  font-weight: 600;
  border-bottom: 2px solid var(--border-color-strong);
}
.hazard-table tbody th,
.hazard-table tfoot th {
  color: var(--ink-900);
  font-weight: 700;
}
.hazard-table td {
  color: var(--ink-700);
}
.hazard-table tfoot th,
.hazard-table tfoot td {
  border-bottom: none;
  border-top: 2px solid var(--border-color-strong);
  color: var(--ink-900);
  font-weight: 700;
}
@media (max-width: 420px) {
  .hazard-table th,
  .hazard-table td {
    padding-inline: var(--space-2);
  }
}

/* 池・川の列も左揃え（全列統一）。●/○/− の記号は幅が揃っているので、左に置いても
   「どのホールに池があるか」は縦に追える。 */
/* 池・川の3値（2026-08-07）。● 越え＝越えないと届かない / ○ サイド＝曲げると入る / − 無。
   越えだけをアクセント色にして、ざっと見たとき「プレッシャーのかかるホール」が縦に拾えるようにする。 */
.hazard-table__mark {
  color: var(--ink-300);
}
.hazard-table__mark.is-carry {
  color: var(--accent);
  font-weight: 700;
}
.hazard-table__mark.is-side {
  color: var(--ink-500);
}
.hazard-table__mark.is-on {
  color: var(--accent);
}

/* ホール別テーブルの写真セル（自前写真があるホールだけ）。数字の隣に実際の眺めがある状態が
   このデータの価値そのもの（総数しか持たない他社には作れない）。16:9 のまま小さく出す。 */
.hazard-table__photo {
  /* 375px では表全体が 343px しかなく、既定の padding（左右12px）のままだと
     この列が潰れて写真が 27×27 の正方形になっていた（実測）。列幅と padding を固定し、
     画像側にも min-width を置いて、テーブルレイアウトに縮められないようにする。 */
  width: 56px;
  min-width: 56px;
  padding: var(--space-2) 4px;
  position: relative; /* 中の <a> を絶対配置で浮かせる土台 */
}
.hazard-table__photo a {
  /* 動画セルと同じ理由で絶対配置（img 27px が行ボックスに積まれると行が伸びる）。
     写真列のある区分／ない区分で行高が変わらないようにする。 */
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 0;
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.hazard-table__photo img {
  width: 48px;
  min-width: 48px;
  height: 27px;
  object-fit: cover;
  display: block;
}
.hazard-table__photo a:hover img {
  opacity: 0.85;
}
.hazard-table__photo a:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.hazard-maplink {
  max-width: 640px;
  margin: 0 0 var(--space-3);
  font-size: var(--text-sm);
}
.hazard-maplink a {
  color: var(--accent-dark);
  font-weight: 600;
}

/* 出典・数え方の折りたたみ。
   長い定義文を常時表示すると、数値より注記のほうが目立つ。**出典（誰が調べたか）は
   閉じた状態でも見えるラベルに残し**、数え方の詳細だけを畳む。
   JSではなく <details> なのは、静的HTMLが js/app.js 起動前・no-JS・クローラの環境でも
   読まれるため。ホバーで開く実装にしないのは、タッチ環境で開けなくなるのと、この長さの文が
   浮いた箱で出ると読みにくいため。閉じていても中身はHTMLに存在する。 */
.hazard-note {
  max-width: 640px;
  margin-top: var(--space-4);
}
.hazard-note__toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-pill);
  background: var(--surface);
  font-size: var(--text-xs);
  color: var(--ink-500);
  cursor: pointer;
  list-style: none;
}
.hazard-note__toggle::-webkit-details-marker {
  display: none;
}
.hazard-note__toggle::after {
  content: '＋';
  color: var(--ink-400);
}
.hazard-note[open] .hazard-note__toggle::after {
  content: '−';
  color: var(--accent);
}
.hazard-note__toggle:hover {
  border-color: var(--ink-400);
  color: var(--ink-900);
}
.hazard-note__body {
  margin-top: var(--space-3);
  font-size: var(--text-xs);
  line-height: 1.7;
  color: var(--ink-500);
}

/* 料金取得に失敗したときの注記（プリレンダHTMLを復元して上に出す）。
   404に見える画面を出さないための保険で、目立たせすぎない（本文が主役）。 */
.detail-stale-notice {
  margin: 0 0 var(--space-4);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  background: var(--surface);
  font-size: var(--text-sm);
  color: var(--ink-700);
}
.detail-stale-notice a {
  margin-left: var(--space-2);
  color: var(--accent-dark);
  font-weight: 600;
}
/* その節だけ引き直すボタン（issue #91・js/components/retry-notice.js）。
   ページ全体のリロード（上の a）と**同じ見た目**にする＝新しい語彙を増やさない。 */
.detail-stale-notice__retry {
  appearance: none;
  background: none;
  border: none;
  padding: 0;
  margin-left: var(--space-2);
  font: inherit;
  color: var(--accent-dark);
  font-weight: 600;
  cursor: pointer;
}
.detail-stale-notice__retry:hover {
  text-decoration: underline;
}
.detail-stale-notice__retry:disabled {
  color: var(--ink-500);
  cursor: default;
  text-decoration: none;
}

/* ハザードの1行サマリー（見出し直下・ハザードを持つコースだけ）。
   タブの中に沈んだハザードへの導線（押すとコース情報タブを開いてスクロール）。
   見た目は .detail-heading__specs と同じ行のトーンで、押せることだけ色で示す。 */
.detail-hazard-brief {
  display: block;
  appearance: none;
  background: none;
  border: none;
  padding: 0;
  margin: var(--space-2) 0 0;
  font-size: var(--text-sm);
  color: var(--accent-dark);
  cursor: pointer;
  text-align: left;
}
.detail-hazard-brief:hover {
  text-decoration: underline;
  text-underline-offset: 2px;
}
.detail-hazard-brief:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* コース規模の1行サマリー（見出し直下・常時表示）。タブを開かなくても規模が分かる。 */
.detail-heading__specs {
  margin: var(--space-2) 0 0;
  color: var(--ink-500);
  font-size: var(--text-sm);
}

/* コース情報の定義リスト（ホール数・パー・全長・コースタイプ・高低差・設計者・練習場・最寄IC）。
   実データが揃ってから表示する（js/views/detail.js の fillCourseSpecs）。行の見た目は
   サマリーカードの .stat-row と揃える（同じ「ラベル / 値」の対）。 */
.detail-specs {
  list-style: none;
  padding: 0;
  margin: 0;
  max-width: 520px;
}

.detail-specs__row {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  padding-block: var(--space-2);
  border-bottom: 1px solid var(--border-color);
  font-size: var(--text-sm);
}

.detail-specs__row:last-child {
  border-bottom: none;
}

.detail-specs__label {
  flex-shrink: 0;
  width: 6.5em;
  color: var(--ink-500);
}

.detail-specs__value {
  flex: 1;
  min-width: 0;
  font-weight: 700;
  color: var(--ink-900);
}

/* ---------------------------------------------------------------------------
   コース詳細の取得待ちスケルトン（js/views/detail-date.js の detailSkeletonHtml）。
   骨格クラス（.detail-layout / .detail-heading / .detail-summary-card / .plan-list）と
   縞アニメーション（.skeleton 系。css/components-cards.css の検索結果と共通）はそのまま再利用し、
   ここではサイズだけを与える。以前はスケルトンが無く、最大 22.8 秒のあいだプリレンダ済みの
   静的HTML（別の日の料金が載った"完成品"）が出たままだった。
   --------------------------------------------------------------------------- */
.detail-skeleton__hero {
  /* .course-card__media と同じ 16:9。到着後の写真ギャラリーと高さを揃えてシフトを抑える。 */
  aspect-ratio: 16 / 9;
  width: 100%;
  border-radius: var(--radius-lg);
}

.detail-skeleton__title {
  height: 28px;
  width: min(100%, 320px);
  margin-bottom: var(--space-2);
}

/* 【本体と同じ骨格のスケルトン（2026-08-27）】ヒーロー帯の中に置くぶん。
   .detail-hero-band__body は justify-content: center なので、本体にある紹介文（2行）と
   「GORAで開く」ピルのぶんの高さをここで確保しないと、本体に切り替わった瞬間に
   見出しが27px上へずれる（実測の layout-shift の source に出ていた）。 */
.detail-skeleton__lead {
  /* 本体の .detail-hero-band__lead と同じ高さ（切り替えでヒーローが400→410pxに伸びない） */
  min-height: 40px;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  width: min(100%, 640px);
}

/* ヒーローの上（暗い写真の地色）に置くので、縞は明るい側にする */
.detail-hero-band .skeleton {
  background: rgba(255, 255, 255, 0.16);
}

.detail-hero-band .detail-skeleton__status {
  color: #fff;
}

/* スケルトンのヒーローに置く骨組みの帯（issue #105 で文言をやめた。高さだけ保つ）。 */
.detail-skeleton__status {
  font-size: var(--text-sm);
  color: var(--ink-700);
  min-height: 1.4em;
}

.detail-skeleton__date {
  margin-top: var(--space-1);
  font-size: var(--text-sm);
  color: var(--ink-500);
}

.detail-skeleton__plans {
  gap: var(--space-3);
  margin-top: var(--space-5);
}

.detail-skeleton__plan {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-4);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  background: var(--surface);
}

.detail-skeleton__cta {
  height: 44px; /* 実物の primary-block ボタンと同じ高さ */
  border-radius: var(--radius-md);
}

.detail-summary-card {
  position: sticky;
  top: calc(var(--header-height) + var(--space-4));
  background: var(--surface);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.stat-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-block: var(--space-2);
  border-bottom: 1px solid var(--border-color);
  font-size: var(--text-sm);
}

.stat-row:last-of-type {
  border-bottom: none;
}

.stat-row__label {
  color: var(--ink-500);
}

.stat-row__value {
  font-weight: 700;
  color: var(--ink-900);
}

.plan-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

/* プラン行はカード（2026-08-11）。
   【経緯】以前は「全幅リスト + 行間ディバイダー」だった。個別カード枠にすると
   プラン一覧モーダルの中で「カードの中にカード」に見えるという理由で撤去されていたが、
   スマホで**どこを押せばよいのか分かりにくい**という指摘（2026-08-11）を優先してカードへ戻す。
   二重枠に見える問題は、枠線を弱く（--border-color の1px + shadow-xs）・角丸を小さめ
   （--radius-md）にし、モーダル側の内側パディングを詰めることで抑える。
   タップ領域は行全体（padding を全方向 --space-4）で、押せる要素はカード内のボタン
   （検討リスト・予約・時間チップ）が担う＝カード全体をリンクにはしない
   （中に3種類の押せる要素があり、入れ子リンクは誤タップの温床になる）。 */
.plan-row {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-4);
  background: var(--surface);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-xs);
  transition: box-shadow var(--transition-base), border-color var(--transition-base);
}

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

.plan-row__info {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0; /* flex item の min-width:auto による時間チップ列の横溢れ防止 */
}

/* 下段フッター: 左に総額（ラベル・金額・税込/1人）、右にボタン群を固定配置する
   （タスク: プラン行レイアウトの統一。プラン名の長さに関わらず、上段 .plan-row__info の
   高さが変わるだけで、料金・ボタンの位置は全行で同一になる）。 */
.plan-row__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

.plan-row__title {
  font-weight: 700;
  color: var(--ink-900);
}

.plan-row__badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: var(--space-1);
}

/* ==========================================================================
   11b. プラン行の時間チップ（.plan-times）+ コンテキストメニュー
   旧「プラン別ティータイム ポップオーバー」（.plan-frames-popover、「残りN枠」クリック起点）を
   置き換える常時表示チップ列。横スクロール1列（time slots が多いプランでもページ全体は
   横スクロールしない = overflow-x はこのコンテナ自身に閉じる）。スクロールバーは
   .filter-pills（§5）と同じ「細い/隠す」パターンを踏襲する。
   ========================================================================== */
.plan-times {
  display: flex;
  align-items: center;
  gap: 6px;
  max-width: 100%;
  margin-top: var(--space-1);
  padding-block: 2px;
  overflow-x: auto;
  scrollbar-width: thin;
}

.plan-times::-webkit-scrollbar {
  height: 4px;
}

.plan-times::-webkit-scrollbar-thumb {
  background: var(--border-color);
  border-radius: var(--radius-pill);
}

/* #20 スクロール手がかり: 右端で見切れているとき（scrollWidth > clientWidth）に、まだ続きが
   ある側の中身をフェードアウトさせて「横にスクロールできる」ことを可視化する。
   クラスは js/components/scroll-hint.js が overflow / scrollLeft を実測して付け外しする
   （マスクなのでタップ判定には影響しない）。スクロールバーは細い/隠す方針のため、モバイルの
   タッチではこのフェードが唯一の手がかりになる。
   **時間チップとタブ列（濃色の帯・ピル型）で共有する**（2026-08-26 に汎用化。375pxのタブ帯は
   4タブで471px必要＝「口コミ」が完全に画面外だった）。 */
.can-scroll-right {
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent);
  mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent);
}

.can-scroll-left {
  -webkit-mask-image: linear-gradient(to left, #000 calc(100% - 28px), transparent);
  mask-image: linear-gradient(to left, #000 calc(100% - 28px), transparent);
}

.can-scroll-left.can-scroll-right {
  -webkit-mask-image: linear-gradient(to right, transparent, #000 28px, #000 calc(100% - 28px), transparent);
  mask-image: linear-gradient(to right, transparent, #000 28px, #000 calc(100% - 28px), transparent);
}

/* 【時間チップはキーカラー】Figma 174:5023。灰色だと**すぐ上のプランの特徴pill
   （食事別・ハーフ・2B以上…）と見分けがつかない**（作者指摘・2026-08-26）。
   特徴pillは灰色の枠のまま、押せる時間チップだけ緑にして役割を分ける。
   **検索結果のプラン行と詳細のサイドバー、両方に効く**（同じ .plan-time-chip）。 */
.plan-time-chip {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  padding: 5px 11px;
  border: 1px solid var(--accent);
  border-radius: var(--radius-pill);
  background: var(--surface);
  font-family: inherit;
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--accent);
  cursor: pointer;
  transition: border-color var(--transition-fast), background var(--transition-fast),
    color var(--transition-fast);
}

.plan-time-chip:hover,
.plan-time-chip:focus-visible {
  border-color: var(--accent-dark);
  background: var(--accent-light);
  color: var(--accent-dark);
  outline: none;
}

/* 【検索した時台との一致を示す（issue #140）】GoraPlanSearch の startTimeZone は
   「そのプランがその時台に売られているか」で絞るので、実際の空き枠（在庫API）とズレる。
   条件に合う枠を塗り、外れている枠は淡くする。**枠は消さない**（他の時間で予約する導線を残す） */
.plan-time-chip.is-match {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}

.plan-time-chip.is-match:hover,
.plan-time-chip.is-match:focus-visible {
  background: var(--accent-dark);
  border-color: var(--accent-dark);
  color: #fff;
}

.plan-time-chip.is-out {
  border-color: var(--border-color-strong);
  color: var(--ink-400);
}

/* 条件に合う枠が1つも無いときの明示。チップ列の先頭に置く */
.plan-times__mismatch {
  flex: 0 0 auto;
  align-self: center;
  padding: 3px 8px;
  border-radius: var(--radius-sm);
  background: var(--surface-sunken);
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--ink-500);
  white-space: nowrap;
}

/* 取得中のプレースホルダー（4個並べてレイアウトシフトを抑える） */
.plan-time-chip--skeleton {
  width: 46px;
  height: 24px;
  border: none;
  cursor: default;
}

.plan-times__empty {
  flex: 0 0 auto;
  font-size: var(--text-xs);
  color: var(--ink-500);
}

.plan-times__fallback-link {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--accent-dark);
  text-decoration: underline;
}

/* アクションメニュー共通部品（js/components/menu.js の openActionMenu）。
   プラン時間チップのコンテキストメニューと統合ビューの ellipsis（…）メニューが共用する
   （旧 .plan-time-menu を汎用化してリネーム）。 */
.action-menu {
  z-index: 1000;
  min-width: 220px;
  padding: 6px;
  background: var(--surface);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
}

.action-menu__item {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  padding: 9px 10px;
  border: none;
  border-radius: var(--radius-sm);
  background: none;
  font-family: inherit;
  font-size: var(--text-sm);
  color: var(--ink-900);
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}

.action-menu__item:hover,
.action-menu__item:focus-visible {
  background: var(--surface-sunken);
  outline: none;
}

/* 削除系項目（リストを削除 等）は赤文字 */
.action-menu__item--danger {
  color: var(--danger);
}

.plan-row__price {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  flex-shrink: 0;
}

.plan-row__price-label {
  font-size: var(--text-xs);
  color: var(--ink-500);
}

.plan-row__price-value {
  font-size: var(--text-lg);
  font-weight: 800;
  color: var(--ink-900);
}

.plan-row__price-sub {
  font-size: var(--text-xs);
  color: var(--ink-500);
}

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

/* モバイル: 左右分割を維持する（375px幅でも price / actions は横並びのまま収まる）。
   価格の桁数（¥5,500 と ¥12,800 等）によって必要幅が数px変わるため、375px幅ちょうどだと
   桁数の多い行だけ折り返して同じコース内で行ごとに配置がバラつく不具合があった
   （実測: .btn-shortlist の余白を詰める前は行によって折り返しが発生/非発生に分かれた）。
   ボタン・ギャップを少し詰めて、想定する最大桁数の料金でも1行に収まる余裕を確保する。 */
@media (max-width: 480px) {
  .plan-row__footer {
    gap: var(--space-2);
  }

  .plan-row__actions {
    gap: 6px;
  }

  /* 【セレクタが死んでいた】プラン行の検討リストボタンは variant:'primary' なので
     クラスは `.btn.btn--primary.btn--sm` で、`.btn-shortlist`（chip variant）は出ない
     （js/components/shortlist-toggle.js:44）。2026-07-23 に variant を primary へ変えた時点から
     この圧縮は一度も効いていなかった（2026-08-11 の実測で padding は 0 16px のままと判明）。
     「幅と gap は既存の担保のまま」と書いたが、その担保自体が存在しなかった。 */
  .plan-row__actions .btn--primary {
    padding-left: 10px;
    padding-right: 10px;
    gap: var(--space-1);
  }

  /* 【タップ目標】カード化と同じ意図（押しやすさ・2026-08-11）で、押せる要素の高さを
     44px 目安まで上げる。**高さだけ**を上げるのが要点で、幅・gap は上の圧縮値のまま
     ＝「料金とボタンが375pxで1行に収まる」既存の担保を壊さない（実測 32px → 44px）。 */
  .plan-row__actions .btn {
    min-height: 44px;
  }

  /* 時間チップも同様（24px は指では小さい）。横スクロール列なので高さだけ上げる */
  .plan-time-chip {
    min-height: 32px;
  }
}

/* 上記の圧縮でも収まらないときは折り返す。**閾値を 340px → 400px に上げた**
   （2026-08-11 実測）: 予約ボタンの文言は「予約」だけでなく「キャンセル待ち」「空き状況を確認」も
   ありうる（js/data/affiliate.js の bookingLabel。実測で全プランの約4.4%）。375pxで「予約」は
   17.8px の余りしかなく、長い文言では41px溢れる。溢れて枠を突き抜けるより折り返すほうがよい。 */
@media (max-width: 400px) {
  .plan-row__footer {
    flex-wrap: wrap;
  }

  .plan-row__actions {
    flex-wrap: wrap;
  }
}

/* ポップアップはカードの重なり順に負けないよう、フィールド自身に重なり基準を作る。
   値は検索結果サイドバー（.sidebar-picker__popup, 40）と揃える。 */
.detail-date__picker .sidebar-picker__popup {
  z-index: 40;
}

.detail-date__note {
  display: block;
  margin-top: var(--space-1);
  font-size: var(--text-xs);
  color: var(--ink-500);
}

/* --------------------------------------------------------------------------
   プレー日ピッカーの開き方（2026-08-26 に中央オーバーレイを廃止）
   旧: 開いている間だけ .detail-date を position:fixed の全画面オーバーレイに昇格させ、
       カレンダーを画面中央へ持ち上げていた（html.is-date-open, 2026-08-01）。
   現: **検索結果サイドバーと同じ**＝トグルの真下に絶対配置（.sidebar-picker__popup）。
       中央オーバーレイはフィールドごと画面中央へ飛ぶため、押した場所と開く場所が
       離れて「画面が動いた」ように見えた（作者指摘・2026-08-26）。背面のスクロール
       ロックも無くなったので html 側の overflow 操作も不要。
   -------------------------------------------------------------------------- */
.detail-date__cta {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-3);
}

/* --- ラウンド動画（js/components/video-section.js） -------------------------
   ハザード表と同じく、静的HTML（プリレンダ）とSPAで同じマークアップが出る。
   サムネイルは i.ytimg.com の静止画1枚だけで、再生用の iframe は押されるまで作らない。 */
.video-lead {
  margin: 0 0 var(--space-3);
  font-size: var(--text-sm);
  color: var(--ink-700);
}

.video-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-2);
}

.video-card {
  display: flex;
  gap: var(--space-3);
  /* 【中央揃え】上揃えだと1行タイトルのときにサムネの上端だけに文字が寄る
     （作者の指示・2026-08-26。Figma 238:9498 は items-center） */
  align-items: center;
  padding: var(--space-2);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  text-decoration: none;
  color: inherit;
  background: var(--surface);
}
.video-card:hover {
  border-color: var(--border-color-strong);
  background: var(--surface-sunken);
}

.video-card__thumb {
  position: relative;
  flex: 0 0 auto;
  line-height: 0;
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.video-card__thumb img {
  /* hqdefault は 4:3 の枠に 16:9 が収まった画像。上下の黒帯を切って 16:9 で見せる */
  width: 128px;
  height: 72px;
  object-fit: cover;
  display: block;
  background: var(--surface-sunken);
}
/* 再生であることが一目で分かるように▶を重ねる（画像を1枚増やさない） */
.video-card__thumb::after {
  content: '▶';
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: #fff;
  font-size: 20px;
  line-height: 1;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.6);
}
.video-card__dur {
  position: absolute;
  right: 4px;
  bottom: 4px;
  padding: 0 4px;
  border-radius: var(--radius-sm);
  background: rgba(0, 0, 0, 0.75);
  color: #fff;
  font-size: 12px;
  line-height: 16px;
}

.video-card__body {
  min-width: 0;
  display: grid;
  gap: 2px;
}
.video-card__meta {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  color: var(--ink-700);
}
.video-card__meta b {
  color: var(--accent-dark);
}
/* ホール範囲は「この行がどのホールか」を示す主役なので、番号より目立たせる */
.video-card__holes {
  padding: 0 6px;
  border-radius: var(--radius-pill);
  background: var(--accent-light);
  color: var(--accent-darker);
  font-size: 12px;
  line-height: 18px;
}
.video-card__title {
  font-size: var(--text-sm);
  line-height: 1.4;
  /* 煽り文込みの長いタイトルなので2行で打ち切る（行の高さを揃えて一覧性を保つ） */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.video-credit {
  margin: var(--space-3) 0 0;
  font-size: var(--text-sm);
  color: var(--ink-500);
}

/* ハザード表のホール別の動画リンク（写真列の隣）。アイコンは square-play */
.hazard-table__video {
  width: 34px;
  min-width: 34px;
  padding: var(--space-2) 2px;
  text-align: center;
  /* リンクを絶対配置で浮かせる土台。インライン要素として積むと、行ボックスの上に
     乗るぶん（実測+4px）だけ行が高くなり、動画列のある区分だけ表が伸びる */
  position: relative;
}
.hazard-table__video a {
  /* アイコンは18pxだが、指で押す先はセル全面（＝行の高さいっぱい）にする。
     **絶対配置で浮かせるのが要点**: inline 要素として高さを持たせると、その箱が行ボックスの
     上に積まれて行が4px高くなり、動画列のある区分だけ表が伸びた（2026-08-08 実測で確定）。
     absolute なら行高に一切寄与しない。 */
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent-dark);
  text-decoration: none;
  line-height: 0;
}
.hazard-table__video a:hover {
  color: var(--accent-darker);
}

@media (max-width: 420px) {
  .video-card__thumb img {
    width: 104px;
    height: 59px;
  }
}

/* 池・川の記号の凡例（表の直下）。●=池越え / ○=サイド の色分けは
   .hazard-table__mark と同じトークンを使い、表と凡例で見え方をずらさない。 */
.hazard-legend {
  list-style: none;
  /* 直前の区分タブ（.tabs）に打ち消す下マージンが無いため、負マージンだと合計行に食い込む
     （2026-08-08 実測で 12px 重なり）。8px では合計行に近すぎたので 16px 空ける（同日指摘）。 */
  margin: var(--space-4) 0 var(--space-4);
  padding: 0;
  max-width: 640px;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-4);
  font-size: var(--text-sm);
  color: var(--ink-500);
}
.hazard-legend li {
  display: flex;
  align-items: baseline;
  gap: 6px;
}
.hazard-legend b {
  color: var(--ink-900);
  font-weight: 700;
}
.hazard-legend__note::before {
  content: '＝';
}
/* 記号の色は表側（.hazard-table__mark）と同じにする。凡例だけ色が違うと対応が読めない */
.hazard-legend__mark.is-carry {
  color: var(--accent);
  font-weight: 700;
}
.hazard-legend__mark.is-side {
  color: var(--ink-500);
}
.hazard-legend__mark.is-on {
  color: var(--accent);
}

/* ラウンドの切り替えプルダウン（js/components/tabs.js の panelSelectHtml）。
   タブは横に並ぶので枚数が増えると横スクロールになり、375px では選べなくなる。
   1コース最大17ラウンドまで育ったため、6つ以上はここに切り替わる。
   横幅を使わないので「マイゴルフ・2026年6月・9本」のように撮影者まで書ける。 */
.panel-select {
  margin: 0 0 var(--space-4);
}
.panel-select__label {
  display: block;
  margin-bottom: var(--space-1);
  font-size: 0.8125rem;
  color: var(--ink-500);
}
.panel-select__control {
  /* 【下に余白】パネル（動画の一覧）は .panel-select の**中**にあるので、
     箱の margin-bottom では間が空かない。プルダウンと1枚目がくっついていた
     （作者の指摘・2026-08-26。実測0px） */
  margin-bottom: var(--space-4);
  /* 幅いっぱいに広げる。中身（チャンネル名＋日付＋本数）が長いので、
     375px でも省略されずに読めるようにする */
  width: 100%;
  max-width: 28rem;
  padding: var(--space-2) var(--space-3);
  font: inherit;
  font-size: 0.9375rem;
  color: inherit;
  background: var(--surface);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  /* iOS Safari が既定で角丸と影を付けるのを打ち消す */
  -webkit-appearance: none;
  appearance: none;
  /* ▼ を自前で描く（appearance:none で消えるため）。data URI なので外部要求は無い */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%23888' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--space-3) center;
  background-size: 12px 8px;
  padding-right: calc(var(--space-3) * 2 + 12px);
}
.panel-select__control:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* ---------------------------------------------------------------------------
   ホールマップ（js/components/hole-map-section.js）
   航空写真から起こしたホール別の図。画像は 810×1080（3:4 の縦）。
   **カードのグリッド**にする: 以前は横スクロールだったが、18ホールを見比べるのに
   スクロール位置を覚えていられず分かりにくかった（2026-08-13 ユーザー指摘）。
   GORA / アコーディアのレイアウトに合わせ、狭い画面で2列・768px以上で3列。
   --------------------------------------------------------------------------- */
.hole-map__list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
}
/* 枠は**カード（li）**に持たせる。解説文はリンクの外にあるので、枠がリンク側だと
   文章だけ枠の外にはみ出して別物に見える（2026-08-15 実測） */
.hole-map__item {
  min-width: 0;
  border: 1px solid var(--border-color);
  border-radius: 10px;
  overflow: hidden;
  background: var(--surface);
}
.hole-map__item:hover { border-color: var(--accent); }
.hole-map__link {
  display: block;
  text-decoration: none;
  color: inherit;
}
/* 【フォーカスリングは内側に描く】枠と overflow:hidden を li へ移したので、リンクの
   outline は li のクリップ領域の外側に出て**切り取られる**（キーボードでどのカードを
   選んでいるか見えない・2026-08-15 の監査）。負のオフセットで内側に描く。
   .detail-gallery__thumb / .hazard-table__photo a と同じ作法。 */
.hole-map__link:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -3px;
  border-radius: 8px;
}
.hole-map__head {
  display: flex;
  align-items: baseline;
  gap: 6px;
  padding: 8px 10px;
  font-size: 12px;
  line-height: 1.3;
  color: var(--ink-500);
  border-bottom: 1px solid var(--border-color);
}
.hole-map__no { font-size: 14px; color: var(--ink-900); }
.hole-map__yards { margin-left: auto; font-variant-numeric: tabular-nums; }
.hole-map__frame { display: block; position: relative; }
/* 線は画像に焼かずSVGで重ねる。**non-scaling-stroke** で太さを表示px基準に固定するので、
   カード（約250px）でも拡大表示（810px）でも同じ太さに見える。 */
.hole-map__line {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.hole-map__line-halo {
  fill: none;
  stroke: rgba(0, 0, 0, .5);
  stroke-width: 5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.hole-map__line-main {
  fill: none;
  stroke: #fff;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1 7;
}
.hole-map__pin { stroke: rgba(0, 0, 0, .55); stroke-width: 8; }
.hole-map__pin--tee { fill: #fff; }
.hole-map__pin--green { fill: #7cf3a0; }

.hole-map__img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  background: #1b2118;
}
/* 高低差（打ち下ろし19m（勾配3.9%・ゆるやか））。**レイアウト図と断面図の間**に置く
   （Figma 187:6934・作者の指示 2026-08-26）。図の説明なので色は本文と同じダーク。 */
.hole-map__elev {
  display: block;
  padding: 6px 10px;
  font-size: 12px;
  line-height: 1.4;
  color: var(--ink-900);
}
/* コース全体の紹介（2行まで）。節の見出し直下・カードの上。 */
.hole-map__intro {
  margin: 10px 0 0;
  font-size: 13px;
  line-height: 1.7;
  color: var(--ink-900);
}
/* ホールごとの解説。**カードの中**（画像の下）に置く（2026-08-15 ユーザー指定）。
   狭い画面は2列＝1枚約170pxなので、行間を詰めすぎず12pxで読ませる。
   【高低差の行と同じ体裁にする】同じカードの中で片方だけ13px・補助色になっていた
   （作者の指示・2026-08-26）。サイズと色を揃え、行間だけ読みやすさ優先の1.65を残す。 */
.hole-map__text {
  margin: 0;
  padding: 2px 10px 10px;
  font-size: 12px;
  line-height: 1.65;
  color: var(--ink-900);
}
.hole-map__note { margin-top: 12px; }
.hole-map__note summary { cursor: pointer; font-size: 12px; color: var(--ink-500); }
.hole-map__note p { font-size: 12px; line-height: 1.7; color: var(--ink-500); }

@media (min-width: 768px) {
  .hole-map__list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
  .hole-map__head { font-size: 13px; padding: 10px 12px; }
  .hole-map__no { font-size: 15px; }
  .hole-map__intro { font-size: 14px; }
  /* 【解説文はここで大きくしない】高低差の行（12px固定）と同じサイズに揃える
     （作者の指示・2026-08-26。同じカードの中で片方だけ13pxになっていた） */
}

/* ホールの断面図（js/data/hole-profile.js）。
   画像の下に細い帯で出す。縦は誇張してあり、目盛りは付けない
   （数値は隣の「打ち下ろし70m」が担う。ここが伝えるのは**形**）。 */
.hole-map__profile {
  display: block;
  height: 44px;
  border-top: 1px solid var(--border-color);
  background: var(--surface-sunken);
}
.hole-map__profile svg { display: block; width: 100%; height: 100%; }
.hole-map__profile-fill { fill: var(--accent-light-strong); }
.hole-map__profile-line { fill: none; stroke: var(--accent); stroke-width: 1.5; }

@media (min-width: 768px) {
  .hole-map__profile { height: 56px; }
}

/* 断面図の両端の印。**どちらが開始か分かるように**グリーン側に旗を立てる。
   本体SVGは preserveAspectRatio="none" で歪むので、印はその外にCSSで重ねる
   （bottom はインラインで、そのホールの両端の高さから渡される）。 */
.hole-map__profile { position: relative; }
.hole-map__tee-mark,
.hole-map__flag { position: absolute; pointer-events: none; }
.hole-map__tee-mark {
  left: 3px;
  width: 8px;
  height: 8px;
  margin-bottom: -4px;
  border-radius: 50%;
  background: var(--surface);
  border: 2px solid var(--accent);
}
.hole-map__flag { right: 3px; width: 10px; height: 13px; }
.hole-map__flag svg { width: 100%; height: 100%; overflow: visible; }
.hole-map__flag-pole { stroke: var(--accent); stroke-width: 1.5; fill: none; }
.hole-map__flag-cloth { fill: var(--accent); }

/* 画像に重ねる出典。**画像へ焼き込むのをやめた**ぶんをここが担う
   （地理院タイルは出典明示が条件。規約が求めるのはページでの明示なのでこれで満たす）。
   写真の上でも読めるよう影を付ける。カードでは小さく、拡大表示では原寸で読める。 */
.hole-map__credit {
  position: absolute;
  right: 4px;
  bottom: 3px;
  font-size: 8px;
  line-height: 1.2;
  color: rgba(255, 255, 255, .92);
  text-shadow: 0 0 3px rgba(0, 0, 0, .9), 0 0 6px rgba(0, 0, 0, .7);
  pointer-events: none;
}
@media (min-width: 768px) {
  .hole-map__credit { font-size: 9px; }
}
.photo-lightbox__frame .hole-map__credit { font-size: 12px; right: 8px; bottom: 6px; }