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

.glossary-book {
	display: grid;
	gap: var(--sonub-space-6);
	min-inline-size: 0;
}

/* 찾기 */
.glossary-book-filter {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	max-inline-size: var(--sonub-form-width);
	color: var(--wa-color-text-quiet);
}
.glossary-book-filter input {
	flex: 1;
	min-inline-size: 0;
}

.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[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);
	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: 2.5rem;
	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-fill, minmax(min(100%, 20rem), 1fr));
	gap: var(--sonub-space-4);
}
.glossary-book-term {
	display: flex;
	flex-direction: column;
	gap: 0.45rem;
	min-inline-size: 0;
	scroll-margin-block-start: 6rem;
}
.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.05rem * 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(0.92rem * var(--wa-font-size-scale, 1));
	line-height: 1.6;
}
.glossary-book-long {
	color: var(--sonub-muted);
	font-size: calc(0.9rem * var(--wa-font-size-scale, 1));
	line-height: 1.75;
}
.glossary-book-term .glossary-book-links {
	display: flex;
	flex-wrap: wrap;
	gap: 0.35rem 1rem;
	margin-block-start: auto;
	padding-block-start: 0.4rem;
	font-size: calc(0.82rem * var(--wa-font-size-scale, 1));
}
.glossary-book-links a {
	display: inline-flex;
	align-items: center;
	gap: 0.3rem;
	min-block-size: 2.5rem;
	color: var(--wa-color-brand-on-quiet);
	text-decoration: none;
}
.glossary-book-links a:hover {
	text-decoration: underline;
}
.glossary-book-links a:focus-visible,
.glossary-book-open:focus-visible {
	outline: var(--wa-focus-ring);
	outline-offset: 2px;
}

.glossary-book-empty {
	margin: 0;
	color: var(--wa-color-text-quiet);
}