/* Roberin The New — 대한민국 전기요금 계산기 20260908h
 * compactContainerLock (2026-09-08 사용자 지시 "컨테이너는 지금 너무 늘려서 만드는데 컴팩트하게"):
 *   밴드 6개(입력 bar / notice / metrics / split / actions / disclaimer)만 두고,
 *   headline 을 metrics 첫 셀로 흡수, 표와 게이지를 같은 세로 축 위 2-up 으로 묶는다.
 * 세로 축 잠금 (우려 #42 / 추가 필수 확인 #22):
 *   bar · metrics · split · actions 는 전부 repeat(4, minmax(0,1fr)) + gap 10px.
 */
body.tn-elc-page-body .cs-custom-content-post-before{display:none!important}
body.tn-elc-page-body .tn-elc-page{
  --elc-ink:#1a1208;
  --elc-muted:#5a4a30;
  --elc-line:#b8a888;
  --elc-soft:#ddd4be;
  --elc-paper:#faf6ee;
  --elc-surface:#fffdf7;
  --elc-wash:#f5efdf;
  --elc-accent:#c44a00;
  --elc-primary:#1a1208;
  --elc-primary-hover:#c44a00;
  --elc-primary-text:#fff7e8;
  --elc-secondary:#ede6d4;
  --elc-secondary-hover:#dfd4bb;
  --elc-danger:#7c2115;
  --elc-tier1:#2f7d54;
  --elc-tier2:#8a6d3b;
  --elc-tier3:#c44a00;
  --elc-tier4:#7c2115;
  --elc-num-font:-apple-system,BlinkMacSystemFont,"Pretendard","Segoe UI",system-ui,sans-serif;
  width:min(1180px,100%)!important;
  max-width:1180px!important;
  margin:0 auto 56px!important;
  color:var(--elc-ink)!important;
  -webkit-text-fill-color:currentColor!important;
  font-family:ui-serif,Georgia,"Times New Roman","Noto Serif KR",serif!important;
  font-size:15px!important;
  line-height:1.58!important;
}

/* --- kill list: 전역 CSS 침범 선제 차단 --- */
body.tn-elc-page-body .tn-elc-page :is(.tn-elc-tool,.tn-elc-tool *,.tn-elc-tool *::before,.tn-elc-tool *::after){box-sizing:border-box!important;min-width:0!important}
/* p 에는 padding:0 을 주지 않는다 (추가 필수 확인 #3).
   dl/dd/dt 에도 padding:0 을 주지 않는다 — (0,2,1) 리셋이 같은 파일의 metric/fact 카드
   padding (0,2,0) 을 이겨 글이 테두리에 붙는 사고가 실측됐다 (2026-09-08 리드 QA). */
body.tn-elc-page-body .tn-elc-tool :is(ul,ol,li){margin:0!important;padding:0!important;list-style:none!important}
body.tn-elc-page-body .tn-elc-tool :is(dl,dd,dt){margin:0!important}
body.tn-elc-page-body .tn-elc-tool p{margin:0!important}
body.tn-elc-page-body .tn-elc-tool :is(code,pre,kbd,samp){padding:0!important;border:0!important;border-radius:0!important;background:none!important;background-color:transparent!important;color:inherit!important;-webkit-text-fill-color:inherit!important}
body.tn-elc-page-body .tn-elc-page script{display:none!important}

body.tn-elc-page-body .tn-elc-tool{
  display:grid!important;
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
  gap:12px 10px!important;
  width:100%!important;
  margin:0 auto 18px!important;
  padding:18px!important;
  border:1px solid var(--elc-line)!important;
  border-top:3px double var(--elc-line)!important;
  border-bottom:3px double var(--elc-line)!important;
  border-radius:0!important;
  background:var(--elc-paper)!important;
  box-shadow:4px 4px 0 rgba(26,18,8,.10)!important;
  color:var(--elc-ink)!important;
  -webkit-text-fill-color:var(--elc-ink)!important;
  font-family:var(--elc-num-font)!important;
}
body.tn-elc-page-body .tn-elc-tool>*{grid-column:1/-1!important;margin:0!important}

body.tn-elc-page-body .tn-elc-pane-label{
  display:block!important;
  margin:0 0 6px!important;
  padding:0!important;
  border:0!important;
  color:var(--elc-muted)!important;
  -webkit-text-fill-color:var(--elc-muted)!important;
  font-family:var(--elc-num-font)!important;
  font-size:12px!important;
  font-weight:800!important;
  line-height:15px!important;
  letter-spacing:.08em!important;
  text-transform:uppercase!important;
}

/* --- 입력 field bar (전폭, 4트랙) --- */
body.tn-elc-page-body .tn-elc-bar{
  display:grid!important;
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
  align-items:start!important;
  gap:10px!important;
  padding:0 0 12px!important;
  border:0!important;
  border-bottom:1px solid var(--elc-soft)!important;
  background:none!important;
}
body.tn-elc-page-body .tn-elc-field{
  display:grid!important;
  grid-template-rows:auto 36px!important;
  align-content:start!important;
  gap:5px!important;
  margin:0!important;
  padding:0!important;
  border:0!important;
  background:none!important;
}
/* 예시 칩은 두 번째 행 전폭. 4트랙 세로 축은 그대로 유지된다 (추가 필수 확인 #22). */
body.tn-elc-page-body .tn-elc-presets-group{grid-column:1/-1!important;grid-template-rows:auto auto!important}
/* 라벨 리셋은 control 을 제외한다 (추가 필수 확인 #3·#48, 특이도 (0,1,1) 이 control (0,1,0) 을 이기는 사고 차단) */
body.tn-elc-page-body .tn-elc-field>span:not(.tn-elc-control){display:block!important;margin:0!important;padding:0!important}
body.tn-elc-page-body .tn-elc-label{
  display:block!important;
  margin:0!important;
  padding:0!important;
  color:var(--elc-muted)!important;
  -webkit-text-fill-color:var(--elc-muted)!important;
  font-family:var(--elc-num-font)!important;
  font-size:12px!important;
  font-weight:700!important;
  line-height:15px!important;
  white-space:nowrap!important;
}
body.tn-elc-page-body .tn-elc-page .tn-elc-tool .tn-elc-control{
  display:flex!important;
  align-items:center!important;
  width:100%!important;
  height:36px!important;
  margin:0!important;
  padding:0!important;
  border:1px solid var(--elc-line)!important;
  border-radius:0!important;
  background:var(--elc-surface)!important;
  box-shadow:none!important;
  overflow:hidden!important;
}
body.tn-elc-page-body .tn-elc-control input{
  flex:1 1 auto!important;
  width:1px!important;
  height:34px!important;
  margin:0!important;
  /* 추가 필수 확인 #48: 값 글리프와 단위 글리프 사이 8~20px */
  padding:0 8px 0 10px!important;
  border:0!important;
  border-radius:0!important;
  outline:0!important;
  background:transparent!important;
  box-shadow:none!important;
  color:var(--elc-ink)!important;
  -webkit-text-fill-color:var(--elc-ink)!important;
  font-family:var(--elc-num-font)!important;
  font-size:15px!important;
  font-weight:600!important;
  line-height:34px!important;
  letter-spacing:0!important;
  text-align:right!important;
  font-variant-numeric:lining-nums tabular-nums!important;
}
body.tn-elc-page-body .tn-elc-control input::placeholder{color:var(--elc-muted)!important;-webkit-text-fill-color:var(--elc-muted)!important;font-weight:400!important;opacity:.35!important}
body.tn-elc-page-body .tn-elc-control input::-webkit-input-placeholder{color:var(--elc-muted)!important;-webkit-text-fill-color:var(--elc-muted)!important;font-weight:400!important;opacity:.35!important}
body.tn-elc-page-body .tn-elc-control b{
  display:block!important;
  flex:0 0 auto!important;
  margin:0!important;
  padding:0 10px 0 0!important;
  border:0!important;
  color:var(--elc-muted)!important;
  -webkit-text-fill-color:var(--elc-muted)!important;
  font-family:var(--elc-num-font)!important;
  font-size:12px!important;
  font-weight:800!important;
  line-height:34px!important;
  pointer-events:none!important;
}
/* select: 네이티브 접근성 유지 + 보이는 chevron (우려 #33) */
body.tn-elc-page-body .tn-elc-control select{
  flex:1 1 auto!important;
  width:1px!important;
  height:34px!important;
  margin:0!important;
  padding:0 6px 0 10px!important;
  border:0!important;
  border-radius:0!important;
  outline:0!important;
  background:transparent!important;
  box-shadow:none!important;
  color:var(--elc-ink)!important;
  -webkit-text-fill-color:var(--elc-ink)!important;
  font-family:var(--elc-num-font)!important;
  font-size:14px!important;
  font-weight:600!important;
  line-height:34px!important;
  text-align:left!important;
  cursor:pointer!important;
  -webkit-appearance:none!important;
  -moz-appearance:none!important;
  appearance:none!important;
  text-overflow:ellipsis!important;
}
body.tn-elc-page-body .tn-elc-control--select::after{
  content:""!important;
  flex:0 0 auto!important;
  width:7px!important;
  height:7px!important;
  margin:0 11px 0 4px!important;
  border:0!important;
  border-right:1.5px solid var(--elc-muted)!important;
  border-bottom:1.5px solid var(--elc-muted)!important;
  transform:translateY(-2px) rotate(45deg)!important;
  pointer-events:none!important;
}
body.tn-elc-page-body .tn-elc-control:has(input:focus-visible),
body.tn-elc-page-body .tn-elc-control:has(select:focus-visible){outline:2px solid var(--elc-accent)!important;outline-offset:-1px!important}
body.tn-elc-page-body .tn-elc-control:has(input[aria-invalid="true"]){border-color:var(--elc-danger)!important}
body.tn-elc-page-body .tn-elc-control input[aria-invalid="true"]{color:var(--elc-danger)!important;-webkit-text-fill-color:var(--elc-danger)!important}

body.tn-elc-page-body .tn-elc-presets{
  display:grid!important;
  grid-template-columns:repeat(6,minmax(0,1fr))!important;
  grid-auto-rows:36px!important;
  gap:6px!important;
  margin:0!important;
  padding:0!important;
}
body.tn-elc-page-body .tn-elc-preset{
  display:grid!important;
  place-items:center!important;
  width:100%!important;
  height:36px!important;
  margin:0!important;
  padding:0 6px!important;
  border:1px solid var(--elc-line)!important;
  border-radius:0!important;
  outline:0!important;
  background:var(--elc-surface)!important;
  box-shadow:none!important;
  color:var(--elc-muted)!important;
  -webkit-text-fill-color:var(--elc-muted)!important;
  font-family:var(--elc-num-font)!important;
  font-size:12px!important;
  font-weight:800!important;
  line-height:1!important;
  white-space:nowrap!important;
  cursor:pointer!important;
}
body.tn-elc-page-body .tn-elc-preset small{display:block!important;margin-top:3px!important;font-size:10px!important;font-weight:600!important;line-height:1!important;letter-spacing:0!important}
body.tn-elc-page-body .tn-elc-preset:hover,
body.tn-elc-page-body .tn-elc-preset.is-active{border-color:var(--elc-accent)!important;background:var(--elc-secondary)!important;color:var(--elc-ink)!important;-webkit-text-fill-color:var(--elc-ink)!important}
body.tn-elc-page-body .tn-elc-preset:focus-visible,
body.tn-elc-page-body .tn-elc-actions button:focus-visible{outline:2px solid var(--elc-accent)!important;outline-offset:2px!important}

/* --- status notice --- */
body.tn-elc-page-body .tn-elc-tool .tn-elc-notice{
  min-height:34px!important;
  margin:0!important;
  padding:8px 12px!important;
  border:1px solid var(--elc-soft)!important;
  background:var(--elc-surface)!important;
  color:var(--elc-muted)!important;
  -webkit-text-fill-color:var(--elc-muted)!important;
  font-family:var(--elc-num-font)!important;
  font-size:12px!important;
  font-weight:600!important;
  line-height:18px!important;
  text-align:center!important;
}
body.tn-elc-page-body .tn-elc-tool .tn-elc-notice.is-error{border-color:var(--elc-danger)!important;color:var(--elc-danger)!important;-webkit-text-fill-color:var(--elc-danger)!important;font-weight:800!important}

/* --- metrics 4-up: 첫 셀이 청구금액 lead (headline 밴드 흡수) --- */
body.tn-elc-page-body .tn-elc-metrics{
  display:grid!important;
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
  gap:10px!important;
  margin:0!important;
  padding:0!important;
}
body.tn-elc-page-body .tn-elc-tool .tn-elc-metric{
  display:grid!important;
  align-content:center!important;
  justify-items:center!important;
  gap:6px!important;
  min-height:72px!important;
  margin:0!important;
  padding:11px 10px!important;
  border:1px solid var(--elc-soft)!important;
  background:var(--elc-wash)!important;
  text-align:center!important;
}
body.tn-elc-page-body .tn-elc-metric--lead{border-color:var(--elc-line)!important;background:var(--elc-surface)!important}
body.tn-elc-page-body .tn-elc-metric dt{
  margin:0!important;
  color:var(--elc-muted)!important;
  -webkit-text-fill-color:var(--elc-muted)!important;
  font-family:var(--elc-num-font)!important;
  font-size:11px!important;
  font-weight:700!important;
  line-height:1.2!important;
}
body.tn-elc-page-body .tn-elc-metric--lead dt{color:var(--elc-accent)!important;-webkit-text-fill-color:var(--elc-accent)!important;font-weight:800!important;letter-spacing:.06em!important}
body.tn-elc-page-body .tn-elc-metric dd,
body.tn-elc-page-body .tn-elc-metric-value{
  max-width:100%!important;
  margin:0!important;
  color:var(--elc-ink)!important;
  -webkit-text-fill-color:var(--elc-ink)!important;
  font-family:var(--elc-num-font)!important;
  font-size:clamp(15px,1.7vw,20px)!important;
  font-weight:800!important;
  line-height:1.15!important;
  letter-spacing:normal!important;
  font-variant-numeric:lining-nums tabular-nums!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
}
body.tn-elc-page-body .tn-elc-metric--lead .tn-elc-metric-value{font-size:clamp(20px,2.4vw,30px)!important;line-height:1.1!important}

/* --- 2-up split: 같은 세로 축(4트랙) 위에서 2트랙씩 --- */
body.tn-elc-page-body .tn-elc-split{
  display:grid!important;
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
  align-items:stretch!important;
  gap:10px!important;
  margin:0!important;
  padding:0!important;
}
body.tn-elc-page-body .tn-elc-breakdown{grid-column:1/3!important;display:grid!important;grid-template-rows:auto 1fr!important;align-content:start!important;margin:0!important;padding:0!important}
body.tn-elc-page-body .tn-elc-gauge-block{grid-column:3/5!important;display:grid!important;grid-template-rows:auto 1fr auto!important;gap:8px!important;margin:0!important;padding:0!important}

body.tn-elc-page-body .tn-elc-table{
  width:100%!important;
  margin:0!important;
  border:1px solid var(--elc-soft)!important;
  border-collapse:collapse!important;
  background:var(--elc-surface)!important;
  font-family:var(--elc-num-font)!important;
  table-layout:fixed!important;
}
body.tn-elc-page-body .tn-elc-table :is(th,td){
  margin:0!important;
  padding:7px 9px!important;
  border:0!important;
  border-bottom:1px solid var(--elc-soft)!important;
  color:var(--elc-ink)!important;
  -webkit-text-fill-color:var(--elc-ink)!important;
  font-size:12px!important;
  line-height:1.4!important;
  text-align:left!important;
  word-break:keep-all!important;
  overflow-wrap:anywhere!important;
}
body.tn-elc-page-body .tn-elc-table th{
  background:var(--elc-wash)!important;
  color:var(--elc-muted)!important;
  -webkit-text-fill-color:var(--elc-muted)!important;
  font-weight:800!important;
}
body.tn-elc-page-body .tn-elc-table th:not(:first-child){text-align:right!important}
body.tn-elc-page-body .tn-elc-table td.tn-elc-num{
  font-weight:800!important;
  font-variant-numeric:lining-nums tabular-nums!important;
  letter-spacing:normal!important;
  text-align:right!important;
}
body.tn-elc-page-body .tn-elc-table tr[data-elc-row="sum"] :is(th,td){border-bottom:0!important;background:var(--elc-wash)!important}
body.tn-elc-page-body .tn-elc-table tr[data-elc-row="sum"] td.tn-elc-num{color:var(--elc-accent)!important;-webkit-text-fill-color:var(--elc-accent)!important}
body.tn-elc-page-body .tn-elc-table tr.is-off :is(td,th){opacity:.45!important}
body.tn-elc-page-body .tn-elc-table caption{
  margin:0 0 6px!important;
  padding:0!important;
  color:var(--elc-muted)!important;
  -webkit-text-fill-color:var(--elc-muted)!important;
  font-family:var(--elc-num-font)!important;
  font-size:11px!important;
  font-weight:600!important;
  line-height:1.4!important;
  text-align:left!important;
  caption-side:bottom!important;
}

/* --- 누진 구간 게이지 --- */
body.tn-elc-page-body .tn-elc-gauge-frame{
  width:100%!important;
  min-height:118px!important;
  margin:0!important;
  padding:0!important;
  border:1px solid var(--elc-soft)!important;
  background:var(--elc-surface)!important;
  overflow:hidden!important;
}
body.tn-elc-page-body .tn-elc-gauge-frame svg{display:block!important;width:100%!important;height:100%!important}
body.tn-elc-page-body .tn-elc-gauge-frame svg text{font-family:var(--elc-num-font)!important;font-variant-numeric:lining-nums tabular-nums!important}
body.tn-elc-page-body .tn-elc-facts{
  display:grid!important;
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  gap:10px!important;
  margin:0!important;
  padding:0!important;
}
body.tn-elc-page-body .tn-elc-tool .tn-elc-fact{
  display:grid!important;
  align-content:center!important;
  gap:5px!important;
  min-height:56px!important;
  margin:0!important;
  padding:9px 10px!important;
  border:1px solid var(--elc-soft)!important;
  background:var(--elc-wash)!important;
  text-align:center!important;
}
body.tn-elc-page-body .tn-elc-fact dt{
  margin:0!important;
  color:var(--elc-muted)!important;
  -webkit-text-fill-color:var(--elc-muted)!important;
  font-family:var(--elc-num-font)!important;
  font-size:11px!important;
  font-weight:700!important;
  line-height:1.2!important;
}
body.tn-elc-page-body .tn-elc-fact dd{
  margin:0!important;
  color:var(--elc-ink)!important;
  -webkit-text-fill-color:var(--elc-ink)!important;
  font-family:var(--elc-num-font)!important;
  font-size:14px!important;
  font-weight:800!important;
  line-height:1.2!important;
  letter-spacing:normal!important;
  font-variant-numeric:lining-nums tabular-nums!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
}

/* --- actions: 같은 4트랙 축 위에서 2트랙씩 --- */
body.tn-elc-page-body .tn-elc-actions{
  display:grid!important;
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
  gap:10px!important;
  width:100%!important;
  margin:0!important;
}
body.tn-elc-page-body .tn-elc-actions button{
  grid-column:span 2!important;
  display:grid!important;
  place-items:center!important;
  width:100%!important;
  height:40px!important;
  min-height:40px!important;
  margin:0!important;
  padding:0 10px!important;
  border:1px solid var(--elc-primary)!important;
  border-radius:0!important;
  outline:0!important;
  box-shadow:none!important;
  font-family:var(--elc-num-font)!important;
  font-size:13px!important;
  font-weight:800!important;
  line-height:1!important;
  text-align:center!important;
  cursor:pointer!important;
}
body.tn-elc-page-body .tn-elc-primary{background:var(--elc-primary)!important;color:var(--elc-primary-text)!important;-webkit-text-fill-color:var(--elc-primary-text)!important}
body.tn-elc-page-body .tn-elc-primary:hover:not(:disabled){background:var(--elc-primary-hover)!important}
body.tn-elc-page-body .tn-elc-secondary{background:var(--elc-secondary)!important;color:var(--elc-ink)!important;-webkit-text-fill-color:var(--elc-ink)!important}
body.tn-elc-page-body .tn-elc-secondary:hover:not(:disabled){background:var(--elc-secondary-hover)!important}
body.tn-elc-page-body .tn-elc-actions button:disabled{cursor:not-allowed!important;opacity:.55!important}

body.tn-elc-page-body .tn-elc-tool .tn-elc-disclaimer{
  margin:0!important;
  padding:9px 12px!important;
  border:1px solid var(--elc-soft)!important;
  background:var(--elc-wash)!important;
  color:var(--elc-muted)!important;
  -webkit-text-fill-color:var(--elc-muted)!important;
  font-family:var(--elc-num-font)!important;
  font-size:11px!important;
  font-weight:600!important;
  line-height:1.5!important;
}

/* --- dark / inverse / auto-dark --- */
body.tn-elc-page-body:is([data-scheme="dark"],[data-scheme="inverse"],[data-scheme="auto"][data-l="dark"],[data-scheme="auto"][data-d="dark"]) .tn-elc-page,
html[data-scheme="dark"] body.tn-elc-page-body:not([data-scheme="light"]) .tn-elc-page{
  --elc-ink:#f7ead1;
  --elc-muted:#c3b492;
  --elc-line:#6f6047;
  --elc-soft:#574a37;
  --elc-paper:#241d12;
  --elc-surface:#322a1a;
  --elc-wash:#2c2517;
  --elc-accent:#e8823f;
  --elc-primary:#4a3116;
  --elc-primary-hover:#68451f;
  --elc-primary-text:#f7ead1;
  --elc-secondary:#322a1a;
  --elc-secondary-hover:#403620;
  --elc-danger:#ffb0a2;
  --elc-tier1:#57b083;
  --elc-tier2:#c3b492;
  --elc-tier3:#e8823f;
  --elc-tier4:#ffb0a2;
}
@media (prefers-color-scheme:dark){
  body.tn-elc-page-body[data-scheme="auto"] .tn-elc-page{
    --elc-ink:#f7ead1;
    --elc-muted:#c3b492;
    --elc-line:#6f6047;
    --elc-soft:#574a37;
    --elc-paper:#241d12;
    --elc-surface:#322a1a;
    --elc-wash:#2c2517;
    --elc-accent:#e8823f;
    --elc-primary:#4a3116;
    --elc-primary-hover:#68451f;
    --elc-primary-text:#f7ead1;
    --elc-secondary:#322a1a;
    --elc-secondary-hover:#403620;
    --elc-danger:#ffb0a2;
    --elc-tier1:#57b083;
    --elc-tier2:#c3b492;
    --elc-tier3:#e8823f;
    --elc-tier4:#ffb0a2;
  }
}

/* --- responsive --- */
@media (max-width:980px){
  body.tn-elc-page-body .tn-elc-bar{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  body.tn-elc-page-body .tn-elc-field--usage{grid-column:1/-1!important}
  body.tn-elc-page-body .tn-elc-field--discount{grid-column:1/-1!important}
  body.tn-elc-page-body .tn-elc-presets{grid-template-columns:repeat(3,minmax(0,1fr))!important}
  body.tn-elc-page-body .tn-elc-presets-group{grid-column:1/-1!important}
  body.tn-elc-page-body .tn-elc-metrics{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  body.tn-elc-page-body .tn-elc-split{grid-template-columns:minmax(0,1fr)!important}
  body.tn-elc-page-body .tn-elc-breakdown,
  body.tn-elc-page-body .tn-elc-gauge-block{grid-column:1/-1!important}
  body.tn-elc-page-body .tn-elc-actions{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  body.tn-elc-page-body .tn-elc-actions button{grid-column:span 1!important}
}
@media (max-width:720px){
  body.tn-elc-page-body .tn-elc-page{width:calc(100% - 10px)!important;max-width:calc(100% - 10px)!important;margin:0 auto 40px!important;font-size:14px!important}
  body.tn-elc-page-body .tn-elc-tool{gap:10px!important;padding:12px!important}
  /* 단일 세로 축 (추가 필수 확인 #22 / 우려 #42) — 네 grid 의 gap 은 모든 뷰포트에서 같아야 한다.
     bar 만 9px 로 줄이면 390 에서 컬럼 경계가 metrics 와 0.5px 어긋난다 (2026-09-08 위임 QA O-2). */
  body.tn-elc-page-body :is(.tn-elc-bar,.tn-elc-metrics,.tn-elc-split,.tn-elc-actions){gap:9px!important}
  body.tn-elc-page-body .tn-elc-bar{padding:0 0 10px!important}
  body.tn-elc-page-body .tn-elc-gauge-frame{min-height:128px!important}
  body.tn-elc-page-body .tn-elc-facts{gap:8px!important}
  /* 우려 #50 / 추가 필수 확인 #24 — 모바일에서 표 폭 고정을 풀고 행 카드로 접는다.
     우려 #53 — caption 도 함께 block 화하고 order 로 맨 아래에 둔다. */
  body.tn-elc-page-body .tn-elc-table{display:flex!important;flex-direction:column!important;width:100%!important}
  body.tn-elc-page-body .tn-elc-table tbody,
  body.tn-elc-page-body .tn-elc-table tr,
  body.tn-elc-page-body .tn-elc-table td{display:block!important;width:100%!important}
  body.tn-elc-page-body .tn-elc-table tbody{order:1!important}
  body.tn-elc-page-body .tn-elc-table thead{position:absolute!important;width:1px!important;height:1px!important;overflow:hidden!important;clip:rect(0 0 0 0)!important;white-space:nowrap!important}
  /* compactContainerLock — 모바일 행 카드를 4줄이 아니라 2줄로 접는다.
     1줄: 항목 / 금액, 2줄: 사용량·구간 / 단가. 놓이가 절반으로 줄어든다. */
  body.tn-elc-page-body .tn-elc-table tr{display:grid!important;grid-template-columns:minmax(0,1fr) auto!important;column-gap:10px!important;row-gap:2px!important;padding:7px 10px!important;border-bottom:1px solid var(--elc-soft)!important}
  body.tn-elc-page-body .tn-elc-table tr[data-elc-row="sum"]{border-bottom:0!important;background:var(--elc-wash)!important}
  body.tn-elc-page-body .tn-elc-table td{width:auto!important;padding:0!important;border-bottom:0!important}
  body.tn-elc-page-body .tn-elc-table td.tn-elc-head{grid-column:1!important;grid-row:1!important;font-weight:800!important}
  body.tn-elc-page-body .tn-elc-table td:nth-child(4){grid-column:2!important;grid-row:1!important;text-align:right!important}
  body.tn-elc-page-body .tn-elc-table td:nth-child(2){grid-column:1!important;grid-row:2!important;text-align:left!important}
  body.tn-elc-page-body .tn-elc-table td:nth-child(3){grid-column:2!important;grid-row:2!important;text-align:right!important}
  body.tn-elc-page-body .tn-elc-table td:is(:nth-child(2),:nth-child(3)){color:var(--elc-muted)!important;-webkit-text-fill-color:var(--elc-muted)!important;font-size:11px!important;line-height:1.35!important}
  body.tn-elc-page-body .tn-elc-table td:nth-child(3)::before{content:attr(data-label) " "!important;font-weight:700!important}
  body.tn-elc-page-body .tn-elc-table td.tn-elc-head::before,
  body.tn-elc-page-body .tn-elc-table td:nth-child(2)::before,
  body.tn-elc-page-body .tn-elc-table td:nth-child(4)::before{content:none!important}
  body.tn-elc-page-body .tn-elc-table caption{display:block!important;width:100%!important;order:2!important;margin:6px 0 0!important}
  body.tn-elc-page-body .tn-elc-table tr[data-elc-row="sum"] :is(th,td){background:transparent!important}
}
@media (max-width:390px){
  /* 추가 필수 확인 #48 · 우려 #52: 기본 규칙과 같은 글리프 간격(8px 이상)을 유지한다. */
  body.tn-elc-page-body .tn-elc-control input{padding:0 8px 0 8px!important;font-size:14px!important}
  body.tn-elc-page-body .tn-elc-control select{padding:0 4px 0 8px!important;font-size:13px!important}
  body.tn-elc-page-body .tn-elc-control--select::after{margin:0 9px 0 3px!important}
  body.tn-elc-page-body .tn-elc-control b{padding:0 8px 0 0!important;font-size:11px!important}
  body.tn-elc-page-body .tn-elc-preset{padding:0 4px!important;font-size:11px!important}
  body.tn-elc-page-body .tn-elc-preset small{font-size:9.5px!important}
  body.tn-elc-page-body .tn-elc-tool .tn-elc-metric{min-height:66px!important;padding:10px 8px!important}
  body.tn-elc-page-body .tn-elc-facts{grid-template-columns:repeat(3,minmax(0,1fr))!important}
  body.tn-elc-page-body .tn-elc-tool .tn-elc-fact{padding:8px 6px!important}
  body.tn-elc-page-body .tn-elc-fact dd{font-size:13px!important}
}
@media (max-width:360px){
  body.tn-elc-page-body .tn-elc-tool{padding:10px!important}
  body.tn-elc-page-body :is(.tn-elc-bar,.tn-elc-metrics,.tn-elc-split,.tn-elc-actions){gap:8px!important}
  body.tn-elc-page-body .tn-elc-bar{padding:0 0 10px!important}
  body.tn-elc-page-body .tn-elc-presets{gap:5px!important}
  body.tn-elc-page-body .tn-elc-preset{padding:0 3px!important;font-size:10.5px!important}
  body.tn-elc-page-body .tn-elc-actions button{padding:0 6px!important;font-size:12px!important}
  body.tn-elc-page-body .tn-elc-fact dd{font-size:12px!important}
}