/* 로그인 페이지 전체 여백 */
.login-page-wrap {
    padding: 60px 0 100px 0;
    display: flex;
    justify-content: center;
}

/* 로그인 박스 컨테이너 */
.login-box-container {
    width: 100%;
    max-width: 480px;
    background: #fff;
    border: 1px solid #cbd5e1;
    border-radius: 12px;
    padding: 50px 40px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.03);
    box-sizing: border-box;
    margin: 0 auto;
}

/* 상단 타이틀 영역 */
.login-header {
    text-align: center;
    margin-bottom: 35px;
}
.company-logo-wrap {
    margin-bottom: 16px;
}
.login-header h2 {
    font-size: 28px;
    font-weight: 800;
    color: #111;
    margin-bottom: 8px;
}

/* 폼 입력 영역 */
.input-group { 
    display: flex; 
    flex-direction: column; 
    margin-bottom: 20px; 
}
.input-group input[type="text"],
.input-group input[type="password"] {
    width: 100%; 
    padding: 16px; 
    border: 1px solid #cbd5e1; 
    font-size: 15px; 
    outline: none; 
    transition: 0.2s; 
    box-sizing: border-box;
    color: #333;
}
.input-group input::placeholder { color: #94a3b8; }
.input-group input#userId { border-radius: 6px 6px 0 0; }
.input-group input#userPw { border-radius: 0 0 6px 6px; margin-top: -1px; }
.input-group input:focus { border-color: #0d4a96; position: relative; z-index: 1; }

/* 하단 유틸 (아이디저장, 찾기) */
.login-utils {
    display: flex; 
    justify-content: space-between; 
    align-items: center;
    margin-bottom: 30px; 
    font-size: 14px;
    color: #666;
}
.save-id { display: flex; align-items: center; gap: 8px; color: #444; cursor: pointer; }
.save-id input { width: 16px; height: 16px; accent-color: #0d4a96; cursor: pointer; }

.find-links a { color: #666; transition: 0.2s; text-decoration: none; cursor: pointer; }
.find-links a:hover { color: #0d4a96; text-decoration: underline; }
.find-links .divider { color: #cbd5e1; margin: 0 8px; font-size: 12px; }

/* 버튼 스타일 */
.btn-login-submit {
    width: 100%; 
    padding: 16px; 
    background: #0056b3; 
    color: #fff;
    border: none; 
    border-radius: 6px; 
    font-size: 17px; 
    font-weight: 700; 
    cursor: pointer;
    box-shadow: 0 4px 10px rgba(0,86,179,0.2); 
    transition: 0.2s; 
}
.btn-login-submit:hover { background: #004085; }

/* ==================== 팝업창(모달) 전용 스타일 ==================== */
.modal-overlay { 
    display: none; 
    position: fixed; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
    background: rgba(0,0,0,0.5); 
    z-index: 9999; 
    align-items: center; 
    justify-content: center; 
}
.modal-overlay.active { display: flex; }

.modal-content { 
    background: #fff; 
    width: 400px; 
    padding: 30px; 
    border-radius: 12px; 
    box-shadow: 0 10px 30px rgba(0,0,0,0.2); 
    position: relative; 
    box-sizing: border-box;
}
.modal-header { 
    font-size: 20px; 
    font-weight: 800; 
    margin-bottom: 20px; 
    color: #111; 
    border-bottom: 2px solid #111; 
    padding-bottom: 15px; 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
}
.modal-header h3 { margin: 0; font-size: 18px; }
.modal-header .close-btn { 
    background: none; 
    border: none; 
    font-size: 24px; 
    color: #999; 
    cursor: pointer; 
    transition: 0.2s; 
    padding: 0;
}
.modal-header .close-btn:hover { color: #111; }

.form-row { margin-bottom: 15px; }
.form-row label { display: block; font-size: 14px; font-weight: 700; color: #333; margin-bottom: 8px; }
.form-row input { 
    width: 100%; 
    padding: 14px; 
    border: 1px solid #cbd5e1; 
    border-radius: 6px; 
    font-size: 14px; 
    box-sizing: border-box; 
    outline: none; 
}
.form-row input:focus { border-color: #0d4a96; }

.btn-modal { 
    width: 100%; 
    padding: 15px; 
    background: #0056b3; 
    color: #fff; 
    border: none; 
    border-radius: 6px; 
    font-size: 15px; 
    font-weight: 700; 
    cursor: pointer; 
    margin-top: 10px; 
}
.btn-modal:hover { background: #004085; }

.result-box { 
    margin-top: 15px; 
    padding: 15px; 
    background: #f1f5f9; 
    border-radius: 6px; 
    text-align: center; 
    font-size: 15px; 
    font-weight: 700; 
    color: #0d4a96; 
    display: none; 
}

/* ==================== 모바일 반응형 ==================== */
@media (max-width: 768px) {
    .login-page-wrap { padding: 30px 16px; }
    .login-box-container { padding: 30px 20px; border: none; box-shadow: none; }
    .modal-content { width: 90%; padding: 20px; }
    .login-utils { flex-direction: column; gap: 15px; align-items: center; font-size: 13px; }
    .find-links { display: flex; flex-wrap: wrap; justify-content: center; }
}