점진적 문구 공개

<div class="stage">
  <div class="pane bad"><span class="mark">✕</span><span class="label">Before</span>
    <p class="copy" 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="copy" id="gt"></p>
    <div class="more" id="gmore"><p class="detail" id="gd"></p></div>
    <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;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{position:absolute;top:10px;left:12px;font:700 10px/1 monospace;color:var(--muted);text-transform:uppercase;letter-spacing:.06em}
.copy{margin:0;font:600 clamp(11px,2.8vmin,14px)/1.5 -apple-system,sans-serif;color:var(--fg)}
.more{max-height:0;overflow:hidden;transition:max-height .5s ease}
.more.open{max-height:80px}
.detail{margin:6px 0 0;padding-top:6px;border-top:1px dashed var(--line);font:500 11px/1.4 -apple-system,sans-serif;color:var(--muted)}
.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'), gd = document.getElementById('gd'), gw = document.getElementById('gw'), gmore = document.getElementById('gmore');
const L = {
  ko: { bt: '요금제는 매월 자동 갱신되며 해지는 다음 결제일 전까지 신청해야 하고 환불은 이용 기간에 비례해 일부만 제공됩니다.', bw: '한 문단에 전부 욱여넣음', gt: '매월 자동 갱신돼요.', gd: '해지는 다음 결제일 전까지, 환불은 이용 기간에 비례해 일부 제공돼요.', gw: '한 줄 요약 + 필요할 때만 펼치는 상세' },
  en: { bt: 'The plan renews monthly, cancellation must be requested before the next billing date, and refunds are partial and prorated by usage.', bw: 'crams everything into one paragraph', gt: 'Renews automatically every month.', gd: 'Cancel before your next billing date. Refunds are partial and prorated.', gw: 'one-line summary + detail on demand' },
};
let lang = 'ko', open = false;
function paint() {
  const t = L[lang];
  bt.textContent = t.bt; bw.textContent = t.bw;
  gt.textContent = t.gt; gd.textContent = t.gd; gw.textContent = t.gw;
  gmore.classList.toggle('open', open);
}
paint();
setInterval(() => { open = !open; if (!open) lang = lang === 'ko' ? 'en' : 'ko'; paint(); }, 2000);