A4 Report

Generate professional A4 paper style consulting reports with McKinsey/BCG/Bain aesthetic.

Core Principles

1. A4 Paper Format — All pages are exactly 210mm × 297mm (or 595pt × 842pt at 72dpi). Print-optimized, clean margins.
2. Consulting Aesthetics — Clean typography, data-driven visuals, strategic use of whitespace, no decorative clutter.
3. Zero Dependencies — Single HTML files with inline CSS. Print to PDF in browser.
4. Structured Sections — Follow consulting report conventions: Executive Summary → Key Findings → Analysis → Recommendations → Appendix.

---

核心改进：图表说明规范

⚠️ 重要：每个图表必须有完整的文字解读

每张图表（chart）后面，必须紧跟以下两种说明框：

1. 读图指引 (Chart Guide)

放在图表下方，用浅蓝色背景框标识，引导读者如何解读图表：

<div class="chart-guide">
    <strong>📊 读图指引：</strong>
    <ul>
        <li>关注X轴与Y轴的对应关系</li>
        <li>注意颜色的含义（通常深色代表当前期，浅色代表对比期）</li>
        <li>寻找数据中的"转折点"或"异常值"</li>
    </ul>
</div>

2. 关键洞察 (Key Insights)

用深蓝色左边框的框标识，放在读图指引下方，总结图表传递的核心信息：

<div class="key-insights">
    <strong>💡 关键洞察：</strong>
    <ul>
        <li><strong>趋势判断：</strong>数据呈现XX趋势</li>
        <li><strong>对比发现：</strong>XX指标显著高于/低于预期</li>
        <li><strong>行动启示：</strong>建议决策者关注XX问题</li>
    </ul>
</div>

图表说明样式

.chart-guide {
    background: #ebf8ff;
    border-left: 4px solid #3182ce;
    padding: 8pt 12pt;
    margin: 6pt 0;
    font-size: 8pt;
    page-break-inside: avoid;
}

.key-insights {
    background: #f0f4f8;
    border-left: 4px solid #2c5282;
    padding: 8pt 12pt;
    margin: 6pt 0;
    font-size: 8pt;
    page-break-inside: avoid;
}

.key-insights strong, .chart-guide strong {
    color: #1a365d;
}

.chart-guide ul, .key-insights ul {
    margin: 4pt 0 0 16pt;
    padding: 0;
}

.chart-guide li, .key-insights li {
    margin-bottom: 2pt;
}

---

Report Structure

Every professional consulting report follows this hierarchy:

1. Cover Page
   - Report title (bold, clear)
   - Subtitle/client name
   - Date
   - Firm logo placeholder

2. Executive Summary (1 page)
   - Key结论 (3-5 bullet points)
   - Strategic recommendations overview
   - Expected impact

3. Table of Contents
   -自动生成目录

4. Key Findings (2-4 pages)
   - Finding 1: Title + evidence + implication
   - Finding 2: Title + evidence + implication
   - Finding 3: Title + evidence + implication

5. Detailed Analysis (variable)
   - Data visualizations
   - Charts and graphs
   - Framework analyses (2x2 matrices, waterfall charts)

6. Strategic Recommendations (1-2 pages)
   - Specific, actionable recommendations
   - Prioritized by impact/effort

7. Appendix (if needed)
   - Data tables
   - Methodology notes
   - Source references

---

Content Density Guidelines

⚠️ Fill the page. Reports that look half-empty waste space. Target 95% screen density — content should nearly fill the entire A4 page.

Recommended Content Per Page

Section Type	Recommended Content
Executive Summary	5-6 bullets + 4 KPI cards + 2 highlight boxes
Key Findings	3 finding boxes (side-by-side + 1 below)
Analysis	1 chart + chart-guide + key-insights (stacked vertically)
Recommendations	4-5 recommendation cards
Tables	6-8 rows maximum + 1 summary paragraph
SWOT/Grid	4 quadrants + 2 highlight boxes

When to Combine Elements

• Chart + Guide: Always stack vertically — chart on top, guide below, insights at bottom
• Chart + Table: Use side-by-side only if both are compact; otherwise stack
• Two finding boxes: Use .two-columns + add a third below
• Multiple highlight boxes: Stack 2-3 per page

Rule of Thumb

95% density rule: Content should fill ~95% of screen space. If there's visible empty space at the bottom of a section, add more content or reduce spacing.

Common Mistakes

Mistake	Result	Fix
Chart without explanation	Reader confused	Add chart-guide + key-insights
85% density	Slightly empty	Add more finding boxes, stack highlight boxes
Chart alone on page	Wasted space	Add explanation boxes below
Too much spacing	Empty-looking	Reduce margin/padding

CSS Classes for Layout

.two-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 12pt; }
.swot-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8pt; }
.metrics-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12pt; }

---

Phase 1: Content Discovery

必须先确认以下信息，才能开始生成报告：

首要问题：汇报对象（Audience）

必须首先询问（header: "汇报对象"）：

这份报告的主要受众是谁？这决定了报告的语言深度、数据详略和建议措辞。

选项：
1. 管理层 / C-Suite（CEO/CFO/COO）
   - 语言专业简洁，结论先行，数字导向
   - 减少基础概念解释，直击决策要点

2. 董事会 / 投资者 / 股东
   - 强调投资回报、风险评估、战略价值
   - 关注ROE、现金流、市值管理等指标

3. 业务负责人 / 中层管理者
   - 需要更多操作层面的分析和可执行建议
   - 可以包含更多背景说明

4. 战略规划部 / 咨询顾问
   - 最详尽的数据和最严谨的框架分析
   - 需要完整的假设和推导过程

5. 客户 / 外部合作方
   - 强调价值主张和合作亮点
   - 减少内部信息的披露

6. 内部团队 / 新人培训
   - 需要更多概念解释和背景铺垫
   - 术语需要标注定义

标准问题（可以一起问）

Question 1 — Report Type (header: "报告类型"):
What kind of report do you need? Options:

• Market Analysis Report / 市场分析报告
• Competitive Intelligence Report / 竞品分析报告
• Strategic Planning Report / 战略规划报告
• Business Review / 业务复盘报告
• Feasibility Study / 可行性研究报告
• Financial Analysis / 财务分析报告
• Custom Topic / 自定义主题

Question 2 — Purpose (header: "报告目的"):
What will this report be used for? Options:

• Investment Decision / 投资决策参考
• Board Presentation / 董事会汇报
• Internal Review / 内部复盘会议
• Client Proposal / 客户提案
• Due Diligence / 尽职调查
• Strategic Planning / 战略规划

Question 3 — Length (header: "报告篇幅"):
How detailed should this be? Options:

• Brief (5-8 pages) / 简洁版
• Standard (10-15 pages) / 标准版
• Comprehensive (20+ pages) / 详细版

Question 4 — Style Preference (header: "风格偏好"):
Which consulting firm's style? Options:

• McKinsey Blue / 麦肯锡蓝 — Deep navy + white, serif headlines
• BCG Silver / BCG银灰 — Charcoal + accent blue, geometric layouts
• Bain Red / 贝恩红 — Dark slate + bold red accents, data-forward
• Custom / 自定义 — Let me specify

---

Phase 2: Style Selection

Step 2.1: Style Path

Ask (header: "风格选择"):
How would you like to choose the style?

• "Show me previews" (recommended) — Generate 3 style previews
• "I know what I want" — Select from preset list directly

If direct selection: Show preset picker and skip to Phase 3. Available presets are defined in STYLE_PRESETS.md.

Step 2.2: Generate 3 Style Previews

Generate 3 distinct single-page HTML previews showing:

• Cover page aesthetic
• Typography and colors
• Overall consulting feel

Style	Recommended For
McKinsey Blue	Serious, executive, formal
BCG Silver	Modern, geometric, structured
Bain Red	Bold, data-driven, impactful

Save previews to .claude-design/report-previews/ (style-a.html, style-b.html, style-c.html).

Open each preview automatically for the user.

Step 2.3: User Picks

Ask (header: "风格"):
Which style preview do you prefer? Options: Style A / Style B / Style C / Mix elements

If "Mix elements", ask for specifics.

---

Phase 3: Generate Report

Generate the full report using content from Phase 1 and style from Phase 2.

Before generating, read these supporting files:

• a4-report-template.md — HTML architecture for A4 print
• STYLE_PRESETS.md — Consulting firm style specifications

Key requirements:

• Single self-contained HTML file, all CSS inline
• Use A4 print media queries: @page { size: A4; margin: 20mm; }
• Use Google Fonts — professional serif + sans combinations
• Add page breaks: page-break-before: always, page-break-after: avoid
• Include print button for PDF export
• Add header/footer with page numbers
• All charts should be print-optimized (no interactive elements required)
• ⚠️ Every chart MUST be followed by chart-guide and key-insights boxes

Source Data Handling (for later audit)

如果用户提供 了源数据文件，在生成报告时必须：

1. 记录数据文件位置 — 保存源数据路径（如 data/source.xlsx）
2. 标注数据引用 — 在报告的数据点旁标注来源字段名
3. 保留原始数值 — 记录报告中使用的每一个数值，以便后续审计

这样在Phase 7审计时可以快速定位和验证每个数据点。

---

Phase 4: Content Enhancement

Charts & Visualizations

For data-heavy reports, include these consulting-standard visualizations:

Chart Type	Use Case
Bar Chart	Comparative analysis, market share
Line Chart	Trend analysis, time series
2x2 Matrix	Strategic positioning, priority grids
Waterfall Chart	Variance analysis, build-ups
Sankey Diagram	Flow analysis, process mapping
Donut Chart	Composition analysis, segmentation
Heat Map	Performance comparison, risk assessment

Use CSS-based charts (no external libraries) for zero-dependency output.

Required Chart Structure

Every chart section MUST follow this structure:

<!-- 1. Chart Container -->
<div class="chart-container">
    <div class="chart-title">图表标题（清晰描述数据内容）</div>
    <svg class="chart-svg">...SVG code...</svg>
</div>

<!-- 2. Chart Guide (读图指引) -->
<div class="chart-guide">
    <strong>📊 读图指引：</strong>
    <ul>
        <li>说明图表的基本读法（如：颜色含义、坐标轴含义）</li>
        <li>指出需要特别关注的数据点</li>
        <li>解释数据的来源和口径</li>
    </ul>
</div>

<!-- 3. Key Insights (关键洞察) -->
<div class="key-insights">
    <strong>💡 关键洞察：</strong>
    <ul>
        <li><strong>趋势判断：</strong>数据呈现什么趋势</li>
        <li><strong>对比发现：</strong>与预期或对比基准的差异</li>
        <li><strong>行动启示：</strong>对决策者的启示</li>
    </ul>
</div>

Example: Revenue Trend Chart

<!-- Chart -->
<div class="chart-container">
    <div class="chart-title">图1：美团收入增长趋势（2023-2025）</div>
    <svg class="chart-svg" viewBox="0 0 400 150">
        <!-- SVG bar chart code -->
    </svg>
</div>

<!-- Chart Guide -->
<div class="chart-guide">
    <strong>📊 读图指引：</strong>
    <ul>
        <li>深蓝色柱状图为当年收入，浅蓝色为同比增长</li>
        <li>Y轴左轴为收入金额（亿元），右轴为同比增速（%）</li>
        <li>关注2024-2025年增速的明显放缓趋势</li>
    </ul>
</div>

<!-- Key Insights -->
<div class="key-insights">
    <strong>💡 关键洞察：</strong>
    <ul>
        <li><strong>趋势判断：</strong>收入增速从2024年的18.6%骤降至2025年的8.1%，回落10.5个百分点</li>
        <li><strong>对比发现：</strong>8.1%的增速低于市场一致预期的10%，显示核心业务增长乏力</li>
        <li><strong>行动启示：</strong>管理层需重新评估2026年增长目标，并加大新业务突破力度</li>
    </ul>
</div>

Frameworks

Include consulting-standard frameworks when relevant:

• SWOT Analysis
• Porter's Five Forces
• BCG Growth-Share Matrix
• McKinsey 7S Framework
• PESTEL Analysis

---

Phase 5: Delivery

1. Open — Use open [filename].html to launch in browser
2. Print to PDF — Guide user to print (Cmd/Ctrl+P) and select "Save as PDF"
3. Summarize — Tell the user:
   • File location, style name, page count
   • Report audience (based on their selection)
   • How to print: File → Print → Save as PDF
   • How to customize: CSS variables in :root for colors, font links for typography
   • Recommended print settings: A4 paper, no margins scaling, background graphics ON

Auto-Proceed to Phase 7

⚠️ 重要：完成交付后，必须检查是否需要自动进入Phase 7数据审计

在完成Phase 5交付时，必须判断是否应该自动进入数据审计：

条件	动作
用户提供了源数据文件	立即自动进入Phase 7，先完成数据审计再交付
用户未提供源数据	跳过Phase 7，直接完成交付

判断逻辑示例：

如果用户说 "基于xxx数据写报告" 或 上传了CSV/Excel/PDF文件
→ 报告生成后自动进入Phase 7数据审计
→ 完成审计后再进行Phase 5交付

如果用户只是说 "写一份关于xxx的报告"（无数据源）
→ 直接进行Phase 5交付
→ Phase 7仅在用户主动要求时执行

自动审计流程：

报告生成完成
    ↓
检测到源数据文件
    ↓
自动进入Phase 7数据审计
    ↓
审计完成并修复问题后
    ↓
再进行Phase 5正式交付

---

Phase 6: PDF Export (Optional)

After delivery, ask the user: "Would you like me to export this report as a PDF file?"

If yes, guide them through browser print:

1. Open the HTML in browser
2. File → Print (or Cmd/Ctrl+P)
3. Destination → Save as PDF
4. More settings → Paper Size: A4
5. Options → Check "Background graphics"

---

Phase 7: Data Audit (Automatic) ⭐

⚠️ 重要变更：数据审计现已自动执行，不再等待用户询问！

报告生成完成后，如果用户提供过原始数据文件，系统将自动启动数据审计流程，对报告中的数据进行校验。

Auto-Trigger Conditions

以下情况将自动触发Phase 7数据审计：

触发条件	说明
用户提供了源数据文件	CSV、Excel、PDF、TXT等格式的数据文件
用户指定了数据来源	如"基于xxx数据"、"从附件获取"
报告包含具体数字	金额、百分比、增长率等可量化指标

Audit Modes

模式	触发条件	说明
自动模式 (Auto)	用户提供源数据	生成报告后自动运行完整审计
手动模式 (Manual)	用户未提供源数据	仅当用户主动询问时执行

如果用户提供了源数据 → 报告生成后自动进入Phase 7审计
如果用户未提供源数据 → Phase 7仅作为可选功能保留

---

Step 7.1: Print Audit Header

Output directly to terminal:

╔══════════════════════════════════════════════════════════════════════════════╗
║                              🔍  数据审计开始                                ║
╠══════════════════════════════════════════════════════════════════════════════╣
║  报告文件: [report.html]                                                     ║
║  源数据文件: [source.xlsx]                                                   ║
║  审计时间: 2026-04-12 14:30                                                  ║
╚══════════════════════════════════════════════════════════════════════════════╝

---

Step 7.2: Extract & List Audit Items

Parse the report and list all data points to verify. Print each item with its status:

📊 正在提取数据点...

[待验证]  1. 执行摘要 > 全年收入: 3,649亿元
[待验证]  2. 执行摘要 > YoY增长: +8.1%
[待验证]  3. 关键发现1 > 市场规模: 4,200亿元
[待验证]  4. 关键发现1 > 增长率: 12%
[待验证]  5. 表格 > Q4收入: 892亿元
...

---

Step 7.3: Validate & Mark Progress (with strikethrough)

For each validation, print the result directly. Completed items get strikethrough:

🔍 正在逐项验证...

[验证中]  1. 执行摘要 > 全年收入: 3,649亿元
          └─ 查找源数据: 364,854,746千元...找到 ✓
[完成~~]  2. 执行摘要 > YoY增长: +8.1%
          └─ 计算验证: (3649-3376)/3376=8.08% ✓

[验证中]  3. 关键发现1 > 市场规模: 4,200亿元
          └─ 查找源数据: 未找到直接字段，估算值？ ⚠️

[完成~~]  4. 关键发现1 > 增长率: 12%
          └─ 计算验证: (4200-3750)/3750=12% ✓

[错误✗]   5. 表格 > 市场份额: 68%
          └─ 查找源数据: 源文件无此字段 ❌ 疑似幻觉

---

Step 7.4: Final Summary

After all validations, print summary table:

════════════════════════════════════════════════════════════════════════════════
                                   📋 审计结果汇总
════════════════════════════════════════════════════════════════════════════════

  ✅ 已验证:     12 项
  ⚠️ 疑似幻觉:    2 项  (需要人工确认)
  ❌ 数据错误:    1 项  (需立即修正)
  🔍 无法验证:    3 项  (源数据中未找到)

────────────────────────────────────────────────────────────────────────────────
                                   📊 准确率: 75%
════════════════════════════════════════════════════════════════════════════════

---

Step 7.5: Detailed Findings

Print detailed list of issues:

════════════════════════════════════════════════════════════════════════════════
                                   ⚠️ 需要关注的问题
════════════════════════════════════════════════════════════════════════════════

【疑似幻觉 - 需人工确认】
  1. 第5页-发现2 > Q4单季亏损161亿元
     └─ 源数据未提供Q4分部损益，建议核实数据来源

  2. 第6页 > 新业务亏损扩大79%
     └─ 计算基数183亿待确认，请核实2024年新业务亏损数据

【数据错误 - 需修正】
  3. 第X页-表格 > 市场份额68%
     └─ 源数据中无此字段，纯属虚构，建议删除或修正为61%

【无法验证 - 建议添加来源注释】
  4. 第4页 > 行业排名TOP3
     └─ 源数据无此字段，建议标注数据来源

════════════════════════════════════════════════════════════════════════════════

---

Step 7.6: Ask for Fix

┌─────────────────────────────────────────────────────────────────────────────┐
│  审计完成！是否需要修复这些问题？                                            │
│                                                                             │
│  1. [自动修复]  自动修正所有可计算的错误                                     │
│  2. [选择性修复] 逐项选择要修复的内容                                        │
│  3. [生成报告]  在报告中高亮标记问题项（PDF保持原样）                        │
│  4. [跳过]     保持原样，不做修改                                           │
└─────────────────────────────────────────────────────────────────────────────┘

---

Terminal Output Format Reference

Use this format for audit output:

# Header box
echo "╔════════════════════════════════════════════════════════════════╗"
echo "║  🔍 数据审计开始                                                ║"
echo "╚════════════════════════════════════════════════════════════════╝"

# Pending item
echo "[待验证]  1. 执行摘要 > 全年收入: 3,649亿元"

# In progress (with spinner animation)
echo -n "[验证中]  2. 执行摘要 > YoY增长: +8.1%  "
echo "└─ 查找源数据..."

# Completed with strikethrough
echo "[完成~~]  2. 执行摘要 > YoY增长: +8.1%"
echo "          └─ 计算验证: 8.08% ✓"

# Warning
echo "[⚠️ 疑似]  3. 第5页 > Q4亏损161亿元"
echo "          └─ 源数据未提供Q4分部数据"

# Error
echo "[❌ 错误]  4. 第X页 > 市场份额68%"
echo "          └─ 源数据无此字段，疑似虚构"

ANSI Colors for Terminal (Optional)

# Colors
GREEN='\033[0;32m'    # Verified
YELLOW='\033[1;33m'   # Warning
RED='\033[0;31m'      # Error
BLUE='\033[0;34m'     # In progress
NC='\033[0m'          # No Color

# Strikethrough (using Unicode)
echo -e "${GREEN}[完成~~] 数据项 ${NC}"

# Example with color
echo -e "${GREEN}✓ 已验证${NC}: 全年收入 3,649亿元"
echo -e "${YELLOW}⚠️ 疑似${NC}: Q4亏损161亿元 (需确认)"
echo -e "${RED}✗ 错误${NC}: 市场份额68% (源数据无此字段)"

---

Quick Audit Flow (Summary)

1. 打印审计头部信息
2. 列出所有待验证数据点
3. 逐项验证，每项打印：
   - 验证中状态
   - 验证结果 (✓/⚠️/✗)
   - 发现详情
4. 完成后打印汇总统计
5. 列出问题清单
6. 询问用户修复方式

---

Supporting Files

File	Purpose	When to Read
a4-report-template.md	A4 HTML structure and print CSS	Phase 3 (generation)
STYLE_PRESETS.md	3 consulting firm style presets	Phase 2 (style selection)
scripts/export-pdf.sh	Browser-based PDF export guidance	Phase 6 (export)
scripts/audit-checklist.md	Data audit checklist & guide	Phase 7 (audit)

---

Design Guidelines

Typography

Element	Font	Size	Weight
Report Title	Playfair Display / Noto Serif	32-36pt	700
Section Header	Noto Sans / Source Sans	18-20pt	600
Subsection	Noto Sans / Source Sans	14-16pt	600
Body Text	Noto Sans / Source Sans	10-11pt	400
Caption/Source	Noto Sans / Source Sans	8-9pt	400
Table Header	Noto Sans / Source Sans	9-10pt	600
Table Body	Noto Sans / Source Sans	9-10pt	400

Colors (McKinsey-Style Palette)

:root {
    /* Primary */
    --primary-navy: #1a365d;
    --primary-dark: #0f2444;
    --primary-light: #2c5282;

    /* Accent */
    --accent-blue: #3182ce;
    --accent-silver: #718096;

    /* Neutrals */
    --text-primary: #1a202c;
    --text-secondary: #4a5568;
    --text-muted: #a0aec0;

    /* Backgrounds */
    --bg-white: #ffffff;
    --bg-light: #f7fafc;
    --bg-chart: #edf2f7;

    /* Charts */
    --chart-1: #2c5282;
    --chart-2: #3182ce;
    --chart-3: #63b3ed;
    --chart-4: #90cdf4;
}

Print Optimization

/* A4 Page Setup */
@page {
    size: A4;
    margin: 20mm 15mm;
}

/* Avoid page breaks inside these */
.no-break {
    page-break-inside: avoid;
}

/* Force page breaks before these */
.break-before {
    page-break-before: always;
}

---

Content Quality Standards

Write like a top-tier consultant:

1. 结论先行 — Lead with the key finding/recommendation
2. 数据支撑 — Every claim backed by evidence
3. 逻辑清晰 — MECE structure (Mutually Exclusive, Collectively Exhaustive)
4. Actionable — Specific, not vague recommendations
5. 简洁有力 — No jargon, no fluff

Headline Formula:

[Key Finding/Recommendation] + [Evidence/Context] + [Implication/Stakes]

Example:

"中国高端消费品市场预计年增12%，头部品牌应加速布局下沉渠道以捕获新增消费人群。"

---

Anti-Patterns (Avoid These)

• ❌ Generic "In today's rapidly changing world..." opener
• ❌ More than 6 bullet points per section
• ❌ Decorative elements that add no information
• ❌ Colorful charts without clear takeaway
• ❌ Vague recommendations ("should consider improving...")
• ❌ Mixing hierarchical levels in lists
• ❌ Chart without explanation — readers won't understand the significance
• ❌ Report without knowing the audience — language/depth may be wrong

---

PDF 打印专项优化 ⚠️ 必读

核心问题：并排图表在 PDF 导出时变成堆叠

浏览器打印时，CSS grid 布局可能被降级为单列，导致 .two-col/.two-columns 的两列并排图表变成垂直堆叠。

解决方案：打印专用 CSS 强制保持 Grid 布局

在模板 CSS 中必须添加以下 @media print 规则：

/* ===========================================
   PRINT OPTIMIZATION — CRITICAL FOR PDF EXPORT
   =========================================== */

/* 1. 强制两列布局在打印时保持 grid */
@media print {
    .two-col,
    .two-columns,
    [style*="grid-template-columns: 1fr 1fr"] {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        grid-column-gap: 8pt !important;
    }
}

/* 2. SVG 图表高度压缩 — 每行间距从 18px 减到 16px */
.chart-svg {
    height: 200px !important;  /* 原 235px */
}

/* 3. 容器 padding 收紧 */
.chart-container,
.highlight-box,
.insight-box {
    padding: 6pt !important;  /* 原 8pt */
}

/* 4. 图例字体和间距压缩 */
.legend-item {
    font-size: 8.5pt !important;  /* 原 9pt */
    margin: 3pt !important;  /* 原 4pt */
}

/* 5. 详细拆解卡片统一收紧 */
.detail-card,
.analysis-card,
拆解-card {
    gap: 8pt !important;
    margin-top: 4pt !important;
    padding: 6pt !important;
}

完整打印优化 CSS（直接复制到模板）

/* ===========================================
   PRINT MEDIA QUERIES — PDF EXPORT FIXES
   =========================================== */
@media print {
    /* 强制保持两列 grid 布局 */
    .two-col,
    .two-columns {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        grid-template-rows: auto auto !important;
        gap: 8pt !important;
        page-break-inside: avoid !important;
    }

    /* 强制保持三列 grid 布局 */
    .three-columns,
    .metrics-grid {
        display: grid !important;
        grid-template-columns: repeat(3, 1fr) !important;
        grid-template-columns: repeat(4, 1fr) !important;
        page-break-inside: avoid !important;
    }

    /* SVG 高度压缩 */
    .chart-svg {
        height: 200px !important;
        max-height: 200px !important;
    }

    /* 图表容器 padding 收紧 */
    .chart-container {
        padding: 6pt !important;
        margin: 4pt 0 !important;
    }

    /* chart-guide 和 key-insights 紧凑化 */
    .chart-guide,
    .key-insights {
        padding: 6pt 10pt !important;
        margin: 4pt 0 !important;
        font-size: 8pt !important;
    }

    /* 图例项压缩 */
    .legend-item {
        font-size: 8.5pt !important;
        margin: 3pt 0 !important;
    }

    /* 详细拆解卡片 */
    .detail-card,
    .拆解-card {
        gap: 8pt !important;
        margin-top: 4pt !important;
        padding: 6pt !important;
    }

    /* 防止页面断在 grid 中间 */
    .two-col,
    .two-columns,
    .chart-container,
    .finding-box,
    .recommendation {
        page-break-inside: avoid !important;
        break-inside: avoid !important;
    }

    /* 确保背景色打印 */
    * {
        print-color-adjust: exact !important;
        -webkit-print-color-adjust: exact !important;
    }
}

尺寸压缩对照表

元素	原值	新值	说明
SVG 高度	235px	200px	图表行间距 18→16px
容器 padding	8pt	6pt	进一步收紧
图例字体	9pt	8.5pt	略为压缩
图例 margin	4pt	3pt	减小间距
拆解卡片 gap	(原值)	8pt	统一
拆解卡片 margin-top	(原值)	4pt	减小

打印设置检查清单

导出 PDF 前确认：

• 打印设置中 "背景图形" 已勾选
• 纸张尺寸选择 A4
• 边距设置为 "最小值" 或 "无"
• 方向为 "纵向"
• 取消勾选"页眉页脚"(使用 CSS 自定义 header/footer)