/* 결제 목업 모달 공용 — shared/js/checkout-mock.js가 토글하는 단계(.pay-step)와 요약/영수증
   블록. 공용 .modal-layer(modal.css)는 가운데 정렬 안내문 전용이라, 폼이 들어가는 결제 목업
   화면에서만 폭을 넓히고 좌측 정렬로 바꾼다. 월간대회·랭킹 꾸미기·브레인체크 결과 3개 화면 공용. */
.modal-layer__window--wide { max-width: 420px; text-align: left; }
.modal-title--left { text-align: left; }
.pay-step { display: none; }
.pay-step.is-active { display: block; }
.pay-summary { display: flex; align-items: center; justify-content: space-between; background: var(--primary-pale); border-radius: var(--radius-md); padding: 14px 16px; margin-bottom: 20px; font-weight: 700; color: var(--primary-dark); }
.pay-summary b { font-size: 17px; font-variant-numeric: tabular-nums; }
.pay-email-hint { font-size: 12.5px; color: var(--text-mute); line-height: 1.6; margin: -6px 0 16px; }
.pay-receipt { border: 1px solid var(--line); border-radius: var(--radius-md); padding: 14px 16px; margin-bottom: 16px; }
.pay-receipt__row { display: flex; justify-content: space-between; font-size: 13.5px; padding: 6px 0; }
.pay-receipt__row span { color: var(--text-mute); }
.pay-receipt__row b { color: var(--primary-dark); font-variant-numeric: tabular-nums; }