@import url('resource/font/fonts.css');

body {
    font-family: 'NPS Regular', Arial, sans-serif;
    background-color: #B2CCF0; /* whiteSora 배경색 */
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
    padding: 0 20px;
    box-sizing: border-box; /* 패딩을 포함하도록 설정 */
}

.logo-container {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    max-width: 600px;
}

.login-container {
    width: 100%;
    padding: 20px;
    background: white;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
    border-radius: 8px;
    text-align: center;
    background-color: #FFF; /* 흰색 배경 */
    border: 2px solid #1F2C59; /* deepBlue 테두리 */
    box-sizing: border-box;
    z-index: 1; /* 로그인 컨테이너가 로고 위에 있도록 설정 */
}

h2 {
    margin-bottom: 20px;
    font-family: 'NPS Bold', Arial, sans-serif;
    color: #1F2C59; /* deepBlue 색상 */
}

.input-group {
    margin-bottom: 15px;
    text-align: left;
}

.input-group label {
    display: block;
    margin-bottom: 5px;
    font-weight: bold;
    color: #1F2C59; /* deepBlue 색상 */
}

.input-group input {
    width: 100%;
    padding: 8px;
    box-sizing: border-box;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 20px; /* 폰트 크기 조정 */
}

.button-group {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 20px; /* 버튼 그룹과 입력 필드 사이의 여백 */
}

.register {
    background: none; /* 배경 제거 */
    border: none; /* 테두리 제거 */
    color: #3678F1; /* 텍스트 색상 */
    text-decoration: underline; /* 밑줄 추가 */
    cursor: pointer; /* 마우스 포인터 */
    font-size: 16px; /* 폰트 크기 */
    font-family: 'NPS Bold', Arial, sans-serif; /* 폰트 패밀리 */
    padding: 0; /* 패딩 제거 */
}

.login {
    padding: 10px 15px;
    background-color: #3678F1; /* radeka 색상 */
    color: white;
    border: none;
    cursor: pointer;
    border-radius: 4px;
    font-size: 16px;
    font-family: 'NPS Bold', Arial, sans-serif;
}

.login:hover {
    background-color: #1F2C59; /* deepBlue 색상 */
}

.register:hover {
    color: red; /* 텍스트 색상 */
}

.logo {
    max-width: 1024px; /* 로고 크기를 조정 */
    height: auto;
    position: absolute; /* 로고를 인디케이터 뒤에 위치시키기 위해 position 속성 추가 */
    z-index: 0; /* 로그인 컨테이너 뒤에 위치하도록 설정 */
    filter: blur(4px); /* 블러 효과 추가 */
    opacity: 0.5; /* 투명도 설정 (0.0 ~ 1.0) */
}


/* 인디케이터 백그라운드 스타일 */
.indicator-background {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.3);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999; /* 최상위 레이어 */
}

/* 인디케이터 스타일 */
.indicator {
    border: 16px solid #f3f3f3; /* Light grey */
    border-top: 16px solid #3678F1; /* Blue */
    border-radius: 50%;
    width: 120px;
    height: 120px;
    animation: spin 2s linear infinite;
}

/* 인디케이터 애니메이션 */
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}




/* 미디어 쿼리 */
@media (max-width: 600) {
    body {
        padding: 0 10px; /* 작은 화면에서는 양쪽 여백을 줄임 */
    }

    .login-container {
        width: 100%;
        padding: 15px; /* 작은 화면에서 패딩 조정 */
    }

    h2 {
        font-size: 1.5em;
    }

    .login, .register {
        font-size: 14px;
        padding: 8px 12px;
    }
}