/* -npay */
[pay-case="-npay"] .paymentWrapper {
    --primary: #00DE5A;
    --primaryDataColor: #09AB49;/* 20260402 변수 분리 */
    /* --bgBtnColor: #09AB49; */
}

/* 결제 화면 > 결제하기 버튼 */
[pay-case="-npay"] .paymentWrapper .primaryButton {
    margin-top: 8px;
}
/* 결제 화면 > 결제하기 버튼 > 네이버 페이 외 결제 수단 선택 시 버튼 스타일 */
[pay-case="-npay"] .paymentWrapper .primaryButton:not(.-npay) {
    position: relative;
    background-color: var(--bgBtnColor, var(--bc1000));
}
/* 결제 화면 > 결제하기 버튼 > 네이버 페이 버튼 스타일 */
[pay-case="-npay"] .paymentWrapper .primaryButton.-npay {
    position: relative;
    background-color: #00DE5A !important;
}
[pay-case="-npay"] .paymentWrapper .primaryButton.-npay::after {
    content: '';
    display: block;
    position: absolute;
    right: 10px;
    top: -13px;
    width: 63px;
    height: 31px;
    background-image: url(https://ssl.nexon.com/s2/billing/cash/nexoncash_imgs/dip/inpay_renewal/icons/Npaybubble.svg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.2));
}
[pay-case="-npay"] .paymentWrapper .primaryButton.-npay span,
[pay-case="-npay"] .paymentWrapper .primaryButton.-npay em {
    color: #17191C;
}
[pay-case="-npay"] .paymentWrapper .primaryButton.-npay:disabled {
    background-color: #E3E6EC !important;
    opacity: 1;
}
[pay-case="-npay"] .paymentWrapper .primaryButton.-npay:disabled span,
[pay-case="-npay"] .paymentWrapper .primaryButton.-npay:disabled em {
    color: #BCC3CC;
}

/* 결제 화면 > -npay 배너 */
.paymentBanner:has(.carouselItem.-npay) {
    margin-top: 32px;
}
.carouselItem.-npay .carouselContent .itemTitle {
    overflow: hidden;
    position:relative;
    z-index: 20;
    font-size: 20px;
    font-weight: 700;
    line-height: 30px;
    display: -webkit-box;
    white-space: initial;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}
.carouselItem.-npay .carouselContent .itemTitle strong {
    color: #00DE5A;
}
.carouselItem.-npay .carouselItemWrapper .carouselImg {
    position: absolute;
    right: 0;
    top: 5px;
    z-index: 0;
    width: 200px;
    height: 100px;
}

/* 결제 화면 */
[pay-case="-npay"] .paymentWrapper .accShortData,
[pay-case="-npay"] .paymentWrapper .accShortData span {
    color: var(--primaryDataColor, --primary);
}
/* 결제 화면 > 결제 수단 > -npay 결제 */
[pay-case="-npay"] .paymentWrapper .infoBox.payMethod .grayTag {
    display: none;
}
[user-case="prime"] .paymentSection>*:not(:first-child){
    margin-top: 8px;
}

/* -------------   결제 완료   ------------- */
[pay-case="-npay"] .completeWrapper {
    --primaryDataColor: #09AB49;
}
[pay-case="-npay"] .earnAmount .numFont {
    color: var(--primaryDataColor, --primary);
}
[pay-case="-npay"][user-case="prime"] .completeHeader .mileagePlus span {
    color: #ECB617;
}


/* -------------   RESPONSIVE   ------------- */
/* ~ 1279 미만 */
@media screen and (max-width: 1279px) {
    /* 결제 화면 > -npay 배너 */
    [pay-case="-npay"] .carouselItem.-npay .carouselContent .itemTitle {
        font-size: 16px;
        line-height: 25px;
    }
}

/* ~ 768 미만 */
@media screen and (max-width: 767px) {
    /* 결제 화면 > 결제하기 버튼 */
    [pay-case="-npay"] .paymentWrapper  .primaryButton {
        margin-top: 36px !important;
    }
    /* 결제 화면 > 결제하기 버튼 > 네이버 페이 버튼 스타일 */
    [pay-case="-npay"] .paymentWrapper .primaryButton.-npay::after {
        right: 10px;
        top: -15px;
        width: 69px;
        height: 33px;
        background-image: url(https://ssl.nexon.com/s2/billing/cash/nexoncash_imgs/dip/inpay_renewal/icons/Npaybubble_mo.svg);
    }

    /* 결제 화면 > -npay 배너 */
    .paymentBanner:has(.carouselItem.-npay) {
        margin-top: 20px;
    }
    .carouselItem.-npay .carouselContent .itemTitle {
        font-size: 20px;
        line-height: 30px;
    }

    [user-case="prime"] .paymentSection>*:not(:first-child) {
        margin-top: 20px;
    }
}