프리셋 카탈로그

정렬·필터 셀렉트의 표준 구현. 네이티브 <select> 팝업 노출은 G28 위반. 계약: C17–C23 전부. 검증: 온집 store 정렬, 이웃장터 동네 선택, 스타일몰 정렬.

SPA 라우트 전환 시 스크린리더가 새 페이지를 인지하도록 h1에 프로그램 포커스를 주되, 시각 링은 반드시 억제한다(G19 확장 — 3케이스 연속 재발했던 결함). 페이지별 document.title 갱신과 scrollTo(0,0)을 동반.

역참조·관련 콘텐츠가 1~2건일 때 세로 카드 그리드는 우측이 빈다(GS5). 커버 좌(고정 폭, 고정 종횡비) · 본문 우(eyebrow/제목/요약/메타)로 컬럼 폭을 채운다. 3건 이상이면 세로 카드 그리드로 전환. 검증: 온집 상품 상세 집들이 역참조, 스타일몰 룩북 역참조.

역할은 필터 단일(C27 — 정적 배지와 혼용 금지). 칩: 보더 rule + 면 chip, 활성은 면 반전(솔리드) 또는 악센트 링 중 시스템이 하나를 선언. 히트 타깃 ≥44px(C28). 줄바꿈 허용, 폭주 시 접기(C30). "전체" 칩이 기본 활성. 필터 초기화 버튼은 기본 상태에서 숨기고, 활성 필터가 있을 때만 ghost로 노출. 검증: 온집 store, 이웃장터 카테고리, 스타일몰 필터.

필터 조합이 0건일 때: 정직한 문장("이 조건의 매물이 없습니다") + 필터 해제 액션 1개. 일러스트·이모지 금지, 시스템 토큰 안에서.

목록 위에 현재 조건과 결과 수를 사용자 언어로: "모든 동네 · 전체 카테고리 매물 30건". 정렬 기준이 데이터에 없어 생략된 것이 있으면 그 정의도 이 줄에 붙인다("수록된 순서"). 별도 경고 밴드·회색 박스로 만들지 않는다 — 그건 시스템 경고처럼 읽힌다(온집 G2에서 제거된 패턴).

규칙: 칠해지는 표면은 4면 전부 안쪽 패딩을 가진다. 콘텐츠(특히 썸네일· 아바타 같은 미디어)가 칠해진 가장자리에 닿으면 실패. 세로 패딩만 준 행은 배경이 없을 때는 멀쩡해 보이지만, hover/selected/zebra 표면을 칠하는 순간 틴트 밴드가 썸네일에 달라붙어 "패딩을 모르는 화면"이 된다 — 이웃장터 e2e1에서 실제로 나온 결함(padding: var(--space-3) 0 + :hover{background}).

워드마크 텍스트 한 줄은 로고가 아니다. 마크(인라인 SVG)와 워드마크의 락업이 최소 단위다. 외부 이미지 금지(G31), 이모지 금지(G30).

"큰 글씨 + 버튼"은 히어로가 아니다. 정보 구조가 있어야 한다: eyebrow → display → lede → 액션(1개) → 지지 요소.

고지 한 줄짜리 다크 스트립은 푸터가 아니다. 최소 구조:

제출·취소·파괴적 확정·아이콘 명령. 한 뷰 primary 1개(C3).

Base shadcn Button (Button, buttonVariants). variant: default | outline | ghost | destructive | secondary | link. size: default | xs | sm | lg | icon | icon-xs | icon-sm | icon-lg. 네이티브 <button>. Radix Button 프리미티브는 없다. asChild일 때만 Radix Slot (Slot.Root, radix-ui). 비동기는 자식 shadcn Spinner (data-icon="inline-start" | inline-end).

토큰 슬롯 primary 면/글자, destructive 면/글자(악센트 재사용 금지), --radius-control, --size-control-{sm,md,lg}(인풋과 페어), --space-icon-gap, --focus-ring-width·색, --motion-duration-control, disabled 면·글자·보더 (opacity 단독 금지).

한 줄 텍스트·숫자·이메일·암호·검색.

Base shadcn Input (Input). 네이티브 <input>. Radix 인풋 프리미티브는 없다. 리딩/트레일링 애드온은 shadcn Input Group (InputGroup, InputGroupInput, InputGroupAddon, InputGroupButton, InputGroupText). 라벨·설명·에러 조립은 P-PR-08 Field.

토큰 슬롯 --size-control-{sm,md,lg}(버튼과 공유), --radius-control, 면/보더/placeholder 색, error 보더·링·텍스트, --focus-ring-width·색, --space-control-pad, disabled 면·글자·보더(opacity 단독 금지), 애드온 갭.

후기·문의·주소처럼 여러 줄·불확정 길이 텍스트.

Base shadcn Textarea (Textarea). 네이티브 <textarea>. Radix 프리미티브 없음. 카운터·전송을 붙이면 Input Group (InputGroupTextarea + InputGroupAddon align="block-end"). 라벨 조립은 P-PR-08.

토큰 슬롯 --size-textarea-min-h, --radius-control, 면/보더/placeholder, error 3종, --focus-ring-width·색, --space-control-pad, --measure-prose (CJK ~40자 안내), disabled 면·글자(opacity 단독 금지).

약관 동의·복수 선택처럼 항목마다 독립 on/off.

Base shadcn Checkbox (Checkbox). Radix Checkbox (Checkbox.Root + Checkbox.Indicator, radix-ui). 라벨은 shadcn Label / FieldLabel (Radix Label Label.Root). 그룹은 FieldSet + FieldLegend 또는 FieldGroup.

토큰 슬롯 박스 시각 크기 vs 히트(≥44), --radius-checkbox, 보더/면/ 체크 글리프, checked 면, mixed 인디케이터, error 보더·텍스트, --focus-ring, disabled 면·글자, 라벨 갭.

배송 방법·정렬처럼 보이는 선택지가 적고 하나만 고를 때.

Base shadcn Radio Group (RadioGroup, RadioGroupItem). Radix Radio Group (RadioGroup.Root / Item / Indicator, radix-ui). 항목 라벨은 Label/FieldLabel. 그룹 범례는 FieldSet + FieldLegend. 초이스 카드는 FieldLabel이 Field 전체를 감싼다.

토큰 슬롯 라디오 시각 크기 vs 히트, 인디케이터 색, 항목 갭, 초이스 카드 면/보더/선택 악센트, error 3종, --focus-ring, disabled 면·글자, --radius-control.

알림·비행기 모드처럼 즉시 적용되는 설정 on/off.

Base shadcn Switch (Switch, size: sm | default). Radix Switch (Switch.Root + Switch.Thumb, radix-ui). 폼 제출용 숨은 input은 Root가 렌더. 라벨은 Label/FieldLabel. 가로 필드는 Field orientation="horizontal".

토큰 슬롯 트랙 크기(sm/default) vs 히트, on 면/off 면(서로 다른 색, opacity만 금지), 썸 색·크기, --motion-duration-switch, --focus-ring, error 보더·텍스트, disabled 트랙·썸·라벨, 라벨 갭.

가격 범위·볼륨처럼 연속/스텝 숫자 구간.

Base shadcn Slider (Slider). Radix Slider (Slider.Root / Track / Range / Thumb, radix-ui). value는 number[]. 두 값이면 레인지. orientation="vertical" 지원. 숨은 input이 썸마다 폼 값을 낸다.

토큰 슬롯 트랙 두께·면, Range 채움, 썸 크기 vs 히트, --focus-ring(썸), --motion-duration(reduced-motion 점프), 값 텍스트 타이포, disabled 트랙/썸/텍스트, error 색.

라벨·컨트롤·설명·에러를 한 단위로 조립할 때.

Base shadcn Field 패밀리: Field(role="group", orientation vertical|horizontal|responsive, data-invalid), FieldLabel, FieldDescription, FieldError, FieldContent, FieldTitle, FieldGroup, FieldSet, FieldLegend, FieldSeparator. FieldLabel은 shadcn Label → Radix Label (Label.Root). Field 자체는 Radix Form이 아니다(Radix Form은 Preview, shadcn 기본 경로는 Field 조립).

토큰 슬롯 라벨 타이포·색, 설명 muted(에러·라벨은 본문 4.5:1 C45/G40), error 텍스트 색, 필드 갭(스케일, 17px 금지 G24), 가로형 간격, 에러 슬롯 최소 높이, disabled 라벨 색(opacity 단독 금지).

필드 단위 검증과 폼 제출(대기·성공·실패)을 한 계약으로 묶을 때.

Base shadcn Forms 가이드: Field 조립 + React Hook Form(useForm, Controller) 또는 TanStack Form 또는 Formisch. 스키마는 Zod 등 Standard Schema — FieldError의 errors/issues. 제출 버튼은 P-PR-01 Button + Spinner. Radix Form(Form.Root/Field/Control/Message/Submit, Preview)은 shadcn 기본 경로가 아니며, 쓰더라도 같은 블러·3채널 계약을 지킨다.

토큰 슬롯 error 색·텍스트, 성공 피드백 면(토스트를 쓸 때 G16 해당 여부 먼저), 제출 버튼 loading 스피너 색, --motion-duration, 폼 필드 수직 리듬(--space-field-gap), 서버 에러 요약 보더(두께 변경으로 상태 만들지 않음).

뒤 화면을 인어트로 두고 한 과업(짧은 폼, 설정, 편집)을 끝낸 뒤에만 본문으로 돌아갈 때.

Base shadcn Dialog (DialogTrigger, DialogPortal, DialogOverlay, DialogContent, DialogHeader, DialogTitle, DialogDescription, DialogFooter, DialogClose). Radix Dialog (radix-ui 통합 패키지, 구 @radix-ui/react-dialog). modal 기본 true.

토큰 슬롯 --color-scrim(어두운 딤, 예: 흑 40% — 흰 반투명 금지 C44), --color-surface-overlay, --radius-dialog, --space-dialog-pad, --size-dialog-max(예: 32rem), --elevation-overlay, --duration-overlay/--easing-overlay (opacity·transform만, 예: 200ms), --z-overlay. 스크롤 락 보정 폭.

되돌리기 어려운 행동(삭제, 권한 회수, 결제 확정) 직전에 한 번 더 의사를 받을 때. 메시지+응답 두 개(취소/실행)가 전부인 짧은 모달.

Base shadcn AlertDialog (AlertDialogTrigger, AlertDialogPortal, AlertDialogOverlay, AlertDialogContent, AlertDialogHeader, AlertDialogTitle, AlertDialogDescription, AlertDialogFooter, AlertDialogCancel, AlertDialogAction). Radix AlertDialog (radix-ui, 구 @radix-ui/react-alert-dialog). Content에 onPointerDownOutside/onInteractOutside가 없다 — 오버레이 클릭으로 닫히지 않는 것이 계약.

토큰 슬롯 --color-scrim, --color-surface-overlay, --color-destructive/--color-on-destructive(악센트 재사용 금지), --color-destructive-hover, --radius-dialog, --space-dialog-pad, --size-alert-max(다이얼로그보다 좁게, 예: 24rem), --duration-overlay.

본문을 완전히 대체하지 않는 보조 패널. 필터(C30 접힘), 상세, 설정, 모바일에서 가려진 2패인(C35 compact). 와이드는 가장자리 슬라이드, 협폭·제스처 해제는 바텀시트.

Base shadcn Sheet (SheetTrigger, SheetPortal, SheetOverlay, SheetContent, SheetHeader, SheetTitle, SheetDescription, SheetFooter, SheetClose). Radix Dialog를 가장자리 슬라이드로 확장(SheetContent side: top \| right \| bottom \| left, 기본 right). 모바일 바텀시트는 shadcn Drawer (DrawerTrigger, DrawerContent, DrawerHandle, DrawerTitle …) — Vaul(내부적으로 Radix Dialog). 반응형은 와이드 Dialog/Sheet + 협폭 Drawer(shadcn 문서).

토큰 슬롯 --color-scrim, --color-surface-overlay, --size-sheet-width(예: 28rem) / --size-drawer-snap(예: 50%/92%), --radius-sheet(열린 변만), --space-sheet-pad, --duration-sheet, --easing-sheet, --size-handle, --z-overlay.

트리거에 앵커된 리치 콘텐츠(작은 폼, 날짜 조각, 추가 필드). 스크림 없이, 뒤 화면은 대개 살아 있다.

Base shadcn Popover (PopoverTrigger, PopoverAnchor, PopoverPortal, PopoverContent, PopoverClose). Radix Popover (radix-ui, 구 @radix-ui/react-popover). modal 기본 false. side 기본 "bottom", align 기본 "center".

토큰 슬롯 --color-surface-overlay, --radius-popover, --space-popover-pad, --size-popover-max, --elevation-popover, --size-popover-offset(예: 4px), --duration-overlay, --z-popover(다이얼로그보다 아래, 툴팁보다 위).

이미 이름이 있는 컨트롤의 부가 설명, 아이콘의 짧은 레이블 보강, 단축키 힌트. 호버·키보드 포커스에서만.

Base shadcn Tooltip (TooltipProvider, Tooltip, TooltipTrigger, TooltipContent, TooltipArrow). Radix Tooltip (radix-ui, 구 @radix-ui/react-tooltip). TooltipProvider delayDuration 기본 700ms, skipDelayDuration 기본 300ms.

토큰 슬롯 --color-surface-inverse/--color-on-inverse(또는 overlay 쌍), --radius-tooltip, --space-tooltip-pad, --size-tooltip-max, --duration-tooltip-delay(예: 700ms) / --duration-tooltip-skip(예: 300ms), --duration-tooltip-motion (reduced-motion이면 0), --z-tooltip.

트리거 버튼에 매달린 행동 목록(편집/복제/삭제, 보기 전환). 항목은 명령이고, 현재 값을 보여주는 셀렉트가 아니다.

Base shadcn DropdownMenu (DropdownMenuTrigger, DropdownMenuContent, DropdownMenuItem, DropdownMenuGroup, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuCheckboxItem, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuItemIndicator, DropdownMenuSub/SubTrigger/SubContent, DropdownMenuShortcut). Radix DropdownMenu (radix-ui, 구 @radix-ui/react-dropdown-menu). modal 기본 true.

토큰 슬롯 --color-surface-overlay, --color-menu-highlight, --color-destructive, --radius-menu, --space-menu-pad, --size-menu-item-height(예: 40), --size-menu-min-width, --elevation-menu, --duration-overlay, --z-menu.

전역 점프·명령 실행. 항목이 많아 검색이 전제. 키보드가 주 입력.

Base shadcn Command (CommandDialog, CommandInput, CommandList, CommandEmpty, CommandGroup, CommandItem, CommandSeparator, CommandShortcut). 검색 리스트는 cmdk(Dip). CommandDialog는 cmdk Command.Dialog = Radix Dialog 래퍼 (포커스 트랩·스크롤 락·aria-modal). 인라인만 쓸 때도 Command label은 필수.

토큰 슬롯 --color-scrim, --color-surface-overlay, --radius-command, --space-command-pad, --size-command-max (예: 36rem), --size-command-input-height(인풋/버튼 페어 C9), --color-item-active, --duration-overlay.

결과가 화면에 아직 없는 짧은 피드백. 뷰포트 밖 저장, 백그라운드 실패, 방금 떠난 목록에서의 실행 취소.

Base shadcn Sonner (<Toaster /> + toast()) —

토큰 슬롯 --color-toast-surface, --color-toast-success/ warning/error(악센트 남용 금지 G23), --radius-toast, --space-toast-pad, --size-toast-max, --space-toast-inset, --duration-toast(예: 5s), --duration-toast-motion, --z-toast(오버레이 위).

한 뷰에서 동등한 패널 여러 장을 전환할 때. 패널은 같은 과업의 다른 면이고 동시에 하나만 보인다.

Base shadcn Tabs (TabsList · TabsTrigger · TabsContent) · Radix Tabs (Root/List/Trigger/Content; 패키지 radix-ui, 구 @radix-ui/react-tabs). orientation 기본 "horizontal", activationMode 기본 "automatic".

토큰 슬롯 트리거 높이(밀도 페어 C9, 예 36/40/48), 히트 ≥44, 리스트 면·라운드, 활성 마크(룰 두께·악센트), 갭, 포커스 링, 전환 시간(color/opacity만).

사이트가 계층이고, 현재 페이지의 부모 경로를 한 줄로 보여 위치를 되짚을 때. 상세·카테고리·문서 트리처럼 깊이가 2단 이상일 때.

Base shadcn Breadcrumb (BreadcrumbList · BreadcrumbItem · BreadcrumbLink · BreadcrumbPage · BreadcrumbSeparator · BreadcrumbEllipsis). Radix Breadcrumb 프리미티브는 없다. BreadcrumbLink asChild는 Radix Slot. 접힌 중간 항목은 shadcn DropdownMenu(Radix DropdownMenu)로 합성.

토큰 슬롯 항목 갭·타이포(현재 웨이트 vs 조상 muted), 구분자 글리프(한 세트, G30), 히트 높이 ≥44, 현재 색, 포커스 링, 줄바꿈 간격.

목록·검색 결과가 URL로 나뉘는 페이지 집합을 오갈 때. 주소가 페이지를 가리킨다.

Base shadcn Pagination (PaginationContent · PaginationItem · PaginationLink · PaginationPrevious · PaginationNext · PaginationEllipsis). Radix Pagination 프리미티브는 없다. PaginationLink는 <a> + buttonVariants(isActive면 outline).

토큰 슬롯 항목 크기(아이콘형도 히트 ≥44), 활성 면/보더, 갭, 라운드, 포커스 링, disabled 면 대비(C42), 정의 라인 타이포.

앱 셸·대시보드처럼 구역이 고정이고, 섹션 링크가 세로 레일로 남는 경우. compact는 아이콘 레일, expanded만 라벨이 산다(C35).

Base shadcn Sidebar (SidebarProvider · Sidebar · SidebarHeader/Footer/Content · SidebarGroup · SidebarMenu/SidebarMenuItem/SidebarMenuButton · SidebarTrigger · SidebarInset · SidebarRail). 모바일은 내장 Sheet(Radix Dialog). 아이콘 접힘 라벨은 Tooltip(Radix Tooltip). asChild는 Radix Slot. 그룹 접기는 shadcn Collapsible(Radix Collapsible)로 합성. collapsible: offcanvas | icon | none. variant: sidebar | floating | inset.

토큰 슬롯 --sidebar-width / --sidebar-width-icon(아이콘 모드도 히트 ≥44), 면·보더·악센트(사이드바 전용 쌍, G41), 항목 높이·패딩 4면(P-FN-07), 라운드, 포커스 링, 접힘 duration(reduced-motion 0), sticky offset.

사이트 전역 가로 내비에서 섹션 트리거가 링크 패널을 펼칠 때. 마케팅·문서 헤더의 메가/드롭다운.

Base shadcn NavigationMenu (NavigationMenuList · Item · Trigger · Content · Link · Indicator · Viewport, navigationMenuTriggerStyle()) · Radix NavigationMenu (Root/Sub/List/Item/Trigger/Content/Link/Indicator/Viewport; 패키지 radix-ui, 구 @radix-ui/react-navigation-menu). delayDuration 기본 200, skipDelayDuration 기본 300, orientation 기본 "horizontal".

토큰 슬롯 트리거 높이·히트 ≥44, 패널 면/보더/라운드/elevation, delayDuration/skipDelayDuration, 뷰포트 크기 전환(width/height는 Radix CSS 변수 — reduced-motion이면 0), 포커스 링, 캐럿 회전 시간(G12 bounce 금지).

순서가 있는 과업(가입·체크아웃·신청)에서 지금이 몇 번째인지, 앞으로/뒤로가 가능한지를 보여줄 때.

Base hand-rolled. shadcn에 Stepper는 없다. shadcn Progress(Radix Progress)는 연속 값 막대일 뿐 단계 이름·현재 단계를 대표하지 못한다 — 보조 트랙으로만.

토큰 슬롯 점/커넥터 크기·두께, 현재/완료/에러 색(본문 4.5:1), 이름 타이포, 갭, 히트 ≥44(링크형), 포커스 링, 커넥터는 레이아웃 애니가 아니라 color.

여러 페이지에 반복되는 크롬(마스트헤드·사이드바·유틸)이 본문보다 앞에 있을 때. 키보드 사용자가 매 페이지마다 그 블록을 통과하지 않게.

Base hand-rolled. shadcn 스킵 링크 컴포넌트 없음.

토큰 슬롯 포커스 시 면·보더·링, 오프셋(뷰포트 모서리에서 떨어짐 C7), 타이포, z-index(크롬 위).

한 문서가 길어 헤딩 구조가 있고, 같은 페이지 안 구간으로 점프할 때. 에디토리얼·가이드·약관·긴 상세.

Base hand-rolled. shadcn TOC 컴포넌트 없음. 링크는 문서 h2–h3의 id로만.

토큰 슬롯 sticky top/offset, 항목 패딩·히트 ≥44, 현재 마크, 중첩 인셋, 포커스 링, 스크롤 마진, 모션 시간.

한 단위의 관련 콘텐츠(상품·글·요약)를 표면으로 묶어 그리드/목록에 놓을 때. 페이지(또는 선언된 섹션)당 변형은 한 장르만.

Base shadcn/ui Card + CardHeader/CardTitle/CardDescription/ CardAction/CardContent/CardFooter. Radix 카드 프리미티브 없음 (hand-rolled div, size "default"|"sm", 간격 --card-spacing). 미디어 종횡비는 shadcn AspectRatio — radix-ui AspectRatio.Root (ratio 기본 1).

토큰 슬롯 --radius-card, --space-card-pad(--card-spacing 대응, 예: default 16 / sm 12), 면, 보더(--color-rule), 엘리베이션(다크는 한 단계 밝은 서피스 C40 — 그림자 가산 아님), 미디어 종횡비, 타이틀 웨이트, hover 전이 속성·시간(G10 transition: all 금지).

상태·분류·수량을 짧은 라벨로 붙일 때(재고, 결제 상태, 카운트). 역할은 정적 배지 하나.

Base shadcn/ui Badge. Radix 배지 프리미티브 없음(hand-rolled). variant: "default"|"secondary"|"destructive"|"outline"|"ghost"|"link". 아이콘은 data-icon="inline-start"|"inline-end". 링크 배지는 Radix 경로에서 asChild로 호스트를 교체.

토큰 슬롯 면/보더/텍스트 쌍(variant별, 다크는 on-color C39), --radius-badge, 높이·패딩(시각 32px급이어도 인터랙티브면 히트 ≥44 C28), 아이콘 갭, 타입 크기·웨이트.

사람·계정·브랜드를 식별하는 얼굴/이니셜. 목록 행·헤더·코멘트 메타.

Base shadcn/ui Avatar/AvatarImage/AvatarFallback + AvatarBadge/ AvatarGroup/AvatarGroupCount. 기반 radix-ui Avatar.Root/ Avatar.Image/Avatar.Fallback(delayMs로 폴백 플래시 억제, onLoadingStatusChange). size: "sm"|"default"|"lg".

토큰 슬롯 크기 스케일(sm/default/lg, 예: 24/32/40), --radius-avatar (원/스쿼클은 철학), Fallback 면·글자색, Group 겹침 오프셋·링(배경과 분리되는 스트로크), Badge 지름·위치·상태색 쌍.

행·열이 의미 있는 표 데이터에 정렬·행 선택·0건 상태가 필요할 때(결제 목록, 재고, 관리 로그).

Base shadcn/ui Table/TableHeader/TableBody/TableRow/TableHead/ TableCell/TableCaption/TableFooter + Data Table 가이드(자체 컴포넌트 없음). 상태 엔진 @tanstack/react-table v9(rowSortingFeature/ rowSelectionFeature, column.toggleSorting, table.getFilteredSelectedRowModel()). 선택 열은 shadcn Checkbox — radix-ui Checkbox.Root/Checkbox.Indicator(checked="indeterminate"). 0건은 테이블 셀 또는 shadcn Empty(EmptyTitle/EmptyDescription/ EmptyContent). Radix 테이블 프리미티브 없음 — 네이티브 <table>.

토큰 슬롯 행 최소 높이(밀도 페어 C9), 셀 패딩, 헤더 웨이트·면, selected/hover 면, --color-rule(디바이더, 다크 3:1 C41), 정렬 아이콘 크기, 체크 시각 크기 vs 히트 ≥44, 숫자 tabular-nums.

같은 위계의 섹션을 헤딩 스택으로 접어 스크롤을 줄일 때(FAQ, 설정 그룹, 폼 섹션).

Base shadcn/ui Accordion/AccordionItem/AccordionTrigger/ AccordionContent. 기반 radix-ui Accordion.Root/Item/Header/ Trigger/Content. Radix API: type="single"|"multiple", single이면 collapsible, orientation 기본 "vertical", dir, 아이템 disabled. 높이 애니메이션은 --radix-accordion-content-height.

토큰 슬롯 헤더 높이·패딩, 제목 웨이트(열림/닫힘 차이는 웨이트 또는 정식 마크 — 장식 언더라인 금지 G8), 셰브론 크기·회전 시간, Content 패딩, 아이템 보더(--color-rule), 모션 시간·이징(bounce 금지 G12).

최초 페인트 전에 이미 자리 잡은 레이아웃을 유지한 채 데이터가 올 때. 짧은 불확정 대기는 Spinner.

Base shadcn/ui Skeleton(hand-rolled div, Radix 없음) + Spinner. 자리 보존용으로 대상과 같은 Card/Table/Avatar 골격을 재사용한다. 영역 대기는 컨테이너 aria-busy.

토큰 슬롯 스켈레톤 면(다크에서 녹아 사라지지 않을 대비 C42), 라운드(대상 컴포넌트와 동일 --radius-*), 펄스 시간, 행/카드/아바타의 실제 높이 토큰, Spinner 지름·스트로크.

같은 표면 안에서 그룹을 시각·의미로 나눌 때(리스트 항목, 헤더/본문, 툴바 그룹).

Base shadcn/ui Separator. 기반 radix-ui Separator.Root: orientation="horizontal"|"vertical"(기본 horizontal), decorative (장식이면 시맨틱 제거).

토큰 슬롯 --color-rule(라이트/다크 쌍), 두께, 수직 높이, 인셋 (행 패딩과 페어), 리스트 간격과 선의 리듬.

작업의 완료율(업로드, 단계, 처리)을 트랙으로 보여줄 때. 값이 있거나 불확정(indeterminate)이다.

Base shadcn/ui Progress. 기반 radix-ui Progress.Root/ Progress.Indicator. Root: value(number|null, undefined/null= indeterminate), max, getValueLabel. data-state: "loading"| "complete"|"indeterminate". 가시 라벨은 shadcn Field/FieldLabel.

토큰 슬롯 트랙 높이·라운드·면, 인디케이터 색(위 텍스트와 분리 — 텍스트는 4.5:1), 완료/에러 색 쌍, 전이 시간(transform only), 라벨 타입.

KPI·건수·평균처럼 숫자가 읽기의 앵커인 요약. 대시보드 스트립, 섹션 lede 옆 집계.

Base hand-rolled. shadcn 통계 프리미티브 없음. 표면이 필요하면 Card 한 장 안의 그리드이지, 숫자마다 카드가 아니다(G4). 범위+최대가 의미 있을 때만 APG Meter Pattern(role="meter", aria-valuemin/ max/now, 퍼센트가 부적절하면 aria-valuetext).

토큰 슬롯 디스플레이 숫자 크기·웨이트·font-variant-numeric (tabular-nums), 정의 라벨 색(muted여도 4.5:1 C45), 단위 크기, 항목 갭, 표면 패딩(카드와 공유할 때만 --space-card-pad).

항목에 붙은 정적 분류(카테고리, 해시태그, 속성)를 한 줄/여러 줄로 나열할 때.

Base shadcn/ui Badge를 ul/li로 반복. 태그 전용 Radix 프리미티브 없음. 링크 태그면 Badge+asChild 링크. 제거형은 Badge + 독립 close 버튼이지 배지 onClick이 아니다.

토큰 슬롯 배지와 공유하되 태그 면은 secondary/outline 쪽으로 고정 (상태 default와 충돌 금지), --radius-badge, 갭, 행 높이, 접기 브레이크, close 아이콘 크기.

기존 계정으로 이메일/아이디+비밀번호 세션을 열 때. 소셜이 있으면 P-AU-03을 이 화면에 조립.

Base shadcn Card (Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter) + Field 패밀리(P-PR-08) + Input(P-PR-02) + InputGroup/InputGroupInput/InputGroupAddon/ InputGroupButton + Button/Spinner(P-PR-01). 검증 P-PR-09.

토큰 슬롯 --size-auth-well, 카드 면/보더/--radius-card, 컨트롤 높이(C9), 에러 3종, 토글 아이콘, 링크, primary 면(소셜 필과 동시 금지 C3).

새 계정(식별자+새 비밀번호[+필수 동의])을 만들 때. 한 화면 한 질문이 원칙이되 이메일·비밀번호는 한 과업으로 묶을 수 있다.

Base P-AU-01과 같은 Card+Field. 동의는 P-PR-04 Checkbox+FieldLabel. 비밀번호 규칙은 FieldDescription(툴팁 금지, P-PR-24). 소셜은 P-AU-03.

토큰 슬롯 P-AU-01 슬롯 + 동의 라벨 갭, 규칙 설명 muted(4.5:1 G40), 링크는 시스템 정식 마크(G8).

Google·Apple·카카오 등 외부 IdP로 세션을 열 때. 로그인·가입 화면에 붙는 그룹.

Base shadcn Button variant="outline" + 세로 ButtonGroup(orientation="vertical", aria-label). 구분선 FieldSeparator. 마크는 인라인 SVG(G31), 이모지 금지(G30).

토큰 슬롯 제공자별 면/글자/보더(브랜드 락, D-ID로 분리), 아이콘 갭(C6), 버튼 높이(C9), 그룹 갭, Separator 룰.

로그인에서 비밀번호를 잊었을 때. 요청(식별자) → 안내 → (메일 링크 후) 새 비밀번호.

Base P-AU-01과 같은 Card+Field+P-PR-09. 완료 안내는 같은 웰 본문(결과가 보이면 토스트 금지 G16). 새 비밀번호 토글은 P-AU-01.

토큰 슬롯 P-AU-01 슬롯, 쿨다운 숫자 타이포, 확인 본문 measure.

가입·로그인·민감 동작 확인을 위해 메일/SMS 짧은 코드를 받을 때.

Base shadcn Input OTP (InputOTP, InputOTPGroup, InputOTPSlot, InputOTPSeparator) — input-otp. pattern={REGEXP_ONLY_DIGITS}, 길이 토큰(6 기본). 래퍼 P-PR-08/09. 재전송 Button variant="ghost".

토큰 슬롯 슬롯 크기 vs 히트, --radius-control, 면/보더, caret, 에러 3종, --size-otp-gap, 높이 페어(C9).

보호 화면에서 세션이 끊겼을 때(401·만료 타이머). 하던 일을 잃지 않고 다시 열 때.

Base shadcn Dialog(P-PR-20: Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription, DialogFooter) 안에 P-AU-01 짧은 폼 또는 P-AU-03. P-PR-21이 아님 — 오버레이 클릭으로 본문 조작을 열지 않음. 만료를 Sonner만으로 알리지 않음(P-PR-27).

토큰 슬롯 P-PR-20 스크림/오버레이 + P-AU-01 필드. --size-dialog-max를 로그인 웰과 맞출지는 결정 표.

결제 전 라인아이템을 수량·삭제·재고로 조정하고 청구 금액을 확정할 때.

Base shadcn Item (ItemGroup, Item, ItemMedia variant="image", ItemContent, ItemTitle, ItemActions, ItemSeparator) + Aspect Ratio + Button Group + Input + Empty + Badge(정적). 버튼 P-PR-01, 세일가 P-CM-06, 합계 P-CK-03. 카드 안의 카드 금지(G4).

토큰 슬롯 --size-thumb, --ratio-cart-media, --space-row-pad(스케일 G24), --radius-row, 재고 3종, --font-tabular, --size-sticky-bar, --offset-sticky.

배송지·수단·금액 요약을 한 화면에서 확인하고 청구를 시작할 때(WCAG 3.3.4).

Base shadcn Card (Card, CardHeader, CardTitle, CardContent, CardFooter) + Field 패밀리(P-PR-08) + Input(P-PR-02) + Textarea(P-PR-03) + Checkbox(P-PR-04) + Radio Group 초이스 카드(P-PR-05) + Button(P-PR-01) + Collapsible(협폭 요약). 우편번호 검색은 P-PR-20. 수단 P-CK-04, 금액 P-CK-03, 제출 P-PR-09. <select> 시/도는 G28 — 많으면 P-FN-01.

토큰 슬롯 --measure-form, --space-section, --size-summary-col, --offset-sticky, --size-sticky-bar, --radius-card, 신뢰 문구 색, --font-tabular.

장바구니·주문서·진행·결과·주문 상세처럼 청구/확정 금액이 보이는 모든 면.

Base hand-rolled 라벨/금액 정의 리스트 + shadcn Separator. 주문서 우측은 Card (CardHeader "주문 요약", CardContent, CardFooter에 최종금액+CTA). 표가 필요하면 Table (Table, TableRow, TableCell 금액 열 우정렬).

토큰 슬롯 --font-tabular, --size-amount-pay(지배), --size-amount-line, --color-amount-discount(대비 실측), --space-amount-row, --color-rule.

주문서에서 배타적으로 한 수단을 고를 때.

Base shadcn Radio Group (RadioGroup, RadioGroupItem) + Field 초이스 카드(FieldLabel이 Field 전체, P-PR-05) + FieldSet/FieldLegend. 앱 카드 인증이 우리 화면이면 Input OTP (InputOTP, InputOTPGroup, InputOTPSlot) + P-PR-08. 브랜드 마크는 단색 SVG(G31), 이모지·아이콘 혼용 금지(G30).

토큰 슬롯 초이스 카드 면/보더/선택 악센트, --radius-control, 수수료 텍스트(4.5:1), --focus-ring, disabled 면·글자(opacity 단독 금지), PSP 프레임 최소 높이.

주문서 제출 이후 PSP 승인·3DS·리다이렉트를 기다리는 동안.

Base shadcn Spinner (Spinner, role="status") + Empty (EmptyMedia에 Spinner, EmptyTitle, EmptyDescription) 또는 Dialog (DialogContent, DialogTitle, DialogDescription, P-PR-20). 단계가 실제 서버 상태일 때만 Progress (Progress, ProgressLabel, ProgressValue). 인페이지 OTP면 Input OTP. 파괴 토큰의 AlertDialog(P-PR-21)는 쓰지 않음.

토큰 슬롯 --color-scrim(C44 어두운 딤), --color-surface-overlay, 스피너 색·크기, --size-dialog-max, --duration-overlay(reduced-motion 0, G27), --font-tabular.

승인 응답 이후. 성공/실패/부분성공/대기를 한 계약의 네 상태로.

Base shadcn Alert (Alert, AlertTitle, AlertDescription, AlertAction) + Card + Item 요약 + Badge(정적 C27) + Button(P-PR-01). 실패를 destructive 필로 칠하지 않음 — 에러 토큰 텍스트(C3).

토큰 슬롯 상태 면 4종(부분이 성공 토큰을 재사용하면 실패), --color-on-status(반전 쌍 C39), --font-tabular, --radius-card, primary 면.

주문이 생긴 뒤(직후 확인과 이후 조회).

Base shadcn Card 섹션 + Item 라인(읽기전용 P-CK-01 해부) + Badge(주문 상태, 정적 C27) + Separator + P-CK-03 + Alert(부분 배송·취소 창) + Button. 취소·환불 확정은 P-PR-21. 문의는 Link. Breadcrumb (Breadcrumb, BreadcrumbList, BreadcrumbItem, BreadcrumbLink, BreadcrumbPage)는 계보가 있을 때만.

토큰 슬롯 주문 상태 색·웨이트(4.5:1), --font-tabular, --radius-card, --space-section, --color-rule, destructive 면/글자.

해부(순서 고정): 이미지(라이프스타일 컷, 고정 종횡비, minmax(0,1fr) 트랙) → 브랜드 eyebrow → 상품명(2줄 클램프) → 가격(카드 안 최대 웨이트) → 한 줄 피치 → 메타 행(재고 상태 토큰 · 카테고리 · 평점 · 후기 수). 전 요소 좌측 정렬 일치. 카드 변형은 페이지당 한 장르(C24), 전체 클릭 카드와 내부 CTA 동시 금지(C25). 재고 상태는 데이터 enum → 시스템 토큰 (판매중/품절임박/품절 각각 색·웨이트 선언).

상품 이미지 3컷(스튜디오/라이프스타일/디테일) 이상일 때. 대형 스테이지 + 썸네일 행(radiogroup, 선택 썸네일 악센트 보더). 4컷 미만이면 캐러셀 문법 금지(GS6) — 갤러리가 정답. 이미지 명시 치수, 전환은 opacity/transform만.

라벨 열(고정 폭, muted) + 값 열. 행 구분은 subtle rule. 데이터의 spec 오브젝트 키를 그대로 라벨로(발명 금지). 모바일에서도 표 유지(2열이 좁으면 라벨 위·값 아래 스택).

정의 라인 먼저("이 화면에 실린 글은 N편입니다. 평균 M점") → 5~1점 행: 라벨 + 트랙 바(악센트 채움, 최대값 정규화) + 건수. 트랙 폭은 소속 컬럼 기준(전폭으로 늘리지 않는다 — 스타일몰 G2에서 수정된 패턴). 표시 중인 집계의 분모를 정직하게(전체 후기 수와 화면 표시 수가 다르면 둘 다 명시).

항목 해부: 제목(굵게) → 메타 라인(닉네임 · 평점 · 시점 · 도움 수) → 본문 2~3문장. 항목 간 subtle rule. 패션 도메인이면 메타에 키·구매 사이즈 포함(P-CM-05f 변형 — 스타일몰 검증). 리뷰가 상세의 주 콘텐츠 부피일 때는 우측 컬럼 또는 2패인의 한 축으로 올려 와이드 공백을 막는다.

세일 중: 세일가(지배 웨이트) + 정가(취소선, muted) + 할인율(악센트, 소형). 세일가 < 정가 무결성은 데이터 검증 소관. 비세일 상품은 단일 가격. 할인율 색은 본문 4.5:1 게이트 대상(G40) — 작은 글자면 실측.

와이드 홈의 기본 문법. 콘텐츠 역산: 벤토 5칸 미만이면 이 문법 금지(GS6). 검증 구성: 기획전 2(대형 타일) + 인기 상품 4(카드) + 최신 글 3(가로 카드) = 9칸. 집계 정의를 섹션 lede에 사용자 언어로("후기 많은 순 상위 4개"). 히어로 이미지는 아래 그리드에 다시 등장하지 않는 에셋으로(중복 노출은 온집 G2에서 수정된 결함). 장식 타일 aria-hidden, 읽기 순서=DOM(C36).

분석 화면 상단에서 같은 기간·같은 분모의 핵심 수치를 한 행으로 훑을 때.

Base 표면 P-PR-60 Card(CardHeader/CardTitle/CardDescription/CardContent, size "default"|"sm", --card-spacing). 수치 P-PR-68. 증감 P-DB-03. 로딩 P-PR-65 Skeleton. Radix 통계 프리미티브 없음.

토큰 슬롯 디스플레이 숫자 크기·웨이트·tabular-nums, 정의 라벨 색(4.5:1 C45), --space-card-pad/--radius-card, 행 갭(G24), 열 브레이크, 스파크 높이.

한 지표가 시간에 따라 어떻게 움직였는지를 같은 기간 정의로 보여줄 때.

Base shadcn ChartContainer + ChartConfig + ChartTooltip/ ChartTooltipContent + ChartLegend/ChartLegendContent. 시리즈는

토큰 슬롯 --chart-1…--chart-n(라이트/다크 쌍 C39), 플롯 높이(P-DB-08 페어), 축 눈금 타이포(4.5:1), 그리드 --color-rule, 툴팁 면, 모션(transform/opacity만).

KPI·차트 주석·표 셀에서 이전 기간 대비 얼마가 달라졌는가를 붙일 때.

Base hand-rolled 인라인(텍스트+기호). 표면이 필요하면 P-PR-61 Badge variant "outline"|"secondary". 정적 배지에 onClick 금지(C27). 장식 아이콘은 aria-hidden.

토큰 슬롯 유리/불리/중립 면·글자 쌍(다크 on-color C39, 악센트 남용 금지 G23), 기호 글리프 한 세트(G30), tabular-nums, 보조 문구 타이포(4.5:1).

화면의 KPI·차트·표가 한 기간·한 조건을 공유할 때.

Base 프리셋 기간: P-FN-04 칩, 또는 배타·소수면 shadcn ToggleGroup/ ToggleGroupItem(type="single", variant="outline" — 현재 shadcn base는

토큰 슬롯 칩/토글 높이(밀도 페어 C9, 32/40/48), --cell-size, --radius-control, 활성 면(G8 정식 마크), 툴바 갭, 정의 라인 타이포.

차트와 같은 기간의 행 목록을 정렬·비교·드릴다운할 때. 숫자가 열의 본체다.

Base P-PR-63 참조 조립: shadcn Table/TableHeader/TableBody/ TableRow/TableHead/TableCell/TableCaption + Data Table 가이드 + @tanstack/react-table v9(rowSortingFeature/rowSelectionFeature). 선택 열 Checkbox. 0건은 P-FN-05 또는 shadcn Empty. URL 페이지면 P-PR-42, 밀도 P-DB-08, 증감 열 P-DB-03, 행 드릴다운 P-DB-06.

토큰 슬롯 P-PR-63 재사용(행 최소 높이 밀도 페어, 셀 패딩, selected/hover 면, --color-rule, tabular-nums). 증감 열은 P-DB-03 토큰.

KPI·차트 구간·표 행에서 같은 정의를 유지한 채 한 단계 더 쪼갤 때 (전체 → 매장 → 주문).

Base 경로 P-PR-41 Breadcrumb(BreadcrumbList/Item/Link/Page/ Separator/Ellipsis). compact 1패인 상세는 P-PR-22 Sheet/Drawer, expanded 동시 2패인(C35). 라우트면 P-FN-02. 행 해부 P-FN-07. 차트|표 전환 P-PR-40.

토큰 슬롯 패인 폭(예: 28rem / 1fr), 마스터-디테일 갭, --size-sheet-width, 브레드크럼 갭(P-PR-41), 행 패딩(P-FN-07과 페어).

여러 위젯이 각자 데이터를 가져올 때. 전부 대기, 전부 0건, 일부만 실패, 새로고침·실시간 표기를 정직하게 할 때.

Base 로딩 P-PR-65 Skeleton+Spinner. 빈 상태 P-FN-05, 표면 shadcn Empty(EmptyHeader/EmptyTitle/EmptyDescription/EmptyContent — EmptyMedia 일러스트·이모지 금지 G30). 위젯 실패 shadcn Alert(AlertTitle/ AlertDescription/AlertAction, variant "default"|"destructive") + 재시도 P-PR-01. 페이지 치명만 상단 Alert. 화면 밖 실패만 P-PR-27.

토큰 슬롯 스켈레톤 면(C42), 위젯 최소 높이(차트/카드와 페어), Alert 면/보더(두께로 상태 만들지 않음 G39), 재시도 높이(C9), stale 메타 타이포.

같은 분석 화면에서 행·카드·차트·컨트롤의 여백을 한 스케일로 줄이거나 넉넉히 할 때.

Base 배타 전환 shadcn ToggleGroup/ToggleGroupItem type="single". 컨트롤 높이는 P-PR-01/P-PR-02와 공유. 표 행 P-FN-07, 카드 P-PR-60 size "sm"|"default". 저장은 사용자 설정이지 쿼리 디버그 플래그가 아님.

토큰 슬롯 --size-control-{sm,md,lg}, --size-row-min-*, --space-card-pad-*, --size-chart-h-*, 칩 높이, 스위치 높이(페어), 갭 스케일.

본문·이미지가 교차하는 읽기 페이지의 와이드 전략. 아티클 웰은 중앙 정렬: 이미지 웰 ~960px, 본문 문단은 그 안의 좁은 measure(CJK ~40자, C31). 이미지가 본문보다 넓은 것이 리듬의 핵심 — 텍스트 폭에 이미지를 가두면 좌우가 빈다(온집·스타일몰 G2에서 두 번 수정된 결함). 하단 관련 콘텐츠(조인 카드)도 같은 웰을 따른다. 콘텐츠 역산: 이미지 4컷 미만이면 매거진 문법 금지(GS6).

대형 이미지 캐러셀 하나만 두면 우측이 빈다(GS5). 해부: 좌 대형 슬라이드 (현재 랭킹 항목) + 우 연동 텍스트 리스트(1~N위, 현재 항목 하이라이트, 클릭 시 해당 슬라이드/상세 이동). 컨트롤(이전/일시정지/다음)은 이미지 내부(C34), 자동재생은 일시정지 가능, ≤5장. 랭킹 수치는 데이터의 고유 ranking 필드에서만.

컷과 카피가 스크롤을 따라 전개되고 상품이 문맥 위치에 조인되는 페이지. 해부: 커버(광폭) → [컷(중앙 ~960px 웰) → 컷 캡션 → 등장 상품 조인 (2-up 카드, 1개면 P-FN-03 가로형)] 반복. 스크롤 리빌은 1회 재생·과업 화면 금지·본문 반복 금지(C38), prefers-reduced-motion 폴백 필수(G27). 모델 이미지는 얼굴 프레임 밖/뒷모습 원칙(생성 인물 리스크 회피 — 에셋 파이프라인 계약과 페어).

리스트 스캔성이 목적 — 한 줄에서 제목·가격·위치·시간·상태가 한 시선에. 해부: 썸네일(정방형 ~88px) | 본문(제목 1줄 → 가격(굵게, 나눔이면 악센트 "나눔") → 위치 · 카테고리 muted 라인) | 우측 정렬 열(상태 배지 위 · 상대 시간 아래). 와이드에서 컬럼 추가(2열)로 밀도 유지 — 행을 무한 스트레치하지 않는다(C32). 행 전체가 링크, 내부 CTA 없음(C25).

데이터 enum(판매중/예약중/거래완료) → 시스템 토큰 3종: 판매중=긍정 색, 예약중=주의 색, 거래완료=muted. 텍스트 배지(장식 도형 금지), 정적 배지에 onClick 금지(C27). 색만으로 구분하지 않고 라벨 텍스트 항상 동반.

수치(대형) + 등급 라벨 + 진행 바 + 근거 캡션 1줄("거래 N회와 이웃 배지를 바탕으로 한 지표입니다") — 근거 없는 점수 노출 금지. '샘플/데모' 어휘는 캡션에 쓰지 않는다(고지는 푸터 1줄 소관). 행동 배지(시간약속을 잘 지켜요 등)는 정적 칩으로 동반.

문의 대화의 읽기 전용 프리뷰. ~720px 콘텐츠 웰 안에서 구매자 좌· 판매자 우 정렬(C37 확장 — 전폭으로 말풍선을 찢으면 실패). 말풍선: 구매자=면 chip, 판매자=악센트 면+반전 잉크. 각 말풍선 아래 상대 시간 muted. 입력이 제공되지 않으면 정직한 한 줄("문의 보내기는 준비 중입니다")과 disabled 버튼 — disabled는 전용 토큰(G39).

히어로 좌측: eyebrow → 디스플레이 → lede → CTA 1개. 우측 절반을 비우지 말고(GS5) 데이터에서 계산되는 정보 블록으로 채운다 — 검증 예: 동네별 매물 수 6칩 그리드. 장식 이미지가 아니라 집계 정보가 원칙, 집계에는 정의 동반. 결정 표에 D-ID 필수.

설치·첫 세션에서 제품이 무엇을 해 주는지 한 약속으로 보여 준 뒤 설정에 들어가기 전.

Base hand-rolled. 락업 P-FN-08, 정보 구조 P-FN-09 (eyebrow → display → lede → 액션 1 → 지지 요소). CTA는 shadcn Button(P-PR-01).

토큰 슬롯 display/lede 타이포·measure(C31), --size-onboard-well, CTA 면/글자, 건너뛰기 색(4.5:1 C45), 지지 종횡비, --space-hero-pad(하단 ≥1.3×상단 G44).

온보딩에서 선호·역할·동네처럼 한 결정만 받을 때(토스 One thing per one page).

Base shadcn Questionnaire (Questionnaire, QuestionnaireItem, QuestionnaireTitle, QuestionnaireDescription, QuestionnaireChoices, QuestionnaireChoice, QuestionnaireInput, QuestionnaireError, QuestionnaireActions, QuestionnairePrevious, QuestionnaireNext, QuestionnaireSkip, QuestionnaireSubmit). 배타는 P-PR-05, 복수는 P-PR-04, 자유 입력은 P-PR-02+P-PR-08. 옵션이 많으면 P-FN-01 — <select> 금지(G28).

토큰 슬롯 --size-onboard-well, 질문 타이포, 초이스 면/보더/선택 악센트(G8 스쿼글 금지), 필드 갭(G24), 에러 3종(C16), --size-control-*(C9).

온보딩이 이름 있는 단계(계정 → 선호 → 권한 → 첫 데이터)로 나뉘고 지금 어디인지 보여 줄 때.

Base shadcn에 Stepper 없음. 진행 값은 Progress(Radix Progress) 또는 QuestionnaireProgress. 이름 있는 단계는 hand-rolled <ol>. 서드파티 레지스트리 Stepper를 공식 Base로 적지 않는다.

토큰 슬롯 --size-progress-track, 채움/트랙 면, 현재·완료 마크(G23), 점 크기 vs 히트, --duration-progress(reduced-motion 0).

알림·위치·카메라처럼 OS 권한이 필요한 기능을 켜기

Base hand-rolled 또는 shadcn Card + P-PR-01 Button. 권한을 토스트로 묻지 않음(P-PR-27). 거절 안내는 같은 화면 대체 카피.

토큰 슬롯 웰 폭, 이유 measure, CTA/건너뛰기, 프리뷰 면(카드 변형 한 장르 C24), 아이콘(단색 currentColor).

온보딩이 2스텝 이상이라 중도 이탈·질문 생략·전체 포기가 생길 때. 모든 P-OB-02에 붙는 크로마 계약.

Base shadcn QuestionnaireSkip + Questionnaire Resume (저장 답·활성 아이템 복원). 진행 폐기가 파괴적이면 P-PR-21 AlertDialog. 저장 성공을 토스트로 겹치지 않음(G16).

토큰 슬롯 건너뛰기 색(4.5:1 C45/C42), 크로마 링크 위치 (시스템 하나), saved 메타, 다이얼로그는 P-PR-21 슬롯.

온보딩을 끝냈거나 건너뛴 뒤 목록이 0건이라 첫 객체를 만들어야 제품이 시작될 때.

Base shadcn Empty (Empty, EmptyHeader, EmptyMedia, EmptyTitle, EmptyDescription, EmptyContent) + P-PR-01. 미디어는 단색 SVG 또는 실사 — 이모지 금지(G30). P-FN-05를 이 화면에 확장.

토큰 슬롯 Empty 면/패딩(4면 P-FN-07), 미디어 크기, 타이포, CTA, 보조 링크, --size-onboard-well.

마지막 필수 스텝을 마친 직후, 무엇이 켜졌는지 확인하고 제품으로 내보낼 때.

Base hand-rolled 또는 shadcn Card + Item/ItemGroup (Item, ItemMedia, ItemContent, ItemTitle, ItemDescription) 으로 선택 요약. CTA는 P-PR-01.

토큰 슬롯 결과 타이포, 요약 행 면/룰, 완료 마크(G8), CTA, 웰 폭.

돈 걸린 선택·동의·납부·복구. 장르 P-AU · P-CK · 금융형 P-OB. 제품(TDS)과 마케팅(toss.im)을 표면으로 가를 수 있을 때(§1, §12.1).

Base shadcn Button(Button, buttonVariants) · Input · Field · Checkbox · Badge. 조립 P-PR-01 · P-PR-02 · P-PR-08 · P-PR-04. 배지는 액션 아님(C27, §4). 카드·탭·토스트·다이얼로그는 레퍼런스에 없음 — P-PR-20/27은 확장(§7 Don't, §9).

토큰 슬롯 색 밀도: 뉴트럴이 넓고 프라이머리는 행동·포커스·위험만(§2, G23). 라운드: 제품은 크기와 페어, 마케팅은 더 낮고 각진 별 스케일 — 합치지 않음(§5, §7, §8). 간격: 컴팩트 클러스터. 전역 레이아웃은 레퍼런스에 없음(§5, §8). 타이포: 산세리프 한 가족, 큰 헤딩·읽히는 행간. Tossface 본문 금지(§3, G1). 모션: 레퍼런스에 없음(§15).

이웃 거래가 주 콘텐츠이고 크롬보다 매물·동네 이름이 지배할 때. 장르 P-MK (P-FN-05/04/07). SEED와 마케팅 주황을 다른 값으로 유지(§1, §2).

Base shadcn Button · Input · Field · Tabs · Sonner(Toaster, toast()) · Skeleton. 조립 P-PR-01 · P-PR-02 · P-PR-08 · P-PR-27. 탭 hug|fill(fill 상위 5, §4, §8). 셀렉트 P-FN-01(G28). 시트는 레퍼런스에 없음 — P-PR-22는 확장. 스낵바 액션 최대 1개(§4).

토큰 슬롯 색 밀도: 뉴트럴이 넓고 주황은 행동·활성만. 뷰포트 주황 1개(§12.1, G23). 위험/정보/성공은 유틸리티(§12.6). 다크는 시맨틱 재매핑(§12.7, C39). 라운드: 마케팅 필과 SEED를 합치지 않음(§5). 간격: 4 배수(G24). 타이포: 시스템 산세리프, 헤딩은 웨이트로만 (§3). 모션: 짧은 이름난 구간, 스프링 금지(§15, G12). reduced-motion이면 즉시(G27).

사용자 집 콘텐츠가 발견의 입구이고 다음이 구매·시공 실행일 때. 장르: P-CM과 P-ED를 한 여정으로(§12.1). 홈이 이미지에 지배되고 크롬이 조용할 때.

Base shadcn Button · Input · Card의 셸만(바깥 elevated 금지). 액션 P-PR-01, 검색 P-PR-02(C12; 관측 탑내비 인풋은 보더 없는 투명 한 줄, §4). 상품 해부는 P-CM-01. 배지·모달·토스트는 레퍼런스에 없음 — 확장.

토큰 슬롯 색 밀도: 흰 캔버스 + 어두운 뉴트럴. 액션 블루는 채운 작은 버튼과 텍스트 액션에만(§2, §7 Do, G23). 세일/에러/성공/오버레이 색은 레퍼런스에 없음. 라운드: 기본 직각, 유틸/액션만 작은 코너, 플로트만 원(§1, §5). 간격: 촘촘한 홈 클러스터. 5·9px류는 스케일이 아님(G24). 그리드·반응형은 레퍼런스에 없음(§8). 타이포: 가변 산세리프, 본문 행간이 타이트, 액션만 볼드(§3). 모션: 레퍼런스에 없음(§15).

패션 사진·에디토리얼이 다양성을 지고 크롬은 흑/백/선으로 물러날 때. 장르 P-CM(스퀘어 그리드; 세일가 P-CM-06은 확장) + P-ED(스트릿 스냅·룩북, §12.1). 후기 P-CM-05f.

Base shadcn Button(buttonVariants link/ghost가 GNB에 가깝다) · Input(검색) · NavigationMenu 또는 커스텀 마스트헤드(P-FN-08; AI 기본 nav는 G42). 상품은 링크 셸 — 내부 CTA 공존 금지(C25). 순서는 P-CM-01. 필터 P-FN-04 — 선택 색은 레퍼런스에 없음.

토큰 슬롯 색 밀도: 극저. 캔버스/전경 양극, 뮤트와 라인만 보조. 프로모·세일·에러 색은 레퍼런스에 없음(§2, G23). #000/#fff는 AI 기본(G7)이 아니라 “사진이 다양성을 진다”는 결정의 결과로만 허용(GS7). 라운드: 상품·유틸은 직각, 검색만 작은 코너(§1, §5). 간격: 촘촘한 소단위와 섹션 하단의 한 단계 큰 갭(§5). 반응형은 레퍼런스에 없음(§8). 타이포: 산세리프 한 가족, 본문 위계가 얕음. 이탤릭 헤딩 금지(§3, G38a). 모션: 레퍼런스에 없음(§15).

즉시성(주문·결제·배달 상태)과 생활 밀착 온기가 공존해야 할 때. 장르: 상태· 결제는 P-CK, 계정은 P-AU. 캠페인·굿즈·폰트 카탈로그는 다른 레이어(§12.3–5).

Base 제품 액션·필드는 P-PR-01 · P-PR-02 · P-PR-08(주문·복구는 직접 카피, §10). 코퍼릿이 필요할 때만 shadcn Button outline/secondary. 다운로드 카드형 CTA는 Button 또는 Card+Button(흰 면, 중간 라운드, §4). 캐러셀 C34. 셀렉터 펼침은 P-FN-01(G28).

토큰 슬롯 색 밀도: 공개 웹에서 민트는 액센트이지 전면 워시가 아님. 다운로드 면은 흰 캔버스(§2, G23). 코퍼릿은 더 무채인 별 팔레트(§12.5). 라운드: 웹 다운로드는 중간, 코퍼릿은 더 작고, 미디어는 원 — 표면별 고정(§5). 간격: baemin.com은 더 성김, 코퍼릿은 8 배수. 네이티브 주문 앱 그리드는 레퍼런스에 없음(§5, §8). 타이포: 앱 정체는 더 단순· 명료한 한글(§3). 헤리티지는 브랜드 자산 슬롯(G37). 모션: 레퍼런스에 없음(§15).