@simplysm/angular 14.0.49 → 14.0.51

package/docs/providers.md

@@ -1,379 +0,0 @@
-# Providers
-
-## `SdThemeProvider`
-
-다크모드/폰트 크기 프로바이더. `dark` signal 변경 시 body에 `sd-theme-dark` 클래스를 토글하고, `fontSize` signal 변경 시 `html` 요소의 font-size를 설정한다.
-
-```typescript
-@Injectable({ providedIn: "root" })
-class SdThemeProvider {
-  dark = signal<boolean>(false);
-  readonly fontSizePresets: readonly number[] = [12, 14, 16, 20, 24, 28];
-  fontSize = signal<number>(12);
-
-  increaseFontSize(): void;
-  decreaseFontSize(): void;
-}
-```
-
-| Field | Type | Description |
-|-------|------|-------------|
-| `dark` | `WritableSignal<boolean>` | 다크모드 활성화 여부 |
-| `fontSizePresets` | `readonly number[]` | 사용 가능한 폰트 크기 프리셋 배열 |
-| `fontSize` | `WritableSignal<number>` | 현재 폰트 크기 (px). 기본값 12 |
-
-| Method | Description |
-|--------|-------------|
-| `increaseFontSize()` | `fontSizePresets`에서 현재보다 큰 다음 크기로 변경 |
-| `decreaseFontSize()` | `fontSizePresets`에서 현재보다 작은 이전 크기로 변경 |
-
-## `SdThemeSelector`
-
-테마 설정 드롭다운 컴포넌트. 다크모드 토글과 폰트 크기 증감 버튼을 제공한다. `SdThemeProvider`를 inject하여 사용한다.
-
-```typescript
-@Component({
-  selector: "sd-theme-selector",
-  standalone: true,
-})
-class SdThemeSelector {}
-```
-
-inputs 없음. `SdThemeProvider`의 `dark`, `fontSize`를 직접 조작한다.
-
-## `SdSystemLogProvider`
-
-시스템 로그 기록 프로바이더. console 출력 + 커스텀 `writeFn` 콜백 호출.
-
-```typescript
-@Injectable({ providedIn: "root" })
-class SdSystemLogProvider {
-  writeFn?: (severity: "error" | "warn" | "log", ...data: any[]) => Promise<void> | void;
-  async writeAsync(severity: "error" | "warn" | "log", ...data: any[]): Promise<void>;
-}
-```
-
-| Field | Type | Description |
-|-------|------|-------------|
-| `writeFn` | `((severity, ...data) => Promise<void> \| void) \| undefined` | 커스텀 로그 기록 함수 |
-
-| Method | Description |
-|--------|-------------|
-| `writeAsync(severity, ...data)` | console 출력 후 `writeFn` 호출 |
-
-## `SdAppStructureProvider`
-
-앱 구조(메뉴/권한) 관리 프로바이더. 서브클래스 없이 직접 사용한다.
-
-```typescript
-@Injectable({ providedIn: "root" })
-class SdAppStructureProvider<TModule = unknown> {
-  readonly usableModules = signal<TModule[] | undefined>(undefined);
-  readonly permRecord = signal<Record<string, boolean> | undefined>(undefined);
-  readonly items = signal<AppStructureItem<TModule>[]>([]);
-
-  usableMenus: Signal<SdMenu[]>;
-  usableFlatMenus: Signal<SdFlatMenu<TModule>[]>;
-
-  async initialize(serviceKey: string): Promise<void>;
-  getPermissionsByStructure(items, codeChain?): SdPermission<TModule>[];
-  getTitleByFullCode(fullCode: string): string;
-  getItemChainByFullCode(fullCode: string): AppStructureItem<TModule>[];
-  getPermsByFullCode<K extends string>(fullCodes: string[], permKeys: K[]): K[];
-}
-```
-
-| WritableSignal Field | Type | Description |
-|----------------------|------|-------------|
-| `usableModules` | `WritableSignal<TModule[] \| undefined>` | 사용 가능한 모듈 목록. 외부에서 `set()`/`update()`로 설정 |
-| `permRecord` | `WritableSignal<Record<string, boolean> \| undefined>` | 권한 레코드. 외부에서 `set()`/`update()`로 설정 |
-| `items` | `WritableSignal<AppStructureItem<TModule>[]>` | 앱 구조 항목 배열 (`initialize()`로 초기화) |
-
-| Computed | Type | Description |
-|----------|------|-------------|
-| `usableMenus` | `Signal<SdMenu[]>` | 사용 가능한 메뉴 트리 |
-| `usableFlatMenus` | `Signal<SdFlatMenu<TModule>[]>` | 사용 가능한 플랫 메뉴 |
-
-## `injectPermsSignal`
-
-현재 뷰의 권한 목록을 signal로 반환하는 함수. 생성자에서 호출한다.
-
-```typescript
-function injectPermsSignal<K extends string>(viewCodes: string[], keys: K[]): Signal<K[]>
-```
-
-| Parameter | Type | Description |
-|-----------|------|-------------|
-| `viewCodes` | `string[]` | 뷰 코드 배열 |
-| `keys` | `K[]` | 확인할 권한 키 배열 |
-
-반환: 활성화된 권한 키 배열의 signal
-
-## `SdAppStructureUtils`
-
-앱 구조 유틸리티. 정적 메서드로 메뉴/권한 조회 로직을 제공한다.
-
-```typescript
-abstract class SdAppStructureUtils {
-  static getTitleByFullCode<TModule>(items, fullCode): string;
-  static getPermsByFullCode<TModule, K extends string>(items, fullCodes, permKeys, permRecord): K[];
-  static getItemChainByFullCode<TModule>(items, fullCode): AppStructureItem<TModule>[];
-  static getMenus<TModule>(items, codeChain, usableModules, permRecord): SdMenu[];
-  static getFlatMenus<TModule>(items, usableModules, permRecord): SdFlatMenu<TModule>[];
-  static getPermissions<TModule>(items, codeChain, usableModules): SdPermission<TModule>[];
-  static getFlatPermissions<TModule>(items, usableModules): FlatPermission<TModule>[];
-}
-```
-
-## `SdFileDialogProvider`
-
-네이티브 파일 선택 대화상자 프로바이더.
-
-```typescript
-@Injectable({ providedIn: "root" })
-class SdFileDialogProvider {
-  async showAsync(multiple?: false, accept?: string): Promise<File | undefined>;
-  async showAsync(multiple: true, accept?: string): Promise<File[] | undefined>;
-}
-```
-
-| Parameter | Type | Description |
-|-----------|------|-------------|
-| `multiple` | `boolean` | 다중 선택 여부 |
-| `accept` | `string` | 허용 파일 타입 (예: `"image/*"`) |
-
-## `SdLocalStorageProvider`
-
-`clientName` 스코프 localStorage 래퍼. 키가 `{clientName}.{key}` 형태로 저장된다.
-
-```typescript
-@Injectable({ providedIn: "root" })
-class SdLocalStorageProvider<T> {
-  set<K extends keyof T & string>(key: K, value: T[K]): void;
-  get<K extends keyof T & string>(key: K): T[K] | undefined;
-  remove(key: keyof T & string): void;
-}
-```
-
-## `SdSystemConfigProvider`
-
-비동기 설정 저장/조회 프로바이더. `fn` 필드를 설정하면 서버 저장, 미설정 시 localStorage에 저장.
-
-```typescript
-@Injectable({ providedIn: "root" })
-class SdSystemConfigProvider<T> {
-  fn?: {
-    set<K extends keyof T & string>(key: K, data: T[K]): Promise<void> | void;
-    get(key: keyof T & string): PromiseLike<any>;
-  };
-
-  async setAsync<K extends keyof T & string>(key: K, data: T[K]): Promise<void>;
-  async getAsync(key: keyof T & string): Promise<any>;
-}
-```
-
-## `SdServiceClientFactoryProvider`
-
-ServiceClient 인스턴스 팩토리/관리. key별로 연결을 관리한다.
-
-```typescript
-@Injectable({ providedIn: "root" })
-class SdServiceClientFactoryProvider {
-  async connectAsync(key: string, options?: Partial<ServiceConnectionOptions>): Promise<void>;
-  async closeAsync(key: string): Promise<void>;
-  get(key: string): ServiceClient;
-}
-```
-
-| Method | Description |
-|--------|-------------|
-| `connectAsync(key, options?)` | WebSocket 연결. 요청/응답 진행률을 토스트로 표시 |
-| `closeAsync(key)` | 연결 종료 |
-| `get(key)` | 연결된 ServiceClient 인스턴스 반환 |
-
-## `SdSharedDataProvider`
-
-이벤트 기반 공유 데이터 캐시 추상 프로바이더. `@Injectable()`로 제공되며, 소비 프로젝트에서 상속한다.
-
-내부적으로 `client.getEvent()` 프록시를 사용하여 이벤트를 구독/발행한다:
-- `client.getEvent<typeof SdSharedDataChangeEvent>("SdSharedDataChange").addListener(info, cb)`
-- `client.getEvent<typeof SdSharedDataChangeEvent>("SdSharedDataChange").emit(selector, data)`
-
-```typescript
-@Injectable()
-abstract class SdSharedDataProvider<T extends Record<string, SharedDataBase<string | number>>> {
-  readonly loadingCount: WritableSignal<number>;
-
-  abstract initialize(): void;
-  register<K extends string & keyof T>(name: K, info: SharedDataInfo<T[K]>): void;
-  getHandle<K extends string & keyof T>(name: K): SharedDataHandle<T[K]>;
-  async emitAsync<K extends string & keyof T>(name: K, changeKeys?: (string | number)[]): Promise<void>;
-  async wait(): Promise<void>;
-}
-```
-
-| Method | Description |
-|--------|-------------|
-| `register(name, info)` | 공유 데이터 등록 (getter, serviceKey, filter, orderBy) |
-| `getHandle(name)` | 등록된 공유 데이터 핸들 반환 (items signal + get 메서드) |
-| `emitAsync(name, changeKeys?)` | 변경 이벤트 발행. 내부에서 `client.getEvent<typeof SdSharedDataChangeEvent>("SdSharedDataChange").emit(...)` 호출 |
-| `wait()` | 모든 로딩 완료까지 대기 |
-
-### 로딩 전략 (Lazy Loading)
-
-**`register()`는 메타정보만 등록하고 실제 데이터를 가져오지 않는다.** 타입별 데이터는 해당 타입의 `getHandle(name)`이 **처음 호출되는 시점**에 `info.getter()`를 실행하여 로딩된다. 즉 `initialize()`에서 여러 타입을 `register()` 해도 앱 시작 시 전체가 일괄 로딩되지 않으며, 실제로 사용되는 타입만 온디맨드로 로딩된다.
-
-- 첫 `getHandle()` 호출 → `getter()` 실행 + `SdSharedDataChange` 리스너 등록
-- 이후 같은 타입의 `getHandle()` 호출은 캐시된 `itemsSignal`을 재사용
-- 이후 갱신은 서버에서 `emitAsync()`로 발행된 `SdSharedDataChange` 이벤트 수신 시에만 발생 (`changeKeys`가 있으면 부분 업데이트, 없으면 전체 리로드)
-- `register()`를 동일 `name`으로 재호출하면 `generation`이 증가하고 `needsReload=true`로 표시되어, 다음 `getHandle()` 호출 시 재로딩된다
-
-## `SdSharedDataChangeEvent`
-
-공유 데이터 변경 이벤트 정의. `defineEvent`로 생성되며, 이벤트 이름 문자열 `"SdSharedDataChange"`를 인자로 받는다.
-
-```typescript
-const SdSharedDataChangeEvent = defineEvent<
-  { name: string; filter: unknown },
-  (string | number)[] | undefined
->("SdSharedDataChange");
-```
-
-## `SdNavigateWindowProvider`
-
-새 윈도우 네비게이션 + 자동 닫기 프로바이더.
-
-```typescript
-@Injectable({ providedIn: "root" })
-class SdNavigateWindowProvider {
-  get isWindow(): boolean;
-  open(navigate: string, params?: Record<string, string>, features?: string): void;
-}
-```
-
-| Property/Method | Description |
-|-----------------|-------------|
-| `isWindow` | 현재 페이지가 팝업 윈도우인지 여부 |
-| `open(navigate, params?, features?)` | 새 윈도우 열기. `features` 지정 시 팝업, 미지정 시 새 탭 |
-
-## `SdActivatedModalProvider`
-
-모달 내부에서 inject하여 모달/컨텐츠 컴포넌트 참조를 얻는 프로바이더. `@Injectable()`로 모달별 인스턴스 생성.
-
-```typescript
-@Injectable()
-class SdActivatedModalProvider<T extends SdModalContentDef<any> = SdModalContentDef<any>> {
-  modalComponent = signal<any>(undefined);
-  contentComponent = signal<T | undefined>(undefined);
-  canDeactivateFn: () => boolean;
-}
-```
-
-| Field | Type | Description |
-|-------|------|-------------|
-| `modalComponent` | `WritableSignal<any>` | SdModal 인스턴스 |
-| `contentComponent` | `WritableSignal<T \| undefined>` | 컨텐츠 컴포넌트 인스턴스 |
-| `canDeactivateFn` | `() => boolean` | 모달 닫기 가능 여부 판별 함수 (기본: `() => true`) |
-
-## `SdToastProvider`
-
-토스트 알림 프로바이더. 4가지 심각도(info/success/warning/danger) 메시지, 프로그래스 모드, 커스텀 토스트를 지원한다.
-
-```typescript
-@Injectable({ providedIn: "root" })
-class SdToastProvider {
-  alertThemes = signal<SdToastSeverity[]>([]);
-  overlap = signal(false);
-  beforeShowFn?: (theme: SdToastSeverity) => void;
-
-  info(message: string, useProgress?: true): WritableSignal<number>;
-  info(message: string, useProgress?: false): void;
-  success(message: string, useProgress?: true): WritableSignal<number>;
-  success(message: string, useProgress?: false): void;
-  warning(message: string, useProgress?: true): WritableSignal<number>;
-  warning(message: string, useProgress?: false): void;
-  danger(message: string, useProgress?: true): WritableSignal<number>;
-  danger(message: string, useProgress?: false): void;
-
-  notify<T extends SdToastContentDef<any>>(input: SdToastInput<T>): Promise<...>;
-  async try<R>(fn: () => Promise<R>, messageFn?: (err: Error) => string): Promise<R | undefined>;
-  try<R>(fn: () => R, messageFn?: (err: Error) => string): R | undefined;
-}
-```
-
-| Field | Type | Description |
-|-------|------|-------------|
-| `alertThemes` | `WritableSignal<SdToastSeverity[]>` | alert()로 표시할 테마 목록 |
-| `overlap` | `WritableSignal<boolean>` | 오버랩 모드 (새 토스트 시 기존 제거) |
-| `beforeShowFn` | `((theme) => void) \| undefined` | 토스트 표시 전 콜백 |
-
-| Method | Description |
-|--------|-------------|
-| `info/success/warning/danger(message, useProgress?)` | 토스트 표시. `useProgress=true`면 progress signal 반환 |
-| `notify(input)` | 커스텀 토스트 컴포넌트 표시 |
-| `try(fn, messageFn?)` | 에러 catch 시 danger 토스트 표시 후 undefined 반환 |
-
-## `SdBusyProvider`
-
-글로벌 busy 상태 관리 프로바이더.
-
-```typescript
-@Injectable({ providedIn: "root" })
-class SdBusyProvider {
-  type = signal<SdBusyType>("bar");
-  globalBusyCount = signal(0);
-}
-```
-
-| Field | Type | Description |
-|-------|------|-------------|
-| `type` | `WritableSignal<SdBusyType>` | busy 표시 유형 (`"spinner" \| "bar" \| "cube"`) |
-| `globalBusyCount` | `WritableSignal<number>` | 글로벌 busy 카운트 (0보다 크면 busy 표시) |
-
-## `SdPrintProvider`
-
-인쇄 및 PDF 생성 프로바이더. jsPDF + html-to-image 사용.
-
-```typescript
-@Injectable({ providedIn: "root" })
-class SdPrintProvider {
-  async printAsync<T extends SdPrint>(
-    template: SdPrintInput<T>,
-    options?: { size?: string; margin?: string },
-  ): Promise<void>;
-
-  async getPdfBufferAsync<T extends SdPrint>(
-    template: SdPrintInput<T>,
-    options?: { orientation?: "portrait" | "landscape"; pageSize?: string },
-  ): Promise<Uint8Array>;
-}
-```
-
-| Method | Description |
-|--------|-------------|
-| `printAsync(template, options?)` | 브라우저 인쇄 대화상자 열기. `size` 기본값 `"A4 auto"`, `margin` 기본값 `"0"` |
-| `getPdfBufferAsync(template, options?)` | PDF 바이너리 생성. `.page` 클래스 요소 단위로 페이지 분할 |
-
-## `SdModalProvider`
-
-프로그래밍 방식으로 모달을 생성하는 프로바이더.
-
-```typescript
-@Injectable({ providedIn: "root" })
-class SdModalProvider {
-  modalCount = signal(0);
-
-  async showAsync<T extends SdModalContentDef<any>>(
-    modal: SdModalInfo<T>,
-    options?: SdModalOptions,
-  ): Promise<Parameters<T["close"]["emit"]>[0] | undefined>;
-}
-```
-
-| Field | Type | Description |
-|-------|------|-------------|
-| `modalCount` | `WritableSignal<number>` | 현재 열린 모달 수 |
-
-| Method | Description |
-|--------|-------------|
-| `showAsync(modal, options?)` | 모달 생성 후 close 결과를 Promise로 반환 |

package/docs/styling.md

@@ -1,222 +0,0 @@
-# Styling
-
-`dist/styles.css`로 컴파일되며, `package.json`의 `style` 필드에서 참조된다. CSS Layers: `@layer base, theme-variant, utilities`.
-
-## CSS Classes
-
-### Flexbox
-
-| Class | Description |
-|-------|-------------|
-| `.flex-row` | `display: flex; flex-direction: row; flex-wrap: nowrap` |
-| `.flex-column` | `display: flex; flex-direction: column; flex-wrap: nowrap` |
-| `.flex-row-inline` | `display: inline-flex; flex-direction: row` |
-| `.flex-column-inline` | `display: inline-flex; flex-direction: column` |
-| `.flex-fill` | `flex: 1 1 auto; overflow: auto` (가용 공간 채우기) |
-| `.flex-auto` | `flex: 1 0 auto` (컨텐츠 크기 유지하며 확장) |
-| `.flex-min` | `flex: 0 0 0` (최소 크기) |
-
-### Grid
-
-| Class | Description |
-|-------|-------------|
-| `.grid` | `display: grid` |
-| `.grid-{1..12}` | `grid-template-columns: repeat(N, 1fr)` |
-| `.grid-sm-{1..12}` | `@media (max-width: 1280px)` 반응형 |
-| `.grid-xs-{1..12}` | `@media (max-width: 1024px)` 반응형 |
-| `.grid-xxs-{1..12}` | `@media (max-width: 800px)` 반응형 |
-
-### Layout
-
-| Class | Description |
-|-------|-------------|
-| `.card` | 카드 스타일 (배경, 테두리, 라운드, 엘리베이션) |
-| `.fill` | `height: 100%; width: 100%; overflow: auto` |
-| `.sticky-top` | `position: sticky; top: 0; z-index: 1` |
-| `.overflow-auto` | `overflow: auto` |
-| `.position-relative` | `position: relative` |
-| `.nowrap` | `white-space: nowrap` |
-
-### Form Layout
-
-| Class | Description |
-|-------|-------------|
-| `.form-box` | 폼 박스 레이아웃 |
-| `.form-box-inline` | 인라인 폼 박스 |
-| `.form-table` | 테이블 형태 폼 |
-| `.form-control` | 기본 폼 컨트롤 스타일 (padding, border, font) |
-| `.table` | 테이블 스타일 |
-| `.table-inset` | 테두리 없는 테이블 |
-| `.table-inline` | 인라인 테이블 |
-| `.table-bd-v` | 수직 테두리만 있는 테이블 |
-| `.table-bd-h` | 수평 테두리만 있는 테이블 |
-
-### Spacing
-
-키: `xxs`, `xs`, `sm`, `default`, `lg`, `xl`, `xxl`, `0`, `auto`
-
-| Pattern | Description |
-|---------|-------------|
-| `.p-{key}` | 전체 padding |
-| `.pv-{key}`, `.ph-{key}` | 수직/수평 padding |
-| `.pt-{key}`, `.pr-{key}`, `.pb-{key}`, `.pl-{key}` | 방향별 padding |
-| `.m-{key}` | 전체 margin |
-| `.mv-{key}`, `.mh-{key}` | 수직/수평 margin |
-| `.mt-{key}`, `.mr-{key}`, `.mb-{key}`, `.ml-{key}` | 방향별 margin |
-| `.gap-{key}` | flex/grid gap |
-| `.sw-{key}` | width 설정 |
-| `.sh-{key}` | height 설정 |
-| `.p-{key1}-{key2}` | `padding: {key1} {key2}` 조합 |
-
-### Font Size
-
-| Class | Description |
-|-------|-------------|
-| `.ft-size-{key}` | 폰트 크기 (h1~h6, sm, default, lg 등) |
-
-### Text
-
-| Class | Description |
-|-------|-------------|
-| `.tx-left`, `.tx-right`, `.tx-center` | 텍스트 정렬 |
-| `.tx-line-through` | 취소선 |
-| `.tx-underline` | 밑줄 |
-| `.tx-trans-{key}` | 텍스트 투명도 색상 |
-| `.tx-theme-{group}-{shade}` | 테마 텍스트 색상 |
-
-### Background
-
-| Class | Description |
-|-------|-------------|
-| `.bg-theme-{group}-{shade}` | 테마 배경 색상 |
-| `.bg-trans-{key}` | 투명도 배경 |
-| `.bg-default` | 기본 배경 |
-| `.bg-control` | 컨트롤 배경 |
-
-### Border
-
-| Class | Description |
-|-------|-------------|
-| `.bd` | 전체 테두리 |
-| `.bdt`, `.bdr`, `.bdb`, `.bdl` | 방향별 테두리 |
-| `.bd-theme-{group}-{shade}` | 테마 테두리 색상 |
-| `.bd-trans-{key}` | 투명도 테두리 |
-| `.bd-none`, `.bd-transparent` | 테두리 없음/투명 |
-| `.bd-radius-{key}` | 테두리 라운드 |
-| `.bd-width-{key}` | 테두리 두께 |
-
-### Alignment
-
-| Class | Description |
-|-------|-------------|
-| `.main-align-start`, `.main-align-end`, `.main-align-center` | justify-content |
-| `.cross-align-start`, `.cross-align-end`, `.cross-align-center` | align-items |
-
-### Special
-
-| Class | Description |
-|-------|-------------|
-| `.sh-topbar` | 탑바 높이 |
-| `.sw-sidebar` | 사이드바 너비 |
-| `.help` | 도움말 스타일 (점선 밑줄, 도움말 커서) |
-| `.control-header` | 컨트롤 헤더 텍스트 |
-| `.page-header` | 페이지 헤더 텍스트 |
-
-## CSS Custom Properties
-
-### Theme Colors
-
-OKLCH 기반 색상 팔레트. 각 그룹에 7단계 shade가 있다.
-
-테마 그룹: `gray`, `blue-gray`, `primary`, `secondary`, `info`, `success`, `warning`, `danger`
-
-| Property | Description |
-|----------|-------------|
-| `--theme-{group}-lightest` | 가장 밝은 색조 |
-| `--theme-{group}-lighter` | 더 밝은 색조 |
-| `--theme-{group}-light` | 밝은 색조 |
-| `--theme-{group}-default` | 기본 색조 |
-| `--theme-{group}-dark` | 어두운 색조 |
-| `--theme-{group}-darker` | 더 어두운 색조 |
-| `--theme-{group}-darkest` | 가장 어두운 색조 |
-
-### Layout
-
-| Property | Description |
-|----------|-------------|
-| `--background-color` | body 배경 색상 |
-| `--control-color` | 컨트롤 배경 색상 |
-| `--font-family` | 기본 폰트 패밀리 |
-| `--font-family-monospace` | 고정폭 폰트 패밀리 |
-| `--font-size-default` | 기본 폰트 크기 |
-| `--line-height` | 기본 줄 높이 |
-| `--border-radius-default` | 기본 테두리 라운드 |
-| `--topbar-height` | 탑바 높이 |
-| `--sidebar-width` | 사이드바 너비 |
-| `--elevation-size` | 그림자 기본 크기 |
-| `--animation-duration` | 애니메이션 지속 시간 |
-
-### Gap (Spacing)
-
-| Property | Description |
-|----------|-------------|
-| `--gap-xxs` | 가장 작은 간격 |
-| `--gap-xs` | 매우 작은 간격 |
-| `--gap-sm` | 작은 간격 |
-| `--gap-default` | 기본 간격 |
-| `--gap-lg` | 큰 간격 |
-| `--gap-xl` | 매우 큰 간격 |
-| `--gap-xxl` | 가장 큰 간격 |
-
-### Transparency
-
-| Property | Description |
-|----------|-------------|
-| `--trans-lightest` | 가장 투명한 반투명 |
-| `--trans-lighter` | 더 투명한 반투명 |
-| `--trans-light` | 투명한 반투명 |
-| `--trans-default` | 기본 반투명 |
-| `--trans-dark` | 불투명한 반투명 |
-| `--trans-darker` | 더 불투명한 반투명 |
-| `--trans-darkest` | 가장 불투명한 반투명 |
-
-### Text Transparency
-
-| Property | Description |
-|----------|-------------|
-| `--text-trans-default` | 기본 텍스트 색상 |
-| `--text-trans-light` | 밝은 텍스트 색상 |
-| `--text-trans-lighter` | 더 밝은 텍스트 색상 |
-| `--text-trans-dark` | 어두운 텍스트 색상 |
-
-## Themes
-
-### `.sd-theme-dark`
-
-다크 모드 테마. `SdThemeProvider.dark` signal로 body에 토글된다. `themes/_variables-dark.scss`에서 색상 팔레트를 반전한다.
-
-- 배경: 어두운 색상으로 전환
-- 텍스트: 밝은 색상으로 전환
-- `img:not(.no-invert)`: 이미지 자동 반전
-
-### Responsive Breakpoints
-
-SCSS 변수로 정의되어 media query에서 사용된다:
-
-| Variable | Value | Description |
-|----------|-------|-------------|
-| `$breakpoint-mobile` | `520px` | 모바일 |
-| `$breakpoint-xxs` | `800px` | 매우 작은 화면 |
-| `$breakpoint-xs` | `1024px` | 작은 화면 |
-| `$breakpoint-sm` | `1280px` | 중간 화면 |
-
-## Mixins / Functions
-
-| Name | Signature | Description |
-|------|-----------|-------------|
-| `writeVars` | `@mixin writeVars($value, $prevKey)` | 맵을 재귀 순회하여 CSS custom properties 생성 |
-| `elevation` | `@mixin elevation($value)` | box-shadow 기반 엘리베이션 효과. 양수=외부, 음수=내부, 0/none=없음 |
-| `form-control-base` | `@mixin form-control-base()` | 폼 컨트롤 기본 스타일 (display, padding, border, font) |
-| `help` | `@mixin help()` | 도움말 스타일 (점선 밑줄, 커서) |
-| `border-direction-variants` | `@mixin border-direction-variants($dir, $d)` | 방향별 테두리 유틸리티 클래스 생성 |
-| `flex-direction` | `@mixin flex-direction($direction, $defaultGap?)` | flex-direction 설정 + Chrome 61 gap 폴백 |