/* 기본 스타일 초기화 */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html, body {
    height: 100%;
    width:100%;
    font-family: 'Noto Sans KR', sans-serif;
    color: #333;
    /* body가 전체 배경 그라데이션을 담당 */
    background: linear-gradient(to bottom right, #f7d046, #ff8c00);
    display: flex; /* login-card를 중앙에 배치하기 위함 */
    justify-content: center;
    align-items: center;
    overflow: hidden; /* 혹시 모를 스크롤바 방지 */
}

/* login-container 관련 CSS 제거 (혹은 주석 처리) */
/* .login-container {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    min-height: 100vh;
    padding: 20px;
    background-color: transparent;
} */

/* 로그인 카드 (중앙에 위치할 박스) */
.login-card {
    background-color: #fff;
    padding: 40px;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1); /* 부드러운 그림자 */
    text-align: center;
    width: 100%;
    max-width: 400px; /* 최대 너비 설정 */
    animation: fadeIn 0.8s ease-out forwards; /* 부드러운 등장 애니메이션 */
    /* login-container의 padding을 대체하기 위해 login-card에 직접 margin 적용 */
    margin: 20px; /* 모바일 등 작은 화면에서 카드와 가장자리의 간격 확보 */
}

/* 헤더 및 로고 */
.login-header {
    margin-bottom: 30px;
}

.logo-text {
    font-size: 2.5em;
    font-weight: 700;
    margin-bottom: 5px;
    background: linear-gradient(to right, #f7d046, #ff8c00);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    display: inline-block; /* 그라데이션 텍스트를 위한 설정 */
}

.tagline {
    font-size: 1.1em;
    color: #666;
}

/* 입력 그룹 */
.input-group {
    text-align: left;
    margin-bottom: 20px;
}

.input-group label {
    display: block;
    margin-bottom: 8px;
    font-weight: 500;
    color: #555;
}

.input-group input[type="text"],
.input-group input[type="password"] {
    width: 100%;
    padding: 14px 18px;
    border: 1px solid #ddd;
    border-radius: 8px;
    font-size: 1em;
    transition: border-color 0.3s ease;
}

.input-group input[type="text"]:focus,
.input-group input[type="password"]:focus {
    border-color: #ff8c00; /* 포커스 시 주황색 테두리 */
    outline: none;
    box-shadow: 0 0 0 3px rgba(255, 140, 0, 0.2);
}

/* 옵션 (아이디 저장, 비밀번호 찾기) */
.options {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 25px;
    font-size: 0.9em;
}

.remember-me {
    display: flex;
    align-items: center;
}

.remember-me input[type="checkbox"] {
    margin-right: 8px;
    transform: scale(1.1); /* 체크박스 크기 약간 키우기 */
    accent-color: #f7d046; /* 체크박스 색상 변경 */
}

.forgot-password, .signup-link {
    color: #ff8c00;
    text-decoration: none;
    transition: color 0.3s ease;
}

.forgot-password:hover, .signup-link:hover {
    color: #f7d046; /* 호버 시 밝은 노란색 */
}

/* 로그인 버튼 */
.login-button {
    width: 100%;
    padding: 15px;
    background: linear-gradient(to right, #f7d046, #ff8c00); /* 그라데이션 배경 */
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 1.1em;
    font-weight: 600;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    box-shadow: 0 4px 15px rgba(255, 140, 0, 0.3); /* 버튼 그림자 */
}

.login-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(255, 140, 0, 0.4);
}

.login-button:active {
    transform: translateY(0);
    box-shadow: 0 2px 10px rgba(255, 140, 0, 0.2);
}

/* 구분선 */
.divider {
    position: relative;
    text-align: center;
    margin: 30px 0;
    color: #bbb;
}

.divider::before,
.divider::after {
    content: '';
    position: absolute;
    top: 50%;
    width: 40%;
    height: 1px;
    background-color: #eee;
}

.divider::before {
    left: 0;
}

.divider::after {
    right: 0;
}

.divider span {
    background-color: #fff;
    padding: 0 10px;
    position: relative;
    z-index: 1; /* 텍스트가 선 위에 오도록 */
}

/* 소셜 로그인 버튼 */
.social-login {
    display: flex;
    flex-direction: column; /* 세로로 정렬 */
    gap: 12px; /* 버튼 간 간격 */
    margin-bottom: 25px;
}

.social-button {
    width: 100%;
    padding: 12px;
    border-radius: 8px;
    font-size: 1em;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.2s ease, border-color 0.2s ease;
}

.social-button.kakao {
    background-color: #FEE500;
    color: #3C1E1E;
    border: 1px solid #FEE500;
    font-weight: 500;
}

.social-button.kakao:hover {
    background-color: #e5cc00;
}

.social-button.naver {
    background-color: #03C75A;
    color: #fff;
    border: 1px solid #03C75A;
    font-weight: 500;
}

.social-button.naver:hover {
    background-color: #02a04a;
}

.social-button.google {
    background-color: #fff;
    color: #757575;
    border: 1px solid #ccc;
    font-weight: 500;
}

.social-button.google:hover {
    background-color: #f5f5f5;
    border-color: #bbb;
}

/* 회원가입 텍스트 */
.signup-text {
    font-size: 0.9em;
    color: #666;
}

/* 애니메이션 */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* 반응형 디자인 */
@media (max-width: 500px) {
    .login-card {
        padding: 30px 20px; /* 모바일에서 패딩 조정 */
        margin: 0 15px; /* 양옆 여백 추가 */
    }

    .login-header {
        margin-bottom: 20px;
    }

    .logo-text {
        font-size: 2em;
    }

    .tagline {
        font-size: 1em;
    }

    .options, .divider {
        margin: 20px 0;
    }

    .login-button {
        padding: 13px;
        font-size: 1em;
    }

    .social-button {
        padding: 10px;
        font-size: 0.9em;
    }
}


  /* ✅ Swal 크기 조정용 CSS */
  .swal2-small-popup {
    width: 300px !important;
    padding: 1.2em !important;
  }

  .swal2-small-title {
    font-size: 1.1rem !important;
  }

  .swal2-small-text {
    font-size: 0.95rem !important;
  }

  .swal2-small-button {
    font-size: 0.85rem !important;
    padding: 0.4em 1.2em !important;
  }