/* =========================================================
   CSS 初始化文件  (reset + normalize 混合版)
   Last-updated: 2025-06
   ========================================================= */

/* 1. 盒模型统一 ================================================= */
*,
*::before,
*::after {
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;   /* 移动端点击高亮去除 */
}

/* 2. 清除默认内外边距 & 列表样式 =============================== */
body,
h1, h2, h3, h4, h5, h6,
hr, p, blockquote,
dl, dt, dd, ul, ol, li,
pre,
form, fieldset, legend, button, input, textarea, select,
figure, figcaption, th, td {
  margin: 0;
  padding: 0;
}
ul, ol {
  list-style: none;
}

/* 3. 继承字体、统一行高 ======================================== */
body,
button, input, select, textarea {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji",
               "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  font-size: 16px;
  line-height: 1.5;
  color: #333;
}
/* 等宽字体场景 */
pre, code, kbd, samp {
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
}

/* 4. 链接 & 按钮 ============================================== */
a {
  text-decoration: none;
  color: inherit;
}
button {
  cursor: pointer;
  border: none;
  background: transparent;
}
/* 去除 iOS 圆角 */
input, button, textarea, select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border-radius: 0;
}
/* 去除 Firefox 按钮内边距 */
button::-moz-focus-inner,
input::-moz-focus-inner {
  padding: 0;
  border: 0;
}

/* 5. 图片、媒体自适应 ========================================= */
img,
video, canvas, audio, iframe, embed, object {
  display: block;
  max-width: 100%;
  height: auto;
}
img {
  border-style: none;   /* 去除 IE 链接图片边框 */
}

/* 6. 表格 ====================================================== */
table {
  border-collapse: collapse;
  border-spacing: 0;
}
th {
  font-weight: normal;
  text-align: left;
}

/* 7. 语义化标签补充 =========================================== */
article, aside, details, figcaption, figure,
footer, header, hgroup, main, menu, nav,
section, summary {
  display: block;
}

/* 8. 滚动平滑 / 字体抗锯齿 ==================================== */
html {
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
body {
  -webkit-text-size-adjust: 100%;   /* 禁止 iOS 横屏字体自动放大 */
}

/* 9. 常用辅助类 =============================================== */
.clearfix::after {
  content: "";
  display: table;
  clear: both;
}
.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;
}

/* 10. 1px 边框解决方案（移动端高清屏） ======================== */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx) {
  .hairline,
  .hairline-top,
  .hairline-right,
  .hairline-bottom,
  .hairline-left {
    position: relative;
  }
  .hairline::after,
  .hairline-top::after,
  .hairline-right::after,
  .hairline-bottom::after,
  .hairline-left::after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    pointer-events: none;
    width: 200%;
    height: 200%;
    transform: scale(.5);
    transform-origin: 0 0;
    border: 1px solid currentColor;
  }
  .hairline-top::after    { border-bottom: none; border-left: none; border-right: none; }
  .hairline-right::after  { border-left: none; border-top: none; border-bottom: none; }
  .hairline-bottom::after { border-top: none; border-left: none; border-right: none; }
  .hairline-left::after   { border-right: none; border-top: none; border-bottom: none; }
}