Data Slide

<div class="slide" id="slide">
  <span class="badge" id="badge"></span>
  <h3 class="ttl" id="ttl"></h3>
  <svg class="chart" viewBox="0 0 200 80" preserveAspectRatio="none">
    <polyline points="0,20 40,24 80,30 120,55 160,60 200,62" fill="none" stroke="var(--accent)" stroke-width="3"></polyline>
  </svg>
  <div class="ann"><span class="pt"></span><span class="lbl" id="annlbl"></span></div>
</div>

.slide{position:absolute;inset:6%;border-radius:clamp(6px,1.6vmin,14px);background:var(--surface);border:1px solid var(--line);padding:6vmin 7vmin;display:flex;flex-direction:column;gap:4%}
.badge{position:absolute;top:4%;right:4%;z-index:2;font:800 clamp(10px,2.4vmin,14px)/1 system-ui;padding:.3em .7em;border-radius:999px;border:1px solid var(--line);background:var(--bg);color:var(--accent-2)}
.slide.good .badge{color:var(--accent-3)}
.ttl{margin:0;font:700 clamp(10px,2.6vmin,14px)/1.3 -apple-system,sans-serif;color:var(--muted)}
.slide.good .ttl{color:var(--fg);font-weight:800;font-size:clamp(11px,3vmin,16px)}
.chart{flex:1;width:100%}
.ann{position:absolute;left:55%;top:42%;display:none;align-items:center;gap:6px}
.slide.good .ann{display:flex}
.pt{width:clamp(6px,1.6vmin,10px);aspect-ratio:1;border-radius:50%;background:var(--accent-3);box-shadow:0 0 0 4px rgba(24,194,156,.25)}
.lbl{font:700 clamp(8px,2vmin,11px)/1.2 -apple-system,sans-serif;color:var(--accent-3);white-space:nowrap}

const el = (id) => document.getElementById(id);
const slide = el('slide');
const L = {
  ko: { badge: ['✕ 축 이름', '✓ 결론'], ttl: ['월별 이탈률', '온보딩 개선 후 이탈률이 절반으로 줄었다'], ann: '개선 적용 시점' },
  en: { badge: ['✕ Axis label', '✓ Conclusion'], ttl: ['Monthly Churn Rate', 'Churn rate cut in half after the onboarding fix'], ann: 'Fix shipped here' },
};
let n = 0;
function render() {
  const good = n % 2 === 1;
  const lang = n % 4 < 2 ? 'ko' : 'en';
  const t = L[lang];
  slide.classList.toggle('good', good);
  el('badge').textContent = good ? t.badge[1] : t.badge[0];
  el('ttl').textContent = good ? t.ttl[1] : t.ttl[0];
  el('annlbl').textContent = t.ann;
}
render();
setInterval(() => { n++; render(); }, 2200);