/* ── スキップナビゲーション (アクセシビリティ)
   キーボードユーザー (Tab キー) のみに可視。
   マウス・タッチによる自動フォーカス (モーダル内部)では表示されないよう :focus-visible 使用。
   iOS Safari/Chrome で SweetAlert モーダル表示時にこのリンクが最初の focusable として
   表示されていた問題を修正。 */
.skip-nav {
    position: absolute;
    top: -100%;
    left: 0;
    padding: 8px 16px;
    background: var(--color-price, #2563eb);
    color: #fff;
    font-weight: 600;
    font-size: 14px;
    text-decoration: none;
    z-index: 9999;
    border-radius: 0 0 6px 0;
    transition: top 0.15s;
    /* デフォルトで screen reader のみ (視覚的には完全非表示)
       :focus-visible でキーボード Tab 時のみ再表示 */
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    width: 1px; height: 1px;
    overflow: hidden;
    white-space: nowrap;
}
.skip-nav:focus-visible {
    top: 0;
    clip: auto;
    clip-path: none;
    width: auto; height: auto;
    overflow: visible;
    white-space: normal;
}

/* ── フォントメトリックオーバーライド (CLS 抑止)
   Noto Sans JP ロード完了前のフォールバック (Hiragino Sans / Yu Gothic UI) を
   メトリックレベルで Noto Sans JP に一致させる。swap 時のレイアウトシフトを抑える。 */
@font-face {
    font-family: 'NotoSansJP Fallback';
    src: local('Hiragino Sans'), local('Hiragino Kaku Gothic ProN'),
         local('Yu Gothic UI'), local('Meiryo'), local('sans-serif');
    ascent-override: 107%;
    descent-override: 29%;
    line-gap-override: 0%;
    size-adjust: 100%;
    font-display: swap;
}

/* ── デザインシステム変数（ライトモード = デフォルト） ── */
:root {
    /* ── DESIGN.md 시안 v3 (2026-05-02): 흰 + 옅은 회색 (베이지 폐기) ── */
    --bg-page:        #FFFFFF;
    --bg-header:      rgba(255, 255, 255, 0.96);
    --bg-card:        rgba(255, 255, 255, 0.95);
    --bg-card-solid:  #FFFFFF;
    --bg-sheet:       rgba(255, 255, 255, 0.98);
    --bg-dropdown:    rgba(255, 255, 255, 0.98);
    --bg-input:       #F8F9FA;
    --bg-input-focus: rgba(232, 84, 122, 0.06);
    --bg-stat:        #F4F4F0;   /* 옅은 회색 sunken */
    --bg-result:      rgba(232, 84, 122, 0.06);
    --bg-overlay:     rgba(26, 35, 50, 0.45);
    /* ボーダー */
    --glass-border:   #E5E7EB;
    --border:         #E5E7EB;
    /* ✨ チェリ街 ブランドカラー: 桜ピンク */
    --accent:         #E8547A;
    --accent-hover:   #C93966;
    --accent-glow:    rgba(232, 84, 122, 0.18);
    /* テキスト (墨色系) */
    --text-primary:   #1A2332;   /* 墨 — 本文・見出し (WCAG AAA) */
    --text-secondary: #5D6875;   /* ダークグレー — 説明 (WCAG AA 5.2:1) */
    --text-muted:     #6B7280;   /* ライトグレー — キャプション (WCAG AA 4.52:1) */
    /* ステータス (部動産文脈) */
    --success:        #1A6644;   /* モスグリーン "買える" (WCAG AA 6.49:1) */
    --danger:         #B91C1C;   /* ワインレッド "買うな" (WCAG AA) */
    --warning:        #92400E;   /* アンバー警告テキスト (WCAG AA 6.63:1) */
    /* シャドウ (和紙上の墨) */
    --shadow-lg:      0 8px 32px rgba(26, 35, 50, 0.10);
    --shadow-md:      0 4px 16px rgba(26, 35, 50, 0.07);
    /* 形状・フォント */
    --radius-lg:      14px;
    --radius-md:      10px;
    --radius-sm:      6px;
    --radius:         8px;
    --blur:           blur(16px);
    --font:           'Noto Sans JP', 'NotoSansJP Fallback', -apple-system, 'Hiragino Sans', 'Yu Gothic', sans-serif;
    --font-num:       'Outfit', 'Noto Sans JP', 'NotoSansJP Fallback', sans-serif;
    /* サーフェス・アクセント拡張（コンポーネント間一貫性用） */
    --surface-2:      rgba(240, 234, 224, 0.70);   /* ベージュトーン */
    --accent-primary: #E8547A;
    --accent-muted:   rgba(232, 84, 122, 0.08);
    /* カテゴリ別セマンティックカラー (price=sakura / rate=purple / disaster=amber / air=emerald) */
    --color-price:        #E8547A;
    --color-price-muted:  rgba(232, 84, 122, 0.10);
    --color-price-glow:   rgba(232, 84, 122, 0.28);
    --color-rate:         #7c3aed;
    --color-rate-muted:   rgba(124, 58, 237, 0.10);
    --color-rate-glow:    rgba(124, 58, 237, 0.25);
    --color-disaster:     #d97706;
    --color-disaster-muted: rgba(217, 119, 6, 0.10);
    --color-disaster-glow:  rgba(217, 119, 6, 0.25);
    --color-air:          #059669;
    --color-air-muted:    rgba(5, 150, 105, 0.10);
    --color-air-glow:     rgba(5, 150, 105, 0.22);
    /* 信頼・透明性カラー (teal = 消費者の味方シグナル) */
    --color-trust:        #0d9488;
    --color-trust-muted:  rgba(13, 148, 136, 0.10);
    --color-trust-glow:   rgba(13, 148, 136, 0.22);
    /* 汎用エイリアス（コンポーネント内で参照） */
    --bg-primary:  var(--bg-page);
    --bg-hover:    rgba(26, 35, 50, 0.04);

    /* ── z-index レイヤー（役割別、v2.8 Phase 1 導入） ──
       既存値との対応:
         popup   100  = 地図マーカー/Mapbox popup
         panel   200  = slide drawer (favs / compare / sheet)
         header 2000  = 固定ヘッダー
         overlay 800  = モーダル背景
         modal   900  = モーダルボックス本体
         toast  1000  = toastify / swal2
       新規追加する要素は必ず var(--z-*) を使用する。 */
    --z-map:      1;
    --z-popup:    100;
    --z-panel:    200;
    --z-floating: 700;
    --z-overlay:  800;
    --z-modal:    900;
    --z-toast:    1000;
    --z-toast-top: 6000;

    /* ── v2 디자인 시스템 (2026-05-02) ── DESIGN.md 토큰 동기 */
    /* 결과 단계 색 (사쿠라 오용 금지 — 결과는 신호등 3색) */
    --affordable:        #1A6644;
    --affordable-bg:     #E8F3EC;
    --marginal:          #92400E;
    --marginal-bg:       #FEF3E2;
    --over:              #B91C1C;
    --over-bg:           #FDEAEA;
    /* 히트맵 5단계 (23구 가격 임계값 신호등) */
    --heatmap-s1:        #E8F3EC;  /* ≤100万/坪 */
    --heatmap-s2:        #C5E0CF;  /* 100-150 */
    --heatmap-s3:        #FEF3E2;  /* 150-200 */
    --heatmap-s4:        #FAB680;  /* 200-300 */
    --heatmap-s5:        #FDEAEA;  /* 300+ */
    /* chip — 카테고리 색 부여 금지, active = 사쿠라만 */
    --chip-active-bg:    #F8D0DE;
    --chip-active-text:  #A82954;
    --chip-inactive-bg:  #F0EAE0;
    --chip-inactive-text: #6B7280;
    /* backdrop — 사쿠라 grad 금지 */
    --backdrop-default:  rgba(26, 35, 50, 0.6);
    /* feedback (게임化 emoji 별점 대체) */
    --feedback-positive-bg:    #E8F3EC;
    --feedback-positive-text:  #1A6644;
    --feedback-negative-bg:    #FEF3E2;
    --feedback-negative-text:  #92400E;
    /* 표 — Tabulator 흰색 강제 */
    --table-bg:          #FFFFFF;
    --table-header-bg:   #F0EAE0;
    --table-header-text: #1A2332;
    --table-row-alt-bg:  #FAF7F2;
}

/* ── リセット & 基本 ──────────────────────────── */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

/* グローバルユーティリティ */
.hidden { display: none !important; }

/* SweetAlert2 z-index オーバーライド（モーダル z-index 5000 より上） */
.swal2-container { z-index: 6000 !important; }
html, body {
    height: 100%;
    font-family: var(--font);
    background: var(--bg-page);
    color: var(--text-primary);
    -webkit-font-smoothing: antialiased;
    transition: background-color 0.25s ease, color 0.25s ease;
    overscroll-behavior: none;  /* バウンス防止 (iOS Safari) */
}

/* モーダル/シート開時: 背景スクロール禁止
   iOS Safari で position:fixed を使うとレイアウトジャンプが発生するため
   overflow:hidden + height:100% の組み合わせで代替 */
body.no-scroll {
    overflow: hidden;
    height: 100%;
    /* position:fixed は使わない — iOS でスクロール位置がリセットされる */
}

/* ── キーボードフォーカスリング (WCAG 2.4.7 / 2.4.11) ─── */
/* マウス操作ではリングを表示せず、キーボード/タブ移動時のみ表示する */
*:focus { outline: none; }  /* マウスクリック時のデフォルトリング消去 */
*:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
    border-radius: 4px;
}
/* 入力フィールドはborderで代替 — focus-visibleと二重にならないよう調整 */
.search-input:focus-visible,
.form-group input:focus-visible,
.form-group select:focus-visible {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(232,84,122,0.25);
}

/* ── ヘッダー ─────────────────────────────────── */
.app-header {
    position: fixed;
    top: 0; left: 0; right: 0;
    height: 56px;
    background: var(--bg-header);
    backdrop-filter: var(--blur);
    -webkit-backdrop-filter: var(--blur);
    border-bottom: 1px solid var(--glass-border);
    box-shadow: var(--shadow-md);
    z-index: 2000;
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 0 16px;
    transition: background-color 0.25s ease, border-color 0.25s ease;
}

.header-logo {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
    text-decoration: none;
    cursor: pointer;
    border-radius: 6px;
    padding: 4px 6px;
    transition: background 0.15s;
}
.header-logo:hover { background: rgba(255,255,255,0.06); }
.logo-svg {
    width: 26px;
    height: 26px;
    flex-shrink: 0;
}
.logo-text {
    color: var(--text-primary);
    font-size: 16px;
    font-weight: 800;
    font-family: 'Outfit', 'Noto Sans JP', sans-serif;
    letter-spacing: 0.04em;
    white-space: nowrap;
}
.logo-tagline {
    display: block;
    font-size: 9px;
    color: var(--text-muted);
    letter-spacing: 0.08em;
    margin-top: -2px;
    white-space: nowrap;
    font-weight: 400;
}
@media (max-width: 480px) {
    .logo-tagline { display: none; }
}

.header-search {
    flex: 1;
    max-width: 380px;
    position: relative;
    display: flex;
    align-items: center;
}
.search-icon {
    position: absolute;
    left: 12px;
    width: 15px; height: 15px;
    color: var(--text-muted);
    pointer-events: none;
}
.search-input {
    width: 100%;
    padding: 8px 14px 8px 36px;
    background: var(--bg-input);
    border: 1px solid var(--glass-border);
    border-radius: 8px;
    color: var(--text-primary);
    font-size: 13px;
    font-family: var(--font);
    transition: border-color 0.2s, background 0.2s;
}
.search-input::placeholder { color: var(--text-muted); }
.search-input:focus {
    border-color: var(--accent);
    background: var(--bg-input-focus);
}

/* ── 検索オートコンプリート ─────────────────────── */
.search-dropdown {
    /* JS側で position:fixed + left/top/width を動的に設定 */
    position: fixed;
    left: 0; top: 0;
    width: 320px;
    background: var(--bg-dropdown);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-md);
    backdrop-filter: var(--blur);
    -webkit-backdrop-filter: var(--blur);
    box-shadow: var(--shadow-lg);
    z-index: 9999;
    overflow: hidden;
    max-height: 280px;
    overflow-y: auto;
}
.search-dropdown-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    cursor: pointer;
    font-size: 13px;
    color: var(--text-primary);
    transition: background 0.15s;
    border-bottom: 1px solid var(--border);
}
.search-dropdown-item:last-child { border-bottom: none; }
.search-dropdown-item:hover,
.search-dropdown-item.active {
    background: rgba(232, 84, 122, 0.10);
    color: var(--accent);
}
.search-dropdown-item .item-icon { margin-right: 6px; font-size: 14px; flex-shrink: 0; }
.search-dropdown-item .item-name {
    font-weight: 600;
    display: flex;
    flex-direction: column;
    gap: 1px;
    flex: 1;
}
.search-dropdown-item .item-ward-sub {
    font-size: 10px;
    font-weight: 400;
    color: var(--text-muted);
}
.search-dropdown-item .item-price {
    font-size: 11px;
    color: var(--text-secondary);
    flex-shrink: 0;
    margin-left: 8px;
}
.search-dropdown-empty {
    padding: 12px 14px;
    font-size: 13px;
    color: var(--text-muted);
    text-align: center;
}

.header-actions {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
    margin-left: auto;
}

/* ── ボタン ───────────────────────────────────── */
.btn-header {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 7px 13px;
    min-height: 44px;  /* WCAG 2.5.8 タッチターゲット */
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-sm);
    background: var(--bg-input);
    color: var(--text-secondary);
    font-size: 13px;
    font-family: var(--font);
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s;
    white-space: nowrap;
}
.btn-header svg { width: 14px; height: 14px; }
.btn-header:hover {
    background: var(--bg-stat);
    color: var(--text-primary);
    border-color: var(--accent);
}

/* テーマトグルボタン */
.theme-toggle-btn { padding: 7px 10px; }
.theme-toggle-btn .hidden { display: none; }
.btn-header.btn-primary {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
}
.btn-header.btn-primary:hover { background: var(--accent-hover); }

.btn-primary {
    background: var(--accent);
    color: #fff;
    border: none;
    border-radius: var(--radius-sm);
    padding: 10px 18px;
    font-size: 14px;
    font-family: var(--font);
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s;
}
.btn-primary:hover { background: var(--accent-hover); }
.btn-primary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.btn-full { width: 100%; margin-top: 8px; padding: 12px; font-size: 15px; }

/* ── グローバル btn-secondary (empty-state / 一般用途) ── */
.btn-secondary {
    background: transparent;
    color: var(--text-primary);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 10px 18px;
    font-size: 14px;
    font-family: var(--font);
    font-weight: 600;
    cursor: pointer;
    transition: border-color 0.15s, color 0.15s, background 0.15s;
}
.btn-secondary:hover {
    border-color: var(--text-primary);
    background: var(--bg-hover);
}
.btn-secondary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ── 地図 ─────────────────────────────────────── */
#map {
    position: fixed;
    top: 56px; left: 0; right: 0; bottom: 0;
    z-index: 1;
    touch-action: none;  /* Mapboxにすべてのタッチイベントを委譲（ピンチズーム正常動作）*/
    transition: right 0.38s cubic-bezier(0.215,0.61,0.355,1),
                left  0.38s cubic-bezier(0.215,0.61,0.355,1);
}
.mapboxgl-ctrl-attrib { font-size: 10px !important; }

/* ── レイヤートグル ───────────────────────────── */
.layer-controls {
    position: fixed;
    top: 114px; left: 14px;  /* パネルトグルボタン(68px+38px) + gap 8px */
    z-index: 500;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.layer-btn {
    padding: 7px 13px;
    background: var(--bg-card);
    backdrop-filter: var(--blur);
    -webkit-backdrop-filter: var(--blur);
    border: 1px solid var(--glass-border);
    border-radius: 20px;
    font-size: 12px;
    font-weight: 500;
    font-family: var(--font);
    color: var(--text-secondary);
    cursor: pointer;
    box-shadow: var(--shadow-md);
    transition: all 0.2s;
    white-space: nowrap;
}
.layer-btn:hover {
    background: rgba(232, 84, 122, 0.15);
    color: var(--text-primary);
    border-color: rgba(232,84,122,0.40);
}
.layer-btn.active {
    background: var(--accent);
    color: #fff;
    border-color: var(--accent);
    box-shadow: 0 2px 12px var(--accent-glow);
}
.layer-btn.loading {
    opacity: 0.6;
    cursor: wait;
    pointer-events: none;
}
.layer-btn.loading::after {
    content: ' …';
}

/* ── 左下: 凡例 + 金利 ───────────────────────── */
.map-bottom-left {
    position: fixed;
    bottom: 28px; left: 14px;
    z-index: 500;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.map-legend {
    background: var(--bg-card);
    backdrop-filter: var(--blur);
    -webkit-backdrop-filter: var(--blur);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-md);
    padding: 10px 13px;
    box-shadow: var(--shadow-md);
}
.legend-title {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: 7px;
    letter-spacing: 0.02em;
}
.legend-items { display: flex; flex-direction: column; gap: 4px; }
.legend-row {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 11px;
    color: var(--text-secondary);
}
.legend-color {
    display: inline-block;
    width: 14px; height: 10px;
    border-radius: 2px;
    flex-shrink: 0;
}

.rate-widget {
    background: var(--bg-card);
    backdrop-filter: var(--blur);
    -webkit-backdrop-filter: var(--blur);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-md);
    padding: 8px 13px;
    box-shadow: var(--shadow-md);
    font-size: 12px;
    display: flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
}
.rate-label { font-weight: 600; color: var(--text-muted); font-size: 11px; }
.rate-item { color: var(--text-secondary); font-size: 12px; }
.rate-item strong { color: var(--accent); font-size: 14px; font-weight: 700; }
.rate-divider { color: var(--text-muted); }

/* ── バックドロップ ───────────────────────────── */
.sheet-backdrop {
    position: fixed;
    inset: 0;
    background: var(--bg-overlay);
    z-index: 800;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.28s ease;
}
.sheet-backdrop.visible {
    opacity: 1;
    pointer-events: auto;
    cursor: pointer;  /* iOS Safari は cursor:pointer のない div の click を発火しない */
}

/* ── バトムシート ─────────────────────────────── */
.bottom-sheet {
    position: fixed;
    bottom: 0; left: 0; right: 0;
    max-height: 62vh;
    background: var(--bg-sheet);
    backdrop-filter: var(--blur);
    -webkit-backdrop-filter: var(--blur);
    border-top: 1px solid var(--glass-border);
    border-radius: 20px 20px 0 0;
    z-index: 900;
    transform: translateY(100%);
    /* CSS transition で統一 — WAAPIとの競合を排除 */
    transition: transform 0.38s cubic-bezier(0.215,0.61,0.355,1),
                background-color 0.25s ease;
    display: flex;
    flex-direction: column;
    box-shadow: 0 -4px 24px rgba(0,0,0,0.12);
}
.bottom-sheet.open { transform: translateY(0); }

.sheet-header {
    padding: 12px 20px 8px;
    flex-shrink: 0;
}
.sheet-handle {
    width: 36px; height: 4px;
    background: var(--glass-border);
    border-radius: 2px;
    margin: 0 auto 12px;
}
.sheet-title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
#sheet-title {
    font-size: 20px;
    font-weight: 800;
    color: var(--text-primary);
    letter-spacing: -0.01em;
}
.sheet-close {
    font-size: 24px;
    cursor: pointer;
    border: none;
    background: none;
    min-width: 44px;   /* WCAG 2.5.8 タッチターゲット */
    min-height: 44px;
    color: var(--text-muted);
    line-height: 1;
    padding: 4px;
    border-radius: 50%;
    transition: color 0.15s, background 0.15s;
}
.sheet-close:hover {
    color: var(--text-primary);
    background: var(--bg-stat);
}

.sheet-content {
    flex: 1;
    overflow-y: auto;
    padding: 4px 20px 16px;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;  /* シート内スクロールが背後の地図に伝播するのを防止 */
    touch-action: pan-y;           /* 縦スクロールのみ許可 — 横スワイプは地図に渡さない */
}
.sheet-content::-webkit-scrollbar { width: 4px; }
.sheet-content::-webkit-scrollbar-track { background: transparent; }
.sheet-content::-webkit-scrollbar-thumb { background: var(--glass-border); border-radius: 2px; }

.sheet-footer {
    padding: 8px 20px 12px;
    border-top: 1px solid var(--border);
    flex-shrink: 0;
}
.credit { font-size: 11px; color: var(--text-muted); }

/* ── バトムシート タブ ────────────────────────── */
.sheet-tab-bar {
    display: flex;
    gap: 4px;
    margin-bottom: 14px;
    border-bottom: 1px solid var(--border);
    padding-bottom: 0;
}
.sheet-tab {
    padding: 7px 14px;
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    color: var(--text-secondary);
    font-size: 13px;
    font-family: var(--font);
    cursor: pointer;
    transition: color 0.15s, border-color 0.15s;
    margin-bottom: -1px;
}
.sheet-tab:hover { color: var(--text-primary); }
.sheet-tab.active {
    color: var(--accent);
    border-bottom-color: var(--accent);
    font-weight: 600;
}
.sheet-tab-content.hidden { display: none; }

.loan-guide {
    font-size: 12px;
    color: var(--text-secondary);
    background: rgba(232,84,122,0.07);
    border: 1px solid rgba(232,84,122,0.18);
    border-radius: var(--radius-sm);
    padding: 8px 12px;
    margin-bottom: 12px;
}

/* シミュレーションフォーム */
.simu-form { display: flex; flex-direction: column; gap: 10px; }
.simu-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.simu-row label { font-size: 12px; color: var(--text-secondary); white-space: nowrap; }
.simu-input {
    width: 110px;
    padding: 6px 10px;
    background: var(--bg-input);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    font-size: 13px;
    font-family: var(--font);
    outline: none;
}
.simu-input:focus-visible {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(232,84,122,0.25);
}
.simu-btn { margin-top: 4px; }
.simu-result {
    background: var(--bg-stat);
    border-radius: var(--radius-sm);
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 4px;
}
.simu-line {
    display: flex;
    justify-content: space-between;
    font-size: 13px;
    color: var(--text-secondary);
}
.simu-line.highlight {
    color: var(--text-primary);
    font-size: 15px;
    border-top: 1px solid var(--border);
    padding-top: 6px;
    margin-top: 2px;
}
.simu-line strong { color: var(--text-primary); }
.simu-line.highlight strong { color: var(--accent); font-size: 16px; }

.sheet-stats {
    display: flex;
    gap: 10px;
    margin-bottom: 16px;
}
/* 시안 11:03 정합 (사장님 비판 「올드」 시정): 회색 배경 → 흰 + border, 사쿠라 가격 → 큰 검정 */
.stat-card {
    flex: 1;
    background: var(--bg-card-solid, #FFFFFF);
    border: 1px solid var(--border, #E5E7EB);
    border-radius: var(--radius-md);
    padding: 14px 16px;
    /* outline 제거 (회색 사이드 폐기) */
}
.stat-label {
    font-size: 12px;
    color: var(--text-secondary, #5D6875);
    font-weight: 500;
    margin-bottom: 8px;
    letter-spacing: 0.01em;
}
/* 가격 메인 = 큰 검정 (시안 11:03 패턴, 사쿠라 X — 桜 = CTA·active만) */
.sheet-value {
    font-size: 26px;
    font-weight: 700;
    color: var(--text-primary, #1A2332);
    font-family: var(--font-num);
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
    line-height: 1.1;
    text-shadow: none;
}
.sheet-value .unit { font-size: 13px; font-weight: 500; color: var(--text-muted, #9CA3AF); margin-left: 2px; }
.sheet-value.range { font-size: 15px; font-weight: 600; color: var(--text-secondary, #5D6875); }
.sheet-value.muted { font-size: 14px; font-weight: 400; color: var(--text-muted, #9CA3AF); }
/* 카드 구조 통일 (사장님 「위치 통일성 X」 시정): 라벨 → 가격 → 보조 1줄 */
.stat-card .stat-sub,
.stat-card .stat-sub-meta {
    margin-top: 8px;
    font-size: 11px;
    color: var(--text-muted, #9CA3AF);
    line-height: 1.4;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
}

/* ── パネル共通テキスト ───────────────────────── */
.hint-text { color: var(--text-muted); font-size: 14px; padding: 12px 0; }
.muted-text { color: var(--text-muted); font-size: 13px; }
.error-text { color: var(--danger); font-size: 13px; }
.loading { text-align: center; padding: 24px; color: var(--text-muted); font-size: 14px; }

.data-row {
    display: flex; justify-content: space-between;
    padding: 9px 0; border-bottom: 1px solid var(--border); font-size: 14px;
}
.data-label { color: var(--text-secondary); }
.data-value { font-weight: 600; color: var(--text-primary); }
.data-pending { color: var(--text-muted); font-style: italic; font-weight: 400; }

/* ニュースセクション削除済み (2026-04-17) */

.data-timestamp-notice {
    font-size: 11px;
    color: var(--text-muted);
    margin: 6px 0 10px;
    padding: 4px 8px;
    background: rgba(255,255,255,0.04);
    border-radius: 4px;
}
/* seed(推計値)時の警告強調 */
.data-timestamp-notice.seed-warning {
    color: #92400e;           /* ライトモード: 茶色（黄背景で読める） */
    background: rgba(251,191,36,0.15);
    border: 1px solid rgba(251,191,36,0.40);
    border-left: 3px solid #fbbf24;
    padding: 6px 10px;
}
.phase-notice {
    margin-top: 14px; padding: 10px 13px;
    background: rgba(232, 84, 122, 0.07);
    border-left: 3px solid var(--accent);
    border-radius: var(--radius-sm);
    font-size: 11px;
    color: var(--text-secondary);
    line-height: 1.5;
}

/* ── 地価公示カード ────────────────────────────── */
/* ── バトムシート アラートCTAボタン ────────────── */
/* エリア監視CTAボタン — ライトモード */
.btn-watch-area {
    display: block; width: 100%; margin-top: 16px;
    padding: 13px 16px;
    background: linear-gradient(135deg, rgba(67,56,202,0.08), rgba(109,40,217,0.08));
    border: 1px solid rgba(67,56,202,0.35);
    border-radius: var(--radius);
    color: #3730a3; font-size: 14px; font-weight: 600;
    cursor: pointer; text-align: center;
    transition: background 0.2s, border-color 0.2s, color 0.2s;
}
.btn-watch-area:hover {
    background: linear-gradient(135deg, rgba(67,56,202,0.15), rgba(109,40,217,0.15));
    border-color: rgba(67,56,202,0.60);
    color: #312e81;
}

/* 比較モードバナー */
.compare-banner {
    position: fixed;
    top: 60px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 3500;
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 10px 20px;
    background: var(--bg-card-solid);
    border: 1px solid rgba(232,84,122,0.5);
    border-radius: 999px;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    box-shadow: var(--shadow-lg);
    font-size: 13px;
    color: var(--text-primary);
}
.compare-cancel-btn {
    background: none;
    border: 1px solid rgba(248,113,113,0.4);
    color: #f87171;
    border-radius: 6px;
    padding: 3px 10px;
    font-size: 12px;
    cursor: pointer;
}
.compare-cancel-btn:hover { background: rgba(248,113,113,0.1); }
.compare-banner.hidden { display: none; }

/* 区比較パネル */
.compare-panel {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 3400;
    width: min(680px, 96vw);
    background: var(--bg-card);
    border: 1px solid rgba(232,84,122,0.3);
    border-radius: 16px;
    box-shadow: 0 8px 40px rgba(0,0,0,0.5);
    overflow: hidden;
}
.compare-panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 18px;
    background: rgba(232,84,122,0.12);
    font-weight: 700;
    font-size: 14px;
    color: var(--text-primary);
}
.compare-panel-close {
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: 20px;
    cursor: pointer;
    line-height: 1;
}
.compare-panel.hidden { display: none; }
.compare-panel-body { padding: 16px 18px; }
.compare-loading { color: var(--text-muted); font-size: 13px; text-align: center; padding: 20px 0; }
.cmp-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.cmp-table th, .cmp-table td { padding: 8px 12px; }
.cmp-head { text-align: center; font-weight: 700; color: var(--accent-primary); border-bottom: 2px solid rgba(232,84,122,0.3); }
.cmp-label { color: var(--text-muted); font-size: 12px; white-space: nowrap; }
.cmp-val { text-align: center; color: var(--text-primary); border-bottom: 1px solid var(--border); }
.cmp-winner { color: var(--success); font-weight: 700; }
.cmp-winner::before { content: '✓ '; }
.cmp-note { font-size: 11px; color: var(--text-muted); margin-top: 10px; }

/* 詳細トグルボタン */
.btn-detail-toggle {
    display: block;
    width: 100%;
    margin: 8px 0 4px;
    padding: 6px 0;
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: 12px;
    cursor: pointer;
    text-align: center;
    letter-spacing: 0.03em;
}
.btn-detail-toggle:hover { color: var(--accent-primary); }
.sheet-detail-section { margin-top: 4px; }

.land-price-card { border-top: 1px solid rgba(232,84,122,0.25); padding-top: 12px; }
.lp-note { font-size: 10px; color: var(--text-muted); margin-top: 4px; }
.lp-badge {
    display: inline-block; font-size: 10px; font-weight: 600;
    padding: 2px 7px; border-radius: 20px; margin-left: 6px; vertical-align: middle;
}
/* 割安=緑(良), 適正=青(中), プレミアム=橙(熱) — ライトモード */
.lp-cheap   { background: rgba(22, 101, 52, 0.10);  color: #166534; border: 1px solid rgba(22, 101, 52, 0.20); }
.lp-fair    { background: rgba(232, 84, 122, 0.10); color: #c0335c; border: 1px solid rgba(232, 84, 122, 0.22); }
.lp-premium { background: rgba(194, 65, 12, 0.10);  color: #c2410c; border: 1px solid rgba(194, 65, 12, 0.20); }
.lp-ratio { font-size: 10px; color: var(--text-muted); opacity: 0.8; }

/* ── モーダル ─────────────────────────────────── */
.modal {
    position: fixed; inset: 0;
    background: var(--backdrop-default);  /* DESIGN.md v2: surface-inverse 60% */
    z-index: 5000;  /* compare-banner(3500)/compare-panel(3400)/income-slider(4000) より上 */
    display: flex; align-items: center; justify-content: center;
    padding: 16px;
    backdrop-filter: blur(4px);
}
.modal.hidden { display: none; }

.modal-box {
    background: var(--bg-card-solid);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-lg);
    padding: 28px 24px 24px;
    width: 100%; max-width: 430px;
    position: relative;
    box-shadow: var(--shadow-lg);
    max-height: 90vh; overflow-y: auto;
    transition: background-color 0.25s ease;
}
.modal-box::-webkit-scrollbar { width: 4px; }
.modal-box::-webkit-scrollbar-thumb { background: var(--glass-border); border-radius: 2px; }

.modal-close {
    position: absolute; top: 14px; right: 16px;
    font-size: 22px; cursor: pointer;
    border: none; background: none; color: var(--text-muted);
    transition: color 0.15s;
}
.modal-close:hover { color: var(--text-primary); }
.modal-title { font-size: 18px; font-weight: 700; color: var(--text-primary); margin-bottom: 16px; }
.modal-desc { font-size: 13px; color: var(--text-secondary); margin-bottom: 16px; line-height: 1.6; }

/* ── フォーム ─────────────────────────────────── */
.form-group { margin-bottom: 14px; }
.form-group label {
    display: block;
    font-size: 12px;
    color: var(--text-secondary);
    margin-bottom: 5px;
    font-weight: 500;
    letter-spacing: 0.02em;
}
.form-group input, .form-group select {
    width: 100%; padding: 9px 12px;
    background: var(--bg-input);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-sm);
    font-size: 14px;
    font-family: var(--font);
    color: var(--text-primary);
    transition: border-color 0.15s, background 0.15s;
}
.form-group input::placeholder { color: var(--text-muted); }
.form-group select option { background: var(--bg-card-solid); color: var(--text-primary); }
.form-group input:focus, .form-group select:focus {
    border-color: var(--accent);
    background: var(--bg-input-focus);
}
.radio-group { display: flex; gap: 20px; padding-top: 4px; }
.radio-group label {
    font-size: 14px; color: var(--text-secondary);
    display: flex; align-items: center; gap: 6px;
    cursor: pointer;
}
.radio-group input[type="radio"] { accent-color: var(--accent); }

/* ── タブ ────────────────────────────────────── */
/* タブバーラッパー: 右端フェードヒント */
.tab-bar-wrap {
    position: relative;
    margin-bottom: 18px;
}
.tab-bar-wrap::after {
    content: '';
    position: absolute;
    right: 0; top: 0; bottom: 1px;
    width: 40px;
    background: linear-gradient(to right, transparent, var(--bg-sheet, #1e293b));
    pointer-events: none;
    opacity: 1;
    transition: opacity 0.2s;
}
.tab-bar-wrap.scrolled-end::after { opacity: 0; }

.tab-bar {
    display: flex; gap: 2px;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;      /* Firefox */
    -ms-overflow-style: none;   /* IE/Edge */
    margin-bottom: 0;
    border-bottom: 1px solid var(--border);
    padding-bottom: 0;
}
.tab-bar::-webkit-scrollbar { display: none; } /* Chrome/Safari */
.tab-btn {
    display: flex; align-items: center; gap: 4px;
    padding: 8px 10px;
    min-height: 44px;  /* WCAG 2.5.8 タッチターゲット */
    font-size: 12px; font-weight: 500;
    font-family: var(--font);
    border: none; background: none;
    color: var(--text-muted);
    cursor: pointer;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    transition: color 0.15s;
    white-space: nowrap;
}
.tab-btn svg { width: 12px; height: 12px; }
.tab-btn:hover { color: var(--text-secondary); }
.tab-btn.active { color: var(--accent); border-bottom-color: var(--accent); font-weight: 700; }
.tab-content.hidden { display: none; }

/* 専門家モードトグル — Hick's Law 対策 (デフォルト基本5タブのみ表示) */
.calc-mode-toggle-bar {
    display: flex; justify-content: flex-end;
    margin-bottom: 8px;
    /* 右上の modal-close (X) ボタンと重ならないよう右余白を確保 */
    padding-right: 44px;
}
.calc-mode-toggle {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 12px; color: var(--text-muted);
    cursor: pointer; user-select: none;
    padding: 4px 10px;
    border-radius: 14px;
    border: 1px solid var(--border);
    background: transparent;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.calc-mode-toggle:hover { background: rgba(232,84,122,0.05); border-color: var(--accent-muted, #d1d5db); }
.calc-mode-toggle input[type="checkbox"] {
    width: 14px; height: 14px; cursor: pointer;
    accent-color: var(--accent);
}
.calc-mode-toggle-label {
    display: inline-flex; align-items: center; gap: 4px;
    font-weight: 600;
}
.calc-mode-toggle-desc {
    font-size: 11px; color: var(--text-muted);
    font-weight: 400;
    margin-left: 2px;
}
/* 専門家タブ: デフォルト非表示。expert-mode クラス付与時に表示 */
.tab-btn[data-tab-group="expert"] { display: none; }
body.calc-expert-mode .tab-btn[data-tab-group="expert"] { display: inline-flex; }
/* モバイル: 説明文は非表示 (スペース確保) */
@media (max-width: 640px) {
    .calc-mode-toggle-desc { display: none; }
}

/* ── フォーム2列 ──────────────────────────────── */
.form-row { display: flex; gap: 10px; }
.form-row .form-group { flex: 1; }

/* ── 計算結果 ─────────────────────────────────── */
/* 決定ボックス — 計算結果ごとに「買う / 待つ / 再検討」の結論を明示
   (18名専門家合意: 数字だけでなく結論を出すのが UX 差別化要因) */
.decision-box {
    display: flex; align-items: flex-start; gap: 12px;
    padding: 14px 16px;
    margin: 14px 0;
    border-radius: 10px;
    border-left: 4px solid var(--db-accent, #3b82f6);
    background: var(--db-bg, rgba(59,130,246,0.08));
}
/* DESIGN.md v2: 비비드 색 → affordable/marginal/over 토큰 통일 (부동산 신뢰감) */
.decision-box--buy        { --db-accent: var(--affordable); --db-bg: var(--affordable-bg); }
.decision-box--wait       { --db-accent: var(--marginal);   --db-bg: var(--marginal-bg); }
.decision-box--reconsider { --db-accent: var(--marginal);   --db-bg: var(--marginal-bg); }
.decision-box-icon {
    font-size: 22px; line-height: 1;
    flex-shrink: 0;
    padding-top: 2px;
}
.decision-box-body { flex: 1; min-width: 0; }
.decision-box-verdict {
    font-size: 15px; font-weight: 800;
    color: var(--db-accent, #3b82f6);
    margin-bottom: 4px;
}
.decision-box-reason {
    font-size: 12px;
    color: var(--text-secondary);
    line-height: 1.55;
}

/* P0 (2026-04-23): stop variant (decision.js 의 'stop' verdict) — DESIGN.md over 토큰 */
.decision-box--stop       { --db-accent: var(--over); --db-bg: var(--over-bg); }

/* P0: large variant — 結論 박스를 화면 최상단 주요 요소로 배치할 때 사용 */
.decision-box--large {
    padding: 18px 22px;
    margin: 4px 0 14px;
    border-left-width: 5px;
    border-radius: 12px;
}
.decision-box--large .decision-box-icon { font-size: 28px; }
.decision-box--large .decision-box-verdict {
    font-size: 20px;
    margin-bottom: 6px;
    line-height: 1.3;
}
.decision-box--large .decision-box-reason {
    font-size: 14px;
    line-height: 1.6;
}

/* P0: 데모값 표기 뱃지 */
.demo-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 10px;
    font-size: 11px;
    font-weight: 600;
    color: var(--text-muted, #5D6875);
    background: rgba(93,104,117,0.12);
    border-radius: 999px;
    line-height: 1.5;
    letter-spacing: 0.02em;
}

/* P0: 추천칩 — 균등 weight, 단일 대표값 강조 금지 */
.recommendation-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 10px 0 12px;
}
.recommendation-chip {
    padding: 8px 14px;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary, #1A2332);
    background: var(--bg-page, #FAF7F2);
    border: 1.5px solid rgba(26,35,50,0.15);
    border-radius: 999px;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
    font-family: inherit;
    line-height: 1.4;
}
.recommendation-chip:hover {
    border-color: var(--accent, #E8547A);
    background: rgba(232,84,122,0.06);
}
.recommendation-chip:focus-visible {
    outline: 2px solid var(--accent, #E8547A);
    outline-offset: 2px;
}
.recommendation-chip.active {
    background: var(--accent, #E8547A);
    color: #fff;
    border-color: var(--accent, #E8547A);
}

/* P0: 구 시트 결론 박스 요약 (탭 바 바깥·sheet 상단) */
.ward-sheet-summary {
    padding: 8px 16px 12px;
    border-bottom: 1px solid rgba(26,35,50,0.08);
    margin-bottom: 4px;
}
.ward-sheet-summary .decision-box {
    margin: 0;
}

/* P0: 역 팝업에서 강등된 가격 메트릭 */
.popup-metric {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin: 8px 0 4px;
    color: var(--text-muted, #5D6875);
    font-size: 12px;
}
.popup-metric-value {
    font-weight: 700;
    font-size: 15px;
    color: var(--text-primary, #1A2332);
}

.calc-result {
    margin-top: 14px; padding: 14px;
    background: var(--bg-result);
    border: 1px solid rgba(232,84,122,0.25);
    border-radius: var(--radius-md);
}
.calc-result.hidden { display: none; }
.calc-result-row {
    display: flex; justify-content: space-between;
    padding: 5px 0; font-size: 14px;
}
.calc-result-row .label { color: var(--text-secondary); }
/* DESIGN.md v2: 사쿠라 = CTA·브랜드 전용. 결과 숫자는 검정 (#1A2332) + decision-box 가 단계 표시. */
.calc-result-row .value { font-weight: 700; color: var(--text-primary); font-size: 16px; }
.calc-note { font-size: 11px; color: var(--text-muted); margin-top: 10px; line-height: 1.5; }
.calc-disclaimer { font-size: 10px; color: var(--text-muted); margin-top: 8px; line-height: 1.5; opacity: 0.75; }
/* 景品表示法 広告ラベル (インライン) */
.ad-label-inline { display: inline-block; font-size: 9px; font-weight: 700; padding: 1px 4px; border: 1px solid rgba(255,255,255,0.25); border-radius: 2px; color: var(--text-muted); vertical-align: middle; margin-right: 3px; letter-spacing: 0.05em; }

/* ── 金利推移チャート ────────────────────────── */
.rate-history-section {
    margin-top: 20px;
    padding: 14px 16px;
    background: var(--bg-stat);
    border-radius: 10px;
    border: 1px solid var(--glass-border);
}
.rate-history-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
}
.rate-history-title {
    font-size: 13px;
    font-weight: 700;
    color: var(--text-primary);
}
.rate-history-source {
    font-size: 10px;
    color: var(--text-muted);
}
.rate-history-legend {
    display: flex;
    gap: 12px;
    margin-bottom: 10px;
    flex-wrap: wrap;
}
.rh-legend-item {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    color: var(--text-secondary);
}
.rh-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}
.rate-history-chart-wrap {
    position: relative;
    height: 180px;
}
.rate-history-loading {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    color: var(--text-muted);
}

/* ── 賃貸vs購入結果 ─────────────────────────── */
.rvb-result {
    margin-top: 14px; padding: 14px;
    background: var(--bg-stat);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-md);
    max-height: 420px; overflow-y: auto;
}
.rvb-result.hidden { display: none; }

/* ── アラート結果 ────────────────────────────── */
.alert-result {
    margin-top: 14px; padding: 12px;
    border-radius: var(--radius-sm);
    font-size: 14px; text-align: center;
}
.alert-result.hidden { display: none; }
.alert-schedule-note {
    display: block;
    margin-top: 8px;
    font-size: 12px;
    opacity: 0.75;
    line-height: 1.6;
}
/* アラート結果 — ライトモード: 濃い文字で視認性確保 */
.alert-result.success {
    background: rgba(22, 101, 52, 0.08);
    color: #166534;
    border: 1px solid rgba(22, 101, 52, 0.22);
}
.alert-result.error {
    background: rgba(153, 27, 27, 0.08);
    color: #991b1b;
    border: 1px solid rgba(153, 27, 27, 0.22);
}

/* ── Mapboxコントロール位置調整 ─────────────── */
.mapboxgl-ctrl-bottom-right {
    bottom: 32px !important;
    right: 14px !important;
}
.mapboxgl-ctrl-group {
    background: var(--bg-card-solid) !important;
    border: 1px solid var(--glass-border) !important;
    box-shadow: var(--shadow-md) !important;
}
.mapboxgl-ctrl-group button {
    background-color: transparent !important;
}

/* ── 機会費用スライダー ─────────────────────── */
.range-slider {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 6px;
    border-radius: 3px;
    background: var(--glass-border);
    outline: none;
    cursor: pointer;
    margin-top: 8px;
}
.range-slider:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
}
.range-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--accent);
    cursor: pointer;
    box-shadow: 0 0 4px var(--accent-glow);
}
.range-slider::-moz-range-thumb {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--accent);
    cursor: pointer;
    border: none;
}

/* ── タブ説明文 ─────────────────────────────── */
.tab-desc {
    font-size: 12px;
    color: var(--text-secondary);
    margin-bottom: 14px;
    line-height: 1.6;
}

/* ── SNS シェアボタン ────────────────────────── */
.share-row {
    display: flex;
    gap: 8px;
}
.btn-share {
    flex: 1;
    padding: 8px 12px;
    border: none;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    transition: opacity 0.2s;
}
.btn-share:hover { opacity: 0.85; }
.btn-twitter {
    background: #000;
    color: #fff;
    border: 1px solid #333;
}
.btn-line {
    background: #06c755;
    color: #fff;
}
.btn-share i { width: 14px; height: 14px; }

/* ── クレジットリンク ────────────────────────── */
.credit-link {
    color: var(--accent);
    text-decoration: none;
    font-size: 11px;
}
.credit-link:hover { text-decoration: underline; }

/* mapbox-gl-geocoder テーマ: 削除（2026-04-23 — Fuse.js 検索に代替済み / ライブラリ未ロード） */

/* Tippy / Tabulator テーマ: style-libs.css に分離（2026-04-23 — async ロード） */

/* ── 金利フィルタボタン ──────────────────────────── */
.rates-filter {
    display: flex;
    gap: 8px;
    margin-bottom: 12px;
}
.rate-filter-btn {
    padding: 5px 14px;
    border-radius: 20px;
    border: 1px solid var(--glass-border);
    background: transparent;
    color: var(--text-secondary);
    font-size: 12px;
    font-family: var(--font);
    cursor: pointer;
    transition: all 0.15s;
}
.rate-filter-btn.active,
.rate-filter-btn:hover {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
}

/* SweetAlert2 / Toastify / mapbox-gl-draw / Turf / Swiper テーマ:
   style-libs.css に分離（2026-04-23 — async ロード）。
   GLightbox 物件写真グリッド: 削除（2026-04-23 — ライブラリ除去 / photo-gallery 等参照 0 件） */

/* 写真タブ ブックマークボタン */
.photo-bookmark-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
    gap: 8px;
}
.btn-photo-bookmark {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    padding: 5px 12px;
    border-radius: 20px;
    border: 1.5px solid var(--color-trust);
    background: var(--color-trust-muted);
    color: var(--color-trust);
    cursor: pointer;
    transition: background 0.15s, transform 0.1s;
    font-family: var(--font);
}
.btn-photo-bookmark:hover  { background: var(--color-trust-muted); filter: brightness(1.15); }
.btn-photo-bookmark.saved  { background: var(--color-trust); color: #fff; }
.btn-photo-bookmark.saved:hover { filter: brightness(0.9); }
/* 実取引を報告ボタン */
.btn-report-record {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    padding: 5px 12px;
    border-radius: 20px;
    border: 1.5px solid var(--color-trust);
    background: transparent;
    color: var(--color-trust);
    cursor: pointer;
    transition: background 0.15s;
    font-family: var(--font);
    margin-top: 8px;
}
.btn-report-record:hover { background: var(--color-trust-muted); }

/* ── 投資収支タブ ─────────────────────────────────── */
#inv-result .calc-result-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 0;
    font-size: 14px;
}
#inv-result .label { color: var(--text-secondary); }
#inv-result .value { font-weight: 600; color: var(--text-primary); }

/* ── アフィリエイトCTA ─────────────────────────── */
.affiliate-cta {
    margin-top: 10px;
    padding: 12px 14px 8px;
    background: linear-gradient(135deg, rgba(232,84,122,0.06), rgba(16,185,129,0.06));
    border: 1px solid rgba(232,84,122,0.18);
    border-radius: var(--radius-md);
}
.affiliate-cta-inner {
    display: flex;
    align-items: center;
    gap: 10px;
}
.affiliate-cta-icon { font-size: 22px; flex-shrink: 0; }
.affiliate-cta-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.affiliate-cta-head {
    font-size: 13px;
    color: var(--text-primary);
    font-weight: 700;
}
.affiliate-cta-sub {
    font-size: 11px;
    color: var(--text-secondary);
}
.affiliate-cta-btn {
    flex-shrink: 0;
    padding: 7px 14px;
    background: var(--accent);
    color: #fff;
    border-radius: var(--radius-sm);
    text-decoration: none;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
    transition: background 0.15s;
}
.affiliate-cta-btn:hover { background: var(--accent-hover); }
.affiliate-disc {
    font-size: 10px;
    color: var(--text-muted);
    margin: 6px 0 0;
    text-align: right;
}

/* ══════════════════════════════════════════════
   ウェルカムオーバーレイ (A5)
══════════════════════════════════════════════ */
.welcome-overlay {
    position: fixed;
    inset: 0;
    z-index: 4000;
    background: var(--backdrop-default);  /* DESIGN.md v2: surface-inverse 60% */
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    animation: welcomeFadeIn 0.4s ease;
}
.welcome-overlay.hidden { display: none; }

@keyframes welcomeFadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.welcome-card {
    background: var(--bg-card-solid);
    border: 1px solid var(--glass-border);
    border-radius: 20px;
    padding: 40px 32px 32px;
    max-width: 420px;
    width: 100%;
    text-align: center;
    box-shadow: var(--shadow-lg);
    animation: welcomeSlideUp 0.4s ease;
}

@keyframes welcomeSlideUp {
    from { transform: translateY(20px); opacity: 0; }
    to   { transform: translateY(0);    opacity: 1; }
}

.welcome-icon {
    font-size: 48px;
    margin-bottom: 16px;
    display: block;
}
.welcome-title {
    font-size: 22px;
    font-weight: 800;
    color: var(--text-primary);
    line-height: 1.4;
    margin-bottom: 10px;
    letter-spacing: -0.02em;
}
.welcome-sub {
    font-size: 14px;
    color: var(--text-secondary);
    line-height: 1.7;
    margin-bottom: 28px;
}
.welcome-cta {
    width: 100%;
    padding: 14px;
    background: var(--accent);
    color: #fff;
    border: none;
    border-radius: var(--radius-md);
    font-size: 16px;
    font-family: var(--font);
    font-weight: 700;
    cursor: pointer;
    transition: background 0.15s, transform 0.15s;
    margin-bottom: 12px;
}
.welcome-cta:hover { background: var(--accent-hover); transform: translateY(-1px); }
.welcome-skip {
    font-size: 13px;
    color: var(--text-muted);
    background: none;
    border: none;
    cursor: pointer;
    font-family: var(--font);
    transition: color 0.15s;
    text-decoration: underline;
}
.welcome-skip:hover { color: var(--text-secondary); }

/* ウェルカムカード内スライダー */
.welcome-slider-wrap {
    background: rgba(255,255,255,0.04);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-md);
    padding: 16px 18px;
    margin-bottom: 20px;
    text-align: left;
}
.welcome-slider-label-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}
.welcome-slider-label {
    font-size: 12px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}
.welcome-slider-val {
    font-size: 18px;
    font-weight: 800;
    color: var(--accent);
    font-family: var(--font-num);
}
.welcome-income-slider {
    margin: 0;
    width: 100%;
}
.welcome-budget-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 10px;
}
.welcome-budget-label {
    font-size: 12px;
    color: var(--text-muted);
}
.welcome-budget-val {
    font-size: 15px;
    font-weight: 700;
    color: var(--text-primary);
    font-family: var(--font-num);
}

/* ══════════════════════════════════════════════
   年収スライダーバー (B1)
══════════════════════════════════════════════ */
.income-bar {
    position: fixed;
    top: 64px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1500;
    display: flex;
    align-items: center;
    flex-wrap: nowrap;  /* 折り返し禁止 — モバイルで高さが増えて地図を覆う問題防止 */
    gap: 12px;
    padding: 10px 20px;
    background: var(--bg-card);
    backdrop-filter: var(--blur);
    -webkit-backdrop-filter: var(--blur);
    border: 1px solid var(--glass-border);
    border-radius: 32px;
    box-shadow: var(--shadow-lg);
    white-space: nowrap;
    transition: opacity 0.3s, transform 0.3s;
    max-width: 90vw;
}
.income-bar.hidden {
    opacity: 0;
    pointer-events: none;
    transform: translateX(-50%) translateY(-8px);
}

.income-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-muted);
    flex-shrink: 0;
}
.income-slider {
    -webkit-appearance: none;
    appearance: none;
    width: 160px;
    height: 4px;
    border-radius: 2px;
    background: var(--border);
    outline: none;
    cursor: pointer;
    flex-shrink: 0;
    touch-action: none;  /* スライダードラッグ中に地図がパンしないよう禁止 */
}
.income-slider:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
}
.income-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 18px; height: 18px;
    border-radius: 50%;
    background: var(--accent);
    cursor: pointer;
    box-shadow: 0 0 0 3px var(--accent-glow);
    transition: box-shadow 0.15s;
}
.income-slider::-webkit-slider-thumb:hover {
    box-shadow: 0 0 0 5px var(--accent-glow);
}
.income-slider::-moz-range-thumb {
    width: 18px; height: 18px;
    border-radius: 50%;
    background: var(--accent);
    cursor: pointer;
    border: none;
}
.income-display {
    font-size: 15px;
    font-weight: 700;
    color: var(--accent);
    min-width: 72px;
    flex-shrink: 0;
}
.income-budget {
    font-size: 12px;
    color: var(--text-secondary);
    flex-shrink: 0;
}
/* 年収レンジボタン */
.income-range-btns {
    display: flex;
    gap: 5px;
    flex-wrap: nowrap;
}
.income-range-btn {
    padding: 5px 11px;
    background: var(--bg-stat);
    border: 1px solid var(--border);
    border-radius: 20px;
    color: var(--text-muted);
    font-size: 12px;
    font-family: var(--font);
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
    flex-shrink: 0;
}
.income-range-btn:hover {
    background: rgba(59,130,246,0.2);
    border-color: var(--accent);
    color: var(--text-primary);
}
.income-range-btn.active {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
    font-weight: 600;
}

/* ウェルカムオーバーレイ内のレンジボタン */
.welcome-range-btns {
    margin: 10px 0;
    flex-wrap: wrap;
    justify-content: center;
}

/* B2 시그니처: 예산 내 역 개수 카운터 — DESIGN.md 결론 テスト 정합 (사장님 #2 비판: "어쩌라고" 결론 부재 시정) */
.income-station-count {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 14px;
    background: var(--bg-card-solid, #FFFFFF);
    border: 1px solid var(--success, #1A6644);
    border-radius: 14px;
    font-size: 14px;
    font-weight: 700;
    color: var(--text-primary, #1A2332);
    flex-shrink: 0;
    white-space: nowrap;
    animation: incomeCountFadeIn 0.3s ease;
}
.income-station-count.hidden { display: none; }
.income-station-count .isc-icon { font-size: 13px; }
#isc-affordable {
    font-variant-numeric: tabular-nums;
    min-width: 1.2em;
    display: inline-block;
    text-align: right;
    font-size: 18px;
    color: var(--success, #1A6644);
    font-weight: 700;
}
#isc-borderline {
    font-size: 11px;
    color: #fbbf24;
    font-weight: 600;
}
#isc-bl-num { font-variant-numeric: tabular-nums; }

/* 頭金入力行 */
.income-down-row {
    display: inline-flex; align-items: center; gap: 4px;
    flex-shrink: 0;
}
.income-down-label {
    font-size: 11px; color: var(--text-muted); white-space: nowrap;
}
.income-down-input {
    width: 64px;
    padding: 3px 6px;
    border: 1px solid var(--glass-border, rgba(255,255,255,0.15));
    border-radius: 6px;
    background: var(--bg-stat, rgba(255,255,255,0.06));
    color: var(--text, #f1f5f9);
    font-size: 12px;
    font-family: var(--font);
    text-align: right;
    outline: none;
    transition: border-color 0.15s;
}
.income-down-input:focus { border-color: var(--accent, #e8547a); }
.income-down-input { color: var(--text-primary, #1A2332); background: #f8f9fb; }
.income-down-unit { font-size: 11px; color: var(--text-muted); }
@keyframes incomeCountFadeIn {
    from { opacity: 0; transform: translateX(-4px); }
    to   { opacity: 1; transform: translateX(0); }
}

.income-reset {
    font-size: 11px;
    color: var(--text-muted);
    background: none;
    border: none;
    cursor: pointer;
    font-family: var(--font);
    padding: 2px 6px;
    border-radius: var(--radius-sm);
    transition: background 0.15s, color 0.15s;
    flex-shrink: 0;
}
.income-reset:hover {
    background: var(--bg-stat);
    color: var(--text-secondary);
}
.income-privacy-note {
    font-size: 10px;
    color: var(--text-muted);
    opacity: 0.75;
    white-space: nowrap;
    flex-shrink: 0;
}
.income-privacy-note a {
    color: var(--text-muted);
    text-decoration: underline;
}

/* 収入モード時の凡例オーバーライド */
.affordability-legend {
    display: none;
    flex-direction: column;
    gap: 4px;
}
.income-mode .affordability-legend { display: flex; }
.income-mode .price-legend-items  { display: none; }
.afford-row {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 11px;
    color: var(--text-secondary);
}
.afford-color {
    display: inline-block;
    width: 14px; height: 10px;
    border-radius: 2px;
    flex-shrink: 0;
}

/* 収入モード共有ボタン */
.income-share-btn {
    position: fixed;
    bottom: 80px;   /* Mapbox attribution (bottom:32px) と重ならないよう上に移動 */
    right: 16px;
    z-index: 1500;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    background: #1d9bf0;
    color: #fff;
    border: none;
    border-radius: 24px;
    font-size: 13px;
    font-family: var(--font);
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 4px 16px rgba(29,155,240,0.35);
    transition: background 0.15s, transform 0.15s;
    animation: shareBtnIn 0.3s ease;
}
.income-share-btn.hidden { display: none; }
.income-share-btn:hover { background: #1a8cd8; transform: translateY(-1px); }

@keyframes shareBtnIn {
    from { transform: translateY(10px); opacity: 0; }
    to   { transform: translateY(0);    opacity: 1; }
}

/* ══════════════════════════════════════════════
   価格コンテキストバッジ (C2)
══════════════════════════════════════════════ */
.price-context-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 600;
    margin-left: 8px;
    vertical-align: middle;
}
.price-context-badge.above-avg {
    background: rgba(220, 38, 38, 0.12);
    color: var(--danger);
    border: 1px solid rgba(220, 38, 38, 0.20);
}
.price-context-badge.below-avg {
    background: rgba(22, 163, 74, 0.12);
    color: var(--success);
    border: 1px solid rgba(22, 163, 74, 0.20);
}

/* ══════════════════════════════════════════════
   計算機タブ「もっと見る」(C1) — 削除済み: 全タブをスクロール表示に変更
══════════════════════════════════════════════ */

/* ══════════════════════════════════════════════
   物件リストパネル（SUUMO風左パネル）
══════════════════════════════════════════════ */
.property-panel {
    position: fixed;
    top: 56px; left: 0; bottom: 0;
    width: 360px;
    background: var(--bg-sheet);
    border-right: 1px solid var(--glass-border);
    z-index: 900;
    display: flex;
    flex-direction: column;
    transform: translateX(-100%);
    transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 2px 0 20px rgba(0,0,0,0.12);
}
.property-panel.open {
    transform: translateX(0);
}

/* パネル閉じるボタン: モバイルでは必須 (全画面を覆うため)
   panel-toggle-btn と被らないよう z-index を高く設定 (z: 1001) */
.property-panel-close {
    position: absolute; top: 8px; right: 8px;
    width: 44px; height: 44px;   /* WCAG 2.5.8 タッチターゲット 44x44px */
    border: 1px solid var(--glass-border);
    background: var(--bg-card-solid, #fff);
    color: var(--text-primary);
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    z-index: 1001;
    box-shadow: 0 3px 12px rgba(0,0,0,0.18);
    transition: background 0.15s, color 0.15s, transform 0.1s;
    padding: 0;
    font-size: 18px;
    font-weight: 700;
    line-height: 1;
}
.property-panel-close:hover, .property-panel-close:focus-visible {
    background: var(--accent);
    color: #fff;
    outline: none;
    transform: scale(1.05);
}
.property-panel-close:active { transform: scale(0.95); }
.property-panel-close svg { width: 20px; height: 20px; }

/* パネルが開いているときは panel-toggle-btn (物件一覧ボタン) を非表示
   → 閉じるボタンと被らないようにする (モバイルで特に重要) */
body.panel-open .panel-toggle-btn {
    opacity: 0;
    pointer-events: none;
}

/* パネルが開いているとき地図を右にずらす */
body.panel-open #map             { left: 360px; right: 0; }
body.panel-open .layer-controls  { left: 374px; }
body.panel-open .map-bottom-left { left: 374px; }
/* income-bar は transform:translateX(-50%) でセンタリングのためパネル開時も自動調整 */
body.panel-open .income-share-btn { right: 32px; }
body.panel-open .panel-toggle-btn { left: 368px; }

.panel-header {
    padding: 12px 16px 10px;
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
}
.panel-header-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
}
.panel-title {
    font-size: 14px;
    font-weight: 700;
    color: var(--text-primary);
}
.panel-count {
    font-size: 12px;
    color: var(--text-muted);
    background: var(--bg-stat);
    padding: 2px 8px;
    border-radius: 10px;
}
.panel-sort-row {
    display: flex;
    align-items: center;
    gap: 8px;
}
.panel-sort-label {
    font-size: 11px;
    color: var(--text-muted);
    flex-shrink: 0;
}
.panel-sort-select {
    flex: 1;
    font-size: 11px;
    font-family: var(--font);
    color: var(--text-primary);
    background: var(--bg-input);
    border: 1px solid var(--glass-border);
    border-radius: 6px;
    padding: 4px 8px;
    outline: none;
    cursor: pointer;
}
.panel-sort-select:focus-visible {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(232,84,122,0.25);
}

.panel-list {
    flex: 1;
    overflow-y: auto;
    padding: 8px 0;
}
.panel-list::-webkit-scrollbar { width: 4px; }
.panel-list::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }

.panel-hint {
    color: var(--text-muted);
    font-size: 13px;
    text-align: center;
    padding: 40px 20px;
    line-height: 1.6;
}

/* 取引カード */
.txn-card {
    padding: 12px 16px;
    border-bottom: 1px solid var(--border);
    cursor: pointer;
    transition: background 0.15s;
    position: relative;
}
.txn-card:hover { background: var(--bg-stat); }
.txn-card.highlighted {
    background: rgba(232, 84, 122, 0.06);
    border-left: 3px solid var(--accent);
}
.txn-card-top {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 4px;
}
.txn-price {
    font-size: 18px;
    font-weight: 700;
    color: var(--text-primary);
    letter-spacing: -0.02em;
}
.txn-price-unit {
    font-size: 12px;
    font-weight: 400;
    color: var(--text-muted);
    margin-left: 2px;
}
.txn-period {
    font-size: 11px;
    color: var(--text-muted);
}
.txn-details {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 4px;
}
.txn-tag {
    font-size: 11px;
    color: var(--text-secondary);
    background: var(--bg-stat);
    border: 1px solid var(--border);
    padding: 1px 6px;
    border-radius: 4px;
    white-space: nowrap;
}
.txn-tag.fp { color: var(--accent); border-color: var(--accent-glow); background: rgba(232,84,122,0.07); }
.txn-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.txn-area-name {
    font-size: 12px;
    color: var(--text-secondary);
    font-weight: 500;
}
.txn-unit-price {
    font-size: 11px;
    color: var(--text-muted);
}
.txn-source-badge {
    font-size: 10px;
    color: var(--text-muted);
    background: var(--bg-stat);
    padding: 1px 5px;
    border-radius: 3px;
    border: 1px solid var(--border);
}
.txn-source-badge.mlit {
    color: var(--success);
    background: rgba(22, 163, 74, 0.06);
    border-color: rgba(22, 163, 74, 0.2);
}

.panel-source {
    padding: 8px 16px;
    font-size: 10px;
    color: var(--text-muted);
    border-top: 1px solid var(--border);
    line-height: 1.5;
    flex-shrink: 0;
}
.panel-source-note { opacity: 0.7; }

/* パネル開閉ボタン */
.panel-toggle-btn {
    position: fixed;
    top: 68px;
    left: 14px;
    z-index: 950;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    background: var(--bg-card);
    backdrop-filter: var(--blur);
    -webkit-backdrop-filter: var(--blur);
    border: 1px solid var(--glass-border);
    border-radius: 20px;
    font-size: 12px;
    font-weight: 500;
    font-family: var(--font);
    color: var(--text-secondary);
    cursor: pointer;
    box-shadow: var(--shadow-md);
    transition: all 0.2s;
    white-space: nowrap;
}
.panel-toggle-btn svg { width: 14px; height: 14px; }
.panel-toggle-btn:hover, .panel-toggle-btn.active {
    background: var(--accent);
    color: #fff;
    border-color: var(--accent);
}
.panel-toggle-label { font-size: 12px; }

/* パネル開時のレイヤーコントロール位置調整トランジション */
#map, .layer-controls, .map-bottom-left, #income-bar, .panel-toggle-btn {
    transition: left 0.28s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ══════════════════════════════════════════════
   モバイル対応 (A1-A4) — @media (max-width: 767px)
   iPhone 横向き (max-height: 500px) も対象に追加:
   - iPhone 15 Pro 横 = 844×390 → 従来は「タブレット」UI が適用されネビ崩壊
   - 高さが 500px 未満なら必ずモバイル UI (ヘッダアイコンのみ・縦 UI)
══════════════════════════════════════════════ */
@media (max-width: 767px), (max-height: 500px) {

    /* ヘッダー: ロゴテキスト非表示→検索スペース確保 */
    .logo-text { display: none; }

    /* 検索バー: 小さく調整（表示維持） */
    .header-search {
        flex: 1;
        max-width: none;
        min-width: 0;
    }
    .search-input { font-size: 12px; padding: 7px 10px 7px 32px; }

    /* ヘッダーボタン: テキスト非表示・アイコンのみ */
    .btn-header { padding: 8px 10px; min-height: 44px; }
    #btn-calc, #btn-alert, #btn-compare {
        font-size: 0;
        padding: 8px 9px;
        gap: 0;
    }
    #btn-calc svg, #btn-alert svg, #btn-compare svg {
        width: 16px; height: 16px;
    }

    /* レイヤーコントロール: 左側縦並び・コンテナはポインターイベント透過
       → full-width化して地図タッチを塞ぐ問題を修正 */
    .layer-controls {
        top: 116px;
        bottom: auto;
        left: 8px;
        right: auto;           /* 全幅にしない — 地図タッチを塞がないよう */
        width: auto;
        max-width: 130px;
        flex-direction: column;
        flex-wrap: nowrap;
        gap: 4px;
        pointer-events: none;  /* コンテナ透過 — ボタン以外の場所は地図に届く */
    }
    .layer-btn {
        pointer-events: auto;  /* ボタン自体はクリック可能 */
        padding: 5px 10px;
        font-size: 10px;
        white-space: nowrap;
    }

    /* 左下ウィジェット: バトムシートと干渉しないよう非表示 */
    .map-bottom-left {
        display: none;
    }

    /* バトムシート: 最大高さ拡大、スワイプ対応 */
    .bottom-sheet {
        max-height: 85vh;
        border-radius: 16px 16px 0 0;
    }
    .bottom-sheet.expanded { max-height: 94vh; }

    /* シートが開いている間は地図へのタッチを透過させない */
    body.sheet-open #map {
        pointer-events: none;
    }

    .sheet-handle {
        width: 44px; height: 5px;
        cursor: grab;
    }
    #sheet-title { font-size: 17px; }

    .sheet-stats {
        flex-direction: column;
        gap: 8px;
    }

    /* 計算機モーダル: フルスクリーン */
    .modal { padding: 0; align-items: flex-end; }
    .modal-box {
        max-width: 100%;
        width: 100%;
        max-height: 95vh;
        border-radius: 16px 16px 0 0;
        padding: 20px 16px 24px;
    }

    /* タブバー: 横スクロール（計算機 + バトムシート両対応）*/
    .tab-bar,
    .sheet-tab-bar {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        padding-bottom: 0;
        gap: 0;
    }
    .tab-bar::-webkit-scrollbar,
    .sheet-tab-bar::-webkit-scrollbar { display: none; }
    .tab-btn { font-size: 11px; padding: 8px 8px; min-height: 44px; }
    .sheet-tab { font-size: 11px; padding: 8px 10px; white-space: nowrap; }

    /* フォーム2列→1列 */
    .form-row { flex-direction: column; gap: 0; }

    /* 年収バー: 横スクロール対応 (1000万~ が切れる問題を修正) */
    .income-bar {
        top: 56px;
        left: 0;
        right: 0;
        transform: none;
        border-radius: 0;
        padding: 6px 8px;
        gap: 6px;
        width: 100%;
        box-sizing: border-box;
        justify-content: flex-start;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        position: fixed;  /* 右端 fade のため position 確認 */
    }
    .income-bar::-webkit-scrollbar { display: none; }
    /* 右端スクロールヒント: 幅縮小・薄く (1000万~ ピルが切れて見える問題を修正) */
    .income-bar::after {
        content: '';
        position: absolute;
        right: 0; top: 0; bottom: 0;
        width: 14px;
        background: linear-gradient(to right, transparent, var(--bg-header, rgba(8,14,26,0.80)));
        pointer-events: none;
    }

    /* クッキーバナー: モバイルでコンパクト化 (従来は画面 1/3 占拠)
       - nowrap で 1 行に圧縮 / アクション ボタン小型化 */
    .cookie-banner {
        padding: 8px 10px;
        gap: 8px;
        flex-wrap: nowrap;
        align-items: center;
    }
    .cookie-text {
        font-size: 11px;
        line-height: 1.35;
        min-width: 0;
    }
    .cookie-actions { gap: 4px; }
    .cookie-banner button {
        padding: 6px 10px !important;
        font-size: 11px !important;
        white-space: nowrap;
    }
    .income-range-btns {
        gap: 3px;
        flex-wrap: nowrap;
        flex-shrink: 0;
    }
    .income-range-btn {
        padding: 4px 8px;
        font-size: 11px;
        white-space: nowrap;
        flex-shrink: 0;
    }
    .income-budget { display: none; }
    /* B2: 모바일에서는 카운터 유지 (핵심 시그니처 지표) */
    .income-station-count {
        font-size: 11px;
        padding: 3px 8px;
    }

    /* 地図レジェンド: モバイルではコンパクト化 + 折りたたみ可能 */
    .map-legend {
        padding: 6px 10px;
        font-size: 10px;
        max-width: 150px;
    }
    .map-legend .legend-title {
        font-size: 10px;
        margin-bottom: 4px;
    }
    .map-legend .legend-row { font-size: 10px; gap: 5px; }

    /* レイヤーコントロールはincome-bar分だけ下にオフセット */
    #income-bar ~ .layer-controls { top: 116px; }

    /* 比較バナー: income-bar下に配置 */
    .compare-banner {
        top: auto;
        bottom: calc(85vh + 8px);
        left: 8px;
        right: 8px;
        transform: none;
        border-radius: 10px;
        padding: 8px 12px;
        font-size: 11px;
        gap: 8px;
        justify-content: space-between;
    }

    /* 収入共有ボタン */
    .income-share-btn { bottom: 20px; right: 12px; }

    /* ウェルカムカード */
    .welcome-card { padding: 32px 20px 24px; }
    .welcome-title { font-size: 19px; }

    /* 物件パネル: フルスクリーンオーバーレイ
       - 完全不透明背景 (--bg-card-solid) で後方 UI の透過を防止
       - iPhone safe-area 下部に対応 */
    .property-panel {
        width: 100%;
        top: 56px;
        border-right: none;
        border-top: 1px solid var(--glass-border);
        background: var(--bg-card-solid, #ffffff);  /* 98%→100% 完全不透明 */
        padding-bottom: env(safe-area-inset-bottom, 0px);
    }
    /* モバイル: パネル開いても地図は動かさない（全面オーバーレイ） */
    body.panel-open #map,
    body.panel-open .layer-controls,
    body.panel-open .map-bottom-left,
    body.panel-open #income-bar,
    body.panel-open .panel-toggle-btn { left: inherit; }

    /* パネル開時: 後方の UI 要素を全て非表示 (レイヤートグル・年収バー・マップ下ウィジェット)
       → 反透過で見えてしまう UI を完全に隠す */
    body.panel-open .layer-controls,
    body.panel-open #income-bar,
    body.panel-open .map-bottom-left,
    body.panel-open .compare-banner {
        visibility: hidden;
    }

    /* 出典表記: iPhone セーフエリアに対応 */
    .panel-source {
        padding-bottom: max(8px, env(safe-area-inset-bottom, 8px));
    }

    /* パネル開閉ボタン: モバイルは左上に配置（右上のシートFAVボタンと干渉しないよう）*/
    .panel-toggle-btn {
        top: 108px;
        bottom: auto;
        left: 8px;
        right: auto;
    }
    /* バトムシート開放中は物件一覧ボタンを非表示 (FAVボタンと重なり防止) */
    body.sheet-open .panel-toggle-btn {
        display: none;
    }
    body.panel-open .panel-toggle-btn {
        top: 108px;
        bottom: auto;
        left: auto;
        right: 8px;
    }

    /* 比較パネル: バトムシート風 */
    .compare-panel {
        bottom: 0;
        left: 0;
        right: 0;
        width: 100%;
        border-radius: 16px 16px 0 0;
        transform: none;
        max-height: 65vh;
    }
    .compare-panel-body {
        overflow-y: auto;
        max-height: calc(65vh - 48px);
        -webkit-overflow-scrolling: touch;
    }

    /* 比較テーブル: モバイル用パディング縮小 */
    .cmp-table th, .cmp-table td { padding: 6px 6px; }
    .cmp-head  { font-size: 11px; }
    .cmp-label { font-size: 10px; }
    .cmp-val   { font-size: 11px; }

    /* バトムシート内統計カード */
    .stat-card { padding: 10px 12px; }
}

/* ── タブレット (768px〜1023px) ────────────── */
@media (min-width: 768px) and (max-width: 1023px) {
    .header-search { max-width: 220px; }
    .bottom-sheet { max-height: 70vh; }
}

/* ── デスクトップ (1024px以上) — Google Maps / SUUMO パターン: 右サイドバー ── */
@media (min-width: 1024px) {
    /* バトムシート → 全高右サイドバー (translateX でスライドイン) */
    .bottom-sheet {
        top: 56px;         /* ヘッダー直下から */
        right: 0;
        bottom: 0;
        left: auto;
        width: clamp(360px, 30vw, 480px);
        max-height: none;
        /* height は top+bottom で自動計算 — calc(100vh-56px) は中複するので削除 */
        border-radius: 0;
        border-left: 1px solid var(--glass-border);
        border-top: none;
        /* 右からスライドイン (モバイルの translateY を上書き) */
        transform: translateX(100%);
        transition: transform 0.38s cubic-bezier(0.215,0.61,0.355,1),
                    background-color 0.25s ease;
        box-shadow: -6px 0 32px rgba(0,0,0,0.18);
        /* z-index: ヘッダー(2000)の直下・地図(1)より上 */
        z-index: 1800;
    }
    .bottom-sheet.open     { transform: translateX(0); }
    .bottom-sheet.expanded { max-height: none; }

    /* ハンドル・バックドロップ: デスクトップ不要 */
    .sheet-handle   { display: none; }
    .sheet-backdrop { display: none !important; }

    /* body.no-scroll: デスクトップでは地図スクロール維持 */
    body.no-scroll { overflow: visible !important; height: auto !important; }

    /* body.sheet-open #map はモバイル向けルール (pointer-events:none) を上書き */
    body.sheet-open #map {
        pointer-events: auto;            /* デスクトップでは地図を触れる状態を維持 */
        right: clamp(360px, 30vw, 480px); /* サイドバー分だけ地図を縮める */
    }

    /* 統計カード: 2列グリッド */
    .sheet-stats {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 8px;
    }

    /* タブ: 均等配置 */
    .sheet-tab-bar { gap: 0; }
    .sheet-tab { flex: 1; text-align: center; padding: 10px 8px; }

    /* 計算機モーダル: デスクトップで少し広く */
    .modal-box {
        max-width: 520px;
    }

    /* SNS共有ボタン: シート開時に左へ退避
       calc(clamp()) は Safari 14以下で不安定なため CSS変数で回避 */
    .income-share-btn {
        transition: right 0.38s cubic-bezier(0.215,0.61,0.355,1);
    }
    body.sheet-open .income-share-btn {
        --sidebar-w: clamp(360px, 30vw, 480px);
        right: calc(var(--sidebar-w) + 16px);
    }

    /* タブバー: デスクトップでは折り返しを許可 (タブが多い場合) */
    .tab-bar {
        flex-wrap: wrap;
        overflow-x: visible;
    }
    .tab-btn { font-size: 12px; white-space: nowrap; }
}

/* ══════════════════════════════════════════════
   D3: 適正価格判定器
══════════════════════════════════════════════ */
.fairness-section {
    margin-top: 18px;
    padding: 14px 16px;
    background: var(--surface-2);
    border: 1px solid var(--glass-border);
    border-radius: 10px;
}
.fairness-title {
    font-size: 13px;
    font-weight: 700;
    color: var(--text-secondary);
    margin-bottom: 4px;
}
.fairness-hint {
    font-size: 11px;
    color: var(--text-muted);
    margin-bottom: 12px;
}
.fairness-form { display: flex; flex-direction: column; gap: 8px; }
.fairness-row { display: flex; align-items: center; gap: 10px; }
.fairness-row label { font-size: 12px; color: var(--text-muted); min-width: 110px; }
.fairness-btn {
    margin-top: 4px;
    padding: 8px 16px;
    background: transparent;
    border: 1px solid var(--accent);
    color: var(--accent);
    border-radius: 8px;
    font-size: 13px;
    cursor: pointer;
    transition: background 0.18s, color 0.18s;
}
.fairness-btn:hover { background: var(--accent); color: #fff; }
.fairness-result {
    margin-top: 12px;
    padding: 12px 14px;
    border-radius: 8px;
    font-size: 13px;
    border: 1px solid transparent;
}
.fairness-result.cheap     { background: rgba(16,185,129,0.12); border-color: #10b981; }
.fairness-result.fair      { background: rgba(234,179,8,0.12);  border-color: #eab308; }
.fairness-result.high      { background: rgba(251,146,60,0.12); border-color: #fb923c; }
.fairness-result.overpriced{ background: rgba(244,63,94,0.12);  border-color: #f43f5e; }
.fairness-result.warn      { background: rgba(148,163,184,0.1); border-color: var(--glass-border); }
.fairness-verdict { font-size: 18px; font-weight: 800; margin-bottom: 6px; }
.fairness-detail  { font-size: 13px; color: var(--text-secondary); margin-bottom: 4px; }
.fairness-note    { font-size: 11px; color: var(--text-muted); }

/* ══════════════════════════════════════════════
   D1: 価格推移チャート（バトムシート概要タブ）
══════════════════════════════════════════════ */
.price-trend-section {
    margin: 14px 0 10px;
    background: var(--surface-2);
    border: 1px solid var(--glass-border);
    border-radius: 10px;
    padding: 12px 14px;
}
.trend-header {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-bottom: 10px;
}
.trend-title {
    font-size: 12px;
    font-weight: 700;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.trend-sub {
    font-size: 10px;
    color: var(--text-muted);
}
.trend-estimated-badge {
    font-size: 10px;
    color: #92400E;
    background: rgba(146, 64, 14, 0.1);
    border: 1px solid rgba(146, 64, 14, 0.3);
    border-radius: 4px;
    padding: 1px 5px;
    margin-left: auto;
}
.trend-estimated-note {
    font-size: 10px;
    color: var(--text-muted);
    margin: 6px 0 0;
    line-height: 1.5;
}
.trend-chart-wrap {
    position: relative;
    height: 90px;
}

/* ══════════════════════════════════════════════
   C4: アラート登録 3ステップウィザード
══════════════════════════════════════════════ */
.alert-wizard-box {
    max-width: 480px;
    padding: 28px 28px 24px;
}

/* ステップインジケーター */
.alert-step-indicator {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    margin-bottom: 24px;
}
.step-dot {
    width: 32px; height: 32px;
    border-radius: 50%;
    background: var(--surface-2);
    border: 2px solid var(--glass-border);
    display: flex; align-items: center; justify-content: center;
    font-size: 12px; font-weight: 700;
    color: var(--text-muted);
    transition: all 0.25s;
    flex-shrink: 0;
}
.step-dot.active {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
    box-shadow: 0 0 12px rgba(79,70,229,0.5);
}
.step-dot.done {
    background: var(--accent-muted);
    border-color: var(--accent);
    color: var(--accent);
}
.step-line {
    flex: 1;
    height: 2px;
    background: var(--glass-border);
    max-width: 60px;
    transition: background 0.25s;
}
.step-line.done { background: var(--accent); }

/* ステップコンテンツ */
.alert-step { animation: fadeInStep 0.22s ease; }
@keyframes fadeInStep {
    from { opacity: 0; transform: translateX(12px); }
    to   { opacity: 1; transform: translateX(0); }
}

/* エリアチップ */
.area-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    max-height: 180px;
    overflow-y: auto;
    padding: 4px 0;
    scrollbar-width: thin;
    scrollbar-color: var(--glass-border) transparent;
}
.area-chip {
    padding: 5px 12px;
    border-radius: 20px;
    border: 1px solid var(--glass-border);
    background: var(--surface-2);
    color: var(--text-muted);
    font-size: 12px;
    cursor: pointer;
    transition: all 0.18s;
    user-select: none;
}
.area-chip:hover {
    border-color: var(--accent);
    color: var(--text-primary);
}
.area-chip.selected {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
    font-weight: 600;
}

/* 予算サマリー */
.budget-summary {
    text-align: center;
    padding: 10px 16px;
    background: var(--surface-2);
    border-radius: 8px;
    border: 1px solid var(--accent);
    margin-bottom: 16px;
}
.budget-summary span {
    font-size: 14px;
    font-weight: 700;
    color: var(--accent);
}

/* 登録サマリーカード */
.alert-confirm-summary {
    background: var(--surface-2);
    border: 1px solid var(--glass-border);
    border-radius: 10px;
    padding: 14px 16px;
    margin-bottom: 16px;
    font-size: 13px;
    color: var(--text-secondary);
    line-height: 1.9;
}
.alert-confirm-summary strong { color: var(--text-primary); }

/* ナビゲーションボタン行 */
.alert-step-nav {
    display: flex;
    gap: 10px;
    margin-top: 4px;
}
.alert-step-nav .btn-secondary {
    flex: 0 0 auto;
    padding: 10px 16px;
    background: transparent;
    border: 1px solid var(--glass-border);
    color: var(--text-muted);
    border-radius: 8px;
    font-size: 13px;
    cursor: pointer;
    transition: border-color 0.2s, color 0.2s;
}
.alert-step-nav .btn-secondary:hover {
    border-color: var(--text-muted);
    color: var(--text-primary);
}
.alert-step-nav .btn-primary { flex: 1; }

@media (max-width: 767px) {
    .alert-wizard-box { padding: 24px 16px 20px; }
    .area-chips { max-height: 160px; }
}

/* SEO 区別コンテンツセクション: style-seo-ward.css に分離
   (2026-04-23 — /area/<code> 以外では描画されないため条件付きロード) */

/* ══════════════════════════════════════════════
   P1: 金利ウィジェット クリック誘導
══════════════════════════════════════════════ */
.rate-widget-clickable {
    cursor: pointer;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.rate-widget-clickable:hover {
    border-color: var(--accent-primary);
    box-shadow: 0 0 0 2px rgba(232,84,122,0.18);
}
.rate-click-hint {
    font-size: 10px;
    color: var(--accent-primary);
    opacity: 0.8;
    margin-left: 4px;
}

/* ══════════════════════════════════════════════
   P2: 計算機連携ボタン (バトムシート内)
══════════════════════════════════════════════ */
.calc-link-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    width: 100%;
    padding: 10px 14px;
    margin: 10px 0 0;
    background: rgba(232,84,122,0.08);
    border: 1px solid rgba(232,84,122,0.25);
    border-radius: 8px;
    color: var(--accent-primary);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s;
    font-family: var(--font);
}
.calc-link-btn:hover { background: rgba(232,84,122,0.15); }
.calc-link-btn svg { width: 14px; height: 14px; flex-shrink: 0; }

/* ══════════════════════════════════════════════
   P3: お気に入り機能
══════════════════════════════════════════════ */
/* ヘッダーバッジ */
.favs-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    background: #f472b6;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    min-width: 16px;
    height: 16px;
    border-radius: 99px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 3px;
    pointer-events: none;
}
#btn-favs { position: relative; }

/* お気に入りパネル */
.favs-panel {
    position: fixed;
    top: 60px;
    right: 12px;
    z-index: 2500;
    width: 300px;
    background: var(--bg-card);
    border: 1px solid var(--glass-border);
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.45);
    overflow: hidden;
}
.favs-panel.hidden { display: none; }
.favs-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    border-bottom: 1px solid var(--glass-border);
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
}
.favs-panel-close {
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: 18px;
    cursor: pointer;
    line-height: 1;
    padding: 0 4px;
}
.favs-list {
    max-height: 320px;
    overflow-y: auto;
    padding: 8px;
}
.favs-empty {
    color: var(--text-muted);
    font-size: 12px;
    text-align: center;
    padding: 20px 8px;
    line-height: 1.7;
}
.fav-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 12px;
    border-radius: 8px;
    border: 1px solid var(--glass-border);
    margin-bottom: 6px;
    background: var(--surface-2);
    gap: 8px;
}
.fav-item-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.fav-item-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
}
.fav-item-price {
    font-size: 11px;
    color: var(--accent-primary);
}
.fav-item-actions {
    display: flex;
    gap: 4px;
    flex-shrink: 0;
}
.fav-view-btn {
    padding: 4px 10px;
    background: var(--accent-primary);
    color: #fff;
    border: none;
    border-radius: 6px;
    font-size: 11px;
    cursor: pointer;
    font-family: var(--font);
    transition: opacity 0.15s;
}
.fav-view-btn:hover { opacity: 0.85; }
.fav-remove-btn {
    padding: 4px 8px;
    background: none;
    border: 1px solid rgba(248,113,113,0.3);
    border-radius: 6px;
    color: #f87171;
    font-size: 13px;
    cursor: pointer;
    line-height: 1;
    transition: background 0.15s;
}
.fav-remove-btn:hover { background: rgba(248,113,113,0.1); }
.favs-panel-footer {
    padding: 8px;
    border-top: 1px solid var(--glass-border);
}
.favs-compare-btn {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px;
    background: rgba(232,84,122,0.1);
    border: 1px solid rgba(232,84,122,0.3);
    border-radius: 8px;
    color: var(--accent-primary);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    font-family: var(--font);
    transition: background 0.15s;
}
.favs-compare-btn:hover { background: rgba(232,84,122,0.2); }

/* バトムシート内 ★ボタン */
.btn-fav-ward {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 14px;
    margin-bottom: 10px;
    background: transparent;
    border: 1px solid var(--glass-border);
    border-radius: 20px;
    font-size: 12px;
    color: var(--text-secondary);
    cursor: pointer;
    font-family: var(--font);
    transition: all 0.15s;
}
.btn-fav-ward:hover, .btn-fav-ward.active {
    border-color: #f472b6;
    color: #f472b6;
    background: rgba(244,114,182,0.08);
}

/* ══════════════════════════════════════════════
   P4: 類似区レコメンド
══════════════════════════════════════════════ */
.similar-wards {
    margin: 12px 0 0;
    padding: 12px 14px;
    background: var(--surface-2);
    border: 1px solid var(--glass-border);
    border-radius: 10px;
}
.similar-wards-title {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 8px;
}
.similar-ward-chips {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}
.similar-ward-chip {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 6px 12px;
    background: var(--bg-card);
    border: 1px solid rgba(34,197,94,0.3);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.15s;
    font-family: var(--font);
    min-width: 72px;
}
.similar-ward-chip:hover {
    border-color: #1A6644;
    background: rgba(26,102,68,0.08);
}
.similar-chip-name {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-primary);
}
.similar-chip-price {
    font-size: 10px;
    color: #1A6644;
    margin-top: 2px;
}
.similar-chip-diff {
    font-size: 10px;
    color: var(--text-muted);
}

/* ══════════════════════════════════════════════
   P5: メール登録プレビュー
══════════════════════════════════════════════ */
.alert-preview-toggle {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    margin-bottom: 12px;
    background: rgba(232,84,122,0.06);
    border: 1px solid rgba(232,84,122,0.2);
    border-radius: 8px;
    font-size: 12px;
    color: var(--accent-primary);
    cursor: pointer;
    user-select: none;
    transition: background 0.15s;
}
.alert-preview-toggle:hover { background: rgba(232,84,122,0.12); }
.alert-preview {
    margin-bottom: 14px;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid var(--glass-border);
}
/* メールプレビュー: ライト/ダーク対応 */
.preview-email-card {
    background: var(--bg-card-solid);
    border-top: 3px solid var(--accent);
    font-size: 12px;
}
.preview-email-header {
    background: linear-gradient(135deg, var(--accent), var(--color-rate));
    padding: 10px 14px;
    color: #fff;
    font-weight: 700;
    font-size: 13px;
}
.preview-email-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 14px;
    border-bottom: 1px solid var(--border);
    color: var(--text-secondary);
}
.preview-icon { font-size: 14px; flex-shrink: 0; }
.preview-email-row strong { color: var(--accent-primary); }
.preview-email-footer {
    padding: 7px 14px;
    font-size: 10px;
    color: var(--text-muted);
    background: var(--bg-stat);
}

/* モバイル対応 */
@media (max-width: 767px) {
    .favs-panel { width: calc(100vw - 24px); right: 12px; left: 12px; }
    #btn-favs { font-size: 0; padding: 8px 9px; gap: 0; }
    #btn-favs svg { width: 16px; height: 16px; }
}

/* P2: 計算機 区コンテキストヒント */
.calc-ward-hint {
    padding: 8px 12px;
    margin-bottom: 12px;
    background: rgba(232,84,122,0.1);
    border: 1px solid rgba(232,84,122,0.25);
    border-radius: 8px;
    font-size: 12px;
    color: var(--accent-primary);
    font-weight: 500;
}
.calc-ward-hint.hidden { display: none; }

/* ── 年収モードボタン ─────────────────────────── */
/* DESIGN.md v2: 시그니처 모드 (年収·家族) — 시각 위계 차별 (사쿠라 옅은 톤). main CTA(btn-primary)와 일반 ghost 사이의 보조 강조. */
.btn-income-mode,
.btn-kosodate-mode {
    background: var(--chip-active-bg);  /* primary-bg #F8D0DE */
    border: 1px solid var(--chip-active-text);  /* primary-pressed #A82954 */
    color: var(--chip-active-text);
    transition: background 0.2s, border-color 0.2s, color 0.2s;
}
.btn-income-mode:hover,
.btn-kosodate-mode:hover {
    background: rgba(232,84,122,0.22);
    border-color: var(--accent);
    color: var(--accent);
}
.btn-income-mode.active,
.btn-kosodate-mode.active {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
}
@media (max-width: 767px) {
    .btn-income-text,
    .btn-kosodate-text { display: none; }
    .btn-income-mode,
    .btn-kosodate-mode { padding: 8px 9px; gap: 0; }
}

/* ── バトムシートヘッダー アクション行 ────────── */
.sheet-title-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}
.sheet-alert-quick {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    background: rgba(232,84,122,0.15);
    border: 1px solid rgba(232,84,122,0.35);
    border-radius: 20px;
    color: #a5b4fc;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s;
    white-space: nowrap;
}
.sheet-alert-quick:hover { background: rgba(232,84,122,0.28); }
.sheet-alert-quick.hidden { display: none; }

/* ── データ出典バッジ ─────────────────────────── */
.data-source-badge {
    display: inline-block;
    padding: 1px 7px;
    border-radius: 10px;
    font-size: 10px;
    font-weight: 600;
    vertical-align: middle;
    cursor: default;
}
.badge-real {
    background: rgba(34,197,94,0.15);
    color: #4ade80;
    border: 1px solid rgba(34,197,94,0.3);
}
.badge-seed {
    background: rgba(251,191,36,0.15);
    color: #fcd34d;
    border: 1px solid rgba(251,191,36,0.40);
    font-weight: 700;
}

/* ── 価格レンジカード（常時表示） ───────────────── */
.stat-card-range {
    background: rgba(255,255,255,0.03);
}
.sheet-value.range-small {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-secondary, #94a3b8);
}

/* ── 金利上昇シナリオテーブル (ライト/ダーク対応) ── */
.rate-scenario-block {
    margin-top: 14px;
    padding: 12px 14px;
    background: var(--bg-stat);
    border: 1px solid var(--glass-border);
    border-radius: 10px;
}
.rate-scenario-title {
    font-size: 12px;
    font-weight: 700;
    color: var(--text-muted);
    margin-bottom: 10px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.rate-scenario-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
}
.rate-scenario-table th {
    padding: 4px 8px;
    text-align: left;
    color: var(--text-muted);
    font-weight: 600;
    border-bottom: 1px solid var(--border);
}
.rate-scenario-table td {
    padding: 6px 8px;
    border-bottom: 1px solid var(--border);
    color: var(--text-secondary);
}
.scenario-base td { color: var(--text-primary); }
.scenario-base td strong { color: var(--color-rate); font-size: 14px; }
.scenario-diff { font-weight: 700; color: var(--warning); }
.scenario-diff.warn { color: var(--danger); }
.scenario-note {
    margin: 8px 0 0;
    font-size: 10px;
    color: var(--text-muted);
    line-height: 1.5;
}

/* ── 予算3シナリオ ───────────────────────────── */
.budget-scenarios {
    margin: 14px 0 0;
    padding: 12px 14px;
    background: var(--bg-stat);
    border: 1px solid var(--glass-border);
    border-radius: 10px;
}
.budget-scenarios-title {
    font-size: 12px;
    font-weight: 700;
    color: var(--text-muted);
    margin-bottom: 10px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.budget-scenarios-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
}
.budget-scenarios-table th {
    padding: 4px 6px;
    text-align: left;
    color: var(--text-muted);
    font-weight: 600;
    border-bottom: 1px solid var(--border);
    font-size: 11px;
}
.budget-scenarios-table td {
    padding: 7px 6px;
    border-bottom: 1px solid var(--border);
    color: var(--text-secondary);
    vertical-align: middle;
}
.budget-scenarios-table tr:last-child td { border-bottom: none; }
.scenario-badge {
    display: inline-block;
    padding: 2px 7px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
}
.badge-safe       { background: rgba(22,163,74,0.15);  color: #16a34a; }
.badge-standard   { background: rgba(59,130,246,0.15); color: #3b82f6; }
.badge-aggressive { background: rgba(245,158,11,0.15); color: #d97706; }
.scenario-conservative td strong { color: #16a34a; }
.scenario-standard     td strong { color: #3b82f6; }
.scenario-aggressive   td strong { color: #d97706; }
.scenario-desc { font-size: 11px; color: var(--text-muted); }

/* ── 区のメリット・注意点カード ──────────────────── */
.ward-pros-cons {
    margin: 14px 0 0;
    padding: 12px 14px;
    background: var(--bg-stat);
    border: 1px solid var(--glass-border);
    border-radius: 10px;
}
.pros-cons-title {
    font-size: 12px;
    font-weight: 700;
    color: var(--text-muted);
    margin-bottom: 10px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.pros-cons-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}
.pros-cons-label {
    font-size: 11px;
    font-weight: 700;
    margin-bottom: 6px;
    padding: 2px 8px;
    border-radius: 4px;
    display: inline-block;
}
.pros-label { background: rgba(22,163,74,0.12);  color: #16a34a; }
.cons-label { background: rgba(245,158,11,0.12); color: #d97706; }
.pros-cons-list {
    list-style: none;
    margin: 0;
    padding: 0;
}
.pros-item,
.cons-item {
    font-size: 12px;
    line-height: 1.5;
    padding: 3px 0;
    color: var(--text-secondary);
    border-bottom: 1px solid var(--border);
}
.pros-item:last-child,
.cons-item:last-child { border-bottom: none; }
@media (max-width: 400px) {
    .pros-cons-grid { grid-template-columns: 1fr; }
}

/* SEO 区説明テキスト (.seo-ward-description): style-seo-ward.css に分離 */

/* DESIGN.md v2 (2026-05-02): 탭 카테고리 색 부여 금지.
   .tab-btn-asset / -check 변종 색을 .tab-btn 기본 룰 (회색 inactive + 사쿠라 active) 에
   맡김 — 시각 위계 일관 + 사쿠라 = active 의미 명확화.
   클래스명은 HTML 에서 group selector / 데이터 분기용으로 보존. */

.asset-result-card {
    background: var(--bg-stat);
    border: 1px solid var(--glass-border);
    border-radius: 10px;
    padding: 16px;
    margin-bottom: 16px;
}
.asset-result-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 0;
    border-bottom: 1px solid var(--glass-border);
    font-size: 14px;
}
.asset-result-row:last-child { border-bottom: none; }
.asset-label { color: var(--text-muted); }
.asset-val   { font-weight: 700; font-family: var(--font-num); }
.asset-estimated { color: var(--accent); font-size: 18px; }
.asset-note  { font-size: 12px; color: var(--text-muted); margin-top: 8px; line-height: 1.6; }
.refinance-section { margin-top: 16px; }
.refi-result-card {
    background: var(--bg-stat);
    border: 1px solid var(--glass-border);
    border-radius: 8px;
    padding: 14px;
}
.refi-row {
    display: flex;
    justify-content: space-between;
    font-size: 13px;
    padding: 5px 0;
    border-bottom: 1px solid var(--glass-border);
}
.refi-recommendation {
    margin-top: 10px;
    font-size: 14px;
    font-weight: 600;
    color: var(--accent);
    text-align: center;
    padding: 8px;
    background: rgba(232,84,122,0.1);
    border-radius: 6px;
}

/* ── 需要バッジ (データフライホイール可視化) ────── */
.demand-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: rgba(232,84,122,0.12);
    border: 1px solid rgba(232,84,122,0.25);
    border-radius: 20px;
    padding: 5px 12px;
    font-size: 12px;
    color: var(--accent);
    margin-bottom: 10px;
    font-weight: 500;
}
.demand-income-hint {
    font-size: 12px;
    color: var(--text-muted);
    margin-bottom: 10px;
    padding: 6px 10px;
    background: rgba(255,255,255,0.03);
    border-radius: 6px;
    border-left: 2px solid var(--accent);
}

/* ── ロゴ ™ マーク ──────────────────────────── */
.logo-tm {
    font-size: 9px;
    font-weight: 500;
    vertical-align: super;
    color: var(--text-muted);
    font-family: sans-serif;
    margin-left: 1px;
}

/* ── クッキー同意バナー ──────────────────────── */
.cookie-banner {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 9990;
    background: var(--bg-card);
    border-top: 1px solid var(--glass-border);
    padding: 12px 24px;
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    box-shadow: 0 -4px 20px rgba(0,0,0,0.35);
    backdrop-filter: blur(10px);
}
.cookie-banner.hidden { display: none; }
.cookie-text {
    flex: 1;
    font-size: 13px;
    color: var(--text-secondary);
    min-width: 200px;
    line-height: 1.5;
}
.cookie-text a { color: var(--accent); text-decoration: none; }
.cookie-text a:hover { text-decoration: underline; }
.cookie-actions { display: flex; gap: 8px; flex-shrink: 0; }
.cookie-btn-decline {
    /* iOS HIG / WCAG 2.1 AAA: 터치 타깃 최소 44x44px */
    min-height: 44px;
    min-width: 64px;
    padding: 10px 20px;
    border-radius: 6px;
    border: 1px solid var(--glass-border);
    background: transparent;
    color: var(--text-muted);
    font-size: 13px;
    cursor: pointer;
    font-family: var(--font);
    transition: background 0.15s;
}
.cookie-btn-decline:hover { background: rgba(255,255,255,0.06); }
.cookie-btn-accept {
    min-height: 44px;
    min-width: 64px;
    padding: 10px 20px;
    border-radius: 6px;
    border: none;
    background: var(--accent);
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    font-family: var(--font);
    transition: opacity 0.15s;
}
.cookie-btn-accept:hover { opacity: 0.85; }

/* ── アラート登録 同意チェックボックス ────────── */
.consent-group { margin-top: 10px; }
.consent-label {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 13px;
    color: var(--text-secondary);
    cursor: pointer;
    line-height: 1.5;
    user-select: none;
}
.consent-label input[type="checkbox"] {
    width: 15px;
    height: 15px;
    margin-top: 2px;
    accent-color: var(--accent);
    cursor: pointer;
    flex-shrink: 0;
}
.consent-label a { color: var(--accent); text-decoration: none; }
.consent-label a:hover { text-decoration: underline; }

/* ══════════════════════════════════════════════════════
   Phase 3: 口コミ / レビュータブ
   ══════════════════════════════════════════════════════ */
.review-section { padding: 4px 0; }
.review-section-title {
    font-size: 12px;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 8px;
}
.review-top-agencies {
    background: rgba(232,84,122,0.06);
    border: 1px solid rgba(232,84,122,0.15);
    border-radius: 10px;
    padding: 10px 12px;
    margin-bottom: 14px;
}
.review-agency-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 0;
    border-bottom: 1px solid rgba(255,255,255,0.05);
}
.review-agency-row:last-child { border-bottom: none; }
.review-agency-name {
    flex: 1;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.review-stars {
    font-size: 12px;
    color: #f59e0b;
    letter-spacing: 1px;
}
.review-count {
    font-size: 11px;
    color: var(--text-muted);
    white-space: nowrap;
}
.review-agency-type {
    font-size: 10px;
    background: rgba(255,255,255,0.08);
    border-radius: 4px;
    padding: 2px 6px;
    color: var(--text-muted);
    flex-shrink: 0;
}
.review-list { margin-bottom: 14px; }
.review-card {
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 10px;
    padding: 10px 12px;
    margin-bottom: 8px;
}
.review-card-header {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 5px;
}
.review-date {
    font-size: 10px;
    color: var(--text-muted);
    margin-left: auto;
}
.review-verified-badge {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 10px;
    font-weight: 600;
    color: #10b981;
    background: rgba(16, 185, 129, 0.12);
    border: 1px solid rgba(16, 185, 129, 0.3);
    border-radius: 4px;
    padding: 1px 6px;
    white-space: nowrap;
}
.review-comment {
    font-size: 13px;
    color: var(--text-secondary);
    line-height: 1.55;
    margin: 0;
    word-break: break-word;
}
.review-submit-area { margin-top: 14px; }
.review-open-form-btn { width: 100%; }
.review-form {
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 12px;
    padding: 14px;
    margin-top: 10px;
}
/* ★ 星入力 */
.star-input {
    display: flex;
    gap: 6px;
    font-size: 24px;
    cursor: pointer;
    user-select: none;
}
.star-btn { color: #4b5563; transition: color 0.12s; }
.star-btn.selected, .star-btn:hover ~ .star-btn { /* handled by JS */ }
.star-input:hover .star-btn { color: #f59e0b; }
.star-btn.selected { color: #f59e0b; }
.review-disclaimer-wrap {
    margin: 10px 0 8px;
}
.review-disclaimer-label {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 11px;
    color: var(--text-secondary);
    cursor: pointer;
    line-height: 1.5;
}
.review-disclaimer-label input[type="checkbox"] {
    margin-top: 2px;
    flex-shrink: 0;
    accent-color: var(--accent);
}
.review-anon-note {
    text-align: center;
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 8px;
}

/* ── 売却タイミング判定 ───────────────────────── */
.sell-score-section { margin-top: 18px; }
.sell-score-card {
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 12px;
    padding: 14px;
}
.sell-score-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
    flex-wrap: wrap;
}
.sell-score-num {
    font-size: 32px;
    font-weight: 800;
    font-family: var(--font-num);
    line-height: 1;
}
.sell-score-label {
    font-size: 16px;
    font-weight: 700;
}
.sell-score-est {
    font-size: 12px;
    color: var(--text-muted);
    margin-left: auto;
}
.sell-reasons {
    padding-left: 0;
    list-style: none;
    margin: 0 0 10px;
}
.sell-reasons li {
    font-size: 12px;
    color: var(--text-secondary);
    padding: 4px 0;
    border-bottom: 1px solid rgba(255,255,255,0.05);
    line-height: 1.5;
}
.sell-reasons li:last-child { border-bottom: none; }
.sell-action {
    font-size: 12px;
    color: var(--text-muted);
    background: rgba(232,84,122,0.07);
    border-radius: 6px;
    padding: 8px 10px;
    margin: 0;
    line-height: 1.6;
}
.sell-disclaimer {
    font-size: 11px;
    color: #5D6875;
    margin: 10px 0 0;
    line-height: 1.6;
    padding: 8px 12px;
    background: rgba(148, 163, 184, 0.07);
    border: 1px solid rgba(148, 163, 184, 0.18);
    border-left: 3px solid #64748b;
    border-radius: 4px;
}

/* ── Floating アラート登録CTA (v2.8 Phase 1 再設計) ──
   旧: 全幅ダーク/桜ボーダーのストリップ → 視覚過剰
   新: 単一 pill ボタン (sakura のみ), sticky bottom-right */
.calc-sticky-cta {
    position: sticky;
    bottom: 8px;
    margin: 20px 0 0;
    padding: 0;
    display: flex;
    justify-content: flex-end;
    background: none;
    border: none;
    z-index: 10;                    /* modal-box 内: チャート等の上 */
    pointer-events: none;           /* ボタン本体のみ受け取る */
}
.calc-sticky-cta.hidden { display: none; }
.sticky-cta-btn {
    pointer-events: auto;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    padding: 0 18px;
    background: var(--accent);
    color: #fff;
    border: none;
    border-radius: 999px;
    font-size: 14px;
    font-weight: 600;
    font-family: var(--font);
    cursor: pointer;
    box-shadow: 0 6px 18px rgba(232, 84, 122, 0.28), 0 1px 2px rgba(26, 35, 50, 0.08);
    transition: background 0.15s, transform 0.15s, box-shadow 0.15s;
}
.sticky-cta-btn:hover {
    background: var(--accent-hover);
    transform: translateY(-1px);
    box-shadow: 0 8px 22px rgba(232, 84, 122, 0.34), 0 1px 2px rgba(26, 35, 50, 0.10);
}
.sticky-cta-btn:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
}
.sticky-cta-btn svg { width: 16px; height: 16px; flex-shrink: 0; }

/* モバイル: 中央寄せで幅ゆとり */
@media (max-width: 767px) {
    .calc-sticky-cta { justify-content: center; }
    .sticky-cta-btn { padding: 0 24px; }
}

/* ══════════════════════════════════════════════
   買えるエリア表示ブロック（計算機 結論一行）
══════════════════════════════════════════════ */
.affordable-wards-block {
    margin-top: 16px;
    padding: 12px;
    background: rgba(16,185,129,0.07);
    border: 1px solid rgba(16,185,129,0.25);
    border-radius: 10px;
}
.affordable-title {
    font-size: 12px;
    font-weight: 700;
    color: #10b981;
    margin-bottom: 8px;
}
.affordable-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
}
.affordable-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    background: rgba(16,185,129,0.12);
    border: 1px solid rgba(16,185,129,0.3);
    border-radius: 20px;
    font-size: 12px;
    color: #d1fae5;
    cursor: pointer;
    transition: background 0.15s;
}
.affordable-chip:hover { background: rgba(16,185,129,0.25); }
.affordable-chip .chip-price {
    font-size: 10px;
    color: #6ee7b7;
    margin-left: 2px;
}
.affordable-more {
    font-size: 11px;
    color: var(--text-muted);
    padding: 4px 8px;
}
.affordable-note {
    font-size: 10px;
    color: var(--text-muted);
    margin: 6px 0 0;
}

/* ══════════════════════════════════════════════
   AI アドバイザータブ — DESIGN.md v2: 카테고리 색 부여 금지.
   .tab-btn 기본 룰에 위임 (회색 inactive + 사쿠라 active). 클래스명은 보존.
══════════════════════════════════════════════ */

.priority-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 4px;
}
.priority-chip {
    padding: 5px 12px;
    border: 1px solid var(--glass-border);
    border-radius: 20px;
    font-size: 12px;
    color: var(--text-muted);
    background: var(--surface-2);
    cursor: pointer;
    transition: all 0.15s;
}
.priority-chip:hover { border-color: var(--accent); color: var(--text-primary); }
.priority-chip.selected {
    background: var(--accent-muted);
    border-color: var(--accent);
    color: var(--accent);
}

/* AI 推薦結果カード */
.adv-result-wrap { margin-top: 12px; }
.adv-result-header {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: var(--text-muted);
    margin-bottom: 12px;
    flex-wrap: wrap;
}
.adv-ai-badge {
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 10px;
    font-weight: 700;
    background: rgba(139,92,246,0.15);
    color: #7c3aed;
    border: 1px solid rgba(139,92,246,0.3);
}
.adv-ai-rule {
    background: rgba(232,84,122,0.10);
    color: #c0335c;
    border-color: rgba(232,84,122,0.25);
}
.adv-card {
    background: var(--surface-2);
    border: 1px solid var(--glass-border);
    border-radius: 10px;
    padding: 12px;
    margin-bottom: 10px;
    transition: border-color 0.15s;
}
.adv-card:hover { border-color: rgba(139,92,246,0.4); }
.adv-card-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
    flex-wrap: wrap;
}
.adv-rank { font-size: 18px; }
.adv-ward-name {
    font-size: 16px;
    font-weight: 700;
    color: var(--text-primary);
}
.adv-within-budget {
    font-size: 10px;
    padding: 2px 7px;
    border-radius: 10px;
    background: rgba(16,185,129,0.12);
    color: #059669;
    border: 1px solid rgba(16,185,129,0.3);
}
.adv-over-budget {
    font-size: 10px;
    padding: 2px 7px;
    border-radius: 10px;
    background: rgba(245,158,11,0.12);
    color: #d97706;
    border: 1px solid rgba(245,158,11,0.3);
}
.adv-price {
    font-size: 12px;
    color: var(--accent);
    margin-left: auto;
    font-weight: 600;
}
/* AI 推薦スコアバー (予算適合度 / 通勤利便 / 防災安全) */
.adv-scores {
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin: 0 0 10px;
    padding: 8px 10px;
    background: var(--bg-stat);
    border-radius: 7px;
}
.adv-score-row {
    display: flex;
    align-items: center;
    gap: 7px;
}
.adv-score-label {
    font-size: 11px;
    color: var(--text-muted);
    width: 58px;
    flex-shrink: 0;
    white-space: nowrap;
}
.adv-score-track {
    flex: 1;
    height: 5px;
    background: var(--border);
    border-radius: 3px;
    overflow: hidden;
}
.adv-score-fill {
    height: 100%;
    border-radius: 3px;
    transition: width 0.5s ease;
}
.adv-score-num {
    font-size: 11px;
    font-weight: 700;
    width: 24px;
    text-align: right;
    flex-shrink: 0;
}
.adv-reason {
    font-size: 13px;
    color: var(--text-secondary);
    line-height: 1.6;
    margin: 0 0 8px;
}
.adv-view-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 12px;
    background: var(--accent-muted);
    border: 1px solid rgba(232,84,122,0.3);
    border-radius: 6px;
    font-size: 11px;
    color: var(--accent);
    cursor: pointer;
    transition: background 0.15s;
}
.adv-view-btn:hover { background: rgba(232,84,122,0.2); }
.adv-advice {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    background: rgba(232,84,122,0.08);
    border: 1px solid rgba(232,84,122,0.2);
    border-radius: 8px;
    padding: 10px 12px;
    font-size: 13px;
    color: var(--text-secondary);
    line-height: 1.6;
    margin-top: 8px;
}
.adv-advice svg { flex-shrink: 0; color: #a5b4fc; margin-top: 2px; }

/* ── 借入額 → 買えるエリア結論ブロック ─────────── */
.loan-conclusion {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 14px;
    border-radius: 10px;
    font-size: 13px;
    line-height: 1.65;
    margin-top: 14px;
}
.loan-conclusion--ok {
    background: rgba(22, 163, 74, 0.08);
    border: 1px solid rgba(22, 163, 74, 0.25);
    color: var(--text-primary);
}
.loan-conclusion--none {
    background: rgba(217, 119, 6, 0.08);
    border: 1px solid rgba(217, 119, 6, 0.25);
    color: var(--text-primary);
}
.conclusion-icon { flex-shrink: 0; font-size: 16px; line-height: 1; }
.conclusion-over { font-size: 12px; color: #5D6875; margin-top: 4px; display: inline-block; }

/* ── Empty State (検索結果ゼロ, 取引データなし等) v2.8 Phase 1 ── */
.empty-state {
    padding: 32px 20px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}
.empty-state-icon {
    font-size: 48px;
    line-height: 1;
    opacity: 0.85;
}
.empty-state-title {
    color: var(--text-primary);
    font-size: 16px;
    font-weight: 600;
    line-height: 1.4;
    margin: 0;
}
.empty-state-desc {
    color: var(--text-secondary);
    font-size: 13px;
    line-height: 1.6;
    margin: 0;
    max-width: 320px;
}
.empty-state-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    margin-top: 8px;
}
.empty-state-actions .btn-primary,
.empty-state-actions .btn-secondary {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 40px;
    padding: 0 16px;
    font-size: 13px;
}
.empty-state-actions svg { width: 14px; height: 14px; }

/* ── prefers-reduced-motion (WCAG 2.3 / アニメーション配慮) ─────────────── */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
    .bottom-sheet { transition: none !important; }
    .layer-btn, .map-btn { transition: none !important; }
    .calc-sticky-cta { transition: none !important; }
}

/* ── 計算機 details/summary (収益還元法・原価法セクション) ────────────────── */
.calc-details {
    margin-top: 20px;
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: var(--radius-lg);
    background: rgba(255,255,255,0.02);
    overflow: hidden;
}
.calc-details-summary {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    font-size: 14px;
    font-weight: 600;
    color: var(--accent);
    cursor: pointer;
    user-select: none;
    list-style: none;
}
.calc-details-summary::-webkit-details-marker { display: none; }
.calc-details-summary::after {
    content: "▸";
    margin-left: auto;
    font-size: 12px;
    color: var(--text-muted);
    transition: transform 0.2s;
}
.calc-details[open] > .calc-details-summary::after { transform: rotate(90deg); }
.calc-details-body {
    padding: 0 16px 16px;
    border-top: 1px solid rgba(255,255,255,0.06);
}

/* ── 借入計算 — Hero 結果 + Progressive Disclosure ──────────────────────── */
.calc-hero {
    text-align: center;
    padding: 20px 16px 14px;
    background: linear-gradient(135deg, rgba(232,84,122,0.12) 0%, rgba(192,51,92,0.07) 100%);
    border: 1px solid rgba(232,84,122,0.25);
    border-radius: var(--radius-lg);
    margin-bottom: 12px;
}
.calc-hero-label {
    font-size: 11px;
    letter-spacing: 0.08em;
    color: var(--text-muted);
    text-transform: uppercase;
    margin-bottom: 4px;
}
.calc-hero-value {
    font-size: 42px;
    font-weight: 800;
    font-family: 'Outfit', var(--font);
    color: var(--color-price, #e8547a);
    line-height: 1.1;
    text-shadow: 0 0 24px rgba(232,84,122,0.40);
}
.calc-hero-unit {
    font-size: 18px;
    font-weight: 600;
    margin-left: 4px;
    color: var(--text-muted);
}
.calc-hero-sub {
    margin-top: 6px;
    font-size: 13px;
    color: var(--text-muted);
}
/* Progressive Disclosure — 詳細アコーディオン */
details.calc-details > summary.calc-details-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px 16px;
    font-size: 13px;
    font-weight: 500;
    color: var(--accent);
    cursor: pointer;
    list-style: none;
    border: 1px solid rgba(232,84,122,0.18);
    border-radius: var(--radius-md);
    margin-bottom: 8px;
    background: rgba(232,84,122,0.06);
    transition: background 0.15s;
}
details.calc-details > summary.calc-details-toggle::-webkit-details-marker { display: none; }
details.calc-details > summary.calc-details-toggle:hover { background: rgba(232,84,122,0.12); }
details.calc-details > summary .calc-details-arrow {
    font-size: 10px;
    transition: transform 0.2s;
}
details.calc-details[open] > summary .calc-details-arrow { transform: rotate(180deg); }
details.calc-details > .calc-details-content {
    padding: 4px 0;
}

/* ── バトムシート D3 個別要因補正アコーディオン ──────────────────────────── */
.factor-details {
    margin-top: 12px;
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: var(--radius-md);
    background: rgba(255,255,255,0.02);
    overflow: hidden;
}
.factor-summary {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 14px;
    font-size: 12px;
    color: var(--text-muted);
    cursor: pointer;
    list-style: none;
    user-select: none;
}
.factor-summary::-webkit-details-marker { display: none; }
.factor-summary::after {
    content: "▸";
    margin-left: auto;
    font-size: 11px;
    color: var(--text-muted);
    transition: transform 0.2s;
}
.factor-details[open] > .factor-summary::after { transform: rotate(90deg); }
.factor-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    padding: 8px 14px 12px;
    border-top: 1px solid rgba(255,255,255,0.06);
}
.factor-grid .fairness-row {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.factor-grid .fairness-row label {
    font-size: 11px;
    color: var(--text-muted);
}
.fairness-factor {
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 4px;
    padding-top: 4px;
    border-top: 1px solid rgba(255,255,255,0.06);
}

/* ── 金利比較 モバイルカードレイアウト (@media ≤767px) ─────────────────── */
@media (max-width: 767px) {
    #rates-table {
        display: flex;
        flex-direction: column;
        gap: 10px;
        padding: 4px 0;
    }
}
.rate-card {
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: var(--radius-lg);
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.rate-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}
.rate-card-bank {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
}
.rate-card-badge {
    font-size: 11px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 20px;
    white-space: nowrap;
}
.badge-var   { background: rgba(232,84,122,0.15); color: #f9a8d4; border: 1px solid rgba(232,84,122,0.30); }
.badge-fixed { background: rgba(245,158,11,0.15); color: #fbbf24; border: 1px solid rgba(245,158,11,0.3); }
.rate-card-rate {
    font-size: 26px;
    font-weight: 800;
    color: #4ade80;
    line-height: 1;
}
.rate-card-rate small {
    font-size: 14px;
    font-weight: 400;
    color: var(--text-muted);
    margin-left: 2px;
}
.rate-card-feature {
    font-size: 12px;
    color: var(--text-muted);
    line-height: 1.5;
}
.rate-card-link {
    display: inline-block;
    margin-top: 4px;
    padding: 6px 14px;
    background: rgba(232,84,122,0.15);
    color: #818cf8;
    border: 1px solid rgba(232,84,122,0.3);
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
    text-decoration: none;
    align-self: flex-start;
    min-height: 44px;
    display: flex;
    align-items: center;
}

/* ══════════════════════════════════════════════════════════
   NPS フィードバックウィジェット
   計算結果の下部に表示する1クリックNPS収集UI
══════════════════════════════════════════════════════════ */
.nps-widget {
    margin-top: 16px;
    padding: 12px 16px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    text-align: center;
}
.nps-widget-label {
    font-size: 13px;
    color: var(--text-muted);
    margin-bottom: 8px;
}
.nps-widget-btns {
    display: flex;
    justify-content: center;
    gap: 8px;
}
/* DESIGN.md v2: emoji 별점 게임化 금지 → 텍스트 버튼 + tone 색 (positive/negative). */
.nps-btn {
    padding: 6px 14px;
    min-height: 32px;
    border: 1px solid var(--border);
    border-radius: 20px;
    background: var(--bg-card);
    color: var(--text-secondary);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.nps-btn--positive:hover {
    background: var(--feedback-positive-bg);
    color: var(--feedback-positive-text);
    border-color: var(--feedback-positive-text);
}
.nps-btn--negative:hover {
    background: var(--feedback-negative-bg);
    color: var(--feedback-negative-text);
    border-color: var(--feedback-negative-text);
}
.nps-btn--neutral:hover { background: var(--surface-2); }
.nps-btn.selected {
    background: var(--accent-muted);
    border-color: var(--accent);
    color: var(--accent);
    font-weight: 600;
}
.nps-thanks {
    font-size: 13px;
    color: var(--success);
    margin-top: 4px;
    display: none;
}
.nps-thanks.visible { display: block; }

/* ══════════════════════════════════════════════════════════
   購入前チェックリスト（バトムシート 概要タブ内）
══════════════════════════════════════════════════════════ */
.purchase-checklist-section {
    margin-top: 16px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    overflow: hidden;
}
.purchase-checklist-title {
    padding: 10px 14px;
    font-size: 13px;
    font-weight: 700;
    color: var(--text-primary);
    background: var(--color-disaster-muted);
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    gap: 6px;
}
.checklist-items {
    padding: 8px 14px 10px;
}
.checklist-item {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 5px 0;
    font-size: 12px;
    color: var(--text-secondary);
    border-bottom: 1px solid var(--border);
}
.checklist-item:last-child { border-bottom: none; }
.checklist-item input[type="checkbox"] {
    margin-top: 2px;
    accent-color: var(--accent);
    width: 15px;
    height: 15px;
    flex-shrink: 0;
    cursor: pointer;
}
.checklist-item label {
    cursor: pointer;
    line-height: 1.4;
}
.checklist-item.checked label { text-decoration: line-through; color: var(--text-muted); }

/* ══════════════════════════════════════════════════════════
   Pull-to-refresh インジケーター
══════════════════════════════════════════════════════════ */
#ptr-indicator {
    position: absolute;
    top: -48px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 20px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 20px;
    font-size: 13px;
    color: var(--text-muted);
    box-shadow: var(--shadow-md);
    pointer-events: none;
    transition: top 0.2s, opacity 0.2s;
    opacity: 0;
    z-index: 10;
    white-space: nowrap;
}
#ptr-indicator.ptr-ready { top: 8px; opacity: 1; color: var(--accent); }
#ptr-indicator.ptr-loading { top: 8px; opacity: 1; }
#ptr-spinner {
    width: 14px; height: 14px;
    border: 2px solid var(--border);
    border-top-color: var(--accent);
    border-radius: 50%;
    animation: spin 0.7s linear infinite;
    display: none;
}
#ptr-indicator.ptr-loading #ptr-spinner { display: block; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ══════════════════════════════════════════════════════════
   カテゴリ別バッジ (price / rate / disaster / air)
══════════════════════════════════════════════════════════ */
.cat-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 600;
}
.cat-badge.price    { background: var(--color-price-muted); color: var(--color-price); }
.cat-badge.rate     { background: var(--color-rate-muted);  color: var(--color-rate); }
.cat-badge.disaster { background: var(--color-disaster-muted); color: var(--color-disaster); }
.cat-badge.air      { background: var(--color-air-muted);  color: var(--color-air); }

/* ══════════════════════════════════════════════════════════
   ログインボタン (ヘッダー)
══════════════════════════════════════════════════════════ */
.btn-login {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 6px 12px;
    background: transparent;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    color: var(--text-secondary);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
    white-space: nowrap;
}
.btn-login:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
    border-color: var(--accent);
}
.btn-login.is-logged-in {
    border-color: #1A6644;
    color: #1A6644;
}
.btn-login.is-logged-in:hover {
    background: rgba(26,102,68,0.08);
}
.btn-login svg { width: 14px; height: 14px; flex-shrink: 0; }
@media (max-width: 430px) {
    .btn-login-label { display: none; }
}

/* 내 물건 탭 — 로그인 유도 힌트 */
.asset-login-hint {
    background: var(--accent-muted);
    border: 1px solid rgba(232,84,122,0.18);
    border-radius: var(--radius-md);
    padding: 10px 14px;
    font-size: 13px;
    color: var(--text-secondary);
    margin-bottom: 12px;
}
.asset-login-link {
    color: var(--accent);
    font-weight: 600;
    text-decoration: none;
}
.asset-login-link:hover { text-decoration: underline; }

/* ══════════════════════════════════════════════════════════
   ログインモーダル
══════════════════════════════════════════════════════════ */
.modal-box--sm {
    max-width: 420px;
}
.login-desc {
    font-size: 13px;
    color: var(--text-muted);
    margin: 0 0 16px;
    line-height: 1.55;
}
.login-form-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 14px;
}
.login-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-secondary);
}
.login-input {
    padding: 10px 14px;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--bg-input, var(--bg-page));
    color: var(--text-primary);
    font-size: 15px;
    outline: none;
    transition: border-color 0.15s;
}
.login-input:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(232,84,122,0.18);
}
.login-error {
    font-size: 12px;
    color: #B91C1C;
    background: rgba(185,28,28,0.08);
    border: 1px solid rgba(185,28,28,0.2);
    border-radius: var(--radius-sm);
    padding: 8px 12px;
    margin-bottom: 12px;
}
.login-submit-btn {
    width: 100%;
    padding: 11px;
    background: var(--accent);
    color: #fff;
    border: none;
    border-radius: var(--radius-md);
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: opacity 0.15s;
}
.login-submit-btn:hover { opacity: 0.9; }
.login-submit-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.login-spinner {
    width: 16px; height: 16px;
    border: 2px solid rgba(255,255,255,0.3);
    border-top-color: #fff;
    border-radius: 50%;
    animation: spin 0.7s linear infinite;
}
.login-register-hint {
    text-align: center;
    font-size: 12px;
    color: var(--text-muted);
    margin: 14px 0 0;
}
.login-link-btn {
    background: none;
    border: none;
    color: var(--accent);
    font-size: 12px;
    cursor: pointer;
    padding: 0;
    text-decoration: underline;
}
.login-user-email {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 12px;
    word-break: break-all;
}
.login-user-info {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 12px 14px;
    font-size: 13px;
    color: var(--text-secondary);
    margin-bottom: 16px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.login-user-info-row { display: flex; justify-content: space-between; }
.login-user-info-row span:first-child { color: var(--text-muted); }
.login-logout-btn {
    width: 100%;
    padding: 10px;
    background: transparent;
    color: #B91C1C;
    border: 1px solid rgba(185,28,28,0.3);
    border-radius: var(--radius-md);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s;
}
.login-logout-btn:hover { background: rgba(239,68,68,0.08); }

/* ── 駅バブル ポップアップ ── */
/* 常にダーク背景（ライト/ダーク切替に関わらず白文字を保証） */
.station-popup .mapboxgl-popup-content {
    background: #FFFFFF;
    color: #1A2332;
    border-radius: 10px;
    padding: 12px 14px;
    box-shadow: 0 4px 24px rgba(26,35,50,0.15);
    border: 1px solid #E8E2D8;
    min-width: 220px;
}
.station-popup .mapboxgl-popup-tip {
    border-top-color: #FFFFFF;
}
.station-popup .mapboxgl-popup-close-button {
    color: #5D6875;
    font-size: 18px;
    line-height: 1;
    top: 6px;
    right: 8px;
}

/* ── 大気質 PM2.5 ポップアップ ── */
/* 常にダーク背景 — aqi_color (黄/緑/橙/赤) が白背景で見えない問題を回避 */
.air-quality-popup .mapboxgl-popup-content {
    background: #1e293b;
    color: #1A2332;
    border-radius: 10px;
    padding: 11px 14px;
    box-shadow: 0 4px 24px rgba(0,0,0,0.5);
    border: 1px solid rgba(255,255,255,0.10);
}
.air-quality-popup .mapboxgl-popup-tip {
    border-top-color: #1e293b;
}

/* ── 駅詳細パネル: 戻るボタン (sticky) ── */
/* position:sticky でスクロール後も常に上部に固定 */
.property-panel .station-back-btn {
    position: sticky;
    top: 0;
    z-index: 5;
    display: flex;
    align-items: center;
    gap: 6px;
    width: 100%;
    padding: 9px 16px;
    margin: 0 0 4px;
    background: var(--bg-sheet);
    border-bottom: 1px solid var(--border);
    border-top: none;
    border-left: none;
    border-right: none;
    border-radius: 0;
    cursor: pointer;
    font-size: 12px;
    font-weight: 600;
    /* DESIGN.md §Primary: 桜 = 判断의 節目만 → 단순 「뒤로」 링크는 on-surface-variant */
    color: var(--text-secondary);
    transition: background 0.15s, color 0.15s;
    box-sizing: border-box;
}
.property-panel .station-back-btn:hover {
    background: var(--bg-stat);
    color: var(--text-primary);
}

/* ── 駅詳細モード: ソート行を非表示 ── */
.property-panel.station-detail .panel-sort-row {
    display: none;
}

/* ── ニュースカード ── */
.sheet-news-section {
    margin: 14px 0 8px;
}
.sheet-news-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-secondary, #94a3b8);
    margin-bottom: 8px;
    letter-spacing: 0.02em;
}
.sheet-news-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.news-card-link {
    text-decoration: none;
    color: inherit;
    display: block;
}
.news-card {
    display: flex;
    gap: 10px;
    background: var(--bg-card, rgba(255,255,255,0.06));
    border: 1px solid var(--border, rgba(148,163,184,0.08));
    border-radius: var(--radius-md, 8px);
    padding: 8px 10px;
    transition: background 0.15s;
    align-items: flex-start;
}
.news-card:hover {
    background: var(--bg-card-hover, rgba(255,255,255,0.1));
}
.news-thumb {
    width: 60px;
    height: 46px;
    object-fit: cover;
    border-radius: 5px;
    flex-shrink: 0;
    background: var(--bg-input, rgba(0,0,0,0.04));
}
.news-body {
    flex: 1;
    min-width: 0;
}
.news-headline {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-primary, #f1f5f9);
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.news-desc {
    font-size: 11px;
    color: var(--text-muted, #94a3b8);
    margin-top: 2px;
    line-height: 1.4;
}
.news-meta {
    font-size: 10px;
    color: var(--text-muted, #94a3b8);
    margin-top: 3px;
}

/* ── モバイルヘッダー: 重要度低いボタンを非表示 ─────────── */
@media (max-width: 768px) {
    /* 比較・お気に入りはモバイルでは省スペース化 */
    .btn-header#btn-compare .btn-text,
    .btn-header#btn-favs .btn-text { display: none; }
    /* ログインボタンのラベルを非表示（アイコンのみ） */
    .btn-login-label { display: none; }
    /* 家族モードのテキストを省略 */
    .btn-kosodate-text { display: none; }
    /* 年収モードテキストのみ残す（シグネチャ機能） */
}
@media (max-width: 480px) {
    /* 超小画面: 比較・お気に入りボタン自体を隠す */
    .btn-header#btn-compare,
    .btn-header#btn-favs { display: none; }
}


/* ══════════════════════════════════════════════
   駅別価格サマリー
   ══════════════════════════════════════════════ */
.stations-section {
    margin: 12px 0;
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid var(--border-color, rgba(0,0,0,0.1));
}
.stations-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    background: var(--bg-stat, rgba(0,0,0,0.03));
    border-bottom: 1px solid var(--border-color, rgba(0,0,0,0.08));
}
.stations-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
}
.stations-count {
    font-size: 11px;
    color: var(--text-muted);
    background: var(--bg-input, rgba(0,0,0,0.05));
    padding: 2px 8px;
    border-radius: 10px;
}
.stations-col-header {
    display: grid;
    grid-template-columns: 2fr 1.2fr 1.8fr 1.4fr;
    padding: 4px 12px;
    font-size: 10px;
    color: var(--text-muted);
    background: var(--bg-stat, rgba(0,0,0,0.02));
    border-bottom: 1px solid var(--border-color, rgba(0,0,0,0.06));
    gap: 4px;
}
.station-row {
    display: grid;
    grid-template-columns: 2fr 1.2fr 1.8fr 1.4fr;
    align-items: center;
    padding: 7px 12px;
    border-bottom: 1px solid var(--border-color, rgba(0,0,0,0.05));
    gap: 4px;
    transition: background 0.15s;
}
.station-row:last-child { border-bottom: none; }
.station-row:hover { background: var(--bg-stat, rgba(0,0,0,0.03)); }
.station-name {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.station-price {
    font-size: 13px;
    font-weight: 700;
    color: var(--color-price, #2563eb);
    white-space: nowrap;
}
.station-range {
    font-size: 11px;
    color: var(--text-secondary);
    white-space: nowrap;
}
.station-meta {
    font-size: 11px;
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.stations-note {
    padding: 5px 12px;
    font-size: 10px;
    color: var(--text-muted);
    background: var(--bg-stat, rgba(0,0,0,0.02));
}

/* ══════════════════════════════════════════════
   取引事例一覧
   ══════════════════════════════════════════════ */
.recent-transactions-section {
    margin: 12px 0;
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid var(--border-color, rgba(0,0,0,0.1));
}
.txn-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    background: var(--bg-stat, rgba(0,0,0,0.03));
    border-bottom: 1px solid var(--border-color, rgba(0,0,0,0.08));
}
.txn-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
}
.txn-total {
    font-size: 11px;
    color: var(--text-muted);
    background: var(--bg-input, rgba(0,0,0,0.05));
    padding: 2px 8px;
    border-radius: 10px;
}
.txn-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 7px 12px;
    border-bottom: 1px solid var(--border-color, rgba(0,0,0,0.05));
    gap: 8px;
    transition: background 0.15s;
}
.txn-row:last-child { border-bottom: none; }
.txn-row:hover { background: var(--bg-stat, rgba(0,0,0,0.03)); }
.txn-row.txn-real { border-left: 3px solid var(--color-price, #2563eb); }
.txn-left {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.txn-right {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}
.txn-price {
    font-size: 14px;
    font-weight: 700;
    color: var(--text-primary);
    white-space: nowrap;
}
.txn-station {
    font-size: 11px;
    color: #60a5fa;
    display: block;
    margin-bottom: 2px;
}
.txn-meta {
    font-size: 11px;
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.txn-unit {
    font-size: 11px;
    color: var(--color-price, #2563eb);
    background: rgba(37,99,235,0.08);
    padding: 2px 6px;
    border-radius: 4px;
    white-space: nowrap;
}
.txn-period {
    font-size: 10px;
    color: var(--text-muted);
    white-space: nowrap;
}
.txn-real-badge {
    font-size: 10px;
    font-weight: 600;
    color: #059669;
    background: rgba(5,150,105,0.1);
    padding: 1px 6px;
    border-radius: 4px;
    white-space: nowrap;
}
.txn-more {
    padding: 6px 12px;
    font-size: 11px;
    color: var(--color-price, #2563eb);
    text-align: center;
    cursor: pointer;
    border-top: 1px solid var(--border-color, rgba(0,0,0,0.06));
}
.txn-more-btn {
    display: block;
    width: calc(100% - 24px);
    margin: 6px 12px;
    padding: 9px 12px;
    background: transparent;
    color: #e8547a;
    border: 1.5px solid rgba(232, 84, 122, 0.45);
    border-radius: 8px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    text-align: center;
    transition: background 0.15s, border-color 0.15s;
}
.txn-more-btn:hover {
    background: rgba(232, 84, 122, 0.1);
    border-color: #e8547a;
}
.txn-note {
    padding: 5px 12px;
    font-size: 10px;
    color: var(--text-muted);
    background: var(--bg-stat, rgba(0,0,0,0.02));
}

/* ダークモード対応 */
.dark .stations-section,
.dark .recent-transactions-section {
    border-color: rgba(255,255,255,0.08);
}
.dark .stations-header,
.dark .txn-header,
.dark .stations-col-header,
.dark .stations-note,
.dark .txn-note {
    background: rgba(255,255,255,0.03);
    border-color: rgba(255,255,255,0.06);
}
.dark .station-row:hover,
.dark .txn-row:hover {
    background: rgba(255,255,255,0.06);
}
.dark .station-row,
.dark .txn-row {
    border-color: rgba(255,255,255,0.05);
}
.dark .txn-unit {
    background: rgba(99,179,237,0.12);
    color: #63b3ed;
}
.dark .txn-row.txn-real {
    border-left-color: #63b3ed;
}

/* 取引事例 詳細矢印 */
.txn-detail-arrow {
    font-size: 16px;
    color: var(--text-muted);
    margin-left: 4px;
    flex-shrink: 0;
    transition: transform 0.15s;
}
.txn-row:hover .txn-detail-arrow {
    color: var(--color-price, #2563eb);
    transform: translateX(2px);
}

/* ── アフィリエイト PR バッジ ─────────────────────────── */
.pr-badge {
    display: inline-block;
    font-size: 9px;
    font-weight: 700;
    color: #92400e;
    background: #fef3c7;
    border: 1px solid #fcd34d;
    padding: 1px 5px;
    border-radius: 3px;
    vertical-align: middle;
    margin-left: 4px;
    letter-spacing: 0.05em;
}
.dark .pr-badge {
    color: #fcd34d;
    background: rgba(252,211,77,0.12);
    border-color: rgba(252,211,77,0.3);
}

/* ── 駅別価格: モバイル4列→2列 ──────────────────────── */
@media (max-width: 480px) {
    .stations-col-header,
    .station-row {
        grid-template-columns: 1.8fr 1fr;
    }
    .stations-col-header span:nth-child(3),
    .stations-col-header span:nth-child(4),
    .station-row .station-range,
    .station-row .station-meta {
        display: none;
    }
}

/* ── 判定CTAボタン ───────────────────────────────────── */
.btn-calc-judge {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 11px 16px;
    margin: 10px 0;
    background: linear-gradient(135deg, rgba(232,84,122,0.1), rgba(232,84,122,0.06));
    border: 1.5px solid rgba(232,84,122,0.35);
    border-radius: 10px;
    color: var(--color-sakura, #e8547a);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s, transform 0.1s;
    text-align: center;
    gap: 6px;
}
.btn-calc-judge:hover {
    background: linear-gradient(135deg, rgba(232,84,122,0.18), rgba(232,84,122,0.12));
}
.btn-calc-judge:active {
    transform: scale(0.98);
}
.dark .btn-calc-judge {
    border-color: rgba(232,84,122,0.4);
    background: rgba(232,84,122,0.08);
}

/* ── Moat #1 クラウドソーシング統計カード ─────────────────────── */
.sheet-crowdsource-section { margin: 12px 0; }
.sheet-crowdsource-section.hidden { display: none; }
.crowdsource-card {
    background: var(--bg-card);
    border: 1px solid rgba(232,84,122,0.2);
    border-radius: 10px;
    padding: 12px 14px;
}
.crowdsource-header {
    display: flex; align-items: center; gap: 6px;
    margin-bottom: 10px;
}
.crowdsource-icon { font-size: 14px; }
.crowdsource-title { font-size: 13px; font-weight: 700; color: var(--text); flex: 1; }
.crowdsource-count {
    font-size: 11px; font-weight: 600;
    background: rgba(232,84,122,0.15);
    color: var(--accent, #e8547a);
    padding: 2px 7px; border-radius: 10px;
}
.crowdsource-stats {
    display: grid; grid-template-columns: repeat(3,1fr); gap: 8px;
    margin-bottom: 8px;
}
.crowdsource-stat { text-align: center; }
.cs-label { display: block; font-size: 10px; color: var(--text-muted); margin-bottom: 2px; }
.cs-value { font-size: 13px; font-weight: 700; color: var(--text); }
.crowdsource-recent {
    font-size: 11px; color: #1A6644;
    margin-bottom: 4px;
}
.crowdsource-note { font-size: 10px; color: var(--text-muted); }

/* ── 個別要因補正アコーディオン ─────────────────────────── */
.pc-adjust-details {
    border: 1px solid var(--glass-border);
    border-radius: 8px;
    overflow: hidden;
}
.pc-adjust-summary {
    padding: 10px 14px;
    font-size: 13px;
    font-weight: 600;
    color: var(--text);
    cursor: pointer;
    list-style: none;
    display: flex;
    align-items: center;
    gap: 6px;
    background: var(--bg-stat);
    user-select: none;
}
.pc-adjust-summary::-webkit-details-marker { display: none; }
.pc-adjust-summary::after {
    content: '▸';
    margin-left: auto;
    font-size: 11px;
    color: var(--text-muted);
    transition: transform .2s;
}
.pc-adjust-details[open] .pc-adjust-summary::after {
    transform: rotate(90deg);
}
.pc-adjust-body {
    padding: 4px 14px 14px;
}

/* ── クラウドソーシング統計カード ────────────────────────── */
.crowdsource-card {
    background: var(--bg-stat);
    border: 1px solid var(--glass-border);
    border-radius: 10px;
    padding: 12px 14px;
    margin-top: 8px;
}
.crowdsource-header {
    display: flex; align-items: center; gap: 6px; margin-bottom: 10px;
}

/* ── 地図スケルトンローダー (CWV LCP 改善)
   map.on('load') 完了まで即時表示し、Mapbox タイル待ちの知覚速度を改善 */
#map-skeleton {
    position: absolute;
    inset: 0;
    background: #0f1923;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    pointer-events: none;
}
.map-skeleton-inner {
    text-align: center;
    color: #94a3b8;
}
.map-skeleton-logo {
    font-size: 1.5rem;
    font-weight: 700;
    color: #e8547a;
    margin-bottom: 12px;
    letter-spacing: 0.05em;
}
.map-skeleton-msg {
    font-size: 0.85rem;
    margin: 0 0 20px;
}
.map-skeleton-pulse {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 3px solid #e8547a;
    border-top-color: transparent;
    margin: 0 auto;
    animation: skeleton-spin 0.8s linear infinite;
}
@keyframes skeleton-spin {
    to { transform: rotate(360deg); }
}

/* ══════════════════════════════════════════════════════════
   .verdict-chip — 시안 11:03 패턴: 駅 카드 단계 chip (DESIGN.md 결론テスト)
   "予算内 / 慎重に / 超過" — 각 駅 한 눈에 결과 시각
══════════════════════════════════════════════════════════ */
.verdict-chip {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.4;
    white-space: nowrap;
}
.verdict-chip.verdict-affordable {
    background: var(--affordable-bg, #E8F3EC);
    color: var(--affordable, #1A6644);
}
.verdict-chip.verdict-marginal {
    background: var(--marginal-bg, #FEF3E2);
    color: var(--marginal, #92400E);
}
.verdict-chip.verdict-over {
    background: var(--over-bg, #FDEAEA);
    color: var(--over, #B91C1C);
}

/* ══════════════════════════════════════════════════════════
   .term-hint — 전문용어 ⓘ 아이콘 (DESIGN.md v2: 機会費用·CCR·NOI·キャップレート 설명)
══════════════════════════════════════════════════════════ */
.term-hint {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    height: 14px;
    margin-left: 2px;
    border-radius: 50%;
    border: 1px solid var(--text-muted);
    color: var(--text-muted);
    font-size: 10px;
    font-style: normal;
    font-weight: 600;
    line-height: 1;
    cursor: help;
    transition: color 0.15s, border-color 0.15s, background 0.15s;
    vertical-align: middle;
}
.term-hint:hover {
    color: var(--accent);
    border-color: var(--accent);
    background: var(--accent-muted);
}

/* ══════════════════════════════════════════════════════════
   Tabulator (金利比較 표) — DESIGN.md v2 흰색 강제 (2026-05-02)
   midnight CDN 테마 (다크 bg) override. SRI 보안 유지하려고 CDN 자체는 keep.
   사장님 점검 #9: 표 다크 bg → 부동산 신뢰감 (三井·Money Forward) 위반.
══════════════════════════════════════════════════════════ */
.tabulator {
    background-color: var(--table-bg) !important;
    color: var(--text-primary) !important;
    border: 1px solid var(--border) !important;
    font-family: var(--font);
}
.tabulator .tabulator-header {
    background-color: var(--table-header-bg) !important;
    color: var(--table-header-text) !important;
    border-bottom: 1px solid var(--border) !important;
    font-weight: 600;
}
.tabulator .tabulator-header .tabulator-col {
    background-color: var(--table-header-bg) !important;
    color: var(--table-header-text) !important;
    border-right: 1px solid var(--divider) !important;
}
.tabulator .tabulator-header .tabulator-col-content {
    color: var(--table-header-text) !important;
}
.tabulator .tabulator-row {
    background-color: var(--table-bg) !important;
    color: var(--text-primary) !important;
    border-bottom: 1px solid var(--divider) !important;
}
.tabulator .tabulator-row.tabulator-row-even {
    background-color: var(--table-row-alt-bg) !important;
}
.tabulator .tabulator-row.tabulator-selectable:hover {
    background-color: var(--surface-hover, #F8F4EC) !important;
}
.tabulator .tabulator-cell {
    color: var(--text-primary) !important;
    border-right: 1px solid var(--divider) !important;
    padding: 10px 12px !important;
}
.tabulator .tabulator-footer {
    background-color: var(--table-header-bg) !important;
    color: var(--text-primary) !important;
    border-top: 1px solid var(--border) !important;
}