/* BASIC css start */
.tb-left > .MK-product-icons > img[src^="/images/common/present_ico_"] {
    display: none; /* 선물하기 아이콘만 숨기기 */
}

.cart-table-head {background-color: #f7f8f9;}




#cartWrap .wish-opt { color: #FFA500; }
#cartWrap .tit-space { margin-top:100px; }
/* 회원 등급 표시 */

/* 배송 메세지 */
#cartWrap .delivery { margin-top:30px; font-size:12px; color:#2e2e2e; text-align: center; }
/* 주문 컨트롤 버튼 */
#cartWrap .btn-order-ctrl { margin:40px 0 50px; text-align: center }
#cartWrap .btn-order-ctrl a { width:178px; height:58px; font-size:16px; line-height:58px; border-radius: 6px; }

#cartWrap .cart-ft2 { margin-top:20px; text-align: center; }
#nhn_btn { display: inline; }
#payco_order_btn { display: inline; }
#kakaopay_order_btn { display:inline; vertical-align:top; }
.__checkout_img_comm {visibility: unset !important;}

.tb-normal { font-weight:normal }
.realtime-btn-up {display:inline-block; width:26px; height:26px; text-indent:-9999em; vertical-align:top; background:url(//image.makeshop.co.kr/makeshop/d3/basic_simple/common/sp_qty.gif) 0 0 no-repeat; background-position:0 0;}
.realtime-btn-dw {display:inline-block; width:26px; height:26px; text-indent:-9999em; vertical-align:top; background:url(//image.makeshop.co.kr/makeshop/d3/basic_simple/common/sp_qty.gif) 0 0 no-repeat; background-position:0 -26px;}

#cartWrap .txt-spin { line-height:21px }

.cart-free-wrap { text-align:center; }
.cart-free-wrap .btn-list-open { position:relative; display:inline-block; width:250px; height:58px; line-height:58px; color:#000; font-size:14px; text-align:center; border:1px solid #000 }
.cart-free-wrap .btn-list-open span { position:absolute; top:27px; right:30px; display:inline-block; width:12px; height:6px; background:url(//image.makeshop.co.kr/makeshop/d3/basic_simple/common/sp_cart_free.gif) 0 0 no-repeat }
.cart-free-wrap .btn-list-open span.open { background-position:0 -6px }
.cart-free-wrap p { padding:5px 0 20px; font-size:12px }
.cart-free-wrap p span { font-weight:bold }
.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: 1em; text-align:center; }
.cart-free-wrap .btn-more span { display:inline-block; margin-left:5px; width:12px; height:6px; background:url(//image.makeshop.co.kr/makeshop/d3/basic_simple/common/sp_cart_free.gif) 0 -6px no-repeat; vertical-align:middle; }
.cart-free-wrap .list-wrap { overflow-x:hidden; overflow-y:auto; height:450px; padding:15px 14px 30px; margin-top:20px; border:1px solid #b7b7b7; display: none; }
.cart-free-wrap .list-wrap ul { display: table; table-layout: fixed; width:100%; margin: 0; padding: 0; *zoom:1 }
.cart-free-wrap .list-wrap ul:after { clear: both; content: ""; display: block; }
.cart-free-wrap .list-wrap ul li { word-wrap: break-word; word-break: keep-all; display: inline-block; vertical-align: top; width:24%; list-style: none; }
.cart-free-wrap .list-wrap ul li dl { margin:15px 15px 10px; }
.cart-free-wrap .list-wrap ul li dl dt { margin-bottom:13px; }
.cart-free-wrap .list-wrap ul li dl dt img { width:100%; height:auto; border:0; }
.cart-free-wrap .list-wrap ul li dl dd {}
.cart-free-wrap .list-wrap ul li dl dd strong { color:#f40000; }
.cart-free-wrap .list-wrap ul li dl dd a { display:inline-block; padding:5px 8px 3px; margin-top:8px; border:1px solid #999; color:#666; font-weight:bold; background:#fff; }

/* 하이브리드 옵션 */
.opt_dd img { vertical-align:top; }
.opt_dd .basket-option-detail { display:inline-block; vertical-align:top; }
.opt_dd .basket-option-detail .basket-option-dlist li { margin-bottom:7px; word-break:break-all; word-wrap:break-word; }
.opt_dd .basket-option-detail .basket-option-dlist li img { width:23px; height:23px; margin-right:8px; vertical-align:middle; }

/* IE7 Hack */
.cart-free-wrap .list-wrap ul li { *float:left }


/* 정기배송 탭 */
#cartWrap .cart-tab:after { clear: both; content: ""; display: block; }
#cartWrap .cart-tab { height:68px; margin:50px 0 0 3px; border-bottom:2px solid #000; }
#cartWrap .cart-tab li { float:left; width:50%; height:67px; margin-left:-6px; *margin-left:-7px; border:1px solid #d5d5d5; border-bottom:none; background:#f9f9f9; }
#cartWrap .cart-tab li:first-child { margin-left:0; }
#cartWrap .cart-tab li a { display:block; line-height:70px; font-weight:bold; color:#898989; font-size:18px; text-align:center; text-decoration:none; background:none; }
#cartWrap .cart-tab li.now { position:relative; z-index:1; height:68px; border:2px solid #000; border-bottom:none; background:#fff; }
#cartWrap .cart-tab li.now a { line-height:68px; color:#000; }


.MS_tb_delivery { z-index:10 }

/* 샵페이 바로구매 */
#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; }



















#mk-basket-order-btn {
    width: 220px !important;
    font-weight: bold;
}

#mk-basket-gift-btn {
    margin-left: 10px;
    background-color: #eee;
    border: 1px solid #ddd;
    font-weight: bold;
}














/* ========================================
   장바구니 수량 선택 영역

   상품 상세페이지의 수량 선택 UI와 동일하게 구성합니다.

   최대 크기 : 140 × 36px
   버튼 너비 : 좌우 각 34px
   입력 영역 : 남은 공간 자동 사용
======================================== */

.mk-cart-qty {
    display: inline-grid !important;
    grid-template-columns: 34px minmax(0, 1fr) 34px !important;

    width: 100% !important;
    max-width: 140px !important;
    height: 36px !important;
    margin: 0 auto !important;
    padding: 0 !important;

    background: #ffffff !important;
    border: 1px solid #dddddd !important;
    border-radius: 6px !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
    vertical-align: middle !important;
}

/* ========================================
   감소·증가 공통 버튼
======================================== */

.mk-cart-qty > .realtime-btn-dw,
.mk-cart-qty > .realtime-btn-up {
    display: block !important;
    width: 100% !important;
    height: 34px !important;
    margin: 0 !important;
    padding: 0 !important;

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

    border: 0 !important;
    box-sizing: border-box !important;
    overflow: hidden !important;

    text-indent: -9999px !important;
    cursor: pointer !important;
    user-select: none !important;
}

/* 감소 버튼 */
.mk-cart-qty > .realtime-btn-dw {
    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;
}

/* 증가 버튼 */
.mk-cart-qty > .realtime-btn-up {
    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;
}

/* 버튼 상태 */
.mk-cart-qty > .realtime-btn-dw:hover,
.mk-cart-qty > .realtime-btn-up:hover {
    background-color: #f7f7f7 !important;
}

.mk-cart-qty > .realtime-btn-dw:active,
.mk-cart-qty > .realtime-btn-up:active {
    background-color: #eeeeee !important;
}

/* ========================================
   수량 입력칸
======================================== */

.mk-cart-qty > .txt-spin {
    display: block !important;
    float: none !important;

    width: 100% !important;
    min-width: 0 !important;
    height: 34px !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;

    color: #111111 !important;
    background: #ffffff !important;

    border: 0 !important;
    border-left: 1px solid #dddddd !important;
    border-right: 1px solid #dddddd !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    box-sizing: border-box !important;
    outline: 0 !important;

    font-family: inherit !important;
    font-size: 18px !important;
    font-weight: 400 !important;
    line-height: 34px !important;
    text-align: center !important;

    appearance: none !important;
    -webkit-appearance: none !important;
}

/* 입력칸 선택 상태 */
.mk-cart-qty > .txt-spin:focus {
    box-shadow: inset 0 0 0 1px #111111 !important;
}






















/* ========================================
   간편결제 버튼 공통 정렬

   [적용 대상]
   .cart-ft2 안에 메이크샵이 출력하는 모든 결제수단

   [정렬 순서]
   HTML 가상태그에 작성된 순서를 그대로 사용

   대통령페이 → 카카오페이 → PAYCO
   → 네이버페이 → 앱 결제

   [배치 방식]
   - PC: 한 줄에 3개
   - 태블릿: 한 줄에 2개
   - 모바일: 한 줄에 1개

======================================== */

.cart-ft2,
.cart-ft2 * {
    box-sizing: border-box;
}

.cart-ft2 {
    display: grid;
    grid-template-columns: repeat(
        3,
        minmax(0, 320px)
    );
    justify-content: center;
    align-items: start;
    gap: 12px 5px;

    width: 100%;
    margin: 0 auto;
}


/*
 * .cart-ft2 바로 아래에 출력되는
 * 각 결제수단의 기존 float와 고정 너비를 해제합니다.
 *
 * display 속성은 변경하지 않으므로
 * 메이크샵에서 숨긴 결제수단은 계속 숨김 상태를 유지합니다.
 */
.cart-ft2 > * {
    float: none !important;
    clear: none !important;

    width: 100% !important;
    min-width: 0;
    max-width: 100%;

    margin: 0 !important;
}


/* 결제수단 내부 이미지와 iframe 넘침 방지 */
.cart-ft2 img,
.cart-ft2 iframe {
    max-width: 100%;
}


/* ========================================
   PAYCO 버튼 모양 조정

   - 상단 버튼 영역 높이 및 내부 여백
   - 안내 문구와 구매 버튼 위치
   - 하단 혜택 문구 스타일
======================================== */

.payco_checkout .payco_section {
    height: 59px !important;
    margin: 0 !important;
    padding: 0 4px;
}

.payco_checkout .payco_section_tit {
    margin-top: 13px !important;
}

.payco_checkout .payco_checkout_btn {
    top: 11px !important;
}

.payco_checkout.checkout_a1 .payco_checkout_btn {
    right: 4px;
}

.payco_checkout .payco_section_wrap {
    padding: 0 4px;
}

.payco_checkout .payco_section_ft {
    margin: 0;
    padding: 5px 0;

    border-top: 1px solid #eaecee;
}

.payco_checkout .payco_section_ft .payco_txt {
    font-size: 12px;
}

.payco_tooltip .payco_ico_arr {left: 74px;}
.payco_checkout.ta .payco_tooltip {bottom: 9px;}


/* PAYCO 내부 고정 너비 해제 */
#payco_order_btn,
#payco_order_btn .payco_checkout,
#payco_order_btn .payco_section,
#payco_order_btn .payco_section_wrap {
    width: 100% !important;
    max-width: none !important;
}


/* ========================================
   네이버페이 버튼 너비 조정
======================================== */

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


/* ========================================
   대통령페이 버튼 모양 구성

   - 메이크샵 원본 이미지는 삭제하지 않고 유지
   - 원본 이미지는 투명한 클릭 레이어로 사용
   - HTML 카드는 시각적인 디자인만 담당
   - 상단 검은 선
   - 좌측 브랜드 안내
   - 우측 대통령페이 구매 버튼
   - 왕관 아이콘
   - 하단 결제 혜택 문구
======================================== */

#shoppay_btn {
    width: 100%;
    min-width: 0;

    background: #ffffff;
    border-top: 2px solid #222222;

    text-align: left !important;
}

#shoppay_btn > a {
    position: relative;

    display: block;
    width: 100%;

    color: inherit;

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


/* ========================================
   메이크샵 대통령페이 원본 이미지

   - 원본 이미지를 DOM에서 삭제하지 않음
   - 원본 이미지에 연결된 클릭 이벤트 유지
   - 카드 전체를 덮는 투명 클릭 레이어로 사용
======================================== */

#shoppay_btn > a > img.mk-shoppay-original-button {
    position: absolute !important;
    inset: 0 !important;
    z-index: 10 !important;

    display: block !important;

    width: 100% !important;
    height: 100% !important;
    max-width: none !important;

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

    opacity: 0 !important;

    cursor: pointer;
    pointer-events: auto !important;
}


/*
 * 커스텀 HTML 카드는 디자인만 표시합니다.
 *
 * 실제 클릭 이벤트는 카드 위를 덮고 있는
 * 투명한 메이크샵 원본 이미지가 받습니다.
 */
#shoppay_btn .mk-shoppay-card,
#shoppay_btn .mk-shoppay-card * {
    pointer-events: none !important;
}


/* 대통령페이 전체 카드 */
.mk-shoppay-card {
    position: relative;
    z-index: 1;

    display: block;
    width: 100%;
    padding: 0 4px;

    background: #ffffff;

    text-align: left !important;
}


/* 상단 브랜드 안내 + 구매 버튼 */
.mk-shoppay-card__row {
    display: flex;
    align-items: center;
    gap: 5px;

    height: 59px;
}


/* 좌측 브랜드 안내 영역 */
.mk-shoppay-card__info {
    flex: 0 1 40%;
    min-width: 0;

    text-align: left !important;
}

.mk-shoppay-card__brand {
    display: block;
    margin: 0;

    color: #0d9691;

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

    text-align: left !important;
    white-space: nowrap;
}

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

    color: #222222;

    font-size: 10.5px;
    font-weight: bold;
    line-height: 1.3;
    letter-spacing: -0.9px;

    text-align: left !important;
    word-break: keep-all;
}


/* 우측 대통령페이 구매 버튼 */
.mk-shoppay-card__cta {
    flex: 1 1 auto;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;

    min-width: 0;
    min-height: 36px;
    padding: 0 9px;

    color: #ffffff;

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

    border-radius: 2px;

    text-align: center !important;
    white-space: nowrap;
}


/* 왕관 아이콘 */
.mk-shoppay-card__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
}

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

    width: 16px;
    height: auto;

    filter: brightness(0) invert(1);
}


/* 구매 버튼 문구 */
.mk-shoppay-card__label {
    overflow: hidden;
    min-width: 0;

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

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


/* 하단 혜택 문구 */
.mk-shoppay-card__benefit {
    overflow: hidden;

    margin: 0;
    padding: 5px 0;

    color: #666666;
    border-top: 1px solid #eaecee;

    font-size: 12px;
    line-height: 1.3;
    letter-spacing: -0.25px;

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

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


/* 마우스 호버 */
#shoppay_btn > a:hover .mk-shoppay-card__cta {
    background: linear-gradient(
        135deg,
        #0d8480 0%,
        #109690 45%,
        #16a59f 100%
    );
}


/* 버튼 클릭 */
#shoppay_btn > a:active .mk-shoppay-card__cta {
    background: linear-gradient(
        135deg,
        #0b7874 0%,
        #0d8581 45%,
        #149690 100%
    );
}


/* 키보드 포커스 */
#shoppay_btn > a:focus-visible {
    outline: 2px solid #129f9b;
    outline-offset: 2px;
}


/* ========================================
   간편결제 버튼 반응형 정렬
======================================== */

/* 태블릿: 한 줄에 2개 */
@media screen and (max-width: 799px) {
    .cart-ft2 {
        grid-template-columns: repeat(
            2,
            minmax(0, 1fr)
        );

        max-width: 520px;
    }
}


/* 모바일: 한 줄에 1개 */
@media screen and (max-width: 519px) {
    .cart-ft2 {
        grid-template-columns: minmax(0, 1fr);
        max-width: 260px;
    }
}
/* BASIC css end */