/* ============================================================
   MacroScope — 경제 인과관계 3D 지도
   Deep-space operations deck. Dark, holographic, readable-first.
   ============================================================ */

:root {
  /* surfaces */
  --bg0: #030610;
  --bg1: #071021;
  --panel: rgba(8, 15, 31, 0.86);
  --panel-solid: #0a1226;
  --chip: rgba(90, 150, 230, 0.10);
  --line: rgba(120, 180, 255, 0.16);
  --line-strong: rgba(130, 200, 255, 0.38);

  /* ink (contrast-checked on --bg1) */
  --ink: #eaf3ff;        /* body: ~15:1 */
  --ink-2: #aabfdd;      /* secondary: ~9:1 */
  --ink-3: #7288a8;      /* decorative only */

  /* signal colors */
  --cy: #54e0ff;         /* primary accent */
  --cy-deep: #1a8fb5;
  --pos: #3bd6f0;        /* edge: same-direction (+) */
  --neg: #ff9257;        /* edge: opposite-direction (−) */
  --up: #ffb36b;         /* node tint: rising */
  --down: #6fb5ff;       /* node tint: falling */
  --ok: #57e39a;
  --warn: #ffd166;

  --sans: "SUIT Variable", SUIT, "Malgun Gothic", "Apple SD Gothic Neo", sans-serif;
  --mono: "Cascadia Mono", Consolas, "Courier New", monospace;

  --radius: 10px;
  --hud-h: 58px;
  --mobile-panel-reserve: 55dvh;

  /* Korean line-break baseline (rules/cjk-rendering-safety §5) */
  word-break: keep-all;
  overflow-wrap: break-word;

  color-scheme: dark;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  word-break: keep-all;
  overflow-wrap: break-word;
}

body {
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink);
  background:
    radial-gradient(1200px 700px at 70% 20%, #0a1a33 0%, transparent 55%),
    radial-gradient(900px 600px at 20% 85%, #081226 0%, transparent 60%),
    var(--bg0);
  overflow: hidden;
  touch-action: manipulation;
}

:focus-visible {
  outline: 2px solid var(--cy);
  outline-offset: 2px;
  border-radius: 4px;
}

button { font-family: inherit; }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: fixed;
  top: -48px;
  left: 12px;
  z-index: 200;
  padding: 8px 14px;
  background: var(--panel-solid);
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  color: var(--ink);
  transition: top 0.15s ease;
}
.skip-link:focus { top: 10px; }

/* ---------- 3D stage ---------- */
#stage {
  position: fixed;
  inset: 0;
  z-index: 0;
}
#stage canvas { display: block; }

#labels {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
}

/* node label chip (CSS2D) */
.node-label {
  pointer-events: auto;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px;
  border-radius: 999px;
  /* --cat is set per chip by node-visual-system; category-tinted rim for grouping.
     State selectors (.hl/.selected/:hover) still win on specificity.
     Plain border first: color-mix+var() is invalid-at-computed-value-time in
     old browsers, and a failed sole declaration would drop the border entirely. */
  border: 1px solid var(--line);
  border-color: color-mix(in srgb, var(--cat, var(--line)) 42%, var(--line));
  background: rgba(6, 12, 26, 0.72);
  color: var(--ink);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.01em;
  white-space: nowrap;
  transform: translate(-50%, calc(-100% - 12px));
  /* no opacity transition: the scene writes distance-fade opacity ~20x/sec */
  transition: border-color 0.2s ease, background 0.2s ease;
  -webkit-user-select: none;
  user-select: none;
}
.node-label .dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--cy);
  flex: none;
}
.node-label .lever-mark {
  font-size: 9px;
  color: var(--cy);
  opacity: 0.85;
  font-family: var(--mono);
}
.node-label .tint {
  font-size: 10.5px;
  font-family: var(--mono);
  font-weight: 700;
  display: none;
}
.node-label.tint-up .tint { display: inline; color: var(--up); }
.node-label.tint-down .tint { display: inline; color: var(--down); }
.node-label.dimmed { opacity: 0.14; }
.node-label.hl {
  border-color: var(--line-strong);
  background: rgba(12, 28, 54, 0.95);
  box-shadow: 0 0 18px rgba(84, 224, 255, 0.22);
}
.node-label.selected {
  border-width: 2px;
  border-color: var(--cy);
  box-shadow: 0 0 22px rgba(84, 224, 255, 0.4);
}

/* layer altitude tags (semantic vertical axis) */
.layer-tag {
  position: absolute;
  transform: translate(-50%, -50%);
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  white-space: nowrap;
  color: rgba(165, 195, 228, 0.8);
  padding-left: 26px;
  -webkit-user-select: none;
  user-select: none;
  transition: opacity 0.3s ease; /* smooth yield when a node label overlaps */
}
.layer-tag::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 20px;
  height: 0;
  border-top: 1px dashed rgba(120, 165, 210, 0.4);
}

/* ---------- HUD top bar ---------- */
.hud-top {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  gap: 14px;
  height: var(--hud-h);
  padding: 0 14px;
  padding-top: env(safe-area-inset-top, 0);
  background: linear-gradient(to bottom, rgba(4, 8, 18, 0.92), rgba(4, 8, 18, 0.55) 75%, transparent);
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  text-decoration: none;
  color: var(--ink);
}
.brand svg { flex: none; }
.brand .t {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
  min-width: 0;
}
.brand .t b {
  font-size: 15px;
  letter-spacing: 0.04em;
  white-space: nowrap;
}
.brand .t small {
  font-size: 10.5px;
  color: var(--ink-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.brand .ver {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--ink-2);
  border: 1px solid var(--line);
  border-radius: 99px;
  padding: 1px 7px;
  margin-left: 2px;
}

.mode-tabs {
  display: flex;
  gap: 4px;
  margin-inline: auto;
  padding: 3px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(8, 15, 31, 0.7);
}
.mode-tab {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--ink-2);
  font-size: 13px;
  font-weight: 600;
  padding: 7px 14px;
  border-radius: 999px;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s ease, color 0.15s ease;
}
.mode-tab[aria-current="true"] {
  background: rgba(84, 224, 255, 0.16);
  color: #bdf0ff;
  box-shadow: inset 0 0 0 1px rgba(84, 224, 255, 0.35);
}

.hud-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}
/* i18n-kit active-state override: bring the toggle into the service cyan family
   (kit default #2563eb is off-palette). Same pairing as .mode-tab active. */
.lang-toggle {
  --lt-active-bg: rgba(84, 224, 255, 0.16);
  --lt-active-fg: #bdf0ff;
  --lt-focus: var(--cy);
}
.lang-btn.is-active,
.lang-btn[aria-pressed="true"] {
  box-shadow: inset 0 0 0 1px rgba(84, 224, 255, 0.35);
}
.icon-btn {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 34px;
  height: 34px;
  padding: 0 10px;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: rgba(8, 15, 31, 0.7);
  color: var(--ink-2);
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: border-color 0.15s ease, color 0.15s ease;
}
.icon-btn[aria-pressed="true"] {
  color: #bdf0ff;
  border-color: rgba(84, 224, 255, 0.45);
  background: rgba(84, 224, 255, 0.12);
}

/* ---------- Right panel / mobile bottom sheet ---------- */
#panel {
  position: fixed;
  z-index: 30;
  top: calc(var(--hud-h) + 8px);
  right: 12px;
  bottom: 12px;
  width: min(400px, calc(100vw - 24px));
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  overflow: hidden;
}
/* HUD corner ticks */
#panel::before, #panel::after {
  content: "";
  position: absolute;
  width: 14px; height: 14px;
  border: 1px solid var(--line-strong);
  pointer-events: none;
}
#panel::before { top: -1px; left: -1px; border-right: 0; border-bottom: 0; border-top-left-radius: var(--radius); }
#panel::after { bottom: -1px; right: -1px; border-left: 0; border-top: 0; border-bottom-right-radius: var(--radius); }

.panel-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--line);
  flex: none;
}
.panel-head .ph-title {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--ink-2);
  text-transform: uppercase;
  font-family: var(--mono);
}
.panel-head .spacer { flex: 1; }
#panel-toggle { display: none; }

.panel-body {
  flex: 1;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 14px;
  scrollbar-width: thin;
  scrollbar-color: rgba(120, 180, 255, 0.3) transparent;
}

/* ---------- shared panel components ---------- */
.card {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(12, 22, 44, 0.5);
  padding: 12px 14px;
  margin-bottom: 10px;
}
.card h3 { margin: 0 0 6px; font-size: 15px; }
.card p { margin: 0; color: var(--ink-2); font-size: 13.5px; }

.h-node {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 4px;
}
.h-node .nm { font-size: 19px; font-weight: 800; }
.h-node .cat-chip {
  font-size: 11px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 99px;
  border: 1px solid currentColor;
}
.hub-summary {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-left: auto;
  min-width: 0;
}
.hub-score {
  color: var(--ink);
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}
.hub-band {
  color: var(--ink-2);
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  padding: 1px 7px;
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}
.model-fallback-note {
  margin: 0 0 10px;
  padding: 7px 9px;
  border: 1px solid rgba(255, 209, 102, 0.38);
  border-radius: 7px;
  color: var(--warn);
  background: rgba(255, 209, 102, 0.08);
  font-size: 12.5px;
  line-height: 1.45;
}
.desc { color: var(--ink-2); font-size: 13.5px; margin: 4px 0 10px; }

/* lever drag hint: a quiet, right-aligned caption, not a headline */
.lever-hint {
  margin: 0 0 8px;
  font-size: 11px;
  line-height: 1.45;
  color: var(--ink-3);
  text-align: right;
  opacity: .9;
}

/* panel turntable inspector: the selected instrument, large and auto-rotating.
   HUD instrument-readout styling — category-tinted glow, corner brackets, a
   vignette that focuses the eye, and a soft screen sheen. */
.model-viewer {
  --mv-accent: var(--cy);
  position: relative;
  width: min(100%, 216px);
  aspect-ratio: 1 / 1;
  margin: 12px auto 8px;
  border-radius: 14px;
  border: 1px solid color-mix(in srgb, var(--mv-accent) 26%, var(--line));
  background:
    radial-gradient(125% 78% at 50% 14%, color-mix(in srgb, var(--mv-accent) 22%, transparent), transparent 60%),
    radial-gradient(140% 120% at 50% 118%, rgba(3,8,20,.72), transparent 52%),
    linear-gradient(180deg, rgba(120,180,255,.05), transparent 22%),
    var(--panel-solid);
  box-shadow:
    inset 0 0 34px rgba(3,8,18,.66),
    inset 0 1px 0 rgba(160,200,255,.08),
    0 6px 20px rgba(2,6,16,.45);
  overflow: hidden;
  touch-action: none; /* OrbitControls owns drag + pinch */
}
/* HUD corner brackets */
.model-viewer::before {
  content: "";
  position: absolute; inset: 9px;
  pointer-events: none;
  z-index: 2;
  opacity: .6;
  --bk: color-mix(in srgb, var(--mv-accent) 55%, #d4ecff);
  background:
    linear-gradient(var(--bk),var(--bk)) left 0 top 0/13px 1.5px no-repeat,
    linear-gradient(var(--bk),var(--bk)) left 0 top 0/1.5px 13px no-repeat,
    linear-gradient(var(--bk),var(--bk)) right 0 top 0/13px 1.5px no-repeat,
    linear-gradient(var(--bk),var(--bk)) right 0 top 0/1.5px 13px no-repeat,
    linear-gradient(var(--bk),var(--bk)) left 0 bottom 0/13px 1.5px no-repeat,
    linear-gradient(var(--bk),var(--bk)) left 0 bottom 0/1.5px 13px no-repeat,
    linear-gradient(var(--bk),var(--bk)) right 0 bottom 0/13px 1.5px no-repeat,
    linear-gradient(var(--bk),var(--bk)) right 0 bottom 0/1.5px 13px no-repeat;
}
.model-viewer::after {
  content: "⟲ 360°";
  position: absolute; right: 10px; bottom: 7px; z-index: 2;
  font-family: var(--mono); font-size: 10px; letter-spacing: .08em;
  color: color-mix(in srgb, var(--mv-accent) 45%, var(--ink-3));
  opacity: .72; pointer-events: none;
}
.model-viewer-canvas { display: block; width: 100%; height: 100%; cursor: grab; position: relative; z-index: 0; }
.model-viewer-canvas:active { cursor: grabbing; }
.model-viewer.mv-failed { display: none; }
@media (max-width: 900px) { .model-viewer { width: min(100%, 196px); } }

.seg {
  display: inline-flex;
  padding: 3px;
  gap: 3px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(6, 12, 26, 0.6);
  margin: 4px 0 10px;
}
.seg button {
  appearance: none;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--ink-2);
  font-size: 12.5px;
  font-weight: 600;
  padding: 6px 12px;
  cursor: pointer;
}
.seg button[aria-pressed="true"] {
  background: rgba(84, 224, 255, 0.15);
  color: #bdf0ff;
}

.order-h {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 14px 0 6px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--ink-2);
  font-family: var(--mono);
}
.order-h::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.order-h .n { color: var(--cy); }

.fx-row {
  position: relative;
  width: 100%;
  text-align: left;
  appearance: none;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(10, 18, 38, 0.55);
  color: var(--ink);
  padding: 9px 26px 9px 11px;
  margin-bottom: 7px;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.fx-row.open { border-color: var(--line-strong); }
.fx-toggle {
  position: absolute;
  top: 10px;
  right: 10px;
  background: none;
  border: none;
  color: var(--ink-2);
  font-size: 11px;
  cursor: pointer;
  padding: 4px 6px;
  transition: transform 0.2s;
}
.fx-row.open .fx-toggle { transform: rotate(180deg); color: var(--cy); }
.fx-row .chain {
  font-size: 13.5px;
  font-weight: 650;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 3px 6px;
}
.fx-row .chain .arr { color: var(--ink-3); font-family: var(--mono); }
.fx-row .chain .d-up { color: var(--up); font-family: var(--mono); font-weight: 700; }
.fx-row .chain .d-dn { color: var(--down); font-family: var(--mono); font-weight: 700; }
.fx-row .mech { font-size: 12.5px; color: var(--ink-2); margin-top: 5px; }
.fx-row .meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 7px;
}
.badge {
  font-size: 10.5px;
  font-family: var(--mono);
  color: var(--ink-2);
  border: 1px solid var(--line);
  border-radius: 5px;
  padding: 1.5px 6px;
  white-space: nowrap;
}
.badge.sign-pos { color: var(--pos); border-color: rgba(59, 214, 240, 0.4); }
.badge.sign-neg { color: var(--neg); border-color: rgba(255, 146, 87, 0.4); }
.badge.conflict { color: var(--warn); border-color: rgba(255, 209, 102, 0.45); }
.badge.conf-1 { border-style: dashed; }

/* impact bars (simulator) */
.imp-row {
  width: 100%;
  appearance: none;
  text-align: left;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(10, 18, 38, 0.55);
  color: var(--ink);
  padding: 8px 11px;
  margin-bottom: 6px;
  cursor: pointer;
}
.imp-top {
  display: flex;
  align-items: center;
  gap: 8px;
}
.imp-top .nm { font-weight: 700; font-size: 13.5px; flex: 1; min-width: 0; }
.imp-top .val { font-family: var(--mono); font-size: 12px; font-weight: 700; }
.imp-top .val.up { color: var(--up); }
.imp-top .val.down { color: var(--down); }
.imp-bar {
  position: relative;
  height: 5px;
  margin-top: 6px;
  border-radius: 3px;
  background: rgba(120, 180, 255, 0.12);
  overflow: hidden;
}
.imp-bar i {
  position: absolute;
  top: 0; bottom: 0;
  left: 50%;
  border-radius: 3px;
}
.imp-bar i.up { background: var(--up); }
.imp-bar i.down { background: var(--down); right: 50%; left: auto; }
.imp-sub { font-size: 11.5px; color: var(--ink-2); margin-top: 5px; display: flex; gap: 6px; flex-wrap: wrap; }

/* sliders */
.lever {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(10, 18, 38, 0.55);
  padding: 10px 12px;
  margin-bottom: 8px;
}
.lever .lv-h {
  display: flex;
  align-items: center;
  gap: 8px;
}
.lever .lv-h label { font-size: 13px; font-weight: 700; flex: 1; }
.lever .lv-h output {
  font-family: var(--mono);
  font-size: 12.5px;
  font-weight: 700;
  color: var(--cy);
  min-width: 52px;
  text-align: right;
}
.lever input[type="range"] {
  width: 100%;
  margin: 8px 0 2px;
  accent-color: var(--cy);
  height: 22px;
}
.presets {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 4px 0 12px;
}
.preset-btn {
  appearance: none;
  border: 1px solid var(--line);
  background: var(--chip);
  color: var(--ink);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  padding: 6px 12px;
  cursor: pointer;
}
.quick-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 0 12px;
}

/* case cards */
.case-card {
  width: 100%;
  appearance: none;
  text-align: left;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(10, 18, 38, 0.55);
  color: var(--ink);
  padding: 12px 14px;
  margin-bottom: 8px;
  cursor: pointer;
  transition: border-color 0.15s ease;
}
.case-card .cs-period {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--cy);
  letter-spacing: 0.06em;
}
.case-card .cs-title { font-size: 15px; font-weight: 750; margin: 3px 0; }
.case-card .cs-sub { font-size: 12.5px; color: var(--ink-2); }

.phase-stepper {
  display: flex;
  gap: 4px;
  margin: 10px 0;
}
.phase-stepper .ps {
  flex: 1;
  appearance: none;
  border: 0;
  border-radius: 4px;
  height: 26px;
  font-size: 10.5px;
  font-weight: 700;
  color: var(--ink-2);
  background: rgba(120, 180, 255, 0.10);
  cursor: pointer;
  padding: 0 2px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.phase-stepper .ps[aria-current="step"] {
  background: rgba(84, 224, 255, 0.22);
  color: #cdf3ff;
  box-shadow: inset 0 0 0 1px rgba(84, 224, 255, 0.4);
}
.phase-stepper .ps.done { background: rgba(84, 224, 255, 0.10); }

.case-nav {
  display: flex;
  gap: 8px;
  margin-top: 10px;
}
.btn {
  appearance: none;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--chip);
  color: var(--ink);
  font-size: 13px;
  font-weight: 650;
  padding: 8px 14px;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.btn.primary {
  background: rgba(84, 224, 255, 0.16);
  border-color: rgba(84, 224, 255, 0.45);
  color: #cdf3ff;
}
.btn:disabled { opacity: 0.4; cursor: default; }
.btn.sm { padding: 5px 10px; font-size: 12px; }

details.acc {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(10, 18, 38, 0.55);
  margin-bottom: 8px;
}
details.acc summary {
  cursor: pointer;
  padding: 10px 12px;
  font-size: 13px;
  font-weight: 700;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 8px;
}
details.acc summary::-webkit-details-marker { display: none; }
details.acc summary::before {
  content: "▸";
  color: var(--cy);
  font-size: 11px;
  transition: transform 0.15s ease;
}
details.acc[open] summary::before { transform: rotate(90deg); }
details.acc .acc-body {
  padding: 0 12px 12px;
  font-size: 13px;
  color: var(--ink-2);
}
details.acc .acc-body ul { margin: 4px 0; padding-left: 18px; }

/* loop cards */
.loop-type {
  font-size: 10.5px;
  font-weight: 800;
  font-family: var(--mono);
  padding: 2px 8px;
  border-radius: 99px;
  letter-spacing: 0.05em;
}
.loop-type.reinforcing { color: var(--neg); border: 1px solid rgba(255, 146, 87, 0.45); }
.loop-type.balancing { color: var(--ok); border: 1px solid rgba(87, 227, 154, 0.45); }
.loop-cycle {
  font-size: 12px;
  color: var(--ink-2);
  font-family: var(--mono);
  margin-top: 5px;
  line-height: 1.7;
}

/* ---------- legend ---------- */
#legend {
  position: fixed;
  z-index: 25;
  left: 12px;
  bottom: 12px;
  width: 250px;
  max-width: calc(100vw - 24px);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  font-size: 12px;
}
#legend summary {
  cursor: pointer;
  list-style: none;
  padding: 9px 12px;
  font-size: 12px;
  font-weight: 700;
  font-family: var(--mono);
  letter-spacing: 0.08em;
  color: var(--ink-2);
  display: flex;
  align-items: center;
  gap: 8px;
}
#legend summary::-webkit-details-marker { display: none; }
#legend summary::before { content: "◈"; color: var(--cy); }
#legend .lg-body { padding: 2px 12px 12px; max-height: 40vh; overflow-y: auto; }
.lg-h {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-2);
  margin: 8px 0 3px;
}
#legend .lg-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 6px 0;
  color: var(--ink-2);
}
#legend .lg-line {
  width: 26px; height: 0;
  border-top: 2px solid var(--pos);
  flex: none;
}
#legend .lg-line.neg { border-color: var(--neg); }
#legend .lg-line.dashed { border-top-style: dashed; border-color: var(--ink-2); }
#legend .lg-dot { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.hub-legend-samples {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin: 5px 0 4px;
}
.hub-legend-sample {
  display: flex;
  min-width: 0;
  min-height: 42px;
  align-items: center;
  justify-content: center;
  gap: 5px;
  color: var(--ink);
  font-family: var(--mono);
  font-size: 11px;
}
.hub-legend-dot {
  display: inline-block;
  width: calc(22px * var(--hub-scale));
  aspect-ratio: 1;
  flex: none;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #b7c3d1, #202a35 70%);
  box-shadow: inset 0 0 0 2px rgba(84, 224, 255, 0.12);
}
.hub-legend-help {
  margin: 0 0 7px;
  color: var(--ink-2);
  font-size: 11.5px;
  line-height: 1.45;
}
#legend .lg-cats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3px 10px;
  /* sits under its own .lg-h heading now; no divider needed */
  margin-top: 2px;
  padding-bottom: 2px;
}
#legend .lg-cats .lg-row { margin: 2px 0; font-size: 11.5px; }

/* ---------- status line (bottom-right) ---------- */
#statusline {
  position: fixed;
  z-index: 20;
  right: 12px;
  bottom: 12px;
  display: flex;
  gap: 10px;
  align-items: center;
  font-family: var(--mono);
  font-size: 10.5px;
  color: var(--ink-2);
}
#statusline button {
  appearance: none;
  background: none;
  border: 0;
  color: var(--ink-2);
  font: inherit;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
  padding: 4px 2px;
}

/* ---------- dialogs ---------- */
dialog {
  --dlg-maxh: min(80dvh, 720px); /* 다이얼로그 최대 높이(내부 스크롤러가 이 값에서 테두리만 뺀 값을 상한으로 씀) */
  --dlg-border: 1px;
  border: var(--dlg-border) solid var(--line-strong);
  border-radius: 14px;
  background: var(--panel-solid);
  color: var(--ink);
  padding: 0;
  width: min(560px, calc(100vw - 32px));
  max-height: var(--dlg-maxh);
  overflow: hidden; /* 다이얼로그 자체는 스크롤하지 않는다(2번째 스크롤바 방지). 스크롤러는 내부 하나만. */
}
dialog::backdrop { background: rgba(2, 5, 12, 0.72); backdrop-filter: blur(3px); }
/* 내부 스크롤러의 상한을 다이얼로그 안쪽 높이(위아래 테두리 제외)에 정확히 맞춘다.
   확정값이라 자동 높이 부모에 의존하지 않는다(flex/퍼센트-높이 붕괴 회피). */
.dlg-body { padding: 22px 24px; overflow-y: auto; max-height: calc(var(--dlg-maxh) - 2 * var(--dlg-border)); }
.dlg-body h2 { margin: 0 0 4px; font-size: 20px; }
.dlg-body h3 { font-size: 15px; margin: 18px 0 6px; }
.dlg-body p, .dlg-body li { color: var(--ink-2); font-size: 14px; }
.dlg-body .dlg-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 18px;
}
.dlg-actions .left { margin-right: auto; }
/* ---------- search palette ---------- */
dialog.search-dlg {
  margin-top: 10dvh;
  width: min(540px, calc(100vw - 28px));
  background: var(--panel-solid);
}
.search-box { padding: 10px; }
#search-input {
  width: 100%;
  box-sizing: border-box;
  font: inherit;
  font-size: 16px; /* >=16px: no iOS focus zoom */
  padding: 12px 14px;
  border-radius: 9px;
  border: 1px solid var(--line-strong);
  background: rgba(6, 12, 26, 0.8);
  color: var(--ink);
  outline: none;
}
#search-input:focus-visible { border-color: var(--cy); box-shadow: 0 0 0 1px var(--cy); }
#search-results {
  max-height: min(46dvh, 380px);
  overflow-y: auto;
  overscroll-behavior: contain;
  margin-top: 8px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.search-item {
  appearance: none;
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  text-align: left;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: var(--ink);
  font-size: 14px;
  padding: 10px 11px;
  cursor: pointer;
}
.search-item .si-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; background: var(--cy); }
.search-item .si-name { font-weight: 650; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.search-item .si-type {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--ink-2);
  border: 1px solid var(--line);
  border-radius: 5px;
  padding: 1.5px 6px;
  flex: none;
}
.search-item.active {
  background: rgba(84, 224, 255, 0.1);
  border-color: rgba(84, 224, 255, 0.35);
}
.search-empty { color: var(--ink-2); font-size: 13.5px; padding: 14px 12px; }
.search-hint {
  margin-top: 8px;
  font-family: var(--mono);
  font-size: 10.5px;
  color: var(--ink-2);
  text-align: right;
}

/* ---------- NOW situation board ---------- */
.asof-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--mono);
  font-size: 11px;
  color: #bdf0ff;
  border: 1px solid rgba(84, 224, 255, 0.4);
  border-radius: 99px;
  padding: 3px 10px;
}
.card.stale-warn {
  border-color: rgba(255, 209, 102, 0.5);
  background: rgba(80, 60, 10, 0.25);
}
.card.stale-warn p { color: var(--warn); }
.reading-row {
  width: 100%;
  appearance: none;
  text-align: left;
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: 4px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(10, 18, 38, 0.55);
  color: var(--ink);
  padding: 9px 11px;
  margin-bottom: 6px;
  cursor: pointer;
  font: inherit;
}
.reading-row .rd-name { font-weight: 700; font-size: 13.5px; }
.reading-row .rd-value { font-family: var(--mono); font-size: 12.5px; font-weight: 700; }
.reading-row .rd-trend { font-family: var(--mono); font-size: 13px; font-weight: 800; }
.reading-row .rd-trend.up { color: var(--up); }
.reading-row .rd-trend.down { color: var(--down); }
.reading-row .rd-trend.flat { color: var(--ink-2); }
.reading-row .rd-note {
  grid-column: 1 / -1;
  font-size: 12px;
  color: var(--ink-2);
}
.reading-row .rd-src {
  grid-column: 1 / -1;
  font-family: var(--mono);
  font-size: 10px;
  color: var(--ink-3);
}

/* ---------- v2: instrument labels, NOW strip, cross-links, flip badge ---------- */
.node-label .lval {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 700;
  color: #7fe8ff;
  white-space: nowrap;
}
.node-label .lval:empty { display: none; }

.now-strip {
  appearance: none;
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  text-align: left;
  border: 1px solid rgba(84, 224, 255, 0.28);
  border-radius: 8px;
  background: rgba(10, 26, 44, 0.6);
  color: var(--ink);
  padding: 8px 10px;
  margin: 0 0 10px;
  cursor: pointer;
  font: inherit;
}
.now-strip .ns-note { font-size: 12px; color: var(--ink-2); flex: 1; min-width: 0; }

.rel-row { margin: 0 0 10px; }
.rel-row .preset-btn { font-size: 11px; padding: 4px 9px; }

.badge.flip { color: #ffdf8e; border-color: rgba(255, 223, 142, 0.45); }

/* ---------- AI chat ---------- */
.ai-toolbar { align-items: center; margin-bottom: 8px; }
select.ai-model {
  font: inherit;
  font-size: 12px;
  color: var(--ink);
  background: rgba(6, 12, 26, 0.8);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 7px 8px;
  max-width: 100%;
}
.ai-model-input {
  font: inherit;
  font-size: 12px;
  color: var(--ink);
  background: rgba(6, 12, 26, 0.8);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 7px 9px;
  min-width: 120px;
  flex: 1 1 130px;
}
.ai-model-input:focus-visible { border-color: var(--cy); outline: none; }
#ai-log {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 10px;
}
.ai-msg {
  max-width: 94%;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 9px 12px;
  font-size: 13.5px;
  line-height: 1.6;
}
.ai-msg.user {
  align-self: flex-end;
  background: rgba(84, 224, 255, 0.12);
  border-color: rgba(84, 224, 255, 0.3);
  border-bottom-right-radius: 4px;
}
.ai-msg.assistant {
  align-self: flex-start;
  background: rgba(10, 18, 38, 0.6);
  border-bottom-left-radius: 4px;
}
.ai-msg .ai-actions { margin-top: 8px; }
.ai-inputrow {
  display: flex;
  gap: 8px;
  align-items: flex-end;
}
#ai-input {
  flex: 1;
  font: inherit;
  font-size: 16px; /* >=16px: no iOS focus zoom */
  color: var(--ink);
  background: rgba(6, 12, 26, 0.8);
  border: 1px solid var(--line-strong);
  border-radius: 9px;
  padding: 9px 11px;
  resize: none;
  overflow-y: auto;
  max-height: 160px;
  min-height: 44px;
  word-break: keep-all;
  overflow-wrap: break-word;
}
#ai-input:focus-visible { border-color: var(--cy); outline: none; box-shadow: 0 0 0 1px var(--cy); }
.ai-btns { display: flex; flex-direction: column; gap: 6px; }
.ai-key-input {
  width: 100%;
  box-sizing: border-box;
  font: inherit;
  font-size: 16px;
  color: var(--ink);
  background: rgba(6, 12, 26, 0.8);
  border: 1px solid var(--line-strong);
  border-radius: 9px;
  padding: 10px 12px;
}
.preset-btn.sug {
  white-space: normal;
  text-align: left;
  line-height: 1.5;
}

/* clickable node names inside a path chain */
.chain-node {
  appearance: none;
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
  border-bottom: 1px dotted rgba(84, 224, 255, 0.45);
}

.ob-steps { display: flex; gap: 6px; margin: 14px 0 4px; }
.ob-dot {
  width: 34px;
  padding: 8px 2px;
  background: none;
  border: none;
  cursor: pointer;
}
.ob-dot::before {
  content: "";
  display: block;
  height: 4px;
  border-radius: 2px;
  background: rgba(120, 180, 255, 0.18);
}
.ob-dot.on::before { background: var(--cy); }
.ob-rows { display: flex; flex-direction: column; gap: 8px; margin: 6px 0; }
.ob-rows .obr { display: flex; gap: 10px; align-items: baseline; }
.ob-rows .obr b { color: var(--cy); flex: none; min-width: 44px; font-weight: 600; }
.ob-visual {
  border: 1px solid var(--line);
  border-radius: 10px;
  background: rgba(5, 10, 22, 0.8);
  margin: 12px 0;
  padding: 10px;
  display: flex;
  justify-content: center;
}
.kbd {
  font-family: var(--mono);
  font-size: 11px;
  border: 1px solid var(--line-strong);
  border-bottom-width: 2px;
  border-radius: 5px;
  padding: 1px 6px;
  color: var(--ink);
  background: rgba(120, 180, 255, 0.08);
}

/* ---------- toast + loading + fatal ---------- */
#toast {
  position: fixed;
  z-index: 90;
  top: calc(var(--hud-h) + 10px);
  left: 50%;
  transform: translateX(-50%);
  background: var(--panel-solid);
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  color: var(--ink);
  font-size: 13px;
  padding: 8px 18px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
  max-width: calc(100vw - 40px);
}
#toast.show { opacity: 1; }

#loading {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  background: var(--bg0);
  transition: opacity 0.4s ease, visibility 0.4s;
}
#loading.gone { opacity: 0; pointer-events: none; visibility: hidden; }
#loading .ring {
  width: 54px; height: 54px;
  border-radius: 50%;
  border: 2px solid rgba(84, 224, 255, 0.15);
  border-top-color: var(--cy);
  animation: spin 0.9s linear infinite;
}
#loading p { color: var(--ink-2); font-size: 13px; font-family: var(--mono); letter-spacing: 0.1em; }
@keyframes spin { to { transform: rotate(360deg); } }

#fatal {
  position: fixed;
  inset: 0;
  z-index: 110;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(2, 5, 12, 0.9);
  padding: 20px;
}
#fatal.show { display: flex; }
#fatal .card { max-width: 440px; background: var(--panel-solid); }

/* ---------- touch / hover feedback ---------- */
/* hover styles only on hover-capable devices (no sticky hover on touch) */
@media (hover: hover) {
  .node-label:hover { border-color: var(--line-strong); background: rgba(10, 22, 44, 0.9); }
  .mode-tab:hover { color: var(--ink); }
  .icon-btn:hover { border-color: var(--line-strong); color: var(--ink); }
  .fx-row:hover { border-color: var(--line-strong); background: rgba(14, 26, 52, 0.75); }
  .imp-row:hover { border-color: var(--line-strong); }
  .preset-btn:hover { border-color: var(--line-strong); }
  .case-card:hover { border-color: var(--line-strong); }
  .btn:hover { border-color: var(--line-strong); }
  #statusline button:hover { color: var(--ink); }
  .search-item:hover {
    background: rgba(84, 224, 255, 0.1);
    border-color: rgba(84, 224, 255, 0.35);
  }
  .reading-row:hover { border-color: var(--line-strong); }
  .now-strip:hover { border-color: rgba(84, 224, 255, 0.5); }
  .chain-node:hover { color: #bdf0ff; border-bottom-color: var(--cy); }
}
.btn:active, .icon-btn:active, .preset-btn:active, .fx-row:active,
.imp-row:active, .case-card:active, .reading-row:active, .now-strip:active,
.mode-tab:active { filter: brightness(1.3); }
button, [role="button"], .fx-row { touch-action: manipulation; }

/* ---------- responsive ---------- */
@media (max-width: 900px) {
  .hud-top {
    flex-wrap: wrap;
    height: auto;
    padding-bottom: 8px;
    row-gap: 6px;
  }
  .brand .t small { display: none; }
  .mode-tabs {
    order: 3;
    width: 100%;
    justify-content: stretch;
    overflow-x: auto;
  }
  .mode-tab { flex: 1; padding: 12px 8px; font-size: 13px; }
  .hud-actions { margin-left: auto; }
  .icon-btn { min-width: 42px; height: 42px; }
  .hud-actions .lang-btn { padding: 10px 12px; }
  .phase-stepper .ps { height: 40px; }
  .btn { padding: 11px 16px; }
  .btn.sm { padding: 10px 14px; }
  .seg button { padding: 10px 12px; }
  .preset-btn { padding: 10px 14px; }
  .lever input[type="range"] { height: 34px; }
  .ai-model-input, select.ai-model { font-size: 16px; }

  #panel {
    top: auto;
    right: 0; left: 0; bottom: 0;
    width: 100%;
    max-height: var(--mobile-panel-reserve);
    border-radius: 14px 14px 0 0;
    border-bottom: 0;
    padding-bottom: env(safe-area-inset-bottom, 0);
    transition: transform 0.28s ease;
  }
  #panel.collapsed .panel-body { display: none; }
  #panel.collapsed { max-height: none; }
  #panel-toggle { display: inline-flex; }
  .hub-summary {
    width: 100%;
    margin-left: 0;
  }
  :root.map-viewport-reserved #stage,
  :root.map-viewport-reserved #labels {
    top: var(--hud-real-h, var(--hud-h));
    bottom: var(--mobile-panel-reserve);
  }
  #legend { bottom: auto; top: calc(var(--hud-real-h, var(--hud-h)) + 8px); left: 8px; width: 220px; }
  #statusline { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  /* the in-app toggle (.motion-on) may explicitly opt back in over the OS setting */
  :root:not(.motion-on) * { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}
/* in-app motion toggle mirrors the OS preference (class set by ui.js) */
:root.reduce-motion * {
  transition-duration: 0.01ms !important;
  animation-duration: 0.01ms !important;
}