@charset "utf-8";

/* 주문서 작성 (order.html) — 상품 상세의 pd-figure, pd-chip, pd-total, pd-btns는 detail.css 사용 */

/* ==========================================================================
   Title · Step
   ========================================================================== */
.sub-wrap--order { padding-bottom: 160px; }
.order-title { margin-top: 60px; }

.order-step { display: flex; align-items: center; justify-content: center; gap: 40px; margin-top: 24px; font-size: 15px; line-height: 22px; color: var(--c-base6); }
.order-step li { position: relative; display: flex; align-items: center; gap: 6px; }
.order-step li + li::before { content: ''; position: absolute; left: -26px; top: 50%; width: 12px; height: 1px; background: var(--c-base7); }
.order-step span { font-weight: 700; }
.order-step .is-active { color: var(--c-primary); font-weight: 500; }

/* ==========================================================================
   Layout
   ========================================================================== */
.order { display: flex; align-items: flex-start; gap: 40px; margin-top: 60px; }
.order__main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 40px; }
.order__side { position: sticky; top: 40px; flex-shrink: 0; display: flex; flex-direction: column; gap: 24px; width: 400px; }

.order-sec { display: flex; flex-direction: column; gap: 20px; padding-top: 20px; border-top: 1px solid var(--c-black); }
.order-sec__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.order-sec__tit { font-size: 18px; line-height: 26px; font-weight: 700; }
.order-sec__tit em { font-style: normal; color: var(--c-primary); }

/* ==========================================================================
   주문 상품
   ========================================================================== */
.order-item { display: flex; align-items: flex-start; gap: 24px; padding-bottom: 20px; border-bottom: 1px solid var(--c-base8); }
.order-item__thumb { position: relative; flex-shrink: 0; width: 120px; aspect-ratio: 1 / 1; overflow: hidden; background: var(--c-base9); }
.order-item__thumb .pd-figure { width: 78.48%; height: 86.31%; }
.order-item__info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.order-item__name { display: flex; align-items: center; gap: 8px; }
.order-item__name strong { font-size: 16px; line-height: 24px; font-weight: 500; }
.order-item__opts { display: flex; flex-direction: column; gap: 4px; font-size: 14px; line-height: 20px; }
.order-item__opts li { display: flex; gap: 12px; }
.order-item__opts span { flex-shrink: 0; width: 64px; color: var(--c-base4); }
.order-item__files { display: flex; flex-wrap: wrap; gap: 6px; }
.order-item__files li { display: flex; align-items: center; gap: 6px; max-width: 100%; padding: 4px 10px 4px 4px; border-radius: 4px; background: var(--c-base9); font-size: 13px; line-height: 18px; color: var(--c-base2); }
.order-item__files img { flex-shrink: 0; width: 24px; height: 24px; border-radius: 3px; object-fit: cover; }
.order-item__price { flex-shrink: 0; display: flex; gap: 2px; font-size: 16px; line-height: 24px; white-space: nowrap; }
.order-item__price strong { font-weight: 700; }

/* ==========================================================================
   입력
   ========================================================================== */
.order-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 16px; }
.order-field { display: flex; flex-direction: column; gap: 8px; }
.order-field--full { grid-column: 1 / -1; }
.order-field > label { font-size: 14px; line-height: 20px; font-weight: 500; }
.order-field > label em { margin-left: 2px; font-style: normal; color: var(--c-red); }

.order-input { position: relative; display: flex; align-items: center; height: 48px; padding: 0 14px; border: 1px solid var(--c-base8); border-radius: 4px; background: var(--c-white); transition: border-color .2s, background-color .2s; }
.order-input:focus-within { border-color: var(--c-primary); }
.order-input input, .order-input select { flex: 1; min-width: 0; width: 100%; height: 100%; padding: 0; border: 0; background: none; font: inherit; font-size: 14px; line-height: 20px; color: var(--c-black); outline: 0; }
.order-input input::placeholder { color: var(--c-base8); }
.order-input input[readonly] { cursor: default; }
.order-input--select select { padding-right: 28px; appearance: none; -webkit-appearance: none; cursor: pointer; }
.order-input--select select:invalid, .order-input--select select.is-empty { color: var(--c-base8); }
.order-input--select::after { content: ''; position: absolute; right: 12px; top: 50%; width: 20px; height: 20px; margin-top: -10px; background: url('../images/common/ic_drop_down.svg') no-repeat center / 100%; pointer-events: none; }

.order-addr { display: flex; flex-direction: column; gap: 8px; }
.order-addr__zip { display: flex; gap: 8px; }
.order-addr__zip .order-input { flex: 0 1 240px; }
.order-btn { flex-shrink: 0; height: 48px; padding: 0 20px; border: 1px solid var(--c-primary); border-radius: 4px; background: var(--c-white); font-size: 14px; line-height: 20px; font-weight: 500; color: var(--c-primary); white-space: nowrap; transition: background-color .2s; }
.order-btn:hover { background: #f5f2ee; }

/* 체크박스 */
.order-check { position: relative; display: inline-flex; align-items: flex-start; gap: 8px; font-size: 14px; line-height: 20px; cursor: pointer; }
.order-check input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.order-check span { display: flex; gap: 8px; }
.order-check span::before {
  content: '';
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  border: 1px solid var(--c-base6);
  border-radius: 4px;
  background: var(--c-white) no-repeat center / 14px;
  transition: background-color .2s, border-color .2s;
}
.order-check input:checked + span::before {
  border-color: var(--c-primary);
  background-color: var(--c-primary);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M2.5 7.2 5.6 10.2 11.5 4' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.order-check input:focus-visible + span::before { outline: 2px solid var(--c-primary); outline-offset: 2px; }

/* ==========================================================================
   결제 금액 · 동의
   ========================================================================== */
.order-sum { display: flex; flex-direction: column; gap: 20px; padding: 28px 24px; border-radius: 8px; background: #f5f2ee; }
.order-sum .pd-total__sum { border-top-color: rgba(58, 46, 36, .15); }
.order-sum .pd-total__sum strong { color: var(--c-primary); }

.order-agree { display: flex; flex-direction: column; gap: 12px; }
.order-check--all { padding-bottom: 12px; border-bottom: 1px solid var(--c-base8); font-size: 15px; line-height: 22px; font-weight: 500; }
.order-check--all span::before { margin-top: 1px; }
.order-agree__list { display: flex; flex-direction: column; gap: 10px; }
.order-agree__list li { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.order-agree__list .order-check { color: var(--c-base2); }
.order-agree__list a { flex-shrink: 0; font-size: 13px; line-height: 20px; color: var(--c-base4); text-decoration: underline; text-underline-position: from-font; }
.order-agree__note { font-size: 13px; line-height: 18px; color: var(--c-base4); }

.order-pay-btn { flex: none; width: 100%; height: 56px; font-weight: 500; }
.order-pay-btn:disabled { border-color: #f4f4f4; background: #f4f4f4; color: var(--c-base7); opacity: 1; cursor: default; }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1279px) {
  .order__side { width: 360px; }
}

@media (max-width: 1023px) {
  .sub-wrap--order { padding-bottom: 100px; }
  .order { flex-direction: column; align-items: stretch; }
  .order__side { position: static; width: 100%; }
}

@media (max-width: 767px) {
  .sub-wrap--order { padding-bottom: 80px; }
  .order-title { margin-top: 40px; }
  .order-step { gap: 28px; margin-top: 16px; font-size: 14px; line-height: 20px; }
  .order-step li + li::before { left: -20px; }
  .order { gap: 32px; margin-top: 40px; }
  .order__main { gap: 32px; }
  .order-sec__tit { font-size: 16px; line-height: 24px; }
  .order-item { flex-wrap: wrap; gap: 16px; }
  .order-item__thumb { width: 88px; }
  .order-item__price { width: 100%; justify-content: flex-end; }
  .order-fields { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .order-addr__zip .order-input { flex: 1; }
  .order-sum { padding: 24px 20px; }
}

/* ==========================================================================
   장바구니 (cart.html) — 레이아웃 · 금액 · 체크박스는 위 주문서 스타일 공유
   ========================================================================== */
.order-sum--line { border: 1px solid var(--c-base8); background: none; } /* 결제 금액 박스 테두리형 (장바구니 · 주문서 · 주문완료 · 주문 상세 · 주문 조회 결과) */
.order-sum--line .pd-total__sum { border-top-color: var(--c-base8); }
.cart-sel { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-bottom: 16px; border-bottom: 1px solid var(--c-base8); }
.cart-sel i { font-style: normal; }
.cart-sel b { font-weight: 400; }
.cart-sel__del { height: 32px; padding: 0 12px; border: 1px solid var(--c-base8); border-radius: 4px; font-size: 13px; line-height: 18px; color: var(--c-base2); transition: border-color .2s; }
.cart-sel__del:hover { border-color: var(--c-base4); }

.cart-list { margin-top: -20px; }
.cart-item { position: relative; display: flex; align-items: flex-start; gap: 20px; padding: 24px 32px 24px 0; border-bottom: 1px solid var(--c-base8); }
.cart-item__check { flex-shrink: 0; margin-top: 2px; }
.cart-item__thumb.product__thumb { width: 120px; height: 120px; }
.cart-item__info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.cart-item__info a:hover strong { text-decoration: underline; text-underline-position: from-font; }
/* 정보 | 수량 | 가격 순으로 가로 배치 */
.cart-item__side { flex-shrink: 0; display: flex; align-items: center; gap: 40px; align-self: center; }
.cart-item__side .order-item__price { min-width: 110px; justify-content: flex-end; }
.cart-item__qty { flex: none; width: 112px; padding: 5px 8px; }
.cart-item__del { position: absolute; top: 24px; right: 0; width: 20px; height: 20px; }
.cart-item__del img { width: 100%; height: 100%; }

.cart-empty { display: flex; flex-direction: column; align-items: center; gap: 20px; padding: 80px 0; font-size: 16px; line-height: 24px; color: var(--c-base4); }
.cart-empty .order-btn { display: flex; align-items: center; }
.cart-empty[hidden], .cart [data-cart-filled][hidden] { display: none; }

.cart-btns { display: flex; flex-direction: column; gap: 8px; }
.cart-btns__more { flex: none; display: flex; align-items: center; justify-content: center; height: 56px; }

@media (max-width: 767px) {
  .cart-item { flex-wrap: wrap; gap: 12px 16px; padding: 20px 28px 20px 0; }
  .cart-item__thumb.product__thumb { width: 88px; height: 88px; }
  .cart-item__info { flex-basis: calc(100% - 140px); }
  .cart-item__side { justify-content: space-between; gap: 12px; width: 100%; padding-left: 36px; }
  .cart-item__side .order-item__price { width: auto; min-width: 0; }
  .cart-item__del { top: 20px; }
  .cart-empty { padding: 60px 0; font-size: 15px; line-height: 22px; }
}

/* ==========================================================================
   주문내역 (order_guest_view.html) — 비회원 주문조회 결과 목록, 상품 정보 · 금액은 위 주문서 스타일 공유
   ========================================================================== */
.ov { display: flex; flex-direction: column; margin-top: 60px; }
.ov__head { padding-bottom: 16px; border-bottom: 1px solid var(--c-black); }

/* 목록: 주문일시·주문번호 | 상품 정보 | 결제 금액 | 상태 */
.ov-table__head, .ov-row { display: grid; grid-template-columns: 200px minmax(0, 1fr) 140px 120px; align-items: center; column-gap: 24px; }
.ov-table__head { padding: 14px 0; border-bottom: 1px solid var(--c-base8); font-size: 14px; line-height: 20px; color: var(--c-base4); text-align: center; }
.ov-table__head span:nth-child(2) { text-align: left; }
.ov-row { position: relative; padding: 24px 0; border-bottom: 1px solid var(--c-base8); transition: background-color .2s; }
/* 행 전체 클릭 → 주문 상세 (주문번호 링크를 행 크기로 확장) */
.ov-row__link::after { content: ''; position: absolute; inset: 0; z-index: 1; }
.ov-row__link:focus-visible { outline: 0; }
.ov-row:has(.ov-row__link:focus-visible) { outline: 2px solid var(--c-primary); outline-offset: -2px; }
.ov-row:hover { background: #faf8f6; }
.ov-row:hover .ov-row__link { text-decoration: underline; text-underline-position: from-font; }
.my .ov-row:hover { background: var(--c-base9); } /* 마이페이지 주문 목록 (#f8f7f3) */

.ov-row__order { display: flex; flex-direction: column; gap: 4px; text-align: center; }
.ov-row__date { font-size: 15px; line-height: 22px; font-weight: 500; }
.ov-row__no { font-size: 13px; line-height: 18px; color: var(--c-base4); }
.ov-row__no i { margin-right: 6px; font-style: normal; }
.ov-row__prd { display: flex; align-items: center; gap: 20px; min-width: 0; }
.ov-row__thumb.product__thumb { width: 100px; height: 100px; }
.ov-row__price { justify-content: center; }
.ov-row__price i, .ov-status i { font-style: normal; }

/* 상태값 */
.ov-status { justify-self: center; min-width: 72px; padding: 5px 12px; border: 1px solid currentColor; border-radius: 4px; font-size: 14px; line-height: 20px; font-weight: 500; text-align: center; white-space: nowrap; }
.ov-status--receipt { color: var(--c-base2); }
.ov-status--paid { color: var(--c-primary); }
.ov-status--making { border-color: var(--c-primary); background: var(--c-primary); color: var(--c-white); }
.ov-status--done { border-color: var(--c-black); background: var(--c-black); color: var(--c-white); }
.ov-status--cancel { border-color: var(--c-base8); color: var(--c-red); }
.ov-row:has(.ov-status--cancel) .ov-row__prd, .ov-row:has(.ov-status--cancel) .ov-row__price { opacity: .5; }

.ov__btns { display: flex; justify-content: center; gap: 8px; margin-top: 40px; }
.ov__btns .pd-btns__btn { flex: 0 1 240px; display: flex; align-items: center; justify-content: center; height: 56px; }

@media (max-width: 1023px) {
  .ov-table__head, .ov-row { grid-template-columns: 150px minmax(0, 1fr) 110px 90px; column-gap: 16px; }
  .ov-row__date { font-size: 14px; line-height: 20px; }
  .ov-row__no i { display: block; margin-right: 0; }
  .ov-row__thumb.product__thumb { width: 88px; height: 88px; }
}

/* 모바일: 카드형 (상단 주문일시·번호 + 상태, 상품, 금액) */
@media (max-width: 767px) {
  .ov { margin-top: 40px; }
  .ov-table__head { display: none; }
  .ov-row { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "order status" "prd prd" "price price"; gap: 16px 12px; padding: 20px 0; }
  .ov-row__order { grid-area: order; text-align: left; }
  .ov-row__no i { display: inline; margin-right: 6px; }
  .ov-row__prd { grid-area: prd; align-items: flex-start; gap: 16px; }
  .ov-row__price { grid-area: price; justify-content: flex-end; }
  .ov-status { grid-area: status; align-self: start; min-width: 0; padding: 3px 10px; font-size: 13px; line-height: 18px; }
  .ov__btns { flex-direction: column; margin-top: 32px; }
  .ov__btns .pd-btns__btn { flex: none; }
}

/* ==========================================================================
   주문 상세 (order_guest_detail.html) — 주문내역에서 이동, 레이아웃 · 상품 · 금액 · 상태 배지 공유
   ========================================================================== */
.od-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 40px; padding: 24px 32px; border-radius: 8px; background: var(--c-base9); }
.od-head__info { display: flex; flex-wrap: wrap; gap: 8px 40px; }
.od-head__info div { display: flex; gap: 12px; font-size: 15px; line-height: 22px; }
.od-head__info dt { color: var(--c-base4); }
.od-head__info dd { font-weight: 500; }
.od-head .ov-status { background-color: var(--c-white); }
.od-head .ov-status--making { background: var(--c-primary); }
.od-head .ov-status--done { background: var(--c-black); }

/* 진행 상태: 번호 원 + 연결선 */
.od-progress { display: grid; grid-template-columns: repeat(4, 1fr); max-width: 880px; margin: 40px auto 0; counter-reset: odStep; }
.od-progress li { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; counter-increment: odStep; }
.od-progress li::before {
  content: counter(odStep, decimal-leading-zero);
  position: relative; z-index: 1;
  display: flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; margin-bottom: 8px;
  border: 1px solid var(--c-base8); border-radius: 50%; background: var(--c-white);
  font-size: 13px; line-height: 18px; font-weight: 700; color: var(--c-base6);
}
.od-progress li + li::after { content: ''; position: absolute; top: 20px; right: 50%; width: 100%; height: 1px; background: var(--c-base8); }
.od-progress strong { font-size: 15px; line-height: 22px; font-weight: 500; color: var(--c-base6); }
.od-progress span { font-size: 13px; line-height: 18px; color: var(--c-base4); }
.od-progress .is-done::before { border-color: var(--c-primary); color: var(--c-primary); }
.od-progress .is-done + li::after { background: var(--c-primary); }
.od-progress .is-done strong { color: var(--c-black); }
.od-progress .is-current::before { border-color: var(--c-primary); background: var(--c-primary); color: var(--c-white); }
.od-progress .is-current strong { color: var(--c-primary); font-weight: 700; }
.od-progress .is-current span { color: var(--c-primary); }

.od-item__thumb.product__thumb { width: 120px; height: 120px; }
.od-item__thumb + .order-item__info a:hover strong { text-decoration: underline; text-underline-position: from-font; }

.od-dl { display: flex; flex-direction: column; gap: 12px; font-size: 15px; line-height: 22px; }
.od-dl div { display: flex; gap: 16px; }
.od-dl dt { flex-shrink: 0; width: 120px; color: var(--c-base4); }
.od-dl dd { min-width: 0; overflow-wrap: anywhere; }
.od-dl__muted { color: var(--c-base4); }

@media (max-width: 767px) {
  .od-head { align-items: flex-start; gap: 12px; margin-top: 24px; padding: 20px; }
  .od-head__info { flex-direction: column; }
  .od-head__info div { font-size: 14px; line-height: 20px; }
  .od-head__info dt { width: 64px; }
  .od-head .ov-status { padding: 3px 10px; min-width: 0; font-size: 13px; line-height: 18px; }
  .od-progress { margin-top: 32px; }
  .od-progress li::before { width: 32px; height: 32px; margin-bottom: 4px; font-size: 11px; }
  .od-progress li + li::after { top: 16px; }
  .od-progress strong { font-size: 13px; line-height: 18px; }
  .od-progress span { font-size: 11px; line-height: 16px; }
  .od-item__thumb.product__thumb { width: 88px; height: 88px; }
  .od-dl { gap: 10px; font-size: 14px; line-height: 20px; }
  .od-dl dt { width: 88px; }
}

/* ==========================================================================
   주문완료 (order_complete.html) — 주문서 결제하기 후 이동, 주문 정보는 주문 상세(od-*) 스타일 공유
   ========================================================================== */
.oc-done { display: flex; flex-direction: column; align-items: center; gap: 12px; margin-top: 60px; text-align: center; }
.oc-done__ic {
  width: 64px;
  height: 64px;
  margin-bottom: 8px;
  border-radius: 50%;
  background: var(--c-primary) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M2.5 7.2 5.6 10.2 11.5 4' fill='none' stroke='%23fff' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / 32px;
}
.oc-done__tit { font-size: 28px; line-height: 40px; font-weight: 700; }
.oc-done__pay { font-size: 17px; line-height: 26px; font-weight: 500; color: var(--c-primary); }
.oc-done__txt { margin-top: 4px; font-size: 16px; line-height: 24px; color: var(--c-base2); }
.oc-done + .od-head { margin-top: 60px; }

@media (max-width: 767px) {
  .oc-done { gap: 8px; margin-top: 40px; }
  .oc-done__ic { width: 56px; height: 56px; background-size: 28px; }
  .oc-done__tit { font-size: 22px; line-height: 32px; }
  .oc-done__pay { font-size: 15px; line-height: 22px; }
  .oc-done__txt { font-size: 14px; line-height: 20px; }
  .oc-done__txt br { display: none; }
  .oc-done + .od-head { margin-top: 40px; }
}