/* 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 CL-007 Toast/Type — 다크 배경(#202020) + radius 12, 하단 고정.
   position:fixed는 뷰포트 기준이라 PC에서 .page__content.site(우측 --pc-content-width
   컬럼)가 아니라 화면 정중앙에 뜨는 문제가 있었음 — _productDetail.css의 .share-toast와
   동일한 3단 브레이크포인트로 콘텐츠 컬럼 폭/위치를 그대로 따라가게 함 */
/* 페이드+슬라이드업 인/아웃 — ToastProvider가 BottomSheet와 동일한 mount-hold 패턴으로
   is-visible 클래스를 붙였다 뗀다. 브레이크포인트마다 가로 정렬용 transform(translateX)이
   달라서, 닫힌 상태의 translateY(8px)를 각 브레이크포인트의 기존 transform에 이어붙이고
   is-visible에서 그 오프셋만 0으로 되돌린다(BottomSheet.css와 동일한 방식) */
.app-toast {
  position: fixed;
  left: 20px;
  right: 20px;
  bottom: 90px;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  /* Figma Toast/Type — 높이 48 고정(좌우 16, 상하 0), fill #202020 a0.88 */
  padding: 0 16px;
  min-height: 48px;
  border-radius: 12px;
  background-color: rgba(32, 32, 32, 0.88);
  box-sizing: border-box;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.25s ease, transform 0.25s ease;
  pointer-events: none;
}

.app-toast.is-visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

@media (min-width: 501px) {
  .app-toast {
    left: 50%;
    right: auto;
    width: calc(500px - 40px);
    transform: translateX(-50%) translateY(8px);
  }

  .app-toast.is-visible {
    transform: translateX(-50%) translateY(0);
  }
}

@media (min-width: 1001px) {
  .app-toast {
    left: auto;
    right: calc((100vw - 1000px) / 2 + 20px);
    width: calc(var(--pc-content-width) - 40px);
    transform: translateY(8px);
  }

  .app-toast.is-visible {
    transform: translateY(0);
  }
}

.app-toast__content {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

/* Figma CL-007 — 찜(WishList) 변형만 아이콘-텍스트 gap 4(카트 변형은 8) */
.app-toast__content--like {
  gap: 4px;
}

.app-toast__message {
  font-family: Pretendard, sans-serif;
  font-size: 13px;
  font-weight: 400;
  color: #ffffff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 액션("보러가기") — Figma 13px/400(메시지와 동일 굵기) */
.app-toast__action {
  flex-shrink: 0;
  background: none;
  border: none;
  padding: 0;
  font-family: Pretendard, sans-serif;
  font-size: 13px;
  font-weight: 400;
  color: #ffffff;
  white-space: nowrap;
}

/* 취소 · 반품 · 교환 목록 — Figma MY-003(5295:30384).
   벤더 구 스킨(짙은 남색 배경/height:60px) 무력화 및 공용 밑줄 탭 배경/높이/폰트크기·
   굵기/비활성색/구분선 제거는 전부 _layout.css의 .tabs 공용 오버라이드로 이전됨 —
   이 파일엔 벤더 old-skin이 아이템(li) 단위로 깔아둔 배경(#f8f8f8)/border-top을
   되돌리는, 이 클래스명만 겪는 세부 리셋만 남긴다. */
.claims__tabs .tabs__item {
  background-color: transparent;
  border-top: none;
  border-bottom: 2px solid transparent;
}

.claims__tabs .tabs__item.on {
  background-color: transparent;
  border-bottom-width: 2px;
}

/* ── 목록 섹션 — Figma CancelCardSection(5295:30384): #fafafa 배경 + pad 16, 카드 간격
   20px. 벤더 .claims__content{padding:20px}(흰 배경) 대신 Orders(.orders__list)와 동일하게
   목록 컨테이너(.claims__list)가 회색 배경/패딩을 갖는다(빈 상태는 흰 배경 유지) ── */
.claims__content {
  padding: 0;
}

.claims__list {
  padding: 16px;
  background-color: #fafafa;
}

/* 벤더 .claims__claim-summary+.claims__claim-summary{margin-top:32px} → Figma 카드 간격 20px */
.claims__list .claims__claim-summary + .claims__claim-summary {
  margin-top: 20px;
}

/* 날짜 + 상태 + "주문 상세보기" 헤더 행 — Figma CardHeader(5295:30389).
   Orders(.orders__card-header)와 동일하게 카드 밖 상단 행으로 pad 12/0 */
.claims__claim-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0;
  padding: 12px 0;
}

/* 벤더 .claims__identifier{gap:12px;margin-bottom:8px} → Figma CancelStateContainer gap 4 */
.claims__identifier {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-bottom: 0;
}

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

.claims__claim-status {
  font-family: Pretendard, sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: #3c56d6;
}

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

/* ── 상품 카드 — Figma CancelCard의 CardBody(흰 배경/#e6e6e6/r8/pad 18·20/gap 16).
   벤더 기본값(padding:20px, radius 10 10 10 0, #ddd 보더)을 Orders(.orders__card-body)와
   동일 스펙으로 교체 ── */
.claims__product-wrap {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 16px;
  padding: 18px 20px;
  border-color: #e6e6e6;
  border-radius: 8px;
  background-color: #ffffff;
}

/* 벤더 gap:16 → Figma 이미지-정보 간격 12(Orders와 동일) */
.claims__product {
  gap: 12px;
  text-decoration: none;
  color: inherit;
}

/* Figma ImageContainer(72x72, #fafafa, r4) 안에 60x60 이미지 — 벤더
   .claims__product img{width:75px;height:75px}를 이 스펙으로 교체 */
.claims__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;
}

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

/* Figma InfoArea — 상품명/옵션/가격을 gap 4로 위에서부터 쌓는다 */
.claims__product-description {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

/* 벤더 --with-sticker{margin-top:5px} 리셋 + Figma ProductName(14/500/#1b1b1b) */
.claims__product-name {
  margin: 0;
  font-family: Pretendard, sans-serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 18px;
  color: #1b1b1b;
}

.claims__product-name--with-sticker {
  margin-top: 0;
}

/* 벤더 {margin:10px 0;min-height:36px;font-size:12px} → Figma 옵션 문구 13/#9b9b9b */
.claims__product-option-label {
  margin: 0;
  min-height: 0;
  font-family: Pretendard, sans-serif;
  font-size: 13px;
  font-weight: 400;
  line-height: 18px;
  color: #9b9b9b;
}

/* 벤더는 숫자만 16/700/#000이고 "원"은 회색으로 분리 — Figma SalePrice는 숫자+"원"이
   16/600/#1a1a1a 하나의 텍스트(Orders .orders__pay-amount-label과 동일 스펙) */
.claims__pay-amount-label {
  display: flex;
  align-items: baseline;
  gap: 0;
  font-family: Pretendard, sans-serif;
  font-size: 16px;
  font-weight: 600;
  color: #1a1a1a;
}

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

/* 카드 본문 하단 전폭 "{취소} 상세보기" — Figma Button/Buttons(288x32, #f0f4fe/#3c56d6, r8) */
.claims__detail-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 32px;
  border-radius: 8px;
  background-color: #f0f4fe;
  font-family: Pretendard, sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: #3c56d6;
  text-decoration: none;
}

/* 철회 버튼 — Figma 목록 프레임엔 없는 요소지만 기능상 유지. 벤더 기본 스타일(회색 1px
   보더/radius 0/margin-top:20px)이 그대로 새어나오던 것을 프로젝트 카드 CTA 톤(h32/r8,
   EmptyState "쇼핑하러 가기"와 같은 #202020 다크 버튼)으로 교체 — 카드가 gap:16 컬럼이라
   벤더 margin-top도 리셋 */
.claims__withdraw-btn {
  width: 100%;
  height: 32px;
  margin-top: 0;
  padding: 0;
  border: none;
  border-radius: 8px;
  background-color: #202020;
  font-family: Pretendard, sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: #ffffff;
}

/* 철회 확인 모달(빨간 톤, Figma 5319:41801)은 _layout.css의 공용 패턴
   `.modal__box--confirm:has(.modal-danger-marker)`가 담당 — message 안에
   modal-danger-marker 표식만 넣으면 됨(Claims.tsx handleWithdrawClaimBtnClick 참고) */