/* ============ 成语查询网站样式 ============ */
/* 设计规范见 docs/design-spec.md */
:root {
--primary: #C82423; /* 暗红，主强调色 */
--primary-dark: #A81D1C;
--primary-soft: #FBEfEA; /* 浅红底（按钮hover/浅红边框） */
--ink: #222222; /* 正文 */
--ink-soft: #666666; /* 次要文字 */
--ink-faint: #999999; /* 辅助文字 */
--bg: #F8F5EE; /* 米浅米色底 */
--card: #FFFFFF;
--border: #EAE5DA;
--gold: #B98A3B;
--radius: 12px;
--shadow: 0 1px 2px rgba(34,34,34,.04), 0 4px 14px rgba(34,34,34,.05);
--font-sans: "Noto Sans SC", "Source Han Sans SC", "PingFang SC", "Microsoft YaHei", "Segoe UI", sans-serif;
--font-serif: "Noto Serif SC", "Source Han Serif SC", "Songti SC", "STSong", "SimSun", serif;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
/* ===== 站群视觉模板（通过 html[data-template="..."] 切换配色）===== */
html[data-template="green"] {
--primary: #2E7D5B;
--primary-dark: #1F5C42;
--primary-soft: #EAF4EF;
--gold: #8B6F2E;
}
html[data-template="blue"] {
--primary: #2B5EA7;
--primary-dark: #1E4578;
--primary-soft: #EAF1F9;
--gold: #7A6A2E;
}
html[data-template="dark"] {
--primary: #C82423;
--primary-dark: #A81D1C;
--primary-soft: #3A2422;
--ink: #E8E4DE;
--ink-soft: #B5AEA6;
--ink-faint: #8A857E;
--bg: #1E1C1A;
--card: #282522;
--border: #3A3531;
--gold: #C89A4B;
}
html { -webkit-text-size-adjust: 100%; }
body {
font-family: var(--font-sans);
color: var(--ink);
background: var(--bg);
line-height: 1.75;
font-size: 16px;
}
a { color: var(--primary); text-decoration: none; }
a:hover { color: var(--primary-dark); }
.container { max-width: 1080px; margin: 0 auto; padding: 0 16px; }
/* ============ 顶部导航 ============ */
.site-header {
position: sticky; top: 0; z-index: 100;
background: #fff;
border-bottom: 1px solid var(--border);
}
.header-inner {
display: flex; align-items: center; gap: 24px;
min-height: 64px; flex-wrap: wrap; padding-top: 10px; padding-bottom: 10px;
}
.logo {
font-family: var(--font-serif);
font-size: 24px; font-weight: 700; color: var(--primary);
white-space: nowrap;
}
.logo:hover { color: var(--primary-dark); }
.nav { display: flex; gap: 8px; }
.nav a {
color: var(--ink-soft); font-size: 15px; letter-spacing: .5px;
padding: 7px 14px; border-radius: 8px;
}
.nav a:hover { color: var(--primary); background: var(--primary-soft); }
/* 搜索框 */
.search-box { position: relative; margin-left: auto; display: flex; flex: 1 1 260px; max-width: 420px; }
.search-box input {
flex: 1; height: 42px; padding: 0 16px;
border: 1px solid var(--border); border-radius: 999px 0 0 999px;
font-size: 15px; outline: none; background: #fff; min-width: 0;
}
.search-box input:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(200,36,35,.12); }
.search-box button {
height: 42px; padding: 0 22px; border: none;
background: var(--primary); color: #fff; font-size: 15px;
border-radius: 0 999px 999px 0; cursor: pointer;
transition: background .15s;
}
.search-box button:hover { background: var(--primary-dark); }
/* 联想下拉 */
.suggest {
position: absolute; top: 50px; left: 0; right: 0;
background: #fff; border: 1px solid var(--border); border-radius: var(--radius);
box-shadow: var(--shadow); overflow: hidden; z-index: 200;
}
.suggest a {
display: flex; justify-content: space-between; gap: 12px;
padding: 10px 14px; border-bottom: 1px solid var(--border);
color: var(--ink); font-size: 15px;
}
.suggest a:last-child { border-bottom: none; }
.suggest a:hover, .suggest a.active { background: var(--primary-soft); }
.suggest .s-pinyin { color: var(--ink-faint); font-size: 13px; }
/* ============ 首页 hero ============ */
.hero { text-align: center; padding: 48px 0 24px; }
.hero h1 {
font-family: var(--font-serif); font-size: 34px; font-weight: 700;
color: var(--ink); margin-bottom: 8px;
}
.hero-sub { color: var(--ink-soft); font-size: 16px; margin-bottom: 24px; }
.hero-sub strong { color: var(--primary); }
.hero-search { display: flex; max-width: 560px; margin: 0 auto; }
.hero-search input {
flex: 1; height: 50px; padding: 0 18px; font-size: 16px;
border: 1px solid var(--border); border-radius: var(--radius) 0 0 var(--radius);
outline: none; min-width: 0;
}
.hero-search input:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(176,58,46,.12); }
.hero-search button {
height: 50px; padding: 0 28px; border: none; font-size: 16px;
background: var(--primary); color: #fff; border-radius: 0 var(--radius) var(--radius) 0; cursor: pointer;
}
.hero-search button:hover { background: var(--primary-dark); }
/* ============ 卡片 ============ */
.card {
background: var(--card); border-radius: var(--radius);
box-shadow: var(--shadow); padding: 24px 28px; margin-bottom: 20px;
}
.card h2 {
position: relative;
font-size: 20px; font-weight: 700; color: var(--ink);
padding-bottom: 10px; margin-bottom: 18px; line-height: 1.4;
}
/* 板块标题：细红色短下划线（替代旧竖线前缀） */
.card h2::after {
content: '';
position: absolute; left: 0; bottom: 0;
width: 40px; height: 3px; border-radius: 2px;
background: var(--primary);
}
/* ============ 拼音索引 ============ */
.letters { display: grid; grid-template-columns: repeat(auto-fill, minmax(78px, 1fr)); gap: 10px; }
.letter {
display: flex; flex-direction: column; align-items: center; justify-content: center;
padding: 10px 4px; border: 1px solid var(--border); border-radius: 8px;
color: var(--primary); font-size: 18px; font-weight: 700; background: #fff;
transition: all .15s;
}
.letter small { color: var(--ink-faint); font-size: 11px; font-weight: 400; }
.letter:hover { border-color: var(--primary); background: var(--primary-soft); }
.letter.empty { color: var(--ink-faint); pointer-events: none; }
/* ============ 热门成语 ============ */
.hot-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px; }
.hot-item {
display: flex; flex-direction: column; gap: 4px;
padding: 14px 16px; border: 1px solid var(--border); border-radius: 8px;
background: #fff; transition: all .15s;
}
.hot-item:hover { border-color: var(--primary); box-shadow: var(--shadow); transform: translateY(-1px); }
.hot-word { font-family: var(--font-serif); font-size: 18px; font-weight: 700; color: var(--ink); }
.hot-pinyin { font-size: 13px; color: var(--gold); }
.hot-expl { font-size: 13px; color: var(--ink-soft); }
/* ============ 面包屑 ============ */
.breadcrumb { padding: 16px 0 4px; font-size: 13px; }
.breadcrumb ol { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; }
.breadcrumb li { color: var(--ink-faint); }
.breadcrumb li + li::before { content: "›"; margin-right: 6px; color: var(--ink-faint); }
/* ============ 详情页 ============ */
.detail-head { text-align: center; padding: 30px 0 12px; }
.detail-head h1 {
font-family: var(--font-serif); font-size: 44px; font-weight: 700;
color: var(--ink); margin-bottom: 8px; letter-spacing: 4px;
}
.detail-head .head-sub {
display: flex; align-items: center; justify-content: center; gap: 14px;
flex-wrap: wrap;
}
.pinyin { font-size: 18px; color: var(--ink-soft); letter-spacing: 3px; display: inline-flex; align-items: center; gap: 6px; }
/* 发音播放按钮（英汉词典） */
.pron-btn {
display: inline-flex; align-items: center; justify-content: center;
width: 28px; height: 28px; border-radius: 50%;
border: 1.5px solid var(--primary); background: var(--primary-soft);
color: var(--primary); font-size: 12px; font-weight: 700;
cursor: pointer; letter-spacing: 0; flex: none;
transition: background .15s, color .15s, transform .1s;
}
.pron-btn:hover { background: var(--primary); color: #fff; }
.pron-btn:active { transform: scale(.92); }
.pron-btn.playing { background: var(--primary); color: #fff; animation: pron-pulse 1s infinite; }
@keyframes pron-pulse {
0%, 100% { box-shadow: 0 0 0 0 rgba(var(--primary-rgb, 200), .4); }
50% { box-shadow: 0 0 0 6px rgba(var(--primary-rgb, 200), 0); }
}
/* 属性标签（红底白字圆角 badge） */
.tags {
display: flex; flex-wrap: wrap; gap: 12px;
justify-content: center; padding: 18px 0 8px;
}
.tag {
display: inline-flex; align-items: center; gap: 6px;
background: var(--primary); color: #fff; border-radius: 999px;
padding: 5px 16px; font-size: 14px; line-height: 1.5;
}
.tag-label { color: rgba(255,255,255,.82); font-size: 12px; }
.tag-value { color: #fff; font-weight: 600; font-size: 14px; }
.explanation { font-size: 18px; line-height: 1.9; }
.story { font-size: 15px; line-height: 1.9; color: var(--ink); }
/* 字段列表 */
.fields { display: flex; flex-direction: column; gap: 16px; }
.field { display: grid; grid-template-columns: 68px 1fr; gap: 14px; }
.field dt {
font-weight: 700; color: var(--primary); font-size: 15px;
padding-top: 2px;
}
.field dd { color: var(--ink); font-size: 15px; line-height: 1.75; }
.field dd.quote {
color: var(--ink-soft); background: var(--bg);
padding: 12px 16px; border-left: 3px solid var(--border); border-radius: 6px;
line-height: 1.75;
}
/* 近反义词 */
.syn-ant { margin-bottom: 12px; }
.syn-ant > strong { display: inline-block; width: 64px; color: var(--primary); font-size: 15px; }
.chips { display: inline-flex; flex-wrap: wrap; gap: 8px; vertical-align: top; }
.chip {
padding: 4px 14px; background: var(--primary-soft); color: var(--primary);
border-radius: 999px; font-size: 14px; border: 1px solid transparent;
}
a.chip:hover { border-color: var(--primary); background: #fff; }
.chip.plain { background: #fff; border: 1px solid var(--border); color: var(--ink-soft); }
/* 带拼音的词条胶囊 */
.chip.chip-py {
display: inline-flex; flex-direction: column; align-items: center;
padding: 4px 14px 5px; line-height: 1.25; gap: 1px;
}
.chip-py .cp-word { font-size: 14px; font-weight: 600; color: var(--primary); }
.chip-py .cp-py { font-size: 11px; color: var(--ink-soft); font-weight: 400; letter-spacing: .2px; }
a.chip-py:hover .cp-word { color: var(--primary); }
/* 国语辞典（词语详情页：多义项 + 例证 + 近反义） */
.dict-revised { display: flex; flex-direction: column; gap: 18px; }
.dr-item { padding-bottom: 16px; border-bottom: 1px dashed var(--border); }
.dr-item:last-child { border-bottom: none; padding-bottom: 0; }
.dr-def { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.dr-num {
color: #fff; background: var(--primary); font-size: 13px; font-weight: 700;
width: 22px; height: 22px; border-radius: 50%; display: inline-flex;
align-items: center; justify-content: center; flex-shrink: 0;
}
.dr-text { font-size: 15px; line-height: 1.75; color: var(--ink); font-weight: 600; }
.dr-type {
font-size: 12px; color: var(--primary); background: var(--primary-soft);
padding: 1px 8px; border-radius: 4px; flex-shrink: 0;
}
.dr-quotes { margin-top: 8px; display: flex; flex-direction: column; gap: 6px; }
.dr-quote {
color: var(--ink-soft); background: var(--bg); font-size: 14px; line-height: 1.7;
padding: 8px 14px; border-left: 3px solid var(--border); border-radius: 4px;
}
.dr-examples { margin-top: 8px; display: flex; flex-direction: column; gap: 6px; }
.dr-example { font-size: 14px; line-height: 1.7; color: var(--ink-soft); padding-left: 14px; }
.dr-rel { margin-top: 8px; display: flex; flex-direction: column; gap: 6px; }
.dr-syn, .dr-ant { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.dr-label {
font-size: 12px; color: var(--primary); border: 1px solid var(--primary);
border-radius: 4px; padding: 0 6px; flex-shrink: 0; line-height: 1.6;
}
.dr-link {
font-size: 14px; color: var(--primary); text-decoration: none;
border-bottom: 1px solid transparent;
}
.dr-link:hover { border-bottom-color: var(--primary); }
.dr-link.plain { color: var(--ink-soft); pointer-events: none; }
/* 分字组词 */
.char-groups { display: flex; flex-direction: column; gap: 14px; }
.cg-row { display: flex; align-items: flex-start; gap: 14px; }
.cg-head {
flex-shrink: 0; width: 34px; height: 34px; border-radius: 8px;
background: var(--primary-soft); color: var(--primary);
display: flex; align-items: center; justify-content: center;
font-size: 18px; font-weight: 700;
}
.cg-row .chips { padding-top: 6px; }
/* 分字组词 tab 切换 */
.char-tabs { display: flex; gap: 8px; margin-bottom: 14px; border-bottom: 1px solid var(--border); }
.char-tabs .tab {
width: 40px; height: 40px; padding: 0; border-radius: 10px;
display: inline-flex; align-items: center; justify-content: center;
font-size: 20px; font-weight: 700; color: var(--ink-soft);
background: var(--bg); border: 1px solid var(--border);
border-bottom: none; margin-bottom: -1px; cursor: pointer;
transition: all .15s;
}
.char-tabs .tab:hover { color: var(--primary); border-color: var(--primary); }
.char-tabs .tab.active {
color: var(--primary); background: var(--primary-soft);
border-color: var(--primary); border-bottom-color: var(--primary-soft);
}
.char-tabs + .tab-panel { padding-top: 4px; }
/* 字典：义项列表 */
.sense-list { display: flex; flex-direction: column; gap: 14px; }
.sense { display: flex; flex-direction: column; gap: 4px; }
.sense-head { display: flex; align-items: center; gap: 10px; }
.sense-num {
flex-shrink: 0; width: 22px; height: 22px; border-radius: 50%;
background: var(--primary-soft); color: var(--primary);
display: inline-flex; align-items: center; justify-content: center;
font-size: 12px; font-weight: 700;
}
.sense-title { font-weight: 700; color: var(--ink); font-size: 15px; }
.sense-pos {
display: inline-block; padding: 1px 10px; border-radius: 999px;
background: var(--primary-soft); color: var(--primary);
font-size: 12px; font-weight: 600; line-height: 1.6;
}
/* 双语例句 */
.example-list { display: flex; flex-direction: column; gap: 14px; }
.example { padding: 12px 16px; background: var(--bg); border-radius: 8px; border-left: 3px solid var(--border); }
.example-en { font-size: 15px; color: var(--ink); line-height: 1.7; font-weight: 500; }
.example-cn { font-size: 14px; color: var(--ink-soft); line-height: 1.7; margin-top: 4px; }
.sense-body { font-size: 15px; color: var(--ink); line-height: 1.8; white-space: pre-line; }
/* 田字格汉字图（伪静态 SVG） */
.grid-figure {
display: flex; justify-content: center; align-items: center;
margin: 4px 0 20px; padding: 4px;
}
.grid-img {
max-width: 100%; height: auto;
border-radius: 10px;
}
/* 趣味延伸 */
.highlight { background: var(--primary-soft); }
.highlight p { margin-bottom: 6px; font-size: 15px; }
.highlight p:last-child { margin-bottom: 0; }
.gold { color: var(--gold); margin-right: 8px; }
.xhy-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; }
.xhy-list li { font-size: 15px; line-height: 1.7; color: var(--ink); padding-left: 18px; position: relative; }
.xhy-list li::before { content: '◆'; position: absolute; left: 0; top: 0; color: var(--gold); font-size: 11px; }
/* 字义分解（等宽卡片网格：PC 一行4个，移动一行2个） */
.char-decompose {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 14px;
align-items: start;
}
.char-decompose > .char-item { min-width: 0; }
.char-item {
display: flex; flex-direction: column; gap: 10px;
background: #fff; border: 1px solid var(--border); border-radius: 12px;
padding: 16px 18px;
}
.char-glyph {
align-self: flex-start;
width: 54px; height: 54px;
display: flex; align-items: center; justify-content: center;
font-family: var(--font-serif); font-size: 34px; font-weight: 700; color: var(--ink);
border: 1.5px dashed var(--primary); border-radius: 10px;
background: var(--primary-soft);
}
.char-meta { min-width: 0; }
.char-pron { font-size: 13px; color: var(--ink-soft); margin-bottom: 6px; line-height: 1.7; }
.char-extra {
display: flex; flex-wrap: wrap; gap: 6px; align-items: center;
margin-bottom: 6px;
}
.char-extra-item {
font-size: 12px; color: var(--gold);
background: #fbf6ec; border: 1px solid #ecdfc5; border-radius: 4px;
padding: 1px 7px; line-height: 1.6;
}
.char-extra-sep { color: var(--ink-faint); font-size: 12px; }
.char-shape { font-size: 13px; color: var(--ink-faint); margin-bottom: 6px; line-height: 1.7; }
.char-senses { list-style: none; display: flex; flex-direction: column; gap: 8px; }
.char-sense { display: flex; gap: 8px; }
.char-sense.extra { display: none; }
.char-item.expanded .char-sense.extra { display: flex; }
.sn-num { flex: 0 0 auto; color: var(--primary); font-size: 14px; font-weight: 700; line-height: 1.75; }
.sn-body { flex: 1; min-width: 0; }
.sn-title { color: var(--ink); font-size: 15px; }
.sn-text { color: var(--ink-soft); font-size: 13px; display: block; line-height: 1.75; margin-top: 2px; }
.expand-sense {
align-self: flex-start;
margin-top: 6px; padding: 6px 16px; font-size: 13px;
color: var(--primary); background: #fff; border: 1px solid var(--primary);
border-radius: 999px; cursor: pointer;
transition: background .15s, color .15s;
}
.expand-sense:hover { background: var(--primary-soft); color: var(--primary-dark); }
.expand-sense:active { background: var(--primary); color: #fff; }
/* 接龙 tab */
.tabs { display: flex; gap: 8px; margin-bottom: 18px; border-bottom: 1px solid var(--border); }
.tab {
padding: 9px 18px; background: none; border: none; cursor: pointer;
font-size: 15px; color: var(--ink-soft); border-bottom: 2px solid transparent;
margin-bottom: -1px; transition: color .15s;
}
.tab:hover { color: var(--primary); }
.tab.active { color: var(--primary); font-weight: 700; border-bottom-color: var(--primary); }
/* 成语接龙链 */
.jielong-chain {
display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 16px;
}
.jielong-node {
display: flex; flex-direction: column; align-items: center; gap: 2px;
padding: 10px 14px; background: #fff; border: 1px solid var(--border); border-radius: 10px;
transition: all .15s; min-width: 82px;
}
.jielong-node:hover { border-color: var(--primary); box-shadow: var(--shadow); transform: translateY(-1px); }
.jielong-node.current { border-color: var(--primary); background: var(--primary-soft); }
.jielong-node .jw { font-family: var(--font-serif); font-size: 16px; font-weight: 700; color: var(--ink); }
.jielong-node.current .jw { color: var(--primary); }
.jielong-node .jp { font-size: 12px; color: var(--ink-faint); }
.jielong-arrow { color: #d5cfc4; font-size: 16px; font-weight: 400; }
.btn-regen {
padding: 7px 20px; font-size: 14px; cursor: pointer;
color: var(--primary); background: #fff; border: 1px solid var(--primary); border-radius: 999px;
transition: background .15s, color .15s;
}
.btn-regen:hover { background: var(--primary-soft); color: var(--primary-dark); }
.btn-regen:active { background: var(--primary); color: #fff; }
.btn-regen:disabled { opacity: .55; cursor: default; }
/* 相关成语 */
.related-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.related-item {
display: flex; flex-direction: column; gap: 5px;
padding: 16px 18px; border: 1px solid var(--border); border-radius: 12px; background: #fff;
transition: all .15s;
}
.related-item:hover {
border-color: var(--primary); box-shadow: var(--shadow);
transform: translateY(-2px);
}
.related-item .rw { font-family: var(--font-serif); font-size: 17px; font-weight: 700; color: var(--ink); }
.related-item .rw-py { font-size: 12px; color: var(--ink-soft); letter-spacing: .2px; }
.related-item small { font-size: 13px; color: var(--ink-soft); line-height: 1.55; }
/* ============ 列表页 ============ */
.list-head { padding: 24px 0 8px; }
.list-head h1 { font-family: var(--font-serif); font-size: 28px; font-weight: 700; color: var(--ink); margin-bottom: 4px; }
.muted { color: var(--ink-soft); font-size: 14px; }
.result-list { background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; }
.result-item {
display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap;
padding: 14px 20px; border-bottom: 1px solid var(--border);
}
.result-item:last-child { border-bottom: none; }
.result-item:hover { background: var(--primary-soft); }
.result-item .rw { font-family: var(--font-serif); font-size: 17px; font-weight: 700; color: var(--primary); white-space: nowrap; }
.result-item .rp { font-size: 13px; color: var(--gold); }
.result-item .re { font-size: 14px; color: var(--ink-soft); flex: 1 1 100%; }
.pager { display: flex; justify-content: center; align-items: center; gap: 16px; padding: 20px 0; }
.pager a {
padding: 6px 16px; border: 1px solid var(--border); border-radius: 6px;
color: var(--primary); background: #fff;
}
.pager a:hover { border-color: var(--primary); background: var(--primary-soft); }
.pager span { color: var(--ink-soft); font-size: 14px; }
/* ============ 空状态 / 404 ============ */
.empty { padding: 24px; color: var(--ink-soft); text-align: center; }
.not-found { text-align: center; padding: 60px 16px; }
.not-found h1 { font-family: var(--font-serif); font-size: 64px; color: var(--border); }
.not-found p { color: var(--ink-soft); margin: 12px 0 20px; }
.not-found .hero-search { margin-bottom: 20px; }
.back a { color: var(--primary); }
/* ============ 页脚 ============ */
.site-footer { background: var(--ink); color: #bdb8b0; margin-top: 40px; }
.footer-inner {
padding: 20px 16px; text-align: center;
display: flex; flex-direction: column; gap: 8px;
}
.footer-nav { display: flex; gap: 20px; justify-content: center; flex-wrap: wrap; }
.footer-nav a { color: #d8d3cc; font-size: 14px; }
.footer-nav a:hover { color: #fff; }
/* 「本站还收录」：比页脚导航更弱的一层，只做可见性，不抢导航位置 */
.footer-hub {
display: flex; flex-wrap: wrap; gap: 6px 14px; justify-content: center;
align-items: baseline; margin-top: 14px; padding-top: 12px;
border-top: 1px solid rgba(255, 255, 255, .08);
}
.footer-hub .fh-label { font-size: 12px; color: #7d7873; }
.footer-hub a { font-size: 13px; color: #a8a29b; }
.footer-hub a:hover { color: #d8d3cc; }
.copyright { font-size: 13px; color: #8f8a83; }
/* ============ 响应式 ============ */
@media (max-width: 640px) {
.header-inner { gap: 12px; }
.nav { display: none; }
.search-box { flex-basis: 100%; max-width: none; order: 3; }
.detail-head h1 { font-size: 34px; letter-spacing: 2px; }
.hero h1 { font-size: 28px; }
.field { grid-template-columns: 1fr; gap: 4px; }
.field dt { padding-top: 0; }
.card { padding: 20px 18px; }
/* 移动端：字义分解 / 相关成语 一行2个 */
.char-decompose { grid-template-columns: repeat(2, 1fr); gap: 12px; }
.related-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
}
@media (min-width: 1024px) {
.container { padding: 0 24px; }
}
/* ====================================================================
站群视觉模板：新中式雅致书卷风（scroll）
仿古籍宣纸阅读界面，温润高级，国风不廉价
宣纸米黄底、墨红主色、墨棕辅助、思源宋体标题 / 思源楷体正文
==================================================================== */
html[data-template="scroll"] {
--primary: #7C2C24; /* 墨红 */
--primary-dark: #5E1F18;
--primary-soft: #F3E9DE; /* 淡墨暖棕底 */
--ink: #2C241C; /* 正文墨色 */
--ink-soft: #776B5D; /* 次要文字 */
--ink-faint: #A4967F; /* 辅助文字 */
--bg: #F7F3E9; /* 宣纸米黄 */
--card: #FFFBF4; /* 卡片笺纸 */
--border: #E4DCCB; /* 淡墨线 */
--gold: #A9712F; /* 古铜金（朱砂印章辅助） */
--radius: 10px;
--shadow: 0 1px 2px rgba(60,45,30,.05), 0 6px 18px rgba(90,68,40,.06);
--font-sans: "Source Han Sans SC", "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;
--font-serif: "Source Han Serif SC", "Noto Serif SC", "Songti SC", "STSong", "SimSun", serif;
/* 书卷专用字体（楷体正文） */
--font-kai: "KaiTi", "STKaiti", "FangSong", "STFangsong", "Noto Serif SC", serif;
}
html[data-template="scroll"] body {
font-family: var(--font-serif);
color: var(--ink);
/* 宣纸肌理：细腻竖纹 + 轻微噪点渐变 */
background-color: var(--bg);
background-image:
radial-gradient(circle at 12% 8%, rgba(122,44,36,.035) 0, transparent 32%),
radial-gradient(circle at 88% 22%, rgba(169,113,47,.028) 0, transparent 28%),
radial-gradient(circle at 18% 78%, rgba(122,44,36,.025) 0, transparent 30%),
radial-gradient(circle at 80% 90%, rgba(169,113,47,.03) 0, transparent 26%),
repeating-linear-gradient(90deg, rgba(120,100,70,.012) 0 1px, transparent 1px 3px);
line-height: 1.85;
letter-spacing: .02em;
}
/* 顶部导航：浅木纹质感（横向木纹纹理） */
html[data-template="scroll"] .site-header {
background:
linear-gradient(rgba(255,251,244,.88), rgba(255,251,244,.88)),
repeating-linear-gradient(0deg, rgba(122,68,40,.06) 0 1px, rgba(255,251,244,0) 1px 4px),
repeating-linear-gradient(90deg, rgba(122,68,40,.018) 0 2px, transparent 2px 9px);
border-bottom: 1px solid var(--border);
box-shadow: 0 1px 0 rgba(122,44,36,.08);
}
html[data-template="scroll"] .logo {
font-family: var(--font-serif);
font-size: 25px;
letter-spacing: 2px;
color: var(--primary);
}
html[data-template="scroll"] .nav a {
font-family: var(--font-serif);
color: var(--ink-soft);
letter-spacing: 1px;
}
html[data-template="scroll"] .nav a:hover {
color: var(--primary);
background: var(--primary-soft);
}
html[data-template="scroll"] .search-box input,
html[data-template="scroll"] .hero-search input {
background: #FFFDF8;
border-color: var(--border);
}
html[data-template="scroll"] .search-box input:focus,
html[data-template="scroll"] .hero-search input:focus {
border-color: var(--primary);
box-shadow: 0 0 0 3px rgba(124,44,36,.10);
}
html[data-template="scroll"] .search-box button,
html[data-template="scroll"] .hero-search button {
background: var(--primary);
color: #FFFDF6;
font-family: var(--font-serif);
letter-spacing: 1px;
}
html[data-template="scroll"] .search-box button:hover,
html[data-template="scroll"] .hero-search button:hover {
background: var(--primary-dark);
}
/* 卡片：仿古籍笺纸（微暖白 + 淡墨描边 + 柔和暖光） */
html[data-template="scroll"] .card {
background: var(--card);
border: 1px solid var(--border);
border-radius: var(--radius);
box-shadow: var(--shadow);
}
html[data-template="scroll"] .card h2 {
font-family: var(--font-serif);
font-size: 21px;
font-weight: 700;
color: var(--ink);
letter-spacing: 1px;
}
/* 板块标题：毛笔小字 + 细墨线 */
html[data-template="scroll"] .card h2::after {
content: '';
position: absolute; left: 0; bottom: 0;
width: 48px; height: 2px;
background: linear-gradient(90deg, var(--primary), rgba(124,44,36,0));
}
/* 详情页头部：书法大字 */
html[data-template="scroll"] .detail-head {
padding: 34px 0 14px;
}
html[data-template="scroll"] .detail-head h1 {
font-family: var(--font-serif);
font-size: 48px;
font-weight: 700;
color: var(--ink);
letter-spacing: 6px;
text-shadow: 0 1px 0 rgba(255,251,244,.8);
}
html[data-template="scroll"] .pinyin {
font-family: var(--font-serif);
color: var(--ink-soft);
letter-spacing: 4px;
}
/* 属性标签：仿古印章样式 */
html[data-template="scroll"] .tag {
background: linear-gradient(135deg, #8A3528, #7C2C24);
color: #FBF3E3;
border-radius: 6px;
padding: 6px 16px;
font-family: var(--font-serif);
font-size: 14px;
letter-spacing: 1px;
box-shadow: inset 0 0 0 1px rgba(255,251,244,.18), 0 2px 4px rgba(90,40,28,.14);
/* 印章式圆角（略方，似朱砂印） */
}
html[data-template="scroll"] .tag-label {
color: rgba(251,243,227,.72);
font-size: 12px;
letter-spacing: .5px;
}
html[data-template="scroll"] .tag-value {
color: #FBF3E3;
font-weight: 600;
}
/* 释义正文：楷体，书卷感 */
html[data-template="scroll"] .explanation {
font-family: var(--font-kai);
font-size: 18px;
line-height: 2;
color: var(--ink);
}
html[data-template="scroll"] .story {
font-family: var(--font-kai);
font-size: 15px;
line-height: 2;
}
html[data-template="scroll"] .field dd {
font-family: var(--font-serif);
color: var(--ink);
}
html[data-template="scroll"] .field dd.quote {
background: #FAF4E9;
border-left: 3px solid var(--primary);
color: var(--ink-soft);
font-family: var(--font-kai);
}
html[data-template="scroll"] .field dt {
color: var(--primary);
font-family: var(--font-serif);
}
/* 近反义词 chips */
html[data-template="scroll"] .chip {
background: var(--primary-soft);
color: var(--primary);
font-family: var(--font-serif);
}
html[data-template="scroll"] a.chip:hover {
border-color: var(--primary);
background: #fff;
}
/* 趣味延伸 */
html[data-template="scroll"] .highlight {
background: var(--primary-soft);
}
html[data-template="scroll"] .gold {
color: var(--gold);
}
/* 字义分解：仿古籍笺纸卡片（边角淡墨晕染） */
html[data-template="scroll"] .char-item {
background:
radial-gradient(circle at 100% 0, rgba(124,44,36,.045) 0, transparent 46%),
radial-gradient(circle at 0 100%, rgba(169,113,47,.04) 0, transparent 42%),
#FFFDF7;
border: 1px solid var(--border);
border-radius: 8px;
box-shadow: var(--shadow);
position: relative;
min-width: 0;
overflow-wrap: break-word;
}
/* 笺纸四角淡墨点 */
html[data-template="scroll"] .char-item::before {
content: '';
position: absolute; inset: 0;
border-radius: 8px;
background:
radial-gradient(circle at 0 0, rgba(124,44,36,.08) 0, transparent 18%),
radial-gradient(circle at 100% 100%, rgba(124,44,36,.07) 0, transparent 18%);
pointer-events: none;
}
html[data-template="scroll"] .char-glyph {
border: 1px solid rgba(124,44,36,.35);
border-radius: 6px;
background: var(--primary-soft);
color: var(--primary);
font-family: var(--font-serif);
box-shadow: inset 0 0 0 3px #FFFDF7;
}
html[data-template="scroll"] .char-extra-item {
color: var(--gold);
background: #FBF5E8;
border: 1px solid #EADCC0;
font-family: var(--font-serif);
}
html[data-template="scroll"] .sn-num {
color: var(--primary);
font-family: var(--font-serif);
}
html[data-template="scroll"] .sn-text {
font-family: var(--font-serif);
}
html[data-template="scroll"] .expand-sense {
font-family: var(--font-serif);
border-color: var(--primary);
color: var(--primary);
border-radius: 6px;
}
html[data-template="scroll"] .expand-sense:hover {
background: var(--primary-soft);
color: var(--primary-dark);
}
html[data-template="scroll"] .expand-sense:active {
background: var(--primary);
color: #FFFDF6;
}
/* 接龙 tab */
html[data-template="scroll"] .tab {
font-family: var(--font-serif);
color: var(--ink-soft);
border-bottom: 2px solid transparent;
}
html[data-template="scroll"] .tab.active {
color: var(--primary);
border-bottom-color: var(--primary);
}
/* 成语接龙：卷轴式 + 毛笔笔锋箭头 */
html[data-template="scroll"] .jielong-node {
background: #FFFDF7;
border: 1px solid var(--border);
border-radius: 6px;
box-shadow: 0 1px 2px rgba(90,68,40,.06);
}
html[data-template="scroll"] .jielong-node .jw {
font-family: var(--font-serif);
color: var(--ink);
}
html[data-template="scroll"] .jielong-node.current {
border-color: var(--primary);
background: var(--primary-soft);
}
html[data-template="scroll"] .jielong-node.current .jw {
color: var(--primary);
}
/* 毛笔笔锋箭头：用渐变的墨迹箭头符号 */
html[data-template="scroll"] .jielong-arrow {
color: var(--primary);
font-family: var(--font-serif);
opacity: .55;
font-size: 15px;
}
html[data-template="scroll"] .btn-regen {
font-family: var(--font-serif);
border-color: var(--primary);
color: var(--primary);
border-radius: 6px;
}
html[data-template="scroll"] .btn-regen:hover {
background: var(--primary-soft);
color: var(--primary-dark);
}
/* 相关成语：笺纸小卡片，hover 浮现淡朱砂印章 */
html[data-template="scroll"] .related-item {
background: #FFFDF7;
border: 1px solid var(--border);
border-radius: 8px;
position: relative;
transition: transform .15s, border-color .15s, box-shadow .15s;
}
html[data-template="scroll"] .related-item:hover {
border-color: rgba(124,44,36,.5);
box-shadow: 0 4px 16px rgba(90,68,40,.10);
transform: translateY(-2px);
}
/* hover 浮现淡朱砂印章 */
html[data-template="scroll"] .related-item::after {
content: '';
position: absolute; right: 10px; bottom: 10px;
width: 16px; height: 16px;
border: 1.5px solid rgba(124,44,36,.45);
border-radius: 3px;
opacity: 0;
transform: scale(.7) rotate(-6deg);
transition: opacity .18s, transform .18s;
}
html[data-template="scroll"] .related-item:hover::after {
opacity: .55;
transform: scale(1) rotate(-6deg);
}
html[data-template="scroll"] .related-item .rw {
font-family: var(--font-serif);
}
/* 热门成语（首页） */
html[data-template="scroll"] .hot-item {
background: #FFFDF7;
border: 1px solid var(--border);
border-radius: 8px;
}
html[data-template="scroll"] .hot-item:hover {
border-color: rgba(124,44,36,.5);
box-shadow: var(--shadow);
}
html[data-template="scroll"] .hot-word {
font-family: var(--font-serif);
}
html[data-template="scroll"] .hot-pinyin {
color: var(--gold);
}
/* 拼音索引字母 */
html[data-template="scroll"] .letter {
font-family: var(--font-serif);
border-color: var(--border);
color: var(--primary);
}
html[data-template="scroll"] .letter:hover {
border-color: var(--primary);
background: var(--primary-soft);
}
/* 首页 hero */
html[data-template="scroll"] .hero h1 {
font-family: var(--font-serif);
letter-spacing: 3px;
}
/* 列表页 */
html[data-template="scroll"] .result-list {
background: var(--card);
border: 1px solid var(--border);
}
html[data-template="scroll"] .result-item .rw {
font-family: var(--font-serif);
color: var(--primary);
}
html[data-template="scroll"] .result-item .rp {
color: var(--gold);
}
/* 页脚：暖木深色 */
html[data-template="scroll"] .site-footer {
background: #2C241C;
color: #C8BEA8;
}
html[data-template="scroll"] .copyright {
color: #9B9077;
font-family: var(--font-serif);
}
/* 焦点可见 */
html[data-template="scroll"] a:focus-visible,
html[data-template="scroll"] button:focus-visible,
html[data-template="scroll"] input:focus-visible {
outline-color: var(--primary);
}
/* ============================================================
暗黑极简静谧阅读风（night）—— 夜间护眼深色主题
琥珀金 #f59e0b 主色，低对比度、弱光晕、极简克制
============================================================ */
html[data-template="night"] {
--primary: #F59E0B; /* 暖琥珀金 */
--primary-dark: #D97706;
--primary-soft: #2A2317; /* 暗金底（按钮hover/淡金边框） */
--ink: #E5E7EB; /* 正文 */
--ink-soft: #9CA3AF; /* 次要文字 */
--ink-faint: #6B7280; /* 辅助文字 */
--bg: #12161D; /* 页面深底 */
--card: #1B212B; /* 卡片深色 */
--border: #2A313C; /* 极简分隔线 */
--gold: #F59E0B;
--radius: 12px;
--shadow: 0 1px 2px rgba(0,0,0,.35), 0 6px 20px rgba(0,0,0,.35);
--font-sans: "Source Han Sans SC", "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;
--font-serif: "Source Han Serif SC", "Noto Serif SC", "Songti SC", serif;
}
html[data-template="night"] body {
font-family: var(--font-sans);
color: var(--ink);
background-color: var(--bg);
/* 低噪点深色肌理 + 微弱径向光晕 */
background-image:
radial-gradient(circle at 50% -10%, rgba(245,158,11,.04) 0, transparent 42%),
radial-gradient(circle at 88% 30%, rgba(245,158,11,.022) 0, transparent 30%),
radial-gradient(circle at 12% 80%, rgba(120,140,170,.03) 0, transparent 34%);
line-height: 1.75;
letter-spacing: .01em;
}
/* 链接色 */
html[data-template="night"] a { color: var(--primary); }
html[data-template="night"] a:hover { color: var(--primary-dark); }
/* 顶部导航：深色悬浮 + 弱发光下边界 */
html[data-template="night"] .site-header {
background: rgba(18,22,29,.86);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border-bottom: 1px solid var(--border);
box-shadow: 0 1px 0 rgba(245,158,11,.06), 0 6px 18px rgba(0,0,0,.28);
}
html[data-template="night"] .logo {
color: var(--primary);
letter-spacing: 1px;
}
html[data-template="night"] .nav a {
color: var(--ink-soft);
}
html[data-template="night"] .nav a:hover {
color: var(--primary);
background: var(--primary-soft);
}
/* 搜索框：弱发光 */
html[data-template="night"] .search-box input,
html[data-template="night"] .hero-search input {
background: var(--card);
border-color: var(--border);
color: var(--ink);
}
html[data-template="night"] .search-box input::placeholder,
html[data-template="night"] .hero-search input::placeholder {
color: var(--ink-faint);
}
html[data-template="night"] .search-box input:focus,
html[data-template="night"] .hero-search input:focus {
border-color: rgba(245,158,11,.6);
box-shadow: 0 0 0 3px rgba(245,158,11,.12), 0 0 12px rgba(245,158,11,.12);
}
html[data-template="night"] .search-box button,
html[data-template="night"] .hero-search button {
background: var(--primary);
color: #1B1204;
font-weight: 600;
}
html[data-template="night"] .search-box button:hover,
html[data-template="night"] .hero-search button:hover {
background: var(--primary-dark);
}
/* 联想下拉 */
html[data-template="night"] .suggest {
background: var(--card);
border-color: var(--border);
box-shadow: var(--shadow);
}
html[data-template="night"] .suggest a {
color: var(--ink);
border-bottom-color: var(--border);
}
html[data-template="night"] .suggest a:hover,
html[data-template="night"] .suggest a.active {
background: var(--primary-soft);
}
html[data-template="night"] .suggest .s-pinyin { color: var(--ink-faint); }
/* 卡片：深色 + 细发光轮廓 + 微弱内发光 */
html[data-template="night"] .card {
background: var(--card);
border: 1px solid var(--border);
border-radius: var(--radius);
box-shadow: var(--shadow), inset 0 1px 0 rgba(255,255,255,.02);
}
html[data-template="night"] .card h2 {
color: var(--ink);
font-weight: 700;
}
/* 板块标题：金色文字 + 细发光横线 */
html[data-template="night"] .card h2::after {
content: '';
position: absolute; left: 0; bottom: 0;
width: 48px; height: 2px;
background: linear-gradient(90deg, var(--primary), rgba(245,158,11,0));
box-shadow: 0 0 10px rgba(245,158,11,.7), 0 0 20px rgba(245,158,11,.35);
}
/* 详情页头部：暖金色主标题 */
html[data-template="night"] .detail-head {
padding: 32px 0 14px;
}
html[data-template="night"] .detail-head h1 {
color: var(--primary);
font-weight: 700;
letter-spacing: 3px;
text-shadow: 0 0 22px rgba(245,158,11,.22);
}
html[data-template="night"] .pinyin {
color: var(--ink-soft);
letter-spacing: 3px;
}
/* 属性标签：深色底 + 金色描边 */
html[data-template="night"] .tag {
background: var(--card);
color: var(--ink);
border: 1px solid rgba(245,158,11,.38);
border-radius: 8px;
padding: 6px 16px;
box-shadow: inset 0 0 0 1px rgba(245,158,11,.06);
}
html[data-template="night"] .tag-label {
color: var(--ink-faint);
}
html[data-template="night"] .tag-value {
color: var(--primary);
font-weight: 600;
}
/* 释义正文 */
html[data-template="night"] .explanation {
color: var(--ink);
}
html[data-template="night"] .story {
color: var(--ink);
}
html[data-template="night"] .field dt {
color: var(--primary);
}
html[data-template="night"] .field dd {
color: var(--ink);
}
html[data-template="night"] .field dd.quote {
background: #161C25;
border-left: 3px solid var(--primary);
color: var(--ink-soft);
}
/* 近反义词 chips */
html[data-template="night"] .chip {
background: var(--primary-soft);
color: var(--primary);
border-color: rgba(245,158,11,.22);
}
html[data-template="night"] a.chip:hover {
border-color: var(--primary);
background: #241B0E;
}
html[data-template="night"] .chip.plain {
background: var(--card);
border-color: var(--border);
color: var(--ink-soft);
}
/* 趣味延伸 */
html[data-template="night"] .highlight {
background: var(--primary-soft);
}
html[data-template="night"] .gold { color: var(--gold); }
/* 字义分解卡片：深色 + 琥珀色柔光边框 */
html[data-template="night"] .char-item {
background: var(--card);
border: 1px solid rgba(245,158,11,.18);
border-radius: 10px;
box-shadow: inset 0 0 0 1px rgba(245,158,11,.03);
min-width: 0;
overflow-wrap: break-word;
}
html[data-template="night"] .char-glyph {
background: #141A22;
border: 1px solid rgba(245,158,11,.28);
color: var(--primary);
box-shadow: 0 0 12px rgba(245,158,11,.08);
}
html[data-template="night"] .char-pron { color: var(--ink-soft); }
html[data-template="night"] .char-extra-item {
color: var(--gold);
background: #221A0C;
border: 1px solid rgba(245,158,11,.22);
}
html[data-template="night"] .char-shape { color: var(--ink-soft); }
html[data-template="night"] .sn-num { color: var(--primary); }
html[data-template="night"] .sn-title { color: var(--ink); }
html[data-template="night"] .sn-text { color: #AEB4BC; }
html[data-template="night"] .expand-sense {
border-color: rgba(245,158,11,.5);
color: var(--primary);
border-radius: 8px;
}
html[data-template="night"] .expand-sense:hover {
background: var(--primary-soft);
color: var(--primary);
}
html[data-template="night"] .expand-sense:active {
background: var(--primary);
color: #1B1204;
}
/* 接龙 tab */
html[data-template="night"] .tab {
color: var(--ink-soft);
border-bottom: 2px solid transparent;
}
html[data-template="night"] .tab:hover { color: var(--primary); }
html[data-template="night"] .tab.active {
color: var(--primary);
border-bottom-color: var(--primary);
}
/* 成语接龙：暗色胶囊卡片 + 暖金箭头 */
html[data-template="night"] .jielong-node {
background: var(--card);
border: 1px solid var(--border);
border-radius: 8px;
box-shadow: 0 1px 3px rgba(0,0,0,.3);
}
html[data-template="night"] .jielong-node:hover {
border-color: rgba(245,158,11,.5);
box-shadow: 0 0 14px rgba(245,158,11,.10);
}
html[data-template="night"] .jielong-node .jw { color: var(--ink); }
html[data-template="night"] .jielong-node.current {
border-color: rgba(245,158,11,.55);
background: #241B0E;
}
html[data-template="night"] .jielong-node.current .jw { color: var(--primary); }
html[data-template="night"] .jielong-node .jp { color: var(--ink-faint); }
html[data-template="night"] .jielong-arrow {
color: var(--primary);
opacity: .6;
}
html[data-template="night"] .btn-regen {
border-color: rgba(245,158,11,.5);
color: var(--primary);
border-radius: 8px;
}
html[data-template="night"] .btn-regen:hover {
background: var(--primary-soft);
color: var(--primary);
}
/* 相关成语：深色卡片，hover 边框微光提亮 */
html[data-template="night"] .related-item {
background: var(--card);
border: 1px solid var(--border);
border-radius: 10px;
transition: transform .15s, border-color .15s, box-shadow .15s;
}
html[data-template="night"] .related-item:hover {
border-color: rgba(245,158,11,.55);
box-shadow: 0 0 18px rgba(245,158,11,.14), 0 6px 18px rgba(0,0,0,.35);
transform: translateY(-2px);
}
html[data-template="night"] .related-item .rw { color: var(--ink); }
html[data-template="night"] .related-item small { color: var(--ink-soft); }
/* 首页 hero */
html[data-template="night"] .hero h1 {
color: var(--ink);
}
html[data-template="night"] .hero-sub { color: var(--ink-soft); }
html[data-template="night"] .hero-sub strong { color: var(--primary); }
/* 拼音索引字母 */
html[data-template="night"] .letter {
background: var(--card);
border-color: var(--border);
color: var(--ink);
}
html[data-template="night"] .letter small { color: var(--ink-faint); }
html[data-template="night"] .letter:hover {
border-color: rgba(245,158,11,.55);
color: var(--primary);
background: var(--primary-soft);
}
html[data-template="night"] .letter.empty { color: var(--ink-faint); }
/* 热门成语（首页） */
html[data-template="night"] .hot-item {
background: var(--card);
border: 1px solid var(--border);
border-radius: 10px;
}
html[data-template="night"] .hot-item:hover {
border-color: rgba(245,158,11,.5);
box-shadow: 0 0 14px rgba(245,158,11,.10);
transform: translateY(-1px);
}
html[data-template="night"] .hot-word { color: var(--ink); }
html[data-template="night"] .hot-pinyin { color: var(--gold); }
/* 列表页 */
html[data-template="night"] .result-list {
background: var(--card);
border: 1px solid var(--border);
box-shadow: var(--shadow);
}
html[data-template="night"] .result-item {
border-bottom-color: var(--border);
}
html[data-template="night"] .result-item:hover { background: var(--primary-soft); }
html[data-template="night"] .result-item .rw { color: var(--primary); }
html[data-template="night"] .result-item .rp { color: var(--gold); }
html[data-template="night"] .result-item .re { color: var(--ink-soft); }
/* 页脚：更深的底 */
html[data-template="night"] .site-footer {
background: #0D1116;
border-top: 1px solid var(--border);
}
html[data-template="night"] .copyright {
color: var(--ink-faint);
}
/* 焦点可见 */
html[data-template="night"] a:focus-visible,
html[data-template="night"] button:focus-visible,
html[data-template="night"] input:focus-visible {
outline-color: var(--primary);
}
/* ============================================================
活泼柔和轻孟菲斯风（memphis）—— 面向学生/小学生群体
珊瑚橘 #f27166 主色，马卡龙柔和配色，圆润泡泡感，低刺激
============================================================ */
html[data-template="memphis"] {
--primary: #F27166; /* 珊瑚橘 */
--primary-dark: #E05A4D;
--primary-soft: #FDECE8; /* 浅橘底 */
--ink: #2D2D2D; /* 正文 */
--ink-soft: #787878; /* 次要文字 */
--ink-faint: #A9A9A9; /* 辅助文字 */
--bg: #FFFBF8; /* 页面奶白底 */
--card: #FFFFFF;
--border: #F1E6DF; /* 柔和暖边 */
--gold: #58A6FF; /* 浅蓝（辅助点缀） */
--radius: 18px; /* 超大圆角 */
--shadow: 0 2px 6px rgba(242,113,102,.08), 0 10px 28px rgba(242,113,102,.10);
--font-sans: "ZCOOL KuaiLe", "Source Han Sans SC", "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;
--font-serif: "ZCOOL KuaiLe", "Source Han Serif SC", "Songti SC", serif;
/* 浅绿辅助色变量 */
--accent-green: #94D890;
--accent-blue: #58A6FF;
}
html[data-template="memphis"] body {
font-family: var(--font-sans);
color: var(--ink);
background-color: var(--bg);
/* 柔和几何点缀：低饱和淡色块 + 圆点肌理 */
background-image:
radial-gradient(circle at 8% 6%, rgba(88,166,255,.06) 0, transparent 24%),
radial-gradient(circle at 92% 18%, rgba(242,113,102,.07) 0, transparent 26%),
radial-gradient(circle at 14% 84%, rgba(148,216,144,.07) 0, transparent 26%),
radial-gradient(circle at 84% 88%, rgba(242,113,102,.05) 0, transparent 24%),
radial-gradient(circle at 50% 50%, rgba(88,166,255,.02) 0, transparent 40%);
line-height: 1.8;
}
/* 链接 */
html[data-template="memphis"] a { color: var(--primary); }
html[data-template="memphis"] a:hover { color: var(--primary-dark); }
/* 顶部导航：圆角 + 柔和 */
html[data-template="memphis"] .site-header {
background: rgba(255,251,248,.92);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
border-bottom: 1px solid var(--border);
box-shadow: 0 2px 14px rgba(242,113,102,.08);
}
html[data-template="memphis"] .logo {
color: var(--primary);
letter-spacing: 1px;
}
html[data-template="memphis"] .nav a {
color: var(--ink-soft);
border-radius: 999px;
letter-spacing: .5px;
}
html[data-template="memphis"] .nav a:hover {
color: var(--primary);
background: var(--primary-soft);
}
/* 搜索框：可爱圆角 */
html[data-template="memphis"] .search-box input,
html[data-template="memphis"] .hero-search input {
background: #fff;
border-color: var(--border);
border-radius: 999px;
color: var(--ink);
}
html[data-template="memphis"] .search-box input:focus,
html[data-template="memphis"] .hero-search input:focus {
border-color: var(--primary);
box-shadow: 0 0 0 4px rgba(242,113,102,.12);
}
html[data-template="memphis"] .search-box button,
html[data-template="memphis"] .hero-search button {
background: var(--primary);
color: #fff;
border-radius: 999px;
font-weight: 600;
}
html[data-template="memphis"] .search-box button:hover,
html[data-template="memphis"] .hero-search button:hover {
background: var(--primary-dark);
}
/* 联想下拉 */
html[data-template="memphis"] .suggest {
background: #fff;
border-color: var(--border);
border-radius: 16px;
box-shadow: var(--shadow);
}
html[data-template="memphis"] .suggest a {
color: var(--ink);
border-bottom-color: var(--border);
}
html[data-template="memphis"] .suggest a:hover,
html[data-template="memphis"] .suggest a.active {
background: var(--primary-soft);
}
html[data-template="memphis"] .suggest .s-pinyin { color: var(--ink-faint); }
/* 卡片：超大圆角 + 软阴影泡泡感 */
html[data-template="memphis"] .card {
background: var(--card);
border: 1px solid var(--border);
border-radius: var(--radius);
box-shadow: var(--shadow);
}
html[data-template="memphis"] .card h2 {
color: var(--ink);
font-weight: 700;
letter-spacing: .5px;
}
/* 板块标题：前面配小圆形装饰点 */
html[data-template="memphis"] .card h2::before {
content: '';
display: inline-block;
width: 12px; height: 12px;
border-radius: 50%;
background: var(--primary);
margin-right: 10px;
vertical-align: -1px;
box-shadow: 0 0 0 4px rgba(242,113,102,.14);
}
/* 详情页头部：粗圆体大字 */
html[data-template="memphis"] .detail-head {
padding: 34px 0 14px;
}
html[data-template="memphis"] .detail-head h1 {
color: var(--ink);
font-weight: 700;
letter-spacing: 3px;
}
html[data-template="memphis"] .pinyin {
color: var(--ink-soft);
letter-spacing: 3px;
}
/* 属性标签：彩色圆角泡泡标签 */
html[data-template="memphis"] .tag {
background: #fff;
color: var(--ink);
border: 1px solid var(--border);
border-radius: 999px;
padding: 6px 16px;
box-shadow: 0 2px 6px rgba(242,113,102,.08);
}
html[data-template="memphis"] .tag:nth-child(3n+1) { border-color: rgba(242,113,102,.30); background: #FFF4F1; }
html[data-template="memphis"] .tag:nth-child(3n+2) { border-color: rgba(88,166,255,.30); background: #F1F7FF; }
html[data-template="memphis"] .tag:nth-child(3n) { border-color: rgba(148,216,144,.35); background: #F3FAF2; }
html[data-template="memphis"] .tag-label {
color: var(--ink-faint);
}
html[data-template="memphis"] .tag-value {
color: var(--primary);
font-weight: 700;
}
/* 释义正文 */
html[data-template="memphis"] .explanation { color: var(--ink); }
html[data-template="memphis"] .story { color: var(--ink); }
html[data-template="memphis"] .field dt { color: var(--primary); }
html[data-template="memphis"] .field dd { color: var(--ink); }
html[data-template="memphis"] .field dd.quote {
background: #FFF7F4;
border-left: 3px solid var(--primary);
color: var(--ink-soft);
}
/* 近反义词 chips：彩色圆角 */
html[data-template="memphis"] .chip {
background: var(--primary-soft);
color: var(--primary);
border-radius: 999px;
border-color: rgba(242,113,102,.22);
}
html[data-template="memphis"] a.chip:hover {
border-color: var(--primary);
background: #FFE8E3;
}
html[data-template="memphis"] .chip.plain {
background: #fff;
border-color: var(--border);
color: var(--ink-soft);
}
/* 趣味延伸 */
html[data-template="memphis"] .highlight { background: var(--primary-soft); }
html[data-template="memphis"] .gold { color: var(--gold); }
/* 字义分解卡片：超大圆角 + 角落淡彩小弧线 */
html[data-template="memphis"] .char-item {
background: #fff;
border: 1px solid var(--border);
border-radius: 22px;
box-shadow: var(--shadow);
position: relative;
overflow: hidden;
min-width: 0;
overflow-wrap: break-word;
}
/* 角落淡彩色小弧线装饰 */
html[data-template="memphis"] .char-item::before {
content: '';
position: absolute; top: -22px; right: -22px;
width: 56px; height: 56px;
border-radius: 50%;
border: 6px solid rgba(88,166,255,.12);
pointer-events: none;
}
html[data-template="memphis"] .char-item::after {
content: '';
position: absolute; bottom: -18px; left: -18px;
width: 40px; height: 40px;
border-radius: 50%;
background: rgba(148,216,144,.14);
pointer-events: none;
}
html[data-template="memphis"] .char-glyph {
background: #FFF3F0;
border: 2px solid rgba(242,113,102,.28);
border-radius: 14px;
color: var(--primary);
}
html[data-template="memphis"] .char-pron { color: var(--ink-soft); }
html[data-template="memphis"] .char-extra-item {
color: var(--accent-blue);
background: #F1F7FF;
border: 1px solid rgba(88,166,255,.25);
border-radius: 999px;
}
html[data-template="memphis"] .char-shape { color: var(--ink-faint); }
html[data-template="memphis"] .sn-num { color: var(--primary); }
html[data-template="memphis"] .sn-title { color: var(--ink); }
html[data-template="memphis"] .sn-text { color: var(--ink-soft); }
html[data-template="memphis"] .expand-sense {
border-color: rgba(242,113,102,.5);
color: var(--primary);
border-radius: 999px;
}
html[data-template="memphis"] .expand-sense:hover {
background: var(--primary-soft);
color: var(--primary-dark);
}
html[data-template="memphis"] .expand-sense:active {
background: var(--primary);
color: #fff;
}
/* 接龙 tab */
html[data-template="memphis"] .tab {
color: var(--ink-soft);
border-bottom: 2px solid transparent;
}
html[data-template="memphis"] .tab:hover { color: var(--primary); }
html[data-template="memphis"] .tab.active {
color: var(--primary);
border-bottom-color: var(--primary);
}
/* 成语接龙：彩色圆角胶囊卡片 + 圆润箭头 */
html[data-template="memphis"] .jielong-node {
background: #fff;
border: 1px solid var(--border);
border-radius: 999px;
box-shadow: 0 2px 6px rgba(242,113,102,.08);
}
html[data-template="memphis"] .jielong-node:hover {
border-color: var(--primary);
box-shadow: 0 4px 12px rgba(242,113,102,.14);
transform: translateY(-1px);
}
html[data-template="memphis"] .jielong-node .jw { color: var(--ink); }
html[data-template="memphis"] .jielong-node.current {
border-color: var(--primary);
background: var(--primary-soft);
}
html[data-template="memphis"] .jielong-node.current .jw { color: var(--primary); }
html[data-template="memphis"] .jielong-node .jp { color: var(--ink-faint); }
html[data-template="memphis"] .jielong-arrow {
color: var(--primary);
opacity: .6;
font-size: 16px;
}
html[data-template="memphis"] .btn-regen {
border-color: rgba(242,113,102,.5);
color: var(--primary);
border-radius: 999px;
}
html[data-template="memphis"] .btn-regen:hover {
background: var(--primary-soft);
color: var(--primary-dark);
}
/* 相关成语：圆角卡片，hover 淡彩色底 */
html[data-template="memphis"] .related-item {
background: #fff;
border: 1px solid var(--border);
border-radius: 16px;
transition: transform .15s, background .15s, border-color .15s, box-shadow .15s;
}
html[data-template="memphis"] .related-item:hover {
background: #FFF4F1;
border-color: rgba(242,113,102,.35);
box-shadow: 0 6px 16px rgba(242,113,102,.12);
transform: translateY(-2px);
}
html[data-template="memphis"] .related-item .rw { color: var(--ink); }
html[data-template="memphis"] .related-item small { color: var(--ink-soft); }
/* 首页 hero */
html[data-template="memphis"] .hero h1 { color: var(--ink); }
html[data-template="memphis"] .hero-sub { color: var(--ink-soft); }
html[data-template="memphis"] .hero-sub strong { color: var(--primary); }
/* 拼音索引字母：彩色圆角格 */
html[data-template="memphis"] .letter {
background: #fff;
border-color: var(--border);
border-radius: 14px;
color: var(--ink);
}
html[data-template="memphis"] .letter small { color: var(--ink-faint); }
html[data-template="memphis"] .letter:hover {
border-color: var(--primary);
color: var(--primary);
background: var(--primary-soft);
}
html[data-template="memphis"] .letter.empty { color: var(--ink-faint); }
/* 热门成语（首页） */
html[data-template="memphis"] .hot-item {
background: #fff;
border: 1px solid var(--border);
border-radius: 16px;
}
html[data-template="memphis"] .hot-item:hover {
border-color: rgba(242,113,102,.35);
background: #FFF4F1;
box-shadow: 0 6px 16px rgba(242,113,102,.12);
transform: translateY(-1px);
}
html[data-template="memphis"] .hot-word { color: var(--ink); }
html[data-template="memphis"] .hot-pinyin { color: var(--accent-blue); }
/* 列表页 */
html[data-template="memphis"] .result-list {
background: #fff;
border: 1px solid var(--border);
border-radius: var(--radius);
box-shadow: var(--shadow);
}
html[data-template="memphis"] .result-item { border-bottom-color: var(--border); }
html[data-template="memphis"] .result-item:hover { background: var(--primary-soft); }
html[data-template="memphis"] .result-item .rw { color: var(--primary); }
html[data-template="memphis"] .result-item .rp { color: var(--accent-blue); }
html[data-template="memphis"] .result-item .re { color: var(--ink-soft); }
/* 页脚 */
html[data-template="memphis"] .site-footer {
background: #2D2D2D;
color: #D8D2CE;
}
html[data-template="memphis"] .copyright { color: #A9A29D; }
/* 焦点可见 */
html[data-template="memphis"] a:focus-visible,
html[data-template="memphis"] button:focus-visible,
html[data-template="memphis"] input:focus-visible {
outline-color: var(--primary);
}
/* ============================================================
日系清新动漫风（anime）—— 治愈校园二次元轻质感
浅紫蓝 #7289da 主色 + 淡樱粉 #ffb8c2 辅助，低饱和柔和，克制不花哨
============================================================ */
html[data-template="anime"] {
--primary: #7289DA; /* 浅紫蓝 */
--primary-dark: #5B6FC4;
--primary-soft: #EEF1FC; /* 淡紫蓝底 */
--ink: #2B2B2B; /* 正文 */
--ink-soft: #777777; /* 次要文字 */
--ink-faint: #A8A8B8; /* 辅助文字 */
--bg: #F8FAFF; /* 页面淡蓝白底 */
--card: #FFFFFF;
--border: #E8ECF7; /* 淡蓝灰边 */
--gold: #FFB8C2; /* 淡樱粉（辅助点缀） */
--radius: 20px; /* 云朵大圆角 */
--shadow: 0 2px 8px rgba(114,137,218,.08), 0 12px 32px rgba(114,137,218,.10);
--font-sans: "Alibaba PuHuiTi", "Alibaba PuHuiTi 2.0", "Source Han Sans SC", "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;
--font-serif: "Alibaba PuHuiTi", "Source Han Serif SC", "Songti SC", serif;
/* 淡樱粉辅助色变量 */
--accent-pink: #FFB8C2;
--accent-blue: #7289DA;
}
html[data-template="anime"] body {
font-family: var(--font-sans);
color: var(--ink);
background-color: var(--bg);
/* 柔和水彩噪点 + 柔和渐变光晕 + 淡樱花暗纹 */
background-image:
radial-gradient(circle at 12% 4%, rgba(255,184,194,.10) 0, transparent 26%),
radial-gradient(circle at 90% 12%, rgba(114,137,218,.09) 0, transparent 28%),
radial-gradient(circle at 8% 86%, rgba(114,137,218,.08) 0, transparent 26%),
radial-gradient(circle at 88% 90%, rgba(255,184,194,.09) 0, transparent 24%),
radial-gradient(circle at 50% 50%, rgba(255,255,255,.4) 0, transparent 50%);
line-height: 1.8;
letter-spacing: .01em;
}
/* 链接 */
html[data-template="anime"] a { color: var(--primary); }
html[data-template="anime"] a:hover { color: var(--primary-dark); }
/* 顶部导航：圆润圆角 + 柔和渐变 */
html[data-template="anime"] .site-header {
background: rgba(248,250,255,.88);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border-bottom: 1px solid var(--border);
box-shadow: 0 2px 16px rgba(114,137,218,.08);
}
html[data-template="anime"] .logo {
color: var(--primary);
letter-spacing: 1px;
}
html[data-template="anime"] .nav a {
color: var(--ink-soft);
border-radius: 999px;
letter-spacing: .5px;
}
html[data-template="anime"] .nav a:hover {
color: var(--primary);
background: var(--primary-soft);
}
/* 搜索框：柔和渐变 */
html[data-template="anime"] .search-box input,
html[data-template="anime"] .hero-search input {
background: #fff;
border-color: var(--border);
border-radius: 999px;
color: var(--ink);
}
html[data-template="anime"] .search-box input:focus,
html[data-template="anime"] .hero-search input:focus {
border-color: var(--primary);
box-shadow: 0 0 0 4px rgba(114,137,218,.12);
}
html[data-template="anime"] .search-box button,
html[data-template="anime"] .hero-search button {
background: linear-gradient(135deg, #8496E4, #7289DA);
color: #fff;
border-radius: 999px;
font-weight: 600;
}
html[data-template="anime"] .search-box button:hover,
html[data-template="anime"] .hero-search button:hover {
background: linear-gradient(135deg, #7289DA, #5B6FC4);
}
/* 联想下拉 */
html[data-template="anime"] .suggest {
background: #fff;
border-color: var(--border);
border-radius: 18px;
box-shadow: var(--shadow);
}
html[data-template="anime"] .suggest a {
color: var(--ink);
border-bottom-color: var(--border);
}
html[data-template="anime"] .suggest a:hover,
html[data-template="anime"] .suggest a.active {
background: var(--primary-soft);
}
html[data-template="anime"] .suggest .s-pinyin { color: var(--ink-faint); }
/* 卡片：云朵大圆角 + 软阴影 */
html[data-template="anime"] .card {
background: var(--card);
border: 1px solid var(--border);
border-radius: var(--radius);
box-shadow: var(--shadow);
}
html[data-template="anime"] .card h2 {
color: var(--ink);
font-weight: 700;
letter-spacing: .5px;
}
/* 板块标题：前方配小小书本简绘图标（CSS 绘制，避免 emoji 字体缺失变方块） */
html[data-template="anime"] .card h2 {
position: relative;
padding-left: 36px;
}
html[data-template="anime"] .card h2::before {
content: '';
position: absolute; left: 0; top: 50%;
transform: translateY(-50%);
width: 22px; height: 17px;
border-radius: 3px;
background: linear-gradient(135deg, #8496E4, #7289DA);
box-shadow: 0 2px 5px rgba(114,137,218,.30);
}
/* 书脊中线 */
html[data-template="anime"] .card h2::after {
content: '';
position: absolute; left: 5px; top: 50%;
transform: translateY(-50%);
width: 2px; height: 11px;
border-radius: 1px;
background: #fff;
}
/* 详情页头部：大字圆润标题 */
html[data-template="anime"] .detail-head {
padding: 34px 0 14px;
}
html[data-template="anime"] .detail-head h1 {
color: var(--ink);
font-weight: 700;
letter-spacing: 3px;
}
html[data-template="anime"] .pinyin {
color: var(--ink-soft);
letter-spacing: 3px;
}
/* 属性标签：淡渐变胶囊圆角标签 */
html[data-template="anime"] .tag {
background: #fff;
color: var(--ink);
border: 1px solid var(--border);
border-radius: 999px;
padding: 6px 16px;
box-shadow: 0 2px 8px rgba(114,137,218,.08);
}
html[data-template="anime"] .tag:nth-child(3n+1) { border-color: rgba(114,137,218,.28); background: linear-gradient(135deg, #F2F5FF, #FBFBFE); }
html[data-template="anime"] .tag:nth-child(3n+2) { border-color: rgba(255,184,194,.35); background: linear-gradient(135deg, #FFF4F6, #FFFBFB); }
html[data-template="anime"] .tag:nth-child(3n) { border-color: rgba(114,137,218,.20); background: linear-gradient(135deg, #F7F9FF, #FDFDFF); }
html[data-template="anime"] .tag-label {
color: var(--ink-faint);
}
html[data-template="anime"] .tag-value {
color: var(--primary);
font-weight: 700;
}
/* 释义正文 */
html[data-template="anime"] .explanation { color: var(--ink); }
html[data-template="anime"] .story { color: var(--ink); }
html[data-template="anime"] .field dt { color: var(--primary); }
html[data-template="anime"] .field dd { color: var(--ink); }
html[data-template="anime"] .field dd.quote {
background: #F6F8FF;
border-left: 3px solid var(--primary);
color: var(--ink-soft);
}
/* 近反义词 chips：淡渐变胶囊 */
html[data-template="anime"] .chip {
background: var(--primary-soft);
color: var(--primary);
border-radius: 999px;
border-color: rgba(114,137,218,.22);
}
html[data-template="anime"] a.chip:hover {
border-color: var(--primary);
background: #E6EBFC;
}
html[data-template="anime"] .chip.plain {
background: #fff;
border-color: var(--border);
color: var(--ink-soft);
}
/* 趣味延伸 */
html[data-template="anime"] .highlight { background: var(--primary-soft); }
html[data-template="anime"] .gold { color: var(--accent-pink); }
/* 字义分解卡片：超大圆角 + 角落淡色小装饰 */
html[data-template="anime"] .char-item {
background: #fff;
border: 1px solid var(--border);
border-radius: 24px;
box-shadow: var(--shadow);
position: relative;
overflow: hidden;
min-width: 0;
overflow-wrap: break-word;
}
/* 角落淡色小装饰（迷你书卷/云朵弧线） */
html[data-template="anime"] .char-item::before {
content: '';
position: absolute; top: -24px; right: -24px;
width: 60px; height: 60px;
border-radius: 50%;
border: 7px solid rgba(114,137,218,.10);
pointer-events: none;
}
html[data-template="anime"] .char-item::after {
content: '';
position: absolute; bottom: -16px; left: -16px;
width: 36px; height: 36px;
border-radius: 50%;
background: rgba(255,184,194,.16);
pointer-events: none;
}
html[data-template="anime"] .char-glyph {
background: #F2F5FF;
border: 2px solid rgba(114,137,218,.28);
border-radius: 14px;
color: var(--primary);
}
html[data-template="anime"] .char-pron { color: var(--ink-soft); }
html[data-template="anime"] .char-extra-item {
color: var(--primary);
background: #F2F5FF;
border: 1px solid rgba(114,137,218,.22);
border-radius: 999px;
}
html[data-template="anime"] .char-shape { color: var(--ink-faint); }
html[data-template="anime"] .sn-num { color: var(--primary); }
html[data-template="anime"] .sn-title { color: var(--ink); }
html[data-template="anime"] .sn-text { color: var(--ink-soft); }
html[data-template="anime"] .expand-sense {
border-color: rgba(114,137,218,.5);
color: var(--primary);
border-radius: 999px;
}
html[data-template="anime"] .expand-sense:hover {
background: var(--primary-soft);
color: var(--primary-dark);
}
html[data-template="anime"] .expand-sense:active {
background: var(--primary);
color: #fff;
}
/* 接龙 tab */
html[data-template="anime"] .tab {
color: var(--ink-soft);
border-bottom: 2px solid transparent;
}
html[data-template="anime"] .tab:hover { color: var(--primary); }
html[data-template="anime"] .tab.active {
color: var(--primary);
border-bottom-color: var(--primary);
}
/* 成语接龙：柔和圆角卡片 + 弧形圆润箭头 */
html[data-template="anime"] .jielong-node {
background: #fff;
border: 1px solid var(--border);
border-radius: 999px;
box-shadow: 0 2px 8px rgba(114,137,218,.08);
}
html[data-template="anime"] .jielong-node:hover {
border-color: var(--primary);
box-shadow: 0 4px 14px rgba(114,137,218,.14);
transform: translateY(-1px);
}
html[data-template="anime"] .jielong-node .jw { color: var(--ink); }
html[data-template="anime"] .jielong-node.current {
border-color: var(--primary);
background: var(--primary-soft);
}
html[data-template="anime"] .jielong-node.current .jw { color: var(--primary); }
html[data-template="anime"] .jielong-node .jp { color: var(--ink-faint); }
html[data-template="anime"] .jielong-arrow {
color: var(--primary);
opacity: .6;
font-size: 16px;
}
html[data-template="anime"] .btn-regen {
border-color: rgba(114,137,218,.5);
color: var(--primary);
border-radius: 999px;
}
html[data-template="anime"] .btn-regen:hover {
background: var(--primary-soft);
color: var(--primary-dark);
}
/* 相关成语：网格卡片，hover 轻微上浮 + 淡粉紫底色 */
html[data-template="anime"] .related-item {
background: #fff;
border: 1px solid var(--border);
border-radius: 18px;
transition: transform .15s, background .15s, border-color .15s, box-shadow .15s;
}
html[data-template="anime"] .related-item:hover {
background: #F6F8FF;
border-color: rgba(114,137,218,.35);
box-shadow: 0 8px 20px rgba(114,137,218,.14);
transform: translateY(-2px);
}
html[data-template="anime"] .related-item .rw { color: var(--ink); }
html[data-template="anime"] .related-item small { color: var(--ink-soft); }
/* 首页 hero */
html[data-template="anime"] .hero h1 { color: var(--ink); }
html[data-template="anime"] .hero-sub { color: var(--ink-soft); }
html[data-template="anime"] .hero-sub strong { color: var(--primary); }
/* 拼音索引字母 */
html[data-template="anime"] .letter {
background: #fff;
border-color: var(--border);
border-radius: 14px;
color: var(--ink);
}
html[data-template="anime"] .letter small { color: var(--ink-faint); }
html[data-template="anime"] .letter:hover {
border-color: var(--primary);
color: var(--primary);
background: var(--primary-soft);
}
html[data-template="anime"] .letter.empty { color: var(--ink-faint); }
/* 热门成语（首页） */
html[data-template="anime"] .hot-item {
background: #fff;
border: 1px solid var(--border);
border-radius: 18px;
}
html[data-template="anime"] .hot-item:hover {
border-color: rgba(114,137,218,.35);
background: #F6F8FF;
box-shadow: 0 8px 20px rgba(114,137,218,.14);
transform: translateY(-1px);
}
html[data-template="anime"] .hot-word { color: var(--ink); }
html[data-template="anime"] .hot-pinyin { color: var(--accent-pink); }
/* 列表页 */
html[data-template="anime"] .result-list {
background: #fff;
border: 1px solid var(--border);
border-radius: var(--radius);
box-shadow: var(--shadow);
}
html[data-template="anime"] .result-item { border-bottom-color: var(--border); }
html[data-template="anime"] .result-item:hover { background: var(--primary-soft); }
html[data-template="anime"] .result-item .rw { color: var(--primary); }
html[data-template="anime"] .result-item .rp { color: var(--accent-pink); }
html[data-template="anime"] .result-item .re { color: var(--ink-soft); }
/* 页脚 */
html[data-template="anime"] .site-footer {
background: #2B2B2B;
color: #D8D5DC;
}
html[data-template="anime"] .copyright { color: #A8A5AD; }
/* 焦点可见 */
html[data-template="anime"] a:focus-visible,
html[data-template="anime"] button:focus-visible,
html[data-template="anime"] input:focus-visible {
outline-color: var(--primary);
}
/* ============================================================
极简杂志版式风（magazine）—— 现代杂志排版，强版式留白
黑色 #222 主色 + 暗红 #b84040 点缀，扁平无阴影，靠排版制造层次
============================================================ */
html[data-template="magazine"] {
--primary: #222222; /* 黑色（主色/正文强调） */
--primary-dark: #000000;
--primary-soft: #F3F1ED; /* 浅灰底（hover） */
--ink: #222222; /* 正文 */
--ink-soft: #666666; /* 次要文字 */
--ink-faint: #999999; /* 辅助文字 */
--bg: #FCFCFB; /* 页面底 */
--card: #FFFFFF;
--border: #E8E6E1; /* 细线 */
--gold: #B84040; /* 暗红点缀 */
--radius: 0px; /* 直角，杂志利落感 */
--shadow: none; /* 几乎无阴影，扁平干净 */
--font-sans: "Inter", "Source Han Sans SC", "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;
--font-serif: "Source Han Serif SC", "Noto Serif SC", "Songti SC", "STSong", serif;
/* 点缀暗红 */
--accent-red: #B84040;
}
html[data-template="magazine"] body {
font-family: var(--font-sans);
color: var(--ink);
background-color: var(--bg);
line-height: 1.75;
letter-spacing: .01em;
}
/* 链接：黑 + 暗红 hover */
html[data-template="magazine"] a { color: var(--ink); }
html[data-template="magazine"] a:hover { color: var(--accent-red); }
/* 顶部导航：极简文字导航，无多余装饰 */
html[data-template="magazine"] .site-header {
background: #FCFCFB;
border-bottom: 1px solid var(--ink);
box-shadow: none;
}
html[data-template="magazine"] .logo {
color: var(--ink);
font-family: var(--font-serif);
font-weight: 700;
letter-spacing: 1px;
}
html[data-template="magazine"] .nav a {
color: var(--ink-soft);
border-radius: 0;
letter-spacing: .5px;
}
html[data-template="magazine"] .nav a:hover {
color: var(--accent-red);
background: none;
text-decoration: underline;
text-underline-offset: 4px;
}
/* 搜索框：极简，粗下边框 */
html[data-template="magazine"] .search-box input,
html[data-template="magazine"] .hero-search input {
background: #fff;
border: 1px solid var(--ink);
border-radius: 0;
color: var(--ink);
}
html[data-template="magazine"] .search-box input:focus,
html[data-template="magazine"] .hero-search input:focus {
border-color: var(--ink);
box-shadow: none;
border-width: 2px;
}
html[data-template="magazine"] .search-box button,
html[data-template="magazine"] .hero-search button {
background: var(--ink);
color: #fff;
border-radius: 0;
font-weight: 600;
letter-spacing: 1px;
}
html[data-template="magazine"] .search-box button:hover,
html[data-template="magazine"] .hero-search button:hover {
background: var(--accent-red);
}
/* 联想下拉 */
html[data-template="magazine"] .suggest {
background: #fff;
border: 1px solid var(--ink);
border-radius: 0;
box-shadow: none;
}
html[data-template="magazine"] .suggest a {
color: var(--ink);
border-bottom-color: var(--border);
}
html[data-template="magazine"] .suggest a:hover,
html[data-template="magazine"] .suggest a.active {
background: var(--primary-soft);
}
html[data-template="magazine"] .suggest .s-pinyin { color: var(--ink-faint); }
/* 卡片：直角 + 无阴影 + 细线 */
html[data-template="magazine"] .card {
background: var(--card);
border: 1px solid var(--border);
border-radius: 0;
box-shadow: none;
}
html[data-template="magazine"] .card h2 {
color: var(--ink);
font-family: var(--font-serif);
font-weight: 700;
font-size: 24px;
letter-spacing: 1px;
padding-bottom: 10px;
}
/* 板块标题：大号粗标题 + 粗横线 */
html[data-template="magazine"] .card h2::after {
content: '';
position: absolute; left: 0; bottom: 0;
width: 100%; height: 3px;
background: var(--ink);
}
html[data-template="magazine"] .card h2::before {
content: '';
position: absolute; left: 0; bottom: -6px;
width: 64px; height: 3px;
background: var(--accent-red);
z-index: 1;
}
/* 详情页头部：超大号主标题 + 强视觉重心，拼音放侧边 */
html[data-template="magazine"] .detail-head {
position: relative;
text-align: left;
padding: 44px 0 18px;
border-bottom: 1px solid var(--ink);
}
html[data-template="magazine"] .detail-head h1 {
font-family: var(--font-serif);
font-size: 64px;
font-weight: 700;
color: var(--ink);
letter-spacing: 4px;
line-height: 1.1;
margin-bottom: 8px;
}
html[data-template="magazine"] .pinyin {
display: inline-block;
font-family: "Inter", var(--font-sans);
font-size: 15px;
color: var(--ink-faint);
letter-spacing: 3px;
text-transform: lowercase;
margin-top: 4px;
}
html[data-template="magazine"] .head-sub {
display: flex;
align-items: baseline;
gap: 16px;
}
/* 属性标签：极简文字胶囊，暗红描边 */
html[data-template="magazine"] .tag {
background: #fff;
color: var(--ink);
border: 1px solid var(--border);
border-radius: 0;
padding: 4px 12px;
box-shadow: none;
}
html[data-template="magazine"] .tag-label {
color: var(--ink-faint);
}
html[data-template="magazine"] .tag-value {
color: var(--accent-red);
font-weight: 600;
}
/* 释义正文 */
html[data-template="magazine"] .explanation {
font-family: var(--font-serif);
font-size: 19px;
color: var(--ink);
line-height: 1.9;
}
html[data-template="magazine"] .story { color: var(--ink); }
html[data-template="magazine"] .field dt {
color: var(--ink);
font-weight: 700;
}
html[data-template="magazine"] .field dd { color: var(--ink-soft); }
html[data-template="magazine"] .field dd.quote {
background: var(--primary-soft);
border-left: 3px solid var(--accent-red);
color: var(--ink-soft);
border-radius: 0;
}
/* 近反义词 chips：直角 */
html[data-template="magazine"] .chip {
background: #fff;
color: var(--ink);
border: 1px solid var(--border);
border-radius: 0;
}
html[data-template="magazine"] a.chip:hover {
border-color: var(--accent-red);
background: var(--primary-soft);
color: var(--accent-red);
}
html[data-template="magazine"] .chip.plain {
background: #fff;
border-color: var(--border);
color: var(--ink-soft);
}
/* 趣味延伸 */
html[data-template="magazine"] .highlight { background: var(--primary-soft); }
html[data-template="magazine"] .gold { color: var(--accent-red); }
/* 字义分解：四个卡片错落对齐（非严格均分，用交错偏移制造不对称） */
html[data-template="magazine"] .char-decompose {
grid-template-columns: repeat(4, 1fr);
gap: 18px;
align-items: start;
}
html[data-template="magazine"] .char-item {
background: #fff;
border: 1px solid var(--border);
border-top: 3px solid var(--ink);
border-radius: 0;
box-shadow: none;
min-width: 0;
overflow-wrap: break-word;
}
/* 错落：偶数卡片略微下移，制造不对称杂志感 */
html[data-template="magazine"] .char-item:nth-child(even) {
margin-top: 12px;
border-top-color: var(--accent-red);
}
html[data-template="magazine"] .char-glyph {
background: #fff;
border: none;
border-bottom: 2px solid var(--accent-red);
border-radius: 0;
color: var(--ink);
font-family: var(--font-serif);
}
html[data-template="magazine"] .char-pron { color: var(--ink-soft); }
html[data-template="magazine"] .char-extra-item {
color: var(--accent-red);
background: #fff;
border: 1px solid var(--border);
border-radius: 0;
}
html[data-template="magazine"] .char-shape { color: var(--ink-faint); }
html[data-template="magazine"] .sn-num { color: var(--accent-red); font-weight: 700; }
html[data-template="magazine"] .sn-title { color: var(--ink); }
html[data-template="magazine"] .sn-text { color: var(--ink-soft); }
html[data-template="magazine"] .expand-sense {
border: 1px solid var(--ink);
color: var(--ink);
border-radius: 0;
}
html[data-template="magazine"] .expand-sense:hover {
background: var(--ink);
color: #fff;
}
html[data-template="magazine"] .expand-sense:active {
background: var(--accent-red);
border-color: var(--accent-red);
color: #fff;
}
/* 接龙 tab */
html[data-template="magazine"] .tab {
color: var(--ink-soft);
border-bottom: 2px solid transparent;
border-radius: 0;
}
html[data-template="magazine"] .tab:hover { color: var(--accent-red); }
html[data-template="magazine"] .tab.active {
color: var(--ink);
border-bottom-color: var(--ink);
font-weight: 700;
}
/* 成语接龙：横向排布 + 细线条箭头 */
html[data-template="magazine"] .jielong-node {
background: #fff;
border: 1px solid var(--border);
border-radius: 0;
box-shadow: none;
}
html[data-template="magazine"] .jielong-node:hover {
border-color: var(--accent-red);
box-shadow: none;
}
html[data-template="magazine"] .jielong-node .jw { color: var(--ink); }
html[data-template="magazine"] .jielong-node.current {
border-color: var(--ink);
background: var(--primary-soft);
}
html[data-template="magazine"] .jielong-node.current .jw { color: var(--accent-red); }
html[data-template="magazine"] .jielong-node .jp { color: var(--ink-faint); }
html[data-template="magazine"] .jielong-arrow {
color: var(--ink);
opacity: .4;
font-weight: 300;
}
html[data-template="magazine"] .btn-regen {
border: 1px solid var(--ink);
color: var(--ink);
border-radius: 0;
}
html[data-template="magazine"] .btn-regen:hover {
background: var(--ink);
color: #fff;
}
/* 相关成语：网格简约卡片，hover 仅文字变色 */
html[data-template="magazine"] .related-item {
background: #fff;
border: 1px solid var(--border);
border-radius: 0;
transition: border-color .15s;
}
html[data-template="magazine"] .related-item:hover {
border-color: var(--accent-red);
background: #fff;
box-shadow: none;
transform: none;
}
html[data-template="magazine"] .related-item:hover .rw {
color: var(--accent-red);
}
html[data-template="magazine"] .related-item .rw {
color: var(--ink);
font-family: var(--font-serif);
transition: color .15s;
}
html[data-template="magazine"] .related-item small { color: var(--ink-faint); }
/* 首页 hero */
html[data-template="magazine"] .hero {
text-align: left;
padding: 64px 0 32px;
}
html[data-template="magazine"] .hero h1 {
font-family: var(--font-serif);
font-size: 48px;
font-weight: 700;
color: var(--ink);
letter-spacing: 2px;
}
html[data-template="magazine"] .hero-sub { color: var(--ink-soft); }
html[data-template="magazine"] .hero-sub strong { color: var(--accent-red); }
/* 拼音索引字母：直角简约 */
html[data-template="magazine"] .letter {
background: #fff;
border: 1px solid var(--border);
border-radius: 0;
color: var(--ink);
}
html[data-template="magazine"] .letter small { color: var(--ink-faint); }
html[data-template="magazine"] .letter:hover {
border-color: var(--ink);
color: var(--accent-red);
background: var(--primary-soft);
}
html[data-template="magazine"] .letter.empty { color: var(--ink-faint); }
/* 热门成语（首页） */
html[data-template="magazine"] .hot-item {
background: #fff;
border: 1px solid var(--border);
border-radius: 0;
transition: border-color .15s;
}
html[data-template="magazine"] .hot-item:hover {
border-color: var(--accent-red);
background: #fff;
box-shadow: none;
transform: none;
}
html[data-template="magazine"] .hot-item:hover .hot-word { color: var(--accent-red); }
html[data-template="magazine"] .hot-word {
color: var(--ink);
font-family: var(--font-serif);
transition: color .15s;
}
html[data-template="magazine"] .hot-pinyin { color: var(--ink-faint); }
/* 列表页 */
html[data-template="magazine"] .result-list {
background: #fff;
border: 1px solid var(--border);
border-radius: 0;
box-shadow: none;
}
html[data-template="magazine"] .result-item { border-bottom-color: var(--border); }
html[data-template="magazine"] .result-item:hover { background: var(--primary-soft); }
html[data-template="magazine"] .result-item .rw { color: var(--ink); font-family: var(--font-serif); }
html[data-template="magazine"] .result-item .rp { color: var(--accent-red); }
html[data-template="magazine"] .result-item .re { color: var(--ink-soft); }
/* 页脚：粗上分割线 */
html[data-template="magazine"] .site-footer {
background: #FCFCFB;
border-top: 3px solid var(--ink);
color: var(--ink-soft);
}
html[data-template="magazine"] .copyright { color: var(--ink-faint); }
/* 焦点可见 */
html[data-template="magazine"] a:focus-visible,
html[data-template="magazine"] button:focus-visible,
html[data-template="magazine"] input:focus-visible {
outline-color: var(--ink);
}
/* 移动端：字义分解恢复一行2个（覆盖 magazine 的 4 列 + 错落偏移） */
@media (max-width: 640px) {
html[data-template="magazine"] .char-decompose {
grid-template-columns: repeat(2, 1fr);
gap: 12px;
}
html[data-template="magazine"] .char-item:nth-child(even) {
margin-top: 0;
}
html[data-template="magazine"] .detail-head h1 {
font-size: 42px;
}
}
/* ============================================================
轻粘土 3D 可爱风（clay）—— 软 Q 粘土质感，低 poly 柔和立体，儿童向
底色 #fff9f0 / 卡片 #fff / 主色暖橘 #f49c66 / 辅助浅青 #74b9ff
软粘土圆角 + 轻微 3D 隆起 + 柔和环境光 + 细微颗粒肌理
字体：阿里普惠体粗圆（标题）/ 阿里普惠常规（正文）
============================================================ */
html[data-template="clay"] {
--primary: #F49C66; /* 暖橘（主色） */
--primary-dark: #E8844A;
--primary-soft: #FFF1E6; /* 暖橘淡底 */
--ink: #5A4636; /* 正文（暖棕，柔和不刺眼） */
--ink-soft: #8A7666; /* 次要文字 */
--ink-faint: #B7A795; /* 辅助文字 */
--bg: #FFF9F0; /* 奶油暖白底 */
--card: #FFFFFF;
--border: #F0E4D6; /* 暖米边 */
--gold: #F4B87A; /* 蜜橘金点缀 */
--radius: 26px; /* 软粘土大圆角 */
/* 柔和软阴影：低饱和、大范围、无刺眼高光 */
--shadow: 0 2px 6px rgba(244,156,102,.08), 0 14px 34px rgba(214,164,120,.14);
--font-sans: "Alibaba PuHuiTi", "Alibaba PuHuiTi 2.0", "Source Han Sans SC", "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;
--font-serif: "Alibaba PuHuiTi", "Alibaba PuHuiTi 2.0", "Source Han Sans SC", "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;
--font-round: "Alibaba PuHuiTi", "Alibaba PuHuiTi 2.0", "Source Han Sans SC", "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;
/* 辅助浅青 */
--accent-blue: #74B9FF;
--accent-blue-soft: #EAF5FF;
--accent-pink: #FFB4C4;
--accent-mint: #9BE3C6;
--accent-lemon: #FFD98A;
}
html[data-template="clay"] body {
font-family: var(--font-sans);
color: var(--ink);
background-color: var(--bg);
/* 柔和包围光 + 马卡龙色晕 + 细微颗粒肌理 */
background-image:
radial-gradient(circle at 8% 2%, rgba(255,184,150,.22) 0, transparent 30%),
radial-gradient(circle at 94% 8%, rgba(116,185,255,.20) 0, transparent 30%),
radial-gradient(circle at 6% 92%, rgba(155,227,198,.18) 0, transparent 28%),
radial-gradient(circle at 92% 96%, rgba(255,217,138,.20) 0, transparent 26%),
radial-gradient(circle at 50% 50%, rgba(255,255,255,.5) 0, transparent 60%);
line-height: 1.85;
letter-spacing: .02em;
}
/* 链接 */
html[data-template="clay"] a { color: var(--primary); }
html[data-template="clay"] a:hover { color: var(--primary-dark); }
/* 顶部导航：圆润 3D 质感导航栏 */
html[data-template="clay"] .site-header {
background: rgba(255,255,255,.82);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border-bottom: 2px solid rgba(244,156,102,.14);
box-shadow: 0 4px 18px rgba(214,164,120,.10);
}
html[data-template="clay"] .logo {
color: var(--primary-dark);
font-weight: 800;
letter-spacing: 1px;
text-shadow: 0 2px 0 rgba(255,255,255,.6);
}
html[data-template="clay"] .nav a {
color: var(--ink-soft);
border-radius: 999px;
font-weight: 600;
letter-spacing: .5px;
}
html[data-template="clay"] .nav a:hover {
color: var(--primary-dark);
background: var(--primary-soft);
}
/* 搜索框：软胶囊 */
html[data-template="clay"] .search-box input,
html[data-template="clay"] .hero-search input {
background: #fff;
border: 2px solid var(--border);
border-radius: 999px;
color: var(--ink);
}
html[data-template="clay"] .search-box input:focus,
html[data-template="clay"] .hero-search input:focus {
border-color: var(--accent-blue);
box-shadow: 0 0 0 5px rgba(116,185,255,.18);
}
html[data-template="clay"] .search-box button,
html[data-template="clay"] .hero-search button {
background: linear-gradient(180deg, #FFB27E, #F49C66);
color: #fff;
border-radius: 999px;
font-weight: 700;
box-shadow: 0 4px 10px rgba(244,156,102,.32), inset 0 1px 0 rgba(255,255,255,.35);
}
html[data-template="clay"] .search-box button:hover,
html[data-template="clay"] .hero-search button:hover {
background: linear-gradient(180deg, #F49C66, #E8844A);
}
/* 联想下拉 */
html[data-template="clay"] .suggest {
background: #fff;
border-color: var(--border);
border-radius: 20px;
box-shadow: var(--shadow);
}
html[data-template="clay"] .suggest a {
color: var(--ink);
border-bottom-color: var(--border);
}
html[data-template="clay"] .suggest a:hover,
html[data-template="clay"] .suggest a.active {
background: var(--primary-soft);
}
html[data-template="clay"] .suggest .s-pinyin { color: var(--ink-faint); }
/* 卡片：凸起软粘土卡片（柔 3D 隆起 + 软阴影） */
html[data-template="clay"] .card {
background: var(--card);
border: 2px solid #fff;
border-radius: var(--radius);
box-shadow:
0 2px 6px rgba(244,156,102,.06),
0 18px 40px rgba(214,164,120,.14),
inset 0 1px 0 #fff;
}
html[data-template="clay"] .card h2 {
color: var(--ink);
font-weight: 800;
letter-spacing: 1px;
}
/* 板块标题：搭配迷你粘土小图标（左侧软球 + 弧线） */
html[data-template="clay"] .card h2 {
position: relative;
padding-left: 34px;
}
html[data-template="clay"] .card h2::before {
content: '';
position: absolute; left: 0; top: 50%;
transform: translateY(-50%);
width: 22px; height: 22px;
border-radius: 50%;
background: radial-gradient(circle at 32% 28%, #FFC79A, #F49C66);
box-shadow:
inset -3px -4px 5px rgba(210,110,55,.35),
inset 3px 4px 5px rgba(255,255,255,.5),
0 3px 6px rgba(244,156,102,.28);
}
html[data-template="clay"] .card h2::after {
content: '';
position: absolute; left: 0; bottom: 2px;
width: 46px; height: 8px; border-radius: 999px;
background: linear-gradient(90deg, var(--primary), var(--accent-lemon));
opacity: .85;
box-shadow: 0 2px 5px rgba(244,156,102,.18);
}
/* 详情页头部：柔和立体文字效果 */
html[data-template="clay"] .detail-head {
padding: 36px 0 16px;
}
html[data-template="clay"] .detail-head h1 {
font-family: var(--font-round);
color: var(--primary-dark);
font-weight: 800;
letter-spacing: 6px;
text-shadow:
0 1px 0 #fff,
0 3px 0 rgba(244,156,102,.18),
0 6px 14px rgba(214,164,120,.20);
}
html[data-template="clay"] .pinyin {
color: var(--accent-blue);
font-weight: 600;
letter-spacing: 4px;
}
/* 属性标签：泡泡样式圆润标签（马卡龙多色轮转） */
html[data-template="clay"] .tag {
background: #fff;
color: var(--ink);
border: 2px solid var(--border);
border-radius: 999px;
padding: 7px 18px;
box-shadow: 0 4px 10px rgba(214,164,120,.12), inset 0 1px 0 #fff;
}
html[data-template="clay"] .tag:nth-child(3n+1) { border-color: rgba(244,156,102,.35); background: linear-gradient(180deg, #FFF5EC, #FFEFE2); }
html[data-template="clay"] .tag:nth-child(3n+2) { border-color: rgba(116,185,255,.35); background: linear-gradient(180deg, #F0F8FF, #E7F4FF); }
html[data-template="clay"] .tag:nth-child(3n) { border-color: rgba(155,227,198,.40); background: linear-gradient(180deg, #F2FBF7, #E9F9F1); }
html[data-template="clay"] .tag-label {
color: var(--ink-faint);
font-weight: 600;
}
html[data-template="clay"] .tag-value {
color: var(--ink);
font-weight: 800;
}
/* 释义正文 */
html[data-template="clay"] .explanation { color: var(--ink); font-weight: 500; }
html[data-template="clay"] .story { color: var(--ink); }
html[data-template="clay"] .field dt { color: var(--primary-dark); font-weight: 800; }
html[data-template="clay"] .field dd { color: var(--ink); }
html[data-template="clay"] .field dd.quote {
background: #FFF8F0;
border-left: 4px solid var(--primary);
border-radius: 6px 16px 16px 6px;
color: var(--ink-soft);
}
/* 近反义词 chips：软胶囊 */
html[data-template="clay"] .chip {
background: var(--primary-soft);
color: var(--primary-dark);
border-radius: 999px;
border: 2px solid rgba(244,156,102,.22);
font-weight: 600;
}
html[data-template="clay"] a.chip:hover {
border-color: var(--primary);
background: #FFF0E3;
}
html[data-template="clay"] .chip.plain {
background: #fff;
border-color: var(--border);
color: var(--ink-soft);
}
/* 趣味延伸：浅青底 + 马卡龙点缀 */
html[data-template="clay"] .highlight { background: var(--accent-blue-soft); }
html[data-template="clay"] .gold { color: var(--gold); }
html[data-template="clay"] .xhy-list li::before { color: var(--gold); }
/* 字义分解卡片：凸起软卡片 + 角落粘土圆点装饰 */
html[data-template="clay"] .char-item {
background: #fff;
border: 2px solid #fff;
border-radius: 24px;
box-shadow:
0 2px 6px rgba(244,156,102,.06),
0 14px 30px rgba(214,164,120,.12),
inset 0 1px 0 #fff;
position: relative;
overflow: hidden;
min-width: 0;
overflow-wrap: break-word;
}
/* 角落低 poly 粘土小圆球装饰 */
html[data-template="clay"] .char-item::before {
content: '';
position: absolute; top: -20px; right: -20px;
width: 54px; height: 54px;
border-radius: 50%;
background: radial-gradient(circle at 32% 28%, #BFE0FF, #74B9FF);
box-shadow: inset -4px -5px 6px rgba(60,120,190,.30), inset 4px 5px 6px rgba(255,255,255,.45);
pointer-events: none;
}
html[data-template="clay"] .char-item::after {
content: '';
position: absolute; bottom: -14px; left: -14px;
width: 34px; height: 34px;
border-radius: 50%;
background: radial-gradient(circle at 32% 28%, #FFCFA6, #F49C66);
box-shadow: inset -3px -4px 5px rgba(210,110,55,.35), inset 3px 4px 5px rgba(255,255,255,.5);
pointer-events: none;
}
html[data-template="clay"] .char-glyph {
background: var(--primary-soft);
border: 2px solid rgba(244,156,102,.30);
border-radius: 16px;
color: var(--primary-dark);
box-shadow: inset 0 2px 4px rgba(244,156,102,.14);
}
html[data-template="clay"] .char-pron { color: var(--ink-soft); }
html[data-template="clay"] .char-extra-item {
color: var(--primary-dark);
background: var(--primary-soft);
border: 1px solid rgba(244,156,102,.22);
border-radius: 999px;
}
html[data-template="clay"] .char-shape { color: var(--ink-faint); }
html[data-template="clay"] .sn-num { color: var(--primary); font-weight: 800; }
html[data-template="clay"] .sn-title { color: var(--ink); }
html[data-template="clay"] .sn-text { color: var(--ink-soft); }
html[data-template="clay"] .expand-sense {
border: 2px solid var(--accent-blue);
color: var(--accent-blue);
border-radius: 999px;
font-weight: 600;
}
html[data-template="clay"] .expand-sense:hover {
background: var(--accent-blue-soft);
color: #4A9AE0;
}
html[data-template="clay"] .expand-sense:active {
background: var(--accent-blue);
color: #fff;
}
/* 接龙 tab */
html[data-template="clay"] .tab {
color: var(--ink-soft);
border-bottom: 3px solid transparent;
font-weight: 600;
}
html[data-template="clay"] .tab:hover { color: var(--primary-dark); }
html[data-template="clay"] .tab.active {
color: var(--primary-dark);
border-bottom-color: var(--primary);
}
/* 成语接龙：软胶囊卡片 + 圆润箭头 */
html[data-template="clay"] .jielong-node {
background: #fff;
border: 2px solid var(--border);
border-radius: 999px;
box-shadow: 0 4px 10px rgba(214,164,120,.12), inset 0 1px 0 #fff;
transition: all .16s;
}
html[data-template="clay"] .jielong-node:hover {
border-color: var(--primary);
box-shadow: 0 8px 18px rgba(244,156,102,.22);
transform: translateY(-2px);
}
html[data-template="clay"] .jielong-node .jw { color: var(--ink); font-weight: 700; }
html[data-template="clay"] .jielong-node.current {
border-color: var(--primary);
background: var(--primary-soft);
}
html[data-template="clay"] .jielong-node.current .jw { color: var(--primary-dark); }
html[data-template="clay"] .jielong-node .jp { color: var(--ink-faint); }
html[data-template="clay"] .jielong-arrow {
color: var(--accent-blue);
opacity: .7;
font-size: 16px;
font-weight: 700;
}
html[data-template="clay"] .btn-regen {
border: 2px solid var(--primary);
color: var(--primary-dark);
border-radius: 999px;
font-weight: 600;
}
html[data-template="clay"] .btn-regen:hover {
background: var(--primary-soft);
color: var(--primary-dark);
}
/* 相关成语：3D 软卡片，hover 微微上浮 */
html[data-template="clay"] .related-item {
background: #fff;
border: 2px solid #fff;
border-radius: 22px;
box-shadow: 0 2px 6px rgba(244,156,102,.06), 0 12px 28px rgba(214,164,120,.12), inset 0 1px 0 #fff;
transition: transform .16s, box-shadow .16s, border-color .16s;
}
html[data-template="clay"] .related-item:hover {
border-color: rgba(244,156,102,.35);
box-shadow: 0 14px 32px rgba(244,156,102,.22), inset 0 1px 0 #fff;
transform: translateY(-4px);
}
html[data-template="clay"] .related-item .rw { color: var(--ink); font-weight: 800; }
html[data-template="clay"] .related-item small { color: var(--ink-soft); }
/* 首页 hero */
html[data-template="clay"] .hero h1 {
font-family: var(--font-round);
color: var(--primary-dark);
text-shadow: 0 2px 0 rgba(255,255,255,.7), 0 4px 10px rgba(244,156,102,.16);
}
html[data-template="clay"] .hero-sub { color: var(--ink-soft); }
html[data-template="clay"] .hero-sub strong { color: var(--primary-dark); }
/* 拼音索引字母 */
html[data-template="clay"] .letter {
background: #fff;
border: 2px solid var(--border);
border-radius: 18px;
color: var(--ink);
box-shadow: 0 3px 8px rgba(214,164,120,.10);
}
html[data-template="clay"] .letter small { color: var(--ink-faint); }
html[data-template="clay"] .letter:hover {
border-color: var(--accent-blue);
color: var(--accent-blue);
background: var(--accent-blue-soft);
}
html[data-template="clay"] .letter.empty { color: var(--ink-faint); }
/* 热门成语（首页） */
html[data-template="clay"] .hot-item {
background: #fff;
border: 2px solid #fff;
border-radius: 20px;
box-shadow: 0 2px 6px rgba(244,156,102,.06), 0 12px 26px rgba(214,164,120,.12);
}
html[data-template="clay"] .hot-item:hover {
border-color: rgba(244,156,102,.35);
box-shadow: 0 12px 28px rgba(244,156,102,.20);
transform: translateY(-2px);
}
html[data-template="clay"] .hot-word { color: var(--ink); font-weight: 800; }
html[data-template="clay"] .hot-pinyin { color: var(--accent-blue); }
/* 列表页 */
html[data-template="clay"] .result-list {
background: #fff;
border: 2px solid #fff;
border-radius: var(--radius);
box-shadow: var(--shadow);
}
html[data-template="clay"] .result-item { border-bottom-color: var(--border); }
html[data-template="clay"] .result-item:hover { background: var(--primary-soft); }
html[data-template="clay"] .result-item .rw { color: var(--primary-dark); }
html[data-template="clay"] .result-item .rp { color: var(--accent-blue); }
html[data-template="clay"] .result-item .re { color: var(--ink-soft); }
/* 页脚 */
html[data-template="clay"] .site-footer {
background: #5A4636;
color: #F3E7DA;
}
html[data-template="clay"] .copyright { color: #DCC7B1; }
/* 焦点可见 */
html[data-template="clay"] a:focus-visible,
html[data-template="clay"] button:focus-visible,
html[data-template="clay"] input:focus-visible {
outline-color: var(--accent-blue);
}
/* 移动端：字义分解 / 相关成语恢复一行2个 */
@media (max-width: 640px) {
html[data-template="clay"] .char-decompose {
grid-template-columns: repeat(2, 1fr);
gap: 12px;
}
html[data-template="clay"] .related-grid {
grid-template-columns: repeat(2, 1fr);
gap: 12px;
}
html[data-template="clay"] .detail-head h1 {
font-size: 38px;
letter-spacing: 4px;
}
}
/* 无障碍：减少动画 */
@media (prefers-reduced-motion: reduce) {
* { transition: none !important; animation: none !important; }
}
/* 焦点可见 */
a:focus-visible, button:focus-visible, input:focus-visible {
outline: 2px solid var(--primary); outline-offset: 2px;
}
/* ====================================================================
标签聚合页 / 标签总览页（template/tag.php、template/tag_index.php）
约定见 docs/tag-system-spec.md §9：
· 只新增结构类（.tag-*），不改 .chips / .chip 的圆角、底色、内边距
· 颜色一律走 CSS 变量，不引入新色值
结构类：.tag-head .tag-count .tag-lead .tag-page .tag-groups .tag-grp
.tag-grp-head .tag-intro .tag-rel .tag-pager .tag-cls*
==================================================================== */
/* ---- 标题 + 计数条 ---- */
.tag-head { padding-bottom: 4px; }
.tag-count { font-variant-numeric: tabular-nums; }
/* ---- 一句话导语（列表上方，只占一行） ---- */
.tag-lead {
font-size: 15px; line-height: 1.75; color: var(--ink-soft);
margin: 4px 0 16px;
}
.tag-lead strong { color: var(--primary); font-weight: 700; }
/* ---- 胶囊区：整页容器 + 分组块 ---- */
.tag-page { padding: 18px 20px; }
.tag-groups { display: flex; flex-direction: column; gap: 18px; }
/* .chips 是 inline-flex，分组内需要撑满容器才能整齐换行 */
.tag-groups > .chips,
.tag-cls > .chips {
display: flex; flex-wrap: wrap; gap: 8px;
width: 100%; min-width: 0;
}
.tag-grp {
content-visibility: auto; /* 几千个胶囊时，视口外的分组跳过渲染 */
contain-intrinsic-size: auto 300px;
}
/* 分组标题：压掉 .card h2 的 20px + 红下划线；spec §9 要求 ≥14px，避免与胶囊混同 */
.card .tag-grp-head {
display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px;
font-size: 14px; font-weight: 700; color: var(--ink-soft);
padding: 0; margin: 0 0 8px; line-height: 1.5;
}
.card .tag-grp-head::after { display: none; }
.tag-grp-head small { font-size: 12px; font-weight: 400; color: var(--ink-soft); }
.tag-grp-label {
font-size: 14px; font-weight: 700; color: var(--ink-soft);
margin: 4px 0 8px;
}
/* 长标签名不撑破布局（不改 .chip 的圆角/底色/内边距，只约束换行） */
.tag-page .chip,
.tag-cls .chip,
.tag-groups .chip {
max-width: 100%;
overflow-wrap: anywhere;
word-break: break-word;
}
/* 胶囊内的命中数（参考 .letter small 的写法） */
.tag-chip { display: inline-flex; align-items: baseline; gap: 6px; }
.tag-chip small {
font-size: 11px; font-weight: 400; color: var(--ink-soft); letter-spacing: 0;
flex: 0 0 auto; white-space: nowrap; /* 标签名换行时，命中数不被挤断 */
}
a.tag-chip:hover small { color: var(--primary-dark); }
.tag-chip-cnt { font-size: 11px; font-weight: 400; color: var(--ink-soft); margin-left: 6px; }
/* ---- 正文补充文案（列表下方，段数按 cnt 分档） ---- */
.tag-intro p {
font-size: 15px; line-height: 1.85; color: var(--ink);
margin-bottom: 12px;
}
.tag-intro p:last-child { margin-bottom: 0; }
.tag-intro a { color: var(--primary); }
.tag-intro a:hover { color: var(--primary-dark); text-decoration: underline; }
/* ---- 同类标签 / 换个角度找 ---- */
.tag-rel .chips { margin-top: 2px; }
.tag-rel-sub {
display: block; margin-top: 4px;
font-size: 13px; font-weight: 400; color: var(--ink-soft);
}
/* ---- 分页器：数字位 + 省略号（沿用 .pager 的布局与 .pager a 外观） ---- */
.tag-pager { flex-wrap: wrap; row-gap: 10px; }
.pager a.pg-num,
.pager .pg-num {
min-width: 36px; text-align: center;
padding: 4px 10px; font-size: 14px;
}
.pager .pg-gap { color: var(--ink-soft); font-size: 14px; padding: 0 2px; }
.pager .pg-num.cur {
background: var(--primary-soft); color: var(--primary);
border: 1px solid var(--primary); border-radius: 6px;
font-weight: 700; padding: 4px 10px; min-width: 36px; text-align: center;
}
.pager .pg-prev.disabled,
.pager .pg-next.disabled {
color: var(--ink-soft); font-size: 14px;
border: 1px dashed var(--border); border-radius: 6px;
padding: 4px 12px;
}
/* ---- 标签总览 / 分类页 ---- */
.tag-cls { content-visibility: auto; contain-intrinsic-size: auto 240px; }
.tag-cls-head {
display: flex; align-items: baseline; flex-wrap: wrap; gap: 10px;
margin-bottom: 10px;
}
.card .tag-cls-title {
font-size: 18px; font-weight: 700; color: var(--ink);
padding-bottom: 0; margin: 0;
}
.card .tag-cls-title::after { display: none; }
.tag-cls-more { margin-left: auto; font-size: 13px; color: var(--primary); }
.tag-cls-more:hover { color: var(--primary-dark); }
.tag-cls-intro {
font-size: 14px; line-height: 1.8; color: var(--ink-soft);
margin: 0 0 12px;
}
/* ---- 深色 / 高饱和模板：胶囊文字对比度（实测 < 4.5:1，用 --ink 兜到 AA） ----
只改文字颜色，不动 .chip 的圆角/底色/内边距；也不影响详情页既有 .chip 外观。 */
html[data-template="dark"] .tag-page .chip,
html[data-template="memphis"] .tag-page .chip,
html[data-template="anime"] .tag-page .chip,
html[data-template="clay"] .tag-page .chip,
html[data-template="green"] .tag-page .chip,
html[data-template="dark"] .tag-cls .chip,
html[data-template="memphis"] .tag-cls .chip,
html[data-template="anime"] .tag-cls .chip,
html[data-template="clay"] .tag-cls .chip,
html[data-template="green"] .tag-cls .chip {
color: var(--ink);
}
html[data-template="dark"] .tag-cls .chip.plain,
html[data-template="memphis"] .tag-cls .chip.plain,
html[data-template="anime"] .tag-cls .chip.plain,
html[data-template="clay"] .tag-cls .chip.plain,
html[data-template="green"] .tag-cls .chip.plain {
color: var(--ink-soft);
}
/* ---- 响应式：375 / 768 / 1280 三档（只调间距，不改 .chip 内边距） ---- */
@media (max-width: 420px) {
.tag-page { padding: 14px; }
.tag-groups { gap: 14px; }
.tag-groups > .chips,
.tag-cls > .chips { gap: 6px; }
.tag-lead { font-size: 14px; }
.tag-intro p { font-size: 14px; line-height: 1.8; }
.card .tag-cls-title { font-size: 16px; }
.tag-cls-more { margin-left: 0; }
.tag-pager { gap: 8px; }
.pager a.pg-num, .pager .pg-num { min-width: 30px; padding: 4px 8px; font-size: 13px; }
}
@media (min-width: 768px) {
.tag-groups > .chips,
.tag-cls > .chips { gap: 9px; }
}
@media (min-width: 1280px) {
.tag-groups { gap: 20px; }
.tag-groups > .chips,
.tag-cls > .chips { gap: 10px; }
}
/* ===== 字典扩充内容：详细解释 / 康熙字典 / 说文解字（数据源 hgcha） ===== */
.sense-detail {
padding: 0 0 16px;
margin-bottom: 16px;
border-bottom: 1px solid var(--border);
}
.sense-detail:last-child { padding-bottom: 0; margin-bottom: 0; border-bottom: 0; }
.sense-detail .sense-head { margin-bottom: 8px; }
.sense-line {
font-size: 15px;
line-height: 1.85;
color: var(--ink);
margin: 0 0 6px;
}
.sense-line:last-child { margin-bottom: 0; }
.sense-line.sense-attr {
color: var(--ink-soft);
font-size: 14px;
padding-left: 26px;
position: relative;
}
.attr-tag {
position: absolute;
left: 0;
top: 0;
color: var(--primary);
font-size: 12px;
font-weight: 700;
line-height: 1.9;
}
.sub-h {
font-size: 15px;
font-weight: 700;
color: var(--ink);
margin: 18px 0 10px;
padding-left: 10px;
border-left: 3px solid var(--primary);
line-height: 1.4;
}
.card > .sub-h:first-of-type { margin-top: 4px; }
.classic p {
font-family: var(--font-serif);
font-size: 15px;
line-height: 1.95;
color: var(--ink);
margin: 0 0 8px;
text-align: justify;
}
.classic p:last-child { margin-bottom: 0; }
@media (max-width: 640px) {
.sense-line { font-size: 14px; line-height: 1.8; }
.classic p { font-size: 14px; line-height: 1.9; }
.sense-line.sense-attr { padding-left: 22px; }
}
/* 造句列表（扩充数据） */
.zju-list {
margin: 0;
padding-left: 22px;
display: flex;
flex-direction: column;
gap: 10px;
}
.zju-list li {
font-size: 15px;
line-height: 1.85;
color: var(--ink);
}
.zju-list li::marker { color: var(--primary); font-weight: 700; }
@media (max-width: 640px) {
.zju-list { padding-left: 18px; gap: 8px; }
.zju-list li { font-size: 14px; line-height: 1.8; }
}
/* 字谜（扩充数据） */
.miyu-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.miyu-list li { display: flex; flex-direction: column; gap: 3px; padding-left: 12px; border-left: 2px solid var(--border); }
.miyu-q { font-size: 15px; color: var(--ink); line-height: 1.7; }
.miyu-a { font-size: 14px; color: var(--primary); font-weight: 700; }
.miyu-n { font-size: 13px; color: var(--ink-soft); line-height: 1.7; }
@media (max-width: 640px) {
.miyu-q { font-size: 14px; }
.miyu-n { font-size: 12.5px; }
}
/* 组词页（.zuci-*） */
.zuci-sum { margin: 0; font-size: 14.5px; line-height: 1.95; color: var(--ink-soft); }
.zuci-sum strong { color: var(--primary); font-weight: 700; }
.zuci-more { margin: 12px 0 0; }
.btn-more {
display: inline-block;
padding: 7px 14px;
border-radius: var(--radius);
border: 1px solid var(--border);
background: var(--primary-soft);
color: var(--primary-dark);
font-size: 14px;
text-decoration: none;
transition: background .18s, border-color .18s;
}
.btn-more:hover { background: var(--primary); color: #fff; border-color: var(--primary); }
/* 组词页的 chip 可能同时是链接，保证可点区域与文字颜色一致 */
a.chip.chip-py { text-decoration: none; }
a.chip.chip-py:hover { border-color: var(--primary); }
@media (max-width: 640px) {
.zuci-sum { font-size: 13.5px; line-height: 1.85; }
.btn-more { font-size: 13px; padding: 6px 12px; }
}
/* ============ SEO 结构补充（面包屑语义 / 列表页导语 / 相关索引 / 字符网格） ============ */
/* 视觉隐藏但保留给读屏与爬虫的标题 */
.sr-only {
position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
/* 列表页 H1 下面的一句导语：补充关键词密度，也提高搜索结果摘要匹配率 */
.list-desc {
margin: 8px 0 0; font-size: 14.5px; line-height: 1.85; color: var(--ink-soft);
}
.list-desc a { color: var(--primary); }
/* 相关索引：列表页底部的交叉入口 */
.related-index { margin-top: 22px; }
.related-index .chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.related-index .chip.chip-py {
display: inline-flex; flex-direction: column; align-items: flex-start;
}
/* 首字 / 尾字枢纽页的字符网格：3,600+ 个格子用 grid 才不会挤成一条 */
.char-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(64px, 1fr));
gap: 8px;
width: 100%;
}
.char-grid .chip {
display: flex; flex-direction: column; align-items: center; justify-content: center;
padding: 6px 4px; border-radius: 10px; line-height: 1.2; gap: 2px;
text-decoration: none;
}
.char-grid .cp-word { font-size: 17px; font-weight: 700; }
.char-grid .cp-py { font-size: 11px; color: var(--ink-faint); font-weight: 400; }
@media (max-width: 640px) {
.char-grid { grid-template-columns: repeat(auto-fill, minmax(52px, 1fr)); gap: 6px; }
.char-grid .cp-word { font-size: 15px; }
.list-desc { font-size: 13.5px; }
}
/* 拼音索引页：每个字母一块，标题 + 条数 + 示例成语 */
.letter-block-list { display: grid; gap: 4px; margin-top: 12px; }
.letter-block { padding: 10px 0; border-bottom: 1px dashed var(--border); }
.letter-block:last-child { border-bottom: none; }
.letter-block h3 {
margin: 0; font-size: 15.5px; font-weight: 700; display: flex;
align-items: baseline; gap: 10px; flex-wrap: wrap;
}
.letter-block h3 a { color: var(--primary); text-decoration: none; }
.letter-block h3 a:hover { text-decoration: underline; }
.letter-block .lb-cnt { font-size: 12px; color: var(--ink-faint); font-weight: 400; }
.letter-block .lb-ex { margin: 4px 0 0; font-size: 13.5px; color: var(--ink-soft); line-height: 1.75; }
@media (max-width: 640px) {
.letter-block h3 { font-size: 14.5px; }
.letter-block .lb-ex { font-size: 13px; }
}
/* 标签分类页：胶囊列表前的标题 */
.tag-list-title { margin: 4px 0 4px; font-size: 17px; }
/* ============ 英汉词条页：扩展内容（例句元信息 / 词源·构词拆解 / 助记） ============ */
/* 板块标题下的一行小字：例句条数 / 来源标注。字号取设计规范「弱化 12px」，
颜色用 --ink 而非 --ink-faint/--ink-soft：10 套视觉模板下 12px 小字只有 --ink
能稳定满足 4.5:1（--ink-faint 在白底仅 2.85:1），层级靠字号与字重区分 */
.sec-meta {
display: flex;
flex-wrap: wrap;
gap: 4px 12px;
margin: -6px 0 14px; /* 抵掉 .card h2 的 18px 下间距，贴近标题 */
font-size: 12px;
line-height: 1.6;
color: var(--ink);
}
.sec-meta .meta-count { font-weight: 700; } /* 条数用字重区分，不靠颜色 */
.sec-meta .meta-src { overflow-wrap: anywhere; }
/* 词源 / 助记正文：与释义同字阶（15px），行高放宽到 1.9 便于长段落阅读 */
.etym-text {
font-size: 15px;
line-height: 1.9;
color: var(--ink);
overflow-wrap: anywhere; /* 长英文单词/连字符词不撑破卡片 */
}
/* 构词拆解小表：固定列宽 + 任意断行，375px 也不产生横向滚动 */
.etym-parts { width: 100%; }
.parts-table {
width: 100%;
table-layout: fixed; /* 关键：列宽按百分比分配，内容再长也不撑宽 */
border-collapse: collapse;
font-size: 14px;
line-height: 1.7;
border-top: 1px solid var(--border);
}
.parts-table .col-part { width: 22%; }
.parts-table .col-gloss { width: 30%; }
.parts-table .col-note { width: 48%; }
.parts-table th,
.parts-table td {
padding: 8px 12px;
text-align: left;
vertical-align: top;
border-bottom: 1px solid var(--border);
overflow-wrap: anywhere;
word-break: break-word;
}
.parts-table thead th {
padding: 6px 12px;
font-size: 12px;
font-weight: 700;
color: var(--ink); /* 表头文字用 --ink：--ink-soft 在 clay/memphis/anime 下不足 4.5:1 */
background: var(--primary-soft);
white-space: nowrap;
}
.parts-table tbody tr:last-child th,
.parts-table tbody tr:last-child td { border-bottom: 0; }
/* 词缀做成小胶囊：仍用主色域的浅底，但文字用 --ink 保证对比度（--primary 在浅色模板下只有 2:1） */
.part-affix {
display: inline-block;
padding: 0 8px;
border-radius: 4px;
background: var(--primary-soft);
color: var(--ink);
font-weight: 700;
letter-spacing: .2px;
overflow-wrap: anywhere;
}
.part-gloss { font-weight: 600; color: var(--ink); }
/* 助记块：浅底 + 金色左竖条（与例句的灰色竖条区分，且标题已明示用途，不靠颜色传义） */
.mnemonic {
padding: 14px 16px;
background: var(--bg);
border-left: 3px solid var(--gold);
border-radius: 8px;
}
.mnemonic-text {
font-size: 15px;
line-height: 1.9;
color: var(--ink);
overflow-wrap: anywhere;
}
/* 老结构里长英文例句同样需要断行保护 */
.example-en,
.example-cn { overflow-wrap: anywhere; }
/* 拼写变体例句的来源标注：贴在该条例句下方，用虚线分隔（形状区分，不靠颜色）。
只标「同词异拼」这类容易让人以为句子配错词的来源，普通来源仍在标题下聚合显示 */
.example-src {
margin-top: 8px;
padding-top: 6px;
border-top: 1px dashed var(--border);
font-size: 12px;
line-height: 1.6;
color: var(--ink);
overflow-wrap: anywhere;
}
@media (max-width: 640px) {
.etym-text,
.mnemonic-text { font-size: 14px; line-height: 1.85; }
.mnemonic { padding: 12px 14px; }
}
@media (max-width: 420px) {
.parts-table { font-size: 13px; }
.parts-table th,
.parts-table td { padding: 7px 8px; }
.parts-table thead th { padding: 6px 8px; font-size: 11.5px; }
.sec-meta { gap: 2px 10px; }
}
/* ============ 友情链接（首页底部，一行一个） ============ */
.friend-links .fl-list { list-style: none; margin: 0; padding: 0; }
.friend-links .fl-list li {
padding: 7px 0; border-bottom: 1px dashed rgba(0, 0, 0, .07);
font-size: 14px; line-height: 1.6;
}
.friend-links .fl-list li:last-child { border-bottom: 0; padding-bottom: 0; }
.friend-links .fl-list a { color: #5b6167; }
.friend-links .fl-list a:hover { color: #c0392b; }
/* ============================================================================
视觉模板：大胆拼色编辑（editorial）
----------------------------------------------------------------------------
定位：高对比色块 + 撞色标题 + 杂志拼贴感。四色制（宝蓝 / 番茄红 / 明黄 / 黑），
米白纸底；纯色块 + 细黑描边 + 硬投影，全站取消圆角与柔光阴影。
实现约定：
1. 整块作用域限于 html[data-template="editorial"]，不改基础样式表，
站点切回其它模板时视觉完全复原；
2. 详情页（article.detail）是主战场 —— 板块编号、拼色卡片矩阵、胶囊接龙、
错位叠压的相关成语都在这里；
3. 其余页面靠色板与通用卡片规则跟随，不单独重排，保证不缺角；
4. 断点写在块尾，且同样带 html[data-template] 前缀 —— 本块在文件末尾，
若不带前缀会盖掉前面 @media 里的移动端规则。
==========================================================================*/
html[data-template="editorial"] {
/* —— 四色制 —— */
--ed-blue: #1B3FE8; /* 宝蓝：主导航、编号、主链接 */
--ed-red: #F03A17; /* 番茄红：强调、引文边条、页脚顶线 */
--ed-yellow: #FFD400; /* 明黄：标题底块、标签、荧光笔 */
--ed-ink: #111111; /* 墨黑：描边、硬投影、反白块 */
--ed-bg: #FAF6EA; /* 米白纸底 */
--ed-num: Inter, "SF Pro Display", "Helvetica Neue", Arial, sans-serif;
/* —— 覆写基础色板：未单独处理的页面跟着换装 —— */
--primary: #1B3FE8;
--primary-dark: #1229A8;
--primary-soft: #E3E9FF;
--ink: #111111;
--ink-soft: #4A4A4A;
/* 辅助文字不能再浅：#767676 落在米白纸上只有 4.2:1，正文级字号达不到 4.5 */
--ink-faint: #5F5F5F;
--bg: #FAF6EA;
--card: #FFFFFF;
--border: #111111;
/* --gold 是「次级强调色」，全站多用于浅底上的文字（拼音、出处标记、小标签）。
这里不能直接给番茄红 #F03A17 —— 它在白底只有 3.95:1。深一档，同色系。
大色块填充一律用 --ed-red，两者分工明确。 */
--gold: #C22A0D;
--radius: 0px;
--shadow: 4px 4px 0 #111111;
/* 编辑风不用宋体：标题与正文同族，只靠字重与字号拉层级 */
--font-serif: "Source Han Sans SC", "Noto Sans SC", "PingFang SC", "Microsoft YaHei", "Segoe UI", sans-serif;
--font-sans: "Source Han Sans SC", "Noto Sans SC", "PingFang SC", "Microsoft YaHei", "Segoe UI", sans-serif;
}
html[data-template="editorial"] body {
background: var(--ed-bg);
color: var(--ed-ink);
-webkit-font-smoothing: antialiased;
}
/* ---------- 顶部：横向色块分区的导航 ---------- */
html[data-template="editorial"] .site-header {
background: #fff;
border-bottom: 3px solid var(--ed-ink);
}
html[data-template="editorial"] .header-inner { min-height: 72px; gap: 18px; }
html[data-template="editorial"] .logo {
background: var(--ed-ink); color: #fff;
font-family: var(--font-sans);
font-weight: 900; font-size: 19px; letter-spacing: .05em;
padding: 9px 14px;
}
html[data-template="editorial"] .logo:hover { color: var(--ed-yellow); }
/* 导航项本身就是色块，靠负右边距拼成一条连续色带 */
html[data-template="editorial"] .nav { gap: 0; }
html[data-template="editorial"] .nav a {
display: inline-flex; align-items: center;
padding: 9px 18px; margin-right: -2px;
font-size: 14px; font-weight: 800; letter-spacing: .05em;
color: #fff; background: var(--ed-blue);
border: 2px solid var(--ed-ink); border-radius: 0;
transition: transform .12s ease, background .12s ease, color .12s ease;
}
html[data-template="editorial"] .nav a:nth-child(2) { background: var(--ed-red); color: var(--ed-ink); }
html[data-template="editorial"] .nav a:nth-child(3) { background: var(--ed-yellow); color: var(--ed-ink); }
html[data-template="editorial"] .nav a:nth-child(4) { background: var(--ed-ink); color: #fff; }
html[data-template="editorial"] .nav a:hover {
background: var(--ed-ink); color: var(--ed-yellow);
transform: translateY(-2px);
}
html[data-template="editorial"] .search-box input {
border: 2px solid var(--ed-ink); border-right: 0; border-radius: 0;
font-weight: 600;
}
html[data-template="editorial"] .search-box button {
border: 2px solid var(--ed-ink); border-radius: 0;
background: var(--ed-yellow); color: var(--ed-ink);
font-weight: 900; letter-spacing: .1em;
transition: background .12s ease, color .12s ease;
}
html[data-template="editorial"] .search-box button:hover { background: var(--ed-red); color: #fff; }
/* ---------- 面包屑：斜杠分隔 ---------- */
html[data-template="editorial"] .breadcrumb {
padding-top: 20px; font-size: 13px; font-weight: 700;
}
html[data-template="editorial"] .breadcrumb a {
color: var(--ed-ink);
border-bottom: 2px solid var(--ed-yellow);
}
html[data-template="editorial"] .breadcrumb a:hover { color: var(--ed-blue); border-bottom-color: var(--ed-blue); }
html[data-template="editorial"] .breadcrumb li + li::before {
content: "/"; color: var(--ed-ink); font-weight: 900; margin-right: 6px;
}
/* ---------- 标题区：超大粗体 + 黄底块 + 宝蓝硬投影 ---------- */
html[data-template="editorial"] .detail-head { text-align: left; padding: 26px 0 6px; }
html[data-template="editorial"] .detail-head h1 {
display: inline-block; max-width: 100%;
font-family: var(--font-sans);
font-size: clamp(46px, 7.4vw, 100px);
font-weight: 900; line-height: 1.05; letter-spacing: -.015em;
color: var(--ed-ink); background: var(--ed-yellow);
padding: .04em .16em .1em;
border: 3px solid var(--ed-ink);
box-shadow: 12px 12px 0 var(--ed-blue);
transform: rotate(-1.1deg);
-webkit-box-decoration-break: clone;
box-decoration-break: clone;
overflow-wrap: anywhere;
}
html[data-template="editorial"] .detail-head .head-sub {
justify-content: flex-start; margin-top: 22px;
}
html[data-template="editorial"] .detail-head .pinyin {
background: #fff; border: 2px solid var(--ed-ink); border-radius: 999px;
padding: 4px 16px; font-size: 16px; font-weight: 800;
letter-spacing: 2px; color: var(--ed-ink);
}
/* 田字格：白卡纸 + 红硬投影，轻微倾斜像贴上去的 */
html[data-template="editorial"] .grid-figure { justify-content: flex-start; margin: 22px 0 10px; }
html[data-template="editorial"] .grid-img {
border: 3px solid var(--ed-ink); border-radius: 0;
padding: 6px; background: #fff;
box-shadow: 8px 8px 0 var(--ed-red);
transform: rotate(.8deg);
}
/* ---------- 属性标签：小色块胶囊，三色轮转 ---------- */
html[data-template="editorial"] .tags {
justify-content: flex-start; gap: 10px; padding: 18px 0 4px;
}
html[data-template="editorial"] .tag {
background: #fff; color: var(--ed-ink);
border: 2px solid var(--ed-ink); border-radius: 999px;
padding: 4px 14px; gap: 7px;
}
html[data-template="editorial"] .tag-label {
/* 不用半透明：58% 的墨黑压在明黄块上只有 3.2:1，小字读不清 */
color: var(--ed-ink);
font-size: 11px; font-weight: 800; letter-spacing: .1em;
}
html[data-template="editorial"] .tag-value {
color: var(--ed-ink); font-weight: 800; font-size: 13px;
}
html[data-template="editorial"] .tag:nth-child(3n+1) { background: var(--ed-yellow); }
html[data-template="editorial"] .tag:nth-child(3n) { background: var(--ed-blue); }
html[data-template="editorial"] .tag:nth-child(3n) .tag-label,
html[data-template="editorial"] .tag:nth-child(3n) .tag-value { color: #fff; }
/* ---------- 卡片：白底 + 细黑描边 + 硬投影，零圆角 ---------- */
html[data-template="editorial"] .detail { counter-reset: ed-sec; }
html[data-template="editorial"] .detail .card {
background: #fff;
border: 2px solid var(--ed-ink); border-radius: 0;
box-shadow: 6px 6px 0 var(--ed-ink);
padding: 24px 26px 26px; margin-bottom: 26px;
}
/* 板块标题：大号黑体 + 左侧彩色编号（取消基础样式里的细红下划线） */
html[data-template="editorial"] .detail .card h2 {
counter-increment: ed-sec;
display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
font-size: clamp(21px, 2.3vw, 28px); font-weight: 900;
letter-spacing: -.01em; color: var(--ed-ink);
padding-bottom: 0; margin-bottom: 20px; line-height: 1.25;
}
html[data-template="editorial"] .detail .card h2::after { display: none; }
html[data-template="editorial"] .detail .card h2::before {
content: counter(ed-sec, decimal-leading-zero);
flex: none;
font-family: var(--ed-num); font-variant-numeric: tabular-nums;
font-size: 14px; font-weight: 800; letter-spacing: .06em;
color: #fff; background: var(--ed-blue);
padding: 6px 9px; border: 2px solid var(--ed-ink);
}
/* 编号颜色按板块轮转，让整页有颜色节奏而不是一条灰线到底。
番茄红底上必须用墨黑字：白字在这块红上只有 3.9:1，14px 达不到 4.5。 */
html[data-template="editorial"] .detail > section:nth-of-type(3n+1) h2::before { background: var(--ed-blue); color: #fff; }
html[data-template="editorial"] .detail > section:nth-of-type(3n+2) h2::before { background: var(--ed-red); color: var(--ed-ink); }
html[data-template="editorial"] .detail > section:nth-of-type(3n) h2::before { background: var(--ed-yellow); color: var(--ed-ink); }
html[data-template="editorial"] .detail .explanation {
font-size: 19px; line-height: 1.95; font-weight: 500;
}
html[data-template="editorial"] .detail .story { font-size: 16px; line-height: 1.95; }
/* ---------- 详细解释：虚线分隔 + 黄底黑框的字段标签 ---------- */
html[data-template="editorial"] .detail .fields { gap: 0; }
html[data-template="editorial"] .detail .field {
grid-template-columns: 88px 1fr; gap: 16px; align-items: start;
padding: 14px 0; border-top: 1px dashed rgba(17, 17, 17, .22);
}
html[data-template="editorial"] .detail .field:first-child { border-top: 0; padding-top: 0; }
html[data-template="editorial"] .detail .field dt {
justify-self: start;
font-size: 12px; font-weight: 800; letter-spacing: .08em;
color: var(--ed-ink); background: var(--ed-yellow);
border: 2px solid var(--ed-ink); padding: 3px 9px;
text-align: center; transform: rotate(-1.2deg);
}
html[data-template="editorial"] .detail .field dd { font-size: 16px; line-height: 1.85; color: var(--ed-ink); }
/* 例句与出处：黄纸块 + 四边黑框（不用单侧彩色竖线——那是模板化 UI 的常见套路，
杂志里引文靠底色和框读出来就够了）。
引文收窄到 42em：整宽时一行 55 个汉字，读起来要来回找行首。 */
html[data-template="editorial"] .detail .field dd.quote {
background: #FFF7C9; border: 2px solid var(--ed-ink);
border-radius: 0; padding: 10px 14px; color: var(--ed-ink);
max-width: 42em;
}
/* ---------- 造句：黑底黄字的数字序号 ---------- */
html[data-template="editorial"] .detail .zju-list {
list-style: none; counter-reset: ed-zju;
display: flex; flex-direction: column; gap: 14px;
}
html[data-template="editorial"] .detail .zju-list li {
counter-increment: ed-zju; position: relative; padding-left: 42px;
font-size: 15px; line-height: 1.85; color: var(--ed-ink);
}
html[data-template="editorial"] .detail .zju-list li::before {
content: counter(ed-zju, decimal-leading-zero);
position: absolute; left: 0; top: 3px;
font-family: var(--ed-num); font-variant-numeric: tabular-nums;
font-size: 12px; font-weight: 800;
background: var(--ed-ink); color: var(--ed-yellow);
padding: 3px 5px;
}
/* ---------- 近反义词：黑底黄字小标签 + 拼色胶囊 ---------- */
html[data-template="editorial"] .detail .syn-ant > strong {
width: auto; display: inline-block; vertical-align: middle;
margin-right: 10px;
background: var(--ed-ink); color: var(--ed-yellow);
font-size: 12px; font-weight: 800; letter-spacing: .1em;
padding: 4px 10px;
}
/* 胶囊不按 nth-child 随机轮转 —— 颜色要承载含义，不能是撒糖纸。
近义词一组明黄、反义词一组白，色只在「同一组」内统一。 */
html[data-template="editorial"] .detail .chip {
border: 2px solid var(--ed-ink); border-radius: 999px;
background: #fff; color: var(--ed-ink);
font-weight: 700; padding: 3px 13px;
}
html[data-template="editorial"] .detail .syn-ant:nth-of-type(1) .chip { background: var(--ed-yellow); }
html[data-template="editorial"] .detail .syn-ant:nth-of-type(2) .chip { background: #fff; }
html[data-template="editorial"] .detail a.chip:hover {
background: var(--ed-ink); color: var(--ed-yellow); border-color: var(--ed-ink);
}
/* ---------- 趣味延伸：整块明黄 ---------- */
html[data-template="editorial"] .detail .card.highlight { background: var(--ed-yellow); }
html[data-template="editorial"] .detail .card.highlight p { font-size: 16px; }
html[data-template="editorial"] .detail .card.highlight .gold {
background: var(--ed-ink); color: var(--ed-yellow);
font-size: 12px; font-weight: 800; letter-spacing: .1em;
padding: 3px 9px; margin-right: 10px;
}
html[data-template="editorial"] .detail .card.highlight .xhy-list li::before { color: var(--ed-ink); }
/* ---------- 字义分解：拼色卡片矩阵，单字顶格超大字 ----------
四列时每栏正文只有 13 字宽、字号被迫压到 13px —— 放大模块却缩小正文，
是全页最伤可读性的一处。改两列：栏宽 500px，正文 15px 一行约 30 字，
四张卡等高成矩阵（矮卡由 flex 撑开，空释义在卡内垂直居中）。 */
html[data-template="editorial"] .detail .char-decompose {
grid-template-columns: repeat(2, 1fr);
gap: 18px; align-items: stretch;
}
html[data-template="editorial"] .detail .char-item {
background: #fff; border: 2px solid var(--ed-ink); border-radius: 0;
box-shadow: 5px 5px 0 var(--ed-ink);
padding: 0; gap: 0; overflow: hidden;
}
html[data-template="editorial"] .detail .char-meta {
padding: 16px 18px 18px; flex: 1 1 auto;
display: flex; flex-direction: column;
}
html[data-template="editorial"] .detail .char-senses { flex: 1 1 auto; }
/* 没有义项的字（如「石」）把提示语放在卡中央，避免底部挂一大块空白 */
html[data-template="editorial"] .detail .char-item:not(:has(.char-senses)) .char-meta { justify-content: center; }
html[data-template="editorial"] .detail .sn-title { font-size: 16px; }
html[data-template="editorial"] .detail .sn-text { font-size: 15px; line-height: 1.85; }
html[data-template="editorial"] .detail .sn-num { font-size: 15px; }
html[data-template="editorial"] .detail .char-shape { font-size: 14px; }
html[data-template="editorial"] .detail .char-glyph {
align-self: stretch; width: auto; height: auto;
padding: 16px 8px 14px;
border: 0; border-bottom: 2px solid var(--ed-ink); border-radius: 0;
background: var(--ed-blue); color: #fff;
font-family: var(--font-sans);
/* 两列后色带近 480px 宽，62px 的字只占 13%，色带反而成了主角，单字降级成标签。
提到 92px 才压得住这条色带。 */
font-size: 92px; font-weight: 900; line-height: 1;
justify-content: center; letter-spacing: 0;
}
html[data-template="editorial"] .detail .char-glyph a { color: inherit; border-bottom: 3px solid rgba(255, 255, 255, .55); }
html[data-template="editorial"] .detail .char-glyph a:hover { border-bottom-color: var(--ed-yellow); }
html[data-template="editorial"] .detail .char-item:nth-child(4n+1) .char-glyph { background: var(--ed-blue); color: #fff; }
html[data-template="editorial"] .detail .char-item:nth-child(4n+2) .char-glyph { background: var(--ed-red); color: #fff; }
html[data-template="editorial"] .detail .char-item:nth-child(4n+3) .char-glyph { background: var(--ed-yellow); color: var(--ed-ink); }
html[data-template="editorial"] .detail .char-item:nth-child(4n+4) .char-glyph { background: var(--ed-ink); color: #fff; }
html[data-template="editorial"] .detail .char-item:nth-child(4n+3) .char-glyph a { border-bottom-color: rgba(17, 17, 17, .35); }
html[data-template="editorial"] .detail .char-pron { font-weight: 700; color: var(--ed-ink); font-size: 14px; }
/* 基础样式里这枚小标签是番茄红字压米色底（3.66:1），改成黑字白底细黑框 */
html[data-template="editorial"] .detail .char-extra-item {
color: var(--ed-ink); background: #fff;
border: 2px solid var(--ed-ink); border-radius: 0;
font-weight: 700; padding: 0 6px;
}
html[data-template="editorial"] .detail .char-extra-sep { color: var(--ed-ink); }
/* 「展开全部释义」按钮：基础样式是蓝色描边胶囊，与黑框方角语言不一致 */
html[data-template="editorial"] .detail .expand-sense {
background: #fff; color: var(--ed-ink);
border: 2px solid var(--ed-ink); border-radius: 0;
font-weight: 800; padding: 5px 14px;
box-shadow: 3px 3px 0 var(--ed-ink);
transition: background .12s ease, transform .1s ease, box-shadow .1s ease;
}
html[data-template="editorial"] .detail .expand-sense:hover { background: var(--ed-yellow); color: var(--ed-ink); }
html[data-template="editorial"] .detail .expand-sense:active {
background: var(--ed-ink); color: var(--ed-yellow);
box-shadow: none; transform: translate(3px, 3px);
}
/* ---------- 成语接龙：横向彩色胶囊 + 黑粗线小三角箭头 ---------- */
html[data-template="editorial"] .detail .jielong-chain { gap: 0; row-gap: 14px; }
html[data-template="editorial"] .detail .jielong-node {
flex-direction: row; align-items: baseline; gap: 7px;
min-width: 0; padding: 8px 15px;
/* 箭头挂在自己左边：换行时箭头跟着节点走，不会有一枚箭头孤零零留在行尾 */
position: relative; margin-left: 30px;
background: #fff; border: 2px solid var(--ed-ink); border-radius: 999px;
transition: background .12s ease, border-color .12s ease;
}
html[data-template="editorial"] .detail .jielong-node:first-of-type { margin-left: 0; }
html[data-template="editorial"] .detail .jielong-node .jw {
font-family: var(--font-sans); font-size: 15px; font-weight: 900; color: var(--ed-ink);
}
html[data-template="editorial"] .detail .jielong-node .jp {
/* 拼音压在日本黄 / 浅蓝底上，62% 的墨黑只有 3.7:1，要压到 78% 才够 */
font-size: 11px; color: rgba(17, 17, 17, .78);
}
html[data-template="editorial"] .detail .jielong-node:nth-of-type(4n+1) { background: var(--ed-yellow); }
html[data-template="editorial"] .detail .jielong-node:nth-of-type(4n+3) { background: var(--ed-yellow); }
/* 当前条目压在其它之上，必须写在该组规则之后 */
html[data-template="editorial"] .detail .jielong-node.current {
background: var(--ed-ink); border-color: var(--ed-ink);
}
html[data-template="editorial"] .detail .jielong-node.current .jw { color: var(--ed-yellow); }
html[data-template="editorial"] .detail .jielong-node.current .jp { color: rgba(255, 255, 255, .7); }
html[data-template="editorial"] .detail .jielong-node:hover {
background: var(--ed-blue); border-color: var(--ed-ink);
box-shadow: none; transform: none;
}
html[data-template="editorial"] .detail .jielong-node:hover .jw { color: #fff; }
html[data-template="editorial"] .detail .jielong-node:hover .jp { color: rgba(255, 255, 255, .88); }
/* 箭头：停用模板里的「→」字符，改用节点左侧的黑粗线 + 小三角。
这样箭头与它指向的那个节点绑在一起，多行折行时仍然「谁指向谁」清楚。 */
html[data-template="editorial"] .detail .jielong-arrow { display: none; }
html[data-template="editorial"] .detail .jielong-node:not(:first-of-type)::before,
html[data-template="editorial"] .detail .jielong-node:not(:first-of-type)::after {
content: ''; position: absolute; top: 50%;
}
html[data-template="editorial"] .detail .jielong-node:not(:first-of-type)::before {
left: -22px; margin-top: -1.5px;
width: 14px; height: 3px; background: var(--ed-ink);
}
html[data-template="editorial"] .detail .jielong-node:not(:first-of-type)::after {
left: -8px; margin-top: -5px;
border-left: 8px solid var(--ed-ink);
border-top: 5px solid transparent;
border-bottom: 5px solid transparent;
}
/* 折行处：JS 量出「与上一个节点不在同一行」的节点，藏掉它左侧的箭头，
否则那枚箭头会指向左边的空白，读起来像断头。 */
html[data-template="editorial"] .detail .jielong-node.is-jl-wrap::before,
html[data-template="editorial"] .detail .jielong-node.is-jl-wrap::after { display: none; }
html[data-template="editorial"] .detail .tabs { border-bottom: 0; gap: 8px; margin-bottom: 18px; }
html[data-template="editorial"] .detail .tab {
background: #fff; border: 2px solid var(--ed-ink); border-radius: 0;
color: var(--ed-ink); font-weight: 800; padding: 7px 15px; margin-bottom: 0;
}
html[data-template="editorial"] .detail .tab:hover { background: var(--ed-yellow); color: var(--ed-ink); }
html[data-template="editorial"] .detail .tab.active {
background: var(--ed-ink); color: var(--ed-yellow); border-bottom-color: var(--ed-ink);
}
html[data-template="editorial"] .detail .btn-regen {
background: #fff; color: var(--ed-ink);
border: 2px solid var(--ed-ink); border-radius: 0;
font-weight: 800; letter-spacing: .04em;
box-shadow: 3px 3px 0 var(--ed-ink);
transition: background .12s ease, transform .1s ease, box-shadow .1s ease;
}
html[data-template="editorial"] .detail .btn-regen:hover { background: var(--ed-yellow); color: var(--ed-ink); }
html[data-template="editorial"] .detail .btn-regen:active {
background: var(--ed-ink); color: var(--ed-yellow);
box-shadow: none; transform: translate(3px, 3px);
}
/* ---------- 相关成语：不规则网格 + 真实错位叠压 ---------- */
html[data-template="editorial"] .detail .related-grid {
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
gap: 12px 14px; align-items: start;
}
html[data-template="editorial"] .detail .related-item {
background: #fff; border: 2px solid var(--ed-ink); border-radius: 0;
box-shadow: 4px 4px 0 var(--ed-ink);
padding: 14px 16px; gap: 4px;
transform: rotate(-.6deg);
transition: transform .14s ease, box-shadow .14s ease, background .14s ease;
}
/* 配色周期必须与列数（4）互质，否则 4n+k 恰好等于列号 —— 整列同色，
12 张卡会排成三条竖色带，看起来是「贴了三条色纸」而不是拼色网格。
改用 5：落点依次是第 1、2、3、4、1… 列，列内颜色才交错。 */
html[data-template="editorial"] .detail .related-item:nth-child(5n+1) { background: var(--ed-yellow); }
html[data-template="editorial"] .detail .related-item:nth-child(5n+3) {
background: var(--ed-blue); transform: rotate(.9deg);
}
html[data-template="editorial"] .detail .related-item:nth-child(5n+3) .rw,
html[data-template="editorial"] .detail .related-item:nth-child(5n+3) small,
html[data-template="editorial"] .detail .related-item:nth-child(5n+3) .rw-py { color: #fff; }
html[data-template="editorial"] .detail .related-item:nth-child(4n+3) { transform: rotate(-1.3deg); }
html[data-template="editorial"] .detail .related-item:nth-child(4n) { transform: rotate(1.1deg); }
/* 错位叠压用「与 4 互质的周期」做，才不会被 4 列列宽吃掉：
4n+k 只等于列号，整列一起上移等于没移；3n 的落点会绕着列走，列内才有交错。
位移控制在 20px 以内 —— 卡片下内边距 14px，压到的只是边线，不会盖住正文。 */
html[data-template="editorial"] .detail .related-item:nth-child(3n+2) { margin-top: 16px; }
html[data-template="editorial"] .detail .related-item:nth-child(3n) {
margin-top: -20px; z-index: 2;
}
html[data-template="editorial"] .detail .related-item:nth-child(7n+4) {
margin-top: -26px; z-index: 3;
}
html[data-template="editorial"] .detail .related-item .rw {
font-family: var(--font-sans); font-size: 17px; font-weight: 900; color: var(--ed-ink);
}
/* 悬停统一回正并压到最上层，避免错位后点不准 */
html[data-template="editorial"] .detail .related-item:hover {
background: var(--ed-ink); border-color: var(--ed-ink);
box-shadow: 6px 6px 0 var(--ed-yellow);
transform: rotate(0deg) translateY(-3px);
z-index: 9;
}
html[data-template="editorial"] .detail .related-item:hover .rw,
html[data-template="editorial"] .detail .related-item:hover small,
html[data-template="editorial"] .detail .related-item:hover .rw-py { color: #fff; }
/* 板块形态节奏：相关成语整块吃黑，所属标签整块吃黄 ——
避免整页 7 个盒子同宽同高同白底，让视线在收尾处有两次换挡。 */
html[data-template="editorial"] .detail > section:has(.related-grid) {
background: var(--ed-ink); box-shadow: 6px 6px 0 var(--ed-yellow);
}
html[data-template="editorial"] .detail > section:has(.related-grid) h2 { color: #fff; }
/* 黑底上的卡片：黑投影看不见，换成白投影才立得起来 */
html[data-template="editorial"] .detail > section:has(.related-grid) .related-item {
box-shadow: 4px 4px 0 rgba(255, 255, 255, .9);
}
html[data-template="editorial"] .detail > section:has(.related-grid) .related-item:hover {
box-shadow: 6px 6px 0 var(--ed-yellow);
}
html[data-template="editorial"] .detail > section:has(.tags-of-idiom) {
background: var(--ed-yellow);
}
html[data-template="editorial"] .detail > section:has(.tags-of-idiom) .chip { background: #fff; }
html[data-template="editorial"] .detail > section:has(.tags-of-idiom) a.chip:hover {
background: var(--ed-ink); color: var(--ed-yellow);
}
/* ---------- 首页首屏：让落地页与详情页说的是同一种语言 ---------- */
html[data-template="editorial"] .hero { text-align: left; padding: 40px 0 22px; }
html[data-template="editorial"] .hero h1 {
display: inline-block; max-width: 100%;
font-family: var(--font-sans);
font-size: clamp(30px, 4.2vw, 52px); font-weight: 900;
letter-spacing: -.01em; line-height: 1.1;
color: var(--ed-ink); background: var(--ed-yellow);
border: 3px solid var(--ed-ink); padding: .05em .18em .1em;
box-shadow: 9px 9px 0 var(--ed-blue);
transform: rotate(-.8deg);
}
html[data-template="editorial"] .hero-sub { font-size: 16px; margin: 18px 0 20px; }
html[data-template="editorial"] .hero-sub strong {
color: var(--ed-ink); background: var(--ed-yellow);
padding: 0 4px;
}
html[data-template="editorial"] .hero-search { margin: 0; max-width: 640px; }
html[data-template="editorial"] .hero-search input {
border: 2px solid var(--ed-ink); border-right: 0; border-radius: 0;
font-weight: 600;
}
html[data-template="editorial"] .hero-search input:focus { box-shadow: none; }
html[data-template="editorial"] .hero-search button {
background: var(--ed-yellow); color: var(--ed-ink);
border: 2px solid var(--ed-ink); border-radius: 0;
font-weight: 900; letter-spacing: .1em;
}
html[data-template="editorial"] .hero-search button:hover { background: var(--ed-red); color: var(--ed-ink); }
/* 属性胶囊条与第一张卡之间只剩 4px，读起来像「胶囊压在白卡上沿」 */
html[data-template="editorial"] .detail .tags { margin-bottom: 20px; }
/* 首页热门成语卡、站内各类胶囊：基础样式还是 8px 圆角 + 1px 细边 + 无投影的旧系统，
是首页面积最大的模块，不接管的话一致性只维持到首屏。 */
html[data-template="editorial"] .hot-item {
border: 2px solid var(--ed-ink); border-radius: 0;
box-shadow: 3px 3px 0 var(--ed-ink);
padding: 12px 14px;
}
html[data-template="editorial"] .hot-item:hover {
background: var(--ed-yellow); border-color: var(--ed-ink);
box-shadow: 3px 3px 0 var(--ed-ink);
}
html[data-template="editorial"] .hot-word { font-family: var(--font-sans); font-weight: 900; }
html[data-template="editorial"] .chip {
border: 2px solid var(--ed-ink); border-radius: 999px;
background: #fff; color: var(--ed-ink); font-weight: 700;
}
html[data-template="editorial"] a.chip:hover {
background: var(--ed-ink); color: var(--ed-yellow); border-color: var(--ed-ink);
}
/* ---------- 其余页面：跟随色板与描边，不单独重排 ---------- */
html[data-template="editorial"] .card {
border: 2px solid var(--ed-ink); border-radius: 0;
box-shadow: 5px 5px 0 var(--ed-ink);
}
html[data-template="editorial"] .result-list {
border: 2px solid var(--ed-ink); border-radius: 0;
box-shadow: 5px 5px 0 var(--ed-ink);
}
/* 标签页导语：整宽时一行 65 个汉字，收窄到与详情页引文同一个阅读宽度 */
html[data-template="editorial"] .tag-lead,
html[data-template="editorial"] .tag-intro p { max-width: 42em; }
html[data-template="editorial"] .tag-lead { font-size: 16px; line-height: 1.9; }
/* 非详情页的板块标题：去掉基础样式那条细下划线，换成左侧彩色小方块，
与详情页的编号装饰同语言（详情页由上面的 counter 规则接管）。 */
html[data-template="editorial"] .card h2::after { display: none; }
html[data-template="editorial"] .card h2::before {
content: ''; display: inline-block;
width: 13px; height: 13px; margin-right: 10px;
background: var(--ed-blue); border: 2px solid var(--ed-ink);
vertical-align: -2px;
}
html[data-template="editorial"] .card h2 { font-weight: 900; }
/* 拼音字母格：并入同一套描边语言 */
html[data-template="editorial"] .letter {
border: 2px solid var(--ed-ink); border-radius: 0;
box-shadow: 3px 3px 0 var(--ed-ink);
}
html[data-template="editorial"] .letter:hover { background: var(--ed-yellow); border-color: var(--ed-ink); }
/* ---------- 页脚：黑底 + 番茄红顶线 ---------- */
html[data-template="editorial"] .site-footer {
background: var(--ed-ink); border-top: 4px solid var(--ed-red); margin-top: 48px;
}
html[data-template="editorial"] .footer-nav a { color: #fff; font-weight: 700; }
html[data-template="editorial"] .footer-nav a:hover { color: var(--ed-yellow); }
html[data-template="editorial"] .copyright { color: rgba(255, 255, 255, .55); }
/* ============================================================================
editorial 动效（三处）
1. 主操作反馈：按钮按下统一 translate(3px,3px) + 收回硬投影，见上面各 :active；
2. 状态切换来路：接龙「顺接 / 逆接」切换时，面板从左侧淡入；
3. 首次进入出场：标题先落，拼音与属性标签跟上，板块按阅读顺序逐块「贴」上来。
—— 底层的 prefers-reduced-motion 规则（见上文 *）会把这三处一起关掉。
==========================================================================*/
@keyframes ed-paste {
from { opacity: 0; transform: translateY(16px) rotate(-1.2deg); }
to { opacity: 1; transform: translateY(0) rotate(0deg); }
}
@keyframes ed-title-in {
from { opacity: 0; transform: rotate(-1.1deg) translateY(-12px); }
to { opacity: 1; transform: rotate(-1.1deg) translateY(0); }
}
@keyframes ed-fade-up {
from { opacity: 0; transform: translateY(8px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes ed-panel-in {
from { opacity: 0; transform: translateX(-10px); }
to { opacity: 1; transform: translateX(0); }
}
html[data-template="editorial"] .detail-head h1 {
animation: ed-title-in .34s cubic-bezier(.22, .8, .24, 1) both;
}
html[data-template="editorial"] .detail-head .head-sub {
animation: ed-fade-up .28s ease-out .08s both;
}
html[data-template="editorial"] .grid-figure {
animation: ed-fade-up .30s ease-out .04s both;
}
html[data-template="editorial"] .tags {
animation: ed-fade-up .28s ease-out .12s both;
}
html[data-template="editorial"] .detail .card {
animation: ed-paste .34s cubic-bezier(.22, .8, .24, 1) both;
}
/* 按阅读顺序错开。步长压到 45ms 一轮：第一屏在 300ms 内到位，
不会被「整页先空一下」的观感拖累；折叠线下的几块本来就看不见。 */
html[data-template="editorial"] .detail > section:nth-of-type(1) { animation-delay: .06s; }
html[data-template="editorial"] .detail > section:nth-of-type(2) { animation-delay: .11s; }
html[data-template="editorial"] .detail > section:nth-of-type(3) { animation-delay: .16s; }
html[data-template="editorial"] .detail > section:nth-of-type(4) { animation-delay: .21s; }
html[data-template="editorial"] .detail > section:nth-of-type(5) { animation-delay: .26s; }
html[data-template="editorial"] .detail > section:nth-of-type(6) { animation-delay: .31s; }
html[data-template="editorial"] .detail > section:nth-of-type(7) { animation-delay: .36s; }
html[data-template="editorial"] .detail > section:nth-of-type(n+8) { animation-delay: .41s; }
/* 切换顺接 / 逆接：面板从左侧进场，指明「换到旁边那一组」 */
html[data-template="editorial"] .detail .tab-panel:not([hidden]) {
animation: ed-panel-in .22s ease-out;
}
/* ============ editorial 响应式（置于块尾，故必须带 html[data-template] 前缀） ============ */
@media (max-width: 900px) {
html[data-template="editorial"] .detail .char-decompose { grid-template-columns: repeat(2, 1fr); }
html[data-template="editorial"] .detail .related-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
html[data-template="editorial"] .detail-head { padding-top: 18px; }
html[data-template="editorial"] .detail-head h1 {
font-size: clamp(30px, 9.6vw, 46px);
letter-spacing: -.01em;
box-shadow: 6px 6px 0 var(--ed-blue);
transform: rotate(-.8deg);
}
html[data-template="editorial"] .detail .card {
padding: 18px 16px 20px; box-shadow: 4px 4px 0 var(--ed-ink);
}
html[data-template="editorial"] .detail .field { grid-template-columns: 1fr; gap: 8px; }
html[data-template="editorial"] .detail .char-decompose,
html[data-template="editorial"] .detail .related-grid { grid-template-columns: 1fr; }
/* 单列下错位会顶到相邻卡片，回正并取消负边距（:nth-child(n) 是为压过上面的 3n/4n 规则） */
html[data-template="editorial"] .detail .related-item:nth-child(n) {
transform: none; margin-top: 0; z-index: auto;
}
/* 窄屏接龙改为纵向，箭头随之朝下，间距由节点自身的上外边距统一控制 */
html[data-template="editorial"] .detail .jielong-chain {
flex-direction: column; align-items: flex-start; row-gap: 0;
}
html[data-template="editorial"] .detail .jielong-node { margin-left: 0; margin-top: 30px; }
html[data-template="editorial"] .detail .jielong-node:first-of-type { margin-top: 0; }
html[data-template="editorial"] .detail .jielong-node:not(:first-of-type)::before {
left: 22px; top: -18px; margin-top: 0;
width: 3px; height: 12px;
}
html[data-template="editorial"] .detail .jielong-node:not(:first-of-type)::after {
left: 17.5px; top: -8px; margin-top: 0;
border: 0;
border-top: 8px solid var(--ed-ink);
border-left: 5px solid transparent;
border-right: 5px solid transparent;
}
html[data-template="editorial"] .detail .char-glyph { font-size: 52px; padding: 12px 6px 10px; }
html[data-template="editorial"] .grid-img { box-shadow: 5px 5px 0 var(--ed-red); }
}
/* ============================================================================
* 视觉模板：高饱和糖果撞色（html[data-template="candy"]）
* ----------------------------------------------------------------------------
* 定位：小学生成语 / 趣味学习 / 成语闯关频道。整套语言是「彩色糖纸 + 深可可字」：
*
* 1. 四个糖色只当底。高饱和色上放白字会掉到 3:1 以下（柠檬黄配白字只有
* 1.3:1），所以文字一律用深可可 --cw-ink；白字只出现在深一档的草莓红
* #D6214F 上（5.6:1）——导航第 4 项、当前接龙节点、换一组按钮三处。
* 2. 形状 = 大圆角 + 白圈 + 同色系软投影（贴纸/糖果）。不画黑描边、不用
* 硬位移阴影：那是 editorial 的语法，两个模板必须一眼分得开。
* 3. 撞色靠周期错开。卡片网格多数是 4 列，配色若用 4n+k 会整数排成竖色带
* （editorial 踩过两次），这里一律用 5 或 3，字义分解改用 2×2 棋盘。
* ==========================================================================*/
html[data-template="candy"] {
/* ---- 糖纸四色：只做底 ---- */
--cw-lemon: #FFD93B;
--cw-straw: #FF5D7E;
--cw-lake: #35C4E8;
--cw-grass: #7BDA6B;
/* ---- 同色浅底：大面积分组用，正文仍是深可可 ---- */
--cw-lemon-l: #FFF6D1;
--cw-straw-l: #FFE9EE;
--cw-lake-l: #E6F7FD;
--cw-grass-l: #EAFBE4;
/* ---- 深一档：投影、箭头、需要白字时的底 ---- */
--cw-lemon-d: #E09A00;
--cw-straw-d: #D6214F;
--cw-lake-d: #0E86B8;
--cw-grass-d: #2E9B3E;
/* ---- 纸、字、线 ---- */
--cw-paper: #FFF9EC;
--cw-ink: #2B2118;
--cw-ink-soft: #5B4A3F;
--cw-ink-faint: #6E5A4C;
--cw-line: #F3E4CE;
/* ---- 接管基础变量，全站色板一次换掉 ---- */
--primary: #D6214F;
--primary-dark: #B21440;
--primary-soft: #FFF0F4;
--ink: #2B2118;
--ink-soft: #5B4A3F;
--ink-faint: #6E5A4C;
--bg: #FFF9EC;
--card: #FFFFFF;
--border: #F3E4CE;
--gold: #A85B00; /* 首页拼音等 13px 小字，白底 5.1:1 */
--radius: 20px;
--shadow: 0 6px 18px rgba(120, 80, 40, .10);
/* 「圆润粗」的字：本机没有阿里普惠体，按 普惠体 → 苹方 → 思源黑 回落，
字重推到 900、字距小幅放开补圆体的呼吸感（见交付说明）。 */
--font-sans: "Alibaba PuHuiTi 3.0", "Alibaba PuHuiTi", "PingFang SC",
"Source Han Sans SC", "Noto Sans SC", "Microsoft YaHei", sans-serif;
--font-serif: "Alibaba PuHuiTi 3.0", "Alibaba PuHuiTi", "PingFang SC",
"Source Han Sans SC", "Noto Sans SC", "Microsoft YaHei", sans-serif;
}
/* ---------- 顶部：胶囊导航 + 贴纸式搜索框 ---------- */
html[data-template="candy"] .site-header {
background-color: #FFFDF6;
background-image: linear-gradient(90deg, var(--cw-lemon), var(--cw-straw), var(--cw-lake), var(--cw-grass));
background-repeat: no-repeat;
background-position: left bottom;
background-size: 100% 5px;
border-bottom: 0;
box-shadow: 0 4px 14px rgba(120, 80, 40, .06);
}
html[data-template="candy"] .header-inner { gap: 14px; min-height: 68px; }
html[data-template="candy"] .logo {
font-family: var(--font-sans); font-size: 22px; font-weight: 900;
letter-spacing: .01em; color: var(--cw-ink);
background: var(--cw-lemon); border-radius: 999px; padding: 3px 16px;
box-shadow: 0 3px 0 var(--cw-lemon-d);
transition: transform .18s cubic-bezier(.34, 1.56, .64, 1), box-shadow .18s;
}
html[data-template="candy"] .logo:hover {
color: var(--cw-ink); background: #FFE467;
transform: translateY(-2px); box-shadow: 0 5px 0 var(--cw-lemon-d);
}
/* 导航：四色胶囊轮转。颜色跟位置绑定，全站一致，所以不随页面乱换。 */
html[data-template="candy"] .nav { gap: 8px; flex-wrap: wrap; }
html[data-template="candy"] .nav a {
padding: 7px 18px; border: 2px solid #fff; border-radius: 999px;
color: var(--cw-ink); font-size: 15px; font-weight: 800; letter-spacing: .01em;
background: #fff; box-shadow: 0 3px 0 rgba(43, 33, 24, .08);
transition: transform .16s, box-shadow .16s, background .16s;
}
html[data-template="candy"] .nav a:nth-child(4n+1) { background: var(--cw-lemon); box-shadow: 0 3px 0 var(--cw-lemon-d); }
html[data-template="candy"] .nav a:nth-child(4n+2) { background: var(--cw-lake); box-shadow: 0 3px 0 var(--cw-lake-d); }
html[data-template="candy"] .nav a:nth-child(4n+3) { background: var(--cw-grass); box-shadow: 0 3px 0 var(--cw-grass-d); }
html[data-template="candy"] .nav a:nth-child(4n+4) { background: var(--cw-straw); box-shadow: 0 3px 0 var(--cw-straw-d); }
html[data-template="candy"] .nav a:hover { color: var(--cw-ink); transform: translateY(-2px); }
html[data-template="candy"] .nav a:active { transform: translateY(2px); box-shadow: 0 1px 0 rgba(43, 33, 24, .1); }
/* 搜索框：一圈四色渐变当「贴纸边」，输入区白底，按钮是草莓糖 */
html[data-template="candy"] .search-box {
align-items: center; gap: 4px; padding: 4px; border-radius: 999px;
background: linear-gradient(90deg, var(--cw-lemon), var(--cw-straw) 34%, var(--cw-lake) 68%, var(--cw-grass));
box-shadow: 0 4px 12px rgba(120, 80, 40, .10);
}
html[data-template="candy"] .search-box input {
height: 38px; padding: 0 16px; border: 0; border-radius: 999px 0 0 999px;
background: #fff; font-size: 15px;
}
html[data-template="candy"] .search-box input:focus { box-shadow: none; }
html[data-template="candy"] .search-box button {
height: 38px; padding: 0 20px; border: 0; border-radius: 999px;
background: var(--cw-straw-d); color: #fff; font-size: 15px; font-weight: 800;
transition: transform .14s, background .14s;
}
html[data-template="candy"] .search-box button:hover { background: #B21440; }
html[data-template="candy"] .search-box button:active { transform: translateY(1px); }
html[data-template="candy"] .suggest {
top: 54px; border: 2px solid var(--cw-line); border-radius: 20px;
box-shadow: 0 12px 26px rgba(120, 80, 40, .16);
}
html[data-template="candy"] .suggest a { border-bottom: 1px dashed var(--cw-line); }
html[data-template="candy"] .suggest a:hover,
html[data-template="candy"] .suggest a.active { background: var(--cw-lemon-l); }
/* ---------- 面包屑 ---------- */
html[data-template="candy"] .breadcrumb { padding: 18px 0 2px; font-size: 13px; }
html[data-template="candy"] .breadcrumb a { color: var(--cw-straw-d); font-weight: 700; }
html[data-template="candy"] .breadcrumb li + li::before { content: '›'; color: #C7B49B; margin-right: 6px; }
/* ---------- 标题区：马克笔高亮 + 星星贴纸 ---------- */
html[data-template="candy"] .detail-head { position: relative; padding: 22px 0 4px; }
html[data-template="candy"] .detail-head h1 {
display: inline-block; position: relative; z-index: 0;
font-family: var(--font-sans);
font-size: clamp(46px, 6.9vw, 88px); font-weight: 900;
line-height: 1.16; letter-spacing: .015em; color: var(--cw-ink);
padding: 0 .1em;
}
/* 马克笔：只压在字的下半部，比整块色底更像「划重点」，也不会抢字形 */
html[data-template="candy"] .detail-head h1::before {
content: ''; position: absolute; z-index: -1;
left: -.04em; right: -.04em; bottom: .1em; height: .42em;
background: linear-gradient(90deg, #FFD93B, #FFE98C);
border-radius: 999px; transform: rotate(-1.3deg);
}
html[data-template="candy"] .detail-head .pinyin {
font-size: 15px; color: var(--cw-ink-faint); letter-spacing: .18em;
}
/* 星星与圆点放在拼音那一行，不放在标题两侧：标题长度从 2 字到 12 字不等，
按百分比贴边的装饰在长标题上会压住字（实测「捉奸见双，抓贼见赃」）。
拼音行永远是居中的一小截，两侧的留白稳定。 */
html[data-template="candy"] .detail-head .head-sub::before {
content: ''; flex: 0 0 auto;
width: 17px; height: 17px; background: var(--cw-straw);
clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
transform: rotate(12deg) translateY(1px);
}
html[data-template="candy"] .detail-head .head-sub::after {
content: ''; flex: 0 0 auto;
width: 11px; height: 11px; border-radius: 50%; background: var(--cw-lake);
box-shadow: 6px 8px 0 -3px var(--cw-grass);
}
/* 田字格：白卡纸托底，圆角收大 */
html[data-template="candy"] .grid-figure { margin: 10px 0 16px; }
html[data-template="candy"] .grid-img {
background: #fff; padding: 10px; border-radius: 24px;
box-shadow: 0 6px 0 -1px var(--cw-lemon-l), 0 14px 26px rgba(120, 80, 40, .10);
}
/* ---------- 属性标签：彩色泡泡 ---------- */
html[data-template="candy"] .tags { gap: 10px; padding: 14px 0 6px; margin-bottom: 20px; }
html[data-template="candy"] .tag {
padding: 7px 16px; border: 2px solid #fff; border-radius: 999px;
background: var(--cw-lemon); box-shadow: 0 3px 0 rgba(43, 33, 24, .10);
}
/* 标签名和值都压深：12px 小字压在草莓红上，灰一档就掉到 4.5:1 以下，
所以两者只靠字号和字重区分，不靠颜色深浅。 */
html[data-template="candy"] .tag-label { color: var(--cw-ink); font-size: 12px; font-weight: 700; letter-spacing: .04em; }
html[data-template="candy"] .tag-value { color: var(--cw-ink); font-size: 14px; font-weight: 800; }
html[data-template="candy"] .tag:nth-child(4n+1) { background: var(--cw-lemon); }
html[data-template="candy"] .tag:nth-child(4n+2) { background: var(--cw-lake); }
html[data-template="candy"] .tag:nth-child(4n+3) { background: var(--cw-grass); }
html[data-template="candy"] .tag:nth-child(4n+4) { background: var(--cw-straw); }
/* ---------- 卡片与板块标题：圆形编号 ---------- */
html[data-template="candy"] .card {
padding: 26px 28px; border: 2px solid var(--cw-line); border-radius: 24px;
box-shadow: 0 6px 18px rgba(120, 80, 40, .09);
}
html[data-template="candy"] .detail { counter-reset: cw-sec; }
html[data-template="candy"] .detail .card h2 {
display: flex; align-items: center; gap: 12px;
font-family: var(--font-sans); font-size: 23px; font-weight: 900;
letter-spacing: .01em; line-height: 1.35; padding-bottom: 0; margin-bottom: 18px;
}
html[data-template="candy"] .detail .card h2::after { display: none; }
html[data-template="candy"] .detail .card h2::before {
counter-increment: cw-sec; content: counter(cw-sec);
flex: 0 0 auto; width: 38px; height: 38px; box-sizing: border-box;
display: inline-flex; align-items: center; justify-content: center;
font-family: var(--font-sans); font-size: 17px; font-weight: 900;
color: var(--cw-ink); background: var(--cw-lemon);
border: 3px solid #fff; border-radius: 50%;
box-shadow: 0 3px 0 rgba(43, 33, 24, .12);
}
html[data-template="candy"] .detail > section:nth-of-type(4n+1) h2::before { background: var(--cw-lemon); }
html[data-template="candy"] .detail > section:nth-of-type(4n+2) h2::before { background: var(--cw-lake); }
html[data-template="candy"] .detail > section:nth-of-type(4n+3) h2::before { background: var(--cw-grass); }
html[data-template="candy"] .detail > section:nth-of-type(4n+4) h2::before { background: var(--cw-straw); }
/* ---------- 释义：逐行荧光笔 ----------
* 早先写成「色块 + 圆角 + 内阴影」，读起来像卡里又套了一张卡，也和上下白卡
* 抢层级。改成按行高的条纹渐变：每行只染下 44%，是真的荧光笔，不是容器。 */
html[data-template="candy"] .detail .explanation {
font-size: 17px; line-height: 1.95; color: var(--cw-ink);
/* 整段宽度会画出一条比句子长三倍的黄条，读起来像下划线丢了头。
收到文字宽度，荧光笔就停在最后一个字上。 */
width: fit-content; max-width: 100%;
background-image: linear-gradient(180deg, transparent 46%, #FFEFB3 46%, #FFEFB3 100%);
background-size: 100% 1.95em;
background-repeat: repeat-y;
}
html[data-template="candy"] .detail .story { font-size: 16px; line-height: 1.95; }
/* ---------- 详细解释：圆角字段标签 + 虚线分隔 ---------- */
/* 字段列表整体收到 46em：引文块若只收窄自己、虚线还横贯整卡，
右侧会留一块「被截断」的空白，看起来像没做完。 */
html[data-template="candy"] .detail .fields { gap: 0; max-width: 46em; }
html[data-template="candy"] .detail .field {
grid-template-columns: 66px 1fr; gap: 16px;
padding: 13px 0; border-bottom: 2px dashed var(--cw-line);
}
html[data-template="candy"] .detail .field:first-child { padding-top: 0; }
html[data-template="candy"] .detail .field:last-child { border-bottom: 0; padding-bottom: 0; }
html[data-template="candy"] .detail .field dt {
align-self: start; margin-top: 3px; padding: 2px 0;
text-align: center; color: var(--cw-ink);
font-size: 13px; font-weight: 800; line-height: 1.8;
background: var(--cw-lemon); border-radius: 999px;
box-shadow: 0 2px 0 rgba(43, 33, 24, .10);
}
html[data-template="candy"] .detail .field dd { font-size: 16px; line-height: 1.85; color: var(--cw-ink); }
html[data-template="candy"] .detail .field dd.quote {
max-width: 100%;
background: var(--cw-lake-l); border: 0; border-radius: 16px;
padding: 14px 18px; color: var(--cw-ink);
}
/* ---------- 造句：糖果圆号 ---------- */
html[data-template="candy"] .detail .zju-list { padding-left: 0; list-style: none; gap: 12px; counter-reset: cw-zju; }
html[data-template="candy"] .detail .zju-list li { position: relative; padding-left: 38px; max-width: 40em; font-size: 15px; line-height: 1.85; }
html[data-template="candy"] .detail .zju-list li::before {
counter-increment: cw-zju; content: counter(cw-zju);
position: absolute; left: 0; top: 2px;
width: 26px; height: 26px; box-sizing: border-box;
display: flex; align-items: center; justify-content: center;
font-size: 13px; font-weight: 900; color: var(--cw-ink);
background: var(--cw-grass); border: 2px solid #fff; border-radius: 50%;
box-shadow: 0 2px 0 rgba(43, 33, 24, .10);
}
/* ---------- 近反义词：颜色承载含义（近=青草、反=草莓） ---------- */
html[data-template="candy"] .detail .syn-ant > strong {
width: auto; margin-right: 10px; padding: 3px 14px;
border-radius: 999px; background: var(--cw-grass);
color: var(--cw-ink); font-size: 14px; font-weight: 800; vertical-align: 3px;
}
html[data-template="candy"] .detail .syn-ant:nth-of-type(2) > strong { background: var(--cw-straw); }
html[data-template="candy"] .detail .chip {
border: 2px solid #fff; border-radius: 999px; background: #fff;
color: var(--cw-ink); font-weight: 700;
box-shadow: 0 3px 0 rgba(43, 33, 24, .10);
transition: transform .18s cubic-bezier(.34, 1.56, .64, 1), box-shadow .18s, background .18s;
}
html[data-template="candy"] .detail .syn-ant:nth-of-type(1) .chip { background: var(--cw-grass-l); }
html[data-template="candy"] .detail .syn-ant:nth-of-type(2) .chip { background: var(--cw-straw-l); }
html[data-template="candy"] .detail a.chip:hover {
background: var(--cw-lemon); color: var(--cw-ink); border-color: #fff;
transform: translateY(-2px); box-shadow: 0 5px 0 rgba(43, 33, 24, .12);
}
html[data-template="candy"] .detail a.chip:active { transform: translateY(1px); box-shadow: 0 1px 0 rgba(43, 33, 24, .12); }
/* ---------- 趣味延伸：不整块填色（全页只剩它是粉的会显得像漏改），换成粉虚线描边 ---------- */
html[data-template="candy"] .detail .card.highlight { background: #fff; border: 3px dashed #FFC2CF; }
html[data-template="candy"] .detail .card.highlight .gold {
margin-right: 8px; padding: 1px 10px; border-radius: 999px;
background: var(--cw-straw); color: var(--cw-ink); font-size: 13px;
}
/* ---------- 字义分解：2×2 糖果卡，单字居中超大 ----------
* 四列时每格只有 240px，释义正文会被压到一行 8 个字；2×2 每格 500px，
* 四张卡仍是「四张不同糖果色」，字才有位置放大。配色按 4n 走棋盘：
* 行1 黄|湖蓝，行2 青草|草莓，相邻行列都不同色，不会连成竖色带。 */
html[data-template="candy"] .detail .char-decompose {
grid-template-columns: repeat(2, 1fr); gap: 18px; align-items: stretch;
}
html[data-template="candy"] .detail .char-item {
gap: 12px; padding: 20px 22px 22px;
background: var(--cw-lemon); border: 3px solid #fff; border-radius: 26px;
box-shadow: 0 8px 0 rgba(43, 33, 24, .10), 0 14px 24px rgba(120, 80, 40, .10);
}
html[data-template="candy"] .detail .char-item:nth-of-type(4n+2) { background: var(--cw-lake); }
html[data-template="candy"] .detail .char-item:nth-of-type(4n+3) { background: var(--cw-grass); }
html[data-template="candy"] .detail .char-item:nth-of-type(4n+4) { background: var(--cw-straw); }
html[data-template="candy"] .detail .char-glyph {
align-self: center; width: 104px; height: 104px; margin: 2px auto 6px;
display: flex; align-items: center; justify-content: center;
font-family: var(--font-sans); font-size: 62px; font-weight: 900; line-height: 1;
color: var(--cw-ink); background: rgba(255, 255, 255, .93);
border: 0; border-radius: 30px;
box-shadow: 0 6px 0 rgba(43, 33, 24, .12), inset 0 0 0 3px rgba(255, 255, 255, .9);
}
html[data-template="candy"] .detail .char-glyph a { color: var(--cw-ink); }
html[data-template="candy"] .detail .char-meta { display: flex; flex-direction: column; flex: 1 1 auto; }
html[data-template="candy"] .detail .char-pron { font-size: 14px; font-weight: 600; color: var(--cw-ink); }
/* 属性行改成一行小字（原来是 12px 白胶囊，一行三个「卡里套胶囊」） */
html[data-template="candy"] .detail .char-extra { gap: 4px; margin-bottom: 8px; }
html[data-template="candy"] .detail .char-extra-item {
padding: 0; border: 0; border-radius: 0; background: none;
color: var(--cw-ink); font-size: 13px; font-weight: 600;
}
html[data-template="candy"] .detail .char-extra-sep { color: rgba(43, 33, 24, .40); }
html[data-template="candy"] .detail .char-shape { font-size: 13px; color: var(--cw-ink); }
/* 释义与上面的读音/属性之间拉一条虚线：卡里信息多，读者需要一眼分开「这字是谁」和「它什么意思」 */
html[data-template="candy"] .detail .char-senses {
gap: 11px; flex: 1 1 auto;
border-top: 1px dashed rgba(43, 33, 24, .22); padding-top: 11px;
}
html[data-template="candy"] .detail .sn-num { color: var(--cw-ink); font-weight: 900; }
html[data-template="candy"] .detail .sn-title { color: var(--cw-ink); font-size: 15px; font-weight: 800; }
html[data-template="candy"] .detail .sn-text { color: var(--cw-ink); font-size: 15px; line-height: 1.85; }
html[data-template="candy"] .detail .expand-sense {
align-self: center; margin-top: 8px; padding: 7px 18px;
border: 0; border-radius: 999px; background: #fff; color: var(--cw-straw-d);
font-size: 13px; font-weight: 800; box-shadow: 0 3px 0 rgba(43, 33, 24, .12);
transition: transform .16s, box-shadow .16s;
}
html[data-template="candy"] .detail .expand-sense:hover { background: #fff; color: var(--cw-straw-d); transform: translateY(-1px); }
html[data-template="candy"] .detail .expand-sense:active { transform: translateY(2px); box-shadow: 0 1px 0 rgba(43, 33, 24, .12); }
/* ---------- 成语接龙：糖果胶囊 + 圆角 chevron ---------- */
html[data-template="candy"] .detail .tabs { gap: 10px; margin-bottom: 20px; border-bottom: 0; }
html[data-template="candy"] .detail .tab {
margin-bottom: 0; padding: 9px 20px; border: 0; border-radius: 999px;
background: #fff; color: var(--cw-ink-soft);
font-size: 14px; font-weight: 800;
box-shadow: 0 3px 0 rgba(43, 33, 24, .10);
transition: transform .16s, box-shadow .16s, background .16s, color .16s;
}
html[data-template="candy"] .detail .tab:hover { color: var(--cw-ink); background: #fff; transform: translateY(-1px); }
html[data-template="candy"] .detail .tab.active {
background: var(--cw-lemon); color: var(--cw-ink);
box-shadow: 0 4px 0 var(--cw-lemon-d); transform: translateY(-1px);
}
html[data-template="candy"] .detail .tab:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--cw-lemon-d); }
html[data-template="candy"] .detail .jielong-chain { gap: 10px; align-items: center; }
html[data-template="candy"] .detail .jielong-node {
position: relative; margin-left: 32px;
flex-direction: column; align-items: center; gap: 1px;
padding: 8px 15px; min-width: 0;
background: var(--cw-lemon-l); border: 2px solid #fff; border-radius: 999px;
box-shadow: 0 3px 0 rgba(43, 33, 24, .10);
transition: transform .18s cubic-bezier(.34, 1.56, .64, 1), box-shadow .18s, background .18s;
}
html[data-template="candy"] .detail .jielong-node:first-of-type { margin-left: 0; }
/* 白卡上的白胶囊会糊成一片，所以节点直接给糖纸色；当前成语单独一色 */
html[data-template="candy"] .detail .jielong-node:nth-of-type(3n+1) { background: var(--cw-lemon); }
html[data-template="candy"] .detail .jielong-node:nth-of-type(3n+2) { background: var(--cw-lake); }
html[data-template="candy"] .detail .jielong-node:nth-of-type(3n) { background: var(--cw-grass); }
html[data-template="candy"] .detail .jielong-node:hover {
transform: translateY(-3px); border-color: #fff;
box-shadow: 0 6px 0 rgba(43, 33, 24, .14);
}
html[data-template="candy"] .detail .jielong-node:active { transform: translateY(1px); box-shadow: 0 1px 0 rgba(43, 33, 24, .14); }
html[data-template="candy"] .detail .jielong-node .jw { font-size: 16px; font-weight: 800; color: var(--cw-ink); letter-spacing: .02em; }
/* 拼音压在湖水蓝上时 11px 的浅灰只有 3.2:1，所以这里也用深色，
层级靠字号（11px vs 16px）和字重（400 vs 800）拉开。 */
html[data-template="candy"] .detail .jielong-node .jp { font-size: 11px; color: #3A2C22; letter-spacing: .02em; }
/* 当前成语：唯一允许白字的地方（深草莓 5.6:1） */
html[data-template="candy"] .detail .jielong-node.current {
background: var(--cw-straw-d); border-color: #fff; box-shadow: 0 3px 0 #A50F36;
}
html[data-template="candy"] .detail .jielong-node.current .jw { color: #fff; }
html[data-template="candy"] .detail .jielong-node.current .jp { color: #FFEFF3; }
/* 箭头画在节点左侧：链条折行时行尾不会悬空，折行处由 app.js 打 is-jl-wrap 藏掉 */
html[data-template="candy"] .detail .jielong-arrow { display: none; }
html[data-template="candy"] .detail .jielong-node:not(:first-of-type)::before {
content: ''; position: absolute; left: -23px; top: 50%;
width: 13px; height: 13px; margin-top: -11px;
border-top: 3.5px solid var(--cw-lake-d); border-right: 3.5px solid var(--cw-lake-d);
border-radius: 4px; transform: rotate(45deg);
}
html[data-template="candy"] .detail .jielong-node:nth-of-type(4n+1)::before { border-color: var(--cw-lemon-d) var(--cw-lemon-d) transparent transparent; }
html[data-template="candy"] .detail .jielong-node:nth-of-type(4n+2)::before { border-color: var(--cw-straw-d) var(--cw-straw-d) transparent transparent; }
html[data-template="candy"] .detail .jielong-node:nth-of-type(4n+3)::before { border-color: var(--cw-lake-d) var(--cw-lake-d) transparent transparent; }
html[data-template="candy"] .detail .jielong-node:nth-of-type(4n+4)::before { border-color: var(--cw-grass-d) var(--cw-grass-d) transparent transparent; }
html[data-template="candy"] .detail .jielong-node.is-jl-wrap::before { display: none; }
html[data-template="candy"] .detail .btn-regen {
padding: 10px 24px; border: 0; border-radius: 999px;
background: var(--cw-straw-d); color: #fff; font-size: 14px; font-weight: 800;
box-shadow: 0 4px 0 #A50F36;
transition: transform .16s, box-shadow .16s, background .16s;
}
html[data-template="candy"] .detail .btn-regen:hover { background: #B21440; color: #fff; transform: translateY(-1px); box-shadow: 0 5px 0 #A50F36; }
html[data-template="candy"] .detail .btn-regen:active { transform: translateY(3px); box-shadow: 0 1px 0 #A50F36; }
html[data-template="candy"] .detail .btn-regen:disabled { opacity: .62; transform: none; box-shadow: 0 4px 0 #A50F36; }
/* ---------- 相关成语：4 列矩阵 + 上浮 ---------- */
html[data-template="candy"] .detail .related-grid { gap: 16px; }
html[data-template="candy"] .detail .related-item {
padding: 16px 18px; border: 2px solid var(--cw-line); border-radius: 22px;
background: #fff; box-shadow: 0 4px 0 rgba(43, 33, 24, .10);
transition: transform .2s cubic-bezier(.34, 1.56, .64, 1), box-shadow .2s;
}
html[data-template="candy"] .detail .related-item:hover {
transform: translateY(-4px);
box-shadow: 0 9px 0 rgba(43, 33, 24, .12), 0 14px 26px rgba(120, 80, 40, .12);
}
/* 周期 5 与 4 列互质：颜色横向游走，不会排成三根竖色带。只染 5 分之 2，
12 张里 9 张满色会把这一块喊得比字义卡还响。 */
html[data-template="candy"] .detail .related-item:nth-of-type(5n+1) { background: var(--cw-lemon); border-color: #fff; }
html[data-template="candy"] .detail .related-item:nth-of-type(5n+4) { background: var(--cw-lake); border-color: #fff; }
html[data-template="candy"] .detail .related-item .rw { font-family: var(--font-sans); font-size: 17px; font-weight: 900; color: var(--cw-ink); }
html[data-template="candy"] .detail .related-item small { color: var(--cw-ink); }
/* 板块容器统一白卡：一会儿白一会儿浅粉一会儿薄荷，宽度和底色来回跳，
读起来像三个模板拼起来。颜色全部交给卡片内部承担。 */
html[data-template="candy"] .detail > section:has(.tags-of-idiom) .chip { background: #fff; }
/* ---------- 首页：落地页跟详情页说同一种语言 ---------- */
html[data-template="candy"] .hero { position: relative; padding: 42px 0 20px; }
html[data-template="candy"] .hero h1 {
display: inline-block; position: relative; z-index: 0;
font-family: var(--font-sans); font-size: clamp(30px, 4.4vw, 54px); font-weight: 900;
letter-spacing: .02em; color: var(--cw-ink); margin-bottom: 12px;
}
html[data-template="candy"] .hero h1::after {
content: ''; position: absolute; z-index: -1;
left: -.1em; right: -.1em; bottom: .08em; height: .38em;
background: var(--cw-lemon); border-radius: 999px; transform: rotate(-1.2deg);
}
html[data-template="candy"] .hero-sub { margin: 16px 0 22px; font-size: 16px; color: var(--cw-ink-soft); }
html[data-template="candy"] .hero-sub strong {
padding: 1px 8px; border-radius: 8px; background: var(--cw-lemon); color: var(--cw-ink);
}
html[data-template="candy"] .hero-search {
max-width: 640px; padding: 5px; gap: 5px; align-items: center; border-radius: 999px;
background: linear-gradient(90deg, var(--cw-lemon), var(--cw-straw) 34%, var(--cw-lake) 68%, var(--cw-grass));
box-shadow: 0 8px 22px rgba(120, 80, 40, .12);
}
html[data-template="candy"] .hero-search input {
height: 46px; padding: 0 20px; border: 0; border-radius: 999px; font-size: 15px;
}
html[data-template="candy"] .hero-search input:focus { box-shadow: none; }
html[data-template="candy"] .hero-search button {
height: 46px; padding: 0 26px; border-radius: 999px;
background: var(--cw-straw-d); color: #fff; font-size: 16px; font-weight: 900;
transition: transform .14s, background .14s;
}
html[data-template="candy"] .hero-search button:hover { background: #B21440; }
html[data-template="candy"] .hero-search button:active { transform: translateY(2px); }
/* 首屏也撒一把糖：位置固定在 hero 两侧，窄屏收起免得压住标题 */
@media (min-width: 900px) {
html[data-template="candy"] .hero::before {
content: ''; position: absolute; left: 11%; top: 62px;
width: 14px; height: 14px; border-radius: 50%; background: var(--cw-grass);
box-shadow: 16px 30px 0 -4px var(--cw-lemon), 42px 6px 0 -5px var(--cw-straw);
}
html[data-template="candy"] .hero::after {
content: ''; position: absolute; right: 12%; top: 48px;
width: 30px; height: 30px; background: var(--cw-lake);
clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
transform: rotate(-12deg);
}
}
/* 26 个字母同时上四色会变成一堵彩票墙，所以字母格保持白卡，只在指到时上色 */
html[data-template="candy"] .letter {
border: 2px solid #fff; border-radius: 18px; background: #fff;
color: var(--cw-ink); font-weight: 900;
box-shadow: 0 3px 0 rgba(43, 33, 24, .10);
transition: transform .18s cubic-bezier(.34, 1.56, .64, 1), box-shadow .18s, background .18s;
}
html[data-template="candy"] .letter:hover {
background: var(--cw-lemon); border-color: #fff; color: var(--cw-ink);
transform: translateY(-3px); box-shadow: 0 6px 0 var(--cw-lemon-d);
}
html[data-template="candy"] .letter.empty { color: var(--cw-ink-faint); }
html[data-template="candy"] .letter small { color: var(--cw-ink-faint); }
/* 首页四张大白卡会连成一片，隔块换浅奶油，节奏才出来 */
html[data-template="candy"] main > section.card:nth-of-type(2n) {
background: #FFFBEF; border-color: #F7EAD6;
}
/* 热门卡：1080px 下 hot-grid 正好 4 列，配色同样用周期 5 */
html[data-template="candy"] .hot-item {
padding: 15px 17px; border: 2px solid var(--cw-line); border-radius: 20px; background: #fff;
box-shadow: 0 4px 0 rgba(43, 33, 24, .10);
transition: transform .2s cubic-bezier(.34, 1.56, .64, 1), box-shadow .2s, background .2s;
}
html[data-template="candy"] .hot-item:hover {
background: #fff; border-color: var(--cw-lemon-d);
transform: translateY(-4px); box-shadow: 0 9px 0 rgba(43, 33, 24, .12);
}/* 热门卡 20 张：只染 5 分之 2 的满色，其余白卡。全是浅糖色会整体发灰，
全是满色又排成色卡墙。 */
html[data-template="candy"] .hot-item:nth-of-type(5n+1) { background: var(--cw-lemon); border-color: #fff; }
html[data-template="candy"] .hot-item:nth-of-type(5n+4) { background: var(--cw-lake); border-color: #fff; }
html[data-template="candy"] .hot-word { font-family: var(--font-sans); font-size: 18px; font-weight: 900; color: var(--cw-ink); }
/* 糖纸上只有深可可字能稳定过 4.5:1：--gold 压在湖水蓝上只剩 2.5:1 */
html[data-template="candy"] .hot-pinyin { color: var(--cw-ink); font-size: 13px; font-weight: 600; }
html[data-template="candy"] .hot-expl { color: var(--cw-ink); font-size: 13px; }
/* 全站胶囊：白底 + 暖描边（白底白卡会互相吞掉），指到变柠檬糖 */
html[data-template="candy"] .chip {
border: 2px solid var(--cw-line); border-radius: 999px; background: #fff;
color: var(--cw-ink); font-weight: 700;
box-shadow: 0 3px 0 rgba(43, 33, 24, .07);
transition: transform .18s cubic-bezier(.34, 1.56, .64, 1), box-shadow .18s, background .18s, border-color .18s;
}
html[data-template="candy"] a.chip:hover {
background: var(--cw-lemon); color: var(--cw-ink); border-color: #fff;
transform: translateY(-2px); box-shadow: 0 5px 0 rgba(43, 33, 24, .12);
}
html[data-template="candy"] .chip small { margin-left: 5px; font-size: 11px; color: var(--cw-ink-faint); }
/* 主色 #D6214F 压在浅草莓底上只剩 4.33:1，深一档才够 */
html[data-template="candy"] .chip-py .cp-word { color: var(--primary-dark); }
html[data-template="candy"] .chip .cp-py { color: var(--cw-ink-faint); }
/* 首页四个入口胶囊是并列关系、没有先后，四色刚好一一对应，不是随机撒糖 */
html[data-template="candy"] .chips .chip-py:nth-of-type(4n+1) { background: var(--cw-lemon-l); border-color: #FFE9A8; }
html[data-template="candy"] .chips .chip-py:nth-of-type(4n+2) { background: var(--cw-lake-l); border-color: #BEE9F7; }
html[data-template="candy"] .chips .chip-py:nth-of-type(4n+3) { background: var(--cw-grass-l); border-color: #C6EFB9; }
html[data-template="candy"] .chips .chip-py:nth-of-type(4n+4) { background: var(--cw-straw-l); border-color: #FFC9D5; }
/* ---------- 其余页面：只跟随色板与圆角 ---------- */
html[data-template="candy"] .card h2::after { display: none; }
html[data-template="candy"] .card h2::before {
content: ''; display: inline-block; width: 14px; height: 14px; margin-right: 10px;
background: var(--cw-lake); border-radius: 50%;
box-shadow: 0 0 0 3px #fff; vertical-align: 1px;
}
html[data-template="candy"] .card h2 { font-weight: 900; }
html[data-template="candy"] .result-list { border-radius: 24px; }
/* 列表页：标题跟着详情页走 900 字重，条目分隔从细实线换虚线，和详情页同一套 */
html[data-template="candy"] .list-head h1 { font-size: 30px; font-weight: 900; letter-spacing: .01em; line-height: 1.35; }
html[data-template="candy"] .result-item { border-bottom: 2px dashed var(--cw-line); }
html[data-template="candy"] .result-item:last-child { border-bottom: 0; }
html[data-template="candy"] .result-item .rw { font-weight: 900; }
html[data-template="candy"] .tag-lead,
html[data-template="candy"] .tag-intro p,
html[data-template="candy"] .list-desc { max-width: 42em; }
html[data-template="candy"] .tag-lead { font-size: 16px; line-height: 1.9; }
html[data-template="candy"] .muted { color: var(--cw-ink-soft); }
/* ---------- 页脚：奶油底 + 四色缎带 ---------- */
html[data-template="candy"] .site-footer {
margin-top: 44px; padding-top: 8px;
background-color: #FFF1DC; color: var(--cw-ink-soft);
background-image: linear-gradient(90deg, var(--cw-lemon), var(--cw-straw), var(--cw-lake), var(--cw-grass));
background-repeat: no-repeat; background-position: top; background-size: 100% 6px;
}
html[data-template="candy"] .footer-nav a { color: var(--cw-ink); font-weight: 800; }
html[data-template="candy"] .footer-nav a:hover { color: var(--cw-straw-d); }
html[data-template="candy"] .copyright { color: var(--cw-ink-faint); }
/* ============================================================================
* candy 动效（三处基本动效 + 按压反馈）
* ----------------------------------------------------------------------------
* 手感取「回弹」（橡皮球，300/8）：候选元素是给小学生用的，弹性比顺滑更有
* 反馈感。所有入场动画用 backwards 而不是 both —— 关键帧末帧已是正常状态，
* 用 both 会让动画的 transform 一直压住 :hover，鼠标移上去反而不动。
* ==========================================================================*/
@keyframes cw-pop {
0% { opacity: 0; transform: translateY(10px) scale(.94); }
60% { opacity: 1; transform: translateY(0) scale(1.015); }
100% { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes cw-title-in {
0% { opacity: 0; transform: translateY(-10px) scale(.96); }
100% { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes cw-panel-next {
from { opacity: 0; transform: translateX(14px); }
to { opacity: 1; transform: translateX(0); }
}
@keyframes cw-panel-prev {
from { opacity: 0; transform: translateX(-14px); }
to { opacity: 1; transform: translateX(0); }
}
/* ① 首屏出场：标题先到，卡片按阅读顺序跟上（间隔 35ms，总长 < 0.4s） */
html[data-template="candy"] .detail-head h1 { animation: cw-title-in .34s cubic-bezier(.34, 1.56, .64, 1) backwards; }
html[data-template="candy"] .detail .card { animation: cw-pop .4s cubic-bezier(.34, 1.56, .64, 1) backwards; }
html[data-template="candy"] .detail > section:nth-of-type(1) { animation-delay: .05s; }
html[data-template="candy"] .detail > section:nth-of-type(2) { animation-delay: .085s; }
html[data-template="candy"] .detail > section:nth-of-type(3) { animation-delay: .12s; }
html[data-template="candy"] .detail > section:nth-of-type(4) { animation-delay: .155s; }
html[data-template="candy"] .detail > section:nth-of-type(5) { animation-delay: .19s; }
html[data-template="candy"] .detail > section:nth-of-type(6) { animation-delay: .225s; }
html[data-template="candy"] .detail > section:nth-of-type(7) { animation-delay: .26s; }
html[data-template="candy"] .detail > section:nth-of-type(n+8) { animation-delay: .3s; }
/* ② 切换的来路：顺接从右来、逆接从左来，方向跟选项位置一致 */
html[data-template="candy"] .detail .tab-panel:not([hidden]) { animation: cw-panel-next .24s ease-out; }
html[data-template="candy"] .detail #tab-prev:not([hidden]) { animation-name: cw-panel-prev; }
/* ③ 换一组接龙：新节点逐个弹入，像糖豆落进罐子（innerHTML 重建后自动重播） */
html[data-template="candy"] .detail .jielong-node { animation: cw-pop .32s cubic-bezier(.34, 1.56, .64, 1) backwards; }
html[data-template="candy"] .detail .jielong-node:nth-of-type(2) { animation-delay: .04s; }
html[data-template="candy"] .detail .jielong-node:nth-of-type(3) { animation-delay: .08s; }
html[data-template="candy"] .detail .jielong-node:nth-of-type(4) { animation-delay: .12s; }
html[data-template="candy"] .detail .jielong-node:nth-of-type(5) { animation-delay: .16s; }
html[data-template="candy"] .detail .jielong-node:nth-of-type(6) { animation-delay: .2s; }
html[data-template="candy"] .detail .jielong-node:nth-of-type(7) { animation-delay: .24s; }
html[data-template="candy"] .detail .jielong-node:nth-of-type(8) { animation-delay: .28s; }
html[data-template="candy"] .detail .jielong-node:nth-of-type(n+9) { animation-delay: .32s; }
html[data-template="candy"] .detail .related-item { animation: cw-pop .36s cubic-bezier(.34, 1.56, .64, 1) backwards; }
html[data-template="candy"] .detail .related-item:nth-of-type(5n+2) { animation-delay: .03s; }
html[data-template="candy"] .detail .related-item:nth-of-type(5n+4) { animation-delay: .06s; }
html[data-template="candy"] .detail .related-item:nth-of-type(5n) { animation-delay: .09s; }
/* ---------- candy 响应式（块尾，必须带 html[data-template] 前缀） ---------- */
@media (max-width: 900px) {
html[data-template="candy"] .header-inner { gap: 10px; }
html[data-template="candy"] .detail-head h1 { font-size: clamp(34px, 8vw, 56px); }
html[data-template="candy"] .detail .card h2 { font-size: 21px; }
}
@media (max-width: 640px) {
html[data-template="candy"] .header-inner { min-height: 58px; }
html[data-template="candy"] .logo { font-size: 19px; padding: 3px 13px; }
/* 基础样式在 ≤640 把整条导航 display:none 掉了，手机上就只剩 logo 和搜索框。
这里把它放回来：跟 logo 同一行、横向可滑，不占第三行高度。 */
html[data-template="candy"] .nav {
display: flex; flex-wrap: nowrap; flex: 1 1 auto; min-width: 0;
gap: 6px; padding: 2px 0; overflow-x: auto;
scrollbar-width: none; -ms-overflow-style: none;
}
html[data-template="candy"] .nav::-webkit-scrollbar { display: none; }
html[data-template="candy"] .nav a { flex: 0 0 auto; padding: 5px 12px; font-size: 13.5px; }
html[data-template="candy"] .detail .card { padding: 20px 18px; border-radius: 20px; }
html[data-template="candy"] .detail .card h2 { font-size: 19px; gap: 9px; }
html[data-template="candy"] .detail .card h2::before { width: 32px; height: 32px; font-size: 15px; }
/* 六个属性胶囊在 390px 上排三行，压到两行以内，别把正文顶下去 */
html[data-template="candy"] .detail .tags { gap: 7px; }
html[data-template="candy"] .tag { padding: 5px 12px; gap: 5px; }
html[data-template="candy"] .tag-label { font-size: 11px; }
html[data-template="candy"] .tag-value { font-size: 13px; }
/* 手机上四张糖果卡竖排：2 列时每格只剩 160px，单字和释义都放不下 */
html[data-template="candy"] .detail .char-decompose { grid-template-columns: 1fr; gap: 14px; }
html[data-template="candy"] .detail .char-glyph { width: 92px; height: 92px; font-size: 54px; border-radius: 26px; }
html[data-template="candy"] .detail .related-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
html[data-template="candy"] .detail .field { grid-template-columns: 58px 1fr; gap: 12px; }
/* 接龙改竖排：横向胶囊在 375px 里一条只能放两个，折行后箭头会指到空白 */
html[data-template="candy"] .detail .jielong-chain { flex-direction: column; align-items: flex-start; row-gap: 0; }
html[data-template="candy"] .detail .jielong-node { margin-left: 0; margin-top: 22px; padding: 7px 14px; }
html[data-template="candy"] .detail .jielong-node:not(:first-of-type)::before {
left: 24px; top: -14px; margin-top: 0;
width: 9px; height: 9px; transform: rotate(135deg);
}
html[data-template="candy"] .hero h1 { font-size: 30px; }
html[data-template="candy"] .hero-search input { height: 42px; font-size: 14px; }
html[data-template="candy"] .hero-search button { height: 42px; padding: 0 18px; font-size: 15px; }
}
/* ============================================================================
* 视觉模板：极简留白拼贴（html[data-template="minimal"]）
* ----------------------------------------------------------------------------
* 北极星：一册展览图录。留白是结构，不是没填满；色块是标点，不是装饰。
*
* 三条硬规则，整块样式都靠它们自洽：
* 1. 颜色只出现在六个固定位置 —— 标题色标、板块编号、字义卡角标、
* 相关卡底条、接龙当前项、页脚标记。其余部分全黑白灰。
* 这是「少量色块」的执行方式：不是把彩色调淡，而是把彩色收进少数锚点。
* 2. 一律方角、1px 描边、零投影。圆角加阴影会立刻把极简变回普通卡片站。
* 3. 标题思源宋体、正文思源黑体、编号 Inter + tabular-nums。
* 三种字各司其职，字号阶梯拉开：108 / 27 / 17 / 13 / 11。
* ==========================================================================*/
html[data-template="minimal"] {
/* ---- 三个强调色：只做色块，不做大面积文字色 ---- */
--mn-cobalt: #1B3BDB; /* 钴蓝 */
--mn-verm: #C22F12; /* 朱红，白底 5.7:1，可承载 13px 小字 */
--mn-yellow: #FFD400; /* 明黄，白底 1.3:1，只做色块，绝不做字色 */
/* ---- 黑白灰纸面 ---- */
--mn-ink: #111111;
--mn-ink-2: #4A4A46;
--mn-ink-3: #63635E; /* 11px 小字，压在 #F4F4F1 上是 5.3:1 */
--mn-paper: #F4F4F1;
--mn-line: #E5E5E0; /* 卡片描边：看得见但不抢戏 */
--mn-line-2: #CFCFC8; /* 结构线：网格、分隔、标签之间的竖线 */
--mn-num: Inter, "SF Pro Display", "Helvetica Neue", "Segoe UI", Arial, sans-serif;
/* ---- 接管基础变量 ---- */
--primary: #C22F12;
--primary-dark: #9E2510;
--primary-soft: #FBEEE9;
--ink: #111111;
--ink-soft: #4A4A46;
--ink-faint: #63635E;
--bg: #F4F4F1;
--card: #FFFFFF;
--border: #E5E5E0;
--gold: #A8451F; /* 首页 13px 拼音等小字，白底 5.9:1 */
--radius: 0px;
--shadow: none;
--font-sans: "Noto Sans SC", "Source Han Sans SC", "PingFang SC",
"Microsoft YaHei", "Segoe UI", sans-serif;
--font-serif: "Source Han Serif SC", "Source Han Serif SC Heavy",
"Noto Serif SC", "Songti SC", "STSong", "SimSun", serif;
}
/* ---------- 顶部：一行文字，一条底线 ---------- */
html[data-template="minimal"] .site-header {
background: var(--mn-paper);
border-bottom: 1px solid var(--mn-line-2);
box-shadow: none;
}
html[data-template="minimal"] .header-inner { gap: 30px; min-height: 74px; }
html[data-template="minimal"] .logo {
font-family: var(--font-serif); font-size: 21px; font-weight: 900;
letter-spacing: .1em; color: var(--mn-ink); background: none;
padding: 0; border-radius: 0;
}
html[data-template="minimal"] .logo:hover { color: var(--mn-ink); }
/* 站名尾巴上一枚明黄小方块：全站唯一的「品牌记号」 */
html[data-template="minimal"] .logo::after {
content: ''; display: inline-block;
width: 7px; height: 7px; margin-left: 7px;
background: var(--mn-yellow); vertical-align: baseline;
transform: translateY(-9px);
}
html[data-template="minimal"] .nav { gap: 28px; flex-wrap: wrap; }
html[data-template="minimal"] .nav a {
position: relative; padding: 4px 0;
background: none; border: 0; border-radius: 0;
color: var(--mn-ink-2); font-size: 14px; font-weight: 500; letter-spacing: .06em;
transition: color .16s;
}
/* 下划线从 0 长到 100%：文字导航唯一允许的动作 */
html[data-template="minimal"] .nav a::after {
content: ''; position: absolute; left: 0; bottom: -1px;
width: 0; height: 2px; background: var(--mn-ink);
transition: width .2s cubic-bezier(.4, 0, .2, 1);
}
html[data-template="minimal"] .nav a:hover { color: var(--mn-ink); }
html[data-template="minimal"] .nav a:hover::after { width: 100%; }
/* 搜索框：没有框，只有一条底线 */
html[data-template="minimal"] .search-box {
align-items: center; gap: 0; padding: 0;
background: none; border: 0; border-bottom: 1px solid var(--mn-ink);
border-radius: 0; box-shadow: none;
}
html[data-template="minimal"] .search-box input {
height: 34px; padding: 0 4px; background: none; border: 0;
border-radius: 0; font-size: 14px; color: var(--mn-ink);
}
html[data-template="minimal"] .search-box input:focus { box-shadow: none; }
html[data-template="minimal"] .search-box button {
height: 34px; padding: 0 0 0 16px; background: none; border: 0;
border-radius: 0; color: var(--mn-ink);
font-size: 13px; font-weight: 700; letter-spacing: .12em;
transition: color .16s;
}
html[data-template="minimal"] .search-box button:hover { background: none; color: var(--mn-verm); }
html[data-template="minimal"] .suggest {
top: 40px; background: #fff; border: 1px solid var(--mn-ink);
border-radius: 0; box-shadow: 6px 6px 0 rgba(17, 17, 17, .08);
}
html[data-template="minimal"] .suggest a { border-bottom: 1px solid var(--mn-line); }
html[data-template="minimal"] .suggest a:hover,
html[data-template="minimal"] .suggest a.active { background: var(--mn-paper); }
/* ---------- 面包屑 ---------- */
html[data-template="minimal"] .breadcrumb {
padding: 30px 0 0; font-size: 12px; letter-spacing: .04em; color: var(--mn-ink-3);
}
html[data-template="minimal"] .breadcrumb a { color: var(--mn-ink-3); transition: color .16s; }
html[data-template="minimal"] .breadcrumb a:hover { color: var(--mn-verm); }
html[data-template="minimal"] .breadcrumb li + li::before {
content: '/'; color: var(--mn-line-2); margin: 0 9px;
}
/* ---------- 标题区：靠字号和一条色标立住 ---------- */
/* 对开版面：左边超大标题，右边田字格图版。这一栏是整页最像「图录」的地方，
也是唯一一处标题不孤零零地看着右边一片空白。 */
html[data-template="minimal"] .detail {
display: grid; grid-template-columns: minmax(0, 1fr) 380px;
column-gap: 56px; align-items: start;
}
html[data-template="minimal"] .detail > .detail-head {
position: relative; grid-column: 1; grid-row: 1;
text-align: left; padding: 30px 0 12px;
}
html[data-template="minimal"] .detail > .grid-figure {
grid-column: 2; grid-row: 1; justify-content: flex-end;
align-self: start; margin: 0; padding: 36px 0 12px;
}
/* 所有板块必须横跨两栏，否则会被排进右侧 380px 的图版栏里 */
html[data-template="minimal"] .detail > section { grid-column: 1 / -1; }
/* 开篇标记：标题上方一小段朱红横线，替代「大标题配一个大色块」的常见做法 */
html[data-template="minimal"] .detail-head::before {
content: ''; display: block; width: 44px; height: 3px;
margin-bottom: 26px; background: var(--mn-verm);
}
html[data-template="minimal"] .detail-head h1 {
position: relative; display: inline-block; z-index: 0;
margin: 0 0 14px; padding: 0 .06em .3em 0;
font-family: var(--font-serif); font-size: clamp(52px, 7.4vw, 104px);
font-weight: 900; line-height: 1.04; letter-spacing: -.01em;
color: var(--mn-ink);
overflow-wrap: anywhere;
}
/* 钴蓝色块压在标题左下角、首字的下沿。
曾经贴 right: 0，长标题（「捉奸见双，抓贼见赃」）换行后色块会飘到第二行
右边的空处，跟字脱开；锚死左边就不会。 */
html[data-template="minimal"] .detail-head h1::after {
content: ''; position: absolute; left: 0; bottom: .05em;
width: 1.35em; height: .13em; background: var(--mn-cobalt);
}
html[data-template="minimal"] .detail-head .head-sub { gap: 0; justify-content: flex-start; }
html[data-template="minimal"] .detail-head .head-sub::before,
html[data-template="minimal"] .detail-head .head-sub::after { display: none; }
html[data-template="minimal"] .detail-head .pinyin {
display: inline-block; padding-right: 12px;
background: none; font-family: var(--mn-num);
font-size: 12px; font-weight: 500; letter-spacing: .32em;
text-transform: uppercase; color: var(--mn-ink-3);
}
/* 属性标签：小号文字 + 竖线分隔，不是徽章。
标签名压到 10.5px 并抬起半个字，值 15px —— 让「组合 / abac式」只能读成一对。 */
html[data-template="minimal"] .detail > .tags {
grid-column: 1 / -1; grid-row: 2;
justify-content: flex-start; gap: 0;
margin: 0 0 26px; padding: 20px 0 0;
border: 0; border-top: 1px solid var(--mn-line-2);
background: none;
}
html[data-template="minimal"] .tag {
display: inline-flex; align-items: baseline; gap: 8px;
padding: 0 16px; background: none; border: 0; border-radius: 0;
border-right: 1px solid var(--mn-line-2);
}
html[data-template="minimal"] .tag:first-child { padding-left: 0; }
html[data-template="minimal"] .tag:last-child { border-right: 0; }
html[data-template="minimal"] .tag-label {
position: relative; top: -.08em;
font-size: 10.5px; font-weight: 500; letter-spacing: .18em;
color: var(--mn-ink-3);
}
html[data-template="minimal"] .tag-value {
font-size: 15px; font-weight: 600; color: var(--mn-ink);
}
/* 田字格：当作一张图版，靠 1px 描边站在纸上 */
html[data-template="minimal"] .grid-img {
border: 1px solid var(--mn-line); border-radius: 0;
background: #fff; padding: 6px;
}
/* ---------- 板块容器：白纸、1px 边、无圆角无影 ---------- */
html[data-template="minimal"] .detail { counter-reset: mn-sec; }
html[data-template="minimal"] .detail > section.card,
html[data-template="minimal"] .detail .card {
position: relative;
background: var(--mn-card); border: 1px solid var(--mn-line);
border-radius: 0; box-shadow: none;
padding: 44px 48px 48px; margin-bottom: 28px;
}
html[data-template="minimal"] .detail .card.highlight {
background: var(--mn-card); border-color: var(--mn-line);
}
/* 板块标题：编号 + 小方块 + 大号黑体，取消旧的下划线 */
html[data-template="minimal"] .detail > section { counter-increment: mn-sec; }
html[data-template="minimal"] .detail .card h2 {
display: flex; align-items: center; gap: 11px;
margin: 0 0 26px; padding: 0; border: 0;
font-family: var(--font-sans); font-size: 26px; font-weight: 800;
line-height: 1.3; letter-spacing: -.01em; color: var(--mn-ink);
}
html[data-template="minimal"] .detail .card h2::after {
content: counter(mn-sec, decimal-leading-zero);
order: -1; display: inline-block; position: static;
width: auto; height: auto; border: 0; border-radius: 0;
background: none; font-family: var(--mn-num);
font-size: 11px; font-weight: 600; letter-spacing: .1em;
color: var(--mn-ink-3); font-variant-numeric: tabular-nums;
}
html[data-template="minimal"] .detail .card h2::before {
content: ''; flex: 0 0 auto; width: 13px; height: 13px;
background: var(--mn-cobalt); border-radius: 0;
}
html[data-template="minimal"] .detail > section:nth-of-type(3n+2) h2::before { background: var(--mn-verm); }
html[data-template="minimal"] .detail > section:nth-of-type(3n) h2::before { background: var(--mn-yellow); }
/* ---------- 释义：首字下沉，朱红 ---------- */
html[data-template="minimal"] .detail .explanation {
margin: 0; padding: 0; max-width: 33em;
background: none; border: 0; border-radius: 0; box-shadow: none;
font-size: 19px; line-height: 2.0; letter-spacing: .01em;
color: var(--mn-ink);
}
/* 首字下沉是这页唯一的「朱红文字」，等于把重点词标在了段落入口 */
html[data-template="minimal"] .detail .explanation::first-letter {
float: left; padding: .1em .18em 0 0;
font-family: var(--font-serif); font-size: 3.1em; line-height: .86;
font-weight: 900; color: var(--mn-verm);
}
/* ---------- 字段列表：横向分隔线代替虚线 ---------- */
html[data-template="minimal"] .detail .fields { gap: 0; }
html[data-template="minimal"] .detail .field {
grid-template-columns: 88px 1fr; gap: 0 26px;
padding: 18px 0; border-top: 1px solid var(--mn-line);
}
html[data-template="minimal"] .detail .field:first-child { border-top: 0; padding-top: 0; }
html[data-template="minimal"] .detail .field dt {
padding-top: 4px; font-size: 11px; font-weight: 600;
letter-spacing: .16em; color: var(--mn-ink-3);
}
html[data-template="minimal"] .detail .field dd {
max-width: 42em; font-size: 16px; line-height: 1.9; color: var(--mn-ink);
}
/* 引文：不画线不垫色，整段凹进 1.4em。极简的「分区」靠位移，不靠框 */
html[data-template="minimal"] .detail .field dd.quote {
max-width: 34em; margin: 0; padding: 0 0 0 1.4em;
background: none; border: 0; border-radius: 0;
font-size: 15px; line-height: 1.95; color: var(--mn-ink-2);
}
/* ---------- 造句：编号用 Inter 站左栏 ---------- */
html[data-template="minimal"] .detail .zju-list { list-style: none; counter-reset: mn-zju; }
html[data-template="minimal"] .detail .zju-list li {
counter-increment: mn-zju; position: relative;
max-width: 32em; padding: 0 0 0 42px; margin-bottom: 14px;
font-size: 16px; line-height: 1.9; color: var(--mn-ink);
}
html[data-template="minimal"] .detail .zju-list li:last-child { margin-bottom: 0; }
html[data-template="minimal"] .detail .zju-list li::before {
content: counter(mn-zju, decimal-leading-zero);
position: absolute; left: 0; top: .28em;
font-family: var(--mn-num); font-size: 12px; font-weight: 600;
letter-spacing: .06em; color: var(--mn-cobalt);
font-variant-numeric: tabular-nums;
}
html[data-template="minimal"] .detail .story {
max-width: 34em; font-size: 16.5px; line-height: 2.05; color: var(--mn-ink);
}
/* ---------- 近反义词 ---------- */
html[data-template="minimal"] .detail .syn-ant { margin-bottom: 18px; }
html[data-template="minimal"] .detail .syn-ant:last-child { margin-bottom: 0; }
html[data-template="minimal"] .detail .syn-ant > strong {
width: 76px; font-size: 11px; font-weight: 600;
letter-spacing: .16em; color: var(--mn-ink-3);
vertical-align: middle;
}
html[data-template="minimal"] .detail .chip,
html[data-template="minimal"] .chip {
padding: 5px 13px; background: #fff; color: var(--mn-ink);
border: 1px solid var(--mn-line-2); border-radius: 0;
font-size: 14px; font-weight: 500;
transition: background .16s, color .16s, border-color .16s;
}
html[data-template="minimal"] a.chip:hover,
html[data-template="minimal"] .detail a.chip:hover {
background: var(--mn-ink); color: #fff; border-color: var(--mn-ink);
}
html[data-template="minimal"] .chip.plain { color: var(--mn-ink-3); background: none; }
/* ---------- 趣味延伸 ---------- */
html[data-template="minimal"] .detail .highlight p { font-size: 15.5px; line-height: 1.9; color: var(--mn-ink-2); }
html[data-template="minimal"] .detail .gold {
margin-right: 10px; padding: 2px 0 2px 0;
color: var(--mn-verm); font-size: 11px; font-weight: 700;
letter-spacing: .16em; vertical-align: 2px;
background: none;
}
html[data-template="minimal"] .detail .xhy-list li { font-size: 15.5px; line-height: 1.9; color: var(--mn-ink-2); }
/* ---------- 字义分解：字在左、义在右，左上角一枚色块当序号 ---------- */
html[data-template="minimal"] .detail .char-decompose {
grid-template-columns: repeat(2, 1fr); gap: 18px;
/* 不拉平：两张卡内容长度差一倍，stretch 会把短的那张拽出一条空白边框 */
align-items: start;
}
html[data-template="minimal"] .detail .char-item {
position: relative; display: grid; grid-template-columns: 96px minmax(0, 1fr);
column-gap: 20px; row-gap: 0; align-items: start;
padding: 30px 26px 26px; background: #fff;
border: 1px solid var(--mn-line); border-radius: 0;
}
/* 四个角标四色轮转，等于告诉读者「这是第几个字」 */
html[data-template="minimal"] .detail .char-item::before {
content: ''; position: absolute; left: -1px; top: -1px;
width: 22px; height: 22px; background: var(--mn-cobalt);
}
html[data-template="minimal"] .detail .char-item:nth-child(4n+2)::before { background: var(--mn-verm); }
html[data-template="minimal"] .detail .char-item:nth-child(4n+3)::before { background: var(--mn-yellow); }
html[data-template="minimal"] .detail .char-item:nth-child(4n)::before { background: var(--mn-ink); }
html[data-template="minimal"] .detail .char-glyph {
width: auto; height: auto; align-self: start;
display: block; padding: 10px 0 0;
font-family: var(--font-serif); font-size: 84px; font-weight: 900;
line-height: 1; text-align: left; letter-spacing: -.02em; color: var(--mn-ink);
background: none; border: 0; border-radius: 0;
}
html[data-template="minimal"] .detail .char-meta { padding-top: 6px; min-width: 0; }
html[data-template="minimal"] .detail .char-pron {
margin-bottom: 9px; font-family: var(--mn-num);
font-size: 11.5px; letter-spacing: .1em; color: var(--mn-ink-3);
}
html[data-template="minimal"] .detail .char-extra { gap: 4px; margin-bottom: 8px; }
html[data-template="minimal"] .detail .char-extra-item {
padding: 0; background: none; border: 0; border-radius: 0;
font-size: 11px; letter-spacing: .06em; color: var(--mn-ink-3);
}
html[data-template="minimal"] .detail .char-extra-sep { color: var(--mn-line-2); }
html[data-template="minimal"] .detail .char-shape { margin-bottom: 0; font-size: 13px; line-height: 1.7; color: var(--mn-ink-3); }
html[data-template="minimal"] .detail .char-senses {
gap: 9px; margin-top: 12px; padding-top: 13px;
border-top: 1px solid var(--mn-line);
}
html[data-template="minimal"] .detail .sn-num {
font-family: var(--mn-num); font-size: 11px; font-weight: 600;
line-height: 1.95; color: var(--mn-ink-3);
}
html[data-template="minimal"] .detail .sn-title { font-size: 15px; font-weight: 700; color: var(--mn-ink); }
html[data-template="minimal"] .detail .sn-text {
margin-top: 3px; font-size: 14px; line-height: 1.9; color: var(--mn-ink-2);
}
html[data-template="minimal"] .detail .expand-sense {
align-self: flex-start; margin-top: 14px;
padding: 0 0 3px; background: none; border: 0;
border-bottom: 1px solid var(--mn-ink); border-radius: 0;
color: var(--mn-ink); font-size: 12px; letter-spacing: .06em;
transition: color .16s, border-color .16s;
}
html[data-template="minimal"] .detail .expand-sense:hover {
background: none; color: var(--mn-verm); border-bottom-color: var(--mn-verm);
}
/* ---------- 接龙：一条极简列表，细黑箭头串起来 ---------- */
html[data-template="minimal"] .detail .tabs {
gap: 26px; margin-bottom: 26px; border-bottom: 1px solid var(--mn-line);
}
html[data-template="minimal"] .detail .tab {
padding: 0 0 12px; margin-bottom: -1px;
background: none; border: 0; border-bottom: 2px solid transparent;
border-radius: 0; color: var(--mn-ink-3);
font-size: 14px; font-weight: 500; letter-spacing: .04em;
transition: color .16s;
}
html[data-template="minimal"] .detail .tab:hover { color: var(--mn-ink); }
html[data-template="minimal"] .detail .tab.active {
color: var(--mn-ink); font-weight: 700; border-bottom-color: var(--mn-ink);
}
html[data-template="minimal"] .detail .jielong-chain {
gap: 0; row-gap: 12px; align-items: flex-start; margin-bottom: 20px;
}
html[data-template="minimal"] .detail .jielong-node {
position: relative; display: flex; flex-direction: column; align-items: flex-start;
gap: 3px; min-width: 0; margin-left: 20px; padding: 5px 2px 5px 28px;
background: none; border: 0; border-radius: 0; box-shadow: none;
color: var(--mn-ink); line-height: 1.4; transition: color .16s;
}
html[data-template="minimal"] .detail .jielong-node:first-of-type { margin-left: 0; padding-left: 0; }
html[data-template="minimal"] .detail .jielong-node .jw {
font-family: var(--font-serif); font-size: 17px; font-weight: 700; letter-spacing: .02em;
}
html[data-template="minimal"] .detail .jielong-node .jp {
font-family: var(--mn-num); font-size: 10.5px; font-weight: 400;
letter-spacing: .04em; color: var(--mn-ink-3);
}
html[data-template="minimal"] .detail .jielong-node:hover {
background: none; border: 0; box-shadow: none; transform: none; color: var(--mn-verm);
}
html[data-template="minimal"] .detail .jielong-node.current { background: none; border: 0; color: var(--mn-verm); }
/* 当前成语压一道明黄粗下划线：不盖字形，是唯一一处「你在这里」 */
html[data-template="minimal"] .detail .jielong-node.current .jw {
text-decoration: underline;
text-decoration-color: var(--mn-yellow);
text-decoration-thickness: 4px;
text-underline-offset: 4px;
}
html[data-template="minimal"] .detail .jielong-arrow { display: none; }
/* 箭头对准成语那一行的中线（padding 5px + 半行 12px），不是整个节点的中线 */
html[data-template="minimal"] .detail .jielong-node:not(:first-of-type)::before {
content: ''; position: absolute; left: 0; top: 17px;
width: 13px; height: 1px; background: var(--mn-ink-2);
}
html[data-template="minimal"] .detail .jielong-node:not(:first-of-type)::after {
content: ''; position: absolute; left: 13px; top: 14px;
border-left: 6px solid var(--mn-ink-2);
border-top: 4px solid transparent; border-bottom: 4px solid transparent;
}
/* 折行后行首那颗的箭头会指向左边空白，由 app.js 打标记藏掉 */
html[data-template="minimal"] .detail .jielong-node.is-jl-wrap::before,
html[data-template="minimal"] .detail .jielong-node.is-jl-wrap::after { display: none; }
html[data-template="minimal"] .detail .btn-regen {
margin-top: 4px; padding: 9px 20px;
background: none; border: 1px solid var(--mn-ink); border-radius: 0;
color: var(--mn-ink); font-size: 13px; font-weight: 600; letter-spacing: .08em;
transition: background .16s, color .16s;
}
html[data-template="minimal"] .detail .btn-regen:hover { background: var(--mn-ink); color: #fff; }
html[data-template="minimal"] .detail .btn-regen:disabled { opacity: .5; }
/* ---------- 相关成语：网格卡 + 底边窄色块 ---------- */
html[data-template="minimal"] .detail .related-grid { grid-template-columns: repeat(4, 1fr); gap: 14px; }
html[data-template="minimal"] .detail .related-item {
position: relative; display: flex; flex-direction: column; gap: 4px;
padding: 18px 17px 21px; background: #fff;
border: 1px solid var(--mn-line); border-radius: 0;
transition: border-color .18s;
}
html[data-template="minimal"] .detail .related-item:hover {
background: #fff; border-color: var(--mn-ink); box-shadow: none; transform: none;
}
/* 底条只给 5 分之 3 的卡片。没分到的卡片干脆不画 —— 一排灰条会把「克制」变成「没做完」。
周期 5 与 4 列互质，颜色才会横向游走而不是排成竖带。 */
html[data-template="minimal"] .detail .related-item::after {
content: ''; position: absolute; left: 17px; bottom: 11px;
width: 22px; height: 3px; display: none;
transition: width .22s cubic-bezier(.4, 0, .2, 1), background .18s;
}
html[data-template="minimal"] .detail .related-item:nth-child(5n+1)::after { display: block; background: var(--mn-cobalt); }
html[data-template="minimal"] .detail .related-item:nth-child(5n+3)::after { display: block; background: var(--mn-verm); }
html[data-template="minimal"] .detail .related-item:nth-child(5n)::after { display: block; background: var(--mn-yellow); }
html[data-template="minimal"] .detail .related-item:hover::after { width: 44px; }
html[data-template="minimal"] .detail .related-item .rw {
font-family: var(--font-serif); font-size: 17px; font-weight: 700;
letter-spacing: .02em; color: var(--mn-ink);
}
html[data-template="minimal"] .detail .related-item .rp,
html[data-template="minimal"] .detail .related-item small {
font-family: var(--mn-num); font-size: 11px; letter-spacing: .04em;
color: var(--mn-ink-3);
}
/* ---------- 列表页（拼音索引 / 标签 / 搜索）：条目当图录条目排 ---------- */
/* 导语撑满整页时一行 71 字，读不到底；收到 46em */
html[data-template="minimal"] .list-desc { max-width: 46em; }
html[data-template="minimal"] .list-desc a { color: var(--mn-verm); text-decoration: underline; text-underline-offset: 2px; }
html[data-template="minimal"] .result-list { border: 1px solid var(--mn-line); box-shadow: none; border-radius: 0; }
html[data-template="minimal"] .result-item { padding: 17px 22px; gap: 5px 12px; }
/* 每一条都是朱红的话，「朱红 = 重点」就不成立了；链接身份交给宋体与字重 */
html[data-template="minimal"] .result-item .rw {
font-family: var(--font-serif); font-size: 18px; font-weight: 700;
letter-spacing: .02em; color: var(--mn-ink);
}
html[data-template="minimal"] .result-item .rp {
font-family: var(--mn-num); font-size: 12px; letter-spacing: .06em; color: var(--mn-ink-3);
}
html[data-template="minimal"] .result-item .re {
flex: 1 1 100%; font-size: 13.5px; line-height: 1.75; color: var(--mn-ink-2);
}
html[data-template="minimal"] .result-item:hover { background: var(--mn-paper); }
html[data-template="minimal"] .result-item:hover .rw { color: var(--mn-verm); }
/* 所属标签：一组方框，指到就整块反黑 */
html[data-template="minimal"] .detail .tags-of-idiom .chip {
padding: 6px 14px; font-size: 13.5px;
}
/* ---------- 页脚 ---------- */
html[data-template="minimal"] .site-footer {
margin-top: 56px; padding: 34px 0 46px;
background: none; border-top: 1px solid var(--mn-line-2);
color: var(--mn-ink-3); font-size: 12.5px; letter-spacing: .02em;
}
/* 基础页脚是深底浅字，这三处必须逐个改回深字，否则在灰白底上几乎看不见 */
html[data-template="minimal"] .copyright { color: var(--mn-ink-3); font-size: 12.5px; }
html[data-template="minimal"] .footer-inner {
align-items: flex-start; padding: 0 16px; text-align: left; gap: 10px;
}
html[data-template="minimal"] .footer-nav { justify-content: flex-start; gap: 18px; }
html[data-template="minimal"] .footer-nav a { color: var(--mn-ink-2); font-size: 13px; }
html[data-template="minimal"] .footer-nav a:hover { color: var(--mn-verm); }
html[data-template="minimal"] .site-footer .container { position: relative; }
html[data-template="minimal"] .site-footer .container::before {
content: ''; display: block; width: 34px; height: 3px;
margin-bottom: 18px; background: var(--mn-yellow);
}
/* ---------- 首页：同一套语法，更大的留白 ----------
hero 做对开两栏：左边标题 + 搜索，右边一条窄边注（收录量 / 查询方式）。
只靠缩小标题来「填满」会让大标题失重；右栏有字，右下的空白才读得成留白。 */
html[data-template="minimal"] .hero {
display: grid;
grid-template-columns: minmax(0, 1fr) 216px;
column-gap: 56px;
text-align: left; padding: 64px 0 44px;
}
html[data-template="minimal"] .hero h1 {
position: relative; grid-column: 1; grid-row: 1;
justify-self: start; align-self: start;
margin: 0 0 10px;
font-family: var(--font-serif); font-size: clamp(44px, 6vw, 84px);
font-weight: 900; line-height: 1.08; letter-spacing: -.01em; color: var(--mn-ink);
}
html[data-template="minimal"] .hero h1::after {
content: ''; position: absolute; left: 0; bottom: -.2em;
width: 100%; height: 4px; background: var(--mn-cobalt);
}
/* 边注：跨标题与搜索两行，靠 1px 竖线立在右栏；末端一小段朱红标出「注记到此为止」 */
html[data-template="minimal"] .hero-sub {
grid-column: 2; grid-row: 1 / span 2;
align-self: stretch; position: relative;
margin: 0; padding: 8px 0 0 20px;
border-left: 1px solid var(--mn-line-2);
font-size: 12px; line-height: 2.1; color: var(--mn-ink-3);
/* 中文默认任意字间可断，"拼音" 会被拆成 "拼｜音"。keep-all 只在空格与
斜杠处断行，断点落在「·」和「/」上，读起来仍是一组词。 */
word-break: keep-all; overflow-wrap: anywhere;
text-wrap: pretty;
}
html[data-template="minimal"] .hero-sub::after {
content: ''; position: absolute; left: -1px; bottom: 2px;
width: 1px; height: 30px; background: var(--mn-verm);
}
html[data-template="minimal"] .hero-sub strong {
font-family: var(--mn-num); font-weight: 700; color: var(--mn-verm);
font-variant-numeric: tabular-nums;
}
/* 底线画在输入框上、按钮 align-self 到底，两者底边才咬得住。
线画在容器上时按钮会浮在线条上方（flex stretch 与固定高度打架）。 */
html[data-template="minimal"] .hero-search {
grid-column: 1; grid-row: 2; justify-self: start; align-self: end;
width: 100%; max-width: 520px; margin: 26px 0 0; gap: 0; align-items: flex-end;
border-bottom: 0;
}
html[data-template="minimal"] .hero-search input {
flex: 1; height: 50px; padding: 0 4px; min-width: 0;
background: none; border: 0; border-bottom: 2px solid var(--mn-ink);
border-radius: 0; font-size: 16px; color: var(--mn-ink);
}
html[data-template="minimal"] .hero-search input:focus { box-shadow: none; }
html[data-template="minimal"] .hero-search button {
height: 50px; padding: 0 24px; background: var(--mn-ink); border: 0;
border-radius: 0; color: #fff;
font-size: 14px; font-weight: 600; letter-spacing: .12em;
transition: background .16s;
}
html[data-template="minimal"] .hero-search button:hover { background: var(--mn-verm); }
/* 首页所有白卡与详情页同一语法 */
html[data-template="minimal"] .card {
background: var(--mn-card); border: 1px solid var(--mn-line);
border-radius: 0; box-shadow: none; padding: 32px 36px; margin-bottom: 20px;
}
html[data-template="minimal"] .card h2 {
padding-bottom: 0; margin-bottom: 22px;
font-size: 22px; font-weight: 800; letter-spacing: -.01em;
}
html[data-template="minimal"] .card h2::after { display: none; }
html[data-template="minimal"] .muted { font-size: 14.5px; line-height: 1.9; color: var(--mn-ink-2); max-width: 40em; }
html[data-template="minimal"] .muted a { color: var(--mn-verm); }
/* 26 个字母格：方框，只有 hover 才反黑，绝不上色 */
/* 26 个字母排成正好两行，比 11+11+4 的残行整齐 */
html[data-template="minimal"] .letters { grid-template-columns: repeat(13, 1fr); gap: 10px; }
html[data-template="minimal"] .letter {
padding: 12px 4px; background: #fff;
border: 1px solid var(--mn-line); border-radius: 0;
color: var(--mn-ink); font-family: var(--mn-num);
font-size: 17px; font-weight: 600; letter-spacing: .04em;
transition: background .16s, color .16s, border-color .16s;
}
html[data-template="minimal"] .letter small {
color: var(--mn-ink-3); font-size: 10.5px; font-weight: 400; letter-spacing: 0;
}
html[data-template="minimal"] .letter:hover {
background: var(--mn-ink); border-color: var(--mn-ink); color: #fff;
}
html[data-template="minimal"] .letter:hover small { color: rgba(255, 255, 255, .72); }
html[data-template="minimal"] .letter.empty { color: var(--mn-line-2); }
html[data-template="minimal"] .letter.empty:hover { background: #fff; border-color: var(--mn-line); color: var(--mn-line-2); }
/* 热门成语卡：底边窄色块，周期 5 与 4 列互质 */
html[data-template="minimal"] .hot-item {
position: relative; gap: 5px; padding: 16px 16px 24px;
background: #fff; border: 1px solid var(--mn-line); border-radius: 0;
transition: border-color .18s;
}
html[data-template="minimal"] .hot-item:hover {
background: #fff; border-color: var(--mn-ink); box-shadow: none; transform: none;
}
html[data-template="minimal"] .hot-item::after {
content: ''; position: absolute; left: 16px; bottom: 10px;
width: 22px; height: 3px; display: none;
transition: width .22s cubic-bezier(.4, 0, .2, 1), background .18s;
}
html[data-template="minimal"] .hot-item:nth-child(5n+1)::after { display: block; background: var(--mn-cobalt); }
html[data-template="minimal"] .hot-item:nth-child(5n+3)::after { display: block; background: var(--mn-verm); }
html[data-template="minimal"] .hot-item:nth-child(5n)::after { display: block; background: var(--mn-yellow); }
html[data-template="minimal"] .hot-item:hover::after { width: 44px; }
html[data-template="minimal"] .hot-word {
font-family: var(--font-serif); font-size: 18px; font-weight: 700;
letter-spacing: .02em; color: var(--mn-ink);
}
html[data-template="minimal"] .hot-pinyin {
margin-top: 1px; font-family: var(--mn-num);
font-size: 11px; letter-spacing: .06em; color: var(--mn-ink-3);
}
html[data-template="minimal"] .hot-expl {
margin-top: 5px; font-size: 13px; line-height: 1.75; color: var(--mn-ink-2);
}
/* 「换几种查法」：竖线分隔的文字组，不用方框 ——
四个宽窄不一的方框摆在这块版面上像一张没对齐的表格，而这个模板里
所有并列项（属性、标签）本来就是「小字 + 竖线」，这里沿用同一语法。 */
html[data-template="minimal"] .chips:has(.chip-py) { gap: 0; row-gap: 16px; margin-top: 24px; }
html[data-template="minimal"] .chips { gap: 10px; }
html[data-template="minimal"] .chip-py {
display: inline-flex; flex-direction: column; align-items: flex-start; gap: 3px;
padding: 1px 22px; text-align: left;
background: none; border: 0; border-left: 1px solid var(--mn-line-2);
border-radius: 0;
}
html[data-template="minimal"] .chip-py:first-child { padding-left: 0; border-left: 0; }
html[data-template="minimal"] .chip-py .cp-word { font-size: 15px; font-weight: 600; color: var(--mn-ink); }
html[data-template="minimal"] .chip-py .cp-py { font-size: 11.5px; color: var(--mn-ink-3); letter-spacing: .02em; }
/* 悬停不整块反色：只给标题压一道明黄，跟「你在这里」同一套记号 */
html[data-template="minimal"] a.chip-py:hover { background: none; color: var(--mn-ink); }
html[data-template="minimal"] a.chip-py:hover .cp-word { box-shadow: inset 0 -.55em 0 var(--mn-yellow); }
html[data-template="minimal"] .chip small {
margin-left: 6px; color: var(--mn-ink-3);
font-family: var(--mn-num); font-size: 11px;
}
/* ---------- 动效：只做「入场轻推」一种 ---------- */
@keyframes mn-rise {
from { opacity: 0; transform: translateY(9px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes mn-ink {
from { opacity: 0; }
to { opacity: 1; }
}
html[data-template="minimal"] .detail-head h1,
html[data-template="minimal"] .hero h1 {
animation: mn-rise .5s cubic-bezier(.22, .8, .24, 1) backwards;
}
html[data-template="minimal"] .detail > section {
animation: mn-rise .46s cubic-bezier(.22, .8, .24, 1) backwards;
}
html[data-template="minimal"] .detail > section:nth-of-type(1) { animation-delay: .05s; }
html[data-template="minimal"] .detail > section:nth-of-type(2) { animation-delay: .09s; }
html[data-template="minimal"] .detail > section:nth-of-type(3) { animation-delay: .13s; }
html[data-template="minimal"] .detail > section:nth-of-type(4) { animation-delay: .17s; }
html[data-template="minimal"] .detail > section:nth-of-type(5) { animation-delay: .2s; }
html[data-template="minimal"] .detail > section:nth-of-type(6) { animation-delay: .23s; }
html[data-template="minimal"] .detail > section:nth-of-type(7) { animation-delay: .26s; }
html[data-template="minimal"] .detail > section:nth-of-type(n+8) { animation-delay: .29s; }
html[data-template="minimal"] .detail .tab-panel:not([hidden]) { animation: mn-ink .2s ease-out; }
/* ---------- 响应式 ---------- */
@media (max-width: 1024px) {
html[data-template="minimal"] .detail .related-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 860px) {
/* 对开版面在 860 以下撑不开：380px 的图版栏会把标题挤成一列两个字 */
html[data-template="minimal"] .detail { display: block; }
html[data-template="minimal"] .detail > .grid-figure {
justify-content: flex-start; padding: 0 0 26px;
}
html[data-template="minimal"] .detail .char-decompose { grid-template-columns: 1fr; }
html[data-template="minimal"] .detail .related-grid { grid-template-columns: repeat(2, 1fr); }
html[data-template="minimal"] .detail > section.card,
html[data-template="minimal"] .detail .card { padding: 30px 26px 32px; }
}
@media (max-width: 640px) {
html[data-template="minimal"] .header-inner { min-height: 60px; gap: 16px; }
html[data-template="minimal"] .logo { font-size: 18px; letter-spacing: .06em; }
html[data-template="minimal"] .logo::after { width: 5px; height: 5px; margin-left: 5px; transform: translateY(-7px); }
/* 基础样式在手机上把导航整条藏了；极简模板只需要三个字，横滑也放得下 */
html[data-template="minimal"] .nav {
display: flex; gap: 16px; flex-wrap: nowrap;
overflow-x: auto; scrollbar-width: none;
}
html[data-template="minimal"] .nav::-webkit-scrollbar { display: none; }
html[data-template="minimal"] .nav a { flex: 0 0 auto; font-size: 13px; letter-spacing: .02em; }
html[data-template="minimal"] .search-box { border-bottom-width: 1px; }
html[data-template="minimal"] .search-box input { height: 30px; font-size: 13px; }
html[data-template="minimal"] .search-box button { height: 30px; padding-left: 10px; font-size: 12px; }
html[data-template="minimal"] .breadcrumb { padding-top: 22px; }
html[data-template="minimal"] .detail-head { padding: 22px 0 26px; margin-bottom: 22px; }
html[data-template="minimal"] .detail-head::before { margin-bottom: 20px; width: 34px; height: 2px; }
html[data-template="minimal"] .detail-head h1 { font-size: clamp(36px, 12vw, 52px); margin-bottom: 12px; }
html[data-template="minimal"] .detail-head .pinyin { font-size: 11px; letter-spacing: .24em; }
/* 属性标签改两列：六个属性竖排会吃掉 145px，两列只要 90px */
html[data-template="minimal"] .detail > .tags {
display: grid; grid-template-columns: repeat(2, 1fr);
gap: 9px 12px; margin-top: 0; padding-top: 18px;
}
html[data-template="minimal"] .tag { padding: 0; border-right: 0; gap: 7px; }
html[data-template="minimal"] .tag-label { min-width: 4.4em; }
html[data-template="minimal"] .detail > section.card,
html[data-template="minimal"] .detail .card { padding: 24px 18px 26px; margin-bottom: 16px; }
html[data-template="minimal"] .detail .card h2 { font-size: 21px; gap: 9px; margin-bottom: 20px; }
html[data-template="minimal"] .detail .explanation { font-size: 17px; line-height: 1.95; }
/* 小屏上首字下沉会占掉两行半，改成首字加粗标红，不下沉 */
html[data-template="minimal"] .detail .explanation::first-letter {
float: none; padding: 0 .22em 0 0; font-size: 1.05em; color: var(--mn-verm);
font-weight: 900;
}
html[data-template="minimal"] .detail .field { grid-template-columns: 1fr; gap: 5px; padding: 14px 0; }
html[data-template="minimal"] .detail .field dt { padding-top: 0; }
html[data-template="minimal"] .detail .field dd { font-size: 15px; }
html[data-template="minimal"] .detail .field dd.quote { padding-left: 15px; font-size: 14.5px; }
html[data-template="minimal"] .detail .zju-list li { padding-left: 34px; font-size: 15px; }
html[data-template="minimal"] .detail .story { font-size: 15.5px; }
html[data-template="minimal"] .detail .syn-ant > strong { display: block; width: auto; margin-bottom: 8px; }
/* 字义卡改单列：字在上、义在下，两栏在 390px 里会把释义压成每行 8 个字 */
html[data-template="minimal"] .detail .char-item {
grid-template-columns: 1fr; column-gap: 0;
padding: 30px 20px 24px;
}
html[data-template="minimal"] .detail .char-glyph { font-size: 76px; padding-bottom: 10px; }
html[data-template="minimal"] .detail .char-item::before { width: 18px; height: 18px; }
html[data-template="minimal"] .detail .sn-text { font-size: 14px; }
/* 接龙竖排：横向一条只放得下两个，折行后箭头会指到空白 */
html[data-template="minimal"] .detail .jielong-chain {
flex-direction: column; align-items: flex-start; row-gap: 0;
}
html[data-template="minimal"] .detail .jielong-node {
margin-left: 0; margin-top: 34px; padding-left: 0;
}
html[data-template="minimal"] .detail .jielong-node:first-of-type { margin-top: 0; }
html[data-template="minimal"] .detail .jielong-node:not(:first-of-type)::before {
left: 4px; top: -21px; width: 1px; height: 15px;
}
html[data-template="minimal"] .detail .jielong-node:not(:first-of-type)::after {
left: 0; top: -9px; border: 0;
border-top: 7px solid var(--mn-ink-2);
border-left: 4.5px solid transparent; border-right: 4.5px solid transparent;
}
html[data-template="minimal"] .detail .related-grid { gap: 10px; }
html[data-template="minimal"] .detail .related-item { padding: 14px 14px 22px; }
html[data-template="minimal"] .detail .related-item::after { left: 14px; bottom: 9px; width: 18px; }
/* hero 在窄屏必须退回单列：两栏时左列只剩 118px，标题会被挤成一个字一行 */
html[data-template="minimal"] .hero {
display: block; padding: 34px 0 26px;
}
html[data-template="minimal"] .hero h1 { font-size: clamp(38px, 11.4vw, 56px); }
html[data-template="minimal"] .hero-sub {
margin: 22px 0 0; padding: 0 0 0 14px;
border-left: 2px solid var(--mn-line-2);
font-size: 12px; line-height: 1.95;
}
html[data-template="minimal"] .hero-sub::after { display: none; }
html[data-template="minimal"] .hero-search { width: 100%; max-width: none; margin-top: 24px; flex-wrap: nowrap; }
/* 按钮外框要和「输入框 44 + 底线 2」一样高，底边才咬得住；
nowrap 防止「查成语」在 390px 里折成两行 */
html[data-template="minimal"] .hero-search input { height: 44px; font-size: 15px; }
html[data-template="minimal"] .hero-search button {
height: 46px; padding: 0 16px; font-size: 13px;
flex: 0 0 auto; white-space: nowrap;
}
html[data-template="minimal"] .card { padding: 24px 18px; }
html[data-template="minimal"] .letters { grid-template-columns: repeat(auto-fill, minmax(62px, 1fr)); gap: 8px; }
}
/* ============================================================================
* 视觉模板：水彩诗词意境（html[data-template="shuicai"]）
* ----------------------------------------------------------------------------
* 北极星：一册翻旧了的诗词绘本辞典。纸先于界面 —— 先有纸，再有字，最后才有框。
*
* 三条硬规则：
* 1. 纸是底，不是背景图。底色只做三件事：极淡的帘纹、四角几乎看不见的晕染、
* 标题区一层远山。任何一处的浓度都必须低到「说得出是什么，但看不清笔触」。
* 2. 朱砂是印泥，不是按钮色。全页只有三处朱砂：标题下的拼音索引线、属性印章、
* 当前接龙项。其余强调交给赭石（重点词）与青绿（装饰）。
* 3. 线条细到 1px、圆角压到 2–3px、投影只在笺纸上留一点点。圆角和厚阴影会
* 立刻把「水彩」变成「卡片」。
* ==========================================================================*/
html[data-template="shuicai"] {
/* ---- 纸与墨 ---- */
--sc-paper: #F6F1E6; /* 宣纸米白，整页底 */
--sc-paper-2: #FBF7EE; /* 笺纸，卡片面 */
--sc-ink: #33322E; /* 淡墨主文 */
--sc-ink-2: #585650;
--sc-ink-3: #615E56; /* 小字，压在 #F6F1E6 上 6.1:1 */
--sc-line: #DED5C4;
--sc-line-2: #C8BCA4;
/* ---- 三色 ---- */
--sc-green: #5F8272; /* 青绿：远山、竹叶 */
--sc-green-deep: #46665A;
--sc-green-soft: #E3EBE4;
--sc-ochre: #A9765A; /* 浅赭石：重点词、引文 */
--sc-ochre-ink: #8A5F42; /* 赭石的小字版：11–13px 用它才过 4.5:1 */
--sc-ochre-soft: #F1E5D7;
--sc-cinnabar: #B23A28; /* 朱砂：印泥、只做点 */
--sc-cinnabar-2: #C24A32;
--sc-cinnabar-soft: #F5E3DC;
--sc-serif: "Source Han Serif SC", "Source Han Serif SC Heavy", "Noto Serif SC",
"Songti SC", "STSong", "SimSun", "Times New Roman", serif;
--sc-sans: "Source Han Sans SC", "Noto Sans SC", "PingFang SC",
"Microsoft YaHei", "Segoe UI", sans-serif;
/* ---- 接管基础变量 ---- */
--primary: #B23A28;
--primary-dark: #91301F;
--primary-soft: #F5E3DC;
--ink: #33322E;
--ink-soft: #585650;
--ink-faint: #6F6C62;
--bg: #F6F1E6;
--card: #FBF7EE;
--border: #DED5C4;
--gold: #8E6446;
--radius: 3px;
--shadow: 0 1px 2px rgba(74, 62, 44, .04);
--font-sans: var(--sc-sans);
--font-serif: var(--sc-serif);
}
/* ---------- 纸：帘纹 + 四角晕染 ---------- */
html[data-template="shuicai"] body {
background-color: var(--sc-paper);
background-image:
/* 只在四角留一点色：整页泛绿会把宣纸压成灰纸 */
radial-gradient(820px 420px at 4% -6%, rgba(95, 130, 114, .07), transparent 64%),
radial-gradient(680px 380px at 96% -2%, rgba(169, 118, 90, .055), transparent 66%),
radial-gradient(900px 560px at 50% 104%, rgba(95, 130, 114, .05), transparent 72%),
/* 宣纸帘纹：竖纹，1px 一走，密度按 4px 才不显格 */
repeating-linear-gradient(90deg, rgba(120, 105, 80, .03) 0 1px, transparent 1px 4px);
background-attachment: fixed, fixed, fixed, scroll;
background-repeat: no-repeat, no-repeat, no-repeat, repeat;
color: var(--sc-ink);
font-family: var(--sc-sans);
line-height: 1.85;
}
html[data-template="shuicai"] a { color: var(--sc-ink); }
html[data-template="shuicai"] a:hover { color: var(--sc-cinnabar); }
/* ---------- 顶部：一条浅灰细线收住 ---------- */
html[data-template="shuicai"] .site-header {
background: #F6F1E6;
border-bottom: 1px solid var(--sc-line-2);
box-shadow: none;
}
html[data-template="shuicai"] .header-inner { gap: 26px; min-height: 68px; }
html[data-template="shuicai"] .logo {
font-family: var(--sc-serif); font-size: 20px; font-weight: 700;
letter-spacing: .18em; color: var(--sc-ink);
background: none; padding: 0; border-radius: 0;
}
html[data-template="shuicai"] .logo:hover { color: var(--sc-ink); }
/* 导航项之间一根浅灰竖线：像目录里隔开条目的那道铅线 */
html[data-template="shuicai"] .nav { gap: 0; flex-wrap: wrap; }
html[data-template="shuicai"] .nav a {
position: relative; padding: 4px 16px;
background: none; border: 0; border-radius: 0;
color: var(--sc-ink-2); font-size: 14px; letter-spacing: .1em;
transition: color .18s;
}
html[data-template="shuicai"] .nav a + a { box-shadow: inset 1px 0 0 rgba(51, 50, 46, .12); }
html[data-template="shuicai"] .nav a:hover { color: var(--sc-cinnabar); }
html[data-template="shuicai"] .search-box {
align-items: center; gap: 0; max-width: 320px; padding: 0 0 0 14px;
background: rgba(255, 253, 247, .6);
border: 1px solid var(--sc-line); border-radius: 2px; box-shadow: none;
}
html[data-template="shuicai"] .search-box input {
height: 32px; padding: 0 6px; background: none; border: 0;
border-radius: 0; font-size: 13.5px; color: var(--sc-ink);
}
html[data-template="shuicai"] .search-box input::placeholder { color: var(--sc-ink-3); }
html[data-template="shuicai"] .search-box input:focus { box-shadow: none; }
html[data-template="shuicai"] .search-box button {
height: 32px; padding: 0 14px; background: none; border: 0; border-radius: 0;
color: var(--sc-ink-2); font-size: 12.5px; letter-spacing: .14em;
transition: color .18s;
}
html[data-template="shuicai"] .search-box button:hover { background: none; color: var(--sc-cinnabar); }
html[data-template="shuicai"] .suggest {
top: 38px; background: #FCF9F1;
border: 1px solid var(--sc-line-2); border-radius: 2px;
box-shadow: 0 6px 22px rgba(74, 62, 44, .10);
}
html[data-template="shuicai"] .suggest a { border-bottom: 1px solid var(--sc-line); color: var(--sc-ink); }
html[data-template="shuicai"] .suggest a:hover,
html[data-template="shuicai"] .suggest a.active { background: rgba(95, 130, 114, .07); }
/* ---------- 面包屑：小字，斜线分隔 ---------- */
html[data-template="shuicai"] .breadcrumb {
padding: 26px 0 0; font-size: 12px; letter-spacing: .08em; color: var(--sc-ink-3);
}
html[data-template="shuicai"] .breadcrumb a { color: var(--sc-ink-3); }
html[data-template="shuicai"] .breadcrumb a:hover { color: var(--sc-cinnabar); }
html[data-template="shuicai"] .breadcrumb li + li::before {
content: '·'; color: var(--sc-line-2); margin: 0 10px;
}
/* ---------- 标题区：远山压在字后，晕染托住 ---------- */
html[data-template="shuicai"] .detail > .detail-head {
position: relative; text-align: center;
margin: 0; padding: 58px 16px 34px;
background: none;
}
/* 右上角两只飞鸟：两笔细线，不填色 */
html[data-template="shuicai"] .detail > .detail-head::after {
content: ''; position: absolute; right: 6%; top: 46px;
width: 46px; height: 26px; opacity: .5;
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 28'%3E%3Cpath d='M2 12 C7 7 11 7 14 11 C17 7 21 7 26 13' stroke='%23585650' fill='none' stroke-width='1.1' stroke-linecap='round'/%3E%3Cpath d='M28 21 C31 18 34 18 36 21 C38 18 41 18 44 21' stroke='%23585650' fill='none' stroke-width='1' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
}
html[data-template="shuicai"] .detail-head h1 {
position: relative; display: inline-block; margin: 0 0 6px;
font-family: var(--sc-serif);
font-size: clamp(52px, 6.6vw, 92px); font-weight: 700;
line-height: 1.16; letter-spacing: .1em;
color: var(--sc-ink);
/* 长标题（七字以上）在窄屏必须能断，否则会把容器撑破 */
overflow-wrap: anywhere;
text-shadow: 0 1px 0 rgba(255, 253, 246, .8);
animation: sc-rise .62s cubic-bezier(.22, .8, .24, 1) backwards;
}
html[data-template="shuicai"] .detail-head .head-sub {
gap: 0; justify-content: center; margin-top: 2px;
}
html[data-template="shuicai"] .detail-head .head-sub::before,
html[data-template="shuicai"] .detail-head .head-sub::after { display: none; }
html[data-template="shuicai"] .detail-head .pinyin {
position: relative; display: inline-block;
padding: 7px 20px 0;
background: none; color: var(--sc-ink-3);
font-family: var(--sc-sans); font-size: 12.5px; font-weight: 400;
letter-spacing: .34em; text-transform: none;
}
/* 拼音上方一根朱砂短线：全页第一条朱砂，等于「题签」 */
html[data-template="shuicai"] .detail-head .pinyin::before {
content: ''; position: absolute; left: 50%; top: 0;
width: 26px; height: 1px; margin-left: -13px;
background: var(--sc-cinnabar); opacity: .55;
}
/* ---------- 属性标签：淡朱砂印章 ---------- */
html[data-template="shuicai"] .detail > .tags {
justify-content: center; flex-wrap: wrap;
gap: 11px; margin: 0 0 34px; padding: 0 16px;
background: none; border: 0;
}
html[data-template="shuicai"] .tag {
/* 竖排两行才是「印面」：横排读起来像胶囊标签 */
display: inline-flex; flex-direction: column; align-items: center; gap: 2px;
min-width: 66px; padding: 7px 13px 8px;
background-color: rgba(178, 58, 40, .055);
/* 印泥不匀：两团极淡的斑，比纯色更像盖上去的 */
background-image:
radial-gradient(60% 80% at 28% 36%, rgba(178, 58, 40, .07), transparent 62%),
radial-gradient(50% 70% at 76% 68%, rgba(178, 58, 40, .05), transparent 66%);
border: 1px solid rgba(178, 58, 40, .40);
border-radius: 2px;
/* 内白圈 = 印面留白，双框才有「方章」的样子 */
box-shadow: inset 0 0 0 2px rgba(246, 241, 230, .92);
}
html[data-template="shuicai"] .tag-label {
position: relative; top: 0;
font-size: 10px; font-weight: 400; letter-spacing: .22em;
text-indent: .22em; /* 补掉末字后多出的字距，字才在印面正中 */
color: rgba(178, 58, 40, .88);
}
html[data-template="shuicai"] .tag-value {
font-family: var(--sc-serif); font-size: 14.5px; font-weight: 600;
letter-spacing: .04em; line-height: 1.3; color: var(--sc-cinnabar);
}
/* ---------- 田字格：一张裱在纸上的图版 ---------- */
html[data-template="shuicai"] .grid-figure { justify-content: center; margin: 14px 0 30px; }
html[data-template="shuicai"] .grid-img {
/* 图版自带 520px 的原始尺寸，在 820 及以下会压过标题；
收到 400 是「一页插图」的尺度，再窄就由 max-width:100% 接手 */
max-width: 400px; height: auto;
border: 1px solid var(--sc-line); border-radius: 2px;
background: #fff; padding: 6px;
/* 图是白底红格，直接压在米白纸上是一块最亮的白。
multiply 让白底化进纸里，只剩红格浮在纸面上 */
mix-blend-mode: multiply;
box-shadow: none;
}
/* ---------- 版心与板块：半透明宣纸 ---------- */
/* 诗词绘本的版心比 1080 窄一档，一行三十来字才读得出「书页」 */
html[data-template="shuicai"] .detail { position: relative; max-width: 920px; margin: 0 auto; }
/* 远山与水墨各占一层，铺在标题之后、正文之前。
两层都必须羽化四边：直接用 background 铺在标题容器上，会被容器矩形
裁出一条直边，远山看着像贴了一张灰绿纸。 */
html[data-template="shuicai"] .detail::before,
html[data-template="shuicai"] .detail::after {
content: ''; position: absolute; left: 50%; transform: translateX(-50%);
/* 用负层级沉到内容下面：给 .detail > * 加 z-index 会造出新的 stacking
context，田字格的 mix-blend-mode 就混不到这层背景，白底又浮出来。
宽度不能超 100% —— 108% 在 820 视口会顶出 16px 横向滚动条；
左右羽化交给 SVG 自带的 mask，不靠外扩。 */
width: 100%; pointer-events: none; z-index: -1;
}
html[data-template="shuicai"] .detail::before {
/* 山脊要落在标题字里，不是标题下方 —— 田字格图版会把山腰挡住，
山只从两侧露出半截，读起来才是「字在山前」 */
top: -22px; height: 300px;
background: url("/public/img/tpl-sc-mountains.svg") center bottom / 100% 100% no-repeat;
/* 剪影感来自硬边，1.4px 的模糊就是一层雾 */
filter: blur(1.4px);
opacity: .92;
}
html[data-template="shuicai"] .detail::after {
top: -70px; height: 420px;
background:
radial-gradient(40% 54% at 30% 36%, rgba(95, 130, 114, .10), transparent 70%),
radial-gradient(34% 46% at 70% 26%, rgba(169, 118, 90, .08), transparent 72%);
-webkit-mask-image: radial-gradient(120% 104% at 50% 42%, #000 44%, transparent 80%);
mask-image: radial-gradient(120% 104% at 50% 42%, #000 44%, transparent 80%);
}
/* 装饰层在负层级，正文自然在上面；不要再给 .detail > * 加 z-index，
一旦加上就会屏蔽田字格的 mix-blend-mode。 */
html[data-template="shuicai"] .detail > section.card,
html[data-template="shuicai"] .detail .card {
position: relative;
padding: 44px 46px 46px; margin-bottom: 26px;
background-color: rgba(251, 247, 238, .74);
background-image: repeating-linear-gradient(90deg, rgba(120, 105, 80, .022) 0 1px, transparent 1px 3px);
border: 1px solid var(--sc-line); border-radius: 3px;
box-shadow: none;
animation: sc-rise .5s cubic-bezier(.22, .8, .24, 1) backwards;
}
html[data-template="shuicai"] .detail .card.highlight {
background-color: rgba(241, 229, 215, .58);
border-color: rgba(169, 118, 90, .34);
}
/* 板块标题：细墨线 + 一枚竹叶 */
html[data-template="shuicai"] .detail .card h2 {
position: relative;
display: flex; align-items: center; gap: 10px;
margin: 0 0 28px; padding: 0 0 15px;
border-bottom: 1px solid var(--sc-line);
font-family: var(--sc-serif); font-size: 25px; font-weight: 700;
line-height: 1.35; letter-spacing: .07em; color: var(--sc-ink);
}
html[data-template="shuicai"] .detail .card h2::before {
content: ''; flex: 0 0 auto;
width: 26px; height: 26px; margin-top: 0;
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M3.4 28.6 C9.2 21.6 15.2 13 22 5' stroke='%235F8272' stroke-width='1.1' fill='none' stroke-linecap='round' opacity='.85'/%3E%3Cpath d='M14 14.5 C16 9.4 20.2 6 26 4.6 C24.2 9.8 19.6 13.4 14 14.5 Z' fill='%235F8272' opacity='.72'/%3E%3Cpath d='M9.4 19.6 C8.6 14.6 10.6 10.2 14.4 7.2 C15.2 11.8 12.6 16.8 9.4 19.6 Z' fill='%2346665A' opacity='.55'/%3E%3Cpath d='M6 24.4 C4.6 20.4 5.2 16.2 7.2 12.8 C9 16.2 8.8 20.8 6 24.4 Z' fill='%235F8272' opacity='.4'/%3E%3C/svg%3E") center / contain no-repeat;
}
/* 细线的收尾处压一小段赭石，像笔尖离纸时留下的一顿 */
html[data-template="shuicai"] .detail .card h2::after {
content: ''; position: absolute; left: 0; bottom: -1px;
width: 34px; height: 1.5px; background: var(--sc-ochre); opacity: .55;
}
/* ---------- 释义：首字下沉，赭石 ---------- */
html[data-template="shuicai"] .detail .explanation {
margin: 0; padding: 0; max-width: 34em;
background: none; border: 0; border-radius: 0; box-shadow: none;
font-size: 18px; line-height: 2.05; letter-spacing: .012em;
color: var(--sc-ink);
}
html[data-template="shuicai"] .detail .explanation::first-letter {
float: left; padding: .12em .2em 0 0;
font-family: var(--sc-serif); font-size: 3em; line-height: .92;
font-weight: 700; color: var(--sc-ochre);
}
html[data-template="shuicai"] .detail .explanation strong,
html[data-template="shuicai"] .detail .story strong {
font-weight: 600; color: var(--sc-ochre-ink);
/* 淡赭色下划线：标记重点词，但不抢行气 */
box-shadow: inset 0 -.34em 0 rgba(169, 118, 90, .16);
}
/* ---------- 字段列表 ---------- */
html[data-template="shuicai"] .detail .fields { gap: 0; }
html[data-template="shuicai"] .detail .field {
grid-template-columns: 84px 1fr; gap: 0 24px;
padding: 17px 0; border-top: 1px solid rgba(200, 188, 164, .5);
}
html[data-template="shuicai"] .detail .field:first-child { border-top: 0; padding-top: 0; }
html[data-template="shuicai"] .detail .field dt {
padding-top: 5px;
font-family: var(--sc-serif); font-size: 12.5px; font-weight: 400;
letter-spacing: .18em; color: var(--sc-ochre-ink);
}
html[data-template="shuicai"] .detail .field dd {
max-width: 38em; font-size: 16px; line-height: 1.95; color: var(--sc-ink);
}
/* 引文：左侧一根细赭石线，缩进 1.1em */
html[data-template="shuicai"] .detail .field dd.quote {
max-width: 34em; margin: 0; padding: 2px 0 2px 1.1em;
background: none; border: 0; border-left: 1px solid rgba(169, 118, 90, .42);
border-radius: 0;
font-family: var(--sc-serif); font-size: 15.5px; line-height: 2.0;
color: var(--sc-ink-2);
}
/* ---------- 造句 / 故事 ---------- */
html[data-template="shuicai"] .detail .zju-list { list-style: none; counter-reset: sc-zju; }
html[data-template="shuicai"] .detail .zju-list li {
counter-increment: sc-zju; position: relative;
max-width: 33em; padding: 0 0 0 34px; margin-bottom: 13px;
font-size: 16px; line-height: 1.95; color: var(--sc-ink);
}
html[data-template="shuicai"] .detail .zju-list li:last-child { margin-bottom: 0; }
html[data-template="shuicai"] .detail .zju-list li::before {
content: counter(sc-zju); position: absolute; left: 0; top: .3em;
width: 20px; height: 20px; line-height: 19px; text-align: center;
font-family: var(--sc-serif); font-size: 11px; color: var(--sc-ochre-ink);
border: 1px solid rgba(169, 118, 90, .34); border-radius: 50%;
}
html[data-template="shuicai"] .detail .story {
max-width: 34em; font-size: 16.5px; line-height: 2.1; color: var(--sc-ink);
text-indent: 2em;
}
/* ---------- 近义词 / 反义词 ---------- */
html[data-template="shuicai"] .detail .syn-ant { margin-bottom: 16px; }
html[data-template="shuicai"] .detail .syn-ant:last-child { margin-bottom: 0; }
html[data-template="shuicai"] .detail .syn-ant > strong {
width: 74px; font-family: var(--sc-serif); font-size: 12.5px; font-weight: 400;
letter-spacing: .16em; color: var(--sc-ink-3); vertical-align: middle;
}
html[data-template="shuicai"] .detail .chip,
html[data-template="shuicai"] .chip {
padding: 4px 13px; background: rgba(255, 253, 247, .72);
color: var(--sc-ink); border: 1px solid var(--sc-line); border-radius: 2px;
font-size: 14px; font-weight: 400; letter-spacing: .03em;
transition: background .18s, color .18s, border-color .18s;
}
html[data-template="shuicai"] a.chip:hover,
html[data-template="shuicai"] .detail a.chip:hover {
background: rgba(95, 130, 114, .1);
color: var(--sc-green-deep); border-color: rgba(95, 130, 114, .45);
}
html[data-template="shuicai"] .chip.plain { color: var(--sc-ink-3); background: none; }
/* ---------- 趣味延伸 ---------- */
html[data-template="shuicai"] .detail .highlight p {
font-size: 15.5px; line-height: 2.0; color: var(--sc-ink-2);
}
html[data-template="shuicai"] .detail .gold {
margin-right: 9px; padding: 0;
color: var(--sc-ochre-ink); font-family: var(--sc-serif);
font-size: 12.5px; font-weight: 600; letter-spacing: .14em;
background: none; vertical-align: 1px;
}
html[data-template="shuicai"] .detail .xhy-list li {
font-size: 15.5px; line-height: 2.0; color: var(--sc-ink-2);
}
/* ---------- 字义分解：四张淡彩笺纸 ---------- */
/* 两列两行摊开四张笺纸。四列并排时释义会被压到每行六七个字，
单字再大也读不动；两列能把字放到 96px，右侧还留得下整句。 */
html[data-template="shuicai"] .detail .char-decompose {
grid-template-columns: repeat(2, 1fr);
gap: 22px 22px;
/* 四张纸等高：笺纸有底色，纸外的空白读作「没排满」，
纸内的空白才是留白。内容仍各自顶部对齐。 */
align-items: stretch;
}
html[data-template="shuicai"] .detail .char-item {
position: relative; display: grid;
grid-template-columns: 104px minmax(0, 1fr);
column-gap: 22px; row-gap: 0; align-items: start;
padding: 30px 28px 28px;
border: 1px solid rgba(169, 118, 90, .26); border-radius: 2px;
/* 笺纸顶边一道更浅的横线，像裁好的信笺 */
box-shadow: inset 0 6px 0 -5px rgba(169, 118, 90, .18);
}
/* 四色笺：青 / 赭 / 朱 / 黄，都压到接近纸色，只够分出「这是四张」 */
html[data-template="shuicai"] .detail .char-item:nth-child(4n+1) {
background-color: #EAF1EB; border-color: rgba(95, 130, 114, .26);
box-shadow: inset 0 6px 0 -5px rgba(95, 130, 114, .22);
}
html[data-template="shuicai"] .detail .char-item:nth-child(4n+2) {
background-color: #F5ECDF; border-color: rgba(169, 118, 90, .26);
}
html[data-template="shuicai"] .detail .char-item:nth-child(4n+3) {
background-color: #F8EBE5; border-color: rgba(178, 58, 40, .18);
box-shadow: inset 0 6px 0 -5px rgba(178, 58, 40, .16);
}
html[data-template="shuicai"] .detail .char-item:nth-child(4n) {
background-color: #F5EFDE; border-color: rgba(169, 140, 74, .24);
box-shadow: inset 0 6px 0 -5px rgba(169, 140, 74, .2);
}
html[data-template="shuicai"] .detail .char-glyph {
width: auto; height: auto; align-self: start; display: block;
padding: 0; margin-top: -4px;
font-family: var(--sc-serif); font-size: 96px; font-weight: 700;
line-height: 1.02; letter-spacing: 0; text-align: center;
color: var(--sc-ink); background: none; border: 0; border-radius: 0;
}
html[data-template="shuicai"] .detail .char-glyph a { color: var(--sc-ink); }
html[data-template="shuicai"] .detail .char-glyph a:hover { color: var(--sc-cinnabar); }
html[data-template="shuicai"] .detail .char-meta { padding-top: 2px; min-width: 0; }
html[data-template="shuicai"] .detail .char-pron {
margin-bottom: 10px; font-size: 12px; letter-spacing: .06em;
line-height: 1.8; color: var(--sc-ink-3);
}
html[data-template="shuicai"] .detail .char-extra { gap: 6px; margin-bottom: 10px; }
html[data-template="shuicai"] .detail .char-extra-item {
padding: 0 7px; background: rgba(255, 253, 247, .55);
border: 1px solid rgba(169, 118, 90, .22); border-radius: 2px;
font-size: 11px; line-height: 1.7; letter-spacing: .04em; color: var(--sc-ochre-ink);
}
html[data-template="shuicai"] .detail .char-extra-sep { color: var(--sc-line-2); }
html[data-template="shuicai"] .detail .char-shape {
margin-bottom: 0; font-size: 13px; line-height: 1.8; color: var(--sc-ink-3);
}
html[data-template="shuicai"] .detail .char-senses {
gap: 10px; margin-top: 13px; padding-top: 13px;
border-top: 1px solid rgba(169, 118, 90, .18);
}
html[data-template="shuicai"] .detail .sn-num {
font-family: var(--sc-serif); font-size: 13px; font-weight: 400;
line-height: 1.8; color: var(--sc-ochre-ink);
}
html[data-template="shuicai"] .detail .sn-title {
font-size: 14.5px; font-weight: 600; color: var(--sc-ink);
}
html[data-template="shuicai"] .detail .sn-text {
margin-top: 3px; font-size: 13.5px; line-height: 1.9; color: var(--sc-ink-2);
}
html[data-template="shuicai"] .detail .expand-sense {
align-self: flex-start; margin-top: 14px; padding: 4px 0 2px;
background: none; border: 0; border-bottom: 1px solid rgba(169, 118, 90, .5);
border-radius: 0;
color: var(--sc-ochre-ink); font-size: 12px; letter-spacing: .08em;
}
html[data-template="shuicai"] .detail .expand-sense:hover {
background: none; color: var(--sc-cinnabar); border-bottom-color: var(--sc-cinnabar);
}
/* ---------- 接龙：一条淡墨索引带，箭头是细笔 ---------- */
html[data-template="shuicai"] .detail .tabs {
gap: 30px; margin-bottom: 20px;
border-bottom: 1px solid var(--sc-line);
}
html[data-template="shuicai"] .detail .tab {
padding: 0 0 11px; margin-bottom: -1px;
background: none; border: 0; border-bottom: 1px solid transparent; border-radius: 0;
color: var(--sc-ink-3); font-family: var(--sc-serif);
font-size: 14px; font-weight: 400; letter-spacing: .1em;
transition: color .18s, border-color .18s;
}
html[data-template="shuicai"] .detail .tab:hover { color: var(--sc-ink); }
html[data-template="shuicai"] .detail .tab.active {
color: var(--sc-cinnabar); font-weight: 600; border-bottom-color: var(--sc-cinnabar);
}
/* 索引带：上下两道细线夹一条极淡的青绿横晕，节点像贴在带上 */
html[data-template="shuicai"] .detail .jielong-chain {
gap: 0; row-gap: 10px; align-items: flex-start;
margin-bottom: 18px; padding: 15px 18px;
background-image: linear-gradient(180deg, rgba(95, 130, 114, .075), rgba(95, 130, 114, .028) 58%, rgba(95, 130, 114, .05));
border-top: 1px solid rgba(95, 130, 114, .22);
border-bottom: 1px solid rgba(95, 130, 114, .16);
border-radius: 2px;
}
html[data-template="shuicai"] .detail .jielong-node {
display: flex; flex-direction: column; align-items: flex-start; gap: 1px;
min-width: 0; padding: 4px 10px 5px;
background: rgba(255, 253, 247, .5);
border: 1px solid transparent; border-radius: 2px;
box-shadow: none; transform: none;
transition: background .18s, border-color .18s, color .18s;
}
html[data-template="shuicai"] .detail .jielong-node .jw {
font-family: var(--sc-serif); font-size: 16.5px; font-weight: 600;
letter-spacing: .06em; color: var(--sc-ink);
}
html[data-template="shuicai"] .detail .jielong-node .jp {
font-size: 10.5px; letter-spacing: .04em; color: var(--sc-ink-3);
}
html[data-template="shuicai"] .detail .jielong-node:hover {
background: rgba(255, 253, 247, .95);
border-color: rgba(95, 130, 114, .38);
box-shadow: none; transform: none;
}
html[data-template="shuicai"] .detail .jielong-node:hover .jw { color: var(--sc-green-deep); }
html[data-template="shuicai"] .detail .jielong-node.current {
background: rgba(178, 58, 40, .07);
border-color: rgba(178, 58, 40, .3);
}
html[data-template="shuicai"] .detail .jielong-node.current .jw { color: var(--sc-cinnabar); }
/* 箭头：把「→」换成一道细笔，笔锋只挑两笔，不成三角 */
html[data-template="shuicai"] .detail .jielong-arrow {
flex: 0 0 auto; align-self: center;
width: 28px; height: 13px; margin: 0 1px;
font-size: 0; line-height: 0; color: transparent;
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 14'%3E%3Cpath d='M1 8.4 C8.6 5.6 16.4 4.9 26 5.4' stroke='%23585650' stroke-width='1' fill='none' stroke-linecap='round' opacity='.62'/%3E%3Cpath d='M25.8 5.4 L20.6 2.6' stroke='%23585650' stroke-width='.9' stroke-linecap='round' opacity='.62'/%3E%3Cpath d='M25.8 5.4 L21 9.4' stroke='%23585650' stroke-width='.9' stroke-linecap='round' opacity='.45'/%3E%3C/svg%3E") center / contain no-repeat;
}
html[data-template="shuicai"] .detail .btn-regen {
margin-top: 2px; padding: 8px 20px;
background: none; border: 1px solid rgba(95, 130, 114, .45); border-radius: 2px;
color: var(--sc-green-deep); font-family: var(--sc-serif);
font-size: 13px; letter-spacing: .1em;
transition: background .18s, color .18s, border-color .18s;
}
html[data-template="shuicai"] .detail .btn-regen:hover {
background: rgba(95, 130, 114, .1); color: var(--sc-green-deep);
border-color: rgba(95, 130, 114, .7);
}
html[data-template="shuicai"] .detail .btn-regen:active { background: rgba(95, 130, 114, .18); color: var(--sc-green-deep); }
html[data-template="shuicai"] .detail .btn-regen:disabled { opacity: .5; }
/* ---------- 相关成语：淡彩卡，部分带一角远山 ---------- */
html[data-template="shuicai"] .detail .related-grid {
grid-template-columns: repeat(4, 1fr); gap: 14px;
}
html[data-template="shuicai"] .detail .related-item {
position: relative; overflow: hidden;
display: flex; flex-direction: column; gap: 5px;
padding: 16px 16px 18px;
background-color: rgba(255, 253, 247, .62);
border: 1px solid var(--sc-line); border-radius: 2px;
transition: background .2s, border-color .2s;
}
html[data-template="shuicai"] .detail .related-item:hover {
background-color: rgba(255, 253, 247, .95);
border-color: rgba(95, 130, 114, .42);
box-shadow: none; transform: none;
}
/* 底角远山小景：只给 4 张里的一张，其余保持干净 */
html[data-template="shuicai"] .detail .related-item::before {
content: ''; position: absolute; right: -4px; bottom: -3px;
width: 60px; height: 32px; display: none; pointer-events: none;
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 60' preserveAspectRatio='none'%3E%3Cpath d='M0 44 C12 38 20 30 30 31 C40 32 44 40 54 40 C64 40 70 30 82 27 C94 24 100 33 110 38 C114 40 117 42 120 43 L120 60 L0 60 Z' fill='%235F8272' opacity='.3'/%3E%3Cpath d='M0 52 C16 47 26 44 38 47 C50 50 58 46 70 43 C82 40 92 45 104 48 C112 50 116 51 120 52 L120 60 L0 60 Z' fill='%2346665A' opacity='.24'/%3E%3C/svg%3E") center bottom / contain no-repeat;
opacity: .6;
}
html[data-template="shuicai"] .detail .related-item:nth-child(4n+2)::before,
html[data-template="shuicai"] .detail .related-item:nth-child(4n)::before { display: block; }
html[data-template="shuicai"] .detail .related-item .rw {
position: relative; z-index: 1;
font-family: var(--sc-serif); font-size: 17px; font-weight: 600;
letter-spacing: .05em; color: var(--sc-ink);
}
html[data-template="shuicai"] .detail .related-item .rp,
html[data-template="shuicai"] .detail .related-item small {
position: relative; z-index: 1;
font-size: 11.5px; line-height: 1.7; letter-spacing: .02em; color: var(--sc-ink-3);
}
html[data-template="shuicai"] .detail .related-item:hover .rw { color: var(--sc-green-deep); }
/* ---------- 所属标签 ---------- */
html[data-template="shuicai"] .detail .tags-of-idiom .chip {
padding: 5px 14px; font-size: 13.5px;
}
/* ---------- 列表页（搜索 / 拼音 / 标签）：一条条，不装箱 ---------- */
html[data-template="shuicai"] .list-desc {
max-width: 44em; font-size: 14.5px; line-height: 2.0; color: var(--sc-ink-2);
}
html[data-template="shuicai"] .list-desc a { color: var(--sc-ochre-ink); box-shadow: inset 0 -1px 0 rgba(169, 118, 90, .45); }
html[data-template="shuicai"] .result-list {
background: rgba(251, 247, 238, .55);
border: 1px solid var(--sc-line); border-radius: 3px; box-shadow: none;
}
html[data-template="shuicai"] .result-item { padding: 16px 22px; gap: 4px 12px; border-bottom: 1px solid rgba(200, 188, 164, .7); }
html[data-template="shuicai"] .result-item:last-child { border-bottom: 0; }
html[data-template="shuicai"] .result-item .rw {
font-family: var(--sc-serif); font-size: 18px; font-weight: 600;
letter-spacing: .06em; color: var(--sc-ink);
}
html[data-template="shuicai"] .result-item .rp {
font-size: 12px; letter-spacing: .08em; color: var(--sc-ink-3);
}
html[data-template="shuicai"] .result-item .re {
flex: 1 1 100%; font-size: 13.5px; line-height: 1.85; color: var(--sc-ink-2);
}
html[data-template="shuicai"] .result-item:hover { background: rgba(95, 130, 114, .06); }
html[data-template="shuicai"] .result-item:hover .rw { color: var(--sc-green-deep); }
/* ---------- 字典页 / 词语页：同一套语法，只补差异 ---------- */
html[data-template="shuicai"] .detail .sub-h {
margin: 24px 0 12px; padding: 0 0 8px;
/* 基础样式是 3px 的彩色左边线，放在纸上像彩色便签条，改成一条细墨线 */
border-left: 0; border-bottom: 1px solid var(--sc-line);
font-family: var(--sc-serif); font-size: 16px; font-weight: 600;
letter-spacing: .1em; color: var(--sc-ink);
}
html[data-template="shuicai"] .detail .sense-body,
html[data-template="shuicai"] .detail .sense-line,
html[data-template="shuicai"] .detail .classic p {
/* 42em 是这首诗集版心能舒服读到的宽度，再宽眼睛会跑回行首 */
max-width: 42em;
font-size: 15px; line-height: 2.0; color: var(--sc-ink);
}
html[data-template="shuicai"] .detail .classic p { color: var(--sc-ink-2); }
html[data-template="shuicai"] .detail .sense-line.sense-attr {
padding-left: 24px; font-size: 14px; color: var(--sc-ink-2);
}
html[data-template="shuicai"] .detail .attr-tag {
color: var(--sc-cinnabar); font-family: var(--sc-serif);
font-size: 11.5px; font-weight: 400; line-height: 2.1;
}
html[data-template="shuicai"] .detail .sense-detail {
border-bottom: 1px solid rgba(200, 188, 164, .55);
}
html[data-template="shuicai"] .detail .sense-detail:last-child { border-bottom: 0; }
/* ---------- 404：一个淡墨的大字 ---------- */
html[data-template="shuicai"] .not-found { padding: 64px 16px 44px; text-align: center; }
html[data-template="shuicai"] .not-found h1 {
margin: 0 0 16px; line-height: 1;
font-family: var(--sc-serif); font-size: clamp(64px, 8.4vw, 100px);
font-weight: 700; letter-spacing: .14em; text-indent: .14em;
/* 淡墨但要过 3:1：再浅就成了「没加载出来的占位」 */
color: #9E9179;
}
html[data-template="shuicai"] .not-found p {
font-size: 14.5px; letter-spacing: .06em; color: var(--sc-ink-2);
}
html[data-template="shuicai"] .not-found .hero-search { max-width: 460px; margin: 26px auto 0; }
html[data-template="shuicai"] .not-found .back { margin-top: 22px; }
html[data-template="shuicai"] .not-found .back a { color: var(--sc-ochre-ink); font-size: 13px; letter-spacing: .08em; }
/* ---------- 页脚：一行小字，一条细线 ---------- */
html[data-template="shuicai"] .site-footer {
margin-top: 60px; padding: 34px 0 44px;
background: none; border-top: 1px solid var(--sc-line-2);
color: var(--sc-ink-3); font-size: 12.5px; letter-spacing: .06em;
}
html[data-template="shuicai"] .footer-inner {
align-items: center; justify-content: center;
padding: 0 16px; text-align: center; gap: 12px;
}
/* 页脚上方一枚小朱砂方点：全页最后一点印泥 */
html[data-template="shuicai"] .site-footer .container::before {
content: ''; display: block; width: 6px; height: 6px; margin: 0 auto 16px;
background: var(--sc-cinnabar); opacity: .5; border-radius: 1px;
}
html[data-template="shuicai"] .copyright { color: var(--sc-ink-3); font-size: 12.5px; }
html[data-template="shuicai"] .footer-nav { justify-content: center; gap: 20px; }
html[data-template="shuicai"] .footer-nav a { color: var(--sc-ink-2); font-size: 13px; }
html[data-template="shuicai"] .footer-nav a:hover { color: var(--sc-cinnabar); }
/* ---------- 首页：一句题词，一方搜索 ---------- */
html[data-template="shuicai"] .hero {
position: relative; text-align: center; padding: 68px 0 46px;
}
/* 首页不背山，只在标题右侧留两只飞鸟：山留给内容页，入口要轻 */
html[data-template="shuicai"] .hero::after {
content: ''; position: absolute; right: 15%; top: 58px;
width: 54px; height: 32px; opacity: .42; pointer-events: none;
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 28'%3E%3Cpath d='M2 12 C7 7 11 7 14 11 C17 7 21 7 26 13' stroke='%23585650' fill='none' stroke-width='1.1' stroke-linecap='round'/%3E%3Cpath d='M28 21 C31 18 34 18 36 21 C38 18 41 18 44 21' stroke='%23585650' fill='none' stroke-width='1' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
}
html[data-template="shuicai"] .hero h1 {
position: relative; display: inline-block; margin: 0 0 16px;
font-family: var(--sc-serif); font-size: clamp(40px, 5.6vw, 72px);
font-weight: 700; line-height: 1.18; letter-spacing: .14em;
color: var(--sc-ink);
animation: sc-rise .62s cubic-bezier(.22, .8, .24, 1) backwards;
}
html[data-template="shuicai"] .hero h1::after {
content: ''; position: absolute; left: 50%; bottom: -.22em;
width: 54px; height: 1px; margin-left: -27px;
background: var(--sc-cinnabar); opacity: .5;
}
/* 副题：字距拉开的一段小字，像题跋 */
html[data-template="shuicai"] .hero-sub {
max-width: 34em; margin: 22px auto 0; padding: 0;
font-size: 12.5px; line-height: 2.1; letter-spacing: .1em;
color: var(--sc-ink-3); text-align: center;
}
html[data-template="shuicai"] .hero-sub strong { color: var(--sc-ochre-ink); font-weight: 600; }
html[data-template="shuicai"] .hero-search {
width: 100%; max-width: 520px; margin: 30px auto 0;
gap: 8px; align-items: stretch;
background: none; border: 0; border-radius: 0; box-shadow: none;
}
html[data-template="shuicai"] .hero-search input {
flex: 1; min-width: 0; height: 48px; padding: 0 16px;
background: rgba(255, 253, 247, .8);
border: 1px solid var(--sc-line-2); border-radius: 2px;
font-size: 15.5px; color: var(--sc-ink);
transition: border-color .18s, background .18s;
}
html[data-template="shuicai"] .hero-search input::placeholder { color: var(--sc-ink-3); }
html[data-template="shuicai"] .hero-search input:focus {
outline: 0; border-color: rgba(95, 130, 114, .55); background: #FFFDF7;
box-shadow: 0 0 0 3px rgba(95, 130, 114, .09);
}
/* 按钮做成一方朱砂印：方角、字米白、不描边 */
html[data-template="shuicai"] .hero-search button {
height: 48px; padding: 0 26px;
background: var(--sc-cinnabar); border: 0; border-radius: 2px;
color: #FBF7EE; font-family: var(--sc-serif);
font-size: 14px; font-weight: 600; letter-spacing: .18em;
transition: background .18s;
}
html[data-template="shuicai"] .hero-search button:hover { background: #9B3122; }
html[data-template="shuicai"] .card {
padding: 32px 34px; margin-bottom: 18px;
background-color: rgba(251, 247, 238, .74);
border: 1px solid var(--sc-line); border-radius: 3px; box-shadow: none;
}
html[data-template="shuicai"] .card h2 {
position: relative; margin-bottom: 22px; padding: 0 0 13px;
border-bottom: 1px solid var(--sc-line);
font-family: var(--sc-serif); font-size: 21px; font-weight: 700;
letter-spacing: .08em; color: var(--sc-ink);
}
html[data-template="shuicai"] .card h2::after {
content: ''; position: absolute; left: 0; bottom: -1px;
width: 30px; height: 1.5px; background: var(--sc-ochre); opacity: .55;
}
html[data-template="shuicai"] .muted {
max-width: 42em; font-size: 14.5px; line-height: 2.0; color: var(--sc-ink-2);
}
html[data-template="shuicai"] .muted a { color: var(--sc-ochre-ink); }
/* 字母格：淡彩小笺 */
html[data-template="shuicai"] .letters { grid-template-columns: repeat(13, 1fr); gap: 9px; }
html[data-template="shuicai"] .letter {
padding: 11px 4px; background: rgba(255, 253, 247, .6);
border: 1px solid var(--sc-line); border-radius: 2px;
color: var(--sc-ink); font-family: var(--sc-serif);
font-size: 17px; font-weight: 600; letter-spacing: .04em;
transition: background .18s, color .18s, border-color .18s;
}
html[data-template="shuicai"] .letter small { color: var(--sc-ink-3); font-size: 10.5px; letter-spacing: 0; }
html[data-template="shuicai"] .letter:hover {
background: rgba(95, 130, 114, .1); border-color: rgba(95, 130, 114, .4); color: var(--sc-green-deep);
}
html[data-template="shuicai"] .letter:hover small { color: var(--sc-green-deep); }
html[data-template="shuicai"] .letter.empty { color: var(--sc-line-2); }
html[data-template="shuicai"] .letter.empty:hover {
background: rgba(255, 253, 247, .6); border-color: var(--sc-line); color: var(--sc-line-2);
}
/* 热门成语卡：四张里一张带远山，同相关成语 */
html[data-template="shuicai"] .hot-item {
position: relative; overflow: hidden; gap: 4px;
padding: 15px 15px 17px;
background-color: rgba(255, 253, 247, .6);
border: 1px solid var(--sc-line); border-radius: 2px;
transition: background .2s, border-color .2s;
}
html[data-template="shuicai"] .hot-item:hover {
background-color: rgba(255, 253, 247, .95);
border-color: rgba(95, 130, 114, .42);
box-shadow: none; transform: none;
}
html[data-template="shuicai"] .hot-word {
position: relative; z-index: 1;
font-family: var(--sc-serif); font-size: 18px; font-weight: 600;
letter-spacing: .06em; color: var(--sc-ink);
}
html[data-template="shuicai"] .hot-pinyin {
position: relative; z-index: 1; margin-top: 0;
font-size: 11px; letter-spacing: .08em; color: var(--sc-ink-3);
}
html[data-template="shuicai"] .hot-expl {
position: relative; z-index: 1; margin-top: 5px;
font-size: 13px; line-height: 1.8; color: var(--sc-ink-2);
}
html[data-template="shuicai"] .hot-item:hover .hot-word { color: var(--sc-green-deep); }
/* 「换几种查法」：横向文字组，竖线隔开 */
html[data-template="shuicai"] .chips:has(.chip-py) { gap: 0; row-gap: 15px; margin-top: 22px; }
html[data-template="shuicai"] .chips { gap: 9px; }
html[data-template="shuicai"] .chip-py {
display: inline-flex; flex-direction: column; align-items: flex-start; gap: 2px;
padding: 1px 20px; text-align: left;
background: none; border: 0; border-left: 1px solid var(--sc-line-2); border-radius: 0;
}
html[data-template="shuicai"] .chip-py:first-child { padding-left: 0; border-left: 0; }
html[data-template="shuicai"] .chip-py .cp-word {
font-family: var(--sc-serif); font-size: 15px; font-weight: 600; color: var(--sc-ink);
}
html[data-template="shuicai"] .chip-py .cp-py { font-size: 11.5px; color: var(--sc-ink-3); letter-spacing: .03em; }
html[data-template="shuicai"] a.chip-py:hover { background: none; }
html[data-template="shuicai"] a.chip-py:hover .cp-word { color: var(--sc-green-deep); }
html[data-template="shuicai"] .chip small { margin-left: 6px; font-size: 11px; color: var(--sc-ink-3); }
/* ---------- 动效：进场像纸页摊开，只有位移与淡入 ---------- */
@keyframes sc-rise {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes sc-fade { from { opacity: 0; } to { opacity: 1; } }
html[data-template="shuicai"] .detail > section:nth-of-type(1) { animation-delay: .04s; }
html[data-template="shuicai"] .detail > section:nth-of-type(2) { animation-delay: .08s; }
html[data-template="shuicai"] .detail > section:nth-of-type(3) { animation-delay: .12s; }
html[data-template="shuicai"] .detail > section:nth-of-type(4) { animation-delay: .16s; }
html[data-template="shuicai"] .detail > section:nth-of-type(5) { animation-delay: .19s; }
html[data-template="shuicai"] .detail > section:nth-of-type(6) { animation-delay: .22s; }
html[data-template="shuicai"] .detail > section:nth-of-type(7) { animation-delay: .25s; }
html[data-template="shuicai"] .detail > section:nth-of-type(n+8) { animation-delay: .28s; }
html[data-template="shuicai"] .detail .tab-panel:not([hidden]) { animation: sc-fade .22s ease-out; }
/* ---------- 响应式 ---------- */
@media (max-width: 1024px) {
html[data-template="shuicai"] .detail .related-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 860px) {
html[data-template="shuicai"] .detail .char-decompose { grid-template-columns: 1fr; }
html[data-template="shuicai"] .detail .related-grid { grid-template-columns: repeat(2, 1fr); }
html[data-template="shuicai"] .detail > section.card,
html[data-template="shuicai"] .detail .card { padding: 32px 28px 34px; }
}
@media (max-width: 640px) {
html[data-template="shuicai"] .header-inner { min-height: 58px; gap: 14px; }
html[data-template="shuicai"] .logo { font-size: 17px; letter-spacing: .1em; }
/* 基础样式在手机上整条藏掉导航，这里改成横滑，字距收窄才放得下 */
html[data-template="shuicai"] .nav {
display: flex; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none;
}
html[data-template="shuicai"] .nav::-webkit-scrollbar { display: none; }
html[data-template="shuicai"] .nav a { flex: 0 0 auto; padding: 4px 10px; font-size: 12.5px; letter-spacing: .04em; }
html[data-template="shuicai"] .search-box { padding-left: 9px; }
html[data-template="shuicai"] .search-box input { height: 28px; font-size: 12.5px; width: 96px; }
html[data-template="shuicai"] .search-box button { height: 28px; padding: 0 9px; font-size: 12px; }
html[data-template="shuicai"] .breadcrumb { padding-top: 18px; font-size: 11.5px; }
/* 标题区：留白收紧，远山压到 76% 高才不会在窄屏被拉成一条线 */
html[data-template="shuicai"] .detail > .detail-head { padding: 34px 8px 26px; }
/* 远山层在窄屏要收：108% 宽的那层按 920 的版面画的，直接套在 358px 上会只剩两条边 */
html[data-template="shuicai"] .detail::before { top: -4px; height: 205px; filter: blur(1.1px); }
html[data-template="shuicai"] .detail::after { top: -34px; height: 250px; }
html[data-template="shuicai"] .detail > .detail-head::after { right: 3%; top: 22px; width: 34px; height: 20px; }
html[data-template="shuicai"] .detail-head h1 { font-size: clamp(34px, 11.6vw, 52px); letter-spacing: .06em; margin-bottom: 4px; }
html[data-template="shuicai"] .detail-head .pinyin { font-size: 11px; letter-spacing: .22em; padding-top: 6px; }
/* 印章别拉成两列大长条：印章要有自己的宽度，排不下就居中折行 */
html[data-template="shuicai"] .detail > .tags {
display: flex; flex-wrap: wrap; justify-content: center;
gap: 8px; margin-bottom: 24px; padding: 0 8px;
}
html[data-template="shuicai"] .tag {
flex: 0 0 auto; min-width: 60px; padding: 5px 8px 6px;
}
html[data-template="shuicai"] .tag-label { font-size: 10px; letter-spacing: .1em; }
html[data-template="shuicai"] .tag-value { font-size: 13.5px; }
html[data-template="shuicai"] .grid-figure { margin-bottom: 22px; }
html[data-template="shuicai"] .detail > section.card,
html[data-template="shuicai"] .detail .card { padding: 26px 20px 28px; margin-bottom: 16px; }
html[data-template="shuicai"] .detail .card h2 { font-size: 20px; gap: 8px; margin-bottom: 20px; padding-bottom: 12px; }
html[data-template="shuicai"] .detail .card h2::before { width: 16px; height: 16px; }
html[data-template="shuicai"] .detail .explanation { font-size: 16.5px; line-height: 2.0; }
/* 窄屏首字下沉会吃掉两行半，改成首字标赭石 */
html[data-template="shuicai"] .detail .explanation::first-letter {
float: none; padding: 0 .18em 0 0; font-size: 1.15em; font-weight: 600;
}
html[data-template="shuicai"] .detail .field { grid-template-columns: 1fr; gap: 4px; padding: 13px 0; }
html[data-template="shuicai"] .detail .field dt { padding-top: 0; font-size: 12px; }
html[data-template="shuicai"] .detail .field dd { font-size: 15px; }
html[data-template="shuicai"] .detail .field dd.quote { font-size: 14.5px; padding-left: 13px; }
html[data-template="shuicai"] .detail .zju-list li { padding-left: 30px; font-size: 15px; }
html[data-template="shuicai"] .detail .story { font-size: 15.5px; }
html[data-template="shuicai"] .detail .syn-ant > strong { display: block; width: auto; margin-bottom: 7px; }
/* 字义：单列，字与义并排但字缩到 72px，释义才有行宽 */
html[data-template="shuicai"] .detail .char-item {
grid-template-columns: 76px minmax(0, 1fr); column-gap: 16px;
padding: 22px 18px 22px;
}
html[data-template="shuicai"] .detail .char-glyph { font-size: 70px; }
html[data-template="shuicai"] .detail .sn-text { font-size: 13.5px; }
/* 接龙竖排：箭头转 90 度，否则横着的笔锋会指到空白 */
html[data-template="shuicai"] .detail .jielong-chain {
flex-direction: column; align-items: flex-start;
padding: 14px 14px; row-gap: 0;
}
html[data-template="shuicai"] .detail .jielong-node { padding: 3px 8px 4px; }
html[data-template="shuicai"] .detail .jielong-arrow {
width: 13px; height: 26px; margin: 2px 0 2px 14px;
transform: rotate(90deg);
}
html[data-template="shuicai"] .detail .related-grid { gap: 11px; }
html[data-template="shuicai"] .detail .related-item { padding: 13px 13px 15px; }
html[data-template="shuicai"] .detail .related-item::before { width: 58px; height: 32px; }
html[data-template="shuicai"] .hero { padding: 40px 0 30px; }
html[data-template="shuicai"] .hero::after { display: none; }
html[data-template="shuicai"] .hero h1 { font-size: clamp(32px, 10.6vw, 44px); letter-spacing: .1em; }
html[data-template="shuicai"] .hero h1::after { width: 40px; margin-left: -20px; }
html[data-template="shuicai"] .hero-sub { margin-top: 20px; font-size: 12px; line-height: 2.0; letter-spacing: .06em; }
html[data-template="shuicai"] .hero-search { margin-top: 24px; flex-wrap: nowrap; gap: 7px; }
html[data-template="shuicai"] .hero-search input { height: 44px; font-size: 14.5px; padding: 0 12px; }
html[data-template="shuicai"] .hero-search button {
height: 44px; padding: 0 16px; font-size: 13px; letter-spacing: .1em;
flex: 0 0 auto; white-space: nowrap;
}
html[data-template="shuicai"] .card { padding: 24px 18px; }
html[data-template="shuicai"] .letters { grid-template-columns: repeat(auto-fill, minmax(60px, 1fr)); gap: 8px; }
}
/* ============================================================================
* 视觉模板：国潮插画风（html[data-template="guochao"]）
* ----------------------------------------------------------------------------
* 北极星：一张套印精良的国潮海报 —— 朱红作骨、鎏金作线、青绿作气。
*
* 和「水彩诗词」是两条相反的路：那边纸先于框，这边框先于纸。
* 那边靠浓度消失来退让，这边靠界线清楚来成立。
*
* 四条硬规则：
* 1. 朱红是结构色，不是点缀色。顶部导航、板块标题、印章标签三处用足；
* 但正文一律回到墨色 —— 满屏红字会把「典雅」读成「促销」。
* 2. 金只做线，不做面。0.5–1px 的金线负责「贵」；做成金色块面立刻变俗。
* 3. 所有框都画两层（外框 + 内细线），这是中式装裱的语法。单层边框会
* 退回成普通卡片，整套风格就塌了。
* 4. 圆角最大 3px。国潮是印出来的，不是吹塑出来的。
* ==========================================================================*/
html[data-template="guochao"] {
/* ---- 纸与墨 ---- */
--gc-paper: #F7F1E3; /* 温润米白，整页底 */
--gc-paper-2: #FFFDF7; /* 宣纸白，卡片面 */
--gc-ink: #24211E; /* 深墨正文 */
--gc-ink-2: #4C4740;
--gc-ink-3: #635C51; /* 小字，压在 #F7F1E3 上 6.3:1 */
--gc-line: #E4D8BF;
--gc-line-2: #CDBC9C;
/* ---- 朱红 ---- */
--gc-red: #B3252B; /* 朱砂：印章、标题 */
--gc-red-deep: #8C1A1F; /* 深朱红：导航条、页脚 */
--gc-red-ink: #A02026; /* 红字：正文里的小面积强调，7.0:1 */
--gc-red-soft: #F8E7E2;
/* ---- 鎏金（金只做线；要写字用 gold-ink） ---- */
--gc-gold: #B8901F;
--gc-gold-2: #D9B45A;
--gc-gold-ink: #7D5F0E; /* 金的小字版，5.5:1 */
--gc-gold-soft: #F4E9CE;
/* ---- 青绿 ---- */
--gc-jade: #1F6B5C;
--gc-jade-2: #2C8574;
--gc-jade-soft: #E6EFEA;
--gc-serif: "Source Han Serif SC", "Source Han Serif SC Heavy", "Noto Serif SC",
"Songti SC", "STSong", "SimSun", "Times New Roman", serif;
--gc-sans: "Source Han Sans SC", "Noto Sans SC", "PingFang SC",
"Microsoft YaHei", "Segoe UI", sans-serif;
/* ---- 接管基础变量 ---- */
--primary: #B3252B;
--primary-dark: #8C1A1F;
--primary-soft: #F8E7E2;
--ink: #24211E;
--ink-soft: #4C4740;
--ink-faint: #635C51;
--bg: #F7F1E3;
--card: #FFFDF7;
--border: #E4D8BF;
--gold: #B8901F;
--radius: 3px;
--shadow: 0 1px 2px rgba(90, 64, 32, .05);
--font-sans: var(--gc-sans);
--font-serif: var(--gc-serif);
}
/* ---------- 纸：四角极淡的朱/青晕，中间留白给字 ---------- */
html[data-template="guochao"] body {
background-color: var(--gc-paper);
background-image:
radial-gradient(760px 380px at 2% -8%, rgba(179, 37, 43, .06), transparent 62%),
radial-gradient(680px 360px at 98% -4%, rgba(31, 107, 92, .055), transparent 64%),
radial-gradient(900px 520px at 50% 106%, rgba(184, 144, 31, .05), transparent 70%);
background-attachment: fixed, fixed, fixed;
background-repeat: no-repeat;
color: var(--gc-ink);
font-family: var(--gc-sans);
line-height: 1.8;
}
/* 这一版的页脚是深红的，短页面（404、空搜索结果）下面会露出一大块纸色，
看着像页面断了。用一整列把页脚压到底。 */
html[data-template="guochao"] body {
display: flex; flex-direction: column; min-height: 100vh;
}
/* min-width:0 必须写：flex 子项的自动最小尺寸是 min-content，
田字格图版 364px 会把整个 main 撑到 364，320 屏上正文全被推出屏幕 */
html[data-template="guochao"] main { flex: 1 0 auto; min-width: 0; }
html[data-template="guochao"] a { color: var(--gc-ink); }
html[data-template="guochao"] a:hover { color: var(--gc-red-ink); }
/* ---------- 顶部：一条深朱红横梁，压一道金线 ---------- */
html[data-template="guochao"] .site-header {
background: linear-gradient(180deg, #9A2122 0%, #8C1A1F 62%, #7F1418 100%);
border-bottom: 0;
/* 外投影：梁是「架」在页面上的，不是贴在页面上 */
box-shadow: 0 3px 14px rgba(70, 16, 12, .18);
}
/* 梁下一条回纹织带：国潮的「梁枋」都有这么一道，页脚再重复一次，
首尾就扣上了。高度 8px，金线压在带上沿。 */
html[data-template="guochao"] .site-header::after {
content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 8px;
background: url("/public/img/tpl-gc-fret-dark.svg") repeat-x center / 18px 9px;
border-top: 1px solid rgba(226, 196, 128, .55);
opacity: .85; pointer-events: none;
}
html[data-template="guochao"] .header-inner { gap: 24px; min-height: 68px; }
html[data-template="guochao"] .logo {
font-family: var(--gc-serif); font-size: 21px; font-weight: 700;
letter-spacing: .22em; color: #FFF8EC;
background: none; padding: 0; border-radius: 0;
/* 深底上的字要一层极轻的暗影才立得住 */
text-shadow: 0 1px 2px rgba(60, 10, 10, .35);
}
html[data-template="guochao"] .logo:hover { color: #F3D793; }
/* 导航：金线竖向分隔，像匾额上分栏的字 */
html[data-template="guochao"] .nav { gap: 0; flex-wrap: wrap; }
html[data-template="guochao"] .nav a {
position: relative; padding: 5px 15px;
background: none; border: 0; border-radius: 0;
color: rgba(255, 248, 236, .86);
font-size: 14px; letter-spacing: .12em;
transition: color .18s, background .18s;
}
html[data-template="guochao"] .nav a + a { box-shadow: inset 1px 0 0 rgba(226, 196, 128, .26); }
html[data-template="guochao"] .nav a:hover {
background: rgba(255, 248, 236, .09); color: #F3D793;
}
/* 搜索框：做成镶在白木牌位上的一格，白底才在深红条上跳得出来 */
html[data-template="guochao"] .search-box {
align-items: center; gap: 0; max-width: 322px; padding: 0 0 0 13px;
background: #FFFDF7;
border: 1px solid rgba(226, 196, 128, .85); border-radius: 2px;
box-shadow: 0 1px 0 rgba(255, 255, 255, .3);
}
html[data-template="guochao"] .search-box input {
height: 32px; padding: 0 6px; background: none; border: 0;
border-radius: 0; font-size: 13.5px; color: var(--gc-ink);
}
html[data-template="guochao"] .search-box input::placeholder { color: var(--gc-ink-3); }
html[data-template="guochao"] .search-box input:focus { box-shadow: none; }
html[data-template="guochao"] .search-box button {
height: 32px; padding: 0 16px; border: 0; border-radius: 0;
background: var(--gc-red-deep); color: #FFF8EC;
font-size: 12.5px; letter-spacing: .16em; text-indent: .16em;
transition: background .18s;
}
html[data-template="guochao"] .search-box button:hover { background: var(--gc-red); }
html[data-template="guochao"] .suggest {
top: 38px; background: #FFFDF7;
border: 1px solid var(--gc-line-2); border-radius: 2px;
box-shadow: 0 8px 26px rgba(70, 16, 12, .14);
}
html[data-template="guochao"] .suggest a { border-bottom: 1px solid var(--gc-line); color: var(--gc-ink); }
html[data-template="guochao"] .suggest a:hover,
html[data-template="guochao"] .suggest a.active { background: var(--gc-red-soft); }
/* ---------- 面包屑 ---------- */
html[data-template="guochao"] .breadcrumb {
padding: 24px 0 0; font-size: 12px; letter-spacing: .08em; color: var(--gc-ink-3);
}
html[data-template="guochao"] .breadcrumb a { color: var(--gc-ink-3); }
html[data-template="guochao"] .breadcrumb a:hover { color: var(--gc-red-ink); }
html[data-template="guochao"] .breadcrumb li + li::before {
content: '›'; color: var(--gc-line-2); margin: 0 9px;
}
/* ---------- 标题区：淡墨山水压底，两侧各一朵祥云 ---------- */
html[data-template="guochao"] .detail { position: relative; max-width: 1000px; margin: 0 auto; }
html[data-template="guochao"] .detail::before {
content: ''; position: absolute; left: 50%; transform: translateX(-50%);
top: -34px; width: 100%; height: 340px;
/* 负层级：给 .detail 的子孙加 z-index 会造出新的 stacking context，
山影就压不到文字后面去了 */
z-index: -1; pointer-events: none;
background: url("/public/img/tpl-gc-scene.svg") center bottom / 100% 100% no-repeat;
/* 下沿必须羽化：山形是画到画布底边的，直接截断会留下一条笔直的水平边，
远看像底下垫了一块绿布 */
-webkit-mask-image: linear-gradient(180deg, #000 46%, transparent 96%);
mask-image: linear-gradient(180deg, #000 46%, transparent 96%);
opacity: .95;
}
html[data-template="guochao"] .detail > .detail-head {
position: relative; text-align: center;
margin: 0; padding: 56px 16px 30px;
background: none;
}
/* 标题两侧不再挂祥云：背景里的祥云已经承担了这件事，
再在版心边缘放两个小云头，读者只会看到两块抹不干净的金色。
对称装饰要么放大成对联，要么不做。 */
html[data-template="guochao"] .detail-head h1 {
position: relative; display: inline-block; margin: 0 0 4px;
font-family: var(--gc-serif);
/* 「书法感」不靠斜体（中文斜体一律丑），靠字重、字距与一点墨迹感的
暗影：右下压 1px 淡墨，像拓本上纸背透出来的那一层 */
font-size: clamp(54px, 7vw, 98px); font-weight: 700;
line-height: 1.14; letter-spacing: .09em; text-indent: .09em;
color: var(--gc-ink);
text-shadow: 0 1px 0 rgba(255, 253, 247, .95), 0 2px 0 rgba(58, 52, 44, .07);
overflow-wrap: anywhere;
animation: gc-rise .6s cubic-bezier(.22, .8, .24, 1) backwards;
}
html[data-template="guochao"] .detail-head .head-sub {
gap: 0; justify-content: center; margin-top: 6px;
}
html[data-template="guochao"] .detail-head .head-sub::before,
html[data-template="guochao"] .detail-head .head-sub::after { display: none; }
/* 拼音两侧各一道金短线：这是全页第一处金，等于给标题「落款」 */
html[data-template="guochao"] .detail-head .pinyin {
position: relative; display: inline-block;
padding: 4px 34px 0;
background: none; color: var(--gc-ink-3);
font-family: var(--gc-sans); font-size: 12.5px; font-weight: 400;
letter-spacing: .3em; text-transform: none;
}
html[data-template="guochao"] .detail-head .pinyin::before,
html[data-template="guochao"] .detail-head .pinyin::after {
content: ''; position: absolute; top: 50%; width: 24px; height: 1px;
background: var(--gc-gold); opacity: .62;
}
html[data-template="guochao"] .detail-head .pinyin::before { left: 0; }
html[data-template="guochao"] .detail-head .pinyin::after { right: 0; }
/* ---------- 属性标签：朱红方章 ---------- */
html[data-template="guochao"] .detail > .tags {
justify-content: center; flex-wrap: wrap;
gap: 10px; margin: 0 0 32px; padding: 0 16px;
background: none; border: 0;
}
html[data-template="guochao"] .tag {
/* 竖排两行才是印面；横排是胶囊，气质立刻变成 App */
display: inline-flex; flex-direction: column; align-items: center; gap: 1px;
/* 印面要近方：拉成长条就成了标签，不是章 */
min-width: 64px; padding: 7px 11px 8px;
background: var(--gc-red);
border: 0; border-radius: 1px;
/* 内金线 = 印面留白围边；没有这道线，红块就只是红块 */
box-shadow: inset 0 0 0 1px rgba(240, 215, 150, .68),
inset 0 0 0 3px rgba(255, 248, 236, .07),
0 1px 4px rgba(140, 26, 31, .22);
}
html[data-template="guochao"] .tag-label {
font-size: 10px; font-weight: 400; letter-spacing: .2em;
text-indent: .2em; /* 补掉末字后多出的字距，字才在印面正中 */
color: rgba(255, 248, 236, .9);
}
html[data-template="guochao"] .tag-value {
font-family: var(--gc-serif); font-size: 14.5px; font-weight: 600;
letter-spacing: .04em; line-height: 1.3; color: #FFF8EC;
}
/* ---------- 田字格：裱起来的一张图版 ---------- */
html[data-template="guochao"] .grid-figure { justify-content: center; margin: 12px 0 26px; }
html[data-template="guochao"] .grid-img {
/* 图版原始 520px，820 视口会压过标题；400 是「一页插图」的尺度 */
/* 上限 364，但永远不超过可用宽度：窄屏靠 100% 兜底 */
max-width: min(364px, 100%); height: auto;
border: 0; border-radius: 0; background: var(--gc-paper-2); padding: 5px;
/* 不用 multiply：这版的山影在标题区，白底会被乘成一片绿，
田字格看着像蒙了层脏膜。装裱好的图版本就该是不透明的。 */
/* 双层框：外框 1px 金，中间 4px 纸色，内细线 1px —— 装裱的语法 */
box-shadow: 0 0 0 1px rgba(184, 144, 31, .3),
0 0 0 4px var(--gc-paper-2),
0 0 0 5px rgba(184, 144, 31, .15);
}
/* ---------- 卡片：白宣 + 双层框 ---------- */
html[data-template="guochao"] .detail .card {
position: relative;
padding: 40px 42px 42px; margin-bottom: 24px;
background: var(--gc-paper-2);
border: 1px solid var(--gc-line); border-radius: 3px;
box-shadow: inset 0 0 0 4px var(--gc-paper-2),
inset 0 0 0 5px rgba(184, 144, 31, .2),
0 2px 12px rgba(90, 64, 32, .05);
animation: gc-rise .5s cubic-bezier(.22, .8, .24, 1) backwards;
}
html[data-template="guochao"] .detail .card.highlight {
background: #FBF4E4;
box-shadow: inset 0 0 0 4px #FBF4E4,
inset 0 0 0 5px rgba(184, 144, 31, .3),
0 2px 12px rgba(90, 64, 32, .05);
}
/* 释义卡的右下角压一道淡青绿山影：这是「边缘有山水纹样」的那一处，
只给释义卡，其它卡片保持干净 —— 每张都压就成了背景布 */
html[data-template="guochao"] .detail .card:has(.explanation)::after {
content: ''; position: absolute; right: 14px; bottom: 9px; width: 58%; height: 30px;
pointer-events: none; opacity: .75;
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 40' preserveAspectRatio='none'%3E%3Cpath d='M0 30 Q26 12 56 18 Q86 24 112 30 Q138 36 168 24 Q196 13 226 22 Q256 31 300 20 L300 40 L0 40 Z' fill='%231F6B5C' opacity='.2'/%3E%3Cpath d='M0 35 Q34 24 64 28 Q94 32 128 37 Q160 42 190 32 Q220 22 252 30 Q276 36 300 31 L300 40 L0 40 Z' fill='%23164F45' opacity='.14'/%3E%3C/svg%3E") center bottom / 100% 100% no-repeat;
-webkit-mask-image: linear-gradient(90deg, transparent, #000 22%, #000 100%);
mask-image: linear-gradient(90deg, transparent, #000 22%, #000 100%);
}
/* 板块标题：朱红字 + 金色细线 + 一枚回纹 */
html[data-template="guochao"] .detail .card h2 {
position: relative;
display: flex; align-items: center; gap: 10px;
margin: 0 0 26px; padding: 0 0 14px;
border-bottom: 1px solid var(--gc-line);
font-family: var(--gc-serif); font-size: 25px; font-weight: 700;
line-height: 1.35; letter-spacing: .06em; color: var(--gc-red-ink);
}
html[data-template="guochao"] .detail .card h2::before {
content: ''; flex: 0 0 auto;
width: 22px; height: 22px; margin-top: 1px;
/* 回纹取一个「口」字螺旋：比云纹在小尺寸下清楚得多 */
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 21 V3 H21 V15 H9 V9 H15' fill='none' stroke='%23B8901F' stroke-width='1.7' stroke-linecap='square'/%3E%3C/svg%3E") center / contain no-repeat;
}
/* 细线起点压一段实金，线才有「起笔」 */
html[data-template="guochao"] .detail .card h2::after {
content: ''; position: absolute; left: 0; bottom: -1px;
width: 48px; height: 2px;
background: linear-gradient(90deg, var(--gc-gold), var(--gc-gold-2));
}
/* ---------- 释义：朱砂红标重点，不加首字下沉 ---------- */
html[data-template="guochao"] .detail .explanation {
margin: 0; padding: 0; max-width: 36em;
background: none; border: 0; border-radius: 0; box-shadow: none;
font-size: 17.5px; line-height: 2.0; letter-spacing: .012em;
color: var(--gc-ink);
}
html[data-template="guochao"] .detail .explanation strong,
html[data-template="guochao"] .detail .story strong {
font-weight: 600; color: var(--gc-red-ink);
/* 朱砂底下垫一道极淡的红，是荧光笔的克制版 */
box-shadow: inset 0 -.32em 0 rgba(179, 37, 43, .12);
}
/* ---------- 字段列表 ---------- */
html[data-template="guochao"] .detail .fields { gap: 0; }
html[data-template="guochao"] .detail .field {
grid-template-columns: 84px 1fr; gap: 0 24px;
padding: 17px 0; border-top: 1px solid rgba(205, 188, 156, .55);
}
html[data-template="guochao"] .detail .field:first-child { border-top: 0; padding-top: 0; }
html[data-template="guochao"] .detail .field dt {
padding-top: 4px;
font-family: var(--gc-serif); font-size: 12.5px; font-weight: 400;
letter-spacing: .18em; color: var(--gc-gold-ink);
}
html[data-template="guochao"] .detail .field dd {
max-width: 38em; font-size: 16px; line-height: 1.9; color: var(--gc-ink);
}
/* 引文：左边一根金线，缩进一格，像抄在笺上的小注 */
html[data-template="guochao"] .detail .field dd.quote {
max-width: 34em; margin: 0; padding: 2px 0 2px 1.1em;
background: none; border: 0; border-left: 1px solid rgba(184, 144, 31, .45);
border-radius: 0;
font-family: var(--gc-serif); font-size: 15.5px; line-height: 1.95;
color: var(--gc-ink-2);
}
/* ---------- 造句 / 故事 ---------- */
html[data-template="guochao"] .detail .zju-list { list-style: none; counter-reset: gc-zju; }
html[data-template="guochao"] .detail .zju-list li {
counter-increment: gc-zju; position: relative;
max-width: 33em; padding: 0 0 0 34px; margin-bottom: 13px;
font-size: 16px; line-height: 1.9; color: var(--gc-ink);
}
html[data-template="guochao"] .detail .zju-list li:last-child { margin-bottom: 0; }
/* 序号做成小方章：朱红描边、方角，一格一格排下来像钤印 */
html[data-template="guochao"] .detail .zju-list li::before {
content: counter(gc-zju); position: absolute; left: 0; top: .28em;
width: 20px; height: 20px; line-height: 18px; text-align: center;
font-family: var(--gc-serif); font-size: 11px; color: var(--gc-red-ink);
border: 1px solid rgba(179, 37, 43, .38); border-radius: 2px;
background: rgba(179, 37, 43, .045);
}
html[data-template="guochao"] .detail .story {
max-width: 34em; font-size: 16.5px; line-height: 2.05; color: var(--gc-ink);
text-indent: 2em;
}
/* ---------- 近义词 / 反义词 ---------- */
html[data-template="guochao"] .detail .syn-ant { margin-bottom: 16px; }
html[data-template="guochao"] .detail .syn-ant:last-child { margin-bottom: 0; }
html[data-template="guochao"] .detail .syn-ant > strong {
width: 74px; font-family: var(--gc-serif); font-size: 12.5px; font-weight: 400;
letter-spacing: .14em; color: var(--gc-ink-3); vertical-align: middle;
}
html[data-template="guochao"] .detail .chip,
html[data-template="guochao"] .chip {
padding: 4px 13px; background: var(--gc-paper-2);
color: var(--gc-ink); border: 1px solid var(--gc-line-2); border-radius: 2px;
font-size: 14px; font-weight: 400; letter-spacing: .03em;
transition: background .18s, color .18s, border-color .18s;
}
html[data-template="guochao"] a.chip:hover,
html[data-template="guochao"] .detail a.chip:hover {
background: var(--gc-red-soft); color: var(--gc-red-ink);
border-color: rgba(179, 37, 43, .4);
}
html[data-template="guochao"] .chip.plain { color: var(--gc-ink-3); background: none; }
/* ---------- 趣味延伸 ---------- */
html[data-template="guochao"] .detail .highlight p {
font-size: 15.5px; line-height: 1.95; color: var(--gc-ink-2);
}
html[data-template="guochao"] .detail .gold {
margin-right: 9px; padding: 0;
color: var(--gc-gold-ink); font-family: var(--gc-serif);
font-size: 12.5px; font-weight: 600; letter-spacing: .12em;
background: none; vertical-align: 1px;
}
html[data-template="guochao"] .detail .xhy-list li {
font-size: 15.5px; line-height: 1.95; color: var(--gc-ink-2);
}
html[data-template="guochao"] .detail .xhy-list li::before { color: var(--gc-gold); }
/* ---------- 字义分解：四张笺纸，四种角花 ---------- */
/* 两列两行。四列并排时释义每行只剩六七个字，字再大也读不动。 */
html[data-template="guochao"] .detail .char-decompose {
grid-template-columns: repeat(2, 1fr);
gap: 20px;
/* 四张纸等高：纸有底色，纸外的空白读作「没排满」 */
align-items: stretch;
}
html[data-template="guochao"] .detail .char-item {
position: relative; overflow: hidden; display: grid;
grid-template-columns: 104px minmax(0, 1fr);
column-gap: 22px; row-gap: 0; align-items: start;
padding: 28px 26px 26px;
border: 1px solid var(--gc-line); border-radius: 2px;
box-shadow: none;
}
/* 内细线用真边框画，不用 inset 阴影：卡片是带色的笺纸，
阴影那圈「纸色」是写死的白，会在四边留出一道白环 */
html[data-template="guochao"] .detail .char-item::after {
content: ''; position: absolute; inset: 4px;
border: 1px solid rgba(184, 144, 31, .16); border-radius: 1px;
pointer-events: none;
}
/* 角花：四张各一种纹样，40px、六成浓度 —— 是「印在纸角的一枚小章」，
不是插图，所以贴角、不居中 */
html[data-template="guochao"] .detail .char-item::before {
content: ''; position: absolute; right: 11px; top: 11px;
width: 42px; height: 42px; pointer-events: none; opacity: .62;
background-repeat: no-repeat; background-position: center; background-size: contain;
}
/* 一、云纹 · 朱：笺纸带一点胭脂底 */
html[data-template="guochao"] .detail .char-item:nth-child(4n+1) {
background: #FDF3F0; border-color: rgba(179, 37, 43, .24);
}
html[data-template="guochao"] .detail .char-item:nth-child(4n+1)::after { border-color: rgba(179, 37, 43, .14); }
html[data-template="guochao"] .detail .char-item:nth-child(4n+1)::before {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 44'%3E%3Cpath d='M42 7 C33 7 26 11 22 18 C18 25 19 32 24 36' fill='none' stroke='%23B3252B' stroke-width='1.4' stroke-linecap='round'/%3E%3Cpath d='M42 15 C35 15 30 18 27 23 C24 28 25 33 29 36' fill='none' stroke='%23B3252B' stroke-width='1.1' stroke-linecap='round' opacity='.7'/%3E%3Ccircle cx='34' cy='9' r='3.4' fill='none' stroke='%23B3252B' stroke-width='1.1' opacity='.65'/%3E%3C/svg%3E");
}
/* 二、回纹 · 青绿 */
html[data-template="guochao"] .detail .char-item:nth-child(4n+2) {
background: #F2F7F4; border-color: rgba(31, 107, 92, .26);
}
html[data-template="guochao"] .detail .char-item:nth-child(4n+2)::after { border-color: rgba(31, 107, 92, .15); }
html[data-template="guochao"] .detail .char-item:nth-child(4n+2)::before {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 44'%3E%3Cpath d='M42 5 H5 V42 H34 V13 H15 V29 H24' fill='none' stroke='%231F6B5C' stroke-width='1.4' stroke-linecap='square'/%3E%3C/svg%3E");
}
/* 三、钱纹 · 金 */
html[data-template="guochao"] .detail .char-item:nth-child(4n+3) {
background: #FBF5E4; border-color: rgba(184, 144, 31, .34);
}
html[data-template="guochao"] .detail .char-item:nth-child(4n+3)::after { border-color: rgba(184, 144, 31, .2); }
html[data-template="guochao"] .detail .char-item:nth-child(4n+3)::before {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 44'%3E%3Ccircle cx='31' cy='13' r='9.5' fill='none' stroke='%23B8901F' stroke-width='1.4'/%3E%3Crect x='27.2' y='9.2' width='7.6' height='7.6' fill='none' stroke='%23B8901F' stroke-width='1.2'/%3E%3Cpath d='M42 34 C36 34 31 38 31 42' fill='none' stroke='%23B8901F' stroke-width='1' opacity='.5'/%3E%3C/svg%3E");
}
/* 四、如意纹 · 墨 */
html[data-template="guochao"] .detail .char-item:nth-child(4n) {
background: #F5F4F0; border-color: rgba(76, 71, 64, .22);
}
html[data-template="guochao"] .detail .char-item:nth-child(4n)::after { border-color: rgba(76, 71, 64, .13); }
html[data-template="guochao"] .detail .char-item:nth-child(4n)::before {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 44'%3E%3Cpath d='M42 9 C35 9 30 14 30 20 C30 25 33 28 37 28 C40 28 42 25.6 42 22 C42 18.6 39.4 16.4 36.6 17.4' fill='none' stroke='%234C4740' stroke-width='1.4' stroke-linecap='round'/%3E%3Cpath d='M42 3 C33 3 24 11 24 21' fill='none' stroke='%234C4740' stroke-width='1' opacity='.55'/%3E%3C/svg%3E");
}
html[data-template="guochao"] .detail .char-glyph {
width: auto; height: auto; align-self: start; display: block;
padding: 0; margin-top: -6px;
font-family: var(--gc-serif); font-size: 92px; font-weight: 700;
line-height: 1.05; letter-spacing: 0; text-align: center;
color: var(--gc-ink); background: none; border: 0; border-radius: 0;
}
html[data-template="guochao"] .detail .char-glyph a { color: var(--gc-ink); }
html[data-template="guochao"] .detail .char-glyph a:hover { color: var(--gc-red-ink); }
html[data-template="guochao"] .detail .char-meta { padding-top: 2px; min-width: 0; }
html[data-template="guochao"] .detail .char-pron {
margin-bottom: 10px; font-size: 12px; letter-spacing: .06em;
line-height: 1.8; color: var(--gc-ink-3);
}
html[data-template="guochao"] .detail .char-extra { gap: 6px; margin-bottom: 10px; }
html[data-template="guochao"] .detail .char-extra-item {
padding: 0 7px; background: var(--gc-gold-soft);
border: 1px solid rgba(184, 144, 31, .3); border-radius: 2px;
font-size: 11px; line-height: 1.7; letter-spacing: .04em; color: var(--gc-gold-ink);
}
html[data-template="guochao"] .detail .char-extra-sep { color: var(--gc-line-2); }
html[data-template="guochao"] .detail .char-shape {
margin-bottom: 0; font-size: 13px; line-height: 1.8; color: var(--gc-ink-3);
}
html[data-template="guochao"] .detail .char-senses {
gap: 10px; margin-top: 13px; padding-top: 13px;
border-top: 1px solid rgba(184, 144, 31, .2);
}
html[data-template="guochao"] .detail .sn-num {
font-family: var(--gc-serif); font-size: 13px; font-weight: 400;
line-height: 1.8; color: var(--gc-red-ink);
}
html[data-template="guochao"] .detail .sn-title {
font-size: 14.5px; font-weight: 600; color: var(--gc-ink);
}
html[data-template="guochao"] .detail .sn-text {
margin-top: 3px; font-size: 13.5px; line-height: 1.85; color: var(--gc-ink-2);
}
html[data-template="guochao"] .detail .expand-sense {
align-self: flex-start; margin-top: 14px; padding: 4px 14px 5px;
background: none; border: 1px solid rgba(184, 144, 31, .45); border-radius: 2px;
color: var(--gc-gold-ink); font-size: 12px; letter-spacing: .08em;
transition: background .18s, color .18s, border-color .18s;
}
html[data-template="guochao"] .detail .expand-sense:hover {
background: var(--gc-gold-soft); color: var(--gc-red-ink);
border-color: rgba(179, 37, 43, .38);
}
/* ---------- 接龙：一段横卷，两头有轴 ---------- */
html[data-template="guochao"] .detail .tabs {
gap: 28px; margin-bottom: 20px;
border-bottom: 1px solid var(--gc-line);
}
html[data-template="guochao"] .detail .tab {
padding: 0 0 11px; margin-bottom: -1px;
background: none; border: 0; border-bottom: 2px solid transparent; border-radius: 0;
color: var(--gc-ink-3); font-family: var(--gc-serif);
font-size: 14px; font-weight: 400; letter-spacing: .08em;
transition: color .18s, border-color .18s;
}
html[data-template="guochao"] .detail .tab:hover { color: var(--gc-red-ink); }
html[data-template="guochao"] .detail .tab.active {
color: var(--gc-red-ink); font-weight: 600; border-bottom-color: var(--gc-red);
}
/* 卷身：浅金纸，上下各一道金线 */
html[data-template="guochao"] .detail .jielong-chain {
position: relative;
gap: 6px; row-gap: 10px; align-items: flex-start;
margin-bottom: 18px; padding: 16px 26px;
background: linear-gradient(180deg, #FFFAEE 0%, #FDF4E2 56%, #FBF0D6 100%);
border-top: 1px solid rgba(184, 144, 31, .38);
border-bottom: 1px solid rgba(184, 144, 31, .3);
border-radius: 0;
}
/* 两头的轴：一根带高光的金木轴，卷才「卷」得起来 */
html[data-template="guochao"] .detail .jielong-chain::before,
html[data-template="guochao"] .detail .jielong-chain::after {
content: ''; position: absolute; top: -1px; bottom: -1px; width: 10px;
background: linear-gradient(90deg, #A87E2C 0%, #E3C67F 42%, #B08B33 100%);
box-shadow: inset 0 0 0 1px rgba(120, 88, 26, .35);
}
html[data-template="guochao"] .detail .jielong-chain::before { left: -1px; border-radius: 2px 0 0 2px; }
html[data-template="guochao"] .detail .jielong-chain::after { right: -1px; border-radius: 0 2px 2px 0; }
html[data-template="guochao"] .detail .jielong-node {
display: flex; flex-direction: column; align-items: flex-start; gap: 1px;
min-width: 0; padding: 4px 10px 5px;
background: none; border: 1px solid transparent; border-radius: 2px;
box-shadow: none; transform: none;
transition: background .18s, border-color .18s, color .18s;
}
html[data-template="guochao"] .detail .jielong-node .jw {
font-family: var(--gc-serif); font-size: 16.5px; font-weight: 600;
letter-spacing: .06em; color: var(--gc-ink);
}
html[data-template="guochao"] .detail .jielong-node .jp {
font-size: 10.5px; letter-spacing: .04em; color: var(--gc-ink-3);
}
html[data-template="guochao"] .detail .jielong-node:hover {
background: rgba(255, 253, 247, .9);
border-color: rgba(184, 144, 31, .45);
box-shadow: none; transform: none;
}
html[data-template="guochao"] .detail .jielong-node:hover .jw { color: var(--gc-gold-ink); }
/* 当前词：卷面上贴的一张小白笺 */
html[data-template="guochao"] .detail .jielong-node.current {
background: #FFFDF7;
border-color: rgba(179, 37, 43, .3);
box-shadow: 0 1px 4px rgba(120, 88, 26, .16);
}
html[data-template="guochao"] .detail .jielong-node.current .jw { color: var(--gc-red-ink); }
/* 箭头：一道金线带小尖，不用「→」的字形 */
html[data-template="guochao"] .detail .jielong-arrow {
flex: 0 0 auto; align-self: center;
width: 26px; height: 12px; margin: 0 2px;
font-size: 0; line-height: 0; color: transparent;
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 14'%3E%3Cpath d='M2 7 H23' stroke='%23B8901F' stroke-width='1.1' stroke-linecap='round'/%3E%3Cpath d='M18.4 3.2 L23.4 7 L18.4 10.8' fill='none' stroke='%23B8901F' stroke-width='1.1' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}
html[data-template="guochao"] .detail .btn-regen {
margin-top: 2px; padding: 8px 20px;
background: none; border: 1px solid rgba(184, 144, 31, .5); border-radius: 2px;
color: var(--gc-gold-ink); font-family: var(--gc-serif);
font-size: 13px; letter-spacing: .1em;
transition: background .18s, color .18s, border-color .18s;
}
html[data-template="guochao"] .detail .btn-regen:hover {
background: var(--gc-gold-soft); color: var(--gc-red-ink);
border-color: rgba(179, 37, 43, .38);
}
html[data-template="guochao"] .detail .btn-regen:active { background: rgba(184, 144, 31, .22); color: var(--gc-red-ink); }
html[data-template="guochao"] .detail .btn-regen:disabled { opacity: .5; }
/* ---------- 相关成语：国风卡片，拼音做成小印 ---------- */
html[data-template="guochao"] .detail .related-grid {
grid-template-columns: repeat(4, 1fr); gap: 14px;
}
html[data-template="guochao"] .detail .related-item {
position: relative; overflow: hidden;
display: flex; flex-direction: column; gap: 6px;
padding: 16px 16px 17px;
background: var(--gc-paper-2);
border: 1px solid var(--gc-line); border-radius: 2px;
box-shadow: inset 0 2px 0 -1px rgba(184, 144, 31, .3);
transition: background .2s, border-color .2s, box-shadow .2s;
}
/* 右上角一枚朱红小章：带一个「成」字才像钤印。
只画一个空红方块，读者会当成关闭按钮 */
html[data-template="guochao"] .detail .related-item::after {
content: '成'; position: absolute; right: 9px; top: 8px;
width: 17px; height: 17px; line-height: 17px; text-align: center;
font-family: var(--gc-serif); font-size: 10px; color: #FFF8EC;
background: var(--gc-red); border-radius: 1px;
box-shadow: inset 0 0 0 1px rgba(240, 215, 150, .55);
opacity: .88; pointer-events: none;
}
html[data-template="guochao"] .detail .related-item:hover {
border-color: rgba(184, 144, 31, .6);
box-shadow: inset 0 2px 0 -1px rgba(184, 144, 31, .6), 0 3px 10px rgba(90, 64, 32, .07);
transform: none;
}
html[data-template="guochao"] .detail .related-item .rw {
position: relative; z-index: 1;
font-family: var(--gc-serif); font-size: 17px; font-weight: 600;
letter-spacing: .05em; color: var(--gc-ink);
}
html[data-template="guochao"] .detail .related-item .rp {
position: relative; z-index: 1; align-self: flex-start;
padding: 1px 7px 2px; margin-top: 1px;
background: rgba(179, 37, 43, .05);
border: 1px solid rgba(179, 37, 43, .28); border-radius: 2px;
font-size: 11px; line-height: 1.6; letter-spacing: .02em; color: var(--gc-red-ink);
}
html[data-template="guochao"] .detail .related-item small {
position: relative; z-index: 1;
font-size: 11.5px; line-height: 1.7; color: var(--gc-ink-3);
}
html[data-template="guochao"] .detail .related-item:hover .rw { color: var(--gc-red-ink); }
/* ---------- 所属标签 ---------- */
html[data-template="guochao"] .detail .tags-of-idiom .chip {
padding: 5px 14px; font-size: 13.5px;
}
/* ---------- 列表页（搜索 / 拼音 / 标签） ---------- */
html[data-template="guochao"] .list-desc {
max-width: 44em; font-size: 14.5px; line-height: 1.95; color: var(--gc-ink-2);
}
html[data-template="guochao"] .list-desc a {
color: var(--gc-red-ink); box-shadow: inset 0 -1px 0 rgba(179, 37, 43, .4);
}
html[data-template="guochao"] .result-list {
background: var(--gc-paper-2);
border: 1px solid var(--gc-line); border-radius: 3px;
box-shadow: inset 0 0 0 4px var(--gc-paper-2), inset 0 0 0 5px rgba(184, 144, 31, .18);
}
html[data-template="guochao"] .result-item {
padding: 16px 22px; gap: 4px 12px;
border-bottom: 1px solid rgba(205, 188, 156, .6);
}
html[data-template="guochao"] .result-item:last-child { border-bottom: 0; }
html[data-template="guochao"] .result-item .rw {
font-family: var(--gc-serif); font-size: 18px; font-weight: 600;
letter-spacing: .06em; color: var(--gc-ink);
}
html[data-template="guochao"] .result-item .rp {
font-size: 12px; letter-spacing: .08em; color: var(--gc-ink-3);
}
html[data-template="guochao"] .result-item .re {
flex: 1 1 100%; font-size: 13.5px; line-height: 1.8; color: var(--gc-ink-2);
}
html[data-template="guochao"] .result-item:hover { background: rgba(179, 37, 43, .035); }
html[data-template="guochao"] .result-item:hover .rw { color: var(--gc-red-ink); }
/* ---------- 字典页 / 词语页：同一套语法，只补差异 ---------- */
html[data-template="guochao"] .detail .sub-h {
margin: 24px 0 12px; padding: 0 0 8px;
/* 基础样式是 3px 彩色左边线，在宣纸上像一条便利贴，改成金线压底 */
border-left: 0; border-bottom: 1px solid var(--gc-line);
font-family: var(--gc-serif); font-size: 16px; font-weight: 600;
letter-spacing: .1em; color: var(--gc-red-ink);
}
html[data-template="guochao"] .detail .sense-body,
html[data-template="guochao"] .detail .sense-line,
html[data-template="guochao"] .detail .classic p {
max-width: 42em;
font-size: 15px; line-height: 1.95; color: var(--gc-ink);
}
html[data-template="guochao"] .detail .classic p { color: var(--gc-ink-2); }
html[data-template="guochao"] .detail .sense-line.sense-attr {
padding-left: 24px; font-size: 14px; color: var(--gc-ink-2);
}
html[data-template="guochao"] .detail .attr-tag {
color: var(--gc-red-ink); font-family: var(--gc-serif);
font-size: 11.5px; font-weight: 400; line-height: 2.05;
}
html[data-template="guochao"] .detail .sense-detail {
border-bottom: 1px solid rgba(205, 188, 156, .5);
}
html[data-template="guochao"] .detail .sense-detail:last-child { border-bottom: 0; }
/* ---------- 404 ---------- */
html[data-template="guochao"] .not-found { padding: 62px 16px 44px; text-align: center; }
html[data-template="guochao"] .not-found h1 {
margin: 0 0 14px; line-height: 1;
font-family: var(--gc-serif); font-size: clamp(64px, 8.4vw, 104px);
font-weight: 700; letter-spacing: .12em; text-indent: .12em;
/* 深朱红，不描金：描金的数字会变成「节日大促」 */
color: var(--gc-red-deep);
}
html[data-template="guochao"] .not-found p {
font-size: 14.5px; letter-spacing: .06em; color: var(--gc-ink-2);
}
html[data-template="guochao"] .not-found .hero-search { max-width: 460px; margin: 26px auto 0; }
html[data-template="guochao"] .not-found .back { margin-top: 22px; }
html[data-template="guochao"] .not-found .back a {
color: var(--gc-gold-ink); font-size: 13px; letter-spacing: .08em;
}
/* ---------- 页脚：把导航条在底部再收一次 ---------- */
html[data-template="guochao"] .site-footer {
position: relative;
margin-top: 58px; padding: 40px 0 42px;
background: linear-gradient(180deg, #8C1A1F 0%, #7B1216 100%);
border-top: 0; color: rgba(255, 248, 236, .82);
font-size: 12.5px; letter-spacing: .06em;
}
/* 顶边一条回纹织带：页脚是「卷轴的下轴」，得有个包边 */
html[data-template="guochao"] .site-footer::before {
content: ''; position: absolute; left: 0; right: 0; top: 0; height: 9px;
background: url("/public/img/tpl-gc-fret-dark.svg") repeat-x center / 20px 10px;
opacity: .8;
}
html[data-template="guochao"] .footer-inner {
align-items: center; justify-content: center;
padding: 0 16px; text-align: center; gap: 12px;
}
html[data-template="guochao"] .copyright { color: rgba(255, 248, 236, .72); font-size: 12.5px; }
html[data-template="guochao"] .footer-nav { justify-content: center; gap: 18px; }
html[data-template="guochao"] .footer-nav a { color: rgba(255, 248, 236, .86); font-size: 13px; }
html[data-template="guochao"] .footer-nav a:hover { color: #F3D793; }
html[data-template="guochao"] .footer-hub { color: rgba(255, 248, 236, .62); }
html[data-template="guochao"] .footer-hub a { color: rgba(255, 248, 236, .86); }
html[data-template="guochao"] .footer-hub a:hover { color: #F3D793; }
html[data-template="guochao"] .fh-label { color: rgba(255, 248, 236, .58); }
/* ---------- 首页：一块匾额 ---------- */
html[data-template="guochao"] .hero {
position: relative; text-align: center; padding: 76px 0 52px;
}
html[data-template="guochao"] .hero::before {
content: ''; position: absolute; left: 50%; transform: translateX(-50%);
top: -26px; width: 100%; height: 340px; z-index: -1; pointer-events: none;
background: url("/public/img/tpl-gc-scene.svg") center bottom / 100% 100% no-repeat;
/* 和详情页同样要羽化下沿，否则山会在搜索框上方切出一条直边 */
-webkit-mask-image: linear-gradient(180deg, #000 46%, transparent 96%);
mask-image: linear-gradient(180deg, #000 46%, transparent 96%);
opacity: .85;
}
html[data-template="guochao"] .hero h1 {
position: relative; display: inline-block; margin: 0 0 22px;
padding-bottom: 18px;
font-family: var(--gc-serif);
font-size: clamp(40px, 5.6vw, 72px); font-weight: 700;
line-height: 1.16; letter-spacing: .13em; text-indent: .13em;
/* 首页是「招牌」，用朱红；详情页是内容，回到墨色 */
color: var(--gc-red-deep);
background-image: linear-gradient(90deg, transparent, var(--gc-gold) 18%, var(--gc-gold) 82%, transparent);
background-repeat: no-repeat;
background-position: center bottom;
background-size: 100% 1px;
animation: gc-rise .62s cubic-bezier(.22, .8, .24, 1) backwards;
}
/* 首页标题不再挂祥云：背景里那两朵就在旁边，再贴一对就成了四朵，
而且左边会挤成一团。匾额感靠朱红大字 + 金线压底已经够了。 */
html[data-template="guochao"] .hero-sub {
max-width: 34em; margin: 0 auto; padding: 0;
font-size: 13px; line-height: 2.0; letter-spacing: .1em;
color: var(--gc-ink-3); text-align: center;
}
html[data-template="guochao"] .hero-sub strong { color: var(--gc-red-ink); font-weight: 600; }
html[data-template="guochao"] .hero-search {
width: 100%; max-width: 520px; margin: 30px auto 0;
gap: 8px; align-items: stretch;
background: none; border: 0; border-radius: 0; box-shadow: none;
}
html[data-template="guochao"] .hero-search input {
flex: 1; min-width: 0; height: 50px; padding: 0 16px;
background: var(--gc-paper-2);
border: 1px solid var(--gc-line-2); border-radius: 2px;
font-size: 15.5px; color: var(--gc-ink);
transition: border-color .18s, box-shadow .18s;
}
html[data-template="guochao"] .hero-search input::placeholder { color: var(--gc-ink-3); }
html[data-template="guochao"] .hero-search input:focus {
outline: 0; border-color: rgba(184, 144, 31, .75);
box-shadow: 0 0 0 3px rgba(184, 144, 31, .12);
}
/* 按钮是一方朱印：方角、米白字、内金线 */
html[data-template="guochao"] .hero-search button {
height: 50px; padding: 0 28px;
background: var(--gc-red); border: 0; border-radius: 2px;
color: #FFF8EC; font-family: var(--gc-serif);
font-size: 14px; font-weight: 600; letter-spacing: .2em; text-indent: .2em;
box-shadow: inset 0 0 0 1px rgba(233, 203, 133, .5);
transition: background .18s;
}
html[data-template="guochao"] .hero-search button:hover { background: var(--gc-red-deep); }
html[data-template="guochao"] .card {
padding: 32px 34px; margin-bottom: 18px;
background: var(--gc-paper-2);
border: 1px solid var(--gc-line); border-radius: 3px;
box-shadow: inset 0 0 0 4px var(--gc-paper-2),
inset 0 0 0 5px rgba(184, 144, 31, .18),
0 2px 10px rgba(90, 64, 32, .04);
}
html[data-template="guochao"] .card h2 {
position: relative; display: flex; align-items: center; gap: 9px;
margin-bottom: 20px; padding: 0 0 13px;
border-bottom: 1px solid var(--gc-line);
font-family: var(--gc-serif); font-size: 21px; font-weight: 700;
letter-spacing: .06em; color: var(--gc-red-ink);
}
html[data-template="guochao"] .card h2::before {
content: ''; flex: 0 0 auto; width: 18px; height: 18px;
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 21 V3 H21 V15 H9 V9 H15' fill='none' stroke='%23B8901F' stroke-width='1.7' stroke-linecap='square'/%3E%3C/svg%3E") center / contain no-repeat;
}
html[data-template="guochao"] .card h2::after {
left: 0; bottom: -1px; width: 42px; height: 2px; border-radius: 0;
background: linear-gradient(90deg, var(--gc-gold), var(--gc-gold-2));
}
html[data-template="guochao"] .muted {
max-width: 42em; font-size: 14.5px; line-height: 1.9; color: var(--gc-ink-2);
}
html[data-template="guochao"] .muted a { color: var(--gc-red-ink); }
/* 字母格：一格格金框小牌 */
html[data-template="guochao"] .letters { grid-template-columns: repeat(13, 1fr); gap: 9px; }
html[data-template="guochao"] .letter {
padding: 11px 4px; background: var(--gc-paper-2);
border: 1px solid var(--gc-line); border-radius: 2px;
color: var(--gc-ink); font-family: var(--gc-serif);
font-size: 17px; font-weight: 600; letter-spacing: .04em;
transition: background .18s, color .18s, border-color .18s;
}
html[data-template="guochao"] .letter small { color: var(--gc-ink-3); font-size: 10.5px; letter-spacing: 0; }
html[data-template="guochao"] .letter:hover {
background: var(--gc-red-soft); border-color: rgba(179, 37, 43, .38); color: var(--gc-red-ink);
}
html[data-template="guochao"] .letter:hover small { color: var(--gc-red-ink); }
html[data-template="guochao"] .letter.empty { color: var(--gc-line-2); }
html[data-template="guochao"] .letter.empty:hover {
background: var(--gc-paper-2); border-color: var(--gc-line); color: var(--gc-line-2);
}
/* 热门成语卡 */
html[data-template="guochao"] .hot-item {
position: relative; overflow: hidden; gap: 4px;
padding: 15px 15px 16px;
background: var(--gc-paper-2);
border: 1px solid var(--gc-line); border-radius: 2px;
box-shadow: inset 0 2px 0 -1px rgba(184, 144, 31, .3);
transition: background .2s, border-color .2s, box-shadow .2s;
}
html[data-template="guochao"] .hot-item:hover {
border-color: rgba(184, 144, 31, .6);
box-shadow: inset 0 2px 0 -1px rgba(184, 144, 31, .6), 0 3px 10px rgba(90, 64, 32, .06);
transform: none;
}
html[data-template="guochao"] .hot-word {
position: relative; z-index: 1;
font-family: var(--gc-serif); font-size: 18px; font-weight: 600;
letter-spacing: .06em; color: var(--gc-ink);
}
html[data-template="guochao"] .hot-pinyin {
position: relative; z-index: 1; margin-top: 0;
font-size: 11px; letter-spacing: .08em; color: var(--gc-ink-3);
}
html[data-template="guochao"] .hot-expl {
position: relative; z-index: 1; margin-top: 5px;
font-size: 13px; line-height: 1.75; color: var(--gc-ink-2);
}
html[data-template="guochao"] .hot-item:hover .hot-word { color: var(--gc-red-ink); }
/* 「换几种查法」：竖线隔开的文字组 */
html[data-template="guochao"] .chips:has(.chip-py) { gap: 0; row-gap: 14px; margin-top: 20px; }
html[data-template="guochao"] .chips { gap: 9px; }
html[data-template="guochao"] .chip-py {
display: inline-flex; flex-direction: column; align-items: flex-start; gap: 2px;
padding: 1px 18px; text-align: left;
background: none; border: 0; border-left: 1px solid var(--gc-line-2); border-radius: 0;
}
html[data-template="guochao"] .chip-py:first-child { padding-left: 0; border-left: 0; }
html[data-template="guochao"] .chip-py .cp-word {
font-family: var(--gc-serif); font-size: 15px; font-weight: 600; color: var(--gc-ink);
}
html[data-template="guochao"] .chip-py .cp-py { font-size: 11.5px; color: var(--gc-ink-3); letter-spacing: .03em; }
html[data-template="guochao"] a.chip-py:hover { background: none; }
html[data-template="guochao"] a.chip-py:hover .cp-word { color: var(--gc-red-ink); }
html[data-template="guochao"] .chip small { margin-left: 6px; font-size: 11px; color: var(--gc-ink-3); }
/* ---------- 动效：抬起来，不是飘进来 ---------- */
@keyframes gc-rise {
from { opacity: 0; transform: translateY(9px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes gc-fade { from { opacity: 0; } to { opacity: 1; } }
html[data-template="guochao"] .detail > section:nth-of-type(1) { animation-delay: .04s; }
html[data-template="guochao"] .detail > section:nth-of-type(2) { animation-delay: .08s; }
html[data-template="guochao"] .detail > section:nth-of-type(3) { animation-delay: .12s; }
html[data-template="guochao"] .detail > section:nth-of-type(4) { animation-delay: .16s; }
html[data-template="guochao"] .detail > section:nth-of-type(5) { animation-delay: .19s; }
html[data-template="guochao"] .detail > section:nth-of-type(6) { animation-delay: .22s; }
html[data-template="guochao"] .detail > section:nth-of-type(7) { animation-delay: .25s; }
html[data-template="guochao"] .detail > section:nth-of-type(n+8) { animation-delay: .28s; }
html[data-template="guochao"] .detail .tab-panel:not([hidden]) { animation: gc-fade .22s ease-out; }
/* ---------- 响应式 ---------- */
@media (max-width: 1024px) {
html[data-template="guochao"] .detail .related-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 860px) {
html[data-template="guochao"] .detail .char-decompose { grid-template-columns: 1fr; }
html[data-template="guochao"] .detail .related-grid { grid-template-columns: repeat(2, 1fr); }
html[data-template="guochao"] .detail .card { padding: 32px 26px 34px; }
}
@media (max-width: 640px) {
html[data-template="guochao"] .header-inner { min-height: 60px; gap: 14px; }
html[data-template="guochao"] .logo { font-size: 17px; letter-spacing: .12em; }
/* 基础样式在手机上整条藏掉导航，这里改成横滑，字距收窄才放得下 */
html[data-template="guochao"] .nav {
display: flex; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none;
}
html[data-template="guochao"] .nav::-webkit-scrollbar { display: none; }
html[data-template="guochao"] .nav a { flex: 0 0 auto; padding: 4px 10px; font-size: 12.5px; letter-spacing: .04em; }
html[data-template="guochao"] .nav a + a { box-shadow: none; }
html[data-template="guochao"] .search-box { padding-left: 9px; }
html[data-template="guochao"] .search-box input { height: 28px; font-size: 12.5px; width: 92px; }
html[data-template="guochao"] .search-box button { height: 28px; padding: 0 9px; font-size: 12px; letter-spacing: .06em; }
html[data-template="guochao"] .breadcrumb { padding-top: 16px; font-size: 11.5px; }
/* 山影在窄屏要压扁：按 1000 版心画的山形套到 358px 上只剩一条底边 */
html[data-template="guochao"] .detail::before { top: -8px; height: 210px; }
html[data-template="guochao"] .detail > .detail-head { padding: 32px 8px 22px; }
html[data-template="guochao"] .detail-head h1 {
font-size: clamp(34px, 11.4vw, 52px); letter-spacing: .05em; text-indent: .05em;
margin-bottom: 2px;
}
html[data-template="guochao"] .detail-head .pinyin { font-size: 11px; letter-spacing: .2em; padding: 4px 26px 0; }
html[data-template="guochao"] .detail-head .pinyin::before,
html[data-template="guochao"] .detail-head .pinyin::after { width: 16px; }
/* 印章保持自己的宽度，排不下就居中折行，别拉成两列大长条 */
html[data-template="guochao"] .detail > .tags {
display: flex; flex-wrap: wrap; justify-content: center;
gap: 8px; margin-bottom: 22px; padding: 0 8px;
}
html[data-template="guochao"] .tag { flex: 0 0 auto; min-width: 62px; padding: 5px 9px 6px; }
html[data-template="guochao"] .tag-label { font-size: 9.5px; letter-spacing: .12em; text-indent: .12em; }
html[data-template="guochao"] .tag-value { font-size: 13.5px; }
html[data-template="guochao"] .grid-figure { margin-bottom: 20px; }
html[data-template="guochao"] .detail .card { padding: 26px 18px 28px; margin-bottom: 16px; }
html[data-template="guochao"] .detail .card h2 { font-size: 20px; gap: 8px; margin-bottom: 20px; padding-bottom: 12px; }
html[data-template="guochao"] .detail .card h2::before { width: 16px; height: 16px; }
html[data-template="guochao"] .detail .card h2::after { width: 34px; }
html[data-template="guochao"] .detail .explanation { font-size: 16.5px; line-height: 1.95; }
/* 卡片内边距收到 28px 后，30px 高的山影会顶到最后一行字上；
窄屏把它压扁、再往下贴 */
html[data-template="guochao"] .detail .card:has(.explanation)::after { height: 18px; bottom: 5px; opacity: .6; }
html[data-template="guochao"] .detail .field { grid-template-columns: 1fr; gap: 4px; padding: 13px 0; }
html[data-template="guochao"] .detail .field dt { padding-top: 0; font-size: 12px; }
html[data-template="guochao"] .detail .field dd { font-size: 15px; }
html[data-template="guochao"] .detail .field dd.quote { font-size: 14.5px; padding-left: 13px; }
html[data-template="guochao"] .detail .zju-list li { padding-left: 30px; font-size: 15px; }
html[data-template="guochao"] .detail .story { font-size: 15.5px; }
html[data-template="guochao"] .detail .syn-ant > strong { display: block; width: auto; margin-bottom: 7px; }
/* 字义：字缩到 72px，右边才留得下整句 */
html[data-template="guochao"] .detail .char-item {
grid-template-columns: 78px minmax(0, 1fr); column-gap: 16px;
padding: 22px 18px 22px;
}
html[data-template="guochao"] .detail .char-glyph { font-size: 70px; }
html[data-template="guochao"] .detail .char-item::before { width: 32px; height: 32px; right: 5px; top: 5px; }
/* 接龙竖排：卷轴横过来，两头的轴改到上下 */
html[data-template="guochao"] .detail .jielong-chain {
flex-direction: column; align-items: flex-start;
padding: 18px 16px; row-gap: 0;
}
html[data-template="guochao"] .detail .jielong-chain::before,
html[data-template="guochao"] .detail .jielong-chain::after {
left: -1px; right: -1px; width: auto; height: 8px;
}
html[data-template="guochao"] .detail .jielong-chain::before { top: -1px; bottom: auto; border-radius: 2px 2px 0 0; }
html[data-template="guochao"] .detail .jielong-chain::after { top: auto; bottom: -1px; border-radius: 0 0 2px 2px; }
html[data-template="guochao"] .detail .jielong-node { padding: 3px 8px 4px; }
html[data-template="guochao"] .detail .jielong-arrow {
width: 12px; height: 24px; margin: 2px 0 2px 12px;
transform: rotate(90deg);
}
html[data-template="guochao"] .detail .related-grid { gap: 11px; }
html[data-template="guochao"] .detail .related-item { padding: 13px 13px 14px; }
html[data-template="guochao"] .hero { padding: 44px 0 32px; }
html[data-template="guochao"] .hero::before { top: -14px; height: 240px; }
html[data-template="guochao"] .hero h1 {
font-size: clamp(32px, 10.4vw, 44px); letter-spacing: .1em; text-indent: .1em;
margin-bottom: 18px; padding-bottom: 15px;
}
html[data-template="guochao"] .hero-sub { font-size: 12px; line-height: 1.95; letter-spacing: .06em; }
html[data-template="guochao"] .hero-search { margin-top: 24px; flex-wrap: nowrap; gap: 7px; }
html[data-template="guochao"] .hero-search input { height: 46px; font-size: 14.5px; padding: 0 12px; }
html[data-template="guochao"] .hero-search button {
height: 46px; padding: 0 16px; font-size: 13px; letter-spacing: .12em; text-indent: .12em;
flex: 0 0 auto; white-space: nowrap;
}
html[data-template="guochao"] .card { padding: 24px 18px; }
html[data-template="guochao"] .letters { grid-template-columns: repeat(auto-fill, minmax(60px, 1fr)); gap: 8px; }
html[data-template="guochao"] .site-footer { margin-top: 40px; padding: 34px 0 36px; }
}
/* ============================================================================
* 视觉模板：Y2K 千禧甜酷风（html[data-template="y2k"]）
* ----------------------------------------------------------------------------
* 北极星：2000 年前后的少女卧室桌面 —— 拉丝金属边框、糖果色塑料外壳、
* 半透明磨砂面板、贴纸式的虚线和小星星。
*
* 和前面几版的关系：国潮靠「界线清楚」，水彩靠「浓度消失」，这一版靠
* **材质**：金属靠高光，糖果靠渐变，玻璃靠半透明 + 模糊。
*
* 四条硬规则：
* 1. 金属只出现在「边」上，不出现「面」上。银色做 1px 描边和外发光，
* 整块银底会把页面压成灰色塑料壳。渐变必须是「浅-深-浅」三段，
* 中间那道深色才是金属的转折，两段渐变读起来只是脏。
* 2. 粉色不做正文色。--yk-pink-ink（#BE3468）只用在标签、字段名、强调词，
* 正文一律 #2B2C38 —— 粉字长读会糊成一片。
* 3. 圆角只有两档：超大（26–30px，卡片）和全圆（999px，按钮/标签/泡泡）。
* 中间那些 8/12px 的圆角会让整套退回成普通扁平卡片。
* 4. 本模板不加任何图片文件。金属、泡泡、星星、虚线全部由渐变和
* clip-path 画出来 —— 少三个 svg 就少三处「子目录部署要改绝对路径」。
*
* 字体：优先阿里普惠体（标题要的就是它那种「圆头粗身」）。这台机器 / 大多数
* 访客都不会预装，所以退了 MiSans / HarmonyOS Sans / 苹方 / 雅黑。想用真身：
* 把 AlibabaPuHuiTi-3-105-Heavy.woff2 与 -55-Regular.woff2 放进 /public/fonts/，
* 解开下面两行即可，不用改任何选择器。
*
* @font-face { font-family: "Alibaba PuHuiTi 3.0"; font-weight: 900;
* src: url("/public/fonts/AlibabaPuHuiTi-3-105-Heavy.woff2") format("woff2"); font-display: swap; }
* @font-face { font-family: "Alibaba PuHuiTi 3.0"; font-weight: 400;
* src: url("/public/fonts/AlibabaPuHuiTi-3-55-Regular.woff2") format("woff2"); font-display: swap; }
* ==========================================================================*/
html[data-template="y2k"] {
/* ---- 底色与字 ---- */
--yk-page: #F2F3F8; /* 浅灰白，整页底 */
--yk-page-2: #FAFAFD;
--yk-ink: #2B2C38; /* 正文，12.4:1 */
--yk-ink-2: #4C4E60; /* 7.1:1 */
--yk-ink-3: #6B6D80; /* 小字，压 #F2F3F8 上 4.6:1 */
/* ---- 金属银（只做描边与高光） ---- */
--yk-silver: #C6CFDC;
--yk-silver-2: #E7ECF3;
--yk-silver-3: #98A4B6;
--yk-chrome: linear-gradient(160deg, #F4F7FB 0%, #FFFFFF 20%, #CCD6E3 46%,
#FBFDFF 58%, #D8E0EA 80%, #FFFFFF 100%);
/* ---- 淡樱粉 ---- */
--yk-pink: #F7B8CE; /* 泡泡面 */
--yk-pink-2: #FFE3EE; /* 极浅底 */
--yk-pink-3: #F293B8; /* 实心按钮 */
--yk-pink-ink: #BE3468; /* 粉字，白底 5.4:1 */
--yk-pink-deep: #9B2551;
/* ---- 冰浅蓝 / 浅灰紫 / 米白（四张字义卡的底色） ---- */
--yk-blue: #BFDFF8;
--yk-blue-2: #E6F3FE;
--yk-lilac: #D8D1F0;
--yk-lilac-2: #F0EBFC;
--yk-cream: #FBF5EA;
/* ---- 普惠体：装了就用，没装退到系统里的「粗圆」 ---- */
--yk-font: "Alibaba PuHuiTi 3.0", "Alibaba PuHuiTi", "AlibabaPuHuiTi-3-85-Bold",
"MiSans", "HarmonyOS Sans SC", "PingFang SC", "Microsoft YaHei",
"Segoe UI", sans-serif;
/* ---- 接管基础变量 ---- */
--primary: #BE3468;
--primary-dark: #9B2551;
--primary-soft: #FFE6F0;
--ink: #2B2C38;
--ink-soft: #4C4E60;
--ink-faint: #6B6D80;
--bg: #F2F3F8;
--card: #FFFFFF;
--border: #DFE4EE;
--gold: #5F508F; /* 灰紫，小字仍读得清 */
--radius: 26px;
--shadow: 0 10px 28px rgba(122, 138, 168, .10);
--font-sans: var(--yk-font);
--font-serif: var(--yk-font);
}
/* ---------- 底：浅灰白 + 细点阵 + 三团柔光 ---------- */
html[data-template="y2k"] body {
background-color: var(--yk-page);
background-image:
radial-gradient(720px 420px at 6% -6%, rgba(255, 206, 226, .55), transparent 62%),
radial-gradient(680px 400px at 96% 2%, rgba(196, 226, 252, .55), transparent 64%),
radial-gradient(760px 520px at 50% 104%, rgba(216, 209, 240, .48), transparent 68%),
radial-gradient(rgba(163, 176, 199, .30) 1px, transparent 1.2px);
background-size: auto, auto, auto, 14px 14px;
background-attachment: fixed, fixed, fixed, fixed;
background-repeat: no-repeat, no-repeat, no-repeat, repeat;
color: var(--yk-ink);
font-family: var(--yk-font);
line-height: 1.8;
}
/* 页脚是深灰紫的，短页面（404、空搜索）下面会露出一大块浅底，
看着像页面断了。用一整列把页脚压到底。 */
html[data-template="y2k"] body {
display: flex; flex-direction: column; min-height: 100vh;
}
/* min-width:0 必须写：flex 子项的自动最小尺寸是 min-content，
田字格图版 364px 会把整个 main 撑到 364，320 屏上正文全被推出屏幕 */
html[data-template="y2k"] main { flex: 1 0 auto; min-width: 0; }
html[data-template="y2k"] a { color: var(--yk-pink-ink); }
html[data-template="y2k"] a:hover { color: var(--yk-pink-deep); }
html[data-template="y2k"] ::selection { background: rgba(247, 184, 206, .55); color: #2B2C38; }
/* ---------- 顶部：一块悬浮的半透粉玻璃，四周压细金属边 ---------- */
html[data-template="y2k"] .site-header {
top: 10px;
margin: 12px 16px 0;
border: 0;
border-radius: 22px;
background:
linear-gradient(180deg, rgba(255, 255, 255, .94) 0%, rgba(255, 236, 244, .78) 100%);
box-shadow:
0 0 0 1px rgba(188, 200, 220, .85),
0 0 0 2px rgba(255, 255, 255, .60),
inset 0 1px 0 #fff,
0 12px 30px rgba(126, 146, 180, .14);
-webkit-backdrop-filter: blur(14px) saturate(1.15);
backdrop-filter: blur(14px) saturate(1.15);
}
html[data-template="y2k"] .site-header .container { padding: 0 20px; }
html[data-template="y2k"] .header-inner { min-height: 66px; gap: 22px; }
/* 站点名：粗圆 + 一颗会发光的小糖豆 */
html[data-template="y2k"] .logo {
font-family: var(--yk-font);
font-size: 22px; font-weight: 900; letter-spacing: .04em;
color: var(--yk-ink);
padding: 0; border-radius: 0; background: none;
text-shadow: 0 1px 0 #fff, 0 2px 6px rgba(190, 160, 180, .35);
}
html[data-template="y2k"] .logo:hover { color: var(--yk-pink-deep); }
html[data-template="y2k"] .logo::before {
content: ''; display: inline-block;
width: 9px; height: 9px; margin-right: 8px; vertical-align: 2px;
border-radius: 50%;
background: linear-gradient(150deg, #FFD9E7 0%, #F58FB6 100%);
box-shadow: 0 0 0 1px rgba(255, 255, 255, .95), 0 0 9px rgba(245, 143, 182, .75);
}
/* 导航：一排小药丸 */
html[data-template="y2k"] .nav { gap: 6px; }
html[data-template="y2k"] .nav a {
padding: 6px 15px; border-radius: 999px;
color: #5A5C70; font-size: 14.5px; font-weight: 600; letter-spacing: .02em;
transition: color .18s, background .18s, box-shadow .18s;
}
html[data-template="y2k"] .nav a:hover {
color: var(--yk-pink-deep);
background: linear-gradient(180deg, #FFFFFF 0%, #FFE8F1 100%);
box-shadow: 0 0 0 1px rgba(226, 196, 214, .9), 0 3px 8px rgba(214, 160, 186, .22);
}
/* 搜索：两粒分开的胶囊，输入白、按钮糖粉 */
html[data-template="y2k"] .search-box {
gap: 8px; max-width: 366px; padding: 0;
background: none; border: 0; box-shadow: none;
}
html[data-template="y2k"] .search-box input {
height: 40px; padding: 0 16px;
border: 1px solid rgba(190, 202, 220, .95); border-radius: 999px;
background: #FFFDFE; font-size: 14px; color: var(--yk-ink);
box-shadow: inset 0 1px 3px rgba(150, 168, 196, .12);
transition: border-color .18s, box-shadow .18s;
}
html[data-template="y2k"] .search-box input::placeholder { color: var(--yk-ink-3); }
html[data-template="y2k"] .search-box input:focus {
border-color: var(--yk-pink-3);
box-shadow: 0 0 0 3px rgba(247, 184, 206, .38), inset 0 1px 2px rgba(150, 168, 196, .10);
}
html[data-template="y2k"] .search-box button {
height: 40px; padding: 0 22px; border: 0; border-radius: 999px;
background: linear-gradient(180deg, #FFCFE0 0%, #F293B8 100%);
color: #7A2148; font-size: 14px; font-weight: 800; letter-spacing: .04em;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .85), 0 4px 10px rgba(226, 140, 175, .32);
transition: filter .18s, transform .1s;
}
html[data-template="y2k"] .search-box button:hover { filter: brightness(1.04); background: linear-gradient(180deg, #FFCFE0 0%, #F293B8 100%); }
html[data-template="y2k"] .search-box button:active { transform: scale(.97); }
html[data-template="y2k"] .suggest {
top: 46px; border: 0; border-radius: 20px; background: #fff;
box-shadow: 0 0 0 1px rgba(190, 202, 220, .9), 0 16px 34px rgba(126, 146, 180, .20);
overflow: hidden;
}
html[data-template="y2k"] .suggest a { border-bottom: 1px dashed rgba(214, 222, 234, .9); color: var(--yk-ink); }
html[data-template="y2k"] .suggest a:hover,
html[data-template="y2k"] .suggest a.active { background: linear-gradient(90deg, #FFF1F7, #F3F9FF); color: var(--yk-pink-deep); }
html[data-template="y2k"] .suggest .s-pinyin { color: var(--yk-ink-3); }
/* ---------- 面包屑 ---------- */
html[data-template="y2k"] .breadcrumb { padding: 20px 0 2px; font-size: 12.5px; color: var(--yk-ink-3); }
html[data-template="y2k"] .breadcrumb li { color: var(--yk-ink-3); }
html[data-template="y2k"] .breadcrumb a { color: var(--yk-ink-2); }
html[data-template="y2k"] .breadcrumb a:hover { color: var(--yk-pink-ink); }
/* ---------- 标题区：一条虚线轨道 + 几颗泡泡，字压在中间 ---------- */
html[data-template="y2k"] .detail-head {
position: relative; isolation: isolate;
padding: 46px 0 20px;
}
/* 虚线椭圆轨道：只留上沿，下沿羽化掉，像标题背后的一面弧形灯环 */
html[data-template="y2k"] .detail-head::before {
content: ''; position: absolute; z-index: -1;
left: 50%; top: 8px; transform: translateX(-50%);
width: min(680px, 96%); height: 250px;
border: 1px dashed rgba(214, 166, 192, .48);
border-radius: 50%;
-webkit-mask-image: linear-gradient(180deg, #000 26%, transparent 94%);
mask-image: linear-gradient(180deg, #000 26%, transparent 94%);
pointer-events: none;
}
/* 泡泡群：四个大小不一的圆，金属高光在左上 */
html[data-template="y2k"] .detail-head::after {
content: ''; position: absolute; z-index: -1; inset: 0;
pointer-events: none;
background:
radial-gradient(circle at 16% 30%, rgba(255, 255, 255, .95) 0 11px, rgba(197, 228, 252, .85) 11px 24px, transparent 25px),
radial-gradient(circle at 84% 22%, rgba(255, 255, 255, .95) 0 7px, rgba(255, 222, 236, .9) 7px 17px, transparent 18px),
radial-gradient(circle at 78% 76%, rgba(255, 255, 255, .9) 0 5px, rgba(223, 214, 246, .85) 5px 13px, transparent 14px),
radial-gradient(circle at 22% 82%, rgba(255, 255, 255, .9) 0 4px, rgba(255, 226, 238, .8) 4px 10px, transparent 11px);
opacity: .8;
}
/* 标题：粗圆 + 银色外发光。外发光是「白-银-白」三层叠出来的，
单层灰影只会读成「字糊了」。 */
html[data-template="y2k"] .detail-head h1 {
font-family: var(--yk-font);
font-size: clamp(46px, 6.4vw, 82px);
font-weight: 900; letter-spacing: .06em; text-indent: .06em;
color: #2E2F3C; margin-bottom: 12px; line-height: 1.18;
text-shadow:
0 1px 0 #FFFFFF,
0 2px 0 #FFFFFF,
0 3px 0 rgba(186, 197, 214, .80),
0 5px 0 rgba(205, 214, 228, .55),
0 9px 16px rgba(120, 140, 175, .20),
0 0 34px rgba(255, 255, 255, .95),
0 0 46px rgba(247, 184, 206, .45);
}
html[data-template="y2k"] .detail-head .head-sub { gap: 12px; }
html[data-template="y2k"] .detail-head .pinyin {
display: inline-flex; align-items: center; gap: 8px;
padding: 4px 18px 5px; border-radius: 999px;
background: rgba(255, 255, 255, .78);
box-shadow: 0 0 0 1px rgba(206, 216, 230, .95), inset 0 1px 0 #fff;
font-size: 16px; letter-spacing: .22em; color: var(--yk-ink-2);
}
html[data-template="y2k"] .detail-head .pinyin::before,
html[data-template="y2k"] .detail-head .pinyin::after {
content: ''; width: 5px; height: 5px; border-radius: 50%; flex: none;
background: linear-gradient(150deg, #FFD9E7, #F293B8);
box-shadow: 0 0 6px rgba(242, 147, 184, .7);
}
html[data-template="y2k"] .pron-btn {
border: 1px solid rgba(190, 202, 220, .95);
background: linear-gradient(180deg, #FFFFFF, #F1F5FA);
color: var(--yk-pink-ink);
}
html[data-template="y2k"] .pron-btn:hover { background: var(--yk-pink-3); color: #fff; }
/* ---------- 属性标签：水滴形泡泡 ----------
* 药丸本体 + 左下角一颗小圆 = 吐出来的一个泡。小圆和本体同色同描边，
* 差 4px 叠在一起，才有「连着的一滴」的意思，离开本体就成散落的点。 */
html[data-template="y2k"] .tags { gap: 15px; padding: 24px 0 16px; }
html[data-template="y2k"] .tag {
position: relative;
padding: 8px 20px 9px; gap: 9px; border-radius: 999px;
background: linear-gradient(160deg, #FFFFFF 0%, #FFF7FA 46%, #FFE9F2 100%);
box-shadow:
0 0 0 1px rgba(190, 202, 220, .95),
inset 0 1px 0 #FFFFFF,
inset 0 -1px 2px rgba(226, 170, 196, .20),
0 6px 14px rgba(190, 160, 185, .16);
}
html[data-template="y2k"] .tag::after {
content: ''; position: absolute; left: 17px; bottom: -5px;
width: 9px; height: 9px; border-radius: 50%;
background: #FFE9F2;
box-shadow: 0 0 0 1px rgba(190, 202, 220, .95);
}
html[data-template="y2k"] .tag-label { color: #6F6478; font-size: 12px; letter-spacing: .02em; }
html[data-template="y2k"] .tag-value { color: #B9326A; font-size: 14.5px; font-weight: 800; }
/* ---------- 田字格：双层金属相框 ---------- */
html[data-template="y2k"] .grid-figure { margin: 6px 0 26px; padding: 0; }
html[data-template="y2k"] .grid-img {
max-width: min(364px, 100%);
border-radius: 20px; background: #fff;
box-shadow:
0 0 0 1px rgba(198, 207, 220, .95),
0 0 0 6px #FFFFFF,
0 0 0 7px rgba(214, 222, 234, .90),
0 16px 32px rgba(120, 140, 175, .12);
}
/* ---------- 卡片：超大圆角 + 细金属边 + 一道斜的镜面反光 ---------- */
html[data-template="y2k"] .card {
position: relative; isolation: isolate; overflow: hidden;
border-radius: 28px; padding: 30px 32px 32px; margin-bottom: 22px;
background: #FFFFFF;
box-shadow:
0 0 0 1px rgba(196, 206, 222, .85),
inset 0 1px 0 #FFFFFF,
0 14px 34px rgba(120, 140, 175, .10);
}
/* 镜面反光：两道极淡的斜带，压在最上层但不响应点击。
z-index:-1 之所以能看见，是因为 card 用了 isolation 建了层叠上下文 ——
负层永远画在自己的背景之上、正文之下。 */
html[data-template="y2k"] .card::before {
content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
background:
linear-gradient(112deg,
rgba(255, 255, 255, .95) 0%,
rgba(255, 255, 255, 0) 24%,
rgba(232, 241, 252, .55) 40%,
rgba(255, 255, 255, 0) 54%,
rgba(255, 236, 245, .40) 84%,
rgba(255, 255, 255, 0) 96%);
}
/* 板块标题：一颗小星 + 一条虚线，线尾压一个粉点 */
html[data-template="y2k"] .card h2 {
position: relative;
font-family: var(--yk-font);
font-size: 21px; font-weight: 900; letter-spacing: .02em;
color: var(--yk-ink);
padding: 0 0 14px 26px; margin-bottom: 22px; line-height: 1.45;
}
html[data-template="y2k"] .card h2::before {
content: ''; position: absolute; left: 0; top: 6px;
width: 13px; height: 13px;
background: linear-gradient(140deg, #FFD7E6 0%, #F095BC 100%);
clip-path: polygon(50% 0%, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0% 50%, 39% 39%);
}
html[data-template="y2k"] .card h2::after {
content: ''; position: absolute; left: 26px; right: 0; bottom: 0;
width: auto; height: 6px; border-radius: 0;
border-top: 1px dashed rgba(196, 208, 224, .95);
background: radial-gradient(circle, rgba(242, 167, 198, .95) 0 2.2px, transparent 2.6px) right center / 5px 5px no-repeat;
}
/* ---------- 释义：樱粉首行高亮 + 角上一团粉光 ---------- */
html[data-template="y2k"] .explanation {
font-size: 18px; line-height: 1.95; color: #33343F;
}
/* ::first-line 能给整行铺背景，这是不用改模板标记就能做「荧光笔划重点」的
唯一办法；浓度必须低（.62 的粉），再深一行就像被人用记号笔涂过 */
html[data-template="y2k"] .explanation::first-line {
background: linear-gradient(transparent 54%, rgba(255, 186, 212, .72) 54%);
}
html[data-template="y2k"] .detail .card:has(.explanation)::after {
content: ''; position: absolute; right: -40px; top: -50px;
width: 190px; height: 190px; border-radius: 50%;
background: radial-gradient(circle, rgba(255, 206, 226, .55), transparent 68%);
pointer-events: none;
}
html[data-template="y2k"] .detail .card:has(.explanation) .explanation { position: relative; }
/* ---------- 字段列表：每行一条虚线，字段名带一颗小糖豆 ---------- */
html[data-template="y2k"] .fields { gap: 0; }
html[data-template="y2k"] .field {
grid-template-columns: 76px minmax(0, 1fr); gap: 16px;
padding: 15px 0; border-top: 1px dashed rgba(214, 222, 234, .95);
}
html[data-template="y2k"] .field:first-child { border-top: 0; padding-top: 2px; }
html[data-template="y2k"] .field dt {
font-size: 13.5px; font-weight: 800; letter-spacing: .02em;
color: var(--yk-pink-ink); padding-top: 1px;
}
html[data-template="y2k"] .field dt::before {
content: ''; display: inline-block; width: 6px; height: 6px; margin-right: 7px;
border-radius: 50%; vertical-align: 2px;
background: linear-gradient(150deg, #FFD9E7, #F293B8);
}
html[data-template="y2k"] .field dd { font-size: 15.5px; line-height: 1.9; color: #33343F; }
html[data-template="y2k"] .field dd.quote {
padding: 11px 16px; border-radius: 16px;
background: linear-gradient(180deg, #FCF9FE 0%, #F6F2FC 100%);
border-left: 3px dashed var(--yk-lilac);
color: #3E4050;
}
/* ---------- 造句 ---------- */
html[data-template="y2k"] .zju-list { padding-left: 24px; gap: 11px; }
html[data-template="y2k"] .zju-list li { font-size: 15px; line-height: 1.9; color: #33343F; }
html[data-template="y2k"] .zju-list li::marker { color: var(--yk-pink-3); font-weight: 700; }
/* ---------- 故事 ---------- */
html[data-template="y2k"] .story { font-size: 15.5px; line-height: 1.95; color: #33343F; }
/* ---------- 近义 / 反义：装进泡泡 ---------- */
html[data-template="y2k"] .syn-ant { margin-bottom: 16px; }
html[data-template="y2k"] .syn-ant:last-child { margin-bottom: 0; }
html[data-template="y2k"] .syn-ant > strong {
width: auto; display: inline-block; margin-bottom: 10px;
padding: 2px 12px; border-radius: 999px;
background: var(--yk-pink-2); color: var(--yk-pink-ink);
font-size: 12.5px; font-weight: 800;
}
html[data-template="y2k"] .chips { gap: 9px; }
html[data-template="y2k"] .chip {
padding: 5px 15px; border-radius: 999px;
background: linear-gradient(180deg, #FFFFFF 0%, #FFF4F9 100%);
color: var(--yk-pink-ink); font-size: 14px; font-weight: 600;
box-shadow: 0 0 0 1px rgba(206, 214, 228, .95), 0 3px 8px rgba(190, 170, 195, .12);
transition: box-shadow .18s, transform .14s, color .18s;
}
html[data-template="y2k"] .chip:hover {
color: var(--yk-pink-deep); transform: translateY(-1px);
box-shadow: 0 0 0 1px rgba(242, 167, 198, .95), 0 6px 14px rgba(226, 150, 180, .22);
}
html[data-template="y2k"] .chip.plain {
background: #F7F9FC; color: var(--yk-ink-3);
box-shadow: 0 0 0 1px rgba(214, 222, 234, .95);
}
/* ---------- 趣味延伸：一块粉色磨砂板 ---------- */
html[data-template="y2k"] .highlight {
background:
linear-gradient(160deg, #FFF7FB 0%, #FDF6FF 52%, #F4F8FF 100%);
box-shadow:
0 0 0 1px rgba(226, 200, 218, .80),
inset 0 1px 0 #fff,
0 14px 30px rgba(190, 160, 190, .12);
}
html[data-template="y2k"] .highlight p { font-size: 15px; }
html[data-template="y2k"] .gold { color: var(--yk-pink-ink); }
html[data-template="y2k"] .xhy-list li::before { content: '✦'; color: var(--yk-pink-3); font-size: 11px; }
/* ---------- 字义分解：四张糖果色卡，单字居中放大 ---------- */
/* 三字成语只有三张卡，四列网格会留一个空格子，看着像排版漏了一张。
改用 flex 等分：几张就平分几份，四张时宽度与网格一致。 */
html[data-template="y2k"] .char-decompose { display: flex; flex-wrap: wrap; gap: 16px; align-items: stretch; }
html[data-template="y2k"] .char-decompose > .char-item { flex: 1 1 210px; min-width: 0; }
html[data-template="y2k"] .char-item {
position: relative; overflow: hidden;
align-items: center; text-align: left;
gap: 14px; padding: 24px 20px 26px;
border: 0; border-radius: 26px;
background: linear-gradient(180deg, #FFF4F8 0%, #FFE9F1 100%);
box-shadow:
0 0 0 1px rgba(255, 255, 255, .95),
0 0 0 2px rgba(228, 208, 224, .55),
0 10px 22px rgba(190, 160, 185, .12);
}
html[data-template="y2k"] .char-item:nth-child(4n+2) {
background: linear-gradient(180deg, #F3FAFF 0%, #E4F1FD 100%);
box-shadow: 0 0 0 1px rgba(255, 255, 255, .95), 0 0 0 2px rgba(196, 216, 236, .60), 0 10px 22px rgba(150, 180, 210, .12);
}
html[data-template="y2k"] .char-item:nth-child(4n+3) {
background: linear-gradient(180deg, #F8F4FF 0%, #EDE7FB 100%);
box-shadow: 0 0 0 1px rgba(255, 255, 255, .95), 0 0 0 2px rgba(212, 204, 236, .65), 0 10px 22px rgba(170, 160, 210, .12);
}
html[data-template="y2k"] .char-item:nth-child(4n+4) {
background: linear-gradient(180deg, #FEFBF5 0%, #F8F1E4 100%);
box-shadow: 0 0 0 1px rgba(255, 255, 255, .95), 0 0 0 2px rgba(232, 220, 198, .70), 0 10px 22px rgba(200, 180, 150, .12);
}
/* 边角的小圆圈：右上一个小虚线圈，左下一个小实心点 */
html[data-template="y2k"] .char-item::before {
content: ''; position: absolute; right: 13px; top: 13px;
width: 17px; height: 17px; border-radius: 50%;
border: 1.5px dashed rgba(255, 255, 255, .95);
box-shadow: 0 0 0 1px rgba(196, 186, 210, .38);
}
html[data-template="y2k"] .char-item::after {
content: ''; position: absolute; left: 12px; bottom: 12px;
width: 8px; height: 8px; border-radius: 50%;
background: rgba(255, 255, 255, .92);
box-shadow: 0 0 0 1px rgba(196, 186, 210, .35);
}
/* 单字：金属圆钮，字压在正中 */
html[data-template="y2k"] .char-glyph {
align-self: center;
width: 88px; height: 88px; border: 0; border-radius: 50%;
display: flex; align-items: center; justify-content: center;
font-family: var(--yk-font); font-size: 52px; font-weight: 900; color: #2B2C38;
background: linear-gradient(160deg, #FFFFFF 0%, #F7FAFD 52%, #E4EBF5 100%);
box-shadow:
inset 0 1px 0 #FFFFFF,
0 0 0 1px rgba(196, 207, 222, .95),
0 8px 16px rgba(140, 158, 190, .20);
text-shadow: 0 1px 0 #fff, 0 3px 6px rgba(150, 168, 196, .30);
}
html[data-template="y2k"] .char-glyph a { color: inherit; }
html[data-template="y2k"] .char-glyph a:hover { color: var(--yk-pink-deep); }
html[data-template="y2k"] .char-meta { width: 100%; }
html[data-template="y2k"] .char-pron { font-size: 12.5px; color: var(--yk-ink-3); line-height: 1.75; margin-bottom: 8px; }
html[data-template="y2k"] .char-extra { gap: 6px; margin-bottom: 8px; }
html[data-template="y2k"] .char-extra-item {
font-size: 11.5px; color: var(--yk-ink-2);
background: rgba(255, 255, 255, .78);
border: 1px solid rgba(255, 255, 255, .95); border-radius: 999px;
padding: 1px 9px; line-height: 1.7;
box-shadow: 0 0 0 1px rgba(214, 214, 228, .55);
}
html[data-template="y2k"] .char-extra-sep { display: none; }
html[data-template="y2k"] .char-shape { font-size: 12.5px; color: var(--yk-ink-3); margin-bottom: 8px; }
html[data-template="y2k"] .char-senses { gap: 9px; }
html[data-template="y2k"] .sn-num {
color: var(--yk-pink-ink); font-size: 14px; font-weight: 800;
}
html[data-template="y2k"] .sn-title { color: var(--yk-ink); font-size: 14.5px; font-weight: 800; }
html[data-template="y2k"] .sn-text { color: var(--yk-ink-2); font-size: 12.8px; line-height: 1.8; }
html[data-template="y2k"] .expand-sense {
align-self: center; margin-top: 10px; padding: 6px 18px;
font-size: 12.5px; font-weight: 700; color: var(--yk-pink-ink);
background: rgba(255, 255, 255, .85); border: 1px solid rgba(255, 255, 255, .95);
border-radius: 999px; cursor: pointer;
box-shadow: 0 0 0 1px rgba(214, 200, 214, .70), 0 3px 8px rgba(190, 160, 190, .14);
transition: background .15s, color .15s;
}
html[data-template="y2k"] .expand-sense:hover { background: #fff; color: var(--yk-pink-deep); }
html[data-template="y2k"] .expand-sense:active { background: var(--yk-pink-3); color: #fff; }
/* ---------- 接龙：一排椭圆糖钮，中间夹虚线的箭头 ---------- */
html[data-template="y2k"] .tabs {
gap: 10px; margin-bottom: 22px; border-bottom: 0;
}
html[data-template="y2k"] .tab {
padding: 8px 20px; border: 0; border-radius: 999px; margin-bottom: 0;
font-size: 14px; font-weight: 700; color: var(--yk-ink-2);
background: linear-gradient(180deg, #FFFFFF, #F3F7FC);
box-shadow: 0 0 0 1px rgba(206, 216, 230, .95), 0 3px 8px rgba(150, 168, 196, .12);
transition: color .18s, box-shadow .18s, background .18s;
}
html[data-template="y2k"] .tab:hover { color: var(--yk-pink-ink); }
html[data-template="y2k"] .tab.active {
color: #7A2148; font-weight: 800; border-bottom-color: transparent;
background: linear-gradient(180deg, #FFD3E2 0%, #F49ABD 100%);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .85), 0 5px 14px rgba(226, 140, 175, .30);
}
html[data-template="y2k"] .jielong-chain {
gap: 12px; align-items: center; margin-bottom: 18px;
}
html[data-template="y2k"] .jielong-node {
min-width: 96px; padding: 12px 22px; gap: 3px;
border: 0; border-radius: 999px;
background: linear-gradient(180deg, #FFFFFF 0%, #F5F9FD 48%, #E9F0F8 100%);
box-shadow:
inset 0 1px 0 #FFFFFF,
0 0 0 1px rgba(196, 207, 222, .95),
0 6px 14px rgba(140, 158, 190, .14);
transition: transform .2s cubic-bezier(.2, .8, .3, 1), box-shadow .2s;
}
html[data-template="y2k"] .jielong-node:hover {
transform: translateY(-2px);
box-shadow: inset 0 1px 0 #fff, 0 0 0 1px rgba(242, 167, 198, .95), 0 10px 20px rgba(226, 150, 180, .22);
}
html[data-template="y2k"] .jielong-node.current {
border-color: transparent;
background: linear-gradient(180deg, #FFE0EC 0%, #FBB7D2 100%);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), 0 0 0 1px rgba(233, 158, 190, .95), 0 8px 18px rgba(226, 140, 175, .26);
}
html[data-template="y2k"] .jielong-node .jw {
font-family: var(--yk-font); font-size: 16px; font-weight: 800; color: var(--yk-ink);
}
html[data-template="y2k"] .jielong-node.current .jw { color: #87204A; }
html[data-template="y2k"] .jielong-node .jp { font-size: 11.5px; color: var(--yk-ink-3); letter-spacing: .02em; }
html[data-template="y2k"] .jielong-node.current .jp { color: #9A4A6C; }
/* 箭头：把「→」藏掉，用一条虚线 + 一个折角画出来。
撑到 34px 宽、12px 高，纵向居中才有「线」的稳定感。 */
html[data-template="y2k"] .jielong-arrow {
position: relative; flex: 0 0 34px;
width: 34px; height: 12px;
font-size: 0; color: transparent; overflow: hidden;
}
html[data-template="y2k"] .jielong-arrow::before {
content: ''; position: absolute; left: 0; right: 9px; top: 50%;
border-top: 2px dashed rgba(176, 190, 210, .95);
}
html[data-template="y2k"] .jielong-arrow::after {
content: ''; position: absolute; right: 2px; top: 50%;
width: 7px; height: 7px; margin-top: -4.5px;
border-top: 2px solid rgba(176, 190, 210, .95);
border-right: 2px solid rgba(176, 190, 210, .95);
border-radius: 1px;
transform: rotate(45deg);
}
html[data-template="y2k"] .btn-regen {
padding: 8px 22px; font-size: 13.5px; font-weight: 700; cursor: pointer;
color: var(--yk-pink-ink); background: #fff;
border: 1px solid rgba(214, 222, 234, .95); border-radius: 999px;
box-shadow: 0 3px 8px rgba(150, 168, 196, .12);
transition: background .15s, color .15s, box-shadow .18s;
}
html[data-template="y2k"] .btn-regen:hover {
background: #FFF6FA; color: var(--yk-pink-deep);
box-shadow: 0 0 0 1px rgba(242, 167, 198, .9), 0 6px 14px rgba(226, 150, 180, .20);
}
html[data-template="y2k"] .btn-regen:active { background: var(--yk-pink-3); color: #fff; }
html[data-template="y2k"] .btn-regen:disabled { opacity: .55; cursor: default; }
/* ---------- 相关成语：错落 + 微倾 ----------
* 每四张一个循环：转 -1.1° 抬起 0 / 转 .9° 落下 9px / 转 -.6° 抬起 -4px /
* 转 1.2° 落下 6px。角度必须 ≤1.2°，再大就成了「排版出错」而不是「随手贴」。 */
html[data-template="y2k"] .related-grid { gap: 16px; align-items: start; }
html[data-template="y2k"] .related-item {
position: relative;
padding: 18px 18px 20px; gap: 6px;
border: 0; border-radius: 22px; background: #fff;
box-shadow: 0 0 0 1px rgba(200, 210, 224, .92), 0 10px 22px rgba(126, 146, 180, .09);
transform: rotate(-1.1deg);
transition: transform .28s cubic-bezier(.2, .8, .3, 1), box-shadow .22s;
}
html[data-template="y2k"] .related-item:nth-child(4n+2) { transform: rotate(.9deg) translateY(9px); }
html[data-template="y2k"] .related-item:nth-child(4n+3) { transform: rotate(-.6deg) translateY(-4px); }
html[data-template="y2k"] .related-item:nth-child(4n+4) { transform: rotate(1.2deg) translateY(6px); }
/* 底色隔三差一地换一档，网格才不会读成四列白纸。
只在最浅的那一端动，字仍然压在 #F4FAFF 这种近似白上，对比度不掉。 */
html[data-template="y2k"] .related-item:nth-child(4n+2) { background: linear-gradient(180deg, #FFFFFF 0%, #F3F9FF 100%); }
html[data-template="y2k"] .related-item:nth-child(4n+3) { background: linear-gradient(180deg, #FFFFFF 0%, #F9F5FF 100%); }
html[data-template="y2k"] .related-item:nth-child(4n+4) { background: linear-gradient(180deg, #FFFFFF 0%, #FFFCF4 100%); }
html[data-template="y2k"] .related-item::after {
content: ''; position: absolute; right: 12px; top: 12px;
width: 14px; height: 14px; border-radius: 50%;
border: 1px dashed rgba(226, 168, 196, .85);
transition: background .22s, border-color .22s;
}
html[data-template="y2k"] .related-item:hover {
transform: rotate(0deg) translateY(-4px);
box-shadow: 0 0 0 1px rgba(242, 167, 198, .85), 0 18px 32px rgba(190, 160, 190, .20);
}
html[data-template="y2k"] .related-item:hover::after {
background: rgba(247, 184, 206, .9); border-color: rgba(242, 167, 198, .9);
}
html[data-template="y2k"] .related-item .rw {
font-family: var(--yk-font); font-size: 17px; font-weight: 800; color: var(--yk-ink);
}
html[data-template="y2k"] .related-item .rw-py { font-size: 11.5px; color: var(--yk-ink-3); }
html[data-template="y2k"] .related-item small { font-size: 12.5px; color: var(--yk-ink-2); line-height: 1.7; }
/* ---------- 所属标签 ---------- */
html[data-template="y2k"] .tags-of-idiom .chips { gap: 9px; }
/* ---------- 列表页（搜索 / 拼音 / 标签） ---------- */
html[data-template="y2k"] .list-head { padding: 26px 0 10px; }
html[data-template="y2k"] .list-head h1 {
font-family: var(--yk-font); font-size: 27px; font-weight: 900; letter-spacing: .02em;
color: var(--yk-ink);
text-shadow: 0 1px 0 #fff, 0 2px 0 rgba(205, 214, 228, .75), 0 0 22px rgba(255, 255, 255, .9);
}
html[data-template="y2k"] .muted { color: var(--yk-ink-3); font-size: 13.5px; }
html[data-template="y2k"] .result-list {
border-radius: 26px; background: #fff;
box-shadow: 0 0 0 1px rgba(196, 206, 222, .85), 0 14px 34px rgba(120, 140, 175, .10);
}
html[data-template="y2k"] .result-item { padding: 15px 22px; border-bottom: 1px dashed rgba(214, 222, 234, .95); }
html[data-template="y2k"] .result-item:hover { background: linear-gradient(90deg, #FFF4F9, #F4F9FF); }
html[data-template="y2k"] .result-item .rw { font-family: var(--yk-font); font-weight: 800; color: var(--yk-pink-ink); }
html[data-template="y2k"] .result-item .rp { color: var(--yk-ink-3); }
html[data-template="y2k"] .result-item .re { color: var(--yk-ink-2); }
html[data-template="y2k"] .letters { gap: 10px; }
html[data-template="y2k"] .letter {
border: 0; border-radius: 20px; background: #fff;
color: var(--yk-pink-ink); font-weight: 800;
box-shadow: 0 0 0 1px rgba(206, 214, 228, .95), 0 4px 10px rgba(150, 168, 196, .10);
transition: transform .16s, box-shadow .18s;
}
html[data-template="y2k"] .letter:hover {
transform: translateY(-2px); border-color: transparent;
background: linear-gradient(180deg, #FFD3E2, #F49ABD); color: #7A2148;
box-shadow: 0 8px 18px rgba(226, 140, 175, .26);
}
html[data-template="y2k"] .letter.empty { color: var(--yk-ink-3); background: #F7F9FC; box-shadow: 0 0 0 1px rgba(214, 222, 234, .9); }
html[data-template="y2k"] .hot-grid { gap: 14px; }
html[data-template="y2k"] .hot-item {
border: 0; border-radius: 20px; background: #fff;
padding: 15px 17px;
box-shadow: 0 0 0 1px rgba(206, 214, 228, .92), 0 4px 12px rgba(150, 168, 196, .09);
transition: transform .18s, box-shadow .18s;
}
html[data-template="y2k"] .hot-item:hover {
transform: translateY(-2px); border-color: transparent;
box-shadow: 0 0 0 1px rgba(242, 167, 198, .9), 0 12px 24px rgba(190, 160, 190, .18);
}
html[data-template="y2k"] .hot-word { font-family: var(--yk-font); font-weight: 800; color: var(--yk-ink); }
html[data-template="y2k"] .hot-pinyin { color: var(--yk-pink-ink); }
html[data-template="y2k"] .hot-expl { color: var(--yk-ink-2); }
html[data-template="y2k"] .pager a {
border: 0; border-radius: 999px; padding: 7px 18px;
background: #fff; color: var(--yk-pink-ink); font-weight: 700;
box-shadow: 0 0 0 1px rgba(206, 214, 228, .95), 0 4px 10px rgba(150, 168, 196, .10);
}
html[data-template="y2k"] .pager a:hover {
background: linear-gradient(180deg, #FFD3E2, #F49ABD); color: #7A2148;
border-color: transparent;
}
html[data-template="y2k"] .pager span { color: var(--yk-ink-3); }
html[data-template="y2k"] .empty { color: var(--yk-ink-3); }
html[data-template="y2k"] .friend-links .fl-list li { border-bottom: 1px dashed rgba(214, 222, 234, .95); }
html[data-template="y2k"] .friend-links .fl-list a { color: var(--yk-ink-2); }
html[data-template="y2k"] .friend-links .fl-list a:hover { color: var(--yk-pink-ink); }
/* ---------- 字典页 / 词语页：同一套语法，只补差异 ---------- */
html[data-template="y2k"] .sense-pos {
background: var(--yk-pink-2); color: var(--yk-pink-ink);
border-radius: 999px; font-weight: 700;
}
html[data-template="y2k"] .sense-title { font-weight: 800; color: var(--yk-ink); }
html[data-template="y2k"] .dr-item { border-bottom: 1px dashed rgba(214, 222, 234, .95); }
html[data-template="y2k"] .dr-num {
background: linear-gradient(180deg, #FFCFE0, #F293B8); color: #7A2148;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8);
}
html[data-template="y2k"] .dr-type {
background: var(--yk-blue-2); color: #2E6E9E; border-radius: 999px;
}
html[data-template="y2k"] .dr-quote,
html[data-template="y2k"] .dr-example,
html[data-template="y2k"] .example {
border-radius: 16px; background: #F8FAFD; border-left: 3px dashed rgba(200, 212, 228, .95);
color: var(--yk-ink-2);
}
html[data-template="y2k"] .dr-label { border-radius: 999px; border-color: rgba(206, 214, 228, .95); color: var(--yk-ink-2); }
html[data-template="y2k"] .dr-link { color: var(--yk-pink-ink); }
/* ---------- 404 ---------- */
/* 404 的数字做镀铬渐变，但先给一个实色底：背景裁剪不被支持时
文字不能变成透明的（那是最典型的「看起来在，其实读不到」）。 */
html[data-template="y2k"] .not-found h1 {
font-family: var(--yk-font); font-size: 84px; font-weight: 900;
color: #8E99AC;
filter: drop-shadow(0 3px 0 rgba(205, 214, 228, .8));
}
@supports ((background-clip: text) or (-webkit-background-clip: text)) {
html[data-template="y2k"] .not-found h1 {
background: linear-gradient(165deg, #FFFFFF 0%, #97A3B6 38%, #EC9EBE 70%, #8E99AC 100%);
-webkit-background-clip: text; background-clip: text;
-webkit-text-fill-color: transparent;
}
}
html[data-template="y2k"] .not-found p { color: var(--yk-ink-2); }
html[data-template="y2k"] .back a { color: var(--yk-pink-ink); }
/* ---------- 页脚：深灰紫，压一道粉蓝色的霓虹线 ---------- */
html[data-template="y2k"] .site-footer {
margin-top: 46px; color: #C9C7D8;
background: linear-gradient(165deg, #2A2D3C 0%, #242233 52%, #2E2942 100%);
border-top: 1px solid rgba(247, 184, 206, .35);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .10);
}
html[data-template="y2k"] .footer-inner { padding: 24px 16px; gap: 10px; }
html[data-template="y2k"] .footer-nav { gap: 8px; }
html[data-template="y2k"] .footer-nav a {
color: #DAD8E8; font-size: 13.5px; padding: 3px 11px; border-radius: 999px;
}
html[data-template="y2k"] .footer-nav a:hover { color: #fff; background: rgba(255, 255, 255, .09); }
html[data-template="y2k"] .footer-hub { border-top: 1px dashed rgba(255, 255, 255, .14); }
html[data-template="y2k"] .footer-hub .fh-label { color: #8C89A3; }
html[data-template="y2k"] .footer-hub a { color: #A9A6BE; }
html[data-template="y2k"] .footer-hub a:hover { color: #E6DEF2; }
html[data-template="y2k"] .copyright { color: #9C99B0; font-size: 12.5px; }
/* ---------- 首页：一块糖玻璃招牌 ---------- */
html[data-template="y2k"] .hero { position: relative; padding: 58px 0 34px; }
html[data-template="y2k"] .hero::before {
content: ''; position: absolute; z-index: -1; left: 50%; top: 4px;
transform: translateX(-50%);
width: min(760px, 96%); height: 300px; border-radius: 50%;
background:
radial-gradient(closest-side, rgba(255, 255, 255, .85), rgba(255, 255, 255, 0) 72%),
radial-gradient(closest-side, rgba(255, 216, 232, .55), rgba(255, 216, 232, 0) 78%);
pointer-events: none;
}
html[data-template="y2k"] .hero h1 {
font-family: var(--yk-font);
font-size: clamp(34px, 4.6vw, 54px); font-weight: 900;
letter-spacing: .05em; text-indent: .05em; color: #2E2F3C;
margin-bottom: 12px;
text-shadow:
0 1px 0 #fff, 0 2px 0 #fff, 0 3px 0 rgba(186, 197, 214, .80),
0 6px 14px rgba(120, 140, 175, .18), 0 0 30px rgba(255, 255, 255, .95);
}
html[data-template="y2k"] .hero-sub { color: var(--yk-ink-2); font-size: 15px; margin-bottom: 26px; }
html[data-template="y2k"] .hero-sub strong { color: var(--yk-pink-ink); }
html[data-template="y2k"] .hero-search { gap: 10px; max-width: 580px; }
html[data-template="y2k"] .hero-search input {
height: 52px; padding: 0 20px; font-size: 15.5px;
border: 1px solid rgba(190, 202, 220, .95); border-radius: 999px;
background: #FFFDFE;
box-shadow: inset 0 1px 3px rgba(150, 168, 196, .12), 0 6px 16px rgba(150, 168, 196, .10);
}
html[data-template="y2k"] .hero-search input:focus {
border-color: var(--yk-pink-3);
box-shadow: 0 0 0 4px rgba(247, 184, 206, .38), inset 0 1px 2px rgba(150, 168, 196, .10);
}
html[data-template="y2k"] .hero-search button {
height: 52px; padding: 0 30px; font-size: 15px; font-weight: 800;
border: 0; border-radius: 999px;
background: linear-gradient(180deg, #FFCFE0 0%, #F293B8 100%);
color: #7A2148;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .85), 0 6px 16px rgba(226, 140, 175, .34);
}
html[data-template="y2k"] .hero-search button:hover { background: linear-gradient(180deg, #FFCFE0 0%, #F293B8 100%); filter: brightness(1.04); }
/* ---------- 动效：卡片轻轻浮上来，不抢戏 ---------- */
@keyframes yk-rise {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: none; }
}
html[data-template="y2k"] .detail > .card { animation: yk-rise .42s cubic-bezier(.2, .8, .3, 1) both; }
html[data-template="y2k"] .detail > .card:nth-of-type(1) { animation-delay: .02s; }
html[data-template="y2k"] .detail > .card:nth-of-type(2) { animation-delay: .06s; }
html[data-template="y2k"] .detail > .card:nth-of-type(3) { animation-delay: .10s; }
html[data-template="y2k"] .detail > .card:nth-of-type(n+4) { animation-delay: .14s; }
html[data-template="y2k"] .detail .tab-panel:not([hidden]) { animation: yk-rise .24s ease-out; }
@media (prefers-reduced-motion: reduce) {
html[data-template="y2k"] .detail > .card,
html[data-template="y2k"] .detail .tab-panel:not([hidden]) { animation: none; }
html[data-template="y2k"] .related-item,
html[data-template="y2k"] .jielong-node,
html[data-template="y2k"] .letter,
html[data-template="y2k"] .hot-item { transition: none; }
}
/* ---------- 响应式 ---------- */
@media (max-width: 1024px) {
html[data-template="y2k"] .detail .related-grid { grid-template-columns: repeat(3, 1fr); }
html[data-template="y2k"] .detail .char-decompose { grid-template-columns: repeat(2, 1fr); }
html[data-template="y2k"] .detail .char-decompose > .char-item { flex: 1 1 240px; }
}
@media (max-width: 860px) {
html[data-template="y2k"] .site-header { margin: 10px 12px 0; }
html[data-template="y2k"] .card { padding: 26px 24px 28px; }
html[data-template="y2k"] .detail .related-grid { grid-template-columns: repeat(2, 1fr); }
html[data-template="y2k"] .detail-head h1 { letter-spacing: .04em; text-indent: .04em; }
}
@media (max-width: 640px) {
html[data-template="y2k"] .site-header { top: 8px; margin: 8px 10px 0; border-radius: 18px; }
html[data-template="y2k"] .site-header .container { padding: 0 14px; }
html[data-template="y2k"] .header-inner { min-height: 58px; gap: 10px; }
html[data-template="y2k"] .logo { font-size: 17px; letter-spacing: .02em; }
html[data-template="y2k"] .logo::before { width: 7px; height: 7px; margin-right: 6px; }
/* 基础样式在手机上整条藏掉导航，这里改成横滑 */
html[data-template="y2k"] .nav {
display: flex; flex-wrap: nowrap; gap: 2px;
overflow-x: auto; scrollbar-width: none;
}
html[data-template="y2k"] .nav::-webkit-scrollbar { display: none; }
html[data-template="y2k"] .nav a { flex: 0 0 auto; padding: 4px 10px; font-size: 12.5px; }
html[data-template="y2k"] .search-box { flex-basis: 100%; max-width: none; gap: 7px; margin-top: 2px; }
html[data-template="y2k"] .search-box input { height: 36px; font-size: 13px; }
html[data-template="y2k"] .search-box button { height: 36px; padding: 0 15px; font-size: 13px; }
html[data-template="y2k"] .breadcrumb { padding-top: 16px; font-size: 11.5px; }
/* 轨道在窄屏改小，泡泡去掉两颗，不然标题被挤成夹心 */
html[data-template="y2k"] .detail-head { padding: 34px 6px 16px; }
html[data-template="y2k"] .detail-head::before { top: 2px; height: 190px; }
html[data-template="y2k"] .detail-head::after {
background:
radial-gradient(circle at 10% 22%, rgba(255, 255, 255, .95) 0 8px, rgba(197, 228, 252, .85) 8px 17px, transparent 18px),
radial-gradient(circle at 90% 70%, rgba(255, 255, 255, .9) 0 5px, rgba(255, 222, 236, .85) 5px 12px, transparent 13px);
}
html[data-template="y2k"] .detail-head h1 {
font-size: clamp(34px, 11.2vw, 50px); letter-spacing: .03em; text-indent: .03em;
margin-bottom: 10px;
text-shadow:
0 1px 0 #fff, 0 2px 0 rgba(186, 197, 214, .8),
0 4px 10px rgba(120, 140, 175, .18), 0 0 24px rgba(255, 255, 255, .95);
}
html[data-template="y2k"] .detail-head .pinyin { font-size: 12.5px; letter-spacing: .16em; padding: 3px 14px 4px; }
html[data-template="y2k"] .tags { gap: 9px; padding: 16px 0 10px; }
html[data-template="y2k"] .tag { padding: 5px 13px 6px; gap: 6px; }
html[data-template="y2k"] .tag-label { font-size: 10.5px; }
html[data-template="y2k"] .tag-value { font-size: 13px; }
html[data-template="y2k"] .tag::after { left: 12px; bottom: -3px; width: 6px; height: 6px; }
html[data-template="y2k"] .grid-figure { margin-bottom: 20px; }
html[data-template="y2k"] .grid-img { border-radius: 16px; box-shadow: 0 0 0 1px rgba(198, 207, 220, .95), 0 0 0 5px #fff, 0 0 0 6px rgba(214, 222, 234, .9), 0 12px 24px rgba(120, 140, 175, .12); }
html[data-template="y2k"] .detail .card { border-radius: 24px; padding: 24px 18px 26px; margin-bottom: 16px; }
html[data-template="y2k"] .detail .card h2 { font-size: 18px; padding: 0 0 12px 22px; margin-bottom: 18px; }
html[data-template="y2k"] .detail .card h2::before { width: 11px; height: 11px; top: 5px; }
html[data-template="y2k"] .detail .card h2::after { left: 22px; }
html[data-template="y2k"] .detail .explanation { font-size: 16.5px; line-height: 1.95; }
html[data-template="y2k"] .detail .card:has(.explanation)::after { width: 130px; height: 130px; right: -34px; top: -38px; }
html[data-template="y2k"] .detail .field { grid-template-columns: 1fr; gap: 5px; padding: 13px 0; }
html[data-template="y2k"] .detail .field dt { font-size: 12.5px; }
html[data-template="y2k"] .detail .field dd { font-size: 15px; }
html[data-template="y2k"] .detail .field dd.quote { font-size: 14.5px; padding: 10px 13px; border-radius: 14px; }
html[data-template="y2k"] .detail .zju-list { padding-left: 20px; }
html[data-template="y2k"] .detail .zju-list li { font-size: 15px; }
html[data-template="y2k"] .detail .story { font-size: 15.5px; }
html[data-template="y2k"] .detail .syn-ant > strong { display: block; width: fit-content; }
/* 字义：窄屏一张一行，字钮缩到 76px */
html[data-template="y2k"] .detail .char-decompose > .char-item { flex: 1 1 100%; }
html[data-template="y2k"] .detail .char-item { padding: 22px 18px 24px; }
html[data-template="y2k"] .detail .char-glyph { width: 76px; height: 76px; font-size: 44px; }
html[data-template="y2k"] .detail .char-item::before { width: 14px; height: 14px; right: 11px; top: 11px; }
/* 接龙：椭圆钮竖排，箭头跟着转 90° */
html[data-template="y2k"] .detail .jielong-chain {
flex-direction: column; align-items: flex-start; gap: 8px;
}
html[data-template="y2k"] .detail .jielong-node { min-width: 0; padding: 9px 20px; }
html[data-template="y2k"] .detail .jielong-arrow {
flex: 0 0 12px; width: 12px; height: 30px; margin: 0 0 0 22px;
}
html[data-template="y2k"] .detail .jielong-arrow::before {
left: 50%; right: auto; top: 0; bottom: 9px;
border-top: 0; border-left: 2px dashed rgba(176, 190, 210, .95);
}
html[data-template="y2k"] .detail .jielong-arrow::after {
right: auto; left: 50%; top: auto; bottom: 2px; margin: 0 0 0 -4.5px;
transform: rotate(135deg);
}
html[data-template="y2k"] .detail .tabs { flex-wrap: wrap; gap: 8px; }
html[data-template="y2k"] .detail .tab { padding: 7px 15px; font-size: 13px; }
html[data-template="y2k"] .detail .btn-regen { padding: 7px 18px; font-size: 13px; }
/* 相关成语：窄屏不再倾斜，否则两列一歪就顶着卡片边 */
html[data-template="y2k"] .detail .related-grid { gap: 12px; }
html[data-template="y2k"] .detail .related-item,
html[data-template="y2k"] .detail .related-item:nth-child(4n+2),
html[data-template="y2k"] .detail .related-item:nth-child(4n+3),
html[data-template="y2k"] .detail .related-item:nth-child(4n+4) { transform: none; }
html[data-template="y2k"] .detail .related-item { padding: 14px 14px 16px; border-radius: 18px; }
html[data-template="y2k"] .detail .related-item .rw { font-size: 15.5px; }
html[data-template="y2k"] .detail .related-item::after { width: 11px; height: 11px; right: 10px; top: 10px; }
html[data-template="y2k"] .hero { padding: 44px 0 28px; }
html[data-template="y2k"] .hero::before { height: 220px; }
html[data-template="y2k"] .hero h1 { font-size: clamp(30px, 9.6vw, 40px); }
html[data-template="y2k"] .hero-sub { font-size: 12.5px; line-height: 1.95; margin-bottom: 22px; }
html[data-template="y2k"] .hero-search { gap: 8px; flex-wrap: nowrap; }
html[data-template="y2k"] .hero-search input { height: 46px; padding: 0 15px; font-size: 14.5px; }
html[data-template="y2k"] .hero-search button { height: 46px; padding: 0 18px; font-size: 13.5px; flex: 0 0 auto; white-space: nowrap; }
html[data-template="y2k"] .card { border-radius: 22px; padding: 22px 18px; }
html[data-template="y2k"] .card h2 { font-size: 18px; padding-left: 22px; }
html[data-template="y2k"] .card h2::after { left: 22px; }
html[data-template="y2k"] .letters { grid-template-columns: repeat(auto-fill, minmax(60px, 1fr)); gap: 8px; }
html[data-template="y2k"] .list-head h1 { font-size: 22px; }
html[data-template="y2k"] .result-item { padding: 13px 16px; }
html[data-template="y2k"] .not-found h1 { font-size: 62px; }
html[data-template="y2k"] .site-footer { margin-top: 36px; padding: 26px 0 28px; }
}
@media (max-width: 560px) {
html[data-template="y2k"] .detail .related-grid { grid-template-columns: 1fr; }
}
@media (max-width: 400px) {
html[data-template="y2k"] .site-header { margin: 6px 8px 0; }
html[data-template="y2k"] .detail-head h1 { font-size: clamp(28px, 10.4vw, 34px); }
html[data-template="y2k"] .detail .tag { padding: 4px 11px 5px; }
html[data-template="y2k"] .detail .tag-value { font-size: 12.5px; }
html[data-template="y2k"] .hero-search button { padding: 0 14px; font-size: 13px; }
}
/* ============================================================================
* 视觉模板：自然植物园清新风（html[data-template="botanical"]）
* ----------------------------------------------------------------------------
* 北极星：一本植物园导览手册 —— 燕麦色的纸、压干的叶片、手绘的枝条线、
* 铅笔写下的标签。安静、有肌理、看不出「设计」，只看出「被照顾过」。
*
* 和前三版的关系：国潮靠界线、水彩靠浓度、Y2K 靠材质。这一版靠**留白与
* 温度的差**：几乎全是米白，只让鼠尾草绿在需要被看见的地方出现一次。
*
* 四条硬规则：
* 1. 绿只做「记号」，不做「底色」。整页绿底会立刻变成体检中心；鼠尾草绿
* 只出现在标签、字段名、箭线、叶片上，面积加起来不超过一屏的 5%。
* 2. 所有「植物」都是线，不是块。叶用 1px 描边 + 一条叶脉，枝条用 1.1px。
* 实心叶片一多，就从小清新变成幼儿园墙面贴纸。
* 3. 阴影只用最轻的一档（0 1px 2px + 0 10px 26px，都不超过 5% 不透明）。
* 治愈感来自「纸是软的」，不来自「卡片是浮的」。
* 4. 本模板不加任何图片文件：叶子、枝条、叶脉肌理全部由 border-radius
* 拼形 + 渐变 + data URI 内联 SVG 画出来 —— 子目录部署不用改任何路径。
*
* 字体：标题思源宋体（var(--bt-serif)），正文思源黑体（var(--bt-sans)），
* 两者都退回系统自带的中文字体，不下载、不阻塞首屏。
* ==========================================================================*/
html[data-template="botanical"] {
/* ---- 底 ---- */
--bt-oat: #F4EFE3; /* 燕麦，整页底 */
--bt-oat-2: #FAF6EC; /* 田字格的卡纸 */
--bt-cream: #FBF7EC; /* 卡片纸 */
--bt-paper: #FDFAF2; /* 更亮的纸，用于按钮 */
/* ---- 字 ---- */
--bt-ink: #2E3A33; /* 正文，燕麦底 10.3:1 */
--bt-ink-2: #4F5B52; /* 6.2:1 */
--bt-ink-3: #5F6C62; /* 小字，4.8:1 */
/* ---- 线 ---- */
--bt-line: #E5DFCC;
--bt-line-2: #D5CDB7;
/* ---- 鼠尾草绿 / 薄荷青 / 橄榄 / 陶土 ---- */
--bt-sage: #7E9C82; /* 线的绿，不做文字色 */
--bt-sage-2: #A9C0A9;
--bt-sage-ink: #4E6B53; /* 绿字，奶油纸 5.5:1 */
--bt-sage-soft: #E7EDE0;
--bt-mint: #7FAFA0;
--bt-mint-soft: #E4EFE9;
--bt-olive: #6E7F4E;
--bt-olive-ink: #46512F; /* 橄榄字，标签底 7.1:1 */
--bt-olive-soft:#EDEFDF;
--bt-clay: #B4826A;
--bt-clay-soft: #F2E6DC;
/* ---- 接管基础变量 ---- */
/* 主色比正文那层鼠尾草绿再深一档：它要压在浅绿底（.btn-more、
浅绿胶囊）上做大白话链接，5.2:1 才落得下来。#7E9C82 做底、不做字。 */
--primary: #4C6750;
--primary-dark: #3D5341;
--primary-soft: #E7EDE0;
--ink: #2E3A33;
--ink-soft: #4F5B52;
--ink-faint: #5F6C62;
--bg: #F4EFE3;
--card: #FBF7EC;
--border: #E5DFCC;
--gold: #4E6B53;
--radius: 18px;
--shadow: 0 1px 2px rgba(74, 88, 72, .035), 0 10px 26px rgba(74, 88, 72, .045);
--bt-serif: "Noto Serif SC", "Source Han Serif SC", "Songti SC", "STSong", "SimSun", serif;
--bt-sans: "Noto Sans SC", "Source Han Sans SC", "PingFang SC", "Microsoft YaHei", "Segoe UI", sans-serif;
--font-serif: var(--bt-serif);
--font-sans: var(--bt-sans);
}
/* ---------- 底：燕麦纸 + 两层极淡的绿光 + 两片压在角落的叶影 ----------
* 叶影用 data URI 内联 SVG：不新增文件，也就没有「子目录部署要改路径」这一坑。
* 不透明度压在 6%，它只负责让整页不要「一块死平」，不该被看见。 */
html[data-template="botanical"] body {
background-color: var(--bt-oat);
background-image:
radial-gradient(760px 460px at 4% -10%, rgba(169, 192, 169, .34), transparent 64%),
radial-gradient(700px 430px at 100% -2%, rgba(228, 239, 233, .85), transparent 68%),
radial-gradient(820px 540px at 50% 104%, rgba(242, 230, 220, .55), transparent 70%),
url("data:image/svg+xml;utf8,"),
url("data:image/svg+xml;utf8,");
background-position: 0 0, 0 0, 0 0, left -118px top 132px, right -104px bottom 96px;
background-size: auto, auto, auto, 420px 420px, 360px 360px;
background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, no-repeat;
color: var(--bt-ink);
font-family: var(--bt-sans);
line-height: 1.8;
}
html[data-template="botanical"] a { color: var(--primary); }
/* 页脚是浅苔色的，短页面（404、空搜索）下面会露出一截燕麦底，
看着像页脚飘在半空。用一整列把页脚压到底 —— 顺带记一句：flex 子项的
自动最小尺寸是 min-content，田字格 360px 会把 main 撑开，320 屏上正文
会被推出屏幕，所以 main 的 min-width:0 是必须的，不是保险。 */
html[data-template="botanical"] body {
display: flex; flex-direction: column; min-height: 100vh;
}
html[data-template="botanical"] main { flex: 1 0 auto; min-width: 0; }
html[data-template="botanical"] .site-footer { flex: 0 0 auto; }
html[data-template="botanical"] a:hover { color: var(--primary-dark); }
html[data-template="botanical"] ::selection { background: rgba(169, 192, 169, .45); color: #2E3A33; }
/* ---------- 顶部：一张奶油纸，底边一条浅绿细线 ----------
* 不用阴影堆，也不用玻璃。它就该像手册的第一页横幅：平、柔、一条线收口。 */
html[data-template="botanical"] .site-header {
background: rgba(250, 246, 236, .92);
border-bottom: 1px solid rgba(126, 156, 130, .32);
box-shadow: 0 6px 18px rgba(74, 88, 72, .05);
-webkit-backdrop-filter: blur(8px);
backdrop-filter: blur(8px);
}
html[data-template="botanical"] .site-header .container { padding: 0 18px; }
html[data-template="botanical"] .header-inner { min-height: 64px; gap: 20px; }
/* 站点名：宋体 + 一枚线描小叶 */
html[data-template="botanical"] .logo {
font-family: var(--bt-serif);
font-size: 22px; font-weight: 600; letter-spacing: .08em;
color: var(--bt-ink);
}
html[data-template="botanical"] .logo:hover { color: var(--bt-sage-ink); }
html[data-template="botanical"] .logo::before {
content: ''; display: inline-block;
width: 13px; height: 13px; margin-right: 9px; vertical-align: 0;
border: 1.4px solid var(--bt-sage);
border-radius: 0 100% 0 100%;
background: linear-gradient(45deg,
transparent calc(50% - .7px), rgba(126, 156, 130, .65) calc(50% - .7px) calc(50% + .7px), transparent calc(50% + .7px));
/* 尖角在这一步落在「左上-右下」这条对角线上，转 45° 才立成一枚叶子；
转 -45° 会躺平成一片横向的柳叶——那是这一版最容易看错的一处。 */
transform: rotate(45deg);
}
/* 导航：条目之间一条浅绿竖线，不加药丸、不加底 */
html[data-template="botanical"] .nav { gap: 0; }
html[data-template="botanical"] .nav a {
position: relative;
padding: 8px 16px; border-radius: 8px;
color: var(--bt-ink-2); font-size: 14.5px; letter-spacing: .05em;
transition: color .18s, background .18s;
}
html[data-template="botanical"] .nav a + a::before {
content: ''; position: absolute; left: 0; top: 50%;
transform: translateY(-50%);
width: 1px; height: 13px;
background: rgba(126, 156, 130, .38);
}
html[data-template="botanical"] .nav a:hover {
color: var(--bt-sage-ink);
background: rgba(126, 156, 130, .08);
}
/* 搜索：一枚圆角木牌 + 一颗橄榄按钮 */
html[data-template="botanical"] .search-box {
gap: 8px; max-width: 340px;
background: none; border: 0; box-shadow: none;
}
html[data-template="botanical"] .search-box input {
height: 40px; padding: 0 15px;
border: 1px solid var(--bt-line-2); border-radius: 12px;
background: var(--bt-paper);
font-size: 14px; color: var(--bt-ink);
box-shadow: inset 0 1px 2px rgba(74, 88, 72, .05);
transition: border-color .18s, box-shadow .18s;
}
html[data-template="botanical"] .search-box input::placeholder { color: var(--bt-ink-3); }
html[data-template="botanical"] .search-box input:focus {
border-color: var(--bt-sage);
box-shadow: 0 0 0 3px rgba(126, 156, 130, .18), inset 0 1px 2px rgba(74, 88, 72, .04);
}
html[data-template="botanical"] .search-box button {
height: 40px; padding: 0 20px;
border: 0; border-radius: 12px;
background: var(--bt-sage-ink); color: #FAF6EC;
font-size: 14px; font-weight: 600; letter-spacing: .06em;
transition: background .18s;
}
html[data-template="botanical"] .search-box button:hover { background: #435E48; }
html[data-template="botanical"] .suggest {
top: 46px; border: 1px solid var(--bt-line); border-radius: 14px;
background: var(--bt-paper);
box-shadow: 0 14px 30px rgba(74, 88, 72, .12);
overflow: hidden;
}
html[data-template="botanical"] .suggest a { border-bottom: 1px solid rgba(229, 223, 204, .8); color: var(--bt-ink); }
html[data-template="botanical"] .suggest a:hover,
html[data-template="botanical"] .suggest a.active { background: var(--bt-sage-soft); color: var(--bt-sage-ink); }
html[data-template="botanical"] .suggest .s-pinyin { color: var(--bt-ink-3); }
/* ---------- 面包屑 ---------- */
html[data-template="botanical"] .breadcrumb { padding: 20px 0 2px; font-size: 12.5px; letter-spacing: .04em; }
html[data-template="botanical"] .breadcrumb li { color: var(--bt-ink-3); }
html[data-template="botanical"] .breadcrumb a { color: var(--bt-ink-2); }
html[data-template="botanical"] .breadcrumb a:hover { color: var(--bt-sage-ink); }
/* ---------- 标题区：宋体大标题 + 底部一道草绿细线 ----------
* 两侧各探出一枝线描小枝。窄屏藏掉 —— 屏幕上没有「页边」可探。 */
html[data-template="botanical"] .detail-head {
position: relative;
padding: 44px 0 18px;
}
html[data-template="botanical"] .detail-head::before,
html[data-template="botanical"] .detail-head::after {
content: ''; position: absolute; top: 50%;
width: 76px; height: 124px; margin-top: -46px;
background: url("data:image/svg+xml;utf8,") center / contain no-repeat;
opacity: .85; pointer-events: none;
}
html[data-template="botanical"] .detail-head::before { left: max(6px, calc(50% - 380px)); }
html[data-template="botanical"] .detail-head::after {
right: max(6px, calc(50% - 380px));
transform: scaleX(-1);
}
html[data-template="botanical"] .detail-head h1 {
position: relative;
font-family: var(--bt-serif);
font-size: clamp(40px, 5.4vw, 66px);
font-weight: 600; letter-spacing: .1em; text-indent: .1em;
line-height: 1.3; color: var(--bt-ink);
padding-bottom: 20px; margin-bottom: 10px;
}
/* 草绿装饰线：两端淡出，中间一个极小的叶芽点 */
html[data-template="botanical"] .detail-head h1::after {
content: ''; position: absolute; left: 50%; bottom: 0;
transform: translateX(-50%);
width: 96px; height: 2px; border-radius: 2px;
/* 不要给它加外发光：2px 的线配一层 7% 的光晕，在 1x 下只会读成
一道灰蒙蒙的虚影，「细细的草绿线」就没了。 */
background: linear-gradient(90deg,
transparent 0%, rgb(93, 127, 98) 14%,
rgb(93, 127, 98) 86%, transparent 100%);
}
html[data-template="botanical"] .detail-head .head-sub { gap: 10px; }
html[data-template="botanical"] .detail-head .pinyin {
font-size: 15px; letter-spacing: .22em; color: var(--bt-ink-2);
}
html[data-template="botanical"] .pron-btn {
border: 1px solid rgba(126, 156, 130, .55);
background: var(--bt-sage-soft); color: var(--bt-sage-ink);
}
/* ---------- 属性标签：橄榄绿的圆角木牌 ----------
* 一枚小叶当项目符号。面积小、色相偏黄绿，和正文的墨绿分得开，
* 才不会读成「一排绿色按钮」。 */
html[data-template="botanical"] .tags { gap: 12px; padding: 22px 0 14px; }
html[data-template="botanical"] .tag {
padding: 6px 15px 7px; gap: 7px; border-radius: 10px;
background: var(--bt-olive-soft);
border: 1px solid rgba(110, 127, 78, .26);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .75);
}
html[data-template="botanical"] .tag::before {
content: ''; flex: none;
width: 7px; height: 7px;
border: 1.2px solid var(--bt-olive);
border-radius: 0 100% 0 100%;
transform: rotate(45deg);
opacity: .8;
}
html[data-template="botanical"] .tag-label { color: #5F6B49; font-size: 12px; letter-spacing: .04em; }
html[data-template="botanical"] .tag-value { color: var(--bt-olive-ink); font-size: 14px; font-weight: 600; }
/* ---------- 田字格：像标本一样装裱在卡纸上 ---------- */
html[data-template="botanical"] .grid-figure { margin: 4px 0 26px; padding: 0; }
html[data-template="botanical"] .grid-img {
max-width: min(360px, 100%);
border-radius: 6px; background: #fff;
box-shadow:
0 0 0 1px rgba(126, 156, 130, .26),
0 0 0 10px var(--bt-oat-2),
0 0 0 11px rgba(126, 156, 130, .14),
0 10px 24px rgba(74, 88, 72, .07);
}
/* ---------- 卡片：奶油纸，右上角压一层极淡的叶脉 ---------- */
html[data-template="botanical"] .card {
position: relative; isolation: isolate;
border-radius: 18px; padding: 26px 30px 28px; margin-bottom: 20px;
background: var(--bt-cream);
border: 1px solid var(--bt-line);
box-shadow: 0 1px 2px rgba(74, 88, 72, .03), 0 10px 26px rgba(74, 88, 72, .045);
}
/* 叶脉：两组 64° 斜线交叉成方格，再用径向遮罩从右上角淡出。
直接铺满整张卡会像格子纸；只在角上留一点，才是「压在纸下的叶子」。 */
html[data-template="botanical"] .card::before {
content: ''; position: absolute; inset: 0; z-index: -1;
border-radius: inherit; pointer-events: none;
background-image:
repeating-linear-gradient(64deg, rgba(126, 156, 130, .055) 0 1px, transparent 1px 11px),
repeating-linear-gradient(-64deg, rgba(126, 156, 130, .045) 0 1px, transparent 1px 11px);
-webkit-mask-image: radial-gradient(120% 92% at 100% 0%, #000 0%, transparent 72%);
mask-image: radial-gradient(120% 92% at 100% 0%, #000 0%, transparent 72%);
}
/* 板块标题：左侧一枚线描小叶 + 一条极浅的横向分隔 */
html[data-template="botanical"] .card h2 {
position: relative;
font-family: var(--bt-serif);
font-size: 20px; font-weight: 600; letter-spacing: .06em;
color: var(--bt-ink);
padding: 0 0 13px 30px; margin-bottom: 20px; line-height: 1.5;
}
html[data-template="botanical"] .card h2::before {
content: ''; position: absolute; left: 2px; top: 6px;
width: 17px; height: 17px;
border: 1.5px solid var(--bt-sage);
border-radius: 0 100% 0 100%;
background: linear-gradient(45deg,
transparent calc(50% - .75px), rgba(126, 156, 130, .85) calc(50% - .75px) calc(50% + .75px), transparent calc(50% + .75px));
transform: rotate(45deg);
}
html[data-template="botanical"] .card h2::after {
content: ''; position: absolute; left: 0; right: 0; bottom: 0;
width: auto; height: 1px; border-radius: 0;
background: linear-gradient(90deg,
rgba(126, 156, 130, .38) 0%, rgba(126, 156, 130, .16) 42%, rgba(126, 156, 130, 0) 92%);
}
/* ---------- 释义：首行压一道鼠尾草绿的淡彩 ----------
* 正文里没有内联标记能单独染色，::first-line 是唯一的着力点；
* 用「下划线式」而不是「涂满」，才有画册里划线标注的意思。 */
html[data-template="botanical"] .explanation {
font-size: 18px; line-height: 1.95; color: var(--bt-ink);
}
html[data-template="botanical"] .explanation::first-line {
background: linear-gradient(transparent 64%, rgba(158, 182, 148, .40) 64%);
}
/* 释义卡右上角一枝线描枝条 */
html[data-template="botanical"] .detail .card:has(.explanation) { padding-top: 28px; }
html[data-template="botanical"] .detail .card:has(.explanation)::after {
content: ''; position: absolute; right: 10px; top: 10px; z-index: -1;
width: 178px; height: 110px;
background: url("data:image/svg+xml;utf8,") right top / contain no-repeat;
-webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 26%);
mask-image: linear-gradient(90deg, transparent 0%, #000 26%);
pointer-events: none;
}
/* ---------- 字段：虚线分隔，字段名用鼠尾草绿 ---------- */
html[data-template="botanical"] .fields { gap: 0; }
html[data-template="botanical"] .field {
grid-template-columns: 78px minmax(0, 1fr); gap: 16px;
padding: 15px 0;
border-top: 1px dashed rgba(126, 156, 130, .26);
}
html[data-template="botanical"] .field:first-child { border-top: 0; padding-top: 2px; }
html[data-template="botanical"] .field dt {
font-size: 13.5px; font-weight: 600; letter-spacing: .06em;
color: var(--bt-sage-ink); padding-top: 2px;
}
html[data-template="botanical"] .field dd { font-size: 15.5px; line-height: 1.9; color: var(--bt-ink); }
html[data-template="botanical"] .field dd.quote {
padding: 12px 16px; border-radius: 10px;
background: #F2F6EC;
border-left: 2px solid var(--bt-sage-2);
color: #3A483C;
}
/* ---------- 造句 / 故事 ---------- */
html[data-template="botanical"] .zju-list { padding-left: 22px; gap: 11px; }
html[data-template="botanical"] .zju-list li { font-size: 15px; line-height: 1.9; color: var(--bt-ink); }
html[data-template="botanical"] .zju-list li::marker { color: var(--bt-sage); font-weight: 600; }
html[data-template="botanical"] .story { font-size: 15.5px; line-height: 1.95; color: var(--bt-ink); }
/* ---------- 近义 / 反义 ---------- */
html[data-template="botanical"] .syn-ant { margin-bottom: 16px; }
html[data-template="botanical"] .syn-ant:last-child { margin-bottom: 0; }
html[data-template="botanical"] .syn-ant > strong {
width: auto; display: inline-block; margin-bottom: 10px;
padding: 2px 11px; border-radius: 8px;
background: var(--bt-sage-soft); color: var(--bt-sage-ink);
font-size: 12.5px; font-weight: 600; letter-spacing: .06em;
}
html[data-template="botanical"] .chips { gap: 8px; }
html[data-template="botanical"] .chip {
padding: 4px 13px; border-radius: 8px;
background: var(--bt-paper); color: var(--bt-sage-ink);
font-size: 14px;
border: 1px solid var(--bt-line);
box-shadow: 0 1px 1px rgba(74, 88, 72, .03);
transition: border-color .18s, background .18s, color .18s;
}
html[data-template="botanical"] .chip:hover {
background: var(--bt-sage-soft);
border-color: rgba(126, 156, 130, .55);
color: #435E48;
}
html[data-template="botanical"] .chip.plain {
background: #F6F3E9; color: var(--bt-ink-3);
border-color: rgba(213, 205, 183, .8);
}
/* ---------- 趣味延伸：一片薄荷色的嫩叶板 ---------- */
html[data-template="botanical"] .highlight {
background: linear-gradient(160deg, #F2F7F0 0%, #EEF4EC 54%, #F7F4E9 100%);
border-color: rgba(126, 156, 130, .22);
box-shadow: 0 1px 2px rgba(74, 88, 72, .03), 0 10px 24px rgba(74, 88, 72, .04);
}
html[data-template="botanical"] .highlight p { font-size: 15px; }
html[data-template="botanical"] .gold { color: var(--bt-sage-ink); font-weight: 600; }
html[data-template="botanical"] .xhy-list li::before { content: '·'; color: var(--bt-sage); font-size: 16px; }
/* ---------- 字义分解：四张草木色标本卡 + 角落一枚线描叶 ----------
* 叶用 border-radius: 0 100% 0 100% 拼出一个尖头叶形，中间那条叶脉
* 是 45° 渐变的窄带 —— 45° 的色带正好穿过左上/右下两个尖角，
* 也就是叶柄到叶尖的那条轴。四张卡各转一点，像随手压上去的。 */
html[data-template="botanical"] .char-decompose { gap: 14px; align-items: stretch; }
html[data-template="botanical"] .char-item {
position: relative; overflow: hidden;
align-items: center; text-align: left;
gap: 12px; padding: 20px 16px 22px;
border: 1px solid rgba(126, 156, 130, .20);
border-radius: 16px;
background: #F2F5EA;
box-shadow: 0 1px 2px rgba(74, 88, 72, .03);
}
html[data-template="botanical"] .char-item:nth-child(4n+2) { background: #E9F2EC; border-color: rgba(127, 175, 160, .24); }
html[data-template="botanical"] .char-item:nth-child(4n+3) { background: #F7F2E5; border-color: rgba(180, 160, 110, .20); }
html[data-template="botanical"] .char-item:nth-child(4n+4) { background: #F4ECE6; border-color: rgba(180, 130, 106, .20); }
html[data-template="botanical"] .char-item::before {
content: ''; position: absolute; right: 11px; top: 11px;
width: 30px; height: 30px;
border: 1.3px solid rgba(106, 136, 112, .42);
border-radius: 0 100% 0 100%;
background: linear-gradient(45deg,
transparent calc(50% - .65px), rgba(106, 136, 112, .30) calc(50% - .65px) calc(50% + .65px), transparent calc(50% + .65px));
transform: rotate(52deg);
pointer-events: none;
}
html[data-template="botanical"] .char-item:nth-child(4n+2)::before { width: 26px; height: 26px; transform: rotate(28deg); }
html[data-template="botanical"] .char-item:nth-child(4n+3)::before { width: 28px; height: 28px; transform: rotate(68deg); }
html[data-template="botanical"] .char-item:nth-child(4n+4)::before { width: 32px; height: 32px; transform: rotate(38deg); }
/* 单字：一块圆形软木牌 */
html[data-template="botanical"] .char-glyph {
align-self: center;
width: 74px; height: 74px; border: 0; border-radius: 50%;
display: flex; align-items: center; justify-content: center;
font-family: var(--bt-serif); font-size: 40px; font-weight: 600; color: var(--bt-ink);
background: rgba(255, 253, 246, .9);
box-shadow:
0 0 0 1px rgba(126, 156, 130, .26),
0 2px 6px rgba(74, 88, 72, .05);
}
html[data-template="botanical"] .char-glyph a { color: inherit; }
html[data-template="botanical"] .char-glyph a:hover { color: var(--bt-sage-ink); }
html[data-template="botanical"] .char-meta { width: 100%; }
html[data-template="botanical"] .char-pron { font-size: 12.5px; color: var(--bt-ink-3); line-height: 1.75; margin-bottom: 7px; letter-spacing: .06em; }
html[data-template="botanical"] .char-extra { gap: 6px; margin-bottom: 8px; }
html[data-template="botanical"] .char-extra-item {
font-size: 11.5px; color: var(--bt-ink-2);
background: rgba(255, 253, 246, .78);
border: 1px solid rgba(126, 156, 130, .22);
border-radius: 6px; padding: 1px 8px; line-height: 1.7;
}
html[data-template="botanical"] .char-extra-sep { display: none; }
html[data-template="botanical"] .char-shape { font-size: 12.5px; color: var(--bt-ink-3); margin-bottom: 7px; }
html[data-template="botanical"] .char-senses { gap: 9px; }
html[data-template="botanical"] .sn-num { color: var(--bt-sage-ink); font-size: 13.5px; font-weight: 600; }
html[data-template="botanical"] .sn-title { color: var(--bt-ink); font-size: 14.5px; font-weight: 600; }
html[data-template="botanical"] .sn-text { color: var(--bt-ink-2); font-size: 12.8px; line-height: 1.8; }
html[data-template="botanical"] .expand-sense {
align-self: center; margin-top: 10px; padding: 5px 15px;
font-size: 12.5px; color: var(--bt-sage-ink);
background: rgba(255, 253, 246, .85);
border: 1px solid rgba(126, 156, 130, .35); border-radius: 8px;
cursor: pointer;
transition: background .15s, border-color .15s;
}
html[data-template="botanical"] .expand-sense:hover { background: #fff; border-color: var(--bt-sage); }
html[data-template="botanical"] .expand-sense:active { background: var(--bt-sage-soft); }
/* ---------- 接龙：柔和圆角钮 + 一道极细的弧线箭头 ----------
* 把「→」藏掉，用 border-radius 把一条上边框弯成弧，右端加一个小折角。
* 直线读成流程，弧线读成「一路走过去」—— 这是这一版唯一想要的动感。 */
html[data-template="botanical"] .tabs { gap: 6px; margin-bottom: 20px; border-bottom: 1px solid var(--bt-line); }
html[data-template="botanical"] .tab {
padding: 8px 16px; border: 0; border-bottom: 2px solid transparent;
font-size: 14.5px; color: var(--bt-ink-2); margin-bottom: -1px;
transition: color .16s, border-color .16s;
}
html[data-template="botanical"] .tab:hover { color: var(--bt-sage-ink); }
html[data-template="botanical"] .tab.active {
color: var(--bt-sage-ink); font-weight: 600;
border-bottom-color: var(--bt-sage);
}
html[data-template="botanical"] .jielong-chain { gap: 10px; align-items: center; margin-bottom: 18px; }
html[data-template="botanical"] .jielong-node {
min-width: 92px; padding: 10px 18px; gap: 2px;
border: 1px solid rgba(126, 156, 130, .30); border-radius: 12px;
background: var(--bt-paper);
box-shadow: 0 1px 2px rgba(74, 88, 72, .03);
transition: border-color .2s, background .2s, transform .2s;
}
html[data-template="botanical"] .jielong-node:hover {
border-color: rgba(126, 156, 130, .62);
background: #F8FAF1;
transform: translateY(-1px);
}
html[data-template="botanical"] .jielong-node.current {
background: var(--bt-sage-soft);
border-color: rgba(110, 140, 115, .58);
box-shadow: 0 0 0 3px rgba(126, 156, 130, .14);
}
html[data-template="botanical"] .jielong-node .jw {
font-family: var(--bt-serif); font-size: 16px; font-weight: 600; color: var(--bt-ink);
}
html[data-template="botanical"] .jielong-node.current .jw { color: #3C5140; }
html[data-template="botanical"] .jielong-node .jp { font-size: 11.5px; color: var(--bt-ink-3); letter-spacing: .04em; }
html[data-template="botanical"] .jielong-node.current .jp { color: var(--bt-sage-ink); }
html[data-template="botanical"] .jielong-arrow {
position: relative; flex: 0 0 32px;
width: 32px; height: 14px;
font-size: 0; color: transparent; overflow: hidden;
}
html[data-template="botanical"] .jielong-arrow::before {
content: ''; position: absolute; left: 0; right: 8px; top: 3px; height: 6px;
border-top: 1.4px solid rgba(126, 156, 130, .78);
border-radius: 50% 50% 0 0 / 100% 100% 0 0;
}
html[data-template="botanical"] .jielong-arrow::after {
content: ''; position: absolute; right: 2px; top: 6px;
width: 6px; height: 6px;
border-top: 1.5px solid rgba(126, 156, 130, .82);
border-right: 1.5px solid rgba(126, 156, 130, .82);
transform: rotate(45deg);
}
html[data-template="botanical"] .btn-regen {
padding: 7px 18px; font-size: 13.5px; cursor: pointer;
color: var(--bt-sage-ink); background: var(--bt-paper);
border: 1px solid rgba(126, 156, 130, .45); border-radius: 10px;
transition: background .15s, border-color .15s;
}
html[data-template="botanical"] .btn-regen:hover { background: var(--bt-sage-soft); border-color: var(--bt-sage); }
html[data-template="botanical"] .btn-regen:disabled { opacity: .5; cursor: default; }
/* ---------- 相关成语：安静的四列卡片，阴影压到几乎看不见 ---------- */
html[data-template="botanical"] .related-grid { gap: 12px; }
html[data-template="botanical"] .related-item {
padding: 15px 16px 17px; gap: 5px;
border: 1px solid var(--bt-line); border-radius: 14px;
background: var(--bt-paper);
box-shadow: 0 1px 2px rgba(74, 88, 72, .025);
transition: border-color .2s, box-shadow .2s, background .2s;
}
html[data-template="botanical"] .related-item:hover {
background: #fff;
border-color: rgba(126, 156, 130, .48);
box-shadow: 0 6px 16px rgba(74, 88, 72, .07);
}
html[data-template="botanical"] .related-item .rw {
font-family: var(--bt-serif); font-size: 16.5px; font-weight: 600;
color: var(--bt-ink); letter-spacing: .06em;
}
html[data-template="botanical"] .related-item .rw-py { font-size: 11.5px; color: var(--bt-ink-3); letter-spacing: .04em; }
html[data-template="botanical"] .related-item small { font-size: 12.5px; color: var(--bt-ink-2); line-height: 1.72; }
html[data-template="botanical"] .tags-of-idiom .chips { gap: 8px; }
/* ---------- 列表页（搜索 / 拼音 / 标签） ---------- */
html[data-template="botanical"] .list-head { padding: 26px 0 10px; }
html[data-template="botanical"] .list-head h1 {
font-family: var(--bt-serif); font-size: 26px; font-weight: 600;
letter-spacing: .08em; color: var(--bt-ink); line-height: 1.5;
}
html[data-template="botanical"] .muted { color: var(--bt-ink-3); font-size: 13.5px; }
html[data-template="botanical"] .result-list {
border-radius: 16px; background: var(--bt-cream);
border: 1px solid var(--bt-line);
box-shadow: 0 1px 2px rgba(74, 88, 72, .03), 0 10px 26px rgba(74, 88, 72, .04);
overflow: hidden;
}
html[data-template="botanical"] .result-item { padding: 14px 20px; border-bottom: 1px solid rgba(229, 223, 204, .85); }
html[data-template="botanical"] .result-item:hover { background: #F7FBF4; }
html[data-template="botanical"] .result-item .rw { font-family: var(--bt-serif); font-weight: 600; color: var(--bt-sage-ink); }
html[data-template="botanical"] .result-item .rp { color: var(--bt-ink-3); }
html[data-template="botanical"] .result-item .re { color: var(--bt-ink-2); }
html[data-template="botanical"] .letters { gap: 8px; }
html[data-template="botanical"] .letter {
border: 1px solid var(--bt-line); border-radius: 10px;
background: var(--bt-paper); color: var(--bt-sage-ink);
font-weight: 600;
transition: border-color .16s, background .16s, transform .16s;
}
html[data-template="botanical"] .letter:hover {
border-color: rgba(126, 156, 130, .6);
background: var(--bt-sage-soft);
transform: translateY(-1px);
}
html[data-template="botanical"] .letter.empty {
color: #8A9287; background: #F2EFE4; border-color: rgba(213, 205, 183, .7);
}
html[data-template="botanical"] .hot-grid { gap: 12px; }
html[data-template="botanical"] .hot-item {
border: 1px solid var(--bt-line); border-radius: 14px;
background: var(--bt-paper); padding: 14px 16px;
box-shadow: 0 1px 2px rgba(74, 88, 72, .025);
transition: border-color .18s, box-shadow .18s;
}
html[data-template="botanical"] .hot-item:hover {
border-color: rgba(126, 156, 130, .5);
box-shadow: 0 6px 16px rgba(74, 88, 72, .07);
}
html[data-template="botanical"] .hot-word { font-family: var(--bt-serif); font-weight: 600; color: var(--bt-ink); }
html[data-template="botanical"] .hot-pinyin { color: var(--bt-sage-ink); }
html[data-template="botanical"] .hot-expl { color: var(--bt-ink-2); }
html[data-template="botanical"] .pager a {
border: 1px solid var(--bt-line); border-radius: 10px; padding: 6px 16px;
background: var(--bt-paper); color: var(--bt-sage-ink); font-weight: 600;
transition: border-color .16s, background .16s;
}
html[data-template="botanical"] .pager a:hover {
border-color: rgba(126, 156, 130, .6); background: var(--bt-sage-soft);
}
html[data-template="botanical"] .pager span { color: var(--bt-ink-3); }
html[data-template="botanical"] .empty { color: var(--bt-ink-3); }
html[data-template="botanical"] .friend-links .fl-list li { border-bottom: 1px solid rgba(229, 223, 204, .9); }
html[data-template="botanical"] .friend-links .fl-list a { color: var(--bt-ink-2); }
html[data-template="botanical"] .friend-links .fl-list a:hover { color: var(--bt-sage-ink); }
/* ---------- 字典页 / 词语页：同一套语法，只补差异 ---------- */
html[data-template="botanical"] .sense-pos {
background: var(--bt-sage-soft); color: var(--bt-sage-ink);
border-radius: 6px; font-weight: 600;
}
html[data-template="botanical"] .sense-title { font-weight: 600; color: var(--bt-ink); }
html[data-template="botanical"] .dr-item { border-bottom: 1px dashed rgba(126, 156, 130, .26); }
html[data-template="botanical"] .dr-num {
background: var(--bt-sage-soft); color: var(--bt-sage-ink);
border-radius: 50%;
}
html[data-template="botanical"] .dr-type {
background: var(--bt-mint-soft); color: #3D6B5D; border-radius: 6px;
}
html[data-template="botanical"] .dr-quote,
html[data-template="botanical"] .dr-example,
html[data-template="botanical"] .example {
border-radius: 10px; background: #F2F6EC;
border-left: 2px solid var(--bt-sage-2);
color: var(--bt-ink-2);
}
html[data-template="botanical"] .dr-label { border-radius: 6px; border-color: var(--bt-line); color: var(--bt-ink-2); }
html[data-template="botanical"] .dr-link { color: var(--bt-sage-ink); }
/* ---------- 404：宋体的数字，一朵叶子在旁边 ---------- */
html[data-template="botanical"] .not-found h1 {
font-family: var(--bt-serif);
font-size: 76px; font-weight: 600; letter-spacing: .1em;
color: #86A188;
}
html[data-template="botanical"] .not-found p { color: var(--bt-ink-2); }
html[data-template="botanical"] .back a { color: var(--bt-sage-ink); font-weight: 600; }
/* ---------- 页脚：一张浅苔色的纸，不用深色 ----------
* 深色页脚一压，整页的「安静」就断了；这里靠色阶差收口，
* 也就不用把 body 改成 flex 列去压页脚（那会踩 min-width 的老坑）。 */
html[data-template="botanical"] .site-footer {
margin-top: 44px; color: var(--bt-ink-2);
background: #E9ECDC;
border-top: 1px solid rgba(126, 156, 130, .34);
}
html[data-template="botanical"] .footer-inner { padding: 24px 16px; gap: 10px; }
html[data-template="botanical"] .footer-nav { gap: 4px; }
html[data-template="botanical"] .footer-nav a {
color: #43503F; font-size: 13.5px; padding: 3px 10px; border-radius: 8px;
}
html[data-template="botanical"] .footer-nav a:hover { color: var(--bt-sage-ink); background: rgba(255, 255, 255, .55); }
html[data-template="botanical"] .footer-hub { border-top: 1px solid rgba(126, 156, 130, .28); }
html[data-template="botanical"] .footer-hub .fh-label { color: #5B685C; }
html[data-template="botanical"] .footer-hub a { color: #4F5C51; }
html[data-template="botanical"] .footer-hub a:hover { color: var(--bt-sage-ink); }
html[data-template="botanical"] .copyright { color: #5B685C; font-size: 12.5px; }
/* ---------- 首页：一块安静的园门横幅 ---------- */
html[data-template="botanical"] .hero { position: relative; padding: 54px 0 32px; }
html[data-template="botanical"] .hero::before {
content: ''; position: absolute; z-index: -1; left: 50%; top: 0;
transform: translateX(-50%);
width: min(760px, 96%); height: 280px;
background:
radial-gradient(closest-side, rgba(255, 253, 246, .85), rgba(255, 253, 246, 0) 74%),
radial-gradient(closest-side, rgba(200, 219, 198, .40), rgba(200, 219, 198, 0) 82%);
pointer-events: none;
}
html[data-template="botanical"] .hero h1 {
font-family: var(--bt-serif);
font-size: clamp(32px, 4.2vw, 48px); font-weight: 600;
letter-spacing: .12em; text-indent: .12em; line-height: 1.4;
color: var(--bt-ink); margin-bottom: 14px;
}
html[data-template="botanical"] .hero-sub { color: var(--bt-ink-2); font-size: 14.5px; margin-bottom: 26px; letter-spacing: .04em; }
html[data-template="botanical"] .hero-sub strong { color: var(--bt-sage-ink); font-weight: 600; }
html[data-template="botanical"] .hero-search { gap: 10px; max-width: 560px; }
html[data-template="botanical"] .hero-search input {
height: 50px; padding: 0 18px; font-size: 15.5px;
border: 1px solid var(--bt-line-2); border-radius: 14px;
background: var(--bt-paper);
box-shadow: inset 0 1px 2px rgba(74, 88, 72, .05);
transition: border-color .18s, box-shadow .18s;
}
html[data-template="botanical"] .hero-search input:focus {
border-color: var(--bt-sage);
box-shadow: 0 0 0 4px rgba(126, 156, 130, .18);
}
html[data-template="botanical"] .hero-search button {
height: 50px; padding: 0 26px; font-size: 15px; font-weight: 600;
border: 0; border-radius: 14px;
background: var(--bt-sage-ink); color: #FAF6EC;
letter-spacing: .06em;
transition: background .18s;
}
html[data-template="botanical"] .hero-search button:hover { background: #435E48; }
/* ---------- 动效：像纸页轻轻翻上来，绝不超过 8px ---------- */
@keyframes bt-rise {
from { opacity: 0; transform: translateY(8px); }
to { opacity: 1; transform: none; }
}
html[data-template="botanical"] .detail > .card { animation: bt-rise .46s cubic-bezier(.22, .7, .3, 1) both; }
html[data-template="botanical"] .detail > .card:nth-of-type(1) { animation-delay: .02s; }
html[data-template="botanical"] .detail > .card:nth-of-type(2) { animation-delay: .06s; }
html[data-template="botanical"] .detail > .card:nth-of-type(3) { animation-delay: .10s; }
html[data-template="botanical"] .detail > .card:nth-of-type(n+4) { animation-delay: .14s; }
html[data-template="botanical"] .detail .tab-panel:not([hidden]) { animation: bt-rise .26s ease-out; }
@media (prefers-reduced-motion: reduce) {
html[data-template="botanical"] .detail > .card,
html[data-template="botanical"] .detail .tab-panel:not([hidden]) { animation: none; }
html[data-template="botanical"] .jielong-node,
html[data-template="botanical"] .related-item,
html[data-template="botanical"] .letter,
html[data-template="botanical"] .hot-item { transition: none; }
}
/* ---------- 响应式 ---------- */
@media (max-width: 1024px) {
html[data-template="botanical"] .detail .related-grid { grid-template-columns: repeat(3, 1fr); }
/* 三字成语只有三张卡，两列网格会剩半个空格子，看着像漏了一张。
换 flex 等分：第三张自动撑满一行，几张卡都不会留洞。 */
html[data-template="botanical"] .detail .char-decompose { display: flex; flex-wrap: wrap; }
html[data-template="botanical"] .detail .char-item { flex: 1 1 calc(50% - 7px); min-width: 0; }
html[data-template="botanical"] .detail-head::before,
html[data-template="botanical"] .detail-head::after { display: none; }
}
@media (max-width: 860px) {
html[data-template="botanical"] .card { padding: 24px 22px 26px; }
html[data-template="botanical"] .detail .related-grid { grid-template-columns: repeat(2, 1fr); }
html[data-template="botanical"] .detail-head h1 { letter-spacing: .07em; text-indent: .07em; }
}
@media (max-width: 640px) {
html[data-template="botanical"] .site-header .container { padding: 0 13px; }
html[data-template="botanical"] .header-inner { min-height: 58px; gap: 10px; }
html[data-template="botanical"] .logo { font-size: 17px; letter-spacing: .05em; }
html[data-template="botanical"] .logo::before { width: 11px; height: 11px; margin-right: 7px; }
/* 基础样式在手机上整条藏掉导航，这里改成横滑 */
html[data-template="botanical"] .nav {
display: flex; flex-wrap: nowrap; gap: 0;
overflow-x: auto; scrollbar-width: none;
}
html[data-template="botanical"] .nav::-webkit-scrollbar { display: none; }
html[data-template="botanical"] .nav a { flex: 0 0 auto; padding: 4px 10px; font-size: 12.5px; }
html[data-template="botanical"] .nav a + a::before { height: 11px; }
html[data-template="botanical"] .search-box { flex-basis: 100%; max-width: none; gap: 7px; margin-top: 2px; }
html[data-template="botanical"] .search-box input { height: 36px; font-size: 13px; padding: 0 12px; }
html[data-template="botanical"] .search-box button { height: 36px; padding: 0 15px; font-size: 13px; }
html[data-template="botanical"] .breadcrumb { padding-top: 16px; font-size: 11.5px; }
html[data-template="botanical"] .detail-head { padding: 32px 4px 14px; }
html[data-template="botanical"] .detail-head h1 {
font-size: clamp(30px, 9.6vw, 42px);
letter-spacing: .05em; text-indent: .05em;
padding-bottom: 16px; margin-bottom: 8px;
}
html[data-template="botanical"] .detail-head h1::after { width: 72px; height: 1.5px; }
html[data-template="botanical"] .detail-head .pinyin { font-size: 12.5px; letter-spacing: .16em; }
html[data-template="botanical"] .tags { gap: 8px; padding: 16px 0 10px; }
html[data-template="botanical"] .tag { padding: 4px 11px 5px; gap: 6px; border-radius: 8px; }
html[data-template="botanical"] .tag::before { width: 6px; height: 6px; }
html[data-template="botanical"] .tag-label { font-size: 10.5px; }
html[data-template="botanical"] .tag-value { font-size: 12.5px; }
html[data-template="botanical"] .grid-figure { margin-bottom: 20px; }
html[data-template="botanical"] .grid-img {
box-shadow:
0 0 0 1px rgba(126, 156, 130, .26),
0 0 0 7px var(--bt-oat-2),
0 0 0 8px rgba(126, 156, 130, .14),
0 8px 18px rgba(74, 88, 72, .07);
}
html[data-template="botanical"] .detail .card { padding: 22px 17px 24px; margin-bottom: 16px; border-radius: 16px; }
html[data-template="botanical"] .detail .card h2 { font-size: 18px; padding: 0 0 12px 24px; margin-bottom: 17px; }
html[data-template="botanical"] .detail .card h2::before { width: 14px; height: 14px; top: 5px; }
html[data-template="botanical"] .detail .explanation { font-size: 16.5px; line-height: 1.95; }
/* 枝条在窄屏压小、往下让出标题的位置，否则会盖住「的意思」三个字 */
html[data-template="botanical"] .detail .card:has(.explanation)::after {
width: 108px; height: 66px; right: 8px; top: auto; bottom: 8px;
opacity: .6;
}
html[data-template="botanical"] .detail .field { grid-template-columns: 1fr; gap: 5px; padding: 13px 0; }
html[data-template="botanical"] .detail .field dt { font-size: 12.5px; }
html[data-template="botanical"] .detail .field dd { font-size: 15px; }
html[data-template="botanical"] .detail .field dd.quote { font-size: 14.5px; padding: 10px 13px; border-radius: 8px; }
html[data-template="botanical"] .detail .zju-list { padding-left: 19px; }
html[data-template="botanical"] .detail .zju-list li { font-size: 15px; }
html[data-template="botanical"] .detail .story { font-size: 15.5px; }
html[data-template="botanical"] .detail .syn-ant > strong { display: block; width: fit-content; }
html[data-template="botanical"] .detail .char-decompose { gap: 10px; }
html[data-template="botanical"] .detail .char-item { padding: 18px 14px 20px; }
html[data-template="botanical"] .detail .char-glyph { width: 62px; height: 62px; font-size: 34px; }
html[data-template="botanical"] .detail .char-item::before { width: 22px; height: 22px; right: 9px; top: 9px; }
html[data-template="botanical"] .detail .char-item:nth-child(n)::before { width: 22px; height: 22px; }
/* 接龙：竖排，弧线改成向左侧探头 */
html[data-template="botanical"] .detail .jielong-chain {
flex-direction: column; align-items: flex-start; gap: 6px;
}
html[data-template="botanical"] .detail .jielong-node { min-width: 0; padding: 8px 16px; }
/* 竖排时空间只有 12px 宽，6px 的 box 加椭圆圆角只会挤出一个「小钩子」。
这一档放弃弧线，改成一条细竖线 + 下折角：在 12px 里它才是箭。 */
html[data-template="botanical"] .detail .jielong-arrow {
flex: 0 0 12px; width: 12px; height: 26px; margin: 0 0 0 22px;
overflow: visible;
}
html[data-template="botanical"] .detail .jielong-arrow::before {
left: 5px; right: auto; top: 0; bottom: 7px; width: 0; height: auto;
border-top: 0;
border-left: 1.4px solid rgba(126, 156, 130, .8);
border-radius: 0;
}
html[data-template="botanical"] .detail .jielong-arrow::after {
right: auto; left: 2.5px; top: auto; bottom: 1px;
width: 5px; height: 5px;
border-top: 1.4px solid rgba(126, 156, 130, .8);
border-right: 1.4px solid rgba(126, 156, 130, .8);
transform: rotate(135deg);
}
html[data-template="botanical"] .detail .tabs { flex-wrap: wrap; gap: 2px; }
html[data-template="botanical"] .detail .tab { padding: 7px 12px; font-size: 13px; }
html[data-template="botanical"] .detail .btn-regen { padding: 6px 15px; font-size: 13px; }
html[data-template="botanical"] .detail .related-grid { gap: 10px; }
html[data-template="botanical"] .detail .related-item { padding: 13px 13px 15px; border-radius: 12px; }
html[data-template="botanical"] .detail .related-item .rw { font-size: 15.5px; }
html[data-template="botanical"] .hero { padding: 40px 0 26px; }
html[data-template="botanical"] .hero::before { height: 200px; }
html[data-template="botanical"] .hero h1 { font-size: clamp(26px, 8.6vw, 34px); letter-spacing: .08em; text-indent: .08em; }
html[data-template="botanical"] .hero-sub { font-size: 12.5px; line-height: 1.95; margin-bottom: 20px; }
html[data-template="botanical"] .hero-search { gap: 8px; flex-wrap: nowrap; }
html[data-template="botanical"] .hero-search input { height: 46px; padding: 0 14px; font-size: 14.5px; }
html[data-template="botanical"] .hero-search button { height: 46px; padding: 0 16px; font-size: 13.5px; flex: 0 0 auto; white-space: nowrap; }
html[data-template="botanical"] .card { padding: 20px 16px 22px; border-radius: 14px; }
html[data-template="botanical"] .card h2 { font-size: 17.5px; padding-left: 24px; }
html[data-template="botanical"] .letters { grid-template-columns: repeat(auto-fill, minmax(60px, 1fr)); gap: 8px; }
html[data-template="botanical"] .list-head h1 { font-size: 22px; }
html[data-template="botanical"] .result-item { padding: 13px 15px; }
html[data-template="botanical"] .not-found h1 { font-size: 58px; }
html[data-template="botanical"] .site-footer { margin-top: 34px; }
html[data-template="botanical"] .footer-inner { padding: 20px 14px; }
}
@media (max-width: 400px) {
html[data-template="botanical"] .detail-head h1 { font-size: clamp(26px, 9.4vw, 32px); letter-spacing: .03em; text-indent: .03em; }
html[data-template="botanical"] .detail .tag { padding: 4px 10px 5px; }
html[data-template="botanical"] .detail .tag-value { font-size: 12px; }
html[data-template="botanical"] .detail .char-glyph { width: 54px; height: 54px; font-size: 30px; }
}
/* ── 组词词条的静态态（chips 不上链接时的外观） ──────────────────────
适用：词语栏目不在当前站的访问范围内时，字典页的组词词条改为纯文本。
内容一个字不少，只是不再是 ；跳转统一走下方「查看全部 N 个组词」。
选择器必须写到 .chips .chip.chip-static（0,4,1）这一档：candy 的
「html[data-template="candy"] .chips .chip-py:nth-of-type(4n+1)」
也是 (0,4,1)，靠这一点同级 + 本段在文件末尾才压得住；只写 (0,3,1)
会被糖果色周期配色盖掉，静态词条看着仍像按钮。 */
html[data-template] .chips .chip.chip-static {
background: transparent;
border: 1px solid var(--border, #EAE5DA);
box-shadow: none;
transform: none;
cursor: default;
}
html[data-template] .chips .chip.chip-static .cp-word { color: var(--ink, #222222); }
html[data-template] .chips .chip.chip-static .cp-py { color: var(--ink-faint, #999999); }