/* ═══════════════════════════════════════════════════════════════════════
   清阳站点 v4 —— 首页／场景页／内容页（2026-10-13 清阳拍板方向）
   底色 米白 #FAF7F0 ｜ 主色 墨青 #17403F ｜ 金 #7d611f（可读金）
   字体 QY Sans（思源黑体，正文）＋ QY Song（思源宋体，金句/书名）
   只服务新版面；老页面继续用 site-v3.css + layout-system.css，互不影响。
   ═══════════════════════════════════════════════════════════════════════ */
:root{
  --bg:#FAF7F0; --ink:#17403F; --body:#1A1A1A; --gold:#7d611f;
  /* 2026-10-14 实测：.52 的 faint 在米白底上只有 2.84:1（小字要 ≥4.5），
     而它被用在元信息、占位符、存图/复制按钮上——都是要读的字。
     .70 → 4.53:1 ✅，muted 同步提到 .82 → 6.35:1 ✅，两者仍差一档 */
  --muted:rgba(23,64,63,.82); --faint:rgba(23,64,63,.70);
  --hair:rgba(23,64,63,.13); --hair2:rgba(23,64,63,.22);
  --s1:8px; --s2:16px; --s3:32px; --s4:64px;
  /* ── 字号体系（2026-10-13 定，唯一源）────────────────────────────────
     规范：全站所有 font-size 只能引用下面这些变量，不许再写死数值。
     原来 82 处声明散落 23 个取值，且同一元素在不同规则里给不同值
     （阅读页正文 17/17.5、.ap-pull 17/18.5、主标题 29/25/23 三档断点）。 */
  --fs-2xs:12.5px;   /* 微标签：存图角标、分类计数、目录编号 */
  --fs-xs:13.5px;    /* 元信息：时间、形态、页脚、说明小字 */
  --fs-s:14.5px;     /* 小字正文：列表摘要、备注、脚注 */
  --fs-m:15.5px;     /* 导航与控件：左栏分类、按钮、输入框、场景条 */
  --fs-base:16.5px;  /* 正文基准：列表标题、条目正文 */
  --fs-lg:18px;      /* 长文正文：阅读页、认识清阳 */
  --fs-xl:19px;      /* 强调：引导段、引用块、加微标题 */
  --fs-2xl:21px;     /* 区块标题：栏目小标题、口号 */
  /* 页面主标题 / 门面主标题：连续缩放，手机上自动变小，不再靠断点写三档 */
  --fs-3xl:clamp(23px,2.1vw + 15.8px,29px);
  --fs-4xl:clamp(33px,2.1vw + 15.8px,46px);
  --pad:24px; --rail:172px; --railgap:56px;
  --font:'QY Sans','Noto Sans SC',-apple-system,BlinkMacSystemFont,'PingFang SC','Microsoft YaHei',system-ui,sans-serif;
  --song:'QY Song','Noto Serif SC','Songti SC',serif;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{scrollbar-gutter:stable;-webkit-text-size-adjust:100% !important;text-size-adjust:100% !important;background:var(--bg)}
body{margin:0;background:var(--bg);color:var(--body);font-family:var(--font);
  font-size:var(--fs-base);line-height:1.75;letter-spacing:.01em;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.wxshare{position:absolute;left:-9999px;top:0;width:300px;height:300px;opacity:0;pointer-events:none}
.wrap{max-width:1240px;margin-left:auto;margin-right:auto;padding-left:var(--pad);padding-right:var(--pad)}

/* ── 刊头 ───────────────────────────────────────────────────────────── */
.mast{border-bottom:1px solid var(--hair);background:var(--bg);position:relative;z-index:20}
.mast .in{max-width:1240px;margin:0 auto;padding:0 var(--pad);
  display:flex;align-items:center;gap:var(--s2);min-height:74px}
.lockup{display:flex;align-items:center;gap:12px;margin-right:auto}
.mklogo img{width:38px;height:38px;display:block}
.lockup>span:last-child{display:block}
.mk{display:block;font-size:var(--fs-lg);font-weight:600;color:var(--ink);margin:0;line-height:1.15;letter-spacing:.02em}
.sl{display:block;font-size:var(--fs-xs);color:var(--muted);margin:3px 0 0;line-height:1.15;letter-spacing:.01em}
.tools{display:flex;align-items:center;gap:16px;flex-wrap:nowrap}
.scene{position:relative;flex:0 0 auto}
.scene>b{font-size:var(--fs-m);color:var(--ink);cursor:pointer;display:inline-flex;align-items:center;gap:8px;white-space:nowrap;height:42px;padding:0 16px;border:1px solid var(--hair2);border-radius:14px;background:rgba(255,255,255,.55)}
.scene>b i{font-style:normal;font-size:var(--fs-2xs);color:var(--faint);transform:translateY(1px)}
.panel{position:absolute;right:0;top:calc(100% + 4px);background:#fff;border:1px solid var(--hair2);
  min-width:150px;display:none;box-shadow:0 6px 26px rgba(23,64,63,.09)}
.panel.on{display:block}
.panel a{display:block;padding:12px 20px;font-size:var(--fs-m);color:var(--ink);border-bottom:1px solid var(--hair)}
.panel a:last-child{border-bottom:0}
.panel a[aria-current]::after{content:'✓';float:right;color:var(--gold);font-size:var(--fs-xs)}
.search{display:flex;align-items:center;gap:8px;border:1px solid var(--hair2);background:#fff;
  padding:0 16px;height:42px;min-width:264px;border-radius:14px}   /* 与右侧场景控件同一圆角，两者才算一组工具 */
.search svg{width:15px;height:15px;flex:0 0 auto;stroke:var(--faint);fill:none;stroke-width:1.6}
.search input{border:0;outline:0;background:transparent;font:inherit;font-size:var(--fs-m);color:var(--ink);
  width:100%;padding:0}
.search input::placeholder{color:var(--faint)}

/* ── 主体骨架 ───────────────────────────────────────────────────────── */
main{padding:var(--s3) 0 0}
.shell{display:grid;grid-template-columns:var(--rail) minmax(0,1fr);column-gap:var(--railgap);align-items:start}
.rail{position:sticky;top:24px}
.rail h2{font-size:var(--fs-xs);font-weight:400;color:var(--faint);letter-spacing:.2em;margin:0 0 16px}
.cats{list-style:none;margin:0;padding:0}
.cats li{margin:0}
.cats a{display:inline-block;padding:8px 0;font-size:var(--fs-m);color:var(--muted);border-bottom:1px solid transparent;
  transition:color .15s ease,border-color .15s ease}
.cats a:hover{color:var(--ink)}
.cats a:hover,.cats a[aria-current]{border-bottom-color:var(--hair2)}
.cats a[aria-current]{color:var(--ink);font-weight:600;border-bottom-color:var(--ink)}
.cats a[aria-current] span{color:var(--ink)}
.cats a:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:2px}
/* 2026-10-14 清阳：7 条间距保持一致，不做分组 */
.cats li.nav-tool,.cats li.nav-about{margin-top:0}
.cats a span{float:none;display:inline-block;margin-left:8px;font-size:var(--fs-xs);color:var(--faint);
  font-weight:400;vertical-align:1px}
.head{padding-bottom:var(--s2);border-bottom:1px solid var(--hair2);display:flex;
  align-items:baseline;gap:12px}
.head h1{font-size:var(--fs-2xl);font-weight:600;color:var(--ink);margin:0;letter-spacing:.02em}
.head em{font-style:normal;font-size:var(--fs-xs);color:var(--faint)}
.list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:48px;align-content:start;
  margin:0;padding:0;list-style:none}   /* 按行排：点分类时条目的左右位置不会串栏 */
.list.single{grid-template-columns:minmax(0,1fr);max-width:700px}
.list li{break-inside:avoid;border-bottom:1px solid var(--hair)}
.list a,.list .row{display:grid;grid-template-columns:44px minmax(0,1fr);column-gap:20px;padding:24px 0 24px}
/* 2026-10-14 清阳：整站全是文字堆叠 → 列表条目加一列金色编号形成节奏，留白也给足 */
.list .row .ix{grid-column:1;grid-row:1/span 3;font-size:var(--fs-2xs);color:var(--gold);
  letter-spacing:.1em;padding-top:8px;font-variant-numeric:tabular-nums}
.list .row .t,.list .row .d,.list .row .m{grid-column:2}
/* 2026-10-14 巡检：最长标题 62 字会占三行，列表里统一限两行；复制按钮仍给全文 */
.list .row .t{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.list .row .t.d1,.list .row .t.clamp2{display:-webkit-box}
/* 2026-10-14 清阳：语录金句的标题放三行，两行显示不全（复制按钮仍给全文） */
.list li.li-act .row .t{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
/* 手机屏一行约 17 字，三行放不下长金句 → 手机端给四行 */
@media (max-width:900px){.list li.li-act .row .t{-webkit-line-clamp:4}}
.list .t{display:block;font-size:var(--fs-lg);line-height:1.55;color:var(--ink)}
/* 2026-10-14：标题原来和摘要只差 2px（16.5 / 14.5＝1.14 倍，看不出层级）→ 标题升到 --fs-lg(18)＝1.24 倍；
   文章/案例/对话的标题再给真字重 600。金句是整段引文，保持 400、不用粗体压。 */
.list a .t{font-weight:600}
/* 2026-10-15 清阳：「语录金句我展示的字有点大了，和其他页面不一致」——
   金句不是标题，是整段引文：原来套的是列表标题档 --fs-lg(18px)，整屏看着比别的页大一档。
   改为站内「条目正文／引用」档 --fs-base(16.5px)（与 .read .body p.q 引用块、.more a 同档），
   字重仍保持 400（不用粗体压整段），行距 1.75（原来是标题用的 1.55，正文要松一点）。
   只作用于金句行（li.li-act）；文章/案例/对话的标题仍是 18px/600。 */
.list li.li-act .row .t{font-size:var(--fs-base);line-height:1.75}
.list .d{display:block;font-size:var(--fs-s);line-height:1.72;color:rgba(23,64,63,.78);margin-top:8px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.list .m{display:block;font-size:var(--fs-2xs);color:var(--faint);margin-top:8px;letter-spacing:.04em}
.list a:hover .t{color:var(--gold)}
.list .dlm{display:inline-block;margin-left:8px;font-family:var(--font);font-size:var(--fs-2xs);font-weight:400;
  color:var(--faint);border:1px solid var(--hair);border-radius:999px;padding:1px 8px;vertical-align:2px;letter-spacing:.04em}
/* 2026-10-14 复核：摘要本来就被 -webkit-line-clamp 截两行并自动带省略号，
   实测 text-wrap:pretty/balance 在这种盒子上不生效（删掉，避免写成「能治孤行」的假规则） */
.list a:hover .dlm{color:var(--gold);border-color:var(--gold)}
/* 2026-10-14 清阳：语录金句条目右侧两个动作——存图／复制 */
.list li.li-act{display:flex;align-items:center;gap:16px}
.list li.li-act>.row{flex:1 1 auto;min-width:0}
.list .acts{flex:0 0 auto;display:inline-flex;flex-direction:column;align-items:stretch;gap:8px}
.list .acts .act{text-align:center}
.list .acts .act{display:inline-block;padding:4px 12px;border:1px solid var(--hair);border-radius:999px;
  background:transparent;color:var(--faint);font-family:var(--font);font-size:var(--fs-2xs);line-height:1.7;
  letter-spacing:.04em;cursor:pointer;text-decoration:none}
.list .acts .act:hover{color:var(--gold);border-color:var(--gold)}
@media (max-width:640px){
  .wxcopy{padding:12px 20px}
  .list a,.list .row{grid-template-columns:34px minmax(0,1fr);column-gap:12px;padding:20px 0 20px}
  .list .row .ix{padding-top:8px}
  .list li.li-act{flex-wrap:wrap;gap:0}
  .list li.li-act>.row{flex:1 1 100%}
  /* 2026-10-14 实测（393 宽）：按钮换行后贴在行左缘 x=20，而正文在 x=66 → 多出一条错位的对齐线 */
  .list li.li-act>.acts{margin-left:46px}
  /* 2026-10-14 实测（393）：竖排两个按钮占 103px，单条金句总高 285px → 手机上改横排，一条省 56px */
  .list li.li-act>.acts{flex-direction:row;gap:12px}  /* 46＝34px 序号列＋12px 列间距，是对齐用的计算值，不参与 4 的倍数归整 */
  .list .acts{width:auto;padding:0}
  .list .acts .act{padding:12px 16px}
  /* 2026-10-15 清阳：「手机端呈现不规范不美观」——金句条目原来是「正文／金句标签／按钮」
     三层各占一行，标签那行右侧整片空着，标签与按钮之间还夹 20px 空隙（实测 393 下单条 234px）。
     改成两行栅格：①正文（跨满）②「金句」标签靠左 + 存图/复制靠右，同一行。
     .row 用 display:contents 让它里面的 ix/t/m 直接参与 li 的栅格——桌面端不受影响。 */
  .list li.li-act{display:grid;grid-template-columns:34px minmax(0,1fr) auto;
    column-gap:12px;row-gap:8px;align-items:center;padding:20px 0}
  .list li.li-act>.row{display:contents}
  .list li.li-act>.row .ix{grid-column:1;grid-row:1/span 2;align-self:start;padding-top:8px}
  .list li.li-act>.row .t{grid-column:2/span 2;grid-row:1}
  .list li.li-act>.row .m{grid-column:2;grid-row:2;margin:0;align-self:center}
  .list li.li-act>.acts{grid-column:3;grid-row:2;justify-self:end;margin-left:0;align-items:center}
}
.empty{color:var(--faint);font-size:var(--fs-m);padding:var(--s3) 0}

/* ── 阅读页 ─────────────────────────────────────────────────────────── */
.read{max-width:684px;margin:0 auto;padding:var(--s3) 0 0}
.read .tag{font-size:var(--fs-xs);color:var(--gold);letter-spacing:.2em;margin:0 0 20px}
.read h1{font-size:var(--fs-3xl);line-height:1.5;font-weight:600;color:var(--ink);margin:0 0 16px;
  letter-spacing:.01em;text-wrap:balance}
.read .bk{display:inline-block;padding:12px 0}
.read .meta{font-size:var(--fs-xs);color:var(--muted);padding-bottom:24px;border-bottom:1px solid var(--hair2)}
.read .body{margin-top:32px}
.read .body p{font-size:var(--fs-lg);line-height:1.98;color:var(--body);margin:0 0 1.15em}
.read .body p.lead{font-size:var(--fs-xl);color:var(--ink)}
/* 2026-10-14 清阳：文章／案例第一段自动做导语（大一号、更深），整页不再是一整块同号字 */
.read .body>p:first-child{font-size:var(--fs-xl);line-height:1.9;color:var(--ink)}
.read .body p{margin:0 0 1.3em}
.read .body p.q{color:rgba(23,64,63,.86);font-size:var(--fs-base);padding-left:16px;
  border-left:2px solid var(--hair2);margin-left:0}
.read .body h2{font-size:var(--fs-xl);font-weight:600;color:var(--ink);margin:2em 0 .7em}
.read .body li{font-size:var(--fs-lg);line-height:1.9;margin-bottom:.4em}
.read .body ul{padding-left:1.15em;margin:0 0 1.15em}
/* 2026-10-15 清阳：长文末尾只留「复制全文」一个按钮（署名与「← 回到…内容」已去掉）。
   1) 按钮上下两条横线都去掉：上面这条是 .end 自己的 border-top，下面那条是 .wxcenter 的 border-top
      （用 `article.read ~ .wxcenter` 精确只摘长文页那一处，别的页面照旧保留分隔线）；
   2) 单个按钮居中——不再用 space-between 把孤零零的按钮丢在左边。 */
.read .end{margin-top:var(--s3);padding-top:0;border-top:0;
  display:flex;justify-content:center;align-items:center;gap:16px;flex-wrap:wrap}
.read ~ .wxcenter{border-top:0}
.read .end .acts2{display:inline-flex;align-items:center;gap:16px}
/* 2026-10-14 清阳：正文末尾「复制全文」——把标题＋正文复制成纯文字 */
.cpy{font-family:inherit;font-size:var(--fs-s);color:var(--ink);background:#fff;border:1px solid var(--hair2);
  border-radius:999px;padding:8px 16px;cursor:pointer;line-height:1.5}
.cpy:hover{border-color:var(--ink)}
.cpy.ok{color:var(--gold);border-color:var(--gold)}
@media (max-width:640px){.cpy{padding:12px 20px}}
.more{margin-top:var(--s4);max-width:684px;margin-left:auto;margin-right:auto}
/* 2026-10-14 清阳：「对话页面板式想变成像聊天一样的对话感」——清阳对话类内容页改成一问一答气泡。
   只在 .read .body 里生效；其它类型（文章/案例/金句）不动。 */
.read .chat{margin:8px 0 0}
.read .chat .chatnote{margin:0 0 24px;text-align:center;font-size:var(--fs-xs);color:var(--faint);letter-spacing:.12em}
.read .chat .turn{display:flex;align-items:flex-start;gap:12px;margin:0 0 24px}
.read .chat .turn.qy{flex-direction:row-reverse}
.read .chat .av{flex:none;width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-size:var(--fs-xs);line-height:1;user-select:none;-webkit-user-select:none}
.read .chat .turn.ask .av{background:rgba(23,64,63,.08);border:1px solid rgba(23,64,63,.14);color:var(--ink)}
.read .chat .turn.qy .av{background:var(--ink);color:#fff}
.read .chat .turn.qy .av img{width:19px;height:19px;display:block;filter:brightness(0) invert(1)}
.read .chat .tcol{display:flex;flex-direction:column;min-width:0;max-width:min(84%,calc(100% - 48px))}
.read .chat .turn.qy .tcol{align-items:flex-end}
.read .chat .who{font-size:var(--fs-2xs);color:var(--faint);letter-spacing:.2em;margin:0 0 8px;padding:0 4px}
.read .chat .bub{max-width:100%;margin:0;padding:16px 20px;border-radius:14px;background:#fff;border:1px solid var(--hair2)}
.read .chat .turn.ask .bub{background:rgba(23,64,63,.055);border-color:rgba(23,64,63,.10);border-top-left-radius:5px}
.read .chat .turn.qy .bub{border-top-right-radius:5px}
.read .chat .bub p{margin:0;font-size:var(--fs-lg);line-height:1.9;color:var(--body)}
.read .chat .bub p+p{margin-top:.9em}
.read .chat .turn.qy .bub p{color:var(--ink)}
@media (max-width:640px){
  .read .chat .turn{gap:12px}
  .read .chat .av{width:32px;height:32px;font-size:var(--fs-2xs)}
  .read .chat .tcol{max-width:min(88%,calc(100% - 42px))}
  .read .chat .bub{padding:12px 16px}
  .read .chat .bub p{font-size:var(--fs-base)}
}
  /* 2026-10-13：「继续读」标题原来横跨整栏、列表却居中，标题比列表偏左 142px。
     整块收到与正文同宽（684）并居中，标题/列表/分割线就对在同一条线上。 */
.more li:last-child{border-bottom:0}   /* 末条的下线会和页脚上线叠成两根平行线 */
.more h2{font-size:var(--fs-xs);font-weight:400;color:var(--faint);letter-spacing:.2em;margin:0 0 8px}
.more ul{list-style:none;margin:0;padding:0;max-width:684px;margin-left:auto;margin-right:auto}
.more li{border-bottom:1px solid var(--hair)}
.more a{display:block;padding:16px 0;font-size:var(--fs-base);color:var(--ink)}

/* ── 金句海报页 ─────────────────────────────────────────────────────── */
.poster-page{max-width:760px;margin:0 auto;padding:var(--s3) 0 0;text-align:center}
.poster-page .topback{text-align:left;font-size:var(--fs-s);color:var(--muted);margin:0 0 16px}
.poster-page .topback a{border-bottom:1px solid var(--hair2);padding-bottom:2px}
.poster-page img{margin:0 auto;width:100%;max-width:620px;height:auto;border:1px solid var(--hair)}
/* 2026-10-15 清阳：「手机端呈现不规范不美观」——这页原来只放按钮、不上图
   （.poster-page img 这条规则一直是死代码），进来先看到两个按钮和二维码，看不到内容。
   现在：海报图在上（这页的主角），图下并排等宽的两个按钮（48px 高、同字号）。 */
.poster-page .poster-acts{display:flex;gap:12px;justify-content:center;align-items:stretch;
  max-width:620px;margin:var(--s2) auto 0}
/* 两个按钮必须等宽等高：basis 给 50%＋min-width:0（basis 0 会被 min-content 顶开→实测 147/195 不等宽），
   横向内边距归零、由 flex 居中（.poster-page .dl 的 margin-top:24px 也要在这里压掉，否则和 .poster-acts 的上边距叠成 40px） */
.poster-page .poster-acts>.dl{flex:1 1 50%;min-width:0;min-height:52px;margin:0;padding:0;
  display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;
  font-size:var(--fs-base);line-height:1.2}
/* 2026-10-14 实测：图注 13.5px 在 560px 宽下＝41 字/行（标准 ≤40）→ 按自身字号限宽 */
.poster-page .cap{font-size:var(--fs-xs);color:var(--muted);margin:20px auto 0;max-width:38em;line-height:1.8}
.poster-page a.dl-big{display:inline-flex;padding:16px 0;font-size:var(--fs-base);font-weight:600;
  color:#f7f3ea;background:var(--ink);border:1px solid var(--ink);border-radius:14px;text-align:center}
.poster-page a.dl-big:active{opacity:.85}
.poster-page .dl-ghost{display:inline-flex;padding:12px 24px;min-height:48px;line-height:20px;
  font-size:var(--fs-base);color:var(--ink);background:transparent;border:1px solid var(--hair2);border-radius:14px;cursor:pointer}
.poster-page .dl-ghost:active{background:rgba(23,64,63,.06)}
.poster-page .dl{display:inline-block;margin-top:24px;border:1px solid var(--hair2);color:var(--ink);
  font-size:var(--fs-m);padding:12px 24px;min-height:46px;line-height:20px}
.poster-page .back{display:inline-block;margin-left:16px;font-size:var(--fs-m);color:var(--muted);padding:12px 4px}

/* ── 认识清阳 ───────────────────────────────────────────────────────── */
.about{max-width:684px;margin:0 auto;padding-top:var(--s3)}   /* 只设上边距：用简写会把 .wrap 的左右内边距清成 0，文字直接贴边 */
.about h1{font-size:var(--fs-3xl);font-weight:600;color:var(--ink);margin:0 0 8px}
.about .sub{font-size:var(--fs-m);color:var(--muted);margin:0 0 var(--s3)}
.about h2{font-size:var(--fs-lg);font-weight:600;color:var(--ink);margin:var(--s3) 0 var(--s2)}
.about p{font-size:var(--fs-lg);line-height:1.9;margin:0 0 1em}
.about .ways{list-style:none;margin:0;padding:0}
.about .ways li{border-bottom:1px solid var(--hair)}
.about .ways a{display:block;padding:20px 0;font-size:var(--fs-base);color:var(--ink)}
.about .ways span{display:block;font-size:var(--fs-s);color:var(--muted);margin-top:8px}

/* ── 加微信 ─────────────────────────────────────────────────────────── */
.wxcenter{margin-top:var(--s4);padding-top:var(--s3);border-top:1px solid var(--hair);
  text-align:center;max-width:684px;margin-left:auto;margin-right:auto}
.wxcenter .wt{font-size:var(--fs-xl);font-weight:600;color:var(--ink);margin:0 0 12px}
.wxcenter .wd{font-size:var(--fs-base);color:var(--body);margin:0 0 24px;line-height:1.8}
.qrbox{display:inline-block;background:#fff;padding:16px;border:1px solid var(--hair)}
.qrbox img{width:190px;height:190px}
.wxdo{font-size:var(--fs-s);color:var(--ink);margin:20px 0 0}
.wxid{font-size:var(--fs-xs);color:var(--muted);margin:12px 0 0}
.wxid b{font-weight:600;color:var(--ink);user-select:all}
.wxcopy{font-family:inherit;font-size:var(--fs-s);color:var(--ink);background:#fff;border:1px solid var(--hair2);border-radius:999px;padding:8px 16px;cursor:pointer;margin-left:4px}

/* ── 页脚 ───────────────────────────────────────────────────────────── */
footer{margin-top:var(--s4);border-top:1px solid var(--hair);padding:24px 0 calc(24px + env(safe-area-inset-bottom))}
/* 2026-10-15 清阳：全站最下边只留一行、一律居中——「清阳 · 问题判断　豫ICP备2026041558号-1」。
   原来两处不齐：① 备案号带 12px 内边距 + 下划线，与签名不在同一基线，看着断成两截；
   ② 宽屏上被 rail+gap 推走，中线不在页面上。 */
footer .in{max-width:1240px;margin:0 auto;padding:0 var(--pad);display:flex;flex-wrap:wrap;
  justify-content:center;align-items:center;gap:4px 16px;font-size:var(--fs-xs);color:var(--faint);
  text-align:center}
footer .beian{margin-left:0}
footer a{color:inherit;border-bottom:1px solid var(--hair2)}
footer a:hover{color:var(--muted)}

/* ── 窄屏 ───────────────────────────────────────────────────────────── */
@media (max-width:900px){
  /* ── 2026-10-14 手机适配（清阳：继续检查优化手机适配问题）─────────────────
     1) iOS 上输入框字号 <16px 会在聚焦时把整页放大，搜索框统一 16px；
     2) 点击区：主操作与常点链接补到 ≥44px——用隐形热区（::after），视觉一丝不变。 */
  .search input{font-size:16px}
  .lockup{min-height:44px}
  .wxcopy{padding:12px 20px;min-height:44px}
  /* 常点的小文字链接：直接给足上下内边距，热区才有 44px（探针可实测） */
  .qz-back a{display:inline-block;padding:12px 0}
  .poster-page .topback a{display:inline-block;padding:12px 0;border-bottom:0;
    text-decoration:underline;text-decoration-color:var(--hair2);text-underline-offset:4px}
  .more li a{display:block;padding:12px 0}
  .poster-page .back{padding:12px 4px}
  footer a{padding:12px 0}
  .beian a{display:inline-block;padding:12px 0}

  :root{--pad:20px}
  /* ── 手机端页眉（2026-10-15 清阳定版；实测页眉 119→53px，首屏第一条内容 300→147px）──
     1) 只留「清阳 · 问题判断」一行：logo 38→24、字号 18→15.5、slogan 手机端不显示；
     2) 场景切换移到同一行右侧并视觉减重：高 38→32、字号 15.5→14.5、底色 .07→.05；
        热区用 ::after 撑到 44px——看着小，点起来不小（已用 elementFromPoint 验证命中）；
     3) 手机端去掉搜索框，整行让给品牌与场景切换（桌面端保留）；
     4) 页眉上下内边距 10→4、与分类条间距 12→8（只作用于带分类条的列表页；
        :has 不被支持时这条规则失效、退回原样，不会破版）。 */
  .mast .in{flex-wrap:nowrap;row-gap:0;min-height:0;align-items:center;padding-top:4px;padding-bottom:4px}
  .lockup{margin-right:0;flex:1 1 auto;min-width:0;gap:12px}
  .mast .mklogo img{width:24px;height:24px}
  .mast .mk{font-size:var(--fs-m)}
  .mast .sl{display:none}
  .search{display:none}
  .tools{flex:0 0 auto;order:0;gap:0}
  .scene>b{position:relative;height:28px;padding:0 12px;font-size:var(--fs-xs);line-height:1.2;
    background:rgba(23,64,63,.05);border-color:transparent;font-weight:600}
  .scene>b::after{content:'';position:absolute;left:-8px;right:-8px;top:-8px;bottom:-8px}
  .scene>b i{font-size:var(--fs-2xs);line-height:1}
  main:has(.rail){padding-top:var(--s1)}
  .shell{grid-template-columns:minmax(0,1fr);row-gap:var(--s2)}   /* 必须 minmax(0,…)：1fr 的最小宽度是 auto，会被 nowrap 的分类条撑破 */
  .rail{position:static;top:auto;margin:0 calc(-1 * var(--pad));padding:0 var(--pad);
    border-bottom:1px solid var(--hair)}
  .rail h2{display:none}
  /* 2026-10-15 清阳定：分类条＝单行横滑（方案 2）——6 条同一条线上、右侧渐隐提示可滑。
     10-14 那次横滑被否是因为没有任何提示、「认识清阳」被完全藏住；这次留渐隐提示 + 触控滑动，
     条目仍全部可达，且不再有第二行参差的问题。 */
  .cats{display:flex;flex-wrap:nowrap;gap:0 24px;overflow-x:auto;overflow-y:hidden;padding:0 0 12px;
    -webkit-overflow-scrolling:touch;scrollbar-width:none;
    mask-image:linear-gradient(90deg,#000 calc(100% - 26px),rgba(0,0,0,0))}
  .cats li{flex:0 0 auto;min-width:0}
  .cats::-webkit-scrollbar{display:none}
  .cats a{display:inline-block;white-space:nowrap;padding:12px 0 8px;border-bottom:2px solid transparent}
  .cats a[aria-current]{border-bottom-color:var(--ink)}
  .cats a span{float:none;margin-left:8px}
  .cats li.nav-tool,.cats li.nav-about{margin:0;padding:0;border:0}
  .list,.list.single{grid-template-columns:minmax(0,1fr);max-width:none}
  .read,.about{padding-top:var(--s2)}
  .poster-page{padding-top:var(--s2)}
  .poster-page img{max-width:100%;height:auto}
  /* 2026-10-15：按钮交给 .poster-acts 的 flex 平分（原来这里写 width:100% 会把主按钮拉成通栏大按钮） */
  .poster-page .poster-acts{margin-top:var(--s2)}
  footer .in{flex-wrap:wrap;gap:0 16px}
  /* 手机上页脚两段各自给足 44px 热区，但仍是一行居中（实测 235px < 353px 不会折行） */
  footer .in>span{display:inline-flex;align-items:center;min-height:44px}
}
@media (max-width:380px){
}

/* ══════════════════════════════════════════════════════════════════════
   认识清阳（长页）。类名一律 ap- 前缀：v4 已经被「.about 撞 .wrap」坑过一次，
   长页里再出现同名类，页边距和导航又会互相覆盖。
   ══════════════════════════════════════════════════════════════════════ */
.ap{max-width:720px;margin:0 auto;padding-top:var(--s3)}
.ap-hero{padding:0 0 40px;border-bottom:1px solid var(--hair)}
.ap-kick{font-size:var(--fs-2xs);letter-spacing:.2em;color:var(--faint);margin:0 0 20px}
.ap-hero h1{font-family:var(--song);font-size:var(--fs-4xl);line-height:1.3;font-weight:700;color:var(--ink);
  margin:0 0 20px}
.ap-hero .slogan{font-family:var(--song);font-size:var(--fs-2xl);line-height:1.65;color:var(--gold);margin:0 0 24px}
.ap-hero .lead{font-size:var(--fs-xl);line-height:2;color:var(--muted);margin:0}
.ap-toc{padding:24px 0 32px;border-bottom:1px solid var(--hair)}
.ap-toc .tt{font-size:var(--fs-2xs);letter-spacing:.2em;color:var(--faint);margin:0 0 12px}
.ap-toc ol{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;
  grid-template-rows:repeat(3,auto);grid-auto-flow:column;column-gap:44px}   /* 6 节 → 3/3；原来写死 4 行（为 7 节设计的），删到 6 节会变成 4/2 难看 */
.ap-toc li{border-bottom:1px solid var(--hair)}
.ap-toc a{display:flex;gap:12px;padding:12px 0;font-size:var(--fs-m);color:var(--muted)}
.ap-toc a:hover{color:var(--gold)}
.ap-toc .n{color:var(--faint);font-size:var(--fs-2xs);letter-spacing:.1em;padding-top:3px}
.ap-sec{padding:44px 0 8px}
.ap-sec h2{font-family:var(--song);font-size:var(--fs-3xl);line-height:1.45;font-weight:700;color:var(--ink);
  margin:0;display:flex;gap:16px;align-items:baseline}
.ap-sec h2 .n{font-family:var(--font);font-size:var(--fs-xs);letter-spacing:.2em;color:var(--gold);font-weight:400}
.ap-sec .hr{height:1px;background:var(--hair);margin:20px 0 24px}
.ap-sec p.dim{font-size:var(--fs-m);color:var(--muted);max-width:38em}
/* 2026-10-14 实测：15.5px 塞进 720px 的列＝46 字/行（标准 ≤40）→ 按自身字号限宽 */
.ap-sec p{font-size:var(--fs-lg);line-height:2;color:var(--body);margin:0 0 1.15em}
.ap-pull{border-left:3px solid var(--gold);background:rgba(125,97,31,.05);
  padding:20px 20px 20px 24px;border-radius:0 3px 3px 0;margin:28px 0;
  font-family:var(--song);font-size:var(--fs-xl);line-height:1.9;color:var(--ink);font-weight:600}
.ap-list{list-style:none;margin:0 0 1.3em;padding:0}
.ap-list li{border-top:1px solid var(--hair);padding:16px 0;display:flex;gap:16px;
  font-size:var(--fs-base);line-height:1.95}
.ap-list li .k{flex:0 0 auto;color:var(--gold);font-size:var(--fs-s);padding-top:3px;min-width:2.4em}
.ap-list li .k b{color:var(--ink);font-size:var(--fs-base)}
.ap-steps{list-style:none;margin:0 0 1.3em;padding:0}
.ap-steps li{border-top:1px solid var(--hair);padding:20px 0;display:flex;gap:16px}
.ap-steps .s{flex:0 0 auto;font-family:var(--song);font-size:var(--fs-m);font-weight:600;color:var(--gold);
  padding-top:4px;min-width:4.4em}
.ap-steps .t{font-size:var(--fs-base);line-height:1.95}
.ap-steps .t b{color:var(--ink);font-weight:600}
.ap-pr > div{border-top:1px solid var(--hair);padding:16px 0}
.ap-pr .d{font-size:var(--fs-base);font-weight:600;color:var(--ink);margin:0 0 8px}
.ap-pr .x{margin:0;font-size:var(--fs-m);line-height:1.9;color:var(--muted)}
.ap-cta{margin:36px 0 0;padding:24px 0 0;border-top:1px solid var(--hair2)}
.ap-cta .q{font-family:var(--song);font-size:var(--fs-xl);line-height:1.8;color:var(--ink);margin:0 0 16px}
@media (max-width:820px){
  html{scrollbar-gutter:auto}
  .ap-hero .slogan{font-size:var(--fs-lg);margin-bottom:20px}
  .ap-toc ol{grid-template-columns:1fr;grid-template-rows:none;grid-auto-flow:row;column-gap:0}
  .ap-sec{padding-top:36px}
  .ap-sec h2{font-size:var(--fs-2xl);line-height:1.5;display:block}
  .ap-sec h2 .n{display:block;margin-bottom:8px}
  .ap-steps li{gap:12px}
  .ap-steps .s{min-width:3.6em;font-size:var(--fs-s)}
}

/* ── 内容页的常驻左栏（2026-10-13）─────────────────────────────────────
   清阳：「各子页面返回首页不舒服，有没有可能让导航栏始终显示在前方」。
   内容页／海报页也进 .shell 两栏，左栏沿用 .rail（本来就 sticky）。   */
.col{min-width:0}
.shell .read,.shell .poster-page,.shell .col .ap{padding-top:0}   /* main 已经给过顶部留白，别叠两层 */
.shell .col{max-width:none;margin:0}                 /* 栅格项不能用 margin:auto：浏览器会把该项收缩成内容宽，
                                                       海报页正文因此被压成 301px（2026-10-13 实测踩到） */
.shell .col .read{max-width:684px}                 /* 栏内居中，跟栏宽对齐 */
@media (max-width:900px){
  .shell .col .read{max-width:100%}
  .shell .col.poster-page{text-align:center}
}

/* 只给读屏与搜索引擎的标题（2026-10-13：列表页场景名不再呈现，但 h1 要留着） */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* 海报页的「也读一读」：外层 .poster-page 是居中的，相关阅读要左对齐 */
.poster-page .more{text-align:left}

/* 业务人员本人的分享条（只有本人浏览器会插入这个元素，客户看不到） */
.repbar{position:fixed;right:16px;bottom:16px;z-index:60;display:flex;align-items:center;gap:12px;
  background:var(--ink);color:#fff;border-radius:999px;padding:8px 12px 8px 20px;
  font-size:var(--fs-xs);box-shadow:0 8px 24px rgba(23,64,63,.22)}
.repbar button{padding:4px 8px}
.repbar .qyExit{background:transparent;color:#fff;border:1px solid rgba(255,255,255,.45);margin-left:2px}
.repbar button{background:#fff;color:var(--ink);border:0;border-radius:999px;padding:8px 16px;
  font-size:var(--fs-xs);cursor:pointer;font-family:inherit}
@media (max-width:900px){.repbar{left:16px;right:16px;bottom:14px;justify-content:space-between;padding-left:16px}}

/* 问题测评目录（2026-10-14 清阳：一张卡片＝一个测评） */
.acat{padding-top:var(--s2);margin-bottom:var(--s3)}
.acat .kick{font-size:var(--fs-xs);letter-spacing:.2em;color:var(--gold);margin:0 0 12px}
.acat h1{font-size:var(--fs-3xl);line-height:1.3;margin:0 0 16px;color:var(--ink)}
.acat .lead{font-size:var(--fs-xl);line-height:1.9;color:var(--muted);margin:0;max-width:620px}
.acards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;padding-top:var(--s3);margin-bottom:var(--s3)}
.acard{display:block;background:#fff;border:1px solid var(--hair);border-radius:12px;
  padding:24px 24px 20px;text-decoration:none;color:inherit;
  transition:border-color .18s ease,box-shadow .18s ease,transform .18s ease}
.acard:hover{border-color:var(--hair2);box-shadow:0 10px 26px rgba(23,64,63,.09);transform:translateY(-2px)}
/* 2026-10-15 清阳「各测评页面首页过于复杂，精简内容，优化排版」：
   ① 卡片上重复的「家庭／企业」小标签已去掉（这一页只装本场景的测评，标签不承载信息）；
   ② 描述手机上最多 3 行（原来最长 70 字会堆到 5 行，卡片高低不齐）；
   ③ 30 题系统评估作为主打：金色描边＋标题略大＋「推荐」标记，主次一眼分明。 */
.acard.pri{border-color:rgba(176,138,87,.55)}
.acard.pri:hover{border-color:rgba(176,138,87,.8)}
.acard.pri h3{font-size:23px}
.acard h3 em{font-style:normal;font-size:var(--fs-2xs);letter-spacing:.14em;color:var(--gold);
  border:1px solid rgba(176,138,87,.5);border-radius:999px;padding:2px 8px;margin-left:8px;vertical-align:2px}
/* 2026-10-15：中文标题按标点断行（keep-all）＋两行均分（balance），
   修掉手机上「…越不／配合？」这种只剩两三个字的孤行 */
.acard h3{margin:0 0 12px;font-size:var(--fs-2xl);line-height:1.4;font-weight:600;color:var(--ink);
  word-break:keep-all;overflow-wrap:break-word;text-wrap:balance}
.acard p{margin:0 0 20px;font-size:var(--fs-s);line-height:1.85;color:var(--body);text-wrap:pretty}
.acard .meta{display:flex;justify-content:space-between;align-items:center;gap:12px;
  font-size:var(--fs-xs);color:var(--faint);border-top:1px solid var(--hair);padding-top:16px}
/* 2026-10-15：入口原来只是「开始测评 →」纯文字（手机实测只有 24px 高），
   点击引导不成立。改成实心主按钮（与站内 .btn-primary 同口径）——
   手机没有 hover，描边按钮视觉太弱。 */
.acard .meta b{color:#fff;font-weight:600;display:inline-flex;align-items:center;justify-content:center;
  min-height:40px;padding:0 20px;border:1px solid var(--ink);border-radius:999px;
  background:var(--ink);white-space:nowrap;
  transition:background .18s ease,border-color .18s ease}
.acard:hover .meta b,.acard:active .meta b{background:#12332f;border-color:#12332f}
.acta{padding:var(--s3) 0 0;border-top:1px solid var(--hair);margin-bottom:var(--s3)}
.acta .q{font-size:var(--fs-xl);line-height:1.8;color:var(--ink);font-weight:600;margin:0 0 12px}
.acta p{margin:0;font-size:var(--fs-base);line-height:1.9;color:var(--muted)}
@media (max-width:900px){
  .acards{grid-template-columns:minmax(0,1fr);gap:20px}
  .acat{padding-top:var(--s1)}
  .acard .meta b{min-height:44px}    /* 手机端入口按钮补到 44px 触控标准 */
  /* 2026-10-15：手机上描述最多 3 行（最长那条 70 字原本要 5 行，卡片高低差一倍） */
  .acard p{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
}
/* 2026-10-15 中文标题断行统一：只在标点/词组边界断，不再把词拆开（实测 keep-all 生效）；
   两行标题均分，避免末行只剩两三个字的孤行。正文保持中文常规断行不变。 */
h1,h2,h3,.head h1,.acat h1,.ap-hero h1{word-break:keep-all;overflow-wrap:break-word}
h1,h2,h3{text-wrap:balance}

/* 2026-10-14 清阳：金句点「存图」先出预览，再选下载／取消 */
.prev{position:fixed;inset:0;z-index:80;background:rgba(23,64,63,.62);
  display:flex;align-items:center;justify-content:center;padding:16px;overflow:auto}
.prev[hidden]{display:none}
.prev-in{background:#fff;border-radius:12px;padding:16px;width:min(92vw,420px);
  box-shadow:0 24px 60px rgba(0,0,0,.35);display:flex;flex-direction:column;gap:12px}
.prev-in img{display:block;width:100%;height:auto;max-height:66vh;object-fit:contain;
  border-radius:6px;background:var(--bg);border:1px solid var(--hair)}
.prev-btns{display:flex;gap:12px}
.prev-btns .act{flex:1;display:flex;align-items:center;justify-content:center;
  min-height:46px;padding:0 16px;font-size:var(--fs-s);border-radius:8px;text-decoration:none;cursor:pointer}
.act-p{background:var(--ink);color:#fff;border:1px solid var(--ink)}
.act-g{background:transparent;color:var(--ink);border:1px solid var(--hair2)}
@media (max-width:900px){.prev{padding:12px}.prev-in{width:100%}.prev-in img{max-height:62vh}}

/* 2026-10-14 手机端补齐：① 触屏没有 hover，主交互补 :active 反馈（实测原来只有 2 处有）；
   ② 尊重系统「减弱动态效果」设置 */
.cats a:active{color:var(--ink)}
.list a:active .t,.list a:active .dlm{color:var(--gold)}
.list .acts .act:active{color:var(--gold);border-color:var(--gold)}
.cpy:active{border-color:var(--ink)}
.ap-toc a:active{color:var(--gold)}
.acard:active{border-color:var(--hair2)}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
/* 2026-10-14 实测：<b>/<strong> 默认 bold=700，而自托管无衬线只有 400/600 两档 →
   正文里的强调（测评页的步骤编号、文章里的 <strong>）全是浏览器合成加粗，中文会发糊。
   统一降到真字重 600（宋体有 700 真档，故 :root 里只针对无衬线场景声明）。 */
b,strong{font-weight:600}