/* ========================================
   히어로 섹션 (Frame 245)
   ======================================== */
.hero-section {
    width: 100%;
    height: clamp(500px, 50vw, 720px);
    position: relative;
    background-image: url('../../images/hero-background.png');
    background-size: cover;
    background-position: center center;
    display: flex;
    align-items: flex-end;
    padding: clamp(60px, 6.67vw, 96px) 13.19%;
    margin-top: clamp(50px, 4.17vw, 60px);
}

.hero-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.20) 0%, rgba(0, 0, 0, 0.20) 100%);
    z-index: 1;
}

.hero-section .hero-content {
    position: relative;
    z-index: 2;
}

.hero-content {
    width: 100%;
    max-width: 73.61%;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: clamp(24px, 2.5vw, 36px);
}

.hero-title {
    font-size: clamp(36px, 3.89vw, 56px);
    font-weight: 700;
    line-height: 1.29;
    color: white;
}

.app-buttons {
    display: flex;
    gap: clamp(10px, 0.97vw, 14px);
}

.btn-app {
    padding: clamp(8px, 0.83vw, 12px) clamp(20px, 1.94vw, 28px);
    background: var(--Primary-Normal);
    border-radius: clamp(8px, 0.69vw, 10px);
    display: flex;
    align-items: center;
    gap: clamp(4px, 0.42vw, 6px);
    color: white;
    font-size: clamp(14px, 1.11vw, 16px);
    font-weight: 500;
    line-height: 1.5;
    transition: transform 0.2s ease;
}

.btn-app:hover {
    transform: translateY(-2px);
}

.app-icon {
    width: clamp(16px, 1.39vw, 20px);
    height: clamp(16px, 1.39vw, 20px);
}

/* ========================================
   Hero Mobile Styles
   ======================================== */
@media (max-width: 767px) {
    /* 모바일 히어로는 vw로 반응형 확대 */
    .hero-section {
        width: 100% !important;
        max-width: 100% !important;
        height: 144vw !important;
        margin: min(16vw, 60px) auto 0 !important;
        padding: 0 !important;
        background-image: url('../../images/Mobile Main.png') !important;
        background-size: cover !important;
        background-position: center !important;
        position: relative !important;
        display: block !important;
    }

    .hero-section::before {
        display: none !important;
    }

    /* 히어로 콘텐츠 - 가운데 정렬 */
    .hero-content {
        position: absolute !important;
        left: 50% !important;
        top: 60.53vw !important;
        transform: translateX(-50%) !important;
        width: 89.33vw !important;
        height: auto !important;
        max-width: none !important;
        padding: 0 !important;
        margin: 0 !important;
        gap: 0 !important;
        display: block !important;
        text-align: center !important;
    }

    /* 타이틀 */
    .hero-title {
        font-size: 7.47vw !important;
        font-weight: 700 !important;
        line-height: 1.36 !important;
        color: white !important;
        margin: 0 auto !important;
        width: 89.33vw !important;
        text-align: center !important;
    }

    /* 앱 버튼 영역 - 가운데 정렬 */
    .hero-content .app-buttons {
        position: absolute !important;
        left: 50% !important;
        top: 26.67vw !important;
        transform: translateX(-50%) !important;
        width: 76vw !important;
        height: 12.27vw !important;
        display: flex !important;
        gap: 2.67vw !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    /* App Store 버튼 */
    .hero-content .btn-appstore,
    .hero-content .btn-app:first-child {
        position: absolute !important;
        left: 0 !important;
        top: 0 !important;
        width: 36.8vw !important;
        height: 12.27vw !important;
        padding: 0 !important;
        margin: 0 !important;
        border-radius: 2.13vw !important;
        font-size: 3.73vw !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 1.6vw !important;
    }

    /* Google Play 버튼 */
    .hero-content .btn-playstore,
    .hero-content .btn-app:last-child {
        position: absolute !important;
        left: 39.47vw !important;
        top: 0 !important;
        width: 36.8vw !important;
        height: 12.27vw !important;
        padding: 0 !important;
        margin: 0 !important;
        border-radius: 2.13vw !important;
        font-size: 3.73vw !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 1.6vw !important;
    }

    .btn-app .app-icon {
        width: 4.8vw !important;
        height: 4.8vw !important;
    }
}