App Components
오버레이
앱의 모든 떠 있는 표면 — 프로필 드롭다운 · 스택쉐도 팝오버 · 우측 슬라이드 드로어 · 필 토스트 · 브랜드 다이얼로그. 각 데모는 라이트 스테이지 안에서 실제 .shell 값을 그대로 재현했습니다.
프로필 드롭다운
.tb-pop 280px — surface + line-strong 보더 · radius 10 · 8/28 그림자. 헤더·워크스페이스·메뉴·위험 액션(.pm-danger)으로 구성.
.tb-pop · width 280 · radius 10 · .pm-head · .pm-sep · .pm-item · .pm-danger(link)
팝오버 카드
.pop 스택형 드롭쉐도 — 6px 6px accent + 12px 12px #D7D8DD 2레이어. 본문은 #0B0B0D 다크.
.pop · box-shadow:6px 6px accent, 12px 12px #D7D8DD · .pop.dark(#0B0B0D)
우측 편집 드로어
.sr-panel — 우측에서 슬라이드 인(translateX(100%)→0, .3s). width min(780px,94vw) · 백드롭 rgba(16,24,40,.30) · 좌상단 .sr-x 닫기.
.sr-drawer > .sr-back + .sr-panel(transform .3s cubic-bezier) · .sr-x · .drawerbody
토스트
.toast2 — 화면 하단 중앙 고정 필. #1A1A1A 배경 · radius 9999 · 9/16 패딩 · 2.6초 후 자동 소멸.
.toast2 · fixed bottom 24 · pill · #1A1A1A/#fff · .on(opacity 1)
다이얼로그
브랜드 확인 모달 (srConfirm) — 네이티브 confirm 대체. .srm-card #FFFFFF · radius 15 · 브랜드 라벨 + 메시지 + 취소/확인. 위험 액션은 .danger(accent).
.srm-wrap(rgba 0,0,0,.55) · .srm-card · .srm-brand · .srm-ok.danger(#6B3FF6)
다이얼로그 변형
srConfirm 의 두 모드와 .srt 토스트 3종(dialogs.php). 확인 모달은 기본(흰 확인 버튼) / 위험(.danger accent) 으로, 토스트는 기본 · .srt-success(#14532d) · .srt-error(#7f1d1d) 로 나뉩니다.
srConfirm(default / {danger}) · .srt · .srt.srt-success(#14532d) · .srt.srt-error(#7f1d1d)
사용 규칙
- · 떠 있는 표면은 항상 surface + line-strong 보더로 화이트 위에 띄움
- · 파괴적 액션은
.pm-danger·.danger(accent)로 명확히 - · 비차단 피드백은
.toast2, 확인이 필요하면srConfirm - · 드로어는 우측 슬라이드 + 백드롭으로 컨텍스트 유지
- · 네이티브
alert()/confirm()직접 사용 - · 스택쉐도(.pop)를 일반 카드에 남발 — 강조 1곳만
- · 토스트에 확인/취소 버튼 넣기 — 그건 다이얼로그
- · 밝은 배경 위 오버레이 배치 · 큰 라운드(16/24) 혼용