/* 成都壹博康复医疗中心 · 新版 (page/service/chengdu2.html)
   依据 Pixso 设计稿「0:5 长图」实现，设计画布 2362px 宽。
   把「1 设计 px」做成变量 --u，所有尺寸写 calc(var(--u) * <设计稿px>)，
   整块随画布等比缩放。

   宽度是三层套着的（由外到内）：
     内容列 = width:67%; max-width:1320px —— 与 css/header.css:25 .header_content、
              css/nav.css:1 .crumbsNavBox、20+ 处 .content 同一条站内规则
     图案带 = 内容列的 81.287%（--band）—— bg.jpg 是设计稿背景的 1:1 裁片，
              只有 1920 设计 px 宽，在 2362 画布里水平居中
     内容   = 图案带（.cd_page 就是这个矩形）
   所以内容永远落在图案带（接缝）以内，图案带落在内容列以内。
   ≤1024 时内容列走 width:100%，与 .content 的断点一致，并且把 --band 提到 1
   —— 图案带铺满屏宽，画布按同一比例放大 1/0.81287 = 1.2302 倍，
   内容是「跟着背景一起变大」，两者的配准关系（内容落在接缝以内）不变。 */

/* 设计稿的页面底色不是纯白，是 rgb(236,237,242) —— 花瓣之间的留白、
   背景图自身的留白都是这个色，所以整页底和填充色都用它，接缝才看不出来。 */
.chengdu2 {
  background: #ECEDF2;
}

/* 外层：站内内容列 + 图案背景。container-type 让子元素能用 cqw 取到它的宽度
   （元素不能查询自身，所以容器和内容必须分成两层）。 */
.chengdu2 .cd_bg {
  /* 图案带占内容列的比例 = bg.jpg 宽 1920 ÷ 设计画布 2362。
     背景图尺寸和内容画布（.cd_page 的 --u / width）共用这一个数 ——
     所以一个变量就能让背景和内容同步缩放。移动端把它顶到 1（见下面的媒体查询）。 */
  --band: 0.81287;
  container-type: inline-size;
  width: 67%;
  max-width: 1320px;
  margin: 0 auto;
  /* bg.jpg 是设计稿背景的 1:1 裁片：1920×10391 设计 px，顶对齐、水平居中。
     图案带以外（左右各 9.357%、设计稿 y 10391 以下）用设计稿底色补。 */
  background: #ECEDF2 url('../../img/city/chengdu/bg.jpg') top center / calc(100% * var(--band)) auto no-repeat;
}

/* .content 在 ≤1024 时改成 width:100%（css/service/shanghai.css:1 等），
   设计块跟随同一条断点，并且顺带把图案带与内容一起放大到满屏宽。
   --band 顶到 1：bg.jpg 的背景尺寸是 calc(100% * var(--band))，
   画布宽和 --u 里也都带着这个因子，所以改这一个值就让
   「图案带铺满屏宽」和「内容按同一比例放大 1.2302 倍」一起发生，
   内容与背景的配准关系（接缝位置）分毫不动 ——
   390 视口下内容 317.01 → 390，各段字号/间距同步 ×1.2302。
   桌面端（>1024）不受影响，输出与改版前一致。 */
@media (max-width: 1024px) {
  .chengdu2 .cd_bg {
    width: 100%;
    --band: 1;
  }
}

/* 内层：设计稿内容画布 = 图案带那个矩形（宽度同 --band，水平居中）。
   设计稿 2362 画布完整映射到图案带上，稿内元素按各自比例落位，
   因此天然落在接缝以内：标题内缩 112 设计 px、白卡 95/102、正文 135/115、
   红条正好贴缝（左 −0.13 设计 px 被下面的 overflow-x 裁掉）。
   --u 里的 100cqw 取的是最近容器 .cd_bg 的宽度（.cd_page 不是容器），
   所以在 .cd_page 自身和所有子元素里取值一致，不需要第二层容器。 */
.chengdu2 .cd_page {
  --u: calc(100cqw / 2362 * var(--band));
  width: calc(100% * var(--band));
  margin: 0 auto;
  /* 设计稿内容区总高 17230 设计 px。先撑出这个高度，背景图案的比例才和稿子一致；
     栏目陆续填入后由内容自然撑开，这条会被顶掉。 */
  min-height: calc(var(--u) * 17230);
  font-family: "Source Han Sans CN", "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;
  color: #5b5d62;
  /* 画布就是画板：设计稿里超出的部分一律被 2362 的画布边缘裁掉。
     x 方向 clip（而不是 hidden）—— 不生成滚动容器，所以不会给页面加横向
     滚动条，也不影响 future 的 sticky；y 方向保持 visible，
     免得这一层变成滚动容器把整页内容关起来。 */
  overflow-x: clip;
}

/* ============================================================
   ② 简介   设计稿 3:1 组，占 frame y 225..5089
   坐标全部取自设计稿实测（1x 导出后逐像素量的），
   注释里的 frame 坐标 = 设计稿 2362 宽画布上的绝对坐标。
   ============================================================ */
.cd_intro {
  margin-top: calc(var(--u) * 225);
}

/* 壹博 logo：frame x 772..1588（817 宽，水平居中），y 225..366。
   直接复用仓库里的 img/logo.png（3156×545，和设计稿同一素材，
   宽高比 5.791 vs 5.794），817 设计 px 宽 → 456.6 CSS px @1320，
   原图够 4.2 倍，清晰度绰绰有余。 */
.cd_intro_logo {
  display: block;
  width: calc(var(--u) * 817);
  margin: 0 auto;
}

/* 标题：字号 204.539 / 行高 276.368 / Heavy / #B20A2E，居中，无字距。
   实测设计稿墨迹中心在 frame y=894，而 276.368 的行盒里墨迹是垂直居中的，
   所以行盒顶 = 894 - 276.368/2 = 755.8；logo 底在 366，
   故 margin-top = 755.8 - 366 = 389.8。

   标题是斜的：设计稿节点 2:1 的 absoluteTransform 线性部分是
   [[1, -0.173648], [0, 0.984808]] —— 10° 右倾斜切 + 1.5% 纵向压缩
   （0:12 是它未斜切的隐藏副本，其它节点线性部分都是单位阵，
   所以这是这一处刻意的排版，不是整页效果）。
   注意 Pixso 的矩阵按 [a c tx; b d ty] 存，而 CSS 是 matrix(a,b,c,d,e,f)，
   b/c 要对调：matrix(1, 0, -0.173648, 0.984808, 0, 0)。
   transform 不参与布局，所以行盒位置仍由上面的 margin 决定；
   斜切后墨迹整体会平移一点，用 transform-origin 之外的 margin 校正（见下）。 */
.cd_intro_title {
  /* 盒子收窄到设计稿节点 2:1 的 2046 宽再居中 —— 文字本身只有 9 个字
     （9 × 204.539 = 1840.9），盒宽不影响断行，居中轴还是 1181，墨迹位置不变。
     这么做是为了管住下面那个斜切的"溢出"：transform 的包围盒会向左右各
     多探出 24 设计 px（= 0.173648 × 276.368 / 2），盒宽若是满画布 2362，
     右边就会顶出画布造成横向滚动（390px 手机上实测 4px）。收窄后包围盒
     最大 x = 1181 + 1023 + 24 = 2228 < 2362，不再溢出。 */
  width: calc(var(--u) * 2046);
  margin: calc(var(--u) * 389.8) auto 0;
  font-size: calc(var(--u) * 204.539);
  line-height: calc(var(--u) * 276.368);
  font-weight: 900;
  color: #B20A2E;
  text-align: center;
  /* 斜切让墨迹整体上飘 2.5 设计 px（实测），用 translateY 补回来 ——
     放在 matrix 左边，且 translate 不受 transform-origin 影响，
     所以不会动到布局（卡片位置仍由 margin 决定）。 */
  transform: translateY(calc(var(--u) * 2.5)) matrix(1, 0, -0.173648, 0.984808, 0, 0);
}

/* 磨砂白卡：frame (95, 1218) 2165×3871，圆角 116。
   注意设计稿里卡片并不是居中的（左边 95、右边 102），所以用 margin-left
   钉死 95，不要用 auto，否则整段会往右偏 3.5 设计 px。
   填充与内阴影是从 0:27 单独导出后量的（半透明 + 白色内阴影，
   内阴影偏移为负 → 白边落在右下）。行盒顶 755.8+276.368=1032.2，
   故卡片 margin-top = 1218 - 1032.2 = 185.8。
   padding-top 251 = 正文一的行盒顶（frame 1469）到卡片顶的距离；
   padding-bottom 70.3 = 正文二底（frame 5018）到卡片底（5089）的距离。 */
.cd_intro_card {
  position: relative;
  width: calc(var(--u) * 2165);
  margin: calc(var(--u) * 185.8) 0 0 calc(var(--u) * 95);
  padding: calc(var(--u) * 251) 0 calc(var(--u) * 70.3);
  border-radius: calc(var(--u) * 116);
  background: rgba(248, 248, 250, .4);
  box-shadow: inset calc(var(--u) * -59.35) calc(var(--u) * -94.98) calc(var(--u) * 99) #fff;
}

/* 红头图条：节点 0:28 在 frame (-3, 1184)，尺寸 2359×341。
   注意这张图自带大片透明边距 —— 真正的红色胶囊只在图的
   x 95..2262 / y 33..184 处（frame 就是 92..2259 / 1217..1366），
   和卡片的左右边几乎严丝合缝；图的下半部还有一层很淡的浅色光晕。
   所以这里用 background 而不是 <img>：定位到 frame 0（卡片左 -95）
   正好让图片整个落在 2362 画布内，手机上也顶不出横向滚动条；
   而且背景不会被绘制到元素框外，完美复刻设计稿中被画布裁掉的效果。 */
.cd_intro_bar {
  position: absolute;
  left: calc(var(--u) * -95);
  top: calc(var(--u) * -34);
  width: calc(var(--u) * 2359);
  height: calc(var(--u) * 341);
  background: url('../../img/city/chengdu/intro_bar.png') no-repeat 0 0 / 100% 100%;
}

/* 「医院简介」白字：节点 0:31 在 frame (906, 1217)，字号 104.44 / 字距 26.11。
   量下来设计稿的墨迹中心在 frame y 1294.5，比胶囊的垂直中心（1292.5）
   低 2px —— 设计师是这么摆的，所以 top 用 35.5 而不是 33 去对齐墨迹。
   盒子按设计稿的节点位置左对齐摆放（而不是用 text-align:center）：
   因为 CSS 的 letter-spacing 会在末字后面也留一道空隙而 Pixso 不留，
   居中摆放会让整串字往左偏；左对齐则和稿子的墨迹中心只差 2px。
   nowrap 是必须的 —— 4 个汉字在 2359 宽里本可以随便断行。 */
.cd_intro_bar > span {
  position: absolute;
  left: calc(var(--u) * 906);
  top: calc(var(--u) * 35.5);
  height: calc(var(--u) * 150);
  line-height: calc(var(--u) * 150);
  font-size: calc(var(--u) * 104.44);
  letter-spacing: calc(var(--u) * 26.11);
  font-weight: 900;
  color: #fff;
  white-space: nowrap;
}

/* 两段正文。设计稿的换行是手打 \n（不是自动回流）——
   例如正文一第 2 行停在「…专家、奥」，下一个「克」其实挤得下，
   所以必须用 <br> 复刻断点，靠自然回流会断得和稿子不一样。
   因为整页纯等比缩放，<br> 在任何宽度下断点都和设计稿一致，移动端也安全。

   宽度 = 设计稿节点宽 + 20u 余量：设计稿最宽一行（25 个汉字）
   = 25 × 字号 = 2083.3，而节点宽 2084，只剩 0.7px 余量，
   子像素取整一不小心就会把末字挤到下一行、再撞上 <br> 变成空行。
   左边距按设计稿各自的原值（正文一 42 / 正文二 40），
   文字左对齐，所以加宽只往右长，肉眼完全看不出来。 */
.cd_intro_p {
  position: relative;   /* 压住红条那层淡光晕，否则它会盖在首行背景上 */
  font-weight: 500;
  color: #5B5D62;
  text-align: left;
}

/* 段首缩进：设计稿原文是手打的半角空格（U+0020）——正文一 9 个、
   正文二 8 个，各是独立字符，不是一个整体。所以这里直接写实测出来的
   设计 px 值，而不是 text-indent: Nem：各字体的空格字宽不同
   （思源黑体 / Noto Sans SC 约 0.226em），写死设计 px 才能让首字
   墨迹落在设计稿位置上（下面两块里的值是逐像素对齐量出来的）。
   正文二还带 4.142 的字距，8 个空格每个都会被加一道，所以
   182.7 ≠ 8 × 空格宽，而是 8 × (空格宽 + 字距)。 */

.cd_intro_p1 {
  margin: 0 0 0 calc(var(--u) * 42);
  width: calc(var(--u) * 2104);
  font-size: calc(var(--u) * 83.333);
  line-height: calc(var(--u) * 150);
  /* 9 个半角空格 = 169.7 设计 px（首字墨迹落在 frame x 313） */
  text-indent: calc(var(--u) * 169.7);
}

/* 正文二：节点 frame (135, 3975) 2092×1043，字号 82.836 / 行高 149.105 / 字距 4.142。
   margin-top 77 = 照片底（frame 3898）到正文二行盒顶（3975）。 */
.cd_intro_p2 {
  margin: calc(var(--u) * 77) 0 0 calc(var(--u) * 40);
  width: calc(var(--u) * 2112);
  font-size: calc(var(--u) * 82.836);
  line-height: calc(var(--u) * 149.105);
  letter-spacing: calc(var(--u) * 4.142);
  /* 8 个半角空格 + 8 道字距 = 182.7 设计 px（首字墨迹落在 frame x 323） */
  text-indent: calc(var(--u) * 182.7);
}

/* 医院照片：节点 0:32 在 frame (145, 2759)，设计稿里 2072×1139，无圆角无阴影。
   图源改成 CMS 的 chengdu_intro（后台可换）：原图 2560×1440（16:9），
   和稿子那张 1.82:1 的比例略有出入，所以这里只钉宽度、高度由原图定 ——
   高度 = 2072 ÷ (2560/1440) = 1165.5u，比稿子的 1139 高 26.5u（+2.3%），
   下面各段随之整体下移 26.5 设计 px（相互间距不变）。
   margin-top 90 = 正文一底（frame 2669）到照片顶（2759）。 */
.cd_intro_photo {
  display: block;
  width: calc(var(--u) * 2072);
  margin: calc(var(--u) * 90) 0 0 calc(var(--u) * 50);
}

/* 正文里的红字片段：设计稿用 #B20A2E（比站内正文红 #cf1220 更深） */
.cd_red   { color: #B20A2E; }
.cd_red_b { font-weight: 700; }

/* ============================================================
   ③ 七大康复领域   设计稿节点 0:10，占 frame x 0..2285、y 5358..7803
   该节点在稿子里是扁平图形（icon_font），没有可读子节点，
   所以下面的数值全部来自 1:1 导出（2285×2445，1 图像 px = 1 设计 px）
   的逐像素实测。坐标以节点左上角为原点。
   ============================================================ */
.cd_domains {
  position: relative;
  /* ③ 顶（frame 5358）距 ② 卡片底（frame 5089）= 269 */
  margin-top: calc(var(--u) * 269);
}

/* 米色绸带：x 0..1753（1754×215），左缘正好贴着接缝（和 ② 的红条同一条线）。
   底色是横向线性渐变，纵向没有渐变（同 x 上下色差 ≤4），噪声 σ≈1~3/255，
   所以纯渐变即可复刻，不需要切图。
   停靠点取自 y=8 那一行的实测剖面（每 100 设计 px 一个采样）。 */
.cd_domains_ribbon {
  position: relative;
  width: calc(var(--u) * 1754);
  height: calc(var(--u) * 215);
  background: linear-gradient(90deg,
    #EFDDC1 0%, #EBD7BF 12%, #EEDEC7 23%, #F5E8D5 34.5%, #F6F1DF 46%,
    #FBF5EA 57%, #FEFAF8 68.7%, #F7F4E7 80%, #F7EAD9 91.5%, #EBDBBC 100%);
}

/* 台阶式下划线：粗段 x 0..506 / y 198..225（507×28），细段 x 506..1753 /
   y 209..213（1247×5），两段都是 #B50221，细段垂直居中于粗段（中心都在 211）。
   粗段比绸带下沿多探出 11 设计 px —— 稿子就是这么画的，所以用 ::before
   绝对定位画在绸带里（父级没有 overflow:hidden，探出去的部分正常显示）。 */
.cd_domains_ribbon::before,
.cd_domains_ribbon::after {
  content: "";
  position: absolute;
  background: #B50221;
}
.cd_domains_ribbon::before {
  left: 0;
  top: calc(var(--u) * 198);
  width: calc(var(--u) * 507);
  height: calc(var(--u) * 28);
}
.cd_domains_ribbon::after {
  left: calc(var(--u) * 506);
  top: calc(var(--u) * 209);
  width: calc(var(--u) * 1247);
  height: calc(var(--u) * 5);
}

/* 绸带上的标题：纯色 #B50221、无阴影，字距 118 设计 px（= 字号）→ 无字距，
   垂直居中（墨迹中心 y 106 / 带中心 107，实测渲染与稿子都是 50..161）。
   水平方向稿子并不居中：墨迹 x 144..1642、中心 893，而带中心 876.5，
   整串字比居中位置右偏 ≈ 16 设计 px（渲染实测 130..1625 vs 设计 144..1642，
   左右各差 14/17，两种判据都指向同一偏移）。
   用 padding-left 31 + border-box 实现这半个偏移：盒子仍是满宽，
   内容盒左移出来的 31 让居中轴右移 15.5。用布局偏移而不是 translateX，
   是为了不让标题单独成一个合成层（这一层在截图/滚动时更容易出现没重绘的帧）。
   间隔点单独放在 <i> 里：字体自带的「·」字宽 0.59em、墨迹 22px，
   而稿子里点离「域」近（26）离「助」远（55）—— 点在两个汉字中间偏右，
   比居中位置又右移 20 设计 px，所以两侧留白写成不对称的 −4 / 24
   （和恒为 20，两串汉字的位置不动），把点的墨迹钉在实测的 x 868..889。 */
.cd_domains_title {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  margin: 0;
  padding-left: calc(var(--u) * 31);
  font-size: calc(var(--u) * 118);
  font-weight: 700;
  line-height: 1;
  color: #B50221;
  white-space: nowrap;
}
.cd_domains_title > i {
  font-style: normal;
  /* 左负右正：把点的墨迹从「居中」再往右推 20 设计 px（盒宽不变，
     所以两串汉字的位置不受影响），落到实测的 x 868..889。 */
  margin: 0 calc(var(--u) * 24) 0 calc(var(--u) * -4);
}

/* 7 行：行距 296.333（实测胶囊顶 458 + 296.333·i），第一行距绸带下沿 243
   （458 − 215）。最后一行只留 209，让整段高度收在设计稿的 2445。 */
.cd_domains_list {
  margin: calc(var(--u) * 243) 0 0;
  padding: 0;
  list-style: none;
}
.cd_dom {
  position: relative;
  height: calc(var(--u) * 296.333);
}
.cd_dom:last-child {
  height: calc(var(--u) * 209);
}

/* 红胶囊：x 206..748（543 宽）、高 128、圆角约 22，填充 #B50221 纯色。
   文案形如「·神经康复·」：汉字字号 78（字距 = 字号 → 无字距），
   两侧的「·」却比汉字大 —— 点的墨迹 22px 正好是 118 号字里「·」的墨迹宽
   （和绸带标题里那个点一样大），字宽 0.59em = 69.8，于是点与汉字的间隙
   = (69.8−22)/2 + 汉字左边距 2.5 ≈ 26，与实测 26 吻合。
   所以点单独放进 <i> 放大到 1.513em（= 118/78，小字号行会自动等比缩小），
   整个文案盒宽 451.7 设计 px，稿子实测（墨迹 402 + 点两侧边距 47.6）≈ 449.6。
   第 6 行「围手术期康复」6 个字，稿子里整串缩到 ≈ 0.86，汉字给 67（盒宽 522
   vs 稿子 526.6）。
   文字居中后还要右移 6u（稿子墨迹中心 483.5、胶囊中心 477.5）：用
   padding-left 12 + border-box 实现 —— 站点默认是 content-box，
   不显式声明的话内边距会把红胶囊撑宽，所以这一条必须带上 box-sizing。

   字重保留 700：稿子的白字其实落在 Medium 与 Bold 之间（按汉字墨迹面积，
   把胶囊拆成「点 / 汉字 / 点」三段分别量，汉字那段稿子 10588 px² 而渲染 700
   是 11496，即 +8.6%；换 500 则变成 −13%）。思源黑体只有 400/500/700/900
   四档（实测 600 会被并到 700），够不着中间那档，700 是两边里更近的。 */
.cd_dom_pill {
  position: absolute;
  left: calc(var(--u) * 206);
  top: 0;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(var(--u) * 543);
  height: calc(var(--u) * 128);
  padding-left: calc(var(--u) * 12);
  border-radius: calc(var(--u) * 22);
  background: #B50221;
  color: #fff;
  font-size: calc(var(--u) * 78);
  font-weight: 700;
  white-space: nowrap;
}
/* 点的纵向位置：稿子里两个点都比汉字低 —— 汉字墨迹 y 27..100（中心 63.5），
   点墨迹 y 59..82（中心 70.5），点比汉字再低 7 设计 px。字体自带的「·」在
   em 框里是居中的，渲染出来正好和汉字同中心（实测 62.5），所以要用相对定位补这 7px。
   写成 em（= 自己的 1.513em 字号）而不是设计 px：第 6 行整串缩到 0.86，
   稿子里那行的点也只要低 5px，0.055em 两边都贴得住（6.5 / 5.6 设计 px）。
   相对定位不参与布局，两个点的横向位置不受影响。 */
.cd_dom_pill > i {
  position: relative;
  top: 0.055em;
  font-style: normal;
  font-size: 1.513em;
}
.cd_dom_pill_sm {
  font-size: calc(var(--u) * 67);
}

/* 描述文字：起点 x 836（首字墨迹落在 840 上下，7 行一致），色 #474747，
   字号 70、无字距。之前按「字距 70 但相邻墨迹起点只差 62」推过负字距 −8，
   那是错的：62 是墨迹起点之差，受每个字各自的左右边距影响，不等于字宽。
   真正的原因是稿子里中文标点「、」用的是半角宽度（35 ≠ 全角 70），
   一行 3~4 个顿号就差出 100+ 设计 px。所以改用 font-feature-settings:"halt"
   （半角替代宽度）：实测 7 行盒宽 1205.6/1285.2/1170.6/1240.6/1170.6/925.6/1240.6，
   与稿子目标（墨迹 + 首尾边距）1215/1295/1179/1249/1178/931/1249
   一致到 0.8% 以内 —— 不加这个特性的渲染会宽出 10% 以上。
   nowrap 是必须的：整页纯等比缩放，任何宽度下都不该断行。
   top/height 与胶囊同为 128、垂直居中：稿子 7 行的墨迹中心相对胶囊中心
   = +3.5 / −7.5 / −3.5 / +3 / +4 / −0.5 / +3（均值 +0.3），
   是设计师逐行手摆出来的抖动，所以按均值居中，不去逐行硬凑。

   字重 500：站点默认继承下来是 400，渲染实测墨迹比稿子轻 20%
   （稿子 28819 设计 px² vs 400 的 23446）。用「同底色同掩码」的画布复算
   各字重：400 → 23446、500 → 28491、700 → 35180，只有 500 对得上稿子（−1.1%）；
   而画布 400 的 23446 与真实截图量到的 23374 只差 0.3%，说明这套复算可信。 */
.cd_dom_desc {
  position: absolute;
  left: calc(var(--u) * 836);
  top: 0;
  display: flex;
  align-items: center;
  height: calc(var(--u) * 128);
  margin: 0;
  font-size: calc(var(--u) * 70);
  font-weight: 500;
  font-feature-settings: "halt" 1;
  color: #474747;
  white-space: nowrap;
}

/* 行下虚线：y 664 + 296.333·i（相对本行顶 = 206），x 205..2284（与胶囊左对齐、
   右到节点右缘），高 ≈3.5（稿子里实心核心 2 行、带抗锯齿边 ≈3.5），
   色 #E8CEA4 实色，节距 ≈35（亮 18 / 暗 17）。
   background-position-x 是把相位调到和稿子一致（左端第一段是半截虚线）。 */
.cd_dom::after {
  content: "";
  position: absolute;
  left: calc(var(--u) * 205);
  top: calc(var(--u) * 206);
  width: calc(var(--u) * 2080);
  height: calc(var(--u) * 3.5);
  background: repeating-linear-gradient(90deg,
    #E8CEA4 0 calc(var(--u) * 18),
    transparent calc(var(--u) * 18) calc(var(--u) * 35));
  background-position-x: calc(var(--u) * 8);
}

/* ============================================================
   ④ 环境   设计稿节点 0:8（组「环境」），占 frame x 0..2293.556、y 8000..11464
   数值全部来自 1:1 导出实测：env_ref.png = 整个组 2294×3464
   （1 图像 px = 1 设计 px），各子节点另单独导出复核。
   ============================================================ */
.cd_env {
  /* ④ 顶（frame 8000）距 ③ 节点底（frame 7803）= 197 */
  margin-top: calc(var(--u) * 197);
}

/* 米色绸带：x 0..1705（1706×232），左缘正好贴着接缝（和 ② 红条、③ 绸带同一条线）。
   绸带本体的不透明区是 y 0.5..220.5 —— 232 里多出来的 12 是台阶粗段探出去的部分，
   所以渐变只铺 220 高、盒子留 232（和 ③ 的处理相同）。
   底色是横向线性渐变，停靠点取 y 8..48 与 y 172..200 两条无字带的均值：
   绸带自带斜向纹理、纵向也有 ±6/255 的起伏，纯横向渐变是近似，
   残余均值 ≈3.4/255、峰值 ≈13/255（和 ③ 绸带的 σ1~3/255 同一量级）。 */
.cd_env_fig {
  position: relative;
  width: calc(var(--u) * 1706);
  height: calc(var(--u) * 232);
  background-image: linear-gradient(90deg,
    #EDDCBE 0%, #EEDDC7 10%, #F0DFC9 20%, #F3E5CF 30%, #F6EBD8 40%,
    #F9F3E2 50%, #FAF4E7 60%, #FBF5EA 70%, #F8F1E4 80%, #F1E9D7 90%, #EDDBBC 100%);
  background-size: 100% calc(var(--u) * 220);
  background-repeat: no-repeat;
}

/* 台阶式下划线：粗段 x 0..521 / y 204..231（522×28），细段 x 522..1705 /
   y 215..220（1184×6），两段都是 #B50221，细段垂直居中于粗段（中心都在 217.5）。
   粗段比绸带下沿多探出 12 设计 px —— 稿子就是这么画的（和 ③ 的 11 同源），
   用 ::before 绝对定位画在绸带里（父级没有 overflow:hidden，探出去的部分正常显示）。 */
.cd_env_fig::before,
.cd_env_fig::after {
  content: "";
  position: absolute;
  background: #B50221;
}
.cd_env_fig::before {
  left: 0;
  top: calc(var(--u) * 204);
  width: calc(var(--u) * 522);
  height: calc(var(--u) * 28);
}
.cd_env_fig::after {
  left: calc(var(--u) * 522);
  top: calc(var(--u) * 215);
  width: calc(var(--u) * 1184);
  height: calc(var(--u) * 6);
}

/* 绸带上的标题：和 ③ 一样是纯色 #B50221 的真文字。
   墨迹 x 285..1599（1315 宽）、y 53..166（114 高），中心 (942, 109.5)：
   纵向正好落在绸带中心（110）上，横向比绸带中心 853 右偏 89 设计 px。
   字号 119 + 字距 1.4 是渲染实测反解出来的（不是从墨迹高直接除：
   11 个字的墨迹里既有 国/康 这种满框字也有 一 这种扁字，单看高度会被
   具体字集带偏）。首轮用 118/2.1 渲染后墨迹 1310.2×112.1，稿子 1314.6×113.1，
   宽窄 4.4、高矮 1.0；按「墨迹宽 ≈ 11×字号 + 10×字距」解出 119/1.4 后
   两侧同时落到 0.5 设计 px 以内（11×119 + 10×1.4 = 1323 推进宽，
   扣掉首字左边距与末字右边距 ≈ 1314.6）。
   水平偏移沿用 ③ 的「flex 居中 + border-box + padding-left」：盒子仍满宽，
   内容盒左移出来的 180 让居中轴右移 90，再扣掉 CSS 会在末字后多留的一道字距
   （1.4 / 2 ≈ 0.7），净偏移 89.3 ✓（稿子 89.4）。
   height 用 220（绸带本体的高）而不是 232，这样 flex 居中的轴就是墨迹的轴。 */
.cd_env_title {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  height: calc(var(--u) * 220);
  margin: 0;
  padding-left: calc(var(--u) * 180);
  font-size: calc(var(--u) * 119);
  font-weight: 700;
  line-height: 1;
  letter-spacing: calc(var(--u) * 1.4);
  color: #B50221;
  white-space: nowrap;
}

/* 段落 0:18：节点在 frame (75.556, 380.667969)，2218×716。
   字号 96 / 字距 2.49983 / Medium 500 / #5B5D62 取自节点属性并实测复核
   （墨迹字宽 96 + 2.5 = 98.5 ✓）。
   行高取整数 179 而不是节点里写的 179.154495：节点的盒高正好是 716 = 4 × 179，
   导出的 4 行墨迹顶也在 0/179/358/537（= 179 的整数倍），
   而 0:19 顶 = 380.668 + 716 + 120.332 = 1217 也正是按 716 算的。
   用 179 才能让段落盒高、墨迹行位、后面两张照片的位置同时对上稿子
   （用 179.154 的话段落后面的内容会整体低 0.6 设计 px，照片就不在整数位上）。
   断行是设计稿手断的（第 1 行停在「张，」而「按」其实挤得下），用 <br> 复刻；
   配 nowrap —— 整页纯等比缩放，任何宽度下断点都和稿子一致。
   首行缩进 150 = 稿子第 1 行墨迹相对其余各行墨迹的左移量
   （原文是 6 个半角空格，但空格宽随字体变，写死实测的设计 px 更稳）。
   段落顶（380.668）距绸带底（232）= 148.668。 */
.cd_env_p {
  margin: calc(var(--u) * 148.668) 0 0 calc(var(--u) * 75.556);
  font-size: calc(var(--u) * 96);
  line-height: calc(var(--u) * 179);
  letter-spacing: calc(var(--u) * 2.49983);
  font-weight: 500;
  color: #5B5D62;
  text-indent: calc(var(--u) * 150);
  white-space: nowrap;
}

/* 两组照片。设计稿里 0:19 / 0:20 是「若干张圆角照片 + 透明底」的合成图，
   照片之间透空（透出 bg.jpg 的图案）。这里把每张照片单独切出来存 JPEG，
   圆角交给 CSS —— 实测六张照片圆角半径全是 19 设计 px、无阴影无描边，
   整张存带 alpha 的 PNG 要 7 MB，拆开只有 686 KB。
   容器按设计稿节点的原尺寸开，照片在其中绝对定位（坐标 = 节点内实测值），
   与稿子的相对关系完全一致，也天然落在接缝以内。 */
.cd_env_ph1,
.cd_env_ph2 {
  position: relative;
}
.cd_env_ph1 {
  /* 节点 0:19 在 frame (103, 1217)，2150×601；距段落底（frame 9817）= 120.332 */
  width: calc(var(--u) * 2150);
  height: calc(var(--u) * 601);
  margin: calc(var(--u) * 120.332) 0 0 calc(var(--u) * 103);
}
.cd_env_ph2 {
  /* 节点 0:20 在 frame (107, 1920)，2162×1544；距 0:19 底（frame 1818）= 102 */
  width: calc(var(--u) * 2162);
  height: calc(var(--u) * 1544);
  margin: calc(var(--u) * 102) 0 0 calc(var(--u) * 107);
}
.cd_env_im {
  position: absolute;
  border-radius: calc(var(--u) * 19);
}
/* 每张照片在所属节点内的实测 rect（圆角内缩到 alpha 50% 的交叉点） */
.cd_env_1_1 { left: calc(var(--u) * 1);    top: calc(var(--u) * 1);   width: calc(var(--u) * 1043); height: calc(var(--u) * 600); } /* 服务台 */
.cd_env_1_2 { left: calc(var(--u) * 1106); top: calc(var(--u) * 1);   width: calc(var(--u) * 1043); height: calc(var(--u) * 600); } /* 诊室 */
.cd_env_2_1 { left: 0;                     top: calc(var(--u) * 1);   width: calc(var(--u) * 1400); height: calc(var(--u) * 742); } /* 护士站 */
.cd_env_2_2 { left: 0;                     top: calc(var(--u) * 851); width: calc(var(--u) * 665);  height: calc(var(--u) * 693); }
.cd_env_2_3 { left: calc(var(--u) * 743);  top: calc(var(--u) * 851); width: calc(var(--u) * 665);  height: calc(var(--u) * 693); }
.cd_env_2_4 { left: calc(var(--u) * 1486); top: calc(var(--u) * 851); width: calc(var(--u) * 665);  height: calc(var(--u) * 693); }

/* 设施说明：设计稿里是 0:20 内的一块粉底方框（x 1485..2161 / y 124..651，
   677×528，直角，纯色 #F8E0D4 —— 实测框内只有一个色值），框里 5 行字是烘焙在图里的。
   这里改成真文字浮层：切图里已经不含这块，方框直接画在画布上（浮在照片之间
   那片透空区上），文案可收录、可改。

   框内 5 行是「两端对齐」的：设计稿每行墨迹 624/625/623/616/615 基本等宽，
   而各行字数 13/13/11/12/12 不等 —— 只有分散对齐才会这样。
   所以用 text-align: justify + text-align-last: justify 把每行撑满内容宽。
   断行照稿子手断（<br>），注意「衣柜」「无障碍」「设计」这些词是跨行拆开的。

   字号 54 / 字距 0 / 内容宽 630 —— 这三个数是「反解」出来的：
   ① 汉字推进宽：稿子 5 行的墨迹起点间距（含各字左右边距扰动）反解出
      汉字自然推进宽 ≈ 54.1，标点（半角）≈ 27；
   ② 墨迹高：稿子 50（第 3 行是纯汉字行，最干净）。渲染实测这套字体在小
      字号下的墨迹/em 比约 0.925（② 的 96 号是 0.948，字号越小比值越小），
      54 × 0.925 ≈ 50 ✓ —— 51.6 只能给出 47.7，明显矮了；
   ③ 不换行：最长两行（第 1、2 行 = 10 汉字 + 3 个半角标点）自然宽
      11.5 × 54 = 621 ≤ 630，留 9 设计 px 余量。
   三者同时成立只有 54/0/630 附近。代入后各行两端对齐的推进宽
   （630/11 = 57.27、54 + 9/13 = 54.69 等）与稿子实测逐行吻合。

   字重 400：稿子是「烘焙在 0:20 切图里的一段字」，没有节点属性可查，
   所以拿 1:1 画布复算 —— 在画布上按 54px 画同一串字、同一底色阈值
   （#F8E0D4 与 #3B3C3C 的亮度中点）取横切墨段宽度：
     稿子  中位 4 / 众数 4（555 条）
     画布 300 → 2 ；400 → 4（638 条）；500 → 5（531 条）；700 → 7
   稿子的墨段宽度分布和 400 逐档对得上（500 明显粗、300 明显细）。
   同一套方法拿段 0:18（节点属性写明 Medium/500）做对照：画布 500 的
   总墨量 227702 vs 稿子 227322（100.2%）—— 方法本身是准的，
   所以这条 400 是真的 400，不是测量偏差。

   font-feature-settings: "halt" 是必须的（和 ③ 的描述同理）：稿子里的
   「、，。：」都是半角宽度（实测 「、」推进宽 28、「，」26，都 ≈ 字号的一半），
   不加这个特性浏览器会按全角排，第 1 行自然宽立刻变成 10×54 + 3×54 = 702
   > 630 而折行 —— 首轮就是漏了这一条，整块散成 7 行。
   标点也照稿子用全角字符（「：」「，」），不是 ASCII 的半角冒号/逗号：
   稿子里第 2、4 行那两个逗号的墨迹是 w10~11、下探到基线下 2px 的全角逗号形状。

   行距 89.75（5 行墨迹顶 61/151/240/331/420，间距 90/89/91/89）。
   padding 左 24.25 / 右 22.75 让内容宽 630：稿子的墨迹左内缩是 26.6，
   而这套字体「房」的左边距约 1.8（渲染实测「墨迹左 − 内容盒左」），
   所以内容盒左缘要摆到 1592+24.25 才能让墨迹落在稿子的 1618.6。
   这是补字体边距差，不是改设计几何 —— 两边同一套字体栈，常数在生产同样成立。
   padding-top 42：行盒高 89.75、墨迹高 50 居中 → 墨迹顶 ≈ 42 + 20 = 62 ≈ 稿子 61。 */
.cd_env_note {
  position: absolute;
  left: calc(var(--u) * 1485);
  top: calc(var(--u) * 124);
  box-sizing: border-box;
  width: calc(var(--u) * 677);
  height: calc(var(--u) * 528);
  margin: 0;
  padding: calc(var(--u) * 42) calc(var(--u) * 22.75) 0 calc(var(--u) * 24.25);
  background: #F8E0D4;
  color: #3B3C3C;
  font-size: calc(var(--u) * 54);
  line-height: calc(var(--u) * 89.75);
  font-weight: 400;
  font-feature-settings: "halt" 1;
  text-align: justify;
  text-align-last: justify;
}

/* 手机端不依赖 halt（真机是这里出的事）。
   halt 把标点压成半角（27 = 54/2），上面 5 行手断的文案正是靠它才排得进 630 内容宽。
   真机上这个特性一旦不生效（内核不认 font-feature-settings，或系统字体缺半角字形），
   标点就按全角排，每行多出 2~3 个半角 ≈ +11% —— 5 行各自折行、共 9 行，
   而框是固定高 528、框底到下面那排照片只剩 33 CSS px，文字必然漏到粉底外面。

   这里把 halt 摘掉，改成「全角标点 + 标点自身负字距」收掉右边那半个身位：
   letter-spacing 是所有内核都支持的普通属性，不需要任何 OpenType 特性。
   实测与 halt 的半角形式逐字等价（每个字的 x / 宽度差 0，含「：」「、」都是 27u），
   所以断行、粉框尺寸、PC 预览的样子都分毫不变 —— PC（>1024）仍走上面的 halt。
   若以后想让 PC 也摆脱 halt 依赖，把下面两条挪出媒体查询即可（1440 实测同样逐字等价）。 */
@media (max-width: 1024px) {
  .cd_env_note {
    font-feature-settings: normal;
  }
  .cd_env_note .cd_punt {
    letter-spacing: calc(var(--u) * -27);
  }
}

/* ============================================================
   ⑤ 设备   设计稿节点 0:9（组「设备」），占 frame x 0..2264.964、y 11897..15881
   三个子节点：0:22 标题绸带（1736×221）、0:23 真文字段（2164×871）、
   0:24 照片合成图（2105×2637）。
   数值全部来自 1:1 导出实测（1 图像 px = 1 设计 px）：
   dev_title_ref.png（1736×221）、dev_p_ref.png（2157×786 墨迹盒）、
   dev_ref.png（2105×2637，带 alpha，压平到 #ECEDF2 后量的）。
   ============================================================ */
.cd_dev {
  /* ⑤ 顶（frame 11897）距 ④ 节点底（frame 11464）= 433 */
  margin-top: calc(var(--u) * 433);
}

/* 米色绸带 0:22：1736×221，左缘正好贴着接缝（和 ② 红条、③④ 绸带同一条线）。
   绸带本体的不透明区是 y 0..210（高 211）—— 221 里多出来的 10 是台阶粗段
   探出去的部分（粗段一直到 y 219），所以渐变只铺 211 高、盒子留 221
   （和 ③ 的 215/232、④ 的 220/232 同一套做法）。
   底色是横向线性渐变，停靠点取 y 2..46 与 y 168..193 两条无字带的均值：
   稿子的米色带自带斜向纹理，纯横向渐变是近似，残余量与前两段同档
   （均值 ≈3.4/255）。 */
.cd_dev_fig {
  position: relative;
  width: calc(var(--u) * 1736);
  height: calc(var(--u) * 221);
  background-image: linear-gradient(90deg,
    #ECDBBD 0%, #EDDCC5 10%, #EFDEC7 20%, #F2E4CE 30%, #F6ECD9 40%,
    #F9F3E3 50%, #FBF5EA 60%, #FCF6EC 70%, #F8F2E4 80%, #F1EAD9 90%, #EFDDBE 100%);
  background-size: 100% calc(var(--u) * 211);
  background-repeat: no-repeat;
}

/* 台阶式下划线：粗段 x 0..449 / y 195..219（450×25），细段 x 450..1735 /
   y 206..210（1286×5），两段都是 #B50221，细段垂直居中于粗段（中心都在 207）。
   粗段比绸带下沿多探出 9 设计 px —— 稿子就是这么画的（③ 的 11、④ 的 12 同源），
   用 ::before/::after 绝对定位画在绸带里（父级没有 overflow:hidden，探出去的部分
   正常显示）。 */
.cd_dev_fig::before,
.cd_dev_fig::after {
  content: "";
  position: absolute;
  background: #B50221;
}
.cd_dev_fig::before {
  left: 0;
  top: calc(var(--u) * 195);
  width: calc(var(--u) * 450);
  height: calc(var(--u) * 25);
}
.cd_dev_fig::after {
  left: calc(var(--u) * 450);
  top: calc(var(--u) * 206);
  width: calc(var(--u) * 1286);
  height: calc(var(--u) * 5);
}

/* 绸带上的标题：和 ③④ 一样是纯色 #B50221 的真文字。
   墨迹 x 159..1623（1465 宽）、y 51..158（108 高），中心 (891, 104.5)；
   绸带水平中心 868 → 墨迹右偏 23；纵向正好落在绸带中心（105.5）上。
   字号 115 / 字距 0 / weight 700 是 1:1 画布复算出来的（不是从墨迹高直接除）：
   按 115/0/700 画同一串字，前 7 个列游程（含「·」的 708..728）平均误差
   0.29 设计 px、墨迹高 108 与稿子相同、墨迹密度 0.4699 vs 稿子 0.4606（+2.0%），
   而 weight 500 只有 0.3861（−16%）—— 这条字重是 700 不是 500。
   垂直：height 用绸带本体高 211（不是盒子高 221），flex 居中的轴才是墨迹的轴 ——
   行盒高 = 1em = 115、上下 half-leading 为 0，行盒顶 = (211 − 115)/2 = 48，
   墨迹落在 51..158，与稿子逐像素吻合。
   水平偏移沿用 ③④ 的「flex 居中 + border-box + padding-left」：盒子仍满宽，
   内容盒右移出来的一半 23 让居中轴右移 23，墨迹中心由 868 落到 891
   （公式：墨迹中心 = (1736 + padding-left + 首字左边距 − 末字右边距)/2，
   首/末边距 5 / 5.08 是画布实测）。
   「·」单独放 <i> 里：稿子在点和后一个字之间插了 +26 的空白，
   写成 <i> 的 margin-right（和 ③ 的 −4/24 同理，是补字体的点边距差）。 */
.cd_dev_title {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  height: calc(var(--u) * 211);
  margin: 0;
  padding-left: calc(var(--u) * 46);
  font-size: calc(var(--u) * 115);
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0;
  color: #B50221;
  white-space: nowrap;
}
.cd_dev_title > i {
  font-style: normal;
  margin: 0 calc(var(--u) * 26) 0 0;
}

/* 段落 0:23：节点在 frame (100.963989, 350.337)，2164×871。
   字号 96 / 行高 174.149872 / 字距 2.429998 / Medium 500 / #5B5D62 取自节点属性
   并实测复核：稿子 5 行的行距精确是 174.00，每行墨迹高 93/89/93/93/89。
   字重用 1:1 画布复算（节点写 Medium，站点默认继承 400，不能漏）：
     稿子 墨迹跨距 2157、墨迹密度 0.164749
     画布 weight 500 → 2156 / 0.16111（−2.2%）
     画布 weight 400 → 0.13216（−19.7%）  画布 weight 700 → 0.20036（+21.6%）
   断行是设计稿手断的（第 1 行停在「覆盖」而下一字「物」其实挤得下），
   用 <br> 复刻；配 nowrap —— 整页纯等比缩放，任何宽度下断点都和稿子一致。
   首行缩进 195 = 稿子第 1 行墨迹相对其余各行墨迹的左移量（原文是 8 个半角空格，
   但空格宽随字体变，写死实测的设计 px 更稳；做法同 ④ 的 150）。
   标点照稿子用全角（「，」「。」），稿子里它们的墨迹/推进就是全角，不需要 halt 特性
   （④ 那条 677 宽的框是半角标点，才必须加）。
   段落顶（350.337）距绸带底（221）= 129.336914。 */
.cd_dev_p {
  margin: calc(var(--u) * 129.336914) 0 0 calc(var(--u) * 100.963989);
  font-size: calc(var(--u) * 96);
  line-height: calc(var(--u) * 174.149872);
  letter-spacing: calc(var(--u) * 2.429998);
  font-weight: 500;
  color: #5B5D62;
  text-indent: calc(var(--u) * 195);
  white-space: nowrap;
}

/* 照片合成图 0:24：节点在 frame (129, 1347)，2105×2637；距段落底（frame 1221.337）
   = 125.663086。3 行 7 张圆角照片（2 + 2 + 3），栅格实测：
   两列 1013 间距 78（1 | 1092）、三列 651 间距 75.5（1 | 727 | 1454）、
   行高 648 / 1199 / 648、行间距均 71（648 + 71 + 1199 + 71 + 648 = 2637）。
   内容总宽 2104（右缘 2105 = 节点宽），所以 7 张图的位置写死实测 rect。
   每张照片圆角半径 28 设计 px（角内缩拟合：k=5→12.03、10→6.55、15→3.2、20→1.17），
   圆角交给 CSS —— 整张带 alpha 存 PNG 要好几 MB，拆成 7 张 JPEG 只有 1.1 MB，
   而且圆角外的底色就是设计稿底色 #ECEDF2（这一块在设计稿 y 13244 之后，
   早过了 bg.jpg 图案的淡出线 y 10391），压平不会有色差。 */
.cd_dev_grid {
  position: relative;
  width: calc(var(--u) * 2105);
  height: calc(var(--u) * 2637);
  margin: calc(var(--u) * 125.663086) 0 0 calc(var(--u) * 129);
}

/* 一格 = 一张照片 + 底部的名称条。红条不是纯色（半透明红压在照片上，同一行
   从 #B50221 一路漂到 #CD6D74，还透出照片的斜向亮带），CSS 平涂复刻不出来，
   所以红条原样留在切图里，只把烘焙的字抹掉、用 <figcaption> 的真文字浮上去。
   overflow:hidden + 圆角在这里兼两个作用：把切图的直角裁成圆角，
   也把名称条跟着一起收进圆角里。 */
.cd_dev_cell {
  position: absolute;
  margin: 0;
  border-radius: calc(var(--u) * 28);
  overflow: hidden;
}
.cd_dev_cell > img {
  display: block;
  width: 100%;
  height: 100%;
}
/* 名称条：贴格底、高 70（稿子 R1 y 578..647、R2 y 1129..1198、R3 y 578..647，
   都是格底往上 70）。条本身是透明的，红底在切图里。
   文字 43 / 字距 0.5 / weight 500 / 白，居中；条高 70、墨迹高 39，
   稿子上下内缩 16/15，flex 居中正好。这一组是 6 条说明文字做
   「覆盖率 MAD + ±2px 对齐搜索」聚合排名定出来的：
     F=43.25/LS=0.25/w500 0.0777 ＞ F=43/LS=0.5/w500 0.0808 ＞ F=43/LS=0.5/w400 0.0833
   在 F=43/LS=0.5 下 w500 在 6 条里赢 5 条（只有含拉丁字母的 E-LINK 那条偏向 400：
   0.078 vs 0.1058，字面差与字体无关的拉丁基线有关）；
   首轮「严格白」指纹里 F=43/LS=0.5/w500 的 4 字游程起点 [0,43,88,130]、
   墨迹宽 169、高 39 与稿子完全相同。字距 43.5 另由 R3C2 的 9 个间隔 / 391px
   反解复核（43.44）。 */
.cd_dev_cell > figcaption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  height: calc(var(--u) * 70);
  font-size: calc(var(--u) * 43);
  letter-spacing: calc(var(--u) * 0.5);
  font-weight: 500;
  line-height: 1;
  color: #FFFFFF;
  white-space: nowrap;
}

/* 每张照片在 0:24 节点内的实测 rect */
.cd_dev_1 { left: calc(var(--u) * 1);    top: 0;                      width: calc(var(--u) * 1013); height: calc(var(--u) * 648); }
.cd_dev_2 { left: calc(var(--u) * 1092); top: 0;                      width: calc(var(--u) * 1013); height: calc(var(--u) * 648); }
.cd_dev_3 { left: calc(var(--u) * 1);    top: calc(var(--u) * 719);   width: calc(var(--u) * 1013); height: calc(var(--u) * 1199); }
.cd_dev_4 { left: calc(var(--u) * 1092); top: calc(var(--u) * 719);   width: calc(var(--u) * 1013); height: calc(var(--u) * 1199); }
.cd_dev_5 { left: calc(var(--u) * 1);    top: calc(var(--u) * 1989);  width: calc(var(--u) * 651);  height: calc(var(--u) * 648); }
.cd_dev_6 { left: calc(var(--u) * 727);  top: calc(var(--u) * 1989);  width: calc(var(--u) * 651);  height: calc(var(--u) * 648); }
.cd_dev_7 { left: calc(var(--u) * 1454); top: calc(var(--u) * 1989);  width: calc(var(--u) * 651);  height: calc(var(--u) * 648); }


/* ============================================================
   ⑥ 底部文字   设计稿节点 0:7（组「底部文字」）1569×939.688，
   占 frame x 401.1413..1970.1413、y 16074.6475..17014.336（画布底 17230 之下留 215.664）。
   四个子节点全是真文字 / 矢量，没有一张切图，所以这一段不新增图片资源：
     0:17 咨询热线两行（1394×312.001）、0:15 上海壹博医生集团（947×163）、
     0:16 红色细线（156.17×2.1699）、0:14 成都壹博康复医疗中心（1569×216）。
   数值全部来自 1:1 导出实测：bt_ref.png = 整个组 1569×940（1 图像 px = 1 设计 px）。
   墨迹用「50% 覆盖率」判据量 —— 底色 #ECEDF2 太靠近 255，⑤ 那种按白底反解
   α=(P−B)/(255−B) 的信噪比不够（255−B 只有 13~19），改成按墨迹色反解：
     α = (P_c − B_c)/(I_c − B_c)，取 |I_c − B_c| 最大的通道，α>0.5 即墨迹：
     #C12244 (193,34,68) → G 通道 |34−237| = 203 最强 → G < 135.5
     #B50220 (181,0,32)  → G 通道 |0−237|  = 237 最强 → G < 118.5
     #5B5D62 (91,93,98)  → R 通道 |91−236| = 145 最强 → R < 163.5
   ============================================================ */
.cd_bot {
  /* ⑥ 顶（frame 16074.6475）距 ⑤ 节点底（frame 15881）= 193.6475。
     组盒中心 x = 401.1413 + 784.5 = 1185.6413，比画布中心（1181）右 4.64 ——
     稿子这一块本来就不居中，所以左缘写死 margin-left，不用 auto。 */
  position: relative;
  width: calc(var(--u) * 1569);
  height: calc(var(--u) * 939.688);
  margin: calc(var(--u) * 193.6475) 0 0 calc(var(--u) * 401.1413);
}

/* 0:17 咨询热线两行：节点 (89.8859, 0) 1394×312.001，居中，行高 147.292343、
   字距 4.878392 —— 三段文字共用同一组行高字距（逐段读过节点属性确认）。
   第 1 行两种字号混排（65.045 的「咨询热线：」+ 97.568 的电话号码）：
   行高写成绝对长度后子元素继承的是计算值，混排不会把行盒撑高，与稿子一致。
   盒高 312.001、两行行高合计 294.585，稿子是把两行行盒放在盒里居中的，
   所以文字块顶 = (312.001 − 294.585)/2 = 8.708157，不是 0。
   这个值再由页面实测校准 −6.82 —— 见「⑥ 文字块顶的实测校准」一段。 */
.cd_bot_tel {
  position: absolute;
  left: calc(var(--u) * 89.8859);
  top: calc(var(--u) * 1.888157);
  width: calc(var(--u) * 1394);
  margin: 0;
  font-size: calc(var(--u) * 65.04521942138672);
  font-weight: 700;
  line-height: calc(var(--u) * 147.29234313964844);
  letter-spacing: calc(var(--u) * 4.878391742706299);
  text-align: center;
  white-space: nowrap;
}
.cd_bot_tel_k { color: #C12244; }
.cd_bot_tel_2 { color: #5B5D62; }

/* 电话号码是稿子里唯一不是「思源黑体」的文字：节点写 Source Han Serif SC
   （衬线）、Bold 97.567833、色同上面的红。本机装的 Source Han Serif SC
   （= Noto Serif SC）用**比例数字**，比稿子的等宽数字窄：
   稿子数字串墨迹 707（首墨迹 351 → 末墨迹 1058），1:1 画布复算 694（−1.9%）；
   差的 13 px 全在两处「1」上 —— 稿子数字推进 56.12、两个「1」的墨迹 41/42
   与其余数字的 47~49 同宽（等宽数字），本机「1」只有 37。这是替代字体的差别，
   不是参数错；字串居中，偏差左右各摊 6.5 设计 px（--u ≈ 0.45 时不到 3 CSS px），
   肉眼不可见，所以照节点原参数写，不额外加 font-variant-numeric 去凑。 */
.cd_bot_tel_n {
  font-family: "Source Han Serif SC", "Source Han Serif CN", "Noto Serif SC", "Songti SC", "SimSun", serif;
  font-size: calc(var(--u) * 97.56783294677734);
  color: #C12244;
}

/* 0:15「上海壹博医生集团」：节点 (309.6, 477.0361) 947×163，居中，
   108.746132 / 行高 130.495361（= 1.2em）/ 字距 10.874614（= 0.1em）/ Medium 500 / #B50220。
   盒高 163、行高 130.495 → 文字块顶 = 477.0361 + 16.2523195 = 493.288420。
   1:1 实测墨迹 x 316..1246（931）、y 509..608（100）。
   页面实测校准 +2.62 —— 见「⑥ 文字块顶的实测校准」一段。 */
.cd_bot_org {
  position: absolute;
  left: calc(var(--u) * 309.6);
  top: calc(var(--u) * 495.90842);
  width: calc(var(--u) * 947);
  margin: 0;
  font-size: calc(var(--u) * 108.74613189697266);
  font-weight: 500;
  line-height: calc(var(--u) * 130.495361328125);
  letter-spacing: calc(var(--u) * 10.874613761901855);
  color: #B50220;
  text-align: center;
  white-space: nowrap;
}

/* 0:16 红细线：节点 (707.3687, 694.5322) 156.17×2.1699，无填充、只有 1px 描边 #B50021。
   描边跨在矩形边上，1:1 实测墨迹 x 707..863（157）、y 694..696（3），
   正是「矩形外沿 + 1px 描边」的范围，所以直接铺同色实心块（不用 border），
   屏幕上抗锯齿的结果与稿子逐像素一致。 */
.cd_bot_rule {
  position: absolute;
  left: calc(var(--u) * 707.3687);
  top: calc(var(--u) * 694.5322);
  width: calc(var(--u) * 156.17);
  height: calc(var(--u) * 2.1699);
  background: #B50021;
}

/* 0:14「成都壹博康复医疗中心」：节点 (0, 723.6884) 1569×216，居中，
   143.921051 / 行高 172.705276（= 1.2em）/ 字距 14.392105（= 0.1em）/ Medium 500 / #B50220。
   盒高 216、行高 172.705 → 文字块顶 = 723.6884 + 21.647362 = 745.335762。
   1:1 实测墨迹 x 6..1563（1558）、y 765..898（134）。
   页面实测校准 +3.30 —— 见「⑥ 文字块顶的实测校准」一段。
   10 个字的推进宽 1583 比盒宽 1569 多 14（字距也进推进），居中后左右各溢 7，
   墨迹 1558 仍在盒内；画布 overflow-x 是 clip，不会出横向滚动条。 */
.cd_bot_name {
  position: absolute;
  left: 0;
  top: calc(var(--u) * 748.635762);
  width: calc(var(--u) * 1569);
  margin: 0;
  font-size: calc(var(--u) * 143.92105102539062);
  font-weight: 500;
  line-height: calc(var(--u) * 172.7052764892578);
  letter-spacing: calc(var(--u) * 14.392105102539062);
  color: #B50220;
  text-align: center;
  white-space: nowrap;
}

/* ---------- ⑥ 文字块顶的实测校准 ----------
   上面三个 top 都是「盒高里居中行盒」推出来的，但浏览器和 Pixso 取字形
   ascent/descent 的口径不一致（hhea 与 OS/2 usWin），同一盒子里墨迹会差几个
   设计 px。所以做完再拿页面实测校一遍：
     · 页面侧：/cd/ 视口 1920（画布 1037.32 → u = 0.439171）滚动到 ⑥，
       DPR 1 截视口图，量墨迹带的 **α 加权质心**（不量边缘 —— 0.44 倍栅格下
       边缘有 ±2 设计 px 抖动，质心在上万个墨迹像素上求平均，是亚像素级的）；
       α 统一按 G 通道反解 α=(237−G)/(237−G_ink)，设计侧与页面侧同式同色，系统误差相消。
     · 尺度偏差对照：把设计稿的同一窗口按 u 缩小再量质心，看「缩放」本身挪多少 ——
       y 向只有 +0.02 / −0.34 / −0.45 / +0.57 设计 px，所以页面 vs 设计的 y 差是真的。
     （x 向的同一对照有 +2.0~+2.8，逐字形 α 在低倍栅格下重分配会让质心横移，
       所以横向不做质心校准 —— 横向本来就由 getBoundingClientRect 卡到 0.03 设计 px。）
   实测（页面 − 设计，设计 px；第二列是尺度偏差，第三列是校准量 = 两者之差）：
     0:17 行1  +7.11  +0.02  →  +7.09
     0:17 行2  +6.21  −0.34  →  +6.55    两行平均 +6.82，一起去掉（差值 0.54 是
     0:15      −3.07  −0.45  →  −2.62    行盒高差：本机行盒 155.64 vs 稿子 156.00、
     0:14      −2.73  +0.57  →  −3.30    0.36%，拆不开，两行各摊 ±0.27）
   校准后三条带各在各的设计墨迹带内 ±0.3 设计 px（--u≈0.45 时 0.13 CSS px）。
   红细线 0:16 没校：它只有 2.17 设计 px 高（不到 1 CSS px），缩放后质心无意义，
   位置直接由盒几何保证（top 694.5322，实测 Δ0.007 设计 px）。
   复算用的临时脚本（质心比对 / 尺度偏差 / 墨迹带 / 设计侧 50% 覆盖率墨迹）
   连同 1:1 导出图 bt_ref.png 都在临时目录 _probe/ 里，随这次改版收尾一并删掉。 */