/* ====================================================
   0. 4px グリッドシステム — スペーシング統一
   ==================================================== */
:root {
  /* スペーシング: 4px グリッド */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-6: 24px;
  --sp-8: 32px;
  /* タイプスケール: 5段階 */
  --fs-xs: 10px;
  --fs-sm: 12px;
  --fs-base: 14px;
  --fs-lg: 16px;
  --fs-xl: 20px;
  /* ── UI色（インターフェース） ── */
  --ui-primary: #1a3a6a;         /* プライマリアクション・見出し */
  --ui-primary-hover: #2a5a9a;
  --ui-text: #333;
  --ui-text-sub: #666;
  --ui-text-muted: #888;
  --ui-text-hint: #bbb;
  --ui-border: #e0e0e0;
  --ui-border-light: #e8e8e8;
  --ui-bg-subtle: #f5f7fa;
  --ui-bg-muted: #f0f0f0;
  --ui-bg-dim: #f5f5f5;
  /* ── データ色（リスクレベル） ── */
  --risk-high: #c62828;          /* 高リスク */
  --risk-high-bg: #fff5f5;
  --risk-high-border: #ef9a9a;
  --risk-high-grad-from: #ffebee;
  --risk-high-grad-to: #ffcdd2;
  --risk-mid: #e65100;           /* 中リスク */
  --risk-mid-bg: #fffaf3;
  --risk-mid-border: #ffcc80;
  --risk-mid-grad-from: #fff3e0;
  --risk-mid-grad-to: #ffe0b2;
  --risk-safe: #1b5e20;          /* 安全 */
  --risk-safe-accent: #16a34a;
  --risk-safe-bg: #e8f5e9;
  --risk-safe-bg-deep: #c8e6c9;
  --risk-safe-border: #a5d6a7;
  --risk-safe-light: #f0fdf4;
  --risk-safe-light-border: #bbf7d0;
  --risk-safe-active: #dcfce7;
  --risk-safe-active-border: #86efac;
  --risk-info: #0d47a1;          /* 情報 */
  --risk-info-bg: #e3f2fd;
  --risk-warn: #92400e;          /* 警告（部分ON等） */
  --risk-warn-bg: #fef3c7;
  /* ── エレベーション（影の深度） ── */
  --shadow-low:  0 2px 4px rgba(0,0,0,0.08);   /* ボタン・バッジ */
  --shadow-mid:  0 4px 16px rgba(0,0,0,0.12);  /* パネル・ポップアップ */
  --shadow-high: 0 8px 32px rgba(0,0,0,0.18);  /* モーダル・Bottom Sheet */
}

/* ====================================================
   1. 閉じるボタン: タッチターゲット 44px 以上 (WCAG 2.5.8)
   ==================================================== */
.leaflet-popup-close-button {
  /* タッチターゲット 44px、視覚的には中央の 32×32 円形 */
  width: 44px !important;
  height: 44px !important;
  font-size: var(--fs-lg) !important;
  line-height: 1 !important;
  right: var(--sp-1) !important;
  top: var(--sp-1) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: var(--ui-text-muted) !important;
  padding: 0 !important;
  border-radius: 50% !important;
  background: transparent !important;
  transition: background 0.15s, color 0.15s;
}
.leaflet-popup-close-button:hover {
  background: rgba(0,0,0,0.05) !important;
  color: var(--ui-text) !important;
}
.leaflet-popup-close-button:active {
  background: rgba(0,0,0,0.1) !important;
}

/* ====================================================
   2. フォントサイズ・行間の改善 (WCAG 可読性)
   ==================================================== */
/* — デスクトップ共通 — */
/* デスクトップ */
.risk-popup .rp-title {
  font-size: var(--fs-base) !important;
  line-height: 1.35 !important;
  padding-bottom: var(--sp-2) !important;
  margin-bottom: var(--sp-3) !important;
}
.risk-popup .rp-label {
  font-size: var(--fs-sm) !important;
}
.risk-popup .rp-value {
  font-size: var(--fs-sm) !important;
  padding: var(--sp-1) var(--sp-3) !important;
  border-radius: 6px !important;
}
.risk-popup .rp-advice {
  font-size: var(--fs-sm) !important;
  line-height: 1.55 !important;
  padding: var(--sp-1) 0 var(--sp-2) var(--sp-6) !important;
}
.risk-popup .rp-note {
  font-size: var(--fs-xs) !important;
  line-height: 1.5 !important;
  padding-top: var(--sp-2) !important;
  margin-top: var(--sp-3) !important;
}
.risk-popup .rp-icon {
  font-size: var(--fs-lg) !important;
  width: var(--sp-6) !important;
}
.risk-popup .rp-row {
  padding: var(--sp-2) 0 !important;
  min-height: 36px !important;
}
.risk-popup .rp-sub-row {
  min-height: var(--sp-8) !important;
}

/* モバイル */
@media (max-width: 768px) {
  .risk-popup .rp-title {
    font-size: var(--fs-lg) !important;
    line-height: 1.3 !important;
    margin-bottom: var(--sp-3) !important;
  }
  .risk-popup .rp-label {
    font-size: var(--fs-base) !important;
  }
  .risk-popup .rp-value {
    font-size: var(--fs-sm) !important;
    padding: var(--sp-1) var(--sp-3) !important;
  }
  .risk-popup .rp-advice {
    font-size: var(--fs-sm) !important;
    padding: var(--sp-1) 0 var(--sp-3) var(--sp-8) !important;
    line-height: 1.6 !important;
  }
  .risk-popup .rp-note {
    font-size: var(--fs-sm) !important;
    line-height: 1.55 !important;
  }
  .risk-popup .rp-icon {
    font-size: var(--fs-xl) !important;
    width: 28px !important;
  }
  .risk-popup .rp-row {
    padding: var(--sp-2) 0 !important;
    min-height: 40px !important;
  }
}

/* ====================================================
   3. スクロールバー + スクロールインジケーター
   ==================================================== */
.leaflet-popup-content {
  overflow-y: auto !important;
  scrollbar-width: thin !important;
  scrollbar-color: var(--ui-text-hint) transparent !important;
  overscroll-behavior: contain !important;
}
.leaflet-popup-content::-webkit-scrollbar { width: var(--sp-1); }
.leaflet-popup-content::-webkit-scrollbar-track { background: transparent; }
.leaflet-popup-content::-webkit-scrollbar-thumb { background: var(--ui-text-hint); border-radius: 3px; }
.leaflet-popup-content::-webkit-scrollbar-thumb:hover { background: var(--ui-text-muted); }
/* フェードグラデーション (::after) — JS で制御 */
.leaflet-popup-content-wrapper {
  position: relative !important;
}
.popup-scroll-fade {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 36px;
  background: linear-gradient(to bottom, rgba(255,255,255,0), rgba(255,255,255,0.95));
  pointer-events: none;
  z-index: 2;
  border-radius: 0 0 12px 12px;
  transition: opacity 0.2s;
}
.popup-scroll-fade.hidden { opacity: 0; }
/* Bottom Sheet のスクロール */
.bottom-sheet-body {
  overscroll-behavior: contain !important;
}
.bottom-sheet-scroll-fade {
  position: sticky;
  bottom: 0; left: 0; right: 0;
  height: 32px;
  margin-top: -32px;
  background: linear-gradient(to bottom, rgba(255,255,255,0), #fff);
  pointer-events: none;
  z-index: 2;
  flex-shrink: 0;
}

/* ====================================================
   4. リスク優先度の視覚的重みづけ
   ==================================================== */
/* 高リスク行: 赤アクセント */
.risk-popup .rp-row.ux-risk-high {
  background: var(--risk-high-bg);
  margin: var(--sp-1) calc(-1 * var(--sp-2)) !important;
  padding: var(--sp-2) var(--sp-2) !important;
  border-radius: var(--sp-2);
  border-left: 4px solid var(--risk-high);
}
.risk-popup .rp-advice.ux-risk-high {
  margin-left: calc(-1 * var(--sp-2)) !important;
  padding-left: var(--sp-8) !important;
  margin-right: calc(-1 * var(--sp-2)) !important;
  background: var(--risk-high-bg);
  margin-top: calc(-1 * var(--sp-1)) !important;
  border-radius: 0 0 var(--sp-2) var(--sp-2);
  border-left: 4px solid var(--risk-high);
}
/* 中リスク行: オレンジアクセント */
.risk-popup .rp-row.ux-risk-mid {
  background: var(--risk-mid-bg);
  margin: var(--sp-1) calc(-1 * var(--sp-2)) !important;
  padding: var(--sp-2) var(--sp-2) !important;
  border-radius: var(--sp-2);
  border-left: 4px solid var(--risk-mid);
}
.risk-popup .rp-advice.ux-risk-mid {
  margin-left: calc(-1 * var(--sp-2)) !important;
  padding-left: var(--sp-8) !important;
  margin-right: calc(-1 * var(--sp-2)) !important;
  background: var(--risk-mid-bg);
  margin-top: calc(-1 * var(--sp-1)) !important;
  border-radius: 0 0 var(--sp-2) var(--sp-2);
  border-left: 4px solid var(--risk-mid);
}
/* 安全な項目: 控えめに */
.risk-popup .rp-row.ux-risk-safe {
  opacity: 0.65;
  transition: opacity 0.15s;
}
.risk-popup .rp-row.ux-risk-safe:hover {
  opacity: 1;
}

/* ====================================================
   5. バッジ色コントラスト改善 + 色覚多様性対応
   ==================================================== */
.rp-level-high {
  background: var(--risk-high) !important;
  color: #fff !important;
  font-weight: 700 !important;
  border-radius: 6px !important;
  text-shadow: 0 1px 1px rgba(0,0,0,0.15);
}
.rp-level-mid {
  background: var(--risk-mid) !important;
  color: #fff !important;
  font-weight: 700 !important;
  border-radius: 6px !important;
}
.rp-level-low {
  background: var(--risk-safe-bg) !important;
  color: var(--risk-safe) !important;
  border-radius: 6px !important;
}
.rp-level-off {
  background: var(--ui-bg-dim) !important;
  color: var(--ui-text-muted) !important;
  border-radius: 6px !important;
}
.rp-level-info {
  background: var(--risk-info-bg) !important;
  color: var(--risk-info) !important;
  border-radius: 6px !important;
}

/* ====================================================
   6. レスポンシブ幅
   ==================================================== */
.risk-popup {
  max-width: min(92vw, 380px) !important;
}
@media (min-width: 769px) {
  /* デスクトップ: ポップアップ幅を拡大してスクロール量を削減 */
  .risk-popup {
    max-width: 380px !important;
    min-width: 320px !important;
  }
  /* デスクトップ: CTA をボタンとして明確化 */
  .risk-popup .rp-cta-contact {
    border-radius: 10px !important;
    box-shadow: 0 2px 8px rgba(230,81,0,0.2);
  }
  .risk-popup .rp-cta-top {
    border-radius: 10px !important;
  }
}
@media (max-width: 768px) {
  .bottom-sheet-body .risk-popup {
    max-width: 100% !important;
  }
}

/* ====================================================
   7. 座標表示の改善
   ==================================================== */
.risk-popup .rp-coord {
  font-size: var(--fs-xs) !important;
  color: #bbb !important;
  letter-spacing: 0.3px;
  cursor: pointer;
  user-select: all;
  transition: color 0.15s;
}
.risk-popup .rp-coord:hover {
  color: var(--ui-text-sub) !important;
}
.risk-popup .rp-coord::before {
  content: '📍 ';
  font-size: var(--fs-xs);
}
.rp-coord-toast {
  position: fixed;
  bottom: 20%;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0,0,0,0.8);
  color: #fff;
  padding: var(--sp-2) var(--sp-6);
  border-radius: var(--sp-6);
  font-size: var(--fs-sm);
  z-index: 10000;
  pointer-events: none;
  animation: coordToastFade 1.5s ease forwards;
}
@keyframes coordToastFade {
  0%, 60% { opacity: 1; }
  100% { opacity: 0; }
}

/* ====================================================
   8. セクション間の視覚的分離
   ==================================================== */
.risk-popup .rp-divider {
  height: 0 !important;
  margin: var(--sp-3) 0 !important;
  border-top: 2px solid var(--ui-border-light) !important;
  background: none !important;
}
.risk-popup .rp-section-head {
  background: var(--ui-bg-subtle) !important;
  margin: 0 calc(-1 * var(--sp-2)) !important;
  padding: var(--sp-2) var(--sp-3) !important;
  border-radius: var(--sp-2) !important;
  border-bottom: none !important;
}
.risk-popup .rp-section-head .rp-label {
  font-weight: 700 !important;
  color: var(--ui-primary) !important;
}

/* ====================================================
   9. CTA ボタンの改善 (タッチターゲット + 視認性)
   ==================================================== */
.risk-popup .rp-report-btn {
  min-height: 44px !important;
  font-size: var(--fs-base) !important;
  padding: var(--sp-3) var(--sp-4) !important;
  margin-top: var(--sp-3) !important;
  border-radius: var(--sp-2) !important;
  letter-spacing: 0.3px;
}
.risk-popup .rp-cta-contact {
  min-height: 48px !important;
  margin-top: var(--sp-2) !important;
  border-radius: var(--sp-2) !important;
  padding: var(--sp-3) var(--sp-4) !important;
}
.risk-popup .rp-cta-contact strong {
  font-size: var(--fs-base) !important;
}
.risk-popup .rp-cta-sub {
  font-size: var(--fs-xs) !important;
}

/* ====================================================
   10. off-hint バッジの調整
   ==================================================== */
.risk-popup .rp-off-hint {
  font-size: var(--fs-xs) !important;
  padding: 2px var(--sp-2) !important;
  border-radius: 4px !important;
}

/* ====================================================
   11. leaflet-popup-content-wrapper 調整
   ==================================================== */
.leaflet-popup-content-wrapper {
  border-radius: 14px !important;
  box-shadow: var(--shadow-mid) !important;
}
.leaflet-popup-content {
  margin: var(--sp-3) var(--sp-4) var(--sp-3) var(--sp-4) !important;
}

/* ====================================================
   12. turn-on / bulk-on ボタン調整
   ==================================================== */
.risk-popup .rp-turn-on {
  font-size: var(--fs-xs) !important;
  min-height: 44px !important;
  padding: 8px 8px !important;
}
.risk-popup .rp-bulk-on {
  min-height: 44px !important;
  font-size: var(--fs-sm) !important;
  border-radius: var(--sp-2) !important;
  margin-top: var(--sp-2) !important;
}

/* ====================================================
   モバイル メモリ節約 — backdrop-filter 無効化
   iOS Safari で blur() が GPU メモリを 100-500MB 消費し
   タブ強制終了の主原因となるため、モバイルでは無効化
   ==================================================== */
@media (max-width: 768px) {
  .app-header {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    background: rgba(15,23,42,0.95) !important;
  }
  .tutorial-backdrop,
  .welcome-backdrop {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    background: rgba(0,0,0,0.5) !important;
  }
  .bottom-sheet-backdrop {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
  /* Bottom Sheet 高さ拡大（50vh → 75vh）— リスク情報が画面内に収まるよう */
  .bottom-sheet {
    max-height: 75vh !important;
  }
  /* モバイルでもLeafletポップアップを表示（style.css の display:none を上書き） */
  .leaflet-popup {
    display: block !important;
  }
  /* モバイル用ポップアップの幅・高さ最適化 */
  .leaflet-popup-content-wrapper {
    max-width: calc(100vw - 40px) !important;
  }
  .leaflet-popup-content {
    max-height: 55vh !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior: contain !important;
    margin: var(--sp-3) var(--sp-3) !important;
  }
}

/* ====================================================
   v3: 総合リスクサマリーバッジ
   ==================================================== */
.rp-summary {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-3);
  border-radius: var(--sp-3);
  margin-bottom: var(--sp-3);
}
.rp-summary-icon { font-size: var(--fs-xl); flex-shrink: 0; }
.rp-summary-text { font-size: var(--fs-base); font-weight: 800; }
.rp-summary-count { font-size: var(--fs-xs); opacity: 0.8; margin-left: auto; white-space: nowrap; }
.rp-summary-high {
  background: linear-gradient(135deg, var(--risk-high-grad-from), var(--risk-high-grad-to));
  color: var(--risk-high);
  border: 1.5px solid var(--risk-high-border);
}
.rp-summary-mid {
  background: linear-gradient(135deg, var(--risk-mid-grad-from), var(--risk-mid-grad-to));
  color: var(--risk-mid);
  border: 1.5px solid var(--risk-mid-border);
}
.rp-summary-safe {
  background: linear-gradient(135deg, var(--risk-safe-bg), var(--risk-safe-bg-deep));
  color: var(--risk-safe);
  border: 1.5px solid var(--risk-safe-border);
}
@media (max-width: 768px) {
  .rp-summary {
    padding: var(--sp-3) var(--sp-4);
    margin-bottom: var(--sp-3);
  }
  .rp-summary-text { font-size: var(--fs-lg); }
  .rp-summary-count { font-size: var(--fs-sm); }
}

/* ====================================================
   v3: リスクなし項目の折りたたみ
   ==================================================== */
.rp-safe-details {
  margin: var(--sp-2) 0;
}
.rp-safe-summary {
  cursor: pointer;
  list-style: none;
  padding: var(--sp-2) 0;
}
.rp-safe-summary::-webkit-details-marker { display: none; }
.rp-safe-summary::marker { display: none; content: ''; }
.rp-safe-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  background: var(--risk-safe-light);
  color: var(--risk-safe-accent);
  font-size: var(--fs-sm);
  font-weight: 600;
  padding: var(--sp-1) var(--sp-4);
  border-radius: var(--sp-6);
  border: 1px solid var(--risk-safe-light-border);
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.rp-safe-details[open] .rp-safe-badge {
  background: var(--risk-safe-active);
  border-color: var(--risk-safe-active-border);
}
.rp-safe-badge::after {
  content: ' ▼';
  font-size: 9px;
  opacity: 0.5;
  transition: transform 0.2s;
}
.rp-safe-details[open] .rp-safe-badge::after {
  transform: rotate(180deg);
}
.rp-safe-content {
  padding-top: var(--sp-1);
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  transition: max-height 0.25s ease, opacity 0.2s ease;
}
.rp-safe-details[open] .rp-safe-content {
  max-height: 500px;
  opacity: 1;
}
.rp-row-safe {
  opacity: 0.7;
}
.rp-row-safe:hover { opacity: 1; }

/* ====================================================
   v3: ローディングインジケーター
   ==================================================== */
.rp-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-3);
  padding: var(--sp-8) var(--sp-4);
  color: var(--ui-text-muted);
  font-size: var(--fs-sm);
}
.rp-loading-spinner {
  width: 20px; height: 20px;
  border: 2.5px solid var(--ui-border);
  border-top-color: var(--ui-primary);
  border-radius: 50%;
  animation: rpSpin 0.7s linear infinite;
}
@keyframes rpSpin {
  to { transform: rotate(360deg); }
}

/* ====================================================
   v3: 上部CTA（高リスク時のみ表示）
   ==================================================== */
.rp-cta-top {
  margin-top: 0 !important;
  margin-bottom: var(--sp-3) !important;
  animation: rpCtaPulse 2s ease-in-out 1;
}
@keyframes rpCtaPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(230,81,0,0.3); }
  50% { box-shadow: 0 0 0 6px rgba(230,81,0,0); }
}

/* ====================================================
   v3: 座標表示を最下部に移動後の微調整
   ==================================================== */
.risk-popup .rp-coord {
  margin-top: var(--sp-1) !important;
  padding-top: var(--sp-1) !important;
  border-top: 1px solid var(--ui-bg-muted);
  text-align: right;
}

/* ====================================================
   v3: 公式ハザードマップ折りたたみ
   ==================================================== */
.rp-hz-details {
  margin: var(--sp-1) 0;
}
.rp-hz-summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-2) 0;
}
.rp-hz-summary::-webkit-details-marker { display: none; }
.rp-hz-summary::marker { display: none; content: ''; }
.rp-hz-status {
  font-size: var(--fs-xs);
  font-weight: 700;
  padding: 2px var(--sp-2);
  border-radius: var(--sp-3);
  flex-shrink: 0;
}
.rp-hz-all {
  background: var(--risk-safe-active);
  color: var(--risk-safe-accent);
}
.rp-hz-partial {
  background: var(--risk-warn-bg);
  color: var(--risk-warn);
}
.rp-hz-summary::after {
  content: '▼';
  font-size: 9px;
  opacity: 0.4;
  transition: transform 0.2s;
  margin-left: auto;
}
.rp-hz-details[open] .rp-hz-summary::after {
  transform: rotate(180deg);
}
.rp-hz-content {
  padding-top: var(--sp-1);
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  transition: max-height 0.25s ease, opacity 0.2s ease;
}
.rp-hz-details[open] .rp-hz-content {
  max-height: 600px;
  opacity: 1;
}

/* ====================================================
   v3: CTA + PDFボタンの視覚階層
   相談CTA = プライマリ（最も目立つ）
   PDFレポート = セカンダリ（控えめ）
   ==================================================== */
/* 相談CTA — プライマリ（緑の全幅ボタン） */
.rp-cta-primary {
  display: flex !important;
  width: 100% !important;
  margin-top: var(--sp-3) !important;
  padding: var(--sp-3) var(--sp-4) !important;
  background: linear-gradient(135deg, #16a34a, #15803d) !important;
  color: #fff !important;
  border: none !important;
  border-radius: var(--sp-2) !important;
  min-height: 48px !important;
  text-decoration: none !important;
  font-weight: 600;
  box-shadow: 0 2px 8px rgba(22,163,74,0.25);
}
.rp-cta-primary:hover {
  background: linear-gradient(135deg, #15803d, #166534) !important;
  box-shadow: 0 4px 12px rgba(22,163,74,0.3) !important;
}
.rp-cta-primary .rp-cta-icon svg {
  stroke: #fff;
}
.rp-cta-primary .rp-cta-text strong {
  color: #fff !important;
  font-size: var(--fs-base) !important;
}
.rp-cta-primary .rp-cta-sub {
  color: rgba(255,255,255,0.85) !important;
}

/* PDFレポート — セカンダリ（ボーダーのみ） */
.rp-report-secondary {
  display: block !important;
  width: 100% !important;
  margin-top: var(--sp-2) !important;
  padding: var(--sp-2) var(--sp-4) !important;
  font-size: var(--fs-sm) !important;
  min-height: 36px !important;
  border-radius: var(--sp-2) !important;
  background: transparent !important;
  color: var(--ui-primary) !important;
  border: 1.5px solid var(--ui-primary) !important;
}
.rp-report-secondary:hover {
  background: rgba(26,58,106,0.05) !important;
}
.rp-report-secondary svg {
  stroke: var(--ui-primary);
}

/* ====================================================
   SVGアイコン統一 — タブバー・ポップアップ
   ==================================================== */
.tab-icon svg {
  display: block;
}
.rp-icon {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.rp-icon svg {
  flex-shrink: 0;
}
.preset-icon {
  display: flex;
  align-items: center;
  justify-content: center;
}
.preset-icon svg {
  display: block;
}
.rp-cta-icon {
  display: flex !important;
  align-items: center !important;
}

/* ====================================================
   カスタムチェックボックス — 全OS統一デザイン
   デスクトップ 24×24px / モバイル 32×32px
   チェック時: navy背景 + 白チェックマーク
   ==================================================== */
.layer-panel input[type=checkbox] {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  width: 24px !important;
  height: 24px !important;
  min-width: 24px;
  min-height: 24px;
  border: 2px solid var(--ui-border);
  border-radius: var(--sp-1);
  background: #fff;
  cursor: pointer;
  position: relative;
  transition: background 0.15s, border-color 0.15s;
  margin: 0;
  flex-shrink: 0;
}
/* チェック時: ブランドカラー navy */
.layer-panel input[type=checkbox]:checked {
  background: var(--ui-primary);
  border-color: var(--ui-primary);
}
/* チェックマーク: SVG (白) */
.layer-panel input[type=checkbox]:checked::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 14px;
  height: 14px;
  transform: translate(-50%, -50%);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='4 12 10 18 20 6'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
}
/* ホバー */
.layer-panel input[type=checkbox]:hover {
  border-color: var(--ui-primary);
}
.layer-panel input[type=checkbox]:checked:hover {
  background: var(--ui-primary-hover);
  border-color: var(--ui-primary-hover);
}
/* フォーカス */
.layer-panel input[type=checkbox]:focus-visible {
  outline: 3px solid rgba(26,58,106,0.4);
  outline-offset: 2px;
}
/* ラベルの gap とフォントサイズを調整 */
.layer-panel label {
  gap: var(--sp-2) !important;
  font-size: var(--fs-sm) !important;
}
/* モバイル: チェックボックスを 32×32px に拡大 */
@media (max-width: 768px) {
  .layer-panel input[type=checkbox] {
    width: 32px !important;
    height: 32px !important;
    min-width: 32px;
    min-height: 32px;
    border-radius: 6px;
  }
  .layer-panel input[type=checkbox]:checked::after {
    width: 18px;
    height: 18px;
  }
}

/* ====================================================
   Leaflet ズームボタン — map-action-btn と統一
   44×44 円形、白背景、シャドウ
   ==================================================== */
.leaflet-control-zoom {
  border: none !important;
  box-shadow: none !important;
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  margin-bottom: var(--sp-8) !important;
  margin-right: var(--sp-3) !important;
}
@media (max-width: 768px) {
  .leaflet-control-zoom {
    margin-bottom: calc(90px + env(safe-area-inset-bottom, 0px)) !important;
  }
}
.leaflet-control-zoom a {
  width: 44px !important;
  height: 44px !important;
  line-height: 44px !important;
  font-size: var(--fs-xl) !important;
  border-radius: 50% !important;
  border: none !important;
  background: #fff !important;
  color: var(--ui-primary) !important;
  box-shadow: var(--shadow-low) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: background 0.15s ease, transform 0.15s ease, color 0.15s ease !important;
}
.leaflet-control-zoom a:hover {
  background: #e8f0fe !important;
  transform: scale(1.08);
  color: var(--ui-primary) !important;
}
.leaflet-control-zoom a:active {
  transform: scale(0.95);
}

/* ====================================================
   インタラクションフィードバック — 全ボタン統一
   hover: 浮き上がり、active: 押し込み
   ==================================================== */
/* プリセットボタン — 選択状態の強化 */
.preset-btn {
  transition: opacity 0.15s ease, transform 0.15s ease, background 0.15s ease, border-color 0.15s ease !important;
  position: relative;
}
.preset-btn:hover {
  opacity: 0.85;
  transform: translateY(-1px);
}
.preset-btn:active {
  transform: scale(0.97);
  opacity: 1;
}
/* 選択中: 背景強調 + 太ボーダー + チェックマーク */
.preset-btn.preset-active {
  background: rgba(26,58,106,0.08) !important;
  border-width: 2.5px !important;
  border-color: var(--ui-primary) !important;
  box-shadow: 0 0 0 1px var(--ui-primary), 0 2px 8px rgba(26,58,106,0.1) !important;
}
.preset-btn.preset-active::after {
  content: '';
  position: absolute;
  top: -4px;
  right: -4px;
  width: 18px;
  height: 18px;
  background: var(--ui-primary);
  border-radius: 50%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='4 12 10 18 20 6'/%3E%3C/svg%3E");
  background-size: 12px 12px;
  background-position: center;
  background-repeat: no-repeat;
  z-index: 1;
}
/* 切替時の pulse アニメーション */
.preset-btn.preset-pulse {
  animation: presetPulse 0.3s ease;
}
@keyframes presetPulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.04); box-shadow: 0 0 0 4px rgba(26,58,106,0.15); }
  100% { transform: scale(1); }
}

/* モバイルタブバー */
.tab-item {
  transition: opacity 0.15s ease, transform 0.15s ease, color 0.15s ease !important;
}
.tab-item:active {
  transform: scale(0.93);
  opacity: 0.8;
}

/* リスクポップアップ内ボタン */
.risk-popup .rp-report-btn,
.risk-popup .rp-cta-contact,
.risk-popup .rp-bulk-on,
.risk-popup .rp-turn-on {
  transition: opacity 0.15s ease, transform 0.15s ease, background 0.15s ease !important;
}
.risk-popup .rp-report-btn:hover,
.risk-popup .rp-cta-contact:hover,
.risk-popup .rp-bulk-on:hover {
  opacity: 0.88;
  transform: translateY(-1px);
  box-shadow: var(--shadow-low);
}
.risk-popup .rp-report-btn:active,
.risk-popup .rp-cta-contact:active,
.risk-popup .rp-bulk-on:active {
  transform: scale(0.97);
  box-shadow: none;
  opacity: 1;
}
.risk-popup .rp-turn-on:hover {
  opacity: 0.7;
}
.risk-popup .rp-turn-on:active {
  transform: scale(0.95);
}

/* レイヤーパネル内ラベル */
.layer-panel label {
  transition: background 0.15s ease !important;
}
.layer-panel label:active {
  transform: scale(0.98);
}

/* 右サイドボタン */
.side-btn {
  transition: transform 0.15s ease, box-shadow 0.15s ease !important;
}
.side-btn:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-low);
}
.side-btn:active {
  transform: scale(0.93);
  box-shadow: none;
}

/* PDFボタン ローディング状態 */
.rp-report-btn.is-loading {
  pointer-events: none;
  opacity: 0.7;
}
.rp-report-btn.is-loading svg {
  animation: rpSpin 0.7s linear infinite;
}

/* ====================================================
   safe-area-inset — iPhone ノッチ/ホームバー対応
   ==================================================== */
@supports (padding: env(safe-area-inset-top)) {
  .app-header {
    padding-top: env(safe-area-inset-top) !important;
    height: calc(52px + env(safe-area-inset-top)) !important;
  }
  /* ヘッダー高さ分のマップオフセット（margin-topを上書き） */
  #map {
    margin-top: calc(52px + env(safe-area-inset-top)) !important;
    height: calc(100vh - 52px - env(safe-area-inset-top)) !important;
  }
  /* 使い方ガイドボタン */
  .tutorial-btn {
    top: calc(60px + env(safe-area-inset-top)) !important;
  }
  /* 右サイドボタン群 */
  .map-action-btns {
    top: calc(64px + env(safe-area-inset-top)) !important;
  }
  /* タブバー（画面下） */
  .mobile-tab-bar {
    padding-bottom: env(safe-area-inset-bottom) !important;
  }
  /* Bottom Sheet */
  .bottom-sheet-body {
    padding-bottom: calc(20px + env(safe-area-inset-bottom)) !important;
  }
  /* Leaflet ポップアップ: 下部に余白 */
  .leaflet-popup-content {
    padding-bottom: env(safe-area-inset-bottom) !important;
  }
  /* レイヤーパネル（左） */
  .layer-panel {
    padding-left: env(safe-area-inset-left) !important;
  }
  /* ズームボタン（右下） */
  .leaflet-control-zoom {
    margin-bottom: calc(90px + env(safe-area-inset-bottom)) !important;
  }
}

/* ====================================================
   使い方ガイドボタン — 半透明化
   ==================================================== */
.tutorial-start-btn {
  background: white !important;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border: none !important;
  box-shadow: 0 2px 10px rgba(0,0,0,0.22) !important;
}
.tutorial-start-btn:hover {
  background: #e8f0fe !important;
}

/* ====================================================
   検索入力 — モバイル最適化
   48px高 + font-size:16px で iOS 自動ズーム防止
   ==================================================== */
@media (max-width: 768px) {
  .app-header-search input {
    height: 44px !important;
    font-size: 16px !important;
    padding: 0 40px 0 var(--sp-3) !important;
    border-radius: var(--sp-2) !important;
  }
  .app-header-search button {
    width: 40px !important;
    height: 44px !important;
  }
}

/* ====================================================
   touch-action — タッチ干渉防止
   地図: Leaflet が自前制御するため none
   パネル/ポップアップ: 縦スクロールのみ許可
   タブバー/ボタン: ダブルタップズーム抑制
   ==================================================== */
.leaflet-container {
  touch-action: none;
}
.layer-panel,
.leaflet-popup-content,
.bottom-sheet-body {
  touch-action: pan-y;
}
.mobile-tab-bar,
.preset-btn,
.tab-item,
.map-action-btn,
.leaflet-control-zoom a,
.rp-report-btn,
.rp-cta-contact,
.rp-bulk-on,
.rp-turn-on {
  touch-action: manipulation;
}

/* ====================================================
   診断ヒーロー (住所→リスクサマリー) — 初回訪問者向け
   ==================================================== */
.diag-hero-overlay {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 16px;
  opacity: 0;
  transition: opacity 0.3s ease;
}
.diag-hero-overlay.active { display: flex; }
.diag-hero-overlay.visible { opacity: 1; }

.diag-hero-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.65);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.diag-hero-card {
  position: relative;
  background: #fff;
  border-radius: 20px;
  width: 100%;
  max-width: 540px;
  max-height: calc(100vh - 32px);
  overflow-y: auto;
  box-shadow: 0 24px 60px rgba(0,0,0,0.35);
  transform: translateY(8px) scale(0.98);
  transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.diag-hero-overlay.visible .diag-hero-card {
  transform: translateY(0) scale(1);
}

.diag-hero-close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(15, 23, 42, 0.06);
  color: #1a3a6a;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  transition: background 0.15s;
}
.diag-hero-close:hover { background: rgba(15, 23, 42, 0.12); }

.diag-view {
  display: none;
  padding: 32px 28px 24px;
}
.diag-view.diag-view-active { display: block; }

/* ===== View 1: 検索 ===== */
.diag-hero-head {
  text-align: center;
  margin-bottom: 20px;
}
.diag-hero-eyebrow {
  display: inline-block;
  font-size: 11px;
  font-weight: bold;
  color: #1a3a6a;
  background: #e8f0fe;
  padding: 4px 10px;
  border-radius: 999px;
  letter-spacing: 0.05em;
  margin-bottom: 14px;
}
.diag-hero-title {
  font-size: 26px;
  font-weight: 800;
  color: #0f172a;
  line-height: 1.3;
  margin: 0 0 12px;
  letter-spacing: -0.01em;
}
.diag-hero-sub {
  font-size: 14px;
  color: #475569;
  line-height: 1.6;
  margin: 0;
}
.diag-hero-sub strong { color: #1a3a6a; }

.diag-search-wrap {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  background: #f8fafc;
  border: 2px solid #e2e8f0;
  border-radius: 12px;
  padding: 6px 6px 6px 14px;
  transition: border-color 0.2s, background 0.2s, box-shadow 0.2s;
  margin-bottom: 8px;
}
.diag-search-wrap:focus-within {
  border-color: #1a3a6a;
  background: #fff;
  box-shadow: 0 0 0 4px rgba(26, 58, 106, 0.12);
}
.diag-search-icon {
  display: flex;
  color: #64748b;
  flex-shrink: 0;
}
.diag-search-input {
  flex: 1;
  min-width: 0;
  border: none;
  background: transparent;
  outline: none;
  font-size: 16px;
  font-family: inherit;
  color: #0f172a;
  padding: 8px 0;
}
.diag-search-input::placeholder { color: #94a3b8; }
.diag-search-btn {
  flex-shrink: 0;
  background: #1a3a6a;
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 10px 18px;
  font-size: 14px;
  font-weight: bold;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.15s;
}
.diag-search-btn:hover { background: #2a5a9a; }
.diag-search-btn:active { transform: translateY(1px); }

.diag-search-results {
  display: none;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  max-height: 220px;
  overflow-y: auto;
  margin-bottom: 12px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.06);
}
.diag-search-results.open { display: block; }
.diag-result-item {
  padding: 11px 14px;
  font-size: 14px;
  color: #1e293b;
  cursor: pointer;
  border-bottom: 1px solid #f1f5f9;
  transition: background 0.15s;
}
.diag-result-item:last-child { border-bottom: none; }
.diag-result-item:hover { background: #e8f0fe; }
.diag-msg {
  padding: 12px 14px;
  font-size: 13px;
  color: #64748b;
  text-align: center;
}

.diag-feature-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin: 16px 0 14px;
}
.diag-feature {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #f8fafc;
  border-radius: 10px;
  padding: 10px;
}
.diag-feature-icon {
  font-size: 22px;
  flex-shrink: 0;
}
.diag-feature-text {
  font-size: 11px;
  color: #475569;
  line-height: 1.4;
}
.diag-feature-text strong {
  color: #1a3a6a;
  font-size: 12px;
}

.diag-skip-link {
  display: block;
  text-align: center;
  font-size: 12px;
  color: #64748b;
  text-decoration: none;
  padding: 8px;
  margin-top: 4px;
  border-radius: 6px;
  transition: color 0.15s, background 0.15s;
}
.diag-skip-link:hover {
  color: #1a3a6a;
  background: #f1f5f9;
}

/* ===== View 2: ローディング ===== */
.diag-loading {
  text-align: center;
  padding: 32px 16px;
}
.diag-loading-spinner {
  width: 56px;
  height: 56px;
  border: 4px solid #e2e8f0;
  border-top-color: #1a3a6a;
  border-radius: 50%;
  animation: diagSpin 0.9s linear infinite;
  margin: 0 auto 20px;
}
@keyframes diagSpin {
  to { transform: rotate(360deg); }
}
.diag-loading-title {
  font-size: 18px;
  font-weight: 700;
  color: #0f172a;
  margin: 0 0 6px;
  word-break: break-all;
}
.diag-loading-sub {
  font-size: 13px;
  color: #64748b;
  margin: 0;
}
@media (prefers-reduced-motion: reduce) {
  .diag-loading-spinner {
    animation: none;
    border-top-color: #1a3a6a;
  }
}

/* ===== View 3: 結果 ===== */
.diag-result-head {
  text-align: center;
  margin-bottom: 16px;
}
.diag-result-eyebrow {
  display: inline-block;
  font-size: 11px;
  font-weight: bold;
  color: #1a3a6a;
  background: #e8f0fe;
  padding: 4px 10px;
  border-radius: 999px;
  margin-bottom: 8px;
}
.diag-result-title {
  font-size: 18px;
  font-weight: 700;
  color: #0f172a;
  margin: 0;
  line-height: 1.4;
  word-break: break-all;
}

.diag-verdict {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border-radius: 12px;
  margin-bottom: 14px;
}
.diag-verdict-high { background: linear-gradient(180deg, #fee2e2, #fecaca); border: 1px solid #fca5a5; }
.diag-verdict-mid  { background: linear-gradient(180deg, #fef3c7, #fde68a); border: 1px solid #fcd34d; }
.diag-verdict-safe { background: linear-gradient(180deg, #dcfce7, #bbf7d0); border: 1px solid #86efac; }
.diag-verdict-out  { background: linear-gradient(180deg, #f1f5f9, #e2e8f0); border: 1px solid #cbd5e1; }

.diag-verdict-icon {
  font-size: 28px;
  line-height: 1;
  flex-shrink: 0;
}
.diag-verdict-text {
  font-size: 13px;
  color: #1f2937;
  line-height: 1.5;
}
.diag-verdict-text strong {
  font-size: 16px;
  color: #0f172a;
  display: inline-block;
  margin-bottom: 2px;
}
.diag-verdict-sub {
  display: block;
  font-size: 12px;
  color: #475569;
  margin-top: 2px;
}

.diag-rows {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 12px;
}
.diag-row {
  display: flex;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 10px;
  border-left: 4px solid #cbd5e1;
  background: #f8fafc;
}
.diag-row-high { border-left-color: #dc2626; background: #fef2f2; }
.diag-row-mid  { border-left-color: #d97706; background: #fffbeb; }
.diag-row-low  { border-left-color: #2563eb; background: #eff6ff; }
.diag-row-safe { border-left-color: #16a34a; background: #f0fdf4; }

.diag-row-icon {
  font-size: 22px;
  line-height: 1;
  flex-shrink: 0;
  margin-top: 2px;
}
.diag-row-body {
  flex: 1;
  min-width: 0;
}
.diag-row-head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 4px;
}
.diag-row-label {
  font-size: 13px;
  font-weight: bold;
  color: #1a3a6a;
}
.diag-row-pill {
  font-size: 12px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid currentColor;
}
.diag-row-high .diag-row-pill { color: #b91c1c; }
.diag-row-mid  .diag-row-pill { color: #b45309; }
.diag-row-low  .diag-row-pill { color: #1d4ed8; }
.diag-row-safe .diag-row-pill { color: #15803d; }
.diag-row-detail {
  font-size: 12.5px;
  color: #475569;
  line-height: 1.55;
}

.diag-out-msg {
  padding: 16px;
  background: #f8fafc;
  border-radius: 10px;
  font-size: 13px;
  color: #475569;
  text-align: center;
  line-height: 1.6;
  margin-bottom: 12px;
}

.diag-result-note {
  font-size: 11px;
  color: #94a3b8;
  line-height: 1.6;
  padding: 8px 0;
  margin-bottom: 4px;
}

.diag-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 8px;
}
.diag-btn {
  border: none;
  border-radius: 10px;
  padding: 13px 12px;
  font-size: 14px;
  font-weight: bold;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.15s, transform 0.05s;
}
.diag-btn:active { transform: translateY(1px); }
.diag-btn-primary {
  background: #1a3a6a;
  color: #fff;
}
.diag-btn-primary:hover { background: #2a5a9a; }
.diag-btn-secondary {
  background: #f1f5f9;
  color: #1a3a6a;
}
.diag-btn-secondary:hover { background: #e2e8f0; }

.diag-contact-link {
  display: block;
  text-align: center;
  font-size: 13px;
  font-weight: bold;
  color: #1a3a6a;
  text-decoration: none;
  padding: 10px;
  border-radius: 8px;
  transition: background 0.15s;
}
.diag-contact-link:hover { background: #f1f5f9; }

/* モバイル調整 */
@media (max-width: 540px) {
  .diag-view { padding: 28px 20px 20px; }
  .diag-hero-title { font-size: 22px; }
  .diag-hero-sub { font-size: 13px; }
  .diag-search-input { font-size: 16px; } /* iOSズーム抑制 */
  .diag-feature-row { grid-template-columns: 1fr; }
  .diag-feature { padding: 8px 12px; }
  .diag-actions { grid-template-columns: 1fr; }
  .diag-result-title { font-size: 16px; }
  .diag-verdict-text strong { font-size: 15px; }
}

/* ====================================================
   データソースバッジ — terms.js (HM.tLayerWithBadge) と連動
   ==================================================== */
.data-badge {
  display: inline-block;
  font-size: 10px;
  font-weight: bold;
  padding: 1px 6px;
  border-radius: 4px;
  vertical-align: middle;
  margin-left: 4px;
  letter-spacing: 0.02em;
  white-space: nowrap;
  line-height: 1.5;
}
.data-badge-original {
  background: #fef3c7;
  color: #92400e;
  border: 1px solid #fcd34d;
}
.data-badge-official {
  background: #dbeafe;
  color: #1e40af;
  border: 1px solid #93c5fd;
}

/* ====================================================
   A1.1: Active Chip Bar — 表示中レイヤーの可視化＆即OFF
   表示中の解析/公式レイヤーをチップとして地図左下に並べる。
   ミニ凡例の上に配置（重なり回避のため bottom 値を確保）。
   ==================================================== */
.active-chip-bar {
  position: absolute;
  left: var(--sp-3, 12px);
  bottom: var(--sp-3, 12px);
  z-index: 1050;
  display: none;
  flex-wrap: wrap;
  gap: 6px;
  max-width: calc(100vw - 24px);
  pointer-events: auto;
}
.active-chip-bar.open {
  display: flex;
}

/* ミニ凡例が表示されている時はチップバーをその上にオフセット */
.mini-legend.open ~ .active-chip-bar,
.active-chip-bar.has-mini-legend {
  bottom: 110px; /* ミニ凡例の高さ程度 */
}

/* レイヤーグループパネル / モバイルタブとの干渉を避けるため、
   モバイルではタブバー（56px）の上にスタック */
@media (max-width: 768px) {
  .active-chip-bar {
    left: var(--sp-2, 8px);
    bottom: 76px;
  }
  .active-chip-bar.has-mini-legend {
    bottom: 180px;
  }
}

/* チップ本体 */
.active-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 30px;
  padding: 0 4px 0 10px;
  border: 1.5px solid;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  font-family: inherit;
  font-size: 12px;
  font-weight: bold;
  color: #1f2937;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
  transition: background 0.15s, border-color 0.15s, transform 0.05s;
  white-space: nowrap;
  user-select: none;
}
.active-chip:hover {
  background: #fff;
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.18);
}
.active-chip:active {
  transform: translateY(0);
}

/* ソース別カラー（terms.js の data-badge 色と統一） */
.active-chip-original {
  border-color: #fcd34d;
}
.active-chip-original .chip-source-dot {
  background: #f59e0b;
}
.active-chip-official {
  border-color: #93c5fd;
}
.active-chip-official .chip-source-dot {
  background: #3b82f6;
}

.chip-source-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.chip-x {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(15, 23, 42, 0.06);
  color: #475569;
  font-size: 14px;
  font-weight: bold;
  line-height: 1;
  margin-left: 2px;
  transition: background 0.15s, color 0.15s;
}
.active-chip:hover .chip-x {
  background: rgba(15, 23, 42, 0.12);
  color: #0f172a;
}

/* キーボードフォーカス */
.active-chip:focus-visible {
  outline: 3px solid #2563eb;
  outline-offset: 2px;
}

/* ───── 凡例パネルが開いている時はチップバーを隠す（重複表示の整理） ───── */
.legend.panel-open ~ .active-chip-bar,
body:has(.legend:not(.collapsed):not([style*="display: none"])) .active-chip-bar {
  /* 凡例展開時はチップバー非表示にしない（情報密度許容） */
}

/* ====================================================
   A1.2: 右縦ボタンの重複削減（7ボタン → 4ボタン）
   - レイヤー / 情報 は top-left の ☰ / ℹ と機能重複のため非表示
   - 現在地 / シェア / 凡例 / 濃さ は維持（A1.3 で凡例・濃さも統合予定）
   - モバイルは既に style.css の max-width: 768px でターシャリ全非表示済み
   ==================================================== */
#layerToggleBtn,
#infoToggleBtn {
  display: none !important;
}

/* 残った 凡例 / 濃さ ボタンの直前に separator が浮かないよう調整 */
@media (min-width: 769px) {
  /* 凡例 / 濃さ 2ボタンだけ残るので separator は控えめに */
  .map-action-sep {
    margin: 4px 8px;
    opacity: 0.5;
  }
}

/* ====================================================
   A1.3: Settings Drawer (レイヤー/凡例/表示の3タブ統合)
   ==================================================== */

/* バックドロップ — モバイルでは半透明オーバーレイ、デスクトップでは透明 */
.settings-drawer-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0);
  z-index: 1099;
  pointer-events: none;
  transition: background 0.3s ease;
}
.settings-drawer-backdrop.open {
  pointer-events: auto;
}
@media (max-width: 768px) {
  .settings-drawer-backdrop.open {
    background: rgba(15, 23, 42, 0.45);
  }
}

/* 本体ドロワー */
.settings-drawer {
  position: fixed;
  top: 52px;
  right: 0;
  bottom: 0;
  width: 360px;
  max-width: 100vw;
  background: #fff;
  z-index: 1100;
  box-shadow: -4px 0 16px rgba(0, 0, 0, 0.12);
  transform: translateX(100%);
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.settings-drawer.open {
  transform: translateX(0);
}

/* ヘッダー */
.settings-drawer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  border-bottom: 1px solid #e5e7eb;
  flex-shrink: 0;
  background: linear-gradient(180deg, #f8fafc 0%, #ffffff 100%);
}
.settings-drawer-title {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  color: #0f172a;
  display: flex;
  align-items: center;
  gap: 8px;
}
.settings-drawer-icon {
  font-size: 18px;
}
.settings-drawer-close {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: none;
  background: rgba(15, 23, 42, 0.06);
  color: #1a3a6a;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s;
}
.settings-drawer-close:hover {
  background: rgba(15, 23, 42, 0.12);
}

/* タブバー */
.settings-drawer-tabs {
  display: flex;
  border-bottom: 1px solid #e5e7eb;
  flex-shrink: 0;
  background: #fff;
}
.settings-tab {
  flex: 1;
  padding: 12px 8px;
  border: none;
  background: transparent;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  color: #64748b;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  transition: color 0.15s, background 0.15s, border-color 0.15s;
}
.settings-tab:hover {
  background: #f8fafc;
  color: #1a3a6a;
}
.settings-tab-active {
  color: #1a3a6a;
  border-bottom-color: #1a3a6a;
  background: #f8fafc;
}
.settings-tab-icon {
  font-size: 18px;
  line-height: 1;
}
.settings-tab:focus-visible {
  outline: 3px solid #2563eb;
  outline-offset: -3px;
}

/* タブパネル本体（スクロール領域） */
.settings-drawer-body {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
  background: #fff;
  -webkit-overflow-scrolling: touch;
}
.settings-tab-panel {
  display: none;
}
.settings-tab-panel-active {
  display: block;
}

/* プレースホルダー（A1.3.2 で削除） */
.settings-placeholder {
  padding: 24px;
  text-align: center;
  color: #94a3b8;
  font-size: 13px;
  background: #f8fafc;
  border-radius: 8px;
  border: 2px dashed #e2e8f0;
}
.settings-placeholder p {
  margin: 0;
}

/* モバイル: 下から立ち上がるボトムシート風 */
@media (max-width: 768px) {
  .settings-drawer {
    top: auto;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 78vh;
    max-height: 78vh;
    transform: translateY(100%);
    border-radius: 18px 18px 0 0;
    box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.18);
  }
  .settings-drawer.open {
    transform: translateY(0);
  }
  .settings-drawer-header {
    border-radius: 18px 18px 0 0;
    padding: 12px 16px;
  }
}

/* prefers-reduced-motion 対応 */
@media (prefers-reduced-motion: reduce) {
  .settings-drawer,
  .settings-drawer-backdrop {
    transition: none !important;
  }
}

/* ====================================================
   A1.3.2: パネル移植関連
   - 元パネル (#layerPanel, #legendArea, #opacityPanel) は移植後に非表示
   - Drawer 内部に持ち込まれた close buttons / handles も非表示
   - Drawer 内のスタイル微調整
   ==================================================== */
.panel-migrated-to-drawer {
  display: none !important;
}

/* Drawer 内部に持ち込まれた close buttons / handles / 重複ヘッダーを非表示 */
.settings-tab-panel .mobile-close-btn,
.settings-tab-panel .desktop-close-btn,
.settings-tab-panel .half-modal-handle,
.settings-tab-panel .layer-panel-h3-desktop,
.settings-tab-panel .legend-header {
  display: none !important;
}

/* Drawer 内では既存パネルの位置指定を解除 */
.settings-drawer-body .layer-group,
.settings-drawer-body .layer-section-label,
.settings-drawer-body .legend-body,
.settings-drawer-body .legend,
.settings-drawer-body .opacity-row,
.settings-drawer-body .opacity-control {
  position: static !important;
  transform: none !important;
  width: 100% !important;
  max-width: 100% !important;
  box-shadow: none !important;
  background: transparent !important;
  padding: 0 !important;
  border-radius: 0 !important;
}

/* レイヤーパネル本体は元の display:flex などを継承するため最低限の調整のみ */
.settings-drawer-body .legend-body {
  display: block !important;
  max-height: none !important;
  overflow: visible !important;
}

/* legend のセクション間隔を保つ */
.settings-drawer-body .legend-section {
  display: block !important;
  margin-bottom: 12px;
}

/* opacity-row は元の構造を維持 */
.settings-drawer-body .opacity-row {
  background: #f8fafc !important;
  border-radius: 8px !important;
  padding: 12px !important;
  margin-bottom: 8px;
}

/* ====================================================
   A1.3.3: 旧エントリポイントを非表示（Settings Drawer に集約済み）
   - #legendToggleBtn (右縦) → ⚙ 設定 → 凡例タブ
   - #opacityToggleBtn (右縦) → ⚙ 設定 → 表示タブ
   - #toggleLayerBtn (top-left ☰) → ⚙ 設定 → レイヤータブ
   - 結果: 右縦ボタンは「現在地 / シェア / 設定」の3個に集約
   ==================================================== */
#legendToggleBtn,
#opacityToggleBtn,
#toggleLayerBtn {
  display: none !important;
}

/* separator も不要に（現在地・シェア・設定 の3個のみなので区切り線なし） */
.map-action-sep {
  display: none !important;
}

/* ====================================================
   A1.4: Result Card refactor — 結論 + 1アクション
   PDF + 座標 を <details> で折りたたみ。プライマリ CTA を強調。
   ==================================================== */

/* 詳細・ダウンロードの折りたたみ */
.rp-extras {
  margin-top: 12px;
  padding-top: 8px;
  border-top: 1px solid #e5e7eb;
}
.rp-extras-summary {
  list-style: none;
  cursor: pointer;
  font-size: 12px;
  color: #64748b;
  padding: 6px 8px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: background 0.15s, color 0.15s;
  user-select: none;
}
.rp-extras-summary::-webkit-details-marker { display: none; }
.rp-extras-summary::before {
  content: '▶';
  font-size: 9px;
  color: #94a3b8;
  transition: transform 0.2s;
  flex-shrink: 0;
}
.rp-extras[open] .rp-extras-summary::before {
  transform: rotate(90deg);
}
.rp-extras-summary:hover {
  background: #f1f5f9;
  color: #1a3a6a;
}
.rp-extras-icon {
  font-size: 13px;
  line-height: 1;
}
.rp-extras-content {
  padding: 8px 0 0;
}

/* details 展開時にスクロールが追従するように（patches.js の F が処理） */

/* 折りたたまれている時、PDF と coord は完全に隠れる（CSS の details 標準動作） */

/* プライマリ CTA を視覚的に強調（A1.4 で 1アクション集中） */
.risk-popup .rp-cta-contact.rp-cta-primary {
  margin-top: 14px;
  /* 既存スタイルは維持。下マージンを増やして次のセクションと分離 */
}

/* モバイル: 詳細サマリーをタップしやすく */
@media (max-width: 768px) {
  .rp-extras-summary {
    font-size: 13px;
    padding: 10px 8px;
  }
}

/* ====================================================
   📱 Mobile UX Phase A: 親指エリア・タップターゲット改善
   ==================================================== */

/* A.1: タップターゲット 44×44 (WCAG 2.5.8 / iOS HIG / Material Guidelines) */
@media (max-width: 768px) {
  /* チップバーの各チップを 44px 高に */
  .active-chip {
    min-height: 44px;
    padding: 0 6px 0 12px;
    font-size: 13px;
  }
  .chip-x {
    width: 30px;
    height: 30px;
    font-size: 16px;
  }

  /* 全 close button を 44×44 に統一 */
  .diag-hero-close,
  .settings-drawer-close,
  .welcome-close,
  .bottom-sheet-close {
    width: 44px !important;
    height: 44px !important;
  }

  /* 凡例のセクション折りたたみトグルなど */
  .legend-section-head,
  .legend-header {
    min-height: 44px;
  }

  /* 診断ヒーローの skip リンクを大きなボックスに */
  .diag-skip-link {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  /* search-close-btn (header) を 44 */
  .search-close-btn {
    width: 44px !important;
    height: 44px !important;
  }
}

/* A.2: 右縦アクションボタンを thumb zone（画面下半分）へ移動 (mobile) */
@media (max-width: 768px) {
  .map-action-btns {
    /* 上から下げる：画面の中央〜下寄りに */
    top: auto !important;
    bottom: 35% !important;
    right: 8px;
  }
  /* タッチターゲットも一段大きく（既に 44 だが 48 に） */
  .map-action-btn {
    width: 48px !important;
    height: 48px !important;
  }
  /* ホバーラベルはモバイル不要（既に opacity:0 だが念のため） */
  .map-action-btn .btn-label {
    display: none !important;
  }
}

/* ====================================================
   📱 Mobile UX Phase B: ヘッダー削減
   ==================================================== */

/* B.1: モバイルでクロスリンク（地価・人口マップ）を非表示
   → 設定メニュー or 別画面で参照可能にする予定 */
@media (max-width: 768px) {
  .app-header-crosslink {
    display: none !important;
  }
}

/* B.2: モバイルでヘッダー検索を常時表示（トグル不要）
   検索アイコンタップ → スライド開く の2タップを削減 */
@media (max-width: 768px) {
  /* 検索トグルボタンを非表示 */
  .app-header-search-toggle {
    display: none !important;
  }
  /* 検索バーは常に表示
     style.css のモバイル既定 (position:absolute; display:none) を完全上書き */
  .app-header-search {
    display: flex !important;
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    flex: 1 1 0 !important;
    min-width: 0 !important;
    max-width: none !important;
    transform: none !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    visibility: visible !important;
    background: transparent !important;
    box-shadow: none !important;
    padding: 0 !important;
    z-index: auto !important;
    align-items: center;
  }
  .app-header-search input {
    height: 36px;
    font-size: 14px;
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.25);
  }
  .app-header-search input::placeholder {
    color: rgba(255, 255, 255, 0.6);
  }
  /* 検索を閉じる ✕ ボタンも不要 */
  .search-close-btn {
    display: none !important;
  }
  /* ヘッダー全体をスリムに */
  .app-header {
    gap: 8px;
    padding: 0 8px;
  }
  /* h1 タイトル + サブタイトルを完全に非表示（検索バーへスペースを譲る） */
  .app-header-title {
    display: none !important;
  }
  /* ロゴをやや小さく */
  .app-header-logo {
    width: 34px;
    height: 34px;
  }
  .app-header-logo img {
    width: 30px;
    height: 30px;
  }
  /* app-header-left は logo のみで shrink 不要 */
  .app-header-left {
    flex-shrink: 0;
  }
}

/* ====================================================
   📱 Mobile UX Phase C: 検索結果の「現在地で検索」オプション
   ==================================================== */
.hsr-item.hsr-locate {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px !important;
  color: #1a3a6a !important;
  font-weight: 600;
  background: #f0f9ff;
  border-bottom: 1px solid #e0f2fe !important;
  cursor: pointer;
}
.hsr-item.hsr-locate:hover,
.hsr-item.hsr-locate:focus-visible {
  background: #dbeafe !important;
}
.hsr-locate-icon {
  font-size: 16px;
  line-height: 1;
}

/* モバイルでは min-height 44px */
@media (max-width: 768px) {
  .hsr-item.hsr-locate {
    min-height: 48px;
    font-size: 14px;
  }
}

/* ====================================================
   📱 Mobile UX: チップバーをモバイルでは非表示
   理由:
   - 主要4カテゴリの状態は底部タブバー（浸水/土砂/がけ/公式）が既に表示
   - サブレイヤー（流路/傾斜/がけ上下/公式4種詳細）の個別OFFは稀
   - 災害ツールとして地図領域の最大化を優先
   - 詳細はSettings Drawer のレイヤータブで確認可能
   - デスクトップ・タブレットでは引き続き表示（情報密度の余裕あり）
   ==================================================== */
@media (max-width: 768px) {
  .active-chip-bar {
    display: none !important;
  }
}

/* ====================================================
   📱 Phase 1: Mobile Bottom Sheet (地図クリック時)
   - Leaflet popup の代わりに Bottom Sheet で表示
   - サイズ・挙動を統一
   - タップ地点が隠れない
   ==================================================== */

/* Bottom Sheet 内に load された .risk-popup の余白調整
   （Leaflet popup の枠が無いので余白を調整） */
@media (max-width: 768px) {
  #bottomSheetBody .risk-popup {
    padding: 4px 4px 8px;
  }
  /* タイトル行は close ボタンと衝突しない位置に */
  #bottomSheetBody .rp-title {
    margin-right: 40px; /* 右上の ✕ ボタン分 */
  }
  /* ボトムシート内の advice / row は読みやすい余白に */
  #bottomSheetBody .rp-row {
    padding: 10px 4px !important;
  }
  /* CTA ボタンは sticky 風に下端寄せ */
  #bottomSheetBody .rp-cta-contact.rp-cta-primary {
    margin: 12px 0 8px;
  }
}

/* Bottom Sheet 自体の見た目を整える（既存スタイルに上乗せ） */
@media (max-width: 768px) {
  #bottomSheet {
    /* max-height を 70vh に統一（地図 30% は常に見える） */
    max-height: 70vh;
  }
  #bottomSheetBody {
    padding: 8px 14px 16px;
  }
  /* ハンドル領域はわかりやすく */
  .bottom-sheet-handle {
    padding: 10px 0;
    cursor: grab;
  }
  .bottom-sheet-handle:active {
    cursor: grabbing;
  }
}

/* デスクトップでは Leaflet popup を引き続き使うので、
   .risk-summary-popup のサイズ統一（minWidth 320 に固定） */
@media (min-width: 769px) {
  .leaflet-popup.risk-summary-popup .leaflet-popup-content-wrapper {
    min-width: 320px;
  }
}

/* ====================================================
   📱 Phase 2: 検索結果ポップアップを Bottom Sheet に統一
   buildSearchPopup() の出力 (.locate-popup) が Bottom Sheet 内で
   美しく表示されるようスタイル調整
   ==================================================== */
@media (max-width: 768px) {
  #bottomSheetBody .locate-popup {
    padding: 4px 4px 8px;
  }
  /* タイトル行（🔍 住所）は close ボタンとの衝突を避ける */
  #bottomSheetBody .locate-popup .lp-title {
    font-size: 16px;
    font-weight: 700;
    margin-right: 40px;
    margin-bottom: 8px;
    color: #0f172a;
  }
  /* 座標表示はコンパクトに */
  #bottomSheetBody .locate-popup .lp-coord {
    font-size: 11px;
    color: #94a3b8;
    margin-bottom: 12px;
  }
  /* リスク項目（lp-risk-item）の余白を Bottom Sheet 用に */
  #bottomSheetBody .locate-popup .lp-risk-item {
    padding: 10px 0;
    border-bottom: 1px solid #f1f5f9;
  }
  #bottomSheetBody .locate-popup .lp-risk-item:last-of-type {
    border-bottom: none;
  }
}

/* ====================================================
   📱 Phase 3: 物件・写真ピンポップアップを Bottom Sheet に統一
   それぞれの popup HTML が Bottom Sheet 内で美しく見えるよう調整
   ==================================================== */
@media (max-width: 768px) {
  /* 物件ポップアップ */
  #bottomSheetBody .property-popup,
  #bottomSheetBody .property-popup-card {
    padding: 4px 4px 8px;
  }

  /* 物件画像はワイドに */
  #bottomSheetBody .property-popup img,
  #bottomSheetBody .property-popup-card img {
    width: 100% !important;
    max-height: 220px !important;
    object-fit: cover;
    border-radius: 8px;
  }

  /* 写真ピンポップアップ */
  #bottomSheetBody .pin-popup,
  #bottomSheetBody .pin-detail {
    padding: 4px 4px 8px;
  }

  /* 写真ギャラリーは Bottom Sheet 幅にフィット */
  #bottomSheetBody .pin-gallery,
  #bottomSheetBody .pin-photos {
    width: 100% !important;
  }
  #bottomSheetBody .pin-gallery img,
  #bottomSheetBody .pin-photo {
    max-width: 100%;
    max-height: 240px;
    object-fit: cover;
    border-radius: 8px;
  }

  /* リスクバッジ・タイトル等の余白統一 */
  #bottomSheetBody .pin-risk-badge,
  #bottomSheetBody .property-risk-badge {
    margin: 4px 4px 4px 0;
  }
}

/* ====================================================
   📱 Phase 4: 残りの popup を Bottom Sheet 内で読みやすく調整
   - 境界線ポップアップ
   - アイ企画オフィスマーカー
   - 現在地マーカー
   ==================================================== */
@media (max-width: 768px) {
  /* 境界線（町別境界）ポップアップ */
  #bottomSheetBody .boundary-popup {
    padding: 4px 4px 8px;
  }
  #bottomSheetBody .boundary-popup-title {
    font-size: 18px;
    font-weight: 700;
    margin-right: 40px;
    margin-bottom: 12px;
    color: #0f172a;
  }
  #bottomSheetBody .boundary-popup-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }
  #bottomSheetBody .boundary-popup-item {
    display: flex;
    flex-direction: column;
    padding: 10px 12px;
    background: #f8fafc;
    border-radius: 8px;
  }
  #bottomSheetBody .boundary-popup-label {
    font-size: 11px;
    color: #64748b;
    margin-bottom: 4px;
  }
  #bottomSheetBody .boundary-popup-value {
    font-size: 15px;
    font-weight: 700;
    color: #1a3a6a;
  }
  #bottomSheetBody .boundary-popup-source {
    font-size: 10px;
    color: #94a3b8;
    margin-top: 12px;
    text-align: right;
  }
}

/* ====================================================
   📍 タップピン（地図クリック時の視覚アンカー）
   - Bottom Sheet が開いた時、タップ点が見える
   - 落下アニメ + パルスリング
   - 既存マーカー（検索/物件/写真等）と区別する濃紺カラー
   ==================================================== */

/* タップピンのコンテナ */
.tap-pin-marker {
  /* divIcon のラッパ。サイズは iconSize で制御済み */
  pointer-events: none;
}

.tap-pin-wrapper {
  position: relative;
  width: 28px;
  height: 36px;
  pointer-events: none;
}

/* ピン本体（ドロップアニメ付き） */
.tap-pin-drop {
  position: absolute;
  inset: 0;
  animation: tapPinDrop 0.55s cubic-bezier(0.25, 1.4, 0.5, 1) both;
  transform-origin: bottom center;
}

@keyframes tapPinDrop {
  0%   { transform: translateY(-40px) scale(0.7); opacity: 0; }
  50%  { opacity: 1; }
  70%  { transform: translateY(2px) scale(1.05); }
  85%  { transform: translateY(-1px) scale(0.98); }
  100% { transform: translateY(0) scale(1); }
}

.tap-pin-icon {
  filter: drop-shadow(0 2px 4px rgba(15, 23, 42, 0.35));
}

/* パルスリング（ピン落下時に外側に広がる） */
.tap-pin-pulse {
  position: absolute;
  /* ピンの足元に中心を合わせる */
  bottom: 0;
  left: 50%;
  width: 28px;
  height: 28px;
  margin-left: -14px;
  border-radius: 50%;
  background: rgba(30, 58, 138, 0.4);
  animation: tapPinPulse 1.4s ease-out 0.3s both;
  pointer-events: none;
}

@keyframes tapPinPulse {
  0%   { transform: scale(0.4); opacity: 0.7; }
  100% { transform: scale(3.5); opacity: 0; }
}

/* フェードアウト用クラス（Bottom Sheet 閉じた時に追加） */
.tap-pin-fading {
  animation: tapPinFadeOut 0.25s ease-out forwards !important;
}

@keyframes tapPinFadeOut {
  0%   { opacity: 1; }
  100% { opacity: 0; transform: translateY(-4px); }
}

/* prefers-reduced-motion: アニメーション無効化 */
@media (prefers-reduced-motion: reduce) {
  .tap-pin-drop,
  .tap-pin-pulse,
  .tap-pin-fading {
    animation: none !important;
  }
  .tap-pin-pulse {
    display: none;
  }
}

/* ====================================================
   📍 統一ピンデザイン
   検索結果ピンとタップピンを同一デザイン（濃紺 SVG しずく型）に。
   違いはサイズ・ラベル有無・パルス強度のみ。
   ==================================================== */

/* 検索ピンのアイコン部（タップピンと同形・少し大きめ） */
.search-pin-icon {
  display: block;
  filter: drop-shadow(0 3px 6px rgba(15, 23, 42, 0.45));
}

/* 検索ピンのラベル（既存 style.css の navy 背景はそのまま活用、追加調整） */
.search-pin-label {
  /* 既存スタイル（navy背景・白文字）は維持。追加で安定感を与える */
  margin-top: 4px !important;
  letter-spacing: 0.02em;
}

/* モバイル: ラベルは Bottom Sheet に隠れる位置になるため非表示
   （Bottom Sheet のタイトルに同じ住所が表示されているので重複も解消） */
@media (max-width: 768px) {
  .search-pin-label {
    display: none !important;
  }
}

/* 検索ピンのドロップアニメ（既存 .search-pin-drop の動きはそのまま使用） */

/* パルスリング色を濃紺に統一（既存 SVG circleMarker 上書き） */
.search-pulse-ring {
  /* color/fillColor は L.circleMarker のオプションで navy を指定済み */
  /* CSS 側からは変えられないので JS 側で対応済み */
}


/* ====================================================
   公式ハザードマップ判定バッジ（リスクポップアップ内）
   - 解析中: グレー
   - 全て区域外: 緑（安全側）
   - X件 想定区域内: オレンジ（注意）
   ==================================================== */
.rp-hz-status.rp-hz-loading {
  background: #f1f5f9;
  color: #64748b;
  border: 1px solid #cbd5e1;
}
.rp-hz-status.rp-hz-safe {
  background: #dcfce7;
  color: #15803d;
  border: 1px solid #86efac;
}
.rp-hz-status.rp-hz-zones {
  background: #fef3c7;
  color: #b45309;
  border: 1px solid #fcd34d;
}

/* 公式ハザード行: 既存のリスクレベル色（high/mid/low）を踏襲 */
/* rp-level-high/mid/low はすでに定義済み */

/* ============================================================
   🏠 不動産物件: Peek Summary + 統合リスク表示
   ------------------------------------------------------------
   写真ピンと同じパターン:
   - peek (200px) では サムネ + 価格 + verdict pill（コンパクト）
   - mid/full では 写真 + スペック + 統合リスク + 問い合わせCTA
   リスク表示は地図タップ／検索／診断と同一の buildRiskPopup
   出力を使い、独自解析→公式ハザードと段階的に更新される。
   ============================================================ */

/* デフォルト (デスクトップ): peek-summary 非表示 / full-content 表示 */
.prop-peek-summary {
  display: none;
}
.prop-full-content {
  display: block;
}

/* モバイル: snap state に応じて表示切替 */
@media (max-width: 768px) {
  .bottom-sheet.bs-snap-peek .prop-peek-summary {
    display: flex;
  }
  .bottom-sheet.bs-snap-peek .prop-full-content {
    display: none;
  }
  .bottom-sheet.bs-snap-mid .prop-peek-summary,
  .bottom-sheet.bs-snap-full .prop-peek-summary {
    display: none;
  }
  .bottom-sheet.bs-snap-mid .prop-full-content,
  .bottom-sheet.bs-snap-full .prop-full-content {
    display: block;
  }
}

/* === 物件 Peek Summary === */
.prop-peek-summary {
  gap: 12px;
  align-items: stretch;
  padding: 4px 2px 6px;
}
.prop-peek-thumb {
  position: relative;
  width: 88px;
  height: 88px;
  border-radius: 10px;
  overflow: hidden;
  flex-shrink: 0;
  border: 1px solid #e2e8f0;
  background: #f1f5f9;
  cursor: pointer;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
}
.prop-peek-thumb:active {
  transform: scale(0.97);
  transition: transform 0.1s ease;
}
.prop-peek-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.prop-peek-noimg {
  display: flex !important;
  align-items: center;
  justify-content: center;
  font-size: 32px;
  cursor: default;
}
.prop-peek-meta {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 4px;
}
.prop-peek-type-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.prop-peek-type-row .prop-type {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 4px;
  flex-shrink: 0;
}
.prop-peek-type-row .prop-type.land {
  background: #dcfce7;
  color: #166534;
  border: 1px solid #86efac;
}
.prop-peek-type-row .prop-type.house {
  background: #dbeafe;
  color: #1e3a8a;
  border: 1px solid #93c5fd;
}
.prop-peek-price {
  font-size: 16px;
  font-weight: 800;
  color: #b91c1c;
  line-height: 1;
}
.prop-peek-title {
  font-size: 12.5px;
  font-weight: 600;
  color: #334155;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
  word-break: break-word;
}
/* 物件 peek の verdict 表示エリア */
.prop-peek-verdict {
  margin-top: 2px;
}
.prop-peek-verdict-loading {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  color: #64748b;
  background: #f1f5f9;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px dashed #cbd5e1;
}
/* ============================================================
   ★ rp-summary 折り返し回避（モバイル・デスクトップ共通）
   safe 状態の count text 「独自解析・公式ハザードとも問題なし」
   は16文字あり、狭い幅では flex 子要素が圧縮されて
   verdict text 「リスク低」が wrap してしまう。
   verdict text は決して wrap させず、count は次行に流れる方が綺麗。
   デスクトップ popup (maxWidth 360-400) でも同じ問題が発生するため、
   メディアクエリを外して全画面幅で適用する。
   ============================================================ */
.rp-summary {
  flex-wrap: wrap;
  row-gap: 4px;
}
.rp-summary-icon {
  flex-shrink: 0;
}
.rp-summary-text {
  flex-shrink: 0;
  white-space: nowrap;
}
.rp-summary-count {
  flex-shrink: 1;
}

/* peek 内の rp-summary をよりコンパクトに（非破壊） */
.prop-peek-verdict .rp-summary {
  margin-bottom: 0 !important;
  padding: 6px 10px !important;
  gap: 6px !important;
  /* peek の幅制約下で折り返しを防止（残幅 ~245px） */
  flex-wrap: nowrap !important;
  white-space: nowrap;
  overflow: hidden;
}
.prop-peek-verdict .rp-summary-icon {
  font-size: 14px !important;
  flex-shrink: 0;
}
.prop-peek-verdict .rp-summary-text {
  font-size: 12.5px !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* peek では count を非表示にする —
   「独自解析・公式ハザードとも問題なし」（safe）等の長文が
   折り返してレイアウトが崩れるため。
   詳細な内訳は mid/full のリスクセクションで確認できる。 */
.prop-peek-verdict .rp-summary-count {
  display: none !important;
}

/* === 統合リスクセクション（物件・写真ピン共通） === */
/* mid/full の Full Content 内に非同期挿入される。
   .prop-risk-section（物件）・.photo-risk-section（写真）が同一スタイル。 */
.prop-risk-section,
.photo-risk-section {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid #e2e8f0;
}
.prop-risk-section .rp-title,
.photo-risk-section .rp-title {
  font-size: 14px;
  font-weight: 700;
  margin-bottom: 8px;
  color: #0f172a;
}
.prop-risk-loading,
.photo-risk-loading {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px;
  background: #f8fafc;
  border-radius: 10px;
  color: #64748b;
  font-size: 13px;
}
.prop-risk-loading-spinner,
.photo-risk-loading-spinner {
  width: 16px;
  height: 16px;
  border: 2px solid #cbd5e1;
  border-top-color: #1e3a8a;
  border-radius: 50%;
  animation: propRiskSpin 0.8s linear infinite;
  flex-shrink: 0;
}
@keyframes propRiskSpin {
  to { transform: rotate(360deg); }
}
.prop-risk-error,
.photo-risk-error {
  padding: 10px 12px;
  background: #fef2f2;
  color: #b91c1c;
  border-radius: 8px;
  font-size: 12px;
  border: 1px solid #fecaca;
}

@media (prefers-reduced-motion: reduce) {
  .prop-risk-loading-spinner,
  .photo-risk-loading-spinner {
    animation: propRiskSpin 1.6s linear infinite;
  }
  .prop-peek-thumb:active {
    transform: none;
  }
}

/* ============================================================
   📸 災害履歴写真: Peek Summary + Lightbox
   ------------------------------------------------------------
   写真ピンのコンテンツを「peek 用サムネ行」と「full コンテンツ」
   に分離。peek 状態では地図 75% を残しつつ、ピンタップで
   「写真サムネ + メタ情報」だけを 200px 内に収める。
   サムネタップ → 全画面ライトボックスで写真鑑賞。
   ============================================================ */

/* デフォルト (デスクトップ) は peek summary を非表示、full のみ表示 */
.photo-peek-summary {
  display: none;
}
.photo-full-content {
  display: block;
}

/* モバイル: snap state に応じて表示切替 */
@media (max-width: 768px) {
  /* peek 状態: peek-summary だけ表示 */
  .bottom-sheet.bs-snap-peek .photo-peek-summary {
    display: flex;
  }
  .bottom-sheet.bs-snap-peek .photo-full-content {
    display: none;
  }
  /* mid/full 状態: full-content だけ表示（peek-summary は隠す） */
  .bottom-sheet.bs-snap-mid .photo-peek-summary,
  .bottom-sheet.bs-snap-full .photo-peek-summary {
    display: none;
  }
  .bottom-sheet.bs-snap-mid .photo-full-content,
  .bottom-sheet.bs-snap-full .photo-full-content {
    display: block;
  }
}

/* === Peek Summary の中身レイアウト === */
.photo-peek-summary {
  gap: 12px;
  align-items: stretch;
  padding: 4px 2px 8px;
}
.photo-peek-thumb {
  position: relative;
  width: 88px;
  height: 88px;
  border-radius: 10px;
  overflow: hidden;
  flex-shrink: 0;
  border: 1px solid #e2e8f0;
  background: #f1f5f9;
  cursor: pointer;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
}
.photo-peek-thumb:active {
  transform: scale(0.97);
  transition: transform 0.1s ease;
}
.photo-peek-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.photo-peek-noimg {
  display: flex !important;
  align-items: center;
  justify-content: center;
  color: #94a3b8;
  font-size: 11px;
  text-align: center;
  cursor: default;
}
/* サムネ右下: 拡大ヒント（⤢）— 常時表示で「タップで拡大」を示唆 */
.photo-peek-zoom-icon {
  position: absolute;
  bottom: 4px;
  right: 4px;
  background: rgba(15, 23, 42, 0.78);
  color: #fff;
  font-size: 13px;
  padding: 2px 5px;
  border-radius: 6px;
  line-height: 1;
  pointer-events: none;
  font-weight: 700;
}
/* サムネ左上: 複数枚バッジ */
.photo-peek-count {
  position: absolute;
  top: 4px;
  left: 4px;
  background: rgba(255, 255, 255, 0.96);
  color: #1e3a8a;
  font-size: 10.5px;
  font-weight: 800;
  padding: 2px 7px;
  border-radius: 999px;
  line-height: 1.2;
  pointer-events: none;
}
/* メタ情報（タイトル / 日付・カテゴリ / 実測） */
.photo-peek-meta {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
}
.photo-peek-title {
  font-size: 14.5px;
  font-weight: 700;
  color: #0f172a;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  word-break: break-word;
}
.photo-peek-sub {
  font-size: 11.5px;
  color: #64748b;
}
.photo-peek-depth {
  display: inline-block;
  align-self: flex-start;
  font-size: 11px;
  font-weight: 700;
  color: #b45309;
  background: #fef3c7;
  border: 1px solid #fde68a;
  padding: 2px 8px;
  border-radius: 999px;
}

/* === Full content 用の画像クリックボタン化 === */
.pin-gallery-img-btn {
  display: block;
  width: 100%;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.pin-gallery-img-btn:active {
  opacity: 0.85;
}

/* ============================================================
   Full-screen Photo Lightbox
   ============================================================ */
.photo-lightbox {
  position: fixed;
  inset: 0;
  z-index: 9000;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.22s ease;
}
.photo-lightbox.open {
  opacity: 1;
  pointer-events: auto;
}
.photo-lightbox[hidden] {
  display: none !important;
}

.photo-lightbox-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.94);
  cursor: pointer;
}

.photo-lightbox-stage {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none; /* backdrop を通過させる */
}
.photo-lightbox-img {
  max-width: 92vw;
  max-height: calc(100vh - 200px);
  width: auto;
  height: auto;
  object-fit: contain;
  pointer-events: auto;
  border-radius: 4px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
}

.photo-lightbox-close {
  position: absolute;
  top: max(env(safe-area-inset-top, 0px), 12px);
  right: 12px;
  width: 44px;
  height: 44px;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
  font-size: 20px;
  font-weight: 700;
  cursor: pointer;
  z-index: 4;
  -webkit-tap-highlight-color: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s ease;
}
.photo-lightbox-close:hover,
.photo-lightbox-close:active {
  background: rgba(255, 255, 255, 0.28);
}

.photo-lightbox-prev,
.photo-lightbox-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
  border: none;
  font-size: 28px;
  cursor: pointer;
  z-index: 4;
  display: none;
  align-items: center;
  justify-content: center;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.15s ease;
}
.photo-lightbox-prev { left: 8px; }
.photo-lightbox-next { right: 8px; }
.photo-lightbox-prev:active,
.photo-lightbox-next:active {
  background: rgba(255, 255, 255, 0.28);
}

.photo-lightbox-counter {
  position: absolute;
  top: max(env(safe-area-inset-top, 0px), 16px);
  left: 50%;
  transform: translateX(-50%);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  background: rgba(0, 0, 0, 0.55);
  padding: 4px 14px;
  border-radius: 999px;
  z-index: 4;
  display: none;
  font-variant-numeric: tabular-nums;
}

.photo-lightbox-caption {
  position: absolute;
  bottom: max(env(safe-area-inset-bottom, 0px), 24px);
  left: 12px;
  right: 12px;
  z-index: 3;
  background: rgba(0, 0, 0, 0.62);
  color: #fff;
  padding: 12px 14px;
  border-radius: 12px;
  text-align: left;
  pointer-events: auto;
}
.photo-lightbox-caption .lb-title {
  font-size: 15px;
  font-weight: 700;
  margin-bottom: 4px;
  word-break: break-word;
}
.photo-lightbox-caption .lb-meta {
  font-size: 12px;
  opacity: 0.88;
}

/* ライトボックス開いている間 body スクロールを止める */
body.photo-lightbox-active {
  overflow: hidden;
  touch-action: none;
}

/* prefers-reduced-motion 対応 */
@media (prefers-reduced-motion: reduce) {
  .photo-lightbox {
    transition: opacity 0.1s linear;
  }
  .photo-peek-thumb:active {
    transform: none;
  }
}

/* デスクトップではライトボックスをやや小さめに */
@media (min-width: 769px) {
  .photo-lightbox-img {
    max-width: 80vw;
    max-height: calc(100vh - 160px);
  }
}

/* ============================================================
   🖥 デスクトップ Popup: Collapsible 化（B案）
   ------------------------------------------------------------
   モバイル peek-first 思想のデスクトップ版。
   - クリック直後: peek-summary（コンパクト）+ 「詳細を見る ▼」
   - 展開後:        full-content + 「閉じる ▲」
   モバイルでは 3-snap が同等の役割を果たすので、トグルボタンは非表示。
   ============================================================ */

/* デフォルト（共通）: トグルボタンを非表示 */
.popup-detail-toggle {
  display: none;
}

/* モバイル: トグルボタンを非表示維持（3-snap が代替） */
@media (max-width: 768px) {
  .popup-detail-toggle {
    display: none !important;
  }
}

/* === デスクトップ専用: collapsible 動作 === */
@media (min-width: 769px) {
  /* peek-summary を表示（モバイル peek と同じレイアウト） */
  .photo-peek-summary,
  .prop-peek-summary {
    display: flex;
  }
  /* full-content は初期非表示 */
  .photo-full-content,
  .prop-full-content {
    display: none;
  }
  /* expanded 時: peek を隠し、full を表示 */
  .photo-popup.expanded .photo-peek-summary,
  .property-popup.expanded .prop-peek-summary {
    display: none;
  }
  .photo-popup.expanded .photo-full-content,
  .property-popup.expanded .prop-full-content {
    display: block;
  }

  /* トグルボタン本体 */
  .popup-detail-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    margin: 8px 0 4px;
    padding: 10px 14px;
    background: linear-gradient(135deg, #3b82f6, #2563eb);
    color: #fff;
    border: none;
    border-radius: 999px;
    font-size: 12.5px;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.15s ease, transform 0.05s ease;
    -webkit-tap-highlight-color: transparent;
  }
  .popup-detail-toggle:hover {
    background: linear-gradient(135deg, #2563eb, #1d4ed8);
  }
  .popup-detail-toggle:active {
    transform: scale(0.98);
  }
  .popup-detail-toggle-arrow {
    font-size: 10px;
    transition: transform 0.2s ease;
  }
  /* expanded 時はトグル色を控えめに（gray gradient） */
  .photo-popup.expanded .popup-detail-toggle,
  .property-popup.expanded .popup-detail-toggle {
    background: linear-gradient(135deg, #64748b, #475569);
  }
  .photo-popup.expanded .popup-detail-toggle:hover,
  .property-popup.expanded .popup-detail-toggle:hover {
    background: linear-gradient(135deg, #475569, #334155);
  }
}

/* ============================================================
   🖥 デスクトップ専用: 物件 popup 横長レイアウト（C案）
   ------------------------------------------------------------
   maxWidth 480px を活用して画像を左、情報を右に配置。
   縦長 popup が短くなり、CTA が視野内に入りやすい。
   ============================================================ */
@media (min-width: 769px) {
  /* expanded 時の prop-full-content は flex 横並び */
  .property-popup.expanded .prop-full-content {
    display: grid !important;
    grid-template-columns: 40% 1fr;
    gap: 12px;
    align-items: start;
  }
  /* リスクセクションと CTA は両カラム下に full 幅で配置 */
  .property-popup.expanded .prop-risk-section,
  .property-popup.expanded .prop-cta-contact {
    grid-column: 1 / -1; /* full 幅 */
  }
  /* 編集ボタンも full 幅 */
  .property-popup.expanded .prop-full-content > div[style*="margin-top:6px"] {
    grid-column: 1 / -1;
  }
  /* 左カラム: 画像 — popup 内では height 制限 */
  .prop-image-col {
    overflow: hidden;
    border-radius: 8px;
  }
  .prop-image-col img {
    width: 100%;
    height: auto;
    max-height: 200px;
    object-fit: cover;
    display: block;
    border-radius: 8px;
  }
  .prop-image-col:empty {
    display: none;
  }
  /* 右カラム: 情報 */
  .prop-info-col {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
  }
  /* 横長レイアウトでスペック表をコンパクトに */
  .property-popup.expanded .prop-info-col .prop-specs {
    margin: 6px 0;
  }
}

/* ============================================================
   🖥 デスクトップ Popup 内 Aikaku CTA を sticky 風に下端固定
   ------------------------------------------------------------
   maxHeight 70vh の Leaflet popup-content 内でスクロール時、
   Aikaku CTA / 物件問い合わせ CTA がスクロールアウトしないよう
   下端に sticky 表示（見やすさを優先）。
   ============================================================ */
@media (min-width: 769px) {
  /* デスクトップ: 全 Leaflet popup の content を 70vh max にし、内部スクロール */
  /* Leaflet の maxHeight option が効かないケースの保険 */
  .leaflet-popup-content {
    max-height: 70vh !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
  }
  /* 物件 popup の expanded 時は 横長レイアウト用に十分な幅を確保 */
  .leaflet-popup-content:has(.property-popup.expanded),
  .leaflet-popup-content:has(.property-popup) {
    min-width: 380px !important;
    width: auto !important;
  }
  /* :has() 非対応ブラウザ向けフォールバック */
  .property-popup,
  .photo-popup {
    min-width: 280px;
  }
  .property-popup.expanded {
    min-width: 380px;
  }
  .leaflet-popup.risk-summary-popup .leaflet-popup-content,
  .leaflet-popup.search-result-popup .leaflet-popup-content {
    padding-bottom: 8px;
  }
  /* 物件 popup 内の問い合わせ CTA は重要なのでフォーカスしやすい色を維持 */
  .property-popup.expanded .prop-cta-contact {
    margin-top: 8px;
  }
}

/* ============================================================
   📱 P1-P3 即時対応: モバイルの「画面下端ボタンスープ」整理 +
   WCAG 2.5.8（タッチターゲット 44×44）違反の修正
   ------------------------------------------------------------
   P1: フローティング「相談する」 CTA をモバイルで非表示
       （ボトムシート・診断ヒーロー・お問い合わせドロワー内に
        同等 CTA が既にあり、フローティングは画面占有の元）
   P2: ミニ凡例パネル（左下浮遊）をモバイルで非表示
       （設定ドロワー > 凡例タブに既に統合されている）
   P3: タッチターゲットを 44×44 以上に拡張
   ============================================================ */
@media (max-width: 768px) {
  /* === P1: フローティング相談 CTA 削除 === */
  .floating-cta,
  #floatingCta {
    display: none !important;
  }

  /* === P2: ミニ凡例パネル削除（地図上から） === */
  .mini-legend,
  #miniLegend {
    display: none !important;
  }

  /* === P3-1: ボトムシート ドラッグハンドルのタッチ領域拡張 === */
  /* 視覚的なバー（36×4）はそのまま。コンテナ高さを 44px に固定 */
  .bottom-sheet-handle {
    min-height: 44px !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    position: relative;
    box-sizing: border-box;
  }
  /* 透明な擬似要素でタップ領域を上にも 8px 延長（保険） */
  .bottom-sheet-handle::before {
    content: '';
    position: absolute;
    top: -8px;
    left: 0;
    right: 0;
    height: 8px;
    z-index: 1;
  }

  /* === P3-2: 「詳しく見る」ピルを 44px 高に === */
  .bs-expand-hint {
    min-height: 44px;
    padding: 10px 18px !important;
    font-size: 13px !important;
    /* top 位置はハンドル padding 拡張に合わせて再調整 */
    top: 36px !important;
  }
  /* peek 状態の body padding-top をピル高に合わせて拡大 */
  .bottom-sheet.bs-snap-peek #bottomSheetBody,
  .bottom-sheet.bs-snap-mid  #bottomSheetBody {
    padding-top: 50px !important;
  }
  /* mid 状態でもタイトルは出すが、ピル分の余白を確保 */
  .bottom-sheet.bs-snap-mid .search-context-wrap,
  .bottom-sheet.bs-snap-full .search-context-wrap {
    margin-top: 0;
  }

  /* === P3-3: 「使い方ガイド」ボタンを 44px に + ❓ アラート感解消 === */
  .tutorial-start-btn,
  #tutorialStartBtn {
    min-height: 44px !important;
    padding: 10px 14px !important;
    font-size: 12px;
    color: #1e3a8a !important;
    border: 1.5px solid rgba(30, 58, 138, 0.25);
    display: inline-flex !important;
    align-items: center;
    gap: 6px;
  }
  /* 元の ❓ 絵文字（赤色固定）を非表示にし、CSS で円形 "?" バッジに置換 */
  .tutorial-start-btn span:first-child,
  #tutorialStartBtn span:first-child {
    width: 18px;
    height: 18px;
    background: #1e3a8a;
    border-radius: 50%;
    color: transparent !important;
    font-size: 0 !important;
    position: relative;
    flex-shrink: 0;
  }
  .tutorial-start-btn span:first-child::before,
  #tutorialStartBtn span:first-child::before {
    content: "?";
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 12px;
    font-weight: 800;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  }

  /* === P3-4: [一覧表示] リンクをボタン化（11px → 44px） === */
  #propListToggle {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    min-height: 36px;
    min-width: 80px;
    padding: 6px 12px !important;
    margin-left: 8px !important;
    font-size: 12px !important;
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    border-radius: 999px;
    text-decoration: none !important;
    color: #1e3a8a !important;
    cursor: pointer;
    transition: background 0.15s ease;
  }
  #propListToggle:active {
    background: #dbeafe;
  }
}

/* ============================================================
   🩹 診断ヒーロー: 公式ハザードマップセクション（後付け）
   独自解析行（diag-rows）の直下に非同期挿入される。
   verdict と内容は地図タップ／検索バーの bottomSheet と
   完全に同じロジックで計算される（ensureAndRenderPublicHazard）。
   ============================================================ */
.diag-public-hazard {
  margin: 12px 0 4px;
  padding: 10px 12px;
  background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
  border: 1px solid #e2e8f0;
  border-radius: 12px;
}
.diag-ph-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  font-size: 13px;
  font-weight: 700;
  color: #334155;
}
.diag-ph-icon {
  font-size: 16px;
}
.diag-ph-title {
  flex: 1 1 auto;
  min-width: 0;
}
.diag-ph-status {
  font-size: 11px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 999px;
  white-space: nowrap;
}
.diag-public-hazard.diag-ph-loading .diag-ph-status {
  background: #e0e7ff;
  color: #4338ca;
  animation: diagPhPulse 1.4s infinite;
}
@keyframes diagPhPulse {
  0%, 100% { opacity: 0.6; }
  50% { opacity: 1; }
}
.diag-ph-status-safe {
  background: #dcfce7;
  color: #166534;
  border: 1px solid #86efac;
}
.diag-ph-status-zones {
  background: #fef3c7;
  color: #b45309;
  border: 1px solid #fcd34d;
}
.diag-ph-status-high {
  background: #fee2e2;
  color: #b91c1c;
  border: 1px solid #fca5a5;
}
.diag-ph-rows {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.diag-ph-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border-radius: 8px;
  font-size: 12.5px;
  background: #fff;
  border: 1px solid #e2e8f0;
}
.diag-ph-row-icon {
  font-size: 14px;
  flex-shrink: 0;
}
.diag-ph-row-label {
  flex: 1 1 auto;
  font-weight: 600;
  color: #334155;
  min-width: 0;
}
.diag-ph-row-pill {
  font-size: 11px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 999px;
  white-space: nowrap;
}
.diag-ph-row-low .diag-ph-row-pill {
  background: #dcfce7;
  color: #166534;
}
.diag-ph-row-mid .diag-ph-row-pill {
  background: #fef3c7;
  color: #b45309;
}
.diag-ph-row-high .diag-ph-row-pill {
  background: #fee2e2;
  color: #b91c1c;
}

/* verdict 横の件数（公式 X 件 想定区域内） */
.diag-verdict-count {
  font-size: 11px;
  font-weight: 700;
  margin-left: auto;
  white-space: nowrap;
  opacity: 0.85;
  align-self: flex-start;
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.4);
}

@media (max-width: 480px) {
  .diag-public-hazard {
    padding: 8px 10px;
    margin: 10px 0 4px;
  }
  .diag-ph-row {
    padding: 5px 8px;
    font-size: 12px;
  }
  .diag-ph-row-label {
    font-size: 12px;
  }
  .diag-ph-row-pill {
    font-size: 10.5px;
  }
  .diag-verdict-count {
    font-size: 10.5px;
  }
}

/* ============================================================
   🔍 検索結果統一表示 — 地図タップと同じリスクポップアップを使う
   .search-context-wrap が外側ラッパー、上部に検索ヘッダ、下に
   通常の .risk-popup を出す。.rp-title は検索ヘッダと重複するため隠す。
   ============================================================ */
.search-context-wrap .rp-title {
  display: none;
}
.search-context-header {
  background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
  padding: 10px 12px;
  border-radius: 10px;
  margin: 0 0 12px;
  border: 1px solid #bfdbfe;
}
.search-context-header .sch-addr {
  font-size: 14px;
  font-weight: 700;
  color: #1e3a8a;
  line-height: 1.3;
  display: flex;
  align-items: center;
  gap: 6px;
  word-break: break-word;
}
.search-context-header .sch-addr-text {
  flex: 1 1 auto;
  min-width: 0;
}
.search-context-header .sch-coord {
  font-size: 11px;
  color: #64748b;
  margin-top: 4px;
  font-variant-numeric: tabular-nums;
}

/* モバイル: BottomSheet 用に微調整（peek でもヘッダだけは見える） */
@media (max-width: 768px) {
  .search-context-header {
    padding: 8px 10px;
    margin-bottom: 10px;
  }
  .search-context-header .sch-addr {
    font-size: 13px;
  }
  .search-context-header .sch-coord {
    font-size: 10.5px;
  }
  /* peek 状態では .rp-title 非表示ルール（既存）と同様、
     .search-context-header のみが見えるように — 既に hide してるので追加不要 */
  /* peek でも住所が見えるよう、ヘッダの上余白を調整 */
  .bottom-sheet.bs-snap-peek .search-context-wrap {
    /* ピル（top:28px）と被らないよう、ヘッダ位置を少し下げる */
    margin-top: 4px;
  }
}

/* ============================================================
   📱 3-Snap Bottom Sheet（peek / mid / full）
   モバイルで地図クリック時にシートが画面の70%以上を覆う問題への解決。
   - peek: ~200px（概要バッジ＋件数のみ。地図 75% 残る）
   - mid : 55vh（公式ハザード4種＋独自解析サマリ）
   - full: 88vh（CTA・詳細展開まで全て）
   ハンドルをドラッグまたはクリックで状態遷移、peek でバックドロップを
   非モーダル化し、地図を直接タップして次の地点をサンプル可能にする。
   ============================================================ */
@media (max-width: 768px) {
  /* シート本体は最大 88vh の容器とし、translateY で表示量を制御 */
  .bottom-sheet-overlay.open .bottom-sheet {
    max-height: 88vh !important;
    height: 88vh; /* 固定高さで snap 計算が安定する */
  }
  /* ボディは flex で残り高さを埋め、内部スクロールに */
  .bottom-sheet-overlay.open .bottom-sheet-body {
    flex: 1 1 auto;
    min-height: 0;
  }

  /* === 3 Snap States === */
  /* peek: 200px だけ可視 — 地図 75% 残る */
  .bottom-sheet-overlay.open .bottom-sheet.bs-snap-peek:not(.bs-dragging) {
    transform: translateY(calc(100% - 200px)) !important;
  }
  /* mid: 55vh 可視 — 主要4ハザード + 独自解析が見える */
  .bottom-sheet-overlay.open .bottom-sheet.bs-snap-mid:not(.bs-dragging) {
    transform: translateY(calc(100% - 55vh)) !important;
  }
  /* full: 88vh 可視 — 詳細展開までフル表示 */
  .bottom-sheet-overlay.open .bottom-sheet.bs-snap-full:not(.bs-dragging) {
    transform: translateY(0) !important;
  }
  /* ドラッグ中は transition を切ってスムーズ追従 */
  .bottom-sheet.bs-dragging {
    transition: none !important;
  }
  /* スナップ遷移時のアニメーション（柔らか） */
  .bottom-sheet:not(.bs-dragging) {
    transition: transform 0.32s cubic-bezier(0.32, 0.72, 0, 1) !important;
  }

  /* peek 状態: バックドロップ非モーダル化（地図タップ可能に） */
  .bottom-sheet-overlay.bs-state-peek .bottom-sheet-backdrop {
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    pointer-events: none !important;
  }
  /* mid/full は半透明バックドロップで集中を促す */
  .bottom-sheet-overlay.bs-state-mid .bottom-sheet-backdrop,
  .bottom-sheet-overlay.bs-state-full .bottom-sheet-backdrop {
    background: rgba(0, 0, 0, 0.18) !important;
    pointer-events: auto !important;
  }

  /* peek でハンドルを目立たせる（grab 親和性向上） */
  .bottom-sheet.bs-snap-peek .bottom-sheet-handle {
    padding: 12px 0 6px;
  }
  .bottom-sheet.bs-snap-peek .bottom-sheet-handle span {
    width: 48px;
    height: 5px;
    background: #94a3b8;
  }
  /* full では控えめに */
  .bottom-sheet.bs-snap-full .bottom-sheet-handle span {
    width: 36px;
    height: 4px;
    background: #cbd5e1;
  }

  /* === 「↑ 詳しく見る」ヒントピル（peek/mid のみ） === */
  .bs-expand-hint {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: 28px;
    display: none;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    background: linear-gradient(135deg, #3b82f6, #2563eb);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    border: none;
    border-radius: 999px;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(37, 99, 235, 0.32);
    z-index: 3;
    white-space: nowrap;
    -webkit-tap-highlight-color: transparent;
  }
  .bs-expand-hint:active {
    transform: translateX(-50%) scale(0.97);
  }
  .bottom-sheet.bs-snap-peek .bs-expand-hint {
    display: inline-flex;
  }
  .bottom-sheet.bs-snap-mid .bs-expand-hint {
    display: inline-flex;
    background: linear-gradient(135deg, #64748b, #475569);
    box-shadow: 0 2px 6px rgba(71, 85, 105, 0.25);
  }
  .bottom-sheet.bs-snap-full .bs-expand-hint {
    display: none;
  }
  .bs-expand-hint .arrow {
    display: inline-block;
    font-size: 9px;
    animation: bsArrowBounce 1.4s infinite;
  }
  @keyframes bsArrowBounce {
    0%, 80%, 100% { transform: translateY(0); }
    40% { transform: translateY(-2px); }
  }

  /* ✕ 閉じるボタンはピルと衝突しないよう右寄せに */
  .bottom-sheet-close {
    z-index: 4 !important;
  }

  /* peek 状態ではタイトルを非表示にしてピルとの衝突を回避
     （ユーザーは直前にマップをクリックしたばかりで、これがリスク情報なのは自明） */
  .bottom-sheet.bs-snap-peek #bottomSheetBody .rp-title {
    display: none;
  }
  /* peek 状態では body のパディングを少し詰めて summary を最大化 */
  .bottom-sheet.bs-snap-peek #bottomSheetBody {
    padding-top: 26px; /* ピル分の余白 */
  }
  .bottom-sheet.bs-snap-mid #bottomSheetBody {
    padding-top: 26px;
  }

  /* peek 状態でグラデーション「下に続く」インジケータを表示 */
  .bottom-sheet.bs-snap-peek .bottom-sheet-body::after,
  .bottom-sheet.bs-snap-mid .bottom-sheet-body::after {
    content: '';
    position: sticky;
    bottom: 0;
    left: 0; right: 0;
    height: 24px;
    margin-top: -24px;
    background: linear-gradient(to bottom, rgba(255,255,255,0), rgba(255,255,255,0.92));
    pointer-events: none;
    display: block;
  }
  .bottom-sheet.bs-snap-full .bottom-sheet-body::after {
    display: none;
  }

  /* prefers-reduced-motion 対応 */
  @media (prefers-reduced-motion: reduce) {
    .bottom-sheet:not(.bs-dragging) {
      transition: transform 0.15s linear !important;
    }
    .bs-expand-hint .arrow {
      animation: none;
    }
  }
}