/* ============================================================
 * 共享布局骨架  /shared/zh-layout.css
 * 只管"页面骨架"，不管品牌视觉 —— 视觉样式在 zh-brand.css
 * 必须在 zh-brand.css 之后加载
 * ------------------------------------------------------------
 * 统一解决四个问题：
 *   ① 内容不足一屏时页脚悬在半空 —— body 纵向 flex + 页脚 margin-top:auto 顶到底
 *   ② display:flex 默认 flex-direction:row，直接子元素会横向并排
 *   ③ 页脚被 flex 压缩变形 —— flex-shrink:0
 *   ④ 10 个页面逐页粘贴同一套补丁、MD5 各不相同 —— 无单一真相源
 * ------------------------------------------------------------
 * 页脚贴底用 margin-top:auto 而不是给主容器 flex:1，是因为
 * 各页主容器叫法完全不同（#app / .wrap / .login-wrap / .container /
 * .search-bar / .page-bottom / .hero …），无法用统一选择器覆盖；
 * margin-top:auto 无需知道主容器是谁即可把页脚推到最底部。
 * ============================================================ */

/* 1. 页面骨架：纵向 flex，至少一屏高 */
body {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: column;
  flex-direction: column;
  min-height: 100vh;
}

/* 2. 页脚贴底：内容不足一屏时用 auto 外边距把页脚推到最底部 */
body > .zh-footer {
  margin-top: auto;
}

/* 3. 页脚不参与压缩，避免内容超高时页脚被压扁 */
.zh-footer {
  -webkit-flex-shrink: 0;
  flex-shrink: 0;
}