/* ============================================================
   base.css —— 全局基础样式 / reset / 排版 / 滚动条
   ============================================================
   【文件职责】
   本文件负责"打地基"——把浏览器默认样式抹平（reset）、给整个页面设置
   字体/字号/背景/行高、统一所有元素的盒模型，并定制滚动条、焦点轮廓、
   文字选中颜色等"页面级"细节。

   【在项目中的角色】
   - 它是第一个被加载的基础样式表（在 tokens.css 之后）。
   - 它的样式作用于"全站所有页面"——封面、地图、详情面板都受它影响。
   - 同时定义了几个工具类（u-sr-only / u-hide）和主舞台容器（.stage）。

   【阅读提示】
   - "*" 是通用选择器，代表"所有 HTML 元素"。
   - "html" 作用于整个文档根；"body" 作用于页面主体。
   - ::before / ::after 是"伪元素"，可以在元素前后插入装饰内容。
   ============================================================ */

/* —— CSS Reset（样式重置）——
   把所有元素的盒模型统一成 border-box：
   border-box 的意思是"宽度包含 padding 和 border"，
   这样设宽度时不用再做加减法，方便排版。 */
*, *::before, *::after { box-sizing: border-box; }

/* 抹掉所有元素的默认外边距/内边距，从一张白纸开始 */
* { margin: 0; padding: 0; }

/* html 根元素：阻止手机横屏时字体被自动放大；Tab 缩进设为 4 个空格宽 */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; tab-size: 4; }

/* —— body：整个页面的"基底" ——
   定义全站默认字体、字号、行高、颜色、背景。
   所有未单独指定字体的子元素都会继承这里的设置。 */
body {
  min-height: 100dvh;                 /* dvh=动态视口高，手机浏览器地址栏伸缩时也能填满 */
  font-family: var(--font-serif);     /* 默认宋体类（来自 tokens.css） */
  font-size: var(--fs-body);          /* 默认正文字号 */
  line-height: 1.78;                  /* 行高 1.78 倍：松散，便于阅读长文 */
  color: var(--ink);                  /* 文字主色：浓墨 */
  background: var(--paper);           /* 背景色：宣纸底 */
  -webkit-font-smoothing: antialiased;     /* 苹果系统：字体抗锯齿 */
  -moz-osx-font-smoothing: grayscale;      /* 火狐 Mac：灰度抗锯齿 */
  text-rendering: optimizeLegibility;      /* 优先保证文字清晰 */
  overscroll-behavior: none;               /* 拖到边缘时不允许继续滚动（避免误触发刷新） */
  font-feature-settings: "palt" 1;         /* 启用日中汉字紧凑排版（"palt"=比例紧凑） */
}

/* —— 媒体元素：图片/视频/画布默认铺满父容器，且不会有底部莫名间隙 —— */
img, picture, video, canvas, svg { display: block; max-width: 100%; }
/* —— 表单控件：继承页面字体，避免控件自带丑字体 —— */
input, button, textarea, select { font: inherit; color: inherit; }
/* —— 按钮：去掉默认背景/边框，鼠标变手型 —— */
button { background: none; border: none; cursor: pointer; }
/* —— 列表：去掉默认的小圆点/序号 —— */
ul, ol { list-style: none; }
/* —— 链接：去掉蓝色和下划线，颜色继承父元素 —— */
a { color: inherit; text-decoration: none; }

/* —— 全局宣纸底纹（SVG 噪点，极淡） ——
   通过 body::before 在 body 前面插入一层"伪元素"作为整页背景纹理。
   这层是 inline SVG（直接写在 URL 里的 SVG 图），用 fractalNoise 滤镜
   生成噪点，模拟宣纸纤维感。透明度只有 0.045，几乎看不见，但能让纯色背景有质感。
   position:fixed + inset:0 让它固定铺满整个视口，不随页面滚动。 */
body::before {
  content: "";                          /* 伪元素必须有 content 才会显示，空字符串即可 */
  position: fixed;                      /* 固定定位：不随页面滚动 */
  inset: 0;                             /* inset:0 = top/right/bottom/left 全 0，铺满 */
  z-index: 0;                           /* 层级最低，被正文压在下面 */
  pointer-events: none;                 /* 不拦截鼠标事件，让点击穿透到下层 */
  opacity: 0.045;                       /* 透明度 4.5%，极淡 */
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' seed='3'/><feColorMatrix values='0 0 0 0 0.08  0 0 0 0 0.07  0 0 0 0 0.06  0 0 0 1 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  background-size: 240px 240px;         /* 纹理单元大小 */
  mix-blend-mode: multiply;             /* 混合模式：正片叠底，让纹理融入背景 */
}

/* —— 加载中禁止滚动 ——
   JS 在加载阶段给 body 加 is-loading 类，加载完移除；
   is-locked 类用于详情面板打开时锁定背景滚动。
   overflow:hidden 让 body 不能滚动。 */
body.is-loading { overflow: hidden; }
body.is-locked { overflow: hidden; }

/* —— 屏幕阅读器专用（无障碍工具类） ——
   把元素缩成 1×1 像素并隐藏到屏幕外，视力正常的用户看不见，
   但读屏软件能读到内容，方便视障用户了解页面结构。 */
.u-sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);    /* 裁剪掉元素的可视区域 */
  white-space: nowrap;
  border: 0;
}
/* —— 完全隐藏工具类：用 !important 强制覆盖任何其他样式 —— */
.u-hide { display: none !important; }

/* —— 焦点轮廓（无障碍） ——
   :focus 是任何获得焦点状态；:focus-visible 只在"键盘 Tab"获得焦点时才显示，
   鼠标点击则不显示——这样既照顾键盘用户，又不影响鼠标用户的视觉。 */
:focus { outline: none; }                /* 先把默认蓝框去掉 */
:focus-visible {                         /* 仅键盘 Tab 时显示朱砂色焦点框 */
  outline: 2px solid var(--cinnabar);    /* 2 像素朱砂色外框 */
  outline-offset: 3px;                   /* 外框离元素本体 3px 距离 */
  border-radius: var(--r-sm);            /* 焦点框也轻微圆角，呼应整体风格 */
}

/* —— 文字选中颜色 ——
   鼠标拖选文字时，背景变朱砂红、文字变宣纸白。 */
::selection { background: var(--cinnabar); color: var(--paper); }

/* —— 滚动条（webkit 内核：Chrome / Edge / Safari） ——
   滚动条由"轨道(track)"+"滑块(thumb)"组成，这里把轨道做成透明，
   滑块做成宣纸暗色，更贴合古风。 */
::-webkit-scrollbar { width: 8px; height: 8px; }      /* 整体宽/高 8px */
::-webkit-scrollbar-track { background: transparent; } /* 轨道透明 */
::-webkit-scrollbar-thumb {
  background: var(--paper-3);                          /* 滑块颜色：宣纸描边色 */
  border-radius: 4px;                                  /* 圆角滑块 */
  border: 2px solid transparent;                       /* 加 2px 透明边距，让滑块不贴边 */
  background-clip: padding-box;                        /* 让背景色只画到 padding 区，留出边距 */
}
::-webkit-scrollbar-thumb:hover { background: var(--ink-3); background-clip: padding-box; } /* 悬停变深 */

/* —— firefox 浏览器滚动条 ——
   Firefox 用另一套属性控制滚动条，与 webkit 不通用，需单独写。 */
* { scrollbar-width: thin; scrollbar-color: var(--paper-3) transparent; } /* 细滚动条，颜色同上 */

/* —— 标题排版 ——
   统一所有级别的标题：粗体、轻微字距、紧凑行高、墨色文字。
   字号按级别递减（h1 最大），尺寸来自 tokens.css 的字号令牌。 */
h1, h2, h3, h4 {
  font-weight: 700;             /* 粗体 */
  letter-spacing: 0.04em;       /* 字距微微放大，让标题更稳重 */
  line-height: 1.25;            /* 行高比正文紧，标题不需要松散 */
  color: var(--ink);            /* 浓墨色 */
}
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }

/* —— 段落默认上下间距 ——
   段落底部留 sp-4(16px) 间距；最后一段去底距避免整块底部空一行。 */
p { margin: 0 0 var(--sp-4); }
p:last-child { margin-bottom: 0; }

/* —— 主舞台容器 .stage ——
   "舞台"是地图/HUD/面板的根容器，占满一整屏。
   初始 opacity:0 且轻微缩小 0.985，配合 transition 实现"淡入+轻微放大"入场动画。
   JS 在适当时机给它加 .is-active 类，触发动画播放。 */
.stage {
  position: relative;          /* 相对定位，作为子元素的定位参照 */
  width: 100%;
  height: 100dvh;              /* 占满视口高 */
  overflow: hidden;            /* 溢出部分隐藏（防止子元素溢出影响滚动） */
  z-index: 1;                  /* 比宣纸底纹(0)高一层 */
  opacity: 0;                  /* 初始透明 */
  transform: scale(0.985);     /* 初始轻微缩小 */
  transition: opacity var(--t-slow) var(--ease-silk),
              transform var(--t-slow) var(--ease-silk); /* 透明度和缩放同步过渡 */
}
/* JS 给舞台加 .is-active 后，恢复到完全显示、无变形，触发入场动画 */
.stage.is-active {
  opacity: 1;
  transform: none;
}

/* —— 打印样式 ——
   @media print 表示"打印时"才生效。打印时不需要交互组件，
   只输出详情面板的内容；并把背景设白，关掉宣纸底纹节省墨水。 */
@media print {
  .loader, .cover, .hud, #map { display: none !important; } /* 隐藏交互层 */
  .panel, .panel__sheet {
    position: static !important;     /* 取消抽屉式定位，让面板内容流入正常文档流 */
    transform: none !important;      /* 取消位移 */
    box-shadow: none !important;     /* 去阴影省墨 */
  }
  body { background: #fff; }         /* 背景改纯白 */
  body::before { display: none; }    /* 去掉宣纸底纹 */
}