/* =============================================================
   [통합 서브] 회원가입 & 로그인 (Auth) 완전체 디자인 시스템
============================================================= */

/* 1. 배경 울타리 및 정중앙 배치 틀 (누락되었던 핵심 뼈대 복원) */
.auth-section {
    background-color: var(--bg-light-gray); /* 메인에서 정의한 연회색 바탕 조화 */
    padding: 80px 0;
    min-height: calc(100vh - 180px);       /* 헤더/푸터를 제외한 화면 높이를 꽉 채우기 */
    display: flex;
    justify-content: center;
    align-items: center;
}

/* 2. 로그인 / 회원가입 하얀색 메인 팝업 상자 */
.auth-container {
    background-color: #ffffff;
    width: 100%;
    max-width: 520px; /* ◀ 추가 정보 입력창 확장 스펙에 맞춰 단정하게 고정 */
    padding: 50px 40px;
    border-radius: 16px;
    border: 1px solid #eef2f6;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.04);
}

/* 3. 상단 타이틀 및 설명 글 정렬 */
.auth-header {
    text-align: center;
    margin-bottom: 35px;
}

.auth-header h2 {
    font-size: var(--font-h2); /* 글로벌 변수 대제목 크기(2.5rem) 완벽 상속 */
    color: #111111;
    margin-bottom: 10px;
}

.auth-header p {
    font-size: 0.95rem;
    color: #666666;
}

/* 4. 개별 입력 필드 세로 배치 여백 */
.auth-form .form-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 20px;
    text-align: left; /* 글자 왼쪽 정렬 강제 고정 */
}

.auth-form label {
    font-size: 0.95rem;
    font-weight: 700;
    color: #333333;
    letter-spacing: var(--base-letter-spacing);
}

/* 5. [대통합] 일반 입력 필드 외형 및 테두리 칼정렬 (라디오 버튼은 철저히 배제) */
.auth-form input[type="text"],
.auth-form input[type="email"],
.auth-form input[type="password"],
.auth-form input[type="tel"],
.auth-form input[type="date"],
.auth-form select,
.auth-form textarea {
    width: 100% !important; /* 일반 입력창들만 가로로 꽉 차게 조율 */
    font-family: inherit !important;
    font-size: var(--font-body) !important;
    border: 1px solid #cbd5e1 !important; 
    border-radius: 8px !important;         
    color: #111111 !important;
    background-color: #ffffff !important;
    transition: all 0.2s ease-in-out !important;
}

/* 6. 한 줄 입력 필드와 드롭다운 높이 50px 통일 */
.auth-form input[type="text"],
.auth-form input[type="email"],
.auth-form input[type="password"],
.auth-form input[type="tel"],
.auth-form input[type="date"],
.auth-form select {
    height: 50px !important;
    padding: 0 16px !important;
}

/* 여러 줄 주소 입력창 여백 맞춤 */
.auth-form textarea {
    padding: 14px 16px !important;
    resize: none !important; 
}

/* 7. [대통합 포커스] 마우스 클릭 시 로열 블루 후광 일체화 */
.auth-form input:focus,
.auth-form select:focus,
.auth-form textarea:focus {
    outline: none !important;
    border-color: var(--primary-blue) !important; 
    box-shadow: 0 0 0 3px rgba(65, 105, 225, 0.15) !important; 
}

/* =============================================================
   🚨 [라디오 버튼 격리] 퍼짐 방지 및 아기자기한 18px 정원 고정
============================================================= */
.auth-form input[type="radio"] {
    width: 18px !important;  
    height: 18px !important; 
    margin: 0 !important;
    padding: 0 !important;
    cursor: pointer !important;
    accent-color: var(--primary-blue) !important;
}

.radio-group {
    display: flex !important;
    gap: 30px !important;
    padding: 8px 0 !important;
}

.radio-label {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    font-size: var(--font-body) !important;
    font-weight: var(--weight-medium) !important;
    color: #333333 !important;
    cursor: pointer !important;
}

/* =============================================================
   🎨 [데코 속성] 드롭다운 화살표, 분리선, 버튼, 안내 문구
============================================================= */
/* 🎯 [수정] select를 감싸는 울타리가 일반 인풋창과 똑같은 크기(가로 100% / 세로 50px)를 가지도록 고정 */
.select-wrapper {
    position: relative !important;
    width: 100% !important;
    height: 50px !important; /* ◀ 입력창과 똑같은 높이를 부여해 기준점을 단단히 잡습니다 */
    display: block !important;
}

.auth-form select {
    background-image: none !important; 
    width: 100% !important;
    height: 100% !important; /* ◀ 부모 울타리 크기만큼 꽉 차게 조율 */
    padding-right: 44px !important; 
    cursor: pointer !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
}

/* 🎯 [수정] 기준점이 단단해진 부모 상자 안에서 정중앙 우측 끝으로 강제 박제 */
.select-arrow {
    position: absolute !important;
    top: 50% !important;       /* ◀ 세로 정중앙 */
    right: 16px !important;     /* ◀ 우측 테두리 안쪽 16px 고정 */
    transform: translateY(-50%) !important; /* ◀ 미세 수직 정렬 오차 차단 */
    
    font-size: 1.1rem !important; 
    color: #64748b !important;    
    pointer-events: none !important; /* 화살표를 눌러도 드롭다운이 열리도록 클릭 관통 */
    z-index: 10 !important;
    line-height: 1 !important;  /* ◀ 줄바꿈 때문에 아래로 밀리는 현상 원천 차단 */
}

/* 포커스 효과는 동일 유지 */
.auth-form select:focus {
    outline: none !important;
    border-color: var(--primary-blue) !important; 
    box-shadow: 0 0 0 3px rgba(65, 105, 225, 0.15) !important; 
}



/* 필수 항목 빨간 별 */
.required-star {
    color: #ef4444 !important;
    margin-left: 2px;
}

/* 한 줄 분리선 */
.form-divider {
    position: relative;
    text-align: center;
    margin: 40px 0 30px 0;
}

.form-divider::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    height: 1px;
    background-color: #cbd5e1;
    z-index: 1;
}

.form-divider span {
    position: relative;
    z-index: 2;
    background-color: #ffffff;
    padding: 0 15px;
    font-size: 0.85rem;
    font-weight: 700;
    color: #64748b;
    letter-spacing: var(--base-letter-spacing);
}

/* 하단 가입 안내 문구 */
.form-notice-text {
    font-size: 0.88rem !important;
    color: #64748b !important;
    line-height: 1.5 !important;
    margin: 20px 0 10px 0;
    word-break: keep-all;
    text-align: left;
}

/* 버튼 및 하단 링크 제어 */
.form-button-box { margin-top: 30px; margin-bottom: 20px; }
.form-button-box .btn { width: 100% !important; }
.auth-footer-link { text-align: center; font-size: 0.9rem; color: #666666; }
.auth-footer-link a { color: var(--primary-blue); font-weight: 700; margin-left: 6px; text-decoration: underline; }
.auth-footer-link .bar { color: #cbd5e1; margin: 0 10px; }
.auth-footer-link a:hover { color: #2e52be; }

/* 조건부 상자 데코 */
.s2w-conditional-field { background-color: #f8fafc; padding: 15px; border-radius: 8px; border: 1px dashed #e2e8f0; margin-top: 5px; }

/* 회원가입 완료 안내 팝업 */
.signup-success-backdrop {
    position: fixed !important;
    inset: 0 !important;
    z-index: 2000 !important;
    display: grid !important;
    place-items: center !important;
    padding: 20px !important;
    background: rgba(20, 27, 55, 0.58) !important;
}

.signup-success-dialog {
    width: min(100%, 460px) !important;
    max-height: calc(100vh - 40px) !important;
    overflow-y: auto !important;
    padding: 32px 30px 28px !important;
    border-radius: 22px !important;
    background: #ffffff !important;
    box-shadow: 0 24px 70px rgba(20, 27, 55, 0.28) !important;
    text-align: center !important;
    animation: signup-success-in .2s ease-out both !important;
}

@keyframes signup-success-in {
    from { opacity: 0; transform: translateY(10px) scale(.97); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

.signup-success-icon {
    display: grid !important;
    place-items: center !important;
    width: 58px !important;
    height: 58px !important;
    margin: 0 auto 14px !important;
    border-radius: 50% !important;
    background: #eef2ff !important;
    color: #4d51f3 !important;
    font-size: 28px !important;
    font-weight: 800 !important;
}

.signup-success-kicker {
    margin: 0 0 7px !important;
    color: #e6815e !important;
    font-size: 13px !important;
    font-weight: 800 !important;
}

.signup-success-dialog h2 {
    margin: 0 0 12px !important;
    color: #20223b !important;
    font-size: 25px !important;
}

.signup-success-copy {
    margin: 0 0 20px !important;
    color: #62677b !important;
    font-size: 14px !important;
    line-height: 1.65 !important;
    word-break: keep-all !important;
}

.signup-success-steps {
    display: grid !important;
    gap: 10px !important;
    margin: 0 0 18px !important;
    padding: 0 !important;
    list-style: none !important;
    text-align: left !important;
}

.signup-success-steps li {
    display: flex !important;
    align-items: flex-start !important;
    gap: 12px !important;
    padding: 13px 14px !important;
    border: 1px solid #e4e7f2 !important;
    border-radius: 13px !important;
    background: #fafbff !important;
}

.signup-success-steps li > strong {
    display: grid !important;
    place-items: center !important;
    flex: 0 0 25px !important;
    height: 25px !important;
    border-radius: 50% !important;
    background: #4d51f3 !important;
    color: #ffffff !important;
    font-size: 12px !important;
}

.signup-success-steps span,
.signup-success-steps b,
.signup-success-steps small {
    display: block !important;
}

.signup-success-steps b { color: #25283d !important; font-size: 14px !important; }
.signup-success-steps small { margin-top: 3px !important; color: #777d90 !important; font-size: 12px !important; line-height: 1.45 !important; }
.signup-success-note { margin: 0 0 18px !important; color: #9a765f !important; font-size: 12px !important; }
.signup-main-link { display: block !important; width: 100% !important; text-align: center !important; }

/* 반응형 처리 */
@media (max-width: 900px) {
    .auth-container { padding: 40px 20px; }
    .signup-success-dialog { padding: 27px 20px 23px !important; }
}
.email-confirmed-card{max-width:620px!important;text-align:center}.email-confirmed-mark{display:grid;width:74px;height:74px;margin:0 auto 24px;place-items:center;border-radius:50%;background:linear-gradient(135deg,#0b857b,#63b8a0);color:#fff;font-size:36px;font-weight:800;box-shadow:0 14px 30px rgba(11,133,123,.22)}.email-confirmed-kicker{margin:0 0 12px!important;color:#0b857b!important;font-size:11px!important;font-weight:800;letter-spacing:.16em}.email-confirmed-card .auth-header p{line-height:1.8}.email-confirmed-card .form-button-box{margin-top:28px}.email-confirmed-card .btn{display:inline-flex;align-items:center;justify-content:center;text-decoration:none}
.signup-email-check{text-align:center}.signup-email-check h3{margin:0 0 12px;color:#173b42;font-size:26px}.signup-email-check>p{color:#5f7073;line-height:1.75}.signup-email-check ol{max-width:470px;margin:24px auto;padding:20px 24px 20px 44px;border-radius:16px;background:#f2f8f6;color:#4e6568;text-align:left;line-height:1.9}.signup-email-actions{display:grid;gap:14px;margin-top:24px}.signup-email-actions .btn{width:100%!important}.signup-email-actions>a{color:#0b857b;font-weight:700;text-underline-offset:4px}.auth-status{padding:13px 16px;border-radius:12px;background:#e7f6f0;color:#176b61!important;font-weight:700}