/* css/style.css */

/* ---- 1. 通用全局样式 ---- */
body, html {
    color: white; /* 默认文本颜色 */
    /* height: 100%; */
    margin: 0;
    padding: 0;
    font-family: Arial, sans-serif;
    font-size: 16px;
}

/* ---- 2. 页面布局容器 ---- */
.page-container {
    background-image: url('../media/3_hoshi.jpg');
    background-size: cover;
    background-attachment: fixed;
    min-height: 100vh;
    margin: 0;
    display: flex;
    flex-direction: row;
}

/* 当页面作为嵌入式 iframe 加载时，移除背景 */
.embedded .page-container {
    background: none;
}

/* ---- 3. 主要内容区域 (通常在左侧) ---- */
.main-content {
    flex: 3; /* 占据约3/4的宽度 */
    background-color: rgba(0, 0, 0, 0.5);
    padding: 10px;
    box-sizing: border-box;
}

/* ---- 4. 侧边栏 (通常在右侧) ---- */
.sidebar {
    flex: 1; /* 占据约1/4的宽度 */
    max-width: 330px;
    min-width: 300px;
    padding: 5px;
    box-sizing: border-box;
    border-left: 3px solid #ccc;
    background-color: rgba(0, 0, 0, 0.7);
    display: flex;
    flex-direction: column; /* 内部元素垂直堆叠 */
}

/* ---- 5. 移动端响应式样式 (屏幕宽度 <= 768px) ---- */
@media screen and (max-width: 768px) {
    .page-container {
        flex-direction: column; /* 垂直堆叠主内容和侧边栏 */
    }

    .sidebar {
        order: -1; /* 将侧边栏移动到顶部 */
        width: 100%;
        max-width: 100%;
        border-left: none;
        border-bottom: 3px solid #ccc;
        padding: 15px;
    }

    .main-content {
        flex: 1;
        width: 100%;
        padding: 10px;
    }
}