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/role-agents/presentation-designer/templates/signal.html ADDED Viewed

@@ -0,0 +1,403 @@
+<!DOCTYPE html>
+<html lang="ko">
+<head>
+  <meta charset="utf-8" />
+  <title>Signal — 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=Source+Serif+4:ital,opsz,wght@0,8..60,300;0,8..60,400;0,8..60,600;0,8..60,700;1,8..60,300;1,8..60,400;1,8..60,600;1,8..60,700&family=DM+Sans:opsz,wght@9..40,300;9..40,400;9..40,500;9..40,600&family=IBM+Plex+Mono:wght@300;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 {
+      --c-bg:           #1c2644;
+      --c-bg-alt:       #232f55;
+      --c-bg-light:     #f0ece3;
+      --c-bg-light-alt: #e6e0d4;
+      --c-fg:           #e2dcd0;
+      --c-fg-2:         #8a96a8;
+      --c-fg-3:         #4e5a6e;
+      --c-fg-light:     #1a2030;
+      --c-fg-light-2:   #5a6270;
+      --c-fg-light-3:   #9aa0a8;
+      --c-accent:       #c8a870;
+      --c-border:       #2e3d5c;
+      --c-border-light: #cac4b4;
+      --f-display: "Source Serif 4", serif;
+      --f-heading: "Source Serif 4", serif;
+      --f-body:    "DM Sans", sans-serif;
+      --f-mono:    "IBM Plex Mono", monospace;
+      --sz-display: 9.5vw;
+      --sz-h1:      5.2vw;
+      --sz-h2:      3vw;
+      --sz-h3:      1.9vw;
+      --sz-lead:    1.4vw;
+      --sz-body:    1.05vw;
+      --sz-caption: 0.82vw;
+      --sz-label:   0.7vw;
+      --pad-x: 7.5vw;
+      --pad-y: 5.5vh;
+      --gap-lg: 4vh;
+      --gap-md: 2.5vh;
+      --gap-sm: 1.2vh;
+    }
+    /* ── REVEAL RESET ─────────────────────────────────────────────── */
+    .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.light { background: var(--c-bg-light); color: var(--c-fg-light); }
+    .reveal .slides section.dark::before {
+      content: "";
+      position: absolute;
+      inset: 0;
+      background-image:
+        linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px),
+        linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px);
+      background-size: 80px 80px;
+      pointer-events: none;
+      z-index: 0;
+    }
+    /* ── CHROME / FOOTER ──────────────────────────────────────────── */
+    .slide-chrome, .slide-foot {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      position: relative;
+      z-index: 1;
+    }
+    .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); }
+    .light .slide-chrome { border-bottom: 1px solid var(--c-border-light); padding-bottom: var(--gap-sm); margin-bottom: var(--gap-md); }
+    .light .slide-foot   { border-top:    1px solid var(--c-border-light); padding-top:    var(--gap-sm); margin-top:    var(--gap-md); }
+    .slide-body { min-height: 0; position: relative; z-index: 1; }
+    /* ── SLIDE 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: var(--gap-md); align-items: center; }
+    .slide--stats .slide-body   { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: var(--gap-md); }
+    .slide--list  .slide-body   { display: grid; grid-template-columns: 2fr 3fr;     gap: var(--gap-md); }
+    .slide--compare .slide-body { display: grid; grid-template-columns: 1fr 1fr;     height: 100%; }
+    /* ── TYPOGRAPHY ───────────────────────────────────────────────── */
+    .display { font-family: var(--f-display); font-size: var(--sz-display); font-weight: 700; line-height: 0.92; letter-spacing: -0.02em; }
+    .h1      { font-family: var(--f-heading); font-size: var(--sz-h1);      font-weight: 700; line-height: 0.95; letter-spacing: -0.01em; }
+    .h2      { font-family: var(--f-heading); font-size: var(--sz-h2);      font-weight: 600; line-height: 1.1; }
+    .h3      { font-size: var(--sz-h3);  font-weight: 500; line-height: 1.2; }
+    .lead    { font-size: var(--sz-lead); font-weight: 400; line-height: 1.5; }
+    .body    { font-size: var(--sz-body); font-weight: 400; line-height: 1.65; }
+    .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.08em; text-transform: uppercase; }
+    .kicker  { font-family: var(--f-mono); font-size: var(--sz-label); letter-spacing: 0.12em; text-transform: uppercase; color: var(--c-accent); display: block; margin-bottom: var(--gap-sm); }
+    .muted   { opacity: 0.5; }
+    .accent  { color: var(--c-accent); }
+    /* Italic+gold highlight — Signal's signature */
+    .dark .display em, .dark .h1 em, .dark .h2 em, .dark .h3 em { font-style: italic; color: var(--c-accent); }
+    /* ── COMPONENTS ───────────────────────────────────────────────── */
+    .rule { width: 36px; height: 1px; background: var(--c-accent); margin: var(--gap-sm) 0; }
+    .tag {
+      display: inline-block;
+      border: 1px solid var(--c-accent);
+      color: var(--c-accent);
+      font-family: var(--f-mono);
+      font-size: var(--sz-label);
+      letter-spacing: 0.1em;
+      text-transform: uppercase;
+      padding: 0.25em 0.75em;
+    }
+    .stat-card { padding: var(--gap-md) 0; border-top: 1px solid var(--c-border); }
+    .stat-card .num  { font-family: var(--f-heading); font-size: 6vw; font-weight: 700; line-height: 1; color: var(--c-accent); }
+    .stat-card .unit { font-size: var(--sz-h3); font-weight: 500; margin-left: 0.2em; }
+    .img-placeholder {
+      background: var(--c-bg-alt);
+      width: 100%; height: 100%; min-height: 30vh;
+      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);
+    }
+    .bullet-list { list-style: none; padding: 0; display: flex; flex-direction: column; gap: var(--gap-sm); }
+    .bullet-list li { display: flex; gap: 0.75em; font-size: var(--sz-body); line-height: 1.6; }
+    .bullet-list li::before { content: "—"; color: var(--c-accent); flex-shrink: 0; }
+    .cover-meta {
+      margin-top: var(--gap-md);
+      padding-top: var(--gap-sm);
+      border-top: 1px solid rgba(200, 168, 112, 0.25);
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+    }
+    /* ── ANIMATIONS ───────────────────────────────────────────────── */
+    [data-anim] { opacity: 0; animation-fill-mode: forwards; animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1); 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 UI OVERRIDES ──────────────────────────────────────── */
+    .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:#111">
+<div class="reveal">
+  <div class="slides">
+    <!-- ════════════════════════════════════════════════
+         COVER
+         ════════════════════════════════════════════════ -->
+    <section class="dark 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}}<br><em>{{SUBTITLE}}</em></div>
+        <div  class="rule"    data-anim="reveal-right" data-delay="2" style="margin-top:2vh"></div>
+        <div class="cover-meta" data-anim="fade-in" data-delay="3">
+          <span class="label muted">{{DATE}}</span>
+          <span class="label muted">{{AUTHOR}}</span>
+        </div>
+      </div>
+    </section>
+    <!-- ════════════════════════════════════════════════
+         CHAPTER DIVIDER
+         ════════════════════════════════════════════════ -->
+    <section class="dark slide--chapter">
+      <div class="slide-body" style="display:flex;flex-direction:column;justify-content:flex-end;gap:var(--gap-sm)">
+        <span class="label accent" 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">챕터 <em>제목</em></div>
+        <p    class="body muted"   data-anim="fade-up"    data-delay="3">서브 설명 한 줄</p>
+      </div>
+    </section>
+    <!-- ════════════════════════════════════════════════
+         STATS — 3-column
+         ════════════════════════════════════════════════ -->
+    <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--stats">
+        <div class="stat-card" data-anim="fade-up" data-delay="1">
+          <div><span class="num">98</span><span class="unit accent">%</span></div>
+          <div class="rule"></div>
+          <p class="body" style="margin-top:var(--gap-sm)">지표명<br>설명</p>
+          <p class="caption muted" style="margin-top:0.5vh">전기 대비 +12%p</p>
+        </div>
+        <div class="stat-card" data-anim="fade-up" data-delay="2">
+          <div><span class="num">2.4</span><span class="unit accent">s</span></div>
+          <div class="rule"></div>
+          <p class="body" style="margin-top:var(--gap-sm)">지표명<br>설명</p>
+          <p class="caption muted" style="margin-top:0.5vh">목표치 3s 달성</p>
+        </div>
+        <div class="stat-card" data-anim="fade-up" data-delay="3">
+          <div><span class="num">41</span><span class="unit accent">개</span></div>
+          <div class="rule"></div>
+          <p class="body" style="margin-top:var(--gap-sm)">지표명<br>설명</p>
+          <p class="caption muted" style="margin-top:0.5vh">누적 총 186개</p>
+        </div>
+      </div>
+      <div class="slide-foot">
+        <span class="label muted">{{ORG}} · {{DATE}}</span>
+      </div>
+    </section>
+    <!-- ════════════════════════════════════════════════
+         SPLIT — text + image (light theme)
+         ════════════════════════════════════════════════ -->
+    <section class="light">
+      <div class="slide-chrome">
+        <span class="label" style="color:var(--c-fg-light-2)">{{SECTION_LABEL}}</span>
+        <span class="label" style="color:var(--c-fg-light-3)">01 / 분석</span>
+      </div>
+      <div class="slide-body slide--split">
+        <div data-anim="fade-up" data-delay="1">
+          <span class="kicker" style="color:var(--c-fg-light-2)">Problem</span>
+          <div class="h2" style="color:var(--c-fg-light)">슬라이드<br>제목</div>
+          <div class="rule" style="background:var(--c-fg-light)"></div>
+        </div>
+        <div data-anim="fade-up" data-delay="2">
+          <ul class="bullet-list" style="color:var(--c-fg-light)">
+            <li>항목 1 — 설명</li>
+            <li>항목 2 — 설명</li>
+            <li>항목 3 — 설명</li>
+            <li>항목 4 — 설명</li>
+          </ul>
+        </div>
+      </div>
+      <div class="slide-foot" style="border-color:var(--c-border-light)">
+        <span class="label" style="color:var(--c-fg-light-3)">{{ORG}} · {{DATE}}</span>
+      </div>
+    </section>
+    <!-- ════════════════════════════════════════════════
+         LIST — heading + bullets (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>
+        <div data-anim="fade-up" data-delay="2">
+          <ul class="bullet-list">
+            <li>할 일 1</li>
+            <li>할 일 2</li>
+            <li>할 일 3</li>
+            <li>할 일 4</li>
+            <li>할 일 5</li>
+          </ul>
+        </div>
+      </div>
+      <div class="slide-foot">
+        <span class="label muted">{{ORG}} · {{DATE}}</span>
+      </div>
+    </section>
+    <!-- ════════════════════════════════════════════════
+         STATEMENT — full-screen quote
+         ════════════════════════════════════════════════ -->
+    <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>또는 <em>선언</em>"</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>
+    <!-- ════════════════════════════════════════════════
+         COMPARE — before / after (light)
+         ════════════════════════════════════════════════ -->
+    <section class="light">
+      <div class="slide-chrome">
+        <span class="label" style="color:var(--c-fg-light-2)">비교</span>
+        <span class="label" style="color:var(--c-fg-light-3)">02 / 분석</span>
+      </div>
+      <div class="slide-body slide--compare">
+        <div style="padding:var(--gap-md);border-right:1px solid var(--c-border-light)" data-anim="fade-up" data-delay="1">
+          <span class="label" style="color:var(--c-fg-light-3)">Before</span>
+          <div class="h3" style="color:var(--c-fg-light);margin-top:var(--gap-sm)">이전 상태</div>
+          <p class="body" style="color:var(--c-fg-light-2);margin-top:var(--gap-md)">설명 내용이 들어갑니다.</p>
+        </div>
+        <div style="padding:var(--gap-md)" data-anim="fade-up" data-delay="2">
+          <span class="label accent">After</span>
+          <div class="h3" style="color:var(--c-fg-light);margin-top:var(--gap-sm)">개선 상태</div>
+          <p class="body" style="color:var(--c-fg-light-2);margin-top:var(--gap-md)">개선된 내용이 들어갑니다.</p>
+        </div>
+      </div>
+      <div class="slide-foot" style="border-color:var(--c-border-light)">
+        <span class="label" style="color:var(--c-fg-light-3)">{{ORG}} · {{DATE}}</span>
+      </div>
+    </section>
+    <!-- ════════════════════════════════════════════════
+         QUOTE
+         ════════════════════════════════════════════════ -->
+    <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>크게 보여줄 때<br><em>이 슬라이드</em>"</div>
+        <p   class="label muted" data-anim="fade-in" data-delay="3">— 발언자, 맥락</p>
+      </div>
+    </section>
+    <!-- ════════════════════════════════════════════════
+         END
+         ════════════════════════════════════════════════ -->
+    <section class="dark 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">Thank you</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 muted">이메일</p>
+            <p class="body">{{EMAIL}}</p>
+          </div>
+          <div>
+            <p class="label muted">소속</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 src="https://cdn.jsdelivr.net/npm/reveal.js@5/plugin/highlight/highlight.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, RevealHighlight],
+  });
+</script>
+</body>
+</html>

package/role-agents/presentation-designer/templates/stencil-tablet.html ADDED Viewed

@@ -0,0 +1,211 @@
+<!DOCTYPE html>
+<html lang="ko">
+<head>
+  <meta charset="utf-8" />
+  <title>Stencil &amp; Tablet — 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=Bowlby+One&family=Stardos+Stencil:wght@400;700&family=Barlow+Condensed:wght@500;600;700;800;900&family=Inter:wght@400;500;600&display=swap" rel="stylesheet" />
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/reveal.js@5/dist/reveal.css" />
+  <style>
+    :root {
+      --bone:    #E2DCC9;
+      --black:   #000000;
+      --ink:     #0A0A0A;
+      --paper:   #F4EFE0;
+      --sienna:  #A06A3C;
+      --magenta: #C73B7A;
+      --orange:  #EE7A2E;
+      --teal:    #2D7E73;
+      --blue:    #3F73B7;
+      --mustard: #D8A93B;
+      --olive:   #6F7A2E;
+    }
+    .reveal { font-family: 'Barlow Condensed', 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(--bone);
+      color: var(--ink);
+      position: absolute;
+    }
+    .reveal h1,.reveal h2,.reveal h3,.reveal p,.reveal ul,.reveal ol { margin: 0; }
+    .reveal .slides section.dark { background: var(--black); color: var(--bone); }
+    /* CHROME */
+    .top {
+      position: absolute; top: 38px; left: 48px; right: 48px;
+      display: flex; align-items: center; justify-content: space-between;
+      font-family: 'Barlow Condensed', sans-serif; font-weight: 800;
+      font-size: clamp(18px, 2vw, 28px); letter-spacing: 0.04em; text-transform: uppercase;
+    }
+    .top .meta { display: flex; gap: 4vw; font-size: clamp(14px,1.6vw,22px); font-weight: 600; letter-spacing: 0.06em; opacity: 0.85; }
+    .dark .top { color: var(--bone); }
+    .footer {
+      position: absolute; left: 48px; right: 48px; bottom: 28px;
+      display: flex; justify-content: space-between; align-items: center;
+      font-family: 'Barlow Condensed', sans-serif; font-weight: 600;
+      font-size: clamp(14px,1.5vw,20px); letter-spacing: 0.08em; text-transform: uppercase; opacity: 0.7;
+    }
+    .dark .footer { color: var(--bone); }
+    /* TYPOGRAPHY */
+    .stencil { font-family: 'Stardos Stencil', serif; font-weight: 700; }
+    .t-display { font-size: clamp(100px,16vw,260px); line-height: 0.88; letter-spacing: -0.02em; }
+    .t-title   { font-size: clamp(50px, 8vw, 130px);  line-height: 0.92; letter-spacing: -0.01em; font-weight: 900; text-transform: uppercase; }
+    .t-head    { font-size: clamp(24px, 3.5vw, 54px); line-height: 1.0;  font-weight: 800; text-transform: uppercase; letter-spacing: 0.02em; }
+    .t-body    { font-family: 'Inter', sans-serif; font-size: clamp(13px, 1.4vw, 20px); line-height: 1.45; font-weight: 400; }
+    .t-label   { font-family: 'Barlow Condensed', sans-serif; font-size: clamp(12px,1.3vw,18px); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
+    /* TABLET CARD */
+    .tablet {
+      border-radius: 22px; padding: clamp(20px,3vh,34px) clamp(18px,2.5vw,30px);
+      display: flex; flex-direction: column; position: relative; overflow: hidden;
+    }
+    .tablet .num { font-family: 'Stardos Stencil', serif; font-weight: 700; line-height: 0.9; font-size: clamp(80px,12vw,180px); letter-spacing: -0.02em; }
+    .tablet h3  { font-family: 'Stardos Stencil', serif; font-weight: 700; font-size: clamp(16px,2vw,28px); text-transform: uppercase; letter-spacing: 0.02em; margin-top: auto; margin-bottom: 0.5rem; }
+    .tablet.dark { background: var(--ink); color: var(--bone); }
+    /* STAT */
+    .stat {
+      border-radius: 22px; padding: clamp(18px,2.5vh,28px) clamp(16px,2vw,26px);
+      display: flex; flex-direction: column; gap: 0.75rem;
+    }
+    .stat-num { font-family: 'Stardos Stencil', serif; font-weight: 700; font-size: clamp(60px,9vw,140px); line-height: 0.9; letter-spacing: -0.02em; }
+    /* PROCESS NODE */
+    .node {
+      border-radius: 22px; padding: clamp(16px,2.5vh,24px) clamp(14px,2vw,22px);
+      display: flex; flex-direction: column; gap: 0.5rem;
+    }
+    /* PILL */
+    .pill {
+      display: inline-block; border-radius: 999px; padding: 4px 14px;
+      font-family: 'Barlow Condensed', sans-serif; font-weight: 700;
+      font-size: clamp(12px,1.3vw,18px); letter-spacing: 0.08em; text-transform: uppercase;
+    }
+    .pill.teal    { background: var(--teal);    color: var(--bone); }
+    .pill.mustard { background: var(--mustard); color: var(--ink); }
+    .pill.magenta { background: var(--magenta); color: var(--bone); }
+    .pill.paper   { background: var(--paper);   color: var(--ink); border: 1.5px solid var(--ink); }
+  </style>
+</head>
+<body style="margin:0;background:#111">
+<div class="reveal">
+  <div class="slides">
+    <!-- COVER -->
+    <section>
+      <div class="top"><span>{{ORGANIZATION}}</span><div class="meta"><span>{{DATE}}</span><span>{{AUTHOR}}</span></div></div>
+      <div style="position:absolute;inset:0;display:grid;grid-template-rows:1fr auto;padding:90px 48px 48px">
+        <div style="display:flex;flex-direction:column;justify-content:flex-end;gap:1.5vh">
+          <div class="stencil t-display">{{TITLE}}</div>
+        </div>
+        <div style="display:flex;align-items:center;justify-content:space-between;padding-top:1.5vh;border-top:2px solid var(--ink)">
+          <span class="t-label">{{SUBTITLE}}</span>
+          <span class="t-label" style="opacity:0.6">{{DATE}}</span>
+        </div>
+      </div>
+    </section>
+    <!-- DARK — agenda (4 tablets) -->
+    <section class="dark">
+      <div class="top"><span style="color:var(--bone)">{{SECTION_LABEL}}</span><div class="meta" style="color:var(--bone)"><span>{{DATE}}</span></div></div>
+      <div style="position:absolute;left:48px;right:48px;top:95px;bottom:70px;display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(14px,2vw,24px)">
+        <div class="tablet" style="background:var(--sienna);color:var(--bone)"><div class="num">01</div><h3>챕터 제목</h3><p class="t-body" style="color:var(--bone);opacity:0.8">설명</p></div>
+        <div class="tablet" style="background:var(--teal);color:var(--bone)"><div class="num">02</div><h3>챕터 제목</h3><p class="t-body" style="color:var(--bone);opacity:0.8">설명</p></div>
+        <div class="tablet" style="background:var(--mustard);color:var(--ink)"><div class="num">03</div><h3>챕터 제목</h3><p class="t-body">설명</p></div>
+        <div class="tablet" style="background:var(--blue);color:var(--bone)"><div class="num">04</div><h3>챕터 제목</h3><p class="t-body" style="color:var(--bone);opacity:0.8">설명</p></div>
+      </div>
+      <div class="footer"><span style="color:var(--bone)">{{ORG}}</span><span style="color:var(--bone)">{{DATE}}</span></div>
+    </section>
+    <!-- PRINCIPLES (3-col rounded cards) -->
+    <section>
+      <div class="top"><span>{{SECTION_LABEL}}</span><div class="meta"><span>{{DATE}}</span></div></div>
+      <div style="position:absolute;left:48px;right:48px;top:90px;bottom:70px">
+        <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="tablet" style="background:var(--magenta);color:var(--bone)"><div class="num" style="font-size:clamp(50px,7vw,100px)">01</div><h3>원칙명</h3><p class="t-body" style="color:var(--bone);opacity:0.85">설명 내용</p></div>
+          <div class="tablet" style="background:var(--olive);color:var(--bone)"><div class="num" style="font-size:clamp(50px,7vw,100px)">02</div><h3>원칙명</h3><p class="t-body" style="color:var(--bone);opacity:0.85">설명 내용</p></div>
+          <div class="tablet" style="background:var(--orange);color:var(--ink)"><div class="num" style="font-size:clamp(50px,7vw,100px)">03</div><h3>원칙명</h3><p class="t-body">설명 내용</p></div>
+        </div>
+      </div>
+      <div class="footer"><span>{{ORG}}</span><span>{{DATE}}</span></div>
+    </section>
+    <!-- STATS -->
+    <section>
+      <div class="top"><span>{{SECTION_LABEL}}</span><div class="meta"><span>{{DATE}}</span></div></div>
+      <div style="position:absolute;left:48px;right:48px;top:90px;bottom:70px">
+        <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" style="background:var(--ink);color:var(--bone)"><div class="stat-num stencil">98%</div><p class="t-label" style="color:var(--bone);opacity:0.7">지표명</p><p class="t-body" style="color:var(--bone);opacity:0.65">설명</p></div>
+          <div class="stat" style="background:var(--mustard);color:var(--ink)"><div class="stat-num stencil">41</div><p class="t-label">지표명</p><p class="t-body">설명</p></div>
+          <div class="stat" style="background:var(--teal);color:var(--bone)"><div class="stat-num stencil">2.4s</div><p class="t-label" style="color:var(--bone);opacity:0.7">지표명</p><p class="t-body" style="color:var(--bone);opacity:0.65">설명</p></div>
+        </div>
+      </div>
+      <div class="footer"><span>{{ORG}}</span><span>{{DATE}}</span></div>
+    </section>
+    <!-- PROCESS (5 nodes) -->
+    <section>
+      <div class="top"><span>{{SECTION_LABEL}}</span><div class="meta"><span>{{DATE}}</span></div></div>
+      <div style="position:absolute;left:48px;right:48px;top:90px;bottom:130px">
+        <p class="t-head" style="margin-bottom:2vh">프로세스</p>
+        <div style="display:grid;grid-template-columns:repeat(5,1fr);gap:clamp(10px,1.5vw,20px)">
+          <div class="node" style="background:var(--sienna);color:var(--bone)"><p class="t-label" style="color:var(--bone);opacity:0.7;margin-bottom:0.5rem">01</p><p class="t-body" style="font-weight:700;color:var(--bone)">단계명</p><p class="t-body" style="color:var(--bone);opacity:0.75;font-size:0.85em">설명</p></div>
+          <div class="node" style="background:var(--mustard);color:var(--ink)"><p class="t-label" style="opacity:0.7;margin-bottom:0.5rem">02</p><p class="t-body" style="font-weight:700">단계명</p><p class="t-body" style="opacity:0.75;font-size:0.85em">설명</p></div>
+          <div class="node" style="background:var(--teal);color:var(--bone)"><p class="t-label" style="color:var(--bone);opacity:0.7;margin-bottom:0.5rem">03</p><p class="t-body" style="font-weight:700;color:var(--bone)">단계명</p><p class="t-body" style="color:var(--bone);opacity:0.75;font-size:0.85em">설명</p></div>
+          <div class="node" style="background:var(--blue);color:var(--bone)"><p class="t-label" style="color:var(--bone);opacity:0.7;margin-bottom:0.5rem">04</p><p class="t-body" style="font-weight:700;color:var(--bone)">단계명</p><p class="t-body" style="color:var(--bone);opacity:0.75;font-size:0.85em">설명</p></div>
+          <div class="node" style="background:var(--magenta);color:var(--bone)"><p class="t-label" style="color:var(--bone);opacity:0.7;margin-bottom:0.5rem">05</p><p class="t-body" style="font-weight:700;color:var(--bone)">단계명</p><p class="t-body" style="color:var(--bone);opacity:0.75;font-size:0.85em">설명</p></div>
+        </div>
+      </div>
+      <div style="position:absolute;left:48px;right:48px;bottom:70px;background:var(--paper);border-radius:14px;padding:0 24px;height:44px;display:flex;align-items:center;justify-content:space-between">
+        <span class="t-label">{{PERIOD}} 타임라인</span>
+        <span class="t-label" style="opacity:0.5">{{ORG}}</span>
+      </div>
+    </section>
+    <!-- CLOSING (dark) -->
+    <section class="dark">
+      <div style="position:absolute;inset:0;display:grid;grid-template-columns:1fr 1fr;gap:5vw;padding:90px 48px 70px">
+        <div style="display:flex;flex-direction:column;justify-content:space-between">
+          <div>
+            <p class="t-label" style="color:var(--bone);opacity:0.6;margin-bottom:1rem">감사합니다</p>
+            <div class="stencil t-title" style="color:var(--bone)">Q&A</div>
+          </div>
+          <div style="display:flex;gap:1vw">
+            <div class="pill teal">{{ORG}}</div>
+            <div class="pill mustard">{{DATE}}</div>
+          </div>
+        </div>
+        <div style="display:flex;flex-direction:column;justify-content:center;gap:1.5vh">
+          <p class="t-label" style="color:var(--bone);opacity:0.6">발표자</p><p class="t-body" style="color:var(--bone);font-weight:700;margin-bottom:1rem">{{AUTHOR}}</p>
+          <p class="t-label" style="color:var(--bone);opacity:0.6">이메일</p><p class="t-body" style="color:var(--bone);margin-bottom:1rem">{{EMAIL}}</p>
+          <p class="t-label" style="color:var(--bone);opacity:0.6">소속</p><p class="t-body" style="color:var(--bone)">{{ORG}}</p>
+        </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: false, progress: false, slideNumber: false,
+    transition: 'none', backgroundTransition: 'none',
+    plugins: [RevealNotes],
+  });
+</script>
+</body>
+</html>