/* ============================================================
   6686官方 · 中国站  /assets/site.css
   共享：reset · 变量 · 中文排版 · 头部 · 页脚 · 通用组件
   ============================================================ */

/* ---------- 1. Reset ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{ margin:0; }
h1,h2,h3,h4,h5,h6,p,figure,blockquote,dl,dd{ margin:0; }
ul,ol{ margin:0; padding:0; list-style:none; }
img,svg,video{ display:block; max-width:100%; }
button,input,select,textarea{ font:inherit; color:inherit; }
button{ background:none; border:0; cursor:pointer; }
a{ color:inherit; }
table{ border-collapse:collapse; }

/* ---------- 2. tokens ---------- */
:root{
  --red:#9E2B2B;
  --red-deep:#6E1D1D;
  --indigo:#16324F;
  --gold:#C8973C;
  --butter:#F0C070;
  --sky:#BBD7E6;
  --paper:#F7F1E6;
  --card:#FFFCF5;
  --stone:#6E6A63;
  --ink:#14161A;
  --barley:#7C9A6B;

  --font-head:"Noto Serif SC","Source Han Serif SC","Songti SC","SimSun",Georgia,serif;
  --font-body:"Noto Sans SC","Source Han Sans SC","PingFang SC","Microsoft YaHei",system-ui,sans-serif;
  --font-num:"Oswald","Arial Narrow","Helvetica Neue",Arial,sans-serif;

  --edge:3px;
  --shadow-hard:8px 8px 0 var(--ink);
  --shadow-mid:5px 5px 0 var(--ink);
  --shadow-indigo:4px 4px 0 var(--indigo);
  --maxw:1240px;
}

/* ---------- 3. 中文排版与全局基调 ---------- */
body{
  background-color:var(--paper);
  background-image:linear-gradient(180deg,#E8F1F6 0px,rgba(247,241,230,0) 520px);
  background-repeat:no-repeat;
  color:var(--ink);
  font-family:var(--font-body);
  font-size:17px;
  line-height:1.75;
  letter-spacing:.01em;
  min-height:100vh;
  overflow-x:hidden;
}
::selection{ background:var(--butter); color:var(--ink); }

h1,h2,h3,h4{ font-family:var(--font-head); font-weight:700; line-height:1.25; color:var(--indigo); }
h1{ font-size:clamp(2.6rem,6vw,5rem); line-height:1.06; letter-spacing:.005em; }
h2{ font-size:clamp(1.6rem,3vw,2.4rem); }
h3{ font-size:1.25rem; }
h4{ font-size:1.05rem; }
p{ margin-bottom:1.05em; }
p:last-child{ margin-bottom:0; }
a{ color:var(--red); text-underline-offset:3px; }
strong{ font-weight:600; }
small{ font-size:14px; }

/* ---------- 4. 布局工具 ---------- */
.wrap{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:clamp(18px,4vw,40px); }
.wrap--wide{ max-width:1440px; }
.site-main{ display:block; padding-block:clamp(36px,5vw,76px); }
.prose{ max-width:68ch; }
.prose p{ text-align:justify; text-justify:inter-ideograph; }
.prose ul{ margin:0 0 1.1em; }
.prose ul li{ position:relative; padding-left:1.4em; margin-bottom:.5em; }
.prose ul li::before{ content:""; position:absolute; left:0; top:.72em; width:10px; height:3px; background:var(--red); }
.grid{ display:grid; gap:clamp(18px,2.6vw,32px); }
.grid-2{ grid-template-columns:repeat(2,minmax(0,1fr)); }
.grid-3{ grid-template-columns:repeat(3,minmax(0,1fr)); }
.grid-asym{ grid-template-columns:minmax(0,7fr) minmax(0,5fr); }
.visually-hidden{
  position:absolute!important; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

/* ---------- 5. 跳过链接 ---------- */
.skip-link{
  position:fixed; left:16px; top:-88px; z-index:200;
  background:var(--ink); color:var(--paper);
  padding:12px 20px; border:var(--edge) solid var(--gold);
  font-weight:600; text-decoration:none;
  transition:top .18s ease-out;
}
.skip-link:focus{ top:16px; }

/* ---------- 6. 头部：框架式导航 ---------- */
.site-header{
  position:sticky; top:0; z-index:80;
  background:var(--paper);
  border-bottom:var(--edge) solid var(--ink);
  box-shadow:0 6px 0 rgba(20,22,26,.14);
}
.site-header::before{
  content:""; display:block; height:6px;
  background:linear-gradient(90deg,
    var(--red) 0 16%, var(--gold) 16% 32%, var(--indigo) 32% 48%,
    var(--sky) 48% 62%, var(--barley) 62% 76%, var(--butter) 76% 100%);
}
.header-frame{
  display:grid;
  grid-template-columns:74px minmax(0,1fr);
  align-items:stretch;
}
.frame-rail{
  display:flex; align-items:center; justify-content:center;
  writing-mode:vertical-rl;
  background:var(--indigo); color:var(--butter);
  border-right:var(--edge) solid var(--ink);
  font-size:12px; font-weight:600; letter-spacing:.34em;
  padding:16px 0;
}
.header-body{
  display:flex; align-items:center; gap:clamp(12px,2vw,26px);
  padding:14px clamp(16px,3.4vw,56px);
  min-width:0;
}
.brand{
  display:flex; align-items:center; gap:14px;
  text-decoration:none; color:var(--ink); min-width:0;
}
.brand-mark{
  flex:none; width:46px; height:46px;
  background:linear-gradient(135deg,var(--red) 0 50%,var(--indigo) 50% 100%);
  border:var(--edge) solid var(--ink);
  box-shadow:4px 4px 0 var(--ink);
  transition:box-shadow .18s ease-out;
}
.brand:hover .brand-mark{ box-shadow:2px 2px 0 var(--gold); }
.brand-text{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.brand-line{ font-family:var(--font-head); font-weight:700; font-size:17px; color:var(--indigo); line-height:1.3; white-space:nowrap; }
.brand-tagline{ font-size:13px; color:var(--stone); line-height:1.4; white-space:nowrap; }

.nav-toggle{
  display:none; align-items:center; gap:10px;
  margin-left:auto;
  background:var(--card); color:var(--indigo);
  border:var(--edge) solid var(--ink); box-shadow:var(--shadow-indigo);
  padding:9px 14px; font-weight:600;
  transition:background .18s ease-out,color .18s ease-out,box-shadow .18s ease-out;
}
.nav-toggle-bars{ display:inline-flex; flex-direction:column; gap:4px; width:20px; }
.nav-toggle-bars span{ display:block; height:2px; background:currentColor; transition:transform .18s ease-out,opacity .18s ease-out; }
.nav-toggle-label{ font-size:15px; }
.site-header[data-open] .nav-toggle{ background:var(--indigo); color:var(--butter); box-shadow:2px 2px 0 var(--gold); }
.site-header[data-open] .nav-toggle-bars span:nth-child(1){ transform:translateY(6px) rotate(45deg); }
.site-header[data-open] .nav-toggle-bars span:nth-child(2){ opacity:0; }
.site-header[data-open] .nav-toggle-bars span:nth-child(3){ transform:translateY(-6px) rotate(-45deg); }

.site-nav{
  margin-left:auto;
  display:flex; align-items:center; gap:clamp(8px,1.4vw,22px);
}
.nav-list{ display:flex; align-items:center; gap:2px; }
.nav-link{
  display:block; padding:9px 11px;
  font-size:16px; font-weight:500; color:var(--indigo);
  text-decoration:none; border-bottom:3px solid transparent;
  transition:color .16s ease-out,border-color .16s ease-out,background .16s ease-out;
}
.nav-link:hover{ color:var(--red); border-bottom-color:var(--gold); }
.nav-link[aria-current="page"]{
  color:var(--paper); background:var(--red); border-bottom-color:var(--ink);
}
.nav-cta{
  display:inline-block; padding:11px 18px;
  background:var(--gold); color:var(--ink);
  border:var(--edge) solid var(--ink); box-shadow:4px 4px 0 var(--ink);
  font-weight:700; font-size:16px; text-decoration:none; white-space:nowrap;
  transition:transform .16s ease-out,box-shadow .16s ease-out,background .16s ease-out;
}
.nav-cta:hover{ background:var(--butter); box-shadow:1px 1px 0 var(--ink); transform:translate(3px,3px); }

/* ---------- 7. 页脚：压低的藏青横带 ---------- */
.site-footer{
  margin-top:clamp(48px,8vw,104px);
  background:var(--indigo); color:var(--paper);
  border-top:6px solid var(--red);
}
.footer-inner{
  max-width:var(--maxw); margin-inline:auto;
  padding:clamp(36px,5vw,68px) clamp(18px,4vw,40px) clamp(26px,3vw,44px);
  display:grid;
  grid-template-columns:minmax(0,1.15fr) minmax(0,1.9fr) minmax(0,1.25fr);
  gap:clamp(24px,4vw,56px);
}
.footer-brand-mark{
  display:block; font-family:var(--font-head); font-weight:700;
  font-size:clamp(1.4rem,2.3vw,1.95rem); color:var(--butter); line-height:1.3;
}
.footer-tagline{ margin-top:10px; color:var(--sky); font-size:15px; }
.footer-meta{ margin-top:14px; font-size:13px; line-height:1.75; color:#A9BDCB; }
.footer-cols{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(16px,3vw,32px); }
.footer-col-title{
  font-family:var(--font-body); font-size:15px; font-weight:600; letter-spacing:.12em;
  color:var(--butter); margin:0 0 14px; padding-bottom:8px;
  border-bottom:2px solid rgba(240,192,112,.35);
}
.footer-links{ display:flex; flex-direction:column; gap:11px; }
.footer-links a{
  color:var(--paper); font-size:15px; text-decoration:none;
  border-bottom:1px solid transparent; padding-bottom:2px;
  transition:color .16s ease-out,border-color .16s ease-out;
}
.footer-links a:hover{ color:var(--butter); border-bottom-color:var(--butter); }
.footer-contact-list{ display:flex; flex-direction:column; gap:14px; font-size:14px; color:#DCE6EE; }
.footer-contact-label{
  display:block; font-size:12px; letter-spacing:.16em; color:var(--sky); margin-bottom:2px;
}
.footer-note{ margin-top:16px; font-size:13px; line-height:1.7; color:#A9BDCB; }
.footer-base{ border-top:2px solid rgba(247,241,230,.18); }
.footer-base-inner{
  max-width:var(--maxw); margin-inline:auto;
  padding:18px clamp(18px,4vw,40px);
  display:flex; flex-wrap:wrap; gap:8px 28px;
  justify-content:space-between; align-items:center;
  font-size:13px; color:#A9BDCB;
}
.footer-icp{ margin:0; letter-spacing:.06em; }
.footer-copy{ margin:0; }

/* ---------- 8. 按钮 ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:13px 24px;
  background:var(--card); color:var(--ink);
  border:var(--edge) solid var(--ink); box-shadow:var(--shadow-mid);
  font-weight:600; font-size:16px; text-decoration:none;
  transition:transform .16s ease-out,box-shadow .16s ease-out,background .16s ease-out,color .16s ease-out,border-color .16s ease-out;
}
.btn:hover{ transform:translate(3px,3px); box-shadow:2px 2px 0 var(--ink); border-color:var(--gold); }
.btn--primary{ background:var(--red); color:var(--paper); }
.btn--primary:hover{ background:var(--red-deep); color:var(--butter); }
.btn--gold{ background:var(--gold); color:var(--ink); }
.btn--gold:hover{ background:var(--butter); }
.btn--ghost{ background:transparent; box-shadow:none; border-style:dashed; }
.btn--ghost:hover{ background:rgba(187,215,230,.35); }

/* ---------- 9. 标签 / 徽章 / 数字 ---------- */
.tag{
  display:inline-block; padding:3px 11px;
  font-size:13px; line-height:1.6;
  background:var(--card); color:var(--indigo);
  border:2px solid var(--indigo);
}
.tag--gold{ background:var(--gold); color:var(--ink); border-color:var(--ink); }
.tag--barley{ background:var(--barley); color:var(--ink); border-color:var(--ink); }
.num-badge{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:38px; height:38px; padding:0 8px;
  font-family:var(--font-num); font-size:1.05rem; font-weight:700;
  background:var(--indigo); color:var(--butter);
  border:2px solid var(--ink); box-shadow:3px 3px 0 var(--gold);
}
.num-xl{
  display:block; font-family:var(--font-num); font-weight:700;
  font-size:clamp(3rem,7vw,4.6rem); line-height:.92; color:var(--red);
  letter-spacing:-.01em;
}

/* ---------- 10. 段落头 / 旁注 ---------- */
.eyebrow{
  font-size:13px; font-weight:600; letter-spacing:.28em;
  color:var(--red); margin:0 0 10px; text-transform:uppercase;
}
.section-head{ border-left:6px solid var(--gold); padding-left:16px; margin-bottom:clamp(20px,2.6vw,32px); }
.section-head h2{ margin-bottom:.25em; }
.note{ font-size:14px; line-height:1.7; color:var(--stone); }
.callout{
  border-left:5px solid var(--gold); background:rgba(240,192,112,.24);
  padding:14px 18px; font-size:15px; line-height:1.75;
}
.callout p:last-child{ margin-bottom:0; }

/* ---------- 11. 堆叠面板 ---------- */
.panel{
  position:relative;
  background:var(--card);
  border:var(--edge) solid var(--ink);
  box-shadow:var(--shadow-hard);
  padding:clamp(22px,3vw,42px);
}
.panel--offset-l{ margin-left:clamp(0px,3vw,40px); }
.panel--offset-r{ margin-right:clamp(0px,3vw,40px); }
.panel--red{ background:var(--red); color:var(--paper); }
.panel--indigo{ background:var(--indigo); color:var(--paper); }
.panel--butter{ background:var(--butter); }
.panel--sky{ background:var(--sky); }
.panel--red h1,.panel--red h2,.panel--red h3,.panel--red h4,
.panel--indigo h1,.panel--indigo h2,.panel--indigo h3,.panel--indigo h4{ color:inherit; }
.panel--red a,.panel--indigo a{ color:var(--butter); }

/* ---------- 12. 卡片 ---------- */
.card{
  background:var(--card);
  border:var(--edge) solid var(--ink);
  box-shadow:var(--shadow-mid);
  padding:22px;
  transition:box-shadow .18s ease-out,transform .18s ease-out,border-color .18s ease-out;
}
.card:hover{ box-shadow:3px 3px 0 var(--ink); transform:translate(2px,2px); border-color:var(--gold); }
.card-lg{ padding:clamp(24px,3vw,38px); box-shadow:var(--shadow-hard); }
.card-sm{ padding:16px 18px; background:var(--sky); box-shadow:var(--shadow-indigo); }

/* ---------- 13. 面包屑 ---------- */
.breadcrumb{ margin:0 0 20px; font-size:14px; color:var(--stone); }
.breadcrumb ol{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; }
.breadcrumb li{ display:flex; align-items:center; gap:8px; }
.breadcrumb li + li::before{ content:"/"; color:var(--stone); }
.breadcrumb a{ color:var(--indigo); text-decoration:none; border-bottom:1px dotted var(--indigo); }
.breadcrumb a:hover{ color:var(--red); border-bottom-color:var(--red); }

/* ---------- 14. 折叠面板 ---------- */
.accordion{
  border:var(--edge) solid var(--ink);
  background:var(--card);
  box-shadow:var(--shadow-hard);
}
.accordion-item + .accordion-item{ border-top:2px solid var(--ink); }
.accordion-trigger{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  width:100%; text-align:left;
  padding:18px clamp(16px,2.4vw,26px);
  font-weight:600; color:var(--indigo); font-size:17px;
  transition:background .16s ease-out,color .16s ease-out;
}
.accordion-trigger::after{
  content:"+"; flex:none; font-family:var(--font-num); font-size:1.6rem; line-height:1; color:var(--red);
}
.accordion-trigger:hover{ background:rgba(187,215,230,.35); }
.accordion-item[data-open="true"] .accordion-trigger{ background:var(--butter); color:var(--ink); }
.accordion-item[data-open="true"] .accordion-trigger::after{ content:"–"; color:var(--indigo); }
.accordion-panel{ display:none; padding:0 clamp(16px,2.4vw,26px) 22px; }
.accordion-item[data-open="true"] .accordion-panel{ display:block; }

/* ---------- 15. 步骤切换器 ---------- */
.steps{ display:flex; flex-wrap:wrap; gap:10px; margin-bottom:22px; }
.step-tab{
  padding:11px 20px;
  background:var(--card); color:var(--indigo);
  border:2px solid var(--ink);
  font-weight:600;
  transition:background .16s ease-out,color .16s ease-out,box-shadow .16s ease-out;
}
.step-tab:hover{ background:rgba(187,215,230,.45); }
.step-tab[aria-selected="true"]{ background:var(--indigo); color:var(--butter); box-shadow:4px 4px 0 var(--gold); }
.step-panel{ display:none; }
.step-panel[data-active="true"]{ display:block; }

/* ---------- 16. 筛选预览 ---------- */
.filter-preview{
  border:var(--edge) solid var(--ink);
  background:var(--card);
  box-shadow:var(--shadow-hard);
  padding:clamp(20px,2.6vw,32px);
}
.filter-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:10px; margin:18px 0; }
.filter-chip{
  display:flex; align-items:center; gap:9px;
  padding:10px 13px; font-size:15px;
  background:var(--paper); border:2px solid var(--ink);
  cursor:pointer;
}
.filter-chip:hover{ border-color:var(--gold); background:rgba(240,192,112,.25); }
.filter-chip input{ width:16px; height:16px; accent-color:var(--red); flex:none; }
.filter-count{
  font-family:var(--font-num); font-weight:700;
  font-size:clamp(2.4rem,6vw,3.6rem); line-height:1; color:var(--red);
}
.filter-result{ display:flex; align-items:baseline; gap:12px; flex-wrap:wrap; }

/* ---------- 17. 锚点索引 ---------- */
.anchor-index{ position:sticky; top:112px; }
.anchor-index-list{ border-left:3px solid var(--ink); }
.anchor-link{
  display:block; margin-left:-3px; padding:9px 14px;
  font-size:14px; color:var(--indigo); text-decoration:none;
  border-left:4px solid transparent;
  transition:background .16s ease-out,border-color .16s ease-out,color .16s ease-out;
}
.anchor-link:hover{ background:rgba(187,215,230,.4); }
.anchor-link[aria-current="true"]{ background:var(--butter); border-left-color:var(--red); color:var(--ink); font-weight:600; }

/* ---------- 18. 经卷式侧栏 ---------- */
.scroll-panel{
  border:var(--edge) solid var(--ink);
  background:var(--card);
  box-shadow:var(--shadow-hard);
}
.scroll-panel-head{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:14px 18px;
  background:var(--indigo); color:var(--butter);
  font-weight:600; font-size:15px; letter-spacing:.06em;
}
.scroll-panel-body{
  max-height:0; overflow:hidden;
  transition:max-height .3s ease-out;
}
.scroll-panel[data-open="true"] .scroll-panel-body{ max-height:560px; overflow-y:auto; }
.scroll-panel-inner{ padding:18px; font-size:15px; }

/* ---------- 19. 图片容器 ---------- */
.figure{
  margin:0; overflow:hidden;
  border:var(--edge) solid var(--ink);
  background:var(--sky);
  box-shadow:var(--shadow-mid);
}
.figure-img{
  display:block; width:100%; height:auto;
  aspect-ratio:16 / 10; object-fit:cover;
  background:linear-gradient(135deg,var(--sky) 0%,#E7F0F5 52%,var(--butter) 100%);
}
.figure--tall .figure-img{ aspect-ratio:4 / 5; }
.figure--wide .figure-img{ aspect-ratio:21 / 9; }
.figure--square .figure-img{ aspect-ratio:1 / 1; }
.figure-cap{
  font-size:13px; line-height:1.6; color:var(--ink);
  background:var(--butter); padding:9px 14px; border-top:2px solid var(--ink);
}

/* ---------- 20. 滚动进度与返回顶部 ---------- */
.scroll-progress{
  position:fixed; top:0; left:0; z-index:120;
  height:4px; width:0;
  background:linear-gradient(90deg,var(--gold),var(--red));
}
.to-top{
  position:fixed; right:18px; bottom:18px; z-index:90;
  display:none; align-items:center; gap:8px;
  padding:12px 16px;
  background:var(--indigo); color:var(--butter);
  border:var(--edge) solid var(--ink); box-shadow:4px 4px 0 var(--ink);
  font-weight:600; font-size:15px;
}
.to-top[data-visible="true"]{ display:inline-flex; }
.to-top:hover{ background:var(--red); color:var(--paper); }

/* ---------- 21. 显现动效 ---------- */
[data-reveal]{ opacity:0; transform:translateY(16px); transition:opacity .28s ease-out,transform .28s ease-out; }
[data-reveal].is-visible{ opacity:1; transform:none; }

/* ---------- 22. 焦点可见 ---------- */
:focus-visible{
  outline:3px solid var(--gold);
  outline-offset:3px;
}
.site-header :focus-visible,
.site-footer :focus-visible{ outline-color:var(--butter); }

/* ---------- 23. 响应式 ---------- */
@media (max-width:1040px){
  .header-frame{ grid-template-columns:minmax(0,1fr); }
  .frame-rail{ display:none; }
  .header-body{ flex-wrap:wrap; padding:12px clamp(14px,3vw,24px) 14px; }
  .nav-toggle{ display:inline-flex; }
  .site-nav{
    display:none;
    order:3; width:100%; margin:12px 0 0;
    flex-direction:column; align-items:stretch; gap:0;
    padding-top:10px; border-top:var(--edge) solid var(--ink);
  }
  .site-header[data-open] .site-nav,
  .site-nav[data-open]{ display:flex; }
  .nav-list{ flex-direction:column; align-items:stretch; gap:0; }
  .nav-link{
    padding:14px 6px; font-size:17px;
    border-bottom:1px solid rgba(22,50,79,.18);
    border-left:4px solid transparent;
  }
  .nav-link:hover{ border-bottom-color:rgba(22,50,79,.18); border-left-color:var(--gold); }
  .nav-link[aria-current="page"]{ border-bottom-color:var(--ink); border-left-color:var(--ink); }
  .nav-cta{ margin-top:14px; text-align:center; }

  .footer-inner{ grid-template-columns:minmax(0,1fr); gap:32px; }
  .footer-cols{ grid-template-columns:repeat(3,minmax(0,1fr)); }
  .anchor-index{ position:static; }
}
@media (max-width:900px){
  .grid-2,.grid-3,.grid-asym{ grid-template-columns:minmax(0,1fr); }
  .panel--offset-l,.panel--offset-r{ margin-left:0; margin-right:0; }
}
@media (max-width:720px){
  body{ font-size:16px; }
  h3{ font-size:1.15rem; }
  .brand-tagline{ display:none; }
  .footer-cols{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:22px; }
  .footer-base-inner{ flex-direction:column; align-items:flex-start; gap:6px; }
  .to-top{ right:12px; bottom:12px; padding:10px 13px; }
}
@media (max-width:420px){
  .footer-cols{ grid-template-columns:minmax(0,1fr); }
  .brand-line{ font-size:15px; white-space:normal; }
}

/* ---------- 24. 减少动态效果 ---------- */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.001ms!important;
    animation-iteration-count:1!important;
    transition-duration:.001ms!important;
  }
  [data-reveal]{ opacity:1!important; transform:none!important; }
  .scroll-panel-body{ transition:none; }
}