/* 옴의 법칙 전용: 회로 실험대·부품함·저항 선택 */
.bench {
  border: 1px solid var(--line); border-radius: var(--radius); background:
    radial-gradient(circle, #e9ebef 1px, transparent 1.2px) 0 0 / 20px 20px, #fcfcfd;
  padding: 8px;
}
#board { display: block; width: 100%; height: auto; touch-action: none; user-select: none; }

/* board elements */
.slot rect { fill: rgba(255,255,255,.6); stroke: #c9ced6; stroke-width: 2; stroke-dasharray: 8 6; }
.slot text { fill: var(--text-mute); font-size: 15px; font-weight: 600; text-anchor: middle; }
.slot.target rect { stroke: var(--physics); fill: var(--physics-soft); animation: pulse 1.2s ease-in-out infinite; }
.slot.target text { fill: var(--physics); }
.slot.filled { display: none; }
@keyframes pulse { 50% { stroke-opacity: .35; } }
.part-img.clickable { cursor: pointer; }
.cable { fill: none; stroke-width: 5; stroke-linecap: round; }
.cable.red { stroke: #e5484d; }
.cable.black { stroke: #2b2f36; }
.cable-end { stroke: none; }
.flow { fill: none; stroke: #ffc53d; stroke-width: 4; stroke-linecap: round; stroke-dasharray: 0.1 16; pointer-events: none; }
.lcd { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 19px; font-weight: 600; text-anchor: end; fill: #7dffb3; }
.lcd.off { fill: #3b4250; }
.hint-text { font-size: 14px; fill: var(--text-mute); text-anchor: middle; }

.tray { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; }
.chip {
  display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 10px 6px 8px;
  border: 1px solid var(--line); border-radius: 14px; background: var(--bg);
  font: inherit; font-size: 13px; font-weight: 600; color: var(--text-sub); cursor: grab; touch-action: none;
}
.chip img { width: 100%; max-width: 88px; aspect-ratio: 4 / 3; pointer-events: none; }
.chip:disabled { opacity: .35; cursor: not-allowed; }
.chip.active { border-color: var(--physics); box-shadow: 0 0 0 3px var(--physics-soft); color: var(--text); }
.chip.selected { background: var(--physics-soft); }
.chip.used { visibility: hidden; }

.res-choice { display: flex; gap: 8px; flex-wrap: wrap; }
.res-choice button {
  display: flex; align-items: center; gap: 6px; height: 40px; padding: 0 14px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--bg); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer;
}
.res-choice button[aria-pressed=true] { border-color: var(--text); box-shadow: inset 0 0 0 1px var(--text); }
@media (max-width: 600px) {
  .tray { grid-template-columns: repeat(3, 1fr); }
}