/* ==================== skin-blog.css ====================
   blog 皮肤专属样式
   ======================================================= */

/* ==================== 富文本内容区 ==================== */

/* 文章正文内容容器 */
.article-content {
    line-height: 1.8;
    color: #333;
    word-break: break-word;
}

/* ==================== 富文本中的表格样式 ==================== */

/* 表格外层滚动容器：处理宽表格的横向溢出，避免撑破布局 */
.article-content .table-wrapper {
    overflow-x: auto;
    max-width: 100%;
    margin: 1.2rem 0;
    border: 1px solid #e0ddd8;
    border-radius: 0.375rem;
}

/* 包裹在 .table-wrapper 内的 table 去除额外边距与圆角 */
.article-content .table-wrapper table {
    margin: 0;
    border: none;
    border-radius: 0;
}

/* 富文本中直接出现的 table（兜底：自动横向滚动 + 基础外观） */
.article-content table {
    display: block;             /* 配合 overflow-x 实现自身横向滚动 */
    overflow-x: auto;           /* 宽表格自动出现横向滚动条，不撑破父容器 */
    width: 100%;
    max-width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
    background: #fff;
    margin: 1.2rem 0;
    border: 0px solid #e0ddd8;  /* 整体外框，使表格有明显轮廓 */
    border-radius: 0.375rem;
    overflow: hidden;           /* 配合 border-radius 裁剪四角 */
}

/* th 通用样式：兼容 thead>th 与直接 tr>th（富文本编辑器常见输出） */
.article-content th {
    background: #f5f3ef;        /* 浅暖灰色表头，与 blog 皮肤整体色调一致 */
    color: #222;
    font-weight: 600;
    padding: 0.65rem 0.9rem;
    text-align: left;
    border: 1px solid #d8d4cc;
    white-space: nowrap;        /* 表头不换行，保持列宽清晰 */
}

/* td 通用样式 */
.article-content td {
    padding: 0.55rem 0.9rem;
    border: 1px solid #eceae4;  /* 每个单元格加边框，使表格结构一目了然 */
    vertical-align: top;
    color: #444;
}

/* 斑马纹：偶数行轻微背景区分，提升长表格可读性 */
.article-content tr:nth-child(even) td {
    background-color: #faf9f7;
}

/* 悬停高亮 */
.article-content tr:hover td {
    background-color: #f0ede7;
}