/* Naknes UI 컴포넌트로 표현하지 않는 인증 화면의 배치와 외형. */
.auth {
    --ui-space-unit: 1px;
    --auth-background: #f2f4f6;
    --auth-brand: #152d50;
    --auth-brand-text: #bdcce0;
    --auth-border: #e5eaf1;
    --auth-input-background: #f8fafc;
    --auth-invalid-background: #fff1f3;
    --auth-checkbox-border: #d1d5db;
    --auth-text-small: 13px;
    --auth-text-caption: 11px;
    --auth-card-radius: 24px;
    background: var(--auth-background);
}
.auth .shell { max-width: 528px; }
.auth[data-card-size="compact"] .shell { max-width: 460px; }
.auth[data-card-size="login"] .shell { max-width: 960px; }
.auth .content { padding: 32px; border-radius: var(--auth-card-radius); background: var(--ui-white); }
.auth[data-card-size="login"] .content { padding: 0; background: transparent; }
.auth .logo { font-size: 22px; font-weight: 700; letter-spacing: 0.02em; }
.auth .logo span { color: var(--ui-red); }
.auth .home-link, .auth .description, .auth .check-label { color: var(--ui-gray); font-size: var(--ui-text-sm); }
.auth .home-link { font-size: var(--auth-text-small); }
.auth .site-header a:focus-visible { outline: 2px solid var(--ui-blue); outline-offset: 4px; }
.auth .page-heading h1 { font-size: 28px; }
.auth .eyebrow { font-size: var(--auth-text-caption); font-weight: 600; letter-spacing: 0.18em; }
.auth .footer-note { color: var(--ui-gray); font-size: var(--auth-text-small); }
.auth .login-card { border: 1px solid var(--auth-border); border-radius: 28px; box-shadow: 0 24px 80px -30px rgb(25 47 89 / 25%); }
.auth .brand-panel { position: relative; flex-direction: column; padding: 48px; background: var(--auth-brand); color: white; }
.auth .brand-panel .eyebrow, .auth .brand-description, .auth .brand-footer { color: var(--auth-brand-text); }
.auth .brand-title { font-size: 38px; font-weight: 600; line-height: 1.4; letter-spacing: -0.05em; }
.auth .brand-title span { color: #7cabff; }
.auth .brand-description, .auth .brand-footer { font-size: var(--ui-text-sm); }
.auth .brand-footer { border-top: 1px solid rgb(255 255 255 / 15%); }
.auth .login-panel { padding: 48px 40px; background: var(--ui-white); }
.auth .login-title { margin-top: 12px; font-size: 30px; letter-spacing: -0.05em; }
.auth .field > label { font-size: var(--auth-text-small); }
.auth .input { font-size: 16px; background: var(--auth-input-background); }
.auth .input:focus { background: var(--ui-white); }
.auth .field-error { min-height: 18px; margin: 4px 0 8px; color: var(--ui-red); font-size: var(--auth-text-small); line-height: 1.4; }
.auth .field-error.is-success { color: var(--ui-green); }
.auth .input[aria-invalid="true"], .auth .input.is-invalid { border-color: var(--ui-red); background: var(--auth-invalid-background); }
.auth .check-label { min-height: 40px; cursor: pointer; }
.auth .check-label input { flex-shrink: 0; width: 18px; height: 18px; accent-color: var(--ui-blue); }
.auth .account-links { border-top: 1px solid var(--ui-gray-light); }
.auth .field-group { min-width: 0; margin-inline: 0; padding: 0; border: 0; }
.auth .field-group legend { width: 100%; padding: 0; font-size: 15px; font-weight: 600; }
.auth .floating-field { position: relative; }
.auth .floating-field .input { height: 56px; padding: 12px 16px; }
.auth .floating-field > label { position: absolute; top: 50%; left: 16px; transform: translateY(-50%); color: var(--ui-gray); font-size: 16px; line-height: 1; pointer-events: none; transition: top 180ms ease, transform 180ms ease, font-size 180ms ease; }
.auth .floating-field:focus-within > label, .auth .floating-field.has-value > label { top: 8px; transform: none; font-size: 12px; }
.auth .floating-field:focus-within .input, .auth .floating-field.has-value .input { padding-top: 16px; padding-bottom: 6px; }
.auth .check-button { min-height: 56px; flex-shrink: 0; font-size: var(--ui-text-sm); }
.auth .check-button.is-verified { background: var(--ui-gray-dark); color: var(--ui-white); }
.auth .input[data-verified="true"] { background: var(--ui-gray-light); }
.auth .agreement-all { border-radius: var(--ui-radius); background: var(--ui-gray-light); }
.auth .check-label .agreement-check {
    appearance: none;
    display: inline-grid;
    place-content: center;
    width: 24px;
    height: 24px;
    border: 2px solid var(--auth-checkbox-border);
    border-radius: 50%;
    background: var(--ui-white);
    cursor: pointer;
}
.auth .agreement-check::before {
    content: "";
    width: 10px;
    height: 6px;
    border-left: 2px solid var(--ui-gray-dark);
    border-bottom: 2px solid var(--ui-gray-dark);
    transform: translateY(-2px) rotate(-45deg) scale(0);
}
.auth .agreement-check:checked { border-color: var(--ui-gray-dark); background: transparent; }
.auth .agreement-check:checked::before { transform: translateY(-2px) rotate(-45deg); }
.auth .agreement-check:indeterminate::before { width: 10px; height: 0; border-left: 0; transform: none; }
.auth .agreement-check:focus-visible { outline: 2px solid var(--ui-blue); outline-offset: 3px; }
.auth .completion-mark { width: 96px; height: 96px; border-radius: 50%; background: var(--ui-gray-light); color: var(--ui-green); font-size: 48px; line-height: 96px; }
.auth .terms-modal { width: min(640px, calc(100% - 32px)); }
.auth .terms-content { white-space: pre-wrap; font-size: var(--ui-text-sm); }
@media (prefers-reduced-motion: reduce) {
    .auth .floating-field > label { transition: none; }
}
.auth[data-modal="true"] { display: block; min-height: 0; padding: 8px; background: var(--ui-white); }
.auth[data-modal="true"] .content { padding: 8px; }
.auth[data-modal="true"] .shell { max-width: 460px; }
@media (max-width: 639px) {
    .auth .content { padding: 20px; }
    .auth .login-panel { padding: 24px 20px; }
    .auth .login-title { margin-top: 0; font-size: 26px; }
    .auth[data-card-size="login"] .footer-note { display: none; }
}

/* 통합 UI의 비밀번호 표시 동작과 접근성 레이블을 유지하고 아이콘만 표시한다. */
.auth #login-form .password-toggle { width: 40px; min-width: 40px; padding-inline: 0; font-size: 0; }
.auth #login-form .password-toggle::before {
    content: "";
    display: block;
    width: 20px;
    height: 20px;
    margin-inline: auto;
    background: currentColor;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7S2 12 2 12Z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E") center / contain no-repeat;
}
.auth #login-form .password-toggle[aria-pressed="true"]::before {
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 3l18 18M10.6 5.1 12 5c6.5 0 10 7 10 7a19 19 0 0 1-3 3.9M6.3 6.3A22 22 0 0 0 2 12s3.5 7 10 7a12 12 0 0 0 5.7-1.7M9.9 9.9a3 3 0 0 0 4.2 4.2'/%3E%3C/svg%3E");
}

/* 약관 동의 화면: 절제된 색상과 일관된 정렬. */
.auth[data-card-size="join"] .shell { max-width: 500px; }
.auth[data-card-size="join"] .content { padding: 52px 32px 40px; border: 1px solid var(--auth-border); box-shadow: 0 12px 40px -24px rgb(25 47 89 / 14%); }
.auth[data-card-size="join"] .page-heading { text-align: left; }
.auth[data-card-size="join"] .page-heading .eyebrow { display: none; }
.auth[data-card-size="join"] .page-heading h1 { margin-top: 0; font-size: 26px; font-weight: 600; letter-spacing: -0.04em; }
.auth[data-card-size="join"] .description { line-height: 1.7; }
.auth[data-card-size="join"] .agreement-all { border: 1px solid var(--auth-border); background: var(--auth-input-background); }
.auth[data-card-size="join"] .agreement-all:has(input:checked) { border-color: var(--auth-brand); }
.auth[data-card-size="join"] .all-title { color: var(--auth-brand); font-size: 15px; font-weight: 600; }
.auth[data-card-size="join"] .agreement-list { padding: 0; list-style: none; }
.auth[data-card-size="join"] .agreement-row { padding: 10px 16px; }
.auth[data-card-size="join"] .agreement-row .check-label { color: var(--ui-gray-dark); line-height: 1.6; }
.auth[data-card-size="join"] .agreement-row .button { padding-inline: 8px; color: var(--ui-gray); font-size: 12px; }
.auth[data-card-size="join"] .required-label { margin-left: 4px; color: var(--ui-gray); font-size: var(--auth-text-caption); white-space: nowrap; }
.auth[data-card-size="join"] .agreement-note { color: var(--ui-gray); font-size: 12px; line-height: 1.6; }
.auth[data-card-size="join"] .check-label .agreement-check { width: 22px; height: 22px; border-width: 1px; }
.auth[data-card-size="join"] .agreement-check:checked { border-color: var(--auth-brand); background: var(--auth-brand); }
.auth[data-card-size="join"] .agreement-check:checked::before { border-color: var(--ui-white); }
.auth[data-card-size="join"] [data-terms-submit] { min-height: 50px; }
.auth[data-card-size="join"] .account-links { border-color: var(--auth-border); }
.auth[data-card-size="join"] .account-links .description,
.auth[data-card-size="join"] .account-links .link { font-size: var(--auth-text-small); }
.auth[data-card-size="join"] .account-links .link { color: var(--auth-brand); }
@media (max-width: 639px) {
    .auth[data-card-size="join"] .content { padding: 36px 20px 32px; }
    .auth[data-card-size="join"] .page-heading h1 { font-size: 24px; }
    .auth[data-card-size="join"] .agreement-row { padding-inline: 8px; }
    .auth[data-card-size="join"] .agreement-row .button { padding-inline: 4px; }
}