/**
 * 布局样式（Grid、Flexbox）
 */

/* 容器 */
.mdc-container {
    width: 100%;
    padding-left: 16px;
    padding-right: 16px;
    margin-left: auto;
    margin-right: auto;
}

/* 响应式容器宽度 */
@media (min-width: 576px) {
    .mdc-container {
        max-width: 540px;
    }
}

@media (min-width: 768px) {
    .mdc-container {
        max-width: 720px;
    }
}

@media (min-width: 992px) {
    .mdc-container {
        max-width: 960px;
    }
}

@media (min-width: 1200px) {
    .mdc-container {
        max-width: 1140px;
    }
}

@media (min-width: 1400px) {
    .mdc-container {
        max-width: 1320px;
    }
}

/* Grid 系统 */
.mdc-row {
    display: flex;
    flex-wrap: wrap;
    margin-left: -15px;
    margin-right: -15px;
}

.mdc-col {
    flex: 1;
    padding-left: 15px;
    padding-right: 15px;
}

/* Flexbox 工具类 */
.mdc-flex {
    display: flex;
}

.mdc-flex-column {
    flex-direction: column;
}

.mdc-flex-row {
    flex-direction: row;
}

.mdc-flex-wrap {
    flex-wrap: wrap;
}

.mdc-justify-start {
    justify-content: flex-start;
}

.mdc-justify-center {
    justify-content: center;
}

.mdc-justify-end {
    justify-content: flex-end;
}

.mdc-justify-between {
    justify-content: space-between;
}

.mdc-align-start {
    align-items: flex-start;
}

.mdc-align-center {
    align-items: center;
}

.mdc-align-end {
    align-items: flex-end;
}

/* 间距工具类 */
.mdc-mt-1 { margin-top: 8px; }
.mdc-mt-2 { margin-top: 16px; }
.mdc-mt-3 { margin-top: 24px; }
.mdc-mt-4 { margin-top: 32px; }

.mdc-mb-1 { margin-bottom: 8px; }
.mdc-mb-2 { margin-bottom: 16px; }
.mdc-mb-3 { margin-bottom: 24px; }
.mdc-mb-4 { margin-bottom: 32px; }

.mdc-p-1 { padding: 8px; }
.mdc-p-2 { padding: 16px; }
.mdc-p-3 { padding: 24px; }
.mdc-p-4 { padding: 32px; }