// 개발 전용 테스트 페이지 스타일.
//
// 이 파일 자체가 토큰 규율의 첫 소비처다 — 여기 있는 모든 값은 `fox.*()` 함수를 거치므로,
// 없는 토큰을 쓰면 빌드가 실패한다. 페이지가 그려진다는 것은 사용된 토큰이 전부 실재한다는
// 뜻이기도 하다.

@use "@fox/styles/abstracts" as fox;

.shell {
  display: grid;
  grid-template-columns: 1fr;
  min-block-size: 100vh;
  background: fox.color(background-default);
  color: fox.color(font-neutral-default);

  @include fox.pc {
    grid-template-columns: 26rem 1fr;
  }
}

.loading {
  padding: fox.padding(8);
  color: fox.color(font-neutral-subtle);
  font-size: fox.font-size(body-md);
}

// ── 사이드바 ────────────────────────────────────────────────────────────────
.sidebar {
  display: flex;
  flex-direction: column;
  gap: fox.gap(5);
  padding: fox.padding(7);
  border-block-end: fox.border(1) solid fox.color(border-neutral-subtle);
  background: fox.color(surface-neutral-gray);

  @include fox.pc {
    position: sticky;
    inset-block-start: 0;
    block-size: 100vh;
    overflow-y: auto;
    border-block-end: 0;
    border-inline-end: fox.border(1) solid fox.color(border-neutral-subtle);
  }
}

.brand {
  display: flex;
  flex-direction: column;
  gap: fox.gap(1);
}

.brandTitle {
  font-size: fox.font-size(heading-sm);
  font-weight: fox.font-weight(bold);
}

.brandNote {
  color: fox.color(font-neutral-subtler);
  font-size: fox.font-size(label-xsm);
}

.themeSwitch {
  display: flex;
  gap: fox.gap(1);
  padding: fox.padding(1);
  border: fox.border(1) solid fox.color(border-neutral-default);
  border-radius: fox.radius(max);
  background: fox.color(surface-neutral-default);
}

.themeButton {
  flex: 1;
  padding: fox.padding(3) fox.padding(4);
  border-radius: fox.radius(max);
  color: fox.color(font-neutral-subtle);
  font-size: fox.font-size(label-xsm);
  font-weight: fox.font-weight(medium);

  &[aria-pressed="true"] {
    background: fox.color(button-primary-surface);
    color: fox.color(button-primary-font);
  }

  &:focus-visible {
    outline: fox.border(2) solid fox.color(border-theme-primary);
    outline-offset: fox.border(2);
  }
}

.nav {
  display: flex;
  flex-direction: column;
  gap: fox.gap(6);
}

.navGroup {
  display: flex;
  flex-direction: column;
  gap: fox.gap(2);
}

.navGroupTitle {
  padding-inline: fox.padding(3);
  color: fox.color(font-neutral-subtler);
  font-size: fox.font-size(label-xsm);
  font-weight: fox.font-weight(bold);
  letter-spacing: 0.04em;
}

// Mode / Responsive 처럼 하위 항목을 묶는 분류.
.navSubGroup {
  display: flex;
  flex-direction: column;
  gap: fox.gap(1);
  margin-block-start: fox.gap(2);
}

.navSubTitle {
  padding-inline: fox.padding(3);
  color: fox.color(font-neutral-subtler);
  font-size: fox.font-size(label-xsm);
  font-weight: fox.font-weight(medium);
  opacity: 0.8;
}

.navList {
  display: flex;
  flex-direction: column;
  gap: fox.gap(1);
  margin: 0;
  padding: 0;
  list-style: none;
}

.navItem {
  display: flex;
  inline-size: 100%;
  align-items: center;
  justify-content: space-between;
  gap: fox.gap(3);
  padding: fox.padding(3) fox.padding(4);
  border-radius: fox.radius(3);
  color: fox.color(font-neutral-subtle);
  font-size: fox.font-size(label-sm);
  text-align: start;

  &:hover {
    background: fox.color(button-default-surface-hover);
    color: fox.color(font-neutral-default);
  }

  &[aria-current="page"] {
    background: fox.color(button-primary-surface);
    color: fox.color(button-primary-font);
  }

  &:focus-visible {
    outline: fox.border(2) solid fox.color(border-theme-primary);
    outline-offset: fox.border(1);
  }
}

.navCount {
  color: currentcolor;
  font-size: fox.font-size(label-xsm);
  opacity: 0.7;
}

// "추가 방법"은 컴포넌트가 아니라 안내다. 목록 맨 아래에 두고 점선 테두리로 구분해,
// 등록된 컴포넌트 탭과 같은 층위로 읽히지 않게 한다.
// `.navItem` 뒤에 와야 선택 상태(aria-current)를 덮어쓴다 — 특이도가 같아 순서가 정한다.
.navItemGuide {
  margin-block-start: fox.gap(2);
  border: fox.border(1) dashed fox.color(border-neutral-strong);
  background: none;
  color: fox.color(font-neutral-subtler);

  &:hover {
    border-color: fox.color(border-theme-primary);
    background: none;
    color: fox.color(font-theme-primary);
  }

  &[aria-current="page"] {
    border-style: solid;
    border-color: fox.color(border-theme-primary);
    background: none;
    color: fox.color(font-theme-primary);
  }
}

.navGuideMark {
  font-size: fox.font-size(label-lg);
  line-height: 1;
}

// ── 본문 ────────────────────────────────────────────────────────────────────
.content {
  min-inline-size: 0;
  padding: fox.spacing(top-md) fox.padding(7) fox.spacing(bottom-xlg);

  @include fox.pc {
    padding: fox.spacing(top-lg) fox.padding(11) fox.spacing(bottom-xlg);
  }
}

.section {
  display: flex;
  flex-direction: column;
}

.sectionTitle {
  font-size: fox.font-size(heading-md);
  font-weight: fox.font-weight(bold);
}

.sectionNote {
  margin-block: fox.gap(2) fox.gap(6);
  color: fox.color(font-neutral-subtle);
  font-size: fox.font-size(body-sm);
}

.code {
  overflow-x: auto;
  margin-block-start: fox.gap(4);
  padding: fox.padding(6);
  border: fox.border(1) solid fox.color(border-neutral-subtle);
  border-radius: fox.radius(3);
  background: fox.color(surface-neutral-gray);
  color: fox.color(font-neutral-default);
  font-size: fox.font-size(body-sm);
}

// ── 색상 칩 ─────────────────────────────────────────────────────────────────
// 값 앞에 붙는 16px 정사각형. 16px는 `icon-3`(1.6rem)과 같은 값이라 리터럴 대신
// 토큰을 쓴다.
// 테두리는 box-shadow로 그린다 — border는 칩 안쪽을 먹어 색이 보이는 면적을 줄인다.
.colorChip {
  display: inline-block;
  inline-size: fox.icon(3);
  block-size: fox.icon(3);
  margin-inline-end: fox.gap(3);
  box-shadow: 0 0 0 fox.border(1) #{fox.color(border-neutral-overlay)};
  vertical-align: middle;
}

.tokenName {
  display: block;
  color: fox.color(font-neutral-default);
  font-size: fox.font-size(label-sm);
  font-weight: fox.font-weight(medium);
  word-break: break-all;
}


// 다른 토큰을 가리키는 값. 실제 값과 구분되어야 "이게 참조구나"가 한눈에 보인다.
.aliasRef {
  color: fox.color(font-theme-primary);
}


// 서체 토큰 미리보기 문장.
.demoType {
  margin: 0;
  color: fox.color(font-neutral-default);
  white-space: nowrap;
}

// ── 값 테이블 ───────────────────────────────────────────────────────────────
.table {
  inline-size: 100%;
  border-collapse: collapse;
  text-align: start;
}

.table th,
.table td {
  padding: fox.padding(3) fox.padding(5);
  border-block-end: fox.border(1) solid fox.color(border-neutral-subtle);
}

.table th {
  color: fox.color(font-neutral-subtler);
  font-size: fox.font-size(label-xsm);
  font-weight: fox.font-weight(medium);
}

.table td {
  color: fox.color(font-neutral-default);
  font-size: fox.font-size(body-sm);
}

.tdValue {
  color: fox.color(font-neutral-subtle);
}

// 미리보기 칸은 내용만큼만 차지하게 두어 토큰/값 열이 밀리지 않게 한다.
.tdDemo {
  inline-size: 1%;
  white-space: nowrap;
}

// ── 패딩 · 간격 미리보기 ────────────────────────────────────────────────────
// 점선 테두리와 옅은 바탕이 "토큰이 만든 공간"이고, 흰 칩이 문단이다.
.demoPadBox,
.demoGapBox {
  border: fox.border(1) dashed fox.color(border-theme-primary);
  background: fox.color(surface-theme-primary);
}

.demoPadBox {
  display: inline-block;
}

.demoGapBox {
  display: inline-flex;
  align-items: center;
}

.demoText {
  margin: 0;
  padding: fox.padding(1) fox.padding(3);
  background: fox.color(surface-neutral-default);
  color: fox.color(font-neutral-default);
  font-size: fox.font-size(label-xsm);
  white-space: nowrap;
}

// ── 모서리 반경 · 테두리 두께 미리보기 ──────────────────────────────────────
.demoRadius,
.demoBorder {
  inline-size: fox.icon(7);
  block-size: fox.icon(7);
  border-color: fox.color(border-theme-primary);
  border-style: solid;
  background: fox.color(surface-neutral-gray);
}

.demoRadius {
  border-width: fox.border(2);
}

// ── 아이콘 크기 미리보기 ────────────────────────────────────────────────────
// 브라우저 기본 체크박스를 토큰 크기로 키운다 — 별도 에셋 없이 크기만 비교한다.
.demoIcon {
  display: block;
  margin: 0;
  accent-color: fox.color(surface-theme-primary);
}

// ── 그림자 미리보기 ─────────────────────────────────────────────────────────
// 그림자 색은 Figma에 토큰이 없어 중립 알파 토큰을 데모용으로 쓴다.
// 인라인 style이 참조할 수 있도록 여기서 커스텀 프로퍼티로 내려둔다.
.demoShadow {
  --demo-shadow-color: #{fox.color(alpha-default-inverse25)};

  inline-size: fox.icon(7);
  block-size: fox.icon(6);
  border-radius: fox.radius(2);
  background: fox.color(surface-neutral-default);
}

// ── 배경 흐림 미리보기 ──────────────────────────────────────────────────────
// 캔버스 크기는 디자인 값이 아니라 데모용 지면이라 토큰을 두지 않는다.
.demoBackdrop {
  position: relative;
  overflow: hidden;
  inline-size: 20rem;
  block-size: 12rem;
  border-radius: fox.radius(2);
}

.demoBackdropImage {
  display: block;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}

.demoBackdropOverlay {
  position: absolute;
  inset-block: 0;
  inset-inline-end: 0;
  inline-size: 50%;
  border-inline-start: fox.border(1) solid fox.color(border-neutral-overlay);
}

// ── 컴포넌트 예제 ───────────────────────────────────────────────────────────
.variantList {
  display: flex;
  flex-direction: column;
  gap: fox.gap(5);
}

.variant {
  display: flex;
  flex-direction: column;
  gap: fox.gap(2);
}

.variantLabel {
  color: fox.color(font-neutral-subtler);
  font-size: fox.font-size(label-xsm);
  font-weight: fox.font-weight(medium);
}

// 예제를 얹는 무대. 컴포넌트 자체의 배경·여백과 섞이지 않도록 중립 표면 위에 올린다.
.variantStage {
  display: flex;
  flex-wrap: wrap;
  gap: fox.gap(4);
  align-items: center;
  padding: fox.padding(7);
  border: fox.border(1) solid fox.color(border-neutral-subtle);
  border-radius: fox.radius(3);
  background: fox.color(surface-neutral-default);
}

// 그룹 예제용. 그룹이 블록 레벨이라 정렬·줄바꿈을 보려면 폭이 정해진 무대가 필요하다.
//
// ⚠️ 세로 flex의 기본 `align-items: stretch`가 자식을 가로로 늘린다. 인라인 컨트롤
// (`inline-flex`·`inline-block`인 것들)을 여러 줄로 쌓아 비교할 때는 아래 `demoStackStart`를
// 쓴다 — 이걸 쓰면 컴포넌트가 제 폭을 잃어 실제 모습과 다르게 보인다.
.demoStack {
  display: flex;
  flex-direction: column;
  gap: fox.gap(4);
  inline-size: 100%;
}

// 인라인 컨트롤을 세로로 쌓아 비교할 때. 자식이 늘어나지 않아 제 폭 그대로 보인다.
.demoStackStart {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: fox.gap(4);
}

.demoOutline {
  padding: fox.padding(3);
  border: fox.border(1) dashed fox.color(border-neutral-subtle);
  border-radius: fox.radius(2);
  inline-size: 100%;
}

// 폼 컨트롤 예제용. FoxSelect는 폭을 부모가 정하므로 무대가 폭을 줘야 크기 비교가 된다.
// 칸 너비는 디자인 값이 아니라 데모용 지면이라 토큰을 두지 않는다.
.demoFields {
  display: flex;
  flex-wrap: wrap;
  gap: fox.gap(5);
  align-items: start;
  inline-size: 100%;

  > * {
    inline-size: 28rem;
    max-inline-size: 100%;
  }
}

// 옵션 목록 단독 예제용. 목록이 `position: absolute`라 위치 기준이 필요하고, 자기 높이를
// 차지하지 않으므로 아래쪽 여백으로 펼쳐질 자리를 만들어 준다. 높이 0이면 목록이 무대
// 맨 위에서 시작한다. 치수는 데모용 지면이라 토큰을 두지 않는다.
.demoListboxStage {
  position: relative;
  inline-size: 28rem;
  max-inline-size: 100%;
  block-size: 0;
  margin-block-end: 22rem;
}

// wrap 예제는 자식이 확실히 넘치도록 좁아야 한다.
.demoNarrow {
  padding: fox.padding(3);
  border: fox.border(1) dashed fox.color(border-neutral-subtle);
  border-radius: fox.radius(2);
  inline-size: 20rem;
  max-inline-size: 100%;
}

// 입력 예제용. 시안 폭(360px)에 맞춰야 실제 비율로 보인다.
.demoField {
  inline-size: 36rem;
  max-inline-size: 100%;
}

// 이메일은 세 칸이라 360px에서는 계속 줄이 넘어간다. 넓게 볼 무대를 따로 둔다.
.demoFieldWide {
  inline-size: 80rem;
  max-inline-size: 100%;
}

// 캐러셀 조각은 흰 알약이라 흰 바탕에서는 보이지 않는다 — 시안처럼 어두운 판 위에 올린다.
.carouselStage {
  display: flex;
  flex-wrap: wrap;
  gap: fox.gap(5);
  align-items: center;
  padding: fox.padding(6);
  border-radius: fox.radius(3);
  background: fox.color(surface-neutral-gray-stronger);
}

// 조합을 한 줄에 늘어놓고 비교할 때. 좁아지면 줄이 넘어간다.
.demoRow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: fox.gap(3);
}

// 정렬 가능한 머리칸 — 글자 옆에 위아래 화살표가 붙는다.
.tableSortHead {
  display: inline-flex;
  align-items: center;
  gap: fox.gap(2);
  white-space: nowrap;

  > svg {
    inline-size: fox.icon(3);
    block-size: fox.icon(3);
    color: fox.color(icon-neutral-default);
  }
}