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

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

@@ -0,0 +1,273 @@
+<!DOCTYPE html>
+<html lang="ko">
+<head>
+  <meta charset="utf-8" />
+  <title>Emerald Editorial — 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=Bodoni+Moda:wght@500;700;800;900&family=Manrope:wght@400;500;600;700;800&display=swap" rel="stylesheet" />
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/reveal.js@5/dist/reveal.css" />
+  <style>
+    :root {
+      --bg:    #3CD896;
+      --bg-2:  #2DC684;
+      --ink:   #0F1A5C;
+      --ink-2: #1B2774;
+      --paper: #F1E9D6;
+      --rule:  rgba(15, 26, 92, 0.22);
+      --rule-strong: rgba(15, 26, 92, 0.85);
+      --display-font: 'Bodoni Moda', serif;
+    }
+    .reveal { font-family: 'Manrope', 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 p,.reveal ul,.reveal ol { margin: 0; }
+    /* STAGE wrapper inside each section */
+    .stage {
+      position: absolute; inset: 0;
+      padding: 56px 80px 70px;
+      display: grid;
+      grid-template-rows: auto 1fr auto;
+    }
+    /* CHROME */
+    .masthead, .footline {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      font-size: clamp(14px, 1.6vw, 22px);
+      font-weight: 700;
+      letter-spacing: 0.05em;
+      color: var(--ink);
+    }
+    /* RULE */
+    .rule-h  { height: 4px; background: var(--ink); }
+    .rule-h.thin { height: 1px; background: var(--rule); }
+    /* ORNAMENT — double rule with word */
+    .ornament {
+      display: inline-flex;
+      align-items: center;
+      gap: 26px;
+      justify-content: center;
+      width: 100%;
+    }
+    .ornament .word {
+      font-family: var(--display-font);
+      font-weight: 800;
+      font-size: 0.42em;
+      letter-spacing: 0.02em;
+      padding: 0 4px;
+    }
+    .ornament .lines {
+      flex: 1; height: 18px; position: relative;
+    }
+    .ornament .lines::before,
+    .ornament .lines::after {
+      content: "";
+      position: absolute;
+      left: 0; right: 0;
+      height: 4px;
+      background: var(--ink);
+    }
+    .ornament .lines::before { top: 3px; }
+    .ornament .lines::after  { bottom: 3px; }
+    /* TYPOGRAPHY */
+    .t-display {
+      font-family: var(--display-font);
+      font-weight: 900;
+      line-height: 0.88;
+      letter-spacing: -0.01em;
+      color: var(--ink);
+    }
+    .t-display.xl  { font-size: clamp(100px, 18vw, 280px); }
+    .t-display.lg  { font-size: clamp(60px,  10vw, 160px); }
+    .t-display.md  { font-size: clamp(36px,  5.5vw, 88px); }
+    .t-head  { font-family: var(--display-font); font-weight: 700; font-size: clamp(24px, 3.5vw, 52px); line-height: 1.1; color: var(--ink); }
+    .t-body  { font-size: clamp(14px, 1.5vw, 22px); line-height: 1.6; color: var(--ink); font-weight: 400; }
+    .t-label { font-family: 'Manrope', sans-serif; font-size: clamp(11px, 1.1vw, 16px); font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink); opacity: 0.7; }
+    .t-num   { font-family: var(--display-font); font-weight: 900; font-size: clamp(60px, 9vw, 140px); line-height: 0.92; color: var(--ink); }
+    /* PAPER PANEL */
+    .panel-paper { background: var(--paper); }
+    .panel-ink   { background: var(--ink); color: var(--bg); }
+    /* KPI CARD */
+    .kpi {
+      background: var(--ink); color: var(--bg);
+      padding: clamp(20px, 3vh, 36px) clamp(18px, 2.5vw, 32px);
+      display: flex; flex-direction: column; justify-content: space-between;
+      gap: 1rem; overflow: hidden;
+    }
+    .kpi.alt { background: var(--paper); color: var(--ink); }
+    .kpi .delta {
+      display: inline-block; font-weight: 800; letter-spacing: 0.08em;
+      font-size: clamp(11px, 1.2vw, 18px); padding: 4px 12px;
+      background: var(--bg); color: var(--ink); align-self: flex-start;
+    }
+    /* STEP CARD */
+    .step {
+      background: var(--ink); color: var(--bg);
+      padding: clamp(18px, 2.5vh, 32px) clamp(16px, 2vw, 28px);
+      display: flex; flex-direction: column;
+    }
+    .step.alt { background: var(--paper); color: var(--ink); }
+    /* MARK (inline badge) */
+    .mark { background: var(--ink); color: var(--bg); padding: 6px 18px; font-weight: 700; letter-spacing: 0.1em; }
+  </style>
+</head>
+<body style="margin:0;background:#1a4a38">
+<div class="reveal">
+  <div class="slides">
+    <!-- COVER -->
+    <section>
+      <div class="stage" style="padding:56px 80px;text-align:center;display:flex;flex-direction:column;align-items:center;">
+        <div class="masthead" style="width:100%">
+          <span class="t-label">{{ORGANIZATION}}</span>
+          <span class="t-label">{{DATE}}</span>
+        </div>
+        <div style="flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1.5vh">
+          <div class="ornament" style="font-size:clamp(20px,2.5vw,36px)">
+            <div class="lines"></div>
+            <span class="word">{{CATEGORY}}</span>
+            <div class="lines"></div>
+          </div>
+          <div class="t-display xl" style="text-align:center">{{TITLE}}</div>
+          <div class="ornament" style="font-size:clamp(20px,2.5vw,36px)">
+            <div class="lines"></div>
+            <span class="word">{{SUBTITLE}}</span>
+            <div class="lines"></div>
+          </div>
+        </div>
+        <div class="footline" style="width:100%">
+          <span class="t-label">{{AUTHOR}}</span>
+          <span class="t-label">Vol. {{ISSUE}}</span>
+        </div>
+      </div>
+    </section>
+    <!-- SECTION OPENER (split) -->
+    <section style="padding:0">
+      <div style="position:absolute;inset:0;display:grid;grid-template-columns:1fr 1fr">
+        <div class="panel-ink" style="padding:clamp(40px,5vw,80px);display:flex;align-items:center;justify-content:center;overflow:hidden">
+          <div class="t-display xl" style="color:var(--bg);text-align:center">01</div>
+        </div>
+        <div style="padding:clamp(40px,5vw,80px);display:flex;flex-direction:column;justify-content:center;gap:1.5rem;overflow:hidden">
+          <span class="t-label">Chapter</span>
+          <div class="t-head" style="font-size:clamp(28px,4vw,62px)">섹션<br>제목</div>
+          <div class="rule-h" style="width:36px"></div>
+          <p class="t-body">서브 설명이 여기에 들어갑니다.</p>
+        </div>
+      </div>
+    </section>
+    <!-- STATEMENT + 3-COL SUPPORT -->
+    <section>
+      <div class="stage">
+        <div>
+          <div class="t-head" style="font-size:clamp(28px,4vw,60px)">핵심 주장</div>
+          <div class="rule-h" style="margin-top:1.5vh"></div>
+        </div>
+        <div style="display:flex;align-items:center">
+          <div class="t-display lg">이것이<br>핵심이다</div>
+        </div>
+        <div style="display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,3vw,50px);border-top:4px solid var(--ink);padding-top:2vh">
+          <div><p class="t-label" style="margin-bottom:0.5rem">근거 01</p><p class="t-body">설명 내용</p></div>
+          <div><p class="t-label" style="margin-bottom:0.5rem">근거 02</p><p class="t-body">설명 내용</p></div>
+          <div><p class="t-label" style="margin-bottom:0.5rem">근거 03</p><p class="t-body">설명 내용</p></div>
+        </div>
+      </div>
+    </section>
+    <!-- KPI GRID -->
+    <section>
+      <div class="stage">
+        <div style="display:grid;grid-template-columns:1.2fr 1fr;gap:clamp(40px,5vw,80px);align-items:end">
+          <div class="t-head" style="font-size:clamp(28px,3.5vw,54px)">핵심 지표</div>
+          <p class="t-body" style="opacity:0.7">{{SECTION_LABEL}}</p>
+        </div>
+        <div style="display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(16px,2vw,28px);margin-top:2vh">
+          <div class="kpi"><div class="t-num">98%</div><div><p class="t-label" style="color:var(--bg)">지표명</p><div class="delta">+12%p</div></div></div>
+          <div class="kpi alt"><div class="t-num">2.4s</div><div><p class="t-label">지표명</p></div></div>
+          <div class="kpi"><div class="t-num">41</div><div><p class="t-label" style="color:var(--bg)">지표명</p><div class="delta">+8</div></div></div>
+          <div class="kpi alt"><div class="t-num">86%</div><div><p class="t-label">지표명</p></div></div>
+        </div>
+        <div class="footline" style="margin-top:1.5vh">
+          <span class="t-label">{{ORG}}</span>
+          <span class="t-label">{{DATE}}</span>
+        </div>
+      </div>
+    </section>
+    <!-- PROCESS — 4 steps -->
+    <section>
+      <div class="stage">
+        <div style="display:grid;grid-template-columns:1.1fr 1fr;gap:clamp(40px,5vw,80px);align-items:end">
+          <div class="t-head">실행 단계</div>
+          <p class="t-body" style="opacity:0.7">{{PERIOD}}</p>
+        </div>
+        <div style="display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(16px,2vw,28px);margin-top:2vh">
+          <div class="step"><p class="t-label" style="color:var(--bg);margin-bottom:1rem">01</p><p class="t-body" style="color:var(--bg)">Step 제목</p><p class="t-body" style="color:var(--bg);opacity:0.7;font-size:0.85em;margin-top:0.5rem">설명</p></div>
+          <div class="step alt"><p class="t-label" style="margin-bottom:1rem">02</p><p class="t-body">Step 제목</p><p class="t-body" style="opacity:0.7;font-size:0.85em;margin-top:0.5rem">설명</p></div>
+          <div class="step"><p class="t-label" style="color:var(--bg);margin-bottom:1rem">03</p><p class="t-body" style="color:var(--bg)">Step 제목</p><p class="t-body" style="color:var(--bg);opacity:0.7;font-size:0.85em;margin-top:0.5rem">설명</p></div>
+          <div class="step alt"><p class="t-label" style="margin-bottom:1rem">04</p><p class="t-body">Step 제목</p><p class="t-body" style="opacity:0.7;font-size:0.85em;margin-top:0.5rem">설명</p></div>
+        </div>
+        <div class="footline" style="margin-top:1.5vh">
+          <span class="t-label">{{ORG}}</span>
+          <span class="t-label">{{DATE}}</span>
+        </div>
+      </div>
+    </section>
+    <!-- CLOSING -->
+    <section>
+      <div class="stage" style="text-align:center;align-items:center">
+        <div class="masthead" style="width:100%;justify-content:center">
+          <span class="t-label">{{ORGANIZATION}}</span>
+        </div>
+        <div style="display:flex;flex-direction:column;align-items:center;gap:1.5vh">
+          <div class="ornament" style="font-size:clamp(20px,2.5vw,36px)">
+            <div class="lines"></div>
+            <span class="word">Thank You</span>
+            <div class="lines"></div>
+          </div>
+          <div class="t-display lg" style="text-align:center">Q&amp;A</div>
+        </div>
+        <div style="display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,3vw,40px);border-top:4px solid var(--ink);padding-top:2vh;text-align:left">
+          <div><p class="t-label" style="margin-bottom:0.5rem">발표자</p><p class="t-body" style="font-weight:700">{{AUTHOR}}</p></div>
+          <div><p class="t-label" style="margin-bottom:0.5rem">이메일</p><p class="t-body">{{EMAIL}}</p></div>
+          <div><p class="t-label" style="margin-bottom:0.5rem">소속</p><p class="t-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: false, slideNumber: false,
+    transition: 'fade', backgroundTransition: 'fade',
+    plugins: [RevealNotes],
+  });
+</script>
+</body>
+</html>