/* BASIC css start */
/* =========================================================
   MO 장바구니 — 메인·상세와 같은 톤
   ========================================================= */
#basket{--m-side:20px; --m-text:#111; --m-sub:#888; --m-sale:#dc3737; --m-red:#e60012; --m-bg:#f5f5f5; --m-line:#eee;}
#basket{padding-bottom:20px;}

/* ---------- 제목 + 단계 ---------- */
#basket .h_title{display:flex; justify-content:space-between; align-items:flex-end; padding:22px var(--m-side) 16px !important; border:none !important; border-bottom:2px solid var(--m-text) !important; background:none !important;}
#basket .h_title h3{margin:0 !important; padding:0 !important; font-size:24px !important; font-weight:800 !important; color:var(--m-text) !important; letter-spacing:-0.6px; text-align:left !important;}
#basket .h_title h3 span{margin-left:6px; font-size:17px; color:var(--m-sale);}
#basket .cart_step{display:flex; gap:14px; margin:0; padding:0 0 3px;}
#basket .cart_step li{list-style:none; font-size:12px; font-weight:600; color:#bbb;}
#basket .cart_step li.on{color:var(--m-text); font-weight:800;}
#basket .cart_step li+li:before{content:""; display:inline-block; width:5px; height:5px; border-top:1.3px solid #ccc; border-right:1.3px solid #ccc; transform:rotate(45deg); margin:0 9px 1px -7px;}

/* ---------- 전체선택 · 삭제 ---------- */
#basket .cart_tool{display:flex; justify-content:space-between; align-items:center; padding:14px var(--m-side); border-bottom:1px solid var(--m-line);}
#basket .cart_tool .all-select{display:flex; align-items:center; gap:8px; margin:0; padding:0 !important; border:none !important; background:none !important; font-size:14px; font-weight:600; color:var(--m-text);}
#basket .cart_tool .tool_btns{display:flex; gap:14px;}
#basket .cart_tool .tool_btns a{font-size:13px; color:#888; text-decoration:underline; text-underline-offset:3px;}
#basket input[type=checkbox]{width:18px !important; height:18px !important; margin:0 !important; accent-color:#111; vertical-align:middle;}

/* ---------- 상품 카드 ---------- */
#basket .cart_list{margin:0; padding:0;}
#basket .cart_list li.cart_item{padding:18px var(--m-side) !important; border-bottom:1px solid var(--m-line); list-style:none;}
#basket .ci_row{position:relative; display:flex; align-items:flex-start; gap:10px;}
#basket .ci_chk{flex:0 0 auto; padding-top:2px;}
#basket .ci_chk .MS_input_checkbox{position:static !important;}
#basket .ci_thumb{flex:0 0 84px; width:84px; height:84px; background:var(--m-bg); border-radius:8px; overflow:hidden;}
#basket .ci_thumb img{display:block; width:100%; height:100%; object-fit:contain;}
#basket .ci_info{flex:1 1 auto; min-width:0; padding-right:22px;}
#basket .ci_name{display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; font-size:14px; font-weight:600; color:var(--m-text); line-height:1.45; word-break:keep-all;}
#basket .ci_opt{margin-top:4px; font-size:12.5px; color:var(--m-sub); line-height:1.5;}
#basket .ci_opt .MS_select, #basket .ci_opt select{width:100%;}
#basket .ci_optbtn{display:inline-block; margin-top:6px; padding:4px 10px; border:1px solid #ddd; border-radius:6px; font-size:12px; font-weight:600; color:#555; background:#fff;}
#basket .ci_meta{display:flex; flex-wrap:wrap; gap:2px 10px; margin-top:6px; font-size:11.5px; color:#aaa;}
#basket .ci_meta a{color:#888;}
#basket .ci_bottom{display:flex; justify-content:space-between; align-items:center; margin-top:10px;}
#basket .ci_price{font-size:16px; font-weight:800; color:var(--m-text); letter-spacing:-0.3px;}
#basket .ci_del{position:absolute; top:0; right:0; width:20px; height:20px;}
#basket .ci_del:before, #basket .ci_del:after{content:""; position:absolute; top:50%; left:50%; width:14px; height:1.5px; margin:-0.75px 0 0 -7px; background:#999; transform:rotate(45deg);}
#basket .ci_del:after{transform:rotate(-45deg);}

/* 수량 */
#basket .qty_box{display:inline-flex; align-items:center; height:32px; border:1px solid #ddd; border-radius:8px; overflow:hidden; background:#fff;}
#basket .qty_box a{position:relative; display:block; width:32px; height:30px; text-indent:-9999em; overflow:hidden;}
#basket .qty_box a:before, #basket .qty_box a.q_up:after{content:""; position:absolute; left:50%; top:50%; width:10px; height:1.5px; margin:-0.75px 0 0 -5px; background:var(--m-text);}
#basket .qty_box a.q_up:after{transform:rotate(90deg);}
#basket .qty_box input{width:36px !important; height:30px !important; padding:0 !important; border:none !important; border-left:1px solid #eee !important; border-right:1px solid #eee !important; border-radius:0 !important; text-align:center; font-size:14px; font-weight:600; color:var(--m-text); background:#fff;}

/* ---------- 결제 예정 금액 ---------- */
#basket .cart_summary{margin:20px var(--m-side) 0; padding:20px 18px 16px; border:1px solid #e5e5e5; border-radius:14px;}
#basket .free_bar{margin:0 0 16px; padding:12px 14px; border-radius:10px; background:#f7f7f7;}
#basket .free_bar .free_txt{margin:0 0 8px; font-size:13px; color:#555;}
#basket .free_bar .free_txt b{color:var(--m-red); font-weight:800;}
#basket .free_bar .free_txt.done{color:var(--m-text); font-weight:700;}
#basket .free_bar .free_track{height:5px; border-radius:3px; background:#e3e3e3; overflow:hidden;}
#basket .free_bar .free_fill{display:block; width:0; height:100%; background:var(--m-text); transition:width .4s;}
#basket .sum_row{display:flex; justify-content:space-between; margin:0; padding:5px 0;}
#basket .sum_row dt{font-size:14px; color:#555;}
#basket .sum_row dd{margin:0; font-size:14px; font-weight:600; color:var(--m-text);}
#basket .sum_row.minus dd{color:var(--m-sale);}
#basket .sum_total{display:flex; justify-content:space-between; align-items:baseline; margin-top:10px; padding-top:14px; border-top:1px solid var(--m-line);}
#basket .sum_total span{font-size:15px; font-weight:700; color:var(--m-text);}
#basket .sum_total .txt-price, #basket .sum_total .txt-price *{font-size:22px !important; font-weight:800 !important; color:var(--m-text) !important; letter-spacing:-0.5px;}
#basket .sum_row dd *{font-size:inherit !important; font-weight:inherit !important;}
#basket .ci_price *{font-size:inherit !important; font-weight:inherit !important;}
#basket .sum_reserve{margin:4px 0 0; text-align:right; font-size:12px; color:var(--m-sub);}
#basket .sum_reserve:empty{display:none;}

/* ---------- 빈 장바구니 ---------- */
#basket .none-data{display:flex; flex-direction:column; align-items:center; gap:6px; padding:80px var(--m-side) 60px; text-align:center;}
#basket .none-data strong{font-size:18px; font-weight:800; color:var(--m-text);}
#basket .none-data p{margin:0; font-size:13px; color:var(--m-sub);}
#basket .none-data a{margin-top:14px; padding:13px 28px; border-radius:24px; background:var(--m-text); color:#fff; font-size:14px; font-weight:700;}

/* ---------- 안내 ---------- */
#basket .delivery-type{padding:16px var(--m-side) 0 !important;}
#basket .delivery-type li{position:relative; padding-left:9px; font-size:12px; line-height:1.8; color:var(--m-sub); list-style:none;}
#basket .delivery-type li:before{content:""; position:absolute; left:0; top:10px; width:3px; height:3px; border-radius:50%; background:#bbb;}
#basket .cart-ft2{padding:16px var(--m-side) 0; text-align:center;}
#basket .naver-checkout{margin-top:12px;}

/* ---------- 하단 고정 주문 버튼 ---------- */
#basket .order-btn{position:fixed; left:0; right:0; bottom:0; z-index:16; max-width:850px; margin:0 auto; gap:6px; padding:10px var(--m-side) calc(10px + env(safe-area-inset-bottom)) !important; background:#fff; box-shadow:0 -4px 16px rgba(0,0,0,.06);}
#basket .order-btn a{height:52px !important; margin:0 !important; border-radius:12px; font-size:16px; font-weight:700;}
#basket .order-btn a.btn_Black{background:var(--m-text) !important; border:1px solid var(--m-text) !important; color:#fff !important;}
#basket .order-btn a.btn_Black b{margin-right:4px;}
#basket .order-btn a.btn_Present{border-radius:12px; border-color:#d5d5d5 !important;}
body:has(#basket .order-btn){padding-bottom:calc(76px + env(safe-area-inset-bottom));}
body:has(#basket .order-btn) #fix_icon{bottom:calc(88px + env(safe-area-inset-bottom)) !important;}

/* ---------- 무료배송 추천상품 (기본 기능) ---------- */
.cart-free-wrap{text-align:center; margin:20px var(--m-side) 10px;}
.cart-free-wrap .btn-list-open{display:inline-block; width:100%; height:44px; line-height:42px; border:1px solid #111; border-radius:10px; background:#fff; color:#111; font-weight:700; font-size:13px; text-align:center;}
.cart-free-wrap p{padding:10px 0 12px; font-size:13px; font-weight:600;}
.cart-free-wrap p span{color:#e60012;}
.cart-free-wrap .btn-more{display:inline-block; width:100%; height:40px; line-height:38px; margin-top:10px; border:1px solid #ddd; border-radius:8px; background:#fff; color:#383838; font-size:13px; 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; margin-top:14px; display:none;}
.cart-free-wrap .list-wrap ul{width:100%; list-style:none; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px 8px;}
.cart-free-wrap .list-wrap ul li{list-style:none; font-size:12px; text-align:left;}
.cart-free-wrap .list-wrap ul li dl{margin:0;}
.cart-free-wrap .list-wrap ul li dl dt{aspect-ratio:1/1; margin-bottom:8px; background:#f5f5f5; border-radius:6px; overflow:hidden;}
.cart-free-wrap .list-wrap ul li dl dt img{width:100%; height:100%; object-fit:contain;}

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

/* ---------- 정기배송 탭 (사용 시) ---------- */
#basket .cart-tab{display:flex; width:100%; height:auto; border-top:none; border-bottom:1px solid #eee;}
#basket .cart-tab li{flex:1; float:none; width:auto; height:auto; border:none; list-style:none;}
#basket .cart-tab li a{display:block; padding:14px 0 12px; border-bottom:2px solid transparent; font-size:14px; font-weight:600; color:#aaa; text-align:center;}
#basket .cart-tab li a span{display:inline; margin:0; border:none !important;}
#basket .cart-tab li.now a{border-bottom-color:#111; color:#111; font-weight:800;}


/* ---------- 주문 버튼 배치 (선물하기 · 빠른결제 사용 시) ---------- */
#basket .order-btn{display:flex;}
#basket .order-btn.use-gift.qorder-none{display:grid; grid-template-columns:52px 1fr;}
#basket .order-btn.use-gift.use-qorder{display:grid; grid-template-columns:52px 1fr 1fr;}
#basket .order-btn.gift-none.use-qorder{display:grid; grid-template-columns:1fr 1fr;}
#basket .order-btn a{display:flex; flex:1; justify-content:center; align-items:center; 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; border-radius:12px;}

/* ---------- 간편결제 버튼 (기본) ---------- */
#nhn_btn{display:inline;}
#payco_order_btn{display:inline;}
#kakaopay_order_btn{display:inline; vertical-align:top;}
.__checkout_img_comm{visibility:unset !important;}
#productDetail #shoppay_btn{padding-top:10px;}
#cartWrap #shoppay_btn{display:inline;}
.shopdetail #shoppay_btn{padding-top:10px; text-align:center;}
#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-size: 133px auto !important; 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_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; }

/* ---------- 빠른 결제 레이어 (기본 기능) ---------- */
#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; }


/* BASIC css end */