# MascotHelperButton · 24 frames

정비소 웹 우측 하단용 너트·부부 캐릭터 버튼입니다. 캐릭터별로 새로 그린 GPT 원화 24장을 사용합니다. 원화의 배경을 알파로 제거하고, 가로세로 비율을 유지하며 높이와 발 위치를 정렬했습니다.

`mascot-button.js`와 같은 폴더에 `nutty-sheet.webp`, `nutty-idle.webp`, `bubu-sheet.webp`, `bubu-idle.webp`를 복사합니다. 외부 런타임 의존성이나 AI API 호출은 없습니다. v1과 v2는 같은 Custom Element 이름이므로 한 페이지에는 한 버전만 로드합니다.

```html
<script type="module" src="./mascots/mascot-button.js"></script>
<bw-mascot-button character="nutty" label="AI 도우미 열기"></bw-mascot-button>
```

- `character`: `nutty`(기본), `bubu`.
- `label`: 버튼의 접근성 이름. 기본은 캐릭터 이름 + AI 도우미 열기.
- `disabled`: 활성화와 애니메이션 중지.
- `expanded="true|false"`: 실제 도우미 패널 열림 상태.
- `--mascot-width`: 기본 112px, 높이는 5/4 비율. 서비스에서 `position: fixed; right: 24px; bottom: 24px`로 배치합니다.
- `mascot-activate`: 클릭/Enter/Space 이벤트. `event.detail.character`를 실제 도우미 열기에 연결합니다.
- `mascot-error`: 프레임 로드 실패. 정지 그림으로 폴백합니다.

마우스 진입 또는 키보드 포커스에서 60ms 간격으로 24장을 재생하고 기본 자세에서 1초 쉽니다. 마우스 이탈·포커스 해제 시 첫 그림으로 돌아옵니다. 화면 밖·숨겨진 탭·OS 움직임 줄이기 설정에서는 자동 재생하지 않습니다.

시트는 6열 × 4행, 2304 × 1920px이며 한 프레임은 384 × 480px입니다. PNG는 원화 보관용, WebP는 웹 전송용입니다. 정렬 측정값은 `alignment.json`을 참고하세요. 기존 v1 파일은 기존 사용처의 캐시와 호환성을 위해 유지합니다.

[/characters/frames](/characters/frames)에서 48장, 수동 재생, 속도 조절, 중심선·발 기준선, 밝고 어두운 배경을 확인할 수 있습니다. 실제 정비소 서비스의 도우미 열기 동작은 소비자가 연결해야 합니다.