/* ==========================================================================
   大西瓜博客 · 前台文章页样式
   供 post.html 与后台 preview.php 共用，保证「预览所见 = 上线所得」
   ========================================================================== */
:root{
  --bg:#f7f8fa; --card:#fff; --text:#1a202c; --sub:#718096; --line:#edf0f4;
  --accent:#ff6b6b; --accent-soft:#fff5f5; --radius:14px;
}
*{margin:0;padding:0;box-sizing:border-box;}
body{
  font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",sans-serif;
  background:var(--bg);color:var(--text);line-height:1.7;-webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none;}

/* ---------- 主体容器 ---------- */
.wrap{max-width:1180px;margin:0 auto;padding:26px 24px 56px;
  display:grid;grid-template-columns:268px minmax(0,1fr);gap:26px;align-items:start;}

/* ---------- 文章 ---------- */
.article{background:var(--card);border-radius:var(--radius);overflow:hidden;
  box-shadow:0 1px 2px rgba(16,24,40,.04),0 10px 30px -18px rgba(16,24,40,.16);}
.cover{height:300px;position:relative;overflow:hidden;
  display:flex;align-items:center;justify-content:center;font-size:96px;
  background:linear-gradient(135deg,#ffd3a5,#fd6585);}
.cover::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,transparent 50%,rgba(0,0,0,.28));}
.cover img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0;z-index:1;}

.article-head{padding:28px 38px 0;}
.article-head h1{font-size:28px;line-height:1.4;font-weight:800;letter-spacing:-.5px;}
.ameta{display:flex;align-items:center;gap:14px;margin-top:14px;
  font-size:13.5px;color:#a0aec0;flex-wrap:wrap;}
.ameta .tags{display:flex;gap:6px;}
.ameta .tags span{color:#5b8def;background:#eef3ff;padding:2px 10px;
  border-radius:9px;font-size:12.5px;}

/* ---------- 正文排版（编辑器输出的 HTML 落在这里） ---------- */
.article-body{padding:26px 38px 34px;font-size:16.5px;line-height:2;color:#2d3748;}
.article-body p{margin-bottom:20px;}
.article-body h2{font-size:20px;font-weight:700;margin:32px 0 14px;letter-spacing:-.3px;}
.article-body h3{font-size:18px;font-weight:700;margin:28px 0 12px;}
.article-body h4{font-size:16px;font-weight:700;margin:24px 0 10px;}
.article-body img{max-width:100%;height:auto;border-radius:12px;margin:22px 0;display:block;}
.article-body blockquote{
  border-left:3px solid var(--accent);background:var(--accent-soft);
  padding:14px 20px;margin:22px 0;border-radius:0 10px 10px 0;
  color:#4a5568;font-size:15.5px;
}
.article-body ul,.article-body ol{margin:0 0 20px;padding-left:28px;}
.article-body li{margin-bottom:8px;}
.article-body a{color:#2b6cb0;text-decoration:underline;text-underline-offset:2px;}
.article-body a:hover{color:#1a4e8a;}
.article-body hr{border:none;border-top:1px solid var(--line);margin:30px 0;}
.article-body pre{
  background:#f7fafc;border:1px solid var(--line);border-radius:10px;
  padding:14px 16px;overflow-x:auto;font-size:13.5px;margin:0 0 20px;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
}
.article-body code{
  background:#f1f3f6;border:1px solid var(--line);border-radius:5px;padding:1px 6px;
  font-size:14px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
}
.article-body pre code{background:none;border:none;padding:0;font-size:13.5px;}
.article-body table{width:100%;border-collapse:collapse;margin:0 0 20px;font-size:15px;}
.article-body td,.article-body th{border:1px solid var(--line);padding:9px 13px;text-align:left;}
.article-body th{background:#f7fafc;font-weight:700;}
.article-body mark{background:#fef3c7;padding:0 3px;border-radius:3px;}
.article-body figure{margin:0 0 22px;}
.article-body figcaption{font-size:13px;color:#a0aec0;text-align:center;margin-top:8px;}

/* ---------- 文末标签 ---------- */
.article-foot{padding:0 38px 30px;display:flex;gap:8px;flex-wrap:wrap;}
.article-foot .tags{display:flex;gap:8px;}
.article-foot .tags span{background:#f1f3f6;color:var(--sub);
  padding:5px 13px;border-radius:14px;font-size:13px;}

/* ---------- 页脚 ---------- */
.foot{text-align:center;padding:36px 20px;color:#a0aec0;font-size:13px;}

/* ---------- 响应式 ---------- */
@media(max-width:900px){
  .wrap{grid-template-columns:1fr;padding:18px 15px 44px;}
  .cover{height:220px;font-size:70px;}
  .article-head,.article-body,.article-foot{padding-left:22px;padding-right:22px;}
}
@media(max-width:600px){
  .article-head h1{font-size:22px;}
  .article-body{font-size:16px;}
}