@charset "utf-8";
/* =====================================================================
   로그인 화면 — 랜딩(armanager_landing.css)과 같은 톤으로 덮어씀
   - loginNew.css 뒤에 로드. 폼·모달 마크업(id/class)은 JS 가 쓰므로 그대로 두고 모양만 바꾼다.
   - 아이콘·그라데이션·빨간 강조색을 걷어내고 네이비 강조색·가는 선·흰 카드로 통일.
   ===================================================================== */
:root {
    --primary-color: #1f4fa8; /* loginNew.css 가 var(--primary-color) 로 쓰는 곳 일괄 교체 */
    --lg-ink: #16202e;
    --lg-body: #3b4a5e;
    --lg-muted: #5d6b7e;
    --lg-line: #e2e7ee;
    --lg-line-soft: #edf1f6;
    --lg-soft: #f7f9fc;
    --lg-accent: #1f4fa8;
    --lg-accent-dark: #173f8a;
    --lg-field: #c8d0dc;
    --lg-input: #858f9e; /* 입력칸 경계 — 흰 배경 대비 3:1 이상(3.27:1) */
    --lg-error: #c93b3b;
}

body.lg-body {
    display: block;
    min-height: 100vh;
    padding: 0;
    background: var(--lg-soft);
    color: var(--lg-ink);
    word-break: keep-all;
    overflow-wrap: anywhere;
}

/* ---------- 상단 바 ---------- */
.lg-top {
    background: #ffffff;
    border-bottom: 1px solid var(--lg-line);
}
.lg-top__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    max-width: 1120px;
    height: 64px;
    margin: 0 auto;
    padding: 0 24px;
}
.lg-logo {
    display: inline-flex;
    align-items: baseline;
    gap: 10px;
    text-decoration: none;
    color: var(--lg-ink);
}
.lg-logo__mark {
    position: relative;
    font-size: 26px;
    font-weight: 900;
    letter-spacing: -0.02em;
    line-height: 1;
}
.lg-logo__mark::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -6px;
    width: 52%;
    height: 3px;
    background: var(--lg-accent);
}
.lg-logo__sub {
    font-size: 14px;
    font-weight: 500;
    color: var(--lg-muted);
}
.lg-top__actions {
    display: flex;
    align-items: center;
    gap: 6px;
}
.lg-top__link {
    padding: 8px 12px;
    font-size: 15px;
    font-weight: 500;
    color: #2c3a4c;
    text-decoration: none;
}
.lg-top__link:hover {
    color: var(--lg-accent);
}
.lg-top__cta {
    padding: 8px 14px;
    border: 1px solid var(--lg-accent);
    border-radius: 6px;
    background: var(--lg-accent);
    font-size: 14px;
    font-weight: 700;
    color: #ffffff;
    text-decoration: none;
}
.lg-top__cta:hover {
    background: var(--lg-accent-dark);
    border-color: var(--lg-accent-dark);
    color: #ffffff;
}

/* ---------- 본문: 로그인 카드만 가운데 (소개는 상단 「서비스 소개」로 별도 페이지) ---------- */
.lg-body .login-page.lg-main {
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 100%;
    max-width: 1120px;
    min-height: calc(100vh - 65px);
    margin: 0 auto;
    /* 로그인 카드가 브라우저 창 한가운데에 오게: 아래 여백 = 위 여백 + 상단 바(65) − 카드 아래 저작권 줄(약 52) */
    padding: 48px 24px 61px;
}
.lg-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    width: 100%;
    max-width: 440px;
    margin: 0 auto;
}

/* ---------- 로그인 카드 ---------- */
.lg-body .login-wrapper {
    background: #ffffff;
    border: 1px solid var(--lg-line);
    border-radius: 6px;
    box-shadow: none;
    transform: none;
    transition: none;
    margin: 0;
}
.lg-body .login-header {
    margin-bottom: 24px;
    padding: 36px 36px 0;
}
.lg-body .login-header h2 {
    font-size: 26px;
    font-weight: 900;
    letter-spacing: -0.02em;
    color: var(--lg-ink);
}
.lg-body .login-container {
    padding: 0 36px 30px;
}
.lg-body .form-group {
    margin-bottom: 18px;
}
.lg-body .form-group label {
    margin-bottom: 8px;
    font-size: 15px;
    font-weight: 700;
    color: var(--lg-ink);
}
/* 입력칸 아이콘 제거 — 랜딩 문의 폼과 같은 모양 */
.lg-body .input-with-icon i {
    display: none;
}
.lg-body .input-with-icon input,
.lg-body .reset-password-form .input-with-icon input,
.lg-body .system-pwd-reset-form .input-with-icon input,
.lg-body .system-auth-area .input-with-icon input {
    width: 100%;
    height: 50px;
    padding: 0 14px;
    border: 1px solid var(--lg-input);
    border-radius: 6px;
    background: #ffffff;
    font-size: 16px; /* iOS 자동 확대 방지 */
    color: var(--lg-ink);
    box-shadow: none;
}
.lg-body .input-with-icon input::placeholder {
    color: #6b7584; /* 안내 문구도 읽히게 4.5:1 이상(4.66:1) */
}
.lg-body .input-with-icon input:focus,
.lg-body .reset-password-form .input-with-icon input:focus,
.lg-body .system-pwd-reset-form .input-with-icon input:focus,
.lg-body .system-auth-area .input-with-icon input:focus {
    border-color: var(--lg-accent);
    box-shadow: none;
    outline: 2px solid var(--lg-accent);
    outline-offset: -1px;
}
.lg-body .input-with-icon input.error-field {
    border-color: var(--lg-error);
    box-shadow: none;
    outline: 1px solid var(--lg-error);
    outline-offset: -1px;
}
/* 오류 칸도 포커스가 오면 알 수 있게 2px — 색까지 다시 준다. 위 :focus 규칙 가운데 비밀번호 초기화·SYSTEM 창 것은
   이 규칙보다 구체적이라 그 창에서는 오류 칸이 포커스 때 파랑으로 바뀌었다 */
.lg-body .input-with-icon input.error-field:focus,
.lg-body .reset-password-form .input-with-icon input.error-field:focus,
.lg-body .system-pwd-reset-form .input-with-icon input.error-field:focus,
.lg-body .system-auth-area .input-with-icon input.error-field:focus {
    border-color: var(--lg-error);
    outline: 2px solid var(--lg-error);
    outline-offset: -1px;
}
.lg-body .login-options {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 2px 0 20px;
}
.lg-body .remember-me {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 15px;
    color: var(--lg-body);
}
.lg-body .remember-me input,
.lg-body .check__input {
    width: 18px;
    height: 18px;
    margin: 0;
    accent-color: var(--lg-accent);
}
.lg-body .remember-me label {
    margin: 0;
    font-size: 15px;
    font-weight: 500;
    color: var(--lg-body);
}
.lg-body .forgot-password {
    font-size: 15px;
    font-weight: 500;
    color: var(--lg-accent);
    text-decoration: none;
}
.lg-body .forgot-password:hover {
    color: var(--lg-accent-dark);
    text-decoration: underline;
}
.lg-body .login-submit-btn {
    width: 100%;
    height: 52px;
    border: none;
    border-radius: 6px;
    background: var(--lg-accent);
    font-size: 17px;
    font-weight: 700;
    color: #ffffff;
    box-shadow: none;
}
.lg-body .login-submit-btn:hover {
    background: var(--lg-accent-dark);
    box-shadow: none;
    transform: none;
}
.lg-body .bottom-links {
    margin-top: 22px;
    padding-top: 18px;
    border-top: 1px solid var(--lg-line-soft);
    text-align: center;
}
.lg-body .terms-privacy-links {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}
.lg-body .terms-privacy-links a {
    font-size: 14px;
    color: var(--lg-muted);
    text-decoration: none;
}
.lg-body .terms-privacy-links a:hover {
    color: var(--lg-accent);
}
.lg-body .divider {
    color: var(--lg-field);
}

/* SYSTEM 계정 인증 영역 (운영에서 SYSTEM 아이디 입력 시 노출) */
.lg-body .system-auth-area {
    margin: 2px 0 18px;
    padding: 16px;
    background: var(--lg-soft);
    border: 1px solid var(--lg-line);
    border-radius: 6px;
}

.lg-body .copyright {
    margin: 32px 0 0;
    font-size: 14px;
    text-align: center;
    color: var(--lg-muted);
}

/* ---------- 모달 공통 (비밀번호 초기화 · SYSTEM 비밀번호 초기화 · 알림 · 진행중 · 사업장 선택 · 약관) ---------- */
.lg-body .reset-password-modal,
.lg-body .system-pwd-reset-modal,
.lg-body .progress-modal {
    background-color: rgba(15, 23, 42, 0.55);
    backdrop-filter: none;
}
/* 사업장 선택 모달 배경은 select_ids.css */
.lg-body .reset-password-container,
.lg-body .system-pwd-reset-container {
    padding: 32px;
    border-radius: 6px;
    box-shadow: none;
}
/* 아래에서 올라오며 넘쳤다 돌아오는 전환 없음 */
.lg-body .reset-password-container,
.lg-body .reset-password-modal.active .reset-password-container,
.lg-body .alert-container,
.lg-body .alert-modal.active .alert-container {
    transform: none;
    transition: none;
}
.lg-body .reset-password-header h2,
.lg-body .system-pwd-reset-header h2 {
    font-size: 22px;
    font-weight: 900;
    letter-spacing: -0.02em;
    color: var(--lg-ink);
}
.lg-body .reset-password-form label,
.lg-body .system-pwd-reset-form label {
    font-size: 15px;
    font-weight: 700;
    color: var(--lg-ink);
}
/* 닫기(×)는 아이콘만 있는 버튼이라 3:1 이상 — 원래 #999(2.85:1) */
.lg-body .close-reset-password-btn,
.lg-body .close-system-pwd-reset-btn {
    color: var(--lg-muted);
}
.lg-body .close-reset-password-btn:hover,
.lg-body .close-system-pwd-reset-btn:hover {
    color: var(--lg-accent);
}
/* 강조 버튼(인증번호 요청·인증) — 그라데이션·그림자 제거, 네이비 단색 */
.lg-body .request-verification-btn,
.lg-body .verify-code-btn,
.lg-body .system-auth-area .request-verification-btn,
.lg-body .system-auth-area .verify-code-btn,
.lg-body .system-pwd-reset-form .request-reset-btn,
.lg-body .system-pwd-reset-form .verify-code-btn {
    border: none;
    border-radius: 6px;
    background: var(--lg-accent);
    font-weight: 700;
    color: #ffffff;
    box-shadow: none;
    transform: none;
}
.lg-body .request-verification-btn:hover,
.lg-body .verify-code-btn:hover:not(:disabled),
.lg-body .system-auth-area .request-verification-btn:hover,
.lg-body .system-auth-area .verify-code-btn:hover:not(:disabled),
.lg-body .system-pwd-reset-form .request-reset-btn:hover,
.lg-body .system-pwd-reset-form .verify-code-btn:hover:not(:disabled) {
    background: var(--lg-accent-dark);
    box-shadow: none;
    transform: none;
}
.lg-body .verify-code-btn:disabled,
.lg-body .system-auth-area .verify-code-btn:disabled,
.lg-body .system-pwd-reset-form .verify-code-btn:disabled {
    background: #d5dbe4;
    color: #ffffff;
}
/* 인증번호 요청 버튼: 요청 후 비활성(disabled 속성 / .disabled 클래스)일 때 회색.
   위 네이비 규칙이 loginNew.css 의 비활성 회색(#ccc)을 덮어써 5분 동안 활성처럼 보이던 문제 */
.lg-body .request-verification-btn:disabled,
.lg-body .request-verification-btn.disabled,
.lg-body .request-verification-btn:disabled:hover,
.lg-body .request-verification-btn.disabled:hover {
    background: #d5dbe4;
    color: #ffffff;
    cursor: not-allowed;
}
/* 보조 버튼(SYSTEM 계정 비밀번호 초기화 — 로컬 환경에서만 노출) */
.lg-body .system-pwd-reset-btn,
.lg-body .login-options .system-pwd-reset-btn {
    border: 1px solid var(--lg-field);
    border-radius: 6px;
    background: #ffffff;
    color: #2c3a4c;
    box-shadow: none;
}
.lg-body .system-pwd-reset-btn:hover {
    background: #f4f6fa;
    box-shadow: none;
    transform: none;
}
.lg-body .verification-timer,
.lg-body .system-pwd-reset-form .verification-timer {
    color: var(--lg-accent);
}
.lg-body .verification-timer.expired,
.lg-body .system-pwd-reset-form .verification-timer.expired {
    color: var(--lg-error);
}

/* 알림 모달 */
.lg-body .alert-modal {
    background-color: rgba(15, 23, 42, 0.45);
    backdrop-filter: none;
}
.lg-body .alert-container {
    border-radius: 6px;
    box-shadow: none;
}
.lg-body .alert-header {
    padding: 16px 20px;
    border-bottom: 1px solid var(--lg-line);
    background: #ffffff;
    color: var(--lg-ink);
}
.lg-body .alert-header h3 {
    font-size: 17px;
    font-weight: 700;
    color: var(--lg-ink);
}
.lg-body .alert-header h3 i {
    display: none;
}
.lg-body .close-alert-btn {
    color: var(--lg-muted);
}
.lg-body .close-alert-btn:hover {
    color: var(--lg-ink);
}
.lg-body .alert-content {
    padding: 22px 20px;
    font-size: 16px;
    line-height: 1.7;
    color: var(--lg-body);
}
.lg-body .alert-footer {
    padding: 14px 20px;
    border-top: 1px solid var(--lg-line-soft);
    background: #ffffff;
    text-align: right;
}
.lg-body .confirm-alert-btn {
    min-width: 96px;
    padding: 11px 18px;
    border-radius: 6px;
    background: var(--lg-accent);
    box-shadow: none;
}
.lg-body .confirm-alert-btn:hover {
    background: var(--lg-accent-dark);
    box-shadow: none;
    transform: none;
}
.lg-body .confirm-alert-btn:active {
    transform: none; /* 누르는 순간 작아지지 않게 */
}
.lg-body .confirm-alert-btn::before,
.lg-body .confirm-alert-btn::after {
    display: none;
}

/* 진행중 모달: 모서리 한 단, 그림자·튀어 오르며 커지는 전환 없음 */
.lg-body .progress-container {
    border: 1px solid var(--lg-line);
    border-radius: 6px;
    box-shadow: none;
    transition: none;
}
.lg-body .progress-modal.active .progress-container {
    transform: none;
}
/* 상단 색 띠는 장식이라 없앤다 */
.lg-body .progress-container::before {
    display: none;
}
.lg-body .progress-content {
    box-shadow: none; /* 안쪽 그림자(inset) 없음 */
}
.lg-body .dot-spinner {
    --uib-color: var(--lg-accent);
}

/* 사업장 선택 모달은 select_ids.css (랜딩과 공용, 이 파일 다음에 불러온다) */

/* 이용약관·개인정보처리방침 전체 화면 — 로그인 화면엔 랜딩 헤더(80px)가 없어 상단 여백 보정 */
.lg-body .terms-container {
    padding-top: 0;
}
.lg-body .terms-header {
    top: 0;
    border-bottom-color: var(--lg-line);
    box-shadow: none; /* 그림자 대신 아래 1px 선 */
}
.lg-body .close-terms-btn {
    border: 1px solid var(--lg-field);
    background: #ffffff;
    color: #2c3a4c;
    box-shadow: none;
}
.lg-body .close-terms-btn:hover,
.lg-body .close-terms-btn:active {
    background: #f4f6fa;
    box-shadow: none;
    transform: none;
}

/* ---------- 반응형 ---------- */
@media (max-width: 992px) {
    .lg-body .login-page.lg-main {
        padding: 36px 20px 28px;
    }
    .lg-body .copyright {
        margin-top: 28px;
    }
}
@media (max-width: 480px) {
    body.lg-body {
        padding: 0;
    }
    .lg-top__inner {
        height: 56px;
        padding: 0 16px;
    }
    .lg-logo__mark {
        font-size: 22px;
    }
    .lg-logo__sub,
    .lg-top__link {
        display: none;
    }
    .lg-body .login-page.lg-main {
        justify-content: flex-start;
        min-height: 0;
        padding: 24px 16px 24px;
    }
    .lg-body .login-wrapper {
        margin: 0;
    }
    .lg-body .login-header {
        margin-bottom: 18px;
        padding: 26px 20px 0;
    }
    .lg-body .login-header h2 {
        font-size: 23px;
    }
    .lg-body .login-container {
        padding: 0 20px 22px;
    }
    .lg-body .reset-password-container,
    .lg-body .system-pwd-reset-container {
        padding: 24px 20px;
    }
    .lg-body .copyright {
        margin: 24px 0 8px;
        font-size: 13px;
    }
}
/* 화면 높이가 낮을 때 모달 윗부분이 잘리지 않게 (랜딩과 동일 처리) */
@media (max-height: 700px) {
    .lg-body .reset-password-modal,
    .lg-body .system-pwd-reset-modal {
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        padding: 12px 0;
    }
    .lg-body .reset-password-modal .reset-password-container,
    .lg-body .system-pwd-reset-modal .system-pwd-reset-container {
        margin: auto;
    }
}

/* ---------------------------------------------------------------------
   로그인 사업장 선택 화면 (uat/uia/EgovLoginUsrList.jsp — 같은 아이디가 여러 사업장에 있을 때)
   --------------------------------------------------------------------- */
.lg-comp {
    display: flex;
    flex-direction: column;
    justify-content: center; /* PC·태블릿: 카드 중심을 브라우저 창 전체의 세로 가운데에 */
    max-width: 640px;
    min-height: calc(100vh - 65px); /* 상단 바 64px + 아래 테두리 1px */
    margin: 0 auto;
    /* 아래 여백을 위보다 상단 바 높이(65px)만큼 크게 → 카드 중심 = 창 중앙.
       위아래 합계는 기존(96px)과 비슷하게 유지해 사업장이 많아도 스크롤이 새로 생기지 않게 함 */
    padding: 16px 24px 81px;
}
.lg-comp__card {
    padding: 34px 36px 28px;
    background: #ffffff;
    border: 1px solid var(--lg-line);
    border-radius: 6px;
    box-shadow: none;
}
.lg-comp__title {
    margin: 0 0 8px;
    font-size: 26px;
    font-weight: 900;
    letter-spacing: -0.02em;
    color: var(--lg-ink);
}
/* 안내 문구 마크업(EgovLoginUsrList.jsp)이 주석 처리돼 지금은 쓰이지 않는다 — 되살리면 적용된다 */
.lg-comp__desc {
    margin: 0 0 22px;
    font-size: 15.5px;
    line-height: 1.7;
    color: var(--lg-body);
}
.lg-comp__list {
    list-style: none;
    max-height: 440px;
    margin: 0;
    padding: 0;
    overflow-y: auto;
    border-top: 2px solid var(--lg-ink);
}
.lg-comp__item {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px 4px;
    border-bottom: 1px solid var(--lg-line);
}
.lg-comp__info {
    flex: 1 1 auto;
    min-width: 0;
}
.lg-comp__name {
    display: block;
    font-size: 17px;
    font-weight: 700;
    line-height: 1.45;
    color: var(--lg-ink);
}
.lg-comp__meta {
    display: block;
    margin-top: 3px;
    font-size: 14px;
    font-variant-numeric: tabular-nums;
    color: var(--lg-muted);
}
.lg-comp__sep {
    margin: 0 8px;
    color: #b3bdcb;
}
.lg-comp__btn {
    flex-shrink: 0;
    height: 40px;
    padding: 0 18px;
    border: 1px solid var(--lg-accent);
    border-radius: 6px;
    background: var(--lg-accent);
    font-family: inherit;
    font-size: 15px;
    font-weight: 700;
    color: #ffffff;
    cursor: pointer;
}
.lg-comp__btn:hover {
    border-color: var(--lg-accent-dark);
    background: var(--lg-accent-dark);
}
.lg-comp__back {
    display: inline-block;
    margin-top: 18px;
    font-size: 14.5px;
    color: var(--lg-muted);
    text-decoration: none;
}
.lg-comp__back:hover {
    color: var(--lg-accent);
}
/* 모바일: 목록 → 사업장별 카드 (바깥 카드 테두리는 걷어 카드 안의 카드가 되지 않게) */
@media (max-width: 576px) {
    .lg-comp {
        justify-content: flex-start; /* 모바일은 사업장 카드 목록이라 위에서부터 */
        min-height: 0;
        padding: 24px 16px 32px;
    }
    .lg-comp__card {
        padding: 0;
        background: transparent;
        border: none;
        border-radius: 0;
        box-shadow: none;
    }
    .lg-comp__title {
        font-size: 23px;
    }
    .lg-comp__desc {
        margin-bottom: 18px;
        font-size: 15px;
    }
    .lg-comp__list {
        max-height: none;
        overflow: visible;
        border-top: none;
    }
    .lg-comp__item {
        display: block;
        margin-bottom: 10px;
        padding: 16px 16px 14px;
        background: #ffffff;
        border: 1px solid var(--lg-line);
        border-radius: 6px;
    }
    .lg-comp__name {
        margin-bottom: 6px;
        font-size: 16.5px;
    }
    .lg-comp__meta {
        margin-top: 0;
        font-size: 14px;
        line-height: 1.7;
    }
    .lg-comp__meta-item {
        display: block;
    }
    .lg-comp__sep {
        display: none;
    }
    .lg-comp__btn {
        display: block;
        width: 100%;
        height: 44px;
        margin-top: 12px;
        font-size: 15.5px;
    }
    .lg-comp__back {
        margin-top: 8px;
    }
}

/* 키보드 포커스는 랜딩과 같은 2px 외곽선 (입력칸은 위 입력칸 규칙) */
.lg-body a:focus-visible,
.lg-body button:focus-visible {
    outline: 2px solid var(--lg-accent);
    outline-offset: 2px;
}

/* 움직임 줄이기 설정을 켠 사용자에게는 전환·애니메이션을 끈다 */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}