/* detail.css — 강우 상세. 재난 모니터링 시스템(main.css/app.css)의 강수 카드·모달·LED 재사용,
   여기는 레이아웃(풀뷰포트) + 예측(rf-fcst) + 예보 패널(지도·결합·일별)만. */

/* 풀 뷰포트: 헤더 + 카드 가로스트립 + 예보영역 */
.container { height: 100vh; overflow: hidden; display: flex; flex-direction: column; }
.rd-sub { font-size: 13px; font-weight: 500; color: #9fb3c8; margin-left: 8px; }
.rd-base { color: #7f8c8d; font-size: 13px; white-space: nowrap; }

/* ── 관측 카드 가로 스트립 (info-grid를 가로 1줄로 override) — 카드는 realtime_monitor 그대로,
      폭을 원본만큼(280px) 확보해 글자 안 잘리게, 넘치면 가로 스크롤 ── */
.rd-grid {
    display: flex; gap: 8px; padding: 10px 12px 4px; margin: 0;
    overflow: hidden; flex: 0 0 auto;
    grid-template-columns: none; grid-template-rows: none; min-height: 0; height: auto;
}
/* 화면 폭에 맞춰 10개 균등 분배(스크롤 없음), 높이 키워 행 간격 확보 */
.rd-grid .small-widget { flex: 1 1 0; min-width: 0; width: auto; height: 318px; min-height: 318px; }
.rd-grid .rf-card { padding: 14px 12px 46px; }

/* ── 예보 영역: 좌 패널 + 우 지도(히어로) ── */
.rd-wrap {
    flex: 1; min-height: 0;
    display: grid; grid-template-columns: 330px 1fr clamp(560px, 30vw, 780px); grid-template-rows: minmax(0, 1fr);
    gap: 12px; padding: 12px;
}
.rd-left { display: flex; flex-direction: column; gap: 10px; min-height: 0; overflow: hidden; }

/* 예보 패널 카드 (재난모니터 위젯 톤: 흰 카드 + 헤더) */
.widget.rd-card {
    background: #fff; border: 1px solid #e5e8ec; border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05); overflow: hidden;
    display: flex; flex-direction: column; min-height: 0;
    position: static; grid-column: auto; grid-row: auto;
}
.widget.rd-card .widget-header {
    flex: 0 0 auto; background: #fff; padding: 10px 14px; box-shadow: none;
    border-bottom: 1px solid #f0f2f5; display: flex; align-items: center; gap: 4px; flex-wrap: wrap;
}
.widget.rd-card .widget-title { font-size: 15px; font-weight: 700; color: #2c3e50; }
.rd-hint { font-size: 12px; font-weight: 500; color: #95a5a6; margin-left: 4px; }
.rd-tag { font-size: 11px; font-weight: 700; color: #fff; background: #2980b9; padding: 2px 8px; border-radius: 6px; margin-left: 4px; }
.rd-foot-inline { margin-left: auto; font-size: 11px; color: #b0b8c0; font-weight: 400; }

.rd-combined { flex: 1 1 auto; min-height: 110px; }
.rd-combined #rd-combined { overflow-y: auto; flex: 1; padding: 6px 12px; }
.rd-daily-card, .rd-official { flex: 0 0 auto; }
.rd-official .rd-img-box { position: relative; background: #f4f6f9; text-align: center; margin: 8px 12px 12px; border-radius: 8px; overflow: hidden; }
.rd-official .rd-img-box img { max-width: 100%; height: auto; max-height: 14vh; display: block; margin: 0 auto; }
.rd-official .rd-img-box.rd-img-fail img { display: none; }
.rd-official .rd-img-box.rd-img-fail::before { content: '공식 강수예상 이미지(운영에서 표시)'; display: block; padding: 30px 10px; color: #95a5a6; font-size: 13px; }

/* 지도 (히어로) — 예보 강수(좌) + 강우 히트맵(우) 반반 */
.rd-mapsplit { display: flex; gap: 12px; min-width: 0; min-height: 0; }
.rd-mapsplit > .widget { flex: 1 1 0; min-width: 0; }
.rd-mapcard { min-height: 0; position: relative; }
.rd-heatcard { min-height: 0; }
.rd-heatcard .rd-heat-frame { flex: 1; width: 100%; min-height: 0; border: none; background: #f4f6f9; }

/* 구·군별 강우량 문서 카드 (레이아웃 3열 오른쪽, 원본 양식: 2단 + 시간범위) */
.widget.rd-card.rd-report { min-height: 0; }
.rd-report-head { display: flex; align-items: center; justify-content: space-between; gap: 8px;
    padding: 8px 12px; background: #2c3e50; color: #fff; flex: 0 0 auto; }
.rd-report-title { font-size: 15px; font-weight: 700; }
.rd-report-sub { font-size: 11px; color: #cdd6e0; margin-top: 1px; }
.rd-report-actions { display: flex; gap: 5px; flex: 0 0 auto; }
.rd-dl { padding: 5px 11px; border: none; border-radius: 6px; background: #3498db; color: #fff;
    font-size: 12px; font-weight: 700; cursor: pointer; font-family: inherit; }
.rd-dl:hover { background: #2980b9; }
/* 모드/날짜 선택 툴바 */
.rd-report-tools { flex: 0 0 auto; display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    padding: 6px 10px; background: #f4f6f9; border-bottom: 1px solid #e5e8ec; }
.rp-modes { display: inline-flex; border: 1px solid #cbd5e0; border-radius: 7px; overflow: hidden; }
.rp-mode { padding: 4px 14px; border: none; background: #fff; color: #486; font-size: 12.5px; font-weight: 700;
    cursor: pointer; font-family: inherit; color: #52606d; }
.rp-mode + .rp-mode { border-left: 1px solid #cbd5e0; }
.rp-mode.on { background: #2980b9; color: #fff; }
.rp-dates { display: inline-flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.rp-dates-lbl { font-size: 11.5px; color: #7f8c8d; font-weight: 600; margin-right: 2px; }
.rp-date { padding: 3px 8px; border: 1px solid #d6dde4; border-radius: 6px; background: #fff; color: #52606d;
    font-size: 12px; font-weight: 600; cursor: pointer; font-family: inherit; }
.rp-date .rp-date-wd { font-size: 10px; color: #9aa7b4; margin-left: 2px; }
.rp-date.on { background: #eaf4fb; border-color: #2980b9; color: #1c5f8f; }
.rp-date.on .rp-date-wd { color: #5a9bc4; }
.rd-report-body { overflow: auto; flex: 1; background: #fff; padding: 0; }
.rp-table { border-collapse: collapse; width: 100%; font-size: 12px; table-layout: fixed; }
.rp-table .c-gu { width: 6%; } .rp-table .c-nm { width: 19%; } .rp-table .c-v { width: 6.25%; }
.rp-table th { position: sticky; top: 0; background: #eef1f5; border: 1px solid #cfd8e3;
    padding: 6px 3px; font-weight: 700; color: #2c3e50; z-index: 1; text-align: center; line-height: 1.15; }
.rp-table .rp-rng { font-size: 9.5px; color: #7f8c8d; font-weight: 400; }
.rp-table td { border: 1px solid #eef1f5; padding: 5px 4px; color: #34495e; text-align: center; }
.rp-table td.hot { color: #c0392b; font-weight: 700; }
.rp-table td.z { color: #c2cad2; }
/* 강수량별 하이라이트 */
.rp-table td.lv1 { background: #fff8e1; }
.rp-table td.lv2 { background: #ffe4a8; color: #9c5000; }
.rp-table td.lv3 { background: #ffb74d; color: #6b3200; }
.rp-table td.lv4 { background: #e53935; color: #fff; }
.rp-gu { font-weight: 600; color: #2c3e50; white-space: nowrap; }
.rp-gu.rp-notable { background: #fff3cd; }
.rp-nm { text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rp-nm.rp-notable { font-weight: 700; color: #b02a1e; background: #fff3cd; }
.rp-nm.rp-watch { font-weight: 600; }
.rp-split { border-left: 2px solid #9aa7b4 !important; }
.rp-none { padding: 20px; text-align: center; color: #95a5a6; }
/* 센서 미수신(결측) — 0㎜와 구분 */
.rp-table td.rp-na { color: #aeb8c2; background: #f6f8fa; font-weight: 400; }
.rp-nm.rp-na { color: #9aa7b4; font-style: italic; font-weight: 400; background: #f6f8fa; }
.rp-note { padding: 8px 12px 10px; font-size: 11.5px; color: #8794a0; }
.rp-note b { color: #7a8894; }
#rd-map { flex: 1; min-height: 0; margin: 0 12px 12px; border-radius: 8px; overflow: hidden; z-index: 0; }
.rd-hours { display: flex; gap: 6px; flex-wrap: wrap; padding: 8px 12px 4px; }
.rd-hour-btn { padding: 5px 11px; border: 1px solid #d6dde4; background: #fff; color: #34495e; border-radius: 16px; font-size: 13px; font-weight: 600; cursor: pointer; font-family: inherit; }
.rd-hour-btn.active { background: #2980b9; border-color: #2980b9; color: #fff; }
.rd-hour-btn .hb-max { font-size: 11px; color: #e67e22; margin-left: 5px; font-weight: 700; }
.rd-hour-btn.active .hb-max { color: #ffe0b2; }
.rd-cycle-btn { margin-left: auto; }
.rd-cycle-btn.active { background: #16a34a; border-color: #16a34a; color: #fff; }
.rd-legend { display: flex; flex-wrap: wrap; gap: 3px 10px; padding: 0 12px 10px; font-size: 11px; color: #7f8c8d; }
.rd-legend .lg { display: inline-flex; align-items: center; gap: 4px; }
.rd-legend .sw { width: 14px; height: 12px; border-radius: 3px; display: inline-block; }

/* 결합 예보 타임라인 */
#rd-combined { display: flex; flex-direction: column; gap: 1px; }
.cb-row { display: flex; align-items: center; gap: 8px; padding: 4px 2px; border-bottom: 1px solid #f4f6f9; font-size: 13px; }
.cb-time { flex: 0 0 44px; font-weight: 700; color: #2980b9; }
.cb-dot { width: 12px; height: 12px; border-radius: 3px; flex: 0 0 auto; border: 1px solid rgba(0,0,0,0.1); }
.cb-pty { flex: 0 0 44px; color: #2c3e50; }
.cb-mm { flex: 0 0 54px; font-weight: 700; color: #e74c3c; text-align: right; }
.cb-pop { color: #2980b9; font-weight: 600; font-size: 12px; }
.cb-lgt { color: #8e24aa; font-weight: 700; font-size: 12px; }
.cb-dim { color: #cfd6dd; font-weight: 400; }

/* 오늘·내일·모레 */
.rd-day { display: flex; align-items: center; gap: 12px; padding: 8px 12px; border-bottom: 1px solid #f4f6f9; }
.rd-day:last-child { border-bottom: none; }
.rd-day-label { flex: 0 0 44px; font-weight: 700; color: #2c3e50; font-size: 14px; }
.rd-day-w { flex: 1; color: #34495e; font-size: 13px; }
.rd-day-prob { color: #2980b9; font-weight: 700; font-size: 15px; }
.rd-day-temp { color: #7f8c8d; font-size: 12.5px; white-space: nowrap; }

/* 지도 구/군 라벨 */
.rd-gu-label { background: transparent; border: none; box-shadow: none; color: #263238;
    font-size: 11px; font-weight: 700; text-shadow: 0 0 3px #fff, 0 0 3px #fff, 0 0 3px #fff; padding: 0; }
.rd-gu-label::before { display: none; }

@media (max-width: 900px) {
    .container { height: auto; overflow: visible; }

    /* 관측 카드: 모바일은 한 줄에 다 넣지 않고 '가로 스크롤 스트립'(스와이프) — 각 카드 읽을 폭 확보 */
    .rd-grid {
        overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch;
        padding: 8px 12px 12px; scroll-snap-type: x proximity;
    }
    .rd-grid .small-widget {
        flex: 0 0 44vw; width: 44vw; min-width: 158px; max-width: 210px;
        height: 300px; min-height: 300px; scroll-snap-align: start;
    }

    /* 예보영역: 3열 → 세로 스택, 지도/히트맵도 세로로 */
    .rd-wrap { grid-template-columns: 1fr; grid-template-rows: none; height: auto; padding: 10px 12px; }
    .rd-left { overflow: visible; }
    .rd-mapsplit { flex-direction: column; }
    /* 세로 스택에선 grow(basis 0) 대신 자연/최소높이 — 안 그러면 지도 카드가 붕괴함 */
    .rd-mapsplit > .widget { flex: 0 0 auto; }
    .rd-mapcard { min-height: 54vh; }
    #rd-map { min-height: 48vh; }
    .rd-heatcard { min-height: 54vh; }
    .rd-heatcard .rd-heat-frame { min-height: 48vh; }
    .rd-combined { min-height: 180px; }
    .rd-combined #rd-combined { max-height: 40vh; }

    /* 구·군별 강우량: 2단 넓은 표 → 가로 스크롤(찌그러짐 방지) */
    .rd-report { min-height: 60vh; }
    .rd-report-body { overflow-x: auto; }
    .rp-table { min-width: 660px; }
}