/* ===================================
   Scroll to Top 버튼
   =================================== */
#scrollToTopBtn {
    position: fixed;
    bottom: 6.4rem;
    right: 6.4rem;
    z-index: 99;
    background-color: var(--color-main, #2BAE66);
    color: white;
    border: none;
    border-radius: 50%;
    width: 4.8rem;
    height: 4.8rem;
    cursor: pointer;
    box-shadow: 0 0.4rem 1.0rem rgba(0, 0, 0, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;

    /* 1. 기본 상태: 화면 밖 (아래) + 투명 */
    opacity: 0;
    transform: translateY(10.0rem);
    /* 10.0rem 아래에 숨겨 둠 */

    /* 2. 부드러운 전환 효과 */
    transition: transform 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275),
        opacity 0.3s ease-out;
}

#scrollToTopBtn.visible {
    /* 3. 'visible' 클래스가 붙으면: 원래 위치 + 불투명 */
    opacity: 1;
    transform: translateY(0);
    /* 원래 자리로 튀어 오름 */
}

#scrollToTopBtn:hover {
    transform: translateY(-0.5rem);
    /* 호버 시 살짝 위로 이동 */
    box-shadow: 0 0.8rem 1.5rem rgba(0, 0, 0, 0.3);
}

.scroll-to-top__icon {
    width: 2.4rem;
    height: 2.4rem;
    display: block;
}



@media (max-width: 612px) {
    #scrollToTopBtn {
        bottom: 1.6rem;
        right: 1.6rem;
    }
}