@charset "utf-8";

.order-wrap{display:flex;align-items:flex-start;column-gap:var(--space-60);}
.order-main{flex:1;min-width:0;display:flex;flex-direction:column;row-gap:var(--space-12);}
.order-form{flex:1;min-width:0;display:flex;flex-direction:column;row-gap:var(--space-32);}

/* 장바구니 */
.cart-top{display:flex;align-items:center;justify-content:space-between;column-gap:var(--space-16);padding: var(--space-4) var(--space-8);border-bottom:1px solid var(--text-1);}
.cart-top .cart-count{color:var(--text-2);}
.cart-top[hidden],
.cart-empty[hidden]{display:none;}

/* 결제 예상 금액 (데스크톱 : 오른쪽 sticky) */
.order-summary{position:sticky;top:calc(var(--header-h) + var(--space-24));flex:0 0 400px;display:flex;flex-direction:column;row-gap:var(--space-24);padding:var(--space-40);border:1px solid var(--border-2);border-radius:var(--radius-20);background:var(--color-white);}
.order-summary .btn-wrap {row-gap: var(--space-20); padding-top: var(--space-12);}
.summary-handle{display:none;}
.summary-tit{padding:var(--space-4) 0;border-bottom:1px solid var(--text-1);font-size:var(--fs-24);font-weight:600;line-height:1.4;color:var(--text-1);}
.summary-list{display:flex;flex-direction:column;row-gap:var(--space-20);padding-bottom:var(--space-20);border-bottom:1px solid var(--border-2);}
.summary-list div{display:flex;align-items:center;justify-content:space-between;column-gap:var(--space-12);font-size:var(--fs-15);}
.summary-list dt{color:var(--text-3);}
.summary-list dd{color:var(--text-1);}
.summary-total{display:flex;align-items:flex-start;justify-content:space-between;column-gap:var(--space-12);}
.summary-total .label{padding-top:var(--space-6);font-size:var(--fs-16);color:var(--text-2);}
.summary-total .price{display:flex;flex-direction:column;align-items:flex-end;row-gap:var(--space-4);}
.summary-total strong{font-size:var(--fs-24);font-weight:700;line-height:1.3;color:var(--text-1);}
.summary-total .point{font-size:var(--fs-13);color:var(--text-3);}
.summary-free{width: 100%; display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:var(--space-6) var(--space-10);padding:var(--space-16);border:1px solid var(--border-2);border-radius:var(--radius-8);background:var(--bg-1);font-size:var(--fs-14);color:var(--text-2);}
.summary-free strong{color:var(--text-1);}
.summary-free .btn-more{font-size:var(--fs-14);}

/* 옵션 변경 모달 */
.option-form .modal-head{align-items:center;border-bottom:1px solid var(--border-2);padding-bottom:var(--space-16);}
.option-form .modal-tit{font-size:var(--fs-20);font-weight:600;color:var(--text-1);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.option-form .modal-cont{display:flex;flex-direction:column;row-gap:var(--space-24);padding-top:var(--space-20);}
.option-prd{font-size:var(--fs-15);line-height:1.5;color:var(--text-2);word-break:keep-all;}
.option-group{display:flex;flex-direction:column;row-gap:var(--space-10);}
.option-group legend,
.option-qty .label{position:static;width:auto;height:auto;margin-bottom:var(--space-10);overflow:visible;clip:auto;white-space:normal;font-size:var(--fs-16);font-weight:500;color:var(--text-1);}   /* reset 의 legend 숨김 해제 */
.option-list{display:flex;flex-direction:column;row-gap:var(--space-8);}
.option-item{display:flex;align-items:center;column-gap:var(--space-10);padding:var(--space-14) var(--space-16);border:1px solid var(--border-2);border-radius:var(--radius-8);font-size:var(--fs-15);color:var(--text-1);cursor:pointer;transition:border-color var(--transition);}
.option-item:hover,
.option-item:has(input:checked){border-color:var(--border-point);}
.option-item:has(input:checked){background:var(--bg-2);}
.option-item:has(input:disabled){color:var(--text-4);background:var(--bg-1);cursor:not-allowed;}
.option-item .name{flex:1;min-width:0;}
.option-item .price{flex-shrink:0;font-weight:600;}
.option-qty{display:flex;align-items:center;justify-content:space-between;}
.option-qty .label{margin-bottom:0;}
.option-qty .qty input{width:var(--space-40);}

/* 주문결제 */
.order-sec{display:flex;flex-direction:column;row-gap:var(--space-24);}
.order-sec-head{display:flex;align-items:center;justify-content:space-between;column-gap:var(--space-16);padding-bottom:var(--space-10);border-bottom:1px solid var(--text-1);}
.order-sec-tit{font-size:var(--fs-24);font-weight:600;line-height:1.4;color:var(--text-1);}
.order-sec>.order-sec-tit{padding-bottom:var(--space-10);border-bottom:1px solid var(--text-1);}
.order-sec .check-group{display:flex;flex-wrap:wrap;gap:var(--space-12) var(--space-20);}
.order-sec .input-email{height:56px;}
.order-sec .select:has(option[value=""]:checked){color:var(--text-3);}   /* 선택 안 한 셀렉트 : placeholder 색 */
 
/* 배송지 목록 모달 */
.address-item{align-items:flex-start;}
.address-item .form-check{margin-top:2px;}
.address-item .info{flex:1;min-width:0;display:flex;flex-direction:column;row-gap:var(--space-4);}
.address-item .title{display:flex;align-items:center;column-gap:var(--space-6);font-size:var(--fs-16);font-weight:600;color:var(--text-1);}
.address-item .who{font-size:var(--fs-14);color:var(--text-2);}
.address-item .addr{font-size:var(--fs-14);line-height:1.5;color:var(--text-2);word-break:keep-all;}

/* 주문완료 */
.order-complete .inner-s{max-width:640px;}
.order-complete-box{display:flex;flex-direction:column;row-gap:var(--space-40);background:var(--color-white);}
.order-complete .find-result{row-gap:var(--space-12);}
.order-complete .find-desc br{display:block;}
.order-complete-info{width:100%;padding:var(--space-28);row-gap:0;background:var(--bg-1);}
.order-complete-info>div{display:flex;align-items:center;justify-content:space-between;column-gap:var(--space-20);width:100%;padding:var(--space-12) 0;border-bottom:1px solid var(--border-2);font-size:var(--fs-14);}
.order-complete-info>div:first-child{padding-top:0;}
.order-complete-info>div:last-child{padding-bottom:0;border-bottom:0;}
.order-complete-info span{color:var(--text-3);}
.order-complete-info strong{font-weight:500;color:var(--text-1);text-align:right;}
.order-complete.is-fail .order-complete-info strong{color:var(--static-2);}
.order-complete.is-fail .order-complete-info>div{padding:0;border-bottom:0;}
.order-complete-btns{width:100%;margin-top:0;}

/* 비회원 주문 동의 */
.order-agree{display:flex;align-items:center;justify-content:space-between;column-gap:var(--space-16);}
.order-agree .btn-more{flex-shrink:0;font-size:var(--fs-14);}
 
.order-sec .common-guide,
.order-complete .common-guide{margin:0;}

@media screen and (max-width: 1024px) {
    .order-wrap{flex-direction:column;}
    .order-main {width: 100%;}

    .order-summary{position:fixed;top:auto;left:0;right:0;bottom:0;z-index:850;flex-basis:auto;row-gap:12px;padding:0 20px calc(16px + env(safe-area-inset-bottom, 0px));border:0;border-radius:var(--radius-20) var(--radius-20) 0 0;box-shadow:var(--shadow-3);}
    .summary-handle{display:flex;align-items:center;justify-content:center;width:100%;height:28px;}
    .summary-handle::before{width:40px;height:4px;border-radius:var(--radius-full);background:var(--border-2);transition:background-color var(--transition);content:'';}
    .summary-handle:hover::before{background:var(--text-4);}
    .summary-tit{display:none;}

    .summary-list,
    .summary-free{max-height:0;padding-top:0;padding-bottom:0;border-width:0;opacity:0;visibility:hidden;overflow:hidden;transition:max-height .35s ease,padding .35s ease,margin .35s ease,opacity .25s ease,visibility .35s;}
    .summary-list{margin-bottom:-12px;}
    .summary-free{margin-top:calc(var(--space-8) * -1);}

    .order-summary.open .summary-list{max-height:200px;margin-bottom:0;padding-bottom:16px;border-bottom-width:1px;opacity:1;visibility:visible;}
    .order-summary.open .summary-free{max-height:120px;margin-top:0;padding:16px;border-width:1px;opacity:1;visibility:visible;}
    .summary-list{padding-bottom:16px;}
    .summary-total{align-items:center;}
    .summary-total .label{padding-top:0;}
    .summary-total .price{flex-direction:row-reverse;align-items:center;column-gap:8px;}

    body:has(.order-summary){padding-bottom:150px;}
    body:has(.order-summary) .btn-top{bottom:160px;}
}

@media screen and (max-width: 500px) {
    .cart-top{padding:0 0 10px;}
    .order-summary{padding:0 16px calc(12px + env(safe-area-inset-bottom, 0px));}
    .summary-total strong{font-size:20px;}

    .order-complete-box{padding:var(--space-40) var(--space-20);row-gap:var(--space-32);}
    .order-complete-info{padding:var(--space-20);}
    .order-complete-info>div{font-size:var(--fs-13);}
    .order-complete-btns{grid-template-columns:minmax(0,1fr);}
}


@media (prefers-reduced-motion: reduce) {
    .summary-list,
    .summary-free{transition:none;}
}