/* ==============================
   1. 기본 변수 (다크모드 대응)
   ============================== */
:root {
    --primary-color: #7db4e6;
    --bg-color: #fcfcfc;
    --text-main: #333333;
    --text-strong: #000000;
    --text-desc: #888888;
    --card-bg: #ffffff;
    --input-bg: #f2f4f6;
    --border-color: #e1e4e8;
}

body.dark-mode {
    --bg-color: #1a1a1a;
    --text-main: #e0e0e0;
    --text-strong: #ffffff;
    --text-desc: #a0a0a0;
    --card-bg: #2d2d2d;
    --input-bg: #333333;
    --border-color: #444444;
}

* { box-sizing: border-box; }

body {
    margin: 0; padding: 0;
    display: flex; flex-direction: column;
    min-height: 100vh;
    background-color: var(--bg-color);
    color: var(--text-main);
    font-family: 'Noto Sans KR', sans-serif;
    transition: background-color 0.3s, color 0.3s;
}

/* ==============================
   ★ [핵심] 헤더 강제 다크모드 적용 (JS 없이 해결)
   ============================== */
body.dark-mode .non-login-header .nav-menu a,
body.dark-mode .non-login-header .icon-btn {
    color: #ffffff !important;
}

/* ==============================
   2. 레이아웃
   ============================== */
.find-container {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    padding: 60px 20px;
}

.find-box {
    width: 100%;
    max-width: 500px;
    display: flex;
    flex-direction: column;
    /* align-items: center; -> 제거 (왼쪽 정렬이 자연스러움) */
}

/* 타이틀 */
.page-title {
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 25px;
    color: var(--text-strong);
}

/* 탭 (구직자/구인자) */
.tab-group {
    display: flex;
    background-color: var(--input-bg);
    border-radius: 25px;
    padding: 4px;
    margin-bottom: 15px;
}


.tab-btn {
    flex: 1;
    border: none;
    background: transparent;
    padding: 8px;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-desc);
    border-radius: 20px;
    cursor: pointer;
    transition: 0.2s;
}

.tab-btn.active {
    background-color: var(--primary-color);
    color: white;
    font-weight: 700;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

.find-desc {
    font-size: 13px;
    color: var(--text-desc);
    margin-bottom: 40px;
}

/* ==============================
   3. 입력 폼
   ============================== */
.form-box { width: 100%; }

.input-group {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
}

/* 라벨 (이름, 연락처, 이메일 등) */
.input-label {
    width: 80px;
    font-size: 15px;
    font-weight: 700;
    color: var(--text-strong);
    flex-shrink: 0;
}

/* 입력창 공통 */
.custom-input {
    flex: 1;
    padding: 12px 15px;
    background-color: var(--input-bg);
    border: none;
    border-radius: 6px;
    font-size: 14px;
    color: var(--text-main);
    outline: none;
    transition: 0.2s;
}

.custom-input:focus {
    box-shadow: 0 0 0 2px var(--primary-color) inset;
    background-color: var(--card-bg);
}

/* 버튼과 함께 있는 입력창 (이메일, 인증번호) */
.input-wrapper-row {
    flex: 1;
    display: flex;
    gap: 8px;
}

/* 인증/확인 버튼 */
.btn-verify {
    padding: 0 15px;
    background-color: var(--card-bg);
    border: 1px solid #ddd;
    border-radius: 6px;
    color: var(--text-main);
    font-size: 13px;
    cursor: pointer;
    white-space: nowrap;
    transition: 0.2s;
}

.btn-verify:hover {
    border-color: var(--primary-color);
    color: var(--primary-color);
    background-color: #f0f7ff;
}

/* 비활성화된 버튼 (전송중...) */
.btn-verify:disabled {
    background-color: #eee;
    color: #999;
    border-color: #ddd;
    cursor: not-allowed;
}

/* 다크모드 대응 */
body.dark-mode .btn-verify {
    background-color: #333;
    border-color: #555;
    color: #ccc;
}
body.dark-mode .btn-verify:hover {
    color: white;
    background-color: var(--primary-color);
    border-color: var(--primary-color);
}
body.dark-mode .btn-verify:disabled {
    background-color: #444;
    color: #666;
    border-color: #444;
}

/* ==============================
   4. 인증 성공 메시지 & 제출 버튼
   ============================== */
#auth-success-msg {
    margin-top: -10px; /* 위쪽 여백 줄이기 */
    margin-bottom: 20px;
}

.btn-submit {
    width: 100%;
    padding: 15px;
    background-color: var(--primary-color);
    color: white;
    border: none;
    border-radius: 6px;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    margin-top: 10px;
    transition: opacity 0.2s;
}

.btn-submit:hover { opacity: 0.9; }

/* ==============================
   6. [추가] 유효성 검사 에러 텍스트
   ============================== */
.error-msg {
    display: none; /* 평소에는 숨김 */
    font-size: 12px;
    color: #EA4335; /* 구글 에러 레드 컬러 */
    margin-top: -15px; /* input-group과의 간격 조절 */
    margin-bottom: 15px;
    padding-left: 85px; /* 라벨 너비(80px) + 여백(5px) 만큼 들여쓰기 */
    text-align: left;
    animation: shake 0.3s ease-in-out; /* 흔들림 효과 (선택사항) */
}

/* 에러 발생 시 입력창 테두리 빨갛게 (JS로 클래스 토글) */
.input-error {
    border: 1px solid #EA4335 !important;
    background-color: #fff8f8 !important;
}

@keyframes shake {
    0% { transform: translateX(0); }
    25% { transform: translateX(-5px); }
    50% { transform: translateX(5px); }
    75% { transform: translateX(-5px); }
    100% { transform: translateX(0); }
}