@charset "utf-8";
/* ==========================================================================
   theme.css — 现代化改版主题层

   设计语言来源：awesome-design-md/design-md/airtable/DESIGN.md
   （白色画布 + 近黑墨色 + 单一强调色 + 色块分区 + 细线卡片 + 极简阴影）

   为什么选它：73 套示例里，只有这一套真的定义了本站的主力结构 ——
   数据表格行（pricing-comparison-row，hairline 明写用于 table dividers）、
   左侧导轨（topic-filter-rail 240px，对应内页 col-md-3 的 170~245px）、
   面包屑（muted 色值角色）。且它的主 CTA 是近黑而非彩色，彩色位空着，
   本站的橙可以名正言顺地进驻；全表零负字距、行高无单位且 ≥1.1，
   对中文完全安全。

   ⚠️ 本文件是**增量主题**，不改动 bootstrap.min.css / style.css /
      appointment_style.css / base.css / pages.css 五个既有样式表。
      所有规则都限定在 `.theme-v2` 作用域下 —— 给 <body> 加
      class="theme-v2" 的页面切换到新设计，其余 14 页保持原样。
      灰度发布时逐页加这个类即可，回退只需删掉这个类。

   字体方案：全站零 webfont（沿用既有约定）。中文站点应当**中文族优先**，
   让中西文来自同一个字体、避免一行内基线跳变；数字另用
   font-variant-numeric: tabular-nums 对齐。
   ========================================================================== */

/* ==========================================================================
   1. 设计令牌
   ========================================================================== */

:root {
  /* --- 表面 --- */
  --c-canvas: #ffffff;
  --c-surface-soft: #f8fafc;
  --c-surface-strong: #e0e2e6;
  --c-surface-dark: #181d26;
  --c-hairline: #dddddd;
  --c-hairline-soft: #e8e8e8;

  /* --- 文字阶梯（对白底 16.9 / 11.8 / 9.6 : 1，均 AAA） --- */
  --c-ink: #181d26;
  --c-body: #333840;
  --c-muted: #41454d;

  /* --- 品牌强调色 ---
     原站 #ff9900 对白底仅 2.14:1（AA 需 4.5），文字与白字按钮均不达标。
     加深到 #c2410c 后为 5.18:1，通过 AA，且仍在同一橙色族内。
     CTA 底色保持近黑（Airtable 的做法），橙色只负责链接与强调。 */
  --c-accent: #c2410c;
  --c-accent-active: #9a3412;
  --c-accent-soft: #fdf1ea;
  --c-on-accent: #ffffff;

  /* --- 招牌色块（用于分区，替掉原来的 <hr> 与 azure 底） --- */
  --c-sig-cream: #f5e9d4;
  --c-sig-peach: #fcab79;
  --c-sig-mint: #a8d8c4;
  --c-sig-yellow: #f4d35e;
  --c-sig-mustard: #d9a441;
  --c-sig-coral: #aa2d00;
  --c-sig-forest: #0a2e0e;

  /* --- 圆角 --- */
  --r-xs: 2px;
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 12px;
  --r-full: 9999px;

  /* --- 间距（4px 基准） --- */
  --s-xxs: 4px;
  --s-xs: 8px;
  --s-sm: 12px;
  --s-md: 16px;
  --s-lg: 24px;
  --s-xl: 32px;
  --s-xxl: 48px;
  --s-section: 96px;

  /* --- 字体 --- */
  --font-sans: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei",
    "Noto Sans SC", "Source Han Sans SC", "WenQuanYi Micro Hei",
    -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  /* --- 中文排版级差 ---
     Airtable 原级差按西文设计（40px/1.2、14px/1.25）。
     中文需要：行高抬高（汉字占满 em 框）、字号不缩到 14px、
     正文字距归零。这里按中文重标，保留其"字号与色阶制造层级、
     不靠加粗"的原则。 */
  --t-h1: 30px;
  --t-h2: 22px;
  --t-h3: 18px;
  --t-lede: 17px;
  --t-body: 16px;
  --t-small: 14px;
  --t-caption: 13px;
  --t-nav: 15px;

  --lh-tight: 1.35;
  --lh-snug: 1.5;
  --lh-normal: 1.75;
  --lh-relaxed: 1.85;
}

/* ==========================================================================
   2. 作用域基座
   ========================================================================== */

.theme-v2 {
  font-family: var(--font-sans);
  color: var(--c-body);
  background: var(--c-canvas);
  -webkit-font-smoothing: antialiased;
}

/* 原站 appointment_style.css 的 `body a { color: red }` 让全站链接变成
   纯红 #ff0000（对白底 4.00:1，低于 AA 4.5）。这里改回品牌强调色。 */
.theme-v2 a {
  color: var(--c-accent);
  text-decoration: none;
}

.theme-v2 a:hover {
  color: var(--c-accent-active);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* 键盘焦点可见（WCAG 2.4.7）。原站只处理了 a/input，这里补齐。 */
.theme-v2 a:focus-visible,
.theme-v2 summary:focus-visible,
.theme-v2 button:focus-visible {
  outline: 2px solid var(--c-accent);
  outline-offset: 2px;
  border-radius: var(--r-xs);
}

/* --- 接管旧主题的裸元素规则 -------------------------------------------
   style.css 顶部有一组全局元素规则，其中
       p { letter-spacing: 1px; font-size: 1em; line-height: 1.9em; color: #555 }
   会被每一个 <p> **直接命中** —— 直接命中的规则优先于继承，
   所以只在 .prose 上设 color 是压不住的（实测段落仍是 #555）。
   这里在作用域内显式接管字号、行高与颜色。

   字距一并归零：style.css 全文有 55 处 letter-spacing（1/2/4/7px），
   那是西文排版的做法；汉字是等宽方块字，加字距只会让版面松散、
   并破坏"一行多少字"的节奏。这是本次改版在中文排版上的关键一条。 */
.theme-v2 p {
  font-size: var(--t-body);
  line-height: var(--lh-relaxed);
  letter-spacing: 0;
  color: var(--c-body);
}

.theme-v2 h1,
.theme-v2 h2 {
  font-family: var(--font-sans);
  letter-spacing: 0;
  color: var(--c-ink);
}

.theme-v2 a,
.theme-v2 li,
.theme-v2 span,
.theme-v2 strong,
.theme-v2 summary,
.theme-v2 caption,
.theme-v2 figcaption,
.theme-v2 th,
.theme-v2 td {
  letter-spacing: 0;
}

/* 栅格槽宽回到 BS5 默认的 24px（Airtable 的卡片间距即 24px）。
   pages.css 为了对齐旧站把它锁在 BS3 的 30px，仅本主题作用域内放开。 */
.theme-v2 .container,
.theme-v2 .row {
  --bs-gutter-x: 24px;
}

/* ==========================================================================
   3. 页头与导航
   ========================================================================== */

/* 原站页头是 topbg-pg.png 图 + white + 下方 azure 的导航条。
   新版：白底、1px 细线分隔、64px 高 —— 导航不再靠图片撑。 */
.theme-v2 .site-header {
  background: var(--c-canvas);
  border-bottom: 1px solid var(--c-hairline);
}

.theme-v2 .brand-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-md);
  padding: var(--s-sm) 0;
}

.theme-v2 .brand-lockup {
  display: flex;
  align-items: center;
  gap: var(--s-sm);
  min-width: 0;
}

.theme-v2 .brand-lockup img {
  display: block;
  width: auto;
  height: 44px;
}

.theme-v2 .brand-name {
  font-size: 18px;
  font-weight: 500;
  color: var(--c-ink);
}

.theme-v2 .brand-contact {
  margin: 0;
  font-size: var(--t-caption);
  line-height: 1.7;
  color: var(--c-muted);
  white-space: nowrap;
}

/* 电话是本站首要转化入口，触控目标不该只靠 WCAG 2.5.8 的"行内文本例外"
   （行内链接实测仅 89×17，达不到 24×24）。上下各补 6px 内边距把高度做到
   29px，再用同值负外边距抵消，行高与页头高度不受影响。 */
.theme-v2 .brand-contact a {
  display: inline-block;
  padding: 6px 2px;
  margin: -6px -2px;
}

/* 导航条：清掉 topbg 底图与 azure 底，并解除旧兼容层对容器的限宽。
   页头现在整块共用外层同一个 .container，导航不再自带 .container，
   所以 pages.css 的 `.navbar > .container{max-width:none}` 不再命中 ——
   品牌行与导航天然左右对齐。 */
.theme-v2 .site-header .content.white,
.theme-v2 .site-header .navbar {
  background: var(--c-canvas) !important;
  background-image: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0;
}

/* 旧兼容层给折叠容器补的左右 15px 内边距，归零以便与品牌行对齐 */
@media (min-width: 768px) {
  .theme-v2 .site-header .navbar-collapse {
    padding-right: 0;
    padding-left: 0;
  }
}

/* 旧站 word.css 的 `nav ul{padding-top:.5%}`（兼容层按原值补回），
   在固定高度的新导航里只会把菜单顶偏 */
.theme-v2 #bs-example-navbar-collapse-1 nav ul {
  padding-top: 0;
}

/* 菜单靠左，与上方 logo 同一起始线（Airtable 的导航即"菜单居左"）。
   ul 负偏移抵消首个链接自带的 14px 左内边距；li 另有 5px 左边距（菜单项
   之间的间距，保留），所以首项单独归零 —— 最终让**文字**与 logo 对齐，
   而不是让链接盒子对齐。 */
.theme-v2 .navbar-nav {
  float: none;
  width: 100%;
  margin: 0 0 0 -14px;
  justify-content: flex-start;
}

.theme-v2 .navbar-nav > li:first-child {
  margin-left: 0;
}

.theme-v2 #bs-example-navbar-collapse-1 li a {
  border-radius: var(--r-sm);
  transition: color 0.15s ease, background-color 0.15s ease;
}

/* 压掉旧站的黄绿悬停块（pages.css 的 id 级规则） */
.theme-v2 #bs-example-navbar-collapse-1 li a:hover {
  background-color: transparent;
  color: var(--c-accent);
  text-decoration: none;
}

.theme-v2 .navbar-default .navbar-nav > li > a,
.theme-v2 .navbar-nav > li > a {
  display: block;
  font-family: var(--font-sans);
  font-size: var(--t-nav);
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0;
  color: var(--c-ink);
  padding: 10px 14px;
}

.theme-v2 .navbar-default .navbar-nav > li > a:hover,
.theme-v2 .navbar-nav > li > a:hover {
  background: transparent;
  color: var(--c-accent);
}

/* 当前栏目：橙色 + 2px 下划线（替代旧主题的蓝色文字） */
.theme-v2 .navbar-nav > li > a.active {
  color: var(--c-accent);
  box-shadow: inset 0 -2px 0 0 var(--c-accent);
}

/* --------------------------------------------------- 移动端导航按钮 --- */

/* 按钮已移到 .brand-bar（品牌行右上角），不再位于 .navbar 内，
   所以 BS5 的 `.navbar-expand-md .navbar-toggler{display:none}` 不再命中，
   桌面端要自己隐藏。 */
@media (min-width: 768px) {
  .theme-v2 .brand-bar .navbar-toggle {
    display: none;
  }
}

/* 44×44 触控目标。原来靠 padding 撑高度，只有 44×40，不达 44×44。
   改用 flex 居中三条杠，间距交给 gap，不再依赖 .icon-bar 之间的 margin。 */
.theme-v2 .navbar-toggle {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  padding: 0;
  background-color: transparent;
  border: 1px solid var(--c-hairline);
  border-radius: var(--r-sm);
  transition: background-color 0.15s ease, border-color 0.15s ease;
}

.theme-v2 .navbar-toggle:hover,
.theme-v2 .navbar-toggle:focus-visible {
  background-color: var(--c-surface-soft);
  border-color: var(--c-surface-strong);
}

.theme-v2 .navbar-toggle .icon-bar {
  display: block;
  width: 22px;
  height: 2px;
  /* 兼容层给相邻 .icon-bar 加的 4px 上边距，这里交给 flex gap 统一控制 */
  margin-top: 0;
  border-radius: 1px;
  background-color: var(--c-ink);
  transform-origin: center;
  transition: transform 0.2s ease, opacity 0.15s ease;
}

/* 展开态变 X。BS5 在菜单**收起**时给按钮加 .collapsed，展开时移除，
   所以 :not(.collapsed) 就是"已展开"。
   注意三条杠在 DOM 里是第 2/3/4 个 span —— 第 1 个是 .visually-hidden 文本。 */
.theme-v2 .navbar-toggle:not(.collapsed) .icon-bar:nth-of-type(2) {
  transform: translateY(7px) rotate(45deg);
}

.theme-v2 .navbar-toggle:not(.collapsed) .icon-bar:nth-of-type(3) {
  opacity: 0;
}

.theme-v2 .navbar-toggle:not(.collapsed) .icon-bar:nth-of-type(4) {
  transform: translateY(-7px) rotate(-45deg);
}

/* ==========================================================================
   4. 页面 banner
   ========================================================================== */

/* products.html 的 banner 是**按断点分别出图**的三张画幅（图上带字，比例各不相同）：
     ≥1200px  2400×560  （宽幅：标签 + 标题 + 资质行 + 三枚徽章，产品图在右）
     768–1199 1500×500  （平板：标签 + 标题 + 资质行 + 两枚徽章）
     <768      720×640  （手机：标题两行 + 资质行 + 徽章，产品图在下）
   三张图的文字都是按各自画幅的缩放倍率排的（手机 390px 视口 ≈ 0.54×、
   平板 768px ≈ 0.51×、桌面 1440px ≈ 0.6×），因此每个断点下最小字号都 ≥12px，
   不会重演旧站「1500×280 信息图在手机上压成 91px、完全不可读」的问题。
   这里仍然不做任何裁切：一旦用 object-fit:cover 配固定高度，窄屏横向裁掉一半、
   宽屏纵向裁掉三分之一，等于把图上的字切掉。
   aspect-ratio 与各画幅的真实比例一致，用于图片解码前先占位（避免 CLS）。 */
.theme-v2 .page-banner {
  background: var(--c-surface-soft);
  border-bottom: 1px solid var(--c-hairline);
}

.theme-v2 .page-banner picture {
  display: block;
}

.theme-v2 .page-banner img {
  display: block;
  width: 100%;
  height: auto;
}

/* ⚠️ 这三条 aspect-ratio 是给「按断点出三张画幅」（<picture>）的页面占位用的，
   比例必须与 tools/banner/ 实际出的三张图一致（720/640、1500/500、2400/560）。

   选择器写成 `.page-banner picture img` 而不是 `.page-banner img` 是**必须的**：
   没有 <picture> 的页面用的是单张旧 banner（如首页 pic03-pg.jpg 是 4.11:1），
   若被套上 1.125:1，390px 视口下会变成 422px 高的巨型色块（实测 640px 视口
   下量到 555px 高，是自然高度的 3 倍）。 */
@media (max-width: 767px) {
  .theme-v2 .page-banner picture img {
    aspect-ratio: 720 / 640;
  }
}

@media (min-width: 768px) and (max-width: 1199px) {
  .theme-v2 .page-banner picture img {
    aspect-ratio: 1500 / 500;
  }
}

@media (min-width: 1200px) {
  .theme-v2 .page-banner picture img {
    aspect-ratio: 2400 / 560;
  }
}

/* ==========================================================================
   5. 页面标题 + 面包屑（原 .curr）
   ========================================================================== */

.theme-v2 .page-main {
  padding: var(--s-xxl) 0 var(--s-xxl);
}

/* 原站：红色标题 + 红色竖条贴图 + 3px #ccc 下边框 + 浮动面包屑。
   新版：面包屑在上（muted 小字），标题在下（ink），1px 细线收尾。 */
.theme-v2 .curr {
  border-bottom: 1px solid var(--c-hairline);
  padding-bottom: var(--s-md);
  margin: 0 0 var(--s-xl);
  overflow: visible;
}

.theme-v2 .curr .crumb {
  display: block;
  float: none;
  margin: 0 0 var(--s-xs);
  padding: 0;
  font-size: var(--t-caption);
  line-height: 1.7;
  color: var(--c-muted);
}

.theme-v2 .curr .crumb a {
  color: var(--c-muted);
}

.theme-v2 .curr .crumb a:hover {
  color: var(--c-accent);
}

.theme-v2 .curr h1 {
  float: none;
  margin: 0;
  padding: 0;
  background: none;
  font-family: var(--font-sans);
  font-size: var(--t-h1);
  font-weight: 500;
  line-height: var(--lh-tight);
  color: var(--c-ink);
  letter-spacing: 0;
}

/* ==========================================================================
   6. 正文
   ========================================================================== */

.theme-v2 .prose {
  font-size: var(--t-body);
  line-height: var(--lh-relaxed);
  color: var(--c-body);
}

/* 中文正文：2 字首行缩进 + 两端对齐。
   缩进是中文长文的排版惯例，也是旧站作者的原意（见 pages.css 注释）；
   两端对齐让右边缘齐平 —— 汉字等宽，这个属性在中文里比在西文里更干净，
   不会出现西文那种被拉开的词间距。

   选择器同时覆盖旧站的正文容器类（.mright / .aboutcon3 / .nycont /
   .news-article），这样将来给其他页面加 .theme-v2 时正文规则无需再改。

   overflow-wrap 是两端对齐的安全网：遇到比整行还长的不可断字符串
   （长医保编码、邮箱等）时允许断开，否则两端对齐会把它顶出容器。 */
.theme-v2 .prose p,
.theme-v2 .mright p,
.theme-v2 .aboutcon3 p,
.theme-v2 .news-article p {
  margin: 0 0 var(--s-md);
  text-indent: 2em;
  text-align: justify;
  overflow-wrap: break-word;
}

/* 例外：不是正文的行不参与缩进。
   图片行/图注行（旧站用内联 text-align 标记，且内联声明本就压过这里的
   justify）、新闻元信息行 —— 这些居中或居左的短行加 2 字缩进只会错位。 */
.theme-v2 .news-article .article-meta {
  text-indent: 0;
}

/* 新闻元信息行（「来源：…」「日期：…」）。
   pages.css:327 给了 color:#999 —— 对白底只有 2.85:1，低于 AA 的 4.5。
   上面那条只排除了缩进、没接管颜色，旧值就漏了进来，必须显式接管。 */
.theme-v2 .news-article .article-meta {
  font-size: var(--t-caption);
  line-height: 1.7;
  color: var(--c-muted);
}

/* 新闻详情页标题。pages.css:319 用的是旧站红 #c42c2c + 700 字重 + 居中。
   对比度 5.61:1 虽达标，但与新主题「单一强调色 #c2410c + 标题用 ink」不一致；
   而且中文 700 在微软雅黑下会触发合成加粗，观感比 500 差（雅黑无 Bold 字重）。 */

/* 导语：字号略大、颜色压到 ink，形成入口。
   缩进与两端对齐由上面的正文规则统一给出，这里不再单独排除。 */
.theme-v2 .prose p.lede {
  font-size: var(--t-lede);
  line-height: var(--lh-normal);
  color: var(--c-ink);
  margin-bottom: var(--s-lg);
}

.theme-v2 .prose strong {
  font-weight: 500;
  color: var(--c-ink);
}

/* 区块小标题：原站是 <p style="color:#c42c2c;font-size:2.6vh">。
   现在是真正的 <h2>，层级进文档大纲，样式用左侧 3px 橙条 ——
   延续旧站"红色竖条"的设计意图，但换成语义化标记与现代色值。 */
.theme-v2 .prose h2.section-title {
  font-size: var(--t-h2);
  font-weight: 500;
  line-height: var(--lh-tight);
  color: var(--c-ink);
  letter-spacing: 0;
  margin: var(--s-xxl) 0 var(--s-md);
  padding-left: var(--s-sm);
  border-left: 3px solid var(--c-accent);
}

.theme-v2 .prose h2.section-title:first-child {
  margin-top: 0;
}

/* 列表：原站用「第一、第二、第三」当独立段落，或用「·　」当假项目符号 */
.theme-v2 .prose ul {
  margin: 0 0 var(--s-md);
  padding-left: 1.5em;
}

.theme-v2 .prose li {
  margin-bottom: var(--s-xs);
  line-height: var(--lh-normal);
}

.theme-v2 .prose ul > li {
  list-style: none;
  position: relative;
}

.theme-v2 .prose ul > li::before {
  content: "";
  position: absolute;
  left: -1em;
  top: 0.72em;
  width: 5px;
  height: 5px;
  border-radius: var(--r-full);
  background: var(--c-accent);
}

/* 要点列表（四大发明创新点） */
.theme-v2 .prose ul.point-list {
  padding-left: 0;
  margin: 0 0 var(--s-lg);
  border-top: 1px solid var(--c-hairline);
}

.theme-v2 .prose ul.point-list > li {
  list-style: none;
  padding: var(--s-md) 0;
  margin: 0;
  border-bottom: 1px solid var(--c-hairline);
}

.theme-v2 .prose ul.point-list > li::before {
  display: none;
}

.theme-v2 .prose ul.point-list > li > strong {
  display: block;
  font-size: var(--t-h3);
  font-weight: 500;
  line-height: var(--lh-snug);
  color: var(--c-ink);
  margin-bottom: var(--s-xs);
}

.theme-v2 .prose ul.point-list > li > p {
  margin: 0;
  font-size: var(--t-small);
  color: var(--c-body);
}

/* ------------------------------------------------------- 要点提示块 --- */
/* 「产品临床优势」下那三条并列卖点夹在正文里读不出来，需要抬高一层。
   Airtable 的 cream-callout-card 正是为这类内容准备的 ——
   比正文重要、又不是标题（signature-cream 底 + 10px 圆角 + 24px 内距），
   它明确"比深色/珊瑚色招牌卡柔和，但仍是刻意的品牌表面"。
   这里再补一条左侧橙色竖条，与区块标题 h2.section-title 共用同一套语言。

   块内仍是正文段落：2 字首行缩进与两端对齐由上面的正文规则统一给出，
   这里不重复声明，避免以后两处规则打架。 */
.theme-v2 .prose .key-points {
  background: var(--c-sig-cream);
  border-left: 3px solid var(--c-accent);
  border-radius: var(--r-md);
  padding: var(--s-lg);
  margin: var(--s-lg) 0;
}

.theme-v2 .prose .key-points p {
  margin: 0 0 var(--s-sm);
}

.theme-v2 .prose .key-points p:last-child {
  margin-bottom: 0;
}

/* 序号用强调色并压到 500 —— 三条并列时便于横向扫读。

   这里用的是深一档的 --c-accent-active 而不是 --c-accent：
   品牌橙 #c2410c 对白底是 5.18:1（达标），但放到奶油底 #f5e9d4 上
   只剩 4.32:1，低于 AA 的 4.5（16px 不算大字号）。
   #9a3412 在奶油底上是 6.10:1，通过 AA。
   规则：浅色底上用的强调色文字一律取深一档。 */
.theme-v2 .prose .key-points strong {
  color: var(--c-accent-active);
  font-weight: 500;
}

/* ==========================================================================
   7. 图片与图注
   ========================================================================== */

.theme-v2 .doc-figure {
  margin: var(--s-lg) 0;
  text-align: center;
}

.theme-v2 .doc-figure img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--c-hairline);
  border-radius: var(--r-md);
  background: var(--c-canvas);
}

.theme-v2 .doc-figure figcaption {
  margin-top: var(--s-xs);
  font-size: var(--t-caption);
  line-height: 1.7;
  color: var(--c-muted);
  text-indent: 0;
}

/* 图内的视频：theme.css 与 BS5 都没有任何 video 尺寸规则，
   清掉内联的 width:100% 后会回落到默认的 300×150。 */
.theme-v2 .doc-figure video {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--c-hairline);
  border-radius: var(--r-md);
  background: #000;
  /* 这里是 <video> 的**回退文案**（仅在浏览器不支持 video 时才显示）。
     它落在上面那层黑底上，默认字色 #333840 对黑只有 1.78:1。
     一般用户看不到，但对比度审计会如实报失败，所以显式给色。 */
  color: #ffffff;
}

.theme-v2 .doc-figure video a {
  color: var(--c-sig-peach); /* 对黑 11.2:1；强调色 #c2410c 对黑只有 2.87:1 */
}

/* 「按原始尺寸居中」的图：二维码之类的小图（contact.html 的 erweima-pg.jpg
   是 344×344，旧站靠内联 max-width:260px 限制）。若套普通 .doc-figure，
   它的 img{width:100%} 会把小图拉伸到栏宽而发虚。 */
.theme-v2 .doc-figure--natural img {
  width: auto;
  max-width: 100%;
  margin-right: auto;
  margin-left: auto;
}

/* 前后对比行（anli / changshi / renli 的治疗前后照片）。
   旧站靠内联 width:43%/10%/43% 等让「照片 + 箭头 + 照片」同排；
   内联清零后按原始尺寸排会达到 931px，而列宽只有约 592px —— 必然换行，
   箭头与两张照片的中线也就对不上了。

   这里用 flex 显式成行：照片等分剩余宽度（flex:1 1 0 + min-width:0），
   箭头保持原始尺寸（flex:0 0 auto），align-items:center 让三者中线重合。
   flex-wrap 保持 nowrap —— 换行就失去"对比"的意义了。
   两图（无箭头）与三图两种结构都能用同一套规则。 */
.theme-v2 .compare-row {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  gap: var(--s-md);
  margin: var(--s-lg) 0;
}

.theme-v2 .compare-row img {
  flex: 1 1 0;
  min-width: 0;
  width: auto;
  max-width: 100%;
  height: auto;
  border: 1px solid var(--c-hairline);
  border-radius: var(--r-md);
}

/* ⚠️ 必须是直接子选择器 `>`。
   anli.html 第 6 条对比行的结构是「照片 / 中间列(文字+箭头) / 照片」，
   箭头是**中间列的子元素**而不是 .compare-row 的直接子元素。若写成后代选择器，
   这里的 max-width:12% 会按那个 105px 宽的中间列解析 → 箭头缩成 13×4px（实测五档
   全是 13×4，等于看不见）。收窄成直接子选择器后，嵌套那枚回落到
   `.compare-row img{max-width:100%}` 的自然尺寸（72×25），不受影响。 */
/* 中间列（`anli.html` L138 那一行的结构是「照片 / 标签+箭头 / 照片」）。
   直接把整列 align-items:center 居中会出问题：列内「治疗7天后」(30px)
   压在箭头(27px)上方，整列虽然居中了（实测 mid 277 = 照片 mid 277），
   但**箭头本身**被标签顶到中心线以下 23px（实测，照片高 314px），
   于是箭头与左右两张照片的中线对不上 —— 而这一行的全部意义就是让箭头
   指向"治疗后"那张图。

   做法：把标签移出居中流（绝对定位到箭头正上方），这一列的在流高度就
   只剩箭头，箭头中线自然与照片重合。 */
.theme-v2 .compare-row > div {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.theme-v2 .compare-row > div > p {
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  margin: 0 0 var(--s-xxs);
  white-space: nowrap;
  font-size: var(--t-caption);
  line-height: 1.5;
  color: var(--c-muted);
  text-indent: 0;
  text-align: center;
}

.theme-v2 .compare-row > img[src*="jiantou"] {
  /* 窄屏时让箭头跟着缩。原来写 flex:0 0 auto 会把它钉死在原始 72px，
     320px 视口下左右照片只剩 64px，箭头反而比照片还宽（实测）。
     改成可收缩 + 12% 上限：桌面端仍是原始尺寸，窄屏自动让位给照片。 */
  flex: 0 1 auto;
  max-width: 12%;
  border: 0;
  border-radius: 0;
}

/* ==========================================================================
   8. 规格表（Airtable 的 pricing-comparison-row 几何：
      12px 行内距 + hairline 分隔，无竖线）
   ========================================================================== */

.theme-v2 .spec-table {
  width: 100%;
  border-collapse: collapse;
  margin: var(--s-lg) 0;
  font-size: var(--t-small);
  font-variant-numeric: tabular-nums;
}

.theme-v2 .spec-table caption {
  caption-side: top;
  text-align: left;
  font-size: var(--t-caption);
  color: var(--c-muted);
  padding-bottom: var(--s-xs);
}

.theme-v2 .spec-table th,
.theme-v2 .spec-table td {
  border: 0;
  border-bottom: 1px solid var(--c-hairline);
  padding: var(--s-sm) var(--s-md);
  text-align: left;
  vertical-align: top;
  line-height: var(--lh-normal);
}

.theme-v2 .spec-table thead th {
  background: var(--c-surface-soft);
  color: var(--c-ink);
  font-size: var(--t-caption);
  font-weight: 500;
  border-bottom: 1px solid var(--c-surface-strong);
  white-space: nowrap;
}

/* tbody 里的行头（科室名）：作为"标签列"处理，弱化但可辨 */
.theme-v2 .spec-table tbody th {
  width: 8em;
  color: var(--c-muted);
  font-weight: 500;
  white-space: nowrap;
}

.theme-v2 .spec-table td {
  color: var(--c-body);
}

.theme-v2 .spec-table tbody tr:last-child th,
.theme-v2 .spec-table tbody tr:last-child td {
  border-bottom: 1px solid var(--c-hairline);
}

/* ==========================================================================
   9. FAQ（<details>；site.js 依赖 .faq-item 与 #faq-N 两个契约，勿改名）
   ========================================================================== */

.theme-v2 .faq-item {
  border: 1px solid var(--c-hairline);
  border-radius: var(--r-md);
  background: var(--c-canvas);
  margin-bottom: var(--s-xs);
  overflow: hidden;
}

.theme-v2 .faq-item > summary {
  display: flex;
  align-items: center;
  gap: var(--s-sm);
  cursor: pointer;
  padding: var(--s-md) var(--s-lg);
  font-size: var(--t-h3);
  font-weight: 500;
  line-height: var(--lh-snug);
  color: var(--c-ink);
  outline: none;
  list-style: none;
}

.theme-v2 .faq-item > summary::-webkit-details-marker {
  display: none;
}

/* 自绘箭头，默认「+」，展开变「−」 */
.theme-v2 .faq-item > summary::before {
  content: "+";
  flex: 0 0 auto;
  width: 20px;
  font-size: 18px;
  font-weight: 400;
  line-height: 1;
  color: var(--c-accent);
  text-align: center;
}

.theme-v2 .faq-item[open] > summary::before {
  content: "−";
}

.theme-v2 .faq-item > summary:hover {
  color: var(--c-accent);
}

.theme-v2 .faq-item[open] > summary {
  border-bottom: 1px solid var(--c-hairline);
}

.theme-v2 .faq-item .faq-answer {
  padding: var(--s-md) var(--s-lg) var(--s-lg);
  background: var(--c-surface-soft);
}

.theme-v2 .faq-item .faq-answer p {
  margin: 0 0 var(--s-sm);
  font-size: var(--t-small);
  line-height: var(--lh-relaxed);
  color: var(--c-body);
}

.theme-v2 .faq-item .faq-answer p:last-child {
  margin-bottom: 0;
}

/* ==========================================================================
   10. 资料下载列表
   ========================================================================== */

.theme-v2 .file-list {
  list-style: none;
  padding: 0;
  margin: var(--s-lg) 0;
  border-top: 1px solid var(--c-hairline);
}

.theme-v2 .file-list li {
  border-bottom: 1px solid var(--c-hairline);
  margin: 0;
}

.theme-v2 .file-list a {
  display: flex;
  align-items: center;
  gap: var(--s-sm);
  padding: var(--s-sm) 0;
  font-size: var(--t-small);
  line-height: var(--lh-normal);
  color: var(--c-accent);
}

.theme-v2 .file-list a::before {
  content: "PDF";
  flex: 0 0 auto;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--c-muted);
  border: 1px solid var(--c-hairline);
  border-radius: var(--r-xs);
  padding: 2px 5px;
}

.theme-v2 .file-list a:hover {
  text-decoration: none;
  background: var(--c-accent-soft);
}

/* ==========================================================================
   11. 资料图廊
   ========================================================================== */

.theme-v2 .deck-gallery {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--s-sm);
  margin: var(--s-lg) 0 0;
  padding: 0;
}

.theme-v2 .deck-gallery a {
  display: block;
  padding: 0;
  float: none;
  width: auto;
  border: 1px solid var(--c-hairline);
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--c-canvas);
  transition: border-color 0.15s ease;
}

.theme-v2 .deck-gallery a:hover {
  border-color: var(--c-accent);
}

.theme-v2 .deck-gallery img {
  display: block;
  width: 100%;
  height: auto;
  border: 0;
  border-radius: 0;
}

/* ==========================================================================
   12. 左栏导轨（原 col-md-3 的三张裸图）

   旧站左栏是三张裸图：446×206 的栏目图（栏目名与英文名烘在图上、深红渐变）
   + 两张 224×97 的广告图。四个问题：① 红底信息图与新的橙 / 近黑体系相冲，
   而且栏目名与右侧 .curr 的 h1 重复；② 广告图被拉到栏宽放大，字是糊的；
   ③ 视觉信息全在图片里，无链接语义 —— 唯一的真链接只是一张「联系我们」的图，
   读屏软件念不出栏目名；④ 768–991px 时 col-md-3 只有 126–150px 宽，
   三张图并排后各剩 31×15px（900px 视口实测），等于没有侧栏。

   这里换成三块 CSS 卡片 —— 白底 + 1px 细线 + 10px 圆角，与 .media-card /
   .product-card 同一套几何：
     · .rail-head  栏目卡（当前页所属栏目名，新闻列表页与详情页都写「新闻中心」）
     · .rail-cta   招商咨询（近黑 CTA，电话号码是实链接）
     · .rail-qr    扫码关注（复用 contact.html 那张二维码）
   ⚠️ 侧栏不放栏目导航 / 本页目录列表（用户明确要求），所以 .rail-head 只承担
      「我在哪个栏目」这一件事，栏目之间的跳转仍然只由顶部导航负责。
   ========================================================================== */

.theme-v2 .rail {
  display: flex;
  flex-direction: column;
  gap: var(--s-md);
}

/* 卡片基座 */
.theme-v2 .rail-qr {
  margin: 0;
  padding: var(--s-md);
  background: var(--c-canvas);
  border: 1px solid var(--c-hairline);
  border-radius: var(--r-md);
}

/* 栏目卡：当前页所在的栏目名（新闻列表页与 6 个详情页都写「新闻中心」）。
   红底白字 —— 用户指定的观感，也是旧站那张栏目图（深红底 + 白色栏目名）的延续。
   红取旧站内页小标题红 #c42c2c：白字对它 5.61:1，过 AA（18px/500 不算大字号，
   按 4.5 判）；它同时是 pages.css 里既有的色值，不是新造的颜色。
   这里**不用** 3px 橙条：橙条压在红底上既不显眼也不协调，红块本身就是「栏目封面」。 */
.theme-v2 .rail-head {
  padding: var(--s-md) var(--s-lg);
  background: #c42c2c;
  border-radius: var(--r-md);
}

.theme-v2 .rail-head__title {
  margin: 0;
  font-size: var(--t-h3);
  font-weight: 500;
  line-height: var(--lh-tight);
  color: #ffffff; /* 对 #c42c2c 为 5.61:1 */
  text-indent: 0;
}

/* --- 招商咨询（近黑 CTA，Airtable 的主 CTA 就是近黑） --- */

.theme-v2 .rail-cta {
  padding: var(--s-md) var(--s-lg);
  background: var(--c-surface-dark);
  border-radius: var(--r-md);
}

.theme-v2 .rail-cta__label {
  margin: 0 0 var(--s-xxs);
  font-size: var(--t-caption);
  line-height: var(--lh-normal);
  color: #c6c6c6; /* 对 #181d26 为 9.7:1 */
  text-indent: 0;
}

.theme-v2 .rail-cta__phone {
  margin: 0 0 var(--s-xs);
  font-size: var(--t-h3);
  font-weight: 500;
  line-height: 1.4;
  font-variant-numeric: tabular-nums;
  text-indent: 0;
  overflow-wrap: anywhere;
}

.theme-v2 .rail-cta__phone a {
  color: #ffffff;
}

/* 深色底上的悬停用招牌桃色：#9a3412 对 #181d26 只有 2.31:1，
   #fcab79 是 8.87:1（与 .service-card--cta 同一条理由） */
.theme-v2 .rail-cta__phone a:hover {
  color: var(--c-sig-peach);
}

.theme-v2 .rail-cta__note {
  margin: 0;
  font-size: var(--t-caption);
  line-height: var(--lh-normal);
  color: #c6c6c6;
  text-indent: 0;
  overflow-wrap: anywhere;
}

/* --- 二维码 --- */

.theme-v2 .rail-qr {
  text-align: center;
}

/* aspect-ratio 让图还没解码时就占住位置：否则 height:auto 先算成 0，
   整张卡片塌成一行文字（实测 900px 视口下只有 57.7px 高） */
.theme-v2 .rail-qr img {
  display: block;
  width: 100%;
  max-width: 120px;
  height: auto;
  aspect-ratio: 1 / 1;
  margin: 0 auto var(--s-xs);
  border-radius: var(--r-sm);
}

/* 用 div + p 而不是 figure/figcaption：新闻详情页有「figure 里只放 img、
   图注由 alt 承担」的既定口径，侧栏这张卡又是 15 页共用的模板，
   统一成普通元素就不必为 6 个新闻页破例 */
.theme-v2 .rail-qr__label {
  margin: 0;
  font-size: var(--t-caption);
  line-height: 1.7;
  color: var(--c-muted);
  text-indent: 0;
}

/* ≥992px 吸顶：长正文滚动时三张卡片不跟丢。
   max-height + overflow 是兜底：导轨高于视口时可自行滚动，
   不会把最后一张卡片顶到屏幕外。 */
@media (min-width: 992px) {
  .theme-v2 .rail {
    position: sticky;
    top: var(--s-lg);
    max-height: calc(100vh - var(--s-lg) * 2);
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
  }
}

/* 768–991px：col-md-3 只有 126–150px 宽（约 991px 时 150px、900px 时 126px），
   卡片内距收到 12px，电话降到 14px —— 16px 的「021-34241127」在 102px 行宽里放不下 */
@media (min-width: 768px) and (max-width: 991.98px) {
  .theme-v2 .rail-head,
  .theme-v2 .rail-qr {
    padding: var(--s-sm);
  }

  .theme-v2 .rail-head__title {
    font-size: var(--t-body);
  }

  .theme-v2 .rail-cta {
    padding: var(--s-sm) var(--s-md);
  }

  .theme-v2 .rail-cta__phone {
    font-size: var(--t-small);
  }
}

/* ≤991px：不吸顶（栏窄且已转为上下堆叠，吸顶只会挡住正文） */
@media (max-width: 991.98px) {
  .theme-v2 .rail {
    margin-bottom: var(--s-lg);
  }
}

/* <768px：左栏转为整行宽。三块卡片保持单列 —— 试过两列网格，390 视口下
   每格只有 151px，「021-34241127」被断成「021-」/「34241127」两行（截图确认）。
   二维码卡改成横排：码在左、题注在右，整宽下才不显得空。 */
@media (max-width: 767.98px) {
  .theme-v2 .rail-qr {
    display: flex;
    align-items: center;
    gap: var(--s-md);
    text-align: left;
  }

  .theme-v2 .rail-qr img {
    flex: none;
    width: 96px;
    margin: 0;
  }

  .theme-v2 .rail-qr__label {
    font-size: var(--t-small);
  }
}

/* ==========================================================================
   13. 页脚
   ========================================================================== */

.theme-v2 .site-footer {
  background: var(--c-surface-dark);
  color: #c6c6c6;
  padding: var(--s-xxl) 0;
  margin-top: var(--s-xxl);
}

.theme-v2 .footer-grid {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-lg) var(--s-xxl);
  justify-content: space-between;
}

.theme-v2 .site-footer p {
  margin: 0 0 var(--s-xxs);
  font-size: var(--t-caption);
  line-height: 1.8;
  color: #c6c6c6;
  text-indent: 0;
}

/* 页脚链接（备案号）。深底上不能用主题强调色：--c-accent #c2410c 对
   --c-surface-dark #181d26 只有 3.26:1，悬停用的 --c-accent-active #9a3412 更低，
   只有 2.31:1，两者都不达 AA 的 4.5。改用招牌色板里的 peach（9.05:1），
   悬停转白（16.9:1）。下划线不能省：这一行里链接与相邻灰字 #c6c6c6（9.89:1）
   明度几乎一样，只靠颜色区分满足不了 WCAG 1.4.1。 */
.theme-v2 .site-footer a {
  color: var(--c-sig-peach);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.theme-v2 .site-footer a:hover,
.theme-v2 .site-footer a:focus-visible {
  color: #ffffff;
}

.theme-v2 .site-footer .footer-brand strong {
  display: block;
  font-size: var(--t-small);
  font-weight: 500;
  color: #ffffff;
  margin-bottom: var(--s-xs);
}

.theme-v2 .site-footer .footer-meta {
  text-align: left;
}

@media (min-width: 768px) {
  .theme-v2 .site-footer .footer-meta {
    text-align: right;
  }
}

/* ==========================================================================
   14. 响应式
   ========================================================================== */

/* 768–991px：视口窄而导航已转横排，8 个栏目宽度吃紧。
   旧主题在这一档把导航字号降到 14px，主题层沿用这个做法，并把链接左右内边距
   从 14px 收到 12px —— 否则 768px 下八项加间距共需 698px，而 ul 只有 696px，
   差 2px，最后一个栏目会被挤到第二行。 */
@media (min-width: 768px) and (max-width: 991.98px) {

  .theme-v2 .navbar-default .navbar-nav > li > a,
  .theme-v2 .navbar-nav > li > a {
    font-size: 14px;
    padding: 10px 12px;
  }
}

@media (max-width: 767.98px) {
  .theme-v2 {
    --t-h1: 24px;
    --t-h2: 20px;
    --t-body: 16px;
  }

  .theme-v2 .page-main {
    padding: var(--s-lg) 0 var(--s-xl);
  }

  /* 品牌行在窄屏折成两行：上行 logo + 公司名 + 导航按钮，下行招商电话。
     公司名 16px 以内才不会折成两行（原名 12 字，18px 时在 390 视口必折）。
     按钮排在这一行右侧 —— 原来它独占一整行且右侧留大片空白，
     既浪费约 50px 高度，也不符合"菜单键在右上角"的普遍预期。 */
  .theme-v2 .brand-bar {
    flex-wrap: wrap;
    gap: var(--s-xs) var(--s-md);
  }

  .theme-v2 .brand-lockup {
    /* 基准宽度设 0 而不是 auto：设成 auto 时，品牌行的换行判定会先按
       "logo + 12 字公司名" 的 max-content ≈ 280px 来排，加按钮 44 + 间距 16
       = 340px，于是 ≤360px 视口时按钮会被挤到自己一行（页头从 99px 涨到 143px）。
       基准设 0 后按钮始终留在第一行，公司名在剩余宽度里自然折行。 */
    flex: 1 1 0%;
  }

  .theme-v2 .brand-lockup img {
    height: 36px;
  }

  .theme-v2 .brand-name {
    font-size: 16px;
  }

  .theme-v2 .brand-contact {
    flex: 1 1 100%;
  }

  /* 旧主题沿用了 BS3 的 `.navbar{min-height:50px}`。菜单收起时导航行里
     没有可见内容，这条 min-height 就变成一条 50px 的空白带。
     移动端归零，让导航行只在菜单展开时才占高度。 */
  .theme-v2 .navbar {
    min-height: 0;
  }

  /* 展开的菜单：细线分隔 + 48px 行高。
     原来是 41px 行高、项间无分隔，8 个栏目糊成一片。

     顶部这条线用 inset 阴影而不是 border-top：style.css 的移动端媒体查询里有
     `.navbar-default .navbar-collapse{border:none!important}`（同一段还重复了两遍），
     `!important` 会压掉任何普通声明的 border —— 与其跟着写 `!important`，
     不如换一个它管不到的属性。 */
  .theme-v2 .navbar-collapse {
    box-shadow: inset 0 1px 0 0 var(--c-hairline);
    padding-top: var(--s-xxs);
    padding-bottom: var(--s-xxs);
  }

  .theme-v2 .navbar-nav {
    margin: 0;
    padding: 0;
  }

  .theme-v2 .navbar-nav > li {
    margin: 0;
    border-bottom: 1px solid var(--c-hairline);
  }

  .theme-v2 .navbar-nav > li:last-child {
    border-bottom: 0;
  }

  .theme-v2 .navbar-default .navbar-nav > li > a,
  .theme-v2 .navbar-nav > li > a {
    display: flex;
    align-items: center;
    min-height: 48px;
    padding: 12px var(--s-sm);
  }

  /* 竖排菜单里"下划线"不好辨认，当前栏目改用左侧橙条 + 浅橙底 */
  .theme-v2 .navbar-nav > li > a.active {
    box-shadow: inset 3px 0 0 0 var(--c-accent);
    background-color: var(--c-accent-soft);
  }

  .theme-v2 .deck-gallery {
    grid-template-columns: repeat(2, 1fr);
  }

  .theme-v2 .faq-item > summary {
    padding: var(--s-sm) var(--s-md);
  }

  .theme-v2 .faq-item .faq-answer {
    padding: var(--s-sm) var(--s-md) var(--s-md);
  }

  .theme-v2 .spec-table th,
  .theme-v2 .spec-table td {
    padding: 10px var(--s-sm);
  }

  .theme-v2 .spec-table tbody th {
    width: 5em;
  }
}

/* ==========================================================================
   16. 首页区块（仅 index.html 使用）

   首页不是内页骨架，而是多区块长页。旧站用 <hr> + azure 底色交替来「分层」，
   并靠 80 处内联样式定位；这里改成「留白 + 交替表面」的区块系统。

   卡片栅格一律用 CSS grid，不用 BS5 的 col-* —— 既避开「列必须直接放在
   .row 里」的陷阱（见 AGENTS.md），也让栅格比例一眼可读。
   ========================================================================== */

/* --- 区块与节奏 --- */

.theme-v2 .home-section {
  padding: var(--s-xxl) 0;
}

/* 交替表面：与相邻的白色区块拉开层次，代替原来的 <hr> */
.theme-v2 .home-section--soft {
  background: var(--c-surface-soft);
  border-top: 1px solid var(--c-hairline);
  border-bottom: 1px solid var(--c-hairline);
}

/* --- 区块标题（保留旧站的「中文主题 + 英文小字」结构） --- */

.theme-v2 .section-head {
  margin: 0 0 var(--s-lg);
  padding-left: var(--s-sm);
  border-left: 3px solid var(--c-accent);
  font-size: var(--t-h2);
  font-weight: 500;
  line-height: var(--lh-tight);
  letter-spacing: 0;
  color: var(--c-ink);
}

.theme-v2 .section-head .en {
  display: block;
  margin-top: 2px;
  font-size: var(--t-caption);
  font-weight: 400;
  letter-spacing: 0.08em; /* 西文全大写小字，加一点字距才不挤（汉字不用） */
  color: var(--c-muted);
}

/* --- 公司简介两栏 --- */

.theme-v2 .home-intro-grid {
  display: grid;
  gap: var(--s-xl);
}

/* ≥992px 用 5:7：左栏内容多（标题/更多/照片/正文/视频），
   收窄它、把宽度让给右栏的证书拼图 —— 沿用 pages.css 里既有的意图 */
@media (min-width: 992px) {
  .theme-v2 .home-intro-grid {
    grid-template-columns: 5fr 7fr;
  }
}

/* 「更多」文字按钮。
   旧站用的是一张 37×12px 的 more-pg.jpg 图片按钮（本主题里按 20px 高显示），
   现改为文字按钮：白底 + 1px 边框 + 近黑文字，取 Airtable 的次级按钮几何
   （它的主 CTA 才是近黑实底，这里不必那么重）。
   边框用强调色而不是 hairline：1px 细线是控件边界，按 WCAG 1.4.11 要对邻近底色
   达到 3:1，而 --c-hairline #dddddd 对白底只有 1.36:1；#c2410c 是 5.18:1。
   高度 14×1.5 + 4×2 + 1×2 = 31px，满足 WCAG 2.2 的 24×24 触控目标。 */
.theme-v2 .more-link {
  display: inline-flex;
  align-items: center;
  gap: var(--s-xxs);
  margin-bottom: var(--s-md);
  padding: 4px var(--s-sm);
  border: 1px solid var(--c-accent);
  border-radius: var(--r-sm);
  background: var(--c-canvas);
  font-size: var(--t-small);
  font-weight: 500;
  line-height: var(--lh-snug);
  color: var(--c-ink);
  transition: border-color 0.15s ease, background-color 0.15s ease, color 0.15s ease;
}

.theme-v2 .more-link__arrow {
  color: var(--c-accent);
  transition: color 0.15s ease;
}

/* 悬停：浅橙底上的文字要换深一档强调色
   （#9a3412 对 #fdf1ea 实测 6.59:1，直接用 --c-accent 只有 4.67:1，达标但没余量）。 */
.theme-v2 .more-link:hover {
  border-color: var(--c-accent-active);
  background: var(--c-accent-soft);
  color: var(--c-accent-active);
  text-decoration: none;
}

.theme-v2 .more-link:hover .more-link__arrow {
  color: var(--c-accent-active);
}

/* 基座的 :focus-visible 规则会把圆角改写成 2px（--r-xs），按钮要留住自己的 6px */
.theme-v2 .more-link:focus-visible {
  border-radius: var(--r-sm);
}

/* --- 卡片栅格 --- */

.theme-v2 .card-grid {
  display: grid;
  gap: var(--s-lg);
  grid-template-columns: 1fr;
}

@media (min-width: 576px) {
  .theme-v2 .card-grid--2 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 768px) {

  .theme-v2 .card-grid--4 {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* --- 产品卡 --- */

.theme-v2 .product-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: var(--s-md);
  background: var(--c-canvas);
  border: 1px solid var(--c-hairline);
  border-radius: var(--r-md);
  text-align: center;
  transition: border-color 0.15s ease;
}

.theme-v2 .product-card:hover {
  border-color: var(--c-accent);
  text-decoration: none;
}

/* 四张产品图比例不一（0.97 / 1.00 / 1.00 / 1.38），
   统一 contain 到同一高度，卡片才不会高低不齐 */
.theme-v2 .product-card img {
  display: block;
  width: 100%;
  height: 180px;
  object-fit: contain;
  margin-bottom: var(--s-sm);
}

.theme-v2 .product-card__title {
  margin: 0;
  font-size: var(--t-small);
  line-height: var(--lh-normal);
  color: var(--c-body);
  text-indent: 0;
}

/* --- 媒体报道卡（左图右文） --- */

.theme-v2 .media-card {
  display: grid;
  /* 缩略图源文件只有 145×110，按 1:1 显示，不放大 */
  grid-template-columns: 145px 1fr;
  gap: var(--s-md);
  align-items: center;
  height: 100%;
  padding: var(--s-md);
  background: var(--c-canvas);
  border: 1px solid var(--c-hairline);
  border-radius: var(--r-md);
}

.theme-v2 .media-card img {
  display: block;
  width: 145px;
  height: 110px;
  object-fit: cover;
  border-radius: var(--r-sm);
}

.theme-v2 .media-card a {
  font-size: var(--t-small);
  line-height: var(--lh-normal);
  color: var(--c-body);
}

.theme-v2 .media-card a:hover {
  color: var(--c-accent);
}

@media (max-width: 575.98px) {
  .theme-v2 .media-card {
    grid-template-columns: 100px 1fr;
  }

  .theme-v2 .media-card img {
    width: 100px;
    height: 76px;
  }
}

/* --- 新闻列表 --- */

.theme-v2 .news-list {
  list-style: none;
  margin: 0 0 var(--s-md);
  padding: 0;
  border-top: 1px solid var(--c-hairline);
}

.theme-v2 .news-list > li {
  margin: 0;
  border-bottom: 1px solid var(--c-hairline);
}

.theme-v2 .news-list a {
  display: block;
  padding: var(--s-sm) 0;
  font-size: var(--t-small);
  line-height: var(--lh-normal);
  color: var(--c-body);
}

.theme-v2 .news-list a:hover {
  color: var(--c-accent);
}

/* .news-list 是「无符号 + 通栏细线」的列表，但 .theme-v2 .prose ul（0,2,1）
   比 .theme-v2 .news-list（0,2,0）更专一，会把 1.5em 缩进和橙色圆点一起带进来 ——
   news.html 与 6 个详情页的 .news-list 都落在 .prose 里，全线受影响。
   这里用 ul.news-list（0,3,1）把两条都撤销，与首页（不在 .prose 内）的观感对齐。 */
.theme-v2 .prose ul.news-list {
  padding-left: 0;
}

.theme-v2 .prose ul.news-list > li::before {
  display: none;
}

/* 首条新闻带摘要：标题升一级、摘要仍是正文 */
.theme-v2 .news-lead {
  padding: var(--s-md) 0;
}

.theme-v2 .news-lead > a {
  display: block;
  padding: 0 0 var(--s-xs);
  font-size: var(--t-h3);
  font-weight: 500;
  line-height: var(--lh-snug);
  color: var(--c-ink);
}

.theme-v2 .news-lead p {
  margin: 0;
  font-size: var(--t-small);
  line-height: var(--lh-relaxed);
  color: var(--c-body);
  /* 首页的段落不在 .prose/.mright 等正文容器里，吃不到《中文排印》那组
     统一规则，所以这里显式补上 2 字缩进与两端对齐 */
  text-indent: 2em;
  text-align: justify;
  overflow-wrap: break-word;
}

/* --- 服务中心两张卡 ---
   旧站是 fuwu-pg.png / lianxi-pg.png 两张 360×96 的低清背景图，
   上面叠 HTML 文字 —— 与三洲的业务无关的通用素材图，且被拉伸到栏宽。
   这里换成干净的卡片。 */

.theme-v2 .service-links {
  display: grid;
  gap: var(--s-sm);
  margin-top: var(--s-md);
}

.theme-v2 .service-card {
  padding: var(--s-md) var(--s-lg);
  background: var(--c-sig-cream);
  border-left: 3px solid var(--c-accent);
  border-radius: var(--r-md);
}

.theme-v2 .service-card__label {
  margin: 0 0 var(--s-xs);
  font-size: var(--t-small);
  font-weight: 500;
  color: var(--c-ink);
  text-indent: 0;
}

.theme-v2 .service-card p {
  margin: 0 0 var(--s-xxs);
  font-size: var(--t-small);
  line-height: var(--lh-normal);
  text-indent: 0;
}

.theme-v2 .service-card p:last-child {
  margin-bottom: 0;
}

/* 奶油底上的链接必须用深一档的强调色：
   --c-accent #c2410c 对 #f5e9d4 只有 4.31:1，不达标（实测报错）；
   --c-accent-active #9a3412 是 6.10:1。 */
.theme-v2 .service-card a {
  color: var(--c-accent-active);
}

/* 电话那张做成近黑 CTA（Airtable 的主 CTA 即近黑） */
.theme-v2 .service-card--cta {
  background: var(--c-surface-dark);
}

.theme-v2 .service-card--cta .service-card__label {
  color: #ffffff;
}


/* 深色底上的悬停不能沿用 --c-accent-active：
   #9a3412 对 #181d26 只有 2.31:1，不达标。
   换招牌桃色 #fcab79，对 #181d26 是 9.04:1。 */

/* ==========================================================================
   附：首页版式微调（task-5）
   以下全是**追加**规则，不覆盖上面任何一条。
   ========================================================================== */

/* 1) 公司简介右栏的证书图与左栏 sy_05-pg.jpg 顶边齐平。
   ≥992px 时左栏「标题 + 更多」到底占 144.02px（与视口宽度无关：
   992 / 1024 / 1200 / 1280 / 1440 / 1920 六档实测同值，因为这段内容不换行）；
   右栏那张 .doc-figure 自带 24px 上边距（--s-lg），
   所以整列下移 144.02 − 24 = 120.02px。
   ⚠️「更多」从 20px 高的图片按钮改成 31px 高的文字按钮后，这段由 141.95 涨到 144.02px
   （+2.07px：按钮本身高 11px，但它坐在正文的 1.85 行高行盒里，行盒吸收掉大半），
   本值随之上调；日后再动 .more-link 的高度，这里要同步重算。
   规则放在媒体查询里：<992px 两栏堆叠时下移自动失效，不会多出一段空白。 */
@media (min-width: 992px) {
  .theme-v2 .home-intro-side {
    margin-top: 120.02px;
  }
}

/* 2) 视频专区三张封面高度统一。
   根因：pages.css 给封面只定了 width:100%、没定比例，三张源图
   0.722 / 1.000 / 1.385 各撑各的高度（1280 视口实测 492.92 / 356 / 256.99px）。
   三个视频本身都是 ≈16:9（1.782 / 1.765 / 1.778），所以把外框锁成 16:9、
   封面用 cover 填满即可，三格自然等高。
   ⚠️ 选择器带 .video-cell：new_detail6.html 也有一处 .home-video-grid，
   但那格没有 .video-cell（封面 event-05 是 1.501 的横幅，原本按原比例显示），
   不该被首页这条规则改到。 */
.theme-v2 .home-video-grid .video-cell .video-frame {
  aspect-ratio: 16 / 9;
  overflow: hidden;
}

.theme-v2 .home-video-grid .video-cell .video-frame img,
.theme-v2 .home-video-grid .video-cell .video-frame video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 封面里人物头顶的位置各不相同，缺省的 center 会切到头顶，
   所以两张人像封面要各自偏一下（取值不同 → 两个修饰类）：
   · event-03（1300×1800 竖构图）头顶在画面 6% 处，而 16:9 的可视带只有
     40.6% 高：给 18% 时可视带是 10.7%–51.3%，正好从额头/发际线切过去
     （已出图比对，红线穿头），所以必须顶对齐；
   · event-04（1600×1156）头顶在 8.8% 处，可视带有 77.9% 高，
     缺省 center 的可视带 11.1%–88.9% 会削掉头顶，给 18%（4.0%–81.8%）才有余量。 */
.theme-v2 .home-video-grid .video-cell .video-frame--portrait img {
  object-position: center top;
}

.theme-v2 .home-video-grid .video-cell .video-frame--headroom img {
  object-position: center 18%;
}

/* 3) 公司简介那支视频的封面 poster 是 event-04.jpg（1600×1156，比例 1.384），
   而 video 框要的是 16:9（1.778）。这里要管两件事：
   ① 一旦有 poster，浏览器会拿**封面**的比例当 video 的固有比例，
      框会自己长到 1.384（1280 视口实测 451.67×326.82，比 16:9 高 73px），
      所以显式锁回 16:9，版面与加封面之前保持一致；
   ② object-fit 默认 fill 会把 1.384 的封面横向拉伸 28%，改 cover。
      event-04 里人脸只占画面高度 15%–50%（逐行肤色实测），
      而 cover 的可视带只有 40.6% 高，缺省居中会切掉额头；
      object-position 取 18% 时可视带为 10.7%–51.3%，正好整张脸都在里面
      （与下面 video-frame--portrait 同一套算法）。正片本身 1280×720 恰为
      16:9，在这个框里 cover 不裁不拉，object-position 对它无影响。 */
.theme-v2 .home-intro-grid .doc-figure video {
  aspect-ratio: 16 / 9;
  object-fit: cover;
  object-position: center 18%;
}