<header id="custom-sticky-header">
    <div class="header-inner">
        <a href="https://viewus.oopy.io/#top" class="header-logo"><img width="100" src="https://static.viewus.co.kr/image/view-logo.png"></a>
        <nav class="header-nav">
            <a href="https://viewus.oopy.io/#team">조직 소개</a>
            <a href="https://viewus.oopy.io/#culture">본부 문화</a>
            <a href="https://viewus.oopy.io/#hiring">채용</a>
            <a href="https://viewus.oopy.io/#story">최근 소식</a>
        </nav>
    </div>
</header>
<style>
    #custom-sticky-header {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        z-index: 999999999999999999999999999999999999999999999999999;
        background: #ffffff;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    }

    .header-inner {
        max-width: 1240px;
        margin: 0 auto;
        padding: 14px 24px;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .header-logo {
        font-size: 18px;
        font-weight: 700;
        color: #000;
        text-decoration: none;
    }

    .header-nav a {
        margin-left: 24px;
        font-size: 15px;
        color: #333;
        text-decoration: none;
    }

    .header-nav a:hover {
        color: #000;
    }

    .notion-app {
        padding-top: 56px !important;
    }

    .notion-header {
        display: none;
    }

    @media (max-width: 1280px) {

        body,
        html {
            overflow-x: hidden;
        }

        #custom-sticky-header {
            position: absolute;
        }
    }

    @media (max-width: 1024px) {
        .header-logo {
            max-width: 70px;
        }

        .header-nav a {
            margin-left: 15px;
            font-size: 14px;
        }
    }
</style>
<script>
    if ('scrollRestoration' in history) {
        history.scrollRestoration = 'manual';
    }

    // load 이후 Oopy가 스크롤 복원하기 전에 선점
    window.addEventListener('load', () => {
        const hash = window.location.hash;

        if (!hash) {
            // 해시 없으면 여러 타이밍에 걸쳐 강제 최상단
            [0, 100, 300, 500].forEach(delay => {
                setTimeout(() => window.scrollTo({
                    top: 0
                }), delay);
            });
            return;
        }

        setTimeout(() => {
            const targetEl = document.querySelector(hash);
            if (!targetEl) return;
            const headerH = document.getElementById('custom-sticky-header').offsetHeight;
            const top = targetEl.getBoundingClientRect().top + window.scrollY - headerH;
            window.scrollTo({
                top,
                behavior: 'smooth'
            });
        }, 500);
    });

    document.querySelectorAll('.header-nav a').forEach(anchor => {
        anchor.addEventListener('click', function(e) {
            const href = this.getAttribute('href');
            const targetId = href.split('#')[1];
            const targetEl = document.getElementById(targetId);
            if (!targetEl) return;
            e.preventDefault();
            const headerH = document.getElementById('custom-sticky-header').offsetHeight;
            const top = targetEl.getBoundingClientRect().top + window.scrollY - headerH;
            window.scrollTo({
                top,
                behavior: 'smooth'
            });
        });
    });

    // 로고 클릭 시 해시 없이 최상단으로
    document.querySelector('.header-logo').addEventListener('click', function(e) {
        e.preventDefault();
        location.replace('https://viewus.oopy.io/');
    });
</script>