/* 狗蛋 GEO · 专栏样式
   与首页/案例页共用同一套设计变量，只补文章排版。
   新增页面时引用本文件即可，不要复制 index.html 里的内联样式。 */

:root{
  --ink:#14161a; --muted:#5b6472; --line:#e8e6e1;
  --paper:#ffffff; --paper2:#faf9f6;
  --brand:#1652f0; --wx:#07c160; --wx-dark:#06a552;
  --amber:#ffb020; --radius:16px;
  --maxw:1080px; --readw:720px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  color:var(--ink); background:var(--paper); line-height:1.8; -webkit-font-smoothing:antialiased;
}
a{color:var(--brand); text-decoration:none}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 20px}

/* ---------- NAV（与首页一致） ---------- */
.nav{
  position:sticky; top:0; z-index:50; background:rgba(255,255,255,.92);
  backdrop-filter:blur(12px); border-bottom:1px solid var(--line);
}
.nav .wrap{display:flex; align-items:center; justify-content:space-between; height:64px}
.logo{font-weight:800; font-size:20px; letter-spacing:-.5px; color:var(--ink)}
.logo span{color:var(--brand)}
.nav .links{display:flex; align-items:center; gap:22px; font-size:15px}
.nav .links a{color:var(--muted)}
.nav .links a:hover,.nav .links a.on{color:var(--ink)}
.nav button.cta{
  background:var(--wx); color:#fff; border:0; border-radius:10px;
  padding:9px 16px; font-size:14px; font-weight:600; cursor:pointer; font-family:inherit;
}
@media(max-width:640px){ .nav .links .hide-sm{display:none} .nav .links{gap:14px} }

/* ---------- 专栏首页 ---------- */
.page-head{padding:56px 0 20px; max-width:var(--readw)}
.page-head h1{font-size:34px; line-height:1.3; letter-spacing:-.5px}
.page-head p{color:var(--muted); margin-top:14px; font-size:16px}
.eyebrow{
  display:inline-block; font-size:13px; color:var(--brand); background:#eef3ff;
  padding:5px 12px; border-radius:999px; margin-bottom:16px; font-weight:600;
}

.post-list{display:grid; gap:18px; padding:14px 0 40px; max-width:820px}
.post-card{
  display:block; border:1px solid var(--line); border-radius:var(--radius);
  padding:24px 26px; background:var(--paper); transition:.18s;
}
.post-card:hover{border-color:#cfd8e8; box-shadow:0 8px 24px rgba(20,22,26,.06)}
.post-card h2{font-size:20px; line-height:1.45; color:var(--ink); letter-spacing:-.2px}
.post-card p{color:var(--muted); font-size:15px; margin-top:10px}
.post-meta{color:#8a929e; font-size:13px; margin-top:14px; display:flex; gap:14px; flex-wrap:wrap}

/* ---------- 文章页 ---------- */
.post{padding:44px 0 20px}
.post-header{max-width:var(--readw); margin-bottom:34px}
.post-header h1{font-size:34px; line-height:1.35; letter-spacing:-.6px}
.post-header .post-meta{margin-top:16px}
.crumb{font-size:13px; color:#8a929e; margin-bottom:18px}
.crumb a{color:#8a929e}

.post-body{max-width:var(--readw); font-size:17px}
.post-body p{margin:18px 0}
.post-body h2{
  font-size:25px; line-height:1.4; margin:44px 0 6px; padding-top:10px;
  letter-spacing:-.3px; border-top:1px solid var(--line);
}
.post-body h2:first-child{border-top:0; margin-top:0; padding-top:0}
.post-body h3{font-size:19px; margin:30px 0 4px; letter-spacing:-.2px}
.post-body strong{font-weight:700}
.post-body ul,.post-body ol{margin:16px 0 16px 22px}
.post-body li{margin:8px 0}
.post-body blockquote{
  margin:22px 0; padding:14px 20px; background:var(--paper2);
  border-left:3px solid var(--brand); border-radius:0 10px 10px 0; color:#3a4150;
}
.post-body blockquote p{margin:6px 0}
.post-body pre{
  background:#0f141b; color:#dfe6f0; padding:18px 20px; border-radius:12px;
  overflow-x:auto; font-size:14px; line-height:1.7; margin:22px 0;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
}
.post-body code{
  background:#f2f4f8; padding:2px 6px; border-radius:5px; font-size:.92em;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
}
.post-body pre code{background:none; padding:0; color:inherit; font-size:inherit}
.post-body hr{border:0; border-top:1px solid var(--line); margin:40px 0}
/* 文末署名/说明行：中文不适用斜体，改成灰色小字 */
.post-body p > em:only-child{display:block; font-style:normal; color:#8a929e; font-size:14px; line-height:1.7}

/* 表格：手机上横向滚动，不撑破布局 */
.table-wrap{overflow-x:auto; margin:24px 0; -webkit-overflow-scrolling:touch}
.post-body table{border-collapse:collapse; width:100%; font-size:15px; min-width:520px}
.post-body th,.post-body td{border:1px solid var(--line); padding:10px 12px; text-align:left; vertical-align:top}
.post-body th{background:var(--paper2); font-weight:700; white-space:nowrap}
.post-body tbody tr:nth-child(even){background:#fcfcfa}

/* ---------- 咨询区（每篇文章固定位置） ---------- */
.consult{
  max-width:var(--readw); margin:48px 0 0; border:1px solid #d7e2ff;
  background:linear-gradient(180deg,#f7faff,#ffffff);
  border-radius:var(--radius); padding:30px 30px 26px;
}
.consult.wide{max-width:820px}
.consult .tag{
  display:inline-block; font-size:12px; font-weight:700; color:var(--brand);
  background:#e7efff; padding:4px 10px; border-radius:999px; margin-bottom:12px;
}
.consult h3{font-size:22px; letter-spacing:-.3px; line-height:1.45}
.consult p{color:#4a5260; font-size:15px; margin-top:10px}
.consult ul{margin:14px 0 0 20px; color:#4a5260; font-size:15px}
.consult li{margin:6px 0}
.consult .btns{display:flex; gap:12px; flex-wrap:wrap; margin-top:20px}
.btn{
  display:inline-block; border-radius:11px; padding:12px 20px; font-size:15px;
  font-weight:600; cursor:pointer; border:1px solid transparent; font-family:inherit;
}
.btn-wx{background:var(--wx); color:#fff}
.btn-wx:hover{background:var(--wx-dark)}
.btn-ghost{background:#fff; color:var(--ink); border-color:var(--line)}
.btn-ghost:hover{border-color:#c9d2e0}
.consult .note{font-size:13px; color:#8a929e; margin-top:14px}

/* 下一篇 / 回列表 */
.post-nav{max-width:var(--readw); margin:34px 0 60px; padding-top:24px; border-top:1px solid var(--line); font-size:15px}

/* ---------- FOOTER（与首页一致） ---------- */
footer{border-top:1px solid var(--line); background:var(--paper2); padding:44px 0; text-align:center; margin-top:20px}
footer .logo{font-size:18px; margin-bottom:8px}
footer .slogan{color:var(--muted); font-size:14px; margin-bottom:18px}
footer .qr-mini{width:96px; height:96px; border-radius:10px; display:block; margin:0 auto 12px; object-fit:cover}
footer .wx{color:var(--wx); font-weight:700}
footer .copyright{color:#8a929e; font-size:13px; margin-top:18px}

/* 浮动按钮 + 二维码弹窗（与首页一致） */
.float{
  position:fixed; right:20px; bottom:24px; z-index:60; background:var(--wx); color:#fff;
  border:0; border-radius:999px; padding:13px 20px; font-size:15px; font-weight:700;
  cursor:pointer; box-shadow:0 8px 24px rgba(7,193,96,.32); font-family:inherit;
}
.modal{
  position:fixed; inset:0; z-index:100; background:rgba(10,14,20,.55);
  display:none; align-items:center; justify-content:center; padding:20px;
}
.modal.open{display:flex}
.modal .box{background:#fff; border-radius:18px; padding:30px; text-align:center; max-width:340px; width:100%}
.modal .box h3{font-size:19px}
.modal .box p{color:var(--muted); font-size:14px; margin-top:8px}
.modal .box img{width:190px; height:190px; object-fit:cover; margin:18px auto 0; display:block; border-radius:10px}
.modal .tip{color:#8a929e; font-size:13px; margin-top:10px}
.modal .close{
  margin-top:16px; background:var(--paper2); border:1px solid var(--line);
  border-radius:10px; padding:10px 22px; font-size:14px; cursor:pointer; font-family:inherit;
}

@media(max-width:640px){
  .page-head h1,.post-header h1{font-size:26px}
  .post-body{font-size:16px}
  .post-body h2{font-size:21px}
  .post-body h3{font-size:18px}
  .consult{padding:24px 20px}
}