@version(2)
{{-- 헤더는 화면 폭을 그대로 쓴다. 메인에서는 슬라이더 위에 얹혀 흰 글자로 시작한다 --}}
<header class="hs-head @if($hs_is_main) is-over @endif" id="hsHead">
	<div class="hs-head-row">
		<a class="hs-brand" href="{{ getUrl('', 'mid', '', 'act', '') }}">
			@if ($hs_logo)
			<img class="hs-brand-img" src="{{ $hs_logo }}" alt="{{ $hs_logo_text }}" />
			@else
			<span class="hs-brand-mark">{{ $hs_logo_text }}</span>
			@if ($hs_tagline)<span class="hs-brand-tag">{{ $hs_tagline }}</span>@endif
			@endif
		</a>

		<nav class="hs-gnb">
			<ul class="hs-gnb-list">
				@foreach ($hs_gnb as $item)
				<li class="@if(!empty($item['list'])) has-sub @endif @if(!empty($item['selected'])) on @endif">
					<a href="{{ $item['href'] }}" @if($item['open_window'] === 'Y') target="_blank" rel="noopener" @endif>
						<span class="hs-gnb-en">{{ $item['link'] }}</span>
					</a>
					@if (!empty($item['list']))
					<ul class="hs-gnb-sub">
						@foreach ($item['list'] as $sub)
						<li><a href="{{ $sub['href'] }}" @if($sub['open_window'] === 'Y') target="_blank" rel="noopener" @endif>{{ $sub['link'] }}</a></li>
						@endforeach
					</ul>
					@endif
				</li>
				@endforeach
			</ul>
		</nav>

		<div class="hs-head-side">
			@if ($hs_head_tel)
			<a class="hs-head-tel" href="tel:{{ $hs_head_tel }}">{{ $hs_head_tel }}</a>
			@endif

			<div class="hs-head-member">
				@if ($hs_is_login)
				@if ($hs_my_url)<a href="{{ $hs_my_url }}">{{ $lang->hs_my }}</a>@endif
				<a href="{{ $hs_logout_url }}">{{ $lang->hs_logout }}</a>
				@else
				<a href="{{ $hs_login_url }}">{{ $lang->hs_login }}</a>
				<a href="{{ $hs_signup_url }}">{{ $lang->hs_signup }}</a>
				@endif
			</div>

			@if ($hs_reserve_url)
			<a class="hs-reserve" href="{{ $hs_reserve_url }}">
				<span>{{ $lang->hs_reserve }}</span>
				<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.2" aria-hidden="true"><path d="M5 12h14M13 6l6 6-6 6" /></svg>
			</a>
			@endif

			<button type="button" class="hs-burger" id="hsBurger" aria-label="{{ $lang->hs_menu }}" aria-expanded="false">
				<span></span><span></span>
			</button>
		</div>
	</div>
</header>

{{-- 전체화면 메뉴. 좁은 화면과 넓은 화면 모두에서 쓴다 --}}
<div class="hs-drawer" id="hsDrawer" hidden>
	<div class="hs-drawer-inner">
		<nav class="hs-drawer-nav">
			<ol>
				@foreach ($hs_gnb as $i => $item)
				<li style="--d:{{ $i }}">
					<a href="{{ $item['href'] }}">
						<em>{{ sprintf('%02d', $i + 1) }}</em>
						<span>{{ $item['link'] }}</span>
					</a>
					@if (!empty($item['list']))
					<ul>
						@foreach ($item['list'] as $sub)
						<li><a href="{{ $sub['href'] }}">{{ $sub['link'] }}</a></li>
						@endforeach
					</ul>
					@endif
				</li>
				@endforeach
			</ol>
		</nav>

		<div class="hs-drawer-side">
			<div class="hs-drawer-member">
				@if ($hs_is_login)
				<span class="hs-drawer-hello">{{ $hs_member_name }}</span>
				@if ($hs_my_url)<a href="{{ $hs_my_url }}">{{ $lang->hs_my }}</a>@endif
				<a href="{{ $hs_logout_url }}">{{ $lang->hs_logout }}</a>
				@else
				<a href="{{ $hs_login_url }}">{{ $lang->hs_login }}</a>
				<a href="{{ $hs_signup_url }}">{{ $lang->hs_signup }}</a>
				@endif
			</div>

			@if ($hs_head_tel)
			<a class="hs-drawer-tel" href="tel:{{ $hs_head_tel }}">{{ $hs_head_tel }}</a>
			@endif
			@if ($hs_reserve_url)
			<a class="hs-reserve hs-drawer-reserve" href="{{ $hs_reserve_url }}">
				<span>{{ $lang->hs_reserve }}</span>
			</a>
			@endif
			@if (count($hs_sns))
			<ul class="hs-drawer-sns">
				@foreach ($hs_sns as $sns)
				<li><a href="{{ $sns['url'] }}" target="_blank" rel="noopener">{{ $sns['name'] }}</a></li>
				@endforeach
			</ul>
			@endif
		</div>
	</div>
</div>