/* ============================================================
     Care Bridging — Login Theme (풀스크린 글래스모피즘, 라이트/다크)
     data-portal-theme 속성은 index_login.html 상단 스크립트가 세팅
     (localStorage.portalTheme 개인설정 > /template/themeSetting 관리자 기본값 > 다크 폴백)
     ============================================================ */

/* ---- 공통 레이아웃 (테마 무관) ---- */
body.page-login {
    min-height: 100vh !important;
    overflow: hidden !important;
}

/* 좌측 스와이퍼 패널 제거로 남은 배경 이미지는 사용 안 함 (CSS 그라디언트로 대체) */
body.page-login .layout-background {
    display: none !important;
}

/* 메인 카드 — 화면 정중앙 고정 배치(기존 absolute+translate 중앙정렬 방식 유지), 반투명 글래스모피즘, 기존 1080x600 고정 박스 해제 */
body.page-login main,
body.page-login .layout-login {
    position: fixed !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    display: flex !important;
    flex-direction: column !important;
    width: min(30rem, 92vw) !important;
    max-width: none !important;
    height: auto !important;
    max-height: none !important;
    padding: 3.5rem 3rem !important;
    border-radius: 1.5rem !important;
    -webkit-backdrop-filter: blur(24px) saturate(140%) !important;
    backdrop-filter: blur(24px) saturate(140%) !important;
}

/* 오른쪽 폼 영역 */
body.page-login .form__login {
    width: 100% !important;
    padding: 0 !important;
    background: transparent !important;
}

/* 폼 헤더 — 로고/타이틀 확대 */
body.page-login .form-header {
    gap: 1.5rem !important;
}

body.page-login .form-header i {
    width: 3.75rem !important;
    height: 3.75rem !important;
}

body.page-login .form-header__box h1,
body.page-login .form-header__box h1[data-i18n] {
    font-size: 2rem !important;
}

body.page-login .form-header__box h3 {
    font-size: 1rem !important;
}

/* 폼 바디 전체 간격 확대 */
body.page-login .form-body {
    gap: 1.75rem !important;
}

/* 입력 레이블 */
body.page-login .form-body .input__box label span,
body.page-login .form-body .input__box label {
    font-size: .9rem !important;
}

/* 입력 필드 확대 */
body.page-login .form-body .input__box input {
    height: 3rem !important;
    font-size: 1.05rem !important;
}

/* 로그인 버튼 확대 */
body.page-login .form-body > button.button--login {
    height: 3.25rem !important;
    border-radius: .75rem !important;
    font-size: 1.05rem !important;
    letter-spacing: .02em !important;
}

/* 에러 메시지 - 라이트/다크 공통(빨강은 양쪽 배경에서 모두 판독 가능) */
body.page-login .form__login--error {
    color: #FF5A65 !important;
}

/* 스크롤바 두께 - 테마 무관 */
body.page-login ::-webkit-scrollbar { width: 6px !important; height: 6px !important; }

/* 로그인 버튼 텍스트색 - 양쪽 다 채도 높은 보라 배경 위라 흰색 고정 */
body.page-login .button--login {
    color: #fff !important;
    border: none !important;
}


/* ============================================================
   다크 테마 (기본값 - localStorage/DB 설정 없을 때 폴백)
   ============================================================ */
[data-portal-theme="dark"] body.page-login {
    background: #060A2A !important;
    background-image:
        radial-gradient(ellipse 900px 700px at 8% 12%, rgba(149,75,240,0.35), transparent 60%),
        radial-gradient(ellipse 900px 700px at 92% 88%, rgba(215,66,116,0.28), transparent 60%),
        radial-gradient(ellipse 1200px 900px at 50% 50%, #0d1330, #060A2A 70%) !important;
}

[data-portal-theme="dark"] body.page-login main,
[data-portal-theme="dark"] body.page-login .layout-login {
    background: rgba(13, 18, 45, 0.55) !important;
    border: 1px solid rgba(149,75,240,0.3) !important;
    box-shadow: 0 20px 70px rgba(0,0,0,0.55), 0 0 0 1px rgba(255,255,255,0.03) inset !important;
}

[data-portal-theme="dark"] body.page-login .form-header__box h1,
[data-portal-theme="dark"] body.page-login .form-header__box h1[data-i18n] {
    color: #f1f5f9 !important;
}

[data-portal-theme="dark"] body.page-login .form-header__box h3 {
    color: #e2e8f0 !important;
}

[data-portal-theme="dark"] body.page-login .form-body .input__box label span,
[data-portal-theme="dark"] body.page-login .form-body .input__box label {
    color: #9ca3af !important;
}

/* 로그인 유지 체크박스 텍스트 */
[data-portal-theme="dark"] body.page-login .checkbox__login--title {
    color: #9ca3af !important;
}

/* 입력박스 밑줄 */
[data-portal-theme="dark"] body.page-login .input__box {
    border-color: rgba(149,75,240,0.2) !important;
}
[data-portal-theme="dark"] body.page-login .input__box.focus {
    border-color: rgba(149,75,240,0.5) !important;
}

/* 아이디/비밀번호 입력창 - portal_login.html 인라인 style에 있던 anti-autofill 트릭(긴 transition)은 그대로 두고
   색상만 여기서 테마별로 지정 (원래 인라인에 다크값이 항상 박혀있어 라이트에서도 다크로 보이던 문제 수정) */
[data-portal-theme="dark"] body.page-login #loginId,
[data-portal-theme="dark"] body.page-login #loginPw {
    background-color: #060A2A !important;
    color: #e2e8f0 !important;
    border-bottom: 1px solid rgba(149,75,240,0.35) !important;
}

/* 비밀번호 변경 버튼 */
[data-portal-theme="dark"] body.page-login .button-change {
    background: transparent !important;
    border-color: rgba(149,75,240,0.35) !important;
    color: #9ca3af !important;
}
[data-portal-theme="dark"] body.page-login .button-change:hover {
    border-color: #954BF0 !important;
    color: #954BF0 !important;
}

/* 로그인 버튼 배경 */
[data-portal-theme="dark"] body.page-login .button--login {
    background-color: #3B2281 !important;
}
[data-portal-theme="dark"] body.page-login .button--login:hover {
    background-color: #954BF0 !important;
}

/* 언어 버튼 */
[data-portal-theme="dark"] body.page-login .lang button {
    background: rgba(255,255,255,0.06) !important;
    border-color: rgba(149,75,240,0.35) !important;
    color: #9ca3af !important;
}
[data-portal-theme="dark"] body.page-login .lang button span { color: #9ca3af !important; }
[data-portal-theme="dark"] body.page-login .lang button:hover {
    background: rgba(149,75,240,0.15) !important;
    border-color: #954BF0 !important;
}
[data-portal-theme="dark"] body.page-login .lang ul {
    background-color: #121a3a !important;
    border: 1px solid rgba(149,75,240,0.3) !important;
}
[data-portal-theme="dark"] body.page-login .lang li { color: #e2e8f0 !important; }
[data-portal-theme="dark"] body.page-login .lang li:hover { background: rgba(149,75,240,0.2) !important; }

/* 스크롤바 색상 */
[data-portal-theme="dark"] body.page-login ::-webkit-scrollbar-thumb { background: rgba(149,75,240,0.45) !important; border-radius: 3px !important; }
[data-portal-theme="dark"] body.page-login ::-webkit-scrollbar-thumb:hover { background: #954BF0 !important; }

/* Chrome autofill 배경 override */
[data-portal-theme="dark"] body.page-login input:-webkit-autofill,
[data-portal-theme="dark"] body.page-login input:-webkit-autofill:hover,
[data-portal-theme="dark"] body.page-login input:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 1000px #060A2A inset !important;
    -webkit-text-fill-color: #e2e8f0 !important;
    caret-color: #e2e8f0;
}

/* 입력 필드 호버/포커스 시 배경 유지 */
[data-portal-theme="dark"] body.page-login main form .form-body .input__box input:hover {
    background-color: #060A2A !important;
}
[data-portal-theme="dark"] body.page-login main form .form-body .input__box input:focus {
    background-color: #060A2A !important;
}


/* ============================================================
   라이트 테마
   ============================================================ */
[data-portal-theme="light"] body.page-login {
    background: #F5F7FA !important;
    background-image:
        radial-gradient(ellipse 900px 700px at 8% 12%, rgba(13,120,229,0.08), transparent 60%),
        radial-gradient(ellipse 900px 700px at 92% 88%, rgba(13,120,229,0.05), transparent 60%),
        radial-gradient(ellipse 1200px 900px at 50% 50%, #ffffff, #F5F7FA 70%) !important;
}

[data-portal-theme="light"] body.page-login main,
[data-portal-theme="light"] body.page-login .layout-login {
    background: rgba(255, 255, 255, 0.85) !important;
    border: 1px solid #e8ebf0 !important;
    box-shadow: 0 20px 60px rgba(15,23,42,0.10), 0 0 0 1px rgba(255,255,255,0.6) inset !important;
}

[data-portal-theme="light"] body.page-login .form-header__box h1,
[data-portal-theme="light"] body.page-login .form-header__box h1[data-i18n] {
    color: #383c42 !important;
}

[data-portal-theme="light"] body.page-login .form-header__box h3 {
    color: #6b7280 !important;
}

[data-portal-theme="light"] body.page-login .form-body .input__box label span,
[data-portal-theme="light"] body.page-login .form-body .input__box label {
    color: #6b7280 !important;
}

/* 로그인 유지 체크박스 텍스트 */
[data-portal-theme="light"] body.page-login .checkbox__login--title {
    color: #6b7280 !important;
}

/* 입력박스 밑줄 */
[data-portal-theme="light"] body.page-login .input__box {
    border-color: #e8ebf0 !important;
}
[data-portal-theme="light"] body.page-login .input__box.focus {
    border-color: #0d78e5 !important;
}

/* 아이디/비밀번호 입력창 - dark 섹션 주석 참고 */
[data-portal-theme="light"] body.page-login #loginId,
[data-portal-theme="light"] body.page-login #loginPw {
    background-color: #ffffff !important;
    color: #383c42 !important;
    border-bottom: 1px solid rgba(13,120,229,0.3) !important;
}

/* 비밀번호 변경 버튼 */
[data-portal-theme="light"] body.page-login .button-change {
    background: transparent !important;
    border-color: #d8dce2 !important;
    color: #6b7280 !important;
}
[data-portal-theme="light"] body.page-login .button-change:hover {
    border-color: #0d78e5 !important;
    color: #0d78e5 !important;
}

/* 로그인 버튼 배경 */
[data-portal-theme="light"] body.page-login .button--login {
    background-color: #0d78e5 !important;
}
[data-portal-theme="light"] body.page-login .button--login:hover {
    background-color: #005dbc !important;
}

/* 언어 버튼 */
[data-portal-theme="light"] body.page-login .lang button {
    background: #f4f6f8 !important;
    border-color: #d8dce2 !important;
    color: #6b7280 !important;
}
[data-portal-theme="light"] body.page-login .lang button span { color: #6b7280 !important; }
[data-portal-theme="light"] body.page-login .lang button:hover {
    background: #E6F3FF !important;
    border-color: #0d78e5 !important;
}
[data-portal-theme="light"] body.page-login .lang ul {
    background-color: #ffffff !important;
    border: 1px solid #e8ebf0 !important;
    box-shadow: 0 4px 16px rgba(15,23,42,0.10) !important;
}
[data-portal-theme="light"] body.page-login .lang li { color: #383c42 !important; }
[data-portal-theme="light"] body.page-login .lang li:hover { background: #E6F3FF !important; }

/* 스크롤바 색상 */
[data-portal-theme="light"] body.page-login ::-webkit-scrollbar-thumb { background: #c4cad4 !important; border-radius: 3px !important; }
[data-portal-theme="light"] body.page-login ::-webkit-scrollbar-thumb:hover { background: #0d78e5 !important; }

/* Chrome autofill 배경 override */
[data-portal-theme="light"] body.page-login input:-webkit-autofill,
[data-portal-theme="light"] body.page-login input:-webkit-autofill:hover,
[data-portal-theme="light"] body.page-login input:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 1000px #ffffff inset !important;
    -webkit-text-fill-color: #383c42 !important;
    caret-color: #383c42;
}

/* 입력 필드 호버/포커스 시 배경 유지 */
[data-portal-theme="light"] body.page-login main form .form-body .input__box input:hover {
    background-color: #ffffff !important;
}
[data-portal-theme="light"] body.page-login main form .form-body .input__box input:focus {
    background-color: #ffffff !important;
}