/* /docs/* — the API reference.
 *
 * No new design here. The values come from the method reference on /why (why.css's
 * .m-cat / .d-code / .p-table). Documentation in a different register from the rest
 * of the site does not read as the same company's work.
 *
 * NOTE: why.css also defines `.docs-code`, scoped to /why. To keep the two from
 * colliding, code blocks here use the site-wide `.d-code` instead. */

.docs-shell {
  /* why.css's .why-shell is min(1280px, 94vw). Documentation tables are wide enough
     that a column clips easily, so this one reaches further on each side — a
     deliberate difference, not a drift. Widened by another 5px per side on
     2026-09-01: the model comparison table was still clipping its first column. */
  /* Three columns: contents, body, and the right-hand "On this page". The width grows
     with the third column — without that, the body gives back the space it just
     gained to the two lists. */
  width: min(1490px, calc(95vw + 10px));
  margin: 0 auto;
  display: grid;
  grid-template-columns: 244px minmax(0, 1fr) 212px;
  gap: 0;
  align-items: start;
  padding: 0 0 20px;
}
@media (max-width: 1180px) { .docs-shell { grid-template-columns: 244px minmax(0, 1fr); } }
@media (max-width: 900px) { .docs-shell { grid-template-columns: 1fr; } }

/* ============ left-hand contents ============ */
.docs-side {
  position: sticky;
  top: 70px;
  max-height: calc(125vh - 143px);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 30px 26px 60px 2px;
  border-right: 1px solid var(--border);
  scrollbar-width: thin;
  scrollbar-color: transparent transparent;
}
.docs-side:hover { scrollbar-color: var(--border-2) transparent; }
.docs-side::-webkit-scrollbar { width: 11px; }
.docs-side::-webkit-scrollbar-thumb { background: transparent; border-radius: 8px; border: 4px solid transparent; background-clip: content-box; }
.docs-side:hover::-webkit-scrollbar-thumb { background: var(--border-2); background-clip: content-box; }
@media (max-width: 900px) { .docs-side { position: static; max-height: none; border-right: none; border-bottom: 1px solid var(--border); padding: 12px 0; } }

.docs-side-home {
  display: block;
  font-family: "Newsreader", "Noto Serif KR", serif;
  font-size: 20px;
  color: var(--text);
  text-decoration: none;
  margin: 0 0 4px;
}
.docs-side-top {
  display: block;
  font-size: 13.5px;
  color: var(--text-2);
  text-decoration: none;
  margin: 0 0 6px;
}
.docs-side-top:hover { color: var(--accent-strong); }
.docs-side-h {
  margin: 30px 0 6px;
  padding: 0 0 8px 12px;
  border-bottom: 1px solid var(--border);
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 600;
}
.docs-side nav > p.docs-side-h:first-of-type { margin-top: 22px; }
.docs-side ul { list-style: none; margin: 0; padding: 0; }
.docs-side li { margin: 0; }
.docs-side li a {
  display: block;
  padding: 8px 12px 8px 20px;
  border-radius: 8px;
  color: var(--text-2);
  text-decoration: none;
  font-size: 14px;
  line-height: 1.45;
  transition: background .14s, color .14s;
}
.docs-side li a:hover { color: var(--text); background: #00000005; }
.docs-side li a.on { color: var(--accent-strong); background: var(--accent-soft); font-weight: 500; }

/* ============ body ============ */
/* Same call as /why: the body is not given a narrower measure of its own. These
   pages are mostly tables and code, and constraining them makes the code scroll
   sideways while a blank band sits to its right. */
.docs-main { padding: 30px clamp(8px, 3vw, 56px) 100px 46px; min-width: 0; }
@media (max-width: 900px) { .docs-main { padding-left: 0; padding-top: 24px; } }

.docs-crumbs { font-size: 12.5px; color: var(--muted); margin: 0 0 16px; }
.docs-crumbs a { color: var(--muted); text-decoration: none; }
.docs-crumbs a:hover { color: var(--accent-strong); }
.docs-crumbs span { margin: 0 7px; opacity: .5; }

/* same values as /why's .why-kicker */
.docs-kicker {
  font-size: 12.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 600;
  margin: 0 0 14px;
  display: inline-flex;
  align-items: center;
  gap: 9px;
}
.docs-kicker::before { content: ""; width: 22px; height: 1px; background: var(--accent); opacity: .6; }

.docs-main h1 {
  font-size: clamp(30px, 3.4vw, 42px);
  line-height: 1.08;
  letter-spacing: -0.02em;
  font-weight: 400;
  margin: 0 0 16px;
  max-width: 22ch;
  text-wrap: balance;
}
.docs-main p { color: var(--text-2); font-size: 16px; line-height: 1.7; margin: 0 0 16px; }
.docs-main a { color: var(--accent-strong); }
/* No max-width on the lead. `.docs-main p` has no cap and runs to the table width,
   so a cap here would end the lead noticeably short of everything under it. Without
   one, paragraphs, tables and rules all end on the same right edge. */
.docs-lead { font-size: clamp(17px, 1.5vw, 19px); line-height: 1.55; margin-bottom: 34px; }
.docs-note { font-size: 14px; color: var(--muted); }
.docs-main p b { color: var(--text); font-weight: 600; }

/* inline code — same values as /why's .why-pane code */
.docs-main code {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 13.5px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 5px;
  padding: 1px 5px;
  color: var(--text);
}

/* Method + path. A single underline rather than a filled box — the site's register
   is the restrained one. */
.docs-endpoint {
  display: flex;
  align-items: center;
  gap: 11px;
  margin: 0 0 22px !important;
  padding: 0 0 14px;
  border-bottom: 1px solid var(--border);
}
.docs-endpoint code {
  background: none;
  border: 0;
  padding: 0;
  font-size: 16px;
  color: var(--text);
  letter-spacing: -0.01em;
}
.verb {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .08em;
  padding: 3px 7px;
  border-radius: 5px;
  color: #fff;
  background: var(--muted);
  flex: none;
}
.verb-post { background: var(--accent); }
.verb-get { background: #4B7B5A; }
.verb-delete { background: #A2564B; }

/* section heading — same values as /why's .m-cat */
.docs-cat {
  font-family: "Newsreader", "Noto Serif KR", serif;
  font-size: 26px;
  font-weight: 500;
  margin: 46px 0 10px;
  padding-top: 26px;
  border-top: 1px solid var(--border);
  letter-spacing: -0.01em;
}

/* ============ field list ============
 * A list, not a table. One OpenAPI description runs past 900 characters (store's
 * `image`), and in a table cell that becomes a ten-line wall inside a narrow column.
 * Name and type go on one line; the description runs as prose beneath them. */
.docs-fields { margin: 18px 0 8px; }
.docs-fields dt {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 10px;
  padding-top: 18px;
  border-top: 1px solid var(--border);
}
.docs-fields dt:first-of-type { padding-top: 12px; border-top: none; }
.docs-fields dt code {
  background: none;
  border: 0;
  padding: 0;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--text);
}
.docs-fields .ty {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 12px;
  color: var(--muted);
}
.docs-fields .ct {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 12px;
  color: var(--muted);
  opacity: .8;
}
/* .req is the site-wide marker, also in why.css (accent, 11px, 600) — same values */
.docs-fields .req {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--accent);
}
.docs-fields dd { margin: 6px 0 0; }
.docs-fields dd p { font-size: 15px; line-height: 1.7; margin: 0 0 9px; max-width: 74ch; }
.docs-fields dd p:last-child { margin-bottom: 0; }
.docs-fields.headers dd p { font-size: 14.5px; }
/* a field one level in is indented so it reads apart from its parent */
.docs-fields dt.child { padding-left: 18px; padding-top: 12px; border-top: 0; }
.docs-fields dt.child + dd { padding-left: 18px; }
.docs-fields dt.child code { font-weight: 500; color: var(--text-2); }

/* ============ tables (short cells only) — same values as why.css's .p-table ============ */
.p-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 13.5px;
  margin: 16px 0 2px; border: 1px solid var(--border); border-radius: 12px; overflow: hidden; }
.p-table th { text-align: left; font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--muted); font-weight: 600; background: #00000005; padding: 10px 16px;
  border-bottom: 1px solid var(--border); }
.p-table td { padding: 11px 16px; vertical-align: top; color: var(--text-2); line-height: 1.6; }
.p-table td:first-child { font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 12.5px;
  color: var(--text); white-space: nowrap; font-weight: 600; }
.p-table tbody tr:not(:last-child) td { border-bottom: 1px solid var(--border); }
.p-table tbody tr:hover td { background: #00000003; }
.p-table td.st-2 { color: #4B7B5A; }
.p-table td.st-4, .p-table td.st-5 { color: #A2564B; }

/* Start paragraphs and tables on the same vertical line.
   A bordered table pushes its first character in by the 1px border plus 16px of cell
   padding, while the paragraph above it is not pushed at all — 17px of visible
   misalignment. Dropping the box and zeroing the outer padding of the end cells
   leaves the table with horizontal rules only and its text on the paragraph's line.
   The last row keeps a bottom rule so the table still closes. */
.docs-main .p-table { border: none; border-radius: 0; }
.docs-main .p-table th:first-child,
.docs-main .p-table td:first-child { padding-left: 0; }
.docs-main .p-table th:last-child,
.docs-main .p-table td:last-child { padding-right: 0; }
.docs-main .p-table tbody tr:last-child td { border-bottom: 1px solid var(--border); }

/* ============ code blocks — same values as why.css's .d-code ============ */
.d-code { background: var(--code-bg); border-radius: 13px; padding: 18px 20px; overflow-x: auto; margin: 16px 0 18px; }
.d-code pre { margin: 0; font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 13px;
  line-height: 1.7; color: #d8d2c4; white-space: pre; }

/* ============ cards on the index page ============ */
.docs-group { margin: 0; }
.docs-cards { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 1px;
  background: var(--border); border: 1px solid var(--border); border-radius: 12px; overflow: hidden; }
.docs-cards li { margin: 0; }
.docs-cards a { display: block; padding: 14px 17px; background: var(--bg); text-decoration: none; color: var(--text); transition: background .14s; }
.docs-cards a:hover { background: var(--surface); }
.docs-cards .row { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.docs-cards .row .path { font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 12px; color: var(--muted); }
.docs-cards b { display: block; font-weight: 600; font-size: 15px; }
.docs-cards small { display: block; margin-top: 4px; color: var(--text-2); font-size: 13.5px; line-height: 1.6; max-width: 78ch; }

.docs-bullets { margin: 12px 0 16px; padding: 0; list-style: none; }
.docs-bullets li { position: relative; padding-left: 26px; color: var(--text-2); font-size: 15.5px;
  line-height: 1.7; margin: 0 0 8px; }
.docs-bullets li::before { content: ""; position: absolute; left: 6px; top: 10px; width: 6px; height: 6px;
  border-radius: 2px; background: var(--accent); opacity: .55; }
.docs-bullets li b { color: var(--text); font-weight: 600; }

.docs-related { list-style: none; margin: 16px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.docs-related a { display: inline-block; padding: 6px 13px; border: 1px solid var(--border);
  border-radius: 999px; font-size: 13.5px; text-decoration: none; color: var(--text-2); transition: border-color .14s, color .14s; }
.docs-related a:hover { border-color: var(--border-2); color: var(--text); }

.docs-callout { background: var(--surface); border: 1px solid var(--border); border-radius: 13px;
  padding: 18px 20px; margin: 24px 0; }
.docs-callout > p:last-child { margin-bottom: 0; }

/* ============ right-hand "On this page" ============ */
/* The left list (.docs-side) spans the whole reference; this one stays inside the
   current page. The vertical rule is made from each item's own left border rather
   than drawn separately, so the current-section mark cannot sit off the line. */
.docs-toc { position: sticky; top: 70px; align-self: start; padding: 30px 0 60px 26px; min-width: 0; }
.docs-toc-h { font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--muted); font-weight: 600; margin: 0 0 10px 14px; }
.docs-toc ul { list-style: none; margin: 0; padding: 0; }
.docs-toc li { margin: 0; }
.docs-toc a { display: block; padding: 6px 0 6px 14px; border-left: 2px solid var(--border);
  color: var(--muted); text-decoration: none; font-size: 13px; line-height: 1.45;
  transition: color .14s, border-color .14s; }
.docs-toc a:hover { color: var(--text); }
.docs-toc a.on { color: var(--accent-strong); border-left-color: var(--accent); }
@media (max-width: 1180px) { .docs-toc, .docs-toc-empty { display: none; } }

/* ============ code block header (language tag + copy) ============ */
/* The tag is server-rendered; the button is added by docs-page.js. It does the same
   job as why.css's .copy-btn, and lives here because documentation pages do not load
   why.css. */
.d-code-bar { display: flex; align-items: center; justify-content: space-between;
  gap: 12px; min-height: 26px; margin: -4px 0 12px; }
.d-code-lang { font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 11px;
  letter-spacing: .07em; text-transform: uppercase; color: #8c8571; }
.d-code-copy { margin-left: auto; width: 26px; height: 26px; flex: 0 0 auto; border-radius: 7px;
  border: 1px solid #ffffff1a; background: #ffffff0a; color: #b5ae9d; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background .15s, color .15s; }
.d-code-copy:hover { background: #ffffff14; color: #e8e2d4; }
.d-code-copy svg { width: 13px; height: 13px; }
.d-code-copy.ok { color: #8fc79f; }

/* ============ previous / next ============ */
.docs-pager { display: flex; justify-content: space-between; gap: 14px; margin-top: 52px;
  padding-top: 22px; border-top: 1px solid var(--border); }
.docs-pager a { display: block; padding: 12px 16px; border: 1px solid var(--border); border-radius: 11px;
  text-decoration: none; color: var(--text); font-size: 14.5px; max-width: 46%; transition: border-color .14s; }
.docs-pager a:hover { border-color: var(--border-2); }
.docs-pager a.next { text-align: right; margin-left: auto; }
.docs-pager small { display: block; font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--muted); margin-bottom: 3px; }

/* ============ model comparison table ============
 * Models are columns, so this can run wider than the screen. The table scrolls inside
 * itself rather than pushing the page sideways, and the first column (the capability
 * name) is pinned — without it, a column on the right says nothing about which row
 * you are reading. */
.docs-tablewrap {
  overflow-x: auto;
  margin: 16px 0 8px;
  /* 가로 스크롤바가 마지막 줄 위에 겹쳐 글자를 반쯤 가리고 있었다. 항상 보이도록
     설정된 macOS 에서 그렇게 된다. 바가 앉을 자리를 아래에 비운다. */
  padding-bottom: 12px;
  /* 사이드바(.docs-side)와 같은 방식: 평소엔 안 보이고 손이 가면 나타난다. */
  scrollbar-width: thin;
  scrollbar-color: transparent transparent;
}
.docs-tablewrap:hover { scrollbar-color: var(--border-2) transparent; }
.docs-tablewrap::-webkit-scrollbar { height: 11px; }
.docs-tablewrap::-webkit-scrollbar-thumb {
  background: transparent;
  border-radius: 8px;
  border: 4px solid transparent;
  background-clip: content-box;
}
.docs-tablewrap:hover::-webkit-scrollbar-thumb {
  background: var(--border-2);
  background-clip: content-box;
}
.p-table.models { min-width: 720px; margin: 0; }
.p-table.models th:first-child,
.p-table.models td:first-child { position: sticky; left: 0; background: var(--bg);
  font-family: inherit; font-size: 13px; font-weight: 600; color: var(--text-2);
  white-space: normal; min-width: 150px; }
.p-table.models thead th:first-child { background: var(--surface-2); }
.p-table.models td { font-size: 13px; white-space: nowrap; }
.p-table.models td.desc { white-space: normal; min-width: 190px; line-height: 1.55; }
.p-table.models td small { color: var(--muted); font-size: 11.5px; }
/* ✓/— align left, like the header and every other row. Centring them leaves the
   capability rows visibly indented against the rest of their own column. */
.p-table.models td.mark { color: var(--muted); font-size: 15px; }
.p-table.models td.mark.yes { color: var(--accent); }

/* SDK 메서드 이름. 엔드포인트 주소 바로 밑, 같은 무게로 — 사람은 둘 중 아는 쪽으로 찾는다. */
.docs-sdkname { margin: -10px 0 18px; font-size: 12.5px; color: var(--muted); }
.docs-sdkname code { font-size: 12.5px; color: var(--text-2); }