/* ===== 基础样式（所有模板共用）===== */
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif;line-height:1.75;font-size:16px}
.container{max-width:820px;margin:0 auto;padding:0 20px}
a{text-decoration:none;color:inherit}
img{max-width:100%;height:auto;display:block;border-radius:4px}

/* 头部导航 */
.site-header{position:sticky;top:0;z-index:99;padding:15px 0;box-shadow:0 2px 10px rgba(0,0,0,0.15)}
.header-inner{display:flex;justify-content:space-between;align-items:center;gap:20px}
.logo{font-size:20px;font-weight:700;flex-shrink:0;white-space:nowrap}
.main-nav{display:flex;gap:18px;align-items:center;flex-wrap:wrap;justify-content:flex-end}
.main-nav a{font-size:14px;padding:5px 0;transition:0.2s;opacity:0.85;white-space:nowrap}
.main-nav a:hover,.main-nav a.active{opacity:1;font-weight:600}

/* 首屏 */
.hero{padding:80px 0 60px;background-image:linear-gradient(rgba(0,0,0,0.72),rgba(0,0,0,0.86)),var(--hero-img,none);background-size:cover;background-position:center;background-color:#222;color:#fff;position:relative}
.hero-content{position:relative;z-index:2}
.hero-title{font-size:32px;margin-bottom:15px;line-height:1.35}
.hero-meta{display:flex;gap:20px;font-size:14px;opacity:0.85;margin-bottom:18px;flex-wrap:wrap}
.hero-desc{font-size:16px;margin-bottom:28px;opacity:0.92;max-width:700px}
.hero-btn{display:inline-block;padding:12px 30px;border-radius:4px;font-weight:600;transition:0.2s}
.hero-btn:hover{transform:translateY(-2px)}

/* 正文（平铺布局） */
.main-content{padding:50px 0 30px}
.article-content h2{font-size:24px;margin:40px 0 20px;padding-bottom:10px;border-bottom:2px solid;font-weight:700}
.article-content h3{font-size:18px;margin:25px 0 15px;font-weight:600}
.article-content p{margin-bottom:15px;font-size:16px;line-height:1.8}
.article-content ul,.article-content ol{margin:15px 0;padding-left:25px}
.article-content li{margin-bottom:8px}
.article-content strong{font-weight:700}
.article-content blockquote{padding:15px 20px;margin:20px 0;border-left:4px solid;background:rgba(0,0,0,0.04);border-radius:0 4px 4px 0}

/* 正文配图（居中全宽） */
.content-img{margin:26px 0;clear:both;overflow:hidden}
.content-img img{width:100%;height:auto;border-radius:6px;box-shadow:0 2px 10px rgba(0,0,0,0.12)}

/* 表格（所有模板共用，窄屏可横向滚动） */
.table-wrap{overflow-x:auto;margin:20px 0;-webkit-overflow-scrolling:touch}
.article-content table,.alt-content table,.section-text table{border-collapse:collapse;width:100%;min-width:340px;font-size:14px}
.article-content th,.article-content td,.alt-content th,.alt-content td,.section-text th,.section-text td{border:1px solid rgba(128,128,128,0.35);padding:9px 12px;text-align:left}
.article-content th,.alt-content th,.section-text th{font-weight:700}

/* FAQ 卡片（平铺布局） */
.article-content h3{padding:12px 15px;border-radius:6px 6px 0 0;margin-top:30px}
.article-content h3 + p{padding:15px;margin:0;border-radius:0 0 6px 6px}

/* 素材区 */
.gallery-section{margin:60px 0 40px}
.gallery-h2{font-size:24px;text-align:center;margin-bottom:30px;padding-bottom:10px;border-bottom:none}
.gallery-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:15px}
.gallery-item{border-radius:6px;overflow:hidden;box-shadow:0 2px 8px rgba(0,0,0,0.12);transition:0.2s;background:rgba(128,128,128,0.08)}
.gallery-item:hover{transform:translateY(-3px);box-shadow:0 6px 18px rgba(0,0,0,0.18)}
.gallery-item img{width:100%;height:100%;aspect-ratio:16/9;object-fit:cover;display:block;border-radius:0}

/* 页脚 */
.site-footer{padding:40px 0 30px;margin-top:50px;border-top:1px solid}
.footer-nav{display:flex;justify-content:center;flex-wrap:wrap;gap:20px;margin-bottom:20px;font-size:14px;opacity:0.85}
.footer-links{display:flex;justify-content:center;flex-wrap:wrap;gap:20px;margin-bottom:20px;padding-top:20px;border-top:1px solid;font-size:14px;opacity:0.75}
.footer-copyright{text-align:center;font-size:13px;opacity:0.65;line-height:1.8}

/* 响应式 */
@media(max-width:768px){
    .header-inner{flex-direction:column;gap:10px}
    .main-nav{gap:12px;flex-wrap:wrap;justify-content:center}
    .hero{padding:50px 0 40px}
    .hero-title{font-size:24px}
    .hero-meta{flex-direction:column;gap:6px}
    .article-content h2{font-size:20px}
    .gallery-grid{grid-template-columns:repeat(2,1fr)}
}