/* Glossary pages: /glossary and /glossary/<category> (src/lib/app.mjs glossaryIndex, glossaryCategory).
   Loaded after the site styles, only on these pages. Text never goes below 16px. */

.gl-page { max-width: 52rem; margin: 0 auto; color: var(--cq-ink); }
.gl-page h2 { letter-spacing: -0.03em; }

/* Index: categories, search, full list */
.gl-cats { margin-bottom: 2.5rem; }
.gl-cats .cq-editorial-card h3 { margin: 0.4rem 0 0.3rem; }
.gl-cats .cq-editorial-card p { font-size: 16px; line-height: 1.6; margin: 0 0 0.8rem; color: var(--cq-muted); }

.gl-search { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1rem; margin: 0 0 1.25rem; }
.gl-search label { font-size: 16px; font-weight: 700; }
.gl-search input {
  flex: 1 1 16rem; min-width: 0; font: inherit; font-size: 18px; padding: 0.6rem 0.8rem;
  border: 1px solid var(--cq-line); border-radius: 10px; background: #fff; color: var(--cq-ink);
}
.gl-search output { font-size: 16px; color: var(--cq-muted); }

.gl-index-group { border-top: 1px solid var(--cq-line); padding: 1rem 0 0.75rem; }
.gl-index-group h3 { font-size: 20px; margin: 0 0 0.5rem; color: var(--cq-ink); }
.gl-index-group ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 9.5rem), 1fr)); gap: 0.35rem 1rem; }
.gl-index-group a { font-size: 17px; line-height: 1.5; color: var(--cq-ink); text-decoration: none; }
.gl-index-group a:hover, .gl-index-group a:focus { color: var(--cq-blue); text-decoration: underline; }
.gl-empty { font-size: 18px; color: var(--cq-muted); }

/* 목록 위 한 줄 안내 */
.gl-lead{font-size:17px;line-height:1.7;color:var(--cq-muted);margin:0 0 1rem}

/* Category page: level filter, table of contents, terms */
.gl-filter { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0 0 1rem; }
.gl-filter button {
  font: inherit; font-size: 16px; padding: 0.4rem 0.9rem; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--cq-line); background: #fff; color: var(--cq-ink);
}
.gl-filter button[aria-pressed="true"] { background: var(--cq-navy); border-color: var(--cq-navy); color: #fff; }

/* 앵커 여백은 html 의 scroll-padding-top 하나로만 줍니다(cq-glossary.js 가 머리글 높이를 재서 덮어씁니다).
   여기서 scroll-margin-top 을 또 주면 두 값이 더해져 항목이 화면 한참 아래에 섭니다. */
.gl-toc { border: 1px solid var(--cq-line); border-radius: 14px; background: #fff; padding: 1.1rem 1.25rem; margin: 0 0 2rem; }
.gl-toc h2 { font-size: 20px; margin: 0 0 0.6rem; }
.gl-toc ol { margin: 0; padding: 0; list-style: none; columns: 3 12rem; column-gap: 1.5rem; }
.gl-toc li { break-inside: avoid; padding: 0.15rem 0; }
.gl-toc a { font-size: 16px; line-height: 1.5; color: var(--cq-ink); }

.gl-term { border-top: 1px solid var(--cq-line); padding: 1.75rem 0 1.25rem; }
.gl-term h2 { font-size: 26px; line-height: 1.35; margin: 0; }
.gl-term h2 span { display: inline-block; margin-left: 0.4rem; font-size: 16px; font-weight: 600; color: var(--cq-muted); letter-spacing: 0; }
.gl-meta { font-size: 16px; line-height: 1.55; color: var(--cq-muted); margin: 0.35rem 0 0.9rem; }
.gl-short { font-size: 19px; line-height: 1.6; font-weight: 700; margin: 0 0 0.9rem; }
.gl-term > p { font-size: 18px; line-height: 1.75; margin: 0 0 0.9rem; }
.gl-box { border-radius: 12px; padding: 0.9rem 1.1rem; margin: 1rem 0; }
.gl-box > b { display: block; font-size: 16px; margin-bottom: 0.3rem; }
.gl-box p { font-size: 17px; line-height: 1.7; margin: 0 0 0.5rem; }
.gl-box p:last-child { margin-bottom: 0; }
.gl-box .gl-note { font-size: 16px; color: var(--cq-muted); }
.gl-example { background: #f1f5fb; border: 1px solid #dbe4f1; }
.gl-caution { background: #fdf6ee; border: 1px solid #f0e0cb; }
/* 손가락으로 누르는 곳은 44px 을 지킵니다(2026-09-23). 전에는 글자 높이 그대로라 21px 이었고,
   14px 만 빗나가도 옆 링크가 눌렸습니다. 줄 간격은 그대로 두려고 세로 여백 대신 min-height 와 가운데 정렬을 씁니다. */
.gl-links { font-size: 16px; line-height: 1.7; margin: 0.4rem 0; }
.gl-links b { margin-right: 0.35rem; }
.gl-links a { color: var(--cq-blue); display: inline-flex; align-items: center; min-height: 44px; padding: 0 0.15rem; }
.gl-asof { font-size: 16px; line-height: 1.6; color: var(--cq-muted); margin: 0.6rem 0 0; }
/* 「목차로」는 링크인데 본문과 같은 색이라 누를 수 있는 줄 몰랐습니다. 링크 색과 44px 로 바꿉니다. */
/* `.cq-v512 a{color:inherit}` 가 `.gl-top` 보다 구체적이라, 선택자를 한 단계 올려야 색이 먹습니다. */
.gl-term .gl-top { display: inline-flex; align-items: center; min-height: 44px; font-size: 16px; margin-top: 0.2rem; color: var(--cq-blue); }
.gl-term .gl-top::before { content: "↑"; margin-right: 0.3rem; }
/* 필터에 가려진 용어를 링크를 따라와 펼쳤을 때, 왜 보이는지 알립니다(cq-glossary.js). */
.gl-revealed-note { font-size: 16px; line-height: 1.55; color: #7a4a06; background: #fdf6ee; border: 1px solid #f0e0cb;
  border-radius: 10px; padding: 0.5rem 0.8rem; margin: 0 0 0.9rem; }
.gl-others { border-top: 1px solid var(--cq-line); margin-top: 2rem; padding-top: 1.5rem; }
.gl-others h2 { font-size: 22px; margin: 0 0 0.75rem; }
.gl-others ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.gl-others a { display: inline-block; font-size: 16px; padding: 0.35rem 0.8rem; border: 1px solid var(--cq-line); border-radius: 999px; background: #fff; color: var(--cq-ink); text-decoration: none; }

/* Also linked on /learn (category links in .glossary-section) and on lessons with terms ("이 글에 나오는 용어"). */
.gl-learn-cats { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0 0 1.25rem; }
.gl-learn-cats a { display: inline-block; font-size: 16px; line-height: 1.5; padding: 0.4rem 0.9rem; border: 1px solid var(--cq-line); border-radius: 999px; background: #fff; color: var(--cq-ink); font-weight: 600; text-decoration: none; }
.gl-learn-cats a:hover, .gl-learn-cats a:focus { border-color: #8ba6c7; color: var(--cq-blue); }
.gl-lesson-terms { margin: 1.5rem 0; }
.gl-lesson-terms a { color: var(--cq-blue); text-decoration: underline; text-underline-offset: 3px; }

@media (max-width: 30rem) {
  .gl-term h2 { font-size: 23px; }
  .gl-term h2 span { display: block; margin: 0.2rem 0 0; }
  .gl-toc { padding: 1rem; }
  .gl-toc ol { columns: 1; }
  .gl-box { padding: 0.8rem 0.9rem; }
}

/* 레벨 거르개와 목차(2026-09-21). 사이트의 다른 알약 단추와 같은 모양으로 맞추고,
   목차 항목에 레벨 점을 달아 어느 것이 입문인지 눈으로 구분되게 합니다. */
.gl-filter { gap: 0.6rem; margin-bottom: 1.25rem; }
.gl-filter button {
  display: inline-flex; align-items: center; gap: 0.5rem; min-height: 44px; padding: 0.5rem 1rem;
  font-weight: 700; color: #1d2b3a; transition: border-color .15s, background .15s, box-shadow .15s;
}
.gl-filter button::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: #c6d2e2; }
.gl-filter button[data-level="1"]::before { background: #2f7d55; }
.gl-filter button[data-level="2"]::before { background: #1b4bc4; }
.gl-filter button[data-level="3"]::before { background: #7a4a06; }
.gl-filter button:hover { border-color: #b9cdf0; box-shadow: 0 8px 18px -16px rgba(9, 22, 44, .8); }
.gl-filter button[aria-pressed="true"]::before { background: #fff; }

.gl-toc { border-radius: 16px; padding: 1.25rem 1.4rem; background: linear-gradient(140deg, #ffffff 0%, #f7faff 100%); }
.gl-toc h2 { font-size: 20px; margin: 0 0 0.9rem; display: flex; align-items: baseline; gap: 0.5rem; }
.gl-toc ol { columns: 3 13rem; column-gap: 1.75rem; }
.gl-toc li { padding: 0; }
.gl-toc a {
  display: flex; align-items: center; gap: 0.55rem; padding: 0.42rem 0.5rem; margin: 0 -0.5rem;
  border-radius: 8px; text-decoration: none; transition: background .12s, color .12s;
}
.gl-toc a::before { content: ""; width: 7px; height: 7px; border-radius: 50%; flex: none; background: #c6d2e2; }
.gl-toc li[data-level="1"] a::before { background: #2f7d55; }
.gl-toc li[data-level="2"] a::before { background: #1b4bc4; }
.gl-toc li[data-level="3"] a::before { background: #7a4a06; }
.gl-toc a:hover { background: #eaf1fb; color: var(--cq-blue); }
@media (max-width: 600px) { .gl-toc ol { columns: 1; } .gl-toc { padding: 1rem 1.1rem; } }

/* 가나다 목록 다듬기(2026-09-21). 자음 머리글자를 동그란 배지로 세우고, 항목은 눌리는 칸처럼 보이게 합니다. */
.gl-index-group { border-top: 0; padding: 0.4rem 0 1.1rem; }
.gl-index-group + .gl-index-group { border-top: 1px solid var(--cq-line); padding-top: 1.1rem; }
.gl-index-group h3 {
  display: inline-flex; align-items: center; justify-content: center; min-width: 2.1rem; height: 2.1rem;
  margin: 0 0 0.7rem; padding: 0 0.6rem; border-radius: 999px;
  background: #eef3fb; color: #12305e; font-size: 17px; font-weight: 800;
}
.gl-index-group ul { gap: 0.2rem 0.6rem; }
.gl-index-group a {
  display: block; padding: 0.4rem 0.6rem; margin: 0 -0.6rem; border-radius: 8px;
  transition: background .12s, color .12s;
}
.gl-index-group a:hover, .gl-index-group a:focus { background: #eaf1fb; color: var(--cq-blue); text-decoration: none; }

/* 검색 줄: 입력칸을 알약 모양으로, 결과 수를 회색 배지로. */
.gl-search { gap: 0.6rem 0.9rem; margin-bottom: 1.5rem; }
.gl-search input[type="search"], .gl-search input[type="text"] {
  min-height: 46px; border-radius: 999px; padding: 0.55rem 1.1rem; border: 1px solid var(--cq-line);
  font-size: 18px; background: #fff; min-width: min(100%, 22rem);
}
.gl-search input:focus-visible { outline: 3px solid #9cc2ff; outline-offset: 2px; border-color: #b9cdf0; }
.gl-search output { background: #eef2f8; border-radius: 999px; padding: 0.3rem 0.8rem; font-weight: 700; color: #3c4a5e; }