---
type: reference
title: CSS로 위젯 스타일링하기
summary: ::part() 선택자와 --cpt-skin 커스텀 속성으로 당신 자신의 스타일시트에서 위젯 셸을 스타일링하세요, 모든 파트와 변수의 레퍼런스와 함께.
---

위젯은 열린 섀도 루트에 렌더링되고 당신 자신의 페이지에서 그것을 스타일링하는 두 방법을 줍니다: **섀도 파트**(`::part()`로 요소를 겨냥)와 **CSS 커스텀 속성**(`--cpt-skin-*`로 색상을 재정의). 색상과 문구는 [화이트라벨링](/docs/widget-customization/white-label)을 선호하세요(그것이 그것을 위해 지어졌고 모든 임베드와 함께 이동합니다); 페이지 로컬 조정이나 화이트라벨링이 덮지 않는 무언가를 원할 때 여기 CSS 표면으로 손을 뻗으세요.

이것은 위젯 셸뿐입니다. 게임은 당신이 페이지에서 스타일링할 수 없는 별도의 샌드박스된 프레임에서 돕니다.

## 파트 겨냥하기

`::part(name)`으로 요소의 파트를 고르세요:

```css
caputchin-widget::part(simple-checkbox) {
  border-radius: 1rem;
}

caputchin-game::part(game-frame) {
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
}
```

몇 가지 실용적 메모:

- 섀도 루트는 열려 있으니, 당신의 페이지에서 `::part()`가 모든 현대 브라우저에서 동작합니다.
- 일부 구조 파트(체크박스 컨테이너, 게임 프레임)는 요소에 인라인으로 적용된 기본 레이아웃 스타일을 지닙니다. 그 속성 중 하나를 재정의하려면 `!important`가 필요할 수 있는데, 인라인 스타일이 보통의 `::part()` 규칙을 능가하기 때문입니다. 텍스트와 브랜드 파트는 그것 없이 깔끔하게 스타일링됩니다.
- 파트가 스타일링 표면입니다; 위젯은 내부 클래스 이름을 노출하지 않으며, 그것들은 바뀔 수 있습니다. 섀도 트리를 파고드는 게 아니라 파트로 스타일링하세요.

## 체크박스 위젯의 파트

이것들은 `<caputchin-widget>`에(그리고 같은 브랜드 블록을 재사용하는 `<caputchin-game>`의 게임 전 오버레이에) 나타납니다.

| 파트 | 무엇인가 |
|---|---|
| `simple-checkbox` | 바깥 체크박스 컨테이너(테두리, 배경, 패딩). |
| `simple-shield-box` | 검증 상태를 보이는 방패 표시기. |
| `simple-shield-spinner` | 검증하는 동안 방패 안의 스피너 호. |
| `simple-checkbox-label` | 상태 텍스트(Verify, Verifying, Verified, Failed). |
| `simple-brand` | 브랜드 블록(로고, 이름, 태그가 함께). |
| `simple-brand-home` | 로고와 이름을 감싸는, 홈 링크를 가리키는 링크. |
| `simple-brand-logo` | 브랜드 로고 이미지. |
| `simple-brand-name` | 브랜드 워드마크 텍스트. |
| `simple-brand-tag` | 브랜드 태그라인, 법적 링크를 가리키는 링크. |

## 게임 위젯의 파트

이것들은 `<caputchin-game>`에, 샌드박스된 게임 프레임 둘레에 나타납니다.

| 파트 | 무엇인가 |
|---|---|
| `game-frame` | 게임 둘레의 크롬 프레임. |
| `game-iframe-slot` | 게임의 샌드박스된 iframe을 담는 슬롯. |
| `game-slot` | 게임이 렌더링되는 투영 컨테이너. |
| `game-badge-slot` | 게임 아래에 보이는 브랜드 배지. |
| `game-overlay-host` | 게임 전 오버레이의 호스트(게임 시작 전에 보임). |
| `game-overlay-checkbox` | 그 오버레이의 체크박스. |
| `game-overlay-dialog` | 모달과 풀스크린 레이아웃의 오버레이 다이얼로그. |
| `game-overlay-close` | 모달과 풀스크린 레이아웃에서만, 오버레이 닫기 버튼. |

## 색상 변수

위젯은 해소된 셸 색상을 `--cpt-skin-<token>`이라는 CSS 커스텀 속성으로 호스트 요소에 쓰고, 자기 스타일이 그것들을 읽습니다. 요소에 속성을 설정해 당신의 스타일시트에서 단일 색상을 재정의할 수 있습니다:

```css
caputchin-widget {
  --cpt-skin-primary: #7c3aed !important;
  --cpt-skin-surface_bg: #faf5ff !important;
}
```

`!important`가 중요합니다: 위젯은 스킨을 해소하면서 이 속성들을 호스트에 인라인으로 설정하고, 인라인 값이 보통의 스타일시트 규칙을 능가하니, 평이한 재정의는 무시됩니다. 이것들은 셸의 색상뿐입니다; 그것들은 프레임 안의 게임에 닿지 않습니다.

이것은 페이지 로컬 탈출구입니다. 모든 임베드에 걸쳐 색상을 바꾸려면, 대신 [화이트라벨링에서 스킨](/docs/widget-customization/white-label)을 설정하세요; 그것은 같은 토큰 이름을 씁니다.

| 변수 | 무엇을 칠하는가 |
|---|---|
| `--cpt-skin-primary` | 주요 액션 색상: 활성 방패, 포커스 링, 검증됨 상태. |
| `--cpt-skin-primary_hover` | 주요 색상의 호버 변형. |
| `--cpt-skin-surface_bg` | 위젯의 배경. |
| `--cpt-skin-text_primary` | 주 텍스트. |
| `--cpt-skin-text_label` | 상태 라벨 텍스트(Verify, Verifying 등). |
| `--cpt-skin-text_muted` | 브랜드 태그를 포함한 보조 텍스트. |
| `--cpt-skin-text_passive` | 위젯이 기다리는 동안 방패 윤곽선. |
| `--cpt-skin-separator` | 컴팩트 레이아웃에서 브랜드 조각 사이의 구분선. |
| `--cpt-skin-border` | 위젯의 테두리. |
| `--cpt-skin-glyph` | 방패 안에 그려지는 체크 또는 경고 글리프. |
| `--cpt-skin-error` | 오류 상태 색상. |
| `--cpt-skin-shadow` | 위젯의 드롭 섀도. |
| `--cpt-skin-modal_backdrop` | 모달 레이아웃 게임 오버레이 뒤의 배경막. |
| `--cpt-skin-fullscreen_backdrop` | 풀스크린 레이아웃 게임 오버레이 뒤의 배경막. |
| `--cpt-skin-close_btn_bg` | 풀스크린 오버레이 닫기 버튼의 배경. |
| `--cpt-skin-brand_text` | 브랜드 링크 텍스트 색상. |
| `--cpt-skin-brand_text_hover` | 호버 시 브랜드 링크 색상. |

브랜드 로고는 별도의 스킨 토큰(색상이 아니라 이미지)이라, CSS가 아니라 [화이트라벨링](/docs/widget-customization/white-label)을 통해 바뀝니다. 같은 토큰 이름과 그 라이트·다크 기본값은 [스키마 레퍼런스](/docs/references/customization-schema)에 있습니다.

이 `--cpt-skin-*` 변수들은 **위젯 셸의** 스킨만 지닙니다. **게임**은 자기 코드에 건네진 값으로 자기 스킨을 받습니다(CSS 변수로가 아니며, 당신은 페이지에서 게임을 스타일링할 수 없습니다); [게임의 스킨 맞춤화하기](/docs/game-customization/skin#how-a-skin-value-reaches-the-game)를 보세요.

## 함께 보기

- [위젯 화이트라벨링](/docs/widget-customization/white-label): 지원되는 방식으로 문구, 색상, 링크 바꾸기.
- [위젯이 언어와 스킨을 해소하는 방식](/docs/widget-customization/resolution): 당신이 스타일링하기 전에 셸이 렌더링하는 것.
- [우리의 철학](/docs/understanding-caputchin/philosophy): 이 스타일링 표면이 왜 모든 요금제에서 열려 있고 무료인지.