Spacing

간격 스케일 bar · radius 토큰 · shadow 단계 · border-width / opacity / z-index / icon · 12 column breakpoint grid를 한 페이지에서 확인합니다. prototype의 layout-tokens 섹션과 1:1 대응합니다.

Spacing Scale

space-1
4px
space-2
8px
space-3
12px
space-4
16px
space-5
20px
space-6
24px
space-8
32px
space-12
48px

Radius

radius-sm
4px — 작은 캡슐·badge.
4px
사용처 없음
현재 모드 미사용
radius-md
6px — 기본 컴포넌트(button, card).
6px
사용처 없음
현재 모드 미사용
radius-lg
8px — sheet·dialog.
8px
사용처 없음
현재 모드 미사용
radius-xl
12px — modal, bottom nav, 큰 row surface.
12px
사용처: 1건
radius-full
원형 — avatar·dot badge.
9999px
사용처 없음
현재 모드 미사용

Shadow

prototype의 sh-sm / sh-md / sh-lg / sh-xl 4단계와 1:1 매핑됩니다. Tailwind 4 기본 shadow 유틸리티를 사용하며, 본 워크벤치에서는 surface 위에 동일 톤 surface를 올려 그림자 형태만 분리해 보여줍니다.

shadow-sm0 1px 2px rgba(0,0,0,0.05)

hairline 그림자. 가벼운 floating 표현.

shadow-md0 4px 6px rgba(0,0,0,0.07)

기본 카드/popover 그림자.

shadow-lg0 10px 15px rgba(0,0,0,0.10)

modal·drawer 등 floating layer.

shadow-xl0 20px 25px rgba(0,0,0,0.15)

강조 overlay. 큰 표면 floating.

Other Metrics

border-width · opacity · z-index · icon / touch target. 정책 SSoT의 layout-token 정의 그대로 인덱싱합니다.

border-width

thin1px
thick2px

opacity

disabled0.5
hover-overlay0.08
selected-overlay0.15

z-index

base0
dropdown1000
sticky1100
overlay1200
modal1300
toast1400

icon / touch target

icon20px (default)
touch target44 × 44 px (min)

Breakpoint Grid

12 column 기준 grid 샘플 + breakpoint 명세. Tailwind 4 기본 breakpoint 단위와 정렬됩니다.

xs< 480px (mobile compact)
sm≥ 640px (tablet)
md≥ 768px (small laptop)
lg≥ 992px (desktop)
xl≥ 1280px (wide desktop)

Fixed Checkout CTA Layout

충전샵에서 검증한 하단 checkout summary 예시입니다. fixed slot은 본문 rail과 같은 max width를 유지하고, disabled/enabled CTA는 같은 위치에서 전환됩니다.

총 충전 포인트

5,500 온

결제 금액

49,900원

same fixed slot

FND-003

bottom insetpage padding + safe-area 후보
content railmax-w-5xl + shell offset 후보
reserved areabottom padding 필요
policyDS-003 후속

Floating Chrome / Safe Area

App Shell sticky header, mobile bottom nav, page list FAB, fixed action은 제품 콘텐츠와 별도 chrome으로 다룹니다. mobile에서는 safe-area를 포함하고, 제품 CTA가 있으면 workbench FAB를 raised 위치로 올립니다.

mobile bottom nav / safe-area

fixed chrome

railsidebar 제외 content center
safe areaenv(safe-area-inset-bottom)
surfacebg-surface/95 + blur
radiusradius-xl 후보

workbench FAB

defaultbottom safe-area + 1rem
raisedbottom safe-area + 5rem
conflict제품 CTA와 겹치면 raised

Thin Scroll Container

App Shell 본문, modal body, preview panel처럼 긴 내부 영역은 `.scrollbar-ds`를 적용해 primary thumb과 transparent track을 사용합니다. body 전체 scrollbar를 강제하지 않고 focus-visible 흐름을 유지합니다.

thumb

policyprimary 55% alpha · 6px

track

policytransparent

scope

policy내부 overflow container 전용

keyboard

policyfocus-visible과 tab order 유지

Console Operations Layout

FND-003

App Shell 내부 운영 콘솔은 dense dashboard, list row, action cluster, mobile stack을 기존 spacing과 radius scale로 조합합니다. 반복 표면은 sibling card로 두고, row/action 예시는 같은 표면 안에서 border와 gap만으로 밀도를 표현합니다.

확정 수익

18,420P

p-4 · gap-2 · radius-md

관리 월드

12개

dense metric card

대기 액션

7건

desktop 3-column

월드 공개 상태

row gap space-3 · touch target 44px 이상

댓글 확인

row gap space-3 · touch target 44px 이상

수익 조건

row gap space-3 · touch target 44px 이상

mobile stack

header → summary → filters → list → action 순서로 단일 컬럼을 유지합니다.

section

tokenspace-6 / space-8

surface padding

tokenspace-4 / space-6

row gap

tokenspace-3 / space-4

action gap

tokenspace-2 / space-3

radius

tokenradius-md

리버스 디자인 워크벤치

Spacing

Spacing Scale

Radius

Shadow

Other Metrics

border-width

opacity

z-index

icon / touch target

Breakpoint Grid

Fixed Checkout CTA Layout

FND-003

Floating Chrome / Safe Area

fixed chrome

workbench FAB

Thin Scroll Container

thumb

track

scope

keyboard

Console Operations Layout

page

section

surface padding

row gap

action gap

radius

Mobile Facet Panel Layout

summary-first

panel-gap

touch-target

focus-return