/* BASIC css start */
/* =========================================================
   장바구니 (리뉴얼)
   - 색은 공통 CSS의 --b-* 변수
   - Makeshop 이 쓰는 id / class (basket, cart-free-wrap, cart-ft2, order-btn 등)는 그대로 두고 모양만 바꿈
   - 이름에 ad / banner 가 들어간 class 는 쓰지 않음 (광고차단 앱 대비)
   ========================================================= */
.mct {padding-bottom:12px;}
.mct [hidden] {display:none !important;}
.mct h3, .mct h4 {margin:0; padding:0; background:none; border:0;}

/* 아래 고정 주문 바 만큼 여백 (이 화면은 하단 탭바 대신 주문 바를 보여줌) */
html.mct-on body, html.mct-on.mh-notab body {padding-bottom:calc(76px + env(safe-area-inset-bottom));}
html.mct-on .section_fixedFooter {bottom:calc(88px + env(safe-area-inset-bottom));}

/* 머리말 + 단계 */
.mct-head {display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:8px 12px; padding:18px 16px 12px;}
.mct-title {font-size:20px; font-weight:900; line-height:1.3; color:var(--b-ink);}
.mct-count {display:inline-block; min-width:22px; height:22px; margin-left:2px; padding:0 7px; border-radius:11px; background:var(--b-ink); color:#fff; font-family:'Roboto',sans-serif; font-size:12px; font-weight:700; line-height:22px; text-align:center; letter-spacing:0; vertical-align:3px; box-sizing:border-box;}
.mct-steps {display:flex; align-items:center; gap:4px; margin:0; padding:0; font-size:11.5px; color:#9aa5aa;}
.mct-steps li {display:flex; align-items:center; gap:3px;}
.mct-steps li + li:before {content:""; width:8px; height:1px; margin-right:3px; background:#c3ccd0;}
.mct-steps span {display:inline-flex; align-items:center; justify-content:center; width:16px; height:16px; border-radius:8px; background:#e6ebed; color:#7b868b; font-family:'Roboto',sans-serif; font-size:10px; font-weight:700;}
.mct-steps li.on {color:var(--b-ink); font-weight:700;}
.mct-steps li.on span {background:var(--b-point); color:#fff;}

/* 일반구매 / 정기배송 */
.mct-tabs .cart-tab {display:flex; height:auto; margin:0 16px 12px; padding:4px; border:0; border-radius:12px; background:var(--m-gray);}
.mct-tabs .cart-tab li {float:none; flex:1; width:auto; height:auto; border:0;}
.mct-tabs .cart-tab li a {display:block; height:38px; line-height:38px; border-radius:9px; font-size:14px; font-weight:500; color:var(--b-mute); text-align:center;}
.mct-tabs .cart-tab li a em {font-style:normal; font-family:'Roboto',sans-serif;}
.mct-tabs .cart-tab li.now {border:0;}
.mct-tabs .cart-tab li.now a {background:#fff; color:var(--b-ink); font-weight:700; box-shadow:0 1px 3px rgba(31,42,48,.12);}

/* 회원 등급 */
.mct-member {margin:0 16px 12px; padding:10px 14px; border-radius:12px; background:var(--b-soft); font-size:13px; line-height:1.6; color:var(--b-ink);}
.mct-member strong {font-weight:700;}
.mct-member em {font-style:normal; font-weight:700; color:var(--b-point);}
.mct-member-sub {margin-top:2px; font-size:12px; color:var(--b-mute);}

/* 무료배송까지 남은 금액 */
.mct-freebar {margin:0 16px 12px; padding:12px 14px; border:1px solid var(--b-line); border-radius:12px; background:#fff;}
.mct-freebar-txt {font-size:13.5px; line-height:1.5; color:var(--b-ink);}
.mct-freebar-txt strong {font-weight:700; color:var(--b-point);}
.mct-freebar-track {height:6px; margin-top:8px; border-radius:3px; background:#e6ebed; overflow:hidden;}
.mct-freebar-fill {display:block; width:0; height:100%; border-radius:3px; background:var(--b-point); -webkit-transition:width .3s; transition:width .3s;}
.mct-freebar.is-done {border-color:transparent; background:var(--b-soft);}
.mct-freebar.is-done .mct-freebar-txt {font-weight:700; color:var(--b-point);}
.mct-freebar.is-done .mct-freebar-track {display:none;}

/* 선택 도구 */
.mct-tools {display:flex; align-items:center; justify-content:space-between; gap:8px; padding:10px 16px; border-top:8px solid var(--m-gray); border-bottom:1px solid var(--b-line);}
.mct .mct-all {display:flex; align-items:center; gap:6px; margin:0; padding:0; border:0; background:none; font-size:14px; font-weight:500; color:var(--b-ink);}
.mct .mct-all input {margin:0;}
.mct .mct-tool-btns {display:flex; gap:6px; padding:0;}
.mct .mct-tool-btns div {float:none; width:auto;}
.mct-tool {display:inline-flex; align-items:center; height:30px; padding:0 11px; border:1px solid var(--m-line2); border-radius:15px; background:#fff; font-size:12.5px; color:var(--b-ink);}
.mct-tool:active {background:var(--m-gray);}

/* 상품 */
.mct-list {margin:0; padding:0;}
.mct-item {padding:16px; border-bottom:1px solid var(--b-line); list-style:none;}
.mct-row {display:flex; align-items:flex-start; gap:10px;}
.mct-chk {flex:none; padding-top:2px;}
.mct-chk input {margin:0;}
.mct-thumb {flex:none; width:84px; height:84px; border-radius:var(--m-r-s); overflow:hidden; background:var(--m-gray);}
.mct-thumb img {display:block; width:100%; height:100%; object-fit:cover;}
.mct-info {flex:1; min-width:0;}
.mct-name-row {display:flex; align-items:flex-start; gap:4px;}
.mct-name {flex:1; min-width:0; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; font-size:14px; font-weight:500; line-height:1.45; color:var(--b-ink); word-break:break-all;}
.mct-del {flex:none; display:flex; align-items:center; justify-content:center; width:32px; height:32px; margin:-6px -8px 0 0; border-radius:16px; color:#8a969b;}
.mct-del:active {background:var(--m-gray); color:var(--b-ink);}
.mct-opt {margin-top:6px; padding:6px 8px; border-radius:6px; background:var(--m-gray); font-size:12px; line-height:1.55; color:var(--b-mute); word-break:break-all;}
.mct-opt p, .mct-opt li, .mct-opt dd, .mct-opt dt {margin:0; padding:0; list-style:none;}
.mct-opt select {width:100%; height:38px; font-size:16px;}
.basket-option-dlist li img {width:30px; height:30px; border-radius:4px; vertical-align:middle;}
.mct-opt-edit {display:inline-flex; align-items:center; height:28px; margin-top:6px; padding:0 10px; border:1px solid var(--m-line2); border-radius:14px; background:#fff; font-size:12px; color:var(--b-ink); cursor:pointer;}
.mct-meta {display:flex; flex-wrap:wrap; align-items:center; gap:2px 10px; margin-top:6px; font-size:12px; line-height:1.5; color:var(--b-mute);}
.mct-meta-item {display:inline-flex; align-items:center; gap:3px; color:var(--b-mute);}
.mct-ship span {color:var(--b-ink);}
.mct-mtag {display:inline-block; padding:0 5px; border-radius:4px; background:var(--b-soft); color:var(--b-point); font-size:10.5px; font-style:normal; font-weight:700; line-height:1.6;}

.mct-bottom {display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:12px; padding-left:122px;}
.mct-step {display:inline-flex; align-items:center; border:1px solid var(--m-line2); border-radius:10px; overflow:hidden; background:#fff;}
.mct-step-btn {display:flex; align-items:center; justify-content:center; width:38px; height:36px; color:var(--b-ink);}
.mct-step-btn:active {background:var(--m-gray);}
.mct .mct-step input {width:46px !important; height:36px !important; margin:0 !important; padding:0 !important; border:0 !important; border-left:1px solid var(--b-line) !important; border-right:1px solid var(--b-line) !important; border-radius:0 !important; text-align:center !important; font-family:'Roboto',sans-serif; font-size:16px; -moz-appearance:textfield;}
.mct .mct-step input::-webkit-inner-spin-button, .mct .mct-step input::-webkit-outer-spin-button {-webkit-appearance:none; margin:0;}
.mct-price {flex:none; font-size:13px; color:var(--b-ink); text-align:right;}
.mct-price strong {font-family:'Roboto','Noto Sans KR',sans-serif; font-size:16px; font-weight:700; letter-spacing:0;}

/* 빈 장바구니 */
.mct-empty {margin:0; padding:56px 24px 64px; border-top:8px solid var(--m-gray); text-align:center; color:#b6c0c4;}
.mct-empty svg {display:block; margin:0 auto 14px;}
.mct-empty-tit {font-size:16px; font-weight:700; color:var(--b-ink);}
.mct-empty-txt {margin-top:4px; font-size:13.5px; color:var(--b-mute);}
.mct-btn {display:inline-flex; align-items:center; justify-content:center; height:46px; padding:0 24px; border-radius:var(--m-r); font-size:14.5px; font-weight:700;}
.mct-btn-main {margin-top:20px; background:var(--b-point); color:#fff;}

/* 무료배송 추천상품 */
.mct .mct-free {margin:16px 16px 0; padding:14px; border-radius:12px; background:var(--m-gray); text-align:left;}
.mct-free-head {display:flex; align-items:center; justify-content:space-between; gap:10px;}
.mct .mct-free-head p {padding:0; font-size:13px; font-weight:400; line-height:1.5; color:var(--b-ink);}
.mct .mct-free-head p strong {font-weight:700; color:var(--b-point);}
.mct-free-toggle {flex:none; height:30px; padding:0 12px; border:1px solid var(--m-line2); border-radius:15px; background:#fff; font-size:12.5px; font-weight:700; color:var(--b-ink); cursor:pointer;}
.mct .mct-free-list {display:none; margin:12px -14px 0; padding:0;}
.mct .mct-free-list ul {display:flex; gap:8px; width:auto; margin:0; padding:0 14px 4px; overflow-x:auto; -webkit-overflow-scrolling:touch; scroll-snap-type:x mandatory;}
.mct .mct-free-list ul li {float:none; flex:none; width:31%; min-width:100px; max-width:140px; height:auto; font-size:12px; scroll-snap-align:start;}
.mct .mct-free-list li a {display:block; color:var(--b-ink);}
.mct .mct-free-list li img {display:block; width:100%; aspect-ratio:1/1; height:auto; object-fit:cover; border-radius:var(--m-r-s); background:#fff;}
.mct-free-name {display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; margin-top:6px; font-size:12px; line-height:1.4; color:#2e3a40; word-break:break-all;}
.mct-free-price {display:block; margin-top:2px; font-family:'Roboto','Noto Sans KR',sans-serif; font-size:13px; font-weight:700;}
.mct .mct-free-more {display:block; width:auto; height:40px; line-height:38px; margin:10px 14px 0; border:1px solid var(--m-line2); border-radius:var(--m-r); background:#fff; font-size:13px; font-weight:700; color:var(--b-ink); text-align:center;}

/* 결제 예정 금액 */
.mct-sum {margin:16px 16px 0; padding:16px; border:1px solid var(--b-line); border-radius:14px; background:#fff;}
.mct-sum-tit {margin-bottom:10px !important; font-size:15px; font-weight:700; color:var(--b-ink);}
.mct .mct-sum-rows {margin:0; padding:0; border:0; background:none; text-align:left;}
.mct-sum-row {display:flex; justify-content:space-between; gap:12px; padding:4px 0; font-size:13.5px; line-height:1.5;}
.mct-sum-row dt {color:var(--b-mute);}
.mct-sum-row dd {margin:0; font-family:'Roboto','Noto Sans KR',sans-serif; color:var(--b-ink); letter-spacing:0;}
.mct-sum-row.is-minus dd {color:var(--m-sale);}
.mct .mct-sum-total {display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin-top:10px; padding:12px 0 0; border:0; border-top:1px solid var(--b-line); background:none; font-size:14.5px; font-weight:700; text-align:left;}
.mct .mct-sum-total .txt-price {font-family:'Roboto','Noto Sans KR',sans-serif; font-size:21px; font-weight:700; color:var(--b-ink); letter-spacing:0;}
.mct .mct-sum-reserve {margin-top:4px; font-size:12px; color:var(--b-mute); text-align:right;}
.mct .mct-sum-reserve b {color:var(--b-point);}

.mct-notes {margin:12px 16px 0; padding:0;}
.mct-notes li {position:relative; padding-left:10px; font-size:12px; line-height:1.6; color:var(--b-mute); list-style:none;}
.mct-notes li:before {content:""; position:absolute; top:8px; left:0; width:3px; height:3px; border-radius:50%; background:#9aa5aa;}

/* 간편 결제 */
.mct .mct-easypay {margin:16px 16px 0; text-align:center;}
.mct .mct-easypay:empty {display:none;}
.mct .naver-checkout {margin-top:12px;}
.mct-continue {display:block; height:46px; line-height:44px; margin:16px 16px 0; border:1px solid var(--m-line2); border-radius:var(--m-r); background:#fff; font-size:14px; font-weight:700; color:var(--b-ink); text-align:center; box-sizing:border-box;}

/* 아래 고정 주문 바 */
.mct .mct-bar {position:fixed; left:0; right:0; bottom:0; z-index:950; display:flex; gap:8px; margin:0; padding:10px 12px calc(10px + env(safe-area-inset-bottom)); box-sizing:border-box; background:rgba(255,255,255,.97); border-top:1px solid var(--b-line); -webkit-backdrop-filter:saturate(1.6) blur(10px); backdrop-filter:saturate(1.6) blur(10px); text-align:left;}
.mct .mct-bar a {display:flex; align-items:center; justify-content:center; height:52px; margin:0; padding:0; border-radius:var(--m-r); box-sizing:border-box;}
.mct .mct-order {flex:1; gap:6px; background:var(--b-point); color:#fff; font-size:16px; font-weight:700;}
.mct .mct-order:active {background:var(--b-deep);}
.mct-bar-total {font-family:'Roboto','Noto Sans KR',sans-serif; letter-spacing:0;}
.mct .mct-bar .mct-gift {flex:none; width:52px; border:1px solid var(--m-line2); background:#fff; color:var(--b-ink);}

/* 샵페이 바로구매 (Makeshop 기본) */
#basket #shoppay_btn {margin-top:20px;}
.basket #shoppay_btn {text-align:center;}
.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; 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; background-size:82px auto !important;}
.shoppay_btn_list {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_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; text-align:center !important; text-decoration:none !important;}
.shoppay_btn_item:first-child .shoppay_btn_link {margin:0 !important;}
.shoppay_btn_link.shoppay_btn_pay {background-image:url('/images/common/shoppay_sp_payment.png') !important; background-size:133px auto !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_text {display:block !important; overflow:hidden !important; margin:0 !important; padding:0 !important; letter-spacing:0 !important; white-space:nowrap !important; text-overflow:ellipsis !important; word-wrap:normal !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;}

/* 태블릿 : 가운데 600px */
@media screen and (min-width:768px) {
    .mct .mct-bar {left:50%; right:auto; width:600px; margin-left:-300px; border-left:1px solid var(--b-line); border-right:1px solid var(--b-line); border-radius:16px 16px 0 0;}
}
@media screen and (max-width:359px) {
    .mct-thumb {width:72px; height:72px;}
    .mct-bottom {padding-left:0;}
}
@media (prefers-reduced-motion:reduce) {
    .mct-freebar-fill {-webkit-transition:none; transition:none;}
}


/* BASIC css end */