/* ══════════════════════════════════════════════════════════════════════
   子页共用样式（2026-10-16）
   ──────────────────────────────────────────────────────────────────────
   为什么抽出来：/china-visa-free/ 与 /koi/ 是两个**独立编写**的页面，
   不是从 index.html 生成的。第一版把样式内嵌在每一页里 ——
   那样加第三页就要再复制一遍，改一处颜色要改三处，必然漂。
   现在统一放这里，子页只写自己特有的那几条。

   引用方式：`<link rel="stylesheet" href="../assets/page.css">`
     · 线上：/china-visa-free/ + ../assets/ → /assets/page.css  ✓
     · 本地 file:// 打开也能用（这是选相对路径而不是 /assets/ 的原因）

   🔑 品牌基线必须与官网一致（见 品牌手册/03-调性与视觉）：
      宣纸白 #F5F0E8 / 凝脂玉 #FBF8F1 / 墨 #1C1C1E / 墨·浅 rgba(28,28,30,.62)
      玉青 #6FA29B（副文案）/ 雅金 #C8A96E（只做装饰，面积 ≤5%）
      字体全站苹方；文字一律不用金色。
   ══════════════════════════════════════════════════════════════════════ */

:root{
  --paper:#F5F0E8; --card:#FBF8F1; --ink:#1C1C1E;
  --grey:rgba(28,28,30,.62);          /* 淡墨：小字、说明、补充 */
  --jade:#6FA29B;                     /* 玉青：副文案 / 强调 */
  --gold:#C8A96E;                     /* 雅金：**只做装饰**，不用于文字 */
  --line:rgba(28,28,30,.10);
  --gut:min(6vw,72px);
  --sans:"PingFang SC","Hiragino Sans GB","Microsoft YaHei",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--sans);font-size:16.5px;line-height:1.85;
  -webkit-font-smoothing:antialiased;
  /* 英文子页：**不要**用 keep-all（中文站那套规则）。
     英文靠词间断行，keep-all 会把整句挤成一坨。 */
  word-break:normal;overflow-wrap:break-word;
}
a{color:inherit;}
.wrap{max-width:880px;margin:0 auto;padding:0 var(--gut);}

/* ── 顶栏：只留一个回首页的入口。子页不需要完整导航 ── */
.topbar{
  position:sticky;top:0;z-index:10;
  background:rgba(245,240,232,.88);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  border-bottom:0.5px solid var(--line);
}
.topbar .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;height:64px;}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;font-size:14.5px;color:var(--ink);}
.brand .seal{
  width:26px;height:26px;display:grid;place-items:center;
  border:1px solid var(--gold);border-radius:6px;      /* 与站内五签、签筒同一套"字牌"做法 */
  /* 🔴 2026-10-16 与首页 `.seal` 同步：字体族换成楷体（用户：「LOGO 字体换成楷体，只换字体」）。
     原来这里不写 font-family、继承 body 的苹方；现在显式给楷体，和首页导航里那个「签」一致。 */
  font-family:var(--sans);
  color:var(--ink);font-size:18px;font-weight:600;line-height:1;
}
.back{font-size:14.5px;color:var(--grey);text-decoration:none;}
.back:hover{color:var(--jade);}

/* ── 首屏 ── */
header{padding:64px 0 0;}
.kicker{margin:0 0 18px;font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);}
h1{margin:0 0 26px;font-size:clamp(25px,3.4vw,38px);font-weight:600;line-height:1.34;letter-spacing:.01em;max-width:22em;}

/* 答案前置 —— GEO 的核心：**首段必须能单独被摘走**。
   视觉上做成左侧一道玉青竖线，不抢眼但能看出"这段是结论"。 */
.answer{
  margin:0 0 12px;padding:22px 24px;background:var(--card);
  border-left:3px solid var(--jade);border-radius:0 10px 10px 0;
  font-size:16.5px;line-height:1.8;
}
.answer strong{font-weight:600;}
.answer .asof{display:block;margin-top:10px;font-size:13px;color:var(--grey);letter-spacing:.01em;}

/* ── 数字卡 ── */
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:30px 0 0;}
.stat{padding:20px 20px 22px;background:var(--card);border:1px solid var(--line);border-radius:12px;}
.stat .n{font-size:clamp(22px,2.6vw,29px);font-weight:600;line-height:1.1;letter-spacing:.01em;}
.stat .l{margin-top:8px;font-size:13px;color:var(--grey);line-height:1.6;}

/* ── 正文 ── */
section{padding:56px 0 0;}
h2{margin:0 0 20px;font-size:clamp(19px,2.3vw,25px);font-weight:600;line-height:1.42;letter-spacing:.01em;max-width:26em;}
h3{margin:30px 0 10px;font-size:16.5px;font-weight:600;letter-spacing:.01em;}
p{margin:0 0 18px;color:var(--grey);}
p.lead{color:var(--ink);}
ul,ol{margin:0 0 18px;padding-left:1.25em;color:var(--grey);}
li{margin:0 0 8px;}

/* 引文（长文章用） */
blockquote{
  margin:26px 0;padding:16px 22px;background:var(--card);
  border-left:3px solid var(--gold);border-radius:0 10px 10px 0;
  font-size:15.5px;line-height:1.8;color:var(--ink);
}
blockquote cite{display:block;margin-top:8px;font-size:13px;color:var(--grey);font-style:normal;}

/* 文章元信息（日期 / 阅读时长） */
.meta{margin:0 0 30px;font-size:13px;color:var(--grey);letter-spacing:.01em;}

/* ── 双栏卡片（名单、对照）── */
.lists{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:26px;margin:0 0 8px;}
.card{padding:22px 22px 20px;background:var(--card);border:1px solid var(--line);border-radius:12px;}
.card h3{margin:0 0 4px;font-size:17px;}
.card .tag{display:inline-block;margin:0 0 12px;padding:2px 9px;border-radius:999px;
  font-size:11.5px;letter-spacing:.06em;color:var(--jade);border:1px solid var(--jade);}
.names{margin:0;font-size:14.5px;line-height:1.95;color:var(--grey);}
.names b{color:var(--ink);font-weight:500;}

/* ── 编号步骤 ── */
.steps{counter-reset:s;list-style:none;padding:0;margin:0 0 8px;}
.steps li{counter-increment:s;position:relative;padding:0 0 20px 40px;margin:0 0 0 11px;border-left:1px solid var(--line);}
.steps li:last-child{border-left-color:transparent;padding-bottom:0;}
.steps li::before{
  content:counter(s);position:absolute;left:-11px;top:0;
  width:22px;height:22px;border-radius:999px;background:var(--paper);
  border:1px solid var(--gold);color:var(--gold);
  font-size:11.5px;display:grid;place-items:center;line-height:1;
}

/* ── 问答（原生 details，AI 与爬虫都能读到正文，不依赖 JS）── */
details{border-top:1px solid var(--line);padding:18px 0;}
details:last-of-type{border-bottom:1px solid var(--line);}
summary{cursor:pointer;list-style:none;position:relative;padding-right:34px;
  font-size:16.5px;font-weight:500;color:var(--ink);line-height:1.7;}
summary::-webkit-details-marker{display:none;}
summary::after{content:"+";position:absolute;right:6px;top:0;color:var(--gold);font-weight:400;font-size:19px;line-height:1.5;}
details[open] summary::after{content:"–";}
details > *:not(summary){margin-top:12px;}
details p{font-size:15px;}

/* ── 表格（费用 / 限额这类**逐项对照**的信息）──
   ⚠️ 只在对账式信息上用；散文不要用表格。
   右列右对齐 + nowrap：金额和时限不该被折行。
   2026-10-16 加：微信支付页的费用与限额，写成散文时机器抽不到成对的值。 */
table{width:100%;border-collapse:collapse;margin:0 0 22px;font-size:15px;}
th,td{padding:12px 14px;text-align:left;border-bottom:1px solid var(--line);vertical-align:top;}
thead th{
  border-bottom:1px solid rgba(28,28,30,.22);
  font-size:12.5px;font-weight:500;color:var(--ink);letter-spacing:.05em;text-transform:uppercase;
}
th:last-child,td:last-child{text-align:right;white-space:nowrap;}
td{color:var(--grey);}
tbody tr:last-child td{border-bottom:0;}

/* ── 来源 / 免责 ── */
.sources{margin:0 0 8px;padding:22px 24px;background:var(--card);
  border:1px solid var(--line);border-radius:12px;font-size:14px;color:var(--grey);}
.sources h3{margin:0 0 10px;font-size:14.5px;color:var(--ink);}
.sources ol{margin:0;padding-left:1.2em;font-size:14px;}
.sources li{margin:0 0 6px;}
/* 出处链接：玉青 + 细下划线。
   玉青是品牌规范里的「副文案/强调」色，用在出处上既合规（文字一律不用金色）
   又让人一眼看出可点。**出处必须是真链接** —— 只写文字，对机器等于形容词。 */
.sources a,.disclaim a{color:var(--jade);text-decoration:none;border-bottom:1px solid rgba(111,162,155,.38);}
.sources a:hover,.disclaim a:hover{border-bottom-color:var(--jade);}
.disclaim{font-size:13.5px;line-height:1.8;color:var(--grey);}

/* ── 收尾 CTA ── */
.cta{margin:48px 0 0;padding:34px 0 0;border-top:1px solid var(--line);}
.cta p{color:var(--ink);}
/* 2026-10-16：子页之间的**语境内链**。
   起因：审计里「站内链接全是同页锚点」，三个独立子页彼此不互链，
   站内结构是扁平的星形。签证 → 怎么付钱是入境客的连续两个问题，互链一下。
   ⚠️ 必须写 `.cta .xlink`(0,2,0) —— 上面 `.cta p` 是 (0,1,1)，
      单类 (0,1,0) 会被它压死（老坑，见 品牌手册/02 的 CSS 特异性一节）。 */
.cta .xlink{margin-top:6px;font-size:14.5px;color:var(--grey);}
.cta .xlink a{color:var(--jade);text-decoration:none;border-bottom:1px solid rgba(111,162,155,.38);}
.btn{
  display:inline-block;margin-top:6px;padding:12px 26px;border-radius:999px;
  border:1px solid rgba(138,191,184,.45);text-decoration:none;font-size:15px;
  color:var(--ink);background:var(--card);
  transition:box-shadow .3s ease,border-color .3s ease;
}
.btn:hover{box-shadow:0 0 0 2px rgba(200,169,110,.34),0 8px 22px rgba(200,169,110,.20);}

footer{padding:56px 0 72px;font-size:13px;color:var(--grey);}

@media (max-width:760px){
  :root{--gut:20px;}
  body{font-size:16px;}
  header{padding-top:44px;}
  .stats{grid-template-columns:1fr;gap:12px;}
  .lists{grid-template-columns:1fr;gap:18px;}
  section{padding-top:44px;}
  table{font-size:14px;}
  th,td{padding:10px 8px;}
}