🎨 CSS 변수(Variable) 사용법

## 개요
CSS 변수는 스타일시트 내에서 반복적으로 사용되는 값을 저장하고 재사용할 수 있는 기능입니다. CSS Custom Properties로 구현되며, 유지보수성을 높이고 스타일을 중앙집중식으로 관리하는 데 유용합니다.

## 주요 특징
- `--`로 변수명을 지정하여 선언 (예: `--main-color: #00ffcc;`)
- `var()` 함수로 변수를 참조 (예: `color: var(--main-color);`)
- CSS 블록 내에서만 유효한 지역 변수 범위
- 자동으로 계산된 값이 포함된 속성에 사용 가능

## 사용법
```css
:root {
--primary-color: #00ffcc;
--spacing-unit: 16px;
}

.container {
background-color: var(--primary-color);
padding: var(--spacing-unit);
}

/* 지역 변수 예시 */
.section {
--accent-color: #ff99cc;
color: var(--accent-color);
}
```
- `:root` 선택자는 전역 변수를 정의하는 데 사용되며, `@layer` 또는 `@media` 내부에서 지역 변수를 선언할 수 있습니다.

## 주의사항
- IE11에서는 지원되지 않으며, `-webkit-` 접두사를 추가해야 할 때가 있음
- `var()` 함수에 기본값을 지정할 수 있음 (예: `color: var(--text-color, #000);`)
- 변수 값을 계산된 값으로 재정의할 수 있음 (예: `--double-space: calc(2 * var(--spacing-unit));`)

## 관련 문법
- CSS Custom Properties: 변수 선언 및 참조 방식
- Cascade and Inheritance: 변수가 상속되는 규칙
- @layer: 지역 변수를 관리하는 데 사용하는 At-rule

:root {
  --primary-color: #00ffcc;
  --spacing-unit: 16px;
}

.container {
  background-color: var(--primary-color);
  padding: var(--spacing-unit);
}

.section {
  --accent-color: #ff99cc;
  color: var(--accent-color);
  margin-bottom: calc(2 * var(--spacing-unit));
}