/* 문서 사이트 전용 레이아웃/크롬 CSS. 실제 컴포넌트 시각 스타일은 main.css(컴파일된 디자인시스템)가
   담당하고, 여기서는 사이드바 배치·페이지 헤더·카드·그리드 같은 문서 UI만 다룬다.
   모든 서브페이지(docs/tokens/*, docs/components/*)와 루트 index.html이 공유한다. */

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  /* font-family는 main.css의 reset(body 셀렉터)이 이미 선언 + 상속되므로 여기서 다시 안 씀 */
  background-color: var(--bds-surface-subtle);
  color: var(--bds-text-primary);
  display: flex;
  min-height: 100vh;
}

/* ---------- Sidebar — Figma "Sidebar navigation" 샘플(node 1240:11809) 구조.
   시각 스타일(라운드·색·간격)은 컴포넌트 CSS(.bds-side-nav-item, .bds-input, .bds-logo)가 담당하고
   여기서는 레이아웃(배치·패딩·스크롤)만 잡는다. ---------- */
.doc-sidebar {
  position: fixed;
  top: 0;
  left: 0;
  width: 312px;
  height: 100vh;
  overflow-y: auto;
  background-color: var(--bds-surface-default);
  border-right: 1px solid var(--bds-border-default);
  display: flex;
  flex-direction: column;
}
.doc-sidebar__header {
  padding: 32px 20px 20px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.doc-sidebar__search {
  padding: 0 24px 24px;
}
.doc-sidebar__nav {
  display: flex;
  flex-direction: column;
  padding: 0 16px;
  flex: 1;
}
.doc-nav-group + .doc-nav-group {
  margin-top: 16px;
}
.doc-sidebar__nav .bds-side-nav-item {
  text-decoration: none;
  cursor: pointer;
}
.doc-sidebar__nav .bds-side-nav-item + .bds-side-nav-item {
  margin-top: 2px;
}

/* ---------- 그룹 드롭다운(아코디언) — 화살표만 펼치기/접기를 토글하고
   헤더의 side-nav-item 링크는 그대로 이동한다. 높이 애니메이션은 grid-template-rows
   0fr/1fr 트릭을 써서 콘텐츠 높이를 JS로 재는 과정 없이 슬라이드된다. ---------- */
.doc-nav-group__header {
  display: flex;
  align-items: center;
}
.doc-nav-group__header .bds-side-nav-item {
  flex: 1;
  min-width: 0;
}
.doc-nav-group__toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  background: none;
  border: none;
  padding: 0;
  color: inherit;
  cursor: pointer;
}
.doc-nav-group__chevron {
  transition: transform 0.2s ease;
}
.doc-nav-group.is-open .doc-nav-group__chevron {
  transform: rotate(90deg);
}
.doc-nav-group__children {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.2s ease;
}
.doc-nav-group__children-inner {
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.doc-nav-group.is-open .doc-nav-group__children {
  grid-template-rows: 1fr;
}
.doc-sidebar__footer {
  padding: 16px;
  border-top: 1px solid var(--bds-border-default);
}
.doc-sidebar__footer .bds-side-nav-item {
  text-decoration: none;
}
.doc-search-hidden {
  display: none !important;
}

/* ---------- Main ---------- */
.doc-main {
  margin-left: 312px;
  flex: 1;
  min-width: 0;
  padding: 40px 48px 120px;
  max-width: 1200px;
}
.doc-page-header {
  margin-bottom: 32px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--bds-border-default);
}
.doc-page-header h1 {
  margin: 0 0 8px;
  font-size: 30px;
  font-weight: 700;
}
.doc-page-header p {
  margin: 0;
  font-size: 15px;
  color: var(--bds-text-tertiary);
}
.doc-breadcrumb {
  margin: 0 0 12px;
  font-size: 13px;
  color: var(--bds-text-tertiary);
}
.doc-breadcrumb a {
  color: var(--bds-text-tertiary);
  text-decoration: none;
}
.doc-breadcrumb a:hover {
  color: var(--bds-blue-600);
}

.doc-section {
  margin-bottom: 56px;
  scroll-margin-top: 24px;
}
.doc-section h2 {
  font-size: 18px;
  font-weight: 700;
  margin: 0 0 4px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--bds-border-default);
}
.doc-section > p.doc-desc {
  margin: 12px 0 20px;
  font-size: 13px;
  color: var(--bds-text-tertiary);
}
.doc-subhead {
  font-size: 12px;
  font-weight: 700;
  color: var(--bds-text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin: 24px 0 10px;
}
.doc-subhead:first-child {
  margin-top: 0;
}

.doc-card {
  background: var(--bds-surface-default);
  border: 1px solid var(--bds-border-default);
  border-radius: 12px;
  padding: 24px;
}
.doc-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
}
.doc-col {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.doc-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 16px;
}
.doc-swatch {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.doc-swatch__chip {
  height: 56px;
  border-radius: 8px;
  border: 1px solid var(--bds-border-default);
}
.doc-swatch__label {
  font-size: 12px;
  color: var(--bds-text-tertiary);
  font-family: 'SFMono-Regular', Consolas, monospace;
}
.doc-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--bds-text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 6px;
}

/* 변형 매트릭스 그리드 — 컴포넌트 페이지의 "모든 변형" 나열에 공용으로 쓴다.
   각 셀은 캡션(.doc-cell__caption) + 실제 컴포넌트 인스턴스로 구성. */
.doc-matrix {
  display: grid;
  gap: 20px;
  /* 열 수는 페이지가 --doc-cols 로 정한다. auto-fill 로 두면 창 폭에 따라 열이 흔들려
     행이 의미를 잃는다 — 축이 있는 나열에서 사람이 비교를 못 한다. 안 주면 종전대로 동작한다. */
  grid-template-columns: repeat(var(--doc-cols, auto-fill), minmax(var(--doc-cell-min, 160px), 1fr));
}
.doc-matrix-wide {
  --doc-cell-min: 240px;
}
.doc-cell {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  padding: 16px;
  background: var(--bds-surface-subtle);
  border-radius: 8px;
}
.doc-cell__caption {
  font-size: 11px;
  font-family: 'SFMono-Regular', Consolas, monospace;
  color: var(--bds-text-tertiary);
}
.doc-scroll-x {
  overflow-x: auto;
  padding-bottom: 4px;
}

/* ---------- 두 축짜리 나열(변형 × 사이즈)은 매트릭스가 아니라 표로 그린다.
   행 머리에 변형이 한 번, 열 머리에 사이즈가 한 번 나오면 되므로 셀마다 클래스명을
   반복하지 않는다. 좁은 화면을 위해 .doc-scroll-x 로 감싸 쓴다. ---------- */
.doc-table {
  border-collapse: collapse;
  width: 100%;
}
.doc-table th,
.doc-table td {
  text-align: left;
  padding: 8px 16px;
  vertical-align: top;
}
.doc-table thead th {
  font-size: 12px;
  font-weight: 600;
  color: var(--bds-text-tertiary);
}
.doc-table tbody th {
  padding-left: 0;
  font-size: 11px;
  font-weight: 400;
  font-family: 'SFMono-Regular', Consolas, monospace;
  white-space: nowrap;
  color: var(--bds-text-tertiary);
}

/* 칸 안에 라벨·필드·힌트가 다 든 폼 계열은 내용 길이로 폭이 정해지면 표가 화면을 넘긴다.
   표 폭에서 칸 폭이 나오게 뒤집는다 — 힌트 문구는 두 줄로 접히지만 열은 화면 안에 들어온다. */
.doc-table-fixed {
  table-layout: fixed;
  width: 100%;
}
.doc-table-fixed thead th:first-child {
  width: 140px;
}

/* ---------- 사용법 블록 — 코드 예시·주석·키 목록. 색은 디자인시스템 토큰을 그대로 참조하므로
   라이트/다크 모드를 따라간다. ---------- */
.doc-code {
  margin: 0 0 12px;
  padding: 16px;
  background: var(--bds-surface-subtle);
  border: 1px solid var(--bds-border-default);
  border-radius: 8px;
  overflow-x: auto;
  font-family: 'SFMono-Regular', Consolas, monospace;
  font-size: 12px;
  line-height: 1.7;
  color: var(--bds-text-primary);
}
.doc-note {
  margin: 0;
  font-size: 13px;
  line-height: 1.6;
  color: var(--bds-text-tertiary);
}
/* 키 이름 나열 — 읽기용 칩이다. code 전체에 스타일을 주면 다른 페이지의 본문 인라인 코드까지
   바뀌므로 이 컨테이너 안으로 한정한다. */
.doc-keys {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.doc-keys code {
  padding: 3px 8px;
  background: var(--bds-surface-subtle);
  border: 1px solid var(--bds-border-default);
  border-radius: 6px;
  font-family: 'SFMono-Regular', Consolas, monospace;
  font-size: 12px;
  color: var(--bds-text-secondary);
}

/* 스프라이트 아이콘은 path에 fill이 이미 박혀 있는 solid 아이콘이다(stroke 기반 아님).
   부모(.bds-icon)에 stroke를 얹으면 path 자체엔 stroke 지정이 없어 그대로 상속돼 버려서
   채워진 도형 위에 불필요한 2px 윤곽선이 겹쳐 보이는 버그가 있었다 — 사이즈만 지정한다. */
.bds-icon { width: 20px; height: 20px; }
.icon-sm { width: 16px; height: 16px; }

/* 문서 사이트 왼쪽 하위 메뉴는 이 컴포넌트를 그대로 쓰지만 선택 배경은 깔지 않는다.
   목차의 현재 위치 표시일 뿐이라 글자색만으로 충분하다 — 컴포넌트 규칙이 아니라 이 사이트의 표시 방식이다. */
.doc-nav-group__children .bds-side-nav-item-selected { background: transparent; }