/* =================================================================
   Common Layout - 公共布局样式
   ================================================================= */

/* ==================== 文件说明 ====================
 * 文件名称: common.css
 * 所属层级: layout（布局层）
 * 文件用途: 定义全站通用的布局容器和结构样式
 * 核心功能: 版心容器、页面布局、通用间距系统
 * 依赖关系: 依赖 base/reset.css、base/variables.css
 * 维护说明: 包含全站共用的布局类，修改需考虑全局影响
 * ================================================== */

/* ==================== 目录结构 ====================
 * 1. 主内容区域（Main Content）
 * 2. 版心容器（Container）
 * 3. 通用间距工具类
 * 4. Flexbox布局工具
 * 5. Grid布局工具
 * 6. 响应式布局适配
 * ================================================== */


/* ==================================================================
   1. 主内容区域
   ================================================================== */

.main-content {
    min-height: calc(100vh - 56px);  /* 最小高度 = 视口高度 - 导航栏高度 */
    padding: 24px 24px 48px 24px;    /* 上 右 下 左 内边距 */
}


/* ==================================================================
   2. 版心容器
   ================================================================== */

.container {
    width: 100%;
    max-width: 1400px;               /* 统一最大宽度 */
    margin: 0 auto;                  /* 居中 */
}


/* ==================================================================
   3. 响应式布局适配
   ================================================================== */

/* 小屏桌面: 992px - 1199px */
@media (min-width: 992px) and (max-width: 1199px) {
    .container {
        max-width: 960px;
}
}

/* iPad端: 768px - 991px */
@media (min-width: 768px) and (max-width: 991px) {
    .container {
        max-width: 720px;
    }
    
    .main-content {
        padding: 20px 20px 40px 20px;
    }
}

/* 移动端: 0 - 767px */
@media (max-width: 767px) {
    .main-content {
        padding: 16px 16px 32px 16px;
    }
}