/* ==========================================================================
   博客（guide）专用版式 —— .gd-*
   与起名宝典的 .bz-* 框架完全分开：这里是情感类长文的读法，
   不用左侧粘性目录 + 壹贰叁徽标那一套，改为
   封面区 → 三句话先读 → 横向锚点条 → 大号序号分节 → 对照双栏 / 自查清单 / 步骤条 → 问答
   配色沿用 css/style.css 的变量，本文件不覆盖任何全局类。
   ========================================================================== */

/* 顶部阅读进度条 ---------------------------------------------------------- */
.gd-prog{
  position:fixed;top:0;left:0;height:3px;width:0;z-index:99;
  background:linear-gradient(90deg,var(--gold),var(--vermilion));
  transition:width .12s linear;
}

/* 文章外框：单栏窄版，长文更好读 ---------------------------------------- */
.gd-wrap{max-width:920px;margin:0 auto;}

/* 封面区 ------------------------------------------------------------------ */
.gd-cover{padding:26px 0 22px;border-bottom:1px solid var(--line);margin-bottom:30px;}
.gd-cover .kind{
  display:inline-block;font-size:12.5px;letter-spacing:.08em;
  color:var(--vermilion);background:var(--vermilion-soft);
  border-radius:999px;padding:5px 13px;margin-bottom:16px;
}
.gd-cover h1{
  font-family:var(--serif);font-size:36px;line-height:1.42;
  color:var(--ink);margin:0 0 16px;font-weight:700;
}
.gd-cover .lead{
  font-size:16.5px;line-height:1.95;color:var(--ink-soft);
  margin:0 0 20px;padding-left:16px;border-left:3px solid var(--gold-soft);
}
.gd-cover .info{
  display:flex;flex-wrap:wrap;align-items:center;gap:0 10px;
  font-size:13px;color:var(--muted);
}
.gd-cover .info .sp{color:var(--line);}

/* 三句话先读 -------------------------------------------------------------- */
.gd-key{
  background:var(--cream);border:1px solid var(--line);
  border-radius:var(--radius);padding:24px 26px;margin-bottom:34px;
}
.gd-key h2{
  font-family:var(--serif);font-size:17px;color:var(--ink);
  margin:0 0 16px;display:flex;align-items:center;gap:9px;font-weight:700;
}
.gd-key h2::before{
  content:"";width:16px;height:2px;background:var(--vermilion);border-radius:2px;
}
.gd-key ol{margin:0;padding:0;list-style:none;counter-reset:gk;}
.gd-key li{
  counter-increment:gk;position:relative;padding-left:34px;
  font-size:15px;line-height:1.9;color:var(--ink-soft);margin-bottom:11px;
}
.gd-key li:last-child{margin-bottom:0;}
.gd-key li::before{
  content:counter(gk);position:absolute;left:0;top:3px;
  width:22px;height:22px;border-radius:50%;
  background:var(--paper);border:1px solid var(--gold);
  color:var(--gold);font-size:12px;font-weight:700;
  display:flex;align-items:center;justify-content:center;
}
.gd-key li b{color:var(--ink);}

/* 分节：大号浅色序号 ------------------------------------------------------ */
.gd-part{margin-bottom:44px;scroll-margin-top:80px;}
.gd-part > h2{
  position:relative;font-family:var(--serif);font-size:23px;line-height:1.5;
  color:var(--ink);margin:0 0 18px;padding-top:16px;font-weight:700;
}
.gd-part > h2 .no{
  position:absolute;left:-2px;top:-6px;z-index:0;
  font-family:var(--serif);font-size:52px;font-weight:700;
  color:var(--gold-soft);letter-spacing:-.02em;line-height:1;
  pointer-events:none;
}
.gd-part > h2 .tx{position:relative;z-index:1;}
.gd-part p{font-size:15.5px;line-height:2.02;color:var(--ink-soft);margin:0 0 15px;}
.gd-part p b{color:var(--ink);}
.gd-part p:last-child{margin-bottom:0;}
.gd-part h3{
  font-family:var(--serif);font-size:17.5px;color:var(--ink);
  margin:26px 0 12px;font-weight:700;
}

/* 要点列表：竖线 + 小圆点 ------------------------------------------------- */
.gd-list{margin:0 0 15px;padding:0 0 0 2px;list-style:none;}
.gd-list li{
  position:relative;padding-left:20px;font-size:15.5px;line-height:2.02;
  color:var(--ink-soft);margin-bottom:10px;
}
.gd-list li::before{
  content:"";position:absolute;left:2px;top:14px;
  width:6px;height:6px;border-radius:50%;background:var(--gold);
}
.gd-list li b{color:var(--ink);}

/* 简版正文（.gd-sec）：中文新闻排版，段落首行空两格 ---------------------------
   参考报刊长文格式：小标题 + 段落，段落首行缩进 2 字符，行距宽松。
   与上面的盒式组件并存，旧文章继续用 .gd-part 那一套。 */
.gd-sec{margin-bottom:14px;scroll-margin-top:80px;}
.gd-sec > h2{
  font-family:var(--serif);font-size:22px;line-height:1.5;
  color:var(--vermilion-dark);margin:38px 0 16px;font-weight:700;
}
.gd-sec h3{font-family:var(--serif);font-size:17.5px;color:var(--ink);margin:28px 0 12px;font-weight:700;}
.gd-sec p{font-size:15.5px;line-height:2.02;color:var(--ink-soft);margin:0 0 15px;text-indent:2em;}
.gd-sec p b{color:var(--ink);}

/* 正文内链（2026-10）-------------------------------------------------------- */
/* AI 写 [[link:词]]，模板渲染时换成 <a class="gd-link">。样式刻意做得轻：
   下划线用随主题变的浅色，悬停才显出朱砂色，避免正文里几处链接变成视觉噪音。 */
.gd-sec p a.gd-link,
.gd-faq p a.gd-link{
  color:var(--ink);text-decoration:none;border-bottom:1px solid var(--gold);
  transition:color .15s,border-color .15s;
}
.gd-sec p a.gd-link:hover,
.gd-faq p a.gd-link:hover{color:var(--vermilion-dark);border-bottom-color:var(--vermilion);}

/* FAQ（2026-10）------------------------------------------------------------- */
/* 版式仍走「新闻简版」：留白 + h2 分区 + h3 提问 + p 作答，没有折叠、没有盒式边框。
   这与 template.js 顶部注释里定的取向一致 —— FAQ 的作用是内容与结构化数据，不换视觉。 */
.gd-faq{margin-bottom:14px;scroll-margin-top:80px;}
.gd-faq > h2{
  font-family:var(--serif);font-size:22px;line-height:1.5;
  color:var(--vermilion-dark);margin:38px 0 16px;font-weight:700;
}
.gd-faq h3{
  font-family:var(--serif);font-size:16.5px;color:var(--ink);
  margin:22px 0 10px;font-weight:700;line-height:1.6;
}
.gd-faq p{font-size:15.5px;line-height:2.02;color:var(--ink-soft);margin:0 0 14px;text-indent:0;}

/* 引语块 ------------------------------------------------------------------ */
.gd-quote{
  position:relative;margin:26px 0;padding:22px 26px 22px 54px;
  background:linear-gradient(180deg,var(--cream),var(--paper));
  border:1px solid var(--line);border-left:3px solid var(--vermilion);
  border-radius:0 var(--radius-sm) var(--radius-sm) 0;
}
.gd-quote::before{
  content:"“";position:absolute;left:16px;top:6px;
  font-family:var(--serif);font-size:52px;color:var(--gold);opacity:.5;line-height:1;
}
.gd-quote p{font-family:var(--serif);font-size:16.5px;line-height:1.95;color:var(--ink);margin:0;}
.gd-quote .who{display:block;margin-top:10px;font-family:var(--sans);font-size:13px;color:var(--muted);}

/* 对照双栏：这样看 / 别这样看 --------------------------------------------- */
.gd-two{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:24px 0;}
.gd-two .col{border:1px solid var(--line);border-radius:var(--radius-sm);padding:18px 20px;background:var(--paper);}
.gd-two .col h4{
  font-size:14.5px;margin:0 0 14px;font-weight:700;
  display:flex;align-items:center;gap:8px;
}
.gd-two .col h4::before{
  width:20px;height:20px;border-radius:50%;flex:0 0 auto;
  display:flex;align-items:center;justify-content:center;font-size:12px;
}
.gd-two .col.yes{background:linear-gradient(180deg,#f4faf7,var(--paper));border-color:#d9e9e2;}
.gd-two .col.yes h4{color:var(--jade);}
.gd-two .col.yes h4::before{content:"✓";background:#e3f0ea;color:var(--jade);}
.gd-two .col.no{background:linear-gradient(180deg,#fdf5f4,var(--paper));border-color:#f0dedb;}
.gd-two .col.no h4{color:var(--vermilion);}
.gd-two .col.no h4::before{content:"✕";background:var(--vermilion-soft);color:var(--vermilion);}
.gd-two ul{margin:0;padding:0;list-style:none;}
.gd-two li{font-size:14.5px;line-height:1.85;color:var(--ink-soft);margin-bottom:10px;padding-left:12px;position:relative;}
.gd-two li:last-child{margin-bottom:0;}
.gd-two li::before{content:"";position:absolute;left:0;top:12px;width:4px;height:4px;border-radius:50%;background:var(--muted);opacity:.55;}

/* 自查清单 ---------------------------------------------------------------- */
.gd-check{
  margin:24px 0;border:1px solid var(--line);border-radius:var(--radius);
  background:var(--paper);overflow:hidden;
}
.gd-check .hd{
  background:var(--cream-mid);padding:14px 22px;
  font-family:var(--serif);font-size:15.5px;color:var(--ink);font-weight:700;
  border-bottom:1px solid var(--line);
}
.gd-check .it{display:flex;gap:13px;padding:15px 22px;border-bottom:1px dashed var(--line);}
.gd-check .it:last-child{border-bottom:none;}
.gd-check .bx{
  flex:0 0 auto;width:18px;height:18px;margin-top:4px;
  border:1.5px solid var(--gold);border-radius:4px;background:var(--cream);
}
.gd-check .tt{font-size:15px;line-height:1.85;color:var(--ink-soft);}
.gd-check .tt b{display:block;color:var(--ink);margin-bottom:3px;}

/* 步骤条 ------------------------------------------------------------------ */
.gd-step{margin:24px 0;padding-left:4px;}
.gd-step .st{position:relative;padding:0 0 22px 34px;}
.gd-step .st::before{
  content:"";position:absolute;left:9px;top:22px;bottom:0;width:1px;background:var(--line);
}
.gd-step .st:last-child{padding-bottom:0;}
.gd-step .st:last-child::before{display:none;}
.gd-step .st .dot{
  position:absolute;left:0;top:2px;width:19px;height:19px;border-radius:50%;
  background:var(--vermilion);color:#fff;font-size:11px;font-weight:700;
  display:flex;align-items:center;justify-content:center;
}
.gd-step .st h4{font-size:15.5px;color:var(--ink);margin:0 0 7px;font-weight:700;}
.gd-step .st p{font-size:14.5px;line-height:1.9;color:var(--ink-soft);margin:0;}

/* 提示块 ------------------------------------------------------------------ */
.gd-note{
  margin:24px 0;padding:16px 20px;border-radius:var(--radius-sm);
  background:var(--gold-soft);border:1px solid #e6d5b4;
}
.gd-note p{font-size:14.5px;line-height:1.9;color:#6b5427;margin:0;}
.gd-note p b{color:#4d3c17;}

/* 边界清单（哪些结论不该得出） ------------------------------------------- */
.gd-bound{margin:24px 0;display:grid;gap:12px;}
.gd-bound .row{
  display:grid;grid-template-columns:112px 1fr;gap:16px;align-items:start;
  padding:15px 18px;background:var(--cream);border-radius:var(--radius-sm);
  border:1px solid var(--line);
}
.gd-bound .k{
  font-family:var(--serif);font-size:14.5px;color:var(--vermilion);font-weight:700;line-height:1.7;
}
.gd-bound .v{font-size:14.5px;line-height:1.85;color:var(--ink-soft);}

/* 结尾行动条 -------------------------------------------------------------- */
.gd-cta{
  margin:40px 0 0;padding:30px 32px;border-radius:var(--radius);
  background:linear-gradient(135deg,#2a2536,#3a3348);color:#fff;
  display:flex;align-items:center;justify-content:space-between;gap:22px;flex-wrap:wrap;
}
.gd-cta .tx{flex:1 1 320px;}
.gd-cta h3{font-family:var(--serif);font-size:20px;margin:0 0 9px;color:#fff;font-weight:700;}
.gd-cta p{font-size:14.5px;line-height:1.85;color:rgba(255,255,255,.76);margin:0;}
.gd-cta a{
  flex:0 0 auto;text-decoration:none;font-size:15px;font-weight:700;
  background:linear-gradient(135deg,var(--vermilion),var(--vermilion-dark));
  color:#fff;padding:13px 26px;border-radius:999px;
  box-shadow:0 8px 20px rgba(192,57,43,.32);transition:transform .18s;
}
.gd-cta a:hover{transform:translateY(-2px);}

/* 相关阅读：横排序号列表 -------------------------------------------------- */
.gd-more{margin-top:44px;padding-top:30px;border-top:1px solid var(--line);}

/* 文章分类标签（放在文章末尾、接着读之前） ------------------------------ */
.article-tag{
  margin:20px 0 26px;
  padding:0 0 12px;
  border-bottom:1px solid var(--line);
}
.article-tag .kind{
  display:inline-block;font-size:12.5px;letter-spacing:.08em;
  color:var(--vermilion);background:var(--vermilion-soft);
  border-radius:999px;padding:5px 13px;
}
/* 分类标签自己已经带了一条下边框，紧跟在后面的「接着读」就不要再画顶线，
   否则标签下面会出现两条平行线。旧文章没有 .article-tag，不受影响、仍保留顶线。 */
.article-tag + .gd-more{border-top:none;padding-top:0;}
.gd-more h2{font-family:var(--serif);font-size:19px;color:var(--ink);margin:0 0 18px;font-weight:700;}
.gd-more .ln{
  display:flex;gap:15px;align-items:flex-start;text-decoration:none;
  padding:16px 0;border-bottom:1px dashed var(--line);
}
.gd-more .ln:last-of-type{border-bottom:none;}
.gd-more .ln .n{
  flex:0 0 auto;font-family:var(--serif);font-size:19px;font-weight:700;
  color:var(--gold-soft);line-height:1.3;width:26px;
}
.gd-more .ln .bd{flex:1 1 auto;}
.gd-more .ln .cat{display:block;font-size:12px;color:var(--vermilion);margin-bottom:5px;}
.gd-more .ln h4{font-size:16px;line-height:1.65;color:var(--ink);margin:0 0 6px;font-weight:700;transition:color .18s;}
.gd-more .ln p{font-size:13.5px;line-height:1.8;color:var(--muted);margin:0;}
.gd-more .ln:hover h4{color:var(--vermilion);}
.gd-more .ln:hover .n{color:var(--gold);}
.gd-more .back{display:inline-block;margin-top:20px;font-size:14px;color:var(--vermilion);text-decoration:none;}
.gd-more .back:hover{text-decoration:underline;}

/* 手机端 ------------------------------------------------------------------ */
@media (max-width:760px){
  .gd-cover{padding:18px 0 18px;margin-bottom:24px;}
  .gd-cover h1{font-size:26px;line-height:1.45;}
  .gd-cover .lead{font-size:15px;line-height:1.9;padding-left:13px;}
  .gd-key{padding:20px 18px;margin-bottom:26px;border-radius:var(--radius-sm);}
  .gd-key li{font-size:14.5px;padding-left:30px;}
  .gd-part{margin-bottom:34px;}
  .gd-part > h2{font-size:19.5px;padding-top:13px;}
  .gd-part > h2 .no{font-size:40px;top:-4px;}
  .gd-part p,.gd-list li{font-size:15px;line-height:1.95;}
  .gd-sec > h2{font-size:19.5px;margin:30px 0 14px;}
  .gd-sec p,.gd-defs li{font-size:15px;line-height:1.95;text-indent:2em;}
  .gd-defs{padding-left:16px;}
  .gd-quote{padding:18px 18px 18px 44px;margin:20px 0;}
  .gd-quote p{font-size:15.5px;}
  .gd-two{grid-template-columns:1fr;gap:12px;}
  .gd-check .hd{padding:12px 16px;font-size:14.5px;}
  .gd-check .it{padding:13px 16px;gap:11px;}
  .gd-bound .row{grid-template-columns:1fr;gap:6px;padding:13px 15px;}
  .gd-cta{padding:22px 20px;flex-direction:column;align-items:stretch;gap:16px;}
  .gd-cta h3{font-size:17.5px;}
  .gd-cta a{text-align:center;padding:12px 20px;}
  .gd-more{margin-top:34px;padding-top:24px;}
}