/* ── ICP 备案页脚（2026-10-20 备案通过后新增）──────────────────────────
   法规依据：《非经营性互联网信息服务备案管理办法》（原信息产业部令第 33 号）
   第十三条 —— 非经营性互联网信息服务提供者应当在其网站开通时在主页底部的
   中央位置标明其备案编号，并链接至工信部备案管理系统。

   设计口径（不是审美，是边界）：
   ① 它是合规声明，不是内容。不能抢「他自己写下的字」那一档亮度，
      但也不能弱到看不见 —— 所以用 50% 白（约 5:1），比 --ink-3(40%) 亮一档。
      理由：这一行是**给管局看的**，读不清等于没标。
   ② 不加卡片、不加背景、不加边框盒子。只用一条极淡下划线示意它是链接。
   ③ 触控区：手机上 12px 的字直接可点太小，用 padding 撑到 ~34px 高。 */

/* ② 定位：**不要**为了「吸底」去动 body 的 display。
   试过 `body{display:flex;flex-direction:column}` + `margin-top:auto` —— 页脚确实贴底了，
   但 main 作为 flex item 宽度被压：实测「此刻」页内容列从 590px 缩到 220px、整块右移。
   那是一次破版，已回退。正确取舍：页脚**跟随内容流**。
   内容不足一屏时它就在内容下方（大多数网站的常态），足够时自然落在文档底部。
   合规要求的是「主页底部中央」，跟随内容流的页脚依然是主页最底部的元素。 */

.icp-foot {
  /* ⚠️ 这两行不是可选项：背景层 `.qbase` 是 `position:fixed; z-index:0` 且**不透明**，
     按 CSS 绘制顺序，定位元素（z-index:0）会盖在所有普通流内容之上。
     页脚是 static，会被整个盖住 —— 实测表现是「elementFromPoint 点得到、截图上完全空白」。
     加 relative + z-index 后它才进入同一层，靠 DOM 顺序压过背景。
     （同理，任何以后要放在 body 末尾的静态内容都要注意这一条。） */
  position: relative;
  z-index: 2;
  margin: 0;
  padding: 22px 20px calc(26px + env(safe-area-inset-bottom, 0px));
  text-align: center;
  font-family: inherit;
  font-size: 12px;
  line-height: 1.7;
  letter-spacing: 0.03em;
  color: rgba(255, 255, 255, 0.5);
  -webkit-tap-highlight-color: transparent;
}

.icp-foot-link {
  display: inline-block;
  padding: 8px 6px;
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  transition: color 0.18s ease, border-color 0.18s ease;
}

.icp-foot-link:hover {
  color: rgba(255, 255, 255, 0.7);
  border-bottom-color: rgba(255, 255, 255, 0.26);
}

/* 键盘可达：这一行是页面上最后一个可聚焦元素，必须有可见焦点环 */
.icp-foot-link:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.4);
  outline-offset: 4px;
  border-bottom-color: transparent;
}

@media (prefers-reduced-motion: reduce) {
  .icp-foot-link { transition: none; }
}