/*
 * 용어 사전 — <x-glossary.text> 가 감싼 용어 단추(.glossary-term)와 그 뜻을 보이는 팝업(.glossary-pop).
 * 이전 사이트 components/glossary/Term.svelte · TermPopover.svelte · TermDetail.svelte 의 스타일을 옮겼다(음성 단추는 뺐다).
 * 팝업 틀은 components/glossary/assets.blade.php — 위에서 아래로 표기·분류 → 한 줄 뜻 → 설명 → 쉽게 말하면 → 예시 → 관련 용어 → 더 배우기.
 * <x-glossary.text>·메뉴 링크(a[data-term])를 그리는 화면이 싣는다. 선택자는 모두 glossary- 로 시작해 다른 화면과 겹치지 않는다.
 * 방향이 있는 속성은 논리 속성만 쓴다(ar·ur). 팝업의 left·top 은 glossary.js 가 화면 좌표로 넣는다.
 */

/* ── 용어 단추 ─────────────────────────────────── */
.glossary-term {
	display: inline;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	color: inherit;
	font: inherit;
	line-height: inherit;
	letter-spacing: inherit;
	text-align: inherit;
	cursor: help;
	/* 점선 밑줄이 "여기 설명이 있다"는 신호다 — 색만으로 알리면 색각 이상 사용자가 놓친다. */
	text-decoration: underline dotted color-mix(in oklab, var(--wa-color-brand-fill-loud) 70%, transparent);
	text-decoration-thickness: 1.5px;
	text-underline-offset: 0.22em;
}
.glossary-term:hover,
.glossary-term:focus-visible,
.glossary-term[aria-expanded='true'] {
	color: var(--wa-color-brand-fill-loud);
	text-decoration-style: solid;
}
.glossary-term:focus-visible {
	border-radius: var(--wa-border-radius-s);
	outline: var(--wa-focus-ring);
	outline-offset: 2px;
}
/* 오른쪽→왼쪽 화면 — 단추 글의 방향은 그 글의 첫 글자를 따른다($PWD·API key 같은 영문 표기가 뒤집혀 보이지 않게). */
[dir='rtl'] .glossary-term:not(.glossary-info) { unicode-bidi: plaintext; }
/* 작은 물음표 — 논리 속성이라 오른쪽→왼쪽 언어에서도 표기 "다음"에 붙는다. */
.glossary-term i {
	margin-inline-start: 0.14em;
	font-size: 0.62em;
	vertical-align: super;
	opacity: 0.55;
}

/* ── 팝업 ─────────────────────────────────────── */
.glossary-pop {
	position: fixed;
	z-index: 100;
	inline-size: min(24rem, calc(100vw - 1rem));
	max-block-size: min(70vh, 34rem);
	overflow-y: auto;
	overscroll-behavior: contain;
	box-sizing: border-box;
	padding: 0.7rem 0.85rem;
	border: 1px solid color-mix(in oklab, var(--wa-color-surface-border) 88%, transparent);
	border-radius: 0.7rem;
	background: var(--wa-color-surface-raised);
	box-shadow: 0 18px 42px -22px var(--wa-color-shadow, rgb(0 0 0 / 0.35)), var(--wa-shadow-s);
	color: var(--wa-color-text-normal);
	font-size: 0.88rem;
	line-height: 1.6;
	text-align: start;
}
.glossary-pop:focus {
	outline: none;
}
.glossary-pop p {
	margin: 0;
}
.glossary-pop-top {
	display: flex;
	align-items: center;
	gap: 0.4rem;
	margin-block-end: 0.2rem;
}
.glossary-pop-term {
	color: var(--wa-color-brand-fill-loud);
	font-size: 1rem;
	font-weight: 700;
}
.glossary-pop-cat {
	padding: 0.05rem 0.45rem;
	border-radius: 999px;
	background: var(--wa-color-surface-lowered);
	color: var(--wa-color-text-quiet);
	font-size: 0.72rem;
	white-space: nowrap;
}
.glossary-pop-close {
	display: inline-grid;
	place-items: center;
	flex: 0 0 auto;
	inline-size: 1.9rem;
	block-size: 1.9rem;
	margin-inline-start: auto;
	margin-block: -0.3rem;
	margin-inline-end: -0.4rem;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: none;
	color: var(--wa-color-text-quiet);
	cursor: pointer;
}
.glossary-pop-close:hover {
	background: var(--wa-color-surface-lowered);
	color: var(--wa-color-text-normal);
}
.glossary-pop-close:focus-visible {
	outline: var(--wa-focus-ring);
	outline-offset: 1px;
}

/* ── 본문 — 한 줄 뜻 · 설명 · 쉽게 말하면 · 예시 ───────── */
.glossary-pop .glossary-pop-short {
	display: block;
	margin-block-end: 0.35rem;
	color: var(--wa-color-text-normal);
	font-size: 0.92rem;
	font-weight: 600;
}
/* 뜻을 받는 동안 — 먼저 보인 표기·한 줄 뜻 아래에 빈 자리를 반짝인다(빈 팝업은 고장처럼 보인다).
   받는 동안에는 설명 이하가 모두 비어 있어 팝업의 끝이 곧 한 줄 뜻의 아래다. */
.glossary-pop[aria-busy='true']::after {
	content: '';
	display: block;
	block-size: 2.4em;
	margin-block-start: 0.35rem;
	border-radius: var(--wa-border-radius-s);
	background: linear-gradient(90deg, var(--wa-color-surface-lowered), var(--wa-color-surface-border), var(--wa-color-surface-lowered));
	background-size: 200% 100%;
	animation: glossary-loading 1.2s linear infinite;
}
.glossary-pop .glossary-pop-easy,
.glossary-pop .glossary-pop-example {
	margin-block-start: 0.55rem;
	padding: 0.45rem 0.6rem;
	border-radius: var(--wa-border-radius-m);
	font-size: 0.84rem;
}
.glossary-pop .glossary-pop-easy {
	border-inline-start: 3px solid var(--wa-color-brand-fill-loud);
	background: color-mix(in oklab, var(--wa-color-brand-fill-quiet) 45%, transparent);
}
.glossary-pop .glossary-pop-example {
	background: var(--wa-color-surface-lowered);
}
.glossary-pop-easy .glossary-pop-label,
.glossary-pop-example .glossary-pop-label {
	display: flex;
	align-items: center;
	gap: 0.3rem;
	margin-block-end: 0.1rem;
	color: var(--wa-color-text-normal);
	font-weight: 600;
}
.glossary-pop-easy .glossary-pop-label i {
	color: var(--wa-color-brand-fill-loud);
}
/* 예시 줄 — 줄마다 코드(왼쪽부터, 고정폭)와 설명. 명령어 사용법처럼 여러 줄일 때 코드가 한눈에 보이게 */
.glossary-pop-examples {
	display: grid;
	gap: 0.3rem;
	margin: 0.15rem 0 0;
	padding: 0;
	list-style: none;
}
.glossary-pop-examples li {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.1rem 0.5rem;
}
.glossary-pop-examples code {
	padding: 0.05rem 0.35rem;
	border-radius: var(--wa-border-radius-s);
	background: var(--wa-color-surface-raised);
	color: var(--wa-color-text-normal);
	font-family: var(--wa-font-family-code, ui-monospace, monospace);
	font-size: 0.8rem;
	white-space: pre-wrap;
	overflow-wrap: anywhere;
}
.glossary-pop-examples code + span {
	color: var(--wa-color-text-quiet);
	font-size: 0.8rem;
}
@keyframes glossary-loading {
	to { background-position: -200% 0; }
}

.glossary-pop .glossary-pop-related {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.3rem;
	margin-block-start: 0.55rem;
}
.glossary-pop-label {
	color: var(--wa-color-text-quiet);
	font-size: 0.76rem;
}
.glossary-pop-chip {
	padding: 0.1rem 0.45rem;
	border: 1px solid color-mix(in oklab, var(--wa-color-surface-border) 90%, transparent);
	border-radius: 999px;
	background: color-mix(in oklab, var(--wa-color-brand-fill-quiet) 40%, transparent);
	color: inherit;
	font: inherit;
	font-size: 0.76rem;
	cursor: pointer;
}
.glossary-pop-chip:hover {
	border-color: var(--wa-color-brand-border-normal);
}
.glossary-pop-chip:focus-visible {
	outline: var(--wa-focus-ring);
	outline-offset: 1px;
}

.glossary-pop-more {
	display: inline-flex;
	align-items: center;
	gap: 0.3rem;
	margin-block-start: 0.6rem;
	color: var(--wa-color-brand-fill-loud);
	font-size: 0.78rem;
	text-decoration: none;
}
.glossary-pop-more:hover {
	text-decoration: underline;
}
[dir='rtl'] .glossary-pop-more i {
	transform: scaleX(-1);
}

/* ── 물음표 단추(<x-glossary.info>) — 글 없이 물음표 하나. 예제 단추·단원 카드 곁과 화면 부분의 사용법에 둔다 ── */
.glossary-term.glossary-info {
	display: inline-grid;
	place-items: center;
	inline-size: 1.5rem;
	block-size: 1.5rem;
	flex: none;
	border-radius: 50%;
	color: var(--wa-color-brand-fill-loud);
	text-decoration: none;
	vertical-align: middle;
	cursor: pointer;
}
.glossary-term.glossary-info i {
	margin: 0;
	font-size: 0.95rem;
	vertical-align: baseline;
	opacity: 0.7;
}
.glossary-term.glossary-info:hover,
.glossary-term.glossary-info[aria-expanded='true'] {
	background: color-mix(in oklab, var(--wa-color-brand-fill-quiet) 55%, transparent);
}
.glossary-term.glossary-info:hover i,
.glossary-term.glossary-info[aria-expanded='true'] i {
	opacity: 1;
}

/* ── 좁은 화면 — 화면 아래에 붙는 시트(glossary.js 의 place() 가 data-side="sheet" 로 두고 자리를 비운다) ── */
.glossary-pop[data-side='sheet'] {
	inset-inline: 0;
	inset-block-end: 0;
	inline-size: 100%;
	max-block-size: 70vh;
	border-end-start-radius: 0;
	border-end-end-radius: 0;
	padding-block-end: max(0.85rem, env(safe-area-inset-bottom));
}

@media (prefers-reduced-motion: reduce) {
	.glossary-pop[aria-busy='true']::after {
		animation: none;
	}
}