/* app.css — Phase 2 단일페이지 클라이언트 전용 스타일
   레이아웃/그리드/카드프레임은 main.css 재사용. 여기는 위젯 내부 + 모션. */

/* ── 강수 카드 내부 (기존 modules/rainfall_*.html 인라인 CSS 이식) ── */
.rf-card {
    height: 100%;
    display: flex;
    flex-direction: column;
    padding: 12px;
    padding-bottom: 40px;
    position: relative;
    background: #fff;
    overflow: hidden;
}
.rf-card .widget-title {
    font-size: 18px;
    font-weight: 700;
    color: #2c3e50;
    margin-bottom: 8px;
    text-align: center;
}
.rainfall-data-container {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;   /* 항목 수와 무관하게 상단부터 */
    gap: 3px;
    font-size: 18px;
    overflow: hidden;
}
.rank {
    font-weight: 600;
    color: #3498db;
    min-width: 20px;
    font-size: 16px;
}
.station-info {
    flex: 1;
    display: flex;
    align-items: baseline;
    gap: 3px;
    overflow: hidden;
    min-width: 0;
}
/* 지점명 우선(항상 전체, 매우 길면 말줄임), 기관은 자리 있을 때만 표시(좁으면 잘림) */
.rf-card .station-name { color: #2c3e50; font-size: 17px; white-space: nowrap; flex: 0 0 auto; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.station-district { color: #95a5a6; font-size: 10px; white-space: nowrap; flex: 0 1 auto; min-width: 0; overflow: hidden; }
.rainfall-amount {
    font-weight: 700;
    color: #e74c3c;
    margin-left: auto;
    padding-left: 4px;
    font-size: 18px;
}
.rf-card .no-rain {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #95a5a6;
    font-size: 21px;
}
.view-all-btn {
    position: absolute;
    bottom: 8px;
    right: 8px;
    padding: 5px 12px;
    background: linear-gradient(135deg, #3498db 0%, #2980b9 100%);
    color: white;
    border: none;
    border-radius: 15px;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(52, 152, 219, 0.3);
}
.view-all-btn:hover {
    background: linear-gradient(135deg, #2980b9 0%, #21618c 100%);
    transform: scale(1.05);
}

/* ── 헤더: 강우 이력 조회 진입 링크 ── */
.hx-entry {
    font-size: 13px;
    font-weight: 600;
    color: #2980b9;
    text-decoration: none;
    padding: 5px 12px;
    border: 1px solid #d6dde4;
    border-radius: 16px;
    background: #fff;
    white-space: nowrap;
}
.hx-entry:hover { background: #eaf4fb; border-color: #b8d4ea; }

/* ── 카드 하단: 최근 24시간 최대 강우 (관측소·시각) ── */
.rf-peak {
    margin-top: 6px;
    padding-top: 5px;
    border-top: 1px dashed #e5e8ec;
    line-height: 1.25;
}
.rf-peak-label {
    color: #95a5a6;
    font-weight: 600;
    font-size: 11.5px;
    white-space: nowrap;
}
.rf-peak-label::before {
    content: "▲";
    color: #e67e22;
    font-size: 10px;
    margin-right: 3px;
}
.rf-peak-body {
    display: flex;
    align-items: baseline;
    gap: 6px;
    margin-top: 1px;
}
.rf-peak-val {
    color: #d35400;
    font-weight: 700;
    font-size: 16px;
    white-space: nowrap;
    flex: 0 0 auto;
}
.rf-peak-loc {
    color: #7f8c8d;
    font-size: 11.5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1 1 auto;
    min-width: 0;
}

/* ── 세로 드럼 롤 (split-flap / 주식창 reel) ── */
.rainfall-station {
    position: relative;
    /* 항목 수와 무관하게 항상 5칸 기준 고정 높이 (4 gap * 3px = 12px) */
    flex: 0 0 calc((100% - 12px) / 5);
    overflow: hidden;   /* 굴러 나가는 부분을 잘라내는 창 */
}
.reel {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
}
.flip-face {
    flex: 0 0 100%;     /* 정지: 행 높이 가득 / 롤 중: JS가 px 고정 */
    height: 100%;
    display: flex;
    align-items: center;
    gap: 3px;
    will-change: transform;
}
/* 롤 중에만 드럼 곡면 음영(위/아래 어두움) + 타일 */
.rainfall-station.rolling { background: #eef3fa; border-radius: 6px; }
.rainfall-station.rolling::before,
.rainfall-station.rolling::after {
    content: '';
    position: absolute;
    left: 0; right: 0;
    height: 38%;
    pointer-events: none;
    z-index: 2;
}
.rainfall-station.rolling::before { top: 0;    background: linear-gradient(to bottom, rgba(0,0,0,0.18), transparent); }
.rainfall-station.rolling::after  { bottom: 0; background: linear-gradient(to top,    rgba(0,0,0,0.18), transparent); }

@media (prefers-reduced-motion: reduce) {
    .reel { transition: none !important; }
}

/* ── 누적 강수 표 (.acc로 스코프 — 강수카드 .no-rain/.station-name과 분리) ── */
.accumulated-widget.main { display: block; }
.acc { height: 100%; overflow-y: auto; padding: 10px; background: #fff; display: flex; flex-direction: column; gap: 10px; }
.acc .table-container { border-radius: 8px; overflow: hidden; box-shadow: 0 2px 8px rgba(0,0,0,0.08); min-height: 0; }
/* 영역을 가득 채우도록 표가 행 수에 비례해 늘어남 (행 높이는 균일) */
.acc .table-daily { flex: 2 1 0; }
.acc .table-2days { flex: 4 1 0; }
.acc .table-3days { flex: 5 1 0; }
.acc .table-container > table { height: 100%; }
.acc table { border-collapse: collapse; width: 100%; background: #fff; table-layout: fixed; }
.acc th, .acc td { border: 1px solid #e0e0e0; padding: 4px 2px; text-align: center; vertical-align: middle; }
.acc th { background: linear-gradient(to bottom, #f8f9fa, #e9ecef); font-weight: 600; color: #2c3e50; font-size: 12px; white-space: normal; word-break: keep-all; }
.acc td { color: #495057; font-size: 12px; }
.acc .period-label { background: #2c3e50; color: #fff; font-weight: 700; font-size: 14px; padding: 8px; }
.acc .date-cell { background: #f8f9fa; font-weight: 500; color: #495057; font-size: 13px; }
.acc .total-row { background: #e3f2fd; font-weight: 700; }
.acc .total-row td { color: #1976d2; font-weight: 600; font-size: 14px; }
.acc .has-rain { color: #d32f2f; font-weight: 600; font-size: 14px; }
.acc .no-rain { color: #b0bec5; font-size: 13px; }
.acc .district-name { font-size: 13px; font-weight: 600; color: #2c3e50; }
.acc .station-name { font-size: 11px; color: #546e7a; font-weight: 400; }
.acc .table-2days .period-label { background: #1976d2; }
.acc .table-3days .period-label { background: #7b1fa2; }
.acc .table-3days .total-row { background: #f3e5f5; }
.acc .table-3days .total-row td { color: #7b1fa2; }
.acc .button-container { display: flex; justify-content: center; gap: 12px; padding: 12px; background: #f8f9fa; border-radius: 8px; flex: 0 0 auto; }
.acc .view-all-btn { position: static; padding: 8px 18px; color: #fff; border: none; border-radius: 20px; font-size: 13px; font-weight: 600; cursor: pointer; box-shadow: 0 2px 8px rgba(0,0,0,0.15); }
.acc .view-all-btn.daily { background: linear-gradient(135deg, #2c3e50, #34495e); }
.acc .view-all-btn.days2 { background: linear-gradient(135deg, #1976d2, #1565c0); }
.acc .view-all-btn.days3 { background: linear-gradient(135deg, #7b1fa2, #6a1b9a); }
.acc .flash { animation: accFlash 1.2s ease; }
@keyframes accFlash { 0% { background: #fff3cd; } 100% { background: transparent; } }

/* ── 상세 모달 (window.open 팝업 대체) ── */
.modal-overlay {
    display: none;
    position: fixed; inset: 0;
    background: rgba(0, 0, 0, 0.6);
    z-index: 9999;
    justify-content: center; align-items: center;
    padding: 20px;
}
.modal-overlay.open { display: flex; }
.modal-box {
    background: #fff;
    border-radius: 16px;
    width: 90%; max-width: 1000px;
    height: 82vh; max-height: 760px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    display: flex; flex-direction: column;
    overflow: hidden;
    animation: modalPop 0.18s ease;
}
@keyframes modalPop { from { transform: translateY(12px) scale(0.98); opacity: 0; } to { transform: none; opacity: 1; } }
.modal-header {
    display: flex; justify-content: space-between; align-items: center;
    padding: 12px 20px;
    background: linear-gradient(135deg, #2980b9, #3498db);
    color: #fff; flex-shrink: 0;
}
.modal-title { font-weight: 700; font-size: 16px; }
.modal-close {
    background: rgba(255, 255, 255, 0.2); border: none; color: #fff;
    font-size: 20px; width: 32px; height: 32px; border-radius: 50%;
    cursor: pointer; display: flex; align-items: center; justify-content: center;
}
.modal-close:hover { background: rgba(255, 255, 255, 0.35); }
.modal-body { flex: 1; min-height: 0; }
.modal-body iframe { width: 100%; height: 100%; border: none; display: block; }

/* ── 수위 패널 (.wl 스코프 — modules/waterlevel_*.html 이식) ── */
.wl { height: 100%; padding: 6px; background: #fff; overflow: hidden; display: flex; flex-direction: column; }
.wl .waterlevel-table { width: 100%; border-collapse: collapse; background: #fff; flex: 1; table-layout: fixed; }
.wl .waterlevel-table th, .wl .waterlevel-table td { border: 1px solid #e0e0e0; padding: 4px 3px; text-align: center; vertical-align: middle; line-height: 1.3; font-size: 11px; word-break: keep-all; }
.wl .waterlevel-table thead { background: linear-gradient(to bottom, #f8f9fa, #e9ecef); }
.wl .waterlevel-table th { font-weight: 600; color: #2c3e50; font-size: 11px; background: inherit; }
.wl .waterlevel-table th:first-child, .wl .waterlevel-table td:first-child { width: 44px; }
.wl .waterlevel-table th:first-child { background: #2c3e50; color: #fff; font-weight: 700; font-size: 12px; }
.wl .header-warn1 { background: #4caf50 !important; color: #fff !important; }
.wl .header-warn2 { background: #ffeb3b !important; color: #333 !important; }
.wl .header-warn3 { background: #ff9800 !important; color: #fff !important; }
.wl .header-warn4 { background: #f44336 !important; color: #fff !important; }
.wl .row-label { background: #f8f9fa; font-weight: 600; color: #495057; font-size: 11px; }
.wl .warn-level-1 { background: #4caf50; color: #fff; font-weight: 600; font-size: 11px; }
.wl .warn-level-2 { background: #ffeb3b; color: #333; font-weight: 600; font-size: 11px; }
.wl .warn-level-3 { background: #ff9800; color: #fff; font-weight: 600; font-size: 11px; }
.wl .warn-level-4 { background: #f44336; color: #fff; font-weight: 600; font-size: 11px; }
.wl .change-up { color: #f44336; font-weight: 600; }
.wl .change-down { color: #2196f3; font-weight: 600; }
.wl .current-level { font-weight: 700; font-size: 12px; color: #1976d2; }
.wl .no-data { display: flex; align-items: center; justify-content: center; height: 100%; color: #90a4ae; font-size: 13px; padding: 15px; }
.wl .waterlevel-table th.clickable { cursor: pointer; transition: background 0.2s; }
.wl .waterlevel-table th.clickable:hover { background: #d5e8f7 !important; color: #1565c0 !important; }
.wl td.current-level.flash { animation: wlFlash 1.1s ease; }
@keyframes wlFlash { 0% { background: #fff3cd; } 100% { background: transparent; } }
/* 현재값 숫자 롤 (셀 단위 드럼) */
.wl .wl-window { display: inline-block; position: relative; overflow: hidden; height: 1.25em; line-height: 1.25em; vertical-align: middle; }
.wl .wl-reel { display: block; }
.wl .wl-digit { display: block; height: 1.25em; line-height: 1.25em; }
.wl td.current-level.rolling { background: #eef3fa; }

/* ── 임계 알림 배너 ── */
.alert-bar { display: none; }
.alert-bar.active {
    display: flex; align-items: center; gap: 12px;
    padding: 8px 20px; color: #fff; font-size: 14px; font-weight: 600;
    flex-shrink: 0; box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}
.alert-bar .alert-ico { font-size: 18px; flex-shrink: 0; }
.alert-bar .alert-text { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.alert-bar .alert-hist-btn {
    background: rgba(255,255,255,0.25); border: none; color: inherit;
    padding: 4px 12px; border-radius: 12px; font-size: 12px; font-weight: 600;
    cursor: pointer; flex-shrink: 0;
}
.alert-bar .alert-hist-btn:hover { background: rgba(255,255,255,0.4); }
.alert-bar.lvl1 { background: #43a047; }
.alert-bar.lvl2 { background: #f9a825; color: #3e2723; }
.alert-bar.lvl2 .alert-hist-btn { background: rgba(0,0,0,0.15); }
.alert-bar.lvl3 { background: #fb8c00; }
.alert-bar.lvl4 { background: #e53935; animation: alertPulse 1.4s ease-in-out infinite; }
@keyframes alertPulse { 0%,100% { background: #e53935; } 50% { background: #b71c1c; } }

/* ── 모달 HTML 모드 (이력 등) ── */
#modal-html { display: none; height: 100%; overflow: auto; padding: 8px 0; }
.modal-body.html-mode #modal-frame { display: none; }
.modal-body.html-mode #modal-html { display: block; }
.alert-hist-item { display: flex; align-items: center; gap: 10px; padding: 9px 20px; border-bottom: 1px solid #eee; font-size: 13px; color: #2c3e50; }
.alert-hist-time { color: #90a4ae; font-size: 12px; min-width: 140px; flex-shrink: 0; }
.alert-hist-badge { padding: 2px 9px; border-radius: 10px; color: #fff; font-size: 11px; font-weight: 600; flex-shrink: 0; }
.alert-hist-badge.lvl1 { background: #43a047; }
.alert-hist-badge.lvl2 { background: #f9a825; color: #3e2723; }
.alert-hist-badge.lvl3 { background: #fb8c00; }
.alert-hist-badge.lvl4 { background: #e53935; }
.alert-hist-empty { color: #90a4ae; text-align: center; padding: 40px; }

/* 기상특보 상세 (led-kma 클릭) */
.kma-det-list { padding: 12px 16px; display: flex; flex-direction: column; gap: 10px; }
.kma-det-item { border: 1px solid #eef1f5; border-left: 4px solid #90a4ae; border-radius: 8px; padding: 10px 14px; background: #fafbfc; }
.kma-det-item.lvl1 { border-left-color: #43a047; }
.kma-det-item.lvl2 { border-left-color: #f9a825; }
.kma-det-item.lvl3 { border-left-color: #fb8c00; }
.kma-det-item.lvl4 { border-left-color: #e53935; }
.kma-det-warn { font-size: 16px; font-weight: 700; color: #2c3e50; }
.kma-det-item.lvl3 .kma-det-warn, .kma-det-item.lvl4 .kma-det-warn { color: #c0392b; }
.kma-det-region { margin-top: 4px; font-size: 13px; color: #34495e; }
.kma-det-meta { margin-top: 4px; font-size: 12px; color: #7f8c8d; }

/* ── 기상영상 위젯 (.wx 스코프 — modules/weather_image.html 네이티브 이식) ── */
.wx { display: flex; flex-direction: column; background: #fff; }
.wx .widget-header { display: flex; justify-content: space-between; align-items: center; background: rgba(255,255,255,0.95); padding: 10px 20px; box-shadow: 0 2px 10px rgba(0,0,0,0.08); z-index: 10; }
.wx .widget-title { font-size: 18px; font-weight: 700; color: #2c3e50; }
.wx .weather-image-container { flex: 1; display: flex; flex-direction: column; background: #f5f5f5; overflow: hidden; position: relative; min-height: 0; }
.wx .image-display { flex: 1; position: relative; overflow: hidden; background: #fff; display: flex; align-items: center; justify-content: center; }
.wx .weather-img { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); max-width: 90%; max-height: 90%; width: auto; height: auto; object-fit: contain; opacity: 0; display: block; transition: opacity 0.4s ease; }
.wx .weather-img.active { opacity: 1; }
.wx .weather-controls { display: flex; gap: 8px; padding: 12px; background: #fff; border-top: 1px solid #e0e0e0; }
.wx .control-btn { flex: 1; padding: 8px; background: #f8f9fa; border: 1px solid #e0e0e0; border-radius: 10px; color: #2c3e50; font-size: 12px; font-weight: 500; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.wx .control-btn:hover { background: #e9ecef; border-color: #3498db; }
.wx .control-btn.active { background: linear-gradient(135deg, #3498db 0%, #2980b9 100%); border-color: transparent; color: #fff; }
.wx .control-btn .icon { font-size: 20px; display: block; }
.wx .control-btn span { font-size: 11px; white-space: nowrap; }
.wx .cycle-btn { background: #e8f5e9; border-color: #4caf50; color: #2e7d32; }
.wx .cycle-btn.active { background: linear-gradient(135deg, #4caf50 0%, #45a049 100%); color: #fff; }
.wx .progress-indicator { position: absolute; bottom: 0; left: 0; right: 0; height: 3px; background: rgba(0,0,0,0.1); }
.wx .progress-bar { height: 100%; width: 0; background: linear-gradient(90deg, #3498db, #2980b9); }

/* ── 헤더 알림 칩 (기상특보 · 수위경보) ── */
.header-alerts { display: flex; align-items: center; gap: 8px; flex: 1; justify-content: center; flex-wrap: wrap; min-width: 0; }
.alert-chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 14px; font-size: 13px; font-weight: 600; white-space: nowrap; }
.alert-chip.clickable { cursor: pointer; }
.alert-chip.none { background: #eceff1; color: #90a4ae; }
.alert-chip.lvl1 { background: #43a047; color: #fff; }
.alert-chip.lvl2 { background: #f9a825; color: #3e2723; }
.alert-chip.lvl3 { background: #fb8c00; color: #fff; }
.alert-chip.lvl4 { background: #e53935; color: #fff; animation: alertPulse 1.4s ease-in-out infinite; }
.alert-chip.kma-active { background: #fb8c00; color: #fff; }

/* ── 전광판(LED 보드) 알림 ── */
.container header { gap: 32px; }
.header-alerts { gap: 16px; }
.led-board {
    background: #0e1320;
    border-radius: 10px;
    padding: 0 18px;
    height: 46px;
    flex: 1 1 0; min-width: 0;
    overflow: hidden;
    position: relative;
    box-shadow: inset 0 1px 5px rgba(0,0,0,0.65), 0 0 0 1px rgba(255,255,255,0.05);
}
.led-board.clickable { cursor: pointer; }
.led-reel { position: relative; height: 100%; width: 100%; }
.led-msg {
    height: 46px; line-height: 46px;
    font-family: 'Consolas', 'D2Coding', 'Menlo', monospace;
    font-size: 22px; font-weight: 700; letter-spacing: 0.3px;
    white-space: nowrap;
    display: inline-flex; align-items: center; gap: 10px;
}
.led-msg.lvl0 { color: #6b7891; }
.led-msg.lvl1 { color: #5dd86a; text-shadow: 0 0 6px rgba(93,216,106,0.55); }
.led-msg.lvl2 { color: #ffd54a; text-shadow: 0 0 6px rgba(255,213,74,0.55); }
.led-msg.lvl3 { color: #ffa726; text-shadow: 0 0 7px rgba(255,167,38,0.65); }
.led-msg.lvl4 { color: #ff5252; text-shadow: 0 0 9px rgba(255,82,82,0.8); }

/* ── 전체보기 공통(인페이지, 옛 iframe 팝업 대체) — 강수/누적 동일 카드 형태 ── */
#modal-html .pa-summary { padding: 4px 16px 12px; color: #7f8c8d; font-size: 14px; }
#modal-html .pa-summary b { color: #2c3e50; }
.pa-dist-cnt { color: #95a5a6; font-size: 12px; font-weight: 500; }
.pa-empty { padding: 20px 16px; color: #95a5a6; text-align: center; }

/* 하단: 최근 24시간 최대 top5 */
.pa-peak {
    margin: 8px 12px 6px; padding: 14px 16px;
    background: #fff8f1; border: 1px solid #f6e2cf; border-top: 3px solid #e67e22; border-radius: 10px;
}
.pa-peak-title { font-size: 15px; font-weight: 700; color: #b9540d; margin-bottom: 10px; }
.pa-peak-iv { color: #c98a52; font-weight: 500; font-size: 13px; }
.pa-peak-row {
    display: flex; align-items: baseline; gap: 10px;
    padding: 8px 2px; border-bottom: 1px solid #f4e6d6;
}
.pa-peak-row:last-child { border-bottom: none; }
.pa-peak-rank { flex: 0 0 auto; width: 22px; font-weight: 700; color: #e67e22; font-size: 14px; }
.pa-peak-name { color: #2c3e50; font-size: 14px; font-weight: 500; }
.pa-peak-dist { color: #95a5a6; font-size: 11px; }
.pa-peak-when { color: #7f8c8d; font-size: 12px; margin-left: auto; white-space: nowrap; }
.pa-peak-val { flex: 0 0 auto; color: #e74c3c; font-weight: 700; font-size: 16px; min-width: 66px; text-align: right; }

/* 전체보기 카드 그리드 (강수/누적 동일 — 구군 섹션 + 관측소 카드) */
.pa-dist { padding: 12px 16px; border-top: 1px solid #f0f2f5; }
.pa-dist-title { font-size: 15px; font-weight: 600; color: #2c3e50; margin-bottom: 10px; }
.pa-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.pa-cell { background: #f8f9fa; border: 1px solid #eef1f5; border-radius: 8px; padding: 8px 10px; }
.pa-cell-main { display: flex; justify-content: space-between; align-items: baseline; gap: 6px; }
.pa-name { color: #2c3e50; font-size: 13px; }
.pa-val { color: #e74c3c; font-weight: 700; font-size: 15px; white-space: nowrap; }
.pa-cell-sub { display: flex; flex-wrap: wrap; gap: 2px 8px; margin-top: 5px; font-size: 11px; color: #95a5a6; }
.pa-cell-sub b { color: #7f8c8d; font-weight: 600; }

/* ── 모바일(≤768px): 강수 카드 데이터 붕괴 방지 (행 고정높이·컨테이너 자연높이) ── */
@media (max-width: 768px) {
    /* 헤더 특보/수위 전광판: 모바일에선 세로로 쌓아 잘림/가로 늘어짐 방지 */
    .container header { flex-wrap: wrap; gap: 8px 12px; }
    .header-alerts { order: 3; flex: 1 1 100%; width: 100%; flex-direction: column; gap: 6px; justify-content: flex-start; }
    .led-board { width: 100%; flex: 1 1 auto; height: 40px; }
    .led-msg { font-size: 15px; height: 40px; line-height: 40px; gap: 6px; }

    .rf-card { height: auto; padding-bottom: 42px; }
    .rainfall-data-container { flex: none; overflow: visible; gap: 2px; min-height: 26px; }
    .rainfall-station { flex: 0 0 26px; height: 26px; }
    .rf-card .no-rain { flex: none; min-height: 40px; padding: 8px 0; font-size: 18px; }

    /* 기상영상: 이미지가 폭을 꽉 채우도록 크게 */
    .weather-image-widget { height: auto !important; min-height: 0; }
    .wx .image-display { min-height: 320px; }
    .wx .weather-img { max-width: 100%; max-height: 100%; }

    /* 누적표(당일/2일/3일): 세로 잘림 방지(자연높이) + 가로 스크롤로 전 컬럼 접근 */
    .accumulated-widget { height: auto !important; min-height: 0; }
    .acc { display: block; height: auto; overflow: visible; }
    .acc .table-container { overflow-x: auto; margin-bottom: 10px; }
    .acc .table-container > table { height: auto; }
    .acc table { table-layout: auto; width: auto; min-width: 100%; }
    .acc th, .acc td { padding: 5px 8px; white-space: nowrap; }
    .acc .button-container { margin-top: 4px; }

    /* 수위표(4하천): 누적표와 동일 — 세로 잘림 방지 + 가로 스크롤 */
    #waterlevel-nakdong, #waterlevel-geumho, #waterlevel-sincheon, #waterlevel-namcheon-wicheon {
        height: auto !important; min-height: 0 !important;
    }
    .wl { height: auto; display: block; overflow: visible; overflow-x: auto; }
    .wl .waterlevel-table { flex: none; table-layout: auto; width: auto; min-width: 100%; }
    .wl .waterlevel-table th, .wl .waterlevel-table td { white-space: nowrap; padding: 5px 7px; }
}