Surface

Surface는 bg-bg-panel 배경 위에 선과 그림자를 얹어 요소의 경계를 만드는 3가지예요. 원하는 모양이 없으면 추가 가이드를 보고 바꾸거나 더하세요.

사용 예시

Surface 3가지

안을 여러 영역으로 나누는 컨테이너는 frame, 격자에 나란히 배치하는 항목은 card, 페이지나 overlay 위에 뜨면 float예요. 둥글기 짝은 Radius 페이지에 있어요.

frame

card

float

tsx

<div className="frame rounded-r12 p-4">frame</div><div className="card rounded-r12 p-4">card</div><div className="float rounded-r16 p-4">float</div>

frame

안쪽 요소가 모서리를 넘지 않도록 overflow-hidden을 함께 써요.

미리보기PNG

고른 파일이 여기에 보여요

tsx

<div className="frame rounded-r12 overflow-hidden">  <div className="border-line flex items-center justify-between border-b px-4 py-2">    <span className="text-label">미리보기</span>    <span className="text-caption text-fg-muted font-mono">PNG</span>  </div>  <div className="bg-bg-well px-4 py-8">    <p className="text-caption text-fg-muted text-center">고른 파일이 여기에 보여요</p>  </div></div>

card

누를 수 있는 항목이면 hover 표시를 ring으로 더해요.

tsx

<button  type="button"  className="card rounded-r12 transition-state hover:ring-line-strong block w-full p-4 text-left hover:ring-1 hover:ring-inset">  <span className="text-label block">주문 상세</span>  <span className="text-caption text-fg-muted block">2026-08-27</span></button>

float

아래 요소를 가려서 z-overlay를 함께 써요.

복사했어요

tsx

<div className="float rounded-r16 z-overlay px-4 py-3">  <p className="text-label">복사했어요</p></div>

overlay 위의 float

Dialog, Drawer처럼 overlay 위에 뜨는 창도 float예요. 다크 모드에서 선이 어두운 overlay와 창을 나눠요.

정말 지울까요?

지운 항목은 되돌릴 수 없어요.

tsx

<div className="bg-bg-overlay rounded-r12 p-8">  <div className="float rounded-r20 p-4">    <p className="text-label">정말 지울까요?</p>    <p className="text-caption text-fg-muted">지운 항목은 되돌릴 수 없어요.</p>  </div></div>

그림자

card와 float는 shadow-s3를 써요. 직접 만드는 요소는 위에 뜨는 정도에 맞춰 골라요.

shadow-s1

shadow-s2

shadow-s3

tsx

<div className="bg-bg-panel shadow-s1" /><div className="bg-bg-panel shadow-s2" /><div className="bg-bg-panel shadow-s3" />

읽기 전용 값

8412-0937

권장

읽기만 하는 값은 bg-bg-well에 담고 Surface를 쓰지 않아요.

8412-0937

지양

card에 담으면 누를 수 있는 항목으로 보여요.

중첩

2493

권장

Surface 안에 담는 요소는 bg-bg-well을 써요.

2493

지양

Surface를 겹치면 배경이 같아서 라이트 모드에서 경계가 그림자로만 남아요.

추가 가이드

값 바꾸기

그림자는 퍼짐을 @theme에, 알파를 라이트와 다크에 적어요. 배경과 선은 Color 페이지에서 바꿔요.

css

@import "tailwindcss";@import "@pantoia/ui/tailwind.css";/* 그림자 퍼짐 */@theme { --shadow-s3: 0 6px 20px 0 var(--pds-shadow-3); }/* 그림자 알파. 라이트와 다크에 같은 이름을 적어요 */:root, .light { --pds-shadow-3: #00000029; }.dark         { --pds-shadow-3: #000000dd; }

새 값 더하기

새 Surface는 @utility로 배경, 선, 그림자를 묶어요.

css

/* 새 Surface */@utility raised { @apply bg-bg-panel shadow-s2; }/* 새 그림자 */@theme { --shadow-s4: 0 8px 24px 0 var(--pds-shadow-4); }:root, .light { --pds-shadow-4: #00000029; }.dark         { --pds-shadow-4: #000000dd; }

명세

Surface와 그림자

Surface와 그림자
이름	값	설명
Surface
frame	bg-bg-panel, border-line	Table, Accordion
card	bg-bg-panel, shadow-s3
float	bg-bg-panel, border-line, shadow-s3	플로팅 요소, Dialog, Drawer
그림자
shadow-s1	0 1px 4px 0 var(--pds-shadow-1)
shadow-s2	0 2px 10px 0 var(--pds-shadow-2)
shadow-s3	0 4px 16px 0 var(--pds-shadow-3)	card, float

z-index

z-index
이름	값	설명
z-sticky	10	고정 헤더
z-overlay	50	float, overlay
z-toast	60	Toast