/* EmptyState — 마이페이지 리스트류 데이터 없음 공통 상태 */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  padding: 80px 16px;
  background: #ffffff;
}

.empty-state__icon-text {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.empty-state__message {
  font-family: Pretendard, sans-serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 18px;
  letter-spacing: 0.0014em;
  color: #9b9b9b;
  text-align: center;
  margin: 0;
}

.empty-state__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 7px 20px;
  border: none;
  border-radius: 8px;
  text-decoration: none;
  cursor: pointer;
}

.empty-state__button--dark {
  background: #202020;
}

.empty-state__button--dark .empty-state__button-label {
  color: #ffffff;
}

/* accent(1:1문의 Empty 등) — Figma CS-003: 빈 안내는 하단 80px 패딩으로 끝나고,
   그 아래 별도 ButtonArea(pad 16/16/20)에 328×52 전폭 버튼이 놓임.
   컨테이너 gap 96 = 빈 안내 하단 80 + ButtonArea 상단 16 */
.empty-state--accent {
  gap: 96px;
  padding: 80px 16px 20px;
}

.empty-state__button--accent {
  width: 100%;
  height: 52px;
  border-radius: 8px;
  background: #f0f4fe;
}

/* Figma Button/Buttons 라벨 16px/500 (dark variant 14px/500과 구분) */
.empty-state__button--accent .empty-state__button-label {
  font-size: 16px;
  line-height: 24px;
  color: #3c56d6;
}

.empty-state__button-label {
  font-family: Pretendard, sans-serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 18px;
  letter-spacing: 0.0014em;
  white-space: nowrap;
}

/* 선택 트리거 — Figma Bar/FilterBar > SortButton (라벨 #404040/500) */
.select-bottom-sheet__trigger {
  display: flex;
  align-items: center;
  gap: 4px;
  height: 32px;
  padding: 0 12px;
  border: 1px solid #f5f5f5;
  border-radius: 4px;
  background-color: #fafafa;
  font-family: Pretendard, sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: #404040;
  white-space: nowrap;
}

.select-bottom-sheet__trigger-chevron {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  transform: rotate(90deg);
}

/* 폼 필드형 트리거 variant — 주문서 배송요청사항/1:1문의·상품문의 유형/클레임 사유처럼
   페이지 CSS가 트리거를 40px+ 필드로 다시 그리는 곳은 Figma 쉐브런이 24px(정렬용 32px
   pill 트리거는 16px 유지). SVG 속성(16)은 CSS width/height가 이겨서 크기만 커진다 */
.select-bottom-sheet__trigger.board-form__type-selector .select-bottom-sheet__trigger-chevron,
.select-bottom-sheet__trigger.product-inquiry-form__type .select-bottom-sheet__trigger-chevron,
.select-bottom-sheet__trigger.order-sheet__delivery-memo-trigger .select-bottom-sheet__trigger-chevron,
.claim__reason .select-bottom-sheet__trigger .select-bottom-sheet__trigger-chevron {
  width: 24px;
  height: 24px;
}

/* 딤/시트 본체/헤더(드래그핸들+타이틀)/PC 반응형은 @shared/BottomSheet 공통 스타일 사용 */

/* 옵션 목록 — Figma RadioOptionSection pad 12/24/20/24, 옵션 간 gap 16 */
.select-bottom-sheet__options {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 12px 24px 20px;
  margin: 0;
  list-style: none;
}

/* 선택 안 된 옵션은 회색, 선택된 옵션만 검정 — Figma General/RadioOption 스펙
   (라디오-라벨 gap 8, 라벨 14px/500) */
.select-bottom-sheet__option {
  display: flex;
  align-items: center;
  gap: 8px;
  background: none;
  border: none;
  padding: 0;
  font-family: Pretendard, sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: #9b9b9b;
}

.select-bottom-sheet__option.is-selected {
  color: #1a1a1a;
}

/* note(우측 보조 문구)를 오른쪽 끝으로 밀려면 버튼이 li 폭을 다 차지해야 한다. note가
   없는 기존 호출부(정렬/클레임 사유)는 내용이 왼쪽 정렬 그대로여서 보이는 건 그대로고
   탭 영역만 행 전체로 넓어진다 */
.select-bottom-sheet__option {
  width: 100%;
  text-align: left;
}

.select-bottom-sheet__option-note {
  margin-left: auto;
  padding-left: 8px;
  font-size: 13px;
  font-weight: 500;
  color: #9b9b9b;
}

/* 품절/재고부족처럼 고를 수 없는 항목 — 선택된 것과 구분되게 더 흐리게 */
.select-bottom-sheet__option.is-disabled,
.select-bottom-sheet__option.is-disabled .select-bottom-sheet__option-note {
  color: #c4c4c4;
}

.select-bottom-sheet__option.is-disabled .select-bottom-sheet__radio {
  background-color: #f5f5f5;
}

.select-bottom-sheet__radio {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 1px solid #e6e6e6;
  box-sizing: border-box;
  position: relative;
}

/* Figma General/RadioButton(Selected=True) — 테두리가 아니라 원 전체를 채우고
   가운데 흰 원(10px)을 얹어 굵은 링처럼 보이게 하는 스타일 */
.select-bottom-sheet__radio.is-selected {
  background-color: #111111;
  border-color: #111111;
}

.select-bottom-sheet__radio.is-selected::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: #fbfbfb;
  transform: translate(-50%, -50%);
}

/* CTA 영역 — Figma Button/CTAArea pad 12/16/12/16.
   (버튼 라벨 굵기는 Figma 프레임마다 표기가 달라 애매 — 현행 600 유지) */
.select-bottom-sheet__cta {
  display: flex;
  gap: 8px;
  padding: 12px 16px;
}

.select-bottom-sheet__cancel-btn,
.select-bottom-sheet__apply-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 52px;
  border-radius: 8px;
  font-family: Pretendard, sans-serif;
  font-size: 16px;
  font-weight: 600;
}

.select-bottom-sheet__cancel-btn {
  border: none;
  background-color: #f0f4fe;
  color: #3c56d6;
}

.select-bottom-sheet__apply-btn {
  border: none;
  background-color: #4a69ea;
  color: #ffffff;
}

/* variant="tabs" — Figma FilterItemGroup/Tab/FilterItem(예: 적립금 내역 MY-005의 1개월/6개월/1년) */
.start-ymd-selector--tabs {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 12px 16px;
}

.start-ymd-selector__tab {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 32px;
  padding: 0 12px;
  border: 1px solid #e6e6e6;
  border-radius: 999px;
  background-color: #ffffff;
  font-family: Pretendard, sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: #9b9b9b;
  white-space: nowrap;
}

.start-ymd-selector__tab.is-active {
  border: none;
  background-color: #202020;
  font-weight: 600;
  color: #ffffff;
}

/* ── 주문내역 페이지(Orders.tsx 루트) — Figma MY-002_주문내역(5295:30134 목록 있음 /
   5295:30178 빈 상태) ──
   벤더 기본 .orders{padding:20px}가 기간 탭/상태 탭/주문 카드 목록을 전부 안쪽으로 20px
   밀어 넣어서, 화면 끝까지 이어져야 할 상태 탭 바(Tab/CategoryMiddle)에 좌우 틈이 생기고
   기간 탭·카드 목록도 Figma 실측(16px)보다 넓게 밀림 — 적립금 내역(.my-page-accumulation)과
   동일한 방식으로 컨테이너 패딩은 리셋하고 각 섹션이 자기 몫의 패딩을 갖게 한다 */
/* main.l-content(_layout.css) 자신은 이미 flex:1로 화면 남은 높이를 다 흡수하지만
   display:block이라, 그 안의 .orders에 min-height:100%(퍼센트)를 줘도 block 조상 기준
   퍼센트 해석이 불안정해(플렉스로 늘어난 높이는 후속 자손의 퍼센트 계산에 정의된 값으로
   안 잡히는 경우가 있음) 실제로 안 늘어났음 — main 자체를 이 페이지에서만(:has로 한정,
   다른 화면에 영향 없음) flex-column으로 만들고 .orders를 flex:1로 채우는 방식으로 우회 */
main.l-content:has(> .orders) {
  display: flex;
  flex-direction: column;
}

.orders {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 0;
}

/* Tab/FilterSection(5295:30136) 실측: 좌우 16px, 위 12px, 아래 20px —
   StartYmdSelector variant="tabs" 공용 CSS(padding:12px 16px)의 아래쪽만 20px로 보정 */
.orders__period-tabs.start-ymd-selector--tabs {
  padding-bottom: 20px;
}

/* Tab/CategoryMiddle(전체/미입금/출고대기/배송중/배송완료)은 Figma상 좌우 패딩 없이
   화면 끝까지 이어짐 — 별도 패딩을 주지 않고 벤더 기본값(패딩 없음) 그대로 둔다 */

/* OrderedSection(주문 카드 목록, OrderSummary.tsx 렌더) 실측: 상하좌우 16px, 카드 사이
   간격 20px, 배경 #fafafa(페이지 프레임 자체는 흰색이고 이 목록 영역만 연회색) — 벤더 기본
   .orders__order-summary+.orders__order-summary{margin-top:32px}보다 좁음. OrderSummary.tsx
   자신은 이 목록 컨테이너 스코프 밖에서 쓰이지 않아 여기 둔다 */
.orders__list {
  flex: 1;
  padding: 16px;
  background-color: #fafafa;
}

.orders__list .orders__order-summary + .orders__order-summary {
  margin-top: 20px;
}

/* ── 주문 카드(OrderSummary.tsx) — Figma OrderedCard(5295:30139).
   카드 1개 = 주문 1건이 아니라 주문상품(orderOption) 1개다(상태·구매확정 가능 여부가
   orderOption 단위 데이터라서). 날짜/상태/주문상세보기 줄은 배경 없이 카드 바깥에 있고,
   흰 배경+보더+radius 박스(CardBody)는 상품 정보+하단 액션 버튼만 감싼다 ── */
.orders__order-summary {
  display: block;
}

/* 벤더 aurora.css .orders__identifier{justify-content:start;align-items:end;gap:12px;
   margin-bottom:8px}는 예전 마크업(날짜+주문번호) 기준 — 이제 날짜+상태만 담당하므로
   Figma CancelStateContainer(gap:4) 스펙으로 리셋 */
.orders__card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 0;
}

.orders__identifier {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-bottom: 0;
}

.orders__identifier-date {
  font-family: Pretendard, sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: #404040;
}

.orders__status-label {
  font-family: Pretendard, sans-serif;
  font-size: 14px;
  font-weight: 600;
}

.orders__status-label--blue {
  color: #3c56d6;
}

.orders__status-label--green {
  color: #009144;
}

.orders__status-label--gray {
  color: #9b9b9b;
}

.orders__detail-link {
  display: flex;
  align-items: center;
  gap: 4px;
  font-family: Pretendard, sans-serif;
  font-size: 12px;
  font-weight: 400;
  color: #9b9b9b;
  text-decoration: none;
}

/* Figma CardBody(5850:30148과 동일 톤: 흰 배경/#e6e6e6 보더/radius 8) — 상품 정보와
   하단 액션 버튼을 하나의 카드로 묶는다 */
.orders__card-body {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 18px 20px;
  border: 1px solid #e6e6e6;
  border-radius: 8px;
  background-color: #ffffff;
}

/* 벤더 .orders__product{height:112px;padding:20px;border:1px solid var(--default-color);
   border-radius:10px 10px 10px 0;gap:16px}는 카드 자체의 보더 스펙이었는데, 이제 보더는
   부모 .orders__card-body가 갖고 있어 순수 콘텐츠 로우로 리셋한다 */
.orders__product {
  display: flex;
  align-items: center;
  height: auto;
  padding: 0;
  border: none;
  border-radius: 0;
  gap: 12px;
  text-decoration: none;
  color: inherit;
}

/* Figma ImageContainer(72x72, #fafafa 배경, radius 4) 안에 60x60 사진이 6px 여백을 두고
   놓인다 — 벤더 .orders__product img{width:75px;height:75px}를 이 스펙으로 교체 */
.orders__product-image {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 72px;
  height: 72px;
  border-radius: 4px;
  background-color: #fafafa;
  overflow: hidden;
}

.orders__product-image img {
  width: 60px;
  height: 60px;
  object-fit: cover;
  border-radius: 4px;
}

/* 벤더 .orders__product-description{justify-content:space-between;height:100%}는 이미지
   높이(72px)만큼 텍스트를 위아래로 벌려놨음 — Figma InfoArea(gap:4)처럼 위에서부터
   촘촘히 쌓는다 */
.orders__product-description {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  height: auto;
  gap: 4px;
  min-width: 0;
}

.orders__product-name {
  margin: 0;
  font-family: Pretendard, sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: #1b1b1b;
}

.orders__product-option {
  margin: 0;
  font-family: Pretendard, sans-serif;
  font-size: 13px;
  font-weight: 400;
  color: #9b9b9b;
}

/* 벤더 .orders__pay-amount-label{color:var(--gray-color)} .orders__pay-amount{font-size:16px;
   font-weight:700;color:#000}는 숫자만 굵게/검정, "원"은 회색으로 나뉘어 있었는데 Figma
   SalePrice는 숫자+"원"이 16/600/#1a1a1a 하나의 텍스트라 색·굵기를 통일한다 */
.orders__pay-amount-label {
  display: flex;
  align-items: baseline;
  gap: 0;
  font-family: Pretendard, sans-serif;
  font-size: 16px;
  font-weight: 600;
  color: #1a1a1a;
}

.orders__pay-amount-label .orders__pay-amount {
  font-size: 16px;
  font-weight: 600;
  color: #1a1a1a;
}

/* 구매확정 전용 CTA(.orders__confirm-btn)는 제거됨(2026-08-21) — 카드마다 "구매 확정하기"를
   고정 노출하던 버튼을 없애고 구매확정은 주문상세에서만 하기로 확정(OrderSummary.tsx 주석
   참고). 카드 하단에는 상태별 액션 버튼 행(.orders__next-action-btns)만 남는다 */

/* ── 로딩 스켈레톤(Orders.tsx OrderCardSkeleton) — 실제 카드와 같은 클래스(orders__
   card-header/card-body/product/product-description)를 그대로 써서 배치는 자동으로
   맞고, 색이 채워질 자리만 벤더 skeleton__media/skeleton__line(셰이머 애니메이션)
   위에 실측 크기를 입힌다 ── */
.orders__skeleton-date {
  width: 72px;
  height: 18px;
}

.orders__skeleton-detail-link {
  width: 76px;
  height: 14px;
}

.orders__skeleton-image {
  flex-shrink: 0;
  width: 72px;
  height: 72px;
  aspect-ratio: auto;
  border-radius: 4px;
}

.orders__skeleton-name {
  width: 70%;
  height: 18px;
}

.orders__skeleton-option {
  width: 45%;
  height: 15px;
}

.orders__skeleton-price {
  width: 90px;
  height: 20px;
}

.orders__skeleton-btn {
  width: 100%;
  height: 32px;
}

/* ── 상태 탭(전체/미입금/결제완료/상품준비중/출고대기/배송중/배송완료/구매확정) 가로 스크롤 스트립 ──
   8개라 어느 폭에서도 균등 분배로는 라벨이 좁아진다. 벤더 .tabs__item{flex:1 1 0}은 아이템 폭을
   컨테이너/개수로만 정해서, PC 앱 컬럼(420px)에서 한 칸이 60px인데 "배송준비중"은 16px 기준
   80px가 필요해 라벨이 두 줄로 깨지고 탭 높이를 삐져나왔다(실측).
   그래서 아이템을 내용 폭으로 고정(flex:0 0 auto)하고 줄바꿈을 막아, 폭이 남든 모자라든 라벨은
   항상 한 줄이고 넘치는 만큼 가로로 밀어 볼 수 있게 한다. 스크롤바는 탭 줄 위에 겹쳐 보이므로
   숨기고(모바일은 원래 안 보임), iOS에서 관성 스크롤이 되도록 touch를 켠다. */
.orders__tabs {
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.orders__tabs::-webkit-scrollbar {
  display: none;
}
.orders__tabs .tabs__item {
  flex: 0 0 auto;
}
.orders__tabs .tabs__item button {
  padding: 0 14px;
  white-space: nowrap;
}

/* ── 주문내역 카드 하단 액션 버튼 행(OrderSummary) ──
   원래 카드에는 "구매 확정하기"만 있었고 취소/교환·반품/리뷰는 주문상세에서만 노출했는데,
   (그 구매확정 버튼은 2026-08-21에 제거됨 — 지금은 이 액션 행만 남는다)
   목록에서 바로 처리할 수 있어야 한다는 요구로 카드에도 노출한다(2026-08-20).
   톤은 주문상세 상품카드의 액션 버튼(_orderDetail.css .order-detail__next-action-btns)과
   맞추되 높이는 40px로 둔다 — 카드 높이가 과하게 늘면 목록 스캔이 어려워진다.
   (예전엔 이 아래 구매확정 CTA(32px)가 주 액션으로 있었지만 2026-08-21에 제거됨) */
.orders__next-action-btns {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 8px;
}

.orders__next-action-btns button {
  flex: 1;
  min-width: 0;
  height: 40px;
  padding: 0 12px;
  border: none;
  border-radius: 8px;
  font-family: Pretendard, sans-serif;
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
  /* 세컨더리 톤 — 주문상세와 동일(연블루 배경/블루 텍스트) */
  background-color: #f0f4fe;
  color: #3c56d6;
}

/* 상품 취소하기 — 주문상세 실측값과 동일한 텍스트 색(#4a69ea) */
.orders__next-action-btns .btn--cancel {
  color: #4a69ea;
}

/* 교환·반품 통합 버튼 클릭 시 열리는 선택 시트 — 시트 셸은 공용 BottomSheet가 담당 */
.orders__claim-sheet-options {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 16px;
}

.orders__claim-sheet-options button {
  height: 52px;
  border: 1px solid #e6e6e6;
  border-radius: 8px;
  background-color: #ffffff;
  font-family: Pretendard, sans-serif;
  font-size: 15px;
  font-weight: 500;
  color: #404040;
  cursor: pointer;
}