/* 결제 화면(#/pay/<토큰>, #/menu). 양식 요소는 brief.css 의 .bf-* 를 그대로 쓰고 여기서는 금액·메뉴 카드만 정의. */
.pay-sum { display: grid; gap: 0; margin: 0 0 24px; max-width: 560px; border-top: 1px solid var(--line); }
.pay-sum > div { display: flex; justify-content: space-between; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.pay-sum dt { color: var(--mute); }
.pay-sum dd { margin: 0; text-align: right; font-weight: 600; }
.pay-amt { font-size: clamp(22px, 3vw, 30px); font-weight: 700; letter-spacing: .01em; }
.pay-state { color: var(--ink); font-weight: 600; }
.pay-warn { color: var(--red); margin: 12px 0 0; }
.pay-menu { list-style: none; padding: 0; margin: 24px 0 0; display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.pay-card { border: 1px solid var(--line); border-radius: 14px; padding: 20px; display: grid; gap: 10px; align-content: start; }
.pay-card h2 { margin: 0; font-size: 20px; }
.pay-card p { margin: 0; color: var(--mute); line-height: 1.6; }
.pay-card .pay-amt { color: var(--ink); }
#toss-methods, #toss-agree { max-width: 640px; margin-bottom: 8px; }