/* 결제 서비스에만 있는 화면 조각. 색 · 간격은 모두 tokens.css의 변수로 — 16진수 색을 새로 박지 않는다.
   tokens.css · components.css · fonts/는 계정 서비스(stgoat-home 원본)에서 복사 — 직접 고치지 않는다. */

/* 테스트 모드 띠 — 모든 화면 맨 위 */
.pay-test { margin: 0; padding: var(--space-2) var(--space-4); background: var(--surface-raised); border-bottom: 1px solid var(--line); font-size: 14px; line-height: 22px; text-align: center; word-break: keep-all; }

/* 가격 · 한 번 구매 */
.pay-price { margin: 0 0 var(--space-4); font-size: 16px; line-height: 27px; }
.pay-price strong { font-size: 24px; line-height: 32px; font-weight: 600; margin-right: var(--space-2); }
.pay-price span { color: var(--ink-muted); }

/* 청약철회 안내 · 결제창 언어 안내 */
.pay-notice, .pay-note { margin: 0 0 var(--space-4); font-size: 14px; line-height: 22px; color: var(--ink-muted); word-break: keep-all; }

/* 동의 — 누르기 쉬운 크기 */
.pay-agree { display: flex; gap: var(--space-2); align-items: flex-start; min-height: var(--tap-min); margin: 0 0 var(--space-4); font-size: 16px; line-height: 27px; word-break: keep-all; cursor: pointer; }
.pay-agree input { width: 20px; height: 20px; margin: 3px 0 0; flex: none; }

/* 결제 수단 버튼 — 동의 전에는 꺼져 있다(checkout.js) */
.pay-methods { flex-wrap: wrap; }
.pay-methods .sg-btn[disabled] { opacity: 0.5; cursor: not-allowed; }

/* 결제가 끝나지 않았을 때 */
.pay-alert { margin: 0 0 var(--space-4); font-size: 14px; line-height: 22px; color: var(--ink); word-break: keep-all; }
.pay-alert[hidden] { display: none; }

/* 바닥 — 사업자 정보 자리 */
.pay-seller { margin: 0 0 var(--space-2); font-size: 14px; line-height: 22px; color: var(--ink-muted); word-break: keep-all; }

/* 일본어 화면은 기기의 일본어 서체 — 셀프호스팅 한국어 서브셋에는 일본 한자가 빠져 있다(다국어 공통 규칙) */
:lang(ja) {
  --font-sans: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic UI", "Yu Gothic", Meiryo, "Noto Sans JP", sans-serif;
  font-family: var(--font-sans);
}

/* 스튜디오 응원하기 (05) — 메시지 칸 · 완료 화면의 주문 번호 */
.pay-field { display: block; margin: 0 0 var(--space-2); font-size: 16px; line-height: 27px; font-weight: 600; }
.pay-input { box-sizing: border-box; width: 100%; min-height: var(--tap-min); margin: 0 0 var(--space-2); padding: var(--space-2) var(--space-3); border: 1px solid var(--control-border); border-radius: var(--radius-sm); background: var(--surface); color: var(--ink); font: inherit; font-size: 16px; }
.pay-input:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
/* 주문 번호 — 크게, 고정폭 서체 없이. 한 번 눌러 통째로 고르게(복사하기 쉽게) */
.pay-wallpapers { margin-bottom: var(--space-6); }
/* 배경화면 미리보기(08) — 360×780 그림을 절반 폭으로(고해상도 화면에서 선명), 결과 화면은 썸네일 */
.pay-preview { display: block; width: 180px; max-width: 100%; height: auto; margin: 0 0 var(--space-4); border: 1px solid var(--line); border-radius: var(--radius-md); }
.pay-preview--small { width: 120px; }
.pay-order-id { margin: 0 0 var(--space-6); font-size: 22px; line-height: 32px; font-weight: 600; word-break: break-all; user-select: all; -webkit-user-select: all; }

/* STUDIO GOAT 굿즈(11) — 받는 것 한 줄씩, 미리보기 그림(배경화면 · 움직이는 배경화면 첫 장면)은 나란히 */
.pay-gets { margin: 0 0 var(--space-4); padding-left: var(--space-6); font-size: 16px; line-height: 27px; word-break: keep-all; }
.pay-gets li + li { margin-top: var(--space-1); }
.pay-previews { display: flex; flex-wrap: wrap; gap: var(--space-3); }