/* Cladding · knowledge-graph viewer — styles (read as text, inlined into the export). */
:root {
  --bg: #0d1117; --panel: rgba(22,27,34,.92); --panel-border: #30363d;
  --fg: #e6edf3; --muted: #8b949e; --accent: #f59e0b; --edge: rgba(139,148,158,.22);
  --node-stroke: rgba(8,11,16,.85);
}
:root.light {
  --bg: #f6f8fa; --panel: rgba(255,255,255,.94); --panel-border: #d0d7de;
  --fg: #1f2328; --muted: #57606a; --accent: #bf6f00; --edge: rgba(80,90,100,.18);
  --node-stroke: rgba(255,255,255,.9);
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; color: var(--fg);
  font: 13px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; }
/* deep-space field so the additive node-bloom reads as a glowing galaxy */
body { background: radial-gradient(ellipse 85% 75% at 55% 42%, #03050a 0%, #010204 55%, #000001 100%); }
:root.light body { background: radial-gradient(ellipse 80% 70% at 60% 44%, #ffffff 0%, #eef1f5 55%, #e3e8ee 100%); }
#stage { position: fixed; inset: 0; }
canvas { display: block; width: 100vw; height: 100vh; cursor: grab; }
canvas.grabbing { cursor: grabbing; }

#side { position: fixed; top: 0; left: 0; bottom: 0; width: 264px; padding: 14px 14px 40px;
  background: var(--panel); border-right: 1px solid var(--panel-border); backdrop-filter: blur(8px);
  overflow-y: auto; transition: transform .2s ease; z-index: 5; }
#side.hidden { transform: translateX(-100%); }
#side h1 { font-size: 14px; margin: 0 0 2px; letter-spacing: .2px; }
#side .sub { color: var(--muted); font-size: 11px; margin-bottom: 12px; }
#side h2 { font-size: 11px; text-transform: uppercase; letter-spacing: .6px; color: var(--muted);
  margin: 16px 0 6px; border-top: 1px solid var(--panel-border); padding-top: 12px; }
#search { width: 100%; padding: 7px 9px; border-radius: 7px; border: 1px solid var(--panel-border);
  background: var(--bg); color: var(--fg); font-size: 12px; }
.row { display: flex; align-items: center; gap: 7px; padding: 3px 0; cursor: pointer; user-select: none; }
.row input { accent-color: var(--accent); }
.row .sw { width: 11px; height: 11px; border-radius: 3px; flex: none; }
.row .nm { flex: 1; }
.row .ct { color: var(--muted); font-variant-numeric: tabular-nums; font-size: 11px; }
.row.off .nm, .row.off .ct { opacity: .4; text-decoration: line-through; }
.zone { margin: 2px 0 6px; }
.zone h3 { font-size: 10px; text-transform: uppercase; letter-spacing: .5px; color: var(--muted);
  margin: 6px 0 1px; opacity: .65; font-weight: 600; }
.hint-inline { text-transform: none; letter-spacing: 0; opacity: .55; font-weight: 400; }
.toggles { display: flex; flex-wrap: wrap; gap: 6px; }
.toggles button { flex: 1 1 auto; padding: 6px 8px; border-radius: 7px; cursor: pointer;
  border: 1px solid var(--panel-border); background: var(--bg); color: var(--fg); font-size: 11px; }
.toggles button.on { background: var(--accent); color: #111; border-color: var(--accent); }
/* force sliders (장력) */
.slider { margin: 8px 0; }
.slider label { display: block; font-size: 11px; color: var(--muted); margin-bottom: 3px; }
.slider input[type=range] { width: 100%; height: 4px; -webkit-appearance: none; appearance: none; background: var(--panel-border); border-radius: 999px; outline: none; }
.slider input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 13px; height: 13px; border-radius: 50%; background: var(--accent); cursor: pointer; border: none; }
.slider input[type=range]::-moz-range-thumb { width: 13px; height: 13px; border-radius: 50%; background: var(--accent); cursor: pointer; border: none; }
/* conformance pill (live SSoT health) */
#impact { position: fixed; top: 12px; left: 50%; transform: translateX(-50%); z-index: 6; display: none;
  padding: 6px 12px; border-radius: 999px; background: var(--panel); border: 1px solid var(--panel-border);
  font-size: 12px; font-variant-numeric: tabular-nums; box-shadow: 0 4px 16px rgba(0,0,0,.3); }
#impact .dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 5px; vertical-align: 1px; }
#tip { position: fixed; pointer-events: none; z-index: 9; max-width: 320px; padding: 8px 10px;
  border-radius: 8px; background: var(--panel); border: 1px solid var(--panel-border);
  box-shadow: 0 6px 24px rgba(0,0,0,.35); font-size: 12px; display: none; }
#tip .t { font-weight: 600; }
#tip .m { color: var(--muted); font-size: 11px; margin-top: 2px; }
#tip .k { display: inline-block; padding: 1px 6px; border-radius: 999px; font-size: 10px; color: #fff; }
#burger { position: fixed; top: 12px; left: 12px; z-index: 6; width: 34px; height: 34px; display: none;
  border-radius: 8px; border: 1px solid var(--panel-border); background: var(--panel); color: var(--fg);
  cursor: pointer; font-size: 16px; }
#hint { position: fixed; right: 12px; bottom: 10px; color: var(--muted); font-size: 11px; z-index: 4; }
@media (max-width: 760px) { #side { transform: translateX(-100%); } #side.show { transform: none; } #burger { display: block; } }