/* 컴포넌트가 쓸 수 있는 이름의 허용 목록임 */
:root {
  /* 면 */
  --surface-page: var(--gray-50);
  --surface-raised: var(--gray-0);
  --surface-sunken: var(--gray-100);
  --surface-scrim: var(--alpha-45);
  --surface-attention: var(--gray-200);
  --surface-highlight: var(--gray-100);
  --surface-filtered: var(--alpha-6);
  --surface-filtered-title: var(--gray-200);

  /* 테두리 */
  --border-default: var(--gray-300);
  --border-strong: var(--gray-900);
  --border-muted: var(--gray-200);
  --border-resize: var(--gray-400);
  --border-danger: var(--red-600);

  /* 글자 */
  --text-default: var(--gray-900);
  --text-muted: var(--gray-500);
  --text-inverse: var(--gray-0);
  --text-danger: var(--red-600);

  /* 상태 태그 테두리. 스켈레톤은 다섯이 같은 무채색 */
  --status-pending: var(--gray-500);
  --status-signed: var(--gray-500);
  --status-rejected: var(--gray-500);
  --status-closed: var(--gray-500);
  --status-transferred: var(--gray-500);

  /* 초점 */
  --focus-ring: var(--gray-900);

  /* 안쪽 여백 */
  --space-inset-xs: var(--size-2);
  --space-inset-sm: var(--size-3);
  --space-inset-md: var(--size-5);

  /* 위아래 사이 */
  --space-stack-sm: var(--size-3);
  --space-stack-md: var(--size-5);

  /* 좌우 사이 */
  --space-inline-xs: var(--size-2);
  --space-inline-sm: var(--size-3);
  --space-inline-md: var(--size-5);

  /* 글자 역할 */
  --font-family: var(--font-family-base);
  --font-label: var(--font-size-2);
  --font-body: var(--font-size-3);
  --font-title: var(--font-size-5);
  --line-body: var(--line-base);
  --line-title: var(--line-tight);

  /* 쌓는 차례. 이 프로토타입의 계단은 한 칸뿐이고 그 위는 문서 차례가 정함 */
  --layer-raised: 1;

  /* 선과 각 */
  --border-width: var(--border-1);
  --radius: var(--radius-0);

  /* 보드에서 껍데기를 보는 칸의 높이 */
  --measure-board-shell: var(--size-11);

  /* 보드에서 부품 상태를 보는 칸의 최소 폭 */
  --measure-board-cell: var(--size-11);

  /* 보드 목차 폭 */
  --measure-board-nav: calc(var(--size-12) * 3);

  /* 보드 개요 카드의 최대 폭 */
  --measure-board-card: calc(var(--size-12) * 3.5);

  /* 보드에서 끌어보는 반응형 칸의 높이 */
  --measure-board-vp-free: calc(var(--size-12) * 5);

  /* 폰 상단 메뉴가 옆으로 밀릴 때 오른쪽 끝을 흐리는 폭 */
  --measure-topbar-fade: var(--size-8);

  /* 우측 액션 바 확장 폭 */
  --measure-rail-wide: calc(var(--size-12) * 2);

  /* 액션 바 작성 중 목록의 높이. 넘치면 목록 안에서 밀림 */
  --measure-rail-drafts: calc(var(--size-12) * 3);

  /* 폰에 떠 있는 액션 바 버튼의 한 변 */
  --measure-rail-float: var(--size-10);

  /* 떠 있는 버튼과 화면 가장자리 사이 */
  --measure-rail-float-gap: var(--size-5);

  /* 하단 작성창 폭 */
  --measure-floater: calc(var(--size-12) * 4.5);

  /* 최대화한 작성창의 최대 폭 */
  --measure-floater-max: calc(var(--size-12) * 12);

  /* 모달 폭 */
  --measure-dialog: calc(var(--size-12) * 4);

  /* 넓은 모달 폭(560px, 원문 520px 에 안쪽 여백만큼 더함). 몸통이 표처럼 넓은 내용을 가진 모달만
     씀(Dialog.js 의 wide, 1차 리뷰 Important 4). 까닭은 docs/layout/Dialog.md 의 wide 절에 적음 */
  --measure-dialog-wide: calc(var(--size-12) * 7);

  /* 바닥 시트 높이. 내용과 상관없이 늘 이 높이라 여닫을 때 키가 안 바뀜. 화면 높이에 매달아 기기마다 같은 몫을 차지함 */
  --measure-sheet: 45dvh;

  /* 필터 값 목록 높이 한도. 넘치면 목록 안에서 스크롤 */
  --measure-select-list: calc(var(--size-12) * 3);

  /* 파일 칸 미리보기 그림의 한 변. 확장자 표시도 같은 네모임 */
  --measure-file-thumb: var(--size-9);

  /* 폼 칸 값 상자의 최대 폭 이름 셋(Field 의 width). 안 적은 칸(full)은 값 칸을 다 써서 규칙이 없음.
     short 는 한 글자에서 대여섯 글자짜리 코드, medium 은 날짜와 짧은 이름, long 은 주소 한 줄임 */
  --measure-input-short: var(--size-12);
  --measure-input-medium: calc(var(--size-12) * 2);
  --measure-input-long: calc(var(--size-12) * 4);

  /* 두 칸 줄(라벨 칸 + 값 칸)에서 라벨 칸의 폭. 고정 폭이라 줄마다, 부품마다(Field 의 side 배치와
     DetailRows) 값 칸이 같은 x 에 섬 */
  --measure-field-label: calc(var(--size-12) * 1.5);

  /* 검색칸 찾는 열 버튼 최대 폭. 넘치는 이름은 말줄임 */
  --measure-search-pick: calc(var(--size-12) * 2);

  /* 검색칸 입력칸 폭. 안내 글(앞 둘과 외 N)이 들어가는 폭 */
  --measure-search-input: calc(var(--size-12) * 3);

  /* 표 열 처음 폭 이름 다섯. 안 적으면 md */
  --measure-column-xs: var(--size-9);
  --measure-column-sm: var(--size-12);
  --measure-column-md: calc(var(--size-12) * 1.5);
  --measure-column-lg: calc(var(--size-12) * 2);
  --measure-column-xl: calc(var(--size-12) * 3);

  /* 표 열을 끌어 줄여도 이 밑으로 안 감 */
  --measure-column-min: var(--size-9);

  /* 표가 자리에 밀려 줄어들 때의 바닥. 열 이름줄 한 줄만 남는 높이임. 값을 따로 안 고르고 이름줄을 짓는
     토큰에서 끌어내, 테마가 글자나 여백을 바꾸면 바닥도 따라감(셈은 docs/tokens/semantic.md) */
  --measure-table-floor: calc(max(var(--measure-hit-min), var(--font-label) * var(--line-body) + var(--space-inset-xs) * 2) + var(--border-width) * 3);

  /* 접은 적용중 칩 줄이 보이는 높이. 칩 두 줄과 그 사이 */
  --measure-chip-lines: calc((var(--font-label) * var(--line-body) + var(--space-inset-xs) * 2 + var(--border-width) * 2) * 2 + var(--space-inline-xs));

  /* 겹쳐 뜨는 스크롤 막대 두께. 가로로 미는 줄이 이만큼 밑을 비워 막대가 글자를 안 가림 */
  --measure-scrollbar: var(--size-4);

  /* 누르는 자리의 짧은 변 최소. 글자 모양 버튼도 이 밑으로 안 줄임 */
  --measure-hit-min: var(--size-7);

  /* 작은 기호 버튼(▸ ▾) 글자. 작은 삼각형 글자라 본문보다 크게 둬야 본문 글자만큼 보임 */
  --font-glyph: var(--font-size-6);
}