/* 식품 실험 공통 스타일: 분야 색은 --food 토큰만 참조하고 지시약 색은 호출자가 그대로 써요. */
.food-svg{width:100%;max-width:320px;height:auto;display:block}
.food-svg .f-body{fill:#1b1c22;stroke:#b8bac8;stroke-width:2}
.food-svg .f-line{stroke:#b8bac8;stroke-width:2;fill:none}
.food-svg .f-glass{fill:rgba(184,186,200,.1);stroke:#b8bac8;stroke-width:2}
.food-svg .f-liquid{fill:#89d4d0;opacity:.7}
.food-svg .f-screen{fill:#0d1a1a;stroke:var(--food,#89d4d0);stroke-width:2}
.food-svg .f-num{fill:var(--food,#89d4d0);font:700 16px ui-monospace,monospace}
.food-svg .f-small{fill:#b8bac8;font:12px system-ui,sans-serif}
#seedbar{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:8px 0}
/* 문자 폭에 좌우 여백·테두리·스피너 예상 폭 24px를 더한다. */
#seedbar input{width:max(9em,calc(10ch + 2 * var(--lab-space-3) + 2px + var(--lab-number-spinner-space)));min-height:var(--lab-control-size)}
#seedbar .btn{min-height:44px}
.food-readout{display:grid;gap:4px;margin:8px 0}
.food-readout dt{font-size:.85rem;opacity:.8}
.food-readout dd{margin:0;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.food-stage canvas{max-width:100%;height:auto}
@media (max-width:480px){.food-stage .food-svg{max-width:100%}.food-readout{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){.food-svg *{transition:none!important;animation:none!important}}
.bench-row{display:flex;flex-wrap:wrap;gap:12px;align-items:flex-end;justify-content:center}
.bench-row .food-svg{flex:0 1 220px;width:220px;height:auto;max-width:100%}
.bench-row .food-burette{flex-basis:196px;width:196px}
.controls fieldset{border:0;border-radius:0;margin:0 0 var(--lab-space-6);padding:0;display:flex;flex-wrap:wrap;gap:var(--lab-space-2);align-items:center}
.controls legend{padding:0;margin-bottom:var(--lab-space-2);font-weight:700}
.controls label{display:inline-flex;align-items:center;gap:var(--lab-space-2);min-height:var(--lab-control-size)}
.controls input[type=number]{width:max(6.5em,calc(6ch + 2 * var(--lab-space-3) + 2px + var(--lab-number-spinner-space)));min-height:var(--lab-control-size)}
.controls .btn{min-height:var(--lab-control-size)}
.food-lab .lab-grid>*{min-width:0;max-width:100%}
.food-lab fieldset{min-inline-size:0;max-width:100%}
.food-lab legend{max-width:100%;overflow-wrap:anywhere}
.food-lab .controls label{flex-wrap:wrap;max-width:100%}
.food-lab .controls input,.food-lab .controls select{max-width:100%;min-width:0}
.food-lab .btn{white-space:normal;overflow-wrap:anywhere;max-width:100%}
.food-lab :is(button,input,select,a,[tabindex]):focus-visible{outline:3px solid var(--food,#89d4d0);outline-offset:3px}
.food-lab .table-wrap{max-width:100%}
.food-lab .step-nav{flex-wrap:wrap}
@media(max-width:480px){
  .food-lab .bench-row{flex-direction:column;align-items:center}
  .food-lab .bench-row .food-svg{flex:0 1 auto;max-width:100%}
}
/* 여러 장비와 판독 수치를 하나의 안정된 작업 공간에 유지한다. */
.food-scene{flex:none;width:100%;max-width:760px;max-height:100%;padding:12px;box-sizing:border-box;overflow:auto}
.food-scene .bench-row{justify-content:center;min-height:180px}
.food-scene .food-readout{font-size:12px;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px 12px}
.food-scene .food-readout dd{margin:0}
.food-lab #seedbar{padding:8px;display:flex;flex-wrap:wrap;gap:6px}

/* 대표 미리보기 SVG에만 적용한다. 일반 장면·다른 분야에는 영향을 주지 않는다. */
.workspace-viewport:has(> [data-food-preview]) > :not([data-food-preview]){display:none!important}
.food-preview{display:block;flex:none;max-width:none}
.food-preview .axis{stroke:#9aa1ab;stroke-width:1.5}
.food-preview .grid{stroke:#b8bac8;stroke-opacity:.16}
.food-preview .tick{font:16px system-ui,sans-serif;fill:#b8bac8}
.food-preview .label{font:16px system-ui,sans-serif;fill:#b8bac8}

/* 그룹은 범례와 여백으로 구분하고 중첩 지시약도 독립 행으로 읽는다. */
.food-lab .controls fieldset:last-child{margin-bottom:0}
.food-lab .controls fieldset fieldset{flex-basis:100%;margin-block:var(--lab-space-4)}
.food-lab .controls select{min-height:var(--lab-control-size);font-size:var(--lab-font-input)}

/* 논리 장비·판독값의 자연 높이가 바깥 aspect-ratio 상자를 늘리지 않게 한다.
   절대 배치한 flex 자식은 가운데 정렬하고 실제 내용 전체를 JS zoom으로 contain한다. */
.food-lab.lab-workspace .workspace-viewport > .food-scene { position: relative; display: flex; align-items: center; justify-content: center; min-height: 0; padding: 0; overflow: visible; }
.food-scene-content { position: absolute; flex: none; width: 760px; min-height: 440px; padding: 12px; box-sizing: border-box; }
.food-scene-content .bench-row { flex-direction: row; align-items: flex-end; }
.food-scene-content .bench-row .food-svg { flex: 0 1 220px; max-width: 220px; }
.food-scene-content .food-readout dt { font: inherit; }