/* 通用样式重置：移除默认的 margin、padding，并启用 border-box 盒模型 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    /* 统一盒模型，padding 和 border 包含在 width/height 内 */
}

/* 页面主体基础设置 */
body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    line-height: 1.6;
    /* 增加行距，提升可读性 */
    color: #333;
    /* 主文字颜色 */
    background-color: #f5f5f5;
    /* 背景色 */
    
    /* ✅ 响应式宽度设置 */
    width: 100%;
    /* 占据 90% 屏幕宽度 */
    /*max-width: none;
    /* 大屏最多 1200px（更宽） */

    /* max-width: 900px; */
    /* 页面最大宽度，居中显示 */
    margin: 0 auto;
    /* 水平居中 */
    padding: 10px;
    /* 页面四周内边距 */


    
}


/* 平板端 */
@media (max-width: 1024px) {
    body {
        width: 95%;
        /* 平板占 95% 宽度 */
        max-width: none;
        /* 取消宽度限制 */
    }
}






/* ==========================================这是 CSS 注释===================================================== */

/* 主体区域样式 */
main {
    background: white;
    /* 主内容区域背景为白色 */
    padding: 2rem;
    /* 内边距 */
    border-radius: 8px;
    /* 圆角效果 */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    /* 阴影效果，让内容浮在背景上 */

    /* **将宽度和居中限制转移到 main 元素** */
    width: 100%;
    max-width: 1200px;
    /* 设置最大宽度 */
    margin: 0 auto;
    padding: 20px;
    /* 原 body 的 padding: 20px 转移到 main 的上下内边距 */

}

/* 粗体文字 */
strong 
{
    font-weight: 700;
    /* 加粗 */
    color: #2c3e50;
    /* 深色文字 */
}

/* 斜体文字 */
em 
{
    font-style: italic;
    /* 斜体 */
    color: #555;
    /* 灰色文字 */
}

/* ==========================================这是 CSS 注释===================================================== */

/* ========== 首页文章列表样式 ========== */

/* 列表容器 */
.post-list 
{
    list-style: none;
    /* 移除默认列表圆点 */
}

/* 每个文章条目 */
.post-list li 
{
    margin-bottom: 2rem;
    /* 条目之间的间距 */
    padding-bottom: 2rem;
    /* 条目内部底部间距 */
    border-bottom: 1px solid #eee;
    /* 分割线 */
}

/* 文章标题 */
.post-list h2 
{
    margin-bottom: 0.5rem;
    /* 标题与正文间距 */
}

.post-list h2 a 
{
    color: #2c3e50;
    /* 链接颜色 */
    text-decoration: none;
    /* 去掉下划线 */
}

.post-list h2 a:hover 
{
    color: #3498db;
    /* 鼠标悬停高亮 */
}

/* 文章日期 */
.post-list h2 small.post-date 
{
    font-size: 0.7em;
    /* 小字号 */
    color: #999;
    /* 浅灰色 */
    margin-left: 0.3rem;
    /* 与标题间距 */
}

/* 文章摘要：限制显示三行，并显示省略号 */
.post-list .post-excerpt 
{
    display: -webkit-box;
    /* 多行显示 */
    -webkit-box-orient: vertical;
    /* 垂直排列 */
    -webkit-line-clamp: 3;
    /* 限制3行 */
    overflow: hidden;
    /* 超出隐藏 */
    text-overflow: ellipsis;
    /* 省略号 */
    line-height: 1.6;
    /* 行高 */
    max-height: 4.8em;
    /* 最大高度 = 3行 x 1.6行高 */
    word-break: break-word;
    /* 长单词换行 */
}

/* ==========================================这是 CSS 注释===================================================== */

/* ========== 响应式设计（移动端适配） ========== */
@media (max-width: 768px) {

    /* 页面整体 */
    body {
        padding: 10px;
        /* 缩小内边距，提高移动端可视面积 */
        font-size: 16px;
        /* 增大字体，提高可读性 */
    }

    /* 页眉 */
    header {
        padding: 1.5rem 1rem;
        /* 缩小页眉内边距 */
    }

    /* 主内容区域 */
    main {
        padding: 1rem;
        /* 减小内容内边距 */
    }

    /* KaTeX 内联公式 */
    .katex {
        font-size: 1em;
        /* 保持默认字号 */
    }

    /* KaTeX 块级公式 */
    .katex-display {
        font-size: 0.95em;
        /* 略微缩小，适配小屏幕 */
    }

    /* 代码块 */
    pre {
        font-size: 0.85em;
        /* 缩小字体，避免超出屏幕宽度 */
    }
}