/* --- 基本重置和全局样式 --- */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; /* 使用系统默认字体，更干净 */
    line-height: 1.6;
    background-color: #f8f9fa; /* 淡灰色背景 */
    color: #343a40; /* 深灰色文字 */
    padding: 20px; /* 给页面边缘留出一些空间 */
}

/* --- 容器样式 --- */
.container {
    max-width: 800px; /* 限制内容最大宽度，提高可读性 */
    margin: 40px auto; /* 上下边距 40px，左右自动（实现居中） */
    background-color: #ffffff; /* 内容区域白色背景 */
    padding: 30px 40px; /* 内边距 */
    border-radius: 8px; /* 轻微的圆角 */
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05); /* 非常细微的阴影 */
}

/* --- 头部样式 --- */
header h1 {
    text-align: center;
    margin-bottom: 30px;
    color: #212529; /* 标题颜色更深一点 */
    font-weight: 600; /* 字体稍粗 */
}

/* --- 文章列表样式 --- */
.post-list {
    list-style: none; /* 移除列表默认的点 */
}

.post-list li {
    padding: 15px 0; /* 上下内边距 */
    border-bottom: 1px solid #e9ecef; /* 文章间的分隔线 */
    display: flex; /* 使用 Flexbox 布局 */
    justify-content: space-between; /* 标题和日期分布在两端 */
    align-items: center; /* 垂直居中 */
    flex-wrap: wrap; /* 如果空间不足，允许换行 */
}

.post-list li:last-child {
    border-bottom: none; /* 最后一个列表项不需要分隔线 */
}

.post-list a {
    text-decoration: none; /* 移除链接下划线 */
    color: #007bff; /* 蓝色链接 */
    font-size: 1.1em; /* 标题字体稍大 */
    transition: color 0.2s ease-in-out; /* 颜色变化过渡效果 */
    margin-right: 15px; /* 与日期之间留出一些距离 */
}

.post-list a:hover {
    color: #0056b3; /* 鼠标悬停时链接颜色变深 */
    text-decoration: underline; /* 鼠标悬停时显示下划线 */
}

.post-date {
    font-size: 0.9em;
    color: #6c757d; /* 日期使用灰色 */
    white-space: nowrap; /* 防止日期换行 */
    margin-top: 5px; /* 在小屏幕换行时，与标题保持一点距离 */
}


/* --- 页脚样式 --- */
footer {
    text-align: center;
    margin-top: 40px;
    padding-top: 20px;
    border-top: 1px solid #e9ecef; /* 页脚上方的分隔线 */
    font-size: 0.9em;
    color: #6c757d; /* 页脚文字颜色 */
}

/* --- 响应式调整 (可选，针对小屏幕) --- */
@media (max-width: 600px) {
    .container {
        margin: 20px auto;
        padding: 20px;
    }

    header h1 {
        font-size: 1.8em;
        margin-bottom: 20px;
    }

    .post-list li {
       flex-direction: column; /* 在小屏幕上，标题和日期垂直排列 */
       align-items: flex-start; /* 左对齐 */
    }

     .post-list a {
        margin-right: 0; /* 移除右边距 */
        margin-bottom: 5px; /* 在标题和日期之间添加一点间距 */
    }
}