[CSS] :root / CSS 변수 다시 보기

Biz Assist 화면 스타일을 맞추면서 CSS 변수를 사용했다.

:root {
    --primary: #3b82f6;
    --border: #e5e7eb;
    --surface: #ffffff;
}

쓸 때는 var().

.ui-button-primary {
    background: var(--primary);
}

CSS 변수는 자주 쓰는 값을 이름으로 저장해두는 방식이다.

--primary
→ 주요 색상

--border
→ 테두리 색상

--surface
→ 카드 배경

이번에는 화면마다 색을 따로 지정하지 않고
공통 변수로 묶어서 스타일을 맞췄다.

여러 화면에서 같은 디자인 값을 재사용할 때 쓰면 편하다.