/* 通用CSS初始化文件 - reset.css */
/* 1. 基础重置：消除浏览器默认样式差异 */
* {
  margin: 0;
  padding: 0;
  /* 盒模型统一：width/height 包含 padding 和 border（开发更直观） */
  box-sizing: border-box;
}

/* 2. HTML5 语义化标签重置（确保旧浏览器也能识别为块级元素） */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
  display: block;
}

/* 3. 基础元素样式重置 */
body {
  /* 字体统一：使用系统无衬线字体，跨平台兼容，显示更清晰 */
  font-family: Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, 
               "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", 
               "Noto Color Emoji";
  /* 基础字体大小：16px 是浏览器默认值，方便后续用 rem 布局 */
  font-size: 16px;
  /* 行高：1.5 适合阅读，避免文字拥挤 */
  line-height: 1.5;
  /* 文本颜色：深灰色（比纯黑更柔和，保护视力） */
  color: #333;
  /* 背景色：默认白色 */
  background-color: #fff;
  /* 消除文字选中时的默认蓝色背景（可选，根据需求调整） */
  -webkit-tap-highlight-color: transparent;
}

/* 4. 列表元素：清除默认圆点/数字 */
ul, ol, li {
  list-style: none;
}

/* 5. 链接元素：统一默认样式 */
a {
  /* 去除下划线 */
  text-decoration: none;
  /* 链接颜色：深蓝色（符合用户认知） */
  color: #0066cc;
  /* hover 时下划线（提升交互体验） */
  transition: text-decoration 0.2s ease;
}

a:hover {
  text-decoration: none;
}

/* 可选：如果需要禁用链接默认样式，可添加以下 */
/* a:link, a:visited, a:active {
  color: #333;
  text-decoration: none;
} */

/* 6. 图片元素：响应式默认设置 */
img {
  /* 最大宽度不超过父容器，避免溢出 */
  max-width: 100%;
  /* 高度自动适应，保持宽高比 */
  height: auto;
  /* 去除图片底部默认空白（解决 inline 元素的对齐问题） */
  vertical-align: middle;
  /* 可选：图片加载失败时显示默认占位色 */
  object-fit: cover;
}

/* 7. 表单元素：统一样式 */
input, button, select, textarea {
  /* 继承父元素字体，避免表单字体不一致 */
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
  /* 去除默认边框（后续可自定义） */
  border: 1px solid #ddd;
  /* 边框圆角：轻微圆角更美观（可根据需求调整） */
  border-radius: 4px;
  /* 内边距：统一表单元素的点击区域 */
  padding: 8px 12px;
  /* 背景色：默认白色 */
  background-color: #fff;
  /* 去除表单元素默认的轮廓线（后续可自定义 focus 样式） */
  outline: none;
}

/* 表单元素聚焦样式（提升可访问性） */
input:focus, button:focus, select:focus, textarea:focus {
  border-color: #0066cc;
  /* 可选：添加阴影效果 */
  box-shadow: 0 0 0 2px rgba(0, 102, 204, 0.1);
}

/* 按钮元素：统一样式 */
button {
  /* 鼠标悬浮时显示手型，提示可点击 */
  cursor: pointer;
  /* 去除按钮默认的背景色和边框（后续可自定义） */
  background-color: #0066cc;
  color: #fff;
  border: none;
  transition: background-color 0.2s ease;
}

button:hover {
  background-color: #0052aa;
}

/* 可选：禁用状态的按钮样式 */
button:disabled {
  background-color: #ccc;
  cursor: not-allowed;
}

/* 8. 表格元素：统一边框样式 */
table {
  /* 边框合并：避免单元格之间出现双边框 */
  border-collapse: collapse;
  /* 宽度：默认100%（可根据需求调整） */
  width: 100%;
}

th, td {
  border: 1px solid #ddd;
  padding: 12px;
  text-align: left;
}

/* 表头背景色：区分表头和内容 */
th {
  background-color: #f5f5f5;
}

/* 9. 清除浮动（兼容旧代码，现代开发可使用 flex/grid 替代） */
.clearfix::after {
  content: "";
  display: block;
  clear: both;
}

/* 10. 可选：响应式相关（针对移动设备） */
@media (max-width: 768px) {
  /* 移动端表单元素宽度100% */
  input, button, select, textarea {
    width: 100%;
    margin-bottom: 10px;
  }
}