/* ============ 字帖工坊 zitie.bmgjx.cn 全站样式 ============ */


:root{--zt-pyfont:'zt-pinyin-andika','zt-pinyin',sans-serif;}
@font-face{font-family:'ma-shan-zheng';src:url('../fonts/MaShanZheng-Regular.woff2') format('woff2');font-display:swap}
@font-face{font-family:'long-cang';src:url('../fonts/LongCang-Regular.woff2') format('woff2');font-display:swap}
@font-face{font-family:'Poppins';src:url('../fonts/Poppins-Regular.woff2') format('woff2');font-display:swap}
@font-face{font-family:'lxgw-wenkai';src:url('../fonts/LXGWWenKai-Regular.woff2') format('woff2');font-display:swap}
@font-face{font-family:'zhi-mang-xing';src:url('../fonts/ZhiMangXing-Regular.woff2') format('woff2');font-display:swap}
@font-face{font-family:'zhuque-fangsong';src:url('../fonts/ZhuqueFangsong-Regular.woff2') format('woff2');font-display:swap}
@font-face{font-family:'yunfeng-hanchan';src:url('../fonts/YunfengHanchan-Regular.woff2') format('woff2');font-display:swap}
@font-face{font-family:'pingfang-shangshangqian';src:url('../fonts/PingfangShangshangqian-Regular.woff2') format('woff2');font-display:swap}
@font-face{font-family:'bad-script';src:url('../fonts/BadScript-Regular.woff2') format('woff2');font-display:swap}
@font-face{font-family:'edu-vic-pre';src:url('../fonts/EduVICPre-Regular.woff2') format('woff2');font-display:swap}
@font-face{font-family:'ramega-kaishu';src:url('../fonts/RamegaKaishu-Regular.woff2') format('woff2');font-display:swap}
@font-face{font-family:'ramega-xingshu';src:url('../fonts/RamegaXingshu-Regular.woff2') format('woff2');font-display:swap}
@font-face{font-family:'chill-huo-fangsong';src:url('../fonts/ChillHuoFangSong-Regular.woff2') format('woff2');font-display:swap}
@font-face{font-family:'chill-kai';src:url('../fonts/ChillKai-Regular.woff2') format('woff2');font-display:swap}
@font-face{font-family:'qiantu-xianmo';src:url('../fonts/QiantuXianMo-Regular.woff2') format('woff2');font-display:swap}
@font-face{font-family:'zt-pinyin';src:url('../fonts/ZTPinyin-Regular.woff2') format('woff2');font-display:swap;unicode-range:U+0020-007E,U+00A0-017F,U+01CD-01DD,U+0251,U+0261}
@font-face{font-family:'zt-pinyin-andika';src:url('../fonts/ZTPinyin-Regular.woff2') format('woff2');font-display:swap;unicode-range:U+0020-007E,U+00A0-017F,U+01CD-01DD,U+0251,U+0261}
/* 数字帖专用：0-9 用手写数字体，其余字符（汉字/标点）回落寒蝉正楷，同一 family 按 unicode-range 分工 */
@font-face{font-family:'zt-num-paper';src:url('../fonts/ZTStdNumber.woff2?v=20260917b33') format('woff2');font-display:swap;unicode-range:U+0030-0039}
@font-face{font-family:'zt-num-paper';src:url('../fonts/ChillKai-Regular.woff2') format('woff2');font-display:swap;unicode-range:U+0000-002F,U+003A-10FFFF}







@font-face{font-family:'yangrendongzhushi';src:url('../fonts/yangrendongzhushi.ttf') format('truetype');font-display:swap}

*{margin:0;padding:0;box-sizing:border-box}
:root{
  --paper:#f3ead8;--paper-deep:#e8dcc3;--ink:#2b2620;--ink-soft:#6b6153;
  --red:#9c3a2a;--red-deep:#7c2a1d;--orange:#d07f07;--line:#d8c9a8;--panel:#fffdf6;
  --sheet:#fffdf8;
}
html{scroll-behavior:smooth}
body{font-family:"PingFang SC","Microsoft YaHei","Source Han Sans SC",sans-serif;background:radial-gradient(1200px 400px at 50% -100px,rgba(156,58,42,.06),transparent 60%),var(--paper);color:var(--ink);min-height:100vh}
.kai{font-family:"KaiTi","楷体","STKaiti","Kaiti SC","SimSun",serif}
a{color:inherit;text-decoration:none}

/* ============ 顶部导航 ============ */
.site-header{position:sticky;top:0;z-index:60;background:linear-gradient(180deg,#fbf7ec,#f6eed9);border-bottom:1px solid var(--line);box-shadow:0 1px 8px rgba(124,42,29,.08)}
.header-inner{max-width:1560px;margin:0 auto;padding:9px 20px;display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.logo{display:flex;align-items:baseline;gap:9px;user-select:none}
.logo .seal{width:34px;height:34px;border-radius:6px;background:var(--red-deep);color:#f7ead8;display:flex;align-items:center;justify-content:center;font-size:18px;font-weight:700;flex-shrink:0;box-shadow:inset 0 0 0 2px rgba(247,234,216,.35);transform:rotate(-3deg)}
.logo h1{font-size:22px;letter-spacing:2px;color:var(--red-deep)}
.logo .domain{font-size:12px;color:var(--ink-soft)}
.main-nav{display:flex;gap:2px;flex-wrap:wrap}
.main-nav a{border:1px solid transparent;padding:5px 10px;font-size:13.5px;color:var(--ink-soft);border-radius:8px;transition:.15s}
.main-nav a:hover{background:rgba(156,58,42,.07);color:var(--red-deep)}
.main-nav a.on{background:var(--red-deep);color:#f7ead8;font-weight:600}
.header-actions{margin-left:auto;display:flex;gap:10px;align-items:center}
.btn{border:none;cursor:pointer;font-family:inherit;border-radius:8px;padding:9px 18px;font-size:14px;transition:.15s;display:inline-flex;align-items:center;gap:6px}
.btn-primary{background:var(--red-deep);color:#f7ead8;font-weight:600}
.btn-primary:hover{background:var(--red)}
.btn-warm{background:var(--orange);color:#fff;font-weight:600}
.btn-warm:hover{background:#b06a06}
.btn-ghost{background:#fff;border:1px solid var(--line);color:var(--ink-soft)}
.btn-ghost:hover{border-color:var(--red);color:var(--red-deep)}
.btn-sm{padding:4px 10px;font-size:12px;border-radius:6px}
.btn-lg{padding:11px 26px;font-size:15px}

/* ============ 生成器布局 ============ */
.layout{max-width:1560px;margin:0 auto;padding:16px 20px 60px;display:flex;gap:20px;align-items:flex-start}
.panel{width:392px;flex-shrink:0;position:sticky;top:70px;background:var(--panel);border:1px solid var(--line);border-radius:14px;box-shadow:0 4px 18px rgba(124,42,29,.07);max-height:calc(100vh - 88px);overflow-y:auto}
.panel::-webkit-scrollbar{width:8px}
.panel::-webkit-scrollbar-thumb{background:var(--paper-deep);border-radius:4px}
.preview{flex:1;min-width:0}
.pb{display:flex;align-items:center;gap:14px;margin-bottom:13px;color:var(--ink-soft);font-size:13px;flex-wrap:wrap}
.pb .st{background:#fffdf6;border:1px solid var(--line);border-radius:8px;padding:5px 12px}
.pb .sp{flex:1}
.papers{display:flex;flex-direction:column;align-items:center;gap:26px}
.paper{width:210mm;min-height:297mm;background:var(--sheet);position:relative;box-shadow:0 6px 24px rgba(60,40,10,.18);flex-shrink:0;padding:14mm 16mm 12mm;display:flex;flex-direction:column}
/* 整页外边框覆盖层：贴纸缘、不占布局，打印/导出均可呈现 */
.pframe{position:absolute;inset:0;box-sizing:border-box;pointer-events:none;z-index:1}
.ph{display:flex;justify-content:space-between;align-items:baseline;font-family:"KaiTi","楷体","STKaiti",serif;color:var(--ink);font-size:15px;letter-spacing:1px;margin-bottom:8mm;line-height:1.6}
.ph .right{text-align:right;color:var(--ink-soft)}
.pt{text-align:center;font-size:18px;font-weight:bold;margin-bottom:7mm}
.pbody{flex:1;min-height:0;position:relative}
.pf{display:flex;justify-content:space-between;align-items:center;font-size:10px;color:#b3a68f;margin-top:7mm;letter-spacing:.5px}
.etip{text-align:center;color:#b3a68f;padding:40px 0;font-size:14px}

/* ============ 表单 ============ */
.pg{border-bottom:1px solid #efe6cf;padding:12px 16px}
.pg:last-child{border-bottom:none}
.pg>h3{font-size:13px;color:var(--red-deep);letter-spacing:1px;margin-bottom:10px;display:flex;align-items:center;gap:7px;cursor:pointer;user-select:none}
.pg>h3::before{content:"";width:3px;height:13px;background:var(--red);border-radius:2px}
.pg>h3 .tg{margin-left:auto;font-size:11px;color:#b3a68f}
.formitem{display:flex;align-items:center;gap:8px;margin-bottom:9px;flex-wrap:wrap}
.formitem>label{font-size:12.5px;color:var(--ink-soft);flex-shrink:0;min-width:52px}
.formitem .full{width:100%}
textarea.in,input.in,select.in{width:100%;border:1px solid var(--line);border-radius:8px;padding:7px 10px;font-size:14px;font-family:inherit;background:#fff;color:var(--ink);outline:none;transition:.15s}
textarea.in:focus,input.in:focus,select.in:focus{border-color:var(--red);box-shadow:0 0 0 3px rgba(156,58,42,.12)}
textarea.in{resize:vertical;line-height:1.7;min-height:70px}
select.in{width:auto;min-width:86px}
.formitem select.layui-input:not([data-bind="font"]){flex:0 0 auto;width:auto;min-width:58px;max-width:66%;padding-left:8px;padding-right:20px}
select.layui-input[data-bind="font"]{flex:1 1 210px;min-width:210px;max-width:340px;width:auto}
.rr{display:flex;flex-wrap:wrap;gap:6px}
.rp{border:1px solid var(--line);background:#fff;border-radius:8px;padding:3px 9px;font-size:12.5px;cursor:pointer;color:var(--ink-soft);transition:.13s;user-select:none;display:inline-flex;align-items:center;gap:5px}
.rp input{display:none}
.rp.sel{border-color:var(--red);color:var(--red-deep);background:rgba(156,58,42,.06);font-weight:600}
.rp .sw{width:13px;height:13px;border-radius:50%;display:inline-block;border:1px solid rgba(0,0,0,.15);flex-shrink:0}
.gi{width:15px;height:15px;border:1px solid currentColor;border-radius:2px;position:relative;display:inline-block;background:#fff;flex-shrink:0}
.gi.t::after{content:"";position:absolute;left:50%;top:0;bottom:0;width:1px;background:currentColor}
.gi.t::before{content:"";position:absolute;top:50%;left:0;right:0;height:1px;background:currentColor}
.gi.m::before{content:"";position:absolute;inset:0;background:linear-gradient(to top right,transparent calc(50% - .5px),currentColor calc(50% - .5px),currentColor calc(50% + .5px),transparent calc(50% + .5px)),linear-gradient(to top left,transparent calc(50% - .5px),currentColor calc(50% - .5px),currentColor calc(50% + .5px),transparent calc(50% + .5px));z-index:1}
.gi.m::after{content:"";position:absolute;left:50%;top:0;bottom:0;width:1px;background:currentColor;z-index:2}
.gi.j::after{content:"";position:absolute;inset:0;background:linear-gradient(to right,transparent calc(33.3% - .5px),currentColor calc(33.3% - .5px),currentColor calc(33.3% + .5px),transparent calc(33.3% + .5px)),linear-gradient(to right,transparent calc(66.6% - .5px),currentColor calc(66.6% - .5px),currentColor calc(66.6% + .5px),transparent calc(66.6% + .5px)),linear-gradient(to bottom,transparent calc(33.3% - .5px),currentColor calc(33.3% - .5px),currentColor calc(33.3% + .5px),transparent calc(33.3% + .5px)),linear-gradient(to bottom,transparent calc(66.6% - .5px),currentColor calc(66.6% - .5px),currentColor calc(66.6% + .5px),transparent calc(66.6% + .5px))}
.gi.x::before{content:"";position:absolute;inset:0;background:linear-gradient(to top right,transparent calc(50% - .5px),currentColor calc(50% - .5px),currentColor calc(50% + .5px),transparent calc(50% + .5px)),linear-gradient(to top left,transparent calc(50% - .5px),currentColor calc(50% - .5px),currentColor calc(50% + .5px),transparent calc(50% + .5px))}
.gi.h::before{content:"";position:absolute;inset:8%;border:1px dashed currentColor;z-index:1}
.gi.f{background:#fff}
.gi.l::before{content:"";position:absolute;left:6%;right:6%;top:50%;height:1px;background:currentColor;z-index:1}
.gi.n::before{content:"";position:absolute;inset:0;border:1px dashed currentColor;opacity:.4}
.sr{display:flex;align-items:center;gap:9px;flex:1}
input[type=range]{flex:1;accent-color:var(--red-deep);min-width:80px}
.sv{font-size:12px;color:var(--ink-soft);min-width:34px;text-align:right;flex-shrink:0}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chips button{border:1px dashed var(--line);background:#fffdf6;border-radius:6px;font-size:12px;padding:3px 9px;cursor:pointer;color:var(--ink-soft);transition:.13s;font-family:inherit}
.chips button:hover{border-color:var(--red);color:var(--red-deep)}
.hint{font-size:11.5px;color:#a99c85;margin-top:4px;line-height:1.5}
.pa{display:flex;gap:10px;padding:13px 16px;position:sticky;bottom:0;background:var(--panel);border-top:1px solid #efe6cf}
.pa .btn{flex:1;justify-content:center}
.clr-swatch{width:26px;height:26px;border-radius:6px;border:2px solid var(--line);cursor:pointer;padding:0;position:relative;overflow:hidden}
.clr-swatch input{position:absolute;inset:0;opacity:0;cursor:pointer}
.clr-swatch.sel{border-color:var(--red)}
.checked-row{display:flex;align-items:center;gap:7px;font-size:13px;color:var(--ink-soft);cursor:pointer;user-select:none}
.checked-row input{accent-color:var(--red-deep)}

/* ============ 纸张格子 ============ */
.hl{display:flex;flex-direction:column}
.hr{display:flex;flex-direction:row;gap:.6mm;margin-bottom:2.2mm;align-items:flex-end}
.hr:last-child{margin-bottom:0}
/* 满格连通网格（田/米/九宫/回宫/方框/点格等闭合格型）：结构 .ggrid>(.hr.gcon>cell…)
   相邻格共享一条边线——每格只画“上+左”，整组外框补“右+下”，每条线恰好画一次，无缝相连且等粗（绝不叠线变粗）。
   内部十字/对角/回宫辅助线（SVG 或背景渐变）不变；线性格 g-l、艺术格 g-hg/shx、拼音格 py-cell、词块 wmgrp、竖列 vcol、标题行不加入。 */
.ggrid{border-right:.32mm solid var(--gc);border-bottom:.32mm solid var(--gc)}
.ggrid .hr.gcon{gap:0;margin:0;width:100%}
.ggrid .hr.gcon>.cell{flex:1 1 0;min-width:0}
/* 高列数（16/20）各格毫米宽独立取整会累加错位、末格右缘与组右边线错开出现开口；
   改为等分铺满整行，末格右缘必然与 .ggrid 右边线重合，严丝合缝且仍只画一次线、等粗 */
.ggrid .hr.gcon>.cell.g-f,
.ggrid .hr.gcon>.cell.g-t,
.ggrid .hr.gcon>.cell.g-m,
.ggrid .hr.gcon>.cell.g-x,
.ggrid .hr.gcon>.cell.g-j,
.ggrid .hr.gcon>.cell.g-n,
.ggrid .hr.gcon>.cell.g-h,
.ggrid .hr.gcon>.cell.g-mh,
.ggrid .hr.gcon>.cell.g-th,
.ggrid .hr.gcon>.cell.g-ch,
.ggrid .hr.gcon>.cell.g-tch,
.ggrid .hr.gcon>.cell.g-mch,
.ggrid .hr.gcon>.cell.g-dwg,
.ggrid .hr.gcon>.cell.g-tvs{border-color:transparent;border-top-color:var(--gc);border-left-color:var(--gc)}
/* 每行格数不一、行宽不铺满的自定义布局（自定左格生字帖）：单行独立封口条，按内容宽度收缩，格子保持固定尺寸不被等分拉伸 */
.ggrid.gstrip{display:inline-block;width:fit-content}
.ggrid.gstrip .hr.gcon{width:auto}
.ggrid.gstrip .hr.gcon>.cell{flex:0 0 auto}
/* HSK 笔顺词语块：块自带外框，块内网格只画“左竖线+下横线”，首列左/末行下交给块边框，列无缝等分、行间保留间距；每条线只画一次 */
.hskgrid .hr.hskrow{gap:0;margin:0}
.hskgrid .hr.hskrow>.cell{flex:1 1 0;min-width:0;border-color:transparent!important;background-image:none!important;background-color:transparent!important}
.hskgrid .hr.hskrow>.cell.empty{background-image:none!important;background-color:transparent!important}
/* 竖排田字格文章（sptzgzt）：右起列布局但几何为规则 N×ROWS 方格网；每格只画“上+左”，整网补“右+下”，列/行无缝、每条线只画一次 */
.vgrid{border-right:.32mm solid var(--gc);border-bottom:.32mm solid var(--gc)}
.vgrid .cell{border-color:transparent;border-top-color:var(--gc);border-left-color:var(--gc)}
/* 笔画例字组合（bhzl）连通网格：每格只保留左竖线，水平/右/下边线交给自动连通器 .ggrid/.gcon 与 .6mm 外框，杜绝任何叠线。
   右缘统一由 .bhzl-wrap 外框封口；左大格（不参与自动连通）单独补上/下横线以与右网格连续；末行订正压掉顶线避免与上组底边叠加。 */
.bhzl-wrap .hl>.cell{border-color:transparent;border-left-color:var(--gc)}
.bhzl-wrap ul.hl{border:none}
.bhzl-wrap .ggrid{border-right:none}
.bhzl-wrap ul.bh-bigul>.cell{border-left-color:transparent;border-top-color:var(--gc);border-bottom-color:var(--gc)}
.bhzl-wrap .gcon.bh-dzrow>.cell{border-top-color:transparent}
.bhzl-wrap .ggrid:has(> .hl.hr.bh-dzrow){border-bottom:none}
/* 组词脱格：一个“词格块”（同一词在同一种格型下的若干字）不拆行，块间留隙区分样字/描红/空格 */
.wmgrp{display:inline-flex;align-items:flex-end;gap:.6mm;margin-right:2.6mm;break-inside:avoid;page-break-inside:avoid}
.wmgrp:last-child{margin-right:0}
.wm-pad{list-style:none;border:none!important;background:none!important;box-sizing:border-box;flex:0 0 auto}
.cell{position:relative;flex-shrink:0;display:flex;align-items:center;justify-content:center;border:.32mm solid var(--gc);
 --gV:linear-gradient(to right,transparent calc(50% - .16mm),var(--gc) calc(50% - .16mm),var(--gc) calc(50% + .16mm),transparent calc(50% + .16mm));
 --gH:linear-gradient(to bottom,transparent calc(50% - .16mm),var(--gc) calc(50% - .16mm),var(--gc) calc(50% + .16mm),transparent calc(50% + .16mm));
 --gD1:linear-gradient(to top right,transparent calc(50% - .16mm),color-mix(in srgb,var(--gc) 30%,transparent) calc(50% - .16mm),color-mix(in srgb,var(--gc) 30%,transparent) calc(50% + .16mm),transparent calc(50% + .16mm));
 --gD2:linear-gradient(to top left,transparent calc(50% - .16mm),color-mix(in srgb,var(--gc) 30%,transparent) calc(50% - .16mm),color-mix(in srgb,var(--gc) 30%,transparent) calc(50% + .16mm),transparent calc(50% + .16mm));
 --gJ:linear-gradient(to right,transparent calc(33.33% - .16mm),var(--gc) calc(33.33% - .16mm),var(--gc) calc(33.33% + .16mm),transparent calc(33.33% + .16mm)),linear-gradient(to right,transparent calc(66.66% - .16mm),var(--gc) calc(66.66% - .16mm),var(--gc) calc(66.66% + .16mm),transparent calc(66.66% + .16mm)),linear-gradient(to bottom,transparent calc(33.33% - .16mm),var(--gc) calc(33.33% - .16mm),var(--gc) calc(33.33% + .16mm),transparent calc(33.33% + .16mm)),linear-gradient(to bottom,transparent calc(66.66% - .16mm),var(--gc) calc(66.66% - .16mm),var(--gc) calc(66.66% + .16mm),transparent calc(66.66% + .16mm))}
.cell .zi{line-height:1;user-select:none;font-family:var(--zf,"KaiTi","楷体","STKaiti","SimSun",serif)}
.cell ruby{display:flex;flex-direction:column;align-items:center;line-height:1.05}

/* ===== 拼音四线格（汉字上方） ===== */
.cell.py-cell{display:block;padding:0;border:none;background-image:none!important;background-color:transparent!important;overflow:visible}
.cell.py-cell::before,.cell.py-cell::after{content:none!important}
.cell.py-cell .hzbox{width:100%;box-sizing:border-box;border:.32mm solid var(--gc);background-image:var(--gbg,none);display:flex;align-items:center;justify-content:center;position:relative}
/* 拼音格：十字/对角由 .hzbox 继承的 --gbg 背景呈现；回字内框画在 .hzbox 上 */
.cell.py-cell.g-h .hzbox::after,.cell.py-cell.g-mh .hzbox::after,.cell.py-cell.g-th .hzbox::after{content:"";position:absolute;left:25%;right:25%;top:25%;bottom:25%;border:.2mm solid var(--gc);opacity:.6}
.cell.py-cell.g-ch .hzbox::after,.cell.py-cell.g-tch .hzbox::after,.cell.py-cell.g-mch .hzbox::after{content:"";position:absolute;left:25%;right:25%;top:12.5%;bottom:12.5%;border:.2mm solid var(--gc);opacity:.6}
.cell.py-cell.g-dwg .hzbox::after{content:"";position:absolute;width:.5mm;height:.5mm;border-radius:50%;background:var(--gc);left:50%;top:50%;transform:translate(-50%,-50%)}
.cell.py-cell .py4{width:100%;box-sizing:border-box;text-align:center;color:#c0392b;font-family:var(--zt-pyfont);line-height:1;position:relative}
/* 拼音四线三格改由内联 SVG（.py4ln）矢量绘制，避免逐字元素贴边渐变细线亚像素丢失；三等分 顶细实/中虚线/基线粗实/底细实 */
.cell.py-cell .py4 .py4ln{position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:none}
.cell.py-cell .py4 .pytxt{position:relative;z-index:1}
/* 连续汉字：拼音四线横向搭进格间 .6mm 缝隙，连成整行（右内边距等量加宽，拼音字仍居中于本字）；仅当下一格也是拼音格时延伸，行末/词末（括号格）不探出 */
.hr>.cell.py-cell:has(+ .cell.py-cell)>.py4{width:calc(100% + .7mm);padding-right:.7mm}
.cell rt{font-family:"KaiTi","楷体","STKaiti",serif;font-size:var(--py,3.6mm);color:#3a3a3a;line-height:1.05;padding-bottom:.4mm}
/* 格子内线 */
/* 格子内线 —— 十字/对角/九宫用背景渐变；回字内框用 ::after（正方形25% / 竖长25%-12.5%），对标 nqez gezi.js */
.cell.g-t{--gbg:var(--gV),var(--gH);background-image:var(--gbg)}
.cell.g-x{--gbg:var(--gD1),var(--gD2);background-image:var(--gbg)}
.cell.g-m{--gbg:var(--gD1),var(--gD2),var(--gV),var(--gH);background-image:var(--gbg)}
.cell.g-j{--gbg:var(--gJ);background-image:var(--gbg)}
/* 回宫族：内框为 50% 正方形（各留 25%） */
.cell.g-h::after,.cell.g-mh::after,.cell.g-th::after{content:"";position:absolute;left:25%;right:25%;top:25%;bottom:25%;border:.2mm solid var(--gc);opacity:.6}
.cell.g-mh{--gbg:var(--gD1),var(--gD2);background-image:var(--gbg)}
.cell.g-th{--gbg:var(--gV),var(--gH);background-image:var(--gbg)}
/* 长回宫族：内框为 50%宽 × 75%高 竖长方形（左右留25%、上下留12.5%） */
.cell.g-ch::after,.cell.g-tch::after,.cell.g-mch::after{content:"";position:absolute;left:25%;right:25%;top:12.5%;bottom:12.5%;border:.2mm solid var(--gc);opacity:.6}
.cell.g-tch{--gbg:var(--gV),var(--gH);background-image:var(--gbg)}
.cell.g-mch{--gbg:var(--gD1),var(--gD2),var(--gV),var(--gH);background-image:var(--gbg)}
.cell .fj{position:absolute;inset:0;z-index:1}
.cell .fj~.zi,.cell .fj~ruby{position:relative;z-index:2}
.stno{position:absolute;line-height:1;z-index:3}
/* 横线格/双横线格：无竖列分隔、单元格全透明（横线由 .ruleov 整幅 SVG 统一绘制，保证粗细一致） */
.cell.g-hg,.cell.g-shx{border:none;background-image:none;background-color:transparent}
.hr:has(>.cell.g-hg),.hr:has(>.cell.g-shx){gap:0}
.cell.g-hg::before,.cell.g-hg::after,.cell.g-shx::before,.cell.g-shx::after{content:none!important;display:none!important}
/* 文章横线格（article）：单元格全透明，横线由每行矢量 SVG .artln 统一绘制，等粗等距 */
.cell.g-art{border:none!important;background-image:none!important;background-color:transparent!important;align-items:flex-end;justify-content:center;padding-bottom:.8mm}
.hr:has(>.cell.g-art){gap:.6mm}
.cell.g-art::before,.cell.g-art::after{content:none!important;display:none!important}
.cell.g-art .zi{font-family:var(--zf,"KaiTi","楷体","STKaiti",serif);font-size:var(--ef,7mm);line-height:1}
.artln{position:absolute;left:0;top:0;z-index:0;pointer-events:none;display:block}
.ruleov{position:absolute;z-index:0;pointer-events:none;box-sizing:border-box}
.hr{position:relative;z-index:1}
.cell.g-dwg::after{content:"";position:absolute;width:.5mm;height:.5mm;border-radius:50%;background:var(--gc);left:50%;top:50%;transform:translate(-50%,-50%)}
.cell.g-n{border:.32mm solid var(--gc)}
/* 四线三格 */
/* 四线三格（逐字母单词格）：顶/底细实，中线稀疏虚线最细，基线粗实（对标 zhi.bmgjx.cn 英语纸） */
.cell.g-l{border:none;border-top:.22mm solid var(--gc);border-bottom:.22mm solid var(--gc)}
.cell.g-l::before{content:"";position:absolute;left:0;right:0;top:50%;height:.4mm;background:var(--gc);transform:translateY(-50%)}
.cell.g-l::after{content:"";position:absolute;left:0;right:0;top:25%;height:.14mm;background:repeating-linear-gradient(to right,var(--gc) 0 1.4mm,transparent 1.4mm 2.3mm)}
.cell.g-l .zi{font-family:var(--zf,"Comic Sans MS","Segoe Script",cursive);font-size:var(--ef,8mm);line-height:1;transform:translateY(-12%)}
/* ===== 整行四线三格（英语/拼音/音标）：4 条横线贯通整行、无竖线，三等分 ===== */
.lrow{position:relative;width:100%;box-sizing:border-box;break-inside:avoid;page-break-inside:avoid;background-color:transparent;
 /* 四线三格（对标 zhi.bmgjx.cn 英语纸）：线1顶 细实 / 线2中 稀疏虚线最细 / 线3基线 粗实（字母坐落，可用--bl改红） / 线4底 细实 */
 background-image:
  linear-gradient(var(--gc),var(--gc)),
  repeating-linear-gradient(to right,var(--gc) 0 3mm,transparent 3mm 5mm),
  linear-gradient(var(--bl,var(--gc)),var(--bl,var(--gc))),
  linear-gradient(var(--gc),var(--gc));
 background-size:100% .2mm,100% .14mm,100% .4mm,100% .2mm;
 background-repeat:no-repeat;
 background-position:0 0,0 33.333%,0 66.667%,0 100%}
.lrow .txt{position:absolute;left:2mm;right:2mm;top:0;bottom:calc(33.33% - 0.16*var(--ef,6mm));margin:0;padding:0;
 display:flex;align-items:flex-end;white-space:nowrap;overflow:hidden;
 font-family:var(--zf,cursive);font-size:var(--ef,6mm);line-height:1;color:var(--ink,#26221d);-webkit-text-stroke:var(--tstroke,0);paint-order:stroke fill}
.lrow .txt.spread{justify-content:space-between}
.lrow .txt.left{justify-content:flex-start;letter-spacing:.3mm}
.lrow .lt,.lrow .w{line-height:1;white-space:nowrap}
.lrow .txt.cols .lt,.lrow .txt.cols .w{flex:1 1 0;text-align:center}
.lrow .wszh{flex:0 0 auto;align-self:center;font-size:.5em;line-height:1;color:#9a9284;font-family:"PingFang SC","Microsoft YaHei","Source Han Sans SC",sans-serif;letter-spacing:0;margin-left:1.8mm;white-space:nowrap}
/* 音标帖专用(.pf)：Segoe UI 度量与英文不同，单独校正基线，使中格符号坐落粗基线L3、垂直居中于中格(虚线L2~L3) */
.lrow.pf .txt{bottom:calc(33.333% - 0.16*var(--ef,6mm));align-items:flex-end}
@media print{
 .lrow{break-inside:avoid!important;page-break-inside:avoid!important}
}
/* 空格子纸：暖色底；十字/对角/内框统一继承上面的 .cell.g-* 基础规则，无需重复定义 */
.cell.empty{background-color:#fffdf8}
/* 横线/双横线必须透明，否则暖色底会盖住下方 .ruleov 矢量横线层（实线变半条、虚线被遮住） */
.cell.g-hg,.cell.g-hg.empty,.cell.g-shx,.cell.g-shx.empty{background-color:transparent!important;border-color:transparent!important}
/* 竖排 */
.vcol{display:flex;flex-direction:column;gap:.6mm}
/* 笔顺 / 控笔 SVG */
.stsvg,.cvsvg{width:100%;height:100%;display:block}
/* 数学 */
.math-row{display:flex;flex-wrap:wrap;gap:2mm;margin-bottom:2.5mm}
.math-item{flex-shrink:0;display:flex;align-items:center;gap:1mm}
.math-item .num{font-family:var(--zf,"KaiTi","楷体","STKaiti",serif);line-height:1}
/* 部首格 */
.radical-cell{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0}
.radical-cell .rad{font-family:var(--zf,"KaiTi","楷体","STKaiti",serif);line-height:1}
.radical-cell .ex{font-family:"KaiTi","楷体","STKaiti",serif;color:var(--ink-soft);line-height:1;letter-spacing:.5mm}

/* ============ 首页模板库 ============ */
.hero{text-align:center;padding:34px 20px 10px}
.hero h1{font-size:30px;color:var(--red-deep);letter-spacing:3px;margin-bottom:8px}
.hero p{font-size:15px;color:var(--ink-soft);line-height:1.8}
.hero .tag{display:inline-block;background:#82af4e;color:#fff;font-size:12px;border-radius:20px;padding:3px 12px;margin-top:8px}
.tpl-wrap{max-width:1400px;margin:0 auto;padding:10px 20px 60px}
.tpl-sec{margin-top:26px}
.tpl-sec h2{font-size:18px;color:var(--orange);border-left:4px solid var(--orange);padding-left:10px;letter-spacing:1px;margin-bottom:14px;display:flex;align-items:center;gap:10px}
.tpl-sec h2 small{font-size:12px;color:#a99c85;font-weight:normal}
.tpl-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:14px}
.tpl-card{background:#fffdf8;border:1px solid var(--line);border-radius:12px;overflow:hidden;transition:.18s;display:block}
.tpl-card:hover{transform:translateY(-3px);box-shadow:0 8px 20px rgba(124,42,29,.14);border-color:var(--red)}
.tpl-thumb{height:118px;background:#fbf6ea;display:flex;align-items:center;justify-content:center;gap:6px;padding:10px}
.tpl-thumb .demo-cell{width:34px;height:34px;border:1.5px solid rgba(142,39,51,.5);position:relative;display:flex;align-items:center;justify-content:center}
.tpl-thumb .demo-cell::before,.tpl-thumb .demo-cell::after{content:"";position:absolute;background:rgba(142,39,51,.35)}
.tpl-thumb .dt::before{left:50%;top:0;bottom:0;width:1px}
.tpl-thumb .dt::after{top:50%;left:0;right:0;height:1px}
.tpl-thumb .dm::before{inset:0;background:linear-gradient(to top right,transparent calc(50% - .5px),rgba(142,39,51,.35) calc(50% - .5px),rgba(142,39,51,.35) calc(50% + .5px),transparent calc(50% + .5px)),linear-gradient(to top left,transparent calc(50% - .5px),rgba(142,39,51,.35) calc(50% - .5px),rgba(142,39,51,.35) calc(50% + .5px),transparent calc(50% + .5px))}
.tpl-thumb .demo-cell .z{font-family:"KaiTi","楷体","STKaiti",serif;font-size:19px;color:#8e2733;position:relative;z-index:2}
.tpl-thumb .dl{border:none;border-top:1.5px solid rgba(142,39,51,.5);border-bottom:1.5px solid rgba(142,39,51,.5);width:34px;height:26px}
.tpl-thumb .dl::before{content:"";position:absolute;left:0;right:0;top:50%;height:1.5px;background:rgba(142,39,51,.5)}
.tpl-thumb .demo-cells{display:grid;grid-template-columns:repeat(4,15px);grid-template-rows:repeat(3,15px);gap:3px}
.tpl-thumb .demo-cells i{border:1px solid rgba(142,39,51,.45)}
.tpl-thumb .svgline{width:34px;height:34px}
.tpl-card h3{font-size:14px;text-align:center;padding:10px 8px 4px;color:var(--ink)}
.tpl-card p{font-size:11.5px;text-align:center;color:#a99c85;padding:0 8px 10px;line-height:1.5}
.footer{text-align:center;padding:26px 20px;color:#a99c85;font-size:12px;border-top:1px solid var(--line);line-height:2}
.footer a{margin:0 8px;color:var(--ink-soft)}
.footer a:hover{color:var(--red-deep)}

/* ============ 加载遮罩 / 弹层 ============ */
#loading{position:fixed;inset:0;z-index:200;background:rgba(243,234,216,.95);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;font-size:14px;color:var(--red-deep);letter-spacing:1px}
.spinner{width:44px;height:44px;border-radius:50%;border:3px solid var(--paper-deep);border-top-color:var(--red-deep);animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
#loading.hide{display:none}
.helpbox{background:#fffdf6;border:1px dashed var(--red);border-radius:10px;padding:12px 16px;margin-bottom:13px;font-size:13px;line-height:1.9;color:var(--ink-soft)}

/* ============ 响应式 ============ */
@media (max-width:1180px){
  .layout{flex-direction:column}
  .panel{position:static;width:100%;max-height:none}
  .papers{overflow-x:auto;align-items:flex-start;padding:4px}
  .paper{flex-shrink:0}
}
@media (max-width:640px){
  .header-inner{padding:9px 12px}
  .logo h1{font-size:18px}
  .logo .domain{display:none}
  .paper{padding:10mm}
  .ph{font-size:13px}
  .hero h1{font-size:22px}
}

/* ============ 打印 ============ */
@page{size:A4;margin:0}
@media print{
  *{-webkit-print-color-adjust:exact!important;print-color-adjust:exact!important}
  body{background:#fff!important;min-height:0!important}
  .site-header,.panel,.pb,#loading{display:none!important}
  .layout{display:block!important;padding:0!important;max-width:none!important}
  .preview{max-width:none!important}
  .papers{display:block!important;gap:0!important;padding:0!important}
  .paper{width:210mm!important;height:292mm!important;min-height:0!important;margin:0!important;box-shadow:none!important;box-sizing:border-box!important;overflow:hidden!important;display:block!important;position:relative!important;padding:14mm 16mm 12mm!important;break-inside:auto!important;transform:none!important}
  .paper .pbody{display:block!important;height:auto!important;min-height:0!important}
  .paper .hl{display:block!important}
  .paper .hr{display:flex!important;flex-direction:row!important;gap:.6mm!important;margin-bottom:2.2mm!important;align-items:flex-end!important;break-inside:avoid!important;page-break-inside:avoid!important}
  .paper .ggrid{border-right-width:.32mm!important;border-bottom-width:.32mm!important}
  .paper .ggrid .hr.gcon{gap:0!important;margin:0!important}
  .paper .pf{position:absolute!important;bottom:6mm!important;left:16mm!important;right:16mm!important;margin:0!important}
}

/* ===== 细虚线格试点（仅 .dsv，由 state.dashSvg 开启；外框保留粗实线，内部细虚线） ===== */
.cell.dsv,.cell.dsv.empty{background-image:none!important}
.cell.dsv.empty{background-color:#fffdf8!important}
.cell.dsv::before,.cell.dsv::after,.cell.dsv.empty::before,.cell.dsv.empty::after{display:none!important}
.cell.dsv .hzbox{background-image:none!important}
.cell.dsv .hzbox::before,.cell.dsv .hzbox::after{display:none!important}
.cell.dsv .zi,.cell.dsv ruby,.cell.dsv .fj,.cell.dsv .stno,.cell.dsv .hzbox>*:not(.gsv){position:relative;z-index:2}
.cell.dsv>.stsvg{position:relative;z-index:2}
/* 实线矢量田字格（笔画补齐等专用）：外框用 .cell 边框，内十字等宽矢量，避免背景渐变横线亚像素变粗 */
.cell.g-tvs{background-image:none!important}

/* ===== 中英繁切换布局适配 ===== */
#parsbox{overflow-x:hidden}
html[lang="en"] #parsbox .formitem>label{font-size:11.5px;min-width:auto}
html[lang="en"] #parsbox select.layui-input{max-width:108px}
html[lang="tw"] #parsbox .formitem>label{font-size:12px}