/* 채널 상세 페이지 레이아웃 (UI 토큰 기반) */

.cd-header {
    display: flex;
    align-items: center;
    gap: var(--s-3);
    padding: var(--s-3) var(--s-4);
    border-bottom: 1px solid var(--line);
    flex-shrink: 0;
}
.cd-header-info {
    display: flex;
    align-items: center;
    gap: var(--s-3);
    flex: 1;
    min-width: 0;
}
.cd-avatar {
    width: var(--s-8);
    height: var(--s-8);
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}
.cd-meta { display: flex; flex-direction: column; gap: var(--s-1); min-width: 0; }
.cd-title {
    font-size: var(--text-lg);
    font-weight: 700;
    color: var(--text);
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.cd-stats { display: flex; gap: var(--s-1); flex-wrap: wrap; }
.cd-header-actions { display: flex; gap: var(--s-1-5); flex-shrink: 0; }

.cd-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--s-2) var(--s-4);
    border-bottom: 1px solid var(--line);
    flex-shrink: 0;
}
.cd-sort { display: flex; gap: var(--s-1); }
.cd-sort-btn.active { color: var(--accent); background: var(--surface); }
.cd-total { font-size: var(--text-sm); color: var(--text-sub); }

.cd-body {
    flex: 1;
    overflow-y: auto;
    padding: var(--s-4);
}
.cd-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: var(--s-3);
}
.cd-item-card { border-radius: var(--radius, 12px); }

.cd-load-more {
    display: flex;
    justify-content: center;
    padding: var(--s-4) 0;
}