html, body {
    height: 100%;
    margin: 0;
    padding: 0;
}

body {
    font-family: 'Poppins', sans-serif;
    background-color: #474747;
    color: white;
    display: flex;
    flex-direction: column;
    justify-content: center; /* 세로 중앙 정렬 */
    align-items: center; /* 가로 중앙 정렬 */
    overflow: auto; /* 스크롤 허용 */
}

.modal-content {
    color: #333; /* 모달 내 텍스트 색상 */
}

.center-content {
    margin: 5% auto; /* 상하 마진을 화면 높이의 비율로 설정하여 중앙 정렬 */
    text-align: center;
    width: 90vw; /* 너비를 화면 너비의 90%로 설정 */
    overflow-y: auto; /* 세로 방향으로 스크롤 가능하도록 설정 */
    padding: 1vw; /* 여백을 화면 너비의 비율로 설정 */
    box-sizing: border-box; /* 패딩과 테두리를 포함하여 너비와 높이를 계산 */
    font-size: 1vw; /* 폰트 크기를 화면 너비의 비율로 설정 */
}

.center-content2 {
    margin: 40px; /* 상하 마진을 화면 높이의 비율로 설정하여 중앙 정렬 */
    text-align: center;
    overflow-y: auto; /* 세로 방향으로 스크롤 가능하도록 설정 */
    box-sizing: border-box; /* 패딩과 테두리를 포함하여 너비와 높이를 계산 */
}

/* 옵션: 폰트 크기 조정 */
@media (max-width: 600px) {
    .center-content {
        font-size: 4vw; /* 작은 화면에서는 폰트 크기를 더 크게 설정 */
    }
}


body.hidden {
    display: none;
}

.logout-link {
    color: #ff0000; /* 로그아웃 버튼의 색상 */
    font-weight: bold;
}

.logout-link:hover {
    color: #ff7676; /* 마우스 오버 시 색상 변경 */
}

h1 {
    font-size: 2.5em;
    margin: 10px;
}

h2 {
    font-size: 1.5em;
}

.checkbox-label {
    cursor: pointer;
    transition: color 0.3s;
    font-size: 1.2em;
    margin: 10px;
}

.form-check-input {
    display: none; /* 체크박스 숨기기 */
}

.form-check-input:checked + .form-check-label {
    color: lightgreen; /* 체크된 상태에서 텍스트 색상 */
}

.form-check-label {
    cursor: pointer;
    transition: color 0.3s;
    font-size: 1.2em;
    color: white; /* 기본 텍스트 색상 */
}

.highlight {
    color: lightgreen;
}

.do-hyeon-regular {
    font-family: "Do Hyeon", sans-serif;
    font-weight: 400;
}

.jua-regular {
    font-family: "Jua", sans-serif;
    font-weight: 400;
}

.noto-sans-kr {
    font-family: "Noto Sans KR", sans-serif;
    font-weight: 600;
}

.btn {
    display: inline-block;
    padding: 10px 20px;
    margin: 10px;
    border: none;
    border-radius: 4px;
    background-color: #ffffff;
    color: black;
    text-decoration: none;
    text-align: center;
}

.btn:hover {
    background-color: #dddddd;
}

.navbar-dark .navbar-brand:hover {
    color: skyblue;
}

.nav-link {
    cursor: pointer; /* 커서를 클릭 커서로 변경 */
    user-select: none; /* 텍스트 선택을 막음 */
}