/* ------------------- 基础重置 ------------------- */

/* 1. 清除所有元素的内外边距 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box; /* 关键：让元素的宽高包含边框和内边距 */
}

/* 2. 重置 body 样式 */
body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; /* 跨平台无衬线字体 */
    line-height: 1.6; /* 改善文本可读性 */
    color: #333; /* 默认文本颜色 */
    background-color: #fff; /* 默认背景色 */
    -webkit-font-smoothing: antialiased; /* 优化字体渲染（仅 WebKit 浏览器） */
    -moz-osx-font-smoothing: grayscale; /* 优化字体渲染（仅 Firefox） */
}

/* 3. 重置标题元素 */
h1, h2, h3, h4, h5, h6 {
    font-size: 100%; /* 清除默认字体大小 */
    font-weight: normal; /* 清除默认加粗样式 */
}

/* 4. 重置列表元素 */
ul, ol, li {
    list-style: none; /* 清除项目符号/编号 */
}

/* 5. 重置链接样式 */
a {
    text-decoration: none; /* 清除下划线 */
    color: inherit; /* 继承父元素颜色 */
}

/* 6. 重置图片元素 */
img {
    max-width: 100%; /* 确保图片不会超出容器宽度 */
    height: auto; /* 保持图片宽高比 */
    border: none; /* 清除旧浏览器中图片的默认边框 */
}

/* 7. 重置表单元素 */
input, button, select, textarea {
    font-family: inherit; /* 继承父元素字体 */
    font-size: inherit; /* 继承父元素字体大小 */
    color: inherit; /* 继承父元素颜色 */
    background: none; /* 清除默认背景 */
    border: none; /* 清除默认边框 */
    outline: none; /* 清除默认聚焦轮廓（后续可自定义） */
    appearance: none; /* 清除浏览器默认外观（如 select 的下拉箭头） */
    -webkit-appearance: none; /* 兼容 Safari */
    -moz-appearance: none; /* 兼容 Firefox */
}

/* 8. 重置表格元素 */
table {
    border-collapse: collapse; /* 合并表格边框 */
    border-spacing: 0; /* 清除单元格间距 */
}

/* 9. 重置块级引用 */
blockquote, q {
    quotes: none; /* 清除默认引号 */
}

blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}

/* 10. 重置 hr 元素 */
hr {
    border: 0;
    height: 1px;
    background: #ccc; /* 自定义水平线颜色 */
}

/* 11. 重置 abbr 元素 */
abbr[title], acronym[title] {
    border-bottom: 1px dotted; /* 为带有标题的缩写添加点划线 */
    cursor: help; /* 鼠标悬停时显示帮助光标 */
}

/* 12. 清除浮动（现代项目中较少使用，但保留兼容性） */
.clearfix::after {
    content: '';
    display: table;
    clear: both;
}