/* 3D 뷰포트 + HUD + 범례 + 로그 */
.viewport-area {
  position: relative;
  background: radial-gradient(ellipse at center, #1a2032 0%, #0a0e16 70%);
  overflow: hidden;
  min-width: 0;
}
#viewport {
  position: absolute;
  inset: 0;
}
.viewport-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  padding: 12px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.hud {
  background: rgba(10, 14, 22, 0.7);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 11px;
  min-width: 140px;
  backdrop-filter: blur(8px);
}
.hud-row {
  display: flex;
  justify-content: space-between;
  font-variant-numeric: tabular-nums;
  margin: 2px 0;
}
.hud-row span:last-child { color: var(--accent); font-weight: 700; }

.led-row { margin-top: 4px; border-top: 1px solid var(--line); padding-top: 4px; }
.led-select {
  pointer-events: auto;
  background: var(--bg-3);
  color: var(--text);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 2px 4px;
  font-size: 10px;
  font-family: "JetBrains Mono", monospace;
  max-width: 140px;
}

.legend {
  background: rgba(10, 14, 22, 0.7);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 8px 10px;
  font-size: 11px;
  display: flex;
  align-items: center;
  gap: 12px;
  backdrop-filter: blur(8px);
}
.dot {
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 50%;
  margin-right: 4px;
  vertical-align: middle;
}
.dot.a { background: var(--robot-a); box-shadow: 0 0 6px var(--robot-a); }
.dot.path { background: var(--path); box-shadow: 0 0 6px var(--path); }
.dot.active { background: var(--accent-2); box-shadow: 0 0 6px var(--accent-2); }

/* Log panel */
.log {
  background: #06090f;
  border: 1px solid var(--line);
  border-radius: 6px;
  height: 140px;
  overflow-y: auto;
  padding: 6px 8px;
  font-family: "JetBrains Mono", "Menlo", monospace;
  font-size: 11px;
  line-height: 1.5;
}
.log .row { color: var(--muted); }
.log .row .ts { color: #5b6577; margin-right: 6px; }
.log .row.info span:not(.ts) { color: var(--text); }
.log .row.ok span:not(.ts) { color: var(--ok); }
.log .row.warn span:not(.ts) { color: var(--warn); }
.log .row.err span:not(.ts) { color: var(--bad); }