npm - @tienne/gestalt - Versions diffs - 0.17.0 → 0.18.0 - Mend

@tienne/gestalt 0.17.0 → 0.18.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (171) hide show

package/dist/role-agents/presentation-designer/templates/neo-grid.html ADDED Viewed

@@ -0,0 +1,407 @@
+<!DOCTYPE html>
+<html lang="ko">
+<head>
+  <meta charset="utf-8" />
+  <title>Neo-Grid Bold — 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=Space+Grotesk:wght@400;500;700&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet" />
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/reveal.js@5/dist/reveal.css" />
+  <style>
+    /* ── DESIGN TOKENS ────────────────────────────────────────────── */
+    :root {
+      --bg:     #ECECE8;
+      --ink:    #0A0A0A;
+      --paper:  #F5F4EF;
+      --accent: #E6FF3D;
+      --line:   #0A0A0A;
+    }
+    /* ── REVEAL RESET ─────────────────────────────────────────────── */
+    .reveal { font-family: "Space Grotesk", sans-serif; }
+    .reveal .slides { text-align: left; }
+    .reveal .slides section {
+      box-sizing: border-box;
+      width: 100%;
+      height: 100%;
+      padding: 0;
+      overflow: hidden;
+      top: 0 !important;
+      left: 0 !important;
+      background: var(--bg);
+      color: var(--ink);
+    }
+    .reveal h1, .reveal h2, .reveal h3, .reveal h4,
+    .reveal p, .reveal ul, .reveal ol { margin: 0; }
+    /* ── 12×8 GRID FRAME ──────────────────────────────────────────── */
+    .frame {
+      position: absolute;
+      inset: 40px;
+      display: grid;
+      grid-template-columns: repeat(12, 1fr);
+      grid-template-rows: repeat(8, 1fr);
+      gap: 12px;
+    }
+    /* ── CARD BASE ────────────────────────────────────────────────── */
+    .card {
+      background: var(--paper);
+      position: relative;
+      overflow: hidden;
+      padding: 1.4rem 1.6rem;
+      box-sizing: border-box;
+    }
+    .card.ink   { background: var(--ink);    color: var(--paper); }
+    .card.lemon { background: var(--accent); color: var(--ink); }
+    .card.ghost { background: transparent;   border: 1.5px solid var(--line); }
+    .card.flush { padding: 0; }
+    .card.bare  { background: var(--bg); padding: 0; }
+    /* ── PAGE NUMBER ──────────────────────────────────────────────── */
+    .pagenum {
+      position: absolute;
+      left: 0; bottom: 0;
+      font-family: "JetBrains Mono", monospace;
+      font-size: clamp(12px, 1.4vw, 20px);
+      padding: 12px 20px;
+      background: var(--paper);
+      color: var(--ink);
+      z-index: 10;
+    }
+    .pagenum.invert { background: var(--ink);    color: var(--paper); }
+    .pagenum.lemon  { background: var(--accent); color: var(--ink); }
+    /* ── CORNER MARK ──────────────────────────────────────────────── */
+    .corner-mark {
+      position: absolute;
+      top: 20px; right: 20px;
+      width: 30px; height: 30px;
+      display: grid;
+      grid-template-columns: 1fr 1fr;
+      grid-template-rows: 1fr 1fr;
+      gap: 4px;
+    }
+    .corner-mark span { background: currentColor; }
+    .corner-mark span:nth-child(2) { background: transparent; }
+    /* ── BLOCKMARK ────────────────────────────────────────────────── */
+    .blockmark {
+      display: grid;
+      grid-template-columns: 1fr 1fr;
+      grid-template-rows: 1fr 1fr;
+      gap: 5px;
+    }
+    .blockmark span { background: currentColor; }
+    .blockmark span:nth-child(2), .blockmark span:nth-child(3) { background: transparent; }
+    /* ── TYPOGRAPHY ───────────────────────────────────────────────── */
+    .t-display {
+      font-weight: 700;
+      font-size: clamp(48px, 8vw, 128px);
+      line-height: 0.92;
+      letter-spacing: -0.02em;
+      text-transform: uppercase;
+    }
+    .t-title {
+      font-weight: 700;
+      font-size: clamp(36px, 5.5vw, 88px);
+      line-height: 0.95;
+      letter-spacing: -0.015em;
+      text-transform: uppercase;
+    }
+    .t-subtitle {
+      font-weight: 700;
+      font-size: clamp(24px, 3.5vw, 56px);
+      line-height: 1;
+      letter-spacing: -0.01em;
+      text-transform: uppercase;
+    }
+    .t-body  { font-size: clamp(14px, 1.6vw, 26px); line-height: 1.4; font-weight: 400; }
+    .t-label { font-family: "JetBrains Mono", monospace; font-size: clamp(10px, 1.2vw, 20px); letter-spacing: 0.08em; text-transform: uppercase; opacity: 0.7; }
+    .t-stat  { font-weight: 700; font-size: clamp(64px, 11vw, 180px); line-height: 0.88; letter-spacing: -0.03em; }
+    .t-stat.sm { font-size: clamp(48px, 7vw, 112px); }
+    mark { background: var(--accent); color: var(--ink); padding: 0 4px; }
+    /* ── PHOTO PLACEHOLDER ────────────────────────────────────────── */
+    .ph {
+      position: absolute;
+      inset: 0;
+      background:
+        radial-gradient(80% 60% at 50% 50%, #1f1f1f 0%, #0a0a0a 80%),
+        repeating-linear-gradient(45deg, rgba(255,255,255,.05) 0 2px, transparent 2px 8px);
+    }
+    /* ── SLIDE: COVER ─────────────────────────────────────────────── */
+    .s-cover .photo-l  { grid-column: 1 / span 3;  grid-row: 1 / span 8; }
+    .s-cover .mid      { grid-column: 4 / span 5;  grid-row: 1 / span 5; }
+    .s-cover .title    { grid-column: 4 / span 5;  grid-row: 6 / span 3; }
+    .s-cover .photo-r  { grid-column: 9 / span 4;  grid-row: 1 / span 5; }
+    .s-cover .cap      { grid-column: 9 / span 4;  grid-row: 6 / span 3; }
+    /* ── SLIDE: TOC / END ─────────────────────────────────────────── */
+    .s-toc .head    { grid-column: 1 / span 12; grid-row: 1 / span 2; display: flex; align-items: flex-end; }
+    .s-toc .item-1  { grid-column: 1 / span 4;  grid-row: 3 / span 6; }
+    .s-toc .item-2  { grid-column: 5 / span 4;  grid-row: 3 / span 6; }
+    .s-toc .item-3  { grid-column: 9 / span 4;  grid-row: 3 / span 6; }
+    /* ── SLIDE: STATS ─────────────────────────────────────────────── */
+    .s-stats .accent-col { grid-column: 1 / span 2;  grid-row: 1 / span 8; }
+    .s-stats .copy       { grid-column: 3 / span 4;  grid-row: 1 / span 8; display: flex; flex-direction: column; justify-content: center; }
+    .s-stats .stat-1     { grid-column: 7 / span 6;  grid-row: 1 / span 4; display: flex; align-items: flex-end; }
+    .s-stats .stat-2     { grid-column: 7 / span 3;  grid-row: 5 / span 4; display: flex; align-items: flex-end; }
+    .s-stats .stat-3     { grid-column: 10 / span 3; grid-row: 5 / span 4; display: flex; align-items: flex-end; }
+    /* ── SLIDE: SECTION DIVIDER ───────────────────────────────────── */
+    .s-section .num   { grid-column: 1 / span 4;  grid-row: 1 / span 8; display: flex; align-items: center; justify-content: center; }
+    .s-section .title { grid-column: 5 / span 8;  grid-row: 1 / span 8; display: flex; align-items: center; }
+    /* ── SLIDE: FEATURES ──────────────────────────────────────────── */
+    .s-features .head   { grid-column: 1 / span 12; grid-row: 1 / span 2; display: flex; align-items: flex-end; }
+    .s-features .feat-1 { grid-column: 1 / span 4;  grid-row: 3 / span 6; }
+    .s-features .feat-2 { grid-column: 5 / span 4;  grid-row: 3 / span 6; }
+    .s-features .feat-3 { grid-column: 9 / span 4;  grid-row: 3 / span 6; }
+    /* ── SLIDE: PROCESS ───────────────────────────────────────────── */
+    .s-process .head      { grid-column: 1 / span 12; grid-row: 1 / span 2; display: flex; align-items: flex-end; }
+    .s-process .step-1    { grid-column: 1 / span 3;  grid-row: 3 / span 5; }
+    .s-process .step-2    { grid-column: 4 / span 3;  grid-row: 3 / span 5; }
+    .s-process .step-3    { grid-column: 7 / span 3;  grid-row: 3 / span 5; }
+    .s-process .step-4    { grid-column: 10 / span 3; grid-row: 3 / span 5; }
+    .s-process .timeline  { grid-column: 1 / span 12; grid-row: 8 / span 1; }
+    /* ── SLIDE: QUOTE ─────────────────────────────────────────────── */
+    .s-quote .photo { grid-column: 1 / span 5;  grid-row: 1 / span 8; }
+    .s-quote .body  { grid-column: 6 / span 7;  grid-row: 1 / span 8; display: flex; flex-direction: column; justify-content: center; gap: 1.5rem; }
+  </style>
+</head>
+<body style="margin:0;background:#1a1a1a">
+<div class="reveal">
+  <div class="slides">
+    <!-- ════════════════════════════════════════════════
+         COVER
+         ════════════════════════════════════════════════ -->
+    <section class="s-cover">
+      <div class="frame">
+        <div class="card ink flush photo-l"><div class="ph"></div></div>
+        <div class="card ink mid" style="display:flex;flex-direction:column;justify-content:space-between">
+          <span class="t-label" style="color:var(--paper)">{{ORGANIZATION}}</span>
+          <div class="blockmark" style="color:var(--accent);width:44px;height:44px">
+            <span></span><span></span><span></span><span></span>
+          </div>
+        </div>
+        <div class="card lemon title" style="display:flex;flex-direction:column;justify-content:flex-end">
+          <div class="t-display">{{TITLE}}</div>
+          <p class="t-label" style="margin-top:0.75rem;opacity:1">{{SUBTITLE}}</p>
+        </div>
+        <div class="card flush photo-r"><div class="ph"></div></div>
+        <div class="card cap" style="display:flex;flex-direction:column;justify-content:flex-end">
+          <p class="t-label">{{DATE}} · {{AUTHOR}}</p>
+        </div>
+      </div>
+      <div class="pagenum lemon">01</div>
+    </section>
+    <!-- ════════════════════════════════════════════════
+         SECTION DIVIDER
+         ════════════════════════════════════════════════ -->
+    <section class="s-section">
+      <div class="frame">
+        <div class="card lemon num">
+          <div class="t-stat" style="font-size:clamp(64px,14vw,220px)">01</div>
+        </div>
+        <div class="card ink title">
+          <div>
+            <p class="t-label" style="color:var(--paper);margin-bottom:1rem">Chapter</p>
+            <div class="t-title" style="color:var(--paper)">챕터<br><mark>제목</mark></div>
+          </div>
+        </div>
+      </div>
+      <div class="pagenum invert">02</div>
+    </section>
+    <!-- ════════════════════════════════════════════════
+         STATS
+         ════════════════════════════════════════════════ -->
+    <section class="s-stats">
+      <div class="frame">
+        <div class="card lemon accent-col"></div>
+        <div class="card copy">
+          <p class="t-label" style="margin-bottom:1rem">{{SECTION_LABEL}}</p>
+          <div class="t-subtitle">핵심<br>지표</div>
+        </div>
+        <div class="card ink stat-1">
+          <div style="padding:1.2rem">
+            <div class="t-stat" style="color:var(--accent)">98<span style="font-size:0.4em">%</span></div>
+            <p class="t-label" style="color:var(--paper);margin-top:0.5rem">지표명</p>
+          </div>
+        </div>
+        <div class="card stat-2">
+          <div style="padding:1rem">
+            <div class="t-stat sm">2.4<span style="font-size:0.35em">s</span></div>
+            <p class="t-label" style="margin-top:0.5rem">지표명</p>
+          </div>
+        </div>
+        <div class="card lemon stat-3">
+          <div style="padding:1rem">
+            <div class="t-stat sm">41</div>
+            <p class="t-label" style="margin-top:0.5rem;opacity:1">지표명</p>
+          </div>
+        </div>
+      </div>
+      <div class="pagenum">03</div>
+    </section>
+    <!-- ════════════════════════════════════════════════
+         FEATURES — 3 cards
+         ════════════════════════════════════════════════ -->
+    <section class="s-features">
+      <div class="frame">
+        <div class="card ink head">
+          <div style="display:flex;justify-content:space-between;align-items:flex-end;width:100%">
+            <div class="t-subtitle" style="color:var(--paper)">주요 <mark>항목</mark></div>
+            <span class="t-label" style="color:var(--paper)">{{PERIOD}}</span>
+          </div>
+        </div>
+        <div class="card feat-1">
+          <p class="t-label" style="margin-bottom:0.75rem">01</p>
+          <p class="t-body" style="font-weight:700;font-size:1.1em;margin-bottom:0.5rem">항목 제목</p>
+          <p class="t-body">설명 내용이 여기에 들어갑니다. 2-3줄 정도.</p>
+        </div>
+        <div class="card lemon feat-2">
+          <p class="t-label" style="margin-bottom:0.75rem;opacity:1">02</p>
+          <p class="t-body" style="font-weight:700;font-size:1.1em;margin-bottom:0.5rem">항목 제목</p>
+          <p class="t-body">설명 내용이 여기에 들어갑니다. 2-3줄 정도.</p>
+        </div>
+        <div class="card feat-3">
+          <p class="t-label" style="margin-bottom:0.75rem">03</p>
+          <p class="t-body" style="font-weight:700;font-size:1.1em;margin-bottom:0.5rem">항목 제목</p>
+          <p class="t-body">설명 내용이 여기에 들어갑니다. 2-3줄 정도.</p>
+        </div>
+      </div>
+      <div class="pagenum">04</div>
+    </section>
+    <!-- ════════════════════════════════════════════════
+         SECTION DIVIDER 2
+         ════════════════════════════════════════════════ -->
+    <section class="s-section">
+      <div class="frame">
+        <div class="card lemon num">
+          <div class="t-stat" style="font-size:clamp(64px,14vw,220px)">02</div>
+        </div>
+        <div class="card ink title">
+          <div>
+            <p class="t-label" style="color:var(--paper);margin-bottom:1rem">Chapter</p>
+            <div class="t-title" style="color:var(--paper)">다음<br><mark>계획</mark></div>
+          </div>
+        </div>
+      </div>
+      <div class="pagenum invert">05</div>
+    </section>
+    <!-- ════════════════════════════════════════════════
+         PROCESS — 4-step + timeline
+         ════════════════════════════════════════════════ -->
+    <section class="s-process">
+      <div class="frame">
+        <div class="card ink head">
+          <div style="display:flex;justify-content:space-between;align-items:flex-end;width:100%">
+            <div class="t-subtitle" style="color:var(--paper)">실행 <mark>계획</mark></div>
+            <span class="t-label" style="color:var(--paper)">{{PERIOD}}</span>
+          </div>
+        </div>
+        <div class="card step-1">
+          <p class="t-label" style="margin-bottom:0.5rem">7월</p>
+          <p class="t-body" style="font-weight:700">Step 1<br>제목</p>
+        </div>
+        <div class="card lemon step-2">
+          <p class="t-label" style="margin-bottom:0.5rem;opacity:1">8월</p>
+          <p class="t-body" style="font-weight:700">Step 2<br>제목</p>
+        </div>
+        <div class="card step-3">
+          <p class="t-label" style="margin-bottom:0.5rem">8월</p>
+          <p class="t-body" style="font-weight:700">Step 3<br>제목</p>
+        </div>
+        <div class="card ink step-4">
+          <p class="t-label" style="color:var(--paper);margin-bottom:0.5rem">9월</p>
+          <p class="t-body" style="font-weight:700;color:var(--paper)">Step 4<br>제목</p>
+        </div>
+        <div class="card lemon timeline" style="display:flex;align-items:center">
+          <p class="t-label" style="opacity:1">{{PERIOD}} 마일스톤 타임라인</p>
+        </div>
+      </div>
+      <div class="pagenum">06</div>
+    </section>
+    <!-- ════════════════════════════════════════════════
+         QUOTE
+         ════════════════════════════════════════════════ -->
+    <section class="s-quote">
+      <div class="frame">
+        <div class="card ink flush photo"><div class="ph"></div></div>
+        <div class="card body">
+          <div class="corner-mark" style="color:var(--accent)"><span></span><span></span><span></span><span></span></div>
+          <p class="t-label" style="margin-bottom:1.5rem">Quote</p>
+          <div class="t-title" style="font-size:clamp(28px,3.5vw,52px)">"인용문이<br>여기에<br>들어갑니다"</div>
+          <p class="t-label" style="margin-top:1.5rem">— 발언자, 맥락</p>
+        </div>
+      </div>
+      <div class="pagenum">07</div>
+    </section>
+    <!-- ════════════════════════════════════════════════
+         END / Q&A
+         ════════════════════════════════════════════════ -->
+    <section class="s-toc">
+      <div class="frame">
+        <div class="card ink head">
+          <div class="t-subtitle" style="color:var(--paper)">감사합니다 · <mark>Q&A</mark></div>
+        </div>
+        <div class="card item-1" style="display:flex;flex-direction:column;justify-content:space-between">
+          <div>
+            <p class="t-label" style="margin-bottom:0.75rem">Contact</p>
+            <p class="t-body" style="font-weight:700">{{AUTHOR}}</p>
+            <p class="t-body">{{ROLE}}</p>
+          </div>
+          <p class="t-label" style="opacity:0.5">{{EMAIL}}</p>
+        </div>
+        <div class="card lemon item-2" style="display:flex;flex-direction:column;justify-content:flex-end">
+          <div class="t-display" style="font-size:clamp(48px,7vw,112px)">Thank<br>You</div>
+        </div>
+        <div class="card ink item-3" style="display:flex;align-items:center;justify-content:center">
+          <div style="text-align:center">
+            <div class="blockmark" style="color:var(--accent);width:56px;height:56px;margin:0 auto 1rem">
+              <span></span><span></span><span></span><span></span>
+            </div>
+            <p class="t-label" style="color:var(--paper);opacity:0.5">{{ORGANIZATION}} · {{DATE}}</p>
+          </div>
+        </div>
+      </div>
+      <div class="pagenum lemon">08</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: false,
+    progress: false,
+    slideNumber: false,
+    transition: 'none',
+    backgroundTransition: 'none',
+    plugins: [RevealNotes],
+  });
+</script>
+</body>
+</html>

package/dist/role-agents/presentation-designer/templates/pin-and-paper.html ADDED Viewed

@@ -0,0 +1,225 @@
+<!DOCTYPE html>
+<html lang="ko">
+<head>
+  <meta charset="utf-8" />
+  <title>Pin &amp; Paper — 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=Caveat:wght@500;600;700&family=Space+Grotesk:wght@400;500;600;700&family=DM+Mono:wght@400;500&display=swap" rel="stylesheet" />
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/reveal.js@5/dist/reveal.css" />
+  <style>
+    :root {
+      --paper:    #EFE56A;
+      --paper-2:  #F5ECA0;
+      --paper-3:  #E8D85A;
+      --cream:    #F8F1D6;
+      --kraft:    #C9A66B;
+      --ink:      #1F3A8A;
+      --ink-soft: #2D4FB8;
+      --black:    #0E1430;
+      --red:      #C2342B;
+      --olive:    #6B7A2E;
+      --orange:   #D8702A;
+    }
+    .reveal { font-family: 'Space Grotesk', sans-serif; }
+    .reveal .slides { text-align: left; }
+    .reveal .slides section {
+      box-sizing: border-box;
+      width: 100%; height: 100%;
+      padding: 0;
+      overflow: hidden;
+      top: 0 !important; left: 0 !important;
+      background: var(--paper);
+      color: var(--ink);
+      position: absolute;
+    }
+    .reveal h1,.reveal h2,.reveal h3,.reveal p,.reveal ul,.reveal ol { margin: 0; }
+    .reveal .slides section.s-sec { background: var(--ink); color: var(--paper); }
+    /* CHROME */
+    .top {
+      position: absolute; top: 34px; left: 48px; right: 48px;
+      display: flex; align-items: center; justify-content: space-between;
+      font-family: 'DM Mono', monospace; font-weight: 500;
+      font-size: clamp(11px, 1.2vw, 16px); letter-spacing: 0.12em; text-transform: uppercase;
+    }
+    .top .lockup { display: flex; align-items: center; gap: 14px; }
+    .top .meta   { display: flex; gap: 2.5vw; opacity: 0.7; }
+    .footer {
+      position: absolute; left: 48px; right: 48px; bottom: 28px;
+      display: flex; justify-content: space-between; align-items: center;
+      font-family: 'DM Mono', monospace; font-weight: 500;
+      font-size: clamp(10px, 1.1vw, 15px); letter-spacing: 0.14em; text-transform: uppercase; opacity: 0.65;
+    }
+    /* TYPOGRAPHY */
+    .t-display { font-weight: 700; font-size: clamp(60px,10vw,160px); line-height: 0.92; letter-spacing: -0.02em; }
+    .t-title   { font-weight: 700; font-size: clamp(36px,5.5vw,84px); line-height: 0.95; letter-spacing: -0.015em; }
+    .t-head    { font-weight: 700; font-size: clamp(20px,2.8vw,44px); line-height: 1.1; }
+    .t-body    { font-size: clamp(13px,1.5vw,22px); line-height: 1.45; font-weight: 400; }
+    .t-label   { font-family: 'DM Mono', monospace; font-size: clamp(10px,1.1vw,16px); letter-spacing: 0.12em; text-transform: uppercase; font-weight: 500; }
+    .t-script  { font-family: 'Caveat', cursive; font-weight: 600; font-size: clamp(20px,2.5vw,40px); line-height: 1.05; }
+    .t-num     { font-weight: 700; font-size: clamp(50px,8vw,120px); line-height: 1; letter-spacing: -0.02em; }
+    /* STAMP */
+    .stamp {
+      display: inline-block;
+      border: 3px solid var(--red); color: var(--red);
+      padding: 5px 14px; font-family: 'DM Mono', monospace; font-weight: 500;
+      font-size: clamp(10px,1.1vw,15px); letter-spacing: 0.18em; text-transform: uppercase;
+      transform: rotate(-4deg);
+    }
+    /* NOTE CARD */
+    .note-card {
+      background: var(--cream);
+      border: 1.5px solid var(--ink);
+      border-radius: 4px;
+      padding: clamp(16px,2.5vh,28px) clamp(14px,2vw,24px);
+      display: flex; flex-direction: column;
+      box-shadow: 4px 5px 0 0 var(--ink);
+    }
+    .note-card.alt  { background: var(--paper-2); }
+    /* STAT CARD */
+    .stat-card {
+      border-radius: 8px;
+      padding: clamp(16px,2.5vh,28px) clamp(14px,2vw,24px);
+      display: flex; flex-direction: column; gap: 0.75rem;
+    }
+    .stat-card.ink { background: var(--ink); color: var(--paper); }
+    .stat-card.yel { background: var(--paper-2); color: var(--ink); }
+    .stat-card.red { background: var(--red);  color: var(--cream); }
+    /* AGENDA ROW */
+    .agenda-row {
+      display: grid;
+      grid-template-columns: 64px 1fr 180px;
+      align-items: center;
+      gap: 2vw;
+      padding: 1.5vh 0;
+      border-bottom: 1.5px dashed rgba(31,58,138,.4);
+    }
+  </style>
+</head>
+<body style="margin:0;background:#b8a520">
+<div class="reveal">
+  <div class="slides">
+    <!-- COVER -->
+    <section>
+      <div class="top"><div class="lockup"><span class="t-label">{{ORGANIZATION}}</span></div><div class="meta"><span>{{DATE}}</span></div></div>
+      <div style="position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;padding:8vh 5vw;gap:2vh">
+        <div class="t-script" style="color:var(--ink);opacity:0.7">{{CATEGORY}}</div>
+        <div class="t-display">{{TITLE}}</div>
+        <div class="t-script" style="margin-top:1vh">{{SUBTITLE}}</div>
+        <div style="display:flex;gap:2vw;align-items:center;margin-top:2vh">
+          <span class="stamp">{{DATE}}</span>
+          <span class="t-label" style="opacity:0.7">{{AUTHOR}}</span>
+        </div>
+      </div>
+      <div class="footer"><span>{{ORG}}</span><span>{{DATE}}</span></div>
+    </section>
+    <!-- AGENDA -->
+    <section>
+      <div class="top"><div class="lockup"><span class="t-label">목차</span></div><div class="meta"><span>{{DATE}}</span></div></div>
+      <div style="position:absolute;left:5vw;right:5vw;top:100px;bottom:80px;display:flex;flex-direction:column;justify-content:center;gap:0">
+        <div class="t-head" style="margin-bottom:2vh">{{TITLE}}</div>
+        <div class="agenda-row"><span class="t-label">01</span><span class="t-body" style="font-weight:600">섹션 제목</span><span class="t-script" style="font-size:clamp(16px,1.8vw,26px);opacity:0.6">설명</span></div>
+        <div class="agenda-row"><span class="t-label">02</span><span class="t-body" style="font-weight:600">섹션 제목</span><span class="t-script" style="font-size:clamp(16px,1.8vw,26px);opacity:0.6">설명</span></div>
+        <div class="agenda-row"><span class="t-label">03</span><span class="t-body" style="font-weight:600">섹션 제목</span><span class="t-script" style="font-size:clamp(16px,1.8vw,26px);opacity:0.6">설명</span></div>
+        <div class="agenda-row" style="border-bottom:none"><span class="t-label">04</span><span class="t-body" style="font-weight:600">섹션 제목</span><span class="t-script" style="font-size:clamp(16px,1.8vw,26px);opacity:0.6">설명</span></div>
+      </div>
+      <div class="footer"><span>{{ORG}}</span><span>{{DATE}}</span></div>
+    </section>
+    <!-- SECTION DIVIDER (ink) -->
+    <section class="s-sec">
+      <div style="position:absolute;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:2vh;text-align:center">
+        <span class="t-label" style="opacity:0.5;letter-spacing:0.2em">Section</span>
+        <div class="t-display" style="color:var(--paper)">01</div>
+        <div class="t-title" style="color:var(--paper)">섹션 제목</div>
+        <div class="t-script" style="color:var(--paper-2);font-size:clamp(18px,2vw,30px)">서브 설명</div>
+      </div>
+    </section>
+    <!-- NOTE CARDS (3-col) -->
+    <section>
+      <div class="top"><div class="lockup"><span class="t-label">{{SECTION_LABEL}}</span></div><div class="meta"><span>01</span></div></div>
+      <div style="position:absolute;left:5vw;right:5vw;top:100px;bottom:80px">
+        <p class="t-head" style="margin-bottom:2vh">주요 내용</p>
+        <div style="display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,2vw,28px)">
+          <div class="note-card"><p class="t-label" style="margin-bottom:0.75rem">01</p><p class="t-body" style="font-weight:600;margin-bottom:0.5rem">항목 제목</p><p class="t-body">설명 내용이 들어갑니다. 2-3줄.</p></div>
+          <div class="note-card alt"><p class="t-label" style="margin-bottom:0.75rem">02</p><p class="t-body" style="font-weight:600;margin-bottom:0.5rem">항목 제목</p><p class="t-body">설명 내용이 들어갑니다. 2-3줄.</p></div>
+          <div class="note-card"><p class="t-label" style="margin-bottom:0.75rem">03</p><p class="t-body" style="font-weight:600;margin-bottom:0.5rem">항목 제목</p><p class="t-body">설명 내용이 들어갑니다. 2-3줄.</p></div>
+        </div>
+      </div>
+      <div class="footer"><span>{{ORG}}</span><span>{{DATE}}</span></div>
+    </section>
+    <!-- STATS -->
+    <section>
+      <div class="top"><div class="lockup"><span class="t-label">{{SECTION_LABEL}}</span></div><div class="meta"><span>02</span></div></div>
+      <div style="position:absolute;left:5vw;right:5vw;top:100px;bottom:80px">
+        <p class="t-head" style="margin-bottom:2vh">성과 지표</p>
+        <div style="display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,2vw,24px)">
+          <div class="stat-card ink"><div class="t-num" style="color:var(--paper)">98%</div><p class="t-label" style="color:var(--paper);opacity:0.7">지표명</p><p class="t-script" style="color:var(--paper-2);font-size:clamp(14px,1.5vw,22px)">설명</p></div>
+          <div class="stat-card yel"><div class="t-num">41</div><p class="t-label" style="opacity:0.7">지표명</p><p class="t-script" style="font-size:clamp(14px,1.5vw,22px);opacity:0.7">설명</p></div>
+          <div class="stat-card red"><div class="t-num" style="color:var(--cream)">2.4s</div><p class="t-label" style="color:var(--cream);opacity:0.7">지표명</p><p class="t-script" style="color:var(--cream);font-size:clamp(14px,1.5vw,22px);opacity:0.8">설명</p></div>
+        </div>
+      </div>
+      <div class="footer"><span>{{ORG}}</span><span>{{DATE}}</span></div>
+    </section>
+    <!-- QUOTE -->
+    <section>
+      <div style="position:absolute;inset:0;display:grid;grid-template-columns:1fr 1.6fr;gap:5vw;align-items:center;padding:8vh 5vw">
+        <div style="display:flex;flex-direction:column;gap:1.5rem">
+          <div style="width:80px;height:80px;background:var(--ink);border-radius:50%;display:flex;align-items:center;justify-content:center">
+            <span class="t-label" style="color:var(--paper)">IMG</span>
+          </div>
+          <p class="t-body" style="font-weight:700">발언자 이름</p>
+          <p class="t-label" style="opacity:0.7">직함 / 소속</p>
+        </div>
+        <div>
+          <div class="t-title" style="font-size:clamp(24px,3.5vw,56px)">"인용문이<br>여기에 들어갑니다"</div>
+          <div class="t-script" style="margin-top:2vh;opacity:0.7">— 맥락 설명</div>
+        </div>
+      </div>
+      <div class="footer"><span>{{ORG}}</span><span>{{DATE}}</span></div>
+    </section>
+    <!-- CLOSING -->
+    <section>
+      <div style="position:absolute;inset:0;display:grid;grid-template-columns:1fr 1fr;gap:5vw;padding:8vh 5vw">
+        <div style="display:flex;flex-direction:column;justify-content:center;gap:2vh">
+          <div class="t-script" style="font-size:clamp(20px,2.5vw,36px);opacity:0.7">감사합니다</div>
+          <div class="t-display">Q&amp;A</div>
+          <div class="stamp" style="align-self:flex-start;margin-top:1vh">{{DATE}}</div>
+        </div>
+        <div style="display:flex;flex-direction:column;justify-content:center;gap:1.5vh">
+          <p class="t-label" style="opacity:0.6;margin-bottom:0.25rem">발표자</p><p class="t-body" style="font-weight:700;margin-bottom:1rem">{{AUTHOR}}</p>
+          <p class="t-label" style="opacity:0.6;margin-bottom:0.25rem">이메일</p><p class="t-body" style="margin-bottom:1rem">{{EMAIL}}</p>
+          <p class="t-label" style="opacity:0.6;margin-bottom:0.25rem">소속</p><p class="t-body">{{ORG}}</p>
+        </div>
+      </div>
+      <div class="footer"><span>{{ORG}}</span><span>{{DATE}}</span></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: false, progress: false, slideNumber: false,
+    transition: 'fade', backgroundTransition: 'fade',
+    plugins: [RevealNotes],
+  });
+</script>
+</body>
+</html>