/* Login appearance; page scroll and safe areas live in layout.css. */
.login { background: var(--color-gray-7); }
.login__background, .login__background-image, .login__background::after { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; pointer-events: none; }
.login__background { transition: opacity var(--login-background-duration) var(--motion-easing); }
.login__profile, .login__dialogue, .login__name { transition: opacity var(--duration-lg) var(--motion-easing); }
.login__background { --login-background-fade-start: 66.667%; --login-background-fade-end: 100%; container-type: size; z-index: -3; opacity: 0; background: var(--color-gray-7); }
.login__background-image { object-fit: cover; object-position: center top; }
.login__background--active { z-index: -2; }
.login__background--active, .login__background--outgoing { opacity: 1; }
.login__background::after { content: ''; background: linear-gradient(to bottom, transparent var(--login-background-fade-start), var(--color-gray-7) var(--login-background-fade-end)), var(--login-background-overlay); }
.login__brand { grid-row: 1; justify-self: start; color: var(--color-primary); font-size: var(--font-size-3xl); font-weight: var(--font-weight-xl); line-height: var(--line-height-2xs); margin-block-end: var(--space-lg); }
.login__button { display: flex; align-items: center; justify-content: center; gap: var(--space-sm); block-size: max-content; min-block-size: var(--control-size-md); padding: var(--space-md) var(--space-lg); border: var(--line-width) solid transparent; border-radius: var(--radius-md); font-size: var(--font-size-md); font-weight: var(--font-weight-md); line-height: var(--line-height-md); text-align: center; }
.login__button img { inline-size: var(--icon-size-md); block-size: var(--icon-size-md); flex-shrink: 0; object-fit: contain; }
.login__button[aria-busy='true'] { opacity: 1; }
.login__button .loading-character { --loading-character-size: var(--icon-size-md); flex-shrink: 0; }
.login__button--google { grid-row: 8; margin-block-start: var(--space-lg); background: var(--color-canvas); color: var(--color-text); border-color: var(--color-gray-3); }
.login__button--kakao { grid-row: 9; margin-block-start: var(--space-sm); background: var(--color-kakao); color: var(--color-on-kakao); }
.login__profile { --avatar-size: calc(var(--avatar-size-lg) + var(--space-xl)); grid-row: 3; justify-self: start; margin-block-end: var(--space-md); }
.login__dialogue, .login__name { justify-self: start; max-inline-size: 100%; text-align: start; }
.login__dialogue { grid-row: 4; color: var(--color-gray-1); font-size: var(--font-size-2xl); font-weight: var(--font-weight-xl); line-height: var(--line-height-sm); }
.login__dialogue-line { display: inline-flex; word-break: keep-all; }
.login__name { grid-row: 5; margin-block-start: var(--space-sm); color: var(--color-gray-2); font-size: var(--font-size-sm); font-weight: var(--font-weight-md); line-height: var(--line-height-md); }
.login__sign-in-prompt { grid-row: 7; position: relative; justify-self: center; max-inline-size: 100%; padding: var(--space-xs) var(--space-md); border: var(--line-width) solid transparent; border-radius: var(--squircle-xs); background: var(--color-primary); color: var(--color-gray-1); font-size: var(--font-size-sm); line-height: var(--line-height-lg); text-align: center; }
.login__sign-in-prompt::after { content: ''; position: absolute; inset-block-start: 100%; inset-inline-start: 50%; inline-size: var(--space-lg); block-size: var(--space-sm); transform: translateX(-50%); background: var(--color-primary); clip-path: polygon(0 0, 100% 0, 50% 100%); }
.login--changing :is(.login__profile, .login__dialogue, .login__name) { opacity: 0; transition-duration: var(--login-exit-duration); }
@container login (max-aspect-ratio: 6 / 13) { .login__background { --login-background-fade-end: min(100cqh, calc(100cqw * var(--runtime-login-background-ratio))); --login-background-fade-start: calc(var(--login-background-fade-end) - 20cqh); } .login__background-image { object-fit: contain; } }