/* ============================================================
   로그인 / 사용자 신청 / 아이디 찾기 / 비밀번호 찾기 — 4개 페이지 공용 CSS
   (layout/login_layout.html 을 통해 네 페이지 모두 이 파일을 불러온다)

   구성
   1) 외부 폰트
   2) 페이지 셸 — body / #authPage / .auth-card 흰 박스 / 로고 (네 페이지 공용)
   3) 로그인 페이지 전용 규칙
   4) 인증 폼 공용 컴포넌트 — 아이콘 인풋 / 체크박스 / 라디오 / 버튼 / 링크 / 에러메시지
      → login, join, findUserId, findUserPw 네 페이지 모두 적용 완료.
   ============================================================ */

/* 1) 외부 폰트 */
@import url(https://fonts.googleapis.com/css?family=Roboto:400,300);

/* 2) 페이지 셸 */
body {
    background: #f8f9fa;
    height: 100vh;
    font-family: 'SUIT', 'Noto Sans KR', 'Helvetica Neue', Arial, sans-serif;
    font-size: 13px;
}

/* 뷰포트 기준 절대 위치 대신 flex로 가운데 정렬한다 — 카드가 정상 흐름에
   남아있어야 #content의 overflow-auto가 넘치는 만큼 스크롤을 잡아준다.
   (절대 위치일 땐 부모 padding도 무시하고, 화면보다 카드가 커지면
   스크롤할 방법 자체가 없어서 로그인 자체가 불가능해지는 경우가 있었다.)
   join/findUserId/findUserPw로 옮길 때도 각 페이지의 바깥 컨테이너에
   이 id(또는 이 규칙)를 그대로 걸어주면 된다. */
#authPage {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: 24px 16px;
}

/* 네 페이지가 공유하는 흰 박스 — 안쪽 레이아웃은 페이지마다 자유롭게 구성하고,
   이 박스 자체의 스타일(폭/배경/모서리)만 통일한다. */
.auth-card {
    max-width: 560px;
    width: 100%;
    background: #ffffff;
    border-radius: 10px;
}

.auth-card .logo {
    text-align: center;
    vertical-align: middle;
    padding: 36px 0;
}

.auth-card .logo div a img {
    height: 52px;
}

/* 3) 로그인 페이지 전용 — 폼 폭 제한 (다른 페이지는 각자 폼 id에 맞게 정한다) */
#loginForm {
    max-width: 360px;
    margin: 0 auto;
    padding-bottom: 40px;
}

/* ============================================================
   4) 인증 폼 공용 컴포넌트
   ============================================================ */

/* 제목 + 부제 — join, idFind처럼 로고 아래 안내문이 필요한 페이지가 공용으로 쓴다.
   로그인은 안 쓰므로 여기 있어도 영향 없다. */
.auth-card h2 {
    font-size: 17px;
    font-weight: 700;
    color: #20222a;
    margin: 14px 0 6px;
}

.auth-card .welcome {
    font-size: 12.5px;
    color: #767a86;
    line-height: 1.6;
    margin-bottom: 26px;
}

/* 아이콘 배지 + 인풋 필드 */
.auth-card .auth-field {
    display: flex;
    align-items: center;
    gap: 9px;
    background: #f3f4f7;
    border: 1.5px solid transparent;
    border-radius: 8px;
    padding: 5px 10px 5px 5px;
    transition: background .15s ease, border-color .15s ease;
}

.auth-card .auth-field:focus-within {
    background: #ffffff;
    border-color: #2A2B6A;
    box-shadow: 0 0 0 4px #eceeff;
}

.auth-card .auth-field input {
    border: 0;
    outline: 0;
    background: transparent;
    font: inherit;
    width: 100%;
    color: #20222a;
    font-size: 13.5px;
}

.auth-card .auth-field input::placeholder {
    color: #98a0ac;
}

.auth-card .auth-icon-badge {
    width: 28px;
    height: 28px;
    border-radius: 6px;
    background: #e4e7f8;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
    transition: background .15s ease;
}

.auth-card .auth-field:focus-within .auth-icon-badge {
    background: #2A2B6A;
}

.auth-card .auth-icon-badge svg {
    width: 18px;
    height: 18px;
    color: #2A2B6A;
    display: block;
    transition: color .15s ease;
}

.auth-card .auth-field:focus-within .auth-icon-badge svg {
    color: #ffffff;
}

/* 체크박스 — 브라우저 기본 대신 입력창과 통일감 있는 각진 커스텀 스타일 */
.auth-card input[type=checkbox] {
    appearance: none;
    -webkit-appearance: none;
    margin: 0;
    flex: none;
    width: 18px;
    height: 18px;
    border: 1.5px solid #cdd0d8;
    border-radius: 5px;
    background: #ffffff;
    cursor: pointer;
    position: relative;
    transition: background .15s ease, border-color .15s ease;
}

.auth-card input[type=checkbox]:hover {
    border-color: #9fa4b5;
}

.auth-card input[type=checkbox]:checked {
    background: #4b4e82;
    border-color: #4b4e82;
}

.auth-card input[type=checkbox]:checked::after {
    content: "";
    position: absolute;
    left: 5.5px;
    top: 2px;
    width: 4.5px;
    height: 8.5px;
    border: solid #ffffff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.auth-card input[type=checkbox]:focus-visible {
    outline: 2px solid #9298d0;
    outline-offset: 2px;
}

.auth-card .auth-check {
    display: flex;
    align-items: center;
    gap: 7px;
}

/* 라디오 버튼 — 체크박스와 같은 톤의 커스텀 스타일 (join.html 성별 선택 등) */
.auth-card input[type=radio] {
    appearance: none;
    -webkit-appearance: none;
    margin: 0;
    flex: none;
    width: 18px;
    height: 18px;
    border: 1.5px solid #cdd0d8;
    border-radius: 50%;
    background: #ffffff;
    cursor: pointer;
    position: relative;
    transition: border-color .15s ease;
}

.auth-card input[type=radio]:hover {
    border-color: #9fa4b5;
}

.auth-card input[type=radio]:checked {
    border-color: #20223a;
}

.auth-card input[type=radio]:checked::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #20223a;
    transform: translate(-50%, -50%);
}

.auth-card input[type=radio]:focus-visible {
    outline: 2px solid #9298d0;
    outline-offset: 2px;
}

.auth-card .form-check-label {
    cursor: pointer;
}

/* 버튼 — 다크 리치 톤 + 보안(자물쇠) 아이콘 프리픽스 */
.auth-card .auth-btn {
    width: 100%;
    height: 46px;
    border: 0;
    border-radius: 8px;
    background: #20223a;
    color: #ffffff;
    font: inherit;
    font-size: .8rem;
    font-weight: 500;
    letter-spacing: .1em;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: background .15s ease, transform .1s ease;
}

.auth-card .auth-btn:hover {
    background: #2a2c47;
}

.auth-card .auth-btn:active {
    background: #171828;
    transform: translateY(1px);
}

.auth-card .auth-btn:focus-visible {
    outline: 2px solid #9298d0;
    outline-offset: 2px;
}

.auth-card .auth-btn:disabled {
    opacity: .5;
    cursor: not-allowed;
}

.auth-card .auth-btn svg {
    width: 18px;
    height: 18px;
    opacity: .9;
}

/* 폼 전체 간격 — 필드 사이는 촘촘하게, 버튼 앞은 더 여유 있게.
   display까지 이 규칙에서 직접 정의해서 마크업에 d-grid/flex-column 같은
   부트스트랩 유틸리티 클래스를 따로 붙이지 않아도 항상 gap이 적용되게 한다. */
.auth-card .auth-stack {
    display: flex;
    flex-direction: column;
    gap: 11px;
}

.auth-card .auth-btn-wrap {
    margin-top: 6px;
}

/* 자동 로그인 + 아이디·비밀번호 찾기 한 줄, 사용자 신청은 별도 줄.
   이 둘 사이의 간격은 .auth-stack의 좁은 간격과 별개로 프로토타입과
   같은 값(14px)을 쓰기 위해 하나로 묶어 자체 gap을 준다. */
.auth-card .auth-meta-group {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.auth-card .form-check {
    margin: 0;
    padding: 0;
}

.auth-card .auth-meta-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.auth-card .auth-links-end {
    display: flex;
    align-items: center;
    gap: 8px;
}

.auth-card .auth-signup-hint {
    text-align: center;
    font-size: 12.5px;
    color: #98a0ac;
}

/* 하단 "로그인 화면으로 이동" 등 되돌아가기 링크 한 줄 — join, idFind 공용 */
.auth-card .backlink {
    text-align: center;
    margin-top: 14px;
}

/* 단계(step) 진행률 바 — idFind(2단계), findUserPw(4단계)처럼 여러 단계로
   나뉜 페이지가 공용으로 쓴다. */
.auth-card .progress-label {
    display: flex;
    justify-content: space-between;
    font-size: 11.5px;
    color: #9298a6;
    margin-bottom: 6px;
}

.auth-card .progress-label b {
    color: #20223a;
}

.auth-card .progress-track {
    height: 5px;
    border-radius: 99px;
    background: #eceff2;
    overflow: hidden;
}

.auth-card .progress-bar {
    height: 100%;
    background: #20223a;
    border-radius: 99px;
    transition: width .25s ease;
}

/* 이전 단계로 되돌아가는 링크 */
.auth-card .back-row {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 16px;
    color: #767a86;
    cursor: pointer;
}

.auth-card .back-row svg {
    width: 18px;
    height: 18px;
}

.auth-card .back-row:hover {
    color: #2A2B6A;
}

/* 링크(사용자 신청 / 아이디·비밀번호 찾기) — 톤다운 남색으로 호버 통일 */
.auth-card a.link-secondary {
    color: #767a86;
    font-size: 12.5px;
    transition: color .15s ease;
}

.auth-card a.link-secondary:hover {
    color: #4b4e82;
}

/* 에러 메시지 — 아이디 찾기(#errorMessage), 로그인 폼 오류(#error-message),
   비밀번호 찾기의 여러 단계별 에러 박스(.error-box)가 공용으로 쓴다. */
.auth-card .error-box,
.auth-card #error-message,
.auth-card #errorMessage {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 11px 14px;
    border: 1px solid #f3caca;
    border-radius: 9px;
    background: #fdf3f3;
    color: #b3332f;
    font-size: 12.5px;
    line-height: 1.5;
}

.auth-card .error-box svg,
.auth-card #error-message svg,
.auth-card #errorMessage svg {
    width: 18px;
    height: 18px;
    flex: none;
}

/* 유효성 검사/안내 텍스트 색상 — join, findUserPw 공용
   (is-invalid/is-valid 등 토글 클래스 이름과 마크업은 각 페이지 JS 그대로 두고
   색·크기만 통일한다) */
.auth-card .text-danger {
    font-size: 11.5px;
    color: #c0392b !important;
}

.auth-card .text-primary {
    font-size: 11.5px;
    color: #2f8f5c !important;
}

.auth-card .text-secondary {
    color: #9298a6 !important;
}

.auth-card .password-feedback {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11.5px;
    line-height: 1.4;
    margin-top: 4px;
}

.auth-card .form-text {
    margin-top: 5px;
    font-size: 11.5px;
    color: #9298a6;
}