/* 위로/아래로 가기 버튼 컨테이너 */
.side-nav-buttons {
    position: fixed;
    top: 50%;
    transform: translateY(-50%);
    right: 30px;
    z-index: 1000;
}

/* 각 버튼의 공통 스타일 */
.side-nav-buttons a {
    width: 30px;
    height: 30px;
    background-color: #727272; /* 첨부 이미지와 유사한 회색 */
    color: #ffffff;
    text-align: center;
    line-height: 30px; /* 세로 중앙 정렬 */
    font-size: 20px; /* 화살표 아이콘 크기 */
    text-decoration: none;
    border-radius: 5px; /* << 모서리를 둥글게 (5px 정도면 첨부 이미지와 유사) */
    cursor: pointer;
    display: block; /* JS로 제어하기 위해 일단 숨김 */
    margin-bottom: 5px; /* 버튼 사이의 간격 */
    transition: background-color 0.3s, border-radius 0.3s;
}

.side-nav-buttons a:last-child {
    margin-bottom: 0; /* 마지막 버튼의 아래 간격은 제거 */
}

/* 마우스를 올렸을 때 스타일 */
.side-nav-buttons a:hover {
    background-color: #5a5a5a; /* 마우스 오버 시 살짝 어둡게 */
}

/* 폰트 어썸 아이콘에 대한 추가 스타일 (필요시) */
.side-nav-buttons a i {
    /* 아이콘 자체에 대한 추가 스타일이 필요하다면 여기에 추가 */
    /* 예: line-height를 아이콘에 직접 적용하여 미세 조정 */
}