/* ============================================
   docs.css — 문서 사이트 전용
   ============================================
   규칙: 크기는 ds.css의 타입 스케일 토큰만 씁니다.
   임의 값(13.5px, 14.5px)을 쓰지 않습니다 —
   이 파일이 시스템을 어기면 시스템 전체가 신뢰를 잃습니다.

   구조
     GNB  전역 내비 — 제품 단위. 어디에 있든 같습니다.
     LNB  섹션 내비 — 지금 섹션 안에서만. 섹션 머리표가 붙습니다.
*/

/* ══════════════════════════════════════
   GNB — 전역 내비게이션
   ══════════════════════════════════════ */
.topnav {
  position: sticky; top: 0; z-index: 50;
  height: 56px; display: flex; align-items: center; gap: 28px;
  padding: 0 20px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}
.brandmark {
  display: inline-flex; align-items: center;
  font-size: var(--text-base); font-weight: var(--weight-semibold);
  letter-spacing: -0.02em; color: var(--gray-12); text-decoration: none;
}
.brandmark span { margin-left: 5px; font-weight: var(--weight-medium); }

/* 메뉴는 화면 기준 정중앙 · 로고 왼쪽 · 유틸 오른쪽 */
.topnav-links {
  display: flex; gap: 2px;
  position: absolute; left: 50%; translate: -50% 0;
}
.topnav-right { margin-left: auto; }
.topnav-links a {
  display: inline-flex; align-items: center; gap: 5px;
  height: 32px; padding: 0 11px; border-radius: var(--r-lg);
  font-size: var(--text-base); font-weight: var(--weight-medium);
  color: var(--gray-11); text-decoration: none;
  transition: background .16s ease, color .16s ease;
}
.topnav-links a:hover { background: var(--gray-3); color: var(--gray-12); }
.topnav-links a.on { background: var(--sel-bg); color: var(--sel-fg); }

.topnav-right { display: flex; align-items: center; gap: 8px; }
/* 검색 방아쇠 — 입력처럼 보이지만 누르면 커맨드 팔레트가 열립니다 */
.searchwrap {
  all: unset; box-sizing: border-box; cursor: pointer;
  display: inline-flex; align-items: center; gap: 8px;
  width: 216px; height: 32px; padding: 0 8px 0 10px;
  border: 1px solid var(--border-strong); border-radius: var(--r-lg);
  background: var(--bg); font-family: var(--font);
  transition: border-color .16s ease, box-shadow .16s ease;
}
.searchwrap:hover { border-color: var(--border-hover); }
.searchwrap:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.search-ic { display: inline-flex; color: var(--gray-9); flex-shrink: 0; }
.search-ic svg { display: block; }
.searchbox-label { flex: 1; text-align: left; font-size: var(--text-sm); color: var(--gray-9); }
.searchbox-kbd {
  font-family: var(--mono); font-size: var(--text-2xs); color: var(--gray-11);
  background: var(--gray-3); border-radius: var(--r-sm); padding: 2px 5px;
}

/* ── 커맨드 팔레트 (⌘K) ── 문서 사이트 검색 ── */
.ds-palette-scrim {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(0, 0, 0, .32);
  display: flex; justify-content: center; align-items: flex-start;
  padding: 12vh 16px 16px;
}
.ds-palette-scrim[hidden] { display: none; }
.ds-palette-scrim .ds-palette { width: 100%; max-width: 560px; }
.icon-btn:focus-visible, .topnav-links a:focus-visible, .sidebar a:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.icon-btn {
  all: unset; box-sizing: border-box; cursor: pointer;
  width: 32px; height: 32px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--border-strong); border-radius: var(--r-lg);
  color: var(--gray-11); background: var(--bg); text-decoration: none;
  transition: background .16s ease, color .16s ease, border-color .16s ease;
}
.icon-btn:hover { background: var(--gray-3); color: var(--gray-12); border-color: var(--border-hover); }
.icon-btn svg { display: block; }

/* ══════════════════════════════════════
   레이아웃
   ══════════════════════════════════════ */
.shell { display: flex; align-items: flex-start; min-height: calc(100vh - 56px); }

/* ══════════════════════════════════════
   LNB — 섹션 내비게이션
   GNB와 다른 배경 + 섹션 머리표로 구분합니다.
   ══════════════════════════════════════ */
.sidebar {
  width: 264px; flex-shrink: 0;
  padding: 0 0 80px;
  position: sticky; top: 56px;
  height: calc(100vh - 56px); overflow-y: auto;
  background: var(--bg);
  border-right: 1px solid var(--border);
}
/* 왼쪽 머리는 본문과 같은 높이에서 시작합니다.
   본문(#content)의 위 여백이 40px이므로 여기도 40px입니다 — 두 값이 어긋나면
   상단 바 아래에서 한쪽만 붙어 보입니다. 제목이 세 줄에서 한 줄로 줄었을 때
   실제로 그렇게 됐습니다(머리 100px → 66px). */
.lnb-head {
  position: sticky; top: 0; z-index: 1;
  padding: 40px 20px 15px;
  background: var(--bg);
  margin-bottom: 10px;
}
.lnb-eyebrow {
  font-size: var(--text-xs); font-weight: var(--weight-semibold);
  color: var(--gray-9);
}
.lnb-title {
  display: block;
  font-size: var(--text-lg); font-weight: var(--weight-semibold);
  color: var(--gray-12); letter-spacing: -0.01em;
}
.lnb-sub { margin-top: 4px; font-size: var(--text-xs); color: var(--gray-10); line-height: var(--leading-ui); }

.sidebar-body { padding: 0 12px; }
.nav-title {
  font-size: var(--text-xs); font-weight: var(--weight-medium);
  color: var(--gray-9);
  padding: 0 9px; margin: 20px 0 6px;
}
.nav-title:first-child { margin-top: 4px; }
.sidebar a {
  display: flex; align-items: center; gap: 6px;
  padding: 7px 9px; border-radius: var(--r-md);
  color: var(--gray-11); text-decoration: none;
  font-size: var(--text-sm); line-height: var(--leading-ui);
  transition: background .16s ease, color .16s ease;
}
.sidebar a:hover { background: var(--gray-3); color: var(--gray-12); }
.sidebar a.on {
  background: var(--sel-bg); color: var(--sel-fg);
  font-weight: var(--weight-medium);
}
.sidebar a .nav-en {
  margin-left: auto; font-size: var(--text-2xs);
  color: var(--gray-8); font-weight: var(--weight-normal);
}
.sidebar a.on .nav-en { color: var(--gray-10); }
.sidebar a .vtag {
  margin-left: auto; flex-shrink: 0;
  font-size: 10px; font-weight: var(--weight-semibold);
  padding: 1px 5px; border-radius: var(--r-sm);
  background: var(--gray-4); color: var(--gray-10);
}
.sidebar a.on .vtag { background: var(--gray-12); color: var(--bg); }

/* ══════════════════════════════════════
   본문
   ══════════════════════════════════════ */
/* 본문 — 모든 페이지가 한 폭(912px).
   목차는 화면 오른쪽에 부유(Notion 방식) — 흐름 밖이라 중앙 정렬에 간섭 불가. */
.content {
  flex: 1; min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 912px) minmax(0, 1fr);
  align-items: start;
  padding: 40px 56px 160px;
}
.page-main { grid-column: 2; min-width: 0; }


/* "이 페이지" 목차 — 긴 페이지의 조감도 (≥1280px) */
/* 목차 — Notion 방식.
   연한 세로 스트로크 트랙 위에서, 현재 읽는 구간의 세그먼트만 진해집니다.
   구분선이 아니라 "지금 어디" 표시기입니다. */
/* 목차 — 본문 컬럼에 앵커합니다 (화면이 아니라).
   본문 오른쪽 끝 = 50vw + LNB절반(132) + 본문절반(456).
   간격 56px(글로벌 기준 48~64)이 창 폭과 무관하게 일정하고,
   그 간격이 확보되지 않는 폭에서는 숨습니다. */
.toc {
  display: none;
  position: fixed; top: 100px;
  left: calc(50vw + 132px + 456px + 56px);
  width: 176px;
  max-height: calc(100vh - 140px); overflow-y: auto;
}
@media (min-width: 1700px) { .toc { display: block; } }
.toc a {
  display: block; padding: 5px 0 5px 14px;
  border-left: 2px solid var(--gray-a3);
  font-size: var(--text-sm); line-height: var(--leading-ui);
  color: var(--gray-10); text-decoration: none;
  transition: color .16s ease, border-color .16s ease;
}
.toc a:hover { color: var(--gray-12); border-left-color: var(--gray-a6); }
.toc a.on {
  color: var(--sel-fg); font-weight: var(--weight-medium);
  border-left-color: var(--gray-12);
}

/* 표 가로 스크롤 — 좁은 화면에서 표가 터지지 않게 */
.table-scroll { overflow-x: auto; margin-bottom: 18px; }
.table-scroll > table { margin-bottom: 0; min-width: 520px; }

/* 스킵 링크 */
.skip-link {
  position: fixed; top: -48px; left: 16px; z-index: 100;
  padding: 8px 14px; border-radius: var(--r-lg);
  background: var(--gray-12); color: var(--bg);
  font-size: var(--text-sm); text-decoration: none;
  transition: top .16s ease;
}
.skip-link:focus { top: 8px; }

/* 드로어 스크림 */
.scrim {
  display: none; position: fixed; inset: 56px 0 0 0;
  background: rgba(0, 0, 0, .32); z-index: 55;
}
.menu-btn { display: none; }

.crumb {
  display: flex; align-items: center; gap: 7px;
  font-size: var(--text-xs); color: var(--gray-9); margin-bottom: 14px;
}
.crumb a { color: var(--gray-10); text-decoration: none; }
.crumb a:hover { color: var(--gray-12); }
.crumb .sep { color: var(--gray-7); }

.page-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.page-head .ai-copy { margin-left: auto; }
.page-head h1 {
  font-size: clamp(26px, 1.5vw + 18px, 32px); font-weight: var(--weight-semibold);
  letter-spacing: -0.025em; line-height: var(--leading-tight); color: var(--gray-12);
}
.page-ko {
  font-size: var(--text-base); color: var(--gray-9);
  font-weight: var(--weight-medium);
}
.page-lead {
  color: var(--gray-11); margin-top: 12px;
  font-size: var(--text-md); line-height: var(--leading-prose);
}

.origin-badge {
  display: inline-flex; align-items: center; gap: 5px;
  height: 23px; padding: 0 10px; border-radius: var(--r-full);
  font-size: var(--text-2xs); font-weight: var(--weight-semibold);
  white-space: nowrap;
}
.origin-badge.custom  { background: var(--brand-subtle); color: var(--brand-text); }
.origin-badge.wrapped { background: var(--warning-subtle); color: var(--warning); }

/* import 한 줄 — 컴포넌트 페이지 상단 */
.imp { margin-bottom: 20px; }
.imp code {
  font-family: var(--mono); font-size: var(--text-xs); color: var(--gray-11);
  background: var(--gray-2); border: 1px solid var(--border);
  padding: 7px 12px; border-radius: var(--r-md); display: inline-block;
}
.a11y-std { font-size: var(--text-xs); color: var(--gray-9); margin-bottom: 22px; }
.a11y-std a { color: var(--gray-10); }

/* ── 탭 ── */
.tabs {
  display: flex; gap: 2px; margin-top: 26px;
  border-bottom: 1px solid var(--border);
}
.tabs a {
  padding: 9px 13px; margin-bottom: -1px;
  font-size: var(--text-base); font-weight: var(--weight-medium);
  color: var(--gray-10); text-decoration: none;
  border-bottom: 2px solid transparent;
  transition: color .16s ease;
}
.tabs a:hover { color: var(--gray-12); }
.tabs a.on { color: var(--sel-fg); border-bottom-color: var(--sel-fg); }
.tabpane { margin-top: 30px; }

/* ══════════════════════════════════════
   Prose — 읽는 면. UI보다 크고 넉넉하게.
   ══════════════════════════════════════ */
/* prose는 자체 폭을 갖지 않습니다 — 폭은 컨테이너(--main-w)가 유일하게 결정.
   두 군데서 폭을 정하면 하나만 어긋나도 요소별 폭이 갈라집니다. */
.prose { max-width: none; }
/* 섹션 구분 — 선이 아니라 여백(위 64px)과 굵기가 그룹을 만듭니다 */
.prose h2 {
  font-size: clamp(20px, 1vw + 14px, 24px); font-weight: var(--weight-semibold);
  letter-spacing: -0.015em; line-height: var(--leading-tight);
  color: var(--gray-12); margin: 64px 0 14px;
}
/* 첫 h2도 위 여백이 필요합니다. 0으로 두면 바로 위의 리드 문단(.page-lead)에
   그대로 붙어, 제목이 문단의 한 줄처럼 읽힙니다.
   섹션 사이(64px)만큼은 아니지만 문단과는 확실히 떨어뜨립니다. */
.prose > h2:first-child { margin-top: 40px; }
/* 히어로 아래처럼 이미 큰 여백이 있는 자리에서는 겹치지 않게 줄입니다 */
.hero + .prose > h2:first-child { margin-top: 24px; }
.prose h3 {
  font-size: var(--text-lg); font-weight: var(--weight-semibold);
  color: var(--gray-12); margin: 30px 0 10px; letter-spacing: -0.01em;
}
.prose p {
  font-size: var(--text-md); color: var(--gray-11);
  line-height: var(--leading-prose); margin-bottom: 14px;
}
.prose ul, .prose ol { margin: 0 0 16px 20px; }
.prose li {
  font-size: var(--text-md); color: var(--gray-11);
  line-height: var(--leading-prose); margin-bottom: 7px;
}
.prose b, .prose strong { color: var(--gray-12); font-weight: var(--weight-semibold); }
.prose a { color: var(--brand-text); text-decoration: none; }
.prose a:hover { text-decoration: underline; }
.prose code {
  font-family: var(--mono); font-size: var(--text-xs);
  color: var(--brand-text); background: var(--gray-3);
  padding: 2px 6px; border-radius: var(--r-sm);
}
.prose pre {
  background: var(--gray-2); border: 1px solid var(--border);
  border-radius: var(--r-lg); padding: 16px 18px;
  overflow-x: auto; margin-bottom: 18px;
}
.prose pre code {
  background: none; padding: 0; color: var(--gray-11);
  white-space: pre; font-size: var(--text-xs); line-height: 1.7;
}

/* 표 — prose 안팎 공통 */
.prose table, .ptable, .wl {
  width: 100%; border-collapse: collapse;
  border: 1px solid var(--border); border-radius: var(--r-xl);
  margin-bottom: 18px; overflow: hidden;
}
.prose table th, .ptable th, .wl th {
  text-align: left; font-size: var(--text-xs);
  font-weight: var(--weight-medium); color: var(--gray-11);
  padding: 10px 15px;
  border-bottom: 1px solid var(--border-strong);
}
.prose table td, .ptable td, .wl td {
  padding: 12px 15px; font-size: var(--text-sm); color: var(--gray-11);
  line-height: var(--leading-ui);
  border-bottom: 1px solid var(--border-subtle); vertical-align: top;
}
.prose table tr:last-child td, .ptable tr:last-child td, .wl tr:last-child td { border-bottom: none; }
.ptable td.pname {
  font-family: var(--mono); font-size: var(--text-xs);
  color: var(--gray-12); font-weight: var(--weight-semibold); white-space: nowrap;
}
.ptable td.ptype { font-family: var(--mono); font-size: var(--text-xs); color: var(--brand); }
.ptable td.pdef  { font-family: var(--mono); font-size: var(--text-xs); color: var(--gray-10); white-space: nowrap; }
.ptable td.pdesc { color: var(--gray-11); }

.tbl-title {
  font-size: var(--text-xs); font-weight: var(--weight-semibold);
  color: var(--gray-10);
  margin: 34px 0 12px;
}
.tbl-title:first-child { margin-top: 0; }

/* ══════════════════════════════════════
   데모 + 코드
   ══════════════════════════════════════ */
.demo {
  border: 1px solid var(--border);
  border-radius: var(--r-xl) var(--r-xl) 0 0;
  padding: 32px; background: var(--gray-1);
}
.demo .row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }

.codewrap {
  border: 1px solid var(--border); border-top: none;
  border-radius: 0 0 var(--r-xl) var(--r-xl); overflow: hidden;
}
.codetabs {
  display: flex; align-items: center;
  background: var(--gray-2); border-bottom: 1px solid var(--border);
}
.codetabs button {
  all: unset; box-sizing: border-box; cursor: pointer;
  padding: 8px 13px; margin-bottom: -1px;
  font-size: var(--text-xs); font-weight: var(--weight-semibold);
  color: var(--gray-10); font-family: var(--font);
  border-bottom: 2px solid transparent;
  transition: color .16s ease;
}
.codetabs button:hover { color: var(--gray-12); }
.codetabs button.on { color: var(--sel-fg); border-bottom-color: var(--sel-fg); }
.codetabs .spacer { flex: 1; }
.codetabs .copy {
  all: unset; box-sizing: border-box; cursor: pointer; margin: 0 10px;
  padding: 4px 10px; border-radius: var(--r-md);
  border: 1px solid var(--border); background: var(--surface);
  font-size: var(--text-2xs); font-weight: var(--weight-medium);
  color: var(--gray-10); font-family: var(--font);
  transition: color .16s ease, border-color .16s ease;
}
.codetabs .copy:hover { color: var(--gray-12); border-color: var(--border-hover); }
.codebody { background: var(--gray-2); overflow-x: auto; }
.codebody pre { padding: 16px 18px; }
.codebody code {
  font-family: var(--mono); font-size: var(--text-xs);
  color: var(--gray-11); white-space: pre; line-height: 1.7;
}
.livehint { margin-top: 16px; font-size: var(--text-xs); color: var(--gray-9); }
.livehint b { color: var(--gray-11); font-family: var(--mono); }

/* ══════════════════════════════════════
   설명 블록
   ══════════════════════════════════════ */
/* 콜아웃은 쓰지 않습니다 — 설명은 본문·제목·표로 합니다.
   강조가 필요하면 문단 첫머리를 <b>굵은 리드</b>로 시작합니다. */

.whybox {
  border: 1px solid var(--border); border-radius: var(--r-xl);
  overflow: hidden; margin-bottom: 22px;
}
.wb-row {
  display: flex; gap: 15px; padding: 14px 17px;
  font-size: var(--text-sm); color: var(--gray-11); line-height: var(--leading-prose);
}
.wb-row + .wb-row { border-top: 1px solid var(--border-subtle); }
.wb-tag {
  flex-shrink: 0; width: 86px; height: 21px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: var(--text-2xs); font-weight: var(--weight-semibold);
  border-radius: var(--r-full);
}
.wb-tag.why { background: var(--gray-3); color: var(--gray-10); }
.wb-tag.where { background: var(--brand-subtle); color: var(--brand-text); }

.vsbox { border: 1px solid var(--border); border-radius: var(--r-xl); overflow: hidden; margin-bottom: 22px; }
.vs-head {
  display: flex; align-items: center; gap: 7px; padding: 12px 17px;
  background: var(--gray-2); border-bottom: 1px solid var(--border);
  font-size: var(--text-xs); font-weight: var(--weight-medium);
  color: var(--gray-10);
}
.vs-row {
  display: flex; gap: 15px; padding: 13px 17px;
  font-size: var(--text-sm); color: var(--gray-11); line-height: var(--leading-prose);
}
.vs-row + .vs-row { border-top: 1px solid var(--border-subtle); }
.vs-name {
  flex-shrink: 0; width: 138px;
  font-weight: var(--weight-medium); color: var(--gray-12);
}
.vs-name a { color: var(--brand-text); text-decoration: none; }
.vs-name a:hover { text-decoration: underline; }

/* ── 가이드라인 ── */
.gl { border: 1px solid var(--border); border-radius: var(--r-xl); overflow: hidden; }
.gl-item { display: flex; gap: 15px; padding: 15px 17px; }
.gl-item + .gl-item { border-top: 1px solid var(--border-subtle); }
.gl-tag {
  flex-shrink: 0; width: 82px; height: 21px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: var(--text-2xs); font-weight: var(--weight-semibold);
  border-radius: var(--r-full);
}
.gl-tag.do   { background: var(--success-subtle); color: var(--success); }
.gl-tag.dont { background: var(--danger-subtle); color: var(--danger); }
.gl-tag.a11y { background: var(--brand-subtle); color: var(--brand-text); }
.gl-tag.note { background: var(--gray-3); color: var(--gray-11); }
[data-theme="dark"] .gl-tag.do { background: #14291b; }
.gl-text { font-size: var(--text-sm); color: var(--gray-11); line-height: var(--leading-prose); }

/* ── Do / Don't ── */
.dodont { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 18px 0 22px; }
.dd { border: 1px solid var(--border); border-radius: var(--r-xl); padding: 17px 19px; }
.dd.do { border-color: var(--success-border); }
.dd.dont { border-color: color-mix(in srgb, var(--danger) 24%, var(--gray-4)); }
.dd-tag {
  display: inline-flex; align-items: center; height: 21px; padding: 0 10px;
  border-radius: var(--r-full); font-size: var(--text-2xs);
  font-weight: var(--weight-semibold); margin-bottom: 11px;
}
.dd.do .dd-tag { background: var(--success-subtle); color: var(--success); }
.dd.dont .dd-tag { background: var(--danger-subtle); color: var(--danger); }
[data-theme="dark"] .dd.do .dd-tag { background: #14291b; }
.dd ul { margin: 0 0 0 17px; }
.dd li { font-size: var(--text-sm); color: var(--gray-11); line-height: var(--leading-prose); margin-bottom: 5px; }
.dd li:last-child { margin-bottom: 0; }

/* ── 글쓰기 비교 ── */
.writecmp { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 18px 0 22px; }
.wc { border: 1px solid var(--border); border-radius: var(--r-xl); padding: 17px 19px; }
.wc.bad { border-color: color-mix(in srgb, var(--danger) 24%, var(--gray-4)); }
.wc.good { border-color: var(--success-border); }
.wc-tag {
  display: inline-flex; align-items: center; height: 21px; padding: 0 10px;
  border-radius: var(--r-full); font-size: var(--text-2xs);
  font-weight: var(--weight-semibold); margin-bottom: 11px;
}
.wc.bad .wc-tag { background: var(--danger-subtle); color: var(--danger); }
.wc.good .wc-tag { background: var(--success-subtle); color: var(--success); }
[data-theme="dark"] .wc.good .wc-tag { background: #14291b; }
.wc ul { margin: 0 0 0 17px; }
.wc li { font-size: var(--text-sm); color: var(--gray-11); line-height: var(--leading-prose); margin-bottom: 7px; }
.wc.bad li { text-decoration: line-through; text-decoration-color: var(--gray-7); }

/* ══════════════════════════════════════
   카탈로그 — 썸네일 카드
   ══════════════════════════════════════ */
.cat-group { margin-top: 56px; }
.cat-group:first-of-type { margin-top: 34px; }
.cat-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 16px; }
.cat-head h2 {
  font-size: var(--text-lg); font-weight: var(--weight-semibold);
  color: var(--gray-12); letter-spacing: -0.01em;
}
.cat-head span { font-size: var(--text-xs); color: var(--gray-9); }

.cat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(272px, 1fr)); gap: 16px; }
.cat-card {
  border: 1px solid var(--border); border-radius: var(--r-xl);
  text-decoration: none; color: var(--gray-12);
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--surface);
  transition: border-color .16s ease;
}
.cat-card:hover { border-color: var(--border-hover); }
.cat-card:hover .thumb { background: var(--gray-2); }

/* 썸네일 — 카드의 주인공입니다. 실제 컴포넌트를 그대로 보여줍니다.
   전에는 100px 높이에 0.7배로 줄여 두어 무엇인지 알아보기 어려웠고,
   대신 설명 문장이 카드의 절반을 차지했습니다. 높이를 156px로 키우고
   축소도 0.92배까지 풀어 컴포넌트 자체가 읽히게 했습니다. */
.thumb {
  height: 156px; overflow: hidden; position: relative;
  background: var(--gray-1); border-bottom: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  padding: 16px;
  transition: background .16s ease;
}
.thumb-inner {
  transform: scale(.92); transform-origin: center;
  pointer-events: none; display: flex; align-items: center; justify-content: center;
  max-width: 100%;
}
/* 이름 줄 — 카드에서 설명 문장을 뺐습니다. 무엇인지는 썸네일이 말하고,
   자세한 설명은 들어가면 첫 줄에 있습니다. */
.cat-body { padding: 12px 14px; }
.cat-card .cc-top { display: flex; align-items: center; gap: 6px; }
.cat-card h3 {
  font-size: var(--text-base); font-weight: var(--weight-semibold);
  color: var(--gray-12);
}
.mini-badge {
  margin-left: auto; flex-shrink: 0;
  font-size: 10px; font-weight: var(--weight-semibold);
  padding: 2px 6px; border-radius: var(--r-sm);
}
.mini-badge.custom { background: var(--brand-subtle); color: var(--brand-text); }
.mini-badge.wrapped { background: var(--warning-subtle); color: var(--warning); }
[data-theme="dark"] .mini-badge.wrapped { background: #2a2011; color: #f0b429; }

/* ══════════════════════════════════════
   랜딩
   ══════════════════════════════════════ */
.hero { padding: 4px 0; }
.hero h1 {
  font-size: clamp(30px, 2.4vw + 20px, 40px); font-weight: var(--weight-semibold);
  letter-spacing: -0.03em; line-height: var(--leading-tight); color: var(--gray-12);
}
.hero p {
  margin-top: 14px; font-size: var(--text-lg); color: var(--gray-11);
  line-height: var(--leading-prose);
}
.hero-actions { display: flex; gap: 10px; margin-top: 26px; flex-wrap: wrap; }
.hero-stats {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
  gap: 12px; margin: 40px 0 8px;
}
.hero-stat { border: 1px solid var(--border); border-radius: var(--r-xl); padding: 17px 19px; }
.hero-stat b {
  display: block; font-size: var(--text-2xl);
  font-weight: var(--weight-semibold); color: var(--gray-12);
  letter-spacing: -0.02em; line-height: 1.15;
}
.hero-stat span { display: block; margin-top: 6px; font-size: var(--text-xs); color: var(--gray-10); }

.entry-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(236px, 1fr)); gap: 14px; }
.entry {
  border: 1px solid var(--border); border-radius: var(--r-xl); padding: 20px;
  text-decoration: none; display: block; background: var(--surface);
  transition: border-color .16s ease, background .16s ease;
}
.entry:hover { border-color: var(--border-hover); background: var(--gray-2); }
.entry .en-ic { display: inline-flex; color: var(--brand-text); margin-bottom: 12px; }
.entry h3 { font-size: var(--text-base); font-weight: var(--weight-semibold); color: var(--gray-12); }
.entry p { font-size: var(--text-xs); color: var(--gray-10); margin-top: 6px; line-height: var(--leading-ui); }

/* ══════════════════════════════════════
   템플릿 카드
   ══════════════════════════════════════ */
.tpl-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 26px; }
.tpl-card {
  border: 1px solid var(--border); border-radius: var(--r-xl); padding: 22px;
  text-decoration: none; color: var(--gray-12); display: block;
  background: var(--surface);
  transition: border-color .16s ease, background .16s ease;
}
.tpl-card:hover { border-color: var(--border-hover); background: var(--gray-2); }
.tpl-card.live { border-color: color-mix(in srgb, var(--brand) 32%, var(--gray-4)); }
.tpl-card.live:hover { border-color: var(--brand); background: var(--brand-subtle); }
.tpl-card.live h3 { color: var(--brand-text); }
.tpl-card h3 {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: var(--text-base); font-weight: var(--weight-semibold);
}
.tpl-card p { font-size: var(--text-xs); color: var(--gray-10); margin-top: 6px; line-height: var(--leading-ui); }
.tpl-card .covers { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 14px; }
.tpl-card .covers span {
  font-size: var(--text-2xs); color: var(--gray-10);
  border: 1px solid var(--border); border-radius: var(--r-full); padding: 2px 8px;
}
.tpl-card .go {
  display: inline-flex; align-items: center; gap: 4px; margin-top: 14px;
  font-size: var(--text-xs); color: var(--brand-text); font-weight: var(--weight-medium);
}
.tpl-link { display: flex; gap: 18px; flex-wrap: wrap; margin-top: 20px; }
.tpl-link a {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: var(--text-sm); color: var(--brand-text);
  text-decoration: none; font-weight: var(--weight-medium);
}
.tpl-link a:hover { text-decoration: underline; }

/* ══════════════════════════════════════
   접근성 탭
   ══════════════════════════════════════ */
/* .kbd는 ds.css에 있습니다 — 여기서 다시 정의하면 값이 갈립니다.
   전에는 여백(2px 6px vs 3px 7px)과 보더 색이 서로 달랐고,
   docs.css가 나중에 실려 문서 사이트에서만 다른 키캡이 보였습니다. */
.a11y-split { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.a11-col { border: 1px solid var(--border); border-radius: var(--r-xl); padding: 17px 19px; }
.a11-col.free { border-color: var(--success-border); }
.a11-col.yours { border-color: color-mix(in srgb, var(--brand) 28%, var(--gray-4)); }
.a11-tag {
  display: inline-flex; align-items: center; height: 22px; padding: 0 11px;
  border-radius: var(--r-full); font-size: var(--text-2xs);
  font-weight: var(--weight-semibold); margin-bottom: 12px;
}
.a11-col.free .a11-tag { background: var(--success-subtle); color: var(--success); }
.a11-col.yours .a11-tag { background: var(--brand-subtle); color: var(--brand-text); }
[data-theme="dark"] .a11-col.free .a11-tag { background: #14291b; }
.a11-col ul { margin: 0 0 0 17px; }
.a11-col li { font-size: var(--text-sm); color: var(--gray-11); line-height: var(--leading-prose); margin-bottom: 7px; }
.a11-col li:last-child { margin-bottom: 0; }

/* ══════════════════════════════════════
   Foundation 전용
   ══════════════════════════════════════ */
.flowbox {
  display: flex; align-items: center; gap: 11px; flex-wrap: wrap;
  border: 1px solid var(--border); border-radius: var(--r-xl);
  padding: 18px; background: var(--gray-1); margin-bottom: 20px;
}
.flowbox span {
  font-family: var(--mono); font-size: var(--text-xs); padding: 7px 13px;
  border: 1px solid var(--border); border-radius: var(--r-md);
  background: var(--surface); color: var(--gray-12);
}
.flowbox i { color: var(--gray-8); font-style: normal; }

.statusrow { display: grid; grid-template-columns: repeat(auto-fit, minmax(196px, 1fr)); gap: 11px; margin: 16px 0 20px; }
.statusrow > div {
  display: flex; align-items: center; gap: 10px;
  border: 1px solid var(--border); border-radius: var(--r-xl); padding: 12px 15px;
}
.statusrow i { width: 28px; height: 28px; border-radius: var(--r-md); flex-shrink: 0; }
.statusrow b { font-family: var(--mono); font-size: var(--text-xs); color: var(--gray-12); font-weight: var(--weight-semibold); }
.statusrow span { font-size: var(--text-xs); color: var(--gray-10); }

.typescale { border: 1px solid var(--border); border-radius: var(--r-xl); overflow: hidden; margin-bottom: 22px; }
.ts-row { display: grid; grid-template-columns: 124px 1fr 232px; gap: 18px; align-items: center; padding: 18px 20px; }
.ts-row + .ts-row { border-top: 1px solid var(--border-subtle); }
.ts-meta code {
  font-family: var(--mono); font-size: var(--text-xs); color: var(--brand);
  background: var(--gray-3); padding: 2px 6px; border-radius: var(--r-sm);
}
.ts-meta span { display: block; font-size: var(--text-2xs); color: var(--gray-9); margin-top: 5px; font-family: var(--mono); }
.ts-meta b { font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--foreground); }
.ts-meta i { font-style: normal; }
/* 타이포 토큰 세 표 — 크기 · 굵기 · 줄 간격을 나란히 (표 하나에 몰면 빈 칸만 남습니다) */
.ty-toks { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; align-items: start; margin-bottom: 18px; }
.ty-toks .table-scroll, .ty-toks table { margin: 0; }
.ty-toks table { min-width: 0; width: 100%; }   /* 문서 표의 최소 폭(520)이 세 칸 나란히에서는 값 열을 밀어냅니다 */
@media (max-width: 900px) { .ty-toks { grid-template-columns: 1fr; } }
.ts-sample { color: var(--gray-12); }
.ts-use { font-size: var(--text-xs); color: var(--gray-10); text-align: right; }

.spacescale { border: 1px solid var(--border); border-radius: var(--r-xl); overflow: hidden; margin-bottom: 20px; }
.sp-row { display: grid; grid-template-columns: 52px 84px 1fr; gap: 18px; align-items: center; padding: 10px 20px; }
.sp-row + .sp-row { border-top: 1px solid var(--border-subtle); }
.sp-row code { font-family: var(--mono); font-size: var(--text-xs); color: var(--gray-12); }
.sp-bar { height: 14px; background: var(--brand-subtle); border-left: 2px solid var(--brand); }
.sp-row span { font-size: var(--text-xs); color: var(--gray-10); }

/* 화면 골격 그림 — 콘솔 셸을 줄여 그린 것. 숫자는 실제 px */
.sp-shell {
  display: flex; gap: 0; height: 220px; margin-bottom: 18px; padding: 8px 8px 8px 0;
  background: var(--canvas); border: 1px solid var(--border); border-radius: var(--r-ct); overflow: hidden;
}
.sp-gnb { flex: 0 0 22%; padding: 12px; display: flex; flex-direction: column; gap: 4px; }
.sp-panel { position: relative; flex: 1; min-width: 0; background: var(--card); border: 1px solid var(--border); border-radius: var(--r-ct); padding: 18px 20px; display: flex; flex-direction: column; gap: 16px; }
.sp-gnb b, .sp-title { font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--foreground); }
.sp-gnb span, .sp-title span, .sp-block span, .sp-inset { font-family: var(--mono); font-size: var(--text-2xs); font-weight: var(--weight-normal); color: var(--muted-foreground); }
.sp-title span, .sp-block span { margin-left: 8px; }
.sp-block { font-size: var(--text-xs); color: var(--muted-foreground); border-top: 1px dashed var(--border); padding-top: 8px; }
.sp-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; flex: 1; }
.sp-cards i { border: 1px solid var(--border); border-radius: var(--r-el); }
.sp-inset { position: absolute; right: 12px; bottom: 8px; }
@media (max-width: 640px) { .sp-gnb { display: none; } .sp-shell { padding: 8px; } .sp-cards { grid-template-columns: repeat(2, 1fr); } }

.radiusrow { display: grid; grid-template-columns: repeat(auto-fit, minmax(148px, 1fr)); gap: 12px; margin: 16px 0 22px; }
.radiusrow > div { border: 1px solid var(--border); border-radius: var(--r-xl); padding: 18px; text-align: center; }
.radiusrow .rd { width: 54px; height: 54px; margin: 0 auto 13px; background: var(--brand-subtle); border: 1px solid var(--brand); }
.radiusrow code { font-family: var(--mono); font-size: var(--text-xs); color: var(--brand); display: block; }
.radiusrow span { font-family: var(--mono); font-size: var(--text-2xs); color: var(--gray-10); }
.radiusrow em { display: block; font-style: normal; font-size: var(--text-2xs); color: var(--gray-9); margin-top: 7px; line-height: var(--leading-ui); }

.swatches { display: flex; border: 1px solid var(--border); border-radius: var(--r-xl); overflow: hidden; }
.swatch { flex: 1; height: 48px; position: relative; }
.swatch span {
  position: absolute; bottom: -21px; left: 50%; transform: translateX(-50%);
  font-size: var(--text-2xs); color: var(--gray-9); font-family: var(--mono);
}
.swatch-wrap { padding-bottom: 28px; }
.brand-row { display: flex; gap: 11px; }
.brand-chip {
  flex: 1; height: 60px; border-radius: var(--r-xl); border: 1px solid var(--border);
  display: flex; align-items: flex-end; padding: 9px 11px;
  font-size: var(--text-2xs); font-family: var(--mono);
}

.fd-icons {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 2px;
  border: 1px solid var(--border); border-radius: var(--r-xl); padding: 9px; margin-bottom: 24px;
}
.fd-ic {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 14px 6px; border-radius: var(--r-md); color: var(--gray-11);
  transition: background .16s ease, color .16s ease;
}
.fd-ic:hover { background: var(--gray-2); color: var(--gray-12); }
.fd-ic span { font-family: var(--mono); font-size: 10px; color: var(--gray-9); text-align: center; word-break: break-all; line-height: 1.35; }
.fd-icsizes {
  display: flex; gap: 28px; align-items: flex-end; padding: 20px 22px;
  border: 1px solid var(--border); border-radius: var(--r-xl); margin-bottom: 22px;
}
.fd-icsizes > div { display: flex; flex-direction: column; align-items: center; gap: 11px; color: var(--gray-11); }
.fd-icsizes span { font-family: var(--mono); font-size: var(--text-2xs); color: var(--gray-9); }

/* 용어집 */
.wl-do { font-weight: var(--weight-semibold); color: var(--gray-12); white-space: nowrap; }
.wl-dont { color: var(--gray-9); text-decoration: line-through; text-decoration-color: var(--gray-7); font-size: var(--text-xs); }
.wl-why { color: var(--gray-11); line-height: var(--leading-ui); }

/* ══════════════════════════════════════
   이전 / 다음
   ══════════════════════════════════════ */
.pagenav {
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
  margin-top: 72px;
}
.pagenav a {
  border: 1px solid var(--border); border-radius: var(--r-xl); padding: 15px 19px;
  text-decoration: none; display: block; background: var(--surface);
  transition: border-color .16s ease, background .16s ease;
}
.pagenav a:hover { border-color: var(--border-hover); background: var(--gray-2); }
.pagenav a.nx { text-align: right; }
.pagenav span {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: var(--text-2xs); color: var(--gray-9);
}
.pagenav b {
  display: block; margin-top: 4px;
  font-size: var(--text-base); color: var(--gray-12); font-weight: var(--weight-medium);
}

/* ══════════════════════════════════════
   문서 데모용 정적 모형
   ══════════════════════════════════════ */
.lic { flex-shrink: 0; vertical-align: -0.125em; }
.lic.spin { animation: spin .8s linear infinite; }

.row-more-demo {
  all: unset; box-sizing: border-box; cursor: pointer;
  width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--r-md); color: var(--gray-10);
}
.row-more-demo:hover { background: var(--gray-3); color: var(--gray-12); }
.row-more-demo.bordered { border: 1px solid var(--border-strong); background: var(--surface); }
.row-more-demo svg { display: block; }

/* 세그먼티드 컨트롤 — 회색 트랙 + 선택 항목 흰 칩(활성은 브랜드 선·글자, 2026-08-19) */
.ds-bg-demo { display: inline-flex; align-items: center; gap: 2px; padding: 3px;
  background: var(--gray-3); border-radius: var(--r-lg); }
.ds-bg-demo span { padding: 4px 12px; border-radius: var(--r-md);
  font-size: var(--text-xs); font-weight: var(--weight-medium); color: var(--gray-11); }
.ds-bg-demo span.on { background: var(--surface); color: var(--nav-active-fg);
  box-shadow: 0 0 0 1px var(--nav-active); }

.ds-tabs-demo { display: flex; gap: 4px; border-bottom: 1px solid var(--border); }
.ds-tabs-demo span {
  padding: 9px 13px; margin-bottom: -1px;
  font-size: var(--text-base); font-weight: var(--weight-medium);
  color: var(--gray-10); border-bottom: 2px solid transparent;
}
.ds-tabs-demo span.on { color: var(--sel-fg); border-bottom-color: var(--sel-fg); }
.ds-tabs-demo b {
  font-size: var(--text-2xs); font-weight: var(--weight-semibold);
  padding: 2px 7px; border-radius: var(--r-full);
  background: var(--gray-3); color: var(--gray-10); margin-left: 6px;
}
.ds-tabs-demo span.on b { background: var(--sel-bg); color: var(--sel-fg); }

.ds-bc-demo { font-size: var(--text-xs); color: var(--gray-10); }
.ds-bc-demo i { color: var(--gray-7); margin: 0 7px; font-style: normal; }
.ds-bc-demo b { color: var(--gray-12); font-weight: var(--weight-medium); }

.ds-pg-demo { display: flex; gap: 2px; }
.ds-pg-demo span {
  width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--r-md); font-size: var(--text-xs); color: var(--gray-11);
}
.ds-pg-demo span.on { background: var(--sel-bg); color: var(--sel-fg); }
.ds-pg-demo span .lic { color: var(--gray-9); }

.ds-nav-demo { max-width: 228px; }
.ds-nav-demo .sub {
  font-size: var(--text-xs); font-weight: var(--weight-medium); color: var(--gray-9);
  padding: 5px 9px;
}
.ds-nav-demo > div:not(.sub) {
  display: flex; align-items: center; gap: 9px; padding: 7px 9px;
  border-radius: var(--r-md); font-size: var(--text-sm); color: var(--gray-11);
}
.ds-nav-demo > div.on { background: var(--sel-bg); color: var(--sel-fg); }
.ds-nav-demo b {
  margin-left: auto; font-size: var(--text-2xs); font-weight: var(--weight-semibold);
  padding: 2px 7px; border-radius: var(--r-full); background: var(--gray-3); color: var(--gray-10);
}
.ds-nav-demo > div.on b { background: var(--gray-12); color: var(--bg); }
.ds-nav-demo .lic { color: var(--gray-9); }
.ds-nav-demo > div.on .lic { color: var(--sel-fg); }

.ds-step-demo { display: flex; gap: 22px; }
.ds-step-demo span {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: var(--text-sm); color: var(--gray-10); font-weight: var(--weight-medium);
}
.ds-step-demo i {
  width: 23px; height: 23px; border-radius: 50%;
  background: var(--gray-4); color: var(--gray-11);
  font-size: var(--text-2xs); font-style: normal;
  display: inline-flex; align-items: center; justify-content: center;
}
.ds-step-demo span.on { color: var(--gray-12); }
.ds-step-demo span.on i { background: var(--gray-12); color: var(--bg); }

.ds-alert-demo {
  border-radius: var(--r-lg); padding: 13px 16px; font-size: var(--text-sm);
  border: 1px solid; display: flex; flex-direction: column; gap: 3px;
  line-height: var(--leading-ui);
}
.ds-alert-demo b { font-weight: var(--weight-semibold); }
.ds-alert-demo.err {
  background: var(--danger-subtle);
  border-color: var(--danger-border); color: var(--danger);
}
.ds-alert-demo.warn {
  background: var(--warning-subtle);
  border-color: var(--warning-border); color: var(--warning);
}
.ds-alert-demo.ok {
  background: var(--success-subtle);
  border-color: var(--success-border); color: var(--success);
}

.ds-banner-demo {
  display: flex; align-items: center; gap: 9px;
  border: 1px solid var(--border); background: var(--gray-2);
  border-radius: var(--r-lg); padding: 13px 16px;
  font-size: var(--text-sm); color: var(--gray-11);
}

.ds-list-demo > div {
  display: flex; align-items: center; gap: 11px; padding: 10px 13px;
  border-radius: var(--r-md); font-size: var(--text-sm);
}
.ds-list-demo > div:hover { background: var(--gray-2); }
.ds-list-demo b { font-weight: var(--weight-medium); }
.ds-list-demo i { font-style: normal; font-size: var(--text-xs); color: var(--gray-10); }
.ds-list-demo em { margin-left: auto; font-style: normal; font-family: var(--mono); font-size: var(--text-xs); color: var(--gray-9); }
.ds-list-demo .lic { color: var(--gray-9); }

.ds-tree-demo > div {
  display: flex; align-items: center; gap: 7px;
  padding: 6px 11px; font-size: var(--text-sm); color: var(--gray-11); border-radius: var(--r-md);
}
.ds-tree-demo .ind { padding-left: 30px; }
.ds-tree-demo .on { background: var(--sel-bg); color: var(--sel-fg); }
.ds-tree-demo .lic { color: var(--gray-8); }


.ds-acc-demo { border: 1px solid var(--border); border-radius: var(--r-xl); overflow: hidden; }
.ds-acc-demo .h {
  display: flex; justify-content: space-between; align-items: center;
  padding: 12px 15px; font-size: var(--text-sm); font-weight: var(--weight-medium);
  border-bottom: 1px solid var(--border-subtle);
}
.ds-acc-demo .h span { color: var(--gray-9); }
.ds-acc-demo .b {
  padding: 11px 15px; font-family: var(--mono); font-size: var(--text-xs);
  color: var(--gray-11); background: var(--gray-2); border-bottom: 1px solid var(--border-subtle);
}

.f-icon { display: inline-flex; align-items: center; justify-content: center; color: var(--gray-10); }
.file-card .f-icon { justify-content: flex-start; }
.file-card.selected .f-icon, .file-row.selected .f-icon { color: var(--brand); }
.check .lic { display: block; }
.toolcall .check, .toolcall .lic { display: inline-flex; }
.chip .x .lic, .badge .lic { display: block; }
.ai-tool { display: inline-flex; align-items: center; justify-content: center; }
.ds-menu-item { gap: 9px; }
.ds-menu-item .lic { color: var(--gray-9); }

/* ══════════════════════════════════════
   반응형 — 1280 / 1080 / 900 / 640
   ══════════════════════════════════════ */
@media (max-width: 1080px) {
  .topnav-links { position: static; translate: none; }
  .content { padding: 36px 32px 140px; }
}
@media (max-width: 900px) {
  /* LNB → 드로어. 사라지는 게 아니라 서랍으로 들어갑니다 */
  .menu-btn { display: inline-flex; }
  .sidebar {
    position: fixed; left: 0; top: 56px; bottom: 0; z-index: 60;
    width: 288px; max-height: none;
    transform: translateX(-100%);
    transition: transform .2s ease;
  }
  body.drawer-open .sidebar { transform: none; box-shadow: var(--shadow-overlay); }
  body.drawer-open .scrim { display: block; }
  body.drawer-open { overflow: hidden; }

  .content { padding: 28px 20px 100px; max-width: none; }
  .searchbox { width: 148px; }
  .topnav { gap: 12px; padding: 0 12px; }
  .topnav-links { overflow-x: auto; scrollbar-width: none; }
  .topnav-links::-webkit-scrollbar { display: none; }
  .tpl-grid, .dodont, .writecmp, .a11y-split, .pagenav { grid-template-columns: 1fr; }
  .ts-row { grid-template-columns: 104px 1fr; }
  .ts-use { display: none; }
}
@media (max-width: 640px) {
  .searchwrap { display: none; }
  .hero-stats { grid-template-columns: repeat(2, 1fr); }
  .hero-actions .btn { flex: 1 1 auto; justify-content: center; }
  .demo { padding: 20px; }
  .content { padding: 24px 16px 80px; }
  .fd-icsizes { flex-wrap: wrap; gap: 18px; }
}

/* 접근성 — 움직임 최소화 설정 존중.
   모든 선언을 이겨야 하는 자리라 !important가 정당한 유일한 패턴입니다. */
/* stylelint-disable declaration-no-important */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}
/* stylelint-enable declaration-no-important */

/* 복사 실패 표시 — 사내 IP로 열면 브라우저가 클립보드를 막습니다 */
[data-tok].copy-failed { outline: 1px solid var(--danger); }

/* ── 코드 블록 복사 버튼 ──
   본문 안의 모든 <pre>에 붙습니다. 평소에는 옅게 두고 블록에 마우스가 오면 드러납니다 —
   읽는 동안 버튼이 글을 방해하지 않게. 키보드로 탭해서 오면 항상 보입니다. */
.code-box { position: relative; }
.code-copy {
  position: absolute; top: 8px; right: 8px;
  display: inline-flex; align-items: center; gap: 5px;
  height: 28px; padding: 0 10px;
  border: 1px solid var(--border); border-radius: var(--r-md);
  background: var(--surface); color: var(--gray-11);
  font-size: var(--text-2xs); font-family: var(--font); cursor: pointer;
  opacity: 0; transition: opacity .12s ease, color .12s ease, border-color .12s ease;
}
.code-box:hover .code-copy,
.code-copy:focus-visible { opacity: 1; }
.code-copy:hover { color: var(--gray-12); border-color: var(--border-hover); }
.code-copy:focus-visible { outline: none; box-shadow: var(--focus-ring); }

/* ── 복사 알림 토스트 ──
   화면 오른쪽 아래에 쌓입니다. 생김새는 디자인 시스템의 .toast 그대로입니다. */
.toast-host {
  position: fixed; right: 20px; bottom: 20px; z-index: 300;
  display: flex; flex-direction: column; gap: 8px; align-items: flex-end;
  pointer-events: none;
}
.toast-host .toast { pointer-events: auto; animation: toast-in .16s ease-out; }
@keyframes toast-in { from { opacity: 0; transform: translateY(6px); } }

/* ── 인수인계 — 세팅 프롬프트 상자 ──
   길어서 접히지 않으면 페이지를 다 차지합니다. 높이를 제한하고 안에서 스크롤합니다. */
.ho-prompt {
  border: 1px solid var(--border); border-radius: var(--r-xl);
  overflow: hidden; margin: 14px 0 18px; background: var(--surface);
}
.ho-prompt-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 14px; border-bottom: 1px solid var(--border);
  font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--gray-12);
}
.ho-prompt pre {
  margin: 0; border: 0; border-radius: 0;
  max-height: 380px; overflow: auto;
}

/* ── 라이브 플레이그라운드 ── */
.play-wrap {
  border: 1px solid var(--border);
  border-radius: var(--r-xl) var(--r-xl) 0 0;
  overflow: hidden; background: var(--gray-1);
}
.play-frame {
  display: block; width: 100%; height: 120px; border: 0;
  /* 트랜지션 없음 — 오버레이가 열릴 때 iframe이 즉시 늘어나야 잘림이 안 보입니다 */
}
/* 그룹형 데모 — variant 등 그룹마다 제목·설명 + 독립 미리보기 */
.demo-group { margin: 0 0 28px; }
.demo-group-title {
  font-size: var(--text-base); font-weight: var(--weight-semibold); color: var(--gray-12);
  margin: 0 0 4px;
}
.demo-group-desc { font-size: var(--text-sm); color: var(--gray-11); margin: 0 0 12px; }
.play-wrap--rounded { border-radius: var(--r-xl); }
/* 그룹형일 때 코드 블록은 데모에 붙지 않고 독립 카드로 */
.codewrap--solo { border-top: 1px solid var(--border); border-radius: var(--r-xl); margin-top: 4px; }

/* ══════════════════════════════════════
   토큰 견본 — 클릭하면 이름 복사
   ══════════════════════════════════════ */
/* 라이트 · 다크 칸 — 토큰 값은 foundation.js 가 ds.css 에서 읽어 .fd-light · .fd-dark 에 심습니다.
   칸이 자기 테마의 --card 면을 깔아야 "그 모드에서 어떻게 보이는지"가 됩니다 */
.fd-light, .fd-dark { background: var(--card); color: var(--foreground); }

.ctok-list { border: 1px solid var(--border); border-radius: var(--r-ct); overflow: hidden; margin-bottom: 18px; }
.ctok {
  display: grid; grid-template-columns: minmax(0, 1fr) 200px 200px;
  border-top: 1px solid var(--border);
}
/* .prose code 의 회색 알약을 걷습니다 — 칸 안에서는 이름 · 값이 글자일 뿐입니다 */
.prose .ctok code { background: none; border: 0; padding: 0; border-radius: 0; }
.ctok:first-child { border-top: 0; }
.ctok-head > span {
  padding: 8px 14px; font-size: var(--text-xs); font-weight: var(--weight-semibold); color: var(--muted-foreground);
}
.ctok-name {
  all: unset; box-sizing: border-box; cursor: pointer; min-width: 0;
  display: flex; flex-direction: column; justify-content: center; gap: 2px; padding: 10px 14px;
  font-family: var(--font);
}
.ctok-name code { font-family: var(--mono); font-size: var(--text-xs); color: var(--foreground); }
.ctok-name span { font-size: var(--text-xs); color: var(--muted-foreground); }
.ctok-name:hover code { color: var(--primary-text); }
.ctok-name:focus-visible { outline: none; box-shadow: inset var(--focus-ring); }
.ctok-name.copied code::after { content: ' 복사됨'; color: var(--primary-text); }
.ctok-sw { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-left: 1px solid var(--border); }
.ctok-sw code { font-family: var(--mono); font-size: var(--text-2xs); color: var(--muted-foreground); white-space: nowrap; }
.ctok-chip {
  width: 28px; height: 28px; flex-shrink: 0; border-radius: var(--r-el);
  box-shadow: inset 0 0 0 1px var(--gray-a3);
}
.ctok-line { box-shadow: none; border: 1px solid; background: transparent; }
.ctok-aa {
  width: 28px; height: 28px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center;
  font-size: var(--text-xs); font-weight: var(--weight-semibold);
}
.ctok-on { border-radius: var(--r-el); }

.ctok-strip {
  display: flex; align-items: flex-end; gap: 2px; padding: 12px 14px;
  border: 1px solid var(--border); border-radius: var(--r-ct); margin-bottom: 8px;
}
.ctok-strip:last-of-type { margin-bottom: 18px; }
.ctok-strip-l { width: 44px; flex-shrink: 0; align-self: center; font-size: var(--text-xs); color: var(--muted-foreground); }
.ctok-step {
  all: unset; box-sizing: border-box; cursor: pointer; flex: 1 1 0; min-width: 0;
  display: flex; flex-direction: column; gap: 5px; font-family: var(--font);
}
.ctok-step span { height: 36px; border-radius: var(--r-in); box-shadow: inset 0 0 0 1px var(--gray-a3); }
.ctok-step i { font-style: normal; font-family: var(--mono); font-size: var(--text-2xs); color: var(--muted-foreground); text-align: center; }
.ctok-step:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--r-in); }
.ctok-step.copied i { color: var(--primary-text); }

.ctok-demo { display: grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--border); border-radius: var(--r-ct); overflow: hidden; margin-bottom: 18px; }
.ctok-demo > div { display: flex; flex-wrap: wrap; gap: 8px; padding: 20px; }
.ctok-demo > div + div { border-left: 1px solid var(--border); }

@media (max-width: 640px) {
  .ctok { grid-template-columns: 1fr 1fr; }
  .ctok-name { grid-column: 1 / -1; padding-bottom: 4px; }
  .ctok-head > span:first-child { display: none; }
  .ctok-sw { border-left: 0; padding-top: 6px; min-width: 0; }
  .ctok-sw code { white-space: normal; word-break: break-all; }   /* 390 폭에서 반투명 값(rgba 21자)이 반 칸을 넘습니다 */
  .ctok-sw + .ctok-sw { border-left: 1px solid var(--border); }
  .ctok-head > span + span { border-left: 1px solid var(--border); }
  .ctok-head > span:nth-child(2) { border-left: 0; }
  .ctok-demo { grid-template-columns: 1fr; }
  .ctok-demo > div + div { border-left: 0; border-top: 1px solid var(--border); }
  .ctok-strip-l { display: none; }
}