/* ============================================================
 * 주문·결제 플로우 — NB_4200(agree)·NB_4300(payment)·NB_4300P(address_form)·
 * NB_4310(payment_complete)·NB_4320(payment_fail) 참고 재해석
 * 백엔드 계약(단일 폼 접수 → PayApp 단일 결제) 기준, 장바구니·결제수단 선택 UI 없음
 * ============================================================ */

/* 헤더는 대형 배너 표준(shared/_page_header, home.css .page-header)으로 통합 — TASK-092.
   구 .order-header(뒤로가기 + 중앙 소형 타이틀, 3뷰 인라인 중복) 규칙 이관 제거. */

/* 본문 */
.order-content {
  background: var(--color-bg);
  /* 헤더-본문 간격 = 래퍼 padding-top 단일 소유 — 첫 블록(order-section·order-hero·
     order-record-meta)의 top 성분은 0 (TASK-099) */
  padding-top: var(--space-content-top);
  padding-bottom: calc(var(--size-actionbar) + var(--safe-bottom));
}

/* 알림 배너 — 검증 실패(422)·결제 실패 복귀 alert 재해석(NB_4320) */
/* flash 표시는 전역 토스트로 이관 (TASK-051 ② — 구 .order-alert* 제거) */

/* 완료/대기 히어로 (NB_4310·4320 상단 상태 재해석 — 별도 페이지 아닌 상세 내 섹션) */
.order-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  /* top 간격은 .order-content 소유 (TASK-099 — 구 space-7 28px → 표준 16px) */
  padding: 0 var(--space-page) var(--space-6);
  text-align: center;
}
.order-hero__icon {
  width: 60px;
  height: 60px;
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-fg-on-brand);
}
.order-hero__icon--success  { background: var(--color-green-600); }
.order-hero__icon--pending  { background: var(--color-fg-brand); }
.order-hero__icon--neutral  { background: var(--color-gray-600); }
.order-hero__title { font-size: var(--font-size-xl); font-weight: var(--font-weight-semibold); color: var(--color-fg); line-height: var(--line-height-tight); }
.order-hero__desc  { font-size: var(--font-size-sm); color: var(--color-fg-muted); line-height: var(--line-height-snug); }
.order-hero__code {
  margin-top: var(--space-1);
  padding: var(--space-1) var(--space-2-5);
  background: var(--color-bg-subtle);
  border-radius: var(--radius-full);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  color: var(--color-fg-subtle);
}

/* 섹션 공통 (campaign.css .detail-section과 동형 — 페이지 전용이라 자체 정의) */
.order-section { padding: var(--space-5) var(--space-page); display: flex; flex-direction: column; gap: var(--space-3); }
/* 본문 첫 섹션(주문하기 폼 상단)만 top을 래퍼에 넘긴다 — divider 뒤 비첫 섹션의
   space-5 리듬은 보존 (TASK-099) */
.order-content > .order-section:first-child { padding-top: 0; }
.order-section__header { display: flex; align-items: center; justify-content: space-between; }
.order-section__title { font-size: var(--font-size-base); font-weight: var(--font-weight-semibold); color: var(--color-fg); line-height: var(--line-height-normal); }
.order-section__hint { font-size: var(--font-size-sm); color: var(--color-fg-subtle); }

/* 배송지 입력 fieldset — 시맨틱 유지, 시각은 order-section과 동일 */
.order-fieldset { margin: 0; padding: var(--space-5) var(--space-page); border: none; display: block; }
.order-fieldset .order-section__title { margin-bottom: var(--space-3); padding: 0; }
.order-fieldset__body { display: flex; flex-direction: column; gap: var(--space-3); }

/* 주문 상품 요약 — new(선택 상품)·show(주문 내역) 공용 */
.order-product { display: flex; align-items: center; gap: var(--space-3); }
.order-product__thumb {
  width: 56px;
  height: 56px;
  flex-shrink: 0;
  border-radius: var(--radius-md);
  background: var(--color-bg-subtle);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-gray-500);
  overflow: hidden;
}
.order-product__thumb img { width: 100%; height: 100%; object-fit: cover; }
.order-product__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.order-product__farm {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  color: var(--color-fg-subtle);
}
.order-product__title {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  color: var(--color-fg);
  line-height: var(--line-height-normal);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.order-product__meta { font-size: var(--font-size-sm); color: var(--color-fg-muted); }

/* 입력 필드 */
.order-field { display: flex; align-items: center; gap: var(--space-2); }
.order-field--stacked { flex-direction: column; align-items: stretch; gap: var(--space-1); }
.order-field__unit { flex-shrink: 0; font-size: var(--font-size-sm); color: var(--color-fg-subtle); }
.order-field__helper { font-size: var(--font-size-xs); color: var(--color-fg-subtle); line-height: var(--line-height-tight); }
.order-label { font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); color: var(--color-fg-muted); }
.order-input {
  width: 100%;
  height: var(--size-control);
  border: var(--border-width) solid var(--color-border-strong);
  border-radius: var(--radius-md);
  padding: 0 var(--space-3-5);
  background: var(--color-bg);
  font-family: var(--font-sans);
  font-size: var(--font-size-base);
  color: var(--color-fg);
  outline: none;
}
.order-input:focus { border-color: var(--color-fg-brand); }
.order-input::placeholder { color: var(--color-fg-subtle); }
.order-input--qty { max-width: 96px; }

/* 배송 정보 고지 (D-023 §4 — 팝업 고지를 폼 내 안내문으로 재해석, 동의 체크박스 없음) */
.order-notice { font-size: var(--font-size-xs); color: var(--color-fg-subtle); line-height: var(--line-height-tight); }

/* 이연 취소 안내 배너 (TASK-122 — 팝업 ② 선택 후 노출). display 선언 요소의 hidden 토글은
   [hidden] 병기 필수 — hidden 속성이 author display에 지는 캐스케이드 함정 (교훈 D-907) */
.order-cancel-notice {
  display: block;
  margin: var(--space-4) var(--space-page) 0; /* 아래 간격은 후속 .order-section 패딩이 제공 */
  padding: var(--space-2-5) var(--space-3);
  border-radius: var(--radius-md);
  background: var(--color-bg-subtle);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-fg);
  line-height: var(--line-height-snug);
}
.order-cancel-notice[hidden] { display: none; }

/* 안내 박스 (NB_4200 결제수단/리워드 안내 재해석 — PayApp 단일, 즉시지급 규칙 반영) */
.order-info-box {
  padding: var(--space-3) var(--space-3-5);
  background: var(--color-bg-muted);
  border-radius: var(--radius-md);
  font-size: var(--font-size-sm);
  color: var(--color-fg-muted);
  line-height: var(--line-height-snug);
}
.order-info-box--brand { background: var(--color-bg-brand); color: var(--color-fg-brand-strong); }
.order-info-box + .order-info-box { margin-top: var(--space-2); }

/* 금액/정보 요약 (dl > row(div) > dt/dd — delivery-tracking__meta와 동형 패턴) */
.order-summary { display: flex; flex-direction: column; gap: var(--space-2); }
.order-summary__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  font-size: var(--font-size-base);
  color: var(--color-fg-muted);
}
.order-summary__row dt { flex-shrink: 0; }
.order-summary__row dd { font-weight: var(--font-weight-medium); color: var(--color-fg); text-align: right; }
.order-summary__row--total {
  padding-top: var(--space-3);
  border-top: var(--border-width) solid var(--color-border);
}
.order-summary__row--total dt { font-weight: var(--font-weight-semibold); color: var(--color-fg); }
.order-summary__row--total dd { font-weight: var(--font-weight-bold); color: var(--color-fg-brand-strong); font-size: var(--font-size-lg); }

/* 하단 고정 CTA — campaign.css .action-bar 재사용, button_to form 래퍼만 flex 무력화 */
.order-cta-form { display: contents; }
.order-link-btn { display: flex; align-items: center; justify-content: center; text-decoration: none; }

/* ============================================================
 * dev 전용 요소 (TASK-038 기능 — ref 디자인에 없는 컨트롤, TASK-041 병합 보존)
 * ============================================================ */

/* 입력 + 우측 보조 버튼 행 (주소 검색·전액 사용) */
.order-field__row { display: flex; gap: var(--space-2); }
.order-field__row .order-input { flex: 1; min-width: 0; }

.order-side-btn {
  flex-shrink: 0;
  height: var(--size-control);
  padding: 0 var(--space-3-5);
  border: var(--border-width) solid var(--color-border-strong);
  border-radius: var(--radius-md);
  background: var(--color-bg-subtle);
  cursor: pointer;
  font-family: var(--font-sans);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-fg);
}

/* 결제 전 안내 카피 목록 (TASK-038 ④ — 전문 = DEV-022 §4) */
.order-notice-list {
  margin: 0;
  padding-left: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

/* 계산 근거 한 줄 수식 (T38-D09 — order-form 컨트롤러가 실시간 갱신) */
.order-summary__formula {
  margin: 0;
  font-size: var(--font-size-sm);
  color: var(--color-fg-muted);
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* ============================================================
 * 주문 기록·배송 정보 수정 (TASK-043 — record 화면 + P-21 수정 팝업)
 * dialog 스타일을 orders.css에 두는 이유: overlays.css는 병렬 TASK-044 소유
 * ============================================================ */

/* 주문 메타 한 줄 (주문번호 · 주문일 · 상태 배지)
   하단 여백 0이면 바로 뒤 .section-divider(8px 회색 띠)에 붙어 상단이 답답해 보였다
   (#14재 '비율 안 맞음' 상단). 하단 space-4는 그 정합 유지 — top 간격은
   .order-content 소유로 이관 (TASK-099, 구 상하 대칭 space-4). */
.order-record-meta {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: 0 var(--space-page) var(--space-4);
  font-size: var(--font-size-sm);
  color: var(--color-fg-muted);
}
.order-record-meta__id { font-weight: var(--font-weight-semibold); color: var(--color-fg); }
.order-record-meta .badge { margin-left: auto; }

/* 주문 기록(record) 화면 전용 보정 (TASK-059 #14재·#15).
   record는 하단 액션바도 하단 탭 네비도 없다 — order-content 기본 padding-bottom
   (actionbar 76px 예약)은 존재하지 않는 바를 위한 죽은 흰 여백이라 화면이 아래로
   비어 '비율이 안 맞아' 보였고, 짧은 본문 아래로 .app-shell 회색 바탕이 드러났다.
   record만 콜백(order-record-meta 직속 보유)으로 골라: ① 죽은 액션바 예약 제거·일반 하단
   여백으로, ② min-height로 흰 본문을 화면 하단까지 채워 회색 공백 제거(상단 정렬 상세 화면).
   show/new(.order-hero 사용·액션바 보유)는 선택자에 안 걸려 무영향.
   box-sizing:border-box는 전역 리셋에 이미 있으나 min-height+padding 오버플로 방지 명시. */
.order-content:has(> .order-record-meta) {
  box-sizing: border-box;
  /* 헤더 고정 높이 = 대형 배너 표준 토큰 (TASK-092 — 구 56px 리터럴 토큰화, 상태바 없음) */
  min-height: calc(100dvh - var(--size-header-lg));
  padding-bottom: calc(var(--safe-bottom) + var(--space-6));
}

/* 배송 정보 수정 아이콘 버튼 */
.order-edit-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: none;
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--color-fg-muted);
  cursor: pointer;
}
.order-edit-btn:hover { background: var(--color-bg-subtle); color: var(--color-fg); }

/* 수정 팝업 — login-gate와 동형 <dialog> 패턴.
   margin:auto 필수 — 전역 리셋(*{margin:0})이 UA의 dialog 중앙 정렬을 덮는다 (T38-D12) */
.delivery-edit {
  margin: auto;
  border: none;
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  width: min(calc(100% - 48px), 360px);
  background: var(--color-bg);
  color: var(--color-fg);
  font-family: var(--font-sans);
}
.delivery-edit::backdrop { background: rgba(26, 28, 32, 0.5); } /* ::backdrop은 :root 변수 미상속 우려 — tokens --color-overlay-dim 값 복사 */
.delivery-edit__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-4);
}
.delivery-edit__title { font-size: var(--font-size-base); font-weight: var(--font-weight-semibold); }
.delivery-edit__close {
  display: flex;
  border: none;
  background: transparent;
  padding: var(--space-1);
  color: var(--color-fg-muted);
  cursor: pointer;
}
.delivery-edit__form { display: flex; flex-direction: column; gap: var(--space-3); }
.delivery-edit__submit {
  height: var(--size-control);
  border: none;
  border-radius: var(--radius-md);
  background: var(--color-bg-brand-solid);
  color: var(--color-fg-on-brand);
  font-family: var(--font-sans);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  cursor: pointer;
}