/** widgets/ui/collection — 색·격자 폭은 변수로만 노출한다. */
.w-collection {
    --w-collection-fg:      var(--site-text, #1f2937);
    --w-collection-muted:   var(--site-muted, #6b7280);
    --w-collection-border:  var(--site-border, #e5e7eb);
    --w-collection-min:     220px;   /* 격자 한 칸의 최소 폭 */
    --w-collection-gap:     0.875rem;
}

.w-collection__header {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    padding-bottom: 0.625rem;
    border-bottom: 2px solid var(--w-collection-border);
    margin-bottom: 1rem;
}

.w-collection__title {
    margin: 0;
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--w-collection-fg);
}

.w-collection__count { font-size: 0.8125rem; color: var(--w-collection-muted); }

.w-collection__items.is-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(var(--w-collection-min), 1fr));
    gap: var(--w-collection-gap);
}

.w-collection__items.is-list { display: block; }

.w-collection__empty {
    padding: 2.5rem 1rem;
    text-align: center;
    color: var(--w-collection-muted);
    font-size: 0.875rem;
}

/* 제목 아래·항목 위 슬롯 (분류 칩·필터) */
.w-collection__before { margin-bottom: 1rem; }

/* 제목 줄 오른쪽 버튼 (headerActions) — 좁은 화면에서는 다음 줄로 내려간다 */
.w-collection__header { flex-wrap: wrap; }
.w-collection__header-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-left: auto;
    align-self: center;
}