hanseol-dev 5.0.2-dev.16 → 5.0.2-dev.160

package/dist/agents/office/powerpoint-create-prompts.js

@@ -0,0 +1,1454 @@
+export const PPT_CREATE_ENHANCEMENT_PROMPT = `You are an elite presentation design consultant specializing in modern HTML/CSS slide design.
+
+Each slide will be rendered as a standalone HTML page (1920×1080px) using ONLY CSS — no images, no external resources.
+Your job: design a cohesive visual system and detailed content plan that produces beautiful HTML slides.
+
+OUTPUT FORMAT (structured text, max 1000 words):
+
+1. DOCUMENT_TYPE: pitch deck / business report / training / product launch / general
+2. AUDIENCE: Target audience description
+3. MOOD: modern-minimal / bold-energetic / corporate-elegant / warm-friendly / academic-clean
+
+4. COLOR PALETTE (6 hex values — choose colors that match the topic and mood):
+   - primary: Deep main color for headers and key elements (e.g., #1B2A4A for corporate, #6C63FF for tech)
+   - accent: Vibrant contrast color for highlights and CTAs (e.g., #00D4AA, #FF6B35)
+   - background: Page background — near white (#F8F9FA) or near black (#0D1117) or subtle tint
+   - text: Main text color — dark (#1A1A2E) for light bg, light (#E8E8E8) for dark bg
+   - accent_light: Light tint of accent for subtle backgrounds (e.g., #E8F5F0)
+   - gradient_end: Secondary gradient color paired with primary (e.g., #2D5F8A)
+
+5. FONTS: title_font, body_font (system only: Segoe UI, Malgun Gothic, Arial, Calibri, Georgia)
+6. SLIDE PLAN: 12-18 slides, each with:
+   - Slide number and type (title / content / data / comparison / process / highlight / table / closing)
+   - Title in user's language
+   - Specific content direction (what data, text, visuals to include)
+   - CSS layout approach (e.g., "flexbox 3-column card grid with box-shadow", "CSS grid 2×2 with gradient headers", "conic-gradient donut chart + metric cards", "CSS bar chart using flex-end alignment")
+7. DESIGN NOTES: Overall HTML/CSS approach — gradients (linear-gradient, radial-gradient), box-shadows, border-radius, flexbox/grid layouts, CSS shapes, pseudo-elements for decoration
+
+KEY PRINCIPLES FOR HTML SLIDES:
+- Each slide is a full 1920×1080px HTML page — use the ENTIRE space (flex:1 to stretch content)
+- CSS-only visuals: gradients, box-shadow, border-radius, conic-gradient for pie/donut charts
+- MAXIMUM 4 items per slide (2×2 grid preferred)
+- NO images, NO external fonts, NO JavaScript
+
+VISUAL DIVERSITY IS CRITICAL — a presentation with only text cards is BORING:
+- For DATA: specify CSS bar charts (vertical bars using flex-end + height%), donut charts (conic-gradient), progress bars, horizontal bars
+- For COMPARISON: styled tables with colored headers, side-by-side columns
+- For PROCESS/FLOW: horizontal step boxes with arrow connectors (→), numbered phases, timeline layouts
+- For METRICS: big number spotlights (72-96px font), KPI dashboards with trend arrows (▲▼)
+- For MIXED: left column text + right column chart, or top chart + bottom summary cards
+- In a 10-12 slide deck, plan at least: 2 chart/data viz slides, 1-2 table slides, 1-2 flow/process slides, 2-3 card slides, 1-2 metric spotlight slides
+- NEVER plan all slides as "card grid" — that makes every slide look identical
+
+LANGUAGE RULE: ALL slide titles and content MUST be in the SAME language as the user's instruction.
+Korean input → Korean output. English slogans for Korean input = FAILURE.
+
+Output structured text only. No preamble.`;
+export const PPT_STRUCTURED_PLANNING_PROMPT = `You are a presentation structure planner. Output ONLY valid JSON — no markdown, no explanation, no code fences.
+
+Given the user's instruction and CREATIVE GUIDANCE, produce a JSON object with this exact structure:
+
+{
+  "design": {
+    "primary_color": "<CHOOSE: deep color matching the topic — NOT #1B2A4A>",
+    "accent_color": "<CHOOSE: vibrant contrast color — NOT #00D4AA>",
+    "background_color": "<CHOOSE: near-white or near-black or subtle tint>",
+    "text_color": "<CHOOSE: must contrast with background>",
+    "accent_light": "<CHOOSE: light tint of your accent color>",
+    "gradient_end": "<CHOOSE: secondary gradient paired with primary>",
+    "font_title": "Segoe UI",
+    "font_body": "Malgun Gothic",
+    "mood": "modern-minimal",
+    "design_notes": "Describe your visual approach in 1-2 sentences"
+  },
+  "slides": [
+    { "type": "title", "title": "...", "content_direction": "..." },
+    { "type": "content", "title": "...", "content_direction": "..." },
+    { "type": "closing", "title": "...", "content_direction": "..." }
+  ]
+}
+
+═══ FIELD DEFINITIONS ═══
+• design.primary_color: Deep main color (headers, key elements)
+• design.accent_color: Vibrant contrast (highlights, CTAs)
+• design.background_color: Page background (near white, near black, or subtle tint)
+• design.text_color: Main text color (must contrast with background)
+• design.accent_light: Light tint for subtle section backgrounds
+• design.gradient_end: Paired gradient color for primary
+• design.font_title: System font for titles (Segoe UI, Arial, Georgia, Calibri)
+• design.font_body: System font for body (Malgun Gothic, Segoe UI, Arial, Calibri)
+• design.mood: One of modern-minimal, bold-energetic, corporate-elegant, warm-friendly, academic-clean
+• design.design_notes: 1-2 sentence visual approach description
+
+• slides[].type: One of "title", "content", "closing"
+• slides[].title: Slide title in user's language (max 60 chars)
+• slides[].content_direction: The ACTUAL TEXT AND DATA to display on this slide (6-10 sentences).
+  ⚠⚠⚠ content_direction = REAL CONTENT the viewer will read. NOT layout instructions.
+  Include: specific numbers, names, descriptions, bullet point text, table data.
+  ⚠ MUST be DETAILED — 6-10 sentences with specific data. Sparse directions produce empty slides.
+  ⚠ Each item/card/row MUST include: title + 3-4 supporting details with specific data. 2-sentence items = FAILURE.
+  Optionally end with ONE short layout hint (e.g., "Layout: 3-column cards" or "Layout: comparison table").
+  ✓ GOOD: "총매출 1,250억원(전년비 15%↑), 영업이익 180억원(14.4%), 순이익 95억원(7.6%). 사업부별: 클라우드 45%(562억), AI솔루션 30%(375억), 컨설팅 25%(312억). 클라우드가 전년비 32% 성장하며 최대 성장 동력. 영업이익률 업계 평균(10%) 대비 4.4%p 상회. Layout: bar chart"
+  ✓ GOOD: "3 core services: (1) 클라우드 인프라 — 하이브리드 클라우드 구축 및 운영, AWS/Azure 호환, 99.9% SLA 보장, 현재 50+ 기업 고객 (2) AI 솔루션 — 자연어처리/영상분석 AI 모델, 진단 정확도 98.2%, 처리 속도 실시간, 월 100만건 처리 (3) 컨설팅 — IT 전략 및 디지털 전환 자문, 평균 프로젝트 ROI 250%, 12개월 이내 효과 실현. Layout: 3-column cards"
+  ✗ BAD: "클라우드, AI, 컨설팅 3개 서비스" ← Too sparse! No details!
+  ✗ BAD: "왼쪽에 개요 텍스트, 오른쪽에 카드" ← Layout instruction, NOT content!
+  ✗ BAD: "#accent_light 배경, #primary 글씨" ← CSS instruction, NOT content!
+
+═══ SLIDE TYPE GUIDELINES ═══
+Every presentation MUST have: 1 title slide (first) + 1 closing slide (last)
+Content slides between them — aim for 12-15 total slides (up to 18 if the user requests many topics).
+⚠ Current year: ${new Date().getFullYear()}. For dates/timelines/roadmaps with no explicit year in the user's request, use ${new Date().getFullYear()} or later. If the user specifies a year (e.g., "2024년 3분기"), USE THAT YEAR — do not override it.
+
+For each content slide, the content_direction should specify:
+- What information to show (specific text, numbers, names)
+- How to lay it out (cards, columns, table, big number, timeline, etc.)
+- This is the ONLY instruction the HTML-generating LLM will see, so be DETAILED
+
+═══ TEMPLATES ═══
+PITCH DECK (startup/사업계획서/피치덱): 15 slides
+  title → problem → solution → market size → product(1) → product(2) → business model → competition → traction → team → financials → roadmap → investment ask → fund usage → closing
+
+BUSINESS REPORT (보고서/분석/실적): 10 slides
+  title → executive summary → key metrics → analysis → comparison → spotlight → breakdown → action plan → recommendations → closing
+
+TRAINING (교육/세미나/강의): 10 slides
+  title → objectives → core concepts → key data → process → details → case study → summary → key takeaway → closing
+
+PRODUCT LAUNCH (제품/출시/소개): 11 slides
+  title → market need → overview → key feature → features → metrics → use cases → pricing → timeline → CTA → closing
+
+GENERAL (발표/프레젠테이션): 10 slides
+  title → overview → key points → data → detail → spotlight → comparison → process → summary → closing
+
+═══ THE #1 RULE — ONE VISUAL APPROACH PER SLIDE ═══
+⚠⚠⚠ Each slide's content_direction MUST describe EXACTLY ONE visual layout.
+    The HTML renderer creates ONE visual element per slide — no more.
+    If a topic needs 2 visual elements, SPLIT IT INTO 2 SLIDES.
+
+GOOD content_direction (ONE visual each):
+  ✓ "총매출 1,250억원(전년비 15%↑), 영업이익 180억원(14.4%), 순이익 120억원. Layout: bar chart"
+  ✓ "Comparison table: 4 rows (MediAI, CompA, CompB, CompC) × 3 columns (정확도, 속도, 데이터량). Highlight MediAI row. Layout: comparison table"
+  ✓ "$45B 시장 규모, 28% 연평균 성장률, 5% 1년 내 점유율 목표. Layout: big numbers"
+  ✓ "데이터 수집 → 전처리 → AI 분석 → 결과 리포트 → 의사 확인. 각 단계별 소요시간 표시. Layout: process flow"
+  ✓ "매출 구성: 구독형 45%, 라이선스 30%, 컨설팅 25%. Layout: donut chart"
+  ✓ "3 core services: (1) 클라우드 인프라, (2) AI 솔루션, (3) 컨설팅. Layout: 2×2 grid"
+  ✓ "목표 달성률: 매출 92%, 고객 확보 87%, 시장점유율 73%, 만족도 95%. Layout: progress bars"
+
+BAD content_direction (MULTIPLE visuals = OVERFLOW):
+  ✗ "테이블로 수익 모델 + 수익 그래프 + 파트너십 + 라이선싱" ← 4 sections!
+  ✗ "원형 차트 + 투자 조건 테이블 + 단계적 계획 + 바 차트" ← 4 sections!
+  ✗ "레이더 차트 + 데이터 바 + 차별화 카드 4개" ← 3 sections!
+  ✗ "성장 차트 + 시장 분할 파이 + 기회 텍스트 + 과제 텍스트" ← 4 sections!
+
+═══ SPLITTING DENSE TOPICS INTO MULTIPLE SLIDES ═══
+⚠ If a user topic has 4+ sub-items, you MUST split it into 2 slides:
+  • "비즈니스모델" → "수익 모델" (pricing table) + "수익 성장 전망" (bar chart)
+  • "시장분석" → "시장 규모" (3 big metrics) + "고객 세분화" (pie chart or cards)
+  • "투자조건" → "투자 조건" (table) + "자금 사용 계획" (pie or bar chart)
+  • "경쟁우위" → "경쟁사 비교" (comparison table) + "핵심 차별화" (3 card grid)
+  • "경쟁분석" → "경쟁사 비교" (comparison table ONLY) + "SWOT 분석" (2×2 grid ONLY). NEVER put table AND SWOT on same slide.
+  • "AI 솔루션" → "핵심 기능" (3 card grid) + "진단 프로세스" (process flow)
+  • "제품/플랫폼" → "핵심 기능" (3 card grid with feature descriptions) — NOT a hub-and-spoke diagram
+  • "마케팅/GTM 전략" → "마케팅 채널 전략" (3 cards) + "성과 지표" (metrics or table). NEVER put 4 strategy columns on one slide.
+  • "로드맵" → "단기 로드맵 2026" (3 milestone cards) + "장기 비전 2027-2028" (3 milestone cards)
+  • "팀 소개" (4+ members) → "창업진 소개" (2-3 people) + "핵심 팀원" (2-3 people)
+  This keeps each slide clean with generous whitespace.
+
+═══ CONTENT DENSITY — FILL THE SLIDE ═══
+⚠⚠⚠ Each slide is 1920×1080px. Content MUST fill 85-95% of vertical space. EMPTY slides = FAILURE.
+⚠ content_direction MUST contain 6-10 sentences of ACTUAL DATA and details.
+⚠ Each item: title + 3-5 detailed bullets with specific numbers, names, and descriptions.
+⚠ Tables: 5-8 data rows × 3-4 columns for rich comparison. Fill EVERY cell with real data.
+⚠ Timeline/Roadmap: 4-5 milestones with dates, descriptions, and key metrics.
+  If a roadmap has 6+ items, SPLIT into 2 slides with 3-4 items each.
+⚠ Data/metrics: 3-4 big numbers with trend indicators AND supporting context text below each.
+⚠ Cards: 3-4 cards, each with a title + 3-4 bullet points + a summary sentence.
+⚠ Donut/Pie charts: include 4-5 segments with labels + a summary box below the chart.
+⚠ The more SPECIFIC DATA you include in content_direction, the better the slide will look.
+  Empty-looking slides are the #1 quality complaint — always err on the side of MORE content.
+
+═══ OVERVIEW / AGENDA SLIDES ═══
+⚠ Overview/agenda slides listing presentation sections: MAXIMUM 5 items.
+  Use a numbered list style (1-5) or compact 2-column grid. NEVER use 6-7+ horizontal cards.
+  Each item: short title (2-3 words) + 1-line description only.
+  If the presentation has 10+ sections, group related topics: "시장 및 경쟁" instead of separate "시장 분석" + "경쟁 분석".
+  Overview slides should be concise — just a navigation map, not a content dump.
+
+═══ TITLE & CLOSING SLIDE FORMAT ═══
+⚠ Title slide (FIRST):
+  • title: Company/topic name ONLY — max 3-4 words, rendered at 96px by system
+    ✓ GOOD: "MediAI"  ✓ GOOD: "삼성전자 AI센터"
+    ✗ BAD: "MediAI - 인공지능으로 의료 혁신을 선도합니다" (too long, wraps at 96px)
+  • content_direction: The actual subtitle/tagline TEXT. 1-2 lines, under 120 chars.
+    ✓ GOOD: "AI 기반 의료 진단 혁신 플랫폼 — 투자유치 발표자료"
+    ✗ BAD: "회사 로고, 슬로건, 연락처 정보" (instruction, not subtitle)
+  • Do NOT include visual/layout instructions — title uses a fixed premium template
+⚠ Closing slide (LAST):
+  • title: "감사합니다" (Korean) or "Thank You" (English)
+  • content_direction: Same company/topic name as title slide
+  • Do NOT include visual/layout instructions — closing uses a fixed premium template
+
+═══ LAYOUT VARIETY + VISUAL TYPE — MANDATORY ═══
+⚠⚠⚠ You MUST vary the visual approach. No more than 2 slides with the same layout hint.
+  Available layouts (use at least 5 different types across the presentation):
+  - "2×2 grid": 4 cards in 2 rows × 2 columns (MAX 2 slides)
+  - "bar chart": CSS vertical/horizontal bars showing data trends or comparisons
+  - "donut chart": conic-gradient pie/donut with metric labels
+  - "comparison table": styled table with 3-4 rows, colored headers
+  - "process flow": horizontal step boxes connected by arrows (→), numbered phases
+  - "big numbers": 2-3 large metric spotlights (72-96px) with trend indicators (▲▼)
+  - "2-column split": left panel + right content (chart + text, or metric + details)
+  - "timeline": 3-4 milestone steps horizontal with dates
+  - "progress bars": horizontal bars showing completion/comparison percentages
+  - "hero stat": one large central metric with supporting context
+  ⚠ Each content_direction MUST end with a "Layout:" hint specifying the visual type.
+  ⚠ If your plan has 3+ slides all using "cards/grid" layout, REWRITE to use charts, tables, flows instead.
+  ⚠ A 10-slide deck MUST have: at least 2 chart/data-viz slides, at least 1 table slide, at least 1 process/flow slide.
+  ⚠ NEVER plan a presentation where every slide is cards — that is LAZY and BORING.
+
+═══ COLOR PALETTE RULES ═══
+⚠ NEVER use placeholder/example colors. EVERY presentation must have a UNIQUE palette:
+  • Medical/Health: blues + greens (#0B5394, #27AE60)
+  • Tech/AI: purples + cyans (#6C63FF, #00BCD4)
+  • Finance: navy + gold (#1A237E, #F4A300)
+  • Education: teal + orange (#00796B, #FF7043)
+  • Marketing: coral + purple (#FF6B6B, #7C3AED)
+⚠ Choose colors that MATCH the specific topic. Generic blue = LAZY.
+⚠ Ensure accent_color has HIGH contrast with primary_color.
+
+═══ HARD RULES ═══
+⚠ First slide MUST be type "title"
+⚠ Last slide MUST be type "closing" with "감사합니다"/"Thank You" as title
+⚠ ALL titles and content_direction MUST be in the SAME language as the user's instruction
+⚠ content_direction: MUST contain ACTUAL TEXT/DATA the viewer will read. Layout hint is optional and goes at the END.
+⚠ content_direction that is ONLY layout/visual instructions (no real data) = FAILURE. The HTML generator will display it literally.
+⚠ HARD MAXIMUM: 13 slides total. Slides beyond 13 are DISCARDED by the system. Aim for 10-12.
+⚠ FEWER, HIGHER-QUALITY slides > many mediocre slides. 12 excellent slides beats 15 mixed ones.
+⚠ Each slide's content_direction must be unique and substantive — no generic placeholders
+⚠ NEVER use "스크린샷", "screenshot", "이미지", "사진", "placeholder", "[내용]" in content_direction
+  — the system cannot insert images. Describe REAL text/data content to display.
+⚠ Do NOT create a separate "연락처"/"Contact" slide — the closing slide already handles this.
+  — Use that slot for valuable content instead (e.g., competitive advantage, key metrics, next steps).
+
+Output ONLY the JSON object. No preamble, no markdown fences, no explanation.`;
+export function extractLayoutHint(contentDirection) {
+    const match = contentDirection.match(/Layout:\s*(.+?)$/im);
+    if (!match)
+        return 'cards';
+    const hint = match[1].trim().toLowerCase();
+    if (/card|grid/.test(hint))
+        return 'cards';
+    if (/bar\s*chart/.test(hint))
+        return 'bar_chart';
+    if (/donut|pie/.test(hint))
+        return 'donut_chart';
+    if (/comparison\s*table|table/.test(hint))
+        return 'table';
+    if (/process|flow/.test(hint))
+        return 'process_flow';
+    if (/big\s*num|metric/.test(hint))
+        return 'big_numbers';
+    if (/split|2-col|two.col/.test(hint))
+        return 'two_col_split';
+    if (/timeline|milestone|roadmap/.test(hint))
+        return 'timeline';
+    if (/progress\s*bar/.test(hint))
+        return 'progress_bars';
+    if (/hero|spotlight/.test(hint))
+        return 'hero_stat';
+    return 'cards';
+}
+export function checkLayoutCompliance(html, layoutType) {
+    switch (layoutType) {
+        case 'donut_chart':
+            if (!html.includes('conic-gradient')) {
+                return 'WRONG LAYOUT: Expected donut/pie chart with conic-gradient. You MUST use conic-gradient on a border-radius:50% div. Copy the REQUIRED HTML structure from the prompt.';
+            }
+            break;
+        case 'bar_chart': {
+            const hasFlexEnd = /flex-end/.test(html);
+            const barHeights = html.match(/style="[^"]*height:\s*\d+%/g) || [];
+            if (!hasFlexEnd || barHeights.length < 3) {
+                return `WRONG LAYOUT: Expected CSS bar chart with flex-end + at least 3 bars with height:XX%. Found flex-end:${hasFlexEnd}, bars:${barHeights.length}. Copy the REQUIRED HTML structure with .chart-area, .bar-group, .bar elements.`;
+            }
+            break;
+        }
+        case 'table':
+            if (!html.includes('<table') || !html.includes('<th')) {
+                return 'WRONG LAYOUT: Expected HTML <table> with <th> header cells. Copy the REQUIRED HTML structure.';
+            }
+            break;
+        case 'process_flow': {
+            const arrowCount = (html.match(/→/g) || []).length;
+            const hasSteps = /class="[^"]*step/i.test(html);
+            if (arrowCount < 2 || !hasSteps) {
+                return `WRONG LAYOUT: Expected process flow with step boxes and → arrows. Found arrows:${arrowCount}, steps:${hasSteps}. You MUST have .step divs connected by .arrow divs containing "→".`;
+            }
+            break;
+        }
+        case 'progress_bars': {
+            const hasFill = /bar-fill/i.test(html);
+            const hasTrack = /bar-track/i.test(html);
+            const widthBars = html.match(/style="[^"]*width:\s*\d+%/g) || [];
+            if (!hasFill || !hasTrack || widthBars.length < 3) {
+                return `WRONG LAYOUT: Expected progress bars with .bar-track + .bar-fill + width:XX%. Found fill:${hasFill}, track:${hasTrack}, bars:${widthBars.length}. Copy the REQUIRED HTML structure.`;
+            }
+            break;
+        }
+        case 'timeline': {
+            const hasMilestone = /class="[^"]*milestone/i.test(html);
+            const milestoneCount = (html.match(/class="milestone"/g) || []).length;
+            if (!hasMilestone || milestoneCount < 2) {
+                return `WRONG LAYOUT: Expected timeline with .milestone cards. Found ${milestoneCount} milestones. You MUST have 3-4 .milestone divs side by side.`;
+            }
+            break;
+        }
+        case 'big_numbers': {
+            const bigFonts = html.match(/font-size:\s*(?:7[2-9]|[89]\d|1[0-2]\d)px/g) || [];
+            if (bigFonts.length < 2) {
+                return `WRONG LAYOUT: Expected big number metrics with font-size 72-96px. Found ${bigFonts.length} large fonts. Each .metric-card MUST have a .metric-value with font-size:80px.`;
+            }
+            break;
+        }
+        case 'hero_stat': {
+            const heroFont = html.match(/font-size:\s*(?:9[6-9]|1[0-2]\d)px/g) || [];
+            if (heroFont.length < 1) {
+                return `WRONG LAYOUT: Expected hero stat with font-size 96-128px. You MUST have ONE .hero-number with font-size:128px.`;
+            }
+            break;
+        }
+    }
+    return null;
+}
+function getLayoutSpecificCss(layoutType, design) {
+    const layouts = {
+        cards: `═══ REQUIRED LAYOUT: CARD GRID ═══
+⚠⚠⚠ You MUST create a CARD GRID layout. Using any other layout = FAILURE.
+
+CSS:
+.content { flex:1; display:grid; grid-template-columns:1fr 1fr; grid-template-rows:1fr 1fr; gap:24px; }
+.card { display:flex; flex-direction:column; justify-content:flex-start; gap:12px; padding:32px 28px; border-radius:16px; background:#fff; box-shadow:0 4px 20px rgba(0,0,0,0.06); overflow:hidden; }
+
+⚠ grid-template-rows:1fr 1fr is CRITICAL — it forces cards to stretch and fill vertical space. Without it, cards collapse to content height leaving huge empty bottom.
+• MAX 4 cards (2×2). Each: icon/badge + title (32-40px) + 4-5 bullets (26px) with specific data + stat/metric at bottom.
+• If only 3 items: grid-template-columns:1fr 1fr 1fr; grid-template-rows:1fr; (all 3 in one row)
+• MINIMUM CARD CONTENT: title + 4-5 detailed bullet points with numbers/data + bottom metric. A card with only 2 bullets = FAILURE.
+• Card bottom stat: use margin-top:auto to push it to card bottom, creating visual anchor.
+• ⚠ NEVER have empty grid cells. If you have 3 items, use 3 columns. If 4, use 2×2.`,
+        bar_chart: `═══ REQUIRED LAYOUT: BAR CHART ═══
+⚠⚠⚠ You MUST create a CSS BAR CHART with vertical bars. Cards/numbers/tables = FAILURE.
+
+CSS:
+.content { flex:1; display:flex; flex-direction:column; }
+.chart-area { flex:1; display:flex; align-items:flex-end; gap:32px; padding:40px 60px 20px; }
+.bar-group { flex:1; display:flex; flex-direction:column; align-items:center; gap:8px; }
+.bar-value { font-size:28px; font-weight:700; color:${design.primary_color}; }
+.bar { width:80%; border-radius:8px 8px 0 0; background:linear-gradient(180deg, ${design.accent_color}, ${design.primary_color}); min-height:20px; }
+.bar-label { font-size:26px; font-weight:600; color:${design.text_color}; text-align:center; min-width:120px; }
+.insight-row { padding:20px 60px; background:${design.accent_light}; border-radius:12px; margin-top:20px; font-size:26px; color:${design.text_color}; }
+
+CRITICAL PATTERN — your .content div MUST contain this structure:
+<div class="content">
+  <div class="chart-area">
+    <div class="bar-group">
+      <div class="bar-value">VALUE</div>
+      <div class="bar" style="height:75%"></div>
+      <div class="bar-label">LABEL</div>
+    </div>
+    <!-- 3-6 bar-groups like above -->
+  </div>
+  <div class="insight-row">KEY INSIGHT TEXT</div>
+</div>
+
+⚠ Each bar MUST have style="height:XX%" (tallest=85%, others proportional). align-items:flex-end on .chart-area makes bars grow upward.
+⚠ The insight-row at bottom provides context and fills space. Be creative with the insight text.
+⚠⚠⚠ .chart-area and .insight-row MUST be DIRECT children of .content. Do NOT wrap them in a container div.`,
+        donut_chart: `═══ REQUIRED LAYOUT: DONUT/PIE CHART ═══
+⚠⚠⚠ You MUST create a CSS DONUT CHART using conic-gradient. Cards/tables = FAILURE.
+
+CSS:
+.content { flex:1; display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items:center; }
+.donut-wrap { display:flex; justify-content:center; align-items:center; }
+.donut { width:400px; height:400px; border-radius:50%; display:flex; align-items:center; justify-content:center; }
+.donut-hole { width:200px; height:200px; border-radius:50%; background:${design.background_color}; display:flex; align-items:center; justify-content:center; }
+.donut-center { font-size:48px; font-weight:800; color:${design.primary_color}; }
+.legend { display:flex; flex-direction:column; gap:28px; }
+.legend-item { display:flex; align-items:center; gap:16px; font-size:28px; }
+.legend-dot { width:20px; height:20px; border-radius:50%; flex-shrink:0; }
+
+CRITICAL PATTERN — the donut MUST use conic-gradient with ACTUAL data percentages:
+<div class="donut" style="background:conic-gradient(${design.primary_color} 0% 45%, ${design.accent_color} 45% 75%, ${design.gradient_end} 75% 100%);">
+
+⚠ conic-gradient segments MUST add to 100%. Adjust percentages to match the ACTUAL DATA.
+⚠ Left: donut with center hole showing total/summary. Right: legend with colored dots + labels + values.`,
+        table: `═══ REQUIRED LAYOUT: DATA TABLE ═══
+⚠⚠⚠ You MUST create a styled HTML TABLE with <table>/<th>/<td>. Cards = FAILURE.
+
+CSS:
+.content { flex:1; display:flex; flex-direction:column; }
+table { width:100%; border-collapse:separate; border-spacing:0; border-radius:12px; overflow:hidden; flex:1; }
+th { padding:20px 24px; background:${design.primary_color}; color:#fff; font-size:26px; font-weight:700; text-align:left; }
+td { padding:20px 24px; font-size:26px; border-bottom:1px solid ${design.accent_light}; color:${design.text_color}; }
+tr:nth-child(even) td { background:${design.accent_light}40; }
+tr.highlight td { background:${design.accent_color}15; font-weight:600; }
+.summary-bar { margin-top:auto; padding:20px 24px; background:${design.accent_light}; border-radius:12px; font-size:26px; color:${design.text_color}; }
+
+⚠ table uses flex:1 to stretch vertically. Use larger padding on td (28-32px) if fewer rows to fill space.
+⚠ Header: dark ${design.primary_color} background with WHITE text. 6-8 rows × 3-5 columns. EVERY cell real data.
+⚠ Add .summary-bar below table with margin-top:auto to anchor it at the bottom and fill remaining space.
+⚠⚠⚠ <table> and .summary-bar MUST be DIRECT children of .content. Do NOT wrap them in a container div.`,
+        process_flow: `═══ REQUIRED LAYOUT: PROCESS FLOW ═══
+⚠⚠⚠ You MUST create a HORIZONTAL PROCESS FLOW with step boxes + arrows (→). Cards without arrows = FAILURE.
+
+CSS:
+.content { flex:1; display:flex; align-items:stretch; gap:0; }
+.step { flex:1; display:flex; flex-direction:column; align-items:center; padding:32px 20px; background:${design.accent_light}; border-radius:16px; text-align:center; gap:16px; }
+.step-number { width:52px; height:52px; border-radius:50%; background:linear-gradient(135deg, ${design.primary_color}, ${design.gradient_end}); color:#fff; display:flex; align-items:center; justify-content:center; font-size:24px; font-weight:700; flex-shrink:0; }
+.step-title { font-size:28px; font-weight:700; color:${design.primary_color}; }
+.step-desc { font-size:24px; color:${design.text_color}; line-height:1.5; flex:1; }
+.step-time { font-size:24px; color:${design.accent_color}; font-weight:600; margin-top:auto; padding-top:12px; border-top:2px solid ${design.accent_color}40; }
+.arrow { width:60px; display:flex; align-items:center; justify-content:center; font-size:44px; color:${design.accent_color}; flex-shrink:0; }
+
+CRITICAL PATTERN — your .content MUST alternate .step and .arrow divs:
+<div class="content">
+  <div class="step">
+    <div class="step-number">1</div>
+    <div class="step-title">STEP TITLE</div>
+    <div class="step-desc">Description text</div>
+    <div class="step-time">Duration/detail</div>
+  </div>
+  <div class="arrow">→</div>
+  <div class="step">...</div>
+  <div class="arrow">→</div>
+  <div class="step">...</div>
+</div>
+
+⚠ 3-5 steps with → arrows between them. align-items:stretch makes all steps equal height.
+⚠ .step-time with margin-top:auto anchors it at the bottom of each step.
+⚠⚠⚠ .step and .arrow divs MUST be DIRECT children of .content. Do NOT wrap them in a container div.`,
+        big_numbers: `═══ REQUIRED LAYOUT: BIG NUMBER METRICS ═══
+⚠⚠⚠ You MUST create BIG NUMBER SPOTLIGHT cards with 72-96px numbers. Tables/small text = FAILURE.
+
+CSS:
+.content { flex:1; display:flex; gap:40px; align-items:stretch; }
+.metric-card { flex:1; display:flex; flex-direction:column; justify-content:center; align-items:center; padding:48px 32px; border-radius:20px; background:#fff; box-shadow:0 4px 24px rgba(0,0,0,0.06); text-align:center; gap:20px; }
+.metric-value { font-size:80px; font-weight:800; color:${design.primary_color}; line-height:1; }
+.metric-unit { font-size:32px; font-weight:600; color:${design.accent_color}; }
+.metric-label { font-size:28px; font-weight:600; color:${design.text_color}; }
+.metric-desc { font-size:24px; color:${design.text_color}aa; line-height:1.5; }
+.metric-trend { font-size:26px; font-weight:600; margin-top:auto; }
+
+⚠ 2-3 metric cards side by side. Each: huge number (font-size:80px), unit, label, description, trend.
+⚠ align-items:stretch makes cards fill full height. justify-content:center within each card centers content.
+⚠ Trend colors: green (#10B981) for positive ▲, red (#EF4444) for negative ▼.
+⚠⚠⚠ .metric-card divs MUST be DIRECT children of .content. Do NOT wrap them in a container div.`,
+        two_col_split: `═══ REQUIRED LAYOUT: 2-COLUMN SPLIT ═══
+⚠⚠⚠ You MUST create a 2-COLUMN layout. Single column = FAILURE.
+
+CSS:
+.content { flex:1; display:grid; grid-template-columns:1fr 1fr; gap:32px; }
+.left-col { display:flex; flex-direction:column; gap:20px; justify-content:center; padding:20px; }
+.right-col { display:flex; flex-direction:column; gap:20px; justify-content:center; padding:20px; }
+
+⚠ Left column: primary content (big metric, chart, or main visual). Right: supporting detail cards or text.
+⚠ Both columns stretch full height. Keep text LARGE (28-32px) — don't try to squeeze too much.
+⚠ MAX 3-4 items per column. If content overflows, reduce items instead of shrinking text.`,
+        timeline: `═══ REQUIRED LAYOUT: TIMELINE ═══
+⚠⚠⚠ You MUST create a HORIZONTAL TIMELINE with milestone cards. Generic cards = FAILURE.
+
+CSS:
+.content { flex:1; display:flex; align-items:stretch; gap:24px; }
+.milestone { flex:1; display:flex; flex-direction:column; padding:32px; border-radius:16px; background:#fff; box-shadow:0 4px 20px rgba(0,0,0,0.06); gap:16px; }
+.milestone-date { font-size:24px; font-weight:700; color:${design.accent_color}; }
+.milestone-icon { width:52px; height:52px; border-radius:50%; background:linear-gradient(135deg, ${design.primary_color}, ${design.gradient_end}); display:flex; align-items:center; justify-content:center; color:#fff; font-size:24px; }
+.milestone-title { font-size:30px; font-weight:700; color:${design.primary_color}; }
+.milestone-desc { font-size:26px; color:${design.text_color}; line-height:1.5; flex:1; }
+.milestone-kpi { font-size:24px; font-weight:600; color:${design.accent_color}; margin-top:auto; padding-top:16px; border-top:2px solid ${design.accent_light}; }
+
+⚠ 3-4 .milestone cards side by side. Each: date → icon → title → description → KPI at bottom.
+⚠ align-items:stretch + flex:1 on .milestone-desc ensures all cards are equal height.
+⚠ .milestone-kpi with margin-top:auto anchors it at the bottom of each card.
+⚠⚠⚠ .milestone divs MUST be DIRECT children of .content. Do NOT wrap them in a container div.`,
+        progress_bars: `═══ REQUIRED LAYOUT: PROGRESS BARS ═══
+⚠⚠⚠ You MUST create FULL-WIDTH HORIZONTAL PROGRESS BARS. Small bars inside cards = FAILURE.
+
+CSS:
+.content { flex:1; display:flex; flex-direction:column; justify-content:space-evenly; gap:0; padding:20px 0; }
+.bar-item { display:flex; flex-direction:column; gap:10px; }
+.bar-header { display:flex; justify-content:space-between; align-items:baseline; }
+.bar-label { font-size:28px; font-weight:600; color:${design.text_color}; }
+.bar-value { font-size:28px; font-weight:700; color:${design.primary_color}; }
+.bar-track { width:100%; height:44px; background:${design.accent_light}; border-radius:22px; overflow:hidden; }
+.bar-fill { height:100%; border-radius:22px; background:linear-gradient(90deg, ${design.primary_color}, ${design.accent_color}); }
+
+CRITICAL PATTERN — your .content MUST be a vertical stack of .bar-item divs:
+<div class="content">
+  <div class="bar-item">
+    <div class="bar-header">
+      <span class="bar-label">Category Name</span>
+      <span class="bar-value">85%</span>
+    </div>
+    <div class="bar-track"><div class="bar-fill" style="width:85%"></div></div>
+  </div>
+  <!-- repeat 4-6 bar-items -->
+</div>
+
+⚠ justify-content:space-evenly distributes bars across the full height — NO empty bottom.
+⚠ Each bar: header row (label + percentage) + track div containing fill div with style="width:XX%".
+⚠ 4-6 bars. Bar height:44px. Use gradient fills. The structure above is non-negotiable.
+⚠⚠⚠ .bar-item divs MUST be DIRECT children of .content. Do NOT wrap them in a container div.`,
+        hero_stat: `═══ REQUIRED LAYOUT: HERO STAT ═══
+⚠⚠⚠ You MUST create a SINGLE LARGE CENTRAL METRIC. Cards/tables = FAILURE.
+
+CSS:
+.content { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:24px; }
+.hero-number { font-size:128px; font-weight:900; color:${design.primary_color}; line-height:1; }
+.hero-unit { font-size:48px; font-weight:600; color:${design.accent_color}; }
+.hero-label { font-size:36px; font-weight:600; color:${design.text_color}; }
+.hero-context { font-size:28px; color:${design.text_color}aa; text-align:center; max-width:800px; line-height:1.6; }
+.supporting-row { display:flex; gap:60px; margin-top:48px; }
+.supporting-item { text-align:center; }
+.supporting-value { font-size:40px; font-weight:700; color:${design.primary_color}; }
+.supporting-label { font-size:24px; color:${design.text_color}aa; margin-top:8px; }
+
+⚠ ONE giant number (font-size:128px) center stage. Description below. Optional 2-3 supporting metrics in a row.
+⚠ This is the ONLY layout where justify-content:center on .content is correct.`,
+    };
+    return layouts[layoutType] || layouts.cards;
+}
+export function postProcessSlideHtml(html) {
+    const fixStyle = `<style id="viewport-fill">
+body{display:flex!important;flex-direction:column!important;height:1080px!important;min-height:1080px!important;overflow:hidden!important;font-size:max(26px,1.35vw)}
+body>*:first-child{flex:0 0 auto!important}
+body>*:not(:first-child):not(style):not(script){flex:1 1 0!important;min-height:0!important;align-content:stretch!important;align-items:stretch!important}
+body>*:not(:first-child):not(style):not(script)>*{align-self:stretch!important;min-height:0}
+.slide-title{flex:0 0 auto!important}
+.content{flex:1 1 0!important;min-height:0!important;align-content:stretch!important;align-items:stretch!important}
+.content>*{align-self:stretch!important;min-height:0}
+.content>:only-child{display:flex!important;flex-direction:column!important;justify-content:space-evenly!important;flex:1 1 0!important;min-height:0!important}
+</style>`;
+    if (html.includes('</head>')) {
+        return html.replace('</head>', fixStyle + '</head>');
+    }
+    if (html.includes('</style>')) {
+        return html.replace(/<\/style>(?![\s\S]*<\/style>)/, fixStyle + '</style>');
+    }
+    return html;
+}
+export function buildReviewPrompt(html, expectedLayout, slideTitle) {
+    return `You are a presentation slide quality reviewer. Evaluate this HTML slide and output ONLY a JSON object.
+
+EXPECTED LAYOUT: "${expectedLayout}"
+SLIDE TITLE: "${slideTitle}"
+
+HTML (first 3000 chars):
+${html.slice(0, 3000)}
+
+Evaluate:
+1. LAYOUT (1-10): Does it use "${expectedLayout}" layout? Wrong layout type = score 1.
+2. READABILITY (1-10): Font sizes ≥26px? Good contrast? Text readable?
+3. FILL (1-10): Content fills 80-90% of 1920×1080? No huge empty areas?
+
+Output JSON ONLY (no markdown fences):
+{"layout":N,"readability":N,"fill":N,"pass":true/false,"feedback":"specific fix needed or empty string"}
+
+PASS = all scores ≥ 7. FAIL = any score < 7.`;
+}
+export function buildSlideHtmlPrompt(slideTitle, contentDirection, design, slideIndex, totalSlides, language, layoutType = 'cards') {
+    const langRule = language === 'ko'
+        ? 'ALL visible text MUST be in Korean. Write naturally in Korean.'
+        : 'ALL visible text MUST be in English.';
+    const styleVariants = [
+        'LIGHT',
+        'ACCENT_HEADER',
+        'GRADIENT_BG',
+    ];
+    const styleVariant = styleVariants[slideIndex % styleVariants.length];
+    const styleGuide = {
+        'LIGHT': `Background: ${design.background_color}. Title: ${design.primary_color}, 48-56px bold. Cards/elements use white background with box-shadow.`,
+        'ACCENT_HEADER': `Add a bold accent bar at top (height:6px, background: linear-gradient(90deg, ${design.accent_color}, ${design.primary_color})). Title directly below. Background: ${design.background_color}.`,
+        'GRADIENT_BG': `Subtle gradient background: linear-gradient(150deg, ${design.background_color} 0%, ${design.accent_light} 50%, ${design.background_color} 100%). Elements use stronger shadows (0 8px 32px rgba(0,0,0,0.08)).`,
+    };
+    return `You are a world-class web designer creating a presentation slide as a complete HTML page.
+Output ONLY the complete HTML document — nothing else. No explanation, no markdown fences.
+
+═══ SLIDE INFO ═══
+Title: "${slideTitle}"
+Slide ${slideIndex + 1} of ${totalSlides}
+
+═══ CONTENT DIRECTION (what to show on this slide) ═══
+${contentDirection}
+
+⚠⚠⚠ CRITICAL: The content_direction above is a GUIDE for what content to create.
+Generate REAL, specific, professional text based on it. NEVER display the content_direction text literally on the slide.
+If it says "3 big metrics: X, Y, Z" → create 3 beautifully formatted metric cards with X, Y, Z values.
+If it says "Layout: comparison table" → create a table with the DATA mentioned, not the word "comparison table".
+
+═══ DESIGN SYSTEM ═══
+Primary: ${design.primary_color} | Accent: ${design.accent_color} | Background: ${design.background_color}
+Text: ${design.text_color} | Accent Light: ${design.accent_light} | Gradient End: ${design.gradient_end}
+Title Font: ${design.font_title} | Body Font: ${design.font_body}
+Mood: ${design.mood} | Notes: ${design.design_notes}
+
+═══ THIS SLIDE'S VISUAL STYLE ═══
+${styleGuide[styleVariant]}
+This ensures visual variety across slides. Follow this style direction.
+
+═══ MANDATORY CSS BOILERPLATE — COPY EXACTLY ═══
+Your <style> tag MUST start with these EXACT rules (copy verbatim):
+
+* { margin: 0; padding: 0; box-sizing: border-box; }
+html, body {
+  width: 1920px; height: 1080px; overflow: hidden;
+  font-family: "${design.font_body}", "${design.font_title}", "Segoe UI", "Malgun Gothic", Arial, sans-serif;
+  word-break: keep-all;
+  overflow-wrap: break-word;
+}
+body {
+  display: flex; flex-direction: column;
+  padding: 60px 80px;
+  height: 1080px;
+}
+
+⚠ word-break:keep-all is CRITICAL for Korean text — without it, words break at random characters.
+⚠ body MUST be display:flex + flex-direction:column + height:1080px for vertical fill.
+⚠ The main content container (the one with cards/table/chart) MUST use class="content" — required for post-processing.
+
+═══ TECHNICAL REQUIREMENTS ═══
+1. Complete HTML: <!DOCTYPE html> through </html>
+2. ALL styling in <style> tag — no external resources, images, fonts, or scripts
+3. System fonts ONLY. NO <img> tags.
+4. Use CSS for visuals: gradients, shapes, shadows, borders, pseudo-elements
+5. FIXED pixel layout — NO max-width, NO media queries, NO percentage widths below 80%
+6. body IS the container — no wrapper divs. Content goes directly in body.
+
+═══ VERTICAL FILL — THE #1 QUALITY RULE ═══
+⚠⚠⚠ Content MUST fill the ENTIRE 1920×1080 slide. Empty space = FAILURE.
+⚠⚠⚠ NEVER have more than 150px of empty whitespace anywhere on the slide.
+
+MANDATORY STRUCTURE (body has EXACTLY 2 direct children):
+  body (display:flex, flex-direction:column, height:1080px, padding:60px 80px)
+    → .slide-title (flex:0 0 auto — title text only, NO extra margin-bottom)
+    → .content (flex:1 — STRETCHES to fill ALL remaining vertical space)
+
+⚠ body MUST have exactly 2 direct children: .slide-title and .content. No accent bars, no spacers, no extra divs between them.
+⚠ .slide-title should include any accent bars/decorations AS PART OF the title section, not as separate body children.
+⚠ .content MUST use flex:1 to stretch. NEVER use justify-content:center on .content — it creates dead space.
+⚠⚠⚠ ALL content elements (cards, bars, table, timeline items) MUST be DIRECT CHILDREN of .content. NEVER wrap them in a container/wrapper div inside .content. Wrong: .content > .wrapper > items. Right: .content > items.
+
+${getLayoutSpecificCss(layoutType, design)}
+
+═══ DESIGN RULES ═══
+1. Title: 48-64px bold. Body: 26-32px. MINIMUM any visible text: 26px. NEVER use font-size below 26px for any text element. If content doesn't fit at 26px, REDUCE ITEM COUNT instead of shrinking text. Card descriptions: 26-30px. Card titles: 32-40px. Labels/captions: 26px minimum. body { font-size: 26px; } is MANDATORY.
+2. Use gradients, box-shadow (0 4px 20px rgba(0,0,0,0.06)), border-radius (12-20px)
+3. Follow the REQUIRED LAYOUT specified above exactly. Do NOT substitute a different layout type.
+4. LAYOUT LIMITS: MAX 4 cards (2×2 grid), MAX 2 cards per row. Tables: 5-8 rows for rich data. Timeline: 4-5 steps.
+   ⚠ If content_direction lists 5+ items, group them into 4 cards (combine related items).
+5. ⚠⚠⚠ NEVER use position:absolute. ALL layout MUST use flexbox/grid. position:absolute is STRIPPED by the renderer.
+6. ⚠ NEVER use hub-and-spoke or center-circle layouts (a circle in the center with items around it). The overlapping circle ALWAYS covers text. Use a simple card grid instead.
+7. ⚠ MAXIMUM 4 columns in any grid layout. 5+ columns = text too small. Use 2-3 columns + 2 rows instead.
+8. PIE/DONUT: conic-gradient on border-radius:50% div ONLY. No clip-path or rotated divs.
+9. Bar chart labels: min-width:120px, text-align:center. Never let labels wrap per-character.
+10. ⚠ NO LINE CHARTS in CSS — lines/dots never align correctly. Use bar charts (flex-end alignment) or donut charts (conic-gradient) instead.
+11. CSS CHARTS THAT WORK: vertical bar charts (flex-end + height%), horizontal bar charts (width%), donut/pie charts (conic-gradient + border-radius:50%), progress bars (width%). Use these liberally for data visualization.
+12. Table headers: dark background (${design.primary_color}) with WHITE text. Never transparent.
+
+═══ SPACE UTILIZATION — NO DEAD ZONES ═══
+⚠ Content MUST be distributed across the full 1080px height. No section should be >150px of empty whitespace.
+⚠ If using a colored header/banner area, it MUST NOT exceed 20% of slide height (216px max).
+⚠ The main content area (.content with flex:1) must contain the MAJORITY of visible information.
+⚠ Cards stretch to fill height via align-items:stretch from parent — but they MUST have DENSE content inside (see CARD CONTENT DENSITY above).
+⚠ NEVER use justify-content:center or align-items:center on .content — it bunches content in the center with empty space around it.
+⚠ NEVER use justify-content:space-between on individual cards — it creates huge gaps between sparse items. Use flex-start + gap instead.
+⚠ Cards in a row: parent uses align-items:stretch (default) so cards fill the full height.
+
+═══ TABLE COMPLETENESS — MANDATORY ═══
+⚠ If you create a table, EVERY cell MUST contain real data. Empty cells = FAILURE.
+⚠ For comparison tables: fill ALL columns for ALL competitors/items with realistic data.
+⚠ Example: 5-company comparison → all 5 columns must have data in every row.
+⚠ NEVER create a table with only 1 column filled — that's not a comparison, it's a list.
+
+═══ CONTENT RULES ═══
+• ${langRule}
+• Korean text only — never Chinese characters (漢字), Japanese, or other scripts
+• Generate REAL, specific content — no placeholders
+• BALANCE density and readability — fill 80-90% of the slide area with meaningful content. Avoid both sparse slides and overloaded slides.
+• If the user specifies a year in their request, USE THAT YEAR faithfully. Only default to ${new Date().getFullYear()} for content with no explicit year.
+• ALL content MUST fit within 1080px height. Use compact padding (24-32px) and dense content. Fill 85-95% of slide area.
+• Each section: 3-5 detailed bullet points with specific data. Dense content beats wide padding.
+• body MUST set font-size: 26px as the base. All text inherits at least 26px unless explicitly larger.
+
+═══ PAGE NUMBER ═══
+Bottom-right: "${slideIndex + 1}" (12px, opacity 0.4)
+
+Output the complete HTML document now. Start with <!DOCTYPE html> and end with </html>.`;
+}
+export function buildLayoutSetPrompt(design) {
+    const moodGuide = {
+        'modern-minimal': 'Clean lines, subtle shadows (0 2px 16px rgba(0,0,0,0.06)), generous whitespace, thin borders (1px), smooth border-radius (12-16px)',
+        'bold-energetic': 'Strong gradients, deep shadows (0 8px 32px rgba(0,0,0,0.12)), thick accent bars, high contrast, border-radius (8-12px)',
+        'corporate-elegant': 'Refined spacing, subtle gradients, structured grids, sophisticated thin shadows, serif-like feel',
+        'warm-friendly': 'Rounded corners (20px+), soft warm shadows, inviting spacing (32-40px gaps), gentle color transitions',
+        'academic-clean': 'Tight grids, minimal decoration, clear hierarchy, thin rules (1px borders), data-first design',
+    };
+    return `You are a CSS layout architect. Create reusable slide layout components.
+
+DESIGN: Primary:${design.primary_color} Accent:${design.accent_color} BG:${design.background_color} Text:${design.text_color} AccentLight:${design.accent_light} GradEnd:${design.gradient_end}
+Fonts: ${design.font_title} / ${design.font_body} | Mood: ${design.mood}
+Style: ${moodGuide[design.mood] || moodGuide['modern-minimal']}
+
+Create exactly 8 layout components. Keep CSS minimal — only essential styles.
+
+FORMAT per layout:
+---LAYOUT: name---
+USE: description
+CSS:
+.content{flex:1;display:grid;...}
+HTML:
+<div class="content">...</div>
+---END---
+
+REQUIRED (one each):
+1. bar-chart: flex-end aligned bars with height:XX%
+2. donut-chart: conic-gradient circle + legend
+3. progress-bars: .bar-track + .bar-fill with width:XX%
+4. data-table: <table> with colored header
+5. process-flow: step boxes with arrows
+6. big-numbers: 2-3 large metric cards (72-96px)
+7. card-grid: 2x2 or 3-col cards
+8. timeline: horizontal milestone cards
+
+Use {{VALUE1}} {{LABEL1}} {{TEXT1}} {{PERCENT1}} as placeholders in HTML.
+
+RULES:
+- Use design colors in CSS. .content must have flex:1.
+- Use grid with explicit fr rows (1fr 1fr). Min font: 26px body, 32px titles.
+- No position:absolute, no images, no external resources.
+- Keep each layout CONCISE — minimal CSS, clean HTML skeleton.`;
+}
+export function parseLayoutSet(text) {
+    const results = [];
+    const blocks = text.split(/---\s*LAYOUT\s*:\s*/i);
+    for (const block of blocks) {
+        const trimmed = block.trim();
+        if (!trimmed || trimmed.length < 40)
+            continue;
+        const nameMatch = trimmed.match(/^([^\n]+?)\s*---/);
+        if (!nameMatch)
+            continue;
+        const name = nameMatch[1].trim().replace(/\*+/g, '');
+        const useMatch = trimmed.match(/USE:\s*(.+)/i);
+        const description = useMatch ? useMatch[1].trim() : name;
+        const cssMatch = trimmed.match(/CSS\s*:\s*\n?([\s\S]*?)(?=\n\s*HTML\s*:)/i);
+        if (!cssMatch)
+            continue;
+        let css = cssMatch[1].trim().replace(/^```\s*(?:css)?\s*\n?/, '').replace(/\n?```\s*$/, '').trim();
+        const htmlMatch = trimmed.match(/HTML\s*:\s*\n?([\s\S]*?)(?=\n?---\s*END\s*---|$)/i);
+        if (!htmlMatch)
+            continue;
+        let skeleton = htmlMatch[1].trim().replace(/^```\s*(?:html)?\s*\n?/, '').replace(/\n?```\s*$/, '').trim();
+        if (css.length > 10 && skeleton.length > 10) {
+            results.push({ name, description, css, skeleton });
+        }
+    }
+    return results;
+}
+export function buildAllSkeletonsPrompt(slides, layouts) {
+    const layoutList = layouts.map(l => `  - "${l.name}": ${l.description}`).join('\n');
+    const slideList = slides
+        .map((s, i) => {
+        if (s.type === 'title' || s.type === 'closing')
+            return null;
+        const cd = s.content_direction.replace(/\n/g, ' ').slice(0, 200);
+        return `  Slide ${i + 1}: "${s.title}" — ${cd}`;
+    })
+        .filter(Boolean)
+        .join('\n');
+    return `You are a presentation layout composer. For each content slide, choose the best layout and create an HTML skeleton.
+
+AVAILABLE LAYOUTS:
+${layoutList}
+
+SLIDES:
+${slideList}
+
+OUTPUT FORMAT — for each content slide:
+===SLIDE:N===
+LAYOUT: layout-name
+<div class="content">
+  <!-- adapted skeleton from the chosen layout, with {{PLACEHOLDER}} markers -->
+  <!-- adjust element count to match the slide's content -->
+</div>
+===END===
+
+RULES:
+⚠ Use at least 5 DIFFERENT layouts across all slides. Never use the same layout 3+ times.
+⚠ Match layout to content: data → chart, comparison → table, steps → flow, metrics → numbers.
+⚠ Adapt element count: if content has 4 items → 4 cards/bars. If 3 steps → 3 step divs.
+⚠ Output ONLY the .content div — no <html>, no <style>, no boilerplate.
+⚠ Skip title and closing slides (they use fixed templates).
+⚠ Placeholders: {{VALUE1}}, {{LABEL1}}, {{TEXT1}}, {{PERCENT1}}, {{HEIGHT1}}, {{TITLE}}, {{INSIGHT}}, etc.
+⚠ Keep skeletons minimal and structural — just the div hierarchy with class names and placeholders.
+
+MINIMUM CONTENT DENSITY PER SKELETON:
+⚠ Each card skeleton MUST include: {{TITLE}}, {{BULLET1}}, {{BULLET2}}, {{BULLET3}}, {{BULLET4}}, {{STAT}} — at least 6 placeholders per card.
+⚠ Each progress bar MUST include: {{LABEL}}, {{VALUE}}, {{PERCENT}}, {{DETAIL}} — label + value + bar + detail text.
+⚠ Each timeline milestone MUST include: {{DATE}}, {{TITLE}}, {{DESC1}}, {{DESC2}}, {{KPI}} — 5 placeholders minimum.
+⚠ Each table row MUST have ALL columns filled with {{DATA}} placeholders. Include 5-8 rows.
+⚠ NEVER create a skeleton with only 2 content items per element — that produces EMPTY slides.`;
+}
+export function parseSkeletons(text) {
+    const results = new Map();
+    const blocks = text.split(/===\s*SLIDE\s*:\s*/i);
+    for (const block of blocks) {
+        const trimmed = block.trim();
+        if (!trimmed)
+            continue;
+        const numMatch = trimmed.match(/^(\d+)\s*===/);
+        if (!numMatch)
+            continue;
+        const slideNum = parseInt(numMatch[1], 10);
+        const layoutMatch = trimmed.match(/LAYOUT\s*:\s*([^\n]+)/i);
+        const layout = layoutMatch ? layoutMatch[1].trim() : '';
+        const contentMatch = trimmed.match(/(<div[\s\S]*)<\/div>\s*(?:===\s*END\s*===|$)/i);
+        let skeleton = contentMatch ? contentMatch[1].trim() + '</div>' : '';
+        if (!skeleton || skeleton.length < 20) {
+            const fallbackMatch = trimmed.match(/LAYOUT\s*:[^\n]+\n([\s\S]*?)(?:===\s*END\s*===|$)/i);
+            skeleton = fallbackMatch ? fallbackMatch[1].trim() : '';
+        }
+        if (layout && skeleton.length > 20) {
+            results.set(slideNum, { layout, skeleton });
+        }
+    }
+    return results;
+}
+export function buildFillPrompt(skeleton, layoutCss, contentDirection, slideTitle, design, slideIndex, totalSlides, language, layoutType = 'cards') {
+    const langRule = language === 'ko'
+        ? 'ALL visible text MUST be in Korean. Write naturally in Korean.'
+        : 'ALL visible text MUST be in English.';
+    const styleVariants = [
+        `STYLE: Clean white cards with subtle shadow (0 4px 20px rgba(0,0,0,0.06)), 16px border-radius. Background: ${design.background_color}.`,
+        `STYLE: Cards with colored left border (4px solid ${design.accent_color}) and ${design.accent_light} tinted background. No box-shadow.`,
+        `STYLE: Cards with gradient TOP border (4px solid, background-image: linear-gradient(90deg, ${design.primary_color}, ${design.accent_color})). White card body with medium shadow.`,
+        `STYLE: Slide background uses subtle gradient: linear-gradient(150deg, ${design.background_color} 0%, ${design.accent_light} 50%, ${design.background_color} 100%). Cards have stronger shadow (0 8px 32px rgba(0,0,0,0.08)).`,
+        `STYLE: Bold accent bar at top of slide (height:6px, background: linear-gradient(90deg, ${design.accent_color}, ${design.primary_color})). Clean white cards below with subtle shadow.`,
+    ];
+    const styleGuide = styleVariants[slideIndex % styleVariants.length];
+    const layoutFillRules = {
+        cards: `CARD DENSITY: Each card MUST contain: title (32-40px bold) + 4-5 bullet points (26-28px) with specific numbers and data + metric/stat at bottom. 3 cards with 2 bullets = FAILURE. Cards MUST be DIRECT children of .content grid. NEVER have empty grid cells.`,
+        progress_bars: `PROGRESS BAR DENSITY: 5-6 bars total. Each bar MUST have: category title + bold percentage value + progress bar + 1-line detail text below the bar explaining context. .bar-item divs MUST be DIRECT children of .content — NO wrapper container.`,
+        bar_chart: `BAR CHART DENSITY: 4-6 bars with value labels on top. Add a 2-line insight row at the bottom of the chart area. Include axis labels and context.`,
+        donut_chart: `DONUT DENSITY: 4-5 colored segments. Legend items MUST include: colored dot + category name + absolute value + percentage. Add a 2-sentence summary paragraph below the legend.`,
+        table: `TABLE DENSITY: 6-8 data rows × 3-5 columns. ALL cells MUST contain real data — no empty cells. Add a summary bar below the table with key insight text. Use larger padding (28-32px) on td. <table> and .summary-bar MUST be DIRECT children of .content.`,
+        timeline: `TIMELINE DENSITY: Each milestone MUST have: date (24px) + title (30px bold) + 3-4 sentence description (26px) + KPI metric at bottom. No sparse milestones with 1-line descriptions. .milestone divs MUST be DIRECT children of .content.`,
+        process_flow: `PROCESS FLOW DENSITY: Each step MUST have: number + title (28px bold) + 2-3 sentence description (24px) + time/metric at bottom. Include → arrows between steps.`,
+        big_numbers: `METRIC DENSITY: Each metric card MUST have: large number (72-80px) + unit (32px) + label (28px) + 2-3 sentence context description (24px) + trend indicator (▲▼ with color). Minimum 3 metric cards.`,
+        two_col_split: `SPLIT DENSITY: Left column: primary visual or metric with context. Right column: 4-5 detailed bullet points with specific numbers. Both columns MUST be content-rich.`,
+        hero_stat: `HERO DENSITY: Central number (128px) + unit + label + 2-3 sentence context paragraph + row of 2-3 supporting metrics below with labels.`,
+    };
+    const layoutRule = layoutFillRules[layoutType] || layoutFillRules['cards'];
+    return `You are filling content into a pre-built HTML slide skeleton.
+Output ONLY the complete HTML document — no explanation, no markdown.
+
+═══ SLIDE ═══
+Title (display this exactly as .slide-title h1): "${slideTitle}"
+Position: ${slideIndex + 1} of ${totalSlides} (for page number only, NOT in the title)
+
+═══ CONTENT DIRECTION ═══
+${contentDirection}
+
+⚠ Generate REAL, specific content based on the direction above. Never display placeholder text.
+⚠ The .slide-title h1 must show ONLY "${slideTitle}" — never include slide numbers or position info in the title.
+
+═══ SKELETON (preserve this structure, replace {{PLACEHOLDERS}} with real content) ═══
+${skeleton}
+
+═══ LAYOUT CSS ═══
+${layoutCss}
+
+═══ DESIGN SYSTEM ═══
+Primary: ${design.primary_color} | Accent: ${design.accent_color} | BG: ${design.background_color}
+Text: ${design.text_color} | Accent Light: ${design.accent_light} | Gradient End: ${design.gradient_end}
+Title Font: ${design.font_title} | Body Font: ${design.font_body} | Mood: ${design.mood}
+
+═══ THIS SLIDE'S VISUAL STYLE ═══
+${styleGuide}
+Follow this style direction to ensure visual variety across slides.
+
+═══ BUILD THE COMPLETE HTML PAGE ═══
+1. Start with <!DOCTYPE html><html><head><style>
+2. In <style>: BOILERPLATE (below) + LAYOUT CSS (above) + any extra styling you want
+3. In <body>: .slide-title with the title, then the SKELETON with placeholders filled
+4. Replace EVERY {{PLACEHOLDER}} with professional content from the content direction
+5. If content needs more/fewer elements than the skeleton has, adapt the structure
+6. Add visual polish: gradients, shadows, accent colors from the design system
+
+BOILERPLATE CSS (copy into <style>):
+* { margin:0; padding:0; box-sizing:border-box; }
+html, body { width:1920px; height:1080px; overflow:hidden; font-family:"${design.font_body}","${design.font_title}","Segoe UI","Malgun Gothic",Arial,sans-serif; word-break:keep-all; overflow-wrap:break-word; }
+body { display:flex; flex-direction:column; padding:60px 80px; height:1080px; background:${design.background_color}; color:${design.text_color}; font-size:26px; }
+.slide-title h1 { font-size:52px; font-weight:700; color:${design.primary_color}; margin-bottom:20px; font-family:"${design.font_title}","Segoe UI",sans-serif; }
+.content { flex:1; }
+
+RULES:
+⚠ ${langRule}
+⚠ Korean text only — never Chinese characters (漢字), Japanese, or other scripts.
+⚠ Font minimum: 26px for ALL text. Reduce items instead of shrinking text.
+⚠ NO position:absolute. Flexbox/grid only.
+⚠ NO images, NO external fonts, NO JavaScript.
+⚠ .content MUST have flex:1 to fill remaining vertical space.
+⚠ Page number: bottom-right corner, "${slideIndex + 1}" (font-size:12px, opacity:0.4).
+
+═══ VERTICAL FILL — CRITICAL ═══
+⚠⚠⚠ Content MUST fill 85-95% of the 1080px slide height. Empty slides = FAILURE.
+
+${layoutRule}
+
+⚠ The skeleton has {{PLACEHOLDERS}} — replace them AND ADD MORE CONTENT beyond what placeholders specify:
+  - Each card/section: 3-5 detailed bullet points with specific data (not 1-2 sparse lines)
+  - Include specific numbers, percentages, comparisons, and context in every bullet
+  - Add supporting insight text below data visualizations
+  - Titles: 40-52px bold. Body text: 26-30px. Metrics: 48-64px.
+⚠ If the skeleton has 3 cards with 2 bullets each → expand to 4-5 bullets per card.
+⚠ NEVER leave the bottom 30% of the slide empty.
+⚠ Use compact but dense layout: 24-32px padding inside cards, 12-16px between items. Dense content > wide padding.
+⚠⚠⚠ ALL content elements (cards, bars, table, items) MUST be DIRECT children of .content. NEVER wrap them in a container/wrapper div.
+
+Output the complete HTML now.`;
+}
+export function buildContentFillJsonPrompt(slideTitle, contentDirection, layoutType, language) {
+    const langRule = language === 'ko'
+        ? 'ALL text MUST be in Korean. Write naturally in Korean. Never use Chinese characters (漢字).'
+        : 'ALL text MUST be in English.';
+    const schemas = {
+        cards: `{
+  "cards": [
+    { "icon": "single emoji", "title": "Card title (2-5 words)", "bullets": ["Detail with number/data", "Another detail", "Third point", "Fourth point"], "stat": "Key metric (e.g., 97.8% 정확도)" }
+  ]
+}
+RULES: 3-4 cards. Each: icon + title + 4-5 bullets with specific data + stat.`,
+        bar_chart: `{
+  "bars": [
+    { "label": "Category name", "value": "Display value (e.g. 1,250억원)", "height": 85 }
+  ],
+  "insight": "1-2 sentence key insight about the data"
+}
+RULES: 4-6 bars. height: 10-90 (tallest=85, others proportional). Values with units.`,
+        donut_chart: `{
+  "segments": [
+    { "label": "Segment name", "value": "Display value (e.g. 562억원)", "percent": 45 }
+  ],
+  "centerText": "Center label (e.g. 총 1,250억원)",
+  "summary": "1-2 sentence summary"
+}
+RULES: 3-5 segments. Percents MUST sum to exactly 100.`,
+        table: `{
+  "headers": ["Column 1", "Column 2", "Column 3", "Column 4"],
+  "rows": [["data", "data", "data", "data"]],
+  "highlightRow": 0,
+  "summary": "1-2 sentence summary"
+}
+RULES: 3-5 columns. 5-7 rows. ALL cells real data. highlightRow: 0-indexed or null.`,
+        process_flow: `{
+  "steps": [
+    { "title": "Step name (2-4 words)", "desc": "2-3 sentence description with details", "detail": "Duration or metric" }
+  ]
+}
+RULES: 3-5 steps. Each: title + detailed description + time/metric.`,
+        big_numbers: `{
+  "metrics": [
+    { "value": "1,250", "unit": "억원", "label": "Metric Name", "desc": "1-2 sentence context", "trend": "▲ 15%", "positive": true }
+  ]
+}
+RULES: 2-3 metrics. value=number only, unit=separate. trend: ▲/▼ + percentage.`,
+        timeline: `{
+  "milestones": [
+    { "date": "2026 Q1", "title": "Milestone name", "desc": "2-3 sentence description", "kpi": "Target metric" }
+  ]
+}
+RULES: 3-4 milestones with dates, descriptions, and KPI targets.`,
+        progress_bars: `{
+  "bars": [
+    { "label": "Category name", "value": "Display (e.g. 92%)", "percent": 92, "detail": "Brief context" }
+  ]
+}
+RULES: 4-6 bars. percent: 5-100. Include context detail for each.`,
+        hero_stat: `{
+  "number": "97.8",
+  "unit": "%",
+  "label": "Metric Name",
+  "context": "2-3 sentence context explaining significance",
+  "supporting": [
+    { "value": "45개국", "label": "Supporting metric name" }
+  ]
+}
+RULES: 1 hero number + context + 2-3 supporting metrics.`,
+        two_col_split: `{
+  "leftTitle": "Left column heading",
+  "leftItems": [
+    { "label": "Item name", "value": "Item value with data" }
+  ],
+  "rightTitle": "Right column heading",
+  "rightBullets": ["Detailed bullet point with data"]
+}
+RULES: Left: 3-5 key-value items. Right: 4-6 detailed bullets.`,
+    };
+    return `Extract content from the direction below and output ONLY valid JSON.
+Do NOT output markdown fences, explanations, or anything besides the JSON object.
+
+SLIDE TITLE: "${slideTitle}"
+LAYOUT TYPE: ${layoutType}
+
+CONTENT DIRECTION:
+${contentDirection}
+
+REQUIRED JSON SCHEMA:
+${schemas[layoutType]}
+
+${langRule}
+Use SPECIFIC numbers, names, percentages from the content direction.
+Each text field must be substantive (not 1-2 generic words).
+If the content direction lacks specific data, generate realistic professional data that fits the topic.
+
+Output the JSON object now:`;
+}
+export function parseContentFillJson(raw, layoutType) {
+    let cleaned = raw.trim();
+    if (cleaned.startsWith('```')) {
+        cleaned = cleaned.replace(/^```(?:json|JSON)?\s*\n?/, '').replace(/\n?```\s*$/, '');
+    }
+    const firstBrace = cleaned.indexOf('{');
+    const lastBrace = cleaned.lastIndexOf('}');
+    if (firstBrace >= 0 && lastBrace > firstBrace) {
+        cleaned = cleaned.slice(firstBrace, lastBrace + 1);
+    }
+    let parsed = null;
+    try {
+        parsed = JSON.parse(cleaned);
+    }
+    catch {
+        try {
+            const repaired = cleaned.replace(/,\s*([}\]])/g, '$1');
+            parsed = JSON.parse(repaired);
+        }
+        catch {
+            return null;
+        }
+    }
+    if (!parsed)
+        return null;
+    switch (layoutType) {
+        case 'cards':
+            if (!Array.isArray(parsed['cards']) || parsed['cards'].length === 0)
+                return null;
+            break;
+        case 'bar_chart':
+            if (!Array.isArray(parsed['bars']) || parsed['bars'].length === 0)
+                return null;
+            break;
+        case 'donut_chart':
+            if (!Array.isArray(parsed['segments']) || parsed['segments'].length === 0)
+                return null;
+            break;
+        case 'table':
+            if (!Array.isArray(parsed['headers']) || !Array.isArray(parsed['rows']))
+                return null;
+            break;
+        case 'process_flow':
+            if (!Array.isArray(parsed['steps']) || parsed['steps'].length === 0)
+                return null;
+            break;
+        case 'big_numbers':
+            if (!Array.isArray(parsed['metrics']) || parsed['metrics'].length === 0)
+                return null;
+            break;
+        case 'timeline':
+            if (!Array.isArray(parsed['milestones']) || parsed['milestones'].length === 0)
+                return null;
+            break;
+        case 'progress_bars':
+            if (!Array.isArray(parsed['bars']) || parsed['bars'].length === 0)
+                return null;
+            break;
+        case 'hero_stat':
+            if (!parsed['number'])
+                return null;
+            break;
+        case 'two_col_split':
+            if (!parsed['leftTitle'] && !parsed['rightTitle'])
+                return null;
+            break;
+    }
+    return parsed;
+}
+function escapeHtmlTemplate(text) {
+    return text
+        .replace(/&/g, '&amp;')
+        .replace(/</g, '&lt;')
+        .replace(/>/g, '&gt;')
+        .replace(/"/g, '&quot;');
+}
+function wrapSlide(design, title, slideNum, contentCss, contentHtml, variant = 0) {
+    const bgVariants = [
+        `background:${design.background_color};`,
+        `background:linear-gradient(160deg,${design.background_color} 0%,${design.accent_light}40 100%);`,
+        `background:${design.background_color};`,
+    ];
+    const bodyBg = bgVariants[variant % bgVariants.length];
+    const accentBar = variant % 3 === 2
+        ? `<div style="height:4px;background:linear-gradient(90deg,${design.accent_color},${design.primary_color});margin-bottom:12px;border-radius:2px;flex-shrink:0"></div>`
+        : '';
+    return `<!DOCTYPE html>
+<html lang="ko">
+<head><meta charset="UTF-8"><style>
+*{margin:0;padding:0;box-sizing:border-box}
+html,body{width:1920px;height:1080px;overflow:hidden;font-family:"${design.font_body}","${design.font_title}","Segoe UI","Malgun Gothic",Arial,sans-serif;word-break:keep-all;overflow-wrap:break-word}
+body{display:flex;flex-direction:column;padding:60px 80px;height:1080px;${bodyBg}color:${design.text_color};font-size:26px}
+.slide-title{flex:0 0 auto;margin-bottom:20px}
+.slide-title h1{font-size:48px;font-weight:700;color:${design.primary_color};font-family:"${design.font_title}","Segoe UI",sans-serif}
+.title-bar{width:80px;height:3px;background:${design.accent_color};border-radius:2px;margin-top:12px}
+.page-number{position:absolute;bottom:20px;right:80px;font-size:12px;opacity:0.4}
+${contentCss}
+</style></head>
+<body>
+<div class="slide-title">${accentBar}<h1>${escapeHtmlTemplate(title)}</h1><div class="title-bar"></div></div>
+${contentHtml}
+<div class="page-number">${slideNum}</div>
+</body></html>`;
+}
+function buildCardsContent(design, data) {
+    const n = Math.min((data.cards || []).length, 4);
+    const cols = n <= 3 ? `repeat(${n},1fr)` : '1fr 1fr';
+    const is2x2 = n === 4;
+    const gridExtra = is2x2 ? 'grid-template-rows:1fr 1fr' : 'grid-template-rows:1fr';
+    const cardPad = is2x2 ? '28px 24px' : '36px 32px';
+    const cardGap = is2x2 ? '10px' : '14px';
+    const h2Size = is2x2 ? '32px' : '34px';
+    const liSize = is2x2 ? '26px' : '28px';
+    const liMargin = is2x2 ? '8px' : '12px';
+    const css = `.content{flex:1;display:grid;grid-template-columns:${cols};${gridExtra};gap:24px}
+.card{background:#fff;border-radius:16px;padding:${cardPad};box-shadow:0 4px 20px rgba(0,0,0,0.06);display:flex;flex-direction:column;gap:${cardGap};overflow:hidden}
+.card-icon{font-size:36px;line-height:1}
+.card h2{font-size:${h2Size};font-weight:700;color:${design.primary_color}}
+.card ul{list-style:none;flex:1}
+.card li{margin-bottom:${liMargin};padding-left:22px;position:relative;font-size:${liSize};line-height:1.4}
+.card li::before{content:"•";color:${design.accent_color};position:absolute;left:0;font-weight:bold}
+.card-stat{margin-top:auto;padding-top:12px;border-top:2px solid ${design.accent_light};font-size:24px;font-weight:600;color:${design.accent_color}}`;
+    const maxBullets = n <= 3 ? 5 : 3;
+    const cards = (data.cards || []).slice(0, 4).map(c => `
+  <div class="card">
+    <div class="card-icon">${c.icon || '📌'}</div>
+    <h2>${escapeHtmlTemplate(c.title || '')}</h2>
+    <ul>${(c.bullets || []).slice(0, maxBullets).map(b => `<li>${escapeHtmlTemplate(b)}</li>`).join('')}</ul>
+    ${c.stat ? `<div class="card-stat">${escapeHtmlTemplate(c.stat)}</div>` : ''}
+  </div>`).join('');
+    return { css, html: `<div class="content">${cards}\n</div>` };
+}
+function buildBarChartContent(design, data) {
+    const css = `.content{flex:1;display:flex;flex-direction:column}
+.chart-area{flex:1;display:flex;align-items:stretch;gap:32px;padding:20px 60px 0}
+.bar-group{flex:1;display:flex;flex-direction:column;align-items:center}
+.bar-spacer{flex:1}
+.bar-value{font-size:28px;font-weight:700;color:${design.primary_color};margin-bottom:8px;flex-shrink:0}
+.bar{width:80%;border-radius:8px 8px 0 0;background:linear-gradient(180deg,${design.accent_color},${design.primary_color});flex-shrink:0}
+.bar-label{font-size:24px;font-weight:600;color:${design.text_color};text-align:center;min-width:120px;word-break:keep-all;padding:12px 0;flex-shrink:0}
+.insight-row{padding:20px 60px;background:${design.accent_light};border-radius:12px;margin-top:16px;font-size:26px;color:${design.text_color};line-height:1.5;flex-shrink:0}`;
+    const maxH = Math.max(...(data.bars || []).map(b => b.height || 50), 1);
+    const bars = (data.bars || []).slice(0, 6).map(b => {
+        const normalized = Math.max(8, Math.round(((b.height || 50) / maxH) * 85));
+        return `
+    <div class="bar-group">
+      <div class="bar-spacer"></div>
+      <div class="bar-value">${escapeHtmlTemplate(b.value || '')}</div>
+      <div class="bar" style="height:${normalized}%"></div>
+      <div class="bar-label">${escapeHtmlTemplate(b.label || '')}</div>
+    </div>`;
+    }).join('');
+    return {
+        css,
+        html: `<div class="content">
+  <div class="chart-area">${bars}</div>
+  <div class="insight-row">${escapeHtmlTemplate(data.insight || '')}</div>
+</div>`,
+    };
+}
+function buildDonutChartContent(design, data) {
+    const segColors = [design.primary_color, design.accent_color, design.gradient_end, '#FF6B6B', '#4ECDC4', '#45B7D1'];
+    const segs = (data.segments || []).slice(0, 6);
+    const totalPct = segs.reduce((s, seg) => s + (seg.percent || 0), 0);
+    let cumPct = 0;
+    const stops = segs.map((s, i) => {
+        const start = cumPct;
+        const pct = totalPct > 0 ? (s.percent / totalPct) * 100 : 100 / segs.length;
+        cumPct += pct;
+        return `${segColors[i % segColors.length]} ${start.toFixed(1)}% ${cumPct.toFixed(1)}%`;
+    }).join(',');
+    const css = `.content{flex:1;display:grid;grid-template-columns:1.2fr 1fr;gap:40px;align-items:center;align-content:center}
+.donut-wrap{display:flex;justify-content:center;align-items:center}
+.donut{width:500px;height:500px;border-radius:50%;display:flex;align-items:center;justify-content:center;box-shadow:0 8px 32px rgba(0,0,0,0.08)}
+.donut-hole{width:240px;height:240px;border-radius:50%;background:${design.background_color};display:flex;align-items:center;justify-content:center;flex-direction:column;gap:4px}
+.donut-center{font-size:30px;font-weight:800;color:${design.primary_color};text-align:center;line-height:1.3}
+.legend{display:flex;flex-direction:column;gap:28px}
+.legend-item{display:flex;align-items:center;gap:16px;font-size:28px;padding:12px 16px;background:#fff;border-radius:12px;box-shadow:0 2px 8px rgba(0,0,0,0.04)}
+.legend-dot{width:24px;height:24px;border-radius:50%;flex-shrink:0}
+.legend-value{font-weight:700;color:${design.primary_color};margin-left:auto;white-space:nowrap}
+.chart-summary{grid-column:1/3;padding:16px 24px;background:${design.accent_light};border-radius:12px;font-size:26px;color:${design.text_color};line-height:1.5}`;
+    const legendHtml = segs.map((s, i) => `
+    <div class="legend-item">
+      <div class="legend-dot" style="background:${segColors[i % segColors.length]}"></div>
+      <span>${escapeHtmlTemplate(s.label || '')}</span>
+      <span class="legend-value">${escapeHtmlTemplate(s.value || '')} (${s.percent}%)</span>
+    </div>`).join('');
+    return {
+        css,
+        html: `<div class="content">
+  <div class="donut-wrap">
+    <div class="donut" style="background:conic-gradient(${stops})">
+      <div class="donut-hole"><div class="donut-center">${escapeHtmlTemplate(data.centerText || '')}</div></div>
+    </div>
+  </div>
+  <div class="legend">${legendHtml}</div>
+  ${data.summary ? `<div class="chart-summary">${escapeHtmlTemplate(data.summary)}</div>` : ''}
+</div>`,
+    };
+}
+function buildTableContent(design, data) {
+    const css = `.content{flex:1;display:flex;flex-direction:column}
+.data-table{width:100%;border-collapse:collapse;background:#fff;box-shadow:0 4px 12px rgba(0,0,0,0.05);flex:1}
+.data-table th{background:${design.primary_color};color:#fff;font-size:26px;text-align:left;padding:20px 24px;font-weight:700}
+.data-table td{font-size:26px;color:${design.text_color};padding:20px 24px;border-bottom:1px solid ${design.accent_light}}
+.data-table tr:last-child td{border-bottom:none}
+.data-table tr:nth-child(even){background:${design.accent_light}20}
+.data-table tr.highlight td{background:${design.accent_color}15;font-weight:600}
+.table-summary{margin-top:auto;padding:16px 24px;background:${design.accent_light};border-radius:12px;font-size:26px;color:${design.text_color};line-height:1.5}`;
+    const headers = (data.headers || []).map(h => `<th>${escapeHtmlTemplate(h)}</th>`).join('');
+    const rows = (data.rows || []).map((row, ri) => {
+        const cls = ri === data.highlightRow ? ' class="highlight"' : '';
+        const cells = (row || []).map(c => `<td>${escapeHtmlTemplate(String(c || ''))}</td>`).join('');
+        return `<tr${cls}>${cells}</tr>`;
+    }).join('\n');
+    return {
+        css,
+        html: `<div class="content">
+  <table class="data-table"><thead><tr>${headers}</tr></thead><tbody>\n${rows}\n</tbody></table>
+  ${data.summary ? `<div class="table-summary">${escapeHtmlTemplate(data.summary)}</div>` : ''}
+</div>`,
+    };
+}
+function buildProcessFlowContent(design, data) {
+    const n = Math.min((data.steps || []).length, 5);
+    const titleSz = n <= 3 ? '34px' : '32px';
+    const descSz = n <= 3 ? '28px' : '27px';
+    const detailSz = n <= 3 ? '28px' : '26px';
+    const css = `.content{flex:1;display:flex;align-items:stretch;gap:0}
+.step{flex:1;display:flex;flex-direction:column;align-items:center;padding:36px 24px;background:#fff;border-radius:16px;text-align:center;gap:16px;box-shadow:0 4px 20px rgba(0,0,0,0.06)}
+.step-num{width:52px;height:52px;border-radius:50%;background:linear-gradient(135deg,${design.primary_color},${design.gradient_end});color:#fff;display:flex;align-items:center;justify-content:center;font-size:24px;font-weight:700;flex-shrink:0}
+.step-title{font-size:${titleSz};font-weight:700;color:${design.primary_color}}
+.step-desc{font-size:${descSz};color:${design.text_color};line-height:1.5;flex:1}
+.step-detail{font-size:${detailSz};color:${design.accent_color};font-weight:600;padding-top:14px;border-top:2px solid ${design.accent_color}40;margin-top:auto}
+.arrow{width:48px;display:flex;align-items:center;justify-content:center;font-size:40px;color:${design.accent_color};flex-shrink:0}`;
+    const steps = (data.steps || []).slice(0, 5);
+    const stepsHtml = steps.map((s, i) => {
+        const stepDiv = `
+  <div class="step">
+    <div class="step-num">${i + 1}</div>
+    <div class="step-title">${escapeHtmlTemplate(s.title || '')}</div>
+    <div class="step-desc">${escapeHtmlTemplate(s.desc || '')}</div>
+    ${s.detail ? `<div class="step-detail">${escapeHtmlTemplate(s.detail)}</div>` : ''}
+  </div>`;
+        return i < steps.length - 1 ? stepDiv + '\n  <div class="arrow">→</div>' : stepDiv;
+    }).join('');
+    return { css, html: `<div class="content">${stepsHtml}\n</div>` };
+}
+function buildBigNumbersContent(design, data) {
+    const css = `.content{flex:1;display:flex;gap:40px;align-items:stretch}
+.metric-card{flex:1;display:flex;flex-direction:column;justify-content:center;align-items:center;padding:48px 32px;border-radius:20px;background:#fff;box-shadow:0 4px 24px rgba(0,0,0,0.06);text-align:center;gap:20px}
+.metric-value{font-size:88px;font-weight:800;color:${design.primary_color};line-height:1}
+.metric-unit{font-size:34px;font-weight:600;color:${design.accent_color}}
+.metric-label{font-size:30px;font-weight:600;color:${design.text_color}}
+.metric-desc{font-size:26px;color:${design.text_color}aa;line-height:1.5}
+.metric-trend{font-size:28px;font-weight:600;margin-top:auto}`;
+    const metrics = (data.metrics || []).slice(0, 3).map(m => `
+  <div class="metric-card">
+    <div class="metric-value">${escapeHtmlTemplate(m.value || '')}</div>
+    <div class="metric-unit">${escapeHtmlTemplate(m.unit || '')}</div>
+    <div class="metric-label">${escapeHtmlTemplate(m.label || '')}</div>
+    <div class="metric-desc">${escapeHtmlTemplate(m.desc || '')}</div>
+    <div class="metric-trend" style="color:${m.positive !== false ? '#10B981' : '#EF4444'}">${escapeHtmlTemplate(m.trend || '')}</div>
+  </div>`).join('');
+    return { css, html: `<div class="content">${metrics}\n</div>` };
+}
+function buildTimelineContent(design, data) {
+    const n = Math.min((data.milestones || []).length, 4);
+    const titleSz = n <= 3 ? '36px' : '32px';
+    const descSz = n <= 3 ? '30px' : '27px';
+    const kpiSz = n <= 3 ? '28px' : '26px';
+    const pad = n <= 3 ? '40px 32px' : '36px 24px';
+    const css = `.content{flex:1;display:flex;align-items:stretch;gap:20px}
+.milestone{flex:1;display:flex;flex-direction:column;padding:${pad};border-radius:16px;background:#fff;box-shadow:0 4px 20px rgba(0,0,0,0.06);gap:16px}
+.ms-date{display:inline-block;padding:8px 16px;border-radius:8px;background:${design.primary_color};color:#fff;font-size:24px;font-weight:700;align-self:flex-start}
+.ms-title{font-size:${titleSz};font-weight:700;color:${design.primary_color}}
+.ms-desc{font-size:${descSz};color:${design.text_color};line-height:1.55;flex:1}
+.ms-kpi{font-size:${kpiSz};font-weight:600;color:${design.accent_color};padding-top:16px;border-top:2px solid ${design.accent_light};margin-top:auto}`;
+    const milestones = (data.milestones || []).slice(0, 4).map((m) => `
+  <div class="milestone">
+    <div class="ms-date">${escapeHtmlTemplate(m.date || '')}</div>
+    <div class="ms-title">${escapeHtmlTemplate(m.title || '')}</div>
+    <div class="ms-desc">${escapeHtmlTemplate(m.desc || '')}</div>
+    ${m.kpi ? `<div class="ms-kpi">${escapeHtmlTemplate(m.kpi)}</div>` : ''}
+  </div>`).join('');
+    return { css, html: `<div class="content">${milestones}\n</div>` };
+}
+function buildProgressBarsContent(design, data) {
+    const css = `.content{flex:1;display:flex;flex-direction:column;justify-content:space-evenly;gap:0;padding:20px 0}
+.bar-item{display:flex;flex-direction:column;gap:10px}
+.bar-header{display:flex;justify-content:space-between;align-items:baseline}
+.bar-label{font-size:28px;font-weight:600;color:${design.text_color}}
+.bar-val{font-size:28px;font-weight:700;color:${design.primary_color}}
+.bar-track{width:100%;height:44px;background:${design.accent_light};border-radius:22px;overflow:hidden}
+.bar-fill{height:100%;border-radius:22px;background:linear-gradient(90deg,${design.primary_color},${design.accent_color})}
+.bar-detail{font-size:22px;color:${design.text_color}88;margin-top:-2px}`;
+    const bars = (data.bars || []).slice(0, 6).map(b => `
+  <div class="bar-item">
+    <div class="bar-header"><span class="bar-label">${escapeHtmlTemplate(b.label || '')}</span><span class="bar-val">${escapeHtmlTemplate(b.value || '')}</span></div>
+    <div class="bar-track"><div class="bar-fill" style="width:${Math.max(5, Math.min(100, b.percent || 50))}%"></div></div>
+    ${b.detail ? `<div class="bar-detail">${escapeHtmlTemplate(b.detail)}</div>` : ''}
+  </div>`).join('');
+    return { css, html: `<div class="content">${bars}\n</div>` };
+}
+function buildHeroStatContent(design, data) {
+    const css = `.content{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:24px}
+.hero-number{font-size:128px;font-weight:900;color:${design.primary_color};line-height:1}
+.hero-unit{font-size:48px;font-weight:600;color:${design.accent_color}}
+.hero-label{font-size:36px;font-weight:600;color:${design.text_color}}
+.hero-context{font-size:28px;color:${design.text_color}aa;text-align:center;max-width:800px;line-height:1.6}
+.supporting-row{display:flex;gap:60px;margin-top:48px}
+.sup-item{text-align:center}
+.sup-value{font-size:40px;font-weight:700;color:${design.primary_color}}
+.sup-label{font-size:24px;color:${design.text_color}aa;margin-top:8px}`;
+    const supporting = (data.supporting || []).slice(0, 3).map(s => `
+    <div class="sup-item">
+      <div class="sup-value">${escapeHtmlTemplate(s.value || '')}</div>
+      <div class="sup-label">${escapeHtmlTemplate(s.label || '')}</div>
+    </div>`).join('');
+    return {
+        css,
+        html: `<div class="content">
+  <div class="hero-number">${escapeHtmlTemplate(data.number || '')}</div>
+  <div class="hero-unit">${escapeHtmlTemplate(data.unit || '')}</div>
+  <div class="hero-label">${escapeHtmlTemplate(data.label || '')}</div>
+  <div class="hero-context">${escapeHtmlTemplate(data.context || '')}</div>
+  ${supporting ? `<div class="supporting-row">${supporting}</div>` : ''}
+</div>`,
+    };
+}
+function buildTwoColSplitContent(design, data) {
+    const css = `.content{flex:1;display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:stretch}
+.col{display:flex;flex-direction:column;gap:14px;justify-content:space-evenly}
+.col h2{font-size:36px;font-weight:700;color:${design.primary_color};margin-bottom:12px;padding-bottom:12px;border-bottom:3px solid ${design.accent_color}}
+.kv-item{display:flex;justify-content:space-between;align-items:center;padding:22px 24px;background:#fff;border-radius:12px;box-shadow:0 2px 12px rgba(0,0,0,0.04);font-size:28px}
+.kv-label{color:${design.text_color};font-weight:500}
+.kv-value{color:${design.primary_color};font-weight:700;font-size:28px}
+.col ul{list-style:none;display:flex;flex-direction:column;gap:10px}
+.col li{padding:16px 16px 16px 30px;position:relative;font-size:28px;line-height:1.5;background:#fff;border-radius:10px;box-shadow:0 1px 8px rgba(0,0,0,0.03)}
+.col li::before{content:"•";color:${design.accent_color};position:absolute;left:12px;font-weight:bold}`;
+    const leftItems = (data.leftItems || []).slice(0, 6).map(item => `
+    <div class="kv-item"><span class="kv-label">${escapeHtmlTemplate(item.label || '')}</span><span class="kv-value">${escapeHtmlTemplate(item.value || '')}</span></div>`).join('');
+    const rightBullets = (data.rightBullets || []).slice(0, 6).map(b => `<li>${escapeHtmlTemplate(b)}</li>`).join('');
+    return {
+        css,
+        html: `<div class="content">
+  <div class="col">
+    <h2>${escapeHtmlTemplate(data.leftTitle || '')}</h2>
+    ${leftItems}
+  </div>
+  <div class="col">
+    <h2>${escapeHtmlTemplate(data.rightTitle || '')}</h2>
+    <ul>${rightBullets}</ul>
+  </div>
+</div>`,
+    };
+}
+export function buildContentSlideHtml(design, title, layoutType, data, slideNum, variant = 0) {
+    const builders = {
+        cards: (d, dt) => buildCardsContent(d, dt),
+        bar_chart: (d, dt) => buildBarChartContent(d, dt),
+        donut_chart: (d, dt) => buildDonutChartContent(d, dt),
+        table: (d, dt) => buildTableContent(d, dt),
+        process_flow: (d, dt) => buildProcessFlowContent(d, dt),
+        big_numbers: (d, dt) => buildBigNumbersContent(d, dt),
+        timeline: (d, dt) => buildTimelineContent(d, dt),
+        progress_bars: (d, dt) => buildProgressBarsContent(d, dt),
+        hero_stat: (d, dt) => buildHeroStatContent(d, dt),
+        two_col_split: (d, dt) => buildTwoColSplitContent(d, dt),
+    };
+    const builder = builders[layoutType] || builders.cards;
+    const content = builder(design, data);
+    return wrapSlide(design, title, slideNum, content.css, content.html, variant);
+}
+export const PPT_CREATE_SYSTEM_PROMPT = `You are an elite PowerPoint presentation creator.
+You build NEW presentations using high-level layout builder tools.
+Each tool call creates ONE complete, professionally-designed slide.
+
+═══ AVAILABLE TOOLS ═══
+Lifecycle: powerpoint_create, powerpoint_save
+Slides: ppt_build_title_slide, ppt_build_layout_a, ppt_build_layout_b, ppt_build_layout_c, ppt_build_layout_d, ppt_build_layout_e, ppt_build_layout_f, ppt_build_closing_slide
+Chart: powerpoint_add_chart (use sparingly — prefer Layout D or F for data)
+Complete: complete (call AFTER saving)
+
+═══ WORKFLOW ═══
+1. powerpoint_create — launch PowerPoint
+2. ppt_build_title_slide — first slide
+3. ppt_build_layout_[a-f] — content slides (one tool call per slide)
+4. ppt_build_closing_slide — MUST be the absolute LAST content slide
+5. powerpoint_save — save file
+6. complete — report summary
+
+═══ CONTENT QUALITY ═══
+• ALL text MUST be in the same language as the user's instruction
+• Korean input → Korean titles, bullets, table headers, everything
+• NEVER use placeholder text like "[내용]", "XXX", "lorem ipsum"
+• Generate REAL, specific, professional content with concrete data
+
+═══ RULES ═══
+1. Build each slide COMPLETELY with one tool call before moving to the next
+2. NEVER go back to modify a previous slide
+3. NEVER use HTML tags in text — use \\n for line breaks
+4. The LAST tool before "complete" MUST be powerpoint_save
+5. If save fails with path error, try "C:\\\\temp\\\\presentation.pptx"`;
+export const PPT_CREATE_PLANNING_PROMPT = `You are a presentation structure planner.
+Given the user's instruction and CREATIVE GUIDANCE, create the execution plan.
+
+⚠ LANGUAGE RULE: ALL slide titles and content MUST be in the SAME language as the user's instruction.
+
+OUTPUT FORMAT:
+MODE: CREATE
+DESIGN DECISIONS:
+- COLOR_SCHEME: [MODERN_TECH, WARM_EXECUTIVE, CLEAN_MINIMAL, CORPORATE, NATURE_FRESH, BOLD_MODERN]
+- DESIGN_STYLE: [sidebar / top_band / clean]
+TOTAL_SLIDES: [number]
+SLIDE_PLAN:
+- Slide 1: [Title] | Tool: ppt_build_title_slide | Subtitle: [text]
+- Slide N: [Title] | Tool: [tool name] | Content: [summary]`;
+export function buildSlideSystemPrompt(toolName, title, direction, guidance, language) {
+    if (!toolName.startsWith('ppt_build_layout_'))
+        return '';
+    const langRule = language === 'ko'
+        ? 'ALL text MUST be in Korean.'
+        : 'ALL text MUST be in English.';
+    return `You are building slide "${title}" for a PowerPoint presentation.
+You have exactly ONE tool available. Call it with the correct parameters.
+
+═══ CONTENT DIRECTION ═══
+${direction}
+
+═══ CREATIVE CONTEXT ═══
+${guidance}
+
+═══ RULES ═══
+• ${langRule}
+• Generate REAL, specific, professional content with concrete data
+• NEVER use placeholder text
+• Call the tool EXACTLY ONCE with all required parameters`;
+}
+//# sourceMappingURL=powerpoint-create-prompts.js.map