타이틀 슬라이드

<div class="slide" id="slide">
  <span class="badge" id="badge"></span>
  <div class="logo l1"></div><div class="logo l2"></div>
  <div class="shape"></div>
  <p class="ttl" id="ttl"></p>
  <p class="sub" id="sub"></p>
  <p class="meta" id="meta"></p>
</div>

.slide{position:absolute;inset:6%;border-radius:clamp(6px,1.6vmin,14px);background:linear-gradient(135deg,var(--bg),var(--surface));border:1px solid var(--line);overflow:hidden}
.slide.good{background:var(--surface);display:flex;flex-direction:column;align-items:center;justify-content:center}
.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:var(--surface);color:var(--accent-2)}
.slide.good .badge{color:var(--accent-3)}
.logo{position:absolute;width:9%;aspect-ratio:1;border-radius:4px;background:var(--accent)}
.l1{top:5%;left:5%}
.l2{top:5%;left:16%;background:var(--accent-2)}
.shape{position:absolute;width:30%;aspect-ratio:1;border-radius:50%;background:var(--accent-3);opacity:.25;bottom:-10%;right:-6%}
.slide.good .logo,.slide.good .shape{display:none}
.ttl{position:absolute;top:14%;left:6%;margin:0;font:800 clamp(11px,3vmin,16px)/1.2 -apple-system,sans-serif;color:var(--fg)}
.sub{position:absolute;bottom:28%;right:8%;margin:0;font:600 clamp(9px,2.2vmin,12px)/1.3 -apple-system,sans-serif;color:var(--accent)}
.meta{position:absolute;bottom:6%;left:6%;margin:0;font:500 clamp(8px,1.8vmin,10px)/1.3 monospace;color:var(--muted)}
.slide.good .ttl{position:static;text-align:center;font-size:clamp(14px,4vmin,22px)}
.slide.good .sub{position:static;text-align:center;color:var(--muted);font-weight:500;margin-top:3vmin}
.slide.good .meta{position:static;text-align:center;margin-top:6vmin}

const el = (id) => document.getElementById(id);
const slide = el('slide');
const L = {
  ko: { badge: ['✕ 산만함', '✓ 정돈됨'], ttl: '디자인 시스템으로 팀 속도 높이기', sub: '3분기 프로덕트 회고', meta: '정하늘 · 2026.03.12' },
  en: { badge: ['✕ Cluttered', '✓ Composed'], ttl: 'Shipping Faster with a Design System', sub: 'Q3 Product Retro', meta: 'Haneul Jung · Mar 12, 2026' },
};
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('sub').textContent = t.sub; el('meta').textContent = t.meta;
}
render();
setInterval(() => { n++; render(); }, 2200);