/*
 * 오른쪽 빠른 막대 — 이전 사이트 QuickBar.svelte · StudyProgress.svelte · shell-modern.css(#pes-app .quickbar…)를 옮겼다.
 * 1,100px 이상에서만 본문 오른쪽에 떠 있는 카드로 보인다(이전 사이트와 같은 폭 기준). 그보다 좁으면 없다 — 학습 진도는 메뉴 "공부 > 진도" 에 있다.
 * 마크업은 resources/views/partials/quickbar.blade.php, 진도 숫자는 public/js/quickbar.js.
 */

.quickbar { display: none; }

/* ── 배치: 윗줄은 두 칸을 모두 쓰고, 본문·바닥글 오른쪽에 막대 칸을 둔다 ─── */
@media (min-width: 1100px) {
	.page {
		--quick-width: 15.5rem;
		display: grid;
		grid-template-columns: minmax(0, 1fr) var(--quick-width);
		grid-template-rows: auto 1fr auto;
	}
	.page > .topbar { grid-column: 1 / -1; }
	/* 바닥글은 본문 칸에만 — 따라 내려오는 빠른 막대가 바닥글을 덮지 않게 */
	.page > .content { grid-column: 1; grid-row: 2; }
	.page > .site-footer { grid-column: 1; grid-row: 3; }

	.quickbar {
		grid-column: 2;
		grid-row: 2;
		align-self: start;
		position: sticky;
		inset-block-start: calc(var(--bar-height) + var(--wa-space-m));
		display: flex;
		flex-direction: column;
		gap: var(--wa-space-s);
		max-block-size: calc(100dvh - var(--bar-height) - 2 * var(--wa-space-m));
		margin-block: var(--wa-space-m);
		margin-inline-end: var(--wa-space-m);
		padding: var(--wa-space-s) var(--wa-space-xs);
		box-sizing: border-box;
		overflow-y: auto;
		scrollbar-width: thin;
		border: 1px solid var(--wa-color-surface-border);
		border-radius: var(--wa-border-radius-l);
		background: var(--wa-color-surface-raised);
		box-shadow: var(--theme-shadow-card);
	}
}

@media (min-width: 1440px) {
	.page { --quick-width: 17rem; }
}

/* 칸 제목 — 작은 회색 글자 + 오른쪽 강조 아이콘 */
:is(.quickbar, .study-inline) .quick-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--wa-space-2xs);
	padding: var(--wa-space-3xs) var(--wa-space-xs) var(--wa-space-2xs);
	font-size: 0.72rem;
	font-weight: 750;
	letter-spacing: 0.04em;
	color: var(--wa-color-text-quiet);
}
:is(.quickbar, .study-inline) .quick-head > i { font-size: 1rem; color: var(--wa-color-brand-fill-loud); }
:is(.quickbar, .study-inline) .quick-head span i { color: var(--wa-color-brand-fill-loud); }
:is(.quickbar, .study-inline) .quick-total { font-variant-numeric: tabular-nums; color: var(--wa-color-brand-on-quiet); }

.quickbar section + section,
.quickbar section + nav,
.quickbar nav + section {
	padding-block-start: var(--wa-space-s);
	border-block-start: 1px solid var(--wa-color-surface-border);
}

/* ── 학습 진도 ─────────────────────────────────── */
:is(.quickbar, .study-inline) .quick-signup { display: flex; flex-direction: column; gap: var(--wa-space-xs); padding-inline: var(--wa-space-xs); }
:is(.quickbar, .study-inline) .quick-signup p { margin: 0; font-size: 0.9rem; font-weight: 600; line-height: 1.45; }
:is(.quickbar, .study-inline) .quick-signup .quick-signup-detail { font-size: 0.78rem; font-weight: 400; color: var(--wa-color-text-quiet); }
:is(.quickbar, .study-inline) .quick-signup .pes-button { justify-content: center; }

:is(.quickbar, .study-inline) .quick-tracks { display: flex; flex-direction: column; gap: var(--wa-space-3xs); margin: 0; padding: 0; list-style: none; }
:is(.quickbar, .study-inline) .quick-tracks a {
	display: flex;
	align-items: center;
	gap: var(--wa-space-2xs);
	padding: var(--wa-space-2xs) var(--wa-space-xs);
	border-radius: 0.65rem;
	font-size: 0.8rem;
	color: var(--wa-color-text-normal);
	text-decoration: none;
}
:is(.quickbar, .study-inline) .quick-tracks a:hover { background: var(--wa-color-brand-fill-quiet); color: var(--wa-color-brand-on-quiet); }
:is(.quickbar, .study-inline) .quick-ord {
	display: inline-grid;
	place-items: center;
	flex: none;
	inline-size: 1.25rem;
	block-size: 1.25rem;
	border-radius: 50%;
	font-size: 0.68rem;
	font-weight: 700;
	background: var(--wa-color-surface-lowered);
	color: var(--wa-color-text-quiet);
}
:is(.quickbar, .study-inline) .quick-tracks a > i { flex: none; color: var(--wa-color-brand-fill-loud); --fa-secondary-opacity: 0.4; }
:is(.quickbar, .study-inline) .quick-name { flex: 1; min-inline-size: 0; overflow-wrap: anywhere; }
:is(.quickbar, .study-inline) .quick-count { flex: none; font-size: 0.72rem; font-variant-numeric: tabular-nums; color: var(--wa-color-text-quiet); }
:is(.quickbar, .study-inline) .quick-count.prep { font-variant-numeric: normal; }
:is(.quickbar, .study-inline) .quick-bar {
	display: block;
	block-size: 3px;
	margin-inline: calc(var(--wa-space-xs) + 1.25rem + var(--wa-space-2xs)) var(--wa-space-xs);
	border-radius: 2px;
	background: linear-gradient(to right, var(--wa-color-brand-fill-loud) var(--pct, 0%), var(--wa-color-surface-lowered) var(--pct, 0%));
}
[dir='rtl'] :is(.quickbar, .study-inline) .quick-bar { background: linear-gradient(to left, var(--wa-color-brand-fill-loud) var(--pct, 0%), var(--wa-color-surface-lowered) var(--pct, 0%)); }
:is(.quickbar, .study-inline) .is-next > a { background: color-mix(in srgb, var(--wa-color-brand-fill-loud) 7%, transparent); }
:is(.quickbar, .study-inline) .is-next .quick-ord { background: var(--wa-color-brand-fill-loud); color: var(--wa-color-brand-on-loud); }
:is(.quickbar, .study-inline) .is-done .quick-ord { background: var(--wa-color-success-fill-quiet); color: var(--wa-color-success-on-quiet); }
:is(.quickbar, .study-inline) .is-done .quick-count { color: var(--wa-color-success-on-quiet); }

:is(.quickbar, .study-inline) .quick-study-foot {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--wa-space-2xs);
	padding: var(--wa-space-2xs) var(--wa-space-xs) 0;
	font-size: 0.72rem;
}
:is(.quickbar, .study-inline) .quick-study-foot a { font-weight: 600; color: var(--wa-color-brand-on-quiet); text-decoration: none; }
:is(.quickbar, .study-inline) .quick-study-foot button {
	padding: 0;
	border: 0;
	background: none;
	font: inherit;
	color: var(--wa-color-text-quiet);
	text-decoration: underline;
	text-underline-offset: 2px;
	cursor: pointer;
}

/* ── 바로가기 · 섹션 세부 메뉴 — 아이콘 타일 + 이름. 넷마다 색이 돈다(이전 사이트 dock) ─── */
.quickbar .quick-links ul { display: grid; gap: var(--wa-space-3xs); margin: 0; padding: 0; list-style: none; }
.quickbar .quick-links li { --dock-tone: var(--wa-color-brand-on-quiet); min-inline-size: 0; }
.quickbar .quick-links li:nth-child(4n + 2) { --dock-tone: var(--wa-color-success-on-quiet); }
.quickbar .quick-links li:nth-child(4n + 3) { --dock-tone: var(--wa-color-warning-on-quiet); }
.quickbar .quick-links li:nth-child(4n) { --dock-tone: var(--wa-color-brand-on-quiet); }
.quickbar .quick-links :is(a, button) {
	display: flex;
	align-items: center;
	gap: var(--wa-space-xs);
	min-block-size: 3rem;
	padding: var(--wa-space-2xs);
	box-sizing: border-box;
	border: 1px solid transparent;
	border-radius: 0.85rem;
	font-size: 0.8rem;
	font-weight: 600;
	line-height: 1.45;
	color: var(--wa-color-text-normal);
	text-decoration: none;
	overflow-wrap: anywhere;
	transition: background-color 160ms, border-color 160ms;
}
.quickbar .quick-links :is(a, button) > i {
	display: inline-grid;
	place-items: center;
	flex: 0 0 2.15rem;
	block-size: 2.15rem;
	border-radius: 0.7rem;
	font-size: 1.05rem;
	background: color-mix(in srgb, var(--dock-tone) 13%, var(--wa-color-surface-raised));
	color: var(--dock-tone);
	--fa-primary-color: var(--dock-tone);
	--fa-secondary-color: var(--dock-tone);
	--fa-secondary-opacity: 0.45;
}
.quickbar .quick-links :is(a, button):hover,
.quickbar .quick-links a[aria-current] {
	background: color-mix(in srgb, var(--wa-color-brand-fill-loud) 8%, var(--wa-color-surface-raised));
	border-color: color-mix(in srgb, var(--wa-color-brand-fill-loud) 20%, transparent);
}
.quickbar .quick-links a[aria-current] { color: var(--wa-color-brand-on-quiet); }

/* 다크 테마: 짙은 색 글자가 어두운 바탕에 묻히지 않게 타일 색을 밝힌다 */
html[data-pes-theme='dark'] .quickbar .quick-links :is(a, button) > i { --dock-tone-ink: color-mix(in srgb, var(--dock-tone) 55%, white); color: var(--dock-tone-ink); --fa-primary-color: var(--dock-tone-ink); --fa-secondary-color: var(--dock-tone-ink); }

/* ── 최근 인공지능 뉴스 ─────────────────────────── */
.quickbar .quick-news ul { display: grid; gap: 1px; margin: 0; padding: 0; list-style: none; }
.quickbar .quick-news li a {
	display: flex;
	flex-direction: column;
	gap: 0.2rem;
	padding: var(--wa-space-2xs) var(--wa-space-xs);
	border-radius: 0.65rem;
	color: var(--wa-color-text-normal);
	text-decoration: none;
}
.quickbar .quick-news li a:hover { background: var(--wa-color-brand-fill-quiet); color: var(--wa-color-brand-on-quiet); }
/* 제목은 두 줄까지만 — 긴 헤드라인 하나가 목록 전체를 밀어내지 않게 */
.quickbar .quick-news li span {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	overflow: hidden;
	font-size: 0.8rem;
	line-height: 1.45;
	overflow-wrap: anywhere;
}
.quickbar .quick-news time { font-size: 0.68rem; color: var(--wa-color-text-quiet); }
.quickbar .quick-news-all {
	display: inline-flex;
	align-items: center;
	align-self: flex-end;
	gap: var(--wa-space-3xs);
	margin-block-start: var(--wa-space-3xs);
	padding: var(--wa-space-3xs) var(--wa-space-xs);
	border-radius: 0.5rem;
	font-size: 0.75rem;
	font-weight: 600;
	color: var(--wa-color-brand-on-quiet);
	text-decoration: none;
}
.quickbar .quick-news { display: flex; flex-direction: column; }
.quickbar .quick-news-all:hover { background: var(--wa-color-brand-fill-quiet); }
[dir='rtl'] .quickbar .quick-news-all i { transform: scaleX(-1); }

@media (prefers-reduced-motion: reduce) {
	.quickbar .quick-links a { transition: none; }
}

/* ── 본문 위 학습 진도 한 줄(1,099px 이하) — 빠른 막대가 없는 좁은 화면의 자리(이전 사이트 .study-inline) ─── */
.study-inline { display: none; }
@media (max-width: 1099px) {
	.study-inline {
		display: block;
		margin-block-end: var(--wa-space-m);
		padding: var(--wa-space-s) var(--wa-space-xs);
		border: 1px solid var(--wa-color-surface-border);
		border-radius: 1rem;
		background: var(--wa-color-surface-raised);
		box-shadow: var(--theme-shadow-card);
	}
	.study-inline .quick-study { display: grid; gap: var(--wa-space-2xs); }
	/* 가입 안내는 한 줄 문장 + 단추 */
	.study-inline .quick-signup { flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; }
	.study-inline .quick-signup p { flex: 1 1 14rem; font-size: 0.85rem; }
}
.study-inline .quick-peek {
	display: flex;
	align-items: center;
	gap: var(--wa-space-xs);
	inline-size: 100%;
	padding: var(--wa-space-2xs) var(--wa-space-xs);
	border: 0;
	border-radius: 0.65rem;
	background: color-mix(in srgb, var(--wa-color-brand-fill-loud) 7%, transparent);
	color: var(--wa-color-text-normal);
	font: inherit;
	font-size: 0.85rem;
	text-align: start;
	cursor: pointer;
}
.study-inline .quick-peek-next { flex: 1; min-inline-size: 0; font-weight: 600; overflow-wrap: anywhere; }
.study-inline .quick-peek > i { flex: none; color: var(--wa-color-brand-fill-loud); transition: rotate 160ms; }
.study-inline .quick-peek[aria-expanded='true'] > i { rotate: 180deg; }
@media (prefers-reduced-motion: reduce) {
	.study-inline .quick-peek > i { transition: none; }
}

/* ── 용어 사전 창(모든 화면) — 이전 사이트 GlossaryPanel.svelte ─── */
.glossary-panel {
	inline-size: min(56rem, calc(100vw - 2rem));
	max-block-size: min(46rem, calc(100dvh - 2rem));
	padding: var(--wa-space-l);
	border: 1px solid var(--wa-color-surface-border);
	border-radius: 1.25rem;
	background: var(--wa-color-surface-raised);
	color: var(--wa-color-text-normal);
	box-shadow: var(--theme-shadow-overlay);
}
.glossary-panel[open] { display: flex; flex-direction: column; align-items: stretch; gap: var(--wa-space-s); }
/* Web Awesome 의 기본 단추 모양(고정 높이·가운데 정렬·한 줄)을 이 창의 목록·칩·닫기 단추에서는 쓰지 않는다 */
.glossary-panel button { block-size: auto; margin: 0; white-space: normal; font-weight: inherit; }
.glossary-panel::backdrop { background: rgb(0 0 0 / 0.42); }
.glossary-panel > header { display: flex; align-items: center; justify-content: space-between; gap: var(--wa-space-s); }
.glossary-panel h2 { display: flex; align-items: center; gap: var(--wa-space-xs); margin: 0; font-size: var(--wa-font-size-l); }
.glossary-panel h2 > i { color: var(--wa-color-brand-fill-loud); }
.glossary-panel .glossary-panel-close {
	display: inline-grid;
	padding: 0;
	place-items: center;
	inline-size: 2.25rem;
	block-size: 2.25rem;
	border: 1px solid var(--wa-color-surface-border);
	border-radius: 999px;
	background: transparent;
	color: var(--wa-color-text-quiet);
	cursor: pointer;
}
.glossary-panel-lead { margin: 0; font-size: 0.88rem; color: var(--wa-color-text-quiet); }
.glossary-panel-search {
	display: flex;
	align-items: center;
	gap: var(--wa-space-xs);
	padding: var(--wa-space-2xs) var(--wa-space-s);
	border: 1px solid var(--wa-color-surface-border);
	border-radius: 0.75rem;
	background: var(--wa-color-surface-default);
	color: var(--wa-color-text-quiet);
}
.glossary-panel-search input { flex: 1; min-inline-size: 0; border: 0; outline: 0; background: transparent; font: inherit; color: var(--wa-color-text-normal); padding-block: var(--wa-space-2xs); }
.glossary-panel-search:focus-within { outline: var(--wa-focus-ring); }
.glossary-panel-body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: var(--wa-space-m); min-block-size: 0; flex: 1; }
.glossary-panel-list,
.glossary-panel-detail { min-block-size: 0; overflow-y: auto; scrollbar-width: thin; }
.glossary-panel-list { max-block-size: 30rem; }
.glossary-panel-list h3 { margin: var(--wa-space-s) 0 var(--wa-space-3xs); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.04em; color: var(--wa-color-text-quiet); }
.glossary-panel-list ul,
.glossary-panel-related { margin: 0; padding: 0; list-style: none; }
.glossary-panel-list li button {
	display: grid;
	justify-content: stretch;
	gap: 0.1rem;
	inline-size: 100%;
	padding: var(--wa-space-2xs) var(--wa-space-xs);
	border: 1px solid transparent;
	border-radius: 0.65rem;
	background: transparent;
	color: inherit;
	font: inherit;
	text-align: start;
	cursor: pointer;
}
.glossary-panel-list li button strong { font-size: 0.9rem; }
.glossary-panel-list li button span { font-size: 0.8rem; color: var(--wa-color-text-quiet); overflow-wrap: anywhere; }
.glossary-panel-list li button:hover,
.glossary-panel-list li button.active { background: var(--wa-color-brand-fill-quiet); border-color: color-mix(in srgb, var(--wa-color-brand-fill-loud) 22%, transparent); }
.glossary-panel-detail { padding: var(--wa-space-s) var(--wa-space-m); border-radius: 1rem; background: var(--wa-color-surface-lowered); }
.glossary-panel-detail h3 { margin: 0 0 var(--wa-space-2xs); font-size: var(--wa-font-size-l); }
.glossary-panel-detail p { margin: 0 0 var(--wa-space-s); line-height: 1.7; overflow-wrap: anywhere; }
.glossary-panel-detail .glossary-panel-short { font-weight: 600; color: var(--wa-color-brand-on-quiet); }
/* 쉽게 말하면 · 예시 — 용어 팝업(public/css/pages/glossary.css)과 같은 상자 */
.glossary-panel-detail :is(.glossary-panel-easy, .glossary-panel-example) { display: grid; gap: 0.15rem; padding: var(--wa-space-xs) var(--wa-space-s); border-radius: var(--wa-border-radius-m); font-size: 0.92em; }
.glossary-panel-detail .glossary-panel-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-panel-detail .glossary-panel-example { background: var(--wa-color-surface-default); }
.glossary-panel-detail :is(.glossary-panel-easy, .glossary-panel-example) strong { display: flex; align-items: center; gap: 0.3rem; }
.glossary-panel-detail .glossary-panel-easy strong i { color: var(--wa-color-brand-fill-loud); }
.glossary-panel-examples { display: grid; gap: 0.3rem; margin: 0; padding: 0; list-style: none; }
.glossary-panel-examples li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.1rem 0.5rem; }
.glossary-panel-examples code { padding: 0.05rem 0.35rem; border-radius: var(--wa-border-radius-s); background: var(--wa-color-surface-raised); font-family: var(--wa-font-family-code, ui-monospace, monospace); font-size: 0.85em; white-space: pre-wrap; overflow-wrap: anywhere; }
.glossary-panel-examples code + span { color: var(--wa-color-text-quiet); }
.glossary-panel-detail h4 { margin: var(--wa-space-s) 0 var(--wa-space-2xs); font-size: 0.8rem; color: var(--wa-color-text-quiet); }
.glossary-panel-related { display: flex; flex-wrap: wrap; gap: var(--wa-space-2xs); }
.glossary-panel-related button {
	padding: 0.2rem 0.7rem;
	border: 1px solid var(--wa-color-surface-border);
	border-radius: 999px;
	background: var(--wa-color-surface-raised);
	color: var(--wa-color-text-normal);
	font: inherit;
	font-size: 0.8rem;
	cursor: pointer;
}
.glossary-panel-related button:hover { border-color: var(--wa-color-brand-fill-loud); color: var(--wa-color-brand-on-quiet); }
.glossary-panel-more { display: inline-flex; align-items: center; gap: var(--wa-space-2xs); margin-block-start: var(--wa-space-s); font-weight: 600; color: var(--wa-color-brand-on-quiet); text-decoration: none; }
.glossary-panel-empty { margin: var(--wa-space-m) 0; color: var(--wa-color-text-quiet); font-size: 0.88rem; }
@media (max-width: 700px) {
	.glossary-panel { padding: var(--wa-space-m); }
	.glossary-panel-body { grid-template-columns: minmax(0, 1fr); }
	.glossary-panel-list { max-block-size: 40vh; }
}

/* 빠른 막대의 [용어 사전] — 링크가 아닌 단추도 바로가기 타일과 같은 모양(Web Awesome 기본 단추 모양을 걷는다) */
.quickbar .quick-links button {
	inline-size: 100%;
	block-size: auto;
	margin: 0;
	justify-content: flex-start;
	border: 1px solid transparent;
	background: transparent;
	font-family: inherit;
	white-space: normal;
	text-align: start;
	cursor: pointer;
}

/* 수업 영역의 화면이 아직 없는 항목(partials/lesson-menu-item) — 누를 수 없고 "준비 중"을 붙인다 */
.quickbar .quick-links button:disabled { color: var(--wa-color-text-quiet); cursor: default; }
.quickbar .quick-links button:disabled:hover { background: transparent; border-color: transparent; }
.quickbar .quick-links button:disabled > i { opacity: 0.6; }
.quickbar .quick-links button small { margin-inline-start: auto; font-size: 0.68rem; font-weight: 500; white-space: nowrap; }

/* ── 보조 정보 — 본문과 같은 표면 · 넉넉한 줄 간격 ────────── */
.quickbar .quick-links :is(a, button) { font-size: 0.85rem; line-height: 1.6; }
:is(.quickbar, .study-inline) .quick-head { font-size: 0.78rem; letter-spacing: 0; }
.quickbar .quick-news li span { font-size: 0.85rem; line-height: 1.65; }
@media (min-width: 1100px) {
	.quickbar { padding: var(--wa-space-m) var(--wa-space-xs); margin-block-start: clamp(1rem, 2.1vw, 2rem); box-shadow: var(--wa-shadow-s); }
}

/* ── 보조 메뉴 — 본문보다 작은 카드와 단정한 아이콘 ─────── */
.quickbar .quick-links :is(a, button) { border-radius: var(--wa-border-radius-m); }
.quickbar .quick-links :is(a, button) > i { border-radius: var(--wa-border-radius-s); }
@media (min-width: 1100px) {
	.quickbar { padding: var(--wa-space-m) var(--wa-space-s); box-shadow: none; }
}