/* 볼트 암페어 변환기 전용 CSS (2026-10-20). 회로 계기판: 계기판(모드·역률·네 칸·계산식·결과 줄) | 회로도 → 옴의 법칙 원 | 전력 삼각형 → 전압별 전류 막대 → 자주 쓰는 예.
   폭(작업면 컨테이너 vac): 760 이상 [계기판 | 회로도] [원 | 막대] 예, 540~759 계기판 / [회로도 | 원] / 막대 / 예, 540 미만 한 열.
   움직임(R45): 전류 점(직류 흐름·교류 흔들림·3상 어긋남), 부하 밝기, 삼각형 이어 그리기(JS), 막대 폭. 동작 줄이기면 멈춤. 공용 부품 assets/v2.css */
.vac-work{container:vac / inline-size}
.vac-work .v2-status:empty{display:none}
.vac-grid{display:grid;grid-template-columns:minmax(0,1fr);grid-template-areas:"board" "circ" "law" "volts" "ex"}
.vac-head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:2px 10px;margin:0 0 8px}
.vac-headhint{font-family:var(--sans);font-size:12px;color:var(--muted);overflow-wrap:anywhere}

/* 계기판: 마지막에 넣은 두 칸이 기준(진한 테두리), 나머지는 계산 칸(큰 숫자) */
.vac-board{grid-area:board;min-width:0;padding:14px 18px 14px;border-bottom:1px solid var(--soft)}
.vac-bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 14px;min-height:var(--v2-ctl,42px);margin:0 0 12px}
.vac-pf{display:flex;align-items:center;gap:8px}
.vac-pf[hidden]{display:none}
.vac-pf .v2-label{white-space:nowrap}
.vac-pf .v2-input{width:84px}
.vac-pf.is-invalid .v2-input{border-color:var(--accent)}
.vac-cells{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 12px}
.vac-cell > label{display:flex;justify-content:space-between;align-items:baseline;gap:6px}
.vac-cell > label em{font-style:normal;font-weight:600;font-size:10.5px;letter-spacing:.04em;color:var(--muted);margin:0}
.vac-cell .v2-input select{flex:0 0 auto;max-width:74px;height:calc(var(--v2-ctl) - 2px);padding:0 4px 0 7px;border:0;border-left:1px solid var(--soft);border-radius:0;background:var(--wash);font-family:var(--sans);font-size:12px;font-weight:650;color:var(--muted)}
.vac-cell .v2-input input{font-size:16px}
.vac-cell.is-src .v2-input{border-color:var(--ink)}
.vac-cell.is-src > label em{color:var(--ink)}
.vac-cell.is-calc .v2-input{background:color-mix(in srgb, var(--wash) 55%, var(--paper))}
.vac-cell.is-calc .v2-input input{font-size:19px;font-weight:800}
.vac-how{min-height:16px;margin:4px 0 0;font-family:var(--mono);font-size:11px;line-height:1.45;color:var(--muted);overflow-wrap:anywhere}
.vac-msg{margin:12px 0 0;font-family:var(--sans);font-size:13.5px;font-weight:600;color:var(--muted)}
.vac-msg.is-error{color:var(--accent)}
.vac-eqs{list-style:none;margin:12px 0 0;padding:0;transition:opacity var(--ease)}
.vac-eqs[hidden]{display:none}
.vac-eqs li{padding:5px 0;font-family:var(--sans);font-size:13.5px;line-height:1.55;color:var(--ink);font-variant-numeric:tabular-nums lining-nums;overflow-wrap:anywhere}
.vac-eqs li:empty{display:none}
.vac-eqs li > span:first-child{font-weight:650;color:var(--muted)}
.vac-eqs code{font-family:var(--mono);font-size:12px;color:var(--ink)}
.vac-eqs .vac-eqv{color:var(--muted)}
.vac-eqs b{font-weight:800;white-space:nowrap}
.vac-rows{margin:6px 0 0;transition:opacity var(--ease)}
.vac-rows li{flex-wrap:wrap;gap:2px 12px;padding:6px 0;font-size:13px}
.vac-rows li[hidden]{display:none}
.vac-rows li b{min-width:0;margin-left:auto;text-align:right}
.vac-board.is-pend .vac-eqs,.vac-board.is-pend .vac-rows{opacity:.45}
.vac-acts{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:12px}

/* 회로도: 전류 점(accent)과 부하 빛이 이 화면의 accent 한 곳 */
.vac-circ{grid-area:circ;display:flex;flex-direction:column;min-width:0;margin:0;padding:14px 18px 12px;border-bottom:1px solid var(--soft)}
.vac-circ svg{display:block;width:100%;max-width:340px;height:auto;margin:auto;overflow:visible}
.vac-wire{fill:none;stroke:var(--muted);stroke-width:2;stroke-linejoin:round}
.vac-dots{fill:none;stroke:var(--accent);stroke-width:6;stroke-linecap:round;stroke-dasharray:0 20;animation:vacFlow var(--vac-dur,1s) linear infinite}
@keyframes vacFlow{from{stroke-dashoffset:20}to{stroke-dashoffset:0}}
@keyframes vacSway{from{stroke-dashoffset:-6}to{stroke-dashoffset:6}}
.vac-circ:not([data-m="dc"]) .vac-dots{animation-name:vacSway;animation-timing-function:ease-in-out;animation-direction:alternate}
.vac-dots--1{animation-delay:calc(var(--vac-dur,1s) * -1.3333)}
.vac-dots--2{animation-delay:calc(var(--vac-dur,1s) * -2.6667)}
.vac-circ svg.is-off .vac-dots{animation:none;opacity:.2}
.vac-glow{opacity:0;transition:opacity .5s ease}
.vac-g0{stop-color:var(--accent);stop-opacity:.5}
.vac-g1{stop-color:var(--accent);stop-opacity:0}
.vac-src circle,.vac-meter circle,.vac-loadbg,.vac-blk{fill:var(--card);stroke:var(--ink);stroke-width:1.6}
.vac-loadbg{stroke:none}
.vac-src path{fill:none;stroke:var(--ink);stroke-width:1.8;stroke-linecap:round}
.vac-zig{fill:none;stroke:var(--ink);stroke-width:2;stroke-linejoin:round}
.vac-box{fill:var(--card);stroke:var(--ink);stroke-width:1.8}
.vac-meter text,.vac-blkt{font-family:var(--sans);font-size:14px;font-weight:800;fill:var(--ink);text-anchor:middle;dominant-baseline:central}
.vac-blkt{font-size:16px}
.vac-ln{font-family:var(--mono);font-size:10.5px;font-weight:700;fill:var(--muted)}
.vac-circ[data-m="tp"] .vac-one,.vac-circ:not([data-m="tp"]) .vac-three{display:none}
.vac-circ[data-m="dc"] .vac-acmark,.vac-circ:not([data-m="dc"]) .vac-dcmark{display:none}
.vac-circ[data-m="dc"] .vac-box,.vac-circ:not([data-m="dc"]) .vac-zig{display:none}
.vac-rd{font-family:var(--sans);font-size:13.5px;font-weight:800;fill:var(--ink);text-anchor:middle;dominant-baseline:central;font-variant-numeric:tabular-nums lining-nums}
#vacRdV{text-anchor:start}
.vac-rd--r{text-anchor:end}
.vac-rd--s{font-size:12px;font-weight:650;fill:var(--muted)}

/* 옴의 법칙 원 · 전력 삼각형 */
.vac-law{grid-area:law;display:flex;flex-direction:column;min-width:0;padding:14px 18px 12px;border-bottom:1px solid var(--soft)}
.vac-wheel{display:block;width:100%;max-width:340px;height:auto;margin:auto}
.vac-law.is-tri .vac-wheel,.vac-law:not(.is-tri) .vac-tri{display:none}
.vac-wq{fill:var(--wash);stroke:var(--card);stroke-width:2;transition:fill var(--ease)}
.vac-wq.is-in{fill:var(--fill)}
.vac-wqt{font-family:var(--sans);font-size:23px;font-weight:850;fill:var(--ink);text-anchor:middle;dominant-baseline:central}
.vac-wqu{font-family:var(--sans);font-size:11px;font-weight:650;fill:var(--muted);text-anchor:middle;dominant-baseline:central}
.vac-wqt.is-in,.vac-wqu.is-in{fill:var(--on-fill)}
.vac-wf{fill:var(--paper);stroke:var(--card);stroke-width:2;transition:fill var(--ease)}
.vac-wf.is-use{fill:color-mix(in srgb, var(--ink) 14%, var(--paper))}
.vac-wft{font-family:var(--mono);font-size:11px;font-weight:600;fill:var(--muted);text-anchor:middle;dominant-baseline:central}
.vac-wft.is-use{font-weight:800;fill:var(--ink)}
.vac-tri{display:flex;flex-direction:column;align-items:center;gap:10px;margin:auto 0;width:100%}
.vac-tri svg{display:block;width:100%;max-width:340px;height:auto;overflow:visible}
.vac-tri svg.is-off{opacity:.35}
.vac-tri-fill{fill:color-mix(in srgb, var(--ink) 7%, transparent)}
.vac-tri-p{stroke:var(--ink);stroke-width:3;stroke-linecap:round}
.vac-tri-q{stroke:var(--muted);stroke-width:2;stroke-dasharray:4 3}
.vac-tri-s{stroke:var(--ink);stroke-width:2;stroke-linecap:round}
.vac-tri-arc{fill:none;stroke:var(--muted);stroke-width:1.4}
.vac-tl{font-family:var(--sans);font-size:12.5px;font-weight:750;fill:var(--ink);font-variant-numeric:tabular-nums lining-nums}
.vac-tpf{font-family:var(--sans);font-size:17px;font-weight:850;fill:var(--ink);text-anchor:end}
.vac-tpf2{font-family:var(--sans);font-size:11.5px;font-weight:600;fill:var(--muted);text-anchor:end;font-variant-numeric:tabular-nums lining-nums}
.vac-tl--phi{font-size:11.5px;font-weight:650;fill:var(--muted)}
.vac-pfs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;width:100%}
.vac-pfs button{display:flex;flex-direction:column;align-items:center;gap:1px;min-width:0;padding:6px 6px 7px;border:1px solid var(--soft);border-radius:var(--radius);background:var(--paper);color:var(--ink);font:inherit;cursor:pointer;transition:background var(--ease),border-color var(--ease)}
.vac-pfs button:hover{background:var(--wash)}
.vac-pfs button[aria-pressed="true"]{background:var(--fill);border-color:var(--fill);color:var(--on-fill)}
.vac-pfs b{font-family:var(--sans);font-size:13px;font-weight:800;font-variant-numeric:tabular-nums lining-nums}
.vac-pfs small{font-family:var(--sans);font-size:11.5px;font-weight:600;opacity:.75;white-space:nowrap;font-variant-numeric:tabular-nums lining-nums}

/* 같은 전력, 다른 전압: 로그 눈금 막대(누르면 그 전압이 기준) */
.vac-volts{grid-area:volts;min-width:0;padding:14px 18px 12px;border-bottom:1px solid var(--soft)}
.vac-vb{display:flex;flex-direction:column;list-style:none;margin:0;padding:0}
.vac-vb li > button,.vac-vyou,.vac-axis{display:grid;grid-template-columns:minmax(84px,7.2em) minmax(0,1fr) 68px;align-items:center;gap:10px}
.vac-vb li > button{width:100%;padding:4px 6px;border:0;border-radius:var(--radius);background:none;text-align:left;color:var(--ink);font:inherit;cursor:pointer;transition:background var(--ease)}
.vac-vb li > button:hover:not(:disabled){background:var(--wash)}
.vac-vb li > button:disabled{cursor:default}
.vac-vyou{padding:4px 6px;border-radius:var(--radius);background:var(--wash)}
.vac-vyou[hidden]{display:none}
.vac-vn{min-width:0;line-height:1.25}
.vac-vn b{display:block;font-family:var(--sans);font-size:12.5px;font-weight:750;font-variant-numeric:tabular-nums lining-nums}
.vac-vn small{display:block;font-family:var(--sans);font-size:11px;color:var(--muted);overflow-wrap:anywhere}
.vac-vbar{position:relative;height:10px;border-radius:5px;background:var(--soft);overflow:hidden}
.vac-vbar i{display:block;width:0;height:100%;border-radius:5px;background:color-mix(in srgb, var(--ink) 45%, var(--card));transition:width .6s cubic-bezier(.2,.75,.25,1)}
.vac-vb button[aria-pressed="true"] .vac-vbar i,.vac-vyou .vac-vbar i{background:var(--ink)}
.vac-vb button[aria-pressed="true"]{background:var(--wash)}
.vac-vb em{font-style:normal;font-family:var(--sans);font-size:12.5px;font-weight:750;text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums lining-nums}
.vac-axis{margin:4px 0 0;padding:0 6px}
.vac-ticks{display:flex;justify-content:space-between;gap:4px;font-family:var(--mono);font-size:10px;color:var(--muted);white-space:nowrap}

/* 자주 쓰는 예 */
.vac-ex{grid-area:ex;min-width:0;padding:14px 18px 16px}
.vac-exs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;list-style:none;margin:0;padding:0}
.vac-exs button{display:flex;flex-direction:column;align-items:flex-start;justify-content:space-between;gap:4px;width:100%;height:100%;padding:8px 10px;border:1px solid var(--soft);border-radius:var(--radius);background:var(--paper);text-align:left;color:var(--ink);font:inherit;cursor:pointer;transition:border-color var(--ease),background var(--ease)}
.vac-exs button:hover{background:var(--wash)}
.vac-exs button[aria-pressed="true"]{border-color:var(--ink)}
.vac-exs span{min-width:0;max-width:100%}
.vac-exs b{display:block;font-family:var(--sans);font-size:13px;font-weight:750;font-variant-numeric:tabular-nums lining-nums}
.vac-exs small{display:block;font-family:var(--sans);font-size:11.5px;color:var(--muted);overflow-wrap:anywhere}
.vac-exs em{font-style:normal;font-family:var(--sans);font-size:13px;font-weight:800;white-space:nowrap;font-variant-numeric:tabular-nums lining-nums}

@container vac (min-width:540px){
  .vac-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-areas:"board board" "circ law" "volts volts" "ex ex"}
  .vac-circ{border-right:1px solid var(--soft)}
}
@container vac (min-width:760px){
  .vac-grid{grid-template-columns:minmax(0,1.12fr) minmax(0,1fr);grid-template-areas:"board circ" "law volts" "ex ex"}
  .vac-board{border-right:1px solid var(--soft)}
  .vac-circ{border-right:0}
  .vac-law{border-right:1px solid var(--soft)}
}
@container vac (max-width:539px){ .vac-exs{grid-template-columns:repeat(2,minmax(0,1fr))} }
@container vac (max-width:339px){ .vac-exs{grid-template-columns:minmax(0,1fr)} }
@container v2in (max-width:379px){ /* 반쪽 칸(150px 안팎)에서는 계산 값 '1,666.67'이 잘렸다 → 한 열 '라벨 | 입력' */
  .vac-cells{grid-template-columns:minmax(0,1fr);gap:8px}
  .vac-cell{display:grid;grid-template-columns:5.6em minmax(0,1fr);column-gap:10px;align-items:center}
  .vac-cell > label{flex-direction:column;align-items:flex-start;gap:0;margin:0}
  .vac-cell .vac-how{grid-column:2;margin-top:2px}
  .vac-cell .vac-how:empty{display:none}
}
@media (prefers-reduced-motion:reduce){
  .vac-dots{animation:none}
  .vac-glow,.vac-vbar i,.vac-wq,.vac-wf{transition:none}
}