/* ── 상단 도구 — 언어·채팅·회원 정보 ─────────────────── */
/* 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);
	box-shadow: 0 5px 20px -16px var(--wa-color-text-quiet);
}

.topbar .menu-tabs { gap: var(--wa-space-2xs); }
.topbar .menu-tab {
	gap: var(--wa-space-2xs);
	border-radius: var(--wa-border-radius-l);
}
.topbar .menu-tab > i {
	display: grid;
	place-items: center;
	inline-size: 2rem;
	block-size: 2rem;
	border-radius: var(--wa-border-radius-m);
	background: color-mix(in srgb, var(--category-color) 9%, transparent);
}
.topbar .menu-cat[data-active] > .menu-tab {
	border-color: transparent;
	box-shadow: none;
}
.topbar .menu-cat[data-active] > .menu-tab > i {
	background: var(--category-color);
	color: var(--wa-color-surface-raised);
	--fa-primary-color: var(--wa-color-surface-raised);
	--fa-secondary-color: var(--wa-color-surface-raised);
	--fa-secondary-opacity: 0.65;
}
.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: var(--wa-color-brand-fill-quiet); }

/* 전체 메뉴도 같은 카드 표면과 넉넉한 누름 영역을 쓴다. */
.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; }

.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) {
	.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; }
}