/* 서울남산체(서울시 공식 서체, 눈누 웹폰트). M 한 굵기뿐 → 굵은 글씨는 브라우저가 두껍게 만듦 */
@font-face { font-family: "SeoulNamsan"; src: url("https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_two@1.0/SeoulNamsanM.woff") format("woff"); font-weight: 400; font-display: swap; }
:root {
  --ground: #F2EEE7;
  --panel: #FFFFFF;
  --ink: #262626;
  --ink-2: #5E5A54;      /* 보조 글: 흰 바탕 대비 6.6:1 */
  --line: #E4DED4;
  --line-2: #CFC7BA;
  --crimson: #8D0022;
  --crimson-pale: #F4E6E8;
  --w1: #90CAF9; --w2: #42A5F5; --w3: #0D47A1;
  --font: "SeoulNamsan", "Malgun Gothic", sans-serif;
  color-scheme: light;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  background: var(--ground); color: var(--ink);
  font: 500 16px/1.5 var(--font); font-feature-settings: "tnum";
  display: grid; grid-template-rows: auto 1fr; overflow: hidden;
  -webkit-font-smoothing: antialiased;
}
::selection { background: var(--crimson); color: #fff; }
:focus-visible { outline: 2px solid var(--crimson); outline-offset: 2px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
b { font-weight: 700; }

/* ---------- 위 지표 줄 ---------- */
.top { display: flex; align-items: stretch; justify-content: space-between; gap: 24px; padding: 10px 16px; }
.brand { display: flex; align-items: center; gap: 10px; min-width: 0; }
.mark { width: 28px; height: 28px; flex: none; }
h1 { margin: 0; font-size: 22px; line-height: 1.2; font-weight: 700; letter-spacing: -0.01em; color: var(--crimson); text-wrap: balance; }
.sub { margin: 2px 0 0; font-size: 14px; color: var(--ink-2); }
.kpi { display: flex; flex: 1; margin: 0; background: var(--panel); border: 1px solid var(--line); border-radius: 4px; overflow: hidden; }
.kpi > div { flex: 1; padding: 0 0 8px; min-width: 132px; }
.kpi > div + div { border-left: 1px solid var(--line); }
.kpi > div + div dt { box-shadow: inset 1px 0 0 rgba(255, 255, 255, 0.18); } /* 띠 사이 가는 구분선 */
/* 칸 제목 = 위쪽 띠 */
.kpi dt { padding: 6px 14px; text-align: center; font-size: 17px; font-weight: 700; color: #fff; background: #3A3632; white-space: nowrap; } /* 바탕(베이지)과 구분되게 진한 띠 */
.kpi dd { margin: 6px 0 0; padding: 0 14px; display: flex; justify-content: center; align-items: baseline; gap: 4px; }
.kpi dd b { font-size: 40px; line-height: 1.15; letter-spacing: -0.01em; }
.kpi dd span { font-size: 16px; color: var(--ink-2); }
#k-late { color: var(--crimson); }
#k-saved { color: #2E7D4F; }
.toast { position: fixed; left: 50%; top: 84px; z-index: 50; transform: translate(-50%, -8px); max-width: min(560px, calc(100% - 32px)); padding: 10px 16px; font-size: 15px; font-weight: 600; color: #fff; background: rgba(38, 38, 38, 0.92); border-radius: 4px; opacity: 0; pointer-events: none; transition: opacity 250ms ease-out, transform 250ms ease-out; }
.toast.show { opacity: 1; transform: translate(-50%, 0); }
/* 자원 켜기 스위치 */
.tog { appearance: none; margin: 0 8px 0 auto; width: 34px; height: 20px; border-radius: 10px; background: var(--line-2); position: relative; cursor: pointer; flex: none; transition: background-color 150ms ease-out; }
.tog::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: transform 150ms ease-out; }
.tog:checked { background: #2E7D4F; }
.tog:checked::after { transform: translateX(14px); }
.res-item.off .row, .res-item.off input[type="range"] { opacity: 0.4; }

/* 실시간 서울 날씨(Open-Meteo): 시각 · 기온 · 지난 1시간 강수 + 슬라이더에 적용 */
.kpi.wx { flex: none; }
.kpi.wx > div { flex: none; min-width: 0; }
.kpi.wx[hidden] { display: none; }
.wx-act { display: flex; align-items: center; padding: 0 14px !important; }
.wx button { padding: 10px 14px; font: 700 15px/1 var(--font); color: #fff; background: var(--ink); border: 0; border-radius: 4px; cursor: pointer; white-space: nowrap; }

/* ---------- 세 칸 ---------- */
.grid { --lw: 296px; --rw: 420px; display: grid; grid-template-columns: var(--lw) 10px minmax(0, 1fr) 10px var(--rw); padding: 0 16px 12px; min-height: 0; }
/* 패널 사이 손잡이: 끌거나 ← → 키로 폭 조절 */
.gutter { cursor: col-resize; touch-action: none; position: relative; }
.gutter::after { content: ""; position: absolute; left: 4px; top: 50%; width: 2px; height: 40px; margin-top: -20px; border-radius: 1px; background: var(--line-2); transition: background-color 120ms ease-out; }
.gutter:hover::after, .gutter:focus-visible::after, .gutter.drag::after { background: var(--crimson); height: 100%; top: 0; margin-top: 0; }
/* 패널 통째로 접기 */
.fold { position: absolute; left: -6px; top: 8px; z-index: 1; width: 22px; height: 28px; padding: 0; border: 1px solid var(--line-2); border-radius: 4px; background: var(--panel); color: var(--ink-2); font: 700 15px/1 var(--font); cursor: pointer; }
.fold:hover { color: var(--crimson); border-color: var(--crimson); }
.panel.folded { display: none; }
.rain { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.panel { background: var(--panel); border: 1px solid var(--line); border-radius: 4px; overflow-y: auto; min-height: 0; scrollbar-width: thin; scrollbar-color: var(--line-2) transparent; }
.sec { padding: 12px 14px 14px; }
.sec + .sec { border-top: 1px solid var(--line); }
.sec > summary { list-style: none; cursor: pointer; font-size: 15px; font-weight: 700; color: var(--crimson); margin-bottom: 8px; display: flex; justify-content: space-between; align-items: center; }
.sec > summary::-webkit-details-marker { display: none; }
.sec > summary::after { content: ""; width: 7px; height: 7px; border-right: 1.5px solid var(--ink-2); border-bottom: 1.5px solid var(--ink-2); transform: rotate(45deg); transition: transform 160ms ease-out; margin-right: 3px; }
.sec:not([open]) > summary { margin-bottom: 0; }
.sec:not([open]) > summary::after { transform: rotate(-45deg); }

/* 슬라이더: 브라우저 기본 + accent-color */
input[type="range"] { width: 100%; margin: 4px 0 2px; accent-color: var(--crimson); height: 22px; cursor: pointer; }
.rain-read { display: flex; align-items: baseline; gap: 6px; }
.rain-read output { font-size: 44px; font-weight: 700; line-height: 1; letter-spacing: -0.02em; color: var(--ink); }
.rain-read span { font-size: 16px; color: var(--ink-2); }
.scale { display: flex; justify-content: space-between; font-size: 13px; color: var(--ink-2); }
.quick { display: flex; gap: 6px; margin-top: 8px; }
.quick button {
  flex: 1; font: 500 14px/1.3 var(--font); color: var(--ink); background: var(--ground); border: 1px solid var(--line-2);
  border-radius: 4px; padding: 6px 8px; cursor: pointer; text-align: center; transition: background-color 120ms ease-out, transform 120ms ease-out;
}
.quick button b { font-size: 17px; }
.quick button:hover { background: #E9E3D9; }
.quick button:active { transform: scale(0.97); }
.quick button[aria-pressed="true"] { border-color: var(--crimson); background: var(--crimson-pale); color: var(--crimson); }
.row { display: flex; justify-content: space-between; align-items: baseline; font-size: 15px; margin-top: 6px; }
.row output { font-weight: 700; font-size: 17px; white-space: nowrap; margin-left: 8px; }
.hint { margin: 0 0 6px; font-size: 14px; color: var(--ink-2); }
#res { display: block; }
.grp { padding-bottom: 0; font-size: 14px; font-weight: 700; color: var(--ink-2); }
.grp + .sec { border-top: 0; }

/* 왼쪽 = 카드 2장(강우 · 대응 자원), 큰 제목 = 상단 요약 칸과 같은 진한 띠, 자원 이름 = 소제목 */
.panel.left { background: transparent; border: 0; display: flex; flex-direction: column; gap: 10px; }
/* 상황 알림 카드 */
.sit-list { list-style: none; margin: 0; padding: 0; }
.sit-list > li { padding: 9px 14px; cursor: pointer; }
.sit-list > li + li { border-top: 1px solid var(--line); }
.sit-list > li:hover { background: #F7F4EE; }
.sit-list > li.open { background: #F7F4EE; box-shadow: inset 3px 0 0 var(--crimson); }
.sit-list > li.none { cursor: default; color: var(--ink-2); font-size: 14px; }
.sit-list .sh { display: flex; align-items: baseline; gap: 8px; }
.sit-list .sh b { font-size: 16px; }
.sit-list .sb { display: flex; gap: 4px; flex: 1; }
.sit-list .sb em { font-style: normal; font-size: 12px; font-weight: 700; padding: 1px 7px; border-radius: 10px; color: var(--crimson); background: var(--crimson-pale); white-space: nowrap; }
.sit-list .sb em.late { color: #fff; background: var(--crimson); }
.sit-list .sn { font-size: 14px; font-weight: 700; color: var(--ink-2); white-space: nowrap; }
.sit-list .sb em.none { color: var(--ink-2); background: #EFEBE4; }
/* 펼친 구: 유형별 작은 카드 */
.sit-list .sa { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 6px; }
.sit-list .sa li { padding: 7px 10px; background: var(--panel); border: 1px solid var(--line); border-left: 4px solid var(--c); border-radius: 4px; }
.sit-list .sa-h { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.sit-list .sa-h b { font-size: 15px; }
.sit-list .ss { flex: none; font-size: 12px; font-weight: 700; padding: 2px 8px; border-radius: 10px; color: var(--crimson); background: var(--crimson-pale); }
.sit-list .ss.late { color: #fff; background: var(--crimson); }
.sit-list .ss { color: var(--ink-2); background: #EFEBE4; } .sit-list .ss.soon { color: var(--crimson); background: var(--crimson-pale); } .sit-list .ss.late { color: #fff; background: var(--crimson); }
.sit-list .sb em { color: var(--ink-2); background: #EFEBE4; } .sit-list .sb em.soon { color: var(--crimson); background: var(--crimson-pale); } .sit-list .sb em.late { color: #fff; background: var(--crimson); }
.sit-list .sa p { margin: 3px 0 0; font-size: 14px; color: var(--ink-2); }
.sit-list .sa-n { margin: 8px 2px 0; font-size: 13px; color: var(--ink-2); }
.sit-list .sa-n b { margin-right: 6px; padding: 1px 7px; font-size: 12px; border-radius: 10px; background: #EFEBE4; }
.panel.left > .sec-rain, .panel.left > #res, .panel.left > .sit { flex: none; background: var(--panel); border: 1px solid var(--line); border-radius: 4px; overflow: hidden; }
.panel.left > .sec-rain > summary, .panel.left .grp { margin: -12px -14px 12px; padding: 8px 14px; font-size: 17px; font-weight: 700; color: #fff; background: #3A3632; }
.panel.left .grp { margin: 0; }
.panel.left > .sec-rain > summary::after { border-color: #fff; }
.panel.left .sec-res > summary { font-size: 16px; color: var(--ink); padding-left: 9px; box-shadow: inset 3px 0 0 var(--crimson); }

/* ---------- 지도 ---------- */
.mapwrap { position: relative; min-height: 0; border-radius: 4px; overflow: hidden; border: 1px solid var(--line); background: #ECE8E0; }
#map { position: absolute; inset: 0; opacity: 0; transition: opacity 300ms ease-out; } /* 우리 층이 다 얹힌 뒤 보임(바탕 지도만 잠깐 뜨는 것 방지) */
#map.ready { opacity: 1; }
.mapwrap:has(#map:not(.ready))::after { content: "지도를 불러오는 중"; position: absolute; inset: 0; display: grid; place-items: center; font-size: 15px; color: var(--ink-2); pointer-events: none; }
.legend {
  position: absolute; left: 10px; bottom: 10px; width: 290px; background: var(--panel); border: 1px solid var(--line); border-radius: 6px;
  padding: 10px 14px; font-size: 14px; box-shadow: 0 2px 8px rgba(38, 38, 38, 0.08);
}
.legend > summary { cursor: pointer; font-size: 15px; font-weight: 700; color: var(--ink); }
.legend[open] > summary { margin-bottom: 4px; }
.lg { display: flex; align-items: center; gap: 8px; white-space: nowrap; }
/* 범례 = 칸 3개(예상 피해 지역 · 침수 수심 · 대피시설), 칸 사이 가는 선 */
.lgs { padding: 8px 0; }
.lgs + .lgs { border-top: 1px solid var(--line); }
.lgs:last-child { padding-bottom: 0; }
.lgs[hidden] { display: none; }
.lgt { margin: 0 0 6px; font-size: 13px; font-weight: 700; color: var(--ink-2); }
.zchips { display: flex; flex-wrap: wrap; gap: 4px 12px; }
.zchips span { display: inline-flex; align-items: center; gap: 6px; }
.zchips i { width: 12px; height: 12px; border-radius: 3px; }
/* 침수 수심: 이어진 띠 + 눈금 숫자(칸 경계 아래) */
.ramp { display: grid; grid-template-columns: repeat(3, 1fr); height: 10px; border-radius: 2px; overflow: hidden; }
.ramp .w1 { background: var(--w1); } .ramp .w2 { background: var(--w2); } .ramp .w3 { background: var(--w3); }
.ramp-l { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 4px; font-size: 13px; color: var(--ink-2); text-align: center; white-space: nowrap; }
.lg[hidden] { display: none; }
.sw { width: 14px; height: 10px; display: inline-block; border: 1px solid var(--line-2); }
.sw.w2 { background: var(--w2); border-color: var(--w2); }
.sw.w3 { background: var(--w3); border-color: var(--w3); }
.dot { width: 9px; height: 9px; border-radius: 50%; background: var(--ink); border: 1.5px solid #fff; box-shadow: 0 0 0 1px var(--ink); display: inline-block; margin: 0 2px; }
.mapbtns { position: absolute; top: 10px; right: 52px; z-index: 2; display: flex; gap: 6px; }
.mapback { padding: 7px 12px; font: 700 15px/1 var(--font); color: var(--crimson); background: var(--panel); border: 1px solid var(--crimson); border-radius: 4px; cursor: pointer; }
.mapback[hidden], .routebtn[hidden], .routecard[hidden] { display: none; }
.routebtn { padding: 7px 12px; font: 700 15px/1 var(--font); color: #fff; background: #2E7D4F; border: 0; border-radius: 4px; cursor: pointer; }
.routebtn[aria-pressed="true"] { background: var(--ink); }
.routecard { position: absolute; right: 10px; bottom: 34px; z-index: 2; width: min(430px, calc(100% - 20px)); max-height: 70%; overflow-y: auto; padding: 12px 14px; font-size: 14px; background: var(--panel); border: 1px solid var(--line); border-left: 3px solid #2E7D4F; border-radius: 4px; }
.routecard .rc-x { float: right; margin: -4px -4px 0 8px; width: 26px; height: 26px; border: 0; background: none; color: var(--ink-2); font-size: 16px; cursor: pointer; }
.routecard .rc-x:hover { color: var(--crimson); }
.askpop .maplibregl-popup-content p { margin: 0 0 8px; font-size: 15px; }
.askpop .ask-b { display: flex; gap: 6px; }
.askpop .ask-b button { flex: 1; padding: 6px 0; font: 700 15px/1 var(--font); border-radius: 4px; cursor: pointer; border: 1px solid var(--line-2); background: var(--panel); color: var(--ink); }
.askpop .ask-b .go { background: #2E7D4F; border-color: #2E7D4F; color: #fff; }
.routecard .rc-h { margin: 0 0 4px; font-size: 16px; font-weight: 700; }
.navtag { padding: 4px 8px; font: 700 14px/1 var(--font); color: #fff; border-radius: 4px; box-shadow: 0 1px 4px rgba(38, 38, 38, 0.3); } /* 위치는 maplibre 가 absolute 로 잡음 */
.navtag::after { content: ""; position: absolute; left: 50%; bottom: -5px; margin-left: -5px; border: 5px solid transparent; border-bottom: 0; border-top-color: inherit; }
.navtag.from { background: var(--crimson); border-color: var(--crimson); }
.navtag.to { background: #2E7D4F; border-color: #2E7D4F; }
.routecard .rc-s { margin: 4px 0; color: var(--ink-2); }
.routecard table { border-collapse: collapse; width: 100%; }
/* 거리 · 수용 · 위치: 이름표(회색) 위, 값(굵게) 아래 */
/* 대피 경로 카드: 제목 · 정보 칸 3개(가운데 정렬 네모) · 표 */
.routecard .rc-k { margin: 0; font-size: 12px; font-weight: 700; color: #2E7D4F; }
.routecard .rc-f { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin: 8px 0 10px; }
.routecard .rc-f > div { padding: 6px 4px; text-align: center; background: #F7F4EE; border: 1px solid var(--line); border-radius: 4px; }
.routecard .rc-f dt { font-size: 12px; color: var(--ink-2); }
.routecard .rc-f dd { margin: 2px 0 0; font-size: 15px; font-weight: 700; word-break: keep-all; }
.routecard .rc-w { margin: 0 0 8px; padding: 6px 8px; font-size: 13px; font-weight: 700; color: var(--crimson); background: var(--crimson-pale); border-radius: 4px; }
.routecard th { padding: 5px 4px; font-size: 12px; font-weight: 700; color: var(--ink-2); text-align: center; background: #F5F2EC; }
.routecard td { padding: 5px 4px; text-align: center; border-top: 1px solid var(--line); }
.routecard .pn { display: inline-flex; align-items: center; gap: 6px; }
.routecard td:first-child, .routecard th:first-child { text-align: left; }
.routecard td.v { font-weight: 700; }
.routecard .vd { display: inline-flex; align-items: center; gap: 6px; }
.routecard .vd small { font-size: 12px; color: var(--ink-2); white-space: nowrap; }
.routecard .tag { display: inline-block; padding: 3px 8px; font-size: 12px; font-weight: 700; border-radius: 10px; white-space: nowrap; }
.routecard .tag.ok { color: #fff; background: #2E7D4F; }
.routecard .tag.no { color: #fff; background: var(--crimson); }
.routecard .tag.na { color: var(--ink-2); background: #F0EDE8; }
.routecard .ok { color: #2E7D4F; font-weight: 700; }
.routecard .no { color: var(--crimson); font-weight: 700; }
.maplibregl-popup-content { font: 500 14px/1.45 var(--font); color: var(--ink); border-radius: 4px; padding: 8px 10px; box-shadow: 0 2px 8px rgba(38, 38, 38, 0.14); }
.chip { display: inline-block; width: 8px; height: 8px; border-radius: 2px; margin-right: 6px; vertical-align: 0; }

/* ---------- 오른쪽 ---------- */
.guhead { padding: 12px 14px 4px; display: flex; align-items: baseline; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.guhead select {
  font: 700 25px/1.2 var(--font); color: var(--ink); border: 0; background: transparent; padding: 0 22px 0 0; cursor: pointer; appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%235E5A54' stroke-width='1.6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 2px center;
}
.guhead select { border-bottom: 2px solid transparent; transition: border-color 150ms ease-out; }
.guhead select:hover, .guhead select:focus-visible { border-bottom-color: var(--crimson); outline: none; }
/* 열었을 때 25개 구를 3칸 격자로(가나다순). 지원 브라우저(Chrome 135+)만, 나머지는 기본 목록 */
@supports (appearance: base-select) {
  .guhead select, .guhead select::picker(select) { appearance: base-select; }
  .guhead select { display: flex; align-items: center; gap: 10px; padding: 0 2px 2px 0; background-image: none; }
  .guhead select::picker-icon { content: ""; width: 12px; height: 8px; transition: rotate 150ms ease-out;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%235E5A54' stroke-width='1.6'/%3E%3C/svg%3E") no-repeat center; }
  .guhead select:open::picker-icon { rotate: 180deg; }
  .guhead select::picker(select) { margin-top: 6px; padding: 8px; background: var(--panel); border: 1px solid var(--line); border-radius: 6px; box-shadow: 0 6px 20px rgba(38, 38, 38, 0.12); }
  .guhead select:open::picker(select) { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; } /* 닫혔을 때 display 를 덮어쓰면 늘 열려 보임 */
  .guhead option { padding: 8px 10px; border-radius: 4px; font: 500 15px/1.2 var(--font); color: var(--ink); white-space: nowrap; cursor: pointer; }
  .guhead option::checkmark { display: none; }
  .guhead option:hover, .guhead option:focus-visible { background: var(--crimson-pale); outline: none; }
  .guhead option:checked { background: var(--crimson); color: #fff; font-weight: 700; }
  .guhead option:disabled { display: none; } /* '자치구 선택' 안내 줄은 목록에서 숨김 */
}
.gucount { margin: 0; display: flex; gap: 6px; }
.gucount .gc { display: flex; align-items: baseline; gap: 6px; padding: 4px 10px; border: 1px solid var(--line); border-radius: 4px; background: var(--panel); }
.gucount em { font-style: normal; font-size: 13px; color: var(--ink-2); }
.gucount b { font-size: 17px; }
.gucount .late { border-color: var(--crimson); } .gucount .late b { color: var(--crimson); }
.gucount .safe b { color: var(--ink-2); font-weight: 500; }
.lines { list-style: none; margin: 0; padding: 0; }
.lines li { display: grid; grid-template-columns: 50px minmax(0, 1.45fr) 64px 82px minmax(0, 1fr); align-items: stretch; padding: 0; font-size: 15px; cursor: default; }
/* 칸마다 세로선: 각 칸이 줄 높이를 꽉 채우고 왼쪽에 선 */
.lines li > * { display: flex; align-items: center; min-width: 0; padding: 8px; }
.lines li > * + * { border-left: 1px solid var(--line); }
.lines li > * { justify-content: center; text-align: center; } /* 모든 칸 가운데 정렬 */
.lines .nm > span { line-height: 1.25; word-break: keep-all; } /* 좁으면 두 줄로(잘라내지 않음) */
.lines li + li { border-top: 1px solid var(--line); }
.lines li[data-p] { cursor: pointer; }
.lines li[data-p]:hover { background: #F7F4EE; }
.lines li.on { background: #EFEAE1; box-shadow: inset 3px 0 0 #262626; }
/* 머리줄: 옅은 띠 + 열마다 아래 값과 같은 정렬(지도 · 인명 피해까지 = 가운데, 대피 인원 = 오른쪽) */
.lines li.lh { padding: 0; font-size: 13px; font-weight: 700; color: var(--ink-2); background: #F5F2EC; border-radius: 4px; white-space: nowrap; }
.lines li.lh + li { border-top: 0; }
.lines .chip { width: 14px; height: 14px; border-radius: 3px; }
.lines .st { font-weight: 700; font-size: 14px; white-space: nowrap; }
.lines li.late .st, .lines li.now .st { color: var(--crimson); }
.lines li.safe .st, .lines li.safe .when, .lines li.safe .ppl b { color: var(--ink-2); font-weight: 500; }
.lines li.safe .track i { opacity: 0.35; } /* 경보 기준 미만: 노출 인원은 보이되 흐리게 */
.lines .when { font-weight: 700; font-size: 17px; }
.lines li.late .when { color: var(--crimson); }
.lines .ppl { display: flex; flex-direction: column; align-items: stretch; justify-content: center; gap: 5px; }
.lines .ppl .n { display: flex; justify-content: center; align-items: baseline; gap: 2px; }
.lines .ppl small { font-size: 13px; color: var(--ink-2); }
.lines .ppl .acc { font-size: 12px; font-weight: 700; color: #2E7D4F; white-space: nowrap; }
.lines .ppl .acc.need { color: var(--crimson); white-space: normal; word-break: keep-all; line-height: 1.2; } /* 재해취약자: 지원 인력 모자람 — 좁으면 두 줄(칸 밖으로 안 나가게) */ /* 대피시설 수용 인원 */
.lines .track u { display: block; height: 100%; background: #2E7D4F; transition: width 120ms ease-out; } /* 막대 안 초록 = 수용된 몫 */
.lines .ppl b { font-size: 16px; letter-spacing: -0.01em; }
.lines .track { height: 4px; background: #EFEBE4; border-radius: 2px; overflow: hidden; }
.lines .track i { display: block; height: 100%; min-width: 2px; border-radius: 2px; transition: width 120ms ease-out; }
.pick { margin: 24px 0; text-align: center; font-size: 15px; line-height: 1.6; color: var(--ink-2); }
.pick[hidden], .panel.right > details[hidden] { display: none; }
/* 의용소방대 칸 아래: 투입 시한 · 지원 가능(고른 구) */
.vol { margin: 10px 0 0; padding: 8px 10px; display: grid; gap: 4px; background: #F7F4EE; border-radius: 4px; }
.vol[hidden] { display: none; }
.vol > div { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.vol dt { font-size: 14px; color: var(--ink-2); }
.vol dd { margin: 0; font-size: 15px; text-align: right; }
.vol dd b { font-size: 18px; } .vol dd b.late { color: var(--crimson); }
.vol dd span { font-size: 13px; color: var(--ink-2); }
.res-na { margin: 4px 0 0; font-size: 14px; color: var(--ink-2); }
.res-na[hidden] { display: none; }
/* 안전 마진 범례: 3칸 × 2줄, 누르면 그 선 끄기/켜기 */
.alg { list-style: none; margin: 0 0 6px; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px 10px; font-size: 14px; }
.alg[hidden] { display: none; }
.alg button { all: unset; display: flex; align-items: center; gap: 6px; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.alg button:focus-visible { outline: 2px solid var(--crimson); outline-offset: 1px; }
.alg .chip { width: 10px; height: 10px; margin: 0; flex: none; }
.alg .off { opacity: 0.35; text-decoration: line-through; }
.alg .none { color: var(--ink-2); }
.chartbox { position: relative; height: max(280px, calc(100vh - 560px)); } /* 오른쪽 패널 아래 끝까지 그래프 */
.mapfail { position: absolute; left: 12px; top: 12px; z-index: 2; margin: 0; padding: 8px 12px; font-size: 15px; color: var(--ink); background: #F4F1EC; border: 1px solid var(--line); border-radius: 4px; }
.na { margin: 0; padding: 18px 12px; text-align: center; font-size: 15px; color: var(--ink-2); background: #F4F1EC; border: 1px solid var(--line); border-radius: 4px; }

/* ---------- 아래 ---------- */

/* ---------- 노트북 좁은 폭 ---------- */
@media (max-width: 1180px) {
  .grid { --lw: 264px; --rw: 360px; }
  .kpi > div { min-width: 0; padding: 6px 12px; }
}

/* ---------- 휴대폰 · 태블릿: 지도 위, 나머지 아래로 쌓기 ---------- */
@media (max-width: 860px) {
  body { display: block; overflow: auto; height: auto; }
  .top { flex-direction: column; align-items: stretch; gap: 10px; }
  h1 { font-size: 20px; }
  .kpi { display: grid; grid-template-columns: 1fr 1fr; }
  .kpi > div { padding: 6px 12px; }
  .kpi > div + div { border-left: 0; }
  .kpi > div:nth-child(even) { border-left: 1px solid var(--line); }
  .kpi > div:nth-child(n + 3) { border-top: 1px solid var(--line); }
  .kpi dd b { font-size: 22px; }
  .grid { display: flex; flex-direction: column; gap: 10px; }
  .panel { display: contents; }
  .gutter { display: none; }
  .mapwrap { order: 0; height: 55vh; height: 55svh; min-height: 320px; } /* svh: 주소창이 접혔다 펴져도 지도 높이 고정 */
  .sec { background: var(--panel); border: 1px solid var(--line); border-radius: 4px; }
  .sec + .sec { border-top: 1px solid var(--line); }
  .sec > summary { margin-bottom: 0; min-height: 28px; }
  .sec[open] > summary { margin-bottom: 8px; }
  .sec-rain { order: 1; }
  .guhead { order: 2; background: var(--panel); border: 1px solid var(--line); border-radius: 4px; padding: 10px 14px; }
  .sec-say { order: 3; }
  .sec-judge { order: 4; }
  #res { display: contents; } /* 휴대폰: 자원 칸을 세로 순서에 섞음 */
  .grp, .sec-res { order: 5; }
  .chartbox { height: 260px; }
  .grp { background: none; border: 0; padding: 4px 2px 0; }
  .sec-arsm { order: 6; }
  .legend { font-size: 13px; padding: 4px 8px; max-width: calc(100% - 20px); }
  .legend > summary { display: block; cursor: pointer; font-weight: 700; min-height: 24px; line-height: 24px; }
  .legend[open] > summary { margin-bottom: 4px; }
  .quick button { min-height: 44px; }
  input[type="range"] { height: 32px; }
}

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