Error Message

<div class="stage">
  <div class="pane bad"><span class="mark">✕</span><span class="label">Before</span>
    <div class="field err"><div class="finput"></div></div>
    <p class="copy err-copy" id="bt"></p>
    <p class="why" id="bw"></p></div>
  <div class="pane good"><span class="mark">✓</span><span class="label">After</span>
    <div class="field err"><div class="finput"></div></div>
    <p class="copy err-copy" id="gt"></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;gap:8px}
.mark{position:absolute;top:10px;right:12px;font:800 16px/1 system-ui;color:var(--accent-2)}
.good .mark{color:var(--accent-3)}
.label{font:700 10px/1 monospace;color:var(--muted);text-transform:uppercase;letter-spacing:.06em}
.finput{height:26px;border-radius:7px;border:1.5px solid var(--accent-2);background:var(--bg)}
.err-copy{margin:0;font:650 clamp(12px,3.2vmin,15px)/1.35 -apple-system,sans-serif;color:var(--accent-2)}
.why{margin:0;font:500 11px/1.3 -apple-system,sans-serif;color:var(--muted)}

const bt = document.getElementById('bt'), bw = document.getElementById('bw');
const gt = document.getElementById('gt'), gw = document.getElementById('gw');
const L = {
  ko: { bt: '오류가 발생했습니다', bw: '원인도 해결법도 없음', gt: '비밀번호는 8자 이상이어야 해요', gw: '정확한 기준을 바로 제시' },
  en: { bt: 'An error occurred', bw: 'no cause, no fix', gt: 'Password needs at least 8 characters', gw: 'states the exact rule to fix it' },
};
let lang = 'ko';
function paint() {
  const t = L[lang];
  bt.textContent = t.bt; bw.textContent = t.bw; gt.textContent = t.gt; gw.textContent = t.gw;
}
paint();
setInterval(() => { lang = lang === 'ko' ? 'en' : 'ko'; paint(); }, 2400);