App Foundations
레이아웃 · 셸
제품 셸은 204px 좌측 사이드바 + 상단바 + 메인 구조입니다. 마케팅의 떠있는 글래스 헤더와 전혀 다릅니다. 1024가 아니라 760px에서 사이드바가 드로어로 전환됩니다.
셸 미리보기
실제 토큰으로 렌더한 앱 셸 — 사이드바 · 상단바 · 메인.
검색…
A
대시보드
총 클릭
128,940
grid 204px · 1fr · sidebar .p-nav · topbar 56 · main padding 22/26
셸 구조
그리드
grid 204px · 1fr좌측 사이드바 204px + 메인. min-height 100vh.
사이드바
.p-navsticky top0 · 100vh · bg surface · 우측 보더. 브랜드 + 생성 버튼 + 내비 + 푸터.
상단바
.topbarsticky top0 · 56px · bg surface · 하단 강한 보더. 검색 + 아이콘 + 계정.
메인
.main패딩 22/26 · 하단 56. min-width 0(오버플로 방지).
사이드바 내비
섹션 라벨
.nav-sec10px · .1em uppercase · muted-2 · 700.
항목
.nav a패딩 7/9 · radius 8 · 13px/500 · muted. .ni(18) + .nl + .nb(카운트).
활성
.nav a.onbg tint(#F1ECFE) · accent-3 텍스트 · 좌측 3px accent 바.
호버
:hoverbg surface-2 · text.
푸터
.side-foot상단 보더 · 아바타(28) + 이름/역할 + 로그아웃.
상단바
검색
.tb-searchflex · max 600 · 36px 입력 · 좌측 아이콘. 포커스 accent 링.
우측
.tb-righttb-ic 아이콘 버튼(34) + 계정.
계정
.tb-acct아바타(28 accent) + 이름 + caret → tb-pop 드롭다운(280).
반응형
데스크톱
≥761px2단 그리드. sb-collapsed로 사이드바 접기 가능.
모바일
≤760px사이드바 → 고정 드로어(266) translateX(-100%). 햄버거(.tb-menu)로 .sb-open 토글 + 백드롭.