/* ── 상단 도구 — 검색·언어·로그인/계정·알림·메뉴 ────── */
/* SSOT 11절: 선택된 메뉴에만 배경을 두고, 색은 작은 아이콘에만 쓴다. */
.page > .topbar {
	--shell-bar-tool-bg: var(--wa-color-surface-raised);
	--shell-bar-tool-line: color-mix(in srgb, var(--wa-color-surface-border) 75%, transparent);
	--shell-bar-hover: var(--wa-color-brand-fill-quiet);
	background: var(--wa-color-surface-raised);
	box-shadow: 0 5px 20px -16px var(--wa-color-text-quiet);
}

.topbar .menu-tabs { gap: var(--wa-space-2xs); }
.topbar .menu-cat {
	--category-deep: var(--wa-color-brand-fill-loud);
	--menu-surface: var(--wa-color-surface-raised);
	--menu-icon-ink: var(--category-deep);
}
/* 의미별 팔레트 — 순서가 바뀌어도 같은 메뉴는 같은 색으로 찾는다. */
.topbar .menu-cat[data-category='guide'] { --category-color: var(--wa-color-blue-50); --category-deep: var(--wa-color-blue-40); }
.topbar .menu-cat[data-category='ai'] { --category-color: var(--wa-color-purple-50); --category-deep: var(--wa-color-purple-40); }
.topbar .menu-cat[data-category='appdev'] { --category-color: var(--wa-color-cyan-50); --category-deep: var(--wa-color-cyan-40); }
.topbar .menu-cat[data-category='game'] { --category-color: var(--wa-color-pink-50); --category-deep: var(--wa-color-pink-40); }
.topbar .menu-cat[data-category='cert'] { --category-color: var(--wa-color-yellow-60); --category-deep: var(--wa-color-yellow-40); }
.topbar .menu-cat[data-category='teacher'] { --category-color: var(--wa-color-orange-50); --category-deep: var(--wa-color-orange-40); }
.topbar .menu-cat[data-category='study'] { --category-color: var(--wa-color-green-50); --category-deep: var(--wa-color-green-40); }
.topbar .menu-cat[data-category='agent'] { --category-color: var(--wa-color-indigo-50); --category-deep: var(--wa-color-indigo-40); }
html[data-sonub-theme='dark'] .topbar .menu-cat {
	--menu-icon-ink: color-mix(in srgb, var(--category-color) 55%, var(--wa-color-gray-95));
}
.topbar .menu-tab {
	position: relative;
	gap: var(--wa-space-2xs);
	padding-block: var(--wa-space-2xs);
	font-size: var(--wa-font-size-s);
	border: 0;
	border-radius: var(--wa-border-radius-m);
	background: transparent;
	box-shadow: none;
	color: var(--wa-color-text-normal);
}
.topbar .menu-tab > i {
	display: grid;
	flex: none;
	place-items: center;
	inline-size: 1.5rem;
	block-size: 1.5rem;
	--fa-primary-color: var(--menu-icon-ink);
	--fa-secondary-color: var(--menu-icon-ink);
	--fa-secondary-opacity: 0.72;
	color: var(--menu-icon-ink);
	background: transparent;
	box-shadow: none;
}
/* 마우스 올림과 선택 상태를 구분한다. 키보드 초점선은 app.css의 접근성 표시를 유지한다. */
.topbar .menu-cat:hover > .menu-tab,
.topbar .menu-tab:focus-visible {
	background: transparent;
	color: var(--wa-color-brand-on-quiet);
}
.topbar .menu-tab::after { content: none; }
.topbar .menu-cat[data-active] > .menu-tab {
	background: var(--wa-color-brand-fill-quiet);
	border-radius: 0;
	box-shadow: none;
	color: var(--wa-color-brand-on-quiet);
}
.topbar .menu-panel {
	padding: var(--wa-space-s);
	border-radius: var(--wa-border-radius-xl);
}
.topbar .menu-panel a {
	min-block-size: 2.7rem;
	box-sizing: border-box;
	border-radius: var(--wa-border-radius-m);
	font-size: var(--wa-font-size-s);
}
.topbar .menu-panel a:hover { background: transparent; color: var(--wa-color-brand-on-quiet); }
/* Web Awesome의 ul li 기본 18px 들여쓰기를 메뉴에서 제거한다. */
.topbar .menu-panel > li:not(.menu-group),
.menu-drawer .drawer-group li:not(.menu-group) { margin: 0; padding: 0; }

/* 메뉴 서브 그룹 제목 — 구분선 뒤 같은 글자 시작선에서 읽는다. */
.menu-group {
	margin: var(--wa-space-s) 0 var(--wa-space-2xs);
	padding: var(--wa-space-s) var(--wa-space-s) 0;
	border-block-start: 1px solid var(--wa-color-surface-border);
	list-style: none;
}
.menu-group > span {
	display: block;
	color: var(--wa-color-text-quiet);
	font-size: var(--wa-font-size-xs);
	font-weight: var(--wa-font-weight-semibold);
	line-height: 1.5;
	word-break: keep-all;
	text-align: start;
	overflow-wrap: anywhere;
}
/* 그룹이 끝난 뒤 보통 항목 앞 — 제목 없이 구분선만 */
li.menu-group.menu-group-break { padding-block-start: 0; margin-block-end: 0; }

@media (min-width: 600px) {
	.topbar .menu-tab { block-size: calc(var(--bar-height) - 8px); }
}

/* ── 메가 메뉴(1440px 이상) — 대분류 하나가 한 컬럼, 마우스를 올리면 모든 서브메뉴가 탭 아래 컬럼으로 펼쳐진다(SSOT 11절 "메가 메뉴") ──
   목록은 2행 그리드다: 1행 탭(막대 높이), 2행 서브메뉴. 컬럼은 대분류 수만큼(최대 11rem) 똑같이 줄고,
   대분류(li)는 subgrid 로 두 행을 걸쳐 탭과 서브메뉴가 같은 폭으로 줄을 맞춘다. .main-menu 는 막대 높이에 묶여 있어
   펼친 2행은 막대 밖으로 겹쳐 그려진다 — 탑바 높이가 변하지 않는다. 서브메뉴 판은 같은 행에서 늘어나 높이가 같아 한 장의 카드로 이어진다. */
@media (min-width: 1440px) {
	.topbar .main-menu { align-items: flex-start; }
	.topbar .menu-tabs {
		position: relative;
		isolation: isolate;
		display: grid;
		flex: 0 1 auto;
		grid-auto-flow: column;
		grid-auto-columns: minmax(0, 11rem);
		grid-template-rows: var(--bar-height) auto;
		gap: 0;
		min-inline-size: 0;
		margin-block-start: 0;
	}
	/* 그림자는 판 전체에 한 번만 둔다. 컬럼마다 드리우면 세로 그라디언트처럼 보인다. */
	.topbar .menu-tabs::before {
		content: '';
		display: none;
		position: absolute;
		inset-block: var(--bar-height) 0;
		inset-inline: 0;
		z-index: -1;
		pointer-events: none;
		border-end-start-radius: var(--wa-border-radius-l);
		border-end-end-radius: var(--wa-border-radius-l);
		background: var(--wa-color-surface-raised);
		box-shadow: var(--wa-shadow-m);
	}
	.topbar .menu-tabs:is(:hover, :focus-within)::before { display: block; }
	html[data-menu-hold] .topbar .menu-tabs:not(:focus-within)::before { display: none; }
	.topbar .menu-cat { display: grid; grid-row: span 2; grid-template-rows: subgrid; min-inline-size: 0; }
	.topbar .menu-tab {
		display: grid;
		grid-template-rows: 1.5rem auto;
		align-content: center;
		align-items: start;
		justify-items: center;
		gap: var(--wa-space-3xs);
		inline-size: 100%;
		margin-inline: auto;
		block-size: 100%;
		min-inline-size: 0;
		padding: 0 var(--wa-space-3xs);
		line-height: 1.2;
		white-space: normal;
		word-break: keep-all;
		text-align: center;
	}
	.topbar .menu-tab > span {
		display: -webkit-box;
		flex: none;
		max-inline-size: 100%;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		overflow: hidden;
		overflow-wrap: anywhere;
	}
	.topbar .menu-tab > i { font-size: calc(var(--wa-font-size-l) + 2px); }
	.topbar .menu-panel {
		--menu-label-inset: var(--wa-space-xs);
		position: static;
		box-sizing: border-box;
		min-inline-size: 0;
		max-block-size: calc(100dvh - var(--bar-height) - var(--wa-space-s));
		overflow-y: auto;
		overscroll-behavior: contain;
		scrollbar-width: thin;
		scrollbar-color: var(--wa-color-surface-border) transparent;
		padding: var(--wa-space-m) var(--wa-space-2xs);
		border: 0;
		border-radius: 0;
		background: var(--menu-surface);
		box-shadow: none;
	}
	.topbar .menu-panel::before { content: none; }
	.topbar .menu-cat + .menu-cat > .menu-panel { border-inline-start: 1px solid var(--wa-color-surface-border); }
	.topbar .menu-cat:first-child > .menu-panel { border-end-start-radius: var(--wa-border-radius-l); }
	.topbar .menu-cat:last-child > .menu-panel { border-end-end-radius: var(--wa-border-radius-l); }
	/* 초점이 탭에서 항목으로 옮겨가는 동안에도 전체 판을 유지한다. */
	.topbar .menu-cat:focus-within > .menu-panel { display: none; }
	.topbar .menu-tabs:hover .menu-panel,
	.topbar .menu-tabs:focus-within .menu-panel { display: block; }
	/* 메뉴를 눌러 새 페이지가 열린 직후 — 마우스가 아직 탭 위라도 메뉴 밖으로 나갈 때까지 펼치지 않는다(layouts/main 의 data-menu-hold). 키보드 초점은 그대로 연다 */
	html[data-menu-hold] .topbar .menu-tabs:not(:focus-within) .menu-panel { display: none; }
	/* 장식 점 없이 글자 시작선을 맞춘다. 좁은 컬럼에서는 낱말 단위로 줄을 바꾼다. */
	.topbar .menu-panel a {
		display: grid;
		grid-template-columns: minmax(0, 1fr);
		align-items: start;
		align-content: center;
		min-block-size: 2.5rem;
		padding-block: calc(var(--wa-space-s) / 2);
		padding-inline: var(--wa-space-xs);
		border: 0;
		border-radius: var(--wa-border-radius-s);
		color: var(--wa-color-text-normal);
		line-height: 1.5;
		white-space: normal;
		word-break: keep-all;
		overflow-wrap: anywhere;
		hyphens: auto;
		transition: color 160ms;
	}
	.topbar .menu-panel a i { display: none; }
	.topbar .menu-panel a > span { min-inline-size: 0; }
	.topbar .menu-panel a::before { content: none; }
	.topbar .menu-panel a:hover,
	.topbar .menu-panel a:focus-visible {
		background: transparent;
		color: var(--wa-color-brand-on-quiet);
	}
	.topbar .menu-panel a:focus-visible { outline: 2px solid var(--wa-color-focus); outline-offset: -2px; }
	.topbar .menu-panel a[aria-current] {
		background: var(--wa-color-brand-fill-quiet);
		color: var(--wa-color-brand-on-quiet);
		font-weight: var(--wa-font-weight-semibold);
	}
	.topbar .menu-group {
		margin-block: var(--wa-space-m) var(--wa-space-2xs);
		padding-inline: var(--menu-label-inset) var(--wa-space-2xs);
	}
}

@media (min-width: 1800px) {
	.topbar .menu-panel { padding: var(--wa-space-m) var(--wa-space-xs); }
	.topbar .menu-panel a { min-block-size: 2.75rem; font-size: calc((var(--wa-font-size-s) + var(--wa-font-size-m)) / 2); }
}

@media (max-width: 599px) {
	.topbar .menu-tab > i { inline-size: 1.75rem; block-size: 1.75rem; border-radius: var(--wa-border-radius-s); }
}

@media (prefers-reduced-motion: reduce) {
	.topbar .menu-tab > i,
	.topbar .menu-panel a { transition: none; }
	.topbar .menu-cat:hover > .menu-tab > i,
	.topbar .menu-cat:has(:focus-visible) > .menu-tab > i { transform: none; }
}

/* 전체 메뉴도 같은 카드 표면과 넉넉한 누름 영역을 쓴다. */
.menu-drawer::part(body) { background: var(--wa-color-surface-default); }
.menu-drawer .drawer-group {
	margin-block-end: var(--wa-space-m);
	padding: var(--wa-space-m);
	border: 1px solid var(--wa-color-surface-border);
	border-radius: var(--wa-border-radius-l);
	background: var(--wa-color-surface-raised);
}
.menu-drawer .drawer-group h2 { margin-block-start: 0; color: var(--wa-color-brand-on-quiet); }
.menu-drawer .drawer-group ul { padding-inline-start: 0; }
.menu-drawer .drawer-group li a {
	padding: var(--wa-space-xs) var(--wa-space-s);
	border-radius: var(--wa-border-radius-s);
	color: var(--wa-color-text-normal);
	font-size: var(--wa-font-size-s);
}
.menu-drawer .drawer-group li a:hover,
.menu-drawer .drawer-group li a:focus-visible { background: var(--wa-color-brand-fill-quiet); }

.topbar-tools .locale-switcher > wa-button::part(caret) { display: none; }

/* 메뉴는 모든 폭에서 열 수 있다. Web Awesome 등록 전에는 항목을 접어 둔다. */
.toolbar-dropdown > .menu-toggle { display: inline-flex; }
.toolbar-dropdown > .menu-toggle:hover::part(base) {
	background: var(--wa-color-brand-fill-quiet);
	color: var(--wa-color-brand-on-quiet);
	border-color: var(--wa-color-surface-border);
}
.toolbar-dropdown:not(:defined) > :not([slot='trigger']) { display: none; }
.toolbar-dropdown::part(menu) {
	min-inline-size: 15rem;
	max-inline-size: calc(100vw - 2 * var(--wa-space-s));
}
.toolbar-dropdown wa-dropdown-item { min-block-size: 2.5rem; }
.toolbar-dropdown wa-dropdown-item::part(label) { min-inline-size: 0; white-space: normal; overflow-wrap: anywhere; }
.toolbar-dropdown wa-dropdown-item a { display: block; color: inherit; text-decoration: none; }
.toolbar-dropdown wa-dropdown-item > i { color: var(--wa-color-brand-fill-loud); }
.toolbar-dropdown .toolbar-subitem { font-size: var(--wa-font-size-s); }
.toolbar-dropdown .toolbar-subitem::part(icon) { padding-inline-start: var(--wa-space-s); }
.toolbar-talk-count {
	margin-inline-start: var(--wa-space-xs);
	padding-inline: var(--wa-space-xs);
	border-radius: var(--wa-border-radius-pill);
	background: var(--wa-color-brand-fill-loud);
	color: var(--wa-color-brand-on-loud);
	font-size: var(--wa-font-size-xs);
}

.topbar-tools .account-member {
	justify-content: center;
	inline-size: 42px;
	padding: 0;
}
.topbar-tools .account-member span { display: none; }

.topbar-tools .talk-badge {
	position: relative;
	inline-size: 42px;
	padding: 0;
}
.topbar-tools .talk-badge span {
	position: absolute;
	inset-block-start: calc(-1 * var(--wa-space-2xs));
	inset-inline-end: calc(-1 * var(--wa-space-2xs));
	box-sizing: border-box;
	border: 2px solid var(--shell-bar-bg);
}

/* ── 기기 알림 — 벨 아래 선택 안내·브라우저 설정 도움말 ─── */
.notification-bell { position: relative; }
.notification-trigger {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: 42px;
	block-size: 42px;
	padding: 0;
	border: 1px solid var(--shell-bar-tool-line);
	border-radius: var(--wa-border-radius-l);
	background: var(--shell-bar-tool-bg);
	color: var(--shell-bar-ink);
	font-size: var(--wa-font-size-m);
	cursor: pointer;
}
.notification-trigger[data-on='true'] { color: var(--wa-color-brand-fill-loud); }
.notification-trigger:hover { background: var(--shell-bar-hover); }
.notification-bell button:disabled { cursor: wait; opacity: 0.65; }
.notification-prompt,
.notification-help {
	box-sizing: border-box;
	inline-size: min(22rem, calc(100vw - 2 * var(--wa-space-s)));
	padding: var(--wa-space-l);
	border: 1px solid var(--wa-color-surface-border);
	border-radius: var(--wa-border-radius-l);
	background: var(--wa-color-surface-raised);
	color: var(--wa-color-text-normal);
	box-shadow: var(--wa-shadow-l);
	font-size: var(--wa-font-size-s);
	text-align: start;
}
.notification-prompt {
	position: absolute;
	inset-block-start: calc(100% + var(--wa-space-xs));
	inset-inline-end: 0;
	z-index: 40;
	max-block-size: calc(100dvh - var(--bar-height) - var(--wa-space-l));
	overflow: auto;
}
.notification-help { position: fixed; max-block-size: calc(100dvh - 2 * var(--wa-space-l)); }
.notification-help::backdrop { background: rgb(0 0 0 / 0.4); }
.notification-bell h2 { margin-block: 0 var(--wa-space-s); padding-inline-end: var(--wa-space-l); font-size: var(--wa-font-size-m); }
.notification-bell p { margin-block: var(--wa-space-s); line-height: 1.6; }
.notification-help ol { padding-inline-start: var(--wa-space-l); }
.notification-help li + li { margin-block-start: var(--wa-space-s); }
.notification-close {
	position: absolute;
	inset-block-start: var(--wa-space-xs);
	inset-inline-end: var(--wa-space-xs);
	display: grid;
	place-items: center;
	inline-size: 32px;
	block-size: 32px;
	padding: 0;
	border: 0;
	border-radius: var(--wa-border-radius-m);
	background: transparent;
	color: inherit;
	cursor: pointer;
}
.notification-close:hover { background: var(--wa-color-surface-lowered); }
.notification-action {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-block-size: 40px;
	margin-block-start: var(--wa-space-xs);
	padding: var(--wa-space-xs) var(--wa-space-m);
	border: 0;
	border-radius: var(--wa-border-radius-m);
	background: var(--wa-color-brand-fill-loud);
	color: var(--wa-color-brand-on-loud);
	font: inherit;
	text-decoration: none;
	cursor: pointer;
}
.notification-settings {
	display: block;
	margin-block-start: var(--wa-space-m);
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--wa-color-text-normal);
	font: inherit;
	text-decoration: underline;
	text-align: start;
	cursor: pointer;
}

@media (max-width: 599px) {
	/* 로그인 뒤 도구가 늘어도 320px 화면 안에서 줄바꿈한다. */
	.topbar .topbar-tools { max-inline-size: 100%; }
	.notification-trigger { inline-size: 34px; block-size: 34px; font-size: var(--wa-font-size-s); }
	.topbar-tools .locale-switcher > wa-button:not(:defined),
	.topbar-tools .locale-switcher > wa-button::part(base) {
		inline-size: auto;
		padding-inline: var(--wa-space-xs);
	}
	.topbar-tools .locale-code { display: inline; }
	.topbar-tools .account-member,
	.topbar-tools .talk-badge { inline-size: 34px; }
}