/* 최신 장바구니·카드등록 목업의 앱 보정 — page/cart.css 원본과 분리한다. */
.page-payment .payment-card-save {
  width: 120px;
  height: 48px;
  padding: 0;
  border: 1px solid var(--color-action-blue);
  background: #fff;
  color: var(--color-action-blue-text);
}

.page-payment-fail .ui-popup-content {
  padding: 50px 32px 0;
}

.page-payment-fail .ui-popup-content p {
  color: #0b0d21;
  font-size: 16px;
  line-height: 150%;
  text-align: center;
}

.page-payment-fail .ui-popup-foot {
  padding: 32px 24px 24px;
}

.page-payment-fail .ui-popup-foot button {
  width: 120px;
  height: 48px;
  border: 1px solid #d9d9d9;
  border-radius: 4px;
  background: #fff;
  color: #111;
}

.page-cart .cart-product-bottom.no-option .cart-product-actions {
  align-self: center;
  margin-bottom: 0;
}

.page-cart .cart-buy-now {
  border-color: var(--color-action-blue);
  background: #fff;
  color: var(--color-action-blue);
}

.page-cart .cart-option-change {
  border-color: #ddd;
  background: #fff;
  color: var(--color-text);
}

/* 제공 약관 3종의 문단 구조: 기존 section/ol의 조항 20px·항목 8px 간격을 유지한다. */
.page-payment .payment-terms-body .payment-provider-document > h4 {
  margin-top: 20px;
  margin-bottom: 8px;
}

.page-payment .payment-terms-body .payment-provider-document > p + p,
.page-payment .payment-terms-body .payment-provider-document > .payment-terms-table + p {
  margin-top: 8px;
}

@media (max-width: 768px) {
  /* 삭제 X의 절대배치 기준을 버튼 안에 유지한다. 원본의 static은 X를 상품 중앙으로 보낸다. */
  .page-cart .cart-product-head .cart-remove {
    position: relative;
  }

  .page-payment .payment-card-save {
    width: 100%;
  }

  .page-payment-fail .ui-popup-content {
    display: flex;
    height: 120px;
    align-items: center;
    justify-content: center;
    margin: 0 20px 24px;
    padding: 0;
  }

  .page-payment-fail .ui-popup-foot {
    padding: 8px 20px;
  }

  .page-payment-fail .ui-popup-foot button {
    width: 100%;
  }

  .page-cart .cart-product-bottom.no-option .cart-product-actions {
    display: block;
  }

  .page-cart .cart-product-bottom.no-option .cart-product-actions button {
    width: 100%;
  }

  /*
   * 배송지 목록 팝업(AddressListPopup) — 이 팝업은 `.ui-popup-foot` 를 쓰지 않고 `저장` 버튼을
   * `.payment-address-body` 안에 둔다. 그래서 앱(WebView)에서 두 문제가 있었다:
   *  (1) 하단 `저장` 버튼이 시스템 제스처바/홈인디케이터와 겹친다 — body 모바일 패딩이
   *      `0 20px 8px`(cart.css)라 `env(safe-area-inset-bottom)` 보정이 없다.
   *  (2) 배송지가 많으면 목록을 넘겨도 스크롤되지 않는다.
   *
   * ⚠ 목록(`.payment-address-items`, `display:grid`)의 **내부 overflow 스크롤이 이 Android
   *   WebView 에서 동작하지 않는다** — `scrollHeight > clientHeight`(overflow-y:auto)인데도
   *   JS `scrollTop` · 터치 모두 먹지 않는 것을 실기기 원격디버깅(CDP)으로 확인했다. 대신
   *   **body 를 스크롤 컨테이너**로 만들면 JS·터치 스크롤이 정상 동작한다(CDP 실측).
   *   목업 원본(page/cart.css)은 건드리지 않고 여기서 보정한다:
   *   - body `overflow-y:auto` + 하단 안전영역 → 목록 전체 스크롤 + `저장` 이 시스템바를 피함.
   *   - 목록은 고정높이/내부스크롤을 풀고(`flex:none; max-height:none; overflow:visible`)
   *     자연 높이로 두어 body 가 스크롤하게 한다.
   */
  .payment-address-popup .payment-address-body {
    overflow-y: auto;
    padding-bottom: calc(8px + env(safe-area-inset-bottom));
  }

  .payment-address-popup .payment-address-items {
    flex: none;
    max-height: none;
    overflow: visible;
  }

  /*
   * 장바구니 옵션변경 팝업(CartOptionPopup)의 하단 버튼줄(`취소`·`저장`).
   * 이 팝업만 `.ui-popup-foot`(안전영역 내장) 대신 커스텀 `.cart-option-foot` 를 쓰는데,
   * 목업(cart.css)의 그 클래스에 `env(safe-area-inset-bottom)` 이 빠져 있어(다른 팝업 foot 은
   * 전부 있음) 앱에서 버튼이 시스템 제스처바/홈인디케이터와 겹친다. 다른 foot 과 동일하게 보정한다.
   */
  .cart-option-foot {
    padding-bottom: calc(8px + env(safe-area-inset-bottom));
  }
}