.auth-app-page {
    /* 인증 화면은 카드 폭과 제목 크기만 여기서 별도로 조정합니다. */
    --auth-card-width: 440px;
    --auth-title-size: 1.7rem;
    min-height: 100vh;
    color: var(--app-text);
    background: var(--app-canvas);
}

.auth-invitation-account-page,
.account-credentials-page {
    --auth-card-width: 520px;
    --auth-title-size: 1.7rem;
}

.account-credentials-card {
    margin-inline: auto;
}

.auth-app-page .site-header {
    min-height: var(--site-header-height);
    border-bottom-color: var(--app-border);
    background: var(--app-surface);
    box-shadow: none;
    backdrop-filter: none;
}

.auth-app-page .site-header-inner {
    width: min(100%, 1120px);
    min-height: var(--site-header-height);
    gap: 16px;
    padding: 0 24px;
}

.auth-app-page .site-header-actions {
    gap: 8px;
    margin-left: auto;
}

.auth-app-page .language-switcher-options {
    gap: 0;
    padding: 0;
    overflow: hidden;
    border-color: var(--app-control-border);
    border-radius: var(--radius-control);
    background: var(--app-surface);
}

.auth-app-page .language-switcher-options form {
    display: flex;
}

.auth-app-page .language-switcher-options form + form {
    border-left: 1px solid var(--app-control-border);
}

.auth-app-page .language-option {
    min-width: var(--control-target-size);
    min-height: var(--control-target-size);
    display: block;
    padding: 6px 9px;
    border-radius: 0;
    color: var(--app-muted);
    background: var(--app-surface);
    font-size: 0.76rem;
    font-weight: 600;
}

.auth-app-page .language-option:hover:not(.is-active) {
    color: var(--app-primary-strong);
    background: var(--app-primary-soft);
}

.auth-app-page .language-option.is-active {
    color: var(--app-surface);
    background: var(--app-primary);
}

.auth-app-page .auth-page-shell {
    width: 100%;
    min-height: calc(100vh - var(--site-header-height));
    min-height: calc(100svh - var(--site-header-height));
    display: grid;
    place-items: center;
    padding: clamp(32px, 6vh, 64px) 24px;
    background: var(--app-canvas);
}

:is(.auth-app-page .auth-surface, .account-credentials-card) {
    width: min(100%, var(--auth-card-width));
    padding: 36px 38px;
    overflow: visible;
    border: 1px solid var(--app-border);
    border-radius: var(--radius-panel);
    color: var(--app-text);
    background: var(--app-surface);
    box-shadow: 0 18px 48px rgba(23, 32, 51, 0.08);
}

:is(.auth-app-page .auth-surface, .account-credentials-card) h1 {
    margin: 0;
    color: var(--app-text);
    font-size: var(--auth-title-size);
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -0.035em;
}

:is(.auth-app-page .auth-surface, .account-credentials-card) > .stack {
    gap: 18px;
    margin-top: 28px;
}

:is(.auth-app-page, .account-credentials-page) .auth-field {
    min-width: 0;
    display: grid;
    gap: 7px;
}

:is(.auth-app-page, .account-credentials-page) .auth-field label {
    margin: 0;
    color: var(--app-text);
    font-size: var(--font-size-label);
    font-weight: 600;
}

:is(.auth-app-page, .account-credentials-page) .auth-field input {
    width: 100%;
    min-height: var(--control-target-size);
    padding: 10px 12px;
    border: 1px solid var(--app-control-border);
    border-radius: var(--radius-control);
    color: var(--app-text);
    background: var(--app-surface);
}

:is(.auth-app-page, .account-credentials-page) .auth-field input:hover:not(:disabled) {
    border-color: var(--app-muted);
}

:is(.auth-app-page, .account-credentials-page) .auth-field input:focus,
:is(.auth-app-page, .account-credentials-page) .auth-field input:focus-visible {
    border-color: var(--app-primary);
}

:is(.auth-app-page, .account-credentials-page) .auth-field input:focus-visible {
    outline: 3px solid var(--app-primary);
    outline-offset: 1px;
}

:is(.auth-app-page, .account-credentials-page) .auth-field [aria-invalid="true"] {
    border-color: var(--app-danger);
    background: var(--app-danger-soft);
}

:is(.auth-app-page, .account-credentials-page) .field-help,
:is(.auth-app-page, .account-credentials-page) .field-error,
:is(.auth-app-page, .account-credentials-page) .field-success,
:is(.auth-app-page, .account-credentials-page) .password-match-status {
    margin: 0;
    font-size: var(--font-size-help);
    line-height: 1.45;
}

:is(.auth-app-page, .account-credentials-page) .field-help {
    color: var(--app-muted);
}

:is(.auth-app-page, .account-credentials-page) .field-error {
    color: var(--app-danger);
}

:is(.auth-app-page, .account-credentials-page) .field-success {
    color: var(--app-success);
}

:is(.auth-app-page, .account-credentials-page) .password-match-status:empty {
    display: none;
}

:is(.auth-app-page, .account-credentials-page) .submit-status {
    min-height: 1.2rem;
    margin: 8px 0 0;
}

:is(.auth-app-page .auth-surface, .account-credentials-card) .button {
    min-height: var(--control-target-size);
    padding: 10px 16px;
    border-radius: var(--radius-control);
    font-size: var(--font-size-button);
    font-weight: 600;
}

:is(.auth-app-page .auth-surface, .account-credentials-card) .button.primary {
    color: var(--app-surface);
    background: var(--app-primary);
}

:is(.auth-app-page .auth-surface, .account-credentials-card) .button.primary:hover {
    background: var(--app-primary-strong);
}

:is(.auth-app-page .auth-surface, .account-credentials-card) .button.secondary {
    color: var(--app-primary-strong);
    background: var(--app-surface);
}

:is(.auth-app-page .auth-surface, .account-credentials-card) .button.secondary:hover {
    border-color: var(--app-primary);
    background: var(--app-primary-soft);
}

:is(.auth-app-page .auth-surface, .account-credentials-card) .button.full {
    width: 100%;
    margin: 2px 0 0;
}

:is(.auth-app-page .auth-surface, .account-credentials-card) .alert {
    margin-top: 20px;
    padding: 11px 12px;
    border: 1px solid transparent;
    border-radius: var(--radius-control);
    box-shadow: none;
    font-size: var(--font-size-label);
}

:is(.auth-app-page .auth-surface, .account-credentials-card) .alert.error {
    border-color: var(--app-danger);
    color: var(--app-danger);
    background: var(--app-danger-soft);
}

:is(.auth-app-page .auth-surface, .account-credentials-card) .alert.success {
    border-color: var(--app-success);
    color: var(--app-success);
    background: var(--app-success-soft);
}

.auth-app-page .auth-alternative {
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid var(--app-border);
    text-align: center;
}

.auth-app-page .auth-alternative p {
    margin: 0 0 10px;
    color: var(--app-muted);
    font-size: var(--font-size-help);
}

.auth-app-page .auth-alternative .button.full {
    margin-top: 0;
}

:is(.auth-app-page .auth-surface, .account-credentials-card) > .actions {
    display: flex;
    justify-content: center;
    margin-top: 18px;
    padding-top: 18px;
    border-top: 1px solid var(--app-border);
}

:is(.auth-app-page .auth-surface, .account-credentials-card) > .actions form,
:is(.auth-app-page .auth-surface, .account-credentials-card) > .actions .button {
    width: 100%;
}

:is(.auth-app-page .auth-surface, .account-credentials-card) form[aria-busy="true"] {
    cursor: progress;
}

@media (max-width: 767px) {
    .account-credentials-page { --auth-title-size: 1.5rem; }
    .auth-app-page {
        --site-header-height: 60px;
        --auth-title-size: 1.5rem;
    }

    .auth-app-page .site-header-inner {
        gap: 8px;
        padding: 0 12px;
    }

    .auth-app-page .language-option {
        min-width: 40px;
        min-height: var(--control-target-size);
        padding-inline: 7px;
    }

    .auth-app-page .auth-page-shell {
        place-items: start center;
        padding: 24px 12px 32px;
    }

    :is(.auth-app-page .auth-surface, .account-credentials-card) {
        padding: 26px 20px;
        border-radius: var(--radius-panel);
        box-shadow: none;
    }

    :is(.auth-app-page .auth-surface, .account-credentials-card) > .stack {
        gap: 16px;
        margin-top: 24px;
    }

    :is(.auth-app-page, .account-credentials-page) .auth-field input {
        font-size: 16px;
    }
}

@media (max-width: 390px) {
    .auth-app-page .auth-page-shell {
        padding: 16px 8px 28px;
    }

    :is(.auth-app-page .auth-surface, .account-credentials-card) {
        padding: 24px 16px;
    }
}