/* 7Eyes EARTH — B5 화면 (design/DESIGN.md §4)
 * 색·크기는 design/tokens.css 변수만 쓴다. HEX·rgb를 직접 쓰지 않는다.
 * 풀스크린 3D 위에: 왼쪽 아이콘 레일 + 레일 옆 작은 패널(높이는 내용만큼) + 바닥 독 + 상태줄 + 오른쪽 지도 조작
 */
*{box-sizing:border-box}
html,body{height:100%;margin:0;overflow:hidden}
body{background:var(--bg-map);color:var(--text);font-family:var(--font);font-size:var(--fs-m);line-height:1.5;-webkit-font-smoothing:antialiased}
[hidden]{display:none!important}
button,input,select{font:inherit;color:inherit}
button{cursor:pointer}
:focus-visible{outline:2px solid var(--c-lime);outline-offset:2px}
.num{font-family:var(--font-num);font-variant-numeric:tabular-nums}
.mono{font-family:var(--font-mono)}
.ico{width:var(--icon);height:var(--icon);display:block;flex:none;fill:none;stroke:currentColor;stroke-width:var(--icon-stroke);stroke-linecap:round;stroke-linejoin:round}

/* 3D: 늘 화면 전체 */
#globe{position:fixed;inset:0}
#globe .cesium-viewer,#globe .cesium-widget,#globe canvas{width:100%;height:100%}
.cesium-viewer-bottom,.cesium-widget-credits{display:none!important}
.fallback{position:fixed;inset:0;display:grid;place-items:center;text-align:center;color:var(--text-sub);padding:24px}

/* 떠 있는 요소 공통 */
.float{position:fixed;z-index:10;background:var(--surface);box-shadow:var(--shadow-card);border-radius:var(--radius-card)}

/* ── 왼쪽 아이콘 레일 ── */
.rail{left:var(--edge);top:var(--edge);bottom:var(--edge);width:var(--rail-w);display:flex;flex-direction:column;align-items:center;padding:14px 0 12px;gap:4px;overflow-y:auto;scrollbar-width:none}
.brand{display:flex;flex-direction:column;align-items:center;gap:6px;margin-bottom:8px;text-decoration:none;color:var(--c-blue)}
.brand img{width:72px;height:auto;display:block}
.brand span{font-family:var(--font-num);font-weight:800;font-size:13px;line-height:1.1;text-align:center}
.rail .ri{width:80px;min-height:var(--rail-item-h);border:0;border-radius:12px;background:transparent;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;color:var(--text);font-size:13px;padding:6px 0}
.rail .ri:hover{color:var(--c-blue)}
.rail .ri[aria-pressed="true"]{background:var(--c-lime);color:var(--on-lime);font-weight:700}
.rail .ri[aria-pressed="true"] .ico{stroke-width:2}
.rail .grow{flex:1;min-height:8px}
.rail .quality{font-size:var(--fs-xs);color:var(--text-sub);text-align:center;line-height:1.35}
.rail .quality b{color:var(--text-lime);font-weight:700}

/* ── 패널: 레일 오른쪽, 폭 고정, 높이는 내용만큼 ── */
.panel{left:calc(var(--edge) + var(--rail-w) + 12px);top:var(--edge);width:var(--panel-w);max-height:calc(100vh - var(--edge)*2 - 60px);overflow-y:auto;padding:14px 14px 12px;border-radius:var(--radius-card)}
.ph{display:flex;align-items:center;gap:8px;margin-bottom:10px}
.ph .t{font-size:var(--fs-h);font-weight:700}
.ph .s{font-size:var(--fs-s);color:var(--text-sub);flex:1;min-width:0}
.icon-btn{width:36px;height:36px;border:0;border-radius:10px;background:transparent;display:grid;place-items:center;color:var(--text-sub)}
.icon-btn:hover{background:var(--gray-2);color:var(--text)}
.sec{display:flex;justify-content:space-between;align-items:baseline;font-size:var(--fs-s);color:var(--text-sub);margin:12px 2px 6px}
.sec b{color:var(--c-blue);font-weight:700}
.box{border:1px solid var(--line);border-radius:10px;overflow:hidden;background:var(--surface-solid)}
.row{display:flex;align-items:center;gap:10px;min-height:44px;padding:6px 12px;border-bottom:1px solid var(--line)}
.row:last-child{border-bottom:0}
.row .n{flex:1;min-width:0}
.row .m{font-size:var(--fs-xs);color:var(--text-faint)}
.row .ico{color:var(--gray-4)}
button.row{width:100%;border:0;border-bottom:1px solid var(--line);background:transparent;text-align:left}
button.row.act:hover{background:var(--gray-1)}
button.row.act .tag{color:var(--c-blue)}
button.row:hover{background:var(--gray-2)}
.note{font-size:var(--fs-s);color:var(--text-sub);line-height:1.6;margin-top:10px}
.why{margin-top:10px;padding:10px 12px;border-radius:10px;border:1px dashed var(--outline);font-size:var(--fs-s);line-height:1.6}
.why b{color:var(--c-blue)}
.soon{opacity:.55}
.tag{font-family:var(--font-mono);font-size:10px;padding:1px 6px;border-radius:4px;background:var(--gray-2);color:var(--text-sub);margin-left:6px;vertical-align:2px}
.tag.l{background:var(--c-navy);color:var(--c-lime)}

/* 스위치 */
.sw{position:relative;width:40px;height:22px;flex:none;border:0;border-radius:11px;background:var(--gray-3);padding:0}
.sw::after{content:"";position:absolute;left:3px;top:3px;width:16px;height:16px;border-radius:8px;background:var(--surface-solid);transition:left var(--dur) var(--ease)}
.sw[aria-checked="true"]{background:var(--c-lime)}
.sw[aria-checked="true"]::after{left:21px;background:var(--c-navy)}

/* 버튼 */
.btns{display:flex;gap:6px;flex-wrap:wrap}
.btn{flex:1 1 80px;min-height:40px;border:1px solid var(--outline);border-radius:9px;background:transparent;padding:0 12px;color:var(--text)}
.btn:hover{border-color:var(--c-blue);color:var(--c-blue)}
.btn[aria-pressed="true"],.btn.primary{background:var(--c-lime);border-color:var(--c-lime);color:var(--on-lime);font-weight:700}
label.f{display:block;font-size:var(--fs-s);color:var(--text-sub);margin:12px 2px 4px}
input[type=range]{width:100%;accent-color:var(--c-lime)}
input[type=text]{width:100%;min-height:44px;border-radius:var(--radius-search);border:1px solid var(--outline);background:var(--surface-solid);padding:0 16px}

/* 주제 카드 */
.tc{display:flex;align-items:center;gap:12px;width:100%;border:0;border-bottom:1px solid var(--line);background:transparent;padding:10px 12px;text-align:left;color:var(--text)}
.tc:last-child{border-bottom:0}
.tc:hover{background:var(--gray-2)}
.tc .ic{width:44px;height:44px;border-radius:11px;background:var(--gray-2);display:grid;place-items:center;flex:none;color:var(--text)}
.tc .tx{flex:1;min-width:0}
.tc .tx b{display:block;font-size:var(--fs-l)}
.tc .chev{color:var(--text-faint);font-size:20px}
.chips{display:flex;flex-wrap:wrap;gap:5px;margin-top:5px}
.chips span{font-size:12px;padding:2px 8px;border-radius:var(--radius-pill);background:var(--gray-2);color:var(--text)}

/* 즐겨찾기 줄 */
.fav{display:flex;align-items:center;gap:9px;padding:7px 10px;border-bottom:1px solid var(--line)}
.fav:last-child{border-bottom:0}
.fav .tx{flex:1;min-width:0}
.fav .tx b{font-size:var(--fs-l)}
.fav .tx span{display:block;font-size:var(--fs-xs);color:var(--text-faint);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fav .go{min-height:30px;border:0;border-radius:7px;background:var(--gray-2);padding:0 10px;font-size:var(--fs-s)}
.fav .go:hover{background:var(--c-blue);color:var(--on-blue)}
.b3d{font-family:var(--font-num);font-size:10px;font-weight:700;padding:1px 5px;border-radius:4px;background:var(--c-navy);color:var(--c-lime);margin-left:4px}
.add{width:100%;margin-top:10px;min-height:40px;border:1px dashed var(--c-lime);border-radius:9px;background:transparent;color:var(--text-lime)}

/* 범례 */
.legend{display:flex;flex-direction:column;gap:4px;font-size:var(--fs-s);margin-top:10px}
.legend i{display:inline-block;width:12px;height:12px;margin-right:8px;vertical-align:-1px;border-radius:2px}
.legend i.dark{outline:1px solid var(--outline)}

/* ── 오른쪽 위: 날씨·특보, 테마, 나침반 ── */
.topright{position:fixed;z-index:10;top:var(--edge);right:var(--edge);display:flex;align-items:center;gap:10px}
.weather{display:flex;align-items:center;gap:10px;height:44px;padding:0 16px;border-radius:22px;background:var(--surface);box-shadow:var(--shadow-bar);font-size:var(--fs-m)}
.weather .warn{color:var(--text-orange);font-weight:700}
.weather .num{font-weight:700;font-size:var(--fs-l)}
.weather .wx-sub{color:var(--text-sub);font-size:var(--fs-s);white-space:nowrap}
.weather.loading{opacity:.75}
.weather{cursor:default;max-width:min(420px,calc(100vw - 600px))}
.theme{display:flex;padding:3px;border-radius:var(--radius-switch);background:var(--surface);box-shadow:var(--shadow-bar)}
.theme button{height:32px;padding:0 14px;border:0;border-radius:16px;background:transparent;color:var(--text-sub);font-size:var(--fs-m)}
.theme button[aria-pressed="true"]{background:var(--c-blue);color:var(--on-blue)}
.compass{position:fixed;z-index:10;top:calc(var(--edge) + 58px);right:var(--edge);width:var(--btn);height:var(--btn);border:0;border-radius:var(--radius-btn);background:var(--surface);box-shadow:var(--shadow-btn);display:grid;place-items:center;color:var(--c-blue)}
.compass .ico{transition:transform 80ms linear}

/* ── 오른쪽 아래: 내 위치 · 확대 · 축소 ── */
.mapctl{position:fixed;z-index:10;right:var(--edge);bottom:calc(var(--edge) + 48px);display:flex;flex-direction:column;gap:var(--rail-gap)}
.mapctl button{width:var(--btn);height:var(--btn);border:0;border-radius:var(--radius-btn);background:var(--surface);box-shadow:var(--shadow-btn);display:grid;place-items:center;color:var(--gray-4)}
.mapctl button:hover{color:var(--c-blue)}

/* ── 바닥 독 (§4.5): 3D 영역 가운데 아래, 상태줄 바로 위 ── */
.dock{position:fixed;z-index:11;bottom:calc(var(--edge) + 44px);left:50%;transform:translateX(-50%);display:flex;gap:4px;padding:8px;border-radius:var(--radius-timebar);background:var(--surface);box-shadow:var(--shadow-bar);transition:left var(--dur) var(--ease)}
body.panel-open .dock{left:calc((var(--edge) + var(--rail-w) + 12px + var(--panel-w) + 100vw) / 2)}
.dock button{width:76px;height:56px;border:0;border-radius:15px;background:transparent;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;font-size:12px;color:var(--text)}
.dock button .ico{color:var(--gray-4)}
.dock button:hover .ico{color:var(--c-blue)}
.dock button b{font-family:var(--font-num);font-size:17px;line-height:var(--icon)}
.dock button[aria-pressed="true"]{background:var(--c-lime);color:var(--on-lime);font-weight:700}
.dock button[aria-pressed="true"] .ico{color:var(--on-lime);stroke-width:2}
.dockpop{position:fixed;z-index:11;bottom:calc(var(--edge) + 44px + 82px);left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:6px;padding:6px 10px;border-radius:14px;background:var(--surface);box-shadow:var(--shadow-bar);font-size:var(--fs-s)}
body.panel-open .dockpop{left:calc((var(--edge) + var(--rail-w) + 12px + var(--panel-w) + 100vw) / 2)}

/* ── 상태줄 ── */
.status{position:fixed;z-index:10;left:calc(var(--edge) + var(--rail-w) + 12px);right:var(--edge);bottom:var(--edge);height:34px;display:flex;align-items:center;gap:14px;padding:0 14px;border-radius:12px;background:var(--surface);box-shadow:var(--shadow-bar);font-size:var(--fs-s);color:var(--text)}
.status .load{width:90px;height:6px;border-radius:3px;background:var(--gray-3);overflow:hidden;flex:none}
.status .load i{display:block;height:100%;width:0;background:var(--c-lime);transition:width var(--dur) var(--ease)}
.status .credit{margin-left:auto;color:var(--text-sub);font-size:var(--fs-xs)}

/* 토스트 */
.toast{position:fixed;z-index:20;top:calc(var(--edge) + 58px);left:50%;transform:translateX(-50%);max-width:min(560px,calc(100vw - 48px));padding:10px 14px;border-radius:10px;background:var(--tint-orange);color:var(--text-orange);font-size:var(--fs-m);box-shadow:var(--shadow-card)}

/* 좁은 화면 (임시: DESIGN §4.3 TODO) — 패널이 레일 옆에 들어가지 않으면 레일 위로 겹친다 */
/* ── SISTECH EARTH에서 가져온 카드 (js/features/) — 7Eyes 카드 모양으로 ── */
.legacy-card{position:fixed;z-index:12;background:var(--surface);color:var(--text);box-shadow:var(--shadow-card);border-radius:var(--radius-card);font-size:var(--fs-s)}
#card,#cvPanel{right:calc(var(--edge) + var(--btn) + 12px);top:calc(var(--edge) + 58px);width:340px;max-height:calc(100vh - 220px);display:none;flex-direction:column;overflow:hidden;border-left:6px solid var(--c-lime)}
#card.open,#cvPanel.open{display:flex}
#card .hd,#cvPanel .hd{display:flex;align-items:center;gap:10px;padding:12px 14px;border-bottom:1px solid var(--line)}
#card .hd h2,#cvPanel .hd h2{margin:0;font-size:var(--fs-l);font-weight:700;flex:1;line-height:1.3}
#card .hd h2 small,#cvPanel .hd h2 small{display:block;font-weight:400;color:var(--text-sub);font-size:var(--fs-xs)}
#card .hd button,#cvPanel .hd button{border:0;background:transparent;color:var(--text-sub);font-size:16px;width:32px;height:32px;border-radius:8px}
#card .hd button:hover,#cvPanel .hd button:hover{background:var(--gray-2);color:var(--text)}
#card .body,#cvPanel .bd{overflow:auto;padding:8px 14px 12px}
#card table{width:100%;border-collapse:collapse}#card td,#card th{padding:5px 4px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
#card th{color:var(--text-sub);font-weight:500;white-space:nowrap}
#card a,#cvPanel a{color:var(--c-blue)}
/* 가져온 카드 안쪽 (SISTECH EARTH 클래스 이름 그대로 — 7Eyes .sec·.tag와 겹치지 않게 카드 안에서만) */
#card .sec{display:block;margin:0 0 10px;color:var(--text);font-size:var(--fs-s)}
#card .kv{display:grid;grid-template-columns:1fr 1fr;gap:6px 12px}
#card .kv div{color:var(--text-sub);font-size:var(--fs-xs)}
#card .kv div b{display:block;color:var(--text);font-weight:600;font-size:var(--fs-s);margin:1px 0 0;word-break:keep-all;overflow-wrap:anywhere}
#card .meta{margin-top:8px;font-size:var(--fs-xs);color:var(--text-sub);line-height:1.55}
#card .tag{font-family:var(--font-mono);font-size:10px;padding:1px 6px;border-radius:4px;margin:0 4px 0 0;vertical-align:1px}
#card .tag.obs{background:var(--c-navy);color:var(--c-lime)}
#card .cta{display:block;margin-top:10px;padding:9px;border-radius:9px;border:1px solid var(--outline);text-align:center;text-decoration:none;color:var(--text);font-size:var(--fs-s)}
#card .cta:hover{border-color:var(--c-blue);color:var(--c-blue)}
#card button.cta:not(.ghost){background:var(--c-blue);border-color:var(--c-blue);color:var(--on-blue);font-weight:700}
#card button.cta:not(.ghost):hover{filter:brightness(1.1);color:var(--on-blue)}
#card button.cta:disabled{opacity:.45;cursor:not-allowed}
#cvPanel .dot{width:10px;height:10px;border-radius:5px;background:var(--c-lime)!important}
#cvPanel .vw{position:relative;border-radius:8px;overflow:hidden;background:var(--c-navy);aspect-ratio:16/9}
#cvPanel video{width:100%;height:100%;display:block;object-fit:contain}
#cvPanel .msg{position:absolute;inset:0;display:none;align-items:center;justify-content:center;text-align:center;color:var(--on-navy);padding:12px;font-size:var(--fs-s)}
#cvPanel .st{position:absolute;left:8px;top:6px;font-family:var(--font-mono);font-size:10px;color:var(--on-navy);background:rgb(0 0 0 / .5);padding:1px 6px;border-radius:4px}
#cvPanel .row{display:flex;gap:6px;margin:10px 0 4px;padding:0;border:0;min-height:0}
#cvPanel .row button{flex:1;min-height:34px;border:1px solid var(--outline);border-radius:8px;background:transparent;font-size:var(--fs-s)}
#cvPanel .row button:hover{border-color:var(--c-blue);color:var(--c-blue)}
#cvPanel .row button.on{background:var(--c-lime);border-color:var(--c-lime);color:var(--on-lime);font-weight:700}
#cvPanel .row button:disabled{opacity:.45;cursor:not-allowed}
#cvPanel h3{font-size:var(--fs-s);color:var(--text-sub);margin:10px 0 4px;font-weight:500}
#cvPanel .near button{display:flex;align-items:center;gap:8px;width:100%;border:0;border-bottom:1px solid var(--line);background:transparent;padding:6px 2px;text-align:left;font-size:var(--fs-s)}
#cvPanel .near button i{width:8px;height:8px;border-radius:4px;background:var(--c-navy)!important;flex:none}
#cvPanel .near button span{flex:1}#cvPanel .near em{font-style:normal;color:var(--text-faint);font-size:var(--fs-xs)}
#cvPanel .hint{margin-top:8px;color:var(--text-faint);font-size:var(--fs-xs);line-height:1.5}
#cvTip{position:fixed;z-index:13;display:none;pointer-events:none;padding:6px 10px;border-radius:8px;background:var(--c-navy);color:var(--on-navy);font-size:var(--fs-s);box-shadow:var(--shadow-card)}
#cvTip small{display:block;opacity:.8;font-size:var(--fs-xs)}
#cadLegend.legacy-card{padding:8px 12px!important;display:flex;flex-wrap:wrap;gap:4px 10px;max-width:min(720px,calc(100vw - 520px));bottom:calc(var(--edge) + 140px)!important;font-size:var(--fs-xs)}
.chip-btn{min-height:30px;padding:0 12px;border:1px solid var(--outline);border-radius:var(--radius-pill);background:transparent;font-size:var(--fs-s);color:var(--text)}
.chip-btn[aria-pressed="true"]{background:var(--c-lime);border-color:var(--c-lime);color:var(--on-lime);font-weight:700}
body.panel-open #cadLegend.legacy-card{left:calc((var(--edge) + var(--rail-w) + 12px + var(--panel-w) + 100vw) / 2)!important}

/* 실거래가 필터 바 (SISTECH EARTH 50 #rePanel) — 부동산 패널 안에서만 보임 */
body > #rePanel{display:none!important}
#reHost #rePanel{display:flex;flex-direction:column;gap:8px;margin-top:10px;padding:10px;border:1px solid var(--line);border-radius:10px;background:var(--surface-solid);font-size:var(--fs-s)}
#reHost #rePanel .row{display:flex;align-items:center;gap:6px;flex-wrap:wrap;min-height:0;padding:0;border:0}
#reHost #rePanel .q{position:relative;flex:1 1 100%}
#reHost #rePanel input[type=text]{min-height:36px;border-radius:9px;padding:0 10px;font-size:var(--fs-s)}
#reHost #rePanel input[type=number]{width:64px;min-height:30px;border:1px solid var(--outline);border-radius:7px;background:var(--surface-solid);padding:0 6px}
#reHost #rePanel ul{list-style:none;margin:4px 0 0;padding:0;position:absolute;left:0;right:0;z-index:2;background:var(--surface-solid);border-radius:8px;box-shadow:var(--shadow-card);max-height:220px;overflow:auto}
#reHost #rePanel ul li{padding:7px 10px;cursor:pointer;border-bottom:1px solid var(--line)}#reHost #rePanel ul li:hover{background:var(--gray-2)}
#reHost #rePanel .seg{display:flex;gap:2px;background:var(--gray-2);border-radius:8px;padding:2px}
#reHost #rePanel .seg button,#reHost #rePanel .chip{min-height:28px;padding:0 9px;border-radius:6px;border:1px solid transparent;background:transparent;font-size:var(--fs-s);color:var(--text);white-space:nowrap}
#reHost #rePanel .seg button.on{background:var(--c-blue);color:var(--on-blue)}
#reHost #rePanel .chip{border-color:var(--outline)}
#reHost #rePanel .chip.on{background:var(--gray-2);border-color:var(--outline);font-weight:700}
#reHost #rePanel .chip i{display:inline-block;width:9px;height:9px;border-radius:2px;margin-right:5px;background:var(--c)}
#reHost #rePanel .lbl,#reHost #rePanel .n{color:var(--text-sub);font-size:var(--fs-xs)}
#reHost #rePanel .x{display:none}

/* 건물 옆 높이 카드 (DESIGN §6.1 · js/features/heightcard.js) — 건물 지붕 화면 좌표를 따라다님 */
.hcard{position:fixed;left:0;top:0;z-index:11;display:flex;gap:12px;align-items:flex-start;min-width:240px;max-width:300px;padding:14px 12px 12px 14px;background:var(--surface);border-radius:var(--radius-card);box-shadow:var(--shadow-card);color:var(--text);pointer-events:auto;will-change:transform}
.hcard[hidden]{display:none}
.hcard .bar{flex:none;width:8px;height:44px;border-radius:4px;background:var(--c-lime)}
.hcard .hc-in{flex:1;min-width:0}
.hcard .hc-t{font-size:var(--fs-s);color:var(--text-sub);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hcard .hc-t b{color:var(--text);font-weight:700}
.hcard .hc-n{display:flex;align-items:baseline;gap:4px;margin:2px 0 4px}
.hcard .hc-n .num{font-family:var(--font-num);font-size:var(--fs-num);font-weight:700;line-height:1.1;font-variant-numeric:tabular-nums}
.hcard .hc-n .u{font-size:var(--fs-l);font-weight:600;color:var(--text-sub)}
.hcard .hc-f{font-size:var(--fs-xs);color:var(--text)}
.hcard .hc-s{margin-top:4px;font-family:"IBM Plex Mono",var(--font);font-size:var(--fs-xs);color:var(--text-sub);line-height:1.45}
.hcard .hc-s span{white-space:nowrap}
.hcard .hc-a{display:flex;justify-content:space-between;margin-top:8px}
.hcard .hc-a button{border:0;background:transparent;color:var(--c-blue);font-size:var(--fs-s);font-weight:600;padding:4px 6px;border-radius:6px;min-height:28px}
.hcard .hc-a button[data-hc=close]{color:var(--text-sub);font-weight:400}
.hcard .hc-a button:hover{background:var(--gray-2)}
/* 치수 재기 줄 (바닥 독 위) — js/features/_adapter.js #measure */
.mbar{position:fixed;z-index:11;bottom:calc(var(--edge) + 44px + 82px);left:50%;transform:translateX(-50%);display:none;flex-direction:column;gap:6px;padding:8px 12px;border-radius:14px;background:var(--surface);box-shadow:var(--shadow-bar);font-size:var(--fs-s);max-width:calc(100vw - 32px)}
.mbar.open{display:flex}
/* 오른쪽 결과 카드(반경·체적·단면)가 열리면 측정 줄을 카드 왼쪽으로 비킴 */
@media (min-width:761px){body:has(#mxPanel.open) .mbar{left:auto;right:calc(var(--edge) + var(--btn) + 12px + 360px + 12px);transform:none}}
body.panel-open .mbar{left:calc((var(--edge) + var(--rail-w) + 12px + var(--panel-w) + 100vw) / 2)}
.mbar .mtypes,.mbar .mbtns{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.mbar .mrow{display:flex;gap:10px;align-items:baseline;flex-wrap:wrap;color:var(--text-sub)}
.mbar .mrow b{font-family:var(--font-num);font-size:var(--fs-l);font-weight:700;color:var(--text);font-variant-numeric:tabular-nums}
.mbar .mbtns button{min-height:30px;padding:0 12px;border-radius:8px;border:1px solid var(--outline);background:transparent;color:var(--text);font-size:var(--fs-s)}
.mbar .mbtns button#mDone{background:var(--c-blue);border-color:var(--c-blue);color:var(--on-blue)}
.mbar .mbtns button:hover{border-color:var(--c-blue)}
/* 반경·체적·단면 결과 카드 (SISTECH EARTH 42 #mxPanel) — 오른쪽 카드 자리 */
#mxPanel{right:calc(var(--edge) + var(--btn) + 12px);top:calc(var(--edge) + 58px);width:360px;max-height:calc(100vh - 250px);display:none;flex-direction:column;overflow:hidden;border-left:6px solid var(--c-lime)}
#mxPanel.open{display:flex}
#mxPanel .hd{display:flex;align-items:center;gap:10px;padding:12px 14px;border-bottom:1px solid var(--line)}
#mxPanel .hd h2{margin:0;font-size:var(--fs-l);font-weight:700;flex:1;line-height:1.3}
#mxPanel .hd h2 small{display:block;font-weight:400;color:var(--text-sub);font-size:var(--fs-xs)}
#mxPanel .hd button{border:0;background:transparent;color:var(--text-sub);font-size:18px;width:32px;height:32px;border-radius:8px}
#mxPanel .bd{padding:10px 14px 12px;display:flex;flex-direction:column;gap:10px;overflow:auto}
#mxPanel .big{display:flex;align-items:center;gap:12px;flex-wrap:wrap;background:var(--gray-1);border-radius:10px;padding:10px 12px}
#mxPanel .big b{font-family:var(--font-num);font-size:24px;line-height:1;font-variant-numeric:tabular-nums;white-space:nowrap}
#mxPanel .big small{display:block;color:var(--text-sub);font-size:var(--fs-xs);margin-top:4px}
#mxPanel .big .cf{margin-left:auto;display:flex;flex-direction:column;gap:3px;font-size:var(--fs-xs);text-align:right}
#mxPanel .big .cf b{font-size:14px}
#mxPanel .kv{display:grid;grid-template-columns:1fr 1fr;gap:6px 10px;font-size:var(--fs-xs)}
#mxPanel .kv div{color:var(--text-sub);background:var(--gray-1);border-radius:8px;padding:7px 9px}
#mxPanel .kv div b{display:block;color:var(--text);font-size:var(--fs-s);margin-top:2px;font-variant-numeric:tabular-nums}
#mxPanel .kv div.w{grid-column:1 / -1}
#mxPanel .row{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
#mxPanel .row label{font-size:var(--fs-xs);color:var(--text-sub);white-space:nowrap}
#mxPanel .seg{display:flex;gap:2px;background:var(--gray-2);border-radius:999px;padding:2px}
#mxPanel .seg button{padding:4px 10px;border-radius:999px;font-size:var(--fs-xs);color:var(--text);background:none;border:0}
#mxPanel .seg button.on{background:var(--c-lime);color:var(--on-lime);font-weight:700}
#mxPanel input[type=number]{width:84px;height:30px;border-radius:7px;border:1px solid var(--outline);background:var(--surface-solid);color:var(--text);padding:0 8px}
#mxPanel .btns{display:flex;gap:6px;flex-wrap:wrap}
#mxPanel .btns button,#mxPanel .row > button{min-height:30px;padding:0 10px;border-radius:7px;border:1px solid var(--outline);background:transparent;color:var(--text);font-size:var(--fs-xs);font-weight:600}
#mxPanel .btns button:hover,#mxPanel .row > button:hover{border-color:var(--c-blue);color:var(--c-blue)}
#mxPanel .hint{font-size:var(--fs-xs);color:var(--text-sub);line-height:1.5}
#mxPanel .hint b{color:var(--text);font-weight:600}
#mxPanel .prog{font-size:var(--fs-s);color:var(--text-sub)}
#mxPanel .cut b{color:#B83A66}#mxPanel .fill b{color:#2A6FA8}
#mxPanel .chart{background:var(--gray-1);border-radius:10px;padding:6px 4px 2px;position:relative}
#mxPanel .chart svg{width:100%;height:auto;display:block;touch-action:none;cursor:crosshair}
#mxPanel .chart .ax{stroke:var(--line);stroke-width:1}
#mxPanel .chart .tk{fill:var(--text-sub);font-size:9.5px}
#mxPanel .chart .ln{fill:none;stroke:var(--c-blue);stroke-width:1.6;stroke-linejoin:round}
#mxPanel .chart .ar{fill:var(--c-blue);fill-opacity:.12}
#mxPanel .chart .hv{stroke:var(--text);stroke-width:1;stroke-dasharray:3 3}
#mxPanel .chart .hvt{fill:var(--text);font-size:10.5px;font-weight:700}
#mxPanel .legend{display:flex;gap:12px;font-size:var(--fs-xs);color:var(--text-sub)}
#mxPanel .legend i{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:4px;vertical-align:-1px}
[data-theme="dark"] #mxPanel .cut b{color:#F29BB8}[data-theme="dark"] #mxPanel .fill b{color:#8CC4F0}[data-theme="dark"] #mxPanel .chart .ln{stroke:var(--text)}

/* 하천 범람(31 #rfPanel) · 빗물받이 막힘(39 #rbPanel) 결과 카드 — 오른쪽 카드 자리 */
#rfPanel,#rbPanel,#xsPanel,#spPanel,#smPanel,#facPanel,#gtPanel{right:calc(var(--edge) + var(--btn) + 12px);top:calc(var(--edge) + 58px);width:380px;max-height:calc(100vh - 250px);display:none;flex-direction:column;overflow:hidden;border-left:6px solid var(--c-lime)}
#rfPanel.open,#rbPanel.open,#xsPanel.open,#spPanel.open,#smPanel.open,#facPanel.open,#gtPanel.open{display:flex}
#rfPanel .hd,#rbPanel .hd,#xsPanel .hd,#spPanel .hd,#smPanel .hd,#facPanel .hd,#gtPanel .hd{display:flex;align-items:center;gap:10px;padding:12px 14px;border-bottom:1px solid var(--line)}
#rfPanel .hd h2,#rbPanel .hd h2,#xsPanel .hd h2,#spPanel .hd h2,#smPanel .hd h2,#facPanel .hd h2,#gtPanel .hd h2{margin:0;font-size:var(--fs-l);font-weight:700;flex:1;line-height:1.3}
#rfPanel .hd h2 small,#rbPanel .hd h2 small,#xsPanel .hd h2 small,#spPanel .hd h2 small,#smPanel .hd h2 small,#facPanel .hd h2 small,#gtPanel .hd h2 small{display:block;font-weight:400;color:var(--text-sub);font-size:var(--fs-xs)}
#rfPanel .hd button,#rbPanel .hd button,#xsPanel .hd button,#spPanel .hd button,#smPanel .hd button,#facPanel .hd button,#gtPanel .hd button{border:0;background:transparent;color:var(--text-sub);font-size:18px;width:32px;height:32px;border-radius:8px}
#rfPanel .bd,#rbPanel .bd,#xsPanel .bd,#spPanel .bd,#smPanel .bd,#facPanel .bd,#gtPanel .bd{padding:10px 14px 12px;display:flex;flex-direction:column;gap:10px;overflow:auto;font-size:var(--fs-s)}
#rfPanel .big{display:flex;align-items:center;gap:10px;background:var(--gray-1);border-radius:10px;padding:10px 12px}
#rfPanel .big b{font-family:var(--font-num);font-size:24px;line-height:1;font-variant-numeric:tabular-nums}
#rfPanel .big small{display:block;color:var(--text-sub);font-size:var(--fs-xs);margin-top:3px}
#rfPanel .big .tag{margin-left:auto;padding:4px 10px;border-radius:999px;font-size:var(--fs-xs);font-weight:700;border:1px solid var(--outline);color:var(--text-sub)}
#rfPanel .big .tag.rain{color:#2A6FA8;border-color:#2A6FA8}
#rfPanel .big .tag.over{color:var(--text-orange);border-color:var(--c-orange);background:var(--tint-orange)}
#rfPanel .big .tag.drain{color:var(--text);border-color:var(--outline)}
#rfPanel .kv{display:grid;grid-template-columns:1fr 1fr;gap:6px 10px;font-size:var(--fs-xs)}
#rfPanel .kv div{background:var(--gray-1);border-radius:8px;padding:6px 8px}
#rfPanel .kv small{display:block;color:var(--text-sub)}
#rfPanel .kv b{font-size:var(--fs-s);font-variant-numeric:tabular-nums}
#rfPanel .row,#rbPanel .row{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
#rfPanel .row label{font-size:var(--fs-xs);color:var(--text-sub);white-space:nowrap}
#rfPanel input[type=number]{width:64px;height:30px;border-radius:7px;border:1px solid var(--outline);background:var(--surface-solid);color:var(--text);padding:0 8px}
#rfPanel input[type=range],#rbPanel input[type=range]{accent-color:var(--c-blue);flex:1;width:100%}
#rfPanel .btns{display:flex;gap:6px;flex-wrap:wrap}
#rfPanel .btns button,#rfPanel .row button,#rbPanel .row button{min-height:30px;padding:0 10px;border-radius:8px;border:1px solid var(--outline);background:transparent;color:var(--text);font-size:var(--fs-xs);font-weight:600}
#rfPanel .btns button:hover,#rfPanel .row button:hover,#rbPanel .row button:hover{border-color:var(--c-blue);color:var(--c-blue)}
#rfPanel .btns button.on,#rfPanel .row button.on{background:var(--c-lime);border-color:var(--c-lime);color:var(--on-lime)}
#rfPanel .play{width:40px;min-height:30px;border-radius:8px;border:0;background:var(--c-blue)!important;color:var(--on-blue)!important;font-weight:700}
#rfPanel .sec{border-top:1px solid var(--line);padding-top:8px;display:flex;flex-direction:column;gap:8px}
#rfPanel .sec h4{margin:0;font-size:var(--fs-s)}
#rfPanel canvas{width:100%;height:96px;border-radius:8px;background:var(--gray-1)}
#rfPanel .lg{display:flex;gap:8px;flex-wrap:wrap;font-size:var(--fs-xs);color:var(--text-sub)}
#rfPanel .lg i{display:inline-block;width:12px;height:12px;border-radius:3px;vertical-align:-2px;margin-right:3px}
#rfPanel .hint,#rbPanel .hint{font-size:var(--fs-xs);color:var(--text-sub);line-height:1.55}
#rfPanel .hint b,#rbPanel .hint b{color:var(--text);font-weight:600}
#rbPanel .lb{display:flex;justify-content:space-between;align-items:center;font-size:var(--fs-xs);color:var(--text-sub);margin-bottom:4px}
#rbPanel .lb b{color:var(--text);font-weight:700}
#rbPanel .seg{display:flex;gap:2px;background:var(--gray-2);padding:2px;border-radius:9px}
#rbPanel .seg button{flex:1;min-height:30px;border-radius:7px;border:0;background:none;color:var(--text);font-size:var(--fs-xs);font-weight:600;white-space:nowrap}
#rbPanel .seg button.on{background:var(--c-lime);color:var(--on-lime)}
#rbPanel .seg button.amber.on{background:var(--c-orange);color:#fff}
#rbPanel .seg button.red.on{background:#B4440C;color:#fff}
#rbPanel .cards{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
#rbPanel .card{background:var(--gray-1);border-radius:9px;padding:7px 9px}
#rbPanel .card small{display:block;font-size:10.5px;color:var(--text-sub)}
#rbPanel .card b{font-family:var(--font-num);font-size:15px;color:var(--text)}
#rbPanel .card b.red,#rbPanel .card b.amber{color:var(--text-orange)}
#rbPanel table{width:100%;border-collapse:collapse;font-size:11.5px}
#rbPanel th{color:var(--text-sub);font-weight:600;text-align:right;padding:3px 4px;border-bottom:1px solid var(--line);white-space:nowrap}
#rbPanel td{text-align:right;padding:4px;border-bottom:1px solid var(--line);white-space:nowrap;cursor:pointer;font-variant-numeric:tabular-nums}
#rbPanel th:first-child,#rbPanel td:first-child{text-align:left}
#rbPanel tr:hover td{background:var(--gray-1)}
#rbPanel td .pill{display:inline-block;padding:1px 6px;border-radius:999px;font-size:10.5px;font-weight:700;color:#fff;background:#8D99AE}
#rbPanel td .pill.b33,#rbPanel td .pill.b50,#rbPanel td .pill.b67{background:var(--c-orange)}
#rbPanel td .pill.b100{background:#B4440C}
#rbPanel td .sag{color:#2A6FA8;font-weight:700}
#rbPanel .ver{display:none;background:var(--gray-1);border-radius:9px;padding:8px 10px;font-size:11.5px;line-height:1.5}
#rbPanel .ver.show{display:block}
#rbPanel .ver table td,#rbPanel .ver table th{cursor:default;padding:2px 4px}
#rbPanel .tag{display:inline-block;padding:0 5px;border-radius:4px;font-size:10px;font-weight:700;margin-left:3px;vertical-align:middle;background:var(--gray-2);color:var(--text)}
#rbPanel .tag.est{background:var(--tint-orange);color:var(--text-orange)}
[data-theme="dark"] #rfPanel .big .tag.rain,[data-theme="dark"] #rbPanel td .sag{color:#8CC4F0;border-color:#8CC4F0}

/* 화재 연기 확산 (55 #smPanel) — 하천 범람 카드와 같은 모양 + 표·건물 목록·바람 선택 */
#smPanel .hd{display:flex;align-items:center;gap:10px;padding:12px 14px;border-bottom:1px solid var(--line)}
#smPanel .hd h2{margin:0;font-size:var(--fs-l);font-weight:700;flex:1;line-height:1.3}
#smPanel .hd h2 small{display:block;font-weight:400;color:var(--text-sub);font-size:var(--fs-xs)}
#smPanel .hd button{border:0;background:transparent;color:var(--text-sub);font-size:18px;width:32px;height:32px;border-radius:8px}
#smPanel .bd{padding:10px 14px 12px;display:flex;flex-direction:column;gap:10px;overflow:auto;font-size:var(--fs-s)}
#smPanel .big{display:flex;align-items:center;gap:10px;background:var(--gray-1);border-radius:10px;padding:10px 12px}
#smPanel .big b{font-family:var(--font-num);font-size:24px;line-height:1;font-variant-numeric:tabular-nums}
#smPanel .big small{display:block;color:var(--text-sub);font-size:var(--fs-xs);margin-top:3px}
#smPanel .big .tag{margin-left:auto;padding:4px 10px;border-radius:999px;font-size:var(--fs-xs);font-weight:700;border:1px solid var(--outline);color:var(--text-sub)}
#smPanel .big .tag.rain{color:#2A6FA8;border-color:#2A6FA8}
#smPanel .big .tag.over{color:var(--text-orange);border-color:var(--c-orange);background:var(--tint-orange)}
#smPanel .big .tag.drain{color:var(--text);border-color:var(--outline)}
#smPanel .kv{display:grid;grid-template-columns:1fr 1fr;gap:6px 10px;font-size:var(--fs-xs)}
#smPanel .kv div{background:var(--gray-1);border-radius:8px;padding:6px 8px}
#smPanel .kv small{display:block;color:var(--text-sub)}
#smPanel .kv b{font-size:var(--fs-s);font-variant-numeric:tabular-nums}
#smPanel .row{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
#smPanel .row label{font-size:var(--fs-xs);color:var(--text-sub);white-space:nowrap}
#smPanel input[type=number]{width:64px;height:30px;border-radius:7px;border:1px solid var(--outline);background:var(--surface-solid);color:var(--text);padding:0 8px}
#smPanel input[type=range]{accent-color:var(--c-blue);flex:1;width:100%}
#smPanel .btns{display:flex;gap:6px;flex-wrap:wrap}
#smPanel .btns button,#smPanel .row button{min-height:30px;padding:0 10px;border-radius:8px;border:1px solid var(--outline);background:transparent;color:var(--text);font-size:var(--fs-xs);font-weight:600}
#smPanel .btns button:hover,#smPanel .row button:hover{border-color:var(--c-blue);color:var(--c-blue)}
#smPanel .btns button.on,#smPanel .row button.on{background:var(--c-lime);border-color:var(--c-lime);color:var(--on-lime)}
#smPanel .play{width:40px;min-height:30px;border-radius:8px;border:0;background:var(--c-blue)!important;color:var(--on-blue)!important;font-weight:700}
#smPanel .sec{border-top:1px solid var(--line);padding-top:8px;display:flex;flex-direction:column;gap:8px}
#smPanel .sec h4{margin:0;font-size:var(--fs-s)}
#smPanel canvas{width:100%;height:96px;border-radius:8px;background:var(--gray-1)}
#smPanel .lg{display:flex;gap:8px;flex-wrap:wrap;font-size:var(--fs-xs);color:var(--text-sub)}
#smPanel .lg i{display:inline-block;width:12px;height:12px;border-radius:3px;vertical-align:-2px;margin-right:3px}
#smPanel .hint{font-size:var(--fs-xs);color:var(--text-sub);line-height:1.55}
#smPanel .hint b{color:var(--text);font-weight:600}
#smPanel .big .tag.fire{color:var(--text-orange);border-color:var(--c-orange);background:var(--tint-orange)}
#smPanel .big .tag.wait{color:var(--text);border-color:var(--outline)}
#smPanel table{width:100%;border-collapse:collapse;font-size:var(--fs-xs)}
#smPanel th{color:var(--text-sub);font-weight:500;text-align:left;padding:3px 4px;border-bottom:1px solid var(--line)}
#smPanel td{padding:3px 4px;border-bottom:1px solid var(--line);font-variant-numeric:tabular-nums}
#smPanel .bl{max-height:150px;overflow:auto;font-size:var(--fs-xs)}
#smPanel .bl div{padding:3px 0;border-bottom:1px solid var(--line);display:flex;gap:6px}
#smPanel .bl div span:first-child{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#smPanel .sw{position:static;display:flex;width:auto;height:auto;gap:2px;background:var(--gray-2);border-radius:8px;padding:2px}
#smPanel .sw::after{display:none}
#smPanel .sw button{height:26px;padding:0 10px;border-radius:6px;border:0;background:transparent;font-size:var(--fs-xs);color:var(--text)}
#smPanel .sw button.on{background:var(--c-lime);color:var(--on-lime);font-weight:700}
#smPanel select{height:30px;border-radius:7px;border:1px solid var(--outline);background:var(--surface-solid);color:var(--text);padding:0 8px}

/* 수평 단면 (30 #xsPanel) */
#xsPanel .big{display:flex;align-items:center;gap:10px;background:var(--gray-1);border-radius:10px;padding:10px 12px}
#xsPanel .big b{font-family:var(--font-num);font-size:var(--fs-num);line-height:1}
#xsPanel .big small{display:block;color:var(--text-sub);font-size:var(--fs-xs);margin-top:3px}
#xsPanel .big .st{display:flex;flex-direction:column;gap:4px;margin-left:auto}
#xsPanel .big .st button{width:40px;height:30px;border-radius:7px;border:1px solid var(--outline);background:var(--surface-solid);color:var(--text);font-weight:700}
#xsPanel .big .st button:hover{border-color:var(--c-blue);color:var(--c-blue)}
#xsPanel .row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
#xsPanel .row label{font-size:var(--fs-xs);color:var(--text-sub);white-space:nowrap}
#xsPanel input[type=number]{width:64px;height:30px;border-radius:7px;border:1px solid var(--outline);background:var(--surface-solid);color:var(--text);padding:0 8px}
#xsPanel input[type=range],#xsPanel input[type=checkbox]{accent-color:var(--c-blue)}
#xsPanel .row button,#xsPanel .btns button{min-height:32px;padding:0 10px;border-radius:8px;border:1px solid var(--outline);background:transparent;color:var(--text);font-size:var(--fs-xs);font-weight:600;white-space:nowrap}
#xsPanel .row button:hover,#xsPanel .btns button:hover{border-color:var(--c-blue);color:var(--c-blue)}
#xsPanel .btns{display:flex;gap:6px;flex-wrap:wrap}
#xsPanel .btns button.on,#xsPanel .row button.on{background:var(--c-lime);color:var(--on-lime);border-color:var(--c-lime)}
#xsPanel .hint{font-size:var(--fs-xs);color:var(--text-sub);line-height:1.5}
#xsPanel .hint b{color:var(--text);font-weight:600}
#xsPanel .vert{display:flex;gap:10px;align-items:stretch}
#xsPanel .vert input[type=range]{writing-mode:vertical-lr;direction:rtl;width:28px;height:170px;flex:none}
#xsPanel .scale{flex:1;position:relative;height:170px;border-left:1px solid var(--line);margin-left:4px}
#xsPanel .scale i{position:absolute;left:0;width:100%;border-top:1px dashed var(--line);font-style:normal;font-size:10px;color:var(--text-sub);padding-left:6px;line-height:0}
#xsPanel .scale i.cur{border-top:2px solid var(--c-lime);color:var(--text);font-weight:700}
#xsPanel .sec{border-top:1px solid var(--line);padding-top:8px;display:flex;flex-direction:column;gap:8px}
#xsPanel .sec h4{margin:0;font-size:var(--fs-s);display:flex;align-items:center;gap:8px}
#xsPanel .sec h4 .chk{margin-left:auto;display:flex;align-items:center;gap:5px;font-weight:400;color:var(--text-sub);font-size:var(--fs-xs)}
#xsPanel .warn{color:var(--text-orange)}

/* ── 시연 모드 (DESIGN §6.4 · js/demo.js) ── */
.rail,#panel,.dock,.dockpop,.status,.mapctl,#compass,.weather,.mbar,.mbrand,#mxPanel,#rfPanel,#rbPanel,#xsPanel,#spPanel,#smPanel,#facPanel,#gtPanel,#card,#cvPanel,#cadLegend{transition:opacity var(--dur) var(--ease)}
body.demo .rail,body.demo #panel,body.demo .dock,body.demo .dockpop,body.demo .status,body.demo .mapctl,body.demo #compass,body.demo .weather,body.demo .mbar,body.demo .mbrand,
body.demo #mxPanel,body.demo #rfPanel,body.demo #rbPanel,body.demo #xsPanel,body.demo #spPanel,body.demo #smPanel,body.demo #facPanel,body.demo #gtPanel,body.demo #card,body.demo #cvPanel,body.demo #cadLegend,body.demo #toast{opacity:0!important;pointer-events:none!important}
.demo-ui{position:fixed;z-index:13;opacity:0;pointer-events:none;transition:opacity var(--dur) var(--ease)}
body.demo .demo-ui{opacity:1;pointer-events:auto}
body.demo.demo-bare .demo-ui,body.demo.demo-bare .topright,body.demo.demo-bare .hcard{opacity:0;pointer-events:none}
.topright{transition:opacity var(--dur) var(--ease)}
#demoTop{left:var(--edge);top:var(--edge);display:flex;align-items:center;gap:8px;flex-wrap:wrap}
#demoTop .demo-brand{display:flex;align-items:center;gap:8px;height:44px;padding:0 14px;border-radius:14px;background:var(--surface);box-shadow:var(--shadow-bar)}
#demoTop .demo-brand img{height:22px;width:auto;display:block}
#demoTop .demo-brand b{font-family:var(--font-num);font-weight:700;font-size:18px;color:var(--c-blue)}
#demoTop .demo-chip{height:32px;display:flex;align-items:center;padding:0 12px;border-radius:var(--radius-pill);background:var(--surface);box-shadow:var(--shadow-bar);font-size:var(--fs-s);color:var(--text)}
#demoTop .demo-chip.num{font-family:var(--font-mono);font-size:var(--fs-xs)}
#demoTop .demo-badge{height:32px;display:flex;align-items:center;gap:8px;padding:0 12px;border-radius:var(--radius-pill);background:var(--c-navy);color:#fff;font-size:var(--fs-s);font-weight:600}
#demoTop .demo-badge i{width:8px;height:8px;border-radius:50%;background:var(--c-lime);box-shadow:0 0 0 3px rgb(140 198 63 / .25)}
#demoIcons{right:var(--edge);top:50%;transform:translateY(-50%);display:flex;flex-direction:column;gap:8px;padding:8px;border-radius:16px;background:var(--surface);box-shadow:var(--shadow-bar)}
#demoIcons button{width:var(--btn);height:var(--btn);border:0;border-radius:12px;background:transparent;color:var(--text);display:grid;place-items:center}
#demoIcons button .ico{width:24px;height:24px}
#demoIcons button:hover{color:var(--c-blue);background:var(--gray-1)}
#demoIcons button[aria-pressed="true"]{background:var(--c-lime);color:var(--on-lime)}
#demoIcons button[aria-pressed="true"] .ico{stroke-width:2}
#demoCap{left:var(--edge);bottom:calc(var(--edge) + 76px);width:360px;padding:14px 16px 14px 20px;border-radius:var(--radius-card);background:var(--surface);box-shadow:var(--shadow-card);border-left:6px solid var(--c-blue)}
#demoCap.empty{display:none}
#demoCap .demo-eyebrow{font-family:var(--font-mono);font-size:var(--fs-xs);color:var(--text-sub)}
#demoCap h2{margin:2px 0 4px;font-size:20px;font-weight:700;line-height:1.3}
#demoCap p{margin:0;color:var(--text-sub);font-size:var(--fs-s);line-height:1.55}
#demoCap .demo-meta{margin-top:8px;font-size:var(--fs-s);color:var(--text-sub)}
#demoCap .demo-meta b{font-family:var(--font-num);font-size:var(--fs-l);color:var(--text)}
#demoBar{left:50%;bottom:var(--edge);transform:translateX(-50%);display:flex;align-items:center;gap:8px;padding:6px 8px;border-radius:16px;background:var(--surface);box-shadow:var(--shadow-bar);max-width:calc(100vw - 32px)}
#demoBar > button{width:40px;height:40px;border:0;border-radius:10px;background:transparent;color:var(--text);display:grid;place-items:center;flex:none}
#demoBar > button:hover{background:var(--gray-1)}
#demoBar #demoPlay{background:var(--c-blue);color:var(--on-blue)}
#demoBar .demo-steps{display:flex;gap:4px;overflow-x:auto}
#demoBar .demo-steps button{height:36px;padding:0 10px;border:0;border-radius:var(--radius-pill);background:var(--gray-1);color:var(--text-sub);font-size:var(--fs-xs);white-space:nowrap;display:flex;align-items:center;gap:6px}
#demoBar .demo-steps button .num{font-family:var(--font-mono);font-size:10px}
#demoBar .demo-steps button.done{color:var(--text)}
#demoBar .demo-steps button.cur{background:var(--chip-cur);color:#fff;font-weight:700}
#demoBar #demoClock{font-family:var(--font-mono);font-size:var(--fs-xs);color:var(--text-sub);white-space:nowrap;padding:0 4px}
#demoBar .demo-prog{position:absolute;left:14px;right:14px;bottom:2px;height:2px;border-radius:2px;background:var(--gray-2);overflow:hidden}
#demoBar .demo-prog i{display:block;height:100%;width:0;background:var(--c-lime)}
[data-theme="dark"] #demoTop .demo-brand b{color:var(--text)}
[data-theme="dark"] #demoBar .demo-steps button.cur{background:var(--c-blue)}
@media (max-width:760px){
  #demoCap{left:var(--edge);right:var(--edge);width:auto;bottom:calc(var(--edge) + 64px)}
  #demoBar .demo-steps button{padding:0 8px}
  #demoBar .demo-steps button > :not(.num){display:none}
  #demoIcons{top:auto;bottom:calc(var(--edge) + 64px + 140px);transform:none}
}

/* 전세 안전 체크 · 시민용 결과 (js/features/jeonse-citizen.js) — 상태색: 위험·주의 = 오렌지(경고), 괜찮음 = 본문색, 판단 불가 = 회색 */
.jc{display:flex;flex-direction:column;gap:10px;margin-top:6px}
.jc-head{padding:12px 14px;border-radius:10px;background:var(--gray-1);display:flex;flex-direction:column;gap:2px}
.jc-head b{font-size:var(--fs-l);line-height:1.35}
.jc-head span{font-size:var(--fs-s);color:var(--text-sub)}
.jc-head.jc-bad{background:var(--tint-orange)}.jc-head.jc-bad b{color:var(--text-orange)}
.jc-head.jc-warn b{color:var(--text-orange)}
.jc-q{border:1px solid var(--line);border-radius:10px;padding:10px 12px;display:flex;flex-direction:column;gap:4px}
.jc-q.jc-bad{border-color:var(--c-orange)}
.jc-qh{display:flex;align-items:center;gap:8px;font-size:var(--fs-s)}
.jc-dot{width:10px;height:10px;border-radius:50%;flex:none;background:var(--text);opacity:.55}
.jc-q.jc-warn .jc-dot,.jc-q.jc-bad .jc-dot{background:var(--c-orange);opacity:1}
.jc-q.jc-na .jc-dot{background:var(--gray-3);opacity:1}
.jc-big{font-family:var(--font-num);font-size:24px;font-weight:700;line-height:1.15;font-variant-numeric:tabular-nums}
.jc-q.jc-bad .jc-big,.jc-q.jc-warn .jc-big{color:var(--text-orange)}
.jc-q p{margin:0;font-size:var(--fs-s);line-height:1.6}
.jc-more{font-size:var(--fs-xs);color:var(--text-sub);line-height:1.55}
.jc-rate{display:flex;align-items:center;gap:6px;margin-top:6px;font-size:var(--fs-xs);color:var(--text-sub)}
.jc-rate input{width:72px;height:28px;border:1px solid var(--outline);border-radius:6px;background:var(--surface-solid);color:var(--text);padding:0 6px}
.jc-sec{border-top:1px solid var(--line);padding-top:10px;display:flex;flex-direction:column;gap:6px}
.jc-sec h4{margin:0;font-size:var(--fs-s);display:flex;align-items:baseline;gap:8px}
.jc-sec h4 span{font-weight:400;font-size:var(--fs-xs);color:var(--text-sub)}
.jc-line{margin:0;font-size:var(--fs-s)}
.jc-docs{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}
.jc-docs li label{display:flex;gap:8px;align-items:flex-start;padding:6px 0;border-bottom:1px solid var(--line);font-size:var(--fs-xs);color:var(--text-sub);line-height:1.5;cursor:pointer}
.jc-docs li b{color:var(--text);font-size:var(--fs-s)}
.jc-docs li em{font-style:normal;font-size:10.5px;padding:0 6px;border-radius:999px;background:var(--gray-1);color:var(--text-sub);margin-left:4px}
.jc-docs input{margin-top:3px;accent-color:var(--c-blue);flex:none}
.jc-docs input:checked + span b{text-decoration:line-through;color:var(--text-sub)}
.jc-btns{display:flex;gap:6px;flex-wrap:wrap}
.jc-btns button{flex:1;min-height:32px;padding:0 8px;border:1px solid var(--outline);border-radius:8px;background:transparent;color:var(--text);font-size:var(--fs-xs);font-weight:600;white-space:nowrap}
.jc-btns button:hover{border-color:var(--c-blue);color:var(--c-blue)}
.jc-det summary{cursor:pointer;font-size:var(--fs-xs);color:var(--c-blue)}
.jc-det .kv{margin-top:6px}
#card .jc-intro{margin:6px 0 0}
/* 전세 안전 체크 입력 칸 (SISTECH EARTH 51 form — label.f) */
#card label.f{display:flex;align-items:center;gap:8px;margin:0 0 8px;font-size:var(--fs-s);color:var(--text-sub)}
#card label.f > span:first-child{flex:0 0 84px;color:var(--text-sub)}
#card label.f input,#card label.f select{flex:1;min-width:0;height:34px;border:1px solid var(--outline);border-radius:8px;background:var(--surface-solid);color:var(--text);padding:0 10px;font-size:var(--fs-s)}
#card label.f input[readonly]{background:var(--gray-1)}
#card label.f button{flex:none;height:34px!important;border-radius:8px!important;padding:0 10px;font-size:var(--fs-xs)}
#card #js51go{background:var(--c-blue);color:var(--on-blue);border-color:var(--c-blue);font-weight:700}

/* 탐색 · 그리기 패널 (js/explore.js · js/draw.js) */
.dr-tools{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.dr-tool{display:flex;flex-direction:column;align-items:center;gap:4px;padding:10px 4px;border:1px solid var(--outline);border-radius:10px;background:transparent;color:var(--text);font-size:var(--fs-xs)}
.dr-tool .ico{width:22px;height:22px}
.dr-tool:hover{border-color:var(--c-blue);color:var(--c-blue)}
.dr-tool[aria-pressed="true"]{background:var(--c-lime);border-color:var(--c-lime);color:var(--on-lime);font-weight:700}
.ex-item,.dr-item{padding:0 4px 0 0;gap:2px}
.ex-go,.dr-go{flex:1;min-width:0;display:flex;align-items:center;gap:10px;min-height:44px;padding:6px 8px 6px 12px;border:0;background:transparent;color:var(--text);text-align:left;font-size:var(--fs-s)}
.ex-go .n,.dr-go .n{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ex-go .m,.dr-go .m{font-size:var(--fs-xs);color:var(--text-sub);white-space:nowrap}
.ex-go:hover,.dr-go:hover{color:var(--c-blue)}
.ex-x{flex:none;width:32px;height:32px;border:0;border-radius:8px;background:transparent;color:var(--text-sub);font-size:14px}
.ex-x:hover{background:var(--gray-2);color:var(--text)}
.dr-item.sel{box-shadow:inset 4px 0 0 var(--c-lime)}
.ex-in{flex:1;min-width:0;height:32px;margin:6px 0 6px 6px;border:1px solid var(--c-blue);border-radius:8px;padding:0 8px;background:var(--surface-solid);color:var(--text);font-size:var(--fs-s)}

/* 날씨 위젯 기상특보 칩 (기상청) — 오렌지 = 경고 */
.weather .wx-warn{display:inline-flex;align-items:center;height:24px;padding:0 9px;border-radius:var(--radius-pill);background:var(--tint-orange);color:var(--text-orange);font-size:var(--fs-xs);font-weight:700;white-space:nowrap}
.weather .wx-warn[hidden]{display:none}

/* 상가 입점 판정 (js/store-check.js) — 상태색: 불허·심사 필요 = 오렌지(경고), 해당 없음 = 본문색, 확인 필요 = 회색 */
#spPanel{width:390px}
#spPanel label.f{display:flex;align-items:center;gap:8px;font-size:var(--fs-s);color:var(--text-sub)}
#spPanel label.f > span{flex:0 0 40px}
#spPanel select{flex:1;min-width:0;height:36px;border:1px solid var(--outline);border-radius:8px;background:var(--surface-solid);color:var(--text);padding:0 8px;font-size:var(--fs-s)}
.sp-hint{margin:0;font-size:var(--fs-s);color:var(--text-sub);line-height:1.55}
.sp-hint.warn-t{color:var(--text-orange)}
.sp-over{display:flex;flex-direction:column;gap:2px;padding:12px 14px;border-radius:10px;background:var(--gray-1)}
.sp-over b{font-size:var(--fs-l)}
.sp-over > span:last-child{font-size:var(--fs-s);color:var(--text-sub)}
.sp-over.sp-bad{background:var(--tint-orange)}.sp-over.sp-bad b{color:var(--text-orange)}
.sp-over.sp-warn b{color:var(--text-orange)}
.sp-tag{align-self:flex-start;font-size:10.5px;font-weight:700;padding:1px 8px;border-radius:999px;background:var(--surface-solid);border:1px solid var(--outline);color:var(--text-sub)}
.sp-over.sp-bad .sp-tag,.sp-over.sp-warn .sp-tag{border-color:var(--c-orange);color:var(--text-orange)}
.sp-tbl{width:100%;border-collapse:collapse;font-size:var(--fs-xs)}
.sp-tbl th{width:72px;text-align:left;vertical-align:top;padding:8px 6px 8px 0;color:var(--text-sub);font-weight:600;border-bottom:1px solid var(--line)}
.sp-tbl td{padding:8px 0;border-bottom:1px solid var(--line);vertical-align:top}
.sp-tbl td p{margin:3px 0 2px;font-size:var(--fs-s);color:var(--text);line-height:1.5}
.sp-tbl td em{font-style:normal;color:var(--text-sub);font-size:10.5px}
.sp-st{display:inline-block;font-size:10.5px;font-weight:700;padding:0 7px;border-radius:999px;background:var(--gray-2);color:var(--text-sub)}
.sp-st.sp-bad,.sp-st.sp-warn{background:var(--tint-orange);color:var(--text-orange)}
.sp-st.sp-ok{background:var(--gray-1);color:var(--text)}
.sp-sec{border-top:1px solid var(--line);padding-top:8px;display:flex;flex-direction:column;gap:6px}
.sp-sec h4{margin:0;font-size:var(--fs-s);display:flex;gap:8px;align-items:baseline}.sp-sec h4 span{font-weight:400;font-size:var(--fs-xs);color:var(--text-sub)}
.sp-lines,.sp-links{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px;font-size:var(--fs-xs);color:var(--text-sub);line-height:1.5}
.sp-lines li{padding:6px 8px;border-radius:8px;background:var(--gray-1);border-left:3px solid var(--gray-3)}
.sp-lines li.sp-bad,.sp-lines li.sp-warn{border-left-color:var(--c-orange)}
.sp-lines li b{color:var(--text);font-size:var(--fs-s)}
.sp-lines li em,.sp-sch em{font-style:normal;color:var(--text-sub)}
.sp-links a{color:var(--c-blue)}
.sp-zone{font-size:var(--fs-s);line-height:1.55;display:flex;flex-direction:column;gap:6px}
.sp-sch{font-size:var(--fs-xs);color:var(--text)}
.sp-legend{display:flex;gap:10px;flex-wrap:wrap;font-size:var(--fs-xs);color:var(--text-sub)}
.sp-legend i{display:inline-block;width:12px;height:12px;border-radius:3px;margin-right:4px;vertical-align:-2px;opacity:.75}
.sp-legend i.ln{background:transparent;border:2px solid var(--c-navy);opacity:1}
.sp-det summary{cursor:pointer;font-size:var(--fs-xs);color:var(--c-blue)}
.sp-det p{margin:6px 0 0;font-size:var(--fs-xs);color:var(--text-sub);line-height:1.55}
.sp-foot{margin:0;font-size:10.5px;color:var(--text-sub);line-height:1.5}

/* 시설물 배치 (54 #facPanel) */
#facPanel{width:360px;font-size:var(--fs-s)}
#facPanel .bd{display:block}   /* 원래 블록 배치 — 공용 flex 열에서는 줄이 눌려 겹침 */
#facPanel h3{margin:12px 0 6px;font-size:var(--fs-xs);color:var(--c-blue);font-weight:700}#facPanel h3:first-child{margin-top:0}
#facPanel .lib{display:grid;grid-template-columns:repeat(5,1fr);gap:5px}
#facPanel .lib button{display:flex;flex-direction:column;align-items:center;gap:3px;padding:7px 2px 5px;border:1px solid var(--outline);border-radius:8px;font-size:11px;line-height:1.15;color:var(--text);background:transparent;position:relative}
#facPanel .lib button svg{width:24px;height:24px}
#facPanel .lib button.on{border-color:var(--c-lime);background:var(--c-lime);color:var(--on-lime);font-weight:700}
#facPanel .lib button i{position:absolute;top:2px;right:4px;font-style:normal;font-size:10px;color:var(--text-sub)}
#facPanel .lib button.off{opacity:.38}
#facPanel .row{display:flex;gap:6px;align-items:center;margin-top:6px;flex-wrap:wrap;min-height:0;padding:0;border:0}
#facPanel .btn{flex:1;padding:8px 6px;border-radius:8px;border:1px solid var(--outline);background:transparent;color:var(--text);font-weight:600;font-size:var(--fs-xs);text-align:center;white-space:nowrap}
#facPanel .btn:hover{border-color:var(--c-blue);color:var(--c-blue)}
#facPanel .btn.pri{background:var(--c-blue);color:var(--on-blue);border-color:var(--c-blue)}
#facPanel .btn.act{background:var(--c-lime);border-color:var(--c-lime);color:var(--on-lime)}
#facPanel .btn.sm{flex:0 0 auto;padding:6px 9px}
#facPanel .btn:disabled{opacity:.4}
#facPanel input[type=number]{width:56px;background:var(--surface-solid);color:var(--text);border:1px solid var(--outline);border-radius:6px;padding:5px 6px}
#facPanel .meta{color:var(--text-sub);font-size:var(--fs-xs);line-height:1.45;margin-top:6px}
#facPanel .kv{display:grid;grid-template-columns:auto 1fr;gap:3px 10px;font-size:var(--fs-xs)}#facPanel .kv span{color:var(--text-sub)}
#facPanel .tip{background:var(--gray-1);border:1px solid var(--line);border-radius:8px;padding:7px 9px;margin-top:8px;font-size:var(--fs-xs);line-height:1.5}
#facPanel kbd{border:1px solid var(--outline);border-radius:4px;padding:0 4px;font-size:11px;font-family:inherit}
#facPanel .cnt{display:flex;flex-wrap:wrap;gap:4px}#facPanel .cnt b{font-weight:600}

/* GeoTIFF 정사영상 (43 #gtPanel) · 수평 단면 내보내기 (48 #xsExSec) · 건물 외곽선 추출 (67 #bo67bar) */
#gtPanel{width:360px;font-size:var(--fs-s)}
#gtPanel .bd{display:block}
#gtPanel .row{display:flex;gap:6px;align-items:center;flex-wrap:wrap;margin-top:8px;min-height:0;padding:0;border:0}
#gtPanel .row label.k{flex:0 0 64px;font-size:var(--fs-xs);color:var(--text-sub)}
#gtPanel .seg{display:flex;gap:2px;background:var(--gray-2);border-radius:8px;padding:2px;flex-wrap:wrap}
#gtPanel .seg button{padding:4px 9px;border-radius:6px;border:0;background:transparent;color:var(--text);font-size:var(--fs-xs)}
#gtPanel .seg button.on{background:var(--c-lime);color:var(--on-lime);font-weight:700}
#gtPanel input[type=number]{width:72px;height:30px;border-radius:7px;border:1px solid var(--outline);background:var(--surface-solid);color:var(--text);padding:0 8px}
#gtPanel .row > button,#gtPanel .btns button{min-height:30px;padding:0 10px;border-radius:8px;border:1px solid var(--outline);background:transparent;color:var(--text);font-size:var(--fs-xs);font-weight:600}
#gtPanel .row > button:hover,#gtPanel .btns button:hover{border-color:var(--c-blue);color:var(--c-blue)}
#gtPanel .row > button.on{background:var(--c-lime);border-color:var(--c-lime);color:var(--on-lime)}
#gtPanel .btns{display:flex;gap:6px;flex-wrap:wrap;margin-top:10px}
#gtPanel .btns button.pri{background:var(--c-blue);border-color:var(--c-blue);color:var(--on-blue)}
#gtPanel .btns button:disabled{opacity:.45}
#gtPanel .kv{display:grid;grid-template-columns:1fr 1fr;gap:6px 10px;font-size:var(--fs-xs);margin-top:8px}
#gtPanel .kv div{color:var(--text-sub);background:var(--gray-1);border-radius:8px;padding:6px 8px}
#gtPanel .kv div b{display:block;color:var(--text);font-size:var(--fs-s)}
#gtPanel .kv div.w{grid-column:1 / -1}
#gtPanel .hint{font-size:var(--fs-xs);color:var(--text-sub);line-height:1.5;margin-top:8px}
#gtPanel .hint b{color:var(--text)}
#gtPanel .prog{font-size:var(--fs-xs);color:var(--text-sub);margin-top:6px}
#gtPanel .bar{height:4px;border-radius:2px;background:var(--gray-2);overflow:hidden;margin-top:4px}
#gtPanel .bar i{display:block;height:100%;background:var(--c-lime)}
#gtPanel .prev{margin-top:8px;max-width:100%;border-radius:8px;border:1px solid var(--line)}
#gtPanel .chk{display:flex;align-items:center;gap:6px;font-size:var(--fs-xs);color:var(--text)}
#xsPanel select{height:30px;border-radius:7px;border:1px solid var(--outline);background:var(--surface-solid);color:var(--text);padding:0 8px}
#xsPanel .fmt{display:flex;gap:10px;flex-wrap:wrap}
#xsPanel .fmt label{display:flex;align-items:center;gap:4px;font-size:var(--fs-xs);color:var(--text)}
#xsPanel .fmt input{accent-color:var(--c-blue)}
#xsExBtn{background:var(--c-blue)!important;color:var(--on-blue)!important;border-color:var(--c-blue)!important;font-weight:700!important}
#xsExBtn[disabled]{opacity:.6;cursor:wait}
#xsExMsg b{color:var(--text)}
#bo67bar{background:var(--surface)!important;color:var(--text)!important;box-shadow:var(--shadow-bar);border:0!important}

/* 내비 시뮬레이션 (26 #navPanel · 38 동영상 · 68 시점 버튼) — 창 기본 모양은 블록 CSS를 토큰으로 바꿔 씀 */
#navPanel .camwrap{display:flex;flex-direction:column;gap:4px}
#navPanel .camlbl{display:flex;justify-content:space-between;gap:8px;font-size:var(--fs-xs);color:var(--text-sub)}
#navPanel .camlbl #nvCamDesc{color:var(--c-blue);text-align:right;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#navPanel .camseg{display:grid;grid-template-columns:repeat(5,1fr);gap:4px;background:var(--gray-1);padding:4px;border-radius:10px}
#navPanel .camseg button{height:46px;border:0;border-radius:8px;background:none;color:var(--text);font-size:11px;font-weight:600;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;padding:0 2px}
#navPanel .camseg button svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
#navPanel .camseg button.on{background:var(--c-lime);color:var(--on-lime)}
#navPanel .camseg button:hover:not(.on){color:var(--c-blue)}
#navPanel .camseg .sep{display:none}
#navPanel .row.exp button{flex:1}
#nvPovHud{position:fixed;inset:0;pointer-events:none;z-index:15;display:none}
#nvPovHud.on{display:block}
#nvPovHud .pill{position:absolute;left:50%;top:64px;transform:translateX(-50%);background:var(--surface);box-shadow:var(--shadow-bar);border-radius:12px;padding:6px 14px;color:var(--text);font-size:var(--fs-s);font-weight:600;display:flex;gap:14px;align-items:center;white-space:nowrap}
#nvPovHud .pill b{color:var(--c-blue)}
#nvPovHud .pill span{color:var(--text-sub);font-weight:500}
#nvPovHud .hint{position:absolute;left:50%;bottom:150px;transform:translateX(-50%);background:var(--surface);border-radius:10px;padding:4px 12px;color:var(--text-sub);font-size:var(--fs-xs);white-space:nowrap}
#nvPovHud .fpm{position:absolute;left:50%;top:50%;width:64px;height:32px;transform:translate(-50%,-50%);display:none}
#nvPovHud .fpm svg{width:100%;height:100%;fill:none;stroke:#2EC4B6;stroke-width:2;filter:drop-shadow(0 0 2px rgba(0,0,0,.8))}
#nvPovHud .trk{position:absolute;display:none;border:0}
#nvPovHud .trk i{position:absolute;width:12px;height:12px;border-color:var(--c-lime);border-style:solid;filter:drop-shadow(0 0 2px rgba(0,0,0,.9))}
#nvPovHud .trk i:nth-child(1){left:0;top:0;border-width:2px 0 0 2px}
#nvPovHud .trk i:nth-child(2){right:0;top:0;border-width:2px 2px 0 0}
#nvPovHud .trk i:nth-child(3){left:0;bottom:0;border-width:0 0 2px 2px}
#nvPovHud .trk i:nth-child(4){right:0;bottom:0;border-width:0 2px 2px 0}
#nvPovHud .trk em{position:absolute;left:50%;top:-20px;transform:translateX(-50%);font-size:11px;font-weight:600;font-style:normal;color:var(--c-lime);white-space:nowrap;text-shadow:0 0 3px #000}
body.demo #navPanel,body.demo #o71hud{opacity:0!important;pointer-events:none!important}
@media (max-width:760px){#navPanel{left:var(--edge)!important;right:var(--edge)!important;top:auto!important;bottom:72px!important;width:auto!important;max-height:60vh!important;border-left:0!important;border-top:5px solid var(--c-lime)}}

/* 건물 상세 카드 (SISTECH EARTH 49) 안 글씨 */
#card{--text-dim:var(--text-sub)}
#card .lead{margin:0;line-height:1.55}
#card .warn{color:var(--text-orange)}
#card .sec[style*="display:flex"] .cta{margin-top:0;white-space:nowrap;padding:9px 6px}

/* 다크: 블루 글씨는 남색 바탕에 묻히므로 본문색으로 */
[data-theme="dark"] .brand,[data-theme="dark"] .mbrand,[data-theme="dark"] .sec b,[data-theme="dark"] .why b,[data-theme="dark"] .rail .ri:hover,[data-theme="dark"] .btn:hover,[data-theme="dark"] .mapctl button:hover,[data-theme="dark"] .dock button:hover .ico{color:var(--text)}
[data-theme="dark"] .compass{color:var(--text)}
[data-theme="dark"] .hcard .hc-a button[data-hc=more],[data-theme="dark"] #card .hd h2 small[style],[data-theme="dark"] #card a,[data-theme="dark"] #card h3{color:var(--text)!important}

/* ── 좁은 화면 (DESIGN §4.6) ── */
.mbrand{display:none}
/* 태블릿 (761~1100px): 레일은 아이콘만(라벨은 툴팁), 패널은 3D 위에 겹쳐 뜬다 */
@media (max-width:1100px) and (min-width:761px){
  :root{--rail-w:64px;--panel-w:308px;--edge:16px}
  .rail .ri{width:52px;min-height:52px;font-size:0;gap:0}
  .brand span{display:none}.brand img{width:48px}
  .rail .quality{display:none}
  .dock button{width:64px;font-size:11px}
  .weather .wx-sub{display:none}
  #card,#cvPanel,#mxPanel,#rfPanel,#rbPanel,#xsPanel,#spPanel,#smPanel,#facPanel,#gtPanel{width:300px}
  body.panel-open .dock,body.panel-open .dockpop,body.panel-open #cadLegend.legacy-card{left:50%!important}
}
/* 폰 (760px 이하): 레일 → 아래 탭 줄, 패널·카드 → 아래에서 올라오는 시트, 독은 탭 줄 위 */
@media (max-width:760px){
  :root{--edge:10px}
  .mbrand{display:flex;position:fixed;z-index:10;left:var(--edge);top:var(--edge);align-items:center;gap:6px;padding:6px 10px;border-radius:12px;background:var(--surface);box-shadow:var(--shadow-bar);text-decoration:none;color:var(--c-blue);font-family:var(--font-num);font-weight:800;font-size:13px}
  .mbrand img{height:18px;width:auto;display:block}
  .rail{left:0;right:0;top:auto;bottom:0;width:auto;height:64px;flex-direction:row;justify-content:flex-start;padding:4px 6px calc(4px + env(safe-area-inset-bottom,0px));gap:2px;border-radius:14px 14px 0 0;overflow-x:auto;overflow-y:hidden}
  .rail .brand,.rail .grow,.rail .quality{display:none}
  .rail .ri{flex:none;width:62px;min-height:52px;font-size:11px}
  .panel{left:var(--edge);right:var(--edge);width:auto;top:auto;bottom:72px;max-height:56vh;border-radius:14px}
  .status{display:none}
  .dock{bottom:76px;left:50%!important;transform:translateX(-50%);padding:5px;gap:2px}
  .dock button{width:58px;height:48px;font-size:10px}
  body.panel-open .dock,body.panel-open .dockpop,body.panel-open .mapctl{display:none}
  .dockpop{bottom:136px;left:50%!important;max-width:calc(100vw - 20px);flex-wrap:wrap;justify-content:center}
  .topright{top:var(--edge);right:var(--edge);gap:6px}
  .theme{display:none}
  .weather{height:36px;padding:0 10px;gap:6px;max-width:none}
  .weather .wx-sub,#wxLoc{display:none}
  .compass{top:calc(var(--edge) + 44px);width:40px;height:40px}
  .mapctl{bottom:140px}
  .mapctl [data-zoom]{display:none}
  .mapctl button{width:40px;height:40px}
  .toast{top:calc(var(--edge) + 44px);max-width:calc(100vw - 20px)}
  .mbar{bottom:136px;left:50%!important;width:calc(100vw - 20px)}
  #card,#cvPanel,#mxPanel,#rfPanel,#rbPanel,#xsPanel,#spPanel,#smPanel,#facPanel,#gtPanel{left:var(--edge);right:var(--edge);top:auto;bottom:72px;width:auto;max-height:60vh;border-left:0;border-top:5px solid var(--c-lime)}
  #cadLegend.legacy-card,body.panel-open #cadLegend.legacy-card{left:var(--edge)!important;right:var(--edge);transform:none!important;max-width:none;bottom:136px!important}
}

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