@charset "utf-8";
/* ==========================================================================
   囧次元 · jcydmgw.com  —  视觉方向 B3「日系和风」
   素和白 / 浅灰底  +  藍鉄藏青  +  朱红点缀  +  若竹（点缀，面积 < 2%）
   渲染语言：目次点线与版心二罫（第 33 种）
   ========================================================================== */

:root{
  --bg:#F6F5F0;          /* 素和白 */
  --bg2:#EDECE5;         /* 次层   */
  --card:#FFFFFF;        /* 卡面   */
  --line:#DCDAD0;        /* 分隔线 */
  --deep:#1B2B3F;        /* 深段 · 藍鉄夜 */
  --ink:#1F3552;         /* 主 · 藍鉄藏青 */
  --ink-d:#142338;
  --ink-l:#E7EBF1;
  --verm:#C4342A;        /* 辅 · 朱红 */
  --verm-d:#8E2018;
  --verm-l:#FAE8E4;
  --waka:#6E9E86;        /* 点缀 · 若竹，面积 < 2% */
  --waka-l:#E3EFE9;
  --tx:#26303C;
  --tx2:#5C6675;
  --tx3:#8A93A0;
  --shadow:0 14px 34px rgba(20,35,56,.10);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--bg);
  color:var(--tx);
  font:16px/1.85 "Microsoft YaHei","PingFang SC","Hiragino Sans GB","Source Han Sans SC",sans-serif;
  letter-spacing:.01em;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--ink);text-decoration:none}
a:hover{color:var(--verm)}
h1,h2,h3,h4{margin:0;font-weight:700;line-height:1.35;color:var(--ink-d)}
p{margin:0 0 1em}
ul,ol{margin:0 0 1em;padding-left:1.25em}
li{margin:.35em 0}
strong{color:var(--ink-d)}
em{font-style:normal;color:var(--verm-d);font-weight:700}

.wrap{max-width:1120px;margin:0 auto;padding:0 24px}

/* ── 顶栏 ─────────────────────────────────────────────────────────────── */
.top{
  position:sticky;top:0;z-index:20;
  background:rgba(246,245,240,.95);
  border-bottom:1px solid var(--line);
}
.top__in{
  max-width:1120px;margin:0 auto;padding:14px 24px;
  display:flex;align-items:center;gap:18px;
}
.brand{display:flex;align-items:center;gap:10px;flex:0 0 auto}
.brand img{width:40px;height:40px}
.brand b{font-size:20px;letter-spacing:.14em;color:var(--ink);font-weight:700}
.nav{display:flex;gap:20px;margin-left:auto;align-items:center}
.nav a{
  font-size:15px;color:var(--tx2);padding:5px 1px;
  border-bottom:2px solid transparent;transition:color .2s,border-color .2s;
}
.nav a:hover{color:var(--ink)}
.nav a[aria-current="page"]{color:var(--ink);border-bottom-color:var(--verm)}

.btn{
  display:inline-block;background:var(--verm);color:#FFF6F3;
  padding:11px 22px;border-radius:2px;font-size:15px;letter-spacing:.06em;
  border:1px solid var(--verm-d);
  transition:background .2s,color .2s,border-color .2s;
}
.btn:hover,.btn:focus{background:var(--verm-d);color:#FFFFFF}
.top .btn{color:#FFF6F3}
.top .btn:hover{color:#FFFFFF}
.foot .btn{color:#FFF6F3}
.foot .btn:hover{color:#FFFFFF}
.hero .btn,.cta .btn{color:#FFF6F3}
.hero .btn:hover,.cta .btn:hover{color:#FFFFFF}

/* ── Hero：左文右图（方位固定，不镜像）──────────────────────────────── */
.hero{
  position:relative;overflow:hidden;
  background:linear-gradient(160deg,#F9F8F3 0%,#F2F0E8 52%,#E9E6DA 100%);
  border-bottom:1px solid var(--line);
}
.hero::after{
  content:"";position:absolute;right:0;top:0;bottom:0;width:34%;
  background:linear-gradient(180deg,rgba(196,52,42,.07),rgba(31,53,82,.06));
  pointer-events:none;
}
.hero__in{
  position:relative;z-index:1;
  max-width:1120px;margin:0 auto;padding:54px 24px 58px;
  display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:52px;align-items:center;
}
.kicker{
  display:inline-block;margin:0 0 16px;
  font-size:12.5px;letter-spacing:.34em;color:var(--verm-d);
  border-left:3px solid var(--verm);padding:2px 0 2px 10px;
}
.hero h1{font-size:42px;letter-spacing:.04em;margin:0 0 16px}
.hero__lead{font-size:16.5px;color:var(--tx2);margin:0 0 24px;max-width:34em}
.hero__cta{margin:0 0 12px}
.hero__note{font-size:13.5px;color:var(--tx3);margin:0}
.hero__shot{margin:0;width:100%;max-width:320px;justify-self:center}
.hero__shot img{
  width:100%;height:auto;
  box-shadow:0 0 0 1px var(--line),var(--shadow);
}

/* ── 目录（目次）────────────────────────────────────────────────────── */
.toc{background:var(--bg2);border-bottom:1px solid var(--line);padding:26px 0 30px}
.toc__t{
  font-size:13px;letter-spacing:.3em;color:var(--verm-d);
  margin:0 0 14px;font-weight:700;
}
.toc ol{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 42px}
.toc li{margin:0;border-bottom:1px dashed rgba(31,53,82,.22)}
.toc a{display:flex;align-items:baseline;gap:12px;padding:9px 0;font-size:15px;color:var(--tx)}
.toc a i{
  flex:1 1 auto;min-width:20px;height:1px;
  background-image:repeating-linear-gradient(90deg,rgba(31,53,82,.42) 0 3px,transparent 3px 7px);
  -webkit-mask-image:linear-gradient(90deg,#000,transparent);
  mask-image:linear-gradient(90deg,#000,transparent);
}
.toc a b{font-weight:400;color:var(--verm);font-size:12.5px;letter-spacing:.16em}
.toc a:hover{color:var(--verm)}
.toc a[data-on]{color:var(--verm)}
.toc a[data-on] b{color:var(--ink)}
.toc a[data-on] i{background-image:repeating-linear-gradient(90deg,rgba(196,52,42,.55) 0 3px,transparent 3px 7px)}

/* ── 区块：版心二罫（1px 藏青细罫 + 3px 朱红短罫）────────────────────── */
.sec{position:relative;padding:58px 0 64px;max-width:1120px;margin:0 auto;padding-left:24px;padding-right:24px}
.sec::before{content:"";position:absolute;left:24px;right:24px;top:0;height:1px;background:var(--line)}
.sec::after{content:"";position:absolute;left:24px;top:5px;width:118px;height:3px;background:var(--verm)}

/* 目次式 H2 */
.mok{display:flex;align-items:center;gap:14px;font-size:26px;margin:0 0 10px}
.mok span{flex:0 1 auto}
.mok i.l{
  flex:1 1 auto;min-width:28px;height:2px;
  background-image:repeating-linear-gradient(90deg,rgba(31,53,82,.40) 0 3px,transparent 3px 7px);
  -webkit-mask-image:linear-gradient(90deg,#000,transparent);
  mask-image:linear-gradient(90deg,#000,transparent);
}
.mok i.k{
  flex:0 0 auto;width:9px;height:9px;border-radius:50%;
  background:var(--waka);
}
.sub{color:var(--tx2);font-size:15.5px;margin:0 0 30px;max-width:52em}

/* ── 编注卡（编辑严选）────────────────────────────────────────────────── */
.notes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}
.note{
  background:var(--card);border:1px solid var(--line);
  padding:24px 26px 22px;
}
.note__tag{
  display:inline-block;background:var(--verm);color:#FFF6F3;
  font-size:12.5px;letter-spacing:.24em;padding:4px 11px 4px 13px;margin:0 0 12px;
}
.note h3{font-size:19px;margin:0 0 10px;position:relative;padding-left:16px}
.note h3::before{
  content:"";position:absolute;left:0;top:.5em;width:8px;height:8px;background:var(--verm);
}
.note p{font-size:15px;color:var(--tx2);margin:0 0 10px}
.note p:last-child{margin-bottom:0}
.note strong{color:var(--ink-d)}

/* ── 截图画廊 ─────────────────────────────────────────────────────────── */
.gal{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.gal figure{margin:0;background:var(--card);border:1px solid var(--line)}
.gal img{width:100%;height:auto}
.gal figcaption{
  padding:12px 14px;font-size:13.8px;line-height:1.7;color:var(--tx2);
  border-top:1px solid var(--line);
}

/* ── 深段通栏 ─────────────────────────────────────────────────────────── */
.band{background:var(--deep);color:#E6EBF2;padding:60px 0 66px}
.band__in{max-width:1120px;margin:0 auto;padding:0 24px}
.band .mok{color:#F3F6FA}
.band .mok i.l{background-image:repeating-linear-gradient(90deg,rgba(255,255,255,.34) 0 3px,transparent 3px 7px)}
.band .sub{color:#A4B2C4}
.band p{color:#C6D0DD}
.band strong{color:#FFFFFF}
.band em{color:#F0A79E}
.band .grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin-top:26px}
.band .tile{
  border:1px solid rgba(255,255,255,.17);background:rgba(255,255,255,.05);
  padding:20px 22px;
}
.band .tile h3{font-size:17.5px;color:#FFFFFF;margin:0 0 9px;padding-left:14px;position:relative}
.band .tile h3::before{
  content:"";position:absolute;left:0;top:.5em;width:7px;height:7px;background:var(--waka);
}
.band .tile p{font-size:14.6px;margin:0;color:#B9C5D4}
.band .kv{display:flex;flex-wrap:wrap;gap:12px;margin:24px 0 0;padding:0;list-style:none}
.band .kv li{
  border:1px solid rgba(255,255,255,.18);padding:8px 14px;margin:0;
  font-size:14px;color:#D6DEE9;
}

/* ── FAQ ─────────────────────────────────────────────────────────────── */
.faqgroup{margin:0 0 42px}
.faqgroup .mok{font-size:21px;margin:0 0 16px}
details{
  background:var(--card);border:1px solid var(--line);
  margin:0 0 10px;
}
details[open]{border-left:3px solid var(--verm)}
summary{
  cursor:pointer;padding:15px 18px;font-size:16px;font-weight:700;color:var(--ink-d);
  list-style:none;
}
summary::-webkit-details-marker{display:none}
summary::before{
  content:"問";display:inline-block;margin-right:10px;
  font-size:12px;color:var(--verm);letter-spacing:.06em;
}
details[open] summary::before{content:"答";color:var(--waka)}
details .ans{padding:0 20px 16px;font-size:15px;color:var(--tx2)}
details .ans p{margin:0 0 .7em}
details .ans p:last-child{margin-bottom:0}

/* FAQ 工具栏按钮 */
.faqtools{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin:0 0 26px}
.toggle{
  font:inherit;font-size:14.5px;letter-spacing:.05em;cursor:pointer;
  background:transparent;border:1px solid var(--verm);color:var(--verm-d);
  padding:8px 18px;border-radius:2px;
}
.toggle:hover{background:var(--verm);color:#FFF6F3}
.toggle[data-open="1"]{background:var(--verm);color:#FFF6F3}
.faqtools span{font-size:13.8px;color:var(--tx3)}

/* FAQ 速览小卡（首页） */
.quick{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.quick section{background:var(--card);border:1px solid var(--line);padding:22px 24px}
.quick h3{font-size:17.5px;margin:0 0 10px;padding-left:15px;position:relative}
.quick h3::before{content:"";position:absolute;left:0;top:.5em;width:8px;height:8px;background:var(--verm)}
.quick ul{list-style:none;margin:0;padding:0}
.quick li{font-size:14.8px;color:var(--tx2);padding-left:14px;position:relative;margin:.5em 0}
.quick li::before{content:"";position:absolute;left:0;top:.72em;width:6px;height:1px;background:var(--waka)}

/* ── 入口卡 ──────────────────────────────────────────────────────────── */
.aside{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}
.aside__box{background:var(--card);border:1px solid var(--line);padding:26px 28px 26px}
.aside__box h3{font-size:20px;margin:0 0 10px}
.aside__box p{font-size:15px;color:var(--tx2);margin:0 0 14px}
.aside__box a.btn{color:#FFF6F3}
.aside__box a.btn:hover{color:#FFFFFF}
.aside__box .more{font-size:14.5px;color:var(--verm-d);border-bottom:1px solid rgba(196,52,42,.35)}

/* ── 评价 ────────────────────────────────────────────────────────────── */
.revs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.rev{background:var(--card);border:1px solid var(--line);padding:22px 24px}
.score{display:flex;align-items:center;gap:3px;color:var(--waka);margin:0 0 10px}
.score svg{width:15px;height:15px;display:block}
.score b{margin-left:7px;font-size:13.5px;color:var(--tx2);font-weight:400}
.rev p{font-size:15px;color:var(--tx2);margin:0 0 12px}
.rev cite{font-style:normal;font-size:13.5px;color:var(--tx3);letter-spacing:.04em}

/* ── 步骤 / 列表构件 ─────────────────────────────────────────────────── */
.steps{list-style:none;margin:0 0 8px;padding:0;counter-reset:s}
.steps li{
  counter-increment:s;position:relative;padding:0 0 14px 44px;
  border-bottom:1px dashed var(--line);margin:0 0 14px;
}
.steps li:last-child{border-bottom:0;margin-bottom:0;padding-bottom:0}
.steps li::before{
  content:counter(s);position:absolute;left:0;top:2px;
  width:26px;height:26px;line-height:26px;text-align:center;
  background:var(--ink);color:#fff;font-size:13px;
}
.steps b{display:block;color:var(--ink-d);margin-bottom:2px}
.steps span{font-size:14.8px;color:var(--tx2)}

.plain{list-style:none;padding:0;margin:0 0 1em}
.plain li{padding-left:16px;position:relative;font-size:15.2px;color:var(--tx2)}
.plain li::before{content:"";position:absolute;left:0;top:.72em;width:7px;height:7px;background:var(--verm-l);border:1px solid var(--verm)}

/* 数据说明块（窄栏） */
.note-inline{
  border-left:3px solid var(--waka);background:var(--waka-l);
  padding:14px 18px;font-size:14.8px;color:#3C5B4E;margin:0 0 24px;
}

/* ── CTA 通栏 ────────────────────────────────────────────────────────── */
.cta{background:linear-gradient(135deg,#22374F 0%,#152438 100%);padding:56px 0 60px}
.cta__in{max-width:1120px;margin:0 auto;padding:0 24px;display:flex;flex-wrap:wrap;gap:22px;align-items:center}
.cta h2{font-size:27px;color:#F3F6FA;margin:0;flex:1 1 380px}
.cta__b{flex:0 0 auto}
.cta__note{flex:1 1 100%;font-size:13.8px;color:#9FAEC0;margin:0}

/* ── 内页页头 ────────────────────────────────────────────────────────── */
.phead{
  background:linear-gradient(160deg,#F8F7F2,#EDEAE0);
  border-bottom:1px solid var(--line);padding:46px 0 48px;
}
.phead__in{max-width:1120px;margin:0 auto;padding:0 24px;display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:48px;align-items:center}
.phead h1{font-size:33px;margin:0 0 14px}
.phead__lead{font-size:16px;color:var(--tx2);margin:0;max-width:32em}
.phead__shot{margin:0;width:100%;max-width:310px;justify-self:center}
.phead__shot img{width:100%;height:auto;box-shadow:0 0 0 1px var(--line),var(--shadow)}
.phead__figs{margin-top:26px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.phead__figs figure{margin:0;background:var(--card);border:1px solid var(--line)}
.phead__figs img{width:100%;height:auto}
.phead__figs figcaption{padding:11px 14px;font-size:13.6px;color:var(--tx2);border-top:1px solid var(--line)}

/* ── 页脚 ────────────────────────────────────────────────────────────── */
.foot{background:var(--deep);color:#B7C3D2;padding:46px 0 40px;margin-top:0}
.foot__in{max-width:1120px;margin:0 auto;padding:0 24px}
.foot__top{display:flex;flex-wrap:wrap;gap:20px;align-items:center;margin:0 0 20px}
.foot__brand{display:flex;align-items:center;gap:10px;flex:1 1 auto}
.foot__brand img{width:36px;height:36px}
.foot__brand b{color:#EFF3F8;font-size:17px;letter-spacing:.14em}
.foot__nav{display:flex;flex-wrap:wrap;gap:18px}
.foot__nav a{font-size:14.5px;color:#A9B7C8}
.foot__nav a:hover{color:#FFFFFF}
.foot__note{
  font-size:13.6px;line-height:1.8;color:#9EACBE;
  border-top:1px solid rgba(255,255,255,.13);padding-top:16px;margin:0 0 10px;
}
.foot__copy{font-size:13.4px;color:#8796A9;margin:0}

/* ── 入场动效：只做位移、不改透明度（第 33 种 · foldIn）────────────── */
@keyframes foldIn{from{transform:translateX(-10px)}to{transform:none}}
.fx{animation:foldIn .5s cubic-bezier(.2,.7,.3,1) both}
.fx.d1{animation-delay:.07s}
.fx.d2{animation-delay:.14s}
.fx.d3{animation-delay:.21s}
@media (prefers-reduced-motion:reduce){
  .fx{animation:none;transform:none}
}

/* ── 断点 ≤980 ──────────────────────────────────────────────────────── */
@media (max-width:980px){
  .top__in{flex-wrap:wrap;padding:10px 24px;gap:10px 14px}
  .top__cta{order:2}
  .nav{order:3;flex:1 1 100%;margin-left:0;flex-wrap:wrap;gap:8px 18px}
  .nav a{font-size:14.5px}

  .hero__in{grid-template-columns:minmax(0,1fr);gap:30px;padding:40px 24px 44px}
  .hero::after{width:100%;top:auto;height:190px}
  .hero h1{font-size:34px}
  .hero__shot{max-width:296px;margin:0 auto}

  .phead__in{grid-template-columns:minmax(0,1fr);gap:28px}
  .phead__shot{max-width:290px;margin:0 auto}
  .phead h1{font-size:28px}

  .notes,.aside,.phead__figs{grid-template-columns:minmax(0,1fr)}
  .gal{grid-template-columns:repeat(2,minmax(0,1fr))}
  .quick,.revs,.band .grid3{grid-template-columns:minmax(0,1fr)}
  .toc ol{grid-template-columns:minmax(0,1fr)}
  .mok{font-size:23px}
  .cta h2{font-size:23px}
}

/* ── 断点 ≤620 ──────────────────────────────────────────────────────── */
@media (max-width:620px){
  body{font-size:15.5px}
  .wrap,.sec,.band__in,.cta__in,.foot__in,.top__in,.hero__in,.phead__in{padding-left:18px;padding-right:18px}
  .sec{padding-top:44px;padding-bottom:48px}
  .sec::before{left:18px;right:18px}
  .sec::after{left:18px;width:92px}
  .brand b{font-size:18px}
  .brand img{width:34px;height:34px}
  .btn{padding:10px 18px;font-size:14.5px}
  .hero h1{font-size:28px}
  .hero__lead{font-size:15.5px}
  .hero__shot{max-width:268px}
  .phead__shot{max-width:250px}
  .phead h1{font-size:23px}
  .mok{font-size:20px;gap:10px}
  .mok i.k{width:7px;height:7px}
  .gal{grid-template-columns:minmax(0,1fr)}
  .note{padding:20px 18px 18px}
  .note h3{font-size:17.5px}
  .faqgroup > h3{font-size:18px}
  summary{font-size:15.2px;padding:13px 15px}
  details .ans{padding:0 16px 14px}
  .cta h2{font-size:20.5px}
  .toc a{font-size:14.4px}
}