/* ==========================================
   v12 썸네일 그리드 (Gapless Bundled Block) 전용 스타일
   ========================================== */

/* v12 묶음 간격 조절 */
div:has(> .collection-item-card-v12) {
    gap: 0.75rem !important;
    /* 12px 알맞은 간격 */
}

.collection-item-card-v12 {
    will-change: transform;
    transform: translateZ(0);
    /* max-width는 서브버전 클래스(.v12_0/.v12_1/.v12_2)가 담당 */
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    border: none !important;
    box-shadow: none !important;
}

/* v12 번들 묶음 카드 썸네일 구도 정렬 */
.collection-item-card-v12 img {
    object-position: center 10% !important;
}

/* inner div GPU 레이어 — hover repaint 격리 */
.collection-item-card-v12-inner {
    transform: translateZ(0);
    transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

/* v12.0: 미니멀 — 얇은 흰색 solid 보더 */
.collection-item-card-v12.v12_0 .collection-item-card-v12-inner,
.collection-item-card-v12:not(.v12_1):not(.v12_2) .collection-item-card-v12-inner {
    border: 1.5px solid rgba(255, 255, 255, 0.35) !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5) !important;
}

.collection-item-card-v12.v12_0 .collection-item-card-v12-inner:hover,
.collection-item-card-v12:not(.v12_1):not(.v12_2) .collection-item-card-v12-inner:hover {
    border-color: rgba(255, 255, 255, 0.7) !important;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.65), 0 0 12px rgba(255, 255, 255, 0.18) !important;
}

/* v12.1: 시안 글로우 — 미디엄 강도 */
.collection-item-card-v12.v12_1 .collection-item-card-v12-inner {
    border: 2px solid rgba(34, 211, 238, 0.5) !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.6), 0 0 14px rgba(34, 211, 238, 0.2) !important;
}

.collection-item-card-v12.v12_1 .collection-item-card-v12-inner:hover {
    border-color: rgba(34, 211, 238, 0.9) !important;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.75), 0 0 20px rgba(34, 211, 238, 0.4) !important;
}

/* v12.2: 골드 프리미엄 — 두꺼운 보더 + 강한 글로우 */
.collection-item-card-v12.v12_2 .collection-item-card-v12-inner {
    border: 2.5px solid rgba(251, 191, 36, 0.6) !important;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.65), 0 0 18px rgba(251, 191, 36, 0.25) !important;
}

.collection-item-card-v12.v12_2 .collection-item-card-v12-inner:hover {
    border-color: rgba(251, 191, 36, 1) !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.85), 0 0 28px rgba(251, 191, 36, 0.55) !important;
}


/* ==========================================
   v12 서브버전별 max-width (묶음 개수에 따라 너비 결정)
   v12.0 (2개 묶음) → .v12_0
   v12.1 (3개 묶음) → .v12_1
   v12.2 (4개 묶음) → .v12_2
   ========================================== */

/* v12.0: 2개 묶음 — 컴팩트 */
.collection-item-card-v12.v12_0,
.collection-item-card-v12:not(.v12_1):not(.v12_2) {
    max-width: 36rem;
    /* 576px */
}

/* v12.1: 3개 묶음 — 미디엄 */
.collection-item-card-v12.v12_1 {
    max-width: 48rem;
    /* 768px */
}

/* v12.2: 4개 묶음 — 와이드 */
.collection-item-card-v12.v12_2 {
    max-width: 64rem;
    /* 1024px */
}

@media (min-width: 1024px) {

    /* 1024px~1279px (lg): 모바일 대비 PC 2배 확대 적용 */
    .collection-item-card-v12.v12_0,
    .collection-item-card-v12:not(.v12_1):not(.v12_2) {
        max-width: 84rem;
        /* 1344px — 2개 묶음 PC */
    }

    .collection-item-card-v12.v12_1 {
        max-width: 104rem;
        /* 1664px — 3개 묶음 PC */
    }

    .collection-item-card-v12.v12_2 {
        max-width: 84rem;
        /* 1344px — 4개 2×2 PC */
    }
}

@media (min-width: 1280px) {

    /* 1280px+ (xl): PC 넓은 화면 2배 확대 */
    .collection-item-card-v12.v12_0,
    .collection-item-card-v12:not(.v12_1):not(.v12_2) {
        max-width: 96rem;
        /* 1536px — 2개 묶음 PC 넓은 화면 */
    }

    .collection-item-card-v12.v12_1 {
        max-width: 116rem;
        /* 1856px — 3개 묶음 PC 넓은 화면 */
    }

    .collection-item-card-v12.v12_2 {
        max-width: 96rem;
        /* 1536px — 4개 2×2 PC 넓은 화면 */
    }
}

/* v12.3: Reel-Shot 대형 풀뷰포트 중앙 정렬 */
.collection-item-card-v12.v12_3 {
    width: 100%;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
}

@media (min-width: 768px) {
    .collection-item-card-v12.v12_3 {
        max-width: 96rem;
    }
}

@media (min-width: 1024px) {
    .collection-item-card-v12.v12_3 {
        max-width: 128rem;
    }
}

@media (min-width: 1280px) {
    .collection-item-card-v12.v12_3 {
        max-width: 160rem;
    }
}

/* v12.3 스크롤바 숨김 유틸리티 */
.v12-3-strip::-webkit-scrollbar {
    display: none;
}

.v12-3-strip {
    -ms-overflow-style: none;
    scrollbar-width: none;
}