/* BEARING SHOP — 체크아웃(checkout.html) 클린 에디토리얼.
 * main.css 위에 로드되어 시각만 덮어쓴다(checkout.js 로직은 그대로). */

/* 헤더 */
.page-head { padding: clamp(88px, 11vh, 132px) 0 clamp(8px, 2vw, 20px); display: grid; gap: 12px; }
@media (min-width: 760px) { .page-head { grid-template-columns: 1fr auto; align-items: end; } }
.page-head .meta-label { color: var(--gray-500); letter-spacing: 0.18em; }
.page-head__title { margin: 8px 0 0; font-family: var(--font-serif); font-weight: 400; font-size: clamp(36px, 5.5vw, 64px); line-height: 1; letter-spacing: -0.02em; }
.page-head__desc { color: var(--gray-500); font: 400 14px/1.6 var(--font-sans); align-self: end; max-width: 420px; }

/* 폼 섹션 헤드 → 세리프 */
.form__head h2 { font-family: var(--font-serif); font-weight: 400; font-size: clamp(22px, 2.6vw, 30px); letter-spacing: -0.01em; }
.form__head .meta-label { color: var(--gray-500); }

/* 결제수단 카드 — 각진 */
.radio-card { border-radius: 0; }

/* 주문 요약 — 장바구니와 동일한 페이퍼 패널 */
.summary { background: var(--paper-2); border: var(--rule); padding: clamp(24px, 3vw, 32px); align-self: start; }
.summary h3 { font-family: var(--font-serif); font-weight: 400; font-size: 26px; letter-spacing: -0.01em; }
.summary__row strong { font-family: var(--font-sans); }
.summary__row.is-total strong { font-family: var(--font-sans); font-weight: 600; }

/* 주문 완료 */
#doneBox h2 { font-family: var(--font-serif); font-weight: 400; font-size: clamp(28px, 4vw, 44px); }

/* 레이아웃 여백 */
.cart { padding: clamp(20px, 3vw, 32px) 0 clamp(64px, 9vw, 120px); gap: clamp(28px, 4vw, 64px); }

/* 주소 검색 모달 (한국 도로명주소) */
.addr-modal { position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center; padding: 16px; }
.addr-modal[hidden] { display: none; }
.addr-modal__backdrop { position: absolute; inset: 0; background: rgba(10,10,10,0.5); }
.addr-modal__panel { position: relative; width: min(480px, 100%); max-height: 92vh; display: flex; flex-direction: column; background: var(--paper-2); border: var(--rule); }
.addr-modal__bar { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; border-bottom: var(--rule); }
.addr-modal__bar .meta-label { color: var(--gray-500); }
.addr-modal__close { background: transparent; border: 0; cursor: pointer; color: var(--ink); width: 32px; height: 32px; font-size: 16px; line-height: 1; }
.addr-modal__embed { flex: 1 1 auto; height: min(460px, 70vh); }