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

@tienne/gestalt 0.17.0 → 0.18.2

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 (173) hide show

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

@@ -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>

package/role-agents/presentation-designer/templates/editorial-forest.html ADDED Viewed

@@ -0,0 +1,264 @@
+<!DOCTYPE html>
+<html lang="ko">
+<head>
+  <meta charset="utf-8" />
+  <title>Editorial Forest — 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:opsz,wght@8..60,300;8..60,400;8..60,500;8..60,600;8..60,700;8..60,800&family=JetBrains+Mono:wght@400;500;700&display=swap" rel="stylesheet" />
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/reveal.js@5/dist/reveal.css" />
+  <style>
+    :root {
+      --green:      #2e4a2a;
+      --green-deep: #243a21;
+      --green-lite: #3a5a36;
+      --pink:       #e89cb1;
+      --pink-deep:  #d27e96;
+      --cream:      #efe7d4;
+      --cream-2:    #e6dcc4;
+      --ink:        #1a1a17;
+      --serif: "Source Serif 4", Georgia, serif;
+      --mono:  "JetBrains Mono", monospace;
+    }
+    .reveal { font-family: var(--serif); }
+    .reveal .slides { text-align: left; }
+    .reveal .slides section {
+      box-sizing: border-box;
+      width: 100%; height: 100%;
+      padding: 7vh 7vw;
+      display: grid;
+      grid-template-rows: auto 1fr auto;
+      overflow: hidden;
+      top: 0 !important; left: 0 !important;
+      background: var(--cream);
+      color: var(--ink);
+    }
+    .reveal h1,.reveal h2,.reveal h3,.reveal p,.reveal ul,.reveal ol { margin: 0; }
+    /* COVER overrides */
+    .reveal .slides section.cover { background: var(--green); color: var(--pink); }
+    .reveal .slides section.statement-slide { background: var(--pink); color: var(--green-deep); }
+    .reveal .slides section.data-slide { background: var(--green); color: var(--cream); }
+    /* CHROME */
+    .topbar {
+      display: flex;
+      justify-content: space-between;
+      align-items: baseline;
+      gap: clamp(20px,3vw,40px);
+      padding-bottom: 2vh;
+      border-bottom: 2px solid currentColor;
+      opacity: 0.85;
+    }
+    /* TYPOGRAPHY */
+    .t-display { font-family: var(--serif); font-weight: 800; line-height: 0.92; letter-spacing: -0.02em; font-size: clamp(72px, 12vw, 190px); }
+    .t-title   { font-family: var(--serif); font-weight: 700; font-size: clamp(36px, 5.5vw, 88px);  line-height: 1.0; }
+    .t-head    { font-family: var(--serif); font-weight: 600; font-size: clamp(22px, 3vw, 48px);    line-height: 1.1; }
+    .t-body    { font-family: var(--serif); font-weight: 400; font-size: clamp(14px, 1.5vw, 22px);  line-height: 1.65; }
+    .t-label   { font-family: var(--mono);  font-weight: 500; font-size: clamp(10px, 1.1vw, 16px);  letter-spacing: 0.18em; text-transform: uppercase; }
+    .t-big     { font-family: var(--serif); font-weight: 500; font-size: clamp(80px, 13vw, 210px);  line-height: 0.92; letter-spacing: -0.03em; }
+    /* TOPIC CARD (agenda grid) */
+    .topic {
+      border-radius: 6px;
+      padding: clamp(20px,3vh,40px) clamp(16px,2.5vw,40px);
+      display: flex; flex-direction: column; justify-content: space-between;
+      min-height: 0;
+    }
+    .topic.t-green     { background: var(--green);      color: var(--pink); }
+    .topic.t-pink      { background: var(--pink);       color: var(--green-deep); }
+    .topic.t-greenLite { background: var(--green-lite); color: var(--pink); }
+    .topic.t-cream     { background: var(--cream-2);    color: var(--green); border: 2px solid var(--green); }
+    .topic .foot { font-family: var(--mono); font-size: clamp(10px,1.1vw,16px); letter-spacing: 0.12em; text-transform: uppercase; font-weight: 500; margin-top: 1rem; }
+    /* STEP CARD */
+    .step {
+      border-radius: 8px;
+      padding: clamp(18px,2.5vh,40px) clamp(14px,2vw,32px);
+      display: flex; flex-direction: column; min-height: 0;
+      border: 2.5px solid var(--green);
+      background: var(--cream);
+      color: var(--green);
+    }
+    .step.fill      { background: var(--green);  color: var(--pink);       border-color: var(--green); }
+    .step.pinkfill  { background: var(--pink);   color: var(--green-deep); border-color: var(--pink-deep); }
+    .step .marker {
+      margin-top: auto; padding-top: 1rem;
+      border-top: 2px solid currentColor;
+      font-family: var(--mono);
+      font-size: clamp(10px,1.1vw,16px); letter-spacing: 0.12em; text-transform: uppercase; font-weight: 500;
+      display: flex; justify-content: space-between; align-items: baseline;
+    }
+    /* KPI */
+    .kpi { display: flex; flex-direction: column; gap: 0.75rem; padding-top: 2vh; border-top: 2px solid var(--pink); }
+    .kpi .big { font-family: var(--serif); font-weight: 500; font-size: clamp(80px,13vw,210px); line-height: 0.92; letter-spacing: -0.03em; color: var(--pink); }
+    .kpi .big .unit { font-size: 0.5em; color: var(--cream); margin-left: 4px; }
+    /* BAR CHART */
+    .bar-plot {
+      display: flex; align-items: flex-end; justify-content: space-between;
+      height: clamp(160px, 25vh, 400px);
+      border-left: 2px solid var(--cream); border-bottom: 2px solid var(--cream);
+      padding: 0 2vw;
+      gap: clamp(8px, 1.5vw, 24px);
+    }
+    .bar-group { display: flex; align-items: flex-end; gap: 8px; height: 100%; }
+    .bar { width: clamp(28px,3.5vw,56px); border-radius: 3px 3px 0 0; }
+    .bar.a { background: var(--pink); }
+    .bar.b { background: var(--cream); opacity: 0.5; }
+    /* CIRCLE BADGE */
+    .circle-badge {
+      width: clamp(60px,7vw,110px); height: clamp(60px,7vw,110px);
+      border-radius: 50%; border: 2px solid var(--pink);
+      display: flex; align-items: center; justify-content: center;
+      font-family: var(--mono); font-size: clamp(11px,1.2vw,18px); letter-spacing: 0.1em; font-weight: 500;
+    }
+  </style>
+</head>
+<body style="margin:0;background:#1c3018">
+<div class="reveal">
+  <div class="slides">
+    <!-- COVER -->
+    <section class="cover" style="padding:7vh 7vw;display:flex;flex-direction:column;">
+      <div class="topbar" style="border-color:rgba(232,156,177,0.4)">
+        <span class="t-label">{{ORGANIZATION}}</span>
+        <div class="circle-badge">{{DATE}}</div>
+        <span class="t-label">{{AUTHOR}}</span>
+      </div>
+      <div style="flex:1;display:flex;flex-direction:column;justify-content:center;gap:2vh">
+        <p class="t-label" style="letter-spacing:0.22em">{{CATEGORY}}</p>
+        <div class="t-display">{{TITLE}}</div>
+        <p class="t-body" style="max-width:50%;opacity:0.75;font-size:clamp(14px,1.8vw,28px)">{{SUBTITLE}}</p>
+      </div>
+    </section>
+    <!-- AGENDA (topic grid) -->
+    <section>
+      <div class="topbar">
+        <div class="t-head">목차</div>
+        <span class="t-label">{{DATE}}</span>
+      </div>
+      <div style="flex:1;display:grid;grid-template-columns:1.5fr 1fr 1fr;grid-template-rows:1fr 1fr;gap:clamp(12px,1.5vw,24px);margin-top:2.5vh">
+        <div class="topic t-green" style="grid-row:span 2">
+          <div><p class="t-label" style="margin-bottom:0.5rem">01</p><p class="t-head" style="color:var(--pink)">주요 섹션 제목</p></div>
+          <p class="foot">Section</p>
+        </div>
+        <div class="topic t-pink">
+          <p class="t-label" style="margin-bottom:0.5rem">02</p>
+          <p class="t-head" style="font-size:clamp(18px,2.2vw,34px)">섹션</p>
+          <p class="foot">Section</p>
+        </div>
+        <div class="topic t-cream">
+          <p class="t-label" style="margin-bottom:0.5rem">03</p>
+          <p class="t-head" style="font-size:clamp(18px,2.2vw,34px)">섹션</p>
+          <p class="foot">Section</p>
+        </div>
+        <div class="topic t-greenLite">
+          <p class="t-label" style="margin-bottom:0.5rem">04</p>
+          <p class="t-head" style="font-size:clamp(18px,2.2vw,34px)">섹션</p>
+          <p class="foot">Section</p>
+        </div>
+        <div class="topic" style="background:var(--cream-2);color:var(--green);border:2px solid var(--green)">
+          <p class="t-label" style="margin-bottom:0.5rem">05</p>
+          <p class="t-head" style="font-size:clamp(18px,2.2vw,34px)">섹션</p>
+          <p class="foot">Section</p>
+        </div>
+      </div>
+    </section>
+    <!-- STATEMENT (pink bg) -->
+    <section class="statement-slide" style="padding:7vh 9vw;display:flex;flex-direction:column;justify-content:space-between;">
+      <div class="t-display" style="font-size:clamp(48px,7.5vw,120px)">
+        "핵심 선언문이<br>여기에 들어갑니다"
+      </div>
+      <div style="display:flex;justify-content:space-between;align-items:flex-end;padding-top:2vh;border-top:2px solid var(--green-deep)">
+        <span class="t-label" style="color:var(--green-deep)">— 발언자, 맥락</span>
+        <span class="t-label" style="color:var(--green-deep)">{{DATE}}</span>
+      </div>
+    </section>
+    <!-- DATA (green bg) -->
+    <section class="data-slide">
+      <div class="topbar" style="border-color:rgba(239,231,212,0.3)">
+        <div class="t-head" style="color:var(--cream)">데이터 분석</div>
+        <span class="t-label" style="color:var(--cream);opacity:0.6">{{DATE}}</span>
+      </div>
+      <div style="flex:1;display:grid;grid-template-columns:1fr 1.5fr;gap:clamp(30px,4vw,60px);align-items:center">
+        <div>
+          <p class="t-label" style="color:var(--pink);margin-bottom:1rem">Key Insight</p>
+          <p class="t-head" style="color:var(--cream);font-size:clamp(18px,2.5vw,38px)">데이터가 말하는 것</p>
+          <p class="t-body" style="color:var(--cream);opacity:0.7;margin-top:1.5vh">설명 내용</p>
+        </div>
+        <div class="bar-plot">
+          <div class="bar-group"><div class="bar a" style="height:80%"></div><div class="bar b" style="height:60%"></div></div>
+          <div class="bar-group"><div class="bar a" style="height:65%"></div><div class="bar b" style="height:50%"></div></div>
+          <div class="bar-group"><div class="bar a" style="height:90%"></div><div class="bar b" style="height:70%"></div></div>
+          <div class="bar-group"><div class="bar a" style="height:55%"></div><div class="bar b" style="height:40%"></div></div>
+        </div>
+      </div>
+    </section>
+    <!-- FRAMEWORK (4-step) -->
+    <section>
+      <div class="topbar">
+        <div class="t-head">프레임워크</div>
+        <span class="t-label">{{PERIOD}}</span>
+      </div>
+      <div style="flex:1;display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(14px,2vw,28px);margin-top:2.5vh">
+        <div class="step fill"><p class="t-label" style="margin-bottom:1rem;color:var(--pink)">01</p><p class="t-head" style="color:var(--pink);font-size:clamp(16px,2vw,30px)">단계명</p><p class="t-body" style="color:var(--pink);opacity:0.8;margin-top:0.75rem;font-size:0.85em">설명</p><div class="marker"><span>Phase 1</span></div></div>
+        <div class="step">      <p class="t-label" style="margin-bottom:1rem">02</p><p class="t-head" style="font-size:clamp(16px,2vw,30px)">단계명</p><p class="t-body" style="opacity:0.7;margin-top:0.75rem;font-size:0.85em">설명</p><div class="marker"><span>Phase 2</span></div></div>
+        <div class="step pinkfill"><p class="t-label" style="margin-bottom:1rem">03</p><p class="t-head" style="font-size:clamp(16px,2vw,30px)">단계명</p><p class="t-body" style="opacity:0.8;margin-top:0.75rem;font-size:0.85em">설명</p><div class="marker"><span>Phase 3</span></div></div>
+        <div class="step">      <p class="t-label" style="margin-bottom:1rem">04</p><p class="t-head" style="font-size:clamp(16px,2vw,30px)">단계명</p><p class="t-body" style="opacity:0.7;margin-top:0.75rem;font-size:0.85em">설명</p><div class="marker"><span>Phase 4</span></div></div>
+      </div>
+    </section>
+    <!-- STATS (green bg) -->
+    <section class="data-slide">
+      <div class="topbar" style="border-color:rgba(239,231,212,0.3)">
+        <div class="t-head" style="color:var(--cream)">성과 지표</div>
+        <span class="t-label" style="color:var(--cream);opacity:0.6">{{DATE}}</span>
+      </div>
+      <div style="flex:1;display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(30px,5vw,60px);align-items:start;margin-top:3vh">
+        <div class="kpi"><div class="big">98<span class="unit">%</span></div><p class="t-label" style="color:var(--cream)">지표명</p><p class="t-body" style="color:var(--cream);opacity:0.6">설명</p></div>
+        <div class="kpi"><div class="big">41<span class="unit">개</span></div><p class="t-label" style="color:var(--cream)">지표명</p><p class="t-body" style="color:var(--cream);opacity:0.6">설명</p></div>
+        <div class="kpi"><div class="big">86<span class="unit">%</span></div><p class="t-label" style="color:var(--cream)">지표명</p><p class="t-body" style="color:var(--cream);opacity:0.6">설명</p></div>
+      </div>
+    </section>
+    <!-- CLOSING -->
+    <section class="cover" style="padding:7vh 7vw;display:flex;flex-direction:column;">
+      <div class="topbar" style="border-color:rgba(232,156,177,0.4)">
+        <span class="t-label">{{ORGANIZATION}}</span>
+        <span class="t-label">{{DATE}}</span>
+      </div>
+      <div style="flex:1;display:flex;flex-direction:column;justify-content:center;gap:2vh">
+        <p class="t-label" style="letter-spacing:0.22em">Thank You</p>
+        <div class="t-display" style="font-size:clamp(60px,10vw,160px)">Q&amp;A</div>
+      </div>
+      <div style="display:grid;grid-template-columns:repeat(3,1fr);gap:2vw;border-top:2px solid rgba(232,156,177,0.4);padding-top:2vh">
+        <div><p class="t-label" style="opacity:0.6;margin-bottom:0.5rem">발표자</p><p class="t-body" style="font-weight:700">{{AUTHOR}}</p></div>
+        <div><p class="t-label" style="opacity:0.6;margin-bottom:0.5rem">이메일</p><p class="t-body">{{EMAIL}}</p></div>
+        <div><p class="t-label" style="opacity:0.6;margin-bottom:0.5rem">소속</p><p class="t-body">{{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: true, progress: false, slideNumber: false,
+    transition: 'fade', backgroundTransition: 'fade',
+    plugins: [RevealNotes],
+  });
+</script>
+</body>
+</html>