/* ========================================
   Section6: Boopd AI
   ======================================== */
.boopd-ai-section {
    width: 100%;
    max-width: 1440px;
    height: clamp(870px, 87.92vw, 1266px);
    margin: 0 auto;
    background: white;
    position: relative;
    overflow: hidden;
}

.boopd-ai-container {
    position: relative;
    width: 100%;
    height: clamp(870px, 87.92vw, 1266px);
}

/* 텍스트 영역 */
.boopd-ai-text {
    position: absolute;
    left: 25.21%;
    top: clamp(142px, 14.31vw, 206px);
    width: 49.58%;
    height: auto;
}

.boopd-ai-subtitle {
    position: relative;
    width: 100%;
    height: auto;
    font-size: clamp(24px, 2.5vw, 36px);
    font-weight: 700;
    line-height: 1.33;
    color: #000;
    margin: 0 0 clamp(16px, 1.67vw, 24px) 0;
    text-align: center;
}

.boopd-ai-title {
    position: relative;
    width: 100%;
    height: auto;
    font-size: clamp(36px, 3.89vw, 56px);
    font-weight: 700;
    line-height: 1.29;
    color: #000;
    margin: 0;
    text-align: center;
}

/* 스마트폰 이미지 */
.boopd-phone-wrapper {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: clamp(330px, 33.33vw, 480px);
    width: clamp(345px, 34.72vw, 500px);
    height: clamp(477px, 48.06vw, 692px);
    z-index: 1;
}

.boopd-phone-wrapper img {
    width: 100%;
    height: auto;
    object-fit: contain;
    display: block;
}

/* 카드 롤링 컨테이너 */
.boopd-cards-container {
    position: absolute;
    left: -18.61%;
    top: clamp(572px, 57.71vw, 831px);
    width: 137.22%;
    height: clamp(236px, 23.75vw, 342px);
    overflow: hidden;
    z-index: 10;
}

.boopd-cards-track {
    display: flex;
    gap: clamp(7px, 0.69vw, 10px);
    animation: cardScroll 7s linear infinite;
}

/* 카드 */
.boopd-card {
    flex-shrink: 0;
    width: clamp(205px, 20.69vw, 298px);
    height: clamp(219px, 22.08vw, 318px);
    position: relative;
    overflow: hidden;
    border-radius: clamp(16px, 1.67vw, 24px);
}

.boopd-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    position: relative;
    z-index: 1;
}

.boopd-card p {
    position: absolute;
    left: clamp(6px, 0.56vw, 8px);
    top: clamp(166px, 16.74vw, 241px);
    width: clamp(195px, 19.58vw, 282px);
    height: clamp(46px, 4.65vw, 67px);
    font-size: clamp(16px, 1.67vw, 24px);
    font-weight: 700;
    line-height: 1.33;
    color: #000;
    text-align: center;
    margin: 0;
    padding: clamp(6px, 0.56vw, 8px) 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    background: white;
    box-sizing: border-box;
    border-radius: 0 0 clamp(16px, 1.67vw, 24px) clamp(16px, 1.67vw, 24px);
}

/* 카드 롤링 애니메이션 - PC */
@keyframes cardScroll {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-1838px);
    }
}

/* 카드 롤링 애니메이션 - 모바일 (149px + 16px gap) * 6 = 990px */
@keyframes scrollCards {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-990px);
    }
}

/* ========================================
   Boopd AI Mobile Styles
   ======================================== */
@media (max-width: 767px) {
    /* vw 반응형 (375px 기준) */
    .boopd-ai-section {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 auto !important;
        padding: 0 !important;
        background: white !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
        height: auto !important;
        position: relative !important;
    }

    .boopd-ai-container {
        display: block !important;
        width: 100% !important;
        position: relative !important;
        height: 160.53vw !important;
        padding-bottom: 25.6vw !important;
    }

    .boopd-ai-text {
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 3.73vw !important;
        width: 89.33vw !important;
        text-align: center !important;
        position: absolute !important;
        top: 0 !important;
        left: 5.33vw !important;
        height: auto !important;
    }

    .boopd-ai-subtitle {
        font-size: 5.87vw !important;
        font-weight: 700 !important;
        line-height: 1.36 !important;
        color: #000000 !important;
        text-align: center !important;
        width: 100% !important;
        margin: 0 !important;
        position: static !important;
        top: auto !important;
        left: auto !important;
        height: auto !important;
    }

    .boopd-ai-title {
        font-size: 7.47vw !important;
        font-weight: 700 !important;
        line-height: 1.36 !important;
        color: black !important;
        text-align: center !important;
        width: 100% !important;
        margin: 0 !important;
        position: static !important;
        top: auto !important;
        left: auto !important;
        height: auto !important;
    }

    .boopd-phone-wrapper {
        width: 70.13vw !important;
        height: 152vw !important;
        position: absolute !important;
        top: 34.67vw !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        z-index: 1 !important;
        overflow: hidden !important;
    }

    .boopd-phone-wrapper img {
        width: 100% !important;
        height: 100% !important;
        object-fit: contain !important;
        object-position: top !important;
    }

    .boopd-cards-container {
        display: block !important;
        width: 263.47vw !important;
        height: 45.6vw !important;
        position: absolute !important;
        top: 81.33vw !important;
        left: -81.6vw !important;
        overflow: visible !important;
        z-index: 2 !important;
    }

    .boopd-cards-track {
        display: flex !important;
        gap: 4.27vw !important;
        padding: 1.6vw !important;
        animation: scrollCards 20s linear infinite !important;
        width: max-content !important;
    }

    .boopd-card {
        flex-shrink: 0 !important;
        width: 39.73vw !important;
        height: 42.4vw !important;
        position: relative !important;
        overflow: hidden !important;
        border-radius: 2.67vw !important;
    }

    .boopd-card img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        display: block !important;
        position: relative !important;
        border-radius: 2.67vw !important;
    }

    .boopd-card p {
        position: absolute !important;
        left: 1.07vw !important;
        top: 32vw !important;
        width: 37.6vw !important;
        height: 9.07vw !important;
        background: rgba(255, 255, 255, 0.95) !important;
        border-radius: 2.13vw !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        font-size: 3.2vw !important;
        font-weight: 700 !important;
        line-height: 1.33 !important;
        color: black !important;
        text-align: center !important;
        margin: 0 !important;
        padding: 1.07vw !important;
        box-sizing: border-box !important;
    }
}