/* 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;
}

/* 배경 딤 — 모든 바텀시트 공통 톤. 열림/닫힘 시 페이드.
   닫히는 동안(opacity가 1→0으로 트랜지션 되는 250ms) pointer-events가 계속 auto라
   화면 전체를 덮은 채 클릭을 가로채고 있었음 — 닫기를 누른 직후 같은 트리거를 다시
   누르거나 다른 요소를 탭하면 그 클릭이 이 보이지도 않는 딤에 먹혀 아무 반응이
   없어 보이는 문제(바텀시트 인터랙션이 간헐적으로 안 먹히는 원인)였음.
   is-visible일 때만 클릭을 받도록 해서 닫히기 시작하는 즉시 아래 요소가 클릭을 받게 함 */
.bottom-sheet__dim {
  position: fixed;
  inset: 0;
  z-index: 30;
  background-color: rgba(0, 0, 0, 0.5);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}

.bottom-sheet__dim.is-visible {
  opacity: 1;
  pointer-events: auto;
}

/* 바텀시트 본체 — Figma BottomSheet/Variation 공통.
   닫힌 상태(translateY(100%))에서 열린 상태(translateY(0))로 슬라이드업 —
   드래그로 닫을 때는 BottomSheet.tsx가 인라인 style로 transition을 끄고
   손가락을 그대로 따라가게 함. 딤과 동일한 이유로 닫히는 중(슬라이드다운 애니메이션
   0.3s)에도 화면에 걸쳐 있는 동안은 클릭을 가로챌 수 있어 pointer-events를 맞춤 */
.bottom-sheet {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 31;
  width: 100%;
  background-color: #ffffff;
  /* Figma BottomSheet/Variation — 상단 radius 12 */
  border-radius: 12px 12px 0 0;
  padding-bottom: env(safe-area-inset-bottom, 0px);
  transform: translateY(100%);
  pointer-events: none;
  transition: transform 0.3s cubic-bezier(0.32, 0.72, 0, 1);
}

.bottom-sheet.is-visible {
  transform: translateY(0);
  pointer-events: auto;
}

/* PC 레이아웃에서 .portal 등 다른 모달과 동일하게 뷰포트 중앙(501~1000px)/.site
   우측 정렬(1001px~) 규칙을 따름 — 안 맞추면 실제 콘텐츠 열과 어긋나 보임.
   딤(.bottom-sheet__dim)은 시트 패널과 별개의 형제 엘리먼트라 패널만 좁혀서는
   안 되고 딤도 똑같이 좁혀야 PC에서 배너 영역까지 화면 전체를 덮지 않음.
   가로 중앙정렬(translateX)과 슬라이드업(translateY)을 한 transform에 같이 명시 */
@media (min-width: 501px) {
  .bottom-sheet {
    left: 50%;
    max-width: 500px;
    transform: translateX(-50%) translateY(100%);
  }

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

  .bottom-sheet__dim {
    left: 50%;
    right: auto;
    width: 500px;
    transform: translateX(-50%);
  }
}

@media (min-width: 1001px) {
  .bottom-sheet {
    left: auto;
    right: calc((100vw - 1000px) / 2);
    max-width: var(--pc-content-width);
    transform: translateY(100%);
  }

  .bottom-sheet.is-visible {
    transform: translateY(0);
  }

  .bottom-sheet__dim {
    left: auto;
    right: calc((100vw - 1000px) / 2);
    width: var(--pc-content-width);
    transform: none;
  }
}

/* 헤더/드래그핸들/타이틀 — Figma BottomSheetHeader(CT-003/CL-006 공통 실측):
   패딩 16/24/16, 핸들 #D3D3D3 + 핸들-타이틀 간격 20, 타이틀 18px/600/lh24/-0.01em.
   (기존엔 ShareBottomSheet만 로컬로 이 값을 맞추고 있었음 — 공용 셸로 승격) */
.bottom-sheet__header {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 16px 24px 16px;
  touch-action: none;
  user-select: none;
  cursor: grab;
}

.bottom-sheet__drag-handle {
  width: 60px;
  height: 4px;
  border-radius: 999px;
  background-color: #d3d3d3;
  margin-bottom: 20px;
}

.bottom-sheet__title {
  margin: 0;
  font-family: Pretendard, sans-serif;
  font-size: 18px;
  font-weight: 600;
  line-height: 24px;
  letter-spacing: -0.01em;
  color: #1a1a1a;
}

/* 벤더 aurora.css가 화면마다 다른 조상 클래스(.order-confirm__btn-group .btn,
   .cash-receipt__btn-wrap .btn 등)에 height/border-radius/color를 이미 정의해둔 경우가
   많아(명시도 0,2,0), 전역 단일 클래스(.btn--dark/.btn--caution, 명시도 0,1,0)로는
   화면마다 우연히 그 조상 클래스명과 겹칠 때마다 계속 밀렸다(주문완료/결제실패/
   현금영수증 모달에서 실제로 발생, 매번 화면별로 재정의해야 했음) — 이 컴포넌트
   자신의 클래스를 두 번 걸어(.eoshin-btn.eoshin-btn) 명시도를 0,2,0으로 맞춰서
   어떤 화면의 어떤 wrapper 클래스에서도 더 이상 안 깨지게 한다(로드 순서상 이
   파일이 벤더 CSS보다 항상 나중에 로드되므로 동률이면 이 파일이 이긴다) */
.eoshin-btn.eoshin-btn {
  height: 52px;
  border: 0;
  border-radius: 8px;
  font-family: Pretendard, sans-serif;
  font-size: 16px;
}

.eoshin-btn.eoshin-btn--dark {
  background-color: #f0f4fe;
  color: #3c56d6;
  font-weight: 500;
}

.eoshin-btn.eoshin-btn--caution {
  background-color: #4a69ea;
  color: #ffffff;
  font-weight: 600;
}

.eoshin-btn.eoshin-btn:disabled {
  background-color: #e6e6e6;
  color: #ababab;
  cursor: default;
}

/* 배송비 상세보기 바텀시트 — Figma CT-003(5218:34201). 헤더(드래그핸들+타이틀)는
   공용 BottomSheet 스펙(16px 패딩)을 그대로 쓰고, 이 프레임 고유 콘텐츠(제휴업체 표/
   안내문/CTA)만 Figma 실측(24px 좌우 패딩)대로 새로 만든다. */
.delivery-fee-detail-sheet__section-title {
  margin: 0;
  padding: 12px 24px;
  font-family: Pretendard, sans-serif;
  font-size: 16px;
  font-weight: 600;
  color: #404040;
}

/* Figma는 각 셀(LabelContainer/ValueContainer)에 개별 테두리(#e6e6e6)를 그리는데, 그대로
   옮기면 셀이 맞붙는 자리마다 테두리가 겹쳐 두 배로 두꺼워짐 — 표 바깥은 한 번만, 셀 사이는
   구분선 하나만 긋는 형태로 정리 */
.delivery-fee-detail-sheet__table {
  display: flex;
  flex-direction: column;
  margin: 0 24px;
  border: 1px solid #e6e6e6;
  border-radius: 4px;
  overflow: hidden;
}

.delivery-fee-detail-sheet__row {
  display: flex;
  align-items: stretch;
}

.delivery-fee-detail-sheet__row + .delivery-fee-detail-sheet__row {
  border-top: 1px solid #e6e6e6;
}

.delivery-fee-detail-sheet__row-label {
  display: flex;
  flex: 0 0 100px;
  align-items: center;
  justify-content: center;
  padding: 8px;
  border-right: 1px solid #e6e6e6;
  background-color: #fafafa;
  font-family: Pretendard, sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: #404040;
  text-align: center;
}

/* Figma Value 셀은 textAlign CENTER — 좌측 정렬로 새던 것(CT-003 감사)을 가운데로 맞춤 */
.delivery-fee-detail-sheet__row-value {
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: center;
  padding: 8px 24px;
  font-family: Pretendard, sans-serif;
  font-size: 13px;
  font-weight: 400;
  color: #404040;
  text-align: center;
}

.delivery-fee-detail-sheet__notice {
  margin: 0;
  padding: 12px 24px;
  font-family: Pretendard, sans-serif;
  font-size: 12px;
  font-weight: 400;
  line-height: 18px;
  color: #404040;
}

/* Figma Button/CTAArea — 하단 패딩 12(기존 20에서 수정), 버튼 2개(닫기/확인)가
   gap 8로 나란히 절반씩 차지 */
.delivery-fee-detail-sheet__cta {
  display: flex;
  gap: 8px;
  padding: 12px 16px;
}

.delivery-fee-detail-sheet__cta .btn {
  flex: 1;
  width: 100%;
  height: 52px;
  border-radius: 8px;
}

/* ── 결제금액 — Figma PriceList(5911:41964) ── */
.cart__price-header {
  margin: 0;
  padding: 4px 16px;
  font-family: Pretendard, sans-serif;
  font-size: 16px;
  font-weight: 600;
  line-height: 24px;
  color: #1a1a1a;
}

.cart .price-tag {
  padding: 4px 16px 20px;
}

/* 벤더(aurora.css) .price-tag__details{display:grid}는 align-items를 안 정해서 기본값
   stretch가 적용됨 — "배송비 상세보기" 행처럼 dt(버튼 포함, 28px)가 dd(순수 텍스트, 18px)보다
   큰 행에서 dd가 셀 위쪽에 붙어버려, dt 안의 텍스트(위 규칙으로 세로 중앙 정렬됨)와 dd의
   금액 텍스트가 서로 다른 높이에 떠 보였음 — 그리드 자체를 세로 중앙 정렬로 맞춘다 */
.cart .price-tag__details {
  align-items: center;
}

.cart .price-tag__details dt,
.cart .price-tag__details dd {
  font-size: 14px;
  font-weight: 500;
  line-height: 18px;
}

.cart .price-tag__details dt {
  color: #9b9b9b;
}

/* Figma LeftSide(5911:41973) — "총 배송비" 라벨 + "배송비 상세보기" 버튼을 gap:8, 세로 중앙
   정렬로 묶은 가로 auto-layout. dt가 기본 block이라 버튼(28px)이 텍스트(18px)보다 커서
   위쪽 기준으로만 나란히 놓이고 버튼이 텍스트보다 아래로 처져 보였음 — 이 dt만 flex로 바꿔서
   중앙 정렬한다(버튼이 없는 "상품 금액" dt는 영향받지 않도록 :has로 한정) */
.cart .price-tag__details dt:has(.cart__delivery-info-btn) {
  display: flex;
  align-items: center;
}

/* Figma PriceValue는 숫자+"원"이 하나의 텍스트 노드(#404040)인데, 벤더(aurora.css)가
   dd em(숫자)에는 color:var(--black-color);font-weight:700을 직접 지정해두고 있어
   dd에만 색을 줘도 em은 상속을 안 받고 벤더 값을 그대로 씀 — dd/dd em 둘 다 맞춰야
   숫자와 "원" 글자색이 통일된다 */
.cart .price-tag__details dd {
  color: #404040;
}

.cart .price-tag__details dd em {
  color: #404040;
  font-weight: 500;
  margin: 0;
}

/* 벤더 PriceTag(component.css/aurora.css)는 final-amount의 dt/dd em을 각각
   굵게(700)/20px/point-color로 키워 강조하는데, Figma TotalPriceLabel/TotalPriceValue는
   16px/600/#1a1a1a, 17px/600/#3c56d6이라 벤더 기본값이 더 크고 굵고 색도 달랐음 —
   위와 같은 이유로 dd/dd em 둘 다 지정해야 숫자와 "원" 글자가 동일하게 보인다 */
.cart .price-tag__final-amount dt {
  color: #1a1a1a;
  font-size: 16px;
  font-weight: 600;
  line-height: 24px;
}

.cart .price-tag__final-amount dd {
  font-size: 17px;
  font-weight: 600;
  line-height: 26px;
  color: #3c56d6;
}

.cart .price-tag__final-amount dd em {
  font-size: 17px;
  font-weight: 600;
  color: #3c56d6;
  margin: 0;
}

.cart .price-tag__division {
  border-top: 1px solid #e6e6e6;
  border-top-style: solid;
}

.cart__delivery-info-btn {
  margin-left: 8px;
  padding: 4px 8px;
  border: 1px solid #e6e6e6;
  border-radius: 4px;
  background-color: #ffffff;
  font-family: Pretendard, sans-serif;
  font-size: 12px;
  line-height: 18px;
  color: #9b9b9b;
  cursor: pointer;
}

/* 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 CT-001_장바구니목록 5911:41894)은 여러 화면이 공유하는
   컴포넌트라 _sharedComponents.css로 이전 — 라벨(15px 등 이 화면 전용 크기)만 남긴다.
   CartProductCard.tsx도 동일한 규칙을 씀(값이 같아 로드 순서 무관).
   _sharedComponents.css의 미체크 회색 규칙(.check-radio input[type='checkbox'] ~
   .check-radio__label, 명시도 0,3,1)이 .cart .check-radio__label(0,2,0)을 이겨 전체선택
   라벨이 회색으로 새던 문제(CT-002 감사) — Figma는 체크 여부와 무관하게 항상 #1B1B1B
   고정이라, 미체크/체크 두 상태 모두 공유 규칙보다 한 단계 높은 명시도로 장바구니에서만
   재고정한다(공유 파일은 다른 화면들이 쓰므로 건드리지 않음) */
.cart .check-radio__label,
.cart .check-radio input[type='checkbox'] ~ .check-radio__label,
.cart .check-radio input:checked[type='checkbox'] ~ .check-radio__label {
  font-family: Pretendard, sans-serif;
  font-size: 15px;
  font-weight: 500;
  line-height: 24px;
  color: #1b1b1b;
}

/* 빈 장바구니에서 체크박스를 disabled 처리하면 벤더 common.css의 .disabled{opacity:.4}가
   래퍼 전체를 흐리게 만들어 라벨이 여전히 회색으로 보인다 — Figma CT-002(5236:35312)의
   0/0 상태는 흐림 없이 일반 미체크 모양(빈 원 + #1B1B1B 라벨)이므로 이 화면에서만 되돌린다 */
.cart__select-manager .check-radio.disabled {
  opacity: 1;
}

/* ── 상단 전체선택 바 — Figma TopBar/FilterBar(5911:41896) ── */
.cart__select-manager {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 48px;
  padding: 0 16px;
  border-bottom: 1px solid #e6e6e6;
}

.cart__delete-selected-btn {
  padding: 6px 16px;
  border: 1px solid #f5f5f5;
  border-radius: 4px;
  background-color: #fafafa;
  font-family: Pretendard, sans-serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 18px;
  color: #404040;
  cursor: pointer;
}

/* Figma 장바구니 빈 상태(5236:35318)의 "선택삭제" 버튼 — 배경/테두리/텍스트 전부
   회색조로 바뀐다(#e6e6e6/#ababab) */
.cart__delete-selected-btn:disabled {
  border-color: #e6e6e6;
  background-color: #e6e6e6;
  color: #ababab;
  cursor: default;
}

/* 체크박스 원형/기본 색상은 _sharedComponents.css로 이전 — 라벨(15px 등 이 화면 전용
   크기)만 CartTopSelectManager.css와 동일 규칙으로 복제(값이 같아 로드 순서 무관).
   Figma CT-001_장바구니목록(5911:41894).
   _sharedComponents.css의 미체크 회색 규칙(.check-radio input[type='checkbox'] ~
   .check-radio__label, 명시도 0,3,1)이 .cart .check-radio__label(0,2,0)을 이겨 라벨이
   회색으로 새던 문제(CT-002 감사) — Figma BrandName은 체크 여부와 무관하게 항상
   #1B1B1B 고정이라, 미체크/체크 두 상태 모두 공유 규칙보다 한 단계 높은 명시도로
   장바구니에서만 재고정한다(공유 파일은 다른 화면들이 쓰므로 건드리지 않음) */
.cart .check-radio__label,
.cart .check-radio input[type='checkbox'] ~ .check-radio__label,
.cart .check-radio input:checked[type='checkbox'] ~ .check-radio__label {
  font-family: Pretendard, sans-serif;
  font-size: 15px;
  font-weight: 500;
  line-height: 24px;
  color: #1b1b1b;
}

/* ── 상품 카드 — Figma CartContainer(5911:41903) ── */
.cart__product-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 16px;
  padding: 12px;
  border: 1px solid #e6e6e6;
  border-radius: 8px;
  background-color: #ffffff;
}

.cart__product-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.cart__product-card__close-btn {
  position: relative;
  width: 20px;
  height: 20px;
  cursor: pointer;
}

.cart__product-card__close-btn::before,
.cart__product-card__close-btn::after {
  position: absolute;
  top: 50%;
  left: 50%;
  content: '';
  width: 12px;
  height: 1.5px;
  background-color: #9b9b9b;
}

.cart__product-card__close-btn::before {
  transform: translate(-50%, -50%) rotate(45deg);
}

.cart__product-card__close-btn::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}

/* 입점 파트너/"구매 제한 상품" 그룹 라벨 — Figma CartContainer엔 없는 정보라(상품마다
   헤더가 있는 구조) 헤더 체크박스 라벨(BrandName, 15/500)과 같은 톤으로만 얹는다 */
.cart__product-card__partner-name {
  margin: 0;
  font-family: Pretendard, sans-serif;
  font-size: 15px;
  font-weight: 500;
  line-height: 24px;
  color: #1b1b1b;
}

/* 구매 제한 상품 헤더 — 체크박스 없이 라벨만 노출할 때 체크박스 라벨과 같은 타이포 유지 */
.cart__product-card__header-label {
  font-family: Pretendard, sans-serif;
  font-size: 15px;
  font-weight: 500;
  line-height: 24px;
  color: #1b1b1b;
}

/* 배송그룹 카드 안에서 상품 블록(헤더+이미지+정보+옵션 스테퍼)이 반복된다 — Figma
   CT-001의 CartContainer도 상품마다 헤더(체크박스+브랜드명+X)를 반복하는 같은 구조라
   구분선 없이 카드의 gap(12px)만으로 경계를 표시한다 */
.cart__product-card__product {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.cart__product-card__content {
  display: flex;
  gap: 11px;
}

/* 썸네일 박스 크기/이미지 꽉채움/"이미지없음" 자리표시자 보존 로직은 주문서와 공유하는
   공용 리셋(_layout.css의 .thumb-item__media 등)으로 이전됨 — 이 파일엔 카드 레이아웃
   자체(가로 배치, 폭)만 남긴다 */
.cart__product-card__image.thumb-item {
  width: 72px;
  flex: none;
}

.cart__product-card__info {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

.cart__product-card__name.editor {
  margin: 0;
  font-family: Pretendard, sans-serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 18px;
  color: #1b1b1b;
}

.cart__product-card__original-price {
  display: block;
  font-family: Pretendard, sans-serif;
  font-size: 13px;
  font-weight: 400;
  line-height: 18px;
  color: #9b9b9b;
}

.cart__product-card__price-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
}

.cart__product-card__discount-rate {
  font-family: Pretendard, sans-serif;
  font-size: 17px;
  font-weight: 600;
  line-height: 26px;
  color: #ff272b;
}

.cart__product-card__sale-price {
  font-family: Pretendard, sans-serif;
  font-size: 17px;
  font-weight: 600;
  line-height: 26px;
  color: #1a1a1a;
}

.cart__product-card__base-product-name {
  margin: 0 0 8px;
  font-size: 13px;
  color: #9b9b9b;
}

/* ── 옵션/수량/합계 박스 — Figma StepperBox(5911:41919) ── */
.cart__product-card__stepper-box {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 12px;
  border-radius: 8px;
  background-color: #fafafa;
}

.cart__product-card__option {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.cart__product-card__option .option-label {
  font-family: Pretendard, sans-serif;
  font-size: 13px;
  line-height: 18px;
  color: #404040;
}

/* 옵션행/스테퍼행 삭제(X) 버튼 — Figma Icon/General/Close(CT-001 5911:41894 StepperBox 내,
   16x16 stroke #9B9B9B w1.5). CSS 정의가 아예 없어 빈 버튼으로 렌더링되던 것(감사 지적)을
   카드 헤더 X(.cart__product-card__close-btn, 20px 프레임에 12px 획 = 0.6 비율)와 같은
   의사요소 방식으로 구현 — 16px 프레임이므로 획 길이는 같은 비율의 10px */
.cart__delete-btn {
  position: relative;
  flex: none;
  width: 16px;
  height: 16px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}

.cart__delete-btn::before,
.cart__delete-btn::after {
  position: absolute;
  top: 50%;
  left: 50%;
  content: '';
  width: 10px;
  height: 1.5px;
  background-color: #9b9b9b;
}

.cart__delete-btn::before {
  transform: translate(-50%, -50%) rotate(45deg);
}

.cart__delete-btn::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}

.cart__product-card__stepper-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* 벤더 QuantityChanger(component.css)는 원래 width:90px/height:26px에 테두리를
   var(--default-color)로 그리는데, 이 프로젝트가 --default-color 자체를 전역에서
   #e1eaef(어신 브랜드 보더색)로 바꿔놔서(style.css) 장바구니 스테퍼도 그 색이 그대로
   새고 있었다 — Figma StepperButton/Number(각 36x36, 테두리 #e6e6e6)에 맞춰 크기와
   테두리색을 명시적으로 다시 지정한다. 벤더가 이미 가운데 Number 박스 좌우로
   border-right/border-left를 그려주는 구조라(하나의 바깥 테두리 + 안쪽 구분선) 그
   구조는 그대로 두고 치수·색만 교체하면 Figma의 "3칸이 붙어있는 스테퍼" 모양이 된다 */
.cart .quantity-changer {
  width: 108px;
  height: 36px;
  border-radius: 8px;
  border-color: #e6e6e6;
}

.cart .quantity-changer__decrease-btn,
.cart .quantity-changer__increase-btn {
  width: 36px;
  border-color: #e6e6e6;
}

.cart .quantity-changer__input {
  width: 36px;
}

.cart .quantity-changer__input input {
  font-family: Pretendard, sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: #1b1b1b;
}

.cart__product-card__total-price {
  font-family: Pretendard, sans-serif;
  font-size: 18px;
  font-weight: 600;
  line-height: 24px;
  color: #1a1a1a;
}

/* ── 카드 하단 배송 안내 — Figma DeliveryInformation(5911:41930) ── */
.cart__product-card__delivery-info {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0;
  font-family: Pretendard, sans-serif;
  font-size: 13px;
  line-height: 18px;
}

.cart__product-card__delivery-free-msg {
  color: #3c56d6;
}

.cart__product-card__delivery-fee {
  font-weight: 600;
  color: #404040;
}

/* ── 배송그룹(파트너) 영역 — Figma CartContainerSection(5911:41902)엔 그룹별 체크박스
   행이 없어(전체선택 바로 아래 바로 상품 카드가 이어짐) 제거하고, 그 줄이 갖고 있던
   위쪽 여백만 섹션에 남겨 카드 간 간격을 유지한다 ── */
.cart__delivery-section {
  padding: 16px 16px 0;
}

/* ── 하단 CTA — Figma Button/CTAArea(5911:41987). 버튼 하나만 두도록 통합했으므로
   전체 너비를 채우고, 배경/치수를 Figma 인디고 스펙으로 맞춤 ── */
.cart__fixed-order-btn {
  /* Figma CT-001/002 — CTA는 뷰포트 하단에 붙는 바. 벤더 fixed 대신 sticky+bottom:0을
     쓰면 긴 목록에서는 하단에 붙어 따라오고, 스크롤 끝에서는 푸터를 가리지 않고
     문서 흐름 자리(푸터 위)로 자연스럽게 안착한다. 짧은 화면(빈 장바구니)에서는
     .cart(flex column, min-height 화면 높이)의 margin-top:auto가 최하단으로 민다 */
  position: sticky;
  bottom: 0;
  z-index: 5;
  margin-top: auto;
  max-width: none;
  min-width: 0;
  width: 100%;
  padding: 12px 16px;
  background-color: #fff;
  /* Figma Button/CTAArea에는 상단 구분선이 없음 — 벤더 기본 border-top(1px #ececec) 제거 */
  border-top: none;
}

/* 벤더 Button 대신 네이티브 button으로 직접 구성(Download 아이콘 + 라벨 + ChevronRight,
   Figma Button/Buttons 5911:41987)하므로 flex 배치와 기본 리셋(border/cursor)까지 여기서 정의 */
.cart__fixed-order-btn .cart__order-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  width: 100%;
  height: 52px;
  border: 0;
  border-radius: 8px;
  background-color: #4a69ea;
  color: #ffffff;
  cursor: pointer;
  /* 베이스 스킨 기본 버튼 텍스트(Montserrat 14px/400)가 Figma ButtonLabel
     (Pretendard SemiBold 16px, lineHeight 24px)보다 작고 얇게 새고 있었음 */
  font-family: Pretendard, sans-serif;
  font-size: 16px;
  font-weight: 600;
  line-height: 24px;
}

/* Figma Button/CTAArea Disabled 배리언트(5236:35325) — 장바구니가 비었거나
   선택된 상품이 없을 때 "구매하기 (0원)"가 회색조로 바뀐다(아이콘도 currentColor로
   함께 회색이 됨) */
.cart__fixed-order-btn .cart__order-btn:disabled {
  background-color: #e6e6e6;
  color: #ababab;
  cursor: default;
}

/* 벤더 aurora.css에 우리가 쓰는 클래스명과 우연히 같은 .cart__naver-pay-btn{margin:20px 10px}
   규칙이 있음 — 네이버페이 버튼이 아직 안 그려진(빈 컨테이너) 상태에서도 이 여백이
   flex 레이아웃에 그대로 반영되어 옆의 구매하기 버튼이 20px만큼 좁게 눌려 있었음 */
.cart__fixed-order-btn .cart__naver-pay-btn {
  margin: 0;
}

/* Cart.tsx가 직접 렌더링하는(서브컴포넌트가 아닌) 페이지 루트 전용 스타일. */

/* 페이지 골격 — Figma CT-001/002 모두 구매하기 CTA가 뷰포트 하단에 붙는 바 구조.
   콘텐츠가 짧아도(빈 장바구니 등) CTA가 화면 최하단에 오도록 헤더를 뺀 화면 높이를
   최소로 채우고, CTA(.cart__fixed-order-btn { margin-top: auto })를 아래로 민다.
   스크롤이 생기는 긴 목록에서는 CTA의 sticky bottom이 뷰포트 하단에 붙어 따라온다 */
.cart {
  display: flex;
  flex-direction: column;
  min-height: calc(100dvh - var(--header-height));
}