/* 용어집 화면(/glossary) — 출처마다 머리 카드와 용어 카드들(SSOT 23절 "용어집"). 위젯 components/widget/glossary/book */

.glossary-book {
	display: grid;
	gap: var(--sonub-space-6);
	min-inline-size: 0;
}
.glossary-book :is(h2, h3, p, a) { overflow-wrap: anywhere; }
.glossary-book:lang(ko) :is(h2, h3, p, a) { word-break: keep-all; }
.glossary-book i { flex: none; }

/* 찾기 */
.glossary-book-tools {
	display: grid;
	gap: var(--wa-space-s);
	margin: 0;
	padding: var(--wa-space-l);
	scroll-margin-block-start: calc(var(--sonub-header-height, var(--bar-height)) + var(--wa-space-m));
}
.glossary-book-search { display: grid; gap: var(--wa-space-xs); }
.glossary-book-search > label { font-weight: var(--wa-font-weight-semibold); }
.glossary-book-filter {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	color: var(--wa-color-text-quiet);
}
.glossary-book-filter input {
	flex: 1;
	min-inline-size: 0;
}
.glossary-book-filter input::-webkit-search-cancel-button { appearance: none; }
.glossary-book-clear { flex: none; min-inline-size: 44px; min-block-size: 44px; padding: var(--wa-space-xs); }
.glossary-book-count { margin: 0; color: var(--sonub-muted); font-size: calc(0.84rem * var(--wa-font-size-scale, 1)); }

.glossary-book-note {
	display: flex;
	align-items: baseline;
	gap: 0.5rem;
	margin: 0;
	color: var(--wa-color-text-quiet);
	font-size: calc(0.86rem * var(--wa-font-size-scale, 1));
	line-height: 1.7;
}
.glossary-book-note i {
	color: var(--wa-color-brand-fill-loud);
}

/* 출처 */
.glossary-book-source {
	display: grid;
	gap: var(--sonub-space-4);
	min-inline-size: 0;
}
.glossary-book-source + .glossary-book-source { margin-block-start: var(--wa-space-l); }
.glossary-book-source[hidden],
.glossary-book-term[hidden] {
	display: none;
}
.glossary-book-source-head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--sonub-space-3);
	padding: var(--wa-space-l);
	background: color-mix(in srgb, var(--wa-color-brand-fill-loud) 6%, var(--wa-color-surface-raised));
}
.glossary-book-source-head > div {
	min-inline-size: 0;
}
.glossary-book-source-head h2 {
	margin: 0.15rem 0 0.25rem;
	font-size: calc(1.2rem * var(--wa-font-size-scale, 1));
	overflow-wrap: anywhere;
}
.glossary-book-source-head p {
	margin: 0;
	color: var(--wa-color-text-quiet);
	font-size: calc(0.84rem * var(--wa-font-size-scale, 1));
}
.glossary-book-open {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	min-block-size: 44px;
	padding-block: var(--wa-space-xs);
	color: var(--wa-color-brand-on-quiet);
	font-weight: 600;
	text-decoration: none;
}
.glossary-book-open:hover {
	text-decoration: underline;
}

/* 용어 카드 */
.glossary-book-terms {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 24rem), 1fr));
	align-items: start;
	gap: var(--sonub-space-4);
}
.glossary-book-term {
	display: flex;
	flex-direction: column;
	gap: var(--wa-space-s);
	padding: var(--wa-space-l);
	min-inline-size: 0;
	scroll-margin-block-start: calc(var(--sonub-header-height, var(--bar-height)) + var(--wa-space-m));
}
.glossary-book-source > header h2 { scroll-margin-block-start: calc(var(--sonub-header-height, var(--bar-height)) + var(--wa-space-m)); }
.glossary-book-term:target {
	outline: 2px solid var(--wa-color-brand-border-normal);
	outline-offset: 2px;
}
.glossary-book-term h3 {
	margin: 0;
	color: var(--wa-color-brand-on-quiet);
	font-size: calc(1.15rem * var(--wa-font-size-scale, 1));
	line-height: 1.45;
	overflow-wrap: anywhere;
}
.glossary-book-term p {
	margin: 0;
	overflow-wrap: anywhere;
}
.glossary-book-original {
	color: var(--wa-color-text-quiet);
	font-size: calc(0.8rem * var(--wa-font-size-scale, 1));
}
.glossary-book-short {
	font-weight: 600;
	font-size: calc(1rem * var(--wa-font-size-scale, 1));
	line-height: 1.6;
}
.glossary-book-long {
	color: var(--sonub-muted);
	font-size: calc(1rem * var(--wa-font-size-scale, 1));
	line-height: 1.75;
}
/* [더 배우기] 단추 하나 — 카드 아래 구분선 위에 */
.glossary-book-term .glossary-book-more {
	margin-block-start: var(--wa-space-2xs);
	padding-block-start: var(--wa-space-xs);
	border-block-start: 1px solid var(--sonub-border);
}
.glossary-book-more .sonub-button {
	gap: 0.4rem;
	min-block-size: 44px;
	font-size: calc(0.9rem * var(--wa-font-size-scale, 1));
}
.glossary-book-open:focus-visible {
	outline: var(--wa-focus-ring);
	outline-offset: 2px;
}

.glossary-book-empty {
	display: flex;
	align-items: center;
	gap: var(--wa-space-s);
	margin: 0;
	color: var(--wa-color-text-quiet);
}