namespace AxCopilot.Services.Agent;

public static partial class TemplateService
{
    // ════════════════════════════════════════════════════════════════════
    //  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
}
