Number Formatting

<div class="stage">
  <div class="pane bad"><span class="mark">✕</span><span class="label">Before</span>
    <p class="num" id="bt"></p>
    <p class="why" id="bw"></p></div>
  <div class="pane good"><span class="mark">✓</span><span class="label">After</span>
    <p class="num" id="gt1"></p>
    <p class="num sm" id="gt2"></p>
    <p class="why" id="gw"></p></div>
</div>

.stage{width:94%;height:88%;display:flex;gap:4%}
.pane{position:relative;flex:1;border-radius:14px;border:1px solid var(--line);background:var(--surface);padding:16px 14px 12px;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:6px}
.mark{position:absolute;top:10px;right:12px;font:800 16px/1 system-ui;color:var(--accent-2)}
.good .mark{color:var(--accent-3)}
.label{position:absolute;top:10px;left:12px;font:700 10px/1 monospace;color:var(--muted);text-transform:uppercase;letter-spacing:.06em}
.num{margin:0;font:800 clamp(15px,4vmin,22px)/1.2 monospace;color:var(--fg)}
.num.sm{font-size:clamp(12px,3.2vmin,17px);color:var(--muted)}
.why{margin:6px 0 0;font:500 11px/1.3 -apple-system,sans-serif;color:var(--muted);text-align:center}

const bt = document.getElementById('bt'), bw = document.getElementById('bw');
const gt1 = document.getElementById('gt1'), gt2 = document.getElementById('gt2'), gw = document.getElementById('gw');
const koFmt = new Intl.NumberFormat('ko-KR', { style: 'currency', currency: 'KRW' });
const enFmt = new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD' });
function hardcoded(n) {
  return '$' + String(n).replace(/\B(?=(\d{3})+(?!\d))/g, ',');
}
const values = [1234567, 9800000, 45230];
let i = 0, lang = 'ko';
function paint() {
  const n = values[i % values.length];
  bt.textContent = hardcoded(n);
  gt1.textContent = koFmt.format(n);
  gt2.textContent = enFmt.format(n / 1000);
  bw.textContent = lang === 'ko' ? '통화 기호·자릿수가 항상 미국식으로 고정' : 'currency symbol and decimals fixed to US style';
  gw.textContent = lang === 'ko' ? 'Intl.NumberFormat이 로케일마다 자동 변환' : 'Intl.NumberFormat adapts per locale automatically';
}
paint();
setInterval(() => { i++; lang = lang === 'ko' ? 'en' : 'ko'; paint(); }, 2600);