/* ============================================================================
   design-system.css — デザイン言語の統一レイヤー（非破壊・上塗り）
   ----------------------------------------------------------------------------
   Google / Material 由来の「一貫した言語」を担当するレイヤーです。
   既存 patches.css の :root トークン（--sp / --fs / --ui / --risk / --shadow）を
   土台に、欠けていた「角丸スケール」「モーションスケール」を補い、
   画面上の共有コントロール（FAB・ピル・チップ・パネル・ボタン）へ
   一貫した 角丸 / 影 / 押し心地 / 動き を適用します。

   読み込み順: style.css → patches.css → design-system.css（最後＝最優先）
   既存の挙動（パネルのスライド等）は壊さず、見た目の語彙のみ統一します。
   ============================================================================ */

:root {
  /* ── 角丸スケール（新規）──────────────────────────────────────────
     場当たりだった 3/4/6/8/10/12/14/16/20/24px を 1 本の階段に集約 */
  --r-xs: 6px;     /* 入力欄・ヒント・小チップ */
  --r-sm: 8px;     /* 標準ボタン・小カード */
  --r-md: 12px;    /* カード・凡例・ポップアップ */
  --r-lg: 16px;    /* パネル・大カード */
  --r-xl: 22px;    /* モーダル・ボトムシート */
  --r-pill: 999px; /* ピル・チップ */
  --r-full: 50%;   /* 円形 FAB・アイコン */

  /* ── モーション（新規）── Material 3 のイージング/デュレーション準拠 ──
     「装飾でなく、出現元と操作受理を伝える」ための共通言語 */
  --dur-1: 110ms;  /* 押下など即時フィードバック */
  --dur-2: 200ms;  /* hover・色/影の変化（標準） */
  --dur-3: 280ms;  /* 出現・移動 */
  --dur-4: 380ms;  /* 大きな面（パネル・シート） */
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);  /* 標準（双方向） */
  --ease-decel:    cubic-bezier(0, 0, 0, 1);    /* 減速＝入ってくる要素 */
  --ease-accel:    cubic-bezier(0.3, 0, 1, 1);  /* 加速＝出ていく要素 */

  /* ── フローティング・エレベーション（既存3段階を補完）────────────
     地図上に浮く円形コントロール用の中間影 */
  --elev-float:       0 3px 12px rgba(0,0,0,0.16);
  --elev-float-hover: 0 7px 22px rgba(0,0,0,0.24);

  /* ── フォーカスリング（既存の #2980b9 をトークン化）── */
  --focus-ring: #2980b9;
}

/* ============================================================================
   1. 共通の「押し心地」── Material の一貫操作で学習コストを下げる
   ----------------------------------------------------------------------------
   位置決めに transform を使わない自立ボタンに限定し、
   ・押下 = わずかに沈む（scale）   ・トランジションは共通トークン
   を付与。色やレイアウトは各コンポーネントの既存定義を尊重します。
   ============================================================================ */
.btn,
.area-btn,
.preset-btn,
.cat-btn,
.prop-type-btn,
.diag-btn,
.diag-search-btn,
.opacity-preset-btn,
.basemap-btn,
.map-action-btn,
.desktop-toggle-btn,
.tutorial-start-btn,
.floating-cta,
.app-header-crosslink,
.welcome-btn-next,
.welcome-btn-start,
.welcome-btn-back,
.welcome-btn-skip,
.share-modal-option,
.btn-photo-add {
  transition: transform var(--dur-1) var(--ease-standard),
              box-shadow var(--dur-2) var(--ease-standard),
              background-color var(--dur-2) var(--ease-standard),
              border-color var(--dur-2) var(--ease-standard),
              color var(--dur-2) var(--ease-standard) !important;
}
.btn:active,
.area-btn:active,
.preset-btn:active,
.cat-btn:active,
.prop-type-btn:active,
.diag-btn:active,
.diag-search-btn:active,
.opacity-preset-btn:active,
.basemap-btn:active,
.tutorial-start-btn:active,
.app-header-crosslink:active,
.welcome-btn-next:active,
.welcome-btn-start:active,
.welcome-btn-back:active,
.share-modal-option:active,
.btn-photo-add:active {
  transform: scale(0.96) !important;
}

/* ============================================================================
   2. 地図上のフローティング・コントロール ── 1つの語彙に統一
   ----------------------------------------------------------------------------
   円形 FAB（現在地/シェア/設定…）と Leaflet ズームを、同じ
   影 / 押し心地 / hover の浮き上がり に揃え、「同じ仲間」に見せます。
   ============================================================================ */
.map-action-btn {
  border-radius: var(--r-full) !important;
  box-shadow: var(--elev-float) !important;
  color: var(--ui-primary) !important;
}
.map-action-btn:hover {
  background: #eef3fb !important;
  box-shadow: var(--elev-float-hover) !important;
  transform: translateY(-1px) scale(1.04) !important;
}
.map-action-btn:active {
  transform: scale(0.94) !important;
  box-shadow: var(--elev-float) !important;
}

/* Leaflet ズーム（+/-）── FAB と同じ浮き感・動きに揃える */
.leaflet-control-zoom {
  border: none !important;
  border-radius: var(--r-md) !important;
  box-shadow: var(--elev-float) !important;
  overflow: hidden;
}
.leaflet-control-zoom a {
  transition: background-color var(--dur-2) var(--ease-standard),
              color var(--dur-2) var(--ease-standard) !important;
  color: var(--ui-primary) !important;
}
.leaflet-control-zoom a:hover {
  background: #eef3fb !important;
  color: var(--ui-primary) !important;
}

/* ============================================================================
   3. ピル型コントロール ── 角丸・浮き感・押し心地を共通化
   （使い方ガイド / 地価・人口マップ / 相談する CTA）
   形と動きの語彙を揃え、色（役割）は各々を維持します。
   ============================================================================ */
.tutorial-start-btn,
.floating-cta,
.app-header-crosslink {
  border-radius: var(--r-pill) !important;
}
.tutorial-start-btn,
.floating-cta {
  box-shadow: var(--elev-float) !important;
}
.tutorial-start-btn:hover,
.floating-cta:hover {
  box-shadow: var(--elev-float-hover) !important;
  transform: translateY(-1px) !important;
}
.floating-cta:active { transform: scale(0.96) !important; }

/* ============================================================================
   4. サーフェス（浮くカード/パネル）── 影と角丸を3段階トークンに集約
   ============================================================================ */
.legend,
.mini-legend,
.header-search-results,
.search-results {
  border-radius: var(--r-md) !important;
  box-shadow: var(--shadow-mid) !important;
}
.welcome-card,
.diag-hero-card,
.share-modal-card,
.add-photo-panel,
.add-property-panel,
.export-panel {
  border-radius: var(--r-xl) !important;
  box-shadow: var(--shadow-high) !important;
}
.bottom-sheet,
.settings-drawer {
  box-shadow: var(--shadow-high) !important;
}

/* ============================================================================
   5. チップ ── ピル形状で統一（表示中レイヤー / ミニ凡例）
   ============================================================================ */
.active-chip {
  border-radius: var(--r-pill) !important;
  transition: background-color var(--dur-2) var(--ease-standard),
              box-shadow var(--dur-2) var(--ease-standard),
              transform var(--dur-1) var(--ease-standard) !important;
}
.active-chip:active { transform: scale(0.96) !important; }
.mini-legend .ml-chip { border-radius: var(--r-pill) !important; }

/* ============================================================================
   6. 入力欄 ── 角丸とフォーカスの一貫化
   ============================================================================ */
.app-header-search input,
#searchInput,
.diag-search-input {
  border-radius: var(--r-sm) !important;
  transition: border-color var(--dur-2) var(--ease-standard),
              background-color var(--dur-2) var(--ease-standard),
              box-shadow var(--dur-2) var(--ease-standard) !important;
}

/* ============================================================================
   7. モバイルタブ ── 既存スタイルに委譲（ここでは触らない）
   ----------------------------------------------------------------------------
   選択中カラーは style.css の #tab_*.tab-on（カテゴリ別グラデ）、押下feedbackは
   patches.css の .tab-item:active（scale/opacity）が担う。
   ⚠ ここで background を触ると選択中のグラデ色を消すため（特にモバイルで
     :active が残った際にONなのに色が消える不具合になる）、意図的に何もしない。
   ============================================================================ */

/* ============================================================================
   8. reduced-motion 尊重（既存方針を踏襲）
   ============================================================================ */
@media (prefers-reduced-motion: reduce) {
  .btn, .area-btn, .preset-btn, .cat-btn, .prop-type-btn, .diag-btn,
  .opacity-preset-btn, .basemap-btn, .map-action-btn, .desktop-toggle-btn,
  .tutorial-start-btn, .floating-cta, .app-header-crosslink, .active-chip {
    transition-duration: 0.01ms !important;
  }
  .map-action-btn:hover, .tutorial-start-btn:hover, .floating-cta:hover {
    transform: none !important;
  }
}

/* ============================================================================
   9. ボタン4分類システム ── Material の「役割で形が決まる」一貫体系
   ----------------------------------------------------------------------------
   画面上の全ボタンを役割で 4 つの原型に整理し、サイズ/角丸/状態を統一します。
     ① FAB      … 地図上に浮く円形（現在地・シェア・設定・ズーム）
     ② アイコン … 閉じる/トグル等の正方アイコン操作
     ③ チップ   … 選択肢（背景地図・プリセット・種別・表示中チップ）
     ④ 標準     … テキスト主体のアクション（保存・検索・診断・CTA）
   各原型に再利用可能な .ds-* クラスを用意しつつ、既存クラスを原型へ正規化します。
   色は既存（トークン）を尊重し、形・余白・状態のみを揃えます。
   ============================================================================ */

/* --- 原型① FAB（円形）── v1で統一済み。新規実装用ユーティリティを提供 --- */
.ds-fab {
  width: 44px; height: 44px; border: none; cursor: pointer;
  border-radius: var(--r-full);
  background: #fff; color: var(--ui-primary);
  box-shadow: var(--elev-float);
  display: inline-flex; align-items: center; justify-content: center;
  transition: transform var(--dur-1) var(--ease-standard),
              box-shadow var(--dur-2) var(--ease-standard),
              background-color var(--dur-2) var(--ease-standard);
}
.ds-fab:hover { background: #eef3fb; box-shadow: var(--elev-float-hover); transform: translateY(-1px) scale(1.04); }
.ds-fab:active { transform: scale(0.94); }

/* --- 原型② アイコンボタン（閉じる/トグル）── 角丸・押し心地を正規化 --- */
.desktop-toggle-btn,
.desktop-close-btn,
.mobile-close-btn,
.welcome-close,
.diag-hero-close,
.share-modal-close,
.bottom-sheet-close,
.settings-drawer-close,
.ds-icon-btn {
  border-radius: var(--r-sm) !important;
  transition: background-color var(--dur-2) var(--ease-standard),
              color var(--dur-2) var(--ease-standard),
              transform var(--dur-1) var(--ease-standard) !important;
}
.desktop-toggle-btn:active,
.desktop-close-btn:active,
.mobile-close-btn:active,
.welcome-close:active,
.diag-hero-close:active,
.share-modal-close:active,
.bottom-sheet-close:active,
.settings-drawer-close:active,
.ds-icon-btn:active { transform: scale(0.92) !important; }

/* --- 原型③ チップ／オプション（選択肢）── 角丸と押し心地を統一 --- */
.basemap-btn,
.preset-btn,
.prop-type-btn,
.cat-btn {
  border-radius: var(--r-md) !important;  /* インライン10pxの種別ボタンも揃える */
}
.opacity-preset-btn { border-radius: var(--r-pill) !important; }
.basemap-btn:active,
.preset-btn:active,
.prop-type-btn:active,
.cat-btn:active,
.opacity-preset-btn:active { transform: scale(0.97) !important; }

.ds-chip {
  display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
  min-height: 32px; padding: 0 12px; font-family: inherit; font-size: var(--fs-sm);
  border-radius: var(--r-pill); border: 1px solid var(--ui-border);
  background: var(--ui-bg-subtle); color: var(--ui-text);
  transition: background-color var(--dur-2) var(--ease-standard),
              transform var(--dur-1) var(--ease-standard);
}
.ds-chip:active { transform: scale(0.96); }
.ds-chip[aria-pressed="true"], .ds-chip.is-active {
  background: var(--ui-primary); color: #fff; border-color: var(--ui-primary);
}

/* --- 原型④ 標準ボタン（テキスト主体）── 高さ・角丸・字面を統一 --- */
.btn,
.area-btn,
.diag-btn,
.welcome-btn-next,
.welcome-btn-start,
.search-box .search-btn,
.ds-btn {
  min-height: 40px;
  border-radius: var(--r-sm) !important;
  font-weight: 700;
}
.ds-btn {
  padding: 0 16px; border: none; cursor: pointer; font-family: inherit;
  display: inline-flex; align-items: center; justify-content: center;
  transition: transform var(--dur-1) var(--ease-standard),
              box-shadow var(--dur-2) var(--ease-standard),
              background-color var(--dur-2) var(--ease-standard);
}
.ds-btn--primary { background: var(--ui-primary); color: #fff; }
.ds-btn--primary:hover { background: var(--ui-primary-hover); }
.ds-btn--ghost { background: transparent; color: var(--ui-primary); box-shadow: inset 0 0 0 1.5px var(--ui-border); }
.ds-btn--ghost:hover { background: var(--ui-bg-subtle); }
.ds-btn--danger { background: var(--ui-danger); color: #fff; }
.ds-btn:active { transform: scale(0.97); }

/* reduced-motion: 4分類のユーティリティ/正規化も尊重 */
@media (prefers-reduced-motion: reduce) {
  .ds-fab, .ds-icon-btn, .ds-btn, .ds-chip,
  .desktop-toggle-btn, .desktop-close-btn, .welcome-close, .diag-hero-close,
  .share-modal-close, .bottom-sheet-close, .settings-drawer-close,
  .basemap-btn, .preset-btn, .prop-type-btn, .cat-btn, .opacity-preset-btn {
    transition-duration: 0.01ms !important;
  }
}

/* ============================================================================
   10. 常設UIの引き算 ── 浮遊コントロールを右クラスタへ集約
   ----------------------------------------------------------------------------
   使い方ガイドを「目立つピル（左上）」から「右クラスタの ? FAB」へ。
   design-system.js が #mapActionBtns へ移設し .ds-help-fab を付与する。
   ※ JSが走らない環境では従来の左上ピルのまま（フォールバック）。
   ============================================================================ */
.tutorial-start-btn.ds-help-fab {
  position: static !important;   /* fixed配置を解除し、クラスタのflowに乗せる */
  top: auto !important; left: auto !important; right: auto !important; bottom: auto !important;
  width: 44px !important; height: 44px !important;
  padding: 0 !important; gap: 0 !important;
  border-radius: var(--r-full) !important;
  background: #fff !important; color: var(--ui-primary) !important;
  box-shadow: var(--elev-float) !important;
}
.tutorial-start-btn.ds-help-fab span[data-hm-text] { display: none !important; }
.tutorial-start-btn.ds-help-fab span[aria-hidden] {
  font-size: 0 !important;        /* 万一SVG差し替え前でも絵文字を抑制 */
  display: inline-flex; align-items: center; justify-content: center;
}
.tutorial-start-btn.ds-help-fab:hover {
  background: #eef3fb !important;
  box-shadow: var(--elev-float-hover) !important;
  transform: translateY(-1px) scale(1.04) !important;
}
.tutorial-start-btn.ds-help-fab:active { transform: scale(0.94) !important; }

/* ============================================================================
   11. 意味のあるモーション ── 「どこから出たか」「受理されたか」を伝える
   ----------------------------------------------------------------------------
   既存のモーダル群（ウェルカム/診断/シェア）は既にスケールイン等を持つため尊重し、
   未対応だった3か所に、共通トークン（--dur/--ease）で出現アニメを追加する。
   いずれも「追加型」で既存トランジションと競合しない。
   ============================================================================ */

/* (a) Leafletポップアップ：クリックした地点から立ち上がる（出現元＝その地点）
       位置決めは親 .leaflet-popup が担うため、内側wrapperのみアニメ＝安全 */
@keyframes dsPopupIn {
  from { opacity: 0; transform: translateY(6px) scale(0.94); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.leaflet-popup-content-wrapper {
  transform-origin: 50% 100%;            /* 下端（吹き出しの先＝地点側）から拡大 */
  animation: dsPopupIn var(--dur-2) var(--ease-decel);
}

/* (b) 表示中チップ：レイヤーON時にポップインして「受理」を伝える */
@keyframes dsChipIn {
  from { opacity: 0; transform: scale(0.82); }
  to   { opacity: 1; transform: scale(1); }
}
.active-chip {
  animation: dsChipIn var(--dur-2) var(--ease-decel);
}

/* (c) 検索候補：検索ボックスの直下から開く（出現元＝検索窓） */
@keyframes dsDropIn {
  from { opacity: 0; transform: translateY(-6px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.header-search-results.open {
  transform-origin: 50% 0;
  animation: dsDropIn var(--dur-2) var(--ease-decel);
}

/* reduced-motion: 出現アニメは無効化（既存方針を踏襲） */
@media (prefers-reduced-motion: reduce) {
  .leaflet-popup-content-wrapper,
  .active-chip,
  .header-search-results.open { animation: none !important; }
}

/* ============================================================================
   12. 無彩色UI ＋「色は意味だけ」── ブランド配色の刷新
   ----------------------------------------------------------------------------
   UIは白〜グレー＋ダークスレートに統一。強い色は次の2系統だけに絞る：
     ・リスクの色（地図データ：浸水青/土砂赤/がけ橙/公式紫）＝"意味"
     ・アクセント #3CB1FF（操作色：相談CTA・主要操作・リンク・フォーカス・選択中）
   旧ネイビー(--ui-primary)はニュートラルなダークスレート #2A363B へ置換し、
   見出し・アイコン・ダーク面を"脱・青"。phase①のトークン化により大半は自動追従。
   ============================================================================ */
:root {
  --ui-primary: #2A363B;        /* 旧ネイビー → ニュートラルダーク（見出し/アイコン/ダーク面） */
  --ui-primary-hover: #3b4a52;
  --ui-accent: #3CB1FF;         /* アクセント＝唯一の操作色 */
  --ui-accent-hover: #1f97e6;
  --ui-header: #2A363B;
  --focus-ring: #3CB1FF;
}

/* ── ダーク面：ヘッダー・モバイルタブバー ── */
.app-header { background: #2A363B !important; }
.mobile-tab-bar { background: #2A363B !important; }

/* ── フォーカス可視化＝アクセント ── */
:focus-visible,
button:focus-visible, a:focus-visible, input:focus-visible, [tabindex]:focus-visible {
  outline-color: var(--ui-accent) !important;
}

/* ── 主要操作ボタン＝アクセント青（検索・診断・主要保存） ── */
.btn-primary,
.search-box .search-btn,
.diag-search-btn,
.diag-btn-primary {
  background: var(--ui-accent) !important;
  color: #fff !important;
}
.btn-primary:hover,
.search-box .search-btn:hover,
.diag-search-btn:hover,
.diag-btn-primary:hover {
  background: var(--ui-accent-hover) !important;
}

/* ── 相談CTA＝唯一の常設アクション色（緑→アクセント青） ── */
.floating-cta {
  background: linear-gradient(135deg, var(--ui-accent), var(--ui-accent-hover)) !important;
  box-shadow: 0 4px 16px rgba(60,177,255,0.40) !important;
}
.floating-cta:hover {
  box-shadow: 0 6px 20px rgba(60,177,255,0.50) !important;
}

/* ============================================================================
   13. Cream ＋ Light Blue で柔らかく ── 無彩色をやわらげる
   ----------------------------------------------------------------------------
   ・Cream #FCFFF7 … ページ背景と浮く面（パネル/凡例/ポップアップ/モーダル）を
     "柔らかい白"に。純白の硬さを抜く。
   ・Light Blue #D9E9F4 … hover・選択中の淡い操作フィードバック（アクセントの淡色版）。
   ダーク面（ヘッダー/タブバー）とリスクの色は据え置き。
   ============================================================================ */
:root {
  --ui-surface: #EFF6EC;       /* 主サーフェス：ライトグリーン（カード/パネル/ポップアップ/モーダル） */
  --ui-bg-subtle: #FCFFF7;     /* 小面の下地：クリーム */
  --ui-tint: #D9E9F4;          /* ライトブルー：hover/選択の淡色 */
}

/* 下地：ページ背景をクリームに */
body { background: var(--ui-surface); }

/* 浮く面（パネル・凡例・ポップアップ・モーダル）をクリームの柔らかい白に */
.panel, .info-panel, .layer-panel, .settings-drawer,
.legend, .mini-legend,
.header-search-results, .search-results,
.leaflet-popup-content-wrapper, .leaflet-popup-tip,
.welcome-card, .diag-hero-card, .share-modal-card, .bottom-sheet,
.add-photo-panel, .add-property-panel, .export-panel {
  background: var(--ui-surface) !important;
}

/* hover ＝ ライトブルーの淡色（操作の手応え） */
.map-action-btn:hover,
.tutorial-start-btn.ds-help-fab:hover,
.leaflet-control-zoom a:hover,
.header-search-results .hsr-item:hover {
  background: var(--ui-tint) !important;
}

/* 選択中 ＝ ライトブルー塗り ＋ アクセント枠（柔らかい選択表現） */
.basemap-btn.active,
.preset-btn.preset-active {
  background: var(--ui-tint) !important;
  border-color: var(--ui-accent) !important;
}

/* 診断ヒーローのアイブロウもアクセントの淡色に */
.diag-hero-eyebrow {
  background: var(--ui-tint) !important;
  color: var(--ui-primary) !important;
}

/* ============================================================================
   14. #EFF6EC（やわらかいライトグリーン）を二次サーフェスに ── 柔らかさ強化
   ----------------------------------------------------------------------------
   クリーム(#FCFFF7)を主サーフェス（カード/パネル）に残しつつ、
   #EFF6EC を"下地・インセット・選択肢の通常状態・入力欄・特徴カード"へ広く使い、
   クリームとの二層で柔らかな奥行きを出す。ダーク面・リスク色・アクセントは据え置き。
   （色＝パレットの Light Green #EFF6EC）
   ============================================================================ */
:root {
  --ui-surface-2: #FCFFF7;   /* 二次面：クリーム（下地/選択肢rest/特徴カード/入力欄/インセット） */
  --ui-bg-subtle: #FCFFF7;   /* 小面の下地：クリーム */
}

/* 下地：ページ背景をライトグリーンに（カードのクリームが軽く浮く） */
body { background: var(--ui-surface-2); }

/* 二次サーフェス：選択肢の通常状態・特徴カード・入力欄・インセット */
.basemap-btn,
.preset-btn,
.diag-feature,
.diag-search-input,
#searchInput,
.layer-group-body {
  background: var(--ui-surface-2) !important;
}

/* 選択中は引き続きライトブルー（Section 13 が優先・特異度で上回る） */

/* ============================================================================
   15. リスクポップアップの色見直し ── 新配色との整合
   ----------------------------------------------------------------------------
   ・相談CTA(.rp-cta-primary) を 緑→アクセント青 に統一（floating-cta と揃える）。
   ・「問題なし/区域外」の緑バッジ(.rp-level-low / .rp-hz-all)に枠線を付与し、
     主面（ライトグリーン）でも沈まないよう視認性を確保。
   ・注意/危険バッジ(.rp-summary-mid/high, .rp-level-high など)はリスクの"意味の色"
     なので据え置き（枠線付きで主面でも際立つ）。
   ============================================================================ */
.rp-cta-primary {
  background: linear-gradient(135deg, var(--ui-accent), var(--ui-accent-hover)) !important;
  box-shadow: 0 2px 8px rgba(60,177,255,0.25) !important;
}
.rp-cta-primary:hover {
  background: linear-gradient(135deg, var(--ui-accent-hover), #1580c8) !important;
  box-shadow: 0 4px 12px rgba(60,177,255,0.30) !important;
}

/* 「問題なし/区域外」緑バッジ：主面(緑)でも視認できるよう枠線 */
.rp-level-low { border: 1px solid var(--risk-safe-border) !important; }
.rp-hz-all { border: 1px solid var(--risk-safe-active-border); }

/* ============================================================================
   16. リスク右サイドパネル（デスクトップ）── tochi-map と同じ操作感へ
   ----------------------------------------------------------------------------
   デスクトップで地点クリック時、Leafletポップアップの代わりに右からパネルを表示。
   buildRiskPopup() の .risk-popup HTML をそのまま流し込む（スタイル流用）。
   開いている間は右の操作群を左へ退避し、常設CTAは隠す（パネル内にCTAあり）。
   モバイルは従来のボトムシートのまま（このパネルは出さない）。
   ============================================================================ */
.risk-side-panel {
  position: fixed; top: 52px; right: 0; bottom: 0;
  width: 380px; max-width: 92vw;
  display: flex; flex-direction: column;
  background: #fff;
  box-shadow: var(--shadow-high);
  z-index: 1150;
  overflow: hidden;
  transform: translateX(100%);
  transition: transform var(--dur-4) var(--ease-standard);
}
.risk-side-panel.open { transform: translateX(0); }
.risk-side-panel-header {
  flex-shrink: 0;
  min-height: 60px;
  padding: 8px 10px 8px 18px;
  display: flex;
  align-items: center;
  gap: 12px;
  border-bottom: 1px solid var(--ui-border, #e2e8f0);
  background: rgba(255,255,255,0.96);
}
.risk-side-panel-header h2 {
  flex: 1;
  min-width: 0;
  margin: 0;
  font-size: 18px;
  line-height: 1.3;
  color: var(--ui-primary, #1e293b);
}
.risk-side-panel-close {
  flex-shrink: 0;
  margin: 0; width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  border: none; border-radius: var(--r-full); cursor: pointer;
  background: rgba(0,0,0,0.06); color: var(--ui-text-sub);
  transition: background var(--dur-2) var(--ease-standard), transform var(--dur-1) var(--ease-standard);
}
.risk-side-panel-close:hover { background: rgba(0,0,0,0.12); color: var(--ui-text); }
.risk-side-panel-close:active { transform: scale(0.92); }
.risk-side-panel-body {
  flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch;
  padding: 12px 16px 24px;
}
.risk-side-panel .risk-popup { max-width: 100% !important; }
.risk-side-panel .risk-popup .rp-title { display: none !important; }

/* 取得中・未取得を安全色で見せない中立サマリー */
.rp-summary-pending {
  background: #f1f5f9 !important;
  color: #334155 !important;
  border: 1.5px solid #cbd5e1 !important;
}
.rp-summary-pending .rp-summary-icon {
  color: #64748b;
  font-family: sans-serif;
}

/* 開いている間：右の操作群を左へ退避（パネルの左に並ぶ）／常設CTAは隠す */
body.risk-panel-open #mapActionBtns,
body.risk-panel-open .leaflet-control-zoom {
  transform: translateX(-392px) !important;
  transition: transform var(--dur-4) var(--ease-standard);
}
body.risk-panel-open .floating-cta { opacity: 0 !important; pointer-events: none !important; }

/* クリック地点マーカーの淡いパルス（出現元＝その地点） */
.risk-click-marker { animation: rcmPulse 1.6s ease-in-out infinite; }
@keyframes rcmPulse { 0%,100% { opacity: 1; } 50% { opacity: 0.55; } }

/* モバイルは従来のボトムシートを使うためパネルは出さない */
@media (max-width: 768px) {
  .risk-side-panel { display: none !important; }
  body.risk-panel-open #mapActionBtns,
  body.risk-panel-open .leaflet-control-zoom { transform: none !important; }
  body.risk-panel-open .floating-cta { opacity: 1 !important; pointer-events: auto !important; }
}
@media (prefers-reduced-motion: reduce) {
  .risk-click-marker { animation: none !important; }
}

/* ============================================================================
   17. 浸水深バッジの段階化 ── 浅い層(0.5m/0.3m未満)を黄の"軽い注意"に
   ----------------------------------------------------------------------------
   公式タイル自体の色（黄→橙→赤→紫）にバッジを合わせる。最も浅い「黄」タイルを
   赤/橙ではなく黄の軽い注意で示し、深さ＝危険度を直感的に伝える。
   高(赤)・中(橙)・安全(緑)の中間として、薄黄＋濃琥珀文字＋枠線で表現。
   ============================================================================ */
.rp-level-caution {
  background: var(--risk-warn-bg) !important;  /* 淡い黄 #fef3c7 */
  color: var(--risk-warn) !important;          /* 濃い琥珀 #92400e */
  font-weight: 700 !important;
  border-radius: 6px !important;
  border: 1px solid #fcd34d !important;        /* 琥珀の枠（緑主面でも視認） */
}

/* ============================================================================
   18. 物件カードの統一（Airbnb式）── 写真→種別→価格→詳細→リスク→CTA
   ----------------------------------------------------------------------------
   ・価格は赤(警戒色)→太字の濃色へ（価格は"情報"であって"危険"ではない）。
   ・問い合わせCTAをアクセント青の塗りに統一（他CTAと同一言語）。
   ・写真と角丸をトークンに揃える。
   ============================================================================ */
/* 価格＝太字・濃色（脱・赤） */
.property-popup .prop-price,
.property-popup .prop-peek-price {
  color: var(--ui-primary) !important;
  font-weight: 800 !important;
}
.property-popup .prop-price { font-size: 16px !important; }
.property-popup .prop-peek-price { font-size: 15px !important; }

/* 物件タイトル（インライン #1a3a6a を濃スレートへ寄せる） */
.property-popup .prop-info-col > div[style*="color:#1a3a6a"],
.property-popup .prop-peek-title { color: var(--ui-primary) !important; }

/* 問い合わせCTA＝アクセント青（塗り・統一） */
.property-popup .prop-cta-contact {
  background: var(--ui-accent) !important;
  color: #fff !important;
  border: none !important;
  border-radius: var(--r-sm) !important;
  font-weight: 700 !important;
}
.property-popup .prop-cta-contact:hover {
  background: var(--ui-accent-hover) !important;
  color: #fff !important;
  border: none !important;
}

/* 写真を大きく・角丸統一／物件ページリンクの角丸 */
.property-popup img { border-radius: var(--r-md) !important; }
.property-popup .prop-detail-link { border-radius: var(--r-sm) !important; }

/* 種別バッジ：彩度を抑えた淡いチップ（緑/青のベタ→淡色＋濃文字でAirbnb風に） */
.property-popup .prop-type.land {
  background: var(--risk-safe-bg) !important; color: var(--risk-safe) !important;
}
.property-popup .prop-type.house {
  background: var(--ui-tint) !important; color: var(--ui-primary) !important;
}

/* ============================================================================
   19. 地図×リスト連動 ── 一覧hover↔ピン強調（Airbnbのsplit view相当）
   ----------------------------------------------------------------------------
   ・一覧カードをhover → 該当マーカーを拡大＋影＋最前面（prop-pin-hot）。
   ・マーカーをhover → 該当一覧カードをアクセント枠で強調（prop-list-card-hot）。
   ・物件ピンのクリックは右パネルへ（app.js側で統一）。
   ============================================================================ */
.prop-card-marker .prop-card-body {
  transition: transform var(--dur-2) var(--ease-standard),
              box-shadow var(--dur-2) var(--ease-standard);
}
.prop-pin-hot { z-index: 1200 !important; }
.prop-pin-hot .prop-card-body {
  transform: scale(1.18) translateY(-2px);
  box-shadow: 0 8px 20px rgba(0,0,0,0.38) !important;
}
.prop-list-card-hot {
  background: var(--ui-tint) !important;
  outline: 2px solid var(--ui-accent);
  outline-offset: -2px;
}
@media (prefers-reduced-motion: reduce) {
  .prop-pin-hot .prop-card-body { transform: none; }
}

/* ============================================================================
   20. 信頼の前面化 ── 独自/公式の区別ラベル＋出典・更新日（常時表示）
   ----------------------------------------------------------------------------
   ・独自解析(参考)＝中立グレーのバッジ／公式＝青(国交省)のバッジで一目で区別。
   ・出典・更新日・80mm想定の免責を「詳細」内の折りたたみから常時表示へ前面化。
   ・断定を避け、公式・行政の併用を促す（御社の正確性方針に整合）。
   ============================================================================ */
.rp-origin-label { display: flex; align-items: center; gap: 8px; margin: 10px 0 4px; }
.rp-origin-badge {
  font-size: 10px; font-weight: 800; letter-spacing: .3px;
  padding: 2px 8px; border-radius: var(--r-pill); flex-shrink: 0;
}
.rp-origin-badge-own { background: var(--ui-bg-muted); color: var(--ui-text-sub); }       /* 参考＝中立 */
.rp-origin-badge-official {
  background: var(--risk-info-bg); color: var(--risk-info);                                /* 公式＝青 */
  font-size: 9px; padding: 1px 6px; vertical-align: middle;
}
.rp-origin-note { font-size: 11px; color: var(--ui-text-muted); }

.rp-trust {
  margin-top: 10px; padding: 10px 12px;
  background: var(--ui-bg-subtle); border: 1px solid var(--ui-border);
  border-radius: var(--r-md);
}
.rp-trust-note { font-size: 11.5px; line-height: 1.6; color: var(--ui-text-sub); }
.rp-trust-note b { color: var(--ui-text); }
.rp-trust-sources { margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--ui-border); }
.rp-trust .rp-source-line { font-size: 10.5px; color: var(--ui-text-muted); line-height: 1.8; }
.rp-trust .rp-source-label {
  display: inline-block; min-width: 28px; text-align: center;
  font-weight: 800; padding: 0 5px; border-radius: 4px; margin-right: 5px;
}
.rp-source-original { background: var(--ui-bg-muted); color: var(--ui-text-sub); }
.rp-source-official { background: var(--risk-info-bg); color: var(--risk-info); }
.rp-trust-scenario { font-size: 10px; color: var(--ui-text-muted); margin-top: 5px; line-height: 1.6; }
.rp-trust a { color: var(--ui-accent); }

/* ============================================================================
   21. 配色監査対応 — Phase 1（可読性/WCAG AA）＋ Phase 2 の確定分
   ----------------------------------------------------------------------------
   tochi-map基準の監査（9件確定）への対応。CTA塗り色（指摘1）は指定色の扱いに
   関わるため別途確認し、ここでは指定色に関わらない確定分のみ適用する。
   ・テキストリンク用の機能ブルー --ui-link を新設（#3CB1FF は非テキスト用に温存）
   ・補助テキスト/タブOFF/バッジのコントラストを AA へ
   ・浸水タブ ON をデータ色へ戻す（UIアクセントの流入を解消）
   ・独自/公式チップの枠を中立ヘアラインに（区別はソースドットが担う）
   ============================================================================ */
:root {
  --ui-link: #1769c4;        /* テキストリンク（#EFF6EC上≈5.0 / #FCFFF7上≈5.4:1・AA） */
  --ui-text-muted: #666;     /* 旧 #888 → 主面 5.2:1（AA）。出典/補助テキスト全般に波及 */
}

/* リンク文字＝機能ブルー（アクセント青の直用をやめAA化） */
.rp-trust a,
.rp-trust .rp-source-line a { color: var(--ui-link) !important; }

/* モバイルタブ OFF 文字の底上げ（ON は白を再指定して維持） */
.mobile-tab-bar .tab-item { color: rgba(255,255,255,0.62) !important; }
.mobile-tab-bar .tab-item .tab-state { color: rgba(255,255,255,0.5) !important; }
.mobile-tab-bar .tab-item.tab-on { color: #fff !important; }
.mobile-tab-bar .tab-item.tab-on .tab-state { color: rgba(255,255,255,0.92) !important; }

/* 「解析中/未判定」バッジのコントラスト（2.34:1 → ≈7:1） */
.rp-value.rp-level-na { background: #eef2f6 !important; color: #475569 !important; }

/* 削除ボタンの赤を濃色化（データの危険赤 --ui-danger は温存、UIボタンのみ） */
.btn-danger { background: #c0392b !important; }

/* 浸水タブ ON をデータ色へ（UIアクセント #3CB1FF の流入を解消） */
#tab_flood.tab-on { background: linear-gradient(135deg, #2980b9, #3498db) !important; }

/* 独自/公式チップの枠は中立ヘアライン（独自=琥珀ドット/公式=青ドットで区別は維持） */
.active-chip-original,
.active-chip-official { border-color: rgba(42,54,59,0.16) !important; }

/* ============================================================================
   22. 監査対応 Phase 2 — CTA機能ブルー化(指摘1・A案)／旧CTA／hover統一／継ぎ目
   ----------------------------------------------------------------------------
   ・全CTAの塗りを機能ブルー #1769c4（白文字 5.45:1・AA）へ。#3CB1FF は
     フォーカス枠・選択・ドット等の非テキスト用に温存。リンクと同一の青に集約。
   ・hover の淡青を --ui-tint(#D9E9F4) の1色へ統一（#e8f0fe/#dbeafe を掃除）。
   ・緑コンテナ内に残る白面を面色へ揃え「継ぎ目」を解消。
   ============================================================================ */
:root {
  --ui-cta: #1769c4;          /* CTA塗り（＝リンクと同一の機能ブルー） */
  --ui-cta-hover: #12558f;
}

/* 塗りCTA（テキスト付きボタン）を機能ブルーへ */
.btn-primary,
.search-box .search-btn,
.diag-search-btn,
.diag-btn-primary,
.prop-cta-contact {
  background: var(--ui-cta) !important;
  color: #fff !important;
}
.btn-primary:hover,
.search-box .search-btn:hover,
.diag-search-btn:hover,
.diag-btn-primary:hover,
.prop-cta-contact:hover { background: var(--ui-cta-hover) !important; color: #fff !important; }

/* グラデCTA（相談・リスクCTA） */
.floating-cta {
  background: linear-gradient(135deg, var(--ui-cta), var(--ui-cta-hover)) !important;
  box-shadow: 0 4px 16px rgba(23,105,196,0.35) !important;
}
.floating-cta:hover { box-shadow: 0 6px 20px rgba(23,105,196,0.45) !important; }
.rp-cta-primary {
  background: linear-gradient(135deg, var(--ui-cta), var(--ui-cta-hover)) !important;
  box-shadow: 0 2px 8px rgba(23,105,196,0.25) !important;
}
.rp-cta-primary:hover { background: linear-gradient(135deg, var(--ui-cta-hover), #0f4a80) !important; }

/* welcome「はじめる」緑CTA → 機能ブルー（指摘6） */
.welcome-btn-start {
  background: var(--ui-cta) !important; color: #fff !important;
  box-shadow: 0 3px 14px rgba(23,105,196,0.30) !important;
}

/* hover の淡青を1色に統一（指摘4） */
.header-search-results .hsr-item:hover,
.basemap-btn:hover,
.share-modal-option:hover,
.search-result-item:hover,
.diag-result-item:hover,
.layer-group.cat-analysis .layer-group-title:hover { background: var(--ui-tint) !important; }

/* 緑コンテナ内の白の継ぎ目を面色へ（指摘5・短期） */
.settings-drawer-tabs,
.settings-drawer-body { background: var(--ui-surface) !important; }
.settings-tab:hover { background: var(--ui-tint) !important; }
.settings-tab-active { background: var(--ui-surface-2) !important; }
.diag-search-results { background: var(--ui-surface) !important; }
.popup-scroll-fade {
  background: linear-gradient(to bottom, rgba(239,246,236,0), rgba(239,246,236,0.95)) !important;
}

/* ============================================================================
   23. サーフェス役割スワップ（tochi-map流）— 地の面=Cream / 内側カード=Green
   ----------------------------------------------------------------------------
   従来: BASE(パネル/ポップアップ/モーダル/シート)=Light Green #EFF6EC、
         内側インセット=Cream #FCFFF7。
   変更: BASE=Cream #FCFFF7、INNER(カード/インセット/チップ/入力/値セル)=Green #EFF6EC。
   実装: サーフェスは全てトークン経由のため、--ui-surface と --ui-surface-2 の
         2値を入れ替えるだけで役割が反転する。加えて (1) body の二重定義
         (§13 L480=surface / §14 L527=surface-2、後者が実効) を BASE へ一本化、
         (2) .popup-scroll-fade の地色直書きをクリームへ追従、
         (3) .rp-trust インセットを INNER(緑) にして二層の奥行きを維持。
   ※ #EFF6EC/#FCFFF7 のリテラル実使用は他ファイル(app.js等)に無く、本スワップは
     design-system.css 単独で完結する（調査ワークフローで確認済み）。
   ============================================================================ */
:root {
  --ui-surface:   #FCFFF7;   /* BASE：地の面（body/パネル/ポップアップ/モーダル/シート） */
  --ui-surface-2: #EFF6EC;   /* INNER：内側カード/インセット/チップ/入力/値セル */
}
/* body の実効背景を BASE(クリーム) へ一本化（§14 L527 の surface-2 参照で
   スワップ後に body が緑化するのを防ぐ） */
body { background: var(--ui-surface) !important; }

/* ポップアップ/パネル下端のスクロールフェードを地の面色(クリーム)へ追従 */
.popup-scroll-fade {
  background: linear-gradient(to bottom, rgba(252,255,247,0), rgba(252,255,247,0.95)) !important;
}
/* リスクパネル内の信頼インセット(.rp-trust)は INNER(緑) にして二層の奥行きを維持 */
.rp-trust { background: var(--ui-surface-2) !important; }

/* ============================================================================
   24. ヘッダーのライト化 — ダーク #2A363B → Cream #FCFFF7 ＋ インク文字 #2A363B
   ----------------------------------------------------------------------------
   ヘッダー背景は §16(L432) で #2A363B にハードコードされているため後段で上書き。
   ヘッダー上の全要素(タイトル/サブ/検索input/placeholder/検索アイコン/ナビボタン/
   ロゴ枠)の色を反転。モバイルの patches.css 上書き(背景 L441 / 検索input L2130,2134)
   も !important で網羅する。#2A363B on #FCFFF7 ≈ 12:1（AAA）。
   モバイル下部タブバー(.mobile-tab-bar)は独立バーのためダーク据え置き。
   ============================================================================ */
.app-header {
  background: var(--ui-surface) !important;        /* = Cream #FCFFF7 */
  border-bottom: 1px solid rgba(42,54,59,0.10) !important;
  box-shadow: 0 1px 4px rgba(42,54,59,0.06) !important;
}
@media (max-width: 768px) {
  .app-header { background: var(--ui-surface) !important; }  /* patches.css:441 を上書き */
}

/* タイトル / サブタイトル */
.app-header-name { color: var(--ui-primary) !important; }        /* #2A363B */
.app-header-sub  { color: rgba(42,54,59,0.72) !important; }

/* ロゴ枠：クリーム地に埋没しないよう薄い境界 */
.app-header-logo { border: 1px solid rgba(42,54,59,0.10) !important; }

/* 検索input：白フィールド＋インク文字 */
.app-header-search input {
  color: var(--ui-primary) !important;
  background: #ffffff !important;
  border: 1px solid rgba(42,54,59,0.16) !important;
}
.app-header-search input::placeholder { color: rgba(42,54,59,0.5) !important; }
.app-header-search input:focus { border-color: var(--ui-link) !important; }

/* 検索アイコンボタン */
.app-header-search button { color: rgba(42,54,59,0.65) !important; }
.app-header-search button:hover {
  color: var(--ui-primary) !important;
  background: rgba(42,54,59,0.08) !important;
}

/* ナビボタン「地価・人口マップ →」（通常/visited/hover 全て反転） */
.app-header-crosslink,
.app-header-crosslink:visited,
.app-header-crosslink:hover { color: var(--ui-primary) !important; }
.app-header-crosslink {
  background: rgba(42,54,59,0.06) !important;
  border: 1px solid rgba(42,54,59,0.14) !important;
}
.app-header-crosslink:hover { background: rgba(42,54,59,0.12) !important; }

/* モバイル：patches.css の検索input再指定(半透明白/placeholder)を上書き */
@media (max-width: 768px) {
  .app-header-search input {
    background: #ffffff !important;
    border: 1px solid rgba(42,54,59,0.16) !important;
    color: var(--ui-primary) !important;
  }
  .app-header-search input::placeholder { color: rgba(42,54,59,0.5) !important; }
}

/* ============================================================================
   25. 微修正 — リスクパネル座標表示のコントラスト
   ライトサーフェス上で #bbb(≈1.9:1)は不可視。muted(#666, クリーム上≈5.2:1・AA)へ。
   patches.css:319 の `.risk-popup .rp-coord{color:#bbb!important}`(詳細度0,2,0)を
   上回るため、同一詳細度＋後段で上書きする。
   ============================================================================ */
.risk-popup .rp-coord { color: var(--ui-text-muted) !important; }

/* ============================================================================
   27. リスクパネル配色の集約 — 「色は"注意(重大度)"と"行動(青)"だけ」
   ----------------------------------------------------------------------------
   目的: 琥珀/赤/緑/青/灰の5系統が同時に主張し要点が埋もれる問題を解消。
   ・総合判定(rp-summary-*)＝重大度を示す唯一の見出し色。据え置き(赤/橙/緑グラデ)。
   ・個別リスク(rp-level-high/mid)＝patches.cssのベタ塗り(白文字・loud)→淡いtintへ。
     見出しより前に出さず「見出しが主役／項目は補足」の階層に。
   ・安全・問題なし系(rp-safe-badge/rp-hz-safe/rp-hz-all/rp-level-low)＝緑を撤去し無彩色。
     （問題ないものを色で強調しない）
   ・出典・公式(国土交通省: rp-origin-badge-official/rp-source-official)＝青を撤去し無彩色。
   ・青は CTA(rp-cta-*) とリンクのみに限定（rp-cta-contactの橙も青へ統一）。
   無彩色は rp-level-na と同じ #eef2f6/#475569 に統一。
   ============================================================================ */

/* 個別リスクバッジ: ベタ塗り→淡tint（重大度は保持しつつ見出しを主役に） */
.rp-level-high {
  background: #ffe4e4 !important; color: #b3261e !important;
  border: 1px solid #f0b4b4 !important;
}
.rp-level-mid {
  background: #fff1de !important; color: #9a3412 !important;
  border: 1px solid #f0cd95 !important;
}

/* 安全・問題なし: 緑 → 無彩色 */
.rp-safe-badge,
.rp-safe-details[open] .rp-safe-badge,
.risk-popup .rp-safe-badge {
  background: #eef2f6 !important; color: #475569 !important;
  border-color: rgba(42,54,59,0.14) !important;
}
.rp-hz-status.rp-hz-safe,
.rp-hz-all,
.rp-level-low {
  background: #eef2f6 !important; color: #475569 !important;
  border: 1px solid rgba(42,54,59,0.14) !important;
}

/* 出典・公式バッジ(国土交通省): 青 → 無彩色 */
.rp-origin-badge-official,
.rp-source-official {
  background: #eef2f6 !important; color: #475569 !important;
}

/* 青は「行動」に集約: リンクを機能ブルーへ統一 */
.risk-popup .rp-turn-on,
.rp-source-line a { color: var(--ui-link) !important; }

/* 橙CTA(rp-cta-contact)も行動色=青へ統一 */
.risk-popup .rp-cta-contact {
  background: linear-gradient(135deg, var(--ui-cta), var(--ui-cta-hover)) !important;
}

/* 一括ONの装飾的な緑/青を無彩色に */
.risk-popup .rp-bulk-on,
.risk-popup .rp-bulk-on.rp-all-on {
  background: #f2f4f6 !important; color: var(--ui-primary) !important;
  border: 1px solid rgba(42,54,59,0.16) !important;
}

/* タイトル下の淡青ラインを中立ヘアラインへ */
.risk-popup .rp-title { border-bottom-color: var(--ui-border, #e0e0e0) !important; }

/* ============================================================================
   28. ポップアップ文字の階層 — tochi-map のタイポ基準に合わせて拡大・整理
   ----------------------------------------------------------------------------
   参考: tochi-map(izuip.com/tochi-map) の leaflet-popup。ただし tochi-map は
   サイト全体がダークテーマ(#1a1a2e/teal)のため、色はライト配色へ翻訳し
   「サイズ階層・行間・ラベル(muted)/値・タイトル(強)」の関係のみ踏襲。
   現状PCは タイトル13/ラベル11/値11/CTAサブ9px と小さく階層が弱いため引き上げ、
   PC・モバイルで統一する。
     タイトル16 / 総合判定16 / 値13 / ラベル13(muted) / CTA主14・サブ11 / 行間1.6
   ============================================================================ */
.risk-popup { font-size: 13px; line-height: 1.6; }
.risk-popup .rp-title { font-size: 16px !important; }
.risk-popup .rp-label { font-size: 13px !important; color: #6b7280 !important; }
.risk-popup .rp-value { font-size: 13px !important; }
.rp-summary-text  { font-size: 16px !important; }
.rp-summary-count { font-size: 12px !important; }
.risk-popup .rp-advice { font-size: 13px !important; line-height: 1.6 !important; }
.risk-popup .rp-note   { font-size: 12px !important; line-height: 1.6 !important; }
.risk-popup .rp-coord  { font-size: 11px !important; }
.risk-popup .rp-cta-text strong { font-size: 14px !important; }
.risk-popup .rp-cta-sub { font-size: 11px !important; }
.risk-popup .rp-row { padding: 6px 0 !important; }

/* ============================================================================
   29. Airbnb基準の全面適用 — トークン整備／意味色を"パネル外"へ2系統化／中太化
   ----------------------------------------------------------------------------
   ・サイズ/太さトークンを整備（サイズの実値は各ファイルで7段にスナップ済）。
   ・「色は注意(重大度)＋行動(青)だけ」をリスクパネル外へ波及:
     エリアボタン・レイヤー分類色・モバイルタブON・診断(diag)・チップドット。
   ・強調は極太でなく中太(600)。800/900は全廃済(sed)、ここで補助テキストを600へ。
   非破壊オーバーレイ（本ファイルは最終読み込み）。無彩色は #eef2f6/#475569 に統一。
   ============================================================================ */
:root{
  --fs-xs: 12px;                 /* 旧10px → 可読下限12へ引き上げ */
  --fs-md: 16px; --fs-2xl: 24px; --fs-3xl: 32px;  /* 7段スケール補完 */
  --fw-normal: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700;
}

/* エリア移動ボタン：4色ベタ塗り(inline) → 無彩色ピル（!importantでinlineに優先） */
.area-btn {
  background: #eef2f6 !important; color: var(--ui-primary) !important;
  border: 1px solid rgba(42,54,59,0.14) !important;
}
.area-btn:hover { background: var(--ui-tint) !important; color: var(--ui-primary) !important; }

/* レイヤー分類色（左帯/見出し地/カウント）→ 無彩色。区別はラベル文言で足りる */
.layer-group.cat-analysis,
.layer-group.cat-official,
.layer-group.cat-info { border-left-color: var(--ui-border) !important; }
.layer-group.cat-analysis .layer-group-title,
.layer-group.cat-official .layer-group-title,
.layer-group.cat-info .layer-group-title { background: transparent !important; }
.layer-group.cat-analysis .layer-group-title:hover,
.layer-group.cat-official .layer-group-title:hover,
.layer-group.cat-info .layer-group-title:hover { background: var(--ui-tint) !important; }
.cat-analysis .layer-group-count,
.cat-official .layer-group-count,
.cat-info .layer-group-count {
  background: #eef2f6 !important; color: #475569 !important;
}

/* モバイルタブ ON：4カテゴリ×2段グラデ(青/赤/橙/紫) → 行動色1色の塗りに統一 */
#tab_flood.tab-on,
#tab_sediment.tab-on,
#tab_gake.tab-on,
#tab_hazard.tab-on {
  background: var(--ui-cta) !important;   /* #1769c4・白文字は既定 */
}

/* 診断(diag)：独自パレット → リスクパネルと同じ重大度色/無彩色へ整合 */
.diag-verdict-high { background: linear-gradient(180deg, var(--risk-high-grad-from), var(--risk-high-grad-to)) !important; border-color: var(--risk-high-border) !important; }
.diag-verdict-mid  { background: linear-gradient(180deg, var(--risk-mid-grad-from), var(--risk-mid-grad-to)) !important; border-color: var(--risk-mid-border) !important; }
.diag-verdict-safe { background: linear-gradient(180deg, var(--risk-safe-bg), var(--risk-safe-bg-deep)) !important; border-color: var(--risk-safe-border) !important; }
.diag-verdict-out  { background: #eef2f6 !important; border-color: rgba(42,54,59,0.14) !important; }
.diag-row-high { border-left-color: #b3261e !important; background: #ffe4e4 !important; }
.diag-row-mid  { border-left-color: #9a3412 !important; background: #fff1de !important; }
.diag-row-low  { border-left-color: rgba(42,54,59,0.14) !important; background: #eef2f6 !important; }
.diag-row-high .diag-row-pill { color: #b3261e !important; }
.diag-row-mid  .diag-row-pill { color: #9a3412 !important; }
.diag-row-low  .diag-row-pill { color: #475569 !important; }

/* チップのソースドット（独自=琥珀/公式=青の2色）→ 無彩色1色。区別はラベルで */
.active-chip-original .chip-source-dot,
.active-chip-official .chip-source-dot { background: #94a3b8 !important; }

/* 補助テキストの強調を中太(600)へ（極太をやめ、太さで階層を作る） */
.rp-value,
.layer-group-count,
.layer-status,
.stats-badge,
.rp-origin-badge,
.rp-trust .rp-source-label,
.diag-row-pill { font-weight: var(--fw-semibold) !important; }

/* ============================================================
   A1.4: 設定「レイヤー」タブ ― 読まずに使えるリデザイン
   狙い: ①目的プリセットを最上部・主役に ②背景地図を最下部へ降格
         ③個別レイヤーをアイコンチップ化・説明文を非表示（情報密度↓）
   実装: DOMは移動せず CSS order で並べ替え（JSフックを一切壊さない）
   ============================================================ */

/* レイヤータブを縦フレックス化して order で並べ替え */
#settingsTabPanel_layer.settings-tab-panel-active {
  display: flex !important;
  flex-direction: column;
  gap: 14px;
}
#settingsTabPanel_layer > .preset-group { order: -2; margin: 0 !important; }
/* 背景地図（always-open かつ preset でない唯一のグループ）を最下部へ */
#settingsTabPanel_layer > .layer-group.always-open:not(.preset-group) { order: 80; }
#settingsTabPanel_layer > .rl-caveat { order: 0; }

/* --- ① 目的プリセットを主役に（大きく・タップしやすく） --- */
.settings-drawer .preset-group { border-bottom: none !important; padding-bottom: 0 !important; }
.settings-drawer .preset-group .layer-group-title {
  font-size: 13px !important;
  font-weight: var(--fw-bold, 700) !important;
  color: var(--ui-text, #1e293b) !important;
  padding: 0 2px 6px !important;
}
.settings-drawer .preset-grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px !important;
}
.settings-drawer .preset-btn {
  flex-direction: column;
  gap: 6px;
  padding: 16px 6px !important;
  min-height: 80px;
  border-radius: 14px !important;
}
.settings-drawer .preset-btn .preset-icon svg { width: 26px; height: 26px; }
.settings-drawer .preset-label { font-size: 11px; line-height: 1.3; }
.settings-drawer .preset-label b { font-size: 13.5px; }

/* --- ③ 個別レイヤーの説明文（hint）を隠して密度を下げる --- */
.settings-drawer .layer-hint { display: none !important; }

/* 参考値の注記は1行だけ常時表示（法令・信頼性の担保） */
.settings-drawer .rl-caveat {
  font-size: 11px;
  color: #94a3b8;
  margin: -8px 2px 0;
  line-height: 1.4;
}

/* --- ③ 個別レイヤーをトグルチップ化（展開時のみ flex） --- */
.settings-drawer .layer-group:not(.always-open):not(.collapsed) .layer-group-body {
  display: flex !important;
  flex-wrap: wrap;
  gap: 8px;
  max-height: none !important;
  overflow: visible !important;
  padding: 4px 2px 2px !important;
}
.settings-drawer .layer-group:not(.always-open) .layer-group-body > label {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin: 0;
  padding: 9px 14px;
  border: 1.5px solid var(--ui-border, #e2e8f0);
  border-radius: 999px;
  background: #fff;
  font-size: 13px;
  font-weight: 500;
  color: #334155;
  cursor: pointer;
  line-height: 1.1;
  transition: border-color .15s, background .15s, color .15s;
}
.settings-drawer .layer-group:not(.always-open) .layer-group-body > label:hover {
  border-color: #cbd5e1;
}
.settings-drawer .layer-group:not(.always-open) .layer-group-body > label:has(input:checked) {
  border-color: var(--ui-primary, #2A363B);
  background: var(--ui-tint, #D9E9F4);
  color: var(--ui-primary, #2A363B);
  font-weight: var(--fw-bold, 700);
}
/* ネイティブチェックボックスは視覚的に隠す（labelチップ全体で押下・aria維持） */
.settings-drawer .layer-group:not(.always-open) .layer-group-body > label input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  margin: 0;
  pointer-events: none;
}
/* キーボード操作時のフォーカスを可視化 */
.settings-drawer .layer-group:not(.always-open) .layer-group-body > label:has(input:focus-visible) {
  outline: 2px solid var(--ui-primary, #2A363B);
  outline-offset: 2px;
}
/* 物件フィルタはチップ列から外し、独立行に */
.settings-drawer .prop-filter-section { flex-basis: 100%; width: 100%; margin-top: 6px; }

/* ============================================================
   A1.5: 左下「表示中レイヤー」統合パネル（凡例＋チップを1つに）
   狙い: 旧ミニ凡例(#miniLegend)＋旧チップ列を1つの折りたたみパネルへ統合。
         各行＝色見本＋名前＋×。既定は展開・折りたたむと小ピル。
         → 2要素が1要素になり、左下コーナーの重なりが構造的に消える。
   ============================================================ */

/* 旧ミニ凡例は統合先パネルに畳んだため非表示（詳細凡例は設定→凡例タブに存置）。
   ただしモバイルは統合パネル自体が非表示（下部タブバーが代替＝既存設計）で
   重なりも起きないため、モバイルではミニ凡例を従来どおり残す。 */
@media (min-width: 769px) {
  .mini-legend { display: none !important; }
}

/* #activeChipBar を統合パネルへ作り替え */
.active-chip-bar {
  position: fixed !important;
  left: 12px !important;
  right: auto !important;
  top: auto !important;
  bottom: 28px !important;
  z-index: 900 !important;
  display: none;
  flex-direction: column !important;
  flex-wrap: nowrap !important;
  width: auto !important;
  max-width: 230px !important;
  padding: 0 !important;
  gap: 0 !important;
  background: #fff !important;
  border: 0.5px solid rgba(42, 54, 59, 0.18) !important;
  border-radius: 12px !important;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.16) !important;
  overflow: hidden;
}
.active-chip-bar.open { display: flex; }

.alp-head {
  display: flex;
  align-items: center;
  gap: 7px;
  width: 100%;
  padding: 8px 10px;
  background: transparent;
  border: none;
  cursor: pointer;
  font-family: inherit;
  font-size: 12px;
  font-weight: var(--fw-bold, 700);
  color: var(--ui-primary, #2A363B);
  text-align: left;
}
.alp-head:hover { background: var(--ui-tint, #D9E9F4); }
.alp-head-ic { display: inline-flex; font-size: 14px; color: var(--ui-primary, #2A363B); }
.alp-title { flex: 1; letter-spacing: 0.3px; }
.alp-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  background: var(--ui-tint, #D9E9F4);
  color: var(--ui-primary, #2A363B);
  border-radius: 999px;
  font-size: 11px;
  font-weight: var(--fw-bold, 700);
}
.alp-chev { display: inline-flex; font-size: 15px; color: var(--ui-text-muted, #666); transition: transform 0.2s; }
.active-chip-bar[data-collapsed="true"] .alp-chev { transform: rotate(-90deg); }
.active-chip-bar[data-collapsed="true"] .alp-body { display: none; }

.alp-body {
  display: flex;
  flex-direction: column;
  padding: 2px 8px 8px;
  border-top: 0.5px solid rgba(42, 54, 59, 0.10);
}
.alp-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 2px;
  font-size: 12px;
  color: #334155;
}
.alp-swatch { display: inline-flex; gap: 1px; width: 26px; flex-shrink: 0; }
.alp-swatch > span { flex: 1; height: 12px; border-radius: 2px; }
.alp-name { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.alp-x {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  background: transparent;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  color: var(--ui-text-muted, #888);
  font-size: 15px;
}
.alp-x:hover { background: rgba(0, 0, 0, 0.06); color: #333; }

/* モバイル: 下部タブバー(≈56px)＋出典の上に置く */
@media (max-width: 768px) {
  .active-chip-bar {
    left: 8px !important;
    bottom: 70px !important;
    max-width: 62vw !important;
  }
}

/* ============================================================
   A1.6: リスクポップアップを地価マップ流の統一行に整える
   狙い: ①結論(verdict)は維持 ②独自解析/公式/参考値/詳細を"同じ行"に統一
        （アイコン枠＋太字＋灰サブ＋右に色付き状態ピル＋▾）
        ③重複していた注記を1本化し畳む
   ============================================================ */
.risk-popup .rp-sec {
  border: 0.5px solid var(--ui-border, #e2e8f0);
  border-radius: 10px;
  margin: 8px 0 0;
  background: var(--ui-surface-2, #fff);
  overflow: hidden;
}
.risk-popup .rp-sec-head {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; cursor: pointer; list-style: none;
  -webkit-tap-highlight-color: transparent;
}
.risk-popup .rp-sec-head::-webkit-details-marker { display: none; }
.risk-popup .rp-sec-head::marker { content: ''; }
.risk-popup .rp-sec-head:hover { background: var(--ui-tint, #f2f7fb); }
.risk-popup .rp-sec-ic {
  width: 30px; height: 30px; border-radius: 8px; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--ui-surface, #eef2f6); color: var(--ui-text-muted, #64748b);
}
.risk-popup .rp-sec-ic svg { width: 16px; height: 16px; }
.risk-popup .rp-sec-title { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.risk-popup .rp-sec-title b {
  font-size: 13.5px; font-weight: var(--fw-bold, 700);
  color: var(--ui-primary, #1e293b); display: flex; align-items: center; gap: 6px;
}
.risk-popup .rp-sec-tag {
  font-size: 10px; font-weight: 600; color: var(--ui-text-muted, #64748b);
  background: var(--ui-surface, #eef2f6); border-radius: 4px; padding: 1px 5px;
}
.risk-popup .rp-sec-sub { font-size: 11.5px; color: var(--ui-text-muted, #7c8894); }
.risk-popup .rp-sec-chev { flex: none; width: 16px; height: 16px; position: relative; transition: transform .2s; }
.risk-popup .rp-sec-chev::before {
  content: ''; position: absolute; left: 3px; top: 3px; width: 7px; height: 7px;
  border-right: 2px solid var(--ui-text-muted, #94a3b8);
  border-bottom: 2px solid var(--ui-text-muted, #94a3b8);
  transform: rotate(45deg);
}
.risk-popup .rp-sec[open] > .rp-sec-head .rp-sec-chev { transform: rotate(180deg); }
.risk-popup .rp-sec-body { padding: 2px 12px 12px; }

/* 状態ピル（結論と連動した意味色） */
.risk-popup .rp-stat {
  flex: none; font-size: 11px; font-weight: var(--fw-bold, 700);
  padding: 3px 10px; border-radius: 999px; white-space: nowrap;
}
.risk-popup .rp-stat-safe { background: #e2f0e8; color: #1c6b40; }
.risk-popup .rp-stat-mid  { background: #fdefdf; color: var(--risk-mid, #e65100); }
.risk-popup .rp-stat-high { background: #fbe6e4; color: var(--risk-high, #c62828); }
.risk-popup .rp-stat-loading { background: var(--ui-surface, #eef2f6); color: var(--ui-text-muted, #64748b); }

/* 電話行（地価マップ流） */
.risk-popup .rp-phone { text-align: center; font-size: 12px; color: var(--ui-text-muted, #64748b); margin: 8px 0 0; }
.risk-popup .rp-phone a { font-weight: var(--fw-bold, 700); color: var(--ui-primary, #1e293b); text-decoration: none; }
.risk-popup .rp-phone-hours { display: block; font-size: 11px; margin-top: 1px; }

/* 参考値の一言（常時・最小）＋ 出典行は控えめ */
.risk-popup .rp-note-line { font-size: 11px; color: var(--ui-text-muted, #94a3b8); line-height: 1.5; margin: 12px 2px 2px; }
.risk-popup .rp-sec-quiet { border-style: dashed; }
.risk-popup .rp-sec-quiet .rp-sec-title b { font-weight: 600; color: var(--ui-text-muted, #64748b); }
.risk-popup .rp-sec-quiet .rp-sec-ic { background: transparent; }

/* ============================================================
   A1.7: 公式確認を主導線、相談を二次導線に整理
   ============================================================ */
.risk-popup .rp-cta-official,
.risk-popup .rp-cta-contact.rp-cta-secondary {
  width: 100% !important;
  min-height: 48px !important;
  margin: 12px 0 0 !important;
  padding: 10px 14px !important;
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  border-radius: 10px !important;
  box-sizing: border-box !important;
  font: inherit;
  text-align: left;
  text-decoration: none !important;
  cursor: pointer;
}
.risk-popup .rp-cta-official {
  border: 1px solid var(--ui-primary, #1e293b) !important;
  background: var(--ui-primary, #1e293b) !important;
  color: #fff !important;
  box-shadow: 0 2px 8px rgba(30,41,59,.18);
}
.risk-popup .rp-cta-official:hover { background: #0f172a !important; }
.risk-popup .rp-cta-official .rp-cta-icon,
.risk-popup .rp-cta-official .rp-cta-icon svg { color: #fff !important; stroke: #fff !important; }
.risk-popup .rp-cta-official .rp-cta-text,
.risk-popup .rp-cta-contact.rp-cta-secondary .rp-cta-text {
  min-width: 0;
  display: flex;
  flex-direction: column;
  line-height: 1.3;
}
.risk-popup .rp-cta-official strong { color: #fff !important; font-size: 14px; }
.risk-popup .rp-cta-official .rp-cta-sub { color: rgba(255,255,255,.78) !important; font-size: 11.5px; }
.risk-popup .rp-cta-contact.rp-cta-secondary {
  margin-top: 8px !important;
  border: 1.5px solid var(--ui-link, #1769c4) !important;
  background: #fff !important;
  color: var(--ui-link, #1769c4) !important;
  box-shadow: none !important;
}
.risk-popup .rp-cta-contact.rp-cta-secondary:hover { background: #f2f7fb !important; transform: none !important; }
.risk-popup .rp-cta-contact.rp-cta-secondary strong,
.risk-popup .rp-cta-contact.rp-cta-secondary .rp-cta-sub { color: var(--ui-link, #1769c4) !important; }
.risk-popup .rp-cta-contact.rp-cta-secondary .rp-cta-sub { opacity: .82; font-size: 11.5px; }
.risk-popup .rp-cta-contact.rp-cta-secondary .rp-cta-icon svg { stroke: var(--ui-link, #1769c4) !important; }

/* 公式データ未取得行 */
.diag-ph-row-na { background: #f8fafc; color: #475569; }
.diag-ph-row-na .diag-ph-row-pill { background: #eef2f6; color: #475569; }