/* ============================================================
   国学九卷 — 设计系统
   汝窑天青 / 宣纸 / 朱砂印 + 每卷一色
   ============================================================ */
:root{
  --paper:#F6F1E6; --paper-2:#EFE8D8; --paper-3:#E7DECB;
  --line:rgba(43,43,40,.14); --line-2:rgba(43,43,40,.28);
  --ink:#26251F; --ink-2:#55514A; --ink-3:#847E72;
  --celadon:#7E9E98; --celadon-deep:#3F615C;
  --vermilion:#A6342E;
  --vol:#3F615C; --vol-2:#8FB4AD;
  --vol-tint:color-mix(in srgb, var(--vol) 10%, transparent);
  --vol-tint-2:color-mix(in srgb, var(--vol) 20%, transparent);
  --noise:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='150' height='150'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='.045'/></svg>");
  --shadow:0 1px 2px rgba(43,43,40,.05), 0 6px 22px rgba(43,43,40,.07);
  --shadow-lg:0 2px 6px rgba(43,43,40,.07), 0 18px 46px rgba(43,43,40,.13);
  --r:14px; --r-sm:9px;
  --serif:'Noto Serif SC','Songti SC','STSong',serif;
  --sans:'Noto Sans SC','PingFang SC','Microsoft YaHei',sans-serif;
  --sidebar:268px;
  --maxw:980px;
}
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]){
  --paper:#171A19; --paper-2:#1E2321; --paper-3:#272D2A;
  --line:rgba(236,230,214,.14); --line-2:rgba(236,230,214,.26);
  --ink:#EDE7D8; --ink-2:#BDB6A6; --ink-3:#8C867A;
  --celadon:#8FB4AD; --celadon-deep:#BFDBD4; --vermilion:#DD8477;
  --vol:#9DBDB6; --vol-2:#6E8C86;
  --noise:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='150' height='150'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/></filter><rect fill='%23fff' width='100%25' height='100%25' filter='url(%23n)' opacity='.05'/></svg>");
  --shadow:0 1px 2px rgba(0,0,0,.3), 0 6px 22px rgba(0,0,0,.3);
  --shadow-lg:0 2px 6px rgba(0,0,0,.35), 0 18px 46px rgba(0,0,0,.45);
}}
:root[data-theme="dark"]{
  --paper:#171A19; --paper-2:#1E2321; --paper-3:#272D2A;
  --line:rgba(236,230,214,.14); --line-2:rgba(236,230,214,.26);
  --ink:#EDE7D8; --ink-2:#BDB6A6; --ink-3:#8C867A;
  --celadon:#8FB4AD; --celadon-deep:#BFDBD4; --vermilion:#DD8477;
  --vol:#9DBDB6; --vol-2:#6E8C86;
  --noise:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='150' height='150'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/></filter><rect fill='%23fff' width='100%25' height='100%25' filter='url(%23n)' opacity='.05'/></svg>");
  --shadow:0 1px 2px rgba(0,0,0,.3), 0 6px 22px rgba(0,0,0,.3);
  --shadow-lg:0 2px 6px rgba(0,0,0,.35), 0 18px 46px rgba(0,0,0,.45);
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth; scroll-padding-top:86px;}
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto;}
  *{animation-duration:.001ms!important; transition-duration:.001ms!important;}
  .rv{opacity:1!important; transform:none!important;} }
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--serif); line-height:1.85; -webkit-font-smoothing:antialiased;
  font-size:16px;
}
/* 宣纸纹理：直接铺在 body 背景上。
   早先用的是 position:fixed + mix-blend-mode 的伪元素覆盖层，
   那会让部分浏览器在滚动时整屏不重绘，已弃用。 */
body{
  background-image:var(--noise);
  background-repeat:repeat;
}
a{color:var(--vol); text-underline-offset:3px;}
:where(a,button,input,summary,[tabindex]):focus-visible{outline:2px solid var(--vermilion); outline-offset:3px; border-radius:4px;}
.sans{font-family:var(--sans);}
img,svg{max-width:100%;}

/* reveal */
.rv{opacity:0; transform:translateY(16px); transition:opacity .6s ease, transform .6s ease;}
.rv.in{opacity:1; transform:none;}

/* ---------------- layout ---------------- */
.shell{position:relative; z-index:1; display:flex; min-height:100vh;}
main{flex:1; min-width:0; padding:0 clamp(16px,4vw,54px) 90px; }
.wrap{max-width:var(--maxw); margin:0 auto;}

/* ---------------- sidebar ---------------- */
.sidebar{
  width:var(--sidebar); flex:0 0 var(--sidebar); position:sticky; top:0; height:100vh;
  overflow-y:auto; padding:26px 20px 30px; border-right:1px solid var(--line);
  background:var(--paper-2); scrollbar-width:thin;
}
.brand{display:block; text-decoration:none; color:inherit; margin-bottom:20px;}
.brand .mark{
  width:42px; height:42px; display:grid; place-items:center; border-radius:7px;
  background:var(--vermilion); color:#fff; font-size:22px; font-weight:600;
  box-shadow:0 2px 10px rgba(166,52,46,.3); margin-bottom:10px;
}
.brand h1{margin:0; font-size:21px; letter-spacing:.14em; font-weight:600;}
.brand p{margin:2px 0 0; font-size:11.5px; letter-spacing:.24em; color:var(--ink-3);}

.sb-search{position:relative; margin-bottom:6px;}
.sb-search input{
  width:100%; padding:9px 30px 9px 12px; font-family:var(--sans); font-size:13px;
  border:1px solid var(--line-2); border-radius:8px; background:var(--paper);
  color:var(--ink);
}
.sb-search input::placeholder{color:var(--ink-3);}
.sb-search button{
  position:absolute; right:4px; top:50%; transform:translateY(-50%); border:0; background:none;
  color:var(--ink-3); font-size:17px; cursor:pointer; line-height:1; padding:4px 6px;
}
.search-results{
  position:absolute; left:0; right:0; top:calc(100% + 6px); max-height:60vh; overflow-y:auto;
  background:var(--paper); border:1px solid var(--line-2); border-radius:10px;
  box-shadow:var(--shadow-lg); z-index:40; display:none; padding:5px;
}
.search-results.on{display:block;}
.search-results a{
  display:block; padding:8px 10px; border-radius:7px; text-decoration:none; color:inherit;
}
.search-results a:hover,.search-results a:focus{background:var(--paper-3);}
.search-results .sr-t{font-size:13.5px; font-weight:600; display:block;}
.search-results .sr-m{font-size:11px; color:var(--ink-3); font-family:var(--sans); display:block;}
.search-results .sr-empty{padding:10px; font-size:12.5px; color:var(--ink-3); font-family:var(--sans);}
mark{background:color-mix(in srgb, var(--vol) 22%, transparent); color:inherit; border-radius:3px; padding:0 1px;}

.toc{display:flex; flex-direction:column; gap:1px; margin-top:16px;}
.nav-link{
  display:flex; align-items:center; gap:10px; padding:8px 10px; border-radius:8px;
  text-decoration:none; color:var(--ink-2); font-size:14.5px; transition:background .18s,color .18s;
}
.nav-link .num{
  flex:0 0 22px; height:22px; display:grid; place-items:center; border-radius:5px;
  font-size:11.5px; font-family:var(--sans); background:var(--paper-3); color:var(--ink-3);
  transition:background .18s,color .18s;
}
.nav-link:hover{background:var(--paper-3); color:var(--ink);}
.nav-link.active{background:color-mix(in srgb, var(--vol) 12%, transparent); color:var(--ink); font-weight:600;}
.nav-link.active .num{background:var(--vol); color:var(--paper);}
.nav-link.index-link{margin-top:10px; padding-left:12px; border-top:1px solid var(--line); border-radius:0; padding-top:14px; font-size:13.5px;}
.sb-foot{margin-top:22px; padding-top:14px; border-top:1px solid var(--line); display:flex; gap:8px; align-items:center;}
.tbtn{
  font-family:var(--sans); font-size:11.5px; padding:6px 11px; border-radius:7px; cursor:pointer;
  border:1px solid var(--line-2); background:var(--paper); color:var(--ink-2);
}
.tbtn:hover{background:var(--paper-3); color:var(--ink);}

.menu-btn,.scrim{display:none;}

/* ---------------- hero (首页) ---------------- */
.cover{padding:clamp(48px,9vw,96px) 0 10px; text-align:center; position:relative;}
.cover h2{font-size:clamp(34px,6.4vw,58px); margin:0 0 6px; letter-spacing:.2em; font-weight:600;}
.cover .en{font-family:var(--sans); font-size:11px; letter-spacing:.42em; color:var(--ink-3); text-transform:uppercase;}
.brush{display:block; margin:16px auto 20px; width:min(240px,60%); height:22px; overflow:visible;}
.brush path{fill:none; stroke:var(--vermilion); stroke-width:2.4; stroke-linecap:round; opacity:.75;
  stroke-dasharray:1; stroke-dashoffset:1; animation:draw 1.5s ease forwards .25s;}
@keyframes draw{to{stroke-dashoffset:0;}}
.cover .lede{max-width:640px; margin:0 auto; color:var(--ink-2); font-size:16.5px;}

.grid9{display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin:44px 0 10px;}
.vol-card{
  --c:var(--celadon-deep);
  position:relative; display:block; text-decoration:none; color:inherit; overflow:hidden;
  padding:22px 20px 20px; border:1px solid var(--line); border-radius:var(--r);
  background:var(--paper-2); box-shadow:var(--shadow); transition:transform .22s, box-shadow .22s, border-color .22s;
}
.vol-card::before{content:""; position:absolute; inset:0 auto 0 0; width:3px; background:var(--c);}
.vol-card::after{
  content:attr(data-g); position:absolute; right:-14px; bottom:-30px; font-size:112px; line-height:1;
  color:var(--c); opacity:.08; pointer-events:none; font-weight:600;
}
.vol-card:hover{transform:translateY(-4px); box-shadow:var(--shadow-lg); border-color:var(--c);}
.vol-card .g-num{
  display:inline-grid; place-items:center; width:30px; height:30px; border-radius:6px;
  background:var(--c); color:#fff; font-size:14px; margin-bottom:10px;
}
.vol-card .g-title{display:block; font-size:19px; font-weight:600; letter-spacing:.06em;}
.vol-card .g-sub{display:block; font-family:var(--sans); font-size:11.5px; color:var(--ink-3); letter-spacing:.14em; margin-top:3px;}
.vol-card .g-lede{display:block; font-size:13.5px; color:var(--ink-2); margin-top:9px; line-height:1.72;}
.vol-card .g-tags{display:flex; flex-wrap:wrap; gap:5px; margin-top:11px;}
.vol-card .g-tags span{
  font-family:var(--sans); font-size:10.5px; padding:2px 7px; border-radius:20px;
  background:color-mix(in srgb, var(--c) 12%, transparent); color:var(--c);
}

.home-sec{margin:64px 0 0;}
.home-sec > h3{
  font-size:13px; font-family:var(--sans); letter-spacing:.3em; color:var(--ink-3);
  margin:0 0 18px; padding-bottom:9px; border-bottom:1px solid var(--line);
}
.howto{display:grid; grid-template-columns:repeat(3,1fr); gap:14px;}
.howto div{padding:16px 18px; border:1px solid var(--line); border-radius:var(--r-sm); background:var(--paper-2);}
.howto b{display:block; font-size:15px; margin-bottom:5px;}
.howto p{margin:0; font-size:13.5px; color:var(--ink-2); line-height:1.75;}

/* ---------------- volume hero ---------------- */
.crumb{
  display:inline-flex; align-items:center; gap:6px; margin:22px 0 0; font-family:var(--sans);
  font-size:12.5px; color:var(--ink-3); text-decoration:none;
}
.crumb:hover{color:var(--vol);}
.vhero{position:relative; padding:26px 0 30px; border-bottom:1px solid var(--line); overflow:hidden;}
.vhero .seal{
  position:absolute; right:0; top:14px; width:96px; height:96px; display:grid; place-items:center;
  border-radius:10px; background:var(--vol); color:var(--paper); font-size:44px; font-weight:600;
  opacity:.14; transform:rotate(-6deg);
}
.vhero .kicker{font-family:var(--sans); font-size:11px; letter-spacing:.38em; color:var(--vol); text-transform:uppercase;}
.vhero h2{font-size:clamp(30px,5.6vw,46px); margin:6px 0 4px; letter-spacing:.14em; font-weight:600;}
.vhero .gloss{font-family:var(--sans); font-size:13px; letter-spacing:.24em; color:var(--ink-3); margin:0;}
.vhero .lede{
  margin:18px 0 0; max-width:64ch; font-size:18px; line-height:1.8; color:var(--ink);
  padding-left:16px; border-left:3px solid var(--vol);
}
.vhero .intro{margin:16px 0 0; max-width:70ch; color:var(--ink-2); font-size:15.5px;}

.stats{display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin:26px 0 0;}
.stat{
  padding:14px 14px 12px; border-radius:var(--r-sm); background:var(--paper-2);
  border:1px solid var(--line); border-top:2px solid var(--vol);
}
.stat b{display:block; font-size:28px; line-height:1.15; color:var(--vol); font-weight:600;}
.stat .sn{display:block; font-size:14px; font-weight:600; margin-top:2px;}
.stat .sx{display:block; font-family:var(--sans); font-size:11px; color:var(--ink-3); margin-top:2px; line-height:1.5;}

/* ---------------- sticky subnav ---------------- */
.subnav{
  position:sticky; top:0; z-index:30; margin:0 calc(-1*clamp(16px,4vw,54px)); padding:9px clamp(16px,4vw,54px);
  background:color-mix(in srgb, var(--paper) 88%, transparent); backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.subnav-in{max-width:var(--maxw); margin:0 auto; display:flex; gap:6px; overflow-x:auto; scrollbar-width:none;}
.subnav-in::-webkit-scrollbar{display:none;}
.subnav a{
  flex:0 0 auto; font-family:var(--sans); font-size:12.5px; padding:6px 13px; border-radius:20px;
  text-decoration:none; color:var(--ink-2); border:1px solid transparent; white-space:nowrap;
  transition:background .18s,color .18s,border-color .18s;
}
.subnav a:hover{background:var(--paper-3); color:var(--ink);}
.subnav a.on{background:var(--vol); color:var(--paper); border-color:var(--vol);}

/* ---------------- section frame ---------------- */
.sec{padding:52px 0 0; scroll-margin-top:80px;}
.sec-vid{padding-top:28px;}  /* 视频无标题，紧接卷首简介 */
.sec-head{margin-bottom:22px;}
.sec-head .lab{
  display:inline-block; font-family:var(--sans); font-size:10.5px; letter-spacing:.3em;
  color:var(--vol); padding:3px 9px; border:1px solid color-mix(in srgb, var(--vol) 22%, transparent); border-radius:20px;
  background:color-mix(in srgb, var(--vol) 12%, transparent);
}
.sec-head h3{font-size:25px; margin:10px 0 0; letter-spacing:.08em; font-weight:600;}
.sec-head p{margin:6px 0 0; font-size:14.5px; color:var(--ink-2); max-width:62ch;}

/* ---------------- cards ---------------- */
.cards{display:grid; grid-template-columns:repeat(auto-fill,minmax(248px,1fr)); gap:13px;}
.card{
  position:relative; overflow:hidden; padding:18px 18px 17px; border-radius:var(--r);
  border:1px solid var(--line); background:var(--paper-2); box-shadow:var(--shadow);
  transition:transform .22s, box-shadow .22s, border-color .22s;
}
.card:hover{transform:translateY(-3px); box-shadow:var(--shadow-lg); border-color:var(--vol-2);}
.card .glyph{
  position:relative; width:46px; height:46px; display:grid; place-items:center; margin-bottom:11px;
}
.card .glyph svg{position:absolute; inset:0; width:46px; height:46px;}
.card .glyph span{position:relative; font-size:21px; font-weight:600; color:var(--vol);}
.card h4{margin:0; font-size:17px; font-weight:600; letter-spacing:.04em;}
.card .meta{font-family:var(--sans); font-size:11px; letter-spacing:.14em; color:var(--ink-3); margin:3px 0 9px; display:block;}
.card p{margin:0; font-size:13.8px; line-height:1.78; color:var(--ink-2);}

/* ---------------- timeline ---------------- */
.tl-filters{display:flex; flex-wrap:wrap; gap:6px; margin-bottom:20px;}
.chip{
  font-family:var(--sans); font-size:11.5px; padding:5px 12px; border-radius:20px; cursor:pointer;
  border:1px solid var(--line-2); background:var(--paper-2); color:var(--ink-2); transition:all .18s;
}
.chip:hover{border-color:var(--vol);}
.chip.on{background:var(--vol); border-color:var(--vol); color:var(--paper);}
.tl{position:relative; padding-left:26px;}
.tl::before{content:""; position:absolute; left:6px; top:6px; bottom:6px; width:2px; background:linear-gradient(color-mix(in srgb, var(--vol) 22%, transparent),var(--vol),color-mix(in srgb, var(--vol) 22%, transparent));}
.tl-item{position:relative; padding:0 0 22px 0;}
.tl-item[hidden]{display:none;}
.tl-item::before{
  content:""; position:absolute; left:-25px; top:9px; width:11px; height:11px; border-radius:50%;
  background:var(--paper); border:2.5px solid var(--vol); transition:transform .2s;
}
.tl-item:hover::before{transform:scale(1.3);}
.tl-head{display:flex; flex-wrap:wrap; align-items:baseline; gap:9px;}
.tl-era{
  font-family:var(--sans); font-size:10.5px; letter-spacing:.14em; padding:2px 8px; border-radius:4px;
  background:color-mix(in srgb, var(--vol) 12%, transparent); color:var(--vol);
}
.tl-y{font-family:var(--sans); font-size:12px; color:var(--ink-3);}
.tl-item h4{margin:0; font-size:17px; font-weight:600; width:100%;}
.tl-item p{margin:5px 0 0; font-size:14px; color:var(--ink-2); line-height:1.78; max-width:66ch;}

/* ---------------- tables ---------------- */
.tbl-block{margin-bottom:34px;}
.tbl-head{display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin-bottom:5px;}
.tbl-head h4{margin:0; font-size:18px; font-weight:600;}
.tbl-note{margin:0 0 12px; font-size:13.5px; color:var(--ink-3); font-family:var(--sans);}
.tbl-filter{
  margin-left:auto; font-family:var(--sans); font-size:12px; padding:5px 11px; border-radius:7px;
  border:1px solid var(--line-2); background:var(--paper); color:var(--ink); width:150px;
}
.tbl-scroll{overflow-x:auto; border:1px solid var(--line); border-radius:var(--r-sm); background:var(--paper-2);}
table.dt{width:100%; border-collapse:collapse; font-size:14px; min-width:420px;}
table.dt th{
  text-align:left; font-family:var(--sans); font-size:11.5px; letter-spacing:.16em; font-weight:500;
  color:var(--paper); background:var(--vol); padding:9px 14px; white-space:nowrap; position:sticky; top:0;
}
table.dt td{padding:9px 14px; border-top:1px solid var(--line); vertical-align:top; line-height:1.7;}
table.dt tbody tr:nth-child(even){background:color-mix(in srgb, var(--vol) 4%, transparent);}
table.dt tbody tr:hover{background:color-mix(in srgb, var(--vol) 12%, transparent);}
table.dt td:first-child{font-weight:600; white-space:nowrap;}
table.dt tr[hidden]{display:none;}
.tbl-empty{padding:16px; font-family:var(--sans); font-size:13px; color:var(--ink-3);}

/* compare table */
.cmp{display:grid; gap:0; border:1px solid var(--line); border-radius:var(--r-sm); overflow:hidden; background:var(--paper-2); font-size:14px;}
.cmp .row{display:grid; border-top:1px solid var(--line);}
.cmp .row:first-child{border-top:0;}
.cmp .row.hd{background:var(--vol); color:var(--paper);}
.cmp .row.hd > *{font-family:var(--sans); font-size:12px; letter-spacing:.16em; padding:10px 14px; font-weight:500;}
.cmp .row > *{padding:10px 14px; line-height:1.72;}
.cmp .row > .k{font-family:var(--sans); font-size:12px; color:var(--ink-3); letter-spacing:.08em; background:color-mix(in srgb, var(--vol) 5%, transparent);}
.cmp .row.hd > .k{color:var(--paper); background:none;}
.cmp .row > * + *{border-left:1px solid var(--line);}

/* ---------------- swatches ---------------- */
.swatches{display:grid; grid-template-columns:repeat(auto-fill,minmax(168px,1fr)); gap:12px;}
.sw{border:1px solid var(--line); border-radius:var(--r-sm); overflow:hidden; background:var(--paper-2);}
.sw .chipc{height:64px; position:relative;}
.sw .chipc::after{content:""; position:absolute; inset:0; box-shadow:inset 0 -1px 0 var(--line);}
.sw .b{padding:10px 12px 12px;}
.sw b{display:block; font-size:15px;}
.sw span{display:block; font-family:var(--sans); font-size:11.5px; color:var(--ink-3); line-height:1.6; margin-top:3px;}

/* ---------------- figure ---------------- */
.fig{
  margin:0; padding:24px 18px 16px; border:1px solid var(--line); border-radius:var(--r);
  background:var(--paper-2); text-align:center;
}
.fig figcaption{
  margin-top:14px; font-family:var(--sans); font-size:12px; color:var(--ink-3); line-height:1.7;
  max-width:60ch; margin-left:auto; margin-right:auto; text-align:center;
}
.fig svg{max-width:100%; height:auto;}
/* 卷首视频：16:9，封面图铺满，未播放前不加载视频 */
.vid{margin:0; border:1px solid var(--line); border-radius:var(--r); overflow:hidden; background:var(--paper-2);}
.vid video{display:block; width:100%; height:auto; aspect-ratio:16/9; background:#000; object-fit:contain;}
.vid figcaption{padding:8px 14px; font-size:12px; color:var(--ink-3); text-align:right;}

/* ---------------- 各卷主图解（沿用原有 SVG 结构） ---------------- */
.star-dot{fill:var(--vermilion);}
  .star-label{font-size:11px; fill:var(--ink); font-family:var(--serif);}
  .wheel-divider{stroke:var(--line); stroke-width:1;}
  .wheel-group{font-size:11.5px; fill:var(--vol); font-family:var(--sans); letter-spacing:.04em;}
  .wheel-ring{fill:none; stroke:var(--line); stroke-width:1;}
  .wheel-center{font-family:var(--serif);}
  .wheel-center-r{fill:none; stroke:var(--vermilion); stroke-width:1.2;}
  .wheel-center-txt{font-size:11px; fill:var(--vermilion);}

  .lv-yang{fill:var(--vermilion-tint); stroke:var(--vermilion); stroke-width:1.5;}
  .lv-yin{fill:color-mix(in srgb, var(--vol) 12%, transparent); stroke:var(--vol); stroke-width:1.5;}
  .lv-text{font-size:10.5px; fill:var(--ink); font-family:var(--serif);}
  .lv-ring{fill:none; stroke:var(--line); stroke-width:1;}

  .fest-dot{fill:var(--vermilion);}
  .fest-label{font-size:12px; fill:var(--ink); font-family:var(--serif);}
  .fest-ring{fill:none; stroke:var(--line); stroke-width:1; stroke-dasharray:3 4;}

  .wx-char{font-size:16px; font-family:var(--serif); fill:#fff;}
  .wx-sub{font-size:9.5px; fill:var(--ink-3); font-family:var(--sans);}
  .wx-0{fill:#5E8478;} .wx-1{fill:#A6342E;} .wx-2{fill:#B8862E;}
  .wx-3{fill:#F2ECDD; stroke:#8a8374; stroke-width:1.2;}
  .wx-4{fill:#2B2B28; stroke:#8a8374; stroke-width:1.2;}
  .wx-3 + .wx-char, text.wx-char.wx-3text{fill:#2B2B28;}
  .wx-ring{fill:none; stroke:var(--line); stroke-width:1;}

  .cun-swatch-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:14px;}
  @media (min-width:560px){ .cun-swatch-grid{grid-template-columns:repeat(4,1fr);} }
  .cun-box{border:1px solid var(--line); background:var(--paper); padding:8px;}
  .cun-box svg{width:100%; height:auto; display:block;}
  .cun-box figcaption{margin-top:8px; font-size:.72rem; text-align:center; color:var(--ink-3); font-family:var(--sans);}
  .cun-line{fill:none; stroke:var(--vol); stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round;}
  .cun-dash{stroke:var(--vol); stroke-width:2; stroke-linecap:round;}
  .cun-facet{fill:none; stroke:var(--vol); stroke-width:1.9; stroke-linejoin:miter; stroke-linecap:square;}

  .flower-svg text{font-family:var(--sans); font-size:12px; fill:var(--ink);}
  .flower-branch{fill:none; stroke:var(--vol); stroke-width:3; stroke-linecap:round;}
  .flower-vase{fill:var(--paper-2); stroke:var(--line); stroke-width:1.5;}
  .flower-dot{fill:var(--vermilion);}
  .flower-tag{fill:var(--ink-3); font-size:10.5px;}

  .tea-diagram{padding-top:10px;}
  .tea-track{position:relative; height:10px; border-radius:6px; margin:56px 24px 54px;
    background:linear-gradient(to right, #cfe0b8, #e8d98a 30%, #e0b56a 55%, #b8603f 100%);}
  .tea-marker{position:absolute; top:50%; transform:translate(-50%,-50%); width:15px; height:15px; border-radius:50%;
    background:var(--vol); border:2px solid var(--paper);}
  .tea-label{position:absolute; top:-44px; transform:translateX(-50%); text-align:center; width:70px;
    font-family:var(--sans); font-size:.72rem; color:var(--ink);}
  .tea-label b{display:block; font-family:var(--serif); font-size:.88rem; font-weight:600; margin-bottom:2px;}
  .tea-label.below{top:20px;}
  .tea-axis{display:flex; justify-content:space-between; font-family:var(--sans); font-size:.68rem; color:var(--ink-3); margin:0 24px;}
  .tea-hei{display:flex; align-items:center; gap:10px; margin-top:8px; font-family:var(--sans); font-size:.78rem; color:var(--ink-3);}
  .tea-hei .sq{width:14px; height:14px; background:var(--vermilion); flex:none;}

  .fig .timeline{position:relative; margin:44px 4px 6px;}
  .fig .timeline .track{position:absolute; left:0; right:0; top:9px; height:2px; background:var(--line);}
  .fig .timeline .stops{display:flex; justify-content:space-between; position:relative;}
  .fig .timeline .stop{display:flex; flex-direction:column; align-items:center; gap:8px; width:64px; text-align:center;}
  .fig .timeline .stop .dot{width:11px; height:11px; border-radius:50%; background:var(--vol); border:2px solid var(--paper); z-index:1;}
  .fig .timeline .stop .era{font-size:.66rem; color:var(--ink-3); font-family:var(--sans);}
  .fig .timeline .stop .name{font-size:.92rem;}


  .fig .tea-track{margin:56px 24px 54px;}
  .fig .cun-box{background:var(--paper); border-radius:6px;}
  .fig .flower-svg text{fill:var(--ink);}
  .fig .wx-sub{fill:var(--ink-3);}

/* ---------------- accordions ---------------- */
.acc-bar{display:flex; gap:8px; margin-bottom:14px; align-items:center;}
.acc{display:flex; flex-direction:column; gap:8px;}
details.it{
  border:1px solid var(--line); border-radius:var(--r-sm); background:var(--paper-2);
  overflow:hidden; transition:border-color .2s, box-shadow .2s;
}
details.it[open]{border-color:var(--vol-2); box-shadow:var(--shadow);}
details.it[hidden]{display:none;}
details.it summary{
  display:flex; align-items:center; gap:11px; padding:13px 16px; cursor:pointer; list-style:none;
  font-size:16.5px; font-weight:600;
}
details.it summary::-webkit-details-marker{display:none;}
details.it summary:hover{background:color-mix(in srgb, var(--vol) 12%, transparent);}
details.it .idx{
  flex:0 0 24px; height:24px; display:grid; place-items:center; border-radius:5px;
  background:color-mix(in srgb, var(--vol) 12%, transparent); color:var(--vol); font-size:12px; font-family:var(--sans); font-weight:500;
}
details.it[open] .idx{background:var(--vol); color:var(--paper);}
details.it .stitle{flex:1;}
details.it summary::after{
  content:"＋"; font-family:var(--sans); color:var(--ink-3); font-size:15px; transition:transform .2s;
}
details.it[open] summary::after{content:"－";}
details.it .body{padding:0 16px 16px 51px;}
details.it .body > p{margin:0; font-size:14.8px; color:var(--ink-2); line-height:1.85;}
.sub{margin-top:14px; padding-top:13px; border-top:1px dashed var(--line-2);}
.sub-label{
  display:inline-block; font-family:var(--sans); font-size:10.5px; letter-spacing:.24em;
  color:var(--vol); margin-bottom:8px;
}
.sub-item{
  margin:0 0 9px; padding:10px 13px; border-radius:var(--r-sm); background:var(--paper);
  border-left:2px solid var(--vol-2); font-size:14px; line-height:1.8; color:var(--ink-2);
}
.sub-item:last-child{margin-bottom:0;}
.sub-item b{color:var(--ink); margin-right:5px;}

/* ---------------- poems ---------------- */
.poems{display:grid; gap:12px;}
.pm{
  position:relative; padding:20px 22px 18px 46px; border-radius:var(--r); background:var(--paper-2);
  border:1px solid var(--line); font-size:15.5px; line-height:1.9; color:var(--ink);
}
.pm::before{
  content:"「"; position:absolute; left:15px; top:12px; font-size:30px; color:var(--vol); opacity:.45; line-height:1;
}
.pm .cp{
  position:absolute; right:10px; top:10px; opacity:0; transition:opacity .18s;
  font-family:var(--sans); font-size:11px; padding:4px 10px; border-radius:6px; cursor:pointer;
  border:1px solid var(--line-2); background:var(--paper); color:var(--ink-2);
}
.pm:hover .cp, .pm .cp:focus{opacity:1;}
.pm .cp.done{color:var(--vol); border-color:var(--vol);}

/* ---------------- terms ---------------- */
.termwall{display:flex; flex-wrap:wrap; gap:8px;}
.term{
  font-size:14.5px; padding:6px 14px; border-radius:22px; cursor:pointer; font-family:var(--serif);
  border:1px solid color-mix(in srgb, var(--vol) 22%, transparent); background:color-mix(in srgb, var(--vol) 12%, transparent); color:var(--vol);
  transition:background .18s, color .18s, transform .18s;
}
.term:hover{background:var(--vol); color:var(--paper); transform:translateY(-2px);}
.term.done{background:var(--vermilion); border-color:var(--vermilion); color:#fff;}
.hint{font-family:var(--sans); font-size:12px; color:var(--ink-3); margin:10px 0 0;}

/* ---------------- pager / footer ---------------- */
.pager{display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:64px;}
.pager a{
  padding:16px 18px; border:1px solid var(--line); border-radius:var(--r); text-decoration:none;
  color:inherit; background:var(--paper-2); transition:border-color .2s, transform .2s;
}
.pager a:hover{border-color:var(--vol); transform:translateY(-2px);}
.pager .pager-next{text-align:right;}
.pager-label{display:block; font-family:var(--sans); font-size:11px; letter-spacing:.2em; color:var(--ink-3);}
.pager-title{display:block; font-size:17px; font-weight:600; margin-top:3px;}
footer{
  margin-top:56px; padding-top:20px; border-top:1px solid var(--line);
  font-family:var(--sans); font-size:12px; color:var(--ink-3); text-align:center;
}

.totop{
  position:fixed; right:22px; bottom:22px; width:42px; height:42px; border-radius:50%; cursor:pointer;
  border:1px solid var(--line-2); background:var(--paper-2); color:var(--ink-2); font-size:13px;
  box-shadow:var(--shadow); opacity:0; pointer-events:none; transition:opacity .25s, transform .25s; z-index:35;
}
.totop.on{opacity:1; pointer-events:auto;}
.totop:hover{background:var(--vol); color:var(--paper); border-color:var(--vol);}

/* ---------------- 索引页 ---------------- */
.idx-groups{display:grid; gap:26px;}
.idx-group h4{margin:0 0 10px; font-size:17px; display:flex; align-items:center; gap:9px;}
.idx-group h4 .dot{width:9px; height:9px; border-radius:50%; background:var(--c,var(--vol));}
.idx-group[hidden]{display:none;}
.toast{
  position:fixed; left:50%; bottom:26px; transform:translate(-50%,14px); z-index:60;
  background:var(--ink); color:var(--paper); font-family:var(--sans); font-size:13px;
  padding:9px 18px; border-radius:22px; opacity:0; pointer-events:none; transition:opacity .22s, transform .22s;
}
.toast.on{opacity:1; transform:translate(-50%,0);}

/* ---------------- responsive ---------------- */
@media (max-width:1040px){ .grid9{grid-template-columns:repeat(2,1fr);} .howto{grid-template-columns:1fr 1fr;} }
@media (max-width:900px){
  .menu-btn{
    display:grid; place-items:center; position:fixed; left:14px; top:14px; z-index:50;
    width:42px; height:42px; border-radius:10px; border:1px solid var(--line-2);
    background:var(--paper-2); color:var(--ink); font-size:17px; cursor:pointer; box-shadow:var(--shadow);
  }
  .sidebar{
    position:fixed; left:0; top:0; z-index:49; transform:translateX(-100%);
    transition:transform .26s ease; box-shadow:var(--shadow-lg);
  }
  .sidebar.open{transform:none;}
  .scrim{display:block; position:fixed; inset:0; background:rgba(0,0,0,.42); z-index:48; opacity:0; pointer-events:none; transition:opacity .26s;}
  .scrim.on{opacity:1; pointer-events:auto;}
  main{padding-top:62px;}
  .subnav{top:0;}
  .stats{grid-template-columns:repeat(2,1fr);}
  .vhero .seal{width:66px; height:66px; font-size:30px;}
}
@media (max-width:640px){
  body{font-size:15.5px;}
  .grid9,.howto{grid-template-columns:1fr;}
  .cards{grid-template-columns:1fr;}
  .pager{grid-template-columns:1fr;}
  .pager .pager-next{text-align:left;}
  details.it .body{padding-left:16px;}
  .cmp .row{grid-template-columns:1fr !important;}
  .cmp .row > * + *{border-left:0; border-top:1px solid var(--line);}
  .cmp .row.hd{display:none;}
  .cmp .row > .k{font-weight:600; color:var(--vol);}
  .cmp .row > [data-col]::before{
    content:attr(data-col) "　"; font-family:var(--sans); font-size:11px; color:var(--ink-3);
  }
  .tbl-filter{margin-left:0; width:100%;}
  .vhero .lede{font-size:16.5px;}
}
@media print{
  .sidebar,.subnav,.totop,.menu-btn,.acc-bar,.tl-filters,.cp{display:none!important;}
  details.it{break-inside:avoid;} details.it .body{display:block!important;}
  body{background:#fff;}
}

/* 每卷一色：浅色/深色两套，深色模式下自动切换 */
.vol-card{--c:var(--c-l,var(--celadon-deep));}
.idx-group{--vol:var(--vol-l,var(--celadon-deep));}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .vol-card{--c:var(--c-d,var(--c-l));}
  :root:not([data-theme="light"]) .idx-group{--vol:var(--vol-d,var(--vol-l));}
}
:root[data-theme="dark"] .vol-card{--c:var(--c-d,var(--c-l));}
:root[data-theme="dark"] .idx-group{--vol:var(--vol-d,var(--vol-l));}
.idx-group h4 .dot{background:var(--vol);}

/* ---------------- 诗词卷：平仄谱图解 ---------------- */
.fig .pz-title{fill:var(--ink); font-family:var(--serif); font-size:14px; font-weight:600;}
.fig .pz-sub{fill:var(--ink-3); font-family:var(--sans); font-size:10.5px;}
.fig .pz-idx{fill:var(--ink-3); font-family:var(--sans); font-size:10px; text-anchor:middle; dominant-baseline:middle;}
.fig .pz-ping{fill:color-mix(in srgb, var(--vol) 10%, transparent); stroke:var(--vol); stroke-width:1;}
.fig .pz-ze{fill:var(--vol); stroke:none;}
.fig .pz-dui{fill:color-mix(in srgb, var(--vermilion) 7%, transparent); stroke:none;}
.fig .pz-ch{fill:var(--vol); font-family:var(--serif); font-size:14px; text-anchor:middle; dominant-baseline:middle;}
.fig .pz-ch-w{fill:var(--paper);}
.fig .pz-yun{fill:var(--vermilion); font-family:var(--serif); font-size:12px; text-anchor:middle; dominant-baseline:middle;}
.fig .pz-lg{fill:var(--ink-2); font-family:var(--sans); font-size:11px; dominant-baseline:middle;}

/* 十卷：末行只剩一张卡时铺满整行 */
.grid9 > :last-child:nth-child(3n+1){grid-column:1 / -1;}
@media (max-width:1040px){ .grid9 > :last-child:nth-child(3n+1){grid-column:auto;} }

/* ================= 朝代维度 ================= */
.nav-sep{
  margin:16px 0 6px; padding:12px 10px 0; border-top:1px solid var(--line);
  font-size:10.5px; letter-spacing:.26em; color:var(--ink-3);
}
.nav-link.chao-link{--c:var(--vol); position:relative;}
.nav-link.chao-link em{
  font-style:normal; margin-left:auto; font-size:10.5px; color:var(--ink-3); letter-spacing:.04em;
}
.nav-link.chao-link .num{font-size:12.5px; font-family:var(--serif);}
.nav-link.chao-link.active em{color:var(--vol);}

.home-note{margin:-6px 0 16px; font-size:14px; color:var(--ink-2); max-width:62ch;}
.grid-chao{grid-template-columns:1fr; margin-top:0;}
.grid-chao .vol-card::after{font-size:150px; right:8px; bottom:-46px;}
.grid-chao .g-lede{max-width:58ch;}

.vhero-chao .seal{font-size:52px;}

/* ---- 长安城图解 ---- */
.fig .ca-wall{fill:color-mix(in srgb, var(--vol) 4%, transparent); stroke:var(--vol); stroke-width:1.6;}
.fig .ca-grid{stroke:var(--line-2); stroke-width:.6; stroke-dasharray:2 3;}
.fig .ca-gridlg{fill:none; stroke:var(--line-2); stroke-width:1; stroke-dasharray:2 3;}
.fig .ca-palace{fill:color-mix(in srgb, var(--vol) 78%, transparent); stroke:none;}
.fig .ca-huang{fill:color-mix(in srgb, var(--vol) 40%, transparent); stroke:none;}
.fig .ca-market{fill:color-mix(in srgb, var(--vermilion) 55%, transparent); stroke:none;}
.fig .ca-street{fill:color-mix(in srgb, var(--vol) 22%, transparent);}
.fig .ca-yuan{fill:color-mix(in srgb, var(--celadon) 16%, transparent); stroke:var(--line-2); stroke-width:.8; stroke-dasharray:4 3;}
.fig .ca-water{fill:color-mix(in srgb, var(--celadon) 38%, transparent); stroke:var(--celadon-deep); stroke-width:1;}
.fig .ca-gate{fill:var(--vermilion);}
.fig .ca-dot{fill:var(--vermilion);}
.fig .ca-lb{fill:var(--paper); font-family:var(--serif); font-size:13px; font-weight:600;
  text-anchor:middle; dominant-baseline:middle;}
.fig .ca-lb-dark{fill:var(--ink);}
.fig .ca-sub{fill:var(--ink-2); font-family:var(--sans); font-size:9.5px; text-anchor:middle; dominant-baseline:middle;}
.fig .ca-street-t{fill:var(--vol); font-family:var(--serif); font-size:12px; text-anchor:middle; dominant-baseline:middle;}
.fig .ca-gate-t{fill:var(--vermilion); font-family:var(--sans); font-size:11px; text-anchor:middle;}
.fig .ca-gate-l{text-anchor:end;}
.fig .ca-gate-r{text-anchor:start;}
.fig .ca-lg{fill:var(--ink-2); font-family:var(--sans); font-size:11px; dominant-baseline:middle;}
/* 宫城/皇城色块上的副标题需要反白 */
.fig .ca-palace + .ca-lb + .ca-sub, .fig .ca-huang + .ca-lb + .ca-sub{fill:color-mix(in srgb, var(--paper) 85%, transparent);}

@media (max-width:640px){
  .grid-chao .vol-card::after{font-size:96px;}
  .nav-link.chao-link em{display:none;}
}

/* ---- 朝代页的正文：一个门类一节 ---- */
.dm-intro{
  margin:66px 0 8px; padding:22px 24px; border-radius:var(--r);
  background:color-mix(in srgb, var(--vol) 7%, transparent);
  border:1px solid color-mix(in srgb, var(--vol) 22%, transparent);
}
.dm-intro .lab{
  display:inline-block; font-size:10.5px; letter-spacing:.3em; color:var(--vol);
}
.dm-intro h3{margin:8px 0 0; font-size:23px; letter-spacing:.06em;}
.dm-intro p{margin:7px 0 0; font-size:14.5px; color:var(--ink-2); max-width:64ch;}

.sec-dm{--vol:var(--vol-l); padding-top:44px;}
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]) .sec-dm{--vol:var(--vol-d);} }
:root[data-theme="dark"] .sec-dm{--vol:var(--vol-d);}

.dm-head{
  display:flex; align-items:center; gap:14px; margin-bottom:14px;
  padding-bottom:13px; border-bottom:2px solid color-mix(in srgb, var(--vol) 30%, transparent);
}
.dm-seal{
  flex:0 0 42px; height:42px; display:grid; place-items:center; border-radius:8px;
  background:var(--vol); color:var(--paper); font-size:20px; font-weight:600;
  text-decoration:none; transition:transform .18s;
}
.dm-seal:hover{transform:scale(1.06);}
.dm-t{flex:1; min-width:0;}
.dm-t h3{margin:0; font-size:25px; font-weight:600; letter-spacing:.06em;}
.dm-t .dm-in{font-size:16px; color:var(--vol); margin-left:9px; letter-spacing:.1em;}
.dm-t .gloss{margin:2px 0 0; font-size:11.5px; letter-spacing:.2em; color:var(--ink-3);}
.dm-jump{
  flex:0 0 auto; font-size:11.5px; padding:5px 12px; border-radius:20px; text-decoration:none;
  color:var(--vol); border:1px solid color-mix(in srgb, var(--vol) 34%, transparent);
  transition:background .18s, color .18s;
}
.dm-jump:hover{background:var(--vol); color:var(--paper);}
.dm-lede{
  margin:0 0 16px; padding-left:15px; border-left:3px solid var(--vol);
  font-size:16.5px; line-height:1.82; color:var(--ink); max-width:62ch;
}
.sec-dm .tbl-block{margin-top:22px; margin-bottom:0;}

@media (max-width:640px){
  .dm-t h3{font-size:21px;}
  .dm-t .dm-in{display:block; margin-left:0; font-size:13px;}
  .dm-jump{display:none;}
  .dm-lede{font-size:15.5px;}
}

/* ---- 人物：宗师卡 ---- */
.pcard .glyph span{font-size:23px;}
.pcard h4{font-size:19px; letter-spacing:.08em;}
.pcard .meta{letter-spacing:.1em;}
.pcard p{font-size:13.6px;}
.sec .cards + .tbl-block{margin-top:26px;}

/* 背景四板块：比十个门类稍收敛，视觉上退一层 */
.sec-bg .sec-head h3{font-size:22px;}
.sec-bg{padding-top:40px;}

/* ---- 东京城图解（宋） ---- */
.fig .ca-inner{fill:color-mix(in srgb, var(--vol) 10%, transparent); stroke:var(--vol); stroke-width:1.2; stroke-dasharray:5 3;}
.fig .ca-river{fill:none; stroke:color-mix(in srgb, var(--celadon) 80%, #4a7fa0); stroke-width:4; stroke-linecap:round; opacity:.75;}
.fig .ca-river-t{fill:color-mix(in srgb, var(--celadon-deep) 85%, #2d5e7a); font-family:var(--serif); font-size:12px; font-style:italic; text-anchor:middle;}
.fig .ca-tag{fill:var(--vol); font-family:var(--sans); font-size:10.5px; letter-spacing:.1em;}
.fig .ca-sub-w{fill:color-mix(in srgb, var(--paper) 85%, transparent);}

/* ================= 图：跟着文字走的缩略图 ================= */
.thumbs{float:right; display:flex; flex-wrap:wrap; justify-content:flex-end; gap:8px; margin:2px 0 8px 16px; max-width:46%;}
.thumb{
  display:flex; flex-direction:column; align-items:stretch; width:150px; padding:5px; cursor:zoom-in;
  border:1px solid var(--line); border-radius:8px; background:var(--paper); color:inherit;
  transition:border-color .18s, box-shadow .18s, transform .18s; text-align:left;
}
.thumb:hover{border-color:var(--vol); box-shadow:var(--shadow); transform:translateY(-2px);}
.thumb img{display:block; width:100%; height:104px; object-fit:cover; border-radius:5px; background:var(--paper-3);}
.thumb-svg{display:block; height:104px; border-radius:5px; background:color-mix(in srgb, var(--vol) 5%, var(--paper)); overflow:hidden;}
.thumb-svg svg{width:100%; height:100%;}
.thumb-cap{display:block; font-size:11px; line-height:1.4; color:var(--ink-2); padding:5px 2px 1px;}
.sub-item.has-pic{overflow:hidden;}           /* 清除浮动 */
details.it .body{overflow:hidden;}
.pic-mark{
  font-size:10px; padding:1px 6px; border-radius:4px; margin-left:6px; flex:0 0 auto;
  color:var(--vol); border:1px solid color-mix(in srgb, var(--vol) 35%, transparent);
}
@media (max-width:640px){
  .thumbs{float:none; max-width:none; justify-content:flex-start; margin:0 0 10px;}
  .thumb{width:calc(50% - 4px);}
}

/* ================= 侧边大图面板 ================= */
.lb-scrim{position:fixed; inset:0; background:rgba(20,20,18,.45); z-index:80; opacity:0; pointer-events:none; transition:opacity .25s;}
.lb{
  position:fixed; top:0; right:0; bottom:0; z-index:81; width:min(760px, 94vw);
  display:flex; flex-direction:column; background:var(--paper); border-left:1px solid var(--line-2);
  box-shadow:-12px 0 40px rgba(0,0,0,.18); transform:translateX(102%); transition:transform .3s ease;
}
.lb-open .lb{transform:none;}
.lb-open .lb-scrim{opacity:1; pointer-events:auto;}
.lb-open body{overflow:hidden;}
.lb-bar{display:flex; align-items:center; gap:6px; padding:10px 14px; border-bottom:1px solid var(--line);}
.lb-count{margin-right:auto; font-size:12px; color:var(--ink-3);}
.lb-btn{
  width:34px; height:34px; border-radius:8px; border:1px solid var(--line-2); background:var(--paper-2);
  color:var(--ink); font-size:18px; line-height:1; cursor:pointer;
}
.lb-btn:hover{background:var(--vol); color:var(--paper); border-color:var(--vol);}
.lb-btn[hidden]{display:none;}
.lb-stage{
  flex:1; min-height:0; overflow:auto; display:flex; align-items:center; justify-content:center;
  background:color-mix(in srgb, var(--ink) 6%, var(--paper)); padding:16px; cursor:zoom-in;
}
.lb-stage img{max-width:100%; max-height:100%; object-fit:contain; box-shadow:0 2px 14px rgba(0,0,0,.18);}
.lb-stage.actual{align-items:flex-start; justify-content:flex-start; cursor:zoom-out;}
.lb-stage.actual img{max-width:none; max-height:none;}
.lb-stage.wide{justify-content:flex-start;}                       /* 长卷：高度撑满，横向拖动 */
.lb-stage.wide img{max-width:none; height:100%; max-height:100%;}
.lb-svg{width:100%; max-width:720px; background:var(--paper); border-radius:8px; padding:10px;}
.lb-svg svg{width:100%; height:auto;}
.lb-stage.actual .lb-svg{max-width:none; width:1400px;}
.lb-info{padding:14px 18px 18px; border-top:1px solid var(--line); max-height:34vh; overflow:auto;}
.lb-info h4{margin:0; font-size:18px;}
.lb-info p{margin:4px 0 0; font-size:12.5px; color:var(--ink-2); line-height:1.7;}
.lb-credit a{color:var(--vol);}
@media (max-width:640px){ .lb{width:100vw;} }

/* ================= 形制线描 ================= */
.xz{font-family:var(--sans);}
.xz .xz-h{fill:var(--ink); font-family:var(--serif); font-size:16px; font-weight:600;}
.xz .xz-t{fill:var(--ink-2); font-size:12px;}
.xz .xz-tt{fill:var(--ink); font-family:var(--serif); font-size:14px; font-weight:600;}
.xz .xz-vt{writing-mode:vertical-rl; letter-spacing:.2em;}
.xz .xz-ln{fill:none; stroke:var(--ink); stroke-width:1.6; stroke-linejoin:round;}
.xz .xz-ln-thin{fill:none; stroke:var(--ink-2); stroke-width:1.1;}
.xz .xz-dash{stroke-dasharray:6 4;}
.xz .xz-fill{fill:color-mix(in srgb, var(--vol) 7%, var(--paper));}
.xz .xz-fill.xz-ln{stroke:var(--ink);}
.xz .xz-band{fill:color-mix(in srgb, var(--vermilion) 32%, var(--paper)); stroke:var(--ink); stroke-width:1.1;}
.xz .xz-band-ln{fill:none; stroke:color-mix(in srgb, var(--vermilion) 45%, var(--paper)); stroke-width:9; stroke-linecap:round;}
.xz .xz-collar{fill:none; stroke:color-mix(in srgb, var(--vol) 55%, var(--paper)); stroke-width:9;}
.xz .xz-btn{fill:var(--paper); stroke:var(--ink); stroke-width:1.2;}
.xz .xz-belt{fill:color-mix(in srgb, var(--ink) 70%, var(--paper)); stroke:none;}
.xz .xz-lead{fill:none; stroke:var(--ink-3); stroke-width:.8;}
.xz .xz-pt{fill:var(--vermilion);}
.xz .xz-dim{fill:none; stroke:var(--ink-3); stroke-width:1;}
.xz .xz-face{fill:var(--paper); stroke:var(--ink-2); stroke-width:1.2;}
.xz .xz-ghost{stroke-dasharray:3 3; opacity:.6;}
.xz .xz-cap{fill:color-mix(in srgb, var(--ink) 82%, var(--paper)); stroke:var(--ink); stroke-width:1;}
.xz .xz-foot-soft{fill:none; stroke:color-mix(in srgb, var(--ink) 75%, var(--paper)); stroke-width:6; stroke-linecap:round;}
.xz .xz-foot{fill:none; stroke:color-mix(in srgb, var(--ink) 82%, var(--paper)); stroke-width:5; stroke-linecap:round;}
.xz .xz-foot-rod{fill:none; stroke:color-mix(in srgb, var(--ink) 82%, var(--paper)); stroke-width:4; stroke-linecap:round;}
.xz .xz-arrow{fill:none; stroke:var(--ink-3); stroke-width:1.4;}
.xz .xz-pibo{fill:none; stroke:color-mix(in srgb, var(--celadon) 55%, transparent); stroke-width:12; stroke-linecap:round;}
.xz .xz-skirt{fill:color-mix(in srgb, var(--vermilion) 22%, var(--paper)); stroke:var(--ink); stroke-width:1.4;}
.xz .xz-pleat{fill:none; stroke:color-mix(in srgb, var(--vermilion) 45%, var(--paper)); stroke-width:1;}
.xz .xz-ribbon{fill:none; stroke:color-mix(in srgb, var(--vermilion) 60%, var(--ink)); stroke-width:2.2; stroke-linecap:round;}
.xz .xz-banbi{fill:color-mix(in srgb, #b8862e 30%, var(--paper)); stroke:var(--ink); stroke-width:1.4;}
.xz .xz-vase{fill:color-mix(in srgb, var(--celadon) 30%, var(--paper)); stroke:var(--ink); stroke-width:1.4;}

/* 大图面板：缩放查看器 */
.lb-sep{width:1px; height:22px; background:var(--line-2); margin:0 4px;}
.lb-stage{position:relative;}
.lb-stage.osd{padding:0; cursor:grab; background:#1b1a17;}
.lb-stage.osd:active{cursor:grabbing;}
.lb-osd{position:absolute; inset:0;}
.lb-loading{position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); color:#cfc8b6; font-size:13px;}
.lb-hint{color:var(--ink-3) !important; font-size:11.5px !important; margin-top:8px !important;}
.lb:fullscreen{width:100vw; border:0;}
.lb:fullscreen .lb-info{max-height:18vh;}
.lb .navigator{border:1px solid rgba(255,255,255,.5) !important; background:rgba(0,0,0,.35) !important;}

/* 导览条置顶：卷页与朝代页的第一个元素 */
.has-subnav .subnav{margin-top:0;}
.has-subnav .crumb{margin-top:18px;}
@media (max-width:900px){
  .has-subnav main{padding-top:0;}
  .has-subnav .subnav{padding:12px 16px 12px 68px;}   /* 左侧让出菜单按钮 */
}