:root { --bg: #0a0a0a; --panel: rgba(18, 18, 22, 0.95); --text: #eaeaea; --accent: #4dabf7; --border: #333; --sidebar-width: 400px; }
        body, html { margin: 0; padding: 0; height: 100%; background: var(--bg); color: var(--text); font-family: 'Malgun Gothic', 'Apple SD Gothic Neo', sans-serif; overflow: hidden; }
        
        #layout { display: flex; height: 100vh; width: 100vw; position: relative; }
        #map { flex: 1 1 0; min-width: 0; height: 100%; background: #050505; position: relative; }
        /* OSM is only used as the last fallback; dim it to preserve the dark
           display and keep the real-time station colours easy to distinguish. */
        .ksh-darkened-osm { filter: brightness(0.43) contrast(1.12) saturate(0.72); }
        .leaflet-control-zoom a { background: rgba(14, 20, 30, 0.92) !important; color: #eaf3ff !important; border-color: #3e526f !important; }
        .leaflet-control-zoom a:hover { background: #213858 !important; color: #fff !important; }
        .leaflet-control-attribution { background: rgba(8, 12, 18, 0.78) !important; color: #aab8ca !important; }
        .leaflet-control-attribution a { color: #82b9ff !important; }
        #map-network-notice {
            position: absolute; z-index: 1000; left: 50%; top: 50%; transform: translate(-50%, -50%);
            width: min(320px, calc(100% - 32px)); padding: 14px; border: 1px solid #ffbb33;
            border-radius: 8px; background: rgba(15, 15, 18, 0.94); color: #feca57;
            text-align: center; font-size: 0.85rem; line-height: 1.55; box-sizing: border-box;
        }
        #realtime-clock {
            position: absolute; top: 15px; right: 15px; z-index: 2000;
            background: rgba(10, 10, 10, 0.85); color: #fff;
            padding: 8px 16px; border-radius: 8px; border: 1px solid var(--border);
            font-family: 'Courier New', Courier, monospace; font-size: 1.3rem; font-weight: bold;
            box-shadow: 0 4px 10px rgba(0,0,0,0.5); backdrop-filter: blur(5px);
            display: flex; align-items: center; gap: 8px;
        }
        .blink-dot { width: 8px; height: 8px; background: #00C851; border-radius: 50%; box-shadow: 0 0 8px #00C851; animation: blink 1s infinite; }
        @keyframes blink { 0% { opacity: 1; } 50% { opacity: 0.3; } 100% { opacity: 1; } }

        #sidebar {
            width: var(--sidebar-width); min-width: 300px; max-width: 640px; background: var(--panel); border-right: 1px solid var(--border);
            display: flex; flex-direction: column; z-index: 1001; box-shadow: 2px 0 15px rgba(0,0,0,0.7);
        }
        #sidebar-resizer { width: 7px; flex: 0 0 7px; z-index: 1100; cursor: col-resize; background: transparent; touch-action: none; transition: background 0.15s ease; }
        #sidebar-resizer:hover, body.sidebar-resizing #sidebar-resizer { background: rgba(77, 171, 247, 0.72); }
        body.sidebar-resizing { user-select: none; cursor: col-resize; }
        .header { padding: 18px 20px 0 20px; border-bottom: 1px solid var(--border); background: #111; }
        .header h1 { margin: 0 0 8px 0; font-size: 1.3rem; color: var(--accent); letter-spacing: -0.5px; }
        .source-info { font-size: 0.8rem; color: #888; display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
        
        /* 탭 및 출처 페이지 스타일 */
        .tabs { display: flex; border-bottom: 1px solid var(--border); background: #111; }
        .tab-btn { flex: 1; padding: 12px; background: none; border: none; color: #777; cursor: pointer; font-size: 0.9rem; font-weight: bold; transition: 0.2s; }
        .tab-btn:hover { color: #fff; }
        .tab-btn.active { color: var(--accent); border-bottom: 2px solid var(--accent); background: rgba(77, 171, 247, 0.05); }

        .content-area { flex-grow: 1; display: none; flex-direction: column; overflow: hidden; }
        .content-area.active { display: flex; }
        #sources-tab { overflow-y: auto; padding: 15px; }

        /* Space bar: compact monitoring view with only the title, live list,
           and clock. The history tab is selected in JS. */
        body.minimal-monitor-mode .source-info,
        body.minimal-monitor-mode .tabs,
        body.minimal-monitor-mode #eew-panel,
        body.minimal-monitor-mode .dropdown-menu,
        body.minimal-monitor-mode #toast-container,
        body.minimal-monitor-mode #realtime-clock > :not(#clock-text),
        body.minimal-monitor-mode .leaflet-control-zoom {
            display: none;
        }
        body.minimal-monitor-mode .header { padding: 10px 14px; }
        body.minimal-monitor-mode .header h1 { margin: 0; font-size: 1.05rem; }
        body.minimal-monitor-mode #realtime-clock { padding: 7px 10px; gap: 0; }
        body.minimal-monitor-mode #history-list { padding-top: 6px; }
        body.minimal-monitor-mode #earthquake-detail-panel { display: none; }
        body.minimal-monitor-mode #station-replay-panel { display: none; }

        #earthquake-detail-panel {
            position: absolute; z-index: 2100; left: calc(var(--sidebar-width) + 20px); bottom: 16px;
            width: min(330px, calc(100vw - var(--sidebar-width) - 38px)); box-sizing: border-box;
            background: rgba(12, 17, 24, 0.96); border: 1px solid #3c5066; border-radius: 9px;
            box-shadow: 0 8px 28px rgba(0,0,0,0.48); backdrop-filter: blur(8px); overflow: hidden;
        }
        #earthquake-detail-panel[hidden] { display: none; }
        .detail-panel-header { padding: 9px 11px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid #2f3b48; color: #dcecff; font-size: 0.82rem; }
        .detail-panel-header button, .settings-header button { width: 27px; height: 27px; border: 0; border-radius: 4px; background: transparent; color: #aebdca; cursor: pointer; font-size: 1.3rem; line-height: 1; }
        .detail-panel-header button:hover, .settings-header button:hover { background: rgba(255,255,255,0.10); color: #fff; }
        #earthquake-detail-content { padding: 12px; }
        .detail-place { color: #f4f8fc; font-size: 0.98rem; font-weight: 800; line-height: 1.35; }
        .detail-primary { display: flex; gap: 8px; margin: 10px 0; }
        .detail-primary span { flex: 1; padding: 7px 8px; background: rgba(255,255,255,0.06); border-radius: 5px; color: #dce5ee; font-size: 0.83rem; font-weight: 700; text-align: center; }
        .detail-primary span:first-child { color: #7cc6ff; }
        .detail-grid { margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 9px 12px; }
        .detail-grid div { min-width: 0; }
        .detail-grid dt { margin: 0 0 3px; color: #8798a9; font-size: 0.64rem; font-weight: 700; }
        .detail-grid dd { margin: 0; color: #dce5ee; font-size: 0.73rem; line-height: 1.35; word-break: break-word; }
        .detail-sources { display: flex; gap: 3px; flex-wrap: wrap; }

        #station-replay-panel {
            position: absolute; z-index: 2200; left: calc(var(--sidebar-width) + 20px); top: 16px;
            width: min(365px, calc(100vw - var(--sidebar-width) - 38px)); box-sizing: border-box;
            padding: 11px; border: 1px solid #3c5066; border-radius: 9px; background: rgba(12, 17, 24, 0.96);
            box-shadow: 0 8px 28px rgba(0,0,0,0.48); backdrop-filter: blur(8px);
        }
        #station-replay-panel[hidden] { display: none; }
        .station-replay-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 9px; color: #dcecff; font-size: 0.82rem; }
        .station-replay-header button { width: 26px; height: 26px; padding: 0; border: 0; border-radius: 4px; background: transparent; color: #aebdca; cursor: pointer; font-size: 1.25rem; line-height: 1; }
        .station-replay-header button:hover { background: rgba(255,255,255,0.10); color: #fff; }
        .station-replay-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; color: #9fb0bf; font-size: 0.68rem; }
        .station-replay-row label { display: flex; align-items: center; gap: 5px; }
        .station-replay-row select { padding: 4px 5px; border: 1px solid #40505f; border-radius: 4px; background: #0e141b; color: #e5edf4; font: inherit; }
        #station-replay-status { color: #8fb9d9; font-variant-numeric: tabular-nums; text-align: right; }
        #station-replay-scrubber { width: 100%; margin: 1px 0 0; accent-color: #4dabf7; cursor: pointer; }
        .station-replay-times { display: grid; grid-template-columns: 1fr auto 1fr; gap: 8px; margin-top: 3px; color: #8798a9; font-size: 0.66rem; font-variant-numeric: tabular-nums; }
        .station-replay-times strong { color: #e9f4ff; font-size: 0.69rem; }
        .station-replay-times time:last-child { text-align: right; }
        .station-replay-actions { display: flex; gap: 6px; margin-top: 9px; }
        .station-replay-actions button { flex: 1; padding: 6px 8px; border: 1px solid #46596b; border-radius: 5px; background: #202b36; color: #e9f3fb; cursor: pointer; font-size: 0.71rem; font-weight: 700; }
        .station-replay-actions button:hover:not(:disabled) { background: #2c4054; }
        .station-replay-actions button:disabled { cursor: default; opacity: 0.45; }
        .station-replay-actions #station-replay-live { border-color: #278fe0; color: #8fd0ff; }
        #station-replay-panel p { margin: 8px 0 0; color: #8394a4; font-size: 0.62rem; line-height: 1.35; }

        .settings-modal { position: absolute; inset: 0; z-index: 5000; display: grid; place-items: center; padding: 16px; box-sizing: border-box; background: rgba(0,0,0,0.62); }
        .settings-modal[hidden] { display: none; }
        .settings-dialog { width: min(440px, 100%); max-height: calc(100vh - 32px); overflow-y: auto; box-sizing: border-box; padding: 18px; border: 1px solid #405263; border-radius: 10px; background: #151b23; color: #e6edf4; box-shadow: 0 16px 42px rgba(0,0,0,0.55); }
        .settings-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 3px; }
        .settings-header h2 { margin: 0; font-size: 1.05rem; color: #eaf4ff; }
        .settings-help { margin: 0 0 14px; color: #99a9b8; font-size: 0.76rem; }
        .settings-dialog fieldset { margin: 0 0 13px; padding: 10px; border: 1px solid #364452; border-radius: 6px; display: grid; gap: 7px; }
        .settings-dialog legend { padding: 0 4px; color: #a8bbcb; font-size: 0.75rem; font-weight: 700; }
        .settings-dialog label { color: #d8e1e9; font-size: 0.8rem; }
        .settings-dialog input, .settings-dialog select, .settings-dialog button { font: inherit; }
        .settings-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 11px; }
        .settings-grid > label { display: grid; gap: 5px; color: #9fb0bf; font-size: 0.72rem; }
        .settings-grid select { width: 100%; padding: 7px 8px; border: 1px solid #40505f; border-radius: 5px; background: #0e141b; color: #e5edf4; }
        .settings-location { grid-column: 1 / -1; display: flex; align-items: center; gap: 8px; }
        .settings-location button, .settings-actions button { padding: 7px 9px; border: 1px solid #46596b; border-radius: 5px; background: #202b36; color: #e9f3fb; cursor: pointer; font-size: 0.75rem; font-weight: 700; }
        .settings-location button:hover, .settings-actions button:hover { background: #2c4054; }
        #alert-location-status { color: #92a4b4; font-size: 0.7rem; }
        .settings-toggle { display: block; margin-top: 10px; }
        .settings-actions { display: flex; justify-content: flex-end; gap: 7px; margin-top: 17px; }
        .settings-actions button[type="submit"] { border-color: #4dabf7; background: #4dabf7; color: #071019; }

        /* EEW 패널 스타일 */
        #eew-panel {
            margin: 15px 15px 0 15px; padding: 12px; border-radius: 8px;
            background: #1a1a1a; border: 1px dashed #444; transition: all 0.3s;
            flex-shrink: 0;
        }
        #eew-panel.active {
            background: rgba(204, 0, 0, 0.15); border: 1px solid #ff4444; 
            animation: pulseEEW 1.5s infinite;
        }
        @keyframes pulseEEW {
            0% { box-shadow: 0 0 0 0 rgba(255, 68, 68, 0.4); }
            70% { box-shadow: 0 0 0 8px rgba(255, 68, 68, 0); }
            100% { box-shadow: 0 0 0 0 rgba(255, 68, 68, 0); }
        }
        .eew-title { font-weight: bold; font-size: 1.05rem; display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
        .eew-title.none { color: #666; justify-content: center; margin-bottom: 0; font-size: 0.9rem; }
        .eew-info { font-size: 0.85rem; line-height: 1.5; color: #ddd; margin-bottom: 8px; }
        .eew-tag { padding: 2px 6px; border-radius: 4px; font-size: 0.75rem; background: #ff4444; color: #fff; font-weight: 900;}
        .eew-revision-wrap { padding: 7px 0 2px; border-top: 1px dashed rgba(255,255,255,0.18); color: #b9c5d1; font-size: 0.68rem; }
        .eew-revision-list { margin: 5px 0 0; padding: 0; list-style: none; display: grid; gap: 3px; }
        .eew-revision { display: grid; grid-template-columns: 48px 1fr; gap: 2px 6px; color: #aeb9c5; }
        .eew-revision.latest { color: #f3f7fb; font-weight: 700; }
        .eew-revision small { grid-column: 2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #8d9cab; font-size: 0.64rem; }
        .eew-legend { font-size: 0.75rem; font-weight: bold; padding-top: 6px; border-top: 1px dashed rgba(255,255,255,0.2); }

        .source-card { background: #1a1a1a; border: 1px solid var(--border); border-radius: 8px; padding: 15px; margin-bottom: 15px; }
        .source-card h3 { margin: 0 0 10px 0; font-size: 1rem; display: flex; align-items: center; gap: 8px; }
        .source-card p { margin: 0 0 12px 0; font-size: 0.85rem; color: #bbb; line-height: 1.5; }
        .source-link { display: inline-block; padding: 6px 12px; background: #333; color: var(--accent); text-decoration: none; border-radius: 4px; font-size: 0.8rem; font-weight: bold; transition: 0.2s; }
        .source-link:hover { background: var(--accent); color: #000; }

        /* 모드 변경(필터) 드롭다운 메뉴 스타일 */
        .dropdown-menu { margin: 15px 15px 0 15px; position: relative; z-index: 1002; flex-shrink: 0; }
        .dropdown-header {
            background: #222; color: #fff; padding: 10px 15px; border-radius: 8px;
            cursor: pointer; border: 1px solid #444; display: flex; justify-content: space-between;
            font-size: 0.85rem; font-weight: bold; transition: background 0.3s;
        }
        .dropdown-header:hover { background: #333; }
        .dropdown-content {
            display: none; position: absolute; top: 100%; left: 0; right: 0;
            background: #1a1a1a; border: 1px solid #444; border-radius: 8px;
            padding: 10px; flex-wrap: wrap; gap: 6px; box-shadow: 0 4px 15px rgba(0,0,0,0.6);
            margin-top: 0px; /* 틈새 제거 */
            z-index: 1003;
            max-height: calc(100vh - 170px);
            overflow-y: auto;
        }
        /* 호버 시 메뉴 표시 및 마우스 이탈 방지용 가상의 다리(Bridge) 추가 */
        .dropdown-menu:hover .dropdown-content { display: flex; }
        .dropdown-content::before {
            content: ""; position: absolute; top: -15px; left: 0; right: 0; height: 15px; background: transparent;
        }
        
        .filter-btn {
            background: #222; color: #aaa; border: 1px solid #444; padding: 6px 12px;
            border-radius: 6px; font-size: 0.8rem; cursor: pointer; transition: all 0.2s;
            flex-grow: 1; text-align: center;
        }
        .filter-btn:hover { background: #333; color: #fff; }
        .filter-btn.active { background: var(--accent); color: #000; border-color: var(--accent); font-weight: bold; }
        .filter-btn.active::after { content: ' ✓'; }

        .detail-mode-control {
            display: flex; align-items: center; gap: 5px; padding: 7px 9px 2px;
            color: #9eabb8; font-size: 0.69rem;
        }
        .detail-mode-control > span { margin-right: auto; font-weight: 700; }
        .detail-mode-btn {
            padding: 4px 8px; border: 1px solid #3a4652; border-radius: 5px;
            background: #171c22; color: #aeb8c4; cursor: pointer; font-size: 0.68rem;
        }
        .detail-mode-btn:hover { border-color: var(--accent); color: #fff; }
        .detail-mode-btn.active { border-color: var(--accent); background: rgba(77, 171, 247, 0.16); color: #a9d8ff; }

        #history-list { flex-grow: 1; overflow-y: auto; padding: 8px; scroll-behavior: smooth; }
        .load-more-earthquakes {
            width: 100%; margin: 8px 0 4px; padding: 10px 12px;
            border: 1px solid #3b4652; border-radius: 5px;
            background: #202832; color: #c9d5e2; font-weight: 700;
            cursor: pointer;
        }
        .load-more-earthquakes:hover { border-color: var(--accent); color: #fff; background: #293642; }

        /* Compact seismic ledger: magnitude at left, event in the centre,
           and depth where the reference design showed its right-hand metric. */
        .eq-item {
            --record-scale: #4dabf7;
            min-height: 68px; margin-bottom: 4px; display: grid;
            grid-template-columns: 68px minmax(0, 1fr) 62px;
            overflow: hidden; cursor: pointer; background: #1b1f25;
            border: 1px solid #303842; border-radius: 5px;
            transition: background 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
        }
        .eq-item:hover { background: #242b34; border-color: #596775; transform: translateY(-1px); }
        .eq-item.active { background: #252e38; border-color: var(--record-scale); box-shadow: inset 3px 0 0 var(--record-scale); }
        .eq-item.expanded { transform: none; }

        .record-magnitude {
            min-height: 68px; display: flex; flex-direction: column; align-items: center; justify-content: center;
            background: var(--record-scale); color: #071017; font-weight: 900; line-height: 1;
            text-shadow: 0 1px 0 rgba(255,255,255,0.35);
        }
        .record-magnitude span { font-size: 0.7rem; margin-bottom: 3px; letter-spacing: 0.04em; }
        .record-magnitude strong { font-size: 1.45rem; letter-spacing: -0.08em; }

        .record-main { min-width: 0; padding: 8px 7px 7px 9px; display: flex; flex-direction: column; justify-content: center; gap: 5px; }
        .eq-place { font-weight: 700; font-size: 0.84rem; color: #f1f4f7; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
        .record-subline { display: flex; min-width: 0; align-items: center; flex-wrap: wrap; gap: 3px 4px; white-space: normal; overflow: visible; }
        .eq-time { flex: 0 0 auto; color: #aeb8c4; font-size: 0.67rem; font-variant-numeric: tabular-nums; }
        .eq-sources-wrap { display: flex; gap: 3px; flex: 0 0 auto; flex-wrap: wrap; align-items: center; }
        .eq-source { font-size: 0.58rem; line-height: 1; padding: 3px 4px; border-radius: 3px; background: #333; font-weight: 800; }

        .record-intensity {
            min-width: 0; overflow: hidden; text-overflow: ellipsis; padding: 2px 5px; border-radius: 3px;
            font-size: 0.61rem; line-height: 1.25; font-weight: 700; background: rgba(255,255,255,0.07);
        }
        .record-intensity strong { margin-left: 2px; font-size: 0.75rem; }
        .record-intensity-japan { color: #ffdd72; }
        .record-intensity-korea { color: #76e8d1; }

        .record-detail { grid-column: 1 / -1; padding: 9px; border-top: 1px solid #3b4652; background: rgba(6, 10, 15, 0.42); cursor: default; animation: revealRecordDetail 0.18s ease-out; }
        .record-detail[hidden] { display: none; }
        .record-detail-title { display: flex; justify-content: space-between; align-items: center; margin: 0 0 7px; color: #dce8f4; font-size: 0.75rem; font-weight: 800; }
        .record-detail-title span { color: #8ea3b8; font-size: 0.65rem; font-weight: 700; }
        .agency-report-list { display: grid; gap: 7px; }
        .agency-report { padding: 8px; border: 1px solid #384653; border-radius: 5px; background: rgba(28, 37, 47, 0.72); }
        .agency-report-heading { display: flex; align-items: center; gap: 6px; margin-bottom: 7px; color: #90a5b8; font-size: 0.65rem; font-weight: 700; }
        .agency-report-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 10px; margin: 0; }
        .agency-report-grid div { min-width: 0; }
        .agency-report-grid dt { margin-bottom: 2px; color: #8497a9; font-size: 0.59rem; font-weight: 700; }
        .agency-report-grid dd { margin: 0; color: #e2ebf2; font-size: 0.69rem; line-height: 1.3; overflow-wrap: anywhere; }
        .agency-report-grid .agency-report-wide { grid-column: 1 / -1; }
        @keyframes revealRecordDetail { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } }

        .record-depth {
            min-height: 68px; padding: 7px 5px; display: grid; align-content: center; justify-items: center;
            grid-template-columns: auto auto; grid-template-rows: auto auto; column-gap: 2px;
            border-left: 1px solid #313a44; background: rgba(7, 11, 16, 0.48); color: #dbe3eb;
            font-variant-numeric: tabular-nums;
        }
        .record-depth > span { grid-column: 1 / -1; margin-bottom: 3px; color: #8492a0; font-size: 0.6rem; font-weight: 700; }
        .record-depth strong { font-size: 0.95rem; line-height: 1; }
        .record-depth small { align-self: end; padding-bottom: 1px; color: #8d99a6; font-size: 0.58rem; }
        
        /* 배지 색상 */
        .src-kma { color: #55efc4; background: rgba(85, 239, 196, 0.15); }
        .src-jma { color: #ff9ff3; background: rgba(255, 159, 243, 0.15); }
        .src-emsc { color: #feca57; background: rgba(254, 202, 87, 0.15); }
        .src-usgs { color: #48dbfb; background: rgba(72, 219, 251, 0.15); }
        .src-ingv { color: #f8a5c2; background: rgba(248, 165, 194, 0.15); }
        .src-ipgp { color: #e17055; background: rgba(225, 112, 85, 0.16); }
        .src-usp { color: #00b894; background: rgba(0, 184, 148, 0.15); } /* USP 추가 */
        .src-geonet { color: #82ccdd; background: rgba(130, 204, 221, 0.15); }
        .src-gfz { color: #dfe6e9; background: rgba(223, 230, 233, 0.15); }
        .src-ncedc { color: #70a1ff; background: rgba(112, 161, 255, 0.16); }
        .src-scedc { color: #ff6b81; background: rgba(255, 107, 129, 0.16); }
        .src-ethz { color: #ff4757; background: rgba(255, 71, 87, 0.16); }
        .src-niep { color: #a4b0be; background: rgba(164, 176, 190, 0.16); }
        .src-noa { color: #5352ed; background: rgba(83, 82, 237, 0.16); }
        .src-ga { color: #74b9ff; background: rgba(116, 185, 255, 0.15); }
        .src-bgs { color: #a29bfe; background: rgba(162, 155, 254, 0.15); }
        .src-bmkg { color: #ffb142; background: rgba(255, 177, 66, 0.16); }
        .src-knmi { color: #55a3ff; background: rgba(85, 163, 255, 0.16); }
        .src-주의 { color: #ff5d5d; background: rgba(255, 93, 93, 0.15); }
        
        
        .epicenter-cross {
            color: #ff1744; font-size: 28px; font-weight: 900; text-align: center;
            line-height: 28px; text-shadow: -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff, 1px 1px 0 #fff;
        }

        .intensity-badge {
            padding: 4px 8px; border-radius: 6px; white-space: nowrap;
            display: flex; align-items: center; justify-content: center;
            color: #fff; font-weight: 900; font-size: 13px; border: 1.5px solid rgba(255,255,255,0.8);
            text-shadow: 1px 1px 2px rgba(0,0,0,0.9); box-shadow: 0 2px 8px rgba(0,0,0,0.8);
        }
        
        .intensity-icon { cursor: pointer; transition: transform 0.2s; }
        .intensity-icon:hover { transform: scale(1.5); }

        .jma-pref-circle { transition: transform 0.2s; }
        .jma-pref-circle:hover { transform: scale(1.3); z-index: 3000 !important; }

        .sc-1 { border-left-color: #33b5e5 !important; } .c-1 { color: #33b5e5; }
        .sc-2 { border-left-color: #00C851 !important; } .c-2 { color: #00C851; }
        .sc-3 { border-left-color: #ffbb33 !important; } .c-3 { color: #ffbb33; }
        .sc-4 { border-left-color: #ff8800 !important; } .c-4 { color: #ff8800; }
        .sc-5 { border-left-color: #ff4444 !important; } .c-5 { color: #ff4444; }
        .sc-6 { border-left-color: #CC0000 !important; } .c-6 { color: #CC0000; }
        .sc-7 { border-left-color: #880000 !important; } .c-7 { color: #880000; }

        ::-webkit-scrollbar { width: 8px; }
        ::-webkit-scrollbar-track { background: #111; }
        ::-webkit-scrollbar-thumb { background: #4dabf7; border-radius: 4px; }

        #no-data { text-align: center; color: #888; padding: 40px 20px; font-size: 0.95rem; line-height: 1.6; background: #111; border-radius: 8px; border: 1px dashed #333; }

        /* 타 기관 지진 알림 팝업(Toast) 스타일 */
        #toast-container {
            position: absolute; top: 70px; left: calc(var(--sidebar-width) + 20px); z-index: 3000;
            display: flex; flex-direction: column; gap: 10px; pointer-events: none;
        }
        .toast {
            background: rgba(20, 20, 25, 0.95); border-left: 4px solid var(--accent);
            color: #fff; padding: 12px 16px; border-radius: 6px; box-shadow: 0 4px 15px rgba(0,0,0,0.6);
            animation: slideIn 0.3s ease-out, fadeOut 0.5s ease-in 4.5s forwards;
            font-size: 0.85rem; width: 280px; backdrop-filter: blur(5px);
        }
        @media (max-width: 820px) {
            #layout { flex-direction: column; }
            #sidebar { width: 100%; min-width: 0; max-width: none; height: 48vh; flex-shrink: 0; border-right: 0; border-bottom: 1px solid var(--border); }
            #sidebar-resizer { display: none; }
            #map { width: 100%; height: 52vh; min-height: 0; flex: 1 1 auto; }
            #toast-container { left: 15px; top: 70px; }
            #earthquake-detail-panel { left: 12px; right: 12px; bottom: 12px; width: auto; }
            #station-replay-panel { left: 12px; right: 12px; top: 12px; width: auto; }
            .settings-grid { grid-template-columns: 1fr; }
            .settings-location { grid-column: auto; align-items: flex-start; flex-direction: column; }
        }
        @keyframes slideIn { from { transform: translateX(120%); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
        @keyframes fadeOut { from { opacity: 1; } to { opacity: 0; display: none; } }