/* 응급실 라이브 화면. 출산 계산기(출산/public/index.html)와 같은 결이다.
   바탕 #f6f5fa, 흰 카드, 라임 #d3ff30 은 「가까운 응급실 찾기」 단추 한 곳에만 쓴다.
   모바일 먼저, 본문 폭 최대 640px. 토큰은 전부 :root 에 두고 다크는 같은 이름을 덮어쓴다. */
:root{
  --bg:#f6f5fa; --card:#fff; --ink:#111; --ink2:#191f28; --gray:#666; --gray2:#999; --line:#e5e8ee;
  --pill:#ecebf0; --lime:#d3ff30; --lime2:#e3fa63; --red:#d6304a; --redbg:#fff0f2;
  --green:#0f7b4f; --greenbg:#e8f7f0;
  --pin-green:#1fa36b; --pin-none:#b9b6c6; --pin-ring:#fff;
  --map-land:#e9e7f0; --map-line:#cbc7d8;
  --band:#fff4e6; --bandink:#8a4b0a;
  --btn:#191f28; --btnink:#fff;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#141419; --card:#1e1e26; --ink:#eceaf2; --ink2:#f2f0f7; --gray:#a9a6b5; --gray2:#807d8c; --line:#2d2c36;
    --pill:#2a2933; --red:#ff6b81; --redbg:#3a1f26;
    --green:#5fd39c; --greenbg:#173327;
    --pin-green:#34c47f; --pin-none:#55525f; --pin-ring:#1e1e26;
    --map-land:#26252e; --map-line:#3d3c48;
    --band:#3a2a1c; --bandink:#ffc78a;
    --btn:#2f2e3a; --btnink:#f2f0f7;
  }
}
:root[data-theme="dark"]{
  --bg:#141419; --card:#1e1e26; --ink:#eceaf2; --ink2:#f2f0f7; --gray:#a9a6b5; --gray2:#807d8c; --line:#2d2c36;
  --pill:#2a2933; --red:#ff6b81; --redbg:#3a1f26;
  --green:#5fd39c; --greenbg:#173327;
  --pin-green:#34c47f; --pin-none:#55525f; --pin-ring:#1e1e26;
  --map-land:#26252e; --map-line:#3d3c48;
  --band:#3a2a1c; --bandink:#ffc78a;
  --btn:#2f2e3a; --btnink:#f2f0f7;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0; background:var(--bg); color:var(--ink); line-height:1.55; -webkit-text-size-adjust:100%;
  font-family:"Pretendard Variable",Pretendard,-apple-system,"Apple SD Gothic Neo","Segoe UI",Roboto,"Noto Sans JP","Noto Sans SC","Noto Sans TC",sans-serif;
  font-variant-numeric:tabular-nums}
a{color:var(--ink); text-decoration:none}
[hidden]{display:none !important}

/* 머리줄. 제목과 언어 다섯 */
.hdr{min-height:56px; display:flex; align-items:center; justify-content:space-between; gap:10px; padding:8px 18px; max-width:640px; margin:0 auto}
.hdr b{font-size:15px; font-weight:700; white-space:nowrap}
.lang{display:flex; flex-wrap:wrap; gap:4px; justify-content:flex-end}
.lang a{font-size:11px; font-weight:600; padding:4px 7px; border-radius:6px; background:var(--pill); color:var(--gray)}
.lang a[aria-current="page"]{background:var(--ink2); color:var(--bg)}

.wrap{max-width:640px; margin:0 auto; padding:4px 16px 100px}
h1{font-size:22px; letter-spacing:-0.02em; margin:8px 0 4px; font-weight:800; line-height:1.32}
h2{font-size:16px; margin:22px 0 8px; font-weight:700}
.lead{font-size:14px; color:var(--gray); margin:0 0 14px; line-height:1.6}

/* 1. 고정 첫 줄 */
.line119{background:var(--redbg); color:var(--red); border-radius:14px; padding:12px 15px; font-size:15px; font-weight:700; margin:0 0 6px; line-height:1.5}
.note{font-size:12.5px; color:var(--gray); margin:0 0 14px; line-height:1.55}

/* fail-closed 띠 */
.band{background:var(--band); color:var(--bandink); border-radius:12px; padding:11px 14px; font-size:14px; font-weight:600; margin:0 0 12px; line-height:1.5}
.band p{margin:0}
.band p + p{margin-top:4px}

/* 2. 큰 숫자 둘 */
.big{display:grid; grid-template-columns:1fr 1fr; gap:10px; margin:0 0 12px}
.big .card{background:var(--card); border-radius:16px; padding:14px 16px 12px}
.big .label{font-size:12.5px; color:var(--gray); margin:0 0 4px; line-height:1.4}
.big .num{font-size:15px; color:var(--gray); margin:0; line-height:1.3; word-break:keep-all}
.big .num b{font-size:34px; font-weight:800; letter-spacing:-0.03em; color:var(--ink); line-height:1.1}
.big .num b.small{font-size:18px; font-weight:700; color:var(--gray)}
.big .num b.checking{font-size:22px}
@media (max-width:380px){ .big{grid-template-columns:1fr} }

/* 3. 지도 */
.map{background:var(--card); border-radius:16px; padding:10px; margin:0 0 10px; overflow:hidden}
.map svg{display:block; width:100%; height:auto}
.map path, .map circle{vector-effect:non-scaling-stroke}
.map .pin{stroke:var(--pin-ring); stroke-width:0.8; fill:var(--pin-none); cursor:pointer}
.map .pin.g{fill:var(--pin-green)}
.map .pin.on{stroke:var(--ink); stroke-width:1.4}
.map .me{fill:var(--red); stroke:var(--pin-ring); stroke-width:1; pointer-events:none}
.legend{display:flex; gap:14px; font-size:12px; color:var(--gray); margin:0 0 12px; padding:0 4px}
.legend i{display:inline-block; width:10px; height:10px; border-radius:50%; margin-right:5px; vertical-align:-1px; background:var(--pin-none)}
.legend i.g{background:var(--pin-green)}

/* 시도 17개 링크(빌드가 심은 window.SIDOS 로 앱.js 가 그린다) */
.sidos{display:flex; flex-wrap:wrap; gap:6px; margin:0 0 14px}
.sidos a{font-size:12.5px; font-weight:600; padding:6px 10px; border-radius:60px; background:var(--card); color:var(--gray); border:1px solid var(--line)}
.sidos a[aria-current="page"]{background:var(--ink2); color:var(--bg); border-color:var(--ink2)}

/* 핀 카드ㆍ가까운 곳 카드 */
.hosp{background:var(--card); border-radius:14px; padding:14px 16px; margin:0 0 10px}
.hosp .state{display:inline-block; font-size:12px; font-weight:700; padding:3px 9px; border-radius:7px; margin:0 6px 6px 0; background:var(--pill); color:var(--gray)}
.hosp .state.g{background:var(--greenbg); color:var(--green)}
.hosp .nm{display:block; font-size:16.5px; font-weight:700; line-height:1.4}
.hosp .meta{font-size:13px; color:var(--gray); margin:2px 0 8px; line-height:1.5}
.hosp .row{font-size:14.5px; margin:0 0 3px; line-height:1.5}
.hosp .row.dim{font-size:13px; color:var(--gray); margin-bottom:10px}
.acts{display:flex; gap:8px; margin-top:8px}
.acts a{flex:1; text-align:center; padding:12px 8px; border-radius:11px; font-size:15px; font-weight:700; text-decoration:none}
.acts .call{background:var(--btn); color:var(--btnink)}
.acts .route{background:var(--pill); color:var(--ink)}

/* 4. 가까운 5곳. 라임은 이 단추 한 곳 */
.near-btn{display:block; width:100%; height:52px; border:0; border-radius:12px; background:var(--btn); color:var(--lime);
  font-size:15px; font-weight:800; font-family:inherit; cursor:pointer; margin:4px 0 12px}
.near-btn:disabled{opacity:.6; cursor:default}
.msg{font-size:14px; color:var(--gray); margin:0 0 12px}

/* 5. 고정 문구 */
.fixed{background:var(--card); border-radius:14px; padding:12px 16px; margin:0 0 10px; font-size:14px; color:var(--gray); line-height:1.6}
.fixed p{margin:0}
.fixed p + p{margin-top:4px}

/* 6. 입력 중단 목록(접힘) */
details{background:var(--card); border-radius:14px; padding:2px 16px; margin:0 0 10px}
summary{cursor:pointer; padding:11px 0; font-size:14.5px; font-weight:700}
summary .cnt{font-weight:600; color:var(--gray); margin-left:6px; font-size:13px}
details ul{list-style:none; margin:0; padding:0 0 10px}
details li{font-size:13.5px; padding:6px 0; border-top:1px solid var(--line); line-height:1.5}
details li span{color:var(--gray); margin-left:6px}

/* 7. FAQ */
.faq{background:var(--card); border-radius:14px; padding:14px 16px; margin:0 0 10px}
.faq h2{margin:0 0 8px}
.faq p{font-size:14px; margin:0 0 6px; line-height:1.6}
.faq p:last-child{margin-bottom:0}

/* 8. 꼬리 */
footer{margin-top:22px; font-size:12.5px; color:var(--gray); line-height:1.8}
footer a{color:var(--ink); font-weight:600; border-bottom:1px solid var(--line)}
footer .sep{margin:0 6px; color:var(--gray2)}