파괴적 행동 문구

<div class="stage">
  <div class="pane bad"><span class="mark">✕</span><span class="label">Before</span>
    <div class="dlg"><p class="dtitle" id="bt"></p><div class="drow"><button class="btn ghost">-</button><button class="btn danger">-</button></div></div>
    <p class="why" id="bw"></p></div>
  <div class="pane good"><span class="mark">✓</span><span class="label">After</span>
    <div class="dlg"><p class="dtitle" id="gt"></p><p class="dloss" id="gl"></p><div class="drow"><button class="btn ghost">-</button><button class="btn danger" id="gb"></button></div></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:26px 12px 10px;display:flex;flex-direction:column;justify-content:flex-start;align-items:center;gap:7px;overflow:hidden}
.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}
.dlg{width:96%;border-radius:11px;border:1px solid var(--line);background:var(--bg);padding:9px;display:flex;flex-direction:column;gap:5px}
.dtitle{margin:0;font:700 clamp(9px,2.4vmin,11.5px)/1.3 -apple-system,sans-serif;color:var(--fg)}
.dloss{margin:0;font:500 clamp(8px,2.1vmin,10px)/1.3 -apple-system,sans-serif;color:var(--accent-2)}
.drow{display:flex;gap:5px;justify-content:flex-end;margin-top:1px}
.btn{padding:4px 9px;border-radius:6px;font:700 9px/1 -apple-system,sans-serif;border:0}
.ghost{background:transparent;border:1px solid var(--line);color:var(--muted)}
.danger{background:var(--accent-2);color:#fff}
.why{margin:0;font:500 10px/1.25 -apple-system,sans-serif;color:var(--muted);text-align:center}

const bt = document.getElementById('bt'), bw = document.getElementById('bw');
const gt = document.getElementById('gt'), gl = document.getElementById('gl'), gb = document.getElementById('gb'), gw = document.getElementById('gw');
const L = {
  ko: { bt: '정말 삭제하시겠습니까?', bw: '매번 같은 문구, 위험도가 안 느껴짐', gt: '계정을 삭제할까요?', gl: '사진 128장과 결제 내역이 모두 사라져요', gb: '계정 삭제하기', gw: '이번엔 무엇이 사라지는지 명시' },
  en: { bt: 'Are you sure?', bw: 'same generic line every time', gt: 'Delete your account?', gl: '128 photos and your billing history will be gone', gb: 'Delete account', gw: 'states exactly what is lost this time' },
};
let lang = 'ko';
function paint() {
  const t = L[lang];
  bt.textContent = t.bt; bw.textContent = t.bw;
  gt.textContent = t.gt; gl.textContent = t.gl; gb.textContent = t.gb; gw.textContent = t.gw;
}
paint();
setInterval(() => { lang = lang === 'ko' ? 'en' : 'ko'; paint(); }, 2800);