/* [기본 설정] 부드러운 움직임 담당 */
.scroll_on {
    opacity: 0;
    /* transition: 기존 것 삭제하고 아래 것으로 교체 */
    /* ease-out 계열의 베지어 곡선으로 고급스러운 느낌 */
    transition: all 0.8s cubic-bezier(0.25, 1, 0.5, 1);
    will-change: opacity, transform;
}

/* [위치 설정] 방향 클래스(.type_bottom)가 있으면 적용 */
/* 기존 200px은 너무 멀어서, 50px로 줄여야 사용자가 자연스럽게 느낍니다 */
.scroll_on.type_bottom {
    transform: translateY(50px); 
}

/* 만약 type_bottom 클래스가 없는 scroll_on 요소가 있다면 기본값 적용 */
.scroll_on:not(.type_bottom) {
    transform: translateY(50px);
}

/* [활성화 상태] JS가 active를 붙이면 원래 위치로 */
.scroll_on.active {
    opacity: 1 !important;
    transform: translate(0, 0) !important;
}