/* 마이페이지 전용 스타일 — mypage.html 이 사용합니다.
   공통 버튼·입력창 스타일은 theme.css 에 있습니다. */

/* ---------- 불러오는 중 ---------- */
.spinner {
  width: 2.2rem; height: 2.2rem; border-radius: 999px;
  border: 3px solid #DFF0DC; border-top-color: #3B8B31;
  animation: spin 720ms linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- 요약 타일 ---------- */
.stat {
  display: flex; flex-direction: column; align-items: flex-start; gap: .15rem;
  padding: .9rem 1.05rem; text-align: left; cursor: pointer;
  border: 1px solid #EDF3EC; border-radius: 1.1rem; background: #FBFDFB;
  transition: transform 180ms cubic-bezier(.2,.7,.3,1),
              border-color 180ms ease, background-color 180ms ease, box-shadow 180ms ease;
}
.stat:hover {
  transform: translateY(-2px); border-color: #BEE0B8; background: #F1F8F0;
  box-shadow: 0 10px 20px -12px rgba(23,54,26,.24);
}
.stat:active { transform: translateY(0) scale(.985); background: #DFF0DC; }
.stat:focus-visible { outline: none; box-shadow: 0 0 0 3px #FBFBF6, 0 0 0 6px rgba(76,168,63,.5); }
.stat-num   { font-size: 1.5rem; font-weight: 800; color: #17361A; letter-spacing: -.03em; }
.stat-label { font-size: .82rem; font-weight: 600; color: #5C6F5E; }

/* ---------- 탭 줄 ---------- */
.tabbar {
  display: inline-flex; gap: .4rem; padding: .4rem;
  border-radius: 999px; background: #EDF3EC;
}

/* ---------- 상태 거르개 (주문 내역) ---------- */
.pill {
  border: 1px solid #D9E4D7; background: #fff; color: #5C6F5E;
  border-radius: 999px; padding: .48rem 1rem;
  font-size: .86rem; font-weight: 700; cursor: pointer;
  transition: background-color 160ms ease, border-color 160ms ease,
              color 160ms ease, transform 160ms ease;
}
.pill:hover { border-color: #94CE8C; background: #F1F8F0; color: #2E6E27; }
.pill:active { transform: scale(.97); }
.pill:focus-visible { outline: none; box-shadow: 0 0 0 3px #FBFBF6, 0 0 0 6px rgba(76,168,63,.5); }
.pill[aria-pressed="true"] { background: #17361A; border-color: #17361A; color: #F1F8F0; }

/* ---------- 상태 배지 ---------- */
.badge {
  display: inline-flex; align-items: center; gap: .35rem;
  border-radius: 999px; padding: .3rem .75rem;
  font-size: .78rem; font-weight: 700; white-space: nowrap;
}
.badge-wait { background: #FDF3E3; color: #8A5A12; }   /* 입금 대기 · 접수 대기 */
.badge-go   { background: #DFF0DC; color: #245420; }   /* 결제 완료 · 준비중 · 확인중 */
.badge-ship { background: #E4EEFB; color: #244C7E; }   /* 배송중 */
.badge-done { background: #17361A; color: #F1F8F0; }   /* 배송 완료 · 답변 완료 */
.badge-off  { background: #EFEFEC; color: #6B6B63; }   /* 취소 */

/* ---------- 주문 카드 ---------- */
.order-card {
  border: 1px solid #DFF0DC; border-radius: 1.5rem; background: #fff;
  box-shadow: 0 1px 2px rgba(23,54,26,.05), 0 14px 28px -18px rgba(23,54,26,.2);
  overflow: hidden;
}
.order-head {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: .75rem; padding: 1.1rem 1.35rem;
  border-bottom: 1px solid #F1F8F0; background: #FBFDFB;
}

/* ---------- 배송 진행 막대 ---------- */
.steps { display: flex; align-items: flex-start; }
.step  { flex: 1; text-align: center; position: relative; min-width: 0; }

/* 단계 사이를 잇는 선 — 점 한가운데 높이에 맞춥니다 */
.step::before {
  content: ""; position: absolute; top: .62rem; left: -50%;
  width: 100%; height: 2px; background: #E3EBE2;
}
.step:first-child::before { display: none; }
.step-dot {
  position: relative; z-index: 1; margin: 0 auto;
  width: 1.25rem; height: 1.25rem; border-radius: 999px;
  border: 2px solid #E3EBE2; background: #fff;
}
.step-label {
  display: block; margin-top: .5rem;
  font-size: .78rem; font-weight: 600; color: #9BAA9C; letter-spacing: -.01em;
}

/* 지나온 단계 */
.step.on::before  { background: #6FBF63; }
.step.on .step-dot { border-color: #3B8B31; background: #3B8B31; }
.step.on .step-label { color: #2E6E27; font-weight: 700; }

/* 지금 단계 — 테두리를 한 겹 더 둘러 눈에 띄게 합니다 */
.step.now .step-dot { box-shadow: 0 0 0 4px rgba(76,168,63,.22); }
.step.now .step-label { color: #17361A; }

/* ---------- 운송장 ---------- */
.track-box {
  display: flex; flex-wrap: wrap; align-items: center; gap: .6rem .9rem;
  border: 1px dashed #BEE0B8; border-radius: 1rem;
  padding: .85rem 1.05rem; background: #F7FBF6;
}
.track-no {
  font-weight: 800; letter-spacing: .01em; color: #17361A;
  font-variant-numeric: tabular-nums;
}
.mini {
  border: 1px solid #D9E4D7; background: #fff; color: #2E6E27;
  border-radius: 999px; padding: .35rem .85rem;
  font-size: .8rem; font-weight: 700; cursor: pointer;
  transition: background-color 150ms ease, border-color 150ms ease, transform 150ms ease;
}
.mini:hover { background: #F1F8F0; border-color: #94CE8C; }
.mini:active { transform: scale(.96); }
.mini:focus-visible { outline: none; box-shadow: 0 0 0 3px #FBFBF6, 0 0 0 5px rgba(76,168,63,.5); }

/* ---------- 상품 카드 (찜 · 최근 본) ---------- */
.prod {
  display: flex; gap: .9rem; align-items: center;
  border: 1px solid #EDF3EC; border-radius: 1.25rem; background: #fff; padding: .8rem;
  transition: transform 200ms cubic-bezier(.2,.7,.3,1), box-shadow 200ms ease, border-color 200ms ease;
}
.prod:hover {
  transform: translateY(-3px); border-color: #BEE0B8;
  box-shadow: 0 14px 26px -16px rgba(23,54,26,.3);
}
.prod-thumb {
  flex: none; width: 4.25rem; height: 4.25rem;
  border-radius: .95rem; object-fit: cover; background: #F1F8F0;
}
.prod-link { min-width: 0; flex: 1; text-decoration: none; }
.prod-link:focus-visible { outline: none; border-radius: .8rem; box-shadow: 0 0 0 3px #FBFBF6, 0 0 0 6px rgba(76,168,63,.5); }

/* ---------- 빈 화면 ---------- */
.empty {
  border: 1px solid #E7EFE6; border-radius: 1.5rem; background: #fff;
  padding: 3rem 1.5rem; text-align: center;
}
.empty-icon {
  display: flex; align-items: center; justify-content: center;
  width: 3.5rem; height: 3.5rem; margin: 0 auto 1.1rem;
  border-radius: 999px; background: #F1F8F0; color: #6FBF63;
}

@media (prefers-reduced-motion: reduce) {
  .spinner { animation-duration: 2s; }
  .stat, .pill, .prod, .mini { transition: none !important; }
}