lacvet/AX-Copilot-Codex
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Initial commit to new repository

Browse Source
This commit is contained in:
lacvet
2026-04-03 18:22:19 +09:00
commit 4458bb0f52
7672 changed files with 452440 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

734
src/AxCopilot/Services/Agent/TemplateService.cs Normal file
View File

@@ -0,0 +1,734 @@
using Markdig;
namespace AxCopilot.Services.Agent;
/// <summary>
/// 문서 디자인 템플릿 서비스.
/// 테마 무드(현대적, 전문가, 창의적 등)에 따라 CSS 스타일을 제공합니다.
/// HtmlSkill, DocxSkill 등에서 호출하여 문서 생성 시 적용합니다.
/// </summary>
public static class TemplateService
{
/// <summary>사용 가능한 테마 무드 목록.</summary>
public static readonly TemplateMood[] AvailableMoods =
[
new("modern", "현대적", "🔷", "깔끔한 라인, 넓은 여백, 미니멀한 색상 — 테크 기업 스타일"),
new("professional", "전문가", "📊", "신뢰감 있는 네이비 톤, 데이터 중심 레이아웃 — 비즈니스 보고서"),
new("creative", "아이디어", "🎨", "생동감 있는 그라데이션, 카드 레이아웃 — 브레인스토밍·기획서"),
new("minimal", "미니멀", "◻️", "극도로 절제된 흑백, 타이포그래피 중심 — 학술·논문 스타일"),
new("elegant", "우아한", "✨", "세리프 서체, 골드 포인트, 격식 있는 레이아웃 — 공식 문서"),
new("dark", "다크 모드", "🌙", "어두운 배경, 고대비 텍스트 — 개발자·야간 리딩"),
new("colorful", "컬러풀", "🌈", "밝고 활기찬 멀티 컬러, 둥근 모서리 — 프레젠테이션·요약"),
new("corporate", "기업 공식", "🏢", "보수적인 레이아웃, 로고 영역, 페이지 번호 — 사내 공식 보고서"),
new("magazine", "매거진", "📰", "멀티 컬럼, 큰 히어로 헤더, 인용 강조 — 뉴스레터·매거진"),
new("dashboard", "대시보드", "📈", "KPI 카드, 차트 영역, 그리드 레이아웃 — 데이터 대시보드"),
];
// ── 커스텀 무드 저장소 ──
private static readonly Dictionary<string, Models.CustomMoodEntry> _customMoods = new(StringComparer.OrdinalIgnoreCase);
/// <summary>커스텀 무드를 로드합니다 (앱 시작 시 SettingsService에서 호출).</summary>
public static void LoadCustomMoods(IEnumerable<Models.CustomMoodEntry> entries)
{
_customMoods.Clear();
foreach (var e in entries)
if (!string.IsNullOrWhiteSpace(e.Key))
_customMoods[e.Key] = e;
}
/// <summary>내장 + 커스텀 무드를 합친 전체 목록.</summary>
public static IReadOnlyList<TemplateMood> AllMoods
{
get
{
var list = new List<TemplateMood>(AvailableMoods);
foreach (var cm in _customMoods.Values)
list.Add(new TemplateMood(cm.Key, cm.Label, cm.Icon, cm.Description));
return list;
}
}
/// <summary>무드 키로 CSS 스타일을 반환합니다. 없으면 modern 기본값. 공통 CSS가 자동 첨부됩니다.</summary>
public static string GetCss(string moodKey)
{
// 커스텀 무드 우선 확인
if (_customMoods.TryGetValue(moodKey, out var custom))
return custom.Css + "\n" + CssShared;
var moodCss = moodKey switch
{
"modern" => CssModern,
"professional" => CssProfessional,
"creative" => CssCreative,
"minimal" => CssMinimal,
"elegant" => CssElegant,
"dark" => CssDark,
"colorful" => CssColorful,
"corporate" => CssCorporate,
"magazine" => CssMagazine,
"dashboard" => CssDashboard,
_ => CssModern,
};
return moodCss + "\n" + CssShared;
}
/// <summary>무드 키로 TemplateMood를 반환합니다.</summary>
public static TemplateMood? GetMood(string key)
{
var builtin = Array.Find(AvailableMoods, m => m.Key == key);
if (builtin != null) return builtin;
return _customMoods.TryGetValue(key, out var cm)
? new TemplateMood(cm.Key, cm.Label, cm.Icon, cm.Description)
: null;
}
/// <summary>LLM 시스템 프롬프트에 삽입할 무드 목록 설명.</summary>
public static string GetMoodListForPrompt()
{
var sb = new System.Text.StringBuilder();
sb.AppendLine("Available document design moods (pass as 'mood' parameter to html_create):");
foreach (var m in AllMoods)
sb.AppendLine($" - \"{m.Key}\": {m.Label} — {m.Description}");
return sb.ToString();
}
/// <summary>Markdown 텍스트를 무드 CSS가 적용된 HTML 문서로 변환합니다.</summary>
public static string RenderMarkdownToHtml(string markdown, string moodKey = "modern")
{
var pipeline = new MarkdownPipelineBuilder()
.UseAdvancedExtensions()
.Build();
var bodyHtml = Markdown.ToHtml(markdown, pipeline);
var css = GetCss(moodKey);
return $"""
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<style>{css}</style>
</head>
<body>
<div class="container">
{bodyHtml}
</div>
</body>
</html>
""";
}
/// <summary>
/// HTML 본문에서 워크스페이스 하위 파일/폴더 경로를 파란색으로 강조합니다.
/// 코드 블록(&lt;code&gt;, &lt;pre&gt;) 내부의 경로 텍스트를 감지하여 파란색 스타일을 적용합니다.
/// </summary>
public static string HighlightFilePaths(string html, string? workFolder)
{
if (string.IsNullOrEmpty(workFolder) || string.IsNullOrEmpty(html))
return html;
// <code> 태그 내부의 텍스트 중 파일/폴더 경로 패턴을 감지하여 파란색으로 감싸기
// 패턴: 슬래시/백슬래시를 포함한 경로 또는 확장자가 있는 파일명
var pathPattern = new System.Text.RegularExpressions.Regex(
@"(?<![""'=/>])(\b[A-Za-z]:\\[^\s<>""]+|" + // 절대 경로: C:\folder\file.ext
@"\.{0,2}/[^\s<>""]+(?:\.[a-zA-Z]{1,10})?|" + // 상대 경로: ./src/file.cs, ../util.py
@"\b[\w\-]+(?:/[\w\-\.]+)+(?:\.[a-zA-Z]{1,10})?|" + // 폴더/파일: src/utils/helper.cs
@"\b[\w\-]+\.(?:cs|py|js|ts|tsx|jsx|json|xml|html|htm|css|md|txt|yml|yaml|toml|sh|bat|ps1|csproj|sln|docx|xlsx|pptx|pdf|csv)\b)", // 파일명.확장자
System.Text.RegularExpressions.RegexOptions.Compiled);
// <pre> 및 <code> 블록 외부의 텍스트에서만 치환
// 간단 접근: 모든 텍스트 노드에서 경로를 감지
return pathPattern.Replace(html, match =>
{
var path = match.Value;
// 이미 HTML 태그 내부이거나 href/src 속성값이면 건너뛰기
var prefix = html[..match.Index];
if (prefix.Length > 0)
{
var lastLt = prefix.LastIndexOf('<');
var lastGt = prefix.LastIndexOf('>');
if (lastLt > lastGt) return path; // 태그 속성 내부
}
return $"<span style=\"color:#3B82F6;font-weight:500;\">{path}</span>";
});
}
/// <summary>무드의 주요 색상을 반환합니다 (갤러리 미리보기용).</summary>
public static MoodColors GetMoodColors(string moodKey)
{
return moodKey switch
{
"modern" => new("#f5f5f7", "#ffffff", "#1d1d1f", "#6e6e73", "#0066cc", "#e5e5e7"),
"professional" => new("#f0f2f5", "#ffffff", "#1a365d", "#4a5568", "#2c5282", "#e2e8f0"),
"creative" => new("#faf5ff", "#ffffff", "#2d3748", "#718096", "#7c3aed", "#e9d5ff"),
"minimal" => new("#fafafa", "#ffffff", "#111111", "#555555", "#333333", "#e0e0e0"),
"elegant" => new("#fefdf8", "#fffef9", "#2c1810", "#6b5c4f", "#b8860b", "#e8e0d4"),
"dark" => new("#0d1117", "#161b22", "#e6edf3", "#8b949e", "#58a6ff", "#30363d"),
"colorful" => new("#f0f9ff", "#ffffff", "#1e293b", "#64748b", "#3b82f6", "#e0f2fe"),
"corporate" => new("#f3f4f6", "#ffffff", "#1f2937", "#6b7280", "#1e40af", "#e5e7eb"),
"magazine" => new("#f9fafb", "#ffffff", "#111827", "#6b7280", "#dc2626", "#f3f4f6"),
"dashboard" => new("#0f172a", "#1e293b", "#f1f5f9", "#94a3b8", "#3b82f6", "#334155"),
_ => new("#f5f5f7", "#ffffff", "#1d1d1f", "#6e6e73", "#0066cc", "#e5e5e7"),
};
}
/// <summary>무드 갤러리용 색상 정보.</summary>
public record MoodColors(string Background, string CardBg, string PrimaryText, string SecondaryText, string Accent, string Border);
// ════════════════════════════════════════════════════════════════════
// CSS 템플릿 정의
// ════════════════════════════════════════════════════════════════════
#region Modern — 현대적
private const string CssModern = """
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
* { margin:0; padding:0; box-sizing:border-box; }
body { font-family: 'Inter', 'Segoe UI', 'Malgun Gothic', sans-serif;
background: #f5f5f7; color: #1d1d1f; line-height: 1.75; padding: 48px 24px; }
.container { max-width: 880px; margin: 0 auto; background: #fff;
border-radius: 16px; padding: 56px 52px;
box-shadow: 0 4px 24px rgba(0,0,0,0.06); }
h1 { font-size: 28px; font-weight: 700; letter-spacing: -0.5px; color: #1d1d1f; margin-bottom: 4px; }
h2 { font-size: 20px; font-weight: 600; margin: 36px 0 14px; color: #1d1d1f;
padding-bottom: 8px; border-bottom: 2px solid #e5e5ea; }
h3 { font-size: 16px; font-weight: 600; margin: 24px 0 10px; color: #0071e3; }
.meta { font-size: 12px; color: #86868b; margin-bottom: 28px; letter-spacing: 0.3px; }
p { margin: 10px 0; font-size: 14.5px; }
table { width: 100%; border-collapse: collapse; margin: 20px 0; font-size: 13.5px;
border-radius: 10px; overflow: hidden; }
th { background: #f5f5f7; text-align: left; padding: 12px 14px; font-weight: 600;
color: #1d1d1f; border-bottom: 2px solid #d2d2d7; }
td { padding: 10px 14px; border-bottom: 1px solid #f0f0f2; }
tr:hover td { background: #f9f9fb; }
ul, ol { margin: 10px 0 10px 28px; font-size: 14.5px; }
li { margin: 5px 0; }
code { background: #f5f5f7; padding: 2px 8px; border-radius: 6px; font-size: 13px;
font-family: 'SF Mono', Consolas, monospace; color: #e3116c; }
pre { background: #1d1d1f; color: #f5f5f7; padding: 20px; border-radius: 12px;
overflow-x: auto; font-size: 13px; margin: 16px 0; line-height: 1.6; }
pre code { background: transparent; color: inherit; padding: 0; }
blockquote { border-left: 3px solid #0071e3; padding: 12px 20px; margin: 16px 0;
background: #f0f7ff; color: #1d1d1f; border-radius: 0 8px 8px 0; font-size: 14px; }
.highlight { background: linear-gradient(120deg, #e0f0ff 0%, #f0e0ff 100%);
padding: 16px 20px; border-radius: 10px; margin: 16px 0; }
.badge { display: inline-block; padding: 3px 10px; border-radius: 20px; font-size: 11px;
font-weight: 600; background: #0071e3; color: #fff; margin: 2px 4px 2px 0; }
""";
#endregion
#region Professional — 전문가
private const string CssProfessional = """
* { margin:0; padding:0; box-sizing:border-box; }
body { font-family: 'Segoe UI', 'Malgun Gothic', Arial, sans-serif;
background: #eef1f5; color: #1e293b; line-height: 1.7; padding: 40px 20px; }
.container { max-width: 900px; margin: 0 auto; background: #fff;
border-radius: 8px; padding: 48px;
box-shadow: 0 1px 8px rgba(0,0,0,0.08);
border-top: 4px solid #1e3a5f; }
h1 { font-size: 26px; font-weight: 700; color: #1e3a5f; margin-bottom: 4px; }
h2 { font-size: 18px; font-weight: 600; margin: 32px 0 12px; color: #1e3a5f;
border-bottom: 2px solid #c8d6e5; padding-bottom: 6px; }
h3 { font-size: 15px; font-weight: 600; margin: 22px 0 8px; color: #2c5282; }
.meta { font-size: 12px; color: #94a3b8; margin-bottom: 24px; border-bottom: 1px solid #e2e8f0;
padding-bottom: 12px; }
p { margin: 8px 0; font-size: 14px; }
table { width: 100%; border-collapse: collapse; margin: 16px 0; font-size: 13.5px;
border: 1px solid #e2e8f0; }
th { background: #1e3a5f; color: #fff; text-align: left; padding: 10px 14px;
font-weight: 600; font-size: 12.5px; text-transform: uppercase; letter-spacing: 0.5px; }
td { padding: 9px 14px; border-bottom: 1px solid #e2e8f0; }
tr:nth-child(even) td { background: #f8fafc; }
tr:hover td { background: #eef2ff; }
ul, ol { margin: 8px 0 8px 24px; }
li { margin: 4px 0; font-size: 14px; }
code { background: #f1f5f9; padding: 2px 6px; border-radius: 4px; font-size: 12.5px;
font-family: Consolas, monospace; color: #1e3a5f; }
pre { background: #0f172a; color: #e2e8f0; padding: 18px; border-radius: 6px;
overflow-x: auto; font-size: 12.5px; margin: 14px 0; }
pre code { background: transparent; color: inherit; padding: 0; }
blockquote { border-left: 4px solid #1e3a5f; padding: 10px 18px; margin: 14px 0;
background: #f0f4f8; color: #334155; }
.callout { background: #eff6ff; border: 1px solid #bfdbfe; border-radius: 6px;
padding: 14px 18px; margin: 14px 0; font-size: 13.5px; }
.callout strong { color: #1e40af; }
""";
#endregion
#region Creative — 아이디어
private const string CssCreative = """
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');
* { margin:0; padding:0; box-sizing:border-box; }
body { font-family: 'Poppins', 'Segoe UI', 'Malgun Gothic', sans-serif;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
min-height: 100vh; color: #2d3748; line-height: 1.75; padding: 48px 24px; }
.container { max-width: 880px; margin: 0 auto; background: rgba(255,255,255,0.95);
backdrop-filter: blur(20px); border-radius: 20px; padding: 52px;
box-shadow: 0 20px 60px rgba(0,0,0,0.15); }
h1 { font-size: 30px; font-weight: 700;
background: linear-gradient(135deg, #667eea, #e040fb);
-webkit-background-clip: text; -webkit-text-fill-color: transparent;
margin-bottom: 4px; }
h2 { font-size: 20px; font-weight: 600; margin: 36px 0 14px; color: #553c9a;
position: relative; padding-left: 16px; }
h2::before { content: ''; position: absolute; left: 0; top: 4px; width: 4px; height: 22px;
background: linear-gradient(180deg, #667eea, #e040fb); border-radius: 4px; }
h3 { font-size: 16px; font-weight: 600; margin: 22px 0 10px; color: #7c3aed; }
.meta { font-size: 12px; color: #a0aec0; margin-bottom: 28px; }
p { margin: 10px 0; font-size: 14.5px; }
table { width: 100%; border-collapse: separate; border-spacing: 0; margin: 18px 0;
font-size: 13.5px; border-radius: 12px; overflow: hidden;
box-shadow: 0 4px 12px rgba(102,126,234,0.1); }
th { background: linear-gradient(135deg, #667eea, #764ba2); color: #fff;
text-align: left; padding: 12px 14px; font-weight: 600; }
td { padding: 10px 14px; border-bottom: 1px solid #f0e7fe; }
tr:hover td { background: #faf5ff; }
ul, ol { margin: 10px 0 10px 28px; font-size: 14.5px; }
li { margin: 5px 0; }
li::marker { color: #7c3aed; }
code { background: #f5f3ff; padding: 2px 8px; border-radius: 6px; font-size: 13px;
font-family: 'Fira Code', Consolas, monospace; color: #7c3aed; }
pre { background: #1a1a2e; color: #e0d4f5; padding: 20px; border-radius: 14px;
overflow-x: auto; font-size: 13px; margin: 16px 0;
border: 1px solid rgba(124,58,237,0.2); }
pre code { background: transparent; color: inherit; padding: 0; }
blockquote { border-left: 4px solid #7c3aed; padding: 14px 20px; margin: 16px 0;
background: linear-gradient(135deg, #f5f3ff, #faf5ff);
border-radius: 0 12px 12px 0; font-style: italic; }
.card { background: #fff; border: 1px solid #e9d8fd; border-radius: 14px;
padding: 20px; margin: 14px 0; box-shadow: 0 2px 8px rgba(124,58,237,0.08); }
.tag { display: inline-block; padding: 3px 12px; border-radius: 20px; font-size: 11px;
font-weight: 500; background: linear-gradient(135deg, #667eea, #764ba2);
color: #fff; margin: 2px 4px 2px 0; }
""";
#endregion
#region Minimal — 미니멀
private const string CssMinimal = """
* { margin:0; padding:0; box-sizing:border-box; }
body { font-family: 'Georgia', 'Batang', serif;
background: #fff; color: #222; line-height: 1.85; padding: 60px 24px; }
.container { max-width: 720px; margin: 0 auto; padding: 0; }
h1 { font-size: 32px; font-weight: 400; color: #000; margin-bottom: 4px;
letter-spacing: -0.5px; }
h2 { font-size: 20px; font-weight: 400; margin: 40px 0 14px; color: #000;
border-bottom: 1px solid #ddd; padding-bottom: 8px; }
h3 { font-size: 16px; font-weight: 600; margin: 28px 0 10px; color: #333; }
.meta { font-size: 12px; color: #999; margin-bottom: 36px; font-style: italic; }
p { margin: 12px 0; font-size: 15px; text-align: justify; }
table { width: 100%; border-collapse: collapse; margin: 20px 0; font-size: 14px; }
th { text-align: left; padding: 8px 0; font-weight: 600; border-bottom: 2px solid #000;
font-size: 12px; text-transform: uppercase; letter-spacing: 1px; color: #555; }
td { padding: 8px 0; border-bottom: 1px solid #eee; }
tr:hover td { background: #fafafa; }
ul, ol { margin: 12px 0 12px 20px; font-size: 15px; }
li { margin: 6px 0; }
code { background: #f7f7f7; padding: 2px 6px; border-radius: 2px; font-size: 13px;
font-family: 'Courier New', monospace; }
pre { background: #f7f7f7; color: #333; padding: 18px; margin: 16px 0;
overflow-x: auto; font-size: 13px; border: 1px solid #e5e5e5; }
pre code { background: transparent; padding: 0; }
blockquote { border-left: 3px solid #000; padding: 8px 20px; margin: 16px 0;
color: #555; font-style: italic; }
hr { border: none; border-top: 1px solid #ddd; margin: 32px 0; }
""";
#endregion
#region Elegant — 우아한
private const string CssElegant = """
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;500;600;700&family=Source+Sans+3:wght@300;400;600&display=swap');
* { margin:0; padding:0; box-sizing:border-box; }
body { font-family: 'Source Sans 3', 'Malgun Gothic', sans-serif;
background: #faf8f5; color: #3d3929; line-height: 1.75; padding: 48px 24px; }
.container { max-width: 860px; margin: 0 auto; background: #fff;
border-radius: 4px; padding: 56px 52px;
box-shadow: 0 1px 4px rgba(0,0,0,0.06);
border: 1px solid #e8e4dd; }
h1 { font-family: 'Playfair Display', Georgia, serif; font-size: 30px;
font-weight: 700; color: #2c2416; margin-bottom: 6px; letter-spacing: -0.3px; }
h2 { font-family: 'Playfair Display', Georgia, serif; font-size: 20px;
font-weight: 600; margin: 36px 0 14px; color: #2c2416;
border-bottom: 1px solid #d4c9b8; padding-bottom: 8px; }
h3 { font-size: 15px; font-weight: 600; margin: 24px 0 10px; color: #8b7a5e; }
.meta { font-size: 12px; color: #b0a48e; margin-bottom: 28px; letter-spacing: 0.5px;
text-transform: uppercase; }
p { margin: 10px 0; font-size: 14.5px; }
table { width: 100%; border-collapse: collapse; margin: 18px 0; font-size: 13.5px; }
th { background: #f8f5f0; text-align: left; padding: 10px 14px; font-weight: 600;
color: #5a4d38; border-bottom: 2px solid #d4c9b8; font-size: 12.5px;
letter-spacing: 0.5px; }
td { padding: 9px 14px; border-bottom: 1px solid #f0ece5; }
tr:hover td { background: #fdfcfa; }
ul, ol { margin: 10px 0 10px 26px; font-size: 14.5px; }
li { margin: 5px 0; }
code { background: #f8f5f0; padding: 2px 7px; border-radius: 3px; font-size: 12.5px;
font-family: 'Courier New', monospace; color: #8b6914; }
pre { background: #2c2416; color: #e8e0d0; padding: 18px; border-radius: 4px;
overflow-x: auto; font-size: 12.5px; margin: 16px 0; }
pre code { background: transparent; color: inherit; padding: 0; }
blockquote { border-left: 3px solid #c9a96e; padding: 12px 20px; margin: 16px 0;
background: #fdf9f0; color: #5a4d38; font-style: italic;
font-family: 'Playfair Display', Georgia, serif; }
.ornament { text-align: center; color: #c9a96e; font-size: 18px; margin: 24px 0; letter-spacing: 8px; }
""";
#endregion
#region Dark — 다크 모드
private const string CssDark = """
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500&family=Inter:wght@300;400;500;600;700&display=swap');
* { margin:0; padding:0; box-sizing:border-box; }
body { font-family: 'Inter', 'Segoe UI', 'Malgun Gothic', sans-serif;
background: #0d1117; color: #e6edf3; line-height: 1.75; padding: 48px 24px; }
.container { max-width: 880px; margin: 0 auto; background: #161b22;
border-radius: 12px; padding: 52px;
border: 1px solid #30363d;
box-shadow: 0 8px 32px rgba(0,0,0,0.3); }
h1 { font-size: 28px; font-weight: 700; color: #f0f6fc; margin-bottom: 4px; }
h2 { font-size: 20px; font-weight: 600; margin: 36px 0 14px; color: #f0f6fc;
border-bottom: 1px solid #30363d; padding-bottom: 8px; }
h3 { font-size: 16px; font-weight: 600; margin: 24px 0 10px; color: #58a6ff; }
.meta { font-size: 12px; color: #8b949e; margin-bottom: 28px; }
p { margin: 10px 0; font-size: 14.5px; color: #c9d1d9; }
table { width: 100%; border-collapse: collapse; margin: 18px 0; font-size: 13.5px;
border: 1px solid #30363d; border-radius: 8px; overflow: hidden; }
th { background: #21262d; text-align: left; padding: 10px 14px; font-weight: 600;
color: #f0f6fc; border-bottom: 1px solid #30363d; }
td { padding: 9px 14px; border-bottom: 1px solid #21262d; color: #c9d1d9; }
tr:hover td { background: #1c2128; }
ul, ol { margin: 10px 0 10px 28px; font-size: 14.5px; color: #c9d1d9; }
li { margin: 5px 0; }
code { background: #1c2128; padding: 2px 8px; border-radius: 6px; font-size: 13px;
font-family: 'JetBrains Mono', Consolas, monospace; color: #79c0ff; }
pre { background: #0d1117; color: #c9d1d9; padding: 20px; border-radius: 8px;
overflow-x: auto; font-size: 13px; margin: 16px 0;
border: 1px solid #30363d; }
pre code { background: transparent; color: inherit; padding: 0; }
blockquote { border-left: 3px solid #58a6ff; padding: 12px 20px; margin: 16px 0;
background: #161b22; color: #8b949e;
border-radius: 0 8px 8px 0; }
a { color: #58a6ff; text-decoration: none; }
a:hover { text-decoration: underline; }
.label { display: inline-block; padding: 2px 8px; border-radius: 12px; font-size: 11px;
font-weight: 500; border: 1px solid #30363d; color: #8b949e; margin: 2px 4px 2px 0; }
""";
#endregion
#region Colorful — 컬러풀
private const string CssColorful = """
@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@300;400;600;700;800&display=swap');
* { margin:0; padding:0; box-sizing:border-box; }
body { font-family: 'Nunito', 'Segoe UI', 'Malgun Gothic', sans-serif;
background: linear-gradient(135deg, #ffecd2 0%, #fcb69f 50%, #ffecd2 100%);
min-height: 100vh; color: #2d3436; line-height: 1.75; padding: 48px 24px; }
.container { max-width: 880px; margin: 0 auto; background: #fff;
border-radius: 20px; padding: 52px;
box-shadow: 0 12px 40px rgba(0,0,0,0.08); }
h1 { font-size: 30px; font-weight: 800; color: #e17055; margin-bottom: 4px; }
h2 { font-size: 20px; font-weight: 700; margin: 34px 0 14px; color: #6c5ce7;
padding: 6px 14px; background: #f8f0ff; border-radius: 8px; display: inline-block; }
h3 { font-size: 16px; font-weight: 700; margin: 22px 0 10px; color: #00b894; }
.meta { font-size: 12px; color: #b2bec3; margin-bottom: 28px; }
p { margin: 10px 0; font-size: 14.5px; }
table { width: 100%; border-collapse: separate; border-spacing: 0; margin: 18px 0;
font-size: 13.5px; border-radius: 14px; overflow: hidden;
box-shadow: 0 2px 8px rgba(108,92,231,0.1); }
th { background: linear-gradient(135deg, #a29bfe, #6c5ce7); color: #fff;
text-align: left; padding: 12px 14px; font-weight: 700; }
td { padding: 10px 14px; border-bottom: 1px solid #f0f0f0; }
tr:hover td { background: #faf0ff; }
ul, ol { margin: 10px 0 10px 28px; font-size: 14.5px; }
li { margin: 5px 0; }
li::marker { color: #e17055; font-weight: 700; }
code { background: #fff3e0; padding: 2px 8px; border-radius: 6px; font-size: 13px;
font-family: Consolas, monospace; color: #e17055; }
pre { background: #2d3436; color: #dfe6e9; padding: 20px; border-radius: 14px;
overflow-x: auto; font-size: 13px; margin: 16px 0; }
pre code { background: transparent; color: inherit; padding: 0; }
blockquote { border-left: 4px solid #fdcb6e; padding: 14px 20px; margin: 16px 0;
background: #fffbf0; border-radius: 0 12px 12px 0; color: #636e72; }
.chip { display: inline-block; padding: 4px 14px; border-radius: 20px; font-size: 12px;
font-weight: 700; color: #fff; margin: 3px 4px 3px 0; }
.chip-red { background: #e17055; } .chip-blue { background: #74b9ff; }
.chip-green { background: #00b894; } .chip-purple { background: #6c5ce7; }
.chip-yellow { background: #fdcb6e; color: #2d3436; }
""";
#endregion
#region Corporate — 기업 공식
private const string CssCorporate = """
* { margin:0; padding:0; box-sizing:border-box; }
body { font-family: 'Segoe UI', 'Malgun Gothic', Arial, sans-serif;
background: #f2f2f2; color: #333; line-height: 1.65; padding: 32px 20px; }
.container { max-width: 900px; margin: 0 auto; background: #fff; padding: 0;
box-shadow: 0 1px 4px rgba(0,0,0,0.1); }
.header-bar { background: #003366; color: #fff; padding: 28px 40px 20px;
border-bottom: 3px solid #ff6600; }
.header-bar h1 { font-size: 22px; font-weight: 700; color: #fff; margin-bottom: 2px; }
.header-bar .meta { color: rgba(255,255,255,0.7); margin-bottom: 0; font-size: 12px; }
.body-content { padding: 36px 40px 40px; }
h1 { font-size: 22px; font-weight: 700; color: #003366; margin-bottom: 4px; }
h2 { font-size: 17px; font-weight: 600; margin: 28px 0 10px; color: #003366;
border-left: 4px solid #ff6600; padding-left: 12px; }
h3 { font-size: 14.5px; font-weight: 600; margin: 20px 0 8px; color: #004488; }
.meta { font-size: 11.5px; color: #999; margin-bottom: 20px; }
p { margin: 8px 0; font-size: 13.5px; }
table { width: 100%; border-collapse: collapse; margin: 14px 0; font-size: 12.5px;
border: 1px solid #ddd; }
th { background: #003366; color: #fff; text-align: left; padding: 8px 12px;
font-weight: 600; font-size: 11.5px; }
td { padding: 7px 12px; border: 1px solid #e0e0e0; }
tr:nth-child(even) td { background: #f9f9f9; }
ul, ol { margin: 8px 0 8px 24px; font-size: 13.5px; }
li { margin: 3px 0; }
code { background: #f4f4f4; padding: 1px 5px; border-radius: 3px; font-size: 12px;
font-family: Consolas, monospace; }
pre { background: #f4f4f4; color: #333; padding: 14px; border-radius: 4px;
overflow-x: auto; font-size: 12px; margin: 12px 0; border: 1px solid #ddd; }
pre code { background: transparent; padding: 0; }
blockquote { border-left: 4px solid #ff6600; padding: 10px 16px; margin: 12px 0;
background: #fff8f0; color: #555; }
.footer { text-align: center; font-size: 10.5px; color: #aaa; margin-top: 32px;
padding-top: 12px; border-top: 1px solid #eee; }
.stamp { display: inline-block; border: 2px solid #003366; color: #003366; padding: 4px 16px;
border-radius: 4px; font-size: 11px; font-weight: 700; text-transform: uppercase;
letter-spacing: 1px; }
""";
#endregion
#region Magazine — 매거진
private const string CssMagazine = """
@import url('https://fonts.googleapis.com/css2?family=Merriweather:wght@300;400;700;900&family=Open+Sans:wght@300;400;600;700&display=swap');
* { margin:0; padding:0; box-sizing:border-box; }
body { font-family: 'Open Sans', 'Malgun Gothic', sans-serif;
background: #f0ece3; color: #2c2c2c; line-height: 1.7; padding: 48px 24px; }
.container { max-width: 900px; margin: 0 auto; background: #fff;
border-radius: 2px; padding: 0; overflow: hidden;
box-shadow: 0 4px 16px rgba(0,0,0,0.08); }
.hero { background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
padding: 48px 44px 36px; color: #fff; }
.hero h1 { font-family: 'Merriweather', Georgia, serif; font-size: 32px; font-weight: 900;
line-height: 1.3; margin-bottom: 8px; }
.hero .meta { color: rgba(255,255,255,0.6); margin-bottom: 0; font-size: 13px; }
.content { padding: 40px 44px 44px; }
h1 { font-family: 'Merriweather', Georgia, serif; font-size: 28px; font-weight: 900;
color: #1a1a2e; margin-bottom: 4px; }
h2 { font-family: 'Merriweather', Georgia, serif; font-size: 20px; font-weight: 700;
margin: 36px 0 14px; color: #1a1a2e; }
h3 { font-size: 15px; font-weight: 700; margin: 24px 0 10px; color: #e94560;
text-transform: uppercase; letter-spacing: 1px; font-size: 12px; }
.meta { font-size: 12px; color: #999; margin-bottom: 24px; }
p { margin: 10px 0; font-size: 15px; }
p:first-of-type::first-letter { font-family: 'Merriweather', Georgia, serif;
font-size: 48px; float: left; line-height: 1; padding-right: 8px; color: #e94560;
font-weight: 900; }
table { width: 100%; border-collapse: collapse; margin: 18px 0; font-size: 13.5px; }
th { background: #1a1a2e; color: #fff; text-align: left; padding: 10px 14px;
font-weight: 600; }
td { padding: 9px 14px; border-bottom: 1px solid #eee; }
tr:hover td { background: #fafafa; }
ul, ol { margin: 10px 0 10px 28px; font-size: 14.5px; }
li { margin: 5px 0; }
code { background: #f5f5f5; padding: 2px 6px; border-radius: 3px; font-size: 12.5px;
font-family: 'Courier New', monospace; }
pre { background: #1a1a2e; color: #e0e0e0; padding: 18px; border-radius: 4px;
overflow-x: auto; font-size: 12.5px; margin: 16px 0; }
pre code { background: transparent; color: inherit; padding: 0; }
blockquote { font-family: 'Merriweather', Georgia, serif; font-size: 18px;
font-style: italic; color: #555; border: none; padding: 20px 0; margin: 24px 0;
text-align: center; position: relative; }
blockquote::before { content: '\201C'; font-size: 60px; color: #e94560;
position: absolute; top: -10px; left: 50%; transform: translateX(-50%);
opacity: 0.3; }
.pullquote { font-size: 20px; font-family: 'Merriweather', Georgia, serif;
font-weight: 700; color: #e94560; border-top: 3px solid #e94560;
border-bottom: 3px solid #e94560; padding: 16px 0; margin: 24px 0;
text-align: center; }
""";
#endregion
#region Dashboard — 대시보드
private const string CssDashboard = """
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
* { margin:0; padding:0; box-sizing:border-box; }
body { font-family: 'Inter', 'Segoe UI', 'Malgun Gothic', sans-serif;
background: #f0f2f5; color: #1a1a2e; line-height: 1.6; padding: 32px 24px; }
.container { max-width: 1000px; margin: 0 auto; padding: 0; background: transparent; }
h1 { font-size: 26px; font-weight: 700; color: #1a1a2e; margin-bottom: 4px; }
h2 { font-size: 17px; font-weight: 600; margin: 28px 0 14px; color: #1a1a2e; }
h3 { font-size: 14px; font-weight: 600; margin: 18px 0 8px; color: #6c7893; }
.meta { font-size: 12px; color: #8c95a6; margin-bottom: 24px; }
p { margin: 8px 0; font-size: 13.5px; color: #4a5568; }
.kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 16px; margin: 20px 0; }
.kpi-card { background: #fff; border-radius: 12px; padding: 20px;
box-shadow: 0 1px 4px rgba(0,0,0,0.06); }
.kpi-card .kpi-label { font-size: 12px; color: #8c95a6; font-weight: 500;
text-transform: uppercase; letter-spacing: 0.5px; }
.kpi-card .kpi-value { font-size: 28px; font-weight: 700; color: #1a1a2e; margin: 4px 0; }
.kpi-card .kpi-change { font-size: 12px; font-weight: 600; }
.kpi-up { color: #10b981; } .kpi-down { color: #ef4444; }
.chart-area { background: #fff; border-radius: 12px; padding: 24px; margin: 16px 0;
box-shadow: 0 1px 4px rgba(0,0,0,0.06); min-height: 200px; }
table { width: 100%; border-collapse: collapse; margin: 16px 0; font-size: 13px;
background: #fff; border-radius: 10px; overflow: hidden;
box-shadow: 0 1px 4px rgba(0,0,0,0.06); }
th { background: #f7f8fa; text-align: left; padding: 10px 14px; font-weight: 600;
color: #6c7893; font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.5px;
border-bottom: 1px solid #edf0f4; }
td { padding: 10px 14px; border-bottom: 1px solid #f3f4f6; }
tr:hover td { background: #f9fafb; }
ul, ol { margin: 8px 0 8px 24px; font-size: 13.5px; }
li { margin: 4px 0; }
code { background: #f1f3f5; padding: 2px 7px; border-radius: 5px; font-size: 12px;
font-family: 'JetBrains Mono', Consolas, monospace; }
pre { background: #1a1a2e; color: #c9d1d9; padding: 18px; border-radius: 10px;
overflow-x: auto; font-size: 12px; margin: 14px 0; }
pre code { background: transparent; color: inherit; padding: 0; }
blockquote { border-left: 3px solid #4b5efc; padding: 10px 16px; margin: 14px 0;
background: #f0f0ff; border-radius: 0 8px 8px 0; font-size: 13px; }
.status-badge { display: inline-block; padding: 2px 10px; border-radius: 12px;
font-size: 11px; font-weight: 600; }
.status-ok { background: #d1fae5; color: #065f46; }
.status-warn { background: #fef3c7; color: #92400e; }
.status-err { background: #fee2e2; color: #991b1b; }
""";
#endregion
// ════════════════════════════════════════════════════════════════════
// 공통 CSS 컴포넌트 (모든 무드에 자동 첨부)
// ════════════════════════════════════════════════════════════════════
#region Shared — 공통 컴포넌트
private const string CssShared = """
/* ── 목차 (TOC) ── */
nav.toc { background: #f8f9fa; border: 1px solid #e9ecef; border-radius: 10px;
padding: 20px 28px; margin: 24px 0 32px; }
nav.toc h2 { font-size: 15px; font-weight: 700; margin: 0 0 12px; padding: 0; border: none;
color: inherit; display: block; background: none; }
nav.toc ul { list-style: none; margin: 0; padding: 0; }
nav.toc li { margin: 4px 0; }
nav.toc li.toc-h3 { padding-left: 18px; }
nav.toc a { text-decoration: none; color: #4b5efc; font-size: 13.5px; }
nav.toc a:hover { text-decoration: underline; }
/* ── 커버 페이지 ── */
.cover-page { text-align: center; padding: 80px 40px 60px; margin: -56px -52px 40px;
border-radius: 16px 16px 0 0; position: relative; overflow: hidden;
background: linear-gradient(135deg, #4b5efc 0%, #7c3aed 100%); color: #fff; }
.cover-page h1 { font-size: 36px; font-weight: 800; margin-bottom: 12px; color: #fff;
-webkit-text-fill-color: #fff; }
.cover-page .cover-subtitle { font-size: 18px; opacity: 0.9; margin-bottom: 24px; }
.cover-page .cover-meta { font-size: 13px; opacity: 0.7; }
.cover-page .cover-divider { width: 60px; height: 3px; background: rgba(255,255,255,0.5);
margin: 20px auto; border-radius: 2px; }
/* ── 콜아웃 (callout) ── */
.callout { border-radius: 8px; padding: 16px 20px; margin: 16px 0; font-size: 14px;
border-left: 4px solid; display: flex; gap: 10px; align-items: flex-start; }
.callout::before { font-size: 16px; flex-shrink: 0; margin-top: 1px; }
.callout-info { background: #eff6ff; border-color: #3b82f6; color: #1e40af; }
.callout-info::before { content: 'ℹ️'; }
.callout-warning { background: #fffbeb; border-color: #f59e0b; color: #92400e; }
.callout-warning::before { content: '⚠️'; }
.callout-tip { background: #f0fdf4; border-color: #22c55e; color: #166534; }
.callout-tip::before { content: '💡'; }
.callout-danger { background: #fef2f2; border-color: #ef4444; color: #991b1b; }
.callout-danger::before { content: '🚨'; }
.callout-note { background: #f5f3ff; border-color: #8b5cf6; color: #5b21b6; }
.callout-note::before { content: '📝'; }
/* ── 배지 (badge) — 공통 ── */
.badge, .tag, .chip { display: inline-block; padding: 3px 10px; border-radius: 20px;
font-size: 11px; font-weight: 600; margin: 2px 4px 2px 0; }
.badge-blue { background: #dbeafe; color: #1e40af; }
.badge-green { background: #d1fae5; color: #065f46; }
.badge-red { background: #fee2e2; color: #991b1b; }
.badge-yellow { background: #fef3c7; color: #92400e; }
.badge-purple { background: #ede9fe; color: #5b21b6; }
.badge-gray { background: #f3f4f6; color: #374151; }
.badge-orange { background: #ffedd5; color: #9a3412; }
/* ── 하이라이트 박스 ── */
.highlight-box { background: linear-gradient(120deg, #e0f0ff 0%, #f0e0ff 100%);
padding: 16px 20px; border-radius: 10px; margin: 16px 0; }
/* ── CSS 차트 (bar/horizontal) ── */
.chart-bar { margin: 20px 0; }
.chart-bar .bar-item { display: flex; align-items: center; margin: 6px 0; gap: 10px; }
.chart-bar .bar-label { min-width: 100px; font-size: 13px; text-align: right; flex-shrink: 0; }
.chart-bar .bar-track { flex: 1; background: #e5e7eb; border-radius: 6px; height: 22px;
overflow: hidden; }
.chart-bar .bar-fill { height: 100%; border-radius: 6px; display: flex; align-items: center;
padding: 0 8px; font-size: 11px; font-weight: 600; color: #fff;
transition: width 0.3s ease; min-width: fit-content; }
.bar-fill.blue { background: #3b82f6; } .bar-fill.green { background: #22c55e; }
.bar-fill.red { background: #ef4444; } .bar-fill.yellow { background: #f59e0b; }
.bar-fill.purple { background: #8b5cf6; } .bar-fill.orange { background: #f97316; }
/* ── CSS 도넛 차트 ── */
.chart-donut { width: 160px; height: 160px; border-radius: 50%; margin: 20px auto;
background: conic-gradient(var(--seg1-color, #3b82f6) 0% var(--seg1, 0%),
var(--seg2-color, #22c55e) var(--seg1, 0%) var(--seg2, 0%),
var(--seg3-color, #f59e0b) var(--seg2, 0%) var(--seg3, 0%),
var(--seg4-color, #ef4444) var(--seg3, 0%) var(--seg4, 0%),
#e5e7eb var(--seg4, 0%) 100%);
display: flex; align-items: center; justify-content: center; position: relative; }
.chart-donut::after { content: ''; width: 100px; height: 100px; background: #fff;
border-radius: 50%; position: absolute; }
.chart-donut .donut-label { position: absolute; z-index: 1; font-size: 18px; font-weight: 700; }
/* ── 진행률 바 ── */
.progress { background: #e5e7eb; border-radius: 8px; height: 10px; margin: 8px 0;
overflow: hidden; }
.progress-fill { height: 100%; border-radius: 8px; background: #3b82f6; }
/* ── 타임라인 ── */
.timeline { position: relative; padding-left: 28px; margin: 20px 0; }
.timeline::before { content: ''; position: absolute; left: 8px; top: 0; bottom: 0;
width: 2px; background: #e5e7eb; }
.timeline-item { position: relative; margin: 16px 0; }
.timeline-item::before { content: ''; position: absolute; left: -24px; top: 5px;
width: 12px; height: 12px; border-radius: 50%; background: #4b5efc;
border: 2px solid #fff; box-shadow: 0 0 0 2px #4b5efc; }
.timeline-item .timeline-date { font-size: 12px; color: #6b7280; font-weight: 600; }
.timeline-item .timeline-content { font-size: 14px; margin-top: 4px; }
/* ── 섹션 자동 번호 ── */
body { counter-reset: section; }
h2.numbered { counter-increment: section; counter-reset: subsection; }
h2.numbered::before { content: counter(section) '. '; }
h3.numbered { counter-increment: subsection; }
h3.numbered::before { content: counter(section) '-' counter(subsection) '. '; }
/* ── 그리드 레이아웃 ── */
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin: 16px 0; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin: 16px 0; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin: 16px 0; }
/* ── 카드 공통 ── */
.card { background: #fff; border: 1px solid #e5e7eb; border-radius: 12px;
padding: 20px; box-shadow: 0 1px 3px rgba(0,0,0,0.06); }
.card-header { font-size: 15px; font-weight: 700; margin-bottom: 8px; }
/* ── 구분선 ── */
.divider { border: none; border-top: 1px solid #e5e7eb; margin: 32px 0; }
.divider-thick { border: none; border-top: 3px solid #e5e7eb; margin: 40px 0; }
/* ── 인쇄/PDF 최적화 ── */
@media print {
body { background: #fff !important; padding: 0 !important; }
.container { box-shadow: none !important; border: none !important;
max-width: none !important; padding: 20px !important; }
.cover-page { break-after: page; }
h2, h3 { break-after: avoid; }
table, figure, .chart-bar, .callout { break-inside: avoid; }
nav.toc { break-after: page; }
a { color: inherit !important; text-decoration: none !important; }
a[href]::after { content: ' (' attr(href) ')'; font-size: 10px; color: #999; }
.no-print { display: none !important; }
}
""";
#endregion
}
/// <summary>테마 무드 정의.</summary>
public record TemplateMood(string Key, string Label, string Icon, string Description);