/* ============================================
   二级 / 三级页面 通用布局 subpage.css
   功能：面包屑 + 双栏骨架（左栏 + 右栏）+ 右栏标题条
        + 列表网格 + 分页条
   ------------------------------------------------------------
   写法约定（与全站一致）：
     · 手机优先：先写移动端基础样式，紧跟 min-width 媒体查询增强
     · 断点全站统一：768 / 992 / 1200 / 1400
     · 间距 / 字号用 cqw + clamp 流体缩放，不写死像素上限
       （cqw 的容器是 .right-frame —— 见下方 container-type）
     · 首页不加载本文件，所以首页速度不受影响
   最后更新：2026-10-26（新建）
   ============================================ */


/* ============================================
   1. 中部外框
   老站用 .web-main-frame / .web-main 两层，这里保留同名，
   方便和老站对照。视觉上只负责上下留白，宽度交给 .container
   ============================================ */
.web-main-frame {
  padding-block: 1.25rem 1.75rem;
  background-color: var(--color-bg-tertiary);              /* 与首页各板块一致的浅灰底 */
}


/* ============================================
   2. 面包屑导航（老站 .subnavigation）
   HTML 由 components/breadcrumb.php 自动生成：
     <nav class="sub-nav">
       <span class="sub-nav-label">当前位置：</span>
       <ol class="sub-nav-list"><li><a>…</a></li>…</ol>
     </nav>
   分隔符（›）用 CSS 画，不用在 HTML 里写符号
   ============================================ */
.sub-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;                               /* 2026-10-26：「当前位置」与路径之间大幅放宽 */
  /* 2026-10-26：借鉴老站 .subnavigation —— 白底块 + 底部红线
     （老站：height:42px; background:#fff; border-bottom:2px solid #cb0404）
     新版改成卡片式写法：白底 + 细灰框 + 3px 红色下边框，
     既有底色块和红线，又和右栏标题条下那条红色短线呼应，风格统一 */
  padding: 0.625rem 1rem 0.625rem 2rem;    /* 2026-10-26：左内边距 1rem → 2rem，整条内容右移约 1rem */
  margin-bottom: 1rem;
  background-color: var(--color-bg-light);
  border: 1px solid var(--color-border-gray);
  border-bottom: 3px solid var(--color-primary);
  /* 2026-10-26：字号全程流体（rem + vw，不用 px），小屏也会变：
     320px 约 14px → 768px 约 15.8px → 1100px 起封顶 17px
     只把普通屏（手机/常见桌面）调小一档，超大屏另见下面的 2560 媒体查询还原，
     不会让巨幕上的面包屑跟着变小 */
  font-size: clamp(0.875rem, 0.75rem + 0.5vw, 1.0625rem);
  line-height: 1.6;
  color: var(--text-secondary);
}

/* ≥2560px（2K / 4K 巨幕、大屏展陈）：还原改前的字号上限 1.1875rem，
   与 base.css 的根字号放大同步 —— 屏越大字越大，不因普通屏的微调而变小 */
@media (min-width: 2560px) {
  .sub-nav { font-size: 1.1875rem; }
}

.sub-nav-label {
  flex-shrink: 0;                          /* 「当前位置：」不换行、不被压缩 */
  display: inline-flex;                    /* 让前面的图标与文字垂直居中对齐 */
  align-items: center;
  gap: 1rem;                               /* 2026-10-26：图标与文字的间隙，拉到 1rem 才醒目 */
  color: var(--text-secondary);
}

/* 「当前位置：」前面的小房子图标（2026-10-26 第三版：改用内联 SVG）
   为什么不再用图标字体：字形的大小、基线都由字库决定，
   即使容器按中线对齐，字形在 em 框里本身也是偏的，
   一旦放大就必然"看着沉下去"，用 top / translateY 硬挪只能对某一个字号有效。
   SVG 的做法：宽高写多少就占多少，剩下的交给 flex 的 align-items:center，
   中线永远精确；而且 SVG 是矢量，2K/4K/投影放大都不糊，不会像 PNG 那样出锯齿 */
.sub-nav-icon {
  flex: 0 0 auto;                          /* 不参与收缩，宽高始终按下面的值 */
  width: 1.15em;                           /* 跟随正文字号：16px 文字时约 18px */
  height: 1.15em;
  /* 房子图形（红色 #d21126）：房子外轮廓 + 中间的门洞（fill-rule:evenodd 挖空） */
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23d21126' fill-rule='evenodd' d='M12 2.4 1.7 11.3l1.5 1.7 1.9-1.6V21a.8.8 0 0 0 .8.8h12.2a.8.8 0 0 0 .8-.8v-9.6l1.9 1.6 1.5-1.7zM10.4 13.6h3.2v4.6h-3.2z'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
}

.sub-nav-list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;                            /* 2026-10-26：各级之间再松一档 */
  list-style: none;
}

/* 2026-10-26：解决「› 与文字一起下沉」的问题。
   原因：li 里同时有 2.2em 的 ›（::before）和正常字号的文字，
   行内元素默认按「基线」对齐 —— 36px 的 › 基线落在行盒靠下的位置，
   16px 的文字就被带着掉到下面，看起来"字沉下去了"，字号越大越明显。
   办法：把 li 也改成 inline-flex + align-items: center，
   › 和文字变成并排的两个盒子、按中线对齐，不再看基线，下沉即消失 */
.sub-nav-list li {
  display: inline-flex;
  align-items: center;
}

/* 层级之间的分隔符（2026-10-26 第三版：把字符 › 换成 SVG 箭头）
   为什么换掉：› 是字符，字形大小、基线由字体决定，
   放到 2.2em 后左右和上下都会"看着偏"，跟文字凑在一起很不整齐。
   换成 SVG 箭头后：宽高固定 1.1em，箭头画在 viewBox 正中间，
   交给 li 的 align-items:center 对齐 —— 上下左右都精确，
   而且是矢量，屏幕再大也清晰 */
.sub-nav-list li + li::before {
  content: '';
  flex: 0 0 auto;
  width: 1.25em;                           /* 箭头尺寸，跟随正文字号（16px 文字时约 20px） */
  height: 1.25em;
  margin-right: 0.75rem;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b0b0b0' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 4.5 16.5 12 9 19.5'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
}

/* 前面层级（可点击的链接）：深黑 --text-dark 常规体 ——
   深色表示"可点击"，悬停变红；最后一级浅灰 #999 表示不可点 */
.sub-nav-list a {
  color: var(--text-dark);
  transition: color 0.2s ease;
}

.sub-nav-list a:hover {
  color: var(--color-primary);
}

/* 当前页（最后一级）：灰色不可点 —— 灰色表示"不可点击"，
   一眼能看出"我在这一页"；若灰色用在前面，会被误认为前面层级也不能点。
   字重 500：微软雅黑只有 400/700 两档，写 600 会被渲染成 700 太粗，
   500 在雅黑下按 400 常规体显示，只靠灰色区分当前页 */
.sub-nav-list li[aria-current="page"] span {
  color: var(--text-secondary);
  font-weight: 500;
}


/* ============================================
   3. 双栏骨架（老站 .middle-page > .left-frame + .right-frame）
   手机端：单列，内容在上、左栏在下（用户在手机上先看内容）
   ≥992px：左栏固定 24% 宽，右栏占剩余
   ============================================ */
.sub-body {
  display: grid;
  grid-template-columns: 1fr;              /* 手机：单列 */
  gap: 1.5rem;
}

/* 手机端把左栏排到内容后面 */
.right-frame { order: 1; }
.left-frame  { order: 2; }

/* 不加左栏的页面（例如纯表单页）用 .sub-body-single */
.sub-body-single {
  grid-template-columns: 1fr;
}

/* ≥992px：真正的双栏 */
@media (min-width: 992px) {
  .sub-body {
    /* 左栏收窄到 20%（原 24%），右栏更宽；gap 用容器百分比，
       两侧留白比例任何屏宽都一致 */
    grid-template-columns: 20% 1fr;
    gap: 2.5%;
    align-items: start;                    /* 两栏各自从顶部开始，不互相拉伸 */
  }
  /* 无左栏的单栏页（搜索、纯表单等）：永远保持单列 1fr */
  .sub-body-single {
    grid-template-columns: 1fr;
    gap: 0;
  }
  .right-frame { order: 0; }
  .left-frame  { order: 0; }
}


/* ============================================
   4. 右栏
   这里设成宽度容器（container-type），
   因此右栏内的 cqw（1cqw = 右栏宽的 1%）会随左栏占位自动缩放，
   比用 vw 更准 —— 有左栏和没左栏时网格密度都合适
   ============================================ */
.right-frame {
  container-type: inline-size;
  min-width: 0;                            /* 防止 grid/flex 内长内容把列撑破 */
  background-color: var(--color-bg-light);
  /* 手机 / 平板：留内边距，内容不贴边 */
  padding: 1.25rem;
}

/* ≥992px：复刻老站几何 —— 老站 .right-frame 本身无内边距，
   左右留白由标题条（居中）和作品网格（左右各 24px）各自负责 */
@media (min-width: 992px) {
  .right-frame { padding: 0 0 1.25rem; }
}


/* ============================================
   5. 右栏标题条（1:1 复刻老站 .righttop）
   老站结构：左侧小方块图标 + 中文 28px 红字 + 英文 16px，同一行；
             下方一条灰色分隔线，整体宽 920px 居中。
   文字仍由 page-top.php 从 config.php 的 $NAV 自动填，页面不用写。
   ============================================ */
.right-top {
  display: flex;
  align-items: center;                      /* 外层只负责把整行垂直居中 */
  box-sizing: border-box;
  /* 老站标题条外盒 = 920px 内容宽 + 58px 左内边距 = 978px，
     占 1040px 右栏的 94%。用百分比而非固定像素：
     右栏随版心变宽变窄时，图标、标题、红字与作品网格的相对位置保持不变 */
  width: 94%;
  min-height: 3.75rem;                      /* 老站 60px */
  margin: 0.625rem auto 1.25rem;
  padding-left: 3.625rem;                   /* 老站 58px：给左侧红色方块留位置 */
  border-bottom: 1px ridge var(--color-gray);            /* 老站 ridge 灰线 */
  /* 红色方块原本是 background-image: square.jpg（纯红实心块）
     —— 2026-11-02 改为 ::before 伪元素 + 品牌红变量：
     颜色改一处全站生效、跟随屏幕变焦、零图片请求 */
  position: relative;
}

/* 标题条左侧红色方块：纯 CSS，替代原 square.jpg 背景图
   尺寸与右侧 h1 标题**完全相同**——直接抄标题的 clamp 公式，
   任何终端下方块 = 标题字号。
   ★ 用 :not() 排除广告大类 / 小类页自写的标题条
     （right-top--cat / right-top--subcat，见 advertising/category.php 第120行）：
     这 36 个页面有自己专属的红线装饰，不再重复叠红方块。 */
.right-top:not(.right-top--cat):not(.right-top--subcat)::before {
  content: '';
  position: absolute;
  display: block;
  left: 1.25rem;                            /* 老站 background-position 20px */
  top: 50%;
  transform: translateY(-50%);
  width:  clamp(1.125rem, 5cqw, 1.75rem);   /* 与 .right-top-title 完全一致 */
  height: clamp(1.125rem, 5cqw, 1.75rem);
  background-color: var(--color-brand-red); /* #c31d38，与标题红同源 */
}

/* 内层用基线对齐：中英文按各自的文字基线排在一行，
   而不是按盒子中线 —— 老站正是这种效果（英文底边与中文底边齐平） */
.right-top-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 1.125rem;                          /* 老站：中文与英文间隔 18px */
}

/* 手机：标题条占满，图标贴左，避免 94% + 58px 内边距把文字挤成一列 */
@media (max-width: 767px) {
  .right-top {
    width: 100%;
    padding-left: 2.75rem;
  }
  .right-top::before {
    left: 0.75rem;                            /* 手机端 padding-left 改为 44px，方块也相应左移 */
  }
}

.right-top-title {
  /* 2026-10-26：字号随右栏宽度流体缩放，避免窄屏中英文撑破溢出。
     用 cqw（1cqw = 右栏宽的1%）而非 vw：有左栏占位时右栏变窄，
     字号也同步缩小，比 vw 更贴合实际可用空间。
     取值：≤窄屏约 18px → 随右栏线性放大 → 桌面封顶 28px（老站原值） */
  font-size: clamp(1.125rem, 5cqw, 1.75rem);
  font-weight: 700;
  line-height: 1.2;
  color: var(--color-brand-red);             /* 品牌红（老站标题红）#c31d38 */
}

/* 老站标题本身是链接：2026-11-02 对调——默认黑字，悬停变品牌红
   （原为默认红、悬停黑；黑字更稳，红色留给交互反馈） */
.right-top-title a {
  color: var(--color-black);
  transition: color 0.2s ease;
}

.right-top-title a:hover {
  color: var(--color-brand-red);
}

/* 英文副标题：16px、黑色、不再全大写（与老站 .rig-top-txt 一致）
   字体也按老站来：老站 body 用的是 Microsoft YaHei，拉丁字母比
   新版默认的 Segoe UI 更饱满，换回来后与老站字形、视觉大小一致 */
.right-top-en {
  font-family: "Microsoft YaHei", "Hiragino Sans GB", "Helvetica Neue", Arial, sans-serif;
  /* 2026-10-26：与中文标题同步流体缩放，窄屏约 12px → 桌面封顶 16px */
  font-size: clamp(0.75rem, 2.5cqw, 1rem);
  line-height: 1.2;
  color: var(--color-black);
}


/* ============================================
   6. 作品 / 文章 列表网格（1:1 复刻老站 .right-middle）
   老站每个 .content-frame 宽 230px、图片框 230×230、标题条高 36px，
   卡片间距 24px，每行 4 个；这里用 Grid 实现同样观感，列数随屏宽自适应
   HTML：
     <ul class="list-grid">
       <li class="list-card"><a><img><h3><span>标题</span></h3></a></li>
     </ul>
   ============================================ */
.list-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2.5rem 1rem;                          /* 行距 40px（老站卡片下边距） */
  list-style: none;
}

@media (min-width: 768px) {
  .list-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2.5rem 1.25rem; }
}

@media (min-width: 992px) {
  /* 老站：4 个 230px 卡片 + 3 个 24px 间隙 + 左右各 24px = 1040px 刚好铺满右栏。
     行距 50px = 老站卡片固定高度 286px 中的 10px 余量 + 40px 下边距。
     2026-10-26：左右内边距 1.5rem → 2.5rem，一行两侧留白加宽，卡片随之收窄 */
  .list-grid { padding-inline: 2.5rem; row-gap: 3.125rem; }
}

@media (min-width: 1200px) {
  /* 2026-10-26：列距 1.5rem → 2.25rem，配合左右 2.5rem 留白，
     每列卡片比原来窄一档，正方形图片框同步变小 */
  .list-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 3.125rem 2.25rem;
    padding-inline: 3rem;
  }
}

/* 卡片：老站外层无边框，只有图片外框和灰色标题条 */
.list-card {
  background-color: var(--color-bg-light);
}

.list-card a {
  display: block;
  position: relative;
}

/* 图片框：正方形 1:1，图按原比例完整放进框里并居中（老站 .frame-images + .responsive-box） */
.list-card img {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  padding: 0.5rem;                          /* 老站图片四周 5px 留白；2026-10-26 加到 8px，框内更透气 */
  object-fit: contain;
  background-color: var(--color-bg-light);
  border: 1px solid var(--color-gray);
  transition: opacity 0.5s ease;
}

/* 悬停：图片变淡（老站 opacity .7） */
.list-card a:hover img {
  opacity: 0.7;
}

/* 标题条：230×36 灰底（#ECECEC）、14px、单行居中，悬停变红底白字 */
.list-card h3 {
  display: block;
  height: 2.25rem;
  margin: 0.625rem 0 0;                     /* 老站图片与标题条间隔 10px */
  padding: 0 0.625rem;
  background-color: #ececec;
  color: var(--color-black);                               /* 老站标题条文字为链接默认黑色，不是灰色 */
  font-size: 0.875rem;
  font-weight: normal;
  line-height: 2.25rem;
  text-align: center;
  overflow: hidden;
  transition: background-color 0.3s ease, color 0.3s ease;
}

.list-card h3 span {
  display: block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.list-card a:hover h3 {
  background-color: #b00;
  color: var(--text-light);
}


/* ============================================
   7. 分页条（1:1 复刻老站 .yeshu）
   老站：居中、下方灰线、条目 5px/7px 内距、灰框灰字、当前页红底白字
   HTML：<nav class="pager"><a>首 页</a>…<span class="is-current">1</span>…</nav>
   ============================================ */
.pager {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;                             /* 比老站 4px 略松，按钮不挤在一起 */
  width: 87.7%;                              /* 老站 912px / 右栏 1040px；纯百分比不封顶，
                                                宽屏收窄屏横线都与右栏保持同一比例 */
  margin: 3rem auto 2.25rem;                 /* 上间距 3rem：与上面作品网格拉开一点 */
  padding-bottom: 1.75rem;                   /* 老站线下留白 30px，收紧一点更利落 */
  border-bottom: 1px solid var(--color-gray);
}

/* 按钮基础：统一 30px 高、3px 圆角、极轻投影，数字和文字按钮同高。
   30px 是页面里最耐看的一档：比老站 40px 明显利落，又不至于小到难点。
   数字用 tabular-nums，1~9 与 10 以上页码宽度一致，换页时不抖动 */
.pager a,
.pager span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  min-width: 1.875rem;
  min-height: 1.875rem;
  padding: 0 0.6875rem;
  border: 1px solid #d9d9d9;
  border-radius: 0.1875rem;
  background-color: var(--color-bg-light);
  /* 2026-10-26：字号改为随右栏宽度流体缩放 —— 小屏 12px，常规桌面封顶 14px（老站原值） */
  font-size: clamp(0.75rem, 2cqw, 0.875rem);
  font-variant-numeric: tabular-nums;        /* 数字等宽，页码不跳动 */
  line-height: 1;
  color: #4a4a4a;
  box-shadow: 0 0.0625rem 0.0625rem rgba(0, 0, 0, 0.03);
  transition: color 0.16s ease, background-color 0.16s ease,
              border-color 0.16s ease, box-shadow 0.16s ease,
              transform 0.1s ease;
}

/* 文字按钮（首页 / 上一页 / 下一页 / 末页）左右多留一点内距 */
.pager-step {
  padding-inline: 0.6875rem;
}

/* 数字按钮：固定为 30×30 的方块，不随位数变宽 */
.pager-num {
  padding-inline: 0;
  width: 1.875rem;
}

/* 页面到头时不可点：灰字浅底、无投影，鼠标不变手型 */
.pager .is-disabled {
  color: #c2c2c2;
  background-color: #fbfbfb;
  border-color: #ececec;
  box-shadow: none;
  cursor: default;
}

/* 悬停：品牌红实心 + 柔和红色投影，按下时轻微下沉，手感更接近实体键 */
.pager a:hover {
  border-color: #b00;
  background-color: #b00;
  color: var(--text-light);
  box-shadow: 0 0.125rem 0.3125rem rgba(176, 0, 0, 0.2);
}

.pager a:active {
  transform: translateY(0.0625rem);
  box-shadow: 0 0.0625rem 0.125rem rgba(176, 0, 0, 0.18);
}

/* 键盘聚焦时给一圈淡红描边，鼠标点击不出现 */
.pager a:focus-visible {
  outline: 2px solid rgba(204, 0, 0, 0.35);
  outline-offset: 0.0625rem;
}

/* 当前页：红底白字，同款圆角，投影比普通按钮略深一点 */
.pager .is-current {
  border-color: var(--color-brand-red);
  background-color: var(--color-brand-red);
  color: var(--text-light);
  font-weight: 600;
  box-shadow: 0 0.125rem 0.3125rem rgba(195, 29, 56, 0.22);   /* 品牌红 #c31d38 的 22% 透明投影 */
}

/* 页码跳转：输入框 + 跳转按钮，与分页按钮同高（30px），放在「下一页」之后、「末页」之前。
   不设 margin，间距完全交给 .pager 的 gap 控制，与前后按钮间距一致 */
.pager-jump {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;                              /* 输入框与跳转按钮之间的间距，与 .pager gap 一致 */
  border: none;
  background: transparent;
  min-width: 0;
  padding: 0;
}
.pager-jump-input {
  width: 2.75rem;
  height: 1.875rem;                           /* 与 .pager a 同高 30px */
  padding: 0;
  border: 1px solid #d9d9d9;
  border-radius: 3px;
  text-align: center;
  font-size: 0.8125rem;
  line-height: 1.875rem;
  color: var(--text-dark);
  background-color: var(--color-bg-light);
  /* 隐藏 number 输入框的上下箭头，保持外观整洁 */
  -moz-appearance: textfield;
}
.pager-jump-input::-webkit-outer-spin-button,
.pager-jump-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.pager-jump-btn {
  height: 1.875rem;
  padding: 0 0.5rem;
  border: 1px solid #d9d9d9;
  border-radius: 3px;
  background-color: var(--color-bg-light);
  color: var(--text-dark);
  font-size: 0.8125rem;
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease;
}
.pager-jump-btn:hover {
  border-color: var(--color-brand-red);
  color: var(--color-brand-red);
}


/* ============================================
   8. 详情页（三级页面）专用：图文区 + 参数表 + 上一篇/下一篇 + 正文
   HTML 见 calligraphy/detail.php 与 embroidery/detail.php（数据驱动详情页）
   ============================================ */

/* 8.1 顶部图文区：手机上图片在上、信息在下；≥768px 左右并排 */
.detail-hero {
  display: grid;
  grid-template-columns: 1fr;
  align-items: center;                       /* 图片与右侧文字块垂直居中，横幅作品上下留白均匀 */
  /* 图与右侧文字的距离随右栏宽度流体收缩（12px → 28px）：
     屏越窄间距越小，不会只剩图片在缩、中间还留一大段空白 */
  gap: clamp(0.75rem, 3cqw, 1.75rem);
  padding-bottom: clamp(1rem, 3cqw, 1.75rem);
  /* 比下方各块略宽一些（95%），右侧不再单独留边距 */
  width: 95%;
  margin-inline: auto;
}

@media (min-width: 768px) {
  /* 竖幅作品是长条，给图片 34% 宽度即可，其余留给文字信息 */
  .detail-hero { grid-template-columns: 34% 1fr; }

  /* 绣画多为横幅，图片列适当加宽，画面不会被压得太小 */
  .detail-hero-embroidery { grid-template-columns: 40% 1fr; }
}

/* 主图（2026-11-05 仿老站 .containera-above-left 重做）：
   方形外框（老站 380×380）、图与框之间留边距（老站 padding 10px）、
   框与外层四周留边距（老站 margin 20px）；图片在框内等比缩放居中 */
.detail-hero-img {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1 / 1;                         /* 方形外框 */
  /* 框与外层四周边距：也改成流体 8px → 20px（老站 20px），窄屏不浪费空间 */
  margin: clamp(0.5rem, 1.8cqw, 1.25rem);
  padding: 0.625rem;                           /* 图与框之间边距（老站 10px） */
  border: 1px solid #ccc;
  background-color: #fafafa;                   /* 图片未填满处的留白底色 */
}

.detail-hero-img img {
  display: block;
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;                                /* 等比缩放，不裁切不拉伸 */
}

/* ≥768px 两栏：去掉图片框的右外边距。
   图与文字之间的距离只由 .detail-hero 的 gap 决定，
   屏变窄时间距跟着变窄，不会被固定 20px 一直顶着 */
@media (min-width: 768px) {
  .detail-hero-img { margin-right: 0; }
}

.detail-hero-info {
  min-width: 0;                              /* 防止长标题把两栏撑破 */
}

/* 8.2 详情页大标题（本页的 h1）
   底部横线仿老站 .content-title（border-bottom 1px solid #CCC） */
.detail-title {
  font-size: clamp(1.125rem, 0.95rem + 0.9vw, 1.625rem);
  font-weight: 700;
  line-height: 1.35;
  color: var(--text-dark);
  padding-bottom: 0.5rem;
  border-bottom: 1px solid #ccc;             /* 标题下横线（老站同款） */
  margin-bottom: 0.75rem;
}

/* 8.3 摘要框（仿老站 .content-entry-excerpt）：浅灰底 + 细边框 */
.detail-excerpt {
  padding: 0.75rem;
  margin-bottom: 1rem;
  border: 1px solid #efefef;
  background-color: #fbfbfb;
  /* 2026-11-05：比全站正文小一号，仍随屏宽流式缩放 */
  font-size: clamp(0.8125rem, 0.78rem + 0.15vw, 0.9375rem);
  line-height: 1.8;
  color: #999;                               /* 老站摘要灰 */
}

/* 第一段：最多两行，超出行尾自动省略号 */
.detail-excerpt .excerpt-para1 {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

/* 第二段：只占一行，超出行尾省略号 */
.detail-excerpt .excerpt-para2 {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* 8.4 参数表：左侧标签、右侧内容，行间细分隔线 */
.detail-attrs {
  display: grid;
  grid-template-columns: 6em 1fr;
  gap: 0;
  margin-bottom: 1.25rem;
  font-size: 0.875rem;
  list-style: none;
}

.detail-attrs dt,
.detail-attrs dd {
  padding: 0.3125rem 0.75rem;             /* 2026-11-05：上下内距收窄，八行更紧凑 */
  border-bottom: 1px solid #f2f2f2;
}

.detail-attrs dt {
  color: var(--text-secondary);
  background-color: #fcfcfc;
  white-space: nowrap;
}

.detail-attrs dd {
  color: #444;
  overflow-wrap: anywhere;
}

/* 8.5 行动按钮（联系我们） */
.detail-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.5rem;
  padding: 0 1.5rem;
  background-color: var(--color-primary);
  color: var(--text-light);
  font-size: 0.9375rem;
  transition: background-color 0.2s ease;
}

.detail-btn:hover {
  background-color: var(--color-primary-dark);
}

/* 8.6 上一篇 / 下一篇（2026-11-05 仿老站 .left_next / .right_next 的布置：
   左右各 45%、加粗、两端箭头，不再用带边框的卡片；
   字号与行高改为流体：随右栏宽度 cqw 与视口 vw 平滑变化） */
.prev-next {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem;
  width: 90%;                                /* 比上下各块略收一点，两行文字不顶边 */
  margin: 0 auto clamp(0.75rem, 2cqw, 1.25rem);
  font-size: clamp(1rem, 0.92rem + 0.35vw, 1.125rem);   /* 16px → 18px */
  font-weight: 700;
}

/* 每侧默认整行，≥768px 各占 45%（老站比例） */
.prev-next > div {
  min-width: 0;
  flex: 1 1 100%;
}

@media (min-width: 768px) {
  .prev-next > div { flex: 0 1 45%; }
  .prev-next .is-next { text-align: right; }   /* 下一篇靠右对齐 */
}

.prev-next a,
.prev-next .is-disabled {
  box-sizing: border-box;
  position: relative;                          /* 箭头用绝对定位的伪元素，文字仍可省略 */
  display: block;
  width: 100%;
  min-width: 0;
  /* 行高流体：小屏 40px → 大屏 60px（老站 60px）；
     line-height 同时用作文字垂直居中，箭头与文字才能对齐 */
  min-height: clamp(2.5rem, 1.5rem + 2.5cqw, 3.75rem);
  line-height: clamp(2.5rem, 1.5rem + 2.5cqw, 3.75rem);
  color: var(--text-dark);
  /* 单行超长省略，防止长标题把版面顶歪 */
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  transition: color 0.2s ease;
}

/* 箭头（2026-11-05）：老站 left_next/right_next.gif 是 15×27px 浅灰斜角，
   这里改用 CSS mask 画同比例斜角 —— 无图片请求、颜色可控、粗细不随缩放变虚；
   尺寸流体（20px → 27px），比文字明显高，与老站观感一致。
   默认朝左（上一篇），.is-next 覆盖为朝右 */
.prev-next a::before {
  content: '';
  position: absolute;
  top: 50%;
  translate: 0 -50%;
  height: clamp(1.375rem, 2.5cqw, 1.8125rem);  /* 22px → 29px（老站 27px，2026-11-05 放大 2px） */
  aspect-ratio: 15 / 27;                       /* 老站原图比例 15:27 */
  background-color: #c6c6c6;                   /* 老站原图灰 */
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 15 27'%3E%3Cpath d='M12.5 2 2.5 13.5 12.5 25' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 15 27'%3E%3Cpath d='M12.5 2 2.5 13.5 12.5 25' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: background-color 0.2s ease;
}

/* 上一篇：箭头贴最左，文字右侧留出箭头位置 */
.prev-next .is-prev a {
  padding-left: 1.5rem;
}

.prev-next .is-prev a::before {
  left: 0;
}

/* 下一篇：箭头贴最右，文字右对齐 */
.prev-next .is-next a {
  padding-right: 1.5rem;
  text-align: right;
}

.prev-next .is-next a::before {
  right: 0;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 15 27'%3E%3Cpath d='M2.5 2 12.5 13.5 2.5 25' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 15 27'%3E%3Cpath d='M2.5 2 12.5 13.5 2.5 25' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.prev-next a:hover {
  color: var(--color-primary);                /* 老站悬停变红 #cd0000 */
}

.prev-next a:hover::before {
  background-color: var(--color-primary);     /* 箭头同色变红 */
}

/* 到头了：灰字不可点，与可点的两项明显区分 */
.prev-next .is-disabled {
  color: #b9b9b9;
  cursor: default;
}

/* 8.7 内容小标题（作品展示 / 装裱效果 / 局部展示）
   2026-11-06 统一为红色纹样背景条：六个栏目三级页的所有展示小标题共用一套，
   白字居中、字距拉开；背景宽 43%（43cqw），高度按原图比例 4.617 等比缩放，
   不随屏幕变形；标题块宽度仍由 8.11 节的 92% 统一控制 */
.detail-block-title {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 9.31cqw;                           /* = 43cqw ÷ 原图比例 4.617，正好容纳背景条 */
  margin-block: clamp(1.25rem, 3cqw, 1.75rem) 0;  /* 下方留白由展示图上方间距承担 */
  font-size: clamp(0.875rem, calc(0.7rem + 0.8vw - 2px), 1.625rem);  /* 流式字号：14 → 24.6 → 26px */
  line-height: 1;                            /* 行盒与字形同高，配合 align-items 真正垂直居中 */
  font-weight: 700;
  --detail-title-spacing: clamp(0.4em, 0.15em + 1.3vw, 0.9em);  /* 字距流式：窄屏 0.4em → 宽屏 0.9em */
  letter-spacing: var(--detail-title-spacing);
  text-indent: var(--detail-title-spacing);  /* 与字距一致，补偿末字后的空隙，视觉居中 */
  color: #fff;
  text-align: center;
  background: url('../images/subpage/title-bg.svg') center / 43cqw auto no-repeat;
}

/* 「详细介绍」标题条（2026-11-05 仿老站 .detailed-introduction）：
   深灰通栏 + 左侧红底白字标签；高度、标签宽、字号全部流体，
   随右栏宽度（cqw 容器 .right-frame）与视口平滑变化，手机不挤、大屏不空 */
.detail-intro-title {
  display: flex;
  align-items: center;
  min-height: clamp(2rem, 1.5rem + 2cqw, 2.25rem);        /* 32px → 36px */
  margin-block: clamp(0.75rem, 2cqw, 1rem);
  background-color: #333;
}

.detail-intro-title span {
  align-self: stretch;                                   /* 红标签铺满标题条高度 */
  display: flex;
  align-items: center;
  justify-content: center;
  width: clamp(6.5rem, 25cqw, 12.5rem);                  /* 手机约 104px → 大屏 200px（老站 200px） */
  background-color: #cd0000;
  color: #fff;
  font-size: clamp(0.8125rem, 0.78rem + 0.15vw, 0.9375rem);
  font-weight: 700;
}

/* 8.8 正文段落（2026-11-06 收紧段距：首行缩进两格，行距 1.5、段间距 0.5em） */
.detail-text p {
  margin-block: 0.5em;                       /* 上下各 8px（16px 字号时），段与段不再显得松散 */
  text-indent: 2em;
  font-size: var(--font-size-body);
  line-height: 1.5;                          /* 行内行距 16px × 1.5 = 24px */
  color: #444;
}

/* 8.9 展示大图（2026-11-06 改）：按图片自身横竖自动分两档，全部等比缩放、居中
   横图 = 右栏宽度的 88%，竖图 = 52%（竖图若用 88% 会被拉得又高又长）。
   横竖类名由 components/config.php 的 showcase_img_class() 读图片像素后输出，
   新增图片不用手写类名，放进去就自动分档。
   cqw 的基准是 .right-frame，所以 88cqw / 52cqw 就是「右栏宽度的 88% / 52%」 */
.detail-showcase img {
  display: block;
  width: 88cqw;                              /* 横图：右栏的 88%，在外层 92% 的框内居中 */
  height: auto;                              /* 高度按原图比例自动，永远等比不变形 */
  margin: 0 auto 1rem;
  border: 1px solid var(--color-border-gray);
}

.detail-showcase img.is-portrait {
  width: 52cqw;                              /* 竖图：右栏的 52% */
}

/* 8.10 相关说明（2026-11-05 仿老站 .explain）：
   细边框盒 + 顶部「相关说明」红标签条，下方小字内容。
   ★ 尺寸全部用 clamp 随右栏宽度缩放，不写死像素。 */
.detail-notice {
  margin-top: clamp(0.75rem, 2cqw, 1.25rem);
  border: 1px solid #ccc;
  background-color: #fff;
}

/* 标签条：左侧红块 + 其余浅灰条（对应老站 .title-l / .title-r） */
.detail-notice-head {
  display: flex;
  min-height: clamp(1.75rem, 1.5rem + 1.2cqw, 1.875rem);   /* 28px → 30px（老站 30px） */
  background-color: #ccc;
}

.detail-notice-head span {
  display: flex;
  align-items: center;
  justify-content: center;
  width: clamp(5.5rem, 18cqw, 6.25rem);                     /* 88px → 100px（老站 100px） */
  background-color: #b00;
  color: #fff;
  font-size: clamp(0.75rem, 0.72rem + 0.12vw, 0.8125rem);
  font-weight: 700;
}

.detail-notice-body {
  padding: clamp(0.75rem, 2cqw, 0.9375rem) clamp(0.75rem, 3cqw, 1.25rem) clamp(0.5rem, 1.5cqw, 0.75rem);
  font-size: clamp(0.75rem, 0.72rem + 0.12vw, 0.8125rem);
  line-height: 1.6;
  color: var(--text-secondary);
}

.detail-notice-body p + p {
  margin-top: 0.375rem;
}

/* 详情页专用：分页条紧贴相关说明。
   ★ 用 :has() 只作用于「右栏里存在相关说明」的详情页，
     列表页的分页条间距保持不变（保守写法也可换成给 .pager 加类名）。 */
.right-frame:has(> .detail-notice) > .pager {
  width: 92%;                                    /* 与下面整组内容同宽，左边缘对齐 */
  margin-bottom: clamp(0.75rem, 2cqw, 1.25rem);  /* 横线与盒子之间不空一大截 */
}

/* 8.11 详细介绍以下的整组内容统一收窄到 92%（2026-11-05）：
   标题条、每段小标题、正文、展示图、相关说明左右各让 4%，
   不再顶着右栏两边，和上面的分页条左边缘对齐 */
.detail-intro-title,
.detail-block-title,
.detail-text,
.detail-showcase,
.detail-notice {
  width: 92%;
  margin-inline: auto;
}


/* ============================================
   9. 二级页右栏底部「推荐文章」（1:1 复刻老站 .relevant）
   HTML：components/right-recommend.php
   数据：components/config.php 的 $RECOMMEND_ARTICLES
   位置：分页条下方，由 page-bottom.php 自动输出
   ============================================ */
.recommend-box {
  width: 84.6%;                               /* 老站 880px / 右栏 1040px：外框比右栏略窄、居中，
                                                两侧留白随屏宽自动缩放；不设像素封顶 */
  margin: 1.25rem auto 2.5rem;
  border: 1px solid var(--color-border-gray);
  background-color: var(--color-bg-light);
}

/* 标题行：高 50px，底部 2px 红线；左标题+标签，右侧【返回目录】 */
.recommend-head {
  display: flex;
  align-items: center;
  height: 3.125rem;                            /* 老站 50px */
  padding: 0 0.625rem;
  border-bottom: 2px solid var(--color-brand-red);
  overflow: hidden;
}

/* 手机端：一行放不下「标题 + 标签 + 返回目录」，改为允许换行。
   原来固定 50px 高 + nowrap + overflow:hidden，会把【返回目录】挤出框外裁掉，
   看起来就像右栏横向溢出。换行后第二行单独靠右，三项都能完整显示 */
@media (max-width: 767px) {
  .recommend-head {
    height: auto;
    flex-wrap: wrap;
    row-gap: 0.25rem;
    padding-block: 0.5rem;
  }

  .recommend-back {
    margin-left: auto;                         /* 独占一行时靠右对齐 */
  }
}

.recommend-title {
  font-size: 1.125rem;                         /* 老站 18px */
  font-weight: 700;
  color: var(--color-brand-red);
  white-space: nowrap;
}

.recommend-tag {
  margin-left: 0.5rem;
  font-size: 0.875rem;
  color: #676767;
  white-space: nowrap;
}

.recommend-tag a {
  color: #676767;
}

.recommend-tag a:hover {
  color: #cc0033;
}

/* 右侧【返回目录】：箭头贴在文字右边（矢量图标替代原 back.gif） */
.recommend-back {
  margin-left: auto;
  padding-right: 1.25rem;
  font-size: 0.875rem;
  color: #676767;
  background: url("../images/subpage/back.svg") no-repeat right center;
  background-size: 1.3125rem 1.0625rem;         /* 按原 back.gif 21×17px 显示 */
}

.recommend-back:hover {
  color: #cc0033;
}

/* 内容区：8 条 → 每行 2 条、共 4 行
   2026-10-27：列宽 / 列距 / 两侧留白全部按老站占外框的比例（36% / 9% / 5%）
   写成流体值 —— 文字两边留白充足，收窄屏时两边和中间间距自动等比收缩 */
.recommend-list {
  display: grid;
  justify-content: center;                      /* 两列在框内居中，两侧留白自动均分 */
  grid-template-columns: repeat(2, minmax(0, 36%));  /* 老站单列 320px / 外框 880px ≈ 36% */
  gap: 0 clamp(1.5rem, 9%, 6rem);               /* 老站列距 80px ≈ 9%，窄屏自动收紧 */
  padding: 0.625rem clamp(0.625rem, 5%, 4rem);  /* 老站两侧 40px ≈ 4.5%，略加宽让文字更松 */
  list-style: none;
}

@media (max-width: 767px) {
  /* 同 prev-next：minmax(0, 1fr) 让轨道可被压缩，长标题只在本格内省略 */
  .recommend-list { grid-template-columns: minmax(0, 1fr); gap: 0; }
}

.recommend-list li {
  min-width: 0;                                 /* 允许被压缩，避免撑破右栏 */
  height: 1.875rem;                             /* 老站行高 30px */
  padding-left: 1.875rem;                       /* 图标 15px + 与标题约 15px 间距（原 20px 太挤） */
  line-height: 1.875rem;
  overflow: hidden;
  background: url("../images/subpage/ico4.svg") no-repeat left center;
  background-size: 0.9375rem 0.9375rem;           /* 矢量图标按老站 ico4.png 原大 15px 显示 */
  transition: transform 0.8s ease-out;          /* 老站悬停右移 10px 的缓动 */
}

.recommend-list li:hover {
  transform: translateX(0.625rem);
}

.recommend-list a {
  display: block;
  font-size: 0.875rem;                          /* 老站 14px */
  color: #676767;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* 老站悬停只作右移，不改文字颜色，保持一致 */


/* ============================================
   10. 无分页二级页「粗外框」内容区
   （1:1 复刻老站 .right-middle-public + .aboutus 底边细线）
   适用：资源下载 / 网站公告 / 综合文章 / TAG标签 / 联系我们 等二级页
   用法：页面 $page['layout'] = 'plain'，
         page-top.php 自动开框，page-bottom.php 自动收尾
         （细线 + 推荐文章），页面只写框内内容。
   老站：外框 912px 居中 + 16px 灰粗边框 + 22px 内距；
         内容区底边 1px 细线，内容与线之间 50px 留白。
   ============================================ */
.plain-box {
  box-sizing: border-box;
  width: 94%;                                /* 外框宽度：两侧外留白各 3% */
  margin: 1.25rem auto 2.5rem;               /* 老站上 20px、下 40px */
  padding: 3rem;                             /* 框内边距：48px */
  border: 1rem solid #f4f4f4;                /* 老站 16px 粗灰外框 */
  background-color: var(--color-bg-light);
}

/* 内容区：底边就是那条「长细线」，本页内容全部写在这个框里 */
.plain-content {
  padding-bottom: 3.125rem;                  /* 老站 50px：内容与细线之间的距离 */
  margin-bottom: 2rem;                       /* 细线与推荐文章之间的距离 */
  border-bottom: 1px solid var(--color-gray);             /* 老站 .aboutus 底边细线 */
}

/* 粗外框里的推荐文章：老站 880px 几乎撑满外框内宽，这里铺满内宽、
   不再额外留白（外框自带 22px 内距） */
.plain-box .recommend-box {
  width: 100%;
  margin: 0;
}

/* 不输出推荐文章的纯内容页（页面 $page['recommend'] = false，
   如 recommended-article.php 本身就是推荐文章列表）：
   内容区的细横线和它上下的留白一并去掉，内容直接收尾。
   优先级高于下面手机端对 .plain-content 的覆盖，两处断点下都生效 */
.plain-box--bare .plain-content {
  padding-bottom: 0;
  margin-bottom: 0;
  border-bottom: 0;
}

/* 手机端：粗边框和内距收窄，把宽度让给内容 */
@media (max-width: 767px) {
  .plain-box {
    padding: 1rem;
    border-width: 0.5rem;
  }

  .plain-content {
    padding-bottom: 2rem;
    margin-bottom: 1.5rem;
  }
}


/* ============================================
   11. 资源下载列表（download.php 用）
   数据在 components/download-files.php，页面自动生成；
   每行 = 名称 + 灰色说明 + 下载按钮，整行可点。
   单位规范：尺寸/间距 rem，行间细线保持 1px，断点保持 px。
   ============================================ */
.download-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.download-list a {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.875rem 0.5rem;
  border-bottom: 1px solid var(--color-border-gray-light);             /* 行间细分隔线 */
  text-decoration: none;
}

.download-list .dl-name {
  flex: 1;                                   /* 名称占满剩余宽度 */
  color: var(--text-dark);
  font-size: 1rem;
}

.download-list .dl-meta {
  color: var(--text-secondary);
  font-size: 0.8125rem;                      /* 13px 灰色小字 */
  white-space: nowrap;
}

/* 右侧「下载」小按钮 */
.download-list .dl-btn {
  flex-shrink: 0;
  padding: 0.25rem 0.875rem;
  border: 1px solid var(--color-primary);
  border-radius: 0.1875rem;
  color: var(--color-primary);
  font-size: 0.8125rem;
}

/* 悬停：名称变红，按钮反白——与老站链接反馈一致 */
.download-list a:hover .dl-name {
  color: var(--color-primary);
}

.download-list a:hover .dl-btn {
  background-color: var(--color-primary);
  color: var(--text-light);
}

/* 暂无资源时的提示语 */
.dl-empty {
  margin: 0;
  color: #666;
}

/* ---------- 字体下载页：主视觉预告卡 ---------- */
.dl-hero {
  background: linear-gradient(135deg, #fff5f5 0%, #fff 50%, #faf0f0 100%);
  border: 1px solid #f0d0d0;
  border-radius: 6px;
  padding: 2rem 1.5rem;
  margin-bottom: 1.5rem;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.dl-hero::before {
  content: "";
  position: absolute;
  top: -40px; right: -40px;
  width: 160px; height: 160px;
  background: radial-gradient(circle, rgba(210,17,38,.08) 0%, transparent 70%);
  pointer-events: none;
}
.dl-hero-badge {
  display: inline-block;
  background: var(--color-primary, #d21126);
  color: #fff;
  font-size: .75rem;
  letter-spacing: .15em;
  padding: .25rem .875rem;
  border-radius: 20px;
  margin-bottom: .875rem;
  font-weight: 600;
}
.dl-hero-title {
  font-size: 1.625rem;
  font-weight: 700;
  color: var(--text-dark, #222);
  margin: 0 0 .375rem;
  letter-spacing: .05em;
}
.dl-hero-sub {
  color: var(--text-secondary, #888);
  font-size: .875rem;
  margin: 0 0 1rem;
}
.dl-hero-features {
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
}
.dl-feature {
  font-size: .8125rem;
  color: var(--color-primary, #d21126);
  font-weight: 600;
}

/* ---------- 字体下载页：列表 ---------- */
.dl-font-list {
  list-style: none;
  margin: 0 0 1rem;
  padding: 0;
  border: 1px solid var(--color-gray, #ccc);
  border-radius: 4px;
  overflow: hidden;
}
.dl-font-item + .dl-font-item { border-top: 1px solid var(--color-gray, #ccc); }

.dl-font-row {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem 1.25rem;
  text-decoration: none;
  background: #fff;
  transition: background .2s;
}
.dl-font-item:not(.is-coming) .dl-font-row:hover { background: #fafafa; }

/* 格式图标方块 */
.dl-font-icon {
  flex-shrink: 0;
  width: 2.75rem;
  height: 2.75rem;
  background: var(--color-primary, #d21126);
  color: #fff;
  font-size: 1rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  letter-spacing: 0;
}
.dl-font-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: .125rem;
  min-width: 0;
}
.dl-font-info .dl-name {
  color: var(--text-dark, #222);
  font-size: 1rem;
  font-weight: 600;
}
.dl-font-info .dl-meta {
  color: var(--text-secondary, #888);
  font-size: .8125rem;
}
.dl-font-row .dl-btn {
  flex-shrink: 0;
  padding: .375rem 1rem;
  border: 1px solid var(--color-primary, #d21126);
  color: var(--color-primary, #d21126);
  background: #fff;
  border-radius: 3px;
  font-size: .8125rem;
  transition: all .2s;
}
.dl-font-item:not(.is-coming) .dl-font-row:hover .dl-btn {
  background: var(--color-primary, #d21126);
  color: #fff;
}

/* ---------- 禁用态（即将发布） ---------- */
.dl-font-item.is-coming .dl-font-row {
  background: #fafafa;
  cursor: default;
}
.dl-font-item.is-coming .dl-font-icon {
  background: var(--color-text-disabled, #bdc3c7);
}
.dl-font-item.is-coming .dl-font-info .dl-name {
  color: var(--color-text-disabled, #bdc3c7);
  text-decoration: line-through;
  text-decoration-color: #ddd;
}
.dl-font-item.is-coming .dl-font-info .dl-meta {
  color: var(--color-text-disabled, #bdc3c7);
}
.dl-btn-disabled {
  border-color: var(--color-text-disabled, #bdc3c7) !important;
  color: var(--color-text-disabled, #bdc3c7) !important;
  background: #fff !important;
  cursor: not-allowed;
}

/* ---------- 底部联系提示 ---------- */
.dl-contact-note {
  background: #f9f6f6;
  border-left: 3px solid var(--color-primary, #d21126);
  padding: 1rem 1.25rem;
  font-size: .9375rem;
  color: #555;
  line-height: 1.6;
  border-radius: 0 3px 3px 0;
}
.dl-contact-note a {
  color: var(--color-primary, #d21126);
  text-decoration: underline;
}

/* 手机端 */
@media (max-width: 767px) {
  .dl-hero { padding: 1.5rem 1rem; }
  .dl-hero-title { font-size: 1.25rem; }
  .dl-font-row { padding: .875rem 1rem; gap: .75rem; }
  .dl-font-icon { width: 2.25rem; height: 2.25rem; font-size: .875rem; }
  .dl-font-info .dl-meta { display: none; }
}

/* 手机端：收起灰色说明，保住名称和下载按钮 */
@media (max-width: 767px) {
  .download-list .dl-meta {
    display: none;
  }
}


/* ============================================
   11a. 纯文字内容页（网站简介 / About us / 广告业务 / 网站声明 /
        链接申请 / 网站地图等 plain 页共用）
        段落首行缩进两格，与老站 .aboutus 的排版一致；
        图片居中、标题居中，图片说明用小号灰字。
   ============================================ */
.page-text p {
  margin: 0 0 0.25rem;
  text-indent: 2em;
  line-height: 2.1;      /* 2026-11-05：1.85 → 2.1，五页纯文字页统一放宽行距 */
}

.page-text p.no-indent {
  text-indent: 0;
}

.page-text h2 {
  margin: 1.25rem 0 0.75rem;
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--text-dark);
}

.page-text h3 {
  margin: 1rem 0 0.5rem;
  font-size: 1rem;
  font-weight: 700;
  color: var(--text-dark);
}

.page-text h1.page-text-title {
  margin: 0 0 1.25rem;
  /* 2026-11-05：字号加大并改为流式（原固定 1.25rem/20px）
     手机约 22px → 随屏宽放大 → 大屏封顶 28px */
  font-size: clamp(1.375rem, 1.21rem + 0.72vw, 1.75rem);
  font-weight: 700;
  text-align: center;
  letter-spacing: 0.5em;                 /* 老站「关 于 部 分 广 告 业 务」的字间留白 */
  color: var(--text-dark);
}

.page-text figure {
  margin: 1rem auto 1.25rem;
  text-align: center;
}

.page-text figure img {
  max-width: 100%;
  height: auto;
  border: 1px solid var(--color-border-gray-light);
}

.page-text figcaption {
  margin-top: 0.5rem;
  font-size: 0.8125rem;
  color: var(--text-secondary);
}

.page-text a {
  color: var(--color-primary);
}

.page-text strong {
  color: var(--text-dark);
}

/* 链接里的加粗字（如「联系我们」）跟随链接主色红色，
   不被上面 .page-text strong 的深色压掉 */
.page-text a strong {
  color: var(--color-primary);
}

/* 结尾落款（如「特此声明 / 正东广告」）：右对齐加粗 */
.page-text .text-sign {
  margin-top: 1.5rem;
  text-indent: 0;
  text-align: right;
  font-weight: 700;
}


/* ============================================
   11e. 网站地图（sitemap.php 用）
        分组成两列链接清单，组标题红色小字加左侧竖条。
   ============================================ */
.sitemap-groups {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.5rem 2rem;
}

.sitemap-group h2 {
  margin: 0 0 0.625rem;
  padding-left: 0.625rem;
  border-left: 3px solid var(--color-primary);
  font-size: 1rem;
  font-weight: 700;
  color: var(--text-dark);
  line-height: 1.4;
}

.sitemap-group ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.sitemap-group li {
  border-bottom: 1px dashed var(--color-border-gray-light);
}

.sitemap-group a {
  display: block;
  padding: 0.375rem 0.25rem;
  color: var(--text-dark);
  font-size: 0.875rem;
  text-decoration: none;
  transition: color 0.2s ease, padding-left 0.2s ease;
}

.sitemap-group a:hover {
  color: var(--color-primary);
  padding-left: 0.625rem;
}

/* 手机端：地图清单收成单列 */
@media (max-width: 767px) {
  .sitemap-groups {
    grid-template-columns: 1fr;
  }
}


/* ============================================
   11b. 页面说明文字（订单查询等 plain 页共用）
   ============================================ */
.page-tip {
  margin: 1.5rem 0 1.75rem;               /* 上/下间距：与上方查询框、下方表格都拉开（2026-11-04 用户要求再加高） */
  color: var(--text-secondary);
  font-size: 0.8125rem;
  line-height: 1.7;
}

.page-tip a {
  color: var(--color-primary);
}

/* 提示行 flex 容器：左文字，右管理入口 */
.order-tip-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin: 1.5rem 0 1.75rem;   /* 上/下间距：与上方查询框、下方表格都拉开 */
}
.order-tip-row .page-tip {
  flex: 1;
  margin: 0;                   /* 原来的 margin 已挂在父容器上 */
}

/* 右下角管理入口：低调小链接，客户一般不会注意 */
.order-admin-link {
  flex-shrink: 0;
  font-size: 0.75rem;          /* 比提示文字（0.8125rem）小一号 */
  color: #999;                 /* 灰色，不抢眼 */
  text-decoration: none;
  padding: 0.125rem 0.375rem;
  border-radius: 3px;
  white-space: nowrap;
  transition: color .15s, background .15s;
}
.order-admin-link:hover {
  color: var(--color-primary);
  background: #fff5f5;
}

/* 手机窄屏：管理入口移到下一行右对齐 */
@media (max-width: 480px) {
  .order-tip-row {
    flex-wrap: wrap;
  }
  .order-admin-link {
    margin-left: auto;
  }
}


/* ============================================
   11c. 历史版本表（version.php 用）
   数据在 components/version-data.php，页面自动生成。
   ============================================ */
.version-table-wrap {
  overflow-x: auto;                          /* 窄屏时表格内部横向滚动，不撑破外框 */
}

.version-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
}

.version-table th,
.version-table td {
  padding: 0.625rem 0.75rem;
  border-bottom: 1px solid var(--color-border-gray-light);
  text-align: left;
  vertical-align: top;
}

.version-table thead th {
  background-color: #fafafa;
  color: var(--text-dark);
  font-weight: 700;
  white-space: nowrap;
}

.version-table tbody tr:hover {
  background-color: #fff9f9;
}

.version-table .version-no {
  color: var(--color-primary);
  font-weight: 700;
  white-space: nowrap;
}

.version-table .version-date {
  color: var(--text-secondary);
  white-space: nowrap;
}

@media (max-width: 767px) {
  .version-table {
    min-width: 30rem;                        /* 手机上保持三列可读，超出部分横向滚动 */
  }
  .version-table th,
  .version-table td {
    padding: 0.5rem;
  }
}


/* ============================================
   11d. 订单查询页（order-query.php 用）
   查询表单 + 订单表格；订单数据在 data/orders.json。
   ============================================ */
.order-form {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.order-input {
  box-sizing: border-box;
  flex: 1 1 16rem;
  min-width: 0;
  height: 2.25rem;
  padding: 0 0.75rem;
  border: 1px solid var(--color-border-gray);
  background-color: var(--color-bg-light);
  color: var(--text-dark);
  font-family: inherit;
  font-size: 0.875rem;
}

.order-input:focus {
  outline: none;
  border-color: var(--color-primary);
}

.order-submit {
  height: 2.25rem;
  padding: 0 1.25rem;
  border: 0;
  background-color: var(--color-primary);
  color: var(--text-light);
  font-family: inherit;
  font-size: 0.875rem;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.order-submit:hover {
  background-color: var(--color-primary-dark);
}

.order-table-wrap {
  overflow-x: auto;
}

.order-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
}

.order-table th,
.order-table td {
  padding: 0.625rem 0.75rem;
  border-bottom: 1px solid var(--color-border-gray); /* 行分隔细线（原 #eee 过淡，改为标准边框灰更清楚） */
  text-align: left;
  vertical-align: top;
}

/* 列分隔竖线：只在宽屏表格模式（≥1600px）显示，
   每列左侧画一条、首列不画（避免与表格左边重叠）。
   <1600px 的卡片布局不加竖线，由各段自己的规则接管。 */
@media (min-width: 1600px) {
  .order-table th,
  .order-table td {
    border-left: 1px solid var(--color-border-gray);
  }

  .order-table th:first-child,
  .order-table td:first-child {
    border-left: 0;
  }
}

.order-table thead th {
  background-color: #fafafa;
  color: var(--text-dark);
  font-weight: 700;
  white-space: nowrap;
}

.order-table tbody tr:hover {
  background-color: #fff9f9;
}

.order-table .order-no,
.order-table .order-phone,
.order-table .order-date {
  white-space: nowrap;
}

/* 进度列允许换行：客户可能写"已完成（本人已取）"这类细分状态，
   长词自动折行，不会把表格撑宽或挤压其他列 */
.order-table .order-status {
  white-space: normal;
  overflow-wrap: anywhere;
}

.order-table .order-no {
  color: var(--color-primary);
  font-weight: 700;
}

.order-table .order-date {
  color: var(--text-secondary);
}

.order-status {
  color: var(--color-primary);
}

.order-empty {
  margin: 0;
  color: #666;
  line-height: 1.8;
}

.order-empty a {
  color: var(--color-primary);
}

/* 手机（<768px）：七列并排太窄，表格改为"一条订单一张卡片"
   —— 字段名在左、内容在右，内容一行放不下自动换行，不再横向滚动。
   字段名来自 HTML 里每个 td 的 data-label 属性。 */
@media (max-width: 767px) {
  .order-table-wrap {
    overflow-x: visible;                    /* 卡片不再需要横向滚动 */
  }

  .order-table {
    display: block;
    min-width: 0;
  }

  .order-table thead {
    display: none;                          /* 手机上隐藏表头，字段名由每行自带 */
  }

  .order-table tbody {
    display: block;
  }

  .order-table tbody tr {
    display: block;
    margin-bottom: 0.75rem;
    padding: 0.875rem 1rem;
    border: 1px solid var(--color-border-gray);
    border-radius: 0.25rem;
    background-color: var(--color-bg-light);
  }

  .order-table tbody tr:last-child {
    margin-bottom: 0;
  }

  /* 订单编号：卡片首行，独占一行并加虚线下分隔 */
  .order-table td.order-no {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.375rem;
    padding: 0 0 0.5rem;
    margin-bottom: 0.5rem;
    border-bottom: 1px dashed var(--color-border-gray-light);
    white-space: nowrap;
  }

  /* 其余字段：左侧定宽字段名 + 右侧自适应内容，内容自动换行并悬挂对齐 */
  .order-table td {
    display: grid;
    grid-template-columns: 4.5rem 1fr;
    column-gap: 0.625rem;
    align-items: start;
    padding: 0.375rem 0;
    border-bottom: 1px solid var(--color-border-gray-light); /* 每个字段行之间一条细线 */
    line-height: 1.7;
    white-space: normal;                    /* 覆盖电话/日期/进度的不折行 */
    word-break: break-word;
    overflow-wrap: anywhere;                /* 电话、编号等长串也能断行 */
  }

  /* 卡片最后一行去掉细线，避免和外框重叠 */
  .order-table tbody tr td:last-child {
    border-bottom: 0;
  }

  /* 字段名：取自 HTML 里每个 td 的 data-label */
  .order-table td::before {
    content: attr(data-label);
    color: var(--text-secondary);
    font-weight: 400;
  }
}

/* 窄屏与中屏（<1600px）：七列表格要到 1600px 才放得下（992px、1400px 以下仍出横向滚动条），
   所以这段也改为"订单编号占一整行 + 其余 6 项三列×两排"的卡片网格，
   字段名与内容同行（字段名：内容），内容放不下自动换行。 */
@media (min-width: 768px) and (max-width: 1599px) {
  .order-table-wrap {
    overflow-x: visible;
  }

  .order-table {
    display: block;
    min-width: 0;
  }

  .order-table thead {
    display: none;
  }

  .order-table tbody {
    display: block;
  }

  /* 一条订单 = 一张卡片，内部三列网格 */
  .order-table tbody tr {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.5rem 1.25rem;
    margin-bottom: 0.75rem;
    padding: 0.875rem 1rem;
    border: 1px solid var(--color-border-gray);
    border-radius: 0.25rem;
    background-color: var(--color-bg-light);
  }

  .order-table tbody tr:last-child {
    margin-bottom: 0;
  }

  .order-table td {
    display: block;
    padding: 0;
    border-bottom: 0;
    line-height: 1.7;
    white-space: normal;
    word-break: break-word;
    overflow-wrap: anywhere;
  }

  /* 字段名 + 全角冒号，与内容同一行 */
  .order-table td::before {
    content: attr(data-label) "：";
    color: var(--text-secondary);
  }

  /* 订单编号独占第一排，作为卡片标题 */
  .order-table td.order-no {
    grid-column: 1 / -1;
    padding-bottom: 0.5rem;
    margin-bottom: 0.125rem;
    border-bottom: 1px dashed var(--color-border-gray-light);
    font-weight: 700;
    white-space: nowrap;
  }
}


/* ============================================
   11e. 综合查询列表（query.php 用）
   查询功能统一入口：一种查询一行（两排结构）——
     第一排：查询名称（大字号，独占一排）
     第二排：灰色说明 + 「进入」按钮
   整行可点；数据在 components/query-services.php，页面自动生成。
   单位规范：尺寸/间距 rem，行间细线保持 1px，断点保持 px。
   ============================================ */
.query-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.query-list a {
  display: flex;
  flex-wrap: wrap;                     /* 名称独占第一排，说明 + 按钮换到第二排 */
  align-items: center;
  gap: 0.5rem 1rem;                    /* 排间距 0.5rem，同排项间距 1rem */
  padding: 1rem 0.5rem;
  border-bottom: 1px solid var(--color-border-gray-light);             /* 行间细分隔线 */
  text-decoration: none;
}

/* 名称：占满第一排，字号 1.4rem（2026-11-06：2rem 基础上再小 0.3 倍 = 2 × 0.7；
   若要回调，上一版是 2rem） */
.query-list .qs-name {
  flex: 1 0 100%;                      /* 独占第一排 */
  color: var(--text-dark);
  font-size: 1.4rem;
  font-weight: 700;                    /* 名称加粗（2026-11-06 用户要求） */
  line-height: 1.35;                   /* 大字号适当放宽行高，避免发闷 */
}

/* 说明：第二排占满剩余宽度，一行放不下自动省略号 */
.query-list .qs-note {
  flex: 1;
  min-width: 0;
  color: var(--text-secondary);
  font-size: 0.8125rem;                      /* 13px 灰色小字 */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 「新」角标：红色描边小标签，数据里 'hot' => true 才显示 */
.query-list .qs-hot {
  flex-shrink: 0;
  padding: 0.125rem 0.375rem;
  border: 1px solid var(--color-primary);
  border-radius: 0.1875rem;
  color: var(--color-primary);
  font-size: 0.75rem;
  line-height: 1.4;
}

/* 右侧「进入」小按钮：与下载列表按钮同款 */
.query-list .qs-btn {
  flex-shrink: 0;
  padding: 0.25rem 0.875rem;
  border: 1px solid var(--color-primary);
  border-radius: 0.1875rem;
  color: var(--color-primary);
  font-size: 0.8125rem;
}

/* 悬停：名称变红，按钮反白——与资源下载列表反馈一致 */
.query-list a:hover .qs-name {
  color: var(--color-primary);
}

.query-list a:hover .qs-btn {
  background-color: var(--color-primary);
  color: var(--text-light);
}

/* 手机端：收起灰色说明，「进入」按钮推到第二排最右（与桌面按钮位置呼应） */
@media (max-width: 767px) {
  .query-list .qs-note {
    display: none;
  }

  .query-list .qs-hot {
    margin-left: auto;                       /* 角标推到右侧，紧挨进入按钮 */
  }

  .query-list .qs-btn {
    margin-left: auto;                       /* 说明隐藏后按钮独占第二排，靠右显示 */
  }
}


/* ============================================
   12. 联系我们页（contactus.php 用）
   定位图 / 公司名 / 营业时间 / 联系列表 / 二维码。
   老站对照：定位图 350px、图标 42px 高、二维码 220px。
   单位规范：尺寸/间距 rem，分隔线 1px，断点 px。
   ============================================ */

/* 交互地图容器：Leaflet 渲染区（初始化脚本在本页底部） */
.contact-mapbox {
  height: 22.5rem;                           /* 手机约 360px */
  margin-bottom: 1.5rem;
  border: 1px solid var(--color-border-gray-light);
  border-radius: 0.25rem;
}

@media (min-width: 768px) {
  .contact-mapbox {
    height: 30rem;                           /* 大屏约 480px，视野更开阔 */
  }
}

/* 地图定位标记：内联 SVG 水滴针用新站品牌红，替代 Leaflet 默认蓝色图标
   （divIcon 默认带白底方块样式，需清除） */
.map-pin {
  background: none;
  border: none;
}

/* 公司名：学老站大字居中加粗（老站 30px 暗红棕 #8B3A3A），用新站色板里的近似色
   字号流式：手机 24px → 大屏渐变到 30px，拖动窗口平滑缩放无跳变 */
.contact-name {
  margin: 0 0 1.25rem;
  text-align: center;
  color: var(--color-primary-warm);          /* 新站近似色 #8b4141，观感与老站标题色一致 */
  font-size: clamp(1.5rem, 1.32rem + 0.72vw, 1.875rem);
  font-weight: 700;
  letter-spacing: 0.5em;                     /* 老站"乐 至 正 东"的空格效果改用字距实现 */
  text-indent: 0.5em;                        /* 抵消最后一个字的字距，视觉居中 */
}

/* 装饰图标条：老站 01 系列大图标原大横排（42px 高、左右间距 20px） */
.contact-icos {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: 2.5rem;                               /* 老站每边 20px 间距 */
  margin-bottom: 2.5rem;                     /* 老站下 40px */
}

.contact-icos img {
  height: 2.625rem;                          /* 老站 42px 原大，缩放不失真 */
  width: auto;
}

/* 营业时间：浅灰底圆角块 */
.contact-hours {
  margin-bottom: 1.875rem;
  padding: 1.125rem 1rem;
  border: 1px solid var(--color-border-gray-light);
  border-radius: 0.25rem;
  background-color: #fafafa;
  text-align: center;
}

.contact-hours h3 {
  margin: 0 0 0.625rem;
  color: var(--text-dark);
  font-size: clamp(1.25rem, 1.1rem + 0.5vw, 1.5rem);  /* "营业时间"：手机 20px → 大屏 24px 流式 */
  letter-spacing: 0.5em;
  text-indent: 0.5em;
}

.contact-hours p {
  margin: 0.5rem 0;
  color: var(--text-dark);
  font-size: clamp(1rem, 0.92rem + 0.35vw, 1.125rem); /* 两行时间：手机 16px → 大屏 18px 流式 */
  font-weight: 400;                          /* 两行时间文字不加粗 */
  line-height: 1.75;                         /* 行距拉开更舒展 */
}

/* 联系方式列表：每行 = 小图标 + 项目名 + 内容，行间老站式虚线；
   虚线保持通栏，只有文字内容右移（缩进写在 li 的内边距上） */
.contact-list {
  list-style: none;
  margin: 0 0 1.875rem;
  padding: 0;
}

.contact-list li {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  padding: 0.75rem 0.25rem 0.75rem 3rem;     /* 左 48px：内容右移，虚线不动 */
  border-bottom: 1px dashed var(--color-gray);            /* 老站 1px 虚线 #CCC */
}

.contact-list .contact-ico {
  width: auto;
  height: 1rem;                              /* 02 系列小图标 16px 原大显示，最保真 */
  flex-shrink: 0;
}

.contact-list .contact-term {
  min-width: 4em;                            /* 项目名对齐（TEL/E-mail 宽窄不一） */
  color: var(--text-dark);
  font-weight: 700;
}

.contact-list .contact-val {
  color: var(--text-medium);
  word-break: break-all;                     /* 长地址在手机上正常折行 */
}

/* 电话 / 邮箱可点，悬停变主题红 */
a.contact-val {
  text-decoration: none;
}

a.contact-val:hover {
  color: var(--color-primary);
}

/* 二维码：两张并排居中，间距加宽 */
.contact-qr {
  display: flex;
  justify-content: center;
  gap: 8rem;
}

.contact-qr figure {
  margin: 0;
  text-align: center;
}

.contact-qr img {
  width: 13.75rem;                           /* 老站 220px 原大 */
  height: auto;
  border: 1px solid var(--color-border-gray-light);
}

.contact-qr figcaption {
  margin-top: 0.5rem;
  color: #666;
  font-size: 0.8125rem;
}

/* 大屏：行距更舒展（字号已全部 clamp 流式，无需断点两档） */
@media (min-width: 768px) {
  .contact-list li {
    font-size: 1rem;
  }
}

/* 手机端：装饰条间距收窄、二维码收小，防止窄屏溢出 */
@media (max-width: 767px) {
  .contact-icos {
    gap: 1rem;
  }

  .contact-list li {
    padding-left: 1rem;                      /* 手机端右移量收窄 */
  }

  .contact-qr {
    gap: 2.5rem;
  }

  .contact-qr img {
    width: 8.75rem;                          /* 140px：两张并排放得下 */
  }
}


/* ============================================
   13. 文字列表页 / 文章详情 / TAG 标签云
   ------------------------------------------------------------
   适用页面：article.php、bulletin.php、tag.php、
             article/detail.php、bulletin/detail.php
   与作品列表（第 6 节 .list-grid）并列的另一套版式：
   作品列表靠图说话，文字页面靠「日期 + 标题 + 摘要」说话。
   ============================================ */

/* 13.1 网站公告列表：小图标 + 标题 + 右侧日期
   老站结构（.message-list li）：高 41px、左内边距 21px 放小图片、
   日期 span 浮动到右边、条目之间 1px 虚线。
   这里用 flex 重写：日期不再浮动，长标题自动换行也不会挤到日期；
   左侧小图标改用内联 SVG（折角纸张），不另外加载图片，放大也清晰。 */
.notice-list {
  margin: 1rem 0 0;                          /* 与上方分类标签条拉开距离 */
  padding: 0;
  list-style: none;
}

.notice-list li {
  border-bottom: 1px dashed var(--color-gray);            /* 每条都有下虚线，最后一条也有 */
}

.notice-list a {
  display: flex;
  align-items: center;
  gap: 0.875rem;                            /* 图标与标题之间留白 */
  min-height: 2.625rem;                     /* 老站 41px，保证行高一致 */
  padding: 0.5rem 1.25rem;
  text-decoration: none;
}

.notice-icon {
  flex: none;
  width: 0.75rem;                           /* 图标显示尺寸：按需改这里即可放大/缩小 */
  height: 0.75rem;
  /* 图标源图用 images/decorate.svg 矢量图（CDR 制作）；
     矢量无限缩放不糊，容器 width/height 决定显示大小，
     background-size 100% 100% 自动等比填充 */
  background: url("../images/decorate.svg") center / 100% 100% no-repeat;
  /* flex 居中对齐到整行行盒中心，但文字字形视觉重心偏低；
     往下微调 2px，让图标与文字视觉中心对齐 */
  transform: translateY(2px);
}

.notice-title {
  flex: 1 1 auto;
  min-width: 0;                             /* 允许长标题换行，不把日期挤出去 */
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--text-dark);                  /* 与标签一致，用 root 深灰 #333 */
  transition: color 0.2s ease;
}

.notice-date {
  flex: none;
  margin-left: 0.75rem;
  color: #7f7f7f;                           /* 老站日期灰 */
  font-size: 0.8125rem;
  line-height: 1.6;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;       /* 数字等宽，日期上下对齐 */
}

.notice-list a:hover .notice-title {
  color: var(--color-brand-red);
}

@media (min-width: 768px) {
  .notice-list {
    margin-top: 1.5rem;                     /* 桌面上下留白更宽 */
  }
  .notice-list a {
    gap: 1rem;                              /* 桌面图标与标题再开一点 */
    padding: 0.5rem 2rem;                   /* 桌面与上方分类条错开 */
  }

  .notice-title {
    font-size: 1rem;
  }
}

/* 13.3 文章 / 公告详情正文区（正文段落沿用第 8.8 节 .detail-text p） */
.text-article {
  padding-bottom: 0.5rem;
}

/* 分类 + 日期：标题下方一行灰色信息，下方细线与正文分开 */
.text-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1.25rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--color-border-gray-light);
  color: var(--text-secondary);
  font-size: 0.8125rem;
  line-height: 1.6;
}

.text-meta a {
  color: var(--color-primary);
  text-decoration: none;
}

.text-meta a:hover {
  text-decoration: underline;
}

/* ============ 13.3b 综合文章详情页专属排版（article/detail.php 用） ============
   作用域：.plain-box 下的 .article-typography + .article-content-box，
   不影响书画/绣画等其他详情页。

   ★ 关键原则：灰框 + 中间层 都不能有 padding，
     这样子元素的 width:90% / 70% 才是相对于灰框完整内宽，
     text-meta 的 border-bottom 才自然顶满灰框边缘。
     所有留白靠子元素的 margin 控制。 */

/* ① 灰框：outline 画在外面不占空间 → 可以安全加 padding 给内容四周留白，
   子元素的 width:90% / 70% 仍然是相对于灰框完整视觉宽度 */
.plain-box .article-content-box {
  outline: 1px solid var(--color-border-gray);
  border: 0;
  padding: 1.5rem 1.25rem;                  /* 四周留白，标题不再贴灰框顶 */
  margin-bottom: 1.5rem;
  background-color: #fff;
}

/* ② 文章标题（h1）：居中，去掉原先手动加的 margin，父容器 padding 已负责四周留白 */
.plain-box .article-typography .detail-title {
  text-align: center;
  margin: 0 0 0.875rem;
}

/* ③ 副标题（分类·日期）：
     字号用 clamp —— 小屏 14px（和正文下限一致），大屏 16px（和正文上限一致，不会比正文小）；
     上下 margin 与标题、正文拉开距离 */
.plain-box .article-typography .text-meta {
  justify-content: center;
  margin: 0 0 1.5rem;
  font-size: clamp(0.875rem, 0.8375rem + 0.17vw, 1rem);
  font-weight: 700;
}

/* ④ 正文：width:90% 现在直接是灰框完整内宽的 90%，真正的 90% */
.plain-box .article-typography .detail-text {
  width: 90%;
  margin: 0 auto;
}

/* ⑤ 图片：width:70% 直接是灰框完整内宽的 70%
   （文章 / 公告的正文段落统一沿用 8.8 节的缩进、行距与段间距，不再单独覆盖） */
.plain-box .article-typography .detail-showcase {
  width: 70%;
  margin: 1.5rem auto;
}

/* 图片自身：撑满外层 70% 容器、按原图比例显示 */
.plain-box .article-typography .detail-showcase img {
  width: 100%;
  max-width: none;
  height: auto;
  margin: 0;
}

/* 手机端：图片放宽到 90%，标题左右 margin 收窄 */
@media (max-width: 767px) {
  .plain-box .article-typography .detail-title {
    margin-left: 0.5rem;
    margin-right: 0.5rem;
  }
  .plain-box .article-typography .detail-showcase {
    width: 90%;
  }
}

/* 13.4 TAG 标签云（tag.php） */
.tag-intro {
  margin-bottom: 1rem;
  color: #666;
  font-size: var(--font-size-body);
  line-height: 1.8;
}

.tag-cloud {
  display: flex;
  flex-wrap: wrap;
  gap: 0.625rem;
  padding-bottom: 1.5rem;
  list-style: none;
}

.tag-cloud a {
  display: inline-block;
  padding: 0.4375rem 1rem;
  border: 1px solid #e2e2e2;
  border-radius: 999rem;                     /* 胶囊形，与作品卡片的方形图框区分开 */
  background-color: #fafafa;
  color: var(--text-medium);
  font-size: 0.875rem;
  line-height: 1.4;
  text-decoration: none;
  transition: border-color 0.2s ease, background-color 0.2s ease, color 0.2s ease;
}

.tag-cloud a:hover,
.tag-cloud a:focus-visible {
  border-color: var(--color-primary);
  background-color: var(--color-primary);
  color: var(--text-light);
}

/* 13.5 详情页左栏「同类推荐」的纯文字卡片
   文章 / 公告没有缩略图时，sidebar-detail.php 会给 li 加 .is-text，
   这里把它改成整行一张浅灰文字卡，不输出空图片。
   ★ sidebar.css 在本文件之后加载，所以用 .left-frame 前缀提高优先级。 */
.left-frame .side-thumb-list li.is-text {
  grid-column: 1 / -1;                       /* 独占一行，长标题有地方换行 */
}

.left-frame .side-thumb-list li.is-text a {
  box-sizing: border-box;
  padding: 0.625rem 0.75rem;
  border: 1px solid var(--color-border-gray-light);
  background-color: #fafafa;
  transition: border-color 0.2s ease, background-color 0.2s ease;
}

.left-frame .side-thumb-list li.is-text a:hover {
  border-color: var(--color-primary);
  background-color: var(--color-bg-light);
}

.left-frame .side-thumb-list li.is-text span {
  display: block;
  height: auto;
  margin-top: 0;
  text-align: left;
}

/* 13.6 粗外框内的分页条
   分页条自带的下边线在 .plain-content 里会和「长细线」重叠，
   这里去掉重复线条，只保留按钮本身。 */
.plain-content .pager {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: 0;
}


/* ============================================
   14. 综合文章列表（老站 .integrated 的现代重写）
   ------------------------------------------------------------
   老站结构：灰色分类条（.navigation）+ 左图右文的 dl.column 卡片。
   这里用 CSS Grid / aspect-ratio / line-clamp 重写，外观一致，
   但不再写浮动、固定宽高和 clearfix：
   ★ 图片列宽由 grid 决定，图片用 aspect-ratio 保持 220:145，不写死高；
   ★ 摘要用 line-clamp 限制 3 行，条目高度不会因为正文长短而乱；
   ★ 手机自动变成「上图下文」，平板以上恢复「左图右文」。
   ============================================ */

/* 14.1 分类条：浅灰底 + 2px 标题红下边线，当前项同色红底白字 */
.article-tabs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  background-color: var(--color-bg-tertiary);        /* 分类条底色取 root 辅助背景色 */
  border-bottom: 2px solid var(--color-brand-red);   /* 与标题条红、选中标签同色 */
}

/* 靠左变体：网站公告用，标签从左边开始排（综合文章默认居中） */
.article-tabs--left {
  justify-content: flex-start;
}

.article-tabs a {
  flex: 1 1 0;                             /* 手机：标签均分一行 */
  padding: 1rem 0.25rem;                   /* 行高加高，左右收窄保证多个能并排 */
  color: #444;                             /* 未选中文字：回到原来的深灰黑 */
  font-size: 0.9375rem;
  line-height: 1.4;
  text-align: center;
  white-space: nowrap;
  text-decoration: none;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.article-tabs a:hover {
  background-color: var(--color-hover-gray);         /* 悬停底色取 root 变量 */
}

/* 标签条的第三个标签给一个浅灰底（综合文章＝广告常识，网站公告＝站内公告）：
   文字仍是统一的深灰黑，只靠底色把相邻标签分开；
   第四个标签及之后保持分类条原底色 */
.article-tabs a:nth-of-type(3) {
  background-color: var(--color-tab-alt);  /* root 变量 #ededed */
}

/* 第三个标签本身有底色，普通 :hover 优先级不够，单独补一条；
   排除当前标签，避免盖掉红底白字 */
.article-tabs a:nth-of-type(3):not(.is-current):hover {
  background-color: var(--color-hover-gray);
}

/* 当前标签：品牌红底 + 白字（与标题「综合文章」前面的红方块同色） */
.article-tabs a.is-current {
  background-color: var(--color-brand-red);
  color: var(--color-primary-contrast);
  font-weight: 700;
}

@media (min-width: 768px) {
  .article-tabs a {
    flex: 0 1 auto;                        /* 桌面：按钮按内容宽度，整排居中 */
    padding: 1.5rem 2.5rem;                /* 行高约 70px；四个标签也放得下 */
    font-size: 1rem;
  }
}

/* 14.2 文章卡片：手机上图下文，≥768px 左图右文 */
.article-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.article-item + .article-item {
  border-top: 1px dashed #dcdcdc;          /* 老站同款虚线分隔 */
}

.article-item > a {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.25rem;                            /* 手机：图片与文字上下间距 */
  padding: 1.25rem 1.25rem;                 /* 左右留边：与上方分类条错开，不顶格 */
  text-decoration: none;
}

@media (min-width: 768px) {
  .article-item > a {
    grid-template-columns: 13.75rem minmax(0, 1fr);   /* 13.75rem 图 + 自适应文字 */
    gap: 2rem;                             /* 图与文字之间留足 2rem */
    padding: 1.75rem 2rem;                 /* 卡片左右各留 2rem 呼吸位 */
  }
}

/* 缩略图：虚线边框是老站特征；比例为 220:145（约 13.75rem : 9.0625rem），
   任何尺寸的图片都不变形 */
.article-thumb {
  overflow: hidden;
  border: 1px dashed var(--color-gray);
  background-color: #fafafa;
}

.article-thumb img {
  display: block;
  width: 100%;
  aspect-ratio: 220 / 145;
  object-fit: cover;
  transition: opacity 0.25s ease;
}

.article-item > a:hover .article-thumb img {
  opacity: 0.86;
}

/* 文字区：纵向 flex，让「查看详情」始终落在卡片底部右侧 */
.article-body {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.article-title {
  margin-bottom: 0.5rem;
  color: var(--color-black);
  font-size: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
  font-weight: 400;                          /* 常规体：<strong> 等价 700，反而过粗 */
  line-height: 1.5;
  transition: color 0.2s ease;
}

.article-item > a:hover .article-title {
  color: var(--color-primary);
}

/* 摘要：最多 3 行，超出省略，与老站展示两三段文字的效果一致 */
.article-excerpt {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
  color: #666;
  font-size: 0.875rem;
  line-height: 1.8;
}

.article-more {
  margin-top: auto;                        /* 推到底部 */
  padding-top: 0.5rem;
  color: var(--color-primary);
  font-size: 0.8125rem;
  text-align: right;
}


/* ============================================
   15. 推荐文章列表页（recommended-article.php 用）
   ------------------------------------------------------------
   老站 recommended-article.html 右侧中部内容的重写：
   每行 = ico4.svg 小图标 + 标题，行间 1px 点状线；
   下方【返回目录】右对齐带小箭头，
   最末居中「共 N 页 N 条」（老站 .pageListNav）。
   数据：components/config.php 的 $RECOMMEND_ARTICLES。
   ============================================ */

/* 列表本体 */
.rec-article-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.rec-article-list li {
  border-bottom: 1px dotted var(--color-gray);  /* 老站 1px 点状线 #CCC，每条都有 */
}

/* 每行：老站 40px 行高，文字左缩进 40px 给小图标让位；
   缩进写在链接内边距上（而非 text-indent），长标题换行也不会缩到图标下面 */
.rec-article-list a {
  display: block;
  padding-left: 2.5rem;                         /* 老站 text-indent 40px */
  line-height: 2.5rem;                          /* 老站行高 40px */
  font-size: var(--font-size-body);             /* 全站统一正文字号令牌 */
  color: var(--text-dark);
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;                      /* 长标题单行省略，不顶破版式 */
  background: url("../images/subpage/ico4.svg") no-repeat left center;
  background-size: 0.9375rem 0.9375rem;           /* 矢量图标按老站 ico4.png 原大 15px 显示 */
  transition: color 0.2s ease;
}

/* 悬停变品牌红：与全站二级页链接反馈一致 */
.rec-article-list a:hover {
  color: var(--color-brand-red);
}

/* 【返回目录】：老站 60px 行高、整体右对齐、文字右侧贴小箭头（矢量图标替代 back.gif） */
.rec-article-back {
  margin: 0;
  text-align: right;
  line-height: 3.75rem;                         /* 老站 60px */
}

.rec-article-back a {
  padding-right: 1.25rem;                       /* 老站 20px：给小箭头让位 */
  font-size: var(--font-size-body);
  color: var(--text-medium);
  text-decoration: none;
  background: url("../images/subpage/back.svg") no-repeat right center;
  background-size: 1.3125rem 1.0625rem;         /* 按原 back.gif 21×17px 显示 */
}

.rec-article-back a:hover {
  color: var(--color-brand-red);
}

/* 页数统计：老站 .pageListNav，居中、上方间距 20px */
.rec-article-count {
  margin: 1.25rem 0 0;                          /* 老站上间距 20px */
  text-align: center;
  font-size: var(--font-size-body);
  color: var(--text-medium);
}


/* ============================================
   21. 分页条的手机适配（≤767px）
   ------------------------------------------------------------
   问题：分页条默认宽 87.7%（仿老站版心比例），按钮又有 30px 高 + 左右内距，
        手机上一行放不下「首 页 / 上一页 / 页码 / 下一页 / 末 页 / 跳转框」，
        会挤成三行且左右参差。
   处理：① 手机右栏本身已有 20px 内边距，分页条直接占满可用宽度；
        ② 按钮略缩小（28px）、内距收紧、间距 5px，一行能多放几个；
        ③ 跳转框单独占一行并居中，不与页码混排；
        ④ 字号固定 12px —— 手机右栏 cqw 太小，clamp 已到下限，写死更稳。
   位置：写在文件末尾，与其他媒体查询同样“基础样式之后统一追加”。
   ============================================ */
@media (max-width: 767px) {
  .pager {
    width: 100%;
    gap: 0.3125rem;                            /* 5px，比桌面 6px 略紧 */
    margin-top: 2rem;                          /* 手机上不把分页条推得太远 */
  }

  .pager a,
  .pager span {
    min-width: 1.75rem;                        /* 28px */
    min-height: 1.75rem;
    padding-inline: 0.5rem;                    /* 8px，文字按钮少占一点 */
    font-size: 0.75rem;                        /* 12px 固定 */
  }

  .pager-num {
    width: 1.75rem;                            /* 页码方块 28×28 */
  }

  /* 跳转框整行居中，单独一行 */
  .pager-jump {
    flex-basis: 100%;
    justify-content: center;
    margin-top: 0.25rem;
  }

  .pager-jump-input,
  .pager-jump-btn {
    height: 1.75rem;                           /* 与缩小后的按钮同高 */
    font-size: 0.75rem;
  }
}