AGENTS.md@skills/paseo-toss/upstream/shared/templates/react-vite git:20261023.97f36e9A

Immutable. This exact content never changes and is served at /api/v1/blob/1684d95ecef43fd9.

<!-- ait:design-guide v3 -->
앱인토스 미니앱 프로젝트다. 화면 코드를 쓸 때 아래 규칙을 적용한다. 화면 생성·수정 요청은 `/ait:design`이 맡는다.
사용자가 묻지 않으면 규칙을 설명하거나 사용자의 코드·선택을 지적하지 않는다.
프로젝트에 자체 디자인 시스템·토큰이 있으면 그것을 따른다. 아래 토큰은 이 가이드가 넣은 `tokens.css`가 있을 때만 쓴다.

하드 규칙:
- 텍스트 11px 이하 금지, 본문은 15px 이상
- 한글은 `word-break: keep-all`
- 터치 타깃 44px 이상
- 하단 CTA는 safe area 34px
- 광고가 첫 화면 콘텐츠(ATF)를 가리지 않음
- 다크패턴(가짜 버튼·막다른 화면) 금지
- 꺾쇠·화살표는 텍스트 글리프 대신 SVG(currentColor)
- 상단 네비는 직접 그리지 않음(플랫폼 자동 배치)
- font-weight는 400~700만 사용

권장: 이모지는 Tossface로 통일(폰트 스택 배선 또는 `.tf`). 완료를 막지 않는다.

토큰 사용:
- 텍스트 색: `--color-text-strong/default/subtle/hint/disabled/inverse`
- 배경 색: `--color-bg`, `--color-bg-canvas`
- 상태 색: `--color-danger`/`--color-success`/`--color-warning`
- 브랜드 색: `--brand-primary`(중립 기본값, 바꿔도 됨)
- 타이포: `--font-size-*`/`--font-weight-*` 6단계(display~caption)
- 간격: `--space-1`~`--space-6`(4/8/12/16/24/32px)
- 오버레이: `--dim`(#000 대신)
- 인라인 style 객체에서도 `var()`가 그대로 동작한다

아이콘: React는 `src/components/icons.tsx` 6종.
아이콘: vanilla는 `src/assets/icons/*.svg` 6종.

전문(3층 전체 규칙): `docs/design-guide.md`.
판단이 애매하면 화면을 그리기 전에 먼저 읽는다.

다음 단계:
`/ait:design`   말로: "화면이 좀 구려 보여. 예쁘게 고쳐줘."
`/ait:design`   말로: "등록용 로고랑 스크린샷 만들어줘"
<!-- /ait:design-guide -->