/* 랜덤 버튼 스타일 */
.random-button {
    text-align: center; /* 버튼을 가운데 정렬 */
    margin: 30px 0 50px 0;  /* H2 태그와 간격 조정 */
}

/* 버튼 디자인 */
.random-button a.button-link {
    font-size: clamp(16px, 5vw, 22px);
    font-weight: bold;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
    color: #ffffff; /* 기본 글자 색상 */
    background-color: #007aff; /* 초기 배경색: 파란색 */
    border: none;
    border-radius: 20px;
    padding: clamp(12px, 3vw, 20px) clamp(20px, 5vw, 48px);
    display: block;
    cursor: pointer;
    width: 100%;
    transition: transform 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease; /* 부드러운 효과 */
    box-shadow: 0 clamp(6px, 2vw, 8px) clamp(15px, 4vw, 20px) rgba(0, 0, 0, 0.3); /* 검은색 계열 그림자로 변경 */
}

/* hover 시 효과 */
.random-button a.button-link:hover {
    background-color: #0056b3; /* 파란색 계열로 조금 더 어둡게 */
    transform: translateY(-5px); /* 위로 살짝 들리는 효과 */
    box-shadow: 0 clamp(8px, 3vw, 12px) clamp(20px, 5vw, 30px) rgba(0, 0, 0, 0.4); /* hover 시 검은색 그림자 강조 */
    color: #ffffff; /* 글자 색상 유지 */
}

/* 참고문구 디자인 */
.button-note {
    font-size: 19px; /* 글자 크기 */
    font-weight: bold; /* 굵게 */
    color: #333; /* 글자 색상 */
    text-align: center; /* 가운데 정렬 */
    margin-bottom: 20px !important; /* 버튼과의 간격 조정 */
    display: inline-block; /* 인라인 블록 요소로 변경하여 margin 적용 가능 */
    box-shadow: inset 0 -11px 0 rgba(140, 160, 255, 0.5);
    padding-bottom: 1px; /* 밑줄과 텍스트 간격 조정 */
}