@charset "utf-8";
/* ==========================================================================
   全站统一页头（主站与万年历子站共用）
   --------------------------------------------------------------------------
   由 inc/header.php 的 site_header() 输出，类名统一 hd- 前缀，
   与各自站点的既有样式互不干扰（不依赖任何 CSS 变量）。

   结构：
     .hd
       .hd-strip   顶部条：免责声明 + 右侧 分享/收藏/扫码
       .hd-row     logo(左) + 栏目标题(中) + 口号(右)
       .hd-nav     红色主导航
       .hd-sub     二级菜单（当前栏目下的子项，胶囊按钮）

   ⚠️ 本文件必须**自包含字体与工具条样式**，不能依赖宿主页的 body：
   万年历子站（pages/wannianli/assets/css/style.css）的 body 声明了
   font-family / letter-spacing:.01em / font-smoothing:antialiased /
   text-rendering:optimizeLegibility，而主站 assets/style.css 的 body 都没有。
   页头若不自己声明，就会跟着所在页面的 body 变——同一套 site_header()
   在首页和万年历页渲染出两副样子（实测口号框宽 321.6 vs 357.5px、
   logo 站名 161.5 vs 168.9px、工具条按钮 73.2 vs 74.6px）。
   所以下面 .hd 一律显式写死字体族、字距与字形渲染参数。
   ========================================================================== */

/* 顶部条 ---------- */
/* 字体族与主站 assets/style.css 的 body 保持一致（微软雅黑优先），
   显式声明而非继承，保证子站 body 换成任何字体栈都不影响页头。
   字距归零：子站 body 有 .01em，会让页头所有没单独声明字距的元素多出 0.16px。 */
.hd{
  width:960px;margin:0 auto;font-size:13px;line-height:1.6;color:#333;
  font-family:"Microsoft YaHei","微软雅黑","PingFang SC","Hiragino Sans GB",-apple-system,"Segoe UI",Arial,sans-serif;
  letter-spacing:normal;
  -webkit-font-smoothing:auto;-moz-osx-font-smoothing:auto;
  text-rendering:auto;
}
.hd *,.hd *::before,.hd *::after{box-sizing:border-box;}
.hd a{color:inherit;text-decoration:none;}
.hd a:hover{text-decoration:none;}
/* 表单控件默认不继承字体（button 在两站的默认族不同），统一拉回页头字体 */
.hd button,.hd input,.hd select,.hd textarea{font-family:inherit;}

.hd-strip{display:flex;align-items:center;height:40px;gap:10px;}
.hd-strip .hd-declare{flex:1 1 auto;min-width:0;text-align:center;font-size:13px;color:#d81313;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.hd-strip .hd-declare strong{color:#d81313;font-weight:700;}
.hd-strip .hd-tools{flex:0 0 auto;}
/* 工具条在页头里收紧一点（仅作用于页头内，不影响别处）。
   ⚠️ 三个属性都要在这里写全：主站 .tool-btn 是 #555/#ddd/淡阴影，
   子站同名类是 var(--ink-2)/var(--line)/金色阴影，且子站还带 margin-top:14px。
   不锁定的话两个 CSS 里谁后加载谁生效 —— 子站的 style.css 排在 header.css 之后，
   于是万年历页的工具条就变成了另一副样子（实测按钮 73.2 vs 74.6px）。
   这里统一按主站观感写死，并在子站 style.css 之后仍靠更高优先级覆盖。 */
.hd-strip .page-tools{display:flex;align-items:center;gap:6px;margin:0;}
.hd-strip .tool-btn{
  display:inline-flex;align-items:center;gap:5px;
  padding:4px 11px;font-size:12.5px;line-height:1.5;
  font-family:inherit;color:#555;
  background:#fff;border:1px solid #ddd;border-radius:999px;
  box-shadow:0 1px 3px rgba(0,0,0,.04);
  cursor:pointer;
  transition:color .18s,background .18s,border-color .18s,transform .18s,box-shadow .18s;
}
.hd-strip .tool-btn:hover,.hd-strip .tool-btn:focus-visible{
  color:#a11;background:#fdf3f3;border-color:#d9b3b3;outline:none;
  transform:translateY(-1px);box-shadow:0 2px 4px rgba(0,0,0,.05),0 8px 18px rgba(0,0,0,.08);
}
.hd-strip .tool-btn[aria-expanded="true"]{color:#a11;background:#fbeeee;border-color:#d9b3b3;}
.hd-strip .tool-btn .ico{
  font-size:14px;font-style:normal;line-height:1;
  font-family:"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji","Segoe UI Symbol",sans-serif;
}

/* 分享 / 收藏 / 扫码 的弹层 ----------
   弹层显示时由 assets/tools.js 临时挂到 <body> 下（position:fixed，避开 overflow 裁剪），
   所以它**不在 .hd 里面**，上面的 .hd 作用域管不到它 —— 必须在这里单独锁定一遍。
   同样是因为两站各有一份 .tool-popup：主站 13px/12px 圆角/var 无关的 #ddd 描边，
   子站是 14px/14px 圆角/var(--line) 描边 + 金色阴影，且子站 style.css 排在
   header.css 之后加载，同优先级下子站胜出，于是弹层也跟着变了样
   （实测弹层 276×213.6 vs 288×224，31 处属性差异）。
   这里用 body 直接后代（0,0,1 + 类）以外再加一层自有类来抬优先级，两边观感拉平。 */
body .tool-popup{
  font-family:"Microsoft YaHei","微软雅黑","PingFang SC","Hiragino Sans GB",-apple-system,"Segoe UI",Arial,sans-serif;
  letter-spacing:normal;
  -webkit-font-smoothing:auto;-moz-osx-font-smoothing:auto;
  text-rendering:auto;
  font-size:13px;line-height:1.6;color:#333;
  background:#fff;border:1px solid #ddd;border-radius:12px;
  box-shadow:0 10px 30px rgba(0,0,0,.18);
}
body .tool-popup .popup-title{
  padding:8px 14px 7px;font-size:12px;letter-spacing:.06em;color:#999;
  border-bottom:1px solid #f0f0f0;
}
body .tool-popup.share-popup{width:276px;padding-bottom:8px;}
body .tool-popup .share-grid{
  font-size:13px;line-height:1.6;letter-spacing:normal;
  grid-template-columns:repeat(3,1fr);gap:4px;padding:8px;
}
body .tool-popup .share-opt{
  font-size:12px;line-height:1.6;letter-spacing:normal;color:#555;
  padding:9px 4px;border-radius:10px;
}
body .tool-popup.fav-popup{width:276px;}
body .tool-popup .fav-body{padding:13px 15px 15px;font-size:13px;}
body .tool-popup .fav-tip{font-size:13px;color:#555;}
body .tool-popup .fav-hint{font-size:12px;color:#999;}
body .tool-popup .fav-copy{font-size:13px;}
body .tool-popup.qr-popup{width:190px;padding:14px;}
body .tool-popup .qr-tip{font-size:12px;color:#999;}
body .tool-popup .share-opt:hover{background:#faf1f1;color:#a11;}
/* 分享图标圆点：主站 32px/13px，子站 34px/14px —— 差这 2px 弹层就高 4px */
body .tool-popup .share-opt .ico{
  width:32px;height:32px;margin-bottom:5px;
  font-size:13px;line-height:1;font-style:normal;font-weight:700;color:#fff;
}

/* 顶部条与下方（logo/栏目标题/口号）之间的分隔线 */
.hd-sep{height:2px;border-radius:2px;
  background:linear-gradient(90deg,rgba(204,51,51,0),rgba(204,51,51,.72) 10%,rgba(204,51,51,.72) 90%,rgba(204,51,51,0));}

/* logo + 栏目标题 + 口号 ---------- */
.hd-row{display:flex;align-items:center;height:82px;gap:12px;}
/* logo 区宽 268px：站名(21px) + 副标语「观时方知吉兆 · 居屋可阅通书」(11px) + 网址(10.5px) 三行，
   副标语 15 个字位 ×12px ≈180px，加图标 55px = 235px，留 33px 余量不截断。 */
.hd-logo{display:flex;align-items:center;flex:0 0 268px;width:268px;overflow:hidden;}
.hd-logo .hd-logo-ico{width:46px;height:46px;flex:0 0 46px;margin-right:9px;}
.hd-logo-txt{line-height:1.2;min-width:0;}
.hd-logo-txt b{display:block;font-size:21px;color:#c33;letter-spacing:1px;white-space:nowrap;}
.hd-logo-txt span{display:block;font-size:12px;color:#999;letter-spacing:.5px;white-space:nowrap;}
.hd-logo-txt .hd-logo-url{display:block;font-style:normal;font-size:11px;color:#a9a9a9;
  letter-spacing:2.2px;font-family:Arial,Helvetica,sans-serif;margin-top:1px;white-space:nowrap;}

.hd-hero{flex:1 1 auto;min-width:0;text-align:center;}
.hd-hero-name{margin:0;padding:0;font-size:30px;line-height:1.2;font-weight:700;color:#c33;
  letter-spacing:5px;text-indent:5px;font-family:Georgia,"Songti SC","SimSun",serif;}
.hd-hero-sub{margin-top:3px;font-size:12px;color:#9a9a9a;letter-spacing:1px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.hd-hero-sub .en{font-family:Arial,Helvetica,sans-serif;letter-spacing:3px;}

/* 口号 24 个字 + 4 个「 · 」分隔：12.5px 下实测约 320px，一行放得下；
   限宽 372px 是留余量（以后加词只会折成两行，不会把中间的栏目标题挤出去）。 */
.hd-slogan{flex:0 0 auto;max-width:372px;padding:7px 14px;font-size:12.5px;line-height:1.85;color:#8a8a8a;
  background:#fafafa;border:1px solid #eee;border-radius:6px;
  white-space:normal;text-align:center;}   /* 桌面端两行居中显示 */

/* 主导航 ---------- */
/* 只用 border-radius 裁圆角，不用 overflow:hidden。
   ⚠️ 踩过的坑（2026-10-19）：这里原来写的是 `overflow:hidden`（配合 border-radius 裁
   四个圆角），但小屏（≤600px）下 .hd-nav ul 要横向滚动（19 个栏目总宽 1134px > 视口
   390px），父级的 overflow:hidden 会变成 ul 滚动范围之外的第二层裁剪 —— 实测真机上
   手指从「起名」往后怎么滑都滑不动，只剩前 7 个栏目可见。
   现在把圆角交给 .hd-nav ul 自己（见下），去掉这一层的 overflow。 */
.hd-nav{background:#c33;border-radius:5px;}
/* 一级导航按「文字内容自适应」排布，不再用 flex:1 1 0 均分格子。
   ⚠️ 踩过的坑：均分时 960px ÷ 19 项 = 每格 50.5px，而 3 字标签（万年历 / 老黄历）
   光文字就 48px，左右各只剩 1.3px，「万年历」和「老黄历」两字之间只隔 2.5px，
   糊成一片；同一行里 2 字标签之间却隔 18.5px，松紧差 7 倍，看着就像
   「字体更大更粗」。font-size / font-weight / font-family 各项其实完全一致，
   差的只是留白。
   现在改成 li 宽度跟着内容走（flex:0 0 auto）+ 统一左右 8px 内边距，
   每一项的文字左右留白与项间距都相同，视觉上彻底一致；
   末项多余空间用 space-between 摊开，仍铺满 960px。
   ⚠️ 加减一级栏目后重算一遍总宽：文字总宽（3 字 48 / 2 字 32）+ 19 × 16，
   当前 2 个 3 字 + 17 个 2 字 = 96 + 544 + 304 = 944px，960 内还余 16px。
   超过 960 就得调小内边距，否则会被 overflow:hidden 裁掉末项文字。 */
.hd-nav ul{display:flex;flex-wrap:wrap;justify-content:space-between;margin:0;padding:0;}
.hd-nav li{flex:0 0 auto;min-width:0;list-style:none;text-align:center;}
/* 一级导航是栏目的主入口，字号不能小于下方的二级菜单（否则层级看着反了）。 */
.hd-nav li a{display:block;padding:0 8px;line-height:36px;font-size:16px;font-weight:500;color:#fff;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  transition:background .15s;text-decoration:none;}
.hd-nav li a:hover{background:#a11;color:#fff;}
.hd-nav li.cur a{background:#96231a;font-weight:700;}

/* 二级菜单 ---------- */
/* 外层 .hd-sub-row 只做一件事：给「展开全部 / 收起」按钮一个定位上下文。
   按钮**绝对定位**在行右侧而不是塞进 flex 流里 —— 因为各栏目的 .hd-sub 都带
   限宽居中（起名 880px 最宽），按钮一旦参与 flex 分配就会把整条菜单挤得
   不居中（起名那一栏偏 40px，一眼能看出歪了）。
   代价是按钮会盖在胶囊上，所以按钮做得很小（34px 圆钮），
   起名 880px 居中后右边缘在 920，留到 930 刚好不压到（实测 10px 余量）。 */
.hd-sub-row{position:relative;}
.hd-sub{display:flex;justify-content:center;flex-wrap:wrap;gap:8px;margin-top:13px;}
.hd-sub a{padding:8px 20px;font-size:15px;color:#3d3d3d;background:#fff;
  border:1px solid #e5e5e5;border-radius:999px;
  transition:color .18s,background .18s,border-color .18s,box-shadow .18s;
  text-decoration:none;}
.hd-sub a:hover{color:#a11;background:#fff;border-color:#e9cbc5;text-decoration:none;}
.hd-sub a.cur{color:#fff;font-weight:700;background:linear-gradient(135deg,#c8412f,#96231a);
  border-color:#96231a;box-shadow:0 3px 10px rgba(150,35,26,.26);}

/* 展开 / 收起按钮 ----------
   两站的二级菜单**默认态完全由 CSS 媒体查询决定**（桌面：全部换行展开；
   ≤600px：单行横滑），所以无 JS、首帧都不会出现「先展开再收起」的跳动。
   JS 只负责点按钮时给 .hd-sub-row 切 .toggled，并同步按钮文案与箭头方向：
     ≤600px：.toggled = 全部展开成多行（取消横滑与右缘渐隐）
     >600px：.toggled = 反过来收成单行横滑（省掉第二行的高度）
   data-state 由 JS 写：closed = 当前收起、点它会展开 → 箭头 ▾；
                        open   = 当前展开、点它会收起 → 箭头 ▴。 */
.hd-sub-toggle{
  position:absolute;right:0;top:13px;z-index:2;
  display:inline-flex;align-items:center;justify-content:center;gap:4px;
  min-width:34px;height:34px;padding:0 9px;
  font-family:inherit;font-size:12.5px;line-height:1;color:#8a8a8a;
  background:#fff;border:1px solid #e0e0e0;border-radius:999px;
  cursor:pointer;
  transition:color .18s,background .18s,border-color .18s;
}
.hd-sub-toggle:hover{color:#a11;background:#fdf3f3;border-color:#e9cbc5;}
.hd-sub-toggle:focus-visible{outline:2px solid #c8412f;outline-offset:2px;}
/* 文字标签只在 ≤600px 显示：那里胶囊小、按钮有富余空间；桌面端压到起名那一栏
   会与胶囊打架，只留一个箭头圆钮，靠 title 提示。 */
.hd-sub-toggle-t{display:none;white-space:nowrap;}
/* 箭头用两条边拼，避免字体差异导致大小不一 */
.hd-sub-toggle .caret{
  flex:0 0 auto;width:7px;height:7px;
  border-right:1.6px solid currentColor;border-bottom:1.6px solid currentColor;
  transition:transform .2s ease;
}
.hd-sub-toggle[data-state="closed"] .caret{transform:rotate(45deg) translate(-1px,-1px);}
.hd-sub-toggle[data-state="open"]   .caret{transform:rotate(-135deg) translate(-1px,-1px);}
/* 桌面收起态：单行横滑（起名 20 项时省掉一整行高度） */
.hd-sub-row.toggled .hd-sub{
  flex-wrap:nowrap;justify-content:flex-start;
  max-width:none !important;padding-right:44px;
  overflow-x:auto;overscroll-behavior-x:contain;
  scrollbar-width:none;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;
  -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 18px),transparent 100%);
          mask-image:linear-gradient(90deg,#000 calc(100% - 18px),transparent 100%);
}
.hd-sub-row.toggled .hd-sub::-webkit-scrollbar{display:none;height:0;}
.hd-sub-row.toggled .hd-sub a{flex:0 0 auto;scroll-snap-align:start;}

/* 起名栏目子项最多（20 项，其他栏目最多 12），用全局 8px 20px 的胶囊会溢出成第三行。
   本栏专属：15px 字号 + 8px 10px 内边距 + 6px 间距 → 单字 15px、每项再加 22px。
   20 项按 4 字标签算：每项 4×15+22 = 82px，10 项 = 10×82 + 9×6 = 874px，
   11 项 = 962px；限宽 900px 正好卡在中间，浏览器实测会排成 11+9（首行多挤一个
   「三才五格」），两行个数不一样。限宽 880px：首行 10 项 874 放得下，
   第 11 项 962 放不下 → 稳定 10+10。
   ⚠️ 再加项要先算一遍行数：本栏每行上限 10 项（按 4 字标签估）。 */
.hd-sub-qiming{max-width:880px;margin-left:auto;margin-right:auto;gap:6px;}
.hd-sub-qiming a{padding:8px 10px;font-size:15px;}

/* 八字栏目 12 项（4 字标签 104px、5 字 120px）。默认 flex-wrap 会排成 8+4，
   第二行只剩 4 个显得偏左失衡；限宽 700px 后每行正好 6 项，排成 6+6。
   6×104 + 5×8 = 664 < 700，第 7 项 784 > 700，切分稳定。
   ⚠️ 再加项要重算：加到 13 项就是 6+6+1，需改限宽或字号。 */
.hd-sub-bazi{max-width:700px;margin-left:auto;margin-right:auto;}
/* 抽签栏目 10 项（观音/关帝/黄大仙/月老/吕祖/妈祖/财神/佛祖/罗汉/每日一签）：限宽排成 5+5 两行 */
.hd-sub-qian{max-width:640px;margin-left:auto;margin-right:auto;}
/* 配对栏目 10 项（生肖/姓名/星座/姓名缘分/八字合婚/夫妻五行/生日/血型/手机/QQ）：限宽排成 5+5 两行。
   默认 16px 字号 4 字标签 ≈105px，5×105 + 4×8 = 557 < 580，第 6 项 670 > 580，切分稳定。
   ⚠️ 再加项要重算行数。 */
.hd-sub-peidui{max-width:580px;margin-left:auto;margin-right:auto;}

/* 精选栏目 11 项（算命精选 / 农历公历转换 / 眼跳测吉凶 / 喷嚏测吉凶 / 清宫表 /
   阳宅风水 / 八字知识 / 风水知识 / 相术大全 / 开运方法 / 免责声明）。
   默认不设限宽时 flex-wrap 会排成 9+2，第二行只剩 2 个，明显失衡。
   限宽 720px 后每行 6 项：首行 6 项实测 ≈697px 放得下、第 7 项 ≈807px 放不下；
   次行 5 项 ≈542px；稳定 6+5 两行。⚠️ 再加项要重算行数。 */
.hd-sub-sm{max-width:720px;margin-left:auto;margin-right:auto;}

/* 择日 / 评日各 16 项（标签统一 4 个字），要求排成 8+8 两行。
   15px 字号 + 8px 14px 内边距 → 每项 4×15+28 = 88px，间距 6px：
   8 项 = 8×88+7×6 = 746，9 项 = 834；限宽 780px 卡在两者之间，稳定 8+8。
   ⚠️ 以后加项要重算：9 项一行会变成 9+7。 */
.hd-sub-zeri,.hd-sub-pingri{max-width:780px;margin-left:auto;margin-right:auto;gap:6px;}
.hd-sub-zeri a,.hd-sub-pingri a{padding:8px 14px;font-size:15px;}

/* 移动端 ---------- */
@media (max-width:980px){
  .hd{width:100%;}
  .hd-strip{height:auto;flex-wrap:wrap;padding:6px 2px;gap:6px;}
  .hd-strip .hd-tools{flex:1 1 100%;order:1;}
  .hd-strip .page-tools{justify-content:center;}
  .hd-strip .hd-declare{flex:1 1 100%;order:2;white-space:normal;font-size:12px;line-height:1.5;text-align:center;}
  .hd-row{flex-direction:row;align-items:center;height:auto;padding:7px 2px 5px;gap:10px;}
  .hd-logo{flex:0 0 auto;width:auto;}
  .hd-hero{flex:1 1 auto;text-align:right;}
  .hd-hero-name{font-size:22px;letter-spacing:3px;text-indent:3px;}
  .hd-hero-sub{white-space:normal;margin-top:1px;font-size:11.5px;}
  /* 口号条在窄屏价值最低（页脚与免责声明页都写着），整块去掉 */
  .hd-slogan{display:none;}
  .hd-nav ul{flex-wrap:wrap;justify-content:center;}
  .hd-nav li{flex:0 0 auto;}
  .hd-nav li a{padding:0 11px;letter-spacing:1px;}
  .hd-sub{gap:6px;margin-top:9px;}
  .hd-sub a{padding:6px 14px;font-size:14px;}
}

/* ==========================================================================
   小屏（≤600px）页头瘦身
   --------------------------------------------------------------------------
   一级菜单（19 项）换行平铺、全部露出（3 行 90px）；二级菜单（最多 20 项）
   单行横滑，高度固定 34px。
   - 白条上盖住滚动条（::-webkit-scrollbar 隐藏），只在右缘留一段渐隐提示还有内容；
   - scroll-snap 让滑动停在栏目上，手感接近原生；
   - overscroll-behavior-x 防止横向滑动带动整页回弹。
   ⚠️ 改项数后不必再调这里的尺寸，flex 自适应。
   ========================================================================== */
@media (max-width:600px){
  .hd-strip{padding:5px 2px;gap:5px;}
  .hd-strip .hd-declare{font-size:11.5px;line-height:1.45;}
  .hd-strip .tool-btn{padding:4px 9px;font-size:12px;}

  .hd-row{padding:6px 2px 3px;gap:5px;}
  /* logo 与栏目标题并排一行：省掉一整行高度 */
  .hd-row{flex-direction:row;align-items:center;gap:9px;}
  .hd-logo{flex:0 0 auto;width:auto;}
  .hd-logo .hd-logo-ico{width:34px;height:34px;flex:0 0 34px;margin-right:6px;}
  .hd-logo-txt b{font-size:17px;}
  .hd-logo-txt span{font-size:10.5px;}
  .hd-logo-txt .hd-logo-url{font-size:9.5px;letter-spacing:1.4px;}
  .hd-hero{flex:1 1 auto;text-align:right;}
  .hd-hero-name{font-size:20px;letter-spacing:2px;text-indent:2px;}
  .hd-hero-sub{margin-top:1px;font-size:10.5px;letter-spacing:.5px;}
  /* 口号条在小屏价值最低（页脚与免责页都有），整块去掉 */
  .hd-slogan{display:none;}

  /* 一级导航：**换行平铺**，19 个栏目一次全部露出，不再横滑。
     ⚠️ 反复回退过的点（2026-10-19 第三次修订）：这里先后试过
       (1) flex-wrap 居中平铺 —— 19 项在 390px 下折 4 行（144px），把正文挤出首屏；
       (2) 单行横滑 + 右缘箭头 + 进度条 —— 高度压回 34px，但用户反馈
           「极小屏下一级菜单应该分行显示完整，你这个都没有分行」——
           横滑虽然能滑到，但一眼看不到全貌，也不知道要滑多远。
     现在取折中：字号收到 13.5px、内边距收到 8px、行高 30px，
     单项 2 字 = 43px / 3 字 = 56px，390px 视口每行能放 8~9 项 → 稳定 3 行 90px，
     19 项全部可见，且比最早那版少一行。二级菜单仍保持横滑（它最多 20 项，全铺要 5 行）。 */
  .hd-nav{border-radius:4px;overflow:visible;}
  .hd-nav ul{
    border-radius:4px;
    flex-wrap:wrap;justify-content:center;align-content:flex-start;
    overflow:visible;
    /* 行与行之间不留缝：li 高度即 a 的行高，靠 line-height 撑开 */
    row-gap:0;
  }
  .hd-nav li{flex:0 0 auto;scroll-snap-align:none;}
  .hd-nav li a{padding:0 8px;line-height:30px;font-size:13.5px;letter-spacing:0;}

  /* 二级菜单：默认单行横滑。用 padding 而不是负 margin 做左右内边距 ——
     .hd 是无内边距的定宽容器，负 margin 会让它真的超出视口造成横向滚动条。
     胶囊尺寸（2026-10-19 再收一档）：14px/6px14px → 12.5px/4px9px、行高由
     padding 撑到 24px。20 项的起名栏目在 390px 下每行能多露 2~3 个；
     按钮此时已有富余空间，把文字标签也放出来（「展开全部」比光一个箭头好认）。

     ⚠️ 布局改成 **.hd-sub-row 走 flex**：滚动区 .hd-sub 与按钮并排（flex:1 + min-width:0），
     按钮 flex:0 0 auto 固定在右侧。之前按钮是绝对定位浮在滚动区上方，滑到中间时
     会把半截胶囊盖住（实测「同名同姓」的「同」字正好被压在按钮下），观感很糟。
     并排后永远不会压到，代价只是滚动区少 79px —— 换来的是不遮挡，值。
     展开态（.toggled）改回 block：.hd-sub 换行铺满整行，按钮落到下方居中。 */
  .hd-sub-row{display:flex;align-items:flex-start;gap:0;}
  .hd-sub{
    flex:1 1 auto;min-width:0;
    flex-wrap:nowrap;justify-content:flex-start;gap:5px;
    margin:8px 0 0;padding:0 2px 2px 10px;
    max-width:none !important;
    overflow-x:auto;overscroll-behavior-x:contain;
    scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }
  .hd-sub::-webkit-scrollbar{display:none;height:0;}
  .hd-sub a{flex:0 0 auto;padding:4px 9px;font-size:12.5px;scroll-snap-align:start;}

  /* ---- 一级导航不再横滑，右缘箭头 / 进度条 / 渐隐全部去掉 ----
     原来这三样是给横滑做提示的（2026-10-19 加）。改成换行平铺后它们
     会变成「假的还有内容」提示，必须一起关掉，否则导航右下角永远挂着一个
     指向空处的 ›。二级菜单仍是横滑，.hd-sub 的渐隐保留。 */
  .hd-nav{position:static;margin-bottom:4px;}
  .hd-nav::before,.hd-nav::after{display:none !important;}

  /* 右缘渐隐，提示二级菜单还能往右滑（一级已平铺，不加） */
  .hd-sub{-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 18px),transparent 100%);
          mask-image:linear-gradient(90deg,#000 calc(100% - 18px),transparent 100%);}

  /* ---- 小屏的「展开全部 / 收起」按钮 ----
     小屏胶囊小、行只有 24px，右侧空得下文字标签，按钮从 34px 圆钮放宽成
     「展开全部 ▾」的胶囊（更容易点、也更容易懂）。
     按钮**始终**跟着页头横幅（banner）贴在右侧：.hd-sub-row 全程保持 flex 并排，
     收起态时菜单单行横滑，展开态时菜单在左侧换行铺开、按钮仍在右侧第一行 ——
     不再像旧版那样展开后掉到菜单下方居中（那样按钮位置会跳，且离页头更远）。 */
  .hd-sub-toggle{position:static;flex:0 0 auto;min-width:0;height:24px;margin-top:8px;
    padding:0 10px;font-size:12px;gap:3px;}
  .hd-sub-toggle-t{display:inline;}
  .hd-sub-toggle .caret{width:6px;height:6px;}
  /* 展开态：.hd-sub-row 仍是 flex（不退回 block），菜单换行铺满左侧可用宽度，
     按钮保持右侧、与第一行胶囊顶端对齐。取消 mask 渐隐，否则右侧换行处的
     胶囊会被渐隐糊掉半截。 */
  .hd-sub-row.toggled .hd-sub{
    flex:1 1 auto;min-width:0;
    flex-wrap:wrap;justify-content:flex-start;
    max-width:none !important;padding:0 2px 2px 10px;
    overflow:visible;
    -webkit-mask-image:none;mask-image:none;
  }
  .hd-sub-row.toggled .hd-sub a{scroll-snap-align:none;}
  .hd-sub-row.toggled .hd-sub-toggle{align-self:flex-start;}
}