@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@latest/dist/web/static/pretendard.css");

/* =========================================================
   로그인 / 비밀번호 화면 모던 시안 (modern-auth.css)
   - 기능/마크업 변경 없이 룩만 개선 (이 파일은 해당 페이지에만 링크됨)
   ========================================================= */

body.gray-bg {
    font-family: 'Pretendard', 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif !important;
    min-height: 100vh;
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #eef2ff 0%, #f5f8fc 45%, #e9eff7 100%) !important;
    color: #1f2933;
    padding: 24px 24px 70px;
}

/* 상단 타이틀 영역 (로그인 화면) */
body.gray-bg h1.logo-name { display: none; }
body.gray-bg h3 {
    font-weight: 700;
    font-size: 19px;
    color: #334155;
    letter-spacing: -0.4px;
    margin: 0 0 2px;
}

/* 카드 래퍼 공통 (로그인/비번찾기 너비 동일 = 400px) */
.middle-box, .loginscreen.middle-box, .passwordBox {
    width: 100% !important;
    max-width: 400px !important;
    margin: 16px auto 0 !important;
    padding: 0 !important;
    position: static !important;
    float: none !important;
}
/* 비번찾기/변경 페이지: form이 flex자식이라 줄어드는 것 방지 → 400 고정 */
body.gray-bg > form {
    width: 100% !important;
    max-width: 400px !important;
    margin: 0 auto !important;
}
.passwordBox .row { margin-left: 0; margin-right: 0; }
.passwordBox [class*="col-"] { padding-left: 0; padding-right: 0; }

/* 실제 카드 (흰 박스) */
.middle-box > div,
.passwordBox .ibox-content {
    background: #ffffff;
    border: 1px solid #eceff4;
    border-radius: 16px;
    box-shadow: 0 14px 34px rgba(36,50,84,0.10), 0 2px 6px rgba(36,50,84,0.05);
    padding: 32px 28px !important;
}

/* 카드 제목/설명 */
.passwordBox h2.font-bold {
    font-weight: 700;
    font-size: 22px;
    color: #1f2933;
    margin: 0 0 8px;
    letter-spacing: -0.5px;
}
.middle-box p, .passwordBox p,
#divNotiPassword, #divFindPasword > p {
    color: #8a94a6;
    font-size: 13px;
    line-height: 1.6;
}

/* 라벨 */
body.gray-bg label {
    font-weight: 600;
    font-size: 13px;
    color: #48515f;
    margin-bottom: 6px;
}

/* 입력창 */
body.gray-bg .form-control {
    height: 48px;
    border: 1px solid #dbe1ea;
    border-radius: 10px;
    padding: 10px 14px;
    font-size: 14px;
    color: #1f2933;
    background: #fbfcfe;
    box-shadow: none;
    transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
body.gray-bg .form-control:focus {
    border-color: #4263eb;
    background: #ffffff;
    box-shadow: 0 0 0 3px rgba(66,99,235,0.16);
}
body.gray-bg .form-control::-webkit-input-placeholder { color: #aeb6c4; }
body.gray-bg .form-control::placeholder { color: #aeb6c4; }
body.gray-bg .form-control[disabled] { background: #f1f3f7; color: #98a1b1; }

body.gray-bg .form-group { margin-bottom: 16px; }

/* 기본(파랑) 버튼 */
body.gray-bg .btn-primary {
    height: 48px;
    background: #4263eb;
    border: none;
    border-radius: 10px;
    font-weight: 600;
    font-size: 15px;
    letter-spacing: -0.2px;
    box-shadow: 0 6px 16px rgba(66,99,235,0.28);
    transition: background .15s ease, transform .05s ease, box-shadow .15s ease;
}
body.gray-bg .btn-primary:hover,
body.gray-bg .btn-primary:focus {
    background: #3550d4;
    box-shadow: 0 8px 20px rgba(66,99,235,0.34);
    color: #fff;
}
body.gray-bg .btn-primary:active { transform: translateY(1px); }

/* 링크 */
body.gray-bg a { color: #4263eb; text-decoration: none; }
body.gray-bg a:hover { color: #3550d4; }
.middle-box p.m-t a { color: #6b7587 !important; font-size: 13px; }
.middle-box p.m-t a:hover { color: #4263eb !important; }

/* 하단 시스템 문의 */
.middle-box small { color: #9aa3b2; line-height: 1.7; }

/* 아이디 저장 라벨 정렬 */
body.gray-bg .checkbox-inline { font-size: 13px; color: #6b7587; padding-left: 0; }

/* 브랜드 헤더 (로그인 상단) */
.auth-brand { text-align: center; margin-bottom: 4px; }
.auth-logo {
    width: 62px; height: 62px; margin: 0 auto 16px;
    border-radius: 18px;
    background: linear-gradient(135deg, #4263eb, #5b7cfa);
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 10px 24px rgba(66,99,235,0.35);
}
.auth-logo i { color: #fff; font-size: 28px; }
.auth-brand-title {
    font-weight: 800; font-size: 56px; letter-spacing: 5px;
    margin: 0; line-height: 1.1;
    background: linear-gradient(135deg, #3550d4, #5b7cfa);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: #3550d4;
}
.auth-brand-sub {
    margin: 9px 0 0; font-size: 13px; color: #8a94a6;
    letter-spacing: 0.3px; font-weight: 500;
}

/* 네이티브 체크박스 (아이디 저장) */
body.gray-bg .checkbox-inline input[type="checkbox"] {
    position: static !important;
    width: 16px; height: 16px; accent-color: #4263eb;
    margin: 0 6px 0 0 !important; vertical-align: -3px; cursor: pointer;
}

/* 임시비밀번호 발송 완료 안내 */
#divNotiPassword {
    background: #eef3ff; border: 1px solid #d6e0fb; border-radius: 10px;
    padding: 16px; color: #44506b; font-size: 13px; line-height: 1.7;
}

/* 하단 푸터 (공통) */
.auth-footer {
    position: fixed; left: 0; right: 0; bottom: 0;
    text-align: center; padding: 16px;
    font-size: 12px; color: #9aa3b2; letter-spacing: 0.2px;
}