@charset "UTF-8";
/* ==========================================================================
   주문 (order.css)
   대상: /order/checkout, /order/{no}/complete, /member/orders, /member/orders/{no}
   - 토큰과 공통 클래스는 site.css 에 정의되어 있다. 여기서는 확장만 한다.
   - 폼 필드(.field / .form-grid)와 금액 요약(.cart-summary__*)은 각각
     member.css / cart.css 것을 그대로 재사용한다. 같은 화면 언어를 두 벌 만들지 않는다.
   - 모바일 퍼스트, 브레이크포인트 640px
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. 주문서 (checkout)
   -------------------------------------------------------------------------- */
.order-form .section {
    margin-bottom: var(--space-8);
}

/* 주문 상품 표 — 수량/금액은 우측 정렬해 자릿수를 눈으로 맞춘다 */
.order-table th:nth-child(2),
.order-table td:nth-child(2),
.order-table th:nth-child(3),
.order-table td:nth-child(3) {
    text-align: right;
    white-space: nowrap;
}

.order-summary {
    margin-top: var(--space-4);
}

.order-actions {
    margin-top: var(--space-8);
}

/* 입금 계좌 안내 */
.order-bank__title {
    font-weight: 700;
    color: var(--color-primary-dark);
    margin-bottom: var(--space-2);
}

.order-bank__account {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--space-2);
    margin-bottom: var(--space-2);
    font-size: var(--font-size-md);
}

/* 계좌번호는 이 화면에서 가장 중요한 값이다. 눈에 먼저 들어와야 한다. */
.order-bank__account > strong {
    font-size: var(--font-size-lg);
    color: var(--color-accent);
    /* 숫자 폭을 고정해 하이픈 위치가 흔들리지 않게 한다 */
    font-variant-numeric: tabular-nums;
}

.order-bank__amount {
    margin-bottom: var(--space-2);
}

.order-bank__amount > strong {
    font-size: var(--font-size-lg);
    color: var(--color-accent);
}

.order-bank__note {
    margin: 0;
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
}

/* --------------------------------------------------------------------------
   2. 주문 완료
   -------------------------------------------------------------------------- */
.order-done {
    padding: var(--space-6) var(--space-5);
    margin-bottom: var(--space-8);
    text-align: center;
    background: var(--color-primary-light);
    border-radius: var(--radius);
}

.order-done__title {
    font-size: var(--font-size-lg);
    font-weight: 700;
    color: var(--color-primary-dark);
    margin-bottom: var(--space-2);
}

.order-done__no {
    margin-bottom: var(--space-3);
}

.order-done__no > strong {
    font-size: var(--font-size-lg);
    font-variant-numeric: tabular-nums;
}

.order-done__lead {
    margin: 0;
    font-size: var(--font-size-sm);
    color: var(--color-text);
}

/* --------------------------------------------------------------------------
   3. 주문내역 목록
   -------------------------------------------------------------------------- */
.order-list__summary {
    margin-bottom: var(--space-4);
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
}

.order-list {
    margin: 0 0 var(--space-6);
    padding: 0;
    list-style: none;
}

.order-list .order-card {
    padding: var(--space-4) var(--space-5);
    margin-bottom: var(--space-3);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
}

.order-list .order-card__head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
    margin-bottom: var(--space-2);
    padding-bottom: var(--space-2);
    border-bottom: 1px solid var(--color-border);
}

.order-list .order-card__no {
    font-weight: 700;
    color: var(--color-primary-dark);
    font-variant-numeric: tabular-nums;
}

.order-list .order-card__date {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
}

/* 상태 칩은 오른쪽 끝으로 밀어 세로로 훑기 쉽게 둔다 */
.order-list .order-card__status {
    margin-left: auto;
}

.order-list .order-card__body {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    margin-bottom: var(--space-2);
}

.order-list .order-card__name {
    font-weight: 700;
}

.order-list .order-card__meta {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
}

/* 운송장 줄 — 등록된 주문에만 나온다 */
.order-list .order-card__ship {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    margin-bottom: var(--space-2);
    background: var(--color-tint);
    border-radius: var(--radius-sm);
    font-size: var(--font-size-sm);
}

.order-list .order-card__tracking {
    font-variant-numeric: tabular-nums;
}

.order-list .order-card__foot {
    display: flex;
    justify-content: flex-end;
}

/* --------------------------------------------------------------------------
   4. 주문 상세
   -------------------------------------------------------------------------- */
.order-detail__head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3);
    margin-bottom: var(--space-6);
    padding-bottom: var(--space-3);
    border-bottom: 1px solid var(--color-border);
}

.order-detail__no > strong {
    font-size: var(--font-size-lg);
    font-variant-numeric: tabular-nums;
}

.order-detail__date {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
}

/* --------------------------------------------------------------------------
   5. 태블릿 이상
   -------------------------------------------------------------------------- */
@media (min-width: 640px) {
    .order-list .order-card {
        padding: var(--space-5) var(--space-6);
    }

    .order-list .order-card__body {
        flex-direction: row;
        align-items: baseline;
        justify-content: space-between;
        gap: var(--space-4);
    }

    .order-done {
        padding: var(--space-8) var(--space-6);
    }
}

/* --------------------------------------------------------------------------
   6. 주문서 입력 줄이기 (어르신 사용성)

   이 블록이 겨냥하는 것은 '예쁨' 이 아니라 <손으로 치는 글자 수> 다.
   어르신에게 키보드 입력은 가장 비싼 동작이고, 한 번 막히면 주문을 포기한다.
   -------------------------------------------------------------------------- */

/* 받는 분 = 주문자 체크. 배송지 섹션의 첫 줄이라 눈에 먼저 들어와야 한다.
   기본이 '체크됨' 이므로, 대부분의 주문에서 아래 두 칸은 아예 보이지 않는다. */
.order-same {
    margin-bottom: var(--space-4);
    padding: var(--space-3) var(--space-4);
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
}

.order-same .check-row__label {
    font-size: var(--font-size-md);
    line-height: 1.5;
}

/* ── 주소 찾기 ──────────────────────────────────────────────────────────────
   버튼이 입력칸보다 먼저, 그리고 더 크다. 순서가 곧 안내다 —
   '찾기' 를 먼저 보여 주면 우편번호를 기억해 내려고 애쓸 일이 없다. */
.address-block {
    margin-bottom: var(--space-4);
    padding: var(--space-4);
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
}

.address-block__label {
    margin: 0 0 var(--space-2);
    font-size: var(--font-size-md);
    font-weight: 700;
    color: var(--color-text);
}

/* 손가락이 굵어도 빗나가지 않는 크기. 44px 는 최소치라 여기서는 더 준다. */
.address-block__find {
    min-height: 56px;
    font-size: var(--font-size-lg);
    font-weight: 700;
}

.address-block__hint {
    margin: var(--space-2) 0 var(--space-4);
    font-size: var(--font-size-sm);
    line-height: 1.6;
    color: var(--color-text-muted);
    text-align: center;
}

.address-block__hint b {
    color: var(--color-text);
}

/* 자동으로 채워지는 칸이라 평소에는 물러나 있게 둔다.
   회색으로 죽이지는 않는다 — 검색이 실패했을 때 직접 쳐야 하는 칸이기도 하다. */
.address-block .field__input::placeholder {
    font-size: var(--font-size-sm);
}

/* ── 배송 요청사항 버튼 ─────────────────────────────────────────────────── */
.memo-chips {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-bottom: var(--space-2);
}

/* 44px → --tap-min 으로 올렸다 (2026-09-20). 배송 메모 고르는 칩. */
.memo-chip {
    min-height: var(--tap-min);
    padding: var(--space-2) var(--space-4);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 999px;
    font-family: inherit;
    font-size: var(--font-size-md);
    color: var(--color-text);
    cursor: pointer;
}

.memo-chip:hover,
.memo-chip:focus-visible {
    border-color: var(--color-primary);
}

/* 고른 것이 한눈에 보여야 한다. 테두리 색만 바꾸면 어르신 눈에는 차이가 없다. */
.memo-chip.is-selected {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: #fff;
    font-weight: 700;
}

.memo-field .field__input {
    margin-top: var(--space-1);
}

@media (min-width: 640px) {
    .address-block {
        padding: var(--space-5) var(--space-6);
    }
}

/* --------------------------------------------------------------------------
   결제수단 라벨 안의 PG 로고.

   ★ 카카오페이 Cobranding 가이드가 <비율·색·투명도 변경>을 금지한다.
     그래서 width/height 를 함께 박지 않고 height 만 정하고 width 는 auto 로 둔다 —
     한쪽만 정하면 원본 비율이 그대로 유지된다.
   ★★ 글자와 세로 가운데를 맞춘다. 로고만 위로 뜨면 줄이 어긋나 보인다.
   -------------------------------------------------------------------------- */
.pay-logo {
    height: 28px;
    width: auto;
    vertical-align: middle;
    margin-right: 6px;
}

/* --------------------------------------------------------------------------
   주문서 쿠폰 고르기

   ★ 못 쓰는 쿠폰을 목록에서 빼지 않고 고를 수 없게만 둔다. 사라지면 손님은
     "받은 쿠폰이 왜 안 보이지" 하고 전화한다 — 그 전화를 받는 사람은 농원주다.
   ★★ 흐리게 하되 글자는 읽히게 둔다. opacity 로 통째로 죽이면 이 사이트의
     주 사용자층에게는 안 보이는 것과 같다.
   -------------------------------------------------------------------------- */
/*
  fieldset 의 기본 테두리·여백을 걷어낸다. 이 묶음은 상자가 아니라 <이름 붙은 한 덩어리>다.
  (상자를 그리면 결제수단 라디오와 나란히 놓였을 때 쿠폰만 액자에 든 것처럼 보인다)
*/
.coupon-pick {
    margin: 0 0 var(--space-5);
    padding: 0;
    border: 0;
    min-width: 0;   /* fieldset 의 기본 min-width:min-content 가 좁은 화면에서 칸을 밀어낸다 */
}

/*
  ★ 제목이 아니라 legend 다. 그래서 크기를 본문 위로 올리지 않는다 —
    이 화면의 단계는 본문 17 / 섹션제목 22 이고 그 사이에 1.2배를 지킬 자리가 없다.
    묶음의 이름은 <크기>가 아니라 <굵기와 자리>로 구분한다.
*/
.coupon-pick__title {
    padding: 0;
    margin-bottom: var(--space-3);
    font-size: var(--font-size-base);
    font-weight: 700;
    line-height: 1.5;
}

.coupon-pick .check-row__box:disabled + .check-row__label {
    color: var(--color-text-muted);
    cursor: not-allowed;
}

.coupon-pick .check-row__label strong {
    color: var(--color-accent);          /* 익은 사과 레드 — 돈이 깎이는 값이다 */
    margin-right: .35rem;
}

.coupon-pick .check-row__box:disabled + .check-row__label strong {
    color: var(--color-text-muted);      /* 못 쓰는 쿠폰에 '돈 색' 을 쓰지 않는다 */
}

/* 할인 줄. 빼는 값이라 다른 줄과 부호가 반대인 것이 한눈에 보여야 한다. */
.cart-summary__row--discount dd {
    color: var(--color-accent);
    font-weight: 700;
}


/* --------------------------------------------------------------------------
   7. 주문 취소 구획 (회원 주문 상세)

   ★ 되돌릴 수 없는 행동이라 <따로 떼어> 둔다. '주문내역으로' 옆에 나란히 두면
     되돌아가려던 손가락이 취소를 누른다.
   ★★ 그렇다고 빨간 큰 버튼으로 만들지 않는다. 이 화면에서 취소는 <잘못>이 아니라
     손님이 할 수 있는 정당한 선택이고, 겁주는 색은 오히려 "눌러도 되나" 하고 전화하게 만든다.
     경계는 색이 아니라 확인 대화상자와 분리된 자리가 맡는다.
   -------------------------------------------------------------------------- */
.order-cancel {
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: var(--space-5);
    background: var(--color-surface);
}

.order-cancel__text {
    margin-bottom: var(--space-4);
    line-height: 1.8;
}

/* 폭 전체를 쓰지 않는다 — 이 화면의 주 행동이 아니다. 좁은 화면에서만 늘린다. */
.order-cancel__btn {
    width: 100%;
}

@media (min-width: 640px) {
    .order-cancel__btn {
        width: auto;
    }
}

.order-cancel__note {
    margin-top: var(--space-4);
    font-size: var(--font-size-sm);
    line-height: 1.7;
    color: var(--color-text-muted);
}

/* 주문서 상단의 "지난번 보내신 곳으로 채워 뒀다" 한 줄.
   ★ 알림(auth-alert)처럼 크게 두르지 않는다. 이건 사고가 아니라 <안내>이고,
     주문서에서 가장 먼저 눈에 들어와야 하는 것은 그 밑의 입력칸들이다. */
.order-prefill {
    margin-bottom: var(--space-5);
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius);
    background: var(--color-tint);
    font-size: var(--font-size-sm);
    line-height: 1.7;
    color: var(--color-text);
}

/* ------------------------------------------------------------------ 결제하기: 바로 결제
   결제하기 화면은 <지나가는 자리>다. 도착하면 곧바로 토스 결제창을 열고(toss-payment.js),
   그동안 손님에게는 "결제창을 여는 중" 한 줄만 보인다. 금액 · 수단 탭 · 퇴로는 결제창을 닫았거나
   실패했을 때만 드러난다(스크립트가 html.pay-auto 를 걷어낸다). */
.pay-opening { display: none; }
.pay-auto .pay-opening {
    display: block;
    padding: var(--space-6, 32px) 0;
    font-size: var(--font-size-lg, 1.2rem);
    text-align: center;
    color: var(--color-text);
}
.pay-auto .pay-details { display: none; }

/* ==========================================================================
   주문서 · 결제 · 주문완료 — 목업 테마 (2026-09-24)

   목업 420~487 행 '주문 및 결제하기' 창의 모양: 흰 둥근 카드 칸, 호박색 계좌 상자(복사 단추),
   회색 금액 상자, 큰 빨강 단추. 목업은 한 장짜리 팝업이지만 여기는 페이지다 — 칸마다 카드를 한 장씩 준다.
   ========================================================================== */

/* 칸 = 흰 카드 */
.order-form .section,
.order-complete .section,
.page__body > .section:has(.pay-details),
.page__body > .section:has(.order-bank) {
    padding: var(--space-6) var(--space-5);
    margin-bottom: var(--space-5);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}

.order-form .section__title {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-bottom: var(--space-4);
    padding-bottom: var(--space-3);
    border-bottom: 1px solid var(--color-border);
    font-size: var(--font-size-lg);
}

/* 금액 상자: 회색 둥근 판, 결제예정금액은 빨강 */
.order-summary {
    padding: var(--space-4) var(--space-5);
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
}

.order-summary .cart-summary__row--total dd {
    color: var(--color-primary);
}

.order-summary .cart-summary__row--discount dd {
    color: var(--color-primary-dark);
    font-weight: 700;
}

/* 결제 수단: 고르는 카드 */
.order-form .check-group .check-row {
    padding: var(--space-3) var(--space-4);
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius);
    background: var(--color-surface);
    transition: border-color var(--transition), background var(--transition);
}

.order-form .check-group .check-row + .check-row {
    margin-top: var(--space-2);
}

.order-form .check-group .check-row:has(.check-row__box:checked) {
    border-color: var(--color-primary);
    background: var(--color-primary-light);
    box-shadow: 0 0 0 1px var(--color-primary) inset;
}

/* 호박색 계좌 상자 */
.order-bank {
    background: #fffbeb;
    border: 1px solid #fde68a;
    border-radius: var(--radius-lg);
}

.order-bank__title {
    color: #92400e;                             /* 6.84:1 */
}

.order-bank__account > strong {
    color: #92400e;
    font-weight: 800;
}

.order-bank__copy {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 44px;
    margin-bottom: var(--space-3);
    padding: 0 var(--space-4);
    border: 1px solid #fcd34d;
    border-radius: var(--radius-sm);
    background: #fde68a;
    color: #78350f;
    font: inherit;
    font-size: var(--font-size-sm);
    font-weight: 700;
    cursor: pointer;
}

.order-bank__copy:hover,
.order-bank__copy:focus-visible {
    background: #fcd34d;
}

.order-bank__note {
    color: #92400e;
}

/* 큰 빨강 단추 */
.order-actions .btn--accent {
    min-height: 56px;
    min-width: 14rem;
    font-size: var(--font-size-md);
    box-shadow: var(--shadow);
}

/* --------------------------------------------------------------------------
   카카오페이 탭 · 단추 · 주문서 결제 안내 (2026-09-24)

   ★ 로고는 원본 비율 그대로(.pay-logo: height 만 정한다). 글자 '카카오페이' 를 곁에 둔다.
   ★★ 주문서에서 곧바로 결제창을 여는 동안(checkout-pay.js) 단추 아래에 무엇을 기다리는지 적는다.
   -------------------------------------------------------------------------- */
.pay-tab--kakaopay,
.pay-kakaopay-btn {
    display: inline-flex;
    align-items: center;
    gap: 2px;
}

.pay-tab--kakaopay .pay-logo,
.pay-kakaopay-btn .pay-logo {
    height: 24px;
}

.checkout-pay-status {
    margin-top: var(--space-3);
    text-align: center;
    font-weight: 700;
    color: var(--color-text);
}

.pay-retry-note {
    margin-bottom: var(--space-4);
    font-weight: 700;
}

/* --------------------------------------------------------------------------
   주문서 창 — 상품 상세 위에 띄우는 주문서 (2026-09-24, checkout-sheet.js)

   농원주 요청: "PC는 오른쪽에 반모달, 모바일은 전체 모달형태로 띄어서 결제".
   PC(768px~) : 오른쪽 반 화면. 뒤의 상품 화면이 어둡게 비친다.
   휴대폰     : 화면 전체. 아래에서 올라온다.

   ★ z-index 는 구매바(60) · 상담 독(50) · 머리(40) · 모바일 메뉴(130) 위, 알림(.toast-stack 300) 아래다.
     계좌번호 복사 알림이 창 뒤로 숨으면 "복사가 됐나" 를 알 수 없다.
     토스 결제창은 그보다 훨씬 위에 뜨므로 이 창 위로 열린다.
   ★★ 창 안의 주문서 칸은 한 줄에 하나다. 반 화면에 두 칸씩 놓으면 어르신 눈에 칸이 작다.
   -------------------------------------------------------------------------- */
.checkout-sheet {
    position: fixed;
    inset: 0;
    z-index: 260;
}

.checkout-sheet[hidden] {
    display: none;
}

.checkout-sheet__backdrop {
    position: absolute;
    inset: 0;
    background: rgb(17 24 39 / .55);
    opacity: 0;
    transition: opacity .2s ease;
}

.checkout-sheet.is-open .checkout-sheet__backdrop {
    opacity: 1;
}

.checkout-sheet__panel {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    background: var(--color-bg);
    box-shadow: var(--shadow-lg);
    transform: translateY(100%);
    transition: transform .25s ease;
}

.checkout-sheet.is-open .checkout-sheet__panel {
    transform: none;
}

@media (min-width: 768px) {
    .checkout-sheet__panel {
        left: auto;
        width: max(520px, 50vw);
        max-width: 760px;
        border-radius: var(--radius-lg) 0 0 var(--radius-lg);
        transform: translateX(100%);
    }
}

.checkout-sheet__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-5);
    background: var(--color-surface);
    border-bottom: 1px solid var(--color-border);
}

.checkout-sheet__title {
    margin: 0;
    font-size: var(--font-size-xl);
}

.checkout-sheet__title:focus {
    outline: none;
}

.checkout-sheet__close {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 48px;
    padding: 0 var(--space-4);
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-pill);
    background: var(--color-surface);
    color: var(--color-text);
    font: inherit;
    font-weight: 700;
    cursor: pointer;
}

.checkout-sheet__close:hover,
.checkout-sheet__close:focus-visible {
    border-color: var(--color-primary);
    color: var(--color-primary-dark);
}

.checkout-sheet__lead {
    margin: 0;
    padding: var(--space-3) var(--space-5);
    background: var(--color-tint);
    border-bottom: 1px solid var(--color-border);
    font-weight: 600;
}

.checkout-sheet__body {
    flex: 1;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    padding: var(--space-5) var(--space-4) 48px;
}

.checkout-sheet__empty {
    padding: var(--space-6) 0;
    text-align: center;
    font-weight: 700;
}

.checkout-sheet .form-grid {
    grid-template-columns: 1fr;
}

html.checkout-sheet-open,
html.checkout-sheet-open body {
    overflow: hidden;
}

.product-buy__message {
    margin-top: var(--space-3);
    font-weight: 700;
}

@media (prefers-reduced-motion: reduce) {
    .checkout-sheet__backdrop,
    .checkout-sheet__panel {
        transition: none;
    }
}

/* --------------------------------------------------------------------------
   결제수단 창 — 주문서의 [결제하기] 로 여는 마지막 단계 (2026-09-24, site.js initPayPicker)

   농원주 요청: "마지막 결제수단을 선택할때 PC와 모바일을 모달형태로 띄어지게 해줘
               PC는 오른쪽 반모달, 모바일은 투명배경의 전체모달".
   PC(768px~) : 오른쪽 반 화면. 뒤의 주문서가 어둡게 비친다.
   휴대폰     : 화면 전체를 반투명 막이 덮고(뒤가 비친다), 결제수단은 아래에서 올라온다.

   ★ 스크립트가 없으면 form 에 .has-pay-picker 가 붙지 않는다 — 이 구획은 평범한 칸으로 그려지고
     안의 단추로 그대로 주문된다. 아래 규칙은 전부 .has-pay-picker 아래에서만 창 모양을 만든다.
   ★★ z-index 는 상품 상세의 주문서 창(260) 위, 알림(300) 아래다. 토스 결제창은 그보다 훨씬 위에 뜬다.
   -------------------------------------------------------------------------- */
.pay-picker__backdrop {
    display: none;
}

.pay-picker__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
}

.pay-picker__close {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 48px;
    padding: 0 var(--space-4);
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-pill);
    background: var(--color-surface);
    color: var(--color-text);
    font: inherit;
    font-weight: 700;
    cursor: pointer;
}

.pay-picker__close[hidden] {
    display: none;
}

.pay-picker__close:hover,
.pay-picker__close:focus-visible {
    border-color: var(--color-primary);
    color: var(--color-primary-dark);
}

.pay-picker__title:focus {
    outline: none;
}

.pay-picker__amount {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-3);
    margin: 0 0 var(--space-4);
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius);
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    font-weight: 700;
}

.pay-picker__amount strong {
    color: var(--color-primary);
    font-size: var(--font-size-xl);
}

.pay-picker__body > * + * {
    margin-top: var(--space-4);
}

.pay-picker__foot {
    display: grid;
    gap: var(--space-2);
    margin-top: var(--space-5);
}

.pay-picker__foot .checkout-pay-submit {
    min-height: 56px;
    font-size: var(--font-size-md);
}

/* ── 창 모양(스크립트가 켰을 때만) ─────────────────────────────────── */
.has-pay-picker .pay-picker__nojs-cart {
    display: none;
}

.has-pay-picker .pay-picker:not(.is-open) {
    display: none;
}

.has-pay-picker .pay-picker.is-open {
    position: fixed;
    inset: 0;
    z-index: 280;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
}

.has-pay-picker .pay-picker.is-open .pay-picker__backdrop {
    display: block;
    position: absolute;
    inset: 0;
    background: rgb(17 24 39 / .5);
    opacity: 0;
    transition: opacity .2s ease;
}

.has-pay-picker .pay-picker.is-shown .pay-picker__backdrop {
    opacity: 1;
}

/* 휴대폰: 아래에서 올라오는 판. 위는 반투명 막으로 뒤가 비친다. */
.has-pay-picker .pay-picker.is-open .pay-picker__panel {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    max-height: 92dvh;
    background: var(--color-surface);
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    box-shadow: var(--shadow-lg);
    transform: translateY(100%);
    transition: transform .25s ease;
}

.has-pay-picker .pay-picker.is-shown .pay-picker__panel {
    transform: none;
}

.has-pay-picker .pay-picker.is-open .pay-picker__head {
    padding: var(--space-3) var(--space-5);
    border-bottom: 1px solid var(--color-border);
}

.has-pay-picker .pay-picker.is-open .pay-picker__title {
    margin: 0;
    padding: 0;
    border: 0;
}

.has-pay-picker .pay-picker.is-open .pay-picker__body {
    flex: 1;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    padding: var(--space-4) var(--space-5);
}

.has-pay-picker .pay-picker.is-open .pay-picker__foot {
    margin: 0;
    padding: var(--space-3) var(--space-5) calc(var(--space-4) + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid var(--color-border);
    background: var(--color-surface);
}

/* PC: 오른쪽 반 화면 */
@media (min-width: 768px) {
    .has-pay-picker .pay-picker.is-open .pay-picker__panel {
        top: 0;
        left: auto;
        width: max(520px, 50vw);
        max-width: 760px;
        max-height: none;
        border-radius: var(--radius-lg) 0 0 var(--radius-lg);
        transform: translateX(100%);
    }
}

html.pay-picker-open,
html.pay-picker-open body {
    overflow: hidden;
}

@media (prefers-reduced-motion: reduce) {
    .has-pay-picker .pay-picker.is-open .pay-picker__backdrop,
    .has-pay-picker .pay-picker.is-open .pay-picker__panel {
        transition: none;
    }
}

/* ★ 열린 판은 제자리. 위 PC 규칙(translateX(100%))과 특정도가 같으면 뒤에 오는 그쪽이 이겨
     판이 화면 밖에 머문다 — 그래서 한 단계 더 좁혀 둔다. */
.has-pay-picker .pay-picker.is-open.is-shown .pay-picker__panel {
    transform: none;
}