#header{position: fixed;top: 0;left: 0;width: 100%;z-index: 90;background: #fff;padding: 0 20px;box-sizing: border-box;}
#header.hidden{top: -120px;transition: all 0.4s;}

// header action
const header = document.querySelector('#header');
if (!header) return;

let lastY = window.scrollY;
const threshold = 10; // 미세 스크롤 흔들림 방지

const onScroll = () => {
    const y = window.scrollY;

    // 최상단이면 항상 노출
    if (y <= 0) {
    header.classList.remove('hidden');
    lastY = y;
    return;
    }

    // 아래로 스크롤하면 숨김
    if (y > (lastY + threshold) + 100) {
    header.classList.add('hidden');
    lastY = y;
    return;
    }

    // 위로 스크롤하면 노출
    if (y < lastY - threshold) {
    header.classList.remove('hidden');
    lastY = y;
    }
};

window.addEventListener('scroll', onScroll, { passive: true });