/* ============================================================
   reset.css - 浏览器默认样式重置
   不同浏览器对HTML元素有不同的默认样式（边距、字体等）
   这个文件把所有默认样式统一归零，让我们从干净的基础开始
   这样我们写的样式在不同浏览器中看起来才会一致
   ============================================================ */

/*
   * 是通配符选择器，选中页面上所有的元素
   *::before 和 *::after 选中所有伪元素
   这里重置了：
   - margin/padding：清除内外边距
   - box-sizing：让宽高计算包含边框和内边距（更容易控制尺寸）
*/
*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/*
   html 和 body 的基础设置
   - 设置默认字体（系统无衬线字体，中文会使用系统默认中文字体）
   - 行高 1.6 让文字有舒适的呼吸空间
   - 文字颜色使用CSS变量（定义在variables.css中）
   - 背景色也使用CSS变量
   - 开启字体平滑，让文字在macOS上看起来更细腻
*/
html {
    font-size: 16px;                          /* 基准字体大小，1rem = 16px */
    -webkit-font-smoothing: antialiased;       /* WebKit浏览器字体平滑 */
    -moz-osx-font-smoothing: grayscale;        /* Firefox macOS字体平滑 */
    scroll-behavior: smooth;                   /* 平滑滚动（点击锚链接时） */
}

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI",
                 "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei",
                 "Helvetica Neue", Helvetica, Arial, sans-serif;
    /* ↑ 字体栈：优先使用系统原生字体，从西文到中文依次回退 */
    line-height: 1.6;
    color: var(--text-primary);               /* 使用CSS变量，便于统一修改 */
    background-color: var(--bg-main);
    min-height: 100vh;                        /* 最小高度撑满整个视口 */
}

/*
   移除列表的默认项目符号
   虽然这个页面可能没有用到列表，但作为reset的一部分保留
*/
ul, ol {
    list-style: none;
}

/*
   链接的默认样式重置
   去掉下划线，颜色继承父元素
   我们在main.css中会为链接按钮单独设置样式
*/
a {
    text-decoration: none;
    color: inherit;
}

/*
   图片设置为块级元素，避免底部出现多余的间隙
   max-width: 100% 确保图片不会超出容器
*/
img {
    display: block;
    max-width: 100%;
    height: auto;
}

/*
   按钮元素重置
   去掉默认的边框和背景，光标变成手型
*/
button {
    border: none;
    background: none;
    cursor: pointer;
    font-family: inherit;
}