/* ==========================================================================
   51风流 · 设计系统
   主色 #EC4899、页面底 #F5F5F5、容器 72rem、报头 sticky + 2px 主色条、
   导航项高 5rem、圆角 .25rem
   A31：原设计本身即浅色底
   A32：正文字号按 16px/1.75 落地，层级比例保持不变
   ========================================================================== */

:root{
  /* 品牌与文字 */
  --pink:#EC4899;          /* 主色 */
  --pink-600:#C73482;      /* 主色加深，用作大面积色块底与按钮 */
  --pink-700:#A81E63;      /* 浅底上的文字色，对 #F5F5F5 为 6.36:1 */
  --pink-400:#FA75B3;      /* 主色浅调，用于装饰点 */
  --pink-200:#FFC9DF;      /* 描边浅调 */
  --pink-100:#FDEAF3;      /* 标签底 */
  --pink-50:#FFF0F5;       /* 提示块底 */
  /* 底色与文字 */
  --bg:#F5F5F5;            /* 页面底 */
  --card:#FFFFFF;          /* 卡片底 */
  --title:#262626;         /* 标题 */
  --text:#525252;          /* 正文 */
  --meta:#6E6E6E;          /* 辅助文字，对白底 5.17:1 */
  --line:#E5E7EB;          /* 描边 */
  --line-2:#F0F0F0;        /* 分隔线 */
  --wash-2:#FAFAFA;        /* 次级底 */
  /* 语义色 */
  --ok:#52C41A;
  --warn:#FAAD14;
  --danger:#FF4D4F;
  --info:#1890FF;
  --wash-ok:#F6FFED;
  --wash-warn:#FFFBE6;
  --wash-danger:#FFF2F0;
  /* 几何 */
  --radius:4px;
  --radius-md:6px;
  --radius-lg:8px;
  --container:1152px;
  --hd-h:80px;
  --shadow:0 1px 3px 0 rgb(0 0 0 / .1), 0 1px 2px -1px rgb(0 0 0 / .1);
  --shadow-2:0 4px 10px -2px rgb(0 0 0 / .12), 0 2px 4px -2px rgb(0 0 0 / .08);
  --cta-h:60px;
  --cta-chip:#D6337C;      /* CTA 徽标底：白字与图形在其上对比度 4.54:1 */
  --cta-chip-deep:#8E1B53;
  --cta-bg-1:#C73482;      /* 白字 4.95:1 */
  --cta-bg-2:#B3296E;      /* 白字 6.07:1 */
}

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

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

body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,
    "PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans",sans-serif;
  font-size:16px;
  line-height:1.75;
  font-variant-numeric:tabular-nums;
  overflow-wrap:anywhere;
  padding-bottom:calc(var(--cta-h) + env(safe-area-inset-bottom) + 40px);
}

img,svg{max-width:100%}
a{color:var(--pink-700);text-decoration:none}
a:hover{text-decoration:underline;color:var(--pink-600)}
h1,h2,h3{color:var(--title);margin:0;line-height:1.3}
ul,ol{margin:0;padding:0;list-style:none}
p{margin:0}
table{border-collapse:collapse;width:100%}
summary{cursor:pointer}

:focus-visible{outline:3px solid var(--pink-700);outline-offset:2px}

.skip{position:absolute;left:-9999px;top:0;background:var(--card);color:var(--pink-700);
  padding:10px 16px;border-radius:var(--radius);z-index:100}
.skip:focus{left:8px;top:8px}

.wrap{width:100%;max-width:var(--container);margin:0 auto;padding:0 12px}

/* ---------- 报头（参考站：白底 + shadow + sticky top-0 z-10 + 顶部 2px 主色条） ---------- */

.hairline{height:2px;background:var(--pink)}

.hd{position:sticky;top:0;z-index:10;background:var(--card);box-shadow:var(--shadow)}
.hd__in{display:flex;align-items:center;justify-content:space-between;min-height:56px}
.hd__brand{display:inline-flex;align-items:center;flex:0 0 auto}
.hd__b51{color:var(--pink-600);font-size:30px;line-height:1;font-weight:700;letter-spacing:.5px}
.hd__bword{background:var(--pink-600);color:#fff;font-size:16px;line-height:1;padding:5px 10px;
  border-radius:var(--radius);margin-left:6px}
.hd__brand:hover{text-decoration:none}

.hd__right{display:flex;align-items:center;gap:8px}
.hd__entry{display:none}

.nv{display:none}
.nv__l{display:flex;align-items:center}
.nv__a{display:flex;align-items:center;height:var(--hd-h);padding:0 24px;font-size:16px;
  color:var(--text);white-space:nowrap;border-bottom:2px solid transparent}
.nv__a:hover{color:var(--title);text-decoration:none}
.nv__a[aria-current="page"]{color:var(--pink-700);border-bottom-color:var(--pink)}

.mnav{position:relative}
.mnav__btn{list-style:none;display:flex;align-items:center;justify-content:center;
  min-width:44px;min-height:44px;padding:0 12px;border:1px solid var(--line);
  border-radius:var(--radius);color:var(--text);font-size:15px;background:var(--card)}
.mnav__btn::-webkit-details-marker{display:none}
.mnav[open] .mnav__btn{border-color:var(--pink-200);color:var(--pink-700)}
.mnav__panel{position:absolute;right:0;top:calc(100% + 8px);width:min(78vw,300px);
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius-md);
  box-shadow:var(--shadow-2);padding:4px 14px;z-index:20}
/* 参考站抽屉行：.menu-item 白底 + 虚线底边 + 16px 字 */
.mnav__a{display:flex;align-items:center;min-height:46px;font-size:16px;color:var(--text);
  border-bottom:1px dashed var(--line)}
.mnav__l li:last-child .mnav__a{border-bottom:0}
.mnav__a:hover{color:var(--pink-700);text-decoration:none}

/* ---------- 检索条 ---------- */

.sbar{padding-top:14px}
.sbar__f{display:flex;flex-wrap:wrap;align-items:center;gap:8px;background:var(--card);
  border:1px solid var(--line);border-radius:var(--radius-md);padding:10px 12px}
.sbar__lb{font-size:14px;color:var(--meta);flex:0 0 auto}
.sbar__in{flex:1 1 180px;min-width:0;min-height:44px;padding:0 12px;font-size:16px;
  color:var(--text);background:var(--wash-2);border:1px solid var(--line);
  border-radius:var(--radius)}
.sbar__bt{min-height:44px;padding:0 20px;font-size:16px;color:#fff;border:0;
  border-radius:var(--radius);background:var(--pink-600);cursor:pointer}
.sbar__bt:hover{background:var(--pink-700)}
.sbar__hint{margin-top:8px;font-size:14px;color:var(--meta)}

/* ---------- 标题与正文 ---------- */

.h1{font-size:26px;margin-top:18px}
.h1--home{font-size:27px}
.lede{margin-top:10px;font-size:17px;line-height:1.8;color:var(--text);max-width:74ch}
.tx{margin-top:12px;max-width:74ch}

.bc{margin-top:14px;font-size:14px;color:var(--meta)}
.bc a{color:var(--meta)}
.bc a:hover{color:var(--pink-700)}

/* ---------- 筛选 chip（参考站省份/城市筛选） ---------- */

.filt{margin-top:16px}
.filt__lb{display:block;font-size:14px;color:var(--meta);margin-bottom:8px}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{display:inline-flex;align-items:center;min-height:44px;padding:0 16px;font-size:15px;
  color:var(--text);background:var(--card);border:1px solid var(--line);
  border-radius:var(--radius)}
.chip:hover{color:var(--pink-700);border-color:var(--pink-200);text-decoration:none}

/* ---------- 区块（白底标题条 + 下边线） ---------- */

.sec{margin-top:26px}
.sec__hd{display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  border-bottom:1px solid var(--line);margin-bottom:14px}
.sec__hd h2{font-size:20px;padding-bottom:10px;border-bottom:2px solid var(--pink);
  margin-bottom:-1px}
.sec__more{font-size:15px;flex:0 0 auto;padding-bottom:10px}
.sec>.tx:first-of-type{margin-top:12px}

/* ---------- 条目卡片 ---------- */

.ecards{display:grid;grid-template-columns:1fr;gap:12px;margin-top:4px}
.ecard__a{display:block;height:100%;background:var(--card);border:1px solid var(--line);
  border-radius:var(--radius);padding:14px;box-shadow:var(--shadow)}
.ecard__a:hover{text-decoration:none;border-color:var(--pink-200);box-shadow:var(--shadow-2);
  transform:translateY(-1px)}
.ecard__t{font-size:17px;margin-top:8px}
.ecard__a:hover .ecard__t{color:var(--pink-700)}
.ecard__d{margin-top:8px;font-size:16px;color:var(--text)}
.ecard__go{display:inline-block;margin-top:10px;font-size:14px;color:var(--pink-700)}

.cards{display:grid;grid-template-columns:1fr;gap:12px}
.card{display:block;background:var(--card);border:1px solid var(--line);
  border-radius:var(--radius);padding:14px}
.card__t{font-size:17px;margin-top:8px}
.card__d{margin-top:8px;font-size:16px;color:var(--text)}
.card__go{display:inline-block;margin-top:10px;font-size:14px;color:var(--pink-700)}
a.card:hover{text-decoration:none;border-color:var(--pink-200);box-shadow:var(--shadow-2);
  transform:translateY(-1px)}
a.card:hover .card__t{color:var(--pink-700)}

.tag{display:inline-block;font-size:13px;line-height:2;padding:0 8px;color:var(--pink-700);
  background:var(--pink-50);border:1px solid var(--pink-200);border-radius:var(--radius)}

/* ---------- 事实列表 / 清单 / 步骤 ---------- */

.facts{margin:0}
.fx{display:block;padding:12px 14px;background:var(--card);border:1px solid var(--line);
  border-radius:var(--radius);margin-bottom:8px}
.fx__t{font-weight:600;color:var(--title);font-size:16px}
.fx__d{margin:6px 0 0;font-size:16px}

.lst>li,.steps>li,.note__l>li{position:relative;padding-left:18px;margin-top:10px;font-size:16px}
.lst>li::before{content:"";position:absolute;left:2px;top:.72em;width:6px;height:6px;
  border-radius:50%;background:var(--pink-400)}
.steps{counter-reset:s}
.steps>li{counter-increment:s;padding-left:30px}
.steps>li::before{content:counter(s);position:absolute;left:0;top:.1em;width:22px;height:22px;
  display:flex;align-items:center;justify-content:center;font-size:13px;color:#fff;
  background:var(--pink-600);border-radius:50%;line-height:1}

/* ---------- 表格（参考站列表页的对比表格风格） ---------- */

.tw{overflow-x:auto;background:var(--card);border:1px solid var(--line);
  border-radius:var(--radius);box-shadow:var(--shadow)}
.tb{min-width:520px;font-size:16px}
.tb th,.tb td{padding:11px 14px;text-align:left;vertical-align:top;
  border-bottom:1px solid var(--line-2);overflow-wrap:anywhere}
.tb thead th{background:var(--wash-2);color:var(--title);font-weight:600;font-size:15px;
  border-bottom:1px solid var(--line)}
.tb tbody th{color:var(--title);font-weight:600;background:var(--card)}
.tb tr:last-child th,.tb tr:last-child td{border-bottom:0}

/* ---------- 提示块 ---------- */

.note{padding:14px;border-radius:var(--radius);border:1px solid var(--line-2);
  background:var(--card)}
.note--ok{background:var(--wash-ok);border-color:#D9F7BE}
.note--warn{background:var(--wash-warn);border-color:#FFE58F}
.note--danger{background:var(--wash-danger);border-color:#FFCCC7}
.note__l>li::before{content:"";position:absolute;left:2px;top:.72em;width:6px;height:6px;
  border-radius:50%;background:var(--meta)}
.note--ok .note__l>li::before{background:var(--ok)}
.note--warn .note__l>li::before{background:var(--warn)}
.note--danger .note__l>li::before{background:var(--danger)}

/* ---------- FAQ（原生 details） ---------- */

.faq{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow);padding:0 14px}
.qa{border-bottom:1px solid var(--line-2)}
.qa:last-child{border-bottom:0}
.qa__q{display:flex;align-items:flex-start;min-height:48px;padding:12px 0;font-size:16px;
  font-weight:600;color:var(--title);list-style:none}
.qa__q::-webkit-details-marker{display:none}
.qa__q::before{content:"＋";flex:0 0 auto;width:22px;color:var(--pink-700);font-weight:400}
.qa[open] .qa__q::before{content:"－"}
.qa__a{padding:0 0 14px 22px}

/* ---------- 相关链接 ---------- */

.rel{display:grid;grid-template-columns:1fr;gap:10px}
.rel__a{display:block;background:var(--card);border:1px solid var(--line);
  border-radius:var(--radius);padding:12px 14px}
.rel__a:hover{text-decoration:none;border-color:var(--pink-200)}
.rel__t{display:block;font-size:16px;font-weight:600;color:var(--pink-700)}
.rel__d{display:block;margin-top:4px;font-size:15px;color:var(--text)}

/* ---------- 目录型的链接组 ---------- */

.dir{display:grid;grid-template-columns:1fr;gap:14px}
.dir__g{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  padding:12px 14px;box-shadow:var(--shadow)}
.dir__h{font-size:16px;padding-bottom:8px;border-bottom:1px solid var(--line-2)}
.dir__l{margin-top:8px;columns:1}
.dir__l li{margin-top:4px}
.dir__l a{display:inline-flex;align-items:center;min-height:36px;font-size:15px;color:var(--text)}
.dir__l a:hover{color:var(--pink-700)}

/* ---------- 内容页两栏 ---------- */

.ct2{margin-top:6px}
.side{margin-top:26px}
.sbox{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow);padding:14px;margin-bottom:12px}
.sbox--tip{background:var(--pink-50);border-color:var(--pink-200)}
.sbox__h{font-size:16px}
.sbox__l{margin-top:8px}
.sbox__l li{margin-top:8px;font-size:15px}
.sbox--tip .sbox__l li{color:var(--text)}

/* ---------- 页脚 ---------- */

.ft{margin-top:34px;background:var(--card);border-top:1px solid var(--line)}
.ft__grid{display:grid;grid-template-columns:1fr;gap:18px;padding:24px 0 6px}
.ft__h{font-size:15px;color:var(--title)}
.ft__l{margin-top:8px}
.ft__l li{margin-top:6px}
.ft__l a{font-size:15px;color:var(--text)}
.ft__l a:hover{color:var(--pink-700)}
.ft__base{border-top:1px solid var(--line-2);padding:16px 0 24px;margin-top:16px}
.ft__brand{font-size:18px;font-weight:700;color:var(--pink-700)}
.ft__line{margin-top:8px;font-size:15px;color:var(--meta);max-width:70ch}
.ft__meta{margin-top:8px;font-size:14px;color:var(--meta)}
.ft__meta a{color:var(--meta)}
.ft__meta a:hover{color:var(--pink-700)}

/* ---------- 站内检索结果 ---------- */

.sres{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow);padding:14px;margin-top:16px}
.sres__h{font-size:16px}
.sres__l{margin-top:10px}
.sres__l li{margin-top:10px;padding-top:10px;border-top:1px solid var(--line-2)}
.sres__l li:first-child{border-top:0;padding-top:0}
.sres__t{font-size:16px;font-weight:600;color:var(--pink-700);display:block}
.sres__m{font-size:14px;color:var(--meta);display:block;margin-top:2px}
.sres__d{font-size:15px;color:var(--text);display:block;margin-top:4px}
.sres__none{margin-top:8px;font-size:16px}

/* ---------- 返回顶部 ---------- */

.to-top{position:fixed;right:14px;bottom:calc(var(--cta-h) + env(safe-area-inset-bottom) + 22px);
  z-index:60;width:46px;height:46px;display:none;align-items:center;justify-content:center;
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius-md);
  box-shadow:var(--shadow-2);color:var(--pink-700);font-size:14px}
.to-top[data-show="1"]{display:flex}
.to-top:hover{text-decoration:none;border-color:var(--pink-200)}

/* ==========================================================================
   固定底部寻芳 CTA
   常驻动效：latch-slide-plus-slot-deepen
   徽标里的卡扣每 2.6s 沿槽滑出 3px 再回位，同一拍徽标底色的深粉叠层淡入
   两条通道：transform（≤3px）+ 色调（叠层 opacity ≤ .3）
   ========================================================================== */

.site-cta{
  position:fixed;left:50%;bottom:calc(12px + env(safe-area-inset-bottom));
  transform:translateX(-50%);
  z-index:70;display:inline-flex;align-items:center;justify-content:center;gap:12px;
  width:calc(100% - 24px);min-width:0;min-height:52px;padding:0 14px;
  background:linear-gradient(180deg,var(--cta-bg-1),var(--cta-bg-2));
  color:#fff;font-size:16px;font-weight:600;line-height:1.25;
  border-radius:var(--radius-md);border:1px solid var(--cta-bg-2);
  box-shadow:0 6px 18px -6px rgb(168 30 99 / .5);
}
.site-cta:hover,.site-cta:focus-visible{color:#fff;text-decoration:none;
  box-shadow:0 8px 22px -6px rgb(168 30 99 / .62)}
.site-cta__tx{display:block;white-space:nowrap}

.site-cta__latch{
  position:relative;flex:0 0 auto;width:26px;height:26px;border-radius:6px;
  background:var(--cta-chip);overflow:hidden;
}
.site-cta__latch i{
  position:absolute;left:5px;right:5px;top:50%;height:3px;margin-top:-1.5px;
  border-radius:2px;background:#fff;
  animation:cta-latch 2.6s cubic-bezier(.22,.72,.28,1) infinite;
}
.site-cta__latch::after{
  content:"";position:absolute;inset:0;background:var(--cta-chip-deep);opacity:0;
  animation:cta-slot 2.6s cubic-bezier(.22,.72,.28,1) infinite;
}

@keyframes cta-latch{
  0%,18%{transform:translateX(0)}
  38%,52%{transform:translateX(3px)}
  72%,100%{transform:translateX(0)}
}
@keyframes cta-slot{
  0%,18%{opacity:0}
  38%,52%{opacity:.3}
  72%,100%{opacity:0}
}

/* ---------- 平板 ---------- */

@media (min-width:576px){
  .ecards{grid-template-columns:1fr 1fr}
  .cards{grid-template-columns:1fr 1fr}
  .rel{grid-template-columns:1fr 1fr}
  .ft__grid{grid-template-columns:1fr 1fr}
}

/* ---------- PC（原设计的主断点 864px） ---------- */

@media (min-width:864px){
  .wrap{padding:0 16px}
  .dir{grid-template-columns:1fr 1fr}
  .dir__l{columns:2;column-gap:20px}
  .hd__in{min-height:var(--hd-h);justify-content:flex-start;gap:20px}
  .nv{display:block;margin-left:16px}
  .hd__right{margin-left:auto}
  .hd__entry{display:inline-flex;align-items:center;height:40px;padding:0 16px;
    border:1px solid var(--line);border-radius:var(--radius);font-size:15px;color:var(--text)}
  .hd__entry:hover{border-color:var(--pink-200);color:var(--pink-700);text-decoration:none}
  .mnav{display:none}
  .h1{font-size:28px;margin-top:22px}
  .h1--home{font-size:30px}
  .ecards{grid-template-columns:1fr 1fr 1fr}
  .cards{grid-template-columns:1fr 1fr 1fr}
  .ct2{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:26px;align-items:start}
  .side{margin-top:26px}
  .ft__grid{grid-template-columns:repeat(4,1fr)}
  .ft__base{text-align:left}
  .site-cta{width:auto;min-width:420px;max-width:560px;min-height:58px;
    font-size:18px;padding:0 26px;bottom:20px}
}

@media (min-width:1200px){
  .to-top{right:calc((100vw - var(--container)) / 2 - 6px)}
}

/* ---------- 减少动态 ---------- */

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;
    transition-duration:.001ms !important;scroll-behavior:auto !important}
  .ecard__a:hover,a.card:hover{transform:none}
  /* 静止状态独立成立：卡扣停在槽内起始位，深粉叠层保留一档暖色 */
  .site-cta__latch i{transform:translateX(0)}
  .site-cta__latch::after{opacity:.18}
}