/*!
 * ww-overrides.css — ww 皮肤的 dx149 增量样式。
 *
 * 规则：**不改** web/static/web/css/ww/ 下从 wwsq 搬来的原文件（将来好逐字比对），
 * 所有本项目差异一律写在这里，并在 layouts/ww-home.tpl 里最后加载。
 */

/* 1) ww/index.css 里 .theme-bg 引的是 wwsq 站点根路径 /images/theme-bg.png，
      dx149 静态资源挂在 /static/web 下 → 这里修正路径（不动原文件）。 */
.theme-bg {
  background-image: url(/static/web/images/theme-bg.png);
}

/* 2) 登录弹层：wwsq 用 zui.js 的 $().modal('show') 控制显隐，本项目用原生 JS 加 .in，
      补上 zui 主题里缺的可见态。7/29 对齐线上实测：弹框顶到视口顶（无 10vh 顶距）、
      无整屏压暗遮罩（线上 .modal 背景透明、页面不变暗）、阴影 0 5px 15px。 */
.dx-modal.modal.in {
  display: block;
  opacity: 1;
}
.dx-modal.modal.in .modal-dialog {
  transform: translate(0, 0);
}
/* zui 的 .modal-dialog 背景走 --color-dialog-background，而 ww 主题(common.css)没有定义这个
   变量 → 弹层整个透明、字压在卡片上。这里用 ww 自己的色板补上（底色/圆角与线上实测一致）。 */
.dx-modal .modal-dialog {
  background-color: var(--dx-base1-color);
  border: 1px solid rgba(255, 255, 255, .08);
  box-shadow: 0 5px 15px rgba(0, 0, 0, .5);
}
/* 已删：.modal-content/.modal-header 的 padding/border 覆写是早期臆造值；
   线上实测 header = zui 默认 padding 15px + common.css 的 border-bottom 分隔线，
   content 无额外 padding，让底层样式直接生效。 */
body.modal-open {
  overflow: hidden;
}

/* 3) PC 搜索面板：ww/common.css 只写了 :hover 展开，本项目改成点击展开（.is-open）。 */
.pc-search-drop.is-open .pc-search-drop-content {
  pointer-events: auto;
  z-index: 20;
}
.pc-search-drop.is-open .pc-search-drop-content-box {
  transform: translateZ(0);
  opacity: 1;
}

/* 4) footer 地址行的复制按钮（cyber 皮肤是图标按钮，这里沿用 ww 的文字风格）。 */
.ww-footer-addr code {
  font-family: inherit;
}
.ww-addr-copy {
  border: 1px solid currentColor;
  border-radius: 4px;
  padding: 0 6px;
  font-size: 12px;
  line-height: 18px;
  cursor: pointer;
  background: transparent;
  color: inherit;
}

/* 5) 首页 H1：内容与 cyber 皮肤同源(web_home_h1)，ww 版式里放在楼层下方做 SEO 文案。 */
.ww-home-h1 {
  font-size: 14px;
  font-weight: 400;
}

/* ── 精选合集卡：补 ww/common.css 里缺失的两条规则 ────────────────────────
   实测 wwsq 页面上这两个类是生效的（aspect-ratio: 329/186、fc-meta 为
   flex/12px/#999），但搬过来的 common.css 里没有对应规则——大概率是
   wwsq 侧还有一份未随本次一起搬运的样式来源。这里按实测到的计算值补齐。 */
.aspect-\[329\/186\] {
  aspect-ratio: 329 / 186;
}
.fc-meta {
  display: flex;
  align-items: center;
  color: #999;
}

/* ── 合集列表分类胶囊（wwsq 隐性布局缺陷修补）────────────────────────
   wwsq 的 md:flex-1 会把胶囊按条数均分：inline-flex 容器先按内容总和收缩，
   再均分给各 li。wwsq 的 tab 名恰好全是 4 字（热度优先/女王合集/热门合集），
   均分结果正好放得下；dx149 的分类名长短不一（SM、女王…），「热度优先」
   会被均分压窄折成两行。桌面档改回内容自适应宽（tab 名等长时视觉与 wwsq
   完全一致）；移动端保持 wwsq 的 w-full 均分行为不动。 */
@media (min-width: 768px) {
  .featured-collections-page nav[aria-label="排序方式"] li {
    flex: 0 0 auto;
  }
}

/* ── 帖子详情正文图（产品意见 7/28）──────────────────────────────────
   ① 图片间距：全局清掉 Quill 空段落(<p><br></p>)后连续图片会贴死，
      给正文图补上下边距（img 是替换元素，inline 状态下垂直 margin 也生效）。
   ② 占位图拉满：占位 SVG 原始 600×600，按 wwsq 的 width:auto 只渲染 600px
      → 右侧留缝。用属性选择器只对**未解密**的占位态拉满（解密后 src 变
      blob:，规则自动失效，真实图片回到原始宽度不被拉伸）。 */
.markdown-body img {
  margin: 12px 0;
}
.markdown-body img[src*="poster_loading"] {
  width: 100%;
  height: auto;
}

/* ── zui 按钮主色变量 ────────────────────────────────────────────────
   dx149 的 lib/zui.css 里 .btn-primary 走 var(--color-primary)，而 ww 主题
   (common.css)只定义了 --dx-primary-color（wwsq 那份 zui v1.4.1 用的是后者）。
   变量缺失 → 关注/发表评论等 .btn-primary 背景全透明。这里把两个变量对齐。 */
:root {
  /* ── 品牌主色（Figma DX-149 痴汉俱乐部，2026-7-29 换肤）────────────
     设计稿主视觉红 #BE3535 取代 wwsq 遗留的粉 #be3535；common.css 的
     --dx-primary-color 在此覆盖，全站 bg-primary/text-primary/swiper/按钮
     等所有引用一起翻。base16 是主色 10% 透明度衍生（标签胶囊底等）。 */
  --dx-primary-color: #be3535;
  --dx-base16-color: rgba(190, 53, 53, 0.1);
  --color-primary: var(--dx-primary-color, #be3535);
  /* zui .popover 背景变量（头像下拉菜单面板）；ww 主题未定义 → 透明，线上实测 #222 */
  --color-popover-bg: #222;
}

/* ── 直播回放角标背景图 ──────────────────────────────────────────────
   wwsq 用 bg-[url('../images/list-right-label.png')] 这个任意值原子类，
   但它在搬来的 common.css 里没有对应规则（实测 wwsq 页面上生效，说明其
   构建产物与这份 CSS 不完全一致）。这里按实测到的效果补一条等价规则，
   选择器用语义类名，避免依赖那个不存在的原子类。 */
.ww-live-badge,
.video-items .poster .absolute.left-0.top-0[class*="list-right-label"] {
  /* 7/29 换肤：原 list-right-label.png 是 wwsq 粉色切图，CSS 变量翻不动，
     改为品牌红纯 CSS 丝带（右端斜切对齐原图形状） */
  background-color: var(--dx-primary-color, #be3535);
  clip-path: polygon(0 0, 100% 0, calc(100% - 10px) 100%, 0 100%);
  border-radius: 2px 0 0 2px;
}

/* ── 个人中心收藏子筛选 tab（dx149 增量，借 records 页的 dx-line-tabs 风格） ──
   profiles.css 里有 wwsq 档案页专用的 .dx-tab-item{flex:1}（配 tab-li 均分场景），
   与 records 风格 tab（li 自带 dx-tab-item）同页共存时会把子筛选均分成整行。
   wwsq 两者从不同页出现，属隐性冲突（同坑 #14 一类），这里按 records 页
   实测效果收窄回内容宽。 */
.ww-user-fav-tabs > .dx-line-tab-item.dx-tab-item {
  flex: 0 0 auto;
}
/* 同一冲突的第二处（7/29 用户截图发现）：profiles.css 把 .dx-tab-item::after 定义成
   top:0 的 1px 竖分隔线（wwsq 档案页 tab-li 场景用），压掉了 common.css 里
   .dx-line-tab-item::after 的 33px 底部下划线 → 激活线变成顶部小竖点、
   非激活 tab 还渗出一条白线。按 common.css 原义收回来。 */
.ww-user-fav-tabs > .dx-line-tab-item.dx-tab-item::after {
  width: 33px;
  top: auto;
  bottom: 0;
  background-color: transparent;
}
.ww-user-fav-tabs > .dx-line-tab-item.dx-tab-item.is-active::after {
  background-color: var(--dx-primary-color);
}

/* ── zui .btn 尺寸对齐 wwsq ─────────────────────────────────────────
   wwsq 的 zui v1.4.1 是 .btn{height:40px;padding:5px 12px}（实测 focus-user
   计算高度 40px / line-height 20px），dx149 搬的 zui 构建是 height:34px;
   padding:0 12px。差 6px 全皮肤按钮都能看出来（关注/取消关注/表单提交）。
   模板里 !h-8 之类的 important 原子类仍按原样生效。 */
.btn {
  height: 40px;
  padding: 5px 12px;
  line-height: 20px;
}

/* ── 表单输入框底色对齐 wwsq ────────────────────────────────────────
   wwsq 的 zui v1.4.1 有 .form-control{background:var(--dx-base2-color)}（#0f0f0f，
   登录框/档案表单的深色输入底），dx149 搬的 zui 构建没有这条 → 输入框透明。
   :not([class*="bg-"]) 是为了不压掉模板里显式带 bg-* 原子类的输入框
   （头部搜索框 bg-base6——wwsq 里 zui 先于 common.css 加载所以 bg-base6 能赢，
   本文件加载在最后，直接写 .form-control 会反过来压掉它）。 */
.form-control:not([class*="bg-"]) {
  background-color: var(--dx-base2-color, #0f0f0f);
}


/* ── 404 页下半区版式（dx149 增量美化，产品 7/29）─────────────────────
   wwsq 线上对 #content404 没有任何 CSS（裸排版：左对齐小字标题、白底裸输入框、
   fa 字体缺失导致的空搜索按钮）。插画原样保留但限宽，下半区按 ww 色板重排：
   居中、深色搜索框 + 主色搜索钮、分类改胶囊。 */
.content404-wrapper {
  padding: 8px 0 56px;
}
#content404 {
  max-width: 640px;
  margin: 0 auto;
  text-align: center;
}
#content404 .icon svg {
  display: block;
  width: 100%;
  max-width: 480px;
  height: auto;
  margin: 0 auto;
}
#content404 .msg h1 {
  font-size: 24px;
  font-weight: 600;
  margin: 20px 0 10px;
}
#content404 .error-desc {
  color: #9a9a9a;
  margin-bottom: 28px;
}
#content404 .controls {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}
#content404 .return-home {
  min-width: 160px;
}
#content404 .search-box {
  width: 100%;
}
#content404 .search-box form {
  display: flex;
  width: 100%;
  max-width: 360px;
  margin: 0 auto;
}
#content404 .search-form-input {
  flex: 1;
  min-width: 0;
  height: 40px;
  padding: 0 14px;
  border: 0;
  border-radius: 4px 0 0 4px;
  background: var(--dx-base2-color, #0f0f0f);
  color: #fff;
  font-size: 13px;
  outline: none;
}
#content404 .search-form-input::placeholder {
  color: #666;
}
#content404 .search-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 40px;
  border: 0;
  border-radius: 0 4px 4px 0;
  background: var(--dx-primary-color, #be3535);
  color: #fff;
  cursor: pointer;
}
#content404 .hot-cats {
  margin-top: 40px;
}
#content404 .hot-cats p {
  color: #9a9a9a;
  font-size: 14px;
  margin-bottom: 14px;
}
#content404 .hot-cats ul {
  list-style: none;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}
#content404 .hot-cats a {
  display: inline-block;
  padding: 6px 18px;
  border-radius: 9999px;
  background: var(--dx-base3-color, #222);
  color: #d2d2d2;
  text-decoration: none;
  transition: color .2s;
}
#content404 .hot-cats a:hover {
  color: var(--dx-primary-color, #be3535);
}

/* ── 页头登录胶囊（Figma DX-149 主站稿，7/29 换肤）───────────────────
   设计稿页头右侧是品牌红胶囊「登录/注册」+ 用户小图标，替代 wwsq 的纯文字
   登录/注册。登录态头像 popover 不变。 */
.ww-auth-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 14px;
  border: 0;
  border-radius: 9999px;
  background: var(--dx-primary-color, #be3535);
  color: #fff;
  font-size: 12px;
  line-height: 18px;
  cursor: pointer;
  white-space: nowrap;
}
.ww-auth-pill:hover {
  opacity: .85;
}

/* ── 页头导航图标（Figma DX-149 主站稿，7/29 换肤）───────────────────
   每个导航项前的红黑手绘小图（位图素材 images/nav/ch-*.png，从设计稿逐个导出）。 */
.ww-nav-ico {
  /* 设计稿是 30×30；页头 h=85px 下按 24px 呈现（原 18px 用户反馈太小）。
     素材为 4x（120px）导出，高分屏下不糊。 */
  width: 24px;
  height: 24px;
  margin-right: 6px;
  object-fit: contain;
  flex: 0 0 auto;
}

/* ── 首页楼层标题图标（Figma DX-149 主站稿，7/29 换肤）───────────────
   楼层标题右侧的手绘小图（HOT火焰/星星书签/分类标签），替代原 #latest New 角标。
   设计稿里是 36×36，页面按 h2 字号配比取 32px（移动端 26px）。 */
.ww-floor-ico {
  width: 26px;
  height: 26px;
  object-fit: contain;
  flex: 0 0 auto;
}
@media (min-width: 768px) {
  .ww-floor-ico { width: 32px; height: 32px; }
}

/* ── 首页热门标签行（Figma DX-149 主站稿，7/29 换肤）─────────────────
   设计稿实测：胶囊 h=29 / radius 22 / padding 4px 8px / gap 10 /
   底色 #BE3535@30% / 文字 15px #E85151（带 # 前缀）；两端各一个品牌红圆钮。
   原实现是 #252525 深灰胶囊 + 无箭头，与设计稿不符。 */
.ht-row {
  display: flex;
  align-items: center;
  gap: 10px;
}
.ht-list {
  display: flex;
  flex: 1;
  min-width: 0;
  gap: 10px;
  list-style: none;
  margin: 0;
  padding: 0;
  overflow-x: auto;
  scroll-behavior: smooth;
  scrollbar-width: none;          /* Firefox */
  -ms-overflow-style: none;
}
.ht-list::-webkit-scrollbar { display: none; }
.ht-list > li { flex: 0 0 auto; }
.ht-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 29px;
  /* 设计稿胶囊是 fixed 100px + padding 4/8（文字 69px 居中）；这里 min-width 取 100px
     保证短标签与设计稿等宽，长标签靠 padding 自适应撑开。 */
  min-width: 100px;
  padding: 4px 8px;
  border-radius: 22px;
  background: rgba(190, 53, 53, .3);
  color: #e85151;
  font-size: 15px;
  line-height: 21px;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color .2s;
}
.ht-chip:hover {
  background: rgba(190, 53, 53, .5);
  color: #fff;
}
.ht-arrow {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--dx-primary-color, #be3535);
  color: #fff;
  cursor: pointer;
  transition: opacity .2s;
}
.ht-arrow:hover { opacity: .85; }
.ht-arrow svg { width: 16px; height: 16px; }
/* 设计稿两端圆钮是常显的（其 5 个标签并未溢出仍绘制箭头），这里保持常显；
   滚到端点/无溢出时降透明度做轻量反馈，不改变"箭头始终在位"的版式。 */
.ht-arrow.is-off { opacity: .35; cursor: default; }

/* ── 返回顶部按钮淡入淡出（7/29 用户反馈：display 硬切换不丝滑）──────────────
   common.css 的 .dx-backtop{display:none} 改为常驻布局 + opacity 过渡；
   显隐由 ww-shell.js 切 is-visible 类（>100px 淡入）。zui 的 [data-backtop]
   滚动隐藏处理器已通过移除该属性绕开（floatbar.tpl）。 */
.dx-backtop {
  display: block;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(6px);
  transition: opacity .25s ease, transform .25s ease, visibility .25s;
}
.dx-backtop.is-visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
}

/* ── 横幅广告位占位底色与占位板拼色（7/29 用户反馈：占位板两侧露灰边）──────
   common.css 的 img[data-src] 占位底是 #353535，而设计稿长条占位板
   (ad_loading_wide.svg) 底是 #222222——contain 缩放后两侧灰边割裂。
   底色对齐后整条槽位视觉连成一根通长的 #222222 横条（占位板"拉长"到满宽）。 */
.dx-banner-item img[data-src] {
  background: #222222;
}

/* ── 顶部站标完整显示（7/29 用户反馈：logo 右边被裁）────────────────────────
   头部 <picture> 盒子按 wwsq logo 比例定的（75×25 / lg 101×35 ≈ 2.89:1），
   dx149 的 logo.png 是 516×156 ≈ 3.31:1，被 object-fit:cover 填盒后横向溢出
   裁切——右缘「部」字笔刷被切掉。contain 完整收纳（宽向顶满、高向居中留白）。 */
.app-logo {
  object-fit: contain;
}

/* ── 法务/静态单页（/faq /dmca /terms /privacy /2257 /content-removal）─────────
   ww 皮肤没有对应的 wwsq 原型页（wwsq 这些页走的是另一套外壳），这里给 bodyHTML
   （后台 sq_setting 录入的富文本）一套可读排版：限宽、标题层级、段距、列表与表格。 */
.ww-legal { max-width: 900px; margin: 0 auto; padding: 24px 16px 56px; color: #d8d8d8; }
.ww-legal__title { margin: 0 0 20px; font-size: 22px; line-height: 1.4; font-weight: 600; color: #fff; }
.ww-legal__body { font-size: 14px; line-height: 1.9; word-break: break-word; }
.ww-legal__body h1, .ww-legal__body h2, .ww-legal__body h3 { margin: 28px 0 12px; color: #fff; line-height: 1.5; }
.ww-legal__body h1 { font-size: 20px; }
.ww-legal__body h2 { font-size: 17px; }
.ww-legal__body h3 { font-size: 15px; }
.ww-legal__body p { margin: 0 0 14px; }
.ww-legal__body ul, .ww-legal__body ol { margin: 0 0 14px; padding-left: 22px; }
.ww-legal__body li { margin: 6px 0; }
.ww-legal__body a { color: #BE3535; text-decoration: underline; }
.ww-legal__body strong, .ww-legal__body b { color: #fff; }
.ww-legal__body table { width: 100%; border-collapse: collapse; margin: 0 0 16px; display: block; overflow-x: auto; }
.ww-legal__body th, .ww-legal__body td { border: 1px solid #333; padding: 8px 10px; text-align: left; }
.ww-legal__body img { max-width: 100%; height: auto; }
@media (min-width: 768px) {
  .ww-legal { padding: 32px 20px 72px; }
  .ww-legal__title { font-size: 26px; }
  .ww-legal__body { font-size: 15px; }
}

/* ── 顶部站标尺寸（7/29 产品调整）───────────────────────────────────────
   ⚠️ 不能用 w-[152px] 这类自拟 Tailwind 原子类：ww 的 CSS 是预编译产物，只含 wwsq
   源码里真实用过的类，自拟的规则不存在 → <picture> 失去尺寸约束被撑大（坑 #1）。

   尺寸口径按设计图的**相对比例**定，而不是照抄它的绝对像素：
   设计图里 logo 高 ≈ 顶栏高的 60%（logo 66 / 顶栏 110）。dx149 的 H5 顶栏只有 60px，
   若直接照搬 213×66 会比整条顶栏还高、溢出显得巨大（7/29 实测 64 > 60）。
   故按比例取 H5 logo 高 ≈ 36px（60px 的 60%）→ 宽 = 36 × 3.31 ≈ 119。

   只给宽度 + aspect-ratio（logo.png 516×156），高度由浏览器按比例算，永不变形。
   窄屏再用 min(...,34vw) 收缩，避免挤到汉堡/搜索图标。 */
.app-logo-box {
  display: block;
  width: min(119px, 34vw);
  aspect-ratio: 516 / 156;
  height: auto;
}
@media (min-width: 1024px) {
  /* 桌面顶栏更高(约 76px)，可放到 150 宽 ≈ 45 高，同样约占 60% */
  .app-logo-box { width: 150px; }
}
/* 只作用于顶栏站标：.app-logo 类名被 wwsq 的抽屉头像/页脚徽标复用（ww-shell.js
   注入的 <img class="app-logo … w-[40px] h-[40px]">），全局 100% 会把 40px 头像
   撑到父容器大小（BUG #39319 实测 76×76）。 */
.app-logo-box .app-logo { width: 100%; height: 100%; object-fit: contain; }

/* ── iOS 输入框聚焦自动放大（BUG #39318 / #40173）────────────────────────
   iOS Safari 对字号 <16px 的输入控件聚焦时自动放大页面；ww 的表单控件是 13px
   （wwsq 线上同款，它自己也有这毛病）。viewport 不加 maximum-scale=1（会禁掉
   安卓 pinch 缩放），改用 iOS 专属探测（-webkit-touch-callout 只有 iOS 实现）
   把移动端输入控件提到 16px——安卓/桌面视觉与 wwsq 保持一致。
   !important 必须带：评论框等控件挂着 text-sm/text-[14px] 原子字号类
   （类选择器 0-1-0 压过这里的裸元素选择器 0-0-1，40173 就是这么漏的），
   本块已被 iOS+移动端双重条件圈死，提权只影响该场景。 */
@media (max-width: 767px) {
  @supports (-webkit-touch-callout: none) {
    input[type="text"],
    input[type="password"],
    input[type="search"],
    input[type="number"],
    input[type="email"],
    textarea,
    select,
    .form-control {
      font-size: 16px !important;
    }
  }
}

/* ── 帖子正文视频挂载点（BUG：社区详情页无视频展示）──────────────────────
   RewritePostContentVideo 把 Quill 视频块改写成 .post-video-player，由
   pages/ww-post-detail.js 挂 xgplayer。create_player 的默认宽高是 100%×100%，
   挂载盒自己必须有尺寸（原始 ql-video 块无任何尺寸类）——16:9 比例盒 +
   min-height 兜底（老安卓不认 aspect-ratio 时保证播放器可见可点）。 */
.markdown-body .post-video-player {
  width: 100%;
  min-height: 210px;
  aspect-ratio: 16 / 9;
  background: #000;
  margin: 12px 0;
}
@media (min-width: 768px) {
  .markdown-body .post-video-player { min-height: 360px; }
}

/* ── 首页 H1 / 楼层标题字号（运营 SEO 验收 8/12 一1️⃣）────────────────────
   验收要求「h1 字体调小；h2 字体调小，且比 h1 小」。
   改前实测（验收站 dx149-web，桌面与移动一致，无断点差异）：H1 32px、楼层标题 24px。
   改后：H1 26px、楼层标题 20px —— 两者都变小，且保持 h1 > h2 的层级。

   ⚠️ 定值必须实测，不能按 Tailwind 默认刻度推：ww 的 CSS 是 wwsq 的 Tailwind 预编译
   产物，**刻度被重新标定过** —— text-xl=16px、text-2xl=18px、text-3xl=20px、
   text-4xl=22px，而 text-5xl / text-6xl 在产物里根本不存在（用了等于没写，元素退回
   继承字号）。原来那串 `text-2xl md:text-5xl` 里的 md:text-5xl 就是个空类。
   同理不能自拟 text-[26px]（坑 #1：产物里没有的类不会生效），尺寸只能写在这里。

   作用域只到首页：其它页 H1 仍是原类串，验收未要求改（坑 #19：尺寸覆写一律挂具体类，
   不写全局 h1/h2 规则）。.ww-home-floor-title 也用在底部「精品推荐/友情链接」两块的
   div 标题上 —— 那两处不是 h 标签，但视觉上就是楼层标题，跟着一起收才不突兀。
   不加断点：原设计在两个断点就是同一尺寸，保持一致。 */
.ww-home-h1 { font-size: 26px; line-height: 1.35; }
.ww-home-floor-title { font-size: 20px; line-height: 1.35; }

/* ── 吃瓜详情：标题与正文标题层级（运营 SEO 验收 8/12 六1️⃣）──────────────────
   要求「标题 24 号，h1 22 号，h3 20 号」。实测改前：页面主标题 32px、正文 h2 24px、
   正文 h3 18.72px（正文里的 h 标签吃的是浏览器默认 em 值，层级看不出来）。
   改后：主标题 24px，正文 h1 22 / h2 21 / h3 20，形成单调递减。
   h2 取 21px 落在 22 与 20 之间（验收只给了 h1/h3 两个值）。

   主标题走语义类 .ww-post-title 而不是改原子类：它原本挂 `text-xl md:text-2xl`，
   在本产物里算出来是 16/18px，与验收站实测的 32px 对不上（两边 cascade 有差异），
   与其赌哪条规则赢，不如给个专属类钉死。ww-overrides.css 在 head 里排最后，
   与 .text-xl 同为 0-1-0 时按源码顺序取胜，无需 !important。 */
.ww-post-title { font-size: 24px; line-height: 1.4; }
.markdown-body h1 { font-size: 22px; line-height: 1.4; font-weight: 600; margin: 16px 0 8px; }
.markdown-body h2 { font-size: 21px; line-height: 1.4; font-weight: 600; margin: 14px 0 8px; }
.markdown-body h3 { font-size: 20px; line-height: 1.4; font-weight: 600; margin: 12px 0 6px; }

/* ── 列表页顶部区域观感（8/13）────────────────────────────────────────────────

   ① 吸顶条底色
   ww 的 CSS 里 .bg-black 被重定义过两次：Tailwind 原版的纯黑，以及后面一条
   `background-color: var(--dx-main-bg-color)`。实际生效的是纯黑那条，于是所有
   吸顶条在 #181818 的页面上压出一条黑带（吃瓜分类页 tab 行最明显）。
   按 ww 自己那条规则表达的意图，吸顶条底色应当等于页面主色 —— 它的职责是
   吸顶时遮住下方滚动内容，不是画一条装饰色带。
   不直接改 .bg-black：同一个类还用在视频时长角标上，那里必须是纯黑。
   故模板给吸顶条加 .ww-stickbar 语义类，只改这一类元素。

   ② 面包屑顶部留白
   8/12 把面包屑移到 H1 之上后，无广告投放的页面上它成了 <main> 的首个元素、
   直接贴在顶栏下沿（实测间距 0px）。有广告时 ads-top 会自然垫开，所以只在
   「面包屑就是首元素」这一种情况补留白 —— 用 :first-child 命中，有广告时不生效，
   不会双重间距。标签页此前是在模板里手工包 pt-3 的（ww-tag-detail），
   这条规则覆盖全部列表页，新页面不用再各自记得包一层。 */
.ww-stickbar { background-color: var(--dx-main-bg-color); }

main > .dx-breadcrumbs:first-child { margin-top: 12px; }
@media (min-width: 768px) {
  main > .dx-breadcrumbs:first-child { margin-top: 20px; }
}

/* ── .dx-container 在 1280~1367px 视口下左贴边 + 右溢出（8/13）──────────────
   ww 的 common.css 里：
     基础规则           .dx-container{margin:auto; padding:0 12px}     ← 居中带边距
     @media ≥1280px     .dx-container{width:1367px; padding:0}         ← 定宽、去边距
   断点是 1280 但宽度给了 1367 —— 视口落在这 87px 区间内时，容器比视口还宽，
   于是内容左边贴死视口边缘、右边溢出（实测 1280 视口：left=0, 右溢出 87px）。
   这是 wwsq 自带的缺陷，笔记本常见的 1280/1366 分辨率正好全中。

   修法：保留它 1367px 的设计宽度，但封顶到视口并留 24px 边距。
   宽屏（≥1415px）下结果与 wwsq 完全一致（1367 居中），只在会溢出的区间生效。
   边距取 24 而不是基础规则的 12：12px 在 1280 这类桌面宽度上视觉几乎贴边，
   而这个区间正是笔记本主力分辨率。
   width 先写死值再写 min()：老浏览器不认 min() 会忽略后一行、退回原行为，不会塌成 0。 */
@media (min-width: 1280px) {
  .dx-container {
    width: 1367px;
    width: min(1367px, calc(100% - 48px));
    margin-left: auto;
    margin-right: auto;
  }
}

/* ── body 的 100vw 造成全站横向滚动条（8/13）──────────────────────────────
   ww 的 common.css 里 body{width:100vw}。100vw **包含纵向滚动条的宽度**，
   而可用区是 clientWidth（已扣掉滚动条），于是只要页面能纵向滚动，body 就比
   可用区宽约 10px → 每个页面都能左右拖动一点，内容整体也被推得更贴左。
   改成 100%：body 是 position:absolute，百分比按 html 宽度算（已扣滚动条），
   视觉宽度与原来一致，只是不再溢出。 */
body { width: 100%; }

/* ── 帖子置顶角标（社区列表 / 首页吃瓜楼层）────────────────────────────────
   后台 sq_post.top>0 的帖会排到列表最前；角标让运营能在前台一眼认出。
   挂在 .post-item-poster 左上，盖过遮罩文字。 */
.post-item-poster { position: relative; }
.ww-post-pin {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 4;
  padding: 1px 8px;
  font-size: 12px;
  line-height: 20px;
  color: #fff;
  background: #c0392b;
  border-radius: 2px;
  pointer-events: none;
}