/* 납품본은 유지하고 모바일 회원 화면의 가로 넘침을 앱에서 방지한다. */
@media (max-width: 590px) {
  .page-my-member {
    overflow-x: hidden;
  }
}

/* 모바일 주문·클레임 조회: 검색 조건과 상태 선택 사이 여백. */
@media (max-width: 768px) {
  .page-my-shopping :is(.status-select, .claim-status-select).mo-only {
    margin-top: 16px;
  }
}

/* UiPopup의 헤더는 본문 밖에 있다. 목업 달력의 데스크톱 팝오버 구조를 맞춘다. */
@media (min-width: 761px) {
  .shopping-calendar > .ui-popup-panel > .ui-popup-head {
    display: none;
  }
  .page-my-shopping .shopping-dates[data-calendar="endDate"] .shopping-calendar {
    left: calc(50% + 11px);
  }
}

/*
 * 마이페이지 보조 스타일 (CH-U-MY-*).
 *
 * 목업에 대응 마크업이 없는 것만 여기 둔다 — 상태 표시(로딩·오류·빈 목록)·페이지 이동·
 * 목록 액션 버튼 줄. 목업이 정의한 클래스(.my-info-lnb, .shopping-order, .product-card …)는
 * 원본 CSS 를 그대로 쓰고 여기서 덮어쓰지 않는다.
 */

/*
 * 배송지 추가/수정 팝업 (CH-U-MY-02-03-01p) — 공용 `UiPopup` 셸과의 구조 차이 보정.
 *
 * 목업 원본은 `<header class="ui-popup-head">` 가 `.ui-popup-content`(패딩 0 32px) *안쪽*
 * 첫 자식이라, `.address-add-popup .ui-popup-head { margin: 0 -32px }` 는 그 패딩을 상쇄해
 * 헤더를 패널 끝까지 넓히려는 값이다. 하지만 `UiPopup` 컴포넌트는 헤더를 `.ui-popup-content`
 * *바깥* 형제로 그린다 — 이미 패딩이 없는 자리라 음수 마진을 그대로 받으면 헤더가 패널보다
 * 64px 넓어지고, `.ui-popup-panel` 의 `overflow: hidden` 에 오른쪽이 잘려 닫기(X) 버튼이
 * 가려진다. 우리 구조에서는 되돌릴 패딩이 없으므로 0으로 되돌린다.
 */
.page-my-shopping .address-add-popup .ui-popup-head {
  margin: 0;
}

/*
 * 모바일 마이페이지 레이어 제목 공통 여백.
 * 목업의 여러 팝업은 헤더가 패딩 있는 본문 안에 있었지만 공용 UiPopup은 헤더를 패널의
 * 직계 자식으로 렌더한다. 목업의 `padding: 0`을 그대로 받으면 달력·사유·카드·주소·중첩
 * 우편번호 레이어 제목이 화면 왼쪽에 붙으므로 모든 UiPopup 직계 헤더에 공용 20px을 복원한다.
 */
@media (max-width: 760px) {
  .page-my-shopping .ui-popup > .ui-popup-panel > .ui-popup-head {
    padding-right: 20px;
    padding-left: 20px;
  }
}

/*
 * 같은 팝업의 필드 간격 — 목업은 `.ui-popup-content` 자체를 그리드(`gap: 16px`)로 두고
 * label/fieldset 을 그 직계 자식으로 기대한다. `UiPopup` 은 본문을 감쌀 `<form>` 이 없어
 * `AddressFormPopup` 이 하나 추가했는데, 그 폼이 그리드 아이템 하나만 차지하면서 내부 간격이
 * 전부 사라진다(값 입력·에러 문구 유무로 세로 간격이 들쭉날쭉해 보이는 원인). 폼을 레이아웃에서
 * 투명하게 만들어 자식들이 그대로 `.ui-popup-content` 의 그리드 아이템이 되게 한다.
 */
.address-add-popup .address-add-form {
  display: contents;
}

/*
 * 주문 배송지 변경 팝업 (FP-OD-06) — 목업에 대응 화면이 없어 <b>배송지 관리 `수정` 팝업의
 * 레이어 디자인을 그대로 빌린다.</b> 껍데기(`address-add-popup`)가 패널 420px · 본문 16px
 * 그리드 · 44px 필드를 주고, 여기서는 목업에 없는 <b>배송지 선택 카드 목록과 그 `수정` 버튼</b>만 잡는다.
 *
 * 카드 모양은 주문서 배송지 목록 팝업(`page/cart.css` 의 `.payment-address-card`)과 같은
 * 회색 카드 + 선택 시 주황 테두리다 — 배송지를 고르는 자리는 두 화면이 같아 보여야 한다.
 * 고르는 컨트롤은 <b>보이는 라디오</b>(공통 `.control-radio`)를 카드 왼쪽에 세운다.
 *
 * ⚠ 선택자가 `.page-my-shopping .order-address-popup ...` 로 길어지는 것은 껍데기 블록
 * (`page/my-shopping.css` 의 `:is(.address-add-popup, .card-add-popup) :is(label, fieldset, …)`)
 * 이 label/fieldset 안의 모든 `input`·`button` 을 44px 전체폭으로 만들기 때문이다 — 그 규칙을
 * 그대로 받으면 카드마다 44px 빈 상자(라디오)가 하나씩 생기고 `수정` 이 카드 전체폭이 된다.
 * 규칙마다 필요한 명시도가 달라서, 이겨야 하는 쪽만 아래에서 따로 적어 둔다.
 */
/*
 * ⚠ 선택자에 `.address-add-popup` 과 `fieldset >` 를 <b>덧붙여야</b> 한다 — 아래 `수정` 버튼과
 *   똑같은 명시도 싸움이다.
 *
 *   껍데기(`page/my-shopping.css`)의
 *   `.page-my-shopping :is(.address-add-popup, .card-add-popup) { &.address-add-popup fieldset>div }`
 *   는 우편번호 줄을 2단(`minmax(0, 1fr) 120px`)으로 잡는데, <b>이 목록이 그 선택자에 그대로
 *   맞는 자리</b>다(`fieldset.order-address-list > div.order-address-items`).
 *   그 규칙의 명시도는 (0,3,2) 이고 클래스 3개짜리 `.page-my-shopping .order-address-popup
 *   .order-address-items` 는 (0,3,0) 이라 <b>파일 순서와 무관하게 진다.</b>
 *
 *   져 있던 동안 배송지 카드가 232px 칸에 눌리고 오른쪽 120px 칸으로 두 번째 카드가 밀려
 *   글자가 한 자씩 세로로 쪼개졌다(모바일에서는 그 칸이 화면 밖으로 나갔다). `gap` 도 함께
 *   4px 로 끌려갔다. (0,4,1) 로 올려 두 값 모두 되찾는다 — `!important` 도 전역 규칙도 쓰지 않는다.
 */
.page-my-shopping .order-address-popup.address-add-popup fieldset > .order-address-items {
  display: grid;
  /* 배송지 카드는 <b>한 줄에 한 장</b>이다 — 위 주석의 2단 규칙을 되돌린다 */
  grid-template-columns: minmax(0, 1fr);
  max-height: 300px;
  gap: 8px;
  overflow-y: auto;
  overscroll-behavior: contain;
}

/* 카드 한 장 = 고르는 자리(label) + 고치는 자리(수정 버튼) */
.page-my-shopping .order-address-popup .order-address-entry {
  border: 1px solid #f6f7f9;
  border-radius: 4px;
  background: #f6f7f9;
}

.page-my-shopping .order-address-popup .order-address-entry.active {
  border-color: rgba(238, 93, 68, 0.5);
}

/* 왼쪽 라디오 한 칸 + 오른쪽 배송지 정보 한 칸 — 라디오는 세 줄 전체에 걸쳐 가운데 선다 */
.page-my-shopping .order-address-popup .order-address-item {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  gap: 4px 12px;
  padding: 16px 16px 12px;
  color: var(--color-text);
  cursor: pointer;
}

/*
 * 배송지 라디오 — <b>모양의 정본은 `.control-radio`</b>(`common/_components.css`)다.
 * 여기서는 껍데기(`… :is(label, fieldset, .card-add-field) input`, 명시도 (0,3,1))가 덮어쓴
 * 것만 되돌린다: 44px 전체폭 사각 상자, 그리고 그 `border` 에 져 버린
 * `.control-radio:checked`(0,2,0) 의 선택 표시다. `appearance`·`cursor`·`:focus-visible` 은
 * 껍데기가 건드리지 않으므로 그대로 살아 있다 — 다시 적지 않는다.
 */
.page-my-shopping .order-address-popup .order-address-item .control-radio {
  grid-column: 1;
  /*
    세 줄(배송지명·받는분·주소)은 항상 그려지므로 `span 3` 으로 카드 전체를 걸친다.
    `1 / -1` 은 쓰지 않는다 — `-1` 은 <b>명시 그리드</b>의 끝 선이고 여기 행은 전부 암묵
    그리드라서 `1 / 1`(한 줄)로 접힌다.
  */
  grid-row: 1 / span 3;
  align-self: center;
  width: 18px;
  height: 18px;
  padding: 0;
  border: 1px solid var(--color-line-regular);
  border-radius: 50%;
  background: #fff;
}

.page-my-shopping .order-address-popup .order-address-item .control-radio:checked {
  border: 5px solid var(--color-primary);
}

.page-my-shopping .order-address-popup .order-address-item > span {
  display: flex;
  grid-column: 2;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 400;
  line-height: 145%;
  letter-spacing: -0.025em;
}

.page-my-shopping .order-address-popup .order-address-name {
  min-height: 24px;
  margin-bottom: 4px;
}

.page-my-shopping .order-address-popup .order-address-name strong {
  font-size: 16px;
  font-weight: 600;
  line-height: 135%;
}

.page-my-shopping .order-address-popup .order-address-name em {
  display: inline-flex;
  align-items: center;
  padding: 4px 8px;
  border-radius: 99px;
  background: #fff;
  color: var(--color-secondary-orange);
  font-size: 12px;
  font-style: normal;
  font-weight: 500;
  line-height: 130%;
}

.page-my-shopping .order-address-popup .order-address-contact strong {
  font-weight: 600;
}

/*
 * 주소는 두 줄 이상이 되므로 가로 정렬을 풀어 준다.
 * 자식 선택자(`> .order-address-detail`)로 두어야 위 `… .order-address-item > span`(0,3,1) 의
 * `display: flex` 를 이긴다 — 클래스 하나만으로는 (0,3,0) 이라 진다.
 */
.page-my-shopping .order-address-popup .order-address-item > .order-address-detail {
  display: block;
}

/*
 * `수정` — 주문서 배송지 목록 팝업(`.payment-address-actions button`)과 같은 규격이다.
 *
 * ⚠ 버튼 선택자에 `.address-add-popup` 과 `[type=...]` 을 <b>덧붙여야</b> 한다. 껍데기 쪽
 * `… :is(label, fieldset, .card-add-field) button:not(.ui-select-list button)` 이 명시도
 * (0,4,2) 인데(`:is()`·`:not()` 는 인자 중 가장 높은 명시도를 가져간다), 클래스 3개짜리
 * (0,3,1) 로는 <b>파일 순서와 무관하게</b> 진다 — `수정` 이 카드 전체폭 44px 상자가 된다.
 */
.page-my-shopping .order-address-popup .order-address-actions {
  display: flex;
  width: max-content;
  gap: 8px;
  margin: 0 16px 16px;
}

.page-my-shopping .order-address-popup.address-add-popup .order-address-actions button[type='button'] {
  display: flex;
  width: auto;
  height: 32px;
  align-items: center;
  justify-content: center;
  padding: 0 12px;
  border: 1px solid #ddd;
  border-radius: 4px;
  background: #fff;
  color: #222;
  font-size: 12px;
  font-weight: 400;
  letter-spacing: -0.025em;
  cursor: pointer;
}

.page-my-shopping .order-address-popup .order-address-notice,
.page-my-shopping .order-address-popup .order-address-empty {
  color: var(--color-text-gray);
  font-size: 13px;
  line-height: 145%;
  letter-spacing: -0.025em;
}

.page-my-shopping .order-address-popup .order-address-notice strong {
  color: var(--color-text);
  font-weight: 600;
}

/*
 * 배송지 관리 화면의 `.address-add` 모양은 해당 페이지 블록 안에만 선언돼 있어,
 * 같은 버튼을 쓰는 회수지·재배송지 선택 레이어에서는 브라우저 기본 버튼으로 보인다.
 * 레이어 안에서만 동일한 44px 전체폭 버튼 규격을 적용한다.
 */
.page-my-shopping .order-address-popup > .ui-popup-panel > .ui-popup-content > .address-add {
  display: flex;
  width: 100%;
  height: 44px;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin: 0;
  padding: 0 14px;
  border: 1px solid #ddd;
  border-radius: 4px;
  background: #fff;
  color: var(--color-text);
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
}

.page-my-shopping .order-address-popup > .ui-popup-panel > .ui-popup-content > .address-add span {
  font-size: 17px;
  font-weight: 400;
}

/* 안내 확인은 주요 액션, 취소(type1)는 기존 기본 테두리를 유지한다. */
.page-my-shopping .claim-guide .ui-popup-foot button.button.type3 {
  border-color: var(--color-action-blue, #597FD0);
  background: var(--color-action-blue, #597FD0);
  color: #fff;
}

.page-my-shopping .claim-guide .claim-guide-multiline {
  white-space: pre-line;
}

.page-my-shopping .claim-guide .claim-guide-empty {
  margin: 0;
  color: var(--color-text-gray);
  text-align: center;
}

.mypage-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 48px 16px;
  text-align: center;
  color: #666;
}

.mypage-state.empty .empty-icon {
  width: 48px;
  height: 48px;
}

.my-voucher-info .voucher-balance-notice {
  margin: 0;
  color: var(--color-text-gray);
  font-size: 14px;
  line-height: 1.55;
}

.mypage-state .ui-btn {
  min-width: 120px;
}

/* 목록·상세의 보조 액션 줄 — 목업에 대응 마크업이 없는 두 자리만 남았다
   (1:1문의 등록 폼 · 클레임 상세). 배송지·찜·리뷰는 목업 클래스로 옮겼다. */
.inquiry-actions,
.claim-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 8px 0;
}

/*
 * 바우처 자격조회 팝업(CH-U-MY-01-03p)에서 **고른 등록카드** 표시.
 *
 * 20260904 목업은 정적 `article` 목록이라 선택 상태가 없다 — `.my-card-item` 하나뿐이다.
 * 카드 크기·썸네일·hover 는 `page/my-member.css` 끝의 `MY-01-03p` 블록
 * (`.page-my-member.page-my-popup.p-03p`)이 정본이므로 여기서 다시 쓰지 않고, 그 블록에 없는
 * **선택(`.on` = `aria-pressed`)·초점** 표시와 `button` 정렬 보정만 같은 스코프로 얹는다(RULES 3.9).
 *
 * 선택은 색 하나로 알리지 않는다 — 파란 2px 테두리(inset 그림자로 두께를 채워 크기를 바꾸지
 * 않는다) + 옅은 파란 배경. hover 는 목업의 반투명 테두리라 진한 테두리와 구별된다.
 * 이 규칙은 `my-member.css` 의 `&:hover`(0,5,0)와 특이도가 같고 뒤에 로드돼 선택이 hover 를 이긴다.
 */
/*
 * 목업은 정적 `article` 이라 없던 규칙 — 여기서는 골라야 해서 `button` 이고, UA 기본값
 * `text-align: center` 가 `.my-card-info`(flex column·stretch) 속 카드명·번호까지 가운데로 보낸다.
 * 크기·썸네일·배치는 그대로 두고 정렬만 목업(왼쪽)으로 되돌린다.
 */
.page-my-member.page-my-popup.p-03p .my-card-item {
  text-align: left;
}

.page-my-member.page-my-popup.p-03p .my-card-item.on {
  border-color: var(--color-action-blue, #597FD0);
  box-shadow: inset 0 0 0 1px var(--color-action-blue, #597FD0);
  background: var(--color-grey-96-3, #eef3fc);
}

/* 키보드 이동이 보이지 않으면 카드를 고를 수 없다 — 선택 테두리 바깥으로 초점 링을 띄운다 */
.page-my-member.page-my-popup.p-03p .my-card-item:focus-visible {
  outline: 2px solid var(--color-action-blue, #597FD0);
  outline-offset: 2px;
}

/*
 * 모바일 바텀시트 복원 — `my-member.css` 1063~ 이 `.p-03p .ui-popup-panel` 에 `width: 480px`
 * 를 고정하는데, 그 선택자(클래스 4개)가 `_components.css` 의 768px 이하 규칙
 * (`.ui-popup-panel { width: 100% }`, 클래스 1개)보다 구체적이어서 **미디어쿼리를 이긴다.**
 * 그대로 두면 좁은 화면에서 시트가 480px 로 남아 화면 밖으로 넘친다.
 */
@media (max-width: 768px) {
  .page-my-member.page-my-popup.p-03p .ui-popup-panel {
    width: 100%;
    max-height: calc(100dvh - 40px);
  }
}

/*
 * 주문상세 상품별 액션 줄(FP-OD-08) — 목업 CH-U-MY-02-01-02 예시는 액션이 전부 닫힌 주문이라
 * 대응 마크업이 없다. 목록(CH-U-MY-02-01-01)과 같은 클래스(`.order-actions`)를 그대로 쓰되,
 * 목록은 상품정보 옆 3번째 그리드 칸에 두는 반면 여기는 `.detail-product-body`(결제정보 포함)
 * 아래 별도 줄로 온다 — 목록 전용 테두리·중앙정렬을 지운다.
 */
.page-order-detail .order-actions {
  justify-content: flex-start;
  padding: 12px 0 0;
  border: 0;
}

/*
 * 배송조회 팝업 (CH-U-MY-02-01-08p) — 공용 `UiPopup` 셸과의 구조 차이 보정.
 *
 * 스타일 정본은 `page/my-shopping.css` 의 `.page-my-popup .delivery-popup` 블록이다.
 * 목업 원본은 `<header class="ui-popup-head">` 가 `.ui-popup-content`(모바일 패딩 `0 20px`)
 * *안쪽* 첫 자식이라 `margin-right/left: -20px` 로 그 패딩을 상쇄해 헤더를 패널 끝까지
 * 넓힌다. `UiPopup` 은 헤더를 `.ui-popup-content` *바깥* 형제로 그리므로 되돌릴 패딩이 없다 —
 * 그대로 두면 헤더가 패널보다 40px 넓어져 `overflow: hidden` 에 잘리고 제목이 왼쪽으로
 * 20px 밀린다(배송지 팝업과 같은 이유 — 위 `.address-add-popup` 주석).
 */
@media (max-width: 760px) {
  .page-my-popup .delivery-popup .ui-popup-head {
    margin-right: 0;
    margin-left: 0;
  }

  /*
   * 목업은 이력 목록(240px 스크롤 영역)이 차 있다고 보고 시트 높이를 587px 로 고정한다.
   * 이력이 없을 때는 그 높이가 전부 빈 자리가 되므로 내용만큼만 올라오게 한다.
   */
  .page-my-popup .delivery-popup .ui-popup-panel:has(.delivery-track-empty) {
    height: auto;
  }
}

/*
 * 송장번호 셀렉트 (CH-U-MY-02-01-08p · FP-OL-09) — 분할배송이라 운송장이 여럿일 때만 나온다.
 *
 * `.delivery-meta` 의 한 줄(`padding: 7px 0 8px`)에 40px 짜리 공용 셀렉트를 그대로 넣으면
 * 그 줄만 두 배로 벌어져 위아래 줄과 어긋난다 — 줄 높이에 맞춰 상자만 줄인다.
 * 목업이 정의한 클래스는 건드리지 않는다(`.option-select > select` 는 내 문의 조회기간과 공용이다).
 */
.delivery-popup .delivery-meta > div {
  align-items: center;
}

/* 목업의 dt align-self: start가 행의 가운데 정렬보다 우선하므로 직접 보정한다. */
.page-my-popup .delivery-popup .delivery-meta > div > dt {
  align-self: center;
  text-align: center;
}

.delivery-popup .delivery-invoice-select {
  display: block;
  width: 100%;
  min-width: 0;
}

.delivery-popup .delivery-invoice-select > select {
  width: 100%;
  min-width: 0;
  height: 32px;
  padding-right: 30px;
  padding-left: 10px;
  background-position: calc(100% - 17px) 13px, calc(100% - 12px) 13px;
}

/*
 * 배송 이력이 없을 때 — 목업(`.delivery-timeline`)에 대응 마크업이 없는 자리다.
 * 운송장이 아직 없거나 택배사 수신 전이면 이 자리다.
 * 타임라인과 같은 높이를 잡아 팝업이 열릴 때마다 높이가 뛰지 않게 한다.
 */
.delivery-track-empty {
  display: flex;
  min-height: 160px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  color: var(--color-text-gray);
  text-align: center;
}

.claim-reason dl {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 8px 12px;
  margin-top: 12px;
}

.claim-status {
  margin: 16px 0;
}

/*
 * 클레임 신청(취소·반품·교환) 제출 오류 문구.
 *
 * 목업에는 대응 클래스가 없다 — 요청 화면에 오류 상태가 그려져 있지 않다. 그래서 색만 준다:
 * 자리·타이포는 본문 흐름(`text-body2`) 그대로 두고 제출 버튼 바로 위에 붙는다.
 * `.form-error` 와 같은 색을 쓴다(같은 성격의 문구를 화면마다 다른 색으로 만들지 않는다).
 */
.claim-error {
  margin-top: 16px;
  color: #d0021b;
  text-align: center;
}

.claim-reason-form {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.claim-reason-form textarea {
  width: 100%;
  resize: vertical;
}

/*
 * 내 문의 수정 팝업 (FP-MQ-05).
 *
 * 목업에 수정 화면·팝업이 없다(`CH-U-MY-04-01` 에는 `.btn-wrap > .edit` 버튼만 있다).
 * 그래서 클래스도 대응이 없어 여기서 자리만 잡는다 — 입력 상자 자체는 공용 `.form-field` 다.
 * `.claim-reason-form` 과 같은 규칙을 쓴다(같은 성격의 팝업 폼을 화면마다 다르게 만들지 않는다).
 */
.inquiry-edit-form {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.inquiry-edit-form textarea {
  width: 100%;
  min-height: 160px;
  padding: 12px 16px;
  resize: vertical;
}

.inquiry-edit-image {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
}

.inquiry-edit-image > span {
  width: 100%;
}

/* 첨부 상자·삭제 버튼은 등록 화면과 같은 규칙을 쓴다 — app/inquiry-photo-attach.css */

.page-inquiry .inquiry-photo > button {
  display: block;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: zoom-in;
}

.page-inquiry .inquiry-photo > button:focus-visible {
  outline: 2px solid var(--color-primary, #ee5d44);
  outline-offset: 3px;
}

/*
 * 조회조건 셀렉트 (CH-U-MY-02-01-01 · 02-02-01).
 *
 * 목업은 커스텀 셀렉트(`.ui-select`: 숨은 select + `button.ui-select-trigger` + `ul`)를 쓰고
 * `my-shopping.css` 가 그 **버튼**에만 상자를 준다. 화면은 네이티브 select 를 쓰므로
 * (키보드·모바일 기본 동작을 그대로 쓴다) 대응 규칙이 없어 UA 기본 높이로 남았다 —
 * 옆 날짜 입력(40px)과 높이·정렬이 어긋난다. `.ui-select-trigger` 와 같은 상자로 맞춘다.
 *
 * 목업이 정의한 클래스는 건드리지 않는다 — 여기서 고르는 것은 `.shopping-select > select` 뿐이다.
 */
.shopping-select > select {
  width: 100%;
  height: 40px;
  padding: 0 34px 0 16px;
  border: 1px solid #ddd;
  border-radius: 4px;
  background: #fff;
  color: var(--color-text);
  /* 화살표는 `.ui-select-trigger::after` 와 같은 모양을 배경으로 그린다(select 에는 ::after 가 없다) */
  background-image: linear-gradient(45deg, transparent 50%, var(--color-text) 50%),
    linear-gradient(135deg, var(--color-text) 50%, transparent 50%);
  background-position: calc(100% - 19px) 17px, calc(100% - 14px) 17px;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  appearance: none;
  cursor: pointer;
}

.shopping-select > select:focus-visible {
  outline: 2px solid var(--color-text);
  outline-offset: 1px;
}

/* 날짜 입력 — 목업이 `readonly + 달력 팝업` 이라 네이티브 date 의 달력 버튼 여백이 없다.
   iOS(WKWebView)는 이 네이티브 인디케이터가 in-flow 로 오른쪽 20px 를 차지해, 날짜값이
   그 왼쪽 공간 기준으로만 가운데 정렬돼 박스 정중앙에서 벗어나 보인다(우측 쏠림).
   숨겨서 값을 박스 정중앙으로 둔다 — 내 문의(`.date-wrap` indicator 는 position:absolute 라
   애초에 공간을 안 먹어 정중앙)와 동일하게 맞춘다. 달력 아이콘은
   `.shopping-dates input` 의 배경이미지(calc(100% - 12px) center)로 그대로 보인다. */
.shopping-dates input[type='date']::-webkit-calendar-picker-indicator {
  display: none;
}

/* iOS(WKWebView/Safari)는 `<input type="date">` 를 네이티브 인트린식 폭으로 렌더해 width 를
   무시, 날짜 칸이 화면 밖으로 넘친다(안드로이드는 정상). appearance 를 꺼 일반 상자로 만들어
   my-shopping.css 의 width:100%/min-width:0 이 먹게 한다 — 주문/배송조회·취소반품교환 공통.
   달력 아이콘은 `.shopping-dates input` 의 배경이미지로 유지된다. */
.shopping-dates input[type='date'] {
  -webkit-appearance: none;
  appearance: none;
  /* iOS 는 appearance 를 끄면 date 값의 네이티브 가운데정렬이 사라져 좌측으로 붙는다
     (안드로이드는 기본 가운데). 내 문의(.date-wrap input)와 동일하게 가운데로 맞춘다. */
  text-align: center;
}

/*
 * 내 문의 조회기간 셀렉트 (CH-U-MY-04-01 · FP-MQ-02).
 *
 * 목업은 커스텀 셀렉트(`.option-select`: `button.select-btn` + `ul.option-list`)를 쓰지만
 * 화면은 네이티브 select 를 쓴다(`.shopping-select` 와 같은 이유) — 대응 규칙이 없어
 * `.select-btn`(40px 상자)과 높이·정렬이 어긋난다. 같은 상자로 맞춘다.
 *
 * 목업이 정의한 클래스는 건드리지 않는다 — 여기서 고르는 것은 `.option-select > select` 뿐이다.
 */
.option-select > select {
  width: 100%;
  height: 40px;
  padding: 0 34px 0 14px;
  border: 1px solid #ddd;
  border-radius: 4px;
  background-color: #fff;
  color: var(--color-text);
  font-size: 14px;
  background-image: linear-gradient(45deg, transparent 50%, var(--color-text) 50%),
    linear-gradient(135deg, var(--color-text) 50%, transparent 50%);
  background-position: calc(100% - 19px) 17px, calc(100% - 14px) 17px;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  appearance: none;
  cursor: pointer;
}

.option-select > select:focus-visible {
  outline: 2px solid var(--color-text);
  outline-offset: 1px;
}

/*
 * 내 문의 조회 버튼 — 1024px 이하 (CH-U-MY-04-01 · FP-MQ-02).
 *
 * 목업(`inquiry.css`)은 `.date-wrap button`("조회")을 1024px 이하에서 통째로 숨긴다 —
 * 그대로 두면 **모바일에서 `기간지정`을 골라 날짜를 채워도 조회를 실행할 수단이 없다**
 * (셀렉트를 고르는 것만으로 자동 조회하는 로직은 목업 JS 에도 없다). 찜 목록 정렬과
 * 같은 이유로 노출만 되돌린다 — 목업이 정의한 클래스·마크업은 건드리지 않는다.
 *
 * 날짜 입력도 목업 그대로면 두 칸이 `201px` 고정이라 좁은 화면에서 넘친다 — 두 칸 + 버튼이
 * 한 줄에 들어가도록 `flex-wrap` 을 걸고 입력칸은 유동폭으로 줄어들게 한다 — 접근성 라벨
 * 때문에 `input` 이 `label` 로 감싸여 있어 **플렉스 항목은 `label`** 이므로 거기에 건다.
 */
@media (max-width: 1024px) {
  .inquiry-box .date-wrap {
    flex-wrap: wrap;
  }

  .inquiry-box .date-wrap > label {
    flex: 1 1 120px;
    min-width: 0;
  }

  .inquiry-box .date-wrap input {
    width: 100%;
    min-width: 0;
  }

  .inquiry-box .date-wrap button {
    display: flex;
    flex: 1 1 100%;
    justify-content: center;
    margin-top: 4px;
  }
}

/*
 * 찜 목록 정렬 (CH-U-MY-03-01-01).
 *
 * 목업 `wishlist.css` 는 `.wishlist-head > div { display: none }` 이고 768px 이하에서만
 * `flex` 로 되돌린다 — 그대로 두면 **PC 에서 정렬을 고를 수 없다**. 마크업은 목업 그대로
 * 두고(그래야 `.position` 드롭다운 스타일이 붙는다) PC 노출만 되돌린다.
 *
 * 목업의 `필터` 버튼(`.filter_mo`)은 그리지 않는다 — 이 화면의 조회조건은 카테고리 탭과
 * 2차 필터 칩(`.wishlist-nav`·`.wishlist-filters`, FP-WL-02·03)이 전부이고 둘 다 PC·모바일
 * 모두 화면에 그대로 나와 있어, 열어서 고를 것이 남지 않는다(상품목록의 필터 패널과 다르다).
 */
.page-wishlist .wishlist-head > div {
  display: flex;
}

/*
 * 회원정보 변경 — 이메일 표시줄 (CH-U-MY-01-02 · FP-MI-06).
 *
 * 목업 `my-member.css` 는 `.cmi-action-row.w-218` 을 **218px 고정**으로 두고 그 안에서
 * 텍스트와 `변경` 버튼(47px + margin-left 40px)을 `space-between` 으로 벌린다 — 이메일에
 * 남는 폭이 131px 뿐이라 목업 샘플(`email123@naver.com`)보다 긴 실제 이메일은 두 줄로
 * 개행된다. 목업 마크업·클래스는 그대로 두고 폭 규칙만 되돌린다.
 *
 * PC: 218px 을 고정폭 대신 **최소폭**으로 바꿔 짧은 이메일은 목업과 같은 자리에 버튼이 오고
 * 긴 이메일은 줄바꿈 없이 줄이 늘어난다.
 * 768px 이하: 줄 폭이 화면 폭에 묶여 늘릴 수 없다 — 개행 대신 말줄임(…)으로 자른다
 * (전체 값은 `title` 과 `변경` 레이어의 입력칸에서 확인한다).
 */
.page-my-member .component-wrap .content-wrap .right-wrap .change-my-info .cmi-member-detail .cmi-action-row.w-218 {
  width: auto;
  min-width: 218px;
}

.page-my-member .component-wrap .content-wrap .right-wrap .change-my-info .cmi-member-detail .cmi-action-row.w-218 .cmi-text-link {
  min-width: 0;
  white-space: nowrap;
}

.page-my-member .component-wrap .content-wrap .right-wrap .change-my-info .cmi-member-detail .cmi-action-row.w-218 .cmi-change-small {
  flex: 0 0 auto;
}

@media (max-width: 768px) {
  .page-my-member .component-wrap .content-wrap .right-wrap .change-my-info .cmi-member-detail .cmi-action-row.w-218 {
    width: 100%;
    min-width: 0;
  }

  .page-my-member .component-wrap .content-wrap .right-wrap .change-my-info .cmi-member-detail .cmi-action-row.w-218 .cmi-text-link {
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

/*
 * 내 리뷰·내 문의 사진 뷰어 (CH-U-MY-04/05 · FP-MQ-07 · FP-RV-06).
 * 문의 첨부 영역에도 리뷰와 같은 뷰어 스타일을 적용한다.
 */
.page-inquiry .review-photo-viewer {
  position: relative;
  display: none;
  width: 100%;
  margin-bottom: 24px;
}

.page-inquiry .review-photo-viewer.on {
  display: block;
}

.page-inquiry .review-photo-viewer .review-photo-swiper {
  position: relative;
  width: 100%;
  height: 600px;
}

.page-inquiry .review-photo-viewer .swiper-slide {
  display: flex;
  align-items: center;
  justify-content: center;
}

.page-inquiry .review-photo-viewer .swiper-slide img {
  display: block;
  width: auto;
  height: auto;
  max-width: 600px;
  max-height: 600px;
  object-fit: contain;
}

.page-inquiry .review-photo-viewer .swiper-button-prev,
.page-inquiry .review-photo-viewer .swiper-button-next {
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 50%;
  background-color: rgba(17, 17, 17, 0.55);
}

.page-inquiry .review-photo-viewer .swiper-button-prev {
  left: 30px;
}

.page-inquiry .review-photo-viewer .swiper-button-next {
  right: 30px;
}

.page-inquiry .review-photo-viewer .swiper-button-prev::after,
.page-inquiry .review-photo-viewer .swiper-button-next::after {
  width: 20px;
  height: 20px;
  background: url('/assets/images/sub/inquiry/arrow_white.svg') center / contain no-repeat;
  content: '';
}

.page-inquiry .review-photo-viewer .swiper-button-next::after {
  transform: rotate(180deg);
}

.page-inquiry .review-photo-viewer .swiper-button-prev svg,
.page-inquiry .review-photo-viewer .swiper-button-next svg {
  display: none;
}

.page-inquiry .review-photo-viewer .swiper-pagination {
  position: absolute;
  bottom: 16px;
  left: 50%;
  width: auto;
  padding: 4px 10px;
  border-radius: 100px;
  background: rgba(17, 17, 17, 0.55);
  color: #fff;
  font-size: 13px;
  letter-spacing: -0.4px;
  transform: translateX(-50%);
}

.page-inquiry .review-photo-viewer .review-photo-close {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 12;
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 50%;
  background: none;
  cursor: pointer;
}

.page-inquiry .review-photo-viewer .review-photo-close span {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 20px;
  height: 1px;
  background: #000;
}

.page-inquiry .review-photo-viewer .review-photo-close span:first-child {
  transform: translate(-50%, -50%) rotate(45deg);
}

.page-inquiry .review-photo-viewer .review-photo-close span:last-child {
  transform: translate(-50%, -50%) rotate(-45deg);
}

/*
 * 좌우 버튼 자리 보정.
 *
 * 목업은 `swiper-bundle.min.css`(전체)를 통째로 싣지만 우리는 필요한 모듈 CSS 만 넣는다
 * (`layout.tsx` — swiper/css, /pagination, /thumbs). navigation 모듈 CSS 가 빠져 있어
 * `inquiry.css` 의 `.review-photo-viewer .swiper-button-prev|next` 규칙(크기·배경·좌우 위치)만으로는
 * 버튼이 슬라이드 위에 겹치지 않고 흐름에 남는다. 상품 상세도 같은 이유로
 * `product-review-photo.css` 가 이 자리 값을 직접 준다.
 *
 * navigation 모듈 CSS 를 전역으로 넣지 않는 이유: 기본 화살표(`::after` 아이콘 폰트)와 크기 변수가
 * 이미 자체 CSS 로 그려 둔 다른 스와이퍼(메인 배너·상품 갤러리)까지 바꾼다.
 */
.page-inquiry .review-photo-viewer .swiper-button-prev,
.page-inquiry .review-photo-viewer .swiper-button-next {
  position: absolute;
  top: 50%;
  z-index: 10;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: translateY(-50%);
  cursor: pointer;
}

/* 끝 슬라이드에서 눌리지 않는 버튼임을 보인다 — navigation 모듈 CSS 의 기본 동작이다 */
.page-inquiry .review-photo-viewer .swiper-button-disabled {
  opacity: 0.35;
  pointer-events: none;
}

/* 사진이 한 장이면 스와이퍼가 잠금 클래스를 붙인다 — 그때는 버튼을 감춘다 */
.page-inquiry .review-photo-viewer .swiper-button-lock {
  display: none;
}

@media (max-width: 1024px) {
  .page-inquiry .review-photo-viewer {
    margin-bottom: 0;
  }

  .page-inquiry .review-photo-viewer .review-photo-swiper {
    height: auto;
  }

  .page-inquiry .review-photo-viewer .swiper-slide img {
    width: 100%;
    max-width: 100%;
    max-height: none;
  }

  .page-inquiry .review-photo-viewer .swiper-button-prev {
    left: 0;
  }

  .page-inquiry .review-photo-viewer .swiper-button-next {
    right: 0;
  }
}

/*
 * 회원정보변경 — 이메일 변경 레이어의 오류 문구 자리 (CH-U-MY-06 · FP-MI-06/07/09).
 *
 * 목업 `my-member.css` 의 `.email-change-layer` 는 `이메일입력 | 입력줄` 2칸 컨테이너다
 * (PC·768px 이하는 flex, 590px 이하는 `grid-template-columns: 80px minmax(0,1fr)`).
 * 오류 문구를 레이어 직계로 두면 3번째 칸이 되어 PC 는 저장 버튼 오른쪽에 붙고
 * 590px 이하는 라벨 칸(80px)으로 떨어진다. 그래서 입력줄과 오류를 `.email-change-col` 한 칸으로
 * 묶고, 그 안에서 세로로 쌓는다 — 목업 마크업·클래스는 그대로 두고 칸 하나만 덧댄다.
 *
 * 그 칸은 flex 가 아니라 블록이다 — 세로 flex 로 두면 목업이 입력줄에 준 `flex: 1`(가로 기준)이
 * 세로 기준으로 재해석되어 높이 계산에 끼어든다. 블록이면 그 선언이 그대로 무시된다.
 */
.page-my-member .change-my-info .email-change-layer > .email-change-col {
  display: block;
  min-width: 0;
}

/* 휴대폰번호도 값·변경 버튼 아래에 오류를 쌓는다 — 이메일 변경 오류와 같은 열 구조다. */
.page-my-member .change-my-info .cmi-member-detail > .cmi-phone-field {
  height: auto;
  min-height: 52px;
}

.page-my-member .change-my-info .cmi-phone-col {
  display: block;
  min-width: 0;
  padding: 12px 0;
}

/* 비밀번호·마케팅도 입력/선택 행과 오류를 같은 칸에 쌓는다. */
.page-my-member .change-my-info .pw-change-feedback-col,
.page-my-member .change-my-info .cmi-marketing-feedback {
  display: block;
  min-width: 0;
}

.page-my-member .change-my-info .pw-change-feedback-col .pw-change-input-row {
  width: 100%;
}

@media (max-width: 768px) {
  .page-my-member .change-my-info .pw-change-feedback-col {
    flex: 1;
    min-width: 0;
  }
}

/*
 * 768px 이하에서 목업은 라벨(102px) 옆의 남은 폭을 입력줄이 `flex: 1` 로 채우게 한다.
 * 이제 그 자리는 `.email-change-col` 이므로 폭을 채우는 쪽을 바깥 칸으로 옮긴다 —
 * 입력줄은 블록이라 칸 폭을 그대로 쓴다.
 */
@media (max-width: 768px) {
  .page-my-member .change-my-info .email-change-layer > .email-change-col {
    flex: 1;
  }
}

/*
 * 확인 팝업 본문 문구 — 목업에 대응 클래스가 없다.
 * 헤더 제목(`.ui-popup-head`)과 푸터 버튼(`.ui-popup-foot`)이 모두 가운데 정렬인데 문구만
 * 왼쪽으로 붙어 축이 어긋나 보이므로 같이 맞춘다 — 카드·배송지·문의·리뷰 삭제 확인이 같은 자리다.
 */
.mypage-confirm-text {
  text-align: center;
}

/*
 * 클레임 신청의 회수지·교환배송지 상자 (CH-U-MY-02-01-06 · -07 `.claim-address`) — 모바일 보정.
 *
 * PC 는 `padding: 20px 84px 20px 20px` 로 절대배치된 `변경` 버튼 자리를 비워 두는데,
 * 960px 이하 오버라이드가 `padding: 20px 16px` 로 좌우를 같게 줄이면서 그 자리가 사라진다 —
 * 도로명 주소가 길면 두 줄 다 버튼 아래로 들어가 가려진다. 오른쪽만 다시 비운다
 * (버튼은 `right: 16px` 에 폭 60px 남짓이라 76px 이면 겹치지 않는다).
 */
@media (max-width: 960px) {
  .page-claim-request .claim-address {
    padding-right: 76px;
  }

  /* 셀렉트·직접입력은 목업이 상자 폭 전체를 쓰게 했다 — 비워 둔 오른쪽을 되돌려 준다 */
  .page-claim-request .claim-address .pickup-select,
  .page-claim-request .claim-address .pickup-direct {
    width: calc(100% + 60px);
  }
}

/*
 * 요청 유형 불가 화면 (`ClaimTypeUnavailable`) — 목업에 대응 화면이 없다.
 *
 * 반품 링크로 들어왔는데 서버가 반품을 막았을 때 그리는 화면이다. 여기에는 "현재 유형" 이
 * 없으므로 `.claim-tabs`(현재 유형을 `.active` 로 표시하는 유형 탭)를 재사용하지 않는다 —
 * 같은 모양이면 이미 그 유형을 고른 것으로 읽힌다.
 *
 * 색·여백·버튼 모양은 새로 만들지 않고 기존 것을 그대로 쓴다:
 * 사유 상자는 목업 `.claim-caption`(`#F6F7F9` 회색 상자) 그대로이고, 전환 버튼은
 * 목업 `.claim-submit`(흰 배경 · 1px `#ddd` 테두리 · 44px)과 같은 규칙이다.
 */
.page-claim-request .claim-unavailable {
  display: flex;
  flex-direction: column;
}

/* 불가 사유가 먼저 읽힌다 — 전환 버튼은 그 아래다 */
.page-claim-request .claim-unavailable-notice {
  order: 0;
}

/* 사유가 여러 건이면 줄바꿈이 필요하다 — 목업의 한 줄짜리 고정 높이를 풀어 준다 */
.page-claim-request .claim-unavailable-notice .claim-caption {
  height: auto;
  padding: 16px;
  text-align: center;
}

.page-claim-request .claim-unavailable-notice .claim-caption > li + li {
  margin-top: 8px;
}

.page-claim-request .claim-unavailable-actions {
  order: 1;
  display: flex;
  flex-direction: column;
  width: 320px;
  max-width: 100%;
  align-items: stretch;
  gap: 8px;
  margin: 24px auto 0;
}

/* 목업 `.claim-submit` 과 같은 버튼 규칙이다 — 새 색을 만들지 않는다 */
.page-claim-request .claim-unavailable-switch {
  display: flex;
  height: 44px;
  align-items: center;
  justify-content: center;
  border: 1px solid #ddd;
  border-radius: 4px;
  background: #fff;
  color: #222;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
}

@media (max-width: 960px) {
  .page-claim-request .claim-unavailable-actions {
    width: 100%;
    margin-top: 16px;
  }
}

/* 결과를 알 수 없는 오류 뒤 재조회 버튼 — 본문 안에 서고, 목업 `.button` 규칙을 그대로 쓴다 */
.page-claim-reason .reason-popup .reason-refresh {
  display: block;
  height: 40px;
  margin: 12px auto 0;
  padding: 0 16px;
}

/*
 * 전체 주문취소 화면(CH-U-MY-02-01-03, `all=1`)의 대상 상품이 여러 개일 때 — 목업에 대응
 * 마크업이 없다(목업은 조각 하나만 그린다).
 *
 * PC 는 `.request-product` 자체가 테두리 있는 카드라 그대로 쌓아도 구분되지만, 모바일은
 * `my-shopping.css` 가 테두리를 지우고 `padding: 20px 16px 0` 만 남기므로 여섯 건이 이어
 * 붙으면 어디까지가 한 상품인지 읽히지 않는다. 두 번째 카드부터 구분선을 준다.
 */
@media (max-width: 960px) {
  .page-order-request .request-product + .request-product {
    margin-top: 20px;
    border-top: 1px solid var(--color-line);
  }
}

/*
 * 마이페이지 목록 하단의 `더보기`(`MyListMore`) — 주문/배송조회(CH-U-MY-02-01-01)와
 * 취소/반품/교환 내역(CH-U-MY-02-02-01)이 같은 버튼을 쓴다.
 *
 * `my-shopping.css` 의 `.shopping-more` 규칙은 두 곳뿐인데 둘 다 <b>PC 에서 버튼이 없다</b>:
 *   - `.page-my-shopping` 안 `@media (max-width: 960px)` (744행) — 모바일 전용 한 벌.
 *     주문/배송조회의 루트는 `page-my-shopping page-my-popup`(`lib/screens.ts`)이라
 *     PC 폭에서는 한 규칙도 걸리지 않아 브라우저 기본 버튼 모양으로 떴다.
 *   - `.page-claim-list` 안 (2930행) — 모양은 주지만 `display: none` 이고 모바일에서만
 *     되살린다(3039행). 두 화면 모두 PC·모바일이 같은 페이징 단위를 쓰므로 PC 에 버튼이
 *     없으면 두 번째 페이지부터는 열 방법이 아예 없다. `event-list-more.css` 와 같은 상황이다.
 *
 * 값은 새로 만들지 않고 목업 주문상세(CH-U-MY-02-01-02)의 `주문목록` 버튼
 * (`my-shopping.css` 의 `.page-order-detail .detail-list`, 1072행 · 모바일 1276행)을
 * 그대로 쓴다 — 같은 마이페이지의 320×44 목록 버튼 규격이다. 목업 원본은 고치지 않는다.
 *
 * ⚠ 선택자에 `button` 을 붙이는 것은 명시도 때문이다. 목업의 중첩 규칙
 * (`.page-claim-list { .shopping-more { display: none } }`)이 (0,2,0) 이라 클래스 두 개짜리
 * 로는 <b>동률</b>이고, 그러면 파일 로드 순서에만 기대게 된다 — 순서가 바뀌면 PC 에서 버튼이
 * 다시 사라진다. (0,2,1) 로 올려 순서와 무관하게 이기게 둔다(`!important` 는 쓰지 않는다).
 * 이 버튼은 항상 `<button>` 이다(`components/mypage/MyListMore.tsx`).
 */
button.shopping-more,
.page-my-shopping button.shopping-more {
  display: flex;
  width: 320px;
  height: 44px;
  align-items: center;
  justify-content: center;
  margin: 40px auto 0;
  padding: 0;
  border: 1px solid #ddd;
  border-radius: 4px;
  background: #fff;
  color: #222;
  font-size: 14px;
  font-weight: 500;
  line-height: 145%;
  letter-spacing: -0.025em;
}

/* 목업 `.detail-list` 와 같은 분기점·같은 값이다 — 좁은 폭에서 전체 폭이 된다 */
@media (max-width: 960px) {
  button.shopping-more,
  .page-my-shopping button.shopping-more {
    width: 100%;
    margin-top: 24px;
  }
}

/* 다음 페이지를 부르는 동안 — 문구가 `불러오는 중…` 으로 바뀌고 버튼이 잠긴다 */
.page-my-shopping button.shopping-more:disabled {
  color: var(--color-text-gray);
  cursor: default;
}

/*
 * 주문취소 화면(CH-U-MY-02-01-03 · 전체 주문취소)의 `주문취소, 결제서비스 이용동의 > 보기`
 * 레이어 — 목업 **CH-U-PP-01-01-02p 의 `.seller-info-popup`** 모양이다.
 *
 * 껍데기(`.ui-popup*`)는 `common/_components.css` 가 전역으로 주므로 목업이 그 위에 얹는 것만
 * 여기 옮긴다: 420px 패널 · 18px 가운데 제목 · 본문을 담는 테두리 스크롤 상자 ·
 * `.ui-popup-foot` 버튼 줄. 본문(약관 글) 자체는 손대지 않는다 — 타이포그래피는
 * `cart.css` 의 `payment-terms-body` 계열을 그대로 쓴다(`components/order/TermsPopup.tsx`).
 *
 * ⚠ 선택자에 `.ui-popup` 을 덧붙이는 것은 명시도 때문이다. 되돌려야 하는 목업 규칙
 * (`.page-payment { .payment-terms-body { padding: 4px 32px 0 } }` 등)이 (0,2,0) 이라
 * 클래스 두 개로는 동률이고 그러면 파일 로드 순서에만 기대게 된다.
 */
.ui-popup.request-terms .ui-popup-head h2 {
  color: #111;
  font-size: 18px;
  font-weight: 600;
  line-height: 155%;
  letter-spacing: -0.025em;
  text-align: center;
}

/* 스크롤은 안쪽 상자가 맡는다 — 껍데기가 함께 구르면 스크롤바가 두 줄로 뜬다 */
.ui-popup.request-terms .ui-popup-content {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  scrollbar-gutter: auto;
}

.ui-popup.request-terms .request-terms-content {
  padding: 0 32px;
}

/*
 * 목업의 `.seller-info-list` — 높이 200px 고정 대신 **최소 200px 에서 패널이 허락하는 만큼**
 * 늘어난다. 목업 내용은 한 문단이라 200px 로 끝나지만 약관 6종은 그보다 길어, 고정하면
 * 720px 패널 안에 200px 짜리 창만 뚫리고 아래가 빈다. 짧은 약관에서는 목업과 같은 200px 다.
 */
.ui-popup.request-terms .request-terms-box {
  min-height: 200px;
  flex: 1 1 auto;
  padding: 20px;
  border: 1px solid #e6e6f2;
  border-radius: 8px;
  background: #fff;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: #d9d9d9 transparent;
}

.ui-popup.request-terms .request-terms-box::-webkit-scrollbar {
  width: 4px;
}

.ui-popup.request-terms .request-terms-box::-webkit-scrollbar-track {
  background: transparent;
}

.ui-popup.request-terms .request-terms-box::-webkit-scrollbar-thumb {
  border-radius: 100px;
  background: #d9d9d9;
}

.ui-popup.request-terms .request-terms-box::-webkit-scrollbar-button {
  display: none;
  width: 0;
  height: 0;
}

/* 좌우·위 여백은 상자가 준다 — 팝업 본문에 걸려 있던 패딩을 되돌린다 */
.ui-popup.request-terms .request-terms-box.payment-terms-body,
.ui-popup.request-terms .request-terms-box.payment-order-agree-body,
.ui-popup.request-terms .request-terms-box.payment-personal-agree-body {
  padding: 20px;
}

/* 목업 모바일: 패널이 각 없이 바닥에 붙고, 제목 줄이 낮아지며 본문과 24px 벌어진다 */
@media (max-width: 768px) {
  .ui-popup.request-terms .ui-popup-panel {
    border-radius: 0;
  }

  .ui-popup.request-terms .ui-popup-head {
    min-height: 0;
    height: fit-content;
    margin-bottom: 24px;
  }

  .ui-popup.request-terms .ui-popup-head h2 {
    line-height: 135%;
  }

  .ui-popup.request-terms .request-terms-content {
    padding: 0 20px;
    margin-bottom: 8px;
  }
}

/* 결제수단 관리·바우처 자격조회 공통 카드사 이미지. */
.page-payment-method .payment-card-list article > .my-card-thumb,
.page-my-member.page-my-popup.p-03p .my-card-thumb {
  position: relative;
  display: block;
  width: 28px;
  height: 42px;
  flex: 0 0 28px;
  border-radius: 2px;
  background-color: transparent;
  background-image: var(--card-thumb-image, url("../../images/sub/my/card-dummy.png"));
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}

.page-payment-method .payment-card-list article > .my-card-thumb::after,
.page-my-member.page-my-popup.p-03p .my-card-thumb::after {
  content: none;
}

.page-payment-method .payment-card-list article > button.delete {
  border-color: rgba(240, 58, 27, 0.5);
  color: var(--color-secondary-orange);
}

.my-card-thumb-kb { --card-thumb-image: url("../../images/sub/my/cards/card-kb.png"); }
.my-card-thumb-shinhan { --card-thumb-image: url("../../images/sub/my/cards/card-shinhan.png"); }
.my-card-thumb-samsung { --card-thumb-image: url("../../images/sub/my/cards/card-samsung.png"); }
.my-card-thumb-bc { --card-thumb-image: url("../../images/sub/my/cards/card-bc.png"); }
.my-card-thumb-woori { --card-thumb-image: url("../../images/sub/my/cards/card-woori.png"); }
.my-card-thumb-hyundai { --card-thumb-image: url("../../images/sub/my/cards/card-hyundai.png"); }
.my-card-thumb-lotte { --card-thumb-image: url("../../images/sub/my/cards/card-lotte.png"); }
.my-card-thumb-generic { --card-thumb-image: url("../../images/sub/my/card-dummy.png"); }

/* 회원정보 비밀번호 정책 문구가 긴 입력창만 placeholder를 한 단계 작게 표시한다. */
.page-my-member .pw-change-layer .form-field::placeholder {
  font-size: 12px;
}

.ailet-guide-box .ailet-service-emphasis {
  font-weight: 700;
}

.page-my-member.page-my-popup.p-03p .voucher-method-selector {
  margin-top: 16px;
}

.page-my-member.page-my-popup.p-03p .voucher-method-tabs {
  display: flex;
  align-items: center;
  gap: 25px;
}

.page-my-member.page-my-popup.p-03p .voucher-method-tabs > button {
  min-width: 0;
  min-height: 44px;
  padding: 0 0 8px;
  border: 0;
  border-bottom: 2px solid transparent;
  background: transparent;
  color: var(--color-text);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
  cursor: pointer;
}

.page-my-member.page-my-popup.p-03p .voucher-method-tabs > button[aria-selected='true'] {
  border-bottom-color: var(--color-primary);
  font-weight: 600;
}

.page-my-member.page-my-popup.p-03p .voucher-method-tabs > button:focus-visible {
  outline: 2px solid #597fd0;
  outline-offset: -4px;
}

@media (max-width: 768px) {
  .page-my-member.page-my-popup.p-03p .voucher-method-tabs {
    gap: 12px;
  }
}

/* 결제내역 위치는 목업 그리드(PC 이미지 옆, 모바일 아래)를 유지한다. */
.page-order-detail .detail-product > h3.detail-claim-completed,
.page-order-detail .detail-payment .detail-cancel-value,
.page-order-detail .detail-payment .detail-cancel-value > b {
  color: #ee5d44;
}

.page-order-detail .detail-product-body > .detail-payment {
  min-width: 0;
}

/* 금액 요약과 거래내역이 같은 열 너비·간격을 사용한다. */
.page-order-detail .detail-payment > dl {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  column-gap: 24px;
}

.page-order-detail .detail-payment > dl > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-width: 0;
  gap: 12px;
}

.page-order-detail .detail-payment > p.detail-card-transaction {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 8px 24px;
}

.page-order-detail .detail-payment > p.detail-card-transaction > span {
  min-width: 0;
  padding-left: 0;
  overflow-wrap: anywhere;
}

.page-order-detail .detail-payment > p.detail-card-transaction > span::before {
  display: none;
}

.page-order-detail .detail-payment > p.detail-card-transaction + p.detail-card-transaction {
  padding-top: 8px;
}

@media (max-width: 960px) {
  .page-order-detail .detail-payment > dl,
  .page-order-detail .detail-payment > p.detail-card-transaction {
    grid-template-columns: minmax(0, 1fr);
  }
}

/*
 * 회원탈퇴 확인 팝업 (FP-MI-11 · CH-U-MY-01-02).
 *
 * 목업에 <b>탈퇴 팝업 페이지가 없다</b>. 사용자가 지목한 반품/교환 안내
 * (`CH-U-MY-02-01-09p` = `my-shopping.css` 의 `.claim-guide`)를 그대로 따르되,
 * 그 규칙은 `.page-my-shopping` 아래로 스코프돼 있어 회원정보 화면(`.page-my-member`)에서는
 * 걸리지 않는다. `.page-my-shopping` 을 임시로 얹으면 열려 있는 동안 회원정보 레이아웃까지
 * 그 블록의 사정권에 들어가므로, 같은 값만 이 화면 스코프로 다시 적는다(RULES 3.9 — 목업
 * 클래스는 재작성하지 않고, 대응 마크업이 없는 새 스타일만 `css/app/` 에 둔다).
 *
 * 껍데기(PC 가운데 카드 · 모바일 바텀시트 · 핸들 · 푸터 버튼 크기)는 `_components.css` 의
 * `.ui-popup` 이 이미 준다 — 09p 와 다른 값만 여기서 덮는다.
 *
 * ⚠ 분기점을 <b>768px</b> 로 둔다. 09p 원본은 760px 이지만 이 팝업의 껍데기를 그리는
 * `_components.css` 가 768px 로 갈리므로, 760px 을 쓰면 761~768px 구간에서 바텀시트 껍데기에
 * PC 본문 여백이 얹힌다.
 */
.page-my-member .member-withdraw .ui-popup-panel {
  /* 09p 패널 폭. 기본값 480px 보다 좁다 */
  width: min(100%, 420px);
}

.page-my-member .member-withdraw .ui-popup-head {
  min-height: 64px;
}

/*
 * 팝업 제목을 되살린다. `my-member.css` 의 `@media (max-width: 1280px)` 블록이
 * `.page-my-member.my-01-02 { h2, .my-info-lnb { display: none } }` 로 <b>이 화면의 h2 를 전부</b>
 * 숨긴다 — 본문 제목과 LNB 를 접으려는 규칙인데 팝업 제목까지 함께 사라진다(1280px 이하 데스크톱이
 * 그대로 걸린다). 목업도 768px 이하 블록에서는 같은 이유로 `.ui-popup-head h2` 를 되살려 두었다 —
 * 그 사이 구간에만 빠져 있어 우리 팝업 스코프로만 채운다(RULES 3.9 — 목업 규칙은 고치지 않는다).
 */
.page-my-member .member-withdraw .ui-popup-head h2 {
  display: block;
}

.page-my-member .member-withdraw .ui-popup-head h2 {
  color: var(--color-text);
  font-weight: 600;
  line-height: 155%;
  letter-spacing: -0.025em;
}

/* 09p `.claim-guide-intro` 와 같은 값 — PC 는 가운데정렬이다 */
.page-my-member .member-withdraw .member-withdraw-intro {
  margin: 0;
  padding: 0 32px 8px;
  color: var(--color-text);
  font-size: 15px;
  font-weight: 400;
  line-height: 145%;
  letter-spacing: -0.025em;
  text-align: center;
}

/* 실패 사유(USER_013 진행 중 주문·클레임 등)는 안내문 아래 같은 폭으로 붙는다 */
.page-my-member .member-withdraw .form-error {
  margin: 8px 0 0;
  padding: 0 32px;
  text-align: center;
}

@media (max-width: 768px) {
  .page-my-member .member-withdraw .ui-popup-head {
    min-height: fit-content;
  }

  .page-my-member .member-withdraw .ui-popup-head h2 {
    font-size: 18px;
  }

  /* 바텀시트에서는 제목과 함께 왼쪽으로 정렬한다(09p 모바일) */
  .page-my-member .member-withdraw .member-withdraw-intro,
  .page-my-member .member-withdraw .form-error {
    padding-right: 20px;
    padding-left: 20px;
    text-align: left;
  }

  .page-my-member .member-withdraw .ui-popup-foot {
    padding-top: 28px;
  }

  /*
   * 09p 는 안내문이 길어 본문 최소높이(`_components.css` 의 120px)가 그대로 차지만,
   * 여기는 한 줄이라 그 값이 안내문과 버튼 사이 빈 칸으로 남는다. 바텀시트 자체의 최소높이
   * (`.ui-popup-panel { min-height: 240px }`)는 그대로 두므로 시트가 얇아지지는 않는다.
   */
  .page-my-member .member-withdraw .ui-popup-content {
    min-height: 0;
  }
}
.detail-product-image-link {
  display: block;
  width: 100%;
  height: 100%;
}

/* 조회 결과는 본문 스크롤 밖의 버튼 위에 표시한다. */
.my-voucher-cert-popup .voucher-eligibility-foot {
  flex-wrap: wrap;
}

.my-voucher-cert-popup .voucher-eligibility-message {
  flex: 0 0 100%;
  min-width: 0;
  margin: 0;
  max-height: 25dvh;
  overflow-y: auto;
  overflow-wrap: anywhere;
  text-align: left;
}