@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);
}