/* button-link 클래스에 버튼 스타일 적용 */
.button-link {
    /* 버튼의 필수 구성 요소 */
    display: inline-block; /* 너비/높이, 패딩을 적용 가능하게 함 */
    padding: 5px 10px; /* 내부 여백 (위/아래, 좌/우) */
    text-decoration: none; /* 밑줄 제거 */
    
    /* 디자인 요소 */
    background-color: #e4e7e7; /* 버튼 배경색 (파란색) */
    color: rgb(0, 0, 0); /* 버튼 글자색 */
    border: none; /* 테두리 제거 */
    border-radius: 3px; /* 모서리를 약간 둥글게 */
    font-weight: bold; /* 글자를 굵게 */
    cursor: pointer; /* 마우스를 올리면 손가락 모양으로 변경 */
    
    /* 링크 사이에 있던 구분자 '/'를 제거하고 간격만 남기기 위해 */
    margin: 0 5px; 

    transition: background-color 0.7s ease; 
}

/* 마우스를 올렸을 때 (호버) 스타일 변화 */
.button-link:hover {
    background-color: #919caa83; /* 마우스를 올리면 더 어두운 파란색으로 변경 */
}

li {
    margin-bottom: 8px; 
}