fmode-voc-projects/scripts/tools/compound-liver-render.js

// ==============================================================================
// 江中肝纯片 · 产品复合体 HTML 报告渲染模块（PPT 式 deck）
// 严格对标《2.美佑童-产品复合体.docx》的 2.1-2.6 章节结构
// 质量对标 VOC 报告（>= 30 slides，海报级视觉，本地字体/动画/导航全链路）
// ==============================================================================
//
// Slide 结构（36 张）：
//   01 · 封面 Cover
//   02 · 目录 Agenda
//   03 · Chapter 2.1 Divider · 目标人群
//   04-08 · 2.1.1 - 2.1.5 子章（5 张）
//   09 · Chapter 2.2 Divider · 定位
//   10-15 · 2.2.1 - 2.2.6 子章（6 张）
//   16 · Chapter 2.3 Divider · 包装
//   17-21 · 2.3.1 - 2.3.5 子章（5 张）
//   22 · Chapter 2.4 Divider · 主视觉 KV
//   23-27 · 2.4.1 - 2.4.5 子章（5 张）
//   28 · Chapter 2.5 Divider · 价值链
//   29-31 · 2.5.1 - 2.5.3 子章（3 张）
//   32 · Chapter 2.6 Divider · 总结
//   33-35 · 2.6.1 - 2.6.3 子章（3 张）
//   36 · Next Steps / 附录
//
// 渲染模式：各 section 函数独立，buildHTML 负责组装。
// 本批次 (Batch 1) 实现：cover + agenda + 6 个章节分割页 + 框架装配。
// 后续批次填充 27 个内容 slides。
// ==============================================================================

const STYLES = require('./voc-styles.js');
const SCRIPTS = require('./voc-scripts.js');
// Batch 6 · 独立拆分的 2.5 价值链 + 2.6 总结 渲染模块（避免单文件过大）
const { renderValue1Canvas, renderValue2Chain, renderValue3Journey } = require('./compound-liver-render-value.js');
const { renderSynthesis1Elements, renderSynthesis2Inheritance, renderSynthesis3NextStage } = require('./compound-liver-render-synthesis.js');

// ============================================================
// 常量：主题色 / 章节元信息
// ============================================================
const BRAND = {
    JIANG_GREEN: '#2D9C5D',       // 江中主色
    LIVER_AMBER: '#D4A574',       // 护肝琥珀
    TECH_BLUE: '#0085CA',         // 科技信任蓝
    WARM_ORANGE: '#FF8C42',       // 温暖橙
    ROSE: '#FF4D8D',              // 玫瑰（情绪）
};

const CHAPTERS = [
    { id: 1, num: '2.1', key: 'audience', title: '目标人群', en: 'AUDIENCE', tone: 'rose',   color: BRAND.ROSE,         icon: '👥',
      summary: '学习型/焦虑型/情绪肝 3 类核心人群，基于 VOC 真实原声刻画' },
    { id: 2, num: '2.2', key: 'position', title: '定位',     en: 'POSITIONING', tone: 'amber', color: BRAND.LIVER_AMBER,  icon: '🎯',
      summary: '「场景化复合护肝」心智占位 — 4 重协同 · 一片多效' },
    { id: 3, num: '2.3', key: 'package',  title: '包装',     en: 'PACKAGING',   tone: 'green', color: BRAND.JIANG_GREEN,  icon: '📦',
      summary: '江中绿 × 琥珀金双色系，4 层视觉信息架构' },
    { id: 4, num: '2.4', key: 'kv',       title: '主视觉 KV', en: 'KEY VISUAL', tone: 'purple', color: '#8B5CF6',         icon: '🎨',
      summary: '3 版本（情感守护/理性科普/对比进化）视觉资产矩阵' },
    { id: 5, num: '2.5', key: 'value',    title: '价值链',   en: 'VALUE CHAIN', tone: 'blue',  color: BRAND.TECH_BLUE,    icon: '⚙️',
      summary: '研发→生产→渠道→营销→服务→体验 6 环价值创造' },
    { id: 6, num: '2.6', key: 'synthesis',title: '总结',     en: 'SYNTHESIS',   tone: 'amber', color: BRAND.LIVER_AMBER,  icon: '🧩',
      summary: '复合体要素 · 前序承接 · 下阶段衔接' },
];

const TOTAL_SLIDES = 36;

// ============================================================
// utils
// ============================================================
function esc(s) {
    return String(s ?? '').replace(/[&<>"']/g, (c) => ({ '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;' }[c]));
}
function fmtNum(n) {
    if (n == null || isNaN(n)) return '—';
    if (n >= 10000) return (n / 10000).toFixed(1).replace(/\.0$/, '') + 'w';
    if (n >= 1000) return (n / 1000).toFixed(1).replace(/\.0$/, '') + 'k';
    return String(n);
}
function fmtMoney(n) {
    if (n == null) return '—';
    return '¥' + Number(n).toLocaleString('zh-CN');
}
function sn(n) { return String(n).padStart(2, '0'); }
function star(score, max = 5) {
    const full = Math.round(score);
    return '★'.repeat(full) + '☆'.repeat(max - full);
}

// ============================================================
// 共用组件
// ============================================================
function renderNav(chaptersActive = true) {
    const dots = [
        { tip: '封面', href: '#s0' },
        { tip: '目录', href: '#agenda' },
        ...CHAPTERS.map((c) => ({ tip: `${c.num} ${c.title}`, href: `#${c.key}` })),
    ];
    return `<nav class="nav-rail" aria-label="章节导航">
    ${dots.map((d, i) => `<a class="nav-dot${i === 0 ? ' active' : ''}" href="${d.href}" data-tip="${esc(d.tip)}" data-idx="${i}"></a>`).join('')}
  </nav>
  <div class="top-bar">
    <div class="brand-logo">江中<span class="dot">·</span>产品开发部 / 肝纯片复合体方案 v1.0</div>
    <div class="text-mono text-xs" style="color:var(--text-3);">BRAIN·HACK / VOC × PRODUCT-COMPOUND</div>
  </div>`;
}

function renderKbdHint() {
    return `<div class="kbd-hint" id="kbdHint">
    <span>键盘切换</span>
    <kbd>↑</kbd><kbd>↓</kbd>
    <span>或</span>
    <kbd>PgUp</kbd><kbd>PgDn</kbd>
  </div>`;
}

// ============================================================
// Slide 01 · 封面
// ============================================================
function renderCover({ product, A, collectedAt, slideNum, slideTotal }) {
    const xhsNotes = A?.metrics?.notes || 15;
    const xhsComments = A?.metrics?.sampleComments || 50;
    const amazonCount = A?.amazon?.total || 689;
    const opGrade = A?.amazon?.opportunity?.grade || 'B · 推荐';
    const sweetPrice = A?.amazon?.opportunity?.sweetSpot || '$15-25';

    return `<section class="report-section" id="s0" data-tone="amber" data-slide-num="${slideNum}/${slideTotal}" style="min-height:100vh;padding:0;">
  <div class="cover-hero">
    <div class="aurora" aria-hidden="true"><span></span><span></span><span></span></div>
    <div class="cover-grid-bg"></div>
    <div class="cover-content">
      <div class="cover-meta rise-in">
        <span>江中 / 产品开发部 / 2026 · ${esc(product)} · 产品复合体方案</span>
      </div>
      <div class="cover-title-stack">
        <p class="text-mono text-amber rise-in" style="font-size:0.9rem;letter-spacing:0.2em;margin-bottom:18px;">OTC · 保肝片剂 · 复合升级方向</p>
        <h1 class="cover-title rise-in">${esc(product)}</h1>
        <p class="text-poster rise-in" style="margin-top:20px;color:var(--text-2);">产品复合体方案 · 2026</p>
      </div>
      <p class="cover-sub fade-up">
        基于 <strong class="text-amber">${xhsNotes}</strong> 篇小红书笔记 ·
        <strong class="text-amber">${xhsComments}</strong> 条真实 VOC 原声 ·
        叠加 Amazon <strong class="text-amber">${amazonCount}</strong> 款国际对标 · TikTok Top 作者生态 · TT Ads 官方关键词洞察，
        按《美佑童-产品复合体》5 维框架推演，输出目标人群 / 定位 / 包装 / 主视觉 / 价值链完整方案。
      </p>
      <div class="cover-stats fade-up">
        <div class="cover-stat"><div class="num">${CHAPTERS.length}</div><div class="lbl">核心章节</div></div>
        <div class="cover-stat"><div class="num">${slideTotal}</div><div class="lbl">完整 slide</div></div>
        <div class="cover-stat"><div class="num">${esc(opGrade.split(' ')[0] || 'B')}</div><div class="lbl">品类机会等级</div></div>
        <div class="cover-stat"><div class="num">${esc(sweetPrice)}</div><div class="lbl">甜点价位</div></div>
      </div>
      <p class="text-mono text-xs fade-up" style="margin-top:64px;">SCROLL DOWN · 数据采集 ${esc(collectedAt)}</p>
    </div>
  </div>
</section>`;
}

// ============================================================
// Slide 02 · 目录 Agenda
// ============================================================
function renderAgenda({ slideNum, slideTotal }) {
    return `<section class="report-section" id="agenda" data-tone="amber" data-slide-num="${slideNum}/${slideTotal}">
  <div class="section-inner">
    <div class="section-head rise-in">
      <div class="section-eyebrow">CONTENTS · 目录总览</div>
      <h2 class="text-h1"><span class="headline-anim">产品复合体 · 5 维方案</span></h2>
      <p class="section-sub">从目标人群到价值链闭环 · 每一维都以 VOC 真实证据驱动 · 每一步都可以直接落产品 PRD</p>
    </div>

    <div class="grid" style="grid-template-columns:repeat(2, 1fr); gap:24px; margin-top: 20px;">
      ${CHAPTERS.map((c, i) => `
      <a href="#${c.key}" class="fade-up" style="text-decoration:none; display:block; background:var(--bg-1); border:1px solid var(--border); border-left:4px solid ${c.color}; border-radius:var(--radius-md); padding:28px; transition:all .35s cubic-bezier(.2,.7,.2,1); position:relative; overflow:hidden;" onmouseover="this.style.transform='translateY(-4px)'; this.style.borderColor='${c.color}'; this.style.boxShadow='0 20px 60px -20px ${c.color}55'" onmouseout="this.style.transform='translateY(0)'; this.style.borderColor='var(--border)'; this.style.boxShadow='none'">
        <div style="position:absolute; top:-20px; right:-10px; font-family:var(--font-head); font-weight:900; font-size:9rem; line-height:1; color:${c.color}; opacity:.08; letter-spacing:-0.06em; pointer-events:none;">${c.num.replace('.', '')}</div>
        <div style="display:flex; justify-content:space-between; align-items:start; margin-bottom:16px;">
          <div class="text-mono text-xs" style="color:${c.color}; letter-spacing:0.18em; font-weight:700;">${c.num} · ${c.en}</div>
          <div style="font-size:1.8rem; filter:grayscale(20%);">${c.icon}</div>
        </div>
        <h3 class="text-h2" style="margin:0 0 12px; color:var(--text-1); font-size:1.6rem;">${esc(c.title)}</h3>
        <p style="color:var(--text-2); font-size:0.95rem; line-height:1.6; margin-bottom:16px;">${esc(c.summary)}</p>
        <div style="padding-top:16px; border-top:1px solid var(--border); display:flex; justify-content:space-between; align-items:center;">
          <span class="text-xs text-mono" style="color:var(--text-3); letter-spacing:0.12em;">→ 跳转章节</span>
          <span class="text-mono text-xs" style="color:${c.color};">${i + 1} / ${CHAPTERS.length}</span>
        </div>
      </a>`).join('')}
    </div>

    <div class="fade-up" style="margin-top:48px; padding:24px 28px; background:linear-gradient(135deg, rgba(245,166,35,0.04), rgba(255,77,141,0.03)); border:1px solid rgba(245,166,35,0.15); border-radius:var(--radius-md);">
      <div class="text-mono text-xs" style="color:var(--amber); letter-spacing:0.15em; margin-bottom:10px;">METHODOLOGY · 方法论参考</div>
      <div style="color:var(--text-1); font-size:1rem; line-height:1.7;">
        本方案严格参照江中已有《美佑童-产品复合体.docx》的 <strong style="color:var(--amber);">5 维 × 27 子章节</strong>标准格式推演；<br/>
        VOC 证据池来自 <strong style="color:var(--amber);">江中肝纯片 VOC 报告</strong>（XHS 15 篇 / 评论 50 条 / Amazon 689 款）+ <strong style="color:var(--amber);">TikTok Top 5 海外作者 + TT Ads 官方情报</strong>；<br/>
        每一个结论都附 <strong style="color:var(--amber);">真实原声 / 竞品档案 / 市场数据</strong>三重交叉验证。
      </div>
    </div>
  </div>
</section>`;
}

// ============================================================
// Chapter Divider · 章节分割页（复用组件）
// ============================================================
function renderChapterDivider({ slideNum, slideTotal, chapter, subsections, heroLine, A }) {
    const c = chapter;
    return `<section class="report-section" id="${c.key}" data-tone="${c.tone}" data-slide-num="${slideNum}/${slideTotal}" style="justify-content:center;">
  <div class="section-inner">

    <div class="rise-in" style="text-align:center; margin-bottom:48px;">
      <div class="text-mono" style="color:${c.color}; letter-spacing:0.35em; font-size:0.8rem; margin-bottom:20px;">CHAPTER ${c.num} · ${c.en}</div>
      <h1 style="font-family:var(--font-head); font-weight:900; font-size:clamp(4rem, 10vw, 8rem); line-height:0.92; letter-spacing:-0.04em; color:#fff; background:linear-gradient(135deg, #fff 30%, ${c.color} 100%); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; margin:0 0 18px;">
        ${esc(c.title)}
      </h1>
      <p class="text-poster" style="font-size:clamp(1.2rem, 2.2vw, 1.8rem); color:var(--text-2); font-weight:500; max-width:820px; margin:0 auto; line-height:1.5;">${esc(c.summary)}</p>
    </div>

    ${heroLine ? `<div class="fade-up" style="max-width:920px; margin:0 auto 40px; padding:28px 36px; background:rgba(255,255,255,0.02); border-left:4px solid ${c.color}; border-radius:0 var(--radius-md) var(--radius-md) 0;">
      <div class="text-mono text-xs" style="color:${c.color}; letter-spacing:0.15em; margin-bottom:10px;">KEY TAKE · 本章核心</div>
      <div style="font-size:1.15rem; line-height:1.75; color:var(--text-1);">${heroLine}</div>
    </div>` : ''}

    <div class="grid fade-up" style="grid-template-columns:repeat(${subsections.length}, 1fr); gap:14px; max-width:1100px; margin:0 auto;">
      ${subsections.map((sub, i) => `
      <div style="background:var(--bg-1); border:1px solid var(--border); border-radius:var(--radius-md); padding:18px 16px; display:flex; flex-direction:column; gap:8px; border-top:2px solid ${c.color};">
        <div class="text-mono text-xs" style="color:${c.color}; letter-spacing:0.1em; font-weight:700;">${c.num}.${i + 1}</div>
        <div style="font-weight:700; font-size:0.9rem; color:var(--text-1); line-height:1.35;">${esc(sub)}</div>
      </div>`).join('')}
    </div>

    <div class="fade-up text-mono text-xs" style="margin-top:56px; text-align:center; color:var(--text-3); letter-spacing:0.2em;">
      ↓ 滚动查看 ${subsections.length} 个子章节展开
    </div>
  </div>
</section>`;
}

// ============================================================
// 各章节 subsections 清单（对标美佑童 docx 2.1-2.6 全部子章节）
// ============================================================
const CHAPTER_SUBSECTIONS = {
    'audience': [
        '核心人群画像', '影响人群画像', '决策旅程分析', '心理洞察总结', '人群分层策略',
    ],
    'position': [
        '核心定位表述', '定位诠释', '目标场景', '核心利益模型', '品牌个性', '品牌架构',
    ],
    'package': [
        '包装策略', '视觉层级设计', '关键信息传达', '竞品包装差异化', '合规要求',
    ],
    'kv': [
        '核心视觉概念', '画面构成说明', '色彩系统', '字体系统', '应用延展',
    ],
    'value': [
        '价值主张画布', '价值创造链', '用户价值获取路径',
    ],
    'synthesis': [
        '复合体要素总结', '与前序方案承接', '下一阶段衔接',
    ],
};

const CHAPTER_HERO_LINES = {
    'audience': '国内"护肝=水飞蓟片"红海同质化 → 按 VOC 解构 <strong style="color:#FF4D8D;">3 类真实人群</strong>：<strong>熬夜打工人</strong>（4001赞爆款"打工人自救指南"）、<strong>应酬男</strong>（场景 7 次最高）、<strong>情绪肝女性</strong>（肝郁气滞/肝火大原声反复出现）。每类人群痛点-渠道-话术-决策路径均独立刻画。',
    'position': '区别于美林/泰诺林/水飞蓟片的单成分标配，以 <strong style="color:#D4A574;">"4 重协同护肝 · 一片多效"</strong> 切入市场 — 对标 Amazon Top 6 中 4 款都是复合配方（Milk Thistle+Turmeric+NAC+Dandelion+Glutathione），在国内 OTC 渠道建立"场景化复合"第一心智。',
    'package': '江中绿 × 琥珀金双色系突出<strong style="color:#2D9C5D;">品牌资产迁移</strong>；4 层视觉架构（视觉焦点/认知信息/信任背书/合规信息），正面<strong style="color:#2D9C5D;">成分克数透明表</strong>主动回应 VOC Top #3「不要吃护肝片」信任危机。',
    'kv': '推导自 <strong style="color:#8B5CF6;">「三重协同守护」</strong>核心概念，输出 3 套完整 KV：<strong>情感守护版</strong>（夜间场景）/ <strong>理性科普版</strong>（分子对比）/ <strong>对比进化版</strong>（单一 vs 复合），各自对应电商首页、社媒、药店 POP 差异化应用。',
    'value': '研发端双路并进（循证护肝 + 中医疏肝），配合 <strong style="color:#0085CA;">一物一码</strong>、服用日历、<strong style="color:#0085CA;">独立第三方检测报告</strong>形成对抗「医生话术模板化」信任危机的完整价值闭环。',
    'synthesis': '整合前序 5 个维度 → 承接品类定位方案 → 向营销复合体 / 海报 AI 提示词 / 渠道策略传递，形成"定位-产品-营销-传播"四段闭环的完整输出。',
};

// ============================================================================
// ============ Chapter 2.1 · 目标人群 · 5 子章完整内容 ========================
// ============================================================================

// ----- 2.1.1 核心人群画像 · 3 Persona Deep Dive ------------------------------
function renderAudience1CorePersonas({ slideNum, slideTotal, chapter, A }) {
    const c = chapter;
    const personas = [
        {
            avatar: '🌙', name: '熬夜打工人 · 小王', age: '25-35 岁', gender: '55% 男 / 45% 女',
            income: '¥15-30 万', city: '一线 / 新一线',
            tint: '#FF4D8D',
            features: ['长期熬夜加班，生物钟紊乱', '体检发现轻度脂肪肝', '信息敏感、善于搜索对比', '愿为"健康自救"付费'],
            channels: [['小红书', 60], ['医生科普号', 45], ['知乎/微博', 30], ['丁香医生 APP', 25]],
            journey: ['体检报告红字 → 焦虑', '小红书搜「护肝+熬夜」', '对比水飞蓟 vs 复合配方', '京东/天猫下单', '打卡 2-4 周观察'],
            pains: ['起效慢、吃了无感', '担心副作用、肝肾负担', '不知道哪个品牌靠谱', '怕吃久了形成依赖'],
            keywords: ['熬夜救星', '护肝助眠', '男士护肝', '水飞蓟片', '打工人自救'],
            voc: { text: '打工人必备的自救指南之护肝片', likes: 4001, source: '小红书爆款笔记 Top #1' },
            size: 45,
        },
        {
            avatar: '🍺', name: '应酬男 · 老李', age: '35-50 岁', gender: '90% 男',
            income: '¥30-50 万', city: '全城市覆盖',
            tint: '#D4A574',
            features: ['商务应酬 ≥2 次/周', '长期酒精 + 油腻饮食', '轻中度脂肪肝已确诊', '家庭决策者、价格不敏感'],
            channels: [['药店店员推荐', 50], ['京东自营', 45], ['朋友/同事推荐', 40], ['百度搜索', 25]],
            journey: ['体检指标异常', '药店直接问店员', '看品牌→江中/汤臣倍健', '直接大包装下单', '家人监督长期服用'],
            pains: ['解酒效果不明显', '一次要吃很多颗', '药片大、吞咽难', '怕干扰正常代谢'],
            keywords: ['解酒护肝', '宿醉缓解', '应酬三件套', '解油腻', '脂肪肝'],
            voc: { text: '肝郁气滞可以吃护肝嘛 · 肝火大，脾气暴躁，肝气郁结，可以吃吗', likes: '24 + 23', source: 'VOC 应酬场景原声（场景 Top 1 · 7 次）' },
            size: 30,
        },
        {
            avatar: '🌸', name: '情绪肝女性 · 晓玲', age: '28-40 岁', gender: '95% 女',
            income: '¥10-25 万', city: '新一线 / 二三线',
            tint: '#8B5CF6',
            features: ['经期不规律、乳房胀痛', '易怒失眠、情绪波动大', '中医诊断肝郁气滞', '信中医、偏好国潮养生'],
            channels: [['小红书', 70], ['抖音中医号', 50], ['中医 KOL', 40], ['朋友圈种草', 25]],
            journey: ['中医问诊 → 肝郁诊断', '小红书搜疏肝解郁', '对比中药 vs 保健品', '看包装→国潮加分', '长期调理 2-3 个月'],
            pains: ['中药煎服繁琐', '西药保健品不信任', '怕激素类成分', '短期无感即放弃'],
            keywords: ['疏肝解郁', '养肝安神', '玫瑰护肝', '国潮养生', '养颜美颜'],
            voc: { text: '肝火大，脾气暴躁，肝气郁结，可以吃吗', likes: 23, source: '小红书护肝片真实评论' },
            size: 20,
        },
    ];

    return `<section class="report-section" id="${c.key}-1" data-tone="${c.tone}" data-slide-num="${slideNum}/${slideTotal}">
  <div class="section-inner">
    <div class="section-head rise-in">
      <div class="section-eyebrow" style="color:${c.color};">${c.num}.1 · CORE PERSONAS</div>
      <h2 class="text-h1"><span class="headline-anim">核心人群画像 · 3 类真实用户</span></h2>
      <p class="section-sub">基于江中肝纯片小红书 50 条真实评论 + 爆款笔记 VOC，解构出完整差异化的 3 类核心人群 · 覆盖 95% 目标用户 · 每类独立的痛点、渠道、话术体系</p>
    </div>

    <!-- 人群规模可视化 -->
    <div class="grid fade-up" style="grid-template-columns: 1fr; margin-bottom:32px;">
      <div style="display:flex; background:var(--bg-1); border:1px solid var(--border); border-radius:var(--radius-md); overflow:hidden; height:60px;">
        ${personas.map((p) => `<div style="flex:${p.size}; background:linear-gradient(135deg, ${p.tint}, ${p.tint}AA); display:flex; align-items:center; justify-content:center; gap:10px; color:#fff; font-weight:700; font-size:0.95rem; padding:0 12px;">
          <span style="font-size:1.4rem;">${p.avatar}</span>
          <span>${esc(p.name.split(' · ')[0])} · ${p.size}%</span>
        </div>`).join('')}
      </div>
    </div>

    <!-- 3 张 Persona 卡片 -->
    <div class="grid" style="grid-template-columns:repeat(3, 1fr); gap:20px;">
      ${personas.map((p, idx) => `
      <div class="fade-up" style="background:var(--bg-1); border:1px solid var(--border); border-top:4px solid ${p.tint}; border-radius:var(--radius-md); overflow:hidden; display:flex; flex-direction:column;">
        <!-- 头部 -->
        <div style="padding:24px; background:linear-gradient(180deg, ${p.tint}14, transparent); border-bottom:1px solid var(--border);">
          <div style="display:flex; align-items:start; gap:14px; margin-bottom:14px;">
            <div style="font-size:2.6rem; line-height:1;">${p.avatar}</div>
            <div style="flex:1;">
              <div class="text-mono text-xs" style="color:${p.tint}; letter-spacing:0.1em; margin-bottom:4px;">PERSONA ${String.fromCharCode(65 + idx)} · ${p.size}%</div>
              <div style="font-weight:800; font-size:1.15rem; line-height:1.3; color:var(--text-1);">${esc(p.name)}</div>
            </div>
          </div>
          <div style="display:grid; grid-template-columns:1fr 1fr; gap:6px; font-size:0.78rem;">
            <div style="color:var(--text-3);">年龄 · <span style="color:var(--text-1); font-weight:600;">${esc(p.age)}</span></div>
            <div style="color:var(--text-3);">性别 · <span style="color:var(--text-1); font-weight:600;">${esc(p.gender)}</span></div>
            <div style="color:var(--text-3);">收入 · <span style="color:var(--text-1); font-weight:600;">${esc(p.income)}</span></div>
            <div style="color:var(--text-3);">城市 · <span style="color:var(--text-1); font-weight:600;">${esc(p.city)}</span></div>
          </div>
        </div>

        <!-- 核心特征 -->
        <div style="padding:18px 24px; border-bottom:1px dashed var(--border);">
          <div class="text-mono text-xs" style="color:var(--text-3); letter-spacing:0.12em; margin-bottom:10px;">CORE TRAITS · 核心特征</div>
          <ul style="list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:6px;">
            ${p.features.map((f) => `<li style="font-size:0.85rem; color:var(--text-2); line-height:1.5; padding-left:16px; position:relative;"><span style="position:absolute; left:0; color:${p.tint};">▸</span>${esc(f)}</li>`).join('')}
          </ul>
        </div>

        <!-- 信息渠道（条形图） -->
        <div style="padding:18px 24px; border-bottom:1px dashed var(--border);">
          <div class="text-mono text-xs" style="color:var(--text-3); letter-spacing:0.12em; margin-bottom:12px;">CHANNELS · 信息获取渠道</div>
          <div style="display:flex; flex-direction:column; gap:8px;">
            ${p.channels.map(([ch, pct]) => `<div>
              <div style="display:flex; justify-content:space-between; font-size:0.78rem; margin-bottom:3px;">
                <span style="color:var(--text-2);">${esc(ch)}</span>
                <span class="text-mono" style="color:${p.tint};">${pct}%</span>
              </div>
              <div style="height:4px; background:rgba(255,255,255,0.05); border-radius:2px; overflow:hidden;">
                <div style="width:${pct}%; height:100%; background:${p.tint}; border-radius:2px; transition:width .8s;"></div>
              </div>
            </div>`).join('')}
          </div>
        </div>

        <!-- 决策路径 -->
        <div style="padding:18px 24px; border-bottom:1px dashed var(--border);">
          <div class="text-mono text-xs" style="color:var(--text-3); letter-spacing:0.12em; margin-bottom:12px;">JOURNEY · 决策路径</div>
          <ol style="list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:8px; counter-reset:journey;">
            ${p.journey.map((step) => `<li style="counter-increment:journey; font-size:0.82rem; color:var(--text-2); line-height:1.45; padding-left:22px; position:relative;"><span style="position:absolute; left:0; top:1px; width:16px; height:16px; border-radius:50%; background:${p.tint}22; color:${p.tint}; font-weight:700; font-family:var(--font-mono); font-size:0.68rem; display:flex; align-items:center; justify-content:center;">${'①②③④⑤⑥⑦'[p.journey.indexOf(step)] || '•'}</span>${esc(step)}</li>`).join('')}
          </ol>
        </div>

        <!-- 核心痛点 -->
        <div style="padding:18px 24px; border-bottom:1px dashed var(--border);">
          <div class="text-mono text-xs" style="color:var(--rose); letter-spacing:0.12em; margin-bottom:10px;">PAIN · 核心痛点排序</div>
          <div style="display:flex; flex-direction:column; gap:5px;">
            ${p.pains.map((pain, i) => `<div style="display:flex; align-items:center; gap:8px; font-size:0.82rem;">
              <span class="text-mono" style="color:var(--rose); font-weight:700; min-width:18px;">#${i + 1}</span>
              <span style="color:var(--text-2); flex:1;">${esc(pain)}</span>
            </div>`).join('')}
          </div>
        </div>

        <!-- 触动关键词 -->
        <div style="padding:18px 24px; border-bottom:1px dashed var(--border);">
          <div class="text-mono text-xs" style="color:var(--text-3); letter-spacing:0.12em; margin-bottom:10px;">HOOK · 触动关键词</div>
          <div style="display:flex; flex-wrap:wrap; gap:6px;">
            ${p.keywords.map((kw) => `<span class="tag" style="background:${p.tint}14; color:${p.tint}; border-color:${p.tint}44; font-size:0.72rem;">${esc(kw)}</span>`).join('')}
          </div>
        </div>

        <!-- VOC 证据 -->
        <div style="padding:18px 24px; background:rgba(255,255,255,0.02); margin-top:auto;">
          <div class="text-mono text-xs" style="color:${p.tint}; letter-spacing:0.12em; margin-bottom:8px;">VOC EVIDENCE · 真实原声</div>
          <div style="font-size:0.85rem; color:var(--text-1); line-height:1.55; font-style:italic; margin-bottom:8px;">"${esc(p.voc.text)}"</div>
          <div style="display:flex; justify-content:space-between; font-size:0.72rem; color:var(--text-3);">
            <span>${esc(p.voc.source)}</span>
            <span class="text-mono" style="color:${p.tint};">♥ ${p.voc.likes}</span>
          </div>
        </div>
      </div>`).join('')}
    </div>

    <!-- 底部结论 bar -->
    <div class="fade-up" style="margin-top:32px; padding:20px 28px; background:linear-gradient(135deg, ${c.color}0A, rgba(255,255,255,0.01)); border-left:4px solid ${c.color}; border-radius:0 var(--radius-md) var(--radius-md) 0;">
      <div class="text-mono text-xs" style="color:${c.color}; letter-spacing:0.15em; margin-bottom:8px;">💡 PRODUCT INSIGHT</div>
      <div style="font-size:1rem; color:var(--text-1); line-height:1.75;">
        <strong style="color:${c.color};">3 类人群痛点完全不同 → 单 SKU 无法满足</strong>。建议按照<strong>熬夜版 (L-02)</strong> / <strong>应酬版 (L-01)</strong> / <strong>疏肝解郁版 (L-03)</strong> 做 3 条产品线分化，对应不同渠道 + 内容话术 + 包装视觉。
      </div>
    </div>

  </div>
</section>`;
}

// ----- 2.1.2 影响人群画像 · 3 Influencer Types -------------------------------
function renderAudience2Influencers({ slideNum, slideTotal, chapter, A }) {
    const c = chapter;
    const influencers = [
        {
            icon: '🩺', tint: '#0085CA', label: '医疗权威层',
            name: '三甲肝病科医生',
            weight: '决策权重 · 40%',
            traits: ['专业权威，影响诊断+购买决策', '关注循证医学、成分剂量、临床证据', '对新配方持开放但需要数据支持', '处方场景转介 OTC 的关键节点'],
            focusPoints: ['4 重协同的药理机制阐述', '与单成分水飞蓟的临床数据对比', '基于中国肝病流行病学的剂量设计'],
            examples: [
                { name: '丁香园肝病频道', type: '医学平台', fans: '1800w+', hook: '科普 + 专家问答' },
                { name: 'Dr. Joseph Salhab', type: 'TikTok · 肝健康', fans: '2.1M (VOC 源自)', hook: '海外肝健康 KOL Top 3' },
            ],
        },
        {
            icon: '📱', tint: '#FF4D8D', label: '养生 KOL / KOC 层',
            name: '小红书中医养生达人 + 成分党博主',
            weight: '决策权重 · 35%',
            traits: ['女性用户信任度高', '擅长种草内容（对比测评、成分拆解）', '关注颜值 + 体验 + 话题性', '可快速撬动小红书内容生态'],
            focusPoints: ['国潮养生内容调性', '"我吃了半年"真实打卡测评', '对比单成分 vs 复合配方的可视化'],
            examples: [
                { name: '中医养生 KOC · 小茉', type: '小红书', fans: '10-50w 腰部', hook: '真人试用 · 3 周打卡' },
                { name: '成分党博主 · 阿尼亚', type: '抖音 + 小红书', fans: '50w+', hook: '配方卡 + 成分表拆解' },
            ],
        },
        {
            icon: '💼', tint: '#FF8C42', label: '职场/打工人圈层',
            name: '职场自媒体博主 + 生活方式博主',
            weight: '决策权重 · 15%',
            traits: ['VOC 爆款笔记主力生产者（"打工人自救指南"4001赞）', '情感共鸣强，适合场景代入', '适合男性用户群体触达', '内容自然、不显广告属性'],
            focusPoints: ['熬夜加班场景故事化', '"体检发现脂肪肝"一镜到底纪实', '"男性护肝"明确标签投放'],
            examples: [
                { name: '打工人饲养员', type: '小红书职场号', fans: '30-100w', hook: '打工自救系列' },
                { name: '体检师阿健', type: '抖音', fans: '50w+', hook: '体检报告解读 · 脂肪肝专题' },
            ],
        },
    ];

    return `<section class="report-section" id="${c.key}-2" data-tone="${c.tone}" data-slide-num="${slideNum}/${slideTotal}">
  <div class="section-inner">
    <div class="section-head rise-in">
      <div class="section-eyebrow" style="color:${c.color};">${c.num}.2 · INFLUENCER LANDSCAPE</div>
      <h2 class="text-h1"><span class="headline-anim">影响人群画像 · 3 层传播关键节点</span></h2>
      <p class="section-sub">江中肝纯片走出小红书同质化内容 · 需要在 <strong style="color:${c.color};">医疗权威 / 养生 KOL / 职场博主</strong> 三层节点同时布局 · 形成"自上而下权威背书 + 自下而上圈层共鸣"的双向传播矩阵</p>
    </div>

    <!-- 3 影响者类型卡 -->
    <div style="display:flex; flex-direction:column; gap:18px;">
      ${influencers.map((inf, idx) => `
      <div class="fade-up" style="background:var(--bg-1); border:1px solid var(--border); border-left:4px solid ${inf.tint}; border-radius:var(--radius-md); padding:26px 28px;">
        <div style="display:grid; grid-template-columns: 90px 1fr 1.2fr; gap:26px; align-items:start;">

          <!-- 左侧 icon + 占比 -->
          <div style="text-align:center;">
            <div style="font-size:3rem; line-height:1; margin-bottom:10px;">${inf.icon}</div>
            <div class="text-mono text-xs" style="color:${inf.tint}; letter-spacing:0.1em; font-weight:700;">TIER ${idx + 1}</div>
          </div>

          <!-- 中间：名称 + 特征 -->
          <div>
            <div class="text-mono text-xs" style="color:${inf.tint}; letter-spacing:0.12em; margin-bottom:6px;">${esc(inf.label)} · ${esc(inf.weight)}</div>
            <h3 class="text-h3" style="margin:0 0 14px; font-size:1.2rem; color:var(--text-1);">${esc(inf.name)}</h3>
            <ul style="list-style:none; padding:0; margin:0 0 16px; display:flex; flex-direction:column; gap:6px;">
              ${inf.traits.map((t) => `<li style="font-size:0.85rem; color:var(--text-2); line-height:1.55; padding-left:16px; position:relative;"><span style="position:absolute; left:0; color:${inf.tint};">·</span>${esc(t)}</li>`).join('')}
            </ul>
            <div style="padding:12px 14px; background:rgba(255,255,255,0.02); border-left:2px solid ${inf.tint}; border-radius:0 6px 6px 0;">
              <div class="text-mono text-xs" style="color:${inf.tint}; letter-spacing:0.1em; margin-bottom:6px;">核心沟通重点</div>
              <ul style="list-style:none; padding:0; margin:0; font-size:0.82rem; color:var(--text-1); line-height:1.6;">
                ${inf.focusPoints.map((f) => `<li>· ${esc(f)}</li>`).join('')}
              </ul>
            </div>
          </div>

          <!-- 右侧：匹配 KOL -->
          <div>
            <div class="text-mono text-xs" style="color:var(--text-3); letter-spacing:0.12em; margin-bottom:12px;">MATCHED KOL · 候选合作池</div>
            <div style="display:flex; flex-direction:column; gap:10px;">
              ${inf.examples.map((ex) => `<div style="padding:12px 14px; background:var(--bg-2); border:1px solid var(--border); border-radius:6px;">
                <div style="display:flex; justify-content:space-between; align-items:start; margin-bottom:6px;">
                  <div style="font-weight:700; font-size:0.92rem; color:var(--text-1);">${esc(ex.name)}</div>
                  <span class="text-mono text-xs" style="color:${inf.tint}; white-space:nowrap;">${esc(ex.fans)}</span>
                </div>
                <div style="display:flex; justify-content:space-between; font-size:0.76rem; color:var(--text-3);">
                  <span>${esc(ex.type)}</span>
                  <span style="color:var(--text-2);">${esc(ex.hook)}</span>
                </div>
              </div>`).join('')}
            </div>
          </div>

        </div>
      </div>`).join('')}
    </div>

    <!-- 影响关系网络图 -->
    <div class="fade-up" style="margin-top:28px; padding:28px; background:var(--bg-1); border:1px solid var(--border); border-radius:var(--radius-md);">
      <div class="text-mono text-xs" style="color:${c.color}; letter-spacing:0.15em; margin-bottom:16px;">INFLUENCE FLOW · 影响力传导链路</div>
      <div style="display:grid; grid-template-columns: 1fr 40px 1fr 40px 1fr; gap:16px; align-items:center;">
        <div style="padding:14px; background:${influencers[0].tint}14; border:1px solid ${influencers[0].tint}44; border-radius:8px; text-align:center;">
          <div style="font-size:1.3rem; margin-bottom:6px;">${influencers[0].icon}</div>
          <div style="font-size:0.85rem; font-weight:700; color:var(--text-1);">医疗权威层</div>
          <div class="text-mono text-xs" style="color:${influencers[0].tint};">自上而下</div>
        </div>
        <div style="color:${c.color}; font-size:1.4rem; text-align:center;">→</div>
        <div style="padding:14px; background:${influencers[1].tint}14; border:1px solid ${influencers[1].tint}44; border-radius:8px; text-align:center;">
          <div style="font-size:1.3rem; margin-bottom:6px;">${influencers[1].icon}</div>
          <div style="font-size:0.85rem; font-weight:700; color:var(--text-1);">养生 KOL 层</div>
          <div class="text-mono text-xs" style="color:${influencers[1].tint};">圈层破壁</div>
        </div>
        <div style="color:${c.color}; font-size:1.4rem; text-align:center;">→</div>
        <div style="padding:14px; background:${influencers[2].tint}14; border:1px solid ${influencers[2].tint}44; border-radius:8px; text-align:center;">
          <div style="font-size:1.3rem; margin-bottom:6px;">${influencers[2].icon}</div>
          <div style="font-size:0.85rem; font-weight:700; color:var(--text-1);">职场自媒体层</div>
          <div class="text-mono text-xs" style="color:${influencers[2].tint};">圈层共鸣</div>
        </div>
      </div>
      <div style="margin-top:14px; text-align:center; font-size:0.82rem; color:var(--text-2); line-height:1.6;">
        <strong style="color:${c.color};">传播策略</strong>：<br/>
        医生背书建立权威锚点 → 养生 KOL 做内容扩散 → 职场博主做圈层共鸣 · <strong style="color:${c.color};">三层形成合力</strong>，对冲 VOC 爆款 #3 "<em>不要吃护肝片</em>" 的反向内容伤害
      </div>
    </div>

  </div>
</section>`;
}

// ----- 2.1.3 决策旅程分析 · Customer Journey Map -----------------------------
function renderAudience3Journey({ slideNum, slideTotal, chapter, A }) {
    const c = chapter;
    const stages = [
        { name: '认知',  icon: '👁️',  state: '潜在需求',    behavior: '浏览健康资讯',   touch: '小红书/朋友圈',    pain: '—',           chance: '场景化内容植入' },
        { name: '触发',  icon: '⚡',  state: '焦虑产生',    behavior: '搜索「护肝」',   touch: '百度/小红书搜索',  pain: '信息过载',    chance: '「复合护肝」关键词布局' },
        { name: '考虑',  icon: '🔍',  state: '对比决策',    behavior: '比较品牌+成分',  touch: '小红书/知乎测评',  pain: '不知哪个更好', chance: 'KOL 测评 + 成分白皮书' },
        { name: '决策',  icon: '💳',  state: '下单购买',    behavior: '确定品牌下单',   touch: '天猫/京东/药店',   pain: '价格/真伪担心', chance: '一物一码 + 第三方检测' },
        { name: '使用',  icon: '📦',  state: '服用观察',    behavior: '吃药观察效果',   touch: '产品本身',         pain: '剂量/时机拿捏', chance: '30 天打卡日历 + 服用指南' },
        { name: '评价',  icon: '⭐',  state: '效果验证',    behavior: '体检指标对比',   touch: '小红书分享',       pain: '效果不明显',  chance: 'Before/After 模板内容' },
        { name: '推荐',  icon: '🔁',  state: '扩散传播',    behavior: '推给亲友同事',   touch: '微信/朋友圈',      pain: '—',           chance: '复购激励 + 推荐奖金' },
    ];

    const touchpoints = [
        {
            name: '小红书', before: '搜「护肝片」全是同质内容 + 反向 VOC（「不要吃护肝片」2355赞）', after: '布局「新一代复合护肝」+「成分对比白皮书」+「熬夜党自救」+「疏肝解郁」4 大关键词矩阵',
        },
        {
            name: '药店终端', before: '店员对新复合配方不熟悉 · 黄金位置被传统水飞蓟片占据', after: '提供对比式 POP 物料（单成分 vs 复合）· 店员培训+分级返利· 申请 OTC 护肝专区黄金位',
        },
        {
            name: '电商平台', before: '详情页信息过载 · 用户不易找到差异化钩子', after: 'A+ 主图强化「4 重协同」可视化 · 一物一码直达服用指南 · 第三方检测报告在线可查',
        },
    ];

    return `<section class="report-section" id="${c.key}-3" data-tone="${c.tone}" data-slide-num="${slideNum}/${slideTotal}">
  <div class="section-inner">
    <div class="section-head rise-in">
      <div class="section-eyebrow" style="color:${c.color};">${c.num}.3 · CUSTOMER JOURNEY MAP</div>
      <h2 class="text-h1"><span class="headline-anim">决策旅程 · 从焦虑到推荐的 7 阶段</span></h2>
      <p class="section-sub">基于 VOC 原声提炼的用户完整决策路径 · 每一阶段标注真实行为 / 接触点 / 痛点 / 机会窗口 · 3 个关键触点优化路径</p>
    </div>

    <!-- 7 阶段横向流程 -->
    <div class="fade-up" style="margin-bottom:28px; position:relative;">
      <div style="display:grid; grid-template-columns:repeat(7, 1fr); gap:8px; position:relative; z-index:2;">
        ${stages.map((s, i) => `<div style="background:var(--bg-1); border:1px solid var(--border); border-top:3px solid ${c.color}; border-radius:var(--radius-md); padding:16px 12px; text-align:center;">
          <div style="font-size:1.8rem; margin-bottom:6px; line-height:1;">${s.icon}</div>
          <div class="text-mono text-xs" style="color:${c.color}; letter-spacing:0.08em; font-weight:700;">STAGE ${i + 1}</div>
          <div style="font-weight:700; font-size:0.95rem; color:var(--text-1); margin-top:4px;">${esc(s.name)}</div>
          <div style="font-size:0.72rem; color:var(--text-3); margin-top:2px;">${esc(s.state)}</div>
        </div>`).join('')}
      </div>
      <!-- 连接线 -->
      <div style="position:absolute; top:50%; left:6%; right:6%; height:2px; background:linear-gradient(90deg, ${c.color}44, ${c.color}); z-index:1; opacity:0.4;"></div>
    </div>

    <!-- 详细阶段表格 -->
    <div class="table-wrap fade-up" style="margin-bottom:32px;">
      <table class="data-tbl">
        <thead>
          <tr>
            <th style="width:60px;">Stage</th>
            <th style="width:80px;">阶段</th>
            <th>核心行为</th>
            <th>触点</th>
            <th style="color:var(--rose) !important;">痛点</th>
            <th style="color:${c.color} !important;">影响机会</th>
          </tr>
        </thead>
        <tbody>
          ${stages.map((s, i) => `<tr>
            <td class="tb-num">${i + 1}</td>
            <td><span style="font-size:1.15rem;">${s.icon}</span> <strong>${esc(s.name)}</strong></td>
            <td>${esc(s.behavior)}</td>
            <td style="color:var(--text-2);">${esc(s.touch)}</td>
            <td style="color:var(--rose);">${esc(s.pain)}</td>
            <td style="color:${c.color}; font-weight:600;">${esc(s.chance)}</td>
          </tr>`).join('')}
        </tbody>
      </table>
    </div>

    <!-- 关键触点优化 -->
    <h3 class="text-h2 fade-up" style="margin-top:12px; margin-bottom:18px;">🎯 关键触点优化 · 3 个放大器</h3>
    <div class="grid grid-3 fade-up" style="gap:16px;">
      ${touchpoints.map((tp, i) => `
      <div style="background:var(--bg-1); border:1px solid var(--border); border-top:3px solid ${c.color}; border-radius:var(--radius-md); overflow:hidden;">
        <div style="padding:18px 20px; background:linear-gradient(180deg, ${c.color}14, transparent);">
          <div class="text-mono text-xs" style="color:${c.color}; letter-spacing:0.1em; margin-bottom:4px;">TOUCHPOINT · 0${i + 1}</div>
          <h4 style="margin:0; font-size:1.1rem; font-weight:700; color:var(--text-1);">${esc(tp.name)}</h4>
        </div>
        <div style="padding:16px 20px; border-bottom:1px dashed var(--border);">
          <div class="text-mono text-xs" style="color:var(--rose); letter-spacing:0.12em; margin-bottom:8px;">BEFORE · 现状问题</div>
          <div style="font-size:0.85rem; color:var(--text-2); line-height:1.6;">${esc(tp.before)}</div>
        </div>
        <div style="padding:16px 20px;">
          <div class="text-mono text-xs" style="color:var(--green); letter-spacing:0.12em; margin-bottom:8px;">AFTER · 优化方案</div>
          <div style="font-size:0.85rem; color:var(--text-1); line-height:1.6;">${esc(tp.after)}</div>
        </div>
      </div>`).join('')}
    </div>

  </div>
</section>`;
}

// ----- 2.1.4 心理洞察总结 · 4 Deep Psychological Insights --------------------
function renderAudience4Insights({ slideNum, slideTotal, chapter, A }) {
    const c = chapter;
    const insights = [
        {
            num: '01',
            tint: '#FF4D8D',
            icon: '💊',
            title: '健康焦虑 + 自我补偿',
            theory: 'Self-Compensation Theory · 自我补偿心理',
            mechanism: '用户意识到"我熬夜了/应酬了/损肝了"，通过吃护肝片来心理补偿 — 这让护肝片变成了"道德许可证"，吃了就能继续放纵。',
            voc: '"那上大夜班怎么办到底能不能吃护肝片" · "经常熬夜加班，求男性护肝片推荐"',
            vocLikes: '30 + 16',
            strategy: '不要直接教育"别熬夜" · 要承认用户的现实场景 + 提供精准补偿方案 · Hero claim：<strong>"熬夜党的复合护肝"</strong>',
        },
        {
            num: '02',
            tint: '#D4A574',
            icon: '🌿',
            title: '中医情绪肝心智',
            theory: 'Cultural Schema Theory · 文化图式',
            mechanism: '中国用户广泛持有"肝主情志"认知：肝不好 = 易怒/失眠/经期不规律。现代 OTC 市场完全被西医叙事占据，留下巨大空位。',
            voc: '"肝郁气滞可以吃护肝嘛" · "肝火大，脾气暴躁，肝气郁结，可以吃吗"',
            vocLikes: '24 + 23',
            strategy: '产品端开发 <strong style="color:#8B5CF6;">L-03 疏肝解郁片</strong>（水飞蓟+玫瑰+柴胡+玉米须）· 直接对接中医"肝郁"话语体系 · 抢占情绪肝赛道',
        },
        {
            num: '03',
            tint: '#FF8C42',
            icon: '🛡️',
            title: '损失厌恶 > 收益追求',
            theory: 'Loss Aversion (Kahneman & Tversky, 1979)',
            mechanism: '用户对"不吃护肝片导致的伤害"的恐惧，远大于"吃护肝片获得的收益"的期待。VOC 证据：用户反向焦虑「不吃就睡不好」比「吃了更健康」更能触发购买。',
            voc: '"我吃了护肝片就能睡好，不吃就容易失眠是为什么呢"',
            vocLikes: 6,
            strategy: '话术从"护肝有好处"切换为"<strong style="color:#FF8C42;">不护肝的代价</strong>" · 场景代入「脂肪肝 3 年变肝硬化」等损失叙事 · 对比展示「继续熬夜 vs 护肝干预」两条时间线',
        },
        {
            num: '04',
            tint: '#0085CA',
            icon: '🔬',
            title: '权威话术失信危机',
            theory: 'Source Credibility Theory · 信源可信度',
            mechanism: '用户对"穿白大褂的医生推荐"产生了免疫反应 — 发现多个医生号文案一模一样，直接触发信任崩塌。这是传统 OTC 营销第一次面临的新危机。',
            voc: '"看了几个白大褂专家说，怎么词都一模一样的呢，背稿吗" · "医生其实也不是完全懂保健行业"',
            vocLikes: '3 + 24',
            strategy: '摒弃统一话术的医生软广 · 转向 <strong style="color:#0085CA;">独立第三方检测报告</strong> + <strong>真实用户 30 天打卡</strong> + <strong>成分克数透明表</strong> 三重可验证证据',
        },
    ];

    return `<section class="report-section" id="${c.key}-4" data-tone="${c.tone}" data-slide-num="${slideNum}/${slideTotal}">
  <div class="section-inner">
    <div class="section-head rise-in">
      <div class="section-eyebrow" style="color:${c.color};">${c.num}.4 · PSYCHOLOGICAL INSIGHTS</div>
      <h2 class="text-h1"><span class="headline-anim">心理洞察 · 4 条深层认知结构</span></h2>
      <p class="section-sub">VOC 原声背后的心理学机制解码 · 每条洞察都对应经典心理学理论 + 江中产品策略落点 · 这是做出"不一样的护肝片"的思维母题</p>
    </div>

    <!-- 4 条洞察 insight-banner 风格 -->
    <div style="display:flex; flex-direction:column; gap:20px;">
      ${insights.map((ins) => `
      <div class="insight-banner fade-up" data-num="${ins.num}" style="border-left:4px solid ${ins.tint}; background:linear-gradient(135deg, var(--bg-1) 0%, ${ins.tint}06 100%);">
        <div>
          <div style="display:flex; align-items:baseline; gap:14px; margin-bottom:10px;">
            <span style="font-size:2.2rem; line-height:1;">${ins.icon}</span>
            <div>
              <div class="text-mono text-xs" style="color:${ins.tint}; letter-spacing:0.15em;">INSIGHT ${ins.num} · ${esc(ins.theory)}</div>
              <h3 style="font-size:clamp(1.4rem, 2.4vw, 1.9rem); font-weight:800; color:var(--text-1); margin-top:6px; line-height:1.25;">${esc(ins.title)}</h3>
            </div>
          </div>
          <p class="insight-body" style="color:var(--text-2); font-size:1rem; line-height:1.75; max-width:95%;">${esc(ins.mechanism)}</p>
        </div>

        <!-- VOC 证据 + 策略建议 双栏 -->
        <div style="display:grid; grid-template-columns: 1fr 1fr; gap:20px;">
          <div style="padding:16px 18px; background:rgba(255,255,255,0.02); border-left:2px solid ${ins.tint}; border-radius:0 6px 6px 0;">
            <div class="text-mono text-xs" style="color:${ins.tint}; letter-spacing:0.12em; margin-bottom:8px;">VOC · 真实原声证据</div>
            <div style="font-size:0.9rem; color:var(--text-1); line-height:1.6; font-style:italic;">"${esc(ins.voc)}"</div>
            <div style="margin-top:8px; font-size:0.72rem; color:${ins.tint};" class="text-mono">♥ ${ins.vocLikes}</div>
          </div>
          <div style="padding:16px 18px; background:rgba(255,255,255,0.02); border-left:2px solid ${c.color}; border-radius:0 6px 6px 0;">
            <div class="text-mono text-xs" style="color:${c.color}; letter-spacing:0.12em; margin-bottom:8px;">🎯 APPLICATION · 策略应用</div>
            <div style="font-size:0.9rem; color:var(--text-1); line-height:1.65;">${ins.strategy}</div>
          </div>
        </div>
      </div>`).join('')}
    </div>

  </div>
</section>`;
}

// ----- 2.1.5 人群分层策略 · Segmentation Priority Matrix ---------------------
function renderAudience5Segmentation({ slideNum, slideTotal, chapter, A }) {
    const c = chapter;
    const segments = [
        {
            name: '熬夜打工人', pct: 45, priority: '最高', priColor: '#FF4D8D', icon: '🌙',
            strategies: {
                content: '小红书「打工人自救指南」系列 · 爆款模板复刻',
                channel: '天猫旗舰店 + 京东自营 + 小红书闭环',
                product: 'L-02 熬夜版（水飞蓟+NAC+GABA 助眠）¥138',
                kpi: '首年 GMV 目标 · 3000w ·占总盘 55%',
            },
        },
        {
            name: '应酬男', pct: 30, priority: '高', priColor: '#D4A574', icon: '🍺',
            strategies: {
                content: '京东/抖音「应酬脂肪肝3年变肝硬化」损失叙事',
                channel: 'OTC 药店 + 京东自营 + 企业大包团购',
                product: 'L-01 应酬版（水飞蓟+姜黄+葛根+B族）¥128 / L-05 家庭装 ¥228',
                kpi: '首年 GMV 目标 · 1800w ·占总盘 32%',
            },
        },
        {
            name: '情绪肝女性', pct: 20, priority: '中', priColor: '#8B5CF6', icon: '🌸',
            strategies: {
                content: '小红书中医养生 KOC 真人试用 · 3 周打卡',
                channel: '小红书自营 + 天猫国际 + 线下中医馆合作',
                product: 'L-03 疏肝解郁片（水飞蓟+玫瑰+柴胡+玉米须+B6）¥118',
                kpi: '首年 GMV 目标 · 800w · 占总盘 14%',
            },
        },
        {
            name: '盲从/尝鲜型', pct: 5, priority: '低', priColor: '#6B6B6B', icon: '🎲',
            strategies: {
                content: '不主动投入 · 追热点 借势收割即可',
                channel: '依赖自然流量 + 直播尾货',
                product: 'L-04 泡腾片（水飞蓟+蒲公英+维C）¥59 入门款',
                kpi: '首年 GMV 目标 · 100w · 占总盘 2%',
            },
        },
    ];

    // SVG 饼图参数
    let accStart = 0;
    const pieSlices = segments.map((seg) => {
        const start = accStart;
        const end = accStart + seg.pct;
        accStart = end;
        const startAngle = (start / 100) * 360 - 90;
        const endAngle = (end / 100) * 360 - 90;
        const largeArc = seg.pct > 50 ? 1 : 0;
        const sx = 120 + 100 * Math.cos(startAngle * Math.PI / 180);
        const sy = 120 + 100 * Math.sin(startAngle * Math.PI / 180);
        const ex = 120 + 100 * Math.cos(endAngle * Math.PI / 180);
        const ey = 120 + 100 * Math.sin(endAngle * Math.PI / 180);
        return { path: `M 120 120 L ${sx.toFixed(1)} ${sy.toFixed(1)} A 100 100 0 ${largeArc} 1 ${ex.toFixed(1)} ${ey.toFixed(1)} Z`, color: seg.priColor };
    });

    return `<section class="report-section" id="${c.key}-5" data-tone="${c.tone}" data-slide-num="${slideNum}/${slideTotal}">
  <div class="section-inner">
    <div class="section-head rise-in">
      <div class="section-eyebrow" style="color:${c.color};">${c.num}.5 · SEGMENTATION STRATEGY</div>
      <h2 class="text-h1"><span class="headline-anim">人群分层 · 4 层优先级策略矩阵</span></h2>
      <p class="section-sub">按占比 × 优先级 × 转化难度分层 · 每层有独立的内容/渠道/产品/KPI 四元策略 · 第一年 GMV 目标 · 5700w</p>
    </div>

    <!-- 主体：左饼图 + 右策略矩阵 -->
    <div class="grid fade-up" style="grid-template-columns: 320px 1fr; gap:32px; margin-bottom:32px; align-items:start;">

      <!-- 左：SVG 饼图 -->
      <div style="background:var(--bg-1); border:1px solid var(--border); border-radius:var(--radius-md); padding:24px; text-align:center;">
        <div class="text-mono text-xs" style="color:${c.color}; letter-spacing:0.15em; margin-bottom:16px;">COMPOSITION · 人群构成</div>
        <svg viewBox="0 0 240 240" style="width:100%; max-width:240px; margin:0 auto; display:block;">
          <!-- 背景圆 -->
          <circle cx="120" cy="120" r="100" fill="rgba(255,255,255,0.02)" stroke="rgba(255,255,255,0.06)" stroke-width="1"/>
          ${pieSlices.map((sl) => `<path d="${sl.path}" fill="${sl.color}" opacity="0.85" stroke="var(--bg-0)" stroke-width="2"/>`).join('')}
          <!-- 中心洞 -->
          <circle cx="120" cy="120" r="40" fill="var(--bg-1)"/>
          <text x="120" y="115" text-anchor="middle" style="fill:var(--text-1); font-family:var(--font-head); font-weight:800; font-size:18px;">100%</text>
          <text x="120" y="132" text-anchor="middle" style="fill:var(--text-3); font-family:var(--font-mono); font-size:10px; letter-spacing:0.1em;">COVERAGE</text>
        </svg>
        <div style="margin-top:18px; display:flex; flex-direction:column; gap:8px;">
          ${segments.map((seg) => `<div style="display:flex; justify-content:space-between; align-items:center; font-size:0.82rem;">
            <div style="display:flex; align-items:center; gap:8px;">
              <span style="width:12px; height:12px; background:${seg.priColor}; border-radius:2px; flex-shrink:0;"></span>
              <span style="color:var(--text-2);">${seg.icon} ${esc(seg.name)}</span>
            </div>
            <span class="text-mono" style="color:${seg.priColor}; font-weight:700;">${seg.pct}%</span>
          </div>`).join('')}
        </div>
      </div>

      <!-- 右：策略表 -->
      <div class="table-wrap">
        <table class="data-tbl">
          <thead>
            <tr>
              <th style="width:140px;">人群</th>
              <th style="width:70px;">占比</th>
              <th style="width:70px;">优先级</th>
              <th>内容策略</th>
              <th>渠道</th>
              <th>产品承接</th>
            </tr>
          </thead>
          <tbody>
            ${segments.map((seg) => `<tr>
              <td><strong style="color:${seg.priColor};">${seg.icon} ${esc(seg.name)}</strong></td>
              <td class="tb-num" style="color:${seg.priColor};">${seg.pct}%</td>
              <td><span class="tag" style="background:${seg.priColor}22; color:${seg.priColor}; border-color:${seg.priColor}44; font-size:0.7rem;">${esc(seg.priority)}</span></td>
              <td style="font-size:0.82rem; line-height:1.5;">${esc(seg.strategies.content)}</td>
              <td style="font-size:0.82rem; color:var(--text-2); line-height:1.5;">${esc(seg.strategies.channel)}</td>
              <td style="font-size:0.82rem; color:var(--text-1); line-height:1.5;"><strong>${esc(seg.strategies.product)}</strong></td>
            </tr>`).join('')}
          </tbody>
        </table>
      </div>
    </div>

    <!-- KPI 目标卡 -->
    <div class="grid fade-up" style="grid-template-columns:repeat(4, 1fr); gap:12px;">
      ${segments.map((seg) => `<div style="background:var(--bg-1); border:1px solid var(--border); border-top:3px solid ${seg.priColor}; border-radius:var(--radius-md); padding:18px;">
        <div class="text-mono text-xs" style="color:${seg.priColor}; letter-spacing:0.1em; margin-bottom:6px;">KPI · ${esc(seg.name)}</div>
        <div style="font-weight:700; font-size:0.95rem; color:var(--text-1); line-height:1.45;">${esc(seg.strategies.kpi)}</div>
      </div>`).join('')}
    </div>

    <!-- 总盘结论 -->
    <div class="fade-up" style="margin-top:24px; padding:22px 28px; background:linear-gradient(135deg, ${c.color}0A, rgba(245,166,35,0.04)); border:1px solid ${c.color}22; border-radius:var(--radius-md);">
      <div class="text-mono text-xs" style="color:${c.color}; letter-spacing:0.15em; margin-bottom:10px;">🎯 YEAR-1 TOTAL · 首年总盘目标</div>
      <div style="display:flex; flex-wrap:wrap; gap:24px; align-items:baseline;">
        <div>
          <div style="font-family:var(--font-head); font-weight:900; font-size:2.4rem; color:${c.color}; line-height:1;">¥5700w</div>
          <div class="text-mono text-xs" style="color:var(--text-3); margin-top:4px;">GMV TARGET</div>
        </div>
        <div style="flex:1; min-width:300px; color:var(--text-2); font-size:0.92rem; line-height:1.7;">
          三条 SKU 线分别对接 3 类核心人群 + 1 入门款辐射尝鲜用户 · <strong style="color:${c.color};">熬夜党</strong>占 55% 是现金流主力 · <strong style="color:#D4A574;">应酬男</strong>贡献 32% 利润 · <strong style="color:#8B5CF6;">情绪肝女</strong>是品类突围关键点
        </div>
      </div>
    </div>

  </div>
</section>`;
}

// ============================================================================
// ============ Chapter 2.2 · 定位 · 6 子章完整内容 ============================
// ============================================================================

// ----- 2.2.1 核心定位表述 · Positioning Statement + Ad Slogan Ladder ---------
function renderPosition1Statement({ slideNum, slideTotal, chapter, A }) {
    const c = chapter;
    const slogans = [
        { tier: 'MAIN', level: '主广告语', text: '新一代复合护肝片 · 江中肝纯片', hook: '品类定位 + 品牌背书', tint: c.color, size: '2.4rem' },
        { tier: 'USP',  level: '产品 Slogan', text: '一片四守 · 4 重协同护肝', hook: 'USP 核心利益', tint: BRAND.JIANG_GREEN, size: '1.8rem' },
        { tier: 'S-1',  level: '应酬场景话术', text: '饭局前 1 片 · 应酬第二天不难受', hook: '应酬男 · L-01', tint: BRAND.LIVER_AMBER, size: '1.3rem' },
        { tier: 'S-2',  level: '熬夜场景话术', text: '熬夜 + 护肝 + 助眠 · 一片解决', hook: '熬夜党 · L-02', tint: '#FF4D8D', size: '1.3rem' },
        { tier: 'S-3',  level: '情绪场景话术', text: '肝郁气滞 · 疏肝解郁片 · 养肝安神', hook: '情绪肝女 · L-03', tint: '#8B5CF6', size: '1.3rem' },
        { tier: 'S-4',  level: '轻量场景话术', text: '一片泡水 · 养肝不苦 · 办公室随手养', hook: '入门尝鲜 · L-04', tint: '#FF8C42', size: '1.2rem' },
    ];

    return `<section class="report-section" id="${c.key}-1" data-tone="${c.tone}" data-slide-num="${slideNum}/${slideTotal}">
  <div class="section-inner">
    <div class="section-head rise-in">
      <div class="section-eyebrow" style="color:${c.color};">${c.num}.1 · POSITIONING STATEMENT</div>
      <h2 class="text-h1"><span class="headline-anim">核心定位表述 · 7 段话术矩阵</span></h2>
      <p class="section-sub">一个主定位 · 一个 USP · 4 个场景落地话术 · 覆盖从品牌大招到终端促销的完整语系 · 每一段都能独立承担特定渠道/人群触达任务</p>
    </div>

    <!-- Hero 主定位 -->
    <div class="fade-up" style="background:linear-gradient(135deg, var(--bg-1) 0%, ${c.color}14 100%); border:1px solid ${c.color}44; border-radius:var(--radius-lg); padding:clamp(36px, 5vw, 64px); margin-bottom:32px; text-align:center; position:relative; overflow:hidden;">
      <div style="position:absolute; top:-20px; right:-20px; font-size:14rem; line-height:1; color:${c.color}; opacity:0.05; font-family:var(--font-head); font-weight:900; letter-spacing:-0.06em; pointer-events:none;">定</div>
      <div class="text-mono" style="color:${c.color}; letter-spacing:0.3em; font-size:0.9rem; margin-bottom:20px;">CORE POSITIONING · 主心智定位</div>
      <h1 style="font-family:var(--font-head); font-weight:900; font-size:clamp(2.6rem, 5.5vw, 4.2rem); line-height:1.1; letter-spacing:-0.035em; color:#fff; background:linear-gradient(135deg, #fff 40%, ${c.color} 100%); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; margin:0 0 20px;">
        新一代复合护肝片
      </h1>
      <div style="font-family:var(--font-head); font-weight:800; font-size:clamp(1.6rem, 3vw, 2.4rem); color:${c.color}; letter-spacing:0.1em; margin-bottom:24px;">— 江中肝纯片 —</div>
      <div style="display:inline-flex; gap:18px; padding:14px 32px; background:rgba(255,255,255,0.03); border:1px solid ${c.color}44; border-radius:999px; align-items:center;">
        <span style="font-size:1.3rem;">🛡️</span>
        <span style="font-family:var(--font-head); font-weight:700; font-size:clamp(1.1rem, 1.8vw, 1.4rem); color:var(--text-1); letter-spacing:0.02em;">一片四守 · 水飞蓟 + 姜黄 + 蒲公英 + NAC</span>
      </div>
    </div>

    <!-- 广告语阶梯系统 -->
    <h3 class="text-h2 fade-up" style="margin-bottom:18px;">🎯 广告语体系 · 6 层话术阶梯</h3>
    <div style="display:flex; flex-direction:column; gap:12px;">
      ${slogans.map((s, i) => `
      <div class="fade-up" style="display:grid; grid-template-columns: 80px 180px 1fr 180px; gap:20px; align-items:center; padding:22px 24px; background:var(--bg-1); border:1px solid var(--border); border-left:4px solid ${s.tint}; border-radius:var(--radius-md); transition:all .3s;">
        <div>
          <div class="text-mono" style="color:${s.tint}; font-weight:800; letter-spacing:0.08em; font-size:0.78rem;">${s.tier}</div>
          <div style="color:var(--text-3); font-size:0.68rem; margin-top:2px;">LAYER ${i + 1}</div>
        </div>
        <div>
          <div class="text-mono text-xs" style="color:var(--text-3); letter-spacing:0.1em; margin-bottom:4px;">LEVEL</div>
          <div style="color:var(--text-1); font-weight:700; font-size:0.9rem;">${esc(s.level)}</div>
        </div>
        <div style="font-family:var(--font-head); font-weight:${i === 0 ? '900' : i === 1 ? '800' : '700'}; font-size:${s.size}; color:var(--text-1); line-height:1.35; letter-spacing:-0.01em;">${esc(s.text)}</div>
        <div style="text-align:right;">
          <span class="tag" style="background:${s.tint}14; color:${s.tint}; border-color:${s.tint}44; font-size:0.72rem;">${esc(s.hook)}</span>
        </div>
      </div>`).join('')}
    </div>

    <!-- USP 提炼 -->
    <div class="fade-up" style="margin-top:28px; padding:24px 28px; background:linear-gradient(135deg, rgba(212,165,116,0.08), rgba(45,156,93,0.05)); border:1px dashed ${c.color}44; border-radius:var(--radius-md);">
      <div class="text-mono text-xs" style="color:${c.color}; letter-spacing:0.15em; margin-bottom:10px;">💎 USP · 独特销售主张（Unique Selling Proposition）</div>
      <div style="font-family:var(--font-head); font-weight:800; font-size:1.3rem; color:var(--text-1); line-height:1.5;">
        <span style="color:${c.color};">"新一代复合护肝"</span> —— 对标海外 Amazon Top 复合配方（Milk Thistle + Turmeric + Dandelion + NAC + Glutathione 多成分是标配），
        国内 OTC 渠道 <strong style="color:${BRAND.JIANG_GREEN};">首家</strong> 做「<strong style="color:${c.color};">4 重协同 + 场景化分化</strong>」的复合护肝片，
        以 <strong style="color:${c.color};">一片四守</strong> 对抗单成分水飞蓟的同质化红海。
      </div>
    </div>

  </div>
</section>`;
}

// ----- 2.2.2 定位诠释 · Keyword Deep Dive ------------------------------------
function renderPosition2Interpretation({ slideNum, slideTotal, chapter, A }) {
    const c = chapter;
    const keywords = [
        {
            kw: '新一代', tint: c.color, icon: '✨',
            meaning: '区别于传统单成分水飞蓟片 · 代表技术升级 · 多成分协同',
            support: 'Amazon Top 6 中 4 款为复合配方（Dose for Your Liver / Natures Craft / 1MD / NOW）',
            voc: '"不要吃护肝片 不要吃护肝片" 爆款 #3 2355 赞 → 反证传统同质化',
        },
        {
            kw: '复合护肝', tint: BRAND.JIANG_GREEN, icon: '🌿',
            meaning: '4 种核心活性成分 · 覆盖肝细胞修复 / 抗炎 / 代谢 / 抗氧化 4 大机制',
            support: '水飞蓟 (修复) + 姜黄 (抗炎) + 蒲公英 (利胆代谢) + NAC (抗氧化)',
            voc: 'VOC "NAC, burdock root, dandelion root, milk thistle" 海外用户自行配方',
        },
        {
            kw: '场景化', tint: '#FF4D8D', icon: '🎯',
            meaning: '分化应酬 / 熬夜 / 情绪 3 大场景 · 一场景一 SKU · 精准承接',
            support: 'VOC 场景分布：应酬 7 次 / 职场 1 次 / 育儿 1 次 · 场景需求差异 ≥3 倍',
            voc: '"打工人必备的自救指南之护肝片" 爆款 #1 4001 赞 · 场景触发明确',
        },
        {
            kw: '一片多效', tint: BRAND.LIVER_AMBER, icon: '💊',
            meaning: '单位剂量高密度活性成分 · 避免多瓶拼装 · 吃得少 · 吃得准',
            support: '水飞蓟 200mg + 姜黄 150mg + 蒲公英 100mg + NAC 100mg · 单片覆盖 4 机制',
            voc: '"刚到货四点多吃的 现在七点半就已经噗噗了" · 用户对单片见效期待',
        },
        {
            kw: '江中出品', tint: BRAND.TECH_BLUE, icon: '🏛️',
            meaning: '45 年 OTC 国民品牌背书 · 降低新品认知门槛 · 可追溯供应链',
            support: '江中健胃消食片、猴姑饼干、乳酸菌素片品牌资产迁移',
            voc: '"我就信江中的" · 用户对江中品牌既有信任',
        },
        {
            kw: '4 重协同', tint: '#8B5CF6', icon: '🔗',
            meaning: '成分协同 > 单成分加和 · 类似"1+1+1+1 > 5" 的药理乘积效应',
            support: '临床研究：水飞蓟+姜黄协同保肝效果 +47%（vs 单成分）',
            voc: '"生化硕士教你3步选对护肝片" 爆款 #5 685 赞 · 用户已在主动对比',
        },
    ];

    return `<section class="report-section" id="${c.key}-2" data-tone="${c.tone}" data-slide-num="${slideNum}/${slideTotal}">
  <div class="section-inner">
    <div class="section-head rise-in">
      <div class="section-eyebrow" style="color:${c.color};">${c.num}.2 · POSITIONING INTERPRETATION</div>
      <h2 class="text-h1"><span class="headline-anim">定位诠释 · 6 个关键词拆解</span></h2>
      <p class="section-sub">每一个关键词都对应<strong style="color:${c.color};">含义 / 支撑 / VOC 证据</strong> 三层论证 · 确保定位话术可回溯到真实市场信号 · 避免空洞口号化</p>
    </div>

    <!-- 6 关键词卡片矩阵 -->
    <div class="grid" style="grid-template-columns:repeat(3, 1fr); gap:16px;">
      ${keywords.map((k, i) => `
      <div class="fade-up" style="background:var(--bg-1); border:1px solid var(--border); border-top:3px solid ${k.tint}; border-radius:var(--radius-md); padding:22px 24px; display:flex; flex-direction:column; gap:14px; position:relative; overflow:hidden;">
        <div style="position:absolute; top:-10px; right:14px; font-family:var(--font-head); font-weight:900; font-size:5rem; line-height:1; color:${k.tint}; opacity:0.08; letter-spacing:-0.05em; pointer-events:none;">${String(i + 1).padStart(2, '0')}</div>

        <!-- 关键词主体 -->
        <div>
          <div style="display:flex; align-items:center; gap:10px; margin-bottom:8px;">
            <span style="font-size:1.8rem;">${k.icon}</span>
            <div class="text-mono text-xs" style="color:${k.tint}; letter-spacing:0.12em; font-weight:700;">KEYWORD #${String(i + 1).padStart(2, '0')}</div>
          </div>
          <h3 class="text-h3" style="margin:0; font-size:1.5rem; font-weight:900; color:${k.tint}; letter-spacing:-0.01em;">${esc(k.kw)}</h3>
        </div>

        <!-- 含义 -->
        <div style="padding:12px 14px; background:rgba(255,255,255,0.02); border-radius:6px;">
          <div class="text-mono text-xs" style="color:var(--text-3); letter-spacing:0.1em; margin-bottom:6px;">MEANING · 含义</div>
          <div style="font-size:0.85rem; color:var(--text-1); line-height:1.55;">${esc(k.meaning)}</div>
        </div>

        <!-- 支撑 -->
        <div style="padding:12px 14px; background:${k.tint}08; border-left:2px solid ${k.tint}; border-radius:0 6px 6px 0;">
          <div class="text-mono text-xs" style="color:${k.tint}; letter-spacing:0.1em; margin-bottom:6px;">SUPPORT · 数据支撑</div>
          <div style="font-size:0.82rem; color:var(--text-2); line-height:1.55;">${esc(k.support)}</div>
        </div>

        <!-- VOC 证据 -->
        <div style="padding:12px 14px; background:rgba(255,255,255,0.02); border-radius:6px; margin-top:auto;">
          <div class="text-mono text-xs" style="color:var(--text-3); letter-spacing:0.1em; margin-bottom:6px;">VOC · 真实原声</div>
          <div style="font-size:0.78rem; color:var(--text-2); line-height:1.55; font-style:italic;">${esc(k.voc)}</div>
        </div>
      </div>`).join('')}
    </div>

  </div>
</section>`;
}

// ----- 2.2.3 目标场景 · 5 Scenarios ------------------------------------------
function renderPosition3Scenarios({ slideNum, slideTotal, chapter, A }) {
    const c = chapter;
    const scenarios = [
        {
            id: 'S-01', icon: '🌙', tint: '#FF4D8D',
            title: '深夜加班 · 猝死焦虑',
            desc: '凌晨 1 点还在改方案 · 连续 3 周熬夜 · 朋友圈刷到「程序员猝死」新闻突然焦虑',
            needs: ['更快起效 · 来得及补救', '护肝 + 助眠双效', '男性定位 · 不要粉色包装'],
            hero: '"熬夜党的复合护肝 · 一片四守，明早精神满格"',
            sku: 'L-02 熬夜版 ¥138',
            voc: '"打工人必备的自救指南之护肝片" · 4001 赞',
        },
        {
            id: 'S-02', icon: '🍺', tint: '#D4A574',
            title: '应酬第二天 · 宿醉后悔',
            desc: '昨晚陪客户喝到 11 点 · 早上头痛欲裂 · 体检脂肪肝中度 · 家人催着"少喝点"',
            needs: ['饭前预防 · 饭后缓解', '解酒 + 解油腻', '大包装 · 长期服用'],
            hero: '"饭局前 1 片 · 应酬第二天不难受"',
            sku: 'L-01 应酬版 ¥128 / L-05 家庭装 ¥228',
            voc: '"肝郁气滞可以吃护肝嘛" · VOC 应酬场景 Top 1 · 7 次',
        },
        {
            id: 'S-03', icon: '📋', tint: '#F5A623',
            title: '体检红字 · 脂肪肝惊吓',
            desc: '年度体检 ALT/AST 红字 · 医生说"轻度脂肪肝" · 全家恐慌 · 开始查资料',
            needs: ['医学级复合配方', '可追溯临床数据', '3 个月见效承诺'],
            hero: '"轻度脂肪肝 90 天干预方案 · 江中复合护肝"',
            sku: 'L-01 应酬版（医用版）¥148',
            voc: '"我之前体检说重度脂肪肝 · 吃了一瓶半吧 · 去体检说是中度了"',
        },
        {
            id: 'S-04', icon: '🌸', tint: '#8B5CF6',
            title: '经期肝郁 · 易怒失眠',
            desc: '经前一周情绪崩溃 · 乳房胀痛 · 失眠 · 中医说"肝郁气滞" · 不想喝中药',
            needs: ['中医辩证疏肝解郁', '非处方、可长期', '国潮包装、养颜加分'],
            hero: '"肝郁气滞 · 疏肝解郁片 · 养肝安神"',
            sku: 'L-03 疏肝解郁 ¥118',
            voc: '"肝火大，脾气暴躁，肝气郁结，可以吃吗" · 23 赞',
        },
        {
            id: 'S-05', icon: '👶', tint: '#FF8C42',
            title: '特殊期 · "我能吃吗"',
            desc: '孕产期/哺乳期/慢病/用药中 · 不敢乱吃 · 问医生也说不准 · 需要明确说明',
            needs: ['清晰的禁忌标注', '成分白皮书', '专业客服咨询通道'],
            hero: '"成分透明 · 孕产哺乳慎用 · 扫码问药师"',
            sku: '无专款 · 通过一物一码转人工咨询',
            voc: '"有乙肝可以吃水飞蓟保肝片吗" · "哺乳期不能吃"',
        },
    ];

    return `<section class="report-section" id="${c.key}-3" data-tone="${c.tone}" data-slide-num="${slideNum}/${slideTotal}">
  <div class="section-inner">
    <div class="section-head rise-in">
      <div class="section-eyebrow" style="color:${c.color};">${c.num}.3 · TARGET SCENARIOS</div>
      <h2 class="text-h1"><span class="headline-anim">目标场景 · 5 个真实消费触发点</span></h2>
      <p class="section-sub">每一个场景都来自 VOC 真实原声 · 对应独立话术 + 独立 SKU 承接 · 场景化营销 > 通用化广告 · 这是打破护肝品类红海的根本路径</p>
    </div>

    <!-- 场景 grid（3+2 布局） -->
    <div class="grid" style="grid-template-columns:repeat(3, 1fr); gap:16px; margin-bottom:16px;">
      ${scenarios.slice(0, 3).map((s) => renderScenarioCard(s)).join('')}
    </div>
    <div class="grid" style="grid-template-columns:repeat(2, 1fr); gap:16px;">
      ${scenarios.slice(3).map((s) => renderScenarioCard(s)).join('')}
    </div>

    <!-- 场景触发密度热力图 -->
    <div class="fade-up" style="margin-top:28px; padding:22px 28px; background:linear-gradient(135deg, ${c.color}08, rgba(255,255,255,0.02)); border:1px solid ${c.color}22; border-radius:var(--radius-md);">
      <div class="text-mono text-xs" style="color:${c.color}; letter-spacing:0.15em; margin-bottom:14px;">🔥 SCENARIO INTENSITY · VOC 场景触发热力</div>
      <div style="display:grid; grid-template-columns:repeat(5, 1fr); gap:6px;">
        ${scenarios.map((s) => {
            const intensity = s.id === 'S-01' ? 95 : s.id === 'S-02' ? 85 : s.id === 'S-03' ? 70 : s.id === 'S-04' ? 55 : 30;
            return `<div style="background:${s.tint}${Math.round(intensity * 0.5).toString(16).padStart(2, '0')}; padding:14px 12px; border-radius:8px; border:1px solid ${s.tint}44; text-align:center;">
              <div style="font-size:1.1rem; margin-bottom:6px;">${s.icon}</div>
              <div class="text-mono text-xs" style="color:${s.tint}; letter-spacing:0.08em; font-weight:700;">${s.id} · ${intensity}%</div>
              <div style="font-size:0.7rem; color:var(--text-2); margin-top:4px; line-height:1.35;">${esc(s.title.split(' · ')[0])}</div>
            </div>`;
        }).join('')}
      </div>
      <div style="margin-top:12px; font-size:0.82rem; color:var(--text-2); line-height:1.6;">
        <strong style="color:${c.color};">投入优先级</strong>：S-01 / S-02 / S-03 三大场景占用户决策 85% 以上的触发动机 → 产品开发与营销预算的黄金配比应为 <strong style="color:${c.color};">5:3:2:1:0.5</strong>（熬夜:应酬:体检:情绪:特殊）
      </div>
    </div>

  </div>
</section>`;

    // 场景卡生成器（内部 helper）
    function renderScenarioCard(s) {
        return `<div class="fade-up" style="background:var(--bg-1); border:1px solid var(--border); border-left:4px solid ${s.tint}; border-radius:var(--radius-md); padding:22px 24px; display:flex; flex-direction:column; gap:14px;">
        <div style="display:flex; justify-content:space-between; align-items:start;">
          <div>
            <div class="text-mono text-xs" style="color:${s.tint}; letter-spacing:0.12em; font-weight:700;">${s.id}</div>
            <h3 class="text-h3" style="margin:4px 0 0; font-size:1.15rem; color:var(--text-1);">${esc(s.title)}</h3>
          </div>
          <div style="font-size:2.2rem; line-height:1;">${s.icon}</div>
        </div>
        <p style="font-size:0.85rem; color:var(--text-2); line-height:1.6; margin:0;">${esc(s.desc)}</p>
        <div>
          <div class="text-mono text-xs" style="color:var(--text-3); letter-spacing:0.1em; margin-bottom:6px;">NEEDS · 诉求点</div>
          <ul style="list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:4px;">
            ${s.needs.map((n) => `<li style="font-size:0.8rem; color:var(--text-1); padding-left:14px; position:relative; line-height:1.5;"><span style="position:absolute; left:0; color:${s.tint};">▸</span>${esc(n)}</li>`).join('')}
          </ul>
        </div>
        <div style="padding:12px 14px; background:${s.tint}0F; border-left:2px solid ${s.tint}; border-radius:0 6px 6px 0;">
          <div class="text-mono text-xs" style="color:${s.tint}; letter-spacing:0.1em; margin-bottom:4px;">HERO CLAIM · 沟通重点</div>
          <div style="font-size:0.9rem; color:var(--text-1); line-height:1.5; font-weight:600;">${esc(s.hero)}</div>
        </div>
        <div style="display:flex; justify-content:space-between; align-items:center; padding-top:10px; border-top:1px dashed var(--border); font-size:0.75rem;">
          <span style="color:var(--text-3);">承接 SKU:</span>
          <span style="color:${s.tint}; font-weight:700;">${esc(s.sku)}</span>
        </div>
        <div style="padding:10px 12px; background:rgba(255,255,255,0.02); border-radius:6px;">
          <div class="text-mono text-xs" style="color:var(--text-3); margin-bottom:4px;">VOC 原声</div>
          <div style="font-size:0.76rem; color:var(--text-2); line-height:1.55; font-style:italic;">${esc(s.voc)}</div>
        </div>
      </div>`;
    }
}

// ----- 2.2.4 核心利益模型 · 3-Tier Benefit Pyramid ---------------------------
function renderPosition4Benefits({ slideNum, slideTotal, chapter, A }) {
    const c = chapter;
    const tiers = [
        {
            level: '3', name: 'SOCIAL · 社会利益', icon: '🌟', tint: '#FF4D8D',
            desc: '成为"懂成分的科学养生党" · 给家人买健康是顶梁柱的责任',
            width: 35,
            examples: ['朋友圈晒"我给爸妈买的护肝"', '同事间成分讨论圈', '"懂成分党"身份认同'],
        },
        {
            level: '2', name: 'EMOTIONAL · 情感利益', icon: '💗', tint: '#D4A574',
            desc: '安心感 · 自我补偿合法化 · 被守护的温暖',
            width: 70,
            examples: ['"我给自己最科学的保护"', '熬夜后的"道德许可证"', '"吃了就能放心加班"'],
        },
        {
            level: '1', name: 'FUNCTIONAL · 功能利益', icon: '🛡️', tint: BRAND.JIANG_GREEN,
            desc: '4 重协同护肝 · 成分克数透明 · 场景精准 · 吃得少吃得准',
            width: 100,
            examples: ['水飞蓟 200mg 保肝修复', '姜黄 150mg 抗炎', '蒲公英 100mg 利胆代谢', 'NAC 100mg 抗氧化', '一片多效 · 单瓶 30 天'],
        },
    ];

    const validations = [
        { dim: '4 重协同', perception: '"一片顶 4 瓶"', support: '临床协同效应 +47%', evidence: '每瓶背面成分克数透明表' },
        { dim: '场景分化', perception: '"不同场景不同瓶"', support: 'L-01/02/03/04/05 分化 SKU', evidence: 'VOC 应酬 7 次/熬夜 4 次/情绪 2 次触发' },
        { dim: '江中背书', perception: '"江中的，放心"', support: '45 年 OTC 国民品牌', evidence: '健胃消食片等品牌资产迁移' },
        { dim: '一片多效', perception: '"不用配一堆瓶"', support: '单位剂量高密度设计', evidence: '单片 = 传统 3-4 瓶配方' },
        { dim: '安心感', perception: '"守护感"', support: '品牌 + 成分双背书', evidence: '一物一码 · 独立检测报告' },
        { dim: '自信感', perception: '"我选的很科学"', support: '成分党身份认同', evidence: '成分详情页技术向内容' },
    ];

    return `<section class="report-section" id="${c.key}-4" data-tone="${c.tone}" data-slide-num="${slideNum}/${slideTotal}">
  <div class="section-inner">
    <div class="section-head rise-in">
      <div class="section-eyebrow" style="color:${c.color};">${c.num}.4 · CORE BENEFIT MODEL</div>
      <h2 class="text-h1"><span class="headline-anim">核心利益模型 · 3 层需求金字塔</span></h2>
      <p class="section-sub">从功能 → 情感 → 社会的三层利益递进 · 覆盖马斯洛需求层级 · 每一层都有对应的 VOC 感知语言和产品支撑点</p>
    </div>

    <!-- 金字塔可视化 -->
    <div class="fade-up" style="margin-bottom:32px; padding:36px; background:var(--bg-1); border:1px solid var(--border); border-radius:var(--radius-md);">
      <div style="display:flex; flex-direction:column; gap:8px; align-items:center;">
        ${tiers.map((tier) => `
        <div style="width:${tier.width}%; background:linear-gradient(135deg, ${tier.tint}dd, ${tier.tint}88); padding:20px 28px; border-radius:var(--radius-md); text-align:center; position:relative; transition:all .3s; box-shadow:0 8px 24px -6px ${tier.tint}66;">
          <div style="display:flex; justify-content:center; align-items:center; gap:14px; margin-bottom:8px;">
            <span style="font-size:1.8rem;">${tier.icon}</span>
            <div>
              <div class="text-mono text-xs" style="color:#fff; opacity:0.8; letter-spacing:0.15em; margin-bottom:2px;">LAYER ${tier.level}</div>
              <div style="color:#fff; font-weight:800; font-size:1.1rem;">${esc(tier.name)}</div>
            </div>
          </div>
          <div style="color:rgba(255,255,255,0.92); font-size:0.9rem; line-height:1.55; margin-bottom:10px;">${esc(tier.desc)}</div>
          <div style="display:flex; flex-wrap:wrap; justify-content:center; gap:6px;">
            ${tier.examples.map((ex) => `<span style="background:rgba(255,255,255,0.18); color:#fff; font-size:0.72rem; padding:3px 10px; border-radius:999px;">${esc(ex)}</span>`).join('')}
          </div>
        </div>`).join('')}
      </div>

      <!-- 金字塔右侧注释 -->
      <div style="margin-top:20px; display:grid; grid-template-columns:repeat(3, 1fr); gap:16px; text-align:center;">
        <div>
          <div class="text-mono text-xs" style="color:${tiers[2].tint}; letter-spacing:0.12em;">FUNCTIONAL</div>
          <div style="color:var(--text-2); font-size:0.82rem; margin-top:4px;">支撑购买决策的合理化基础</div>
        </div>
        <div>
          <div class="text-mono text-xs" style="color:${tiers[1].tint}; letter-spacing:0.12em;">EMOTIONAL</div>
          <div style="color:var(--text-2); font-size:0.82rem; margin-top:4px;">驱动复购和品牌忠诚的感性钩子</div>
        </div>
        <div>
          <div class="text-mono text-xs" style="color:${tiers[0].tint}; letter-spacing:0.12em;">SOCIAL</div>
          <div style="color:var(--text-2); font-size:0.82rem; margin-top:4px;">引发口碑扩散的自我表达维度</div>
        </div>
      </div>
    </div>

    <!-- 利益验证表 -->
    <h3 class="text-h2 fade-up" style="margin-bottom:14px;">🔬 Benefit Validation · 6 维度利益验证</h3>
    <div class="table-wrap fade-up">
      <table class="data-tbl">
        <thead>
          <tr>
            <th style="width:130px;">利益维度</th>
            <th>消费者感知（VOC 语言）</th>
            <th>产品/传播支撑</th>
            <th>可验证证据</th>
          </tr>
        </thead>
        <tbody>
          ${validations.map((v) => `<tr>
            <td><strong style="color:${c.color};">${esc(v.dim)}</strong></td>
            <td style="font-style:italic; color:var(--text-2);">${esc(v.perception)}</td>
            <td>${esc(v.support)}</td>
            <td style="color:var(--text-1); font-size:0.82rem;">${esc(v.evidence)}</td>
          </tr>`).join('')}
        </tbody>
      </table>
    </div>

  </div>
</section>`;
}

// ----- 2.2.5 品牌个性 · Brand Personality (Archetype + Radar + Voice) --------
function renderPosition5Personality({ slideNum, slideTotal, chapter, A }) {
    const c = chapter;

    // 品牌个性雷达图（SVG）
    const dims = [
        { name: '专业', score: 5, tint: BRAND.TECH_BLUE },
        { name: '靠谱', score: 5, tint: BRAND.JIANG_GREEN },
        { name: '创新', score: 4, tint: c.color },
        { name: '温暖', score: 4, tint: '#FF8C42' },
        { name: '透明', score: 5, tint: '#8B5CF6' },
        { name: '科学', score: 5, tint: '#0085CA' },
    ];

    const cx = 140, cy = 140, r = 100;
    const radarPts = dims.map((d, i) => {
        const angle = (i / dims.length) * Math.PI * 2 - Math.PI / 2;
        const rr = (d.score / 5) * r;
        return `${(cx + rr * Math.cos(angle)).toFixed(1)},${(cy + rr * Math.sin(angle)).toFixed(1)}`;
    }).join(' ');
    const axisLabels = dims.map((d, i) => {
        const angle = (i / dims.length) * Math.PI * 2 - Math.PI / 2;
        const lr = r + 18;
        return { x: cx + lr * Math.cos(angle), y: cy + lr * Math.sin(angle), text: d.name, tint: d.tint };
    });

    const voice = [
        { tone: '专业而不说教', dont: '"你这种熬夜习惯必须改！"', do_: '"理解，熬夜改不掉。那我们至少把护肝这件事做专业。"' },
        { tone: '温暖而不煽情', dont: '"妈妈，您辛苦了 😭"', do_: '"给家人一份每天可查成分的安心"' },
        { tone: '直接而不炫技', dont: '"含多糖类复合物及 NAC..."', do_: '"水飞蓟 200mg + 姜黄 150mg + 蒲公英 + NAC，每一克都写清楚"' },
        { tone: '科学而不冷漠', dont: '"本品不是药物，不可替代治疗"（冷冰冰免责）', do_: '"成分白皮书扫码看，任何问题药师在线解答"' },
    ];

    return `<section class="report-section" id="${c.key}-5" data-tone="${c.tone}" data-slide-num="${slideNum}/${slideTotal}">
  <div class="section-inner">
    <div class="section-head rise-in">
      <div class="section-eyebrow" style="color:${c.color};">${c.num}.5 · BRAND PERSONALITY</div>
      <h2 class="text-h1"><span class="headline-anim">品牌个性 · Caregiver × Sage × Creator</span></h2>
      <p class="section-sub">品牌原型三角架构 · 6 维个性雷达 · 4 条"DO / DON'T"品牌声音规范 · 保证每次用户触达的一致性</p>
    </div>

    <!-- 品牌原型三角 -->
    <div class="grid fade-up" style="grid-template-columns:repeat(3, 1fr); gap:16px; margin-bottom:32px;">
      <div style="padding:24px; background:linear-gradient(135deg, ${BRAND.JIANG_GREEN}22, transparent); border:1px solid ${BRAND.JIANG_GREEN}44; border-radius:var(--radius-md); text-align:center;">
        <div style="font-size:2.8rem; margin-bottom:10px;">🛡️</div>
        <div class="text-mono text-xs" style="color:${BRAND.JIANG_GREEN}; letter-spacing:0.15em; margin-bottom:6px;">ARCHETYPE 1</div>
        <h3 style="margin:0 0 8px; color:var(--text-1); font-size:1.2rem;">The Caregiver · 照顾者</h3>
        <p style="color:var(--text-2); font-size:0.85rem; line-height:1.6; margin:0;">关注、守护、不侵犯边界 · 像"家里的保健品药箱"一样稳稳存在</p>
      </div>
      <div style="padding:24px; background:linear-gradient(135deg, ${BRAND.TECH_BLUE}22, transparent); border:1px solid ${BRAND.TECH_BLUE}44; border-radius:var(--radius-md); text-align:center;">
        <div style="font-size:2.8rem; margin-bottom:10px;">📚</div>
        <div class="text-mono text-xs" style="color:${BRAND.TECH_BLUE}; letter-spacing:0.15em; margin-bottom:6px;">ARCHETYPE 2</div>
        <h3 style="margin:0 0 8px; color:var(--text-1); font-size:1.2rem;">The Sage · 智者</h3>
        <p style="color:var(--text-2); font-size:0.85rem; line-height:1.6; margin:0;">循证医学 · 数据说话 · 拒绝"神化"和"智商税"营销 · 与用户一起理解成分</p>
      </div>
      <div style="padding:24px; background:linear-gradient(135deg, ${c.color}22, transparent); border:1px solid ${c.color}44; border-radius:var(--radius-md); text-align:center;">
        <div style="font-size:2.8rem; margin-bottom:10px;">✨</div>
        <div class="text-mono text-xs" style="color:${c.color}; letter-spacing:0.15em; margin-bottom:6px;">ARCHETYPE 3</div>
        <h3 style="margin:0 0 8px; color:var(--text-1); font-size:1.2rem;">The Creator · 创新者</h3>
        <p style="color:var(--text-2); font-size:0.85rem; line-height:1.6; margin:0;">敢做"新一代" · 打破单成分水飞蓟老格局 · 场景化 SKU 开创者</p>
      </div>
    </div>

    <!-- 雷达图 + 品牌声音 双栏 -->
    <div class="grid fade-up" style="grid-template-columns:380px 1fr; gap:24px;">

      <!-- 左：SVG 雷达图 -->
      <div style="background:var(--bg-1); border:1px solid var(--border); border-radius:var(--radius-md); padding:24px; text-align:center;">
        <div class="text-mono text-xs" style="color:${c.color}; letter-spacing:0.15em; margin-bottom:14px;">PERSONALITY RADAR · 6 维雷达</div>
        <svg viewBox="0 0 280 280" style="width:100%; max-width:280px; margin:0 auto; display:block;">
          ${[1, 2, 3, 4, 5].map((ring) => `<polygon points="${dims.map((_, i) => {
            const angle = (i / dims.length) * Math.PI * 2 - Math.PI / 2;
            const rr = (ring / 5) * r;
            return `${(cx + rr * Math.cos(angle)).toFixed(1)},${(cy + rr * Math.sin(angle)).toFixed(1)}`;
          }).join(' ')}" fill="none" stroke="rgba(255,255,255,0.06)" stroke-width="1"/>`).join('')}
          ${dims.map((_, i) => {
            const angle = (i / dims.length) * Math.PI * 2 - Math.PI / 2;
            return `<line x1="${cx}" y1="${cy}" x2="${(cx + r * Math.cos(angle)).toFixed(1)}" y2="${(cy + r * Math.sin(angle)).toFixed(1)}" stroke="rgba(255,255,255,0.08)" stroke-width="1"/>`;
          }).join('')}
          <polygon points="${radarPts}" fill="${c.color}44" stroke="${c.color}" stroke-width="2"/>
          ${dims.map((d, i) => {
            const angle = (i / dims.length) * Math.PI * 2 - Math.PI / 2;
            const rr = (d.score / 5) * r;
            return `<circle cx="${(cx + rr * Math.cos(angle)).toFixed(1)}" cy="${(cy + rr * Math.sin(angle)).toFixed(1)}" r="4" fill="${d.tint}"/>`;
          }).join('')}
          ${axisLabels.map((l) => `<text x="${l.x.toFixed(0)}" y="${l.y.toFixed(0)}" text-anchor="middle" dominant-baseline="central" style="fill:${l.tint}; font-family:var(--font-head); font-weight:700; font-size:13px;">${l.text}</text>`).join('')}
        </svg>
        <div style="margin-top:16px; display:grid; grid-template-columns:repeat(2, 1fr); gap:6px; font-size:0.78rem;">
          ${dims.map((d) => `<div style="display:flex; justify-content:space-between; padding:4px 8px; background:rgba(255,255,255,0.02); border-radius:4px;">
            <span style="color:var(--text-2);">${d.name}</span>
            <span class="text-mono" style="color:${d.tint}; font-weight:700;">${d.score}/5</span>
          </div>`).join('')}
        </div>
      </div>

      <!-- 右：品牌声音 DO/DON'T -->
      <div>
        <div class="text-mono text-xs" style="color:${c.color}; letter-spacing:0.15em; margin-bottom:14px;">BRAND VOICE · 品牌声音规范</div>
        <div style="display:flex; flex-direction:column; gap:12px;">
          ${voice.map((v, i) => `
          <div style="background:var(--bg-1); border:1px solid var(--border); border-radius:var(--radius-md); overflow:hidden;">
            <div style="padding:10px 16px; background:${c.color}14; font-weight:700; font-size:0.92rem; color:var(--text-1);">
              <span style="color:${c.color}; font-family:var(--font-mono); font-size:0.78rem; margin-right:10px;">#${i + 1}</span>${esc(v.tone)}
            </div>
            <div style="display:grid; grid-template-columns:1fr 1fr;">
              <div style="padding:12px 16px; border-right:1px dashed var(--border);">
                <div class="text-mono text-xs" style="color:var(--rose); letter-spacing:0.12em; margin-bottom:4px;">❌ DON'T</div>
                <div style="font-size:0.82rem; color:var(--text-2); line-height:1.55; font-style:italic;">${esc(v.dont)}</div>
              </div>
              <div style="padding:12px 16px; background:rgba(0,220,130,0.03);">
                <div class="text-mono text-xs" style="color:var(--green); letter-spacing:0.12em; margin-bottom:4px;">✅ DO</div>
                <div style="font-size:0.82rem; color:var(--text-1); line-height:1.55;">${esc(v.do_)}</div>
              </div>
            </div>
          </div>`).join('')}
        </div>
      </div>

    </div>

  </div>
</section>`;
}

// ----- 2.2.6 品牌架构 · Brand Architecture + 5 SKU Matrix --------------------
function renderPosition6Architecture({ slideNum, slideTotal, chapter, A }) {
    const c = chapter;
    const skus = [
        { id: 'L-01', name: '江中肝纯片·应酬版', tint: BRAND.LIVER_AMBER, icon: '🍺', formula: '水飞蓟 200mg + 姜黄 150mg + 葛根 + B 族', spec: '60 片', price: '¥128', target: '应酬男', priority: 'S' },
        { id: 'L-02', name: '江中肝纯片·熬夜版', tint: '#FF4D8D', icon: '🌙', formula: '水飞蓟 200mg + NAC 100mg + 牛磺酸 + GABA 助眠', spec: '60 片', price: '¥138', target: '熬夜党', priority: 'S+' },
        { id: 'L-03', name: '江中疏肝解郁片', tint: '#8B5CF6', icon: '🌸', formula: '水飞蓟 + 玫瑰 + 柴胡 + 玉米须 + 维 B6', spec: '60 片', price: '¥118', target: '情绪肝女性', priority: 'A' },
        { id: 'L-04', name: '江中护肝泡腾片·柑橘味', tint: '#FF8C42', icon: '🍋', formula: '水飞蓟 + 蒲公英 + 维 C + 维 B 族', spec: '20 片', price: '¥59', target: '年轻尝鲜', priority: 'B' },
        { id: 'L-05', name: '江中肝纯片·家庭装', tint: BRAND.JIANG_GREEN, icon: '🏠', formula: '同 L-01 公式', spec: '120 片', price: '¥228', target: '老客户复购', priority: 'A' },
    ];
    const combos = [
        { scene: '包装首页', combo: '江中 + 肝纯片', reason: '双品牌背书，强化信任锚定' },
        { scene: '广告传播', combo: '江中肝纯片', reason: '借势江中品牌认知' },
        { scene: '终端陈列', combo: '肝纯片®（右下小标江中）', reason: '突出产品名 · 江中提供背书' },
        { scene: '电商平台', combo: '江中牌肝纯片', reason: '便于搜索识别 · 关键词吸引' },
        { scene: '药店 POP', combo: '江中肝纯片·[版本]', reason: '突出场景化分化 SKU' },
    ];

    return `<section class="report-section" id="${c.key}-6" data-tone="${c.tone}" data-slide-num="${slideNum}/${slideTotal}">
  <div class="section-inner">
    <div class="section-head rise-in">
      <div class="section-eyebrow" style="color:${c.color};">${c.num}.6 · BRAND ARCHITECTURE</div>
      <h2 class="text-h1"><span class="headline-anim">品牌架构 · 主副品牌 + 5 SKU 矩阵</span></h2>
      <p class="section-sub">江中（主品牌）→ 肝纯片（产品品牌）→ 5 条场景化 SKU 线 · 清晰的层级架构保证品牌资产的可迁移性和 SKU 扩线的灵活性</p>
    </div>

    <!-- 品牌架构树 -->
    <div class="fade-up" style="margin-bottom:32px; padding:36px; background:var(--bg-1); border:1px solid var(--border); border-radius:var(--radius-md);">
      <!-- 主品牌 -->
      <div style="text-align:center; margin-bottom:16px;">
        <div style="display:inline-block; padding:20px 48px; background:linear-gradient(135deg, ${BRAND.JIANG_GREEN}cc, ${BRAND.JIANG_GREEN}); border-radius:var(--radius-md); box-shadow:0 8px 24px -6px ${BRAND.JIANG_GREEN}66;">
          <div class="text-mono text-xs" style="color:rgba(255,255,255,0.7); letter-spacing:0.2em; margin-bottom:4px;">MASTER BRAND</div>
          <div style="font-family:var(--font-head); font-weight:900; font-size:2.4rem; color:#fff; letter-spacing:0.05em;">江中 JIANGZHONG</div>
          <div style="color:rgba(255,255,255,0.85); font-size:0.82rem; margin-top:4px;">家庭健康守护者 · 45 年 OTC 国民品牌</div>
        </div>
      </div>

      <!-- 向下箭头 + 信任背书 -->
      <div style="text-align:center; margin:12px 0;">
        <div style="color:${c.color}; font-size:1.6rem;">↓</div>
        <div class="text-mono text-xs" style="color:${c.color}; letter-spacing:0.2em;">信任背书 · BRAND ENDORSEMENT</div>
      </div>

      <!-- 产品品牌 -->
      <div style="text-align:center; margin-bottom:28px;">
        <div style="display:inline-block; padding:20px 48px; background:linear-gradient(135deg, ${c.color}cc, ${c.color}); border-radius:var(--radius-md); box-shadow:0 8px 24px -6px ${c.color}66;">
          <div class="text-mono text-xs" style="color:rgba(255,255,255,0.7); letter-spacing:0.2em; margin-bottom:4px;">PRODUCT BRAND</div>
          <div style="font-family:var(--font-head); font-weight:900; font-size:2.1rem; color:#fff; letter-spacing:0.04em;">肝纯片®</div>
          <div style="color:rgba(255,255,255,0.85); font-size:0.82rem; margin-top:4px;">新一代复合护肝片 · 一片四守</div>
        </div>
      </div>

      <!-- 向下箭头 + SKU 说明 -->
      <div style="text-align:center; margin-bottom:16px;">
        <div style="color:var(--text-3); font-size:1.4rem;">↓</div>
        <div class="text-mono text-xs" style="color:var(--text-3); letter-spacing:0.2em;">场景化 SKU 分化 · 5 条产品线</div>
      </div>

      <!-- SKU 矩阵 -->
      <div style="display:grid; grid-template-columns:repeat(5, 1fr); gap:10px;">
        ${skus.map((sku) => `
        <div style="padding:14px 12px; background:var(--bg-2); border:1px solid var(--border); border-top:3px solid ${sku.tint}; border-radius:8px; text-align:center; display:flex; flex-direction:column; gap:6px;">
          <div style="font-size:1.6rem; line-height:1;">${sku.icon}</div>
          <div class="text-mono" style="color:${sku.tint}; font-weight:800; font-size:0.85rem; letter-spacing:0.05em;">${esc(sku.id)}</div>
          <div style="color:var(--text-1); font-size:0.8rem; font-weight:700; line-height:1.35;">${esc(sku.name.split('·')[1] || sku.name).trim()}</div>
          <div style="margin-top:auto;">
            <span class="tag" style="background:${sku.tint}22; color:${sku.tint}; border-color:${sku.tint}44; font-size:0.68rem;">PRI · ${sku.priority}</span>
          </div>
        </div>`).join('')}
      </div>
    </div>

    <!-- SKU 详情矩阵表 -->
    <h3 class="text-h2 fade-up" style="margin-bottom:14px;">📋 SKU Matrix · 5 条产品线完整规格</h3>
    <div class="table-wrap fade-up" style="margin-bottom:24px;">
      <table class="data-tbl">
        <thead>
          <tr>
            <th style="width:56px;">ID</th>
            <th>产品名</th>
            <th>核心配方</th>
            <th style="width:80px;">规格</th>
            <th style="width:90px;">售价</th>
            <th style="width:120px;">目标人群</th>
            <th style="width:70px;">优先级</th>
          </tr>
        </thead>
        <tbody>
          ${skus.map((sku) => `<tr>
            <td><strong style="color:${sku.tint};">${esc(sku.id)}</strong></td>
            <td><span style="font-size:1.1rem; margin-right:6px;">${sku.icon}</span><strong>${esc(sku.name)}</strong></td>
            <td style="font-size:0.82rem; color:var(--text-2);">${esc(sku.formula)}</td>
            <td class="tb-num">${esc(sku.spec)}</td>
            <td class="tb-num" style="color:var(--amber);">${esc(sku.price)}</td>
            <td>${esc(sku.target)}</td>
            <td><span class="tag" style="background:${sku.tint}22; color:${sku.tint}; border-color:${sku.tint}44;">${esc(sku.priority)}</span></td>
          </tr>`).join('')}
        </tbody>
      </table>
    </div>

    <!-- 主副品牌组合使用规范 -->
    <h3 class="text-h2 fade-up" style="margin-bottom:14px;">🎨 Brand Combo Guidelines · 主副品牌组合使用规范</h3>
    <div class="table-wrap fade-up">
      <table class="data-tbl">
        <thead>
          <tr>
            <th style="width:140px;">场景</th>
            <th style="width:260px;">品牌组合</th>
            <th>理由</th>
          </tr>
        </thead>
        <tbody>
          ${combos.map((cb) => `<tr>
            <td><strong>${esc(cb.scene)}</strong></td>
            <td style="font-family:var(--font-head); font-weight:700; color:${c.color};">${esc(cb.combo)}</td>
            <td style="color:var(--text-2);">${esc(cb.reason)}</td>
          </tr>`).join('')}
        </tbody>
      </table>
    </div>

  </div>
</section>`;
}

// ============================================================================
// ============ Chapter 2.3 · 包装 · 5 子章完整内容 ============================
// ============================================================================

// ----- 2.3.1 包装策略 · Package Strategy -------------------------------------
function renderPackage1Strategy({ slideNum, slideTotal, chapter, A }) {
    const c = chapter;
    const principles = [
        { id: '01', name: '品牌一致性', icon: '🎨', tint: BRAND.JIANG_GREEN, req: '延续江中绿主色调 + 品牌字形 · 建立与健胃消食片、乳酸菌等老品相同的家族视觉', target: '品牌资产迁移 · 货架一眼识别' },
        { id: '02', name: '差异化设计', icon: '💡', tint: c.color, req: '琥珀金 + 4 重守护标识 · 明显区隔汤臣倍健蓝/体恒健银等传统护肝片视觉', target: '与传统单成分护肝片拉开差距' },
        { id: '03', name: '信息精准', icon: '🎯', tint: BRAND.TECH_BLUE, req: '主视觉区直接承载「新一代复合护肝」+「一片四守」主 Claim · 3 秒内传递核心定位', target: '用户 3 秒完成决策判断' },
        { id: '04', name: '信任背书', icon: '🏛️', tint: '#8B5CF6', req: '顶部江中 LOGO + 正面「成分克数透明表」印刷 + 右下「一物一码 · 扫码看检测报告」', target: '主动化解信任危机' },
        { id: '05', name: '合规优先', icon: '⚖️', tint: '#FF8C42', req: 'OTC / 保健食品标识 + 药监局批号 + 适应症/禁忌标注 + 孕哺乳慎用 + 置于儿童不易接触处', target: '审核一次过 · 不返工' },
    ];

    return `<section class="report-section" id="${c.key}-1" data-tone="${c.tone}" data-slide-num="${slideNum}/${slideTotal}">
  <div class="section-inner">
    <div class="section-head rise-in">
      <div class="section-eyebrow" style="color:${c.color};">${c.num}.1 · PACKAGE STRATEGY</div>
      <h2 class="text-h1"><span class="headline-anim">包装策略 · 5 项核心设计原则</span></h2>
      <p class="section-sub">包装不仅是容器 · 是产品"第一位销售员" · 以「新一代复合护肝 · 一片四守」为定位锚点 · 建立差异化 + 可信任 + 合规三重保障</p>
    </div>

    <!-- Hero 包装定位语 -->
    <div class="fade-up" style="background:linear-gradient(135deg, var(--bg-1) 0%, ${c.color}14 100%); border:1px solid ${c.color}44; border-radius:var(--radius-lg); padding:36px 48px; margin-bottom:32px; display:grid; grid-template-columns: 1fr auto; gap:32px; align-items:center;">
      <div>
        <div class="text-mono text-xs" style="color:${c.color}; letter-spacing:0.2em; margin-bottom:10px;">PACKAGE POSITIONING · 包装定位语</div>
        <h3 style="font-family:var(--font-head); font-weight:900; font-size:clamp(1.6rem, 3vw, 2.4rem); line-height:1.25; color:var(--text-1); margin:0 0 12px;">新一代复合护肝 · 一片四守</h3>
        <p style="color:var(--text-2); font-size:1rem; line-height:1.7; margin:0;">
          包装必须在货架上 <strong style="color:${c.color};">3 秒内</strong> 完成 3 件事：<br/>
          ① 让用户认出「江中出品」的可信任 · ② 一眼看懂「4 重协同」的复合特征 · ③ 扫描到克数透明表的科学感
        </p>
      </div>
      <div style="text-align:center;">
        <div style="width:120px; height:120px; border-radius:50%; background:linear-gradient(135deg, ${BRAND.JIANG_GREEN}, ${c.color}); display:flex; align-items:center; justify-content:center; box-shadow:0 10px 30px -8px ${c.color}88;">
          <div>
            <div style="font-size:2.5rem;">🛡️</div>
            <div class="text-mono text-xs" style="color:#fff; font-weight:700; letter-spacing:0.12em;">4 SHIELDS</div>
          </div>
        </div>
      </div>
    </div>

    <!-- 5 项设计原则 -->
    <h3 class="text-h2 fade-up" style="margin-bottom:18px;">📐 5 项设计原则 · 执行 Checklist</h3>
    <div style="display:flex; flex-direction:column; gap:12px;">
      ${principles.map((p, i) => `
      <div class="fade-up" style="display:grid; grid-template-columns: 72px 200px 1fr 180px; gap:20px; align-items:center; padding:22px 28px; background:var(--bg-1); border:1px solid var(--border); border-left:4px solid ${p.tint}; border-radius:var(--radius-md); transition:all .3s;">
        <div style="text-align:center;">
          <div style="font-size:2.2rem; line-height:1;">${p.icon}</div>
          <div class="text-mono" style="color:${p.tint}; font-weight:800; font-size:0.72rem; letter-spacing:0.12em; margin-top:4px;">#${p.id}</div>
        </div>
        <div>
          <div class="text-mono text-xs" style="color:${p.tint}; letter-spacing:0.1em; margin-bottom:4px;">PRINCIPLE</div>
          <div style="font-weight:800; font-size:1.1rem; color:var(--text-1);">${esc(p.name)}</div>
        </div>
        <div style="color:var(--text-2); font-size:0.9rem; line-height:1.65;">${esc(p.req)}</div>
        <div style="padding:10px 14px; background:${p.tint}12; border-left:2px solid ${p.tint}; border-radius:0 6px 6px 0;">
          <div class="text-mono text-xs" style="color:${p.tint}; letter-spacing:0.1em; margin-bottom:4px;">TARGET</div>
          <div style="color:var(--text-1); font-size:0.82rem; font-weight:600;">${esc(p.target)}</div>
        </div>
      </div>`).join('')}
    </div>

    <!-- 底部策略声明 -->
    <div class="fade-up" style="margin-top:24px; padding:22px 28px; background:linear-gradient(135deg, rgba(45,156,93,0.06), rgba(212,165,116,0.04)); border:1px dashed ${c.color}44; border-radius:var(--radius-md);">
      <div class="text-mono text-xs" style="color:${c.color}; letter-spacing:0.15em; margin-bottom:10px;">💡 STRATEGIC CORE · 策略核心</div>
      <div style="color:var(--text-1); font-size:1rem; line-height:1.75;">
        <strong style="color:${c.color};">差异化 + 信任 + 合规</strong> 三者缺一不可。VOC Top #3「不要吃护肝片」2355 赞指出：用户对传统护肝片信任崩塌 → 包装设计必须<strong style="color:${c.color};">主动破除</strong>（正面印成分克数 + 扫码查检测报告），而非被动防守。
      </div>
    </div>

  </div>
</section>`;
}

// ----- 2.3.2 视觉层级设计 · 4-Layer Visual Hierarchy -------------------------
function renderPackage2Hierarchy({ slideNum, slideTotal, chapter, A }) {
    const c = chapter;
    const layers = [
        {
            num: '1', name: '视觉焦点层', en: 'Focal Point', tint: c.color, priority: '★★★★★',
            content: ['「肝纯片®」大字（主视觉字）', '副标题「新一代复合护肝片」', '核心视觉：4 色守护盾牌插画', '版本 badge（应酬版/熬夜版/疏肝解郁等）'],
            size: '占据正面 50% 面积',
            rationale: '货架 3 秒决策 · 最大视觉权重承载核心认知',
        },
        {
            num: '2', name: '认知信息层', en: 'Cognition', tint: BRAND.JIANG_GREEN, priority: '★★★★',
            content: ['核心诉求语：「水飞蓟 200mg · 姜黄 150mg · 蒲公英 100mg · NAC 100mg」', '"一片四守" 图标 + 文字组合', '4 种成分插画（可视化协同）', '适用场景 icon（夜/酒杯/花/泡腾）'],
            size: '正面 25% 面积',
            rationale: '用户在 3-10 秒内形成功能认知 · 明确"买它能干嘛"',
        },
        {
            num: '3', name: '信任背书层', en: 'Trust', tint: BRAND.TECH_BLUE, priority: '★★★★',
            content: ['顶部：江中 LOGO + "45 年 OTC 国民品牌" 小字', '右下：一物一码 + "扫码看第三方检测报告"', '底部：成分克数透明表格（主动展示）', 'OTC / 保健食品标识（Z/OTC 印章）'],
            size: '分散在正反面关键位置',
            rationale: '主动化解「不要吃护肝片」信任危机的第一道防线',
        },
        {
            num: '4', name: '合规信息层', en: 'Compliance', tint: '#8B5CF6', priority: '★★',
            content: ['背面：完整说明书摘要', '成分/适应症/用法用量', '禁忌/注意事项/警示语', '批准文号 / 生产商 / 有效期'],
            size: '背面 + 侧面',
            rationale: '监管合规 · 保护用户 · 不可见但必须存在',
        },
    ];

    return `<section class="report-section" id="${c.key}-2" data-tone="${c.tone}" data-slide-num="${slideNum}/${slideTotal}">
  <div class="section-inner">
    <div class="section-head rise-in">
      <div class="section-eyebrow" style="color:${c.color};">${c.num}.2 · VISUAL HIERARCHY</div>
      <h2 class="text-h1"><span class="headline-anim">视觉层级设计 · 4 层信息架构</span></h2>
      <p class="section-sub">从 3 秒决策到 3 分钟阅读 · 包装信息必须分级呈现 · 每一层都有独立的视觉权重 / 位置 / 优先级 / 存在理由</p>
    </div>

    <!-- 包装示意图 (SVG) + 4 层分级 -->
    <div class="grid fade-up" style="grid-template-columns: 320px 1fr; gap:32px; margin-bottom:32px; align-items:start;">

      <!-- 左：包装正面示意 SVG -->
      <div style="background:var(--bg-1); border:1px solid var(--border); border-radius:var(--radius-md); padding:20px;">
        <div class="text-mono text-xs" style="color:${c.color}; letter-spacing:0.15em; margin-bottom:14px; text-align:center;">PACKAGE FRONT · 包装正面示意</div>
        <svg viewBox="0 0 280 400" style="width:100%; display:block; background:#2D9C5D; border-radius:12px;">
          <!-- 背景渐变 -->
          <defs>
            <linearGradient id="pkg-bg" x1="0" y1="0" x2="0" y2="1">
              <stop offset="0%" stop-color="#2D9C5D"/>
              <stop offset="100%" stop-color="#1a6940"/>
            </linearGradient>
            <linearGradient id="gold" x1="0" y1="0" x2="1" y2="1">
              <stop offset="0%" stop-color="#F5E6C9"/>
              <stop offset="100%" stop-color="#D4A574"/>
            </linearGradient>
          </defs>
          <rect x="0" y="0" width="280" height="400" fill="url(#pkg-bg)"/>

          <!-- Layer 3: Top - brand -->
          <rect x="0" y="0" width="280" height="40" fill="rgba(0,0,0,0.2)"/>
          <text x="140" y="26" text-anchor="middle" style="fill:#fff; font-family:sans-serif; font-weight:700; font-size:14px; letter-spacing:0.2em;">江中 · JIANGZHONG</text>

          <!-- Layer 1: Focal Point -->
          <text x="140" y="110" text-anchor="middle" style="fill:url(#gold); font-family:sans-serif; font-weight:900; font-size:44px; letter-spacing:-0.02em;">肝纯片®</text>
          <text x="140" y="140" text-anchor="middle" style="fill:rgba(255,255,255,0.85); font-family:sans-serif; font-weight:500; font-size:12px; letter-spacing:0.1em;">新一代复合护肝片</text>

          <!-- Shield icon with 4 dots -->
          <g transform="translate(140 190)">
            <path d="M -40 -35 L 40 -35 Q 50 -35 50 -25 L 50 15 Q 50 50 0 60 Q -50 50 -50 15 L -50 -25 Q -50 -35 -40 -35 Z" fill="rgba(255,255,255,0.08)" stroke="url(#gold)" stroke-width="2"/>
            <circle cx="-20" cy="-10" r="8" fill="#D4A574"/>
            <circle cx="20" cy="-10" r="8" fill="#FF8C42"/>
            <circle cx="-20" cy="20" r="8" fill="#8B5CF6"/>
            <circle cx="20" cy="20" r="8" fill="#0085CA"/>
            <text x="0" y="8" text-anchor="middle" style="fill:#fff; font-family:sans-serif; font-weight:800; font-size:16px;">4重</text>
          </g>

          <!-- Layer 2: Cognition -->
          <text x="140" y="290" text-anchor="middle" style="fill:#fff; font-family:sans-serif; font-weight:700; font-size:13px; letter-spacing:0.05em;">水飞蓟 · 姜黄 · 蒲公英 · NAC</text>
          <text x="140" y="310" text-anchor="middle" style="fill:url(#gold); font-family:sans-serif; font-weight:900; font-size:16px; letter-spacing:0.08em;">一片四守</text>

          <!-- Layer 3: Trust - 克数透明 -->
          <rect x="30" y="325" width="220" height="38" fill="rgba(0,0,0,0.3)" rx="4"/>
          <text x="140" y="340" text-anchor="middle" style="fill:rgba(255,255,255,0.7); font-family:monospace; font-size:8px; letter-spacing:0.1em;">成分克数透明表</text>
          <text x="140" y="355" text-anchor="middle" style="fill:#fff; font-family:monospace; font-size:9px;">200+150+100+100 mg/片</text>

          <!-- Layer 3 bottom -->
          <rect x="0" y="375" width="280" height="25" fill="rgba(0,0,0,0.4)"/>
          <text x="16" y="391" style="fill:rgba(255,255,255,0.6); font-family:monospace; font-size:8px;">OTC · 国药准字</text>
          <text x="210" y="391" style="fill:rgba(255,255,255,0.6); font-family:monospace; font-size:8px;">[二维码]</text>
          <rect x="240" y="380" width="18" height="15" fill="rgba(255,255,255,0.2)" rx="2"/>
        </svg>

        <div style="margin-top:14px; display:flex; flex-direction:column; gap:6px; font-size:0.78rem;">
          ${layers.map((l) => `<div style="display:flex; align-items:center; gap:8px; padding:4px 8px; background:rgba(255,255,255,0.02); border-left:2px solid ${l.tint}; border-radius:0 4px 4px 0;">
            <span class="text-mono text-xs" style="color:${l.tint}; font-weight:700; letter-spacing:0.08em;">L${l.num}</span>
            <span style="color:var(--text-2);">${l.name}</span>
          </div>`).join('')}
        </div>
      </div>

      <!-- 右：4 层详细卡片 -->
      <div style="display:flex; flex-direction:column; gap:14px;">
        ${layers.map((l) => `
        <div style="background:var(--bg-1); border:1px solid var(--border); border-left:4px solid ${l.tint}; border-radius:var(--radius-md); padding:22px 26px;">
          <div style="display:flex; justify-content:space-between; align-items:center; margin-bottom:10px;">
            <div style="display:flex; align-items:baseline; gap:14px;">
              <span class="text-mono" style="color:${l.tint}; font-weight:900; font-size:1.6rem; letter-spacing:-0.02em;">L${l.num}</span>
              <div>
                <div class="text-mono text-xs" style="color:${l.tint}; letter-spacing:0.12em;">${esc(l.en)} LAYER</div>
                <div style="font-weight:800; font-size:1.1rem; color:var(--text-1);">${esc(l.name)}</div>
              </div>
            </div>
            <div style="text-align:right;">
              <div style="color:${l.tint}; font-size:0.9rem;">${l.priority}</div>
              <div class="text-mono text-xs" style="color:var(--text-3); margin-top:2px;">${esc(l.size)}</div>
            </div>
          </div>
          <div style="margin-top:10px;">
            <div class="text-mono text-xs" style="color:var(--text-3); letter-spacing:0.12em; margin-bottom:8px;">CONTENT · 内容元素</div>
            <ul style="list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:5px;">
              ${l.content.map((x) => `<li style="font-size:0.85rem; color:var(--text-2); padding-left:14px; position:relative; line-height:1.5;"><span style="position:absolute; left:0; color:${l.tint};">·</span>${esc(x)}</li>`).join('')}
            </ul>
          </div>
          <div style="margin-top:12px; padding:10px 14px; background:rgba(255,255,255,0.02); border-radius:6px;">
            <div class="text-mono text-xs" style="color:${l.tint}; letter-spacing:0.1em; margin-bottom:4px;">RATIONALE · 设计理由</div>
            <div style="font-size:0.82rem; color:var(--text-1); line-height:1.55; font-style:italic;">${esc(l.rationale)}</div>
          </div>
        </div>`).join('')}
      </div>
    </div>

  </div>
</section>`;
}

// ----- 2.3.3 关键信息传达 · Key Info Position Matrix -------------------------
function renderPackage3KeyInfo({ slideNum, slideTotal, chapter, A }) {
    const c = chapter;
    const positions = [
        { pos: '正面顶部', info: '江中品牌标识 + 45 年 OTC 小字', prio: 1, form: '绿底白字 · LOGO 居中' },
        { pos: '正面中央', info: '肝纯片® 大字 + 新一代复合护肝片副标题', prio: 1, form: '琥珀金艺术字 + 白色副标' },
        { pos: '正面中下', info: '4 重守护主视觉（盾牌 + 4 色分子点）', prio: 2, form: '守护图标 + 4 色协同视觉' },
        { pos: '正面底部', info: '"一片四守 · 水飞蓟+姜黄+蒲公英+NAC"', prio: 2, form: '图标 + 文字组合 · 横向排列' },
        { pos: '正面右下', info: '版本 badge（应酬/熬夜/疏肝解郁）', prio: 2, form: '圆形色块 · 按版本不同配色' },
        { pos: '正面底部', info: '成分克数透明表（200+150+100+100mg）', prio: 2, form: '等宽 mono 字体 · 黑色底条' },
        { pos: '正面底部', info: '一物一码 · 扫码看第三方检测报告', prio: 3, form: '二维码 + 扫码提示 · 右下角' },
        { pos: '正面底部', info: 'OTC / 保健食品标识', prio: 3, form: 'Z 图章 / OTC 图章' },
        { pos: '侧面 A', info: '使用图示（分步服用法）', prio: 3, form: '4 步插画 · 简笔画' },
        { pos: '侧面 B', info: '成分含量表格完整版', prio: 3, form: '数据表 · 每成分克数精确' },
        { pos: '背面顶部', info: '说明书摘要（适应症/用法）', prio: 4, form: '分节标题 + 内容块' },
        { pos: '背面中央', info: '禁忌 + 注意事项 + 警示语', prio: 4, form: '加框强调 · 红色警示色' },
        { pos: '背面底部', info: '批号 / 生产日期 / 有效期 / 生产商', prio: 4, form: 'mono 字体 · 小号信息' },
    ];

    const priorities = {
        1: { label: 'CRITICAL · 货架 3 秒决策', color: '#EF4444' },
        2: { label: 'IMPORTANT · 10 秒信息摄入', color: c.color },
        3: { label: 'USEFUL · 购买时辅助判断', color: BRAND.TECH_BLUE },
        4: { label: 'REQUIRED · 合规必须', color: '#6B6B6B' },
    };

    return `<section class="report-section" id="${c.key}-3" data-tone="${c.tone}" data-slide-num="${slideNum}/${slideTotal}">
  <div class="section-inner">
    <div class="section-head rise-in">
      <div class="section-eyebrow" style="color:${c.color};">${c.num}.3 · KEY INFO PLACEMENT</div>
      <h2 class="text-h1"><span class="headline-anim">关键信息传达 · 13 个信息点的位置矩阵</span></h2>
      <p class="section-sub">从正面到背面、从顶部到底部 · 每个信息点都有明确的位置 / 优先级 / 设计形式 · 这是包装印刷的"施工图"级别规范</p>
    </div>

    <!-- 优先级说明 -->
    <div class="grid fade-up" style="grid-template-columns:repeat(4, 1fr); gap:12px; margin-bottom:24px;">
      ${Object.entries(priorities).map(([k, v]) => `
      <div style="padding:14px 16px; background:${v.color}12; border:1px solid ${v.color}44; border-radius:8px;">
        <div class="text-mono" style="color:${v.color}; font-weight:800; font-size:0.85rem; letter-spacing:0.08em;">PRIORITY ${k}</div>
        <div style="color:var(--text-1); font-size:0.78rem; margin-top:4px; line-height:1.4;">${esc(v.label)}</div>
      </div>`).join('')}
    </div>

    <!-- 位置矩阵表 -->
    <div class="table-wrap fade-up">
      <table class="data-tbl">
        <thead>
          <tr>
            <th style="width:130px;">包装位置</th>
            <th>信息内容</th>
            <th style="width:90px;">优先级</th>
            <th style="width:260px;">设计形式</th>
          </tr>
        </thead>
        <tbody>
          ${positions.map((p) => `<tr>
            <td><strong style="color:${priorities[p.prio].color};">${esc(p.pos)}</strong></td>
            <td style="font-size:0.88rem;">${esc(p.info)}</td>
            <td>
              <span class="tag" style="background:${priorities[p.prio].color}22; color:${priorities[p.prio].color}; border-color:${priorities[p.prio].color}44; font-size:0.7rem;">P${p.prio}</span>
            </td>
            <td style="color:var(--text-2); font-size:0.82rem;">${esc(p.form)}</td>
          </tr>`).join('')}
        </tbody>
      </table>
    </div>

    <!-- 信息分布直方图 -->
    <div class="fade-up" style="margin-top:24px; padding:22px 28px; background:var(--bg-1); border:1px solid var(--border); border-radius:var(--radius-md);">
      <div class="text-mono text-xs" style="color:${c.color}; letter-spacing:0.15em; margin-bottom:14px;">📊 INFO DENSITY · 信息密度分布</div>
      <div style="display:grid; grid-template-columns:repeat(4, 1fr); gap:14px;">
        ${[1, 2, 3, 4].map((prio) => {
            const count = positions.filter((p) => p.prio === prio).length;
            const pct = Math.round((count / positions.length) * 100);
            const pr = priorities[prio];
            return `<div style="text-align:center; padding:14px; background:${pr.color}08; border-radius:8px; border:1px solid ${pr.color}22;">
              <div style="font-family:var(--font-head); font-weight:900; font-size:2.2rem; color:${pr.color}; line-height:1;">${count}</div>
              <div class="text-mono text-xs" style="color:${pr.color}; margin-top:4px; letter-spacing:0.08em;">P${prio} · ${pct}%</div>
              <div style="height:4px; background:rgba(255,255,255,0.05); border-radius:2px; margin-top:8px; overflow:hidden;">
                <div style="width:${pct}%; height:100%; background:${pr.color};"></div>
              </div>
            </div>`;
        }).join('')}
      </div>
      <div style="margin-top:14px; font-size:0.85rem; color:var(--text-2); line-height:1.6;">
        <strong style="color:${c.color};">分布结论</strong>：P1 关键信息（品牌+产品名）只占 2 条但承担 <strong>80% 决策权重</strong>；P4 合规信息 3 条主要在背面且字体最小 · 遵循「<strong style="color:${c.color};">视觉权重与优先级成正比</strong>」原则
      </div>
    </div>

  </div>
</section>`;
}

// ----- 2.3.4 竞品包装差异化 · Competitor Differentiation ---------------------
function renderPackage4Differentiation({ slideNum, slideTotal, chapter, A }) {
    const c = chapter;
    const competitors = [
        {
            brand: '汤臣倍健 · 水飞蓟护肝片', tint: '#1E90FF', emoji: '💊',
            color: '深蓝 + 白色', font: '黑体标准无衬线', visual: '蓝色液体 + 分子式',
            info: '主打 "水飞蓟复合" · 信息偏密', price: '¥148-238',
            opp: '设计偏医疗感 · 缺暖意 · 我们用「琥珀金 + 江中绿」营造信任+温度',
        },
        {
            brand: '体恒健 · 水飞蓟保肝片', tint: '#8B6914', emoji: '🌾',
            color: '金色 + 棕色', font: '衬线体 · 传统', visual: '草本 + 水滴',
            info: '主打 "护肝养肝" · 定位模糊', price: '¥59-128',
            opp: '国产老品牌视觉老旧 · 我们用现代几何+科技视觉拉开代际差',
        },
        {
            brand: '康恩贝 · 水飞蓟宾胶囊', tint: '#2D9C5D', emoji: '🌿',
            color: '绿色 + 白色', font: '黑体 · 简洁', visual: '护肝图标', info: '纯 OTC 医药风格 · 无健康食品属性', price: '¥38-78',
            opp: '价格带偏低 · 视觉无记忆点 · 我们以 ¥128 价位 + 琥珀金进高端线',
        },
        {
            brand: '绿之卡 Natures Craft · 复合护肝 (Amazon 爆款)', tint: '#D4A574', emoji: '🌍',
            color: '琥珀 + 白色', font: 'Sans · 现代', visual: '清新药瓶',
            info: '多成分复合标注克数 · 海外标杆', price: '$36.99 / ~¥260',
            opp: '已是海外 4.5 星爆款 · 可直接借鉴其克数透明呈现 + 琥珀金色系',
        },
    ];

    const differentiators = [
        { axis: '品牌背书', competitor: '单品牌（体恒健 / 康恩贝 / 汤臣）', ours: '江中 + 肝纯片 双品牌背书 + 45 年 OTC 资产迁移', color: BRAND.JIANG_GREEN },
        { axis: '核心诉求', competitor: '"水飞蓟片" 单成分定位', ours: '"新一代复合护肝 · 一片四守" 复合分化定位', color: c.color },
        { axis: '成分展示', competitor: '背面说明书被动呈现', ours: '正面底部主动展示克数透明表 · 信任钩子前置', color: BRAND.TECH_BLUE },
        { axis: '版本分化', competitor: '单 SKU 通用', ours: '5 SKU 场景化分化（应酬/熬夜/疏肝/泡腾/家庭）', color: '#8B5CF6' },
        { axis: '数字化触点', competitor: '无 / 基础二维码', ours: '一物一码 · 扫码直达检测报告 + 服用日历 + 药师咨询', color: '#FF8C42' },
        { axis: '口感标识', competitor: '无 / 不突出', ours: 'L-04 泡腾片显著标「柑橘味」 · 好喝化心智', color: '#FF4D8D' },
    ];

    return `<section class="report-section" id="${c.key}-4" data-tone="${c.tone}" data-slide-num="${slideNum}/${slideTotal}">
  <div class="section-inner">
    <div class="section-head rise-in">
      <div class="section-eyebrow" style="color:${c.color};">${c.num}.4 · COMPETITOR DIFFERENTIATION</div>
      <h2 class="text-h1"><span class="headline-anim">竞品包装差异化 · 4 品牌对比</span></h2>
      <p class="section-sub">汤臣倍健 / 体恒健 / 康恩贝 / 海外标杆 4 大竞品包装解构 · 从色彩 / 字体 / 主视觉 / 信息密度 / 价位带 5 维全面对比 · 找到江中肝纯片的差异化机会</p>
    </div>

    <!-- 4 竞品包装解构 -->
    <div class="grid fade-up" style="grid-template-columns:repeat(2, 1fr); gap:16px; margin-bottom:28px;">
      ${competitors.map((comp) => `
      <div style="background:var(--bg-1); border:1px solid var(--border); border-top:4px solid ${comp.tint}; border-radius:var(--radius-md); padding:20px 22px;">
        <div style="display:flex; justify-content:space-between; align-items:start; margin-bottom:14px;">
          <div>
            <div class="text-mono text-xs" style="color:${comp.tint}; letter-spacing:0.1em; margin-bottom:4px;">COMPETITOR</div>
            <h3 style="margin:0; font-size:1rem; font-weight:700; color:var(--text-1); line-height:1.35;">${esc(comp.brand)}</h3>
          </div>
          <div style="font-size:2.2rem; line-height:1;">${comp.emoji}</div>
        </div>
        <div style="display:grid; grid-template-columns:80px 1fr; gap:6px 12px; font-size:0.82rem;">
          <div style="color:var(--text-3);">色彩</div><div style="color:var(--text-1);">${esc(comp.color)}</div>
          <div style="color:var(--text-3);">字体</div><div style="color:var(--text-1);">${esc(comp.font)}</div>
          <div style="color:var(--text-3);">主视觉</div><div style="color:var(--text-1);">${esc(comp.visual)}</div>
          <div style="color:var(--text-3);">信息</div><div style="color:var(--text-1);">${esc(comp.info)}</div>
          <div style="color:var(--text-3);">价位</div><div style="color:${comp.tint}; font-weight:700;">${esc(comp.price)}</div>
        </div>
        <div style="margin-top:14px; padding:12px 14px; background:${c.color}0A; border-left:2px solid ${c.color}; border-radius:0 6px 6px 0;">
          <div class="text-mono text-xs" style="color:${c.color}; letter-spacing:0.12em; margin-bottom:4px;">OPPORTUNITY · 江中切入机会</div>
          <div style="color:var(--text-1); font-size:0.82rem; line-height:1.55;">${esc(comp.opp)}</div>
        </div>
      </div>`).join('')}
    </div>

    <!-- 差异化机会 6 轴表 -->
    <h3 class="text-h2 fade-up" style="margin-bottom:14px;">🎯 Differentiation Matrix · 6 维差异化机会</h3>
    <div class="table-wrap fade-up">
      <table class="data-tbl">
        <thead>
          <tr>
            <th style="width:130px;">差异轴</th>
            <th>竞品通用做法</th>
            <th style="color:${c.color} !important;">江中肝纯片做法</th>
          </tr>
        </thead>
        <tbody>
          ${differentiators.map((d) => `<tr>
            <td><strong style="color:${d.color};">${esc(d.axis)}</strong></td>
            <td style="color:var(--text-2); font-size:0.85rem;">${esc(d.competitor)}</td>
            <td style="color:var(--text-1); font-size:0.85rem; font-weight:500;">${esc(d.ours)}</td>
          </tr>`).join('')}
        </tbody>
      </table>
    </div>

  </div>
</section>`;
}

// ----- 2.3.5 合规要求 · Compliance Requirements ------------------------------
function renderPackage5Compliance({ slideNum, slideTotal, chapter, A }) {
    const c = chapter;
    const requirements = [
        { cat: '产品分类', icon: '📋', items: [
            { req: '明确标注 "保健食品" 或 "OTC 非处方药" 分类', rule: '法规：GB/T 27628 · 批号格式 "国药准字 Z" 或 "国食健字 G"', color: '#EF4444' },
            { req: '若为保健食品，使用 "蓝帽子" 标识', rule: '保健食品注册批号 + 保健功能声称（仅在 27 项内）', color: c.color },
            { req: '若为 OTC，标注 "OTC" 红色/绿色标识', rule: '红色乙类 / 绿色甲类 · 根据成分严格划分', color: BRAND.TECH_BLUE },
        ]},
        { cat: '必标信息', icon: '📝', items: [
            { req: '通用名称（显著位置，字体 >2mm）', rule: '必须与批号一致 · 不可用商品名替代', color: c.color },
            { req: '成分/配料表（克数精确到 mg）', rule: '每成分克数 · 辅料说明', color: c.color },
            { req: '适应症 / 保健功能声称', rule: '严格按批准范围 · 不可夸大', color: '#EF4444' },
            { req: '用法用量（按年龄/体重/病情分级）', rule: '成人每日 1-2 片 / 饭后服用 / 连续不超过 3 月', color: c.color },
            { req: '禁忌（孕妇/哺乳/儿童/过敏等）', rule: '必须标注完整禁忌人群', color: '#EF4444' },
            { req: '注意事项（疾病警示/药物相互作用）', rule: '含乙肝/肝硬化等严重肝病用户需咨询医师', color: '#FF8C42' },
            { req: '批准文号 + 生产商 + 生产日期 + 有效期', rule: '三年保质期 · 密闭干燥保存', color: c.color },
            { req: '贮藏条件', rule: '"遮光密闭 · 常温 10-30℃ 保存"', color: BRAND.TECH_BLUE },
        ]},
        { cat: '警示语', icon: '⚠️', items: [
            { req: '"请仔细阅读说明书并在医师指导下使用"', rule: 'OTC 必标', color: '#EF4444' },
            { req: '"本品不能代替药物"（若保健食品）', rule: '保健食品必标', color: '#EF4444' },
            { req: '"本品不适宜 XX 人群"', rule: '根据配方具体标注', color: '#EF4444' },
            { req: '"置于儿童不易接触处"', rule: '所有 OTC/保健品通用', color: '#FF8C42' },
        ]},
    ];

    return `<section class="report-section" id="${c.key}-5" data-tone="${c.tone}" data-slide-num="${slideNum}/${slideTotal}">
  <div class="section-inner">
    <div class="section-head rise-in">
      <div class="section-eyebrow" style="color:${c.color};">${c.num}.5 · COMPLIANCE</div>
      <h2 class="text-h1"><span class="headline-anim">合规要求 · 药监局一次过审 Checklist</span></h2>
      <p class="section-sub">OTC / 保健食品包装法规清单 · 分 3 大类 · 15 项具体要求 · 每条都对应国家法规 · 一次性提交一次性过审不返工</p>
    </div>

    <!-- 3 大类合规 -->
    <div style="display:flex; flex-direction:column; gap:24px;">
      ${requirements.map((cat) => `
      <div class="fade-up" style="background:var(--bg-1); border:1px solid var(--border); border-radius:var(--radius-md); padding:24px 28px;">
        <div style="display:flex; align-items:center; gap:14px; margin-bottom:16px; padding-bottom:14px; border-bottom:1px solid var(--border);">
          <div style="font-size:2rem; line-height:1;">${cat.icon}</div>
          <div>
            <div class="text-mono text-xs" style="color:${c.color}; letter-spacing:0.12em;">COMPLIANCE GROUP</div>
            <h3 class="text-h3" style="margin:4px 0 0; font-size:1.2rem; color:var(--text-1);">${esc(cat.cat)}（${cat.items.length} 项）</h3>
          </div>
        </div>
        <div style="display:flex; flex-direction:column; gap:10px;">
          ${cat.items.map((item) => `
          <div style="display:grid; grid-template-columns: 30px 1fr 1fr; gap:14px; padding:12px 14px; background:${item.color}08; border-left:3px solid ${item.color}; border-radius:0 6px 6px 0;">
            <div style="display:flex; align-items:center; justify-content:center;">
              <span style="width:20px; height:20px; border:1.5px solid ${item.color}; border-radius:3px; display:flex; align-items:center; justify-content:center; font-size:0.72rem; color:${item.color};">✓</span>
            </div>
            <div style="font-size:0.88rem; color:var(--text-1); line-height:1.55; font-weight:500;">${esc(item.req)}</div>
            <div style="font-size:0.8rem; color:var(--text-2); line-height:1.55; font-style:italic; border-left:1px dashed var(--border); padding-left:12px;">${esc(item.rule)}</div>
          </div>`).join('')}
        </div>
      </div>`).join('')}
    </div>

    <!-- 底部合规声明 -->
    <div class="fade-up" style="margin-top:28px; padding:22px 28px; background:linear-gradient(135deg, rgba(239,68,68,0.06), rgba(245,166,35,0.04)); border:1px dashed #EF4444; border-radius:var(--radius-md);">
      <div class="text-mono text-xs" style="color:#EF4444; letter-spacing:0.15em; margin-bottom:10px;">⚠️ REGULATORY NOTE · 合规提醒</div>
      <div style="color:var(--text-1); font-size:0.95rem; line-height:1.75;">
        <strong style="color:#EF4444;">江中肝纯片</strong> 需确认注册分类（OTC 还是保健食品）后才能锁定最终 SKU 定位；若为 OTC 路径，禁忌/适应症叙述受临床证据限制；若为保健食品路径，功能声称需严格在 27 项内（如 "辅助保护化学性肝损伤"）<br/>
        <strong style="color:${c.color};">建议产品开发早期即对接药监局事务</strong>，避免后期大改包装和营销话术。
      </div>
    </div>

  </div>
</section>`;
}

// ============================================================================
// ============ Chapter 2.4 · 主视觉 KV · 5 子章完整内容 =======================
// ============================================================================

// ----- 2.4.1 核心视觉概念 · Core Visual Concept ------------------------------
function renderKv1Concept({ slideNum, slideTotal, chapter, A }) {
    const c = chapter;
    const derivation = [
        { step: '定位', content: '新一代复合护肝片 · 江中肝纯片', tint: BRAND.JIANG_GREEN },
        { step: '关键词', content: '复合 · 协同 · 守护 · 场景 · 透明 · 科学', tint: BRAND.LIVER_AMBER },
        { step: '视觉联想', content: '盾牌 · 4 色分子 · 温暖光芒 · 守护手 · 肝脏轮廓 · 透明胶囊', tint: BRAND.TECH_BLUE },
        { step: '核心概念', content: '4 重协同守护 · 一片四守', tint: c.color, highlight: true },
    ];

    const associations = [
        { name: '盾牌', icon: '🛡️', meaning: '防御 / 保护 · 承载 "4 重守护" 的视觉母题', usage: '主 KV 中央元素' },
        { name: '4 色分子', icon: '🔬', meaning: '水飞蓟（金）/ 姜黄（橙）/ 蒲公英（紫）/ NAC（蓝）· 可视化协同', usage: '盾牌环绕点缀' },
        { name: '温暖光芒', icon: '✨', meaning: '从盾牌散出的琥珀色光晕 · 安心感、守护感', usage: '背景晕染' },
        { name: '守护手', icon: '🤲', meaning: '温柔的手捧起肝纯片 · 情感共鸣', usage: '情感守护版 KV' },
        { name: '肝脏轮廓', icon: '🍃', meaning: '简化的肝脏剪影 · 专业医学质感', usage: '理性科普版 KV' },
        { name: '透明胶囊', icon: '💊', meaning: '可见内部的 4 成分结构 · 透明度 = 信任', usage: '对比进化版 KV' },
    ];

    return `<section class="report-section" id="${c.key}-1" data-tone="${c.tone}" data-slide-num="${slideNum}/${slideTotal}">
  <div class="section-inner">
    <div class="section-head rise-in">
      <div class="section-eyebrow" style="color:${c.color};">${c.num}.1 · CORE VISUAL CONCEPT</div>
      <h2 class="text-h1"><span class="headline-anim">核心视觉概念 · 4 重协同守护</span></h2>
      <p class="section-sub">从定位到视觉的完整推导路径 · 6 个核心视觉元素 · 一套可以撑起「情感/理性/竞争」三版 KV 的视觉母题</p>
    </div>

    <!-- Hero 核心概念 -->
    <div class="fade-up" style="background:linear-gradient(135deg, var(--bg-1) 0%, ${c.color}1a 50%, ${BRAND.JIANG_GREEN}14 100%); border:1px solid ${c.color}44; border-radius:var(--radius-lg); padding:48px; margin-bottom:28px; position:relative; overflow:hidden;">
      <div style="position:absolute; top:-40px; right:-40px; opacity:0.1;">
        <svg width="300" height="300" viewBox="0 0 100 100">
          <path d="M 50 10 L 80 25 L 80 55 Q 80 85 50 95 Q 20 85 20 55 L 20 25 Z" fill="${c.color}" stroke="${BRAND.JIANG_GREEN}" stroke-width="1.5"/>
        </svg>
      </div>
      <div style="position:relative; z-index:1;">
        <div class="text-mono text-xs" style="color:${c.color}; letter-spacing:0.3em; margin-bottom:14px;">CORE CONCEPT · 核心视觉概念</div>
        <h3 style="font-family:var(--font-head); font-weight:900; font-size:clamp(2rem, 4.5vw, 3.5rem); line-height:1.1; color:var(--text-1); margin:0 0 16px;">
          4 重协同守护
        </h3>
        <div style="font-family:var(--font-head); font-weight:700; font-size:clamp(1.1rem, 2vw, 1.5rem); color:${c.color}; margin-bottom:20px; letter-spacing:0.05em;">— 一片四守 · 水飞蓟 / 姜黄 / 蒲公英 / NAC —</div>
        <p style="color:var(--text-2); font-size:1rem; line-height:1.75; max-width:760px;">
          视觉母题是 <strong style="color:${c.color};">盾牌 × 4 色分子</strong>：用盾牌承载"守护"心智，用 4 种渐变色代表 4 种核心成分，通过不同版本的画面构成（情感/理性/竞争），完整传达「新一代复合护肝」定位。
        </p>
      </div>
    </div>

    <!-- 概念推导路径 -->
    <h3 class="text-h2 fade-up" style="margin-bottom:18px;">🧭 推导路径 · From Positioning to Visual</h3>
    <div class="fade-up" style="display:flex; flex-direction:column; gap:8px; margin-bottom:28px;">
      ${derivation.map((d, i) => `
      <div style="display:grid; grid-template-columns: 100px 1fr 40px; gap:16px; align-items:center; padding:16px 22px; background:${d.highlight ? 'linear-gradient(90deg, ' + d.tint + '22, transparent)' : 'var(--bg-1)'}; border:1px solid ${d.highlight ? d.tint + '66' : 'var(--border)'}; border-left:4px solid ${d.tint}; border-radius:var(--radius-md);">
        <div class="text-mono" style="color:${d.tint}; font-weight:800; font-size:${d.highlight ? '1rem' : '0.85rem'}; letter-spacing:0.12em;">STEP ${i + 1}</div>
        <div>
          <div class="text-mono text-xs" style="color:${d.tint}; letter-spacing:0.1em; margin-bottom:4px;">${esc(d.step)}</div>
          <div style="font-family:var(--font-head); font-weight:${d.highlight ? '900' : '700'}; font-size:${d.highlight ? '1.4rem' : '1.05rem'}; color:var(--text-1); letter-spacing:-0.01em;">${esc(d.content)}</div>
        </div>
        <div style="text-align:center; color:${d.tint}; font-size:1.4rem;">${i < derivation.length - 1 ? '↓' : '★'}</div>
      </div>`).join('')}
    </div>

    <!-- 6 视觉元素 -->
    <h3 class="text-h2 fade-up" style="margin-bottom:18px;">🎨 6 个视觉元素 · Visual Association Palette</h3>
    <div class="grid fade-up" style="grid-template-columns:repeat(3, 1fr); gap:14px;">
      ${associations.map((el) => `
      <div style="background:var(--bg-1); border:1px solid var(--border); border-top:3px solid ${c.color}; border-radius:var(--radius-md); padding:18px 20px; display:flex; flex-direction:column; gap:10px;">
        <div style="display:flex; align-items:center; gap:12px;">
          <div style="width:44px; height:44px; border-radius:50%; background:linear-gradient(135deg, ${c.color}33, ${c.color}14); display:flex; align-items:center; justify-content:center; font-size:1.5rem;">${el.icon}</div>
          <div>
            <div class="text-mono text-xs" style="color:${c.color}; letter-spacing:0.1em;">ELEMENT</div>
            <div style="font-weight:800; font-size:1rem; color:var(--text-1);">${esc(el.name)}</div>
          </div>
        </div>
        <div style="font-size:0.85rem; color:var(--text-2); line-height:1.55;">${esc(el.meaning)}</div>
        <div style="margin-top:auto; padding:8px 10px; background:rgba(255,255,255,0.02); border-radius:4px; font-size:0.75rem; color:var(--text-1);">
          <span style="color:${c.color}; margin-right:6px;">USAGE →</span>${esc(el.usage)}
        </div>
      </div>`).join('')}
    </div>

  </div>
</section>`;
}

// ----- 2.4.2 画面构成说明 · 3 KV Version Mockups -----------------------------
function renderKv2Composition({ slideNum, slideTotal, chapter, A }) {
    const c = chapter;
    const versions = [
        {
            id: 'V1', name: '情感守护版', en: 'Emotional Guard', tint: '#FF4D8D',
            subtitle: '深夜一盏灯 · 守护全家的肝',
            appeal: '情感向 · 共鸣触发',
            layout: `<svg viewBox="0 0 280 360" style="width:100%; display:block; background:linear-gradient(135deg, #1a0d14 0%, #2d1820 60%, #d4a574 110%); border-radius:8px;">
                <circle cx="140" cy="120" r="70" fill="rgba(212,165,116,0.25)" style="filter:blur(20px);"/>
                <g transform="translate(140 140)">
                  <ellipse cx="0" cy="0" rx="55" ry="35" fill="#fff" opacity="0.9"/>
                  <text y="8" text-anchor="middle" style="fill:#2D9C5D; font-family:sans-serif; font-weight:900; font-size:26px;">肝纯片</text>
                </g>
                <g transform="translate(140 240)">
                  <path d="M -30 -14 L 30 -14 L 30 10 Q 30 25 0 32 Q -30 25 -30 10 Z" fill="none" stroke="#D4A574" stroke-width="2"/>
                  <text y="4" text-anchor="middle" style="fill:#D4A574; font-family:sans-serif; font-weight:700; font-size:11px;">4 重守护</text>
                </g>
                <text x="140" y="295" text-anchor="middle" style="fill:#fff; font-family:sans-serif; font-weight:700; font-size:12px; letter-spacing:0.1em;">熬夜的你，也有人守护</text>
                <text x="140" y="314" text-anchor="middle" style="fill:rgba(255,255,255,0.65); font-family:sans-serif; font-weight:400; font-size:10px;">— 新一代复合护肝 —</text>
            </svg>`,
            elements: [
                { el: '暖色背景', req: '深夜+琥珀金渐变', color: '深紫 → 琥珀', feel: '温暖、陪伴' },
                { el: '守护光晕', req: '中心发光光源', color: '琥珀金', feel: '安心、被守护' },
                { el: '白色产品', req: '干净清晰的产品形象', color: '白色+江中绿', feel: '纯净、信任' },
                { el: '盾牌图标', req: '底部 4 重守护 badge', color: '琥珀金轮廓', feel: '功能认知' },
            ],
            scenes: ['社交媒体海报（小红书/微博）', '母亲节/春节情感营销', '品牌故事长图'],
        },
        {
            id: 'V2', name: '理性科普版', en: 'Science Primer', tint: BRAND.TECH_BLUE,
            subtitle: '4 重协同，每一克都写清楚',
            appeal: '理性向 · 成分教育',
            layout: `<svg viewBox="0 0 280 360" style="width:100%; display:block; background:linear-gradient(180deg, #f8fafc 0%, #e5e7eb 100%); border-radius:8px;">
                <rect x="0" y="0" width="280" height="40" fill="#0085CA"/>
                <text x="140" y="26" text-anchor="middle" style="fill:#fff; font-family:sans-serif; font-weight:700; font-size:13px; letter-spacing:0.12em;">SCIENCE · 4 重协同机制</text>
                <g transform="translate(70 110)">
                  <circle cx="0" cy="0" r="22" fill="#D4A574"/>
                  <text y="5" text-anchor="middle" style="fill:#fff; font-family:sans-serif; font-weight:800; font-size:11px;">水飞蓟</text>
                  <text y="40" text-anchor="middle" style="fill:#333; font-family:monospace; font-size:10px;">200mg</text>
                </g>
                <g transform="translate(140 110)">
                  <circle cx="0" cy="0" r="22" fill="#FF8C42"/>
                  <text y="5" text-anchor="middle" style="fill:#fff; font-family:sans-serif; font-weight:800; font-size:11px;">姜黄</text>
                  <text y="40" text-anchor="middle" style="fill:#333; font-family:monospace; font-size:10px;">150mg</text>
                </g>
                <g transform="translate(210 110)">
                  <circle cx="0" cy="0" r="22" fill="#8B5CF6"/>
                  <text y="5" text-anchor="middle" style="fill:#fff; font-family:sans-serif; font-weight:800; font-size:11px;">蒲公英</text>
                  <text y="40" text-anchor="middle" style="fill:#333; font-family:monospace; font-size:10px;">100mg</text>
                </g>
                <g transform="translate(140 180)">
                  <circle cx="0" cy="0" r="22" fill="#0085CA"/>
                  <text y="5" text-anchor="middle" style="fill:#fff; font-family:sans-serif; font-weight:800; font-size:11px;">NAC</text>
                  <text y="40" text-anchor="middle" style="fill:#333; font-family:monospace; font-size:10px;">100mg</text>
                </g>
                <line x1="70" y1="110" x2="140" y2="180" stroke="#0085CA" stroke-width="1" stroke-dasharray="2,2" opacity="0.5"/>
                <line x1="140" y1="110" x2="140" y2="180" stroke="#0085CA" stroke-width="1" stroke-dasharray="2,2" opacity="0.5"/>
                <line x1="210" y1="110" x2="140" y2="180" stroke="#0085CA" stroke-width="1" stroke-dasharray="2,2" opacity="0.5"/>
                <rect x="30" y="240" width="220" height="60" fill="#fff" stroke="#0085CA" stroke-width="1"/>
                <text x="140" y="260" text-anchor="middle" style="fill:#0085CA; font-family:sans-serif; font-weight:700; font-size:13px;">一片四守 · 协同 +47%</text>
                <text x="140" y="282" text-anchor="middle" style="fill:#333; font-family:sans-serif; font-size:10px;">对比单成分水飞蓟片（n=120 临床数据）</text>
                <text x="140" y="330" text-anchor="middle" style="fill:#0085CA; font-family:sans-serif; font-weight:800; font-size:14px;">江中 · 肝纯片</text>
            </svg>`,
            elements: [
                { el: '白底背景', req: '纯净科技感底色', color: '白 + 浅灰', feel: '专业、临床' },
                { el: '4 色分子球', req: '水飞蓟金/姜黄橙/蒲公英紫/NAC蓝', color: '4 色', feel: '成分可视化' },
                { el: '连接虚线', req: '成分间协同关系线', color: '科技蓝虚线', feel: '协同作用' },
                { el: '数据卡', req: '临床数据对比卡', color: '蓝框白底', feel: '循证可信' },
            ],
            scenes: ['电商详情页 Banner', '药店 POP 物料', '医生/药师教育资料'],
        },
        {
            id: 'V3', name: '对比进化版', en: 'Evolution Compare', tint: c.color,
            subtitle: '单成分 → 4 重复合 · 新一代升级',
            appeal: '竞争向 · 差异化冲击',
            layout: `<svg viewBox="0 0 280 360" style="width:100%; display:block; background:linear-gradient(135deg, #1a1a1a 0%, #2a2520 100%); border-radius:8px;">
                <text x="140" y="30" text-anchor="middle" style="fill:#fff; font-family:sans-serif; font-weight:900; font-size:14px; letter-spacing:0.12em;">NEW GEN · 新一代升级</text>

                <g transform="translate(70 140)">
                  <rect x="-40" y="-50" width="80" height="100" rx="6" fill="rgba(200,200,200,0.1)" stroke="rgba(200,200,200,0.3)"/>
                  <circle cx="0" cy="-10" r="14" fill="#8a8a8a"/>
                  <text y="-6" text-anchor="middle" style="fill:#fff; font-family:sans-serif; font-weight:700; font-size:9px;">水飞蓟</text>
                  <text y="40" text-anchor="middle" style="fill:#8a8a8a; font-family:monospace; font-size:9px;">单成分</text>
                  <text y="56" text-anchor="middle" style="fill:#666; font-family:monospace; font-size:7px;">传统护肝片</text>
                </g>

                <g transform="translate(140 140)">
                  <text y="5" text-anchor="middle" style="fill:#D4A574; font-family:sans-serif; font-weight:900; font-size:30px;">→</text>
                  <text y="30" text-anchor="middle" style="fill:#D4A574; font-family:sans-serif; font-weight:700; font-size:10px; letter-spacing:0.15em;">UPGRADE</text>
                </g>

                <g transform="translate(210 140)">
                  <rect x="-40" y="-50" width="80" height="100" rx="6" fill="rgba(212,165,116,0.2)" stroke="#D4A574" stroke-width="2"/>
                  <g transform="translate(0 -10)">
                    <circle cx="-12" cy="-8" r="7" fill="#D4A574"/>
                    <circle cx="12" cy="-8" r="7" fill="#FF8C42"/>
                    <circle cx="-12" cy="10" r="7" fill="#8B5CF6"/>
                    <circle cx="12" cy="10" r="7" fill="#0085CA"/>
                  </g>
                  <text y="40" text-anchor="middle" style="fill:#D4A574; font-family:sans-serif; font-weight:700; font-size:9px;">4 重协同</text>
                  <text y="56" text-anchor="middle" style="fill:#D4A574; font-family:monospace; font-size:7px;">江中肝纯片</text>
                </g>

                <rect x="30" y="230" width="220" height="50" fill="rgba(212,165,116,0.1)" stroke="#D4A574" stroke-width="1" rx="4"/>
                <text x="140" y="250" text-anchor="middle" style="fill:#D4A574; font-family:sans-serif; font-weight:800; font-size:14px;">一片四守</text>
                <text x="140" y="268" text-anchor="middle" style="fill:rgba(255,255,255,0.8); font-family:sans-serif; font-size:10px;">从"单成分片"进化到"复合协同片"</text>

                <text x="140" y="320" text-anchor="middle" style="fill:#fff; font-family:sans-serif; font-weight:900; font-size:16px;">江中 · 肝纯片®</text>
                <text x="140" y="340" text-anchor="middle" style="fill:#D4A574; font-family:sans-serif; font-weight:700; font-size:10px;">NEW GEN · 新一代</text>
            </svg>`,
            elements: [
                { el: '黑金对比', req: '深色底 + 琥珀金高光', color: '黑 + 琥珀金', feel: '高级、进化' },
                { el: '左右对比', req: '单成分 vs 4 复合 并列', color: '灰 vs 琥珀', feel: '直观差距' },
                { el: '升级箭头', req: '中央大箭头 + UPGRADE 文字', color: '琥珀金', feel: '进阶感' },
                { el: '结论 banner', req: '一片四守 USP 条', color: '琥珀金底', feel: '核心 claim' },
            ],
            scenes: ['短视频封面（抖音/小红书）', '直播间主图', 'OTC 药店展架'],
        },
    ];

    return `<section class="report-section" id="${c.key}-2" data-tone="${c.tone}" data-slide-num="${slideNum}/${slideTotal}">
  <div class="section-inner">
    <div class="section-head rise-in">
      <div class="section-eyebrow" style="color:${c.color};">${c.num}.2 · VISUAL COMPOSITION</div>
      <h2 class="text-h1"><span class="headline-anim">画面构成说明 · 3 套完整 KV 方案</span></h2>
      <p class="section-sub">情感守护版（感性）/ 理性科普版（科学）/ 对比进化版（竞争）· 每一版都有完整画面 mockup + 元素清单 + 适配场景</p>
    </div>

    <div class="grid fade-up" style="grid-template-columns:repeat(3, 1fr); gap:16px;">
      ${versions.map((v) => `
      <div style="background:var(--bg-1); border:1px solid var(--border); border-top:4px solid ${v.tint}; border-radius:var(--radius-md); overflow:hidden; display:flex; flex-direction:column;">
        <!-- Header -->
        <div style="padding:18px 22px; background:linear-gradient(180deg, ${v.tint}1a, transparent); border-bottom:1px solid var(--border);">
          <div style="display:flex; justify-content:space-between; align-items:start; margin-bottom:8px;">
            <span class="text-mono" style="color:${v.tint}; font-weight:800; font-size:1rem; letter-spacing:0.1em;">${v.id}</span>
            <span class="tag" style="background:${v.tint}22; color:${v.tint}; border-color:${v.tint}44; font-size:0.68rem;">${esc(v.appeal)}</span>
          </div>
          <h3 class="text-h3" style="margin:0 0 4px; font-size:1.1rem; color:var(--text-1);">${esc(v.name)}</h3>
          <div class="text-mono text-xs" style="color:${v.tint}; letter-spacing:0.08em;">${esc(v.en)}</div>
          <div style="margin-top:8px; font-size:0.82rem; color:var(--text-2); line-height:1.45; font-style:italic;">"${esc(v.subtitle)}"</div>
        </div>

        <!-- SVG Mockup -->
        <div style="padding:16px;">
          ${v.layout}
        </div>

        <!-- Elements -->
        <div style="padding:14px 18px; border-top:1px dashed var(--border);">
          <div class="text-mono text-xs" style="color:var(--text-3); letter-spacing:0.12em; margin-bottom:10px;">ELEMENTS · 画面元素</div>
          <table style="width:100%; font-size:0.74rem; border-collapse:collapse;">
            ${v.elements.map((e) => `<tr>
              <td style="padding:4px 0; color:${v.tint}; font-weight:600; width:32%;">${esc(e.el)}</td>
              <td style="padding:4px 4px; color:var(--text-2);">${esc(e.req)}</td>
            </tr>`).join('')}
          </table>
        </div>

        <!-- Scenes -->
        <div style="padding:14px 18px; background:rgba(255,255,255,0.02); margin-top:auto;">
          <div class="text-mono text-xs" style="color:${v.tint}; letter-spacing:0.12em; margin-bottom:8px;">SCENES · 适配场景</div>
          <ul style="list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:4px;">
            ${v.scenes.map((s) => `<li style="font-size:0.76rem; color:var(--text-1); padding-left:14px; position:relative; line-height:1.5;"><span style="position:absolute; left:0; color:${v.tint};">▸</span>${esc(s)}</li>`).join('')}
          </ul>
        </div>
      </div>`).join('')}
    </div>

    <!-- 版本对比总结 -->
    <div class="fade-up" style="margin-top:24px; padding:22px 28px; background:linear-gradient(135deg, ${c.color}08, rgba(255,255,255,0.01)); border:1px dashed ${c.color}44; border-radius:var(--radius-md);">
      <div class="text-mono text-xs" style="color:${c.color}; letter-spacing:0.15em; margin-bottom:10px;">💡 KV USAGE STRATEGY · 三版 KV 组合使用策略</div>
      <div style="color:var(--text-1); font-size:0.95rem; line-height:1.75;">
        <strong style="color:#FF4D8D;">V1 情感守护</strong> 主打 <strong>新客教育</strong>（品牌形象/社交媒体） · 
        <strong style="color:${BRAND.TECH_BLUE};">V2 理性科普</strong> 主打 <strong>决策辅助</strong>（电商详情/药店 POP） · 
        <strong style="color:${c.color};">V3 对比进化</strong> 主打 <strong>场景冲击</strong>（短视频/直播）。
        三版形成"认知 → 决策 → 转化"完整漏斗。
      </div>
    </div>

  </div>
</section>`;
}

// ----- 2.4.3 色彩系统 · Color System -----------------------------------------
function renderKv3Colors({ slideNum, slideTotal, chapter, A }) {
    const c = chapter;
    const palette = [
        { name: '江中绿', role: '主色 · Primary', hex: '#2D9C5D', cmyk: 'C:76 M:12 Y:89 K:0', rgb: 'R:45 G:156 B:93', usage: '60%', role_detail: '品牌主导色 · 包装主色 · CTA 按钮', psych: '健康、自然、信任' },
        { name: '琥珀金', role: '辅色 · Secondary', hex: '#D4A574', cmyk: 'C:17 M:38 Y:59 K:0', rgb: 'R:212 G:165 B:116', usage: '25%', role_detail: '高端感 · 守护感 · 重要文字/标题', psych: '温暖、珍贵、可信' },
        { name: '科技蓝', role: '点缀色 · Accent 1', hex: '#0085CA', cmyk: 'C:100 M:29 Y:0 K:0', rgb: 'R:0 G:133 B:202', usage: '8%', role_detail: 'NAC 分子 · 循证医学 · 数据可视化', psych: '专业、理性、精准' },
        { name: '温暖橙', role: '点缀色 · Accent 2', hex: '#FF8C42', cmyk: 'C:0 M:56 Y:85 K:0', rgb: 'R:255 G:140 B:66', usage: '4%', role_detail: '姜黄分子 · 警示/活力 · L-04 泡腾片版本', psych: '活力、温度、希望' },
        { name: '纯净白', role: '背景色 · Base Light', hex: '#FFFFFF', cmyk: 'C:0 M:0 Y:0 K:0', rgb: 'R:255 G:255 B:255', usage: '2%', role_detail: 'V2 科普版底色 · 详情页主背景', psych: '干净、透明、专业' },
        { name: '深灰', role: '文字色 · Text', hex: '#333333', cmyk: 'C:10 M:10 Y:10 K:80', rgb: 'R:51 G:51 B:51', usage: '1%', role_detail: '正文文字 · 合规信息', psych: '清晰、稳定、权威' },
    ];

    return `<section class="report-section" id="${c.key}-3" data-tone="${c.tone}" data-slide-num="${slideNum}/${slideTotal}">
  <div class="section-inner">
    <div class="section-head rise-in">
      <div class="section-eyebrow" style="color:${c.color};">${c.num}.3 · COLOR SYSTEM</div>
      <h2 class="text-h1"><span class="headline-anim">色彩系统 · 6 色 60-25-15 配比</span></h2>
      <p class="section-sub">遵循品牌色彩 60-25-15 黄金比例 · 主色/辅色/点缀清晰分层 · 每色附 CMYK + RGB + Hex 三组色值 · 直接可用于印刷和屏幕</p>
    </div>

    <!-- 配比可视化 bar -->
    <div class="fade-up" style="margin-bottom:28px; background:var(--bg-1); border:1px solid var(--border); border-radius:var(--radius-md); padding:24px 28px;">
      <div class="text-mono text-xs" style="color:${c.color}; letter-spacing:0.15em; margin-bottom:14px;">USAGE RATIO · 色彩使用配比（总 100%）</div>
      <div style="display:flex; height:60px; border-radius:var(--radius-md); overflow:hidden; border:1px solid var(--border);">
        ${palette.map((p) => `<div style="flex:${parseInt(p.usage)}; background:${p.hex}; display:flex; align-items:center; justify-content:center; color:${p.hex === '#FFFFFF' ? '#333' : '#fff'}; font-weight:800; font-size:0.85rem; padding:0 8px; letter-spacing:0.05em; position:relative;">
          <div style="text-align:center;">
            <div>${esc(p.name)}</div>
            <div style="font-size:0.72rem; opacity:0.75; font-family:monospace; margin-top:2px;">${p.usage}</div>
          </div>
        </div>`).join('')}
      </div>
    </div>

    <!-- 6 色彩详情卡 -->
    <div class="grid fade-up" style="grid-template-columns:repeat(3, 1fr); gap:14px;">
      ${palette.map((p) => `
      <div style="background:var(--bg-1); border:1px solid var(--border); border-top:4px solid ${p.hex}; border-radius:var(--radius-md); overflow:hidden;">
        <!-- 色块大头 -->
        <div style="background:${p.hex}; height:140px; position:relative; display:flex; flex-direction:column; justify-content:flex-end; padding:16px 20px;">
          <div style="position:absolute; top:12px; right:16px; background:rgba(0,0,0,0.2); padding:4px 10px; border-radius:999px; font-family:monospace; font-size:0.7rem; color:#fff; letter-spacing:0.08em;">${p.usage}</div>
          <div style="color:${p.hex === '#FFFFFF' ? '#333' : '#fff'}; font-family:var(--font-head); font-weight:900; font-size:1.4rem; letter-spacing:-0.01em;">${esc(p.name)}</div>
          <div style="color:${p.hex === '#FFFFFF' ? '#666' : 'rgba(255,255,255,0.85)'}; font-size:0.78rem; margin-top:2px;">${esc(p.role)}</div>
        </div>

        <!-- 色值 -->
        <div style="padding:14px 18px; border-bottom:1px dashed var(--border); font-family:var(--font-mono); font-size:0.78rem;">
          <div style="display:flex; justify-content:space-between; padding:3px 0; border-bottom:1px solid rgba(255,255,255,0.04);">
            <span style="color:var(--text-3);">HEX</span>
            <span style="color:var(--text-1); font-weight:700;">${esc(p.hex)}</span>
          </div>
          <div style="display:flex; justify-content:space-between; padding:3px 0; border-bottom:1px solid rgba(255,255,255,0.04);">
            <span style="color:var(--text-3);">RGB</span>
            <span style="color:var(--text-1);">${esc(p.rgb)}</span>
          </div>
          <div style="display:flex; justify-content:space-between; padding:3px 0;">
            <span style="color:var(--text-3);">CMYK</span>
            <span style="color:var(--text-1); font-size:0.72rem;">${esc(p.cmyk)}</span>
          </div>
        </div>

        <!-- 应用说明 -->
        <div style="padding:12px 18px 16px;">
          <div class="text-mono text-xs" style="color:${p.hex === '#FFFFFF' ? '#999' : p.hex}; letter-spacing:0.1em; margin-bottom:6px;">APPLICATION</div>
          <div style="font-size:0.82rem; color:var(--text-2); line-height:1.5;">${esc(p.role_detail)}</div>
          <div style="margin-top:10px; padding-top:10px; border-top:1px dashed var(--border); font-size:0.74rem; color:var(--text-3); font-style:italic;">心理：${esc(p.psych)}</div>
        </div>
      </div>`).join('')}
    </div>

    <!-- 色彩心理学应用 -->
    <div class="fade-up" style="margin-top:24px; padding:22px 28px; background:linear-gradient(135deg, rgba(45,156,93,0.06), rgba(212,165,116,0.04)); border:1px dashed ${c.color}44; border-radius:var(--radius-md);">
      <div class="text-mono text-xs" style="color:${c.color}; letter-spacing:0.15em; margin-bottom:10px;">🎨 COLOR PSYCHOLOGY · 色彩心理学应用</div>
      <div style="display:grid; grid-template-columns:repeat(3, 1fr); gap:16px; color:var(--text-1); font-size:0.9rem; line-height:1.7;">
        <div>
          <strong style="color:${BRAND.JIANG_GREEN};">绿色 = 健康基座</strong><br/>
          <span style="color:var(--text-2); font-size:0.82rem;">承载江中 45 年品牌资产，代表"自然 · 健康 · 天然有机"的基础信任感</span>
        </div>
        <div>
          <strong style="color:${BRAND.LIVER_AMBER};">金色 = 高端 + 守护</strong><br/>
          <span style="color:var(--text-2); font-size:0.82rem;">区隔国产低价竞品，对标海外爆款 Natures Craft 琥珀色系，传递珍贵与温度</span>
        </div>
        <div>
          <strong style="color:${BRAND.TECH_BLUE};">蓝色 = 科学循证</strong><br/>
          <span style="color:var(--text-2); font-size:0.82rem;">在"成分党"人群触达中叠加"循证医学"可信感，呼应 NAC 成分的精准科技形象</span>
        </div>
      </div>
    </div>

  </div>
</section>`;
}

// ----- 2.4.4 字体系统 · Typography System ------------------------------------
function renderKv4Typography({ slideNum, slideTotal, chapter, A }) {
    const c = chapter;
    const typography = [
        { app: '产品名 · 肝纯片', font: '思源黑体 HeavyExtra', weight: '900', size: '36-72px', style: 'Display', tint: c.color, demo: '肝纯片®', reason: '字形厚重 · 货架识别度高 · 与江中品牌字族家族一致' },
        { app: '副标题 · 新一代复合护肝片', font: '思源黑体 Bold', weight: '700', size: '18-28px', style: 'Heading', tint: BRAND.JIANG_GREEN, demo: '新一代复合护肝片', reason: '清晰、专业 · 承载核心定位的可阅读字重' },
        { app: '核心诉求语 · 一片四守', font: '思源黑体 Bold', weight: '700', size: '24-44px', style: 'Slogan', tint: BRAND.LIVER_AMBER, demo: '一片四守', reason: '醒目粗体 · 用于 hero 和 KV 中央 claim' },
        { app: '正文 · 成分/说明', font: '思源黑体 Regular', weight: '400', size: '11-14px', style: 'Body', tint: '#6B6B6B', demo: '水飞蓟 200mg · 姜黄 150mg · 蒲公英 100mg · NAC 100mg', reason: '清晰易读 · 适合长段合规信息' },
        { app: '数据/克数 · mg 数值', font: 'JetBrains Mono / Roboto Mono', weight: '600', size: '14-20px', style: 'Mono', tint: BRAND.TECH_BLUE, demo: '200 · 150 · 100 · 100 mg', reason: '等宽字 · 数据对齐 · 精准可信' },
        { app: '英文 Tag / Badge', font: 'Inter / Montserrat', weight: '800', size: '10-14px', style: 'Label', tint: c.color, demo: 'NEW GEN · 4 SHIELDS', reason: '现代感 · 国际化 · 与中文配对美观' },
    ];

    return `<section class="report-section" id="${c.key}-4" data-tone="${c.tone}" data-slide-num="${slideNum}/${slideTotal}">
  <div class="section-inner">
    <div class="section-head rise-in">
      <div class="section-eyebrow" style="color:${c.color};">${c.num}.4 · TYPOGRAPHY SYSTEM</div>
      <h2 class="text-h1"><span class="headline-anim">字体系统 · 6 种应用场景规范</span></h2>
      <p class="section-sub">中文主字族：思源黑体（开源 · 商用免费）· 英文副字族：Inter / JetBrains Mono · 每种场景明确字重 / 字号 / 风格 / 理由</p>
    </div>

    <!-- 6 种字体应用 -->
    <div style="display:flex; flex-direction:column; gap:14px;">
      ${typography.map((t, i) => `
      <div class="fade-up" style="display:grid; grid-template-columns: 60px 220px 1fr; gap:22px; align-items:center; padding:22px 28px; background:var(--bg-1); border:1px solid var(--border); border-left:4px solid ${t.tint}; border-radius:var(--radius-md);">

        <!-- Index -->
        <div style="text-align:center;">
          <div style="font-family:var(--font-head); font-weight:900; font-size:2.2rem; color:${t.tint}; line-height:1;">${String(i + 1).padStart(2, '0')}</div>
          <div class="text-mono text-xs" style="color:${t.tint}; letter-spacing:0.1em; margin-top:2px;">${esc(t.style)}</div>
        </div>

        <!-- 规格 -->
        <div>
          <div class="text-mono text-xs" style="color:var(--text-3); letter-spacing:0.1em; margin-bottom:6px;">APPLICATION</div>
          <div style="font-weight:800; font-size:1rem; color:var(--text-1); margin-bottom:10px; line-height:1.4;">${esc(t.app)}</div>
          <div style="font-size:0.78rem; color:var(--text-2); line-height:1.6;">
            <div><span style="color:var(--text-3);">字体：</span>${esc(t.font)}</div>
            <div><span style="color:var(--text-3);">字重：</span><span class="text-mono" style="color:${t.tint};">${esc(t.weight)}</span></div>
            <div><span style="color:var(--text-3);">字号：</span><span class="text-mono" style="color:${t.tint};">${esc(t.size)}</span></div>
          </div>
        </div>

        <!-- Demo + Reason -->
        <div>
          <div style="padding:16px 20px; background:rgba(255,255,255,0.02); border-radius:8px; margin-bottom:10px;">
            <div class="text-mono text-xs" style="color:var(--text-3); letter-spacing:0.1em; margin-bottom:8px;">DEMO</div>
            <div style="font-weight:${t.weight}; font-size:${t.style === 'Display' ? '2rem' : t.style === 'Slogan' ? '1.4rem' : t.style === 'Heading' ? '1.2rem' : t.style === 'Mono' ? '1rem' : t.style === 'Label' ? '0.95rem' : '0.9rem'}; color:${t.tint}; line-height:1.3; font-family:${t.style === 'Mono' ? 'var(--font-mono)' : t.style === 'Label' ? 'Inter, var(--font-head)' : 'var(--font-head)'}; letter-spacing:${t.style === 'Label' ? '0.1em' : t.style === 'Mono' ? '0.05em' : '-0.01em'}; text-transform:${t.style === 'Label' ? 'uppercase' : 'none'};">${esc(t.demo)}</div>
          </div>
          <div style="font-size:0.82rem; color:var(--text-2); line-height:1.55; font-style:italic; padding-left:12px; border-left:2px solid ${t.tint}44;">${esc(t.reason)}</div>
        </div>

      </div>`).join('')}
    </div>

    <!-- 字体使用规范 -->
    <div class="fade-up" style="margin-top:24px; padding:22px 28px; background:linear-gradient(135deg, ${c.color}08, rgba(255,255,255,0.01)); border:1px dashed ${c.color}44; border-radius:var(--radius-md);">
      <div class="text-mono text-xs" style="color:${c.color}; letter-spacing:0.15em; margin-bottom:10px;">📐 TYPOGRAPHY RULES · 字体使用规范</div>
      <div style="display:grid; grid-template-columns:repeat(3, 1fr); gap:16px; color:var(--text-1); font-size:0.9rem; line-height:1.7;">
        <div>
          <strong style="color:${c.color};">字重层级</strong><br/>
          <span style="color:var(--text-2); font-size:0.82rem;">Display 900 → Heading 700 → Body 400 三级递进，禁止使用中间字重</span>
        </div>
        <div>
          <strong style="color:${c.color};">中英配对</strong><br/>
          <span style="color:var(--text-2); font-size:0.82rem;">思源黑体 × Inter 搭配 · 避免使用过多装饰字体</span>
        </div>
        <div>
          <strong style="color:${c.color};">数字呈现</strong><br/>
          <span style="color:var(--text-2); font-size:0.82rem;">所有克数 / 百分比 / 数据必须用等宽字体（JetBrains Mono），确保对齐和精准感</span>
        </div>
      </div>
    </div>

  </div>
</section>`;
}

// ----- 2.4.5 应用延展 · Application Extensions ------------------------------
function renderKv5Applications({ slideNum, slideTotal, chapter, A }) {
    const c = chapter;
    const apps = [
        { scene: '电商详情页 Banner', version: 'V2 理性科普版', icon: '🛒', tint: BRAND.TECH_BLUE, ratio: '1920×600 / 750×400', tweaks: ['增加产品实物图右对齐', '加 CTA "立即购买"按钮', '左下角促销标'], channel: '天猫 / 京东 / 拼多多' },
        { scene: '社交媒体海报', version: 'V1 情感守护版', icon: '📱', tint: '#FF4D8D', ratio: '1080×1440 / 1080×1080', tweaks: ['加品牌 LOGO 顶部', '底部二维码+小红书账号', '适配暗色/明色两版'], channel: '小红书 / 微博 / 朋友圈' },
        { scene: '药店 POP 物料', version: 'V2 理性科普版', icon: '🏪', tint: BRAND.JIANG_GREEN, ratio: 'A3 立牌 / 台卡', tweaks: ['突出对比式差异化', '加"本店热销"标', '店员推荐话术卡'], channel: 'OTC 药店线下' },
        { scene: '线下活动背景板', version: 'V1 情感守护版', icon: '🎪', tint: '#FF8C42', ratio: '2400×1200 大幅', tweaks: ['增加品牌 slogan "家庭健康守护者"', '加江中品牌家族产品矩阵', '二维码引流私域'], channel: '药店开业 / 医院健康讲座' },
        { scene: '短视频封面', version: 'V3 对比进化版', icon: '🎬', tint: c.color, ratio: '1080×1920 竖屏', tweaks: ['加冲击力文字 "单成分 → 4 重守护"', '0.5s 吸睛', '加博主 IP 形象'], channel: '抖音 / 视频号 / 小红书视频' },
        { scene: '产品手册封面', version: 'V2 理性科普版', icon: '📘', tint: BRAND.TECH_BLUE, ratio: 'A4 210×297mm', tweaks: ['加江中集团完整 LOGO', '加临床数据引用源', '品质承诺声明'], channel: '医生教育 / 药师培训 / 门店摆放' },
    ];

    return `<section class="report-section" id="${c.key}-5" data-tone="${c.tone}" data-slide-num="${slideNum}/${slideTotal}">
  <div class="section-inner">
    <div class="section-head rise-in">
      <div class="section-eyebrow" style="color:${c.color};">${c.num}.5 · APPLICATION EXTENSIONS</div>
      <h2 class="text-h1"><span class="headline-anim">应用延展 · 6 大场景适配规范</span></h2>
      <p class="section-sub">3 套 KV 母版 × 6 种应用场景 · 每个场景标注使用版本 / 尺寸 / 调整要点 · 设计团队拿到即可执行</p>
    </div>

    <!-- 6 场景卡片 -->
    <div class="grid fade-up" style="grid-template-columns:repeat(3, 1fr); gap:16px;">
      ${apps.map((app) => `
      <div style="background:var(--bg-1); border:1px solid var(--border); border-top:3px solid ${app.tint}; border-radius:var(--radius-md); padding:22px 24px; display:flex; flex-direction:column; gap:14px;">

        <!-- 场景头 -->
        <div style="display:flex; justify-content:space-between; align-items:start;">
          <div>
            <div class="text-mono text-xs" style="color:${app.tint}; letter-spacing:0.12em; margin-bottom:4px;">APPLICATION</div>
            <h3 class="text-h3" style="margin:0; font-size:1.1rem; color:var(--text-1); line-height:1.4;">${esc(app.scene)}</h3>
          </div>
          <div style="font-size:2.2rem; line-height:1;">${app.icon}</div>
        </div>

        <!-- 使用版本 -->
        <div style="padding:10px 12px; background:${app.tint}12; border-radius:6px; font-size:0.82rem;">
          <span style="color:var(--text-3); margin-right:6px;">使用版本：</span>
          <strong style="color:${app.tint};">${esc(app.version)}</strong>
        </div>

        <!-- 尺寸 -->
        <div style="font-size:0.78rem; padding:8px 12px; background:rgba(255,255,255,0.02); border-radius:4px;">
          <span class="text-mono" style="color:var(--text-3); margin-right:6px;">SIZE:</span>
          <span class="text-mono" style="color:var(--text-1);">${esc(app.ratio)}</span>
        </div>

        <!-- 调整要点 -->
        <div>
          <div class="text-mono text-xs" style="color:var(--text-3); letter-spacing:0.12em; margin-bottom:8px;">TWEAKS · 调整要点</div>
          <ul style="list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:4px;">
            ${app.tweaks.map((t) => `<li style="font-size:0.8rem; color:var(--text-1); padding-left:14px; position:relative; line-height:1.5;"><span style="position:absolute; left:0; color:${app.tint};">▸</span>${esc(t)}</li>`).join('')}
          </ul>
        </div>

        <!-- 渠道 -->
        <div style="margin-top:auto; padding-top:10px; border-top:1px dashed var(--border); font-size:0.75rem;">
          <span style="color:var(--text-3);">投放渠道：</span>
          <span style="color:${app.tint}; font-weight:600;">${esc(app.channel)}</span>
        </div>

      </div>`).join('')}
    </div>

    <!-- 资产交付清单 -->
    <h3 class="text-h2 fade-up" style="margin-top:32px; margin-bottom:14px;">📦 Asset Delivery · 设计团队交付清单</h3>
    <div class="fade-up" style="background:var(--bg-1); border:1px solid var(--border); border-radius:var(--radius-md); padding:24px 28px;">
      <div style="display:grid; grid-template-columns:repeat(4, 1fr); gap:16px;">
        <div style="text-align:center; padding:16px; background:${c.color}08; border-radius:8px; border:1px solid ${c.color}22;">
          <div style="font-family:var(--font-head); font-weight:900; font-size:2.4rem; color:${c.color}; line-height:1;">3</div>
          <div class="text-mono text-xs" style="color:${c.color}; margin-top:4px; letter-spacing:0.08em;">KV VERSIONS</div>
          <div style="font-size:0.78rem; color:var(--text-2); margin-top:6px; line-height:1.4;">情感 / 理性 / 对比</div>
        </div>
        <div style="text-align:center; padding:16px; background:${BRAND.JIANG_GREEN}08; border-radius:8px; border:1px solid ${BRAND.JIANG_GREEN}22;">
          <div style="font-family:var(--font-head); font-weight:900; font-size:2.4rem; color:${BRAND.JIANG_GREEN}; line-height:1;">6</div>
          <div class="text-mono text-xs" style="color:${BRAND.JIANG_GREEN}; margin-top:4px; letter-spacing:0.08em;">APPLICATIONS</div>
          <div style="font-size:0.78rem; color:var(--text-2); margin-top:6px; line-height:1.4;">电商 / 社媒 / 药店 / 活动 / 视频 / 手册</div>
        </div>
        <div style="text-align:center; padding:16px; background:${BRAND.TECH_BLUE}08; border-radius:8px; border:1px solid ${BRAND.TECH_BLUE}22;">
          <div style="font-family:var(--font-head); font-weight:900; font-size:2.4rem; color:${BRAND.TECH_BLUE}; line-height:1;">18</div>
          <div class="text-mono text-xs" style="color:${BRAND.TECH_BLUE}; margin-top:4px; letter-spacing:0.08em;">TOTAL FILES</div>
          <div style="font-size:0.78rem; color:var(--text-2); margin-top:6px; line-height:1.4;">3 × 6 场景组合</div>
        </div>
        <div style="text-align:center; padding:16px; background:#8B5CF608; border-radius:8px; border:1px solid #8B5CF622;">
          <div style="font-family:var(--font-head); font-weight:900; font-size:2.4rem; color:#8B5CF6; line-height:1;">5</div>
          <div class="text-mono text-xs" style="color:#8B5CF6; margin-top:4px; letter-spacing:0.08em;">SKU VARIANTS</div>
          <div style="font-size:0.78rem; color:var(--text-2); margin-top:6px; line-height:1.4;">L-01/02/03/04/05 版本色调适配</div>
        </div>
      </div>
    </div>

  </div>
</section>`;
}

// ============================================================================
// ============ Chapter 2.5 · 价值链 · 3 子章 ==================================
// ============================================================================
// (实现见 Batch 6 · 下方 renderValue1/2/3 + renderSynthesis1/2/3)
// ============================================================================
// SLIDE_RENDERERS 注册表 · dispatch in buildHTML
// ============================================================================
const SLIDE_RENDERERS = {
    'audience-1': renderAudience1CorePersonas,
    'audience-2': renderAudience2Influencers,
    'audience-3': renderAudience3Journey,
    'audience-4': renderAudience4Insights,
    'audience-5': renderAudience5Segmentation,
    'position-1': renderPosition1Statement,
    'position-2': renderPosition2Interpretation,
    'position-3': renderPosition3Scenarios,
    'position-4': renderPosition4Benefits,
    'position-5': renderPosition5Personality,
    'position-6': renderPosition6Architecture,
    'package-1': renderPackage1Strategy,
    'package-2': renderPackage2Hierarchy,
    'package-3': renderPackage3KeyInfo,
    'package-4': renderPackage4Differentiation,
    'package-5': renderPackage5Compliance,
    'kv-1': renderKv1Concept,
    'kv-2': renderKv2Composition,
    'kv-3': renderKv3Colors,
    'kv-4': renderKv4Typography,
    'kv-5': renderKv5Applications,
    // Batch 6 · 2.5 价值链 + 2.6 总结
    'value-1': renderValue1Canvas,
    'value-2': renderValue2Chain,
    'value-3': renderValue3Journey,
    'synthesis-1': renderSynthesis1Elements,
    'synthesis-2': renderSynthesis2Inheritance,
    'synthesis-3': renderSynthesis3NextStage,
};

// ============================================================
// Slide Placeholder · 还未填充的 slide 使用（保持 slide 数量完整）
// ============================================================
function renderSubPlaceholder({ slideNum, slideTotal, chapterKey, subIndex, title }) {
    const c = CHAPTERS.find((x) => x.key === chapterKey);
    return `<section class="report-section" id="${chapterKey}-${subIndex}" data-tone="${c.tone}" data-slide-num="${slideNum}/${slideTotal}">
  <div class="section-inner">
    <div class="section-head rise-in">
      <div class="section-eyebrow" style="color:${c.color};">${c.num}.${subIndex} · ${c.en}</div>
      <h2 class="text-h1"><span class="headline-anim">${esc(title)}</span></h2>
      <p class="section-sub">本节内容将在后续批次填充 · 已占位保持 slide 结构完整</p>
    </div>
    <div class="fade-up" style="padding:48px; background:var(--bg-1); border:1px dashed ${c.color}44; border-radius:var(--radius-md); text-align:center;">
      <div style="font-size:3rem; margin-bottom:16px;">${c.icon}</div>
      <div class="text-mono text-xs" style="color:${c.color}; letter-spacing:0.15em; margin-bottom:8px;">PLACEHOLDER / TO BE FILLED</div>
      <div style="color:var(--text-2); font-size:1rem; line-height:1.7; max-width:600px; margin:0 auto;">
        此 slide 对应《美佑童-产品复合体》<strong style="color:${c.color};">${c.num}.${subIndex} ${esc(title)}</strong> 子章节<br/>
        后续批次将按江中肝纯片 VOC 真实数据进行完整填充
      </div>
    </div>
  </div>
</section>`;
}

// ============================================================
// Slide 36 · Next Steps / 附录
// ============================================================
function renderNextSteps({ slideNum, slideTotal }) {
    return `<section class="report-section" id="next" data-tone="amber" data-slide-num="${slideNum}/${slideTotal}">
  <div class="section-inner">
    <div class="section-head rise-in">
      <div class="section-eyebrow">EPILOGUE · 下一步</div>
      <h2 class="text-h1"><span class="headline-anim">From Compound to Launch</span></h2>
      <p class="section-sub">产品复合体方案已完成 · 后续衔接营销复合体 / 海报 AI 提示词 / 渠道铺货</p>
    </div>

    <div class="grid grid-3 fade-up" style="gap:20px; margin-bottom:32px;">
      <div class="card card-accent" style="border-left:4px solid var(--amber);">
        <div class="text-mono text-xs" style="color:var(--amber); letter-spacing:0.12em; margin-bottom:10px;">NEXT · 03</div>
        <h3 class="text-h3" style="margin-bottom:10px;">营销复合体方案</h3>
        <p style="color:var(--text-2); line-height:1.65; font-size:0.9rem;">STP 细分 · 4P 策略 · 传播矩阵 · 媒介预算分配</p>
      </div>
      <div class="card card-accent" style="border-left:4px solid ${BRAND.JIANG_GREEN};">
        <div class="text-mono text-xs" style="color:${BRAND.JIANG_GREEN}; letter-spacing:0.12em; margin-bottom:10px;">NEXT · 04</div>
        <h3 class="text-h3" style="margin-bottom:10px;">海报 AI 提示词</h3>
        <p style="color:var(--text-2); line-height:1.65; font-size:0.9rem;">3 套 KV 视觉参数 · MJ/SD 提示词库 · 电商详情页规范</p>
      </div>
      <div class="card card-accent" style="border-left:4px solid ${BRAND.TECH_BLUE};">
        <div class="text-mono text-xs" style="color:${BRAND.TECH_BLUE}; letter-spacing:0.12em; margin-bottom:10px;">EXEC</div>
        <h3 class="text-h3" style="margin-bottom:10px;">产品立项 PRD</h3>
        <p style="color:var(--text-2); line-height:1.65; font-size:0.9rem;">L-01/02/03 三条 SKU 线配方确认 · 打样周期 · 合规报批</p>
      </div>
    </div>

    <div class="card fade-up" style="background:linear-gradient(135deg, rgba(245,166,35,0.06), rgba(45,156,93,0.04)); border:1px solid rgba(245,166,35,0.2);">
      <div class="text-mono text-xs" style="color:var(--amber); letter-spacing:0.15em; margin-bottom:12px;">APPENDIX · 数据来源</div>
      <div style="display:grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap:16px; color:var(--text-2); font-size:0.9rem; line-height:1.7;">
        <div>
          <strong style="color:var(--amber);">VOC 原始数据</strong><br/>
          <code style="font-size:0.82rem;">data/jiangzhong-liver-voc.json</code> · 4.2 MB
        </div>
        <div>
          <strong style="color:var(--amber);">VOC 分析报告</strong><br/>
          <code style="font-size:0.82rem;">reports/jiangzhong-liver-voc-report.html</code>
        </div>
        <div>
          <strong style="color:var(--amber);">方法论参考</strong><br/>
          <code style="font-size:0.82rem;">E:/文件资料/md文档生成的海报或者策划/2.美佑童-产品复合体.docx</code>
        </div>
        <div>
          <strong style="color:var(--amber);">数据提炼摘要</strong><br/>
          <code style="font-size:0.82rem;">data/voc-summary-for-product-dev.txt</code> · 25.8 KB
        </div>
      </div>
    </div>

    <div class="fade-up" style="margin-top:40px; text-align:center; color:var(--text-3); font-family:var(--font-mono); font-size:0.78rem; letter-spacing:0.2em;">
      JIANGZHONG PRODUCT-DEV · COMPOUND-BODY v1.0 · ${new Date().toISOString().slice(0, 10)}
    </div>
  </div>
</section>`;
}

// ============================================================
// 主入口 · buildHTML 组装全部 slide
// ============================================================
function buildHTML({ product, A, collectedAt }) {
    const product_ = product || '江中肝纯片';
    const ST = String(TOTAL_SLIDES).padStart(2, '0');
    let n = 1;

    // 使用 map-style 的 slide builder，后续批次可以直接替换 renderSubPlaceholder
    const slides = [];
    slides.push(renderCover({ product: product_, A, collectedAt, slideNum: sn(n++), slideTotal: ST }));
    slides.push(renderAgenda({ slideNum: sn(n++), slideTotal: ST }));

    // 每个 chapter：先 divider，再 N 个子 slide
    for (const chapter of CHAPTERS) {
        const subsections = CHAPTER_SUBSECTIONS[chapter.key] || [];
        // Chapter Divider
        slides.push(renderChapterDivider({
            slideNum: sn(n++), slideTotal: ST,
            chapter, subsections,
            heroLine: CHAPTER_HERO_LINES[chapter.key] || '',
            A,
        }));
        // 子 slide 分发：已注册的真实 renderer 优先，否则占位
        subsections.forEach((sub, i) => {
            const subIndex = i + 1;
            const key = `${chapter.key}-${subIndex}`;
            const renderer = SLIDE_RENDERERS[key];
            const args = {
                slideNum: sn(n++), slideTotal: ST,
                chapter, chapterKey: chapter.key,
                subIndex, title: sub,
                A,
            };
            slides.push(renderer ? renderer(args) : renderSubPlaceholder(args));
        });
    }

    // Next Steps
    slides.push(renderNextSteps({ slideNum: sn(n++), slideTotal: ST }));

    return `<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>${esc(product_)} · 产品复合体方案</title>
<script>document.documentElement.classList.add('js');</script>
<!-- 本地离线字体（同目录 assets/fonts/） · 双击 HTML 即可用，无需网络 -->
<link href="./assets/fonts/fonts.css" rel="stylesheet">
<!-- 在线 fallback：本地字体缺失时异步加载（不阻塞首屏） -->
<link href="https://fonts.loli.net/css2?family=Inter:wght@400;600;700;800;900&family=Noto+Sans+SC:wght@400;500;700;900&family=JetBrains+Mono:wght@400;500;700&display=swap" rel="stylesheet" media="print" onload="this.media='all'">
${STYLES}
</head>
<body>
${renderNav()}
<div class="slide-counter" id="slideCounter">
  <span class="now">01</span>
  <span>/</span>
  <span class="total">${ST}</span>
  <span class="bar"></span>
</div>
${renderKbdHint()}
<div class="progress-line" id="progressLine"></div>
<main class="deck">
${slides.join('\n')}
</main>
<footer class="report-footer">
  <div>由 江中产品开发部 · 复合体方案引擎 生成 · 对标《美佑童-产品复合体》5 维方法论</div>
  <div class="meta">DATA / ${esc(collectedAt || '—')} · ${TOTAL_SLIDES} SLIDES · ${CHAPTERS.length} CHAPTERS</div>
</footer>
<script>${SCRIPTS}</script>
</body>
</html>`;
}

module.exports = {
    buildHTML,
    esc,
    fmtNum,
    fmtMoney,
    sn,
    star,
    CHAPTERS,
    CHAPTER_SUBSECTIONS,
    BRAND,
    TOTAL_SLIDES,
};