/* ════════════════════════════════════════════════════════════════════
   visit.css   ·   v1   ·   2026-10-22
   주왕산국립공원 탐방객 안내 (공개 정적 페이지) — 모양
   ────────────────────────────────────────────────────────────────────
   바탕 : 기존 VisitMap.html v54 의 화면 CSS(인쇄 묶음 · 길 안내 띠 · 방향 부채꼴 뺌)를
          주석만 걷어 그대로 옮겼다. 같은 모습이 목표라 값은 손대지 않았다.
   아래 「새 페이지에서 더한 것」 만 v1 에서 새로 썼다.
   ════════════════════════════════════════════════════════════════════ */
:root{
  --ink:#1a1a1a; --muted:#5c6672; --line:#dde3ea; --bg:#f0f3f6;
  --gov:#036B52; --gov-d:#02543F; --gov-l:#E8F4EF; --gov-l2:#F3F9F6;
  --ok:#036B52; --warn:#B45309; --bad:#C2410C; --stop:#B3241F;
  --acc:#1D4ED8;
  --sh:0 1px 3px rgba(16,24,40,.06);
  --r:16px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{font-family:-apple-system,BlinkMacSystemFont,"Pretendard","Apple SD Gothic Neo",
  "Malgun Gothic","맑은 고딕",sans-serif;background:var(--bg);color:var(--ink);
  font-size:15px;line-height:1.6;-webkit-text-size-adjust:100%}
.wrap{max-width:760px;margin:0 auto;padding:0 0 40px;background:#fff;
  min-height:100vh;box-shadow:0 0 0 1px var(--line)}
@media (max-width:430px){
  body{font-size:14.5px}
  .verdict{margin:11px 11px 0;padding:17px 15px 15px;border-radius:14px}
  .verdict h2{font-size:22px;letter-spacing:-.9px}
  .verdict p{font-size:12.8px}
  .verdict .lvl{font-size:11px;padding:3px 9px}
  .card,.sos{margin:11px 11px 0;border-radius:14px}
  .card>h3{padding:12px 13px 10px;font-size:14px}
  .card .body{padding:13px}
  .wxnow .t{font-size:33px;letter-spacing:-1.6px}
  .wxgrid{gap:7px;grid-template-columns:repeat(3,1fr)}
  .wxgrid div{padding:8px 8px;border-radius:10px}
  .wxgrid b{font-size:14.5px}
  .sos{padding:14px 13px 13px}
  .sos ol{padding-left:18px;font-size:12.2px;line-height:1.7}
  .sos .tel a{padding:11px;font-size:14.5px}
  header{padding:13px 13px 12px}
  h1{font-size:17.5px}
  .util{padding:5px 13px;font-size:10.5px;gap:10px}
  #map{height:min(58vh,430px)}
  .legend{padding:10px 13px 12px;gap:4px 11px;font-size:10.5px}
}
.util{background:#fafbfc;border-bottom:1px solid var(--line);
  padding:6px 16px;font-size:11px;color:var(--muted);
  display:flex;justify-content:flex-end;gap:14px}
.util span{display:inline-flex;align-items:center;gap:4px}
header{background:#fff;padding:16px 16px 14px;border-bottom:2px solid var(--gov)}
.brand{display:flex;align-items:center;gap:11px}
.mark{flex:0 0 auto;width:38px;height:38px;border-radius:50%;
  background:var(--gov);display:flex;align-items:center;justify-content:center;
  color:#fff;font-size:17px;font-weight:800;letter-spacing:-1px}
h1{margin:0;font-size:20px;font-weight:800;letter-spacing:-.6px;line-height:1.25}
.sub{margin-top:2px;font-size:11.5px;color:var(--muted)}
.verdict{margin:14px 14px 0;padding:22px 20px 20px;border-radius:var(--r);
  background:linear-gradient(135deg,var(--gov-l) 0%,var(--gov-l2) 100%);
  border:1px solid #cfe6dc;border-left:7px solid var(--gov)}
.verdict .lvl{display:inline-block;font-size:11.5px;font-weight:700;
  letter-spacing:.3px;color:#fff;background:var(--gov);
  padding:3px 10px;border-radius:11px;margin-bottom:9px}
.verdict h2{margin:0;font-size:25px;font-weight:800;letter-spacing:-1px;line-height:1.28;word-break:keep-all;overflow-wrap:anywhere}
.verdict p{margin:9px 0 0;font-size:13.5px;color:#3b4754;line-height:1.6}
.verdict.l1{border-left-color:var(--warn);
  background:linear-gradient(135deg,#FEF6E7 0%,#FFFBF3 100%);border-color:#F5DFB8}
.verdict.l1 .lvl{background:var(--warn)}
.verdict.l2{border-left-color:var(--bad);
  background:linear-gradient(135deg,#FDEEE6 0%,#FFF8F4 100%);border-color:#F5CFBB}
.verdict.l2 .lvl{background:var(--bad)}
.verdict.l3{border-left-color:var(--stop);
  background:linear-gradient(135deg,#FCEBEA 0%,#FFF6F5 100%);border-color:#F0C7C5}
.verdict.l3 .lvl{background:var(--stop)} .verdict.l3 h2{color:var(--stop)}
.card{margin:14px 14px 0;background:#fff;border:1px solid var(--line);
  border-radius:var(--r);box-shadow:var(--sh);overflow:hidden}
.card>h3{margin:0;padding:14px 16px 12px;font-size:15px;font-weight:700;
  color:var(--ink);letter-spacing:-.3px;border-bottom:1px solid var(--line);
  display:flex;align-items:center;gap:8px;background:#fcfdfe}
.card>h3:before{content:"";flex:0 0 auto;width:4px;height:16px;
  border-radius:2px;background:var(--gov)}
.card>h3 b{color:var(--gov);font-weight:800}
.card .body{padding:15px 16px}
.wxnow{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.wxnow .t{font-size:38px;font-weight:800;letter-spacing:-2px;line-height:1;
  color:var(--gov-d)}
.wxnow .t i{font-size:16px;font-style:normal;color:var(--muted);font-weight:600}
.wxnow .w{font-size:12.5px;color:var(--muted)}
.wxgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(92px,1fr));
  gap:9px;margin-top:13px}
.wxgrid div{background:var(--gov-l2);border:1px solid #dcebe4;border-radius:12px;
  padding:9px 11px;font-size:11px;color:var(--muted)}
.wxgrid b{display:block;font-size:16px;color:var(--ink);font-weight:800;margin-top:1px}
.hrs{display:flex;gap:5px;margin-top:13px;overflow-x:auto;padding-bottom:0;
  -webkit-overflow-scrolling:touch;scroll-snap-type:x proximity;
  scrollbar-width:none;-ms-overflow-style:none}
.hrs::-webkit-scrollbar{display:none;width:0;height:0}
.hr{flex:0 0 auto;min-width:54px;text-align:center;background:#fff;
  border:1px solid var(--line);border-radius:11px;padding:8px 6px;
  scroll-snap-align:start}
.hr.near{background:var(--gov-l2);border-color:#dcebe4}
.hr .h{font-size:10px;color:var(--muted)}
.hr .e{font-size:17px;line-height:1.3;margin:1px 0}
.hr .d{font-size:13px;font-weight:800}
.hr .r{font-size:9.5px;color:var(--acc);font-weight:700;min-height:12px}
.hrsep{flex:0 0 auto;display:flex;align-items:center;padding:0 2px}
.hrsep span{writing-mode:vertical-rl;font-size:9.5px;color:var(--gov);
  font-weight:700;background:var(--gov-l);border-radius:8px;padding:6px 3px;
  letter-spacing:.5px}
.wchip{display:inline-block;margin:0 6px 6px 0;padding:5px 11px;border-radius:14px;
  font-size:12px;font-weight:700;background:#fff6f6;border:1px solid #f5d6d7;color:var(--stop)}
.wchip.pre{background:#FFF4E5;border-color:#FFD9A0;color:#8A5200}
#map{height:min(52vh,420px);width:100%;background:#eef2f6}
.maphint{position:absolute;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center;pointer-events:none;
  background:rgba(16,24,20,.45);color:#fff;font-size:16px;font-weight:800;letter-spacing:-.3px;opacity:0;transition:opacity .25s}
.maphint.on{opacity:1}
.legend{padding:11px 16px 14px;font-size:11px;color:var(--muted);
  display:flex;flex-wrap:wrap;gap:5px 15px;border-top:1px solid var(--line);
  background:#fcfdfe}
.legend span{display:inline-flex;align-items:center;gap:5px}
.legend u{width:16px;height:3px;border-radius:2px;display:inline-block;text-decoration:none}
.legend em{width:9px;height:9px;border-radius:50%;display:inline-block;font-style:normal}
.secs{margin:0;padding:0;list-style:none}
.secs li{display:flex;align-items:flex-start;gap:9px;padding:8px 15px;
  border-bottom:1px solid #f1f5f9;font-size:13px}
.secs li:last-child{border-bottom:0}
.secs .st{flex:0 0 auto;font-size:11px;font-weight:700;padding:2px 8px;border-radius:11px;
  margin-top:1px;white-space:nowrap}
.secs .st.o{background:#eaf7f0;color:var(--ok)}
.secs .st.x{background:#fdeeea;color:var(--bad)}
.secs .st.p{background:#FFF4E5;color:#8A5200}
.secs .nm{flex:1 1 auto;line-height:1.4}
.secs .km{flex:0 0 auto;font-size:11.5px;color:var(--muted);margin-top:2px}
.facs{display:grid;grid-template-columns:repeat(auto-fit,minmax(158px,1fr));gap:9px}
.facs button{text-align:left;background:var(--gov-l2);border:1px solid #dcebe4;
  border-radius:14px;padding:11px 12px;font:inherit;font-size:12.5px;cursor:pointer;
  display:flex;align-items:center;gap:9px;color:var(--ink);
  transition:background .12s,border-color .12s}
.facs button:hover,.facs button:focus-visible{background:var(--gov-l);
  border-color:#b9dccd;outline:none}
.facs b{flex:0 0 auto;width:28px;height:28px;border-radius:50%;color:#fff;
  display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:800}
.facs span{flex:1 1 auto;line-height:1.35;font-weight:600;min-width:0;
  word-break:keep-all;overflow-wrap:anywhere}
.facs i{font-style:normal;color:var(--muted);font-size:10.5px;display:block;
  font-weight:500}
.facs button:after{content:"→";flex:0 0 auto;width:22px;height:22px;border-radius:50%;
  background:#fff;border:1px solid #cfe6dc;color:var(--gov);
  display:flex;align-items:center;justify-content:center;font-size:11px}
@media (max-width:520px){
  .facs button:after{display:none}
  .facs button{padding:11px 11px;gap:8px}
}
.locbar{margin:12px 14px 0;display:flex;align-items:center;gap:10px;
  background:var(--gov-l2);border:1px solid #cfe6dc;border-radius:13px;
  border-left:4px solid var(--gov);padding:9px 12px}
.locbar.on{background:var(--gov-l);border-color:#b9dccd;border-left-color:var(--gov-d)}
.locbar .tx{flex:1 1 auto;min-width:0;font-size:12.5px;color:#3b4754;line-height:1.5;
  word-break:keep-all;overflow-wrap:anywhere}
.locbar .tx b{color:var(--gov-d)}
.locbar .tx i{display:block;font-style:normal;font-size:10.5px;color:var(--muted);margin-top:2px}
.locbar .lb{flex:0 0 auto;background:var(--gov);border:1px solid var(--gov);color:#fff;
  border-radius:11px;padding:9px 13px;font:inherit;font-size:12.5px;font-weight:700;
  cursor:pointer;white-space:nowrap}
.locbar .lb:hover{background:var(--gov-d);border-color:var(--gov-d)}
.locbar .lb.gh{background:#fff;color:var(--gov)}
.locbar .lb.gh:hover{background:var(--gov-l)}
@media (max-width:430px){
  .locbar{flex-wrap:wrap;margin:11px 11px 0;padding:9px 11px;gap:8px}
  .locbar .lb{width:100%;padding:10px}
  .locbar .tx{font-size:12px;line-height:1.45}
}
.wxwho{margin-top:10px;padding-top:8px;border-top:1px dashed var(--line);
  font-size:11.5px;color:var(--muted);line-height:1.55}
.wxwho b{color:var(--gov-d)}
.nearl{margin:0 0 12px;padding:0;list-style:none}
.nearl li{border-bottom:1px solid #f1f5f9}
.nearl li:last-child{border-bottom:0}
.nearl button{display:flex;align-items:center;gap:9px;width:100%;
  padding:10px 2px;font:inherit;font-size:13px;text-align:left;
  background:none;border:0;cursor:pointer;color:inherit;
  -webkit-tap-highlight-color:rgba(3,107,82,.12)}
.nearl button:hover,.nearl button:focus-visible{background:var(--gov-l2);outline:none}
.nearl button:active{background:var(--gov-l)}
.nearl button:after{content:"›";flex:0 0 auto;width:14px;text-align:center;
  color:var(--gov);font-size:17px;font-weight:700;line-height:1}
.nearl b{flex:0 0 auto;width:26px;height:26px;border-radius:50%;color:#fff;
  display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:800}
.nearl .nm{flex:1 1 auto;min-width:0;line-height:1.35;font-weight:600;
  word-break:keep-all;overflow-wrap:anywhere}
.nearl .nm i{display:block;font-style:normal;font-size:10.5px;color:var(--muted);font-weight:500}
.nearl .dm{flex:0 0 auto;font-size:12.5px;font-weight:800;color:var(--gov-d)}
.mark119{background:#fff;border:2px solid var(--stop);border-radius:13px;
  padding:11px 13px 10px;margin-bottom:12px;text-align:center}
.mark119 .k{font-size:11px;color:#a08080;font-weight:700}
.mark119 .no{font-size:26px;font-weight:800;letter-spacing:-.6px;color:var(--stop);
  line-height:1.25;margin:3px 0 4px;word-break:keep-all;overflow-wrap:anywhere}
.mark119 .k2{font-size:11px;color:#54423f;line-height:1.5}
.me-wrap{position:relative;width:44px;height:44px;
  transform-origin:50% 50%;
  pointer-events:none;
  transition:transform .15s linear}
.me-dot{position:absolute;left:50%;top:50%;
  display:block;box-sizing:border-box;
  width:18px;height:18px;margin:0;
  border-radius:50%;background:#1D4ED8;border:3px solid #fff;
  box-shadow:0 0 0 1px rgba(29,78,216,.55);
  transform:translate(-50%,-50%);
  z-index:2;pointer-events:auto}
.sos{margin:14px 14px 0;background:#FCEBEA;border:1px solid #F0C7C5;
  border-radius:var(--r);padding:16px 16px 15px}
.sos h3{margin:0 0 9px;font-size:14.5px;color:var(--stop);font-weight:800;
  display:flex;align-items:center;gap:8px}
.sos h3:before{content:"";flex:0 0 auto;width:4px;height:15px;border-radius:2px;
  background:var(--stop)}
.sos ol{margin:0;padding-left:20px;font-size:12.5px;line-height:1.75;color:#54423f}
.sos b{color:var(--stop)}
.sos .tel{display:flex;gap:9px;margin-top:13px;flex-wrap:wrap}
.sos .tel a{flex:1 1 130px;text-align:center;background:#fff;border:1px solid #EBBEBB;
  border-radius:13px;padding:12px;text-decoration:none;color:var(--stop);
  font-weight:800;font-size:15px}
.sos .tel a i{display:block;font-style:normal;font-size:10.5px;color:#a08080;font-weight:600}
footer{margin:20px 14px 0;padding-top:16px;border-top:1px solid var(--line);
  font-size:11px;color:#8b95a1;text-align:center;line-height:1.75}
footer b{color:var(--muted)}
.pending{padding:20px;text-align:center;color:var(--muted);font-size:13px}
.err{padding:15px 16px;background:#FCEBEA;color:var(--stop);font-size:12.5px;
  border:1px solid #F0C7C5;border-radius:var(--r);margin:14px}
.stale{margin:12px 14px 0;padding:11px 14px;border-radius:12px;background:#FEF6E7;
  border:1px solid #F5DFB8;color:#8A5200;font-size:11.5px;line-height:1.55}
#app{display:flex;flex-direction:column}
#app>.vp{display:none}
#app[data-vp="home"]>.vp-home, #app[data-vp="ctl"]>.vp-ctl,
#app[data-vp="wx"]>.vp-wx, #app[data-vp="sos"]>.vp-sos{display:block}
#app>.vtop{order:0} #app>#locbarw{order:1} #app>.vp{order:2} #app>.vbar{order:9}
#app[data-vp="home"]>.vp-home{order:0}
#app[data-vp="home"]>.vbar, #app[data-vp="home"]>.vtop{display:none}
#app[data-vp="wx"] #locbarw .hdb, #app[data-vp="wx"] #locbarw .hdi,
#app[data-vp="sos"] #locbarw .hdb, #app[data-vp="sos"] #locbarw .hdi{display:none}
@media screen{
  body.vready .util, body.vready header{display:none}
  body.vready{background:#E6EBE8}
  body.vready .wrap{background:#F3F5F3;box-shadow:none}
  .hero{position:relative;overflow:hidden;color:#fff;padding:40px 22px 26px;border-radius:0 0 28px 28px;
    background:linear-gradient(160deg,#0D3426 0%,#14553E 70%,#1B6B4E 100%)}
  .hero .eb{position:relative;z-index:1;font-size:11px;letter-spacing:3px;opacity:.75}
  .hero h1{position:relative;z-index:1;margin:8px 0 0;font-size:31px;font-weight:800;letter-spacing:-1.2px;line-height:1.22}
  .hero .h1s{position:relative;z-index:1;margin-top:8px;font-size:15px;font-weight:500;opacity:.9}
  .hero .mt{position:absolute;left:0;right:0;bottom:0;width:100%;height:110px;pointer-events:none}
  .stb{position:relative;z-index:1;display:flex;align-items:center;gap:14px;margin-top:20px;padding:16px;
    border-radius:20px;background:rgba(255,255,255,.97);color:var(--ink);box-shadow:0 10px 24px rgba(0,0,0,.18)}
  .stb .si{width:50px;height:50px;border-radius:50%;flex:none;display:flex;align-items:center;justify-content:center;color:#fff}
  .stb .si svg{width:28px;height:28px}
  .stb .stt{flex:1;min-width:0}
  .stb{overflow:hidden}
  .stb .si,.stb .stt{position:relative;z-index:1}
  .stb .smt{position:absolute;right:0;bottom:0;width:62%;height:100%;pointer-events:none;color:#13A86B;
    -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 45%);mask-image:linear-gradient(90deg,transparent 0,#000 45%)}
  .stb.pt .smt,.stb.cau .smt{color:#C77700} .stb.cl .smt{color:#D33A2C} .stb.unk .smt{color:#6B7785}
  .stb small{display:block;font-size:12px;color:#5A6660;font-weight:500}
  .stb b{display:block;font-size:24px;font-weight:800;letter-spacing:-.8px;line-height:1.2;margin-top:1px;word-break:keep-all}
  .stb i{display:block;font-style:normal;font-size:13px;color:#3B4741;margin-top:3px;line-height:1.45;word-break:keep-all}
  .stb.ok .si{background:#13A86B} .stb.ok b{color:#0E7A4F}
  .stb.pt .si{background:#E08A00} .stb.pt b{color:#B45F00}
  .stb.cl .si{background:#D33A2C} .stb.cl b{color:#C42B25}
  .stb.unk .si{background:#6B7785} .stb.unk b{color:#4A5562}
  .stb.cau .si{background:#B86A06} .stb.cau b{color:#8A4D06}
  .hcards{padding:20px 16px 0}
  .hm{display:flex;align-items:center;gap:13px;width:100%;margin:0 0 12px;padding:18px 16px;border:0;border-radius:22px;
    background:#fff;box-shadow:0 12px 30px rgba(16,40,30,.10),0 1px 2px rgba(16,40,30,.06);
    font:inherit;color:var(--ink);text-align:left;cursor:pointer;-webkit-tap-highlight-color:transparent}
  .hm:active{transform:scale(.985)}
  .hm:focus-visible{outline:3px solid var(--acc);outline-offset:2px}
  .hm .no{font-weight:300;font-size:15px;color:#8EA79A;letter-spacing:1px;width:24px;flex:none}
  .hm .ci{width:52px;height:52px;border-radius:16px;display:flex;align-items:center;justify-content:center;flex:none}
  .hm .ci svg{width:26px;height:26px}
  .hm .ci.g{background:#E3F2EA;color:#11734E} .hm .ci.b{background:#E6EEFB;color:#2457C5} .hm .ci.r{background:#FDE8E7;color:#C42B25}
  .hm .tx{flex:1;min-width:0}
  .hm .tx b{display:block;font-size:20px;font-weight:800;letter-spacing:-.6px}
  .hm .tx i{display:block;font-style:normal;font-size:13px;color:#5A6660;margin-top:3px;word-break:keep-all;line-height:1.45}
  .hm .tx i.ok{color:#11734E;font-weight:700} .hm .tx i.pt{color:#B45F00;font-weight:700}
  .hm .tx i.cl{color:#C42B25;font-weight:700} .hm .tx i.unk{color:#4A5562;font-weight:700}
  .hm .tx i.cau{color:#8A4D06;font-weight:700}
  .hm .ar{width:20px;height:20px;color:#A7B1AC;flex:none}
  .hm .ar svg{width:20px;height:20px}
  .vtop{position:sticky;top:0;z-index:1100;display:flex;align-items:center;gap:10px;padding:12px 16px;
    background:rgba(255,255,255,.96);border-bottom:1px solid #E6EAE8;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
  .vtop .vbk{width:38px;height:38px;border-radius:12px;background:#F1F4F2;border:0;display:flex;align-items:center;
    justify-content:center;cursor:pointer;color:var(--ink);padding:0}
  .vtop .vbk svg{width:20px;height:20px}
  .vtop h2{margin:0;font-size:18px;font-weight:800;letter-spacing:-.4px}
  #vtopt:focus{outline:none}
  #app>.vp .card{margin:14px 16px 0;border:0;border-radius:22px;box-shadow:0 8px 22px rgba(16,40,30,.07)}
  #app>.vp .card>h3{background:#fff;border-bottom:1px solid #EEF1EF}
  #app>.vp .card>h3:before{background:#11734E}
  #app>#locbarw .locbar{margin:12px 16px 0;border-radius:16px;background:#fff;border:1px solid #E3E8E5;border-left:1px solid #E3E8E5}
  #app>#locbarw .locbar .lb{border-radius:20px}
  #app>.vp .verdict{margin:16px 16px 0;border:0;border-radius:22px;color:#fff;
    background:linear-gradient(135deg,#0F4A35,#17694C);box-shadow:0 10px 26px rgba(16,74,53,.25)}
  #app>.vp .verdict.l1{background:linear-gradient(135deg,#8A4D06,#B86A06);box-shadow:0 10px 26px rgba(138,77,6,.25)}
  #app>.vp .verdict.l2{background:linear-gradient(135deg,#A2400C,#C9561A);box-shadow:0 10px 26px rgba(162,64,12,.25)}
  #app>.vp .verdict.l3{background:linear-gradient(135deg,#9E1F1A,#C42B25);box-shadow:0 10px 26px rgba(158,31,26,.28)}
  #app>.vp .verdict .lvl{background:rgba(255,255,255,.18);color:#fff}
  #app>.vp .verdict h2{color:#fff}
  #app>.vp .verdict p{color:rgba(255,255,255,.9)}
  .vp-sos .sos{margin:16px 16px 0;background:none;border:0;padding:0}
  .vp-sos .sos>h3{margin:0 2px 10px;font-size:15px}
  .vp-sos .mark119{border:0;border-radius:22px;padding:18px;color:#fff;
    background:linear-gradient(135deg,#B3241F,#D6453B);box-shadow:0 12px 28px rgba(179,36,31,.28)}
  .vp-sos .mark119 .k, .vp-sos .mark119 .k2{color:rgba(255,255,255,.92)}
  .vp-sos .mark119 .no{color:#fff;font-size:27px}
  .vp-sos .mark119 b{color:#fff}
  .vp-sos .sos ol{list-style:none;counter-reset:s;margin:14px 0 0;padding:6px 16px;background:#fff;
    border-radius:22px;box-shadow:0 8px 22px rgba(16,40,30,.06);font-size:14px;line-height:1.55;color:#2B3530}
  .vp-sos .sos ol li{counter-increment:s;position:relative;padding:11px 0 11px 34px;border-bottom:1px solid #EEF1EF}
  .vp-sos .sos ol li:last-child{border-bottom:0}
  .vp-sos .sos ol li:before{content:"0" counter(s);position:absolute;left:0;top:11px;color:#B3241F;
    font-weight:300;font-size:14px;letter-spacing:1px}
  .vp-sos .sos .tel{margin-top:14px;gap:10px}
  .vp-sos .sos .tel a{border:0;border-radius:18px;padding:15px 10px;background:#fff;color:#16201B;
    box-shadow:0 8px 22px rgba(16,40,30,.08)}
  .vp-sos .sos .tel a:first-child{background:#C42B25;color:#fff;font-size:20px}
  .vp-sos .sos .tel a:first-child i{color:rgba(255,255,255,.85)}
  .hero{padding:20px 18px 16px;border-radius:0 0 24px 24px}
  .hero .eb{font-size:10px;letter-spacing:2.6px}
  .hero h1{margin-top:5px;font-size:24px;letter-spacing:-.9px;line-height:1.25}
  .hero .h1s{margin-top:3px;font-size:13.5px}
  .hero .mt{height:70px}
  .stb{margin-top:13px;padding:11px 13px;gap:12px;border-radius:18px}
  .stb .si{width:42px;height:42px} .stb .si svg{width:24px;height:24px}
  .stb small{font-size:11px}
  .stb b{font-size:21px}
  .stb i{font-size:12.5px;margin-top:1px;line-height:1.4}
  .hcards{padding:12px 14px 0}
  .hm{margin:0 0 9px;padding:12px 14px;gap:11px;border-radius:18px}
  .hm .no{font-size:13px;width:20px}
  .hm .ci{width:44px;height:44px;border-radius:14px} .hm .ci svg{width:23px;height:23px}
  .hm .tx b{font-size:18px}
  .hm .tx i{font-size:12.5px;margin-top:1px;line-height:1.35}
  .hm .ar, .hm .ar svg{width:18px;height:18px}
  #app[data-vp="home"]>#locbarw .locbar{margin:3px 14px 0;padding:8px 12px;gap:8px;flex-wrap:wrap}
  #app[data-vp="home"]>#locbarw .locbar .tx{flex:1 1 150px;font-size:12px;line-height:1.4}
  #app[data-vp="home"]>#locbarw .locbar .tx i{font-size:10.5px;margin-top:1px}
  #app[data-vp="home"]>#locbarw .locbar .lb{width:auto;padding:8px 12px;font-size:12.5px}
  :root{--vhh:100vh}
  @supports (height:100svh){ :root{--vhh:100svh} }
  #app[data-vp="home"]{--ex:max(0px, calc(var(--vhh) - 640px))}
  #app[data-vp="home"] .hero{padding-top:min(48px, calc(20px + var(--ex) * .12));
    padding-bottom:min(30px, calc(16px + var(--ex) * .06))}
  #app[data-vp="home"] .hero h1{font-size:min(29px, calc(24px + var(--ex) * .03))}
  #app[data-vp="home"] .hero .h1s{font-size:min(15px, calc(13.5px + var(--ex) * .01))}
  #app[data-vp="home"] .stb{margin-top:min(22px, calc(13px + var(--ex) * .05));
    padding-top:min(18px, calc(11px + var(--ex) * .04)); padding-bottom:min(18px, calc(11px + var(--ex) * .04))}
  #app[data-vp="home"] .stb b{font-size:min(25px, calc(21px + var(--ex) * .025))}
  #app[data-vp="home"] .hcards{padding-top:min(22px, calc(12px + var(--ex) * .05))}
  #app[data-vp="home"] .hm{padding-top:min(24px, calc(12px + var(--ex) * .05)); padding-bottom:min(24px, calc(12px + var(--ex) * .05));
    margin-bottom:min(14px, calc(9px + var(--ex) * .03))}
  #app[data-vp="home"] .hm .ci{width:min(54px, calc(44px + var(--ex) * .06)); height:min(54px, calc(44px + var(--ex) * .06))}
  #app[data-vp="home"] .hm .tx b{font-size:min(20.5px, calc(18px + var(--ex) * .015))}
  #app[data-vp="home"] .hm .tx i{font-size:min(14px, calc(12.5px + var(--ex) * .01))}
  body.vready .wrap{display:flex;flex-direction:column;min-height:var(--vhh)}
  body.vready #app{flex:1 0 auto}
  .vbar{position:sticky;bottom:0;z-index:1200;margin-top:20px;padding:12px 16px calc(12px + env(safe-area-inset-bottom));
    background:rgba(243,245,243,.92);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-top:1px solid rgba(0,0,0,.05)}
  .vbar button{width:100%;height:54px;border:0;border-radius:18px;background:#11734E;color:#fff;font:inherit;font-size:16.5px;
    font-weight:800;display:flex;align-items:center;justify-content:center;gap:8px;cursor:pointer;
    box-shadow:0 8px 20px rgba(17,115,78,.3)}
  .vbar button svg{width:18px;height:18px}
  .vbar button:focus-visible{outline:3px solid var(--acc);outline-offset:2px}
}
.totop{position:fixed;right:16px;bottom:calc(92px + env(safe-area-inset-bottom));z-index:1250;width:50px;height:50px;border-radius:50%;border:0;
  display:flex;align-items:center;justify-content:center;background:#11734E;color:#fff;cursor:pointer;
  box-shadow:0 8px 20px rgba(17,115,78,.35);opacity:0;pointer-events:none;transform:translateY(8px);transition:opacity .2s,transform .2s}
.totop.on{opacity:1;pointer-events:auto;transform:none}
.totop:focus-visible{outline:3px solid #1D4ED8;outline-offset:2px}
.totip{position:fixed;right:76px;max-width:calc(100% - 92px);bottom:calc(92px + env(safe-area-inset-bottom));z-index:1250;padding:11px 14px;border-radius:14px;background:rgba(20,32,26,.92);
  color:#fff;font-size:13.5px;line-height:1.45;font-weight:600;opacity:0;pointer-events:none;transition:opacity .25s}
.totip.on{opacity:1}
.prtonly{display:none}
/* ── 새 페이지에서 더한 것 (v1) ── */
/* 늘 보이는 전화 띠 — 자료·스크립트와 상관없이 HTML 에 박혀 있다(R3) */
.telfix{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin:0 0 8px}
.telfix a{display:inline-flex;align-items:center;gap:5px;padding:8px 14px;border-radius:14px;
  text-decoration:none;font-weight:800;font-size:13.5px;background:#fff;color:var(--stop);border:1px solid #EBBEBB}
.telfix a:first-child{background:#C42B25;color:#fff;border-color:#C42B25}
.telfix a i{font-style:normal;font-weight:600;font-size:11px;opacity:.85}
/* 시험 자료로 보고 있을 때 맨 위 띠 */
.fixbar{background:#1D4ED8;color:#fff;font-size:12px;font-weight:700;text-align:center;padding:6px 10px}
/* 날씨가 오래됐을 때 */
.wxold{margin:12px 0 0}
.wxwhen b{font-weight:800}