/* SafePic — palette shared with 5-jihwan.github.io */
/* 경기천년제목 (경기도 제공, 무료 배포) — 제목·UI 라벨용. 본문은 가독성을 위해 Pretendard 유지, 숫자·코드만 DM Mono */
@font-face{font-family:"GyeonggiTitle";src:url("../fonts/GyeonggiTitle-Medium.woff2") format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"GyeonggiTitle";src:url("../fonts/GyeonggiTitle-Bold.woff2") format("woff2");font-weight:700;font-display:swap}
:root{
  --ink:#14202e; --text:#2b3a4d; --mute:#566577; --line:#dbe3ee; --bg:#f7f9fc; --bg2:#eef2f8; --card:#fff;
  --accent:#1a5fc4; --accent2:#0f4a9e; --gold:#9a7328; --teal:#0f9d7a; --rose:#c2447e; --warn:#d9a400; --danger:#c8432b;
  --panel-w:clamp(340px, 32vw, 520px); --top-h:60px; --fs:16.5px; --tap:36px;
  --font:"Pretendard","Apple SD Gothic Neo","Malgun Gothic",system-ui,sans-serif; --mono:"DM Mono","Pretendard","Apple SD Gothic Neo","Malgun Gothic",ui-monospace,Menlo,monospace; --display:"GyeonggiTitle",var(--font); --label:"GyeonggiTitle",var(--font);
}
*{box-sizing:border-box} html,body{height:100%;margin:0} [hidden]{display:none!important}
body{font-family:var(--font);color:var(--text);background:var(--bg2);font-size:var(--fs);line-height:1.55;-webkit-font-smoothing:antialiased;overflow:hidden}
a{color:var(--accent)} button{font:inherit;cursor:pointer;color:inherit} small{font-size:.85em}
.muted{color:var(--mute)} .fine{font-size:.84rem;color:var(--mute)} .mono{font-family:var(--mono);font-size:.86em;letter-spacing:.01em}
h1,h2,h3{color:var(--ink)}

/* header */
.top{position:fixed;inset:0 0 auto 0;height:var(--top-h);display:flex;align-items:center;gap:14px;padding:0 14px;background:#fff;border-bottom:1px solid var(--line);z-index:30}
.icon-btn{width:38px;height:38px;border-radius:10px;border:1px solid var(--line);background:#fff;display:grid;place-items:center}
.icon-btn:hover{background:var(--bg)}
.bars{width:18px;height:2px;background:var(--ink);position:relative;display:block}
.bars::before,.bars::after{content:"";position:absolute;left:0;width:18px;height:2px;background:var(--ink)} .bars::before{top:-6px} .bars::after{top:6px}
.brand{display:flex;align-items:baseline;gap:8px;text-decoration:none;color:var(--ink);white-space:nowrap}
.brand-mark{width:20px;height:20px;display:inline-block;align-self:center;background:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'><rect width='512' height='512' rx='112' fill='%231a5fc4'/><g transform='translate(72 72) scale(0.7200)'><path d='M256 40 96 104v152c0 108 68 176 160 216 92-40 160-108 160-216V104z' fill='%23fff'/><circle cx='256' cy='176' r='30' fill='%231a5fc4'/><rect x='228' y='228' width='56' height='150' rx='16' fill='%231a5fc4'/></g></svg>") center/contain no-repeat}
.brand-name{font-family:var(--display);font-weight:700;font-size:1.25rem;letter-spacing:-.01em}
.brand-sub{font-size:.8rem;color:var(--mute)}
.crumb{display:flex;align-items:center;gap:2px;flex:1;min-width:0;overflow:hidden;font-family:var(--label);font-weight:500;font-size:.95rem}
.crumb-item{background:none;border:0;color:var(--mute);padding:6px 8px;border-radius:8px;white-space:nowrap}
.crumb-item:hover{background:var(--bg)} .crumb-item.is-last{color:var(--ink);font-weight:500}
.crumb-sep{opacity:.4}
.tabs{display:flex;gap:2px;background:var(--bg);padding:3px;border-radius:12px}
.tab{background:none;border:0;color:var(--mute);padding:7px 12px;border-radius:9px;white-space:nowrap;font-size:.92rem;display:flex;gap:6px;align-items:center}
.tab-start{color:var(--ink);border:1px solid var(--line);margin-right:4px;gap:5px} .tab-start:hover{background:var(--bg)}
.tab i{font-style:normal;font-family:var(--mono);font-size:.75rem;color:var(--gold)}
.tab span{font-family:var(--label);font-weight:500} .tab.is-active span{font-weight:700}
.tab:hover{color:var(--ink)} .tab.is-active{background:#fff;color:var(--ink);font-weight:700;box-shadow:0 1px 4px rgba(20,32,46,.08)}
.tab-about{opacity:.85}

/* stage: sidebar LEFT + map */
.stage{position:fixed;inset:var(--top-h) 0 0 0}
/* 패널 아래 지면에 드리운 넓은 그늘 — 섬이 지도 위에 떠 있다는 인상은 물체 그림자보다 지면 쪽 어둠이 만든다 */
.stage::before{content:"";position:absolute;left:0;top:0;bottom:0;width:calc(var(--panel-w) + 56px);background:linear-gradient(90deg,rgba(20,32,46,.13),rgba(20,32,46,.055) 72%,rgba(20,32,46,0));pointer-events:none;z-index:9;transition:opacity .25s ease}
.stage:has(.panel.is-collapsed)::before{opacity:0}
/* 떠 있는 층(라퓨타): 가까운 접촉 그림자 + 멀리 떨어진 부드러운 드리운 그림자 + 윗면 림라이트.
   그림자 하나(0 12px 40px)로는 "그림자만 있고 공간이 안 분리된다"(09-03 피드백) — 높이 차는 근·원 두 겹이 만든다 */
:root{--float-sh:inset 0 1px 0 rgba(255,255,255,.95),0 0 0 1px rgba(20,32,46,.05),0 2px 4px rgba(20,32,46,.06),4px 14px 30px -8px rgba(20,32,46,.16),14px 44px 64px -26px rgba(20,32,46,.40);
      --float-sm:inset 0 1px 0 rgba(255,255,255,.9),0 0 0 1px rgba(20,32,46,.05),0 2px 4px rgba(20,32,46,.06),3px 12px 24px -8px rgba(20,32,46,.24)}
.panel{position:absolute;left:16px;top:16px;bottom:16px;width:var(--panel-w);background:linear-gradient(180deg,rgba(255,255,255,.985),rgba(255,255,255,.955));backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid rgba(219,227,238,.95);border-bottom-color:#c9d3e1;border-radius:18px;box-shadow:var(--float-sh);display:flex;flex-direction:column;z-index:10;transition:transform .25s ease,opacity .25s ease}
.panel.is-collapsed{transform:translateX(calc(-100% - 24px));opacity:0;pointer-events:none}
.panel-grip{display:none} .sheet-toggle{display:none}
.panel-resize{position:absolute;top:0;right:-4px;width:8px;height:100%;cursor:col-resize;z-index:12}
.panel-resize::after{content:"";position:absolute;top:50%;left:3px;width:2px;height:44px;margin-top:-22px;border-radius:2px;background:var(--line);transition:background .15s}
.panel-resize:hover::after,body.is-resizing .panel-resize::after{background:var(--accent)}
body.is-resizing{cursor:col-resize;user-select:none} body.is-resizing .map{pointer-events:none}
.panel-scroll{overflow:auto;padding:22px 22px 40px;flex:1;border-radius:18px}
.view{display:none} .view.is-active{display:block}
.h1{font-family:var(--display);font-size:1.45rem;line-height:1.2;margin:0 0 14px;letter-spacing:-.01em}
.h2{font-family:var(--display);font-size:1.9rem;margin:0;line-height:1.1} .eyebrow{font-size:.82rem;color:var(--mute);font-family:var(--label)}
.lead{display:none}
h3{font-family:var(--label);font-weight:700;font-size:1.05rem;margin:22px 0 8px;padding-left:10px;border-left:3px solid var(--gold)}

.mapwrap{position:absolute;inset:0}
.map{position:absolute;inset:0;background:radial-gradient(ellipse at 50% 45%,#ffffff 0%,#e6ecf5 75%)}
.map-hint{position:absolute;left:50%;bottom:22px;transform:translateX(-50%);color:var(--ink);background:#fff;border:1px solid var(--line);box-shadow:0 4px 14px rgba(20,32,46,.08);padding:8px 14px;border-radius:999px;font-size:.9rem;pointer-events:none;transition:opacity .4s;white-space:nowrap;max-width:90%;overflow:hidden;text-overflow:ellipsis}
.map-hint.is-hidden{opacity:0}
.search{position:absolute;top:16px;left:calc(var(--panel-w) + 32px);width:min(360px,calc(100% - var(--panel-w) - 48px));z-index:5;transition:left .25s}
.panel.is-collapsed~.mapwrap .search{left:16px;width:min(360px,calc(100% - 32px))}
.search input{width:100%;height:44px;border-radius:12px;border:1px solid var(--line);background:#fff;color:var(--ink);padding:0 48px 0 40px;font-size:1rem;outline:none;box-shadow:var(--float-sm);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23566577' stroke-width='2'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:13px 50%}
.search input:focus{border-color:var(--accent)} .search input::placeholder{color:var(--mute)}
.search-list{list-style:none;margin:6px 0 0;padding:6px;background:#fff;border-radius:12px;box-shadow:0 10px 30px rgba(20,32,46,.16);max-height:320px;overflow:auto}
.search-list li{padding:8px 10px;border-radius:8px;cursor:pointer;display:flex;justify-content:space-between;gap:10px}
.search-list li:hover,.search-list li.is-hot{background:var(--bg)} .search-list li small{color:var(--mute);font-family:var(--mono)}

/* weather selector (over map, top-right) */
.wxsel{position:relative;display:flex;align-items:center;gap:4px;background:#fff;border:1px solid var(--line);border-radius:12px;padding:6px 8px;box-shadow:var(--float-sm)}
.wxsel label{display:none} .wxsel.is-open label{display:inline-block} .wxsel.is-open{flex-wrap:wrap}
.wxsel-t{cursor:pointer;padding:4px 6px;border:0;background:none;border-radius:8px;color:var(--ink);margin-right:4px;font-size:.85rem;font-family:var(--label);font-weight:500} .wxsel-t:hover{background:var(--bg)} .wxsel-t::after{content:' \25BE';color:var(--mute)}
.wxsel label{position:relative} .wxsel input{position:absolute;opacity:0;inset:0;pointer-events:none}
.wxsel span{display:inline-block;padding:4px 10px;border-radius:999px;font-size:.82rem;color:var(--mute);border:1px solid transparent;cursor:pointer;user-select:none}
.wxsel input:checked+span{background:var(--bg);color:var(--ink);border-color:var(--line);font-weight:600}
.tip{position:absolute;pointer-events:none;background:#fff;border:1px solid var(--line);border-radius:8px;padding:4px 10px;font-size:.85rem;font-weight:700;color:var(--ink);box-shadow:0 4px 12px rgba(20,32,46,.12);transform:translate(12px,12px);z-index:6;white-space:nowrap}
.tip small{font-weight:400;color:var(--mute);margin-left:6px}

/* cards / blocks */
.cards{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:16px}
.card,.wcard{display:flex;flex-direction:column;align-items:flex-start;gap:2px;text-align:left;padding:14px 14px 12px;min-height:96px;border-radius:14px;border:1px solid var(--line);background:#fff;transition:transform .12s,box-shadow .12s,border-color .12s}
.card:hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(20,32,46,.08);border-color:var(--accent)}
.card.is-hot{border-color:var(--gold);box-shadow:0 0 0 3px rgba(154,115,40,.18)}
.card-ic{font-size:1.6rem;margin-bottom:4px} .card b,.wcard b{font-size:1.02rem;color:var(--ink);line-height:1.25} .card small,.wcard small{color:var(--mute);font-size:.78rem}
.region-head{display:flex;justify-content:space-between;align-items:flex-end;gap:10px;margin-bottom:12px}
.level-guide{display:flex;gap:6px;margin:0 0 12px}
.level-guide span{flex:1;text-align:center;padding:5px 4px;border-radius:8px;background:var(--bg);font-size:.8rem;color:var(--mute);font-family:var(--label);font-weight:500}
.level-guide span.on{background:var(--ink);color:#fff}
.wx-card,.warn-card,.kv,.note,.pending,.result-block{background:var(--bg);border:1px solid var(--line);border-radius:14px;padding:14px 16px;margin-bottom:12px}
.wx-card{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:10px}
.wx-card:empty{display:none}
.wx-item{background:#fff;border:1px solid var(--line);border-radius:10px;padding:8px 10px}
.wx-item .k{font-size:.75rem;color:var(--mute);font-family:var(--mono)} .wx-item .v{font-size:1.45rem;font-weight:700;color:var(--ink);font-family:var(--mono)} .wx-item .v small{font-size:.7rem;font-weight:400;color:var(--mute)}
.wx-item.g-good .v{color:var(--teal)} .wx-item.g-mod .v{color:var(--gold)} .wx-item.g-bad .v{color:var(--rose)} .wx-item.g-vbad .v{color:var(--danger)}
.wx-src{grid-column:1/-1;font-size:.78rem;color:var(--mute);font-family:var(--mono)}
.wx-empty{grid-column:1/-1;color:var(--mute);font-size:.92rem}
.warn-card:empty{display:none}
.warn-item{display:flex;gap:10px;align-items:flex-start;padding:6px 0}
.warn-item+.warn-item{border-top:1px dashed var(--line)}
.warn-level{flex:none;padding:2px 9px;border-radius:999px;font-weight:800;font-size:.8rem;background:var(--danger);color:#fff}
.warn-level.adv{background:var(--warn);color:#2a2200}
.warn-level.pre{background:#eef3fb;color:var(--accent);border:1px solid var(--line)}
.pre-text{white-space:pre-line;font-size:.86rem;line-height:1.5}
.kv{display:grid;grid-template-columns:1fr 1fr;gap:8px 14px;font-size:.92rem}
.kv div{display:flex;justify-content:space-between;gap:8px;border-bottom:1px dashed var(--line);padding:4px 0}
.kv span:last-child{font-weight:600;color:var(--ink);font-family:var(--mono);font-size:.88em}
.children{display:flex;flex-wrap:wrap;gap:6px}
.children button{border:1px solid var(--line);background:#fff;border-radius:999px;padding:6px 12px;font-size:.9rem}
.children button:hover{border-color:var(--accent);color:var(--accent)}

.btn{border:0;border-radius:12px;padding:10px 16px;font-weight:700;white-space:nowrap}
.btn-primary{background:var(--accent);color:#fff} .btn-primary:hover{background:var(--accent2)}
.btn-ghost{background:transparent;color:var(--mute);border:1px solid var(--line)} .btn-lg{padding:14px 22px;font-size:1.05rem}
.actions{display:flex;gap:10px;align-items:center;margin-top:10px}

/* wizard */
.q{border:0;padding:0;margin:0 0 18px}
.q legend{font-weight:800;font-size:1rem;margin-bottom:8px;padding:0;color:var(--ink)}
.q legend small{font-weight:500;color:var(--mute)}
.opts{display:flex;flex-wrap:wrap;gap:8px}
.opts label{position:relative}
.opts input{position:absolute;opacity:0;inset:0;pointer-events:none}
.opts span{display:inline-block;padding:10px 14px 9px;line-height:1.25;border-radius:999px;border:1px solid var(--line);background:#fff;cursor:pointer;user-select:none}
.opts input:checked+span{background:var(--accent);color:#fff;border-color:var(--accent)}
.opts input:focus-visible+span{outline:3px solid rgba(26,95,196,.35)}
.q-loc{padding:10px 12px;border-radius:10px;background:var(--bg);border:1px solid var(--line);margin-bottom:8px;display:flex;justify-content:space-between;align-items:center;gap:8px;min-height:46px}
.q-loc b{font-size:1rem;color:var(--ink)}
.chk{display:block;font-size:.95rem;margin:6px 0} .chk small{color:var(--mute);display:block;margin-left:24px}
.proxy{margin:6px 0 14px;padding:10px 12px;background:var(--bg);border:1px solid var(--line);border-radius:10px}
input[type=date]{font:inherit;padding:9px 12px;border:1px solid var(--line);border-radius:10px;background:#fff}

/* result */
.result-head{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;margin-bottom:10px}
.result h2{font-family:var(--display);font-size:1.45rem;margin:0} .result h3{font-size:.95rem;margin:0 0 10px}
.todo{counter-reset:t;list-style:none;padding:0;margin:0}
.todo li{counter-increment:t;display:flex;gap:12px;padding:10px 0;border-top:1px dashed var(--line)}
.todo li:first-child{border-top:0}
.todo li::before{content:counter(t);flex:none;width:28px;height:28px;border-radius:50%;background:var(--accent);color:#fff;font-weight:700;font-family:var(--mono);display:grid;place-items:center}
.todo b{display:block;color:var(--ink);font-weight:600}
.total{font-size:2.2rem;font-weight:700;letter-spacing:-.02em;color:var(--ink);font-family:var(--mono)}
.total small{font-size:.85rem;font-weight:400;color:var(--mute);margin-left:6px;font-family:var(--font)}
.item{padding:10px 0;border-top:1px dashed var(--line)}
.item:first-of-type{border-top:0}
.item-row{display:flex;justify-content:space-between;gap:10px;align-items:baseline}
.item-row b{font-size:.98rem;color:var(--ink)} .item-amt{font-weight:500;font-family:var(--mono);color:var(--accent2);text-align:right;word-break:keep-all;max-width:60%;flex:0 1 auto}
.item-sum{font-size:.88rem;color:var(--text)}
.item-basis{font-size:.78rem;color:var(--mute);margin-top:4px}
.badge{display:inline-block;font-size:.7rem;padding:1px 7px;border-radius:999px;background:var(--bg2);color:var(--mute);margin-left:6px;vertical-align:middle;font-family:var(--mono)}
.badge.est{background:#fbf3e4;color:var(--gold)} .badge.sz{background:#e7f5f0;color:var(--teal)}
.deadline{display:flex;align-items:center;gap:12px;background:#fff;border:1px solid var(--gold);border-radius:12px;padding:12px 14px;margin-bottom:12px}
.deadline .d{font-size:1.6rem;font-weight:700;color:var(--gold);white-space:nowrap;font-family:var(--mono)}
.deadline.over{border-color:var(--danger)} .deadline.over .d{color:var(--danger)}
.timeline{list-style:none;padding:0;margin:0}
.timeline li{position:relative;padding:0 0 12px 22px;font-size:.95rem}
.timeline li::before{content:"";position:absolute;left:6px;top:8px;width:8px;height:8px;border-radius:50%;background:var(--accent)}
.timeline li::after{content:"";position:absolute;left:9.5px;top:18px;bottom:0;width:1px;background:var(--line)}
.timeline li:last-child::after{display:none}
.timeline b{color:var(--ink)} .timeline small{display:block;color:var(--mute)}
.disclaimer{font-size:.8rem;color:var(--mute);border-top:1px solid var(--line);padding-top:10px}
.share-row{display:flex;gap:8px;flex-wrap:wrap;margin:12px 0;align-items:center}
.share-row .btn{padding:8px 12px;font-size:.9rem;text-decoration:none}
.copied{color:var(--teal);font-size:.85rem}

.pending{background:#fff;border-color:var(--gold)} .pending b{color:var(--ink)}
.formula{margin-top:8px;font-size:.92rem}
.formula summary{cursor:pointer;font-weight:700;color:var(--ink)}
.rules-table table{width:100%;border-collapse:collapse;font-size:.8rem;background:#fff}
.rules-table th,.rules-table td{text-align:left;padding:6px 8px;border-bottom:1px solid var(--line);vertical-align:top}
.rules-table th{position:sticky;top:0;background:#fff;font-family:var(--mono);font-weight:500;color:var(--mute)}

.maplibregl-ctrl-attrib{font-size:10px}
.maplibregl-ctrl-group{box-shadow:var(--float-sm)!important;border:1px solid var(--line)}

/* mobile: bottom sheet + compact header (≤900px) */
@media (max-width:900px), (max-width:1200px) and (orientation:portrait){
  :root{--panel-w:100%;--top-h:52px}
  html,body{height:100dvh}
  .top{gap:6px;padding:0 8px;overflow:hidden}
  .icon-btn{width:34px;height:34px;flex:none}
  .brand-sub{display:none} .brand-name{font-size:1.05rem} .crumb{display:none}
  /* 스크롤 절단면에서 글자가 반 토막으로 보이던 것("지원 ㅊ") → 가장자리 페이드로 "더 있음"으로 읽히게 */
  .tabs{margin-left:auto;overflow-x:auto;scrollbar-width:none;flex:0 1 auto;min-width:0;-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 16px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 16px),transparent)} .tabs::-webkit-scrollbar{display:none}
  .tab{padding:6px 9px;font-size:.8rem;flex:none} .tab i{display:none} .tab-about{display:none} .tab-start span{display:none} .tab-start{padding:6px 8px}
  .stage{inset:var(--top-h) 0 0 0} .stage::before{display:none}
  .mapwrap{position:absolute;inset:0}
  /* floating controls: search full-width on top, pills beneath on the right */
  .search{left:10px!important;right:10px;top:10px;width:auto!important;transition:none}
  .search input{height:42px}
  .map-hint{bottom:calc(var(--sheet-h, 50dvh) + 2dvh + 10px);font-size:.8rem;max-width:92%}
  /* 폰: 3D와 +/-를 두 줄 쌓기 대신 한 줄로 — 세로 자리를 아끼고 버튼 사이 여백 확보 */
  .maplibregl-ctrl-bottom-right{bottom:calc(var(--sheet-h, 50dvh) + 10px);right:8px;display:flex;flex-direction:row;align-items:center;justify-content:flex-end} .maplibregl-ctrl-group{display:flex;flex-direction:row} .maplibregl-ctrl-group button{width:44px;height:44px} .maplibregl-ctrl-group button+button{border-top:0;border-left:1px solid #ddd} .maplibregl-ctrl-compass{display:none!important} .maplibregl-ctrl-attrib{display:none}
  .maplibregl-ctrl-bottom-right .maplibregl-ctrl{margin:0 0 0 10px}
  /* bottom sheet */
  .panel{left:0;right:0;bottom:0;top:auto;width:100%;height:50dvh;border-radius:18px 18px 0 0;border-left:0;border-right:0;border-bottom:0;box-shadow:0 -8px 30px rgba(20,32,46,.14);transition:height .25s;transform:none!important;opacity:1!important;pointer-events:auto!important}
  .panel.is-collapsed{height:calc(64px + env(safe-area-inset-bottom))!important} .panel.is-collapsed .panel-scroll{overflow:hidden}
  .panel.is-tall{height:calc(100dvh - var(--top-h) - 8px)!important}
  html,body{overscroll-behavior:none}
  .panel{touch-action:pan-y}
  .panel-grip{display:block;width:100%;height:34px;margin:0;flex:none;position:relative;cursor:grab;touch-action:none}
  .sheet-toggle{display:flex}
  .maplibregl-ctrl-bottom-right,.map-hint,.map-legend{transition:bottom .25s}
  .panel-grip::before{content:"";position:absolute;left:50%;top:12px;width:44px;height:5px;margin-left:-22px;border-radius:3px;background:#c9d2e0}
  .panel-resize{display:none}
  .sheet-toggle{position:absolute;right:8px;top:2px;width:34px;height:30px;border:1px solid var(--line);border-radius:999px;background:#fff;color:var(--mute);align-items:center;justify-content:center;padding:0;font-size:1.05rem;line-height:1;touch-action:manipulation} .sheet-toggle-ic{display:block;transform:translateY(-3px);transition:transform .2s} .panel.is-collapsed .sheet-toggle-ic{transform:translateY(2px) rotate(180deg)}
  /* overscroll none(≠contain): 맨 위 당김에 대한 브라우저 자체 동작(글로우·새로고침)을 완전 제거 —
     시트 드래그 JS가 제스처를 온전히 가진다(contain은 글로우가 남아 터치를 뺏길 수 있음) */
  .panel-scroll{padding:4px 14px calc(24px + env(safe-area-inset-bottom));-webkit-overflow-scrolling:touch;overscroll-behavior:none}
  .h1{font-size:1.25rem;margin-bottom:10px} .h2{font-size:1.5rem}
  .cards{gap:8px} .card{min-height:84px;padding:12px 12px 10px} .card-ic{font-size:1.35rem} .card b{font-size:.95rem} .card small{display:none}
  .region-head{flex-direction:column;align-items:stretch;gap:8px} .region-head .btn{width:100%;text-align:center}
  .wx-card{grid-template-columns:repeat(3,1fr);gap:8px} .wx-item .v{font-size:1.25rem}
  .kv{grid-template-columns:1fr}
  .opts span{padding:9px 12px;font-size:.95rem}
  .actions{position:sticky;bottom:calc(-24px - env(safe-area-inset-bottom));background:rgba(255,255,255,.95);padding:10px 14px calc(10px + env(safe-area-inset-bottom));margin:0 -14px;border-top:1px solid var(--line)}
  .actions .btn-lg{flex:1;padding:12px 14px}
  .total{font-size:1.8rem}
  .share-row .btn{flex:1;text-align:center}
  .tip{display:none}
  input,select,textarea{font-size:16px}
}
/* 시트 모드(모바일·세로 태블릿)와 '터치 기기의 낮은 가로 화면'에만 적용.
   (max-height:500px) 단독이면 줌한 데스크톱까지 걸려 컨트롤이 pill 뒤로 숨는다 — pointer:coarse 필수 */
@media (max-width:900px), (max-height:500px) and (pointer:coarse){
  .panel{height:60dvh} .maplibregl-ctrl-bottom-right{bottom:calc(var(--sheet-h, 60dvh) + 10px)} .map-hint{bottom:calc(var(--sheet-h, 60dvh) + 2dvh + 10px)} .map-legend{bottom:calc(var(--sheet-h, 60dvh) + 14px)}
}
@media print{
  @page{margin:14mm}
  .top,.mapwrap,.wizard,.share-row,.panel-grip,.panel-resize,#btnEdit,.ics,.install,.coach{display:none!important}
  body{background:#fff;overflow:visible;font-size:13pt;color:#000} .stage,.panel{position:static;width:auto;height:auto;box-shadow:none;border:0;display:block;background:#fff}
  .panel-scroll{padding:0;overflow:visible} .view{display:none} .view[data-view="find"]{display:block} .result{display:block!important}
  .result-block,.deadline,.psych{break-inside:avoid;border:1px solid #bbb;background:#fff}
  .print-head{display:flex;justify-content:space-between;font-size:10pt;color:#444;border-bottom:2px solid #000;padding-bottom:4px;margin-bottom:10px}
  .print-only{display:block!important}
  .result h2{font-size:20pt} .total{font-size:22pt} .deadline .d{font-size:18pt}
  .item-basis{font-size:9pt} .doc-list label{font-size:12pt} .doc-list input{width:16px;height:16px}
  a{color:#000;text-decoration:none}
}
.print-head,.print-only{display:none}

/* shelters */
.near{background:var(--bg);border:1px solid var(--line);border-radius:14px;padding:12px 14px;margin-bottom:12px}
.near h3{margin:0 0 6px}
.near-item{display:flex;align-items:center;gap:10px;width:100%;text-align:left;background:#fff;border:1px solid var(--line);border-radius:10px;padding:8px 10px;margin-top:6px}
.near-item:hover{border-color:var(--accent)}
.near-ic{font-size:1.2rem} .near-main{flex:1;min-width:0} .near-main b{display:block;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .near-main small{color:var(--mute)}
.near-walk{color:var(--accent2);font-weight:500;white-space:nowrap}

/* grid */
.grid-attrs{display:flex;flex-wrap:wrap;gap:6px;margin:6px 0 10px}
.chip{border:1px solid var(--line);background:#fff;border-radius:999px;padding:5px 11px;font-size:.85rem;color:var(--mute)}
.chip.is-on{background:var(--ink);color:#fff;border-color:var(--ink)}
.legend{display:flex;flex-wrap:wrap;gap:4px 10px;font-size:.78rem;color:var(--mute);font-family:var(--mono)}
.legend span{display:inline-flex;align-items:center;gap:4px} .legend i{width:12px;height:12px;border-radius:3px;display:inline-block;border:1px solid rgba(0,0,0,.08)}
.cell-table{border-collapse:collapse;margin-top:6px;font-size:.85rem} .cell-table td{padding:2px 8px 2px 0;border-bottom:1px dashed var(--line)} .cell-table td:last-child{text-align:right}

/* home / reset */
.home-row{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 14px}
.region-tools{display:flex;gap:6px;margin:-4px 0 12px}
.btn-sm{padding:6px 10px;font-size:.82rem;font-weight:600}
.btn-ghost.is-on{border-color:var(--gold);color:var(--gold)}

/* map stack (weather → facilities → language → text size), PiP-style column */
.mapstack{position:absolute;top:16px;right:16px;z-index:5;display:flex;flex-direction:column;align-items:flex-end;gap:8px;max-width:min(560px,calc(100% - 32px))}
.pill{display:flex;background:#fff;border:1px solid var(--line);border-radius:12px;padding:4px;box-shadow:var(--float-sm)}
.pill button{border:0;background:none;padding:5px 10px;border-radius:8px;font-size:.82rem;color:var(--mute);min-height:30px}
.pill button.is-on{background:var(--bg);color:var(--ink);font-weight:700;border:1px solid var(--line)}
.size-btn[data-size="big"]{font-size:.95rem}
@media (max-width:900px), (max-width:1200px) and (orientation:portrait){
  .mapstack{top:62px;right:10px;left:10px;max-width:none;flex-direction:row;flex-wrap:wrap;justify-content:flex-end;gap:6px}
  .wxsel.is-open{flex-basis:100%}
  html.big .mapstack{top:70px}
}

/* big-text mode: one class, every size scales from --fs */
html.big{--fs:20px;--tap:48px;--top-h:68px}
html.big .btn,html.big .chip,html.big .children button,html.big .opts span,html.big .near-item,html.big .card{min-height:var(--tap)}
html.big .opts span{padding:12px 16px;font-size:1.05rem}
html.big .wx-item .v{font-size:1.7rem} html.big .wx-item .k{font-size:.9rem}
html.big .h1{font-size:1.7rem} html.big .h2{font-size:2.1rem} html.big .lead{font-size:1.05rem}
html.big .kv{font-size:1.02rem} html.big .kv span:last-child{font-size:1em}
html.big .card b{font-size:1.15rem} html.big .card small{font-size:.9rem}
html.big .near-main small,html.big .item-basis,html.big .fine,html.big .disclaimer,html.big .wx-src{font-size:.95rem}
html.big .tab{font-size:1rem} html.big .pill button{font-size:.95rem;min-height:38px;padding:7px 12px}
html.big .wxsel span{font-size:.95rem;padding:6px 12px} html.big .wxsel-t{font-size:.9rem}
html.big .search input{height:50px;font-size:1.1rem}
html.big .level-guide span{font-size:.9rem}
html.big .total{font-size:2.6rem} html.big .deadline .d{font-size:1.9rem}
html.big .timeline li,html.big .item-sum{font-size:1.05rem}
@media (max-width:900px), (max-width:1200px) and (orientation:portrait){
  html.big .panel{height:56dvh} html.big .map-hint{bottom:calc(var(--sheet-h, 56dvh) + 2dvh + 10px)} html.big .maplibregl-ctrl-bottom-right{bottom:calc(var(--sheet-h, 56dvh) + 10px)} html.big .map-legend{bottom:calc(var(--sheet-h, 56dvh) + 14px)}
  html.big .cards{grid-template-columns:1fr 1fr} html.big .card{min-height:96px} html.big .card b{font-size:1.05rem}
  html.big .tab{font-size:.92rem}
}

/* size toggle + one-time coach bubble */
.coach{position:absolute;top:calc(100% + 10px);right:0;background:var(--ink);color:#fff;border-radius:12px;padding:10px 12px 10px 14px;font-size:.9rem;font-weight:600;white-space:nowrap;box-shadow:0 8px 24px rgba(20,32,46,.25);display:flex;align-items:center;gap:10px;animation:coachIn .35s ease}
.coach::before{content:"";position:absolute;top:-6px;right:22px;border:6px solid transparent;border-top:0;border-bottom-color:var(--ink)}
.coach-x{background:none;border:0;color:#fff;opacity:.7;font-size:1.1rem;line-height:1;padding:0 2px} .coach-x:hover{opacity:1}
@keyframes coachIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
html.big .coach{font-size:1.05rem}
@media (max-width:900px), (max-width:1200px) and (orientation:portrait){ .coach{white-space:normal;max-width:240px} }

/* map popups: above floating controls, readable */
.maplibregl-popup{z-index:7} .maplibregl-popup-content{font-family:var(--font);font-size:.92rem;line-height:1.4;border-radius:10px;box-shadow:0 8px 24px rgba(20,32,46,.18);padding:10px 14px}
html.big .maplibregl-popup-content{font-size:1.05rem}

/* psych centers block */
.psych-hot{font-size:1.05rem;margin-bottom:8px} .psych-hot a{text-decoration:none;color:var(--accent2)}
.psych-c{border-top:1px dashed var(--line);padding:6px 0;font-size:.92rem} .psych-c a{color:var(--accent2);text-decoration:none;margin-left:6px}

/* locate-me button inside search box */
.locate{position:absolute;right:4px;top:4px;width:36px;height:36px;border-radius:9px;border:0;background:transparent;color:var(--accent);display:flex;align-items:center;justify-content:center}
.locate:hover{background:var(--bg)} .locate.is-busy svg{animation:spin 1s linear infinite} .locate:disabled{opacity:.6}
@keyframes spin{to{transform:rotate(360deg)}}
html.big .locate{width:42px;height:42px}
/* facility groups inside the facility picker */
.shsel.is-open{flex-direction:column;align-items:stretch;gap:4px}
.shgrp{display:flex;align-items:flex-start;gap:6px;flex-wrap:wrap;padding:3px 0;border-top:1px dashed var(--line)}
/* 시설 표시 방식 토글: 아이콘 ↔ 밀도 히트맵 */
.shmode{display:flex;gap:2px;border:1px solid var(--line);border-radius:999px;padding:2px;background:#fff;margin:2px 0;width:max-content}
.shmode-b{border:0;background:none;border-radius:999px;padding:3px 10px;font-size:.8rem;color:var(--mute);cursor:pointer}
.shmode-b.is-on{background:var(--bg);color:var(--ink);font-weight:700}
/* 범례: 히트맵 4등급 밴드 */
.lg-heatrow{display:block;max-width:250px}
.lg-bands{display:flex;gap:10px;flex-wrap:wrap;margin:5px 0 2px}
.lg-band{display:inline-flex;align-items:center;gap:4px;font-size:.82rem;color:var(--ink)}
.lg-band i{width:14px;height:14px;border-radius:4px;display:inline-block;border:1px solid rgba(20,32,46,.15)}
.lg-heat-s{display:block;margin-top:4px;color:var(--mute);line-height:1.45;max-width:240px}
.shgrp-t{border:1px solid var(--line);background:#fff;border-radius:999px;padding:4px 10px;font-size:.82rem;font-weight:700;color:var(--mute);flex:none}
.shgrp-t.is-on{background:var(--ink);color:#fff;border-color:var(--ink)}
.shgrp-k{display:flex;flex-wrap:wrap;gap:2px;flex:1;min-width:0}
.shsel:not(.is-open) .shgrp{display:none}
html.big .shgrp-t{font-size:.95rem;padding:6px 12px}

/* PWA: install row + offline badge */
.install{display:flex;align-items:center;gap:8px;flex-wrap:wrap;background:var(--bg);border:1px solid var(--line);border-radius:12px;padding:10px 12px;margin-bottom:12px;font-size:.92rem}
.install span{flex:1;min-width:180px}
html.offline .top::after{content:attr(data-offline);position:absolute;left:50%;top:100%;transform:translateX(-50%);background:var(--gold);color:#fff;font-size:.78rem;font-weight:700;padding:3px 12px;border-radius:0 0 10px 10px;white-space:nowrap;z-index:31}

/* today's to-do card */
.todo-card{background:#fff;border:1px solid var(--gold);border-radius:14px;padding:12px 16px;margin-bottom:12px}
.todo-card h3{margin:0 0 6px;border-left-color:var(--gold)}
.todo-list{margin:0;padding-left:22px} .todo-list li{padding:5px 0;border-bottom:1px dashed var(--line);display:flex;align-items:center;gap:8px;font-size:.98rem;color:var(--ink)}
.todo-list li:last-child{border-bottom:0} .todo-list li span{flex:1} .todo-list .btn-sm{flex:none;padding:4px 8px;font-size:.78rem}
.todo-list li::marker{color:var(--gold);font-weight:700}
html.big .todo-list li{font-size:1.12rem}

/* result: why / docs / near-miss */
.item-why{font-size:.82rem;color:var(--teal);margin-top:3px}
.doc-list{list-style:none;margin:0;padding:0} .doc-list li{padding:5px 0;border-bottom:1px dashed var(--line)} .doc-list li:last-child{border-bottom:0}
.doc-list label{display:flex;align-items:flex-start;gap:10px;cursor:pointer;font-size:.95rem;color:var(--ink)} .doc-list input{width:20px;height:20px;margin-top:1px;flex:none;accent-color:var(--accent)}
.doc-list input:checked+span{color:var(--mute);text-decoration:line-through}
.miss-item{padding:6px 0;border-bottom:1px dashed var(--line);font-size:.92rem} .miss-item:last-child{border-bottom:0}
html.big .doc-list label{font-size:1.08rem} html.big .doc-list input{width:24px;height:24px}
@media print{ .doc-list input{-webkit-appearance:checkbox;appearance:checkbox} .miss{display:none} }

/* route links in popups */
.route-row{display:flex;gap:6px;margin-top:8px} .route-row a{flex:1;text-align:center;border:1px solid var(--line);border-radius:8px;padding:5px 6px;font-size:.8rem;text-decoration:none;color:var(--accent2);font-weight:600}
.route-row a:hover{background:var(--bg)}
html.big .route-row a{font-size:.95rem;padding:7px 8px}
/* ics + unknown */
.ics{margin:-6px 0 12px} .opt-unknown span{border-style:dashed;color:var(--mute)}
.miss.is-unknown{border-color:var(--gold)}

/* recent neighborhoods */
.recent-row{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:-6px 0 14px;font-size:.85rem} .recent-row .chip{padding:4px 10px}
/* map legend (bottom-left) */
.map-legend{position:absolute;left:16px;bottom:22px;z-index:5;background:rgba(255,255,255,.96);border:1px solid var(--line);border-radius:12px;padding:8px 10px;font-size:.78rem;color:var(--text);box-shadow:var(--float-sm);max-width:min(420px,calc(100% - 32px))}
.lg-row{display:flex;flex-wrap:wrap;gap:4px 10px} .lg-row span{display:inline-flex;align-items:center;gap:4px;white-space:nowrap} .lg-row i{width:10px;height:10px;border-radius:50%;display:inline-block;border:1px solid rgba(0,0,0,.15)}
.lg-row.is-sw{cursor:pointer;border-radius:8px;padding:3px 5px;margin-left:-5px;margin-right:-5px}
.lg-row.is-sw:hover{background:var(--bg)}
.lg-row.is-off{opacity:.5}
.lg-row.is-off b{text-decoration:line-through;text-decoration-thickness:1px}
.lg-off{color:var(--mute);font-family:var(--label)}
.lg-grid{margin-top:4px;padding-top:4px;border-top:1px dashed var(--line)} .lg-grid i{border-radius:2px} .lg-grid b{margin-right:4px;color:var(--ink)}
.lg-src{display:block;margin-top:4px;color:var(--mute);font-family:var(--label);font-size:.72rem}
@media (max-width:900px), (max-width:1200px) and (orientation:portrait){ .map-legend{left:10px;bottom:calc(var(--sheet-h, 50dvh) + 40px);max-width:calc(100% - 20px);font-size:.72rem} .map-legend .lg-src{display:none} html.big .map-legend{bottom:calc(var(--sheet-h, 56dvh) + 40px)} }
html.big .map-legend{font-size:.92rem}
/* data badge */
.src-badge{margin-top:6px;font-family:var(--mono);font-size:.72rem;color:var(--mute);border-top:1px dashed var(--line);padding-top:4px}

/* high-contrast mode */
html.contrast{--ink:#000;--text:#000;--mute:#333;--line:#555;--bg:#fff;--bg2:#fff;--accent:#003d99;--accent2:#002a6b;--gold:#6b4f00;--teal:#005f45;--danger:#a30000}
html.contrast .panel{background:#fff} html.contrast .btn-primary{background:#003d99} html.contrast .card,html.contrast .near-item,html.contrast .pill,html.contrast .wxsel{border-color:#333}
html.contrast .lang-btn.is-on,html.contrast .pill button.is-on,html.contrast .chip.is-on,html.contrast .shgrp-t.is-on{background:#000;color:#fff;border-color:#000}
html.contrast .tab.is-active{background:#000;color:#fff} html.contrast .todo-card{border-color:#000}
/* read-aloud */
.speak-mini{border:1px solid var(--line);background:#fff;border-radius:999px;padding:1px 8px;font-size:.85rem;margin-left:6px;vertical-align:middle} .speak-mini.is-on,#btnSpeak.is-on{background:var(--gold);color:#fff;border-color:var(--gold)}
.result-tools{display:flex;gap:6px;align-items:flex-start;flex:none}

/* tab 3: compare */
.compare{background:#fff;border:1px solid var(--line);border-radius:14px;padding:12px 14px;margin-bottom:12px}
.compare h3{margin:0 0 8px}
.cmp-head{display:flex;align-items:center;gap:8px;margin-bottom:8px} .cmp-sel{flex:1;min-width:0;height:40px;border:1px solid var(--line);border-radius:10px;padding:0 10px;font:inherit;font-weight:700;color:var(--ink);background:#fff}
.table-wrap{overflow-x:auto}
html.big .cmp-sel{height:48px;font-size:1.05rem}

/* left settings drawer (hamburger) */
.drawer-bg{position:fixed;inset:0;background:rgba(20,32,46,.35);z-index:40}
.drawer{position:fixed;left:0;top:0;bottom:0;width:min(320px,86vw);background:#fff;z-index:41;box-shadow:12px 0 40px rgba(20,32,46,.18);padding:14px 18px calc(20px + env(safe-area-inset-bottom));overflow-y:auto;animation:drawerIn .22s ease}
@keyframes drawerIn{from{transform:translateX(-100%)}to{transform:none}}
.drawer-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px} .drawer-head b{font-family:var(--display);font-size:1.2rem}
.drawer-sec{padding:12px 0;border-top:1px solid var(--line)} .drawer-sec h4{margin:0 0 8px;font-size:.85rem;color:var(--mute);font-family:var(--label);font-weight:500}
.drawer .pill{display:inline-flex} .drawer .pill button{min-height:40px;padding:6px 14px;font-size:.95rem}
.drawer-row{display:flex;align-items:center;gap:10px;margin-top:10px;font-size:.95rem} .drawer-row input{width:22px;height:22px;accent-color:var(--accent)}
.drawer-link{display:block;width:100%;text-align:left;border:0;background:none;padding:8px 0;font-size:1rem;color:var(--ink);text-decoration:none}
.drawer-link:hover{color:var(--accent)}
.coach-top{position:fixed;left:14px;top:calc(var(--top-h) + 6px);z-index:32} .coach-top::before{left:14px;right:auto}
@media (min-width:901px) and (orientation:landscape){ .drawer{width:320px} }
@media (max-width:900px), (max-width:1200px) and (orientation:portrait){ .desktop-only{display:none} }
html.big .drawer .pill button{font-size:1.1rem;min-height:48px} html.big .drawer-link{font-size:1.15rem}
/* legend: collapsible */
.lg-toggle{display:none;border:0;background:none;font:inherit;font-weight:700;color:var(--ink);padding:0;align-items:center;gap:6px}
.lg-dots{display:inline-flex;gap:2px} .lg-dots i{width:9px;height:9px;border-radius:50%;display:inline-block;border:1px solid rgba(0,0,0,.15)}
@media (max-width:900px), (max-width:1200px) and (orientation:portrait){
  .map-legend{left:10px;bottom:calc(var(--sheet-h, 50dvh) + 14px);max-width:calc(100% - 120px)} .lg-toggle{display:inline-flex}
  .map-legend.is-min{padding:6px 10px;border-radius:999px} .map-legend.is-min .lg-row,.map-legend.is-min .lg-src{display:none}
  .map-legend .lg-toggle::after{content:' ▴';color:var(--mute)} .map-legend.is-min .lg-toggle::after{content:' ▾'}
  .mapstack{gap:6px} .map-hint{bottom:calc(var(--sheet-h, 50dvh) + 14px);left:10px;transform:none;max-width:calc(100% - 120px);text-align:left;font-size:.78rem;padding:7px 11px}
  .map-legend{bottom:calc(var(--sheet-h, 50dvh) + 2dvh + 56px)}
}

/* formulas (native MathML) */
.math-block{background:#fff;border:1px solid var(--line);border-radius:12px;padding:12px 14px}
.math-cap{margin:10px 0 2px;font-size:.88rem;color:var(--mute)} .math-cap:first-child{margin-top:0}
math[display="block"]{display:block;margin:6px 0 10px;font-size:1.15rem;font-family:"Latin Modern Math","STIX Two Math","Cambria Math","Noto Sans Math",serif;color:var(--ink);overflow-x:auto}
html.big math[display="block"]{font-size:1.35rem}

/* ---- responsive extras ---- */
/* coarse pointer (touch): every tappable thing at least 44px */
@media (pointer:coarse){
  .btn,.chip,.tab,.children button,.near-item,.opts span,.pill button,.wxsel span,.shgrp-t,.lg-toggle,.icon-btn,.locate,.route-row a,.drawer-link,.fx-x{min-height:44px}
  .wxsel span,.chip{display:inline-flex;align-items:center}
  .maplibregl-ctrl-group button{width:44px;height:44px}
}
/* large desktop: wider panel, bigger type */
@media (min-width:1600px){ :root{--fs:17.5px} }
/* short landscape phones: compact header */
@media (max-height:500px){ :root{--top-h:48px} .brand-sub{display:none} }

/* confidence chips in rules table */
.conf{display:inline-block;padding:2px 8px;border-radius:999px;font-size:.75rem;font-weight:600;white-space:nowrap;background:var(--bg2);color:var(--mute)}
.conf-verified{background:rgba(15,157,122,.12);color:var(--teal)} .conf-reported{background:rgba(154,115,40,.12);color:var(--gold)} .conf-estimate{background:rgba(194,68,126,.12);color:var(--rose)}

/* home profile in drawer */
.prof label{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:.95rem;padding:6px 0}
.prof select{height:38px;border:1px solid var(--line);border-radius:9px;padding:0 8px;font:inherit;background:#fff;color:var(--ink);max-width:55%}
.prof-chk{display:grid;grid-template-columns:1fr 1fr;gap:0 8px} .prof-chk label{justify-content:flex-start} .prof-chk input{width:20px;height:20px;accent-color:var(--accent)}
html.big .prof label{font-size:1.08rem}

/* insurance card */
.ins-card{background:var(--bg);border:1px solid var(--line);border-radius:14px;padding:12px 16px;margin-bottom:12px} .ins-card h3{margin:0 0 6px}
.ins-hist{font-size:.92rem;color:var(--ink);margin-bottom:4px} .ins-rate{font-size:1rem;margin-bottom:4px} .ins-rate b{color:var(--accent2)}

/* resident reports */
.reports{background:#fff;border:1px solid var(--line);border-radius:14px;padding:12px 14px;margin-bottom:12px} .reports h3{margin:0 0 8px}
.rep-item{display:grid;grid-template-columns:auto 1fr auto;gap:4px 8px;align-items:start;padding:6px 0;border-bottom:1px dashed var(--line);font-size:.92rem}
.rep-k{background:var(--bg2);border-radius:999px;padding:2px 8px;font-size:.78rem;color:var(--mute);white-space:nowrap} .rep-t{color:var(--ink)} .rep-item small{grid-column:2}
.rep-flag{border:0;background:none;color:var(--mute);font-size:.95rem;padding:0 4px;grid-row:1/3} .rep-flag:hover{color:var(--danger)}
.rep-form{display:grid;grid-template-columns:auto 1fr auto;gap:6px;margin-top:10px} .rep-form select,.rep-form input{height:38px;border:1px solid var(--line);border-radius:9px;padding:0 10px;font:inherit;background:#fff;color:var(--ink);min-width:0}
@media (max-width:900px), (max-width:1200px) and (orientation:portrait){ .rep-form{grid-template-columns:1fr 1fr} .rep-form input{grid-column:1/3} .rep-form button{grid-column:2} }
html.big .rep-item{font-size:1.05rem} html.big .rep-form select,html.big .rep-form input{height:46px;font-size:1.05rem}

/* desktop panel edge handle: click to collapse; when collapsed a tab stays at the left edge to reopen */
.panel-tab{position:absolute;right:-18px;top:50%;transform:translateY(-50%);width:18px;height:64px;border:1px solid var(--line);border-left:0;border-radius:0 10px 10px 0;background:#fff;box-shadow:4px 0 12px rgba(20,32,46,.08);display:flex;align-items:center;justify-content:center;color:var(--mute);padding:0;cursor:pointer;pointer-events:auto}
.panel-tab:hover{color:var(--ink);background:var(--bg)} .panel-tab-ic{font-size:1.2rem;line-height:1}
.panel.is-collapsed .panel-tab{position:fixed;left:0;right:auto;top:50%;transform:translateY(-50%);opacity:1;pointer-events:auto;border-left:0;width:22px;height:80px;z-index:12}
.panel.is-collapsed .panel-tab-ic{transform:rotate(180deg)}
@media (max-width:900px), (max-width:1200px) and (orientation:portrait){ .panel-tab{display:none} }

/* language toggle: header, rightmost (desktop + mobile) */

/* risk verdict line (text, not map) */
.risk-line{background:#fff;border:1px solid var(--line);border-radius:12px;padding:9px 12px;margin-bottom:10px;font-size:.95rem;line-height:1.5}
.rl-bad{color:var(--danger);font-weight:700} .rl-warn{color:var(--gold);font-weight:600} .rl-ok{color:var(--teal);font-weight:600} .rl-sep{color:var(--mute)}
.rl-basis{display:block;margin-top:4px;font-size:.72rem;font-family:var(--mono)}
.todo-why{display:block;font-size:.72rem;color:var(--mute);font-family:var(--mono);margin-top:2px;line-height:1.4} .fx-why{font-size:.7rem;color:var(--mute);font-family:var(--mono);white-space:nowrap}
.todo-src{color:var(--accent2);font-weight:700;margin-right:2px}
.card-proxy{grid-column:1/-1;min-height:64px;flex-direction:row;align-items:center;gap:10px} .card-proxy .card-ic{margin:0}
html.big .risk-line{font-size:1.1rem}

/* mobile: opened legend becomes a slim strip right above the sheet (never a box over the map centre) */
@media (max-width:900px), (max-width:1200px) and (orientation:portrait){
  .map-legend:not(.is-min){left:10px;right:10px;bottom:calc(var(--sheet-h, 50dvh) + 60px);max-width:none;max-height:96px;overflow-y:auto;padding:6px 10px;border-radius:10px}
  .map-legend:not(.is-min) .lg-row{gap:2px 8px} .map-legend:not(.is-min) .lg-row span{font-size:.72rem}
  .map-legend:not(.is-min) .lg-toggle{position:sticky;top:0;background:rgba(255,255,255,.96);width:100%;justify-content:space-between}
  html.big .map-legend:not(.is-min){bottom:calc(var(--sheet-h, 56dvh) + 2dvh + 62px)}
}
@media (max-width:900px) and (orientation:landscape), (max-height:500px) and (pointer:coarse){ .map-legend:not(.is-min){bottom:calc(var(--sheet-h, 60dvh) + 60px);max-height:70px} }

/* one line for today */
.tip-card{margin-top:14px;background:#fff;border:1px solid var(--line);border-left:3px solid var(--gold);border-radius:12px;padding:10px 14px}
.tip-head{display:flex;justify-content:space-between;align-items:center;gap:8px} .tip-label{font-family:var(--label);font-size:.85rem;color:var(--gold);font-weight:700}
.tip-nav{display:inline-flex;align-items:center;gap:4px;color:var(--mute);font-size:.78rem} .tip-btn{border:1px solid var(--line);background:#fff;border-radius:6px;width:26px;height:26px;line-height:1;color:var(--ink)}
.tip-text{margin:6px 0 4px;font-size:1rem;color:var(--ink);line-height:1.5} .tip-src{font-family:var(--mono);font-size:.72rem;color:var(--mute)}
html.big .tip-text{font-size:1.15rem} html.big .tip-btn{width:34px;height:34px}
.tip-card{position:relative;overflow:hidden}
.tip-prog{position:absolute;left:0;bottom:0;height:2px;width:100%;transform-origin:left;background:var(--gold);opacity:.35;animation:tipProg linear forwards}
@keyframes tipProg{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.tip-card:hover .tip-prog,.tip-card:focus-within .tip-prog{animation-play-state:paused}
@media (prefers-reduced-motion:reduce){.tip-prog{display:none}}

/* ER availability card */
.er-card{background:#fff;border:1px solid var(--danger);border-radius:14px;padding:12px 14px;margin-bottom:12px} .er-card h3{margin:0 0 6px;border-left-color:var(--danger)}
.er-item{display:grid;grid-template-columns:1fr auto;gap:2px 10px;padding:7px 0;border-bottom:1px dashed var(--line);font-size:.95rem} .er-item:last-of-type{border-bottom:0}
.er-item b{color:var(--ink)} .er-meta{grid-column:1;color:var(--text);font-size:.88rem} .er-tel{grid-row:1/3;align-self:center;text-decoration:none;color:var(--accent2);font-weight:700;white-space:nowrap}
.er-src{display:block;margin-top:6px;font-family:var(--mono);font-size:.72rem}
html.big .er-item{font-size:1.08rem}

/* situation bar */
.sit-bar{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;padding:2px 0 8px;margin-bottom:6px;align-items:center} .sit-bar::-webkit-scrollbar{display:none}
.sit-lbl{font-family:var(--label);font-size:.8rem;color:var(--mute);flex:none;margin-right:2px}
.sit-chip{flex:none;border:1px solid var(--line);background:#fff;border-radius:999px;padding:6px 11px;font-size:.85rem;color:var(--text);white-space:nowrap}
.sit-chip.is-on{background:var(--ink);color:#fff;border-color:var(--ink);font-weight:700} .sit-clear{color:var(--mute);padding:6px 9px}
html.big .sit-chip{font-size:1rem;padding:8px 14px}
/* foldable sections */
.sec{margin-bottom:12px} .sec.is-empty{display:none}
.sec-head{display:none;width:100%;text-align:left;border:1px solid var(--line);background:var(--bg);border-radius:12px;padding:9px 14px;font:inherit;font-weight:700;color:var(--mute);justify-content:space-between;align-items:center}
.sec.is-folded .sec-head{display:flex} .sec.is-folded > :not(.sec-head){display:none}
.sec-chev{transform:rotate(-90deg);transition:transform .15s} .sec-head:hover{color:var(--ink)}
html.big .sec-head{font-size:1.08rem;padding:12px 16px}

/* late path + past hint + none option */
.late{border-color:var(--gold)} .late-list{margin:0;padding-left:22px} .late-list li{padding:5px 0;border-bottom:1px dashed var(--line);font-size:.95rem;color:var(--ink)} .late-list li:last-child{border-bottom:0}
.past-hint{margin-top:8px;background:#fff;border:1px solid var(--gold);border-radius:10px;padding:8px 12px;font-size:.9rem;color:var(--ink)}
.opt-none span{border-style:dashed}
html.big .late-list li{font-size:1.1rem}

/* card & button labels in the title face (Korean), numbers stay in DM Mono */
button,.card b,.chip,.sit-chip,.shgrp-t,.wxsel span,.sec-head,.drawer-link{font-family:var(--label)}
.card small,.install span,.rep-form input,.prof select{font-family:var(--font);font-weight:400}
.card b,.sec-head{font-weight:700} .chip,.sit-chip,.wxsel span,.pill button,.drawer-link{font-weight:500}

/* ---------- 24시간 예보 타임라인 (단기예보 개통 시 자동 표시) ---------- */
.wx-card .wx-src{grid-column:1/-1}
.wx-fcst{grid-column:1/-1;display:flex;gap:2px;overflow-x:auto;background:#fff;border:1px solid var(--line);border-radius:10px;padding:8px 6px;scrollbar-width:thin}
.wx-fcst .fs{flex:1 0 54px;min-width:54px;display:flex;flex-direction:column;align-items:center;gap:2px}
.wx-fcst .fs small{font-size:.68rem;color:var(--mute);font-family:var(--mono);white-space:nowrap}
.wx-fcst .fs .ic{font-size:1.05rem;line-height:1.2}
.wx-fcst .fs b{font-family:var(--mono);font-size:.95rem;color:var(--ink)}
.wx-fcst .fs .pop{color:var(--accent);min-height:1em}

/* ---------- 특보 → 직관 연출 (docs/02 §2.5 매핑표) ---------- */
.wx-fx{position:absolute;inset:0;pointer-events:none;z-index:6;opacity:0;transition:opacity 1.2s;overflow:hidden}
.wx-fx.on{opacity:1}
.fx-heat{background:linear-gradient(180deg,rgba(246,173,85,.12),rgba(229,62,62,.05) 55%,transparent)}
/* 아지랑이: 또렷한 가로 밴드가 '렌더링 결함'처럼 보여(사용자 보고) 부드러운 열기 덩어리로 교체 */
.fx-heat::before{content:"";position:absolute;inset:-10%;background:radial-gradient(60% 40% at 22% 12%,rgba(246,173,85,.11),transparent 70%),radial-gradient(52% 36% at 78% 24%,rgba(237,137,54,.09),transparent 70%),radial-gradient(70% 30% at 50% 0%,rgba(229,62,62,.06),transparent 75%);animation:fxShimmer 5.5s ease-in-out infinite}
.fx-heat.lv-warn{background:linear-gradient(180deg,rgba(229,62,62,.14),rgba(237,137,54,.07) 55%,transparent)}
.fx-heat.lv-warn::after{content:"";position:absolute;top:5%;right:6%;width:120px;height:120px;border-radius:50%;background:radial-gradient(circle,rgba(246,173,85,.5),transparent 65%);animation:fxPulse 2.4s ease-in-out infinite}
/* 빗줄기 연출 — "파란 사선 에러"로 오인된 이력(08-31, 폭염 밴드 08-27과 동일 패턴) → 가늘고 옅게 */
.fx-rain::before{content:"";position:absolute;inset:-80px 0 0;background:repeating-linear-gradient(105deg,transparent 0 22px,rgba(26,95,196,.09) 22px 23px);animation:fxRain 1.1s linear infinite}
.fx-rain.lv-warn::before{background:repeating-linear-gradient(105deg,transparent 0 13px,rgba(15,74,158,.13) 13px 14px);animation-duration:.6s}
.fx-rain.lv-warn::after{content:"";position:absolute;left:0;right:0;bottom:0;background:linear-gradient(180deg,transparent,rgba(15,74,158,.28));animation:fxRise 6s ease-out forwards}
.fx-snow::before{content:"";position:absolute;inset:-120px 0 0;background-image:radial-gradient(circle,rgba(255,255,255,.95) 0 2.2px,transparent 3px),radial-gradient(circle,rgba(203,213,224,.9) 0 1.6px,transparent 2.6px);background-size:90px 90px,56px 56px;background-position:0 0,28px 44px;filter:drop-shadow(0 0 1px rgba(86,101,119,.5));animation:fxSnow 7s linear infinite}
.fx-snow.lv-warn::before{animation-duration:4s;background-size:64px 64px,42px 42px}
.fx-wind::before{content:"";position:absolute;inset:0 -160px;background:repeating-linear-gradient(100deg,transparent 0 70px,rgba(86,101,119,.10) 70px 78px,transparent 78px 96px);animation:fxWind 2.6s linear infinite}
/* 모바일 확대 시 대각선 줄이 계속 거슬린다는 재보고(08-31) — 작은 화면은 줄무늬 생략, 배너·차오름 그라데이션만 남긴다 */
@media (max-width:900px), (max-width:1200px) and (orientation:portrait){
  .wx-fx.fx-rain::before,.wx-fx.fx-wind::before{content:none}
}
.fx-cold{box-shadow:inset 0 0 90px rgba(96,165,250,.35)}
.fx-cold.lv-warn{box-shadow:inset 0 0 150px rgba(59,130,246,.45);background:rgba(191,219,254,.10)}
.fx-dry{background:rgba(154,115,40,.10)}
.fx-dry.lv-warn{background:rgba(154,115,40,.16);box-shadow:inset 0 0 110px rgba(154,115,40,.25)}
.fx-typhoon::before{content:"";position:absolute;top:50%;left:50%;width:130vmax;height:130vmax;margin:-65vmax 0 0 -65vmax;background:conic-gradient(from 0deg,transparent 0 70deg,rgba(200,67,43,.06) 70deg 110deg,transparent 110deg 250deg,rgba(15,74,158,.06) 250deg 290deg,transparent 290deg);border-radius:50%;animation:fxSpin 14s linear infinite}
.fx-dust{background:rgba(214,158,46,.13)}
.quake-shake{animation:fxQuake .6s ease-in-out 1}
.fx-banner{position:absolute;top:14px;left:50%;transform:translateX(-50%);z-index:7;max-width:min(520px,calc(100% - 32px));display:flex;gap:10px;align-items:baseline;background:#fff;border:1px solid var(--line);border-left:5px solid var(--warn);border-radius:12px;padding:9px 14px;box-shadow:0 4px 18px rgba(20,32,46,.12);font-size:.92rem}
.fx-banner.lv-warn{border-left-color:var(--danger)}
.fx-x{margin-left:auto;align-self:center;border:0;background:none;color:var(--mute);font-size:1.15rem;line-height:1;padding:0 2px;cursor:pointer}
.fx-x:hover{color:var(--ink)}
html.no-fxbanner .fx-banner{display:none}
.fx-banner b{font-family:var(--label);color:var(--ink);white-space:nowrap}
.fx-banner span{color:var(--text)}
@keyframes fxShimmer{0%,100%{transform:translateY(0);opacity:.6}50%{transform:translateY(-8px);opacity:1}}
@keyframes fxPulse{0%,100%{transform:scale(1);opacity:.7}50%{transform:scale(1.25);opacity:1}}
@keyframes fxRain{to{transform:translateY(80px)}}
@keyframes fxRise{from{height:0}to{height:16%}}
@keyframes fxSnow{to{background-position:0 90px,28px 100px}}
@keyframes fxWind{to{transform:translateX(160px)}}
@keyframes fxSpin{to{transform:rotate(360deg)}}
@keyframes fxQuake{0%,100%{transform:translate(0,0)}15%{transform:translate(-7px,2px)}30%{transform:translate(6px,-3px)}45%{transform:translate(-5px,-2px)}60%{transform:translate(4px,2px)}75%{transform:translate(-2px,1px)}90%{transform:translate(1px,0)}}
@media (max-width:900px){ .fx-banner{top:64px;font-size:.85rem} }
@media (prefers-reduced-motion:reduce){ .wx-fx,.wx-fx::before,.wx-fx::after{animation:none!important} }

/* ---------- 근거 조문 펼침 ---------- */
.lawfold{margin-top:6px;font-size:.86rem}
.lawfold summary{cursor:pointer;color:var(--accent);font-size:.84rem;user-select:none}
.lawfold summary:hover{text-decoration:underline}
.lawfold .law-body{margin:6px 0 2px;padding:10px 12px;background:var(--bg);border:1px solid var(--line);border-left:3px solid var(--gold);border-radius:8px}
.lawfold .law-body h5{margin:0 0 4px;font-family:var(--label);font-size:.86rem;color:var(--ink)}
.lawfold .law-body p{margin:0 0 6px;white-space:pre-line;color:var(--text)}
.lawfold .law-body pre.law-annex{margin:0 0 6px;font-family:"D2Coding","Nanum Gothic Coding",ui-monospace,Consolas,"Malgun Gothic",monospace;font-size:.7rem;line-height:1.35;white-space:pre;overflow:auto;max-height:320px;color:var(--text)}

/* ---------- 긴급재난문자 타임라인 ---------- */
.msg-card{background:var(--bg);border:1px solid var(--line);border-radius:14px;padding:14px 16px;margin-bottom:12px}
.msg-card h3{margin:0 0 10px;font-family:var(--label);font-size:.95rem}
.msg-item{background:#fff;border:1px solid var(--line);border-left:4px solid var(--warn);border-radius:10px;padding:9px 12px;margin-bottom:8px}
.msg-item.is-urgent{border-left-color:var(--danger)}
.msg-head{display:flex;justify-content:space-between;align-items:baseline;gap:8px;margin-bottom:3px}
.msg-type{font-family:var(--label);font-size:.8rem;color:var(--ink)}
.msg-text{font-size:.88rem;line-height:1.5;word-break:keep-all}
/* 범례 드래그 */
.map-legend{touch-action:none;cursor:grab}
.map-legend:active{cursor:grabbing}
/* 외국인 주민 안내 */
.result-block.foreign{border-left:4px solid var(--accent);background:#f2f6fd}
.result-block.foreign p{margin:6px 0;font-size:.92rem}
.result-block.foreign .fr-call{margin-top:8px;font-size:.9rem;font-weight:600;color:var(--accent2)}
/* 상단 언어 선택 (🌐 + 네이티브 select) */
/* 상단 언어 드롭다운 — 사이트 pill 테마와 통일 (네이티브 select 대체) */
.lang-top{position:relative;display:inline-flex;align-items:center;gap:5px;flex:none;margin-left:6px}
.lang-top-t{height:36px;padding:0 12px;border:1px solid var(--line);border-radius:10px;background:#fff;font-weight:700;font-size:.85rem;color:var(--ink);white-space:nowrap;cursor:pointer}
@media (max-width:900px), (max-width:1200px) and (orientation:portrait){
  .lang-top-t{height:32px;padding:0 9px;font-size:.78rem}
}
.lang-top-t:hover{background:var(--bg)}
.lang-top-t::after{content:' ▾';color:var(--mute);font-weight:400}
.lang-menu{position:absolute;top:calc(100% + 6px);right:0;display:none;flex-direction:column;gap:2px;min-width:132px;background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:0 10px 30px rgba(20,32,46,.16);padding:6px;z-index:60}
.lang-top.is-open .lang-menu{display:flex}
.lang-menu button{border:0;background:none;text-align:left;padding:9px 12px;border-radius:8px;font-size:.88rem;color:var(--text);cursor:pointer}
.lang-menu button:hover{background:var(--bg)}
.lang-menu button.is-on{background:var(--bg);color:var(--ink);font-weight:700}
.lang-menu button.is-on::after{content:' ✓';color:var(--accent)}
@media (max-width:900px), (max-width:1200px) and (orientation:portrait){
  /* 모바일 .top은 overflow:hidden — 헤더 안 absolute 메뉴가 잘려 탭이 안 됐다. fixed로 클리핑 탈출.
     ⚠ 반드시 위의 기본 .lang-menu{position:absolute} 뒤에 두어야 함 (같은 특이도 → 순서로 승부) */
  .lang-menu{position:fixed;top:calc(var(--top-h) + 6px);right:8px}
  .lang-menu button{padding:12px 14px;font-size:.95rem}
}
html.big .lang-top-t{font-size:1rem;height:42px}
/* 첫 진입 오버레이 — 질문 하나만. 지도는 뒤에서 흐리게 */
.welcome{position:fixed;inset:0;z-index:80;display:flex;align-items:center;justify-content:center;padding:18px;background:rgba(20,32,46,.38);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px)}
.welcome[hidden]{display:none}
.welcome-card{position:relative;background:#fff;border-radius:20px;max-width:560px;width:100%;padding:26px 24px 20px;box-shadow:0 24px 60px rgba(20,32,46,.28);max-height:calc(100dvh - 36px);overflow:auto}
/* 오버레이가 떠 있는 동안 헤더 언어 버튼이 가려진다 — 외국인 첫 방문자를 위해 카드 안에도 스위치 */
.welcome-lang{position:absolute;top:14px;right:14px;display:flex;gap:2px;border:1px solid var(--line);border-radius:999px;padding:2px;background:#fff}
.welcome-lang button{border:0;background:none;padding:4px 10px;border-radius:999px;font-size:.8rem;color:var(--mute);cursor:pointer}
.welcome-lang button.is-on{background:var(--bg);color:var(--ink);font-weight:700}
.welcome-brand{display:inline-flex;align-items:center;gap:8px;margin-bottom:14px}
.welcome-card .h1{margin-bottom:6px}
.wel-lead{margin:0 0 14px;color:var(--mute);font-size:.92rem;line-height:1.5}
.welcome-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.wcard{cursor:pointer} /* 나머지 외형은 .card와 공유(위 공통 블록) */
.wcard:hover{border-color:var(--accent);box-shadow:0 4px 14px rgba(26,95,196,.12);transform:translateY(-1px)}
.welcome-sub #welBack{margin-bottom:10px}
.welcome-loc #welLocBack{margin-bottom:10px}
.wel-gps{width:100%;margin:2px 0 12px}
.wel-search{position:relative}
.wel-search input{width:100%;height:46px;padding:0 14px;border:1px solid var(--line);border-radius:12px;font:inherit;background:#fff;box-sizing:border-box}
.wel-search input:focus{outline:2px solid rgba(26,95,196,.35)}
.wel-search ul{list-style:none;margin:6px 0 0;padding:4px;border:1px solid var(--line);border-radius:12px;max-height:220px;overflow:auto;background:#fff}
.wel-search li{display:flex;justify-content:space-between;align-items:baseline;gap:10px;padding:10px 10px;border-radius:8px;cursor:pointer}
.wel-search li:hover{background:var(--bg)}
.wel-search li small{color:var(--mute)}
.welcome-skip{display:block;margin:16px auto 0;border:0;background:none;color:var(--mute);cursor:pointer;font-size:.9rem;text-decoration:underline;text-underline-offset:3px}
.welcome-skip:hover{color:var(--ink)}
@media (max-width:900px), (max-width:1200px) and (orientation:portrait){
  .welcome{align-items:flex-end;padding:0}
  .welcome-card{border-radius:20px 20px 0 0;max-width:none;padding:14px 18px 18px;overscroll-behavior:none;touch-action:pan-y}
  /* 시트 모양이니 그립도 진짜로 — 끌어내려 닫기 어포던스 */
  .welcome-card::before{content:"";display:block;width:44px;height:5px;border-radius:3px;background:#c9d2e0;margin:0 auto 12px}
  .wcard{min-height:88px;padding:12px 12px 10px}
  .wcard .card-ic{font-size:1.4rem}
  .wcard b{font-size:.95rem}
}
html.big .wcard b{font-size:1.1rem} html.big .wcard small{font-size:.9rem}
/* 지도 우하단 컨트롤 마감 — 둥근 모서리·행간 여백·3D 폰트 (08-31 실기기 피드백) */
.maplibregl-ctrl-bottom-right .maplibregl-ctrl-group{border-radius:10px;overflow:hidden}
.maplibregl-ctrl-bottom-right .maplibregl-ctrl{margin:0 10px 12px 0}
.ctrl-3d{font-family:var(--label),var(--sans)!important;font-weight:800;font-size:12px;color:var(--mute);letter-spacing:.02em}
.ctrl-3d.is-on{color:#fff;background:var(--accent)!important}
/* 하단 토스트 (푸시 토글 등 짧은 상태 안내) */
.toast{position:fixed;left:50%;bottom:26px;transform:translateX(-50%) translateY(8px);background:var(--ink);color:#fff;padding:10px 16px;border-radius:12px;font-size:.9rem;z-index:120;opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;max-width:88vw}
.toast.is-on{opacity:1;transform:translateX(-50%)}
/* 서류 발급처 링크 */
.doc-list a{margin-left:6px;font-size:.82rem;white-space:nowrap}
/* 탭③ 우리 동네 대비 */
.prep-row{background:#fff;border:1px solid var(--line);border-radius:10px;padding:10px 13px;margin-bottom:8px}
.prep-head{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.prep-head span{color:var(--mute);font-size:.88rem}
.prep-head b{font-family:var(--mono);color:var(--ink)}
.prep-act{margin-top:5px;font-size:.86rem;color:var(--accent2);word-break:keep-all}
/* 겹친 시설 목록 팝업 */
.shpop-row{padding:6px 8px;margin-top:4px;border:1px solid var(--line);border-radius:8px;cursor:pointer;font-size:.85rem}
.shpop-row:hover{background:var(--bg)}
.shpop-row small{color:var(--mute);margin-left:4px}
/* 워드마크: 두문자 A·P 강조 (사용자 타이포 제안의 AidPage 적용판) */
.brand-name b{font-weight:800;font-size:1.18em;color:var(--accent)}
.brand-name b:last-of-type{color:var(--gold)}
/* 스파이더파이 아이콘 (겹친 시설 펼침) */
.spider-ic{width:32px;height:32px;border-radius:50%;background:#fff;border:2.5px solid var(--line);
  display:flex;align-items:center;justify-content:center;font-size:17px;cursor:pointer;
  box-shadow:0 3px 10px rgba(20,32,46,.28);animation:spiderPop .22s ease-out backwards;z-index:6}
.spider-ic:hover{transform:scale(1.18)}
@keyframes spiderPop{from{transform:scale(.2);opacity:0}to{transform:scale(1);opacity:1}}
@media (prefers-reduced-motion:reduce){.spider-ic{animation:none}}

.msg-more{margin:6px 0 2px}
.msg-more summary{cursor:pointer;color:var(--accent);font-size:.86rem;user-select:none;padding:4px 0}
.msg-more summary:hover{text-decoration:underline}
.law-note{display:block;margin-top:5px;color:var(--mute);font-size:.8rem;line-height:1.5}
/* 복지서비스 블록 (결과 하단, welfare.json lazy-load) */
.welfare > small.muted{display:block;margin:2px 0 6px;line-height:1.5}
.welfare > small.muted:last-child{margin-top:8px}
.wf-more{margin:6px 0 2px}
.wf-more summary{cursor:pointer;color:var(--accent);font-size:.86rem;user-select:none;padding:4px 0}
.wf-more summary:hover{text-decoration:underline}
/* 보험 카드 CTA — 수요 계측의 신호 품질을 올리는 명시적 행동 버튼 */
.ins-cta{display:inline-block;margin:8px 0 6px;text-decoration:none}

/* ── AidPage Simulator (가는 길 위험, 격자 1단계) ── */
.sim-launch{border-color:var(--accent);background:#f7f9fc} .sim-launch h3{margin-top:0} .sim-launch .btn{margin-top:6px}
.sim .sim-head{display:flex;align-items:center;justify-content:space-between;gap:8px} .sim .sim-head h3{margin:0}
.sim-row{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin:8px 0}
.sim-row .lbl{font-weight:700;min-width:48px;font-family:var(--label)}
.sim-val{flex:1;min-width:0;font-family:var(--mono);font-size:.84em;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sim-val.muted{color:var(--mute);font-family:inherit}
.sim .btn.is-picking{border-color:var(--gold);color:var(--gold);box-shadow:0 0 0 3px rgba(154,115,40,.18)}
.sim-sel{flex:1;min-width:0;height:36px;border:1px solid var(--line);border-radius:10px;padding:0 10px;font:inherit;font-weight:600;color:var(--ink);background:#fff}
.sim .actions{display:flex;gap:8px;align-items:center;margin:10px 0 6px}
.sim-res{display:grid;gap:8px;margin-top:8px}
.sim-scn{font-size:.82rem;color:var(--mute);font-family:var(--mono)}
.sim-card{background:#fff;border:1px solid var(--line);border-radius:10px;padding:10px 13px}
.sim-card.safe{border-color:var(--accent)}
.sim-card h4{margin:0 0 4px;font-family:var(--label);font-size:1rem;display:flex;align-items:center;gap:8px}
.sim-card h4 i,.sim-legend .ln{width:22px;height:0;border-top:3px solid #6b768a;display:inline-block;border-radius:0}
.sim-card.short h4 i,.sim-legend .ln.short{border-top-style:dashed;border-color:#6b768a}
.sim-card.safe h4 i,.sim-legend .ln.safe{border-color:var(--accent);border-top-width:4px}
.sim-card .m{font-family:var(--mono);font-size:.88em;color:var(--ink)}
.sim-card ul{margin:6px 0 0;padding-left:18px;font-size:.9rem;word-break:keep-all}
.sim-card li.bad{color:var(--danger)} .sim-card li.warn{color:var(--gold)} .sim-card li.ok{color:var(--teal)} .sim-card li.muted{color:var(--mute)}
.sim-gain{background:#e8f0fb;border-radius:10px;padding:8px 12px;font-size:.92rem;color:var(--accent2);word-break:keep-all}
.sim-wait{padding:10px;color:var(--mute);font-size:.9rem} .sim-err{padding:10px 12px;border:1px solid var(--danger);border-radius:10px;color:var(--danger);font-size:.9rem;word-break:keep-all}
.sim-legend{margin-top:10px} .sim-note{margin-top:8px;word-break:keep-all}
body.map-pick #map .maplibregl-canvas{cursor:crosshair!important}

.kakao-link{color:#3c1e1e;background:#fee500;border-radius:10px;padding:8px 12px;font-weight:700}

/* 복지서비스 — 지역 특성 줄 + 지역 가중 배지 (09-03) */
.wf-region{font-size:.86rem;background:#fff;border:1px solid var(--line);border-radius:10px;padding:8px 10px;margin:6px 0 8px;line-height:1.5}
.wf-region .rg-tag{color:var(--accent2);margin-top:2px}
.wf-region small{display:block;color:var(--mute);margin-top:4px;font-size:.78rem;line-height:1.4}
.badge.rg{background:#e8effb;color:var(--accent2)}
.wf-regional{margin-top:8px;padding-top:6px;border-top:1px solid var(--line)}
.wf-sub{font-size:.8rem;font-weight:700;color:var(--accent2);margin:2px 0 0}
.wf-regional .item:first-of-type{border-top:0}

/* 우리 동네 위험 — 방법·한계 펼침, 범례 상대등급 표기 (09-04) */
.grid-def{background:var(--bg);border:1px solid var(--line);border-radius:10px;padding:8px 10px;margin:0 0 8px;font-size:.84rem;line-height:1.5;color:var(--text)}
.grid-def p{margin:0} .grid-def small{display:block;margin-top:4px;font-size:.72rem;color:var(--mute);font-family:var(--mono);line-height:1.45}
.grid-scale{margin:0 0 6px} .grid-scale .gs-lab{display:flex;justify-content:space-between;font-size:.7rem;color:var(--mute);font-family:var(--mono);margin-bottom:3px}
.grid-scale .gs-bar{display:flex;gap:2px;height:14px} .grid-scale .gs-bar i{flex:1;border-radius:3px;border:1px solid rgba(0,0,0,.06)}
.grid-scale .gs-vals{display:flex;gap:2px;margin-top:2px} .grid-scale .gs-vals span{flex:1;font-size:.64rem;color:var(--mute);font-family:var(--mono);text-align:right;white-space:nowrap;transform:translateX(50%)} .grid-scale .gs-vals span:last-child{transform:none}
.grid-scale .gs-dark{font-size:.78rem;color:var(--text);margin-top:6px;display:flex;flex-wrap:wrap;gap:4px 10px;align-items:center} .grid-scale .gs-dark b{color:var(--ink)}
.grid-scale .gs-nd{font-size:.7rem;color:var(--mute);font-family:var(--mono);display:inline-flex;align-items:center;gap:4px;margin-left:auto} .grid-scale .gs-nd i,.grid-scale .gs-one i{width:12px;height:12px;border-radius:3px;display:inline-block;border:1px solid rgba(0,0,0,.08)}
.grid-scale .gs-one{display:flex;align-items:center;gap:6px;font-size:.78rem;color:var(--mute);font-family:var(--mono)}
.grid-how{margin-top:6px;font-size:.8rem;color:var(--text)}
.grid-how summary{cursor:pointer;color:var(--accent);font-weight:600;list-style:none}
.grid-how summary::before{content:"ⓘ ";font-weight:400}
.grid-how ul.how{margin:6px 0 0;padding-left:16px;display:flex;flex-direction:column;gap:4px;line-height:1.45}
.grid-how ul.how b{color:var(--ink)}
.lg-note{font-size:.68rem;color:var(--mute);font-family:var(--mono);margin-left:4px}

/* ---------- "이 지역은" 서랍 + 타입 칩 + 포커스 (09-04, docs/08·10·14) ---------- */
.drawer-r{position:absolute;right:16px;top:16px;bottom:16px;width:330px;background:linear-gradient(180deg,rgba(255,255,255,.985),rgba(255,255,255,.955));backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid rgba(219,227,238,.95);border-bottom-color:#c9d3e1;border-radius:18px;z-index:10;overflow:auto;padding:16px 16px 28px;box-shadow:inset 0 1px 0 rgba(255,255,255,.95),0 0 0 1px rgba(20,32,46,.05),0 2px 4px rgba(20,32,46,.06),-4px 14px 30px -8px rgba(20,32,46,.16),-14px 44px 64px -26px rgba(20,32,46,.4);font-size:.86rem}
.stage.has-drawer .maplibregl-ctrl-bottom-right{right:346px}
.stage.has-drawer .mapstack{right:346px}
.stage.has-drawer .maplibregl-ctrl-bottom-left,.stage.has-drawer .maplibregl-ctrl-attrib{right:auto}
.rg-head{display:flex;justify-content:space-between;align-items:flex-start;gap:8px}
.rg-head h3{font-size:1.1rem;font-weight:900;letter-spacing:-.01em;margin:0}
.rg-head .eyebrow{font-family:var(--mono);font-size:.68rem;letter-spacing:.06em;text-transform:uppercase;color:var(--mute)}
.rg-x{width:26px;height:26px;border:1px solid var(--line);border-radius:8px;background:#fff;color:var(--mute);display:grid;place-items:center;font-size:.8rem;flex:none}
.rg-tags{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin:8px 0 10px}
.rg-tags .tag{font-size:.7rem;padding:2px 8px;border-radius:999px;background:var(--bg2);color:var(--text)}
.rg-tags .tag.teal{background:#e4f5ef;color:var(--teal)} .rg-tags .tag.danger{background:#fbe9e5;color:var(--danger);font-weight:700}
.rg-filters{display:flex;flex-wrap:wrap;gap:4px;margin:0 0 8px} .rg-filters .chip{padding:3px 9px;font-size:.74rem}
.rg-blk{margin-top:10px;padding-top:8px;border-top:1px solid var(--line)}
.rg-blk h4{margin:0 0 4px;font-size:.88rem;font-weight:700;color:var(--ink);display:flex;gap:8px;align-items:baseline;flex-wrap:wrap}
.rg-blk h4 small{font-family:var(--mono);font-size:.64rem;color:var(--mute);font-weight:400}
.rg-row{display:grid;grid-template-columns:1.25fr .7fr 1fr;gap:8px;padding:5px 0;border-bottom:1px dashed var(--line);font-size:.8rem;align-items:baseline}
.rg-row b{font-family:var(--mono);font-weight:500;color:var(--ink);text-align:right;font-variant-numeric:tabular-nums}
.rg-row small{font-size:.66rem;color:var(--mute);display:flex;flex-wrap:wrap;gap:4px;align-items:center} .rg-row small.mute{color:#9aa7b7}
.rg-row.sido{grid-template-columns:1fr auto 1.3fr} .rg-row.sido em{font-style:normal;color:#9aa7b7}
.rg-band{display:inline-block;font-size:.62rem;padding:1px 6px;border-radius:999px;background:var(--bg2);color:var(--mute);font-family:var(--mono);white-space:nowrap}
.rg-band.hi{background:#fbf3e4;color:var(--gold)} .rg-band.mid{background:#e8effb;color:var(--accent2)}
.rg-note{font-size:.7rem;color:var(--mute);margin:6px 0 0;line-height:1.45} .rg-note.warn{color:var(--text)}
.rg-map{border:1px solid var(--line);background:#fff;border-radius:999px;padding:1px 8px;font-size:.64rem;color:var(--accent);cursor:pointer}
.rg-link{display:flex;justify-content:space-between;gap:8px;font-size:.8rem;color:var(--accent);padding:5px 0;border-bottom:1px dashed var(--line);text-decoration:none} .rg-link small{color:var(--mute);font-size:.66rem;white-space:nowrap}
.rg-find{margin-top:8px;width:100%}
.rg-src{font-size:.66rem;color:var(--mute);margin:12px 0 0;line-height:1.45}
.rg-sido{margin:0 0 8px;font-size:.76rem} .rg-sido small{color:var(--mute);display:block;margin-bottom:3px}
.rg-dist{display:inline-flex;align-items:center;gap:3px;margin-right:8px} .rg-dist i{font-style:normal} .rg-dist b{font-family:var(--mono);font-weight:500;color:var(--ink)}
/* 패널 상단 요약 줄 */
.rg-sum{display:flex;justify-content:space-between;align-items:center;gap:8px;margin:2px 0 8px;flex-wrap:wrap}
.rg-sum-chips{display:inline-flex;align-items:center;gap:6px;flex-wrap:wrap}
/* 타입 칩 — 포켓몬식 이중 타입. 서열 없음 */
.ty-pair{display:inline-flex;align-items:center;gap:2px}
.ty-chip{display:inline-flex;align-items:center;gap:4px;padding:3px 10px;border-radius:999px;font-size:.8rem;font-weight:700;border:1px solid transparent}
.ty-chip.sm{padding:2px 8px;font-size:.74rem}
.ty-chip.ty-p{background:#e8effb;color:var(--accent2);border-color:#cfdcf4} .ty-chip.ty-p.lean{background:#fff;border:1px dashed #9db4dc;color:var(--accent2);font-weight:600} .ty-flag.lean{background:#f1f4f9;color:#566577;border:1px dashed #c9d2e0} .rg-dist.lean{opacity:.75} .ty-chip.ty-p.bold{box-shadow:0 0 0 2px rgba(26,95,196,.25)}
.ty-chip.ty-s{background:#fbf3e4;color:var(--gold);border-color:#eadfc3} .ty-chip.ty-s.none{background:var(--bg2);color:var(--mute);font-weight:400}
.ty-dot{font-style:normal;color:var(--mute);margin:0 2px}
.ty-flag{font-family:var(--mono);font-size:.62rem;padding:1px 6px;border-radius:999px;background:var(--bg2);color:var(--mute);margin-left:2px} .ty-flag.edge{background:#fff3cd;color:#8a6d00}
@media (max-width:900px), (max-width:1200px) and (orientation:portrait){ .drawer-r{display:none!important} .stage.has-drawer .maplibregl-ctrl-bottom-right,.stage.has-drawer .mapstack{right:8px} .rg-sum .desktop-only{display:none} }

/* ---------- 시트 모드(폰·태블릿 세로): "지금 여기 / 이 지역은" 두 탭 (09-04) ---------- */
.rg-tabs{display:none}
.rg-mobile{padding:4px 0 8px}
@media (max-width:900px), (max-width:1200px) and (orientation:portrait){
  .rg-tabs{display:flex;gap:4px;background:var(--bg2);border-radius:12px;padding:3px;margin:0 0 10px}
  .rg-tabs button{flex:1;border:0;background:transparent;border-radius:10px;padding:9px 10px;font-weight:700;font-size:.92rem;color:var(--mute);min-height:var(--tap)}
  .rg-tabs button.is-on{background:#fff;color:var(--ink);box-shadow:0 1px 4px rgba(20,32,46,.10)}
  /* 지역 탭이 켜지면 헤더·탭·지역 컨테이너만 남기고 '지금 여기' 내용은 숨긴다 */
  /* 지역 탭에선 요약 칩(#rgSum)도 숨김 — 서랍 헤더 태그 줄에 같은 칩이 있어 폰에서 두 번 보이던 중복(09-04 스크리닝) */
  #nowRegion.rt-region > *:not(.region-head):not(.rg-tabs):not(#regionMobile){display:none!important}
  .rg-mobile .rg-blk h4{font-size:.95rem} .rg-mobile .rg-row{font-size:.86rem;padding:7px 0} .rg-mobile .rg-row small{font-size:.72rem}
  .rg-mobile .rg-map{min-height:36px;padding:5px 12px;font-size:.78rem}
  .rg-mobile .rg-link{min-height:40px;align-items:center;padding:8px 0}
  .rg-mobile .rg-row{min-height:40px;align-items:center}
  .rg-mobile .rg-filters .chip{padding:6px 11px;font-size:.82rem;min-height:var(--tap)}
  .rg-mobile .rg-tags .ty-chip{font-size:.86rem}
}
/* 태블릿 세로: 블록 2열 */
@media (min-width:601px) and (max-width:1200px) and (orientation:portrait){
  .rg-mobile .rg-body{display:grid;grid-template-columns:1fr 1fr;gap:0 18px;align-items:start}
  .rg-mobile .rg-blk{break-inside:avoid}
}
/* 태블릿 가로(901~1200): 오른쪽 서랍을 좁게, 컨트롤 이동 폭도 맞춤 */
@media (min-width:901px) and (max-width:1200px) and (orientation:landscape){
  .drawer-r{width:290px;padding:12px 12px 24px;font-size:.82rem}
  .stage.has-drawer .maplibregl-ctrl-bottom-right,.stage.has-drawer .mapstack{right:306px}
  .rg-row{grid-template-columns:1.2fr .7fr .9fr}
}

.ty-flag.basis{background:#e8effb;color:#0f4a9e}

/* 왜 이 타입인가 (규칙 v1.1 값 대 임계) */
.rg-dex{display:inline-block;margin:-4px 0 10px;font-size:.78rem;font-weight:700;color:var(--accent);text-decoration:none} .rg-dex:hover{text-decoration:underline}
.rg-why{margin:2px 0 10px;font-size:.8rem;border:1px solid var(--line);border-radius:10px;padding:6px 10px;background:#fff}
.rg-why summary{cursor:pointer;color:var(--accent);font-weight:700;list-style:none} .rg-why summary::before{content:"ⓘ ";font-weight:400}
.rg-why ul{margin:6px 0 0;padding-left:0;list-style:none;display:flex;flex-direction:column;gap:3px}
.rg-why li{display:flex;flex-wrap:wrap;gap:6px;align-items:baseline;font-family:var(--mono);font-size:.76rem;color:var(--ink)} .rg-why li b{font-family:var(--font);font-weight:600;color:var(--text)}
.rg-why li.calm{color:var(--mute)} .rg-why li.tip{font-family:var(--font);color:var(--mute);font-size:.72rem}
.rg-ge{color:var(--gold);font-size:.7rem} .rg-why small{display:block;margin-top:6px;color:var(--mute);font-size:.68rem;line-height:1.4}
.rg-row.kv b{font-weight:500}
.linkish{border:0;background:none;padding:0;color:var(--accent);font-size:.84rem;cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.rg-nums{margin-left:6px}
@media (max-width:900px), (max-width:1200px) and (orientation:portrait){ .rg-why{font-size:.84rem} .rg-why li{font-size:.8rem} }

/* v1.3 타입 칩: 자연·사회 위해 2슬롯 + '특징' 묶음 */
.ty-chip.ty-s2{background:#e4f5ef;color:#0b7a5e;border-color:#c6e8db} .ty-chip.ty-s2.none{background:var(--bg2);color:var(--mute);font-weight:400}
.ty-traits{display:inline-flex;align-items:center;flex-wrap:wrap;gap:4px;margin-left:8px}
.ty-feat-label{font-family:var(--mono);font-size:.64rem;color:var(--mute);letter-spacing:.04em}
.ty-chip.ty-t{background:#fbf3e4;color:var(--gold);border-color:#eadfc3} .ty-chip.ty-t.none{background:var(--bg2);color:var(--mute);font-weight:400}
.rg-why li.rg-feat-h{list-style:none;margin:6px 0 0 -18px;color:var(--mute);font-size:.8rem}