/* Account pages (signup, login, verify): a clean game card instead of a terms page.
   Loaded right after site.css. Shared classes first; only what is missing is added here. */

.auth-card { gap: 18px; }
.auth-head { gap: 8px; }
.auth-head h1 { font-size: 38px; }
.auth-head p { font-size: 16px; line-height: 1.55; }
.auth-card .form { gap: 14px; }
.auth-card .field .hint { line-height: 1.5; }
.auth-card .beta-help { margin: 0; }
.auth-card .auth-switch { padding-top: 16px; }

/* one quiet line under the fields (login) */
.auth-note { margin: 0; font-size: 13px; line-height: 1.55; color: var(--text-3); }

/* "가입 전에 알아 두세요": all the sign-up rules in one small list */
.auth-rules { padding: 14px 16px; border-radius: 16px; background: var(--card-in); border: 1px solid var(--line-soft); }
.auth-rules h2 { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; font-family: var(--display); font-weight: 400; font-size: 16px; line-height: 1.3; color: var(--gold-text); }
.auth-rules h2::before { content: ""; flex: none; width: 20px; height: 20px; background: url("/assets/img/icons/guide.png") center / contain no-repeat; image-rendering: pixelated; }
.auth-rules ul { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.auth-rules li { position: relative; padding-left: 16px; font-size: 13px; line-height: 1.55; color: var(--text-2); }
.auth-rules li::before { content: ""; position: absolute; left: 2px; top: 0.62em; width: 6px; height: 6px; border-radius: 50%; background: var(--moon); }

/* privacy consent stays, just quieter */
.auth-card .beta-consent .hint { font-size: 12px; line-height: 1.6; }

/* login: charge shortcut and help */
.auth-card .auth-charge { min-height: 48px; font-size: 16px; justify-content: center; }
.auth-faqs { display: grid; gap: 8px; }
.auth-card details.faq + details.faq { margin-top: 0; }
.auth-card details.faq summary { min-height: 48px; padding: 0 14px; font-size: 15px; }
.auth-card details.faq summary::before { width: 24px; height: 24px; border-radius: 8px; font-size: 14px; }
.auth-card details.faq p { padding: 0 14px 14px 50px; font-size: 14px; line-height: 1.6; }

/* verify: the 6-digit code is the hero */
#verify-code-fields { display: grid; gap: 14px; }
.verify-hero { padding: 18px 16px 14px; border-radius: 18px; background: var(--card-in); border: 1px solid #2b3d75; text-align: center; }
.field.verify-hero label { font-family: var(--display); font-weight: 400; font-size: 18px; color: var(--gold-text); }
.field.verify-hero input.code-input { height: 72px; font-size: clamp(30px, 9vw, 42px); border: 2px solid var(--gold); border-radius: 16px; box-shadow: 0 0 0 4px #ffc94a1f; padding: 0 8px; }
.field.verify-hero input.code-input:focus { outline: none; box-shadow: 0 0 0 5px #ffc94a40; }
.field.verify-hero .hint { text-align: center; }
.auth-sender { display: flex; align-items: flex-start; gap: 8px; margin: 0; font-size: 13px; line-height: 1.55; color: var(--text-3); }
.auth-sender img { flex: none; width: 20px; height: 20px; margin-top: 1px; }
.verify-more { display: grid; gap: 10px; text-align: center; }
.verify-more p { margin: 0; font-size: 14px; line-height: 1.6; }
.auth-card .btn-secondary.btn-block { min-height: 48px; font-size: 16px; }
.verify-done { display: grid; gap: 12px; text-align: center; }
.verify-done p { margin: 0; }

@media (max-width: 640px) {
  .auth-head h1 { font-size: 32px; }
  .auth-rules { padding: 12px 14px; }
  .auth-card details.faq p { padding-left: 14px; }
}