/* ============================================================
   /blog 内容页样式（2026-10-04）
   ------------------------------------------------------------
   与落地页共用同一套设计令牌（--accent / --bg / --ink ...），
   但阅读版式独立设计：

     落地页         文章页
     -----------    -----------
     1080px   →      720px     中文最佳 35-40 字/行
     15px     →      17px      长文阅读不费眼
     1.6      →      1.85      行距拉开
     —        →      1.4em     段间距

   ⚠️⚠️ 引用路径必须用**绝对路径**
     文章页地址是 /blog/xxx，页面里若写 `blog.css`（相对路径），
     浏览器会解析成 /blog/blog.css → 404，整页掉样式。
     所以页面里统一写 /blog.css 与 /site-foot.css。
     落地页在根目录，它用相对路径没问题，别照抄过去。

   ⚠️ 本文件由 Flask 的 static 目录提供，请求 /blog.css 命中 static/blog.css。
     注意不要用 /blog/blog.css —— 那个路径会被 server.py 的
     `@app.route("/blog/<path:slug>")` 抢走，当成文章 slug 处理。
   ============================================================ */

:root{
  --bg:#F7F7F5; --card:#FFFFFF; --line:#E8E8E4; --line-soft:#F0F0EC;
  --ink:#1A1A1A; --ink-2:#4A4A45; --ink-3:#8A8A85; --ink-4:#A8A8A3;
  --accent:#E8547C; --accent-deep:#C4607F; --accent-bg:#FDF0F4; --accent-line:#F0D3DC;
  --green:#2FA36B; --green-bg:#EDF7F1;
  --r-sm:7px; --r-md:10px; --r-lg:14px; --r-xl:16px;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--bg);color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  -webkit-font-smoothing:antialiased;line-height:1.6;
  /* 防移动端横向溢出。用 clip 而不是 hidden ——
     hidden 会让 body 变成滚动容器，顶栏的 position:sticky 会失效。 */
  overflow-x:clip;
}
.wrap{max-width:1080px;margin:0 auto;padding:0 24px}
.wrap-narrow{max-width:720px;margin:0 auto;padding:0 24px}
img,table,pre{max-width:100%}

/* ---------- 顶栏（与落地页同款） ---------- */
.nav{
  position:sticky;top:0;z-index:20;background:rgba(247,247,245,.88);
  backdrop-filter:blur(10px);border-bottom:1px solid var(--line);
}
.nav-in{max-width:1080px;margin:0 auto;padding:14px 24px;
  display:flex;align-items:center;justify-content:space-between;gap:20px}
.brand{display:flex;align-items:center;gap:10px;font-weight:600;font-size:15px;
  color:var(--ink);text-decoration:none}
.brand-logo{width:28px;height:28px;border-radius:8px;background:var(--accent);
  display:grid;place-items:center;flex:0 0 28px}
.nav-links{display:flex;gap:26px;font-size:14px}
.nav-links a{color:var(--ink-2);text-decoration:none;transition:color .18s}
.nav-links a:hover{color:var(--accent)}
.nav-cta{
  background:var(--accent);color:#fff;border:none;border-radius:var(--r-md);
  padding:9px 20px;font-size:14px;font-weight:500;cursor:pointer;
  font-family:inherit;transition:background .18s;text-decoration:none;
  display:inline-block;white-space:nowrap;
}
.nav-cta:hover{background:var(--accent-deep)}

/* 通用按钮 */
.btn-primary{
  background:var(--accent);color:#fff;border:none;border-radius:var(--r-md);
  padding:12px 26px;font-size:15px;font-weight:500;cursor:pointer;
  font-family:inherit;text-decoration:none;display:inline-block;
  transition:background .18s,transform .18s;
}
.btn-primary:hover{background:var(--accent-deep);transform:translateY(-1px)}

/* ---------- 面包屑 ---------- */
.crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:7px;
  font-size:13px;color:var(--ink-4);padding:22px 0 0}
.crumbs a{color:var(--ink-3);text-decoration:none}
.crumbs a:hover{color:var(--accent)}
.crumbs i{font-style:normal;color:var(--line)}
.crumbs span{color:var(--ink-2);max-width:300px;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}

/* ============================================================
   文章页
   ============================================================ */
.post{padding:26px 0 0}
.post h1{
  font-size:clamp(24px,3.6vw,32px);font-weight:600;line-height:1.38;
  letter-spacing:-.01em;margin-bottom:16px;
}
.post-meta{display:flex;flex-wrap:wrap;align-items:center;gap:9px;
  font-size:13px;color:var(--ink-4);margin-bottom:28px}
.post-meta i{font-style:normal;color:var(--line)}
.post-meta .cat{color:var(--accent);font-weight:500}

/* ---------- 一句话答案（GEO 的核心，AI 最爱引这段） ---------- */
.answer{
  background:var(--accent-bg);border:1px solid var(--accent-line);
  border-left:3px solid var(--accent);border-radius:var(--r-md);
  padding:18px 22px;margin:0 0 36px;
  font-size:16px;line-height:1.82;color:var(--ink-2);
}
/* 标签用真实元素而不是 ::before 伪元素生成 ——
   伪元素的内容不在 DOM 里，文本提取器、复制粘贴、以及
   「CSS 没加载」这三种情况下都会丢。这几个字本身是内容，不是装饰。 */
.answer-label{
  display:block;font-size:11.5px;font-weight:600;letter-spacing:.14em;
  color:var(--accent);margin-bottom:8px;
}

/* ---------- 正文排版 ---------- */
.post-body{font-size:17px;line-height:1.85;color:var(--ink-2)}
.post-body h2{
  font-size:22px;font-weight:600;line-height:1.45;color:var(--ink);
  margin:44px 0 16px;letter-spacing:-.005em;scroll-margin-top:80px;
}
.post-body h2::before{
  content:"";display:inline-block;width:3px;height:15px;
  background:var(--accent);border-radius:2px;
  margin-right:10px;vertical-align:-2px;
}
.post-body h3{
  font-size:17.5px;font-weight:600;line-height:1.55;color:var(--ink);
  margin:30px 0 12px;scroll-margin-top:80px;
}
.post-body h4{
  font-size:16px;font-weight:600;color:var(--ink);margin:24px 0 10px;
}
.post-body p{margin:0 0 1.4em}
.post-body strong{font-weight:600;color:var(--ink)}
.post-body a{color:var(--accent);text-decoration:none;
  border-bottom:1px solid var(--accent-line);transition:border-color .18s}
.post-body a:hover{border-color:var(--accent)}
.post-body ul,.post-body ol{margin:0 0 1.4em;padding-left:1.5em}
.post-body li{margin-bottom:.55em;line-height:1.8}
.post-body li::marker{color:var(--accent)}
.post-body hr{border:none;border-top:1px solid var(--line);margin:40px 0}
.post-body blockquote{
  border-left:3px solid var(--line);padding:2px 0 2px 18px;
  margin:0 0 1.4em;color:var(--ink-3);font-size:16px;
}
.post-body code{
  background:var(--line-soft);border-radius:4px;padding:2px 6px;
  font-size:.88em;color:var(--ink);
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}
.post-body pre{
  background:#FAFAF8;border:1px solid var(--line);border-radius:var(--r-md);
  padding:16px 18px;overflow-x:auto;margin:0 0 1.4em;
}
.post-body pre code{background:none;padding:0;font-size:13.5px;line-height:1.7}

/* ---------- 表格（外层包滚动，防移动端撑破页面） ---------- */
.tbl-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:0 0 1.6em}
.post-body table{width:100%;border-collapse:collapse;font-size:14.5px;min-width:400px}
.post-body th,.post-body td{
  border:1px solid var(--line);padding:10px 13px;
  text-align:left;line-height:1.62;vertical-align:top;
}
.post-body th{background:var(--accent-bg);color:var(--ink);font-weight:600;white-space:nowrap}
.post-body tbody tr:nth-child(even){background:#FCFCFA}

/* ---------- 相关阅读 ---------- */
.related{margin:56px 0 0;padding-top:32px;border-top:1px solid var(--line)}
.related h2{font-size:16px;font-weight:600;margin-bottom:16px;color:var(--ink)}
.rel-list{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.rel-item{
  background:var(--card);border:1px solid var(--line);border-radius:var(--r-md);
  padding:16px 18px;text-decoration:none;color:inherit;display:block;
  transition:border-color .18s,transform .18s;
}
.rel-item:hover{border-color:var(--accent-line);transform:translateY(-1px)}
.rel-item h3{font-size:14.5px;font-weight:600;line-height:1.5;
  margin-bottom:7px;color:var(--ink)}
.rel-item p{font-size:13px;color:var(--ink-3);line-height:1.62}

/* ---------- 软转化（顺带一提，不硬推） ---------- */
.soft-cta{
  margin:36px 0 0;background:var(--card);border:1px solid var(--line);
  border-radius:var(--r-lg);padding:24px 26px;
}
.soft-cta p{font-size:14.5px;color:var(--ink-2);line-height:1.78;margin:0 0 16px}
.soft-cta .btn-primary{padding:11px 24px;font-size:14.5px}

.back{margin:34px 0 0;font-size:14px}
.back a{color:var(--ink-3);text-decoration:none}
.back a:hover{color:var(--accent)}

/* ============================================================
   索引页
   ============================================================ */
.blog-hero{padding:60px 0 40px}
.blog-hero .kicker{
  font-size:12px;font-weight:600;letter-spacing:.16em;color:var(--accent);
  text-transform:uppercase;margin-bottom:12px;
}
.blog-hero h1{
  font-size:clamp(26px,3.8vw,36px);font-weight:300;line-height:1.32;
  letter-spacing:-.01em;margin-bottom:14px;max-width:680px;
}
.blog-hero h1 b{font-weight:600;color:var(--accent)}
.blog-hero .lede{font-size:16px;color:var(--ink-2);max-width:660px;line-height:1.78}
.blog-hero .note{margin-top:14px;font-size:13px;color:var(--ink-4)}

.cat-grid{
  display:grid;grid-template-columns:repeat(4,1fr);gap:1px;
  background:var(--line);border:1px solid var(--line);
  border-radius:var(--r-lg);overflow:hidden;margin-bottom:56px;
}
.cat-card{background:var(--card);padding:22px 20px;text-decoration:none;
  color:inherit;display:block;transition:background .18s}
.cat-card:hover{background:var(--accent-bg)}
.cat-card h2{font-size:15px;font-weight:600;margin-bottom:9px;
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;color:var(--ink)}
.cat-card .cnt{
  font-size:11.5px;font-weight:600;color:var(--accent);
  background:var(--accent-bg);border:1px solid var(--accent-line);
  border-radius:999px;padding:1px 8px;
}
.cat-card p{font-size:13px;color:var(--ink-3);line-height:1.65}

.cat-sec{margin-bottom:52px;scroll-margin-top:80px}
.cat-head{margin-bottom:20px;padding-bottom:14px;border-bottom:1px solid var(--line)}
.cat-head h2{font-size:20px;font-weight:600;margin-bottom:7px;color:var(--ink)}
.cat-head p{font-size:14px;color:var(--ink-3);line-height:1.72}

.post-list{display:flex;flex-direction:column;gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden}
.pl-item{background:var(--card);padding:22px 24px;text-decoration:none;
  color:inherit;display:block;transition:background .18s}
.pl-item:hover{background:var(--accent-bg)}
.pl-item h3{font-size:16.5px;font-weight:600;line-height:1.5;
  margin-bottom:8px;letter-spacing:-.005em;color:var(--ink)}
.pl-item p{font-size:14px;color:var(--ink-2);line-height:1.72;margin-bottom:11px}
.pl-meta{font-size:12.5px;color:var(--ink-4);display:flex;
  align-items:center;gap:8px;flex-wrap:wrap}
.pl-meta i{font-style:normal;color:var(--line)}

.empty{
  background:var(--card);border:1px dashed var(--line);
  border-radius:var(--r-lg);padding:34px 26px;text-align:center;
  color:var(--ink-3);font-size:14px;
}

/* ============================================================
   响应式
   ============================================================ */
@media(max-width:860px){
  .cat-grid{grid-template-columns:repeat(2,1fr)}
  .rel-list{grid-template-columns:1fr}
}
@media(max-width:760px){
  .nav-links{display:none}
  .nav-in{padding:12px 16px}
  .wrap,.wrap-narrow{padding:0 16px}
  .blog-hero{padding:40px 0 28px}
  .cat-grid{margin-bottom:40px}
  .post{padding:18px 0 0}
  .post-body{font-size:16.5px}
  .post-body h2{font-size:19.5px;margin-top:36px}
  .post-body h3{font-size:16.5px}
  .answer{font-size:15.5px;padding:16px 18px;margin-bottom:28px}
  .related{margin-top:44px}
}
@media(max-width:480px){
  .cat-grid{grid-template-columns:1fr}
  .cat-card{padding:18px 18px}
  .pl-item{padding:18px 18px}
  .soft-cta{padding:20px 18px}
  .crumbs span{max-width:180px}
}