/* ============ 摄影篇 · 图解组件库 ============
   全片零图片：所有示例都是取景框 + 几何示意（机位/主体/光线/网格），
   沿用排版篇的坐标纪律——参考线一律写在 .pad 内，与内容共用同一百分比盒，
   需要出血到框边的靠 -500px 负值 + .fr{overflow:hidden} 裁切。
   ============================================== */

/* ---------- 取景框 ---------- */
.demo{flex:0 1 560px;display:flex;flex-direction:column;gap:11px;justify-content:center;min-width:0}
.demo.w7{flex-basis:700px}.demo.w9{flex-basis:900px}.demo.wf{flex:1 1 auto}
.dcap{font-size:12px;color:var(--muted);line-height:1.6;letter-spacing:.01em}
.dtag{font-size:10px;font-weight:800;letter-spacing:.16em;color:var(--acc)}

.fr{position:relative;background:#fff;border:1px solid var(--rule);overflow:hidden;
  container-type:inline-size;flex:0 0 auto;box-shadow:0 18px 40px -26px rgba(0,0,0,.32)}
.fr.f32{width:540px;height:360px}      /* 3:2 标准横向 */
.fr.f32s{width:420px;height:280px}     /* 两张并排用 */
.fr.f169{width:560px;height:315px}     /* 16:9 */
.fr.f43{width:480px;height:360px}      /* 4:3 */
.fr.f23{width:360px;height:540px}      /* 2:3 竖构图 */
.fr.f45{width:400px;height:500px}      /* 4:5 社媒竖图 */
.fr.f11{width:420px;height:420px}      /* 1:1 */
.fr.ff{width:100%;height:100%}
.fr .pad{position:absolute;inset:8%}

/* ---------- 框内基元 ---------- */
.blk{position:absolute}
.lbl{position:absolute;font-size:2.2cqw;font-weight:800;color:var(--acc);letter-spacing:.03em;font-variant-numeric:tabular-nums;white-space:nowrap}
.lbl.ink{color:var(--ink)}.lbl.mut{color:var(--muted)}.lbl.bl{color:var(--blue)}

.mx{position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .7s var(--ease) .5s}
.mx.on{opacity:1}
.vl{position:absolute;top:-500px;bottom:-500px;width:1px;background:var(--acc)}
.hl{position:absolute;left:-500px;right:-500px;height:1px;background:var(--acc)}
.vl.ink{width:2px;background:var(--ink)}.hl.ink{height:2px;background:var(--ink)}
.vl.bl,.hl.bl{background:var(--blue)}
.vl.dash,.hl.dash{background:none;border-top:1px dashed currentColor;color:var(--acc)}
.vl.dash{border-top:0;border-left:1px dashed currentColor}

/* 由元素自身左右缘生成通高竖线（栏宽/主体边界即线） */
.edge{position:absolute;display:inline-block;white-space:nowrap}
.edge::before,.edge::after{content:"";position:absolute;top:-500px;bottom:-500px;width:1px;background:var(--acc)}
.edge::before{left:0}.edge::after{right:0}
.edge.ink::before,.edge.ink::after{background:var(--ink);width:2px}

/* ---------- 场景几何件（抽象示意，非插画） ---------- */
/* 地平线 / 水平线：一条带，可倾斜 */
.hor{position:absolute;left:-10%;right:-10%;height:2px;background:var(--ink)}
.hor.thin{height:1px;background:var(--muted)}
/* 引导线：任意角度的线段 */
.lead{position:absolute;height:2px;background:var(--acc);transform-origin:left center}
.lead.thin{height:1px}
.lead.gray{background:var(--muted)}
/* 主体：矩形块 / 圆 / 竖条人形 */
.obj{position:absolute;border:1.5px solid var(--ink);background:rgba(18,18,18,.05)}
.obj.fill{background:var(--ink);border-color:var(--ink)}
.obj.soft{background:#EAE8E4;border-color:var(--rule)}
.obj.round{border-radius:50%}
.obj.acc{border-color:var(--acc);background:rgba(11,124,116,.10)}
.obj.acc.fill{background:var(--acc);border-color:var(--acc)}
/* 机位符号：三角形指向被摄体，rotate 即朝向 */
.cam{position:absolute;width:0;height:0;border-left:1.6cqw solid transparent;border-right:1.6cqw solid transparent;
  border-bottom:3cqw solid var(--ink);transform-origin:50% 100%}
.cam.acc{border-bottom-color:var(--acc)}
/* 光源符号 + 光路 */
.sun{position:absolute;border-radius:50%;background:var(--acc);box-shadow:0 0 0 .5cqw rgba(11,124,116,.18)}
.ray{position:absolute;height:1.5px;background:var(--acc);transform-origin:left center;opacity:.85}
/* 视场扇形：一个以机位为顶点的等腰三角形 */
.fov{position:absolute;width:0;height:0;transform-origin:50% 0}
/* 标注箭头/尺寸线 */
.dim{position:absolute;border-top:1px solid var(--muted)}
.dim::before,.dim::after{content:"";position:absolute;top:-3px;width:1px;height:7px;background:var(--muted)}
.dim::before{left:0}.dim::after{right:0}
.arrow{position:absolute;font-size:2.4cqw;color:var(--acc);font-weight:800;line-height:1}

/* ---------- 对照排布 ---------- */
.cmp,.band{display:flex;gap:18px;align-items:center;justify-content:center;flex:1;min-height:0}
.cmp>div,.band>figure{display:flex;flex-direction:column;gap:9px;align-items:flex-start;min-width:0;margin:0;text-align:left}
.band>figure>*,.cmp>div>*{max-width:100%}
.cmp .dcap,.band .dcap{font-size:11.5px;color:var(--muted);line-height:1.55;max-width:420px}

/* ---------- 网格线逐条画入 ---------- */
.slide.active .draw .vl{animation:drawline .5s var(--ease) backwards;transform-origin:top}
.slide.active .draw .hl{animation:drawlineX .5s var(--ease) backwards;transform-origin:left}
@keyframes drawline{from{transform:scaleY(0);opacity:0}to{transform:none;opacity:1}}
@keyframes drawlineX{from{transform:scaleX(0);opacity:0}to{transform:none;opacity:1}}

/* ---------- 交互开关（沿用排版篇的撤线检验） ---------- */
.stripline{display:flex;flex-direction:column;gap:10px;align-items:center}
.stripline .sw{display:flex;border:1px solid var(--ink);font-size:11px;font-weight:800;align-self:flex-start}
.stripline .sw b{padding:5px 12px;cursor:pointer;color:var(--ink2);transition:background .25s var(--ease),color .25s var(--ease)}
.stripline .sw b.on{background:var(--ink);color:#fff}
.stripline .fr .mx{opacity:1;transition:opacity .55s var(--ease)}
.stripline.off .fr .mx{opacity:0}

/* ---------- 参数条 / 档位表 ---------- */
.stav{display:flex;flex-direction:column;gap:10px;justify-content:center;flex:1;width:100%}
.stav .r{display:flex;align-items:center;gap:12px}
.stav .k{flex:0 0 96px;font-size:12px;font-weight:800;color:var(--ink2)}
.stav .track{flex:1;height:26px;position:relative;background:#EAE8E4}
.stav .track i{position:absolute;top:0;bottom:0;background:var(--ink)}
.stav .track i.acc{background:var(--acc)}
.stav .v{flex:0 0 92px;font-size:12px;font-weight:800;color:var(--acc);text-align:right;font-variant-numeric:tabular-nums}
.stav .v.bad{color:var(--muted)}

/* 直方图：等距柱 */
.histo{display:flex;align-items:flex-end;gap:2px;height:150px;width:100%;border-left:1px solid var(--ink);border-bottom:1px solid var(--ink)}
.histo i{flex:1;background:var(--ink);opacity:.82}
.histo i.acc{background:var(--acc)}
.histo i.cut{background:#B0413E}

/* 角度盘：顶视光位 */
.dial{position:relative;width:340px;height:340px;border:1px solid var(--rule);border-radius:50%;background:#fff;flex:0 0 auto}
.dial .tick{position:absolute;left:50%;top:50%;width:1px;height:170px;transform-origin:50% 0}
.dial .tick:after{content:"";position:absolute;top:0;left:0;width:1px;height:8px;background:var(--rule)}
.dial .tick.major:after{height:14px;background:var(--ink)}
.dial .c{position:absolute;left:50%;top:50%;width:64px;height:64px;margin:-32px 0 0 -32px;border:1.5px solid var(--ink);
  display:grid;place-items:center;font-size:11px;font-weight:800;background:#fff}
.dial .spoke{position:absolute;left:50%;top:50%;height:2px;background:var(--acc);transform-origin:0 50%}
.dial .at{position:absolute;font-size:11px;font-weight:800;color:var(--acc);white-space:nowrap}

/* 光位/机位小卡 */
.pcard{background:var(--card);border:1px solid var(--rule);padding:18px 20px;width:100%;display:flex;flex-direction:column;gap:6px}
.pcard .meta{font-size:11px;color:var(--muted);letter-spacing:.04em;margin-top:6px;line-height:1.5}
.pcard .meta b{color:var(--acc);font-weight:800}
.pcard.no{border-top:3px solid var(--muted)}
.pcard.yes{border-top:3px solid var(--acc)}

/* 清单格（构件菜单式） */
.cgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--rule);border:1px solid var(--rule);width:100%}
.cgrid>div{background:#fff;padding:14px;display:flex;flex-direction:column;gap:9px;justify-content:space-between;min-height:132px}
.cgrid .cn{font-size:11px;font-weight:800;letter-spacing:.04em}
.cgrid .cd{font-size:10px;color:var(--muted);line-height:1.5}
.cbox{flex:1;display:flex;align-items:center;justify-content:center;min-height:44px;position:relative}

/* ---------- 构图法小示意（纯几何，禁插画） ---------- */
.k-third,.k-diag,.k-frame,.k-lead,.k-blank,.k-persp{position:relative;width:92%;height:64px;border:1px solid var(--ink);background:#fff}
.k-third i,.k-diag i,.k-frame i,.k-lead i,.k-blank i,.k-persp i,
.k-third b,.k-diag b,.k-frame b,.k-lead b,.k-blank b,.k-persp b{position:absolute}
/* 三分 */
.k-third i{top:0;bottom:0;width:1px;background:var(--acc)}
.k-third i:nth-child(1){left:33.3%}
.k-third i:nth-child(2){left:66.6%}
.k-third i:nth-child(3),.k-third i:nth-child(4){left:0;right:0;bottom:auto;height:1px}
.k-third i:nth-child(3){top:33.3%}
.k-third i:nth-child(4){top:66.6%}
.k-third b{width:10px;height:10px;border-radius:50%;background:var(--acc);left:calc(66.6% - 5px);top:calc(33.3% - 5px)}
/* 对角线 */
.k-diag{background:linear-gradient(to top right,transparent 49.2%,var(--acc) 49.2%,var(--acc) 50.8%,transparent 50.8%)}
.k-diag b{width:11px;height:11px;border-radius:50%;background:var(--ink);left:62%;top:16%}
/* 框架 / 遮罩 */
.k-frame b{left:20%;right:20%;top:16%;bottom:16%;border:1.5px solid var(--acc);background:none}
.k-frame i{width:11px;height:11px;border-radius:50%;background:var(--ink);left:calc(50% - 5.5px);top:calc(50% - 5.5px)}
/* 引导线汇聚 */
.k-lead i{top:0;bottom:0;width:1px;background:var(--acc);transform-origin:50% 100%}
.k-lead i:nth-child(1){left:16%;transform:rotate(15deg)}
.k-lead i:nth-child(2){right:16%;transform:rotate(-15deg)}
.k-lead b{width:11px;height:11px;border-radius:50%;background:var(--acc);left:calc(50% - 5.5px);top:2px}
/* 留白 ≤30% */
.k-blank i{left:30%;top:0;bottom:0;width:1px;border-left:1px dashed var(--muted)}
.k-blank b{left:8%;bottom:12%;width:22%;height:40%;background:var(--ink)}
/* 三点透视：中轴线 + 视平线 + 仰收的主体 */
.k-persp i{background:var(--acc)}
.k-persp i:nth-child(1){left:50%;top:0;bottom:0;width:1px}
.k-persp i:nth-child(2){top:62%;left:0;right:0;height:1px}
.k-persp b{left:calc(50% - 12px);bottom:0;width:24px;height:78%;background:var(--ink);
  clip-path:polygon(0 100%,100% 100%,62% 0,38% 0)}

/* ---------- 痛点诊断小示意 ---------- */
/* ---------- 六格实拍：全部出自同一份图文教程，图上的黄色虚线是原帖自己画的 ----------
   一律 object-fit:contain——这些图带着原帖的标注线，裁掉任何一边都会把要讲的东西裁没。 */
.pgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;width:100%}
.pgrid figure{margin:0;min-width:0;display:flex;flex-direction:column;gap:6px}
.pgrid .im{width:100%;aspect-ratio:1/1;overflow:hidden;border:1px solid var(--rule);background:#EDEAE5}
.pgrid .im img{display:block;width:100%;height:100%;object-fit:contain}
.pgrid figcaption{display:flex;flex-direction:column;gap:2px}
.pgrid .m{font-size:11px;font-weight:800;letter-spacing:.02em}
.pgrid .d{font-size:10px;color:var(--muted);line-height:1.45}
.pgrid .d:before{content:"缺点";color:#B0413E;font-weight:800;margin-right:5px;
  border:1px solid rgba(176,65,62,.45);padding:0 3px;font-size:8.5px;letter-spacing:.06em}

/* ---------- 仿真缩略照片 ----------
   不是插画，是把六个"毛病"画成一眼认得出的画面：有天空、有地面、有地平线、
   有人。抽象方块读不出问题，缩略照片能——看的人先认出"这就是那张照片"，再认出毛病。 */
.sc{position:relative;width:100%;height:92px;overflow:hidden;border:1px solid var(--rule);
  background:linear-gradient(#D9E4EA 0%,#E4EAEC 51%,#CFC8BC 51%,#C2BAAC 100%)}
.sc .hz{position:absolute;left:-12%;right:-12%;top:51%;height:1px;background:rgba(20,20,20,.32)}
.sc .sun{position:absolute;width:13px;height:13px;border-radius:50%;background:#F6E7BC;
  box-shadow:0 0 0 4px rgba(246,231,188,.34)}
/* 人：头 + 躯干 + 两条腿，全部用绝对定位拼，位置即构图 */
.sc .p{position:absolute;width:22px;height:56px;bottom:16%}
.sc .p i{position:absolute;display:block;background:#1A1A1A}
.sc .p .hd{left:50%;margin-left:-5px;top:0;width:10px;height:10px;border-radius:50%}
.sc .p .bd{left:50%;margin-left:-7px;top:9px;width:14px;height:23px;border-radius:4px 4px 1px 1px}
.sc .p .la{left:50%;margin-left:-7px;top:31px;width:6px;height:25px}
.sc .p .lb{left:50%;margin-left:1px;top:31px;width:6px;height:25px}
/* 眼窝阴影：正午顶光的标志性后果 */
.sc .p .rk{left:50%;margin-left:-5px;top:4px;width:10px;height:3px;background:#000;opacity:.85;border-radius:1px}
/* 脚下短硬影：顶光下影子几乎不拉长 */
.sc .sh{position:absolute;width:26px;height:5px;border-radius:50%;background:rgba(0,0,0,.42)}
/* 背景杂物 */
.sc .x{position:absolute;background:#B9B1A4;border:1px solid rgba(0,0,0,.14)}
.sc .x.tall{background:#AFA79A}
/* 裁切线 */
.sc .cut{position:absolute;left:0;right:0;height:0;border-top:1.5px dashed #B0413E}
.sc .cut:after{content:"裁切边";position:absolute;right:3px;bottom:2px;font-size:7px;font-weight:800;color:#B0413E;letter-spacing:.04em}
/* 参考线（只在需要点破的那一格出现） */
.sc .gl{position:absolute;top:0;bottom:0;left:50%;width:1px;background:var(--acc);opacity:.75}
/* ① 主体钉在正中 */
.sc.v1 .p{left:50%;margin-left:-11px}
/* ② 站着不动拍：地平线正好压在脖子上＝机位＝眼睛高度 */
.sc.v2 .p{left:50%;margin-left:-11px}
.sc.v2 .hz{top:33%}
/* ③ 正午硬光：太阳在正上方、眼窝发黑、影子缩在脚下 */
.sc.v3 .sun{left:50%;margin-left:-6.5px;top:5px}
.sc.v3 .p{left:50%;margin-left:-11px;bottom:19%}
.sc.v3 .sh{left:50%;margin-left:-13px;bottom:17%}
/* ④ 背景没清：主体对，但后面全是抢东西的东西 */
.sc.v4 .p{left:20%;bottom:15%}
.sc.v4 .x1{left:44%;top:26%;width:15%;height:34%}
.sc.v4 .x2{left:62%;top:38%;width:12%;height:40%}
.sc.v4 .x3{left:78%;top:30%;width:16%;height:46%}
.sc.v4 .x4{left:33%;top:44%;width:9%;height:32%}
.sc.v4 .x5{left:55%;top:52%;width:10%;height:26%}
/* ⑤ 地平线歪：人是正的，线是歪的——这才是"拍歪"而不是"对角线构图" */
.sc.v5 .p{left:56%;bottom:15%}
.sc.v5 .hz{top:51%;transform:rotate(7deg)}
/* ⑥ 切在关节上：裁切线正好压在膝盖 */
.sc.v6 .p{left:50%;margin-left:-11px;bottom:-16px}
.sc.v6 .cut{bottom:0}
/* ---------- 引导线 / 前景 / 摆姿 小示意（L3） ---------- */
.l-road,.l-repeat,.l-shadow,.l-dead,.l-cut,.l-look,
.l-f1,.l-f2,.l-f3,.l-f4,.l-f5,.l-f6,
.tri,.wp,.wp-pick,.wp-gray,.wp-dead{position:relative;width:92%;height:64px;border:1px solid var(--ink);background:#fff;overflow:hidden}
.l-road i,.l-repeat i,.l-shadow i,.l-dead i,.l-cut i,.l-look i,
.l-f1 i,.l-f2 i,.l-f3 i,.l-f4 i,.l-f5 i,.l-f6 i,
.tri i,.wp i,.wp-pick i,.wp-gray i,.wp-dead i,
.l-road b,.l-repeat b,.l-shadow b,.l-dead b,.l-cut b,.l-look b,
.l-f1 b,.l-f2 b,.l-f3 b,.l-f4 b,.l-f5 b,.l-f6 b,
.tri b,.wp b,.wp-pick b,.wp-gray b,.wp-dead b{position:absolute}
/* 引导线四式 + 两反例 */
.l-road i{bottom:0;width:1.5px;background:var(--acc);transform-origin:50% 100%}
.l-road i:nth-child(1){left:18%;height:62%;transform:rotate(17deg)}
.l-road i:nth-child(2){right:18%;height:62%;transform:rotate(-17deg)}
.l-road b{left:calc(50% - 7px);top:6px;width:14px;height:14px;border-radius:50%;background:var(--ink)}
.l-repeat i{bottom:6px;width:9px;height:9px;border-radius:50%;background:var(--acc)}
.l-repeat i:nth-child(1){left:8%}.l-repeat i:nth-child(2){left:22%;bottom:14px}
.l-repeat i:nth-child(3){left:36%;bottom:22px}.l-repeat i:nth-child(4){left:50%;bottom:30px}
.l-repeat i:nth-child(5){left:64%;bottom:38px}.l-repeat i:nth-child(6){left:78%;bottom:46px}
.l-shadow i{left:-10%;top:14%;width:130%;height:22px;background:var(--acc);opacity:.3;transform:rotate(-14deg)}
.l-shadow b{left:56%;top:22px;width:16px;height:26px;background:var(--ink)}
.l-dead i{bottom:0;left:44%;width:1.5px;height:70%;background:var(--acc);transform:rotate(9deg)}
.l-dead:after{content:"?";position:absolute;right:8px;top:4px;font-size:15px;font-weight:800;color:var(--muted)}
.l-cut i{bottom:0;left:10%;width:1.5px;height:100%;background:var(--acc);transform:rotate(24deg);transform-origin:50% 100%}
.l-cut b{left:46%;top:12px;width:22px;height:44px;background:var(--ink)}
.l-look b{left:16%;top:20px;width:22px;height:26px;background:var(--ink)}
.l-look i{left:44%;top:30px;right:8%;height:1px;border-top:1.5px dashed var(--acc)}
/* 前景四式 */
.l-f1 b{left:58%;top:14px;width:18px;height:38px;background:var(--ink)}
.l-f1 i{left:12%;top:20px;width:26px;height:26px;border-radius:50%;background:var(--acc);opacity:.35}
.l-f2 b{left:50%;top:50%;transform:translate(-50%,-50%);width:16px;height:22px;background:var(--ink)}
.l-f2 i{left:16%;right:16%;top:10px;bottom:10px;border:2px solid var(--acc);background:none}
.l-f3 b{left:58%;top:14px;width:18px;height:38px;background:var(--ink)}
.l-f3 i{left:-6%;bottom:-14px;width:46%;height:52px;border-radius:50%;background:var(--acc);opacity:.5;filter:blur(6px)}
.l-f4 b{left:56%;top:16px;width:18px;height:36px;background:var(--ink)}
.l-f4 i{left:0;right:0;top:0;bottom:0;background:repeating-linear-gradient(0deg,rgba(11,124,116,.22) 0 2px,transparent 2px 9px)}
.l-f5 b{left:52%;top:18px;width:14px;height:28px;background:var(--ink)}
.l-f5 i{left:6%;bottom:6px;width:44%;height:56px;background:var(--acc);opacity:.9}
.l-f6 b{left:60%;top:16px;width:16px;height:34px;background:var(--ink)}
.l-f6 i{left:10%;bottom:8px;width:30%;height:44px;border-radius:50%;background:var(--acc);opacity:.6;filter:blur(3px)}
/* 三角形摆姿：i＝人体块，b＝三角线框 */
.tri b{left:50%;top:50%;transform:translate(-50%,-50%);width:60%;height:70%;
  background:var(--acc);clip-path:polygon(50% 0,100% 100%,0 100%);opacity:.16}
.tri i{left:calc(50% - 8px);top:14px;width:16px;height:16px;border-radius:50%;background:var(--ink)}
.tri.t-b b{clip-path:polygon(0 0,100% 0,50% 100%)}
.tri.t-c b{clip-path:polygon(0 100%,100% 100%,78% 0);opacity:.2}
.tri.t-d b{clip-path:polygon(0 100%,100% 62%,58% 0)}
.tri.t-e b{clip-path:polygon(12% 100%,88% 100%,64% 8%)}
.tri.t-f b{clip-path:polygon(0 100%,100% 72%,42% 0)}
/* 白平衡策略 */
.wp b,.wp-pick b,.wp-gray b,.wp-dead b{left:50%;top:50%;transform:translate(-50%,-50%);
  font-size:16px;font-weight:800;color:#fff;position:absolute}
.wp.b1,.wp.b2,.wp.b3{display:grid;place-items:center}
.wp b,.wp-pick b,.wp-gray b,.wp-dead b{position:static;transform:none;font-size:15px}
.wp.b1{background:var(--acc)}.wp.b2{background:var(--ink)}.wp.b3{background:#5A6A7A}
.wp-pick i{left:20%;top:26%;width:60%;height:20%;background:#EAE8E4;border:1px solid var(--rule)}
.wp-pick b{position:absolute;left:50%;top:70px;transform:translateX(-50%);color:#fff;background:var(--acc);padding:2px 8px;font-size:11px}
.wp-gray{background:#9A9A9A}
.wp-gray b{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);color:#fff}
.wp-dead{background:linear-gradient(90deg,#2A2A2A,#5A5A5A)}
.wp-dead i{left:0;right:0;top:0;bottom:0;background:repeating-linear-gradient(45deg,rgba(176,65,62,.5) 0 6px,transparent 6px 14px)}
.wp-dead b{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);color:#fff}

/* ---------- 名作对照页：一份坐标，两张板 ---------- */
.plates{width:100%;flex:1;display:flex;flex-direction:column;gap:16px;justify-content:center;align-items:center}
.pcap{max-width:820px}
.pair{display:flex;gap:16px;align-items:flex-start;margin:0;width:100%;--hmax:540px}
.pl{flex:1 1 0;min-width:0;margin:0;display:flex;flex-direction:column;gap:7px}
/* 宽板按列宽定形；竖长的原片（ar<0.7）改按高度定形，否则一条 922px 高的塔会顶穿页面 */
.ph,.dg{width:min(100%,calc(var(--hmax) * var(--ar,1.5)));margin-inline:auto;
  aspect-ratio:var(--ar,1.5);position:relative;overflow:hidden;background:#fff;border:1px solid var(--rule)}
.ph img{display:block;width:100%;height:100%;object-fit:fill}
.dg{background:#FAF9F7}
.g-svg{position:absolute;inset:0;width:100%;height:100%}
.g-svg line,.g-svg rect{stroke:var(--acc);stroke-width:1;vector-effect:non-scaling-stroke;fill:none}
.g-svg .hl-g line,.g-svg .hl-g rect{stroke:#fff;stroke-width:3.4;opacity:.92}
.g-pt{position:absolute;width:13px;height:13px;margin:-6.5px 0 0 -6.5px;border-radius:50%;border:1.5px solid var(--acc);background:rgba(11,124,116,.16)}
.g-box{position:absolute;border:1.5px solid var(--acc)}
.g-band{position:absolute;background:rgba(11,124,116,.10);border:1px dashed var(--acc)}
/* 照片那一侧：几何要压得住影调，但不放文字（小字落在照片上读不出） */
.ph .g-pt,.ph .g-box{box-shadow:0 0 0 1.5px rgba(255,255,255,.9)}
.ph .g-band{background:rgba(11,124,116,.07)}
.g-lb{position:absolute;font-size:9.5px;font-weight:800;color:var(--acc);letter-spacing:.03em;
  white-space:normal;max-width:150px;background:rgba(255,255,255,.85);padding:1px 3px;line-height:1.3}
.g-lb.c2{transform:translate(-50%,-50%)}
.dg-tag{position:absolute;right:6px;bottom:5px;font-size:9px;font-weight:800;color:var(--muted);letter-spacing:.1em}
.pl figcaption{font-size:10.5px;line-height:1.5;color:var(--ink2)}
.pl figcaption b{font-weight:800;color:var(--ink)}
.pl figcaption .lic{display:block;color:var(--muted);font-size:9.5px;margin-top:2px}
.pl figcaption.mut{color:var(--muted)}

/* ---------- LR 配方表 ---------- */
.recipe{width:100%;flex:1;display:flex;flex-direction:column;gap:9px;justify-content:center}
.rc-head{display:flex;align-items:baseline;gap:12px;border-bottom:2px solid var(--ink);padding-bottom:8px}
.rc-head b{font-size:20px;font-weight:800}
.rc-head span{font-size:11px;color:var(--muted);margin-left:auto}
.rc-p{display:flex;gap:12px;padding:8px 0;border-bottom:1px solid var(--rule)}
.rc-k{flex:0 0 96px;font-size:12px;font-weight:800;color:var(--acc);letter-spacing:.04em;padding-top:2px}
.rc-v{flex:1;display:flex;flex-direction:column;gap:5px}
.rc-r{display:flex;align-items:baseline;gap:12px;font-size:12px}
.rc-r span{flex:0 0 74px;color:var(--muted)}
.rc-r b{flex:0 0 300px;font-variant-numeric:tabular-nums}
.rc-r i{flex:1;font-style:normal;color:var(--ink2)}
.rc-r i b{color:var(--acc);font-weight:800}
.recipe .dcap{margin-top:8px}

/* ---------- 摆姿破面 / 破线 ---------- */
.pose{position:absolute;inset:10%}
.pose i{position:absolute;background:var(--ink)}
.pose .hd{width:22px;height:22px;border-radius:50%;left:calc(50% - 11px)}
.pose .th{width:30px;height:52px;left:calc(50% - 15px);border-radius:4px}
.pose .lg{width:26px;height:52px;left:calc(50% - 13px);border-radius:4px}
.pose.p-0 .hd{top:0}.pose.p-0 .th{top:24px}.pose.p-0 .lg{top:78px}
.pose.p-0:after{content:"";position:absolute;left:calc(50% - 1px);top:0;bottom:0;width:2px;background:#B0413E;opacity:.5}
.pose.p-1 .hd{top:0}.pose.p-1 .th{top:24px}
.pose.p-1 .lg{top:78px;left:calc(50% + 2px);width:24px;transform:rotate(14deg)}
.pose.p-1:after{content:"";position:absolute;left:50%;top:6%;width:1.5px;height:88%;background:var(--acc);
  transform:rotate(-9deg);transform-origin:50% 0;opacity:.7}
.pose.p-2 .hd{top:2%;left:calc(50% - 20px);transform:rotate(-12deg)}
.pose.p-2 .th{top:26px}
.pose.p-2 .lg{top:78px;left:calc(50% - 15px);height:56px}
.pose.p-2:after{content:"";position:absolute;left:calc(50% - 22px);top:4%;width:2px;height:92%;background:var(--acc);
  transform:rotate(6deg);transform-origin:50% 0;opacity:.7}

/* ---------- 检查清单 ---------- */
.chkl{display:flex;flex-direction:column;width:100%;flex:1;justify-content:center}
.cl{display:flex;align-items:baseline;gap:12px;padding:4.5px 0;border-bottom:1px solid var(--rule);font-size:12.5px}
.cl .lv{flex:0 0 34px;font-size:10px;font-weight:800;color:var(--acc);letter-spacing:.08em}
.cl .tx{flex:1}
.cl .bx{flex:0 0 14px;width:14px;height:14px;border:1.5px solid var(--ink);align-self:center}