fix: 拍照页对齐 Figma(正→右→左/镜像预览/WebView 口径定位/85%遮罩) + 语音调度重写 + 正脸照不镜像

- 拍照顺序改为正脸→右脸→左脸(对齐 Figma),左右以用户本人为准;送检前按 target 重排为 [正,左,右]
- 三步预览均镜像(Figma 侧脸轮廓按镜像绘制),后置镜头侧脸轮廓自动翻转;抓帧恒为原始视角
- 蒙版 viewBox 取 Figma 帧 y86–812(扣除微信导航栏)+ meet 缩放,文案/引导/提示按 726 高定位;框外 85% 黑,静态态白底
- 语音:流程音排队不截断、姿态提示挂起补播、倒计时等播报收尾、拍摄完成打断过时引导、出报告/退出清队列;去重仅限姿态提示
- 语音文件改名 step2-rightface / step3-leftface,同步清单、生成脚本与设计文档
- 精华卡去重复正文、推荐依据写明具体原因;年龄仅数字;toast 按字数延时;备注去内部质量码
- 新增无头浏览器冒烟测试 h5/test/e2e-browser.mjs

Co-authored-by: Cursor <cursoragent@cursor.com>

h5/css/style.css

@@ -198,10 +198,8 @@ button { font-family: inherit; border: 0; background: none; cursor: pointer; }
 
 /* ═══════════ 05-07 拍照页 ═══════════ */
 #s-cam { background: #000; }
-.cam-bg {
-  position: absolute; inset: 0;
-  background-size: cover; background-position: center;
-}
+/* 相机未就绪/降级时的静态态:白底经蒙版 85% 压暗 → 框外深灰、轮廓内白,即 Figma 05-07 静态稿 */
+.cam-bg { position: absolute; inset: 0; background: #fff; }
 /* 实时相机画面(getUserMedia 成功后显示,盖住静态示意图) */
 #cam-video {
   position: absolute; inset: 0;
@@ -212,11 +210,12 @@ button { font-family: inherit; border: 0; background: none; cursor: pointer; }
 }
 #s-cam.cam-live #cam-video { display: block; }
 #s-cam.cam-live .cam-bg { display: none; }
-/* 设计稿(Figma 05-07):取景框外全黑,仅轮廓镂空区显示实时画面,不再整屏压暗 */
+/* 设计稿(Figma 05-07):压暗只在取景蒙版框外(.cam-dim-rect),不再整屏压暗 */
 #s-cam::before { content: none; }
 #s-cam .nav { position: fixed; left: 0; right: 0; }
+/* 拍照页纵向定位按 WebView 口径:Figma 帧 812 高扣掉顶部 86px 微信导航栏 = 726 高视口,百分比均以 726 为基准 */
 .cam-step {
-  position: absolute; left: 0; right: 0; top: 16.5%;
+  position: absolute; left: 0; right: 0; top: 6.4%;
   text-align: center;
   color: #fff; font-size: 21px; font-weight: 500;
   line-height: 1.5; letter-spacing: 1px;
@@ -224,7 +223,7 @@ button { font-family: inherit; border: 0; background: none; cursor: pointer; }
   z-index: 2;
 }
 .cam-guide {
-  position: absolute; left: 0; right: 0; bottom: 20%;
+  position: absolute; left: 0; right: 0; bottom: 22.4%;
   display: flex; justify-content: center; align-items: center; gap: 18px;
   z-index: 2;
 }
@@ -248,9 +247,9 @@ button { font-family: inherit; border: 0; background: none; cursor: pointer; }
 }
 .cam-fill.on { opacity: 1; transition: none; }
 
-/* 步骤圆点:当前步高亮、完成步绿色打勾 */
+/* 步骤圆点:当前步高亮、完成步绿色打勾(Figma 无此元素,放在步骤文案与取景轮廓之间的空隙) */
 .cam-dots {
-  position: absolute; top: calc(var(--nav-h) + 10px); left: 0; right: 0;
+  position: absolute; top: 16.2%; left: 0; right: 0;
   display: flex; justify-content: center; gap: 12px;
   z-index: 2;
 }
@@ -266,7 +265,7 @@ button { font-family: inherit; border: 0; background: none; cursor: pointer; }
   text-align: center; font-size: 8px; line-height: 10px; color: #fff;
 }
 
-/* 取景蒙版:SVG mask 镂空 + 轮廓线框,按 data-step 切换轮廓;框外纯黑不透明(对齐 Figma:只有轮廓内显示画面) */
+/* 取景蒙版:SVG mask 镂空 + 轮廓线框,按 data-step 切换轮廓;框外 85% 黑 */
 .cam-mask {
   position: absolute; inset: 0;
   width: 100%; height: 100%;
@@ -276,7 +275,8 @@ button { font-family: inherit; border: 0; background: none; cursor: pointer; }
 .cam-mask[data-step="0"] [data-shape="0"],
 .cam-mask[data-step="1"] [data-shape="1"],
 .cam-mask[data-step="2"] [data-shape="2"] { display: block; }
-.cam-dim-rect { fill: #000; } /* 框外全黑(Figma 设计):摄像头画面只在轮廓镂空区可见 */
+.cam-mask.flip { transform: scaleX(-1); } /* 后置镜头预览不镜像:侧脸轮廓随之翻转 */
+.cam-dim-rect { fill: #000; fill-opacity: .85; } /* Figma 05-07 框外为 85% 黑(alpha 217):环境隐约可见,人脸只在轮廓内清晰 */
 .cam-line path { fill: none; stroke: rgba(255,255,255,.85); stroke-width: 2.5; }
 /* 未检测到人脸:轮廓呼吸动画(~1.8s);姿态 ok:品牌绿定格 */
 @keyframes maskBreath { 0%,100% { stroke-opacity: .3; } 50% { stroke-opacity: .95; } }
@@ -285,7 +285,7 @@ button { font-family: inherit; border: 0; background: none; cursor: pointer; }
 
 /* 检测引擎加载状态(小字胶囊) */
 .cam-status {
-  position: absolute; top: calc(var(--nav-h) + 32px); left: 50%;
+  position: absolute; top: 17px; left: 50%; /* 与悬浮返回键同一行,不压步骤文案 */
   transform: translateX(-50%);
   font-size: 10px; color: rgba(255,255,255,.85);
   background: rgba(0,0,0,.35);
@@ -565,7 +565,7 @@ button { font-family: inherit; border: 0; background: none; cursor: pointer; }
 .vm-notes { font-size: 7px; font-weight: 400; color: var(--grey-3); line-height: 1.7; margin: 0 2px 9px; }
 /* 精华推荐卡 */
 .essence-name { font-size: 15px; font-weight: 700; color: var(--ink); margin-bottom: 6px; }
-.essence-triggers { font-size: 7px; color: var(--grey-3); margin-top: 6px; }
+.essence-triggers { font-size: 8.7px; color: var(--grey-3); margin-top: 6px; } /* 设计规范 Caption 级:验收要求展示命中判据,需可读 */
 
 /* ═══════════ 第5轮:报告页检测可视化(face_maps 图层 / marks 叠加,新增,不动以上已验收样式) ═══════════ */
 /* 分类卡检测图复用 .ditem-img(左图右文、92×96 裁切);无检测图时(hidden)卡片退回文字占位 */
@@ -673,7 +673,7 @@ button { font-family: inherit; border: 0; background: none; cursor: pointer; }
 .rs { z-index: 50; }
 .rs-list { z-index: 50; }
 /* #4 无进展提示再上移(取景/拍摄区下方,引导 chips 上方) */
-.cam-nudge { bottom: 24%; }
+.cam-nudge { bottom: 17.5%; } /* 引导 chips(bottom 22.4%) 与快门之间 */
 /* #6 报告页头部:按 Figma 08 还原为内联白底顶栏(见报告页主区块),不再悬浮 */
 
 /* ═══════════ 第9轮:真机反馈 ═══════════ */