@charset "utf-8";
/* 2026-11-06: 로그인 화면 (login.skin.php) — 메인과 같은 톤 */
body:has(#able_login) {
    margin: 0; min-height: 100vh;
    background: radial-gradient(1200px 600px at 15% -10%, #dcebff 0%, transparent 60%),
                radial-gradient(900px 500px at 110% 110%, #e3f0ff 0%, transparent 55%),
                var(--able-bg, #f2f6fc) !important;
}
#able_login {
    min-height: 100vh; box-sizing: border-box; padding: 40px 16px;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 20px;
    font-family: inherit;
}
#able_login .al_card {
    width: 100%; max-width: 400px; box-sizing: border-box; padding: 40px 36px 30px;
    background: #fff; border-radius: 22px; box-shadow: 0 20px 60px rgba(31, 92, 184, .12), 0 2px 8px rgba(31, 92, 184, .06);
}
#able_login .al_logo { margin: 0 0 14px; text-align: center; line-height: 0; }
#able_login .al_logo img { width: 210px; max-width: 80%; height: auto; }
#able_login .al_desc, #able_login .al_notice { word-break: keep-all; }
#able_login .al_desc { margin: 0 0 26px; text-align: center; color: var(--able-muted, #64748b); font-size: 13px; line-height: 1.6; }

#able_login fieldset { margin: 0; padding: 0; border: 0; display: flex; flex-direction: column; gap: 10px; }
#able_login .al_field {
    position: relative; display: flex; align-items: center; height: 50px; padding: 0 14px; box-sizing: border-box;
    border: 1px solid var(--able-line, #e6edf7); border-radius: 14px; background: #f8fbff; transition: border-color .15s, box-shadow .15s, background .15s;
}
#able_login .al_field:focus-within { border-color: var(--able-primary, #1f7cf5); background: #fff; box-shadow: 0 0 0 4px rgba(31, 124, 245, .14); }
#able_login .al_field > i { width: 18px; color: #94a3b8; font-size: 16px; text-align: center; transition: color .15s; }
#able_login .al_field:focus-within > i { color: var(--able-primary, #1f7cf5); }
#able_login .al_field input {
    flex: 1 1 auto; min-width: 0; height: 100% !important; margin: 0 0 0 10px; padding: 0 !important;
    border: 0 !important; background: transparent !important; box-shadow: none !important; outline: 0;
    font-size: 15px; color: var(--able-ink, #13294b);
}
#able_login .al_field input::placeholder { color: #a3b1c6; }
#able_login .al_eye { flex: 0 0 auto; width: 32px; height: 32px; border: 0; border-radius: 8px; background: transparent; color: #94a3b8; cursor: pointer; }
#able_login .al_eye:hover { color: var(--able-primary, #1f7cf5); background: var(--able-primary-soft, #eaf3ff); }

#able_login .al_row { display: flex; align-items: center; justify-content: space-between; margin: 4px 2px 6px; font-size: 13px; }
#able_login .al_auto { display: inline-flex; align-items: center; gap: 6px; color: var(--able-text, #334155); cursor: pointer; }
#able_login .al_auto input { width: 16px; height: 16px; margin: 0; accent-color: var(--able-primary, #1f7cf5); cursor: pointer; }
#able_login .al_lost { color: var(--able-muted, #64748b) !important; }
#able_login .al_lost:hover { color: var(--able-primary, #1f7cf5) !important; }

#able_login .al_submit {
    height: 52px; margin-top: 4px; border: 0; border-radius: 14px; cursor: pointer;
    background: var(--able-primary, #1f7cf5); color: #fff; font-size: 16px; font-weight: 800; letter-spacing: .5px;
    box-shadow: 0 8px 20px rgba(31, 124, 245, .28); transition: background .15s, transform .1s, box-shadow .15s;
}
#able_login .al_submit:hover { background: var(--able-primary-dark, #1569d8); box-shadow: 0 10px 24px rgba(31, 124, 245, .34); }
#able_login .al_submit:active { transform: translateY(1px); }

#able_login .al_notice {
    margin: 22px 0 0; padding: 12px 14px; border-radius: 12px; background: #f5f8fd;
    color: var(--able-muted, #64748b); font-size: 12px; line-height: 1.6;
}
#able_login .al_notice i { color: var(--able-primary, #1f7cf5); margin-right: 4px; }
#able_login .al_copy { margin: 0; color: #94a3b8; font-size: 12px; }
#able_login .al_copy strong { color: var(--able-ink, #13294b); }

@media (max-width: 480px) {
    #able_login .al_card { padding: 32px 22px 24px; border-radius: 18px; }
}

/* 2026-11-07: 브라우저 자동완성 배경(하늘색)이 입력칸 안에 박스로 겹쳐 보이던 것 — 바깥 칸 배경색으로 덮는다 */
#able_login .al_field input:-webkit-autofill,
#able_login .al_field input:-webkit-autofill:hover {
    -webkit-box-shadow: 0 0 0 1000px #f8fbff inset !important;
    box-shadow: 0 0 0 1000px #f8fbff inset !important;
    -webkit-text-fill-color: var(--able-ink, #13294b) !important;
    transition: background-color 9999s ease-out 0s;
}
#able_login .al_field:focus-within input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 1000px #fff inset !important;
    box-shadow: 0 0 0 1000px #fff inset !important;
}