:root {
  --bg:#0d1117; --panel:#131a24; --line:#222c3a; --text:#c9d4e2; --dim:#7d8b9e;
  --accent:#3b82f6; --ok:#3fb950; --warn:#d29922; --bad:#f85149;
}
* { box-sizing:border-box; }
body {
  margin:0; background:var(--bg); color:var(--text);
  font:14px/1.6 -apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;
}
.topbar {
  display:flex; align-items:center; justify-content:space-between;
  padding:10px 18px; border-bottom:1px solid var(--line); background:#0b1017;
}
.brand b { color:var(--accent); letter-spacing:.5px; }
.brand span { color:var(--dim); font-size:13px; margin-left:8px; }
.badges { display:flex; gap:8px; }
.badge {
  font-size:11.5px; padding:3px 10px; border-radius:20px;
  border:1px solid var(--line); color:var(--dim); font-family:ui-monospace,Menlo,monospace;
}
.badge.link { color:var(--accent); text-decoration:none; border-color:#274263; }

.layout { display:grid; grid-template-columns:280px 1fr 320px; min-height:calc(100vh - 45px); }
.side { border-right:1px solid var(--line); padding:16px; overflow-y:auto; }
.side.right { border-right:0; border-left:1px solid var(--line); }
.center { padding:20px 24px 60px; overflow-y:auto; }

h2 { font-size:15px; margin:0; }
h3 { font-size:11.5px; letter-spacing:.8px; text-transform:uppercase; color:var(--dim); margin:0 0 8px; }
.block { margin-bottom:22px; }
.note { color:var(--dim); font-size:12.5px; margin:0 0 10px; }
.tag { font-size:10px; color:var(--warn); border:1px solid #4a3a12; border-radius:4px; padding:1px 5px; text-transform:none; letter-spacing:0; }

label { display:flex; align-items:center; justify-content:space-between; gap:8px; margin:7px 0; font-size:13px; }
input[type=number], input[type=text] {
  width:88px; padding:4px 7px; background:#0b1017; color:var(--text);
  border:1px solid var(--line); border-radius:6px; font:inherit;
}
input[type=range] { width:110px; accent-color:var(--accent); }
output { width:34px; text-align:right; color:var(--dim); font-family:ui-monospace,Menlo,monospace; font-size:12px; }

.stage { display:flex; align-items:center; gap:8px; margin:6px 0; font-size:13px; }
.dot { width:7px; height:7px; border-radius:50%; background:var(--ok); flex:0 0 auto; }
.dot.off { background:#3d4655; }
.chip { margin-left:auto; font-size:11px; color:var(--dim); font-family:ui-monospace,Menlo,monospace; }
/* 한 줄에 칩이 여럿일 때 첫 칩만 오른쪽으로 밀고 나머지는 붙는다. */
.stage .chip ~ .chip { margin-left:6px; }
/* '미검증' 은 비용이 아니라 경고다. 같은 회색으로 두면 눈에 안 띈다. */
.warnchip { color:#e0a44a; border:1px solid #5a4623; border-radius:3px; padding:0 4px; }
.side select {
  width:100%; margin:4px 0 6px; padding:6px 8px; font-size:13px;
  color:var(--fg); background:#141922; border:1px solid #2a3240; border-radius:4px;
}

.goalbox, .stepwrap { background:var(--panel); border:1px solid var(--line); border-radius:10px; padding:18px; margin-bottom:16px; }
.stephead { display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; }
.stepstate { font-size:11.5px; color:var(--dim); border:1px solid var(--line); border-radius:20px; padding:2px 10px; }
.stepstate.ready { color:var(--ok); border-color:#1c4227; }

button.primary { background:var(--accent); color:#fff; border:0; border-radius:7px; padding:8px 16px; font:inherit; cursor:pointer; }
button.primary:disabled { background:#243449; color:#5d6b7e; cursor:default; }
.status { margin-left:10px; font-size:12.5px; color:var(--dim); }
.status.bad { color:var(--bad); }

.empty { color:#5d6b7e; font-size:12.5px; font-style:italic; }
.decision { border:1px solid var(--line); border-radius:8px; padding:13px; margin-bottom:10px; background:#0f151e; }
.decision.locked { background:#0b1017; }
.row { display:flex; align-items:center; gap:9px; flex-wrap:wrap; }
.name { font-family:ui-monospace,Menlo,monospace; font-size:12.5px; color:#8fb6ea; }
.rationale { font-size:12.5px; color:#a8b6c8; margin:8px 0 0; }
.lockbadge { font-size:10.5px; color:var(--dim); border:1px solid var(--line); border-radius:4px; padding:1px 6px; }
.editbadge { font-size:10.5px; color:var(--warn); border:1px solid #4a3a12; border-radius:4px; padding:1px 6px; }

details.evidence { margin-top:9px; }
details.evidence summary { cursor:pointer; font-size:12px; color:var(--accent); }
.ev { border-left:2px solid var(--line); padding:5px 0 5px 9px; margin:7px 0; font-size:12.5px; }
.ev .src { display:block; color:var(--dim); font-size:11.5px; margin-top:2px; font-family:ui-monospace,Menlo,monospace; }
.kind { font-size:10.5px; padding:1px 6px; border-radius:4px; margin-right:6px; }
.kind-internal_measurement { background:#10301b; color:#5fd57e; }
.kind-literature { background:#12243f; color:#79aef5; }
.kind-assumption { background:#3a1c1c; color:#f2867e; }

.warn { background:#2b220c; border:1px solid #4a3a12; border-radius:7px; padding:9px 11px; margin-bottom:9px; font-size:12.5px; color:#e8c877; }
pre { background:#0b1017; border:1px solid var(--line); color:#b9c7d8; padding:12px; border-radius:8px; overflow:auto; font-size:12px; max-height:340px; }
pre.empty { font-family:inherit; }

.tabs { display:flex; gap:4px; border-bottom:1px solid var(--line); margin-bottom:12px; }
.tab { background:none; border:0; border-bottom:2px solid transparent; color:var(--dim); padding:7px 10px; font:inherit; font-size:13px; cursor:pointer; }
.tab.is-active { color:var(--text); border-bottom-color:var(--accent); }
.panel.hidden { display:none; }
.policy b { display:block; font-size:12.5px; margin-top:12px; color:var(--text); }
.policy p { font-size:12.5px; color:var(--dim); margin:4px 0 0; }


/* LLM 이 생성한 설명. 근거와 시각적으로 분리해야 측정값으로 오인되지 않는다. */
.explain { border:1px dashed #3a4a63; border-radius:8px; padding:13px; margin-bottom:12px; background:#0e1723; }
.explain.hidden, .warn.hidden { display:none; }
.explainhead { display:flex; align-items:center; gap:9px; margin-bottom:6px; }
.explainhead b { font-size:12.5px; color:#8fb6ea; }
.genbadge { font-size:10.5px; padding:1px 7px; border-radius:4px; background:#2a2438; color:#b39ae0; border:1px solid #45375e; }
.explain p { font-size:12.5px; color:#a8b6c8; margin:0 0 10px; white-space:pre-wrap; }
.q { border-left:2px solid #45375e; padding:6px 0 6px 9px; margin:7px 0; font-size:12.5px; }
.q .qfield { font-family:ui-monospace,Menlo,monospace; font-size:11.5px; color:#8fb6ea; margin-right:6px; }
.q .qwhy { display:block; color:var(--dim); font-size:11px; margin-top:2px; }