/* =====================================================================
   detail.css —— 文章详情页（detail.html）专属样式
   共用样式见 assets/common.css；本文件仅含详情页独有：主题内容背景纹理 /
        文章正文排版 / 详情页响应式
   ===================================================================== */

/* 主题内容背景纹理（保留原 .section::before 的 .55 透明度，避免图案过浓） */
.detail-main::before{content:""; position:absolute; inset:0; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cpath d='M0 60h120M60 0v120' stroke='%2315356B' stroke-width='1' opacity='0.04'/%3E%3C/svg%3E"); opacity:.55; pointer-events:none;}

/* ============ 文章正文 ============ */
.detail-article{background:var(--paper-2); border:1px solid var(--line); border-radius:14px; padding:38px 40px;}
.article-title{font-size:30px; color:var(--jnu); margin:0 0 14px;}
.article-meta{display:flex; flex-wrap:wrap; gap:8px 22px; font-size:13px; color:var(--muted); padding-bottom:18px; margin-bottom:24px; border-bottom:1px dashed var(--line);}
.article-body{font-size:16px; line-height:1.9; color:var(--ink);}
.article-body p{margin:0 0 18px; text-indent:2em;}
.article-body p.article-fig{text-indent:0; text-align:center;}
.article-img{max-width:100%; height:auto; border-radius:10px; margin:6px auto; box-shadow:0 12px 30px -18px rgba(16,42,87,.5); border:1px solid var(--line);}

/* ============ 响应式（详情页专属） ============ */
@media (max-width:991.98px){
  .detail-grid{grid-template-columns:1fr; gap:28px;}
  .detail-aside{position:static;}
  .detail-hero-cap h1{font-size:30px;}
  .detail-article{padding:26px 20px;}
}