里（前台和编辑器都是）。
* 因此本文件所有规则都以 .wc-root 开头作用域：
* - 不会污染后台管理界面（antd）本身；
* - class/后代选择器的「优先级（特异性）」高于 Tailwind 的 preflight 重置，
* 所以即使前台引了 Tailwind，标题/段落也不会被它重置掉。
*
* 想改主题？大多数时候只要改下面 L1「设计令牌」里的几个变量即可。
* ========================================================================== */
/* =============================================================================
* L0 · 网络中文字体（Web Fonts）
* 编辑器字体下拉里标注「网络」的字体在此声明 @font-face（经 CDN 懒加载，
* 仅当正文真正用到某字体时浏览器才会下载对应 woff2）。前台与编辑器预览都从
* 这里取，确保「前台＝编辑器」字体一致。@import 必须位于所有规则之前。
* 字体族名（用于编辑器下拉的 value，须与此处一致）：
* LXGW WenKai / Noto Sans SC / Noto Serif SC / ZCOOL KuaiLe / ZCOOL XiaoWei / Ma Shan Zheng
* ========================================================================== */
@import url("https://cdn.jsdelivr.net/npm/lxgw-wenkai-webfont@1.1.0/style.css");
@import url("https://cdn.jsdelivr.net/npm/@fontsource/noto-sans-sc/index.css");
@import url("https://cdn.jsdelivr.net/npm/@fontsource/noto-serif-sc/index.css");
@import url("https://cdn.jsdelivr.net/npm/@fontsource/zcool-kuaile/index.css");
@import url("https://cdn.jsdelivr.net/npm/@fontsource/zcool-xiaowei/index.css");
@import url("https://cdn.jsdelivr.net/npm/@fontsource/ma-shan-zheng/index.css");
/* =============================================================================
* L1 · 设计令牌（Design Tokens）
* 全站统一的颜色 / 圆角 / 间距 / 容器宽度。改这里 = 改全站外观。
* ========================================================================== */
.wc-root {
--wc-color-text: #1e293b; /* 正文文字颜色 */
--wc-color-muted: #64748b; /* 次要 / 辅助文字 */
--wc-color-link: #1d4ed8; /* 链接色 / 主题主色（按钮等） */
--wc-color-border: #e2e8f0; /* 边框 / 分隔线 */
--wc-color-bg: #ffffff; /* 卡片背景 */
--wc-radius: 8px; /* 通用圆角（按钮等） */
--wc-radius-lg: 12px; /* 大圆角（卡片） */
--wc-container: 1120px; /* 内容区默认最大宽度 */
--wc-gap: 24px; /* 栅格默认间距 */
}
/* =============================================================================
* L2 · 防御式重置（Reset）
* 只作用于 .wc-root 内部，自带保底，不依赖外面的 reset。
* ========================================================================== */
.wc-root,
.wc-root *,
.wc-root *::before,
.wc-root *::after { box-sizing: border-box; }
.wc-root {
/* 统一字体基线：前台与编辑器预览都从这里取，保证两端排版完全一致 */
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
"Helvetica Neue", Arial, "PingFang SC", "Microsoft YaHei", sans-serif;
font-size: 16px;
color: var(--wc-color-text);
line-height: 1.6;
word-wrap: break-word;
}
.wc-root img,
.wc-root video {
max-width: 100%;
height: auto;
}
.wc-root a { color: var(--wc-color-link); }
/* 表单控件默认不继承字体，这里强制继承，避免浏览器默认样式造成前后端差异 */
.wc-root button,
.wc-root input,
.wc-root select,
.wc-root textarea { font: inherit; color: inherit; }
.wc-root table { border-collapse: collapse; width: 100%; }
.wc-root th, .wc-root td { border: 1px solid var(--wc-color-border); padding: 8px 12px; text-align: left; }
.wc-root figure { margin: 0; }
.wc-root hr { border: 0; border-top: 1px solid var(--wc-color-border); margin: 24px 0; }
/* =============================================================================
* L3 · 排版（Typography）
* 这一层是「前后端不一致」的根因修复：用 .wc-root 后代选择器显式声明
* 标题/段落/列表的字号字重边距，优先级高于 Tailwind preflight 的裸标签重置，
* 保证前台标题和编辑器里一样大、一样粗。
* ========================================================================== */
.wc-root h1 { font-size: 2.25rem; font-weight: 800; line-height: 1.2; margin: 0 0 .5em; }
.wc-root h2 { font-size: 1.75rem; font-weight: 700; line-height: 1.25; margin: 0 0 .5em; }
.wc-root h3 { font-size: 1.375rem; font-weight: 700; line-height: 1.3; margin: 0 0 .5em; }
.wc-root h4 { font-size: 1.125rem; font-weight: 700; margin: 0 0 .5em; }
.wc-root h5,
.wc-root h6 { font-size: 1rem; font-weight: 700; margin: 0 0 .5em; }
.wc-root p { margin: 0 0 1em; }
.wc-root ul,
.wc-root ol { margin: 0 0 1em; padding-left: 1.5em; }
.wc-root li { margin: .25em 0; }
.wc-root strong,
.wc-root b { font-weight: 700; }
.wc-root blockquote {
margin: 0 0 1em;
padding-left: 1em;
border-left: 3px solid var(--wc-color-border);
color: var(--wc-color-muted);
}
.wc-root code {
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
font-size: .9em;
background: #f1f5f9;
padding: .15em .4em;
border-radius: 4px;
}
/* =============================================================================
* L4 · 区块组件（Block Components）
* 把原来散落在 Go 渲染器和 React 渲染器里的内联样式，统一收拢到这里。
* 两端只输出 class，外观由本文件决定 —— 从此不可能再「漂移」。
* ========================================================================== */
/* ---- 标题 / 段落（对齐由内联 text-align 控制，字号继承 L3） ---- */
.wc-root .wc-heading { }
.wc-root .wc-paragraph { white-space: pre-line; }
/* ---- 图片 ---- */
.wc-root .wc-image { max-width: 100%; height: auto; border-radius: var(--wc-radius); }
/* ---- 按钮 ---- */
.wc-root .wc-btn {
display: inline-block;
padding: 10px 20px;
border-radius: var(--wc-radius);
text-decoration: none;
font-weight: 600;
line-height: 1.2;
cursor: pointer;
transition: opacity .15s ease;
}
.wc-root .wc-btn:hover { opacity: .9; }
.wc-root .wc-btn-primary { background: var(--wc-color-link); color: #fff; }
.wc-root .wc-btn-secondary { background: #e2e8f0; color: #0f172a; }
/* ---- 间距 / 分隔线 ---- */
.wc-root .wc-spacer { width: 100%; }
.wc-root .wc-divider {
border: 0;
border-top: 1px solid var(--wc-color-border);
margin: 24px 0;
}
/* ---- 自定义 HTML（富文本/存量内容容器） ---- */
.wc-root .wc-html :is(h1, h2, h3, h4, h5, h6) { line-height: 1.3; }
.wc-root .wc-html img { max-width: 100%; height: auto; }
/* ---- 主视觉 Hero（背景由内联控制，其余进 CSS） ---- */
.wc-root .wc-hero {
padding: 64px 24px;
text-align: center;
color: #fff;
}
/* 当 hero 被布局包裹层（.wc-block）控制了 padding 时，重置 hero 自身的 CSS padding，
避免两层 padding 叠加导致「后台设置的值不生效」。
[style*="padding"] 确保仅在用户显式设过任一方向 padding 时才重置，
纯宽度/定位设置不会影响默认 64px 内边距。 */
.wc-root .wc-block[style*="padding"] > .wc-hero {
padding: 0;
}
.wc-root .wc-hero-title { font-size: 2.5rem; font-weight: 800; margin: 0 0 12px; color: inherit; }
.wc-root .wc-hero-subtitle { font-size: 1.125rem; opacity: .9; margin: 0 0 20px; color: inherit; }
/* ---- 站点标识 ---- */
.wc-root .wc-logo { font-weight: 700; text-decoration: none; color: inherit; }
.wc-root .wc-logo--sm { font-size: 1rem; }
.wc-root .wc-logo--md { font-size: 1.25rem; }
.wc-root .wc-logo--lg { font-size: 1.75rem; }
/* ---- 导航菜单 ---- */
.wc-root .wc-navmenu ul {
list-style: none;
display: flex;
flex-wrap: wrap;
gap: 20px;
margin: 0;
padding: 0;
}
.wc-root .wc-navmenu a { text-decoration: none; color: #334155; }
.wc-root .wc-navmenu a:hover { color: #0f172a; }
.wc-root .wc-navmenu .wc-nav-sub { flex-direction: column; }
/* 对齐 / 纵向 */
.wc-root .wc-navmenu--center > .wc-nav { justify-content: center; }
.wc-root .wc-navmenu--right > .wc-nav { justify-content: flex-end; }
.wc-root .wc-navmenu--vertical .wc-nav { flex-direction: column; gap: 10px; }
.wc-root .wc-navmenu--vertical .wc-nav-sub { padding-left: 16px; margin-top: 8px; gap: 8px; }
/* 菜单项图标（FontAwesome 按需加载） */
.wc-root .wc-navmenu .wc-nav-icon { margin-right: 6px; font-size: 0.9em; }
/* 悬停下拉子菜单（横向 + dropdown 模式）：
一级子菜单向下弹出，二级及更深向右侧展开 */
.wc-root .wc-navmenu--dropdown .wc-nav-item { position: relative; }
.wc-root .wc-navmenu--dropdown .wc-nav-sub {
display: none;
position: absolute;
top: 100%;
left: 0;
min-width: 180px;
flex-direction: column;
gap: 0;
padding: 6px;
background: #fff;
border: 1px solid #e2e8f0;
border-radius: 10px;
box-shadow: 0 12px 32px rgba(15, 23, 42, .12);
z-index: 60;
}
.wc-root .wc-navmenu--dropdown .wc-nav-sub .wc-nav-sub {
top: -7px;
left: 100%;
}
.wc-root .wc-navmenu--dropdown .wc-nav-item:hover > .wc-nav-sub { display: flex; }
.wc-root .wc-navmenu--dropdown .wc-nav-sub a {
display: block;
padding: 8px 12px;
border-radius: 6px;
white-space: nowrap;
}
.wc-root .wc-navmenu--dropdown .wc-nav-sub a:hover { background: #f1f5f9; }
/* 顶层「有子菜单」项的下拉指示符 */
.wc-root .wc-navmenu--dropdown .wc-nav > .has-children > a::after {
content: "";
display: inline-block;
margin-left: 6px;
border: 4px solid transparent;
border-top-color: currentColor;
transform: translateY(2px);
}
/* 平铺展开（dropdown 关闭时子菜单常显为缩进列表，纵向菜单同款） */
.wc-root .wc-navmenu:not(.wc-navmenu--dropdown):not(.wc-navmenu--vertical) .wc-nav-sub {
padding-left: 12px;
margin-top: 6px;
gap: 6px;
font-size: 0.95em;
}
/* ---- 文章列表 ---- */
.wc-root .wc-postlist--list { display: flex; flex-direction: column; gap: 16px; }
.wc-root .wc-postlist--grid {
display: grid;
gap: 24px;
/* 卡片自动填充换行：每张至少 260px，剩余空间均分 */
grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}
.wc-root .wc-postlist-item {
border: 1px solid var(--wc-color-border);
border-radius: var(--wc-radius-lg);
padding: 20px;
background: var(--wc-color-bg);
}
.wc-root .wc-postlist-item h2 { margin: 0 0 8px; font-size: 1.25rem; }
.wc-root .wc-postlist-item h2 a { color: inherit; text-decoration: none; }
.wc-root .wc-postlist-item h2 a:hover { color: var(--wc-color-link); }
.wc-root .wc-postlist-date { margin: 0 0 8px; font-size: .8rem; color: #94a3b8; }
.wc-root .wc-postlist-summary { margin: 0; color: #475569; line-height: 1.7; }
.wc-root .wc-postlist-empty { color: var(--wc-color-muted); }
/* ---- 内容标题 / 正文注入 / 侧栏 ---- */
.wc-root .wc-posttitle { font-size: 2.25rem; font-weight: 800; margin: 0 0 16px; }
.wc-root .wc-sidebar { }
/* ---- 全站结构外壳（页头 / 页脚 / 主区）----
关键：这些外壳的样式只在这里定义。前台与编辑器预览都套同一个 class，
保证「页头/页脚/主区」在后台编辑时与前台展示完全一致（所见即所得）。 */
.wc-root .wc-site-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
padding: 16px 24px;
border-bottom: 1px solid var(--wc-color-border);
background: #fff;
}
.wc-root .wc-site-footer {
border-top: 1px solid var(--wc-color-border);
background: #f8fafc;
color: var(--wc-color-muted);
padding: 24px;
}
.wc-root .wc-main {
/* 跟随全局「容器宽度」令牌（后台·全站样式可改），不再硬编码 */
max-width: var(--wc-container, 1120px);
margin: 0 auto;
min-height: 40vh;
}
/* ---- 兜底内容：当页面尚未配置区块模板时的文章/列表（同样只受本文件控制） ---- */
.wc-root .wc-list { max-width: var(--wc-container); margin-inline: auto; padding: 32px 24px; }
.wc-root .wc-list-head { margin-bottom: 24px; }
.wc-root .wc-list-desc { margin: 8px 0 0; color: var(--wc-color-muted); }
.wc-root .wc-article {
max-width: 800px;
margin-inline: auto;
padding: 32px 24px;
}
.wc-root .wc-article-card {
border: 1px solid var(--wc-color-border);
border-radius: var(--wc-radius-lg);
background: var(--wc-color-bg);
padding: 32px;
}
.wc-root .wc-article-summary { color: var(--wc-color-muted); margin: 0 0 16px; }
.wc-root .wc-mark { background: #fef9c3; color: #854d0e; border-radius: 3px; padding: 0 .15em; }
/* =============================================================================
* L5 · 栅格系统（Grid System）—— 现代化、多端自适应
* -----------------------------------------------------------------------------
* 三个布局积木，新手只需在编辑器里拖拽 + 选下拉，就能搭出响应式页面：
*
* ① 区块容器 Section —— 一条「整幅背景 + 内容居中限宽」的横栏（页面的"段落带"）
* ② 栅格网格 Grid —— 把内容排成 N 列网格，桌面/平板/手机分别设列数
* ③ 多栏 Columns —— 并排几栏，手机自动竖向堆叠
*
* 断点（手机优先，逐级放大）：
* 手机 < 640px 平板 640–1023px 桌面 ≥ 1024px
* 说明：用媒体查询而非 container query，保证编辑器预览（全宽 iframe）
* 与前台真实视口的断点行为完全一致。
* ========================================================================== */
/* ---- ① 区块容器 Section ---- */
/* 外层 .wc-section 负责整幅背景与上下留白；
内层 .wc-section-inner 负责把内容限宽并水平居中（背景横贯全屏，内容不至于拉太宽）。
动态值（背景、上下留白 --wc-sec-py、限宽 --wc-sec-w）由区块内联传入。 */
.wc-root .wc-section {
width: 100%;
padding-block: var(--wc-sec-py, 48px);
}
/* 通栏 Section：突破所在容器（.wc-main 等）的限宽与内边距，背景撑满整个视口。
margin-inline: calc(50% - 50vw) 是标准 full-bleed 公式，对任意居中限宽容器成立；
100vw 含滚动条宽度，可能产生约 15px 横向溢出，由 .wc-root 的 overflow-x: clip 吸收。 */
.wc-root:not(.wc-editing) {
overflow-x: clip;
}
.wc-root:not(.wc-editing) .wc-section--bleed {
width: auto;
margin-inline: calc(50% - 50vw);
}
.wc-root .wc-section-inner {
max-width: var(--wc-sec-w, var(--wc-container));
margin-inline: auto;
padding-inline: 24px; /* 手机两侧留白 */
}
/* ---- ② 栅格网格 Grid ---- */
/* 两种模式：
A. 固定列数（默认）：桌面/平板/手机分别用 --wc-cols-d / -t / -m 指定列数；
B. 自适应卡片 .wc-grid--auto：不管屏幕多宽，按「卡片最小宽度 --wc-card-min」
自动决定每行放几张、自动换行（最省心，适合卡片/图册）。 */
.wc-root .wc-grid {
display: grid;
gap: var(--wc-gap, 24px);
align-items: var(--wc-grid-align, stretch);
}
/* A. 固定列数 —— 手机优先，逐级覆盖。用 :not(.wc-grid--auto) 避免影响自适应模式 */
.wc-root .wc-grid:not(.wc-grid--auto) {
grid-template-columns: repeat(var(--wc-cols-m, 1), minmax(0, 1fr));
}
@media (min-width: 640px) {
.wc-root .wc-grid:not(.wc-grid--auto) {
grid-template-columns: repeat(var(--wc-cols-t, 2), minmax(0, 1fr));
}
}
@media (min-width: 1024px) {
.wc-root .wc-grid:not(.wc-grid--auto) {
grid-template-columns: repeat(var(--wc-cols-d, 3), minmax(0, 1fr));
}
}
/* B. 自适应卡片 */
.wc-root .wc-grid--auto {
grid-template-columns: repeat(auto-fit, minmax(var(--wc-card-min, 260px), 1fr));
}
/* Grid 列容器：撑满格子高度，供编辑器 drop zone 落点 */
.wc-root .wc-grid-col {
min-width: 0;
display: flex;
flex-direction: column;
}
.wc-root .wc-grid-col > [data-puck-dropzone] {
flex: 1;
min-height: 80px;
}
/* ---- ③ 多栏 Columns ---- */
/* 桌面：各栏等分宽度并排；手机（<640px）：每栏占满整行，自动竖向堆叠。 */
.wc-root .wc-columns {
display: flex;
flex-wrap: wrap;
gap: var(--wc-gap, 24px);
}
.wc-root .wc-column {
flex: 1 1 0;
min-width: 0; /* 允许子项收缩，避免溢出 */
}
/* 比例列宽（如 30/70）：区块内联下发 --wc-col-N 变量，按 nth-child 应用 */
.wc-root .wc-columns--ratio > .wc-column:nth-child(1) { flex: var(--wc-col-0, 1 1 0%); }
.wc-root .wc-columns--ratio > .wc-column:nth-child(2) { flex: var(--wc-col-1, 1 1 0%); }
.wc-root .wc-columns--ratio > .wc-column:nth-child(3) { flex: var(--wc-col-2, 1 1 0%); }
.wc-root .wc-columns--ratio > .wc-column:nth-child(4) { flex: var(--wc-col-3, 1 1 0%); }
@media (max-width: 639.98px) {
/* :nth-child(n) 仅用于把特异性抬到与比例规则一致，保证手机端仍然竖向堆叠 */
.wc-root .wc-columns > .wc-column:nth-child(n) { flex: 1 1 100%; }
}
/* ---- ④ 弹性容器 Container（通用 Flexbox 容器，对标 Elementor Flexbox Container） ----
方向/对齐/换行/间距由区块内联 CSS 变量下发，外观基线在这里统一。 */
.wc-root .wc-flex {
display: flex;
flex-direction: var(--wc-flex-dir, column);
justify-content: var(--wc-flex-justify, flex-start);
align-items: var(--wc-flex-align, stretch);
flex-wrap: var(--wc-flex-wrap, nowrap);
gap: var(--wc-gap, 24px);
position: relative;
min-width: 0;
}
/* 编辑器内：让 Puck 放置区作为 flex 子项占满，便于往容器里拖区块 */
.wc-root .wc-flex > [data-puck-dropzone] {
flex: 1 1 auto;
min-height: 64px;
min-width: 0;
}
/* ---- 区块级可见性：按设备隐藏 ----
仅前台真实隐藏；编辑器画布的根节点带 .wc-editing（见 BlockEditor），
编辑时不隐藏、只由控制台样式做半透明提示，避免区块在画布里消失无法选中。 */
@media (min-width: 1024px) {
.wc-root:not(.wc-editing) .wc-hide-desktop { display: none !important; }
}
@media (min-width: 640px) and (max-width: 1023.98px) {
.wc-root:not(.wc-editing) .wc-hide-tablet { display: none !important; }
}
@media (max-width: 639.98px) {
.wc-root:not(.wc-editing) .wc-hide-mobile { display: none !important; }
}
/* =============================================================================
* L6 · 区块「高级布局」包裹（宽度 / 间距 / 定位）
* -----------------------------------------------------------------------------
* 当某个区块设置了「高级布局」时，前台 Go 渲染器与编辑器 LayoutBox 都会把该
* 区块包进
—— 宽度/最大宽度/对齐/padding/
* margin/position 全部走内联（两端同源），本类只提供安全的盒模型基线。
* 未设置布局的区块不会出现这一层，输出与从前完全一致。
* ========================================================================== */
.wc-root .wc-block { box-sizing: border-box; }
/* 编辑器结构树「隐藏」的区块：前台直接不渲染，编辑器预览里以半透明+虚线提示。 */
.wc-root .wc-block--hidden { opacity: .45; outline: 1px dashed #f59e0b; outline-offset: 2px; }
/* position:absolute 的区块需要一个定位锚点：给常见容器加 relative，
这样「绝对定位」相对其所在的区块容器/栏/主区/外壳定位，符合直觉。 */
.wc-root .wc-section,
.wc-root .wc-section-inner,
.wc-root .wc-hero,
.wc-root .wc-column,
.wc-root .wc-main,
.wc-root .wc-site-header,
.wc-root .wc-site-footer { position: relative; }
/* =============================================================================
* L7 · 编辑器一致性补丁（仅在可视化编辑器内生效）
* -----------------------------------------------------------------------------
* Puck 在外壳与区块之间插入一层放置区 [data-puck-dropzone]。
* 让它作为真实 flex 子项撑满宽度（flex: 1 1 100%），保证全宽区块可通过
* 正常 CSS 宽度链路（dropzone → DropZone-item → wc-block → 区块）铺满。
* 不用 display:contents 的原因：contents 使元素无几何盒子，
* getBoundingClientRect() 返回 0×0，导致画布为空时 Puck DnD 无法落点。
* ========================================================================== */
.wc-root .wc-site-header > [data-puck-dropzone],
.wc-root .wc-site-footer > [data-puck-dropzone] {
flex: 1 1 100%;
min-width: 0;
align-self: stretch;
min-height: 64px;
}
/* 当 header/footer 里有全宽区块时，容器自身的 padding/gap 会在区块四周留出白边。
同时适用编辑器（选择器含 data-puck-dropzone）和前台（.wc-block-full-width 直接子级）。 */
.wc-root .wc-site-header:has(.wc-block-full-width),
.wc-root .wc-site-footer:has(.wc-block-full-width) {
padding: 0;
gap: 0;
}