/* 에너지 단위 변환기 전용 CSS (2026-10-12). 2패널 계산형(단위 변환기와 같은 골격) + 에너지 크기 사다리 + 모든 단위. 공용 부품은 assets/v2.css */
.ec-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr)}
.ec-in{padding:16px 18px 18px;min-width:0}
.ec-seg{margin-top:6px}
.ec-fields{display:grid;grid-template-columns:minmax(0,1fr);gap:12px;margin-top:12px}
.ec-pair{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px}
.ec-pbox{display:grid;grid-template-columns:minmax(0,1fr);gap:12px}
.ec-pbox[hidden],.ec-pair[hidden]{display:none}
.ec-select{display:block;width:100%;max-width:100%;height:var(--v2-ctl,42px);margin-top:5px;padding:0 8px;border:1px solid var(--line);border-radius:var(--radius);background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:14px;font-weight:600;text-overflow:ellipsis}
.ec-select:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.ec-chips{margin-top:-4px}
.ec-chips button{height:auto;min-height:32px;padding:4px 10px;white-space:nowrap}
.ec-help{margin:12px 0 0;font-family:var(--sans);font-size:12.5px;line-height:1.6;color:var(--muted)}
.ec-acts{display:flex;gap:6px;flex-wrap:wrap;align-items:center;margin-top:14px}
.ec-acts .v2-btn[hidden]{display:none}
.ec-out{padding:16px 18px 18px;min-width:0;border-left:1px solid var(--soft);display:flex;flex-direction:column;container:ecout / inline-size}
.ec-out .v2-label{display:block;margin-bottom:6px;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.ec-out .v2-big{flex-wrap:wrap}
.ec-out .v2-big:not(.is-empty) span{white-space:nowrap;font-size:clamp(20px, calc(100cqi / (var(--ec-len, 6) * .62)), 1em)}
.ec-out .v2-big.is-empty span{font-size:18px;font-weight:600;color:var(--muted)}
.ec-out .v2-formula{white-space:normal;overflow-wrap:anywhere;line-height:1.6;margin-bottom:14px}
.ec-rows{margin-top:14px}
.ec-rows li b{white-space:normal;text-align:right;overflow-wrap:anywhere}
.ec-foot{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:auto;padding-top:12px;border-top:1px solid var(--soft)}
.ec-foot .v2-status{margin-left:auto}
.ec-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;margin:0 0 10px}
.ec-headhint{font-family:var(--sans);font-size:12px;color:var(--muted);overflow-wrap:anywhere}
.ec-ladbox,.ec-allbox{padding:14px 18px 18px;border-top:1px solid var(--soft);min-width:0}
.ec-ladbox{container:eclad / inline-size;--ec-name:clamp(150px, 30%, 240px);--ec-cnt:clamp(110px, 22%, 170px)}
/* 사다리: 이름 | 로그 눈금 트랙 | 개수. 눈금 글자는 트랙 열에만 */
.ec-axis{display:grid;grid-template-columns:var(--ec-name) minmax(0,1fr) var(--ec-cnt);gap:0 12px;height:18px}
.ec-axisin{grid-column:2;position:relative;font-family:var(--sans);font-size:11px;color:var(--muted);font-variant-numeric:tabular-nums}
.ec-axisin span{position:absolute;top:0;transform:translateX(-50%);white-space:nowrap}
.ec-axisin span:first-child{transform:none}
.ec-axisin span:last-child{transform:translateX(-100%)}
.ec-axisin span.is-odd{width:1px;height:5px;top:11px;background:var(--line);font-size:0} /* 칸이 좁아 글자는 100배마다, 사이 칸은 눈금선만 */
.ec-lad{list-style:none;margin:0;padding:0}
.ec-lad li{display:grid;grid-template-columns:var(--ec-name) minmax(0,1fr) var(--ec-cnt);gap:2px 12px;align-items:center;padding:7px 0;border-bottom:1px solid var(--soft)}
.ec-lname{min-width:0;font-family:var(--sans)}
.ec-lname b{display:block;font-size:13px;font-weight:700;color:var(--ink)}
.ec-lname small{display:block;margin-top:1px;font-size:11.5px;color:var(--muted);overflow-wrap:anywhere}
.ec-track{position:relative;height:18px;background:linear-gradient(var(--soft),var(--soft)) 0 50% / 100% 2px no-repeat}
.ec-dot{position:absolute;top:50%;width:11px;height:11px;margin:-5.5px 0 0 -5.5px;border-radius:50%;background:var(--paper);border:2px solid var(--line)}
.ec-lad li.is-below .ec-dot{border-color:var(--ink);background:var(--ink)}
.ec-mark{position:absolute;top:-4px;bottom:-4px;width:2px;margin-left:-1px;background:var(--accent);transition:left .5s var(--ease,ease)}
.ec-fill{position:absolute;left:0;top:50%;height:8px;margin-top:-4px;border-radius:4px;background:var(--ink);transition:width .5s var(--ease,ease)}
.ec-lad.is-off .ec-mark,.ec-lad.is-off .ec-fill{opacity:0}
.ec-cnt{font-family:var(--sans);font-size:12.5px;font-weight:600;color:var(--ink);text-align:right;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.ec-lad li.is-now .ec-lname small{font-size:12.5px;font-weight:700;color:var(--ink)}
.ec-lad li.is-now .ec-cnt{font-weight:500;color:var(--muted);font-size:11.5px}
.ec-ladnote{margin:10px 0 0;font-family:var(--sans);font-size:12px;line-height:1.6;color:var(--muted)}
.ec-allbox{container:ecall / inline-size}
.ec-all{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px 18px}
.ec-group ul{list-style:none;margin:0;padding:0}
.ec-gname{margin:6px 0 2px;font-family:var(--sans);font-size:11.5px;font-weight:700;color:var(--muted)}
.ec-all button{display:flex;width:100%;justify-content:space-between;align-items:baseline;gap:10px;min-height:36px;padding:7px 8px;border:0;border-bottom:1px solid var(--soft);border-left:2px solid transparent;background:none;color:var(--ink);font-family:var(--sans);font-size:13px;text-align:left;cursor:pointer}
.ec-all button span{min-width:0;color:var(--muted)}
.ec-all button b{font-weight:700;font-variant-numeric:tabular-nums;text-align:right;overflow-wrap:anywhere}
.ec-all button b small{font-weight:600;color:var(--muted);white-space:nowrap}
.ec-all button.is-from span{color:var(--ink);font-weight:700}
.ec-all button:hover{background:var(--wash)}
.ec-all button:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.ec-all button[aria-pressed="true"]{border-left-color:var(--accent);background:var(--wash)}
.ec-all button[aria-pressed="true"] span{color:var(--ink);font-weight:700}
@media (max-width:720px){
  .ec-grid{grid-template-columns:minmax(0,1fr)}
  .ec-out{order:-1;border-left:0;border-bottom:1px solid var(--soft)}
}
@media (max-width:420px){
  .ec-in,.ec-out,.ec-ladbox,.ec-allbox{padding-left:12px;padding-right:12px}
}
@container v2in (max-width:340px){ .ec-pair{grid-template-columns:minmax(0,1fr)} } /* 값 칸 뒤 'kcal(th)'·'Btu/h' 표시가 길어 1181~1200px 화면의 반쪽 칸에서 숫자 자리가 26px로 줄었다 → 한 열 */
@container ecall (max-width:600px){ .ec-all{grid-template-columns:minmax(0,1fr)} }
@container eclad (max-width:560px){ /* 좁으면 이름·개수 한 줄, 트랙은 그 아래 전체 폭 */
  .ec-axis{grid-template-columns:minmax(0,1fr)}
  .ec-axisin{grid-column:1}
  .ec-lad li{grid-template-columns:minmax(0,1fr) auto}
  .ec-lad li .ec-track{grid-column:1 / -1;grid-row:2}
  .ec-lad li .ec-cnt{grid-column:2;grid-row:1}
}
@media (prefers-reduced-motion:reduce){ .ec-mark,.ec-fill{transition:none} }