/* ============================================================
 * FILE: public/assets/css/auth.css
 * ── 배치 정보 ──────────────────────────────────────────────────
 *   서버: 웹서버 (macOS, 172.20.200.10)
 *   경로: /Users/lajeong/Documents/Site/public/assets/css/auth.css
 *   접근: 브라우저에서 직접 로드 — /assets/css/auth.css
 * ── 역할 ──────────────────────────────────────────────────────
 *   로그인/회원가입/비밀번호 재설정 페이지 전용 스타일.
 *   인증 폼 카드 레이아웃, 입력 필드, 에러 메시지.
 * ============================================================ */

/* ----------------------
   인증 섹션 레이아웃
   ---------------------- */
.auth-section {
    display        : flex;
    justify-content: center;
    align-items    : flex-start;
    padding        : 60px 16px 80px;
    min-height     : calc(100vh - 60px);
}

/* ----------------------
   카드
   ---------------------- */
.auth-card {
    width         : 100%;
    max-width     : 440px;
    background    : var(--color-surface);
    border        : 1px solid var(--color-border);
    border-radius : var(--radius-lg);
    padding       : 40px 36px;
    box-shadow    : var(--shadow-md);
}

.auth-card__header { margin-bottom: 28px; }

.auth-card__title {
    font-size   : 24px;
    font-weight : 700;
    color       : var(--color-text);
    margin-bottom: 6px;
}

.auth-card__sub {
    font-size : 14px;
    color     : var(--color-text-muted);
}

/* ----------------------
   폼 요소
   ---------------------- */
.auth-form { display: flex; flex-direction: column; gap: 18px; }

.form-group { display: flex; flex-direction: column; gap: 6px; }

.form-label {
    font-size  : 13px;
    font-weight: 600;
    color      : var(--color-text-muted);
    letter-spacing: .02em;
    text-transform: uppercase;
}

.form-input {
    width         : 100%;
    padding       : 12px 14px;
    background    : var(--color-bg);
    border        : 1.5px solid var(--color-border);
    border-radius : var(--radius-md);
    color         : var(--color-text);
    font-size     : 15px;
    font-family   : inherit;
    outline       : none;
    transition    : border-color .2s, box-shadow .2s;
}
.form-input::placeholder { color: #555; }
.form-input:focus {
    border-color: var(--color-primary);
    box-shadow  : 0 0 0 3px rgba(99,102,241,.18);
}

/* 비밀번호 입력 + 토글 버튼 묶음 */
.input-password-wrap { position: relative; }
.input-password-wrap .form-input { padding-right: 44px; }
.btn-pw-toggle {
    position   : absolute;
    right      : 12px;
    top        : 50%;
    transform  : translateY(-50%);
    background : none;
    border     : none;
    font-size  : 16px;
    color      : var(--color-text-muted);
    padding    : 4px;
    line-height: 1;
}
.btn-pw-toggle:hover { color: var(--color-text); }

/* 비밀번호 강도 바 */
.pw-strength-bar {
    height        : 4px;
    background    : var(--color-border);
    border-radius : 4px;
    margin-top    : 6px;
    overflow      : hidden;
}
.pw-strength-fill {
    height     : 100%;
    width      : 0;
    border-radius: 4px;
    transition : width .3s, background .3s;
}

/* 안내 텍스트 */
.form-hint {
    font-size : 12px;
    min-height: 18px;
    transition: color .2s;
}

/* 체크박스 행 */
.form-check {
    display    : flex;
    align-items: flex-start;
    gap        : 8px;
    font-size  : 13px;
    color      : var(--color-text-muted);
    cursor     : pointer;
    line-height: 1.5;
}
.form-check input[type="checkbox"] {
    margin-top  : 2px;
    width       : 16px;
    height      : 16px;
    accent-color: var(--color-primary);
    flex-shrink : 0;
}

/* 가로 정렬 행 */
.form-row { display: flex; align-items: center; }
.form-row--between { justify-content: space-between; }

/* 필수 표시 */
.required { color: var(--color-error); margin-left: 2px; }

/* 하단 전환 링크 */
.auth-switch {
    margin-top : 20px;
    text-align : center;
    font-size  : 14px;
    color      : var(--color-text-muted);
}

/* ----------------------
   반응형
   ---------------------- */
@media (max-width: 480px) {
    .auth-card {
        padding       : 28px 20px;
        border-radius : var(--radius-md);
        border        : none;
        box-shadow    : none;
        background    : transparent;
    }
    .auth-section { padding-top: 24px; }
}