@charset "UTF-8";

.page-auth #main-content {
    min-height: calc(100vh - 230px);
    background:
        radial-gradient(circle at 50% 0%, rgba(121, 30, 25, .12), transparent 34%),
        #15161a;
}

.auth-page {
    padding: 64px 20px 84px;
    font-family: Pretendard, "Noto Sans KR", "Apple SD Gothic Neo", Arial, sans-serif;
}

.auth-shell {
    width: min(100%, 420px);
    margin: 0 auto;
}

.auth-heading { margin-bottom: 24px; }
.auth-kicker {
    display: block;
    margin-bottom: 8px;
    color: #b65f55;
    font: 800 10px/1 Arial, sans-serif;
    letter-spacing: .18em;
}
.auth-heading h1 {
    margin: 0;
    color: #d5d7dc;
    font-size: 26px;
    line-height: 1.2;
    letter-spacing: -.045em;
}
.auth-heading p {
    margin: 9px 0 0;
    color: #7f838b;
    font-size: 12px;
    line-height: 1.6;
}

.auth-alert {
    margin-bottom: 12px;
    padding: 11px 13px;
    border: 1px solid #3b3d45;
    background: #1b1c21;
    color: #b9bbc1;
    font-size: 12px;
    line-height: 1.5;
}
.auth-alert.is-error { border-color: #6d3432; color: #d59893; background: #221919; }
.auth-alert.is-success { border-color: #355641; color: #8eb49a; background: #182019; }

.auth-card {
    border: 1px solid #303238;
    background: #1a1b1f;
    box-shadow: 0 24px 60px rgba(0, 0, 0, .28);
    padding: 24px;
}

.auth-local-form { display: grid; gap: 14px; }
.auth-field { display: grid; gap: 7px; }
.auth-field > span {
    color: #9b9ea5;
    font-size: 11px;
    font-weight: 700;
}
.auth-field input {
    width: 100%;
    height: 42px;
    box-sizing: border-box;
    padding: 0 12px;
    border: 1px solid #3a3d45;
    outline: none;
    background: #1d1e23;
    color: #d5d7dc;
    font-size: 13px;
}
.auth-field input:focus { border-color: #696d76; box-shadow: 0 0 0 1px #696d76; }

.auth-primary,
.auth-social {
    min-height: 42px;
    box-sizing: border-box;
}
.auth-primary {
    margin-top: 2px;
    border: 1px solid #8e2824;
    background: #781714;
    color: #e0d9d7;
    cursor: pointer;
    font-size: 12px;
    font-weight: 800;
}
.auth-primary:hover { background: #8a1c18; }

.auth-divider {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 22px 0;
    color: #676a71;
    font-size: 10px;
}
.auth-divider::before {
    position: absolute;
    inset-inline: 0;
    height: 1px;
    background: #303238;
    content: "";
}
.auth-divider span { position: relative; padding: 0 10px; background: #1a1b1f; }

.auth-social-list { display: grid; gap: 9px; }
.auth-social {
    display: grid;
    grid-template-columns: 28px 1fr 28px;
    align-items: center;
    padding: 0 12px;
    border: 1px solid #3a3d45;
    background: #202126;
    color: #c8cad0;
    text-decoration: none;
}
.auth-social::after { content: "›"; color: #656970; font-size: 19px; text-align: right; }
.auth-social:hover { border-color: #50535b; background: #23252b; }
.auth-social strong { text-align: center; font-size: 12px; font-weight: 700; }
.auth-social.is-disabled { opacity: .42; pointer-events: none; }
.auth-google-mark,
.auth-battlenet-mark,
.auth-kakao-mark,
.auth-naver-mark {
    display: grid;
    width: 24px;
    height: 24px;
    place-items: center;
    border-radius: 50%;
    font: 800 13px/1 Arial, sans-serif;
}
.auth-google-mark { color: #d6d7db; background: #303238; }
.auth-battlenet-mark { color: #79aee9; border: 1px solid #386b9f; background: #172330; }
.auth-kakao-mark { color: #191919; background: #fee500; border-radius: 7px; }
.auth-naver-mark { color: #fff; background: #03c75a; border-radius: 7px; }
.auth-social.is-kakao:hover { border-color: #6c641f; background: #26251e; }
.auth-social.is-naver:hover { border-color: #276c49; background: #1c2923; }

.auth-provider-note {
    margin: 12px 0 0;
    color: #666a71;
    font-size: 10px;
    line-height: 1.5;
}
.auth-switch {
    margin: 18px 0 0;
    color: #777b83;
    font-size: 11px;
    text-align: center;
}
.auth-switch a { margin-left: 6px; color: #c7c9ce; font-weight: 700; text-decoration: none; }

.site-account-links { display: flex; align-items: center; gap: 10px; }
.site-account-links a { color: inherit; text-decoration: none; }
.site-account-links .site-account-name { color: #c7c9ce; font-weight: 700; }
.site-logout-form { display: inline; margin: 0; }
.site-logout-button {
    padding: 0;
    border: 0;
    background: none;
    color: #777b83;
    cursor: pointer;
    font: inherit;
}
.site-logout-button:hover { color: #b9bbc0; }

@media (max-width: 560px) {
    .auth-page { padding: 42px 14px 64px; }
    .auth-card { padding: 20px 16px; }
}

.auth-nickname-help {
    margin: -2px 0 4px;
    color: #8d929c;
    font-size: 13px;
    line-height: 1.6;
}