/**
 * map.css — /map ページ専用スタイル（site.css を先に読み込んだ上でこのファイルを追加読込する）
 * 対象: MapView.module.css / MapBranchList.module.css / LocateMeButton.module.css / map/page.module.css
 * 命名規則は site.css と同じ（コンポーネント名ケバブケース-元クラス名ケバブケース）。
 */


/* ===== web/components/LocateMeButton.module.css (prefix: locate-me-button-*) ===== */
.locate-me-button-wrapper {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-1);
}

.locate-me-button-button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: none;
  border-radius: var(--radius-md);
  padding: 14px 22px;
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-bold);
  color: var(--color-on-primary);
  background: var(--color-primary);
  cursor: pointer;
  white-space: nowrap;
}

.locate-me-button-button:hover:not(:disabled) {
  background: var(--color-primary-strong);
}

.locate-me-button-button:disabled {
  opacity: 0.6;
  cursor: default;
}

.locate-me-button-button[aria-pressed="true"] {
  background: var(--color-primary-strong);
}

.locate-me-button-error {
  margin: 0;
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}


/* ===== web/components/MapBranchList.module.css (prefix: map-branch-list-*) ===== */
.map-branch-list-wrapper {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

/* --- コントロールカード: 表示エリア/地区/通貨の3セレクト + 現在地ボタン。
   トップページControlBar.module.cssの.card/.primaryRow/.field系と同一の視覚言語を踏襲する
   （カード=背景+角丸+shadow-1のみ・borderなし、ラベル=13px+muted+margin-bottom 5px、
   セレクト=オーバーレイ透明select+可視テキスト+シェブロン、要素間はdividerで区切る）。
   ユーザー指摘: 地区セレクトを追加した後付け感を避け、既存デザインシステムの値のみを使用する。 --- */
.map-branch-list-toolbar {
  background: var(--color-surface);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-1);
  padding: 22px 26px;
}

.map-branch-list-primary-row {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
}

.map-branch-list-divider {
  align-self: center;
  width: 1px;
  height: 46px;
  background: var(--color-border);
  flex-shrink: 0;
}

/* 地区フィールドのスロット（divider+fieldを1単位でhidden切替。map.js参照）。
   display:contents で子要素をそのまま親(.map-branch-list-primary-row)のflexアイテムにする
   （このdiv自体を1個の縦積みflexアイテムにしてしまうとdivider+fieldが横並びのまま並ばなくなるため）。 */
.map-branch-list-district-slot {
  display: contents;
}

.map-branch-list-district-slot[hidden] {
  display: none;
}

.map-branch-list-field {
  display: flex;
  flex-direction: column;
  cursor: pointer;
  min-width: 140px;
}

/* 表示エリア（比率1.1。ControlBar.tsxの.fieldAreaと同じ配分） */
.map-branch-list-field-area {
  flex: 1.1;
  min-width: 0;
}

/* 地区・通貨（比率1。ControlBar.tsxの.fieldGrowと同じ配分） */
.map-branch-list-field-grow {
  flex: 1;
  min-width: 0;
}

.map-branch-list-label {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  font-weight: var(--font-weight-medium);
  margin-bottom: 5px;
}

/* ControlBar.tsxと同じ手法: 実selectを透明オーバーレイにして重ね、可視部分はカスタム表示にする */
.map-branch-list-select-value {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
}

.map-branch-list-select-text {
  font-size: 1.1875rem;
  font-weight: var(--font-weight-bold);
  color: var(--color-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.map-branch-list-pin-icon {
  flex-shrink: 0;
  color: var(--color-primary);
}

.map-branch-list-chevron {
  flex-shrink: 0;
  color: var(--color-text-muted);
}

.map-branch-list-hidden-select {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  border: 0;
  margin: 0;
  padding: 0;
  cursor: pointer;
  appearance: none;
  /* iOS Safariの自動ズーム抑止にはcomputed font-sizeが16px以上必要（ControlBar.tsxと同じ理由） */
  font-size: max(1rem, var(--font-size-md));
}

/* 「近くの両替所」ボタン（ControlBar.tsxの.ctaCellと同じ考え方: コントロールカードの一員として
   右端に配置し、後付けのボタンに見えないようにする）。 */
.map-branch-list-cta-cell {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

/* --- 2カラムレイアウト: 左=一覧(40%) / 右=地図(60%・sticky)（仕様確定の比率） --- */
.map-branch-list-layout {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
  gap: var(--space-4);
  align-items: start;
}

.map-branch-list-list-column {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.map-branch-list-map-column {
  position: sticky;
  top: var(--space-3);
  min-width: 0;
  height: 560px;
}

.map-branch-list-map-loading {
  width: 100%;
  height: 100%;
  min-height: 420px;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  background: var(--color-bg-subtle);
}

/* エリア表示の要約行（地区チップ・グループ群の上に1回だけ表示。控えめなトーン） */
.map-branch-list-area-summary {
  margin: 0;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-muted);
}

/* 段階表示「さらに表示」ボタン（lib/pagination.ts。ユーザー指摘: 一覧を縦に伸ばしすぎない対策の
   追加分）。既存の.pill-link視覚言語をそのまま流用し、一覧の中央下に配置する。 */
.map-branch-list-load-more-row {
  display: flex;
  justify-content: center;
}

.map-branch-list-load-more-button {
  cursor: pointer;
  font-family: inherit;
}

.map-branch-list-group {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}

.map-branch-list-group-heading {
  margin: 0;
  padding: var(--space-3) var(--space-4);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
  border-bottom: 1px solid var(--color-bg-subtle);
}

.map-branch-list-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* 行（仕様確定・1行化）: 左からマップ対応ピン/ブランド+支店名(省略記号)/距離チップ(近傍時)/
   鮮度ドット/レート/Googleマップボタン、を1行に収める。 */
.map-branch-list-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: 10px var(--space-4);
  border-bottom: 1px solid var(--color-bg-subtle);
  font-size: var(--font-size-md);
  transition: background-color var(--transition-fast);
}

.map-branch-list-row:last-child {
  border-bottom: none;
}

/* 段階表示の折りたたみ（map.js applySsrFold）: display:flex を上書きしないとhidden属性が
   効かないため明示する（.map-branch-list-district-slot[hidden]と同じ理由）。 */
.map-branch-list-row[hidden] {
  display: none;
}

/* 行選択の対話要素（ネイティブbutton。liに持たせるとネストした直下のa（Googleマップリンク）と
   axe nested-interactive/list違反になり、spanにrole=buttonだとhtml-validate prefer-native-element
   に抵触するため分離している。
   注意（2026-09-14修正）: 当初display:contentsで実装したが、Chromiumはdisplay:contentsの
   <button>をフォーカス順序から除外し、Tab/.focus()のどちらでもフォーカスできなくなる実機不具合が
   判明した（キーボード操作が完全に失われる重大な回帰だったため即時修正）。button自身をflex
   コンテナ化し、liの直下でgapを維持したまま子要素（ピン/店名/距離チップ/鮮度ドット/レート）を
   横並びにする＝見た目はdisplay:contents版と同一で、かつ実際にフォーカス可能にする。 */
.map-branch-list-row-select {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex: 1 1 auto;
  min-width: 0;
  font: inherit;
  color: inherit;
  border: 0;
  padding: 0;
  margin: 0;
  background: none;
  text-align: inherit;
}
.map-branch-list-row-select:disabled {
  cursor: default;
}

/* クリック可能（座標確認済み）な行のみカーソル・hover背景を付与する（ユーザー指摘対応） */
.map-branch-list-row-clickable {
  cursor: pointer;
}

.map-branch-list-row-clickable:hover,
.map-branch-list-row-clickable:has(.map-branch-list-row-select:focus-visible) {
  background: var(--color-bg-subtle);
}

/* .map-branch-list-row-select自体は幅がliのpadding分内側に収まるため、フォーカスリングは
   親li（実際のボックス）側に:has()で伝搬して描く（アウトラインがボタンの内側だけに出て
   窮屈にならないようにするため。2026-09-14） */
.map-branch-list-row-clickable:has(.map-branch-list-row-select:focus-visible) {
  outline: 2px solid var(--color-primary);
  outline-offset: -2px;
}

/* ピンクリックからのハイライト（数秒で控えめにフェード。「ベスト」を意味する
   --color-best-bg(緑)とは意味が異なるため、ゴールド系の控えめなソフトトーンを流用する） */
.map-branch-list-row-highlighted {
  background: var(--color-accent-gold-soft);
}

/* 地図対応インジケータ（ユーザー指摘: クリック不可な行を視覚的に区別する）:
   座標確認済み=通常色ピン(--color-primary) / 未確認=薄いグレーピン(--color-text-muted・低不透明度)。
   未確認行はtitle属性で「地図情報なし」を補足する（クリック無効でもGoogleマップボタン自体は
   テキスト検索にフォールバックして常に機能する。lib/mapUrl.ts）。 */
.map-branch-list-row-map-indicator {
  display: inline-flex;
  flex-shrink: 0;
  color: var(--color-primary);
}

.map-branch-list-row-map-indicator-disabled {
  color: var(--color-text-muted);
  opacity: 0.4;
}

.map-branch-list-row-name {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: var(--font-weight-semibold);
  color: var(--color-text);
}

/* 駅・地区名ヒント（省スペース化: 名前と同じ行内に小さく添えるのみ。行全体が1行の省略記号で収まる） */
.map-branch-list-row-location-hint {
  font-weight: var(--font-weight-medium);
  color: var(--color-text-muted);
  font-size: 0.8125rem;
}

/* 距離チップ（近傍表示時のみ）: cityTagと同系のオレンジ配色で一目で読める強調チップにする。 */
.map-branch-list-distance-chip {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  background: var(--color-location-chip-strong);
  color: var(--color-location-chip-text);
  border-radius: var(--radius-sm);
  padding: 2px 8px;
  font-size: 0.8125rem;
  font-weight: var(--font-weight-semibold);
  white-space: nowrap;
}

/* 鮮度ドット（1行化に伴いFreshnessBadgeの文字表示から色ドットのみへ圧縮。配色はFreshnessBadgeと共通） */
.map-branch-list-fresh-dot {
  flex-shrink: 0;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--color-freshness-fresh);
}

.map-branch-list-fresh-dot[data-freshness="aging"] {
  background: var(--color-freshness-aging);
}

.map-branch-list-fresh-dot[data-freshness="stale"] {
  background: var(--color-freshness-stale);
}

.map-branch-list-row-rate {
  flex-shrink: 0;
  display: inline-flex;
  align-items: baseline;
  font-weight: var(--font-weight-bold);
  font-size: 1.0625rem;
  white-space: nowrap;
}

/* レート数値の強調色（ユーザー指摘: 通貨サフィックスを廃して数値を強調）。
   既存トークンの「ベスト系グリーン」--color-best を流用する（ライト/ダーク両対応・
   ランキングカードのベスト表示と同じ意味合いの強調色のため新規トークンは追加しない）。 */
.map-branch-list-row-rate-value {
  color: var(--color-best);
}

.map-branch-list-row-rate-na {
  color: var(--color-text-muted);
}

.map-branch-list-row-map-link {
  flex-shrink: 0;
}

.map-branch-list-notice {
  margin: 0;
  padding: var(--space-2) var(--space-4) var(--space-3);
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}

@media (max-width: 1024px) {
  .map-branch-list-layout {
    grid-template-columns: 1fr;
  }

  .map-branch-list-map-column {
    position: static;
    height: 420px;
    order: -1;
  }
}

/* タブレット帯: ControlBar.module.cssの同ブレークポイントと同じpadding値 */
@media (min-width: 641px) and (max-width: 1024px) {
  .map-branch-list-toolbar {
    padding: var(--space-3) 24px;
  }
}

/* モバイル（ControlBar.module.cssの同ブレークポイントと同じ手法）: 横並び+縦区切り線をやめ、
   フィールドを縦積み1列にする。各フィールドは自身の下端に横罫線を持たせて区切る。 */
@media (max-width: 640px) {
  .map-branch-list-toolbar {
    padding: 0;
  }

  .map-branch-list-primary-row {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }

  .map-branch-list-divider {
    display: none;
  }

  .map-branch-list-field,
  .map-branch-list-field-area,
  .map-branch-list-field-grow {
    flex: none;
    width: 100%;
    min-width: 0;
    padding: 16px;
    border-bottom: 1px solid var(--color-bg-subtle);
  }

  .map-branch-list-cta-cell {
    width: 100%;
    padding: 16px;
  }

  .map-branch-list-row-location-hint {
    display: none; /* 幅が最も厳しい端末では駅ヒントを省略し、ブランド+支店名を優先する */
  }
}

@media (max-width: 400px) {
  /* 極小幅ではボタンだけ次の行に折り返す（レートまでは1行維持） */
  .map-branch-list-row {
    flex-wrap: wrap;
  }

  /* .map-branch-list-row-select（行選択button）はdisplay:contents版では存在せず、liに
     直接flex-wrapが効いてピン/店名/レートが個別に折り返せていたが、buttonでラップした際に
     このwrapが引き継がれておらずbutton内の子要素が折り返せなくなっていた
     （店名が1行に切り詰められる視覚回帰。2026-09-14修正）。button自身にも同じflex-wrapを
     適用し、liに直接子要素があった時と同じ折り返し（ピン単独行→店名+レート行）を再現する。 */
  .map-branch-list-row-select {
    flex-wrap: wrap;
  }

  .map-branch-list-row-map-link {
    flex: 1 1 100%;
    text-align: center;
    margin-top: 4px;
  }
}


/* ===== web/components/MapView.module.css (prefix: map-view-*) ===== */
.map-view-container {
  width: 100%;
  height: 100%;
  min-height: 420px;
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid var(--color-border);
}

/* MapLibreの既定コントロール(ナビゲーション等)を角丸コンテナに馴染ませる（8px超・pill禁止の原則は
   MapLibre自身のUIには適用しないが、コンテナのoverflow:hiddenで見た目上は角丸内に収まる）。 */
.map-view-container .maplibregl-ctrl-top-right {
  top: var(--space-2);
  right: var(--space-2);
}

/* ブランド色ピン（線画アイコン家族の例外。地図上の視認性優先でユーザー指定色を塗りで使用）。 */
.map-view-pin {
  width: 26px;
  height: 26px;
  cursor: pointer;
  background: var(--pin-color, #cc2f2f);
  border: 2px solid #ffffff;
  border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg);
  box-shadow: 0 1px 3px rgba(16, 24, 40, 0.35);
}

/* 現在地マーカー: 脈動する円ドット */
.map-view-origin-dot {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--origin-color, #1d7fd6);
  border: 3px solid #ffffff;
  box-shadow: 0 0 0 4px rgba(29, 127, 214, 0.25);
}

.map-view-popup {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 160px;
  font-size: var(--font-size-sm);
}

.map-view-popup-name {
  margin: 0;
  font-weight: var(--font-weight-bold);
  color: var(--color-text);
  font-size: var(--font-size-md);
}

.map-view-popup-location {
  margin: 0;
  color: var(--color-text-muted);
  font-size: 0.8125rem;
}

.map-view-popup-link {
  margin-top: 4px;
  color: var(--color-primary);
  font-weight: var(--font-weight-semibold);
  text-decoration: underline;
  width: fit-content;
}

@media (max-width: 640px) {
  .map-view-container {
    min-height: 320px;
  }
}


/* ===== web/app/[locale]/map/page.module.css (prefix: map-page-*) ===== */
.map-page-main {
  min-height: 60vh;
  padding-bottom: var(--space-6);
}

.map-page-intro {
  max-width: 1440px;
  margin: var(--space-4) auto 0;
  padding: 0 56px;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.map-page-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-text);
  margin: 0;
}

.map-page-title-icon {
  flex-shrink: 0;
  color: var(--color-primary);
}

.map-page-body {
  margin: 0;
  color: var(--color-text-muted);
  font-size: var(--font-size-md);
  max-width: 72ch;
}

.map-page-content {
  max-width: 1440px;
  margin: var(--space-4) auto 0;
  padding: 0 56px;
}

@media (min-width: 641px) and (max-width: 1024px) {
  .map-page-intro,
  .map-page-content {
    padding-left: 24px;
    padding-right: 24px;
  }
}

@media (max-width: 640px) {
  .map-page-intro,
  .map-page-content {
    padding-left: var(--space-3);
    padding-right: var(--space-3);
  }
}