<header class="site-header">
    <div class="container" style="height: 100%; display: flex; align-items: center; justify-content: space-between;">

        <!-- Left: Logo & Nav -->
        <div class="header-left">
            <a href="{{ url('/') }}" class="logo" aria-label="홈으로">
                <img src="{{ asset('assets/images/common/top_logo.png') }}"
                     alt="사이트명"
                     class="logo-img">
            </a>

            <nav class="desktop-nav" aria-label="주요 메뉴">
                <a href="/" class="nav-link">HOME</a>
                <a href="/shop" class="nav-link nav-link--exchange">SHOP</a>
{{--                <a href="/exchange" class="nav-link nav-link--exchange">상품권현금교환</a>--}}
                <a href="/mypage/info" class="nav-link">마이페이지</a>
                <a href="/cs/notice" class="nav-link">고객센터</a>
            </nav>
        </div>

        <!-- Center: Search (Desktop) -->
        <div class="search-bar">
            <form action="/shop" method="GET">
                <input type="text" name="search" class="search-input" placeholder="상품권/브랜드 검색 (예: 문상, 해피, 구글플레이)">
                <button type="submit" class="search-icon" aria-label="검색">
                    <svg width="20" height="20" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                            d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
                    </svg>
                </button>
            </form>
        </div>

        <!-- Right: Auth Buttons -->
        <div class="auth-buttons flex items-center gap-2">
            <a href="/login" class="btn btn-ghost">로그인</a>
            <a href="/register" class="btn btn-primary" style="padding: 8px 20px;">회원가입</a>
        </div>

        <!-- Mobile Menu Toggle (Hidden on Desktop) -->
        <button class="mobile-menu-btn" aria-label="메뉴 열기" style="display: none;">
            <svg width="24" height="24" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16">
                </path>
            </svg>
        </button>

    </div>
</header>

<!-- Mobile Breakpoint Adjustments will be handled in CSS media queries -->
<style>
    @media (max-width: 1024px) {

        /* 메뉴/로그인만 숨김 */
        .desktop-nav,
        .auth-buttons {
            display: none !important;
        }

        /* 검색은 유지 + 모바일 폭 최적화 */
        .search-bar {
            display: block !important;
            flex: 1 1 auto;
            max-width: none;
            min-width: 0;
            margin: 0 10px;
        }
        .search-bar form { width: 100%; }
        .search-input { width: 100%; }

        /* 햄버거 버튼 표시 */
        .mobile-menu-btn {
            display: block !important;
        }
    }

    @media (max-width: 480px) {
        .site-header .container{
            padding-left: 12px;
            padding-right: 12px;
        }
    }
</style>

