@charset "UTF-8";
/* =========================================================
   login.css — Login 화면 전용 스타일
   레거시 refs/01. 소스/JobStart2016/Styles/login.css 1:1 이식
   + 버튼 스타일 확정(golden 캡처 기준, C7 해소: 텍스트형)
   + CSS 결함 교정: 푸터 position:absolute 레거시 결함 → sticky 방식으로 교정
   ========================================================= */

@import url(https://fonts.googleapis.com/earlyaccess/nanumgothic.css);

/* ── 리셋 ── */
* { margin: 0; padding: 0; box-sizing: border-box; }

div, ol, a, h1, h2, h3, h4, h5, h6, form, span, iframe, dl, dt, dd {
    margin: 0; padding: 0;
}
img { border: none; vertical-align: middle; }
ul, ol { list-style: none; }
a { outline: 0; text-decoration: none; }
a:link, a:visited, a:active, a:hover { text-decoration: none; }

/* ── body ── */
body {
    margin: 0;
    font-family: 'Nanum Gothic', '맑은 고딕', 'Apple SD Gothic Neo', sans-serif;
    background: url('../img/login/login_bg.jpg') no-repeat center top;
    background-size: 100%;
    background-attachment: fixed;
    min-width: 1600px;
}

/* ── 전체 래퍼 ── */
#wrap {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

/* ── 헤더 ── */
.header {
    width: 100%;
    height: 58px;
    background-color: #333;
    text-align: center;
    vertical-align: middle;
    /* 레거시 .header 는 border 없음(배경 #333 단색) — 가짜 파란 라인 제거(1:1 정합) */
    flex-shrink: 0;
}
.header img {
    /* 전역 box-sizing:border-box(리셋) 무효화 — border-box면 height(34px)가
       padding-top(10px)을 잠식해 로고가 247×24로 세로 압축됨. content-box로 247×34 원본비 보존. */
    box-sizing: content-box;
    padding-top: 10px;
}

/* ── 콘텐츠 ── */
.content {
    margin: 0 auto;
    width: 1600px;
    flex: 1 0 auto;
}

/* clearfix */
.content::after {
    content: "";
    display: block;
    clear: both;
}

/* ── 슬로건 영역 ── */
.slogan {
    float: left;
    width: 454px;
    margin-left: 200px;
    padding-top: 240px;
    padding-bottom: 260px;
    /* C11 해결: slogan_txt.png 514px > 영역 454px → overflow:visible로 넘침 허용.
       우측 log_area가 float:left로 별도 배치되어 시각 충돌 없음(golden 캡처 확인). */
    overflow: visible;
}
.slogan img {
    width: 514px;
    height: 143px;
    display: block;
}

/* ── 로그인 영역 ── */
.log_area {
    float: left;
    width: 452px;
    margin-left: 6%;
    padding-top: 240px;
    padding-bottom: 260px;
}

/* 타이틀 이미지 (log_consult.png) */
.log_area .title {
    display: block;
    width: 452px;
    height: 42px;
}

/* ── 로그인폼 박스 ── */
.loginform {
    position: relative;
    width: 452px;
    height: 153px;
    padding-top: 24px;
    background: #fff;
    opacity: 0.8;
    border: 1px solid #c8d2d8;
}

/* ── 아이디 입력 ── */
.log_id_wrap {
    width: 266px;
    height: 36px;
    margin-left: 27px;
    border: 1px solid #d7d7d7;
    background-color: #eee;
}
.log_id {
    background: url('../img/login/log_id.png') 10px 6px no-repeat;
    background-color: #eee;
    height: 36px;
}
.log_id input {
    width: 180px;
    margin: 10px 0 0 50px;
    border: 0;
    background-color: #eee;
    font-size: 12px;
    font-family: 'Nanum Gothic', '맑은 고딕', sans-serif;
    outline: none;
    vertical-align: top;
}

/* ── 비번 입력 ── */
.log_pw_wrap {
    width: 266px;
    height: 36px;
    margin-left: 27px;
    margin-top: 8px;
    border: 1px solid #d7d7d7;
    background-color: #eee;
}
.log_pw {
    background: url('../img/login/log_pw.png') 10px 7px no-repeat;
    background-color: #eee;
    height: 36px;
}
.log_pw input {
    width: 180px;
    margin: 10px 0 0 50px;
    border: 0;
    background-color: #eee;
    font-size: 12px;
    font-family: 'Nanum Gothic', '맑은 고딕', sans-serif;
    outline: none;
    vertical-align: top;
}

/* ── 체크박스 행 ── */
.checkbox-row {
    padding-left: 25px;
    padding-top: 6px;
    display: flex;
    align-items: center;
    gap: 0;
}
.checkbox-row label {
    font-size: 11px;
    color: #737373;
    cursor: pointer;
    vertical-align: middle;
    margin-left: 3px;
}
.checkbox-row input[type="checkbox"] {
    cursor: pointer;
    vertical-align: middle;
}
.checkbox-row .cb-gap {
    display: inline-block;
    width: 12px;
}

/* ── 로그인 버튼 ── */
/* golden 캡처 확정(C7 해소): 텍스트형 버튼, 125×82px, 회색 테두리 박스.
   login.png 이미지 미사용. 레거시 CSS loginBtn 배경이미지 제거, 테두리+배경만 유지. */
.loginBtn {
    display: block;
    position: absolute;
    top: 24px;
    right: 8px;
    width: 125px;
    height: 82px;
    margin-right: 0;
    color: #333;
    font-size: 14px;
    font-family: 'Nanum Gothic', '맑은 고딕', sans-serif;
    line-height: 82px;
    text-align: center;
    background: #f0f0f0;
    border: 1px solid #b0b0b0;
    cursor: pointer;
    padding: 0;
}
.loginBtn:hover {
    background: #e0e0e0;
}
.loginBtn:active {
    background: #d0d0d0;
}
.loginBtn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* ── 로그인 실패횟수 ── */
.login-fail-msg {
    padding-left: 35px;
    padding-top: 5px;
    color: #FF0066;
    font-size: 12px;
}

/* ── 에러 메시지 (Spring Security ?error) ── */
.login-error-msg {
    padding-left: 27px;
    padding-top: 4px;
    color: #FF0066;
    font-size: 12px;
}

/* ── 로딩 오버레이 ── */
#loadingOverlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4);
    z-index: 9999;
    text-align: center;
}
#loadingOverlay .loading-box {
    display: inline-block;
    margin-top: 40vh;
    background: #fff;
    padding: 20px 40px;
    border: 1px solid #ccc;
    font-size: 16px;
    color: #333;
    font-family: 'Nanum Gothic', '맑은 고딕', sans-serif;
}

/* ── 푸터 ── */
/* 레거시 결함 교정: position:absolute + bottom:0 은 콘텐츠 짧을 때 겹침 발생.
   flex #wrap 구조로 하단 고정 처리. */
.footer {
    width: 100%;
    height: 87px;
    background: #333;
    flex-shrink: 0;
}
.copyright ul {
    margin-left: 25%;
}
.copyright li {
    margin-left: 10px;
    padding-top: 25px;
    padding-left: 30px;
    float: left;
    color: #fff;
    font-size: 12px;
    text-align: left;
    vertical-align: bottom;
    list-style: none;
    line-height: 1.6;
}