/* =========================================================
   Chapter 06 — E-bike labs (배터리 팩 설계기) · namespaced .elab-*
   Builds on .eb-pack drawing styles in ebike.css
   ========================================================= */
.elab-ctl { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 4px 28px; align-items: start; }
.elab-ctl .elab-cells, .elab-ctl .elab-presets { grid-column: 1 / -1; }
@media (max-width: 680px) { .elab-ctl { grid-template-columns: minmax(0, 1fr); } }
.elab-field { margin-bottom: 12px; }
.elab-presets { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-bottom: 14px; }
.elab-presets > span { font-size: .8rem; font-weight: 700; color: var(--muted); margin-right: 4px; }
.elab-presets .btn { padding: 6px 12px; font-size: .8rem; }

.elab-stage {
  background: radial-gradient(circle at 1px 1px, var(--line) 1px, transparent 0) 0 0 / 22px 22px, var(--surface-2);
  border: 1px solid var(--line); border-radius: var(--radius); padding: 10px; margin-top: 4px; min-width: 0;
}
.elab-svg .cell { transition: fill .2s, r .3s; }
.elab-svg .elab-neg { fill: none; stroke: var(--teal); stroke-width: 1.4; }
.elab-svg .group:hover .elab-neg, .elab-svg .group:focus .elab-neg { stroke: var(--surface); }
.elab-svg .elab-strip-under { fill: none; stroke: var(--gold); stroke-width: 3; stroke-dasharray: 4 3; opacity: .85; }
.elab-svg .elab-bal { fill: none; stroke: var(--violet); stroke-width: 1.4; }
.elab-svg .elab-bal.bus { stroke-linejoin: round; }
.elab-svg .elab-hit { fill: none; stroke: transparent; stroke-width: 14; }
.elab-svg [data-tip]:hover .strip, .elab-svg [data-tip]:focus .strip { fill: var(--accent); opacity: 1; }
.elab-svg [data-tip]:hover .elab-strip-under, .elab-svg [data-tip]:focus .elab-strip-under { stroke: var(--accent); }
.elab-svg [data-tip]:hover .elab-bal, .elab-svg [data-tip]:focus .elab-bal { stroke: var(--accent); }
.elab-svg [data-tip]:focus-visible { outline: none; }
.elab-svg .group:focus-visible .cell { stroke: var(--accent); stroke-width: 2.5; }
.elab-svg .mono.strong { fill: var(--ink); font-weight: 700; font-size: 12px; }
.elab-cap { font-size: .8rem; color: var(--muted); margin: 6px 4px 0; line-height: 1.5; }

.elab-outs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: color-mix(in srgb, var(--bg) 20%, transparent); border-radius: var(--radius); overflow: hidden; margin-top: 16px; }
@media (max-width: 640px) { .elab-outs { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.elab-out { background: var(--ink); color: var(--bg); padding: 14px 16px; min-width: 0; }
.elab-out .lab { display: block; font-size: .72rem; opacity: .65; font-family: var(--mono); letter-spacing: .04em; }
.elab-out b { display: block; font-family: var(--serif); font-weight: 800; font-size: 1.55rem; line-height: 1.15; margin: 2px 0; overflow-wrap: anywhere; }
.elab-out small { display: block; font-size: .74rem; opacity: .75; line-height: 1.4; }
.elab-out[data-state="ok"] { box-shadow: inset 5px 0 0 var(--green); }
.elab-out[data-state="mid"] { box-shadow: inset 5px 0 0 var(--gold); }
.elab-out[data-state="bad"] { box-shadow: inset 5px 0 0 var(--red); }
@media (max-width: 640px) { .elab-out b { font-size: 1.25rem; } .elab-out { padding: 12px; } }

.elab-explain { margin-top: 16px; padding: 16px 18px; border-radius: var(--radius-sm); background: var(--bg-2); font-size: .9rem; line-height: 1.65; color: var(--ink-2); }
.elab-explain p { margin: 0 0 .6em; }
.elab-explain ul { margin: 0 0 .6em; padding-left: 1.2em; }
.elab-explain li { margin-bottom: .3em; }
.elab-explain b { color: var(--ink); }
.elab-load { padding: 0 4px; border-radius: 4px; }
.elab-load.ok { background: var(--green-soft); }
.elab-load.mid { background: var(--gold-soft); }
.elab-load.bad { background: var(--red-soft); color: var(--red) !important; }
.elab-air { margin: 0 !important; font-size: .84rem; color: var(--ink-2); }
.elab-fine { font-size: .78rem; color: var(--muted); margin: 10px 0 0; line-height: 1.55; }