/* 康熙字典 · 单字释义页专用样式（.zd- 前缀）
—— zidian/〇.html 全部字页共用这一份，改一次所有字页一起生效。
字页骨架完全沿用 zidian.html：顶部 subhero、右侧 side 卡片、footer 均不变，
只把 .main 内的三块列表换成该字的释义内容。所以本文件只管释义内部的排版。
分工：全站框架样式在 css/style.css，本文件只放字页新增的部分，不覆盖、不修改它。
新增一个字页时 里两行照抄，顺序不能反（本文件要在后面才盖得住框架样式）：
改完要上传：cd 起名宝典\qimingbaodian-scf && node _upload_css.js
（CSS 必须明文存储，脚本已带回读校验与 CDN 刷新） */
/* 本页不用标题左侧的渐变竖条（.block-title::before 为全站样式，此处仅本页覆盖，不改 style.css） */
.main .block-title::before{display:none}
.zd-top{display:flex;gap:28px;align-items:stretch}
.zd-mzw{flex:0 0 184px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px}
/* --zd-em 是大字的字号，也是笔形 SVG 的边长：一个汉字正好占一个 em 方框，
两者用同一个变量就永远对得上，手机版只改这一个值 */
.zd-mz{width:172px;height:172px;--zd-em:106px;position:relative;border:1px solid var(--gold);border-radius:10px;background:var(--cream);overflow:hidden}
.zd-mz i{position:absolute;inset:0;pointer-events:none}
.zd-mz i::before,.zd-mz i::after{content:"";position:absolute;background:rgba(195,155,82,.34)}
.zd-mz .c::before{left:50%;top:0;width:1px;height:100%;transform:translateX(-.5px)}
.zd-mz .c::after{top:50%;left:0;height:1px;width:100%;transform:translateY(-.5px)}
/* 对角线长度用百分比（正方形对角线 = 边长×√2 ≈ 141.5%），格子尺寸变了不用跟着改 */
.zd-mz .d::before,.zd-mz .d::after{left:50%;top:50%;width:1px;height:141.5%;transform-origin:center}
.zd-mz .d::before{transform:translate(-.5px,-50%) rotate(45deg)}
.zd-mz .d::after{transform:translate(-.5px,-50%) rotate(-45deg)}
/* 米字格大字用楷体（更贴合康熙字典/起名的书法气质），系统无楷体时回退到站点衬线 --serif。
字页页面与云函数新生成的字页共用这条规则，字体天然一致。
字号取 1.06×em：楷体字形只占 em 方框约 82%×86%，而「描红临摹」的 SVG 笔形（.zd-strokes 是 1.2×em）
实际占约 89%，直接用 1×em 会比描红那版小一圈；实测洞字（分色 64×61、描红 65.7×66.3）按包围盒
面积配平得 ×1.06，这样两个按钮切换时大字视觉一样大 */
.zd-mz b{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-family:"Kaiti SC","STKaiti",KaiTi,"楷体",var(--serif);font-size:calc(var(--zd-em)*1.06);font-weight:700;color:var(--vermilion);line-height:1}
/* 大字统一用朱砂单色（见上面 .zd-mz b 的 color:var(--vermilion)），不再按字形结构分色。
已生成的字页 HTML 里可能仍带 data-split / --cut，这里不再给对应规则，属性变惰性、不影响显示。 */
/* 「结构」那一格把部件拆出来（如 宀 + 辰 上下），统一墨色，只作结构说明；分色已废，原三色变量 --zd-c1/2/3 也一并去掉 */
.zd-parts i{font-style:normal;font-family:var(--serif)}
.zd-parts .sep{font-weight:400;color:var(--muted);margin:0 1px}
.zd-parts em{font-style:normal;font-weight:400;font-size:12px;color:var(--muted);margin-left:5px}
.zd-p1,.zd-p2,.zd-p3{color:var(--ink)}
/* 大字下方的两个模式按钮（整行尺寸与原来那个按钮一致，不改左栏高度、不影响表格行高） */
.zd-modes{display:flex;gap:8px;width:172px}
.zd-mode{flex:1;min-width:0;padding:9px 0;font-size:13px;font-family:inherit;line-height:1.5;color:var(--ink-soft);background:#fff;border:1px solid var(--line);border-radius:999px;cursor:pointer}
.zd-mode:hover{color:var(--vermilion);border-color:var(--gold)}
.zd-mode.on{color:#fff;background:var(--vermilion);border-color:var(--vermilion)}
/* 描红模式：字体画的那个大字整个藏起来，淡影底字改由笔形数据画（.zd-ghost）。
之前底字用字体、逐笔用 path，两套轮廓的字面大小和基线都不一样，怎么调都对不上；
现在底字和每一笔用的是同一份 path，天生严丝合缝 */
.zd-mz.trace b{visibility:hidden}
/* 笔画点选：笔顺那一格改成可点的笔画列表，点一笔就在米字格里画出这一笔的真实笔形，
再点一次擦掉；顺序随便点，写完就一直留在那里不动，只有用户自己点「结构分色」才清空 */
.zd-trace-steps{display:flex;flex-wrap:wrap;gap:6px;justify-content:flex-start;margin-top:4px}
.zd-trace-step{font-size:14px;color:var(--ink-soft);padding:4px 10px;border-radius:999px;cursor:pointer;border:1px solid transparent}
/* 分色模式下这排按钮是 disabled 的：颜色不变（照旧当笔顺看），但不给手型、也不给 hover */
.zd-trace-step:disabled{cursor:default;color:var(--ink-soft);opacity:1}
.zd-trace-step:enabled:hover{border-color:var(--gold);color:var(--ink)}
.zd-trace-step.active{background:var(--vermilion);color:#fff;border-color:var(--vermilion)}
/* 「笔顺」标签后面的点击提示：文案跟着模式变，能点的时候转朱砂色提醒一下 */
.zd-tip{font-style:normal;margin-left:8px;color:var(--muted)}
.zd-tip.on{color:var(--vermilion)}
/* 笔形层：两组 path 共用一套坐标——.zd-ghost 是整字淡影（只在描红模式露出来），
.zd-ink 是已经点亮的那几笔。边长取字号的 1.2 倍，笔形才和分色模式的大字差不多大 */
.zd-strokes{position:absolute;top:50%;left:50%;width:calc(var(--zd-em)*1.2);height:calc(var(--zd-em)*1.2);transform:translate(-50%,-50%);pointer-events:none}
.zd-strokes .zd-ink path{fill:var(--vermilion)}
.zd-strokes .zd-ghost{display:none}
.zd-strokes .zd-ghost path{fill:rgba(32,29,43,.13)}
.zd-mz.trace .zd-strokes .zd-ghost{display:block}
.zd-hd{flex:1;min-width:0;display:flex;flex-direction:column;justify-content:center}
.zd-say{display:inline-flex;align-items:center;gap:4px;font-size:12px;color:var(--muted);background:var(--cream);border:1px solid var(--line);border-radius:999px;padding:3px 10px;cursor:pointer;font-family:inherit;line-height:1.5}
.zd-say:hover{color:var(--vermilion);border-color:var(--gold)}
.zd-say.on{color:var(--vermilion);border-color:var(--gold);background:var(--gold-soft)}
.zd-v{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.zd-v .en{font-size:13px;color:var(--muted);font-weight:400}
/* 左栏（米字格+按钮）高度定住整卡高度，表格 flex:1 跟着拉满，四边与左栏齐平；
行必须用 minmax(0,1fr)：1fr 自带 min-content 下限，一旦内容比左栏高就会反过来把表格顶开、导致左右不齐。
行高 ≈ (米字格 172 + gap 12 + 按钮 39 - 行间细线 3) / 4 ≈ 55px */
.zd-facts{flex:1;display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:auto;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--radius-sm);overflow:hidden}
.zd-facts>div{background:#fff;padding:7px 12px;font-size:14px;display:flex;flex-direction:column;justify-content:center;gap:1px}
.zd-facts>div.wide{grid-column:1/-1}
.zd-facts>div>span{display:block;font-size:12px;line-height:1.5;color:var(--muted)}
.zd-facts b{font-weight:700;line-height:1.5;color:var(--ink)}
.zd-cta{margin-top:14px}
.zd-cta a{display:inline-block;font-size:14px;color:#fff;background:var(--vermilion);border-radius:999px;padding:9px 20px;text-decoration:none}
.zd-cta a:hover{background:var(--vermilion-dark)}
.zd-mzw .zd-cta{margin:0;width:172px}
.zd-mzw .zd-cta a{display:block;width:100%;text-align:center;padding:9px 0;font-size:14px}
.zd-p{font-size:15px;line-height:1.9;color:var(--ink-soft);margin:0 0 12px}
.zd-quote{font-family:var(--serif);font-size:15px;line-height:1.9;color:var(--ink);background:var(--cream);border:1px solid var(--line);border-radius:var(--radius-sm);padding:14px 18px;margin:0 0 16px}
.zd-quote cite{display:block;font-style:normal;font-size:12px;color:var(--muted);margin-top:4px}
.zd-flow dt{font-size:14px;font-weight:700;color:var(--vermilion);margin-bottom:4px}
.zd-flow dd{margin:0 0 14px;font-size:14px;line-height:1.85;color:var(--ink-soft);padding-bottom:14px;border-bottom:1px dashed var(--line)}
.zd-flow dd:last-child{border-bottom:0;padding-bottom:0;margin-bottom:0}
.zd-grid2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.zd-box{border:1px solid var(--line);border-radius:var(--radius-sm);padding:13px 15px;background:#fff}
.zd-box h4{margin:0 0 6px;font-size:14px;color:var(--ink)}
.zd-box p{margin:0;font-size:14px;line-height:1.8;color:var(--ink-soft)}
.zd-box.yi{background:rgba(63,125,110,.05);border-color:rgba(63,125,110,.25)}
.zd-box.ji{background:var(--vermilion-soft);border-color:rgba(192,57,43,.2)}
.zd-list{margin:0;padding-left:18px}
.zd-list li{font-size:14px;line-height:1.85;color:var(--ink-soft);margin-bottom:5px}
.zd-tb{width:100%;border-collapse:collapse;font-size:14px}
.zd-tb th,.zd-tb td{border:1px solid var(--line);padding:9px 12px;text-align:left}
.zd-tb th{background:var(--cream);font-weight:700;color:var(--ink);white-space:nowrap;width:130px}
.zd-tb td{color:var(--ink-soft)}
.zd-cap{margin:10px 0 0;font-size:12px;color:var(--muted);line-height:1.8}
.zd-tags{display:flex;flex-wrap:wrap;gap:8px}
.zd-tags a{font-size:14px;color:var(--ink);background:var(--cream);border:1px solid var(--line);border-radius:999px;padding:6px 14px;text-decoration:none}
.zd-tags a:hover{color:var(--vermilion);border-color:var(--gold)}
.zd-tone{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.zd-tone-3{grid-template-columns:repeat(3,1fr)}
.zd-tone-2{grid-template-columns:repeat(2,1fr)}
.zd-tone-i{display:flex;flex-direction:column;align-items:center;text-align:center;gap:5px;padding:14px 10px;border:1px solid var(--line);border-radius:var(--radius-sm);background:#fff;text-decoration:none}
.zd-tone-i b{font-family:var(--serif);font-size:30px;font-weight:700;color:var(--vermilion);line-height:1}
.zd-tone-i span{font-size:12px;color:var(--muted)}
.zd-tone-i em{font-style:normal;font-size:13px;color:var(--ink-soft);line-height:1.7}
a.zd-tone-i:hover{border-color:var(--gold);background:var(--cream)}
.zd-tone-i.off b{color:var(--ink-soft)}
@media(max-width:700px){
/* 手机版：4 列但左两列窄、右两列宽（.8 : 1.2）——左边米字格区缩小，右侧格子腾出宽度，
避开「宀+辰 上下」这类内容折行；
米字格 + 两个小按钮作为一整列占左两列并跳 3 行；右侧两列正好排满 6 个格（无空洞）。
.zd-hd / .zd-facts 靠 display:contents 拆掉，让各格子直接成为 .zd-top 的 grid 项；
.zd-facts 的背景分隔线随之失效，改为每格自带描边。 */
.zd-top{display:grid;grid-template-columns:.8fr .8fr 1.2fr 1.2fr;gap:8px;text-align:center}
.zd-mzw{display:flex;flex-direction:column;gap:6px;grid-column:1/span 2;grid-row:2/span 3}
.zd-hd{display:contents}
.zd-facts{display:contents}
/* 米字格锁正方形（宽度占满左两列），下方紧跟两个小按钮，三者共同占满左侧 3 行 */
.zd-mz{width:100%;height:auto;aspect-ratio:1;--zd-em:74px}
/* 两个模式按钮在手机上同样并排；高度给足（padding 7px），字号 11px 在 60px 宽的按钮里四字不折行 */
.zd-modes{width:100%;gap:5px}
.zd-mode{padding:7px 0;font-size:11px}
/* 笔画点选列表：手机上尽量把一个字的笔画排成一排（字号、内边距、间距都收紧才塞得下）。
笔画多、又碰上「竖提/横撇/横折」这类双字笔画名的字，总宽会超过 360px 屏的可用宽度，
那就让它折成两行——留着 flex-wrap 就是为这种情况，宁可折行也不能撑宽格子 */
.zd-trace-steps{flex-direction:row;flex-wrap:wrap;width:100%;justify-content:center;align-items:center;margin-top:2px;gap:2px}
/* 形状跟电脑版一致：横着的椭圆胶囊。但横向空间是卡死的（360px 屏上只剩 ~300px），
横向内边距根本加不上去；所以反过来把高度压低（竖向 2px + line-height 1.15）：
单字按钮约 25×21，宽大于高，配 999px 圆角就是横椭圆，而不是宽高相仿的歪圆 */
.zd-trace-step{font-size:13px;padding:2px 5px;line-height:1.15;border-radius:999px}
.zd-facts>div{border:1px solid var(--line);border-radius:10px;background:#fff;padding:7px 6px;gap:1px}
.zd-facts>div>span{font-size:11px}
.zd-facts b{font-size:13.5px}
/* 结构那格里的两个部件字（宀 + 辰）手机上单独收小，连中间的加号一起；后面的结构名不动 */
.zd-parts i,.zd-parts .sep{font-size:11px}
/* 拼音、声调同放第一行并横跨全部列，各取 50%-4px 宽（一左一右对齐），
这样两框在任何屏宽下都是精确各一半、中间仍是 8px 间距，不靠列宽推算；
其余 6 格不写死位置，grid 自动排列从第二行开始、跳过米字格已占的左侧流入右侧两列 */
.zd-facts>div:nth-child(1),.zd-facts>div:nth-child(2){grid-column:1/-1;grid-row:1;width:calc(50% - 4px)}
.zd-facts>div:nth-child(2){justify-self:end}
.zd-facts>div.wide{grid-column:1/-1}
/* 手机版把「英文」挤到最后一行（order:1），「笔顺」就提到它上面去了；
靠 order 而不是改 HTML 顺序，所以电脑版两格的前后不变 */
.zd-facts>div.mlast{order:1}
.zd-facts>div.wide>b{font-weight:400;line-height:1.8}
.zd-v{justify-content:center}
.zd-say{font-size:11px;padding:2px 7px}
/* 手机版：本页卡片左右内边距 24→12px，让卡内各种框（信息格、引文、寓意四格、同音字）更贴近两边；
只限 .main 内的卡，不碰 style.css，其余页面与右侧栏不受影响 */
.main .card{padding:18px 12px}
.zd-tone{grid-template-columns:repeat(2,1fr)}
.zd-grid2{grid-template-columns:1fr}
}