Foundations

간격 · 라운딩 · 그림자 · 모션

4px 그리드 위에서 모든 여백이 결정되고, 모션은 두 가지 패턴만 사용합니다.

스페이싱

4px 베이스 스케일입니다. 임의 여백값을 만들지 마세요.

--e-sp-1 4px
--e-sp-2 8px
--e-sp-3 12px
--e-sp-4 16px
--e-sp-5 20px
--e-sp-6 24px
--e-sp-8 32px
--e-sp-10 40px
--e-sp-12 48px
--e-sp-16 64px
--e-sp-20 80px

라운딩

인풋·작은 버튼은 sm~기본, 카드는 xl, 히어로 컨테이너는 2xl입니다.

--e-radius-sm
4px
--e-radius
8px
--e-radius-lg
10px
--e-radius-xl
16px
--e-radius-2xl
24px
--e-radius-full
9999px

그림자

el_imin의 이중 레이어 소프트 섀도우를 표준으로 계승했습니다.

--e-shadow-sm

버튼·작은 요소

--e-shadow-md

카드·드롭다운

--e-shadow-lg

호버 리프트·모달

--e-shadow-accent

주 CTA 호버

모션

리빌(등장)과 리프트(호버), 두 가지가 전부입니다. prefers-reduced-motion에서 모두 꺼집니다.

지속시간 · 이징

속성 값 용도
--e-dur-fast 0.15s 색·보더 전환
--e-dur 0.25s 일반 전환
--e-dur-slow 0.35s 카드 리프트
--e-ease cubic-bezier(0.16, 1, 0.3, 1) 전체 이징

호버 리프트 라이브 데모

카드를 올려보세요

e-card-hover — 떠오르며 1.02배 확대됩니다.

스크롤 리빌 라이브 데모

스크롤 리빌

e-reveal — 뷰포트 진입 시 떠오릅니다. --d 변수로 스태거합니다.

레이아웃

브레이크포인트는 768px에서 모바일과 데스크탑을 분기합니다.

구성 값 용도
--e-inner 1200px 기본 컨테이너 최대폭
--e-content 980px 본문 최대폭
breakpoint 768px 모바일/데스크탑 분기점

다크 모드

html이나 임의 래퍼에 data-theme="dark"만 붙이면 토큰이 통째로 전환됩니다 (el_imin_ui의 변수 스왑 구조 계승). 컴포넌트는 전부 토큰 참조라 추가 코드가 없습니다. 아래 박스가 실제 전환 데모입니다.

DARK
다크 모드 카드

같은 마크업, 토큰만 전환된 상태입니다.

토큰 스왑만으로 전환됩니다.