/* 基础响应式重置 */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* 移动端通用样式 (屏幕宽度 ≤ 768px，覆盖大部分手机) */
@media only screen and (max-width: 768px) {
  /* 1. 全局容器适配 */
  .container, .wrapper, .main {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 10px !important;
    margin: 0 auto !important;
    float: none !important;
  }

  /* 2. 字体适配 (避免文字过大/过小) */
  body {
    font-size: 14px !important;
    line-height: 1.5 !important;
  }
  h1 { font-size: 20px !important; }
  h2 { font-size: 18px !important; }
  h3 { font-size: 16px !important; }
  p, a, span { font-size: 14px !important; }

  /* 3. 图片自适应 (避免图片溢出) */
  img {
    max-width: 100% !important;
    height: auto !important;
    display: block !important;
  }

  /* 4. 导航栏适配 (解决导航错乱) */
  .nav, .menu {
    width: 100% !important;
    float: none !important;
  }
  .nav li, .menu li {
    display: block !important;
    width: 100% !important;
    margin: 5px 0 !important;
    float: none !important;
  }
  .nav a, .menu a {
    display: block !important;
    padding: 8px 5px !important;
    text-align: center !important;
  }

  /* 5. 布局元素重置 (清除浮动、列布局改为单行) */
  .col, .column, .float-left, .float-right {
    float: none !important;
    width: 100% !important;
    margin: 10px 0 !important;
  }

  /* 6. 按钮/表单适配 */
  button, .btn, input, textarea, select {
    width: 100% !important;
    padding: 10px !important;
    margin: 5px 0 !important;
    font-size: 14px !important;
  }

  /* 7. 页脚/头部适配 */
  header, footer {
    padding: 15px 10px !important;
    width: 100% !important;
  }

  /* 8. 隐藏移动端不需要的元素 (可选，根据实际情况调整) */
  .pc-only {
    display: none !important;
  }

  /* 9. 解决溢出问题 (避免横向滚动) */
  html, body {
    overflow-x: hidden !important;
    width: 100% !important;
  }

  /* 10. 间距优化 (调整元素上下间距，避免拥挤) */
  .margin-top, .margin-bottom, .padding-top, .padding-bottom {
    margin-top: 10px !important;
    margin-bottom: 10px !important;
    padding-top: 10px !important;
    padding-bottom: 10px !important;
  }
}

/* 小屏手机适配 (≤ 480px，如iPhone SE) */
@media only screen and (max-width: 480px) {
  body {
    font-size: 13px !important;
  }
  h1 { font-size: 18px !important; }
  h2 { font-size: 16px !important; }
  h3 { font-size: 15px !important; }
  
  /* 进一步缩小间距，适配更小屏幕 */
  .container, .wrapper {
    padding: 0 5px !important;
  }
  .nav a, .menu a {
    padding: 6px 5px !important;
  }
}