/* 全屏布局 */
.comic-detail-wrap{
    width: 100%;
    padding: 20px 0;
    margin: 0;
    color:#fff;
    display:flex;
    gap:25px;
    align-items:flex-start;
}
/* 左侧主内容区 */
.detail-main{
    flex:1;
    min-width:0;
    padding: 0 20px;
}
/* 右侧边栏 */
.detail-side{
    width:320px;
    flex-shrink:0;
    display:flex;
    flex-direction:column;
    gap:20px;
    padding-right: 20px;
}

/* 顶部封面信息 */
.detail-top{
    display:flex;
    gap:30px;
    margin-bottom:30px;
    flex-wrap:wrap;
}
.detail-cover{
    width:240px;
    height:320px;
    border-radius:10px;
    object-fit:cover;
}
.detail-info{
    flex:1;
    min-width:300px;
}
.detail-title{
    font-size:28px;
    font-weight:bold;
    margin-bottom:15px;
}
.detail-tag-group{
    display:flex;
    gap:10px;
    margin-bottom:15px;
    flex-wrap:wrap;
}
.detail-tag{
    background:#333;
    padding:4px 10px;
    border-radius:4px;
    font-size:12px;
    color:#ccc;
}
.detail-desc{
    line-height:1.8;
    color:#aaa;
    margin:20px 0;
}
.btn-group{
    display:flex;
    gap:15px;
    margin-top:20px;
}
.play-btn,.collect-btn{
    padding:10px 25px;
    border-radius:6px;
    border:none;
    font-size:14px;
    cursor:pointer;
}
.play-btn{
    background:#00c6ff;
    color:#fff;
}
.collect-btn{
    background:#ff6b00;
    color:#fff;
}

/* 章节列表 */
.chapter-box{
    background:#222;
    border-radius:8px;
    padding:20px;
    margin-bottom:30px;
}
.chapter-title{
    font-size:18px;
    margin-bottom:15px;
    padding-bottom:10px;
    border-bottom:1px solid #333;
}
.chapter-list{
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(110px,1fr));
    gap:12px;
}
.chapter-item{
    background:#333;
    text-align:center;
    padding:8px;
    border-radius:4px;
    cursor:pointer;
    transition:0.2s;
}
.chapter-item:hover{
    background:#00c6ff;
    color:#000;
}

/* 右侧模块通用 */
.side-box{
    background:#222;
    border-radius:8px;
    padding:15px;
}
.side-box h3{
    font-size:16px;
    margin-bottom:15px;
    padding-bottom:10px;
    border-bottom:1px solid #333;
    display:flex;
    justify-content:space-between;
}
.side-box h3 span{
    color:#aaa;
    font-size:12px;
    font-weight:normal;
}

/* 热门榜单 */
.rank-item{
    display:flex;
    align-items:center;
    margin-bottom:12px;
}
.rank-num{
    width:25px;
    height:25px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:13px;
    margin-right:10px;
    background:#333;
}
.rank-num.top1{background:#ff4757;}
.rank-num.top2{background:#ff7f50;}
.rank-num.top3{background:#ffa502;}
.rank-name{flex:1;font-size:14px;}
.rank-hot{font-size:12px;color:#ff6b00;}

/* 作者信息 */
.author-info{
    display:flex;
    align-items:center;
    gap:10px;
}
.author-avatar{
    width:40px;height:40px;border-radius:50%;object-fit:cover;
}
.author-name{font-size:14px;margin-bottom:3px;}
.author-desc{font-size:12px;color:#aaa;}

/* 短剧卡片 */
.drama-side-item{
    display:flex; gap:10px; margin-bottom:12px;
}
.drama-side-item img{
    width:70px; height:90px; border-radius:4px; object-fit:cover;
}
.drama-side-info{flex:1;}
.drama-side-title{font-size:14px;margin-bottom:4px;}
.drama-side-desc{font-size:12px;color:#aaa;}

/* 标签云 */
.tag-list{
    display:flex;flex-wrap:wrap;gap:8px;
}
.tag-list span{
    background:#333;padding:5px 10px;border-radius:15px;font-size:12px;color:#ccc;cursor:pointer;
}
.tag-list span:hover{background:#444;}


/* 相关推荐模块 */
.relate-box {
    background: #222;
    border-radius: 8px;
    padding: 20px;
    margin-top: 20px;
}
.section-title {
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 15px;
    padding-bottom: 10px;
    border-bottom: 1px solid #333;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #fff;
}
.section-title span {
    font-size: 12px;
    color: #aaa;
    font-weight: normal;
    cursor: pointer;
}

/* 卡片列表布局 */
.card-row {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 15px;
}

/* 漫画卡片 */
.anime-card {
    background: #333;
    border-radius: 6px;
    overflow: hidden;
    transition: transform 0.2s;
    cursor: pointer;
}
.anime-card:hover {
    transform: translateY(-3px);
}
.anime-card img {
    width: 100%;
    height: 220px;
    object-fit: cover;
    display: block;
}
.card-info {
    padding: 8px 10px;
}
.card-title {
    font-size: 14px;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}