/* 基础样式重置 */
    body, h1, p {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }

    /* 自定义颜色变量 (与效果图主题色保持一致) */
    :root {
        --primary-dark: #0f403f; /* 激活 Tab 背景色 */
        --primary-light: #e5e7eb; /* 非激活 Tab 背景色 (Tailwind gray-200) */
        --text-dark: #4b5563; /* 非激活 Tab 字体色 (Tailwind gray-600) */
        --tab-border-radius: 8px; /* Tab 按钮圆角 */
    }

    /* -------------------------------------------
       4:3 宽高比容器 - 关键修改：移除图片卡片的阴影
       ------------------------------------------- */
    .aspect-4-3 {
        padding-top: 75%; /* 3 / 4 * 100% = 75% */
        position: relative;
        border-radius: 0.5rem; 
        overflow: hidden; 
        /* 关键修改：移除阴影 */
        box-shadow: none; 
    }

    .aspect-4-3 img {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    
    /* -------------------------------------------
       Tab 按钮容器 (PC端样式)
       ------------------------------------------- */
    .tab-container {
        display: flex;
        padding: 0; 
        background-color: transparent; 
        border-radius: 0; 
        /* PC端居中对齐 */
        max-width: fit-content; 
        margin-left: auto;
        margin-right: auto;
        margin-bottom: 3rem; 
        gap: 16px; 
    }

    /* -------------------------------------------
       Tab 按钮样式 - 无投影效果
       ------------------------------------------- */
    .sub-tab-button {
        /* 默认样式：非激活状态 */
        background-color: var(--primary-light); /* 浅灰色背景 */
        color: var(--text-dark); /* 深灰色文字 */
        padding: 12px 20px; 
        border-radius: var(--tab-border-radius); 
        font-weight: 600;
        transition: all 0.3s ease-in-out;
        cursor: pointer;
        white-space: nowrap; /* 保持按钮文本不换行 */
        border: none;
        font-size: 16px; 
        box-shadow: none; /* 确保无阴影 */
        flex-shrink: 0; /* 确保按钮在 flex 容器中不被压缩 */
    }

    .sub-tab-button.active {
        /* 激活状态 */
        background-color: var(--primary-dark); /* 深色背景 */
        color: #ffffff; /* 白色文字 */
        box-shadow: none; /* 确保无阴影 */
    }

    /* 静态列表容器：使用 Grid 布局来展示 4 张图片 */
    .static-list-grid {
        display: grid;
        /* PC 端：4 列 */
        grid-template-columns: repeat(4, 1fr); 
        gap: 1.5rem; 
    }
    
    /* -------------------------------------------
       移动端适配 (max-width: 768px)
       ------------------------------------------- */
    @media (max-width: 768px) {
        /* 移动端 Grid 布局：2 列 */
        .static-list-grid {
            grid-template-columns: repeat(2, 1fr); 
            gap: 1rem; 
            padding: 0 16px; 
        }

        /* 移动端 Tab 按钮修复：允许水平滚动 */
        .tab-container {
            /* 移除 PC 端的 max-width: fit-content */
            max-width: none; 
            /* 占据全部宽度 */
            width: 100%; 
            /* 居左对齐 */
            margin-left: 0;
            margin-right: 0;
            /* 允许水平滚动 */
            overflow-x: auto; 
            /* 增加左右 padding 确保滚动条不贴边，同时让按钮两端有空间 */
            padding-left: 16px;
            padding-right: 16px;
            /* 隐藏滚动条 (可选) */
            -ms-overflow-style: none; /* IE and Edge */
            scrollbar-width: none; /* Firefox */
        }
        /* Webkit 隐藏滚动条 */
        .tab-container::-webkit-scrollbar {
            display: none;
        }

        /* 调整按钮间距，在移动端可能需要更紧凑 */
        .tab-container {
            gap: 12px;
        }
    }