/* Docpod site theme — GitBook-equivalent layout */
:root {
  /* 본문 컴포넌트 토큰 — 구조는 공통, 값만 테마가 바꾼다(기본값=위즈덤베이스 기본 룩). theme-gitbook-content.css 가 override */
  --gb-block-mt: 24px; --gb-block-mb: 24px;                 /* 그림·표·hint·embed·탭 위아래 간격 */
  --gb-img-radius: 8px;
  --gb-caption-display: none; --gb-caption-fs: 13px; --gb-caption-lh: normal; --gb-caption-color: var(--tint-11); --gb-caption-align: center; --gb-caption-mt: 8px;
  --gb-hash-rest: 0; --gb-hash-hover: 0;                    /* 제목 「직접 링크」 아이콘 — 기본 룩에선 안 보임(키보드 포커스 시만) */
  --gb-hash-color: var(--tint-10);
  --gb-ext-arrow: none;                                     /* 외부 링크 ↗ (none | inline-block) */
  --gb-hint-radius: 8px; --gb-hint-pad: 16px; --gb-hint-gap: 12px; --gb-hint-fs: 15px; --gb-hint-lh: 1.65;
  --gb-hint-info-bg: #F0F6FF;    --gb-hint-info-fg: #3B82F6;
  --gb-hint-success-bg: #EFFAF3; --gb-hint-success-fg: #16A34A;
  --gb-hint-warning-bg: #FFF8EB; --gb-hint-warning-fg: #D97706;
  --gb-hint-danger-bg: #FEF1F1;  --gb-hint-danger-fg: #DC2626;
  --gb-hash-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M226.9 29c2.8-13-5.5-25.7-18.4-28.5S182.7 6 180 18.9L156.6 128 68.5 128c-13.3 0-24 10.7-24 24s10.7 24 24 24l77.8 0-34.3 160-88 0c-13.3 0-24 10.7-24 24s10.7 24 24 24l77.7 0-21.2 99c-2.8 13 5.5 25.7 18.4 28.5s25.7-5.5 28.5-18.4l23.4-109 155.4 0-21.2 99c-2.8 13 5.5 25.7 18.4 28.5s25.7-5.5 28.5-18.4l23.4-109 88 0c13.3 0 24-10.7 24-24s-10.7-24-24-24l-77.7 0 34.3-160 88.1 0c13.3 0 24-10.7 24-24s-10.7-24-24-24l-77.8 0 21.2-99c2.8-13-5.5-25.7-18.4-28.5S387.2 6 384.4 18.9l-23.4 109.1-155.4 0 21.2-99zM195.4 176l155.4 0-34.3 160-155.4 0 34.3-160z'/%3E%3C/svg%3E");
  --gb-ext-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 384 512'%3E%3Cpath d='M360 64c13.3 0 24 10.7 24 24l0 240c0 13.3-10.7 24-24 24s-24-10.7-24-24l0-182.1-295 295c-9.4 9.4-24.6 9.4-33.9 0S-2.3 416.4 7 407l295-295-182.1 0c-13.3 0-24-10.7-24-24s10.7-24 24-24l240 0z'/%3E%3C/svg%3E");
  --gb-embed-radius: 8px;
  /* 검색 팝업 토큰 — 기본(가운데 모달)에선 새 요소를 숨겨 기존 룩 유지 */
  --gb-search-x-display: none; --gb-search-count-display: none; --gb-search-clear-display: none; --gb-search-foot-display: none;
  --gb-search-sec-color: var(--tint-11); --gb-search-sec-fs: 12px; --gb-search-sec-pt: 14px;
  --gb-search-crumb-display: none; --gb-search-ic-display: none; --gb-search-hl-bg: transparent; --gb-search-hl-pad: 0; --gb-search-hl-mg: 0;
  --gb-tabs-radius: 8px;
  --gb-primary: #346DDB;
  --primary: #346DDB;
  --primary-2: #F7FAFF;
  --primary-3: #F1F8FF;
  --primary-6: #D5E6FF;
  --primary-9: #346DDB;
  --tint-1: #FFFFFF;
  --tint-2: #F9FAFB;
  --tint-3: #F6F7FA;
  --tint-5: #EAEDF2;
  --tint-6: #E2E5EB;
  --tint-7: #D5D8DF;
  --tint-10: #6E7A8F;
  --tint-11: #6A6E77;
  --tint-12: #1C1D1F;
  --font: "Inter", "Pretendard", -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo",
    "Malgun Gothic", "Segoe UI", sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --header-h: 64px;
  --tabs-h: 48px;
}
* { box-sizing: border-box; }
html { scroll-padding-top: calc(var(--header-h) + var(--tabs-h) + 24px); }
body.gb-site {
  margin: 0;
  font-family: var(--font);
  font-size: 17px;
  color: var(--tint-12);
  background: var(--tint-1);
  word-break: var(--gb-word-break, keep-all);
  overflow-wrap: var(--gb-overflow-wrap, break-word);
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
button { font-family: inherit; }

/* ---------- scrollbars — thin, subtle, GitBook-like ---------- */
body.gb-site { scrollbar-width: thin; scrollbar-color: #D5D8DF transparent; }
body.gb-site ::-webkit-scrollbar { width: 6px; height: 6px; }
body.gb-site ::-webkit-scrollbar-track { background: transparent; }
body.gb-site ::-webkit-scrollbar-thumb {
  background: transparent; border-radius: 999px;
}
body.gb-site :hover::-webkit-scrollbar-thumb,
body.gb-site ::-webkit-scrollbar-thumb:hover { background: #C9CDD4; }
body.gb-site::-webkit-scrollbar { width: 10px; }
body.gb-site::-webkit-scrollbar-thumb {
  background: #D5D8DF; border-radius: 999px;
  border: 2px solid #fff; background-clip: padding-box;
}
body.gb-site::-webkit-scrollbar-thumb:hover { background: #AEB4BD; border: 2px solid #fff; background-clip: padding-box; }
.gb-sidebar, .gb-toc, .gb-search-results { scrollbar-width: thin; scrollbar-color: transparent transparent; }
.gb-sidebar:hover, .gb-toc:hover, .gb-search-results:hover { scrollbar-color: #C9CDD4 transparent; }

/* ====================================================================================
   레이아웃 — 모든 테마 공통 구조(헤더·탭·사이드바·본문·목차·페이지 머리·모바일 드로어).
   테마마다 다른 건 아래 토큰(--gb-*)뿐이다. 기본값 = 위즈덤베이스 기본 룩.
   (theme-gitbook-core.css 는 이 토큰만 덮어쓴다.)
   반응형 단계: 모바일 <640 · sm 640 · md 768 · lg 1024(사이드바 고정) · xl 1280(목차 고정)
   ==================================================================================== */
:root {
  /* 컨테이너 */
  --gb-container-max: 1280px;
  --gb-px: 32px;
  --gb-side-w: 252px;      /* 사이드바 폭 */
  --gb-side-gap: 40px;     /* 사이드바 ↔ 본문 */
  --gb-toc-w: 216px;       /* 목차 폭(안쪽 여백 포함) */
  --gb-toc-pl: 0px;
  --gb-toc-gap: 40px;      /* 본문 ↔ 목차 */
  --gb-main-max: 760px;
  --gb-main-pt: 40px;
  --gb-main-pb: 64px;
  /* 헤더 */
  --gb-header-bg: rgba(255, 255, 255, 0.92);
  --gb-header-blur: 12px;
  --gb-header-line: var(--tint-5);          /* 헤더(탭 행 포함) 아래 선 */
  --gb-header-bw: 1px; --gb-header-shadow: none;
  --gb-hrow-gap: 24px;
  --gb-hleft-basis: auto;
  --gb-logo-size: 32px;
  --gb-logo-radius: 8px;
  --gb-logo-gap: 12px;
  --gb-logo-fs: 17px; --gb-logo-fw: 700; --gb-logo-ls: -0.01em; --gb-logo-lh: normal;
  --gb-search-flex: 1 1 0%;
  --gb-search-wrap-max: none;
  --gb-search-btn-max: 570px;
  --gb-search-h: 40px;
  --gb-search-pad: 0 14px;
  --gb-search-gap: 10px;
  --gb-search-radius: 8px;
  --gb-search-line: var(--tint-6);
  --gb-search-fs: 15px;
  --gb-search-color: var(--tint-10);
  --gb-link-fs: 15px; --gb-link-fw: 500; --gb-link-color: var(--tint-12); --gb-link-gap: 24px;
  /* 탭 행 */
  --gb-tab-fs: 15px; --gb-tab-fw: 500; --gb-tab-lh: normal;
  --gb-tab-gap: 8px; --gb-tab-active-fw: 500;
  --gb-tab-pad: 0 12px 2px;
  --gb-tab-my: 0px;
  --gb-tab-radius: 0px;
  --gb-tab-first-ml: 0px;
  --gb-tab-hover-bg: transparent;
  --gb-side-active-hover-bg: var(--gb-side-active-bg); --gb-side-active-hover-color: var(--gb-side-active-color);
  --gb-tab-ind-x: 0px;      /* 활성 표시선 좌우 안쪽 여백 */
  --gb-tab-ind-b: 0px;      /* 활성 표시선 아래 위치 */
  /* 사이드바 */
  --gb-side-pt: 32px;
  --gb-side-pr: 8px;
  --gb-side-ml: 0px;        /* 목록 왼쪽 보정 */
  --gb-side-list-w: auto;
  --gb-side-fs: 15px; --gb-side-lh: 1.45; --gb-side-fw: 400;
  --gb-side-pad: 8px 12px; --gb-side-radius: 8px;
  --gb-side-color: var(--tint-11);
  --gb-side-hover-bg: var(--tint-3); --gb-side-hover-color: var(--tint-12);
  --gb-side-active-bg: var(--primary-3); --gb-side-active-color: var(--primary); --gb-side-active-fw: 500;
  --gb-side-item-gap: 0px;
  --gb-group-fs: 13px; --gb-group-fw: 600; --gb-group-ls: 0; --gb-group-lh: normal;
  --gb-group-color: var(--tint-12);
  --gb-group-pad: 0 12px; --gb-group-mt: 24px; --gb-group-mb: 6px; --gb-group-chev: none;
  --gb-list-mb: 4px;
  --gb-sub-ml: 12px; --gb-sub-my: 2px; --gb-sub-pl: 12px; --gb-sub-line: var(--tint-5);
  --gb-sub-radius: 8px;
  --gb-sub-active-bar: 0;   /* 하위 활성 항목 왼쪽 막대 */
  /* 본문 머리 */
  --gb-crumb-fs: 14px; --gb-crumb-fw: 600; --gb-crumb-lh: normal; --gb-crumb-sep: 10px;
  --gb-topline-mb: 16px; --gb-topline-align: center; --gb-actions-my: 0px;
  --gb-head-mb: 28px;
  --gb-title-fs: 40px; --gb-title-lh: 1.25; --gb-title-fw: 700; --gb-title-ls: -0.02em; --gb-title-mb: 10px;
  --gb-btn-fs: 12.5px; --gb-btn-h: 30px; --gb-btn-pad: 0 10px; --gb-btn-gap: 6px; --gb-btn-radius: 8px;
  --gb-btn-line: var(--tint-6); --gb-btn-color: var(--tint-11); --gb-btn-fw: 500;
  --gb-copymd-display: inline-flex;   /* 기본: Copy | .md   깃북: Copy | ⌄ 메뉴 */
  --gb-copymore-display: none;
  --gb-lastupdated-display: none;
  /* 목차 */
  --gb-toc-pt: 40px;
  --gb-toc-fs: 13.5px; --gb-toc-lh: 1.5; --gb-toc-head-fs: 12px; --gb-toc-head-ls: .04em; --gb-toc-head-ml: 0px;
  --gb-toc-line: 1px solid var(--tint-5);
  --gb-toc-pad: 5px 0 5px 14px; --gb-toc-radius: 0px; --gb-toc-li-mt: 0px; --gb-toc-li-mb: 0px; --gb-toc-a-bl: 1px; --gb-toc-bar-color: var(--primary);
  --gb-toc-active-bg: transparent;
  --gb-toc-color: var(--tint-11);
  /* 이전/다음 · 푸터 */
  --gb-card-radius: 8px; --gb-card-pad: 14px 16px; --gb-card-line: var(--tint-5);
  --gb-card-gap: 4px; --gb-card-label-fs: 13px; --gb-card-title-fs: 15px; --gb-card-title-fw: 500;
  --gb-card-mt: 48px;
  /* 시트(모바일 드로어·목차) */
  --gb-sheet-bg: #fff;
  --gb-sheet-line: var(--tint-5);
}

/* ---------- header ---------- */
.gb-header {
  position: sticky; top: 0; z-index: 50;
  background: var(--gb-header-bg);
  -webkit-backdrop-filter: blur(var(--gb-header-blur)); backdrop-filter: blur(var(--gb-header-blur));
  border-bottom: var(--gb-header-bw) solid var(--gb-header-line); box-shadow: var(--gb-header-shadow);
}
.gb-header-inner {
  container: header / inline-size;
  display: flex; align-items: center; justify-content: space-between; gap: var(--gb-hrow-gap);
  width: 100%; max-width: var(--gb-container-max); margin: 0 auto;
  height: var(--header-h); padding: 0 var(--gb-px);
}
.gb-hleft { display: flex; align-items: center; min-width: 0; flex: 0 1 var(--gb-hleft-basis); margin-right: var(--gb-hleft-mr, 0px); }
.gb-burger {
  display: none; flex: none; align-items: center; justify-content: center;
  width: 37px; height: 37px; margin-left: -8px; margin-right: 8px; padding: 0;
  border: 0; border-radius: 12px; background: none; cursor: pointer; color: var(--gb-burger-color, var(--tint-11));
}
.gb-burger:hover { background: var(--tint-3); color: var(--tint-12); }
.gb-burger svg { width: 18px; height: 18px; }
.gb-logo { display: flex; align-items: center; gap: var(--gb-logo-gap); min-width: 0; flex-shrink: 1; }
.gb-logo-img { width: var(--gb-logo-size); height: var(--gb-logo-size); border-radius: var(--gb-logo-radius); object-fit: cover; flex: none; }
.gb-logo-mark {
  width: var(--gb-logo-size); height: var(--gb-logo-size); border-radius: var(--gb-logo-radius); background: var(--primary);
  color: #fff; display: inline-flex; align-items: center; justify-content: center; flex: none;
  font-weight: 700; font-size: 16px;
}
.gb-logo-text {
  font-weight: var(--gb-logo-fw); font-size: var(--gb-logo-fs); letter-spacing: var(--gb-logo-ls); line-height: var(--gb-logo-lh);
  max-width: 24ch; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
@media (max-width: 1023.98px) {
  .gb-logo-text { max-width: 18ch; font-size: var(--gb-logo-fs-sm, var(--gb-logo-fs)); line-height: var(--gb-logo-lh-sm, var(--gb-logo-lh)); letter-spacing: var(--gb-logo-ls-sm, var(--gb-logo-ls)); }
}
.gb-search-wrap { flex: var(--gb-search-flex); max-width: var(--gb-search-wrap-max); display: flex; justify-content: center; min-width: 0; }
.gb-search-btn {
  display: flex; align-items: center; gap: var(--gb-search-gap);
  width: 100%; max-width: var(--gb-search-btn-max); height: var(--gb-search-h); padding: var(--gb-search-pad);
  border: 1px solid var(--gb-search-line); border-radius: var(--gb-search-radius);
  background: var(--tint-1); color: var(--gb-search-color);
  font-size: var(--gb-search-fs); cursor: pointer;
  transition: border-color .1s, box-shadow .1s;
}
.gb-search-btn:hover { border-color: var(--tint-7); box-shadow: 0 1px 2px rgba(0,0,0,.04); }
.gb-search-icon { width: 15px; height: 15px; flex-shrink: 0; }
.gb-search-ph { flex: 1; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gb-search-keys { display: flex; gap: 3px; }
.gb-search-keys kbd, .gb-search-close {
  font-family: var(--font); font-size: 12px; color: var(--tint-11);
  background: var(--tint-3); border: 1px solid var(--tint-6); border-radius: 4px;
  padding: 1px 5px; min-width: 20px; text-align: center;
}
/* 헤더 오른쪽 링크 — 자리가 모자라면 앞에서부터 「···」 더보기로 접는다(헤더 폭 컨테이너 쿼리) */
.gb-extlinks { display: flex; align-items: center; justify-content: flex-end; gap: var(--gb-link-gap); flex: 0 1 auto; margin-left: auto; min-width: 36px; }
.gb-extlinks > a { font-size: var(--gb-link-fs); font-weight: var(--gb-link-fw); line-height: var(--gb-link-lh, normal); color: var(--gb-link-color); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex-shrink: 1; }
.gb-extlinks > a:hover { color: var(--primary); }
.gb-extmore { display: none; position: relative; align-items: center; }
.gb-extmore-btn {
  display: flex; align-items: center; gap: var(--gb-more-gap, 2px); padding: 0; border: 0; background: none; cursor: pointer; color: var(--tint-11);
}
.gb-extmore-btn:hover { color: var(--tint-12); }
.gb-extmore-btn svg:first-child { width: 16px; height: 16px; }
.gb-extmore-btn svg:last-child { width: 12px; height: 12px; transition: transform .15s; color: var(--gb-more-chev, currentColor); }
.gb-extmore-btn[aria-expanded="true"] svg:last-child { transform: rotate(180deg); }
.gb-extmenu {
  position: absolute; top: calc(100% + 8px); right: 0; z-index: 60; width: max-content; padding: 8px 0;
  background: var(--tint-1); border: 1px solid var(--tint-5); border-radius: 8px;
  box-shadow: 0 8px 24px rgba(28, 29, 31, .10), 0 1px 3px rgba(28, 29, 31, .06);
}
.gb-extmenu[hidden] { display: none; }
.gb-extmenu > a { display: none; padding: 6px 22px; font-size: 14px; line-height: 20px; color: var(--tint-12); white-space: nowrap; }
.gb-extmenu > a:hover { background: var(--tint-3); }
/* 기본 테마: 헤더가 좁아지면 뒤쪽 링크부터 「···」 더보기로(미디어 쿼리). 깃북 테마는 컨테이너 쿼리 방식(theme-gitbook-core.css) */
@media (max-width: 1400px) {
  body:not(.th-gitbook) .gb-extlinks > a:nth-child(n+5) { display: none; }
  body:not(.th-gitbook) .gb-extlinks > a:nth-child(n+5) ~ .gb-extmore { display: flex; }
  body:not(.th-gitbook) .gb-extmenu > a:nth-child(n+5) { display: flex; }
}
@media (max-width: 1024px) {
  body:not(.th-gitbook) .gb-extlinks > a { display: none; }
  body:not(.th-gitbook) .gb-extmore { display: flex; }
  body:not(.th-gitbook) .gb-extmenu > a { display: flex; }
}
/* 검색창 — 헤더가 좁으면(<672) 돋보기 단추만 */
@container header (max-width: 671.98px) {
  .gb-search-wrap { flex: 0 0 auto; order: 3; }
  .gb-search-btn { width: var(--gb-search-icon-size, 40px); height: var(--gb-search-icon-size, 40px); padding: 0; justify-content: center; border-radius: var(--gb-search-icon-radius, 8px); border-color: var(--gb-search-icon-line, transparent); }
  .gb-search-ph, .gb-search-keys { display: none; }
}

/* ---------- tabs ---------- */
.gb-tabsrow { border-top: var(--gb-tabsrow-bt, 1px) solid transparent; }
.gb-tabs {
  display: flex; gap: var(--gb-tab-gap); max-width: var(--gb-container-max); margin: 0 auto; padding: 0 var(--gb-tabs-pr, var(--gb-px)) 0 var(--gb-px);
  height: var(--tabs-h); align-items: stretch; overflow-x: auto; scrollbar-width: none;
}
.gb-tabs::-webkit-scrollbar { display: none; }
.gb-tab {
  position: relative; display: inline-flex; align-items: center; flex: none; padding: var(--gb-tab-pad); margin: var(--gb-tab-my) 0;
  font-size: var(--gb-tab-fs); font-weight: var(--gb-tab-fw); line-height: var(--gb-tab-lh); color: var(--tint-11);
  border-radius: var(--gb-tab-radius); white-space: nowrap;
}
.gb-tab:first-child { margin-left: var(--gb-tab-first-ml); }
.gb-tab::after {
  content: ""; position: absolute; left: var(--gb-tab-ind-x); right: var(--gb-tab-ind-x); bottom: var(--gb-tab-ind-b);
  height: 2px; background: transparent;
}
.gb-tab:hover { color: var(--tint-12); background: var(--gb-tab-hover-bg); }
.gb-tab.active:hover { background: var(--gb-tab-hover-bg); }
.gb-tab.active { color: var(--primary); font-weight: var(--gb-tab-active-fw); }
.gb-tab.active::after { background: var(--primary); }

/* ---------- shell ---------- */
.gb-shell {
  display: flex; justify-content: center;
  max-width: var(--gb-container-max); margin: 0 auto; padding: 0 var(--gb-px);
  align-items: flex-start;
}
.gb-sidebar {
  width: var(--gb-side-w); flex-shrink: 0; margin-right: var(--gb-side-gap);
  position: sticky; top: calc(var(--header-h) + var(--tabs-h));
  max-height: calc(100vh - var(--header-h) - var(--tabs-h));
  overflow-y: auto; padding: var(--gb-side-pt) var(--gb-side-pr) 48px 0; height: var(--gb-toc-h, auto);
}
.gb-sidebar-nav { margin-left: var(--gb-side-ml); width: var(--gb-side-list-w); max-width: calc(100% - var(--gb-side-ml)); }
.gb-drawer-head, .gb-drawer-close, .gb-toc-close { display: none; }
.gb-side-group {
  display: flex; align-items: center; width: 100%; min-height: var(--gb-group-minh, 0); border: 0; background: none; cursor: pointer; text-align: left;
  font-family: inherit; font-size: var(--gb-group-fs); font-weight: var(--gb-group-fw); letter-spacing: var(--gb-group-ls); line-height: var(--gb-group-lh);
  color: var(--gb-group-color); margin: var(--gb-group-mt) 0 var(--gb-group-mb); padding: var(--gb-group-pad);
}
.gb-side-group-t { flex: 1; min-width: 0; }
.gb-side-gchev { display: var(--gb-group-chev); width: 12px; height: 12px; margin-right: 4px; opacity: 0; transition: opacity .15s, transform .15s; transform: rotate(0); }
.gb-side-gchev svg { width: 12px; height: 12px; display: block; }
.gb-side-group:hover .gb-side-gchev { opacity: 1; }
.gb-side-block.collapsed .gb-side-gchev { transform: rotate(-90deg); }
.gb-side-block.collapsed > .gb-side-list { display: none; }
.gb-side-block:first-child > .gb-side-group { margin-top: 0; }
.gb-side-list { list-style: none; margin: 0 0 var(--gb-list-mb); padding: 0; display: flex; flex-direction: column; gap: var(--gb-side-item-gap); }
.gb-side-item { display: flex; flex-direction: column; }
.gb-side-link {
  position: relative; display: flex; align-items: center; gap: 12px; padding: var(--gb-side-pad); border-radius: var(--gb-side-radius);
  font-size: var(--gb-side-fs); font-weight: var(--gb-side-fw); color: var(--gb-side-color); line-height: var(--gb-side-lh);
  transition: color .12s, background-color .12s;
}
.gb-side-link > span { flex: 1; min-width: 0; }
.gb-side-link:hover { background: var(--gb-side-hover-bg); color: var(--gb-side-hover-color); }
.gb-side-link.active { background: var(--gb-side-active-bg); color: var(--gb-side-active-color); font-weight: var(--gb-side-active-fw); }
.gb-side-link.active:hover { background: var(--gb-side-active-hover-bg); color: var(--gb-side-active-hover-color); }
.gb-side-toggle {
  flex: none; display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; margin: -2px -4px -2px auto; padding: 0;
  border: 0; border-radius: 8px; background: none; cursor: pointer; color: inherit;
}
.gb-side-toggle:hover { background: rgba(28, 29, 31, .06); }
.gb-side-toggle svg { width: 12px; height: 12px; transition: transform .15s; }
.gb-side-item.open > .gb-side-link .gb-side-toggle svg { transform: rotate(90deg); }
.gb-side-sub { display: none; margin: var(--gb-sub-my) 0 var(--gb-sub-my) var(--gb-sub-ml); border-left: 1px solid var(--gb-sub-line); }
.gb-side-item.open > .gb-side-sub { display: flex; }
.gb-side-sub .gb-side-link { padding-left: var(--gb-sub-pl); border-radius: var(--gb-sub-radius); }
.gb-side-sub .gb-side-link.active::before {
  content: ""; position: absolute; left: -1px; top: 0; bottom: 0; width: var(--gb-sub-active-bar); background: var(--gb-side-active-color);
}

.gb-main { flex: 1; min-width: 0; max-width: var(--gb-main-max); margin: 0 auto; padding: var(--gb-main-pt) 0 var(--gb-main-pb); }

/* ---------- layout options (디자인 탭 「레이아웃」) ---------- */
/* 2단 — 오른쪽 목차 숨김, 본문 폭 확장 */
.ly-toc-hide .gb-toc { display: none; }
.ly-toc-hide .gb-main { max-width: 880px; }
/* 검색창 오른쪽에 작게 */
.ly-search-compact .gb-search-wrap { flex: 0 1 auto; margin-left: auto; justify-content: flex-end; }
.ly-search-compact .gb-search-btn { width: 250px; }
/* 메뉴 왼쪽 배치 — 상단 탭 행이 없으므로 sticky 기준 높이 보정 */
.ly-nav-side { --tabs-h: 0px; }
.gb-side-section {
  display: block; font-size: 14px; font-weight: 700; color: var(--tint-12);
  margin: 26px 0 6px; padding: 6px 12px; border-radius: 8px;
}
.gb-side-section:first-child { margin-top: 0; }
.gb-side-section:hover { background: var(--tint-3); }
.gb-side-section.active { color: var(--primary); }
.ly-nav-side .gb-side-list { margin-bottom: 2px; }

.gb-toc {
  width: var(--gb-toc-w); flex-shrink: 0; margin-left: var(--gb-toc-gap);
  position: sticky; top: calc(var(--header-h) + var(--tabs-h));
  max-height: calc(100vh - var(--header-h) - var(--tabs-h));
  overflow-y: auto; padding: var(--gb-toc-pt) 0 48px var(--gb-toc-pl);
  height: var(--gb-toc-h, auto); font-size: var(--gb-toc-fs);
}
.gb-toc-head {
  display: flex; align-items: center; gap: var(--gb-toc-head-gap, 8px);
  font-size: var(--gb-toc-head-fs); font-weight: 600; letter-spacing: var(--gb-toc-head-ls); color: var(--tint-11);
  margin: 0 0 12px var(--gb-toc-head-ml);
}
.gb-toc-head svg { width: 13px; height: 13px; flex: none; }
.gb-toc-list { list-style: none; margin: 0; padding: 0; border-left: var(--gb-toc-line); display: flex; flex-direction: column; }
.gb-toc-list li { margin: var(--gb-toc-li-mt) 0 var(--gb-toc-li-mb); }
.gb-toc-list li:first-child { margin-top: 0; }
.gb-toc-list li a {
  display: block; padding: var(--gb-toc-pad); color: var(--gb-toc-color); line-height: var(--gb-toc-lh);
  border-left: var(--gb-toc-a-bl) solid transparent; margin-left: calc(-1 * var(--gb-toc-a-bl)); border-radius: var(--gb-toc-radius);
}
.gb-toc-list li.lvl-3 a { padding-left: 28px; }
.gb-toc-list li a:hover { color: var(--tint-12); }
.gb-toc-list li a.active { color: var(--primary); border-left-color: var(--gb-toc-bar-color); background: var(--gb-toc-active-bg); }

/* ---------- page head ---------- */
.gb-page-topline { display: var(--gb-topline-display, flex); align-items: var(--gb-topline-align); justify-content: space-between; gap: 16px; margin-bottom: var(--gb-topline-mb); }
.gb-breadcrumb-wrap { display: block; min-width: 0; font-size: var(--gb-crumb-fs); line-height: var(--gb-crumb-lh); }
.gb-breadcrumb { font-size: var(--gb-crumb-fs); font-weight: var(--gb-crumb-fw); color: var(--primary); }
.gb-breadcrumb-sep { display: inline-flex; vertical-align: middle; margin: 0 8px; color: var(--gb-crumb-sep-color, var(--tint-10)); }
.gb-breadcrumb-sep svg { width: var(--gb-crumb-sep); height: var(--gb-crumb-sep); }
.gb-page-actions { order: 2; float: var(--gb-actions-float, none); margin-left: var(--gb-actions-ml, 0px); display: flex; align-items: center; gap: 8px; flex: none; margin-top: 0; margin-bottom: 0; margin-block: var(--gb-actions-my); }
.gb-copywrap { position: relative; display: flex; align-items: stretch; }
.gb-copybtn, .gb-copymd, .gb-copymore, .gb-tocbtn {
  display: inline-flex; align-items: center; height: var(--gb-btn-h);
  border: 1px solid var(--gb-btn-line); background: var(--tint-1); cursor: pointer;
  font-family: inherit; font-size: var(--gb-btn-fs); font-weight: var(--gb-btn-fw); line-height: 1; color: var(--gb-btn-color);
}
.gb-copybtn { gap: var(--gb-btn-gap); padding: var(--gb-btn-pad); border-radius: var(--gb-btn-radius) 0 0 var(--gb-btn-radius); }
.gb-copymd { display: var(--gb-copymd-display); border-left: 0; border-radius: 0 var(--gb-btn-radius) var(--gb-btn-radius) 0; padding: 0 9px; }
.gb-copymore { display: var(--gb-copymore-display); justify-content: center; width: 25px; padding: 0; border-left: 0; border-radius: 0 var(--gb-btn-radius) var(--gb-btn-radius) 0; }
.gb-copymore svg { width: 12px; height: 12px; transition: transform .15s; }
.gb-copymore[aria-expanded="true"] svg { transform: rotate(180deg); }
.gb-copybtn:hover, .gb-copymd:hover, .gb-copymore:hover { background: var(--tint-2); }
.gb-tocbtn:hover { background: var(--gb-tocbtn-hover, var(--tint-2)); }
.gb-copybtn svg { width: var(--gb-btn-icon, 12px); height: var(--gb-btn-icon, 12px); color: var(--gb-btn-color); }
.gb-tocbtn { display: none; justify-content: center; width: var(--gb-btn-h); padding: 0; border-radius: var(--gb-btn-radius); background: var(--gb-tocbtn-bg, var(--tint-1)); }
.gb-tocbtn svg { width: 14px; height: 14px; }
.gb-copymenu {
  position: absolute; top: calc(100% + 8px); right: 0; z-index: 60; width: 280px; padding: 8px;
  background: var(--tint-1); border: 1px solid var(--tint-5); border-radius: 12px;
  box-shadow: 0 10px 30px rgba(28, 29, 31, .12), 0 1px 3px rgba(28, 29, 31, .06);
}
.gb-copymenu[hidden] { display: none; }
.gb-mi { display: flex; align-items: flex-start; gap: 12px; width: 100%; padding: 11px 8px; border: 0; border-radius: 8px; background: none; cursor: pointer; text-align: left; font-family: inherit; color: var(--tint-12); }
.gb-mi:hover { background: var(--tint-3); }
.gb-mi > svg { flex: none; width: 20px; height: 20px; margin-top: 0; color: var(--tint-11); }
.gb-mi-t { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.gb-mi-t b { display: flex; align-items: center; gap: 4px; font-size: 14px; font-weight: 500; line-height: 20px; }
.gb-mi-t b i { display: inline-flex; color: var(--tint-10); }
.gb-mi-t small { font-size: 12px; line-height: 16px; color: var(--tint-11); }
.gb-mi-sep { border: 0; border-top: 1px solid var(--tint-5); margin: 6px 8px; }
.gb-page-head { margin-bottom: var(--gb-head-mb); }
.gb-title { font-size: var(--gb-title-fs); line-height: var(--gb-title-lh); font-weight: var(--gb-title-fw); letter-spacing: var(--gb-title-ls); margin: 0 0 var(--gb-title-mb); }
.gb-desc { font-size: 16px; color: var(--tint-11); margin: 0; line-height: 1.6; }
.gb-agent-note { display: inline-block; font-size: 12.5px; font-weight: 600; color: #346DDB; background: #F0F6FF; border: 1px solid #CFE0FF; border-radius: 999px; padding: 4px 12px; margin-bottom: 12px; word-break: keep-all; overflow-wrap: break-word; }

/* ---------- content ---------- */
.gb-content { font-size: 17px; line-height: 1.78; }
.gb-content > *:first-child:not(.gb-alias), .gb-content > .gb-alias:first-child + * { margin-top: 8px; }
.gb-content p { margin: 16px 0; }
.gb-content h1 { font-size: 32px; line-height: 1.3; font-weight: 600; margin: 40px 0 8px; letter-spacing: -0.015em; }
.gb-content h2 { font-size: 27px; line-height: 1.35; font-weight: 600; margin: 36px 0 8px; letter-spacing: -0.01em; }
.gb-content h3 { font-size: 21px; line-height: 1.4; font-weight: 600; margin: 28px 0 6px; }
.gb-content h4 { font-size: 17px; font-weight: 600; margin: 24px 0 4px; }
.gb-content a { color: var(--primary); text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--primary) 40%, transparent); text-underline-offset: 2px; }
.gb-content a:hover { text-decoration-color: var(--primary); }
.gb-content strong { font-weight: 700; }
.gb-content ul, .gb-content ol { margin: 16px 0; padding-left: 26px; }
.gb-content li { margin: 6px 0; }
.gb-content hr { border: 0; border-top: 1px solid var(--tint-5); margin: 32px 0; }
.gb-content blockquote {
  margin: 16px 0; padding: 2px 0 2px 16px;
  border-left: 3px solid var(--tint-6); color: var(--tint-11);
}
.gb-content code {
  font-family: var(--mono); font-size: 85%;
  background: var(--tint-3); border: 1px solid var(--tint-5);
  border-radius: 4px; padding: 1px 5px;
}
.gb-content pre {
  background: var(--tint-2); border: 1px solid var(--tint-5); border-radius: 8px;
  padding: 16px; overflow-x: auto; font-size: 14px; line-height: 1.6;
}
.gb-content pre code { background: none; border: 0; padding: 0; font-size: inherit; }
.gb-content img { max-width: 100%; height: auto; border-radius: var(--gb-img-radius); }
.gb-content img.gb-zoomable { cursor: zoom-in; }
/* 이미지 확대 보기 — hidden 속성은 display 를 준 요소에서 무력화되므로 [hidden] 짝을 꼭 둔다 */
.gb-lightbox {
  position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center;
  padding: 28px; background: rgba(14, 17, 23, .86); cursor: zoom-out; animation: gbLbIn .16s ease-out;
  -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
}
.gb-lightbox[hidden] { display: none; }
.gb-lightbox img {
  display: block; max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain;
  border-radius: 8px; background: #fff; box-shadow: 0 24px 80px rgba(0, 0, 0, .55);
}
body.gb-lb-open { overflow: hidden; }
@keyframes gbLbIn { from { opacity: 0; } to { opacity: 1; } }
@media (max-width: 640px) { .gb-lightbox { padding: 12px; } }
.gb-content figure { margin: var(--gb-block-mt) 0 var(--gb-block-mb); text-align: center; }
.gb-content figure img { border: 1px solid var(--tint-5); }
.gb-content figcaption { font-size: 13px; color: var(--tint-11); margin-top: 8px; }
/* 이미지 블록: 정렬(<div align>)·테두리(<div data-with-frame>)·크기(<img width>) — GitBook 이 내보내는 마크업과 같다 */
.gb-content div[align="left"] figure, .gb-content div[align="left"] { text-align: left; }
.gb-content div[align="right"] figure, .gb-content div[align="right"] { text-align: right; }
.gb-content div[align="center"] figure, .gb-content div[align="center"] { text-align: center; }
.gb-content [data-with-frame="true"] img { border: 1px solid var(--tint-5); border-radius: 12px; box-shadow: 0 1px 4px rgba(20, 24, 31, .08); }
.gb-content figure img[width] { height: auto; }
/* 마크다운 단독 이미지(![alt](url)) — alt 를 figcaption 으로 둔 구조. 표시 여부·모양은 토큰(기본: 숨김 → 예전 <p><img> 와 같은 룩) */
.gb-content .gb-figure-md { margin: 16px 0; text-align: left; }
.gb-content .gb-figure-md img { border: 0; }
.gb-content .gb-figure-md figcaption {
  display: var(--gb-caption-display); font-size: var(--gb-caption-fs); line-height: var(--gb-caption-lh);
  color: var(--gb-caption-color); text-align: var(--gb-caption-align); margin-top: var(--gb-caption-mt);
}
/* 제목 「직접 링크」 — 빈 <a class=gb-hash> + CSS 마스크 아이콘, 별칭 앵커(<span class=gb-alias id=…>)는 GitBook 식 id 호환용(보이지 않음) */
.gb-content h2, .gb-content h3, .gb-content h4 { position: relative; }
.gb-content .gb-alias { display: block; height: 0; pointer-events: none; }
.gb-content .gb-hash {
  position: absolute; left: -24px; top: 50%; width: 16px; height: 16px; margin-top: -8px;
  color: var(--gb-hash-color); opacity: var(--gb-hash-rest); text-decoration: none; transition: opacity .12s;
}
.gb-content .gb-hash::before {
  content: ''; display: block; width: 16px; height: 16px; background: currentColor;
  -webkit-mask: var(--gb-hash-mask) center / contain no-repeat; mask: var(--gb-hash-mask) center / contain no-repeat;
}
.gb-content h2:hover .gb-hash, .gb-content h3:hover .gb-hash, .gb-content h4:hover .gb-hash { opacity: var(--gb-hash-hover); }
.gb-content .gb-hash:focus-visible { opacity: 1; outline: 2px solid var(--primary); outline-offset: 2px; border-radius: 3px; }
@media (hover: none) { .gb-content .gb-hash { display: none; } }
/* 외부(절대 주소) 링크 표시 — 토큰이 inline-block 이면 ↗ */
.gb-content a.gb-ext::after {
  content: ''; display: var(--gb-ext-arrow); width: 12px; height: 12px; margin-left: 2px; background: currentColor;
  -webkit-mask: var(--gb-ext-mask) center / contain no-repeat; mask: var(--gb-ext-mask) center / contain no-repeat;
}
.gb-content mark { border-radius: 2px; padding: 0 2px; }

/* tables — GitBook look */
.gb-content table {
  width: 100%; border-collapse: collapse; margin: var(--gb-block-mt) 0 var(--gb-block-mb);
  font-size: 14.5px; line-height: 1.6; display: block; overflow-x: auto;
}
.gb-content table thead th {
  background: var(--tint-2); font-weight: 600; text-align: left;
}
.gb-content table th, .gb-content table td {
  border: 1px solid var(--tint-5); padding: 10px 14px; vertical-align: top; min-width: 80px;
}

/* 표 래퍼 — 기본 룩에서는 아무것도 하지 않는다(테마가 가로 스크롤·간격을 맡길 수 있게 둔 구조) */
.gb-table-wrap { display: contents; }

/* hint blocks */
.gb-hint {
  display: flex; gap: var(--gb-hint-gap); margin: var(--gb-block-mt) 0 var(--gb-block-mb); padding: var(--gb-hint-pad);
  border-radius: var(--gb-hint-radius); font-size: var(--gb-hint-fs); line-height: var(--gb-hint-lh);
}
.gb-hint-icon { flex-shrink: 0; margin-top: 2px; }
.gb-hint-icon svg { width: 16px; height: 16px; }
.gb-hint-emoji { display: block; font-size: 18px; line-height: 1; }
.gb-hint-body > *:first-child { margin-top: 0; }
.gb-hint-body > *:last-child { margin-bottom: 0; }
.gb-hint-info    { background: var(--gb-hint-info-bg); }    .gb-hint-info .gb-hint-icon    { color: var(--gb-hint-info-fg); }
.gb-hint-success { background: var(--gb-hint-success-bg); } .gb-hint-success .gb-hint-icon { color: var(--gb-hint-success-fg); }
.gb-hint-warning { background: var(--gb-hint-warning-bg); } .gb-hint-warning .gb-hint-icon { color: var(--gb-hint-warning-fg); }
.gb-hint-danger  { background: var(--gb-hint-danger-bg); }  .gb-hint-danger .gb-hint-icon  { color: var(--gb-hint-danger-fg); }

/* embeds */
.gb-embed-video {
  position: relative; width: 100%; aspect-ratio: 16 / 9;
  margin: var(--gb-block-mt) 0 var(--gb-block-mb); border-radius: var(--gb-embed-radius); overflow: hidden; background: #000;
}
.gb-embed-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.gb-embed-link {
  display: flex; flex-direction: column; gap: 2px; margin: 24px 0; padding: 14px 16px;
  border: 1px solid var(--tint-5); border-radius: 8px;
}
.gb-embed-link:hover { background: var(--tint-2); }
.gb-embed-title { font-size: 15px; font-weight: 500; color: var(--tint-12); text-decoration: none; }
.gb-embed-host { font-size: 13px; color: var(--tint-11); }
.gb-content a.gb-embed-link { text-decoration: none; }

/* tabs blocks */
.gb-tabs-block, .gb-tabs.gb-tabs-content { margin: 24px 0; }
.gb-content .gb-tabs { border: 1px solid var(--tint-5); border-radius: var(--gb-tabs-radius); margin: var(--gb-block-mt) 0 var(--gb-block-mb); display: block; padding: 0; height: auto; }
.gb-content .gb-tab-heads { display: flex; gap: 4px; border-bottom: 1px solid var(--tint-5); padding: 6px 8px 0; }
.gb-content .gb-tab-btn {
  border: 0; background: none; cursor: pointer; font-size: 14px; font-weight: 500;
  color: var(--tint-11); padding: 8px 12px; border-bottom: 2px solid transparent;
}
.gb-content .gb-tab-btn.active { color: var(--primary); border-bottom-color: var(--primary); }
.gb-content .gb-tab-panel { display: none; padding: 16px; }
.gb-content .gb-tab-panel.active { display: block; }

/* ---------- page nav / footer ---------- */
.gb-lastupdated { display: var(--gb-lastupdated-display); margin: 32px 0 0; font-size: 14px; line-height: 20px; color: var(--tint-11); }
.gb-pagenav { display: flex; gap: var(--gb-card-gap-x, 16px); margin-top: var(--gb-card-mt); }
.gb-pagenav > span { flex: 1; }
.gb-pagecard {
  flex: 1; display: flex; align-items: center; gap: 12px; min-width: 0;
  border: 1px solid var(--gb-card-line); border-radius: var(--gb-card-radius); padding: var(--gb-card-pad); color: var(--tint-11);
}
.gb-pagecard:hover { border-color: var(--primary); }
.gb-pagecard.next { justify-content: flex-end; text-align: right; }
.gb-pagecard-ico { display: var(--gb-card-ico, none); flex: none; color: var(--tint-10); }
.gb-pagecard-ico svg { width: 12px; height: 12px; display: block; }
.gb-pagecard-text { display: flex; flex-direction: column; gap: var(--gb-card-gap); min-width: 0; }
.gb-pagecard-label { font-size: var(--gb-card-label-fs); line-height: 16px; color: var(--tint-11); }
.gb-pagecard-title { font-size: var(--gb-card-title-fs); font-weight: var(--gb-card-title-fw); color: var(--tint-12); line-height: 1.375; }
.gb-pagecard:hover .gb-pagecard-title { color: var(--primary); }
/* 사이드바 하단 카드는 GitBook 호환 테마에서만 보인다(기본 테마는 본문 하단 푸터 그대로) */
.gb-powered-card { display: none; }
.gb-footer { margin-top: 56px; padding-top: 24px; border-top: 1px solid var(--tint-5); }
.gb-powered {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 13px; font-weight: 500; color: var(--tint-11);
  border: 1px solid var(--tint-5); border-radius: 8px; padding: 8px 12px;
}
.gb-powered svg { width: 14px; height: 14px; }
.gb-powered:hover { color: var(--tint-12); background: var(--tint-2); }

/* ---------- search modal ---------- */
.gb-search-modal { position: fixed; inset: 0; z-index: 100; }
.gb-search-modal[hidden] { display: none; }
.gb-search-backdrop { position: absolute; inset: 0; background: rgba(28,29,31,.4); }
.gb-search-panel {
  position: relative; margin: 12vh auto 0; width: min(640px, calc(100% - 32px));
  background: var(--tint-1); border-radius: 12px; overflow: hidden;
  box-shadow: 0 24px 64px rgba(0,0,0,.24);
}
.gb-search-inputrow { display: flex; align-items: center; gap: 12px; padding: 16px 18px; border-bottom: 1px solid var(--tint-5); }
.gb-search-inputrow .gb-search-icon { color: var(--tint-10); }
.gb-search-inputrow input { flex: 1; border: 0; outline: 0; font-size: 17px; font-family: inherit; color: var(--tint-12); }
.gb-search-close { cursor: pointer; }
.gb-search-results { max-height: 55vh; overflow-y: auto; padding: 8px; }
.gb-search-hitrow { display: block; padding: 10px 12px; border-radius: 8px; }
.gb-search-hitrow:hover, .gb-search-hitrow.sel { background: var(--primary-3); }
.gb-search-hit-title { font-size: 15px; font-weight: 600; }
.gb-search-hit-snip { font-size: 13px; color: var(--tint-11); margin-top: 2px; line-height: 1.5; }
.gb-search-empty { padding: 28px; text-align: center; color: var(--tint-11); font-size: 14px; }
/* 검색 팝업 — 새 구조 요소(구조는 공통 · 보일지/모양은 토큰·테마) */
.gb-search-modal [hidden] { display: none !important; }
.gb-search-drop { display: block; }
.gb-search-xbtn, .gb-search-clear { display: var(--gb-search-x-display); border: 0; background: none; color: var(--tint-10); cursor: pointer; padding: 0; align-items: center; justify-content: center; }
.gb-search-clear { display: var(--gb-search-clear-display); }
.gb-search-count { display: var(--gb-search-count-display); color: var(--tint-11); font-size: 14px; white-space: nowrap; }
.gb-search-foot { display: var(--gb-search-foot-display); align-items: center; justify-content: space-between; gap: 16px; }
.gb-search-filter { position: relative; display: inline-flex; align-items: center; gap: 12px; }
.gb-search-filter-btn { display: inline-flex; align-items: center; gap: 6px; border: 0; background: none; font: inherit; color: inherit; cursor: pointer; padding: 0; }
.gb-search-filter-menu { position: absolute; left: 36px; bottom: calc(100% + 6px); min-width: 160px; max-height: 260px; overflow-y: auto; z-index: 3; padding: 4px; background: #fff; border-radius: 8px; box-shadow: 0 0 0 1px var(--tint-6), 0 10px 24px rgba(28,29,31,.14); }
.gb-search-filter-opt { display: block; width: 100%; text-align: left; border: 0; background: none; font: inherit; font-size: 14px; color: var(--tint-12); padding: 6px 10px; border-radius: 6px; cursor: pointer; }
.gb-search-filter-opt:hover, .gb-search-filter-opt.on { background: var(--primary-3); }
.gb-search-hints { display: inline-flex; align-items: center; gap: 16px; }
.gb-search-hint { display: inline-flex; align-items: center; gap: 4px; }
.gb-search-hint kbd { font-family: inherit; font-size: 12px; min-width: 20px; height: 20px; padding: 0 4px; display: inline-flex; align-items: center; justify-content: center; background: #fff; border: 1px solid var(--tint-5); border-radius: 6px; color: var(--tint-11); }
.gb-search-hit-ic { display: var(--gb-search-ic-display); flex: none; color: #79859B; }
.gb-search-hit-main { display: block; min-width: 0; flex: 1; }
.gb-search-hit-crumb { display: var(--gb-search-crumb-display); align-items: center; gap: 8px; font-size: 12px; line-height: 16px; color: rgba(106,110,119,.64); }
.gb-search-crumb-sep { display: inline-flex; }
.gb-search-hit-title { display: block; }
.gb-search-hit-snip { display: block; }
.gb-search-enter { display: none; }
/* 검색 추천(입력 전) — 결과 행(구역 › 그룹 / 제목)과 한 세트 · 섹션 제목은 작은 회색 라벨 */
.gb-search-sec { display: flex; align-items: center; justify-content: space-between; padding: var(--gb-search-sec-pt) 12px 4px; }
.gb-search-sug > .gb-search-sec:first-child { padding-top: 4px; }
.gb-search-sec-h { font-size: var(--gb-search-sec-fs); line-height: 16px; font-weight: 500; color: var(--gb-search-sec-color); }
.gb-search-sec-act { border: 0; background: none; font: inherit; font-size: var(--gb-search-sec-fs); color: var(--gb-search-sec-color); cursor: pointer; padding: 2px 6px; border-radius: 6px; }
.gb-search-sec-act:hover { background: var(--tint-3); color: var(--tint-12); }
.gb-search-sug-row { display: flex; align-items: center; gap: 12px; }
.gb-search-sug .gb-search-hit-ic { display: flex; }
.gb-search-sug .gb-search-hit-crumb { display: flex; }
.gb-search-x { display: flex; flex: none; width: 28px; height: 28px; align-items: center; justify-content: center; margin-left: auto; border: 0; background: none; border-radius: 8px; color: var(--tint-10); cursor: pointer; opacity: 0; }
.gb-search-recent-row:hover .gb-search-x, .gb-search-recent-row.sel .gb-search-x, .gb-search-x:focus-visible { opacity: 1; }
.gb-search-x:hover { background: var(--tint-3); color: var(--tint-12); }
@media (hover: none) { .gb-search-x { opacity: 1; } }
.gb-search-recent-row { cursor: pointer; }
.gb-search-results { transition: opacity .15s; }
.gb-search-fading { opacity: .45; }
.gb-search-skel i { display: block; height: 40px; margin: 8px 12px; border-radius: 8px; background: linear-gradient(90deg, var(--tint-3), var(--tint-2), var(--tint-3)); background-size: 200% 100%; animation: gbSkel 1.1s linear infinite; }
@keyframes gbSkel { from { background-position: 200% 0; } to { background-position: -200% 0; } }
.gb-search-hl { background: var(--gb-search-hl-bg); color: inherit; padding: var(--gb-search-hl-pad); margin: var(--gb-search-hl-mg); border-radius: 4px; }

/* ---------- responsive (공통 단계) ---------- */
:root { --gb-title-fs-sm: 30px; --gb-title-lh-sm: 1.25; --gb-title-fs-xs: 24px; }
@media (max-width: 1024px) { :root { --gb-side-gap: 24px; --gb-toc-gap: 24px; } }  /* 기본 룩: 좁아지면 열 간격 24 */
@media (max-width: 767.98px) { :root { --gb-px: 24px; } }
@media (max-width: 639.98px) { :root { --gb-px: 16px; } }
.gb-main { container: gbmain / inline-size; }
@container gbmain (max-width: 511.98px) { .gb-title { font-size: var(--gb-title-fs-sm); line-height: var(--gb-title-lh-sm); } }
@container gbmain (max-width: 319.98px) { .gb-title { font-size: var(--gb-title-fs-xs); } }
.gb-scrim {
  position: fixed; inset: 0; z-index: 65; background: rgba(255, 255, 255, .45);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); opacity: 0; transition: opacity .2s ease;
}
.gb-scrim[hidden] { display: none; }
.gb-scrim.show { opacity: 1; }
body.gb-noscroll { overflow: hidden; }
.gb-sheet-x, .gb-drawer-close, .gb-toc-close {
  position: absolute; top: 17px; width: 40px; height: 40px; align-items: center; justify-content: center;
  border: 1px solid var(--tint-5); border-radius: 12px; background: var(--tint-1); color: var(--tint-11); cursor: pointer; padding: 0;
  box-shadow: 0 1px 2px rgba(28, 29, 31, .06);
}
.gb-drawer-close svg, .gb-toc-close svg { width: 18px; height: 18px; }

/* xl(1280) 미만 — 목차는 오른쪽 시트, 페이지 머리의 「목차」 단추로 연다 */
@media (max-width: 1279.98px) {
  .gb-tocbtn { display: inline-flex; }
  .gb-toc {
    position: fixed; top: 0; right: 0; bottom: 0; z-index: 70; display: flex; flex-direction: column;
    width: var(--gb-toc-w); max-width: calc(100% - 72px); height: auto; max-height: none; margin: 0; overflow: visible;
    padding: 32px 16px 16px; background: var(--gb-sheet-bg); border-left: 1px solid var(--gb-sheet-line);
    transform: translateX(100%); visibility: hidden; transition: transform .2s ease, visibility 0s linear .2s;
  }
  .gb-toc.open { transform: none; visibility: visible; transition: transform .2s ease; }
  .gb-toc-close { display: flex; right: calc(100% + 17px); }
  .gb-toc-list { overflow-y: auto; flex: 1; border-left: 0; }
  .gb-toc-head { display: none; }
}
/* lg(1024) 미만 — 사이드바는 왼쪽 드로어, 햄버거로 연다 */
@media (max-width: 1023.98px) {
  .gb-burger { display: flex; }
  .gb-shell { display: block; }
  .gb-main { margin: 0 auto; }
  .gb-sidebar {
    position: fixed; top: 0; left: 0; bottom: 0; z-index: 70; display: flex; flex-direction: column;
    width: 80%; max-width: calc(100% - 72px); height: auto; max-height: none; margin: 0; overflow: visible;   /* height:auto — 데스크톱 높이 토큰이 top/bottom 을 무력화하지 않게 */
    padding: 24px 0 0 32px; background: var(--gb-sheet-bg); border-right: 1px solid var(--gb-sheet-line);
    transform: translateX(-100%); visibility: hidden; transition: transform .2s ease, visibility 0s linear .2s;
  }
  .gb-sidebar.open { transform: none; visibility: visible; transition: transform .2s ease; }
  .gb-drawer-head { display: flex; align-items: center; flex: none; margin-bottom: 24px; }
  .gb-drawer-close { display: flex; left: calc(100% + 15px); }
  .gb-sidebar-nav { flex: 1; min-height: 0; overflow-y: auto; padding-bottom: 32px; }
}
@media (min-width: 768px) and (max-width: 1023.98px) { .gb-sidebar { width: 50%; } }

/* ---------- rich components (cards · stepper · details) ---------- */
.gb-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 14px; margin: 24px 0; }
.gb-card {
  display: block; border: 1px solid var(--tint-5); border-radius: 12px; padding: 18px 20px;
  background: var(--tint-1); text-decoration: none !important; transition: border-color .12s, box-shadow .12s, transform .1s;
}
.gb-card:hover { border-color: var(--primary); box-shadow: 0 4px 14px rgba(16,24,40,.07); transform: translateY(-1px); }
.gb-card b { display: block; font-size: 15.5px; font-weight: 700; color: var(--tint-12); margin-bottom: 5px; }
.gb-card span { display: block; font-size: 13.5px; color: var(--tint-11); line-height: 1.6; }
.gb-stepper { margin: 24px 0; }
.gb-stepper ol { list-style: none; margin: 0; padding: 0; counter-reset: dpstep; }
.gb-stepper ol > li {
  position: relative; counter-increment: dpstep; padding: 0 0 22px 42px; margin: 0;
  border-left: 2px solid var(--tint-5);
}
.gb-stepper ol > li:last-child { border-left-color: transparent; padding-bottom: 0; }
.gb-stepper ol > li::before {
  content: counter(dpstep); position: absolute; left: -15px; top: -2px;
  width: 28px; height: 28px; border-radius: 999px; background: var(--primary); color: #fff;
  display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700;
}
.gb-content details, .vditor-wysiwyg details {
  border: 1px solid var(--tint-5); border-radius: 10px; padding: 12px 16px; margin: 20px 0; background: var(--tint-2);
}
.gb-content details > summary, .vditor-wysiwyg details > summary {
  cursor: pointer; font-weight: 600; font-size: 15px; list-style: none;
}
.gb-content details > summary::-webkit-details-marker { display: none; }
.gb-content details[open] > summary { margin-bottom: 10px; }

/* ---------- [[위키링크]] · 역링크 ---------- */
.gb-wikilink, .gb-content a.gb-wikilink { color: var(--primary); font-weight: 600; text-decoration: none; border-bottom: 1.5px dashed color-mix(in srgb, var(--primary) 45%, transparent); }
.gb-wikilink:hover { border-bottom-style: solid; }
.gb-wikilink.miss { color: #9AA1AD; border-bottom-color: #D6DAE2; cursor: default; }
.gb-backlinks { margin: 40px 0 8px; border: 1px solid var(--gb-border, #E6E9EF); border-radius: 12px; padding: 14px 18px; background: #FAFBFD; }
.gb-backlinks-head { font-size: 11.5px; font-weight: 800; letter-spacing: .06em; color: #6A6E77; margin-bottom: 9px; }
.gb-backlinks-list a { display: inline-block; font-size: 13px; font-weight: 600; color: var(--primary); background: #fff; border: 1px solid var(--gb-border, #E6E9EF); border-radius: 999px; padding: 5px 14px; margin: 0 6px 6px 0; text-decoration: none; }
.gb-backlinks-list a:hover { border-color: var(--primary); }
.gb-powered { display: inline-flex; align-items: center; gap: 8px; }
.gb-powered-mark { width: 17px; height: 17px; border-radius: 4px; display: block; }

/* ---------- 안내 화면(빈 브레인·없는 페이지·없는 브레인) ---------- */
body.gb-notice-body { min-height: 100vh; margin: 0; display: flex; flex-direction: column; background: var(--tint-2); }
.gb-notice { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 28px; padding: 48px 20px 40px; }
.gb-notice-brand { display: inline-flex; align-items: center; gap: 10px; font-weight: 700; font-size: 15px; color: var(--tint-12); }
.gb-notice-mark {
  width: 28px; height: 28px; border-radius: 8px; background: var(--primary); color: #fff;
  display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: 14px;
}
.gb-notice-logo { width: 28px; height: 28px; border-radius: 8px; object-fit: cover; }
.gb-notice-logo-wb { border-radius: 7px; }
.gb-notice-card {
  width: 100%; max-width: 520px; background: #fff; border: 1px solid var(--tint-5); border-radius: 20px;
  padding: 40px 36px 36px; text-align: center; box-shadow: 0 1px 2px rgba(20, 24, 31, .04), 0 12px 40px -20px rgba(20, 24, 31, .18);
}
.gb-notice-eyebrow {
  display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: 999px;
  background: color-mix(in srgb, var(--primary) 10%, #fff); color: var(--primary);
  font-size: 12.5px; font-weight: 700; letter-spacing: .02em; margin-bottom: 18px;
}
.gb-notice-eyebrow.muted { background: var(--tint-3); color: var(--tint-11); }
.gb-notice-h1 { font-size: 24px; line-height: 1.35; letter-spacing: -0.01em; margin: 0 0 12px; }
.gb-notice-p { color: var(--tint-11); font-size: 15.5px; line-height: 1.75; margin: 0; }
.gb-notice-p b { color: var(--tint-12); font-weight: 600; }
.gb-notice-actions { display: flex; flex-direction: column; align-items: center; gap: 14px; margin-top: 26px; }
.gb-notice-btn {
  display: inline-flex; align-items: center; justify-content: center; min-height: 46px; padding: 0 24px; border-radius: 12px;
  background: var(--primary); color: #fff; font-weight: 600; font-size: 15px; transition: filter .15s;
}
.gb-notice-btn:hover { filter: brightness(1.06); }
.gb-notice-link { color: var(--primary); font-weight: 600; font-size: 14.5px; }
.gb-notice-link:hover { text-decoration: underline; }
.gb-notice-note { margin: 22px 0 0; padding-top: 18px; border-top: 1px solid var(--tint-5); color: var(--tint-10); font-size: 13px; line-height: 1.7; }
.gb-notice-foot .gb-powered { opacity: .75; }
@media (max-width: 480px) {
  .gb-notice { padding: 32px 16px 28px; gap: 22px; }
  .gb-notice-card { padding: 30px 22px 26px; border-radius: 16px; }
  .gb-notice-h1 { font-size: 21px; }
  .gb-notice-p { font-size: 15px; }
}