/* ============================================================================
 * File    : auth.css
 * Desc    : 로그인, 회원가입 모달/페이지 및 카드 뒤집기(Flip) 효과
 * ============================================================================ */

.auth-section {
    background: #0a0a0a;
}

#auth.auth-section.active {
    display: flex !important;
    flex-direction: column;
    justify-content: center !important;
    align-items: center !important;
    min-height: 0 !important;
    height: calc(100vh - 65px) !important;
    padding: 0 !important;
    margin: 0 !important;
    box-sizing: border-box;
}

.auth-wrapper {
    position: relative;
    width: 100%;
    max-width: 700px;
    height: auto;
    margin: 0 auto !important;
}

.auth-bg-decor {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 0;
}

.circle {
    position: absolute !important;
    border-radius: 50% !important;
    filter: blur(80px) !important;
}

.circle-1 {
    width: 250px; height: 250px; background: rgba(0, 183, 165, 0.25); top: -20px; left: -20px;
}
.circle-2 {
    width: 300px; height: 300px; background: rgba(251, 189, 8, 0.15); bottom: -20px; right: -20px;
}

.auth-container {
    margin: 0 auto;
    position: relative;
    width: 100%;
    max-width: 600px;
    height: 500px;
    perspective: 1500px;
    z-index: 1;
}

.auth-box {
    width: 100%; max-width: 600px; margin: 0 auto;
    background: rgba(25, 25, 30, 0.8);
    border: 1px solid rgba(0, 183, 165, 0.1); border-radius: 15px;
    height: auto !important; padding: 28px 30px;
    display: flex; flex-direction: column; align-items: center; box-sizing: border-box;
}

.auth-footer {
    width: 100%; margin-top: 16px; padding-top: 14px;
    border-top: 1px solid rgba(255, 255, 255, 0.05); text-align: center;
}

.primary-text {
    color: var(--primary); font-weight: 600; cursor: pointer; margin-left: 8px; text-decoration: underline; transition: 0.3s;
}
.primary-text:hover { color: #fff; text-shadow: 0 0 10px rgba(0, 183, 165, 0.6); }

.auth-switch { font-size: 0.9rem; color: #888; margin: 0; margin-top: 10px; }

.warm-text {
    color: var(--primary); font-weight: 600; cursor: pointer; margin-left: 8px; text-decoration: underline; transition: 0.3s;
}
.warm-text:hover { color: #fff; text-shadow: 0 0 8px rgba(0, 183, 165, 0.5); }

/* 로그인 & 회원가입 박스 및 애니메이션 */
.login-box {
    position: absolute; top: 0; left: 0; width: 100%;
    border: 1px solid rgba(0, 183, 165, 0.4); box-shadow: 0 0 20px rgba(0, 183, 165, 0.08);
    z-index: 2; backface-visibility: hidden; transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.register-box {
    position: absolute; top: 0; left: 0; width: 100%;
    border: 1px solid rgba(251, 189, 8, 0.2); transform: rotateY(180deg); opacity: 0;
    z-index: 1; backface-visibility: hidden; transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.auth-container.signup-mode .login-box {
    transform: rotateY(-180deg); opacity: 0; z-index: 1;
}

.auth-container.signup-mode .register-box {
    transform: rotateY(0deg); opacity: 1; z-index: 2;
}

/* 폼 요소 디자인 */
.auth-content { width: 100%; max-width: 400px; margin: 0 auto !important; text-align: center; }
.auth-icon { font-size: 2rem; margin-bottom: 10px; color: var(--primary); }
.auth-guide { font-size: 0.85rem; line-height: 1.5; margin-bottom: 10px; color: #aaa; }
.icon-warm { color: #fbbd08 !important; }
.auth-title { font-size: 1.7rem; font-weight: 700; color: white; margin-bottom: 20px; }

.input-group { position: relative; width: 100%; margin-bottom: 14px; }
.input-group input {
    box-sizing: border-box; width: 100%; padding: 12px 15px 12px 50px;
    background: rgba(20, 20, 20, 0.7); border: 1px solid #333; border-radius: 10px;
    font-size: 0.95rem; color: white; transition: 0.3s;
}
.input-group input:focus { border-color: var(--primary); box-shadow: 0 0 10px rgba(0, 183, 165, 0.3); outline: none; }
.group-warm input:focus { border-color: #fbbd08; box-shadow: 0 0 10px rgba(251, 189, 8, 0.2); }
.input-icon { position: absolute; left: 18px; top: 50%; transform: translateY(-50%); font-size: 1rem; color: #666; }

/* 버튼 전용 (인증) */
.btn-submit {
    width: 100%; padding: 12px; background: linear-gradient(135deg, var(--primary), #008a79);
    border: none; border-radius: 10px; font-size: 1rem; font-weight: 600; color: white;
    cursor: pointer; transition: 0.4s; margin-top: 8px;
}
.btn-submit:hover {
    background-color: #33CC99; color: #000; box-shadow: 0 0 20px rgba(0, 194, 203, 0.4);
}

.btn-submit:disabled { opacity: 0.6; cursor: wait; }

.btn-warm { background: linear-gradient(135deg, #fbbd08, #e0a800); }
.btn-warm:hover {
    background: linear-gradient(135deg, #e0a800, #c69500) !important; box-shadow: 0 0 15px rgba(251, 189, 8, 0.4) !important;
}