/* 공통 회로 장면은 밝고 어두운 테마 모두 같은 계기 대비를 유지해요. */
#circuit { display: block; width: 100%; height: auto; background: #111216; color: #eeeef0; }
#circuit text { font-family: system-ui, sans-serif; font-size: var(--circuit-label-size, 22px); }
#scene { width: 100%; height: auto; }
#scene[hidden] { display: none; }
.scene-note { min-height: 1.5em; }
.meters { grid-template-columns: repeat(auto-fit, minmax(105px, 1fr)); }
.choice-row { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 12px; }
.choice-row b { flex-basis: 100%; }
/* 기존 6단계 실험과 같은 조작·기록 배치를 사용해요. */
.scene-head { display: flex; justify-content: space-between; gap: 8px; }
.scene-head b { min-width: 0; overflow-wrap: anywhere; }
.scene-head span { flex: none; }
.param { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px; margin-bottom: 14px; }
.param input { grid-column: 1 / -1; width: 100%; min-width: 0; height: 32px; accent-color: var(--electronics); }
.param output { font-variant-numeric: tabular-nums; }
.actions, .presets { display: flex; flex-wrap: wrap; gap: 8px; }
.presets .btn, .choice-row .toggle { height: auto; min-height: 44px; max-width: 100%; white-space: normal; padding: 8px 12px; }
.meter { min-width: 0; }
.meter b { overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.confirm { display: flex; align-items: flex-start; gap: 8px; }
.confirm input { flex: none; }
.formula b { overflow-wrap: anywhere; }
.record-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; flex: none; }
.data { table-layout: fixed; }
.data th, .data td { overflow-wrap: anywhere; font-size: 12px; padding: 6px 3px; }
@media (max-width: 380px) { .scene-head { flex-wrap: wrap; } }
/* 전기전자·에너지에서만 로드해요. 기존 80개 실험의 작업 공간은 유지해요. */
.lab-workspace #meters .meter span { font-size: 11px; line-height: 1.4; overflow-wrap: anywhere; }
@media (max-width: 700px) {
  /* 장면은 남은 높이로 축소하지 않고 실험대 너비와 원래 비율로 배치해요.
     넘치는 장면·계기는 실험대 안에서 스크롤해 조작·진행 버튼을 유지해요.
     높이 격리를 풀어 스켈레톤도 같은 너비 기준 높이를 확보해요. */
  body :is(.lab-workspace, .lab-skeleton) .bench { overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
  :is(.lab-workspace, .lab-skeleton) .workspace-viewport {
    container-type: inline-size; flex: none; width: 100%; height: auto; min-height: 0; aspect-ratio: var(--scene-ratio);
  }
  body :is(.lab-workspace, .lab-skeleton) .workspace-viewport > :is(#circuit, #scene, .sk-stage) {
    width: 100%; height: auto; max-height: none; aspect-ratio: var(--scene-ratio);
  }
  .lab-workspace #meters { grid-template-columns: repeat(2, minmax(0, 1fr)); max-height: none; overflow: visible; }
  .lab-workspace #meters .meter { min-height: 42px; padding: 5px 8px; border: 0; }
  .lab-workspace #meters .meter:nth-child(odd) { border-right: 1px solid var(--line); }
  .lab-workspace #meters .meter:nth-child(n+3) { border-top: 1px solid var(--line); }
  .lab-workspace #meters .meter span { font-size: 10px; }
  .lab-workspace #meters .meter b { font-size: 12px; }
}