/* ============ 推文与海报篇 · 图解组件库 ============
   全片零图片：所有示例都是**按真实交付物的宽高比定形的画布** + 几何示意。
   沿用前两篇的坐标纪律——参考线一律写在 .pad 内，与内容共用同一百分比盒；
   需要出血到框边的靠 -500px 负值 + .cnv{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)}

.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)}
.lbl.s{font-size:1.5cqw;font-weight:700}

.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}
.vl.red,.hl.red{background:none;border-top:1px dashed;border-color:#B0413E}
.vl.red{border-top:0;border-left:1px dashed}

.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}

/* 主体块 */
.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.acc{border-color:var(--acc);background:rgba(11,124,116,.10)}
.obj.warn{border-color:#B0413E;background:rgba(176,65,62,.08)}
.obj.round{border-radius:50%}
/* 任意角度线段：视线动线用 */
.lead{position:absolute;height:2px;background:var(--acc);transform-origin:left center}

/* 两栏对照 */
.cmp{display:flex;gap:20px;width:100%;align-items:flex-start;justify-content:center}
.cmp>div{flex:1 1 0;min-width:0;display:flex;flex-direction:column;gap:8px;align-items:center}

/* ---------- 画布：一律按真实交付物比例 ---------- */
/* 宽度同时受"设计宽 / 父容器宽 / 高度上限×比例"三者约束，高度由 aspect-ratio 推出——
   两栏三栏并排时窄列不会把固定像素宽的框顶出页面，长图也不会把页面撑破。 */
.cnv{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);
  width:min(var(--w,100%),100%,calc(var(--hmax,540px) * var(--ar)));aspect-ratio:var(--ar);height:auto}
.cnv .pad{position:absolute;inset:8%}
.cnv.c34{--w:420px;--ar:3/4}      /* 3:4  海报 / 小红书封面 */
.cnv.c23{--w:373px;--ar:2/3}      /* 2:3  海报竖版 */
.cnv.cA{--w:396px;--ar:1/1.414}   /* A 系列 / 印刷 */
.cnv.c916{--w:315px;--ar:9/16}    /* 9:16 手机全屏 */
.cnv.c11{--w:440px;--ar:1}        /* 1:1  方图 / 次条封面 */
.cnv.c235{--w:700px;--ar:2.35}    /* 公众号首图 */
.cnv.c169{--w:640px;--ar:16/9}    /* 16:9 Banner */
.cnv.c43{--w:600px;--ar:4/3}      /* 4:3  横图 */
.cnv.clong{--w:250px;--ar:25/60}  /* 长图 / 条漫 */
.cnv.cff{width:100%;height:100%;aspect-ratio:auto}
/* 框下方标规格 */
.cvsz{font-size:10px;font-weight:800;letter-spacing:.08em;color:var(--muted);text-align:center;margin-top:-3px}
.cvsz b{color:var(--acc)}

/* ---------- 出血 / 裁切 / 安全边 ---------- */
.bleed{position:absolute;inset:0;background:#EDEAE5}
.trim{position:absolute;border:1.5px solid var(--ink);background:#fff}
.safe{position:absolute;border:1px dashed #B0413E}
.crop{position:absolute;width:11px;height:11px;border:0 solid var(--ink)}
.crop.tl{border-top-width:1.5px;border-left-width:1.5px}
.crop.tr{border-top-width:1.5px;border-right-width:1.5px}
.crop.bl{border-bottom-width:1.5px;border-left-width:1.5px}
.crop.br{border-bottom-width:1.5px;border-right-width:1.5px}

/* ---------- 层级阶梯：主/副/正文/细则 ---------- */
.hier{display:flex;flex-direction:column;gap:0;width:100%;padding:4px 0}
.hier .lv{display:flex;align-items:baseline;gap:12px;border-bottom:1px solid var(--rule);padding:9px 2px}
.hier .lv:last-child{border-bottom:0}
.hier .tx{font-weight:800;color:var(--ink);line-height:1;white-space:nowrap}
.hier .pt{flex:0 0 auto;font-size:10.5px;font-weight:800;color:var(--acc);font-variant-numeric:tabular-nums;letter-spacing:.04em}
.hier .no{flex:0 0 40px;font-size:10px;font-weight:800;color:var(--muted);letter-spacing:.08em}

/* ---------- 主 KV 三层 ---------- */
.kv3{display:flex;flex-direction:column;gap:9px;width:100%}
.kv3 .lay{display:flex;align-items:center;gap:12px;border:1.5px solid var(--ink);background:#fff;padding:10px 13px}
.kv3 .lay.acc{border-color:var(--acc);background:rgba(11,124,116,.07)}
.kv3 .lay .q{flex:0 0 auto;font-size:11px;font-weight:800;color:var(--acc);letter-spacing:.05em}
.kv3 .lay .t{font-size:14px;font-weight:800}
.kv3 .lay .d{font-size:11.5px;color:var(--muted);margin-left:auto;text-align:right}

/* ---------- 栅格 ---------- */
.gcols{position:absolute;inset:0;display:flex;gap:var(--g,2.4%);padding:0 var(--m,8%)}
.gcols i{flex:1 1 0;background:rgba(11,124,116,.09);border-left:1px solid rgba(11,124,116,.42);border-right:1px solid rgba(11,124,116,.42)}

/* ---------- 九宫格 / 朋友圈裁切 ---------- */
.nine{display:grid;gap:4px;width:100%}
.nine i{background:#EAE8E4;border:1px solid var(--rule);display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:800;color:var(--muted);font-style:normal}
.nine.n9{grid-template-columns:repeat(3,1fr)}
.nine.n9 i{aspect-ratio:1}
.nine.n4{grid-template-columns:repeat(3,1fr)}
.nine.n4 i{aspect-ratio:1}
.nine.n6{grid-template-columns:repeat(3,1fr)}
.nine.n6 i{aspect-ratio:1}

/* ---------- 平台容器（公众号 677 视宽） ---------- */
.phn{width:100%;max-width:330px;border:1.5px solid var(--ink);border-radius:22px;padding:10px 0;background:#fff;position:relative;overflow:hidden}
.phn .bar{height:20px;display:flex;align-items:center;justify-content:center;font-size:9px;color:var(--muted);letter-spacing:.06em}
.phn .body{padding:0 14px}
.phn .row{height:9px;background:#E4E1DC;margin:7px 0;border-radius:2px}
.phn .row.s{width:62%}
.phn .img{background:rgba(11,124,116,.14);border:1px dashed var(--acc);height:112px;display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:800;color:var(--acc);margin:9px 0}
.phn .img.edge2{margin-left:-14px;margin-right:-14px}

/* ---------- 规格表 ---------- */
.spec{width:100%;border-collapse:collapse;font-size:12px}
.spec th{text-align:left;font-size:10px;font-weight:800;letter-spacing:.1em;color:var(--muted);border-bottom:1.5px solid var(--ink);padding:6px 8px}
.spec td{border-bottom:1px solid var(--rule);padding:6px 8px;vertical-align:top;line-height:1.45}
.spec td.v{font-weight:800;font-variant-numeric:tabular-nums;color:var(--acc);white-space:nowrap}
.spec td.src{font-size:10px;color:var(--muted);white-space:nowrap}
.spec tr.bad td.v{color:#B0413E}

/* ---------- 冲突对照 ---------- */
.conf{display:flex;flex-direction:column;gap:0;width:100%}
.conf .row{display:flex;gap:14px;align-items:stretch;border-bottom:1px solid var(--rule);padding:9px 0}
.conf .row:last-child{border-bottom:0}
.conf .k{flex:0 0 118px;font-size:12px;font-weight:800}
.conf .a,.conf .b{flex:1 1 0;min-width:0;font-size:11.5px;line-height:1.5}
.conf .a b,.conf .b b{display:block;font-size:9.5px;letter-spacing:.1em;color:var(--muted);font-weight:800;margin-bottom:2px}
.conf .b{border-left:1px solid var(--rule);padding-left:14px}

/* ---------- 流程 ---------- */
.flow{display:flex;flex-direction:column;gap:0;width:100%}
.flow .st{display:flex;gap:14px;align-items:flex-start;padding:9px 0;border-bottom:1px solid var(--rule)}
.flow .st:last-child{border-bottom:0}
.flow .n{flex:0 0 30px;height:30px;border:1.5px solid var(--acc);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:800;color:var(--acc)}
.flow .h{font-size:14.5px;font-weight:800}
.flow .d{font-size:11.5px;color:var(--muted);line-height:1.55;margin-top:2px}

/* ---------- 手法网格（标题字 / 对齐 / 破格） ---------- */
.fx{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;width:100%}
.fx .cell{border:1px solid var(--rule);background:#fff;padding:9px;display:flex;flex-direction:column;gap:6px;align-items:center;justify-content:center;min-height:86px}
.fx .cell.on{border-color:var(--acc);border-width:1.5px;background:rgba(11,124,116,.045)}
.fx .nm{font-size:10px;font-weight:800;color:var(--muted);letter-spacing:.04em}
.fx .cell.on .nm{color:var(--acc)}

/* ---------- 检查清单 ---------- */
.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 46px;font-size:10px;font-weight:800;color:var(--acc);letter-spacing:.06em}
.cl .tx{flex:1}
.cl .bx{flex:0 0 14px;width:14px;height:14px;border:1.5px solid var(--ink);align-self:center}

/* ---------- 可切换：网格开 / 交付稿 ---------- */
.stripline{display:flex;flex-direction:column;gap:11px;align-items:center;width:100%;flex:1;justify-content:center}
.sw{display:flex;gap:0;border:1.5px solid var(--ink)}
.sw b{font-size:11px;font-weight:800;letter-spacing:.08em;padding:5px 14px;cursor:pointer;color:var(--muted)}
.sw b.on{background:var(--ink);color:#fff}