/* BASIC css start */
 /* 데스크탑 레이아웃 (1024px 초과) */

 /* SVG 아이콘 스타일 */
 .cart-icon {
     color: #cccccc;
     /* 아이콘 색상 */
     margin-bottom: 24px;
     /* 아이콘과 메시지 사이 간격 */
 }

 .cart-container {
     margin: 125px auto 0;
     display: grid;
     grid-template-columns: 2fr 290px;
     gap: 25px;
     /*   padding: 0 clamp(20px, 5.4vw, 100px);*/
     max-width: 1080px;
 }

 .cart-container.empty {
     grid-template-columns: 1fr;
 }

 @media (max-width: 1280px) {
     .cart-container {
         padding: 0;
         margin: 40px auto 0;
     }
 }

 .cart-content {
     border-radius: 8px;
     box-sizing: border-box;
 }

 .pageTitle {
     font-size: 23px;
     margin-bottom: 25px;
     font-weight: bold;
 }

 .cart-header {
     display: flex;
     justify-content: space-between;
     align-items: center;
     padding-bottom: 12px;
 }

 .select-all {
     display: flex;
     align-items: center;
     gap: 8px;
     color: #000;
     font-size: 16px;
 }

 .select-all label {
     display: flex;
     gap: 10px;
     align-items: center;
     font-weight: bold;
 }

 .delete-selected-btn {
     padding: 6px;
     border: 1px solid #e0e0e0;
     border-radius: 5px;
     font-size: 13px;
     color: #7e7e7e;
     background: #fff;
 }

 .cart-items-list {
     border-radius: 10px;
     overflow: hidden;
     box-shadow: 0px 17px 32px rgba(0, 0, 0, 0.04);
 }

 .cart-item {
     padding: 39px 19px;
     background: #fff;
     /*border-radius: 10px;
    margin-bottom: 16px;
    box-shadow: 0px 17px 32px rgba(0, 0, 0, 0.04);*/
     box-sizing: border-box;
     border-bottom: 1px solid #e0e0e0;
 }

 .cart-items-list form:last-child .cart-item {
     border-bottom: 0;
 }

 .item-main {
     display: flex;
     gap: 11px;
     align-items: stretch;
     justify-content: space-between;
 }

 .item-main>div {
     flex-grow: 0;
     /* 자동으로 늘어나지 않음 */
     flex-shrink: 0;
     /* 자동으로 줄어들지 않음 */
 }

 /* 1. 체크박스: 고정 너비 */

 .item-main>div.item-info.item-checkbox {
     flex-basis: 20px;
     text-align: center;
 }

 /* 2. 상품 이미지: 고정 너비 */

 .item-main>div.item-info.item-image {
     flex-basis: 68px;
 }

 /* 3. 상품 정보(이름, 옵션): 유동적인 너비 (핵심!) */

 .item-main>div.item-info.item-name {
     flex-grow: 1;
     /* 남는 공간을 모두 차지하도록 설정 */
     flex-shrink: 1;
     /* 공간이 부족할 때 줄어들도록 설정 */
     min-width: 100px;
     /* 너무 좁아지지 않도록 최소 너비 설정 */
     max-width: 315px;
 }

 .item-main>div.item-info.item-name .product-name {
     line-height: 20px;
     height: 40px;
     overflow: hidden;
     display: -webkit-box;
     -webkit-line-clamp: 2;
     -webkit-box-orient: vertical;
     margin-bottom: 10px;
     white-space: normal;
 }

 /* 4. 수량 조절: 고정 너비 */

 .item-main>div.item-info.quantity {
     flex-basis: 150px;
     /* 수량 선택 영역에 120px 공간 할당 */
 }

 /* 5. 가격 및 삭제 버튼: 고정 너비 */

 .item-main>div.item-price-section {
     display: inline-flex;
     gap: 20px;
     justify-content: flex-end;
     align-items: center;
     flex-basis: 135px;
     text-align: right;
     /* height: 122px;*/
 }

 .item-image {}

 .item-image img {
     width: 68px;
     height: 68px;
     border-radius: 5px;
     object-fit: cover;
 }

 .item-info {}

 .product-name a {
     font-weight: bold;
     font-size: 16px;
 }

 .option-name {
     color: #828282;
     font-size: 14px;
 }

 .item-info.quantity {
     /*border-left: 1px solid #e0e0e0;
    border-right: 1px solid #e0e0e0;*/
     /*height: 106px;*/
     display: inline-flex;
     align-items: center;
     /*justify-content: center;*/
     flex-direction: column;
     /*margin-top: 16px;*/
     justify-content: center;
 }

 .quantity-selector {
     display: flex;
     align-items: center;
     border: 1px solid #e5e5e5;
     border-radius: 5px;
     width: fit-content;
 }

 .quantity-btn {
     width: 25px;
     height: 31px;
     font-size: 16px;
     color: #cdcdcd;
     display: inline-flex;
     align-items: center;
     justify-content: center;
     font-weight: 500;
 }

 .txt-spin {
     width: 31px;
     height: 31px;
     text-align: center;
     border: none;
     border-left: 1px solid #e0e0e0;
     border-right: 1px solid #e0e0e0;
     font-size: 14px;
     box-sizing: border-box;
     color: #515151;
     font-weight: bold;
 }

 .txt-spin:focus {
     outline: none;
 }

 .option-change-btn {
     margin-top: 9px;
     border: 1px solid #888888;
     border-radius: 5px;
     font-size: 13px;
     color: #888888;
     font-weight: 500;
     background: #fff;
     width: 66px;
     height: 27px;
     display: flex;
     justify-content: center;
     box-sizing: border-box;
     align-items: center;
 }

 .item-price {
     font-weight: bold;
     font-size: 16px;
 }

 .remove-item-btn {
     font-size: 22px;
     color: #828282;
     width: 20px;
     height: 20px;
     display: flex;
     align-items: center;
     justify-content: center;
     position: relative;
     top: -1px;
 }

 .item-subtotal-summary {
     background-color: #f5f5f5;
     border: 1px solid #f0f0f0;
     padding: 12px 17px;
     margin-top: 16px;
     text-align: left;
     font-size: 14px;
     color: #828282;
     border-radius: 10px;
     box-shadow: 0px 17px 32px rgba(0, 0, 0, 0.04);
     box-sizing: border-box;
 }

 .item-subtotal-summary .none_groupsale_total_price_sell {
     color: #e5373f;
 }

 .item-subtotal-summary strong {
     color: #000000;
     font-weight: 400;
 }

 /* 결제 정보 섹션 */
 .payment-summary {
     background-color: #fff;
     padding: 23px 18px 24px;
     border-radius: 10px;
     height: fit-content;
     /* 컨텐츠 높이에 맞게 조절 */
     position: sticky;
     /* 스크롤 시 따라오도록 */
     top: 96px;
     box-sizing: border-box;
     box-shadow: 0px 17px 32px rgba(0, 0, 0, 0.04);
     margin-top: 96px;
 }

 .payment-summary h2 {
     font-size: 16px;
     margin-bottom: 20px;
     font-weight: bold;
 }

 .summary-row {
     display: flex;
     justify-content: space-between;
     margin-bottom: 12px;
     font-size: 14px;
     color: #828282;
     font-weight: 500;
     width: 100%;
 }

 .summary-row.total {
     font-size: 14px;
     font-weight: bold;
     color: #000;
     margin-bottom: 20px;
 }

 .divider {
     border: none;
     border-top: 1px solid #f5f5f5;
     margin: 17px 0;
     display: block;
 }

 .cart-ft {
     display: flex;
     flex-direction: column;
 }

 .cart-ft2 {
     text-align: center;
 }

 .checkout-btn,
 .gift-btn {
     width: 100%;
     border-radius: 10px;
     font-size: 20px;
     font-weight: bold;
     height: 56px;
     display: flex;
     align-items: center;
     justify-content: center;
     box-sizing: border-box;
 }

 .checkout-btn {
     background-color: var(--maincolor);
     color: #fff;
 }

 .gift-btn {
     background-color: #fff;
     color: #333;
     border: 1px solid #e0e0e0;
     margin-top: 10px;
 }

 .MK_total_delivery {
     display: inline-block !important;
 }

 .payment-summary .MK_total_delivery {
     display: block !important;
 }

 .mo-remove-item-btn {
     display: none;
 }

 .total-summary {
     background: #fff;
     padding: 20px;
     display: flex;
     align-items: center;
     justify-content: center;
     color: #828282;
     font-size: 14px;
 }

 .total-summary .line {
     height: 29px;
     width: 1px;
     background: #e0e0e0;
     margin: 0 40px;
 }

 .total-summary .black {
     color: #000;
     margin-left: 3px;
 }

 .total-summary .right {
     color: #000;
 }

 .total-summary span.right-total {
     margin-right: 15px;
     font-weight: bold;
 }

 .total-summary .left {
     display: flex;
     align-items: center;
 }

 .total-summary .left img {
     width: 14px;
     margin: 0 11px;
 }




.fixed-mo {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    z-index: 9999;
    background: #fff;
    padding: 10px;
    box-sizing: border-box; 
    opacity: 0;
    transform: translateY(20px);  
    pointer-events: none;  
    transition: opacity 0.3s ease, transform 0.3s ease;
}
.fixed-mo.is-visible {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

 /* 태블릿 & 모바일 반응형 (1024px 이하) */
 @media (max-width: 1024px) {
     .cart-container {
         grid-template-columns: 1fr;
         /* 1단 컬럼으로 변경 */
     }

     .pageTitle {
         font-size: 20px;
     }

     .cart-item {
         /*margin-bottom:25px;*/
     }

     .item-main {
         display: grid;
         /* Flexbox 대신 Grid를 사용 */

         /* 템플릿 정의: [체크박스] [이미지] [상품정보] [가격] */
         grid-template-columns: auto auto 1fr auto;

         /* 행과 열 사이의 간격 설정 */
         gap: 10px 10px;

         /* 기존 flex-wrap 속성은 필요 없으므로 제거 */
     }

     /* Grid 영역에 각 아이템을 배치합니다. */
     .item-main>.item-checkbox {
         grid-column: 1;
         /* 첫 번째 열 */
         grid-row: 1 / span 2;
         /* 첫 번째 행에서 시작해 2칸 차지 (세로 중앙 정렬 효과) */
         /* align-self: center; */
     }

     .item-main>.item-image {
         grid-column: 2;
         /* 두 번째 열 */
         grid-row: 1 / span 2;
         /* 첫 번째 행에서 시작해 2칸 차지 */
         /* align-self: center; */
     }

     .item-main>div.item-info.item-name {
         grid-column: 3;
         /* 세 번째 열 */
         grid-row: 1;
         /* 첫 번째 행 */
         align-self: end;
         /* 아래쪽에 붙도록 정렬 */
         max-width: 100%;
     }

     .item-main>.quantity {
         grid-column: 3;
         /* 세 번째 열 */
         grid-row: 2;
         /* 두 번째 행 */

         /* 기존의 height, border, margin 등 불필요한 스타일 초기화 */
         height: auto;
         border: none;
         margin-top: 0;
         padding: 0;
         flex-basis: auto;
         /* 100%가 아닌 자동으로 크기 조절 */
         flex-direction: row;
         /* 가로로 배치 */
         justify-content: flex-start;
         align-items: center;
         gap: 10px;
     }

     .item-main>div.item-price-section {
         grid-column: 4;
         /* 네 번째 열 */
         grid-row: 1 / span 2;
         position: static;
         height: 100%;
         justify-content: center;
     }

     .option-change-btn {
        height: 31px;
        line-height: 31px;
         margin-top: 0;
     }

     .payment-summary {
         margin-top: 5px;
         padding: 20px 24px 35px;
     }



 }

 @media (max-width: 768px) {
     .cart-item {
         padding: 21px 19px;
     }

     .payment-summary {
         padding: 20px 20px 35px;
     }
     .total-summary .line { 
    width: 100%;
    margin:20px auto;
    height:1px;
}

.total-summary {
    display: flex;
    flex-direction: column;
    padding: 20px 0;
}

.total-summary .left, .total-summary .right {
    padding: 0 19px;
    width: 100%;
    box-sizing: border-box;
    text-align: center;
        display: flex;
        align-items: center;
        justify-content: center;
}

.total-summary .left img {
    width: 11px;
    vertical-align: middle;
    margin: 0 7px;
}
 }

 @media (max-width: 568px) {

     .cart-item {
         position: relative;
         padding: 21px 19px 50px;
     }

     .item-main>div.item-price-section {
         position: absolute;
         height: auto;
         bottom: 21px;
         left: 127px;
     }

     .mo-remove-item-btn {
         position: absolute;
         top: 17px;
         right: 19px;
         font-size: 22px;
         color: #828282;
         width: 20px;
         height: 20px;
         display: flex;
         align-items: center;
         justify-content: center;
     }

     .remove-item-btn {
         display: none;
     }
 }
/* BASIC css end */