/* 复用全局 CSS 变量，与网站整体风格统一 */
:root {
    --primary-color: #165DFF;
    --neutral-100: #F5F7FA;
    --neutral-200: #E5E6EB;
    --neutral-700: #4E5969;
    --neutral-900: #1D2129;
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.08);
    --spacing-sm: 8px;
    --spacing-md: 12px;
    --spacing-lg: 16px;
}

/* 列表基础样式 - 继承全局重置，统一布局 */
ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

/* 列表项样式 - 贴合网站卡片/容器设计语言 */
li {
    display: flex;
    font-size: 14pt;
    flex: 1;
    margin-bottom: var(--spacing-sm);
    box-sizing: border-box;
    padding: var(--spacing-md) var(--spacing-lg); /* 与全局内边距规范一致 */
    background-color: #fff; /* 统一使用白色底色，贴合网站卡片风格 */
    border-radius: var(--radius-md); /* 复用全局圆角，视觉统一 */
    box-shadow: var(--shadow-sm); /* 轻阴影，与contentBox/contactUsBox保持一致 */
    transition: box-shadow 0.2s ease; /* 统一过渡效果，提升交互感 */
}

/* 列表项 hover 效果 - 延续网站卡片交互风格 */
li:hover {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12); /* 与subShowBox hover阴影一致 */
}

.listTitle {
    display: flex;
    flex: 1;
    align-items: center;
    color: var(--neutral-900); /* 全局主文本色 */
}

.dateTime {
    display: flex;
    flex: 1;
    justify-content: flex-end; /* 替换right，符合flex标准 */
    align-items: center;
    color: var(--neutral-700); /* 全局次要文本色，与info模块一致 */
}

@media (max-width: 768px) {
    li {
    padding: var(--spacing-sm) var(--spacing-md); /* 移动端缩减内边距 */
    font-size: 13pt; /* 轻微缩小字体，适配移动端 */
    }
}

.pagination-container {
    margin-top: var(--spacing-lg);
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-md) 0;
}

.pagination-btn {
    padding: var(--spacing-sm) var(--spacing-md);
    background-color: #fff;
    border: 1px solid var(--neutral-200);
    border-radius: var(--radius-sm);
    color: var(--neutral-900);
    text-decoration: none;
    transition: all 0.2s ease;
    cursor: pointer;
}

.pagination-btn:hover {
    background-color: var(--neutral-100);
    border-color: var(--primary-color);
}

.pagination-btn.active {
    background-color: var(--primary-color);
    color: #fff;
    border-color: var(--primary-color);
}

.pagination-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    background-color: var(--neutral-100);
    border-color: var(--neutral-200);
}

.pagination-info {
    margin: 0 var(--spacing-md);
    color: var(--neutral-700);
    font-size: 13pt;
}

/* 移动端适配 */
@media (max-width: 768px) {
    li {
        padding: var(--spacing-sm) var(--spacing-md); /* 移动端缩减内边距 */
        font-size: 13pt; /* 轻微缩小字体，适配移动端 */
    }

    .pagination-container {
        flex-wrap: wrap;
        gap: var(--spacing-sm);
    }

    .pagination-btn {
        padding: var(--spacing-sm);
        font-size: 12pt;
    }

    .pagination-info {
        font-size: 12pt;
        margin: var(--spacing-sm) 0;
    }
}