/* 로그인 화면 전용(레이아웃 없이 뜨는 화면이라 스킨 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 가 그리는 화살표에 글자가 겹치지 않게 하려는 것이다. */
.login_box select {
    width: 100%;
    height: 35px;
    background-color: #fff;
    border: 1px solid #DFE4EA;
    border-radius: 32px;
    padding: 8px 35px 8px 18px;
    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;
}
}

/* ===== HLNG 절 - 단일 박스 로그인·가입 화면(Shore·Vessel·SRM 의 LoginHLNG, SRM 의 Register) =====

   원래 AdminLTE.min.css 안에 직접 고쳐 넣었던 규칙들이다. 라이브러리 원본을 손대면 안 된다는
   원칙에 어긋나고 그 손질에 화면이 묶여 있어서 뽑아 왔다.
   body 의 login-page·register-page 가 울타리라 기본 로그인 화면에는 걸리지 않는다.
   이 화면들은 mfm-base 를 싣지 않으므로 값은 전부 리터럴로 적는다 - var() 로 다른 파일의
   변수를 가져오면 그 파일이 없어 선언이 통째로 무효가 된다(에러는 안 뜬다). */
@layer custom {

/* 본문 글꼴. AdminLTE 원본은 Source Sans Pro 를 주는데 이 화면들은 arial 을 쓴다 */
.login-page,
.register-page {
    font-family: 'arial', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    background: #262a33;
}

.login-page.white_theme,
.register-page.white_theme {
    background: #e6e6e6;
}

    .login-page.white_theme sub,
    .register-page.white_theme sub {
        color: #222;
    }

/* 입력 상자를 감싼 판. 여백은 AdminLTE 기본(20px)이 아니라 이 화면들 값이다 */
.login-page .login-box-body,
.register-page .register-box-body {
    background: #2d3039;
    padding: 30px 40px 20px 40px;
    border-top: 0;
    color: #666;
    box-shadow: 0 2px 13px rgba(0, 0, 0, 0.5);
}

.white_theme .login-box-body,
.white_theme .register-box-body {
    background-color: #F5F5F5;
    box-shadow: 0px 11px 14px 0px rgba(0, 0, 0, 0.2);
}

.white_theme .form-control {
    background-color: #FFF;
    border-color: #c1a26b;
}

/* 로그인 버튼은 파랑, 가입 버튼은 금색. important 는 부트스트랩 .btn-primary 를 이기려고
   원래부터 붙어 있던 것이다. 테두리는 색을 주지 않는다 - 손질된 라이브러리 판에는 이 규칙에
   border-color 가 없어서 부트스트랩 기본값(투명)이 그대로 보였다.
   AdminLTE 원본 값(#367fa9)이 나오면 안 된다 */
.login-page .btn-primary {
    background-color: #3b4ca8 !important;
    color: #FFF;
    border-color: transparent;
}

.register-page .btn-primary {
    background-color: #c2a265 !important;
    color: #000;
    border-color: transparent;
}

.white_theme .btn-primary {
    color: #FFF;
}

    .white_theme .btn-primary:hover,
    .white_theme .btn-primary:active,
    .white_theme .btn-primary.hover {
        background-color: #000 !important;
        color: #FFF !important;
        border-color: #000;
    }

    .white_theme .btn-primary:focus {
        border: 0;
    }

/* 회사 로고와 표어. 종전에는 mfm-view-common 에 있어 그 파일을 싣지 않는 SRM 화면에서는 안 걸렸다 */
.login-page .company-logo,
.register-page .company-logo {
    width: 200px;
    margin: 0% auto;
    position: absolute;
    top: 2%;
    left: 1%;
}

.login-page .company-slogan,
.register-page .company-slogan {
    width: 600px;
    margin: 0% auto;
    position: absolute;
    bottom: 6%;
    left: 3%;
    color: #FFF;
    font-size: 80px;
    font-weight: 500;
    line-height: 80px;
}

/* 마크업의 mt0·mt10·pt20 은 여기서 값을 주지 않는다.
   그 유틸은 mfm-base 소유인데 이 화면들은 그 파일을 싣지 않아 여태 걸린 적이 없다.
   지금 값을 주면 없던 여백이 새로 생겨 로그인 상자가 커진다 - 마크업의 죽은 클래스로 둔다. */

/* 로딩 표시 — 로그인은 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;
    }
}

}