The 10/20/30 Rule

<div class="slide" id="slide">
  <span class="badge" id="badge"></span>
  <div class="content"><p class="txt" id="txt"></p></div>
  <div class="chips"><span class="chip">10</span><span class="chip">20′</span><span class="chip">30pt</span></div>
</div>

.slide{position:absolute;inset:6%;border-radius:clamp(6px,1.6vmin,14px);background:var(--surface);border:1px solid var(--line);padding:7vmin 8vmin 12vmin;display:flex;flex-direction:column}
.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)}
.content{flex:1;display:flex;align-items:center}
.txt{margin:0;font:500 clamp(7px,1.7vmin,10px)/1.6 -apple-system,sans-serif;color:var(--fg)}
.slide.good .txt{font:800 clamp(16px,4.4vmin,24px)/1.3 -apple-system,sans-serif}
.chips{position:absolute;left:8%;bottom:5%;display:flex;gap:6%}
.chip{font:700 clamp(8px,1.8vmin,11px)/1 monospace;color:var(--muted);border:1px solid var(--line);border-radius:999px;padding:.35em .8em}

const el = (id) => document.getElementById(id);
const slide = el('slide');
const L = {
  ko: {
    badge: ['✕ 12pt, 빽빽함', '✓ 30pt+'],
    txt: ['저희 제품은 기존 솔루션 대비 처리 속도가 빠르고, 도입 비용이 낮으며, 팀 규모와 무관하게 확장 가능하고, 기존 도구와도 쉽게 연동됩니다', '3배 빠르고, 절반 값이고, 그대로 연동됩니다'],
  },
  en: {
    badge: ['✕ 12pt, packed', '✓ 30pt+'],
    txt: ['Our product processes faster than existing solutions, costs less to adopt, scales regardless of team size, and integrates easily with the tools you already use', '3x faster, half the cost, works with your stack'],
  },
};
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('txt').textContent = good ? t.txt[1] : t.txt[0];
}
render();
setInterval(() => { n++; render(); }, 2400);