/* 로그인 화면 전용(레이아웃 없이 뜨는 화면이라 스킨 CSS 대신 이 파일이 색·배치를 준다).

   전 솔루션·전 회사의 로그인 화면이 이 파일 한 벌을 쓴다. 절 구성은 이렇다.
     공통 절     - 문서·모달·폼 부품
     기본 절     - 2단 그라디언트 화면(5솔루션). body 의 v-login 이름표 아래
     HLNG 절     - 단일 박스 화면. body 의 login-page·register-page 아래
   회사가 늘면 그 회사 이름표를 잡는 절을 하나 더 붙인다. 껍데기 마크업은 레이아웃 파일로
   나누고 모양만 여기 모으는 방식이라, 새 회사가 붙어도 이 파일에는 절 하나만 는다. */
@layer lib, custom;
@layer lib {
body.v-login {
    font-family: 'Pretendard','Helvetica Neue','Segoe UI',Helvetica,Verdana,sans-serif;
    background-color: #1D2742;
}
}
@layer custom {
/* 로그인 화면 전용 스타일. 전 솔루션의 로그인이 이 한 벌을 쓴다.

   로그인은 앱 셸 밖이라 스킨 CSS 와 dx.common.css 가 실리지 않는다. 그러니 box3 나 conDetail 처럼
   그쪽이 주인인 클래스에 기대는 규칙을 여기 두지 말 것 - 화면에서는 이름만 맞고 모양이 안 나온다.
   모달을 쓰는 화면은 mfm-modal.css 를 함께 싣는다.

   화면 폭 구간은 세 단계다.
     992px 이상 - 좌우 2단
     768 에서 991px - 1단. 2단으로 두면 입력 칸이 모바일보다 좁아진다
     767px 이하 - 1단, 여백을 더 줄인다 */

/* 높이를 min-height 로 두는 이유 - 고정 높이에 세로 가운데 정렬을 걸면 내용이 화면보다 길 때
   위쪽이 스크롤로 닿지 않는 자리로 밀려난다. dvh 는 모바일 주소창 높이를 뺀 값이라 뒤에 둔다. */
.login_bg {
    width: 100%;
    min-height: 100vh;
    min-height: 100dvh;
    padding: 24px 16px;
    background-repeat: no-repeat;
    background-position: center center;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* 두 패널을 담는 줄. 상한이 없으면 넓은 화면에서 박스가 끝없이 커진다. */
.login_wrap {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    width: 100%;
    max-width: 800px;
}

.login_box_L {
    width: 50%;
    background: #015DFF;
    background: linear-gradient(0deg,rgba(1, 93, 255, 1) 0%, rgba(77, 222, 194, 1) 100%);
    background-repeat: no-repeat;
    border-radius: 32px 0px 32px 32px;
    padding: 24px 44px 44px 44px;
    border: 0px solid #DFE4EA;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* 두 패널은 같은 줄이라 긴 쪽 높이에 맞춰 함께 늘어난다. 세로 가운데 정렬을 주면
   내용이 적은 화면에서도 폼이 박스 한가운데 놓여 페이지마다 같아 보인다. */
.login_box {
    --login-pad-x: 44px;
    --login-pad-y: 44px;
    --login-radius: 32px;
    width: 50%;
    background-color: rgb(255,255,255,1);
    border-radius: 32px 32px 32px 0px;
    padding: var(--login-pad-y) var(--login-pad-x);
    border: 0px solid #DFE4EA;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* 1단일 때만 쓰는 로고. 좌패널 일러스트는 세로가 길어 위에 쌓으면 폼이 화면 밖으로 밀린다.
   워드마크가 흰 배경에서 흐리게 보이므로 좌패널과 같은 그라디언트 띠를 깔아 준다.
   여백 변수를 음수로 되돌려 띠가 상자 좌우 끝까지 닿게 한다 - 상자 padding 이 바뀌어도 따라온다. */
.login_mobile_logo {
    display: none;
    margin: calc(-1 * var(--login-pad-y)) calc(-1 * var(--login-pad-x)) 28px;
    padding: 26px var(--login-pad-x);
    text-align: center;
    background: #015DFF;
    background: linear-gradient(0deg,rgba(1, 93, 255, 1) 0%, rgba(77, 222, 194, 1) 100%);
    border-radius: var(--login-radius) var(--login-radius) 0 0;
}

    .login_mobile_logo img {
        width: 200px;
        max-width: 70%;
    }

.login_logo {
    text-align: center;
    color: #0C1A3C;
    font-size: 14px;
}

    .login_logo h1 {
        background: linear-gradient(90deg, #015DFF 0%, #4DDEC2 100%);
        background-clip: text;
        -webkit-background-clip: text;
        color: transparent;
        font-weight: 700;
        font-size: 22px;
        padding-bottom: 13px;
    }

    .login_logo p {
        line-height: 42px;
        font-weight: 300;
    }

.login_box input {
    width: 100%;
    height: 35px;
    background-color: #fff;
    border: 1px solid #DFE4EA;
    border-radius: 32px;
    padding: 8px 18px;
    color: #8899A8;
}

    .login_box input:focus {
        background-color: #fff;
        outline: none;
    }

    .login_box input::placeholder {
        color: #D3DADE;
    }

.login_box button {
    width: 100%;
    height: 40px;
    background: #015DFF;
    background: linear-gradient(90deg,rgba(1, 93, 255, 1) 0%, rgba(77, 222, 194, 1) 100%);
    border: none;
    border-radius: 32px;
    color: #fff;
    margin-top: 13px;
    text-align: center;
    font-size: 16px;
    line-height: 24px;
}

    .login_box button:hover {
        opacity: 0.7;
    }

/* 셀렉트는 input 이 아니라서 위 규칙이 닿지 않는다. 같은 알약 모양을 따로 준다.
   오른쪽 여백을 넉넉히 두는 이유는 부트스트랩 form-select 가 그리는 화살표에 글자가 겹치지 않게 하려는 것이다.
   글꼴과 줄높이도 여기서 잡는다 - form-select 가 16px 과 1.5 를 직접 선언해, 놔두면 줄상자 24px 이
   안쪽 높이 17px 을 넘어 글자가 깎이고 옆 input 보다 커 보인다. input 은 글자를 가운데 맞춰 그려 멀쩡하다. */
.login_box select {
    width: 100%;
    height: 35px;
    background-color: #fff;
    border: 1px solid #DFE4EA;
    border-radius: 32px;
    padding: 8px 35px 8px 18px;
    font-size: inherit;
    line-height: 1.2;
    color: #8899A8;
}

    .login_box select:focus {
        background-color: #fff;
        outline: none;
        box-shadow: none;
        border-color: #DFE4EA;
    }

/* 체크박스도 input 이라 위의 알약 규칙에 걸린다. 폭 100 퍼센트와 높이 46px 을 되돌린다. */
.login_box input[type="checkbox"],
.login_box input[type="radio"] {
    width: auto;
    height: auto;
    border-radius: 0;
    padding: 0;
    margin: 0;
    accent-color: #015DFF;
}

/* 제목 아래 한 줄 설명. 요소를 div 로 두는 이유는 login_logo 의 p 규칙이 주는
   행간 60px 을 피하기 위해서다. */
.login_sub {
    color: #8899A8;
    font-size: 14px;
    line-height: 22px;
    padding-bottom: 15px;
}

/* 상자 안이 가운데 정렬이라 체크박스 줄만 왼쪽으로 되돌린다. */
.login_check {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 7px;
    margin-top: 11px;
    font-size: 14px;
    color: #8899A8;
}

    .login_check label {
        margin: 0;
        font-weight: 400;
        cursor: pointer;
    }

/* 로그인 안내 문구. 목록 기호가 상자 밖으로 나가지 않도록 왼쪽 여백을 준다. */
.login_notice {
    text-align: left;
    font-size: 13px;
    line-height: 1.7;
    color: #8899A8;
    padding: 13px 4px 0;
}

    .login_notice ul {
        margin: 0;
        padding-left: 18px;
    }

/* 상자 아래 링크. 색은 바깥 문단에서 물려받게 두어 링크마다 규칙을 더하지 않는다. */
.login_link {
    text-align: center;
    line-height: 20px;
    padding: 13px;
    color: #8899A8;
}

.login_link_accent {
    text-align: center;
    color: #3F8CFF;
}

    .login_link a,
    .login_link_accent a {
        color: inherit;
        text-decoration: none;
    }

/* 상자 맨 아래 저작권과 제품명. 좌패널 로고가 제품을 구분하지 않으므로 여기 문구가 그 역할을 한다. */
.login_footer {
    text-align: center;
    font-size: 12px;
    line-height: 1.8;
    color: #8899A8;
    padding-top: 15px;
}

    .login_footer p {
        margin: 0;
    }

/* 모달은 셸이 마크업을 소유하지만 외형은 평소 스킨 CSS 가 준다.
   로그인은 그 CSS 를 싣지 않으므로 여기서 로그인 화면 몫만 정한다.
   입력 칸을 알약으로 두지 않는 이유는 여러 줄 폼에서는 모서리가 과해 보이기 때문이다.
   타이틀 아이콘 여백(mr10)도 같은 이유로 여기 둔다. */
.mr10 {
    margin-right: 10px;
}

.modal-content {
    border: none;
    border-radius: 24px;
}

.modal-header {
    border-bottom: 1px solid #EEF1F4;
    padding: 20px 24px;
}

.modal-title {
    font-size: 18px;
    font-weight: 700;
    color: #0C1A3C;
}

.modal-body {
    padding: 24px;
}

.modal-footer {
    border-top: 1px solid #EEF1F4;
    padding: 16px 24px 24px;
}

.modal .form-label {
    margin-bottom: 6px;
    color: #0C1A3C;
    font-size: 14px;
    font-weight: 500;
}

.modal .form-control,
.modal .form-select {
    height: 44px;
    border: 1px solid #DFE4EA;
    border-radius: 12px;
    color: #0C1A3C;
}

    .modal .form-control:focus,
    .modal .form-select:focus {
        border-color: #015DFF;
        box-shadow: none;
    }

    .modal .form-control:disabled {
        background-color: #F5F7F9;
        color: #8899A8;
    }

/* 모달 안 탭. 로그인은 스킨 CSS 를 싣지 않아 부트스트랩 기본 탭이 그대로 나온다.
   레포 표준인 segment-tabs 는 dx.common.css 소속이라 여기서는 쓸 수 없다. */
.modal .nav-tabs {
    border-bottom: 1px solid #EEF1F4;
    gap: 4px;
}

    .modal .nav-tabs .nav-link {
        border: none;
        border-bottom: 2px solid transparent;
        border-radius: 0;
        padding: 10px 16px;
        color: #8899A8;
        font-size: 15px;
        background: none;
    }

        .modal .nav-tabs .nav-link:hover {
            color: #0C1A3C;
        }

        .modal .nav-tabs .nav-link.active {
            border-bottom-color: #015DFF;
            color: #015DFF;
            font-weight: 700;
        }

.modal .tab-content {
    padding-top: 20px;
}

/* 필드 행 사이 간격. 상세 폼의 form-group 이 없는 폼이라 열 단위로 준다. */
.modal .tab-pane > .row > [class*="col-"],
.modal .tab-pane > div:not(.row) {
    margin-bottom: 14px;
}

.modal .btn {
    min-width: 110px;
    height: 42px;
    padding: 0 22px;
    border: none;
    border-radius: 48px;
    font-size: 15px;
}

.modal .btn-primary {
    background: #015DFF;
    background: linear-gradient(90deg,rgba(1, 93, 255, 1) 0%, rgba(77, 222, 194, 1) 100%);
    color: #fff;
}

.modal .btn-secondary {
    background: #fff;
    border: 1px solid #DFE4EA;
    color: #8899A8;
}

    .modal .btn:hover {
        opacity: 0.7;
    }

@media (max-width: 991px) {
    .login_box_L {
        display: none;
    }

    .login_box {
        --login-pad-x: 40px;
        --login-pad-y: 48px;
        --login-radius: 48px;
        width: 100%;
        max-width: 480px;
        border-radius: 48px;
    }

    .login_mobile_logo {
        display: block;
    }
}

@media (max-width: 767px) {
    .login_bg {
        padding: 20px 12px;
    }

    .login_box {
        --login-pad-x: 24px;
        --login-pad-y: 40px;
        --login-radius: 32px;
        max-width: 420px;
        border-radius: 32px;
    }

        .login_logo h1 {
            font-size: 30px;
        }

    .login_link {
        padding: 16px 4px;
    }
}

/* 낮은 창에서는 삽화 높이를 제한해 카드가 화면 밖으로 밀리지 않게 한다. */
@media (max-height: 800px) {
    .login_box_L img {
        max-height: calc(100dvh - 220px);
        display: block;
        margin-left: auto;
        margin-right: auto;
    }
}

/* 가로로 눕힌 화면. 세로가 짧아 위아래 여백을 줄이지 않으면 폼이 화면 밖으로 나간다. */
@media (max-height: 600px) {
    .login_bg {
        padding: 16px 12px;
    }

    .login_box {
        --login-pad-x: 24px;
        --login-pad-y: 32px;
    }

    .login_mobile_logo {
        margin-bottom: 18px;
        padding: 18px var(--login-pad-x);
    }
}
}

/* 외부 라이브러리 묶음 통합으로 AdminLTE 가 로그인에도 실린다 - 통합 전 로그인 모습으로 되돌린다.
   AdminLTE 의 modal 자체 어둠막(이중 딤)과 화면 높이 고정·자체 스크롤, 글꼴·모달 그림자 */
@layer custom {
.modal {
    background: transparent;
}
/* html 은 두 화면군이 같은 값을 쓴다. body 는 화면군마다 달라 기본 로그인만 잡는다 */
html {
    height: auto;
}
body.v-login {
    height: auto;
    overflow: visible;
}
/* AdminLTE 의 h1~h6·modal-content 규칙이 새로 실려 바뀐 것 - 통합 전 값으로 */
.login_logo h1, .modal-title, .modal-title-text {
    font-family: 'Pretendard', 'Helvetica Neue', 'Segoe UI', Helvetica, Verdana, sans-serif;
}
.modal-content {
    box-shadow: none;
}
}


@layer custom {
/* 로딩 표시 — 로그인은 DevExtreme 을 싣지 않아 앱 셸의 dxLoadPanel 을 쓸 수 없다.
   그래서 같은 자리를 CSS 로만 만든다. 제어는 레이아웃의 window.mfmLoading 이 한다. */
.mfm-login-loading {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 2000;
    background: rgba(0,0,0,.4);
}

.mfm-login-loading.is-on {
    display: block;
}

.mfm-login-loading::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 44px;
    height: 44px;
    margin: -22px 0 0 -22px;
    border: 4px solid rgba(255,255,255,.3);
    border-top-color: #FFF;
    border-radius: 50%;
    animation: mfm-login-spin .8s linear infinite;
}

@keyframes mfm-login-spin {
    to { transform: rotate(360deg); }
}

/* 화면 움직임을 줄여 달라고 설정한 사용자에게는 돌리지 않는다 — 가림막만 남는다 */
@media (prefers-reduced-motion: reduce) {
    .mfm-login-loading::after {
        animation: none;
    }
}

}