/* 가입 — 피그마 '플레이팟 · 최신 화면' F4(계정 1/3)·F5(매장 2/3)·F6(준비 완료 3/3). */
body.su main { max-width: 480px; min-height: 100svh; margin: 0 auto; padding: 12px 16px calc(32px + env(safe-area-inset-bottom, 0px)); box-sizing: border-box; display: flex; flex-direction: column; gap: 24px; }
body.su .su-bar { display: flex; align-items: center; justify-content: space-between; min-height: 100px; }
body.su .su-bar .mt-icon-btn[hidden] { display: none; }
body.su .step-section { flex: 1; display: flex; flex-direction: column; gap: 24px; }
body.su .step-section[hidden] { display: none; }
body.su .su-head { display: flex; flex-direction: column; gap: 8px; }
body.su .su-fields { display: flex; flex-direction: column; gap: 16px; }
body.su .field { display: flex; flex-direction: column; gap: 8px; margin: 0; }
body.su .field p:empty { display: none; }
body.su .su-url { overflow-wrap: anywhere; }
body.su .su-foot { margin-top: auto; display: flex; flex-direction: column; gap: 24px; }
body.su .su-actions { gap: 8px; }

/* 동의 — 줄 높이 48(위아래 12) */
body.su .agree-block { display: flex; flex-direction: column; }
body.su .agree-row { display: flex; align-items: center; gap: 12px; min-height: 48px; font-size: 16px; line-height: 1.5; color: var(--ink); cursor: pointer; }
body.su .agree-row .lbl { flex: 1; }
body.su .agree-all { border-bottom: 1px solid var(--line); }
body.su .agree-row input[type=checkbox] { appearance: none; -webkit-appearance: none; width: 24px; height: 24px; border-radius: 999px; border: 2px solid var(--line); margin: 0; flex: none; cursor: pointer; transition: background-color 120ms ease, border-color 120ms ease; }
body.su .agree-row input[type=checkbox]:checked { background: var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M13.33 4 6 11.33 2.67 8'/%3E%3C/svg%3E") center / 16px no-repeat; border-color: var(--accent); }
body.su .agree-row input[type=checkbox]:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
body.su .agree-row a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 4px; color: var(--ink-2); font-size: 13px; text-decoration: none; }
body.su .su-login { text-align: center; }
body.su .su-login a { color: var(--accent); font-weight: 700; text-decoration: none; }

/* 2/3 안내 카드 */
body.su .su-note { display: flex; align-items: center; gap: 12px; padding: 16px; border-radius: 16px; background: #efeaf8; color: #18181b; }
body.su .su-note > i { width: 48px; height: 48px; border-radius: 8px; flex: none; background: linear-gradient(135deg, #9ec5ff 0%, #f3b4d6 71.429%); }
body.su .su-note > div { flex: 1; min-width: 0; }
body.su .su-note .t13 { color: #52525b; }

/* 3/3 순서 */
body.su .su-steps { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; }
body.su .su-steps li { display: flex; align-items: flex-start; gap: 16px; padding: 16px 0; }
body.su .su-steps li > b { width: 32px; height: 32px; border-radius: 999px; background: var(--accent-weak); color: var(--accent-on-weak); display: grid; place-items: center; flex: none; font-size: 16px; }
body.su .su-steps li > div { display: flex; flex-direction: column; gap: 4px; min-width: 0; }

/* QR은 인쇄할 때만 */
body.su .su-qr { display: none; }
body.su #qr-frame { width: 96px; height: 96px; background: #fff; border-radius: 8px; padding: 8px; display: grid; place-items: center; flex: none; margin: 0; }
body.su #qr-frame canvas, body.su #qr-frame img { width: 100% !important; height: auto !important; }
body.su #qr-url { word-break: break-all; }
@media print {
    body.su .su-actions, body.su .su-bar, body.su .su-steps, body.su .su-head, body.su footer { display: none; }
    body.su .su-qr { display: flex; flex-direction: column; align-items: center; gap: 16px; text-align: center; }
    body.su #qr-frame { width: 240px; height: 240px; }
}
@media (prefers-reduced-motion: reduce) { body.su .agree-row input[type=checkbox] { transition: none; } }