프로젝터용 대비

<div class="slide" id="slide">
  <span class="badge" id="badge"></span>
  <div class="content">
    <p class="ttl" id="ttl"></p>
    <p class="body2" id="body2"></p>
  </div>
  <div class="wash"></div>
</div>

.slide{position:absolute;inset:6%;border-radius:clamp(6px,1.6vmin,14px);overflow:hidden;background:#faf6e8;border:1px solid var(--line)}
.slide.good{background:#141a33}
.badge{position:absolute;top:4%;right:4%;z-index:3;font:800 clamp(10px,2.4vmin,14px)/1 system-ui;padding:.3em .7em;border-radius:999px;border:1px solid var(--line);background:rgba(255,255,255,.7);color:#b08b1a}
.slide.good .badge{color:#7ee0c0;background:rgba(0,0,0,.35);border-color:rgba(255,255,255,.25)}
.content{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;padding:9vmin 10vmin;gap:4%}
.ttl{margin:0;font:700 clamp(11px,3vmin,16px)/1.3 -apple-system,sans-serif;color:#e8d98a}
.slide.good .ttl{color:#ffffff;font-weight:900;border-bottom:4px solid #5be0b0;display:inline-block;padding-bottom:.15em}
.body2{margin:0;font:500 clamp(9px,2.2vmin,12px)/1.5 -apple-system,sans-serif;color:#cbbf8f}
.slide.good .body2{color:#c8d3ff}
.wash{position:absolute;inset:0;background:rgba(255,255,255,.5);mix-blend-mode:screen;pointer-events:none}

const el = (id) => document.getElementById(id);
const slide = el('slide');
const L = {
  ko: { badge: ['✕ 워시아웃', '✓ 유지됨'], ttl: '이번 분기 목표', body2: '매출 20% 성장, 이탈률 절반으로 감소' },
  en: { badge: ['✕ Washed out', '✓ Holds up'], ttl: "This Quarter's Goal", body2: '20% revenue growth, churn cut in half' },
};
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 = t.ttl; el('body2').textContent = t.body2;
}
render();
setInterval(() => { n++; render(); }, 2200);