/* ============================================================
   巨学问官网 · 工具类（Utilities）
   只允许写「不改设计、只调布局」的原子类。
   能复用组件就别用工具类堆页面。
   ============================================================ */

/* 间距 */
.mt-0{margin-top:0;}  .mt-2{margin-top:var(--sp-2);} .mt-4{margin-top:var(--sp-4);}
.mt-6{margin-top:var(--sp-6);} .mt-8{margin-top:var(--sp-8);} .mt-12{margin-top:var(--sp-12);}
.mb-0{margin-bottom:0;} .mb-4{margin-bottom:var(--sp-4);} .mb-8{margin-bottom:var(--sp-8);}
.mb-12{margin-bottom:var(--sp-12);}

/* 对齐 */
.t-left{text-align:left;} .t-center{text-align:center;} .t-right{text-align:right;}
.mx-auto{margin-inline:auto;}

/* 弹性 */
.row{display:flex; align-items:center; gap:var(--sp-3);}
.row--between{justify-content:space-between;}
.row--wrap{flex-wrap:wrap;}
.col{display:flex; flex-direction:column; gap:var(--sp-3);}

/* 显隐 */
.hide-sm{display:block;}
.show-sm{display:none;}
@media (max-width:860px){
  .hide-sm{display:none !important;}
  .show-sm{display:block;}
}

/* 宽度约束 */
.w-narrow{max-width:var(--maxw-narrow);}
.w-half{max-width:50%;}
@media (max-width:860px){ .w-half{max-width:100%;} }

/* ============================================================
   Sticky Footer 布局（错误页共用）
   ------------------------------------------------------------
   依据：《视觉与组件分册》**§2.7.1 共享工具类**
        +《404错误页面 · 页面大纲》**V1.4 §四 布局实现说明**
   用途：给「内容极短」的页面用（404 / 503）—— 让「页头 + 主内容」
        至少占满一屏，避免较高的页脚把首屏吃掉。
   用法：只给页面 body 元素加 class="layout--sticky-footer"，页面级 CSS
        不必再写任何布局规则。
   ------------------------------------------------------------
   ⚠️ 为什么必须写 min-height 而不是只靠 flex:1
      `flex:1` 的 `flex-grow` **只分配容器的剩余空间**。本站页脚很高
      （实测 PC 537px / 手机 1708px），「页头 + 主内容 + 页脚」的自然
      高度和已超过一屏 ⇒ 剩余空间为负 ⇒ `flex:1` 一点都不分配。
      实测：只写 `flex:1` 时「页头 + 主内容」仅 455px（占首屏 56%）。
   ⚠️ 为什么是 `100svh` 而不是 `100vh`
      `svh` = 地址栏**展开**时的最小可视高度，也就是用户打开页面时
      真正看到的那一屏 —— 正是「首屏」的定义。`vh` 在移动端约等于
      「地址栏收起后」的大视口，会让页脚在初始状态下就挤进首屏。
      桌面端 `svh === vh`，行为不变。
   ⚠️ 为什么必须减去 --header-h
      `min-height:100svh` 挂在 main 上时，页头已另占一截，会被
      重复计入 ⇒ 页面比必要高度多出那一截，页脚被推得更远。
      减去页头高才是精确解。
      ★ 页头高**不再固定 72px**（2026-10-17 起两行式）：桌面 112 = 第一行 64 + 第二行 48，
        移动端（≤1080）折叠回 64。两档都由令牌 --header-h 统一给出（= --hdr-top-h + --hdr-nav-h），
        所以这里**只写 var(--header-h)**、不写死数字 —— 页头再改高度，本节算式自动跟随。
        实测（404 页，视口 806）：页头 64 时「页头 + 主内容」约 455px（56%），页头 129 时 511px（63%）；
        结论方向不变 —— flex:1 仍无效、`calc(100svh - var(--header-h))` 仍是精确解。
   ------------------------------------------------------------
   页脚不需要额外规则：它是 body 的 flex 项，main 吃满后自然落底。
   三处不受影响（404 页已核对）：页头 .hdr 是 sticky（flex 项上照常吸顶）；
   移动端抽屉 .mnav 与底部条 .floatbar 是 fixed、跳到主内容链接 .skip-link
   是 absolute ⇒ 都脱离文档流，不参与这层 flex。
   ============================================================ */
.layout--sticky-footer{
  min-height:100svh;
  display:flex;
  flex-direction:column;
}
.layout--sticky-footer > main{
  flex:1;
  min-height:calc(100svh - var(--header-h));
  display:flex;
  align-items:center;
  justify-content:center;
}