/* 야구 평균자책점(ERA) 계산기 전용 CSS (2026-10-24). 머리 줄·결과 띠(큰 ERA | 세 칸)·[기록지 | 이닝 폭 막대 그림]·읽기 줄 era-*. 공용 부품은 assets/v2.css
   넓이: 작업면 컨테이너 eraw — 560 이상 결과 띠 [ERA | 세 칸], 700 이상 [기록지 | 그림] 두 단·읽기 줄 두 단. 그 아래는 결과 → 세 칸 → 기록지 → 그림 → 읽기 줄 한 단 */
.era-work{container:eraw / inline-size}
.era-top{display:flex;flex-wrap:wrap;align-items:flex-end;gap:10px 12px;padding:14px 18px 6px}
.era-fl{display:flex;flex-direction:column;gap:6px}
.era-fl .v2-seg{flex-wrap:nowrap}
.era-fl .v2-seg button{height:var(--v2-ctl,42px);padding:0 13px;font-size:13px}
.era-base{flex:1 0 92px;min-width:0;max-width:150px}
.era-am{flex:1 1 160px;min-width:0}
.era-pk{flex:2 1 210px;min-width:0}
.era-work select{display:block;width:100%;height:var(--v2-ctl,42px);padding:0 8px;border:1px solid var(--line);border-radius:var(--radius);background:var(--paper);font-family:var(--sans);font-size:14px;font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums}
.era-chip{display:inline-flex;align-items:center;gap:5px;height:var(--v2-ctl,42px);margin-left:auto;padding:0 12px;border:1px solid var(--soft);border-radius:var(--radius);background:var(--paper);font-family:var(--sans);font-size:12.5px;font-weight:600;color:var(--ink);white-space:nowrap;transition:background var(--ease)}
.era-chip:hover{background:var(--btn)}
.era-chip .i{width:13px;height:13px}

/* 결과 띠 — 좁으면 [ERA] → [세 칸] → 문장 */
.era-sum{display:grid;grid-template-columns:minmax(0,1fr);gap:10px;margin-top:8px;padding:12px 18px 14px;border-top:1px solid var(--soft);border-bottom:1px solid var(--soft)}
.era-res{min-width:0}
.era-resh{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 10px;margin:0 0 4px}
.era-resh .v2-label{font-family:var(--mono);font-weight:700;letter-spacing:.04em}
.era-ctx{font-family:var(--sans);font-size:12px;font-weight:600;color:var(--muted);font-variant-numeric:tabular-nums}
.era-big{display:block;font-family:var(--sans);font-size:48px;font-weight:800;line-height:1;letter-spacing:-.02em;color:var(--accent);font-variant-numeric:tabular-nums lining-nums;white-space:nowrap}
.era-big.is-empty{color:var(--muted);opacity:.6}
.era-big.is-long{font-size:38px}.era-big.is-xlong{font-size:28px}
.era-alt{margin:6px 0 0;font-family:var(--sans);font-size:12px;line-height:1.45;color:var(--muted)}
.era-alt:empty{display:none}
.era-kpi{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:0}
.era-kpi>div{display:flex;flex-direction:column;justify-content:space-between;gap:4px;min-width:0;padding:9px 10px;border:1px solid var(--soft);border-radius:var(--radius);background:var(--paper)}
:lang(ko) .era-kpi dt,:lang(ko) .era-kpi dd small{word-break:keep-all} /* ja는 keep-all이면 줄이 안 바뀌어 넘침(독립 검토 B4) */
.era-kpi dt{overflow-wrap:anywhere}
.era-kpi dt{font-family:var(--sans);font-size:11.5px;font-weight:600;line-height:1.35;color:var(--muted)}
.era-kpi dd{overflow-wrap:anywhere;margin:0;font-family:var(--sans);font-size:20px;font-weight:800;line-height:1.15;color:var(--ink);font-variant-numeric:tabular-nums lining-nums}
.era-kpi dd small{display:block;margin-top:3px;font-size:11.5px;font-weight:650;line-height:1.3;color:var(--muted)}
.era-say{margin:0;font-family:var(--sans);font-size:14px;line-height:1.6;color:var(--ink)}
.era-say:empty{display:none}

/* 기록지 | 그림 */
.era-body{display:grid;grid-template-columns:minmax(0,1fr);gap:0}
.era-log{display:flex;flex-direction:column;min-width:0;padding:12px 18px 10px}
.era-logh{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:2px 10px;margin:0 0 6px}
.era-src{font-family:var(--sans);font-size:11.5px;font-weight:600;line-height:1.4;color:var(--muted)}
/* 줄 높이 46px(칸 42 + 위아래 2) × 보이는 줄 수 + 머리 28px: 걸친 줄 없이 끊긴다 */
.era-scroll{max-height:calc(28px + 6 * 46px + 36px);overflow-y:auto;overscroll-behavior:contain;border:1px solid var(--soft);border-radius:var(--radius);background:var(--paper)}
.era-tbl{width:100%;border-collapse:separate;border-spacing:0;table-layout:fixed;font-family:var(--sans)}
.era-tbl thead th{position:sticky;top:0;z-index:1;height:28px;padding:0 4px;background:var(--card);border-bottom:1px solid var(--soft);font-size:11px;font-weight:650;color:var(--muted);text-align:right;white-space:nowrap}
.era-tbl th.era-n,.era-tbl td.era-n{width:28px;text-align:center}
.era-tbl th.era-ge,.era-tbl td.era-ge{width:58px}
.era-tbl th.era-x,.era-tbl td.era-x{width:34px}
.era-tbl td{height:46px;padding:2px 3px;vertical-align:middle;border-bottom:1px solid var(--soft)}
.era-tbl tbody tr:last-child td{border-bottom:0}
.era-tbl tfoot th,.era-tbl tfoot td{position:sticky;bottom:0;z-index:1;height:36px;padding:0 6px;background:var(--card);border-top:1px solid var(--line);font-size:14px;font-weight:800;color:var(--ink);text-align:right;font-variant-numeric:tabular-nums lining-nums;white-space:nowrap}
.era-tbl tfoot th.era-n{font-size:13px;color:var(--muted);text-align:center}
.era-tbl tfoot td.era-ti,.era-tbl tfoot td.era-te{padding-right:12px}
.era-tbl td.era-n{font-size:11.5px;font-weight:650;color:var(--muted);font-variant-numeric:tabular-nums}
.era-tbl td.era-ge{padding-right:6px;font-size:13.5px;font-weight:750;color:var(--ink);text-align:right;font-variant-numeric:tabular-nums lining-nums;white-space:nowrap}
.era-tbl .v2-input input{padding:0 8px;font-size:15px}
.era-tbl .v2-input.is-invalid{border-color:var(--accent)}
.era-tbl .era-x button{display:grid;place-items:center;width:30px;height:30px;margin:0 auto;padding:0;border:0;border-radius:var(--radius);background:none;font-size:17px;line-height:1;color:var(--muted);cursor:pointer}
.era-tbl .era-x button:hover{background:var(--btn);color:var(--ink)}
.era-tbl tr.is-hot td.era-n{color:var(--accent)}
.era-tbl tr.is-hot td{background:var(--wash)}
.era-logf{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:6px 12px;margin-top:8px}
.era-logf .era-chip{height:34px;margin-left:0}
.era-add{display:inline-flex;align-items:center;gap:4px;height:34px;padding:0 12px;border:1px dashed var(--line);border-radius:var(--radius);background:none;font-family:var(--sans);font-size:12.5px;font-weight:650;color:var(--ink);cursor:pointer}
.era-add:hover{background:var(--btn)}
.era-add:disabled{opacity:.45;cursor:not-allowed}

.era-fig{min-width:0;margin:0;padding:12px 18px 6px;border-top:1px solid var(--soft)}
.era-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:4px 12px;margin:0 0 6px}
.era-flat{display:inline-flex;align-items:center;height:30px;padding:0 11px;border:1px solid var(--soft);border-radius:var(--radius);background:var(--paper);font-family:var(--sans);font-size:12px;font-weight:650;color:var(--ink);cursor:pointer;transition:background var(--ease),color var(--ease)}
.era-flat:hover{background:var(--btn)}
.era-flat[aria-pressed="true"]{background:var(--fill);border-color:var(--fill);color:var(--on-fill)}
.era-svgbox{width:100%;overflow:hidden;transition:opacity var(--ease)}
.era-svgbox.is-stale{opacity:.45}
.era-svgbox svg{display:block;max-width:100%;height:auto}
.era-ax text{font-family:var(--mono);font-size:10px;fill:var(--muted)}
.era-ax .era-grid{stroke:var(--soft);stroke-width:1}
.era-ax .era-axl{stroke:var(--line);stroke-width:1.2}
.era-ax text.era-axn{font-family:var(--mono);font-size:10px;font-weight:700;fill:var(--ink)}
.era-b{fill:var(--muted);fill-opacity:.42;stroke:var(--card);stroke-width:1;cursor:pointer}
.era-b.is-thin{stroke:none}
.era-b.is-zero{fill:var(--ink);fill-opacity:.7}
.era-b.is-hot,.era-inf.is-hot{fill:var(--accent);fill-opacity:.85}
.era-inf{fill:var(--accent);cursor:pointer}
.era-over{fill:var(--ink)}
.era-hl{stroke:var(--accent);stroke-width:2}
.era-zone{fill:url(#eraHatch);stroke:var(--accent);stroke-width:1}
.era-down{fill:none;stroke:var(--accent);stroke-width:1.6;stroke-dasharray:4 3}
.era-zt{font-family:var(--sans);font-size:11px;font-weight:700;fill:var(--accent);paint-order:stroke;stroke:var(--card);stroke-width:3px;stroke-linejoin:round}
.era-cum{transition:opacity .3s ease}
.era-cum polyline{fill:none;stroke:var(--ink);stroke-width:1.5;stroke-linejoin:round}
.era-cum circle{fill:var(--ink)}
.era-avg{stroke:var(--ink);stroke-width:1.2;stroke-dasharray:5 3}
.era-goalln{stroke:var(--muted);stroke-width:1.2;stroke-dasharray:1.5 2.5}
.era-me{stroke:var(--accent);stroke-width:2.4}
.era-lab{font-family:var(--sans);font-size:10.5px;font-weight:700;font-variant-numeric:tabular-nums;paint-order:stroke;stroke:var(--card);stroke-width:3.5px;stroke-linejoin:round}
.era-avg-t{fill:var(--ink)}
.era-goalln-t{fill:var(--muted)}
.era-me-t{fill:var(--accent)}
.era-strip circle{fill:var(--ink);fill-opacity:.5}
.era-sl{stroke:var(--soft);stroke-width:1}
.era-st{font-family:var(--mono);font-size:9.5px;font-weight:700;fill:var(--muted)}
.era-mk{fill:var(--accent)}
.era-mkl{stroke:var(--accent);stroke-width:2}
.era-leg{display:flex;flex-wrap:wrap;gap:4px 14px;margin:6px 0 0;padding:0;list-style:none;font-family:var(--sans);font-size:11.5px;color:var(--muted)}
.era-leg li{display:inline-flex;align-items:center;gap:5px}
.era-leg li[hidden]{display:none}
.era-leg i{flex:0 0 auto;display:inline-block;box-sizing:border-box}
.era-leg [data-k="game"] i{width:12px;height:10px;background:var(--muted);opacity:.55}
.era-leg [data-k="me"] i{width:16px;height:0;border-top:2.4px solid var(--accent)}
.era-leg [data-k="cum"] i{width:16px;height:0;border-top:1.5px solid var(--ink)}
.era-leg [data-k="avg"] i{width:16px;height:0;border-top:1.4px dashed var(--ink)}
.era-leg [data-k="goal"] i{width:16px;height:0;border-top:1.6px dotted var(--muted)}
.era-leg [data-k="zone"] i{width:16px;height:8px;border:1px solid var(--accent);background:repeating-linear-gradient(-45deg,var(--accent) 0 1.5px,transparent 1.5px 4px)}
.era-leg [data-k="q"] i{width:7px;height:7px;border-radius:50%;background:var(--ink);opacity:.55}
.era-goal{display:grid;grid-template-columns:minmax(0,120px) minmax(0,1fr);align-items:end;gap:6px 12px;margin-top:10px}
.era-plan{align-self:center;margin:18px 0 0;font-family:var(--sans);font-size:13px;line-height:1.5;color:var(--ink)}
.era-plan:empty{display:none}
.era-work>.v2-status{display:block;margin:8px 18px 0}
.era-work>.v2-status:empty{display:none}

/* 읽기 줄 */
.era-rows{margin:4px 18px 0;padding:0}
.era-rows li span{flex:1 1 50%;min-width:0}
.era-rows li b{flex:0 1 auto;min-width:0;white-space:normal;overflow-wrap:anywhere;text-wrap:balance;text-align:right}
:lang(ko) .era-rows li b{word-break:keep-all} /* 긴 로케일 값(id '30 laga · rata-rata …')은 줄바꿈 */
.era-rows li span em{display:block;margin-top:1px;font-size:11.5px}
.era-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 14px;padding:4px 18px 16px}
.era-foot .v2-formula{flex:1 1 260px;min-width:0;margin:10px 0 0}
.era-acts{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:10px}

@container eraw (min-width:560px){
  .era-sum{grid-template-columns:minmax(150px,auto) minmax(0,1fr);column-gap:22px;align-items:center}
  .era-say{grid-column:1 / -1}
}
@container eraw (min-width:700px){
  .era-body{grid-template-columns:minmax(276px,316px) minmax(0,1fr)}
  .era-fig{border-top:0;border-left:1px solid var(--soft)}
  .era-scroll{max-height:calc(28px + 7 * 46px + 36px)}
  .era-rows{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:24px}
}
@container eraw (max-width:420px){
  .era-top{padding:12px 12px 4px}
  .era-sum,.era-log,.era-fig{padding-left:12px;padding-right:12px}
  .era-rows{margin-left:12px;margin-right:12px}
  .era-foot{padding-left:12px;padding-right:12px}
  .era-big{font-size:42px}
  .era-kpi{gap:6px}
  .era-kpi>div{padding:8px 7px}
  .era-kpi dd{font-size:18px}
  .era-tbl th.era-ge,.era-tbl td.era-ge{width:50px}
  .era-chip{margin-left:0}
}
@media (prefers-reduced-motion:reduce){.era-cum,.era-svgbox{transition:none}}