@charset "UTF-8";
/* article.css - 文章详情页 T4技术手册 */

/* ===== 文章页面布局 ===== */
.article-section{padding:50px 0 80px;background:#F9F3D8}
.article-layout{display:grid;grid-template-columns:1fr 320px;gap:40px}

/* 文章主体 T4技术手册风格 */
.article-main{background:#fff;border-radius:12px;padding:50px;box-shadow:0 5px 30px rgba(44,40,21,.06)}
.article-header{margin-bottom:35px;padding-bottom:25px;border-bottom:3px solid #D4AC0D}
.article-header h1{font-size:32px;font-weight:900;color:#2C2815;line-height:1.4;margin-bottom:18px}
.article-meta{display:flex;align-items:center;gap:20px;font-size:13px;color:#888;flex-wrap:wrap}
.article-meta span{display:flex;align-items:center;gap:6px}
.article-meta .cat{background:#D4AC0D;color:#2C2815;padding:4px 12px;border-radius:4px;font-weight:600;font-size:12px}

/* 文章内容 - 技术手册风格 */
.article-body h2{font-size:24px;font-weight:900;color:#2C2815;margin:40px 0 18px;padding:12px 0 12px 20px;border-left:5px solid #D4AC0D;background:#F9F3D8}
.article-body h3{font-size:20px;font-weight:700;color:#2C2815;margin:30px 0 14px}
.article-body p{font-size:15px;color:#333;line-height:1.95;margin-bottom:16px;text-align:justify}
.article-body ul,.article-body ol{margin-bottom:18px;padding-left:0}
.article-body ul li{position:relative;padding-left:22px;margin-bottom:10px;font-size:15px;color:#444;line-height:1.8}
.article-body ul li::before{content:">";position:absolute;left:0;color:#D4AC0D;font-weight:700}
.article-body ol{counter-reset:item}
.article-body ol li{counter-increment:item;position:relative;padding-left:32px;margin-bottom:10px;font-size:15px;color:#444;line-height:1.8}
.article-body ol li::before{content:counter(item) ".";position:absolute;left:0;color:#D4AC0D;font-weight:700;font-size:14px}
.article-body strong{color:#2C2815;font-weight:700;background:rgba(212,172,13,.1);padding:2px 6px;border-radius:3px}
.article-body code{font-family:"Courier New",monospace;background:#f5f0e0;padding:3px 8px;border-radius:4px;font-size:14px;color:#c49b0c}
.article-body pre{background:#2C2815;color:#F9F3D8;padding:20px;border-radius:8px;overflow-x:auto;margin:20px 0;font-size:14px;line-height:1.7}
.article-body blockquote{border-left:4px solid #D4AC0D;background:#F9F3D8;padding:20px 25px;margin:25px 0;font-style:italic;color:#555}
.article-body blockquote p:last-child{margin-bottom:0}
.article-body table{width:100%;border-collapse:collapse;margin:25px 0;font-size:14px}
.article-body th{background:#2C2815;color:#F9F3D8;padding:12px 15px;text-align:left;font-weight:700}
.article-body td{padding:12px 15px;border-bottom:1px solid #e8e0c8}
.article-body tr:nth-child(even){background:#F9F3D8}
.article-body a{color:#D4AC0D;text-decoration:underline}
.article-body a:hover{color:#2C2815}

/* 文章底部 */
.article-footer{margin-top:40px;padding-top:30px;border-top:2px solid #e8e0c8}
.article-tags{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:25px}
.article-tags span{font-size:14px;font-weight:600;color:#2C2815}
.article-tags a{padding:6px 14px;background:#F9F3D8;color:#2C2815;font-size:13px;font-weight:600;border-radius:20px;transition:all .3s ease}
.article-tags a:hover{background:#D4AC0D}

/* 相关推荐 */
.related-section{margin-top:40px}
.related-section h3{font-size:20px;font-weight:900;color:#2C2815;margin-bottom:20px;padding-bottom:12px;border-bottom:2px solid #D4AC0D}
.related-list{display:grid;grid-template-columns:repeat(2,1fr);gap:15px}
.related-list a{display:flex;align-items:center;gap:12px;padding:15px;background:#F9F3D8;border-radius:8px;transition:all .3s ease}
.related-list a:hover{background:#D4AC0D;color:#2C2815}
.related-list .num{width:32px;height:32px;background:#2C2815;color:#F9F3D8;border-radius:6px;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;flex-shrink:0}
.related-list a:hover .num{background:#2C2815}
.related-list h5{font-size:14px;font-weight:600;line-height:1.5}

/* 相关文章 */
.related-articles{margin-top:40px}
.related-articles h3{font-size:20px;font-weight:900;color:#2C2815;margin-bottom:20px;padding-bottom:12px;border-bottom:2px solid #D4AC0D}
.related-articles-list li{margin-bottom:12px;padding-bottom:12px;border-bottom:1px solid #f0ebe0}
.related-articles-list a{font-size:15px;font-weight:600;color:#2C2815;display:flex;align-items:center;gap:10px}
.related-articles-list a::before{content:"";width:6px;height:6px;background:#D4AC0D;border-radius:50%;flex-shrink:0}
.related-articles-list a:hover{color:#D4AC0D}

/* ===== 响应式 ===== */
@media (max-width:768px){
.article-layout{grid-template-columns:1fr}
.article-main{padding:25px}
.article-header h1{font-size:24px}
.related-list{grid-template-columns:1fr}
}