/* 쇼홈 손님 회원 화면(로그인·가입·내 정보, 3-1) — 이 세 화면에서만 읽는다(공용 shop.css 와 그 ?v= 는 그대로).
   색·여백·모서리·글자 크기는 var(--seed-…) 와 shop.css 의 카카오·네이버 브랜드 색(--shop-kakao-*·--shop-naver-bg)만 쓴다.
   폰(375)에서 로그인 버튼은 한 줄 전체 폭. */
.shop-member {
  max-width: 480px;
}

.shop-member__lead,
.shop-member__closed,
.shop-member__loading,
.shop-member__joined,
.shop-member__soon,
.shop-member__notice {
  margin: var(--seed-dimension-x4) 0 0;
  font-size: var(--seed-font-size-t5);
  line-height: var(--seed-line-height-t5);
}

.shop-member__joined {
  font-weight: var(--seed-font-weight-bold);
}

.shop-member__soon,
.shop-member__loading {
  color: var(--seed-color-fg-neutral-muted);
}

/* 안내 한 줄(탈퇴 끝·로그아웃·오류) — 화면 읽기 프로그램이 읽는다(role=status) */
.shop-member__notice {
  padding: var(--seed-dimension-x3) var(--seed-dimension-x4);
  border-radius: var(--seed-radius-r2);
  background: var(--seed-color-bg-neutral-weak);
}

.shop-member__notice--critical {
  background: var(--seed-color-bg-critical-weak);
  color: var(--seed-color-fg-critical);
}

.shop-member__social {
  display: grid;
  gap: var(--seed-dimension-x3);
}

.shop-member__social .shop-member__lead {
  margin-bottom: var(--seed-dimension-x1);
}

/* 카카오·네이버 로그인 버튼 — 각 회사 가이드 색, 높이 48, 한 줄 전체 폭 */
.shop-member__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--seed-dimension-x2);
  width: 100%;
  min-height: var(--seed-dimension-x12);
  padding: 0 var(--seed-dimension-x4);
  border-radius: var(--seed-radius-r3);
  font-size: var(--seed-font-size-t5);
  line-height: var(--seed-line-height-t5);
  font-weight: var(--seed-font-weight-bold);
  text-decoration: none;
}

body.shop .shop-member__btn--kakao {
  background: var(--shop-kakao-bg);
  color: var(--shop-kakao-fg);
}

body.shop .shop-member__btn--naver {
  background: var(--shop-naver-bg);
  color: var(--seed-color-palette-static-white);
}

.shop-member__btn svg {
  flex: none;
}

.shop-member__inapp,
.shop-member__more {
  margin: 0;
  font-size: var(--seed-font-size-t4);
  line-height: var(--seed-line-height-t4);
  color: var(--seed-color-fg-neutral-muted);
}

.shop-member__more summary {
  cursor: pointer;
}

.shop-member__more p {
  margin: var(--seed-dimension-x2) 0 0;
}

.shop-member__form {
  display: grid;
  gap: var(--seed-dimension-x4);
}

.shop-member__home {
  margin: var(--seed-dimension-x8) 0 0;
  font-size: var(--seed-font-size-t4);
}

.shop-member__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--seed-dimension-x2);
  margin-top: var(--seed-dimension-x6);
}

@media (max-width: 479px) {
  .shop-member__actions > * {
    flex: 1 1 100%;
  }
}

/* ── 3-2 내 주문(/my/) · 비회원 주문 조회(/track/) ──
   PC(>900) = 표 + 페이지 넘김 + 줄을 누르면 표 아래 상세 · 폰·탭(≤900) = 한 줄 요약 카드 → 그 자리에서 펼침.
   로그인 버튼·가입 정보·조회 칸은 지금처럼 좁은 한 줄(480px), 주문 칸만 넓게. 가로 넘침 0(375·1050). */
.shop-member--wide {
  max-width: 1040px;
}

.shop-member--wide .shop-member__notice,
.shop-member--wide .shop-member__loading,
.shop-member--wide .shop-member__social,
.shop-member--wide .shop-member__me,
.shop-member--wide .shop-track {
  max-width: 480px;
}

.shop-member__track {
  margin: 0;
  font-size: var(--seed-font-size-t4);
  line-height: var(--seed-line-height-t4);
}

.shop-member__saved {
  margin: var(--seed-dimension-x6) 0 0;
  font-size: var(--seed-font-size-t4);
  line-height: var(--seed-line-height-t4);
  color: var(--seed-color-fg-neutral-muted);
}

.shop-member__forget {
  padding: var(--seed-dimension-x1) var(--seed-dimension-x2);
  border: 0;
  background: none;
  font: inherit;
  color: var(--seed-color-fg-neutral);
  text-decoration: underline;
  cursor: pointer;
}

.shop-member__top {
  margin: var(--seed-dimension-x8) 0 0;
  text-align: right;
  font-size: var(--seed-font-size-t4);
}

.shop-mine {
  display: grid;
  gap: var(--seed-dimension-x3);
  margin-top: var(--seed-dimension-x6);
}

.shop-mine__title {
  margin: 0;
  font-size: var(--seed-font-size-t7);
  line-height: var(--seed-line-height-t7);
  font-weight: var(--seed-font-weight-bold);
}

.shop-mine__status,
.shop-mine__empty,
.shop-mine__loading,
.shop-mine__muted {
  margin: 0;
  font-size: var(--seed-font-size-t4);
  line-height: var(--seed-line-height-t4);
  color: var(--seed-color-fg-neutral-muted);
}

.shop-mine__status:empty {
  display: none;
}

/* PC 표 — 줄 전체를 누르면 아래 상세 칸이 열린다(주문번호 칸은 키보드용 버튼) */
.shop-mine__table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--seed-font-size-t4);
  line-height: var(--seed-line-height-t4);
}

.shop-mine__table th,
.shop-mine__table td {
  padding: var(--seed-dimension-x3) var(--seed-dimension-x2);
  border-bottom: 1px solid var(--seed-color-stroke-neutral-muted);
  text-align: left;
  vertical-align: middle;
}

.shop-mine__table th {
  font-weight: var(--seed-font-weight-bold);
  color: var(--seed-color-fg-neutral-muted);
  white-space: nowrap;
}

.shop-mine__table tbody tr {
  cursor: pointer;
}

.shop-mine__table tbody tr:hover,
.shop-mine__table tbody tr.is-open {
  background: var(--seed-color-bg-neutral-weak);
}

.shop-mine__table .shop-mine__amount {
  text-align: right;
}

.shop-mine__open {
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: var(--seed-color-fg-neutral);
  text-decoration: underline;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
}

.shop-mine__amount {
  white-space: nowrap;
  font-weight: var(--seed-font-weight-bold);
  font-variant-numeric: tabular-nums;
}

/* 폰·탭 카드 — 날짜·단계 한 줄, 상품·금액 한 줄. 누르면 카드 안에서 펼침(한 번에 하나) */
.shop-mine__cards {
  display: grid;
  gap: var(--seed-dimension-x2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.shop-mine__cards:empty {
  display: none;
}

.shop-mine__card {
  border: 1px solid var(--seed-color-stroke-neutral-muted);
  border-radius: var(--seed-radius-r3);
  background: var(--seed-color-bg-layer-default);
}

.shop-mine__card-head {
  display: grid;
  gap: var(--seed-dimension-x1);
  width: 100%;
  padding: var(--seed-dimension-x3) var(--seed-dimension-x4);
  border: 0;
  border-radius: var(--seed-radius-r3);
  background: none;
  font: inherit;
  color: var(--seed-color-fg-neutral);
  text-align: left;
  cursor: pointer;
}

.shop-mine__card-top,
.shop-mine__card-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--seed-dimension-x2);
  min-width: 0;
}

.shop-mine__date {
  font-size: var(--seed-font-size-t3);
  color: var(--seed-color-fg-neutral-muted);
  font-variant-numeric: tabular-nums;
}

.shop-mine__card-bottom .shop-mine__summary {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.shop-mine__slot {
  padding: 0 var(--seed-dimension-x4) var(--seed-dimension-x4);
}

@media (max-width: 900px) {
  .shop-mine__table {
    display: none;
  }
}

@media (min-width: 901px) {
  .shop-mine__cards {
    display: none;
  }
}

.shop-mine__pages {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--seed-dimension-x3);
  font-size: var(--seed-font-size-t4);
  font-variant-numeric: tabular-nums;
}

.shop-mine__page {
  min-height: 40px;
  padding: 0 var(--seed-dimension-x4);
  border: 1px solid var(--seed-color-stroke-neutral-muted);
  border-radius: var(--seed-radius-r2);
  background: var(--seed-color-bg-layer-default);
  font: inherit;
  color: var(--seed-color-fg-neutral);
  cursor: pointer;
}

.shop-mine__page:disabled {
  color: var(--seed-color-fg-disabled);
  cursor: default;
}

/* 상세 — PC 는 표 아래 칸, 폰은 카드 안. 조회 화면도 같은 모양 */
.shop-mine__panel {
  padding: var(--seed-dimension-x5);
  border: 1px solid var(--seed-color-fg-neutral);
  border-radius: var(--seed-radius-r4);
  scroll-margin-top: var(--seed-dimension-x16);
}

.shop-track__result {
  margin-top: var(--seed-dimension-x6);
}

.shop-mine__detail {
  display: grid;
  gap: var(--seed-dimension-x4);
  min-width: 0;
}

.shop-mine__head,
.shop-mine__cancelled {
  margin: 0;
  font-size: var(--seed-font-size-t5);
  line-height: var(--seed-line-height-t5);
}

/* 단계 막대 — 지난 단계는 진하게, 지금 단계는 굵게, 남은 단계는 옅게(2026-10-28 4단계 — 다섯 칸 모두 실제, 「준비 중」 칸 없음) */
.shop-mine__steps {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--seed-dimension-x1);
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--seed-font-size-t3);
  line-height: var(--seed-line-height-t3);
  text-align: center;
}

.shop-mine__step {
  display: grid;
  align-content: start;
  gap: var(--seed-dimension-x0_5);
  padding-top: var(--seed-dimension-x2);
  border-top: 4px solid var(--seed-color-stroke-neutral-muted);
  color: var(--seed-color-fg-neutral-muted);
}

.shop-mine__step[data-state="done"] {
  border-top-color: var(--seed-color-fg-neutral);
  color: var(--seed-color-fg-neutral);
}

.shop-mine__step[data-state="current"] {
  border-top-color: var(--seed-color-fg-neutral);
  color: var(--seed-color-fg-neutral);
  font-weight: var(--seed-font-weight-bold);
}

.shop-mine__step[data-state="pending"] {
  border-top-color: var(--seed-color-stroke-neutral-muted);
  color: var(--seed-color-fg-neutral-muted);
}

/* 옛 「준비 중」 칸(4단계 전 응답) — 이제 오지 않지만 열려 있던 화면을 위해 남김 */
.shop-mine__step[data-state="disabled"] {
  border-top-style: dashed;
  color: var(--seed-color-fg-disabled);
}

.shop-mine__step-soon {
  font-size: var(--seed-font-size-t2);
  line-height: var(--seed-line-height-t2);
}

.shop-mine__pay {
  display: grid;
  gap: var(--seed-dimension-x2);
  padding: var(--seed-dimension-x3) var(--seed-dimension-x4);
  border-radius: var(--seed-radius-r2);
  background: var(--seed-color-bg-neutral-weak);
}

.shop-mine__pay--late {
  background: var(--seed-color-bg-critical-weak);
  color: var(--seed-color-fg-critical);
}

.shop-mine__pay p {
  margin: 0;
}

.shop-mine__pay-title {
  font-weight: var(--seed-font-weight-bold);
}

.shop-mine__items {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
}

.shop-mine__item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--seed-dimension-x3);
  align-items: center;
  padding: var(--seed-dimension-x3) 0;
  border-bottom: 1px solid var(--seed-color-stroke-neutral-muted);
}

.shop-mine__item-text {
  display: grid;
  min-width: 0;
}

.shop-mine__item-name,
.shop-mine__item-option {
  font-size: var(--seed-font-size-t3);
  line-height: var(--seed-line-height-t3);
  color: var(--seed-color-fg-neutral-muted);
}

.shop-mine__item-size {
  font-size: var(--seed-font-size-t4);
  line-height: var(--seed-line-height-t4);
}

.shop-mine__pairs,
.shop-mine__sums {
  display: grid;
  gap: var(--seed-dimension-x1);
  margin: 0;
  font-size: var(--seed-font-size-t4);
  line-height: var(--seed-line-height-t4);
}

.shop-mine__pairs div {
  display: grid;
  grid-template-columns: 6.5em minmax(0, 1fr);
  gap: var(--seed-dimension-x3);
}

.shop-mine__sums {
  margin-top: var(--seed-dimension-x3);
}

.shop-mine__sums div {
  display: flex;
  justify-content: space-between;
  gap: var(--seed-dimension-x3);
}

.shop-mine__sums div:last-child {
  margin-top: var(--seed-dimension-x1);
  padding-top: var(--seed-dimension-x2);
  border-top: 1px solid var(--seed-color-stroke-neutral-muted);
  font-weight: var(--seed-font-weight-bold);
}

.shop-mine__pairs dt,
.shop-mine__sums dt {
  color: var(--seed-color-fg-neutral-muted);
}

.shop-mine__pairs dd,
.shop-mine__sums dd {
  margin: 0;
  min-width: 0;
}

.shop-mine__sums dd {
  font-variant-numeric: tabular-nums;
}

.shop-mine__contact {
  justify-self: start;
  text-decoration: none;
}

@media (max-width: 479px) {
  .shop-mine__panel {
    padding: var(--seed-dimension-x4);
  }

  .shop-mine__pairs div {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
  }
}

/* ★ 2026-10-20 거래명세서 버튼(주문 상세) — 판·인쇄 모양은 shop.css 견적서(.shop-quote-*)와 같다 */
.shop-mine__stmt {
  justify-self: start;
}

.shop-quote-paper__sign--to {
  margin-top: var(--seed-dimension-x2, 8px);
}

/* ★ 2026-10-20 송장 줄 — [배송 조회] 버튼은 왼쪽에(택배사 공식 조회 주소, 새 창) */
.shop-mine__ship {
  display: grid;
  gap: var(--seed-dimension-x2, 8px);
}

.shop-mine__track {
  justify-self: start;
  text-decoration: none;
}

/* ★ 2026-10-28 4단계 「배송 완료 · 날짜」 줄(.shop-mine__pay 모양 그대로)의 [후기 남기기] — 왼쪽에(같은 사이트 상품 화면 후기 칸) */
.shop-mine__review {
  justify-self: start;
  text-decoration: none;
}