/* ============================================================
 * 배송조회 — 주문 상세(NB_3600) 참고본 (TASK-036 ⑨ 대체)
 * Figma 179:2164(NB_5110_delivery_tracking) 참고 — 상태 배지 + 단계 진행바 카드
 * ============================================================ */

.delivery-tracking {
  margin-top: var(--space-6);
  /* 좌우 패딩 — 위 블록(.order-hero·.order-section·.order-fieldset)과 동일한 var(--space-page)로 통일 (TASK-102 ③).
     어드민 프리뷰(.tracking-preview-viewport)는 자체 좌우 패딩을 0으로 내려 이중 패딩 회피 (tracking_preview.css) */
  padding: var(--space-5) var(--space-page);
  border-top: var(--border-width) solid var(--color-border);
}

.delivery-tracking__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  margin: 0 0 var(--space-4);
}
.delivery-tracking__title {
  margin: 0;
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  color: var(--color-fg);
  line-height: var(--line-height-normal);
}

/* 상태 배지 — preparing·shipped는 진행중(브랜드 오렌지), delivered는 완료(그린) */
.delivery-tracking__badge {
  flex-shrink: 0;
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  color: var(--color-fg-on-brand);
  line-height: var(--line-height-tight);
  white-space: nowrap;
}
/* 흰 글씨 면 = bg-* 계열만 (R1 M3) — fg-brand(orange-600)는 흰 11px 위 3.44로 AA 미달 */
.delivery-tracking__badge--preparing,
.delivery-tracking__badge--shipped { background: var(--color-bg-brand-solid); }
.delivery-tracking__badge--delivered { background: var(--color-green-700); } /* 흰글씨 5.40, green-600은 4.47 */

/* 진행바 — 5단계(주문접수·결제완료·상품준비중·배송중·배송완료) 중 현재 단계까지 채움 */
.delivery-tracking__progress {
  margin: 0 0 var(--space-4);
  padding: var(--space-4);
  background: var(--color-bg-muted);
  border-radius: var(--radius-lg);
}
.delivery-tracking__progress-track {
  height: 8px;
  background: var(--color-border);
  border-radius: var(--radius-full);
  overflow: hidden;
}
.delivery-tracking__progress-fill {
  height: 100%;
  border-radius: var(--radius-full);
  transition: width 0.2s ease;
}
.delivery-tracking__progress-fill--preparing,
.delivery-tracking__progress-fill--shipped { background: var(--color-fg-brand); }
.delivery-tracking__progress-fill--delivered { background: var(--color-green-600); }

.delivery-tracking__stages {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-1);
  margin-top: var(--space-3);
}
.delivery-tracking__stage {
  flex: 1;
  font-size: var(--font-size-sm);
  color: var(--color-fg-subtle);
  line-height: var(--line-height-snug);
  text-align: center;
}
.delivery-tracking__stage:first-child { text-align: left; }
.delivery-tracking__stage:last-child { text-align: right; }
.delivery-tracking__stage--current {
  font-weight: var(--font-weight-semibold);
}
.delivery-tracking__stage--current.delivery-tracking__stage--preparing,
.delivery-tracking__stage--current.delivery-tracking__stage--shipped { color: var(--color-fg-brand-strong); }
.delivery-tracking__stage--current.delivery-tracking__stage--delivered { color: var(--color-green-600); }

.delivery-tracking__notice {
  margin: 0;
  padding: var(--space-4);
  background: var(--color-bg-muted);
  border-radius: var(--radius-md);
  font-size: var(--font-size-base);
  color: var(--color-fg-muted);
  line-height: var(--line-height-normal);
}

.delivery-tracking__meta {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  margin: 0 0 var(--space-4);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-snug);
}
.delivery-tracking__meta-row { display: flex; align-items: center; gap: var(--space-2); }
.delivery-tracking__meta-label { display: flex; align-items: center; gap: var(--space-1); color: var(--color-fg-subtle); }
.delivery-tracking__meta-icon { color: var(--color-fg-subtle); flex-shrink: 0; }
.delivery-tracking__meta-value { color: var(--color-fg); font-weight: var(--font-weight-medium); }

.delivery-timeline {
  list-style: none;
  margin: 0;
  padding: 0;
  margin-left: 5px;
  border-left: 2px solid var(--color-border);
}
.delivery-timeline__item {
  position: relative;
  padding: 0 0 var(--space-5) var(--space-4);
}
.delivery-timeline__item:last-child { padding-bottom: 0; }
.delivery-timeline__item::before {
  content: "";
  position: absolute;
  top: 2px;
  left: -7px;
  width: 10px;
  height: 10px;
  border-radius: var(--radius-full);
  background: var(--color-gray-500);
  border: 2px solid var(--color-bg);
}
.delivery-timeline__item--latest::before { background: var(--color-fg-brand); }
.delivery-timeline__time {
  margin: 0 0 2px;
  font-size: var(--font-size-xs);
  color: var(--color-fg-subtle);
  line-height: var(--line-height-tight);
}
.delivery-timeline__desc {
  margin: 0 0 2px;
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  color: var(--color-fg);
  line-height: var(--line-height-normal);
}
.delivery-timeline__item--latest .delivery-timeline__desc { color: var(--color-fg-brand-strong); }
.delivery-timeline__location {
  margin: 0;
  font-size: var(--font-size-sm);
  color: var(--color-fg-muted);
  line-height: var(--line-height-snug);
}

/* 배송 조회 링크 (TASK-073 ③ — 실데이터 1차): 택배사 조회 페이지 새 탭 이동 버튼형 링크 */
.delivery-tracking__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: var(--space-3);
  padding: var(--space-2) var(--space-4);
  border: var(--border-width) solid var(--color-border-strong);
  border-radius: var(--radius-md);
  color: var(--color-fg-brand-strong);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-tight);
  text-decoration: none;
}