hanseol-dev 5.0.2-dev.99 → 5.0.3-dev.10

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

@@ -1,53 +1,15 @@
-export const PPT_CREATE_ENHANCEMENT_PROMPT = `You are an elite presentation design consultant specializing in modern HTML/CSS slide design.
+export const PPT_DESIGN_PROMPT = `You are an elite presentation design consultant AND structure planner. Output ONLY valid JSON — no markdown, no explanation, no code fences.
 
-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: 10-15 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 3 cards or data items per slide — whitespace is premium
-- Vary layouts across slides: don't repeat the same card grid. Mix cards, tables, big-number spotlights, split layouts, gradient headers
-- NO images, NO external fonts, NO JavaScript
-
-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:
+Given the user's instruction, produce a JSON object that combines a cohesive visual design system with a detailed slide plan.
 
 {
   "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>",
+    "primary_color": "<deep color matching the topic>",
+    "accent_color": "<vibrant contrast color>",
+    "background_color": "<near-white or near-black or subtle tint>",
+    "text_color": "<must contrast with background>",
+    "accent_light": "<light tint of your accent color>",
+    "gradient_end": "<secondary gradient paired with primary>",
     "font_title": "Segoe UI",
     "font_body": "Malgun Gothic",
     "mood": "modern-minimal",
@@ -60,9 +22,9 @@ Given the user's instruction and CREATIVE GUIDANCE, produce a JSON object with t
   ]
 }
 
-═══ FIELD DEFINITIONS ═══
-• design.primary_color: Deep main color (headers, key elements)
-• design.accent_color: Vibrant contrast (highlights, CTAs)
+═══ DESIGN SYSTEM FIELD DEFINITIONS ═══
+• design.primary_color: Deep main color for headers and key elements
+• design.accent_color: Vibrant contrast color for highlights and 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
@@ -74,21 +36,53 @@ Given the user's instruction and CREATIVE GUIDANCE, produce a JSON object with t
 
 • slides[].type: One of "title", "content", "closing"
 • slides[].title: Slide title in user's language (max 60 chars)
-• slides[].content_direction: Detailed content direction (3-6 sentences). Include SPECIFIC data, names, numbers. Also describe the VISUAL APPROACH for this slide (e.g., "3-column card grid showing...", "big centered number with explanation below...", "comparison table with 5 rows...")
+• slides[].content_direction: The ACTUAL TEXT AND DATA to display on this slide (6-10 sentences).
+
+═══ COLOR PALETTE — CREATIVE PSYCHOLOGY ═══
+⚠ NEVER use placeholder/example colors. EVERY presentation must have a UNIQUE palette.
+Choose colors that evoke the RIGHT emotional response for the topic:
+  • Medical/Health: blues + greens (#0B5394, #27AE60) — trust, healing, precision
+  • Tech/AI/Startup: purples + cyans (#6C63FF, #00BCD4) — innovation, future, energy
+  • Finance/Investment: navy + gold (#1A237E, #F4A300) — authority, wealth, stability
+  • Education/Training: teal + orange (#00796B, #FF7043) — growth, warmth, curiosity
+  • Marketing/Creative: coral + purple (#FF6B6B, #7C3AED) — boldness, creativity, passion
+  • Environment/Sustainability: deep green + amber (#1B5E20, #FFA000) — nature, urgency
+  • Government/Policy: dark blue + red (#1A237E, #C62828) — authority, importance
+⚠ Choose colors that MATCH the specific topic. Generic blue = LAZY.
+⚠ Ensure accent_color has HIGH contrast with primary_color.
+⚠ If background is dark: text_color must be light (#E8E8E8+). If light: text_color must be dark (#1A1A2E-).
 
-═══ SLIDE TYPE GUIDELINES ═══
-Every presentation MUST have: 1 title slide (first) + 1 closing slide (last)
-Content slides between them — aim for 10-15 total slides.
-⚠ Current year: ${new Date().getFullYear()}. All dates, timelines, roadmaps MUST use ${new Date().getFullYear()} or later. NEVER use 2024 or older as "current".
+═══ MOOD VISUAL GUIDE ═══
+  • modern-minimal: Clean lines, subtle shadows, generous whitespace, thin borders, smooth radius (12-16px)
+  • bold-energetic: Strong gradients, deep shadows, thick accent bars, high contrast, punchy colors
+  • corporate-elegant: Refined spacing, subtle gradients, structured grids, sophisticated feel
+  • warm-friendly: Rounded corners (20px+), soft shadows, inviting spacing, gentle transitions
+  • academic-clean: Tight grids, minimal decoration, clear hierarchy, data-first design
 
-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
+═══ SLIDE STRUCTURE RULES ═══
+⚠ First slide MUST be type "title"
+⚠ Last slide MUST be type "closing" with "감사합니다"/"Thank You" as title
+⚠ Minimum 10, maximum 13 slides total. Aim for 10-12.
+⚠ FEWER, HIGHER-QUALITY slides > many mediocre slides. 12 excellent slides beats 15 mixed ones.
+⚠ Current year: \${new Date().getFullYear()}. For dates/timelines/roadmaps with no explicit year, use \${new Date().getFullYear()} or later. If the user specifies a year, USE THAT YEAR.
+
+═══ 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
 
 ═══ TEMPLATES ═══
 PITCH DECK (startup/사업계획서/피치덱): 12 slides
-  title → problem → solution → market size → product → business model → competition → traction → team → roadmap → investment ask → closing
+  title → problem → solution → market size → product(1) → product(2) → business model → competition → traction → team → financials → closing
 
 BUSINESS REPORT (보고서/분석/실적): 10 slides
   title → executive summary → key metrics → analysis → comparison → spotlight → breakdown → action plan → recommendations → closing
@@ -108,17 +102,16 @@ GENERAL (발표/프레젠테이션): 10 slides
     If a topic needs 2 visual elements, SPLIT IT INTO 2 SLIDES.
 
 GOOD content_direction (ONE visual each):
-  ✓ "3-column card grid: (1) 이미지 분석 - 의료 영상 정밀 분석, (2) 패턴 인식 - 질병 조기 발견, (3) 예측 분석 - 발생 확률 예측"
-  ✓ "Comparison table: 4 rows (MediAI, CompA, CompB, CompC) × 3 columns (정확도, 속도, 데이터량). Highlight MediAI row."
-  ✓ "3 big metric numbers: $45B 시장 규모, 28% 연평균 성장률, 5% 1년 내 점유율 목표"
-  ✓ "Bar chart showing revenue growth: 2025 $1.2M → 2026 $3.6M → 2027 $10.8M"
-  ✓ "Pricing table: 3 rows (Basic/Pro/Enterprise) × 4 columns (플랜, 대상, 월 가격, 기능)"
+  ✓ "총매출 1,250억원(전년비 15%↑), 영업이익 180억원(14.4%), 순이익 120억원. Layout: bar chart"
+  ✓ "Comparison table: 4 rows × 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"
+  ✓ "목표 달성률: 매출 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:
@@ -126,92 +119,297 @@ BAD content_direction (MULTIPLE visuals = OVERFLOW):
   • "시장분석" → "시장 규모" (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.
+  • "경쟁분석" → "경쟁사 비교" (comparison table ONLY) + "SWOT 분석" (2×2 grid ONLY)
   • "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)
+  • "제품/플랫폼" → "핵심 기능" (3 card grid with feature descriptions)
+  • "마케팅/GTM 전략" → "마케팅 채널 전략" (3 cards) + "성과 지표" (metrics or table)
+  • "로드맵" → "단기 로드맵" (3 milestone cards) + "장기 비전" (3 milestone cards)
   • "팀 소개" (4+ members) → "창업진 소개" (2-3 people) + "핵심 팀원" (2-3 people)
-  This keeps each slide clean with generous whitespace.
-
-═══ CONTENT DENSITY LIMITS — ABSOLUTE HARD CAPS ═══
-⚠⚠⚠ These limits are ENFORCED by the rendering system. Exceeding them = content CLIPPED.
-⚠ MAXIMUM 3 descriptive cards per slide. 4 cards = OVERFLOW. (4 simple stat cards with ONE number each are OK)
-⚠ Team/People: MAXIMUM 3 people per slide. 4 people = split into 2 slides.
-⚠ Tables: maximum 4 data rows × 4 columns.
-⚠ Timeline/Roadmap: MAXIMUM 3-4 milestones per slide. 5+ milestones = text too small to read.
-  If a roadmap has 6+ items, SPLIT into "단기 로드맵" (3 items) + "장기 비전" (3 items).
-⚠ Data/metrics: maximum 3 big numbers per slide.
-⚠ content_direction: max 2-3 sentences. ONE visual layout + specific content items.
-⚠ EVERY item in content_direction counts: 3 cards with 3 sub-bullets each = 12 items = TOO MANY. Keep total visible items ≤ 9.
+
+═══ 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 SHORT bullets (max 25 chars each) with specific numbers.
+⚠ Tables: 3-4 data rows × 3-4 columns. Fill EVERY cell with real data. Column headers MUST be descriptive — NEVER generic "Column 1".
+⚠ Timeline/Roadmap: 3 milestones (MAX 3) with dates, descriptions, and key metrics.
+⚠ Process/Flow: 3-4 steps (MAX 4) — each step with short title + 1-sentence description.
+⚠ Data/metrics: 3 big numbers with trend indicators AND 1-sentence context.
+⚠ Cards: 3-4 cards, each with title + 3 bullets (MAX 3, keep short) + stat metric.
+⚠ Donut/Pie charts: 3-4 segments with labels + summary.
+⚠ The more SPECIFIC DATA you include in content_direction, the better the slide will look.
+
+═══ content_direction QUALITY RULES ═══
+⚠ 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.
+  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% 성장하며 최대 성장 동력. Layout: bar chart"
+  ✓ GOOD: "3 core services: (1) 클라우드 인프라 — 하이브리드 클라우드 구축, AWS/Azure 호환, 99.9% SLA 보장, 50+ 기업 고객 (2) AI 솔루션 — 자연어처리/영상분석, 진단 정확도 98.2%, 월 100만건 처리 (3) 컨설팅 — 디지털 전환 자문, 평균 ROI 250%, 12개월 효과. Layout: 3-column cards"
+  ✗ BAD: "클라우드, AI, 컨설팅 3개 서비스" ← Too sparse!
+  ✗ BAD: "왼쪽에 개요 텍스트, 오른쪽에 카드" ← Layout instruction, NOT content!
+  ✗ BAD: "#accent_light 배경, #primary 글씨" ← CSS instruction, NOT 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.
+⚠ Overview/agenda slides: MAXIMUM 5 items. Numbered list (1-5) or compact 2-column grid.
   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.
+  If 10+ sections, group related topics: "시장 및 경쟁" instead of separate "시장 분석" + "경쟁 분석".
 
-═══ 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 ═══
-⚠ Vary the visual approach across slides. Do NOT use the same card-grid layout for every slide.
-  Suggested variety: hero section, 2-column split, 3-card row, 2×2 grid, big-number spotlight,
-  comparison table, timeline with icons, full-width data bar, centered quote/highlight
-
-═══ 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.
+═══ LAYOUT VARIETY — 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
+  - "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 (→)
+  - "big numbers": 2-3 large metric spotlights (72-96px) with trend indicators
+  - "2-column split": left panel + right content
+  - "timeline": 3-4 milestone steps horizontal with dates
+  - "progress bars": horizontal bars showing completion 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.
 
 ═══ 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: include SPECIFIC data, names, numbers AND visual layout hints AND item count
-⚠ HARD MAXIMUM: 15 slides total. Slides beyond 15 are DISCARDED by the system. Aim for 10-12.
+⚠ content_direction: MUST contain ACTUAL TEXT/DATA. Layout hint is optional at the END.
+⚠ content_direction that is ONLY layout/visual instructions (no real data) = FAILURE.
+⚠ HARD MAXIMUM: 13 slides total. Slides beyond 13 are DISCARDED by the system.
 ⚠ 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 buildSlideHtmlPrompt(slideTitle, contentDirection, design, slideIndex, totalSlides, language) {
+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 < 2) {
+                return `WRONG LAYOUT: Expected CSS bar chart with flex-end + at least 2 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 < 2) {
+                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[^"]*"/gi) || []).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;
+}
+export function buildDirectHtmlPrompt(title, contentDirection, design, slideIndex, totalSlides, language, layoutType) {
+    const langRule = language === 'ko'
+        ? 'ALL visible text MUST be in Korean. Write naturally in Korean. Never use Chinese characters (漢字).'
+        : 'ALL visible text MUST be in English.';
+    const layoutCss = getLayoutSpecificCss(layoutType, design);
+    const styleVariants = [
+        `Background: ${design.background_color}. Cards/elements use white background with box-shadow.`,
+        `Add a bold accent bar at top (height:4px, linear-gradient(90deg, ${design.accent_color}, ${design.primary_color})). Background: ${design.background_color}.`,
+        `Subtle gradient background: linear-gradient(150deg, ${design.background_color} 0%, ${design.accent_light} 50%, ${design.background_color} 100%). Stronger shadows.`,
+    ];
+    const styleGuide = styleVariants[slideIndex % styleVariants.length];
+    return `You are a world-class web designer creating a presentation slide as a complete HTML page.
+Output ONLY the complete HTML document (<!DOCTYPE html> to </html>). No explanation, no markdown fences.
+
+═══ SLIDE ═══
+Title: "${title}" | Slide ${slideIndex + 1} of ${totalSlides}
+
+═══ CONTENT (what to show — generate REAL content based on this, never display it literally) ═══
+${contentDirection}
+
+═══ DESIGN SYSTEM ═══
+Primary: ${design.primary_color} | Accent: ${design.accent_color} | BG: ${design.background_color}
+Text: ${design.text_color} | Light: ${design.accent_light} | Gradient: ${design.gradient_end}
+Title Font: ${design.font_title} | Body Font: ${design.font_body} | Mood: ${design.mood}
+
+═══ VISUAL STYLE FOR THIS SLIDE ═══
+${styleGuide}
+
+═══ MANDATORY CSS BOILERPLATE (copy exactly 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 { 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; }
+
+═══ STRUCTURE: body has EXACTLY 2 children ═══
+  → .slide-title (flex:0 0 auto) containing h1 with title text + optional accent bar
+  → .content (flex:1) stretching to fill ALL remaining vertical space
+⚠ .content class name is REQUIRED for post-processing.
+⚠ ALL layout elements MUST be DIRECT children of .content — NO wrapper divs.
+⚠ NEVER use position:absolute. Flexbox/grid ONLY.
+
+${layoutCss}
+
+═══ RULES ═══
+• ${langRule}
+• Complete HTML: <!DOCTYPE html> through </html>. ALL styling in <style>.
+• NO <img>, NO external resources, NO JavaScript, NO external fonts.
+• System fonts ONLY. CSS for visuals: gradients, shapes, shadows, borders.
+• Title: 48-64px bold. Body: 26-32px. MINIMUM any text: 26px. Reduce items instead of shrinking.
+• Content fills 85-95% of 1080px height. Empty space = FAILURE.
+• NEVER use justify-content:center on .content (creates dead space). Use stretch/space-evenly.
+• Use gradients, box-shadow (0 4px 20px rgba(0,0,0,0.06)), border-radius (12-20px).
+• Generate REAL professional content. No placeholders. Specific numbers and data.
+• If user specified a year, USE THAT YEAR. Default to ${new Date().getFullYear()} only when no year given.
+• Page number: bottom-right "${slideIndex + 1}" (12px, opacity 0.4).
+
+Output the complete HTML now.`;
+}
+export function validateSlideHtml(html, layoutType) {
+    if (!html.includes('<!DOCTYPE') && !html.includes('<!doctype')) {
+        return { pass: false, feedback: 'Missing <!DOCTYPE html> declaration. Start with <!DOCTYPE html><html>.' };
+    }
+    if (!html.includes('<html') || !html.includes('</html>')) {
+        return { pass: false, feedback: 'Missing <html> or </html> tags. Output must be a complete HTML document.' };
+    }
+    const layoutFeedback = checkLayoutCompliance(html, layoutType);
+    if (layoutFeedback) {
+        return { pass: false, feedback: layoutFeedback };
+    }
+    if (/<img\s/i.test(html)) {
+        return { pass: false, feedback: 'Forbidden: <img> tags are not allowed. Use CSS gradients, shapes, and backgrounds instead.' };
+    }
+    const absCount = (html.match(/position\s*:\s*absolute/gi) || []).length;
+    if (absCount > 6) {
+        return { pass: false, feedback: `Too many position:absolute (${absCount}). Use flexbox/grid for main layout. Absolute ok for small decorative elements.` };
+    }
+    if (/https?:\/\/(?!.*$)/i.test(html) && !/https?:\/\/[^"')\s]*\.(nip\.io|localhost)/i.test(html)) {
+        const externalUrls = html.match(/url\(\s*['"]?https?:\/\//gi) || [];
+        if (externalUrls.length > 0) {
+            return { pass: false, feedback: 'Forbidden: External URLs detected in CSS url(). No external resources allowed.' };
+        }
+    }
+    const placeholderPatterns = [
+        /Card title \(2-5 words\)/i,
+        /Detail with number\/data/i,
+        /single emoji/i,
+        /Display value \(e\.g\./i,
+        /1-2 sentence key insight/i,
+        /Category name/i,
+        /Another detail/i,
+        /Third point/i,
+        /Fourth point/i,
+        /Brief context/i,
+        /Segment name/i,
+    ];
+    for (const pattern of placeholderPatterns) {
+        if (pattern.test(html)) {
+            return { pass: false, feedback: `Placeholder text detected: "${pattern.source}". Generate REAL content, not schema examples.` };
+        }
+    }
+    const textElements = (html.match(/<(p|li|td|th|span|div|h[1-6])[^>]*>[^<]{2,}/gi) || []).length;
+    if (textElements < 5) {
+        return { pass: false, feedback: `Low content density: only ${textElements} text elements found. Need at least 5 text-bearing elements for a complete slide.` };
+    }
+    const visibleText = html.replace(/<style[\s\S]*?<\/style>/gi, '')
+        .replace(/<[^>]+>/g, ' ')
+        .replace(/\s+/g, ' ')
+        .trim();
+    if (visibleText.length > 2200) {
+        return { pass: false, feedback: `Content overflow risk: ${visibleText.length} chars of visible text. Reduce to under 2200 chars to prevent overflow on 1920×1080.` };
+    }
+    const smallFonts = html.match(/font-size\s*:\s*(\d+)px/gi) || [];
+    for (const match of smallFonts) {
+        const size = parseInt(match.replace(/[^0-9]/g, ''), 10);
+        if (size > 0 && size < 18 && size !== 12) {
+            return { pass: false, feedback: `Font too small: found font-size:${size}px. Minimum allowed is 18px (except 12px for page numbers). Increase font size or reduce content.` };
+        }
+    }
+    return { pass: true, feedback: '' };
+}
+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_CARDS',
-        'DARK_SECTION',
-        'LEFT_RIGHT_SPLIT',
-        'GRADIENT_HEADER',
-        'FULL_GRADIENT',
+        'LIGHT',
+        'ACCENT_HEADER',
+        'GRADIENT_BG',
     ];
     const styleVariant = styleVariants[slideIndex % styleVariants.length];
     const styleGuide = {
-        'LIGHT_CARDS': `Use ${design.background_color} as page background with white cards (background:#fff, border-radius:16px, box-shadow:0 4px 20px rgba(0,0,0,0.06)).`,
-        'DARK_SECTION': `Use a dark gradient header area (background: linear-gradient(135deg, ${design.primary_color}, ${design.gradient_end}); height ~300px) with white text for the title area. The content area below uses ${design.background_color} with cards.`,
-        'LEFT_RIGHT_SPLIT': `Split the slide into 2 columns: LEFT panel (width:460px, background: linear-gradient(180deg, ${design.primary_color}, ${design.gradient_end})) with the title in white text, RIGHT area (flex:1, background:${design.background_color}) with the main content. Both full-height.`,
-        'GRADIENT_HEADER': `Add a bold accent bar at the top (height:8px, background: linear-gradient(90deg, ${design.accent_color}, ${design.primary_color})). Title goes directly below the bar (no large background band — just the accent bar + title text). Content uses ${design.background_color}. ⚠ The accent bar is ONLY 8px tall — do NOT create a large colored header section.`,
-        'FULL_GRADIENT': `Use a subtle full-page gradient (background: linear-gradient(150deg, ${design.background_color} 0%, ${design.accent_light} 50%, ${design.background_color} 100%)). Cards float with stronger shadows (box-shadow: 0 8px 32px rgba(0,0,0,0.08)).`,
+        '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.
@@ -220,9 +418,14 @@ Output ONLY the complete HTML document — nothing else. No explanation, no mark
 Title: "${slideTitle}"
 Slide ${slideIndex + 1} of ${totalSlides}
 
-═══ CONTENT DIRECTION ═══
+═══ 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}
@@ -251,6 +454,7 @@ body {
 
 ⚠ 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>
@@ -261,71 +465,793 @@ body {
 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 bottom space = FAILURE.
+⚠⚠⚠ 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:
+MANDATORY STRUCTURE (body has EXACTLY 2 direct children):
   body (display:flex, flex-direction:column, height:1080px, padding:60px 80px)
-    → .slide-title (auto height — title text)
+    → .slide-title (flex:0 0 auto — title text only, NO extra margin-bottom)
     → .content (flex:1 — STRETCHES to fill ALL remaining vertical space)
 
-The .content div MUST use flex:1 to stretch. Then its children stretch too:
-
-CARDS: .content { flex:1; display:flex; gap:24px; }
-  .card { flex:1; display:flex; flex-direction:column; justify-content:space-between; padding:40px; }
-  Each card: icon/number at top, title+desc in middle, metric/accent-bar at bottom.
-  Cards MUST be tall (flex:1 stretches them to fill .content height).
-
-TABLES: .content { flex:1; display:flex; flex-direction:column; }
-  table { width:100%; } th { padding:20px 24px; background:${design.primary_color}; color:#fff; }
-  td { padding:24px 20px; font-size:22px; } Add a SUMMARY BAR below the table.
-
-TIMELINES: .content { flex:1; display:flex; align-items:stretch; gap:32px; }
-  Each milestone: tall card (flex:1) with icon circle, title, year, description, and KPI at bottom.
-
-2-COL SPLIT: .content { flex:1; display:grid; grid-template-columns:1fr 1fr; gap:32px; }
-  Left: chart or big metric. Right: detail cards. Both stretch full height.
+⚠ 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.
 
-BIG NUMBERS: .content { flex:1; display:flex; gap:40px; align-items:stretch; }
-  Each: flex:1 card with huge number (72-96px), label, and description paragraph.
-
-BAR CHARTS: .content { flex:1; display:flex; flex-direction:column; }
-  .chart-area { flex:1; display:flex; align-items:flex-end; gap:48px; padding:40px; }
-  Each bar: flex:1, label ABOVE the bar (never beside it). Min label width: 120px.
-  ⚠ Bar labels: use min-width:120px and text-align:center to prevent character-by-character wrapping.
+${getLayoutSpecificCss(layoutType, design)}
 
 ═══ DESIGN RULES ═══
-1. Title: 48-64px bold. Body: 24-32px. MINIMUM any visible text: 22px. If text would be <22px, REDUCE ITEM COUNT instead. Card descriptions: 22-26px. Card titles: 28-36px.
+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. ONE visual approach per slide — cards OR table OR chart OR metrics. Never combine 2+.
-4. HARD LIMITS: MAX 3 cards, MAX 3 horizontal items, MAX 4 table rows, MAX 4 timeline steps.
-   ⚠ If content_direction lists more items, select the TOP 3 most important and discard the rest.
-5. ZERO OVERLAP: Never let absolute-positioned elements overlap text. Use flexbox with gap.
-6. Decorative shapes: position:absolute with POSITIVE values only. Keep WITHIN viewport.
-7. PIE/DONUT: conic-gradient on border-radius:50% div ONLY. No clip-path or rotated divs.
-8. 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 or big number cards instead.
-11. ⚠ For financial/revenue slides: use 3 big metric cards (year→amount) instead of charts. Charts in CSS look broken.
-9. Table headers: dark background (${design.primary_color}) with WHITE text. Never transparent.
+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 >200px of empty whitespace.
+⚠ 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.
-⚠ If you have only 3 cards + a small header, the cards should be TALL (flex:1) with generous internal padding — not short with dead space below.
+⚠ 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
-• LESS IS MORE — generous spacing, large padding, clean visual hierarchy
-• Current year is ${new Date().getFullYear()}. Use this year for dates, timelines, and roadmaps. NEVER use 2024 or older years as "current".
-• ALL content MUST fit within 1080px height. If in doubt, use FEWER items. 3 cards > 4 cards. 3 rows > 4 rows.
+• 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 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 + 3 bullets (MAX 3, keep each under 25 chars) + 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-5 bars (MAX 5). height: 10-90 (tallest=85, others proportional). Values with units. Keep labels under 15 chars.`,
+        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": ["Company Name", "Market Share", "Key Strength", "Accuracy"],
+  "rows": [["data", "data", "data", "data"]],
+  "highlightRow": 0,
+  "summary": "1-2 sentence summary"
+}
+RULES: 3-4 columns. 4-5 rows. ALL cells real data. highlightRow: 0-indexed or null.
+⚠ headers MUST be meaningful column names describing the data — NEVER use generic "Column 1", "Column 2" etc.`,
+        process_flow: `{
+  "steps": [
+    { "title": "Step name (2-4 words)", "desc": "2-3 sentence description with details", "detail": "Duration or metric" }
+  ]
+}
+RULES: 3-4 steps (MAX 4). 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 milestones (MAX 3). Each with date, description, and KPI target.`,
+        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-4 key-value items. Right: 3-4 detailed bullets. Keep each bullet under 30 chars.`,
+    };
+    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;
+    const jsonStr = JSON.stringify(parsed);
+    const ellipsisMatches = jsonStr.match(/"\.\.\."|\u2026/g) || [];
+    const totalStringValues = jsonStr.match(/"[^"]+"/g) || [];
+    if (ellipsisMatches.length > 0 && totalStringValues.length > 0) {
+        const ellipsisRatio = ellipsisMatches.length / totalStringValues.length;
+        if (ellipsisRatio > 0.3) {
+            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 getCardTextColor(design) {
+    const hex = (design.background_color || '#f8f9fa').replace('#', '');
+    const r = parseInt(hex.slice(0, 2), 16) || 200;
+    const g = parseInt(hex.slice(2, 4), 16) || 200;
+    const b = parseInt(hex.slice(4, 6), 16) || 200;
+    const luminance = (0.299 * r + 0.587 * g + 0.114 * b) / 255;
+    return luminance < 0.5 ? '#2D3748' : design.text_color;
+}
+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' : 'align-content:center';
+    const cardPad = is2x2 ? '28px 24px' : '40px 32px';
+    const cardGap = is2x2 ? '10px' : '16px';
+    const h2Size = is2x2 ? '32px' : '36px';
+    const liSize = is2x2 ? '26px' : '28px';
+    const liMargin = is2x2 ? '8px' : '12px';
+    const cardText = getCardTextColor(design);
+    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;color:${cardText}}
+.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 = 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 cardText = getCardTextColor(design);
+    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:${cardText};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, 5).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);color:${getCardTextColor(design)}}
+.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:${getCardTextColor(design)};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 cardText = getCardTextColor(design);
+    const maxCols = Math.min((data.headers || []).length, 4);
+    const css = `.content{flex:1;display:flex;flex-direction:column;justify-content:center}
+.data-table{width:100%;border-collapse:collapse;background:#fff;box-shadow:0 4px 12px rgba(0,0,0,0.05);border-radius:12px;overflow:hidden;table-layout:fixed}
+.data-table th{background:${design.primary_color};color:#fff;font-size:28px;text-align:left;padding:22px 28px;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+.data-table td{font-size:28px;color:${cardText};padding:22px 28px;border-bottom:1px solid ${design.accent_light};overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+.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:20px;padding:16px 24px;background:${design.accent_light};border-radius:12px;font-size:26px;color:${cardText};line-height:1.5}`;
+    const headers = (data.headers || []).slice(0, maxCols).map(h => `<th>${escapeHtmlTemplate(String(h || '').slice(0, 25))}</th>`).join('');
+    const rows = (data.rows || []).slice(0, 5).map((row, ri) => {
+        const cls = ri === data.highlightRow ? ' class="highlight"' : '';
+        const cells = (row || []).slice(0, maxCols).map(c => `<td>${escapeHtmlTemplate(String(c || '').slice(0, 35))}</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, 4);
+    const cardText = getCardTextColor(design);
+    const titleSz = n <= 3 ? '34px' : '32px';
+    const descSz = n <= 3 ? '28px' : '26px';
+    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:${cardText};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, 4);
+    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 cardText = getCardTextColor(design);
+    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:56px 36px;border-radius:20px;background:#fff;box-shadow:0 6px 28px rgba(0,0,0,0.08);text-align:center;gap:20px;border-top:4px solid ${design.accent_color}}
+.metric-value{font-size:100px;font-weight:800;color:${design.primary_color};line-height:1}
+.metric-unit{font-size:36px;font-weight:600;color:${design.accent_color}}
+.metric-label{font-size:32px;font-weight:600;color:${cardText}}
+.metric-desc{font-size:26px;color:${cardText}aa;line-height:1.5;max-width:90%}
+.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 titleSz = '38px';
+    const descSz = '30px';
+    const kpiSz = '28px';
+    const pad = '40px 36px';
+    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:${getCardTextColor(design)};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, 3).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:24px;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;color:${getCardTextColor(design)}}
+.kv-label{color:${getCardTextColor(design)};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);color:${getCardTextColor(design)}}
+.col li::before{content:"•";color:${design.accent_color};position:absolute;left:12px;font-weight:bold}`;
+    const leftItems = (data.leftItems || []).slice(0, 4).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, 4).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);
+}
+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) + 3 bullets (26px, MAX 3 per card, each under 25 chars) + 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 + 3 bullet points with numbers/data + bottom metric. A card with only 1 bullet = 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-5 bars (MAX 5). Bar height:44px. Use gradient fills. Labels under 15 chars. 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 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.