/* 1. 기본 레이아웃 설정 */
.auth-page {
    display: flex;
    justify-content: center; /* 가로 중앙 */
    align-items: center;     /* 세로 중앙 */
    min-height: 100vh;
    width: 100vw;
    /*background: linear-gradient(135deg, #f5f7fa 0%, #e4e7eb 100%);*/
    /*background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);*/
    margin: 0;
}

/* 2. 중앙 카드 컨테이너 */
.auth-container {
    display: flex; /* 내부 좌우 분할을 위해 flex 유지 */
    width: 900px;  /* 카드의 전체 너비 (조절 가능) */
    height: 600px; /* 카드의 전체 높이 (조절 가능) */
    background-color: #ffffff;
    border-radius: 20px; /* 모서리를 둥글게 */
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.1); /* 부드러운 그림자 */
    overflow: hidden; /* 자식 요소가 radius 밖으로 나가지 않게 */
}

/* 3. 왼쪽 슬라이더 영역 */
.auth-visual-side {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 2.5rem 0;
    flex: 1;
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); /* 배경색 변경 가능 */
    /*background: linear-gradient(135deg, #6366f1 0%, #a855f7 100%);*/
    row-gap: 2rem; /*todo. 추후 이미지 크기에 따라 달라질 예정*/
}

.slider-wrapper {
    width: 100%;
    height: 100%;
    /*display: flex;*/
    /*flex-direction: column;*/
    /*justify-content: center;*/
    /*align-items: center;*/
    position: relative;
}

.main-slider {
    width: 100%;
    height: 80%;
    position: relative;
}

.slide-item {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    opacity: 0;
    transition: opacity 1s ease-in-out; /* 페이드 효과 속도 */
    z-index: 1;
    padding: 0 40px;
}

.slide-item.active {
    opacity: 1;
    z-index: 2;
}

.slide-item img {
    max-width: 70%;
    margin-bottom: 30px;
    filter: drop-shadow(0 20px 40px rgba(0,0,0,0.2));
}

.slide-text {
    text-align: center;
    color: white;
}

.slide-text h3 {
    font-size: 24px;
    margin-bottom: 10px;
    font-weight: 700;
}

.slide-text p {
    font-size: 16px;
    opacity: 0.8;
}

/* 하단 도트 */
.slider-dots {
    display: flex;
    gap: 8px;
    z-index: 10;
    justify-content: center;
}

.dot {
    width: 8px;
    height: 8px;
    background: rgba(255, 255, 255, 0.4);
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.3s;
}

.dot.active {
    width: 24px; /* 활성화 시 길어지는 효과 */
    background: #fff;
    border-radius: 4px;
}

/* 슬라이더 내 브랜드 로고/이미지 애니메이션 */
/*.auth-visual-content img {*/
/*    max-width: 80%;*/
/*    filter: drop-shadow(0 20px 30px rgba(0,0,0,0.1));*/
/*    animation: float 6s ease-in-out infinite;*/
/*}*/

@keyframes float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-20px); }
}

/* 3. 오른쪽 폼 영역 (정교한 스타일링) */
.auth-form-side {
    flex: 1;
    padding: 20px 50px;
    display: flex;
    flex-direction: column;
    background: #fff;
}

.auth-header {
    display: flex;
    justify-content: center;
    background: #fff;
    flex-shrink: 0;
    padding: 10px 0;
}

/* 세그먼트 전체 외곽 */
.segmented-control {
    position: relative;
    display: flex;
    /*width: 100%;*/
    width: 280px;
    margin: 0 auto;
    background: #f0f2f5; /* 연한 회색 배경 */
    border-radius: 14px;
    padding: 4px;
    transition: all 0.3s ease;
}

/* 배경 하이라이트 인디케이터 */
.segment-indicator {
    position: absolute;
    top: 4px;
    left: 4px;
    width: calc(50% - 4px); /* 2개일 때 기준 */
    height: calc(100% - 8px);
    background: #ffffff; /* 하얀색 슬라이딩 박스 */
    border-radius: 11px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
    z-index: 1;
}

/* 개별 아이템 버튼 */
.segment-item {
    position: relative;
    flex: 1;
    border: none;
    background: none;
    padding: 8px 0;    /* 상하 패딩을 줄여 높이도 살짝 조절 */
    font-size: 14px;   /* 폰트 크기를 살짝 줄여 밸런스 조정 */
    font-weight: 600;
    color: #5f6368;
    cursor: pointer;
    z-index: 2;
    transition: color 0.3s;
}

.segmented-control[data-active="loginTab"] .segment-indicator {
    transform: translateX(0);
}

.segmented-control[data-active="signupTab"] .segment-indicator {
    transform: translateX(100%);
}

.segmented-control[data-active="loginTab"] .segment-item[data-mode="loginTab"],
.segmented-control[data-active="signupTab"] .segment-item[data-mode="signupTab"] {
    color: #667eea !important;
}

@keyframes slideIn {
    from { transform: scaleX(0); }
    to { transform: scaleX(1); }
}

/*step header*/
.step-progress-bar {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    width: 100%;
    max-width: 400px; /* 상황에 따라 조절 */
    margin: 0 auto;
    padding: 10px 0;
}

.step {
    display: flex;
    flex-direction: column; /* 숫자와 글자를 세로로 배치 */
    align-items: center;
    gap: 8px;
    position: relative;
    flex-shrink: 0;
    z-index: 2; /* 선보다 위에 보이도록 */
}

/* 숫자 원형 */
.step-num {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #f0f2f5;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 600;
    color: #999;
    border: 2px solid #fff; /* 배경과 구분되는 선 */
    transition: all 0.3s ease;
}

/* 아래쪽 텍스트 */
.step-text {
    font-size: 13px;
    color: #999;
    font-weight: 500;
    white-space: nowrap; /* 글자 줄바꿈 방지 */
    transition: all 0.3s ease;
}

.step.active .step-num {
    background: #667eea;
    color: white;
    box-shadow: 0 4px 10px rgba(102, 126, 234, 0.3);
}

.step.active .step-text {
    color: #667eea;
    font-weight: 700;
}

.step.completed .step-text {
    color: #667eea;
}

/* 구분선 추가 */
.divider-or{
    display:flex;
    align-items:center;
    justify-content:space-between;
    color:#9ca3af;
    margin: 10px;
}
.divider-or::before,
.divider-or::after{
    content:"";
    height: 1px;
    width: 100px;
    background:#e5e7eb;
}

/* 중간 연결선 */
.line {
    flex-grow: 1; /* 선이 공간을 채우도록 */
    height: 2px;
    background: #f0f2f5;
    margin-top: 14px; /* .step-num 높이(28px)의 절반 지점 */
    min-width: 30px;  /* 선의 최소 길이를 보장 */
    z-index: 1;
}

.line.active {
    background: #667eea;
}

/* 탭 컨텐츠 영역 부드러운 전환 */
.tab-content {
    overflow-y: auto;          /* 내용이 길어지면 내부에서 스크롤 */
    display: block;            /* flex 영향 제거 */
}

.auth-footer {
    padding: 10px 0;      /* 패딩 축소 */
    flex-shrink: 0;
    background: #fff;
    border-top: 1px solid #f1f3f4; /* 선을 좀 더 연하게 */
    text-align: center;
    margin-top: auto;    /* 컨텐츠가 적어도 푸터가 항상 맨 아래 붙게 유지하고 싶을 때만 사용 */
    color: #aaa;
    font-size: small;
    img {
        max-height: 13px;
        margin: 0 10px 5px 0;
    }
}

/* ----------- 회원가입/로그인 tab css ----------- */

/* Form Inputs */
.auth-title {
    font-size: medium;
    .auth-subtitle {
        font-size: small;
        color: #aaa;
    }
}

.tab-content > .active {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.social-signup {
    display: flex;
    justify-content: space-around;
    button {
        cursor: pointer;
        transition: all 0.2s;
    }
    button:hover {
        transform: translateY(-2px);
    }
    img {
        width: 50px;
    }
}

.input-wrapper {
    position: relative;
    margin-bottom: 14px;
}

.input-icon, .pwd-icon {
    position:absolute;
    color:#a0aec0;
    top: 11px;
}

.input-icon {
    left: 16px;
}

.pwd-icon {
    right: 16px;
}

.form-control {
    width:100%;
    padding:14px 16px 14px 48px;
    border:2px solid #e2e8f0;
    border-radius:12px;
    font-size:15px;
    transition:all 0.3s ease;
    background:#f7fafc;
}
.form-control:focus {
    outline:none;
    border-color:#667eea;
    background:white;
    box-shadow:0 0 0 3px rgba(102, 126, 234, 0.1);
}
.form-control::placeholder {
    color:#cbd5e0;
}

/* 로그인 옵션 (상태유지 & 비밀번호 찾기) 반응형 레이아웃 */
.login-options {
    display: flex;
    justify-content: space-between; /* 양쪽 끝으로 배치 */
    align-items: center;            /* 세로 중앙 정렬 */
    flex-wrap: wrap;                /* 공간이 부족하면 다음 줄로 자동 넘김 */
    gap: 5px;
    width: 100%;
    margin-bottom: 10px;            /* 하단 로그인 버튼과의 간격 */
}

/* 체크박스와 라벨을 예쁘게 정렬 */
.remember-wrapper {
    display: flex;
    align-items: center;
    gap: 6px;
}

.under-text {
    text-decoration: underline;
    color: #888;
    font-size: small;
    margin: 0;
}

/* 로그인 버튼 (고급스러운 그림자 효과) */
.btn-auth-submit {
    width: 100%;
    height: 52px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border: none;
    border-radius: 12px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    box-shadow: 0 4px 12px rgba(26, 115, 232, 0.3);
}

.btn-auth-submit:disabled {
    background: #cbd5e0;
    color: #ffffff;
    cursor: not-allowed;       /* 마우스 포인터를 금지 모양으로 */
    box-shadow: none;
    transform: none !important;
    opacity: 0.7;
}

/* 호버 효과는 비활성화 상태가 아닐 때만 작동하도록 :not(:disabled) 추가 */
.btn-auth-submit:not(:disabled):hover {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    box-shadow: 0 6px 16px rgba(26, 115, 232, 0.4); /* 호버 시 그림자 강화 */
}

/*옵션*/
.tab-pane { display: none; opacity: 0; transition: opacity 0.3s ease; }
.tab-pane.active { display: flex; } /* 또는 block */
.tab-pane.show { opacity: 1; }


/*에러처리*/
.form-control.is-invalid {
    background-image: none !important;
    border-color: #ff4d4f !important;
    background-color: #fff2f0; /* 아주 연한 빨간색 배경 */
}

.form-control.is-invalid:focus {
    background-image: none !important;
    box-shadow: 0 0 0 1px rgba(255, 77, 79, 0.1) !important;
}

/* 에러 메시지 스타일 */
.invalid-feedback {
    display: none; /* 기본 숨김 */
    color: #ff4d4f;
    font-size: small;
    font-weight: 500;

    position: absolute;
    top: 100%;
    /*left: 5px;*/
    padding-left: 5px;
    line-height: 1;

    /* 가로 스크롤 방지 핵심 설정 */
    width: 100%;
    white-space: nowrap;      /* 한 줄로 유지 (줄바꿈이 높이를 늘리는 것 방지) */
    overflow: hidden;         /* 넘치는 텍스트 숨김 */
    text-overflow: ellipsis;  /* 너무 길면 ... 처리 */

    margin-top: 2px;        /* input과의 최소 간격 */
    /*padding-left: 5px;      !* 왼쪽 아이콘 라인에 맞춘 여백 *!*/
    text-align: left;
    pointer-events: none;
}

/* 에러 발생 시 노출 */
.form-control.is-invalid ~ .invalid-feedback {
    display: block;
}

/* 모바일 반응형 (화면 너비 768px 이하 기준) */
@media (max-width: 768px) {
    /* 1. 컨테이너를 수직으로 전환 */
    .auth-container {
        flex-direction: column;
        width: 95%;          /* 화면 양옆에 약간의 여백 */
        height: auto;        /* 고정 높이 해제 */
        max-height: 90vh;    /* 너무 길어지면 화면 밖으로 나가지 않게 */
        margin: 20px 0;
    }

    /* 2. 왼쪽 비주얼 영역 (슬라이더) 최적화 */
    .auth-visual-side {
        /*모바일에서 이미지 숨김 처리*/
        img {
            display: none;
        }
        .slider-dots {
            margin-top: 1rem;
        }
        /*숨기고 싶을 경우 */
        /*display: none;*/
        flex: none;
        height: 180px;
        row-gap: 1rem;
        padding: 1rem 0 !important;
    }

    /* 3. 오른쪽 폼 영역 패딩 조정 */
    .auth-form-side {
        padding: 30px 20px;  /* 좁은 화면에 맞춰 내부 여백 축소 */
        overflow-y: auto;    /* 폼 내용이 많을 경우 내부 스크롤 */

        .divider-or::before, .divider-or::after {
            width: 50px !important;
        }
    }

    /* 4. 세그먼트 컨트롤 너비 조정 */
    .segmented-control {
        width: 100%;         /* 폼 너비에 꽉 차게 */
    }

    /* 6. 스텝 바 (회원가입 단계) 최적화 */
    .step-progress-bar {
        max-width: 100%;
    }
    .step-text {
        font-size: 11px;     /* 텍스트 겹침 방지 */
    }

    /* 7. 입력창 폰트 크기 유지 (iOS 줌 방지) */
    .form-control {
        font-size: 16px;     /* iOS에서 input 포커스 시 화면 확대 방지 최소 크기 */
        padding: 12px 16px 12px 40px;
    }

    .input-icon, .pwd-icon {
        top: 10px;           /* 패딩 변화에 따른 아이콘 위치 조정 */
    }
}