온보딩 문구

<div class="stage">
  <div class="pane bad"><span class="mark">✕</span><span class="label">Before</span>
    <div class="card">
      <p class="ctitle" id="bt"></p>
      <button class="btn ghost">-</button>
    </div>
    <p class="why" id="bw"></p></div>
  <div class="pane good"><span class="mark">✓</span><span class="label">After</span>
    <div class="card">
      <p class="step">1/3</p>
      <p class="ctitle" id="gt"></p>
      <button class="btn solid" id="gb"></button>
    </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;align-items:center;gap:10px}
.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}
.card{width:92%;border-radius:12px;border:1px solid var(--line);background:var(--bg);padding:14px;display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center}
.step{margin:0;font:700 10px/1 monospace;color:var(--muted)}
.ctitle{margin:0;font:650 clamp(11px,2.9vmin,14px)/1.4 -apple-system,sans-serif;color:var(--fg);min-height:2.6em}
.btn{padding:6px 14px;border-radius:8px;font:700 11px/1 -apple-system,sans-serif;border:0}
.ghost{background:transparent;border:1px solid var(--line);color:var(--muted)}
.solid{background:var(--accent-3);color:#fff}
.why{margin: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 gt = document.getElementById('gt'), gb = document.getElementById('gb'), gw = document.getElementById('gw');
const L = {
  ko: { bt: '환영합니다! 최고의 경험을 시작해보세요', bw: '기분은 좋지만 다음 행동이 없음', gt: '이름을 입력하고 시작해요', gb: '이름 입력하기', gw: '지금 할 행동 하나로 바로 연결' },
  en: { bt: "Welcome! Let's start your amazing journey", bw: 'feels nice, no next step', gt: "Let's start with your name", gb: 'Enter your name', gw: 'leads straight into one clear action' },
};
let lang = 'ko';
function paint() {
  const t = L[lang];
  bt.textContent = t.bt; bw.textContent = t.bw; gt.textContent = t.gt; gb.textContent = t.gb; gw.textContent = t.gw;
}
paint();
setInterval(() => { lang = lang === 'ko' ? 'en' : 'ko'; paint(); }, 2600);