어서션-에비던스 구조

<div class="slide" id="slide">
  <span class="badge" id="badge"></span>
  <div class="bad-view">
    <h3 class="topic" id="topic"></h3>
    <ul class="bullets"><li id="b1"></li><li id="b2"></li><li id="b3"></li></ul>
  </div>
  <div class="good-view">
    <h3 class="assert" id="assert"></h3>
    <div class="chart">
      <div class="bar" style="--h:38%"></div>
      <div class="bar" style="--h:52%"></div>
      <div class="bar" style="--h:74%"></div>
    </div>
  </div>
</div>

.slide{position:absolute;inset:6%;border-radius:clamp(6px,1.6vmin,14px);background:var(--surface);border:1px solid var(--line)}
.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)}
.bad-view,.good-view{position:absolute;inset:8% 9%;display:none;flex-direction:column;justify-content:center;gap:clamp(6px,2vmin,14px)}
.slide:not(.good) .bad-view{display:flex}
.slide.good .good-view{display:flex}
.topic{margin:0;font:700 clamp(10px,2.6vmin,15px)/1.2 -apple-system,sans-serif;color:var(--muted);text-transform:uppercase;letter-spacing:.04em}
.bullets{margin:0;padding-left:1.1em;display:flex;flex-direction:column;gap:.5em}
.bullets li{font:600 clamp(10px,2.6vmin,14px)/1.3 -apple-system,sans-serif;color:var(--fg)}
.assert{margin:0;font:800 clamp(12px,3.4vmin,19px)/1.3 -apple-system,sans-serif;color:var(--fg)}
.chart{display:flex;align-items:flex-end;gap:8%;height:38%;margin-top:auto}
.bar{flex:1;height:var(--h);border-radius:4px 4px 0 0;background:linear-gradient(180deg,var(--accent),var(--accent-3))}

const el = (id) => document.getElementById(id);
const slide = el('slide');
const L = {
  ko: { topic: '3분기 실적', b: ['매출이 늘었다', '비용이 줄었다', '고객이 늘었다'], assert: '재구매율이 오르며 매출이 34% 늘었다', tag: ['✕ 주제어', '✓ 주장'] },
  en: { topic: 'Q3 Results', b: ['Revenue increased', 'Costs decreased', 'Customers grew'], assert: 'Revenue grew 34% as retention improved', tag: ['✕ Topic label', '✓ Assertion'] },
};
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.tag[1] : t.tag[0];
  el('topic').textContent = t.topic;
  el('b1').textContent = t.b[0]; el('b2').textContent = t.b[1]; el('b3').textContent = t.b[2];
  el('assert').textContent = t.assert;
}
render();
setInterval(() => { n++; render(); }, 2000);