/* ================================================================
   1. CSS 变量与全局重置
   ================================================================ */

/* ── 全局 CSS 变量 ── */
:root {
  /* 网格背景图案（水平 + 垂直细线） */
  --grid-image:
    linear-gradient(to right, rgba(0, 0, 0, 0.08) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(0, 0, 0, 0.08) 1px, transparent 1px);
  /* 网格单元尺寸 */
  --grid-size: 25px;
}

/* ── 盒模型统一重置 ── */
*,
*::before,
*::after {
  box-sizing: border-box; /* 统一使用 border-box 盒模型 */
}

/* ── 根元素与 body ── */
html {
  height: 100%; /* 撑满视口高度 */
}

body {
  position: relative; /* 为绝对定位子元素提供参考 */
  height: 100%; /* 撑满视口高度 */
  margin: 0; /* 清除默认外边距 */
  background-color: #ffc000; /* 全局背景色（金黄色） */
  font-family: sans-serif; /* 默认无衬线字体 */
  overflow: hidden; /* 禁止 body 自身滚动（由内部容器控制滚动） */
}