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

.auth-section {
    justify-content: center !important;
    align-items: center !important;
    width: 100%;
    min-height: 600px;
    padding: 80px 0;
    margin: 0 auto !important;
    background: #0a0a0a;
}

.auth-section.active {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
}

.auth-wrapper {
    position: relative;
    width: 100%;
    max-width: 700px;
    height: 450px;
    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(20, 184, 166, 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 {
    position: relative;
    width: 100%;
    max-width: 600px;
    margin: 40px auto;
    min-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, 255, 255, 0.1); border-radius: 15px;
    height: auto !important; padding: 40px 30px;
    display: flex; flex-direction: column; align-items: center; box-sizing: border-box;
}

.auth-footer {
    width: 100%; margin-top: 25px; padding-top: 20px;
    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, 255, 255, 0.6); }

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

.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, 255, 255, 0.5); }

/* 로그인 & 회원가입 박스 및 애니메이션 */
.login-box {
    position: absolute; top: 0; left: 0; width: 100%;
    border: 1px solid rgba(20, 184, 166, 0.4); box-shadow: 0 0 20px rgba(20, 184, 166, 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.flipped .login-box,
.auth-container.signup-mode .login-box {
    transform: rotateY(-180deg); opacity: 0; z-index: 1;
}

.auth-container.flipped .register-box,
.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: 2.5rem; margin-bottom: 15px; color: var(--primary); }
.auth-guide { font-size: 0.9rem; line-height: 1.5; margin-bottom: 15px; color: #aaa; }
.icon-warm { color: #fbbd08 !important; }
.auth-title { font-size: 2rem; font-weight: 700; color: white; margin-bottom: 30px; }

.input-group { position: relative; width: 100%; margin-bottom: 20px; }
.input-group input {
    box-sizing: border-box; width: 100%; padding: 15px 15px 15px 55px;
    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(20, 184, 166, 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: 20px; top: 50%; transform: translateY(-50%); font-size: 1.1rem; color: #666; }

/* 버튼 전용 (인증) */
.btn-submit {
    width: 100%; padding: 15px; background: linear-gradient(135deg, var(--primary), #109688);
    border: none; border-radius: 10px; font-size: 1rem; font-weight: 600; color: white;
    cursor: pointer; transition: 0.4s; margin-top: 10px;
}
/* 구형 btn-submit 보존 속성 통합 (호버) */
.btn-submit:hover {
    background-color: #00e0eb; color: #000; box-shadow: 0 0 20px rgba(0, 194, 203, 0.4);
}

.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;
}