@charset "UTF-8";
/* tags.css - TAG聚合页 G4字母索引 */

/* ===== TAG页面Banner ===== */
.tags-banner{position:relative;padding:120px 0 80px;background:linear-gradient(135deg,#2C2815 0%,#4a4320 100%);margin-top:72px;text-align:center;overflow:hidden}
.tags-banner::before{content:"";position:absolute;inset:0;background:url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23D4AC0D' fill-opacity='0.05'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E")}
.tags-banner h1{font-size:42px;font-weight:900;color:#F9F3D8;margin-bottom:15px;position:relative}
.tags-banner p{font-size:16px;color:rgba(249,243,216,.7);position:relative}

/* ===== 字母索引 G4 ===== */
.letter-index{background:#fff;padding:25px 0;border-bottom:2px solid #D4AC0D;position:sticky;top:72px;z-index:100}
.letter-index-inner{display:flex;justify-content:center;flex-wrap:wrap;gap:6px}
.letter-index-inner a{display:flex;align-items:center;justify-content:center;width:38px;height:38px;background:#F9F3D8;border-radius:8px;font-size:15px;font-weight:700;color:#2C2815;transition:all .3s ease}
.letter-index-inner a:hover,.letter-index-inner a.active{background:#D4AC0D;color:#2C2815}

/* ===== TAG内容区 ===== */
.tags-section{padding:60px 0;background:#F9F3D8}

/* 字母分组 */
.letter-group{margin-bottom:50px}
.letter-group-header{display:flex;align-items:center;gap:20px;margin-bottom:25px;padding-bottom:15px;border-bottom:3px solid #D4AC0D}
.letter-group-header h2{width:50px;height:50px;background:#2C2815;color:#D4AC0D;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:24px;font-weight:900}
.letter-group-header span{font-size:14px;color:#888}

/* TAG网格 */
.tag-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:15px}
.tag-item{display:flex;align-items:center;justify-content:space-between;padding:14px 20px;background:#fff;border-radius:10px;transition:all .3s ease;border:1px solid rgba(212,172,13,.1)}
.tag-item:hover{background:#2C2815;border-color:#2C2815;transform:translateX(8px)}
.tag-item:hover .tag-name{color:#F9F3D8}
.tag-item:hover .tag-count{background:#D4AC0D;color:#2C2815}
.tag-name{font-size:15px;font-weight:600;color:#2C2815;transition:color .3s ease}
.tag-count{font-size:12px;font-weight:700;background:#F9F3D8;color:#888;padding:3px 10px;border-radius:15px;transition:all .3s ease}

/* TAG详情页 */
.tag-detail-header{text-align:center;margin-bottom:50px}
.tag-detail-header h2{font-size:36px;font-weight:900;color:#2C2815;margin-bottom:10px}
.tag-detail-header h2 span{color:#D4AC0D}
.tag-detail-header p{font-size:16px;color:#666}

/* ===== 响应式 ===== */
@media (max-width:768px){
.tags-banner{padding:100px 0 60px}
.tags-banner h1{font-size:32px}
.letter-index-inner a{width:32px;height:32px;font-size:13px}
.tag-grid{grid-template-columns:repeat(2,1fr)}
}