/* 나눔스퀘어 네오(NanumSquare Neo) 웹폰트 — 셀프호스팅 전용(폐쇄망 가드레일 6, CDN 미사용).
   woff2 는 커밋 제외(.gitignore) → 운영 배포 전 `python scripts/fetch_fonts.py` 로
   services/console/fonts/ 에 배치(빌드 시 이미지에 포함). 미배치 시 font-display:swap 이
   시스템 폴백 스택으로 렌더(무중단). */
@font-face {
  font-family: "NanumSquare Neo"; font-style: normal; font-weight: 300; font-display: swap;
  src: url("/static/fonts/NanumSquareNeoTTF-aLt.woff2") format("woff2");
}
@font-face {
  font-family: "NanumSquare Neo"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("/static/fonts/NanumSquareNeoTTF-bRg.woff2") format("woff2");
}
@font-face {
  font-family: "NanumSquare Neo"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("/static/fonts/NanumSquareNeoTTF-cBd.woff2") format("woff2");
}
@font-face {
  font-family: "NanumSquare Neo"; font-style: normal; font-weight: 800; font-display: swap;
  src: url("/static/fonts/NanumSquareNeoTTF-dEb.woff2") format("woff2");
}
@font-face {
  font-family: "NanumSquare Neo"; font-style: normal; font-weight: 900; font-display: swap;
  src: url("/static/fonts/NanumSquareNeoTTF-eHv.woff2") format("woff2");
}
/* 디스플레이 전용(인트로 워드마크) — Orbitron Black, OFL 라이선스, 로컬 셀프호스팅(폐쇄망 가드레일 6) */
@font-face {
  font-family: "Orbitron"; font-style: normal; font-weight: 900; font-display: swap;
  src: url("/static/fonts/orbitron-latin-900-normal.woff2") format("woff2");
}

:root {
  /* UI 기본 글꼴 스택 — 나눔스퀘어 네오 우선, 미로드 시 시스템 폴백 */
  --font-ui: "NanumSquare Neo", -apple-system, "Segoe UI", "Malgun Gothic", "Apple SD Gothic Neo", sans-serif;
  /* 표면 — 웜 차콜 램프(팔레트 B, 사용자 결정 2026-07-27). GitHub 쿨 네이비와 확실히 결별 */
  --bg: #16181c; --panel: #212327; --panel-2: #2b2e33; --border: #3a3d42; --border-2: #474b52;
  --text: #e6e9ed; --muted: #93a0af;
  /* 강조 — 팔레트 B 녹색(사용자 결정 2026-07-27, 정보 제공 후). ⚠ --live(우호/라이브)와 동일 색상 →
     혼동 완화 위해 accent=탁한 녹(#5a8f6a) vs live=선명한 녹(#2f9e5f) 채도차 유지. 가드레일 3 유의 */
  --accent: #5a8f6a; --live: #2f9e5f; --rep: #c07d20; --warn: #cf4448;
  --hud: rgba(33,35,39, 0.97);  /* 웜 차콜 · glassmorphism 제거 → 불투명 */
  /* 계량값 전용 서체(좌표·ETA·카운트·SNR 등) — tabular-nums 로 계기(instrument) 정체성 */
  --font-num: "NanumSquare Neo", ui-monospace, "SFMono-Regular", "Consolas", monospace;
  /* 탐지 박스 팔레트 토큰 — 경보 적색(--warn) 제외(가드레일 3: 임의 객체 위협 오인 방지) */
  --det-1: #4585d6; --det-2: #2f9e5f; --det-3: #c07d20; --det-4: #a78bd0;
  --det-5: #3fb0b8; --det-6: #6fbf82; --det-7: #d1a94a; --det-8: #d99a5f;
  /* 크래프트 시스템(REDESIGN_UX §5~7) — 여백·타입·형태 스케일 단일 소스 */
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px;
  --fs-xs: 11px; --fs-sm: 12px; --fs-base: 13px; --fs-md: 15px; --fs-lg: 18px; --fs-xl: 22px;
  --radius: 3px; --radius-lg: 5px;
  --elev-1: 0 1px 3px rgba(0,0,0,.4);      /* 패널 — 유리판 blur 대신 얇은 층위 */
  --elev-2: 0 2px 10px rgba(0,0,0,.5);     /* 오버레이 */
}
* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--text); overflow: hidden;
  font-family: var(--font-ui); font-size: 13px;
  font-variant-numeric: tabular-nums;  /* 계량값 정렬 — 계기(instrument) 정체성 */
}

/* 이모지 → SVG 아이콘 자산(모노크롬 · currentColor 상속). data/icon/ui-*.svg 를 CSS 마스크로 렌더.
   인라인 이모지를 <i class="ico ico-*"></i> 로 치환(REDESIGN 이모지 제거·자산화). */
.ico { display: inline-block; width: 1em; height: 1em; vertical-align: -0.125em;
  background-color: currentColor; flex: 0 0 auto;
  -webkit-mask: var(--u) center / contain no-repeat; mask: var(--u) center / contain no-repeat; }
.ico-radar   { --u: url(/icons/ui-radar.svg); }
.ico-target  { --u: url(/icons/ui-target.svg); }
.ico-terrain { --u: url(/icons/ui-terrain.svg); }
.ico-airdef  { --u: url(/icons/ui-airdef.svg); }
.ico-video   { --u: url(/icons/ui-video.svg); }
.ico-search  { --u: url(/icons/ui-search.svg); }
.ico-image   { --u: url(/icons/ui-image.svg); }
.ico-factory { --u: url(/icons/ui-factory.svg); }
.ico-globe   { --u: url(/icons/ui-globe.svg); }
.ico-news    { --u: url(/icons/ui-news.svg); }
.ico-building{ --u: url(/icons/ui-building.svg); }
.ico-ship    { --u: url(/icons/ui-ship.svg); }
.ico-anchor  { --u: url(/icons/ui-anchor.svg); }
.ico-soldier { --u: url(/icons/ui-soldier.svg); }
.ico-aircraft{ --u: url(/icons/ui-aircraft.svg); }
.ico-pin     { --u: url(/icons/ui-pin.svg); }
.ico-film    { --u: url(/icons/ui-film.svg); }
.ico-mic     { --u: url(/icons/ui-mic.svg); }
.ico-folder  { --u: url(/icons/ui-folder.svg); }
.ico-atom    { --u: url(/icons/ui-atom.svg); }
.ico-skull   { --u: url(/icons/ui-skull.svg); }
.ico-robot   { --u: url(/icons/ui-robot.svg); }
.ico-chart   { --u: url(/icons/ui-chart.svg); }
.ico-swords  { --u: url(/icons/ui-swords.svg); }
.ico-triangle{ --u: url(/icons/ui-triangle.svg); }
.ico-shield  { --u: url(/icons/ui-shield.svg); }

/* 답변 단위 xAI 상세 페이지 */
.xai-answer-link { display:flex; justify-content:space-between; gap:12px; margin:6px 0 10px;
  padding:7px 9px; border:1px solid #2e4560; border-radius: 6px; background:#182029; font-size:11px; }
.xai-answer-link a { color:var(--accent); text-decoration:none; font-weight:700; }
.xai-answer-link.unavailable { border-color:#5f4d26; color:var(--rep); }
body.xai-page { overflow:auto; min-height:100%; background:#131519; }
.xai-head { position:sticky; top:0; z-index:5; display:flex; align-items:center; justify-content:space-between;
  padding:14px 22px; background:rgba(23,27,33,.96); border-bottom:1px solid var(--border); }
.xai-back { color:var(--accent); text-decoration:none; }
.xai-root { max-width:1500px; margin:0 auto; padding:18px; }
.xai-loading,.xai-error { padding:30px; border:1px solid var(--border); border-radius: 4px; }
.xai-error { color:#e08a86; }
.xai-grid { display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:14px; }
.xai-card { background:var(--panel); border:1px solid var(--border); border-radius: 4px; padding:15px; margin-top:14px; }
.xai-grid .xai-card { margin-top:0; min-width:0; }
.xai-card h2 { margin:0 0 12px; font-size:15px; color:#f0f2f5; }
.xai-answer { white-space:pre-wrap; line-height:1.55; margin-bottom:10px; }
/* 결론 마크다운 프리뷰 — 헤딩·목록·코드·강조. white-space 는 blocks 로 처리(pre-wrap 해제) */
.xai-answer.xai-md { white-space:normal; }
.xai-md h3,.xai-md h4,.xai-md h5,.xai-md h6 { margin:10px 0 4px; line-height:1.3; color:var(--text); }
.xai-md h3 { font-size:15px; } .xai-md h4 { font-size:13.5px; } .xai-md h5,.xai-md h6 { font-size:12.5px; }
.xai-md p { margin:6px 0; }
.xai-md ul,.xai-md ol { margin:6px 0 6px 20px; padding:0; }
.xai-md li { margin:3px 0; }
.xai-md code { background:#0b111b; border:1px solid #2d3540; border-radius:4px; padding:1px 4px; font-size:12px; }
.xai-md pre { background:#0b111b; border:1px solid #2d3540; border-radius:6px; padding:8px 10px; overflow:auto; margin:8px 0; }
.xai-md pre code { background:none; border:none; padding:0; }
.xai-md strong { color:var(--text); }
.xai-md a { color:var(--accent); }
.xai-claim { width:100%; display:flex; flex-direction:column; align-items:flex-start; gap:4px; margin:6px 0;
  padding:9px; color:var(--text); background:#171b21; border:1px solid var(--border); border-radius: 6px; text-align:left; }
.xai-claim.supported { border-left:3px solid var(--live); }.xai-claim.unverified,.xai-claim.unsupported { border-left:3px solid var(--rep); }
.xai-claim small,.xai-step small,.xai-ev small { color:var(--muted); white-space:normal; overflow-wrap:anywhere; word-break:break-word; min-width:0; }
.xai-claim span,.xai-claim small { overflow-wrap:anywhere; }
.xai-step,.xai-ev,.xai-detection { padding:9px; margin:6px 0; border:1px solid var(--border); border-radius: 6px; }
.xai-step { display:flex; flex-direction:column; gap:4px; }.xai-step.hl,.xai-ev.hl { border-color:var(--accent); box-shadow:0 0 0 1px var(--accent); }
.xai-ev p { margin:6px 0; white-space:pre-wrap; }.xai-ev a { color:var(--accent); }
.xai-authority { display:inline-block; margin:3px 2px 2px 0; padding:1px 5px; border-radius: 4px; font-size:9px; }
.xai-authority.basis { color:#6fbf82; border:1px solid #1f7a44; }
.xai-authority.reference { color:#e6e9ed; border:1px solid #5f6b7c; }
.xai-authority-trace { margin:8px 0; padding:8px; border:1px solid #333b45; border-radius: 6px; background:#161a20; }
.xai-authority-warning { margin:5px 0; padding:5px; color:#c07d20; border-left:3px solid #c07d20; }
.xai-object-id { display:block; margin-top:4px; color:#93a0af; font-size:9px; overflow-wrap:anywhere; }
.xai-frame { position:relative; width:min(100%,520px); margin-bottom:8px; }.xai-frame img { display:block; width:100%; border-radius: 5px; }
.xai-bbox { position:absolute; border:2px solid var(--accent); background:rgba(69,133,214,.1); pointer-events:none; }
#xai-graph { width:100%; min-height:180px; background:#161a20; border-radius: 6px; display:block; }
#xai-graph line { stroke:#3a4552; stroke-width:1.4; }
#xai-graph line.active { stroke:var(--accent); stroke-width:2.4; }
#xai-graph .edge-pill { fill:#161a20; stroke:#333b45; stroke-width:1; }
#xai-graph text.edge-label { fill:#93a0af; font-size:9px; text-anchor:middle; }
#xai-graph text.node-label { fill:#e6e9ed; font-size:10px; text-anchor:middle; }
#xai-graph text.node-sub { fill:#93a0af; font-size:8px; text-anchor:middle; letter-spacing:.2px; }
#xai-graph .legend text.lg-label { fill:#93a0af; font-size:9px; text-anchor:start; }
#xai-graph .xai-node circle { fill:#25313f; stroke:#4585d6; stroke-width:1.5; }
#xai-graph .xai-node.focus circle { fill:#2f6bc0; stroke:#8fb6e6; stroke-width:2.5; }
#xai-graph .xai-node.focus .glow { fill:none; stroke:var(--accent); stroke-width:1.5; opacity:.4; }
#xai-graph .xai-node.focus text.node-sub { fill:#8fb6e6; }
#xai-graph .xai-node.active circle { fill:#123322; stroke:var(--live); stroke-width:2; }
#xai-graph .xai-node.active text.node-sub { fill:var(--live); }
#xai-graph .xai-node.reference circle { fill:#1a1f26; stroke:#5f6b7c; stroke-width:1.3; stroke-dasharray:3 3; }
.xai-card pre { white-space:pre-wrap; word-break:break-word; background:#161a20; padding:8px; border-radius: 5px; font-size:10px; }
.xai-fallback { color:#fff; background:#6e5316; }
@media (max-width:900px) { .xai-grid { grid-template-columns:1fr; } .xai-head { padding:10px; } .xai-root { padding:10px; } }

/* 배경 전면 지도 */
#map { position: fixed; inset: 0; z-index: 0; background: #12151a; }
/* 3D 전술뷰(광화문) Cesium 캔버스 — #map 위·HUD(z:10) 아래. 진입 시에만 표시(.hidden 토글) */
.cesium-container { position: fixed; inset: 0; z-index: 1; background: #12151a; }
.cesium-container .cesium-widget-credits { font-size: 10px; opacity: .6; }
.map-marker { width: 14px; height: 14px; border-radius: 50%; border: 2px solid #12151a;
  box-shadow: 0 0 0 2px rgba(255,255,255,.25), 0 0 10px rgba(0,0,0,.5); cursor: pointer; }
.maplibregl-popup-content { background: var(--panel); color: var(--text); font-size: 12px;
  border: 1px solid var(--border); border-radius: 6px; }
.maplibregl-popup-anchor-bottom .maplibregl-popup-tip { border-top-color: var(--panel); }
.maplibregl-ctrl-attrib { font-size: 10px; opacity: .65; }

/* HUD 플로팅 패널 (지도 위 오버레이) */
.hud {
  position: fixed; z-index: 10; top: 14px; width: 320px;
  background: var(--hud);  border: 1px solid var(--border); border-radius: var(--radius-lg);
  box-shadow: var(--elev-2);
  display: flex; flex-direction: column; max-height: calc(100vh - 28px);
}
.hud-left { left: 14px; }
.hud-right { right: 14px; width: 500px; transition: right .25s ease; }
/* 침투/미인가 알림 목록(.intrusion-center, 우측 고정)이 열리면 분석 어시스트를 왼쪽으로 밀어 겹침 방지 */
.hud-right.shifted { right: 368px; }
/* 결심지원 뷰(우측 끝, 380px)가 열리면 분석 어시스트를 그 왼쪽으로 밀어 나란히 배치(겹침 방지) */
.hud-right.shifted-dec { right: 408px; }
.hud-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--sp-3); border-bottom: 1px solid var(--border); flex: 0 0 auto;
  flex-wrap: nowrap; white-space: nowrap;
}
/* 우측 HUD(분석 어시스트) 헤더는 우상단 알림 벨(40px@right14, z-index 30)과 같은 우상단
   영역에 겹친다 → 접기/펴기 토글이 벨에 가리지 않게 벨 폭만큼 우측 여백 확보(.onto-head 관례). */
.hud-right .hud-head { padding-right: 54px; }
.brand { display: flex; align-items: center; gap: 8px; flex-wrap: nowrap; min-width: 0; flex: 1 1 auto; overflow: hidden; }
.brand-mark { color: var(--accent); font-size: 14px; }
img.brand-mark { width: 15px; height: 15px; display: inline-block; vertical-align: -2px; flex: 0 0 auto; }
.brand-title { font-size: 15px; font-weight: 700; letter-spacing: .3px; white-space: nowrap; flex: 0 0 auto; }
.brand .hint { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.hud-head .mini-btn { white-space: nowrap; flex: 0 0 auto; }
.poc { font-size: 10px; color: var(--rep); border: 1px solid var(--rep); padding: 1px 6px; border-radius: 4px; }
.hud-toggle { background: transparent; border: 1px solid var(--border); color: var(--muted);
  width: 22px; height: 22px; border-radius: 5px; cursor: pointer; font-weight: 700; line-height: 1; padding: 0; }
.hud-toggle:hover { border-color: var(--accent); color: var(--text); }
.hud-body { padding: var(--sp-3); overflow-y: auto; }
.hud.collapsed .hud-body { display: none; }

/* 설정 드로어(REDESIGN_UX §3 운영/설정 2계층) — 설정성 섹션을 상시 좌측에서 분리, 열면 좌측 위로 오버레이 */
.settings-drawer { position: fixed; z-index: 40; top: 14px; left: 14px; width: 360px;
  max-height: calc(100vh - 28px); display: flex; flex-direction: column;
  background: var(--hud); border: 1px solid var(--border); border-radius: var(--radius-lg);
  box-shadow: var(--elev-2); }
.settings-drawer.hidden { display: none; }
.settings-drawer .hud-body { padding: var(--sp-3); overflow-y: auto; }
.settings-drawer .drawer-section:last-child { margin-bottom: 0; }

.menu-section, .answer-section { margin-bottom: var(--sp-4); }
.menu-section:last-child, .answer-section:last-child { margin-bottom: 0; }
/* 라벨 — 대문자+와이드 트래킹(AI-tell) 완화: 소문자 유지·트래킹 축소·가중치로 위계(REDESIGN_UX §5) */
.menu-label { display: block; font-size: var(--fs-xs); font-weight: 600; letter-spacing: .2px;
  color: var(--muted); margin-bottom: var(--sp-2); }
.video-close { float: right; margin-top: -2px; padding: 1px 8px; }
/* 분석 컨텍스트 칩 — 침투 확인·식별 후 질의에 첨부되는 탐지+알림 요약 */
.analysis-focus { display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin: 8px 0 0; padding: 6px 9px; font-size: 11.5px; line-height: 1.4;
  border: 1px solid var(--accent); border-radius: 6px;
  background: rgba(69,133,214, 0.1); color: var(--text); }
.analysis-focus .af-label { font-size: 10px; text-transform: uppercase; letter-spacing: .5px;
  color: var(--accent); font-weight: 700; }
.analysis-focus .af-body { flex: 1; min-width: 0; }
.analysis-focus .af-clear { flex: 0 0 auto; padding: 0 7px; }
.hint { font-size: 10px; color: var(--muted); font-weight: normal; text-transform: none; letter-spacing: 0; }

.conn { display: flex; align-items: center; gap: 6px; font-size: 12px; margin-bottom: 12px; }
.status { font-size: 12px; color: var(--live); animation: pulse 2.4s ease-in-out infinite; }
/* 모션 다이어트(REDESIGN_UX §7): throb 강도·속도 완화 — 라이브니스 신호는 유지, 장식성 제거 */
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.62; } }
.dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
.dot.on { background: var(--live); } .dot.off { background: var(--warn); }

/* 입력/버튼 */
.scenario-row, .input-row { display: flex; gap: var(--sp-2); }
/* 응답 분량 토글(자세히 설명) — 입력창 아래 컴팩트 체크박스. */
.detail-toggle { display: inline-flex; align-items: center; gap: 4px; margin: 3px 0 2px;
  cursor: pointer; user-select: none; }
.detail-toggle input { flex: 0 0 auto; width: auto; }
select, input, button { font-size: var(--fs-sm); padding: 6px var(--sp-2); border-radius: var(--radius);
  border: 1px solid var(--border); background: #12151a; color: var(--text); }
input { flex: 1; } select { flex: 1; }
button { background: var(--accent); color: #0b0e12; border: none; cursor: pointer; font-weight: 600; }
button:hover { opacity: .9; }
/* 접근성(UX 재정의 D1): 비활성 시각 구분 + 키보드 포커스 링 */
button:disabled { opacity: .38; cursor: not-allowed; }
button.neutral { background: var(--panel); color: var(--text); border: 1px solid var(--border); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

/* OSINT */
.osint-row { display: flex; align-items: center; gap: 8px; }
.osint-toggle { display: flex; align-items: center; gap: 6px; font-size: 12px; cursor: pointer; flex: 1; }
#osint-refresh, #layer-refresh { background: var(--panel); color: var(--text); border: 1px solid var(--border);
  border-radius: 4px; cursor: pointer; padding: 1px 8px; font-size: 13px; flex: 0 0 auto; }
#osint-refresh:hover, #layer-refresh:hover { border-color: var(--accent); }
.disclaimer { font-size: 10px; color: var(--rep); line-height: 1.4; margin: 6px 0 0;
  border-left: 2px solid var(--rep); padding-left: 6px; }

/* P21: 동적 레이어 토글 — 그룹 아코디언 + 레이어 카드(출처·신뢰도·한계) */
.layer-acc { border: 1px solid var(--border); border-radius: 6px; margin-bottom: 6px; overflow: hidden; }
.layer-acc-head { width: 100%; display: flex; justify-content: space-between; align-items: center;
  background: var(--panel); color: var(--text); border: none; cursor: pointer;
  padding: 6px 9px; font-size: 12px; font-weight: 600; }
.layer-acc-head:hover { background: #262d36; }
.layer-acc-body { display: none; padding: 6px 9px; }
.layer-acc.open .layer-acc-body { display: block; }
.layer-toggle-row { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; margin: 3px 0; }
.layer-toggle-row .layer-toggle { flex: 1; }
.layer-info-btn { background: transparent; border: 1px solid var(--border); color: var(--muted);
  border-radius: 4px; padding: 0 5px; font-size: 11px; cursor: pointer; flex: 0 0 auto; }
.layer-info-btn:hover { border-color: var(--accent); color: var(--text); }
.layer-card { flex-basis: 100%; margin: 4px 0 6px; padding: 7px 9px; background: #12151a;
  border: 1px solid var(--border); border-radius: 5px; font-size: 10.5px; line-height: 1.5; }
.layer-card .lc-row { margin: 2px 0; }
.layer-card .lc-row b { color: var(--muted); margin-right: 4px; }
.layer-card ul { margin: 2px 0 2px 16px; padding: 0; }
.lp-badge { font-size: 9px; padding: 0 4px; border-radius: 3px; font-weight: 700; }
.lp-curated { color: var(--accent); border: 1px solid var(--accent); }
.lp-live { color: var(--live); border: 1px solid var(--live); }
.lp-reported { color: #d99a5f; border: 1px solid #a85a20; }

/* 영상 오버레이 */
canvas#video { background: #12151a; border: 1px solid var(--border); border-radius: 4px;
  display: block; width: 100%; height: auto; }
/* 침투 감시 시뮬레이션 — 주변 섹션과 어울리는 절제된 카드(디폴트 자동 감시).
   과한 강조(큰 폰트·박스섀도) 대신 얇은 accent 바 + 라이브 점·배지로만 상태 구분. */
.intrusion-sim { border-left: 2px solid var(--border); border-radius: 4px;
  padding: 6px 8px; background: rgba(69,133,214,.035); }
.intrusion-sim.watching { border-left-color: var(--live); }
.intrusion-sim.alerting { border-left-color: var(--rep); background: rgba(192,125,32,.06); }
.intrusion-sim-head { display: flex; align-items: center; justify-content: space-between;
  font-size: 11px; font-weight: 600; color: var(--muted);
  text-transform: uppercase; letter-spacing: .5px; margin-bottom: 4px; }
.intrusion-sim-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%;
  background: var(--muted); margin-right: 5px; }
.intrusion-sim-dot.on { background: var(--live); animation: pulse 2.4s ease-in-out infinite; }
.intrusion-sim-status { margin: 4px 0 6px; font-size: 10px; color: var(--muted); }
.intrusion-sim-row { gap: 6px; }
.badge.intrusion-sim-badge.warn { background: rgba(192,125,32,.16); color: var(--rep); border: 1px solid var(--rep); }
.badge.intrusion-sim-badge.clear { background: rgba(147,160,175,.12); color: var(--muted); border: 1px solid var(--border); }
/* emphasis 클래스가 남아 있어도 주변과 튀지 않게 최소화(과거 BOLD 강조 완화). */
.intrusion-sim.emphasis { border-left-width: 2px; box-shadow: none; }
.badge { font-size: 10px; padding: 1px 7px; border-radius: 4px; }
.badge.live { background: rgba(47,158,95,.15); color: var(--live); border: 1px solid var(--live); }
.badge.representative { background: rgba(192,125,32,.15); color: var(--rep); border: 1px solid var(--rep); }
.hidden { display: none !important; }  /* 컴포넌트 display 규칙(flex 등)보다 우선해 확실히 숨김 */
.legend, .counts { margin-top: var(--sp-2); font-size: var(--fs-xs); color: var(--muted); }
.counts { font-family: var(--font-num); }  /* 계량값 판독 — instrument 정체성(REDESIGN_UX §5) */
.legend span, .counts span { display: inline-block; margin-right: 10px; }

/* 로그 / 대화 */
.log { background: #12151a; border: 1px solid var(--border); border-radius: 5px; padding: 8px;
  max-height: 200px; overflow-y: auto; white-space: pre-wrap; line-height: 1.5; transition: max-height .2s ease; }
/* 답변이 들어오면 크게 보여준다 */
.log.has-answer { max-height: 60vh; font-size: 13.5px; padding: 10px 12px; }
/* 마크다운 렌더 본문 — pre-wrap 리셋 + 요소 스타일 */
.log .md { white-space: normal; }
.log .md > *:first-child { margin-top: 0; }
.log .md > *:last-child { margin-bottom: 0; }
.log .md p { margin: 0 0 8px; }
.log .md h1, .log .md h2, .log .md h3, .log .md h4, .log .md h5, .log .md h6 {
  margin: 12px 0 6px; line-height: 1.3; color: var(--text); font-weight: 700; }
.log .md h1 { font-size: 1.35em; } .log .md h2 { font-size: 1.2em; }
.log .md h3 { font-size: 1.08em; } .log .md h4, .log .md h5, .log .md h6 { font-size: 1em; }
.log .md ul, .log .md ol { margin: 4px 0 8px; padding-left: 20px; }
.log .md li { margin: 3px 0; }
.log .md strong { color: var(--text); font-weight: 700; }
.log .md a { color: var(--accent); }
.log .md code { background: #171b21; border: 1px solid var(--border); border-radius: 3px;
  padding: 0 4px; font-family: ui-monospace, monospace; font-size: .92em; }
.log .md pre { background: #171b21; border: 1px solid var(--border); border-radius: 5px;
  padding: 8px 10px; overflow-x: auto; margin: 6px 0 10px; }
.log .md pre code { background: none; border: none; padding: 0; }
.log .md blockquote { margin: 6px 0; padding: 2px 10px; border-left: 3px solid var(--border); color: var(--muted); }
.log .md hr { border: none; border-top: 1px solid var(--border); margin: 8px 0; }
.audit { max-height: 150px; font-family: ui-monospace, monospace; font-size: 11px; }
.msg-user { color: var(--accent); }
.msg-agent { color: var(--text); }
.audit-live { color: var(--live); } .audit-rep { color: var(--rep); } .audit-err { color: var(--warn); }
/* HITL 결정 결과(답변/근거 영역) — 승인=진행(녹) / 반려=미실행·분석 제외(경고) */
.msg-hitl { border-left: 3px solid var(--border); border-radius: 4px;
  padding: 5px 8px; margin: 6px 0; font-size: 12px; }
.msg-hitl.approved { border-left-color: var(--live); color: var(--live); background: rgba(47,158,95,.08); }
.msg-hitl.rejected { border-left-color: var(--warn); color: var(--warn); background: rgba(207,68,72,.08); }

/* HITL */
#hitl-area .hitl-card {
  border: 1px solid var(--warn); background: rgba(207,68,72,.12);
  border-radius: 6px; padding: 10px; margin-bottom: 12px;
}
.hitl-card .hitl-title { font-weight: 700; color: var(--warn); margin-bottom: 4px; }
.hitl-card .hitl-actions { margin-top: 8px; display: flex; gap: 6px; }
.hitl-card button.reject { background: var(--warn); color: #fff; }
.hitl-card .resolved { color: var(--muted); font-size: 11px; margin-top: 6px; }
.hitl-card .hitl-pending { color: var(--muted); font-size: 11px; margin-top: 6px; }
.hitl-card .hitl-actions button:disabled { opacity: 0.45; cursor: not-allowed; }
.hitl-card .hitl-rationale { margin: 6px 0 4px; padding-left: 18px; font-size: 11px; color: var(--text); }
.hitl-card .hitl-srcs { font-size: 11px; color: var(--muted); }
/* U3 결심↔HITL 표면 연결(포인터·강조만 — 게이트 로직 무변경, 가드레일 1·2) */
.hitl-card.hitl-flash { animation: hitlFlash 2.4s ease; }
@keyframes hitlFlash { 0%,100% { box-shadow: none; } 25%,65% { box-shadow: 0 0 0 2px var(--accent); } }
.dec-approval-note { margin-bottom: var(--sp-2); padding: var(--sp-2) var(--sp-3);
  font-size: var(--fs-xs); border: 1px solid var(--accent); border-radius: var(--radius);
  background: rgba(69,133,214,.12); color: var(--text); }

/* P12: 근거(Evidence) 패널 */
.evidence-section .evidence-panel { background: #12151a; border: 1px solid var(--border);
  border-radius: 5px; padding: 6px; max-height: 170px; overflow-y: auto; font-size: 11px; line-height: 1.5; }
.ev-item { padding: 5px 6px; border-bottom: 1px dashed #262d36; }
.ev-item:last-child { border-bottom: none; }
.ev-n { color: var(--accent); font-weight: 700; cursor: default; }
.ev-title { color: var(--text); font-weight: 600; }
.ev-snip { color: var(--muted); }
.ev-hl { background: rgba(69,133,214,.18); border-radius: 4px; }
a.cite { color: var(--accent); cursor: pointer; text-decoration: none; font-weight: 700; }
a.cite:hover { text-decoration: underline; }

/* 라이선스 배지 */
.lic { display: inline-block; padding: 0 5px; border-radius: 3px; font-size: 10px; font-weight: 700;
  border: 1px solid var(--border); }
.lic-pd { color: #2f9e5f; border-color: #278a50; }
.lic-cc0 { color: #4585d6; border-color: #2f6bc0; }
.lic-ccby { color: #c07d20; border-color: #8a5d0a; }
.lic-cite { color: #cf8340; border-color: #a85a20; }
.lic-other { color: var(--muted); }
.lic-nord { color: #fff; background: var(--warn); padding: 0 5px; border-radius: 3px; font-size: 10px; font-weight: 700; }

/* P12: 장비 제원 카드 팝오버 */
.equip-popover { position: fixed; z-index: 50; width: 270px; background: #171b21;
  border: 1px solid var(--accent); border-radius: 4px; padding: 10px; font-size: 12px;
  box-shadow: 0 8px 28px rgba(0,0,0,.5); }
.equip-popover .eq-head { display: flex; align-items: center; gap: 8px; font-size: 13px; margin-bottom: 6px; }
.equip-popover .eq-head svg { width: 30px; height: 30px; }
.equip-popover .eq-row { margin: 3px 0; color: var(--text); }
.equip-popover .eq-row code { font-size: 11px; color: var(--accent); }
.equip-popover .eq-low { color: var(--warn); font-weight: 700; margin-bottom: 6px; }
.equip-popover .eq-close { margin-top: 8px; width: 100%; }
#video { cursor: pointer; }

/* P19: 장비 모델 식별 카드 */
.equip-popover .id-caveat { color: var(--rep); font-size: 11px; margin-bottom: 8px;
  border-left: 2px solid var(--rep); padding-left: 6px; }
.id-cand { padding: 6px 0; border-bottom: 1px dashed #262d36; }
.id-cand:last-of-type { border-bottom: none; }
.id-cand .id-specs { color: var(--muted); font-size: 11px; margin-top: 2px; }
.id-lk { font-size: 10px; padding: 0 6px; border-radius: 4px; font-weight: 700; }
.id-high { color: var(--warn); border: 1px solid var(--warn); }
.id-medium { color: var(--rep); border: 1px solid var(--rep); }
.id-low { color: var(--muted); border: 1px solid var(--border); }
.id-origin { font-size: 10px; padding: 0 5px; border-radius: 4px; color: var(--accent);
  border: 1px solid var(--accent); }  /* 제조국(사실) — 운용국·피아 아님 */

/* P12: ETA 도달권 범례(NOTIONAL) */
.eta-legend { position: fixed; left: 50%; bottom: 16px; transform: translateX(-50%);
  z-index: 40; background: rgba(23,27,33,.9); border: 1px dashed #93a0af; color: var(--muted);
  border-radius: 6px; padding: 6px 12px; font-size: 11px; text-align: center; }
.eta-legend b { color: var(--text); }

/* 좁은 화면: 패널 세로 스택 */
/* P14: 뷰 네비 */
.view-nav { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
.view-btn { background: #12151a; color: var(--muted); border: 1px solid var(--border);
  font-weight: 600; font-size: 11px; padding: 5px 4px; }
.view-btn.active { background: var(--accent); color: #0b0e12; border-color: var(--accent); }
/* 정찰 드론 결심지원(양평) 즉시 진입 — 전용 강조 버튼(하단 시나리오 탭과 별개) */
#yangpyeong-entry-section { padding: 0; border: 0; background: none; }
.view-btn.recon-entry { width: 100%; display: block; padding: 8px 6px; font-size: 12px;
  background: rgba(69,133,214,.16); color: var(--text); border: 1px solid var(--accent); border-radius: 6px; }
.view-btn.recon-entry:hover { background: rgba(69,133,214,.30); }
/* /hanul: 헤더(브랜드 옆)로 이동한 상황도 X 버튼 — 다른 화면(COA 등)의 '상황도 X' 와 동일 외형(파란 틴트·라운드) */
.hud-head .head-view-btn { margin-left: 10px; margin-right: auto; padding: 4px 12px; font-size: 12px;
  border-radius: 6px; background: rgba(69,133,214,.14); color: var(--text); border: 1px solid var(--border); font-weight: 600; }
.hud-head .head-view-btn:hover { background: rgba(69,133,214,.26); border-color: var(--accent); }
.hud-head .head-view-btn.active { background: rgba(69,133,214,.14); color: var(--text); border-color: var(--border); }
/* 새 탭으로 이동하는 링크형 네비(심층분석·뉴스·COA) — 버튼과 동일 외형 */
a.view-link { display: inline-flex; align-items: center; justify-content: center;
  text-align: center; text-decoration: none; border-radius: 4px; cursor: pointer; }
a.view-link:hover { border-color: var(--accent); color: var(--text); }
/* 독립 페이지(deep.html·news.html) 본문 — 지도 없는 단독 뷰 */
body.page-standalone { height: 100vh; overflow: hidden; }
.mini-btn { background: transparent; border: 1px solid var(--border); color: var(--muted);
  padding: 0 6px; font-size: 12px; margin-left: 6px; border-radius: 4px; cursor: pointer; }
.mini-btn:hover { border-color: var(--accent); color: var(--text); }
.mini-btn.active { border-color: var(--accent); color: var(--text); background: rgba(69,133,214,0.12); }
.mini-btn.primary { border-color: var(--accent); color: var(--text); }
/* HANUL 자유 대응 컨트롤 */
#hanul-free .scenario-row { flex-wrap: wrap; gap: 5px; margin: 4px 0; }
#hanul-free .mini-btn { margin-left: 0; padding: 3px 8px; }
.hf-chip { display: inline-flex; align-items: center; gap: 3px; font-size: 11px;
  color: var(--muted); border: 1px solid var(--border); border-radius: 4px; padding: 1px 5px; cursor: pointer; }
.hf-chip input { margin: 0; }
#hf-ao { font-size: 11px; margin: 2px 0; color: var(--rep); }
/* 방공체계 시뮬레이션 단계 칩 */
.sim-stages { display: flex; flex-wrap: wrap; gap: 4px; margin: 6px 0; }
.sim-chip { font-size: 10.5px; color: var(--muted); border: 1px solid var(--border);
  border-radius: 4px; padding: 2px 8px; white-space: nowrap; }
.sim-chip.active { border-color: var(--accent); color: var(--text);
  background: rgba(69,133,214,0.15); font-weight: 600; }
#sim-status { margin: 4px 0; line-height: 1.4; }
/* COP 협업 참여자 — 역할 그룹(접기/펴기) + 참여자 클릭 상세 */
.collab-help-card ul { margin: 3px 0 3px 15px; padding: 0; }
.collab-help-card li { margin: 1px 0; }
.collab-help-card code { color: var(--text); background: rgba(255,255,255,0.05);
  padding: 0 4px; border-radius: 3px; }
/* 인증/주석 버튼 클릭 피드백 상태줄 */
.collab-status { min-height: 14px; margin: 2px 0 4px; font-size: 10.5px; transition: color .2s ease; }
.collab-status.cs-ok { color: var(--live); }
.collab-status.cs-warn { color: var(--rep); }
#collab-presence { line-height: 1.4; margin: 2px 0 4px; }
.cp-total { font-weight: 600; color: var(--text); margin-bottom: 5px; font-size: 12px; }
.cp-group { margin: 3px 0; }
.cp-role { display: flex; align-items: center; gap: 6px; width: 100%; text-align: left;
  background: none; border: 1px solid var(--border); border-radius: 4px;
  padding: 4px 8px; color: var(--text); cursor: pointer; font-size: 11.5px; }
.cp-role:hover { border-color: var(--accent); }
.cp-caret { font-size: 9px; color: var(--muted); transition: transform .15s ease; }
.cp-group.open .cp-caret { transform: rotate(90deg); }
.cp-role-name { font-weight: 600; }
.cp-count { margin-left: auto; font-size: 10px; font-weight: 700; min-width: 18px;
  text-align: center; padding: 0 6px; border-radius: 4px;
  background: rgba(255,255,255,0.06); color: var(--muted); }
.cp-swatch { display: inline-block; width: 8px; height: 8px; border-radius: 50%;
  background: var(--muted); flex: 0 0 auto; }
.cp-swatch.cp-commander { background: #4585d6; }
.cp-swatch.cp-operator { background: #2f9e5f; }
.cp-swatch.cp-observer { background: var(--muted); }
.cp-members { display: none; flex-wrap: wrap; gap: 4px; padding: 5px 2px 3px 16px; }
.cp-group.open .cp-members { display: flex; }
.cp-member { font-size: 10.5px; color: var(--muted); background: none;
  border: 1px solid var(--border); border-radius: 4px; padding: 2px 8px; cursor: pointer; }
.cp-member:hover { border-color: var(--accent); color: var(--text); }
.cp-member.cp-me { border-color: var(--accent); color: var(--text); font-weight: 600; }
.cp-member.sel { background: rgba(69,133,214,0.15); border-color: var(--accent); color: var(--text); }
.cp-empty { font-size: 10.5px; color: var(--muted); opacity: .6; }
.cp-detail { display: none; margin-top: 6px; padding: 7px 9px; border: 1px solid var(--border);
  border-radius: 4px; background: rgba(255,255,255,0.03); font-size: 11px; }
.cp-detail.show { display: block; }
.cpd-head { display: flex; align-items: center; gap: 6px; margin-bottom: 5px; }
.cpd-code { font-size: 9.5px; color: var(--muted); }
.cpd-row { display: flex; gap: 8px; justify-content: space-between; margin: 3px 0; }
.cpd-row > span:first-child { color: var(--muted); flex: 0 0 auto; }
.cpd-row code { color: var(--text); word-break: break-all; text-align: right; }
.cpd-note { margin-top: 6px; font-size: 9.5px; color: var(--muted); opacity: .75; }
/* COP 주석 프리셋 칩(자주 쓰는 주석 한 번에 전송) */
.chip-row { display: flex; flex-wrap: wrap; gap: 4px; margin: 4px 0; }
.note-chip { font-size: 10.5px; color: var(--muted); border: 1px solid var(--border);
  border-radius: 4px; padding: 2px 8px; white-space: nowrap; cursor: pointer; background: none; }
.note-chip:hover { border-color: var(--accent); color: var(--text); }
.note-chip:disabled { opacity: .4; cursor: not-allowed; }
#news-cap.on { color: #fff; background: var(--warn); border-color: var(--warn); animation: pulse 2.4s ease-in-out infinite; }

/* P14: 레이어 그룹 토글 */
.layer-group { display: flex; flex-direction: column; gap: 5px; }
.layer-toggle { display: flex; align-items: center; gap: 6px; font-size: 12px; cursor: pointer; }
.layer-toggle input { flex: 0 0 auto; }

/* P14: 엔티티 클릭 팝업 */
.nav-popup .maplibregl-popup-content { background: var(--hud); color: var(--text);
  border: 1px solid var(--border); border-radius: 4px; font-size: 12px; min-width: 180px; }
.pop-title { font-weight: 700; margin-bottom: 4px; }
.pop-title.ev { color: #d99a5f; }  /* 이벤트=주황(경보 적색 아님) */
.pop-row { margin: 2px 0; }
.pop-actions { margin-top: 6px; display: flex; gap: 6px; }
.pop-btn { font-size: 11px; padding: 3px 8px; background: var(--panel); color: var(--muted);
  border: 1px solid var(--border); cursor: not-allowed; }

/* P14: 뷰 스켈레톤 오버레이(심층분석·Live뉴스) */
.view-overlay { position: fixed; inset: 0; z-index: 20; display: flex;
  align-items: center; justify-content: center; background: rgba(14,16,19, 0.55); }
.view-overlay-card { background: var(--hud); border: 1px solid var(--border); border-radius: 4px;
  padding: 28px 32px; max-width: 460px; text-align: center; box-shadow: 0 12px 40px rgba(0,0,0,.5); }
.view-overlay-card h2 { margin: 0 0 10px; font-size: 18px; }
.view-overlay-card p { color: var(--muted); line-height: 1.6; margin: 0 0 18px; }

/* P15 + UX v2: 심층 분석 뷰(지도 위 풀 패널) — 3존(입력·캔버스·인스펙터) */
.deep-view { position: fixed; inset: 0; z-index: 15; background: rgba(18,21,26, 0.97);
  display: flex; flex-direction: column; }
.deep-head { display: flex; align-items: center; gap: 12px; padding: 10px 16px;
  border-bottom: 1px solid var(--border); }
.deep-head b { font-size: 15px; }
.deep-head #deep-close { margin-left: auto; }
.deep-head #news-layout { margin-left: auto; } /* ✕ 상황도 우측 정렬(사용자 지시 2026-07-21) — 버튼 묶음을 우측으로 */
.conn-badge { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; color: var(--muted); }
/* 오류 배너 — status 와 분리된 1급 피드백(--rep 톤, 경보 적색 아님) */
.deep-banner { display: flex; align-items: center; gap: 10px; margin: 8px 16px 0; padding: 7px 10px;
  border: 1px solid var(--rep); border-left-width: 3px; border-radius: 6px;
  background: rgba(192,125,32,.10); color: var(--text); font-size: 12px; }
.deep-banner .mini-btn { margin-left: auto; }
.deep-body { flex: 1; display: flex; gap: 14px; padding: 14px; overflow: hidden; }
/* 좌: 입력(접힘 가능) */
.deep-controls { width: 280px; flex: 0 0 auto; display: flex; flex-direction: column; gap: 8px; overflow-y: auto; }
.deep-col-head { display: flex; align-items: center; justify-content: space-between; }
.deep-col-head .menu-label { margin-bottom: 0; }
.deep-fold { display: flex; flex-direction: column; gap: 8px; }
.deep-controls.collapsed { width: 40px; }
.deep-controls.collapsed .deep-fold { display: none; }
.deep-controls.collapsed .menu-label { display: none; }
.deep-tabs { display: flex; gap: 4px; }
.deep-tab { flex: 1; background: #12151a; color: var(--muted); border: 1px solid var(--border);
  font-weight: 600; font-size: 11px; padding: 5px 4px; }
.deep-tab.active { background: var(--accent); color: #0b0e12; border-color: var(--accent); }
.deep-in select, .deep-in input:not([type=file]) { width: 100%; }
.deep-hls-entry { display: flex; align-items: center; gap: 6px; }
.deep-hls-entry input { min-width: 0; flex: 1; }
.deep-hls-entry .mini-btn { flex: 0 0 auto; white-space: nowrap; }
.deep-file-btn { display: inline-block; width: 100%; box-sizing: border-box; text-align: center;
  cursor: pointer; background: var(--accent); color: #0b0e12; border: 1px solid var(--accent);
  font-weight: 700; font-size: 12px; padding: 8px 6px; border-radius: 4px; }
.deep-file-btn:hover { filter: brightness(1.1); }
#deep-file-name { display: block; margin-top: 4px; word-break: break-all; }
.deep-row { display: flex; align-items: center; gap: 8px; }
.deep-row input[type=number] { width: 60px; flex: 0 0 auto; }
.deep-row input[type=range] { flex: 1; }
.deep-row button { flex: 1; }
/* 중앙: 캔버스 스테이지(반응형 — JS 가 DPR 반영 내부 해상도 계산) */
.deep-canvas-wrap { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; min-width: 0; }
.deep-stage { position: relative; width: 100%; display: flex; justify-content: center; }
#deep-canvas { background: #12151a; border: 1px solid var(--border); border-radius: 6px; max-width: 100%; }
#deep-video { display: none; }
.deep-chip { position: absolute; top: 8px; right: 8px; font-size: 11px; padding: 2px 9px;
  border-radius: 4px; background: rgba(23,27,33,.85); border: 1px solid var(--accent);
  color: var(--accent); animation: pulse 2.4s ease-in-out infinite; }
/* 플레이바(시크바 통합) + 탐지 히트맵(분석 시점만 표기) */
.deep-playbar { display: flex; align-items: center; gap: 8px; margin-top: 8px; width: 100%; max-width: 920px; }
.deep-playbar .mini-btn { flex: 0 0 auto; margin-left: 0; display: inline-flex; align-items: center; justify-content: center; padding: 4px 7px; }
.deep-playbar .mini-btn svg { width: 16px; height: 16px; display: block; }
#deep-seek { flex: 1; padding: 0; }
#deep-time { margin-left: 4px; font-variant-numeric: tabular-nums; flex: 0 0 auto; }
.deep-heat { width: 100%; max-width: 920px; height: 10px; margin-top: 4px;
  background: #12151a; border: 1px solid var(--border); border-radius: 3px; }
#deep-frame-info { margin-top: 6px; text-align: center; }
/* 우: 인스펙터(탐지 → 식별 스택 → 제원 → 보고) */
.deep-inspect { width: 320px; flex: 0 0 auto; display: flex; flex-direction: column; gap: 8px; overflow-y: auto; }
.deep-inspect .counts { margin-top: 0; }
.deep-list { background: #12151a; border: 1px solid var(--border); border-radius: 5px; padding: 6px;
  max-height: 200px; overflow-y: auto; display: flex; flex-direction: column; gap: 3px; }
.deep-det2 { display: flex; align-items: center; gap: 6px; width: 100%; text-align: left;
  background: transparent; color: var(--text); border: 1px solid transparent; border-radius: 5px;
  padding: 4px 6px; font-size: 12px; font-weight: 500; }
.deep-det2:hover, .deep-det2.hov { background: rgba(69,133,214,.10); border-color: var(--border); opacity: 1; }
.deep-det2 .ddot { width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto; }
.deep-det2 .dlbl { flex: 0 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.deep-det2 .dzone { font-size: 10px; color: var(--muted); border: 1px solid var(--border);
  border-radius: 3px; padding: 0 4px; flex: 0 0 auto; }
.deep-det2 .dbar { flex: 1; height: 4px; min-width: 30px; background: #262d36; border-radius: 2px; overflow: hidden; }
.deep-det2 .dbar > i { display: block; height: 100%; background: var(--accent); }
.deep-det2 .dpct { flex: 0 0 auto; min-width: 30px; text-align: right; }
.deep-det2.dim { opacity: .55; }  /* 저신뢰(임계값 부근) — 불확실성 시각화 */
/* 최근 탐지 로그(검색·클릭 이동) — 클릭 시 VOD 해당 시점으로 플레이어 이동 */
.deep-recent-row { display: flex; align-items: center; gap: 6px; width: 100%;
  padding: 4px 6px; margin: 2px 0; border: 1px solid var(--border);
  border-radius: 5px; color: var(--text); font-size: 11px; }
.deep-recent-row .dr-go { display: flex; align-items: center; gap: 6px; flex: 1 1 auto;
  min-width: 0; text-align: left; cursor: pointer; }
.deep-recent-row .dr-go:hover { color: var(--accent); }
.deep-recent-row .ddot { width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto; }
.deep-recent-row .dlbl { flex: 0 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.deep-recent-row .dr-t { margin-left: auto; font-family: ui-monospace, monospace; color: var(--accent); }
.deep-recent-row .dr-f { flex: 0 0 auto; }
.deep-recent-row .dr-id { flex: 0 0 auto; white-space: nowrap; }
.deep-recent-row .dr-go.dim { opacity: .55; cursor: default; }
.deep-recent-row .dr-go.dim:hover { color: inherit; }
/* 최근 탐지 행별 인라인 식별 결과 슬롯 */
.dr-ident-slot { margin: 0 6px 4px 18px; }
.dr-ident-slot:empty { display: none; }
.dr-ident-result-inner { padding: 4px 6px; background: rgba(255,255,255,0.025);
  border-left: 2px solid var(--accent); border-radius: 0 4px 4px 0; font-size: 11px; }
.dr-ident-inner { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; padding: 2px 0; }
.dr-ident-inner + .dr-ident-inner { border-top: 1px solid var(--border); }
.dr-ident-pending { padding: 2px 4px; }
.dr-slot-web { font-size: 10px; padding: 1px 5px; color: var(--muted); margin-left: auto; }
.dr-slot-web:hover { color: var(--text); border-color: var(--accent); }
/* 식별 이력 스택(최근 5건) + 스켈레톤 */
.deep-ident-stack { display: flex; flex-direction: column; gap: 6px; max-height: 300px; overflow-y: auto; }
.deep-ident { padding: 8px; border: 1px solid var(--border); border-radius: 6px; background: rgba(255,255,255,0.02); }
.deep-ident-card { margin-top: 0; }
.deep-ident-head { margin-bottom: 6px; }
.deep-ident.sk .skbar { height: 9px; border-radius: 4px; background: #262d36; margin: 6px 0;
  animation: pulse 2.4s ease-in-out infinite; }
.deep-ident.sk .skbar.w60 { width: 60%; }
.deep-ident.nudge { border-color: var(--accent); }  /* 진행 중 재클릭 안내 */
.deep-cand { padding: 4px 0; border-top: 1px solid var(--border); cursor: pointer; }
.deep-cand:first-of-type { border-top: 0; }
.deep-cand:hover { background: rgba(255,255,255,0.04); }
.deep-cand .lk { display: inline-block; min-width: 52px; text-align: center; border-radius: 4px; padding: 0 4px; font-size: 11px; }
/* 식별 후보 → 외부 웹 검색(OSINT) 보조 버튼 — 제원 조회(행 클릭)보다 낮은 위계(muted) */
.deep-cand .deep-web { float: right; margin-left: 6px; font-size: 10px; padding: 1px 6px; color: var(--muted); }
.deep-cand .deep-web:hover { color: var(--text); border-color: var(--accent); }
.lk-high { background: #2f9e5f33; color: #6fbf82; }
.lk-medium { background: #c07d2033; color: #d1a94a; }
.lk-low { background: #5f6b7c33; color: var(--muted); }
/* 제원 인라인 카드(D2 — 뷰 전환 없는 심화) */
.deep-equip { background: #12151a; border: 1px solid var(--border); border-radius: 5px;
  padding: 8px; font-size: 12px; }
.deep-equip .eq-row { margin: 3px 0; }
.deep-equip .eq-row code { font-size: 11px; color: var(--accent); }
.deep-equip .eq-low { color: var(--rep); font-weight: 700; }
/* 5. 실시간 관측 컨트롤 행·컨테이너(구 영상 맥락 카드 id/클래스 계승 — 경보색 없음, 가드레일 3) */
.deep-ctx-ctl { align-items: center; gap: 8px; }
.deep-ctx-auto { display: inline-flex; align-items: center; gap: 4px; cursor: pointer; }
.deep-ctx-auto input { margin: 0; }
.deep-context { background: #12151a; border: 1px solid var(--border); border-radius: 5px;
  padding: 8px; font-size: 12px; }
/* ── 5. 실시간 관측(WS /ws/observe) — deep 인스펙터 2컬럼(VLM v1 · v2). 구 /media 하니스에서 이식(2026-10-08) ── */
.deep-obs-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; }
.cmp-col { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.cmp-hd { font-size: 11px; color: var(--muted); border-bottom: 1px solid var(--border); padding-bottom: 3px;
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.cmp-hd b { color: var(--accent); }
.deep-obs-col { max-height: 340px; overflow-y: auto; min-height: 80px; }   /* 모델별 이벤트 시간순 누적 */
.m-obs-ev { padding: 2px 0; font-size: 12px; border-left: 3px solid var(--border); padding-left: 7px; margin: 2px 0; }
.m-obs-ev .m-obs-tag { display: inline-block; min-width: 88px; font-size: 11px; text-transform: uppercase; letter-spacing: .3px; }
.m-obs-ev.ev-detection { border-left-color: #4585d6; } .m-obs-ev.ev-detection .m-obs-tag { color: #4585d6; }
.m-obs-ev.ev-vlm_context { border-left-color: #a78bd0; } .m-obs-ev.ev-vlm_context .m-obs-tag { color: #a78bd0; }
.m-obs-ev.ev-synthesis { border-left-color: #2f9e5f; } .m-obs-ev.ev-synthesis .m-obs-tag { color: #2f9e5f; }
.m-obs-ev.ev-error { border-left-color: var(--warn); } .m-obs-ev.ev-error .m-obs-tag { color: var(--warn); }
.m-mock-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--rep); vertical-align: middle; }
.mini-btn.active { background: #4585d622; border-color: #4585d677; color: var(--accent); }
.deep-report-row { margin-top: auto; }  /* 보고 = 단계 종결 — 인스펙터 하단 고정 */
.deep-foot { margin: 4px 16px 8px; }
/* 모션 최소화 환경 존중 */
@media (prefers-reduced-motion: reduce) {
  .deep-chip, .deep-ident.sk .skbar { animation: none; }
}
.pop-btn.on { cursor: pointer; background: var(--accent); color: #0b0e12; }

/* P16: Live 뉴스 뷰 */
/* P16: 채널 선택 리스트(§6.2) — 국가별 칩, 멀티뷰 on/off */
.news-channels { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; padding: 8px 16px 0; }
.nc-label { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .5px; margin-right: 4px; }
.nc-chip { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 600;
  background: #12151a; color: var(--muted); border: 1px solid var(--border); border-radius: 4px; padding: 3px 10px; cursor: pointer; }
.nc-chip.on { color: var(--text); border-color: var(--accent); background: rgba(69,133,214,.12); }
.nc-chip .nc-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; opacity: .5; }
.nc-chip.on .nc-dot { opacity: 1; }
.nc-badge { font-size: 9px; padding: 0 4px; border-radius: 3px; font-weight: 700; }
.nc-badge.stt { color: var(--live); border: 1px solid var(--live); }
.nc-badge.cc { color: var(--rep); border: 1px solid var(--rep); }
.news-body { flex: 1; display: flex; gap: 14px; padding: 14px; overflow: hidden; }
.news-grid { flex: 1; display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  grid-auto-rows: minmax(180px, 1fr); gap: 10px; overflow-y: auto; align-content: start; }
/* 1+N 확대 레이아웃: featured 셀이 2×2 차지, 나머지는 작게 둘러쌈 */
.news-grid.featured { grid-template-columns: repeat(3, 1fr); }
.news-grid.featured .news-cell.big { grid-column: span 2; grid-row: span 2; }
.news-cell-head .cell-feat { margin-left: auto; cursor: pointer; color: var(--muted); }
.news-cell-head .cell-feat:hover { color: var(--accent); }
.news-grid.featured .news-cell-head { cursor: pointer; }
.news-cell { display: flex; flex-direction: column; border: 1px solid var(--border); border-radius: 6px; overflow: hidden; background: #12151a; }
.news-cell-head { font-size: 12px; padding: 5px 8px; border-bottom: 1px solid var(--border);
  display: flex; align-items: center; gap: 5px; }
.news-cell iframe { flex: 1; width: 100%; border: 0; min-height: 120px; }
/* P16 수정: videoId 서버 해석 컨테이너(채널 임베드 폐기 대체) */
.news-video { flex: 1; display: flex; flex-direction: column; min-height: 120px; }
.news-video iframe, .news-video video { flex: 1; width: 100%; border: 0; min-height: 120px; }
.news-cap { display: flex; align-items: center; gap: 8px; padding: 3px 8px; font-size: 11px;
  background: #12151a; border-top: 1px solid var(--border); color: var(--muted); }
.news-cap a { color: var(--accent); text-decoration: none; margin-left: auto; }
.news-tag { font-size: 10px; padding: 0 6px; border-radius: 4px; border: 1px solid var(--border); }
.news-tag.live { color: var(--warn); border-color: var(--warn); font-weight: 700; }
.news-loading { flex: 1; display: flex; align-items: center; justify-content: center;
  color: var(--muted); font-size: 12px; }
.news-fallback { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 8px; color: var(--muted); font-size: 12px; text-align: center; padding: 12px; }
.news-fallback a { color: var(--accent); text-decoration: none; font-weight: 600; border: 1px solid var(--accent);
  padding: 4px 10px; border-radius: 5px; }
.news-fallback a:hover { background: rgba(69,133,214,.12); }
.news-side { width: 340px; flex: 0 0 auto; display: flex; flex-direction: column; overflow: hidden; }
.caption-bar { background: #12151a; border: 1px solid var(--border); border-radius: 6px; padding: 8px; margin-bottom: 10px; font-size: 12px; }
.cap-row { padding: 5px 0; border-bottom: 1px dashed #262d36; }
.cap-row:last-child { border-bottom: none; }
.cap-ch { font-weight: 700; }
.cap-ko { color: var(--text); }
/* 번역만 기본 표시, 클릭 시 원문(.cap-orig)을 아래로 펼침 */
.cap-line, .cap-hist-line { cursor: pointer; }
.cap-line:hover, .cap-hist-line:hover { opacity: .85; }
.cap-toggle { font-size: 9px; color: var(--muted); margin-left: 6px; opacity: .7; }
.cap-orig { color: var(--muted); font-size: 11px; margin-top: 3px; padding-left: 8px;
  border-left: 2px solid var(--border); }
.cap-pending { font-size: 9px; color: var(--rep); }
.cap-hist-item { padding: 3px 0; border-bottom: 1px dashed #1a1f26; }
.cap-kw { color: #d99a5f; font-size: 10px; }
#caption-history { flex: 1; max-height: none; }

@media (max-width: 820px) {
  .hud { width: calc(100vw - 28px); }
  .hud-left { top: 14px; }
  .hud-right { top: auto; bottom: 14px; right: 14px; max-height: 46vh; }
  .hud-right.shifted { right: 14px; }  /* 좁은 화면은 하단 고정이라 shift 불필요 */
  .deep-body { flex-direction: column; } .deep-controls { width: 100%; }
  .news-body { flex-direction: column; } .news-side { width: 100%; }
}

/* ---------- P22: 레이어 UX 고도화 ---------- */
/* A1 검색 */
.layer-search { width: 100%; box-sizing: border-box; margin: 4px 0 6px; padding: 4px 8px;
  background: #12151a; border: 1px solid var(--border); border-radius: 5px;
  color: var(--text); font-size: 11px; }
.layer-search:focus { outline: none; border-color: var(--accent); }
/* A2 범례(지도 우하단) */
.layer-legend { position: fixed; right: 12px; bottom: 28px; z-index: 30; max-width: 220px;
  background: rgba(23,27,33, 0.82); border: 1px solid var(--border); border-radius: 4px;
  padding: 7px 10px; font-size: 10.5px; color: var(--text); }

/* 드론 항적(ULG 재생) 오버레이 HUD — 좌하단(범례와 겹치지 않게 반대편). source=replay 정직 라벨. */
/* NU2 — 드론 부대 현황(Neon) 카드: 좌하단. 비행기록 HUD(drone-track-hud)와 같은 구석을 쓰므로
   JS(placeNeonFleetCard)가 HUD 높이만큼 위로 올려 겹침을 피한다. 점선 = 외부 출처 관례. */
.neon-fleet-card { position: fixed; left: 12px; bottom: 28px; z-index: 30; width: 252px;
  background: var(--hud); border: 1px dotted #93a0af; border-radius: 6px; padding: 8px 10px;
  font-size: 11.5px; color: var(--text); }
.neon-fleet-card.hidden { display: none; }
.nfc-head { display: flex; align-items: center; gap: 6px; font-size: 12px; margin-bottom: 4px; flex-wrap: wrap; }
.nfc-head .nfc-src { font-size: 9.5px; }
.nfc-sp { flex: 1; }
/* NU — 온톨로지 연결 배너: 데이터 위에 "연결됨"을 또렷이(사용자 요구). 녹색=real 연결 */
.nfc-conn { display: flex; align-items: center; gap: 6px; font-size: 10.5px; font-weight: 600;
  border-radius: 4px; padding: 3px 7px; margin-bottom: 5px; color: var(--muted);
  border: 1px solid var(--border); background: rgba(255,255,255,.03); }
.nfc-conn-dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex: 0 0 auto; }
.nfc-conn[data-state="up"] { color: #7fd0a6; border-color: #3f6b55; background: rgba(127,208,166,.12); }
.nfc-conn[data-state="up"] .nfc-conn-dot { animation: neon-pulse 1.8s ease-in-out infinite; }
.nfc-conn[data-state="mock"] { color: #c9b25e; border-color: #6b5f36; }
.nfc-conn[data-state="down"] { color: #d08a7f; border-color: #6b443f; }
.nfc-row { padding: 2px 0; }
.nfc-err { color: #d08a7f; padding: 2px 0; }
.nfc-note { margin-top: 4px; font-size: 10px; }
.drone-track-hud { position: fixed; left: 12px; bottom: 28px; z-index: 30; max-width: 240px;
  background: rgba(23,27,33, 0.82); border: 1px solid var(--border); border-radius: 4px;
  padding: 7px 10px; font-size: 11px; color: var(--text); }
.drone-track-hud b { display: block; margin-bottom: 3px; }
.drone-track-hud .dth-src { font-weight: 400; font-size: 9.5px; color: var(--muted);
  border: 1px solid var(--border); border-radius: 3px; padding: 0 4px; margin-left: 4px; }
.drone-track-hud .gv-status { font-size: 10.5px; color: var(--muted); margin: 4px 0; }
.drone-track-hud .gv-status.on { color: #8fd6a8; }
.drone-track-hud .gv-status.warn { color: var(--rep); }
.drone-track-hud .dth-follow { font-size: 10.5px; padding: 2px 8px; cursor: pointer;
  background: rgba(255,255,255,0.06); color: var(--text);
  border: 1px solid var(--border); border-radius: 3px; }
.drone-track-hud.hidden { display: none; }

/* 비행 기록(Vitess ULG) — HUD 요약 + 결심지원 근거 카드. 값은 저장소 원문(창작 없음). */
.dth-flight { margin: 4px 0; font-size: 10.5px; }
.dth-flight .fr-hud-line { color: var(--text); }
.dth-flight .fr-hud-src { color: var(--muted); font-size: 9.5px; margin-top: 1px; }
.fr-badge { font-size: 9.5px; padding: 0 5px; border-radius: 3px; margin-left: 3px;
  border: 1px solid var(--border); }
.fr-badge.warn { color: #e8b84a; border-color: #6b5a1e; }
.fr-badge.ok { color: #8fd6a8; border-color: #2e5a3a; }
.dec-flight { margin: 6px 0; }
.dec-flight.hidden { display: none; }
.fr-card { background: rgba(255,255,255,0.03); border: 1px solid var(--border);
  border-radius: 4px; padding: 7px 9px; font-size: 11px; }
.fr-hdr { font-weight: 700; margin-bottom: 5px; }
.fr-verdict { font-weight: 400; font-size: 9.5px; color: #8fd6a8;
  border: 1px solid #2e5a3a; border-radius: 3px; padding: 0 4px; }
.fr-ts { font-weight: 400; font-size: 9.5px; color: var(--muted); }
.fr-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 10px; margin-bottom: 5px; }
/* 실시간 누적 지표(현재 재생 시점) — 강조. 정적 맥락 지표는 저채도. */
.fr-live-grid { margin-bottom: 4px; }
.fr-live-h { font-size: 9.5px; color: var(--accent); font-weight: 700; margin: 2px 0 3px; }
.fr-live-grid .fr-v { color: var(--accent); }
.fr-grid-static .fr-v { color: var(--text); font-weight: 500; opacity: .9; }
.fr-kv { display: flex; justify-content: space-between; gap: 6px; }
.fr-kv .fr-k { color: var(--muted); } .fr-kv .fr-v { color: var(--text); font-weight: 600; }
.fr-sec-h { font-weight: 700; margin: 5px 0 3px; font-size: 10.5px; }
.fr-anom { border-left: 2px solid var(--border); padding: 2px 0 2px 7px; margin: 3px 0; }
.fr-anom.sev-warn, .fr-anom.sev-warning, .fr-anom.sev-high, .fr-anom.sev-critical {
  border-left-color: #e8883a; }
.fr-anom.sev-info { border-left-color: #4a7fb5; }
.fr-anom-kind { font-weight: 600; }
.fr-anom-sev { font-size: 9.5px; color: var(--muted); margin-left: 4px; }
.fr-anom-detail { color: var(--muted); font-size: 10px; margin-top: 1px; }
.fr-events { margin-top: 5px; }
.fr-events summary { cursor: pointer; color: var(--muted); font-size: 10.5px; }
.fr-ev { display: flex; gap: 6px; padding: 1px 0; font-size: 10px; }
.fr-ev-t { color: var(--muted); min-width: 34px; text-align: right; }
.fr-ev-kind { color: #8ab4d8; min-width: 62px; }
.fr-ev-detail { color: var(--text); flex: 1; overflow-wrap: anywhere; }
.fr-note { color: var(--muted); font-size: 9.5px; margin-top: 5px; }

.layer-legend .lg-head { font-weight: 700; margin-bottom: 4px; display: flex;
  justify-content: space-between; align-items: center; gap: 6px; }
.layer-legend .lg-row { margin: 2px 0; display: flex; align-items: center; gap: 5px; }
.layer-legend.collapsed .lg-row { display: none; }
/* 피처별 색 레이어(per_feature_color) 국가 칩 — 예: cable_2africa 국가별 컬러맵 */
.layer-legend .lg-chips { display: flex; flex-wrap: wrap; gap: 3px 6px; margin: 2px 0 4px 14px;
  max-height: 130px; overflow-y: auto; }
.layer-legend .lg-chip { display: inline-flex; align-items: center; gap: 3px; font-size: 9.5px;
  color: var(--muted); }
.layer-legend .lg-chip i { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.layer-legend.collapsed .lg-chips { display: none; }
/* A3 상태 배지 */
.layer-status { cursor: pointer; }
.layer-status.cnt-err { color: #d99a5f; }
/* B2 레지스트리 filters 서브 토글 */
.layer-filter { display: block; margin: 1px 0 1px 18px; font-size: 10.5px; cursor: pointer; }
/* per-layer disclaimer */
.layer-disc { flex-basis: 100%; margin: 2px 0 2px 18px; }
/* A5 다중 피처 목록 팝업 */
.pop-multi { cursor: pointer; color: var(--accent); }
.pop-multi:hover { text-decoration: underline; }
/* P23: 범례 아이콘 미니어처 */
.layer-legend .lg-ic { width: 14px; height: 14px; vertical-align: -2px; }

/* --- hanul B7: OPERATE / DEPLOY 패널 (좌하단 — 지도 오버레이와 공존) --- */
.hanul-panel { position: fixed; left: 14px; bottom: 14px; width: 400px; z-index: 12;
  background: var(--hud);  border: 1px solid var(--border); border-radius: var(--radius-lg);
  box-shadow: var(--elev-2);
  display: flex; flex-direction: column; max-height: 58vh; }

/* HANUL 통합 COP 콘솔(하단) — OPERATE+DEPLOY 나란히 + 시뮬레이션 진행 (2026-07-07) */
/* 좌측 HUD 패널(.hud-left: left 14 + width 320)과 겹치지 않게 그 옆(346px)부터 우측 끝까지 */
.hanul-cop { position: fixed; left: 346px; right: 14px; bottom: 12px; z-index: 13;
  background: var(--hud);  border: 1px solid var(--border); border-radius: 4px;
  box-shadow: 0 10px 34px rgba(0,0,0,.5);
  display: flex; flex-direction: column; max-height: 38vh; }
.cop-head { display: flex; align-items: center; gap: 12px; padding: 7px 12px;
  border-bottom: 1px solid var(--border); flex: 0 0 auto; }
.cop-title { font-size: 13px; white-space: nowrap; }
.cop-sim { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.cop-body { display: flex; gap: 10px; padding: 8px; overflow: hidden; flex: 1 1 auto; align-items: stretch; }
#cop-toggle { flex: 0 0 auto; margin-left: 0; }
/* 콘솔 안에서는 패널이 고정 위치가 아니라 나란한 컬럼 */
.hanul-cop .hanul-panel { position: static; left: auto; bottom: auto; width: auto;
  flex: 1 1 0; min-width: 0; box-shadow: none; max-height: none;
  border-radius: 4px; background: rgba(255,255,255,0.02); }
.hanul-cop .hanul-panel.hidden { display: flex; }  /* 콘솔에선 항상 표시(둘 다 보임) */
.hanul-cop .hanul-body { max-height: 34vh; }
.hanul-cop.collapsed .cop-body { display: none; }
.hanul-cop.collapsed #cop-toggle { transform: rotate(180deg); }
/* 콘솔 내 시뮬레이션 스트립(칩·컨트롤·상태 한 줄 구성) */
.cop-sim .sim-stages { margin: 0; }
.cop-sim .scenario-row { gap: 5px; margin: 0; flex-wrap: wrap; }
.cop-sim .mini-btn { margin-left: 0; padding: 2px 8px; }
.cop-sim .sc-g-desc { display: none; }  /* 설명은 좌측 트랙 메뉴에 — 콘솔 스트립은 간결하게 */
.cop-sim #sim-status { margin: 0; font-size: 10.5px; }
@media (max-width: 900px) {
  .cop-body { flex-direction: column; overflow-y: auto; }
  .hanul-cop { left: 14px; }  /* 좁은 화면: 전폭(패널도 세로 스택) */
}
/* PROACTIVE 인터랙티브 배치 — 추천(top-N) 순위·이득 표시 */
.dp-rank { flex: 0 0 auto; width: 16px; height: 16px; border-radius: 50%;
  background: #333b45; color: #e6e9ed; font-size: 10px; line-height: 16px;
  text-align: center; font-weight: 600; }
.dp-gain { flex: 0 0 auto; font-size: 11px; color: #2f9e5f; font-weight: 600; }
.dp-reco { cursor: default; border-radius: 4px; }
.dp-reco:hover { background: rgba(69,133,214, 0.08); }
.dp-accept, .dp-unpin { flex: 0 0 auto; padding: 1px 7px; }
.hanul-head { display: flex; align-items: center; gap: 8px; padding: 8px 12px;
  border-bottom: 1px solid var(--border); }
.hanul-head b { font-size: 13px; }
.hanul-head .mini-btn { margin-left: 4px; }
/* ⓘ 헤더 우상단 설명 버튼 — hover/focus 시 뷰·알고리즘(AHP/TOPSIS/Greedy) 설명 툴팁 */
.hanul-info { margin-left: auto; position: relative; width: 18px; height: 18px; flex: 0 0 auto;
  border: 1px solid var(--border); border-radius: 50%; color: var(--muted);
  font-family: Georgia, "Times New Roman", serif; font-style: italic; font-weight: 700;
  font-size: 11px; line-height: 1; display: inline-flex; align-items: center;
  justify-content: center; cursor: help; }
.hanul-info:hover, .hanul-info:focus { border-color: var(--accent); color: var(--accent); outline: none; }
.hanul-tip { position: absolute; top: calc(100% + 8px); right: 0; width: 274px;
  background: var(--hud); border: 1px solid var(--border); border-radius: 4px;
  padding: 9px 11px; font-family: var(--font-ui); font-style: normal; font-weight: 400;
  font-size: 11px; line-height: 1.55; color: var(--muted); text-align: left; z-index: 30;
  box-shadow: 0 8px 24px rgba(0,0,0,.5); opacity: 0; visibility: hidden;
  transform: translateY(-3px); transition: opacity .12s ease, transform .12s ease;
  pointer-events: none; }
.hanul-info:hover .hanul-tip, .hanul-info:focus .hanul-tip,
.hanul-info:focus-within .hanul-tip { opacity: 1; visibility: visible; transform: translateY(0); }
.hanul-tip .th { display: block; color: var(--accent); font-size: 11.5px; font-weight: 600; margin-bottom: 2px; }
.hanul-tip b { color: var(--text); font-weight: 600; }
.hanul-tip p { margin: 5px 0 0; }
.hanul-tip hr { border: none; border-top: 1px solid var(--border); margin: 7px 0; }
.hanul-tip .tf { display: block; margin-top: 6px; color: var(--rep); font-size: 10px; font-style: italic; }
.hanul-body { padding: 10px 12px; overflow-y: auto; display: flex; flex-direction: column; gap: 6px; }
.hanul-list { font-size: 11.5px; display: flex; flex-direction: column; gap: 3px; }
/* ---------- HANUL 상황 모드(H1) — 시뮬 재생 중 지도 중심: 패널 접힘 + KPI 칩 ---------- */
.hanul-cop.sit-mode .cop-body { display: none; }
.cop-kpi { display: flex; gap: 10px; align-items: stretch; padding: 6px 12px 8px; flex-wrap: wrap; }
.cop-kpi .kpi-chip { display: flex; flex-direction: column; gap: 1px; min-width: 96px;
  padding: 6px 12px; border: 1px solid #333b45; border-radius: 8px; background: #0e141d;
  cursor: pointer; transition: border-color .15s; }
.cop-kpi .kpi-chip:hover { border-color: var(--accent, #e8883a); }
.cop-kpi .kpi-num { font: 800 21px/1.15 system-ui, sans-serif; color: #e8eef4; letter-spacing: .2px; }
.cop-kpi .kpi-label { font-size: 10px; color: #93a0af; }
.cop-kpi .kpi-label em { font-style: normal; color: #6b7a8e; }
.cop-kpi .kpi-hitl { border-color: var(--warn, #cf4448); animation: kpiPulse 1.6s ease-in-out infinite; }
@keyframes kpiPulse { 0%,100% { box-shadow: 0 0 0 rgba(207,68,72,0); } 50% { box-shadow: 0 0 12px rgba(207,68,72,.45); } }
/* 상황 모드 전역 축약 — 브리핑 카드 1줄 티커(클릭 시 전문) */
body.hanul-sit #hanul-briefing { max-height: 46px; overflow: hidden; cursor: pointer; position: relative; }
body.hanul-sit #hanul-briefing.expanded { max-height: none; }
body.hanul-sit #hanul-briefing::after { content: "… 클릭하여 전문"; position: absolute; right: 8px; bottom: 2px;
  font-size: 9px; color: #6b7a8e; background: inherit; }
body.hanul-sit #hanul-briefing.expanded::after { content: ""; }
/* ---------- HANUL 시네마 연출(H3) — 장 배너·HITL 디밍·상황 종료 카드 ---------- */
#hanul-banner { position: fixed; z-index: 14; left: 50%; top: 18%; transform: translateX(-50%) scale(.96);
  background: rgba(14,20,29,.92); border: 1px solid #3a4656; border-radius: 12px; padding: 14px 30px;
  text-align: center; pointer-events: none; opacity: 0; transition: opacity .3s, transform .3s;
  box-shadow: 0 8px 34px rgba(0,0,0,.5); }
#hanul-banner.show { opacity: 1; transform: translateX(-50%) scale(1); }
#hanul-banner .hb-main { font: 800 20px/1.25 system-ui, sans-serif; color: #e8eef4; }
#hanul-banner .hb-sub { font-size: 11.5px; color: #9db0c4; margin-top: 3px; }
#hanul-dim { position: fixed; z-index: 5; inset: 0; background: rgba(4,8,14,.45); opacity: 0;
  pointer-events: none; transition: opacity .35s; }
#hanul-dim.show { opacity: 1; }
#hanul-endcard { position: fixed; z-index: 14; left: 50%; top: 22%; transform: translateX(-50%);
  background: rgba(14,20,29,.95); border: 1px solid #2f9e5f; border-radius: 14px; padding: 18px 34px;
  text-align: center; cursor: pointer; display: none; box-shadow: 0 8px 34px rgba(0,0,0,.55); }
#hanul-endcard .hb-main { font: 800 22px/1.2 system-ui, sans-serif; color: #e8eef4; }
#hanul-endcard .hb-sub { font-size: 12.5px; color: #9db0c4; margin-top: 5px; }
#hanul-endcard .hb-sub b { color: #2f9e5f; }
#hanul-endcard .hint { margin-top: 6px; }
/* HITL 스포트라이트 — 디밍 위에서 승인 카드만 강조(게이트·로직 무변경) */
.hitl-spotlight { position: relative; z-index: 15;
  animation: hitlGlow 1.4s ease-in-out infinite; }
@keyframes hitlGlow { 0%,100% { box-shadow: 0 0 0 rgba(232,136,58,.0); } 50% { box-shadow: 0 0 18px rgba(232,136,58,.6); } }
/* 결심 심의(멀티 에이전트) 브리핑 — OPERATE(op-council)/침투(dec-council) 공용 */
.op-council-row, .dec-council-row { margin: 3px 0; line-height: 1.5; font-size: 11px; color: #cdd6df; }
.op-council-row .op-agent, .dec-council-row .dec-agent {
  display: inline-block; min-width: 62px; color: var(--accent, #e8883a); font-weight: 700; margin-right: 4px; }
.op-council-row .badge, .dec-council-row .badge {
  padding: 0 5px; border-radius: 8px; color: #0b111b; font-size: 9px; font-weight: 700; margin-right: 4px; }
.hanul-alert { border: 1px solid var(--warn); color: var(--warn); border-radius: 6px;
  padding: 6px 8px; font-size: 12px; font-weight: 600; background: rgba(207,68,72,.08); }
.hanul-row { display: flex; align-items: center; gap: 6px; padding: 3px 6px;
  border: 1px solid var(--border); border-radius: 6px; }
.hanul-row .grow { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hanul-row .drn-ico { flex: 0 0 auto; vertical-align: middle; opacity: 0.95; }
.dp-covermode { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin-bottom: 4px; }
.dp-covermode .cm-chip { padding: 1px 8px; }
.dp-cm-cap { margin-bottom: 6px; }
.dp-why { color: var(--muted); opacity: 0.9; }
.hanul-band { font-size: 9.5px; padding: 0 6px; border-radius: 4px; font-weight: 700; }
.hanul-band.HIGH { background: rgba(207,68,72,.15); color: var(--warn); border: 1px solid var(--warn); }
.hanul-band.MED { background: rgba(192,125,32,.15); color: var(--rep); border: 1px solid var(--rep); }
.hanul-band.LOW { background: rgba(147,160,175,.15); color: var(--muted); border: 1px solid var(--muted); }
.hanul-bar { height: 5px; border-radius: 3px; background: var(--border); position: relative; flex: 0 0 70px; }
.hanul-bar i { position: absolute; inset: 0 auto 0 0; border-radius: 3px; background: var(--accent); }
.hanul-kpi { display: flex; gap: 10px; flex-wrap: wrap; }
.hanul-kpi .kpi { border: 1px solid var(--border); border-radius: 4px; padding: 6px 10px;
  text-align: center; flex: 1; min-width: 90px; }
.hanul-kpi .kpi b { display: block; font-size: 17px; color: var(--accent); }
.hanul-kpi .kpi span { font-size: 9.5px; color: var(--muted); }

/* ---------- hanul 전술뷰 3D 건물 범례 (상단 중앙, 전술뷰에서만) ---------- */
/* 상단 3D 전술뷰 패널 — 좌측 HUD(≈334px) 오른쪽부터 우측 끝까지. **z-index 를 커맨더(hud z:10)
   아래(8)** 로 두어, 좁은 화면에서 겹쳐도 커맨더가 항상 위에 렌더된다(커맨더 안 가림). 폭 계산이
   없어 어떤 화면폭에서도 사라지지 않는다(요구 2026-08-04 '안 보임' 방지). 넓은 화면에선 커맨더가
   멀리 있어 항목이 그 앞 밴드에 온전히 보이고, 좁으면 좌측부가 보인다(우측 항목은 커맨더 뒤로). */
.hanul-3d-legend { position: fixed; top: 14px; left: 346px; right: 14px; transform: none;
  z-index: 8; background: var(--hud); border: 1px solid var(--border); border-radius: 4px;
  padding: 6px 10px; display: flex; align-items: center; justify-content: flex-start;
  gap: 6px 10px; flex-wrap: wrap; box-shadow: 0 2px 12px rgba(0,0,0,.4); }
.hanul-3d-legend b { font-size: 12px; color: var(--text); }
.hanul-3d-legend .l3d { display: inline-flex; align-items: center; gap: 5px;
  font-size: 10.5px; color: var(--muted); white-space: nowrap; }
.hanul-3d-legend .l3d i { width: 12px; height: 10px; border-radius: 2px; display: inline-block; }
.hanul-3d-legend .l3d i.ring { width: 12px; height: 12px; border-radius: 50%; background: transparent; }
.hanul-3d-legend .l3d i.ring.def { border: 1.5px solid #4585d6; }
.hanul-3d-legend .l3d i.ring.thr { border: 1.5px dashed #c07d20; }
/* 시점 컨트롤: 전체폭 별도 줄(아래)로 — 좌측 정렬이라 우측 커맨더 뒤로 숨지 않고 클릭 가능
   (요구 2026-08-04). 위에 얇은 구분선. */
.hanul-3d-legend .l3d-view { display: flex; align-items: center; gap: 4px;
  font-size: 10.5px; color: var(--muted); flex-basis: 100%; margin-top: 4px;
  border-top: 1px solid var(--border); padding-top: 5px; }
.hanul-3d-legend .v3d { width: 24px; height: 22px; border: 1px solid var(--border);
  background: transparent; color: var(--muted); border-radius: 5px; cursor: pointer;
  font-size: 12px; line-height: 1; padding: 0; }
.hanul-3d-legend .v3d:hover { border-color: var(--accent); color: var(--text); }
.hanul-3d-legend .v3d.active { border-color: var(--accent); color: var(--accent); }
.hanul-3d-legend .l3d-note { font-size: 9.5px; color: var(--muted); font-style: italic;
  border-left: 1px solid var(--border); padding-left: 12px; }
/* 종류별 스와치 동적 호스트(app.js renderHanul3DLegend 가 채움) */
.hanul-3d-kinds { display: inline-flex; align-items: center; gap: 12px; flex-wrap: wrap; }
/* 위협/방어 범례 그룹 — 헤더 + 색 스와치. 위협(warm·점선 링) vs 방어(cool·실선 링) 대비. */
.hanul-3d-legend .l3d-group { display: inline-flex; align-items: center; gap: 8px;
  border-left: 1px solid var(--border); padding-left: 12px; flex-wrap: wrap; }
.hanul-3d-legend .l3d-h { font-size: 10.5px; font-weight: 700; white-space: nowrap; }
.hanul-3d-legend .l3d-h.thr-h { color: #d99a5f; }
.hanul-3d-legend .l3d-h.def-h { color: #8fb6e6; }
.hanul-3d-legend .l3d-h .l3d-note { border-left: 0; padding-left: 4px; }
/* 위협=색 점선 링 · 방어=색 실선 링(색은 인라인 border-color) */
.hanul-3d-legend .l3d i.ring.thr-sw { border: 1.5px dashed currentColor; }
.hanul-3d-legend .l3d i.ring.def-sw { border: 1.5px solid currentColor; }
/* 접근 궤적 — 실선 세그먼트 */
.hanul-3d-legend .l3d i.line.traj { width: 16px; height: 0; border-top: 2px solid #cf8340; border-radius: 0; }
/* 건물 클릭 팝업(상세) — 이름·종류·높이·좌표 출처. 표적 마킹 아님. */
.bldg-pop { font-size: 11px; color: var(--text); min-width: 150px; }
.bldg-pop b { font-size: 12px; }
.bldg-pop .bp-row { display: flex; align-items: center; gap: 5px; margin-top: 3px; color: var(--muted); }
.bldg-pop .bp-row i { width: 11px; height: 9px; border-radius: 2px; display: inline-block; }
.bldg-pop .bp-src { font-size: 9.5px; opacity: .8; }
.bldg-pop .bp-note { margin-top: 5px; font-size: 9.5px; font-style: italic; color: var(--muted); }

/* ---------- hanul 파이프라인 단계 스트립 (SYSTEM 01/02 흐름) ---------- */
.hanul-flow { display: flex; align-items: stretch; gap: 0; margin: 2px 0 4px;
  border: 1px solid var(--border); border-radius: 4px; overflow: hidden;
  flex: 0 0 auto; }  /* flex 컬럼에서 눌려 라벨이 잘리지 않게 자연 높이 고정 */
.hanul-step { flex: 1; padding: 5px 4px; text-align: center; font-size: 9.5px; line-height: 1.25;
  color: var(--muted); background: transparent; position: relative; min-width: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: flex-start; }
.hanul-step + .hanul-step { border-left: 1px solid var(--border); }
.hanul-step b { display: block; font-size: 10px; color: var(--text); font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hanul-step.done { background: rgba(69,133,214,.10); }
.hanul-step.done b { color: var(--accent); }
.hanul-step .st-i { font-size: 12px; line-height: 0; }
/* flow-*.svg 아이콘(이모지 치환) — currentColor 상속 → .done 시 accent 하이라이트 */
.hanul-step .st-i svg { width: 15px; height: 15px; display: inline-block; vertical-align: -2px; }
.hanul-step.done .st-i { color: var(--accent); }
/* HANUL 부여 상황 F2T2EA 브리핑 카드(좌측 메뉴) — 표적 아님·값은 엔진 산출 인용(§8). */
.hb-title { font-weight: 700; font-size: 12.5px; margin: 4px 0 2px; color: var(--text); }
.hb-threat { font-size: 11px; color: var(--text); margin: 3px 0; }
.hb-flow { margin-top: 5px; flex-wrap: wrap; gap: 3px; }
.hb-flow .hanul-step { font-size: 9px; padding: 3px 5px; border: 1px solid var(--border); border-radius: 3px; }
.hb-flow .hanul-step + .hanul-step { border-left: 1px solid var(--border); }
/* ---------- 알고리즘 상세(펼침) — 직관 요약은 상단, 상세는 details 로 접힘 ---------- */
details.hanul-algo { border: 1px solid var(--border); border-radius: 4px; padding: 0; }
details.hanul-algo > summary { cursor: pointer; padding: 6px 10px; font-size: 11px;
  color: var(--text); list-style: none; display: flex; align-items: center; gap: 6px; }
details.hanul-algo > summary::-webkit-details-marker { display: none; }
details.hanul-algo > summary::before { content: "▸"; color: var(--muted); font-size: 10px; }
details.hanul-algo[open] > summary::before { content: "▾"; }
details.hanul-algo > summary .tag { margin-left: auto; font-size: 9px; color: var(--muted);
  border: 1px solid var(--border); border-radius: 6px; padding: 0 6px; }
.hanul-algo-body { padding: 4px 10px 10px; font-size: 10.5px; color: var(--muted);
  display: flex; flex-direction: column; gap: 6px; }
.hanul-algo-body .algo-formula { font-family: ui-monospace, monospace; font-size: 10px;
  color: var(--text); background: var(--bg); border: 1px solid var(--border);
  border-radius: 6px; padding: 5px 7px; }
.hanul-algo-body .algo-kv { display: flex; flex-wrap: wrap; gap: 4px 10px; }
.hanul-algo-body .algo-kv span { white-space: nowrap; }
.hanul-algo-body .algo-kv b { color: var(--text); }
.hanul-gains { display: flex; align-items: flex-end; gap: 3px; height: 34px; }
.hanul-gains i { flex: 1; background: var(--accent); border-radius: 2px 2px 0 0; min-height: 2px;
  opacity: .8; }

/* 운영 개요(brief) + kill-chain 요격 판정 카드 */
.hanul-brief { margin: 2px 0 6px; font-size: 10.5px; line-height: 1.5; color: var(--muted);
  border-left: 2px solid var(--accent); padding: 3px 8px; background: rgba(69,133,214,.06);
  border-radius: 0 4px 4px 0; }
.hanul-brief b { color: var(--text); }
.kc-row { padding: 5px 6px; border: 1px solid var(--border); border-radius: 6px; margin-bottom: 5px;
  background: rgba(255,255,255,.02); }
.kc-head { display: flex; align-items: center; gap: 6px; margin-bottom: 4px; }
.kc-head .grow { flex: 1; font-size: 11px; }
.kc-chain { display: flex; flex-wrap: wrap; gap: 4px; }
.kc-chip { font-size: 9.5px; padding: 1px 6px; border-radius: 4px; white-space: nowrap;
  border: 1px solid var(--border); color: var(--muted); }
.kc-chip.kc-on { color: #171b21; font-weight: 700; border-style: solid; }
.kc-chip.kc-off { border-style: dashed; opacity: .8; }
.kc-chip.kc-none { opacity: .45; }
.kc-verdict { font-size: 9.5px; font-weight: 700; padding: 1px 7px; border-radius: 4px; }
.kc-verdict.ok { color: #4585d6; background: rgba(69,133,214,.15); border: 1px solid #4585d6; }
.kc-verdict.part { color: var(--rep); background: rgba(192,125,32,.14); border: 1px solid var(--rep); }
.kc-verdict.none { color: var(--muted); background: rgba(147,160,175,.12); border: 1px solid var(--muted); }

/* HANUL 용어 정리 오버레이(OPERATE/DEPLOY "ⓘ 용어" 클릭) — 중앙 모달 */
.hanul-gloss-btn { font-size: 10.5px; padding: 2px 8px; background: var(--panel);
  color: var(--muted); border: 1px solid var(--border); border-radius: 5px; cursor: pointer;
  flex: 0 0 auto; font-weight: 600; }
.hanul-gloss-btn:hover { border-color: var(--accent); color: var(--accent); }
.hanul-gloss { position: fixed; inset: 0; z-index: 30; background: rgba(16,18,22,.72);
  display: flex; align-items: center; justify-content: center; padding: 24px; }
.hanul-gloss-card { width: min(680px, 94vw); max-height: 84vh; display: flex; flex-direction: column;
  background: var(--panel); border: 1px solid var(--border); border-radius: 4px;
  box-shadow: 0 16px 48px rgba(0,0,0,.55); }
.hanul-gloss-head { display: flex; align-items: center; gap: 8px; padding: 12px 16px;
  border-bottom: 1px solid var(--border); flex: 0 0 auto; }
.hanul-gloss-head b { font-size: 14px; }
.hanul-gloss-head .mini-btn { margin-left: auto; }
.hanul-gloss-body { padding: 12px 16px; overflow-y: auto; }
.hanul-gloss-body .gloss-group { margin-bottom: 14px; }
.hanul-gloss-body .gloss-group:last-child { margin-bottom: 0; }
.hanul-gloss-body h4 { margin: 0 0 6px; font-size: 11.5px; color: var(--accent);
  text-transform: none; letter-spacing: .2px; border-bottom: 1px solid var(--border); padding-bottom: 4px; }
.hanul-gloss-body dl { margin: 0; }
.hanul-gloss-body dt { font-size: 12px; font-weight: 700; color: var(--text); margin-top: 8px; }
.hanul-gloss-body dt:first-child { margin-top: 0; }
.hanul-gloss-body dt .gloss-en { font-weight: 400; font-size: 10.5px; color: var(--muted); }
.hanul-gloss-body dd { margin: 2px 0 0; font-size: 11.5px; line-height: 1.55; color: var(--muted); }
.hanul-gloss-foot { padding: 8px 16px; border-top: 1px solid var(--border); flex: 0 0 auto;
  font-size: 10px; color: var(--rep); }

/* ---------- 상황도 하단 시나리오 탭(바텀 시트) ---------- */
.scenario-dock { position: fixed; left: 50%; bottom: 0; transform: translateX(-50%);
  z-index: 13; width: min(680px, calc(100vw - 28px)); display: flex; flex-direction: column;
  align-items: center; pointer-events: none; }
.scenario-dock > * { pointer-events: auto; }
.dock-tabs { display: flex; gap: 6px; }
.dock-tab { background: var(--hud);  color: var(--text); border: 1px solid var(--border); border-bottom: none;
  border-radius: 10px 10px 0 0; padding: 7px 20px; font-size: 12px; font-weight: 700;
  cursor: pointer; box-shadow: 0 -4px 18px rgba(0,0,0,.35); }
.dock-tab:hover { border-color: var(--accent); }
.dock-tab.active { background: var(--accent); color: #0b0e12; border-color: var(--accent); }
.scenario-sheet { width: 100%; background: var(--hud);  border: 1px solid var(--border); border-bottom: none; border-radius: 12px 12px 0 0;
  box-shadow: 0 -10px 34px rgba(0,0,0,.5); height: 82vh; max-height: 82vh; display: flex; flex-direction: column; }
.sheet-head { display: flex; align-items: center; gap: 8px; padding: 9px 14px;
  border-bottom: 1px solid var(--border); flex: 0 0 auto; }
.sheet-head b { font-size: 14px; }
.sheet-head .mini-btn { margin-left: auto; }
/* min-height:0 이면 flex 계산에서 아코디언이 0 높이로 접혀 내용(글자)이 안 보이다가
   클릭(리플로우) 시 나타나던 버그 → 최소 높이 보장 + 부모에 명시적 height 로 공간 확보. */
.scenario-accordion { padding: 10px 14px; overflow-y: auto; display: flex; flex-direction: column; gap: 6px;
  flex: 1 1 auto; min-height: 200px; }
/* flex: 0 0 auto — 아코디언(column flex, overflow-y:auto) 안에서 그룹이 줄어들지 않게 한다.
   기본 flex-shrink:1 + overflow:hidden 이면 시트 높이(셸 max-height 34vh)를 넘는 순간 그룹·턴 버튼이
   테두리만 남은 얇은 줄로 압착됐다(펼친 그룹 내용 미표시 버그 — 2026-10-08 수정). 넘치면 스크롤. */
.sc-group { border: 1px solid var(--border); border-radius: 4px; overflow: hidden; flex: 0 0 auto; }
.sc-group-head { width: 100%; display: flex; align-items: center; gap: 8px;
  background: var(--panel); color: var(--text); border: none; cursor: pointer;
  padding: 8px 11px; font-size: 12.5px; font-weight: 700; }
.sc-group-head:hover { background: #262d36; }
.sc-g-title { flex: 1; text-align: left; }
.sc-g-count { font-size: 10px; color: var(--muted); border: 1px solid var(--border);
  border-radius: 4px; padding: 0 7px; font-weight: 700; }
/* NU1 — Neon 연동 그룹 배지(외부 온톨로지 · 참고 전용). 점선 테두리 = 외부 출처 관례
   (tokens.css .nv-badge--external 과 동일 어휘). 상태색은 /health.neon 파생 — 경보색 아님. */
.sc-g-neon { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 4px;
  font-size: 10px; font-weight: 600; color: var(--muted);
  border: 1px dotted var(--border); border-radius: 4px; padding: 1px 6px; white-space: nowrap; }
.sc-g-neon-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: 0 0 auto; }
.sc-g-neon[data-state="up"] { color: #7fd0a6; border-color: #3f6b55; background: rgba(127,208,166,.1); }
.sc-g-neon[data-state="up"] .sc-g-neon-dot { animation: neon-pulse 1.8s ease-in-out infinite; }
.sc-g-neon[data-state="mock"] { color: #c9b25e; border-color: #6b5f36; }
.sc-g-neon[data-state="down"] { color: #d08a7f; border-color: #6b443f; }
.sc-g-neon[data-state="off"] { color: var(--muted); }
@keyframes neon-pulse { 0%,100% { opacity: 1; } 50% { opacity: .35; } }
.sc-g-caret { color: var(--muted); transition: transform .15s ease; }
.sc-group.open .sc-g-caret { transform: rotate(90deg); color: var(--accent); }
.sc-group-body { display: none; padding: 8px 11px; flex-direction: column; gap: 5px; }
.sc-group.open .sc-group-body { display: flex; }
.sc-g-desc { margin: 0 0 4px; font-size: 10.5px; color: var(--muted); line-height: 1.5; }
.sc-turn-btn { flex: 0 0 auto; text-align: left; background: #12151a; color: var(--text);
  border: 1px solid var(--border); border-radius: 6px; padding: 7px 10px; font-size: 12px;
  font-weight: 500; cursor: pointer; }
.sc-turn-btn:hover { border-color: var(--accent); background: rgba(69,133,214,.08); }

/* ---------- 온톨로지 맵 오버레이(탐지 택소노미 node-link) ---------- */
#ontology-btn { display: inline-flex; align-items: center; gap: 4px; margin-left: 6px; padding: 2px 7px; }
#ontology-btn svg { display: block; }
.onto-view { position: fixed; inset: 0; z-index: 16; background: rgba(16,18,22, 0.98);
  display: flex; flex-direction: column; }
/* 헤더는 내용이 많아 줄바꿈(wrap) 허용하되, 개별 항목(제목·체크박스·버튼)은 내부 줄바꿈 금지
   (nowrap) — CJK 가 min-content 로 한 글자씩 세로로 꺾이는 문제 방지. 버튼군은 .onto-actions 로 묶어
   margin-left:auto 우측 정렬(그룹 단위로만 다음 줄로 이동). */
.onto-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; padding: 8px 16px;
  padding-right: 66px; /* 우상단 알림 벨(40px@right14, z-index 30)과 겹치지 않게 버튼 공간 확보 */
  border-bottom: 1px solid var(--border); flex: 0 0 auto; }
.onto-head b { font-size: 15px; white-space: nowrap; flex: 0 0 auto; }
.onto-head > .hint { flex: 0 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.onto-head .onto-eq { white-space: nowrap; flex: 0 0 auto; }
.onto-head .mini-btn { white-space: nowrap; flex: 0 0 auto; }
.onto-actions { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; flex: 0 0 auto; }
.onto-legend { display: flex; flex-wrap: wrap; gap: 4px 8px; flex: 0 1 auto; min-width: 0; }
.onto-legend .ol-chip { display: inline-flex; align-items: center; gap: 4px; font-size: 10.5px; color: var(--muted); white-space: nowrap; }
.onto-legend .ol-chip i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.onto-body { flex: 1; position: relative; overflow: hidden; }
.onto-svg { position: absolute; inset: 0; width: 100%; height: 100%; cursor: grab; background:
  radial-gradient(circle at 1px 1px, rgba(255,255,255,.04) 1px, transparent 0) 0 0 / 26px 26px; }
.onto-svg:active { cursor: grabbing; }
.onto-node { cursor: pointer; }
.onto-node .onto-lbl { font-size: 12px; font-weight: 600; pointer-events: none; }
.onto-node .onto-sub { font-size: 9.5px; font-family: ui-monospace, monospace; pointer-events: none; }
.onto-node:hover rect:first-of-type { filter: brightness(1.25); }
.onto-node.sel rect:first-of-type { stroke-width: 3; filter: brightness(1.35); }
.onto-edge.hot { stroke: var(--accent) !important; stroke-width: 2.4 !important; stroke-opacity: 1 !important; }
/* 포커스 모드 — 선택 노드의 이웃 외에는 흐리게(상관관계 강조). */
.onto-node.dim { opacity: .16; }
.onto-node.dim:hover { opacity: .5; }
.onto-edge.dim { opacity: .06; }
/* 엣지 관계명 라벨(상시 표시) — 기본은 작고 은은, 포커스(hot) 시 또렷하게. */
.onto-elbl { font-size: 8.5px; font-family: ui-monospace, monospace; pointer-events: none;
  paint-order: stroke; stroke: #131519; stroke-width: 2.4px; stroke-linejoin: round; opacity: .7; }
.onto-elbl.hot { font-size: 10px; font-weight: 700; opacity: 1; }
.onto-info { position: absolute; top: 14px; right: 14px; width: 280px; z-index: 2;
  background: var(--hud);  border: 1px solid var(--border); border-radius: 4px; padding: 10px 12px;
  box-shadow: 0 8px 28px rgba(0,0,0,.5); font-size: 12px; }
.onto-info .oi-head { display: flex; align-items: center; gap: 7px; margin-bottom: 7px; font-size: 14px; }
.onto-info .oi-head .mini-btn { margin-left: auto; }
.onto-info .oi-dot { width: 11px; height: 11px; border-radius: 3px; display: inline-block; }
.onto-info .oi-row { margin: 3px 0; line-height: 1.5; }
.onto-info .oi-row b { color: var(--muted); margin-right: 5px; }
.onto-info code { color: var(--accent); font-size: 11px; }
.onto-eq { font-size: 11px; color: var(--muted); display: inline-flex; align-items: center; gap: 4px; cursor: pointer; }
.onto-eq input { width: auto; flex: 0 0 auto; margin: 0; }
.onto-node.equip .onto-lbl { font-weight: 500; }
/* 지식그래프 종류별 필터(택소노미 중심 + 필터) — 기본 꺼짐, 켜면 해당 종류 노드 표시 */
.onto-cats { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 4px 10px;
  padding: 3px 8px; border: 1px solid var(--border); border-radius: 7px; flex: 0 1 auto; min-width: 0; }
.onto-cats .onto-cats-lbl { font-size: 10.5px; color: var(--muted); font-weight: 600; opacity: .8; white-space: nowrap; }
.onto-cats .oc-dot { width: 9px; height: 9px; border-radius: 2px; display: inline-block; }
.onto-cats .oc-n { font-size: 9.5px; color: var(--muted); opacity: .7; font-family: ui-monospace, monospace; }
/* 3D 온톨로지 캔버스 컨테이너(three.js) — SVG 위 동일 영역 */
.onto-3d { position: absolute; inset: 0; z-index: 1; background:
  radial-gradient(circle at 30% 20%, rgba(60,90,140,.12), transparent 60%), #101216; }
.onto-3d canvas { display: block; width: 100%; height: 100%; }
/* 접힌 근거 목록(재표현 — 문서·데이터셋을 노드 대신 인접 노드에 귀속) */
.onto-info .oi-docs { max-height: 170px; overflow: auto; margin-top: 3px; padding: 4px 6px;
  border: 1px solid var(--border); border-radius: 6px; font-size: 11px; }
.onto-info .oi-doc { padding: 2px 0; line-height: 1.45; border-bottom: 1px dotted rgba(147,160,175,.25); }
.onto-info .oi-doc:last-child { border-bottom: none; }
/* 연결(이웃) 칩 목록 — 패널에서 바로 연결 노드로 이동(캔버스에서 헤매지 않게) */
.onto-info .oi-neighbors { margin-top: 7px; padding-top: 6px; border-top: 1px solid var(--border); }
.onto-info .oi-nb-list { display: flex; flex-wrap: wrap; gap: 4px; margin: 4px 0 2px;
  max-height: 168px; overflow: auto; }
.onto-info .oi-nb { display: inline-flex; align-items: center; gap: 5px; max-width: 100%;
  padding: 2px 8px; font-size: 11px; color: var(--text); background: var(--panel-2);
  border: 1px solid var(--border); border-radius: 11px; cursor: pointer; }
.onto-info .oi-nb:hover { border-color: var(--accent); }
.onto-info .oi-nb i { width: 8px; height: 8px; border-radius: 2px; flex: 0 0 auto; }
.onto-info .oi-nb span, .onto-info .oi-nb { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.onto-info .oi-nb.off { opacity: .45; cursor: default; }
/* 노드 클릭 근거 패널(211 지식서버 검색) */
.onto-info .oi-evidence { margin-top: 8px; padding-top: 7px; border-top: 1px solid var(--border);
  font-size: 11px; max-height: 240px; overflow: auto; }
.onto-info .oi-evidence > b { color: var(--muted); }
.onto-info .oi-ev-row { margin: 6px 0; line-height: 1.45; }
.onto-info .oi-ev-snip { color: var(--muted); font-size: 10.5px; margin-top: 2px; opacity: .85; }
.onto-info .role { display: inline-block; padding: 0 5px; border-radius: 3px; font-size: 9.5px;
  font-weight: 700; border: 1px solid var(--border); }
.onto-info .role-rok { color: #2f9e5f; border-color: #278a50; }
.onto-info .role-ref { color: var(--muted); }

/* ⓘ 자료 — 적재 자료·연관관계 설명 패널(온톨로지 맵 좌상단 오버레이) */
.onto-sources { position: absolute; top: 14px; left: 14px; width: 360px; max-height: calc(100% - 28px);
  overflow-y: auto; z-index: 3; background: var(--hud); border: 1px solid var(--border); border-radius: 4px;
  padding: 12px 14px; box-shadow: 0 8px 28px rgba(0,0,0,.5); font-size: 12px; line-height: 1.5; }
.onto-sources .oi-head { display: flex; align-items: center; gap: 7px; margin-bottom: 8px; font-size: 14px; }
.onto-sources .oi-head .mini-btn { margin-left: auto; }
.onto-sources .os-lead { margin: 0 0 10px; color: var(--muted); }
.onto-sources .os-sec { margin: 9px 0; padding-left: 8px; border-left: 2px solid var(--border); }
.onto-sources .os-sec b { color: var(--text); }
.onto-sources .os-sec p { margin: 3px 0 0; color: var(--muted); font-size: 11.5px; }
.onto-sources .os-file { display: block; font-size: 10.5px; color: var(--accent); font-family: monospace; margin-top: 1px; }
.onto-sources .os-rel { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--border); }
.onto-sources .os-rel > b { display: block; margin-bottom: 6px; }
.onto-sources .os-row { display: flex; align-items: baseline; gap: 6px; margin: 5px 0; color: var(--muted); font-size: 11.5px; }
.onto-sources .os-row b { color: var(--text); }
/* 행 설명은 단일 .os-txt 로 감쌈 — 텍스트/<b>가 flex 아이템으로 쪼개져 세로로 깨지던 문제 방지 */
.onto-sources .os-txt { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.onto-sources .os-edge { flex: 0 0 auto; width: 16px; height: 0; border-top: 2px solid #5f6b7c; margin-top: 6px; }
.onto-sources .os-edge.isa { border-top-style: dashed; border-top-color: #414b57; }
.onto-sources .os-edge.inst { border-top-style: dashed; border-top-color: #b8842a; }
.onto-sources .os-n { margin-left: auto; color: var(--accent); font-variant-numeric: tabular-nums; flex: 0 0 auto; padding-left: 6px; }
/* §12 수집 원문 데이터 출처 표 */
.onto-sources .os-tbl { width: 100%; border-collapse: collapse; margin-top: 5px; font-size: 11px; }
.onto-sources .os-tbl th { text-align: left; white-space: nowrap; vertical-align: top; color: var(--text);
  font-weight: 600; padding: 3px 8px 3px 0; border-bottom: 1px dashed var(--border); }
.onto-sources .os-tbl td { color: var(--muted); vertical-align: top; padding: 3px 0;
  border-bottom: 1px dashed var(--border); overflow-wrap: anywhere; }

/* 온톨로지 맵 통합 검색 패널 — 좌측 하단. 맵 노드 실시간 필터 + 211 지식서버 근거 검색. */
.onto-search { position: absolute; left: 14px; bottom: 14px; width: 320px; z-index: 4;
  background: var(--hud);  border: 1px solid var(--border); border-radius: 4px; box-shadow: 0 8px 28px rgba(0,0,0,.5);
  display: flex; flex-direction: column; max-height: calc(100% - 28px); }
.onto-search .osr-head { display: flex; align-items: center; gap: 7px; padding: 9px 11px 7px; }
.onto-search .osr-head b { font-size: 12.5px; }
.onto-search .osr-head .hint { font-size: 10px; }
.onto-search .osr-head .mini-btn { margin-left: auto; }
.onto-search .osr-input { margin: 0 11px 8px; display: flex; gap: 6px; }
.onto-search .osr-input input { flex: 1; background: var(--panel); color: var(--text);
  border: 1px solid var(--border); border-radius: 7px; padding: 6px 9px; font-size: 12px; }
.onto-search .osr-input input:focus { outline: none; border-color: var(--accent); }
.onto-search .osr-body { overflow-y: auto; padding: 0 11px 11px; }
.onto-search .osr-sec { font-size: 10px; color: var(--muted); font-weight: 700; text-transform: uppercase;
  letter-spacing: .04em; margin: 8px 0 4px; opacity: .8; }
.onto-search .osr-hint { font-size: 11px; color: var(--muted); padding: 4px 0; }
.onto-search .osr-item { display: flex; align-items: center; gap: 7px; padding: 5px 7px; border-radius: 6px;
  cursor: pointer; font-size: 12px; line-height: 1.35; border: 1px solid transparent; }
.onto-search .osr-item:hover { background: rgba(255,255,255,.05); border-color: var(--border); }
.onto-search .osr-item .osr-dot { width: 9px; height: 9px; border-radius: 3px; flex: 0 0 auto; }
.onto-search .osr-item .osr-lbl { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.onto-search .osr-item .osr-kind { font-size: 9.5px; color: var(--muted); flex: 0 0 auto; }
.onto-search .osr-ev { margin: 5px 0; padding: 6px 8px; border: 1px solid var(--border); border-radius: 6px;
  font-size: 11px; line-height: 1.4; background: rgba(255,255,255,.02); }
.onto-search .osr-ev .osr-ev-t { color: var(--text); font-weight: 600; }
.onto-search .osr-ev .osr-ev-snip { color: var(--muted); font-size: 10.5px; margin-top: 2px; }
.onto-search .osr-ev .role { display: inline-block; padding: 0 5px; border-radius: 3px; font-size: 9px;
  font-weight: 700; border: 1px solid var(--border); margin-left: 4px; }
.onto-search .osr-ev .role-rok { color: #2f9e5f; border-color: #278a50; }
.onto-search .osr-ev .role-ref { color: var(--muted); }
.onto-search .osr-ev .cite { font-size: 10px; }
.onto-search .osr-warn { font-size: 10px; color: var(--rep); margin: 3px 0; }

/* ===== INTRUSION I3: 침투/미인가 감시 알림 센터 + 결심지원(DECISION) 뷰 ===== */
/* 알림 벨 — 우상단(분석 어시스트 HUD 아래). 미확인 배지. */
.intrusion-bell { position: fixed; top: 14px; right: 14px; z-index: 30;
  width: 40px; height: 40px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--panel); color: var(--text); border: 1px solid var(--border);
  box-shadow: var(--elev-2); cursor: pointer; }
.bell-ico { display: block; }
.intrusion-bell:hover { border-color: var(--rep); }
.intrusion-badge { position: absolute; top: -4px; right: -4px; min-width: 18px; height: 18px;
  padding: 0 4px; border-radius: 4px; background: var(--warn); color: #fff; font-size: 11px;
  font-weight: 700; line-height: 18px; text-align: center; border: none; }
/* 슬라이드 배너(신규 critical 알림) — "의심·평가" 문구 병기(가드레일 3) */
.intrusion-banner { position: fixed; top: 14px; left: 50%; transform: translateX(-50%); z-index: 31;
  background: rgba(192,125,32,.16); border: 1px solid var(--rep); color: var(--text);
  border-radius: 4px; padding: 8px 14px; font-size: 12.5px; display: flex; align-items: center; gap: 8px;
  box-shadow: 0 6px 20px rgba(0,0,0,.45); }
.intrusion-banner .ib-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--rep);
  animation: ibpulse 2.6s ease-in-out infinite; }
@keyframes ibpulse { 0%,100% { opacity: 1; } 50% { opacity: .6; } }
.intrusion-banner .ib-note { font-size: 10px; color: var(--muted); }
.intrusion-banner .ib-view { font-size: 11px; padding: 2px 9px; }
/* 알림 목록 패널 */
.intrusion-center { position: fixed; top: 60px; right: 14px; width: 320px; z-index: 30;
  background: var(--hud, var(--panel));  border: 1px solid var(--border); border-radius: 4px; box-shadow: 0 1px 6px rgba(0,0,0,.45);
  display: flex; flex-direction: column; max-height: 62vh; padding: 10px; }
.ic-head { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.ic-head b { font-size: 13px; }
.ic-head .mini-btn { margin-left: auto; }
.ic-list { display: flex; flex-direction: column; gap: 8px; overflow-y: auto; }
.ia-card { border: 1px solid var(--border); border-left: 3px solid var(--rep); border-radius: 4px;
  padding: 8px; background: rgba(255,255,255,.02); cursor: pointer; }
/* U5 단일 선택: 선택된 알림 카드 강조(지도 하이라이트와 상호 동기 — 경보색 아닌 accent) */
.ia-card.selected { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent);
  background: rgba(69,133,214,.10); }
.ia-head { display: flex; align-items: center; gap: 6px; font-size: 12px; }
.ia-head b { color: var(--rep); }
.ia-body { font-size: 12px; margin: 3px 0; }
.ia-basis { font-size: 10.5px; color: var(--muted); margin: 2px 0; }
.ia-vid { font-size: 10px; color: var(--accent); }
.ia-note { margin: 2px 0 4px; }
.ia-actions { display: flex; gap: 6px; }
.ia-actions button { font-size: 11px; padding: 3px 8px; }
.ia-actions .ia-decision { background: var(--panel); color: var(--text); border: 1px solid var(--border); }

/* 오프라인 시연(OFFLINE_DEMO, body.offline-mode — app.js applyOfflineUi) 전용:
   침투/미인가 감시 알림 패널 확대 + 카드 대형화(텍스트 축약은 renderIntrusionCenter 가 담당).
   온라인 표시는 불변 — 이 블록은 offline-mode 스코프에서만 적용된다. */
/* 패널 상자: 기본 560px, **우하단 모서리 드래그로 자유 크기 조절**(resize) — 크기는 세션
   저장(app.js ResizeObserver→localStorage). 글자는 --icz 배율(A−/A+).
   ⚠ 실측(2026-10-07): 새 셸(U1)이 패널을 우측 alerts 슬롯(min(340px,32cqw))에 넣고
   `#nv-shell #intrusion-center { width:auto }` 고특이성으로 덮는다 → 슬롯 폭·셸 규칙까지
   오프라인 스코프에서 함께 올려야 실제로 커진다(overflow:hidden 슬롯이라 패널만 키우면 잘림). */
body.offline-mode #nv-shell .nv-slot--alerts { width: auto; max-width: min(760px, 52cqw); }
body.offline-mode #nv-shell #intrusion-center { width: 560px;
  min-width: 320px; min-height: 180px;
  max-width: 100%; max-height: 100%;
  padding: 12px; resize: both; overflow: auto; }
/* 구형(셸 밖) 레이아웃 폴백 — fixed 패널일 때도 동일 크기 */
body.offline-mode .intrusion-center { width: 560px; top: 56px;
  min-width: 320px; min-height: 180px;
  max-width: calc(100vw - 48px); max-height: calc(100vh - 80px);
  padding: 12px; resize: both; overflow: auto; }
/* 듀얼 커맨더 하단 보드 레인(오프라인): 기본 세로 스택에선 결심 블록(판정·COA·지시·답변·플랜)이
   자라면서 영상을 가리는/밀어내는 문제(사용자 실측 2026-10-07 — "COA가 패널을 가림") →
   전체 화면(cf-lanes)과 동일한 "영상(좌) ↔ 결심(우)" 그리드로 재배치. 결심 열은 자체 스크롤
   (max-height)이라 내용이 길어도 영상 영역을 침범하지 않는다. 표현 계층만(값 불변 §8). */
body.offline-mode #nv-shell .cb-lane {
  display: grid; width: clamp(480px, 46vw, 820px);
  grid-template-columns: minmax(240px, 44%) 1fr;
  grid-template-areas: "head head" "video decision";
  column-gap: 10px; row-gap: 6px; align-items: start;
}
body.offline-mode #nv-shell .cb-lane-head { grid-area: head; }
body.offline-mode #nv-shell .cb-video { grid-area: video; align-self: start; }
body.offline-mode #nv-shell .cb-decision { grid-area: decision; min-width: 0;
  max-height: 34vh; overflow-y: auto; }
body.offline-mode .ic-head { margin-bottom: 4px; }
body.offline-mode .ic-head b { font-size: calc(15px * var(--icz, 1.3)); }
body.offline-mode .ic-head .hint { font-size: calc(10px * var(--icz, 1.3)); }
body.offline-mode .ic-list { gap: 8px; }
/* 카드 여백은 텍스트에 맞게 컴팩트(패딩·마진 최소) — 크기감은 글자 배율(--icz)이 담당 */
body.offline-mode .ia-card { padding: 9px 11px; border-left-width: 4px; border-radius: 6px; }
body.offline-mode .ia-head { font-size: calc(14px * var(--icz, 1.3)); gap: 8px; }
body.offline-mode .ia-head .badge { font-size: calc(10px * var(--icz, 1.3)); padding: 1px 8px; }
body.offline-mode .ia-vid { font-size: calc(10px * var(--icz, 1.3)); }
body.offline-mode .ia-body { font-size: calc(13px * var(--icz, 1.3)); margin: 3px 0; line-height: 1.4; }
body.offline-mode .ia-note { font-size: calc(10px * var(--icz, 1.3)); margin: 1px 0 5px; }
body.offline-mode .intrusion-center .disclaimer { font-size: calc(9px * var(--icz, 1.3)); margin-top: 6px; }
body.offline-mode .ia-actions { gap: 8px; }
body.offline-mode .ia-actions button { font-size: calc(12px * var(--icz, 1.3));
  padding: 5px 12px; flex: 0 1 auto; border-radius: 6px; }
/* 알림 센터가 열리면 분석 어시스트를 실제 패널 폭만큼 밀기(app.js 가 --ic-w 동기) */
body.offline-mode .hud-right.shifted { right: calc(var(--ic-w, 560px) + 42px); }
/* 우하단 범례·MGRS 좌표 판독 스택 — 오프라인 시연에선 숨김(화면 정리, 사용자 요구 2026-10-07).
   지도 격자·레이어 동작 자체는 불변(패널 표시만 숨김) — 온라인 모드 무영향. */
body.offline-mode .br-stack { display: none !important; }
/* 작도(그리기·거리 측정) 탭·패널 — 오프라인 시연에선 숨김(사용자 요구 2026-10-07).
   표시만 숨김(저장된 작도·모듈 불변) — 온라인 모드 무영향. */
body.offline-mode #nv-left-rail .nv-rail-btn[data-tab="draw"],
body.offline-mode #nv-pane-draw { display: none !important; }

/* 크기 조절 컨트롤(A−/A+/↺ — 오프라인에서만 주입, zoom 배율 localStorage 기억) */
.ic-zoom { display: inline-flex; align-items: center; gap: 4px; margin-left: auto; }
.ic-zoom + #intrusion-center-close { margin-left: 6px; }
.ic-zoom .mini-btn { margin-left: 0; padding: 1px 7px; font-weight: 700; }
.ic-zoom .ic-zoom-val { min-width: 38px; text-align: center; font-variant-numeric: tabular-nums; }

/* 결심지원(DECISION) 뷰 — 우측 '분석 어시스트'(hud-right) 오른편(화면 우측 끝)에 도킹.
   열리면 syncHudShift 가 어시스트를 왼쪽으로 밀어 겹침 방지(.hud-right.shifted-dec). */
.decision-view { position: fixed; right: 14px; top: 14px; width: 380px; z-index: 14;
  background: var(--hud, var(--panel));  border: 1px solid var(--border); border-radius: 4px; box-shadow: 0 1px 6px rgba(0,0,0,.45);
  display: flex; flex-direction: column; max-height: calc(100vh - 28px); }
.dec-head { display: flex; align-items: center; gap: 8px; padding: 10px 14px;
  border-bottom: 1px solid var(--border); }
.dec-head b { font-size: 13px; }
.dec-head .mini-btn { margin-left: auto; }
.dec-body { padding: 12px 14px 14px; overflow-y: auto; }
/* 텍스트 줄 간 여백 — 촘촘하던 라벨/근거 줄을 넉넉하게 */
.dec-body .menu-label { margin-top: 14px; margin-bottom: 7px; line-height: 1.5; }
.dec-body > .menu-label:first-child { margin-top: 0; }
.dec-target { border: 1px solid var(--border); border-radius: 6px; padding: 9px 11px; font-size: 12px;
  line-height: 1.55; }
.dec-tgt-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 3px; }
.dec-target .hint { display: block; margin-top: 5px; line-height: 1.5; }
.dec-visual { margin-top: 6px; font-size: 11.5px; color: var(--accent); line-height: 1.5; }
#dec-coa.hanul-list { gap: 7px; }
.dec-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  border: 1px solid var(--border); border-radius: 6px; padding: 7px 10px; font-size: 11.5px;
  line-height: 1.55; }
.dec-kind { font-size: 9.5px; font-weight: 700; text-transform: uppercase; min-width: 78px; }
.dec-row .grow { flex: 1 1 auto; }
.dec-crit { flex: 1 1 100%; margin-top: 4px; }
.dec-body .hint { line-height: 1.55; }
.dec-input-row { display: flex; gap: 6px; margin: 4px 0 8px; }
.dec-input-row input { flex: 1 1 auto; }
.dec-input-row button { font-size: 11px; padding: 3px 10px; }
.dec-plans { display: flex; flex-direction: column; gap: 8px; }
.dec-plan { border: 1px solid var(--border); border-left: 3px solid var(--accent); border-radius: 4px;
  padding: 8px; font-size: 11.5px; }
.dec-plan-head { display: flex; align-items: baseline; gap: 6px; }
.dec-step { margin: 3px 0; }
.dec-badge { font-size: 9px; font-weight: 700; padding: 1px 5px; border-radius: 4px; }
.dec-badge.tool { background: rgba(69,133,214,.16); color: var(--accent); border: 1px solid var(--accent); }
.dec-badge.manual { background: rgba(147,160,175,.16); color: var(--muted); border: 1px solid var(--muted); }
.dec-demoted { font-size: 10px; color: var(--rep); }
.dec-risks { font-size: 10.5px; color: var(--rep); margin-top: 4px; }

/* ── 시네마틱 인트로 (index.html #intro — 세션당 1회, 클릭/키 스킵) ─────────────
   타임라인: 로고 줌+글로우(0.15s~) → 글자 스태거(0.85s~) → 라이트 스윕(2.05s)
   → 줌인 페이드 종료(4.2s 자동 또는 스킵). UI 전용. */
.intro { position: fixed; inset: 0; z-index: 10000; background: #0e1013;
  display: flex; align-items: center; justify-content: center; overflow: hidden;
  cursor: pointer; user-select: none;
  transition: opacity .95s cubic-bezier(.4,0,.6,1), transform .95s cubic-bezier(.3,.6,.2,1); }
.intro.intro-exit { opacity: 0; transform: scale(1.15); pointer-events: none; }
.intro-bg { position: absolute; inset: -20%; opacity: 0;
  background:
    radial-gradient(ellipse 62% 46% at 50% 56%, rgba(30,52,56,.9), transparent 70%),
    radial-gradient(ellipse 40% 28% at 50% 60%, rgba(111,191,130,.10), transparent 70%); }
.intro-play .intro-bg { animation: introFade 2.2s ease .25s forwards; }
.intro-stage { position: relative; display: flex; flex-direction: column; align-items: center;
  gap: clamp(18px, 3vh, 30px); }
.intro-mark { width: clamp(84px, 13vw, 150px); height: auto; opacity: 0; }
.intro-play .intro-mark { animation: introMark 1.5s cubic-bezier(.16,.84,.3,1) .15s forwards; }
@keyframes introMark {
  0%   { opacity: 0; transform: scale(2.3);
         filter: blur(14px) drop-shadow(0 0 0 rgba(111,191,130,0)); }
  55%  { opacity: 1;
         filter: blur(0) drop-shadow(0 0 34px rgba(111,191,130,.55)); }
  100% { opacity: 1; transform: scale(1);
         filter: blur(0) drop-shadow(0 0 14px rgba(111,191,130,.3)); }
}
.intro-word { position: relative; overflow: hidden; padding: .06em .3em;
  font-family: "Orbitron", "NanumSquare Neo", sans-serif; /* 미로드 시 기존 폰트 폴백(무중단) */
  font-weight: 900; color: #f0f2f5; font-size: clamp(28px, 5vw, 58px);
  letter-spacing: .22em; line-height: 1.15; white-space: nowrap; }
.intro-word .l { display: inline-block; opacity: 0; }
.intro-word .l:last-child { letter-spacing: 0; } /* 가운데 정렬 보정(마지막 자간 제거) */
.intro-play .intro-word .l { animation: introLetter .55s cubic-bezier(.2,.7,.3,1) forwards;
  animation-delay: calc(.45s + var(--i) * .05s); }  /* 인트로 단축(REDESIGN_UX §9) */
@keyframes introLetter {
  from { opacity: 0; transform: translateY(.55em) scale(1.12); filter: blur(6px); }
  to   { opacity: 1; transform: none; filter: blur(0); }
}
.intro-sweep { position: absolute; inset: 0; pointer-events: none;
  transform: translateX(-110%); mix-blend-mode: screen;
  background: linear-gradient(100deg, transparent 30%, rgba(111,191,130,.30) 45%,
    rgba(255,255,255,.55) 50%, rgba(111,191,130,.30) 55%, transparent 70%); }
.intro-play .intro-sweep { animation: introSweep .85s ease 1.25s forwards; }
@keyframes introSweep { to { transform: translateX(110%); } }
.intro-skip { position: absolute; bottom: 26px; left: 0; right: 0; text-align: center;
  color: rgba(147,160,175,.55); font-size: 11px; letter-spacing: .18em; opacity: 0; }
.intro-play .intro-skip { animation: introFade .8s ease 1.05s forwards; }
@keyframes introFade { to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .intro-play .intro-bg, .intro-play .intro-mark, .intro-play .intro-word .l,
  .intro-play .intro-sweep, .intro-play .intro-skip {
    animation-duration: .01s !important; animation-delay: 0s !important; }
}

/* M2 커넥터 상태 패널(read-only) */
.connector-list { display: flex; flex-direction: column; gap: 3px; margin-top: 4px; }
.conn-row { display: flex; align-items: baseline; gap: 6px; font-size: 11px; line-height: 1.5; }
.conn-dot { flex: 0 0 auto; }
.conn-on { color: #2f9e5f; }
.conn-warn { color: #c07d20; }
.conn-off { color: #5f6b7c; }
.conn-name { color: var(--fg, #e6e9ed); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 42%; }
.conn-meta { color: #93a0af; font-size: 10px; }
.collab-share { margin-top: 5px; font-size: 11px; color: var(--muted); }
.collab-share summary { cursor: pointer; margin-bottom: 4px; }
.collab-share textarea { min-height: 48px; resize: vertical; margin-top: 4px; }
.mini-select { max-width: 150px; font-size: 10px; background: var(--panel); color: var(--text); border: 1px solid var(--border); border-radius: 4px; }

/* ── 상황보고(SITUATION_REPORT) — VLM 서술 + 탐지 융합 카드 ── */
.situation-panel { background: var(--panel); border: 1px solid var(--border); border-radius: 6px;
  padding: 10px; font-size: 12px; color: var(--text); display: flex; flex-direction: column; gap: 8px; }
.situation-panel .sit-sum { font-weight: 600; line-height: 1.5; }
.situation-panel b { color: var(--text); }
.sit-facts, .sit-narr, .sit-recs, .sit-unc { border-top: 1px dashed var(--border); padding-top: 6px; }
.sit-seg { padding: 4px 0; line-height: 1.5; }
.sit-t { font-family: var(--font-num); color: var(--muted); margin-right: 4px; }
.sit-grade { display: inline-block; font-size: 10px; padding: 1px 6px; border-radius: 5px;
  border: 1px solid var(--border); color: var(--muted); margin-left: 3px; }
.sit-grade.g-high { color: var(--rep); border-color: var(--rep); }
.sit-grade.g-med { color: var(--det-3); }
.sit-rec { padding: 4px 0; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.sit-hitl { font-size: 9px; font-weight: 700; letter-spacing: .5px; padding: 1px 5px; border-radius: 4px;
  background: rgba(207,68,72,.15); color: var(--warn); border: 1px solid var(--warn); }
.sit-rec-btn { font-size: 10px; padding: 2px 8px; }
.sit-unc { color: var(--muted); }
.sit-foot { border-top: 1px dashed var(--border); padding-top: 6px; display: flex; align-items: center; gap: 8px; }
/* 분석 근거 — 왜 이 위협도인가(threat_basis 노출) */
.sit-basis { border-top: 1px dashed var(--border); padding-top: 6px; }
.sit-basis > summary { cursor: pointer; font-size: 12px; color: var(--text); list-style: revert; }
.sit-basis > summary::marker { color: var(--muted); }
.sit-basis-body { padding: 4px 0 0 4px; display: flex; flex-direction: column; gap: 3px; }
.sit-b { font-size: 12px; line-height: 1.5; }
.sit-b-tag { display: inline-block; font-size: 10px; font-weight: 700; padding: 0 5px; border-radius: 4px;
  border: 1px solid var(--border); color: var(--muted); margin-right: 2px; }
.sit-b-tag.det { color: var(--det-1); border-color: var(--det-1); }
.sit-b-tag.vlm { color: var(--det-4); border-color: var(--det-4); }
.sit-b-tag.cap { color: var(--rep); border-color: var(--rep); }
.sit-b-eoi { margin-top: 2px; }
.sit-basis-note { margin-top: 4px; line-height: 1.5; }
.badge.sit-src { background: var(--panel-2); color: var(--muted); border: 1px solid var(--border); }
/* 위협도 배지 — 평가 등급(표적 마킹 아님, 가드레일 3). 밴드별 절제된 그라데이션. */
.badge.sit-lv-info { background: var(--panel-2); color: var(--muted); border: 1px solid var(--border); }
.badge.sit-lv-caution { background: rgba(192,125,32,.15); color: var(--rep); border: 1px solid var(--rep); }
.badge.sit-lv-warning { background: rgba(217,154,95,.18); color: var(--det-8); border: 1px solid var(--det-8); }
.badge.sit-lv-critical { background: rgba(207,68,72,.16); color: var(--warn); border: 1px solid var(--warn); }

/* ── 듀얼 커맨더 보드(하단 도크) ─ 침투 감시 다중 트랙 동시 처리(레인별 독립 영상·COA·HITL) ──
   크기는 고정값이 아니라 콘텐츠 유동: 보드 폭 = 레인 수×레인 폭(max-content, 중앙 정렬),
   높이 = 영상·카드 콘텐츠 높이(뷰포트 상한 초과 시에만 스크롤). 좌우 HUD(346px) 회피 상한. */
.commander-board { position: fixed; left: 50%; bottom: 12px; transform: translateX(-50%);
  z-index: 14; width: max-content; max-width: calc(100vw - 716px);
  background: var(--hud); border: 1px solid var(--border-2); border-radius: var(--radius-lg);
  box-shadow: 0 6px 24px rgba(0,0,0,.45); display: flex; flex-direction: column; }
.commander-board.hidden { display: none; }
/* 드래그로 옮긴 뒤에는 left/top 픽셀 좌표로 고정(중앙 정렬 transform 해제) — 뒤 커맨더를
   가리지 않게 자유 배치. 이동 중에는 텍스트 선택·전환 애니메이션 억제. */
.commander-board.floating { transform: none; bottom: auto; right: auto; }
.commander-board.dragging { user-select: none; box-shadow: 0 10px 32px rgba(0,0,0,.55); }
/* 결심지원(DECISION, 우측 380px) 뷰가 열리면 듀얼 커맨더를 그 왼편 영역([346px, 100vw-408px])
   중앙으로 자동 재배치 — 두 커맨더가 겹치지 않고 나란히 보이게(app.js syncHudShift 가 .dec-open
   토글). 사용자가 직접 드래그(.floating)한 경우엔 그 위치를 존중해 재배치하지 않는다. */
.commander-board.dec-open:not(.floating) {
  left: 346px; right: 408px; transform: none; margin: 0 auto;
  max-width: calc(100vw - 754px); }
/* width:0+min-width:100% — 헤더의 nowrap 힌트 텍스트가 max-content 보드 폭을 늘리지 않게
   (보드 폭은 레인(body)만 결정, 헤더는 그 폭에 맞춰 ellipsis). */
.cb-head { display: flex; align-items: center; gap: 8px; padding: 7px 10px;
  border-bottom: 1px solid var(--border); flex: 0 0 auto; width: 0; min-width: 100%;
  cursor: grab; touch-action: none; }
.cb-head.grabbing, .commander-board.dragging .cb-head { cursor: grabbing; }
/* 헤더 버튼은 드래그 대상 제외(클릭 우선) */
.cb-head .mini-btn { cursor: pointer; }
.cb-head .cb-grip { color: var(--muted); font-size: 13px; letter-spacing: -1px; flex: 0 0 auto; }
.cb-head .cb-title { color: var(--accent); font-size: 12px; }
.cb-head .hint { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.commander-board.collapsed .cb-body { display: none; }
/* 높이 = 콘텐츠 유동(고정 42vh 제거) — 뷰포트 상한(상단 여백 확보) 초과 시에만 스크롤. */
.cb-body { display: flex; gap: 10px; padding: 10px; overflow: auto;
  max-height: calc(100vh - 150px); }
/* 레인 폭: 영상(16:9 기준) 시인성 범위의 뷰포트 비례 유동값 — 보드 max-width 초과 시 축소. */
.cb-lane { flex: 0 1 auto; width: clamp(380px, 42vw, 660px); min-width: 0;
  display: flex; flex-direction: column; gap: 6px;
  background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 8px; }
.cb-lane-head { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.cb-lane-head .cb-cmdr { background: var(--panel-2); color: var(--accent); font-weight: 700;
  font-size: 10px; padding: 1px 6px; border-radius: 8px; }
.cb-lane-head .cb-tid { font-size: 13px; }
.cb-lane-head .cb-kind { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cb-lane-close { margin-left: auto; }
.cb-video { position: relative; background: #0d1117; border: 1px solid var(--border);
  border-radius: 4px; overflow: hidden; }
/* 캔버스는 레인 폭 기준 비율 유지(height:auto) — 종횡비는 플레이어가 실제 영상에 동기
   (fitMedia, cctv_live.js). 왜곡·세로 잘림 없음. */
.cb-video canvas { display: block; width: 100%; height: auto; }
.cb-video .badge { position: absolute; top: 5px; left: 5px; }
.cb-counts { padding: 4px 6px; font-size: 10.5px; display: flex; gap: 8px; flex-wrap: wrap; color: var(--text); }
.cb-decision { display: flex; flex-direction: column; gap: 5px; }
.cb-target { line-height: 1.4; }
/* 결심지원 요청 버튼 — 레인 안 상시 노출(전체 화면에서도 누를 수 있게). accent 강조·전폭. */
.cb-decide-row { display: flex; gap: 6px; }
.cb-coa-req { flex: 1; background: var(--accent); color: #0b111b; font-weight: 700;
  font-size: 11.5px; padding: 5px 10px; border: none; border-radius: 6px; cursor: pointer; }
.cb-coa-req:hover { filter: brightness(1.08); }
.cb-coa-req:disabled { opacity: .5; cursor: default; }
.cb-sec-label { font-size: 10px; color: var(--muted); font-weight: 700; margin-top: 2px; }
.cb-coa .cb-row { display: flex; align-items: center; gap: 5px; padding: 3px 5px; margin: 2px 0;
  border: 1px solid var(--border); border-radius: 5px; font-size: 11px; }
.cb-coa .cb-row .cb-kind { min-width: 62px; font-weight: 700; }
.cb-coa .cb-row .grow { flex: 1; min-width: 0; }
.cb-coa .cb-bar { display: inline-block; width: 42px; height: 5px; border-radius: 3px;
  background: var(--panel-2); overflow: hidden; }
.cb-coa .cb-bar i { display: block; height: 100%; }
.cb-coa .cb-score { min-width: 36px; text-align: right; color: var(--muted); }
.cb-delib { margin: 3px 0; padding: 4px 6px; border-left: 3px solid var(--accent);
  font-size: 10.5px; line-height: 1.5; }
.cb-delib .badge { padding: 0 5px; border-radius: 8px; color: #0b111b; font-size: 9px; font-weight: 700; margin-right: 4px; }
.cb-hitl-card { margin: 4px 0; padding: 6px 7px; border: 1px solid var(--rep);
  border-radius: 5px; background: rgba(192,125,32,.08); }
.cb-hitl-title { font-size: 11px; font-weight: 700; margin-bottom: 3px; }
.cb-hitl-actions { display: flex; gap: 6px; margin-top: 5px; }
.cb-hitl-actions button { font-size: 11px; padding: 3px 12px; }
.cb-hitl-actions .cb-reject { background: var(--panel-2); color: var(--text); }
.cb-hitl-actions button:disabled { opacity: .5; cursor: default; }
.cb-hitl-pending { margin-top: 4px; }
.cb-hitl-result { margin: 4px 0; padding: 5px 7px; border-radius: 5px; font-size: 11px; }
.cb-hitl-result.ok { border: 1px solid var(--live); color: #6fbf82; background: rgba(47,158,95,.08); }
.cb-hitl-result.no { border: 1px solid var(--border-2); color: var(--muted); }
.cb-instr-row { display: flex; gap: 5px; }
.cb-instr-row input { flex: 1; min-width: 0; background: #12151a; color: var(--text);
  border: 1px solid var(--border); border-radius: 5px; font-size: 11px; padding: 3px 6px; }
/* 레인 전용 질의 대화(각 커맨더 독립 실행) — 지시 echo·분석 중·답변을 레인 안에서. */
.cb-answer { display: flex; flex-direction: column; gap: 3px; max-height: 160px; overflow: auto; }
.cb-answer:empty { display: none; }
.cb-msg { font-size: 11px; line-height: 1.5; padding: 4px 7px; border-radius: 6px;
  white-space: pre-wrap; word-break: break-word; }
.cb-msg-user { background: rgba(69,133,214,.14); color: var(--text); align-self: flex-end; max-width: 92%; }
.cb-msg-assistant { background: var(--panel-2); color: var(--text); }
.cb-msg-pending { color: var(--muted); font-style: italic; }
.cb-msg-error { color: var(--warn); border: 1px solid var(--warn); }
/* 마크다운 렌더 답변 — raw 텍스트 노출 해소(제목·목록·강조·코드·인용). */
.cb-msg.md { white-space: normal; }
.cb-msg.md p { margin: 0 0 6px; }
.cb-msg.md p:last-child { margin-bottom: 0; }
.cb-msg.md h1, .cb-msg.md h2, .cb-msg.md h3, .cb-msg.md h4 { margin: 6px 0 3px; font-size: 11.5px; }
.cb-msg.md ul, .cb-msg.md ol { margin: 3px 0 6px; padding-left: 18px; }
.cb-msg.md li { margin: 1px 0; }
.cb-msg.md code { background: #171b21; padding: 0 3px; border-radius: 3px; font-size: 10px; }
.cb-msg.md pre { background: #171b21; border: 1px solid var(--border); border-radius: 5px;
  padding: 6px 8px; overflow: auto; margin: 4px 0; }
.cb-msg.md pre code { background: none; padding: 0; }
.cb-msg.md blockquote { margin: 4px 0; padding: 2px 8px; border-left: 3px solid var(--border-2); color: var(--muted); }
.cb-msg.md a { color: #6aa2e0; }
.cb-msg.md a.cite { text-decoration: none; }
/* 결심 근거(활성 온톨로지·근거 자료) — 레인 COA·플랜 카드 접이식. */
.cb-evd { margin: 5px 0 2px; border: 1px solid var(--border); border-radius: 5px;
  background: rgba(255,255,255,.02); padding: 3px 6px; }
.cb-evd > summary { cursor: pointer; font-size: 10.5px; font-weight: 700; color: var(--accent); }
.cb-evd-basis { color: var(--text); font-weight: 400; }
.cb-evd-warn { margin: 4px 0; padding: 3px 6px; border-left: 3px solid var(--rep); color: var(--rep); font-size: 10px; }
.cb-evd-row { margin: 3px 0; font-size: 10.5px; line-height: 1.5; color: var(--text); }
.cb-evd-row a { color: #6aa2e0; }
.cb-role { display: inline-block; padding: 0 5px; border-radius: 8px; font-size: 8.5px; margin-left: 3px; }
.cb-role.basis { color: #6fbf82; border: 1px solid #1f7a44; }
.cb-role.reference { color: var(--muted); border: 1px solid var(--border-2); }
.cb-plan { margin: 4px 0; padding: 5px 7px; border: 1px solid var(--border); border-radius: 5px; }
.cb-plan-head { font-size: 11px; margin-bottom: 3px; }
.cb-step { font-size: 10.5px; margin: 2px 0; line-height: 1.5; }
.cb-badge { display: inline-block; font-size: 8.5px; font-weight: 700; padding: 0 4px;
  border-radius: 6px; margin-right: 4px; }
.cb-badge.tool { background: rgba(69,133,214,.2); color: #6aa2e0; }
.cb-badge.manual { background: var(--panel-2); color: var(--muted); }
.cb-demoted { color: var(--rep); }
@media (max-width: 1100px) {
  .commander-board { max-width: calc(100vw - 28px); }
  .cb-body { flex-direction: column; }
  .cb-lane { width: auto; }
  /* 좁은 화면: 결심지원과 나란히 둘 공간이 부족 → 자동 재배치 해제(전폭 유지).
     겹침이 불편하면 헤더를 드래그해 옮긴다(.floating). */
  .commander-board.dec-open:not(.floating) {
    left: 50%; right: auto; transform: translateX(-50%); margin: 0;
    max-width: calc(100vw - 28px); }
}

/* ── 결심지원 커맨더 전체 화면(확대) — 좌=커맨더 레인(이동), 우=xAI 계보 사이드 패널 ──
   z-index 34: 알림 벨(30)·범례(30) 위, 설정 드로어(40)·팝오버(50) 아래. 표시 전용 —
   값은 서버 산출(§8), 실행은 기존 HITL 카드 승인 후(가드레일 1·2). */
/* 확대 = 화면 왼쪽 도크 패널(전체화면 아님). 오른쪽은 맵이 계속 보이고 조작 가능(맵 가림 해소).
   세로 전체 높이·내용 스크롤·접기 가능. 양평 임베드 모드(cf-has-yp)는 전체폭 유지(아래 override). */
.commander-full { position: fixed; left: 0; top: 0; bottom: 0; z-index: 34;
  width: clamp(480px, 46vw, 860px); background: rgba(13,17,23,.97);
  display: flex; flex-direction: column; border-right: 1px solid var(--border-2);
  box-shadow: 4px 0 24px rgba(0,0,0,.45); transition: width .16s ease; }
.commander-full.hidden { display: none; }
/* 양평 정찰(cf-has-yp) — 맵을 패널 안에 임베드하므로 전체폭 유지(도크 아님). */
.commander-full.cf-has-yp { width: auto; right: 0; box-shadow: none; border-right: none; }
/* 양평 모드 한정 — 접기(슬림 바) 버튼과 질의 바 접기 토글 숨김(사용자 요구). 다른 시나리오는 유지. */
.commander-full.cf-has-yp #cf-collapse,
.commander-full.cf-has-yp #cf-q-toggle { display: none; }
/* 접힘 — 슬림 바로 축소(맵 전체 노출). 헤더의 펼치기 버튼만 남긴다. */
.commander-full.collapsed { width: 38px; }
.commander-full.collapsed .cf-body { display: none; }
.commander-full.collapsed .cf-head { flex-direction: column; padding: 8px 3px; gap: 6px; }
.commander-full.collapsed .cf-title, .commander-full.collapsed .cf-head .hint,
.commander-full.collapsed #cf-close { display: none; }
.commander-full.collapsed #cf-collapse { writing-mode: vertical-rl; }
/* 전체 화면 동안 하단 요약 보드 자체는 숨김(#cb-body 는 cf-lanes 로 이동돼 라이브 유지) */
.commander-board.in-full { display: none; }
.cf-head { display: flex; align-items: center; gap: 10px; padding: 10px 16px;
  border-bottom: 1px solid var(--border-2); background: var(--hud); flex: 0 0 auto; }
.cf-head .cf-title { color: var(--accent); font-size: 13px; flex: 0 0 auto; }
.cf-head .hint { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* 헤더 질의·결심지원 바(제목 옆) — 토글로 접기/펴기. */
.cf-q-bar { display: flex; gap: 6px; align-items: center; flex: 1 1 auto; min-width: 0; position: relative; }
/* .cf-coa-req(결심지원 요청 버튼) 제거됨 — 진입 자동 발화와 중복. */
/* 추천 질의 드롭다운 — 지휘관 질의 입력 포커스 시 아래에 표시(분과 활성화 예시) */
.cf-q-suggest { position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 40;
  background: #12151a; border: 1px solid var(--border); border-radius: 8px; padding: 8px;
  display: flex; flex-wrap: wrap; gap: 6px; box-shadow: 0 6px 20px rgba(0,0,0,.5); }
.cf-q-suggest.hidden { display: none; }
.cf-q-sug-h { flex: 0 0 100%; color: var(--muted); font-size: 10px; margin-bottom: 2px; }
.cf-q-sug { background: rgba(69,133,214,.14); color: var(--text); border: 1px solid var(--border);
  border-radius: 6px; padding: 5px 8px; font-size: 11px; cursor: pointer; text-align: left; }
.cf-q-sug:hover { background: rgba(69,133,214,.28); border-color: var(--accent); }
.cf-q-sug-tag { display: inline-block; margin-right: 6px; padding: 0 5px; border-radius: 6px;
  background: var(--accent); color: #0b0e12; font-size: 9px; font-weight: 700; }
/* 질의 응답 · 결심(HITL) 패널 — 전체화면 질의 입력 하단(뒤 커맨더로 가려지던 문제 해소) */
.cf-decision { flex: 0 0 auto; border-bottom: 1px solid var(--border-2); background: rgba(18,21,26,.96);
  max-height: 42vh; display: flex; flex-direction: column; }
.cf-decision.hidden { display: none; }
.cf-decision-head { display: flex; align-items: center; gap: 8px; padding: 6px 16px; flex: 0 0 auto; }
.cf-decision-head b { font-size: 12px; color: var(--accent); }
.cf-decision-head .cf-cnt { background: var(--warn); color: #0b0e12; border-radius: 8px; padding: 0 6px;
  font-size: 9px; font-weight: 700; }
.cf-decision-head .mini-btn { margin-left: auto; }
.cf-decision-head .mini-btn + .mini-btn { margin-left: 4px; }
.cf-decision.collapsed .cf-decision-body { display: none; }
/* 결심 패널 탭 — 질의 응답·결심 ↔ HITL 결심(승인 필요 모음). 대기 시 배지·펄스로 알림. */
.cf-dtabs { display: flex; gap: 4px; align-items: center; }
.cf-dtab { font-size: 11px; font-weight: 600; color: var(--muted); background: transparent;
  border: 1px solid transparent; border-radius: 6px 6px 0 0; padding: 4px 10px; cursor: pointer;
  border-bottom: 2px solid transparent; }
.cf-dtab:hover { color: var(--text); }
.cf-dtab.active { color: var(--accent); border-bottom-color: var(--accent); }
.cf-hitl-badge { display: inline-block; margin-left: 5px; background: var(--warn); color: #0b0e12;
  border-radius: 8px; padding: 0 5px; font-size: 9px; font-weight: 700; line-height: 15px; }
.cf-hitl-badge.hidden { display: none; }
/* HITL 대기 있는데 다른 탭 보고 있으면 탭을 펄스로 강조(알림). */
.cf-dtab-alert { color: var(--warn); animation: cfHitlPulse 1.3s ease-in-out infinite; }
@keyframes cfHitlPulse { 0%,100% { opacity: 1; } 50% { opacity: .45; } }
/* 대화 탭 하단 "HITL 승인 필요" 안내(클릭 시 HITL 탭 이동). */
.cf-hitl-hint { font-size: 11px; font-weight: 600; color: var(--warn); cursor: pointer;
  border: 1px dashed var(--warn); border-radius: 6px; padding: 6px 10px; background: rgba(207,68,72,.08); }
.cf-hitl-hint:hover { background: rgba(207,68,72,.16); }
.cf-hitl-done-h { margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--border-2); }
/* HITL 승인 필요 알림 토스트 — 전체화면 상단 중앙, 클릭 시 HITL 탭. */
.cf-hitl-toast { position: absolute; top: 12px; left: 50%; transform: translateX(-50%) translateY(-8px);
  z-index: 40; background: rgba(28,20,20,.98); border: 1px solid var(--warn); border-left: 4px solid var(--warn);
  border-radius: 8px; padding: 8px 14px; font-size: 12px; color: var(--text); cursor: pointer;
  box-shadow: 0 6px 20px rgba(0,0,0,.5); opacity: 0; pointer-events: none; transition: opacity .25s, transform .25s; }
.cf-hitl-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); pointer-events: auto; }
.cf-hitl-toast.hidden { display: none; }
.cf-hitl-toast .cf-toast-go { color: var(--warn); font-weight: 700; margin-left: 6px; }
/* flex:1 + min-height:0 — 42vh 캡 안에서 본문이 스크롤되도록(누락 시 긴 답변이 잘리고 스크롤 불가). */
.cf-decision-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 4px 16px 12px;
  display: flex; flex-direction: column; gap: 8px; }
.cf-hitl-card { border: 1px solid var(--border); border-left: 3px solid var(--warn); border-radius: 8px;
  padding: 8px 10px; background: #12151a; }
.cf-hitl-card.crit { border-left-color: var(--warn); box-shadow: 0 0 0 1px rgba(207,68,72,.3); }
.cf-hitl-card.ok { border-left-color: var(--live); opacity: .8; }
.cf-hitl-card.rej { border-left-color: var(--muted); opacity: .7; }
.cf-hitl-t { font-size: 12px; font-weight: 600; margin-bottom: 4px; }
.cf-hitl-rat { font-size: 10px; color: var(--muted); line-height: 1.5; }
.cf-hitl-btns { display: flex; gap: 8px; margin-top: 8px; }
.cf-hitl-ok, .cf-hitl-rej { flex: 1; padding: 6px 0; border-radius: 6px; font-size: 12px; font-weight: 600;
  cursor: pointer; border: 1px solid var(--border); }
.cf-hitl-ok { background: var(--live); color: #0b0e12; border-color: var(--live); }
.cf-hitl-rej { background: transparent; color: var(--text); }
.cf-hitl-rej:hover { border-color: var(--warn); color: var(--warn); }
.cf-hitl-done { margin-top: 6px; font-size: 11px; color: var(--muted); }
.cf-ans { border: 1px solid var(--border); border-radius: 8px; padding: 8px 10px; background: #0f1216; }
.cf-ans-h { font-size: 10px; color: var(--muted); margin-bottom: 4px; }
.cf-ans-t { font-size: 12px; line-height: 1.6; white-space: pre-wrap; word-break: break-word; }
/* 전체화면 대화 피드 — 채팅형: 질의=우측 강조 말풍선(지휘관) / 답변=좌측 박스(결심지원) */
.cf-fd { font-size: 11px; line-height: 1.5; word-break: break-word; }
/* 질의(지휘관) — 우측 정렬 accent 말풍선(오른쪽 아래 꼬리) */
.cf-fd-query { display: flex; justify-content: flex-end; }
.cf-fd-bubble { max-width: 88%; background: var(--accent); color: #0b0e12;
  border-radius: 12px 12px 3px 12px; padding: 7px 11px; font-size: 12px; font-weight: 600; }
.cf-fd-bubble .cf-fd-role { font-size: 9px; font-weight: 700; opacity: .72; margin-bottom: 2px; }
/* 답변(결심지원) — 좌측 정렬 박스(왼쪽 아래 꼬리·좌측 accent 바·라벨) */
.cf-fd-ans { max-width: 92%; align-self: flex-start; border: 1px solid var(--border);
  border-left: 3px solid var(--live); border-radius: 3px 12px 12px 12px; padding: 8px 11px; background: #0f1216; }
.cf-fd-ans .cf-fd-role { font-size: 10px; color: var(--live); font-weight: 700; margin-bottom: 4px; }
.cf-fd-ans .cf-fd-t { font-size: 12px; line-height: 1.6; white-space: pre-wrap; word-break: break-word; }
/* 결심지원 응답 개조식 — 분과 헤더 + 도구 불릿(원문 JSON·런온 텍스트 대신). */
.cf-ans-list { display: flex; flex-direction: column; gap: 3px; }
.cf-ans-div { font-size: 10px; font-weight: 700; color: var(--accent); margin: 5px 0 1px;
  letter-spacing: .2px; }
.cf-ans-div:first-child { margin-top: 0; }
.cf-ans-li { font-size: 11.5px; line-height: 1.5; color: var(--text); padding-left: 11px;
  position: relative; }
.cf-ans-li::before { content: "•"; position: absolute; left: 1px; color: var(--muted); }
.cf-ans-tag { display: inline-block; font-size: 9px; color: var(--muted);
  border: 1px solid var(--border); border-radius: 3px; padding: 0 4px; margin-right: 5px;
  vertical-align: 1px; }
.cf-ans-note { font-size: 9.5px; color: var(--muted); margin-top: 5px; font-style: italic; }
/* 답변 하단 근거 자료 링크(온톨로지·RAG 문서 접근) — 작전·교리 등 지식성 질의 근거. */
.cf-srcs { margin: 7px 0 2px; font-size: 11px; border-top: 1px dashed var(--border-2); padding-top: 5px; }
.cf-srcs > summary { cursor: pointer; color: var(--accent); font-weight: 600; list-style: none;
  padding: 2px 0; user-select: none; }
.cf-srcs > summary::-webkit-details-marker { display: none; }
.cf-srcs > summary::before { content: "▸"; margin-right: 4px; color: var(--muted); font-size: 9px; }
.cf-srcs[open] > summary::before { content: "▾"; }
.cf-src-row { margin: 3px 0; padding: 3px 7px; border-left: 2px solid var(--border-2); line-height: 1.5; }
.cf-src-n { color: var(--accent); font-weight: 700; margin-right: 3px; }
.cf-src-t { font-weight: 600; color: var(--text); }
.cf-src-sec, .cf-src-lic { color: var(--muted); font-size: 10px; }
.cf-src-link { color: #6aa2e0; margin-left: 4px; white-space: nowrap; }
.cf-src-snip { color: var(--muted); font-size: 10.5px; line-height: 1.45; margin-top: 2px; }
/* 경량 markdown 렌더(결심지원 응답 개조식) — **굵게**·- 불릿·> 고지·### 헤더 */
.cf-md { display: flex; flex-direction: column; gap: 3px; }
.cf-md .cf-md-h { font-size: 11.5px; font-weight: 700; color: var(--accent); margin: 4px 0 1px; }
.cf-md .cf-md-h:first-child { margin-top: 0; }
.cf-md .cf-md-ul { list-style: none; margin: 1px 0; padding: 0;
  display: flex; flex-direction: column; gap: 3px; }
.cf-md .cf-md-ul li { font-size: 11.5px; line-height: 1.5; color: var(--text);
  padding-left: 12px; position: relative; }
.cf-md .cf-md-ul li::before { content: "•"; position: absolute; left: 2px; color: var(--accent); }
.cf-md .cf-md-ul li strong { color: var(--text); font-weight: 700; }
.cf-md .cf-fd-t { font-size: 12px; line-height: 1.6; }
.cf-md code { font-family: ui-monospace, monospace; font-size: 10.5px;
  background: var(--panel-2); border-radius: 3px; padding: 0 3px; }
.commander-full.cf-has-yp .cf-side .cf-md .cf-md-ul li,
.commander-full.cf-has-yp .cf-side .cf-md .cf-md-h { font-size: 13px; }
/* 시스템 라인(활성분과·결과·채택) — 가운데 옅은 구분선 느낌 */
.cf-fd-route { color: var(--muted); font-size: 10px; text-align: center; padding: 2px 0; }
.cf-fd-ok { color: var(--live); font-size: 11px; font-weight: 600; }
.cf-fd-rej { color: var(--warn); font-size: 11px; font-weight: 600; }
.cf-q-bar input { flex: 1; min-width: 60px; background: #12151a; color: var(--text);
  border: 1px solid var(--border); border-radius: 6px; font-size: 12px; padding: 5px 10px; }
.cf-q-bar .mini-btn { flex: 0 0 auto; }
.commander-full.cf-q-collapsed .cf-q-bar { display: none; }
/* 슬림 바(전체 접힘) 시엔 질의 바·토글도 숨김 */
.commander-full.collapsed .cf-q-bar, .commander-full.collapsed #cf-q-toggle { display: none; }
.cf-body { flex: 1; display: flex; min-height: 0; }
.cf-main { flex: 1; min-width: 0; overflow: auto; padding: 14px; }
/* 좌측 도크(일반 모드) — 본문을 세로 스택(영상+결심/지휘 위, 상황개요·xAI 아래). cf-has-yp 는 제외. */
.commander-full:not(.cf-has-yp) .cf-body { flex-direction: column; overflow: auto; }
.commander-full:not(.cf-has-yp) .cf-main { flex: 0 0 auto; overflow: visible; padding: 12px 12px 0; }
.commander-full:not(.cf-has-yp) .cf-side { flex: 0 0 auto; width: auto;
  border-left: none; border-top: 1px solid var(--border-2); overflow: visible; }
.cf-empty { padding: 18px; border: 1px dashed var(--border-2); border-radius: var(--radius-lg);
  line-height: 1.7; }

/* 양평 정찰 시나리오 한정 전체화면 — 영상(위) + 지도(아래) 스택(cf-has-yp 활성 시). */
.cf-yp { display: none; }
.commander-full.cf-has-yp .cf-main { display: flex; flex-direction: column; overflow: hidden; padding: 12px; }
/* 질의응답/HITL 결심 패널이 펼쳐 열림(양평) → 컬럼 전체 스크롤(renderDecision 이 cf-dec-scroll 토글):
   패널이 지도·탭을 가리지 않고 함께 흘러내려, 스크롤하면 지도·상황개요 탭까지 전부 보인다(가려짐 해소).
   cf-body 는 뷰포트 높이 확보(압축 방지). 패널 접힘/닫힘/비양평이면 기존 레이아웃(cf-body flex:1) 유지. */
.commander-full.cf-dec-scroll.cf-has-yp { overflow-y: auto; }
.commander-full.cf-dec-scroll.cf-has-yp .cf-body { flex: 0 0 auto; height: 86vh; min-height: 420px; }
.commander-full.cf-has-yp #cf-lanes, .commander-full.cf-has-yp #cf-empty { display: none; }
.commander-full.cf-has-yp .cf-yp { display: flex; flex-direction: column; gap: 10px;
  flex: 1; min-height: 0; }
.cf-yp-video { flex: 0 0 auto; max-height: 52vh; overflow: hidden; display: flex; }
/* 이동해 온 #video-section(answer-section video-inset)을 슬롯에 꽉 채움. */
.cf-yp-video #video-section { display: block; width: 100%; margin: 0; }
.cf-yp-video #video { width: 100%; height: auto; max-height: 46vh; object-fit: contain; }
.cf-yp-map { position: relative; flex: 1 1 auto; min-height: 240px;
  border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden;
  background: #12151a; }
/* 전체화면 슬롯으로 이동한 #map — fixed 배경 → 슬롯 채움(absolute). 닫으면 클래스 제거로 복원. */
#map.cf-embedded { position: absolute; inset: 0; z-index: auto; }
.cf-empty.hidden { display: none; }

/* 양평 전체화면 결심 콕핏 — cf-side 로 이동한 결심 패널(온톨로지·COA/HITL·자연어) 정적 배치. */
/* cf-side 세로 스크롤 강제 — flex 자식은 min-height:0 이 없으면 내용이 넘쳐도 스크롤 안 됨(스크롤 불가 버그). */
/* 탭 폭은 --cf-side-w(cf-split 드래그로 조정, 기본 520px) — 넓은 화면에서 탭 텍스트가 잘리던 문제 완화. */
.commander-full.cf-has-yp .cf-side { flex: 0 0 var(--cf-side-w, 520px); width: var(--cf-side-w, 520px);
  min-height: 0; overflow-y: auto; }
/* 영상+맵 ↔ 탭 세로 드래그 분할선 — 양평 전체화면에서만 표시. 드래그로 cf-main↔cf-side 폭 조절. */
.cf-split { display: none; }
.commander-full.cf-has-yp .cf-split { display: block; flex: 0 0 7px; align-self: stretch;
  cursor: col-resize; background: var(--border-2); border-left: 1px solid var(--border);
  border-right: 1px solid var(--border); }
.commander-full.cf-has-yp .cf-split:hover,
.commander-full.cf-has-yp .cf-split.dragging { background: #4a90d9; }
/* 양평 전체화면 탭(cf-side) 텍스트 확대 — 작던 글자 가독성 개선(사용자 요구, +1.5~2px).
   cf-has-yp .cf-side 스코프라 다른 뷰 무영향, specificity 로 인라인 스타일 규칙(.evd-*/.dec-*) 도 override. */
.commander-full.cf-has-yp .cf-side .cf-yptab { font-size: 13px; }
.commander-full.cf-has-yp .cf-side .cf-sec h4,
.commander-full.cf-has-yp .cf-side .menu-label { font-size: 12.5px; }
.commander-full.cf-has-yp .cf-side .cf-sec-body,
.commander-full.cf-has-yp .cf-side .cf-row { font-size: 12px; line-height: 1.6; }
.commander-full.cf-has-yp .cf-side .hanul-list,
.commander-full.cf-has-yp .cf-side .cf-fd,
.commander-full.cf-has-yp .cf-side .cf-ans-li { font-size: 13px; }
.commander-full.cf-has-yp .cf-side .hint { font-size: 11.5px; }
.commander-full.cf-has-yp .cf-side .cf-h-sub { font-size: 10.5px; }
.commander-full.cf-has-yp .cf-side .dec-council-row,
.commander-full.cf-has-yp .cf-side .fr-kv,
.commander-full.cf-has-yp .cf-side .fr-grid { font-size: 12.5px; }
.commander-full.cf-has-yp .cf-side .evd-row,
.commander-full.cf-has-yp .cf-side .evd-kv,
.commander-full.cf-has-yp .cf-side .evd-hit,
.commander-full.cf-has-yp .cf-side .de-source,
.commander-full.cf-has-yp .cf-side .de-constraint { font-size: 12px; line-height: 1.55; }
/* 좌측 영상+지도 열도 세로 넘침 시 스크롤(작은 화면에서 지도·영상이 잘려 안 보이던 문제 완화). */
.commander-full.cf-has-yp .cf-main { overflow-y: auto; }
.cf-yp-decision { display: flex; flex-direction: column; gap: 10px; margin-bottom: 10px; }
.cf-yp-decision.hidden { display: none; }
/* 양평 전체화면 cf-side 섹션 탭 바(cf_tabs.js) — 각 섹션을 하나의 메뉴 탭으로 전환(UI 통일).
   결심 패널 탭(.cf-dtab)과 같은 accent 밑줄 스타일로 통일. */
.cf-yp-tabs { display: flex; flex-wrap: wrap; gap: 2px; position: sticky; top: 0; z-index: 3;
  background: rgba(13,17,23,.97); padding: 6px 0 0; border-bottom: 1px solid var(--border-2);
  margin: 0 0 10px; }
.cf-yp-tabs.hidden { display: none; }
.cf-yptab { background: transparent; color: var(--muted); border: 0; border-bottom: 2px solid transparent;
  padding: 6px 9px; font-size: 11px; font-weight: 600; cursor: pointer; white-space: nowrap; }
.cf-yptab:hover { color: var(--text); }
.cf-yptab.active { color: var(--accent); border-bottom-color: var(--accent); }
/* 탭 모드: 비활성 섹션 숨김(활성 1개만 표시). */
.cf-yptab-off { display: none !important; }
/* 양평 전체화면 한정: 결심지원에서 방어 후보지 추천 블록 숨김(사용자 요구). 비양평·비전체화면 정상 표시.
   대응 방책(COA)은 숨기지 않고 cf-yp-coa 슬롯(맨 하단·활성 에이전트 아래)으로 이동해 표시(yangpyeongStack). */
.commander-full.cf-has-yp #dec-defend-block { display: none; }
/* COA 하단 슬롯 — 결심지원 스타일 재사용(카드·목록). 슬롯 자체는 여백만. */
.cf-yp-coa { margin-top: 4px; }
.cf-yp-coa.hidden { display: none; }
.cf-yp-coa #dec-coa-block { display: block; }
/* 중복 제거: 텍스트판 결심지원·결심근거 섹션은 상호작용 패널이 대체(양평 전체화면 한정). */
.commander-full.cf-has-yp #cf-coa, .commander-full.cf-has-yp #cf-onto { display: none; }
/* 포커스 콕핏 — 보조 xAI 계보 섹션(검색문서·커넥터·데이터유입·xAI)은 숨김(겹침·클러터 제거).
   HITL 은 상단 질의응답 패널(#cf-decision)이 담당하므로 cf-side 에는 재부모화 안 함. */
.commander-full.cf-has-yp #cf-docs, .commander-full.cf-has-yp #cf-conn,
.commander-full.cf-has-yp #cf-data, .commander-full.cf-has-yp #cf-xai { display: none; }
/* fixed 패널(#decision-view·#evidence-view·#hitl-area)을 cf-side 컬럼 흐름으로 — 위치·폭·z 해제. */
/* 슬롯 자손이면 무조건 static — .in-cf 미부여(타이밍) 시에도 base position:fixed 가 새어
   docs/커넥터/xAI 위로 겹치던 문제 방지(!important 로 base 확실히 무력화). */
.cf-yp-decision .decision-view, .cf-yp-decision .evidence-view {
  position: static !important; inset: auto; right: auto; left: auto; top: auto; bottom: auto;
  width: auto; max-width: none; z-index: auto; margin: 0 0 8px; box-shadow: none;
  border: 1px solid var(--border); border-radius: var(--radius-lg); }
/* 비행 상태 탭 — decision-view 에서 추출된 #dec-flight 를 결심 근거 위 별도 카드 패널로.
   결심지원 카드 테두리 재사용, 상단에 파랑 accent(비행/센서 계열 구분). self-hide(데이터 없으면 숨김). */
.cf-yp-decision #dec-flight.in-cf { display: block; padding: 8px 10px 4px; margin: 0 0 8px;
  border: 1px solid var(--border); border-left: 3px solid #4a90d9; border-radius: var(--radius-lg);
  background: var(--panel, rgba(255,255,255,0.02)); }
.cf-yp-decision #dec-flight.in-cf.hidden { display: none; }
/* 결심 근거 그룹(근거·참고·환경 제약·선례) — 기본 접힘(details), 헤더 클릭 시 펼침. */
.evd-group { margin: 4px 0; }
.evd-group > summary { cursor: pointer; list-style: none; user-select: none; }
.evd-group > summary::-webkit-details-marker { display: none; }
.evd-group > summary::before { content: "▸"; margin-right: 5px; color: var(--muted); font-size: 9px; }
.evd-group[open] > summary::before { content: "▾"; }
/* 온톨로지 서브그래프(SVG)가 패널을 과점하지 않게 — cf-side 흐름에서 높이 상한. */
.cf-yp-decision .evidence-view .de-graph { max-height: 30vh; overflow: auto; }
/* 결심 근거 패널이 틀을 넘어(튀어나와) 보이지 않게 — 3D 캔버스(three.js 인라인 px 폭)·SVG·긴
   텍스트(근거·참고·환경 제약·출처)를 cf-side 틀 안에 가둔다. box-sizing 로 패딩 포함 폭 계산. */
.cf-yp-decision .evidence-view { overflow-x: hidden; }
.cf-yp-decision .evidence-view,
.cf-yp-decision .evidence-view .dec-body,
.cf-yp-decision .evidence-view .evd-3d { box-sizing: border-box; max-width: 100%; }
.cf-yp-decision .evidence-view .evd-3d canvas,
.cf-yp-decision .evidence-view .de-graph svg { max-width: 100% !important; }
.cf-yp-decision .evidence-view .de-source,
.cf-yp-decision .evidence-view .de-constraint,
.cf-yp-decision .evidence-view .evd-hit,
.cf-yp-decision .evidence-view .evd-kv,
.cf-yp-decision .evidence-view .evd-row,
.cf-yp-decision .evidence-view .evd-url { overflow-wrap: anywhere; word-break: break-word; }
/* 이동된 패널의 .dec-body 스크롤은 cf-side 전체 스크롤에 맡김(중첩 스크롤 방지). */
.cf-yp-decision .decision-view .dec-body,
.cf-yp-decision .evidence-view .dec-body { max-height: none; overflow: visible; }
/* 결심근거 생성 방식 간략 설명 — evidence 패널 상단(그래프 위). */
.evd-basis-note { font-size: 10.5px; line-height: 1.55; color: var(--muted);
  background: rgba(232,136,58,0.08); border: 1px solid rgba(232,136,58,0.35);
  border-radius: 4px; padding: 6px 8px; margin: 4px 0 8px; }
.evd-basis-note b { color: var(--text); font-weight: 600; }
/* 이동해 온 #cb-body(레인 컨테이너) — 전체 화면에선 레인을 세로로 쌓고, 각 레인 안에서
   영상(작게·좌) ↔ 결심지원(넓게·우)을 나란히 둔다. 영상이 화면을 덜 먹고 COA·HITL·플랜이
   더 잘 보이게(사용자 요구). 하단 도크 제약(max-height·클램프 폭)은 해제. */
.cf-lanes .cb-body { max-height: none; padding: 0; flex-direction: column;
  align-items: stretch; gap: 12px; }
.cf-lanes .cb-lane { max-width: none; width: auto; display: grid;
  grid-template-columns: minmax(280px, 38%) 1fr;
  grid-template-areas: "head head" "video decision"; column-gap: 14px; row-gap: 6px;
  align-items: start; }
.cf-lanes .cb-lane-head { grid-area: head; }
/* 영상 축소 — 40% 컬럼 폭 + 높이 상한으로 캡(종횡비 유지). 결심 라인이 하단 잘림 없이 보이게. */
.cf-lanes .cb-video { grid-area: video; align-self: start; max-height: 40vh; }
.cf-lanes .cb-video canvas { width: 100%; height: auto; max-height: 40vh; object-fit: contain; }
/* 결심지원(COA·HITL·지시·답변·플랜) — 넓은 우측 컬럼에 전체 표시(잘림 없음). */
.cf-lanes .cb-decision { grid-area: decision; align-self: start; }
.cf-lanes .cb-answer { max-height: 36vh; }
/* 좁은 화면: 영상 위 / 결심 아래 단일 컬럼으로 복귀(영상은 여전히 캡). */
@media (max-width: 900px) {
  .cf-lanes .cb-lane { grid-template-columns: 1fr;
    grid-template-areas: "head" "video" "decision"; }
  .cf-lanes .cb-video, .cf-lanes .cb-video canvas { max-height: 32vh; }
}
/* xAI 사이드 패널(어떤 데이터·온톨로지·문서·커넥터로 이 결심에 이르렀나) */
.cf-side { flex: 0 0 440px; width: 440px; min-width: 0; overflow: auto; padding: 12px;
  border-left: 1px solid var(--border-2); background: var(--hud);
  display: flex; flex-direction: column; gap: 10px; }
/* 커맨더 탭(A/B) — 우측 사이드를 선택 커맨더 기준으로 전환. 경보색 없음(중립·가드레일 3). */
.cf-tabs { display: flex; flex-wrap: wrap; gap: 6px; align-items: center;
  position: sticky; top: -12px; z-index: 2; padding: 6px 0 8px;
  background: var(--hud); border-bottom: 1px solid var(--border-2); }
.cf-tabs.hidden { display: none; }
.cf-tab { display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
  background: transparent; border: 1px solid var(--border); border-radius: var(--radius-lg);
  color: var(--muted); font-size: 11px; font-weight: 600; padding: 4px 10px; }
.cf-tab:hover { border-color: var(--accent); color: var(--text); }
.cf-tab.active { border-color: var(--accent); color: var(--text);
  background: rgba(69,133,214,0.14); }
.cf-tab .cf-tab-id { font-size: 9px; font-weight: 400; color: var(--muted);
  opacity: .85; letter-spacing: .2px; }
.cf-tab.active .cf-tab-id { color: var(--accent); opacity: 1; }
.cf-tabs-note { flex: 1 1 100%; font-size: 9px; color: var(--muted); margin-top: 1px; }
.cf-sec { border: 1px solid var(--border); border-radius: var(--radius-lg);
  background: var(--panel); padding: 8px 10px; }
.cf-sec h4 { margin: 0 0 6px; font-size: 11px; color: var(--accent);
  border-bottom: 1px solid var(--border); padding-bottom: 4px; }
.cf-sec-body { font-size: 10.5px; line-height: 1.55; color: var(--text); }
.cf-row { margin: 3px 0; word-break: break-word; }
.cf-row a { color: #6aa2e0; }
.cf-alert { border-left: 3px solid var(--rep); padding-left: 6px; }
.cf-card { margin: 5px 0; padding: 5px 7px; border: 1px solid var(--border);
  border-radius: 5px; background: rgba(255,255,255,.02); }
.cf-card-head { margin-bottom: 3px; }
.cf-basis { color: var(--rep); font-size: 9.5px; margin-left: 4px; }
.cf-coa-row { display: flex; gap: 6px; padding: 2px 4px; }
.cf-coa-row.rec { border-left: 3px solid var(--accent); background: rgba(69,133,214,.08); }
.cf-coa-row .cf-score { margin-left: auto; color: var(--muted); }
.cf-sub { margin: 7px 0 3px; font-size: 10px; font-weight: 700; color: var(--muted); }
.cf-hitl .cf-hitl-st { font-weight: 700; }
.cf-hitl.ok .cf-hitl-st { color: #6fbf82; }
.cf-hitl.no .cf-hitl-st { color: var(--muted); }
.cf-hitl.pend .cf-hitl-st { color: var(--rep); }
.cf-lic { display: inline-block; padding: 0 5px; border-radius: 8px; font-size: 8.5px;
  color: var(--muted); border: 1px solid var(--border-2); margin-left: 3px; }
.cf-connrow { padding: 3px 5px; border: 1px solid var(--border); border-radius: 5px; }
.cf-connrow.off { opacity: .55; }
.cf-connrow .cf-conn-meta { display: block; color: var(--muted); }
.cf-log .badge { font-size: 8.5px; padding: 0 5px; }
.cf-log .cf-log-txt { color: var(--muted); }
.cf-xai-row a { white-space: nowrap; }
/* VLM 실시간 분석(Qwen3-VL 5초 롤링) — 서술=평가(중립색), 오류는 정직 표기 */
#cf-vlm h4 { display: flex; align-items: center; gap: 6px; }
#cf-vlm h4 .mini-btn { margin-left: auto; }
.cf-vlm-row { padding: 3px 6px; border-left: 3px solid #6aa2e0; background: rgba(69,133,214,.06);
  border-radius: 0 4px 4px 0; }
.cf-vlm-err { color: var(--rep); border-left: 3px solid var(--rep); padding-left: 6px; }
.cf-vlm-latest { padding: 4px 6px; border: 1px solid var(--border); border-radius: 5px;
  background: rgba(69,133,214,.08); }
/* 전체 상황 요약 — 한 줄(받은 상황 사실 기반). 위험 객체 탐지 시 주의 색·테두리. */
.cf-sit-line { margin: 5px 0 3px; padding: 5px 8px; border: 1px solid var(--border);
  border-radius: 5px; background: var(--panel-2); line-height: 1.5;
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.cf-sit-line.danger { border-color: var(--warn); background: rgba(207,68,72,.12); }
.cf-sit-txt { color: var(--text); }
.cf-danger { display: inline-block; padding: 1px 8px; border-radius: 8px; font-weight: 700;
  font-size: 10.5px; color: var(--warn); border: 1px solid var(--warn);
  background: rgba(207,68,72,.14); cursor: help; }
/* RF-DETR 실시간 탐지 counts 칩 — 사실(ground truth) 표시, 경보색 아님(중립) */
.cf-det-chip { display: inline-block; padding: 1px 7px; margin: 1px 2px 1px 0;
  border: 1px solid var(--border-2); border-radius: 9px; background: var(--panel-2); font-size: 10px; }
/* 탐지 유지(홀드) — 직전 탐지 유지 중(현재 프레임엔 없음). 중립 앰버(경보색 아님·§8 정직 표기) */
.cf-held { color: #d6a04a; }
/* ── UX 경량화 — 문장 대신 KPI 칩·건수 배지·ⓘ 툴팁·접힘(정직 라벨은 툴팁으로 유지) ── */
.cf-kpis { display: flex; flex-wrap: wrap; gap: 5px; margin: 2px 0 5px; }
.cf-kpi { display: inline-flex; align-items: center; gap: 5px; padding: 3px 8px;
  border: 1px solid var(--border); border-radius: 6px; background: var(--panel-2); }
.cf-kpi i { font-style: normal; font-size: 9px; color: var(--muted); }
.cf-kpi b { font-size: 13px; }
.cf-kpi.warn { border-color: var(--warn); }
.cf-kpi.warn b { color: var(--warn); }
.cf-kpi.mid { border-color: var(--rep); }
.cf-kpi.mid b { color: var(--rep); }
.cf-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%;
  background: var(--border-2); margin-right: 5px; vertical-align: middle; }
.cf-dot.on { background: var(--live); box-shadow: 0 0 4px var(--live); }
.cf-dot-ok { background: var(--ok, #3fb950); }
.cf-dot-warn { background: var(--warn, #d29922); }
.cf-staff-chip { cursor: default; }
.cf-staff-chip .cf-info { font-size: 9px; padding: 0 3px; }
.cf-info { display: inline-block; color: var(--muted); cursor: help; font-size: 10px;
  border: 1px solid var(--border-2); border-radius: 50%; width: 13px; height: 13px;
  line-height: 12px; text-align: center; }
.cf-clamp { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; }
.cf-clamp1 { display: inline-block; max-width: 100%; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; }
.cf-sec h4 { cursor: pointer; user-select: none; }
.cf-sec.folded .cf-sec-body { display: none; }
.cf-sec.folded h4 { margin-bottom: 0; border-bottom: none; padding-bottom: 0; opacity: .85; }
.cf-h-sub { font-size: 9px; color: var(--muted); font-weight: 400; margin-left: 2px; }
.cf-cnt { margin-left: 5px; min-width: 14px; padding: 0 4px; border-radius: 8px;
  background: var(--panel-2); color: var(--text); font-size: 9px; text-align: center;
  display: inline-block; }
.cf-cnt:empty { display: none; }
.cf-side-foot { padding: 4px 2px 8px; font-size: 9.5px; text-align: center; }
details.cf-fold-d { margin: 3px 0; }
details.cf-fold-d > summary { cursor: pointer; font-size: 10px; color: var(--muted); }
.cf-basis-warn { display: inline-block; padding: 0 6px; border-radius: 8px; font-size: 9px;
  color: var(--rep); border: 1px solid var(--rep); cursor: help; }
/* 객체 식별(Gemma4 멀티모달) — 후보·가능성 배지(외형 평가·수치 없음, 경보색 아님) */
.cf-ident-bar { display: flex; align-items: center; gap: 6px; margin: 5px 0 3px; }
.cf-ident { margin: 4px 0; padding: 5px 7px; border: 1px solid var(--border);
  border-radius: 5px; background: rgba(69,133,214,.05); }
.cf-ident-head { margin-bottom: 3px; }
.cf-ident-row { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }
.cf-lk { display: inline-block; padding: 0 6px; border-radius: 8px; font-size: 9px; font-weight: 700; }
.cf-lk-high { color: #6fbf82; border: 1px solid #1f7a44; }
.cf-lk-medium { color: var(--rep); border: 1px solid var(--rep); }
.cf-lk-low { color: var(--muted); border: 1px solid var(--border-2); }
@media (max-width: 1100px) { .cf-side { flex-basis: 340px; width: 340px; } }

/* 추천 질의(상황 기반) — 커맨더 레인(.cb-suggest)·결심 뷰(.dec-suggest) 공용 칩.
   클릭=입력 채움만(자동 실행 없음) — 경보색 미사용(중립). */
.cb-suggest, .dec-suggest { display: flex; flex-wrap: wrap; gap: 4px; align-items: center;
  margin: 4px 0 6px; }
.sugg-label { flex-basis: 100%; font-size: 10px; }
.sugg-gen { color: var(--muted); font-size: 9px; margin-left: 3px; }
.sugg-chip { max-width: 100%; text-align: left; background: var(--panel-2); color: var(--text);
  border: 1px solid var(--border); border-radius: 10px; font-size: 10.5px; line-height: 1.4;
  padding: 2px 8px; cursor: pointer; white-space: normal; }
.sugg-chip:hover { border-color: var(--accent); background: rgba(69,133,214,.12); }
.sugg-refresh { flex: 0 0 auto; }

/* 교전 상황 카드(strike_release) — 식별·진행·근거 요약. 경보색은 진행 배지에만 최소 사용. */
.strike-status { margin: 8px 0; padding: 9px 11px; border: 1px solid var(--border);
  border-left: 3px solid #c07d20; border-radius: 6px; background: var(--panel); font-size: 12px; }
.strike-status .ss-head { font-weight: 700; margin-bottom: 5px; }
.strike-status .ss-row { display: flex; gap: 8px; margin: 3px 0; line-height: 1.55; }
.strike-status .ss-row > span:first-child { min-width: 34px; color: var(--muted, #93a0af); }
.strike-status .ss-live { color: #f85149; }
.strike-status .ss-warn { color: #c07d20; }

/* ─────────────────────────────────────────────────────────────────────────
   상단 메뉴 바 (COP 재구성) — 좌측 플로팅 HUD → 상단 바 + 드롭다운 패널.
   섹션 자체는 index.html 스크립트가 DOM 이동으로 담으므로 내부 스타일(.menu-section 등)은 그대로 적용된다.
   메인 COP(`/`) 에서만 body.has-topbar 가 붙는다 — /hanul 등은 기존 좌측 HUD 유지.
   ───────────────────────────────────────────────────────────────────────── */
:root { --tb-h: 52px; }

.topbar {
  position: fixed; top: 0; left: 0; right: 0; height: var(--tb-h); z-index: 30;
  display: flex; align-items: center; gap: var(--sp-4);
  padding: 0 var(--sp-4); box-sizing: border-box;
  background: var(--hud); border-bottom: 1px solid var(--border);
  box-shadow: var(--elev-1);
}
.topbar.hidden { display: none; }

.tb-brand { display: flex; align-items: center; gap: var(--sp-2); flex: 0 0 auto; }
.tb-brand .brand-title { font-size: var(--fs-md); }
.tb-sub { color: var(--muted); font-size: var(--fs-sm); margin-left: var(--sp-2); white-space: nowrap; }

.tb-nav { display: flex; align-items: center; gap: var(--sp-1); flex: 1 1 auto; min-width: 0; overflow-x: auto; }
.tb-nav::-webkit-scrollbar { height: 0; }
.tb-item {
  background: transparent; border: 1px solid transparent; color: var(--muted);
  padding: 6px 14px; border-radius: var(--radius); cursor: pointer;
  font-family: inherit; font-size: var(--fs-base); white-space: nowrap;
}
.tb-item:hover { color: var(--text); border-color: var(--border); }
.tb-item.active { color: var(--text); border-color: var(--accent); background: rgba(90,143,106,.14); }

.tb-right { display: flex; align-items: center; gap: var(--sp-3); flex: 0 0 auto; }
/* 좌측 HUD 에서 옮겨온 연결 상태 — 상단 바에서는 한 줄로 */
.tb-right .conn { margin: 0; white-space: nowrap; }
.tb-clock { color: var(--muted); font-family: var(--font-num); font-size: var(--fs-sm); letter-spacing: .5px; }

/* 드롭다운 패널 — 바 아래 좌측에 붙어 내려온다(참조 디자인). 내용이 길면 자체 스크롤. */
.tb-panels { position: fixed; top: var(--tb-h); left: 0; z-index: 29; pointer-events: none; }
.tb-panel {
  pointer-events: auto; width: 380px; max-width: calc(100vw - 28px);
  max-height: calc(100vh - var(--tb-h) - 14px);
  display: flex; flex-direction: column;
  background: var(--hud); border: 1px solid var(--border); border-top: 0;
  border-radius: 0 0 var(--radius-lg) var(--radius-lg); box-shadow: var(--elev-2);
}
.tb-panel.hidden { display: none; }
.tb-panel-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--sp-3); border-bottom: 1px solid var(--border); flex: 0 0 auto;
}
.tb-panel-title { font-size: var(--fs-md); font-weight: 700; letter-spacing: .3px; }
.tb-panel-close {
  background: transparent; border: 1px solid var(--border); color: var(--muted);
  width: 24px; height: 24px; border-radius: var(--radius); cursor: pointer; line-height: 1; padding: 0;
}
.tb-panel-close:hover { border-color: var(--accent); color: var(--text); }
.tb-panel-body { padding: var(--sp-3); overflow-y: auto; }
/* 패널 안에서는 섹션 구분선이 중복되지 않게 마지막 여백만 정리 */
.tb-panel-body .menu-section:last-child { margin-bottom: 0; }

/* 상단 바 사용 시: 비워진 좌측 HUD 숨김 + 우측 HUD·범례를 바 아래로 내림 */
body.has-topbar #hud-left { display: none; }
body.has-topbar .hud-right { top: calc(var(--tb-h) + 14px); max-height: calc(100vh - var(--tb-h) - 28px); }
body.has-topbar .settings-drawer { top: calc(var(--tb-h) + 14px); max-height: calc(100vh - var(--tb-h) - 28px); }

@media (max-width: 900px) {
  .tb-sub { display: none; }
  .tb-panel { width: calc(100vw - 28px); }
}

/* ─── MGRS 좌표 판독 패널(우측 하단, 접이식) ───────────────────────────────
   범례(한 칸 = N km)를 헤더에 두고 본문은 접을 수 있다. 격자가 꺼져 있으면 범례를 숨겨
   '한 칸'이 없는데 표기되는 오해를 막는다. */
.mgrs-panel {
  position: fixed; right: 14px; bottom: 14px; z-index: 12; width: 288px;
  background: var(--hud); border: 1px solid var(--border); border-radius: var(--radius-lg);
  box-shadow: var(--elev-2); font-size: var(--fs-sm); overflow: hidden;
}
.mgrs-panel.hidden { display: none; }
.mp-head {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-3); border-bottom: 1px solid var(--border);
}
/* 제목(범례 lg-head 와 동일 형식) — flex:1 로 남는 폭을 흡수해 한칸 표기·화살표를 우측 정렬 */
.mp-title { font-weight: 700; white-space: nowrap; flex: 1; }
.mp-legend { display: inline-flex; align-items: center; gap: 6px; color: #f0d78a; white-space: nowrap; }
.mp-legend i { width: 12px; height: 12px; border: 2px solid #e3c565; border-radius: 2px; display: inline-block; }
.mp-legend b { font-family: var(--font-num); }
.mp-toggle {
  background: transparent; border: 1px solid var(--border); color: var(--muted);
  width: 22px; height: 22px; border-radius: var(--radius); cursor: pointer; line-height: 1; padding: 0;
}
.mp-toggle:hover { border-color: var(--accent); color: var(--text); }
.mgrs-panel.collapsed .mp-body { display: none; }
.mp-body { padding: var(--sp-2) var(--sp-3) var(--sp-3); }
.mp-row { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); padding: 3px 0; }
.mp-row > span { color: var(--muted); white-space: nowrap; }
.mp-num { font-family: var(--font-num); letter-spacing: .3px; text-align: right; }
.mp-badge {
  font-family: var(--font-num); color: #f0d78a; border: 1px solid #8a7433;
  border-radius: var(--radius); padding: 1px 8px; background: rgba(227,197,101,.08); white-space: nowrap;
}
.mp-btn { cursor: pointer; }
.mp-btn:hover { border-color: #e3c565; }
.mp-sep { height: 1px; background: var(--border); margin: var(--sp-2) 0; }
.mp-check { display: flex; align-items: center; gap: 6px; color: var(--muted); padding: var(--sp-2) 0 0; cursor: pointer; }
.mp-note { color: var(--muted); font-size: var(--fs-xs); padding-top: var(--sp-2); opacity: .8; }
@media (max-width: 900px) { .mgrs-panel { width: calc(100vw - 28px); right: 14px; } }

/* 우측 하단 스택 — 범례(왼쪽) + MGRS 좌표 판독(오른쪽)을 가로로 나란히(서로 안 가림).
   하단 기준 정렬이라 한쪽이 펼쳐져도 반대쪽을 덮지 않는다. 좁은 화면은 줄바꿈. */
.br-stack {
  position: fixed; right: 14px; bottom: 14px; z-index: 30;
  display: flex; flex-direction: row; align-items: flex-end; justify-content: flex-end;
  flex-wrap: wrap; gap: var(--sp-2);
  max-width: calc(100vw - 28px); pointer-events: none;
}
.br-stack > * { pointer-events: auto; }
/* 스택 안에서는 각 패널이 고정 위치를 버리고 흐름에 따른다 */
.br-stack #layer-legend, .br-stack #mgrs-panel {
  position: static; right: auto; bottom: auto;
}
.br-stack #mgrs-panel { width: 288px; flex: none; }
/* 헤더 드래그로 패널 이동(mgrs_panel.js wireDrag) — 더블클릭 시 원위치 */
.mp-head, #layer-legend .lg-head { cursor: grab; user-select: none; }
/* 범례를 판독 패널과 같은 외형으로 통일(.mp-float = 드래그로 스택에서 떼어낸 상태도 동일 외형).
   폭도 MGRS 패널과 동일(288px)로 고정 — 접혔을 때 둘이 같은 가로 크기로 나란히 보인다. */
.br-stack #layer-legend, #layer-legend.mp-float {
  background: var(--hud); border: 1px solid var(--border); border-radius: var(--radius-lg);
  box-shadow: var(--elev-2); padding: 0; font-size: var(--fs-sm);
  width: 288px; max-width: 288px; flex: none; max-height: 42vh; overflow-y: auto;
}
.br-stack #layer-legend .lg-head, #layer-legend.mp-float .lg-head {
  padding: var(--sp-2) var(--sp-3); border-bottom: 1px solid var(--border);
  margin: 0; position: sticky; top: 0; background: var(--hud);
}
.br-stack #layer-legend .lg-row, #layer-legend.mp-float .lg-row,
.br-stack #layer-legend .lg-chips, #layer-legend.mp-float .lg-chips {
  padding-left: var(--sp-3); padding-right: var(--sp-3);
}
.br-stack #layer-legend .lg-row:last-child,
#layer-legend.mp-float .lg-row:last-child { padding-bottom: var(--sp-2); }
.br-stack #layer-legend.collapsed, #layer-legend.mp-float.collapsed { max-height: none; overflow: visible; }
.br-stack #layer-legend.collapsed .lg-chips, #layer-legend.mp-float.collapsed .lg-chips { display: none; }

/* ---------- 작도(그리기·거리 측정) — 상단바 '작도' 패널 ---------- */
.draw-modes { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 8px; }
.draw-modes .mini-btn { flex: 0 0 auto; }
.draw-modes .mini-btn.active {
  background: #3a3116; border-color: #f0b429; color: #f5d78e;
}
.draw-readout {
  margin: 6px 0 10px; padding: 6px 8px; border: 1px solid #262b33; border-radius: 6px;
  background: #14171b; font-size: 12px; max-height: 180px; overflow: auto;
}
.draw-readout .dr-row {
  display: flex; align-items: baseline; gap: 8px; justify-content: space-between;
  padding: 2px 0; border-bottom: 1px solid #1c2129;
}
.draw-readout .dr-row:last-child { border-bottom: 0; }
.draw-readout .dr-total { color: #f5d78e; font-weight: 600; }
.draw-readout .dr-row.err { color: #f0857d; }
.draw-list { max-height: 200px; overflow: auto; }
.draw-list .dl-row {
  display: flex; align-items: center; gap: 6px; padding: 3px 0;
  border-bottom: 1px solid #1c2129;
}
.draw-list .dl-g {
  flex: 0 0 auto; font-size: 10px; color: #8b94a0; border: 1px solid #2b313a;
  border-radius: 4px; padding: 0 4px;
}
.draw-list .dl-n { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* 누가 그렸는지 — 이름 아래 작은 줄. 내 작도는 왼쪽에 표시선. */
.draw-list .dl-by { display: block; font-size: 10px; color: #8b94a0; }
.draw-list .dl-row.dl-mine { border-left: 2px solid #1f6feb; padding-left: 4px; }
.draw-list .dl-x { flex: 0 0 auto; }

/* ── 작전 개설 모달 ────────────────────────────────────────────────────────
   구역을 다 그린 뒤 이름을 묻는다. 지도를 가리지 않게 작게, 중앙 상단에 띄운다. */
.modal-back { position: fixed; inset: 0; z-index: 40; background: rgba(2, 5, 10, .45);
              display: flex; align-items: flex-start; justify-content: center; padding-top: 12vh; }
.modal-card { width: min(420px, 92vw); background: #12151a; border: 1px solid #2b313a;
              border-radius: 10px; box-shadow: 0 18px 48px rgba(0, 0, 0, .55); }
.modal-head { display: flex; align-items: center; justify-content: space-between;
              padding: 11px 14px; border-bottom: 1px solid #222831; font-weight: 600; }
.modal-body { padding: 12px 14px; }
.modal-body .layer-search { width: 100%; box-sizing: border-box; }
.modal-foot { display: flex; gap: 8px; justify-content: flex-end;
              padding: 11px 14px; border-top: 1px solid #222831; }
.mini-btn.primary { background: #1f6feb; border-color: #1f6feb; color: #fff; }
.mini-btn.primary:hover { background: #2f81f7; }

/* 합친 팝업의 구분선 — 한 지점의 여러 레이어 정보를 한 창에 쌓는다. */
.nav-popup .pop-sep { border-top: 1px solid #2b313a; margin: 8px 0 7px; }
/* 작전 비고 — 길면 … 로 줄이고 전체 내용은 title 로 (팝업이 길어지지 않게). */
.nav-popup .pop-note { color: #8b94a0; }
/* 작전방 — 상단바에서 지금 어느 방인지 눈에 띄게. */
.topbar .tb-sub.tb-room { color: #79b8ff; font-weight: 600; }
/* 작전방 참여자 칩 — 상단바 우측. */
.topbar .tb-people { background: #1b2635; border: 1px solid #2b4663; color: #c9d1d9;
  border-radius: 999px; padding: 3px 10px; font-size: 12px; cursor: pointer; margin-right: 8px;
  max-width: 320px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.topbar .tb-people:hover { background: #22303f; }

/* ── 조직도(초대 모달) ───────────────────────────────────────────────────── */
/* 모달 자체가 세로로 줄어들고, **스크롤은 트리 한 곳**에서만 생긴다.
   (본문과 트리가 둘 다 스크롤되면 어느 쪽이 움직일지 예측이 안 된다 — 실측 지적) */
.modal-card.modal-wide { width: min(560px, 94vw); display: flex; flex-direction: column;
                         max-height: calc(100vh - 16vh - 24px); }
.modal-card.modal-wide .modal-body { display: flex; flex-direction: column; min-height: 0;
                                     flex: 1 1 auto; overflow: hidden; }
.oc-box { flex: 1 1 auto; min-height: 140px; overflow-y: auto; overscroll-behavior: contain;
          border: 1px solid #222831; border-radius: 8px;
          padding: 8px; margin: 8px 0; background: #0d1117;
          scrollbar-width: thin; scrollbar-color: #39414d transparent; }
.oc-box::-webkit-scrollbar { width: 9px; }
.oc-box::-webkit-scrollbar-track { background: transparent; }
.oc-box::-webkit-scrollbar-thumb { background: #39414d; border-radius: 999px;
                                   border: 2px solid #0d1117; }
.oc-box::-webkit-scrollbar-thumb:hover { background: #4b5563; }
.oc-tree, .oc-tree ul { list-style: none; margin: 0; padding: 0; }
.oc-tree ul { padding-left: 16px; border-left: 1px solid #222831; }
.oc-tree li { padding: 2px 0; }
.oc-node { display: flex; align-items: baseline; gap: 6px; }
.oc-tw { width: 13px; flex: 0 0 13px; color: #6b7480; cursor: pointer; user-select: none; }
.oc-tw.leaf { cursor: default; color: #2b313a; }
.oc-name { font-weight: 600; font-size: 13px; }
.oc-desc { color: #8b94a0; font-size: 11px; }
.oc-cnt { color: #6b7480; font-size: 11px; margin-left: auto; }
.oc-tree li.closed > ul { display: none; }
.oc-user { font-size: 12px; padding-left: 19px; }
.oc-user label { display: flex; align-items: center; gap: 6px; cursor: pointer; }
/* 콘솔 전역 input 규칙이 flex:1 을 줘서 체크박스가 늘어나고 이름이 오른쪽으로 밀렸다(실측). */
.oc-user input[type="checkbox"] { flex: 0 0 auto; width: auto; margin: 0; }
.oc-user code { color: #8b94a0; font-size: 11px; }
.oc-user.oc-in { opacity: .55; }
.oc-tag { font-size: 10px; border: 1px solid #2b4663; color: #79b8ff; border-radius: 999px; padding: 0 5px; }
/* 참여자 드롭다운 — 칩을 누르면 펼친다(인원이 늘어도 상단바가 밀리지 않게). */
.tb-people-wrap { position: relative; display: inline-flex; align-items: center; margin-right: 8px; }
.tb-people-list { position: absolute; top: 100%; right: 0; margin-top: 6px; z-index: 30;
  min-width: 220px; max-height: 50vh; overflow: auto; background: #12151a;
  border: 1px solid #2b313a; border-radius: 8px; padding: 6px; box-shadow: 0 10px 30px rgba(0,0,0,.5); }
.tb-people-list .pl-row { display: flex; align-items: baseline; gap: 6px; padding: 4px 6px; font-size: 12px; }
.tb-people-list .pl-role { color: #6b7480; font-size: 11px; margin-left: auto; }
.tb-invite { background: #1f6feb; border: 1px solid #1f6feb; color: #fff; border-radius: 999px;
  padding: 3px 11px; font-size: 12px; cursor: pointer; margin-right: 8px; }
.tb-invite:hover { background: #2f81f7; }

/* ── 작전목록 — 부대 계층 트리 ──────────────────────────────────────────── */
.ops-tree, .ops-tree ul { list-style: none; margin: 0; padding: 0; }
.ops-tree ul { padding-left: 14px; border-left: 1px solid #222831; }
.ops-tree li { padding: 1px 0; }
.ops-unit { display: flex; align-items: baseline; gap: 6px; padding: 3px 0; }
.ops-tw { width: 12px; flex: 0 0 12px; color: #6b7480; cursor: pointer; user-select: none; }
.ops-unit-name { font-weight: 600; font-size: 12px; color: #c9d1d9; }
.ops-unit-desc { font-size: 11px; color: #8b94a0; }
.ops-unit-cnt { margin-left: auto; font-size: 11px; color: #6b7480; }
.ops-tree li.closed > ul { display: none; }

/* ── 협업 탭: 현재 작전방 카드 ─────────────────────────────────────────── */
.room-card { border: 1px solid #222831; border-radius: 8px; padding: 9px 10px; background: #0d1117; }
.room-card.in { border-color: #2b4663; }
.room-card .rc-name { font-weight: 700; color: #79b8ff; font-size: 13px; }
.room-card .rc-row { font-size: 12px; color: #8b94a0; margin-top: 3px;
                     display: flex; gap: 6px; flex-wrap: wrap; align-items: baseline; }
.room-card .rc-actions { display: flex; gap: 6px; margin-top: 8px; flex-wrap: wrap; }
.room-card .rc-none { color: #8b94a0; font-size: 12px; }