/* ==========================================================================
   答案时代 · 体验台 — 设计系统
   纸质底色 / 墨色正文 / 单一朱红强调 / 细线分隔 / 宋代体标题
   不使用渐变、投影、圆角气泡与图标堆叠。
   ========================================================================== */
:root{
  --paper:#FAF8F3; --paper-2:#F4F1E8; --paper-3:#EFEBE1; --card:#FFFFFF;
  --ink:#15181C; --ink-2:#3C4249; --ink-3:#7C838B; --ink-4:#A7ADB4;
  --line:#E2DED4; --line-2:#EDEAE2; --line-3:#F5F3ED;
  --navy:#16324F; --navy-2:#1E3F62; --navy-wash:#EAEFF4;
  --verm:#A8392C; --verm-wash:#F8EDEA;
  --gold:#A8802C; --gold-wash:#F7F1E1;
  --teal:#1F6B63; --teal-wash:#E8F1EF;
  --serif:"Songti SC","Noto Serif SC","Source Han Serif SC",Georgia,"STSong",serif;
  --sans:-apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  --mono:"SF Mono",ui-monospace,Menlo,Consolas,monospace;
  --maxw:1240px;
  --r:2px;
}
*{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--sans); font-size:15.5px; line-height:1.78;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
::selection{background:rgba(168,57,44,.14);}
h1,h2,h3,h4,h5{font-family:var(--serif); font-weight:700; letter-spacing:.005em; margin:0; color:var(--ink);}
h1{font-size:clamp(36px,4.3vw,56px); line-height:1.24;}
h2{font-size:clamp(24px,2.4vw,30px); line-height:1.36;}
h3{font-size:19px; line-height:1.5;}
h4{font-size:16px; line-height:1.5;}
p{margin:0 0 14px; color:var(--ink-2);}
a{color:inherit; text-decoration:none;}
img,svg{max-width:100%;}
hr{border:0; border-top:1px solid var(--line); margin:32px 0;}
.mono{font-family:var(--mono); font-variant-numeric:tabular-nums;}
.num{font-variant-numeric:tabular-nums; font-feature-settings:"tnum";}
.muted{color:var(--ink-3);}
.small{font-size:12.5px; line-height:1.7;}
.tiny{font-size:11.5px; line-height:1.6;}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 40px;}
.kicker{font-size:11px; letter-spacing:.2em; color:var(--verm); font-weight:700; text-transform:uppercase;}
.eyebrow{font-size:11.5px; letter-spacing:.16em; color:var(--ink-3); font-weight:600;}

/* ------------------------------- 顶栏 ------------------------------- */
.topbar{position:sticky; top:0; z-index:40; background:rgba(250,248,243,.94);
  backdrop-filter:saturate(140%) blur(8px); border-bottom:1px solid var(--line);}
.topbar .inner{max-width:var(--maxw); margin:0 auto; padding:0 40px; height:64px;
  display:flex; align-items:center; gap:36px;}
.brand{display:flex; align-items:baseline; gap:10px; white-space:nowrap;}
.brand b{font-family:var(--serif); font-size:17px; letter-spacing:.02em;}
.brand span{font-size:10.5px; letter-spacing:.22em; color:var(--ink-3);}
.nav{display:flex; gap:26px; margin-left:auto; align-items:center;}
.nav a{font-size:13.5px; color:var(--ink-2); padding:4px 0; border-bottom:1px solid transparent;}
.nav a:hover{color:var(--ink); border-bottom-color:var(--ink);}
.nav a.on{color:var(--ink); border-bottom-color:var(--verm);}
.nav .who{display:flex; align-items:center; gap:8px; font-size:13px; color:var(--ink-2);}
.avatar{width:26px; height:26px; border-radius:50%; background:var(--navy); color:#fff;
  display:grid; place-items:center; font-size:11px; letter-spacing:.02em;}

/* ------------------------------- 按钮 ------------------------------- */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px;
  height:42px; padding:0 20px; border:1px solid var(--ink); background:var(--ink); color:#fff;
  font-family:var(--sans); font-size:13.5px; letter-spacing:.02em; cursor:pointer;
  border-radius:var(--r); transition:background .15s,border-color .15s,color .15s;}
.btn:hover{background:#000; border-color:#000;}
.btn.ghost{background:transparent; color:var(--ink); border-color:var(--line);}
.btn.ghost:hover{border-color:var(--ink); background:transparent;}
.btn.red{background:var(--verm); border-color:var(--verm);}
.btn.red:hover{background:#8f2f24; border-color:#8f2f24;}
.btn.sm{height:32px; padding:0 13px; font-size:12.5px;}
.btn.block{width:100%;}
.btn[disabled]{opacity:.42; cursor:not-allowed;}
.btn.plain{background:none; border:0; color:var(--ink-2); padding:0; height:auto; text-decoration:underline;
  text-underline-offset:4px; font-size:13px; cursor:pointer;}

/* ------------------------------- 排版件 ------------------------------- */
.sec{padding:84px 0; border-bottom:1px solid var(--line);}
.sec-head{display:flex; align-items:baseline; gap:18px; margin-bottom:34px;}
.sec-head .n{font-family:var(--serif); font-size:13px; color:var(--verm); letter-spacing:.08em;}
.sec-head h2{flex:none;}
.sec-head .lead{margin-left:auto; max-width:420px; font-size:13.5px; color:var(--ink-3); line-height:1.7;}
.rule-title{display:flex; align-items:center; gap:14px; margin:0 0 22px;}
.rule-title:after{content:""; flex:1; height:1px; background:var(--line);}
.quote{border-left:2px solid var(--verm); padding:2px 0 2px 20px; font-family:var(--serif);
  font-size:19px; line-height:1.7; color:var(--ink); margin:30px 0;}
.note-box{background:var(--paper-2); border:1px solid var(--line); padding:18px 22px; font-size:13px;
  color:var(--ink-2); line-height:1.75; border-radius:var(--r);}
.note-box b{color:var(--ink);}

/* ------------------------------- 5A 矩阵 ------------------------------- */
.matrix{width:100%; border-collapse:collapse; table-layout:fixed; font-size:12px;}
.matrix th,.matrix td{border:1px solid var(--line); padding:0; text-align:center;}
.matrix thead th{background:transparent; color:var(--ink-3); font-weight:600; font-size:11px;
  letter-spacing:.08em; height:34px; border-top:0;}
.matrix thead th:first-child{border-left:0; text-align:left; padding-left:12px;}
.matrix tbody th{background:var(--paper-2); font-family:var(--serif); font-size:12.5px; color:var(--navy);
  font-weight:700; text-align:left; padding:0 12px; width:104px; height:52px; border-left:0;}
.matrix tbody td{height:52px; position:relative;}
.matrix tbody tr:last-child th,.matrix tbody tr:last-child td{border-bottom:0;}
.matrix .dot{width:7px; height:7px; border-radius:50%; background:var(--navy); display:inline-block;}
.matrix .dot.soft{background:var(--gold);}
.matrix .cell-note{position:absolute; inset:0; display:grid; place-items:center; color:var(--ink-4); font-size:10px;}

/* ------------------------------- 专题列表 ------------------------------- */
.scn-list{border-top:1px solid var(--ink);}
.scn{display:grid; grid-template-columns:64px minmax(0,1fr) 190px 150px 110px; gap:24px;
  align-items:center; padding:26px 6px; border-bottom:1px solid var(--line); cursor:pointer;
  transition:background .15s;}
.scn:hover{background:var(--paper-2);}
.scn .code{font-family:var(--serif); font-size:15px; color:var(--verm); letter-spacing:.06em;}
.scn .t{font-family:var(--serif); font-size:20px; line-height:1.45; margin-bottom:4px;}
.scn .s{font-size:12.8px; color:var(--ink-3); line-height:1.65;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;}
.scn .meta{font-size:12px; color:var(--ink-3); line-height:1.9;}
.scn .meta b{color:var(--ink-2); font-weight:600;}
.scn .go{text-align:right; font-size:12.5px; color:var(--ink-3);}
.scn:hover .go{color:var(--verm);}

/* ------------------------------- 表格 ------------------------------- */
.tbl{width:100%; border-collapse:collapse; font-size:13px; background:transparent;}
.tbl thead th{text-align:left; font-size:11px; letter-spacing:.1em; color:var(--ink-3); font-weight:600;
  padding:10px 14px; border-bottom:1px solid var(--ink); white-space:nowrap;}
.tbl td{padding:13px 14px; border-bottom:1px solid var(--line-2); vertical-align:middle; color:var(--ink-2);}
.tbl tbody tr:hover{background:var(--paper-2);}
.tbl td.k{color:var(--ink); font-weight:600;}
.tbl .r{text-align:right;}
.tbl .c{text-align:center;}
.tag{display:inline-block; font-size:10.5px; letter-spacing:.06em; padding:2px 7px; border:1px solid var(--line);
  color:var(--ink-3); border-radius:1px; line-height:1.6; white-space:nowrap;}
.tag.navy{color:var(--navy); border-color:#C9D6E2; background:var(--navy-wash);}
.tag.verm{color:var(--verm); border-color:#E8CFC9; background:var(--verm-wash);}
.tag.gold{color:var(--gold); border-color:#E5D8B6; background:var(--gold-wash);}
.tag.teal{color:var(--teal); border-color:#C6DCD7; background:var(--teal-wash);}
.tag.off{color:var(--ink-4); background:var(--paper-3);}

/* ------------------------------- 表单 ------------------------------- */
.form{display:grid; gap:22px;}
.field label{display:flex; align-items:baseline; gap:8px; font-size:12.5px; font-weight:600; color:var(--ink);
  margin-bottom:7px; letter-spacing:.02em;}
.field label .unit{font-weight:400; color:var(--ink-3); font-size:11.5px;}
.field .hint{font-size:11.5px; color:var(--ink-4); margin-top:6px; line-height:1.6;}
.field input[type=text],.field input[type=number],.field select,.field textarea{
  width:100%; border:1px solid var(--line); background:var(--card); color:var(--ink);
  font-family:var(--sans); font-size:14px; padding:10px 12px; border-radius:var(--r); outline:none;
  transition:border-color .15s; line-height:1.6;}
.field textarea{resize:vertical; min-height:64px;}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--navy);}
.field.bad input,.field.bad textarea,.field.bad select{border-color:var(--verm); background:var(--verm-wash);}
.field-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:18px;}
.checkline{display:flex; gap:10px; align-items:flex-start; font-size:13px; padding:9px 0;
  border-bottom:1px dashed var(--line-2);}
.checkline:last-child{border-bottom:0;}
.checkline .mk{flex:none; width:16px; text-align:center; font-size:12px; line-height:1.7;}
.checkline.ok .mk{color:var(--teal);}
.checkline.no .mk{color:var(--verm);}
.checkline .txt{flex:1; color:var(--ink-2);}
.checkline.no .txt{color:var(--verm);}
.checkline .det{color:var(--ink-3); font-size:11.5px;}

/* ------------------------------- 提示 ------------------------------- */
.toast{position:fixed; left:50%; bottom:34px; transform:translateX(-50%) translateY(12px);
  background:var(--ink); color:#fff; font-size:13px; padding:11px 20px; border-radius:var(--r);
  opacity:0; pointer-events:none; transition:.22s; z-index:200; max-width:80vw;}
.toast.on{opacity:1; transform:translateX(-50%) translateY(0);}
.toast.err{background:var(--verm);}

/* ------------------------------- 抽屉 ------------------------------- */
.scrim{position:fixed; inset:0; background:rgba(21,24,28,.34); z-index:90; opacity:0; pointer-events:none;
  transition:opacity .2s;}
.scrim.on{opacity:1; pointer-events:auto;}
.drawer{position:fixed; top:0; right:0; bottom:0; width:min(560px,94vw); background:var(--paper);
  border-left:1px solid var(--line); z-index:95; transform:translateX(102%); transition:transform .26s cubic-bezier(.2,.7,.3,1);
  display:flex; flex-direction:column;}
.drawer.on{transform:none;}
.drawer .dh{display:flex; align-items:center; gap:14px; padding:22px 26px; border-bottom:1px solid var(--line);}
.drawer .dh h3{font-size:18px;}
.drawer .db{padding:24px 26px; overflow:auto; flex:1;}
.drawer .df{padding:16px 26px; border-top:1px solid var(--line); display:flex; gap:10px; justify-content:flex-end;}
.x{width:30px; height:30px; border:1px solid var(--line); background:transparent; color:var(--ink-3);
  cursor:pointer; border-radius:1px; font-size:15px; line-height:1; margin-left:auto;}
.x:hover{border-color:var(--ink); color:var(--ink);}

/* ------------------------------- 页脚 ------------------------------- */
.foot{border-top:1px solid var(--line); padding:44px 0 60px; font-size:12px; color:var(--ink-3); line-height:1.9;}
.foot .row{display:flex; gap:40px; flex-wrap:wrap; align-items:flex-start;}
.foot b{color:var(--ink-2); font-weight:600;}

/* ------------------------------- 响应 ------------------------------- */
@media (max-width:1080px){
  .wrap{padding:0 22px;} .topbar .inner{padding:0 22px; gap:18px;}
  .nav{gap:16px;} .nav a.hide-s{display:none;}
  .sec{padding:56px 0;} .sec-head{flex-wrap:wrap;} .sec-head .lead{margin-left:0; max-width:none;}
  .scn{grid-template-columns:44px minmax(0,1fr); gap:14px; padding:20px 4px;}
  .scn .meta,.scn .go{display:none;}
  .matrix tbody th{width:78px; font-size:11.5px;}
  .matrix .dot{width:6px; height:6px;}
}