/* ========================================================================== Design System - Spacing 간격 관련 변수들 ========================================================================== */ :root { /* --------------------------------------------------------------------------- Base Spacing Scale - 기본 간격 스케일 --------------------------------------------------------------------------- */ --spacing-0: 0; --spacing-1: 4px; --spacing-2: 8px; --spacing-3: 12px; --spacing-4: 16px; --spacing-5: 20px; --spacing-6: 24px; --spacing-8: 32px; --spacing-10: 40px; --spacing-12: 48px; /* --------------------------------------------------------------------------- Semantic Spacing - 의미 있는 간격 --------------------------------------------------------------------------- */ /* Title + Subtitle 간격 */ --spacing-title-subtitle: 0px; /* 리스트 아이템 간격 */ --spacing-list-sm: 8px; --spacing-list-md: 12px; --spacing-list-lg: 16px; /* 섹션 패딩/간격 */ --spacing-section: 16px; --spacing-section-gap: 24px; /* 카드 내부 간격 */ --spacing-card-content: 6px; --spacing-card-padding: 16px; /* 플래너 카드 간격 */ --spacing-planner-card-gap: 24px; /* 아이콘-콘텐츠 간격 */ --spacing-planner-time-box: 60px; /* schedule 시간 박스 너비 */ /* 메뉴 아이템 인덴트 */ --spacing-menu-indent: 8px; /* 레이아웃 높이 */ --header-height: 60px; --tab-header-height: 72px; /* 탭 헤더: 16px padding + 40px inner + 16px padding */ --bottom-nav-height: 64px; /* 하단 탭바 (safe-area 제외한 실제 높이) */ --modal-offset-top: var(--header-height); /* 페이지 하단 여백 (탭바 공간) */ --spacing-page-bottom: 100px; /* 인풋/버튼 패딩 */ --spacing-input-x: 16px; --spacing-input-y: 12px; --spacing-btn-x: 16px; --spacing-btn-y: 12px; /* --------------------------------------------------------------------------- Border Radius - 모서리 둥글기 Rule: 2× progression (8 → 16 → 32). Only 4 meaningful steps + full + an indicator-scale 2xs for tiny bars (progress segments, badges). --------------------------------------------------------------------------- */ --radius-2xs: 2px; /* indicator bar, progress segment */ --radius-sm: 8px; /* 기본 — 버튼, 인풋, 작은 요소 */ --radius-md: 16px; /* 카드, 컨테이너, 모달, 필터 */ --radius-lg: 32px; /* 대형 pill (헤더 듀얼 버튼 그룹 등) */ --radius-full: 9999px; /* 원형/완전 pill */ /* --------------------------------------------------------------------------- Sizing - 크기 --------------------------------------------------------------------------- */ /* --------------------------------------------------------------------------- Avatar / Profile - 아바타 크기 Rule: 모두 8의 배수. 5단 (xs/sm/md/lg/xl). --------------------------------------------------------------------------- */ --avatar-size-xs: 24px; /* 리스트, 스택 (3×8) */ --avatar-size-sm: 32px; /* 모달 프로필, 클러스터 (4×8) */ --avatar-size-md: 40px; /* 기본 프로필 (5×8) */ --avatar-size-lg: 56px; /* 큰 프로필 (7×8) */ --avatar-size-xl: 80px; /* 프로필 페이지 (10×8) */ /* Button */ --btn-height-sm: 32px; --btn-height-md: 40px; --btn-height-lg: 48px; --btn-icon-size: 40px; /* 헤더 아이콘 버튼 */ --btn-icon-group-width: 96px; /* 아이콘 2개 그룹 버튼 */ /* --------------------------------------------------------------------------- Icon - 아이콘 크기 (Lucide 베이스) 2pt step. 이 스케일은 app/helpers/icon_helper.rb 의 ICON_SIZES 와 완전히 일치해야 한다 (같은 이름 → 같은 값). 둘 다 수정할 것. --------------------------------------------------------------------------- */ --icon-size-xs: 10px; /* 작은 배지 인디케이터 */ --icon-size-sm: 12px; /* 작은 힌트 */ --icon-size-md: 14px; /* 리스트 메타, 작은 닫기 버튼 */ --icon-size-base: 16px; /* 기본 본문 아이콘 (가장 많이 쓰임) */ --icon-size-lg: 18px; /* 컴팩트 아이콘 (설정, 헤더 일부) */ --icon-size-xl: 20px; /* 헤더 버튼, 일반 아이콘 */ --icon-size-2xl: 24px; /* 주요 액션 아이콘 */ --icon-size-3xl: 32px; /* 프로필, 온보딩 중대형 */ --icon-size-4xl: 48px; /* 빈 상태 / 축하 display */ --icon-size-5xl: 64px; /* 초대형 display */ /* Opacity */ --opacity-pressed: 0.7; /* :active 눌림 피드백 */ --opacity-dimmed: 0.6; /* 보조 텍스트, placeholder */ --opacity-disabled: 0.5; /* disabled 상태 */ --opacity-hint: 0.4; /* 비활성 탭, 힌트 */ /* Focus ring — keyboard navigation only (:focus-visible). */ --focus-ring-width: 2px; --focus-ring-offset: 2px; /* Toggle Switch */ --toggle-width: 48px; --toggle-height: 28px; --toggle-thumb-size: 24px; --toggle-thumb-offset: 20px; /* Drag Handle */ --drag-handle-width: 36px; --drag-handle-height: 4px; /* Input/Textarea Height */ --input-height: 48px; /* 기본 입력 필드 높이 */ --input-height-sm: 40px; /* 작은 입력 필드 높이 */ --textarea-height-sm: 64px; /* 작은 텍스트에어리어 높이 */ --textarea-height-md: 80px; /* 중간 텍스트에어리어 높이 */ --textarea-height-lg: 150px; /* 큰 텍스트에어리어 높이 */ /* Thumbnail */ --thumbnail-size: 80px; /* --------------------------------------------------------------------------- Aspect Ratio - 이미지/미디어 비율 --------------------------------------------------------------------------- */ --aspect-square: 1; /* 1:1 — 썸네일, 갤러리 */ --aspect-photo: 3 / 2; /* 3:2 — 포스트 이미지 표준 */ --aspect-wide: 5 / 2; /* 5:2 — 배너, 커버 */ /* --------------------------------------------------------------------------- Shadow / Elevation Rule: 3-step elevation (sm < md < lg) + 2 special-purpose shadows. --shadow-sm 카드, 입력 필드, 잔잔한 카드 레이어 --shadow-md 드롭다운, 플로팅 버튼 --shadow-lg 대형 카드, 패널 --shadow-modal 바텀시트 (방향 반대, 위쪽으로 올라가는 그림자) --shadow-glass iOS 네이티브 스타일 글래스 pill (composite + highlight) --shadow-warm header-btn 전용 따뜻한 톤 글로우 --------------------------------------------------------------------------- */ --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.08); --shadow-md: 0 4px 20px rgba(0, 0, 0, 0.15); --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.12); --shadow-modal: 0 -4px 20px rgba(0, 0, 0, 0.15); --shadow-glass: 0 2px 10px rgba(0, 0, 0, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.9); --shadow-warm: 0 0 10px rgba(239, 228, 211, 0.25); /* --------------------------------------------------------------------------- Z-Index - 레이어 순서 --------------------------------------------------------------------------- */ --z-base: 1; --z-dropdown: 10; --z-sticky: 20; --z-fixed: 30; --z-modal-backdrop: 40; --z-modal: 50; --z-popover: 60; --z-tooltip: 70; --z-toast: 100; /* --------------------------------------------------------------------------- Transition Timing - 전환 시간 --------------------------------------------------------------------------- */ --transition-fast: 0.15s ease; --transition-normal: 0.25s ease; --transition-slow: 0.3s ease; --modal-easing: cubic-bezier(0.34, 1.56, 0.64, 1); } /* ========================================================================== Shadow Dark Mode Overrides Subtle black shadow (no warm glow on dark bg). ========================================================================== */ html.dark { --shadow-sm: 0 0 10px rgba(0, 0, 0, 0.3); --shadow-md: 0 4px 20px rgba(0, 0, 0, 0.4); --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.5); --shadow-modal: 0 -4px 20px rgba(0, 0, 0, 0.4); --shadow-glass: 0 2px 10px rgba(0, 0, 0, 0.3); --shadow-warm: 0 2px 8px rgba(0, 0, 0, 0.3); }