/* -------------------------------------------------- */
/* 桌面端/基础样式 - 单位已调整为 px/rem */
/* -------------------------------------------------- */

#increase-content {
    font-family: "PingFang SC", "Microsoft YaHei", "Arial", sans-serif;
    color: #333; /* 主体文字颜色 */
    /* 建议：如果您希望内容居中且有限宽，可以添加以下两行，
       如果内容需要跟随父容器宽度，则无需添加 max-width 和 margin: auto */
    /* max-width: 800px; */
    /* margin: 0 auto; */
    /* padding: 20px; /* 内部边距 */
    font-size: 16px; /* 基准字体大小，使用 px */
}

/* 段落样式：使用后代选择器，仅对 #increase-content 内的 p 生效 */
#increase-content p {
    line-height: 1.8; /* 增加行距，提升阅读舒适度 */
    margin-bottom: 24px; /* 1.5em 转换为 24px (16px * 1.5) */
    text-align: justify; /* 段落两端对齐，视觉上更整齐专业 */
    font-size: 16px;
}

/* --- 标题区域样式 --- */
#increase-content .main-title {
    font-size: 32px; /* 2em 转换为 32px */
    font-weight: bold;
    color: #1a1a1a;
    margin-bottom: 8px; /* 0.5em 转换为 8px */
    border-bottom: 2px solid #0056b3; /* 醒目的底线 (品牌色) */
    padding-bottom: 10px;
}

#increase-content .subtitle {
    font-size: 24px; /* 1.5em 转换为 24px */
    color: #999;
    margin-bottom: 32px; /* 2em 转换为 32px */
    text-align: center;
}

/* --- 层次小标题样式 --- */

/* 一级小标题（section-title） - 替代H2/H3，提供强层次感 */
#increase-content .section-title {
    font-size: 24px; /* 1.5em 转换为 24px */
    font-weight: 700;
    color: #333; /* 品牌主色调 */
    margin-top: 40px; /* 2.5em 转换为 40px */
    margin-bottom: 16px; /* 1em 转换为 16px */
    padding-left: 15px;
    border-left: 4px solid #ccc; /* 侧边条，增强区分度 */
}

/* 二级小标题（sub-heading） - 替代H3/H4，用于列表前的总结 */
#increase-content .sub-heading {
    font-size: 20px; /* 1.25em 转换为 20px */
    background: #eee;
    color: #333;
    margin-top: 16px; /* 1em 转换为 16px */
    margin-bottom: 24px; /* 1.5em 转换为 24px */
    padding: 5px 0;
    text-align: center;
    border-bottom: 1px dashed #999; /* 虚线底线，柔和分隔 */
}

/* --- 列表与细节样式 --- */
#increase-content ul {
    list-style-type: none; /* 移除默认圆点 */
    padding-left: 0; /* 移除默认缩进 */
    margin-bottom: 24px; /* 1.5em 转换为 24px */
}

#increase-content li {
    margin-top:5px;
    margin-bottom:5px;
    padding:2px 0;
    padding-left:0px; /* 1.5em 转换为 24px */
    position: relative; /* 为自定义项目符号定位 */
    font-size: 16px; /* 1.15em 转换为 18.4px (使用 18px) */
}

/* 自定义列表项目符号 */
#increase-content li:before {
    content: ""; /* 圆点符号 */
    color: #0056b3; /* 与标题色一致 */
    font-weight: bold;
    display: inline-block;
    width: 1em; /* 保持 em，因为它基于 li 的 font-size，用于相对宽度 */
    margin-left: -1em; /* 保持 em，用于相对定位 */
}

/* 列表中的列表（二级列表） */
#increase-content ul ul {
    margin-top: 8px; /* 0.5em 转换为 8px */
    margin-bottom: 8px; /* 0.5em 转换为 8px */
    padding-left: 24px; /* 1.5em 转换为 24px */
}

#increase-content ul ul li:before {
    content: "–"; /* 二级列表使用短横线 */
    color: #555;
}

/* 列表中的标签（detail-label） - 用于列表项中需要强调的分类名称 */
#increase-content .detail-label {
    font-weight: bold;
    color: #333;
    display: block; /* 确保它独占一行或在列表项内具有高强调度 */
    margin-bottom: 5px; /* 0.3em 转换为 4.8px (使用 5px) */
}

/* 文本内部的强调样式 */
#increase-content strong {
    color: #b33a00; /* 突出强调核心关键词 (深橙色) */
    font-weight: normal;
}

/* 结语部分 */
#increase-content .closing {
    font-size:20px; /* 1.1em 转换为 17.6px (使用 18px) */
    color: #999;
    margin-top: 48px; /* 3em 转换为 48px */
    padding-top:25px;
    border-top: 1px solid #ccc;
    text-align: center;
}

/* -------------------------------------------------- */
/* 移动端优化 (Media Query) - 保持 rem 单位以实现响应式缩放 */
/* -------------------------------------------------- */
@media (max-width: 767px) {
    /* 优化 1: 略微提高移动端基准字体，增强可读性 */
    #increase-content {
        font-size: 16px; /* 保持与PC端基准一致，避免过度缩小 */
        line-height: 1.6; /* 略微减小行距，节省空间 */
        padding: 10px; /* 减少边距，充分利用屏幕空间 */
    }
    
    /* 优化 2: 调整标题 rem 系数，使其视觉效果更接近 PC 端的 32px */
    #increase-content .main-title {
        font-size:18px; /* 16px * 2 = 32px，与 PC 端一致 */
        text-align: left;
    }

    /* 优化 2: 调整副标题 rem 系数，使其视觉效果更接近 PC 端的 24px */
    #increase-content .subtitle {
        font-size: 18px; /* 16px * 1.5 = 24px，与 PC 端一致 */
        margin-bottom: 1.5rem;
        margin-top: 0px;
    }

    /* 优化 2: 调整一级小标题 rem 系数，使其视觉效果更接近 PC 端的 24px */
    #increase-content .section-title {
        font-size:16px; /* 16px * 1.5 = 24px，与 PC 端一致 */
        margin-top: 1.5rem;
        padding-left: 10px; /* 减少侧边条内边距 */
    }

    /* 优化 2: 调整二级小标题 rem 系数，使其视觉效果更接近 PC 端的 20px */
    #increase-content .sub-heading {
        font-size:16px; /* 16px * 1.25 = 20px，与 PC 端一致 */
        margin-top:25px;
        margin-bottom:20px;
    }

    /* 优化 3: 保持列表项与 PC 端一致，并调整间距 */
    #increase-content li {
        padding-left: 0px; /* 取消额外缩进，与 PC 端保持一致 */
        margin-top: 5px;
        margin-bottom: 5px;
        padding: 2px 0;
        font-size:15px; /* 16px * 1 = 16px，与 PC 端一致 */
    }

    /* 结语部分在移动端调整到更合理的字体大小 */
    #increase-content .closing {
        font-size:15px; /* 16px * 1.1 = 17.6px，避免过大 */
        margin-top: 3rem;
        padding-top: 15px;
        color: #999;
    }
    
    /* 手机端取消段落两端对齐，避免单行文字拉伸感过强 */
    #increase-content p {
        text-align: left;
        margin-bottom: 1rem; /* 移动端段落间距略微缩小 */
    }
}