:root {
  color: #162522;
  background: #f3f5f2;
  font-family: "Pretendard", "Noto Sans KR", "Apple SD Gothic Neo", Arial, sans-serif;
  font-synthesis: none;
  --ink: #152521;
  --muted: #6f7e79;
  --line: #dfe5e1;
  --panel: #ffffff;
  --navy: #102e2a;
  --green: #17a673;
  --green-bright: #5de0aa;
  --green-soft: #eaf8f1;
  --amber: #d78b2b;
  --blue: #4275d8;
  --mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; min-width: 320px; min-height: 100vh; background: #f3f5f2; }
button, select { font: inherit; }
button, a, select { -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; }
button:disabled { cursor: not-allowed; opacity: .52; }

.app-shell { min-height: 100vh; }
.sidebar {
  position: fixed; inset: 0 auto 0 0; z-index: 40; display: flex; width: 248px; flex-direction: column;
  background: var(--navy); color: white; padding: 30px 20px 22px;
}
.brand { display: flex; align-items: center; gap: 13px; color: white; text-decoration: none; padding: 0 8px 30px; border-bottom: 1px solid #ffffff18; }
.brand-mark { position: relative; display: flex; width: 34px; height: 34px; align-items: center; justify-content: center; gap: 3px; border: 1px solid #5de0aa4d; border-radius: 8px; background: #173c35; overflow: hidden; }
.brand-mark:after { content: ""; position: absolute; inset: auto 0 0; height: 3px; background: var(--green-bright); }
.brand-mark i { width: 3px; border-radius: 3px; background: var(--green-bright); }
.brand-mark i:nth-child(1) { height: 9px; }.brand-mark i:nth-child(2) { height: 19px; }.brand-mark i:nth-child(3) { height: 13px; }
.brand strong { display: block; font-size: 15px; letter-spacing: -.2px; }.brand small { display: block; margin-top: 3px; color: #9ab1ab; font: 9px var(--mono); letter-spacing: 1.35px; }
.nav-list { display: grid; gap: 6px; margin-top: 28px; }
.nav-list a { display: flex; align-items: center; gap: 12px; min-height: 45px; border-radius: 8px; padding: 0 12px; color: #a7bbb6; font-size: 13px; font-weight: 600; text-decoration: none; transition: .2s ease; }
.nav-list a:hover { color: white; background: #ffffff0c; }.nav-list a.active { color: white; background: #ffffff12; box-shadow: inset 3px 0 var(--green-bright); }
.nav-icon { display: grid; width: 24px; height: 24px; place-items: center; font: 17px var(--mono); color: #6f9188; }.nav-list .active .nav-icon { color: var(--green-bright); }
.sidebar-meta { margin-top: auto; }.sidebar-meta > p { margin: 18px 8px 0; color: #55766e; font: 9px var(--mono); letter-spacing: 1px; }
.mini-status { display: flex; align-items: center; gap: 10px; border: 1px solid #ffffff14; border-radius: 9px; background: #ffffff08; padding: 12px; }
.mini-status .status-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--green-bright); box-shadow: 0 0 0 4px #5de0aa18; }.mini-status b,.mini-status small { display: block; }.mini-status b { font-size: 11px; }.mini-status small { color: #87a099; font: 9px var(--mono); margin-top: 3px; }

.workspace { margin-left: 248px; min-height: 100vh; }
.topbar { height: 88px; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 0 34px; border-bottom: 1px solid var(--line); background: #f9faf8; }
.topbar h1 { margin: 3px 0 0; font-size: 21px; letter-spacing: -.5px; }.eyebrow,.section-kicker { margin: 0; color: var(--green); font: 500 9px var(--mono); letter-spacing: 1.5px; }
.topbar-actions { display: flex; align-items: center; gap: 14px; }.runtime-clock { padding-right: 17px; border-right: 1px solid var(--line); text-align: right; }.runtime-clock span { display: block; color: #98a39f; font: 8px var(--mono); letter-spacing: 1px; }.runtime-clock strong { font: 12px var(--mono); color: #42534e; }
.icon-button,.mobile-menu { display: grid; width: 36px; height: 36px; place-items: center; border: 1px solid var(--line); border-radius: 8px; background: white; color: #52635e; }.operator { display: grid; width: 36px; height: 36px; place-items: center; border-radius: 50%; background: var(--navy); color: var(--green-bright); font: 9px var(--mono); }.mobile-menu { display: none; }

.content { max-width: 1500px; margin: 0 auto; padding: 26px 30px 50px; }
.scope-note { display: flex; align-items: center; gap: 11px; min-height: 45px; margin-bottom: 17px; border: 1px solid #cfe6da; border-radius: 8px; background: #edf8f2; padding: 8px 14px; color: #466159; }
.scope-note p { flex: 1; margin: 0; font-size: 11px; line-height: 1.55; }.scope-note strong { margin-right: 7px; color: #1d4338; }.scope-note > span:last-child { color: #2c765f; font: 9px var(--mono); letter-spacing: .7px; }
.scope-icon { display: grid; flex: 0 0 20px; width: 20px; height: 20px; place-items: center; border-radius: 50%; background: var(--green); color: white; font: 10px var(--mono); }

.control-panel { display: grid; grid-template-columns: minmax(260px, 1fr) auto minmax(230px, .75fr) auto; align-items: end; gap: 24px; border: 1px solid var(--line); border-radius: 12px; background: white; padding: 20px 22px; box-shadow: 0 8px 28px #24483b08; }
.control-intro h2,.panel-header h2 { margin: 5px 0 0; font-size: 16px; letter-spacing: -.25px; }.control-intro > p:last-child { margin: 5px 0 0; color: var(--muted); font-size: 11px; }
.control-field { display: grid; gap: 8px; }.field-label { color: #687873; font-size: 10px; font-weight: 700; }
.segmented { display: flex; padding: 3px; border: 1px solid var(--line); border-radius: 8px; background: #f5f7f5; }.segmented button { min-width: 80px; height: 34px; border: 0; border-radius: 6px; background: transparent; color: #71807b; font-size: 11px; font-weight: 700; }.segmented button.active { background: var(--navy); color: white; box-shadow: 0 3px 8px #0e302823; }.segmented small { margin-left: 3px; color: var(--green-bright); font-size: 8px; }
select { width: 100%; height: 41px; border: 1px solid var(--line); border-radius: 8px; outline: none; background: white; padding: 0 34px 0 12px; color: #2f403b; font-size: 11px; font-weight: 600; }
.run-actions { display: flex; gap: 8px; }.primary-button,.secondary-button,.outline-button { height: 41px; border-radius: 8px; padding: 0 16px; font-size: 11px; font-weight: 800; }
.primary-button { border: 1px solid var(--green); background: var(--green); color: white; box-shadow: 0 5px 14px #17a67328; }.primary-button:hover { background: #128b61; }.play { margin-right: 5px; font-size: 8px; }
.secondary-button,.outline-button { border: 1px solid var(--line); background: white; color: #52635e; }.secondary-button:hover,.outline-button:hover { border-color: #b5c4bf; }

.metrics-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: 16px; }
.metric-card { min-width: 0; border: 1px solid var(--line); border-radius: 10px; background: white; padding: 16px 17px 13px; box-shadow: 0 7px 24px #24483b06; }
.metric-heading,.metric-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; }.metric-heading { color: #71807c; font-size: 10px; font-weight: 700; }.metric-icon { display: grid; width: 25px; height: 25px; place-items: center; border-radius: 6px; font: 12px var(--mono); }.metric-icon.throughput { color: var(--green); background: var(--green-soft); }.metric-icon.frames { color: var(--blue); background: #eef3ff; }.metric-icon.errors { color: #73947e; background: #f0f6f2; }.metric-icon.time { color: var(--amber); background: #fff5e9; }
.metric-value { display: flex; align-items: baseline; gap: 7px; margin: 11px 0 10px; min-height: 34px; }.metric-value strong { overflow: hidden; text-overflow: ellipsis; font: 500 clamp(20px,2vw,27px) var(--mono); letter-spacing: -1.2px; }.metric-value small { color: #95a19d; font: 9px var(--mono); }
.metric-foot { padding-top: 10px; border-top: 1px solid #edf0ee; color: #94a09c; font-size: 8px; font-weight: 600; }.pass-pill { color: #17845f; }

.main-grid { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(330px, .75fr); gap: 14px; margin-top: 14px; }
.panel { min-width: 0; border: 1px solid var(--line); border-radius: 11px; background: white; box-shadow: 0 7px 24px #24483b06; }
.panel-header { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 17px 20px 14px; border-bottom: 1px solid #e8ece9; }.panel-header.compact { padding-bottom: 13px; }
.live-state,.connected { display: flex; align-items: center; gap: 7px; color: #82908c; font: 500 9px var(--mono); letter-spacing: .3px; }.live-state span,.connected i { width: 7px; height: 7px; border-radius: 50%; background: #9aa6a2; }.live-state.running span { background: var(--green); box-shadow: 0 0 0 4px #17a67318; animation: pulse 1.2s infinite; }.live-state.running { color: var(--green); }.live-state.passed span,.connected i { background: var(--green); }.live-state.passed { color: var(--green); }.live-state.stopped { color: var(--amber); }.live-state.stopped span { background: var(--amber); }
@keyframes pulse { 50% { box-shadow: 0 0 0 8px #17a67300; } }

.path-panel { grid-column: 1 / -1; }.pipeline { display: flex; align-items: center; justify-content: space-between; padding: 27px 30px 23px; }
.pipeline-node { position: relative; flex: 0 0 150px; min-width: 0; text-align: center; }.node-index { position: absolute; top: -12px; left: 4px; color: #aeb8b5; font: 8px var(--mono); }
.pipeline-node h3 { margin: 11px 0 3px; font-size: 11px; }.pipeline-node p { margin: 0; color: #889590; font: 9px var(--mono); }.pipeline-node > small { display: inline-block; max-width: 100%; margin-top: 9px; overflow: hidden; color: #5c716a; font: 8px var(--mono); text-overflow: ellipsis; white-space: nowrap; }
.node-art,.buffer-pair { height: 50px; margin: auto; }.producer-art { display: flex; width: 60px; align-items: center; justify-content: center; gap: 4px; border: 1px solid #cde1da; border-radius: 9px; background: #f2faf6; }.producer-art i { width: 3px; border-radius: 2px; background: var(--green); }.producer-art i:nth-child(1){height:11px}.producer-art i:nth-child(2){height:29px}.producer-art i:nth-child(3){height:20px}.producer-art i:nth-child(4){height:34px}
.buffer-pair { display: flex; width: 79px; gap: 5px; align-items: center; }.buffer-pair b { display: grid; width: 37px; height: 43px; place-items: center; border: 1px solid #d8e1de; border-radius: 7px; background: #f6f8f7; color: #8d9995; font: 11px var(--mono); transition: .2s; }.buffer-pair b.active { border-color: var(--green); background: var(--green-soft); color: var(--green); box-shadow: inset 0 -3px var(--green); }
.usb-art { display: grid; width: 60px; place-items: center; border-radius: 9px; background: var(--navy); color: white; font: 10px var(--mono); letter-spacing: .5px; }.usb-art small { margin-left: 3px; color: var(--green-bright); font-size: 7px; }.host-art { position: relative; width: 66px; border: 2px solid #bfcac6; border-radius: 6px; }.host-art:after { content:""; position:absolute; width: 35px; height: 3px; left: 13px; bottom: -7px; border-radius: 5px; background:#bfcac6; }.host-art span { position: absolute; inset: 6px; border-radius: 3px; background: #eff4f1; }.host-art span:after { content:""; position:absolute; width: 17px; height: 3px; left: 7px; top: 11px; background: var(--green); box-shadow: 0 7px #9ab0a9; }
.flow-line { position: relative; flex: 1; height: 1px; margin: -35px 4px 0; background: #dbe3df; overflow: hidden; }.flow-line:after { content:"›"; position: absolute; right: -1px; top: -8px; color: #a2b0ab; font-size: 14px; }.flow-line i { position:absolute; top:-1px; left:-20%; width:20%; height:3px; border-radius:5px; background:linear-gradient(90deg,transparent,var(--green)); }.pipeline.running .flow-line i { animation: flow 1s linear infinite; }.pipeline.running .producer-art i { animation: wave .65s ease-in-out infinite alternate; }.pipeline.running .producer-art i:nth-child(2) { animation-delay: .15s; }.pipeline.running .producer-art i:nth-child(3) { animation-delay: .3s; }
@keyframes flow { to { left: 110%; } } @keyframes wave { to { transform: scaleY(.55); } }
.progress-wrap { padding: 13px 20px 17px; border-top: 1px solid #edf0ee; }.progress-label { display: flex; justify-content: space-between; margin-bottom: 7px; color: #82908c; font-size: 8px; }.progress-label strong { color: var(--green); font: 8px var(--mono); }.progress-track { height: 5px; overflow: hidden; border-radius: 4px; background: #edf1ef; }.progress-track span { display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg,#138b62,var(--green-bright)); transition: width .16s linear; }

.throughput-panel,.integrity-panel,.packet-panel,.usb-panel { min-height: 280px; }.legend { display:flex; align-items:center; gap:6px; color:#8b9793; font-size:8px; }.legend i { width:15px; height:2px; background:var(--green); }.legend b { margin-left:7px; color:#c1a56a; font-weight:400; letter-spacing:-2px; }
.chart-wrap { display:flex; height:165px; padding:19px 20px 0; }.y-axis { display:flex; width:32px; flex-direction:column; justify-content:space-between; padding:0 0 4px; color:#a6b0ad; font:7px var(--mono); }.chart { flex:1; height:100%; overflow:visible; background: repeating-linear-gradient(to bottom, transparent 0, transparent calc(25% - 1px), #edf0ee 25%); }.chart .threshold { stroke:#c5ab70; stroke-width:1; stroke-dasharray:5 5; }.chart polyline { fill:none; stroke:var(--green); stroke-width:2.2; vector-effect:non-scaling-stroke; }.chart path { fill:#17a67313; stroke:none; }.chart-summary { display:flex; justify-content:flex-end; gap:20px; margin:10px 20px 0; padding-top:10px; border-top:1px solid #edf0ee; color:#99a49f; font:7px var(--mono); }.chart-summary b { margin-left:5px; color:#4b5e58; font-weight:500; }
.all-clear,.crc-badge { border-radius:12px; background:var(--green-soft); padding:5px 8px; color:var(--green); font:7px var(--mono); letter-spacing:.5px; }.all-clear.failed { color:#b34a4a; background:#ffeded; }
.counter-grid { display:grid; grid-template-columns:repeat(3,1fr); padding:10px 14px 15px; }.counter-grid > div { padding:13px 10px 11px; border-right:1px solid #edf0ee; border-bottom:1px solid #edf0ee; }.counter-grid > div:nth-child(3n) { border-right:0; }.counter-grid > div:nth-child(n+4) { border-bottom:0; }.counter-grid span,.counter-grid small { display:block; }.counter-grid span { color:#687873; font-size:9px; font-weight:600; }.counter-grid strong { display:block; margin:6px 0 3px; font:500 19px var(--mono); }.counter-grid small { color:#a7b0ad; font:6px var(--mono); letter-spacing:.6px; }
.packet-fields { display:grid; grid-template-columns:1fr 1fr; margin:0; padding:8px 19px 15px; }.packet-fields div { padding:10px 4px; border-bottom:1px solid #edf0ee; }.packet-fields div:nth-last-child(2) { border-bottom:1px solid #edf0ee; }.packet-fields .full { grid-column:1/-1; border-bottom:0; }.packet-fields dt { color:#9aa5a1; font:7px var(--mono); letter-spacing:.6px; }.packet-fields dd { margin:4px 0 0; color:#2f433d; font:500 10px var(--mono); }
.usb-panel { grid-column:1/-1; min-height:0; }.connected { color:var(--green); }.usb-layout { display:grid; grid-template-columns:280px 1fr; gap:25px; align-items:center; padding:19px 22px 22px; }.device-identity { display:flex; align-items:center; gap:12px; }.usb-glyph { display:grid; width:48px; height:48px; place-items:center; border-radius:9px; background:var(--navy); color:var(--green-bright); font-size:20px; }.device-identity strong,.device-identity small { display:block; }.device-identity strong { font-size:11px; }.device-identity small { margin-top:5px; color:#83918c; font:8px var(--mono); }
.usb-specs { display:grid; grid-template-columns:repeat(4,1fr); gap:13px; margin:0; }.usb-specs div { padding-left:13px; border-left:2px solid #e6ebe8; }.usb-specs dt { color:#a0aaa6; font:7px var(--mono); }.usb-specs dd { margin:5px 0 0; color:#475a54; font-size:9px; font-weight:600; }

.report-panel { margin-top:14px; }.report-actions { display:flex; align-items:center; gap:10px; }.text-button { border:0; background:transparent; color:#8a9793; font-size:9px; }.outline-button { height:34px; color:var(--green); border-color:#badacc; }
.table-wrap { overflow-x:auto; }.report-panel table { width:100%; border-collapse:collapse; min-width:930px; }.report-panel th { padding:10px 16px; background:#f7f9f7; color:#929d99; font:7px var(--mono); letter-spacing:.5px; text-align:left; }.report-panel td { padding:12px 16px; border-top:1px solid #edf0ee; color:#63736e; font:9px var(--mono); }.report-panel td strong { color:#2e433c; font-weight:500; }.result-badge { display:inline-block; border-radius:10px; padding:4px 8px; font-size:7px; }.result-badge.passed { color:#16845e; background:var(--green-soft); }.result-badge.failed { color:#af4848; background:#ffecec; }.row-button { width:26px; height:26px; border:1px solid var(--line); border-radius:6px; background:white; color:var(--green); }.empty-row td { height:75px; color:#9ba6a2; text-align:center; }

dialog { width:min(760px,calc(100vw - 30px)); max-height:85vh; border:0; border-radius:12px; padding:0; color:var(--ink); box-shadow:0 30px 90px #0c28224d; }dialog::backdrop { background:#0d282378; backdrop-filter:blur(3px); }.dialog-header { display:flex; align-items:center; justify-content:space-between; padding:18px 20px; border-bottom:1px solid var(--line); }.dialog-header h2 { margin:4px 0 0; font-size:17px; }.dialog-header button { display:grid; width:32px; height:32px; place-items:center; border:1px solid var(--line); border-radius:7px; background:white; color:#71807b; font-size:20px; }.dialog-actions { display:flex; justify-content:flex-end; gap:9px; padding:14px 20px; border-top:1px solid var(--line); }#report-preview { max-height:57vh; margin:0; overflow:auto; background:#112d28; padding:22px; color:#bde7d6; font:10px/1.7 var(--mono); white-space:pre-wrap; }
.toast { position:fixed; z-index:80; right:24px; bottom:24px; max-width:380px; transform:translateY(20px); border:1px solid #41645b; border-radius:9px; background:#15352f; padding:12px 16px; color:white; opacity:0; pointer-events:none; font-size:10px; box-shadow:0 14px 40px #102e2a3d; transition:.25s ease; }.toast.visible { transform:translateY(0); opacity:1; }

@media (max-width: 1150px) {
  .control-panel { grid-template-columns:1fr 1fr; }.control-intro { grid-column:1/-1; }.run-actions { justify-content:flex-end; }
  .metrics-grid { grid-template-columns:repeat(2,1fr); }.main-grid { grid-template-columns:1fr 1fr; }.path-panel,.usb-panel { grid-column:1/-1; }
  .pipeline-node { flex-basis:130px; }.usb-specs { grid-template-columns:repeat(2,1fr); }.usb-specs div:nth-child(n+3) { margin-top:10px; }
}

@media (max-width: 820px) {
  .sidebar { transform:translateX(-100%); transition:transform .25s ease; box-shadow:20px 0 50px #0c282236; }.sidebar.open { transform:translateX(0); }
  .workspace { margin-left:0; }.mobile-menu { display:grid; }.topbar { height:75px; padding:0 18px; justify-content:flex-start; }.topbar > div:nth-child(2) { flex:1; }.topbar h1 { font-size:17px; }.runtime-clock,.operator { display:none; }
  .content { padding:18px 15px 38px; }.scope-note > span:last-child { display:none; }.control-panel { gap:16px; }.pipeline { display:grid; grid-template-columns:1fr 30px 1fr; row-gap:22px; }.pipeline-node { width:100%; }.flow-line { width:100%; margin:-35px 0 0; }.pipeline .flow-line:nth-of-type(2) { display:none; }.pipeline-node:nth-of-type(3) { grid-column:1; }.pipeline-node:nth-of-type(4) { grid-column:3; }.main-grid { grid-template-columns:1fr; }.path-panel,.usb-panel { grid-column:1; }.usb-layout { grid-template-columns:1fr; }.usb-specs { padding-top:17px; border-top:1px solid var(--line); }
}

@media (max-width: 560px) {
  .topbar-actions { gap:6px; }.topbar .eyebrow { display:none; }.scope-note { align-items:flex-start; }.scope-note p { font-size:10px; }.scope-note strong { display:block; }
  .control-panel { grid-template-columns:1fr; padding:17px; }.control-intro { grid-column:1; }.run-actions { justify-content:stretch; }.run-actions button { flex:1; }
  .metrics-grid { grid-template-columns:1fr 1fr; gap:9px; }.metric-card { padding:13px 12px 11px; }.metric-value strong { font-size:17px; }.metric-foot span:last-child { display:none; }
  .pipeline { grid-template-columns:1fr; padding:24px 20px; }.pipeline-node,.pipeline-node:nth-of-type(3),.pipeline-node:nth-of-type(4) { grid-column:1; }.flow-line { width:1px; height:24px; margin:0 auto; }.flow-line:after { right:-4px; top:12px; transform:rotate(90deg); }.pipeline .flow-line:nth-of-type(2) { display:block; }.flow-line i { width:3px; height:30%; top:-30%; left:-1px; background:linear-gradient(180deg,transparent,var(--green)); }.pipeline.running .flow-line i { animation:flow-mobile 1s linear infinite; }
  @keyframes flow-mobile { to { top:110%; left:-1px; } }
  .counter-grid { grid-template-columns:repeat(2,1fr); }.counter-grid > div:nth-child(3n) { border-right:1px solid #edf0ee; }.counter-grid > div:nth-child(2n) { border-right:0; }.counter-grid > div:nth-child(n+4) { border-bottom:1px solid #edf0ee; }.counter-grid > div:nth-child(n+5) { border-bottom:0; }
  .usb-specs { grid-template-columns:1fr; }.usb-specs div:nth-child(n+2) { margin-top:9px; }.panel-header { padding:15px; }.panel-header h2 { font-size:14px; }.report-actions .text-button { display:none; }.legend { display:none; }
}

@media (prefers-reduced-motion: reduce) { *,*::before,*::after { scroll-behavior:auto !important; animation-duration:.001ms !important; transition-duration:.001ms !important; } }