/* 도움말(사용 가이드) — 차례 · 글 한 편 (engine/assets/gl-guide.js).
   🔴 색은 역할 토큰만 쓴다(--fg · --muted · --line · --surface · --accent …) — 어두운 화면에서 함께 뒤집힌다.
   모양은 처음 이 위젯을 옮겨 온 원본 홈페이지(/guide · /guide/{slug})의 짜임(차례 카드 · 본문 · 앞뒤 글)을 따른다 — 색 · 글꼴은 브랜드 테마가 정한다. */

.gl-guide-toc {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 12px;
}
.gl-guide-toc a {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md, 14px);
  background: var(--surface);
  color: var(--fg);
  text-decoration: none;
}
.gl-guide-toc a:hover,
.gl-guide-toc a:focus-visible { border-color: var(--accent); }
.gl-guide-toc a:focus-visible,
.gl-guide-back:focus-visible,
.gl-guide-nav a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.gl-guide-toc b { color: var(--fg-strong, var(--fg)); font-weight: 700; line-height: 1.5; }
.gl-guide-toc span { display: flex; align-items: baseline; gap: 8px; color: var(--muted); font-size: 14px; }
/* 빈 차례 · 없는 글 · 못 불러옴 — 임시 글자 한 줄이 아니라 아이콘 + 글 칸(구독 · 라이선스 화면의 상태 칸과 같은 짜임 · gl-billing.css «고도화 2차») */
.gl-guide-empty {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  column-gap: 12px;
  align-items: start;
  box-sizing: border-box;
  max-width: 640px;
  margin: 0;
  padding: 20px 24px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md, 14px);
  background: var(--surface);
  color: var(--fg);
  line-height: 1.6;
}
.gl-guide-empty::before {
  content: "";
  width: 24px;
  height: 24px;
  background-color: var(--muted);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 3.5h8l4 4v13H6z'/%3E%3Cpath d='M14 3.5v4h4M9 12.5h6M9 16h4'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 3.5h8l4 4v13H6z'/%3E%3Cpath d='M14 3.5v4h4M9 12.5h6M9 16h4'/%3E%3C/svg%3E") center / contain no-repeat;
}
.gl-guide-back + .gl-guide-empty { margin-top: 0; }
/* 한글은 낱말 중간에서 줄을 바꾸지 않는다 — 긴 영문 · 주소만 넘칠 때 끊는다 */
.gl-guide, .gl-guide-body { word-break: keep-all; overflow-wrap: break-word; }

.gl-guide-back { display: inline-flex; align-items: baseline; gap: 8px; margin: 0 0 24px; font-size: 14px; color: var(--muted); text-decoration: none; }
.gl-guide-back:hover { color: var(--fg); }
.gl-guide-body { max-width: 760px; color: var(--fg); line-height: 1.75; }
.gl-guide-body h1 { margin: 0 0 16px; color: var(--fg-strong, var(--fg)); line-height: 1.3; }
.gl-guide-body h2 { margin: 36px 0 12px; color: var(--fg-strong, var(--fg)); line-height: 1.35; }
.gl-guide-body h3 { margin: 24px 0 8px; color: var(--fg-strong, var(--fg)); }
.gl-guide-body p { margin: 0 0 16px; }
.gl-guide-body ul { margin: 0 0 16px; padding-left: 1.2em; }
.gl-guide-body li { margin: 4px 0; }
.gl-guide-body blockquote {
  margin: 0 0 16px;
  padding: 12px 16px;
  border-left: 2px solid var(--accent);
  border-radius: 0;
  background: var(--surface);
  color: var(--fg);
}
.gl-guide-body code {
  padding: 0 4px;
  border: 1px solid var(--line);
  border-radius: calc(var(--radius-sm, 8px) / 2);
  background: var(--surface);
  font-size: 14px;
}
.gl-guide-body hr { border: 0; border-top: 1px solid var(--line); margin: 28px 0; }
.gl-guide-img { margin: 16px 0 20px; }
.gl-guide-img img { display: block; max-width: 100%; height: auto; border: 1px solid var(--line); border-radius: var(--radius-md, 12px); }
.gl-guide-img figcaption { margin-top: 8px; color: var(--muted); font-size: 14px; }
/* 다크 짝(2026-10-06) — gl-guide.js 가 짝이 있는 그림만 두 장을 낸다. 사이트 테마(data-theme)를 먼저 따르고, 없으면(시스템) 기기 설정을 따른다 */
.gl-guide-pair .gl-guide-dark { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .gl-guide-pair .gl-guide-light { display: none; }
  :root:not([data-theme="light"]) .gl-guide-pair .gl-guide-dark { display: block; }
}
:root[data-theme="dark"] .gl-guide-pair .gl-guide-light { display: none; }
:root[data-theme="dark"] .gl-guide-pair .gl-guide-dark { display: block; }
.gl-guide-nav { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-top: 40px; padding-top: 16px; border-top: 1px solid var(--line); }
.gl-guide-nav a { display: inline-flex; align-items: baseline; gap: 8px; color: var(--fg); text-decoration: none; }
.gl-guide-nav a:last-child:not(:first-child) { margin-left: auto; }
.gl-guide-nav a:hover { text-decoration: underline; }
/* 화살표 — 글자(← →)가 아니라 SVG(gl-guide.js ICO_BACK · ICO_NEXT · 2026-10-03 대표님 «추천안대로»).
   🔴 영수증(gl-billing)과 같은 이름 · 같은 크기 — gl-ico-back(왼쪽) · gl-ico-next(오른쪽) · 16px · 선 2 · 글과 8px(위 세 줄의 gap) · 글줄 세로 가운데.
   글은 baseline 으로 두고 아이콘만 가운데(align-self) — 상자의 기준선이 글에 남아 «← 목록» 줄 높이 · 자리가 글자 화살표 때와 같다
   (모두 center 로 두면 기준선이 아이콘 밑변으로 옮겨 그 줄이 2px 줄고 아래 본문이 통째로 올라갔다 — 2026-10-03 전후 캡처).
   색은 글자색(currentColor)을 따라 hover · 어두운 화면에서 글과 함께 바뀐다. 도움말이 만든 자리 안에서만 잡는다(다른 위젯의 같은 이름과 겹치지 않게) */
:is(.gl-guide-back, .gl-guide-nav a, .gl-guide-toc span) > :is(.gl-ico-back, .gl-ico-next) {
  flex: none; align-self: center; width: 16px; height: 16px;
  fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}
@media (max-width: 560px) {
  .gl-guide-nav { flex-direction: column; }
}

/* 그림 크게 보기 (gl-guide.js zoomOpen · 2026-10-19) — 누르면 원래 크기 · 크면 그 안에서 밀어 본다 */
.gl-guide-img img[role="button"] { cursor: zoom-in; }
.gl-guide-img img[role="button"]:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
/* 의도 — 크게 보기 막은 밝기와 상관없이 늘 어두운 막 · 그 위 글자·버튼은 늘 흰색(사진을 보는 자리) */
.gl-guide-zoom { position: fixed; inset: 0; z-index: 1000; overflow: auto; padding: 60px 16px 24px; background: rgb(0 0 0 / .88); cursor: zoom-out; text-align: center; -webkit-overflow-scrolling: touch; }
.gl-guide-zoom[hidden] { display: none; }
.gl-guide-zoom img { display: inline-block; max-width: none; width: auto; height: auto; border-radius: 8px; background: var(--surface); cursor: default; }
.gl-guide-zoom-cap { margin: 12px auto 0; max-width: 900px; color: #f3f3f3; font-size: 14px; line-height: 1.6; }
.gl-guide-zoom-close { position: fixed; top: 12px; right: 16px; min-height: 40px; padding: 0 16px; border: 1px solid rgb(255 255 255 / .4); border-radius: 999px; background: rgb(0 0 0 / .5); color: #fff; font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; }
.gl-guide-zoom-close:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
html.gl-guide-zoomed, html.gl-guide-zoomed body { overflow: hidden; }
@media print { .gl-guide-zoom { display: none !important; } }

/* ══ 모양 «문서 사이트» (gl-t-docs · 2026-10-02 대표님 «유니티 가이드 문서처럼») ══════════════════════
   왼쪽 목차 | 가운데 본문(읽는 폭 760px) | 오른쪽 «이 페이지 목차». 짜는 것은 gl-render.js guideDocs · 채우는 것은 gl-guide.js docs().
   🔴 색은 역할 토큰만(--fg · --fg-strong · --muted · --muted-2 · --line · --surface · --surface-2 · --accent · --accent-soft …) — 밝게 · 어둡게 함께 뒤집힌다.
   🔴 제목은 본문 글꼴의 굵은 글씨다 — 큰 장식 제목을 두지 않는다. 브랜드 제목 글꼴 규칙(:root[data-font-heading] :where(h1,h2,h3) · 점수 0,2,0)보다
      한 칸 높게(.gl-t-docs … h1 = 0,2,1) 적는다.
   넓이 — 1240px 이상 세 칸 · 960~1239px 두 칸(오른쪽 목차 숨김) · 959px 이하 한 칸 + «목차» 버튼 서랍(스크립트가 돌 때만 — gl-docs-ready).
   틀의 폭(상단바와 같은 --container · 1180px)은 gl-blocks.css «도움말 — 문서 사이트» 한 줄(모양 규칙은 그 파일이 맡는다 — check:types).
   그 폭에 세 칸이 들어가게 칸 폭을 정했다 — 목차 232 · 사이 40 · 읽는 칸(최대 760 · 1180 에서 약 620) · 사이 40 · 이 페이지 목차 184. */

.gl-t-docs {
  --docs-side: 232px;
  --docs-read: 760px;
  --docs-toc: 184px;
  /* 상단바 높이 — 화면 스크립트가 실제 상단바를 재어 --docs-nav 로 준다(브랜드마다 로고 · 여백이 달라 64px 이 아니다 — 100px 을 넘는 곳도 있다).
     스크립트가 없으면 엔진 기본 --nav-h. 붙는 목차 · 앵커로 서는 자리가 이 값 아래에 선다 */
  --docs-gap: 20px;
  --docs-top: calc(var(--docs-nav, var(--nav-h, 64px)) + var(--docs-gap));
  --docs-link: color-mix(in srgb, var(--accent-hover, var(--accent)) 60%, var(--fg));
}
.gl-guide.gl-t-docs { padding: calc(var(--nav-h, 64px) + 72px) 0 88px; line-height: var(--lh-text); }   /* 줄간격은 토큰 둘 — 큰 제목 · 소제목 --lh-h2, 나머지는 여기서 물려받는 --lh-text */
.gl-t-docs [id] { scroll-margin-top: var(--docs-top); }
.gl-t-docs .gl-docs {
  display: grid;
  grid-template-columns: var(--docs-side) minmax(0, 1fr);
  align-items: start;
}
.gl-docs-ico { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.gl-docs-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.gl-docs-bar, .gl-docs-close { display: none; }
.gl-docs-backdrop[hidden] { display: none; }
.gl-t-docs a:focus-visible,
.gl-t-docs button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }

/* ── 왼쪽 목차 ── */
.gl-docs-side {
  position: sticky;
  top: var(--docs-top);
  max-height: calc(100vh - var(--docs-top) - 20px);
  overflow: auto;
  overscroll-behavior: contain;
  padding: 2px 24px 24px 0;
}
.gl-docs-side-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 16px; }
.gl-docs-home { font-size: 16px; font-weight: 700; color: var(--fg-strong); text-decoration: none; }
.gl-docs-home:hover { text-decoration: underline; text-underline-offset: 3px; }
.gl-docs-find { position: relative; }
.gl-docs-find .gl-docs-ico { position: absolute; left: 12px; top: 50%; width: 16px; height: 16px; margin-top: -8px; color: var(--muted); pointer-events: none; }
.gl-docs-find input {
  box-sizing: border-box; width: 100%; height: 40px; margin: 0; padding: 0 12px 0 36px;
  border: 1px solid var(--line); border-radius: var(--radius-sm, 8px);
  background: var(--surface); color: var(--fg);
  font: inherit; font-size: 14px; line-height: var(--lh-text);
}
.gl-docs-find input::placeholder { color: var(--muted); opacity: 1; }
.gl-docs-find input:focus { outline: 3px solid var(--accent-soft); outline-offset: 0; border-color: var(--accent); }
.gl-docs-none { margin: 12px 0 0; padding: 12px 16px; border-radius: var(--radius-sm, 8px); background: var(--surface-2); font-size: 14px; line-height: var(--lh-text); color: var(--muted-2); }
.gl-docs-toc { margin-top: 16px; }
.gl-docs-grp + .gl-docs-grp { margin-top: 12px; }
.gl-docs-grp.is-empty { display: none; }
.gl-docs-grp-btn {
  display: flex; align-items: center; gap: 8px; width: 100%;
  margin: 0; padding: 4px; border: 0; border-radius: var(--radius-sm, 8px); background: none; cursor: pointer;
  font: inherit; font-size: 14px; font-weight: 700; line-height: var(--lh-text); text-align: left; color: var(--fg-strong);
}
.gl-docs-grp-btn .gl-docs-fold { width: 16px; height: 16px; color: var(--muted); transform: rotate(90deg); transition: transform .18s var(--ease, ease); }
.gl-docs-grp-btn[aria-expanded="false"] .gl-docs-fold { transform: none; }
.gl-docs-list { margin: 4px 0 0 12px; padding: 0; list-style: none; border-left: 1px solid var(--line); }
.gl-docs-toc.is-finding .gl-docs-list[hidden] { display: block; }
.gl-docs-list a {
  display: block; margin-left: -1px; padding: 4px 12px 4px 16px;
  border-left: 2px solid transparent; border-radius: 0 var(--radius-sm, 8px) var(--radius-sm, 8px) 0;
  font-size: 14px; line-height: var(--lh-text); color: var(--muted-2); text-decoration: none;
  transition: color .16s ease, background-color .16s ease;
}
.gl-docs-grp-btn:hover { background: var(--surface-2); }
.gl-docs-list a:hover { color: var(--fg-strong); background: var(--surface-2); }
.gl-docs-list a[aria-current="page"] { color: var(--fg-strong); font-weight: 700; border-left-color: var(--accent); background: var(--accent-soft); }
.gl-docs-skel { padding: 12px 12px 12px 16px; }
.gl-docs-skel .shop-demo-line { display: block; margin: 0; height: 10px; background: var(--line); }   /* 바탕(--bg)과 --surface-2 는 너무 가까워 뼈대가 안 보였다 */
/* 목차 자리의 알림(못 불러옴 · 아직 글 없음 · 찾는 글 없음) — 아이콘 + 글. 좁은 목차 칸이라 테두리 칸 대신 한 줄 */
.gl-docs-status {
  display: grid; grid-template-columns: 16px minmax(0, 1fr); column-gap: 8px; align-items: start;
  margin: 12px 0 0; padding: 0 0 0 4px; font-size: 14px; line-height: var(--lh-text); color: var(--muted-2);
}
.gl-docs-status::before {
  content: ""; width: 16px; height: 16px; margin-top: 4px; background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9.25'/%3E%3Cpath d='M12 11v5.5M12 7.5v.01'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9.25'/%3E%3Cpath d='M12 11v5.5M12 7.5v.01'/%3E%3C/svg%3E") center / contain no-repeat;
}
/* 본문 자리에 선 알림(글 한 편을 못 불러옴 · 차례가 비었음) — 본문 글 크기 · 테두리 칸 */
.gl-docs-article > .gl-docs-status,
.gl-docs-body > .gl-docs-status {
  grid-template-columns: 24px minmax(0, 1fr); column-gap: 12px; box-sizing: border-box; max-width: 640px;
  margin: 8px 0 0; padding: 20px 24px; border: 1px solid var(--line); border-radius: var(--radius-md, 14px);
  background: var(--surface); color: var(--fg); font-size: 16px;
}
:is(.gl-docs-article, .gl-docs-body) > .gl-docs-status::before { width: 24px; height: 24px; margin-top: 2px; background-color: var(--muted); }   /* 첫 줄(16 × --lh-text) 가운데에 선다 */
/* 🔴 화면 스크립트가 글이 없으면 hidden 으로 숨긴다(gl-guide.js «data-docs-status») — 위의 display: grid 가 hidden 을 이겨
   «검색 결과가 없습니다» 아래에 글 없는 아이콘만 홀로 남았다(2026-10-03 검수). hidden 이면 자리째 뺀다 */
.gl-docs-status[hidden] { display: none; }
.gl-docs-toc .shop-demo-tag { margin: 16px 0 0; font-size: 14px; }
.gl-docs-article .shop-demo-block .shop-demo-line { margin-bottom: 16px; }   /* 에디터 예시 — 글 한 편 뼈대 줄 사이를 띄운다 */

/* ── 가운데 본문 ── */
.gl-docs-main { min-width: 0; min-height: 60vh; padding-left: 40px; border-left: 1px solid var(--line); }
.gl-docs-page { display: grid; grid-template-columns: minmax(0, var(--docs-read)) var(--docs-toc); column-gap: 40px; align-items: start; }
.gl-docs-article { grid-column: 1; min-width: 0; }
.gl-docs-crumb ol { display: flex; flex-wrap: wrap; gap: 4px; margin: 0 0 12px; padding: 0; list-style: none; font-size: 14px; line-height: var(--lh-text); color: var(--muted); }
.gl-docs-crumb li + li::before { content: "/"; margin-right: 4px; color: var(--muted); }
.gl-docs-crumb a { color: var(--muted-2); text-decoration: none; }
.gl-docs-crumb a:hover { color: var(--fg-strong); text-decoration: underline; text-underline-offset: 3px; }
.gl-t-docs .gl-docs-article h1 {
  margin: 0 0 12px; font-family: var(--font-family); font-size: 32px; font-weight: 700;
  line-height: var(--lh-h2); letter-spacing: var(--ls-h2, -0.03em); color: var(--fg-strong);
}
.gl-docs-intro { margin: 0 0 32px; font-size: 16px; line-height: var(--lh-text); color: var(--muted-2); }
.gl-docs-body { font-size: 16px; line-height: var(--lh-text); color: var(--fg); }
.gl-t-docs .gl-docs-body h2 { margin: 36px 0 12px; font-family: var(--font-family); font-size: 20px; font-weight: 700; line-height: var(--lh-h2); letter-spacing: -0.01em; color: var(--fg-strong); }
.gl-t-docs .gl-docs-body h3 { margin: 28px 0 8px; font-family: var(--font-family); font-size: 16px; font-weight: 700; line-height: var(--lh-text); color: var(--fg-strong); }
.gl-t-docs .gl-docs-body > h2:first-child { margin-top: 8px; }
.gl-docs-body p { margin: 0 0 16px; }
.gl-docs-body ul { margin: 0 0 16px; padding-left: 1.3em; list-style: disc; }
.gl-docs-body li { margin: 4px 0; }
.gl-docs-body li::marker { color: var(--muted); }
.gl-docs-body strong { font-weight: 700; color: var(--fg-strong); }
.gl-docs-body a, .gl-docs-intro a { color: var(--docs-link); text-decoration: underline; text-underline-offset: 2px; }
.gl-docs-body blockquote {
  margin: 0 0 16px; padding: 12px 16px; border-left: 2px solid var(--accent);
  border-radius: 0; background: var(--surface-2); color: var(--fg);
}
.gl-docs-body code {
  padding: 0 4px; border: 1px solid var(--line); border-radius: calc(var(--radius-sm, 8px) / 2); background: var(--surface-2);
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace; font-size: 14px;
}
.gl-docs-body hr { margin: 32px 0; border: 0; border-top: 1px solid var(--line); }
.gl-docs-body .gl-guide-img { margin: 20px 0 24px; }
/* 소제목 번호 — 동그라미 배지가 아니라 숫자 그대로(오른쪽 «이 페이지 목차» 와 같은 «1.» 모양). 숫자 폭을 맞춘다 */
.gl-docs-num {
  margin-right: 8px; color: var(--muted); font-weight: 400; font-variant-numeric: tabular-nums;
}
.gl-docs-num::after { content: "."; }
/* 표 — 시스템 요구사항처럼 «항목 | 내용» */
.gl-docs-table-wrap { margin: 4px 0 20px; overflow-x: auto; }
.gl-docs-table { width: 100%; border-collapse: collapse; border: 1px solid var(--line); font-size: 14px; line-height: var(--lh-text); font-variant-numeric: tabular-nums; }
.gl-docs-table th, .gl-docs-table td { padding: 12px 16px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.gl-docs-table th { width: 28%; background: var(--surface-2); color: var(--fg-strong); font-weight: 700; }
.gl-docs-table td { background: var(--surface); color: var(--fg); }
/* 게시판 글 차례 — 묶음마다 제목 · 첫 문단 */
.gl-docs-body .gl-docs-idx-list { margin: 0 0 8px; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.gl-docs-idx-list li { display: grid; gap: 2px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.gl-docs-idx-list a { font-size: 16px; font-weight: 700; color: var(--fg-strong); text-decoration: none; }
.gl-docs-idx-list a:hover { text-decoration: underline; text-underline-offset: 3px; }
.gl-docs-idx-list span { font-size: 14px; line-height: var(--lh-text); color: var(--muted-2); }
/* 이전 / 다음 글 */
.gl-docs-pager { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 56px; padding-top: 24px; border-top: 1px solid var(--line); }
.gl-docs-pager a {
  display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 16px 20px;
  border: 1px solid var(--line); border-radius: var(--radius-md, 14px); background: var(--surface); text-decoration: none;
  transition: border-color .16s ease;
}
.gl-docs-pager a:hover { border-color: var(--accent); }
.gl-docs-pager .gl-docs-next { align-items: flex-end; }
.gl-docs-pager small { font-size: 14px; color: var(--muted-2); }
.gl-docs-pager b { font-size: 16px; font-weight: 700; line-height: var(--lh-text); color: var(--fg-strong); }
.gl-docs-pager .gl-docs-next { grid-column: 2; text-align: right; }

/* ── 오른쪽 «이 페이지 목차» ── */
.gl-docs-onthis {
  grid-column: 2; position: sticky; top: var(--docs-top);
  max-height: calc(100vh - var(--docs-top) - 20px); overflow: auto; padding-bottom: 16px;
}
.gl-docs-onthis-t { margin: 0 0 12px; font-size: 14px; font-weight: 700; color: var(--fg-strong); }
.gl-docs-onthis ul { margin: 0; padding: 0; list-style: none; border-left: 1px solid var(--line); }
.gl-docs-onthis a {
  display: block; margin-left: -1px; padding: 4px 0 4px 12px; border-left: 2px solid transparent;
  font-size: 14px; line-height: var(--lh-text); color: var(--muted-2); text-decoration: none;
}
.gl-docs-onthis a:hover { color: var(--fg-strong); }
.gl-docs-onthis a[aria-current] { color: var(--fg-strong); border-left-color: var(--accent); }
.gl-docs-onthis .gl-docs-sub a { padding-left: 24px; }
.gl-docs-onthis .gl-docs-num { margin-right: 4px; }

/* ── 지금 보는 글만 — 주소(#)에 걸린 글, 아무것도 안 걸렸으면 첫 글. :has() 를 모르는 브라우저는 스크립트가 hidden 으로 고른다 ── */
@supports selector(:has(*)) {
  .gl-docs-pages:has(> .gl-docs-page:target, > .gl-docs-page :target) > .gl-docs-page:not(:target):not(:has(:target)) { display: none; }
  .gl-docs-pages:not(:has(> .gl-docs-page:target, > .gl-docs-page :target)) > .gl-docs-page ~ .gl-docs-page { display: none; }
}
.gl-docs-page[hidden] { display: none !important; }

/* ── 넓이 ── */
@media (max-width: 1239px) {
  .gl-docs-page { grid-template-columns: minmax(0, var(--docs-read)); }
  .gl-docs-onthis { display: none; }
}
@media (max-width: 959px) {
  .gl-guide.gl-t-docs { padding-top: calc(var(--nav-h, 64px) + 64px); }
  .gl-t-docs.gl-docs-ready { --docs-gap: 80px; }   /* 앵커로 설 때 «목차» 버튼 줄만큼 더 내려 선다 */
  .gl-t-docs .gl-docs { display: block; }
  .gl-docs-main { padding-left: 0; border-left: 0; min-height: 0; }
  /* 스크립트가 없을 때 — 목차가 본문 위에 그대로 */
  .gl-docs-side { position: static; max-height: none; overflow: visible; margin: 0 0 28px; padding: 0 0 20px; border-bottom: 1px solid var(--line); }
  /* 스크립트가 돌면 — «목차» 버튼으로 여는 서랍 */
  .gl-docs-ready .gl-docs-bar {
    position: sticky; top: var(--docs-nav, var(--nav-h, 64px)); z-index: 50;
    display: flex; align-items: center; gap: 12px; margin: 0 0 20px; padding: 8px 0;
    background: var(--bg); border-bottom: 1px solid var(--line);
  }
  .gl-docs-open {
    display: inline-flex; align-items: center; gap: 8px; flex: none; height: 40px; padding: 0 16px;
    border: 1px solid var(--line); border-radius: var(--radius-sm, 8px); background: var(--surface); color: var(--fg-strong);
    font: inherit; font-size: 14px; font-weight: 700; cursor: pointer;
    transition: border-color .16s ease;
  }
  .gl-docs-open:hover { border-color: var(--accent); }
  .gl-docs-bar-t { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; padding-left: 2px; margin-left: -2px; font-size: 14px; color: var(--muted-2); }   /* 자르는 선이 첫 획에서 2px 떨어지게(check:editor 말줄임 규칙) */
  .gl-docs-ready .gl-docs-side { display: none; }
  .gl-docs-ready .gl-docs-side.is-open {
    display: block; position: fixed; z-index: 140; top: 0; bottom: 0; left: 0;
    width: min(88vw, 360px); max-height: none; margin: 0; padding: 16px 20px 32px; overflow: auto;
    background: var(--bg); border: 0; border-right: 1px solid var(--line); box-shadow: var(--shadow-soft);
  }
  .gl-docs-ready .gl-docs-close {
    display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; flex: none;
    margin: -8px -8px -8px 0; border: 0; border-radius: var(--radius-sm, 8px); background: none; color: var(--fg-strong); cursor: pointer;
  }
  .gl-docs-ready .gl-docs-close:hover { background: var(--surface-2); }
  .gl-docs-backdrop:not([hidden]) { position: fixed; inset: 0; z-index: 135; background: color-mix(in srgb, var(--bg) 72%, transparent); backdrop-filter: blur(2px); }
  .gl-docs-pager { grid-template-columns: 1fr; }
  .gl-docs-pager .gl-docs-next { grid-column: 1; }
  .gl-docs-pager > span { display: none; }
}
@media (max-width: 600px) {
  .gl-t-docs .gl-docs-article h1 { font-size: 28px; }
  .gl-docs-table th { width: 34%; }
  .gl-docs-table th, .gl-docs-table td { padding: 8px 12px; }
}
.gl-docs-lock, .gl-docs-lock body { overflow: hidden; }
@media (prefers-reduced-motion: reduce) {
  .gl-docs-grp-btn .gl-docs-fold,
  .gl-docs-list a,
  .gl-docs-pager a,
  .gl-docs-open { transition: none; }
}
@media print {
  .gl-docs-side, .gl-docs-bar, .gl-docs-onthis, .gl-docs-pager, .gl-docs-backdrop { display: none !important; }
  .gl-guide.gl-t-docs { padding: 0; }
  .gl-t-docs .gl-docs { display: block; }
  .gl-docs-main { padding: 0; border: 0; }
  .gl-docs-page { display: block; }
}

/* ── 목차 칸 스크롤바 — 얇고 옅게 (2026-10-05) ──
   🔴 style.css :root 의 «color-scheme: light dark» 는 data-theme 을 보지 않고 기기 설정만 따른다.
   기기가 어두운데 «밝게» 를 고르면 기본 스크롤바만 어둡게 칠해졌다 → 목차 칸만 선택 값에 맞춘다. */
.gl-docs-side, .gl-docs-onthis {
  scrollbar-width: thin;
  scrollbar-color: var(--line) transparent;
}
:root[data-theme="light"] .gl-docs-side, :root[data-theme="light"] .gl-docs-onthis { color-scheme: light; }
:root[data-theme="dark"] .gl-docs-side, :root[data-theme="dark"] .gl-docs-onthis { color-scheme: dark; }
.gl-docs-side::-webkit-scrollbar, .gl-docs-onthis::-webkit-scrollbar { width: 6px; height: 6px; }
.gl-docs-side::-webkit-scrollbar-thumb, .gl-docs-onthis::-webkit-scrollbar-thumb { background: var(--line); border-radius: 3px; }
.gl-docs-side::-webkit-scrollbar-track, .gl-docs-onthis::-webkit-scrollbar-track { background: transparent; }