/* live.css — 全国災害ビューア専用スタイル */

*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html, body {
    height: 100%;
    font-family: 'Hiragino Kaku Gothic ProN', 'Noto Sans JP', 'Segoe UI', sans-serif;
    background: #0d1117;
    color: #e6edf3;
    overflow: hidden;
}

/* ── ヘッダー ───────────────────────────────────────────────────────────────── */

#live-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 44px;
    background: rgba(13, 17, 23, 0.92);
    border-bottom: 1px solid rgba(48, 54, 61, 0.8);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 16px;
    z-index: 1100;
    backdrop-filter: blur(8px);
}

.live-title {
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: #58a6ff;
}

.live-title-sub {
    font-size: 11px;
    color: #8b949e;
    margin-left: 8px;
    font-weight: 400;
}

.live-nav-link {
    font-size: 12px;
    color: #8b949e;
    text-decoration: none;
    padding: 4px 10px;
    border: 1px solid rgba(48, 54, 61, 0.8);
    border-radius: 4px;
    transition: color 0.15s, border-color 0.15s;
}

.live-nav-link:hover {
    color: #e6edf3;
    border-color: #58a6ff;
}

/* ── 地図 ────────────────────────────────────────────────────────────────────── */

#live-map {
    position: fixed;
    top: 44px;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
}

/* ── レイヤーパネル ──────────────────────────────────────────────────────────── */

#live-layer-panel {
    position: fixed;
    top: 56px;
    right: 12px;
    background: rgba(13, 17, 23, 0.88);
    border: 1px solid rgba(48, 54, 61, 0.9);
    border-radius: 8px;
    padding: 10px 14px;
    z-index: 1050;
    min-width: 130px;
    backdrop-filter: blur(8px);
    max-height: calc(100vh - 80px);
    overflow-y: auto;
}

.live-panel-title {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #8b949e;
    margin-bottom: 8px;
}

.live-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: #c9d1d9;
    padding: 4px 0;
    cursor: pointer;
    user-select: none;
    transition: color 0.15s;
}

.live-toggle:hover {
    color: #e6edf3;
}

.live-toggle input[type="checkbox"] {
    accent-color: #58a6ff;
    width: 14px;
    height: 14px;
    cursor: pointer;
}

.live-toggle-group {
    display: flex;
    flex-direction: column;
}

.live-kikikuru-sub {
    display: flex;
    flex-direction: column;
    padding-left: 18px;
    border-left: 2px solid rgba(88, 166, 255, 0.25);
    margin-left: 6px;
}

.live-kikikuru-sub.hidden {
    display: none;
}

.live-toggle-sub {
    font-size: 11px;
    color: #8b949e;
    padding: 3px 0;
}

.live-toggle-sub:hover {
    color: #c9d1d9;
}

/* ── アクティブ警戒カード ────────────────────────────────────────────────────── */

#live-alert-card {
    position: fixed;
    top: 56px;
    left: 12px;
    background: rgba(13, 17, 23, 0.88);
    border: 1px solid rgba(48, 54, 61, 0.9);
    border-radius: 8px;
    padding: 10px 14px;
    z-index: 1050;
    min-width: 200px;
    max-width: 280px;
    backdrop-filter: blur(8px);
}

/* ── デスクトップ パネルヘッダー & 最小化 ──────────────────────────────────── */

.lac-header {
    display:         flex;
    justify-content: space-between;
    align-items:     center;
    margin-bottom:   8px;
}

.lac-minimize-btn {
    background:  none;
    border:      none;
    color:       #6e7681;
    cursor:      pointer;
    font-size:   15px;
    line-height: 1;
    padding:     0 2px;
    flex-shrink: 0;
    transition:  color 0.15s;
}
.lac-minimize-btn:hover { color: #c9d1d9; }

/* minimized: タイトルバー (38px) だけ残してコンテンツを隠す */
@media (min-width: 641px) {
    #live-alert-card.is-minimized {
        max-height: 38px;
        overflow:   hidden;
    }
    #live-alert-card.is-minimized .lac-header {
        margin-bottom: 0;
    }
}
/* モバイルでは最小化ボタン非表示（シートのクローズボタンで対応） */
@media (max-width: 640px) {
    .lac-minimize-btn { display: none; }
}

.lac-title {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #8b949e;
    margin-bottom: 8px;
}

.lac-item {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 5px 0 5px 8px;
    border-left: 3px solid rgba(48, 54, 61, 0.9);
    margin-bottom: 4px;
    font-size: 12px;
    color: #c9d1d9;
    line-height: 1.4;
}

.lac-item.lac-urgent {
    color: #f0f6fc;
}

.lac-item.lac-warn {
    color: #f0c050;
}

.lac-badge {
    display: inline-block;
    font-size: 10px;
    font-weight: 700;
    padding: 1px 5px;
    border-radius: 3px;
    background: rgba(48, 54, 61, 0.8);
    color: #c9d1d9;
    flex-shrink: 0;
    margin-top: 1px;
}

.lac-text {
    flex: 1;
    font-size: 12px;
    line-height: 1.5;
}

.lac-text small {
    font-size: 10px;
    color: #8b949e;
    display: block;
}

.lac-updated {
    font-size: 10px;
    color: #6e7681;
    margin-top: 6px;
    text-align: right;
}

/* ── ステータスバー（下部） ──────────────────────────────────────────────────── */

#live-status-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 24px;
    background: rgba(13, 17, 23, 0.88);
    border-top: 1px solid rgba(48, 54, 61, 0.8);
    display: flex;
    align-items: center;
    padding: 0 12px;
    gap: 16px;
    z-index: 1100;
    backdrop-filter: blur(6px);
}

.live-status-item {
    font-size: 10px;
    color: #6e7681;
    display: flex;
    align-items: center;
    gap: 4px;
}

.live-status-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #3fb950;
    flex-shrink: 0;
}

.live-status-dot.offline {
    background: #da3633;
}

.live-status-dot.updating {
    background: #e3b341;
    animation: blink 1s step-end infinite;
}

@keyframes blink {
    50% { opacity: 0; }
}

/* ── Leaflet 上書き ──────────────────────────────────────────────────────────── */

.leaflet-control-zoom {
    top: 56px;
}

.leaflet-popup-content-wrapper {
    background: rgba(22, 27, 34, 0.95);
    color: #e6edf3;
    border: 1px solid rgba(48, 54, 61, 0.8);
    border-radius: 6px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
}

.leaflet-popup-tip {
    background: rgba(22, 27, 34, 0.95);
}

.leaflet-popup-content {
    font-size: 12px;
    line-height: 1.6;
    margin: 10px 14px;
}

.leaflet-popup-content b {
    color: #58a6ff;
}

/* ── アラートカード スクロール対応 ───────────────────────────────────────────── */

#live-alert-card {
    max-height: calc(100vh - 80px);
    overflow-y: auto;
}

/* ── 交通情報セクション（アラートパネル内統合） ─────────────────────────────── */

.lac-traffic-section {
    border-top: 1px solid rgba(48, 54, 61, 0.9);
    margin-top: 6px;
    padding-top: 4px;
}

#lac-train-slot {
    font-size: 13px;
    color: #c9d1d9;
    padding: 4px 0 2px;
}

/* ── 空状態・オフラインメッセージ ────────────────────────────────────────────── */

.lac-allclear {
    font-size: 11px;
    color: #3fb950;
    margin-top: 6px;
    padding: 4px 8px;
    border-left: 3px solid #3fb950;
}

.lac-partial-offline {
    font-size: 11px;
    color: #e3b341;
    margin-top: 6px;
    padding: 4px 8px;
    border-left: 3px solid #e3b341;
}

.lac-offline {
    border-left-color: #da3633 !important;
    color: #ffa198;
}

.lac-offline .lac-text {
    color: #ffa198;
}

.lac-dim {
    border-left-color: #484f58 !important;
}

.lac-dim .lac-text {
    color: #6e7681;
}

/* ── 危険地域セクション ──────────────────────────────────────────────────────── */

.lac-section-title {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #8b949e;
    margin-top: 10px;
    margin-bottom: 4px;
}

.lac-danger-list {
    max-height: 180px;
    overflow-y: auto;
}

.lac-danger-item {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    padding: 5px 6px 5px 8px;
    border-left: 3px solid #484f58;
    margin-bottom: 4px;
    border-radius: 0 3px 3px 0;
    background: rgba(48, 54, 61, 0.25);
}

.lac-danger-item.lac-danger-danger {
    border-left-color: #da3633;
    background: rgba(218, 54, 51, 0.1);
}

.lac-danger-item.lac-danger-warning {
    border-left-color: #e3b341;
    background: rgba(227, 179, 65, 0.08);
}

.lac-danger-item.lac-danger-watch {
    border-left-color: #58a6ff;
    background: rgba(88, 166, 255, 0.06);
}

.lac-danger-clickable {
    cursor: pointer;
    transition: background 0.15s;
}

.lac-danger-clickable:hover {
    background: rgba(88, 166, 255, 0.12) !important;
}

.lac-danger-rank {
    font-size: 10px;
    font-weight: 700;
    color: #8b949e;
    min-width: 14px;
    padding-top: 1px;
    flex-shrink: 0;
}

.lac-danger-info {
    flex: 1;
    min-width: 0;
}

.lac-danger-label {
    font-size: 12px;
    color: #e6edf3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.lac-danger-types {
    font-size: 10px;
    color: #8b949e;
    margin-top: 1px;
}

.lac-danger-events {
    margin-top: 2px;
}

.lac-danger-event {
    font-size: 11px;
    font-weight: 600;
    color: #c9d1d9;
    line-height: 1.5;
}

/* ── 地震一覧リスト ──────────────────────────────────────────────────────────── */

.lac-eq-list-wrap {
    margin: 0 0 4px 8px;
    border-left: 2px solid rgba(227, 179, 65, 0.3);
    padding-left: 6px;
}

.lac-eq-item {
    padding: 4px 4px 4px 0;
    border-bottom: 1px solid rgba(48, 54, 61, 0.5);
    font-size: 11px;
    color: #c9d1d9;
}

.lac-eq-item:last-child {
    border-bottom: none;
}

.lac-eq-clickable {
    cursor: pointer;
    transition: background 0.15s;
    border-radius: 2px;
    padding-left: 3px;
}

.lac-eq-clickable:hover {
    background: rgba(88, 166, 255, 0.1);
}

.lac-eq-name {
    font-size: 11px;
    color: #e6edf3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.lac-eq-meta {
    font-size: 10px;
    color: #8b949e;
    margin-top: 1px;
}

.lac-eq-meta small {
    margin-left: 4px;
    font-size: 10px;
}

.lac-eq-empty {
    font-size: 10px;
    color: #6e7681;
    padding: 3px 0;
}

.lac-eq-day-sep {
    font-size: 9px;
    color: #6e7681;
    padding: 4px 0 2px;
    margin-top: 2px;
    border-top: 1px solid rgba(48, 54, 61, 0.6);
    letter-spacing: 0.03em;
}

.lac-eq-day-sep:first-child {
    border-top: none;
    margin-top: 0;
}

.lac-expand-arrow {
    font-size: 9px;
    color: #8b949e;
    margin-left: 3px;
}

/* ── 重要地震セクション ─────────────────────────────────────────────────────── */

.lac-eq-important-section {
    margin: 4px 0 4px 0;
    border-left: 2px solid #ff4444;
    padding-left: 6px;
}

.lac-eq-section-header {
    font-size: 10px;
    font-weight: 600;
    color: #ff4444;
    letter-spacing: 0.05em;
    padding: 3px 0 2px;
}

.lac-eq-important-item {
    padding: 4px 4px 4px 0;
    border-bottom: 1px solid rgba(255, 68, 68, 0.15);
    font-size: 11px;
}

.lac-eq-important-item:last-child {
    border-bottom: none;
}

.lac-eq-fallback-note {
    font-size: 9px;
    color: #ff9944;
    margin-top: 2px;
    padding: 1px 4px;
    background: rgba(255, 153, 68, 0.12);
    border-radius: 2px;
    display: inline-block;
}

.lac-eq-selected {
    background: rgba(88, 166, 255, 0.12);
    border-left: 2px solid #58a6ff !important;
    padding-left: 4px;
}

.lac-eq-update-count {
    font-size: 9px;
    color: #8b949e;
    margin-left: 4px;
    opacity: 0.75;
}

/* ── 現在地パルスマーカー ────────────────────────────────────────────────────── */

@keyframes live-location-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(255, 51, 51, 0.65); }
    70%  { box-shadow: 0 0 0 36px rgba(255, 51, 51, 0); }
    100% { box-shadow: 0 0 0 0 rgba(255, 51, 51, 0); }
}

.live-location-dot {
    width:         18px;
    height:        18px;
    background:    #ff3333;
    border:        3px solid #ffffff;
    border-radius: 50%;
    box-shadow:    0 0 0 0 rgba(255, 51, 51, 0.65);
    animation:     live-location-pulse 2.2s ease-out infinite;
}

/* ── 現在地ボタン（マップ右下） ──────────────────────────────────────────────── */

.live-locate-btn {
    width:           100%;
    background:      transparent;
    border:          1px solid rgba(48, 54, 61, 0.7);
    border-radius:   5px;
    color:           #c9d1d9;
    cursor:          pointer;
    display:         flex;
    align-items:     center;
    gap:             6px;
    padding:         5px 6px;
    font-size:       12px;
    margin-top:      2px;
    transition:      background 0.15s, color 0.15s;
}

.live-locate-btn:hover,
.live-locate-btn:active {
    background: rgba(88, 166, 255, 0.12);
    color:      #58a6ff;
}

.live-locate-btn--error {
    color:        #f85149;
    border-color: rgba(248, 81, 73, 0.4);
}

.live-locate-btn--error:hover,
.live-locate-btn--error:active {
    background:   rgba(248, 81, 73, 0.1);
    color:        #f85149;
    border-color: rgba(248, 81, 73, 0.6);
}

/* ── 凡例ボタン（レイヤーパネル内） ──────────────────────────────────────────── */

.live-legend-btn {
    width:           100%;
    background:      transparent;
    border:          1px solid rgba(48, 54, 61, 0.7);
    border-radius:   5px;
    color:           #c9d1d9;
    cursor:          pointer;
    display:         flex;
    align-items:     center;
    gap:             6px;
    padding:         5px 6px;
    font-size:       12px;
    margin-top:      2px;
    transition:      background 0.15s, color 0.15s;
}
.live-legend-btn:hover,
.live-legend-btn:active {
    background: rgba(88, 166, 255, 0.12);
    color:      #58a6ff;
}

/* ── 凡例パネル ──────────────────────────────────────────────────────────────── */

#live-legend-panel {
    position:        fixed;
    top:             56px;
    right:           160px;          /* レイヤーパネルの左隣 */
    width:           220px;
    background:      rgba(13, 17, 23, 0.95);
    border:          1px solid rgba(48, 54, 61, 0.9);
    border-radius:   8px;
    padding:         0;
    z-index:         1060;
    backdrop-filter: blur(10px);
    box-shadow:      0 4px 16px rgba(0, 0, 0, 0.5);
    overflow:        hidden;
}

/* ヘッダー（タブ + 閉じるボタン） */
.llp-header {
    display:          flex;
    align-items:      center;
    padding:          8px 8px 0;
    gap:              4px;
}
.llp-tabs {
    display: flex;
    gap:     3px;
    flex:    1;
}
.llp-tab {
    flex:            1;
    background:      transparent;
    border:          1px solid rgba(48, 54, 61, 0.6);
    border-radius:   4px;
    color:           #6e7681;
    cursor:          pointer;
    font-size:       11px;
    padding:         4px 0;
    transition:      background 0.15s, color 0.15s;
}
.llp-tab.is-active {
    background: rgba(88, 166, 255, 0.15);
    color:      #58a6ff;
    border-color: rgba(88, 166, 255, 0.3);
}
.llp-close {
    background:  none;
    border:      none;
    color:       #6e7681;
    cursor:      pointer;
    font-size:   16px;
    padding:     2px 4px;
    line-height: 1;
    flex-shrink: 0;
    transition:  color 0.15s;
}
.llp-close:hover { color: #c9d1d9; }

/* 凡例本体 */
.llp-body {
    padding: 8px 10px 4px;
}
.llp-row {
    display:     flex;
    align-items: center;
    gap:         8px;
    padding:     4px 0;
}
.llp-swatch {
    width:         20px;
    height:        14px;
    border-radius: 2px;
    flex-shrink:   0;
}
.llp-swatch-line {
    flex-shrink: 0;
    display:     block;
}
.llp-text   { flex: 1; min-width: 0; }
.llp-label  { font-size: 11px; color: #e6edf3; line-height: 1.3; }
.llp-sub    { font-size: 10px; color: #8b949e; margin-top: 1px; }
.llp-note   {
    font-size:   9px;
    color:       #484f58;
    margin-top:  6px;
    padding-top: 4px;
    border-top:  1px solid rgba(48, 54, 61, 0.5);
    padding-bottom: 4px;
}
.llp-section-label {
    font-size:  10px;
    color:      #6e7681;
    font-weight: 600;
    margin-top:  2px;
    margin-bottom: 1px;
}

/* ── ステータスドット（unknown 追加） ────────────────────────────────────────── */

.live-status-dot.unknown {
    background: #484f58;
}

/* ── ローディングオーバーレイ ────────────────────────────────────────────────── */

#live-loading {
    position: fixed;
    inset: 0;
    background: #0d1117;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2000;
    font-size: 14px;
    color: #8b949e;
    transition: opacity 0.3s;
}

#live-loading.hidden {
    opacity: 0;
    pointer-events: none;
}


/* ═══════════════════════════════════════════════════════════════════════════════
   📱 モバイル最適化レイヤー  ← ここから下が新規追加（既存コードに丸ごと追記可）
   - 地図ファースト: フローティングパネルを「ボトムシート」と「レイヤーFAB」に再構成
   - 44px+ のタップ領域 / safe-area 対応 / flex→grid でランキング行を圧縮
   ═══════════════════════════════════════════════════════════════════════════════ */

/* ── 共通の新規パーツ（PC では非表示、モバイルで有効化） ───────────────────────── */

#live-layers-fab,
.sheet-handle,
.sheet-peek,
.sheet-scrim { display: none; }

@media (max-width: 640px) {

    /* ── ヘッダー: safe-area を尊重して少し大きく ── */
    #live-header {
        height: calc(50px + env(safe-area-inset-top));
        padding-top: env(safe-area-inset-top);
        padding-left: max(16px, env(safe-area-inset-left));
        padding-right: max(12px, env(safe-area-inset-right));
    }
    .live-title { font-size: 16px; }
    .live-title-sub { font-size: 12px; }
    .live-nav-link {
        font-size: 13px;
        padding: 7px 12px;          /* 44px 近いタップ領域 */
    }

    /* ── 地図はヘッダー下〜画面下まで全面 ── */
    #live-map {
        top: calc(50px + env(safe-area-inset-top));
        bottom: 0;
    }

    /* ── 下部の細いステータスバーは廃止（凡例はシート内に集約） ── */
    #live-status-bar { display: none; }

    .leaflet-control-zoom { display: none; }   /* ピンチで操作。画面を広く使う */

    /* ════ レイヤー: 右上の FAB ボタン → タップでパネル展開 ════ */

    #live-layers-fab {
        display: flex;
        position: fixed;
        top: calc(58px + env(safe-area-inset-top));
        right: max(12px, env(safe-area-inset-right));
        z-index: 1060;
        width: 46px;
        height: 46px;
        align-items: center;
        justify-content: center;
        border-radius: 12px;
        background: rgba(13, 17, 23, 0.9);
        border: 1px solid rgba(48, 54, 61, 0.9);
        backdrop-filter: blur(8px);
        color: #c9d1d9;
        cursor: pointer;
        box-shadow: 0 4px 14px rgba(0, 0, 0, 0.45);
        transition: border-color 0.15s, color 0.15s;
    }
    #live-layers-fab.is-active { border-color: #58a6ff; color: #58a6ff; }
    #live-layers-fab svg { width: 22px; height: 22px; }
    /* 有効レイヤー数バッジ */
    #live-layers-fab .fab-count {
        position: absolute;
        top: -5px;
        right: -5px;
        min-width: 17px;
        height: 17px;
        padding: 0 4px;
        border-radius: 9px;
        background: #58a6ff;
        color: #0d1117;
        font-size: 10px;
        font-weight: 700;
        line-height: 17px;
        text-align: center;
    }

    /* 凡例パネル: モバイルでは画面下部フルwidth */
    #live-legend-panel {
        top:    auto;
        right:  0;
        bottom: calc(30px + env(safe-area-inset-bottom));
        left:   0;
        width:  auto;
        border-radius: 12px 12px 0 0;
        max-height: 60vh;
        overflow-y: auto;
    }

    #live-layer-panel {
        top: calc(110px + env(safe-area-inset-top));
        right: max(12px, env(safe-area-inset-right));
        min-width: 168px;
        padding: 8px 8px;
        transform-origin: top right;
        transition: opacity 0.18s ease, transform 0.18s ease;
        max-height: calc(100vh - 140px);
        overflow-y: auto;
    }
    #live-layer-panel:not(.is-open) {
        opacity: 0;
        transform: scale(0.92) translateY(-6px);
        pointer-events: none;
    }
    /* モバイルではトグルをタップしやすい行に */
    .live-toggle {
        font-size: 14px;
        padding: 9px 8px;
        border-radius: 8px;
        gap: 10px;
    }
    .live-toggle:active { background: rgba(88, 166, 255, 0.12); }
    .live-toggle input[type="checkbox"] { width: 18px; height: 18px; }

    /* ════ 警戒カード → ボトムシート ════ */

    #live-alert-card {
        top: auto;
        left: 0;
        right: 0;
        bottom: 0;
        width: 100%;
        min-width: 0;
        max-width: none;
        max-height: 82vh;
        max-height: 82dvh;          /* アドレスバー高さを除いた動的ビューポート基準 */
        padding: 0;                 /* 内側パーツで個別に余白 */
        border: none;
        border-top: 1px solid rgba(48, 54, 61, 0.9);
        border-radius: 18px 18px 0 0;
        background: rgba(13, 17, 23, 0.15);
        box-shadow: 0 -8px 30px rgba(0, 0, 0, 0.5);
        overflow: hidden;           /* スクロールは内側 .sheet-scroll が担う */
        display: flex;
        flex-direction: column;
        transform: translateY(var(--sheet-collapsed, calc(100% - 168px)));
        transition: transform 0.34s cubic-bezier(0.32, 0.72, 0, 1);
        /* touch-action は handle/peek のみ none にして scroll は pan-y を許可 */
    }
    #live-alert-card.is-expanded  {
        transform: translateY(0);
        z-index: 1070;
    }
    #live-alert-card.is-half {
        transform: translateY(var(--sheet-half, 50dvh));
        z-index: 1070;
    }
    #live-alert-card.is-dragging  { transition: none; }
    #live-alert-card.is-sheet-closed {
        transform: translateY(100%) !important;
    }

    /* 復元タブ（シート閉鎖時に画面下部に表示） */
    #live-sheet-restore {
        display:         none;
        position:        fixed;
        bottom:          calc(30px + env(safe-area-inset-bottom));
        left:            50%;
        transform:       translateX(-50%);
        background:      rgba(13, 17, 23, 0.92);
        border:          1px solid rgba(48, 54, 61, 0.8);
        border-radius:   20px;
        color:           #c9d1d9;
        cursor:          pointer;
        font-size:       13px;
        padding:         9px 20px;
        z-index:         1090;
        backdrop-filter: blur(8px);
        align-items:     center;
        gap:             6px;
    }
    #live-sheet-restore.is-visible { display: flex; }

    /* グラブハンドル（常時表示・タップ/ドラッグで開閉） */
    .sheet-handle {
        position:       relative;   /* 閉じるボタンの absolute 基準 */
        display:        flex;
        flex-direction: column;
        align-items:    center;
        gap:            7px;
        padding:        9px 0 4px;
        flex-shrink:    0;
        cursor:         grab;
    }
    .sheet-handle::before {
        content:       "";
        width:         38px;
        height:        4px;
        border-radius: 2px;
        background:    #484f58;
    }

    /* 閉じる「×」ボタン */
    .sheet-close-btn {
        position:    absolute;
        right:       14px;
        top:         50%;
        transform:   translateY(-50%);
        background:  none;
        border:      none;
        color:       #6e7681;
        font-size:   20px;
        line-height: 1;
        padding:     6px;
        cursor:      pointer;
        transition:  color 0.15s;
    }
    .sheet-close-btn:active { color: #c9d1d9; }

    /* 折りたたみ時に見えるサマリー（横スクロールのステータスチップ） */
    .sheet-peek {
        display: block;
        flex-shrink: 0;
        padding: 0 14px 12px;
    }
    .peek-chips {
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
        padding-bottom: 4px;
    }
    .peek-chip {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        flex-shrink: 0;
        padding: 6px 11px;
        border-radius: 999px;
        background: rgba(48, 54, 61, 0.4);
        border: 1px solid rgba(48, 54, 61, 0.9);
        font-size: 12.5px;
        color: #c9d1d9;
        white-space: nowrap;
    }
    .peek-chip .dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
    .peek-chip.is-warn { color: #f0c050; border-color: rgba(227, 179, 65, 0.45); }
    .peek-chip.is-urgent { color: #ffb3a7; border-color: rgba(218, 54, 51, 0.5); }
    .peek-meta {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-top: 9px;
        font-size: 11.5px;
        color: #8b949e;
    }
    .peek-meta .peek-expand { color: #58a6ff; font-weight: 600; }

    /* ドラッグ操作はハンドル行/ピーク行のみ。スクロール領域は縦パンを許可 */
    .sheet-handle,
    .sheet-peek { touch-action: none; }

    /* 展開時のスクロール領域 */
    .sheet-scroll {
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        touch-action: pan-y;        /* iOS Safariでタッチスクロールを有効化 */
        /* iOS Safari のツールバー(~49px)はenv(safe-area-inset-bottom)に含まれないため
           100px を最低保証とし、ホームインジケータ込みの端末でも十分な余白を確保する */
        padding: 4px 16px max(calc(env(safe-area-inset-bottom) + 60px), 100px);
        flex: 1;
        min-height: 0;
    }
    /* peek 状態のみ本文を隠す（half / full では表示） */
    #live-alert-card:not(.is-expanded):not(.is-half) .sheet-scroll { opacity: 0; pointer-events: none; }
    /* half / full ではペク行を非表示にして本文エリアを広げる */
    #live-alert-card.is-half .sheet-peek,
    #live-alert-card.is-expanded .sheet-peek { display: none; }

    /* シート内: 既存カード本文の余白調整 */
    .sheet-scroll .lac-title { display: none; }   /* タイトルはハンドル領域に集約 */
    .sheet-scroll .lac-item {
        font-size: 14px;
        padding: 9px 0 9px 10px;
    }
    .sheet-scroll .lac-text { font-size: 14px; }
    .sheet-scroll .lac-text small { font-size: 12px; }

    /* 危険地域ランキング: flex→grid で行高を圧縮しつつ整列 */
    .lac-danger-list { max-height: none; }
    .lac-danger-item {
        display: grid;
        grid-template-columns: 22px 1fr auto;
        align-items: center;
        gap: 10px;
        padding: 11px 10px 11px 10px;
        margin-bottom: 6px;
        border-radius: 0 8px 8px 0;
    }
    .lac-danger-rank { font-size: 13px; padding-top: 0; text-align: center; }
    .lac-danger-label { font-size: 14px; }
    .lac-danger-types { font-size: 12px; margin-top: 2px; }
    .lac-danger-event { font-size: 13px; }
    .lac-danger-clickable::after {
        content: "›";
        font-size: 20px;
        color: #6e7681;
        line-height: 1;
    }

    /* シート最下部の凡例（旧ステータスバーの代替） */
    .sheet-legend {
        display: flex;
        flex-wrap: wrap;
        gap: 8px 16px;
        margin-top: 14px;
        padding-top: 12px;
        border-top: 1px solid rgba(48, 54, 61, 0.6);
    }
    .sheet-legend .live-status-item { font-size: 11px; }

    /* 展開時の地図スクリム（タップで閉じる） */
    .sheet-scrim {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 1040;
        background: rgba(0, 0, 0, 0.32);
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.3s;
    }
    .sheet-scrim.is-visible { opacity: 1; pointer-events: auto; }
}

/* 極小幅: チップを詰める */
@media (max-width: 360px) {
    .peek-chip { padding: 5px 9px; font-size: 11.5px; }
    .live-title { font-size: 15px; }
}

/* ── 震度分布マーカー（live-earthquake-layer.js）────────────────────────────── */
/* index.html の .earthquake-intensity-marker と同一定義 */

.earthquake-intensity-marker {
    border-radius: 999px;
    font-weight: 700;
    text-align: center;
    border: 2px solid rgba(0, 0, 0, 0.25);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

/* ── 日月情報カード（レイヤーパネル内セクション） ───────────────────────────── */

.live-panel-sep {
    border: none;
    border-top: 1px solid rgba(48, 54, 61, 0.7);
    margin: 8px 0;
}

#live-sun-moon-card {
    padding-top: 2px;
}

.live-sm-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    font-size: 11px;
    color: #c9d1d9;
    padding: 2px 0;
    gap: 8px;
}

.live-sm-label {
    color: #8b949e;
    flex-shrink: 0;
}

.live-sm-value {
    color: #e6edf3;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.live-sm-phase {
    font-size: 9px;
    color: #8b949e;
    margin-left: 4px;
}

.live-sm-spacer {
    height: 4px;
}

.live-sm-error {
    font-size: 10px;
    color: #6e7681;
    padding: 2px 0;
}

@media (max-width: 640px) {
    .live-sm-row { font-size: 13px; padding: 3px 0; }
    .live-sm-phase { font-size: 10px; }
}

/* ── 雨雲予測タイムライン (Phase 5-B) ──────────────────────────────────────── */

.live-rain-tl {
    margin-top: 4px;
    padding: 6px 0 2px;
    border-top: 1px solid rgba(48, 54, 61, 0.6);
}

.live-rain-tl-info {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    color: #c9d1d9;
    margin-bottom: 4px;
}

.live-rain-tl-info span:first-child {
    color: #58a6ff;
    font-weight: 600;
    min-width: 36px;
}

.live-rain-tl-info span:nth-child(2) {
    font-variant-numeric: tabular-nums;
    color: #8b949e;
    flex: 1;
}

.live-rain-tl-btn {
    background: rgba(88, 166, 255, 0.12);
    border: 1px solid rgba(88, 166, 255, 0.3);
    border-radius: 4px;
    color: #58a6ff;
    font-size: 10px;
    line-height: 1;
    padding: 2px 6px;
    cursor: pointer;
    transition: background 0.15s;
}

.live-rain-tl-btn:hover {
    background: rgba(88, 166, 255, 0.22);
}

.live-rain-tl-slider {
    width: 100%;
    accent-color: #58a6ff;
    height: 4px;
    cursor: pointer;
}

@media (max-width: 640px) {
    .live-rain-tl { padding: 8px 0 4px; }
    .live-rain-tl-info { font-size: 13px; gap: 8px; }
    .live-rain-tl-btn { font-size: 12px; padding: 3px 8px; }
}

/* ── 高潮警報 沿岸部ハイライト ────────────────────────────────────────────── */

/* SVG circle 要素にアニメーションを適用 */
@keyframes storm-surge-coast-pulse {
    0%, 100% { stroke-opacity: 0.85; }
    50%       { stroke-opacity: 0.30; }
}

.storm-surge-coast-ring {
    animation: storm-surge-coast-pulse 3s ease-in-out infinite;
}

/* ── Phase C: 高潮浸水想定区域 案内ヒント ────────────────────────────────── */

.live-surge-hint {
    font-size: 10px;
    color: #f97316;
    padding: 3px 0 3px 4px;
    display: flex;
    align-items: center;
    gap: 4px;
    line-height: 1.4;
}

.live-surge-hint.hidden {
    display: none;
}

.live-surge-hint-link {
    color: #58a6ff;
    text-decoration: underline;
    cursor: pointer;
}