* { box-sizing: border-box; }
body {
    margin: 0;
    min-height: 100vh;
    background: #000 url("login-bg.jpg") center top / cover fixed no-repeat;
    color: #e9ebec;
    font-family: Pretendard, "Malgun Gothic", sans-serif;
}
.login-layout {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 32px;
    width: min(100% - 24px, 450px);
    margin: 0 auto;
}
.login-logo { display: block; }
.login-logo img { display: block; width: 210px; height: 87px; object-fit: contain; }
.login-card {
    width: 100%;
    padding: 32px;
    border-radius: 16px;
    background: #10100e;
}
.login-form { display: grid; gap: 16px; }
.login-field {
    display: flex;
    align-items: center;
    min-width: 0;
    height: 46px;
    border: 1px solid #7d7e81;
    border-radius: 8px;
    background: #111;
}
.login-field:focus-within { border-color: #fec400; }
.login-field input {
    flex: 1;
    min-width: 0;
    width: 100%;
    padding: 0 16px;
    border: 0;
    background: transparent;
    color: #e9ebec;
    font-family: inherit;
    font-size: 16px;
    font-weight: 600;
    outline: 0;
}
.login-field input::placeholder { color: #888; opacity: 1; }
.login-icon {
    display: grid;
    place-items: center;
    flex: 0 0 50px;
    align-self: stretch;
    border: 0;
    background: transparent;
    color: #9399a1;
    cursor: pointer;
}
.login-icon[aria-pressed="true"] .eye-slash { display: none; }
.login-captcha { display: grid; grid-template-columns: 183fr 195fr; align-items: center; gap: 8px; }
.captcha-media { display: flex; min-width: 0; height: 38px; }
.captcha-media img { min-width: 0; width: 100%; height: 38px; object-fit: contain; background: #fff; }
.captcha-media .login-icon { flex-basis: 46px; background: #3d3d40; font-size: 20px; }
.login-submit {
    margin-top: -8px;
    min-height: 66px;
    border: 0;
    border-radius: 10px;
    background: #fec400;
    color: #000;
    font: 700 18px Pretendard, "Malgun Gothic", sans-serif;
    cursor: pointer;
}
.login-form:invalid .login-submit { opacity: .38; }
.login-join { margin: 32px 0 22px; text-align: center; }
.login-join p { margin: 0 0 6px; color: #9399a1; font-size: 12px; }
.login-join a { color: #e9ebec; font-size: 14px; text-underline-offset: 3px; }
.login-banner { display: block; width: 100%; height: auto; aspect-ratio: 2; object-fit: contain; }
@media (max-width: 440px) {
    .login-layout { gap: 24px; }
    .login-card { padding: 24px; }
    .login-field input { padding-inline: 10px; }
    .captcha-media .login-icon { flex-basis: 34px; }
}