/* ============================================================
   사용자 신청(join) 페이지 전용 스타일
   공용 셸(#authPage, .auth-card 흰 박스, 체크박스/라디오/버튼)은
   common/login.css에서 가져오고, 여기서는 이 페이지만의 폼 레이아웃
   (좌측 라벨 + 섹션 구분)과 유효성 검사 피드백 색만 추가로 정의한다.
   ============================================================ */

/* 필드가 9개라 로그인(560px)보다 카드 폭을 조금 더 넓게 쓴다.
   로그인은 #loginForm이 카드보다 좁게 중앙정렬돼서 카드 자체엔 패딩이
   없어도 됐지만, 이 페이지는 폼이 카드 폭을 꽉 채우니 패딩이 꼭 필요하다. */
.auth-card {
    max-width: 600px;
    padding: 44px 48px 40px;
}

.auth-card .brand {
    margin-bottom: 4px;
}

.auth-card .brand img {
    display: block;
    max-width: 100%;
    height: auto;
}
/* h2 / .welcome(제목·부제) 스타일은 login.css의 공용 컴포넌트로 옮겼다 —
   join·idFind가 같은 타이포그래피를 쓰므로 중복 대신 거기서 하나로 관리한다. */

/* 섹션 구분 — 계정 정보 / 개인 정보 / 소속 정보 */
.auth-card .section-head {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .1em;
    color: #9298a6;
    text-transform: uppercase;
    margin: 22px 0 12px;
}

.auth-card .section-head:first-child {
    margin-top: 0;
}

.auth-card .section-divider {
    height: 1px;
    background: #eef0f3;
    margin: 22px 0 0;
}

/* 라벨-왼쪽 + 입력-오른쪽 행 */
.auth-card .j-row {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 16px;
}

.auth-card .j-row .j-lbl {
    flex: 0 0 92px;
    padding-top: 9px;
    font-size: 12.5px;
    font-weight: 600;
    color: #3d4150;
}

.auth-card .j-row .j-fld {
    flex: 1;
    min-width: 0;
}

.auth-card .j-box {
    width: 100%;
    border: 1.3px solid #dfe1e6;
    border-radius: 7px;
    padding: 9px 12px;
    font-size: 13px;
    color: #20222a;
    background: #ffffff;
    font-family: inherit;
    transition: border-color .15s ease, box-shadow .15s ease;
}

.auth-card .j-box::placeholder {
    color: #a3a8b3;
}

.auth-card .j-box:focus {
    outline: 0;
    border-color: #2A2B6A;
    box-shadow: 0 0 0 3px #eceeff;
}

.auth-card .j-box.is-invalid {
    border-color: #c0392b;
}

.auth-card .j-box.is-valid {
    border-color: #2f8f5c;
}

.auth-card .j-radios {
    display: flex;
    gap: 16px;
    padding-top: 9px;
}

.auth-card .j-radios label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: #3d4150;
    cursor: pointer;
}

/* 유효성 검사 피드백 — join.js가 토글하는 클래스 이름(is-invalid/is-valid/
   text-secondary/text-danger/text-primary)과 마크업 구조는 그대로 두고,
   색·크기·간격만 이 페이지 톤에 맞춘다. */
.auth-card .invalid-feedback {
    display: none;
    margin-top: 5px;
    font-size: 11.5px;
    color: #c0392b;
}

.auth-card .is-invalid ~ .invalid-feedback {
    display: block;
}

.auth-card .valid-feedback {
    display: none;
    margin-top: 5px;
    font-size: 11.5px;
    color: #2f8f5c;
}

.auth-card .is-valid ~ .valid-feedback {
    display: block;
}
/* .text-danger / .text-primary / .text-secondary / .password-feedback / .form-text
   색상·레이아웃은 findUserPw도 같이 쓰게 되면서 login.css 공용 컴포넌트로 옮겼다. */

/* 모달 CSS */
.modal-title-custom {
    font-weight: bold;
    color: #2a2b6b;
}