/* ========================================
   Section7: Membership
   ======================================== */
.membership-section {
    width: 100%;
    max-width: 1440px;
    height: auto;
    min-height: clamp(1200px, 120.42vw, 1734px);
    margin: 0 auto;
    background: white;
    padding: clamp(88px, 8.89vw, 128px) 13.19%;
}

.membership-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(88px, 8.89vw, 128px);
}

/* 상단 텍스트 */
.membership-header {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(16px, 1.67vw, 24px);
}

.membership-subtitle {
    font-size: clamp(24px, 2.5vw, 36px);
    font-weight: 700;
    line-height: 1.33;
    color: #000;
    text-align: center;
    margin: 0;
}

.membership-title {
    width: clamp(490px, 49.58vw, 714px);
    font-size: clamp(36px, 3.89vw, 56px);
    font-weight: 700;
    line-height: 1.29;
    color: #000;
    text-align: center;
    margin: 0;
}

/* 멤버십 카드 영역 */
.membership-cards {
    display: flex;
    gap: clamp(14px, 1.39vw, 20px);
}

.membership-card {
    width: clamp(360px, 36.11vw, 520px);
    padding: clamp(32px, 3.33vw, 48px) clamp(26px, 2.64vw, 38px);
    border-radius: clamp(14px, 1.39vw, 20px);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(24px, 2.5vw, 36px);
}

.membership-card.general {
    background: #DAF7F2;
}

.membership-card.agent {
    background: #DAF0FF;
}

.card-title {
    font-size: clamp(20px, 1.94vw, 28px);
    font-weight: 700;
    line-height: 1.36;
    color: #000;
    text-align: center;
    margin: 0;
}

/* 등급 리스트 */
.tier-list {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: clamp(8px, 0.83vw, 12px);
}

.tier-item {
    width: 100%;
    height: clamp(130px, 13.06vw, 188px);
    padding: clamp(16px, 1.67vw, 24px) clamp(20px, 1.94vw, 28px);
    background: white;
    border-radius: clamp(14px, 1.39vw, 20px);
    display: flex;
    align-items: center;
    gap: clamp(8px, 0.83vw, 12px);
}

.tier-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: clamp(3px, 0.28vw, 4px);
}

.tier-content h5 {
    font-size: clamp(24px, 2.5vw, 36px);
    font-weight: 700;
    line-height: 1.33;
    color: #000;
    margin: 0;
}

/* PC에서는 Silver/Gold 등 표시, Lv.1/Lv.2 숨김 */
.tier-name-pc {
    display: block;
}
.tier-name-mobile {
    display: none;
}

.tier-content p {
    font-size: clamp(12px, 1.04vw, 15px);
    font-weight: 500;
    line-height: 1.47;
    color: rgba(46, 47, 51, 0.88);
    margin: 0;
}

.tier-item img {
    width: clamp(58px, 5.83vw, 84px);
    height: clamp(56px, 5.63vw, 81px);
    object-fit: contain;
}

/* 버튼 */
.membership-btn {
    padding: clamp(8px, 0.83vw, 12px) clamp(20px, 1.94vw, 28px);
    background: #005BE0;
    border: none;
    border-radius: clamp(8px, 0.69vw, 10px);
    color: white;
    font-size: clamp(14px, 1.11vw, 16px);
    font-weight: 500;
    line-height: 1.5;
    display: flex;
    align-items: center;
    gap: clamp(4px, 0.42vw, 6px);
    cursor: pointer;
    transition: background 0.3s;
}

.membership-btn:hover {
    background: #0047B3;
}

.membership-btn svg {
    width: clamp(16px, 1.39vw, 20px);
    height: clamp(16px, 1.39vw, 20px);
}

/* ========================================
   Membership Mobile Styles
   ======================================== */
@media (max-width: 767px) {
    /* vw 반응형 (375px 기준) */
    .membership-section {
        display: block !important;
        width: 100% !important;
        height: auto !important;
        margin: 0 auto !important;
        padding: 0 5.33vw 25.6vw 5.33vw !important;
        background: white !important;
        box-sizing: border-box !important;
    }

    .membership-container {
        width: 89.33vw !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        gap: 9.6vw !important;
    }

    .membership-header {
        text-align: center !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 3.73vw !important;
    }

    .membership-subtitle {
        font-size: 5.87vw !important;
        font-weight: 700 !important;
        line-height: 1.36 !important;
        color: black !important;
        margin: 0 !important;
    }

    .membership-title {
        font-size: 7.47vw !important;
        font-weight: 700 !important;
        line-height: 1.36 !important;
        color: black !important;
    }

    .membership-cards {
        display: flex !important;
        flex-direction: column !important;
        gap: 6.4vw !important;
        width: 100% !important;
    }

    .membership-card.general {
        width: 89.33vw !important;
        background: #E6FCF3 !important;
        border-radius: 3.73vw !important;
        padding: 6.4vw 7.47vw !important;
        box-sizing: border-box !important;
        gap: 0 !important;
    }

    .membership-card.agent {
        width: 89.33vw !important;
        background: #E5F6FE !important;
        border-radius: 3.73vw !important;
        padding: 6.4vw 7.47vw !important;
        box-sizing: border-box !important;
        gap: 0 !important;
    }

    .membership-card .card-title {
        width: 100% !important;
        height: 8.53vw !important;
        font-size: 6.4vw !important;
        font-weight: 700 !important;
        line-height: 1.33 !important;
        color: black !important;
        margin: 0 !important;
        text-align: center !important;
    }

    .tier-list {
        width: 74.4vw !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 3.2vw !important;
        margin-top: 6.4vw !important;
    }

    .tier-item {
        width: 74.4vw !important;
        height: auto !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 0 !important;
        padding: 5.33vw 7.47vw !important;
        background: white !important;
        border-radius: 2.67vw !important;
        box-sizing: border-box !important;
    }

    .tier-content {
        width: 59.47vw !important;
        flex: none !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 1.07vw !important;
    }

    .tier-name-pc {
        display: none !important;
    }

    .tier-name-mobile {
        display: block !important;
        width: 59.47vw !important;
        height: 6.93vw !important;
        font-size: 4.8vw !important;
        font-weight: 700 !important;
        line-height: 1.44 !important;
        color: black !important;
        margin: 0 !important;
    }

    .tier-content h5 {
        font-size: 4.8vw !important;
        font-weight: 700 !important;
        line-height: 1.44 !important;
        margin: 0 !important;
    }

    .tier-content p {
        width: 59.47vw !important;
        font-size: 3.2vw !important;
        font-weight: 500 !important;
        line-height: 1.33 !important;
        color: rgba(46, 47, 51, 0.88) !important;
        margin: 0 !important;
    }

    .tier-item img.tier-icon {
        display: none !important;
    }

    .membership-btn {
        width: auto !important;
        height: auto !important;
        padding: 3.2vw 7.47vw !important;
        background: #005BE0 !important;
        color: white !important;
        border: none !important;
        border-radius: 2.67vw !important;
        font-size: 4.27vw !important;
        font-weight: 500 !important;
        line-height: 1.5 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 1.6vw !important;
        cursor: pointer !important;
    }
}