# 테마/스타일 커스터마이징

data-grist는 CSS 변수와 테마 시스템을 통해 손쉽게 스타일을 변경할 수 있습니다.

## 1. 주요 CSS 변수

| 변수명               | 설명          | 기본값  |
| -------------------- | ------------- | ------- |
| --grist-row-height   | 행 높이       | 32px    |
| --grist-header-bg    | 헤더 배경색   | #f5f5f5 |
| --grist-border-color | 테이블 테두리 | #e0e0e0 |
| --grist-font-size    | 폰트 크기     | 14px    |
| --grist-selected-bg  | 선택 배경색   | #e3f2fd |

## 2. 테마 적용법

- `theme` 옵션으로 내장 테마(`default`, `dark` 등) 지정 가능
- CSS 변수로 세부 스타일 오버라이드 가능

```html
<data-grist theme="dark"></data-grist>
```

```css
data-grist {
  --grist-row-height: 40px;
  --grist-header-bg: #e0e0e0;
  --grist-font-size: 16px;
}
```

## 3. 실전 팁

- 프로젝트 전역 스타일에 CSS 변수를 선언하면 모든 그리드에 일괄 적용
- 컬럼별로 `cellClass`, `cellStyle` 옵션을 활용해 개별 셀 스타일 지정 가능

## 4. 참고

- 더 많은 CSS 변수와 테마 확장법은 공식 문서 및 소스코드를 참고하세요.