:root{
  --paper:#fdfcf8;
  --paper-2:#f5f2e9;
  --paper-3:#f7f5ef;
  --ink:#1b1a16;
  --body:#4a4842;
  --mute:#6f6c63;
  --faint:#8a867c;
  --line:#d8d4c8;
  --mark:#c8442a;
  --serif:"Noto Serif SC","Songti SC","STSong",SimSun,serif
}

*{box-sizing:border-box;margin:0;padding:0}

html{scroll-behavior:smooth}

body{
  background:var(--paper);
  color:var(--ink);
  font:400 16px/1.8 "PingFang SC","Microsoft YaHei","Noto Sans SC",system-ui,sans-serif;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden
}

img{display:block;max-width:100%;height:auto}

a{color:inherit;text-decoration:none}

ul,ol{list-style:none}

:focus-visible{outline:2px solid var(--mark);outline-offset:4px}

.skip{position:absolute;left:-9999px;top:0}
.skip:focus{left:16px;top:12px;z-index:90;background:var(--ink);color:var(--paper);padding:9px 16px;font-size:13px}

.wrap{max-width:1180px;margin:0 auto;padding:0 clamp(20px,4vw,56px)}

/* ---------- 报头 ---------- */
.sheet-head{background:var(--paper);border-bottom:1px solid var(--ink);position:relative;z-index:20}

.head-in{display:flex;align-items:center;gap:clamp(14px,2.4vw,32px);padding-top:18px;padding-bottom:18px}

.mark{display:flex;align-items:center;gap:10px}

.logo-slot{display:flex;align-items:center;justify-content:center;flex:none}
.logo-slot img{width:auto;height:auto;max-width:132px;max-height:26px;object-fit:contain}

.mark-name{font-family:var(--serif);font-size:20px;letter-spacing:.02em}

.head-tag{margin-left:auto;font-size:11px;letter-spacing:.2em;color:var(--faint)}

.head-nav{display:flex;gap:clamp(12px,1.8vw,24px);font-size:13.5px;color:var(--mute)}

.head-nav a{padding-bottom:2px;border-bottom:1px solid transparent}
.head-nav a:hover{color:var(--ink);border-bottom-color:var(--ink)}

.head-cta{
  font-size:12.5px;letter-spacing:.1em;
  border:1px solid var(--ink);padding:8px 16px;border-radius:2px;
  transition:background .18s,color .18s
}

.head-cta:not([hidden]){display:inline-flex;align-items:center}

.head-cta:hover{background:var(--ink);color:var(--paper)}

/* ---------- 封面 ---------- */
.cover{padding:clamp(34px,5vw,70px) 0 clamp(20px,2.6vw,32px)}

.cover-in{display:grid;grid-template-columns:1.08fr .92fr;gap:clamp(26px,5vw,68px);align-items:center}

.kicker{
  display:block;
  font-size:11.5px;
  letter-spacing:.22em;
  color:var(--mute);
  margin-bottom:clamp(14px,2.2vw,24px)
}

.cover-line{
  display:block;
  font-family:var(--serif);
  font-weight:500;
  font-size:clamp(1.95rem,3.5vw,3.15rem);
  line-height:1.32;
  letter-spacing:.01em
}

.cover-lead{margin-top:clamp(18px,2.6vw,28px);max-width:31em;font-size:15.5px;color:var(--body)}

.cover-acts{display:flex;flex-wrap:wrap;gap:12px;margin-top:clamp(22px,3vw,32px)}

.btn{
  font-size:14.5px;
  padding:13px 26px;
  border:1px solid var(--ink);
  border-radius:2px;
  transition:background .18s,color .18s
}

.btn:not([hidden]){display:inline-flex;align-items:center;justify-content:center}

.btn:hover{background:var(--paper-2)}

.btn.btn-solid{background:var(--ink);color:var(--paper)}
.btn.btn-solid:hover{background:#000}

.cover-spec{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(10px,2vw,24px);
  margin-top:clamp(26px,3.6vw,40px);
  border-top:1px solid var(--ink);
  padding-top:12px
}

.cover-spec dt{font-size:10.5px;letter-spacing:.18em;color:var(--faint)}
.cover-spec dd{margin-top:3px;font-size:13.5px;color:var(--ink)}

.cover-fig{margin:0}

.tilt{
  position:relative;
  transform:rotate(-1.6deg);
  background:#fff;
  border:1px solid var(--line);
  padding:10px;
  box-shadow:0 18px 40px -28px rgba(27,26,22,.5)
}

.tilt img{width:100%;height:auto;border:1px solid var(--line)}

.cover-fig figcaption{margin-top:14px;font-size:12px;color:var(--mute);letter-spacing:.05em}
.cover-fig figcaption b{color:var(--mark);font-size:10.5px;letter-spacing:.16em;margin-right:8px}

.cover-note{margin-top:8px;font-size:12.5px;line-height:1.75;color:var(--faint);max-width:26em}

.toc{margin-top:clamp(24px,3.4vw,40px);border-top:1px solid var(--ink);padding-top:14px}

.toc-h{font-size:10.5px;letter-spacing:.22em;color:var(--mute);margin-bottom:6px}

.toc li{border-bottom:1px solid var(--line)}
.toc li:last-child{border-bottom:1px solid var(--ink)}

.toc a{
  display:grid;
  grid-template-columns:34px clamp(72px,11vw,150px) minmax(0,1fr) clamp(48px,7vw,86px);
  gap:clamp(8px,1.6vw,20px);
  align-items:baseline;
  padding:10px 0;
  transition:background .18s,padding .18s
}

.toc a:hover{background:var(--paper-2);padding-left:8px}

.toc b{font-family:var(--serif);font-size:11px;color:var(--mark);letter-spacing:.1em;font-weight:400}

.toc-k{font-family:var(--serif);font-size:16px}

.toc-d{
  display:flex;
  align-items:baseline;
  gap:12px;
  font-size:12.5px;
  color:var(--mute)
}

.toc-d::after{
  content:"";
  flex:1;
  border-bottom:1px dotted var(--line);
  transform:translateY(-4px)
}

.toc-p{text-align:right;font-size:10.5px;letter-spacing:.12em;color:var(--faint);white-space:nowrap}

/* ---------- 图版段落 ---------- */
.fig-block{padding:clamp(44px,6vw,82px) 0;border-bottom:1px solid var(--line)}
.fig-block.alt{background:var(--paper-2)}

.fig-in{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4.4vw,64px);align-items:center}

.fig-media{margin:0}

.fig-media img{width:100%;height:auto;border:1px solid var(--line);background:#fff}

.fig-media figcaption{margin-top:12px;font-size:12px;color:var(--mute);letter-spacing:.05em}
.fig-media figcaption b{color:var(--mark);font-size:10.5px;letter-spacing:.16em;margin-right:8px}

.fig-n{font-size:10.5px;letter-spacing:.2em;color:var(--mark);margin-bottom:clamp(10px,1.6vw,16px)}

.fig-copy h2{
  font-family:var(--serif);
  font-weight:500;
  font-size:clamp(1.45rem,2.5vw,2.1rem);
  line-height:1.38;
  letter-spacing:.01em
}

.fig-copy>p{margin-top:16px;max-width:33em;font-size:15px;color:var(--body)}

.anno{margin-top:clamp(18px,2.6vw,28px);border-top:1px solid var(--ink)}

.anno li{
  display:grid;
  grid-template-columns:26px minmax(0,1fr);
  gap:0 8px;
  padding:12px 0;
  border-bottom:1px solid var(--line);
  font-size:14px;
  color:var(--body)
}

.anno .num{color:var(--mark);font-weight:700;font-size:13px;line-height:1.9}

.anno b{display:block;color:var(--ink);font-weight:600;font-size:14.5px;margin-bottom:1px}

/* ---------- 版面解剖 ---------- */
.anat{padding:clamp(44px,6vw,82px) 0;border-bottom:1px solid var(--line)}

.sec-lead h2{
  font-family:var(--serif);
  font-weight:500;
  font-size:clamp(1.5rem,2.7vw,2.3rem);
  line-height:1.36
}

.sec-sub{margin-top:14px;max-width:42em;font-size:15px;color:var(--body)}

.anat-wrap{
  display:grid;
  grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);
  gap:clamp(24px,4vw,60px);
  margin-top:clamp(24px,3.4vw,42px);
  align-items:stretch
}

.anat-mock{
  display:flex;
  flex-direction:column;
  width:100%;
  max-width:380px;
  min-height:clamp(300px,34vw,400px);
  border:1px solid var(--ink);
  background:#fff
}

.anat-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:0 14px;
  font-size:11px;
  letter-spacing:.12em;
  color:var(--mute)
}

.anat-row em{
  font-style:normal;
  color:var(--mark);
  font-size:12px;
  letter-spacing:0
}

.anat-r1{height:46px;border-bottom:1px solid var(--ink)}
.anat-r2{flex:1;border-bottom:1px solid var(--line);background-image:repeating-linear-gradient(0deg,transparent 0 58px,rgba(27,26,22,.13) 58px 59px),repeating-linear-gradient(135deg,var(--paper-2) 0 9px,transparent 9px 18px)}
.anat-r3{height:46px;border-bottom:1px solid var(--line)}
.anat-r4{height:30px}

.anat-tag{letter-spacing:.2em;color:var(--faint)}

.anat-fill{display:block;width:42%;height:3px;background:var(--mark)}

.anat-keys li{
  display:grid;
  grid-template-columns:26px minmax(0,1fr);
  gap:4px 10px;
  padding:13px 0;
  border-bottom:1px solid var(--line)
}

.anat-keys li:first-child{border-top:1px solid var(--ink)}

.anat-keys>li>b{color:var(--mark);font-size:12px;line-height:1.9}

.anat-keys strong{display:block;font-size:14.5px;font-weight:600;color:var(--ink)}

.anat-keys p{margin-top:3px;font-size:13.5px;line-height:1.8;color:var(--body)}

.fig-cap{margin-top:14px;font-size:12px;letter-spacing:.04em;color:var(--faint)}
.fig-cap b{color:var(--mark);font-size:10.5px;letter-spacing:.16em;margin-right:8px}

/* ---------- 表格区 ---------- */
.sheet-sec{padding:clamp(44px,6vw,82px) 0;border-bottom:1px solid var(--line)}

.sheet-wrap{display:grid;grid-template-columns:minmax(0,1fr) clamp(180px,22vw,240px);gap:clamp(20px,3.6vw,52px)}

.sheet-main{min-width:0}

.sheet-h{
  font-family:var(--serif);
  font-weight:500;
  font-size:clamp(1.35rem,2.3vw,1.95rem);
  line-height:1.4;
  margin-bottom:clamp(16px,2.2vw,24px)
}

.sheet-side{
  border-top:1px solid var(--ink);
  padding-top:12px;
  font-size:12.5px;
  line-height:1.85;
  color:#5d5a52
}

.sheet-side p+p{margin-top:12px}

.note-tag{font-size:10.5px;letter-spacing:.2em;color:var(--mark);margin-bottom:7px}

.tbl-wrap{width:100%;overflow-x:auto}

.tbl{width:100%;min-width:520px;border-collapse:collapse;font-size:13.5px}

.tbl caption{
  caption-side:top;
  text-align:left;
  font-size:11px;
  letter-spacing:.06em;
  color:var(--faint);
  padding-bottom:10px
}

.tbl thead th{
  text-align:left;
  font-size:10.5px;
  font-weight:400;
  letter-spacing:.16em;
  color:var(--mute);
  padding:10px 14px 10px 0;
  border-top:1px solid var(--ink);
  border-bottom:1px solid var(--ink)
}

.tbl tbody th{
  text-align:left;
  font-weight:400;
  font-size:11.5px;
  letter-spacing:.08em;
  color:var(--mark);
  padding:12px 14px 12px 0;
  border-bottom:1px solid var(--line);
  white-space:nowrap
}

.tbl tbody td{
  padding:12px 14px 12px 0;
  border-bottom:1px solid var(--line);
  color:var(--body)
}

.tbl tbody tr:hover td,.tbl tbody tr:hover th{background:var(--paper-2)}

.tbl-cmp thead th:first-child{width:clamp(88px,12vw,150px)}

.st{color:var(--ink)}
.st-done{color:var(--mute)}
.st-new{color:var(--mark);font-weight:600}

.tbl-note{margin-top:16px;max-width:52em;font-size:12.5px;line-height:1.85;color:var(--faint)}

/* ---------- 规格表 ---------- */
.spec{border-top:1px solid var(--ink)}

.spec>div{
  display:grid;
  grid-template-columns:clamp(84px,11vw,132px) minmax(0,1fr);
  gap:clamp(10px,2vw,22px);
  padding:12px 0;
  border-bottom:1px solid var(--line)
}

.spec dt{font-size:12px;letter-spacing:.1em;color:var(--mute);padding-top:2px}

.spec dd{
  display:flex;
  align-items:baseline;
  gap:10px;
  font-size:14px;
  color:var(--ink)
}

.spec dd::before{
  content:"";
  flex:1;
  border-bottom:1px dotted var(--line);
  transform:translateY(-5px)
}

/* ---------- 边注段 ---------- */
.note-block{padding:clamp(44px,6.2vw,84px) 0;background:var(--paper-2);border-bottom:1px solid var(--line)}

.note-in{display:grid;grid-template-columns:200px minmax(0,1fr);gap:clamp(20px,4vw,56px)}

.margin-note{border-top:1px solid var(--ink);padding-top:12px;font-size:13px;line-height:1.75;color:#5d5a52}

.note-copy h2{
  font-family:var(--serif);
  font-weight:500;
  font-size:clamp(1.4rem,2.4vw,2rem);
  line-height:1.4
}

.note-copy p{margin-top:16px;max-width:35em;font-size:15px;color:var(--body)}

.pull{
  margin-top:clamp(20px,2.8vw,30px);
  padding-left:18px;
  border-left:2px solid var(--mark);
  font-family:var(--serif);
  font-size:clamp(1.05rem,1.7vw,1.35rem);
  line-height:1.72;
  color:var(--ink)
}

/* ---------- 图版 ---------- */
.plate{padding:clamp(34px,5vw,68px) 0;border-bottom:1px solid var(--line)}

.plate-fig{margin:0 auto}

.plate-fig img{width:100%;height:auto;border:1px solid var(--line);background:#fff}

.plate-fig figcaption{margin-top:12px;font-size:12px;line-height:1.75;letter-spacing:.04em;color:var(--mute)}
.plate-fig figcaption b{color:var(--mark);font-size:10.5px;letter-spacing:.16em;margin-right:8px}

/* ---------- 四步 ---------- */
.steps{padding:clamp(44px,6vw,82px) 0;border-bottom:1px solid var(--line)}

.steps-wrap{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,.85fr);gap:clamp(24px,4vw,64px)}

.steps .fig-n{margin-bottom:12px}

.steps-main h2{
  font-family:var(--serif);
  font-weight:500;
  font-size:clamp(1.5rem,2.6vw,2.2rem)
}

.step-list{margin-top:clamp(20px,3vw,32px);border-top:1px solid var(--ink)}

.step-list li{
  display:grid;
  grid-template-columns:clamp(40px,4.6vw,58px) minmax(0,1fr);
  gap:clamp(10px,2vw,24px);
  padding:20px 0;
  border-bottom:1px solid var(--line)
}

.st-n{font-size:12px;letter-spacing:.14em;color:var(--mark);padding-top:6px}

.st-body h3{font-family:var(--serif);font-weight:500;font-size:19px}

.st-body p{margin-top:5px;max-width:40em;font-size:14px;color:var(--body)}

.steps-side{
  border-left:1px solid var(--line);
  padding-left:clamp(18px,2.4vw,32px);
  align-self:start
}

.steps-side h3{
  font-family:var(--serif);
  font-weight:500;
  font-size:20px;
  margin:4px 0 12px
}

.afters li{border-top:1px solid var(--line);padding:11px 0}

.afters b{display:block;font-size:13.5px;color:var(--ink)}

.afters span{font-size:13px;line-height:1.75;color:var(--body)}

.side-note{margin-top:16px;font-size:12.5px;line-height:1.85;color:var(--faint)}

/* ---------- 术语表 ---------- */
.gloss{padding:clamp(44px,6vw,82px) 0;border-bottom:1px solid var(--line);background:var(--paper-2)}

.gloss-list{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:0 clamp(24px,4vw,56px);
  margin-top:clamp(14px,2vw,22px)
}

.gloss-list>div{
  display:grid;
  grid-template-columns:clamp(52px,6.4vw,80px) minmax(0,1fr);
  gap:clamp(10px,1.8vw,20px);
  padding:13px 0;
  border-top:1px solid var(--line)
}

.gloss-list dt{font-family:var(--serif);font-size:18px}

.gloss-list dd{font-size:13.5px;line-height:1.8;color:var(--body)}

/* ---------- 附录 ---------- */
.annex{padding:clamp(44px,6vw,82px) 0;border-bottom:1px solid var(--line)}

.annex-head h2{
  font-family:var(--serif);
  font-weight:500;
  font-size:clamp(1.5rem,2.6vw,2.2rem)
}

.annex-list{margin-top:clamp(18px,2.8vw,28px);border:1px solid var(--ink);border-radius:2px;background:var(--paper)}

.annex-list:not(:has(.annex-row:not([hidden]))){border:0}

.annex-row{padding:18px 22px;border-bottom:1px solid var(--line);transition:background .18s}
.annex-row:last-child{border-bottom:0}

.annex-row:not([hidden]){
  display:grid;
  grid-template-columns:96px minmax(0,1fr) auto;
  gap:clamp(12px,2vw,24px);
  align-items:baseline
}

.annex-row:hover{background:var(--paper-2)}

.ax-ch{font-family:var(--serif);font-size:19px}

.ax-note{font-size:13.5px;color:#5d5a52}

.ax-go{justify-self:end;font-size:11.5px;letter-spacing:.1em;color:var(--mark);border-bottom:1px solid var(--mark);padding-bottom:3px;white-space:nowrap}

.annex-note{margin-top:14px;font-size:12.5px;color:var(--faint)}

/* ---------- 问答 ---------- */
.faq{padding:clamp(44px,6vw,82px) 0}

.faq h2{
  font-family:var(--serif);
  font-weight:500;
  font-size:clamp(1.5rem,2.6vw,2.2rem);
  margin-bottom:clamp(16px,2.4vw,26px)
}

.faq details{border-top:1px solid var(--line)}
.faq details:last-child{border-bottom:1px solid var(--line)}

.faq summary{
  position:relative;
  padding:17px 34px 17px 0;
  cursor:pointer;
  font-family:var(--serif);
  font-size:17px;
  list-style:none
}

.faq summary::-webkit-details-marker{display:none}

.faq summary::after{
  content:"+";
  position:absolute;right:4px;top:13px;
  color:var(--mark);font-size:17px;line-height:1
}

.faq details[open] summary::after{content:"\2013"}

.faq details p{padding:0 0 18px;max-width:42em;font-size:14.5px;color:var(--body)}

/* ---------- 页脚 ---------- */
.foot{background:var(--paper-3);border-top:1px solid var(--ink);padding:clamp(32px,4vw,50px) 0 24px}

.foot-in{display:grid;grid-template-columns:1.6fr 1fr 1fr;gap:clamp(18px,3vw,32px)}

.foot-brand{display:flex;flex-direction:column;align-items:flex-start;gap:10px;font-size:13.5px;color:#5d5a52}

.foot-small{font-size:11px;letter-spacing:.12em;color:var(--faint)}

.foot-col h2{font-size:10.5px;font-weight:400;letter-spacing:.22em;color:var(--faint);margin-bottom:12px}

.foot-col ul{display:grid;gap:7px;font-size:13.5px;color:#5d5a52}
.foot-col a:hover{color:var(--mark)}

.colophon{margin-top:clamp(22px,3vw,34px);padding-top:14px;border-top:1px solid var(--line);font-size:11px;letter-spacing:.1em;color:var(--faint)}

/* ---------- 响应式 ---------- */
@media (max-width:980px){
  .anat-wrap{grid-template-columns:1fr}
  .anat-mock{min-height:clamp(260px,44vw,340px)}
  .sheet-wrap{grid-template-columns:minmax(0,1fr)}
  .sheet-side{max-width:none}
  .steps-wrap{grid-template-columns:1fr}
  .steps-side{border-left:0;padding-left:0;border-top:1px solid var(--ink);padding-top:16px;margin-top:6px}
  .gloss-list{grid-template-columns:1fr}
}

@media (max-width:900px){
  .cover-in{grid-template-columns:1fr;gap:32px}
  .cover-fig{max-width:430px}
  .fig-in{grid-template-columns:1fr;gap:28px}
  .fig-media{max-width:430px}
  .fig-block.alt .fig-media{margin-left:auto}
  .note-in{grid-template-columns:1fr;gap:20px}
  .margin-note{max-width:32em}
}

@media (max-width:700px){
  .head-tag{display:none}
  .head-nav{display:none}
  .mark-name{font-size:14px}
  .cover-line{font-size:clamp(1.75rem,7.6vw,2.4rem)}
  .btn{padding:12px 20px;font-size:14px}
  .cover-spec{grid-template-columns:1fr 1fr;gap:10px 16px}
  .cover-fig{max-width:100%}
  .fig-media{max-width:100%}
  .toc a{grid-template-columns:28px minmax(0,1fr) auto;gap:4px 10px;padding:12px 0}
  .toc-k{font-size:15px}
  .toc-d{grid-column:2/4;font-size:12px}
  .toc-d::after{display:none}
  .toc-p{font-size:10px}
  .tbl{min-width:0;font-size:12px}
  .tbl thead th{font-size:10px;letter-spacing:.08em;padding:8px 8px 8px 0}
  .tbl tbody th{padding:10px 8px 10px 0;font-size:11px}
  .tbl tbody td{padding:10px 8px 10px 0}
  .tbl-wrap{overflow-x:visible}
  .spec>div{grid-template-columns:minmax(0,1fr);gap:2px}
  .spec dd::before{display:none}
  .step-list li{grid-template-columns:34px minmax(0,1fr);padding:18px 0}
  .annex-row:not([hidden]){grid-template-columns:1fr;gap:5px;padding:16px 18px}
  .ax-go{justify-self:start;margin-top:4px}
  .foot-in{grid-template-columns:1fr 1fr}
  .foot-brand{grid-column:1/3}
  .fig-block{padding:clamp(34px,5vw,44px) 0}
  .sheet-sec{padding:clamp(34px,5vw,44px) 0}
  .steps{padding:clamp(34px,5vw,44px) 0}
  .gloss{padding:clamp(34px,5vw,44px) 0}
  .annex{padding:clamp(34px,5vw,44px) 0}
  .faq{padding:clamp(34px,5vw,44px) 0}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{transition:none}
}