$(document).ready(function () {
    // .snbin 요소 초기 설정
    $('.snbin').css('background-color', '#474747');
    $('.snbin:first').css('background-color', '#ff6600');

    // .snbpin 클릭 이벤트 처리
    $('.snbpin a').on('click', function (event) {
        event.preventDefault();
        var index = $(this).index(); // 클릭한 항목의 인덱스
        var targetClasses = ['.ps11-1', '.ps11-5', '.ps11-8h2', '.ps11-9']; // 이동할 타겟 클래스 배열
        var targetClass = targetClasses[index]; // 해당 인덱스의 타겟 클래스 선택
        var windowWidth = $(window).width();
        var additionalOffset = windowWidth <= 991 ? -180 : -270; // 모바일과 데스크탑에 따른 오프셋 계산

        // 최상단에 있을 때 추가 오프셋 계산
        if ($(window).scrollTop() === 0 && index > 0) {
            additionalOffset += windowWidth <= 991 ? -64 : -202;
        }

        // 애니메이션을 사용하여 스크롤 이동
        $('html, body').animate({
            scrollTop: index === 0 ? 0 : $(targetClass).offset().top + additionalOffset
        }, 500);

        // .snbin 배경색 업데이트
        $('.snbin').css('background-color', '#474747');
        $(this).find('.snbin').css('background-color', '#ff6600');
    });

    // 사이드바 높이 조정
    $("#ss00").each(function () {
        var sidebarH = $("#sidebar").height(); // 사이드바의 높이
        var contentH = $("#contents").height(); // 콘텐츠의 높이
        $(this).height(Math.max(sidebarH, contentH)); // 둘 중 더 큰 값을 사용해 높이 설정
    });

    // 스크롤 및 리사이즈 이벤트 핸들러
    var $snbp = $('#snbp'); // 타겟 요소
    var defaultOffset = 0; // 기본 오프셋
    var mobileOffset = 64; // 모바일용 오프셋
    var snbpInitialTop = $snbp.offset().top; // snbp의 초기 top 값

    $(window).on('scroll resize', function () {
        var scrollTop = $(window).scrollTop();
        var windowWidth = $(window).width();
        var offset = windowWidth <= 991 ? mobileOffset : defaultOffset; // 모바일/데스크탑에 따른 오프셋

        // 스크롤 위치에 따른 fixed 상태 변화
        if (scrollTop >= snbpInitialTop - offset) {
            $snbp.css({
                'position': 'fixed',
                'top': offset + 'px'
            });
        } else {
            $snbp.css({
                'position': 'relative',
                'top': 'initial'
            });
        }
    });
});