/* 站点外框对齐层（2026-10-11）
   背景：/yjh/、/dm/、/dashang/ 三页引用的是 /home.css（首页皮肤，--h-maxw:1200px、
   顶栏写死 66px 高、导航小圆角 7px/14.5px）；而其余工具页引用各自的自包含基础层
   （--wb-maxw:1320px、顶栏内容自适应高、导航 999px 药丸 15px/600、当前页白字渐变）。
   结果：这三页的顶栏宽度、导航按钮尺寸/高度与其他页不一致。

   做法：本文件在 /home.css 之后加载，用同特异性（.home 前缀）覆盖，
   把顶栏/导航/页脚参数对齐到与工具页基础层一致。
   注意：只统一「站点外框」，各页正文内容区宽度保持各自布局需要（工具页本身也不统一）。 */

/* 全站统一字体栈：home.css 没有给 body 设 font-family，导致这三页回落到
   Times New Roman（衬线体），导航与正文都和其余工具页不是一个字体。
   取自工具页基础层（tools/build/tool.css → 各 {page}.css 的基础段）。 */
.home,
.home body {
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei",
    "Helvetica Neue", Arial, sans-serif;
}

/* 🔴 几何对齐（2026-10-11 补）：home.css 既没重置 body 外边距/内边距，也在
   `body.home` 里把 --page-pad-x 写死成 0px，于是这几页 body 带浏览器默认 8px 边距、
   顶栏的「负边距撑满」完全失效，顶栏容器比工具页窄 28px、左右位置也不同
   （工具页 1292px@-6px，这里 1264px@+8px）。
   ⚠️ 必须用 `body.home` 而不是 `.home` —— home.css 那条是元素+类选择器（特异性更高），
      写成 `.home` 会被它压住（实测就是这样：写了 20px 结果算出 0px）。
   下面按工具页基础层的同一组值补齐：body 内边距 0 14px 40px + --page-pad-x 20px。 */
body.home {
  margin: 0;
  padding: 0 14px 40px;
  --page-pad-x: 20px;
}

/* 正文主容器宽度：以工具页标准 1320px 为准（home.css 原本是 1200px） */
.home .h-main { max-width: 1320px; padding-left: 24px; padding-right: 24px; }

/* 导航是弹性子项，默认 min-width:auto 不肯收缩到内容宽度以下，
   导航项一多（现在 11 项）就会把整页横向撑宽。置 0 后由 overflow-x:auto 内部横向滚动。 */
.home .site-nav { min-width: 0; }

/* 长 URL / 代码块在窄屏会把页面横向撑宽（yjh 的 API 文档里 fetch 示例长 693px），
   允许在任意位置折行，pre 块内部横向滚动。 */
.home code { overflow-wrap: anywhere; word-break: break-all; }
.home pre { overflow-x: auto; }

.home .site-header {
  z-index: 50;
  border-bottom: 1px solid #e7eaf1;
  box-shadow: 0 1px 12px rgba(31, 41, 55, .04);
}

/* 顶栏：1320px 宽、内容自适应高度（去掉 home.css 写死的 66px） */
.home .site-header__inner {
  max-width: 1320px;
  padding: 12px 24px;
  height: auto;
  gap: 20px;
}

.home .site-header .brand {
  font-size: 21px;
  line-height: 1.6;          /* 与工具页一致：否则品牌文字行高 1.75 会把顶栏撑高 2px */
  letter-spacing: .5px;
  color: #0f172a;
}
.home .site-header .brand .logo {
  width: 34px; height: 34px; border-radius: 10px;
  font-size: 18px; font-weight: 900;
  background: linear-gradient(135deg, #2563eb, #7c3aed);
  box-shadow: 0 4px 12px rgba(37, 99, 235, .35);
}
.home .site-header .brand b {
  background: linear-gradient(135deg, #2563eb, #7c3aed);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* 导航：药丸按钮 + 与工具页一致的字号字重和当前页样式 */
.home .site-nav { gap: 6px; justify-content: flex-start; }
.home .site-nav a {
  padding: 9px 16px;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 600;
  line-height: 24px;          /* 与工具页一致：15px × 1.6 → 按钮高 42px */
  color: #475569;
}
.home .site-nav a:hover { color: #2563eb; background: #eef2ff; }
.home .site-nav a.active {
  color: #fff;
  background: linear-gradient(135deg, #2563eb, #7c3aed);
  box-shadow: 0 4px 12px rgba(37, 99, 235, .3);
}

/* 页脚：与工具页同一宽度与栅格间距 */
.home .wb-footer { border-top: 1px solid #e7eaf1; }
.home .wb-footer__inner {
  max-width: 1320px;
  padding: 0 24px;
  gap: 36px;
  grid-template-columns: 1.35fr 1fr 1fr;
}

/* ---------- 响应式：断点与工具页一致（860 / 560） ---------- */
@media (max-width: 860px) {
  .home .site-header__inner { padding: 9px 12px; gap: 10px; }
  .home .site-header .brand { font-size: 17px; }
  .home .site-header .brand .logo { width: 28px; height: 28px; border-radius: 8px; font-size: 15px; }
  .home .site-nav a { padding: 7px 12px; font-size: 13.5px; line-height: 22px; }
  .home .wb-footer__inner { grid-template-columns: 1fr 1fr; gap: 28px; }
}
@media (max-width: 560px) {
  /* 小屏与工具页一致：顶栏贴边铺满（390px 视口下正好 390@0） */
  /* 小屏与工具页一致：body 左右各留 10px（标准页在此断点是 padding:0 10px），
     之前这里写成 0，导致手机端内容比标准页宽 8px。 */
  body.home { padding: 0 14px 40px; --page-pad-x: 20px; }
  .home .wrap,
  .home .pv-wrap,
  .home .ys-wrap,
  .home .fw-wrap,
  .home .dm-wrap,
  .home .ds-main { padding-left: 12px; padding-right: 12px; }
  .home .wb-footer__inner { grid-template-columns: 1fr; gap: 22px; padding: 0 14px; }
}
/* ============================================================
   导航「更多」下拉（2026-10-11）
   为什么改：11 个入口在 1280px 下已超出容器、再加工具必然被裁，
   1024px 下更是一半看不见。改为「常驻 4 项 + 更多下拉」后顶栏宽度恒定。
   渲染逻辑在 /wb.js 的 initNav()，本文件只负责样式。
   ============================================================ */

/* 下拉容器：定位上下文 */
.home .site-nav,
.site-nav { position: relative; }

/* 「更多」触发按钮 —— 做成和普通导航项同样的药丸，视觉统一 */
.home .site-nav .nav-more { position: relative; flex: 0 0 auto; display: inline-flex; }

.home .site-nav .nav-more__btn,
.site-nav .nav-more__btn {
  flex: 0 0 auto;
  display: inline-flex; align-items: center; gap: 4px;
  padding: 9px 14px;
  border-radius: 999px;
  border: 0; background: transparent; cursor: pointer;
  font: 600 15px/1.6 inherit; color: #475569;
  white-space: nowrap; transition: .16s;
}
.home .site-nav .nav-more__btn:hover,
.site-nav .nav-more__btn:hover { color: #2563eb; background: #eef2ff; }
.home .site-nav .nav-more__btn svg { transition: transform .18s; }
.home .site-nav .nav-more.is-open .nav-more__btn svg { transform: rotate(180deg); }
.home .site-nav .nav-more.is-open .nav-more__btn,
.site-nav .nav-more.is-open .nav-more__btn { color: #2563eb; background: #eef2ff; }

/* 当前页在「更多」里面时，按钮保持高亮，让人知道自己在这页 */
.home .site-nav .nav-more.is-current .nav-more__btn,
.site-nav .nav-more.is-current .nav-more__btn {
  color: #fff;
  background: linear-gradient(135deg, #2563eb, #7c3aed);
  box-shadow: 0 4px 12px rgba(37, 99, 235, .3);
}
.home .site-nav .nav-more.is-current .nav-more__btn:hover,
.site-nav .nav-more.is-current .nav-more__btn:hover { color: #fff; background: linear-gradient(135deg, #2563eb, #7c3aed); }

/* 下拉面板：卡片浮层，靠右对齐避免超出屏幕 */
.home .site-nav .nav-more__menu,
.site-nav .nav-more__menu {
  position: absolute; top: calc(100% + 10px); right: 0;
  min-width: 168px; padding: 6px;
  background: #fff; border: 1px solid #e7eaf1; border-radius: 14px;
  box-shadow: 0 12px 32px rgba(15, 23, 42, .12);
  display: none; z-index: 60;
}
.home .site-nav .nav-more.is-open .nav-more__menu,
.site-nav .nav-more.is-open .nav-more__menu { display: block; }

.home .site-nav .nav-more__menu a,
.site-nav .nav-more__menu a {
  display: block; padding: 9px 12px; border-radius: 9px;
  font-size: 14.5px; font-weight: 600; color: #334155;
  text-decoration: none; white-space: nowrap; transition: .14s;
}
.home .site-nav .nav-more__menu a:hover,
.site-nav .nav-more__menu a:hover { background: #f1f5f9; color: #2563eb; }
.home .site-nav .nav-more__menu a.active,
.site-nav .nav-more__menu a.active {
  color: #fff;
  background: linear-gradient(135deg, #2563eb, #7c3aed);
}

/* 移动端：菜单项加大点击区域 */
@media (max-width: 560px) {
  .home .site-nav .nav-more__btn,
  .site-nav .nav-more__btn { padding: 7px 11px; font-size: 13.5px; }
  .home .site-nav .nav-more__menu a,
  .site-nav .nav-more__menu a { padding: 11px 12px; }
}

/* 🔴 关键修复：顶栏有 backdrop-filter 会创建层叠上下文，把下拉面板裁在头内。
   提升 .site-nav 的层叠等级并保证 header 不裁剪子元素，下拉才能正常浮出。 */
.home .site-header { overflow: visible; }
.home .site-nav { position: relative; z-index: 70; }
.home .site-nav .nav-more { z-index: 71; }
.home .site-nav .nav-more__menu { z-index: 72; }
.site-header { overflow: visible; }
.site-nav { position: relative; z-index: 70; }
.site-nav .nav-more { z-index: 71; }
.site-nav .nav-more__menu { z-index: 72; }

/* 🔴 菜单已由 wb.js 挂到 body 下（fixed 定位），
   因此样式必须能脱离 .site-nav 祖先命中，这里给一份独立的全局规则。 */
body > .nav-more__menu {
  position: fixed;
  min-width: 168px; padding: 6px;
  background: #fff; border: 1px solid #e7eaf1; border-radius: 14px;
  box-shadow: 0 12px 32px rgba(15, 23, 42, .14);
  display: none; z-index: 9999;
}
body > .nav-more__menu.is-open { display: block; }
body > .nav-more__menu a {
  display: block; padding: 9px 12px; border-radius: 9px;
  font-size: 14.5px; font-weight: 600; color: #334155;
  text-decoration: none; white-space: nowrap; transition: .14s;
}
body > .nav-more__menu a:hover { background: #f1f5f9; color: #2563eb; }
body > .nav-more__menu a.active {
  color: #fff; background: linear-gradient(135deg, #2563eb, #7c3aed);
}
@media (max-width: 560px) {
  body > .nav-more__menu a { padding: 11px 12px; }
}

/* ============================================================
   全站宽度标准（2026-10-11 大山钦定，以「视频去水印」页为唯一标准）
   内容容器：max-width 1320px + 左右 padding 24px
   ⚠️ 建新页面时直接写 .new-wrap{max-width:1320px;margin:0 auto;padding:40px 24px 24px}，
      不要自拟 980 / 900 / 860 之类（本站在 1320px 下改过一次）。
   下面这行是兜底：任何页面里的 .wrap / main 若被自设窄宽度，会被拉回标准。
   ============================================================ */
.home .wrap,
.home .pv-wrap,
.home .ys-wrap,
.home .fw-wrap,
.home .dm-wrap,
.home .ds-main { max-width: 1320px; }

/* ============================================================
   宽度兜底 · 收尾（2026-10-11）
   标准（视频去水印页）：桌面 1320px + padding 0 24px；小屏 body 左右 10px + 容器左右 12px。
   下面这组规则用 !important 盖住各页自带 CSS 的残留，
   保证任何页面（哪怕自设了 980/900/860 或小屏 padding 14/24）都会被拉回标准。
   ============================================================ */
@media (max-width: 560px) {
  body.home { padding: 0 10px 40px !important; }
  .home .wrap,
  .home main,
  .home .pv-wrap,
  .home .ys-wrap,
  .home .fw-wrap,
  .home .dm-wrap,
  .home .ds-main {
    max-width: 1320px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
}

/* ============================================================
   全站宽度标准（2026-10-11 大山钦定，唯一事实来源 = 「视频去水印」页 qsy）
   实测 qsy 的计算值：
     body   : margin 0 / padding 0 14px 40px / --page-pad-x 20px
     header : margin-left -20px（负边距抵消 body 内边距，贴边铺满）
     .wrap  : max-width 1320px / padding 0 24px → 1080 视口下宽 1052、左边界 14
   ⚠️ 建新页面直接照抄下面这条，不要自拟 980/900/860：
       .xxx-wrap { max-width: 1320px; margin: 0 auto; padding: 40px 24px 24px; }
   ============================================================ */

/* 🔴 全站宽度标准（2026-10-11 大山钦定，唯一标准 = 「视频去水印」页 qsy）
   qsy 实测：body 0 14px 40px；.wrap{max-width:1320px; padding:0 24px}
   → 容器必须 box-sizing:border-box + 左右 24px，上下留白另用内部元素实现，
     否则 max-width 会把 padding 算进宽度，1440 宽屏下会比标准宽出 48px。 */
.home .wrap,
.home main,
.home .pv-wrap,
.home .ys-wrap,
.home .fw-wrap,
.home .dm-wrap,
.home .ds-main {
  box-sizing: border-box !important;
  max-width: 1320px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}