/* BASIC css start */
/* ==================== 장바구니 ==================== */
.basket-page { width: 100%; box-sizing: border-box; }
.sub-page.basket-page .page-header { position: sticky; top: 0; background: #fff; z-index: 1; }

/* 장바구니 페이지에서 header, top-banner 숨기기 */
.top_banner { display: none!important; }
.header { display: none!important; }

/* ==================== 장바구니 상품 있을 때 ==================== */
.basket-content { width: 100%; padding: 0 18px; box-sizing: border-box; }

/* 상단 선택 영역 */
.basket-toolbar { display: flex; align-items: center; justify-content: space-between; min-height: 48px; border-bottom: 1px solid #ddd; }
.basket-toolbar__check { display: flex; align-items: center; gap: 6px; color: #999; font-size: 12px; }
.basket-toolbar__actions { display: flex; align-items: center; }
.basket-toolbar__actions a { color: #999; font-size: 12px; text-decoration: none; }
.basket-toolbar__divider { width: 1px; height: 10px; margin: 0 8px; background: #ddd; }

/* 상품 목록 */
.basket-item { position: relative; padding: 20px 0; border-bottom: 1px solid #ddd; }
.basket-item:last-of-type { border-bottom: 0; }
.basket-item__inner { display: grid; grid-template-columns: 16px 82px minmax(0, 1fr); column-gap: 8px; }
.basket-item__check { display: block; min-height: 0; line-height: 1; }

.basket-item__thumb { width: 82px; }
.basket-item__thumb a, .basket-item__thumb img { display: block; width: 100%; }

.basket-item__content { grid-column: 3; grid-row: 1; position: relative; min-width: 0; padding-right: 24px; }
.basket-item__delete { position: absolute; top: -12px; right: -12px; width: 44px; height: 44px; }
.basket-item__delete::before, 
.basket-item__delete::after { content: ""; position: absolute; top: 21px; left: 15px; width: 13px; height: 1px; background: #999; }
.basket-item__delete::before { transform: rotate(45deg); }
.basket-item__delete::after { transform: rotate(-45deg); }

.basket-item__name { display: block; color: #000; font-size: 14px; font-weight: 500; }
.basket-item__option { margin-top: 6px; color: #666; font-size: 12px; }
.basket-item__option .basket-option-dlist > li { padding: 0!important; }
.basket-item__option .basket-option-dlist img { display: none; }

/* 상품 하단 컨트롤 */
.basket-item__control { grid-column: 2 / -1; width: 100%; display: grid; grid-template-columns: 84px 84px minmax(70px, 1fr); align-items: end; gap: 16px; margin-top: 12px; }
.basket-item__price { display: flex; flex-direction: column; align-items: flex-end; justify-content: flex-end; padding-bottom: 4px; white-space: nowrap; }
.basket-item__price span[class*="MK_price_consumer"] { color: #999; font-size: 12px; text-decoration: line-through; }
.basket-item__price span[class*="MK_price_sell"] { color: #000; font-size: 16px; font-weight: 500; }
.basket-item__price span[class*="MK_price_consumer"]::after,
.basket-item__price span[class*="MK_price_sell"]::after { content: '원'; }

/* 수량 */
.basket-quantity { display: flex; height: 30px; border: 1px solid #ddd; box-sizing: border-box; }
.basket-quantity__button span { line-height: 1; }
.basket-quantity__button, 
.basket-quantity > input[type=tel] { display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; padding: 0; border: 0; background: #fff; color: #333; font-size: 14px; text-align: center; }
.basket-quantity > input[type=tel] { border: 0; border-right: 1px solid #ddd; border-left: 1px solid #ddd; border-radius: 0; font-size: 14px; }
.basket-item__option-button { display: flex; align-items: center; justify-content: center; height: 30px; padding: 0 16px; border: 1px solid #ddd; background: #fff; color: #333; font-size: 12px; box-sizing: border-box; cursor: pointer; }

/* 회원 혜택 */
.basket-benefit { margin-top: 12px; padding: 12px 10px; border-radius: 4px; background: #F5F5F5; color: #000; font-size: 12px; text-align: center; }
.basket-benefit strong { font-weight: normal; }
.basket-benefit em { color: #FF3300; font-style: normal; }

/* 결제 금액 */
.basket-summary { padding: 24px 0; }
.basket-summary__list { margin: 0; }
.basket-summary__item { display: flex; align-items: center; justify-content: space-between; margin-top: 6px; color: #999; font-size: 14px; }
.basket-summary__item:first-child { margin-top: 0; }
.basket-summary__total { display: flex; align-items: center; justify-content: space-between; margin-top: 8px; color: #000; font-size: 18px; }
.basket-summary__total strong { font-weight: 500; }

/* 주문 */
.basket-order__button { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 54px; border: 0; background: #000; color: #fff; font-size: 18px; font-weight: 500; }
.basket-order--empty .basket-order__button::before { content: "0"; }
.basket-order--empty .basket-order__button { background: #ddd; color: #999; pointer-events: none; }
.basket-order__pay { margin-top: 20px; }

/* 체크박스 */
.basket-toolbar input[type="checkbox"], 
.basket-item input[type="checkbox"] { appearance: none; -webkit-appearance: none; position: relative; width: 16px; height: 16px; margin: 0; border: 1px solid #bbb; background: #fff; box-sizing: border-box; cursor: pointer; border-radius: 2px; }
.basket-toolbar input[type="checkbox"]::after, 
.basket-item input[type="checkbox"]::after { content: ""; position: absolute; top: 3px; left: 5px; width: 3px; height: 6px; border: solid #333; border-width: 0 1px 1px 0; transform: rotate(45deg); }
.basket-toolbar input[type="checkbox"]:checked,
.basket-item input[type="checkbox"]:checked { appearance: none; -webkit-appearance: none; border-color: #111; background: #111; }
.basket-toolbar input[type="checkbox"]:checked::after, 
.basket-item input[type="checkbox"]:checked::after { border-color: #fff; }

/* 0원 처리 */
.basket-summary--empty .basket-summary__item dd, 
.basket-summary--empty .basket-summary__total strong:last-child { font-size: 0; }
.basket-summary--empty .basket-summary__item dd::after, 
.basket-summary--empty .basket-summary__total strong:last-child::after { content: "0 원"; font-size: 14px; }
.basket-summary--empty .basket-summary__total strong:last-child::after { font-size: 18px; }
.basket-summary__item--delivery.is-zero dd { font-size: 0; }
.basket-summary__item--delivery.is-zero dd::after { content: "0 원"; font-size: 14px; }


/* ==================== 장바구니 비어있을 때 ==================== */
.basket-empty { display: flex; flex-direction: column; min-height: calc(100vh - 54px); min-height: calc(100dvh - 54px); }
.basket-empty__content { padding: 160px 18px 80px; text-align: center; }
.basket-empty__title { color: #333; font-size: 18px; font-weight: 500; }
.basket-empty__desc { margin: 4px 0 40px; color: #666; font-size: 14px; font-weight: 400; }
.basket-empty__button { display: flex; align-items: center; justify-content: center; width: 100%; height: 48px; border: 1px solid #666; box-sizing: border-box; color: #333; font-size: 16px; font-weight: 500; line-height: 1; text-decoration: none; }

.basket-empty__banner { width: 100%; margin-top: auto; }
.basket-empty__banner a { display: block; }
.basket-empty__banner img { display: block; width: 100%; }


/* ==================== 장바구니 옵션 변경 레이어 ==================== */
.basket-option-layer { visibility: hidden; position: fixed; inset: 0; z-index: 10000001; opacity: 0; transition: visibility .3s, opacity .3s; }
.basket-option-layer.is-open { visibility: visible; opacity: 1; }
.basket-option-layer__dimmed { position: absolute; inset: 0; background: rgba(0,0,0,.45); }
.basket-option-layer__sheet { position: absolute; right: 0; bottom: 0; left: 0; height: calc(100vh - 54px); overflow: hidden; background: #fff;  transform: translateY(100%); transition: transform .3s ease; }
.basket-option-layer.is-open .basket-option-layer__sheet { transform: translateY(0); }
.basket-option-layer__iframe { display: block; width: 100%; height: 100%; border: 0; background: #fff; }
body.basket-option-open { overflow: hidden; touch-action: none; }
/* BASIC css end */