npm - sns-auto-builder - Versions diffs - 1.0.0 - Mend

sns-auto-builder 1.0.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 (31) hide show

package/.claude/agents/carousel-html-writer.md +71 -0
package/.claude/agents/carousel-prompt-writer.md +57 -0
package/.claude/agents/carousel-researcher.md +49 -0
package/.claude/agents/carousel-reviewer.md +74 -0
package/.claude/commands/carousel-new.md +111 -0
package/.claude/commands/carousel-quality.md +31 -0
package/CLAUDE.md +180 -0
package/LICENSE +21 -0
package/README.md +178 -0
package/README.upstream.md +145 -0
package/bin/sns-auto-builder.mjs +116 -0
package/index.html +1350 -0
package/knowledge/banned-words.json +33 -0
package/knowledge/brand.schema.json +62 -0
package/knowledge/patterns/carousel-output-format.md +47 -0
package/knowledge/patterns/carousel-structure.md +83 -0
package/knowledge/patterns/thread-structure.md +81 -0
package/knowledge/reference/.keep +0 -0
package/knowledge/tone/.keep +0 -0
package/package.json +50 -0
package/scripts/chatgpt-image-gen.js +400 -0
package/scripts/hook-post-write.js +60 -0
package/scripts/html-carousel-gen.js +125 -0
package/scripts/nanobanana-gen.py +137 -0
package/scripts/openai-image-gen.js +230 -0
package/scripts/quality-check-text.js +95 -0
package/scripts/quality-check.js +206 -0
package/server.mjs +877 -0
package/templates/backgrounds.example.json +22 -0
package/templates/slide-layouts/.keep +0 -0
package/templates/slides.example.json +51 -0

package/index.html ADDED Viewed

@@ -0,0 +1,1350 @@
+<!DOCTYPE html>
+<html lang="ko">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width,initial-scale=1">
+<title>카피 빌더</title>
+<style>
+@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/variable/pretendardvariable.css');
+@import url('https://fonts.googleapis.com/css2?family=Jua&display=swap');
+/* 색은 전부 크림(--paper) 기준 4.5:1 이상 실측해서 고른 값. 임의로 밝히지 말 것. */
+:root {
+  --paper:#FFF9F2; --card:#FFFDFA; --field:#FDF1E4;
+  --ink:#2B2118;            /* 15.06:1 */
+  --ink-2:#71614E;          /*  5.70:1 */
+  --accent:#B4471F;         /*  5.20:1 — 크림 위 글자, 그리고 채움 위 크림 글자 양방향 통과 */
+  --accent-soft:#FAE9DE;    /* 이 위의 --accent 글자가 4.60:1 — 더 진하게 하면 미달 */
+  --rule:rgba(43,33,24,.12);
+  --shadow:0 1px 2px rgba(43,33,24,.05), 0 6px 16px rgba(43,33,24,.05);
+  --shadow-up:0 3px 6px rgba(43,33,24,.06), 0 14px 30px rgba(43,33,24,.09);
+  --display:'Jua',system-ui,sans-serif;
+  --sans:'Pretendard Variable',-apple-system,sans-serif;
+  --ease:cubic-bezier(.16,1,.3,1);
+}
+* { margin:0; padding:0; box-sizing:border-box; }
+html { -webkit-text-size-adjust:100%; }
+body {
+  background:var(--paper); color:var(--ink); font-family:var(--sans);
+  font-size:16px; line-height:1.65; min-height:100vh;
+  display:flex; justify-content:center; padding:clamp(40px,7vw,84px) 24px 96px;
+}
+main { width:100%; max-width:660px; }
+/* ── 타이포 ─────────────────────────────────── */
+/* Jua 는 굵기가 하나뿐이라 위계는 크기와 서체 대비로 만든다. */
+h1 { font-family:var(--display); font-weight:400; letter-spacing:-.015em; line-height:1.3;
+     font-size:clamp(29px,5.2vw,42px); text-wrap:balance; }
+h2 { font-family:var(--display); font-weight:400; font-size:20px; letter-spacing:-.01em; }
+p { max-width:62ch; }
+.lede { color:var(--ink-2); margin-top:12px; font-size:16.5px; }
+.fine { color:var(--ink-2); font-size:13.5px; }
+/* 표제 아래 짧은 밑줄 — 한 번만 그려지는 모션 */
+.masthead { margin-bottom:30px; }
+.masthead::after {
+  content:''; display:block; width:44px; height:6px; border-radius:99px; background:var(--accent);
+  margin-top:18px; transform-origin:left; animation:draw .7s var(--ease) both;
+}
+@keyframes draw { from { transform:scaleX(0); } to { transform:scaleX(1); } }
+/* ── 모드 선택 카드 ─────────────────────────── */
+.toc { display:grid; gap:14px; }
+.entry {
+  display:grid; grid-template-columns:1fr auto; align-items:center; gap:8px 20px;
+  width:100%; text-align:left; cursor:pointer; font:inherit; color:inherit;
+  padding:24px 26px; border-radius:20px;
+  background:var(--card); border:1px solid var(--rule); box-shadow:var(--shadow);
+  transition:transform .35s var(--ease), box-shadow .35s var(--ease), border-color .2s;
+}
+.entry:hover, .entry:focus-visible {
+  transform:translateY(-3px); box-shadow:var(--shadow-up); border-color:rgba(180,71,31,.4);
+}
+.entry:focus-visible { outline:2px solid var(--accent); outline-offset:3px; }
+.entry .desc { grid-column:1; color:var(--ink-2); font-size:14.5px; margin-top:4px; max-width:44ch; }
+.entry .spec {
+  color:var(--accent); background:var(--accent-soft); font-size:13px; font-weight:700;
+  white-space:nowrap; padding:5px 12px; border-radius:99px; font-variant-numeric:tabular-nums;
+}
+/* ── 입력 ──────────────────────────────────── */
+label { display:block; font-size:14px; font-weight:600; margin-bottom:10px; }
+textarea {
+  width:100%; min-height:172px; padding:18px 20px; resize:vertical;
+  background:var(--field); border:1px solid var(--rule); border-radius:18px;
+  color:var(--ink); font:inherit; font-size:16.5px; line-height:1.7;
+}
+textarea::placeholder { color:#756550; } /* --field 대비 5.06:1 */
+textarea:focus-visible { outline:2px solid var(--accent); outline-offset:2px; border-color:transparent; }
+/* ── 참고 자료 드롭존 ──────────────────────── */
+#refLabel { margin-top:26px; }
+#refLabel .fine { font-weight:400; }
+.drop {
+  border:1.5px dashed var(--rule); border-radius:18px; background:var(--field);
+  padding:26px 20px; text-align:center; cursor:pointer;
+  transition:border-color .2s, background-color .2s;
+}
+.drop:hover, .drop.over { border-color:var(--accent); background:#FDEBDD; }
+.drop:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
+.drop p { margin:0 auto; max-width:none; }
+kbd { font:inherit; font-size:.92em; background:rgba(43,33,24,.07); border-radius:5px; padding:1px 6px; }
+.thumbs { display:flex; flex-wrap:wrap; gap:10px; margin-top:12px; }
+.thumb { position:relative; width:76px; height:76px; border-radius:12px; overflow:hidden;
+         border:1px solid var(--rule); background:var(--card); }
+.thumb img { width:100%; height:100%; object-fit:cover; display:block; }
+.thumb button {
+  position:absolute; top:3px; right:3px; width:22px; height:22px; border-radius:99px; cursor:pointer;
+  border:0; background:rgba(43,33,24,.72); color:#fff; font:inherit; font-size:14px; line-height:1;
+  display:grid; place-items:center; padding:0;
+}
+.thumb button:hover { background:var(--accent); }
+.thumb button:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
+.bar { display:flex; flex-wrap:wrap; gap:10px; align-items:center; margin-top:22px; }
+button.go, button.quiet {
+  font:inherit; font-size:15px; cursor:pointer; border-radius:99px; padding:13px 26px;
+  transition:background-color .18s, color .18s, opacity .18s, transform .18s var(--ease);
+}
+button.go { background:var(--accent); color:var(--paper); border:1px solid var(--accent); font-weight:700; }
+button.go:hover:not(:disabled) { background:#9C3B18; transform:translateY(-1px); }
+button.go:disabled { opacity:.45; cursor:not-allowed; }
+button.quiet, a.dl { background:none; border:1px solid var(--rule); color:var(--ink-2); }
+a.dl { font:inherit; font-size:15px; border-radius:99px; padding:13px 26px; text-decoration:none; display:inline-block; }
+a.dl:hover { color:var(--accent); border-color:var(--accent); }
+button.quiet:hover { color:var(--accent); border-color:var(--accent); }
+button.go:focus-visible, button.quiet:focus-visible, .copy:focus-visible { outline:2px solid var(--accent); outline-offset:3px; }
+/* ── 스트리밍 ──────────────────────────────── */
+.live {
+  margin-top:28px; padding:24px 26px; background:var(--card); border:1px solid var(--rule);
+  border-radius:20px; box-shadow:var(--shadow);
+  white-space:pre-wrap; word-break:break-word; font-size:15.5px; line-height:1.78;
+  max-height:56vh; overflow-y:auto;
+}
+.live::after {
+  content:''; display:inline-block; width:8px; height:8px; border-radius:99px; background:var(--accent);
+  vertical-align:.1em; margin-left:5px; animation:blink 1.05s steps(2,start) infinite;
+}
+@keyframes blink { 50% { opacity:.15; } }
+@media (prefers-reduced-motion:reduce) { *,*::after { animation:none !important; transition:none !important; } }
+/* ── 진행 단계 ─────────────────────────────── */
+.steps { list-style:none; margin-top:26px; display:grid; gap:2px; }
+.steps li { display:flex; align-items:center; gap:12px; padding:9px 4px; font-size:15px; color:var(--ink-2); }
+.steps li .dot {
+  width:18px; height:18px; border-radius:99px; flex:none; display:grid; place-items:center;
+  border:1.5px solid var(--rule); font-size:11px; line-height:1; color:var(--paper);
+}
+.steps li[data-status="run"] { color:var(--ink); font-weight:600; }
+.steps li[data-status="run"] .dot { border-color:var(--accent); background:var(--accent-soft); animation:pulse 1.4s ease-in-out infinite; }
+.steps li[data-status="done"] .dot { border-color:var(--accent); background:var(--accent); }
+.steps li[data-status="done"] .dot::after { content:'✓'; }
+@keyframes pulse { 50% { opacity:.45; } }
+/* ── 브랜드 설정 폼 ────────────────────────── */
+.bgroup { margin-bottom:24px; }
+.bgroup > h2 { font-size:17px; margin-bottom:4px; }
+.bgroup > .fine { display:block; margin-bottom:12px; }
+.bfields { display:grid; gap:12px; }
+.bfield label { margin-bottom:5px; font-weight:500; }
+.bfield label .req { color:var(--accent); font-weight:700; }
+.bfield input[type=text], .bfield select, .bfield textarea {
+  width:100%; padding:11px 13px; font:inherit; font-size:15px; color:var(--ink);
+  background:var(--field); border:1px solid var(--rule); border-radius:11px;
+}
+.bfield textarea { min-height:78px; line-height:1.6; resize:vertical; }
+.bfield input:focus-visible, .bfield select:focus-visible, .bfield textarea:focus-visible {
+  outline:2px solid var(--accent); outline-offset:2px; border-color:transparent;
+}
+.bfield .hint { display:block; margin-top:5px; }
+.bfield.color { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
+.bfield.color label { flex:1 0 100%; margin:0 0 5px; }
+.bfield.color input[type=color] { width:44px; height:36px; padding:2px; border:1px solid var(--rule); border-radius:9px; background:var(--field); cursor:pointer; }
+.bfield.color input[type=text] { flex:1; min-width:120px; }
+/* ── 로고 ──────────────────────────────────── */
+#logoBox { margin-top:26px; }
+.logo-row { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
+.logo-prev {
+  width:96px; height:52px; display:grid; place-items:center; padding:6px;
+  border:1px solid var(--rule); border-radius:11px; background:var(--field);
+}
+.logo-prev img { max-width:100%; max-height:100%; }
+/* ── 지난 결과물 ───────────────────────────── */
+.outs { display:grid; gap:12px; }
+.out-row {
+  display:flex; align-items:center; gap:14px; padding:12px 14px;
+  background:var(--card); border:1px solid var(--rule); border-radius:16px; box-shadow:var(--shadow);
+}
+.out-row .open {
+  display:flex; align-items:center; gap:12px; flex:1; min-width:0;
+  background:none; border:0; padding:0; font:inherit; color:inherit; cursor:pointer; text-align:left;
+}
+.out-row .open:hover .t { color:var(--accent); }
+.out-row img { width:46px; height:58px; object-fit:cover; border-radius:8px; border:1px solid var(--rule); flex:none; }
+.out-row .t { font-weight:600; font-size:15px; line-height:1.4;
+              overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; }
+.out-row .n { font-size:13px; color:var(--ink-2); margin-top:2px; }
+.out-row .acts { display:flex; gap:6px; flex:none; }
+.out-row .acts a, .out-row .acts button {
+  font:inherit; font-size:12px; padding:6px 10px; cursor:pointer; text-decoration:none;
+  border:1px solid var(--rule); border-radius:7px; background:transparent; color:var(--ink-2);
+}
+.out-row .acts a:hover, .out-row .acts button:hover { color:var(--accent); border-color:var(--accent); }
+.outs .empty { color:var(--ink-2); font-size:14.5px; padding:8px 2px; }
+/* ── 참고자료 템플릿 ───────────────────────── */
+#tplBox { margin-top:26px; }
+.tpls { display:grid; gap:10px; }
+.tpl {
+  display:flex; align-items:center; gap:12px; padding:10px 12px;
+  border:1px solid var(--rule); border-radius:14px; background:var(--card);
+}
+.tpl.on { border-color:var(--accent); background:var(--accent-soft); }
+.tpl .pick { display:flex; gap:6px; flex:1; cursor:pointer; background:none; border:0; padding:0; font:inherit; }
+.tpl .pick img { width:44px; height:55px; object-fit:cover; border-radius:7px; border:1px solid var(--rule); }
+.tpl .meta { font-size:13px; color:var(--ink-2); align-self:center; margin-left:4px; }
+.tpl .del {
+  font:inherit; font-size:12px; padding:5px 9px; cursor:pointer; flex:none;
+  border:1px solid var(--rule); border-radius:6px; background:transparent; color:var(--ink-2);
+}
+.tpl .del:hover { color:var(--accent); border-color:var(--accent); }
+/* ── 시나리오 확인 ─────────────────────────── */
+.scenario { list-style:none; display:grid; gap:8px; counter-reset:s; }
+.scenario li {
+  counter-increment:s; display:grid; gap:3px;
+  padding:14px 18px 14px 46px; position:relative;
+  background:var(--card); border:1px solid var(--rule); border-radius:14px;
+}
+.scenario li::before {
+  content:counter(s,decimal-leading-zero); position:absolute; left:16px; top:14px;
+  color:var(--accent); font-size:13px; font-weight:700; font-variant-numeric:tabular-nums;
+}
+.scenario strong { font-weight:600; font-size:15.5px; line-height:1.5; }
+/* ── 인스타 목업 미리보기 ──────────────────── */
+.ig {
+  max-width:392px; margin:0 auto 30px; background:var(--card);
+  border:1px solid var(--rule); border-radius:16px; overflow:hidden; box-shadow:var(--shadow);
+}
+.ig-head { display:flex; align-items:center; gap:9px; padding:11px 13px; }
+.ig-ava {
+  width:29px; height:29px; border-radius:99px; flex:none;
+  background:linear-gradient(135deg,var(--accent),#E8A23C);
+}
+.ig-name { font-size:13.5px; font-weight:700; }
+.ig-more { margin-left:auto; color:var(--ink-2); letter-spacing:1px; }
+.ig-media { position:relative; aspect-ratio:4/5; background:#000; }
+/* scroll-snap 하나로 터치·트랙패드 스와이프가 다 된다. 스와이퍼 라이브러리 불필요. */
+.ig-track {
+  display:flex; height:100%; overflow-x:auto; scroll-snap-type:x mandatory;
+  scrollbar-width:none; -ms-overflow-style:none; scroll-behavior:smooth;
+}
+.ig-track::-webkit-scrollbar { display:none; }
+.ig-track img {
+  flex:0 0 100%; width:100%; height:100%; object-fit:cover;
+  scroll-snap-align:center; scroll-snap-stop:always; display:block;
+}
+.ig-track:focus-visible { outline:2px solid var(--accent); outline-offset:-2px; }
+.ig-nav {
+  position:absolute; top:50%; transform:translateY(-50%); z-index:2;
+  width:30px; height:30px; border-radius:99px; border:0; cursor:pointer;
+  background:rgba(255,255,255,.9); color:#2B2118; font-size:19px; line-height:1;
+  display:grid; place-items:center; padding:0 0 2px; box-shadow:0 1px 4px rgba(0,0,0,.25);
+  opacity:0; transition:opacity .18s;
+}
+.ig:hover .ig-nav, .ig-nav:focus-visible { opacity:1; }
+.ig-nav.prev { left:9px; } .ig-nav.next { right:9px; }
+.ig-nav[disabled] { display:none; }
+.ig-count {
+  position:absolute; top:11px; right:11px; z-index:2;
+  background:rgba(0,0,0,.6); color:#fff; font-size:12px; font-weight:600;
+  padding:3px 9px; border-radius:99px; font-variant-numeric:tabular-nums;
+}
+.ig-pips { display:flex; justify-content:center; gap:5px; padding:10px 0 2px; }
+.ig-pips i { width:6px; height:6px; border-radius:99px; background:var(--rule); transition:background-color .2s; }
+.ig-pips i.on { background:var(--accent); }
+.ig-acts { display:flex; align-items:center; gap:13px; padding:6px 13px 2px; font-size:17px; }
+.ig-acts b { flex:1; }
+.ig-cap { padding:2px 13px 14px; font-size:13.5px; color:var(--ink-2); line-height:1.55; }
+/* 모션 최소화 설정이면 스냅 애니메이션도 끈다 */
+@media (prefers-reduced-motion:reduce) { .ig-track { scroll-behavior:auto; } }
+/* ── 결과: 슬라이드 ────────────────────────── */
+.slides { display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:12px; margin-bottom:28px; }
+.slides a {
+  display:block; border-radius:14px; overflow:hidden; border:1px solid var(--rule);
+  box-shadow:var(--shadow); background:var(--card); transition:transform .3s var(--ease), box-shadow .3s var(--ease);
+}
+.slides a:hover { transform:translateY(-3px); box-shadow:var(--shadow-up); }
+.slides a:focus-visible { outline:2px solid var(--accent); outline-offset:3px; }
+.slides img { width:100%; aspect-ratio:4/5; object-fit:cover; display:block; }
+.slides .cell { display:flex; flex-direction:column; gap:6px; }
+.slides .cell.busy img { opacity:.4; filter:grayscale(1); }
+.regen {
+  font:inherit; font-size:12px; padding:5px 8px; cursor:pointer;
+  border:1px solid var(--rule); border-radius:6px; background:transparent; color:inherit;
+}
+.regen:hover:not(:disabled) { border-color:var(--accent); color:var(--accent); }
+.regen:disabled { opacity:.5; cursor:progress; }
+#outPath { margin-bottom:24px; word-break:break-all; }
+/* ── 결과: 장별 카드 ───────────────────────── */
+#blocks { display:grid; gap:12px; }
+.block {
+  background:var(--card); border:1px solid var(--rule); border-radius:20px;
+  box-shadow:var(--shadow); padding:20px 24px 22px;
+}
+.block header { display:flex; justify-content:space-between; align-items:center; gap:16px; margin-bottom:10px; }
+.block h2 { font-size:17px; color:var(--accent); }
+.block .text { white-space:pre-wrap; word-break:break-word; font-size:15.5px; line-height:1.8; max-width:62ch; }
+.copy {
+  font:inherit; font-size:12.5px; font-weight:700; cursor:pointer;
+  background:none; border:1px solid var(--rule); color:var(--ink-2);
+  padding:5px 14px; border-radius:99px; opacity:0; transition:opacity .18s, color .18s, border-color .18s;
+}
+.block:hover .copy, .copy:focus-visible { opacity:1; }
+.copy:hover { color:var(--accent); border-color:var(--accent); }
+@media (hover:none) { .copy { opacity:1; } }
+.notice { margin-top:18px; font-size:14.5px; }
+.notice.error { color:var(--accent); font-weight:700; }
+[hidden] { display:none !important; }
+.screen { animation:rise .5s var(--ease) both; }
+@keyframes rise { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:none; } }
+@media (max-width:560px) {
+  .entry { grid-template-columns:1fr; align-items:start; }
+  .entry .spec { grid-column:1; justify-self:start; }
+}
+</style>
+</head>
+<body>
+<main>
+  <!-- 1. 모드 선택 -->
+  <section id="pick" class="screen">
+    <div class="masthead">
+      <h1>무엇을 쓸까요</h1>
+      <p class="lede">주제 하나만 주면 형식에 맞춰 카피를 씁니다.</p>
+    </div>
+    <div class="toc">
+      <button class="entry" data-mode="cardnews">
+        <h2>카드뉴스</h2>
+        <span class="spec">9장</span>
+        <span class="desc">인스타 캐러셀. 커버 한 장, 본문 일곱 장, 아웃트로 한 장에 인스타 캡션까지.</span>
+      </button>
+      <button class="entry" data-mode="thread">
+        <h2>쓰레드</h2>
+        <span class="spec">3~5글</span>
+        <span class="desc">Threads 게시글. 첫 줄에서 끊기는 훅과 이어지는 글, 마지막에만 CTA.</span>
+      </button>
+    </div>
+    <div class="bar">
+      <button class="quiet" id="brandOpen">⚙ 브랜드 컨셉 설정</button>
+      <span class="fine" id="brandNow"></span>
+    </div>
+  </section>
+  <!-- 1.2 브랜드 설정 — 여기 값이 모든 카피·디자인의 기준이 된다 -->
+  <section id="brand" class="screen" hidden>
+    <div class="masthead">
+      <h1>브랜드 컨셉</h1>
+      <p class="lede">브랜드명만 필수입니다. <strong>나머지는 비워두면 아예 언급되지 않습니다</strong> — 모르는 걸 지어내지 않도록.</p>
+    </div>
+    <div id="brandForm"></div>
+    <p class="notice error" id="brandErr" hidden role="alert"></p>
+    <div class="bar">
+      <button class="go" id="brandSave">저장</button>
+      <button class="quiet" id="brandBack">돌아가기</button>
+      <span class="fine" id="brandSaved"></span>
+    </div>
+  </section>
+  <!-- 1.5 엔진 선택 (카드뉴스만) -->
+  <section id="engine" class="screen" hidden>
+    <div class="masthead">
+      <h1>어떻게 만들까요</h1>
+      <p class="lede">글자를 어디서 그릴지에 따라 한글 정확도와 비용이 갈립니다.</p>
+    </div>
+    <div class="toc">
+      <button class="entry" data-engine="html">
+        <h2>HTML만</h2>
+        <span class="spec">0원</span>
+        <span class="desc">글자를 HTML로 그려 캡처합니다. 한글 100% 정확하고 한 글자만 고쳐 다시 뽑을 수 있습니다. 키가 필요 없습니다.</span>
+      </button>
+      <button class="entry" data-engine="both">
+        <h2>이미지 + HTML</h2>
+        <span class="spec">ChatGPT 구독</span>
+        <span class="desc">브라우저로 ChatGPT를 열어 배경만 뽑고, 한글은 그 위에 HTML로 얹습니다. 분위기는 살면서 한글은 그대로 100%입니다. 키가 필요 없습니다.</span>
+      </button>
+      <button class="entry" data-engine="image">
+        <h2>이미지만</h2>
+        <span class="spec">ChatGPT 구독</span>
+        <span class="desc">브라우저로 ChatGPT를 열어 9장을 한 장씩 그립니다. 한글이 이미지 안에 들어가 매번 조금씩 달라지고, 육안 검수가 필요합니다.</span>
+      </button>
+    </div>
+    <div class="bar">
+      <button class="quiet" id="engineBack">모드 바꾸기</button>
+      <button class="quiet" id="outsOpen">📁 결과물 보기</button>
+    </div>
+  </section>
+  <!-- 1.7 지난 결과물 -->
+  <section id="outs" class="screen" hidden>
+    <div class="masthead">
+      <h1>결과물</h1>
+      <p class="lede" id="outsNote">지금까지 만든 카드뉴스입니다.</p>
+    </div>
+    <div class="outs" id="outsList"></div>
+    <div class="bar"><button class="quiet" id="outsBack">돌아가기</button></div>
+  </section>
+  <!-- 2. 주제 입력 -->
+  <section id="form" class="screen" hidden>
+    <div class="masthead">
+      <h1 id="formTitle"></h1>
+      <p class="lede">한 줄이어도 되고, 참고할 자료를 통째로 붙여넣어도 됩니다.</p>
+    </div>
+    <label for="topic">주제</label>
+    <textarea id="topic" placeholder="예) 클로드 코드로 개발 속도 올린 방법 일곱 가지"></textarea>
+    <div id="countRow" hidden>
+      <label for="count">장수 <span class="fine">고르지 않으면 9장</span></label>
+      <select id="count">
+        <option value="">9장 (기본)</option>
+        <option value="4">4장</option>
+        <option value="5">5장</option>
+        <option value="6">6장</option>
+        <option value="7">7장</option>
+        <option value="8">8장</option>
+        <option value="10">10장</option>
+        <option value="12">12장</option>
+      </select>
+    </div>
+    <div id="tplBox" hidden>
+      <label>템플릿 <span class="fine">전에 쓴 참고 자료 · 누르면 이번에도 씁니다</span></label>
+      <div class="tpls" id="tpls"></div>
+    </div>
+    <div id="logoBox">
+      <label for="pick-logo">로고 <span class="fine">선택 · SVG · 슬라이드에 실제로 얹힙니다</span></label>
+      <div class="logo-row">
+        <div class="logo-prev" id="logoPrev" aria-live="polite"><span class="fine">없음</span></div>
+        <button type="button" class="quiet" id="logoPick">SVG 올리기</button>
+        <button type="button" class="quiet" id="logoDel" hidden>삭제</button>
+        <input type="file" id="pick-logo" accept=".svg,image/svg+xml" hidden>
+      </div>
+    </div>
+    <label for="pick-file" id="refLabel">참고 자료 <span class="fine">선택 · 최대 6장</span></label>
+    <div class="drop" id="drop" tabindex="0" role="button"
+         aria-describedby="refHint" aria-label="참고 이미지 추가. 끌어다 놓거나 붙여넣거나 눌러서 고르세요">
+      <p class="fine" id="refHint">끌어다 놓거나, <kbd>⌘/Ctrl + V</kbd>로 붙여넣거나, 눌러서 고르세요</p>
+      <input type="file" id="pick-file" accept="image/png,image/jpeg,image/webp,image/gif" multiple hidden>
+    </div>
+    <div class="thumbs" id="thumbs"></div>
+    <div class="bar">
+      <button class="go" id="go">쓰기 시작</button>
+      <button class="quiet" id="back">모드 바꾸기</button>
+      <span class="fine">⌘/Ctrl + Enter</span>
+    </div>
+    <p class="notice error" id="err" hidden role="alert"></p>
+  </section>
+  <!-- 3. 쓰는 중 -->
+  <section id="run" class="screen" hidden>
+    <div class="masthead">
+      <h1>쓰는 중</h1>
+      <p class="lede" id="runNote" aria-live="polite">첫 문장을 고르고 있습니다</p>
+    </div>
+    <ol class="steps" id="steps" hidden aria-label="진행 단계"></ol>
+    <div class="live" id="live" aria-live="polite" aria-busy="true"></div>
+    <div class="bar"><button class="quiet" id="stop">중단</button></div>
+  </section>
+  <!-- 3.5 시나리오 확인 — 이미지에 시간·쿼터를 쓰기 전에 사람이 승인한다 -->
+  <section id="plan" class="screen" hidden>
+    <div class="masthead">
+      <h1>이렇게 만들까요?</h1>
+      <p class="lede" id="planNote"></p>
+    </div>
+    <ol class="scenario" id="scenario"></ol>
+    <div class="bar">
+      <button class="go" id="approve">이대로 만들기</button>
+      <button class="quiet" id="redo">장수 바꿔 다시</button>
+      <button class="quiet" id="planCancel">처음으로</button>
+    </div>
+  </section>
+  <!-- 4. 결과 -->
+  <section id="out" class="screen" hidden>
+    <div class="masthead">
+      <h1 id="outTitle"></h1>
+      <p class="lede" id="outNote"></p>
+    </div>
+    <!-- 인스타 목업 미리보기. 피드에서 어떻게 보이는지 넘겨보며 확인한다. -->
+    <div class="ig" id="ig" hidden>
+      <div class="ig-head">
+        <span class="ig-ava" aria-hidden="true"></span>
+        <span class="ig-name">ohjic</span>
+        <span class="ig-more" aria-hidden="true">···</span>
+      </div>
+      <div class="ig-media">
+        <div class="ig-track" id="igTrack" tabindex="0" aria-label="슬라이드 미리보기 — 좌우로 넘기세요"></div>
+        <button class="ig-nav prev" id="igPrev" type="button" aria-label="이전 슬라이드">‹</button>
+        <button class="ig-nav next" id="igNext" type="button" aria-label="다음 슬라이드">›</button>
+        <span class="ig-count" id="igCount">1/1</span>
+      </div>
+      <div class="ig-pips" id="igPips"></div>
+      <div class="ig-acts" aria-hidden="true">
+        <span>♡</span><span>💬</span><span>↗</span><b></b><span>🔖</span>
+      </div>
+      <p class="ig-cap" id="igCap"></p>
+    </div>
+    <div class="slides" id="slides" hidden></div>
+    <p class="fine" id="outPath" hidden></p>
+    <details id="reviewBox" hidden>
+      <summary id="reviewTitle">품질 리뷰 채점 중…</summary>
+      <div id="reviewBody"></div>
+    </details>
+    <div id="blocks"></div>
+    <div class="bar">
+      <button class="go" id="copyAll">전체 복사</button>
+      <a class="quiet dl" id="zipAll" hidden download>한번에 받기</a>
+      <button class="quiet" id="again">다시 쓰기</button>
+      <button class="quiet" id="reset">처음으로</button>
+    </div>
+  </section>
+</main>
+<script>
+const $ = (id) => document.getElementById(id);
+const MODES = {
+  cardnews: { title: '카드뉴스', form: '어떤 주제로 아홉 장을 채울까요' },
+  thread:   { title: '쓰레드',   form: '어떤 이야기를 풀까요' },
+};
+const ENGINES = {
+  html:  { label: 'HTML만',        steps: ['research', 'html', 'capture', 'check'] },
+  both:  { label: '이미지 + HTML', steps: ['research', 'bg', 'html', 'capture', 'check'] },
+  image: { label: '이미지만',      steps: ['research', 'prompt', 'image', 'check'] },
+};
+const STEP_LABEL = {
+  research: '리서치', bg: '배경 이미지', html: 'HTML 작성', prompt: '이미지 프롬프트',
+  image: '이미지 생성', capture: 'PNG 캡처', check: '품질 검사',
+};
+let mode = null, engine = null, raw = '', clean = '', ctrl = null, result = null, plan = null;
+const show = (id) => ['pick', 'brand', 'engine', 'outs', 'form', 'run', 'plan', 'out'].forEach((s) => {
+  const el = $(s), on = s === id;
+  if (on && el.hidden) { el.hidden = false; el.style.animation = 'none'; el.offsetHeight; el.style.animation = ''; }
+  else el.hidden = !on;
+});
+function toForm() {
+  $('formTitle').textContent = MODES[mode].form;
+  show('form');
+  $('topic').focus();
+}
+document.querySelectorAll('[data-mode]').forEach((b) => b.onclick = () => {
+  mode = b.dataset.mode;
+  engine = null;
+  // 쓰레드는 글만 뽑으므로 엔진 선택이 없다.
+  $('countRow').hidden = mode !== 'cardnews';
+  if (mode === 'cardnews') show('engine'); else toForm();
+});
+document.querySelectorAll('[data-engine]').forEach((b) => b.onclick = () => {
+  engine = b.dataset.engine;
+  toForm();
+});
+$('engineBack').onclick = () => show('pick');
+function renderSteps(active, status) {
+  const host = $('steps');
+  if (!engine) { host.hidden = true; return; }
+  host.hidden = false;
+  if (!host.children.length) {
+    for (const id of ENGINES[engine].steps) {
+      const li = document.createElement('li');
+      li.dataset.step = id;
+      const dot = document.createElement('span');
+      dot.className = 'dot';
+      const t = document.createElement('span');
+      t.textContent = STEP_LABEL[id] || id;
+      li.append(dot, t);
+      host.append(li);
+    }
+  }
+  if (!active) return;
+  const li = host.querySelector(`[data-step="${active}"]`);
+  if (li) li.dataset.status = status === 'done' ? 'done' : 'run';
+}
+// 프롬프트 출력 형식이 "## 01 · Cover" 라 ## 기준으로 장을 나눈다.
+function parseBlocks(text) {
+  const blocks = text.split(/^##\s+/m).slice(1).map((chunk) => {
+    const nl = chunk.indexOf('\n');
+    const title = (nl < 0 ? chunk : chunk.slice(0, nl)).trim();
+    const body = (nl < 0 ? '' : chunk.slice(nl + 1)).replace(/^\s*-{3,}\s*$/gm, '').trim();
+    return { title, body };
+  }).filter((b) => b.title && b.body);
+  return blocks.length >= 2 ? blocks : null; // 형식이 깨지면 통짜로 보여준다
+}
+function render(text) {
+  const blocks = parseBlocks(text);
+  const host = $('blocks');
+  host.textContent = '';
+  $('outNote').textContent = blocks ? `${blocks.length}개 조각 · 각 조각 위에 커서를 올리면 따로 복사할 수 있습니다`
+                                    : '형식이 예상과 달라 통째로 보여줍니다';
+  for (const b of (blocks || [{ title: MODES[mode].title, body: text }])) {
+    const el = document.createElement('article');
+    el.className = 'block';
+    const h = document.createElement('header');
+    const t = document.createElement('h2');
+    t.textContent = b.title;
+    const btn = document.createElement('button');
+    btn.className = 'copy';
+    btn.type = 'button';
+    btn.textContent = '복사';
+    btn.setAttribute('aria-label', `${b.title} 복사`);
+    btn.onclick = () => copy(b.body, btn);
+    h.append(t, btn);
+    const body = document.createElement('div');
+    body.className = 'text';
+    body.textContent = b.body;
+    el.append(h, body);
+    host.append(el);
+  }
+}
+// 인스타 피드에서 어떻게 보이는지 넘겨보며 확인한다.
+// 스와이프는 CSS scroll-snap 이 처리하고, 여기서는 화살표·점·번호만 동기화한다.
+function renderIg({ dir, slides }) {
+  const track = $('igTrack');
+  const pips = $('igPips');
+  track.textContent = '';
+  pips.textContent = '';
+  $('ig').hidden = !slides.length;
+  if (!slides.length) return;
+  slides.forEach((f, i) => {
+    const img = document.createElement('img');
+    img.src = `/out/${dir.replace(/^output\//, '')}/${f}`;
+    img.alt = `${i + 1}번째 슬라이드 미리보기`;
+    img.loading = i < 2 ? 'eager' : 'lazy';
+    track.append(img);
+    pips.append(document.createElement('i'));
+  });
+  // 화면이 아직 hidden 이면 clientWidth 가 0 이라 나누면 NaN 이 된다. 그때는 첫 장으로 본다.
+  const at = () => (track.clientWidth ? Math.round(track.scrollLeft / track.clientWidth) : 0);
+  const sync = () => {
+    const i = Math.min(slides.length - 1, Math.max(0, at()));
+    $('igCount').textContent = `${i + 1}/${slides.length}`;
+    [...pips.children].forEach((p, n) => p.classList.toggle('on', n === i));
+    $('igPrev').disabled = i === 0;
+    $('igNext').disabled = i === slides.length - 1;
+  };
+  const go = (d) => track.scrollBy({ left: d * track.clientWidth, behavior: 'smooth' });
+  track.onscroll = sync;
+  $('igPrev').onclick = () => go(-1);
+  $('igNext').onclick = () => go(1);
+  // 키보드로도 넘길 수 있어야 한다 (트랙에 포커스가 있을 때)
+  track.onkeydown = (e) => {
+    if (e.key === 'ArrowRight') { e.preventDefault(); go(1); }
+    if (e.key === 'ArrowLeft') { e.preventDefault(); go(-1); }
+  };
+  track.scrollLeft = 0;
+  sync();
+}
+function renderSlides({ dir, slides, canRegen }) {
+  const host = $('slides');
+  renderIg({ dir, slides });
+  host.textContent = '';
+  host.hidden = false;
+  slides.forEach((f, i) => {
+    const cell = document.createElement('div');
+    cell.className = 'cell';
+    const a = document.createElement('a');
+    a.href = `/out/${dir.replace(/^output\//, '')}/${f}`;
+    a.download = f;
+    a.title = `${f} 내려받기`;
+    const img = document.createElement('img');
+    img.src = a.href;
+    img.alt = `${i + 1}번째 슬라이드`;
+    img.loading = 'lazy';
+    a.append(img);
+    cell.append(a);
+    // 이미지 트랙은 한글이 이미지 안에 들어가 오타가 난다. 그 장만 갈아끼울 수 있어야 한다.
+    if (canRegen) cell.append(regenButton({ dir, f, img, cell }));
+    host.append(cell);
+  });
+  $('outPath').textContent = `${slides.length}장 · ${dir}/ — 슬라이드를 누르면 내려받습니다`
+    + (canRegen ? ' · 오타가 있으면 “다시 만들기”' : '');
+  $('outPath').hidden = false;
+  // 한 장씩 누르면 브라우저가 연속 다운로드를 막는다. zip 하나로 묶어 받는다.
+  const zip = $('zipAll');
+  zip.href = `/zip/${dir.replace(/^output\//, '')}`;
+  zip.textContent = `한번에 받기 (${slides.length}장)`;
+  zip.hidden = false;
+}
+function regenButton({ dir, f, img, cell }) {
+  const btn = document.createElement('button');
+  btn.type = 'button';
+  btn.className = 'regen';
+  btn.textContent = '다시 만들기';
+  btn.onclick = async () => {
+    const n = Number((f.match(/(\d+)/) || [])[1]);
+    if (!n) return;
+    btn.disabled = true;
+    cell.classList.add('busy');
+    btn.textContent = '만드는 중…';
+    try {
+      const res = await fetch('/regen', {
+        method: 'POST',
+        headers: { 'content-type': 'application/json' },
+        body: JSON.stringify({ dir, n }),
+      });
+      // ndjson 을 끝까지 읽어야 실제 완료/실패를 안다. 마지막 줄만 판단에 쓴다.
+      const reader = res.body.getReader();
+      const dec = new TextDecoder();
+      let buf = '', last = null;
+      for (;;) {
+        const { value, done } = await reader.read();
+        if (done) break;
+        buf += dec.decode(value, { stream: true });
+        const lines = buf.split('\n');
+        buf = lines.pop();
+        for (const l of lines) { try { last = JSON.parse(l); } catch {} }
+      }
+      if (last?.error) throw new Error(last.error);
+      // 파일명이 같아 브라우저가 캐시를 쓴다. 쿼리로 깨야 새 이미지가 보인다.
+      const bust = `?t=${Date.now()}`;
+      img.src = img.src.split('?')[0] + bust;
+      // 목업 미리보기에도 같은 장이 걸려 있다. 같이 갈아주지 않으면 옛 이미지가 남는다.
+      const mock = $('igTrack').children[n - 1];
+      if (mock) mock.src = mock.src.split('?')[0] + bust;
+      btn.textContent = '다시 만들기';
+    } catch (e) {
+      btn.textContent = '실패 · 다시';
+      alert(`재생성 실패: ${e.message}`);
+    } finally {
+      btn.disabled = false;
+      cell.classList.remove('busy');
+    }
+  };
+  return btn;
+}
+async function copy(text, btn) {
+  const before = btn.textContent;
+  try {
+    await navigator.clipboard.writeText(text);
+    btn.textContent = '복사됨';
+  } catch {
+    btn.textContent = '복사 실패';
+  }
+  setTimeout(() => (btn.textContent = before), 1400);
+}
+// ── 참고 자료 ────────────────────────────────
+const MAX_REFS = 6;
+const OK_TYPES = ['image/png', 'image/jpeg', 'image/webp', 'image/gif'];
+let refs = []; // [{ name, dataUrl }]
+const readFile = (f) => new Promise((res, rej) => {
+  const r = new FileReader();
+  r.onload = () => res(r.result);
+  r.onerror = () => rej(new Error(`${f.name} 를 읽지 못했습니다`));
+  r.readAsDataURL(f);
+});
+async function addFiles(list) {
+  const files = [...list].filter((f) => f && OK_TYPES.includes(f.type));
+  if (!files.length) return showErr('png · jpg · webp · gif 만 넣을 수 있습니다.');
+  const room = MAX_REFS - refs.length;
+  if (room <= 0) return showErr(`참고 자료는 ${MAX_REFS}장까지입니다.`);
+  for (const f of files.slice(0, room)) {
+    refSet = null; // 새로 올리면 템플릿 선택은 푼다 — 둘을 섞지 않는다
+    try { refs.push({ name: f.name || '붙여넣은 이미지', dataUrl: await readFile(f) }); }
+    catch (e) { showErr(e.message); }
+  }
+  if (files.length > room) showErr(`${MAX_REFS}장까지만 담았습니다.`);
+  renderThumbs();
+}
+function renderThumbs() {
+  const host = $('thumbs');
+  loadTemplates(); // 업로드/삭제로 refSet 이 풀렸을 수 있어 템플릿 강조를 다시 맞춘다
+  host.textContent = '';
+  refs.forEach((r, i) => {
+    const el = document.createElement('div');
+    el.className = 'thumb';
+    const img = document.createElement('img');
+    img.src = r.dataUrl;
+    img.alt = r.name;
+    const del = document.createElement('button');
+    del.type = 'button';
+    del.textContent = '×';
+    del.setAttribute('aria-label', `${r.name} 빼기`);
+    del.onclick = () => { refs.splice(i, 1); renderThumbs(); };
+    el.append(img, del);
+    host.append(el);
+  });
+  $('refHint').textContent = refs.length
+    ? `${refs.length}장 담김 · 더 넣으려면 끌어다 놓거나 붙여넣으세요`
+    : '끌어다 놓거나, ⌘/Ctrl + V로 붙여넣거나, 눌러서 고르세요';
+}
+const showErr = (msg) => { $('err').textContent = msg; $('err').hidden = false; };
+$('drop').onclick = () => $('pick-file').click();
+$('drop').onkeydown = (e) => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); $('pick-file').click(); } };
+$('pick-file').onchange = (e) => { addFiles(e.target.files); e.target.value = ''; };
+['dragenter', 'dragover'].forEach((t) => $('drop').addEventListener(t, (e) => {
+  e.preventDefault(); $('drop').classList.add('over');
+}));
+['dragleave', 'drop'].forEach((t) => $('drop').addEventListener(t, () => $('drop').classList.remove('over')));
+$('drop').addEventListener('drop', (e) => { e.preventDefault(); addFiles(e.dataTransfer.files); });
+// 폼 화면에서 어디에 커서가 있든 붙여넣기를 받는다.
+document.addEventListener('paste', (e) => {
+  if ($('form').hidden) return;
+  const imgs = [...(e.clipboardData?.files || [])].filter((f) => OK_TYPES.includes(f.type));
+  if (imgs.length) { e.preventDefault(); addFiles(imgs); }
+});
+async function generate() {
+  const topic = $('topic').value.trim();
+  if (!topic) { $('err').textContent = '주제를 한 줄이라도 적어주세요.'; $('err').hidden = false; $('topic').focus(); return; }
+  $('err').hidden = true;
+  raw = '';
+  result = null;
+  $('live').textContent = '';
+  $('steps').textContent = '';
+  renderSteps();
+  show('run');
+  const t0 = Date.now();
+  const tick = setInterval(() => {
+    const s = Math.round((Date.now() - t0) / 1000);
+    $('runNote').textContent = raw ? `${raw.length}자 · ${s}초` : `첫 문장을 고르고 있습니다 · ${s}초`;
+  }, 500);
+  try {
+    await stream('/gen', {
+      mode, engine, topic,
+      count: $('count').value || undefined,
+      refSet, // 템플릿을 골랐으면 업로드 대신 그 경로를 쓴다
+      refs: refs.map((r) => r.dataUrl),
+      today: new Date().toISOString().slice(0, 10), // 폴더명용 날짜는 브라우저 기준
+    });
+    // 카드뉴스는 리서치까지만 돌았다. 시나리오를 보여주고 승인받아야 이미지를 뽑는다.
+    if (engine) {
+      if (!plan?.slides?.length) throw new Error('시나리오가 만들어지지 않았습니다. 아래 로그를 확인하세요.');
+      clearInterval(tick);
+      return renderPlan(plan);
+    }
+    $('outTitle').textContent = MODES[mode].title;
+    if (!raw.trim()) throw new Error('아무것도 생성되지 않았습니다');
+    // 프롬프트의 출력 예시가 펜스라 답변 전체를 ``` 로 감싸 오는 경우가 있어 벗겨낸다.
+    clean = raw.trim().replace(/^```[a-z]*\n([\s\S]*)\n```$/, '$1').trim();
+    $('slides').hidden = true;
+    $('outPath').hidden = true;
+    $('ig').hidden = true;      // 쓰레드는 이미지가 없다
+    $('zipAll').hidden = true;
+    $('reviewBox').hidden = true;
+    render(clean);
+    show('out');
+  } catch (e) {
+    if (e.name === 'AbortError') { show('form'); return; }
+    $('err').textContent = e.message;
+    $('err').hidden = false;
+    show('form');
+  } finally {
+    clearInterval(tick);
+    ctrl = null;
+  }
+}
+// ndjson 스트림 하나를 끝까지 읽는다. /gen 과 /build 가 같은 형식을 쓴다.
+async function stream(url, payload) {
+  ctrl = new AbortController();
+  const res = await fetch(url, {
+    method: 'POST',
+    headers: { 'content-type': 'application/json' },
+    body: JSON.stringify(payload),
+    signal: ctrl.signal,
+  });
+  if (!res.ok) throw new Error((await res.json().catch(() => ({}))).error || '요청이 거부됐습니다');
+  const reader = res.body.getReader();
+  const dec = new TextDecoder();
+  let buf = '';
+  for (;;) {
+    const { value, done } = await reader.read();
+    if (done) break;
+    buf += dec.decode(value, { stream: true });
+    const lines = buf.split('\n');
+    buf = lines.pop();
+    for (const line of lines) {
+      if (!line.trim()) continue;
+      const msg = JSON.parse(line);
+      if (msg.error) throw new Error(msg.error);
+      if (msg.step) renderSteps(msg.step, msg.status);
+      if (msg.result) result = msg.result;
+      if (msg.brief) plan = msg.brief;
+      if (msg.t) {
+        raw += msg.t;
+        $('live').textContent = raw;
+        $('live').scrollTop = $('live').scrollHeight;
+      }
+    }
+  }
+}
+// 승인 전에 시나리오를 보여준다. 장수가 마음에 안 들면 여기서 되돌린다.
+function renderPlan(p) {
+  const host = $('scenario');
+  host.textContent = '';
+  p.slides.forEach((s) => {
+    const li = document.createElement('li');
+    const h = document.createElement('strong');
+    h.textContent = (s.headline || s.role || '').replace(/\n/g, ' ');
+    li.append(h);
+    if (s.sub) {
+      const sub = document.createElement('span');
+      sub.className = 'fine';
+      sub.textContent = String(s.sub).replace(/\n/g, ' ');
+      li.append(sub);
+    }
+    host.append(li);
+  });
+  $('planNote').textContent = `${p.topic} · ${p.slides.length}장 · ${ENGINES[engine].label}`;
+  show('plan');
+}
+async function build() {
+  if (!plan?.dir) return;
+  raw = '';
+  result = null;
+  $('live').textContent = '';
+  $('steps').textContent = '';
+  renderSteps();
+  show('run');
+  const t0 = Date.now();
+  const tick = setInterval(() => {
+    $('runNote').textContent = `만드는 중 · ${Math.round((Date.now() - t0) / 1000)}초`;
+  }, 500);
+  try {
+    await stream('/build', { dir: plan.dir });
+    if (!result?.slides?.length) throw new Error('슬라이드가 만들어지지 않았습니다. 아래 로그를 확인하세요.');
+    $('outTitle').textContent = `${MODES[mode].title} · ${ENGINES[engine].label}`;
+    renderSlides(result);
+    clean = result.caption || '';
+    // 목업 캡션은 제목줄·해시태그를 뺀 본문 두 줄만 (피드에서 접히는 만큼)
+    $('igCap').textContent = clean.replace(/^#.*$/gm, '').trim().split('\n')
+      .filter((l) => l.trim()).slice(0, 2).join(' ');
+    render(clean || raw.trim());
+    show('out');
+    runReview(plan.dir); // 결과를 먼저 띄우고 채점은 뒤에서 — 기다리게 하지 않는다
+  } catch (e) {
+    if (e.name === 'AbortError') { renderPlan(plan); return; }
+    $('err').textContent = e.message;
+    $('err').hidden = false;
+    show('form');
+  } finally {
+    clearInterval(tick);
+    ctrl = null;
+  }
+}
+// 결과 화면을 띄운 뒤 백그라운드로 채점한다. 실패해도 결과물에는 영향이 없다.
+async function runReview(dir) {
+  const box = $('reviewBox');
+  box.hidden = false;
+  box.open = false;
+  $('reviewTitle').textContent = '품질 리뷰 채점 중… (몇 분 걸립니다)';
+  $('reviewBody').textContent = '';
+  try {
+    const res = await fetch('/review', {
+      method: 'POST',
+      headers: { 'content-type': 'application/json' },
+      body: JSON.stringify({ dir }),
+    });
+    if (!res.ok) throw new Error('리뷰 요청이 거부됐습니다');
+    const reader = res.body.getReader();
+    const dec = new TextDecoder();
+    let buf = '', md = null, err = null;
+    for (;;) {
+      const { value, done } = await reader.read();
+      if (done) break;
+      buf += dec.decode(value, { stream: true });
+      const lines = buf.split('\n');
+      buf = lines.pop();
+      for (const l of lines) {
+        if (!l.trim()) continue;
+        let m; try { m = JSON.parse(l); } catch { continue; }
+        if (m.review) md = m.review;
+        if (m.error) err = m.error;
+      }
+    }
+    if (!md) throw new Error(err || '리뷰가 만들어지지 않았습니다');
+    const score = (md.match(/총점[:\s*]*(\d+)\s*\/\s*100/) || [])[1];
+    $('reviewTitle').textContent = score ? `품질 리뷰 — ${score}/100 (눌러서 보기)` : '품질 리뷰 (눌러서 보기)';
+    $('reviewBody').textContent = md;
+  } catch (e) {
+    $('reviewTitle').textContent = `품질 리뷰 실패 — ${e.message}`;
+  }
+}
+// ── 참고자료 템플릿 ──────────────────────────
+// 전에 올린 세트를 골라 쓰거나 지운다. 고르면 이번 실행은 업로드 없이 그 경로를 그대로 쓴다.
+let refSet = null;
+async function loadTemplates() {
+  try {
+    const { sets } = await (await fetch('/refs')).json();
+    renderTemplates(sets);
+  } catch { $('tplBox').hidden = true; }
+}
+function renderTemplates(sets) {
+  const host = $('tpls');
+  host.textContent = '';
+  $('tplBox').hidden = !sets.length;
+  if (!sets.length) { refSet = null; return; }
+  sets.forEach((s) => {
+    const row = document.createElement('div');
+    row.className = 'tpl' + (refSet === s.id ? ' on' : '');
+    const pick = document.createElement('button');
+    pick.type = 'button';
+    pick.className = 'pick';
+    pick.title = '이 참고 자료를 이번에도 쓰기';
+    s.files.slice(0, 4).forEach((f) => {
+      const img = document.createElement('img');
+      img.src = `/out/${f.replace(/^output\//, '')}`;
+      img.alt = '';
+      img.loading = 'lazy';
+      pick.append(img);
+    });
+    const meta = document.createElement('span');
+    meta.className = 'meta';
+    meta.textContent = `${s.files.length}장${refSet === s.id ? ' · 사용 중' : ''}`;
+    pick.append(meta);
+    pick.onclick = () => {
+      refSet = refSet === s.id ? null : s.id; // 다시 누르면 해제
+      if (refSet) { refs = []; renderThumbs(); }  // 템플릿과 새 업로드는 섞지 않는다
+      renderTemplates(sets);
+    };
+    const del = document.createElement('button');
+    del.type = 'button';
+    del.className = 'del';
+    del.textContent = '삭제';
+    del.onclick = async () => {
+      if (!confirm(`참고 자료 ${s.files.length}장을 지웁니다. 되돌릴 수 없습니다.`)) return;
+      const res = await fetch('/refs/delete', {
+        method: 'POST',
+        headers: { 'content-type': 'application/json' },
+        body: JSON.stringify({ id: s.id }),
+      });
+      const out = await res.json().catch(() => ({}));
+      if (!res.ok) return alert(out.error || '삭제하지 못했습니다');
+      if (refSet === s.id) refSet = null;
+      renderTemplates(out.sets || []);
+    };
+    row.append(pick, del);
+    host.append(row);
+  });
+}
+loadTemplates();
+// ── 브랜드 설정 ──────────────────────────────
+// 폼은 서버의 brand.schema.json 으로 그린다. 항목을 늘려도 여기는 안 고쳐도 된다.
+let brandVals = {};
+async function loadBrand() {
+  try {
+    const { schema, values, logo } = await (await fetch('/brand')).json();
+    brandVals = values || {};
+    buildBrandForm(schema, brandVals);
+    $('brandNow').textContent = brandVals.name ? `현재: ${brandVals.name}` : '아직 설정 안 됨';
+    setLogo(logo);
+  } catch { /* 서버가 아직 준비 전이면 다음 진입 때 다시 시도한다 */ }
+}
+function buildBrandForm(schema, values) {
+  const host = $('brandForm');
+  host.textContent = '';
+  for (const g of schema.groups) {
+    const box = document.createElement('section');
+    box.className = 'bgroup';
+    const h = document.createElement('h2');
+    h.textContent = g.title;
+    box.append(h);
+    if (g.hint) {
+      const hint = document.createElement('span');
+      hint.className = 'fine';
+      hint.textContent = g.hint;
+      box.append(hint);
+    }
+    const fields = document.createElement('div');
+    fields.className = 'bfields';
+    for (const f of g.fields) fields.append(brandField(f, values[f.key] ?? ''));
+    box.append(fields);
+    host.append(box);
+  }
+}
+function brandField(f, val) {
+  const wrap = document.createElement('div');
+  wrap.className = 'bfield' + (f.type === 'color' ? ' color' : '');
+  const id = `bf-${f.key}`;
+  const label = document.createElement('label');
+  label.htmlFor = id;
+  label.textContent = f.label;
+  if (f.required) {
+    const req = document.createElement('span');
+    req.className = 'req';
+    req.textContent = ' *';
+    label.append(req);
+  }
+  wrap.append(label);
+  let input;
+  if (f.type === 'textarea') {
+    input = document.createElement('textarea');
+  } else if (f.type === 'select') {
+    input = document.createElement('select');
+    // 선택 안 함도 허용 — 빈칸이면 md 에서 통째로 빠진다
+    [''].concat(f.options || []).forEach((o) => {
+      const op = document.createElement('option');
+      op.value = o;
+      op.textContent = o || '— 선택 안 함 —';
+      input.append(op);
+    });
+  } else {
+    input = document.createElement('input');
+    input.type = 'text';
+  }
+  input.id = id;
+  input.dataset.key = f.key;
+  input.value = val;
+  if (f.placeholder && f.type !== 'select') input.placeholder = f.placeholder;
+  if (f.type === 'color') {
+    // 색은 색상표와 직접 입력을 같이 준다. 브랜드 HEX 를 아는 사람은 붙여넣는 게 빠르다.
+    const swatch = document.createElement('input');
+    swatch.type = 'color';
+    swatch.value = /^#[0-9a-f]{6}$/i.test(val) ? val : (f.placeholder || '#000000');
+    swatch.oninput = () => { input.value = swatch.value; };
+    input.oninput = () => { if (/^#[0-9a-f]{6}$/i.test(input.value)) swatch.value = input.value; };
+    wrap.append(swatch);
+  }
+  wrap.append(input);
+  if (f.hint) {
+    const hint = document.createElement('span');
+    hint.className = 'fine hint';
+    hint.textContent = f.hint;
+    wrap.append(hint);
+  }
+  return wrap;
+}
+$('brandOpen').onclick = () => { $('brandErr').hidden = true; $('brandSaved').textContent = ''; show('brand'); };
+$('brandBack').onclick = () => show('pick');
+$('brandSave').onclick = async () => {
+  const values = {};
+  $('brandForm').querySelectorAll('[data-key]').forEach((el) => { values[el.dataset.key] = el.value.trim(); });
+  if (!values.name) {
+    $('brandErr').textContent = '브랜드명은 있어야 합니다. 나머지는 비워도 됩니다.';
+    $('brandErr').hidden = false;
+    return;
+  }
+  $('brandErr').hidden = true;
+  try {
+    const res = await fetch('/brand', {
+      method: 'POST',
+      headers: { 'content-type': 'application/json' },
+      body: JSON.stringify({ values }),
+    });
+    const out = await res.json().catch(() => ({}));
+    if (!res.ok) throw new Error(out.error || '저장하지 못했습니다');
+    brandVals = out.values;
+    $('brandNow').textContent = `현재: ${brandVals.name}`;
+    $('brandSaved').textContent = '저장했습니다';
+    setTimeout(() => { $('brandSaved').textContent = ''; }, 2500);
+  } catch (e) {
+    $('brandErr').textContent = e.message;
+    $('brandErr').hidden = false;
+  }
+};
+// ── 로고 ─────────────────────────────────────
+function setLogo(on) {
+  const prev = $('logoPrev');
+  prev.textContent = '';
+  $('logoDel').hidden = !on;
+  if (on) {
+    const img = document.createElement('img');
+    img.src = `/logo.svg?t=${Date.now()}`; // 교체 직후에도 옛 파일이 안 남게
+    img.alt = '로고';
+    prev.append(img);
+  } else {
+    const s = document.createElement('span');
+    s.className = 'fine';
+    s.textContent = '없음';
+    prev.append(s);
+  }
+}
+async function sendLogo(dataUrl) {
+  const res = await fetch('/logo', {
+    method: 'POST',
+    headers: { 'content-type': 'application/json' },
+    body: JSON.stringify({ dataUrl }),
+  });
+  const out = await res.json().catch(() => ({}));
+  if (!res.ok) { alert(out.error || '로고를 저장하지 못했습니다'); return; }
+  setLogo(out.logo);
+}
+$('logoPick').onclick = () => $('pick-logo').click();
+$('pick-logo').onchange = async (e) => {
+  const f = e.target.files?.[0];
+  e.target.value = '';
+  if (!f) return;
+  if (!/\.svg$/i.test(f.name) && f.type !== 'image/svg+xml') return alert('SVG 파일만 됩니다');
+  await sendLogo(await readFile(f));
+};
+$('logoDel').onclick = async () => { if (confirm('로고를 지웁니다.')) await sendLogo(null); };
+// ── 지난 결과물 ──────────────────────────────
+// 결과 화면(목업·그리드·다시 만들기·한번에 받기)을 그대로 재사용한다.
+async function loadOutputs() {
+  const host = $('outsList');
+  host.textContent = '';
+  let items = [];
+  try { ({ items } = await (await fetch('/outputs')).json()); } catch { /* 아래 빈 상태로 */ }
+  $('outsNote').textContent = items.length
+    ? `지금까지 만든 카드뉴스 ${items.length}건입니다. 눌러서 보고, 받고, 지울 수 있습니다.`
+    : '아직 만든 결과물이 없습니다.';
+  if (!items.length) {
+    const p = document.createElement('p');
+    p.className = 'empty';
+    p.textContent = '카드뉴스를 하나 만들면 여기에 쌓입니다.';
+    host.append(p);
+    return;
+  }
+  for (const it of items) {
+    const row = document.createElement('div');
+    row.className = 'out-row';
+    const open = document.createElement('button');
+    open.type = 'button';
+    open.className = 'open';
+    open.title = '열어서 보기';
+    const img = document.createElement('img');
+    img.src = `/out/${it.dir.replace(/^output\//, '')}/${it.slides[0]}`;
+    img.alt = '';
+    img.loading = 'lazy';
+    const box = document.createElement('span');
+    const t = document.createElement('span');
+    t.className = 't';
+    t.textContent = it.title;
+    const n = document.createElement('span');
+    n.className = 'n';
+    n.textContent = `${it.slides.length}장`;
+    box.append(t, n);
+    open.append(img, box);
+    open.onclick = () => openOutput(it);
+    const acts = document.createElement('span');
+    acts.className = 'acts';
+    const zip = document.createElement('a');
+    zip.textContent = '받기';
+    zip.href = `/zip/${it.dir.replace(/^output\//, '')}`;
+    zip.setAttribute('download', '');
+    const del = document.createElement('button');
+    del.type = 'button';
+    del.textContent = '삭제';
+    del.onclick = async () => {
+      if (!confirm(`“${it.title}” ${it.slides.length}장을 지웁니다. 되돌릴 수 없습니다.`)) return;
+      const res = await fetch('/outputs/delete', {
+        method: 'POST',
+        headers: { 'content-type': 'application/json' },
+        body: JSON.stringify({ dir: it.dir }),
+      });
+      const out = await res.json().catch(() => ({}));
+      if (!res.ok) return alert(out.error || '삭제하지 못했습니다');
+      loadOutputs();
+    };
+    acts.append(zip, del);
+    row.append(open, acts);
+    host.append(row);
+  }
+}
+// 지난 결과물을 결과 화면에 띄운다. 캡션은 파일에서 직접 읽는다.
+async function openOutput(it) {
+  result = { dir: it.dir, slides: it.slides, canRegen: it.canRegen };
+  plan = { dir: it.dir };
+  $('outTitle').textContent = it.title;
+  renderSlides(result);
+  clean = '';
+  try {
+    const r = await fetch(`/out/${it.dir.replace(/^output\//, '')}/caption.md`);
+    if (r.ok) clean = await r.text();
+  } catch { /* 캡션이 없을 수도 있다 */ }
+  $('igCap').textContent = clean.replace(/^#.*$/gm, '').trim().split('\n')
+    .filter((l) => l.trim()).slice(0, 2).join(' ');
+  render(clean || '(캡션 없음)');
+  $('reviewBox').hidden = true;
+  show('out');
+}
+$('outsOpen').onclick = () => { loadOutputs(); show('outs'); };
+$('outsBack').onclick = () => show('engine');
+loadBrand();
+$('go').onclick = generate;
+$('approve').onclick = build;
+$('redo').onclick = () => show('form');   // 장수를 바꿔 리서치부터 다시
+$('planCancel').onclick = () => show('pick');
+$('back').onclick = () => show('pick');
+$('again').onclick = () => show('form');
+$('back').onclick = () => show(mode === 'cardnews' ? 'engine' : 'pick');
+$('reset').onclick = () => show('pick');
+$('stop').onclick = () => ctrl?.abort();
+$('copyAll').onclick = (e) => copy(clean, e.currentTarget);
+$('topic').onkeydown = (e) => { if (e.key === 'Enter' && (e.metaKey || e.ctrlKey)) generate(); };
+</script>
+</body>
+</html>