/* ============================================================
   Markdown 全局样式 (markdown.css)
   ============================================================ */

/* ==========================
   1️⃣ 通用重置与基础样式
   --------------------------
   🔹 重置 margin 和 padding，避免浏览器默认样式影响排版
   🔹 使用 border-box 盒模型，让 padding 和 border 不影响元素总宽高
   ========================== */
* {
    margin: 0;
    /* 移除所有元素默认外边距 */
    padding: 0;
    /* 移除所有元素默认内边距 */
    box-sizing: border-box;
    /* 盒模型为 border-box，padding/border 包含在宽高内 */
}

/* 页面主体基础样式 */
body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI",
        Roboto, "Helvetica Neue", Arial, sans-serif;
    /* 现代系统字体栈，跨平台显示一致 */

    line-height: 1.6;
    /* 提高可读性，段落间行距舒适 */
    color: #333;
    /* 主体文字颜色 */
    background-color: #fdfdfd;
    /* 页面背景颜色，浅色背景方便阅读 */

    /* ✅ 添加这两行 */
        width: 90%;
        max-width: 1200px;

    /* max-width: 900px; */
    /* 页面最大宽度，防止大屏阅读太宽 */

    margin: 0 auto;
    /* 居中显示页面内容 */
    padding: 20px;
    /* 页面四周内边距 */
}

/* ==========================
   2️⃣ 标题样式 h1~h6
   --------------------------
   🔹 设置不同级别标题字号、行距和颜色
   🔹 保证标题层级视觉清晰
   ========================== */
h1,
h2,
h3,
h4,
h5,
h6 {
    font-weight: 700;
    /* 加粗标题 */
    line-height: 1.3;
    /* 控制行高，让标题紧凑 */
    margin: 1.5em 0 0.5em 0;
    /* 上下间距，分隔段落 */
    color: #2c3e50;
    /* 深色标题，和正文区分 */
}

/* 各级标题单独字号 */
h1 {
    font-size: 2.2rem;
    /* 一级标题最大，突出文章主题 */
}

h2 {
    font-size: 1.8rem;
    /* 二级标题 */
}

h3 {
    font-size: 1.5rem;
    /* 三级标题 */
}

h4 {
    font-size: 1.2rem;
    /* 四级标题 */
}

h5 {
    font-size: 1rem;
    /* 五级标题 */
}

h6 {
    font-size: 0.9rem;
    /* 六级标题，最小 */
}

/* ==========================
   3️⃣ 段落与文本
   --------------------------
   🔹 段落间距，首行缩进
   🔹 强调文本和斜体文本样式
   ========================== */
p {
    margin: 0 0 1em 0;
    /* 段落下方间距 */
    text-indent: 2em;
    /* 首行缩进两个字符 */
}

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

em {
    font-style: italic;
    /* 斜体文本 */
    color: #555;
    /* 中灰色，不刺眼 */
}

a {
    color: #3498db;
    /* 链接颜色蓝色 */
    text-decoration: none;
    /* 去掉下划线 */
}

a:hover {
    text-decoration: underline;
    /* 悬停显示下划线提示可点击 */
}

/* ==========================
   4️⃣ 列表样式
   --------------------------
   🔹 ul/ol 和 li 间距优化
   ========================== */
ul,
ol {
    margin: 0 0 1em 2em;
    /* 列表左缩进和段落间距 */
}

li {
    margin-bottom: 0.5em;
    /* 列表项下方间距 */
}

/* ==========================
   5️⃣ 引用块样式
   --------------------------
   🔹 blockquote 左边边框和背景
   ========================== */
blockquote {
    margin: 1em 0;
    /* 上下间距 */
    padding: 0.5em 1em;
    /* 内边距，和正文分开 */
    border-left: 4px solid #ccc;
    /* 左边灰色竖线 */
    color: #666;
    /* 文本颜色稍淡 */
    background-color: #f9f9f9;
    /* 背景稍微灰，突出引用 */
}

/* ==========================
   6️⃣ 代码块与内联代码
   --------------------------
   🔹 代码块使用深色背景，内联代码浅色背景
   ========================== */
pre {
    background-color: #2d2d2d;
    /* 深色背景，突出代码 */
    color: #f8f8f2;
    /* 字体颜色对比明显 */
    padding: 1em;
    /* 内边距 */
    border-radius: 5px;
    /* 圆角 */
    overflow-x: auto;
    /* 长代码横向滚动 */
}

code {
    background-color: #f5f5f5;
    /* 内联代码浅色背景 */
    color: #e83e8c;
    /* 字体颜色醒目 */
    padding: 0.2em 0.4em;
    /* 内边距紧凑 */
    border-radius: 3px;
    /* 圆角 */
    font-family: "Fira Code", monospace;
    /* 等宽字体 */
    font-size: 0.95em;
    /* 略小字号 */
}

/*====================================================================css注释====================================================================*/
/*====================================================================css注释====================================================================*/
/*====================================================================css注释====================================================================*/

/* ==========================
   7️⃣ 表格
   --------------------------
   🔹 表格边框、背景、间距优化
   ========================== */
/* ==========================================
   表格通用样式美化
   ========================================== */

/* 基本表格设置 */
table {
    border-collapse: collapse;
    /* 合并单元格边框，避免双线 */
    width: 100%;
    /* 表格宽度填满父容器 */
    margin-bottom: 1em;
    /* 表格与下方内容间距 */
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    /* 现代系统字体栈 */
    font-size: 0.95rem;
    /* 表格字体稍小，易读 */
    line-height: 1.5;
    /* 行距，提高可读性 */
}

/* 表头和表格单元格通用样式 */
th,
td {
    border: 1px solid #ddd;
    /* 浅灰边框，视觉柔和 */
    padding: 0.5em 1em;
    /* 内边距，保持内容不紧贴边框 */
    text-align: left;
    /* 默认左对齐，可根据需要调整 */
    vertical-align: middle;
    /* 垂直居中 */
}

/* 表头样式 */
th {
    background-color: #f5f5f5;
    /* 浅灰背景，突出表头 */
    font-weight: 700;
    /* 加粗 */
    color: #2c3e50;
    /* 深蓝灰色，提高对比度 */
}

/* 奇偶行背景色区分，提高可读性 */
tbody tr:nth-child(odd) {
    background-color: #fafafa;
    /* 奇数行浅灰 */
}

tbody tr:nth-child(even) {
    background-color: #ffffff;
    /* 偶数行白色 */
}

/* 鼠标悬停行高亮 */
tbody tr:hover {
    background-color: #e8f0fe;
    /* 浅蓝高亮 */
    transition: background-color 0.2s ease;
    /* 平滑过渡 */
}

/* 表格边框圆角和阴影（整体美化） */
table.styled {
    border-radius: 6px;
    /* 表格整体圆角 */
    overflow: hidden;
    /* 防止圆角被边框裁切 */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
    /* 微阴影增加层次感 */
}

/* 表格内文字过长自动换行 */
td,
th {
    word-break: break-word;
    /* 防止内容撑开表格 */
}

/*====================================================================css注释====================================================================*/
/*====================================================================css注释====================================================================*/
/*====================================================================css注释====================================================================*/


/* ==========================
   8️⃣ 图片
   --------------------------
   🔹 自适应宽度，不超出容器
   ========================== */
img {
    max-width: 100%;
    /* 容器最大宽度 */
    height: auto;
    /* 保持纵横比 */
    display: block;
    /* 避免行内间距 */
    margin: 1em 0;
    /* 上下间距 */
}

/*====================================================================css注释====================================================================*/
/*====================================================================css注释====================================================================*/
/*====================================================================css注释====================================================================*/

/* ==========================
   9️⃣ 分割线
   --------------------------
   🔹 文章内容分割使用轻微灰线
   ========================== */
hr {
    border: none;
    border-top: 1px solid #eee;
    /* 上边框模拟分割线 */
    margin: 2em 0;
    /* 上下间距 */
}

/*====================================================================css注释====================================================================*/
/*====================================================================css注释====================================================================*/
/*====================================================================css注释====================================================================*/


/*====================================================================css注释====================================================================*/
/*====================================================================css注释====================================================================*/
/*====================================================================css注释====================================================================*/

/* ==========================
   11️⃣ 响应式设计
   --------------------------
   🔹 小屏设备适配
   ========================== */
@media (max-width: 768px) {
    body {
        padding: 10px;
        /* 减少左右内边距 */
        font-size: 16px;
        /* 调整基础文字大小 */
    }

    pre {
        font-size: 0.85em;
        /* 缩小代码块字体 */
    }

    h1 {
        font-size: 1.8rem;
        /* 一级标题缩小 */
    }

    h2 {
        font-size: 1.5rem;
        /* 二级标题缩小 */
    }

    h3 {
        font-size: 1.3rem;
        /* 三级标题缩小 */
    }
}