/* ==========================================================================
   文章页通用模板样式 · single.css V1.0
   --------------------------------------------------------------------------
   作用域：#tsPostMain（由 generatepress-child/single.php 输出）
   适用页：全站所有单篇文章 post（16 篇知识文章）
   加载：functions.php 1N 段，无条件全站入队 + 空依赖（与 1c/1d/1e 同架构）
   依赖：子主题 style.css（--ts-container / --ts-gutter / --ts-primary 等）

   ★ 本文件全部规则位于 #tsPostMain 作用域内，零全局裸选择器
     （唯一例外是第 0 节的 body.single-post 容器零化与面包屑版心，
       该选择器带文章页专用 body class，只在单篇文章页命中）。
     因此全站加载也不会影响任何其它页面。

   ★ 遵循的既有约定：
     R4  左右内边距零化、不动上下
     R5  --ts-* / 本地令牌一律声明在容器 id 内
     R6  h2/h3 居中须带容器 id 前缀（根因 style.css:111 margin-left:0）
     R10 橙为纯强调色 ≤5%；底色只用白与深墨；字号 8 级
     R11 按钮显式 hover/focus/active 三态，特异度 ≥(0,2,0)
     R12 橙色文字用 #B83E00
     R14 间距取 8px 基准令牌，禁硬编码
     R44 图片用 aspect-ratio 时须同时写 height:auto
     R48 hover 包进 @media (hover:hover)，focus/active 全设备
     R51 / R78 .site-main 上下 margin 一并归零，否则出现 20px 白条
     R66 禁用 margin/padding 简写做局部覆盖 → 一律用单方向属性
     R81 新增 h3/h4 须显式 margin:0（父主题只重置 margin-left）
   ========================================================================== */


/* ==========================================================================
   0. 页面级对齐：把 GP 的三层左右内边距归零
   --------------------------------------------------------------------------
   GP 默认给 .site-content / .inside-article / .entry-content 加左右内边距，
   会让内容比页脚窄一圈、全宽区块算不准。
   特异性：body.single-post .site-content = (0,3,0)，高于 GP 的 (0,2,0)，无需 !important。
   只零左右，不动上下（R4）；.site-main 的上下 margin 必须归零（R51/R78）。
   ========================================================================== */
body.single-post .site-content,
body.single-post .content-area,
body.single-post .site-main,
body.single-post .inside-article,
body.single-post .entry-content{
    padding-left: 0;
    padding-right: 0;
    margin-left: 0;
    margin-right: 0;
}

body.single-post .site-main{
    margin-top: 0;
    margin-bottom: 0;
    padding-top: 0;
}

/* 面包屑由 Rank Math 输出在 #tsPostMain 之外，归零后需要自己补版心与水平留白 */
body.single-post .breadcrumb-container{
    max-width: var(--ts-container);
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--ts-gutter);
    padding-right: var(--ts-gutter);
    padding-top: 16px;
}

body.single-post .rank-math-breadcrumb{
    font-size: 13px;
    color: #6B7280;
}

body.single-post .rank-math-breadcrumb a{
    color: #4B5563;
    text-decoration: none;
}

@media (hover: hover){
    body.single-post .rank-math-breadcrumb a:hover{
        color: #B83E00;
        text-decoration: underline;
    }
}


/* ==========================================================================
   1. 本地设计令牌（只在本容器作用域内）
   ========================================================================== */
#tsPostMain{
    --post-ink:        #14203A;
    --post-ink-soft:   #23314E;
    --post-ink-mute:   #5B6880;
    --post-line:       rgba(20, 32, 58, .12);
    --post-line-soft:  rgba(20, 32, 58, .07);
    --post-paper:      #FFFFFF;
    --post-paper-warm: #FFF1E5;
    --post-brand:      #B83E00;
    --post-cta-bg:     #16161E;

    /* 间距刻度：8px 基准（R14「紧凑」） */
    --post-sec-y:  clamp(36px, 4.4vw, 56px);
    --post-gap:    clamp(16px, 2vw, 24px);
    --post-head-y: clamp(20px, 2.6vw, 32px);
    --post-card-p: clamp(16px, 1.8vw, 22px);

    --post-r-sm: 8px;
    --post-r-md: 12px;
    --post-r-lg: 18px;

    --post-sh-1: 0 1px 2px rgba(20, 32, 58, .04),
                 0 10px 24px -18px rgba(20, 32, 58, .26);

    --post-ease: cubic-bezier(.22, 1, .36, 1);

    /* 版心与可读宽度 */
    --post-wide:  min(var(--ts-container), 100%);
    --post-read:  1200px;  /* 正文可读宽度（五轮：960 → 1200，客户反馈「正文也要和上下卡片同宽」） */
    /* ★ 五轮：head 与 read **取同宽 1200**，与 TOC 卡片（1200）／相关文章行（1200）外缘对齐。
       三轮、四轮都在 900~1000 之间调，客户最终要的是「整页三段一样宽」的视觉一致感。
       正文 1200 在 GP 父容器 1200 + padding 24×2 下取 max-width 实际渲染约 1152——与 TOC 卡
       外缘 1200 视觉差 48px，肉眼几乎不可见（R107 错位是 96px 才被识别）。 */
    --post-head:  1200px;

    /* 字号：8 级（R10）
       ★ fs-1 于 2026-09-21 二轮上调：客户反馈「h1 不够压秤、不大气」，
         26~40px 在 760 正文栏里偏秀气，改为 34~60px + 字重 700 + 橙色下划线装饰。 */
    /* ★ fs-1 二轮定稿：34~46px（不是 60px）。
       实测 60px + 760px 正文栏 = 38 字标题折 4 行 / 192px，太占屏且失去"大气"（R88：
       长标题必须实测折行，超 2 行要收）。改为「标题区加宽到 900px + 字号 46px + 字重 700
       + 橙色装饰条」，900/46 ≈ 19.5 字/行 → 38 字 2 行，视觉更压秤但不散。 */
    --post-fs-1: clamp(34px, 4vw, 46px);     /* 文章 h1（大气压秤，2 行内） */
    --post-fs-2: clamp(21px, 2.2vw, 26px);   /* 正文 h2 */
    --post-fs-3: 19px;                        /* 正文 h3 */
    --post-fs-4: 17px;                        /* 正文 */
    --post-fs-5: 16px;                        /* 卡片标题 */
    --post-fs-6: 14px;                        /* 次要说明 */
    --post-fs-7: 13px;                        /* 日期 / 元信息 */
    --post-fs-8: 12px;                        /* 标签 / 目录号 */

    font-size: var(--post-fs-4);
    line-height: 1.85;
    color: var(--post-ink-soft);
    background: var(--post-paper);

    /* 归零主题给 .site-main 内子容器的默认 margin-bottom:20px（R51） */
    margin-bottom: 0;
}


/* ==========================================================================
   2. 区块骨架：段自身不留白，留白交给 __Inner（R66）
   ========================================================================== */
#tsPostMain .ts-post__rel,
#tsPostMain .ts-post__ask,
#tsPostMain .ts-post__nav{
    margin-top: 0;
    margin-bottom: 0;
    padding-top: 0;
    padding-bottom: 0;
}

#tsPostMain .ts-post__relInner,
#tsPostMain .ts-post__askInner{
    max-width: var(--post-wide);
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--ts-gutter);
    padding-right: var(--ts-gutter);
}


/* ==========================================================================
   3. S1 标题区
   ========================================================================== */
#tsPostMain .ts-post .inside-article{
    padding-left: 0;
    padding-right: 0;
    padding-top: 0;
    padding-bottom: 0;
}

#tsPostMain .ts-post__head{
    /* ★ 三轮：head 容器放到版心宽度（1280），内部 h1/meta 仍按 --post-head(1000) 居中
       —— 解决「上半部分比下半部分窄」的视觉断层 */
    max-width: var(--post-wide);
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--ts-gutter);
    padding-right: var(--ts-gutter);
    padding-top: clamp(20px, 3vw, 36px);
    padding-bottom: 0;
}

/* head 内部的分类 pill / h1 / meta 仍按 900 居中显示，不要贴满 1280 */
#tsPostMain .ts-post__head > *{
    max-width: var(--post-head);
    margin-left: auto;
    margin-right: auto;
}

#tsPostMain .ts-post__cat{
    display: inline-block;
    /* ★ 四轮（R111）：inline-block 的 margin:auto 恒等于 0，吃不到 `.ts-post__head > *` 的居中，
       会贴在 137 而标题/正文在 233 → pill 单独左移 96px。
       这里手动补上居中偏移量；max() 兜底：窄屏时 --post-head > 容器宽，calc 会变负值。 */
    margin-left: max(0px, calc((100% - var(--post-head)) / 2));
    margin-right: auto;
    font-size: var(--post-fs-8);
    line-height: 1.6;
    letter-spacing: .04em;
    color: var(--post-brand);
    background: var(--post-paper-warm);
    border-radius: var(--post-r-sm);
    padding-top: 4px;
    padding-bottom: 4px;
    padding-left: 10px;
    padding-right: 10px;
    text-decoration: none;
    margin-bottom: 16px;
}

#tsPostMain .ts-post__title{
    font-size: var(--post-fs-1);
    line-height: 1.22;
    font-weight: 700;                /* 大气压秤：比其它标题重一档 */
    color: var(--post-ink);
    letter-spacing: -.02em;
    /* R6 正解 + R111：style.css:111 的 `#content .entry-content h2,h3{margin-left:0}` 特异度是 (1,1,1)，
       本选择器带 #tsPostMain 前缀也是 (1,1,1) 且位置更靠后 → 写 auto 即可压过。
       ★ 四轮修正：原写 margin-left:0 是对 R6 的误读（R6 要的是「带容器 id 前缀 + auto」，不是「写 0」），
         结果标题没居中（l=137）而正文居中（l=233）→ 上下左边缘错位 96px。 */
    margin-top: 0;
    margin-bottom: 20px;
    margin-left: auto;
    margin-right: auto;
    padding-bottom: 22px;
}

/* 标题下的橙色短装饰条：给大标题一个收口，避免"字大但散" */
#tsPostMain .ts-post__title::after{
    content: "";
    display: block;
    width: 72px;
    height: 4px;
    border-radius: 2px;
    background: var(--post-brand);
    margin-top: 20px;
}

#tsPostMain .ts-post__meta{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 16px;
    font-size: var(--post-fs-7);
    color: var(--post-ink-mute);
    padding-bottom: 20px;
    border-bottom: 1px solid var(--post-line-soft);
}

#tsPostMain .ts-post__metaItem{
    display: inline-flex;
    align-items: center;
}

#tsPostMain .ts-post__metaItem + .ts-post__metaItem::before{
    content: "";
    display: inline-block;
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: currentColor;
    opacity: .55;
    margin-right: 16px;
    margin-left: -8px;
}

#tsPostMain .ts-post__metaItem--author{
    color: var(--post-ink);
    font-weight: 500;
}


/* ==========================================================================
   4. S2 目录 TOC
   ========================================================================== */
#tsPostMain .ts-post__toc{
    /* ★ 六轮：客户反馈「上面的板块太宽了」→ TOC 卡从版心 1280 缩到 960，作为
       「侧栏卡片」存在，不再和外缘 1200 正文一样宽。宽高比更紧凑（原来 ~1200×300
       显得空旷），更像一份目录。--post-wide 不动，仍是正文 / 标题容器用。 */
    max-width: 960px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 28px;
    padding-top: 20px;
    padding-bottom: 20px;
    padding-left: 20px;
    padding-right: 20px;
    background: var(--post-paper);
    border: 1px solid var(--post-line-soft);
    border-radius: var(--post-r-lg);
    box-shadow: var(--post-sh-1);
}

/* toc 内部的标题行与列表按 900 居中 */
#tsPostMain .ts-post__toc > *{
    max-width: var(--post-head);
    margin-left: auto;
    margin-right: auto;
}

#tsPostMain .ts-post__tocTitle{
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 12px;
    font-size: var(--post-fs-6);
    font-weight: 600;
    letter-spacing: .04em;
    color: var(--post-ink);
    margin-top: 0;
    margin-bottom: 14px;
    /* R111：同标题，必须 auto 才能吃到 `.ts-post__toc > *` 的居中轨道 */
    margin-left: auto;
    margin-right: auto;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--post-line-soft);
}

#tsPostMain .ts-post__tocMeta{
    font-size: var(--post-fs-8);
    font-weight: 400;
    letter-spacing: .02em;
    color: var(--post-ink-mute);
}

#tsPostMain .ts-post__tocList{
    list-style: none;
    margin-top: 0;
    margin-bottom: 0;
    /* R111 */
    margin-left: auto;
    margin-right: auto;
    padding-left: 0;
    padding-right: 0;
}

#tsPostMain .ts-post__tocItem{
    margin-top: 0;
    margin-bottom: 6px;
}

#tsPostMain .ts-post__tocItem:last-child{
    margin-bottom: 0;
}

#tsPostMain .ts-post__tocLink{
    display: flex;
    align-items: center;
    gap: 14px;
    font-size: var(--post-fs-6);
    line-height: 1.6;
    color: var(--post-ink-soft);
    text-decoration: none;
    padding-top: 8px;
    padding-bottom: 8px;
    padding-left: 10px;
    padding-right: 10px;
    border-radius: var(--post-r-sm);
    transition: background-color .22s var(--post-ease),
                transform .22s var(--post-ease);
}

/* ★ 章节序号：从 20px 小圆点升级为 44px 大字圆牌，成为目录的视觉锚 */
#tsPostMain .ts-post__tocNum{
    flex: 0 0 auto;
    min-width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--post-paper-warm);
    color: var(--post-brand);
    font-size: 24px;
    font-weight: 700;
    text-align: center;
    line-height: 44px;
    letter-spacing: -.02em;
}

#tsPostMain .ts-post__tocText{
    flex: 1 1 auto;
}

@media (hover: hover){
    #tsPostMain .ts-post__tocLink:hover{
        background: var(--post-paper-warm);
        transform: translateX(3px);
    }
    #tsPostMain .ts-post__tocLink:hover .ts-post__tocText{
        color: var(--post-ink);
        font-weight: 500;
    }
    #tsPostMain .ts-post__tocLink:hover .ts-post__tocNum{
        background: var(--post-brand);
        color: #FFFFFF;
    }
}

#tsPostMain .ts-post__tocLink:focus-visible{
    outline: 2px solid var(--post-brand);
    outline-offset: 3px;
    border-radius: 4px;
}


/* ==========================================================================
   5. S3 正文排版
   ========================================================================== */
#tsPostMain .ts-post__body{
    /* ★ 三轮：body 容器放到版心宽度（1280），内部段落/标题/表格仍按 --post-read 居中
       ★ 四轮：--post-read 760 → 960。原因：客户反馈正文「夹在中间太窄、排版丑」——
         760 在 1200 父容器里只占 63%，两侧各空 220px，视觉上像陷进去的窄条。
         960 时两侧各空 96px，既保可读性（≈34 字/行）又不塌中。 */
    max-width: var(--post-wide);
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--ts-gutter);
    padding-right: var(--ts-gutter);
    padding-top: var(--post-head-y);
    padding-bottom: 0;
    font-size: var(--post-fs-4);
    line-height: 1.85;
    color: var(--post-ink-soft);
}

/* 正文内部所有块级元素（段落/标题/表格/列表/引用/图片）按 --post-read(960) 居中显示 */
#tsPostMain .ts-post__body > *{
    max-width: var(--post-read);
    /* ★ 四轮（R111）：水平方向必须 !important。三类覆盖源都会打死 auto 居中——
       ① style.css:111 `#content .entry-content h2,h3{margin-left:0}` 特异度 (1,1,1) > 本规则 (1,1,0)
       ② 各元素自身规则里的 margin-left:0（四轮已改 auto，此处 !important 是双保险）
       ③ 正文行内 style（实测 figure 带 style="margin:16px 0"）→ 只有 !important 压得过
       只锁水平方向，垂直间距（margin-top/bottom）完全交给各元素自身规则（R66 单方向）。 */
    margin-left: auto !important;
    margin-right: auto !important;
}

/* 二轮：段距 20 → 24（+20%，仍在「紧凑」偏好范围内，不松散） */
#tsPostMain .ts-post__body p{
    margin-top: 0;
    margin-bottom: 24px;
    /* ★ 四轮修正（R111）：这里原写 margin-left:0，会压掉上方 `> *` 的 auto 居中，
       结果段落左对齐（left 137）而表格居中（left 233）→ 左边缘错位 96px。
       这是客户反馈「排版丑」的真因，不能只靠加宽掩盖。 */
    margin-left: auto;
    margin-right: auto;
}

#tsPostMain .ts-post__body h2{
    font-size: var(--post-fs-2);
    line-height: 1.45;
    font-weight: 600;
    color: var(--post-ink);
    letter-spacing: -.01em;
    margin-top: 40px;
    margin-bottom: 16px;
    /* R111：同 p，必须 auto 才能与表格/图片左边缘对齐 */
    margin-left: auto;
    margin-right: auto;
    padding-top: 8px;
    border-top: 1px solid var(--post-line-soft);
}

#tsPostMain .ts-post__body h3{
    font-size: var(--post-fs-3);
    line-height: 1.55;
    font-weight: 600;
    color: var(--post-ink);
    /* R81 + R111：父主题 style.css:111 只重置 margin-left，这里必须显式写 auto（不是 0），
       否则 h3 会脱离 `> *` 的居中轨道 */
    margin-top: 28px;
    margin-bottom: 12px;
    margin-left: auto;
    margin-right: auto;
}

#tsPostMain .ts-post__body h4{
    font-size: var(--post-fs-5);
    font-weight: 600;
    color: var(--post-ink);
    margin-top: 0;
    margin-bottom: 0;
    /* R111 */
    margin-left: auto;
    margin-right: auto;
}

#tsPostMain .ts-post__body strong{
    color: var(--post-ink);
    font-weight: 600;
}

#tsPostMain .ts-post__body a{
    color: var(--post-brand);
    text-decoration: underline;
    text-underline-offset: 3px;
}

@media (hover: hover){
    #tsPostMain .ts-post__body a:hover{
        color: #8F3000;
    }
}

#tsPostMain .ts-post__body ul,
#tsPostMain .ts-post__body ol{
    margin-top: 0;
    margin-bottom: 20px;
    padding-left: 24px;
    padding-right: 0;
}

#tsPostMain .ts-post__body li{
    margin-top: 0;
    margin-bottom: 8px;
}

#tsPostMain .ts-post__body li:last-child{
    margin-bottom: 0;
}

#tsPostMain .ts-post__body blockquote{
    margin-top: 24px;
    margin-bottom: 24px;
    /* R111 */
    margin-left: auto;
    margin-right: auto;
    padding-top: 4px;
    padding-bottom: 4px;
    padding-left: 18px;
    padding-right: 0;
    border-left: 3px solid var(--post-brand);
    color: var(--post-ink);
    font-size: var(--post-fs-5);
}

#tsPostMain .ts-post__body img{
    display: block;
    max-width: 100%;
    height: auto;                 /* R44 */
    border-radius: var(--post-r-md);
    margin-top: 8px;
    margin-bottom: 24px;
    margin-left: auto;
    margin-right: auto;
}

#tsPostMain .ts-post__body figcaption{
    font-size: var(--post-fs-7);
    color: var(--post-ink-mute);
    text-align: center;
    margin-top: -12px;
    margin-bottom: 24px;
}

/* 表格：正文里的对比表是本站文章的核心信息载体，样式单独给足 */
#tsPostMain .ts-post__body table{
    width: 100%;
    border-collapse: collapse;
    /* ★ 五轮：table-layout:fixed 强制按父容器宽度切列，忽略列内文最小宽度。
       实测 390 视口下，原 layout:auto 让表格列内容（thead white-space:nowrap + 长表头）
       把表格撑到 444px，超过父容器 342px → 横向溢出。fixed 后表格宽度严格 = 100% 父容器。 */
    table-layout: fixed;
    margin-top: 8px;
    margin-bottom: 24px;
    font-size: var(--post-fs-6);
    line-height: 1.7;
}

#tsPostMain .ts-post__body th,
#tsPostMain .ts-post__body td{
    text-align: left;
    vertical-align: top;
    padding-top: 12px;
    padding-bottom: 12px;
    padding-left: 14px;
    padding-right: 14px;
    border-bottom: 1px solid var(--post-line-soft);
    /* ★ 五轮：配套 —— 长中文字符在固定列宽下强制换行（默认 Chinese 不换） */
    overflow-wrap: anywhere;
}

/* ★ 二轮：表头从「暖白」改「深墨底白字」，让对比表成为正文里最跳的信息块 */
#tsPostMain .ts-post__body thead th{
    background: var(--post-ink);
    color: #FFFFFF;
    font-weight: 600;
    /* ★ 五轮：去掉 nowrap。配合 table-layout:fixed，宽屏表头短仍一行；窄屏超长允许换行 */
    border-bottom: 0;
}

#tsPostMain .ts-post__body thead tr th:first-child{
    border-top-left-radius: var(--post-r-sm);
}

#tsPostMain .ts-post__body thead tr th:last-child{
    border-top-right-radius: var(--post-r-sm);
}

#tsPostMain .ts-post__body tbody tr:last-child td{
    border-bottom: 0;
}


/* ==========================================================================
   6. S4 相关文章（同分类随机 3 篇）
   ========================================================================== */
#tsPostMain .ts-post__rel{
    padding-top: var(--post-sec-y);
}

#tsPostMain .ts-post__relTitle{
    font-size: var(--post-fs-2);
    line-height: 1.45;
    font-weight: 600;
    color: var(--post-ink);
    margin-top: 0;
    margin-bottom: 20px;
    margin-left: 0;
    margin-right: 0;
}

#tsPostMain .ts-post__relGrid{
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--post-gap);
}

#tsPostMain .ts-post__relCard{
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding-top: clamp(20px, 2.2vw, 28px);
    padding-bottom: clamp(20px, 2.2vw, 28px);
    padding-left: clamp(20px, 2.2vw, 28px);
    padding-right: clamp(20px, 2.2vw, 28px);
    background: var(--post-paper);
    border: 1px solid var(--post-line);
    /* ★ 二轮：圆角加大 + 常驻轻投影，hover 抬起更明显，像杂志推荐卡 */
    border-radius: var(--post-r-lg);
    box-shadow: var(--post-sh-1);
    text-decoration: none;
    color: inherit;
    transition: transform .28s var(--post-ease),
                border-color .28s var(--post-ease),
                box-shadow .28s var(--post-ease);
}

#tsPostMain .ts-post__relDate{
    font-size: var(--post-fs-8);
    color: var(--post-ink-mute);
    letter-spacing: .03em;
}

#tsPostMain .ts-post__relName{
    font-size: var(--post-fs-5);
    line-height: 1.6;
    font-weight: 500;
    color: var(--post-ink);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

#tsPostMain .ts-post__relMore{
    margin-top: auto;
    font-size: var(--post-fs-7);
    color: var(--post-brand);
}

@media (hover: hover){
    #tsPostMain .ts-post__relCard:hover{
        transform: translateY(-3px);
        border-color: rgba(184, 62, 0, .35);
        box-shadow: var(--post-sh-1);
    }
}

#tsPostMain .ts-post__relCard:focus-visible{
    outline: 2px solid var(--post-brand);
    outline-offset: 3px;
}

#tsPostMain .ts-post__relCard:active{
    transform: translateY(-1px);
}


/* ==========================================================================
   7. S5 咨询条（一行式兜底转化入口）
   ========================================================================== */
#tsPostMain .ts-post__ask{
    padding-top: var(--post-sec-y);
    padding-bottom: var(--post-sec-y);
}

/* ★ 二轮升级：从「暖白小条」改为「深墨大块 CTA」。
   文章页原本缺一个深色锚点（R10 要求 2 个：hero / cta），
   文章页没有 hero，故把这个收尾 CTA 做深，与页脚深墨蓝形成层次但更深一档
   （#16161E 中性深炭 vs 页脚 #0B1F3A 蓝），避免两块深色糊成一片。
   白字对比度约 17.6:1，远高于 WCAG AAA。 */
#tsPostMain .ts-post__askInner{
    /* ★ 八轮：七轮把 CTA 缩到 960 是误判——客户原意是「黑色块比上方板块**宽**出去了」
       （当时 1200 vs 上方 TOC 960，右侧多出一截），不是「要变窄」。
       客户八轮原话：「你缩短宽度这么多干嘛，要和上面的一至啊」。
       → 改回与上方相关文章行（1200）/ 正文（--post-read 1200）外缘完全对齐。
       ★★ 教训：客户说「宽了」要先问清是「比邻居宽」还是「自身太宽」——
       前者要**对齐邻居**，后者才是**收窄**。两轮改错一次，代价是客户多传一次文件。

       ★ 九轮：八轮改回 1200 后客户再看：黑色块比「卡片可见外缘」**还**宽出 24px×2
       （卡片 relInner 容器 1200 + padding var(--ts-gutter)=24 → 卡片可见 1152；
        黑色块 max-width 1200、无外边距 → 可见 1200；黑色块两侧各凸出 24px）。
       客户原话：「要和上面的宽度一样啊」→ 红色箭头标在**左/右最外两张卡片底角**。
       修法：保留 max-width=1200，加 margin-left/right: var(--ts-gutter)=24，让黑色块
       可见宽度=1200-48=1152，与卡片可见外缘（含圆角）完全对齐；同时仍与正文（1152）/
       所有内部内容（1152）保持 R111 左对齐不变量。
       ★★★ 教训：之前所有改动都没分清「容器外缘」vs「可见外缘」。
         容器 padding 算进容器宽，可见 padding 不算；
         背景色填到 padding 边界而不是 content 边界——所以光改 max-width 永远差出 padding。
         正确思路：让可见外缘 = padding 外缘，所以 inset 要用 margin 而不是改 max-width。
         （用 max-width 减 var(--ts-gutter)*2 在窄视口会被父容器 clip 失效。） */
    max-width: var(--post-read);
    margin-left: var(--ts-gutter);
    margin-right: var(--ts-gutter);
    /* ★ 四轮：客户在线上反馈「文字小一点、要和右边在一条线上」→ 改回横排。
       三轮改为垂直两行是误读了「改一行显示」——客户原意是「整条都在一行」，
       不是「文案占一行，按钮再占一行」。修正后：文案缩为「附注」一档（左贴）、
       按钮+电话为主操作（右贴、margin-left:auto 推到底）。
       宽屏允许 wrap（极窄视口仍可换行不溢出），<640 显式回退到列向。 */
    display: flex;
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
    gap: 14px 24px;
    padding-top: clamp(24px, 3vw, 40px);
    padding-bottom: clamp(24px, 3vw, 40px);
    padding-left: clamp(24px, 3.2vw, 48px);
    padding-right: clamp(24px, 3.2vw, 48px);
    background: var(--post-cta-bg);
    border-radius: var(--post-r-lg);
}

#tsPostMain .ts-post__askText{
    /* ★ 四轮：缩为附注尺寸 + 弱化色阶，让按钮+电话成为视觉主角 */
    font-size: clamp(13px, 1.4vw, 15px);
    line-height: 1.5;
    font-weight: 400;
    color: rgba(255, 255, 255, .72);
    /* 宽屏 1 行 nowrap（与按钮+电话挤在同一行）；<640 放行 wrap */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin: 0;
    flex: 1 1 auto;
    min-width: 0;
}

#tsPostMain .ts-post__askActions{
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 12px 20px;
    flex: 0 0 auto;
    margin-left: auto;   /* 推到右侧 */
}

/* R11：父主题 a.button:hover 会染色，这里显式给三态，特异度 (0,3,0)
   ★ 二轮：深墨底上的按钮反白（白底深字），比原来的深色按钮更跳、更能收口 */
#tsPostMain .ts-post__btn{
    display: inline-block;
    font-size: var(--post-fs-5);
    font-weight: 600;
    line-height: 1.2;
    color: var(--post-cta-bg);
    background: #FFFFFF;
    border-radius: var(--post-r-sm);
    padding-top: 15px;
    padding-bottom: 15px;
    padding-left: 30px;
    padding-right: 30px;
    text-decoration: none;
    transition: background-color .22s var(--post-ease),
                color .22s var(--post-ease),
                transform .22s var(--post-ease);
}

@media (hover: hover){
    #tsPostMain .ts-post__btn:hover{
        color: #FFFFFF;
        background: var(--post-brand);
        transform: translateY(-2px);
    }
}

#tsPostMain .ts-post__btn:focus-visible{
    outline: 2px solid #FFFFFF;
    outline-offset: 3px;
    color: var(--post-cta-bg);
    background: #FFFFFF;
}

#tsPostMain .ts-post__btn:active{
    color: #FFFFFF;
    background: var(--post-brand);
    transform: translateY(0);
}

#tsPostMain .ts-post__tel{
    font-size: clamp(18px, 2vw, 24px);
    font-weight: 700;
    color: #FFFFFF;
    text-decoration: none;
    letter-spacing: .02em;
}

@media (hover: hover){
    #tsPostMain .ts-post__tel:hover{
        color: #FDBA74;
        text-decoration: underline;
    }
}

#tsPostMain .ts-post__tel:focus-visible{
    outline: 2px solid var(--post-brand);
    outline-offset: 3px;
    border-radius: 4px;
}


/* ==========================================================================
   8. S6 上下篇
   ========================================================================== */
#tsPostMain .ts-post__nav{
    max-width: var(--post-wide);
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--ts-gutter);
    padding-right: var(--ts-gutter);
    /* 收尾段：下方不再有下一段，故只给较小的收口间距。
       ★ 线上 .site-content 另有 GP 默认 padding-bottom:40px（2026-09-21 实测
         nav 底 4926 → 页脚顶 4966，差 40），此处若再用 --post-sec-y(56)
         会累计成 96px 空白，与「紧凑」偏好相悖。32 + 40 = 72px 收口。 */
    padding-bottom: clamp(20px, 2.4vw, 32px);
    /* 2026-10-05：实测 .site-content 底部内边距为 0（GP 动态值已变），
       上下篇卡片与页脚之间零间距 → 补显式外边距收口。 */
    margin-bottom: clamp(28px, 3vw, 44px);
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--post-gap);
}

#tsPostMain .ts-post__navItem{
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding-top: 20px;
    padding-bottom: 20px;
    padding-left: 22px;
    padding-right: 22px;
    border: 1px solid var(--post-line-soft);
    border-radius: var(--post-r-lg);
    text-decoration: none;
    background: var(--post-paper);
    transition: border-color .24s var(--post-ease),
                box-shadow .24s var(--post-ease),
                transform .24s var(--post-ease);
}

#tsPostMain .ts-post__navItem--next{
    text-align: right;
}

/* 仅一篇导航卡片（最旧/最新文章，第二参数为 true 时只会出现上或下之一）→ 跨列铺满，避免被卡在 50% 容器里单居一侧。
   ≤640px 媒体查询已把容器切成单列，原生占满，这里也兼容（grid-column:1/-1 在单列里等于自动）。 */
#tsPostMain .ts-post__navItem:only-child{
    grid-column: 1 / -1;
}

#tsPostMain .ts-post__navLabel{
    font-size: var(--post-fs-8);
    color: var(--post-ink-mute);
    letter-spacing: .04em;
}

#tsPostMain .ts-post__navName{
    font-size: var(--post-fs-6);
    line-height: 1.6;
    color: var(--post-ink);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

@media (hover: hover){
    #tsPostMain .ts-post__navItem:hover{
        border-color: rgba(184, 62, 0, .35);
        box-shadow: var(--post-sh-1);
        transform: translateY(-2px);
    }
    #tsPostMain .ts-post__navItem:hover .ts-post__navName{
        color: var(--post-brand);
    }
}

#tsPostMain .ts-post__navItem:focus-visible{
    outline: 2px solid var(--post-brand);
    outline-offset: 3px;
}


/* ==========================================================================
   9. 响应式
   ========================================================================== */
@media (max-width: 900px){
    #tsPostMain .ts-post__relGrid{
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 640px){
    #tsPostMain{
        --post-fs-4: 16px;
    }

    /* 手机端标题均衡断行，并压缩目录高度以避开固定咨询栏。 */
    #tsPostMain{
        --post-fs-1: clamp(29px, 7.7vw, 32px);
    }
    #tsPostMain .ts-post__title{
        text-wrap: balance;
    }
    #tsPostMain .ts-post__tocTitle{
        margin-bottom: 10px;
        padding-bottom: 9px;
    }
    #tsPostMain .ts-post__tocItem{
        margin-bottom: 4px;
    }
    #tsPostMain .ts-post__tocLink{
        gap: 10px;
        padding-top: 4px;
        padding-bottom: 4px;
    }
    #tsPostMain .ts-post__tocNum{
        min-width: 40px;
        height: 40px;
        font-size: 20px;
        line-height: 40px;
    }

    #tsPostMain .ts-post__relGrid{
        grid-template-columns: minmax(0, 1fr);
    }

    #tsPostMain .ts-post__nav{
        grid-template-columns: minmax(0, 1fr);
    }

    #tsPostMain .ts-post__navItem--next{
        text-align: left;
    }

    #tsPostMain .ts-post__askInner{
        flex-direction: column;
        align-items: flex-start;
    }

    /* ★ 四轮：窄屏放行文案换行（避免 nowrap + ellipsis 截掉太多） */
    #tsPostMain .ts-post__askText{
        white-space: normal;
        overflow: visible;
        text-overflow: clip;
    }

    #tsPostMain .ts-post__askActions{
        justify-content: flex-start;
        margin-left: 0;          /* ★ 四轮：列向时清掉横排的 auto 推右 */
    }

    #tsPostMain .ts-post__body h2{
        margin-top: 32px;
    }

    #tsPostMain .ts-post__body table{
        font-size: var(--post-fs-7);
    }

    #tsPostMain .ts-post__body th,
    #tsPostMain .ts-post__body td{
        padding-left: 10px;
        padding-right: 10px;
    }
}


/* ==========================================================================
   10. 降低动效偏好 / 打印（R48 豁免，2026-09-21 补齐项目一致性缺口）
   --------------------------------------------------------------------------
   此前 single.css 是项目 11 套 CSS 中唯一缺这两块的。补齐以满足：
   · prefers-reduced-motion：用户系统设置降低动效时，所有过渡归零；
   · print：客户常把方案页直接打印给老板看，所以正文要简洁，去掉 TOC / 咨询条
     / 相关文章 / 上下篇 / 面包屑，深色背景去色，链接附 URL。
   ========================================================================== */
@media (prefers-reduced-motion: reduce){
    #tsPostMain .ts-post__tocLink,
    #tsPostMain .ts-post__relCard,
    #tsPostMain .ts-post__btn,
    #tsPostMain .ts-post__tel,
    #tsPostMain .ts-post__navItem{
        transition: none;
    }
}

@media print{
    /* 链接后追加 URL，方便纸面阅读时知道跳到哪 */
    #tsPostMain .ts-post__body a[href^="http"]::after,
    #tsPostMain .ts-post__body a[href^="/"]::after{
        content: " (" attr(href) ")";
        font-size: 12px;
        color: #6B7280;
    }
    #tsPostMain .ts-post__body a[href^="#"]::after{
        content: "";
    }

    /* 隐藏非正文模块：客户打印方案时只需正文 */
    body.single-post .breadcrumb-container,
    #tsPostMain .ts-post__toc,
    #tsPostMain .ts-post__rel,
    #tsPostMain .ts-post__ask,
    #tsPostMain .ts-post__nav{
        display: none;
    }

    /* 正文回到纯白底黑字，去除暖色底与橙色 */
    #tsPostMain .ts-post__body{
        max-width: 100%;
        padding-left: 0;
        padding-right: 0;
        color: #000000;
        font-size: 12pt;
    }

    #tsPostMain .ts-post__body a{
        color: #000000;
        text-decoration: underline;
    }

    #tsPostMain .ts-post__body h2,
    #tsPostMain .ts-post__body h3{
        color: #000000;
        border: 0;
        page-break-after: avoid;
    }

    #tsPostMain .ts-post__body img{
        max-width: 80%;
        page-break-inside: avoid;
    }

    #tsPostMain .ts-post__body table{
        font-size: 11pt;
        page-break-inside: avoid;
    }

    /* 标题区：h1 不分页，作者信息保留 */
    #tsPostMain .ts-post__head{
        max-width: 100%;
        padding-left: 0;
        padding-right: 0;
    }

    #tsPostMain .ts-post__title{
        font-size: 22pt;
        color: #000000;
    }
}