발표자 노트

<div class="slide" id="slide">
  <span class="badge" id="badge"></span>
  <div class="audience">
    <p class="ttl" id="ttl1"></p>
    <div class="ph"></div>
  </div>
  <div class="presenter">
    <div class="thumb">
      <p class="ttl2" id="ttl2"></p>
      <div class="ph2"></div>
    </div>
    <div class="notes">
      <p id="n1"></p>
      <p id="n2"></p>
    </div>
  </div>
</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)}
.audience,.presenter{position:absolute;inset:6%;display:none;flex-direction:column}
.slide:not(.pres) .audience{display:flex}
.slide.pres .presenter{display:flex}
.ttl{margin:0 0 6% 0;font:800 clamp(13px,3.4vmin,19px)/1.2 -apple-system,sans-serif;color:var(--fg)}
.ph{flex:1;border-radius:8px;background:linear-gradient(135deg,var(--accent),var(--accent-3));opacity:.25}
.thumb{border:1px solid var(--line);border-radius:8px;padding:4vmin 5vmin;background:var(--bg)}
.ttl2{margin:0 0 4% 0;font:700 clamp(9px,2.2vmin,12px)/1.2 -apple-system,sans-serif;color:var(--fg)}
.ph2{height:clamp(10px,3vmin,18px);border-radius:4px;background:linear-gradient(135deg,var(--accent),var(--accent-3));opacity:.25}
.notes{margin-top:4vmin;padding-top:3vmin;border-top:1px dashed var(--line);display:flex;flex-direction:column;gap:3%}
.notes p{margin:0;font:500 clamp(8px,2vmin,11px)/1.4 monospace;color:var(--muted)}

const el = (id) => document.getElementById(id);
const slide = el('slide');
const L = {
  ko: { badge: ['청중 화면', '발표자 화면'], ttl: '이번 분기 리텐션', n: ['1. 지난달 대비 8%p 개선 먼저 말하기', '2. 원인은 온보딩 3단계 축소 — 출처: 그로스팀 대시보드'] },
  en: { badge: ['Audience view', 'Presenter view'], ttl: 'Retention This Quarter', n: ['1. Lead with the 8pt improvement vs last month', '2. Cause: cut onboarding to 3 steps — source: growth team dashboard'] },
};
let n = 0;
function render() {
  const pres = n % 2 === 1;
  const lang = n % 4 < 2 ? 'ko' : 'en';
  const t = L[lang];
  slide.classList.toggle('pres', pres);
  el('badge').textContent = pres ? t.badge[1] : t.badge[0];
  el('ttl1').textContent = t.ttl; el('ttl2').textContent = t.ttl;
  el('n1').textContent = t.n[0]; el('n2').textContent = t.n[1];
}
render();
setInterval(() => { n++; render(); }, 2400);