/* ==========================================================================
   23. プリレンダ静的ページ（エリアLP / コースページ。scripts/prerender.mjs 生成）
   起動後は js/app.js が #app を上書きするため、主に初期表示フラッシュ・no-JS・
   クローラ向けの最小スタイル。
   ========================================================================== */
.prerender {
  padding-block: var(--space-6);
}
.prerender__title {
  font-size: var(--text-2xl);
  color: var(--ink-900);
  margin-bottom: var(--space-3);
}
.prerender__subtitle {
  font-size: var(--text-lg);
  color: var(--ink-900);
  margin-top: var(--space-6);
  margin-bottom: var(--space-3);
}
.prerender__lead,
.prerender__body {
  color: var(--ink-700);
  max-width: 640px;
  margin-bottom: var(--space-4);
}
.prerender__note {
  max-width: 640px;
  margin-top: var(--space-4);
  font-size: var(--text-xs);
  color: var(--ink-500);
}
.prerender__img {
  width: 100%;
  max-width: 640px;
  height: auto;
  border-radius: var(--radius-lg);
  margin-bottom: var(--space-4);
}
.prerender-list {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  max-width: 640px;
}
.prerender-list__item {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-2);
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--border-color);
}
.prerender-list__item a {
  font-weight: 700;
  color: var(--accent-dark);
}
.prerender-list__meta {
  font-size: var(--text-sm);
  color: var(--ink-500);
}
/* コースページの「評価の内訳」（7軸のうち6軸）と「基本情報」。 */
.prerender-axes {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--space-5);
  max-width: 640px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-2) var(--space-4);
}
@media (min-width: 560px) {
  .prerender-axes {
    grid-template-columns: repeat(3, 1fr);
  }
}
.prerender-axes__item {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-2);
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--border-color);
}
.prerender-axes__item span {
  color: var(--ink-500);
  font-size: var(--text-sm);
}
.prerender-axes__item b {
  color: var(--ink-900);
  font-variant-numeric: tabular-nums;
}
.prerender-info {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--space-5);
  max-width: 640px;
}
.prerender-info li {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-3);
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--border-color);
}
.prerender-info li span {
  flex-shrink: 0;
  /* 「コースタイプ」「掲載料金帯」など6文字のラベルが折り返さない幅（span は --text-sm） */
  width: 6.5em;
  color: var(--ink-500);
  font-size: var(--text-sm);
}
.prerender-info li b {
  flex: 1;
  min-width: 0;
  color: var(--ink-900);
}

/* 規約・プライバシーポリシー（プロテキスト。.prerender の見出し/本文を流用） */
.legal__updated {
  color: var(--ink-500);
  font-size: var(--text-sm);
  margin-bottom: var(--space-5);
}
.legal ul {
  max-width: 640px;
  margin: 0 0 var(--space-4);
  padding-left: 1.25em;
  color: var(--ink-700);
}
.legal li {
  margin-bottom: var(--space-2);
}
.legal a {
  color: var(--accent-dark);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.legal__back {
  margin-top: var(--space-6);
}

/* ==========================================================================
   検索結果マップビュー（#31。js/views/results-map.js）
   ピン・カードパネルの見た目は prototypes/leaflet/map-mvp.html で実証した案を
   アプリの流儀（デザイントークン・クラス命名）に合わせて移植したもの。
   ========================================================================== */

/* リスト⇄マップ切替のセグメントトグル（結果ツールバー内。.filter-pill と同じピル流儀）。
   モバイルファースト: 狭幅では全幅の1段目（2等分セグメント・タップターゲット44px）、
   640px 以上は「条件・絞り込み」「並べ替え」と同じ行に収まるインラインのピルに縮む。 */
.view-toggle {
  display: flex;
  width: 100%;
  align-items: center;
  padding: 2px;
  border: 1px solid var(--border-color-strong);
  border-radius: var(--radius-pill);
  background: var(--surface);
}

.view-toggle__btn {
  flex: 1;
  min-height: 44px; /* モバイルのタップターゲット44px（#20 の方針に合わせる） */
  padding: var(--space-1) 14px;
  border: none;
  border-radius: var(--radius-pill);
  background: transparent;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--ink-700);
  cursor: pointer;
  white-space: nowrap; /* 狭幅でもラベルが縦割れしない */
  transition: background var(--transition-fast), color var(--transition-fast);
}

.view-toggle__btn:hover {
  color: var(--ink-900);
}

.view-toggle__btn.is-active {
  background: var(--accent-light);
  color: var(--accent-dark);
}

/* モバイルのツールバー段組み: 1段目=リスト/マップ切替（全幅）、
   2段目=「条件・絞り込み」+ 並べ替え（横並び・2等分）。
   flex の均等分配はコンテンツ幅（並べ替えの長いラベル）に引きずられて崩れた実績が
   あるため（2026-07-25 実機報告）、grid の 1fr 1fr で厳密に2等分する。 */
.results-toolbar__controls {
  display: grid;
  grid-template-columns: 1fr 1fr;
  width: 100%;
}

.results-toolbar__controls .view-toggle {
  grid-column: 1 / -1; /* 1段目は全幅 */
}

.results-toolbar .results-filter-toggle,
.results-toolbar__controls .sort-dropdown {
  min-width: 0; /* コンテンツ幅でトラックを広げない */
}

.results-toolbar__controls .sort-dropdown .select--sort {
  width: 100%;
  min-width: 0;
  /* 幅に収まらないラベルは省略記号で切り詰める（狭幅端末対策） */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  /* 2段目の2つ（条件・絞り込み / 並べ替え）を1段目の view-toggle と同じ44pxに揃える
     （実測: 未指定だと39px/34.5pxで不揃い。#20 のタップターゲット方針にも合わせる）。 */
  min-height: 44px;
}

.results-toolbar .results-filter-toggle {
  min-height: 44px;
}

@media (min-width: 640px) {
  .view-toggle {
    display: inline-flex;
    width: auto;
  }

  .view-toggle__btn {
    flex: none;
    min-height: 32px;
  }

  /* 同じ行に並ぶ並べ替え select を view-toggle の総高（btn32px+padding4+border2=38px）に
     揃える（実測: 未指定だと34.5pxで3.5px低く、行内で凸凹して見えた）。
     min-height はモバイル用の44pxをリセットする。 */
  .results-toolbar__controls .sort-dropdown .select--sort {
    height: 38px;
    min-height: 0;
  }

  .results-toolbar__controls {
    display: flex; /* モバイルの grid 2等分を解除して従来のインライン配置へ */
    flex-wrap: nowrap;
    width: auto;
  }

  .results-toolbar .results-filter-toggle,
  .results-toolbar__controls .sort-dropdown {
    flex: none;
  }

  .results-toolbar__controls .sort-dropdown .select--sort {
    width: auto;
  }
}

/* マップ本体: 通常は非表示。.results-main.is-map-view でグリッド・凡例と入れ替える
   （show/hide 方式。グリッドDOMを残すことでフェアウェイ/気温バックフィルや「もっと見る」の
   既存配線を壊さない）。z-index: 0 でスタッキングコンテキストを作り、Leaflet のペイン
   （z-index 〜700）やカードパネル（z-index 1000）をこの中に閉じ込める
   → プラン一覧モーダル（.modal-overlay, z-index 100）が常に地図より上になる。 */
.results-map {
  display: none;
  position: relative;
  z-index: 0;
}

.results-main.is-map-view .results-map {
  display: block;
}

.results-main.is-map-view .course-grid {
  display: none;
}

/* 地図キャンバスとカードパネルの位置基準（パネルは注記を含まない地図の枠内に重ねる） */
.results-map__stage {
  position: relative;
}

.results-map__canvas {
  width: 100%;
  height: min(72vh, 640px);
  min-height: 320px;
  border-radius: var(--radius-lg);
  background: var(--accent-light);
  overflow: hidden;
}

/* Leaflet 遅延ロード中のスケルトン（.spinner と同じリングを中央に出す） */
.results-map__canvas.is-loading {
  display: flex;
  align-items: center;
  justify-content: center;
}

.results-map__canvas.is-loading::after {
  content: "";
  width: 28px;
  height: 28px;
  border: 3px solid var(--border-color);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin-rotate 0.6s linear infinite;
}

/* 地図のエラー注記（Leaflet 読み込み失敗時のみ。.results-sort-note と同じトンマナ。
   座標未取得件数の注記はサマリーの進捗カウンター「24/30件を読み込み中...」へ集約して廃止） */
.results-map__note {
  margin-top: var(--space-2);
  font-size: var(--text-xs);
  color: var(--ink-500);
  line-height: 1.5;
}

/* マップ表示中の「もっと見る」: 地図の下部中央にオーバーレイして気づきやすくする
   （リストビューでは従来どおり地図外の既存位置・既存挙動のまま）。
   - bottom はOSMの attribution（右下・高さ〜20px）と重ならないよう少し浮かせる
   - z-index は 1: .results-map は z-index:0 のスタッキングコンテキストなので、その外に
     いるこのボタンは 1 で地図内のすべて（タイル・ピン）より上に出る。一方でプラン
     モーダル(100)や絞り込みドロワー等のページ層には必ず負ける。
     ※ かつて 900 にしていて「地図内のカードパネル(1000)より下」のつもりが、パネルは
     z=0 コンテキストの内側＝外側の正の z には常に負けるため、モーダル・ドロワー・
     カードパネルの上に覆い被さる実バグになった（iOS実機で報告・2026-07-22）
   - カードパネルを開いている間（.is-map-card-open）は外側の z では下に潜れないため
     ボタン自体を隠す
   - 座標読み込みの進行中（.is-map-coords-loading）は隠し、完了後に出す（進捗はサマリーの
     カウンターが伝える。hidden 属性による「続きが無い」非表示は従来どおり効く） */
.results-main.is-map-view {
  position: relative;
}

.results-main.is-map-view .load-more-row {
  position: absolute;
  bottom: var(--space-6);
  left: 50%;
  transform: translateX(-50%);
  margin: 0;
  z-index: 1;
}

.results-main.is-map-view.is-map-card-open .load-more-row {
  display: none;
}

.results-main.is-map-view .load-more-row .load-more-btn {
  min-height: 44px; /* 地図上のタップターゲット44px（#20 の方針に合わせる） */
  box-shadow: var(--shadow-lg);
}

.results-main.is-map-view.is-map-coords-loading .load-more-row {
  display: none;
}

/* 価格ラベルピン（白ピル・ブランド緑枠。hover / 選択中は緑地反転） */
.map-price-pin {
  display: inline-block;
  padding: 3px 10px;
  border: 1.5px solid var(--accent);
  border-radius: var(--radius-pill);
  background: var(--surface);
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--accent-dark);
  white-space: nowrap;
  box-shadow: 0 1px 4px rgba(20, 24, 26, 0.25);
  transform: translate(-50%, -50%);
  cursor: pointer;
}

.map-price-pin:hover,
.map-price-pin.is-open {
  background: var(--accent);
  color: var(--accent-contrast);
}

/* ピン選択時のカードパネル: アプリ本体の検索結果カードに✕を重ねる。
   デスクトップは地図右上フロート、640px 未満は下部シート。 */
.map-card-panel {
  position: absolute;
  top: var(--space-3);
  right: var(--space-3);
  width: 320px;
  max-width: calc(100% - var(--space-3) * 2);
  z-index: 1000; /* Leaflet のペイン（〜700）より上（.results-map のコンテキスト内） */
}

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

.map-card-panel .course-card {
  box-shadow: var(--shadow-lg);
}

.map-card-close {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 3;
  width: 32px;
  height: 32px;
  border: none;
  border-radius: 50%;
  background: var(--surface-glass);
  color: var(--ink-900);
  font-size: var(--text-md);
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 1px 4px rgba(20, 24, 26, 0.25); /* .map-price-pin と同じピン用影 */
}

.map-card-close:hover {
  background: var(--surface);
}

@media (max-width: 639px) {
  .map-card-panel {
    top: auto;
    bottom: var(--space-3);
    left: var(--space-3);
    right: var(--space-3);
    width: auto;
  }

  /* 下部シートがカルーセル込みのカード全高で地図を覆い尽くさないよう、
     モバイルはパネル内サムネイルを浅くする */
  .map-card-panel .course-card__media {
    height: 120px;
  }
}