이 페이지는 theme-vars.css의 전체 구조를 훑는 카탈로그다.
여기서의 목표는 값 자체를 외우는 것이 아니라, 값이 내려가는 경로를 확인하는 것이다.

빠른 확인 기준

  • 00-foundation.css : 화면 폭과 간격
  • 10-typography.css : 서체와 언어
  • 20-shape.css : 반경과 그림자
  • 30-components.css : 버튼, 카드, 칩, 아카이브, 페이지 허브
  • 40-colors-light.css / 50-colors-dark.css : 색상 모드
  • 60-language.css : 한국어 우선 글꼴 정책
  • 70-global.css : 선택색, 표면, 테마 상태

실제로 화면에서 보는 지점

  • 본문 폭, 헤더 높이, 콘텐츠 간격
  • 제목 계층, 본문 줄간격, 코드 방향성
  • 카드 반경, 버튼 border, shadow 단계
  • 아카이브 카드, 페이지 허브 카드, CTA 상태
  • 라이트 / 다크 색상 대비
확인 방식
변수명 → 실제 화면
문자열만 읽지 말고 렌더링으로 확인
중앙 소스
themes/(0000-0000-0000-0001)/assets/css/core/theme-vars/
변수 추가·수정은 이 계층에서부터 시작
판정 기준
카드·CTA·표·코드
표현이 아니라 체계가 맞는지 본다

모듈별 변수 목록

00-foundation.css · 레이아웃 / 폭 / 간격의 기준

화면 폭과 컨테이너 밀도는 여기서 시작한다.

- `--breakpoint-lg`
- `--breakpoint-md`
- `--breakpoint-sm`
- `--breakpoint-xl`
- `--content-gap`
- `--content-max-width`
- `--cover-responsive-breakpoint-md`
- `--cover-responsive-width-md`
- `--footer-height`
- `--gap`
- `--gap-mobile`
- `--header-height`
- `--main-width`
- `--nav-max-width`
- `--nav-width`
- `--page-max-width`
- `--page-padding`
- `--page-padding-mobile`
- `--space-2xl`
- `--space-2xs`
- `--space-3xl`
- `--space-lg`
- `--space-md`
- `--space-sm`
- `--space-xl`
- `--space-xs`

}

10-typography.css · 서체 / 크기 / 방향성 / 언어

문자 방향과 글꼴 계열이 언어별로 바뀌는 구간이다.

- `--accent`
- `--archive-entry-title-font-weight`
- `--archive-entry-title-line-height`
- `--button-font-weight`
- `--chip-font-weight`
- `--code-token-strong-font-weight`
- `--copy-code-font-weight`
- `--direction-code`
- `--direction-page`
- `--font-body`
- `--font-display`
- `--font-display-latin`
- `--font-emoji`
- `--font-feature-settings`
- `--font-feature-settings-cjk`
- `--font-feature-settings-rtl`
- `--font-heading`
- `--font-mono`
- `--font-mono-cjk`
- `--font-mono-latin`
- `--font-sans`
- `--font-sans-arabic`
- `--font-sans-bengali`
- `--font-sans-chinese-simplified`
- `--font-sans-chinese-traditional`
- `--font-sans-cjk`
- `--font-sans-cyrillic`
- `--font-sans-devanagari`
- `--font-sans-east-asia`
- `--font-sans-greek`
- `--font-sans-hebrew`
- `--font-sans-japanese`
- `--font-sans-korean`
- `--font-sans-latin`
- `--font-sans-latin-europe`
- `--font-sans-rtl`
- `--font-sans-southasia`
- `--font-sans-southeastasia`
- `--font-sans-thai`
- `--font-sans-ui`
- `--font-sans-vietnamese`
- `--font-script-cjk`
- `--font-script-cyrillic`
- `--font-script-greek`
- `--font-script-indic`
- `--font-script-latin`
- `--font-script-rtl`
- `--font-script-southeastasia`
- `--font-script-thai`
- `--font-serif-latin`
- `--font-serif-latin-europe`
- `--font-size-2xl`
- `--font-size-3xl`
- `--font-size-4xl`
- `--font-size-5xl`
- `--font-size-base`
- `--font-size-lg`
- `--font-size-md`
- `--font-size-sm`
- `--font-size-xl`
- `--font-size-xs`
- `--font-synthesis`
- `--font-ui`
- `--font-weight-black`
- `--font-weight-bold`
- `--font-weight-medium`
- `--font-weight-regular`
- `--font-weight-semibold`
- `--heading-1-size`
- `--heading-1-size-mobile`
- `--heading-2-size`
- `--heading-2-size-mobile`
- `--heading-3-size`
- `--heading-3-size-mobile`
- `--heading-4-size`
- `--heading-4-size-mobile`
- `--heading-5-size`
- `--heading-5-size-mobile`
- `--heading-6-size`
- `--heading-6-size-mobile`
- `--heading-anchor-font-weight`
- `--heading-font-weight`
- `--heading-letter-spacing`
- `--heading-line-height`
- `--hyphens-body`
- `--letter-spacing-normal`
- `--line-break-body`
- `--line-height-base`
- `--line-height-relaxed`
- `--line-height-small`
- `--line-height-tight`
- `--line-height-ui`
- `--nav-link-active-font-weight`
- `--nav-link-font-weight`
- `--nav-logo-font-weight`
- `--not-found-font-weight`
- `--overflow-wrap-body`
- `--page-header-font-weight`
- `--page-title-letter-spacing`
- `--page-title-line-height`
- `--page-title-size`
- `--page-title-size-mobile`
- `--paginav-hover-shadow`
- `--post-content-dl-term-font-weight`
- `--post-content-figure-caption-body-font-weight`
- `--post-content-figure-caption-font-weight`
- `--search-input-font-weight`
- `--search-result-font-weight`
- `--text-rendering`
- `--toc-details-font-weight`
- `--unicode-bidi-page`
- `--word-break-body`
- `--word-break-code`
- `--word-break-menu`
- `--word-break-table`

}

20-shape.css · 반경 / 그림자 / 전환 / 상호작용 크기

모서리, 그림자, 전환 속도는 모든 컴포넌트가 같이 읽는다.

- `--autofill-shadow-spread`
- `--border-width-strong`
- `--border-width-thin`
- `--control-gap`
- `--control-icon-size`
- `--control-padding-x`
- `--control-padding-y`
- `--control-press-scale`
- `--control-size-lg`
- `--control-size-md`
- `--control-size-sm`
- `--focus-outline-offset`
- `--focus-outline-width`
- `--footer-height`
- `--gap`
- `--header-height`
- `--interactive-transition`
- `--page-min-height`
- `--profile-page-min-height`
- `--radius`
- `--radius-full`
- `--radius-lg`
- `--radius-md`
- `--radius-sm`
- `--radius-xl`
- `--radius-xs`
- `--shadow-lg`
- `--shadow-md`
- `--shadow-sm`
- `--transition-base`
- `--transition-fast`
- `--transition-slow`
- `--viewport-full-height`
- `--z-index-floating`
- `--z-index-overlay`

}

30-components.css · 카드 / 버튼 / 칩 / 내비게이션 / 페이지 허브

실제 컴포넌트의 배경·테두리·간격·상태값이 묶여 있다.

- `--accent`
- `--accent-contrast`
- `--accent-muted`
- `--archive-entry-background`
- `--archive-entry-border`
- `--archive-entry-border-color`
- `--archive-entry-border-hover-color`
- `--archive-entry-border-width`
- `--archive-entry-hover-transform`
- `--archive-entry-link-hover-background`
- `--archive-entry-radius`
- `--archive-entry-shadow`
- `--archive-entry-shadow-hover`
- `--archive-month-header-width`
- `--avatar-radius`
- `--border`
- `--border-strong`
- `--border-width-thin`
- `--breadcrumbs-gap`
- `--breadcrumbs-icon-size`
- `--breadcrumbs-inline-margin`
- `--button-border-color`
- `--button-border-width`
- `--button-primary-bg`
- `--button-primary-fg`
- `--button-radius`
- `--button-secondary-bg`
- `--button-secondary-border-color`
- `--button-secondary-fg`
- `--button-secondary-shadow`
- `--card-bg`
- `--card-border`
- `--card-border-color`
- `--card-border-width`
- `--card-radius`
- `--chip-gap`
- `--chip-line-height`
- `--chip-padding-x`
- `--chip-padding-y`
- `--chip-radius`
- `--code-line-number-gap`
- `--code-line-number-gutter-padding-start`
- `--code-line-number-inline-padding`
- `--code-line-number-padding-block`
- `--code-line-number-padding-inline`
- `--content`
- `--content-inline-size`
- `--content-max-width`
- `--content-measure-narrow`
- `--content-measure-wide`
- `--control-gap`
- `--control-icon-size`
- `--control-padding-x`
- `--control-padding-y`
- `--control-radius`
- `--control-size-md`
- `--control-size-sm`
- `--copy-code-line-height`
- `--copy-code-offset`
- `--cta-block-max-width`
- `--cta-border-color`
- `--cta-border-width`
- `--cta-focus-ring`
- `--cta-frame-gap`
- `--cta-gap`
- `--cta-inline-max-width`
- `--cta-link-active-transform`
- `--cta-link-background`
- `--cta-link-background-image`
- `--cta-link-badge-background`
- `--cta-link-badge-font-size`
- `--cta-link-badge-foreground`
- `--cta-link-badge-padding-x`
- `--cta-link-badge-radius`
- `--cta-link-body-color`
- `--cta-link-body-font-size`
- `--cta-link-border-color`
- `--cta-link-border-width`
- `--cta-link-default-transition`
- `--cta-link-disabled-opacity`
- `--cta-link-font-family`
- `--cta-link-foreground`
- `--cta-link-gap`
- `--cta-link-hover-border-color`
- `--cta-link-hover-transform`
- `--cta-link-icon-color`
- `--cta-link-icon-opacity`
- `--cta-link-icon-size`
- `--cta-link-label-font-weight`
- `--cta-link-label-font-weight-primary`
- `--cta-link-label-font-weight-secondary`
- `--cta-link-label-font-weight-tertiary`
- `--cta-link-label-font-weight-utility`
- `--cta-link-letter-spacing`
- `--cta-link-min-height`
- `--cta-link-note-color`
- `--cta-link-padding-x`
- `--cta-link-padding-y`
- `--cta-link-primary-background`
- `--cta-link-primary-background-image`
- `--cta-link-primary-background-image-hover`
- `--cta-link-primary-border-color`
- `--cta-link-primary-foreground`
- `--cta-link-primary-shadow`
- `--cta-link-radius`
- `--cta-link-secondary-background`
- `--cta-link-secondary-background-image`
- `--cta-link-secondary-border-color`
- `--cta-link-secondary-foreground`
- `--cta-link-secondary-shadow`
- `--cta-link-shadow`
- `--cta-link-shadow-hover`
- `--cta-link-subtitle-color`
- `--cta-link-tertiary-background`
- `--cta-link-tertiary-background-image`
- `--cta-link-tertiary-border-color`
- `--cta-link-tertiary-foreground`
- `--cta-link-tertiary-shadow`
- `--cta-link-utility-background`
- `--cta-link-utility-border-color`
- `--cta-link-utility-min-height`
- `--cta-link-utility-padding-x`
- `--cta-link-utility-padding-y`
- `--cta-link-utility-radius`
- `--cta-link-utility-shadow`
- `--cta-min-height`
- `--cta-note-font-size`
- `--cta-padding-x`
- `--cta-padding-y`
- `--cta-primary-bg`
- `--cta-primary-fg`
- `--cta-radius`
- `--cta-secondary-bg`
- `--cta-secondary-fg`
- `--cta-shadow`
- `--cta-shadow-hover`
- `--cta-subtitle-font-size`
- `--cta-support-border`
- `--cta-support-border-color`
- `--cta-support-border-width`
- `--cta-support-gap`
- `--cta-support-padding-block-start`
- `--entry-content-gap`
- `--entry-cover-gap`
- `--entry-link-visually-hidden-offset`
- `--first-entry-min-height`
- `--first-entry-min-height-mobile`
- `--floating-action-offset-block`
- `--floating-action-offset-inline`
- `--font-size-2xl`
- `--font-size-base`
- `--font-size-sm`
- `--font-size-xl`
- `--font-size-xs`
- `--font-ui`
- `--font-weight-medium`
- `--font-weight-semibold`
- `--footer-floating-transition`
- `--footer-icon-shadow`
- `--footer-inline-gap`
- `--footer-line-height`
- `--footer-link-border-width`
- `--footer-mobile-content-gap`
- `--gradient-surface`
- `--header-active-border-width`
- `--header-control-inline-margin`
- `--header-logo-image-offset-y`
- `--header-switch-inline-margin`
- `--heading-letter-spacing`
- `--heading-line-height`
- `--highlight-table-first-column-width`
- `--home-list-card-bg`
- `--home-list-card-border`
- `--home-list-card-border-color`
- `--home-list-card-border-hover-color`
- `--home-list-card-border-width`
- `--home-list-card-shadow`
- `--home-list-card-shadow-hover`
- `--icon-fill-default`
- `--icon-stroke-default`
- `--image-radius`
- `--inline-code-radius`
- `--input-background`
- `--input-border-color`
- `--input-border-width`
- `--input-focus-border-color`
- `--input-foreground`
- `--input-padding-x`
- `--input-padding-y`
- `--input-radius`
- `--interactive-transition`
- `--link-underline-offset`
- `--media-radius`
- `--menu-badge-bg`
- `--menu-badge-fg`
- `--menu-badge-line-height`
- `--menu-badge-padding-x`
- `--menu-badge-radius`
- `--menu-badge-size`
- `--menu-card-bg`
- `--menu-card-border`
- `--menu-card-border-hover-color`
- `--menu-card-link-color`
- `--menu-card-meta-color`
- `--menu-card-min-height`
- `--menu-card-padding`
- `--menu-card-radius`
- `--menu-card-shadow`
- `--menu-card-shadow-hover`
- `--menu-card-title-color`
- `--menu-card-title-line-height`
- `--menu-card-title-size`
- `--menu-grid-columns`
- `--menu-grid-gap`
- `--menu-hero-bg`
- `--menu-hero-border`
- `--menu-hero-gap`
- `--menu-hero-padding`
- `--menu-hero-radius`
- `--menu-hero-shadow`
- `--menu-lead-color`
- `--menu-section-gap`
- `--menu-shell-gap`
- `--menu-shell-gap-mobile`
- `--not-found-card-bg`
- `--not-found-card-border`
- `--not-found-card-radius`
- `--not-found-card-shadow`
- `--not-found-height`
- `--not-found-shell-gap`
- `--not-found-text-max-width`
- `--not-found-title-size`
- `--page-hub-stat-bg`
- `--page-hub-stat-border`
- `--page-hub-stat-border-hover`
- `--page-hub-stat-grid-gap`
- `--page-hub-stat-label-color`
- `--page-hub-stat-min-width`
- `--page-hub-stat-padding`
- `--page-hub-stat-shadow`
- `--page-hub-stat-shadow-hover`
- `--page-hub-stat-text-color`
- `--page-hub-stat-value-color`
- `--page-hub-stat-value-size`
- `--page-shell-action-gap`
- `--page-shell-action-min-height`
- `--page-shell-action-padding-x`
- `--page-shell-action-shadow`
- `--page-shell-action-shadow-hover`
- `--page-shell-card-bg`
- `--page-shell-card-bg-hover`
- `--page-shell-card-border-color`
- `--page-shell-card-border-hover-color`
- `--page-shell-card-border-width`
- `--page-shell-card-min-width`
- `--page-shell-card-padding`
- `--page-shell-card-radius`
- `--page-shell-card-shadow`
- `--page-shell-card-shadow-hover`
- `--page-shell-empty-bg`
- `--page-shell-empty-border`
- `--page-shell-grid-gap`
- `--page-shell-hero-padding-block`
- `--page-shell-hero-padding-inline`
- `--page-shell-kicker-color`
- `--page-shell-layout-gap`
- `--page-shell-lead-color`
- `--page-shell-lead-max-width`
- `--page-shell-term-card-bg`
- `--page-shell-term-card-border`
- `--page-shell-term-card-shadow`
- `--page-shell-term-card-shadow-hover`
- `--page-shell-term-count-color`
- `--page-shell-term-min-width`
- `--page-shell-text-color`
- `--page-shell-title-line-height`
- `--page-shell-title-size`
- `--page-shell-title-size-mobile`
- `--page-title-letter-spacing`
- `--page-title-line-height`
- `--paginav-line-height`
- `--paginav-link-gap`
- `--paginav-title-letter-spacing`
- `--post-content-blockquote-border-width`
- `--post-content-dl-definition-padding-inline-start`
- `--post-content-dl-definition-width`
- `--post-content-dl-term-width`
- `--post-content-heading-1-margin`
- `--post-content-heading-2-margin`
- `--post-content-heading-3-margin`
- `--post-content-heading-4-margin`
- `--post-content-heading-5-margin`
- `--post-content-heading-6-margin`
- `--post-content-hr-height`
- `--post-content-hr-margin-block`
- `--post-content-image-margin-block`
- `--post-content-inline-code-shadow`
- `--post-content-link-underline-offset`
- `--post-content-table-line-height`
- `--post-entry-background`
- `--post-entry-border`
- `--post-entry-border-color`
- `--post-entry-border-hover-color`
- `--post-entry-border-width`
- `--post-entry-hover-transform`
- `--post-entry-link-hover-background`
- `--post-entry-radius`
- `--post-entry-shadow`
- `--post-entry-shadow-hover`
- `--post-footer-item-gap`
- `--post-tags-gap`
- `--primary`
- `--probe-preview-min-width`
- `--probe-table-min-width`
- `--profile-buttons-max-width`
- `--profile-image-scale-mobile`
- `--radius-full`
- `--radius-lg`
- `--radius-md`
- `--scroll-to-top-mobile-offset`
- `--scrollbar-thumb-border-width`
- `--scrollbar-thumb-border-width-compact`
- `--scrollbar-track-height`
- `--scrollbar-track-width`
- `--scrollbar-track-width-mobile`
- `--secondary`
- `--shadow-md`
- `--shadow-sm`
- `--share-button-gap`
- `--share-button-icon-size`
- `--share-button-size`
- `--share-icon-size`
- `--social-icon-size`
- `--space-2xl`
- `--space-3xl`
- `--space-lg`
- `--space-md`
- `--space-sm`
- `--space-xl`
- `--surface`
- `--surface-elevated`
- `--surface-quiet`
- `--surface-radius`
- `--table-cell-min-width`
- `--table-cell-padding-x`
- `--table-cell-padding-y`
- `--theme`
- `--toc-inner-margin-inline`
- `--toc-inner-padding-bottom`
- `--token-preview-avatar-size`
- `--token-preview-layer-inset-1`
- `--token-preview-layer-inset-2`
- `--token-preview-layer-min-height`
- `--token-preview-measure-height`
- `--token-preview-swatch-min-height`
- `--transition-base`

}

40-colors-light.css · 라이트 테마의 색상 원본

밝은 배경에서 보는 기본 색상 팔레트이다.

- `--accent`
- `--accent-contrast`
- `--accent-muted`
- `--accent-strong`
- `--border`
- `--border-strong`
- `--code-bg`
- `--code-block-bg`
- `--code-block-fg`
- `--code-inline-bg`
- `--code-inline-fg`
- `--color-brand-primary`
- `--color-brand-primary-active`
- `--color-brand-primary-contrast`
- `--color-brand-primary-hover`
- `--color-brand-primary-muted`
- `--color-brand-secondary`
- `--color-brand-secondary-active`
- `--color-brand-secondary-contrast`
- `--color-brand-secondary-hover`
- `--color-brand-secondary-muted`
- `--color-effect-copy-code-bg`
- `--color-effect-copy-code-fg`
- `--color-effect-glass-bg`
- `--color-effect-glass-border`
- `--color-effect-gradient-primary`
- `--color-effect-gradient-secondary`
- `--color-effect-gradient-surface`
- `--color-effect-overlay`
- `--color-effect-scrim`
- `--color-effect-tooltip-bg`
- `--color-effect-tooltip-fg`
- `--color-neutral-border`
- `--color-neutral-border-strong`
- `--color-neutral-code-bg`
- `--color-neutral-code-block-bg`
- `--color-neutral-code-block-fg`
- `--color-neutral-code-inline-bg`
- `--color-neutral-code-inline-fg`
- `--color-neutral-page-background`
- `--color-neutral-scrollbar-thumb`
- `--color-neutral-scrollbar-thumb-alt`
- `--color-neutral-scrollbar-thumb-alt-hover`
- `--color-neutral-scrollbar-thumb-border`
- `--color-neutral-scrollbar-thumb-border-alt`
- `--color-neutral-scrollbar-thumb-border-gist`
- `--color-neutral-scrollbar-thumb-gist`
- `--color-neutral-scrollbar-thumb-gist-hover`
- `--color-neutral-scrollbar-thumb-hover`
- `--color-neutral-surface`
- `--color-neutral-surface-elevated`
- `--color-neutral-surface-quiet`
- `--color-neutral-surface-strong`
- `--color-neutral-text`
- `--color-neutral-text-muted`
- `--color-neutral-text-subtle`
- `--color-semantic-danger`
- `--color-semantic-focus-ring`
- `--color-semantic-info`
- `--color-semantic-selection-bg`
- `--color-semantic-selection-fg`
- `--color-semantic-success`
- `--color-semantic-warning`
- `--content`
- `--copy-code-bg`
- `--copy-code-fg`
- `--danger`
- `--entry`
- `--focus-ring`
- `--glass-bg`
- `--glass-border`
- `--gradient-primary`
- `--gradient-secondary`
- `--gradient-surface`
- `--info`
- `--link`
- `--link-hover`
- `--overlay`
- `--primary`
- `--scrim`
- `--scrollbar-thumb`
- `--scrollbar-thumb-alt`
- `--scrollbar-thumb-alt-hover`
- `--scrollbar-thumb-border`
- `--scrollbar-thumb-border-alt`
- `--scrollbar-thumb-border-gist`
- `--scrollbar-thumb-gist`
- `--scrollbar-thumb-gist-hover`
- `--scrollbar-thumb-hover`
- `--secondary`
- `--selection-bg`
- `--selection-fg`
- `--success`
- `--surface`
- `--surface-elevated`
- `--surface-quiet`
- `--surface-strong`
- `--tertiary`
- `--text`
- `--text-muted`
- `--text-subtle`
- `--theme`
- `--tooltip-bg`
- `--tooltip-fg`
- `--warning`

}

50-colors-dark.css · 다크 테마의 색상 원본

어두운 배경에서 보는 대응 팔레트이다.

- `--color-brand-primary`
- `--color-brand-primary-active`
- `--color-brand-primary-contrast`
- `--color-brand-primary-hover`
- `--color-brand-primary-muted`
- `--color-brand-secondary`
- `--color-brand-secondary-active`
- `--color-brand-secondary-contrast`
- `--color-brand-secondary-hover`
- `--color-brand-secondary-muted`
- `--color-effect-copy-code-bg`
- `--color-effect-copy-code-fg`
- `--color-effect-glass-bg`
- `--color-effect-glass-border`
- `--color-effect-gradient-primary`
- `--color-effect-gradient-secondary`
- `--color-effect-gradient-surface`
- `--color-effect-overlay`
- `--color-effect-scrim`
- `--color-effect-tooltip-bg`
- `--color-effect-tooltip-fg`
- `--color-neutral-border`
- `--color-neutral-border-strong`
- `--color-neutral-code-bg`
- `--color-neutral-code-block-bg`
- `--color-neutral-code-block-fg`
- `--color-neutral-code-inline-bg`
- `--color-neutral-code-inline-fg`
- `--color-neutral-page-background`
- `--color-neutral-scrollbar-thumb`
- `--color-neutral-scrollbar-thumb-alt`
- `--color-neutral-scrollbar-thumb-alt-hover`
- `--color-neutral-scrollbar-thumb-border`
- `--color-neutral-scrollbar-thumb-border-alt`
- `--color-neutral-scrollbar-thumb-border-gist`
- `--color-neutral-scrollbar-thumb-gist`
- `--color-neutral-scrollbar-thumb-gist-hover`
- `--color-neutral-scrollbar-thumb-hover`
- `--color-neutral-surface`
- `--color-neutral-surface-elevated`
- `--color-neutral-surface-quiet`
- `--color-neutral-surface-strong`
- `--color-neutral-text`
- `--color-neutral-text-muted`
- `--color-neutral-text-subtle`
- `--color-semantic-danger`
- `--color-semantic-focus-ring`
- `--color-semantic-info`
- `--color-semantic-selection-bg`
- `--color-semantic-selection-fg`
- `--color-semantic-success`
- `--color-semantic-warning`
- `--shadow-lg`
- `--shadow-md`
- `--shadow-sm`

}

60-language.css · 언어별 폰트와 줄바꿈 정책

한국어 우선 정책과 CJK/RTL 조합 확인에 중요하다.

- `---------------------------------------------------------------`
- `--direction-code`
- `--direction-page`
- `--font-body`
- `--font-display`
- `--font-display-latin`
- `--font-feature-settings`
- `--font-feature-settings-cjk`
- `--font-heading`
- `--font-mono`
- `--font-mono-cjk`
- `--font-mono-latin`
- `--font-sans`
- `--font-sans-arabic`
- `--font-sans-chinese-simplified`
- `--font-sans-chinese-traditional`
- `--font-sans-cyrillic`
- `--font-sans-devanagari`
- `--font-sans-greek`
- `--font-sans-hebrew`
- `--font-sans-japanese`
- `--font-sans-korean`
- `--font-sans-latin-europe`
- `--font-sans-southeastasia`
- `--font-sans-thai`
- `--font-sans-ui`
- `--font-sans-vietnamese`
- `--font-ui`
- `--heading-letter-spacing`
- `--hyphens-body`
- `--line-break-body`
- `--line-height-base`
- `--line-height-relaxed`
- `--page-title-letter-spacing`
- `--unicode-bidi-page`
- `--word-break-body`
- `--word-break-menu`
- `--word-break-table`

}

70-global.css · 전역 선택 / 표면 / 아이콘 / 테마 토글

선택색, 스크롤, 표면 같은 전역 디테일을 관리한다.

- `---------------------------------------------------------------`
- `--icon-fill-default`
- `--icon-stroke-default`
- `--selection-bg`
- `--selection-fg`
- `--surface-quiet`
- `--theme`

}

함께 볼 페이지

운영 메모

디자인은 콘텐츠마다 손대는 방식이 아니라, 중앙 변수만 조정하고 전체 페이지에 반영되는 방식이어야 한다.
그래서 이 페이지는 검증 기준을 설명하는 문서이면서 동시에, 미래 변경 시 영향을 추적하는 기준점이 된다.