/* ==========================================================================
   页脚改「底部抽屉」（2026-10-25 店主方案）
   --------------------------------------------------------------------------
   店主原话：「现在页脚在所有页面都不会显示。但是在每个页面，你滑动到最下面
   他会自动给你停止，但是你这时候再往下滑时，页脚才会像这样出来。」

   所以：页脚**不占正文高度**，平时完全看不见；滚到文档底部后再往下拨（滚轮 / 手指），
   它从屏幕底边滑上来，像一个抽屉。理由很实在 —— 页脚是「关于 / 地址 / 联系方式」，
   99% 的浏览都不需要它，却一直占着页面最后一屏的 700px。

   三个刻意的决定：
     · **有遮罩**（2026-10-25 店主明确要求：「打开页脚时，除了页脚的其他地方
       都要被黑色带有透明度的蒙版给盖住」）。第一版我特意没加，理由是"看完往上滑
       就走更顺手"；但实际用下来，没有遮罩时页脚和正文糊在一起，看不出"这是一个
       浮起来的层"。现在点遮罩即收起，是除了 ✕ 之外的第二条退出路径。
     · **手机上给一个"把手"**（`.fd-handle`，只在滚到底时出现）：纯靠"继续往下拨"
       没有任何线索，多数人不会尝试。把手只在到底时冒出来，平时零存在感。
     · **抽屉内部自己滚**（`.fd-scroll` + `overscroll-behavior: contain`）：
       手机上页脚比一屏还高，必须能滚；contain 防止滚到头继续带动页面。

   所有规则都挂在 `#site-footer.footer-drawer` 下（class 由 store.js 加），
   没有这个 class 的页脚（如 embed 模式不挂页脚）不受影响。
   ========================================================================== */

#site-footer.footer-drawer {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  /* 80：高于顶栏(70)。抽屉打开时顶栏必须被蒙版盖住，否则顶部导航会浮在
     蒙版外面，看着像"只盖了一半"。仍低于专属窗口(260)与单卡弹窗(640)。 */
  z-index: 80;
  display: flex;
  flex-direction: column;
  max-height: min(88vh, 760px);
  background: var(--ink);
  border-top: 1px solid var(--ink-4);
  /* 上圆角：抽屉的通用语言（手机上的 bottom sheet 都是圆角上沿），
     方角看起来像"页脚被压扁贴在底下" */
  border-radius: 16px 16px 0 0;
  box-shadow: 0 -22px 48px rgba(0, 0, 0, .30);
  transform: translateY(100%);
  transition: transform .38s cubic-bezier(.22, .61, .36, 1);
  will-change: transform;
  pointer-events: none;              /* 关着的时候彻底不挡点击（它只是移出视野） */
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
#site-footer.footer-drawer.is-open {
  transform: none;
  pointer-events: auto;
}

/* 蒙版：抽屉打开时压住其余全部内容（含顶栏）。点它收起。 */
.fd-mask {
  position: fixed;
  inset: 0;
  z-index: 79;                       /* 比抽屉(80)低一层，比顶栏(70)高一层 */
  background: rgba(0, 0, 0, .46);
  opacity: 0;
  pointer-events: none;              /* 关着时绝不吃点击 */
  transition: opacity .3s ease;
  -webkit-tap-highlight-color: transparent;
}
.fd-mask.is-on {
  opacity: 1;
  pointer-events: auto;
}
/* 白主题下蒙版略淡一点：暖纸底上 46% 的黑会显得脏 */
html[data-theme="light"] .fd-mask {
  background: rgba(40, 34, 20, .38);
}

/* 顶部抓手条：一眼看出"这块能往下按/往上收" */
#site-footer .fd-grab {
  flex: none;
  width: 38px;
  height: 4px;
  margin: 8px auto 0;
  border-radius: 2px;
  background: var(--ink-4);
}

/* 标题条：给出这是"关于本站"，右边给明确的关闭按钮（滚轮/手势之外的第二条路） */
#site-footer .fd-bar {
  flex: none;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 16px 8px;
}
#site-footer .fd-bar b {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .14em;
  color: var(--text-3);
}
#site-footer .fd-x {
  margin-left: auto;
  width: 40px;                       /* 触控底线 40×40 */
  height: 40px;
  display: grid;
  place-items: center;
  appearance: none;
  font: inherit;
  font-size: 15px;
  line-height: 1;
  color: var(--text-2);
  background: transparent;
  border: 0;
  border-radius: 10px;
  cursor: pointer;
}
#site-footer .fd-x:hover { background: var(--ink-3); color: var(--text); }

/* 抽屉内部的滚动区 */
#site-footer .fd-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
/* 页脚本体在抽屉里不再需要外边距（原来它靠 margin 与正文隔开） */
#site-footer .fd-scroll > .footer { margin: 0; }

/* 注：**没有常驻把手**（2026-10-25 试过又撤掉）——
   底部居中的"关于本站"药丸会压在分页条上，等于每页都挡一个控件。
   改成"第一次滚到底给一句 toast 提示"（见 store.js 的 hintOnce）。 */

/* ── 打开 / 收起的方向感（2026-10-25 店主：「这个动画是给页脚的」）─────────
   打开：抽屉从底边升上来（本体 translateY 100% → 0），**内容再依次从下往上冒**
        （抓手 → 标题 → 正文，各差 30ms —— 三块一起动会像"整块被推上来"，没有层次）；
   收起：内容先从上往下滑走（0 → +36px 并淡出），抽屉本体随后落回去。
   两段方向都是"下进上出"，和抽屉本身的运动同向，不会打架。 */
#site-footer.footer-drawer .fd-grab,
#site-footer.footer-drawer .fd-bar,
#site-footer.footer-drawer .fd-scroll {
  transition: transform .46s cubic-bezier(.22, .61, .36, 1), opacity .28s ease;
}
#site-footer.footer-drawer:not(.is-open) .fd-grab { transform: translateY(18px); opacity: 0; }
#site-footer.footer-drawer:not(.is-open) .fd-bar { transform: translateY(26px); opacity: 0; transition-delay: .03s; }
#site-footer.footer-drawer:not(.is-open) .fd-scroll { transform: translateY(36px); opacity: 0; transition-delay: .06s; }

/* 尊重"减少动态效果"：不做位移过渡，直接出现/消失
   🔴 2026-10-25 换成只认站点总闸 `html.mv-off`（原来是 `@media (prefers-reduced-motion)`）。
      店主那台 PC 的 Windows「动画效果」是关着的 —— 系统报 reduce，这条 `transition:none
      !important` 就直接把抽屉的动画整个抹掉，他看到的页脚是"啪地出现 / 啪地消失"。
      站点口径（store.js 的 Motion）默认 `mv-force` 强制开，CSS 必须与它一致：
      系统偏好不再单独决定，只有用户主动关掉动效（`html.mv-off`）才真的停。 */
html.mv-off #site-footer.footer-drawer,
html.mv-off .fd-mask {
  transition: none !important;
}
html.mv-off #site-footer.footer-drawer .fd-grab,
html.mv-off #site-footer.footer-drawer .fd-bar,
html.mv-off #site-footer.footer-drawer .fd-scroll {
  transition: none !important;
  transform: none !important;
  opacity: 1 !important;
}

/* ── 背景滚动锁（2026-10-25 店主：「滑动鼠标滚轮时背景页面也会跟着一起滑」）────
   浮层（卡片弹窗 / 页脚抽屉 / 专属窗口）打开时给 html 挂 `.bg-locked`：
   **html 与 body 一起锁**（只锁 body 在部分情况下仍能把滚动链落到 document）,
   并用 `--bg-sbw` 补偿滚动条宽度 —— 否则一锁滚动条消失，整页横向跳 15px。 */
html.bg-locked,
html.bg-locked body { overflow: hidden; }
html.bg-locked body { padding-right: var(--bg-sbw, 0px); }

/* ==========================================================================
   底部留白（2026-10-25 店主：「现在没了页脚之后，很低地方底部都太低了，
   要抬高一些，不然很难用」）
   --------------------------------------------------------------------------
   页脚以前是文档流的最后一块，自带 40px 上内边距 + 自身高度，天然把内容「托」起来。
   改成 fixed 抽屉后它不再占位 → 正文**最后一块直接贴到屏幕底边**：
     卡库实测余量 = 0px（分页条压在屏幕最下沿），
     手机上那块正好是浏览器/系统手势区，点分页要很小心，观感也像被切了一半。
   这里给 body 补一层底部留白，把它抬起来。

   ① 排除 `html.fs-home`（首页整屏吸附，每屏 100svh，加留白会破坏吸附）；
   ② 手机上给 44（约一个指尖高），桌面 32（鼠标操作不需要那么多）；
   ③ 带 `env(safe-area-inset-bottom)`：iPhone 小黑条区域不再压住内容。
   ========================================================================== */
html:not(.fs-home) body {
  padding-bottom: calc(32px + env(safe-area-inset-bottom, 0px));
}
@media (max-width: 900px), (max-height: 520px) and (pointer: coarse) {
  html:not(.fs-home) body {
    padding-bottom: calc(44px + env(safe-area-inset-bottom, 0px));
  }
}