슬라이드 위계

<div class="slide" id="slide">
  <span class="badge" id="badge"></span>
  <div class="stack">
    <p class="ln title" id="l1"></p>
    <p class="ln sub" id="l2"></p>
    <p class="ln body" id="l3"></p>
  </div>
  <div class="gaze"></div>
</div>

.slide{position:absolute;inset:6%;border-radius:clamp(6px,1.6vmin,14px);background:var(--surface);border:1px solid var(--line);padding:8vmin 9vmin}
.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)}
.stack{display:flex;flex-direction:column;gap:clamp(6px,1.8vmin,12px);height:100%;justify-content:center}
.ln{margin:0;font:700 clamp(11px,2.6vmin,15px)/1.3 -apple-system,sans-serif;color:var(--fg)}
.slide.good .title{font-size:clamp(15px,4vmin,22px);font-weight:800}
.slide.good .sub{font-size:clamp(11px,2.6vmin,15px);font-weight:600;color:var(--muted)}
.slide.good .body{font-size:clamp(9px,2vmin,12px);font-weight:400;color:var(--muted)}
.gaze{position:absolute;left:5%;top:14%;width:clamp(6px,1.6vmin,10px);aspect-ratio:1;border-radius:50%;background:var(--accent-3);opacity:0}
.slide.good .gaze{opacity:1;animation:travel 2s ease-in-out infinite}
@keyframes travel{0%,40%{top:14%}55%,70%{top:46%}85%,100%{top:78%}}

const el = (id) => document.getElementById(id);
const slide = el('slide');
const L = {
  ko: { badge: ['✕ 위계 없음', '✓ 위계 있음'], l: ['디자인 시스템 도입', '반년 만에 개발 속도 30% 상승', '컴포넌트 재사용률과 리뷰 시간을 함께 측정했다'] },
  en: { badge: ['✕ No hierarchy', '✓ Clear hierarchy'], l: ['Adopting a design system', 'Shipping speed up 30% in six months', 'Measured both component reuse and review time'] },
};
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('l1').textContent = t.l[0]; el('l2').textContent = t.l[1]; el('l3').textContent = t.l[2];
}
render();
setInterval(() => { n++; render(); }, 2200);