// ───────────────────────────────────────────────────────────── // D6 디자인 토큰 — 레이아웃 / 타이포 / 간격 (d6-design-system.md §3.3, §4) // WIDE fluid 원칙: max-width 없음, 브레이크포인트 4단 // mobile <768 / tablet 768~1123.98 / desktop 1124~1535.98 / wide ≥1536 // ───────────────────────────────────────────────────────────── :root { // 그리드 셸 --header-h: 56px; --ticker-h: 32px; --az-sidebar-w: 220px; // 좌 사이드바 기본 폭 — 런타임 토글(--antooza-sidebar-width)이 우선 --az-utility-w: 280px; // 우 유틸 슬롯 폭 // 간격 스케일 (2/4/8/12/16/24/32) --sp-1: 2px; --sp-2: 4px; --sp-3: 8px; --sp-4: 12px; --sp-5: 16px; --sp-6: 24px; --sp-7: 32px; // 타이포 스케일 (base 14px — tailwind fontSize.base 와 동일) --fs-2xs: 11px; --fs-xs: 12px; --fs-sm: 13px; --fs-base: 14px; --fs-lg: 16px; --fs-xl: 18px; --fs-2xl: 22px; // 포커스 링 (접근성 — :focus-visible 전역 적용은 globals.scss) --focus-ring-width: 2px; --focus-ring-color: var(--az-accent); // shadcn radius (테마 무관 — 기존 값 승계) --radius: 0.5rem; } // desktop(1124~1535.98px): 좌 사이드바 아이콘 모드(64px)가 기본 @media (min-width: 1124px) and (max-width: 1535.98px) { :root { --az-sidebar-w: 64px; } } // wide(≥1536px): 우 유틸 확장 @media (min-width: 1536px) { :root { --az-utility-w: 320px; } }