@charset "UTF-8";

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* 로그인 페이지 전용 body */
body.login-page {
    font-family: "Noto Sans KR", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
    min-height: 100vh;
    background:
        radial-gradient(circle at 10% 0%, #e0f2fe 0%, transparent 55%),
        radial-gradient(circle at 90% 0%, #fef3c7 0%, transparent 60%),
        linear-gradient(to bottom, #eff6ff 0%, #e5e7eb 70%, #e5e7eb 100%);
    color: #111827;

    /* 세로 레이아웃: 헤더 – 메인 – 푸터 */
    display: flex;
    flex-direction: column;

    padding-top: 76px; /* 헤더 높이만큼 */
}

.login-main {
    flex: 1; /* 헤더/푸터 사이 남는 공간 꽉 채움 */
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* 블러 배경 */
.login-bg {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 10% 0%, #e0f2fe 0%, transparent 55%),
        radial-gradient(circle at 90% 0%, #fef3c7 0%, transparent 60%),
        linear-gradient(to bottom, #eff6ff 0%, #e5e7eb 70%, #e5e7eb 100%);
    opacity: 0.9;
    z-index: 0;
}

.login-wrap {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 420px;
    padding: 24px 12px 32px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* 카드 */
.login-card {
    width: 100%;
    background: #ffffff;
    border-radius: 18px;
    padding: 30px 28px 24px;
    box-shadow:
        0 18px 35px rgba(148, 163, 184, 0.5),
        0 0 0 1px rgba(255, 255, 255, 0.6);
}

/* 로그인 카드 안의 로고 (헤더랑 이름 다름!!) */
.login-header {
    text-align: center;
    margin-bottom: 22px;
}

.login-logo-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 999px;
    background: linear-gradient(135deg, #6366f1, #f97316);
    color: #fff;
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 8px;
    box-shadow: 0 0 20px rgba(129, 140, 248, 0.6);
}

.login-logo-text {
    font-size: 18px;
    font-weight: 700;
    letter-spacing: 0.18em;
    color: #111827;
    margin-bottom: 4px;
}

.login-subtitle {
    font-size: 13px;
    color: #6b7280;
}

/* 폼 */
.login-form {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.field {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.field label {
    font-size: 13px;
    color: #4b5563;
}

.field input {
    border-radius: 10px;
    border: 1px solid #d1d5db;
    background: #f9fafb;
    padding: 9px 11px;
    font-size: 14px;
    color: #111827;
    outline: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

.field input::placeholder {
    color: #9ca3af;
}

.field input:focus {
    border-color: #6366f1;
    box-shadow:
        0 0 0 1px rgba(99,102,241,0.2),
        0 0 18px rgba(129,140,248,0.25);
    background: #ffffff;
}

/* 에러 메시지 */
.error-msg {
    font-size: 12px;
    color: #b91c1c;
    background: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: 8px;
    padding: 7px 9px;
    margin-top: 2px;
}

/* 로그인 submit 버튼 – 이름도 header랑 다르게 */
.login-submit-btn {
    margin-top: 4px;
    width: 100%;
    border: none;
    border-radius: 999px;
    padding: 10px 14px;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.08em;
    cursor: pointer;
    background: linear-gradient(135deg, #6366f1, #f97316);
    color: #fff;
    box-shadow:
        0 10px 18px rgba(148,163,184,0.7),
        0 0 16px rgba(129,140,248,0.6);
    transition: transform 0.08s ease, box-shadow 0.08s ease, filter 0.08s ease;
}

.login-submit-btn:hover {
    filter: brightness(1.05);
}

.login-submit-btn:active {
    transform: translateY(1px);
}

/* 링크들 */
.login-extra {
    margin-top: 10px;
    text-align: center;
    font-size: 12px;
    color: #9ca3af;
}

.login-extra .link {
    color: #6366f1;
    text-decoration: none;
    font-weight: 500;
}

.login-extra .link:hover {
    text-decoration: underline;
}

.login-extra .divider {
    margin: 0 6px;
    color: #d1d5db;
}

/* 푸터 */
.login-footer {
    margin-top: 14px;
    font-size: 11px;
    color: #9ca3af;
    text-align: center;
}

/* 소셜 로그인 */
.social-login {
    margin-top: 18px;
    text-align: center;
}

.social-title {
    font-size: 12px;
    color: #9ca3af;
}

/* 아이콘 버튼 묶음 */
.social-buttons {
    margin-top: 10px;
    display: flex;
    justify-content: center;
    gap: 10px;
}

/* 공통 아이콘 버튼 */
.social-btn {
    width: 40px;
    height: 40px;
    border-radius: 999px;
    border: 1px solid #e5e7eb;
    background: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 6px 14px rgba(148,163,184,0.4);
    transition: transform 0.08s ease, box-shadow 0.08s ease, filter 0.08s ease;
}

.social-btn:hover {
    filter: brightness(1.03);
    transform: translateY(-1px);
}

.social-btn img {
    width: 20px;
    height: 20px;
}

/* 구글: 흰 배경 유지, 로고만 */
.social-btn.google {
    background: #ffffff;
}

/* 네이버: 초록 원 */
.social-btn.naver {
    background: #03c75a;
    border-color: #03c75a;
    color: #ffffff;
}

.social-btn.naver .naver-text {
    font-weight: 800;
    font-size: 18px;
    line-height: 1;
}

.second-method-tabs {
    display: flex;
    gap: 8px;
    margin-bottom: 14px;
}

.second-method-option {
    flex: 1;
    cursor: pointer;
}

/* 라디오 숨기기 */
.second-method-option input[type="radio"] {
    display: none;
}

/* 탭 비주얼 */
.second-method-option span {
    display: block;
    text-align: center;
    padding: 8px 0;
    border-radius: 999px;
    border: 1px solid #d1d5db;
    background: #f9fafb;
    font-size: 13px;
    color: #4b5563;
    transition:
        border-color 0.15s ease,
        box-shadow 0.15s ease,
        background 0.15s ease,
        color 0.15s ease;
}

/* 선택된 탭 */
.second-method-option input[type="radio"]:checked + span {
    border-color: #6366f1;
    background: #eef2ff;
    color: #111827;
    box-shadow:
        0 0 0 1px rgba(99,102,241,0.18),
        0 0 14px rgba(129,140,248,0.30);
}

/* 질문/이메일 텍스트 영역 */
.second-question,
.second-email {
    padding: 9px 12px;
    border-radius: 11px;
    background: #f3f4f6;
    border: 1px solid #e5e7eb;
    font-size: 13px;
    color: #374151;
}

/* 모달 전체 배경 (살짝 어둡게만) */
.second-modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.45); /* 살짝 어두운 오버레이 */
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2000;
}

/* 모달 카드 (로그인 카드랑 비슷하게 밝은 톤) */
.second-modal {
    background: #ffffff;                /* 흰색 카드 */
    border-radius: 18px;
    padding: 20px 24px;
    width: 420px;
    max-width: 90vw;
    box-shadow:
        0 18px 40px rgba(15, 23, 42, 0.25),
        0 0 0 1px rgba(209, 213, 219, 0.8);   /* 연한 테두리 */
}

/* 모달 안 헤더 살짝 조정 (로그인 카드랑 느낌 맞추기) */
.second-modal .login-header {
    margin-bottom: 16px;
}

.second-modal .login-logo-text {
    font-size: 18px;
    color: #111827;
}

.second-modal .login-subtitle {
    font-size: 13px;
    color: #6b7280;
}

/* 질문/이메일 패널 간 여백 */
.second-panel {
    margin-top: 10px;
}

/* 모달 안 에러/정보 글자 살짝만 줄이기 */
.second-modal .error-msg {
    margin-top: 8px;
    font-size: 12px;
}

.second-modal .info-msg {
    margin-top: 8px;
    font-size: 12px;
}

.modal-close-btn {
    position: absolute;
    top: 14px;
    right: 14px;
    font-size: 18px;
    font-weight: 600;
    background: none;
    border: none;
    cursor: pointer;
    color: #374151;
    opacity: 0.75;
    transition: opacity .15s ease, transform .15s ease;
}

.modal-close-btn:hover {
    opacity: 1;
    transform: scale(1.1);
}

.second-modal {
    position: relative; /* 버튼 위치 기준 */
}

.global-alert {
    position: fixed;
    top: 50%;                     /* 화면 정중앙 위치 */
    left: 50%;
    transform: translate(-50%, -50%); /* 정확한 중앙 정렬 */

    background: rgba(0,0,0,0.82);  /* 반투명 블랙 */
    color: #fff;
    padding: 18px 28px;
    font-size: 15px;
    font-weight: 500;
    border-radius: 10px;
    text-align: center;
    z-index: 9999;

    opacity: 1;
    animation: fadeOut 4s ease forwards; /* 4초 후 자동 사라짐 */
    box-shadow: 0 10px 35px rgba(0,0,0,0.3);
}

/* 사라질 때 */
.global-alert.hide {
    opacity: 0;
    transform: translateY(-8px);
}

/* 🔹 전체 화면 덮는 반투명 배경 */
.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;

    opacity: 1;
    transition: opacity 0.4s ease;
}

/* 🔹 숨김 상태 */
.modal-overlay.hide {
    opacity: 0;
    pointer-events: none;
}

/* 🔹 가운데 흰색 박스 */
.modal-box {
    background: #ffffff;
    padding: 20px 28px;
    border-radius: 10px;
    min-width: 260px;
    max-width: 360px;
    text-align: center;
    box-shadow: 0 10px 30px rgba(0,0,0,0.2);
    font-size: 14px;
    color: #333;
}

/* 🔥 페이드 아웃 효과 */
@keyframes fadeOut {
    0% { opacity: 0; transform: translate(-50%, -55%); } /* 부드럽게 등장 */
    10% { opacity: 1; transform: translate(-50%, -50%); }
    80% { opacity: 1; }
    100% { opacity: 0; transform: translate(-50%, -45%); } /* 위로 사라지듯 */
}


/* 모바일 여백 */
@media (max-width: 480px) {
    .login-card {
        padding: 24px 18px 22px;
    }
}