/* app.css — waterlevel_detail 단일페이지 (Phase 2). 레이아웃/위젯/지도/그래프/패널. */

/* ── 레이아웃 (기존 index.html 인라인 이식) ── */
.content-area {
    flex: 1;
    padding: 20px;
    display: flex;
    gap: 10px;
    height: calc(100vh - 90px);
}
.left-section { flex: 1; display: flex; flex-direction: column; gap: 10px; }
.right-section { flex: 1; display: flex; flex-direction: column; gap: 10px; }
.left-section .widget { flex: 1; min-height: 0; }
.map-section { flex: 7; }
.graph-section { flex: 3; }
.widget {
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.08);
    overflow: hidden;
    position: relative;
}

/* ── 지도 ── */
#map { width: 100%; height: 100%; }

/* 관측소 마커 (기존 map_stations.html 스타일 이식) */
.station-marker {
    background: white;
    border: 2px solid #2c3e50;
    border-radius: 50%;
    width: 30px; height: 30px;
    display: flex; align-items: center; justify-content: center;
    font-size: 12px; font-weight: 700; color: #2c3e50;
    box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}
.station-marker.warn1 { border-color: #4caf50; background: #e8f5e9; }
.station-marker.warn2 { border-color: #ffeb3b; background: #fffde7; }
.station-marker.warn3 { border-color: #ff9800; background: #fff3e0; }
.station-marker.warn4 { border-color: #f44336; background: #ffebee; }
.station-marker.maintenance { border-color: #9e9e9e; background: #f5f5f5; color: #757575; }

/* 마커 팝업 */
.station-popup { font-size: 13px; }
.station-popup .popup-title { font-size: 15px; font-weight: 700; color: #2c3e50; margin-bottom: 8px; padding-bottom: 5px; border-bottom: 2px solid #e0e0e0; }
.station-popup .popup-row { display: flex; justify-content: space-between; gap: 12px; margin: 5px 0; }
.station-popup .popup-label { color: #7f8c8d; }
.station-popup .popup-value { color: #2c3e50; font-weight: 600; text-align: right; }
.station-popup .popup-value.up { color: #f44336; }
.station-popup .popup-value.down { color: #2196f3; }
.station-popup .popup-value .maintenance { color: #9e9e9e; }
.station-popup .popup-button {
    width: 100%; margin-top: 10px; padding: 8px;
    background: linear-gradient(135deg, #3498db, #2980b9);
    color: #fff; border: none; border-radius: 8px;
    font-size: 13px; font-weight: 600; cursor: pointer;
}
.station-popup .popup-button:hover { background: linear-gradient(135deg, #2980b9, #21618c); }

/* 지도 범례 */
.map-legend {
    position: absolute; top: 10px; right: 10px; z-index: 500;
    background: rgba(255,255,255,0.95); border-radius: 8px; padding: 8px 10px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15); font-size: 12px;
}
.map-legend .legend-title { font-weight: 700; color: #2c3e50; margin-bottom: 5px; }
.map-legend .legend-item { display: flex; align-items: center; gap: 6px; margin: 2px 0; }
.map-legend .legend-dot { width: 14px; height: 14px; border-radius: 50%; border: 2px solid; }
.legend-dot.normal { border-color: #2c3e50; background: #fff; }
.legend-dot.warn1 { border-color: #4caf50; background: #e8f5e9; }
.legend-dot.warn2 { border-color: #ffeb3b; background: #fffde7; }
.legend-dot.warn3 { border-color: #ff9800; background: #fff3e0; }
.legend-dot.warn4 { border-color: #f44336; background: #ffebee; }

/* ── 그래프 ── */
.graph-box { width: 100%; height: 100%; padding: 10px; display: flex; flex-direction: column; }
.graph-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 5px; flex-shrink: 0; }
.graph-header .station-title { font-size: 14px; font-weight: 600; color: #2c3e50; }
.time-controls { display: flex; gap: 5px; }
.time-btn { padding: 3px 8px; font-size: 11px; border: 1px solid #ddd; background: #fff; color: #666; cursor: pointer; border-radius: 3px; transition: all 0.2s; }
.time-btn:hover { background: #f5f5f5; }
.time-btn.active { background: #3498db; color: #fff; border-color: #3498db; }
.graph-container { flex: 1; position: relative; min-height: 0; }
.graph-container canvas { width: 100% !important; height: 100% !important; }
.graph-msg {
    position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
    color: #95a5a6; font-size: 15px; text-align: center; pointer-events: none;
}

/* 구군 이름 라벨 */
.gu-label {
    color: #34495e; font-size: 12px; font-weight: 700;
    text-shadow: 0 0 3px #fff, 0 0 3px #fff, 0 0 3px #fff;
    white-space: nowrap; text-align: center; pointer-events: none; background: none; border: none;
}

/* ── 좌측 수위 패널 (.wl 스코프 — 원본 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: 6px 8px; text-align: center; vertical-align: middle; line-height: 1.4; }
.wl .waterlevel-table thead { background: linear-gradient(to bottom, #f8f9fa, #e9ecef); }
.wl .waterlevel-table th { font-weight: 600; color: #2c3e50; font-size: 14px; background: inherit; }
.wl .waterlevel-table th:first-child, .wl .waterlevel-table td:first-child { width: 110px; }
.wl .waterlevel-table th:first-child { background: #2c3e50; color: #fff; font-weight: 700; font-size: 15px; }
.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: 13px; }
.wl .warn-level-1 { background: #4caf50; color: #fff; font-weight: 600; font-size: 13px; }
.wl .warn-level-2 { background: #ffeb3b; color: #333; font-weight: 600; font-size: 13px; }
.wl .warn-level-3 { background: #ff9800; color: #fff; font-weight: 600; font-size: 13px; }
.wl .warn-level-4 { background: #f44336; color: #fff; font-weight: 600; font-size: 13px; }
.wl .waterlevel-table td { font-size: 13px; }
.wl .change-up { color: #f44336; font-weight: 600; }
.wl .change-down { color: #2196f3; font-weight: 600; }
.wl .current-level { font-weight: 700; font-size: 15px; color: #1976d2; }
.wl .maintenance { color: #9e9e9e; font-style: italic; }
.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; }

/* ── CCTV (칠성교/침산보 카메라, 원본 photo_chilchim 이식) ── */
.cctv-container { height: 100%; display: flex; gap: 8px; padding: 8px; }
.photo-item { flex: 1; height: 100%; position: relative; background: #f8f9fa; border-radius: 8px; overflow: hidden; cursor: pointer; transition: all 0.3s; }
.photo-item:hover { transform: scale(1.02); box-shadow: 0 4px 12px rgba(0,0,0,0.15); }
.photo-label { position: absolute; top: 0; left: 0; right: 0; background: rgba(44,62,80,0.9); color: #fff; padding: 3px 8px; font-size: 11px; font-weight: 600; z-index: 2; }
.photo-body { width: 100%; height: 100%; }
.photo-img { width: 100%; height: 100%; object-fit: cover; }
.photo-time { position: absolute; bottom: 0; left: 0; right: 0; background: rgba(0,0,0,0.7); color: #fff; padding: 2px 8px; font-size: 10px; text-align: center; }
.photo-body.error { display: flex; align-items: center; justify-content: center; color: #95a5a6; font-size: 13px; }

/* ── 상세 모달 ── */
.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: 1100px; height: 80vh; max-height: 780px; 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; align-items: center; gap: 12px; padding: 12px 20px; background: linear-gradient(135deg, #2980b9, #3498db); color: #fff; flex-shrink: 0; }
.modal-header .modal-title { font-weight: 700; font-size: 16px; }
.modal-tools { display: flex; gap: 5px; margin-left: auto; }
.modal-tools .time-btn { background: rgba(255,255,255,0.18); color: #fff; border: 1px solid rgba(255,255,255,0.35); }
.modal-tools .time-btn.active { background: #fff; color: #2980b9; border-color: #fff; }
.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; flex-shrink: 0; }
.modal-close:hover { background: rgba(255,255,255,0.35); }
.modal-body { flex: 1; min-height: 0; position: relative; }
.modal-body iframe { width: 100%; height: 100%; border: none; display: block; }
.modal-body #modal-content { display: none; width: 100%; height: 100%; padding: 16px; }
.modal-body.content-mode iframe { display: none; }
.modal-body.content-mode #modal-content { display: block; }
#modal-content canvas { width: 100% !important; height: 100% !important; }

/* 하천명 헤더 클릭 (통합 그래프) */
.wl .waterlevel-table th.river-name { cursor: pointer; }
.wl .waterlevel-table th.river-name:hover { background: #1c2a38; }
.wl .waterlevel-table th.river-name::after { content: ' \1F4C8'; font-size: 11px; opacity: 0.85; }

/* ── 전광판(LED 보드) 알림 ── */
.container header { gap: 28px; }
.header-alerts { display: flex; align-items: center; gap: 14px; flex: 1; justify-content: center; flex-wrap: wrap; min-width: 0; }
.led-board { background: #0e1320; border-radius: 10px; padding: 0 18px; height: 44px; 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: 44px; line-height: 44px; font-family: 'Consolas','D2Coding','Menlo',monospace; font-size: 21px; 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); }

/* 알림 이력 (모달 HTML) */
#modal-content { overflow: auto; }
.alert-hist-item { display: flex; align-items: center; gap: 10px; padding: 9px 6px; 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; }

/* ── 모바일 정렬 (≤768px) — 표 겹침·지도 0높이·카메라 눌림 해결 ── */
@media (max-width: 768px) {
    /* 지도: 세로 스택에서 높이가 0이 되어 안 보이던 문제 */
    .map-widget, .widget.map-widget { height: auto !important; }
    #map { height: 320px !important; min-height: 320px; }

    /* 수위 표: 지점이 많으면(낙동강 9개) 412px 안에 욱여넣어져 값이 겹친다.
       → 가로 스크롤로 바꾸고 셀은 줄바꿈 금지(제목이 한 글자씩 쪼개지던 것도 해결) */
    .wl { overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; }
    .wl .waterlevel-table { table-layout: auto; min-width: 640px; }
    .wl .waterlevel-table th, .wl .waterlevel-table td {
        white-space: nowrap; padding: 6px 8px; font-size: 12px;
    }
    .wl .waterlevel-table th:first-child, .wl .waterlevel-table td:first-child {
        width: 74px; min-width: 74px; position: sticky; left: 0; z-index: 2;
    }
    /* sticky 첫 열: 원래 배경(관심/주의/경계/심각 색, .row-label)을 덮어쓰지 않는다.
       배경이 없는 셀만 흰색을 깔아 스크롤 내용이 비쳐 보이지 않게 한다. */
    .wl .waterlevel-table td:first-child:not([class]) { background: #fff; }

    /* 카메라 썸네일: 4개가 한 줄에 눌려 글자가 겹치던 것 → 2열 */
    .cctv-container { height: auto !important; flex-wrap: wrap; }
    .photo-item { flex: 0 0 calc(50% - 4px); height: 120px; }

    /* 그래프 영역도 최소 높이 확보 */
    #chart-wrap, .chart-widget { min-height: 260px; }
}