/* ==========================================================================
   site.css —— 前台新版样式（P3 视觉改版）
   --------------------------------------------------------------------------
   设计参考：极目新闻（ctdsb.net）的视觉语言 —— 新闻红主色、白底、细分隔线、
   左图右文的新闻流、右侧固定边栏、大图焦点区。

   为什么单独建文件而不是改 index.css：
     1. index.css 里混了 Owl Carousel 的第三方样式（100+ 条 .owl-* 规则），
        清不干净；新文件独立可以整体回退（删掉 layout 里那一行 link 即可）。
     2. 新 class 统一用 s- 前缀，不会意外命中旧规则或 Bootstrap。
     3. 旧页面/旧模板仍可正常工作，改造可以逐页推进。

   加载顺序：bootstrap.css → index.css → site.css（本文件最后，覆盖前两者）
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. 设计变量
   -------------------------------------------------------------------------- */
:root {
  --s-red: #e60012;          /* 主色：新闻红 */
  --s-red-dark: #c0000f;
  --s-red-soft: #fdecee;     /* 浅红底，用于标签/悬停 */
  /* 主色的两个浅色衍生：原来直接写死 #f7c9ce / #f2b8bc，
     分站换主色时它们不跟着变，会剩下一圈红边 —— 提成变量一起覆盖。 */
  --s-red-line: #f7c9ce;     /* 浅底块的描边 */
  --s-red-faint: #f2b8bc;    /* 深色页脚上的弱色链接 */

  --s-text: #1a1a1a;         /* 标题 */
  --s-text-2: #4a4a4a;       /* 正文 */
  --s-text-3: #8a8a8a;       /* 辅助信息 */
  --s-text-4: #b0b0b0;       /* 最弱 */

  --s-line: #ececec;         /* 分割线 */
  --s-line-2: #f4f4f4;
  --s-bg: #fff;
  --s-bg-page: #f5f6f7;      /* 页面底色，让白卡片浮起来 */
  --s-bg-soft: #fafafa;

  --s-radius: 6px;
  --s-radius-sm: 4px;
  --s-shadow: 0 1px 3px rgba(0, 0, 0, .05);
  --s-shadow-hover: 0 4px 16px rgba(0, 0, 0, .10);

  --s-w: 1200px;             /* 内容容器宽 */
  --s-gap: 24px;
}

/* --------------------------------------------------------------------------
   1b. 分站主题

   <body data-site="…"> 由 layout.ejs / layoutCategory.ejs 按 SiteService 注入，
   取值是 config/sites.js 里的 key。这里**只覆盖颜色变量**，版式/字号/间距全站共用 ——
   换站只改配色，不复制模板。

   为什么单独成块而不是散在文件末尾：这些规则只是重新声明变量，不参与层叠竞争。
   集中在这里，看一个站的配色不必翻 2000 行。

   ⚠️ 加新站点时在这里补一条 [data-site] 块；不补也不会报错，
      只是那个站沿用 :root 的新闻红，看起来还是商业资讯。

   ── 主色来源（2026-10-29 逐个抓线上 CSS 取的原值，不是估的）──
     rmjkol    #1DB676  ← /css/newindex.css（出现 7 次）
     zgjjjc    #854E33  ← /css/header.css（导航底色 27 行、标题色 80/102 行）
     airuiyoka #ff4466  ← /css/index.css（出现 7 次）
   三个站线上各有自己的前端（rmjkol/zgjjjc 是 base+header+footer+Swiper 那套，
   airuiyoka 还是旧的 bootstrap+index），骨架移植不过来，这里对齐的是**主色**。
   每组里的 dark/soft/line/faint 是按主色推导的派生色，线上没有对应变量。
   -------------------------------------------------------------------------- */

/* 人民健康在线：青绿。主色取自线上 #1DB676。
   注意 #1DB676 本身很亮（白底上做文字只有 2.4:1），所以 dark 压到 #15875a，
   专供按钮 hover 与小字；大色块背景仍用原色，跟线上观感一致。 */
body[data-site="rmjkol"] {
  --s-red: #1db676;
  --s-red-dark: #15875a;
  --s-red-soft: #e8f8f1;
  --s-red-line: #b5e7d0;
  --s-red-faint: #a9e3c9;
}

/* 家居建材网：深棕。主色取自线上 #854E33（导航条底色就是这个）。 */
body[data-site="zgjjjc"] {
  --s-red: #854e33;
  --s-red-dark: #6b3e28;
  --s-red-soft: #f6efea;
  --s-red-line: #e2cdc0;
  --s-red-faint: #d8bfae;
}

/* 爱瑞时尚网：玫红。主色取自线上 #ff4466。
   线上 index.css 里另有 #c80010，那是促销价/强调用的正红，不是主色的深色版，
   所以 dark 按同色系压深，避免 hover 时从玫红突然跳到正红。 */
body[data-site="airuiyoka"] {
  --s-red: #ff4466;
  --s-red-dark: #e02e50;
  --s-red-soft: #ffecef;
  --s-red-line: #ffc2cd;
  --s-red-faint: #ffb3c1;
}

/* syzxnews（商业资讯）走 :root 的新闻红，不重复声明 —— 它是默认值。
   综合资讯(10) / 中国宝贝网(30) 目前 enabled:false，没有独立域名，同样走默认。 */

/* --------------------------------------------------------------------------
   2. 基础
   -------------------------------------------------------------------------- */
body {
  font-family: "PingFang SC", "Microsoft YaHei", "Hiragino Sans GB",
               "Helvetica Neue", Arial, sans-serif;
  color: var(--s-text-2);
  background: var(--s-bg-page);
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }
a:hover { color: var(--s-red); text-decoration: none; }

img { max-width: 100%; }

/* 统一容器：覆盖 bootstrap 的 .container 宽度 */
.s-wrap {
  width: 100%;
  max-width: var(--s-w);
  margin: 0 auto;
  padding: 0 16px;
}

/* 多行截断工具（沿用旧文件里的同名类，但补上 display 保证生效） */
.text-clamp-1,
.text-clamp-2,
.text-clamp-3 {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}
.text-clamp-1 { -webkit-line-clamp: 1; }
.text-clamp-2 { -webkit-line-clamp: 2; }
.text-clamp-3 { -webkit-line-clamp: 3; }

/* --------------------------------------------------------------------------
   3. 头部：logo + 搜索
   -------------------------------------------------------------------------- */
.s-header {
  background: var(--s-bg);
  border-bottom: 1px solid var(--s-line-2);
}

.s-header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 84px;
  gap: 24px;
}

.s-logo { flex: 0 0 auto; display: flex; align-items: center; }
.s-logo img {
  height: 52px;
  width: auto;
  display: block;
  /* 旧 logo 是深色 PNG，白底上直接用 */
}
.s-logo-text {
  font-size: 28px;
  font-weight: 800;
  letter-spacing: 1px;
  color: var(--s-red);
  line-height: 1.1;
}
.s-logo-text small {
  display: block;
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 2px;
  color: var(--s-text-3);
  margin-top: 4px;
}

/* 搜索框 */
.s-search {
  flex: 0 1 320px;
  display: flex;
  height: 38px;
  border: 1px solid var(--s-line);
  border-radius: 19px;
  overflow: hidden;
  background: var(--s-bg-soft);
  transition: border-color .18s, background .18s;
}
.s-search:focus-within {
  border-color: var(--s-red);
  background: #fff;
}
.s-search input {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: 0;
  padding: 0 16px;
  font-size: 14px;
  color: var(--s-text);
  background: transparent;
}
.s-search button {
  flex: 0 0 auto;
  border: 0;
  padding: 0 20px;
  font-size: 14px;
  color: #fff;
  background: var(--s-red);
  cursor: pointer;
  transition: background .18s;
}
.s-search button:hover { background: var(--s-red-dark); }

/* --------------------------------------------------------------------------
   4. 主导航
   -------------------------------------------------------------------------- */
.s-nav {
  background: var(--s-bg);
  border-bottom: 1px solid var(--s-line);
  position: sticky;
  top: 0;
  z-index: 100;
}

.s-nav-list {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.s-nav-list li { margin: 0; }

.s-nav-list a {
  display: block;
  position: relative;
  padding: 14px 18px;
  font-size: 16px;
  font-weight: 500;
  color: var(--s-text);
  transition: color .18s;
  white-space: nowrap;
}
.s-nav-list a:hover { color: var(--s-red); }

/* 当前栏：红字 + 底部红线 */
.s-nav-list li.on > a,
.s-nav-list a.on {
  color: var(--s-red);
  font-weight: 700;
}
.s-nav-list li.on > a::after,
.s-nav-list a.on::after {
  content: "";
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: 0;
  height: 3px;
  background: var(--s-red);
  border-radius: 2px 2px 0 0;
}

/* 二级菜单 */
.s-subnav {
  background: var(--s-bg);
  border-bottom: 1px solid var(--s-line);
}
.s-subnav-inner {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  padding: 12px 0;
}
.s-subnav-title {
  font-size: 18px;
  font-weight: 700;
  color: var(--s-text);
  margin-right: 8px;
  padding-right: 16px;
  border-right: 1px solid var(--s-line);
  line-height: 1.2;
}
.s-subnav a {
  display: inline-block;
  padding: 6px 14px;
  font-size: 14px;
  color: var(--s-text-2);
  border-radius: 14px;
  background: var(--s-bg-soft);
  border: 1px solid transparent;
  transition: all .18s;
}
.s-subnav a:hover {
  color: var(--s-red);
  background: var(--s-red-soft);
  border-color: var(--s-red-line);
}
.s-subnav a.on {
  color: #fff;
  background: var(--s-red);
  border-color: var(--s-red);
}

/* --------------------------------------------------------------------------
   5. 布局：主区 + 边栏
   -------------------------------------------------------------------------- */
.s-page {
  padding: 24px 0 48px;
}

.s-layout {
  display: flex;
  gap: var(--s-gap);
  align-items: flex-start;
}

.s-main {
  flex: 1 1 auto;
  min-width: 0;            /* 关键：允许 flex 子项收缩，否则长标题撑破布局 */
}

.s-side {
  flex: 0 0 300px;
  width: 300px;
  position: sticky;
  top: 60px;               /* 跟随滚动，导航高约 52px */
}

/* 通用卡片 */
.s-card {
  background: var(--s-bg);
  border-radius: var(--s-radius);
  box-shadow: var(--s-shadow);
  overflow: hidden;
}

/* --------------------------------------------------------------------------
   6. 区块标题（带红色竖条）
   -------------------------------------------------------------------------- */
.s-sec {
  background: var(--s-bg);
  border-radius: var(--s-radius);
  box-shadow: var(--s-shadow);
  padding: 0 20px 8px;
  margin-bottom: var(--s-gap);
}
.s-sec:last-child { margin-bottom: 0; }

.s-sec-hd {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 56px;
  border-bottom: 1px solid var(--s-line);
  margin-bottom: 4px;
}

.s-sec-title {
  position: relative;
  margin: 0;
  padding-left: 12px;
  font-size: 19px;
  font-weight: 700;
  color: var(--s-text);
  line-height: 1.2;
}
.s-sec-title::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 4px;
  height: 18px;
  border-radius: 2px;
  background: var(--s-red);
}
.s-sec-title a { color: inherit; }

.s-more {
  font-size: 13px;
  color: var(--s-text-3);
  transition: color .18s;
}
.s-more:hover { color: var(--s-red); }
.s-more::after { content: " ›"; }

/* 无内边距的区块（列表类自带 padding） */
.s-sec--flush { padding: 0; }
.s-sec--flush .s-sec-hd { padding: 0 20px; margin-bottom: 0; }

/* --------------------------------------------------------------------------
   7. 焦点区：左侧大图 + 右侧文字列表
   -------------------------------------------------------------------------- */
.s-focus {
  display: flex;
  gap: 20px;
  background: var(--s-bg);
  border-radius: var(--s-radius);
  box-shadow: var(--s-shadow);
  padding: 20px;
  margin-bottom: var(--s-gap);
}

/* 左：大图
   高度不写死，而是让 CSS 把 <a> 拉到与右列等高（align-items:stretch），
   图片用绝对定位铺满 —— 这样右侧条目从 4 条变 8 条都不会把版式顶破。
   min-height 只是兜底：右列为空时焦点区不至于塌成一条细线。 */
.s-focus-hero {
  flex: 0 0 58%;
  position: relative;
  border-radius: var(--s-radius-sm);
  overflow: hidden;
  display: block;
  min-height: 340px;
  background: var(--s-bg-soft);
}
/* 只有大图、没有右列时（稿件太少），让大图铺满整行，别留 42% 的空白 */
.s-focus-hero:only-child { flex: 1 1 100%; }
.s-focus-hero img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .35s ease;
}
.s-focus-hero:hover img { transform: scale(1.03); }

.s-focus-hero-cap {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 40px 16px 14px;
  background: linear-gradient(to top, rgba(0, 0, 0, .78), rgba(0, 0, 0, 0));
  color: #fff;
  font-size: 18px;
  font-weight: 600;
  line-height: 1.45;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* 右：文字列表 */
.s-focus-list {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.s-focus-list ul { list-style: none; margin: 0; padding: 0; }
.s-focus-list li {
  padding: 9px 0;
  border-bottom: 1px dashed var(--s-line);
}
.s-focus-list li:last-child { border-bottom: 0; }

.s-focus-list a {
  display: block;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.55;
  color: var(--s-text);
  transition: color .18s;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.s-focus-list a:hover { color: var(--s-red); }

.s-focus-list .s-time {
  display: block;
  margin-top: 3px;
  font-size: 12px;
  color: var(--s-text-4);
}

/* --------------------------------------------------------------------------
   8. 新闻条目：左图右文（列表主力形态）
   -------------------------------------------------------------------------- */
.s-list { list-style: none; margin: 0; padding: 0; }

.s-item {
  display: flex;
  gap: 16px;
  /* 缩略图固定 112px 高，条目文字常常只有「标题 + 标签」两行，
     stretch 会让文字贴顶、下方空一大块；居中对齐后视觉重心回到缩略图中间。 */
  align-items: center;
  padding: 18px 0;
  border-bottom: 1px solid var(--s-line-2);
  transition: background .18s;
}
.s-item:last-child { border-bottom: 0; }

/* .s-sec--flush 会清掉区块内边距，列表得自己补回来，
   否则条目会贴着白卡片的左边缘（分类页/推荐阅读都踩这个）。 */
.s-sec--flush > .s-list { padding: 0 20px; }

.s-item-pic {
  flex: 0 0 180px;
  width: 180px;
  height: 112px;
  border-radius: var(--s-radius-sm);
  overflow: hidden;
  background: var(--s-bg-soft);
  display: block;
}
.s-item-pic img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .35s ease;
}
.s-item:hover .s-item-pic img { transform: scale(1.05); }

.s-item-txt {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.s-item-title {
  margin: 0 0 6px;
  font-size: 17px;
  font-weight: 600;
  line-height: 1.5;
  color: var(--s-text);
  transition: color .18s;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.s-item:hover .s-item-title { color: var(--s-red); }

.s-item-desc {
  margin: 0 0 8px;
  font-size: 13px;
  line-height: 1.6;
  color: var(--s-text-3);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.s-item-meta {
  /* 条目改为垂直居中对齐后，文字块高度 = 内容高度，
     这里的 auto 在需要「有摘要时把标签压到底」的条目上仍会生效 */
  margin-top: auto;
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 12px;
  color: var(--s-text-4);
}

.s-item-meta .s-cate {
  color: var(--s-red);
  background: var(--s-red-soft);
  padding: 1px 8px;
  border-radius: 3px;
  font-size: 12px;
}

/* 无图条目：整行只有文字 */
.s-item--notext .s-item-pic { display: none; }

/* --------------------------------------------------------------------------
   9. 纯文字新闻列表（侧栏/紧凑区）
   -------------------------------------------------------------------------- */
.s-txtlist { list-style: none; margin: 0; padding: 0; }
.s-txtlist li {
  padding: 11px 0;
  border-bottom: 1px dashed var(--s-line);
  font-size: 14px;
  line-height: 1.55;
}
.s-txtlist li:last-child { border-bottom: 0; }
.s-txtlist a {
  color: var(--s-text-2);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  transition: color .18s;
}
.s-txtlist a:hover { color: var(--s-red); }

/* 前 N 名带序号 */
.s-rank li {
  display: flex;
  gap: 10px;
  align-items: flex-start;
}
/* flex 子项默认 min-width:auto，长标题会把带序号的列表撑破 */
.s-rank li > a { flex: 1 1 auto; min-width: 0; }
.s-rank-num {
  flex: 0 0 20px;
  height: 20px;
  line-height: 20px;
  text-align: center;
  font-size: 12px;
  font-weight: 700;
  color: var(--s-text-3);
  background: var(--s-bg-soft);
  border-radius: 3px;
  margin-top: 2px;
}
.s-rank li:nth-child(1) .s-rank-num { color: #fff; background: var(--s-red); }
.s-rank li:nth-child(2) .s-rank-num { color: #fff; background: #ff7a45; }
.s-rank li:nth-child(3) .s-rank-num { color: #fff; background: #ffb020; }

/* --------------------------------------------------------------------------
   10. 边栏卡片
   -------------------------------------------------------------------------- */
.s-side .s-sec { margin-bottom: 20px; }

/* 侧栏一图流 */
.s-side-hero {
  display: block;
  position: relative;
  margin: 0 -20px 4px;
}
.s-side-hero img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  display: block;
}
.s-side-hero figcaption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 32px 14px 10px;
  background: linear-gradient(to top, rgba(0, 0, 0, .75), transparent);
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.45;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* 侧栏图片广告（详情页 showad=1 时出现） */
.s-ad {
  display: block;
  margin-bottom: 20px;
  border-radius: var(--s-radius);
  overflow: hidden;
  box-shadow: var(--s-shadow);
  background: var(--s-bg);
  line-height: 0;
}
.s-ad img { width: 100%; height: auto; display: block; }

/* --------------------------------------------------------------------------
   11. 详情页
   -------------------------------------------------------------------------- */
.s-crumb {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  padding: 14px 0;
  font-size: 13px;
  color: var(--s-text-3);
}
.s-crumb a { color: var(--s-text-3); }
.s-crumb a:hover { color: var(--s-red); }
.s-crumb .s-sep { color: var(--s-text-4); }
/* 面包屑最后一项是文章标题，可能很长：截断而不是换行把导航顶成两行 */
.s-crumb .s-current {
  max-width: 44ch;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: var(--s-text-2);
}

/* 阅读量（2026-10-29 替换掉原来的百度分享按钮）
   原来这里是 .s-share / .bdsharebuttonbox 的样式。分享按钮整体删掉了，
   原因是它的脚本源写死 http://，全站 HTTPS 后必然被浏览器按混合内容拦掉。
   现在同样的位置显示阅读量 —— 比一排加载不出来的空图标有用。 */
.s-reads {
  margin-left: auto;
  padding: 2px 10px;
  border-radius: 12px;
  background: var(--s-bg-soft, #f5f6f7);
  color: var(--s-text-3);
  font-size: 12.5px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.s-article-card {
  background: var(--s-bg);
  border-radius: var(--s-radius);
  box-shadow: var(--s-shadow);
  padding: 32px 40px 40px;
  margin-bottom: var(--s-gap);
}

.s-article-title {
  margin: 0 0 16px;
  font-size: 28px;
  font-weight: 700;
  line-height: 1.45;
  color: var(--s-text);
  letter-spacing: .3px;
}

.s-article-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--s-line);
  font-size: 13px;
  color: var(--s-text-3);
}
.s-article-meta a { color: var(--s-text-3); }
.s-article-meta a:hover { color: var(--s-red); }

/* 正文：沿用旧的 .article 类名（存量 CSS 与净化规则都依赖它），只做增强 */
.s-article-card .article {
  padding-top: 24px;
  font-size: 16px;
  line-height: 1.95;
  color: #333;
  font-family: inherit;
  word-wrap: break-word;
}
.s-article-card .article p {
  margin: 0 0 1.1em;
  text-indent: 2em;              /* 与存量正文的 text-indent:2em 保持一致 */
}
.s-article-card .article img {
  display: block;
  margin: 20px auto;
  max-width: 100%;
  height: auto;
  border-radius: var(--s-radius-sm);
}
.s-article-card .article h1,
.s-article-card .article h2,
.s-article-card .article h3 {
  margin: 1.4em 0 .7em;
  font-weight: 700;
  line-height: 1.5;
  color: var(--s-text);
  text-indent: 0;
}
.s-article-card .article h2 { font-size: 21px; }
.s-article-card .article h3 { font-size: 18px; }
.s-article-card .article blockquote {
  margin: 1.2em 0;
  padding: 12px 18px;
  border-left: 4px solid var(--s-red);
  background: var(--s-bg-soft);
  color: var(--s-text-2);
  text-indent: 0;
}
.s-article-card .article ul,
.s-article-card .article ol {
  margin: 0 0 1.1em;
  padding-left: 2em;
  text-indent: 0;
}
.s-article-card .article li { margin: .4em 0; }
.s-article-card .article table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.2em 0;
  font-size: 14px;
  text-indent: 0;
}
.s-article-card .article table th,
.s-article-card .article table td {
  border: 1px solid var(--s-line);
  padding: 9px 12px;
  text-indent: 0;
}
.s-article-card .article table th {
  background: var(--s-bg-soft);
  font-weight: 600;
}

/* 关键字 */
.s-tags {
  margin: 28px 0 0;
  padding-top: 20px;
  border-top: 1px solid var(--s-line);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--s-text-3);
}
.s-tag {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 14px;
  background: var(--s-bg-soft);
  border: 1px solid var(--s-line);
  color: var(--s-text-2);
  font-size: 13px;
  transition: all .18s;
}
.s-tag:hover {
  color: var(--s-red);
  border-color: var(--s-red-line);
  background: var(--s-red-soft);
}

/* 免责声明 */
.s-disclaimer {
  margin: 24px 0 0;
  padding: 14px 16px;
  border-radius: var(--s-radius-sm);
  background: var(--s-bg-soft);
  font-size: 12px;
  line-height: 1.8;
  color: var(--s-text-4);
  text-indent: 0;
}

/* 正文末尾的举报行：与免责声明分开一档，视线能扫到但不会抢正文的戏 */
.s-disclaimer-acts {
  margin: 10px 0 0;
  font-size: 12.5px;
  color: var(--s-text-3);
  text-indent: 0;
}
.s-disclaimer-acts a { color: var(--s-text-3); border-bottom: 1px solid var(--s-line); }
.s-disclaimer-acts a:hover { color: var(--s-red); border-bottom-color: var(--s-red-soft); }
.s-disclaimer-acts .s-report-link { color: var(--s-red); border-bottom-color: var(--s-red-soft); }
.s-disclaimer-dot { margin: 0 6px; color: var(--s-text-4); }

/* 评论区容器留白 */
.s-comment {
  margin: 0 0 var(--s-gap);
  background: var(--s-bg);
  border-radius: var(--s-radius);
  box-shadow: var(--s-shadow);
  padding: 20px;
}

/* --------------------------------------------------------------------------
   12. 分页（kkpager 覆盖）
   -------------------------------------------------------------------------- */
#kkpager-box {
  background: var(--s-bg);
  border-radius: var(--s-radius);
  box-shadow: var(--s-shadow);
  padding: 18px 20px;
  margin-top: var(--s-gap);
}
#kkpager {
  text-align: center;
  font-size: 14px;
  color: var(--s-text-3);
}
#kkpager a,
#kkpager span.pageBtn {
  display: inline-block;
  min-width: 34px;
  height: 34px;
  line-height: 32px;
  margin: 0 3px;
  padding: 0 10px;
  border: 1px solid var(--s-line);
  border-radius: var(--s-radius-sm);
  color: var(--s-text-2);
  background: #fff;
  transition: all .18s;
}
#kkpager a:hover {
  color: var(--s-red);
  border-color: var(--s-red);
}

/* ⚠️ 覆盖 kkpager 时踩过两个坑，都靠这里绕开：
   1) 它实际输出的按钮是 .pageBtnWrap 里的 <a>/<span class="curr">/<span class="disabled">，
      不是 .currPage —— 早先按 .currPage 写，完全没命中，页码一直是默认蓝；
   2) kkpager.css 在本页模板底部才引入（晚于 site.css），且用 `#kkpager .pageBtnWrap`
      设了 float:left、.infoTextAndGoPageBtnWrap 设了 float:right，同优先级后者胜出，
      于是两段各自贴边、整组控件不居中。必须 !important 清掉浮动。 */
#kkpager .pageBtnWrap {
  display: inline-flex !important;
  float: none !important;
  align-items: center;
  gap: 6px;
  vertical-align: middle;
}
#kkpager .infoTextAndGoPageBtnWrap {
  display: inline-flex !important;
  float: none !important;
  align-items: center;
  gap: 6px;
  margin-left: 14px;
  vertical-align: middle;
  font-size: 13px;
}
#kkpager .pageBtnWrap a,
#kkpager .pageBtnWrap > span {
  display: inline-block;
  min-width: 34px;
  height: 34px;
  line-height: 32px;
  margin: 0 !important;
  padding: 0 10px;
  border: 1px solid var(--s-line);
  border-radius: var(--s-radius-sm);
  background: #fff;
  color: var(--s-text-2);
  text-align: center;
  text-decoration: none;
  transition: all .18s;
}
#kkpager .pageBtnWrap a:hover {
  color: var(--s-red);
  border-color: var(--s-red);
}
#kkpager .pageBtnWrap .curr {
  background: var(--s-red) !important;
  border-color: var(--s-red) !important;
  color: #fff !important;
  font-weight: 600;
}
#kkpager .pageBtnWrap .disabled {
  background: #fafbfc;
  color: var(--s-text-4);
  cursor: not-allowed;
}

/* 跳转输入框与「确定」按钮（kkpager 用的是 id，不是 class） */
#kkpager .goPageBox { display: inline-flex; align-items: center; gap: 4px; }
#kkpager #kkpager_btn_go_input,
#kkpager .pageSkip input {
  width: 46px;
  height: 34px;
  border: 1px solid var(--s-line);
  border-radius: var(--s-radius-sm);
  text-align: center;
  margin: 0 4px;
  font-size: 13px;
}
#kkpager #kkpager_btn_go {
  height: 34px;
  padding: 0 12px;
  border: 1px solid var(--s-red);
  border-radius: var(--s-radius-sm);
  background: var(--s-red);
  color: #fff;
  font-size: 13px;
  cursor: pointer;
  transition: all .18s;
}
#kkpager #kkpager_btn_go:hover { background: var(--s-red-dark); border-color: var(--s-red-dark); }

/* --------------------------------------------------------------------------
   13. 页脚
   -------------------------------------------------------------------------- */
.s-footer {
  background: #2b2f36;
  color: #9aa1ab;
  padding: 32px 0 24px;
  font-size: 13px;
  line-height: 1.9;
}
.s-footer a { color: #9aa1ab; }
.s-footer a:hover { color: #fff; }
.s-footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  padding-bottom: 18px;
  margin-bottom: 16px;
  border-bottom: 1px solid rgba(255, 255, 255, .09);
}
.s-footer-links a { font-size: 13px; }
/* 站内导航（T3）：页脚加一行文字链指向归档与 RSS。
   颜色沿用 .s-footer a（#9aa1ab → hover 白），这里只管排版。 */
.s-footer-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  margin: 14px 0 4px;
  padding-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, .08);
  font-size: 13px;
}

.s-footer-copy { color: #7c828b; }

/* 底部法务链接（用户协议 / 隐私政策 / 版权 / 免责 / 备案）
   与上面那行站内导航分两行：一行是「逛站入口」，一行是「合规入口」，
   混在一起会让举报入口埋在一堆链接里，也就没人点得到。 */
.s-footer-legal {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
  margin: 10px 0 0;
  font-size: 12.5px;
  color: #6f757e;
}
.s-footer-legal a { color: #8b919a; }
.s-footer-legal a:hover { color: #fff; }
.s-footer-legal .s-footer-report { color: var(--s-red-faint); }
.s-footer-legal .s-footer-report:hover { color: #fff; }
.s-footer-copy p { margin: 4px 0; }

/* --------------------------------------------------------------------------
   14. 首页专用：特别推荐（四列图文卡）+ 分类墙（两列）
   -------------------------------------------------------------------------- */
/* 四列图文卡：图在上、标题在下 */
.s-tiles {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
  padding: 16px 0 18px;
}

.s-tile { display: block; }
.s-tile-pic {
  display: block;
  border-radius: var(--s-radius-sm);
  overflow: hidden;
  background: var(--s-bg-soft);
}
.s-tile-pic img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  display: block;
  transition: transform .35s ease;
}
.s-tile:hover .s-tile-pic img { transform: scale(1.05); }

.s-tile h3 {
  margin: 9px 0 0;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.5;
  color: var(--s-text);
  transition: color .18s;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.s-tile:hover h3 { color: var(--s-red); }

/* 两列分类墙
   ⚠️ 2026-10 首页改成卡片流（.s-cards）后这里暂时没有页面在用了。
   保留是因为「每块首图 + 标题列表」这个版式还有复用价值（分类聚合页/专题页），
   真要清理时记得连 .s-block-hero / .s-block-hero-cap / .s-block-list 和
   媒体查询里的对应几行一起删，别只删一半。 */
.s-cols {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-gap);
  margin-bottom: var(--s-gap);
}
.s-cols > .s-sec { margin-bottom: 0; }

/* 分类块内的首图
   内缩与列表文字对齐（.s-sec--flush 的头部内边距是 20px），
   不做满宽出血 —— 出血会和下方缩进的列表形成参差，卡片内元素统一内边距更整。 */
.s-block-hero {
  display: block;
  position: relative;
  margin: 0 20px;
  border-radius: var(--s-radius-sm);
  overflow: hidden;
  background: var(--s-bg-soft);
}
.s-block-hero img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  display: block;
  transition: transform .35s ease;
}
.s-block-hero:hover img { transform: scale(1.04); }

.s-block-hero-cap {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 34px 14px 12px;
  background: linear-gradient(to top, rgba(0, 0, 0, .78), rgba(0, 0, 0, 0));
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.45;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.s-block-list {
  list-style: none;
  margin: 0;
  padding: 6px 20px 14px;
}
.s-block-list li {
  padding: 9px 0;
  border-bottom: 1px dashed var(--s-line);
  font-size: 14px;
  line-height: 1.55;
}
.s-block-list li:last-child { border-bottom: 0; }
.s-block-list a {
  display: block;
  color: var(--s-text-2);
  transition: color .18s;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.s-block-list a:hover { color: var(--s-red); }

/* 侧栏里的图文条目要更紧凑（180px 缩略图在 300px 侧栏里放不下） */
.s-side .s-item { gap: 12px; padding: 13px 0; }
.s-side .s-item-pic {
  flex: 0 0 96px;
  width: 96px;
  height: 68px;
}
.s-side .s-item-title { font-size: 14px; margin-bottom: 2px; }
.s-side .s-item-desc { display: none; }
.s-side .s-item-meta { font-size: 11px; }

/* 空数据兜底：区块没有任何条目时整块不占位（模板层已判空，这里再兜一次） */
.s-empty {
  padding: 40px 0;
  text-align: center;
  color: var(--s-text-4);
  font-size: 14px;
}

/* --------------------------------------------------------------------------
   15. 首页卡片流（两列，左图右文）
   版式参考极目新闻首页：白卡 + 左缩略图 + 标题 + 来源/时间，铺满内容宽度。
   -------------------------------------------------------------------------- */
.s-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  padding-bottom: var(--s-gap);
}

/* 整卡可点：卡片容器是 article，不是 <a>。
   ⚠️ 之前用 <a class="s-card"> 包整卡，但搜索结果卡的 meta 里还要放分类链接，
   嵌套 <a> 是非法结构，浏览器会提前闭合外层 <a>，卡片直接被切碎
   （实测：DOM 里 .s-card 的 children 变成 0，只剩一坨灰块）。
   现在用「拉伸链接」：标题的 <a> 通过伪元素铺满整卡，meta 里的链接单独抬高层级。 */
.s-card {
  position: relative;
  display: flex;
  gap: 16px;
  padding: 14px;
  background: var(--s-bg);
  border-radius: var(--s-radius);
  box-shadow: var(--s-shadow);
  transition: box-shadow .2s ease, transform .2s ease;
}
.s-card:hover {
  box-shadow: 0 8px 22px rgba(0, 0, 0, .09);
  transform: translateY(-2px);
}

.s-card-pic {
  flex: 0 0 200px;
  width: 200px;
  height: 128px;
  border-radius: var(--s-radius-sm);
  overflow: hidden;
  background: var(--s-bg-soft);
  display: block;
}
.s-card-pic img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .35s ease;
}
.s-card:hover .s-card-pic img { transform: scale(1.05); }

/* 没有配图时的占位：撑住 200×128，避免卡片高度参差
   （库里 99% 的稿件没有封面图，卡片走 .s-card--txt 纯文字版式，这里只留作兜底） */
.s-card-pic--none {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--s-text-4);
  font-size: 12px;
  letter-spacing: .04em;
}

/* 无封面图的纯文字卡：标题撑满整卡，行数放宽到 3 行，内边距略大一点
   让整卡看起来仍是「一张卡」而不是列表项。
   min-height 是必须的：单行标题的卡只有 44px 高，跟旁边两行的卡并排会一高一低，
   给个下限后同一行的卡片高度接近，整屏节奏更稳。 */
.s-card--txt { padding: 18px 20px; min-height: 108px; }
.s-card--txt .s-card-title { font-size: 18px; margin-bottom: 10px; }

.s-card-txt {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.s-card-title {
  margin: 0 0 8px;
  font-size: 17px;
  font-weight: 600;
  line-height: 1.5;
  color: var(--s-text);
  display: -webkit-box;
  -webkit-line-clamp: 3;      /* 截图里的标题最多 3 行 */
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.s-card-title a {
  color: inherit;
  transition: color .18s;
}
.s-card:hover .s-card-title a { color: var(--s-red); }

/* 拉伸链接：让标题链接的点击区覆盖整张卡 */
.s-card-title a::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
}

.s-card-meta {
  margin-top: auto;           /* 贴卡片底部，多张卡片的 meta 在同一基线上 */
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 12.5px;
  color: var(--s-text-4);
}
/* meta 里的分类链接要压在拉伸链接之上，否则点不到 */
.s-card-meta a {
  position: relative;
  z-index: 2;
}
/* 搜索结果卡的分类标签：跟分类页的标签同一套观感 */
.s-card-meta .s-cate {
  color: var(--s-red);
  background: var(--s-red-soft);
  padding: 1px 8px;
  border-radius: 3px;
  font-size: 12px;
}
.s-card-src { color: var(--s-text-3); }

/* --------------------------------------------------------------------------
   16. 搜索页
   -------------------------------------------------------------------------- */
/* 大号搜索条：顶栏那个搜索框是给全站用的，搜索页里得有更明确的主输入区 */
.s-searchbar {
  display: flex;
  gap: 10px;
  margin: 4px 0 14px;
}
.s-searchbar input {
  flex: 1 1 auto;
  min-width: 0;
  height: 46px;
  padding: 0 16px;
  font-size: 15px;
  color: var(--s-text);
  background: var(--s-bg);
  border: 1px solid var(--s-line);
  border-radius: var(--s-radius);
  outline: none;
  transition: border-color .18s, box-shadow .18s;
}
.s-searchbar input::placeholder { color: var(--s-text-4); }
.s-searchbar input:focus {
  border-color: var(--s-red);
  box-shadow: 0 0 0 3px rgba(230, 0, 18, .08);
}
.s-searchbar button {
  flex: 0 0 auto;
  height: 46px;
  padding: 0 32px;
  font-size: 15px;
  font-weight: 600;
  color: #fff;
  background: var(--s-red);
  border: 0;
  border-radius: var(--s-radius);
  cursor: pointer;
  transition: background .18s;
}
.s-searchbar button:hover { background: var(--s-red-dark); }

.s-search-tip {
  margin: 0 0 16px;
  font-size: 13.5px;
  color: var(--s-text-3);
}
.s-search-tip b { color: var(--s-red); font-weight: 600; }
.s-search-tip .s-kw { color: var(--s-text); font-weight: 600; }

/* .s-sec--flush 清掉了区块内边距，里面的序号列表得自己补回来 */
.s-sec--flush > .s-txtlist { padding: 0 20px 8px; }

/* 分类页顶部的「频道焦点」：三列图文条 */
.s-tiles--3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  background: var(--s-bg);
  border-radius: var(--s-radius);
  box-shadow: var(--s-shadow);
  padding: 18px 20px;
  margin-bottom: var(--s-gap);
}

/* 区块标题右侧的计数/提示文字 */
.s-count {
  font-size: 13px;
  color: var(--s-text-4);
}

/* --------------------------------------------------------------------------
   16. 详情页「上一篇 / 下一篇」
   资讯站的 PV 主要靠详情页串联，读完要能直接进相邻稿件，不必退回列表。
   -------------------------------------------------------------------------- */
.s-prevnext {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin-top: var(--s-gap);
}

.s-prevnext-item {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 14px 18px;
  background: var(--s-bg);
  border-radius: var(--s-radius);
  box-shadow: var(--s-shadow);
  min-width: 0;
}

/* 下一篇靠右，视觉上形成「左←→右」的方向感 */
.s-prevnext-item--next {
  justify-content: flex-end;
  text-align: right;
}

.s-prevnext-lb {
  flex: 0 0 auto;
  font-size: 12.5px;
  color: var(--s-red);
  background: var(--s-red-soft);
  padding: 2px 8px;
  border-radius: 3px;
  white-space: nowrap;
}

.s-prevnext-item a {
  color: var(--s-text);
  font-size: 14.5px;
  line-height: 1.5;
  /* 标题长到两行就截断，避免一条特别长的标题把整块撑高 */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  transition: color .18s ease;
}

.s-prevnext-item a:hover { color: var(--s-red); }

.s-prevnext-none {
  font-size: 13.5px;
  color: var(--s-text-4);
}

/* --------------------------------------------------------------------------
   17. 标签聚合页 /tag/:name
   -------------------------------------------------------------------------- */
.s-tag-hd {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 12px;
  padding: 18px 20px;
  margin-bottom: var(--s-gap);
  background: var(--s-bg);
  border-radius: var(--s-radius);
  box-shadow: var(--s-shadow);
}

.s-tag-name {
  margin: 0;
  font-size: 22px;
  font-weight: 700;
  color: var(--s-text);
}

/* 标签名前的 # 用红色，跟站内其它强调色一致 */
.s-tag-name::first-letter { color: var(--s-red); }

.s-tag-count {
  margin: 0;
  font-size: 13.5px;
  color: var(--s-text-4);
}

.s-tag-count b { color: var(--s-red); font-weight: 600; }

/* --------------------------------------------------------------------------
   18. 404 页（/404 与「未匹配路由」共用同一视图）
   --------------------------------------------------------------------------
   改造前的 404 靠 index.css 的 .container-error-404 做数字翻滚动画：
   字体是旧站的、没有搜索框、也没有任何内容出口。新版按前台设计语言重做，
   结构是「大号 404 → 一句人话 → 搜索框 → 主按钮 → 频道入口 → 热门推荐」。
   所有样式都是纯 CSS，不依赖 JS 动画（也就没有「JS 挂了页面变空白」的风险）。
   -------------------------------------------------------------------------- */
.s-404 {
  margin-bottom: var(--s-gap);
  padding: 44px 24px 36px;
  text-align: center;
  background: var(--s-bg);
  border-radius: var(--s-radius);
  box-shadow: var(--s-shadow);
  /* 顶部一层极淡的红晕，把视线先拉到数字上，比整块纯白有层次 */
  background-image: radial-gradient(120% 80% at 50% 0, var(--s-red-soft) 0, rgba(255, 255, 255, 0) 62%);
}

/* 大号 404：三个数字分开包 span，中间的 0 做成空心描边，像「中间破了个洞」 */
.s-404-code {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 4px;
  margin: 4px 0 16px;
  font-size: 88px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: .01em;
  color: var(--s-red);
  user-select: none;
}
.s-404-code span { display: inline-block; padding: 0 3px; }
/* ⚠️ 底色不能写成 transparent：万一浏览器不支持 text-stroke，数字会整个消失，
     只剩「4 4」。填浅红时即使描边不生效，也还是能看清是一个浅色 0。 */
.s-404-code span:nth-child(2) {
  color: var(--s-red-soft);
  -webkit-text-stroke: 4.5px var(--s-red);
  transform: rotate(-6deg);
}

.s-404-title {
  margin: 0 0 12px;
  font-size: 24px;
  font-weight: 700;
  color: var(--s-text);
}

.s-404-desc {
  margin: 0 0 14px;
  font-size: 14.5px;
  line-height: 1.9;
  color: var(--s-text-3);
  /* 窄屏上这句会断出只剩两三个字的孤行；text-wrap: pretty 让浏览器
     主动避开尾部孤字。不支持的浏览器忽略这条，退回普通折行，不会出错。 */
  text-wrap: pretty;
}

/* 回显出错的地址：比只写「404」有用得多 —— 用户能自己看出是哪个链接错了 */
.s-404-path {
  margin: 0 0 24px;
  font-size: 13px;
  color: var(--s-text-4);
}
.s-404-path code {
  display: inline-block;
  max-width: 100%;
  padding: 2px 8px;
  font-family: Menlo, Consolas, "Courier New", monospace;
  font-size: 12.5px;
  color: var(--s-text-3);
  background: var(--s-bg-soft);
  border: 1px solid var(--s-line);
  border-radius: var(--s-radius-sm);
  word-break: break-all;   /* 超长垃圾链接不能把卡片撑破 */
}

/* 搜索框：复用搜索页的 .s-searchbar，只在 404 里收窄居中 */
.s-404-search {
  max-width: 560px;
  margin: 0 auto 22px;
}

.s-404-acts {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 26px;
}
.s-404-btn {
  display: inline-flex;
  align-items: center;
  height: 40px;
  padding: 0 22px;
  font-size: 14.5px;
  color: var(--s-text-2);
  background: var(--s-bg);
  border: 1px solid var(--s-line);
  border-radius: 20px;
  transition: color .18s, border-color .18s, background .18s;
}
.s-404-btn:hover { color: var(--s-red); border-color: var(--s-red); }
.s-404-btn--primary {
  color: #fff;
  background: var(--s-red);
  border-color: var(--s-red);
  font-weight: 600;
}
.s-404-btn--primary:hover {
  color: #fff;
  background: var(--s-red-dark);
  border-color: var(--s-red-dark);
}
.s-404-btn--ghost { color: var(--s-text-3); border-style: dashed; }

/* 频道入口：页顶导航已有一份完整导航，这里只给几个高频频道做「快速回头」 */
.s-404-chans {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  padding-top: 20px;
  border-top: 1px solid var(--s-line-2);
}
.s-404-chans-lb {
  margin-right: 2px;
  font-size: 13px;
  color: var(--s-text-4);
}
.s-404-chans a {
  padding: 4px 12px;
  font-size: 13px;
  color: var(--s-text-2);
  background: var(--s-bg-soft);
  border: 1px solid var(--s-line);
  border-radius: 14px;
}
.s-404-chans a:hover {
  color: var(--s-red);
  background: var(--s-red-soft);
  border-color: var(--s-red-soft);
}

/* 热门推荐区：把卡片流的标题字重压一档，别跟首页焦点抢视线 */
.s-404-rec .s-card--txt { min-height: 0; padding: 16px 20px; }
.s-404-rec .s-card-title { font-size: 16px; }
/* 同一行的卡片被 grid 拉成等高，而这里的标题长短差得多（一行 / 三行都有），
   沿用「meta 贴底」会让短标题那张在标题与 meta 之间空出一大块。
   改成标题 + meta 作为一组垂直居中，视觉上更稳。 */
.s-404-rec .s-card-txt { justify-content: center; }
.s-404-rec .s-card-meta { margin-top: 0; }

/* --------------------------------------------------------------------------
   19. 响应式
   -------------------------------------------------------------------------- */
@media (max-width: 1199.98px) {
  .s-side { flex-basis: 280px; width: 280px; }
  .s-item-pic { flex-basis: 160px; width: 160px; height: 100px; }
  .s-tiles { gap: 14px; }

  /* 卡片流：容器变窄，缩略图跟着收一点，否则标题只剩十来个字 */
  .s-cards { gap: 16px; }
  .s-card-pic { flex-basis: 176px; width: 176px; height: 112px; }
}

@media (max-width: 991.98px) {
  .s-layout { flex-direction: column; }
  .s-side {
    flex-basis: auto;
    width: 100%;
    position: static;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
    align-items: start;
  }
  .s-side .s-sec { margin-bottom: 0; }

  .s-focus { flex-direction: column; }
  /* 竖排后不再有右列撑高，图片容器要自己给高度（img 是绝对定位铺满的） */
  .s-focus-hero {
    flex-basis: auto;
    min-height: 0;
    height: 56vw;
    max-height: 340px;
  }

  .s-article-card { padding: 24px 20px 28px; }
  .s-article-title { font-size: 22px; }

  .s-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .s-tiles--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  /* 卡片流维持两列（平板宽度两列仍好读），缩略图再收一档 */
  .s-card-pic { flex-basis: 150px; width: 150px; height: 100px; }
  .s-card-title { font-size: 16px; }
}

@media (max-width: 767.98px) {
  /* ⚠️ .s-header-inner 与 .s-wrap 是同一个 div，这里必须把四个方向都写全。
     只写 padding-top / padding-bottom 时，实测会把 .s-wrap 的水平内边距
     丢掉（搜索框右边界一直顶到视口外，红按钮被裁）。 */
  .s-header-inner {
    height: auto;
    padding: 14px 16px;
    flex-wrap: wrap;
    gap: 12px;
  }
  .s-search { flex: 1 1 auto; width: 100%; order: 2; }

  .s-nav-list {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .s-nav-list::-webkit-scrollbar { display: none; }
  .s-nav-list a { padding: 12px 14px; font-size: 15px; }

  .s-side { grid-template-columns: 1fr; }

  .s-item { gap: 12px; padding: 14px 0; }
  .s-item-pic { flex-basis: 120px; width: 120px; height: 80px; }
  .s-item-title { font-size: 15px; }
  .s-item-desc { display: none; }   /* 小屏只留标题，避免信息过密 */

  .s-article-title { font-size: 20px; }
  .s-article-card .article { font-size: 16px; line-height: 1.85; }

  .s-sec { padding: 0 14px 4px; }
  .s-sec-hd { height: 48px; }
  .s-sec-title { font-size: 17px; }
  .s-side-hero { margin: 0 -14px 4px; }

  /* 小屏：分类墙与特别推荐都收成一列/两列，避免图片过窄 */
  .s-cols { grid-template-columns: 1fr; gap: 16px; }
  .s-tiles { gap: 12px; padding: 12px 0 14px; }

  /* 频道焦点三列条：不要按单列堆叠 —— 一张 16:10 图在小屏上就有 280px 高，
     三张要滑三次屏才过完，首屏全是图。改成横向滑动条，一屏露出约两张。 */
  .s-tiles--3 {
    display: flex;
    gap: 12px;
    padding: 14px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
  }
  .s-tiles--3::-webkit-scrollbar { display: none; }
  .s-tiles--3 > .s-tile {
    flex: 0 0 46%;
    scroll-snap-align: start;
  }
  .s-tile h3 { font-size: 13px; }
  .s-block-list { padding: 4px 14px 10px; }
  .s-block-hero { margin: 0 14px; }

  /* 卡片流：手机上一列，缩略图 120×84，标题压到 2 行 */
  .s-cards { grid-template-columns: 1fr; gap: 12px; }
  .s-card { padding: 12px; gap: 12px; }
  .s-card-pic { flex-basis: 120px; width: 120px; height: 84px; }
  .s-card-title { font-size: 15px; -webkit-line-clamp: 2; }
  .s-card-meta { font-size: 12px; gap: 10px; }
  /* 单列时没必要再撑统一高度：一行标题的卡占 108px 会显得空，让它按内容收缩 */
  .s-card--txt { min-height: 0; padding: 14px 16px; }
  .s-card--txt .s-card-title { font-size: 16px; margin-bottom: 6px; }

  /* 上下篇：手机上两列各剩一半宽，标题只能露几个字，改单列堆叠；
     堆叠后「下一篇」靠右对齐会显得错位，一并复位到左 */
  .s-prevnext { grid-template-columns: 1fr; gap: 10px; margin-top: 14px; }
  .s-prevnext-item--next { justify-content: flex-start; text-align: left; }
  .s-prevnext-item { padding: 12px 14px; }

  /* 标签页头：名称与数量在窄屏上换成两行 */
  .s-tag-hd { padding: 14px 16px; gap: 6px; }
  .s-tag-name { font-size: 19px; }

  /* 404：小屏上大号数字要收，否则 88px 的数字会顶到卡片边缘；
     按钮按「两行」排：flex-basis 给 40%，三个按钮自然折成 2 + 1，
     最后一个被 flex-grow 拉满整行，比硬塞一行（文字被压到换行）稳。 */
  .s-404 { padding: 32px 16px 26px; }
  .s-404-code { font-size: 62px; margin-bottom: 12px; }
  .s-404-title { font-size: 20px; }
  .s-404-desc { font-size: 13.5px; }
  /* 桌面端那句换行是手工 <br>，窄屏上会断出一个只有两个字的新行，
     交给浏览器按宽度自然折行更好看 */
  .s-404-desc br { display: none; }
  .s-404-acts { gap: 8px; }
  .s-404-btn { flex: 1 1 40%; justify-content: center; padding: 0 12px; }
  .s-404-chans { gap: 6px; }
}

/* --------------------------------------------------------------------------
   21. 正文图片灯箱（assets/js/lightbox.js）
   --------------------------------------------------------------------------
   脚本只在详情页装监听（没有 .article 直接退出），所以这里可以放心写全局样式。
   两个 `[hidden]` 必须显式声明：`.s-lb` 给了 display:flex、`.s-lb-btn` 给了
   display:flex，都会盖过 UA 样式表里的 `[hidden] { display: none }`。
   -------------------------------------------------------------------------- */
.s-lb {
  position: fixed;
  inset: 0;
  z-index: 1080;               /* 高于 sticky 导航，低于后台抽屉 */
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(12, 14, 18, .93);
  padding: 24px;
}
.s-lb[hidden] { display: none; }

.s-lb-stage {
  margin: 0;
  max-width: 100%;
  max-height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.s-lb-img {
  max-width: 92vw;
  max-height: 88vh;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: 4px;
  background: #14161a;
  box-shadow: 0 18px 60px rgba(0, 0, 0, .55);
  cursor: zoom-out;
}

.s-lb-btn {
  position: absolute;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, .1);
  color: #fff;
  font-size: 26px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background .18s;
}
.s-lb-btn:hover,
.s-lb-btn:focus-visible {
  background: rgba(255, 255, 255, .24);
  outline: none;
}
.s-lb-btn[hidden] { display: none; }
.s-lb-close { top: 18px; right: 18px; font-size: 30px; }
.s-lb-prev { left: 18px; top: 50%; transform: translateY(-50%); }
.s-lb-next { right: 18px; top: 50%; transform: translateY(-50%); }

.s-lb-count {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 16px;
  margin: 0;
  text-align: center;
  color: rgba(255, 255, 255, .72);
  font-size: 13px;
  letter-spacing: .04em;
}

/* 灯箱打开时锁住背景滚动（否则手机上滑的是后面的正文） */
body.s-lb-open { overflow: hidden; }

/* 正文图可点放大 —— 光标本身就是「这里能点」的唯一提示 */
.article img { cursor: zoom-in; }
.article img:focus-visible { outline: 2px solid var(--s-red); outline-offset: 2px; }

/* 侧栏 hero 没有封面图时退化成纯文字块（覆盖率只有 1%，见 view.ejs 注释） */
.s-side-hero--txt {
  margin: 0 0 4px;
  padding: 14px;
  border: 1px solid var(--s-line);
  border-radius: var(--s-radius-sm);
  background: var(--s-bg-soft);
}
.s-side-hero--txt figcaption {
  position: static;
  padding: 0;
  background: none;
  color: var(--s-text);
  font-size: 15px;
  -webkit-line-clamp: 3;
}

@media (max-width: 767.98px) {
  .s-lb { padding: 8px; }
  .s-lb-img { max-width: 96vw; max-height: 78vh; }
  .s-lb-btn { width: 38px; height: 38px; font-size: 22px; }
  .s-lb-close { top: 8px; right: 8px; }
  .s-lb-prev { left: 6px; }
  .s-lb-next { right: 6px; }
  .s-lb-count { bottom: 8px; }
}

/* --------------------------------------------------------------------------
   22. 时间归档（views/news/archive.ejs）
   --------------------------------------------------------------------------
   索引页是「年 → 月」两级：年份做标题、月份做芯片（月 + 篇数）。
   用 auto-fill 网格而不是固定列数：月份数从 1 到 12 都可能，
   固定 6 列时只有 2 个月的那年右边会空一大片。
   -------------------------------------------------------------------------- */
.s-arch-year { margin-bottom: 22px; }
.s-arch-year:last-child { margin-bottom: 0; }

.s-arch-y {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin: 0 0 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--s-line);
  font-size: 17px;
  font-weight: 700;
  color: var(--s-text);
}
.s-arch-y span {
  font-size: 12px;
  font-weight: 400;
  color: var(--s-text-3);
}

.s-arch-months {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
  gap: 8px;
}
.s-arch-months a {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 6px;
  padding: 10px 8px;
  border: 1px solid var(--s-line);
  border-radius: var(--s-radius-sm);
  background: var(--s-bg);
  color: var(--s-text-2);
  text-decoration: none;
  transition: border-color .16s, color .16s, background .16s;
}
.s-arch-months a:hover {
  border-color: var(--s-red);
  color: var(--s-red);
  background: var(--s-red-soft);
}
.s-arch-months em { font-style: normal; font-size: 14px; }
.s-arch-months b { font-size: 12px; font-weight: 600; color: var(--s-text-3); }
.s-arch-months a:hover b { color: var(--s-red); }

/* 上下期：两块等宽，右侧那块文字右对齐（视觉上就是「往后翻」） */
.s-arch-nav { display: flex; gap: 10px; margin-bottom: 14px; }
.s-arch-nav-btn {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 14px;
  border: 1px solid var(--s-line);
  border-radius: var(--s-radius-sm);
  background: var(--s-bg-soft);
  color: var(--s-text-2);
  font-size: 13.5px;
  text-decoration: none;
}
.s-arch-nav-btn span { font-size: 11.5px; color: var(--s-text-3); }
.s-arch-nav-btn:hover { border-color: var(--s-red); color: var(--s-red); }
.s-arch-nav-btn--next { text-align: right; }
.s-arch-nav-btn.is-off { color: var(--s-text-4); }
.s-arch-nav-btn.is-off span { color: var(--s-text-4); }

.s-arch-side li a { display: flex; justify-content: space-between; gap: 8px; }
.s-arch-side li a.on { color: var(--s-red); font-weight: 600; }
.s-arch-side li a span { color: var(--s-text-3); font-size: 12px; }
.s-arch-more { margin: 10px 0 0; font-size: 12.5px; }
.s-arch-more a { color: var(--s-red); text-decoration: none; }
.s-arch-more a:hover { text-decoration: underline; }

@media (max-width: 767.98px) {
  .s-arch-months { grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 6px; }
  .s-arch-months a { padding: 9px 6px; }
  .s-arch-nav { gap: 8px; }
  .s-arch-nav-btn { padding: 9px 10px; font-size: 12.5px; }
  .s-arch-y { font-size: 16px; }
}

/* --------------------------------------------------------------------------
   23. 法务文档与举报表单（/terms /privacy /copyright /disclaimer /icp /report）
   --------------------------------------------------------------------------
   两页共用一套排版：
     · 法务页是长文，重点是行高、段落间距、目录跳转的可读性；
     · 举报页是表单，重点是输入框尺寸在手机上不跳、错误提示够显眼。
   刻意不引入任何框架的 .form-control —— 前台只加载 site.css，混用会让
   同一页上出现两种输入框（一个圆角一个方角），很难看。
   -------------------------------------------------------------------------- */

/* ---- 法务长文 ---- */
.s-legal { padding: 26px 30px 30px; }
.s-legal-title { margin: 0 0 8px; font-size: 26px; line-height: 1.35; color: var(--s-text); }
.s-legal-meta { margin: 0 0 18px; font-size: 12.5px; color: var(--s-text-3); }
.s-legal-sep { margin: 0 6px; color: var(--s-text-4); }
.s-legal-intro {
  margin: 0 0 22px; padding: 14px 16px;
  background: var(--s-bg-soft); border-left: 3px solid var(--s-red);
  border-radius: 0 var(--s-radius-sm) var(--s-radius-sm) 0;
  font-size: 14px; line-height: 1.9; color: var(--s-text-2);
}
.s-legal-sec { margin: 0 0 22px; }
.s-legal-h {
  margin: 0 0 10px; padding-bottom: 8px;
  font-size: 16.5px; font-weight: 700; color: var(--s-text);
  border-bottom: 1px solid var(--s-line);
}
.s-legal-p { margin: 0 0 10px; font-size: 14.5px; line-height: 1.95; color: var(--s-text-2); }
.s-legal-p:last-child { margin-bottom: 0; }
.s-legal-foot {
  margin: 26px 0 0; padding-top: 16px; border-top: 1px dashed var(--s-line);
  font-size: 13px; line-height: 1.9; color: var(--s-text-3);
}
.s-legal-foot a { color: var(--s-red); }
.s-legal-nav {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin: 18px 0 0; padding-top: 16px; border-top: 1px solid var(--s-line);
}
.s-legal-nav a, .s-legal-nav span {
  padding: 6px 12px; border-radius: 999px; font-size: 12.5px;
  border: 1px solid var(--s-line); color: var(--s-text-2);
}
.s-legal-nav a:hover { border-color: var(--s-red); color: var(--s-red); }
.s-legal-nav .is-on { background: var(--s-red-soft); border-color: var(--s-red-soft); color: var(--s-red); font-weight: 600; }
.s-legal-toc li a { display: block; padding: 3px 0; font-size: 13px; color: var(--s-text-2); line-height: 1.6; }
.s-legal-toc li a:hover { color: var(--s-red); }

/* 备案信息表 */
.s-legal-table { width: 100%; border-collapse: collapse; margin: 0 0 6px; }
.s-legal-table th, .s-legal-table td {
  padding: 11px 4px; border-bottom: 1px solid var(--s-line);
  font-size: 14px; text-align: left; vertical-align: top;
}
.s-legal-table th { width: 132px; font-weight: 600; color: var(--s-text); }
.s-legal-table td { color: var(--s-text-2); }
.s-legal-table td a { color: var(--s-red); }
.s-legal-dash { color: var(--s-text-4); }

/* ---- 举报表单 ---- */
.s-report-lead {
  margin: 0 0 20px; font-size: 14px; line-height: 1.9; color: var(--s-text-2);
  padding: 14px 16px; background: var(--s-bg-soft); border-radius: var(--s-radius-sm);
}
.s-report-err {
  margin: 0 0 18px; padding: 11px 14px;
  background: var(--s-red-soft); border: 1px solid var(--s-red-line); border-radius: var(--s-radius-sm);
  color: var(--s-red-dark); font-size: 13.5px; line-height: 1.7;
}
.s-form-row { margin: 0 0 16px; }
.s-form-label { display: block; margin: 0 0 6px; font-size: 13.5px; font-weight: 600; color: var(--s-text); }
.s-form-label i { margin-left: 3px; color: var(--s-red); font-style: normal; }
.s-form-input {
  display: block; width: 100%; box-sizing: border-box;
  padding: 10px 12px; border: 1px solid #ddd; border-radius: var(--s-radius-sm);
  background: #fff; color: var(--s-text); font-size: 14px; line-height: 1.6;
  font-family: inherit; transition: border-color .15s, box-shadow .15s;
}
.s-form-input:focus {
  outline: none; border-color: var(--s-red);
  box-shadow: 0 0 0 3px rgba(230, 0, 18, .08);
}
.s-form-area { resize: vertical; min-height: 132px; }
select.s-form-input { appearance: none; background-image: none; cursor: pointer; }
.s-form-hint { margin: 6px 0 0; font-size: 12px; color: var(--s-text-3); line-height: 1.6; }
.s-form-acts { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 22px; }
.s-form-btn {
  padding: 11px 30px; border: 0; border-radius: var(--s-radius-sm);
  background: var(--s-red); color: #fff; font-size: 15px; font-weight: 600;
  font-family: inherit; cursor: pointer; transition: background .15s;
}
.s-form-btn:hover { background: var(--s-red-dark); }
.s-form-note { font-size: 12px; color: var(--s-text-3); line-height: 1.7; }
.s-form-note a { color: var(--s-red); }

/* 提交成功 */
.s-report-done { padding: 18px 0 8px; text-align: center; }
.s-report-done-ico {
  width: 56px; height: 56px; margin: 0 auto 16px; border-radius: 50%;
  background: #eaf7ee; color: #23a455; font-size: 30px; line-height: 56px; font-weight: 700;
}
.s-report-done-title { margin: 0 0 8px; font-size: 22px; color: var(--s-text); }
.s-report-done-no { margin: 0 0 16px; font-size: 14px; color: var(--s-text-3); }
.s-report-done-no b { color: var(--s-red); font-size: 16px; }
.s-report-done-txt {
  margin: 0 auto 12px; max-width: 560px;
  font-size: 13.5px; line-height: 1.95; color: var(--s-text-2); text-align: left;
}
.s-report-done-txt a { color: var(--s-red); }
.s-report-done-acts { display: flex; justify-content: center; gap: 12px; margin: 22px 0 6px; }

/* 侧栏：须知 + 邮箱 */
.s-report-tips li { display: flex; flex-direction: column; gap: 2px; padding: 8px 0; border-bottom: 1px dashed var(--s-line); }
.s-report-tips li:last-child { border-bottom: 0; }
.s-report-tips li b { font-size: 13px; color: var(--s-text); }
.s-report-tips li span { font-size: 12.5px; color: var(--s-text-3); line-height: 1.6; }
.s-report-mail { margin: 12px 0 0; padding: 10px 12px; background: var(--s-bg-soft); border-radius: var(--s-radius-sm); font-size: 12.5px; line-height: 1.8; color: var(--s-text-3); }
.s-report-mail a { color: var(--s-red); word-break: break-all; }

@media (max-width: 767.98px) {
  .s-legal { padding: 18px 16px 22px; }
  .s-legal-title { font-size: 21px; }
  .s-legal-p { font-size: 14px; line-height: 1.9; }
  .s-legal-h { font-size: 15.5px; }
  .s-legal-table th { width: 96px; font-size: 13px; }
  .s-legal-table th, .s-legal-table td { padding: 9px 2px; font-size: 13px; }
  .s-form-btn { width: 100%; }
  .s-form-note { width: 100%; }
  .s-report-done-title { font-size: 19px; }
}