/* API 레퍼런스의 테마입니다.
   home(home/css/index.css)과 예제 목록(tutorial-official/css/example-index.css)과 같은
   토큰 체계를 씁니다. 색은 모두 :root 토큰으로만 정의하고 html[data-theme="dark"]에서
   값만 바꿉니다. data-theme은 layout.tmpl의 머리 Script가 화면을 그리기 전에 정하고,
   머리말의 전환 버튼이 바꿉니다. 세 탭이 localStorage 키 하나(geondt-example-theme)를
   함께 쓰므로 탭을 옮겨도 고른 테마가 유지됩니다.

   서체는 Quattrocento Sans(Google Fonts @import)를 쓰고 있었습니다. 한글 글자가 없어
   한글은 늘 대체 서체로 그려졌고, CSS 안의 @import는 스타일시트를 받은 뒤 다시 요청이
   나가 렌더가 두 번 막혔습니다. 이제 layout.tmpl이 Pretendard를 link로 불러옵니다. */

:root {
    color-scheme: light;

    /* 바탕과 면 */
    --bg: #f4f4f2;
    --surface: #ffffff;
    --hover-soft: #eceee9;
    --glass-header: rgba(244, 244, 242, .78);

    /* 글자 */
    --ink: #16181c;
    --on-ink: #ffffff;
    --ink-2: #454a52;
    --muted: #666c75;
    --faint: #82888f;

    /* 선과 결 */
    --line: #e3e4e1;
    --line-strong: #cfd1cd;
    --focus-ring: rgba(22, 24, 28, .09);

    /* 포인트 — 브랜드 로고의 라임과 시안 두 가지만 씁니다. */
    --accent: #3c7a12;
    --accent-2: #12658f;

    /* 상태 표시 — API 문서에만 있는 배지용입니다. deprecated와 experimental은
       포인트 색으로 대신할 수 없어 두 가지만 따로 둡니다. */
    --danger: #b0184a;
    --warn: #8a5210;

    /* API 항목 하나가 올라앉는 면입니다. 이름 바와 내용 면을 따로 두고 톤도 나눠,
       '페이지 바탕 / 이름 / 내용' 세 톤으로 구간과 그 안의 머리·몸이 함께 갈립니다. */
    --entry-head: #eceee9;
    --entry-surface: #ffffff;

    /* 좌측 목록의 개수 꼬리표입니다. home과 같은 값을 씁니다. */
    --badge-bg: #dde1d5;
    --badge-hit: #dcefc4;
    --badge-hit-ink: #2f6a12;

    /* 코드 */
    --code-surface: #eceee9;

    /* 코드 문법 색입니다. home과 같은 값을 씁니다. Prism이 붙이는 토큰 클래스에 대응합니다. */
    --code-plain: #16181c;
    --code-punct: #5b6169;
    --code-comment: #63695e;
    --code-keyword: #0b5c88;
    --code-string: #2f6a12;
    --code-number: #9a4a0a;
    --code-function: #6d3f9e;
    --code-class: #8a5210;

    /* 글자 크기입니다. 열두 가지가 섞여 있었고 12.3px, 13.1px 같은 값은 em 계산이 겹쳐
       나온 잔재였습니다. home과 같은 계단으로 맞춥니다.
       이 문서는 코드 사용법을 글로 설명하는 곳이라 설명문이 잘 읽혀야 합니다. 그래서 본문과
       매개변수 설명은 home 본문과 같은 17px로 올리고, 타입 이름처럼 코드인 것은 코드 서체로
       내려 글과 코드를 서체로 구분합니다. */
    --fs-xs: 13px;       /* 출처, 배지, 태그 */
    --fs-code: 14.5px;   /* 코드 블록, 시그니처, 타입 이름 */
    --fs-sm: 15px;       /* 촘촘한 보조 설명 */
    --fs-md: 17px;       /* 본문, 설명문, 매개변수 설명 */
    --fs-lg: 20px;       /* h3, 구획 제목 */
    --fs-xl: 24px;       /* h2 */
    --fs-2xl: 34px;      /* h1 */

    /* 행간과 세로 리듬입니다. home과 같은 값을 씁니다. */
    --lh-tight: 1.3;     /* 제목 */
    --lh-body: 1.75;     /* 읽는 글 */
    --lh-code: 1.55;     /* 코드 */
    --gap-line: 8px;     /* 제목과 바로 아래 글, 목록 항목 사이 */
    --gap-block: 18px;   /* 문단 사이 */
    --gap-group: 32px;   /* 소절 시작 */
    --gap-section: 72px; /* 절 경계 */
    --gap-entry: 44px;   /* API 항목 하나 사이. 이 문서에만 있는 단위입니다. */

    /* 읽기 열 폭입니다. 열 폭 제한이 없어 한 줄에 한글 78자가 들어갔습니다.
       주의: em은 글자 크기 기준이라 한글 글자수와 다릅니다. Pretendard 한글 한 글자는
       글자 크기의 0.864배이므로 1em에 약 1.16자가 들어갑니다. 아래 60em은 약 69자입니다.
       글줄이 흐르는 요소에만 걸고, 표와 코드 블록은 열 폭을 그대로 쓰게 둡니다. */
    --measure: 60em;

    --radius: 14px;
    --shadow: 0 10px 28px -14px rgba(16, 18, 22, .22);
    --ease: cubic-bezier(.22, 1, .36, 1);

    --header-height: 56px;
    --rail-width: 308px;
    --page-max: 1400px;
    --page-gutter: 40px;

    --sans: "Pretendard Variable", Pretendard, "Noto Sans KR", system-ui, -apple-system, sans-serif;
    --mono: ui-monospace, "SF Mono", "JetBrains Mono", "Roboto Mono", Consolas, monospace;
}

:root[data-theme="dark"] {
    color-scheme: dark;

    --bg: #0b0b0d;
    --surface: #141417;
    --hover-soft: #1d1e22;
    --glass-header: rgba(11, 11, 13, .72);

    --ink: #f0f1ec;
    --on-ink: #0b0b0d;
    --ink-2: #b6b9b2;
    --muted: #8f938c;
    --faint: #7a7d76;

    --line: #26272b;
    --line-strong: #383a3f;
    --focus-ring: rgba(240, 241, 236, .12);

    --accent: #c3f53c;
    --accent-2: #5fc6ef;

    --danger: #ff8fa8;
    --warn: #e8c07a;

    --entry-head: #1d1e22;
    --entry-surface: #141417;

    --badge-bg: #24262b;
    --badge-hit: #26330f;
    --badge-hit-ink: #c3f53c;

    --code-surface: #141417;

    --code-plain: #e8eae4;
    --code-punct: #9aa09a;
    --code-comment: #7a8074;
    --code-keyword: #5fc6ef;
    --code-string: #b6dd7a;
    --code-number: #f0a35e;
    --code-function: #c9a2f0;
    --code-class: #e8c07a;

    --shadow: 0 10px 28px -14px rgba(0, 0, 0, .7);
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-padding-top: calc(var(--header-height) + 18px); background: var(--bg); }

body {
    margin: 0;
    padding-top: var(--header-height);
    color: var(--ink);
    background: var(--bg);
    font-family: var(--sans);
    font-size: 16px;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

a { color: var(--accent-2); transition: color .15s ease; }
a:hover, a:focus { color: var(--ink); }
a:focus-visible, button:focus-visible, input:focus-visible, summary:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
}

ul, ol { margin: 0; padding: 0; }
li { list-style: none; }
.hidden, [hidden] { display: none !important; }
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* 좌측 목록 안쪽 스크롤바입니다. 앞서는 선택자 없이 두어 페이지 스크롤바까지 9px로
   줄었고, 그만큼 본문 열이 오른쪽으로 밀려 home·예제 목록과 시작 x가 3px 어긋났습니다
   (home 253px / API 256px). 페이지 스크롤바는 두 탭과 같은 기본 폭으로 두고
   목록 안쪽만 얇게 둡니다. */
.navigation::-webkit-scrollbar { width: 9px; height: 9px; }
.navigation::-webkit-scrollbar-thumb { background: var(--line-strong); border: 2px solid transparent; border-radius: 8px; background-clip: padding-box; }

/* ── 머리말 ────────────────────────────────────────────────
   파란 밴드였습니다. home과 예제 목록의 유리질 머리말과 같은 규격으로 맞춥니다. */
.api-header {
    position: fixed;
    z-index: 1000;
    inset: 0 0 auto 0;
    height: var(--header-height);
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 max(var(--page-gutter), calc((100% - var(--page-max)) / 2));
    color: var(--ink);
    background: var(--glass-header);
    border-bottom: 1px solid var(--line);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    backdrop-filter: blur(20px) saturate(180%);
}

.api-brand {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--ink);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: -.015em;
    text-decoration: none;
}
.api-brand:hover, .api-brand:focus { color: var(--ink); text-decoration: none; }
.api-brand img { width: 52px; height: auto; border: 0; }

.api-links { margin-left: auto; height: 100%; display: flex; align-items: center; gap: 4px; }
.api-links a {
    position: relative;
    display: flex;
    align-items: center;
    height: 30px;
    padding: 0 10px;
    color: var(--muted);
    font-size: 12.5px;
    font-weight: 500;
    letter-spacing: -.01em;
    text-decoration: none;
    transition: color 160ms ease;
}
.api-links a:hover, .api-links a:focus, .api-links a.active {
    outline: 0;
    color: var(--ink);
    background: none;
    text-decoration: none;
}
.api-links a.active { font-weight: 600; }
/* 활성 탭 표시입니다. 색을 채우는 대신 밑줄로 알려 머리말이 눌리지 않게 합니다. */
.api-links a.active::after {
    content: '';
    position: absolute;
    right: 10px;
    bottom: -1px;
    left: 10px;
    height: 2px;
    background: var(--accent);
}

/* 더보기 메뉴입니다. 머리말에 일곱 항목을 늘어놓아 home·예제 목록의 네 항목 + 더보기와
   달라 보였습니다. 같은 짜임으로 맞춥니다. */
.more-menu { position: relative; }
.more-menu > summary {
    position: relative;
    display: flex;
    align-items: center;
    height: 30px;
    padding: 0 10px;
    color: var(--muted);
    cursor: pointer;
    font-size: 12.5px;
    font-weight: 500;
    letter-spacing: -.01em;
    list-style: none;
    transition: color 160ms ease;
}
.more-menu > summary::-webkit-details-marker { display: none; }
.more-menu > summary:hover,
.more-menu[open] > summary { color: var(--ink); }
.more-menu > div {
    position: absolute;
    top: 40px;
    right: 0;
    display: grid;
    min-width: 168px;
    padding: 6px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 12px;
    box-shadow: var(--shadow);
}
.more-menu > div a {
    padding: 8px 10px;
    color: var(--ink-2);
    border-radius: 8px;
    font-size: 12.5px;
    font-weight: 500;
    text-decoration: none;
    transition: color 120ms ease, background 120ms ease;
}
.more-menu > div a:hover { color: var(--ink); background: var(--hover-soft); }
/* 좁은 화면에서 머리말의 주요 항목이 감춰지면 더보기 안에서 대신 보여 줍니다. */
.mobile-nav-link { display: none; }

/* 화면 테마 전환 버튼입니다. home과 예제 목록의 같은 버튼과 규격을 맞춥니다. */
.theme-toggle {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    margin-left: 6px;
    padding: 0;
    color: var(--muted);
    background: transparent;
    border: 1px solid var(--line);
    border-radius: 50%;
    cursor: pointer;
    transition: color 160ms ease, background 160ms ease, border-color 160ms ease;
}
.theme-toggle:hover { color: var(--ink); background: var(--hover-soft); border-color: var(--line-strong); }
.theme-toggle:active { transform: translateY(1px); }
.theme-toggle svg { width: 14px; height: 14px; }
.theme-toggle .theme-icon-dark { display: none; }
:root[data-theme="dark"] .theme-toggle .theme-icon-dark { display: block; }
:root[data-theme="dark"] .theme-toggle .theme-icon-light { display: none; }

/* 좁은 화면에서 좌측 목록을 여는 버튼입니다. home·예제 목록에는 없는 이 문서만의 버튼이라
   로고 왼쪽에 두었더니 로고가 x 40에서 90으로 밀려, 탭을 옮길 때 로고가 눈에 띄게 튀었습니다.
   order로 머리말 맨 끝(테마 버튼 옆)에 보내 로고는 두 탭 모두 여백선에서 시작하게 하고,
   생김새도 옆의 테마 버튼과 같은 30px 원형으로 맞춥니다. */
.navigation-toggle {
    display: none;
    order: 1;
    flex-direction: column;
    justify-content: center;
    gap: 3px;
    width: 30px;
    height: 30px;
    margin-left: 6px;
    padding: 0;
    color: var(--muted);
    background: transparent;
    border: 1px solid var(--line);
    border-radius: 50%;
    cursor: pointer;
    transition: color 160ms ease, background 160ms ease, border-color 160ms ease;
}
.navigation-toggle:hover { color: var(--ink); background: var(--hover-soft); border-color: var(--line-strong); }
.navigation-toggle span { width: 14px; height: 1.5px; margin: 0 auto; border-radius: 2px; background: currentColor; }

#wrap {
    display: grid;
    grid-template-columns: var(--rail-width) minmax(0, 1fr);
    align-items: start;
    gap: 48px;
    width: min(var(--page-max), calc(100% - var(--page-gutter) * 2));
    min-height: calc(100vh - var(--header-height));
    margin: 0 auto;
    padding: 40px 0 120px;
}

/* ── 좌측 목록 ────────────────────────────────────────────
   짙은 네이비(--nav-bg)로 늘 다크였습니다. 라이트 테마에서 목록만 검게 남아 세 탭이
   따로 노는 큰 이유였으므로, 본문과 같은 바탕에 오른쪽 선 하나로 갈라 둡니다. */
.navigation {
    position: sticky;
    z-index: 1;
    top: var(--header-height);
    width: auto;
    max-height: calc(100dvh - var(--header-height) - 24px);
    padding: 12px 12px 24px 0;
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: var(--line-strong) transparent;
    color: var(--ink-2);
    background: var(--bg);
}

.navigation-search {
    position: sticky;
    z-index: 2;
    top: 0;
    padding: 16px;
    background: linear-gradient(var(--bg) 75%, transparent);
}
.navigation-search input {
    width: 100%;
    height: 40px;
    padding: 0 38px 0 38px;
    border: 1px solid var(--line);
    border-radius: 9px;
    color: var(--ink);
    background: var(--surface);
    font: inherit;
    font-size: 13.5px;
    box-shadow: none;
}
.navigation-search input::placeholder { color: var(--faint); }
.navigation-search input:focus { border-color: var(--line-strong); outline: 3px solid var(--focus-ring); }
.navigation-search-icon {
    position: absolute;
    z-index: 1;
    left: 30px;
    top: 29px;
    width: 13px;
    height: 13px;
    border: 2px solid var(--faint);
    border-radius: 50%;
    pointer-events: none;
}
.navigation-search-icon::after {
    content: "";
    position: absolute;
    width: 6px;
    height: 2px;
    right: -5px;
    bottom: -3px;
    background: var(--faint);
    transform: rotate(45deg);
}
.navigation-search-clear {
    position: absolute;
    top: 23px;
    right: 23px;
    width: 27px;
    height: 27px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    color: var(--faint);
    background: transparent;
    font-size: 20px;
    line-height: 25px;
    cursor: pointer;
}
.navigation-search-clear:hover { color: var(--ink); background: var(--hover-soft); }

.navigation-list { padding: 0 10px 28px; }
.navigation-global { margin-bottom: 8px; border-bottom: 1px solid var(--line); }
/* 좌측 목록의 글자 단계를 home·예제 목록과 같게 둡니다.
   카테고리 16px/500 → 문서 항목 15px/400 → 항목 안 멤버 13px 순으로 내려갑니다.
   앞서는 카테고리가 15px/700로 항목(16px)보다 작으면서 굵어, 크기와 굵기가
   서로 반대를 가리키고 있었습니다. */
.navigation-global a {
    display: flex;
    align-items: center;
    padding: 10px 12px 14px;
    color: var(--ink-2);
    font-size: 16px;
    font-weight: 500;
    letter-spacing: -.01em;
    text-decoration: none;
}
.navigation-global a:hover { color: var(--ink); }
.navigation-global .navigation-badge { margin-left: auto; }

.navigation-group-shell { margin: 3px 0; }
details > summary { list-style: none; }
details > summary::-webkit-details-marker { display: none; }
.navigation-group-summary {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 42px;
    padding: 8px 9px 8px 30px;
    border-radius: 8px;
    color: var(--ink-2);
    cursor: pointer;
    font-size: 16px;
    font-weight: 500;
    letter-spacing: -.01em;
    user-select: none;
}
.navigation-group-summary:hover { color: var(--ink); background: var(--hover-soft); }
.navigation-group-summary::before,
.navigation-symbol-summary::before {
    content: "";
    position: absolute;
    border: solid currentColor;
    border-width: 0 1.5px 1.5px 0;
    transform: rotate(-45deg);
    transition: transform .15s ease;
}
.navigation-group-summary::before { left: 13px; width: 7px; height: 7px; }
.navigation-group[open] > .navigation-group-summary::before,
.navigation-symbol[open] > .navigation-symbol-summary::before { transform: rotate(45deg); }
.navigation-group-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* 카테고리에 든 항목 수입니다. 바탕 없는 숫자로 두었더니 순번처럼도 읽혔습니다.
   home 좌측 목록과 같이, 왼쪽 끝을 뾰족하게 깎은 꼬리표에 담아 물건에 붙인 수량표처럼
   보이게 합니다. 깎인 자리에서는 테두리가 잘려 나가므로 윤곽은 면 색으로만 냅니다. */
.navigation-badge {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    min-width: 38px;
    margin-left: auto;
    /* 왼쪽은 뾰족한 꼭지(11px)와 끈 구멍이 차지하므로 글자를 그만큼 안쪽으로 밉니다. */
    padding: 4px 10px 4px 23px;
    color: var(--ink-2);
    background: var(--badge-bg);
    border: 0;
    border-radius: 0 999px 999px 0;
    /* 왼쪽 가운데를 집어 넣은 꼬리표 모양입니다. 오른쪽 둥근 끝은 border-radius가 맡습니다. */
    clip-path: polygon(11px 0, 100% 0, 100% 100%, 11px 100%, 0 50%);
    font-family: var(--mono);
    font-size: 11px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    /* 고정폭 서체의 아래쪽 여백을 없애 상하 여백을 같게 둡니다. */
    line-height: 1;
    text-align: center;
}

/* 꼬리표를 매다는 끈 구멍입니다. 뒤에 깔린 면과 같은 색으로 두어 실제로 뚫린 것처럼
   보이게 합니다. 구멍 하나로 이 표시가 물건에 매단 이름표라는 것이 단번에 읽혀,
   단위를 적지 않아도 수량으로 통합니다. */
.navigation-badge::before {
    content: '';
    position: absolute;
    left: 14px;
    width: 4px;
    height: 4px;
    background: var(--bg);
    border-radius: 50%;
}
/* 카테고리 줄에 손을 올리면 뒤 면 색이 바뀌므로 구멍 색도 함께 바꿉니다.
   home에는 이 hover 면이 없어 필요 없던 처리입니다. */
.navigation-group-summary:hover .navigation-badge::before { background: var(--hover-soft); }

/* 검색으로 좁혀진 카테고리입니다. 채운 색은 목록 안에서 지나치게 튀므로
   연한 초록 면에 진한 초록 글자로 두어 강조와 차분함을 함께 잡습니다. */
.navigation-badge.is-filtered {
    color: var(--badge-hit-ink);
    background: var(--badge-hit);
}
.navigation-group-items { margin: 2px 0 9px 12px; padding-left: 8px; border-left: 1px solid var(--line); }
.navigation-item { margin: 1px 0; }
.navigation-symbol-summary,
.navigation-symbol-link {
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 34px;
    padding: 6px 8px;
    border-radius: 7px;
    color: var(--muted);
    /* home 목록 항목과 같은 15px입니다. 앞서는 몸통에서 흘러온 16px이라
       위 카테고리와 크기가 같아 두 단계가 한 줄로 읽혔습니다. */
    font-size: var(--fs-sm);
}
.navigation-symbol-summary { padding-left: 23px; cursor: pointer; }
.navigation-symbol-summary::before { left: 9px; width: 5px; height: 5px; }
.navigation-symbol-summary:hover, .navigation-symbol-link:hover { background: var(--hover-soft); }
.navigation-kind {
    flex: 0 0 20px;
    height: 20px;
    border: 1px solid var(--line);
    border-radius: 5px;
    color: var(--faint);
    font-family: var(--mono);
    font-size: 10px;
    font-weight: 700;
    line-height: 18px;
    text-align: center;
}
.navigation-primary-link { min-width: 0; }
.navigation-primary-link a {
    display: block;
    overflow: hidden;
    color: var(--muted);
    text-decoration: none;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.navigation-primary-link a:hover { color: var(--ink); }
/* 지금 보고 있는 문서입니다. home은 굵기와 색으로만 알립니다. */
.navigation-item.current-item .navigation-primary-link a { color: var(--ink); font-weight: 700; }
/* 지금 보고 있는 항목입니다. 글자만 진하게 하면 목록 안에서 눈에 띄지 않아 왼쪽에 선을 세웁니다. */
.navigation-item.current-item > .navigation-symbol-link,
.navigation-item.current-item > .navigation-symbol > .navigation-symbol-summary {
    color: var(--ink);
    background: var(--hover-soft);
    box-shadow: inset 3px 0 0 var(--accent);
}
.navigation-symbol-details { padding: 3px 8px 8px 31px; }
/* 구획 이름(MEMBERS / METHODS / TYPE DEFINITIONS)입니다. 멤버 링크(12px --faint)보다
   오히려 작고 색도 비슷해 목록의 한 항목처럼 읽혔습니다. 위에 선을 긋고 색을 더 빼서
   이름표로 물러나게 하고, 대신 링크 쪽을 한 단계 진하게 올려 둘을 뒤집습니다. */
.navigation-member-list { margin: 10px 0 7px; }
.navigation-member-list:first-child { margin-top: 2px; }
.navigation-member-list h3 {
    margin: 0 0 5px;
    padding-top: 9px;
    border-top: 1px solid var(--line);
    color: var(--faint);
    /* 목록에서 고정폭 서체는 개수 꼬리표에만 씁니다(home·예제 목록과 같습니다).
       이름표 역할은 크기와 자간, 대문자로 충분히 드러납니다. */
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
}
.navigation-member-list:first-child h3 { padding-top: 0; border-top: 0; }
/* 항목 안의 멤버 목록입니다. home에서 문서 안 소제목을 접어 넣는 목차(.doc-toc)와
   같은 자리이므로 같은 13px / --faint로 둡니다. */
.navigation-member-list li { padding: 2px 0; font-size: 13px; }
.navigation-member-list a { display: block; color: var(--faint); text-decoration: none; }
.navigation-member-list a:hover { color: var(--ink-2); }
/* 지금 읽고 있는 항목입니다. 글자만 진하게 하면 목록 안에서 눈에 띄지 않아 왼쪽에 선을 세웁니다.
   home의 좌측 목차와 같은 표시입니다. */
.navigation-member-list a.is-current {
    margin-left: -10px;
    padding-left: 8px;
    color: var(--ink);
    border-left: 2px solid var(--accent);
    font-weight: 600;
}
/* 검색어에 걸린 항목입니다. 노란 글자였는데 밝은 바탕에서 거의 안 보였습니다.
   포인트 색으로 바꾸고 굵기를 올려 눈에 걸리게 합니다. */
.navigation.is-searching .navigation-item.is-match > .navigation-symbol-link,
.navigation.is-searching .navigation-item.is-match > .navigation-symbol > .navigation-symbol-summary { color: var(--ink); }
.navigation.is-searching .navigation-item.is-match .navigation-primary-link a { color: var(--accent-2); font-weight: 600; }
.navigation.is-searching .navigation-member-list li.is-match a { color: var(--accent-2); font-weight: 600; }

/* 좁은 화면에서 목록을 덮어 열 때 뒤를 가리는 막입니다.
   테마와 무관하게 늘 어두워야 목록이 떠 보이므로 토큰을 쓰지 않습니다. */
.navigation-backdrop { position: fixed; z-index: 850; inset: var(--header-height) 0 0; background: rgba(11, 11, 13, .48); backdrop-filter: blur(2px); }

/* ── 본문 ──────────────────────────────────────────────────
   폭 제한이 없어 1119px까지 벌어져 한 줄에 한글 78자가 들어갔습니다.
   home과 같은 --page-max 안으로 묶어 세 탭의 글줄 길이를 맞춥니다. */
.main {
    min-width: 0;
    max-width: none;
    margin-left: 0;
    padding: 0;
    background: var(--bg);
}
.main .page-title { display: none; }
.main h1, .main h2, .main h3, .main h4, .main h5 { color: var(--ink); line-height: var(--lh-tight); letter-spacing: -.02em; }
.main h1 { margin: 0 0 18px; font-size: var(--fs-2xl); font-weight: 750; }
.main h2 { margin: 30px 0 14px; font-size: var(--fs-xl); font-weight: 720; }
/* 문서 맨 위에 오는 제목입니다. 위 여백이 그대로 남아 본문이 좌측 목록보다 내려앉아
   시작했습니다. 클래스 문서는 제목 여백 30px만큼(U3dApp.html), 구획 제목으로 시작하는
   문서는 절 경계 여백 72px만큼(global.html) 밀렸습니다.
   home은 문서 제목이 열 맨 위에서 시작하므로 같게 맞춥니다. */
.main section:first-of-type > header:first-child > h2:first-child { margin-top: 0; }
/* global.html처럼 제목도 설명도 없이 구획 목록으로 바로 시작하는 문서입니다.
   절 경계 여백 72px이 맨 위에 그대로 남아 본문이 72px 내려앉아 시작했습니다. */
.main section:first-of-type:not(:has(> header)) > article > .subsection-title:first-of-type { margin-top: 0; }

/* 클래스가 아닌 문서에는 개요 자리(생성자가 들어가는 곳)가 빈 채로 남습니다. 높이는
   0이지만 내용이 없는 블록이라 뒤따르는 여백이 위로 새어 나와, 본문이 다시 17px
   내려앉아 시작했습니다. 보여 줄 항목이 없으면 자리 자체를 걷어냅니다. */
.main .container-overview:not(:has(dt)) { display: none; }
.main h3 { margin: 22px 0 10px; font-size: var(--fs-lg); font-weight: 700; }
.main h4 { font-size: var(--fs-md); font-weight: 700; }
.main h5 { font-size: var(--fs-md); font-weight: 700; }
.main { font-size: var(--fs-md); }
.main p, .main dd, .main .props { color: var(--ink-2); }
.main .description, .main .description p { margin-top: 10px; font-size: var(--fs-md); line-height: var(--lh-body); }
/* 구획 전환(Members / Methods / Events)입니다. 항목 361개 사이에서 구획이 바뀌는 지점이
   글자색만으로는 눈에 걸리지 않았습니다. 앞에 포인트 색 막대를 두어 항목 제목과 갈라냅니다. */
.main .subsection-title {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: var(--gap-section);
    color: var(--ink);
    font-size: var(--fs-lg);
}
.main .subsection-title::before {
    content: '';
    flex: 0 0 auto;
    width: 18px;
    height: 2px;
    background: var(--accent);
}

/* 글줄이 흐르는 요소만 읽기 좋은 폭으로 묶습니다. 표와 코드 블록은 내용이 잘리면 안 되므로
   열 폭을 그대로 쓰게 둡니다. 마지막 줄에 두세 글자만 떨어지는 줄바꿈은 text-wrap이 맡습니다. */
.main :is(p, dd, dt, li, .description) {
    max-width: var(--measure);
    text-wrap: pretty;
}

/* 다만 항목의 이름 바(dt)와 내용 면(dd)은 글줄이 아니라 그릇입니다. 그릇에 열 폭을 걸면
   면 자체가 1020px로 좁아져, 같은 열의 구획 제목·표와 오른쪽 끝이 24px 어긋났습니다
   (구획 제목 1044px / 항목 면 1020px). 게다가 면 안의 글줄은 이미 면 안쪽 폭에 갇혀 있어
   이 제한을 받지도 않으므로, 열 폭을 좁히는 효과 없이 어긋남만 남습니다.
   제한을 풀어 면은 열을 꽉 채우고, 글줄 폭은 면 안쪽(열 폭 - 좌우 20px)이 맡게 합니다.
   home에서 .explane1이 블록을 품으면 열 폭 제한을 푸는 것과 같은 처리입니다. */
.main :is(dl:not(.details), .container-overview) > :is(dt, dd) { max-width: none; }
/* API 항목 하나는 dt(이름)와 dd(내용) 두 형제로 나뉘고, 둘을 감쌀 요소가 없습니다.
   선으로만 묶어도, 둘을 같은 면에 올려도 이름 줄과 내용이 한눈에 갈리지 않았습니다.
   같은 면 위에서는 가는 선 하나가 유일한 신호라 약하고, 머리에 색 띠를 두면 361번 반복돼
   어수선했습니다.

   그래서 이름과 내용을 각각 제 면에 올리고 톤도 나눕니다. 이름 바는 페이지 바탕과도,
   내용 면과도 다른 색이라 배경에 묻히지 않고 머리로 읽힙니다.
   이름과 내용 사이는 6px, 항목과 항목 사이는 44px로 일곱 배 차이를 두어, 떨어져 있어도
   이름과 바로 아래 면이 한 묶음으로 읽히게 합니다. */
.main :is(dl:not(.details), .container-overview) > dt {
    margin: var(--gap-entry) 0 6px;
    padding: 14px 20px;
    background: var(--entry-head);
    border-radius: var(--radius);
}

.main :is(dl:not(.details), .container-overview) > dd {
    margin-left: 0;
    padding: 18px 20px 20px;
    background: var(--entry-surface);
    border-radius: var(--radius);
}

/* 설명도 매개변수도 반환값도 없는 항목이 있습니다. 그런 항목의 dd에는 빈 dl.details만
   남아, 높이 38px짜리 빈 면이 이름 바 아래에 덩그러니 그려졌습니다.
   dl.details는 4157개 중 364개에 내용이 있으므로 통째로 지울 수 없어, 보여 줄 것이
   하나도 없을 때만 면을 걷어냅니다. */
.main :is(dl:not(.details), .container-overview) > dd:not(:has(:is(.description, table, h5, p, ul, ol, pre, img, figure))):not(:has(dl.details dt)) {
    display: none;
}

/* 마지막 요소의 아래 여백이 면의 아래 여백과 겹쳐 두 배로 벌어집니다. */
.main :is(dl:not(.details), .container-overview) > dd > :last-child { margin-bottom: 0; }

/* 항목 면 위의 코드 블록입니다. --code-surface는 다크에서 --entry-surface와 같은 값이라
   그대로 두면 면 위에서 사라집니다. 항목 안에서는 페이지 바탕 톤으로 눌러 면에 박힌
   자리로 보이게 합니다. 라이트에서도 흰 면 위에서 한 단계 눌립니다. */
.main :is(dl:not(.details), .container-overview) > dd pre { background: var(--bg); }

/* 이름 줄입니다. 오른쪽에 있던 출처를 걷어냈으므로 이름이 열 폭을 모두 씁니다
   (800px → 1044px). position은 아래 .anchor가 기준으로 삼습니다. */
.main .nameContainer {
    position: relative;
    margin-top: 0;
    padding: 0;
}

/* 이름이 먼저 읽혀야 합니다. 이름과 같은 굵기로 붙어 있어 어디까지가 이름인지 흐렸습니다.
   괄호 안 매개변수는 글이 아니라 코드이므로 코드 서체로 눌러 둡니다. */
.main .nameContainer h4 .signature {
    color: var(--muted);
    font-weight: 500;
}

/* 항목 안의 작은 구획 이름(Returns:, Fires:, Throws: 등)입니다. 본문과 같은 17px 굵은
   글씨라 항목 이름만큼 눈에 들어왔습니다. 표 머리와 같은 작은 라벨로 눌러
   '항목 이름 > 항목 안 구획 > 표' 세 단계가 크기로 드러나게 합니다. */
.main dl:not(.details) > dd > h5 {
    margin: var(--gap-block) 0 var(--gap-line);
    color: var(--muted);
    font-family: var(--mono);
    font-size: var(--fs-xs);
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
}
/* 아래 여백 8px은 이름 줄이 내용과 한 덩어리였을 때 둘을 띄우던 값입니다. 이름 바가
   따로 떨어져 나온 지금은 바의 위아래 여백(14px)만 있으면 되는데, 이 8px이 남아
   글자가 바의 가운데보다 4px 위로 붙어 있었습니다(위 14px / 아래 22px). */
.main .nameContainer h4 { margin: 0; font-size: var(--fs-md); }
.main .nameContainer h4 .signature { color: var(--muted); font-family: var(--mono); font-size: var(--fs-code); font-weight: 500; }

/* 반환형입니다. {U3dMultipleComponentLayer|false}처럼 JSDoc 원본 문법이 그대로 드러났고,
   본문 서체에 이름과 같은 굵기 700이라 이름만큼 눈에 들어왔습니다. 게다가 링크만 포인트 색이라
   한 덩어리가 두 색으로 갈려 보였습니다. 코드이므로 코드 서체로, 이름에 딸린 주석이므로
   한 가지 색으로 눌러 둡니다. 링크라는 것은 손을 올렸을 때 알립니다.
   자세한 설명은 바로 아래 RETURNS 표에 있습니다. */
.main h4.name .returnType {
    color: var(--muted);
    font-family: var(--mono);
    font-size: var(--fs-code);
    font-weight: 500;
}
.main h4.name .returnType a { color: inherit; text-decoration: none; }
.main h4.name .returnType a:hover,
.main h4.name .returnType a:focus { color: var(--accent-2); text-decoration: underline; }
.main h4.name .returns-or { margin: 0 5px; color: var(--faint); }
.nameContainer .anchor { position: absolute; top: calc(-1 * var(--header-height) - 16px); }
/* 링크로 찾아온 항목 표시입니다. 노란 바탕이었는데 이 팔레트와 맞지 않아,
   면 색으로 눌러 두고 아래에 포인트 색 선을 그어 알립니다. */
.nameContainer .anchor:target + h4 {
    padding: 4px 8px;
    margin-left: -8px;
    border-radius: 6px;
    background: var(--hover-soft);
    box-shadow: inset 0 -2px 0 var(--accent);
}
.main h4.name span.returnType, .main h4.name span.type { margin-left: 4px; color: var(--muted) !important; background: transparent !important; }

/* 반환형 앞에 두는 화살표입니다. Bootstrap의 glyphicon 아이콘 폰트를 쓰고 있었는데,
   전체 문서에서 쓰는 아이콘이 이것 하나뿐이라 CSS로 직접 그립니다.
   그래서 bootstrap.min.css 99KB와 glyphicons 폰트 4개를 걷어낼 수 있었습니다. */
.main h4.name .returns-arrow {
    display: inline-block;
    width: 6px;
    height: 6px;
    margin: 0 8px 1px 7px;
    border-right: 1.6px solid currentColor;
    border-bottom: 1.6px solid currentColor;
    color: var(--faint);
    transform: rotate(-45deg);
    vertical-align: middle;
}

/* 상태 배지입니다. 청록·빨강·노랑·파랑·초록 다섯 색이 따로 놀았습니다.
   뜻이 없는 것은 중립 알약으로 두고, 경고성만 색을 남깁니다. */
.main span.static, .main span.stability, .main .nameContainer .inherited {
    display: inline-block;
    margin-right: 4px;
    padding: 2px 6px;
    border-radius: 5px;
    color: var(--muted);
    background: var(--hover-soft) !important;
    border: 1px solid var(--line);
    font-family: var(--mono);
    font-size: var(--fs-xs);
    vertical-align: top;
}
.main .nameContainer .inherited { color: var(--muted); background: var(--hover-soft) !important; }
.main .nameContainer .inherited a { color: var(--ink-2); }
.main span.stability.deprecated { color: var(--danger); background: none !important; border-color: currentColor; }
.main span.stability.experimental { color: var(--warn); background: none !important; border-color: currentColor; }
.main span.stability.unstable { color: var(--accent-2); background: none !important; border-color: currentColor; }
.main span.stability.locked { color: var(--accent); background: none !important; border-color: currentColor; }
.main .important, .main dt.tag-todo {
    display: inline-block;
    padding: 2px 6px;
    border-radius: 5px;
    color: var(--danger);
    background: none;
    border: 1px solid currentColor;
    font-family: var(--mono);
    font-size: var(--fs-xs);
}
.main .type-signature, .main .tag-deprecated { font-size: var(--fs-xs); }

.main table { width: 100%; margin: 12px 0 22px; border-collapse: collapse; }
/* 표 머리(Name / Type / Description)가 항목마다 반복됩니다. 본문과 같은 무게로 두면
   설명문보다 먼저 눈에 들어오므로, 작은 라벨로 눌러 표를 보조 블록으로 물러나게 합니다. */
.main table th {
    padding: 8px 10px;
    color: var(--muted);
    border-bottom: 1px solid var(--line);
    font-family: var(--mono);
    font-size: var(--fs-xs);
    font-weight: 600;
    letter-spacing: .08em;
    text-align: left;
    text-transform: uppercase;
}
.main table td { padding: 9px 10px; border-bottom: 1px solid var(--line); vertical-align: top; }
.main table .name { width: 130px; }
.main table .type, .main table .attributes { color: var(--muted); font-family: var(--mono); font-size: var(--fs-code); }
.main table .attributes { font-size: var(--fs-xs); }
.main table .attributes { width: 90px; }
.main table .description, .main table .description p { margin: 0; max-width: none; font-size: var(--fs-md); line-height: var(--lh-body); }
.main table .optional, .main table .repeatable { float: left; margin-right: 5px; padding: 2px 5px; border-radius: 4px; color: var(--muted); background: var(--hover-soft) !important; font-family: var(--mono); font-size: var(--fs-xs); }

/* 코드 블록입니다. google-code-prettify가 자기 테마(prettify-tomorrow.css)로 색을 입히고
   있어 이 팔레트와 맞지 않았고, 저장소에 하이라이터가 셋(예제 Monaco / home Prism /
   여기 prettify) 있었습니다. home과 같은 Prism으로 모으고 색은 토큰으로 정의합니다. */
.main pre {
    overflow: auto;
    padding: 16px 18px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--code-surface);
    color: var(--code-plain);
    font-family: var(--mono);
    font-size: var(--fs-code);
    line-height: var(--lh-code);
    tab-size: 4;
    hyphens: none;
}
.main :is(.token.comment, .token.prolog, .token.doctype, .token.cdata) {
    color: var(--code-comment);
    font-style: italic;
}
.main :is(.token.punctuation, .token.operator, .token.entity, .token.url) { color: var(--code-punct); }
.main :is(.token.keyword, .token.boolean, .token.atrule, .token.selector, .token.important, .token.builtin) { color: var(--code-keyword); }
.main :is(.token.string, .token.char, .token.attr-value, .token.regex, .token.template-string) { color: var(--code-string); }
.main :is(.token.number, .token.constant, .token.symbol) { color: var(--code-number); }
.main :is(.token.function, .token.function-name) { color: var(--code-function); }
.main :is(.token.class-name, .token.property, .token.tag, .token.attr-name) { color: var(--code-class); }
.main .token.italic { font-style: italic; }
.main .token.bold { font-weight: 700; }
/* 코드 안의 .important는 Prism 토큰이므로, 위 '중요' 배지 규칙에 걸리지 않게 되돌립니다. */
.main pre .token.important { display: inline; padding: 0; border: 0; border-radius: 0; background: none; font-family: inherit; font-size: inherit; }
/* 본문 속 짧은 코드입니다. 자홍색 글자였는데, 링크와 구분이 어렵고 팔레트에도 없는 색이라
   home의 인라인 코드와 같은 모양으로 맞춥니다. */
.main code {
    padding: 1px 5px;
    border-radius: 5px;
    color: var(--ink);
    background: var(--hover-soft);
    font-family: var(--mono);
    font-size: .875em;
}
.main pre code { padding: 0; background: none; font-size: inherit; }
.main article ol, .main article ul { margin-left: 25px; }
.main article ol > li { list-style: decimal; margin-bottom: 5px; }
.main article ul > li { list-style: disc; margin-bottom: 5px; }
/* ── index.html의 README ──────────────────────────────────
   클래스 문서는 필요한 항목만 훑는 화면이지만 이 화면은 처음부터 끝까지 읽는 글입니다.
   목록 항목이 95개(2단 중첩 15개)라 항목 사이 간격과 단계 구분이 특히 중요합니다.
   그래서 리듬을 본문 규칙과 따로 둡니다. */
.main .readme :is(p, li) { line-height: var(--lh-body); }
.main .readme p { margin: 0 0 var(--gap-block); }

/* 절 경계입니다. 위 여백 30px가 문단 사이 17px과 큰 차이가 없어 절이 바뀌는 것이
   드러나지 않았습니다. home의 절 경계와 같은 간격으로 벌립니다. */
.main .readme h2 {
    margin: var(--gap-section) 0 var(--gap-block);
    padding-bottom: 10px;
    border-bottom: 1px solid var(--line);
}
.main .readme h3 { margin: var(--gap-group) 0 var(--gap-line); }

/* 목록 항목 사이가 5px이었습니다. 행간이 30px인 두 줄짜리 항목에서는 같은 항목의
   둘째 줄과 다음 항목이 구별되지 않습니다. */
.main .readme :is(ul, ol) { margin: 0 0 var(--gap-block) 22px; }
.main .readme li { margin-bottom: var(--gap-line); }
.main .readme li > :is(ul, ol) { margin: var(--gap-line) 0 2px 20px; }
/* 두 단계 모두 disc라 목록의 깊이가 보이지 않았습니다. */
.main .readme ul ul > li { list-style: circle; }

.main .readme pre { margin: var(--gap-block) 0 var(--gap-group); }
.main .readme :is(p, li) { text-wrap: pretty; }

/* 앵커로 찾아왔을 때 머리말에 가리지 않도록 띄우는 값은 html의 scroll-padding-top이
   이미 맡고 있습니다. 여기에 scroll-margin-top을 또 두면 두 값이 더해져 145px 아래에
   멈추고, 좌측 목록의 위치 판정도 그만큼 어긋납니다. */

@media (max-width: 1180px) {
    #wrap {
        display: block;
        width: min(var(--page-max), calc(100% - var(--page-gutter) * 2));
    }

    .navigation-toggle { display: flex; flex: 0 0 auto; }
    .api-links { overflow-x: auto; }

    /* API 목록은 항목 수가 많으므로 index.css처럼 본문 폭은 넓히되,
       목록 자체는 기존 Jaguar의 오버레이 방식을 유지합니다. */
    .navigation {
        position: fixed;
        z-index: 900;
        top: var(--header-height);
        bottom: 0;
        left: 0;
        width: var(--rail-width);
        max-height: none;
        padding: 0;
        overflow: auto;
        border-right: 1px solid var(--line);
        transform: translateX(-102%);
        transition: transform .22s ease;
        box-shadow: var(--shadow);
    }
    .navigation-open { overflow: hidden; }
    .navigation-open .navigation { transform: translateX(0); }
    .main { max-width: none; margin-left: 0; padding: 0; }
}

/* 머리말이 접히는 폭을 home·예제 목록과 같게 둡니다. 앞서는 API만 1100px에서 글자를
   12px로 줄이고 640px에서야 탭을 접어, 800px에서 home은 활성 탭 하나만 보이는데 API는
   네 탭이 모두 보이고 그중 셋이 더보기 안에도 함께 들어 있었습니다. */
@media (max-width: 860px) {
    .api-header { padding: 0 16px; }
    #wrap { width: calc(100% - 32px); padding: 28px 0 88px; }
    /* 활성 탭만 남기고 나머지는 더보기 안에서 보여 줍니다. */
    .api-links > a:not(.active) { display: none; }
    .mobile-nav-link { display: block; }
}

@media (max-width: 640px) {
    :root { --rail-width: min(88vw, 320px); }
    .main { padding: 0; }
    .main table { display: block; overflow-x: auto; }
}

/* 로고 옆 이름을 감추는 폭도 home과 같게 둡니다. */
@media (max-width: 560px) {
    .api-brand span { display: none; }
}

@media print {
    body { padding: 0; background: white; }
    .api-header, .navigation, .navigation-backdrop { display: none !important; }
    .main { max-width: none; margin: 0; padding: 0; }
}