슬라이드 그리드

<div class="slide" id="slide">
  <span class="badge" id="badge"></span>
  <div class="gridlines"></div>
  <p class="ttl" id="ttl"></p>
  <div class="img"></div>
  <p class="cap" id="cap"></p>
</div>

.slide{position:absolute;inset:6%;border-radius:clamp(6px,1.6vmin,14px);background:var(--surface);border:1px solid var(--line);padding:6vmin}
.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)}
.gridlines{position:absolute;inset:6%;opacity:0;pointer-events:none;background-image:repeating-linear-gradient(90deg,var(--line) 0 1px,transparent 1px calc(100% / 6))}
.slide.good .gridlines{opacity:1}
.ttl{position:absolute;top:10%;left:22%;margin:0;font:700 clamp(10px,2.6vmin,14px)/1.2 -apple-system,sans-serif;color:var(--fg)}
.img{position:absolute;top:32%;left:9%;width:35%;height:30%;border-radius:6px;background:linear-gradient(135deg,var(--accent),var(--accent-3));opacity:.3}
.cap{position:absolute;bottom:10%;left:31%;margin:0;font:500 clamp(8px,1.8vmin,10px)/1.3 -apple-system,sans-serif;color:var(--muted)}
.slide.good .ttl{left:9%;top:10%}
.slide.good .img{left:9%;top:32%}
.slide.good .cap{left:9%;bottom:10%}

const el = (id) => document.getElementById(id);
const slide = el('slide');
const L = {
  ko: { badge: ['✕ 격자 없음', '✓ 격자 정렬'], ttl: '분기 회고', cap: '그림 1. 지표 요약' },
  en: { badge: ['✕ No grid', '✓ Grid aligned'], ttl: 'Quarterly Retro', cap: 'Fig 1. Metric summary' },
};
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('cap').textContent = t.cap;
}
render();
setInterval(() => { n++; render(); }, 2200);