@simplysm/angular 14.2.1 → 14.2.3

package/scss/commons/_variables.scss

@@ -10,91 +10,93 @@ $breakpoint-sm: 1280px;
 //
 // 규칙:
 // - 어휘(DEC-013): 색 어휘는 --sd-{bg|tx|bd}-… 속성 우선. 유틸 클래스명 = 토큰명에서 --sd- 만 뗀 것.
-//   hover 변형은 -hover 접미. 비색상·컴포넌트 전용 그룹(팔레트·focus-ring·scrollbar·shadow·타이포·치수·z)은 그룹 구조 유지.
-// - 체이닝 금지: var() 참조는 팔레트(--sd-color-*, 테마 불변)로만 허용.
-//   테마·밀도가 덮는 토큰끼리의 체인은 재정의 스코프에서 하위가 안 따라오므로 리터럴로 푼다.
-// - 색 원천: 팔레트 + 흰/검 알파(rgba white/black)만. 커스텀 rgb 리터럴 금지.
-// - 라이트 기본값은 구 스케일 토큰과 시각 등가(값 불변·이름만 역할화).
-// - 구 스케일 어휘(--theme-*·--trans-*·--text-trans-* 등)는 발행하지 않는다(14.2 에서 발행 종료·브레이킹).
+//   hover 변형은 -hover 접미. 비색상, 컴포넌트 전용 그룹(focus-ring, scrollbar, shadow, 타이포, 치수, z)은 그룹 구조 유지.
+// - 색 원천: 리터럴 rgb + 흰/검 알파. 팔레트(--sd-color-*) 배타 모델은 폐기됨(테마 값 자립).
+//   테마, 밀도가 덮는 토큰끼리의 체인은 재정의 스코프에서 하위가 안 따라오므로 리터럴로 푼다.
+// - 라이트 기본값은 구 팔레트 스텝과 시각 등가(값 불변, 표기만 리터럴화).
+// - 구 스케일 어휘(--theme-*, --trans-*, --text-trans-*, --sd-color-* 등)는 발행하지 않는다(브레이킹).
 // ---------------------------------------------------------------------------
 // 시맨틱 키 목록 — 컴포넌트 theme 변형 @each 순회용 (토큰 아님)
-$theme-keys: ("gray", blue-gray, primary, secondary, info, success, warning, danger);
+$theme-keys: ("gray", blue-gray, primary, info, success, warning, danger);
 
 $sd: (
   // 배경(bg)
   bg: (
-      // 표면 — 앱 배경(canvas)·컨트롤(control)·카드/모달(elevated)·드롭다운/팝업(overlay)·시트(sheet)·반전면(inverse)
-      canvas: var(--sd-color-zinc-50),
+      // 표면 — 앱 배경(canvas), 콘텐츠 면(content), 카드/모달(elevated), 드롭다운/팝업(overlay), 시트(sheet), 반전면(inverse)
+      canvas: rgb(250, 250, 250),
       // 배경 패턴(블루프린트 모눈 등) — 값 맵으로 패턴까지 테마화. 소비측은 background 단축 금지.
       canvas-image: none,
-      control: white,
+      // 콘텐츠(에디터/본문) 면 — 메인, 시트셀, 리스트, inset 콘텐츠
+      content: white,
       elevated: white,
       overlay: white,
-      sheet: var(--sd-color-zinc-50),
+      sheet: rgb(250, 250, 250),
       // 시트 컨테이너 배경 패턴(블루프린트 모눈 등) — canvas-image 와 별개 축(방침 1, 2026-07-16 확정)
       sheet-image: none,
       inverse: black,
-      // 필드(인풋류) 면 — 구 "--theme-secondary-lightest 필드 배경 관례" 해체
-      field: var(--sd-color-blue-50),
-      // 트랙 면(스위치 off 트랙 등 손잡이·채움 뒤의 궤도) — 준역할(2026-07-16 확정)
-      track: var(--sd-color-zinc-100),
-      // 시맨틱 면 — solid(짙은 면)·subtle(옅은 면), hover 변형 포함
+      // 필드(인풋류) 면 — 구 "--theme-secondary-lightest 필드 배경 관례" 해체 (blue-50 등가)
+      field: rgb(239, 246, 255),
+      // 트랙 면(스위치 off 트랙 등 손잡이, 채움 뒤의 궤도) — 준역할(2026-07-16 확정) (zinc-100 등가)
+      track: rgb(244, 244, 245),
+      // 스위치 노브(손잡이) 면 — 트랙 위로 도드라지는 별도 부품. 라이트 white
+      knob: white,
+      // 체크박스 박스 면 — VS Code checkbox.background 별도 면. 라이트는 white(현행 관례 유지)
+      checkbox: white,
+      // 시맨틱 면 — solid(짙은 면), subtle(옅은 면), hover 변형 포함
       "gray": (
-          solid: var(--sd-color-zinc-400),
-          solid-hover: var(--sd-color-zinc-500),
-          subtle: var(--sd-color-zinc-50),
-          subtle-hover: var(--sd-color-zinc-100),
+          solid: rgb(159, 159, 169),
+          solid-hover: rgb(113, 113, 123),
+          subtle: rgb(250, 250, 250),
+          subtle-hover: rgb(244, 244, 245),
         ),
       blue-gray: (
-        solid: var(--sd-color-slate-400),
-        solid-hover: var(--sd-color-slate-500),
-        subtle: var(--sd-color-slate-50),
-        subtle-hover: var(--sd-color-slate-100),
+        solid: rgb(144, 161, 185),
+        solid-hover: rgb(98, 116, 142),
+        subtle: rgb(248, 250, 252),
+        subtle-hover: rgb(241, 245, 249),
       ),
       primary: (
-        solid: var(--sd-color-blue-500),
-        solid-hover: var(--sd-color-blue-600),
-        subtle: var(--sd-color-blue-50),
-        subtle-hover: var(--sd-color-blue-100),
-      ),
-      secondary: (
-        solid: var(--sd-color-blue-500),
-        solid-hover: var(--sd-color-blue-600),
-        subtle: var(--sd-color-blue-50),
-        subtle-hover: var(--sd-color-blue-100),
+        solid: rgb(43, 127, 255),
+        solid-hover: rgb(21, 93, 252),
+        subtle: rgb(239, 246, 255),
+        subtle-hover: rgb(219, 234, 254),
       ),
       info: (
-        solid: var(--sd-color-cyan-500),
-        solid-hover: var(--sd-color-cyan-600),
-        subtle: var(--sd-color-cyan-50),
-        subtle-hover: var(--sd-color-cyan-100),
+        solid: rgb(0, 184, 219),
+        solid-hover: rgb(0, 146, 184),
+        subtle: rgb(236, 254, 255),
+        subtle-hover: rgb(206, 250, 254),
       ),
       success: (
-        solid: var(--sd-color-lime-500),
-        solid-hover: var(--sd-color-lime-600),
-        subtle: var(--sd-color-lime-50),
-        subtle-hover: var(--sd-color-lime-100),
+        solid: rgb(124, 207, 0),
+        solid-hover: rgb(94, 165, 0),
+        subtle: rgb(247, 254, 231),
+        subtle-hover: rgb(236, 252, 202),
       ),
       warning: (
-        solid: var(--sd-color-orange-500),
-        solid-hover: var(--sd-color-orange-600),
-        subtle: var(--sd-color-orange-50),
-        subtle-hover: var(--sd-color-orange-100),
+        solid: rgb(255, 105, 0),
+        solid-hover: rgb(245, 73, 0),
+        subtle: rgb(255, 247, 237),
+        subtle-hover: rgb(255, 237, 212),
       ),
       danger: (
-        solid: var(--sd-color-red-500),
-        solid-hover: var(--sd-color-red-600),
-        subtle: var(--sd-color-red-50),
-        subtle-hover: var(--sd-color-red-100),
+        solid: rgb(251, 44, 54),
+        solid-hover: rgb(231, 0, 11),
+        subtle: rgb(254, 242, 242),
+        subtle-hover: rgb(255, 226, 226),
       ),
       // 상태 오버레이(알파) — hover/active/selected 전 컨트롤 공통
       state: (
           hover: rgba(0, 0, 0, 0.05),
           active: rgba(0, 0, 0, 0.1),
           selected: rgba(0, 0, 0, 0.07),
+          // 포커스 없는 선택행 — solid(list.inactiveSelection). 흰/검 알파로 못 담아 solid
+          selected-inactive: rgb(228, 228, 231),
         ),
-      // 비활성 — 색 치환 단일 규약(opacity 방식 폐기)
-      disabled: var(--sd-color-zinc-100),
+      // 드롭 자리표시(accent 알파)
+      drop-target: rgba(43, 127, 255, 0.1),
+      // 비활성 — 색 치환 단일 규약(opacity 방식 폐기) (zinc-100 등가)
+      disabled: rgb(244, 244, 245),
       busy-overlay: rgba(255, 255, 255, 0.6),
       // busy 로딩 인디케이터 그래픽 면(큐브 로더 등) — 준역할(2026-07-16 확정)
       busy-indicator: rgba(0, 0, 0, 0.1),
@@ -108,99 +110,90 @@ $sd: (
       muted: rgba(0, 0, 0, 0.6),
       faint: rgba(0, 0, 0, 0.38),
       on-inverse: white,
-      // 반전면 위 보조 텍스트(hover 감쇠·비활성) — 준역할(2026-07-16 확정)
+      // 반전면 위 보조 텍스트(hover 감쇠, 비활성) — 준역할(2026-07-16 확정)
       on-inverse-muted: rgba(255, 255, 255, 0.7),
       on-inverse-disabled: rgba(255, 255, 255, 0.5),
       disabled: rgba(0, 0, 0, 0.38),
-      // 시맨틱 텍스트 — {key}(단독 텍스트·아이콘·링크, +hover)·{key}-solid(solid 면 위)·{key}-subtle(subtle 면 위)
+      // 시맨틱 텍스트 — {key}(단독 텍스트, 아이콘, 링크, +hover), {key}-solid(solid 면 위), {key}-subtle(subtle 면 위)
       // tx-{key} 가 리프라 시맨틱 키는 중첩 없이 평탄 표기
-      "gray": var(--sd-color-zinc-400),
-      gray-hover: var(--sd-color-zinc-500),
+      "gray": rgb(159, 159, 169),
+      gray-hover: rgb(113, 113, 123),
       gray-solid: white,
-      gray-subtle: var(--sd-color-zinc-600),
-      blue-gray: var(--sd-color-slate-400),
-      blue-gray-hover: var(--sd-color-slate-500),
+      gray-subtle: rgb(82, 82, 92),
+      blue-gray: rgb(144, 161, 185),
+      blue-gray-hover: rgb(98, 116, 142),
       blue-gray-solid: white,
-      blue-gray-subtle: var(--sd-color-slate-600),
-      primary: var(--sd-color-blue-500),
-      primary-hover: var(--sd-color-blue-600),
+      blue-gray-subtle: rgb(69, 85, 108),
+      primary: rgb(43, 127, 255),
+      primary-hover: rgb(21, 93, 252),
       primary-solid: white,
-      primary-subtle: var(--sd-color-blue-700),
-      secondary: var(--sd-color-blue-500),
-      secondary-hover: var(--sd-color-blue-600),
-      secondary-solid: white,
-      secondary-subtle: var(--sd-color-blue-700),
-      info: var(--sd-color-cyan-500),
-      info-hover: var(--sd-color-cyan-600),
+      primary-subtle: rgb(20, 71, 230),
+      info: rgb(0, 184, 219),
+      info-hover: rgb(0, 146, 184),
       info-solid: white,
-      info-subtle: var(--sd-color-cyan-700),
-      success: var(--sd-color-lime-500),
-      success-hover: var(--sd-color-lime-600),
+      info-subtle: rgb(0, 117, 149),
+      success: rgb(124, 207, 0),
+      success-hover: rgb(94, 165, 0),
       success-solid: white,
-      success-subtle: var(--sd-color-lime-700),
-      warning: var(--sd-color-orange-500),
-      warning-hover: var(--sd-color-orange-600),
+      success-subtle: rgb(73, 125, 0),
+      warning: rgb(255, 105, 0),
+      warning-hover: rgb(245, 73, 0),
       warning-solid: white,
-      warning-subtle: var(--sd-color-orange-700),
-      danger: var(--sd-color-red-500),
-      danger-hover: var(--sd-color-red-600),
+      warning-subtle: rgb(202, 53, 0),
+      danger: rgb(251, 44, 54),
+      danger-hover: rgb(231, 0, 11),
       danger-solid: white,
-      danger-subtle: var(--sd-color-red-700),
+      danger-subtle: rgb(193, 0, 7),
     ),
   // 보더(bd)
   bd: (
-      hairline: var(--sd-color-zinc-100),
-      soft: var(--sd-color-zinc-200),
-      default: var(--sd-color-zinc-300),
-      strong: var(--sd-color-zinc-400),
-      emphasis: var(--sd-color-zinc-500),
-      field: var(--sd-color-zinc-300),
-      disabled: var(--sd-color-zinc-200),
-      // 시맨틱 보더 — solid(+hover)·subtle
+      hairline: rgb(244, 244, 245),
+      soft: rgb(228, 228, 231),
+      default: rgb(212, 212, 216),
+      strong: rgb(159, 159, 169),
+      emphasis: rgb(113, 113, 123),
+      field: rgb(212, 212, 216),
+      disabled: rgb(228, 228, 231),
+      // 시맨틱 보더 — solid(+hover), subtle
       "gray": (
-          solid: var(--sd-color-zinc-400),
-          solid-hover: var(--sd-color-zinc-500),
-          subtle: var(--sd-color-zinc-300),
+          solid: rgb(159, 159, 169),
+          solid-hover: rgb(113, 113, 123),
+          subtle: rgb(212, 212, 216),
         ),
       blue-gray: (
-        solid: var(--sd-color-slate-400),
-        solid-hover: var(--sd-color-slate-500),
-        subtle: var(--sd-color-slate-300),
+        solid: rgb(144, 161, 185),
+        solid-hover: rgb(98, 116, 142),
+        subtle: rgb(202, 213, 226),
       ),
       primary: (
-        solid: var(--sd-color-blue-500),
-        solid-hover: var(--sd-color-blue-600),
-        subtle: var(--sd-color-blue-200),
-      ),
-      secondary: (
-        solid: var(--sd-color-blue-500),
-        solid-hover: var(--sd-color-blue-600),
-        subtle: var(--sd-color-blue-200),
+        solid: rgb(43, 127, 255),
+        solid-hover: rgb(21, 93, 252),
+        subtle: rgb(190, 219, 255),
       ),
       info: (
-        solid: var(--sd-color-cyan-500),
-        solid-hover: var(--sd-color-cyan-600),
-        subtle: var(--sd-color-cyan-200),
+        solid: rgb(0, 184, 219),
+        solid-hover: rgb(0, 146, 184),
+        subtle: rgb(162, 244, 253),
       ),
       success: (
-        solid: var(--sd-color-lime-500),
-        solid-hover: var(--sd-color-lime-600),
-        subtle: var(--sd-color-lime-200),
+        solid: rgb(124, 207, 0),
+        solid-hover: rgb(94, 165, 0),
+        subtle: rgb(216, 249, 153),
       ),
       warning: (
-        solid: var(--sd-color-orange-500),
-        solid-hover: var(--sd-color-orange-600),
-        subtle: var(--sd-color-orange-200),
+        solid: rgb(255, 105, 0),
+        solid-hover: rgb(245, 73, 0),
+        subtle: rgb(255, 214, 167),
       ),
       danger: (
-        solid: var(--sd-color-red-500),
-        solid-hover: var(--sd-color-red-600),
-        subtle: var(--sd-color-red-200),
+        solid: rgb(251, 44, 54),
+        solid-hover: rgb(231, 0, 11),
+        subtle: rgb(255, 201, 201),
       ),
     ),
-  // 포커스 링 — :focus-visible 전 컨트롤 단일 규약
+  // 포커스 링 — :focus-visible 전 컨트롤 단일 규약 (blue-500 등가)
   focus-ring: (
-      color: var(--sd-color-blue-500),
+      color: rgb(43, 127, 255),
       width: 0.1667rem,
       offset: 0.0833rem,
     ),
@@ -210,7 +203,7 @@ $sd: (
     track: rgba(0, 0, 0, 0.03),
   ),
   // 컴포넌트 장식 토큰(방침 1, 2026-07-16 확정) — 테마 오버라이드가 값 맵으로 못 잡던
-  // 장식(FIND-003 ③)의 소비 지점. 라이트 기본값은 현행 시각 등가.
+  // 장식의 소비 지점. 라이트 기본값은 현행 시각 등가.
   card: (
       bd: transparent,
       // focus-within 시 상단 보더 색(ide-dark 액센트 라인용)
@@ -227,15 +220,15 @@ $sd: (
     ),
   modal: (
     bd: transparent,
-    header-bg: var(--sd-color-zinc-50),
+    header-bg: rgb(250, 250, 250),
     header-tx: rgba(0, 0, 0, 0.87),
-    header-tx-muted: var(--sd-color-zinc-400),
+    header-tx-muted: rgb(159, 159, 169),
   ),
   dropdown: (
-    bd: var(--sd-color-zinc-300),
+    bd: rgb(212, 212, 216),
   ),
   permission-group: (
-    bg: var(--sd-color-cyan-500),
+    bg: rgb(0, 184, 219),
     tx: white,
   ),
   shadow: (
@@ -268,7 +261,7 @@ $sd: (
       xl: 0.6667rem,
       xxl: 1rem,
     ),
-  // 밀도 그룹(치수) — sd-density-compact 가 이 그룹만 덮는다. 테마 맵엔 치수 없음.
+  // 치수 그룹. 테마 맵엔 치수 없음.
   gap: (
       xxs: 0.0833rem,
       xs: 0.1667rem,

package/scss/themes/_variables-blueprint.scss

@@ -1,8 +1,7 @@
 // 블루프린트 테마 — 트레이싱지(라이트 면)를 --sd-* 역할 토큰 값 맵으로만 구성(셀렉터 오버라이드 0).
 // 라이트 기본값과 같은 항목은 생략(값 맵은 차이만 덮음).
-// 색 규칙(CONSTRAINT-007): --sd-color-* 팔레트 + 흰/검 알파만.
-// 모눈·그림자 청색 틴트는 rgb(28, 57, 142) ≈ --sd-color-blue-900 근사 리터럴(2026-07-16 확정 —
-// var() 를 알파와 조합할 수 없어 팔레트 성분을 리터럴로 풂).
+// 색 원천: 리터럴 rgb + 흰/검 알파(팔레트 배타 폐기 — 값 자립).
+// 모눈, 그림자 청색 틴트는 rgb(28, 57, 142)(구 blue-900 등가) 리터럴.
 
 // 모눈: 24px 헤어라인 + 120px 메이저 — background-size 없이 성립하는 repeating-linear-gradient 형
 $grid-strong: rgba(28, 57, 142, 0.055);
@@ -19,97 +18,100 @@ $paper: (
     // 모눈은 body(캔버스)와 시트 컨테이너에만 — 콘텐츠 내부는 무지(가독 우선)
     canvas-image: $grid-image,
     sheet-image: $grid-image,
+    // 드롭 자리, 텍스트 선택 — 블루프린트 잉크(blue-900) 틴트
+    drop-target: rgba(28, 57, 142, 0.1),
+    selection: rgba(28, 57, 142, 0.2),
     "gray": (
-      solid: var(--sd-color-zinc-500),
-      solid-hover: var(--sd-color-zinc-600),
+      solid: rgb(113, 113, 123),
+      solid-hover: rgb(82, 82, 92),
     ),
     blue-gray: (
-      solid: var(--sd-color-slate-500),
-      solid-hover: var(--sd-color-slate-600),
+      solid: rgb(98, 116, 142),
+      solid-hover: rgb(69, 85, 108),
     ),
-    // 블루프린트 잉크 — primary 는 깊은 남색(900)
+    // 블루프린트 잉크 — primary 는 깊은 남색(blue-900 등가)
     primary: (
-        solid: var(--sd-color-blue-900),
-        solid-hover: var(--sd-color-blue-950),
-        subtle: var(--sd-color-blue-100),
-        subtle-hover: var(--sd-color-blue-300),
+        solid: rgb(28, 57, 142),
+        solid-hover: rgb(22, 36, 86),
+        subtle: rgb(219, 234, 254),
+        subtle-hover: rgb(142, 197, 255),
       ),
     success: (
-      solid: var(--sd-color-green-500),
-      solid-hover: var(--sd-color-green-600),
-      subtle: var(--sd-color-green-50),
-      subtle-hover: var(--sd-color-green-100),
+      solid: rgb(0, 201, 80),
+      solid-hover: rgb(0, 166, 62),
+      subtle: rgb(240, 253, 244),
+      subtle-hover: rgb(220, 252, 231),
     ),
     warning: (
-      solid: var(--sd-color-orange-400),
-      solid-hover: var(--sd-color-orange-600),
-      subtle: var(--sd-color-orange-100),
-      subtle-hover: var(--sd-color-orange-200),
+      solid: rgb(255, 137, 4),
+      solid-hover: rgb(245, 73, 0),
+      subtle: rgb(255, 237, 212),
+      subtle-hover: rgb(255, 214, 167),
     ),
     danger: (
-      solid: var(--sd-color-red-400),
-      solid-hover: var(--sd-color-red-600),
-    ),
+      solid: rgb(255, 100, 103),
+      solid-hover: rgb(231, 0, 11),
+    )
   ),
   tx: (
-    "gray": var(--sd-color-zinc-500),
-    gray-hover: var(--sd-color-zinc-600),
-    gray-subtle: var(--sd-color-zinc-700),
-    blue-gray: var(--sd-color-slate-500),
-    blue-gray-hover: var(--sd-color-slate-600),
-    blue-gray-subtle: var(--sd-color-slate-700),
-    primary: var(--sd-color-blue-900),
-    primary-hover: var(--sd-color-blue-950),
-    primary-subtle: var(--sd-color-blue-950),
-    success: var(--sd-color-green-500),
-    success-hover: var(--sd-color-green-600),
-    success-subtle: var(--sd-color-green-700),
-    warning: var(--sd-color-orange-400),
-    warning-hover: var(--sd-color-orange-600),
-    danger: var(--sd-color-red-400),
-    danger-hover: var(--sd-color-red-600),
+    "gray": rgb(113, 113, 123),
+    gray-hover: rgb(82, 82, 92),
+    gray-subtle: rgb(63, 63, 70),
+    blue-gray: rgb(98, 116, 142),
+    blue-gray-hover: rgb(69, 85, 108),
+    blue-gray-subtle: rgb(49, 65, 88),
+    primary: rgb(28, 57, 142),
+    primary-hover: rgb(22, 36, 86),
+    primary-subtle: rgb(22, 36, 86),
+    success: rgb(0, 201, 80),
+    success-hover: rgb(0, 166, 62),
+    success-subtle: rgb(0, 130, 54),
+    warning: rgb(255, 137, 4),
+    warning-hover: rgb(245, 73, 0),
+    danger: rgb(255, 100, 103),
+    danger-hover: rgb(231, 0, 11),
   ),
   bd: (
-    strong: var(--sd-color-zinc-500),
-    emphasis: var(--sd-color-zinc-600),
+    strong: rgb(113, 113, 123),
+    emphasis: rgb(82, 82, 92),
     "gray": (
-      solid: var(--sd-color-zinc-500),
-      solid-hover: var(--sd-color-zinc-600),
+      solid: rgb(113, 113, 123),
+      solid-hover: rgb(82, 82, 92),
     ),
     blue-gray: (
-      solid: var(--sd-color-slate-500),
-      solid-hover: var(--sd-color-slate-600),
+      solid: rgb(98, 116, 142),
+      solid-hover: rgb(69, 85, 108),
     ),
     primary: (
-      solid: var(--sd-color-blue-900),
-      solid-hover: var(--sd-color-blue-950),
-      subtle: var(--sd-color-blue-300),
+      solid: rgb(28, 57, 142),
+      solid-hover: rgb(22, 36, 86),
+      subtle: rgb(142, 197, 255),
     ),
     success: (
-      solid: var(--sd-color-green-500),
-      solid-hover: var(--sd-color-green-600),
-      subtle: var(--sd-color-green-300),
+      solid: rgb(0, 201, 80),
+      solid-hover: rgb(0, 166, 62),
+      subtle: rgb(123, 241, 168),
     ),
     warning: (
-      solid: var(--sd-color-orange-400),
-      solid-hover: var(--sd-color-orange-600),
-      subtle: var(--sd-color-orange-300),
+      solid: rgb(255, 137, 4),
+      solid-hover: rgb(245, 73, 0),
+      subtle: rgb(255, 184, 106),
     ),
     danger: (
-      solid: var(--sd-color-red-400),
-      solid-hover: var(--sd-color-red-600),
+      solid: rgb(255, 100, 103),
+      solid-hover: rgb(231, 0, 11),
     ),
   ),
   focus-ring: (
-    color: var(--sd-color-blue-900),
+    color: rgb(28, 57, 142),
   ),
   // 하드 섀도(blur 0) — 도면 인쇄 느낌
   shadow: (
       blur-mult: 0,
     ),
   card: (
-    bd: var(--sd-color-zinc-500),
-    bd-active: var(--sd-color-zinc-500),
+    bd: rgb(113, 113, 123),
+    bd-active: rgb(113, 113, 123),
     shadow: (
       3px 3px 0 rgba(28, 57, 142, 0.1),
     ),
@@ -119,7 +121,7 @@ $paper: (
   ),
   // 모달 헤더 잉크 액센트
   modal: (
-      header-bg: var(--sd-color-blue-900),
+      header-bg: rgb(28, 57, 142),
       header-tx: white,
       header-tx-muted: rgba(255, 255, 255, 0.7),
     ),
@@ -128,9 +130,9 @@ $paper: (
       1px 1px 0 rgba(28, 57, 142, 0.1),
     ),
   ),
-  // 권한표 그룹 행 — 원색 solid 를 무채 옅은 행으로
+  // 권한표 그룹 행 — 원색 solid 를 무채 옅은 행으로 (zinc-100 등가)
   permission-group: (
-      bg: var(--sd-color-zinc-100),
+      bg: rgb(244, 244, 245),
       tx: rgba(0, 0, 0, 0.87),
     ),
   // 도면 직각 — 라운드 0
@@ -141,5 +143,5 @@ $paper: (
       lg: 0,
       xl: 0,
       xxl: 0,
-    ),
+    )
 );