/* ============================================================
 * FISHMQ 手摇相册定制系统 · 网页版
 * css/normalize.css —— 跨浏览器渲染基线归一（阶段三十二）
 *
 * 目标：让「普通 PC 浏览器 / 普通移动浏览器」的渲染结果，与
 *      「微信内置浏览器（已对齐小程序端）」视觉效果完全一致。
 *
 * 做法：仅消除各浏览器 USER-AGENT 默认样式的偏差（默认边距、
 *      原生表单外观、点击高亮、长按菜单、字体平滑、焦点蓝框、
 *      选区配色、行高基准等），不改动任何设计 token（色值 /
 *      圆角 / 间距 / 字体栈均为微信端既定值，见 base.css:root）。
 *
 * 加载顺序：index.html 中须位于 base.css 之前，保证「重置」优先于
 *      组件样式，而组件类（更高特异性）仍完整覆盖本文件的基础值。
 * ============================================================ */

/* ---------- 1. 通用盒模型（统一 content-box → border-box） ---------- */
*, *::before, *::after { box-sizing: border-box; }

/* ---------- 2. 文档级基线 ---------- */
html {
  /* 禁止移动端浏览器对字号做自动缩放（iOS Safari / Android Chrome） */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
  /* 去除 iOS 点击目标时的灰色高亮块 */
  -webkit-tap-highlight-color: transparent;
  /* 统一行高基准，避免各浏览器 UA 默认行高差异导致纵向节奏错位 */
  line-height: 1.5;
}

body {
  margin: 0;
  padding: 0;
  min-height: 100%;
  font-family: var(--font);
  line-height: 1.5;
  color: var(--text);
  background: var(--bg);
  /* 字型渲染统一：亚像素抗锯齿（与微信端一致），Firefox 用 grayscale */
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-smoothing: antialiased;
  /* 移动端原生交互抑制 */
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
  text-size-adjust: 100%;
  /* 安全兜底：杜绝任何浏览器下的意外横向滚动条（与微信端无横滚一致） */
  overflow-x: hidden;
}

/* ---------- 3. 块级元素 UA 默认边距清零（标题/段落/列表/表单/媒体） ---------- */
h1, h2, h3, h4, h5, h6,
p, figure, blockquote, dl, dd, dt,
fieldset, legend, pre, code, kbd, samp,
hr, address, menu, details, summary {
  margin: 0;
  padding: 0;
}
h1, h2, h3, h4, h5, h6 {
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
}
ul, ol, menu { margin: 0; padding: 0; list-style: none; }
li { list-style: none; }

/* 行内媒体：去除 inline 元素底部间隙，约束最大宽度防溢出 */
img, svg, video, canvas, picture, iframe {
  display: block;
  max-width: 100%;
  height: auto;
}

/* 表格：统一边框模型 */
table { border-collapse: collapse; border-spacing: 0; }
caption, th, td { text-align: inherit; font-weight: inherit; }

/* 分隔线：去除原生 3D 边框，改用品牌分割色 */
hr { border: 0; height: 1px; background: var(--line, #e3dbd0); margin: 0; }

/* 引用：去除引号装饰 */
blockquote, q { quotes: none; }
blockquote::before, blockquote::after,
q::before, q::after { content: ""; }

/* 上下标：去除基线抖动 */
sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; }

/* 链接：继承文字色，去除下划线（与微信端一致） */
a {
  color: inherit;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}
a:focus, a:active { outline: none; }

/* ---------- 4. 表单控件原生外观清零（与微信端一致，去除浏览器原生 chrome） ---------- */
/* 仅作用于「文本类」控件；range/checkbox/radio/file 保留原生渲染（见下） */
button,
input[type="text"], input[type="search"], input[type="email"],
input[type="tel"], input[type="password"], input[type="url"],
input[type="number"], input[type="datetime"], input[type="date"],
select, textarea {
  margin: 0;
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
  color: inherit;
  /* 关键：剥离 Safari/Chrome/Edge 的原生按钮底色、内阴影、圆角 */
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
  border-radius: 0;
  outline: none;
}
/* 文本类控件恢复可选中（body 已全局禁选中，这里放开输入区） */
input, textarea { -webkit-user-select: text; user-select: text; }

button {
  border: 0;
  padding: 0;
  background: transparent;
  cursor: pointer;
}
/* 去除 Firefox 原生按钮焦点虚框 */
button::-moz-focus-inner { border: 0; padding: 0; }
textarea { resize: none; }

/* 保留原生外观的控件（由组件自身样式着色，勿动） */
input[type="range"],
input[type="checkbox"],
input[type="radio"],
input[type="file"],
input[type="color"] {
  -webkit-appearance: auto;
  appearance: auto;
  -webkit-tap-highlight-color: transparent;
}

/* ---------- 5. 焦点态统一：去除各浏览器默认蓝框，交互动效交由组件自身 :focus/:active 表现 ---------- */
:focus { outline: none; }
:focus-visible { outline: none; }
:focus-visible::-moz-focus-inner { border: 0; }

/* ---------- 6. 全局移动端原生交互抑制（点击高亮 / 长按菜单） ---------- */
* {
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
}

/* ---------- 7. 文本选区配色（品牌暖色，替代系统蓝，与微信端一致） ---------- */
::selection { background: rgba(197, 151, 107, 0.22); color: var(--text); }
::-moz-selection { background: rgba(197, 151, 107, 0.22); color: var(--text); }

/* ---------- 8. 滚动容器：Firefox 细滚动条，避免 PC 端默认滚动条占位导致内容宽度偏差 ---------- */
.fmq-body, .fmq-scroll, [data-scroll],
.fmq-modal, .textarea-wrapper,
.laser-font-grid, .laser-symbol-grid {
  scrollbar-width: thin;
  scrollbar-color: rgba(120, 100, 80, 0.25) transparent;
}
.fmq-body::-webkit-scrollbar,
.laser-font-grid::-webkit-scrollbar,
.laser-symbol-grid::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
.fmq-body::-webkit-scrollbar-thumb,
.laser-font-grid::-webkit-scrollbar-thumb,
.laser-symbol-grid::-webkit-scrollbar-thumb {
  background: rgba(120, 100, 80, 0.22);
  border-radius: 3px;
}
.fmq-body::-webkit-scrollbar-track,
.laser-font-grid::-webkit-scrollbar-track,
.laser-symbol-grid::-webkit-scrollbar-track {
  background: transparent;
}