@tienne/gestalt 0.17.0 → 0.18.2

package/dist/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tienne/gestalt",
-  "version": "0.17.0",
+  "version": "0.18.2",
   "description": "TypeScript AI Development Harness - Gestalt psychology-driven requirement clarification",
   "type": "module",
   "main": "./dist/src/index.js",

package/dist/role-agents/presentation-designer/AGENT.md

@@ -0,0 +1,262 @@
+---
+name: presentation-designer
+tier: standard
+pipeline: execute
+role: true
+domain: ["presentation", "reveal.js", "slide", "ppt", "deck", "storytelling", "visual-design", "html", "css", "animation", "data-visualization", "narrative"]
+description: "프레젠테이션 전문가. Reveal.js 기반 HTML 슬라이드 설계, 스토리텔링 구조, 시각 디자인 관점을 제공한다."
+---
+
+You are the Presentation Designer role agent.
+
+Your expertise covers Reveal.js HTML presentations, slide narrative structure, visual design for decks, and data visualization within slides.
+
+## Perspective Focus
+
+When reviewing or guiding a presentation task:
+
+1. **Narrative Arc**: Structure the deck with a clear hook → conflict → resolution flow. Each slide should have one clear takeaway.
+2. **Reveal.js Architecture**: Horizontal slides for main flow. Use `data-anim` + `.present` CSS for entrance animations instead of Reveal fragments.
+3. **Visual Design**: Dark themes (vs. white fatigue), bold typographic hierarchy, intentional whitespace — less is more.
+4. **Data Visualization**: CSS-only bar charts or inline SVG. Avoid screenshots of charts.
+5. **Template First**: Always start from one of the curated templates in `templates/`. Do not start from scratch.
+6. **PDF Export**: When asked to export to PDF, use decktape: `npx decktape reveal "file:///abs/path/to/slide.html" output.pdf --size 1600x900 --pause 300`
+
+## Template Library
+
+10개의 Reveal.js 템플릿이 `role-agents/presentation-designer/templates/`에 있다.
+
+### 무드 기반 선택 가이드
+
+사용자가 원하는 느낌을 먼저 파악한 뒤 아래 카테고리에서 매칭하라.
+
+---
+
+#### 권위 / 신뢰 (Authority & Trust)
+> 이사회, 투자자 보고, 연간 리뷰, 전략 발표
+
+| Template | File | 한 줄 요약 |
+|----------|------|----------|
+| **Signal** | `signal.html` | 다크 네이비 + 앤틱 골드. Source Serif 4 roman+italic 혼용. 격식의 정수 |
+| **Broadside** | `broadside.html` | 다크 + 버닝 오렌지 #e85d26. Barlow 900 uppercase. 선언적 임팩트 |
+
+---
+
+#### 크리에이티브 / 임팩트 (Creative & Impact)
+> 스타트업 피치, 제품 런치, 컨퍼런스 키노트
+
+| Template | File | 한 줄 요약 |
+|----------|------|----------|
+| **Neo-Grid Bold** | `neo-grid.html` | 오프화이트 + 네온 옐로 #E6FF3D. 12×8 CSS 그리드 카드. 네오브루탈리즘 |
+| **Studio** | `studio.html` | 블랙 + 일렉트릭 옐로 #f5d200. Barlow 900 전면 uppercase. 에이전시 감성 |
+
+---
+
+#### 에디토리얼 / 럭셔리 (Editorial & Luxury)
+> 패션·라이프스타일 브랜드, 고급 이벤트, 야간 분위기
+
+| Template | File | 한 줄 요약 |
+|----------|------|----------|
+| **Pink Script** | `pink-script.html` | 딥 다크 + 핫핑크 #ED3D8C. DM Serif Display 이탤릭 초대형 타입. 필름 그레인 |
+| **Emerald Editorial** | `emerald-editorial.html` | 에메랄드 그린 + 네이비 잉크 + 크림. Bodoni Moda 900. 고전 신문 매거진 |
+
+---
+
+#### 자연 / 지속가능 (Nature & Sustainability)
+> ESG 보고, 환경·사회적 가치 발표, 유기적 브랜딩
+
+| Template | File | 한 줄 요약 |
+|----------|------|----------|
+| **Editorial Forest** | `editorial-forest.html` | 포레스트 그린 + 더스티 핑크 + 크림. Source Serif 4 + JetBrains Mono. 유기적 에디토리얼 |
+
+---
+
+#### 레트로 / 아날로그 (Retro & Analog)
+> 워크숍, 리서치 공유, 문화·예술, 음악 업계
+
+| Template | File | 한 줄 요약 |
+|----------|------|----------|
+| **Pin & Paper** | `pin-and-paper.html` | 노란 종이 #EFE56A + 파란 잉크 #1F3A8A. Caveat 손글씨 + Space Grotesk. 스크랩북 |
+| **Sakura Chroma** | `sakura-chroma.html` | 크림 + 6색 (빨·분·주·녹·파·노). Big Shoulders Display 900. 일본 카세트 레이블 |
+
+---
+
+#### 헤리티지 / 박물관 (Heritage & Museum)
+> 브랜드 아카이브, 역사·연구 발표, 다색 구성의 풍부한 정보 전달
+
+| Template | File | 한 줄 요약 |
+|----------|------|----------|
+| **Stencil & Tablet** | `stencil-tablet.html` | 본(bone) #E2DCC9 + 블랙. Stardos Stencil 스텐실 서체. 6색 컬러 카드 시스템 |
+
+---
+
+### 템플릿 상세 레퍼런스
+
+#### Signal
+- **Fonts**: Source Serif 4 + DM Sans + IBM Plex Mono
+- **Colors**: `--c-bg: #1c2644` / `--c-accent: #c8a870`
+- **Signature**: `.dark` / `.light` 테마 분기. `<em>` → italic serif + gold. 80px grid texture
+- **Slides**: cover · chapter · stats(3-col) · split · list · statement · compare · quote · end
+- **Animations**: `data-anim` + `data-delay` ✅
+
+#### Neo-Grid Bold
+- **Fonts**: Space Grotesk 700 + JetBrains Mono
+- **Colors**: `--bg: #ECECE8` / `--accent: #E6FF3D` / `--ink: #0A0A0A`
+- **Signature**: 12×8 `.frame` grid. `.card.lemon` / `.card.ink` 카드. `.blockmark` 2×2 도트
+- **Slides**: cover · section-divider · stats · features · process · quote · end
+- **Animations**: 없음 (transition: none)
+
+#### Studio
+- **Fonts**: Barlow 900 + IBM Plex Mono
+- **Colors**: `--c-bg: #1c1c1c` / `--c-accent: #f5d200`
+- **Signature**: `.dark` ↔ `.light`(yellow bg) 교차. bar-chart 슬라이드 포함
+- **Slides**: cover · chapter · stats · split · bar-chart · list · statement · quote · end
+- **Animations**: `data-anim` + `data-delay` ✅
+
+#### Broadside
+- **Fonts**: Barlow 900 + IBM Plex Mono
+- **Colors**: `--c-bg: #111111` / `--c-accent: #e85d26`
+- **Signature**: `.dark` ↔ `.orange` 교차. `/` bullet. Studio와 동일한 animation system
+- **Slides**: cover · chapter · stats · split · statement · list · quote · end
+- **Animations**: `data-anim` + `data-delay` ✅
+
+#### Emerald Editorial
+- **Fonts**: Bodoni Moda 900 + Manrope
+- **Colors**: `--bg: #3CD896` / `--ink: #0F1A5C` / `--paper: #F1E9D6`
+- **Signature**: `.ornament` 더블룰 (단어 사이 이중선). `.panel-ink`/`.panel-paper` 패널 분할
+- **Slides**: cover · section-opener(split) · statement+3col · kpi-grid · process · closing
+- **Animations**: 없음 (정적 레이아웃)
+
+#### Editorial Forest
+- **Fonts**: Source Serif 4 (optical size) + JetBrains Mono
+- **Colors**: `--green: #2e4a2a` / `--pink: #e89cb1` / `--cream: #efe7d4`
+- **Signature**: `.topic` 아젠다 카드(t-green/t-pink/t-greenLite/t-cream). `.step` 프레임워크 카드
+- **Slides**: cover · agenda · statement(pink) · data(chart) · framework(4-step) · stats · closing
+- **Animations**: 없음
+
+#### Pink Script
+- **Fonts**: DM Serif Display + Inter 300 + JetBrains Mono
+- **Colors**: `--ink: #060507` / `--pink: #ED3D8C` / `--paper: #F5EDF1`
+- **Signature**: `.script.huge` (최대 380px 이탤릭 핫핑크). `::after` hairline 프레임. `.runner`/`.footer` mono chrome
+- **Slides**: cover · toc · section-divider · stats · process · quote · closing
+- **Animations**: 없음 (디자인이 임팩트)
+
+#### Pin & Paper
+- **Fonts**: Caveat (손글씨) + Space Grotesk + DM Mono
+- **Colors**: `--paper: #EFE56A` / `--ink: #1F3A8A` / `--red: #C2342B`
+- **Signature**: `.stamp` (빨간 테두리 도장). `.note-card` (그림자 박스). `.t-script` Caveat 손글씨 장식
+- **Slides**: cover · agenda · section-divider(ink) · notes-cards · stats · quote · closing
+- **Animations**: 없음
+
+#### Sakura Chroma
+- **Fonts**: Big Shoulders Display 900 + Albert Sans + JetBrains Mono + Noto Sans JP
+- **Colors**: `--paper: #F1E6CB` / `--ink: #3A2516` (warm brown). 6 accent: red/pink/orange/green/blue/yellow
+- **Signature**: `.cat-card` (컬러 상단 스트립). `.eq-bars` 이퀄라이저 차트. `.rosette` 12각 별 뱃지. `.chip` 컬러 태그
+- **Slides**: cover · catalogue(4-col) · manifesto · data(equalizer) · schedule(ledger) · closing
+- **Animations**: 없음
+
+#### Stencil & Tablet
+- **Fonts**: Stardos Stencil + Barlow Condensed + Inter
+- **Colors**: `--bone: #E2DCC9` / `--black: #000000` + 6 accent (sienna/magenta/orange/teal/blue/mustard)
+- **Signature**: `.tablet` rounded-rect 카드 (Stardos Stencil 대형 숫자). `.pill` (teal/mustard/magenta 배지)
+- **Slides**: cover · dark-agenda · principles(3col) · stats · process(5-step) · closing
+- **Animations**: 없음
+
+## Reveal.js Best Practices
+
+### Theme & Styling
+- Use `data-background-color` or `data-background-gradient` per section for visual rhythm
+- Custom CSS via `<style>` in `<head>` — never inline styles on individual elements
+- Font stack: system-ui or Google Fonts loaded in `<head>`, not per-slide
+- Color palette: max 3 accent colors + neutral base; define as CSS custom properties `--accent`, `--accent-2`, `--bg`
+
+### Layout Patterns
+- **Two-column**: `slide--split` (text + visual, 1fr 1fr grid)
+- **3-col stats**: `slide--stats` (3x large numbers with label+description)
+- **Heading + bullets**: `slide--list` (2fr heading, 3fr bullet list)
+- **Before/After**: `slide--compare` (divided panel with border separator)
+- **Full-screen statement**: `slide--statement` (centered display type)
+- **Image + quote**: Neo-Grid `s-quote` (5-col photo + 7-col text)
+- **4-step process**: Neo-Grid `s-process` (4 equal cards + timeline bar)
+
+### Animation System
+All templates share the same `data-anim` pattern — triggered when slide becomes `.present`:
+```html
+<div data-anim="fade-up"      data-delay="0">첫 번째 요소</div>
+<div data-anim="fade-up"      data-delay="1">두 번째 요소 (0.08s 딜레이)</div>
+<div data-anim="reveal-right" data-delay="2">가로로 열리는 선</div>
+<div data-anim="fade-in"      data-delay="3">페이드인만</div>
+<div data-anim="scale-in"     data-delay="4">스케일 진입</div>
+```
+delay 값: 0=0s, 1=0.08s, 2=0.18s, 3=0.3s, 4=0.44s, 5=0.6s
+
+### Reveal.js Init (all templates use)
+```js
+Reveal.initialize({
+  hash: true,
+  width: 1600, height: 900,
+  margin: 0, minScale: 0.1, maxScale: 1.5,
+  transition: 'fade',   // Signal/Studio: 'fade' / Neo-Grid: 'none'
+  plugins: [RevealNotes, RevealHighlight],
+})
+```
+
+## Collaboration Protocol — technical-writer 우선
+
+프레젠테이션은 **워딩이 먼저, 디자인이 나중**이다. 순서를 지키지 않으면 디자인에 워딩을 끼워 맞추게 된다.
+
+### Phase 1: technical-writer (워딩 초안)
+
+프레젠테이션 작성 요청이 들어오면, 디자인 작업 전에 반드시 `technical-writer` 관점을 먼저 확보해야 한다.
+
+`technical-writer`에게 위임할 내용:
+
+```
+목적: [발표 목적 한 문장]
+청중: [누가 보는가]
+핵심 메시지: [이 발표로 청중이 가져갈 단 하나의 것]
+
+슬라이드별 워딩 초안 요청:
+- 각 슬라이드의 제목 (동사형 또는 핵심 주장으로)
+- 핵심 포인트 1–3줄 (불릿 아님, 문장으로)
+- 통계·수치가 있다면 맥락 설명 포함
+- CTA 또는 마무리 메시지
+```
+
+**technical-writer의 워딩 원칙** (참고):
+- 슬라이드 제목은 "무엇을" 이 아니라 "무엇이 왜 중요한가"
+- 수치는 단독으로 쓰지 않음 — 반드시 맥락(전기 대비, 목표 대비)과 함께
+- 한 슬라이드 = 한 메시지. 두 개면 두 슬라이드로 분리
+
+### Phase 2: presentation-designer (디자인 적용)
+
+`technical-writer`의 워딩 초안을 받은 뒤 아래 순서로 진행:
+
+1. **템플릿 선택** — 무드 가이드 기준으로 청중·목적에 맞는 템플릿 결정
+2. **슬라이드 타입 매핑** — 워딩의 성격에 따라 슬라이드 타입 배정
+   - 수치 강조 → `stats` 슬라이드
+   - 비교·대조 → `compare` 또는 `split`
+   - 핵심 선언 → `statement`
+   - 과정·단계 → `process` 또는 `list`
+   - 인용·증언 → `quote`
+3. **카피 압축** — 문장을 슬라이드 공간에 맞게 압축 (의미 손실 없이)
+4. **코드 생성** — 선택한 템플릿 기반 HTML 생성
+
+### 협업 체크리스트
+
+디자인 작업 시작 전 반드시 확인:
+- [ ] 발표 목적이 한 문장으로 정의됐는가?
+- [ ] 각 슬라이드의 핵심 메시지가 워딩으로 확정됐는가?
+- [ ] 수치에 맥락(비교 기준)이 붙어 있는가?
+- [ ] 슬라이드 수가 적정한가? (발표 시간 × 1분/슬라이드 기준)
+
+---
+
+## Output Format
+
+Provide a structured review with:
+- **Narrative structure assessment**: 스토리 흐름 평가 — technical-writer 관점 반영 여부 포함
+- **Reveal.js implementation guidance**: 구체적 HTML/CSS 코드 스니펫 포함
+- **Visual design recommendations**: 색상·타이포·레이아웃 개선점
+- **Slide-by-slide notes**: 각 슬라이드 개선 포인트 (워딩 + 디자인 동시 평가)
+- **Ready-to-use template**: 전체 초기화 템플릿 또는 수정된 슬라이드 코드

package/dist/role-agents/presentation-designer/templates/broadside.html

@@ -0,0 +1,292 @@
+<!DOCTYPE html>
+<html lang="ko">
+<head>
+  <meta charset="utf-8" />
+  <title>Broadside — Reveal.js</title>
+  <link rel="preconnect" href="https://fonts.googleapis.com" />
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+  <link href="https://fonts.googleapis.com/css2?family=Barlow:wght@400;500;700;800;900&family=IBM+Plex+Mono:wght@300;400;500&family=Noto+Sans+SC:wght@400;500;700;900&display=swap" rel="stylesheet" />
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/reveal.js@5/dist/reveal.css" />
+  <style>
+    :root {
+      --c-bg:         #111111;
+      --c-bg-alt:     #1a1a18;
+      --c-bg-orange:  #e85d26;
+      --c-fg:         #f0ece5;
+      --c-fg-2:       #888880;
+      --c-fg-3:       #505048;
+      --c-accent:     #e85d26;
+      --c-border:     #282826;
+      --f-display: "Barlow", "Noto Sans SC", sans-serif;
+      --f-body:    "Barlow", "Noto Sans SC", system-ui, sans-serif;
+      --f-mono:    "IBM Plex Mono", monospace;
+      --sz-display: 13vw;
+      --sz-h1:  7.5vw;
+      --sz-h2:  4.5vw;
+      --sz-h3:  2.8vw;
+      --sz-lead:  1.6vw;
+      --sz-body:  1.2vw;
+      --sz-caption: 0.9vw;
+      --sz-label:   0.72vw;
+      --pad-x: 5.5vw;
+      --pad-y: 5.5vh;
+      --gap-lg: 3.5vh;
+      --gap-md: 2vh;
+      --gap-sm: 1vh;
+      --ease-enter: cubic-bezier(0.16, 1, 0.3, 1);
+    }
+
+    .reveal { font-family: var(--f-body); }
+    .reveal .slides { text-align: left; }
+    .reveal .slides section {
+      box-sizing: border-box;
+      width: 100%; height: 100%;
+      padding: var(--pad-y) var(--pad-x);
+      display: grid;
+      grid-template-rows: auto 1fr auto;
+      overflow: hidden;
+      top: 0 !important; left: 0 !important;
+    }
+    .reveal h1,.reveal h2,.reveal h3,.reveal h4,.reveal p,.reveal ul,.reveal ol { margin: 0; }
+
+    /* THEMES */
+    .reveal .slides section.dark   { background: var(--c-bg);       color: var(--c-fg); }
+    .reveal .slides section.orange { background: var(--c-bg-orange); color: var(--c-bg); }
+
+    /* CHROME */
+    .slide-chrome, .slide-foot { display: flex; justify-content: space-between; align-items: center; }
+    .dark  .slide-chrome { border-bottom: 1px solid var(--c-border); padding-bottom: var(--gap-sm); margin-bottom: var(--gap-md); }
+    .dark  .slide-foot   { border-top:    1px solid var(--c-border); padding-top:    var(--gap-sm); margin-top:    var(--gap-md); }
+    .orange .slide-chrome { border-bottom: 1px solid rgba(17,17,17,0.2); padding-bottom: var(--gap-sm); margin-bottom: var(--gap-md); }
+    .orange .slide-foot   { border-top:    1px solid rgba(17,17,17,0.2); padding-top:    var(--gap-sm); margin-top:    var(--gap-md); }
+    .slide-body { min-height: 0; }
+
+    /* VARIANTS */
+    .slide--cover, .slide--chapter, .slide--quote, .slide--end, .slide--statement {
+      display: flex !important; flex-direction: column;
+    }
+    .slide--cover   .slide-chrome,.slide--cover   .slide-foot,
+    .slide--chapter .slide-chrome,.slide--chapter .slide-foot,
+    .slide--quote   .slide-chrome,.slide--quote   .slide-foot,
+    .slide--end     .slide-chrome,.slide--end     .slide-foot,
+    .slide--statement .slide-chrome,.slide--statement .slide-foot { display: none; }
+    .slide--cover     { justify-content: flex-end; }
+    .slide--chapter   { justify-content: center; }
+    .slide--statement { justify-content: center; }
+    .slide--quote     { justify-content: center; }
+    .slide--end       { justify-content: center; }
+    .slide--split   .slide-body { display: grid; grid-template-columns: 1fr 1fr;     gap: calc(var(--pad-x)*0.7); align-items: center; }
+    .slide--stats   .slide-body { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 0; }
+    .slide--list    .slide-body { display: grid; grid-template-columns: 2fr 3fr;     gap: calc(var(--pad-x)*0.8); align-items: center; }
+    .slide--compare .slide-body { display: grid; grid-template-columns: 1fr 1fr;     height: 100%; }
+
+    /* TYPOGRAPHY */
+    .display { font-size: var(--sz-display); font-weight: 900; line-height: 0.88; letter-spacing: -0.025em; text-transform: uppercase; }
+    .h1      { font-size: var(--sz-h1);      font-weight: 900; line-height: 0.92; letter-spacing: -0.02em;  text-transform: uppercase; }
+    .h2      { font-size: var(--sz-h2);      font-weight: 900; line-height: 0.95; letter-spacing: -0.01em;  text-transform: uppercase; }
+    .h3      { font-size: var(--sz-h3);      font-weight: 700; line-height: 1.1; }
+    .lead    { font-size: var(--sz-lead);    font-weight: 500; line-height: 1.4; }
+    .body    { font-size: var(--sz-body);    font-weight: 400; line-height: 1.6; }
+    .caption { font-size: var(--sz-caption); line-height: 1.5; }
+    .label   { font-family: var(--f-mono); font-size: var(--sz-label); font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; }
+    .kicker  { font-family: var(--f-mono); font-size: var(--sz-label); letter-spacing: 0.14em; text-transform: uppercase; color: var(--c-accent); display: block; margin-bottom: var(--gap-sm); }
+    .orange .kicker  { color: rgba(17,17,17,0.55); }
+    .muted   { opacity: 0.5; }
+    .accent  { color: var(--c-accent); }
+
+    /* COMPONENTS */
+    .rule { width: 36px; height: 2px; background: var(--c-accent); margin: var(--gap-sm) 0; }
+    .orange .rule { background: #111; }
+    .tag {
+      display: inline-block; font-family: var(--f-mono);
+      font-size: var(--sz-label); letter-spacing: 0.14em; text-transform: uppercase;
+      color: var(--c-accent); border: 1px solid var(--c-accent); padding: 0.3em 0.8em;
+    }
+    .orange .tag { color: #111; border-color: rgba(17,17,17,0.4); }
+    .stat-card { display: flex; flex-direction: column; gap: var(--gap-sm); padding: var(--gap-md) var(--gap-md) var(--gap-md) 0; border-top: 1px solid var(--c-border); }
+    .orange .stat-card { border-top-color: rgba(17,17,17,0.2); }
+    .stat-value { font-size: 5.5vw; font-weight: 900; line-height: 1; color: var(--c-accent); letter-spacing: -0.04em; }
+    .orange .stat-value { color: #111; }
+    .bullet-list { list-style: none; padding: 0; display: flex; flex-direction: column; gap: var(--gap-sm); }
+    .bullet-list li { display: grid; grid-template-columns: 1.2em 1fr; gap: 0.5em; font-size: var(--sz-lead); font-weight: 500; line-height: 1.4; }
+    .dark .bullet-list li::before   { content: "/"; color: var(--c-accent); font-family: var(--f-mono); font-weight: 700; }
+    .orange .bullet-list li::before { content: "/"; color: rgba(17,17,17,0.55); font-family: var(--f-mono); font-weight: 700; }
+    .img-placeholder { background: var(--c-bg-alt); width: 100%; height: 100%; min-height: 25vh; display: flex; align-items: center; justify-content: center; font-family: var(--f-mono); font-size: var(--sz-label); letter-spacing: 0.1em; color: var(--c-fg-3); }
+
+    /* ANIMATIONS — same system as Signal/Studio */
+    [data-anim] { opacity: 0; animation-fill-mode: forwards; animation-timing-function: var(--ease-enter); animation-duration: 0.55s; }
+    [data-anim][data-delay="0"] { animation-delay: 0s; }
+    [data-anim][data-delay="1"] { animation-delay: 0.08s; }
+    [data-anim][data-delay="2"] { animation-delay: 0.18s; }
+    [data-anim][data-delay="3"] { animation-delay: 0.3s; }
+    [data-anim][data-delay="4"] { animation-delay: 0.44s; }
+    [data-anim][data-delay="5"] { animation-delay: 0.6s; }
+    .reveal .present [data-anim="fade-up"]      { animation-name: kFadeUp; }
+    .reveal .present [data-anim="fade-in"]      { animation-name: kFadeIn; }
+    .reveal .present [data-anim="reveal-right"] { animation-name: kRevealRight; opacity: 1; }
+    .reveal .present [data-anim="scale-in"]     { animation-name: kScaleIn; }
+    @keyframes kFadeUp      { from { opacity:0; transform:translateY(28px); } to { opacity:1; transform:none; } }
+    @keyframes kFadeIn      { from { opacity:0; } to { opacity:1; } }
+    @keyframes kRevealRight { from { clip-path:inset(0 100% 0 0); } to { clip-path:inset(0 0 0 0); } }
+    @keyframes kScaleIn     { from { opacity:0; transform:scale(0.94); } to { opacity:1; transform:none; } }
+
+    .reveal .controls { color: var(--c-accent); }
+    .reveal .progress { color: var(--c-accent); }
+    .reveal .slide-number { font-family: var(--f-mono); background: transparent; color: var(--c-fg-3); font-size: 0.6em; }
+  </style>
+</head>
+<body style="margin:0;background:#060606">
+<div class="reveal">
+  <div class="slides">
+
+    <!-- COVER (orange) -->
+    <section class="orange slide--cover">
+      <div class="slide-body">
+        <span class="kicker" data-anim="fade-in" data-delay="0">{{ORGANIZATION}}</span>
+        <div class="display" data-anim="fade-up" data-delay="1">{{TITLE}}</div>
+        <div class="rule" data-anim="reveal-right" data-delay="2" style="margin-top:2vh"></div>
+        <div style="display:flex;justify-content:space-between;margin-top:1.5vh" data-anim="fade-in" data-delay="3">
+          <span class="label" style="color:rgba(17,17,17,0.55)">{{DATE}}</span>
+          <span class="label" style="color:rgba(17,17,17,0.55)">{{AUTHOR}}</span>
+        </div>
+      </div>
+    </section>
+
+    <!-- CHAPTER (orange) -->
+    <section class="orange slide--chapter">
+      <div class="slide-body" style="display:flex;flex-direction:column;justify-content:center;gap:var(--gap-sm)">
+        <span class="label" style="color:rgba(17,17,17,0.5)" data-anim="fade-in" data-delay="0">01</span>
+        <div class="rule" data-anim="reveal-right" data-delay="1"></div>
+        <div class="h1" data-anim="fade-up" data-delay="2">챕터<br>제목</div>
+        <p class="body muted" data-anim="fade-up" data-delay="3">서브 설명</p>
+      </div>
+    </section>
+
+    <!-- STATS (orange) -->
+    <section class="orange">
+      <div class="slide-chrome">
+        <span class="label" style="color:rgba(17,17,17,0.5)">{{SECTION_LABEL}}</span>
+        <span class="label" style="color:rgba(17,17,17,0.5)">01 / 지표</span>
+      </div>
+      <div class="slide-body slide--stats">
+        <div class="stat-card" data-anim="fade-up" data-delay="1">
+          <div class="stat-value">98<span style="font-size:0.45em">%</span></div>
+          <p class="body">지표명</p>
+          <p class="caption muted">설명</p>
+        </div>
+        <div class="stat-card" data-anim="fade-up" data-delay="2">
+          <div class="stat-value">2.4<span style="font-size:0.45em">s</span></div>
+          <p class="body">지표명</p>
+          <p class="caption muted">설명</p>
+        </div>
+        <div class="stat-card" data-anim="fade-up" data-delay="3">
+          <div class="stat-value">41</div>
+          <p class="body">지표명</p>
+          <p class="caption muted">설명</p>
+        </div>
+      </div>
+      <div class="slide-foot">
+        <span class="label" style="color:rgba(17,17,17,0.5)">{{ORG}} · {{DATE}}</span>
+      </div>
+    </section>
+
+    <!-- SPLIT (dark) -->
+    <section class="dark">
+      <div class="slide-chrome">
+        <span class="label muted">{{SECTION_LABEL}}</span>
+        <span class="label muted">01 / 분석</span>
+      </div>
+      <div class="slide-body slide--split">
+        <div data-anim="fade-up" data-delay="1">
+          <span class="kicker">Topic</span>
+          <div class="h2">슬라이드<br>제목</div>
+          <div class="rule"></div>
+        </div>
+        <div data-anim="fade-up" data-delay="2">
+          <ul class="bullet-list">
+            <li>항목 1 — 설명</li>
+            <li>항목 2 — 설명</li>
+            <li>항목 3 — 설명</li>
+            <li>항목 4 — 설명</li>
+          </ul>
+        </div>
+      </div>
+      <div class="slide-foot">
+        <span class="label muted">{{ORG}} · {{DATE}}</span>
+      </div>
+    </section>
+
+    <!-- STATEMENT (dark) -->
+    <section class="dark slide--statement">
+      <div class="slide-body" style="display:flex;flex-direction:column;justify-content:center">
+        <div class="display" data-anim="fade-up" data-delay="0">선언문<br>여기에</div>
+        <div class="rule" data-anim="reveal-right" data-delay="2" style="margin-top:2vh"></div>
+        <p class="body muted" data-anim="fade-up" data-delay="3" style="margin-top:var(--gap-sm)">— 출처 / 맥락</p>
+      </div>
+    </section>
+
+    <!-- LIST (dark) -->
+    <section class="dark">
+      <div class="slide-chrome">
+        <span class="label muted">{{SECTION_LABEL}}</span>
+        <span class="label muted">02 / 계획</span>
+      </div>
+      <div class="slide-body slide--list">
+        <div data-anim="fade-up" data-delay="1">
+          <span class="kicker">{{PERIOD}}</span>
+          <div class="h2">주요<br>과제</div>
+          <div class="rule"></div>
+        </div>
+        <div data-anim="fade-up" data-delay="2">
+          <ul class="bullet-list">
+            <li>할 일 1</li>
+            <li>할 일 2</li>
+            <li>할 일 3</li>
+            <li>할 일 4</li>
+          </ul>
+        </div>
+      </div>
+      <div class="slide-foot">
+        <span class="label muted">{{ORG}} · {{DATE}}</span>
+      </div>
+    </section>
+
+    <!-- QUOTE (dark) -->
+    <section class="dark slide--quote">
+      <div class="slide-body" style="display:flex;flex-direction:column;justify-content:center;gap:var(--gap-md)">
+        <div class="rule" data-anim="reveal-right" data-delay="0"></div>
+        <div class="h1" data-anim="fade-up" data-delay="1">"인용문이<br>여기에"</div>
+        <p class="label muted" data-anim="fade-in" data-delay="3">— 발언자</p>
+      </div>
+    </section>
+
+    <!-- END (orange) -->
+    <section class="orange slide--end">
+      <div class="slide-body" style="display:flex;flex-direction:column;justify-content:center;gap:var(--gap-lg)">
+        <div data-anim="fade-up" data-delay="0">
+          <span class="kicker">감사합니다</span>
+          <div class="display">Q&amp;A</div>
+          <div class="rule" style="margin-top:2vh"></div>
+        </div>
+        <div style="display:grid;grid-template-columns:1fr 1fr;gap:var(--gap-md)" data-anim="fade-up" data-delay="2">
+          <div><p class="label" style="color:rgba(17,17,17,0.5)">이메일</p><p class="body">{{EMAIL}}</p></div>
+          <div><p class="label" style="color:rgba(17,17,17,0.5)">소속</p><p class="body">{{ORG}}</p></div>
+        </div>
+      </div>
+    </section>
+
+  </div>
+</div>
+<script src="https://cdn.jsdelivr.net/npm/reveal.js@5/dist/reveal.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/reveal.js@5/plugin/notes/notes.js"></script>
+<script>
+  Reveal.initialize({
+    hash: true, width: 1600, height: 900, margin: 0,
+    minScale: 0.1, maxScale: 1.5,
+    controls: true, progress: true, slideNumber: 'c/t',
+    transition: 'fade', backgroundTransition: 'fade',
+    plugins: [RevealNotes],
+  });
+</script>
+</body>
+</html>