:root{--bg: #0b1017;--panel: #111823;--panel-2: #162030;--line: #223044;--text: #e6edf5;--muted: #8a99ad;--accent: #ff7a1a;--ok: #34c77b;--warn: #f5a524;--ng: #ff4d4f;--info: #4ea8ff;--radius: 10px;color-scheme:dark}*{box-sizing:border-box}html,body,#root{height:100%;margin:0}body{background:var(--bg);color:var(--text);font:14px/1.5 Pretendard,Segoe UI,Malgun Gothic,system-ui,sans-serif}a{color:inherit;text-decoration:none}h2,h3{margin:0;font-weight:600}h3{font-size:15px;margin-bottom:6px}.mono{font-family:ui-monospace,Cascadia Mono,Consolas,monospace}.muted{color:var(--muted)}.small{font-size:12px}.spacer{flex:1}.center-screen{min-height:100%;display:grid;place-items:center}.btn{border:1px solid var(--line);background:var(--panel-2);color:var(--text);padding:8px 14px;border-radius:8px;cursor:pointer;font:inherit;white-space:nowrap;display:inline-flex;align-items:center;gap:4px}.btn:hover{border-color:#33465f}.btn.primary{background:var(--accent);border-color:var(--accent);color:#1a0d00;font-weight:600}.btn.primary:disabled{opacity:.55;cursor:default}.btn.ghost{background:transparent}.btn.on{background:#263650;border-color:#3b5579}.btn.sm{padding:4px 10px;font-size:12px}.btn.disabled{opacity:.35;pointer-events:none}input,select{background:var(--bg);border:1px solid var(--line);color:var(--text);border-radius:8px;padding:7px 10px;font:inherit}input:focus,select:focus{outline:2px solid rgba(255,122,26,.4);border-color:var(--accent)}.error{background:#ff4d4f1f;border:1px solid rgba(255,77,79,.4);color:#ffb3b4;padding:8px 12px;border-radius:8px}.ok-msg{color:var(--ok)}.notice{background:#4ea8ff1a;border:1px solid rgba(78,168,255,.35);padding:8px 12px;border-radius:8px}.app{min-height:100%;display:flex;flex-direction:column}.topbar{display:flex;align-items:center;gap:24px;padding:10px 20px;border-bottom:1px solid var(--line);background:#0d141e;position:sticky;top:0;z-index:10}.brand{display:flex;align-items:center;gap:8px;font-weight:700;font-size:16px;letter-spacing:.2px}.brand.big{font-size:24px}.brand-sub{font-weight:400;font-size:12px;color:var(--muted)}.brand-dot{width:12px;height:12px;border-radius:50%;background:radial-gradient(circle,#fff3c4 0 30%,var(--accent) 60%);box-shadow:0 0 12px var(--accent)}.nav{display:flex;gap:4px}.nav a{padding:6px 12px;border-radius:8px;color:var(--muted)}.nav a.active,.nav a:hover{color:var(--text);background:var(--panel-2)}.user{margin-left:auto;display:flex;align-items:center;gap:10px}.main{flex:1}.page{padding:20px;display:flex;flex-direction:column;gap:16px;max-width:1680px;margin:0 auto;width:100%}.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:16px}.card-title{font-weight:600;margin-bottom:8px;display:flex;justify-content:space-between}.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:16px}.login-bg{background:radial-gradient(1200px 600px at 70% 20%,rgba(255,122,26,.12),transparent 60%),var(--bg)}.login{width:340px;display:flex;flex-direction:column;gap:12px}.login p{margin:0 0 6px}.login label,.form label{display:flex;flex-direction:column;gap:4px;font-size:12px;color:var(--muted)}.form{display:flex;flex-direction:column;gap:10px;align-items:stretch}.form .btn{align-self:flex-start}.stats{display:grid;grid-template-columns:repeat(6,1fr);gap:12px}.stat{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:12px 14px}.stat.clickable{cursor:pointer}.stat.active{border-color:var(--accent)}.stat-label{color:var(--muted);font-size:12px}.stat-value{font-size:26px;font-weight:700}.stat-sub{color:var(--muted);font-size:11px}.stat-OK .stat-value{color:var(--ok)}.stat-WARN .stat-value{color:var(--warn)}.stat-NG .stat-value{color:var(--ng)}.matrix{border-collapse:collapse;width:100%;margin-top:8px}.matrix th,.matrix td{border:1px solid var(--line);padding:8px;text-align:center}.matrix th{font-weight:500;color:var(--muted)}.matrix td.hit{cursor:pointer;font-weight:700}.v-bg-OK{background:#34c77b1f}.v-bg-WARN{background:#f5a52424}.v-bg-NG{background:#ff4d4f29}.rules{margin:8px 0;padding-left:18px;display:flex;flex-direction:column;gap:6px}.rules b{margin-right:6px}.t-NG{color:var(--ng)}.t-WARN{color:var(--warn)}.toolbar{display:flex;align-items:center;gap:10px;margin-bottom:10px;flex-wrap:wrap}.toolbar h3{margin:0 8px 0 0}.table-wrap{overflow:auto;max-height:560px}.runs{width:100%;border-collapse:collapse}.runs th{position:sticky;top:0;background:var(--panel);color:var(--muted);font-weight:500;text-align:left;font-size:12px}.runs th,.runs td{padding:7px 10px;border-bottom:1px solid var(--line);white-space:nowrap}.runs tbody tr{cursor:pointer}.runs tbody tr:hover{background:var(--panel-2)}.num{text-align:right!important;font-variant-numeric:tabular-nums}.badge{display:inline-block;padding:1px 8px;border-radius:999px;font-size:12px;border:1px solid transparent;vertical-align:middle}.v-OK{color:var(--ok);border-color:#34c77b66;background:#34c77b1a}.v-WARN{color:var(--warn);border-color:#f5a52466;background:#f5a5241a}.v-NG{color:var(--ng);border-color:#ff4d4f73;background:#ff4d4f1f}.l-OK{color:#9fe3bf;background:#34c77b14}.l-NG{color:#ffb3b4;background:#ff4d4f14}.l-COND{color:#a9cdf5;background:#4ea8ff14}.l-UNLABELED{color:var(--muted);background:#8a99ad14}.run-head{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.run-head h2{display:flex;align-items:center;gap:8px;font-size:18px}.run-grid{display:grid;grid-template-columns:1fr 380px;gap:16px}.twin-card{position:relative;padding:0;height:520px;overflow:hidden}.hud{position:absolute;left:14px;top:14px;display:flex;flex-direction:column;gap:6px;pointer-events:none}.hud-status{font-weight:700;padding:4px 12px;border-radius:8px;width:fit-content;background:#0b1017bf;border:1px solid var(--line)}.hud-status.s-ok{color:var(--ok);border-color:#34c77b80}.hud-status.s-ng{color:#fff;background:#ff4d4fd9;border-color:var(--ng)}.hud-status.s-warn{color:#1a0d00;background:#f5a524e6;border-color:var(--warn)}.hud-status.s-idle{color:var(--muted)}.hud-flags{background:#ff4d4f33;border:1px solid rgba(255,77,79,.5);padding:2px 10px;border-radius:6px;width:fit-content}.hud-vals{display:flex;gap:12px;background:#0b1017bf;padding:4px 10px;border-radius:8px;border:1px solid var(--line)}.hint{position:absolute;right:12px;bottom:8px}.side{display:flex;flex-direction:column;gap:16px}.cam img{width:100%;aspect-ratio:16 / 9;object-fit:cover;border-radius:6px;background:#000;display:block}.cam-empty{aspect-ratio:16 / 9;display:grid;place-items:center;border:1px dashed var(--line);border-radius:6px}.kv{display:grid;grid-template-columns:110px 1fr;gap:6px 10px;margin:10px 0 0}.kv.wide{grid-template-columns:140px 1fr}.kv dt{color:var(--muted)}.kv dd{margin:0;word-break:break-all}.player{display:flex;flex-direction:column;gap:10px}.controls{display:flex;align-items:center;gap:10px}.controls input[type=range]{flex:1;accent-color:var(--accent);padding:0}.speeds{display:flex;gap:4px}.charts{display:flex;flex-direction:column;gap:6px}.chart-head{display:flex;justify-content:space-between;font-size:12px}.chart-title{font-weight:600}.chart-canvas{cursor:crosshair;touch-action:none}.chart-canvas canvas{display:block}@media (max-width: 1100px){.run-grid,.grid-2{grid-template-columns:1fr}.stats{grid-template-columns:repeat(3,1fr)}}@media (max-width: 640px){.stats{grid-template-columns:repeat(2,1fr)}.brand-sub{display:none}.controls{flex-wrap:wrap}}.twin-card.tall{height:620px}.joints{display:flex;flex-direction:column;gap:6px}.joint{display:grid;grid-template-columns:28px 1fr 64px;align-items:center;gap:8px;padding:2px 4px;border-radius:6px}.joint:hover{background:var(--panel-2)}.joint.over .joint-val,.joint.over .joint-name{color:var(--ng)}.joint-name{font-weight:600;font-size:12px}.joint-val{text-align:right;font-size:12px}.joint input[type=range]{width:100%;padding:0;accent-color:var(--accent)}.joint-bar{position:relative;height:6px;border-radius:3px;background:#1c2738}.joint-zero{position:absolute;top:-2px;width:1px;height:10px;background:#3b4b62}.joint-mark{position:absolute;top:-3px;width:4px;height:12px;margin-left:-2px;border-radius:2px;background:var(--accent)}.tcp{display:flex;gap:10px;margin-top:4px;padding-top:6px;border-top:1px solid var(--line)}.btn-row{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}.runs.plain tbody tr{cursor:default}.pip-cam{position:absolute;right:12px;bottom:30px;width:300px;background:#0b1017d1;border:1px solid var(--line);border-radius:8px;padding:6px;pointer-events:none;box-shadow:0 6px 18px #00000059}.pip-cam-title{display:flex;justify-content:space-between;font-size:11px;color:var(--muted);margin-bottom:4px}.pip-cam img{display:block;width:100%;aspect-ratio:16 / 9;object-fit:cover;border-radius:4px;background:#000}@media (max-width: 640px){.pip-cam{width:160px}}.grid-3{display:grid;grid-template-columns:1fr 2fr;gap:16px}.block-line{background:#0b1520;border:1px solid var(--line);border-radius:6px;padding:6px 8px;color:#9fd3ff;margin-bottom:8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.bar{height:8px;border-radius:4px;background:#1c2738;overflow:hidden}.bar.slim{height:6px;display:inline-block;width:110px;vertical-align:middle;margin-right:6px}.bar-fill{height:100%;background:var(--accent);transition:width .25s linear}.bar-fill.green{background:var(--ok)}.bar-fill.amber{background:var(--warn)}.bar-fill.red{background:var(--ng)}.bar-fill.blue{background:var(--info)}.holes{display:flex;gap:6px;align-items:center}.hole-chip{width:22px;height:22px;border-radius:50%;display:inline-grid;place-items:center;font-size:11px;border:2px solid #33465f;color:var(--muted)}.hole-chip.h1{border-color:#7c8794;color:var(--text)}.hole-chip.h2{border-color:var(--info);color:var(--text)}.hole-chip.h3{border-color:var(--warn);color:var(--text)}.hole-chip.h4{border-color:var(--ok);background:#34c77b33;color:var(--text)}.tools .active-tool{background:#ff7a1a1a}.tools .active-tool td:first-child{color:var(--accent);font-weight:600}.span-2{min-width:0}.t-OK{color:var(--ok)}@media (max-width: 1100px){.grid-3{grid-template-columns:1fr}}.edge-badge{font-size:12px;padding:4px 10px;border-radius:999px;margin-right:10px;border:1px solid #3a4250;color:#9aa4b2;white-space:nowrap}.edge-badge.on{color:#3ddc97;border-color:#2a6b52;background:#3ddc9714}.edge-badge.warn{color:#f5c04a;border-color:#6b5a2a;background:#f5c04a14}