/**
 * ============================================================================
 * 乾坤堂 · 全系通用三端响应式极美排版与出厂安全机箱 (SEC-13 / SEC-18 / SEC-19)
 * 文件路径: css/qkt_chassis.css
 * 【协同警示】堂主专属底层机箱规范，程序员请勿随意删改或覆写！
 * ============================================================================
 */

/* 1. 全端盒模型与防横向晃动防溢出防御 */
* {
  box-sizing: border-box !important;
}

*, *::before, *::after {
  box-sizing: border-box !important;
}

html, body {
  overflow-x: hidden !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  padding-top: env(safe-area-inset-top);
  padding-bottom: env(safe-area-inset-bottom);
}

/* 2. 🖥️ 电脑 PC 端居中典仪案台安全箱 (max-width: 1080px)，严禁带鱼屏拉伸 */
.wrap, main, .container, .main-container, .app-container {
  max-width: 1080px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

/* 3. 💻 平板端 (768px ~ 1024px) 优雅双列对称平衡与两翼呼吸留白 */
@media screen and (min-width: 768px) and (max-width: 1024px) {
  body {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
  main, .wrap, .container, .app-container, .main-container {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
  .pillars-container {
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 10px !important;
  }
}

/* 4. 📱 手机端 (360px ~ 640px) 黄金首屏、触控靶区与四柱横向抗折断排版 */
@media screen and (max-width: 640px) {
  .pillars-container {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 6px !important;
  }
  .btn-act, button, .btn {
    min-height: 44px;
  }
  body, p, span, div, td, th {
    /* SEC-18 移动端字阶底线防御，避免 <= 10px 显微镜字 */
    font-size: max(11px, 1em);
  }
}

/* 5. 📱 极窄手机屏 (<= 375px iPhone SE / Compact Phone) 容错防御 */
@media screen and (max-width: 375px) {
  body {
    padding-left: 4px !important;
    padding-right: 4px !important;
  }
  .pillars-container {
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 4px !important;
  }
}
