@charset "utf-8";
/* ==========================================================================
   全站通用外框（内容区 960 白底）+ 页脚 + 返回顶部
   --------------------------------------------------------------------------
   主站（inc/layout.php）与万年历子站（pages/wannianli/src/layout.php）共用本文件，
   保证两边「内容区宽度 / 页脚样式 / 回顶部按钮」完全一致，改一处两边同时生效。
   页头另见 assets/header.css（由 inc/header.php 输出）。
   页脚结构与链接由 inc/footer.php 的 site_footer() 渲染。
   ========================================================================== */

/* ---------- 文档级横向锁定（2026-10-19） ----------
   ⚠️ 踩过的坑：页头小屏（≤600px）的一级/二级导航是「单行横向滑动」，
   用户反馈「再缩小分辨率后整页被拖到左边，logo 和第一个菜单都被切掉」。

   根因不是某处固定宽度写错了（320~1440 每 20px 全量扫描是零溢出），
   而是 **html/body 没有任何横向锁定**：只要页面在某一瞬间出现 1px 的横向溢出
   （字体回退、滚动条宽度变化、某个 <img> 未加载完、子站表格 min-content 等），
   手指在导航上横滑时滚动链就会一路冒泡到文档，把整页一起拖走；
   而且横滑结束后浏览器**不会自动把 scrollX 归零**，整页就永久歪在那里。

   对策是三管齐下（缺一不可）：
     1. html/body overflow-x:hidden —— 文档不再是横向滚动容器，滚动到不了；
     2. overscroll-behavior-x:none —— 连滚动链的传递都掐断（Safari 16 以下
        对 overflow-x:hidden 的根元素仍可能传递，这条是兜底）；
     3. width/max-width 100% —— 不给内容任何撑破视口的余地。

   为什么不用 overflow-x:clip：clip 不创建滚动容器、不会被脚本 scrollTo，
   但 Safari 15 以下不支持；hidden 全平台可用，代价是 <html> 变成滚动容器后
   position:fixed 的定位参照仍是视口（本项目 .totop / .tool-popup 依赖 fixed，
   实测不受影响），所以选 hidden。

   ⚠️ 注意这两条只加在 html/body 上，**不要**加到 .hd-nav 等需要横向滚动的容器
   —— 那里必须保留 overflow-x:auto 才能滑。 */
html,body{
  max-width:100%;
  overflow-x:hidden;
  overscroll-behavior-x:none;
}

/* ---------- 内容区：960 白底 ---------- */
/* 内容区必须是 960：主站 .plt(702) + .prt(250+8) = 960 正好放满，差 1px 右栏就掉行。
   全局 *{box-sizing:border-box} 会把 960 压成 956，所以显式还原 content-box，
   保证与 .hd（页头）/ .f_link / .footer 左右完全对齐。 */
.wrapper{width:960px;box-sizing:content-box;margin:0 auto;background-color:#fff;padding:2px;overflow:hidden;}

/* ---------- 友情链接 / 页脚 ---------- */
.f_link{width:960px;background-color:#f7f7f7;border:1px solid #dfdfdf;font-size:12px;line-height:22px;margin:10px auto;overflow:hidden;padding:8px 0;}
.f_link .f_title{font-size:12px;font-weight:bold;float:left;width:80px;padding-left:20px;color:#d81313;}
.f_link .f_list{float:right;width:850px;}
.f_link .f_list li{float:left;width:95px;padding-right:10px;list-style-type:none;overflow:hidden;white-space:nowrap;}
.footer{width:960px;color:#999;padding-top:10px;padding-bottom:10px;text-align:center;margin:10px auto;border-top:1px solid #c9c9c9;overflow:hidden;line-height:26px;font-size:12px;}
.footer a{color:#999;}

/* ---------- 返回顶部（圆形按钮，两站一致） ---------- */
.totop{position:fixed;right:20px;bottom:20px;width:46px;height:46px;border:none;border-radius:50%;
  display:flex;align-items:center;justify-content:center;padding:0;color:#fff;
  background:linear-gradient(135deg,#c8412f,#96231a);box-shadow:0 10px 30px rgba(80,60,30,.28);
  cursor:pointer;z-index:600;opacity:0;visibility:hidden;transform:translateY(14px);
  transition:opacity .25s ease,visibility .25s ease,transform .25s ease,box-shadow .18s ease;}
.totop.show{opacity:1;visibility:visible;transform:translateY(0);}
.totop:hover{box-shadow:0 14px 34px rgba(150,35,26,.34);}
.totop:active{transform:scale(.93);}
.totop:focus-visible{outline:3px solid rgba(200,65,47,.4);outline-offset:2px;}
/* 悬停时在按钮左侧浮出「回到顶部」文字：只有一个小箭头时很多用户看不出是什么 */
.totop::after{content:"回到顶部";position:absolute;right:56px;top:50%;
  transform:translateY(-50%) translateX(6px);
  padding:4px 9px;border-radius:4px;background:rgba(72,36,24,.86);color:#fff;
  font-size:12px;line-height:16px;white-space:nowrap;letter-spacing:0;
  opacity:0;pointer-events:none;transition:opacity .18s ease,transform .18s ease;}
.totop:hover::after,.totop:focus-visible::after{opacity:1;transform:translateY(-50%) translateX(0);}

/* ---------- 窄屏 ---------- */
@media (max-width:980px){
  .wrapper,.f_link,.footer{width:100%;}
  /* .wrapper 是 content-box，窄屏 width:100% 再加 2px 内边距会横向溢出，压回 border-box */
  .wrapper{box-sizing:border-box;padding:0;}
  /* 友情链接列表原本 float:right + width:850px（950 - 80 标题）。
     ⚠️ 601~980px 这个区间里视口比 850 还窄，超出的部分会被 .f_link 的
     overflow:hidden **静默裁掉**（用户看不到也点不到，只能刷新页面）。
     这里提前一档改成上下堆叠 + 自适应列宽，别等到 600px 才救。 */
  .f_link .f_title{float:none;width:100%;padding-left:0;margin-bottom:6px;}
  .f_link .f_list{float:none;width:100%;}
  .f_link .f_list li{width:16.66%;padding-right:6px;box-sizing:border-box;}
}
@media (max-width:600px){
  .f_link{padding:8px 10px;}
  .f_link .f_list li{width:33.33%;padding-right:6px;box-sizing:border-box;}
  .footer{font-size:11.5px;line-height:22px;}
  .totop{right:12px;bottom:14px;width:42px;height:42px;}
}

/* 触屏没有 hover，别让浮出的文字在窄屏上挤压按钮 */
@media (max-width:600px){
  .totop::after{display:none;}
}