/* 상단 버튼 스타일 */
#scrollTopBtn {
    position: fixed; /* 고정 위치로 설정 */
    bottom: 80px; /* 하단 여백 80px 설정 */
    right: 20px; /* 우측 여백 20px 설정 */
    width: 35px; /* 너비 설정 */
    height: 35px; /* 높이 설정 */
    background-color: #000000; /* 배경색 설정 */
    color: white; /* 글자 색상 설정 */
    border-radius: 20%; /* 모서리를 둥글게 설정 */
    display: flex; /* 요소들을 행으로 정렬 */
    justify-content: center; /* 가로 중앙 정렬 */
    align-items: center; /* 세로 중앙 정렬 */
    cursor: pointer; /* 커서를 포인터로 변경 */
    opacity: 0; /* 초기에 보이지 않음 */
    visibility: hidden; /* 초기에 보이지 않음 */
    transition: opacity 0.7s, visibility 0.7s; /* 전환 효과 설정 */
    z-index: 9999; /* 레이어 최상위로 설정 */
}

/* 하단 버튼 스타일 */
#scrollBottomBtn {
    position: fixed; /* 고정 위치로 설정 */
    bottom: 40px; /* 하단 여백 40px 설정 */
    right: 20px; /* 우측 여백 20px 설정 */
    width: 35px; /* 너비 설정 */
    height: 35px; /* 높이 설정 */
    background-color: #000000; /* 배경색 설정 */
    color: white; /* 글자 색상 설정 */
    border-radius: 20%; /* 모서리를 둥글게 설정 */
    display: flex; /* 요소들을 행으로 정렬 */
    justify-content: center; /* 가로 중앙 정렬 */
    align-items: center; /* 세로 중앙 정렬 */
    cursor: pointer; /* 커서를 포인터로 변경 */
    opacity: 0; /* 초기에 보이지 않음 */
    visibility: hidden; /* 초기에 보이지 않음 */
    transition: opacity 0.7s, visibility 0.7s; /* 전환 효과 설정 */
    z-index: 9999; /* 레이어 최상위로 설정 */
}

/* 스크롤 버튼이 보이도록 설정 */
#scrollTopBtn.visible, #scrollBottomBtn.visible {
    opacity: 1; /* 보이기 */
    visibility: visible; /* 보이기 */
}

/* 호버 효과 */
#scrollTopBtn:hover, #scrollBottomBtn:hover {
    background-color: #0056b3; /* 호버 시 배경색 변경 */
}

/* 클릭 효과 */
#scrollTopBtn:active, #scrollBottomBtn:active {
    background-color: #003366; /* 클릭 시 배경색 변경 */
}