/* ==========================================================================
   GoogleMaps モード用スタイル（デザインモック）
   - 既存 jquery.mapping.css を上書きせず、gmaps 専用クラスのみを定義する。
   ========================================================================== */

/* --------------------------------------------------------------------------
   表示領域ピッカー（作成/編集モーダル内のプレビュー地図）
   -------------------------------------------------------------------------- */

/* ピッカー地図コンテナ
   S-12: テーマファイル時プレビュー（#projectPdfImagePreview の
   .aspect-ratio-img-box-root-2-1 = √2:1／padding-bottom 70.7107%）と
   同じ表示サイズにするため、固定 320px をやめ同一比率にする。
   mount 後の picker.invalidate()（gmaps-picker.js）で Leaflet が実高を再計算する。 */
.gmap-picker-map {
  width: 100%;
  aspect-ratio: 1.41421 / 1;
  border-radius: 0.75rem;
  overflow: hidden;
  background-color: #e9ecef;
}

/* ③ 中央固定の十字マーカー（地図に重畳・操作は透過） */
.gmap-picker-crosshair {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 500;
}
.gmap-picker-crosshair::before,
.gmap-picker-crosshair::after {
  content: "";
  position: absolute;
  /* ストロベリーカラー（checkbox accent-color / pin --pin-color-8 と同値）。
     縦横線をドットより前面(z-index:2)に描き、中央リング内でも横線が薄くならない
     よう左右対称にする。 */
  background-color: #ff2f92;
  z-index: 2;
}
/* 横線 */
.gmap-picker-crosshair::before {
  top: 50%;
  left: 50%;
  width: 28px;
  height: 2px;
  transform: translate(-50%, -50%);
}
/* 縦線 */
.gmap-picker-crosshair::after {
  top: 50%;
  left: 50%;
  width: 2px;
  height: 28px;
  transform: translate(-50%, -50%);
}
/* 中心の丸 */
.gmap-picker-crosshair .gmap-picker-crosshair-dot {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 10px;
  height: 10px;
  margin: -5px 0 0 -5px;
  border: 2px solid #ff2f92;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.6);
  z-index: 1; /* 縦横線(z-index:2)より背面に置き、白塗りが横線を隠さないようにする */
}

/* SP での見えがかりガイド線（スマホ画面形状の目安・縦長枠）。
   GoogleMaps モードのピッカー上にのみ現れる（.gmap-picker-wrapper 配下）。
   サイズは端末ごとにまちまちなため厳密な実寸ではなく「スマホ形状が伝わる目安」。
   中心十字（z-index:500）より背面(z-index:490)に置き、中心点を前面に残す。 */
.gmap-picker-sp-guide {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  height: 100%; /* 上辺・下辺をピッカーの上下辺へ密着（上下余白なし） */
  aspect-ratio: 1 / 2; /* 縦長スマホの目安比率（幅＝高さの半分） */
  box-sizing: border-box;
  border: 2px dashed #ff2f92;
  border-radius: 0;
  pointer-events: none;
  z-index: 490;
}

/* ピッカーのラッパ（position:relative で十字を重ねる） */
.gmap-picker-wrapper {
  position: relative;
}

/* ⑤ 外部検索ボックス（ピッカー上部）
   形状は同フォームの「プロジェクト名」欄（.form-control）に合わせる。
   PlaceAutocompleteElement（gmp-place-autocomplete）にも .form-control を付与し、
   ホスト要素を全幅のフォームコントロールとして表示する。 */
.gmap-picker-search {
  position: relative;
  margin-bottom: 0.5rem;
}
/* 入力欄＋虫眼鏡/×ボタン（form-control 形状に馴染ませる）
   ① 高さは同フォームの .form-control（プロジェクト名欄）に合わせる。
      btn 既定の大きい縦パディング(0.75rem)/margin-bottom(1rem)/影を打ち消し、
      .form-control（padding 0.5rem・line-height 1.4rem）と同一の行ボックスにする。 */
/* input を包む field を絶対配置の基準にし、× を「input 単体の右端」に浮かせる
   （黒虫眼鏡ボタンは field の外＝グループ幅に依存しないので崩れない） */
.gmap-picker-search .gmap-search-field {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
}
.gmap-picker-search .gmap-search-input {
  border-top-right-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  flex: 1 1 auto;
  min-width: 0;
  /* input 欄内右側に出る × ボタンとテキストが重ならないよう余白を確保 */
  padding-right: 2.25rem;
}
/* ① 虫眼鏡（検索確定）ボタン：共有モーダルの『コピー』ボタン（btn-primary）に合わせ
   黒地・白文字・input に連結した見た目にする */
.gmap-picker-search .gmap-search-btn {
  margin: 0;
  padding: 0.5rem 0.75rem;
  font-size: 0.875rem;
  line-height: 1.4rem;
  border: 1px solid #000000;
  border-left: 0;
  background-color: #000000;
  color: #ffffff;
  box-shadow: none;
  text-transform: none;
  border-top-right-radius: 0.5rem;
  border-bottom-right-radius: 0.5rem;
}
.gmap-picker-search .gmap-search-btn:hover {
  background-color: #333333;
  border-color: #333333;
  color: #ffffff;
}
/* ② 入力クリア（×）ボタン：メインマップ検索ボックスの .btn-clear を踏襲。
   field（=input 単体）の右端内側に円形で出現。基準が黒ボタンを含まないので幅変動に強い。
   .btn-rounded-circle.btn-sm の 36px/アイコン0.875rem を上書きし、メインマップの
   30px/1.5rem（custom.css の .btn-clear 見た目）に合わせる。入力がある時のみ表示。 */
/* 縦センタリングは transform 非依存（top/bottom:0 + margin:auto）で行う。
   .btn-rounded-circle 由来の transition:all によるスライドや、transform 上書きの
   影響を受けないようにする。背景・影は全状態で透過/なしを強制し、入力欄ボーダーが
   常に貫通して見えるようにする（フォーカスリングも抑止）。
   注意: gmaps.css は soft-ui / custom.css より前に読み込まれる。soft-ui の
   `.input-group .btn{position:relative}` や custom の `.btn-rounded-circle.btn-sm`
   (幅36px!important) と詳細度 (0,2,0) が同点だと後発シートに負けるため、
   中間の `.gmap-search-field` を挟んで (0,3,x) に引き上げ、確実に上書きする。 */
.gmap-picker-search .gmap-search-field .gmap-search-clear {
  display: none;
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0.375rem; /* field（input）右端基準・「若干左」補正 */
  margin: auto 0; /* transform 非依存の縦中央 */
  transform: none !important;
  transition: color 0.15s ease-in-out;
  z-index: 3;
  padding: 0 !important;
  width: 30px !important;
  height: 30px !important;
  min-width: 30px !important;
  border: 0 !important;
  border-radius: 50%;
  background-color: transparent !important;
  color: #adb5bd;
  box-shadow: none !important;
  text-transform: none;
  line-height: 1;
}
.gmap-picker-search .gmap-search-field .gmap-search-clear i {
  font-size: 1.5rem !important;
}
.gmap-picker-search .gmap-search-field .gmap-search-clear.is-visible {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
/* hover/focus/active はアイコン色のみ変化。円形の塗り・影・移動は付けない。 */
.gmap-picker-search .gmap-search-field .gmap-search-clear:hover,
.gmap-picker-search .gmap-search-field .gmap-search-clear:focus,
.gmap-picker-search .gmap-search-field .gmap-search-clear:active {
  background-color: transparent !important;
  box-shadow: none !important;
  transform: none !important;
  color: #67748e;
}
/* 自前の候補ドロップダウン */
.gmap-search-suggestions {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 1080;
  margin: 2px 0 0;
  padding: 0;
  list-style: none;
  background-color: #ffffff;
  border: 1px solid #d2d6da;
  border-radius: 0.5rem;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
  max-height: 220px;
  overflow-y: auto;
  display: none;
}
.gmap-search-suggestions.is-open {
  display: block;
}
.gmap-search-suggestion {
  padding: 8px 12px;
  font-size: 14px;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.gmap-search-suggestion:hover {
  background-color: #f0f2f5;
}

/* テーマタイプ選択（カード型・登録後変更不可）
   ※ 下マージンは付けない。直後の「表示領域」ラベル(.form-label mt-4)側の余白で間隔を取る。 */

/* 見出し行：ラベル ＋ 右側の注意書きを横並び */
.gmap-mode-heading {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.25rem 0.75rem;
}
/* 注意書き（テーマタイプ）＋ 初期表示エリアの説明文は、ラベル(.form-label=#000)と
   同じ濃さ・同じ 0.75rem で表示する（.fs-8/.text-secondary の !important を使わない）。
   どちらも .gmap-mode-heading の見出し行内でラベルの右隣に並ぶ。 */
.gmap-mode-note,
.gmap-picker-hint {
  font-size: 0.75rem;
  color: #000;
}
/* テーマタイプを切り替えても各要素の位置と総高が変わらないよう、2 点で揃える。
   .gmap-mode-panel[data-mode="gmap"] は theme 選択時 display:none のため gmap 時のみ効く。
   ① 見出し行の下余白：テーマファイル側のラベル（.form-label の margin-bottom = 2.4px）に
      合わせる。これで「ここにペースト」欄と「住所・地名で検索」欄の上端が一致する。
      Bootstrap の .mb-2 は !important 付きのため、こちらも !important が必須。 */
.gmap-mode-panel[data-mode="gmap"] .gmap-mode-heading {
  margin-bottom: 2.4px !important;
}
/* ② ①で詰めた分（8px → 2.4px）のうち、総高を揃えるのに必要な 2px を検索欄の下側で戻す。
      ピッカー末尾の隠し input が持つ margin 等の積み上がりにより、GoogleMaps 側は本来
      3.6px 高くなるため、5.6px 詰めて 2px 戻すと総高が一致する。
      ボタン行との間（margin-top:24px）は margin collapse で最大値が採られ調整できないため、
      collapse しない検索欄〜地図間で戻す。 */
.gmap-mode-panel[data-mode="gmap"] .gmap-picker-search {
  margin-bottom: calc(0.5rem + 2px);
}

/* 2 択カードを等幅で横並び */
.gmap-mode-cards {
  display: flex;
  gap: 0.75rem;
}

/* 各カード（未選択＝グレー枠） */
.gmap-mode-card {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.75rem;
  margin-bottom: 0;
  border: 1px solid #dee2e6;
  border-radius: 0.75rem;
  cursor: pointer;
}

/* 左上のアイコンチップ（薄グレー地・グレーアイコン） */
.gmap-mode-card-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 0.5rem;
  background-color: #f0f2f5;
  color: #67748e;
  font-size: 0.9rem;
}

.gmap-mode-card-label {
  font-weight: 600;
  color: #344767;
}

/* 右上のチェックバッジ（未選択時は非表示） */
.gmap-mode-card-check {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  display: none;
  align-items: center;
  justify-content: center;
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 50%;
  background-color: #ff2f92; /* ストロベリー地 */
  color: #ffffff;            /* 白チェック */
  font-size: 0.65rem;
}

/* 選択中＝ストロベリー枠＋チェックバッジ表示 */
.gmap-mode-selector .btn-check:checked + .gmap-mode-card {
  border-color: #ff2f92;
}
.gmap-mode-selector .btn-check:checked + .gmap-mode-card .gmap-mode-card-check {
  display: inline-flex;
}

/* モードで出し分ける領域 */
.gmap-mode-panel {
  display: none;
}
.gmap-mode-panel.is-active {
  display: block;
}

/* --------------------------------------------------------------------------
   ① ViewMode 現在地ドット（Leaflet divIcon 用）
   -------------------------------------------------------------------------- */
.gmap-current-location-icon {
  position: relative;
}
/* FB0728: 色は Google マップアプリ実機スクリーンショットの実測値（#0c53ff）に合わせる。
   FB0728(7): 実機（iOS Safari / DPR3）で青丸が白丸の中心から微妙にずれて見えたため、
   半端なピクセルが一切出ない構成へ改める。
     ・白 15px（奇数）だと left:50% = 7.5px、さらに iconAnchor 7.5 と重なって
       サブピクセル境界（DPR3 で 0.5px = 1.5 デバイスピクセル）に乗っていた。
     ・白を 16px（偶数）にすると 50% = 8px、青のオフセットも 8-6 = 2px と全て整数になる。
   あわせて青のスケールアニメーションは廃止し、従来の最大サイズ 12px で固定表示する。 */
.gmap-current-location-dot {
  display: block;
  position: relative;
  z-index: 2; /* ビームより前面に */
  box-sizing: border-box;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background-color: #ffffff; /* 固定表示する白い下地（縁取り） */
  box-shadow: 0 0 3px rgba(0, 0, 0, 0.4);
}
.gmap-current-location-dot::before {
  content: "";
  position: absolute;
  /* left/top 50% = 8px（整数）、margin -6px で中心合わせ。端は 2px / 14px で全て整数。 */
  top: 50%;
  left: 50%;
  width: 12px;
  height: 12px;
  margin: -6px 0 0 -6px;
  border-radius: 50%;
  background-color: #0c53ff; /* Google マップの現在地ブルー（実測値） */
}
/* 向きビーム（扇形）: SP の電子コンパスで方位が取れた時だけ表示する。
   既定は非表示＝丸ドットのみ（PC / 非対応 / 許可拒否のグレースフルデグレード）。
   JS が方位取得時に親へ .gmap-has-heading を付与し、CSS 変数 --gmap-heading（度）で回す。
   Google マップアプリと同様、青い扇がドット中心から向いている方位へ広がる。 */
/* FB0728(7): 「扇（conic）＋円形マスク」から「台形（clip-path）＋軸方向グラデーション」へ作り直す。
   Google マップの当該表現は実測すると扇ではなく台形で、半幅は
     half(d) = 10px + 0.25 × d   （d ＝ ドット中心からの距離）
   と直線的に広がる。d=0 の切片 10px は Google のドット外半径（20.7px ÷ 2）とほぼ一致する
   ＝「アイコンの正中線と円周が交わる 2 点」から辺が立ち上がる形状。傾き 0.25 は半頂角 14.04°。
   本アプリのドット外半径は 8px なので、近辺＝±8px、到達距離 47px、遠辺＝±(8 + 0.25×47)＝±19.75px。

   ・サイドライン（斜辺）… clip-path のエッジ＝クリッピングで境界をはっきり出す。
   ・遠端 … グラデーションの α が遠辺の位置でちょうど 0 になるので、clip の直線は見えない。
     ただし「直線的に 0 へ落として終わる」と傾きが最後まで一定なままゼロに当たり、
     マッハバンド（＝ぶつ切りに見える帯）が出る。そこで実測プロファイル（r=40px まで）に
     漸近的な裾（r=47:0.045 / 54:0.012 / 60:0）を足し、末端ほど傾きを緩めて完全に消す。
   ・α の実測値は r=16.7px:0.44 / 30px:0.235 / 40px:0.107（FB0728(8) で全体を 75% に短縮した
     ので、実距離は r=12.5px / 22.5px / 30px に対応する）。

   FB0728(8): 台形が長すぎたため長さを 75% へ（到達 60px → 45px）。
   **箱も同率で 128px → 96px に縮めるのが要点**。半径・箱サイズが同じ 0.75 倍なので
   pos = (半径 + r) / 箱幅 が不変となり、グラデーションの停止位置（%）は一切変わらない。
   結果、末端の漸近カーブと「遠辺の位置で α がちょうど 0」という関係がそのまま保たれ、
   自然透過が崩れない。開き角（傾き 0.25 ＝ 半頂角 14.04°）も Google 実測のまま維持する。 */
.gmap-current-location-beam {
  display: none;
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 0; /* ドットの背面 */
  width: 96px;
  height: 96px;
  /* ドット中心を回転中心にし、真北=0deg・時計回りの方位へ向ける
     （地図は常に北上＝回転なしのため、方位をそのまま回転角に使える）。 */
  transform: translate(-50%, -50%) rotate(var(--gmap-heading, 0deg));
  transform-origin: center center;
  background: linear-gradient(
    to top,
    rgba(103, 115, 255, 0.55) 0%,
    rgba(103, 115, 255, 0.55) 50%,
    rgba(103, 115, 255, 0.44) 63%,
    rgba(103, 115, 255, 0.235) 73.4%,
    rgba(103, 115, 255, 0.107) 81.25%,
    rgba(103, 115, 255, 0.045) 86.7%,
    rgba(103, 115, 255, 0.012) 92.2%,
    rgba(103, 115, 255, 0) 96.875%
  );
  /* 近辺（アイコン円周上の 2 点＝±8px）→ 遠辺（r=45px・±19.25px＝8 + 0.25×45）の台形。
     頂点は 左下→右下→右上→左上 の順。 */
  -webkit-clip-path: polygon(
    calc(50% - 8px) 50%,
    calc(50% + 8px) 50%,
    calc(50% + 19.25px) calc(50% - 45px),
    calc(50% - 19.25px) calc(50% - 45px)
  );
  clip-path: polygon(
    calc(50% - 8px) 50%,
    calc(50% + 8px) 50%,
    calc(50% + 19.25px) calc(50% - 45px),
    calc(50% - 19.25px) calc(50% - 45px)
  );
  pointer-events: none;
}
.gmap-current-location-icon.gmap-has-heading .gmap-current-location-beam {
  display: block;
}
/* FB0728(7): 現在地ドットの鼓動アニメーション（@keyframes gmap-location-breath）は廃止。
   拡大時の最大サイズ（青 12px）を正式サイズとして固定表示する。 */

/* --------------------------------------------------------------------------
   ViewMode 用トグルボタン群（現在地 / グレースケール / ルート）
   -------------------------------------------------------------------------- */
.gmap-viewmode-controls {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}
/* PC: 検索ボックスの下に、右揃え・縦並びで配置する
   （data-pc-placement-of プレースホルダ配下限定。SP overlay ルールとは非衝突） */
[data-pc-placement-of="gmap-viewmode-controls"] .gmap-viewmode-controls {
  flex-direction: column;
  align-items: flex-end;
}
/* P-3: PC も SP と同様に「丸ボタン＋アイコンのみ」へ統一（ラベル非表示・36px 正円）。
   資料の現在地ボタン意匠は参照せず、この方針で統一（神本さん OK）。 */
[data-pc-placement-of="gmap-viewmode-controls"] .gmap-toggle-label {
  display: none;
}
/* PC 現在地ボタン（正円）。
   直径はルート情報モジュール（.gmap-route-info）の高さと同じ --gmap-pc-control-h に揃える。
   高さが違うと、下端アンカーの .gmap-map-pc-controls-stack（align-items:center）でルート情報が
   出た瞬間に現在地ボタンが (43-36)/2 = 3.5px 上へずれて見えるため。
   stack 外（SP overlay 等）では変数が未定義なのでフォールバック 36px が効く。 */
[data-pc-placement-of="gmap-viewmode-controls"] .gmap-toggle-btn {
  width: var(--gmap-pc-control-h, 36px);
  height: var(--gmap-pc-control-h, 36px);
  padding: 0;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* FB0726(3): 黒枠を外し、シャドウで縁取りを表現（拡大表示終了ボタンと同デザイン）。
     FB0726(4): opacity は付けない（透過させない）。
     FB0728(10): シャドウの主張が強すぎるとの指摘により、隣に並ぶルート表示モジュール
     （.gmap-route-info ＝ 0 2px 6px rgba(0,0,0,.25)）と同程度まで弱める（旧 0 0 20px rgba(0,0,0,.6)）。 */
  border: 0 !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
}
/* FB0726(4): マウスオーバー/フォーカス時も soft-ui の .btn:hover でシャドウが外れないよう維持する。
   FB0728(11): **押下中に透けて見える真因** = soft-ui-dashboard.css:20580-20586 の
   `.btn:active,.btn:active:focus,.btn:active:hover { transform:scale(1); opacity:.85 }`
   （`!important` 無し・読込順が後なので同詳細度では soft-ui が勝つ）。背景の alpha を #fff に
   戻しても、**要素全体の opacity で薄くなる**ため透過が残っていた。
   ここで opacity を 1 に固定する（押下フィードバックの transform は残す）。 */
[data-pc-placement-of="gmap-viewmode-controls"] .gmap-toggle-btn:hover,
[data-pc-placement-of="gmap-viewmode-controls"] .gmap-toggle-btn:focus,
[data-pc-placement-of="gmap-viewmode-controls"] .gmap-toggle-btn:focus-visible,
[data-pc-placement-of="gmap-viewmode-controls"] .gmap-toggle-btn:active,
[data-pc-placement-of="gmap-viewmode-controls"] .gmap-toggle-btn:active:hover,
[data-pc-placement-of="gmap-viewmode-controls"] .gmap-toggle-btn:active:focus {
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25) !important;
  opacity: 1 !important;
}
/* PC: soft-ui の `.btn.btn-sm i`(0.5rem) で極小化されるアイコンを、円ボタンに
   見合う大きさへ引き上げる。詳細度は soft-ui と同点(0,2,1)のため SP 側同様
   !important で確実に上書きする。
   FB0726: リセンターマーク（fa-location-arrow 鏃型）は、円に対して PC は三角小さめ・
   SP は三角大きめが理想指定。PC は 1.05rem に抑える（SP は 1.45rem）。 */
[data-pc-placement-of="gmap-viewmode-controls"] .gmap-toggle-btn i {
  /* FB0726(2)(3)(8): PC アイコン 1.2rem。鏃型アイコンは字面が上・右寄りに見えるため、
     視覚的な中央へ下げ・左へ寄せる（FB0726(9): PC のみ top を 1px→2px にさらに下げる／left -1px）。 */
  font-size: 1.2rem !important;
  position: relative;
  top: 2px;
  left: -1px;
}
/* FB0726(2): 現在地ボタンは背景とアイコンの色を反転（白背景＋プライマリ色アイコン）。
   FB0728(10): 背景は完全な不透明にする（FB0728(9) の rgba(255,255,255,.95) を撤回）。
   ピン表示チェックボックスリスト・拡大表示終了ボタンも同時に不透明へ戻している。
   :hover/:focus/:active も同値にして、soft-ui の `.btn-outline-primary:hover`（背景をプライマリ色で
   塗る）や押下フィードバックで透けたり色が変わったりしないよう固定する。 */
.gmap-toggle-btn.is-active,
.gmap-toggle-btn.is-active:hover,
.gmap-toggle-btn.is-active:focus,
.gmap-toggle-btn.is-active:active {
  background-color: #ffffff !important;
  border-color: var(--bs-primary, #cb0c9f) !important;
  color: var(--bs-primary, #cb0c9f) !important;
}

/* S-3: SP 現在地ボタンをトピックスカードリスト上辺の「閉じるボタン(chevron-down)」と同位置へ。
   閉じるボタンは既に Google 帰属表示を避けた位置(.topic-list-content-toggle-btn margin-bottom:15px)
   にあり、現在地ボタンと閉じるボタンは同時に表示されない（現在地=カード非展開時／閉じる=展開時）
   ため同スロットに重ねてよい。差込先は .topic-list-content-toggle-module-wrapper.to-off 配下
   （HTML）で、閉じるボタンと同じ 50px セル内へ絶対配置で重ねる。SP 限定。 */
@media (max-width: 991px) {
  .topic-list-content-toggle-module-wrapper.to-off {
    position: relative;
  }
  .gmap-viewmode-controls-sp-overlay {
    position: absolute;
    right: 0;
    /* 閉じるボタンは .topic-list-controller-item の padding-bottom:0.875rem で底上げされているため
       同じ分だけ持ち上げ、さらに .topic-list-content-toggle-btn と同じ帰属回避リフト(15px)を足す。 */
    bottom: 0.875rem;
    margin-bottom: 15px;
    pointer-events: none; /* 内側ボタンのみ操作可 */
  }
  .gmap-viewmode-controls-sp-overlay .gmap-viewmode-controls {
    flex-direction: column;
    flex-wrap: nowrap;
    margin: 0 !important;
    pointer-events: auto;
  }
  .gmap-viewmode-controls-sp-overlay .gmap-toggle-label {
    display: none;
  }
  /* 閉じるボタン（.topic-list-content-toggle-btn）と同じ 36px 白円＋shadow へ揃える。 */
  .gmap-viewmode-controls-sp-overlay .gmap-toggle-btn {
    width: 36px !important;
    height: 36px !important;
    padding: 0;
    border: none !important;
    border-radius: 50%;
    /* FB0728(10): 背景は完全な不透明（FB0728(9) の rgba(255,255,255,.95) を撤回）。 */
    background-color: #ffffff !important;
    /* FB0726(4): SP は隣の「トピックスカードを開く」ボタン（.topic-list-content-toggle-btn）と
       同じシャドウに揃える。要素全体の opacity は付けない。 */
    box-shadow: 0 0 0.4rem 0.05rem rgba(0, 0, 0, 0.4);
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  /* FB0728(9): タップ中だけシャドウが消える不具合の修正。
     soft-ui の `.btn:active{box-shadow:0 3px 5px -1px …}` /
     `.btn:hover:not(.btn-icon-only){box-shadow:…}` が後勝ちして影を差し替えていた
     （読込順が jquery.mapping.css → gmaps.css → soft-ui のため、同詳細度では soft-ui が勝つ）。
     PC 側（[data-pc-placement-of="gmap-viewmode-controls"] の :hover/:focus/:active）と同じく
     全状態で通常時の影を !important で固定し、操作中も見た目を変えない。 */
  .gmap-viewmode-controls-sp-overlay .gmap-toggle-btn:hover,
  .gmap-viewmode-controls-sp-overlay .gmap-toggle-btn:focus,
  .gmap-viewmode-controls-sp-overlay .gmap-toggle-btn:focus-visible,
  .gmap-viewmode-controls-sp-overlay .gmap-toggle-btn:active,
  .gmap-viewmode-controls-sp-overlay .gmap-toggle-btn:active:hover,
  .gmap-viewmode-controls-sp-overlay .gmap-toggle-btn:active:focus {
    /* FB0728(10): 背景は完全な不透明。
       FB0728(11): 併せて要素全体の opacity も 1 に固定する。soft-ui の
       `.btn:active{opacity:.85}` が効くと、背景を #fff にしても押下中だけ透けて見えるため。 */
    background-color: #ffffff !important;
    box-shadow: 0 0 0.4rem 0.05rem rgba(0, 0, 0, 0.4) !important;
    opacity: 1 !important;
  }
  /* FB0726(2): SP は 1.2rem（大きすぎたため 1.45rem から縮小）。
     鏃型アイコンは字面が上寄りに見えるため、視覚的な上下中央へ僅かに下げる。 */
  .gmap-viewmode-controls-sp-overlay .gmap-toggle-btn i {
    font-size: 1.2rem !important;
    position: relative;
    top: 1.5px;
    left: -1px;
  }
  /* 可視制御: カード展開(詳細閲覧)・下部固定 POP UP 表示時は非表示。
     S-11: ルート表示モード中は現在地ボタンを残す（従来ここにあった
     body.gmap-route-mode-active の非表示は撤去し、下の chevron 個別非表示で対応）。 */
  .topic-list-content-header.active .gmap-viewmode-controls-sp-overlay,
  body:has(.sp-pin-detail-host.is-active) .gmap-viewmode-controls-sp-overlay {
    display: none;
  }
}

/* --------------------------------------------------------------------------
   ⑦ ルート表示モード
   - 現在地ボタンは常時表示（読込時から）。距離・所要時間ウィジェットは
     body.gmap-route-mode-active 時のみ表示。
   - PC: ウィジェットを地図（.map-contents-list = position-relative）の左上へ固定。
   - SP: 画面下部の白角丸モジュール（.card-project-main-content-footer）は残したまま、
     その中身（タイトル等）だけをルート情報ウィジェットへ差し替える。chevron/ズームは隠す。
     （.topic-list-content-header は SP 専用モジュールのため PC には影響しない）
   -------------------------------------------------------------------------- */

/* ルート情報ウィジェット本体（既定は非表示。モード中のみ表示）
   S-4: 徒歩アイコンを左端・×を右端に寄せる両端揃え。基準サイズは
   コメントピンカードの「ルート表示ボタン（.btn-show-route-walk）」に合わせる。 */
.gmap-route-info {
  display: none;
  align-items: center;
  justify-content: space-between;
  gap: 0.625rem;
  padding: 0.375rem 0.5rem;
  background-color: #ffffff;
  border-radius: 999px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
  color: #212529;
  white-space: nowrap;
}
body.gmap-route-mode-active .gmap-route-info {
  display: inline-flex;
}
/* S-4: 徒歩アイコンを .btn-show-route-walk i（1.25rem）と同径へ拡大 */
.gmap-route-info-icon {
  color: var(--bs-primary, #cb0c9f);
  font-size: 1.25rem;
}
/* 徒歩アイコン下の「Route」ラベル（表示のみ・ボタン機能なし。黒文字）
   S-4: .btn-show-route-walk-label（0.625rem）と同サイズへ */
.gmap-route-info-icon-group {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 0.0625rem;
}
.gmap-route-info-label {
  font-size: 0.625rem;
  font-weight: 600;
  color: #212529;
  line-height: 1;
}
.gmap-route-info-metrics {
  display: inline-flex;
  align-items: baseline;
  gap: 0.375rem;
  font-weight: 600;
}
/* S-4: 距離/所要時間の文字も拡大（0.9rem → 1rem） */
.gmap-route-info-distance,
.gmap-route-info-duration {
  font-size: 1rem;
}
/* FB0726(7): 距離と所要時間の間に半角スラッシュを挟み「距離 / 所要時間」表記にする（PC/SP共通）。
   距離との間隔は .gmap-route-info-metrics の gap(0.375rem)、スラッシュと所要時間の間隔は
   margin-right で確保する。 */
.gmap-route-info-metrics .gmap-route-info-duration::before {
  content: "/";
  margin-right: 0.375rem;
  font-weight: 600;
}
/* 距離/所要時間は Routes API の応答待ちで数百 ms 空欄になる。その間は
   「距離 / 所要時間」を（スラッシュも含めて）ひとまとまりの読み込み中要素として
   スピナー 1 つに置き換える。距離と所要時間を個別にスピナー表示はしない。
   枠幅は JS が予約幅（--gmap-route-metrics-w）で固定するため、スピナーの表示・
   消滅で左右の徒歩アイコンや × ボタンの位置は動かない。 */
.gmap-route-info-loading {
  display: none;
}
.gmap-route-info-metrics.is-loading {
  /* スピナーは baseline を持たないため中央揃えにする（テキスト時は baseline のまま） */
  align-items: center;
  justify-content: center;
}
.gmap-route-info-metrics.is-loading .gmap-route-info-distance,
.gmap-route-info-metrics.is-loading .gmap-route-info-duration {
  display: none;
}
.gmap-route-info-metrics.is-loading .gmap-route-info-loading {
  display: inline-block;
  width: 1rem;
  height: 1rem;
  border: 2px solid rgba(33, 37, 41, 0.25);
  border-top-color: #212529;
  border-radius: 50%;
  animation: gmap-route-info-spin 0.7s linear infinite;
}
@keyframes gmap-route-info-spin {
  to {
    transform: rotate(360deg);
  }
}
@media (prefers-reduced-motion: reduce) {
  .gmap-route-info-metrics.is-loading .gmap-route-info-loading {
    animation-duration: 2.1s;
  }
}
/* S-2: × を黒背景・白文字に統一（コメントピン詳細POP UP の × ＝
   .bg-gradient-primary が黒背景・白文字なのに合わせる）。PC/SP 共通。 */
.gmap-route-exit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background-color: #000;
  color: #fff;
  cursor: pointer;
}
.gmap-route-exit:hover,
.gmap-route-exit:focus {
  background-color: #222;
  color: #fff;
}

/* item8: PC はルート距離/所要時間モジュールと現在地ボタンを地図右下へ「横並び」で置く。
   両者を内包する <li class="gmap-map-pc-controls-stack"> をリストフローから外して
   map-contents-list（position-relative）へ重ね、flex 行として配置する。DOM 順は
   「ルート情報 → 現在地」＝ルート情報が左。ルート非表示時は .gmap-route-info が
   display:none のため現在地ボタンは右端に留まり、ルート開始で左隣に出現する。
   下端は Google 帰属（右下 gm-style-cc / Terms）を避けてリフトする。
   ※実タイル表示での最終微調整は容易（right/bottom のみ）。
   SP は各ホルダの中身が replaceContentsByWindowSize で SP 側プレースメントへ移動し
   空になるため、PC 幅限定（min-width:992px）で配置する。 */
@media (min-width: 992px) {
  li.gmap-map-pc-controls-stack {
    /* 行内 2 要素（ルート情報モジュール／現在地ボタン）の共通高さ。
       .gmap-route-info の実測高（ratio 1 / 0.8 帯とも 43px＝rem 定数のみで構成）を
       トークン化したもの。この行は bottom アンカー＋align-items:center のため、
       両者の高さが一致していないとルート情報の出現時に現在地ボタンが上下にずれる。 */
    --gmap-pc-control-h: 43px;
    position: absolute;
    right: 0.75rem;
    left: auto;
    top: auto;
    /* 帰属バー（右下）分だけ持ち上げる */
    bottom: calc(28px * var(--common-zoom-ratio) + 0.5rem);
    display: flex;
    flex-direction: row;
    align-items: center;
    /* FB0726(2): ルート情報BOXをもう少し左へずらし、現在地ボタンとの距離をさらに離す（→1.25rem）。 */
    gap: calc(1.25rem * var(--common-zoom-ratio));
    transform: none;
    z-index: 1000;
    list-style: none;
    margin: 0;
    padding: 0;
  }
  /* holder が map ul 直下の <li> になったため、my-2 の上下マージンは重ね配置では不要 */
  li.gmap-map-pc-controls-stack .gmap-viewmode-controls {
    margin: 0 !important;
  }
  /* 保険: 将来フォント等で内容高が変わっても現在地ボタンと必ず同高になるよう下限を揃える
     （現状は実測 43px と同値のため見た目は不変）。
     併せて PC のみの視覚調整とアニメーションをここに集約する（SP は footer カード内で
     flex:1・装飾打ち消しの別文脈なので巻き込まない）。 */
  li.gmap-map-pc-controls-stack .gmap-route-info {
    min-height: var(--gmap-pc-control-h);
    /* FB0726(2): モジュール左右の余白を広げる（左右とも約1.0rem）。左は徒歩アイコンの
       左側余白。右側は route-info では 0 にし、× ボタン自身の padding で 1.0rem を持たせて
       「余白ぶんも押下領域に含める」ようにする（下の .gmap-route-exit を参照）。 */
    padding-left: 1rem;
    padding-right: 0;
    opacity: 0;
    /* 表示/非表示のフェード。display は discrete なので allow-discrete で
       「フェードアウトし切ってから display:none」になるようにする。
       幅そのものは中身（下の .gmap-route-info-metrics）に追随させるため、
       ここでは transition 対象にしない（px 固定するとテキストのはみ出し・
       × ボタンの潰れが起きる）。 */
    transition:
      opacity 0.2s ease,
      display 0.2s allow-discrete;
  }
  /* 伸縮するのは「距離/所要時間」の枠だけ。JS が --gmap-route-metrics-w に
     px を与え、ここだけが幅アニメーションする（ピル本体の幅は auto のまま
     中身に追随するので、結果としてピル全体が滑らかに伸縮して見える）。
     overflow:hidden により、伸長中のテキストは枠の外へはみ出さず左から現れる。 */
  li.gmap-map-pc-controls-stack .gmap-route-info-metrics {
    width: var(--gmap-route-metrics-w, auto);
    /* FB0726(2)(3)(4): 距離/所要時間の表示領域に約180pxの min 幅を確保する（短文時に×の左へ余白）。
       ただし CSS min-width にすると width アニメーションが常にクランプされ「伸縮」しなくなるため、
       min-width は使わず、JS（animateRouteInfoWidth）側で着地幅を max(内容幅, 180px*ratio) にする。 */
    overflow: hidden;
    transition: width 0.25s ease;
  }
  /* 徒歩アイコン列と × ボタンは伸縮の巻き添えで潰れないよう固定。
     （flex 既定の flex-shrink:1 のままだと、幅が変わる瞬間に × が楕円に見える） */
  li.gmap-map-pc-controls-stack .gmap-route-info-icon-group,
  li.gmap-map-pc-controls-stack .gmap-route-exit {
    flex: 0 0 auto;
  }
  /* FB0726: PC版のみ、ルート終了×を「黒背景＋白抜き＋正円」から背景なしの×へ（見本＝×は●無し）。
     SP版（footer カード内の黒丸）は現状維持のため、PC メディアクエリ内に限定して上書きする。 */
  li.gmap-map-pc-controls-stack .gmap-route-exit {
    width: auto;
    height: auto;
    /* FB0726(3): 押下域は align-self:stretch で route-info の内側高さいっぱいに広げる
       （旧・黒丸ボタン相当の縦押下域を確保）。min-height は使わない＝モジュール高さは
       route-info の min-height(43px=--gmap-pc-control-h)のまま増やさない。 */
    align-self: stretch;
    border-radius: 0;
    background-color: transparent;
    color: #212529;
    /* 右 1.0rem は「見た目の右余白」かつ「押下領域」を兼ねる（route-info の右 padding は 0）。
       左 0.5rem は距離/所要時間との僅かな間隔。 */
    padding: 0 1rem 0 0.5rem;
  }
  /* FB0726(2): × アイコンを Topics 検索欄の × と同程度まで拡大する。 */
  li.gmap-map-pc-controls-stack .gmap-route-exit i {
    font-size: 1.25rem;
  }
  li.gmap-map-pc-controls-stack .gmap-route-exit:hover,
  li.gmap-map-pc-controls-stack .gmap-route-exit:focus {
    background-color: transparent;
    color: #000;
  }
  body.gmap-route-mode-active li.gmap-map-pc-controls-stack .gmap-route-info {
    opacity: 1;
  }
  /* display:none からの出現はそのままだと transition の起点が無いため、
     開始スタイルを明示してフェードインさせる。 */
  @starting-style {
    body.gmap-route-mode-active li.gmap-map-pc-controls-stack .gmap-route-info {
      opacity: 0;
    }
  }
  /* 「徒歩アイコン＋Route」は数値上は上下中央だが視覚的に浮いて見えるため 2px 下げる。
     margin-top/bottom を相殺させ、ピル自体の高さ（43px）は変えない。 */
  li.gmap-map-pc-controls-stack .gmap-route-info-icon-group {
    margin-top: 2px;
    margin-bottom: -2px;
  }
  @media (prefers-reduced-motion: reduce) {
    li.gmap-map-pc-controls-stack .gmap-route-info,
    li.gmap-map-pc-controls-stack .gmap-route-info-metrics {
      transition: none;
    }
  }
}
/* SP は中身が SP 側プレースメントへ移動して空になるが、<li> 自体はフローに残り
   1行分（line-height）だけ地図コンテナの高さを押し広げてしまう。PC 専用の器なので隠す。 */
@media (max-width: 991px) {
  li.gmap-map-pc-controls-stack {
    display: none;
  }
}

/* SP: ルート表示モード中は白角丸モジュール（.card-project-main-content-footer）を
   残したまま、その中身（タイトル・検索等 = .project-info-box-wrapper）だけを隠し、
   同モジュール内に移動してきたルート情報ウィジェットを表示する。
   S-11: ルート案内中も +/- ズームは操作できるよう、コントローラ行ごとではなく
   開閉 chevron（to-on/to-off のトグルモジュール）だけを隠し、
   .sp-leaflet-control-zoom-wrapper は表示のまま残す。 */
body.gmap-route-mode-active
  .topic-list-content-header
  .topic-list-content-header-controller
  .topic-list-content-toggle-module-wrapper
  .topic-list-content-toggle-module {
  display: none;
}
body.gmap-route-mode-active
  .topic-list-content-header
  .card-project-main-content-footer
  .project-info-box-wrapper {
  display: none;
}
body.gmap-route-mode-active
  .topic-list-content-header
  .card-project-main-content-footer
  [data-sp-placement-of="gmap-route-info"] {
  display: flex;
  align-items: center;
}
/* ウィジェットは footer カードの白角丸の上に乗るため、自身の白ピル装飾は打ち消す */
body.gmap-route-mode-active
  .topic-list-content-header
  .card-project-main-content-footer
  .gmap-route-info {
  display: flex;
  flex: 1 1 auto;
  /* S-4: 徒歩アイコン左端・×右端の両端揃え（メトリクスは中央） */
  justify-content: space-between;
  box-shadow: none;
  border-radius: 0;
  background-color: transparent;
  /* FB0726: 徒歩＋Route の左側と × の右側の余白が広すぎるため左右 padding を 0 にし、
     footer カードの角丸白背景領域の端にしっかり両端揃えして見せる（縦 padding は維持）。 */
  padding-left: 0;
  padding-right: 0;
}
body.gmap-route-mode-active
  .topic-list-content-header
  .card-project-main-content-footer
  .gmap-route-exit {
  margin-left: auto;
}
/* FB0728(10): SP の「徒歩アイコン＋Route」だけを少し左へずらす。
   この行の並びは「アイコン群 → 距離/所要時間 → ×」で、× の margin-left:auto が余白を
   すべて吸うため、左の 2 つは左端から gap(0.625rem) で詰めて並ぶ。つまりアイコン群に
   margin-left:-X を掛けると距離/所要時間まで同じ X だけ左へ動いてしまう。
   そこで **margin-right に同じ +X** を与えて外寸を元に戻し、アイコン群だけが X 左へ出る形にする
   （距離/所要時間・× の位置は 1px も動かない）。ずらし量はこの 1 変数だけで調整できる。 */
body.gmap-route-mode-active
  .topic-list-content-header
  .card-project-main-content-footer
  .gmap-route-info-icon-group {
  --gmap-sp-route-icon-shift: 0.5rem;
  margin-left: calc(-1 * var(--gmap-sp-route-icon-shift));
  margin-right: var(--gmap-sp-route-icon-shift);
}

/* --------------------------------------------------------------------------
   コメントピン明細カードの徒歩ルートボタン（.btn-show-route-walk）の配置。
   3点リーダ（.pin-detail-dropdown-menu-wrapper）の直下・水平中央に並べ、
   カード下端からはみ出さないようアクション列を縦積み flex にする。
   PC右カード / PC地図POP UP / SP下部リスト / SP地図POP UP の4コンテキスト共通。
   -------------------------------------------------------------------------- */
.pin-detail-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
/* 3点リーダ wrapper に 36px スロット（テーマモード基底の height:100% 相当）を min-height で
   復元し、3点リーダの上下に均等な余白を確保する。これにより「ハート→3点リーダ→ルート」の
   縦間隔が、テーマモードの「ハート→3点リーダ」の見た目（各要素 36px スロット）と揃う。
   height:auto のままルートボタン分の縦スペースは block 側で確保される。 */
.pin-detail-actions .pin-detail-dropdown-menu-wrapper {
  height: auto;
  min-height: calc(36px * var(--common-zoom-ratio));
  width: 100%;
}
.pin-detail-route-btn-wrapper {
  display: flex;
  justify-content: center;
  width: 100%;
}
/* 非 gmaps ではボタンが除去され空になるため詰める（レイアウト無影響） */
.pin-detail-route-btn-wrapper:empty {
  display: none;
}
.btn-show-route-walk {
  display: inline-flex;
  flex-direction: column; /* アイコン上・Route ラベル下の縦積み */
  align-items: center;
  justify-content: center;
  gap: 0.125rem; /* アイコンとラベルの間隔 */
  padding: 0.25rem 0.5rem;
  color: var(--bs-primary, #cb0c9f);
  line-height: 1;
}
.btn-show-route-walk i {
  font-size: 1.25rem; /* 3点リーダ fa-ellipsis-v(1.25rem) と揃える */
}
/* アイコン下の「Route」ラベル（黒文字。アイコンのプライマリ色とは独立）。
   左右にネガティブマージンを付与し、ラベル幅がアクション列（.pin-detail-actions）の
   横幅を押し広げないようにする（Route 追加前と同程度の列幅に保つ）。 */
.btn-show-route-walk-label {
  font-size: 0.625rem;
  font-weight: 600;
  color: #212529;
  line-height: 1;
  margin-left: -10px;
  margin-right: -10px;
}
/* SP（<=991px）ではルート表示／現在地ボタンのツールチップを出さない。
   isTouchDevice() 依存だとタッチ非検出のSP環境で tap 時に出て残るため、
   アプリのSP定義（幅991px以下）に合わせて幅ベースで確実に非表示化する。 */
@media (max-width: 991px) {
  .tooltip.route-tooltip-pc-only,
  .tooltip.gmap-tooltip-pc-only {
    display: none !important;
  }
}

/* gmaps モードでは背景画像が無いため、ローディング枠の見た目を整える */
.map-contents-wrapper.gmap-mode {
  background-color: #e9ecef;
}

/* --------------------------------------------------------------------------
   GoogleMaps モード時のみ、Google 帰属バー（ロゴ=左下 / Terms・Report=右下）と
   重ならないよう、下部の +/- ズームとピン表示/非表示チェックボックスリストを
   帰属バーの高さ分だけ持ち上げる。テーマモードは Leaflet 帰属を消しているため対象外。

   注意:
   - +/- ズーム(.leaflet-control-zoom)は既定で margin:16px !important を持つため、
     上書きには !important と高い詳細度が必要。
   - チェックボックスの可視ボックスは .leaflet-custom-layer-control（full-height の
     flex コンテナ）ではなく、その子 .leaflet-control-layers-expanded 側。
   オフセット値は実タイル表示で重なりを見て微調整する。
   -------------------------------------------------------------------------- */
/* S-10: この持ち上げは「SP メインマップで帰属バーと +/- が重なる」対策。
   作成/編集モーダルの地図ピッカー（.gmap-picker-map）は帰属の構成が異なり、44px 持ち上げると
   +/- がピッカー枠外へ押し出されて見えなくなるため、帰属 lift と同じく
   :not(.gmap-picker-map) で除外し、ピッカー専用のリフト量を下のブロックで別途与える。 */
.leaflet-container.gmap-mode:not(.gmap-picker-map) .leaflet-control-zoom {
  margin-bottom: calc(44px * var(--common-zoom-ratio)) !important;
}

/* --------------------------------------------------------------------------
   作成/更新モーダル内 地図ピッカーの +/- ズーム（gmaps-picker.js で bottomleft に自前追加）。
   メインマップ側のルールはすべて :not(.gmap-picker-map) で別管理のため、本ブロックは
   ピッカー限定＝メインマップへの影響はゼロ。
   - 表示: jquery.mapping.css の SP 一括 `.leaflet-control-zoom{display:none !important}` は
     「メインマップの +/- を .sp-leaflet-control-zoom-wrapper へクローンして出す」設計のための
     ものだが、クローン対象外のピッカーまで巻き込んで SP で +/- が消えていた。ピッカーだけ
     除外して表示に戻す（詳細度 (0,4,0) > (0,1,0) で確実に勝つ）。
   - 位置: Google ロゴ（枠下端に密着・高さ 26px）と +/- が Leaflet 既定 margin:16px のままだと
     重なるため、26px + 余白 4px = 30px までリフトする。リフト後もズーム上端は枠下端から
     82px でピッカー（aspect-ratio 1.41421/1）の内側に十分収まる。
   -------------------------------------------------------------------------- */
.leaflet-container.gmap-mode.gmap-picker-map .leaflet-control-zoom {
  display: block !important;
  margin-bottom: 30px !important;
}
.leaflet-container.gmap-mode
  .leaflet-custom-layer-control
  .leaflet-control-layers-expanded {
  margin-bottom: calc(40px * var(--common-zoom-ratio)) !important;
}
/* item8: PC は右下に「ルート情報＋現在地」の横並び行（.gmap-map-pc-controls-stack）が
   重なるため、ピン表示/非表示チェックボックスをその行の高さ＋間隔ぶんさらに持ち上げ、
   常に行の「上」に積まれるようにする。ピッカーには行が無いので除外。
   持ち上げ量は「現在地ボタンの上端 ＋ --pin-list-gap（拡大表示と同じ間隔）」。
   現在地ボタンの上端 = 行の bottom（28px*ratio + 0.5rem）＋ ボタン径 43px。
   max-height 等の残りは jquery.mapping.css 側の共通ブロックが --pin-list-bottom を
   読んで算出する（ここは gmaps 基底の 40px ルールを上書きするため margin も再宣言）。 */
@media (min-width: 992px) {
  .leaflet-container.gmap-mode:not(.gmap-picker-map)
    .leaflet-custom-layer-control
    .leaflet-control-layers-expanded {
    --pin-list-bottom: calc(
      28px * var(--common-zoom-ratio) + 0.5rem + 43px + var(--pin-list-gap)
    );
    margin-bottom: var(--pin-list-bottom) !important;
  }
}

/* --------------------------------------------------------------------------
   SP: Google ロゴ（左下）／著作権・利用規約(Terms)（右下）の帰属を、
   「可視の白いトピックスカード上端」に常時密着させる（統一方針）。

   背景:
   GoogleMutant は Google ロゴ・帰属リンクを Leaflet の control corner
   (.leaflet-bottom.leaflet-left / .leaflet-right) 直下へ配置する。SP では
   トピックスカードリストが fixed で画面下部に重なるため、Maps Platform の
   「帰属は常に視認可能」ポリシーに反しないよう、帰属を .leaflet-bottom 内の
   実要素のまま（＝地図と同じビジュアルコンテナ内・Places policies 準拠）
   カード上端の直上へ translateY で持ち上げる。

   統一アンカー:
     lift = (100dvh - --topic-list-content-top) - --gmap-sp-card-header-h
   - --topic-list-content-top は fixed カードコンテナ上端（格納/詳細/0件で常時更新）。
   - --gmap-sp-card-header-h は「コンテナ上端 → 可視白カード上端」の差（透明なヘッダ
     操作行＝SP ズーム＋開閉 chevron の高さ）。これを引くことで白カード上端へ密着する。
   - クランプ(min 155px)は設けない。0件（カードが 155px 超）でも実カード上端まで届く。
   - 拡大表示モード(body.is-view-expand)は下部カードが無い（display:none）ため lift を
     無効化し、帰属は地図下端＝画面下端に留める（要件 B）。
   - ロゴ（左下・class 無しの非コントロール div）と 著作権/Terms（右下
     .leaflet-control-attribution）の双方を同一アンカーへ寄せる。左右に分離するため
     相互の重なりは無い。
   - +/- ズーム／レイヤーコントロールは帰属側では動かさず、重なる場合は要素側を上へ
     逃がす（下記「要件 C」および既存 .leaflet-control-zoom ルール）。
   - PC はカードがサイドカラムのため lift 不要（--topic-list-content-top=0 でも本 @media 外）。
   - 地図ピッカー（作成/編集モーダル内 .gmap-picker-map）は .gmap-mode を +/- ズーム持ち上げ
     （上記 .leaflet-container.gmap-mode ルール）のためだけに付与しており、下部カードを持たない
     固定 320px 枠。SP カード基準の持ち上げは無意味かつ帰属が枠外へ飛び出す原因になるため、
     本 lift の対象から :not(.gmap-picker-map) で除外し、帰属は Leaflet 既定の枠下部に固定する。
   -------------------------------------------------------------------------- */
.leaflet-container.gmap-mode {
  /* コンテナ上端 → 可視白カード上端の差（透明なヘッダ操作行の高さ）。
     CSS で決まる操作行高の定数近似。ルートモードのみ操作行が消えるため 0 に切替える。 */
  --gmap-sp-card-header-h: 82px;
}
/* S-11: ルート表示モード中もヘッダ操作行（.sp-leaflet-control-zoom-wrapper）は残る
   ため、白カード上端はコンテナ上端から操作行の高さ分だけ下がる。よって
   --gmap-sp-card-header-h は通常時と同じ既定 82px を維持し、帰属 lift もその分
   （白カード上端＝ルート情報ウィジェット行の上端）へ密着させる。旧実装はここで 0px に
   上書きしていたが、ズームを残す S-11 では行が消えないため上書きは不要（削除）。 */
@media (max-width: 991px) {
  body:not(.is-view-expand)
    .leaflet-container.gmap-mode:not(.gmap-picker-map)
    .leaflet-bottom.leaflet-left
    > div:not(.leaflet-control),
  body:not(.is-view-expand)
    .leaflet-container.gmap-mode:not(.gmap-picker-map)
    .leaflet-bottom.leaflet-right
    > div:not(.leaflet-control),
  body:not(.is-view-expand)
    .leaflet-container.gmap-mode:not(.gmap-picker-map)
    .leaflet-bottom
    .leaflet-control-attribution {
    transform: translateY(
      calc(
        -1 *
          max(
            0px,
            (100dvh - var(--topic-list-content-top, 100dvh)) -
              var(--gmap-sp-card-header-h, 82px)
          )
      )
    );
    /* カード開閉アニメ(.3s ease-out)に追従し、遷移中も上端へ密着させ続ける */
    transition: transform 0.3s ease-out;
  }
}

/* --------------------------------------------------------------------------
   要件C: 拡大表示モード（body.is-view-expand）で「終了ボタン」が画面右下の
   著作権/Terms 帰属に重ならないよう、帰属ではなく“ボタン側”を上へ逃がす。
   帰属は画面下端の規定位置（Leaflet 既定 = 下端から約20px）を保つ。
   GoogleMaps モード限定（body 配下に .leaflet-container.gmap-mode を持つ場合のみ）＝
   テーマファイルモードの終了ボタン位置には一切影響しない。
   -------------------------------------------------------------------------- */
/* SP: フローティング終了ボタン（既定 bottom:15px）を著作権/Terms に重ならない位置へ。
   下方に空きすぎない範囲で少し下げる（25px）。 */
body.is-view-expand:has(.leaflet-container.gmap-mode)
  .project-main-content
  .btn-view-expand-or-compress.btn-view-compress.btn-view-compress-for-sp {
  bottom: 25px;
}
/* PC: 拡大表示時の固定フッタ（.card-footer, bottom:0）内の終了ボタンを、
   下パディング追加で著作権/Terms の上へ逃がす */
body.is-view-expand:has(.leaflet-container.gmap-mode)
  .project-main-content
  .card-project-main-content
  .card-footer {
  padding-bottom: calc(44px * var(--common-zoom-ratio)) !important;
}

/* --------------------------------------------------------------------------
   拡大表示モード（body.is-view-expand）における現在地ボタンの退避。
   - PC: 通常時の定位置（地図右下・.gmap-map-pc-controls-stack）は、拡大表示中に
     固定フッタ（.card-project-main-content-footer / position:fixed・z-index:9999）の
     背後へ潜って見えなくなる。position:fixed ＋ フッタより大きい z-index で前面へ出し、
     「終了ボタンの真上・右端揃え」へ移す。
   - SP: 現在地ボタンの差込先 .gmap-viewmode-controls-sp-overlay はトピックスヘッダ配下に
     あり、拡大表示中は祖先が display:none になってボタンごと消える。祖先を CSS で
     復活させると無関係な UI まで出てしまうため、**JS 側（jquery.mapping.js /
     jquery.view-mode.js の syncGmapViewModeControlsPlacementOnViewExpand）で PC ホルダへ
     移設**し、ここでは SP 一括の display:none を拡大表示中のみ解除する。
   いずれも GoogleMaps モード限定。テーマファイルモードには一切影響しない。
   -------------------------------------------------------------------------- */
body.is-view-expand:has(.leaflet-container.gmap-mode) li.gmap-map-pc-controls-stack {
  position: fixed;
  /* 固定フッタ（z-index:9999）より前面へ */
  z-index: 10000;
  /* SP 拡大表示時、祖先 .tab-pane が pointer-events:none のため押下できなくなる。
     この行だけ操作可能に戻す（PC は元から auto なので影響なし）。 */
  pointer-events: auto;
}
@media (min-width: 992px) {
  /* 終了ボタンの径を現在地ボタン（--gmap-pc-control-h = 43px）に揃える。
     基底は jquery.mapping.css の `.is-view-expand .btn-circle-with-icon.btn-lg…`
     ＝ calc(50px * ratio)（ratio 0.8 帯で 40px）で、現在地ボタンより一回り小さい。 */
  body.is-view-expand:has(.leaflet-container.gmap-mode)
    .btn-circle-with-icon.btn-lg.btn-view-expand-or-compress.btn-view-compress {
    width: 43px;
    height: 43px;
  }
  body.is-view-expand:has(.leaflet-container.gmap-mode)
    li.gmap-map-pc-controls-stack {
    /* PC 終了ボタン（右 30px・下 45px＝--common-zoom-ratio 連動／径は上で 43px に統一）
       の右端に揃え、その真上へ 1rem の間隔で積む。 */
    right: calc(30px * var(--common-zoom-ratio));
    bottom: calc(45px * var(--common-zoom-ratio) + 43px + 1rem);
  }
  /* FB0728(11): 拡大表示中はルート情報モジュールだけを 1 段下ろし、終了ボタンの「左隣」へ置く。
     従来は「ルート情報 → 現在地」が終了ボタンの真上に 1 行で並んでいたため、現在地ボタンの
     ツールチップ（data-bs-placement="left"）がちょうどルート情報モジュールの位置に出て、
     その背後（tooltip の z-index 1070 < スタックの 10000）へ隠れていた。
     ルート情報を絶対配置でスタックから外すと、右アンカーのスタックには現在地ボタンだけが
     残る（＝位置は不動）。空いた左側にツールチップが出るようになる。
     終了ボタンのツールチップは逆にルート情報へ重なるが、そちらは下の z-index:10001 で
     常に前面に出るため隠れない。
     ・right … 終了ボタンの幅（--gmap-pc-control-h）＋通常時と同じ行間 gap(1.25rem×ratio)
     ・top ……… スタック下端から、通常時と同じ 1rem 下＝終了ボタンと同じ行・同じ高さ(43px)なので
                上下中央も揃う。 */
  body.is-view-expand:has(.leaflet-container.gmap-mode)
    li.gmap-map-pc-controls-stack
    .gmap-route-info {
    position: absolute;
    top: calc(100% + 1rem);
    right: calc(
      var(--gmap-pc-control-h, 43px) + 1.25rem * var(--common-zoom-ratio)
    );
  }
  /* 終了ボタンのツールチップが現在地ボタン（z-index:10000）の背後へ回り込まないよう、
     さらに前面へ。tooltip は body 直下へ生成されるためスコープは body 側で掛ける。 */
  body.is-view-expand:has(.leaflet-container.gmap-mode)
    .tooltip.tooltip-view-expand-or-compress {
    z-index: 10001;
  }
}
@media (max-width: 991px) {
  body.is-view-expand:has(.leaflet-container.gmap-mode)
    li.gmap-map-pc-controls-stack {
    /* SP 一括の display:none（PC 専用の器のため）を拡大表示中のみ解除する。
       行レイアウトは PC 用ブロック（min-width:992px）側にしか無いためここで同値を与える。
       ボタン径は PC の 43px ではなく、SP 通常表示（.gmap-viewmode-controls-sp-overlay 側）
       と同じ 36px に揃える（拡大表示中だけ大きく見えるのを防ぐ）。 */
    --gmap-pc-control-h: 36px;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: calc(0.5rem * var(--common-zoom-ratio));
    list-style: none;
    margin: 0;
    padding: 0;
    /* SP 終了ボタン（.btn-view-compress-for-sp = 50px 円・右 15px・下 25px＝上の
       要件C で指定した値）の右端に揃え、その真上へ 0.5rem の間隔で積む。 */
    right: 15px;
    bottom: calc(25px + 50px + 0.5rem);
    top: auto;
    left: auto;
  }
  /* SP 一括の `[data-pc-placement-of]{display:none}`（jquery.mapping.css）により
     移設先ホルダごと消えるため、この現在地ボタンのホルダだけ解除する。 */
  body.is-view-expand:has(.leaflet-container.gmap-mode)
    li.gmap-map-pc-controls-stack
    [data-pc-placement-of="gmap-viewmode-controls"] {
    display: block;
  }
}

/* --------------------------------------------------------------------------
   要件1: 拡大表示モード（body.is-view-expand）で著作権/Terms を画面の右下隅へ
   完全密着させる。基底 .is-view-expand .leaflet-bottom/.leaflet-right の 20px
   マージン（jquery.mapping.css）を帰属のみ 0 に上書きして余白を撤去する。
   併せてブラウザ角丸でテキストが切れないよう、帰属ボックス内部に右パディングを
   与え（＝背景箱を右へ拡張し）テキストを角から内側へ寄せる。
   GoogleMaps モード限定。ピン表示/非表示チェックボックス側 .leaflet-control の
   20px マージンは温存する（帰属だけを対象にする）。
   -------------------------------------------------------------------------- */
body.is-view-expand:has(.leaflet-container.gmap-mode)
  .leaflet-bottom.leaflet-right
  .leaflet-control-attribution {
  /* 基底 .is-view-expand の margin-bottom/right:20px を帰属のみ 0 に上書きして
     著作権/Terms クラスタ全体を画面右下隅へ完全密着させる（余白撤去）。 */
  margin: 0 !important;
}
/* ブラウザ角丸（OS ウィンドウ隅の丸み）で最右リンクの文字が切れないよう、帰属
   クラスタ最右のボックス（GoogleMutant 生成の gm-style-cc、通常は「地図の誤りを
   報告する」）に内部右パディングを与える。背景ボックスは隅へ密着したまま、文字だけ
   内側へ寄る（＝ユーザー要望の「箱を右へ引き伸ばしつつ内部に余白」）。:last-child の
   ため、報告リンクが無い場合は「利用規約」側へ自動的に適用される。 */
body.is-view-expand:has(.leaflet-container.gmap-mode)
  .leaflet-control-attribution
  .gm-style-cc:last-child {
  padding-right: 16px;
}

/* --------------------------------------------------------------------------
   要件4: 拡大表示モードで、要件C により上へ逃がした終了ボタンと、右下に積む
   ピン表示/非表示チェックボックスリストが上下で重ならないよう、拡大 gmaps 限定で
   リスト（.leaflet-control-layers-expanded）をさらに持ち上げる。終了ボタンの
   持ち上げ量（要件C）は Terms 回避に必要なため維持し、リスト側で間隔を確保する。
   通常モードの持ち上げ（既存 40px ルール）には影響しない。
   -------------------------------------------------------------------------- */
body.is-view-expand:has(.leaflet-container.gmap-mode)
  .leaflet-control-container
  .leaflet-control-layers-expanded {
  /* 終了ボタンの直上へ移設した現在地ボタン（43px = --gmap-pc-control-h）と
     その間隔(1rem)の分を上乗せし、リストと現在地ボタンの重なりを防ぐ。 */
  margin-bottom: calc(
    118px * var(--common-zoom-ratio) + 43px + 1rem
  ) !important;
}
/* PC 拡大表示: 上の一括値（SP と共用）を、通常表示と同じ算出式へ置き換える。
   計算結果は従来と同値（118px*ratio + 59px）なので見た目は変わらない。
     現在地ボタン上端 = 行の bottom（45px*ratio + 43px + 1rem）＋ ボタン径 43px
     そこへ --pin-list-gap を足したものが持ち上げ量。
   横位置も現在地ボタン（right: 30px*ratio）と揃える。 */
@media (min-width: 992px) {
  body.is-view-expand:has(.leaflet-container.gmap-mode)
    .leaflet-control-container
    .leaflet-custom-layer-control
    .leaflet-control-layers-expanded {
    --pin-list-bottom: calc(
      45px * var(--common-zoom-ratio) + 43px + 1rem + 43px +
        var(--pin-list-gap)
    );
    --pin-list-right: calc(30px * var(--common-zoom-ratio));
    margin-bottom: var(--pin-list-bottom) !important;
    margin-right: var(--pin-list-right) !important;
  }
}

/* --------------------------------------------------------------------------
   要件2: SP 通常表示で、ヘッダ操作行のボタンが Google 帰属を覆う問題を解消する。
   - +/- ズーム（左）が Google ロゴ（左下）に重なる。
   - 開閉トグルボタン（展開時は右寄せ）が 著作権/Terms（右下）に重なる。
   帰属は「白カード上端へ密着」させる統一アンカー（上記 SP セクション）を保ったまま、
   ボタン側を上へ逃がして帰属の視認領域を確保する。カード開閉アニメ中は帰属もヘッダも
   同一のカードコンテナに追従して移動するため、ボタンの margin-bottom（定数）により
   ギャップは常に一定に保たれる。GoogleMaps モード限定・SP 限定。テーマファイルモードや
   PC には影響しない（PC は Leaflet コントロールを別途扱う）。
   -------------------------------------------------------------------------- */
@media (max-width: 991px) {
  /* +/- ズームを Google ロゴの上へ逃がす。
     基底 .sp-leaflet-control-zoom-wrapper .leaflet-control-zoom{margin:0 !important}
     を上書きするため !important + 高詳細度が必要。 */
  body:has(.leaflet-container.gmap-mode)
    .sp-leaflet-control-zoom-wrapper
    .leaflet-control-zoom {
    margin-bottom: 22px !important;
  }
  /* 開閉トグル（格納/展開の両ボタン）を 著作権/Terms の上へ逃がす。トグルモジュールは
     height:100% + align-items:end のため、少量の margin-bottom で十分持ち上がる。 */
  body:has(.leaflet-container.gmap-mode) .topic-list-content-toggle-btn {
    margin-bottom: 15px;
  }
  /* 要件1(改): 上へ逃がした +/- ズームの上端が、固定カードコンテナ
     .topic-list-content{overflow:hidden;height:155px}（jquery.mapping.css）の上端で
     途切れる。旧実装は overflow:clip + overflow-clip-margin:24px で padding-box の外側 24px まで
     描画を許可していたが、WebKit（Safari / iOS の全ブラウザ＝iOS Chrome 含む）は
     overflow-clip-margin を尊重しないためクリップされ続けた（Blink の Mac Chrome のみ正常）。
     代わりに padding-top でクリップ境界（padding-box 上端）自体を 24px 持ち上げ、同量だけ top を
     引き上げて白カードの視覚位置は不変に保つ。box-sizing:content-box で height:155px を content 高
     として扱い、box 下端も従来位置のまま。クリップは基底 overflow:hidden のままで全ブラウザ共通に効く。
     ズームの表示位置（margin-bottom:22px）と帰属 lift（--gmap-sp-card-header-h）は無改変。 */
  body:has(.leaflet-container.gmap-mode)
    main.project-main.main-fill.main-fill-sp
    .main-fill-top-contents.topic-list-content {
    box-sizing: content-box;
    padding-top: 24px !important;
    top: calc(var(--topic-list-content-top) - 24px) !important;
  }
}