.wp-site-blocks > header {
	position: sticky;
	top: 0;
	/* TODO: Figma에 없음 — 임의값: 모바일 메뉴가 본문보다 위에 오도록 레이어 순서를 지정한다. */
	z-index: var(--wp--custom--z-index--header);
	margin: 0;
}

.tc-header-wrap {
	min-height: var(--wp--custom--layout--header-height);
	background: var(--wp--preset--color--white);
}

.tc-header-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: min(calc(100% - (var(--wp--custom--layout--header-gutter) * 2)), var(--wp--custom--layout--header-wide));
	min-height: var(--wp--custom--layout--header-height);
	margin-inline: auto;
}

.tc-brand {
	color: var(--wp--preset--color--brand-muted);
	font-size: var(--wp--preset--font-size--brand);
	font-weight: var(--wp--custom--font-weight--semibold);
	line-height: var(--wp--custom--line-height--base);
	white-space: nowrap;
}

.tc-menu-toggle {
	display: grid;
	align-content: center;
	justify-items: center;
	gap: var(--wp--preset--spacing--2xs);
	width: var(--wp--custom--layout--touch-target);
	height: var(--wp--custom--layout--touch-target);
	padding: 0;
	border: 0;
	background: var(--wp--preset--color--transparent);
	color: var(--wp--preset--color--primary-deep);
	cursor: pointer;
}

.tc-menu-toggle span {
	width: var(--wp--preset--spacing--lg);
	height: var(--wp--custom--border-width--focus);
	background: currentcolor;
}

.tc-nav-panel {
	position: fixed;
	inset: var(--wp--custom--layout--header-height) 0 0;
	z-index: var(--wp--custom--z-index--panel);
	display: none;
	padding: var(--wp--preset--spacing--lg) var(--wp--custom--layout--header-gutter);
	overflow-y: auto;
	background: var(--wp--preset--color--white);
}

.tc-nav-panel.is-open {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--lg);
}

.tc-menu-list {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--2xs);
}

.tc-menu-list a {
	display: flex;
	align-items: center;
	min-height: var(--wp--custom--layout--touch-target);
	color: var(--wp--preset--color--text-nav);
	font-size: var(--wp--preset--font-size--nav);
}

.tc-menu-list a:hover,
.tc-menu-list a:focus-visible,
.tc-menu-list .current-menu-item > a {
	color: var(--wp--preset--color--primary-content);
}

.tc-reservation {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: var(--wp--custom--layout--touch-target);
	padding: var(--wp--preset--spacing--xs) var(--wp--preset--spacing--lg);
	border-radius: var(--wp--custom--radius--button);
	background: var(--wp--preset--color--primary-deep);
	color: var(--wp--preset--color--white);
	font-family: var(--wp--preset--font-family--dm-sans);
	font-size: var(--wp--preset--font-size--link);
	font-weight: var(--wp--custom--font-weight--medium);
	letter-spacing: var(--wp--custom--letter-spacing--button);
	white-space: nowrap;
}

.tc-reservation:hover,
.tc-reservation:focus-visible {
	background: var(--wp--preset--color--primary-content);
}

/* TODO: Figma에 없음 — 임의값: 1800px에서 1744px 데스크톱 헤더 전체 메뉴를 노출한다. */
@media (min-width: 1800px) {
	.tc-menu-toggle {
		display: none;
	}

	.tc-nav-panel {
		position: static;
		display: flex;
		flex: 1;
		flex-direction: row;
		align-items: center;
		justify-content: flex-end;
		padding: 0;
		overflow: visible;
	}

	.tc-menu-list {
		flex-direction: row;
		align-items: center;
		gap: var(--wp--preset--spacing--xs);
	}

	.tc-menu-list a {
		white-space: nowrap;
	}

	.tc-primary-nav {
		margin-inline: auto var(--wp--preset--spacing--lg);
	}
}