:root {
    --primary-color: #00728B; /* 用于标题 */
    --secondary-color: #2196F3; /* 蓝色，暂时无用 */
    --KatTi: 'Times New Roman',"楷体",STKaiti,KaiTi; /*楷体*/
    --text-color: #005B89; /* 用于题头引用、批注文字色 */
    --secondary-text-color: #37839E; /* 用于高亮文字色 */
}

/*最佳实践 全局设置 border-box ,替代默认box-sizing: content-box; */
* {
    box-sizing: border-box;
}

article {
    border: none;
    background-color: gainsboro;
    margin: 0;
}

.page {
    margin: auto;
    margin-bottom: 1cm;
    background-color: #fff;
    box-shadow: 0 4px 5px rgba(75, 75, 75, 0.2);
    outline: 0;
    width: 210mm;
    min-height: 297mm;
    padding-left: 2.1cm;
    padding-top: 2cm;
    padding-right: 2.1cm;
    padding-bottom: 2cm;
    position: relative;
    overflow: hidden;
}
/*引用*/
.quote {
    background: url("/images/research/2019人教版/cSSQuote.svg") no-repeat;
    background-size: 10mm;
    background-position: 0px 10px;
    margin-bottom:1cm
}


    .quote .content {
        width: 7.5cm;
        margin-left: auto; /* 靠右对齐 */
    }

        .quote .content p {
            font-family: var(--KatTi);
            color: var(--text-color);
        }


/*节标题h1*/
.pageH1 {
    font-size: 24pt;
    font-family: 'Times New Roman', STZhongsong, SimSun;
    position: relative; /* 为伪元素定位提供参考 */
    padding-left: 2.3cm; /* 为圆形标记预留空间 */
    line-height: 1.5; /* 行高调整 */
    margin-bottom: 1.4cm;
}

    .pageH1::before {
        content: attr(data-number);
        position: absolute;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
        width: 1.2cm;
        height: 1.2cm;
        background-color: var(--primary-color);
        color: white;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 24pt;
    }
/*节标题h2*/
.pageH2 {
    font-size: 14pt;
    font-family: "SimHei", "Microsoft YaHei", sans-serif; /* 黑体 */
    color: black;
    position: relative;
    padding-left: 0.7cm; /* 为半圆留出空间 */
    margin: 0.8cm 0 0.5cm 0; /* 上下左右边距 */
    line-height: 1.5;
}

    .pageH2::before {
        content: "";
        position: absolute;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
        width: 0.3cm; /* 半圆直径 */
        height: 0.6cm; /* 半圆高度 */
        background-color: var(--primary-color);
        border-radius: 0 0.3cm 0.3cm 0; /* 上半圆 */
    }

    /* 新增双竖线修饰类 */
    .pageH2.doubleLines::before {
        width: 1cm; /* 两条线总宽度 */
        height: 60%; /* 竖线高度与标题一致 */
        top: 20%;
        transform: none;
        border-radius: 0;
        background: linear-gradient(90deg, var(--primary-color) 0 0.2cm, /* 第一条线（0.25cm宽） */
        transparent 0.2cm 0.3cm, /* 间隔（0.1cm） */
        var(--primary-color) 0.3cm 0.35cm, /* 第二条线（0.05cm宽） */
        transparent 0.35cm /* 透明填充 */
        );
    }


.page p {
    font-size: 12pt;
    font-family: 'Times New Roman',STSong,SimSun;
    line-height: 20pt;
    margin-top: 0px;
    margin-bottom: 0px;
    text-align:justify
}

    /*实验、拓展学习……的标题，中宋字体*/
    .page p.title {
        font-family: "DengXian", "Microsoft YaHei", "微软雅黑", sans-serif;
        padding-bottom: 8mm;
        text-align: center;
        font-size:12pt;
    }
    /*表格，字体都是楷体*/
.page table {
    font-family:var(--KatTi);
    text-align:center
}

/*页脚*/
.page .footer {
    font-size: 9pt;
    font-family: 'Arial',STSong,SimSun;
    position: absolute;
    bottom: 1.5cm;
}

.page .footerLeft {
    left: 2.1cm
}

.page .footerRight {
    right: 2.1cm
}

/*章首页*/
.chapter {
    width: 10.9cm;
    top: 7cm;
    left: 8cm;
    position: absolute
}

    .chapter p {
        color: white;
        font-family: var(--KatTi);
        font-size: 14pt;
        line-height: 170%
    }
/*问题栏目*/
.problemWrapper {
    background: url('/images/research/2019人教版/cssProblemBg.svg') no-repeat;
    background-size: 9cm;
    background-position: left top;
    padding-top: 4mm;
}

.problem {
    /* 容器基础样式 */
    display: flex; /* 启用Flex布局 */
    border: 1px solid #5B96B9; /* 容器边框 */
    border-left: none; /* 取消左边框 */
    min-height: 80px; /* 最小高度 */
    overflow: hidden; /* 防止内容溢出 */
    background-color: #ECF1F6; /* 容器背景色 */
}

    .problem .problemLeft {
        background: url('/images/research/2019人教版/cSSProblem.svg') no-repeat 2mm 2mm;
        background-size: 9cm;
        width: 9.4cm;
        padding-top: 2cm;
        padding-left: 2mm;
        padding-bottom: 7mm;
    }

        .problem .problemLeft p {
            font-family: var(--KatTi);
        }

    .problem .problemRight {
        flex: 1;
    }
/*正文*/
.mainWrapper {
    display: flex;
    width: 100%;
}

    /* 左布局（main在左） */
    .mainWrapper.left-layout {
        flex-direction: row;
    }

        .mainWrapper.left-layout .annotations {
            padding-left: 0.72cm;
            margin-left: auto; /* 推到右侧 */
        }

    /* 右布局（main在右） */
    .mainWrapper.right-layout {
        flex-direction: row-reverse;
    }

        .mainWrapper.right-layout .annotations {
            padding-right: 0.72cm;
            margin-right: auto; /* 推到左侧 */
        }

.main {
    width: 11cm;
}

.annotations {
    width: 5.8cm;
}

.page .annotations p {
    color: var(--text-color);
    font-family: var(--KatTi);
    position: relative;
    text-indent: 1.5em; /* 首行缩进 */
}
    /*批注前面的小三角*/
    .page .annotations p::before {
        content: "";
        position: absolute;
        left: 0;
        top: 0.5em; /* 与首行文字对齐 */
        width: 0;
        height: 0;
        border-top: 6px solid transparent;
        border-bottom: 6px solid transparent;
        border-left: 10px solid var(--text-color);
    }

    .page .annotations p.no-before::before {
        display:none;
    }

/*着重文字*/
.page .highlight {
    color: var(--secondary-text-color);
    font-family: 'Times New Roman',SimHei
}
/*脚注*/
.footnote {
    position: relative;
    padding-top: 0.2cm; /* 横线 + 间距 */
}
    /*脚注上方一3cm直线*/
    .footnote::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 3cm;
        height: 0.5px;
        background-color: #000;
    }

    .footnote p {
        font-size: 9pt;
        line-height: 20px;
        text-indent: 0
    }
/*图片*/
.page figure img {
    border: none;
    box-shadow: none;
}

.page figcaption {
    font-size: 9pt;
    font-weight: normal;
    font-family: 'Times New Roman',STSong,SimSun;
}
/*练习与应用，复习与巩固栏目，除了背景图片不同，其他都相同*/
.exer-container {
    position: relative; /* 创建定位上下文 */
    width: 100%;
    overflow: visible; /* 允许内容溢出 */
    --background-image: url('/images/research/2019人教版/cssExer.svg');
    padding-top: 1.5cm;
}
.exer-container::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-image: var(--background-image);
        background-repeat: no-repeat;
        background-position: left top;
        background-size: 22cm;
        z-index: 0;
        min-width: 150%;
        min-height: 150%;
 }

    .exer-container.no-before::before {
        display:none
    }

.fuxi {
    --background-image: url('/images/research/2019人教版/cssFuxi.svg');
}

.exer {
    display: grid;
    grid-template-columns: 1fr 1fr; /* 两列 */
    column-gap: 1.2cm; /* 水平间距 */
    row-gap: 0.8cm; /* 垂直间距 */
    position: relative;
}

/*AB组，独占一行*/
.ABZu {
    grid-column: 1 / -1; /* 跨所有列 */
    position: relative; /* 确保文字在正常流中 */
    z-index: 2; /* 高于背景 */
}
.ABZu p {
     font-family: Arial,SimHei !important;
     text-align: center;
     font-size:12pt !important
}

.exer .column {
        flex: 1; /* 使两列等宽 */
        min-width: 0; /* 防止内容溢出 */
}
/* 单列布局样式 */
.exer .single-column {
    grid-column: span 2; /* 跨所有列 */
    width: 100%;
}

.exer p {
        font-family: var(--KatTi);
        font-size: 10.5pt;
}

/* 表格文字样式 */
.exer table {
        font-size: 10.5pt;
        border-collapse: collapse; /* 合并边框更美观 */
        width: 100%; /* 表格宽度适应容器 */
        margin: 0.5em 0; /* 添加表格上下间距 */
        text-align:center
}

.tableDarkBlue {
    background-color:#ddeef8
}

.tableLightBlue {
    background-color: #f6f9fb
}
 

/*思考与讨论栏目*/
.think {
    background-image: url('/images/research/2019人教版/cssThink.svg');
    background-repeat: no-repeat;
    background-position: left top;
    background-size: 16cm;
    margin-top: 0.8cm;
    padding-top: 1.5cm
}

    .think .thinkContent {
        /* 核心阴影方案 */
        box-shadow: 0 6px 12px -6px rgba(0,0,0,0.15), /* 底部阴影 */
        6px 6px 12px -6px rgba(0,0,0,0.15); /* 右下阴影 */
        /* 确保左侧永远不会出现阴影 */
        clip-path: inset(0 -15px -15px 0);
        padding: 0cm 4mm 0.1cm 0mm;
    }

    .think p {
        font-family: var(--KatTi);
        font-size: 12pt;
    }
/*实验、演示栏目*/
.experiment {
    background-image: url('/images/research/2019人教版/cssExperiment.svg');
    background-repeat: no-repeat;
    background-position: left top;
    background-size: 16cm;
    margin-top: 0.8cm;
    padding-top: 1.5cm
}
.yanShi {
    background-image: url('/images/research/2019人教版/cssYanshi.svg');
    background-repeat: no-repeat;
    background-position: left top;
    background-size: 16cm;
    margin-top: 0.8cm;
    padding-top: 1.5cm
}

.experiment p, .yanShi p {
    font-family: 'Times New Roman',"FangSong", "仿宋", "STFangsong", serif;
    font-size: 12pt;
}
.experiment table {
        font-size: 12pt;
 }

.experiment p.doubleLines {
    background: url('/images/research/2019人教版/cssDoubleLine.svg') no-repeat;
    background-size: 0.35cm auto;
    background-position:2em,20px;
    padding-left: 1.5em; /* 为双线留出空间 */
    font-family: var(--KatTi);
    color:var(--primary-color)
}


/*科学漫步、拓展学习、STSE 除标题图片不同外，其他都相同*/
.science{
        position: relative; /* 为伪元素定位提供参照 */
        background: url('/images/research/2019人教版/cssScience.svg') left top 0mm no-repeat;
        background-size: 16cm;
        padding: 1.5cm 4mm 3mm 4mm;
        min-height: 300px;        
    }

.extend {
    position: relative; /* 为伪元素定位提供参照 */
    background: url('/images/research/2019人教版/cssExtend.svg') left top 0mm no-repeat;
    background-size: 16cm;
    padding: 1.5cm 4mm 3mm 4mm;
    min-height: 300px;
}

.stse {
    position: relative; /* 为伪元素定位提供参照 */
    background: url('/images/research/2019人教版/cssSTSE.svg') left top 0mm no-repeat;
    background-size: 16cm;
    padding: 1.5cm 4mm 3mm 4mm;
    min-height: 300px;
    margin-bottom: 1.5cm;
}

/* 渐变背景层 */
.science::before,
.extend::before,
.stse::before {
    content: "";
    position: absolute;
    top: 3.8mm; /* 从3mm位置开始显示渐变 */
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient( to bottom left, rgba(236, 243, 246, 0.6) 0%, transparent 60% );
    pointer-events: none; /* 防止遮挡交互 */
}

/* 底部渐变线 */
.science::after,
.extend::after,
.stse::after{
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 2px; /* 线条高度 */
    background: linear-gradient(to right, #86AFC0 60%, transparent 100%);
    opacity: 0.6;
}

.science.no-after::after,
.extend.no-after::after,
.stse.no-after::after
{
    display: none; /* 通过添加 .no-after 类控制 */
}

.science p,
.extend p,
.stse p{
    font-family: var(--KatTi);
    font-size: 10.5pt;
    position: relative;
    z-index: 1;
}
/*做一做栏目*/
.zhuo {
    position: relative; /* 用于伪元素和背景图定位 */
    background: url("/images/research/2019人教版/cssZhuo.svg") no-repeat 0px 0px/3cm, /* 左上角SVG图标（距左10px，距顶10px） */
    transparent; /* 无背景色 */
    border-radius: 10px; /* 圆角 */
    padding: 20px;
    box-sizing: border-box;
    margin-top: 0.8cm;
    margin-bottom: 0.5cm;
    padding-top: 1.5cm;
    min-height: 5cm;
    /* 新增以下属性 */
    overflow: hidden; /* 创建新的BFC解决浮动问题 */
    isolation: isolate; /* 创建新的层叠上下文 */
}

.zhuo p {
    font-family: var(--KatTi);
    font-size: 12pt;
}

    /* 用伪元素模拟渐变边框（右侧、顶部、底部） */
    .zhuo::before {
        content: "";
        position: absolute;
        top: 5px;
        right: 0;
        bottom: 0;
        left: 5px; /* 避免左侧残留1px（因为左侧无边框） */
        border-radius: 10px;
        background: linear-gradient(to right, transparent, /* 左侧透明（无边框） */
        #C6D5DF, /* 中间灰色 */
        #9AC1CE /* 右侧深灰色 */
        );
        z-index: -1; /* 放在内容后面 */
        padding: 1px; /* 模拟边框宽度 */
        -webkit-mask: linear-gradient(#fff, #fff) content-box, linear-gradient(#fff, #fff);
        -webkit-mask-composite: xor;
        mask-composite: exclude;
    }

/*例题*/
.liti {
    margin-top:0.5cm;
    margin-bottom:1.5cm;
}

.liti-header {
    height: 0.5cm; /* 固定高度 */
    background-image: url('/images/research/2019人教版/cssLiti.svg');
    background-size: auto 0.5cm; /* 图片高度固定为 0.5cm，宽度自适应 */
    background-position: left center; /* 左对齐，垂直居中 */
    background-repeat: no-repeat;
    background-color: transparent; /* 确保背景透明 */
}

.liti-content {
    background-color: #EBEFF3;
    padding: 0.5cm;
    box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.2); /* 右下方阴影 */
}

    .liti-content p.litiTitle {
        color: var(--primary-color);
        font-family: "Times New Roman",SimHei;
        text-indent: 0;
        margin-top:-0.6cm;
        margin-bottom:0.5cm
    }

    p.fenxi{
        font-family:var(--KatTi);
        margin:0.5cm 0 0.5cm 0;
    }