@charset "UTF-8";

/* ===== 文章详情页样式 article.css ===== */

.article-page{padding:50px 0}
.article-container{max-width:900px;margin:0 auto}

/* === 文章头部 === */
.article-header{text-align:center;margin-bottom:40px;padding-bottom:30px;border-bottom:1px solid #f0ebf4}
.article-header h1{font-size:30px;color:#2D1F3D;font-weight:700;line-height:1.4;margin-bottom:15px}
.article-meta{display:flex;justify-content:center;align-items:center;gap:20px;font-size:13px;color:#888}
.article-meta span{display:flex;align-items:center;gap:5px}
.article-meta svg{width:14px;height:14px;fill:#999}

/* === T1学术严谨排版 === */
.article-body{font-size:16px;line-height:1.85;color:#333}
.article-body h2{font-size:22px;color:#2D1F3D;margin:35px 0 15px;font-weight:700;padding-bottom:10px;border-bottom:1px solid #f0ebf4}
.article-body h3{font-size:18px;color:#2D1F3D;margin:25px 0 12px;font-weight:600}
.article-body p{margin-bottom:12px;text-align:justify}
.article-body ul,.article-body ol{margin:12px 0 12px 25px}
.article-body ul li,.article-body ol li{margin-bottom:8px;line-height:1.8}
.article-body strong{color:#2D1F3D}
.article-body a{color:#7C5C8C;border-bottom:1px solid #DDD0E6}
.article-body a:hover{border-bottom-color:#7C5C8C}
.article-body blockquote{background:#f8f5fb;border-left:4px solid #7C5C8C;padding:15px 20px;margin:20px 0;font-style:italic;color:#555}
.article-body blockquote p{margin:0}
.article-body table{width:100%;border-collapse:collapse;margin:20px 0;font-size:14px}
.article-body th,.article-body td{padding:12px 15px;border:1px solid #e0d5e8;text-align:left}
.article-body th{background:#f8f5fb;font-weight:600;color:#2D1F3D}
.article-body tr:nth-child(even){background:#faf8fc}

/* === 文章底部 === */
.article-footer{margin-top:50px;padding-top:30px;border-top:1px solid #f0ebf4}
.article-tags{display:flex;align-items:center;gap:10px;margin-bottom:30px;flex-wrap:wrap}
.article-tags span{font-size:14px;color:#666}
.article-tags a{padding:6px 14px;background:#f0ebf4;color:#7C5C8C;font-size:13px;border-radius:15px;transition:all .3s}
.article-tags a:hover{background:#7C5C8C;color:#fff}

/* === 相关推荐 === */
.article-related{margin-top:40px}
.article-related h3{font-size:20px;color:#2D1F3D;margin-bottom:20px;font-weight:600;position:relative;padding-bottom:10px}
.article-related h3::after{content:'';position:absolute;bottom:0;left:0;width:40px;height:3px;background:#7C5C8C;border-radius:2px}
.related-list{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.related-list a{display:flex;align-items:center;padding:12px 15px;background:#f8f5fb;border-radius:8px;font-size:14px;color:#444;transition:all .3s}
.related-list a::before{content:'\203A';margin-right:8px;color:#7C5C8C;font-size:18px;font-weight:700}
.related-list a:hover{background:#DDD0E6;color:#2D1F3D}

/* === 导航 === */
.article-nav{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:40px;padding-top:25px;border-top:1px solid #f0ebf4}
.article-nav a{padding:15px 20px;background:#f8f5fb;border-radius:10px;font-size:14px;color:#444;transition:all .3s}
.article-nav a:hover{background:#DDD0E6}
.article-nav a .label{font-size:12px;color:#7C5C8C;display:block;margin-bottom:5px}
.article-nav a .title{color:#2D1F3D;font-weight:500}

@media(max-width:767px){
.article-header h1{font-size:22px}
.article-body{font-size:15px}
.article-body h2{font-size:20px}
.related-list{grid-template-columns:1fr}
.article-nav{grid-template-columns:1fr}
}