/* BASIC css start */
#basket .btn-wrap {padding:15px 10px;}
#basket .btn-wrap div {width:49%; float:left;}
#basket .btn-wrap div:last-child {float:right;}
#basket .all-select {border-top: 1px solid #4a4a4a; border-bottom: 1px solid #dedede; background-color: #f1f1f1; padding:10px;}
#basket .not_provider li {padding:20px 0;}
#basket .provider li {padding:20px 0;}
#basket figure {width:100%; display: table; box-sizing: border-box; padding:0 10px;}
#basket .basketLeft {width:110px; position:relative; float: left;}
#basket .basketLeft a {padding-right: 20px; margin-top: 20px; display:block;}
#basket .basketLeft .MS_input_checkbox {top:0; left:0; position:absolute;}
#basket .basketRight {padding-left:110px;}
#basket .basketRight p {color:#707070; margin-bottom:5px;}
#basket .basketRight .pname {border-bottom:1px solid #dedede;  padding-bottom: 4px;}

#basket .basketRight .pname a img[src^="/images/common/mo_present_ico_"] {
    display: none; /* 선물하기 아이콘만 숨기기 */
}

#basket .basketRight .pname .blue-delivery {background-color: #74a9e4; color:#fff; font-size:0.917em; padding: 1px 2px;}
#basket .basketRight .pname .red-delivery {background-color: #d674e4; color:#fff; font-size:0.917em; padding: 1px 2px;}
#basket .basketRight .pname .fa {float:right; margin-top: -6px;}
#basket .basketRight .fa-plus {background-color: #bbb; width: 35px; height: 35px; text-align: center; vertical-align: middle; line-height: 35px; color: #fff;}
#basket .basketRight .fa-minus {background-color: #bbb; width: 35px; height: 35px; text-align: center; vertical-align: middle; line-height: 35px; color: #fff;}
#basket .basketRight .btn_Black {margin-top:5px;}
#basket .basketRight .MS_select {width:100%;}
#basket .basketRight .amount-input {width:50px;}
#basket .price-each-info-top {text-align : right; border-top: 1px solid #cbcbcb; border-bottom: 1px solid #cbcbcb; background:#eaeaea; padding:10px;}
#basket .price-each-info-bottom {text-align : right; padding:10px; background:#eaeaea; border-bottom:1px solid #cbcbcb;}
#basket .price-total-info-top {border-top: 2px solid #464646; border-bottom: 1px solid #cbcbcb; background-color: #eaeaea; text-align : right;  padding:10px; margin-top:10px;}
#basket .price-total-info-bottom {border-bottom: 1px solid #cbcbcb; background-color: #eaeaea; text-align : right; padding:15px 10px; font-size:1.333em;}
#basket .price-total-info-bottom .txt-price {color : #f1191f; font-weight:bold;}
#basket .price-total-info-bottom .txt-reserve {color : #898989; font-size:0.688em;}
#basket .delivery-type { padding:15px 10px;}
#basket .order-btn {padding:0 15px;}
#basket .order-btn .btn_Red {background-color: #f1191f; border: 1px solid #f1191f;}
#basket .naver-checkout {margin-top: 20px;}
/* 빠른 결제 start */ /* 선물하기 버튼 추가 css 미사용 */
#basket .order-btn { display: flex; gap: 4px; padding: 0 15px; }
#basket .order-btn.use-gift.qorder-none { display: grid; grid-template-columns: 48px 1fr;} /* 선물하기 사용 + 빠른 결제 미사용 */
#basket .order-btn.use-gift.use-qorder { display: grid; grid-template-columns: 48px 1fr 1fr;} /* 선물하기 사용 + 빠른 결제 사용 */
#basket .order-btn.gift-none.use-qorder { display: grid; grid-template-columns: 1fr 1fr; } /* 선물하기 사용 + 빠른 결제 사용 */
#basket .order-btn a { display: flex; height: 48px; justify-content: center; align-items: center; margin: 2px 0; padding: 0; }
#basket .order-btn a.btn_Present { box-sizing : border-box; background: #fff; border: 1px solid #393939; font-size: 16px; }
#basket .order-btn a.btn_Blue { color: #fff; background: #2a68cc; }
/* 빠른 결제 end */

@media screen and (min-width:768px) {
 #basket .basketRight .btn_Black {width:315px; display:inline-block; vertical-align: middle; margin-top:0px;}
}

.cart-ft2 { display: block; text-align: center; padding: 0 15px; }

.cart-free-wrap { text-align:center; margin-bottom: 10px; }
.cart-free-wrap .btn-list-open { display:inline-block; width:90%; height:30px; line-height:30px; background:#585858; color:#fff; font-weight:bold; font-size: .75em; text-align:center; }
.cart-free-wrap p { padding:10px 0 15px; font-size: .75em; font-weight:bold; }
.cart-free-wrap p span { color:#f40000; }
.cart-free-wrap .btn-more { display:inline-block; width:94%; height:30px; line-height:30px; margin-top:10px; border:1px solid #383838; background:#fff; color:#383838; font-size: .75em; text-align:center; }
.cart-free-wrap .btn-more span { display:inline-block; width:8px; height:5px; margin-left:5px; background:url(/images/d3/m_04/h10_arr.gif) no-repeat 0 0; background-size:100% 100%; vertical-align:middle; }
.cart-free-wrap .list-wrap { overflow-x:hidden; padding:0 20px; margin-top:20px; display: none; }
.cart-free-wrap .list-wrap ul { width:100%; list-style:none; }
.cart-free-wrap .list-wrap ul:after { clear: both; content: ""; display: block; }
.cart-free-wrap .list-wrap ul li { float:left; width:33.3333%; height:180px; font-size: .7em; list-style:none; }
.cart-free-wrap .list-wrap ul li dl { margin:10px 10px 10px; }
.cart-free-wrap .list-wrap ul li dl dt { height:100px; margin-bottom:13px; }
.cart-free-wrap .list-wrap ul li dl dt img { width:100%; height:100%; }
.cart-free-wrap .list-wrap ul li dl dd {}

/* 하이브리드 옵션이미지 */
.basket-option-dlist li img { width:30px; height:30px; vertical-align:middle; }

/* 정기배송 탭 */
#basket .cart-tab { width:100%; height:32px; border-top:1px solid #464646; }
#basket .cart-tab:after { clear: both; content: ""; display: block; }
#basket .cart-tab li { float:left; width:50%; height:31px; border-bottom:1px solid #cecece; }
#basket .cart-tab li a { display:inline-block; width:100%; height:100%; color:#3b3b3b; font-size:12px; text-align:center; text-decoration:none; background:none; }
#basket .cart-tab li a span { display:block; height:18px; line-height:18px; margin-top:6px; }
#basket .cart-tab li:first-child a span { border-right:2px solid #e2e2e2; }
#basket .cart-tab li.now { border-bottom:1px solid var(--maincolor); }
#basket .cart-tab li.now a { font-weight:bold; color:var(--maincolor); }

/* 샵페이 바로구매 */
#productDetail #shoppay_btn { padding-top: 10px; } /* PC (공통) 상세페이지 전용 */
#cartWrap #shoppay_btn { display: inline; } /* PC (공통) 장바구니 전용 */
.shopdetail #shoppay_btn { padding-top:10px; } /* MO (4.0) 상세페이지 전용 */
#basket #shoppay_btn { margin-top:20px; } /* MO (4.0) 장바구니 전용 */
.shopdetail #shoppay_btn { text-align:center; } /* MO (파워팩) 상세페이지 전용 */
.basket #shoppay_btn { text-align:center; } /* MO (파워팩) 장바구니 전용 */

.shoppay_storebtn_bx,
.shoppay_storebtn_bx *,
.shoppay_button_box,
.shoppay_button_box * { display: inline-block !important; overflow: hidden; !important; float: none !important; position: static !important; top: auto !important; left: auto !important; margin: 0 !important; padding: 0 !important; border: 0 none !important; font-size: 11px !important; line-height:16px !important; font-family: '돋움',Dotum,Helvetica,sans-serif !important; text-align: left !important; text-decoration: none !important;  vertical-align: top !important; background: none !important; border-radius: 0 !important; }
.shoppay_button_box { width: auto !important; height: 100% !important; zoom: 1 !important; padding: 0 !important; border-top: 2px solid #2b2f3a !important; background-color: #fff !important; }
.shoppay_button { position: relative !important; margin: 0 !important; padding: 5px 0 5px 88px !important; zoom:1 !important; }
.shoppay_button .shoppay_blind { overflow: hidden !important; position: absolute !important; width: 1px !important; height: 1px !important; margin: -1px !important; padding: 0 !important; clip: rect(0 0 0 0) !important; }
.shoppay_text { display: block !important; *display: inline !important; position: absolute !important; top: 10px !important; left: 0 !important; width: 82px !important; height: 26px !important; margin: 0 !important; padding: 0 !important; background: url('/images/common/shoppay_sp_text.png') no-repeat !important; }
.shoppay_btn_list { *zoom: 1 !important; display: table !important; width: 100% !important; margin:0 !important; padding: 0 !important; table-layout: fixed !important; list-style: none !important; }
.shoppay_btn_list tbody { display: table-row-group !important; }
.shoppay_btn_list tr { display: table-row !important; }
.shoppay_btn_list .shoppay_btn_item { *width: 120px !important; }
.shoppay_btn_item { display: table-cell !important; height: 37px !important; margin: 0 !important; padding: 0 !important; text-align: left !important; }
.shoppay_btn_link { display: block !important; height: 35px !important; margin: 0 !important; padding: 0 !important; border: 1px solid #bfc4c7 !important; background-color: #fcfcfc !important; background-repeat: no-repeat !important; background-repeat: no-repeat !important; text-align: center !important; text-decoration: none !important; }
.shoppay_btn_item:first-child .shoppay_btn_link { margin: 0 !important; }
.shoppay_text { background-size: 82px auto !important; }
.shoppay_btn_link.shoppay_btn_pay { background-size: 133px auto !important; }
.shoppay_btn_link.shoppay_btn_pay { background-image: url('/images/common/shoppay_sp_payment.png') !important; background-position: 50% 0 !important; background-repeat: no-repeat !important; border-radius: 2px !important; }
.shoppay_btn_link.btn_blue { border-color: #025eea !important; background-color: #025eea !important; }
.shoppay_event { position: relative !important; width: 100% !important; margin: 0 !important; padding: 3px 0 0 0 !important; border: 0 none !important; border-top: 1px solid #e5e9ea !important; letter-spacing: -0.5px !important; }
.shoppay_event_tex t {display: block !important; *display: inline !important; overflow: hidden !important; *width: 100% !important; margin: 0 !important; padding: 5px 0 !important; letter-spacing: 0 !important; white-space: nowrap !important; *zoom: 1 !important; text-overflow: ellipsis !important; word-wrap: normal !important; }
.shoppay_event_text { padding: 0 !important; }
.shoppay_event_text .event_title { display: inline !important; margin: 0 5px 0 0 !important; padding: 0 !important; font-weight: normal !important; color: #015ce8 !important; vertical-align: middle !important; }
.shoppay_event .shoppay_event_text .event_link { display: inline !important; margin: 0 !important; padding: 0 !important; font-weight: normal !important; color: #727272 !important; text-decoration: none !important; vertical-align: middle !important; }
.shoppay_event .shoppay_event_text .event_link span { display: inline-block !important; margin: -1px 0 1px !important; vertical-align: middle !important; }
.shoppay_type_A_1 { width: 277px !important; height: 70px !important; }
.shoppay_type_A_2 { width: 296px !important; height: 84px !important; }
.shoppay_type_A_2 .shoppay_button { padding: 5px 0 5px 86px !important; }
.shoppay_type_A_2 .shoppay_text { top: 14px !important; }
.shoppay_type_A_2 .shoppay_btn_link { height: 45px !important; }
.shoppay_type_A_2 .shoppay_btn_link.shoppay_btn_pay { background-position: 50% -40px !important; }
.shoppay_type_A_3 { width: 338px !important; height: 84px !important; }
.shoppay_type_A_3 .shoppay_button { padding: 6px 0 6px 102px !important; }
.shoppay_type_A_3 .shoppay_text { top: 13px !important; height: 31px !important; background-position: 0 -31px !important; }
.shoppay_type_A_3 .shoppay_btn_link { height: 45px !important; }
.shoppay_type_A_3 .shoppay_btn_link.shoppay_btn_pay { background-position: 50% -40px !important; }

/* 빠른 결제 레이어 */
#quick-swipepay .layer { z-index: 200; }
#quick-swipepay .layer-wrap { position: fixed; bottom: 0; left: 0; width: 100%; padding: 15px 10px 0; box-sizing: border-box; background: #f6f6f6; color: #3b3b3b; }
#quick-swipepay .layer-wrap .swipepay-close { position: absolute; top: -40px; left: 50%; width: 40px; height: 40px; margin-left: -20px; font-size: 24px; color: #fff; background: none; border: 0; display: flex; justify-content: center; align-items: center; }
#quick-swipepay .layer-wrap .swipepay-addr { padding: 0 10px; border: 1px solid #e3e3e3; border-radius: 4px; background: #fff; text-align: left; }
#quick-swipepay .layer-wrap .swipepay-addr .addr-lst { padding: 14px 2px; border-top: 1px solid #e3e3e3; }
#quick-swipepay .layer-wrap .swipepay-addr .addr-lst:first-child { border-top: 0; }
#quick-swipepay .layer-wrap .swipepay-addr .addr-lst .addr-prd { display: flex; align-items: center; gap: 5px; position: relative; font-size: 11px; white-space: nowrap; }
#quick-swipepay .layer-wrap .swipepay-addr .addr-lst .addr-prd p.prd-tit { color: #3b3b3b !important; font-size: 14px !important; font-weight: bold; vertical-align: bottom; }
#quick-swipepay .layer-wrap .swipepay-addr .addr-lst .addr-prd p.prd-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; color: #777; }
#quick-swipepay .layer-wrap .swipepay-addr .addr-lst .addr-prd span { font-size: 11px; color: #777; }
#quick-swipepay .layer-wrap .swipepay-addr .addr-lst .addr-prd .addr-edit { position: absolute; top: -3px; right: 0; display: flex; justify-content: center; align-items: center; width: 40px; height: 24px; font-size: 11px; font-weight: bold; color: #3b3b3b; border: 1px solid #c6c6c6; background: #fff; box-sizing: border-box; line-height: 0; }
#quick-swipepay .layer-wrap .swipepay-addr .addr-lst .addr-prd.addr-detail span { color: #3b3b3b; }
#quick-swipepay .layer-wrap .swipepay-addr .addr-lst .addr-opt { margin-top: 6px; font-size: 11px; color: #777; }
#quick-swipepay .layer-wrap .swipepay-addr .addr-lst .addr-opt li { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
#quick-swipepay .layer-wrap .swipepay-addr .addr-lst .addr-opt li strong { font-size: 12px; color: #3b3b3b; }
#quick-swipepay .layer-wrap .swipepay-addr .addr-lst .addr-opt li p:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: inline-block; }
#quick-swipepay .layer-wrap .swipepay-addr .addr-lst .addr-opt li dl dt,
#quick-swipepay .layer-wrap .swipepay-addr .addr-lst .addr-opt li dl dd,
#quick-swipepay .layer-wrap .swipepay-addr .addr-lst .addr-opt li dl dd p { display: flex; align-items: center; gap: 5px; }
#quick-swipepay .layer-wrap .swipepay-addr .addr-lst .addr-opt li dl dd { display: none; }
#quick-swipepay .layer-wrap .swipepay-addr .addr-lst .addr-opt li dl dd.on { display: flex; }
#quick-swipepay .layer-wrap .swipepay-agree { position: relative; display: flex; justify-content: space-between; margin-top: 10px; padding-left: 2px; font-size: 11px; }
#quick-swipepay .layer-wrap .swipepay-agree label input[type=checkbox] { width: 13px !important; height: 13px !important; vertical-align: text-bottom; }
#quick-swipepay .layer-wrap .swipepay-agree .view-terms { padding: 0 2px; color: #888; text-decoration: underline; border: 0; background: none; }
#quick-swipepay .layer-wrap .swipepay-agree .layer-terms { position: absolute; bottom: -40px; left: 50%; width: 100%; margin-left: -50%; padding: 10px; border: 1px solid #909090; border-radius: 4px; background: #fff; box-sizing: border-box; }
#quick-swipepay .layer-wrap .swipepay-agree .layer-terms .terms-close { position: absolute; top: 8px; right: 10px; width: 20px; height: 20px; font-size: 20px; border: 0; background: none; }
#quick-swipepay .layer-wrap .swipepay-agree .layer-terms .terms-tit { padding-bottom: 10px; font-size: 13px; font-weight: bold; }
#quick-swipepay .layer-wrap .swipepay-agree .layer-terms table { table-layout: fixed; width: 100%; word-wrap: break-word; }
#quick-swipepay .layer-wrap .swipepay-agree .layer-terms table th,
#quick-swipepay .layer-wrap .swipepay-agree .layer-terms table td { padding: 5px; border: 1px solid #ddd; color: #777; }
#quick-swipepay .layer-wrap .swipepay-agree .layer-terms table th { font-weight: 400; background: #f8f8f8; }
#quick-swipepay .layer-wrap .swipepay-agree .layer-terms table td strong { color: #000; font-weight: bold; }
#quick-swipepay .layer-wrap .swipepay-total { display: flex; justify-content: space-between; padding: 16px 2px; font-size: 11px; }
#quick-swipepay .layer-wrap .swipepay-total strong { font-size: 14px; line-height: 18px; }
#quick-swipepay .layer-wrap .swipepay-total strong span { margin-left: 5px; font-size: 12px; font-weight: normal; color: #777; }
#quick-swipepay .layer-wrap .swipepay-total .total-price strong { font-size: 16px; color: #f1191f; vertical-align: bottom; }
#quick-swipepay .layer-wrap .swipepay-wide { position: relative; width: 100%; height: 48px; border-radius: 48px; color: #fff; font-size: 14px; font-weight: bold; overflow: hidden; box-sizing: border-box; background: #2a68cc; }
#quick-swipepay .layer-wrap .swipepay-wide .swipepay-text { position: absolute; top: 50%; left: 0; width: 100%; text-align: center; transform: translateY(-50%); pointer-events: none; user-select: none; }
#quick-swipepay .layer-wrap .swipepay-wide .swipepay-slider { display: flex; justify-content: center; align-items: center; width: 48px; height: 100%; color: #fff; font-size: 22px; border-radius: 48px; box-sizing: border-box; background: #1d498f; }
#quick-swipepay .layer-wrap .swipepay-wide .swipepay-completed { opacity: 0; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: #1d498f; box-sizing: border-box; border-radius: 48px; pointer-events: none; }
#quick-swipepay .layer-wrap .swipepay-order { display: flex; justify-content: center; align-items: center; padding: 8px 0 10px; text-decoration: underline; font-size: 11px; color: #888; }
/* 빠른 결제 레이어 */





















/* ========================================
   모바일 장바구니 간편결제 버튼 통합 디자인

   [적용 대상]
   - 대통령페이 : #shoppay_btn
   - PAYCO      : #payco_order_btn
   - 네이버페이 : .naver-checkout

   [디자인 기준]
   - 상품상세페이지 간편결제 버튼과 동일
   - 화면 폭에 맞게 100%
   - 최대 너비 500px
   - 네이버페이 기본 구조를 기준으로 정렬
======================================== */


/* ========================================
   공통 너비
======================================== */

#shoppay_btn,
#payco_order_btn,
.naver-checkout {
    width: 100% !important;
    max-width: 500px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}


/* ========================================
   간편결제 영역 상단 간격

   상품상세 .simplePay의 padding-top: 20px을
   장바구니에서는 첫 번째 버튼 margin으로 대체
======================================== */

#shoppay_btn {
    height: 95px;
    margin-top: 20px !important;
    padding-top: 10px;
    box-sizing: border-box;
    background: #ffffff;
}


/* PAYCO · 네이버페이 간격 */

#payco_order_btn,
.naver-checkout {
    height: 85px !important;
    margin-top: 10px !important;
}



/* ========================================
   대통령페이
======================================== */

#shoppay_btn,
#shoppay_btn * {
    box-sizing: border-box;
}


/* 기존 메이크샵 결제 링크 */

#shoppay_btn > a {
    position: relative;

    display: block;

    width: 100%;
    height: 85px;

    margin: 0;
    padding: 0;

    color: inherit;
    text-align: left;
    text-decoration: none !important;
}


/*
 * 메이크샵 원본 이미지
 *
 * 삭제하지 않고 전체 영역을 덮는
 * 투명 클릭 레이어로 유지합니다.
 */

#shoppay_btn .mk-shoppay-original-button {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;

    display: block;

    width: 100%;
    height: 100%;

    margin: 0;
    padding: 0;

    opacity: 0;

    z-index: 10;
}


/* 대통령페이 전체 카드 */

#shoppay_btn .mk-shoppay-card {
    position: relative;

    width: 100%;
    height: 85px;

    margin: 0;
    padding: 0;

    background: #ffffff;

    border-top: 2px solid #222222;

    text-align: left;

    pointer-events: none;

    z-index: 1;
}


/* 상단 본문 */

#shoppay_btn .mk-shoppay-card__row {
    display: flex;
    align-items: center;

    width: 100%;
    height: 62px;

    padding: 10px 0;

    gap: 8px;
}


/* 좌측 안내 영역 */

#shoppay_btn .mk-shoppay-card__info {
    flex: 0 0 95px;

    width: 95px;
    min-width: 95px;

    text-align: left;
}


/* 대통령페이 */

#shoppay_btn .mk-shoppay-card__brand {
    display: block;

    margin: 0;

    color: #0d9691;

    font-size: 12px;
    font-weight: 900;
    line-height: 1.2;

    letter-spacing: -0.3px;
}


/* 설명 */

#shoppay_btn .mk-shoppay-card__desc {
    margin: 3px 0 0;

    color: #222222;

    font-size: 10.5px;
    font-weight: 700;
    line-height: 1.3;

    letter-spacing: -0.9px;

    word-break: keep-all;
}


/* 우측 대통령페이 결제 버튼 */

#shoppay_btn .mk-shoppay-card__cta {
    display: flex;
    flex: 1 1 auto;

    align-items: center;
    justify-content: center;

    min-width: 0;
    height: 42px;

    padding: 0 9px;

    gap: 6px;

    border-radius: 2px;

    background:
        linear-gradient(
            135deg,
            #0f8f8a 0%,
            #129f9b 45%,
            #18b0aa 100%
        );

    color: #ffffff;
}


/* 아이콘 */

#shoppay_btn .mk-shoppay-card__icon {
    display: flex;
    flex: 0 0 auto;

    align-items: center;
    justify-content: center;

    width: 16px;
}


#shoppay_btn .mk-shoppay-card__icon img {
    display: block;

    width: 16px;
    height: auto;
}


/* 버튼 문구 */

#shoppay_btn .mk-shoppay-card__label {
    min-width: 0;

    overflow: hidden;

    color: #ffffff;

    font-size: 12px;
    font-weight: 700;
    line-height: 1;

    letter-spacing: -0.3px;

    white-space: nowrap;
    text-overflow: ellipsis;
}


/* 하단 혜택 문구 */

#shoppay_btn .mk-shoppay-card__benefit {
    width: 100%;
    height: 21px;

    margin: 0;
    padding: 2px 0;

    border-top: 1px solid #eaecee;

    overflow: hidden;

    color: #666666;

    font-size: 12px;
    font-weight: 400;
    line-height: 15.6px;

    letter-spacing: -0.25px;

    white-space: nowrap;
    text-overflow: ellipsis;
}


/* 혜택 앞부분 강조 */

#shoppay_btn .mk-shoppay-card__benefit strong {
    color: #0d9691;
    font-weight: 400;
}



/* ========================================
   PAYCO

   PAYCO 원본 버튼 구조 및 클릭 이벤트는
   변경하지 않고 크기와 정렬만 조정합니다.
======================================== */
#payco_order_btn {
    box-sizing: border-box !important;
}


/* PAYCO 전체 */

#payco_order_btn .payco_checkout {
    position: relative !important;

    width: 100% !important;
    height: 85px !important;

    margin: 0 !important;

    background: #ffffff !important;

    box-sizing: border-box !important;
}


/* 상단 영역 */

#payco_order_btn .payco_section {
    position: relative !important;

    width: 100% !important;
    height: 64px !important;

    box-sizing: border-box !important;
}


/* 좌측 PAYCO 안내 */

#payco_order_btn .payco_section > em {
    width: 95px !important;
    height: 60px !important;

    left: 0 !important;
    top: 2px !important;

    background-size: 85px auto !important;
}


/* PAYCO 결제 버튼 */

#payco_order_btn .payco_checkout_btn {
    top: 11px !important;
    right: 0 !important;
    left: 103px !important;

    width: calc(100% - 103px) !important;
    height: 42px !important;

    box-sizing: border-box !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.payco_checkout.ta .payco_btn_txt {
    margin: 0;
}


/* PAYCO 하단 혜택 */

#payco_order_btn .payco_section_wrap {
    width: 100% !important;
    height: 21px !important;

    box-sizing: border-box !important;
}


#payco_order_btn .payco_section_ft {
    width: 100% !important;
    height: 21px !important;

    padding: 3px 4px 4px !important;

    box-sizing: border-box !important;

    overflow: hidden !important;
}


#payco_order_btn .payco_txt {
    display: block !important;

    width: 100% !important;

    overflow: hidden !important;

    white-space: nowrap !important;
    text-overflow: ellipsis !important;
}



/* ========================================
   네이버페이

   네이버가 생성하는 NC_ID 값은 매번 달라질 수 있으므로
   동적 ID를 사용하지 않고 공식 클래스만 지정합니다.
======================================== */

.naver-checkout {
    box-sizing: content-box;
}


/* 전체 네이버페이 영역 */

.naver-checkout #nhn_btn,
.naver-checkout .npay_storebtn_bx,
.naver-checkout .npay_button_box {
    width: 100% !important;
    max-width: none !important;

    margin: 0 !important;
}


/* 전체 높이 */

.naver-checkout #nhn_btn,
.naver-checkout .npay_storebtn_bx {
    height: 85px !important;
}


/* 네이버페이 박스 */

.naver-checkout .npay_button_box {
    height: 85px !important;

    background: #ffffff !important;

    overflow: hidden !important;
}


/*
 * 네이버 기본 구조
 *
 * 좌측 안내 95px
 * 간격       8px
 * 우측 버튼  나머지 전체
 */

.naver-checkout .npay_button {
    position: relative !important;

    width: calc(100% - 103px) !important;
    height: 42px !important;

    padding:
        11px
        0
        11px
        103px !important;

    overflow: hidden !important;
}


/* 좌측 네이버 안내 */

.naver-checkout .npay_text {
    top: 11px !important;
    right: auto !important;
    left: 0 !important;

    width: 95px !important;
    height: 42px !important;

    overflow: hidden !important;
}


/* 실제 네이버페이 버튼 영역 */

.naver-checkout .npay_btn_list {
    width: 100% !important;
    height: 42px !important;
}


.naver-checkout .npay_btn_item {
    width: 100% !important;
    height: 42px !important;
}


/*
 * border 1px × 좌우를 포함해
 * 부모 폭과 정확히 일치시킵니다.
 */

.naver-checkout .npay_btn_link {
    width: calc(100% - 2px) !important;
    height: 40px !important;

    line-height: 40px !important;
}


/* 네이버페이 이벤트 영역 */

.naver-checkout .npay_event {
    width: calc(100% - 40px) !important;
    height: 25px !important;

    padding-right: 40px !important;

    overflow: hidden !important;
}


/* 이벤트 문구 */

.naver-checkout .npay_event_text {
    width: 100% !important;

    overflow: hidden !important;

    white-space: nowrap !important;
    text-overflow: ellipsis !important;
}


/* 이벤트 다음 버튼 */

.naver-checkout .npay_more {
    right: 0 !important;
    left: auto !important;
}

























/* ========================================
   모바일 장바구니 수량 컨트롤
   상품상세 .MK_qty-ctrl 디자인과 동일하게 적용

   [구조]
   - 감소 버튼 : 30px
   - 수량 입력 : 60px
   - 증가 버튼 : 30px
   - 전체 크기 : 122px × 30px

   기존 수량 변경 함수는 그대로 유지하고
   CSS로 모양과 위치만 변경
======================================== */


/* ----------------------------------------
   전체 수량 컨트롤 영역

   기존 <p> 안의 "수량 :" 텍스트는
   font-size: 0으로 시각적으로 숨김
---------------------------------------- */

p:has(> input.amount-input) {
    position: relative !important;

    width: 122px !important;
    height: 30px !important;

    margin: 0 !important;
    padding: 0 !important;

    box-sizing: border-box !important;

    background: #ffffff !important;

    border: 1px solid #dddddd !important;
    border-radius: 4px !important;

    /* "수량 :" 텍스트 숨김 */
    font-size: 0 !important;
    line-height: 0 !important;

    white-space: nowrap !important;
}


/* ----------------------------------------
   수량 입력칸
---------------------------------------- */

p:has(> input.amount-input) > input.amount-input {
    position: absolute !important;
    top: 0 !important;
    left: 30px !important;

    display: block !important;
    float: none !important;

    width: 60px !important;
    height: 28px !important;

    margin: 0 !important;
    padding: 0 !important;

    box-sizing: border-box !important;

    background: #ffffff !important;

    /* 가운데 입력칸 양쪽 구분선 */
    border: 0 !important;
    border-left: 1px solid #dddddd !important;
    border-right: 1px solid #dddddd !important;

    border-radius: 0 !important;

    color: #111111 !important;

    font-size: 14px !important;
    font-weight: 400 !important;
    line-height: 28px !important;

    text-align: center !important;
    vertical-align: middle !important;

    outline: none !important;
}


/* ----------------------------------------
   증가 / 감소 버튼 공통
---------------------------------------- */

p:has(> input.amount-input) > a {
    position: absolute !important;
    top: 0 !important;

    display: block !important;

    width: 30px !important;
    height: 30px !important;

    margin: 0 !important;
    padding: 0 !important;

    box-sizing: border-box !important;

    border: 0 !important;
    border-radius: 0 !important;

    background-color: transparent !important;
    background-position: 50% 50% !important;
    background-repeat: no-repeat !important;
    background-size: 12px !important;

    text-decoration: none !important;

    cursor: pointer !important;
}


/* ----------------------------------------
   증가 버튼 (+)

   HTML상 첫 번째 <a>가 증가 버튼
---------------------------------------- */

p:has(> input.amount-input) > a:first-of-type {
    left: 90px !important;
    right: auto !important;

    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' stroke='%23111111' stroke-width='3' stroke-linecap='butt'%3E%3Cline x1='12' y1='4' x2='12' y2='20'/%3E%3Cline x1='4' y1='12' x2='20' y2='12'/%3E%3C/svg%3E") !important;
}


/* ----------------------------------------
   감소 버튼 (-)

   HTML상 두 번째 <a>가 감소 버튼이지만
   상품상세와 동일하게 왼쪽으로 이동
---------------------------------------- */

p:has(> input.amount-input) > a:last-of-type {
    left: 0 !important;
    right: auto !important;

    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' stroke='%23111111' stroke-width='3' stroke-linecap='butt'%3E%3Cline x1='4' y1='12' x2='20' y2='12'/%3E%3C/svg%3E") !important;
}


/* ----------------------------------------
   기존 Font Awesome 아이콘 숨김

   클릭은 부모 <a>가 담당하므로
   수량 변경 기능에는 영향 없음
---------------------------------------- */

p:has(> input.amount-input) > a > span {
    display: none !important;
}
/* BASIC css end */