.layout-body {
    margin: 0;
    font-family: Arial, sans-serif;
    line-height: 1.6;
    background-color: #f4f4f4;
    color: #333;
    display: flex; /* 让 body 成为 Flex 容器 */
    justify-content: center; /* 水平居中 .page-container */
    align-items: center; /* 垂直居中 .page-container (如果 .page-container height < 100vh) */
    min-height: 100vh; /* 确保 body 至少占满视口高度 */
}

.page-container {
    display: flex; /* 关键：设置为 Flex 容器 */
    flex-direction: column; /* 关键：子元素垂直排列 */
    min-height: 90vh; /* 确保容器至少占据整个视口高度 */
    width: 80vw; /* 视口宽度的 80% */
    min-width: 400px; /* 最小宽度 */
    /* ***** 修正点：确保 align-items 不会阻止子元素拉伸 ***** */
    /* 默认的 align-items: stretch; 会让子元素在交叉轴（水平方向）上拉伸填充父容器 */
    /* 如果这里设置了 align-items: center; 等，就会导致子元素不拉伸 */
    /* 所以，确保这里没有 align-items: center; */
    /* align-items: stretch; /* 显式设置也可以，但默认就是如此 */

    background-color: #e0e0e0; /* 辅助颜色，方便观察 page-container 区域 */
    box-shadow: 0 0 15px rgba(0,0,0,0.1); /* 整体阴影效果 */
}

/* --- 顶部区域样式 --- */
.header {
    background-color: #2c3e50; /* 深蓝色背景 */
    color: #ecf0f1; /* 浅色文字 */
    padding: 20px;
    text-align: center;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

    .header h1 {
        margin-top: 0;
        margin-bottom: 10px;
    }

/* --- 中间内容区域样式 --- */
.main-content {
    flex-grow: 1; /* **关键：让中间内容区域自动占据所有可用空间** */
    padding: 20px;
    background-color: #ffffff; /* 白色背景 */
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
    margin: 0 20px; /* 左右留白 */
    overflow-y: auto; /* 如果内容溢出，允许垂直滚动 */

    display: flex;
    justify-content: center; /* 水平居中其内容（即 .container） */
    align-items: center;
}

    .main-content h2 {
    color: #34495e;
    border-bottom: 2px solid #eee;
    padding-bottom: 10px;
    margin-top: 0;
}

.placeholder-text {
    max-width: 800px; /* 限制文本宽度，提高可读性 */
    margin: 0 auto; /* 文本居中 */
}

/* --- 底部区域样式 --- */
.footer {
    background-color: #34495e; /* 深灰色背景 */
    color: #ecf0f1;
    padding: 15px;
    text-align: center;
    font-size: 0.9em;
    box-shadow: 0 -2px 5px rgba(0,0,0,0.1);
}