/* 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: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}
.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) — 패널이 레일 옆에 들어가지 않으면 레일 위로 겹친다 */
@media (max-width:760px){
  .panel{left:var(--edge);right:var(--edge);width:auto;top:auto;bottom:calc(var(--edge) + 140px);max-height:50vh;z-index:12}
  .weather{display:none}
  .dock{left:50%!important;transform:translateX(-50%) scale(.86);bottom:calc(var(--edge) + 40px)}
  .status .credit{display:none}
}
/* ── 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)}
#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 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}

/* 다크: 블루 글씨는 남색 바탕에 묻히므로 본문색으로 */
[data-theme="dark"] .brand,[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)}

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