家谱 v21：改回 family-chart 库渲染

用户明确要求「还是用 family-chart 来实现吧，刚才查了这个库可以完美实现
我想要的效果，之前一定是你调用的方法不对」。自研区间法（v20）虽然
20/20 全显示且通过全部版面检查，但用户觉得不够顺滑细腻，改为交给成熟库。

== 关键修复（都是真跑出来的坑）==

1. **IIFE 首行就 return**：本地变量 `var f3 = root.querySelector(...)` 与
   全局库 `f3` 重名，`typeof f3 === 'undefined'` 因变量提升恒为真 →
   整段 JS 一行没执行、画布永远空白。改名 `f3Canvas`。

2. **「回到我」不动卡片层**：库的 zoom 行为绑在 `#f3Canvas` 上，不是
   `svg.main_svg`。拿 svg 的 `__zoomObj` 去驱动只会动 SVG 连线层，
   HTML 卡片层（`#htmlSvg .cards_view`）留在原地。改取 `#f3Canvas`。

3. **SVG 退化成 300×150**：库自带 CSS 写的是 `.f3 svg.main_svg{width:100%;
   height:100%}`，而我们的容器类名是 `.kin-chart`（不是 `.f3`）、也没引
   库的 CSS → SVG 根元素用浏览器默认尺寸，所有画到框外的连线被裁掉。
   症状很隐蔽：卡片层是 HTML div 不受影响，于是表现为「卡在、线没了」。
   补 `.kin-chart svg.main_svg{width:100%;height:100%}`。

4. **儿子/女儿这一辈不显示**：树根是最高祖先，`progeny_depth` 必须覆盖到
   「我」的下一代 → 从 2 调到 3。

5. **连线是白的看不见**：库给 path 写了 inline `stroke="#fff"`，普通 CSS
   覆盖不了，必须 `!important`。

== 免费版能力边界（已实测确认，非调用问题）==
库的算法只画「树根的祖先链 + 后代 + 树根的兄弟姐妹 + 各人配偶」，
**不会从配偶继续向上/向下 walk**。20 人夹具里岳父/岳母/舅子/外甥
（4 位姻亲）画不出来（换树根、调 depth 都救不了）→ 图上 16/20。
服务端 data-datum 仍含全体（含姻亲），名册/称呼不受影响。

== 验证战绩 ==
- e2e 549 通过 / 0 失败
- 桌面几何 368 / 0
- 移动端几何 516 / 0（家谱断言改到 family-chart 选择器）
- 交互 97 / 0；升级专测 123 / 0
- 家谱可视化 24 / 0（含「svg 不是 300×150」这条，正是坑 3 的捕手）
- 家谱版面 10 / 0
- 反向验证 3 / 3（间距压扁→叠卡；depth=1→缺人；写坏 centerOn 平移量→偏离中心）

assets/css/app.css

@@ -432,19 +432,14 @@ textarea.input { min-height: 76px; resize: vertical; }
 }
 
 /* ---------------- 家谱（以我为中心） ----------------
-   v15：**自己排版、自己画线**，不再用 family-chart。
+   v21：改用 family-chart 库渲染。库把 data[0].id 当 main_id，
+   所以把「最高祖先」排第一位以画出尽可能多的血亲旁支；
+   加载后再把镜头平移回「我」，兼顾"看到全树"与"以自己为中心"。
 
-   为什么把库卸掉（实测数据，不是口味问题）：
-     20 人的夹具，库只画出 **9 人** —— 伯父/伯母/岳父母/嫂子/堂兄/堂嫂/舅子/侄子/
-     堂侄/外甥一个都没画。库的算法只画「树根的祖先链 + 后代 + 树根的兄弟姐妹 + 各人配偶」，
-     **横向亲戚与姻亲旁支永远进不来**（换树根也救不了）。用户两次反馈
-     「显示不齐全」「数据仍然不全，差很多」说的就是这个。
-   自己排版之后，「画谁」与「线从哪出」都变成几行代码：
-     · 每代一行，按「户」（夫妻单元）水平排开；
-     · 夫妻两张卡之间画一条短横线；
-     · 子女一律从这条**横线的中点**垂下来 —— 与"谁登录"无关、与"孩子只登记了一位父母"无关。
-
-   拖拽/缩放继续保留（用户明确说「反正可以缩放和拖动」），用原生 d3.zoom 实现。 */
+   免费版 family-chart 的算法只画「树根的祖先链 + 后代 + 树根的兄弟姐妹 + 各人配偶」，
+   **不会从配偶继续向上/向下 walk**，因此岳父岳母、舅子、外甥等姻亲旁支
+   在单棵树里天然画不出来（换树根、调 depth 都救不了）。
+   这是库的能力边界，不是调用方式问题；如要姻亲，需要 Premium 或多树拼接。 */
 
 .kin-tools { display: flex; gap: 8px; justify-content: flex-end; margin: 0 0 10px; }
 
@@ -458,37 +453,46 @@ textarea.input { min-height: 76px; resize: vertical; }
   box-shadow: var(--shadow);
   overflow: hidden;
   cursor: grab;
-  /* 拖拽/缩放自己接管，别让浏览器插手滚动 */
+  /* 拖拽/缩放由库接管，别让浏览器插手滚动 */
   touch-action: none;
 }
 .kin-chart:active { cursor: grabbing; }
 
-/* 卡片层与连线层都靠 transform 一起平移缩放（两层必须同源，否则线会跟卡错位） */
-.kin-stage, .kin-chart svg.kin-lines {
-  position: absolute; left: 0; top: 0;
-  will-change: transform;
-}
-.kin-chart svg.kin-lines { pointer-events: none; z-index: 1; }
-/* ⚠️ v18：参考实现（亲友+）把连线画在**卡片背后**（ViewGroup.onDraw 在子 View 之前），
-   所以线可以从卡中心连到卡中心、被卡面挡住即可 —— 不需要绕路。
-   这里用 z-index 保证「连线在卡片下面」。 */
-.kin-stage { z-index: 2; }
+/* 隐藏 family-chart 自带的空导航栏（我们用自己的「看全部 / 回到我」按钮） */
+.kin-chart .f3-nav-cont { display: none !important; }
 
-/* 连线：夫妻短横线 + 子女下垂线，全部一条笔触 */
-.kin-chart path.kin-link {
-  fill: none;
-  stroke: #C9BDA9;
-  stroke-width: 1.6;
-  vector-effect: non-scaling-stroke;   /* 缩放时线不跟着变粗变细 */
-}
+/* ⚠️ 这条是**必须**的：库自带的 CSS 里写着 `.f3 svg.main_svg { width:100%; height:100% }`，
+   而我们的容器类名是 `.kin-chart`（不是 `.f3`），也没引库的 CSS ——
+   于是 SVG 根元素退化成浏览器默认的 **300×150**，所有画到框外的连线被裁掉
+   （卡片层是 HTML div，不受影响，所以"卡在、线没了"这个症状很隐蔽）。
+   实测：不写这条时 svg 只有 300×150（`_fb_kin_check_v17.py` 第②条会红）。 */
+.kin-chart svg.main_svg { width: 100%; height: 100%; display: block; z-index: 1; }
 
-/* v18：卡片改成「上图下名 + 称呼」的窄长形，对齐参考实现（亲友+）的比例：
-   参考里 50dp 宽 × 80dp 高，头像占满上半、姓名与称呼各一行贴在下半。
-   我们把 88×106 按同样比例放大 —— 窄一点才排得下"好几代 + 兄弟姐妹"。 */
+/* family-chart 的 HTML 卡片层 #htmlSvg 与 SVG 连线层由库的 onZoom 同步 transform。
+   卡片容器 .card_cont 已经 absolute + translate(x,y)；里面再放我们的 .kin-card。 */
+.kin-chart #htmlSvg { z-index: 2; }
+.kin-chart .card_cont { pointer-events: none; }
+
+/* 库给卡片套了一层 <div class="card"> / <div class="card-inner">，
+   我们只接管最里面那层（.kin-card）。把外层的中转容器归零，避免它自带的内边距/背景
+   让卡片看起来"胖了一圈"或有底色。 */
+.kin-chart .card_cont > .card,
+.kin-chart .card_cont .card-inner {
+  background: transparent;
+  padding: 0;
+  border-radius: 0;
+  min-height: 0;
+  width: auto;
+  height: auto;
+}
+.kin-chart .card_cont .card-inner { display: block; }
+
+/* v21：卡片尺寸与 setCardDim({w:140, h:120}) 对齐 */
 .kin-card {
   position: absolute;
   display: flex; flex-direction: column; align-items: center;
   gap: 0;
+  width: 140px; height: 120px;
   box-sizing: border-box; padding: 4px 4px 3px;
   text-align: center;
   background: var(--surface);
@@ -499,19 +503,20 @@ textarea.input { min-height: 76px; resize: vertical; }
   transform: translate(-50%, -50%);    /* 坐标给的是卡片中心 */
   transition: border-color .15s ease, box-shadow .15s ease;
   overflow: hidden;
+  pointer-events: auto;                 /* 父 .card_cont 是 none，这里恢复 */
 }
 .kin-card:hover {
   box-shadow: var(--shadow-l); border-color: var(--brand-2); text-decoration: none;
 }
 .kin-card .kin-ph {
-  width: 100%; height: 58px; border-radius: 7px; overflow: hidden;
+  width: 100%; height: 70px; border-radius: 7px; overflow: hidden;
   background: #F1E7D6; flex: 0 0 auto;
 }
 .kin-card .kin-ph img { width: 100%; height: 100%; object-fit: cover; display: block; }
 .kin-card .kin-nm {
   font-size: 12.5px; font-weight: 600; line-height: 1.25; max-width: 100%;
   white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
-  margin-top: 3px;
+  margin-top: 4px;
 }
 /* 称呼在姓名下面一行，用品牌色的浅字（参考实现是「(称呼)」） */
 .kin-card .kin-lb {
@@ -529,6 +534,14 @@ textarea.input { min-height: 76px; resize: vertical; }
 /* 「待确认」（只填了称呼、没对应到真人）：虚线 */
 .kin-card.is-ph { border-style: dashed; background: #FCFAF6; }
 
+/* family-chart 默认连线颜色改淡，与之前自研版一致。
+   库在 path 上写了 inline stroke="#fff"，必须用 !important 覆盖。 */
+.kin-chart svg.main_svg .links_view path.link {
+  fill: none;
+  stroke: #C9BDA9 !important;
+  stroke-width: 1.6;
+}
+
 .tree-legend { font-size: 12px; color: var(--muted); margin: 14px 2px 0; }
 
 /* 详情页里的迷你家谱 */