```
### 2.4 滚动动线 · 4 种节奏
| 节奏 | 用途 | 视觉处理 |
|---|---|---|
| `urgent` | Ch1 诘问起点 | 红/橙高亮 · 大字数字 |
| `analytical` | Ch2/3 竞品 VOC | 冷色 · 表格 · 矩阵 |
| `insight` | Ch4 KANO | 紫/蓝 · 渐变 Hero 金句 |
| `empathy` | Ch5 场景 | 暖色 · 场景插图位 · VOC 多 |
| `strategic` | Ch6 无人地带 | 绿色 · 2x2 矩阵 · 高亮 |
| `forward` | Ch7 新机会 | 金色 · 上升感 · 虚实结合 |
| `blueprint` | Ch8 4P | 蓝黑 · 表格密 · 数字多 |
在 section 上加 `data-tone="..."`，可用 CSS 按 tone 切换强调色：
```css
[data-tone="urgent"] { --accent: var(--coral); }
[data-tone="strategic"]{ --accent: var(--jiang-green); }
```
---
## 🧱 3. 4 类核心视觉模块
每个子章节的 "5 件套" 在视觉上对应 4 类模块：
### 3.1 Section Head（Hero）
```html
1.1 · 成人爆款 vs 儿童心智
为什么 乳酸菌素片 成人爆款，儿童心智却是空白
7.9 亿成人市场已验证 OTC 信任，但儿童 SKU 不到 5%，家长搜索"儿童乳酸菌"第一反应仍是妈咪爱或合生元。
```
**三段式纪律**：
- eyebrow（品类色 · Mono · 大写 · letter-spacing）
- title（大字号 · 800 字重 · 至少一个 `
` 品类色强调）
- subtitle（灰 `text-2` · 行高 1.75 · 最大 900px 宽）
### 3.2 数据组（StatStrip / VocCard）
#### StatStrip · KPI 数字条
```html
7.9亿
成人乳酸菌素片市场
vs 儿童 0.4 亿
```
**精美点**：
- 背景用 `主色0C`（12% 透明度）· 边框 `主色33`（20% 透明度）
- 数字 900 字重 · 2rem · Mono + 品类色
- delta 用更小字号 + Mono，和数字叠加
#### VocCard · 证据卡
```html
「宝宝 2 岁抗生素后吃了一周，大便好多了，比妈咪爱便宜还不用冷藏」
```
**精美点**：
- **3-4px 品类色 left border**（这是视觉识别码，所有报告一致）
- 顶部 flex 两端：平台 + 昵称 + IP（左）· ♥ 点赞（右）
- 平台名大写 · Mono · 品类色 · 0.1em letter-spacing
- 正文用 `「」` 中文引号包裹 · 行高 1.7 · 字号 0.88rem
### 3.3 结构组（CompareTable / Matrix2x2 / TheoryBox）
#### CompareTable · 对比表格
```html
```
**精美点**：
- header 底边 `2px 主色44`，行底边 `1px border`
- 本品列整列品类色加粗，对手列用 `text-2` 淡化
- letter-spacing 0.05em 让表头"透气"
#### Matrix2x2 · 无人地带四象限
关键精美法则：**第 4 象限（本品独占）必须用品类色高亮**。
```html
右下 · 家庭 × 便捷（无人地带）
✅ 机会：分龄装 × 咀嚼片 × 卡通 IP
```
#### TheoryBox · 理论盒
用于 KANO / JTBD / 3C 这类理论 mapping，不抢戏但要清晰。
```html
```
### 3.4 结论组（InsightHero / DecisionList）
#### InsightHero · 金句观点卡
```html
💡 KEY INSIGHT · 关键洞察
乳酸菌素片不是"更便宜的益生菌"，而是OTC 药线信任的儿童入口。
```
**精美点**：
- 135° 渐变背景（`主色14` → `主色04`）
- 2px 品类色边框（注意 alpha 44）
- 金句字号 1.1rem · 行高 1.8 · 至少一个 ``
#### DecisionList · 落地决策
```html
🎯 落地决策
P0 · 产品：上架分龄装（1-3/3-6/6-12 岁）咀嚼片 SKU
```
**精美点**：
- 决策项左边 **3px 品类色** border
- 每条开头用 `P0 · 动词`（加粗 + 品类色 + 动词化）
- 2 列布局，避免单列显得稀疏
---
## 📊 4. 数据可视化 Pattern
### 4.1 StatStrip（已讲）
### 4.2 Progress Bar · 比例条
```html
```
### 4.3 Inline Bar Chart（轻量）
```html
```
**纪律**：尽量不用外部 chart 库。SVG 和纯 div 能画的都别引 Chart.js / ECharts，会破坏单文件无依赖。
### 4.4 Tag Cloud · 标签云
```html
#冷链 · 156
```
### 4.5 Sankey / Flow Diagram（复杂场景）
如果是"决策链"「家长 → 医生 → 药店 → 购买 → 使用 → 复购」这种流程图，推荐**5-6 个方块 + 箭头 Unicode**：
```html
```
---
## 🎮 5. 微交互 / 导航
### 5.1 键盘导航（必装）
```js
(function() {
const sections = document.querySelectorAll('.report-section');
let idx = 0;
function go(i) {
idx = Math.max(0, Math.min(sections.length - 1, i));
sections[idx].scrollIntoView({ behavior: 'smooth' });
if (sections[idx].id) history.replaceState(null, '', '#' + sections[idx].id);
}
document.addEventListener('keydown', (e) => {
if (e.key === 'ArrowRight' || e.key === ' ' || e.key === 'PageDown') { e.preventDefault(); go(idx + 1); }
if (e.key === 'ArrowLeft' || e.key === 'PageUp') { e.preventDefault(); go(idx - 1); }
if (e.key === 'Home') go(0);
if (e.key === 'End') go(sections.length - 1);
});
if (location.hash) {
const i = [...sections].findIndex((s) => '#' + s.id === location.hash);
if (i >= 0) idx = i;
}
})();
```
### 5.2 平滑滚动 + 锚点
```css
html { scroll-behavior: smooth; }
.report-section { scroll-margin-top: 20px; }
```
### 5.3 卡片 hover（可选但推荐）
```css
.voc-card { transition: background .15s, border-color .15s; }
.voc-card:hover { background: var(--bg-2); border-color: var(--border-strong); }
```
### 5.4 Page Indicator（可选）
在右下角固定一个 `slide X / Y` 小角标：
```html
1 / 38
```
配合 JS：
```js
// 在 keydown 或 scroll 事件里更新
document.getElementById('page-indicator').textContent = `${idx+1} / ${sections.length}`;
```
---
## 🖨️ 6. 性能 / 交付优化
### 6.1 单文件无依赖
**必须遵守**：
- 所有 CSS inline 写到 `