/* 凤江湖论坛 · 全站样式（唯一视觉来源，全部取 token） */

:root{
  --bg:#f0efe9; --surface:#ffffff; --surface-2:#e6e4dc; --surface-3:#dcd9cf;
  --text:#171a1f; --text-muted:#5a626e;
  --accent:#1d4a7a; --accent-ink:#ffffff;
  --seal:#8e2b23; --seal-ink:#fdf7ee;
  --ink-soft:#c9c6bb; --ink-dim:#98958c;
  --border:#d7d4c9; --border-strong:#bdb9ab; --ring:#1d4a7a;
  --link-rule:rgba(29,74,122,.32);
  --ok:#1f6b3a; --warn:#8a5a12; --danger:#a12a1e; --info:#1d4a7a;

  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px;
  --space-5:24px; --space-6:32px; --space-7:48px; --space-8:64px;

  --radius-sm:6px; --radius-md:10px; --radius-lg:14px;
  --shadow-0:0 0 0 rgba(23,26,31,0);
  --shadow-1:0 1px 0 rgba(23,26,31,.05);
  --shadow-2:0 6px 18px -12px rgba(23,26,31,.28);
  --shadow-3:0 14px 34px -18px rgba(23,26,31,.38);
  --shadow-flip:0 5px 12px -7px rgba(23,26,31,.55);
  --shadow-flip-2:0 1px 3px -2px rgba(23,26,31,.3);

  --font-head:"Microsoft YaHei","PingFang SC","Source Han Sans SC","Noto Sans CJK SC",system-ui,sans-serif;
  --font-body:"Songti SC","SimSun","Source Han Serif SC","Noto Serif CJK SC",serif;
  --font-mono:"Cascadia Mono","JetBrains Mono",Consolas,"Courier New",monospace;

  --ease:cubic-bezier(.22,.61,.36,1);
  --dur:160ms; --dur-slow:240ms;
  --cta-loop:3.2s; --cta-ease:cubic-bezier(.34,.06,.28,1); --cta-tilt:62deg;

  --container:720px; --container-wide:1160px;
  --cta-reserve:104px;
}

*,*::before,*::after{box-sizing:border-box}

html{-webkit-text-size-adjust:100%}

body{
  margin:0; padding-bottom:var(--cta-reserve);
  background:var(--bg); color:var(--text);
  font-family:var(--font-body); font-size:17px; line-height:1.8;
  font-weight:400; letter-spacing:0; text-align:left;
}

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

a{color:var(--accent); text-decoration:none; border-bottom:1px solid var(--link-rule)}
a:hover{background:var(--surface-3); border-bottom-color:var(--accent)}
a:focus-visible{outline:2px solid var(--ring); outline-offset:2px; background:var(--surface-3)}

h1,h2,h3,h4{font-family:var(--font-head); font-weight:700; margin:0; overflow-wrap:anywhere}
h1{font-size:34px; line-height:1.24; letter-spacing:-.01em}
h2{font-size:24px; line-height:1.32}
h3{font-size:19px; line-height:1.42}
p{margin:0 0 var(--space-4); overflow-wrap:anywhere}
ul,ol{margin:0 0 var(--space-4); padding-left:1.25em}
li{margin:0 0 var(--space-2); overflow-wrap:anywhere}
strong{font-family:var(--font-head); font-weight:700}

.wrap{max-width:var(--container); margin:0 auto; padding:0 var(--space-5)}
.wrap--wide{max-width:var(--container-wide)}
.pagehead{padding-block:var(--space-6) var(--space-4); border-bottom:1px solid var(--border-strong)}
.pagehead h1{max-width:26ch}

.skip{position:absolute; left:-9999px; top:0; background:var(--surface); padding:var(--space-3) var(--space-4); z-index:60}
.skip:focus{left:var(--space-4); top:var(--space-4)}

/* ---------- 品牌木牌条 ---------- */
.plaque{
  position:sticky; top:0; z-index:40;
  background:var(--surface); border-bottom:1px solid var(--border-strong);
  box-shadow:var(--shadow-1);
}
.plaque__row{display:flex; align-items:center; gap:var(--space-4); min-height:60px; flex-wrap:wrap}
.brand{display:flex; align-items:center; gap:var(--space-3); border-bottom:0; color:var(--text)}
.brand:hover{background:transparent; border-bottom:0}
.brand img{width:140px; height:43px}
.brand span{font-family:var(--font-head); font-weight:700; font-size:17px; letter-spacing:.06em}
.drawers{margin-left:auto; display:flex; gap:var(--space-2); flex-wrap:wrap}
.drawer{position:relative}
.drawer>summary{
  list-style:none; cursor:pointer; font-family:var(--font-head); font-weight:700;
  font-size:14px; line-height:1.2; padding:11px var(--space-4); min-height:44px;
  display:inline-flex; align-items:center; gap:var(--space-2);
  background:var(--surface-2); color:var(--text);
  border:1px solid var(--border); border-radius:var(--radius-sm);
  transition:background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.drawer>summary::-webkit-details-marker{display:none}
.drawer>summary::after{content:"▾"; font-size:11px; transition:transform var(--dur) var(--ease)}
.drawer>summary:hover{background:var(--surface-3)}
.drawer>summary:focus-visible{outline:2px solid var(--ring); outline-offset:2px}
.drawer[open]>summary{background:var(--surface-2); color:var(--accent)}
.drawer[open]>summary::after{transform:rotate(180deg)}
.drawer__panel{
  position:absolute; right:0; top:calc(100% + var(--space-2)); z-index:50;
  width:min(460px,92vw); max-height:70vh; overflow-y:auto;
  background:var(--surface); border:1px solid var(--border-strong);
  border-radius:var(--radius-md); box-shadow:var(--shadow-2); padding:var(--space-4);
}
.drawer__panel h3{font-size:14px; font-family:var(--font-mono); letter-spacing:.08em; color:var(--text-muted); margin-bottom:var(--space-3)}
.drawer__cols{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--space-4)}
.drawer__cols ul{list-style:none; margin:0; padding:0}
.drawer__cols li{margin:0 0 var(--space-1)}
.drawer__cols a{display:block; padding:6px var(--space-2); border-bottom:0; border-radius:var(--radius-sm); font-size:15px}
.drawer__cols a:hover{background:var(--surface-3)}
.drawer__grid{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(auto-fill,minmax(92px,1fr)); gap:0 var(--space-1)}
.drawer__grid li{margin:0}
.drawer__grid a{display:block; padding:7px var(--space-2); border-bottom:0; border-radius:var(--radius-sm); font-size:14px; font-family:var(--font-head)}
.drawer__grid a:hover{background:var(--surface-3)}

/* ---------- 通用版块 ---------- */
main{padding-bottom:var(--space-7)}
section{padding-block:var(--space-6); border-top:1px solid var(--border)}
section:first-of-type{border-top:0}
.sec__kicker{
  font-family:var(--font-mono); font-size:12px; line-height:1.5; letter-spacing:.14em;
  color:var(--text-muted); text-transform:uppercase; margin:0 0 var(--space-2)
}
.sec__note{color:var(--text-muted); font-size:14px; line-height:1.62; margin:var(--space-2) 0 var(--space-4)}

.lede{max-width:46ch; margin-bottom:var(--space-5); font-size:17px; line-height:1.8}

/* ---------- 事实条与地名条 ---------- */
.facts{
  list-style:none; margin:0 0 var(--space-5); padding:0;
  display:grid; grid-template-columns:repeat(auto-fill,minmax(190px,1fr)); gap:var(--space-4)
}
.facts li{margin:0; border-top:1px solid var(--border-strong); padding-top:var(--space-2)}
.facts b{display:block; font-family:var(--font-mono); font-weight:400; font-size:12px; line-height:1.5; letter-spacing:.1em; color:var(--text-muted)}
.facts span{display:block; font-size:16px; line-height:1.7}
.pills{list-style:none; margin:0 0 var(--space-5); padding:0; display:flex; flex-wrap:wrap; gap:var(--space-2)}
.pills li{
  margin:0; font-family:var(--font-mono); font-size:13px; line-height:1.6; letter-spacing:.04em;
  padding:4px var(--space-3); background:var(--surface);
  border:1px solid var(--border); border-radius:var(--radius-sm)
}

/* ---------- 名号飘带 ---------- */
.ribbon{display:flex; flex-wrap:wrap; gap:var(--space-2); margin:0 0 var(--space-5); padding:0; list-style:none}
.ribbon li{margin:0}
.chip{
  display:inline-flex; align-items:center; gap:var(--space-2);
  padding:5px var(--space-3) 5px 6px; background:var(--surface);
  border:1px solid var(--border); border-radius:var(--radius-sm);
  font-family:var(--font-mono); font-size:12px; line-height:1.5; letter-spacing:.04em;
  white-space:nowrap;
}
.chip i{width:10px; height:10px; border-radius:2px; flex:0 0 auto}

/* ---------- 数字块 ---------- */
.figures{
  background:var(--text); color:var(--bg); border-radius:var(--radius-md);
  padding:var(--space-5); box-shadow:var(--shadow-1);
}
.figures__grid{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--space-5) var(--space-4)}
.fig{border-top:1px solid rgba(240,239,233,.22); padding-top:var(--space-3)}
.fig b{
  display:block; font-family:var(--font-mono); font-size:30px; line-height:1.1;
  font-variant-numeric:tabular-nums; letter-spacing:-.02em; font-weight:400;
}
.fig span{display:block; font-size:14px; line-height:1.62; color:var(--ink-soft); margin-top:2px}
.fig em{display:block; font-style:normal; font-size:13px; line-height:1.62; color:var(--ink-dim); margin-top:var(--space-2)}

/* ---------- 表 ---------- */
.sheet{margin:0 0 var(--space-5)}
.sheet__scroll{overflow-x:auto; border:1px solid var(--border-strong); border-radius:var(--radius-md); background:var(--surface)}
table{border-collapse:collapse; width:100%; min-width:520px; font-size:15px; line-height:1.7}
th,td{text-align:left; padding:var(--space-3) var(--space-4); border-bottom:1px solid var(--border); vertical-align:top}
thead th{
  background:var(--surface-2); font-family:var(--font-mono); font-weight:400;
  font-size:12px; line-height:1.5; letter-spacing:.1em; color:var(--text-muted);
  white-space:nowrap; border-bottom:1px solid var(--border-strong);
}
tbody tr:last-child td{border-bottom:0}
tbody tr:hover{background:var(--surface-3)}
td.num,.num{font-family:var(--font-mono); font-variant-numeric:tabular-nums; letter-spacing:.02em; white-space:nowrap}
th[data-sort]{cursor:pointer; user-select:none}
th[data-sort]::after{content:" ↕"; font-size:10px; color:var(--border-strong)}
th[data-sort][aria-sort="ascending"]::after{content:" ↑"; color:var(--accent)}
th[data-sort][aria-sort="descending"]::after{content:" ↓"; color:var(--accent)}

/* ---------- 名号阶梯 ---------- */
.ladder{list-style:none; margin:0 0 var(--space-5); padding:0; counter-reset:r}
.ladder>li{
  display:grid; grid-template-columns:56px minmax(0,1fr); gap:var(--space-4);
  padding:var(--space-4) 0; border-top:1px solid var(--border); margin:0;
  transition:background-color var(--dur) var(--ease);
}
.ladder>li:first-child{border-top:1px solid var(--border-strong)}
.ladder>li::before{
  counter-increment:r; content:counter(r,decimal-leading-zero);
  font-family:var(--font-mono); font-size:14px; line-height:1.7; color:var(--text-muted);
  letter-spacing:.04em; font-variant-numeric:tabular-nums;
}
.rank__name{display:inline-flex; align-items:center; gap:var(--space-2); font-family:var(--font-head); font-weight:700; font-size:19px; line-height:1.42}
.rank__name i{width:12px; height:12px; border-radius:2px; flex:0 0 auto}
.rank__meta{font-family:var(--font-mono); font-size:12px; line-height:1.5; letter-spacing:.06em; color:var(--text-muted); margin-top:2px}
.ladder p{margin:var(--space-2) 0 0; font-size:16px; line-height:1.8}
.ladder .got{color:var(--text-muted); font-size:14px; line-height:1.62}
.ladder>li.is-on{background:var(--surface); box-shadow:inset 3px 0 0 var(--seal)}
.ladder>li.is-on .rank__name{color:var(--seal)}
tr.is-on>td{background:var(--surface-2)}
tr.is-on>td:first-child{box-shadow:inset 3px 0 0 var(--seal)}
tr.is-on strong{color:var(--seal)}

/* ---------- 档位切换 ---------- */
.tiers{display:flex; flex-wrap:wrap; gap:var(--space-2); margin:0 0 var(--space-4); padding:0; border:0}
.tiers legend{font-size:12px; font-family:var(--font-mono); letter-spacing:.1em; color:var(--text-muted); margin-bottom:var(--space-2)}
.tiers label{
  display:inline-flex; align-items:center; gap:var(--space-2); cursor:pointer;
  padding:9px var(--space-4); min-height:44px; border-radius:var(--radius-sm);
  background:var(--surface-2); border:1px solid var(--border);
  font-family:var(--font-mono); font-size:13px; line-height:1.5; letter-spacing:.04em;
  transition:background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.tiers input{position:absolute; opacity:0; width:0; height:0}
.tiers label:hover{background:var(--surface-3)}
.tiers input:focus-visible + span{outline:2px solid var(--ring); outline-offset:2px}
.tiers input:checked + span{color:var(--seal); font-weight:700}
.tiers label:has(input:checked){background:var(--surface); border-color:var(--border-strong); box-shadow:inset 0 -2px 0 var(--seal)}

/* ---------- 筛选按钮组 ---------- */
.filters{display:flex; flex-wrap:wrap; gap:var(--space-2); margin:0 0 var(--space-4)}
.filters button{
  font:inherit; font-family:var(--font-mono); font-size:13px; line-height:1.5; letter-spacing:.04em;
  padding:9px var(--space-4); min-height:44px; cursor:pointer;
  background:var(--surface-2); color:var(--text); border:1px solid var(--border);
  border-radius:var(--radius-sm);
  transition:background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.filters button:hover{background:var(--surface-3)}
.filters button:focus-visible{outline:2px solid var(--ring); outline-offset:2px}
.filters button[aria-pressed="true"]{background:var(--accent); color:var(--accent-ink); border-color:var(--accent)}
.filters button[aria-pressed="true"]:hover{background:var(--accent); color:var(--accent-ink)}
.count{font-family:var(--font-mono); font-size:12px; letter-spacing:.08em; color:var(--text-muted); margin:0 0 var(--space-3)}
tr.is-hidden{display:none}

/* ---------- 术语行 ---------- */
.terms{list-style:none; margin:0 0 var(--space-5); padding:0}
.terms>li{padding:var(--space-3) 0; border-top:1px solid var(--border); margin:0}
.terms>li:first-child{border-top:1px solid var(--border-strong)}
.term__h{display:flex; flex-wrap:wrap; align-items:baseline; gap:var(--space-3)}
.term__h b{font-family:var(--font-head); font-size:19px; line-height:1.42}
.term__when{font-family:var(--font-mono); font-size:12px; letter-spacing:.06em; color:var(--text-muted)}
.terms p{margin:var(--space-1) 0 0; font-size:16px; line-height:1.8}

/* ---------- 对照块 ---------- */
.compare{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--space-4); margin:0 0 var(--space-5)}
.slip{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-md); padding:var(--space-4); box-shadow:var(--shadow-1)}
.slip h3{font-size:16px; margin:0 0 var(--space-2)}
.slip p{margin:0; font-size:16px; line-height:1.8}
.slip ul{margin:var(--space-2) 0 0; padding-left:1.1em}
.slip li{font-size:15px; line-height:1.7}

.tag{display:inline-block; font-family:var(--font-mono); font-size:12px; line-height:1.5; letter-spacing:.06em; padding:1px var(--space-2); border:1px solid var(--border-strong); border-radius:2px; color:var(--text-muted); white-space:nowrap}

/* ---------- FAQ ---------- */
.faq details{border-top:1px solid var(--border)}
.faq details:first-of-type{border-top:1px solid var(--border-strong)}
.faq summary{
  cursor:pointer; list-style:none; padding:var(--space-4) 0;
  font-family:var(--font-head); font-weight:700; font-size:17px; line-height:1.5;
  display:flex; gap:var(--space-3); align-items:baseline;
  transition:color var(--dur) var(--ease);
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::before{content:"＋"; font-family:var(--font-mono); font-size:14px; color:var(--text-muted); flex:0 0 auto}
.faq details[open]>summary::before{content:"－"; color:var(--seal)}
.faq summary:hover{color:var(--accent)}
.faq summary:focus-visible{outline:2px solid var(--ring); outline-offset:2px}
.faq details>p{margin:0 0 var(--space-4); padding-left:26px; font-size:16px; line-height:1.8}

/* ---------- 内链清单 ---------- */
.links{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--space-1) var(--space-4)}
.links li{margin:0}
.links a{display:block; padding:var(--space-2) var(--space-3); border-bottom:1px solid var(--border); border-radius:var(--radius-sm)}
.links a:hover{background:var(--surface-3)}
.links span{display:block; font-size:13px; line-height:1.62; color:var(--text-muted); border:0}

/* ---------- 地区索引 ---------- */
.zone{margin:0 0 var(--space-5)}
.zone h3{font-family:var(--font-mono); font-weight:400; font-size:13px; line-height:1.5; letter-spacing:.14em; color:var(--text-muted); margin:0 0 var(--space-3); padding-bottom:var(--space-2); border-bottom:1px solid var(--border-strong)}
.zone__ul{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); gap:var(--space-1)}
.zone__ul a{display:block; padding:var(--space-2) var(--space-3); border-bottom:1px solid var(--border); border-radius:var(--radius-sm)}
.zone__ul a:hover{background:var(--surface-3)}
.zone__ul em{font-style:normal; font-family:var(--font-mono); font-size:11px; letter-spacing:.06em; color:var(--text-muted); margin-left:var(--space-2)}

/* ---------- 页脚 ---------- */
.foot{border-top:1px solid var(--border-strong); background:var(--surface); padding:var(--space-6) 0 var(--space-6)}
.foot__cols{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:var(--space-5) var(--space-4); margin-bottom:var(--space-6)}
.foot__cols h3{font-family:var(--font-mono); font-weight:400; font-size:12px; line-height:1.5; letter-spacing:.14em; color:var(--text-muted); margin:0 0 var(--space-3)}
.foot__cols ul{list-style:none; margin:0; padding:0}
.foot__cols li{margin:0 0 var(--space-1)}
.foot__cols a{display:inline-block; padding:3px 0; border-bottom:0; font-size:15px}
.foot__cols a:hover{background:transparent; border-bottom:1px solid var(--accent)}
.foot__base{border-top:1px solid var(--border); padding-top:var(--space-4); display:flex; flex-wrap:wrap; gap:var(--space-3); align-items:baseline; font-size:14px; line-height:1.7; color:var(--text-muted)}
.foot__base .brandline{font-family:var(--font-head); font-weight:700; color:var(--text)}

/* ---------- 唯一寻芳 CTA ---------- */
.site-cta{
  position:fixed; left:50%; bottom:calc(var(--space-4) + env(safe-area-inset-bottom,0px));
  transform:translateX(-50%); z-index:60;
  width:max-content; max-width:min(560px,calc(100% - 32px));
  display:flex; align-items:center; gap:var(--space-3);
  padding:var(--space-3) var(--space-5) var(--space-3) var(--space-3);
  min-height:52px; border-radius:var(--radius-md); border:1px solid var(--seal);
  background:var(--seal); color:var(--seal-ink); border-bottom:1px solid var(--seal);
  box-shadow:var(--shadow-3); perspective:320px;
  font-family:var(--font-head); font-weight:700; font-size:16px; line-height:1.4;
  letter-spacing:.01em;
  transition:background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.site-cta:hover{background:var(--seal); color:var(--seal-ink); border-color:var(--seal)}
.site-cta:focus-visible{outline:2px solid var(--text); outline-offset:3px; background:var(--seal)}
.site-cta__plaque{
  flex:0 0 auto; width:26px; height:30px; border-radius:2px;
  background:var(--seal-ink); color:var(--seal);
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-head); font-size:15px; line-height:1;
  transform-origin:top center; backface-visibility:visible;
  animation:plaque-flip var(--cta-loop) var(--cta-ease) infinite;
}
.site-cta__text{display:block}

@keyframes plaque-flip{
  0%,52%{transform:rotateX(0deg); opacity:1; box-shadow:var(--shadow-0)}
  66%{transform:rotateX(calc(var(--cta-tilt) * -1)); opacity:.38; box-shadow:var(--shadow-flip)}
  78%{transform:rotateX(-6deg); opacity:.94; box-shadow:var(--shadow-flip-2)}
  88%{transform:rotateX(-12deg); opacity:1; box-shadow:var(--shadow-0)}
  100%{transform:rotateX(0deg); opacity:1; box-shadow:var(--shadow-0)}
}

/* ---------- 面包屑 ---------- */
.crumb{font-size:13px; line-height:1.62; color:var(--text-muted); padding-top:var(--space-5); margin:0}
.crumb a{border-bottom:0}
.crumb a:hover{border-bottom:1px solid var(--accent); background:transparent}

/* ---------- 404 ---------- */

/* ---------- 断点 ---------- */
@media (max-width:1159px){
  .drawer__panel{position:fixed; left:50%; right:auto; transform:translateX(-50%); top:calc(60px + var(--space-2)); width:min(560px,92vw)}
}

@media (max-width:719px){
  :root{--cta-reserve:120px}
  body{font-size:17px}
  h1{font-size:28px}
  h2{font-size:21px}
  h3{font-size:18px}
  .wrap{padding:0 var(--space-4)}
  .plaque__row{gap:var(--space-3); padding:var(--space-2) 0; min-height:0}
  .brand img{width:118px; height:36px}
  .brand span{font-size:15px}
  .drawers{margin-left:0; width:100%}
  .drawer{flex:1 1 auto}
  .drawer>summary{width:100%; justify-content:center}
  .drawer__panel{width:92vw; left:50%}
  .drawer__cols{grid-template-columns:1fr}
  section{padding-block:var(--space-5)}
  .figures{padding:var(--space-4)}
  .figures__grid{grid-template-columns:1fr; gap:var(--space-4)}
  .fig b{font-size:26px}
  .compare{grid-template-columns:1fr}
  .links{grid-template-columns:1fr}
  .foot__cols{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ladder>li{grid-template-columns:36px minmax(0,1fr); gap:var(--space-3)}
  .ladder>li::before{font-size:12px}
  table{min-width:440px}
  table [data-col="note"]{display:none}
  .site-cta__plaque{width:22px; height:26px; font-size:13px}
  .site-cta{left:var(--space-3); right:var(--space-3); bottom:calc(var(--space-3) + env(safe-area-inset-bottom,0px)); transform:none; width:auto; max-width:none; font-size:15px; padding:var(--space-2) var(--space-4) var(--space-2) var(--space-2)}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition-duration:.01ms !important; animation-duration:.01ms !important; animation-iteration-count:1 !important}
  .site-cta__plaque{animation:none; transform:none; opacity:1; box-shadow:none}
}