/* site.css의 .login-container(센터정렬+네이비 배경)를 오버라이드 -
   실제 배경/레이아웃은 아래 두 패널이 각자 담당한다 */
.login-container {
    display: block;
    justify-content: initial;
    align-items: initial;
    background-color: #ffffff;
    height: 100vh;
    width: 100vw;
    overflow: hidden;
}

.login-split {
    display: flex;
    width: 100%;
    height: 100vh;
}

/* ---------- 좌측 일러스트 패널 ---------- */
.login-illustration {
    flex: 0 0 58%;
    position: relative;
    overflow: hidden;
    background-color: #001A53;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 48px 56px;
}

.login-illustration-pattern {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.login-illustration-top {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
}

.login-logo {
    width: 140px;
    height: auto;
}

.login-illustration-brand {
    color: #8CA0D6;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: .04em;
}

.login-illustration-bottom {
    position: relative;
    max-width: 560px;
}

    .login-illustration-bottom h1 {
        margin: 0 0 14px 0;
        color: #ffffff;
        font-size: 32px;
        font-weight: 700;
        line-height: 1.4;
    }

    .login-illustration-bottom p {
        margin: 0 0 28px 0;
        color: #AAB8DC;
        font-size: 14.5px;
        line-height: 1.7;
    }

.login-illustration-footer {
    color: #5E71A6;
    font-size: 12px;
}

/* ---------- 우측 폼 패널 ---------- */
.login-form-panel {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #ffffff;
}

.login-form-card {
    width: 340px;
}

    .login-form-card h2 {
        margin: 0 0 8px 0;
        color: #0B1B3F;
        font-size: 26px;
        font-weight: 700;
    }

.login-form-subtitle {
    margin: 0 0 32px 0;
    color: #6B7488;
    font-size: 14px;
}

/* ---------- DevExtreme(dxForm) 톤 오버라이드 ---------- */
.login-form-panel .dx-field-item-label-text {
    color: #43BCC2;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .02em;
}

.login-form-panel .dx-texteditor.dx-editor-outlined {
    border: 1px solid #DDE2EA;
    border-radius: 8px;
    background: #F9FAFC;
}

    .login-form-panel .dx-texteditor.dx-editor-outlined.dx-state-focused {
        border-color: #43BCC2;
        box-shadow: 0 0 0 1px #43BCC2;
    }

.login-form-panel .dx-texteditor-input {
    height: 46px;
    padding: 0 14px;
    font-size: 14px;
    color: #0B1B3F;
}

.login-form-panel #loginButton.dx-button {
    width: 100%;
    height: 48px;
    border-radius: 8px;
    background-color: #001655;
    border-color: #001655;
    margin-top: 8px;
}

    .login-form-panel #loginButton.dx-button:hover {
        background-color: #002a8c;
        border-color: #002a8c;
    }

    .login-form-panel #loginButton .dx-button-content {
        color: #ffffff;
        font-weight: 700;
        font-size: 15px;
    }

/* ---------- 반응형: 좁은 화면에서는 일러스트 패널 숨김 ---------- */
@media (max-width: 900px) {
    .login-illustration {
        display: none;
    }

    .login-form-panel {
        flex: 1 1 100%;
    }
}