@font-face {
        font-family: 'hy-py';
        src: url('../img/py.ttf') format('truetype');
    }

    body,
    div,
    p,
    ul,
    li {
        padding: 0;
        margin: 0;
        list-style: none;
    }

    div {
        width: auto;
        /* 全局不再硬编码 910px：避免窄屏下溢出。
           词帖打印尺寸 910px 由 .word-block 单独约束（max-width: 910px; width: 100%），
           让大屏保持 A4 打印尺寸，窄屏自适应容器宽度。 */
        margin: 0 auto;
    }

    /* 田字拼音词帖：每行 14 格（2 字词 × 5 遍 + 4 个空格），适配 A4 打印 */
    #printContent {
        display: flex;
        flex-wrap: wrap;
        gap: 0;
    }

    .word-block {
        width: 100%;
        max-width: 910px;
        /* 14 × 65px，A4 打印尺寸上限；窄屏下收缩到容器宽度 */
        height: 112px;
        /* 45 拼音 + 2 间距 + 65 田字 */
        display: block;
        margin: 0 auto 23px;
        /* 行间 30px，行距加大 */
        page-break-inside: avoid;
    }

    /* 拼音区：四线三格的上面 3 条线（顶线 / 中线 / 基线），线条透明度 80% */
    .pinyin-area {
        position: relative;
        height: 45px;
        /* 拼音区加高，让 4 条线更舒展 */
        width: 100%;
        border-top: 1px solid var(--zg-border-color-80, rgba(152, 15, 41, 0.4));
        /* 第 1 线（顶线） */
        display: flex;
        align-items: flex-end;
        justify-content: center;
        box-sizing: border-box;
    }

    .pinyin-area::before {
        content: "";
        position: absolute;
        top: 15px;
        /* 第 2 线：x-height 顶，三行等分（15/15/15） */
        left: 0;
        right: 0;
        height: 0;
        border-top: 1px solid var(--zg-border-color-80, rgba(152, 15, 41, 0.3));
    }

    .pinyin-area::after {
        content: "";
        position: absolute;
        top: 30px;
        /* 第 3 线：基线（小写字母坐落其上），距田字格上边框 15px */
        left: 0;
        right: 0;
        height: 0;
        border-top: 1px solid var(--zg-border-color-80, rgba(152, 15, 41, 0.3));
    }

    .pinyin-cell {
        flex: 1;
        height: 100%;
        display: flex;
        align-items: flex-end;
        justify-content: center;
        /* 字符盒底部留 8px 距拼音区底部，增大→字符上移，减小→字符下移 */
        padding-bottom: 8px;
        font-family: "hy-py", "Kaiti SC", "楷体", "楷体_gb2312", STKaiti, "AR PL UKai CN", "AR PL UKai HK", "AR PL UKai TW", "AR PL UKai TW MBE", "AR PL KaitiM GB", KaiTi, KaiTi_GB2312, DFKai-SB, "TW\-Kai", sans-serif;
        font-size: 28px;
        /* 字号加大，与三线间距匹配 */
        line-height: 1;
        color: var(--font-color, rgba(224, 6, 6, 1));
        /* 拼音颜色由“文字颜色 + 颜色深浅”控制，通过 block 上的 --font-color 变量传递 */
        box-sizing: border-box;
    }

    .hz-line {
        display: flex;
        width: 100%;
        /* 大屏：.word-block 限 910px → .hz-line 撑满到 910px；
           窄屏：跟随 .word-block 收缩到容器宽 */
        height: 65px;
        margin-top: 2px;
        /* 间距 2px */
        box-sizing: border-box;
        border-top: 1px solid var(--zg-border-color, #980f29);
        /* 第 4 线（底线，容纳 b/d/h 等上伸和 g/p/q/y 下伸） */
        border-left: 1px solid var(--zg-border-color, #980f29);
        /* 最左侧竖线 */
    }

    /* 田字格：用 CSS 边框 + 伪元素十字虚线绘制，避免 SVG 缩放失真 */
    .hz-line>span {
        position: relative;
        display: inline-block;
        font-family: "嗡阿吽－田英章钢笔楷书简", "楷体", "楷体_gb2312", "Kaiti SC", STKaiti, "AR PL UKai CN", "AR PL UKai HK", "AR PL UKai TW", "AR PL UKai TW MBE", "AR PL KaitiM GB", KaiTi, KaiTi_GB2312, DFKai-SB, "TW\-Kai";
        font-size: 48px;
        line-height: 65px;
        text-align: center;
        width: 65px;
        height: 65px;
        color: rgba(224, 6, 6, 0.5);
        border-right: 1px solid var(--zg-border-color, #980f29);
        border-bottom: 1px solid var(--zg-border-color, #980f29);
        box-sizing: border-box;
        flex-shrink: 0;
    }

    .hz-line>span::before,
    .hz-line>span::after {
        content: "";
        position: absolute;
        pointer-events: none;
    }

    .hz-line>span::before {
        top: 50%;
        left: 0;
        right: 0;
        border-top: 1px dashed var(--zg-cross-color, #70d39d);
    }

    .hz-line>span::after {
        left: 50%;
        top: 0;
        bottom: 0;
        border-left: 1px dashed var(--zg-cross-color, #70d39d);
    }

    li.teach-line {
        display: block;
        width: 938px;
        height: 49px;
        font-family: "hy-py", "嗡阿吽－田英章钢笔楷书简", "楷体", "楷体_gb2312", "Kaiti SC", STKaiti, "AR PL UKai CN", "AR PL UKai HK", "AR PL UKai TW", "AR PL UKai TW MBE", "AR PL KaitiM GB", KaiTi, KaiTi_GB2312, DFKai-SB, "TW\-Kai";
        font-size: 25px;
        text-align: left;
        /* background: url(../img/xb1.svg) left center repeat-x; */
        color: #980f29;
        margin-top: 12px;
    }

    li.teach-line span {
        display: inline-block;
        width: 26px;
        height: 48px;
        text-align: center;
        line-height: 55px;
    }

    li.teach-line span.teach-line-hz {
        width: 40px;
        font-size: 32px;
        text-align: center
    }

    li.teach-line span.teach-line-py {
        min-width: 40px;
        margin-right: 10px;
    }

    li.teach-line span.teach-line-bs {}

    li span.svg {
        line-height: 71px;
    }

    li svg {
        vertical-align: middle;
    }

    li.hz-line span.b {
        color: rgba(224, 6, 6, 0.5);
    }

    .afterpage {
        page-break-before: always;
    }

    @page {
        size: A4;
        margin: 14mm 6mm 6mm 6mm;
        /* 上边距加大到 12mm，左右下保持 6mm */
    }

    table {
        table-layout: fixed;
    }

    .table th {
        width: auto ! important;
    }

    .slider-horizontal {
        width: 100% ! important;
    }

    .tooltip-inner {
        width: fit-content;
    }

    /* ========== 整站统一导航栏/页脚适配 ==========
       导航栏由 /js/site-header-footer.js 统一渲染（.site-navbar > .page-container），
       本文件顶部的全局 div 规则不影响它，无需再单独覆盖。 */
    /* ========== 两栏布局（参照英文词帖） ==========
       左栏：词帖预览（#print-area），1fr 自适应填满剩余空间，确保 910px 打印尺寸完整可见；
       右栏：控制面板，固定 320px（避免原 400px 宽度过宽导致内容稀疏）。 */
    .app-layout {
        display: grid;
        grid-template-columns: 1fr 320px;
        gap: 20px;
        align-items: start;
        width: auto;
        max-width: var(--site-max-width);
        margin: 0 auto;
        /* 顶部留出固定导航栏空间 */
        padding: 76px var(--site-gutter) 20px;
    }

    /* 页头卡：横跨两栏，排在预览栏与控制面板之上 */
    .app-layout > #sitePageHead {
        grid-column: 1 / -1;
        width: auto;
        margin: 0;
    }

    @media (max-width: 1024px) {
        .app-layout {
            grid-template-columns: 1fr;
        }

        /* 小屏：设置在上、预览在下（用 order 仅改变视觉顺序，不动 DOM） */
        .app-layout > .control-panel {
            order: 1;
            /* 关闭 sticky，避免与小屏布局冲突 */
            position: static;
            top: auto;
        }
        .app-layout > .preview-section {
            order: 2;
            /* 关闭内部固定高度与滚动，整页自然滚动，避免内容溢出重叠 */
            max-height: none;
            overflow-x: auto;
            /* 横向允许滚动（14 格 65px × 14 = 910px 在窄屏下溢出预览区），避免撑爆 body */
            overflow-y: visible;
            /* 横向溢出交给内部 #print-area 自身处理 */
            width: 100%;
        }
    }

    /* 预览区域（左栏） */
    .preview-section {
        width: auto;
        margin: 0;
        background: #fff;
        border-radius: 12px;
        padding: 20px;
        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
        overflow: auto;
        max-height: calc(100vh - 40px);
        /* 内部 #print-area 居中显示词帖（大屏下不贴左） */
        display: flex;
        justify-content: center;
        box-sizing: border-box;
    }

    /* #print-area 占满预览区，让内部 .word-block { width:100% } 能撑满内容宽度 */
    #print-area {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }

    /* 控制面板（右栏） */
    .control-panel {
        width: auto;
        margin: 0;
        background: #fff;
        border-radius: 12px;
        padding: 24px;
        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
        position: sticky;
        top: 76px;
    }

    /* 各设置分组（词帖内容 / 字格颜色 / 文字颜色 / 颜色深浅）之间留出适当间距 */
    .control-panel .form-group {
        width: auto;
        margin-bottom: 24px;
    }

    .control-panel .form-group:last-of-type {
        margin-bottom: 0;
    }

    .control-panel label {
        display: block;
        font-size: 14px;
        font-weight: 600;
        margin-bottom: 10px;
    }

    /* 覆盖全局 div{width:910px}，让控制面板内控件按列宽收缩 */
    .control-panel .d-flex,
    .control-panel .form-check,
    .control-panel .form-check-inline,
    .control-panel .button-group {
        width: auto;
        margin: 0;
    }

    /* 词帖内容文本域占满 */
    .control-panel textarea.form-control {
        width: 100%;
        max-width: 100%;
    }

    /* 颜色深浅滑块占满列宽 */
    .control-panel .slider,
    .control-panel .slider-horizontal {
        width: 100% !important;
        max-width: 100%;
    }

    /* 清除 + 打印按钮一行排列，适当间距 */
    .control-panel .button-group {
        display: flex;
        gap: 12px;
        margin-bottom: 24px;
    }

    .control-panel .button-group .btn {
        flex: 1;
        padding: 10px 20px;
        border-radius: 8px;
        font-weight: 500;
        transition: all 0.2s;
    }

    @media (hover: hover) {
        .control-panel .button-group .btn.btn-outline-secondary:hover {
            background-color: #e9ecef;
            color: #4D4A46;
        }
    }

    /* 颜色选择（字格颜色 / 文字颜色）：圆形色块，参照英文词帖 */
    .control-panel .color-options {
        display: flex;
        gap: 12px;
        flex-wrap: wrap;
        width: auto;
        margin: 0;
    }

    .control-panel .color-btn {
        width: 32px;
        height: 32px;
        border-radius: 50%;
        border: 2px solid transparent;
        cursor: pointer;
        transition: transform 0.2s, border-color 0.2s, box-shadow 0.2s;
    }

    @media (hover: hover) {
        .control-panel .color-btn:hover {
            transform: scale(1.1);
        }
    }

    .control-panel .color-btn.active {
        border-color: #333;
        box-shadow: 0 0 0 2px #fff, 0 0 0 4px #4D4A46;
    }

    /* 颜色深浅滑块：美化轨道与手柄。
       不覆盖 bootstrap-slider 的 top/margin-top 定位，避免手柄偏离轨道中线。 */
    .control-panel .slider-track {
        background: #e9ecef;
        border-radius: 999px;
        box-shadow: none;
    }

    /* 滑动条已选颜色跟随“文字颜色”（--font-color-hex 由 JS 设置） */
    .control-panel .slider-selection {
        background: var(--font-color-hex, #4D4A46);
        border-radius: 999px;
        box-shadow: none;
    }

    .control-panel .slider-handle {
        background: #ffffff;
        border: 2px solid var(--font-color-hex, #4D4A46);
        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
        opacity: 1;
    }

    @media (hover: hover) {
        .control-panel .slider-handle:hover {
            transform: scale(1.1);
        }
    }

    @media print {
        /* 打印时仅保留词帖内容区域，其余（导航栏/页脚/控制面板）一律隐藏 */
        body > *:not(.app-layout) {
            display: none !important;
        }
        .app-layout {
            display: block !important;
            padding: 0;
            max-width: none;
            margin: 0;
        }
        .app-layout > .control-panel {
            display: none !important;
        }
        .preview-section {
            display: block !important;
            padding: 0;
            margin: 0;
            background: white;
            border-radius: 0;
            box-shadow: none;
            max-height: none;
            overflow: visible;
        }
        #print-area {
            display: block !important;
            margin-top: 0;
            /* 打印一律按原始尺寸输出，忽略屏幕预览的等比缩放 */
            width: auto !important;
            zoom: 1 !important;
        }

        /* 恢复 Bootstrap 4 时的打印缩放基准：
           原 BS4 打印样式会给 body 设 min-width:992px，使内容按更宽基准缩放，
           从而一页 A4 可容纳 10 行。升级 BS5 后该规则消失，导致缩放变大使 10 行溢出。
           这里显式补回，恢复一页 10 行的打印效果。 */
        body {
            min-width: 992px !important;
        }

        /* 强制 A4 纸张与原始边距，避免被任何全局 @page 干扰 */
        @page {
            size: A4;
            margin: 14mm 6mm 6mm 6mm;
        }

        /* 词帖每行整块显示，避免行被裁切 */
        .word-block {
            page-break-inside: avoid;
        }
    }