@topmindspace/tms-skills 2.0.1 → 2.0.2

package/top-ppt-html/references/layout-grammar.md

@@ -1,315 +1,315 @@
-# 布局语法 · Layout Grammar（网格 · 元素 · 组合 · 留白）
-
-> **何时读**：任何页面动手排版之前；或觉得「不整齐 / 不优雅 / 空得别扭 / 挤」时。
-> **定位**：美观与空间秩序的**唯一排版契约**——先选骨架，再落元素，最后校准留白。与 `design-system.md`（token/字阶）互补：本文管**怎么摆**，那里管**用什么值**。
-> **单源**：预设骨架与元素规则 → `scripts/layout-constants.json` `layoutSystem`；几何英寸 → `pageTypes` / `grid`。
-
----
-
-## 〇、排版总序（禁止跳步）
-
-```
-① 定内容角色（主张 / 证据 / 结构 / 情绪）
-    ↓
-② 选预设骨架 P1–P12（禁止临场发明栅格）
-    ↓
-③ 按元素规则落位（图标/列表/卡/图/表/图注）
-    ↓
-④ 套间距节奏（只用 --sp-* / 既有 gap token）
-    ↓
-⑤ 校准对齐与留白（顶边 / 左缘 / 光学中心 / 填充率）
-    ↓
-⑥ 跑布局门禁（LAYOUT_*）
-```
-
-**一句话**：整齐优雅 = **同一左缘 + 同一节奏 + 单一视觉重心 + 有意留白**，不是「元素都放大」。
-
----
-
-## 一、页面框架与网格
-
-### 1.1 三层纵向区（每页固定）
-
-| 区 | 占位 | 内容 | 对齐 |
-|----|------|------|------|
-| **Chrome** | 顶 ~22% | eyebrow + 主标题 + 可选导语 + 标题线 | 左缘 = 版心左 `grid.x[0]` |
-| **Body** | 中 ~62% | 主件 + 从件（预设骨架决定列） | 落 12 列轨 |
-| **Annotation** | 底 ~16% | so-what / 口径 / 来源 / 页码 | 左缘同 Chrome；页码右缘 `x[12]` |
-
-- 绝对安全边距 `grid.safe`：任何元素不得越过。
-- 页码 / 来源永远压在 Annotation 带，**不进 Body**。
-
-### 1.2 横向 12 列（与 PPTX `grid.x[]` 同源）
-
-| 常用跨列 | 用途 | 预设 |
-|----------|------|------|
-| 7 + 5 | 主视觉 + 注解（V1） | P1 |
-| 12 + 4/4/4 | 通栏主件 + 底带 | P2 |
-| 5 + 7 / 52:48 | 大数 + 佐证 | P3 |
-| 6 + 6 | 对称对照 | P4 |
-| 4 + 4 + 4 | 三栏并列 | P5 |
-| 6/6 × 2 行 | 四象限 | P6 |
-| 3 + 6 + 3 | 侧栏 + 主区 | P7 |
-| 8 + 4 | 主区 + 注解列 | P8 |
-| 12 | 全幅结构/素材 | P9 |
-| bento 4 列 | 不等大拼贴 | P10 |
-| 2 + 1 + 1 | 主 + 双辅 | P11 |
-| 1 + 1 + 2 | 双辅 + 主 | P12 |
-
-**纪律**：卡片/图/表的左缘必须落在列轨上；禁止目测居中（CRAP Alignment）。
-
-### 1.3 间距节奏（只准用 token）
-
-| 层级 | Token | 用途 |
-|------|-------|------|
-| 微 | `--sp-1/2`（4/8） | 图标-文字、键-值、标签-数字 |
-| 组件内 | `--sp-3/4`（12/16） | 卡内标题-正文、列表项间 |
-| 组件间 | `--gap` / `--sp-5`（16–24） | 栅格 gap、卡片间距 |
-| 区块间 | `--sp-6/7`（32/48） | 主从件之间、图-注解 |
-| 页缘 | `--band-pad` | 上下呼吸 |
-
-**禁止**写死 `margin:13px` 之类游离值。同页同类间距必须同值。
-
----
-
-## 二、预设骨架 P1–P12（先选骨架，再填内容）
-
-> 每个骨架绑定：**列比 · 视觉权重 · 允许元素 · 填充率目标 · PPTX 页型**。
-> 选型顺序：内容形态 → 下表「首选」→ 不够用再「次选」。**禁止临场发明表外栅格。**
-
-| ID | 名称 | 列结构 | 视觉权重 | 允许主件 | 填充率 | 适用 | PPTX |
-|----|------|--------|----------|----------|--------|------|------|
-| **P1** | 主从图文 | 7:5（`g-side`） | 主 60 / 从 40 | 图/图表/素材 \| 列表/卡 | 65–75% | V1 演讲图文 | `split` |
-| **P2** | 通栏+底带 | 12 + 4/4/4 | 主 55 / 带 45 | 大图/结构 \| 三卡/指标 | 70–80% | V2 总览→分解 | `bar`/`diagram`+cards |
-| **P3** | 大数佐证 | 5:7 或 52:48 | 数 45 / 证 55 | KPI \| 小图/迷你表/要点 | 60–70% | V3 极偏/单点 | `kpi` |
-| **P4** | 对称对照 | 6:6 | 左右各 50 | 双卡/双图/双表 | 70–80% | V4 前后/方案 | `comparison` |
-| **P5** | 三栏并列 | 4:4:4 | 均等（唯一允许） | 三卡/三栏文 | 70–80% | 并列论点 | `cards`/`threecol` |
-| **P6** | 四象限 | 6:6 × 2 | 对角平衡 | 卡×2 + 图×2 | 75–85% | 四观察 | `cards`+`split` |
-| **P7** | 侧栏主区 | 3:6:3 | 主 55 | 图/表 \| 导航/图例 | 65–75% | 密表+过滤 | `split` |
-| **P8** | 主区+注解列 | 8:4 | 主 70 / 注 30 | 图/表 \| 要点 3 条 | 70–80% | 证据页 | `exhibit`/`split` |
-| **P9** | 全幅结构 | 12 | 100% 主件 | 架构/全景/素材大图 | 75–90% | C 模式/情绪 | `diagram`/`image` |
-| **P10** | 拼贴 Bento | 4 列跨格 | 主卡 ≥2 格 | 不等大卡/指标/迷你图 | 75–85% | 经营快照 | `cards` |
-| **P11** | 主+双辅 | 2:1:1 | 主 50 | 主图/主文 + 双辅卡 | 70–80% | 一主两从 | `split` |
-| **P12** | 双辅+主 | 1:1:2 | 主 50 | 双辅 + 主图/主文 | 70–80% | 镜像 P11 | `split` |
-
-### 2.1 权重铁律
-
-1. **一屏一视觉重心**：主件面积/字重视觉重量 ≥ 从件 1.5×。
-2. **禁止三等重大件**：三栏 P5 是唯一均分，且每栏必须是**同级**从件（都卡或都文），不得「图+卡+图」混均分。
-3. **镜像成对**：左重用 P1/P11，右重用镜像（`--rev` / P12），同篇交替不超过 2 次连续同向。
-4. **注释层不抢戏**：so-what 高度 ≤ Body 的 18%，字号 ≤ body。
-
-### 2.2 填充率（留白纪律 · 可测）
-
-```
-fill = Body 区被内容覆盖的估算面积 / Body 区面积
-```
-
-| 模式 | 目标 | 过低（空） | 过高（爆） |
-|------|------|------------|------------|
-| presentation | 62–78% | <55% → 补从件/并页/改 P2/P3 | >85% → 拆页或升密表 |
-| research | 70–85% | <60% | >90% |
-| architecture | 75–90%（图） | <65% | 文字挤图 |
-
-**空的合法来源只有三种**：章节幕 / 金句 / 收尾 CTA。其余「半空页」= 不合格。
-
----
-
-## 三、元素级排版规则（整齐优雅的最小单元）
-
-### 3.1 图标 Icon
-
-| 项 | 规则 |
-|----|------|
-| 尺寸 | 仅 16 / 20 / 24 px（列表 16–18，卡头 20–24，指标角标 16） |
-| 描边 | 1.8，`currentColor`，无填充除非实心标记 |
-| 对齐 | **光学中心**对文字 x-height 中线（不是框几何中心） |
-| 图文距 | `--sp-2`（8px）；图标左缘与文字块左缘差 = 图标宽 + 8 |
-| 位置 | 仅：卡头、列表行首、指标角标、提示条。**禁止**表格内/图表内/Agenda |
-| 密度 | 每屏 3–8 个；同屏同尺寸 |
-
-### 3.2 列表 List
-
-| 项 | 规则 |
-|----|------|
-| 项长 | ≤2 行、≤45 字；超长拆项或转表 |
-| 项距 | `--sp-3`（12px）；组间距 `--sp-5` |
-| 缩进 | 统一 `--sp-4`；嵌套仅 1 层 |
-| 引导 | 「**加粗结论。**解释」同一文本框（禁拆流） |
-| 对齐 | 多列列表顶边对齐；项符号光学对齐首字 |
-| 数量 | 卡内 ≤4（research ≤5）；单页列表组 ≤3 |
-
-### 3.3 卡片 Card
-
-| 项 | 规则 |
-|----|------|
-| 内边距 | `containers.pad.card`（≈18–24px），四边一致 |
-| 头 | 图标 + 标题同行，基线对齐；头-体 `--sp-3` |
-| 体 | 列表或 ≤3 行段落；禁止「标题+一行」占四行高度的空卡 |
-| 等高 | 同行卡片 `align-items:stretch`；矮卡**不拉伸内容**，只底对齐 |
-| 圆角/边 | 统一 `--r-md` + 1px `--border`；同页同风格 |
-| 网格 | P5=3 列 / P6=2×2 / P10=bento；禁止 5+ 等宽小卡挤一行 |
-
-### 3.4 指标 Metric / KPI
-
-| 项 | 规则 |
-|----|------|
-| 数字 | `t-metric`，`tabular-nums`；单位字号约 45% 于数字 |
-| 标签 | 数字下 `--sp-2`；注解再 `--sp-1` |
-| 行 | 4–6 个一排（P2 底带）；**数字基线对齐** |
-| KPI hero | 数字占 P3 左 45%，与右栏**垂直居中对齐**；Δ 变化色用 accent，不用红绿 |
-
-### 3.5 图表 Chart
-
-| 项 | 规则 |
-|----|------|
-| 标题 | 图上方左对齐 `t-h3`/`fig__cap`；与图 `--sp-3` |
-| 图区 | 居中于所在列；容器 `pad.chart` |
-| 比例 | 柱/折线 ≈16:9～2:1；环/饼 1:1 且 **直径 ≤ 内容区高 45%**（简单占比更小，走 P3） |
-| 标签 | **禁止叠在弧/柱心**；环图数值进图例行；柱标条顶/条外 |
-| 标签盒 | 最小宽 ≥ 最长标签估算宽 + 8px，防换行叠字 |
-| 轴/图例 | `micro`；图例在图右或图下，**不与数据重叠** |
-| 图注 | 来源/口径一行在 Annotation，不塞进 SVG |
-
-### 3.6 表格 Table
-
-| 项 | 规则 |
-|----|------|
-| 列 | 主标左对齐；数值右对齐 `tabular-nums` |
-| 行高 | 一致；密表 ≥0.32in / 常规 ≥0.5in |
-| 表头 | 高于正文行；底色 accent 或 surface-2 |
-| 空洞 | 空单元格 >40% → 合并列/换承载（`TABLE_DENSITY`） |
-| 宽度 | 占所在列 100%；与邻件顶边对齐 |
-
-### 3.7 图文 / 插图 Media
-
-| 项 | 规则 |
-|----|------|
-| 比例锁 | 必须 `imageSpec.ratioCssClass`；禁止自由拉伸 |
-| 对齐 | 与邻栏**顶边对齐**（P1/P8）或整体居中（P3 hero） |
-| 图注 | 默认图下 `media__cap--below`；遮罩字仅 `half/full` 情绪图 |
-| 占位 | 虚线框 + `.media__ph` 标签居中；比例与正式图一致 |
-| 多图 | 等高、等 gap、角标 A/B 仅 compare |
-
-### 3.8 列表化信息图 / 结构图 Infographic
-
-| 项 | 规则 |
-|----|------|
-| 节点 | 圆角矩形统一 `--r-sm/md`；内边距 8–12px；文字 2 行封顶 |
-| 连接 | **正交折线 + 箭头**（`.lane__arr` / `.arch__conn` / SVG `path+polygon`）；层间间距恒定；**禁裸 `→` 文本** |
-| 标签 | 节点外优先；避让不压线；分支标在边中点上方 |
-| 图例 | 左下或右下一行 chips；与图 `--sp-4` |
-| 密度 | 节点 ≤24（C）；同层等高、等宽（或等高不等宽按内容） |
-
-### 3.9 结论条 / 标注
-
-| 项 | 规则 |
-|----|------|
-| so-what | 通栏或主区宽；左 3px accent 边；高 ≤0.7in |
-| flags | 列表式，不与 so-what 同高堆叠超过 2 条 |
-| 引用 `[n]` | 上标紧跟数字，不另起行 |
-
----
-
-## 四、组合语法（多元素同页）
-
-### 4.1 三层槽位模型（所有组合共用）
-
-```
-┌─────────────────────────────────────┐
-│ Chrome（标题区）                      │
-├─────────────────────────────────────┤
-│ PRIMARY（主件，视觉重心）              │
-│   ┌──────────┐  ┌─────────────────┐ │
-│   │ 主件     │  │ SECONDARY 从件   │ │
-│   └──────────┘  └─────────────────┘ │
-├─────────────────────────────────────┤
-│ ANNOTATION（so-what / 来源 / 页码）    │
-└─────────────────────────────────────┘
-```
-
-| 槽位 | 面积（Body 内） | 可放 | 不可放 |
-|------|-----------------|------|--------|
-| PRIMARY | 50–70% | 图、表、结构、素材、KPI | 大段正文、装饰 |
-| SECONDARY | 20–40% | 列表、卡、小表、迷你图、图例 | 第二张同级大图 |
-| ANNOTATION | ≤18% | so-what、口径、flags | 论证正文 |
-
-### 4.2 合法组合矩阵（摘要 · 完整选型见 playbook §四）
-
-| 组合 | 骨架 | 主 | 从 | 注 |
-|------|------|----|----|-----|
-| 图+解读 | P1/P8 | 图 | 要点 3–4 | so-what |
-| 表+图互证 | P4/P8 | 表或图 | 对侧 | 口径 |
-| 架构+图例 | P9 | 结构图 | legend chips | 图注 1–2 行 |
-| 大数+证据 | P3 | KPI | 小图/表/2 指标 | Δ/口径 |
-| 指标带+主图 | P2 | 图 | 指标 4–6 | 口径 |
-| 图文互证 | P1 | 素材 | 要点 3–4 | 图注+来源 |
-| 四观察 | P6 | 对角卡/图 | 对角 | — |
-| 拼贴经营快照 | P10 | 主卡跨 2 | 小卡 | 口径行 |
-
-### 4.3 组合硬规则
-
-1. **从件必须承载主件表达不了的信息**（趋势/对比/含义），禁止复述主件数字。
-2. **高度匹配**：主从件顶边对齐（`a-start`）；高度差 >25% 时矮侧补注解卡或减主件高，**禁止大块空白尾巴**。
-3. **同型元素同构**：三卡同结构、双栏同维度对仗。
-4. **最多两种表面色**（surface / accent-soft），层次靠明度+描边。
-5. **跨页同类骨架连用 ≤2 页**（P5/P6 例外可 3），中间换 P3/P9 休止。
-
----
-
-## 五、对齐与光学（优雅的可执行定义）
-
-| 规则 | 做法 | 反例 |
-|------|------|------|
-| 左缘 | Chrome / Body / Annotation 全部 `x[0]` | 标题缩进、卡片浮中 |
-| 顶边 | 混排栏 `align-items:start`；指标行数字基线对齐 | 图顶对卡中 |
-| 右缘 | 页码、数值列、次要按钮贴 `x[12]` | 右缘参差 |
-| 光学中心 | 图标/单行标签在色块内 optical 居中 | 几何居中导致视觉下沉 |
-| 等距 | 同行元素 gap 恒定；不等距用「组」拉开 | 12/15/12/20 混用 |
-| 对象对齐 | 多图/多卡等高；表与图顶对齐 | 底对齐导致标题错位 |
-
-**自检口诀**：瞇起眼——只剩色块时，是否仍有清晰的「一条左线、一条顶线、一块重心」？
-
----
-
-## 六、布局门禁（`LAYOUT_*` · 单源 `layoutSystem`）
-
-| 码 | 判据 | 级别 |
-|----|------|------|
-| `LAYOUT_NO_SKELETON` | 内容页未使用 P1–P12 对应类（`g-side/g-2/g-3/g-bento/...`）且手写 inline grid | FAIL |
-| `LAYOUT_MULTI_FOCUS` | 同页 ≥2 个「大件」（图宽>55% 或 metric 字号>40px）且无主从比 | FAIL |
-| `LAYOUT_ALIGN_DRIFT` | 混排缺 `a-start/a-c` 或主从件无顶边/居中声明 | FAIL |
-| `LAYOUT_SPACING_OFF_TOKEN` | 正文 margin/padding/gap 出现非 token 像素值（白名单 clamp 与 --sp） | WARN→FAIL |
-| `LAYOUT_FILL_LOW` / `HIGH` | 填充率超出模式目标带 | FAIL |
-| `LAYOUT_ICON_SIZE` | 图标宽高 ∉ {16,18,20,24} | WARN |
-| `LAYOUT_LABEL_COLLIDE` | 图表标签强制换行迹象（短 width + 长 text） | FAIL |
-
----
-
-## 七、与 V1–V4 / 模式的关系
-
-| 演讲图文 | 骨架 |
-|----------|------|
-| V1 主视觉+右注解 | **P1** |
-| V2 上图下带 | **P2** |
-| V3 大数+佐证 | **P3** |
-| V4 双图对照 | **P4** |
-
-- A presentation：默认 P1–P4、P6、P10。
-- B research：P5、P7、P8 + 密表；仍禁双大件。
-- C architecture：P9 为主；结构必须真边（见 infographics-structure）。
-
----
-
-## 八、落地检查清单（交付前）
-
-- [ ] 每内容页标注了骨架 ID（P__）
-- [ ] 左缘/顶边眯眼自检通过
-- [ ] 填充率在模式目标带
-- [ ] 图标仅 3–8 且尺寸合规
-- [ ] 图表标签不叠不换行
-- [ ] 卡内无「标题+一行」空卡
-- [ ] Annotation 只有 so-what/口径/页码
-- [ ] `LAYOUT_*` 全 PASS
-
-> 整改与实现细节见 `reform-plan.md` §四-b。间距与色 token 见 `design-system.md`。
+# 布局语法 · Layout Grammar（网格 · 元素 · 组合 · 留白）
+
+> **何时读**：任何页面动手排版之前；或觉得「不整齐 / 不优雅 / 空得别扭 / 挤」时。
+> **定位**：美观与空间秩序的**唯一排版契约**——先选骨架，再落元素，最后校准留白。与 `design-system.md`（token/字阶）互补：本文管**怎么摆**，那里管**用什么值**。
+> **单源**：预设骨架与元素规则 → `scripts/layout-constants.json` `layoutSystem`；几何英寸 → `pageTypes` / `grid`。
+
+---
+
+## 〇、排版总序（禁止跳步）
+
+```
+① 定内容角色（主张 / 证据 / 结构 / 情绪）
+    ↓
+② 选预设骨架 P1–P12（禁止临场发明栅格）
+    ↓
+③ 按元素规则落位（图标/列表/卡/图/表/图注）
+    ↓
+④ 套间距节奏（只用 --sp-* / 既有 gap token）
+    ↓
+⑤ 校准对齐与留白（顶边 / 左缘 / 光学中心 / 填充率）
+    ↓
+⑥ 跑布局门禁（LAYOUT_*）
+```
+
+**一句话**：整齐优雅 = **同一左缘 + 同一节奏 + 单一视觉重心 + 有意留白**，不是「元素都放大」。
+
+---
+
+## 一、页面框架与网格
+
+### 1.1 三层纵向区（每页固定）
+
+| 区 | 占位 | 内容 | 对齐 |
+|----|------|------|------|
+| **Chrome** | 顶 ~22% | eyebrow + 主标题 + 可选导语 + 标题线 | 左缘 = 版心左 `grid.x[0]` |
+| **Body** | 中 ~62% | 主件 + 从件（预设骨架决定列） | 落 12 列轨 |
+| **Annotation** | 底 ~16% | so-what / 口径 / 来源 / 页码 | 左缘同 Chrome；页码右缘 `x[12]` |
+
+- 绝对安全边距 `grid.safe`：任何元素不得越过。
+- 页码 / 来源永远压在 Annotation 带，**不进 Body**。
+
+### 1.2 横向 12 列（与 PPTX `grid.x[]` 同源）
+
+| 常用跨列 | 用途 | 预设 |
+|----------|------|------|
+| 7 + 5 | 主视觉 + 注解（V1） | P1 |
+| 12 + 4/4/4 | 通栏主件 + 底带 | P2 |
+| 5 + 7 / 52:48 | 大数 + 佐证 | P3 |
+| 6 + 6 | 对称对照 | P4 |
+| 4 + 4 + 4 | 三栏并列 | P5 |
+| 6/6 × 2 行 | 四象限 | P6 |
+| 3 + 6 + 3 | 侧栏 + 主区 | P7 |
+| 8 + 4 | 主区 + 注解列 | P8 |
+| 12 | 全幅结构/素材 | P9 |
+| bento 4 列 | 不等大拼贴 | P10 |
+| 2 + 1 + 1 | 主 + 双辅 | P11 |
+| 1 + 1 + 2 | 双辅 + 主 | P12 |
+
+**纪律**：卡片/图/表的左缘必须落在列轨上；禁止目测居中（CRAP Alignment）。
+
+### 1.3 间距节奏（只准用 token）
+
+| 层级 | Token | 用途 |
+|------|-------|------|
+| 微 | `--sp-1/2`（4/8） | 图标-文字、键-值、标签-数字 |
+| 组件内 | `--sp-3/4`（12/16） | 卡内标题-正文、列表项间 |
+| 组件间 | `--gap` / `--sp-5`（16–24） | 栅格 gap、卡片间距 |
+| 区块间 | `--sp-6/7`（32/48） | 主从件之间、图-注解 |
+| 页缘 | `--band-pad` | 上下呼吸 |
+
+**禁止**写死 `margin:13px` 之类游离值。同页同类间距必须同值。
+
+---
+
+## 二、预设骨架 P1–P12（先选骨架，再填内容）
+
+> 每个骨架绑定：**列比 · 视觉权重 · 允许元素 · 填充率目标 · PPTX 页型**。
+> 选型顺序：内容形态 → 下表「首选」→ 不够用再「次选」。**禁止临场发明表外栅格。**
+
+| ID | 名称 | 列结构 | 视觉权重 | 允许主件 | 填充率 | 适用 | PPTX |
+|----|------|--------|----------|----------|--------|------|------|
+| **P1** | 主从图文 | 7:5（`g-side`） | 主 60 / 从 40 | 图/图表/素材 \| 列表/卡 | 65–75% | V1 演讲图文 | `split` |
+| **P2** | 通栏+底带 | 12 + 4/4/4 | 主 55 / 带 45 | 大图/结构 \| 三卡/指标 | 70–80% | V2 总览→分解 | `bar`/`diagram`+cards |
+| **P3** | 大数佐证 | 5:7 或 52:48 | 数 45 / 证 55 | KPI \| 小图/迷你表/要点 | 60–70% | V3 极偏/单点 | `kpi` |
+| **P4** | 对称对照 | 6:6 | 左右各 50 | 双卡/双图/双表 | 70–80% | V4 前后/方案 | `comparison` |
+| **P5** | 三栏并列 | 4:4:4 | 均等（唯一允许） | 三卡/三栏文 | 70–80% | 并列论点 | `cards`/`threecol` |
+| **P6** | 四象限 | 6:6 × 2 | 对角平衡 | 卡×2 + 图×2 | 75–85% | 四观察 | `cards`+`split` |
+| **P7** | 侧栏主区 | 3:6:3 | 主 55 | 图/表 \| 导航/图例 | 65–75% | 密表+过滤 | `split` |
+| **P8** | 主区+注解列 | 8:4 | 主 70 / 注 30 | 图/表 \| 要点 3 条 | 70–80% | 证据页 | `exhibit`/`split` |
+| **P9** | 全幅结构 | 12 | 100% 主件 | 架构/全景/素材大图 | 75–90% | C 模式/情绪 | `diagram`/`image` |
+| **P10** | 拼贴 Bento | 4 列跨格 | 主卡 ≥2 格 | 不等大卡/指标/迷你图 | 75–85% | 经营快照 | `cards` |
+| **P11** | 主+双辅 | 2:1:1 | 主 50 | 主图/主文 + 双辅卡 | 70–80% | 一主两从 | `split` |
+| **P12** | 双辅+主 | 1:1:2 | 主 50 | 双辅 + 主图/主文 | 70–80% | 镜像 P11 | `split` |
+
+### 2.1 权重铁律
+
+1. **一屏一视觉重心**：主件面积/字重视觉重量 ≥ 从件 1.5×。
+2. **禁止三等重大件**：三栏 P5 是唯一均分，且每栏必须是**同级**从件（都卡或都文），不得「图+卡+图」混均分。
+3. **镜像成对**：左重用 P1/P11，右重用镜像（`--rev` / P12），同篇交替不超过 2 次连续同向。
+4. **注释层不抢戏**：so-what 高度 ≤ Body 的 18%，字号 ≤ body。
+
+### 2.2 填充率（留白纪律 · 可测）
+
+```
+fill = Body 区被内容覆盖的估算面积 / Body 区面积
+```
+
+| 模式 | 目标 | 过低（空） | 过高（爆） |
+|------|------|------------|------------|
+| presentation | 62–78% | <55% → 补从件/并页/改 P2/P3 | >85% → 拆页或升密表 |
+| research | 70–85% | <60% | >90% |
+| architecture | 75–90%（图） | <65% | 文字挤图 |
+
+**空的合法来源只有三种**：章节幕 / 金句 / 收尾 CTA。其余「半空页」= 不合格。
+
+---
+
+## 三、元素级排版规则（整齐优雅的最小单元）
+
+### 3.1 图标 Icon
+
+| 项 | 规则 |
+|----|------|
+| 尺寸 | 仅 16 / 20 / 24 px（列表 16–18，卡头 20–24，指标角标 16） |
+| 描边 | 1.8，`currentColor`，无填充除非实心标记 |
+| 对齐 | **光学中心**对文字 x-height 中线（不是框几何中心） |
+| 图文距 | `--sp-2`（8px）；图标左缘与文字块左缘差 = 图标宽 + 8 |
+| 位置 | 仅：卡头、列表行首、指标角标、提示条。**禁止**表格内/图表内/Agenda |
+| 密度 | 每屏 3–8 个；同屏同尺寸 |
+
+### 3.2 列表 List
+
+| 项 | 规则 |
+|----|------|
+| 项长 | ≤2 行、≤45 字；超长拆项或转表 |
+| 项距 | `--sp-3`（12px）；组间距 `--sp-5` |
+| 缩进 | 统一 `--sp-4`；嵌套仅 1 层 |
+| 引导 | 「**加粗结论。**解释」同一文本框（禁拆流） |
+| 对齐 | 多列列表顶边对齐；项符号光学对齐首字 |
+| 数量 | 卡内 ≤4（research ≤5）；单页列表组 ≤3 |
+
+### 3.3 卡片 Card
+
+| 项 | 规则 |
+|----|------|
+| 内边距 | `containers.pad.card`（≈18–24px），四边一致 |
+| 头 | 图标 + 标题同行，基线对齐；头-体 `--sp-3` |
+| 体 | 列表或 ≤3 行段落；禁止「标题+一行」占四行高度的空卡 |
+| 等高 | 同行卡片 `align-items:stretch`；矮卡**不拉伸内容**，只底对齐 |
+| 圆角/边 | 统一 `--r-md` + 1px `--border`；同页同风格 |
+| 网格 | P5=3 列 / P6=2×2 / P10=bento；禁止 5+ 等宽小卡挤一行 |
+
+### 3.4 指标 Metric / KPI
+
+| 项 | 规则 |
+|----|------|
+| 数字 | `t-metric`，`tabular-nums`；单位字号约 45% 于数字 |
+| 标签 | 数字下 `--sp-2`；注解再 `--sp-1` |
+| 行 | 4–6 个一排（P2 底带）；**数字基线对齐** |
+| KPI hero | 数字占 P3 左 45%，与右栏**垂直居中对齐**；Δ 变化色用 accent，不用红绿 |
+
+### 3.5 图表 Chart
+
+| 项 | 规则 |
+|----|------|
+| 标题 | 图上方左对齐 `t-h3`/`fig__cap`；与图 `--sp-3` |
+| 图区 | 居中于所在列；容器 `pad.chart` |
+| 比例 | 柱/折线 ≈16:9～2:1；环/饼 1:1 且 **直径 ≤ 内容区高 45%**（简单占比更小，走 P3） |
+| 标签 | **禁止叠在弧/柱心**；环图数值进图例行；柱标条顶/条外 |
+| 标签盒 | 最小宽 ≥ 最长标签估算宽 + 8px，防换行叠字 |
+| 轴/图例 | `micro`；图例在图右或图下，**不与数据重叠** |
+| 图注 | 来源/口径一行在 Annotation，不塞进 SVG |
+
+### 3.6 表格 Table
+
+| 项 | 规则 |
+|----|------|
+| 列 | 主标左对齐；数值右对齐 `tabular-nums` |
+| 行高 | 一致；密表 ≥0.32in / 常规 ≥0.5in |
+| 表头 | 高于正文行；底色 accent 或 surface-2 |
+| 空洞 | 空单元格 >40% → 合并列/换承载（`TABLE_DENSITY`） |
+| 宽度 | 占所在列 100%；与邻件顶边对齐 |
+
+### 3.7 图文 / 插图 Media
+
+| 项 | 规则 |
+|----|------|
+| 比例锁 | 必须 `imageSpec.ratioCssClass`；禁止自由拉伸 |
+| 对齐 | 与邻栏**顶边对齐**（P1/P8）或整体居中（P3 hero） |
+| 图注 | 默认图下 `media__cap--below`；遮罩字仅 `half/full` 情绪图 |
+| 占位 | 虚线框 + `.media__ph` 标签居中；比例与正式图一致 |
+| 多图 | 等高、等 gap、角标 A/B 仅 compare |
+
+### 3.8 列表化信息图 / 结构图 Infographic
+
+| 项 | 规则 |
+|----|------|
+| 节点 | 圆角矩形统一 `--r-sm/md`；内边距 8–12px；文字 2 行封顶 |
+| 连接 | **正交折线 + 箭头**（`.lane__arr` / `.arch__conn` / SVG `path+polygon`）；层间间距恒定；**禁裸 `→` 文本** |
+| 标签 | 节点外优先；避让不压线；分支标在边中点上方 |
+| 图例 | 左下或右下一行 chips；与图 `--sp-4` |
+| 密度 | 节点 ≤24（C）；同层等高、等宽（或等高不等宽按内容） |
+
+### 3.9 结论条 / 标注
+
+| 项 | 规则 |
+|----|------|
+| so-what | 通栏或主区宽；左 3px accent 边；高 ≤0.7in |
+| flags | 列表式，不与 so-what 同高堆叠超过 2 条 |
+| 引用 `[n]` | 上标紧跟数字，不另起行 |
+
+---
+
+## 四、组合语法（多元素同页）
+
+### 4.1 三层槽位模型（所有组合共用）
+
+```
+┌─────────────────────────────────────┐
+│ Chrome（标题区）                      │
+├─────────────────────────────────────┤
+│ PRIMARY（主件，视觉重心）              │
+│   ┌──────────┐  ┌─────────────────┐ │
+│   │ 主件     │  │ SECONDARY 从件   │ │
+│   └──────────┘  └─────────────────┘ │
+├─────────────────────────────────────┤
+│ ANNOTATION（so-what / 来源 / 页码）    │
+└─────────────────────────────────────┘
+```
+
+| 槽位 | 面积（Body 内） | 可放 | 不可放 |
+|------|-----------------|------|--------|
+| PRIMARY | 50–70% | 图、表、结构、素材、KPI | 大段正文、装饰 |
+| SECONDARY | 20–40% | 列表、卡、小表、迷你图、图例 | 第二张同级大图 |
+| ANNOTATION | ≤18% | so-what、口径、flags | 论证正文 |
+
+### 4.2 合法组合矩阵（摘要 · 完整选型见 playbook §四）
+
+| 组合 | 骨架 | 主 | 从 | 注 |
+|------|------|----|----|-----|
+| 图+解读 | P1/P8 | 图 | 要点 3–4 | so-what |
+| 表+图互证 | P4/P8 | 表或图 | 对侧 | 口径 |
+| 架构+图例 | P9 | 结构图 | legend chips | 图注 1–2 行 |
+| 大数+证据 | P3 | KPI | 小图/表/2 指标 | Δ/口径 |
+| 指标带+主图 | P2 | 图 | 指标 4–6 | 口径 |
+| 图文互证 | P1 | 素材 | 要点 3–4 | 图注+来源 |
+| 四观察 | P6 | 对角卡/图 | 对角 | — |
+| 拼贴经营快照 | P10 | 主卡跨 2 | 小卡 | 口径行 |
+
+### 4.3 组合硬规则
+
+1. **从件必须承载主件表达不了的信息**（趋势/对比/含义），禁止复述主件数字。
+2. **高度匹配**：主从件顶边对齐（`a-start`）；高度差 >25% 时矮侧补注解卡或减主件高，**禁止大块空白尾巴**。
+3. **同型元素同构**：三卡同结构、双栏同维度对仗。
+4. **最多两种表面色**（surface / accent-soft），层次靠明度+描边。
+5. **跨页同类骨架连用 ≤2 页**（P5/P6 例外可 3），中间换 P3/P9 休止。
+
+---
+
+## 五、对齐与光学（优雅的可执行定义）
+
+| 规则 | 做法 | 反例 |
+|------|------|------|
+| 左缘 | Chrome / Body / Annotation 全部 `x[0]` | 标题缩进、卡片浮中 |
+| 顶边 | 混排栏 `align-items:start`；指标行数字基线对齐 | 图顶对卡中 |
+| 右缘 | 页码、数值列、次要按钮贴 `x[12]` | 右缘参差 |
+| 光学中心 | 图标/单行标签在色块内 optical 居中 | 几何居中导致视觉下沉 |
+| 等距 | 同行元素 gap 恒定；不等距用「组」拉开 | 12/15/12/20 混用 |
+| 对象对齐 | 多图/多卡等高；表与图顶对齐 | 底对齐导致标题错位 |
+
+**自检口诀**：瞇起眼——只剩色块时，是否仍有清晰的「一条左线、一条顶线、一块重心」？
+
+---
+
+## 六、布局门禁（`LAYOUT_*` · 单源 `layoutSystem`）
+
+| 码 | 判据 | 级别 |
+|----|------|------|
+| `LAYOUT_NO_SKELETON` | 内容页未使用 P1–P12 对应类（`g-side/g-2/g-3/g-bento/...`）且手写 inline grid | FAIL |
+| `LAYOUT_MULTI_FOCUS` | 同页 ≥2 个「大件」（图宽>55% 或 metric 字号>40px）且无主从比 | FAIL |
+| `LAYOUT_ALIGN_DRIFT` | 混排缺 `a-start/a-c` 或主从件无顶边/居中声明 | FAIL |
+| `LAYOUT_SPACING_OFF_TOKEN` | 正文 margin/padding/gap 出现非 token 像素值（白名单 clamp 与 --sp） | WARN→FAIL |
+| `LAYOUT_FILL_LOW` / `HIGH` | 填充率超出模式目标带 | FAIL |
+| `LAYOUT_ICON_SIZE` | 图标宽高 ∉ {16,18,20,24} | WARN |
+| `LAYOUT_LABEL_COLLIDE` | 图表标签强制换行迹象（短 width + 长 text） | FAIL |
+
+---
+
+## 七、与 V1–V4 / 模式的关系
+
+| 演讲图文 | 骨架 |
+|----------|------|
+| V1 主视觉+右注解 | **P1** |
+| V2 上图下带 | **P2** |
+| V3 大数+佐证 | **P3** |
+| V4 双图对照 | **P4** |
+
+- A presentation：默认 P1–P4、P6、P10。
+- B research：P5、P7、P8 + 密表；仍禁双大件。
+- C architecture：P9 为主；结构必须真边（见 infographics-structure）。
+
+---
+
+## 八、落地检查清单（交付前）
+
+- [ ] 每内容页标注了骨架 ID（P__）
+- [ ] 左缘/顶边眯眼自检通过
+- [ ] 填充率在模式目标带
+- [ ] 图标仅 3–8 且尺寸合规
+- [ ] 图表标签不叠不换行
+- [ ] 卡内无「标题+一行」空卡
+- [ ] Annotation 只有 so-what/口径/页码
+- [ ] `LAYOUT_*` 全 PASS
+
+> 整改与实现细节见 `reform-plan.md` §四-b。间距与色 token 见 `design-system.md`。