From 2428ede03d5cc42eddbf10d8a1628b31e6e3b89d Mon Sep 17 00:00:00 2001
From: Yun Chan <yunchan@twentyoz.kr>
Date: Mon, 28 Sep 2026 18:26:03 +0900
Subject: [PATCH] feat(ui): flat "quiet instrument" token v4 with a single
 raw-value SSOT

- Add theme-raw.ts (no MUI/DOM deps) as the one source of theme values.
  Each theme declares only surfaces, 3-tier text, borders, accent and
  overlay shadow; legacy glass/gradient/glow/crt keys are derived as
  flat values so existing call sites lose effects without edits.
- Tertiary text now clears 4.5:1 on every surface in all six themes
  (label/inactive/dimLabel/muted alias it). Filled buttons use
  accent.solid + accent.ink (5.17:1 on dark/light, was 3.68:1).
- theme-vars.ts derives popup CSS from the same raw values instead of a
  hand copy, and defines the previously undefined --d3-overlay-strong
  and --d3-accent-glow-dim.
- MUI: no ripple, global focus-visible ring and reduced-motion rule,
  flat Card, status colors per theme, shape radius 16 -> 6.
- DS: flatten MetalCard/DoubleBezelCard/ScreenPanel/TiltCard, tone-based
  PhysicalButton (500 weight, no lift), TactileBadge with zero tracking
  and keyboard support, glow-free Led/StatRing, idle wave amplitude 0.
- PhosphorText drops mono/uppercase variants: mono has no Hangul glyphs,
  which spaced out Korean labels.
- design.md: record the 2026-09-28 redesign brief, audit, IA and tokens.
---
 design.md                                     |  67 ++
 packages/ui/package.json                      |   4 +
 .../ui/src/components/ds/DoubleBezelCard.tsx  |  78 +-
 .../ui/src/components/ds/GradientWave.tsx     |   4 +-
 packages/ui/src/components/ds/Led.tsx         |  32 +-
 packages/ui/src/components/ds/MetalCard.tsx   |  45 +-
 .../ui/src/components/ds/PhosphorText.tsx     |  50 +-
 .../ui/src/components/ds/PhysicalButton.tsx   | 141 ++-
 packages/ui/src/components/ds/ScreenPanel.tsx |  34 +-
 packages/ui/src/components/ds/StatRing.tsx    |  51 +-
 .../ui/src/components/ds/TactileBadge.tsx     | 105 +-
 packages/ui/src/components/ds/TiltCard.tsx    | 171 +---
 packages/ui/src/theme-raw.ts                  | 448 +++++++++
 packages/ui/src/theme-vars.ts                 | 309 +-----
 packages/ui/src/theme.ts                      | 945 ++++--------------
 15 files changed, 969 insertions(+), 1515 deletions(-)
 create mode 100644 packages/ui/src/theme-raw.ts

diff --git a/design.md b/design.md
index 98b4703..b618e9e 100644
--- a/design.md
+++ b/design.md
@@ -217,3 +217,70 @@
 - 빌드 경로 `base: '/'`(언어 하위 경로에서도 자산 경로가 맞도록).
 - 검증: 본문 3,600~7,700자/언어, 하이드레이션 경고 0, 10개 언어 320/1440 넘침 0, axe 0, Lighthouse(모바일) SEO·접근성·권장사항 100.
 - 하지 않은 것: 언어별 별도 콘텐츠(번역 외 추가 페이지)·블로그, 가짜 후기·평점, 자동 언어 리다이렉트.
+
+## 2026-09-28 전면 개편 — 데스크톱·팝업·모바일·공유 DS ("기록이 주인공인 조용한 계기")
+
+전체 경로 + 리디자인 감사. 방향(swiss-minimal × dark-instrument, 탈볼드, Pretendard, blue)은 계승하고,
+정보 구조·토큰 v4·팝업·모바일 내비를 새로 정했다. 물결별 분리 커밋(① 토큰·DS → ② 데스크톱 구조 →
+③ 받아쓰기 팝업 → ④ 모바일 → ⑤ 통합 검색).
+
+### 브리프 (사용자 인터뷰 확정)
+- 무엇을: 데스크톱(메인 앱·팝업 6종)·모바일 RN·공유 DS의 시각 언어 + 정보 구조·흐름 전면 개편.
+- 누구에게: 1순위 회의 많은 직장인 → 2순위 지식노동자·개발자 → 3순위 일반 사용자.
+  목표: 기록·회의 결과를 쉽게 찾고 다시 쓰며, 받아쓰기가 끊김 없이 흐른다.
+- 제약: 톤 = **조용한 정밀 도구**(사용자가 "극적인 정밀 기기(CRT·메탈·LED)"를 명시적으로 기각).
+  1급 = 기록·메모, 회의. 모바일 = 독립 완결형(1급 구조 동일). 기존 스택·기능 보존, 10개 로케일, 6테마.
+- 우선순위: 구조(기능 산만) → 받아쓰기 흐름 → 기록 재사용 → 두 앱 일치.
+- 기본 언어: ko-KR. 새 카피는 한국어, 영어는 기술 용어·키 이름만.
+
+### 감사 (개편 전, 증거: 1280×800 dark/light 캡처 + 코드 감사 4건)
+- 하드 게이트 위반: 데스크톱 사이드바 Box onClick(키보드 불가) / "100% LOCAL PRIVACY · ZERO CLOUD SYNC"(v1.9.0 기기 간
+  동기화와 모순) / 받아쓰기 Esc 취소 없음·처리 중 클릭 시 텍스트 소실 / 삭제 7종 확인·되돌림 없음 /
+  대비 미달 토큰 약 100곳(muted 1.42:1, dimLabel 2.72:1) / 감소 모션 전무.
+- 산만함: 진입점 데스크톱 약 45개·모바일 27개. 회의는 기록에 저장되지 않고 통합 검색 없음. "메모"가 세 의미.
+- 시각: 모든 카드가 글래스+글로우+그라디언트 링 → 같은 무게. 한글 라벨에 모노 폰트 → "누 름 유 지"처럼 벌어짐
+  (모노 폰트에 한글 글리프가 없다). 팝업 radius 999/16/10 혼재, 팔레트 웹·네이티브 3벌.
+
+### 레퍼런스 (관찰은 scratch 아닌 이 기록에 요약)
+- R1 구조(같은 시장): 클로바노트(노트+폴더, 요약·메모 영역 분리, 복사 2종), 다글로(보드, 요약/전사 탭, 모바일 가운데 +).
+- R1 구조(목적): Granola(사용자 노트 검정·AI 회색, 근거 인용 🔍), Otter(Summary/Transcript 2탭, View in transcript).
+- R1' 받아쓰기: Wispr Flow(화면 하단 작은 상태 바, 날짜별 기록+검색+hover 복사), Superwhisper(로딩/녹음/처리/완료 상태색, ESC 취소).
+- R2 톤: Linear(요소마다 무게 다르게, 사이드바 몇 단계 어둡게, 크롬의 파랑 최소), Apple HIG(탭 바는 이동용, 빈번한 상호작용에 모션 자제).
+- 가져온 원리: 요약 먼저·전사 근거 링크 / 재사용 행동 한 곳, 복사는 요약·전사 분리 / 받아쓰기는 날짜별 기록 /
+  녹음 중 작은 상시 표시 + 상태색 분리 / 탭 바는 이동, 녹음은 플로팅 버튼.
+
+### 정보 구조 (두 앱 공통)
+- 1급: **홈(오늘) · 기록 · 회의** — 같은 순서·같은 이름. 통합 검색(기록+회의, 데스크톱 Ctrl+K).
+- 2급 "도구": AI 대화 · 명령어 · 사전 · 지식 · 템플릿 · 팀 · 음성 액션 · 데이터. 설정은 데스크톱 전체 화면.
+- '메모 태그' → 기록 안의 '태그' 필터. 회의 안 메모는 '회의 메모'. 대시보드 통계는 홈 한 줄 요약.
+- 모바일 하단: **탭 4(홈·기록·회의·더보기) + 떠 있는 녹음 버튼**. 녹음 버튼을 누르면 위로 시작 메뉴
+  (받아쓰기·회의 녹음·파일 가져오기)가 펼쳐진다(사용자 지시, M3 FAB 메뉴 패턴). 탭 바에 행동을 두지 않는다(HIG).
+- 기록↔회의: 데이터는 분리 유지(스키마 변경 없음), 통합 검색 + 상호 링크(사용자 선택).
+
+### 토큰 v4 (SSOT: `packages/ui/src/theme-raw.ts` — MUI·DOM 의존 없음)
+- 구조: 테마마다 기본값(표면 7·텍스트 3단+disabled·경계 3·액센트 7·그림자 2)만 적고 `deriveRaw()`가 v2 호환
+  키(glass/gradient/glow/crt/label/inactive/dimLabel/muted)를 **평면 값으로 파생**. 컴포넌트 수백 곳을 고치지 않고 이펙트를 끈다.
+  glow.* = none, glass.sheen = none, blur = 0px, gradient.* = 단색, shadow.card/chassis/inset/button* = none.
+- 텍스트 3단: tertiary 는 app/card/elevated/sidebar 모든 표면에서 4.5:1 이상(dark #7e8eb0 4.62, light #56647c,
+  nord #a6b0c4, solarized #a1aca9 4.70 + secondary #b7bdb6, catppuccin #939cbf, dracula #a1a7c1).
+- accent.solid/solidHover/ink: 채운 버튼. dark·light #2563eb + 흰 글자 5.17:1(이전 #3b82f6 3.68:1 미달),
+  solarized #8a6800 5.17:1(이전 3.21), nord·catppuccin·dracula 는 밝은 채움 + 어두운 잉크. light accent.light #1d4ed8(글자용).
+- 그림자는 떠 있는 층에만: `d3roShadow.overlay`(다이얼로그·메뉴·팝오버·플로팅 버튼), tooltip.
+- radius: card 10 · outer 12 · inner 8 · button 8 · small 6 · xs 4 (정밀 도구 — 작고 일정). MUI shape 16→6
+  (sx borderRadius:2 가 32px 이던 버그 해소).
+- 타입: hero 32→28, title 24→22, meta 11/500/0.02em→12/400/0, label·engrave·micro 11/500/**자간 0**,
+  nano 9→10(라틴 수치 전용). 모든 PhosphorText 변형 산세리프·대문자 변환 없음.
+- 컨트롤 36/28, 모션 100/160/240/400ms + easeOut. `d3roTransition()`, `d3roFocusRing` 헬퍼 추가.
+- MUI: ripple 끔, 전역 `:focus-visible` 링, 전역 prefers-reduced-motion, Card = 평면+1px, Chip·palette 상태색 = 테마별 STATUS
+  (고정 tag 는 점·아이콘 전용), Backdrop blur 제거.
+- 팝업: `theme-vars.ts`가 같은 원시값에서 파생(손 복제 폐기). 정의 안 된 채 쓰이던 `--d3-overlay-strong`,
+  `--d3-accent-glow-dim` 정의. 파형 9단 = 액센트 단색. 'system' 테마 해석 함수 `resolvePopupThemeKey` 추가.
+- DS: MetalCard·DoubleBezelCard·ScreenPanel 평면화, TiltCard = MetalCard(틸트 제거), PhysicalButton 톤 5종 평면
+  (accent 만 채움, 600→500, 떠오름 제거, 액센트 잉크 테마 반응), TactileBadge 자간 0·500·STATUS·키보드 조작,
+  Led 글로우 제거·상태색 STATUS, StatRing 다색 원뿔 → 1px 원, GradientWave 기본 유휴 진폭 0(대기 중 파형이 "살아있는 척"
+  움직이던 거짓 신호 제거)·글로우 0.
+
+### 의도적으로 하지 않은 것 (물결 ①)
+- **옛 토큰 키 삭제 안 함.** glass/gradient/glow/crt 키는 @deprecated 로 남긴다(웹·관리자·데스크톱 수백 곳). 새 코드는 쓰지 않는다.
+- **6테마 액센트 통일 안 함.** nord·catppuccin·dracula·solarized 는 사용자가 고른 테마라 고유 액센트 유지, 대비만 보정.
+- **`--d3-text-inverse` 정의 안 함.** 웹 앱 17곳이 제목 색으로 오용 중 — 값을 정하면 라이트 테마 제목이 사라진다. 웹 정리 때 함께.
diff --git a/packages/ui/package.json b/packages/ui/package.json
index 5bc146f..db92dac 100644
--- a/packages/ui/package.json
+++ b/packages/ui/package.json
@@ -15,6 +15,10 @@
       "types": "./src/theme.ts",
       "default": "./src/theme.ts"
     },
+    "./theme-raw": {
+      "types": "./src/theme-raw.ts",
+      "default": "./src/theme-raw.ts"
+    },
     "./theme-vars": {
       "types": "./src/theme-vars.ts",
       "default": "./src/theme-vars.ts"
diff --git a/packages/ui/src/components/ds/DoubleBezelCard.tsx b/packages/ui/src/components/ds/DoubleBezelCard.tsx
index 4f8ad01..f669aa4 100644
--- a/packages/ui/src/components/ds/DoubleBezelCard.tsx
+++ b/packages/ui/src/components/ds/DoubleBezelCard.tsx
@@ -1,27 +1,25 @@
 'use client'
 
 // packages/ui/src/components/ds/DoubleBezelCard.tsx
-// High-End Agency / Awwwards-Tier Double-Bezel (Doppelrand) Enclosure Component
-// Outer Shell: Precision machined tray with outer radius & ambient hairline
-// Inner Core: Floating glass plate with concentric inner radius, specular highlight & blur
+// v4 "조용한 계기": 이중 베젤을 걷어낸 단일 카드. 이름과 props 는 호환을 위해 유지한다.
+// bezelPadding 은 무시된다(바깥 틀이 없다). interactive 는 선·배경 변화만 — 떠오르지 않는다.
 
 import React from 'react'
 import { Box, type BoxProps } from '@mui/material'
-import { d3roPalette, d3roShadow, d3roRadius } from '../../theme'
+import { d3roPalette, d3roRadius, d3roTransition } from '../../theme'
 
 export interface DoubleBezelCardProps extends Omit<BoxProps, 'component'> {
-  /** Outer padding between tray and core (default: 6px) */
+  /** @deprecated v4: 바깥 틀이 없어 쓰이지 않는다 */
   bezelPadding?: number | string
-  /** Whether the card shows an interactive lift / glow on hover */
+  /** 누를 수 있는 카드 — hover 시 선과 배경만 바뀐다 */
   interactive?: boolean
-  /** Inner core padding (default: 3 / 24px) */
+  /** 안쪽 여백 (기본 3 = 24px) */
   innerPadding?: number | string
-  /** Content to render inside the inner core */
   children?: React.ReactNode
 }
 
 export function DoubleBezelCard({
-  bezelPadding = '6px',
+  bezelPadding: _bezelPadding,
   interactive = false,
   innerPadding = 3,
   children,
@@ -33,69 +31,21 @@ export function DoubleBezelCard({
       {...boxProps}
       sx={{
         position: 'relative',
-        borderRadius: d3roRadius.doubleBezelOuter,
-        p: bezelPadding,
-        bgcolor: d3roPalette.glass.raised,
-        border: `1px solid ${d3roPalette.glass.hairline}`,
-        boxShadow: interactive ? d3roShadow.card : 'none',
-        transition: 'transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s ease, border-color 0.3s ease',
+        borderRadius: d3roRadius.card,
+        p: innerPadding,
+        bgcolor: d3roPalette.bg.card,
+        border: `1px solid ${d3roPalette.border.default}`,
+        transition: d3roTransition('border-color', 'background-color'),
         ...(interactive
           ? {
               cursor: 'pointer',
-              '&:hover': {
-                borderColor: d3roPalette.glass.hairlineStrong,
-                boxShadow: d3roShadow.glowCardHover,
-                transform: 'translateY(-2px)',
-                '& .d3-inner-core': {
-                  bgcolor: d3roPalette.bg.cardHover,
-                },
-              },
-              '&:active': {
-                transform: 'translateY(0px) scale(0.99)',
-              },
+              '&:hover': { borderColor: d3roPalette.border.strong, bgcolor: d3roPalette.bg.cardHover },
             }
           : {}),
         ...sx,
       }}
     >
-      {/* Inner Core Container */}
-      <Box
-        className="d3-inner-core"
-        sx={{
-          position: 'relative',
-          borderRadius: d3roRadius.doubleBezelInner,
-          bgcolor: d3roPalette.glass.surface,
-          backdropFilter: `blur(${d3roPalette.glass.blur})`,
-          boxShadow: `${d3roShadow.inset}, ${d3roShadow.glowCard}`,
-          p: innerPadding,
-          overflow: 'hidden',
-          transition: 'background-color 0.25s ease',
-          // Top Sheen + Specular highlight
-          '&::before': {
-            content: '""',
-            position: 'absolute',
-            inset: 0,
-            borderRadius: 'inherit',
-            background: d3roPalette.glass.sheen,
-            pointerEvents: 'none',
-          },
-          // 1px Gradient Hairline Rim
-          '&::after': {
-            content: '""',
-            position: 'absolute',
-            inset: 0,
-            borderRadius: 'inherit',
-            padding: '1px',
-            background: d3roPalette.glass.borderGradient,
-            WebkitMask: 'linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0)',
-            WebkitMaskComposite: 'xor',
-            maskComposite: 'exclude',
-            pointerEvents: 'none',
-          },
-        }}
-      >
-        <Box sx={{ position: 'relative', zIndex: 1 }}>{children}</Box>
-      </Box>
+      {children}
     </Box>
   )
 }
diff --git a/packages/ui/src/components/ds/GradientWave.tsx b/packages/ui/src/components/ds/GradientWave.tsx
index 51e3160..733f6be 100644
--- a/packages/ui/src/components/ds/GradientWave.tsx
+++ b/packages/ui/src/components/ds/GradientWave.tsx
@@ -47,11 +47,11 @@ function seeded(i: number): number {
 
 export function GradientWave({
   audioLevel = 0,
-  idleAmplitude = 0.25,
+  idleAmplitude = 0,
   speed = 1,
   barWidth = 3,
   barGap = 3,
-  glow = 8,
+  glow = 0,
   height = '100%',
 }: GradientWaveProps): React.ReactElement {
   const canvasRef = useRef<HTMLCanvasElement>(null)
diff --git a/packages/ui/src/components/ds/Led.tsx b/packages/ui/src/components/ds/Led.tsx
index 39a615b..111f66b 100644
--- a/packages/ui/src/components/ds/Led.tsx
+++ b/packages/ui/src/components/ds/Led.tsx
@@ -1,23 +1,23 @@
 'use client'
 
-// src/renderer/components/ds/Led.tsx
-// v2 "Midnight Glass": 상태 도트 — 소프트 글로우, 활성 시 pulse
-// (레퍼런스의 "● READY" / "● 시스템 정상" 인디케이터)
+// packages/ui/src/components/ds/Led.tsx
+// v4 "조용한 계기": 상태 점. 번짐(글로우) 없음. 색만으로 상태를 말하지 않는다 — 옆에 글자를 둔다.
+// pulse 는 진행 중(녹음·연결 중)에만. 감소 모션에서는 전역 규칙으로 멈춘다.
 
 import { Box } from '@mui/material'
 import { d3roPalette } from '../../theme'
 
 type LedColor = 'amber' | 'green' | 'red' | 'orange' | 'blue' | 'purple' | 'off'
 
-const LED_COLORS: Record<LedColor, { bg: string; glow: string }> = {
-  // 'amber'는 v1 호환 별칭 — 현재 테마의 프라이머리 액센트 색으로 렌더
-  amber:  { bg: d3roPalette.accent.main, glow: d3roPalette.accent.glow },
-  green:  { bg: d3roPalette.tag.green, glow: d3roPalette.tag.greenGlow },
-  red:    { bg: d3roPalette.tag.red, glow: d3roPalette.tag.redGlow },
-  orange: { bg: d3roPalette.tag.orange, glow: d3roPalette.tag.orangeGlow },
-  blue:   { bg: d3roPalette.tag.blue, glow: d3roPalette.tag.blueGlow },
-  purple: { bg: d3roPalette.tag.purple, glow: d3roPalette.tag.purpleGlow },
-  off:    { bg: d3roPalette.led.off, glow: 'transparent' },
+const LED_COLORS: Record<LedColor, string> = {
+  // 'amber'는 v1 호환 별칭 — 현재 테마의 액센트
+  amber: d3roPalette.accent.main,
+  green: d3roPalette.status.success,
+  red: d3roPalette.status.danger,
+  orange: d3roPalette.status.warning,
+  blue: d3roPalette.accent.main,
+  purple: d3roPalette.tag.purple,
+  off: d3roPalette.text.disabled,
 }
 
 interface LedProps {
@@ -27,25 +27,23 @@ interface LedProps {
 }
 
 export function Led({ color = 'off', pulse = false, size = 8 }: LedProps): React.ReactElement {
-  const c = LED_COLORS[color]
   const isActive = color !== 'off'
 
   return (
     <Box
+      aria-hidden
       sx={{
         width: size,
         height: size,
         borderRadius: '50%',
-        bgcolor: c.bg,
+        bgcolor: LED_COLORS[color],
         flexShrink: 0,
-        boxShadow: isActive ? `0 0 ${size * 1.2}px ${c.glow}` : 'none',
-        transition: 'all 0.15s ease',
         ...(pulse && isActive
           ? {
               animation: 'led-pulse 1.6s ease-in-out infinite',
               '@keyframes led-pulse': {
                 '0%, 100%': { opacity: 1 },
-                '50%': { opacity: 0.45 },
+                '50%': { opacity: 0.4 },
               },
             }
           : {}),
diff --git a/packages/ui/src/components/ds/MetalCard.tsx b/packages/ui/src/components/ds/MetalCard.tsx
index 511f08c..b1e4ce4 100644
--- a/packages/ui/src/components/ds/MetalCard.tsx
+++ b/packages/ui/src/components/ds/MetalCard.tsx
@@ -1,15 +1,14 @@
 'use client'
 
 // packages/ui/src/components/ds/MetalCard.tsx
-// v2 "Midnight Glass": 글래스모피즘 카드 —
-// 그라디언트 헤어라인 보더(좌상단 발광 → 우하단 소멸) + 앰비언트 글로우 + 상단 시인.
-// 보더는 mask 링 기법(::after) — 반투명 표면 위에서도 정확한 1px 그라디언트 링.
+// v4 "조용한 계기": 평평한 카드 — 표면 한 단 + 1px 선. 그림자·블러·광택 없음.
+// inset: 카드 안의 한 단 들어간 영역 (카드 안의 카드가 아니라 우묵한 판).
 
 import { Box, type BoxProps } from '@mui/material'
-import { d3roPalette, d3roShadow, d3roRadius } from '../../theme'
+import { d3roPalette, d3roRadius, d3roTransition } from '../../theme'
 
 interface MetalCardProps extends Omit<BoxProps, 'component'> {
-  /** 카드 내부의 상승 표면 (카드 안의 카드) */
+  /** 카드 내부의 우묵한 영역 */
   inset?: boolean
 }
 
@@ -24,41 +23,11 @@ export function MetalCard({
       {...boxProps}
       sx={{
         position: 'relative',
-        bgcolor: inset ? d3roPalette.glass.raised : d3roPalette.glass.surface,
-        backdropFilter: `blur(${d3roPalette.glass.blur})`,
+        bgcolor: inset ? d3roPalette.bg.inset : d3roPalette.bg.card,
         borderRadius: inset ? d3roRadius.inner : d3roRadius.card,
-        border: inset ? `1px solid ${d3roPalette.glass.hairline}` : 'none',
-        boxShadow: inset ? 'none' : d3roShadow.glowCard,
+        border: `1px solid ${inset ? d3roPalette.border.subtle : d3roPalette.border.default}`,
         p: inset ? 2 : 3,
-        overflow: 'hidden',
-        transition: 'box-shadow 0.25s ease',
-        // 상단 시인 + 앰비언트 라디얼 (theme sheen 토큰이 레이어 결합)
-        '&::before': inset
-          ? {}
-          : {
-              content: '""',
-              position: 'absolute',
-              inset: 0,
-              borderRadius: 'inherit',
-              background: d3roPalette.glass.sheen,
-              pointerEvents: 'none',
-            },
-        // 그라디언트 헤어라인 링 — padding 1px + mask exclude로 링만 남김
-        '&::after': inset
-          ? {}
-          : {
-              content: '""',
-              position: 'absolute',
-              inset: 0,
-              borderRadius: 'inherit',
-              padding: '1px',
-              background: d3roPalette.glass.borderGradient,
-              WebkitMask: 'linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0)',
-              WebkitMaskComposite: 'xor',
-              maskComposite: 'exclude',
-              pointerEvents: 'none',
-            },
-        '&:hover': inset ? {} : { boxShadow: d3roShadow.glowCardHover },
+        transition: d3roTransition('border-color', 'background-color'),
         ...sx,
       }}
     >
diff --git a/packages/ui/src/components/ds/PhosphorText.tsx b/packages/ui/src/components/ds/PhosphorText.tsx
index 47634d5..71cfbdd 100644
--- a/packages/ui/src/components/ds/PhosphorText.tsx
+++ b/packages/ui/src/components/ds/PhosphorText.tsx
@@ -1,11 +1,13 @@
 'use client'
 
-// src/renderer/components/ds/PhosphorText.tsx
-// v2 "Midnight Glass": 클린 타이포그래피 — 산세리프(Pretendard) 기반.
-// 헤드라인/수치는 프라이머리 화이트, 메타/라벨류만 모노+대문자 유지.
+// packages/ui/src/components/ds/PhosphorText.tsx
+// v4 "조용한 계기": 타이포 변형 13종 — 전부 산세리프(Pretendard), 대문자 변환 없음.
+// 위계는 크기와 명도(text 3단)로 만든다. 한글 라벨에 모노·양수 자간을 쓰지 않는다
+// (모노 폰트에 한글 글리프가 없어 "누 름 유 지"처럼 벌어졌다 — 2026-09-28 실측).
+// 수치는 tabular-nums 로 흔들리지 않게.
 
 import { Typography, type TypographyProps } from '@mui/material'
-import { d3roPalette, d3roFontSans, d3roFontMono, d3roTypo } from '../../theme'
+import { d3roPalette, d3roFontSans, d3roTypo } from '../../theme'
 
 type PhosphorVariant =
   | 'hero' | 'title' | 'value' | 'heading'
@@ -19,24 +21,30 @@ interface VariantDef {
   fontWeight: number
   letterSpacing: string
   lineHeight: number
-  textTransform?: 'uppercase' | 'none'
-  mono?: boolean
 }
 
+const def = (key: keyof typeof d3roTypo, color: string): VariantDef => ({
+  fontSize: d3roTypo[key].size,
+  fontWeight: d3roTypo[key].weight,
+  letterSpacing: d3roTypo[key].spacing,
+  lineHeight: d3roTypo[key].line,
+  color,
+})
+
 const VARIANTS: Record<PhosphorVariant, VariantDef> = {
-  hero:    { fontSize: d3roTypo.hero.size,    color: d3roPalette.text.primary,   fontWeight: d3roTypo.hero.weight,    letterSpacing: d3roTypo.hero.spacing,    lineHeight: d3roTypo.hero.line },
-  title:   { fontSize: d3roTypo.title.size,   color: d3roPalette.text.primary,   fontWeight: d3roTypo.title.weight,   letterSpacing: d3roTypo.title.spacing,   lineHeight: d3roTypo.title.line },
-  value:   { fontSize: d3roTypo.value.size,   color: d3roPalette.text.primary,   fontWeight: d3roTypo.value.weight,   letterSpacing: d3roTypo.value.spacing,   lineHeight: d3roTypo.value.line },
-  heading: { fontSize: d3roTypo.heading.size, color: d3roPalette.text.primary,   fontWeight: d3roTypo.heading.weight, letterSpacing: d3roTypo.heading.spacing, lineHeight: d3roTypo.heading.line },
-  body:    { fontSize: d3roTypo.body.size,    color: d3roPalette.text.secondary, fontWeight: d3roTypo.body.weight,    letterSpacing: d3roTypo.body.spacing,    lineHeight: d3roTypo.body.line },
-  compact: { fontSize: d3roTypo.compact.size, color: d3roPalette.text.primary,   fontWeight: d3roTypo.compact.weight,  letterSpacing: d3roTypo.compact.spacing, lineHeight: d3roTypo.compact.line },
-  small:   { fontSize: d3roTypo.small.size,   color: d3roPalette.text.inactive,  fontWeight: d3roTypo.small.weight,   letterSpacing: d3roTypo.small.spacing,   lineHeight: d3roTypo.small.line },
-  meta:    { fontSize: d3roTypo.meta.size,    color: d3roPalette.text.inactive,  fontWeight: d3roTypo.meta.weight,    letterSpacing: d3roTypo.meta.spacing,    lineHeight: d3roTypo.meta.line, textTransform: 'uppercase', mono: true },
-  label:   { fontSize: d3roTypo.label.size,   color: d3roPalette.text.label,     fontWeight: d3roTypo.label.weight,   letterSpacing: d3roTypo.label.spacing,   lineHeight: d3roTypo.label.line, textTransform: 'uppercase' },
-  dim:     { fontSize: d3roTypo.label.size,   color: d3roPalette.text.inactive,  fontWeight: d3roTypo.body.weight,    letterSpacing: d3roTypo.label.spacing,   lineHeight: d3roTypo.label.line },
-  engrave: { fontSize: d3roTypo.engrave.size, color: d3roPalette.text.dimLabel,  fontWeight: d3roTypo.engrave.weight, letterSpacing: d3roTypo.engrave.spacing, lineHeight: d3roTypo.engrave.line, textTransform: 'uppercase', mono: true },
-  micro:   { fontSize: d3roTypo.micro.size,   color: d3roPalette.text.dimLabel,  fontWeight: d3roTypo.micro.weight,   letterSpacing: d3roTypo.micro.spacing,   lineHeight: d3roTypo.micro.line, textTransform: 'uppercase', mono: true },
-  nano:    { fontSize: d3roTypo.nano.size,    color: d3roPalette.text.inactive,  fontWeight: d3roTypo.nano.weight,    letterSpacing: d3roTypo.nano.spacing,   lineHeight: d3roTypo.nano.line, textTransform: 'uppercase', mono: true },
+  hero: def('hero', d3roPalette.text.primary),
+  title: def('title', d3roPalette.text.primary),
+  value: def('value', d3roPalette.text.primary),
+  heading: def('heading', d3roPalette.text.primary),
+  body: def('body', d3roPalette.text.secondary),
+  compact: def('compact', d3roPalette.text.primary),
+  small: def('small', d3roPalette.text.tertiary),
+  meta: def('meta', d3roPalette.text.tertiary),
+  label: def('label', d3roPalette.text.tertiary),
+  dim: { ...def('label', d3roPalette.text.tertiary), fontWeight: d3roTypo.body.weight },
+  engrave: def('engrave', d3roPalette.text.tertiary),
+  micro: def('micro', d3roPalette.text.tertiary),
+  nano: def('nano', d3roPalette.text.tertiary),
 }
 
 interface PhosphorTextProps extends Omit<TypographyProps, 'variant'> {
@@ -51,14 +59,14 @@ export function PhosphorText({ variant = 'value', component = 'span', sx, ...pro
       component={component}
       {...props}
       sx={{
-        fontFamily: v.mono ? d3roFontMono : d3roFontSans,
+        fontFamily: d3roFontSans,
         fontSize: v.fontSize,
         fontWeight: v.fontWeight,
         color: v.color,
         letterSpacing: v.letterSpacing,
         lineHeight: v.lineHeight,
         fontVariantNumeric: 'tabular-nums',
-        textTransform: v.textTransform ?? 'none',
+        textTransform: 'none',
         ...sx,
       }}
     />
diff --git a/packages/ui/src/components/ds/PhysicalButton.tsx b/packages/ui/src/components/ds/PhysicalButton.tsx
index 7c2cc55..890ea36 100644
--- a/packages/ui/src/components/ds/PhysicalButton.tsx
+++ b/packages/ui/src/components/ds/PhysicalButton.tsx
@@ -1,21 +1,68 @@
 'use client'
 
 // packages/ui/src/components/ds/PhysicalButton.tsx
-// High-End Tactile Button with Button-in-Button Trailing Icon & Spring Physics
+// v4 "조용한 계기": 버튼 한 종류, 톤 다섯. 채움은 accent 톤 하나뿐이고 나머지는 선과 글자로 구분한다.
+// 움직임은 색 변화뿐 — 떠오르거나 튀지 않는다.
 
 import React from 'react'
 import { Button, Box, type ButtonProps } from '@mui/material'
-import { d3roPalette, d3roFontSans, d3roShadow, d3roRadius, d3roTypo } from '../../theme'
+import { d3roPalette, d3roFontSans, d3roRadius, d3roTypo, d3roControl, d3roTransition } from '../../theme'
 
 export interface PhysicalButtonProps extends Omit<ButtonProps, 'variant'> {
-  /** Active selected state (renders primary accent gradient) */
+  /** 선택된 상태 (accent 톤으로 렌더) */
   selected?: boolean
-  /** Visual button tone */
+  /** 시각 톤 */
   tone?: 'accent' | 'glass' | 'danger' | 'success' | 'ghost'
-  /** Trailing icon rendered in a nested circular capsule (Button-in-Button pattern) */
+  /** 글자 뒤 아이콘 */
   trailingIcon?: React.ReactNode
 }
 
+interface ToneStyle {
+  bg: string
+  bgHover: string
+  color: string
+  colorHover: string
+  border: string
+}
+
+const TONES: Record<'accent' | 'glass' | 'danger' | 'success' | 'ghost', ToneStyle> = {
+  accent: {
+    bg: d3roPalette.accent.solid,
+    bgHover: d3roPalette.accent.solidHover,
+    color: d3roPalette.accent.ink,
+    colorHover: d3roPalette.accent.ink,
+    border: 'transparent',
+  },
+  glass: {
+    bg: 'transparent',
+    bgHover: d3roPalette.surface.overlaySoft,
+    color: d3roPalette.text.primary,
+    colorHover: d3roPalette.text.primary,
+    border: d3roPalette.border.strong,
+  },
+  danger: {
+    bg: 'transparent',
+    bgHover: d3roPalette.status.dangerBg,
+    color: d3roPalette.status.danger,
+    colorHover: d3roPalette.status.danger,
+    border: d3roPalette.border.strong,
+  },
+  success: {
+    bg: 'transparent',
+    bgHover: d3roPalette.status.successBg,
+    color: d3roPalette.status.success,
+    colorHover: d3roPalette.status.success,
+    border: d3roPalette.border.strong,
+  },
+  ghost: {
+    bg: 'transparent',
+    bgHover: d3roPalette.surface.overlaySoft,
+    color: d3roPalette.text.secondary,
+    colorHover: d3roPalette.text.primary,
+    border: 'transparent',
+  },
+}
+
 export function PhysicalButton({
   selected = false,
   tone = 'glass',
@@ -24,71 +71,34 @@ export function PhysicalButton({
   sx,
   ...props
 }: PhysicalButtonProps): React.ReactElement {
-  const isAccent = selected || tone === 'accent'
-  const isDanger = tone === 'danger'
-  const isSuccess = tone === 'success'
-
-  let bg: string = d3roPalette.glass.raised
-  let bgImage: string = 'none'
-  let textColor: string = d3roPalette.text.primary
-  let borderColor: string = d3roPalette.glass.hairline
-  let shadow: string = 'none'
-
-  if (isAccent) {
-    bg = 'transparent'
-    bgImage = d3roPalette.gradient.accent
-    textColor = d3roPalette.text.inverse
-    borderColor = 'transparent'
-    shadow = d3roShadow.glowAccent
-  } else if (isDanger) {
-    bg = d3roPalette.tag.redBg
-    textColor = d3roPalette.tag.red
-    borderColor = d3roPalette.tag.redGlow
-  } else if (isSuccess) {
-    bg = d3roPalette.tag.greenBg
-    textColor = d3roPalette.tag.green
-    borderColor = d3roPalette.tag.greenGlow
-  }
+  const t = TONES[selected ? 'accent' : tone]
 
   return (
     <Button
       {...props}
       sx={{
-        height: 40,
-        px: trailingIcon ? 2 : 2.5,
-        bgcolor: bg,
-        backgroundImage: bgImage,
-        border: `1px solid ${borderColor}`,
+        height: d3roControl.h,
+        px: 1.75,
+        bgcolor: t.bg,
+        backgroundImage: 'none',
+        border: `1px solid ${t.border}`,
         borderRadius: d3roRadius.button,
-        color: textColor,
+        color: t.color,
         fontFamily: d3roFontSans,
         fontSize: d3roTypo.compact.size,
-        fontWeight: 600,
-        cursor: 'pointer',
-        boxShadow: shadow,
+        fontWeight: 500,
+        boxShadow: 'none',
         textTransform: 'none',
-        letterSpacing: '0.01em',
+        letterSpacing: 0,
         minWidth: 0,
         display: 'inline-flex',
         alignItems: 'center',
         justifyContent: 'center',
-        gap: 1.25,
-        transition: 'all 0.2s cubic-bezier(0.16, 1, 0.3, 1)',
-        '&:hover': {
-          bgcolor: isAccent ? undefined : d3roPalette.bg.cardHover,
-          borderColor: isAccent ? 'transparent' : d3roPalette.glass.hairlineStrong,
-          color: isAccent ? d3roPalette.text.inverse : d3roPalette.text.primary,
-          filter: isAccent ? 'brightness(1.08)' : 'none',
-          boxShadow: isAccent ? d3roShadow.glowAccent : d3roShadow.card,
-          transform: 'translateY(-1px)',
-          '& .d3-button-trailing-icon': {
-            transform: 'translateX(2px)',
-          },
-        },
-        '&:active': {
-          transform: 'translateY(0) scale(0.98)',
-          filter: 'brightness(0.95)',
-        },
+        gap: 1,
+        whiteSpace: 'nowrap',
+        transition: d3roTransition('background-color', 'color', 'border-color'),
+        '&:hover': { bgcolor: t.bgHover, color: t.colorHover, boxShadow: 'none' },
+        '&.Mui-disabled': { opacity: 0.5, color: t.color, borderColor: t.border },
         ...sx,
       }}
     >
@@ -97,21 +107,10 @@ export function PhysicalButton({
       </Box>
       {trailingIcon && (
         <Box
+          component="span"
+          aria-hidden
           className="d3-button-trailing-icon"
-          sx={{
-            width: 24,
-            height: 24,
-            borderRadius: '50%',
-            bgcolor: isAccent ? 'var(--d3-overlay-strong)' : d3roPalette.bg.inset,
-            border: `1px solid ${isAccent ? 'var(--d3-overlay-strong)' : d3roPalette.border.subtle}`,
-            display: 'flex',
-            alignItems: 'center',
-            justifyContent: 'center',
-            color: isAccent ? d3roPalette.text.inverse : d3roPalette.text.secondary,
-            transition: 'transform 0.2s ease',
-            flexShrink: 0,
-            '& svg': { width: 14, height: 14 },
-          }}
+          sx={{ display: 'inline-flex', alignItems: 'center', opacity: 0.8, '& svg': { width: 14, height: 14 } }}
         >
           {trailingIcon}
         </Box>
diff --git a/packages/ui/src/components/ds/ScreenPanel.tsx b/packages/ui/src/components/ds/ScreenPanel.tsx
index ff59a68..69102ad 100644
--- a/packages/ui/src/components/ds/ScreenPanel.tsx
+++ b/packages/ui/src/components/ds/ScreenPanel.tsx
@@ -1,8 +1,7 @@
 'use client'
 
-// src/renderer/components/ds/ScreenPanel.tsx
-// v2 "Midnight Glass": 딥 글래스 패널 — 카드 내부의 어두운 정보 표시 영역
-// (레퍼런스의 히어로 카드 내부 / "현재 백엔드" 내부 패널 패턴)
+// packages/ui/src/components/ds/ScreenPanel.tsx
+// v4 "조용한 계기": 카드 안의 우묵한 표시 영역 — 한 단 어두운 판 + 1px 선. 광택 없음.
 
 import { Box } from '@mui/material'
 import { d3roPalette, d3roRadius } from '../../theme'
@@ -18,34 +17,17 @@ export function ScreenPanel({ children, height }: ScreenPanelProps): React.React
     <Box
       sx={{
         position: 'relative',
-        bgcolor: d3roPalette.bg.crtGlass,
+        bgcolor: d3roPalette.bg.inset,
         borderRadius: d3roRadius.inner,
-        border: `1px solid ${d3roPalette.glass.hairline}`,
+        border: `1px solid ${d3roPalette.border.subtle}`,
         overflow: 'hidden',
         height,
-        // 상단 시인
-        '&::after': {
-          content: '""',
-          position: 'absolute',
-          inset: 0,
-          background: d3roPalette.glass.sheen,
-          pointerEvents: 'none',
-          zIndex: 1,
-        },
+        p: 2,
+        display: 'flex',
+        flexDirection: 'column',
       }}
     >
-      <Box
-        sx={{
-          position: 'relative',
-          zIndex: 2,
-          p: 2,
-          height: '100%',
-          display: 'flex',
-          flexDirection: 'column',
-        }}
-      >
-        {children}
-      </Box>
+      {children}
     </Box>
   )
 }
diff --git a/packages/ui/src/components/ds/StatRing.tsx b/packages/ui/src/components/ds/StatRing.tsx
index 53af693..c0550bc 100644
--- a/packages/ui/src/components/ds/StatRing.tsx
+++ b/packages/ui/src/components/ds/StatRing.tsx
@@ -1,66 +1,41 @@
 'use client'
 
-// src/renderer/components/ds/StatRing.tsx
-// v2 신규: 컬러 그라디언트 링 아이콘 — 스탯 타일의 원형 링 (레퍼런스 4타일 패턴)
+// packages/ui/src/components/ds/StatRing.tsx
+// v4 "조용한 계기": 아이콘 자리. 다색 원뿔 그라디언트 링·글로우를 걷어내고 1px 원 + 한 색 아이콘으로.
+// color 는 호환용 — accent 만 강조색, 나머지는 모두 보조 텍스트색(색으로 항목을 구분하지 않는다).
 
 import { Box } from '@mui/material'
 import { d3roPalette } from '../../theme'
 
 type RingColor = 'blue' | 'purple' | 'green' | 'orange' | 'red' | 'accent'
 
-const RING_COLORS: Record<RingColor, { from: string; to: string; glow: string; icon: string }> = {
-  blue:   { from: 'var(--d3-gradient-wave1)', to: 'var(--d3-gradient-wave2)', glow: d3roPalette.tag.blueBg, icon: d3roPalette.tag.blue },
-  purple: { from: 'var(--d3-gradient-wave3)', to: 'var(--d3-gradient-wave4)', glow: d3roPalette.tag.purpleBg, icon: d3roPalette.tag.purple },
-  green:  { from: d3roPalette.tag.green, to: d3roPalette.tag.green, glow: d3roPalette.tag.greenGlow, icon: d3roPalette.tag.green },
-  orange: { from: d3roPalette.tag.orange, to: d3roPalette.tag.orange, glow: d3roPalette.tag.orangeGlow, icon: d3roPalette.tag.orange },
-  red:    { from: d3roPalette.tag.red, to: d3roPalette.tag.red, glow: d3roPalette.tag.redGlow, icon: d3roPalette.tag.red },
-  accent: { from: 'var(--d3-accent-light)', to: 'var(--d3-accent-dark)', glow: 'var(--d3-accent-dim)', icon: d3roPalette.accent.light },
-}
-
 interface StatRingProps {
-  /** 링 색 (기본 blue) */
   color?: RingColor
   /** 외경 px (기본 56) */
   size?: number
-  /** 링 두께 px (기본 2) */
+  /** @deprecated v4: 선은 1px 고정 */
   thickness?: number
-  /** 중앙 아이콘/콘텐츠 */
   children?: React.ReactNode
 }
 
-export function StatRing({
-  color = 'blue',
-  size = 56,
-  thickness = 2,
-  children,
-}: StatRingProps): React.ReactElement {
-  const c = RING_COLORS[color]
+export function StatRing({ color = 'blue', size = 56, children }: StatRingProps): React.ReactElement {
   return (
     <Box
+      aria-hidden
       sx={{
         width: size,
         height: size,
         borderRadius: '50%',
-        p: `${thickness}px`,
-        background: `conic-gradient(from 210deg, ${c.from}, ${c.to}, ${c.from})`,
-        boxShadow: `0 0 ${size / 3.5}px ${c.glow}`,
+        border: `1px solid ${d3roPalette.border.default}`,
+        bgcolor: d3roPalette.bg.inset,
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        color: color === 'accent' ? d3roPalette.accent.light : d3roPalette.text.secondary,
         flexShrink: 0,
       }}
     >
-      <Box
-        sx={{
-          width: '100%',
-          height: '100%',
-          borderRadius: '50%',
-          bgcolor: d3roPalette.bg.crtGlass,
-          display: 'flex',
-          alignItems: 'center',
-          justifyContent: 'center',
-          color: c.icon,
-        }}
-      >
-        {children}
-      </Box>
+      {children}
     </Box>
   )
 }
diff --git a/packages/ui/src/components/ds/TactileBadge.tsx b/packages/ui/src/components/ds/TactileBadge.tsx
index 711e028..56bf6fd 100644
--- a/packages/ui/src/components/ds/TactileBadge.tsx
+++ b/packages/ui/src/components/ds/TactileBadge.tsx
@@ -1,28 +1,37 @@
 'use client'
 
 // packages/ui/src/components/ds/TactileBadge.tsx
-// Hardware-grade telemetry badge / pill chip with optional LED bead and keycap rendering
+// v4 "조용한 계기": 작은 상태 표지. 채움은 옅게, 글자는 상태 역할색(테마 반응, 대비 유지).
+// 한글이 들어가므로 자간 0, 웨이트 500. mono 는 라틴 수치·키 이름에만.
 
 import React from 'react'
 import { Box, type BoxProps } from '@mui/material'
 import { Led } from './Led'
-import { d3roPalette, d3roFontSans, d3roFontMono, d3roRadius, typoSx } from '../../theme'
+import { d3roPalette, d3roFontSans, d3roFontMono, d3roRadius, d3roTransition, d3roFocusRing } from '../../theme'
 
 export interface TactileBadgeProps extends Omit<BoxProps, 'component'> {
-  /** Optional LED indicator color */
+  /** 앞에 붙는 상태 점 */
   ledColor?: 'green' | 'amber' | 'red' | 'blue' | 'orange' | 'purple' | 'off'
-  /** Whether the LED should pulse */
+  /** 상태 점 깜빡임 (감소 모션에서는 멈춘다) */
   ledPulse?: boolean
-  /** Semantic tone for border and background */
+  /** 의미 톤 */
   tone?: 'default' | 'accent' | 'success' | 'warning' | 'error' | 'mono'
-  /** Whether to use monospace font */
+  /** 라틴 수치·키 이름일 때만 */
   mono?: boolean
-  /** Interactive clickable chip */
+  /** 누를 수 있는 칩 */
   onClick?: (e: React.MouseEvent<HTMLDivElement>) => void
-  /** Content to display */
   children?: React.ReactNode
 }
 
+const TONES = {
+  default: { color: d3roPalette.text.secondary, bg: 'transparent', border: d3roPalette.border.default },
+  accent: { color: d3roPalette.accent.light, bg: d3roPalette.accent.dim, border: 'transparent' },
+  success: { color: d3roPalette.status.success, bg: d3roPalette.status.successBg, border: 'transparent' },
+  warning: { color: d3roPalette.status.warning, bg: d3roPalette.status.warningBg, border: 'transparent' },
+  error: { color: d3roPalette.status.danger, bg: d3roPalette.status.dangerBg, border: 'transparent' },
+  mono: { color: d3roPalette.text.primary, bg: d3roPalette.bg.inset, border: d3roPalette.border.default },
+} as const
+
 export function TactileBadge({
   ledColor,
   ledPulse = false,
@@ -34,73 +43,47 @@ export function TactileBadge({
   ...boxProps
 }: TactileBadgeProps): React.ReactElement {
   const isClickable = Boolean(onClick)
-
-  let textColor: string = d3roPalette.text.secondary
-  let borderColor: string = d3roPalette.glass.hairlineStrong
-  let bgColor: string = d3roPalette.glass.raised
-
-  switch (tone) {
-    case 'accent':
-      textColor = d3roPalette.accent.light
-      borderColor = d3roPalette.accent.dim
-      bgColor = d3roPalette.accent.dim
-      break
-    case 'success':
-      textColor = d3roPalette.tag.green
-      borderColor = d3roPalette.tag.greenBg
-      bgColor = d3roPalette.tag.greenBg
-      break
-    case 'warning':
-      textColor = d3roPalette.tag.orange
-      borderColor = d3roPalette.tag.orangeBg
-      bgColor = d3roPalette.tag.orangeBg
-      break
-    case 'error':
-      textColor = d3roPalette.tag.red
-      borderColor = d3roPalette.tag.redBg
-      bgColor = d3roPalette.tag.redBg
-      break
-    case 'mono':
-      textColor = d3roPalette.text.primary
-      borderColor = d3roPalette.border.default
-      bgColor = d3roPalette.bg.inset
-      break
-  }
+  const t = TONES[tone]
 
   return (
     <Box
       {...boxProps}
       onClick={onClick}
+      {...(isClickable
+        ? {
+            role: 'button',
+            tabIndex: 0,
+            onKeyDown: (e: React.KeyboardEvent<HTMLDivElement>) => {
+              if (e.key === 'Enter' || e.key === ' ') {
+                e.preventDefault()
+                e.currentTarget.click()
+              }
+            },
+          }
+        : {})}
       sx={{
         display: 'inline-flex',
         alignItems: 'center',
-        gap: 0.85,
-        px: 1.25,
-        py: 0.45,
-        borderRadius: d3roRadius.badge,
-        border: `1px solid ${borderColor}`,
-        bgcolor: bgColor,
-        color: textColor,
-        ...typoSx('meta'),
+        gap: 0.75,
+        px: 1,
+        height: 22,
+        borderRadius: d3roRadius.small,
+        border: `1px solid ${t.border}`,
+        bgcolor: t.bg,
+        color: t.color,
         fontFamily: mono ? d3roFontMono : d3roFontSans,
         fontSize: '11px',
-        fontWeight: 600,
-        letterSpacing: '0.04em',
-        textTransform: 'none',
+        fontWeight: 500,
+        lineHeight: 1,
+        letterSpacing: 0,
+        fontVariantNumeric: 'tabular-nums',
         whiteSpace: 'nowrap',
         cursor: isClickable ? 'pointer' : 'default',
-        transition: 'all 0.15s cubic-bezier(0.16, 1, 0.3, 1)',
+        transition: d3roTransition('border-color', 'color'),
         ...(isClickable
           ? {
-              '&:hover': {
-                borderColor: d3roPalette.accent.main,
-                color: d3roPalette.text.primary,
-                filter: 'brightness(1.15)',
-                transform: 'translateY(-1px)',
-              },
-              '&:active': {
-                transform: 'translateY(0) scale(0.97)',
-              },
+              '&:hover': { borderColor: d3roPalette.border.strong, color: d3roPalette.text.primary },
+              '&:focus-visible': d3roFocusRing,
             }
           : {}),
         ...sx,
diff --git a/packages/ui/src/components/ds/TiltCard.tsx b/packages/ui/src/components/ds/TiltCard.tsx
index 9347512..a3ff209 100644
--- a/packages/ui/src/components/ds/TiltCard.tsx
+++ b/packages/ui/src/components/ds/TiltCard.tsx
@@ -1,175 +1,20 @@
 'use client'
 
 // packages/ui/src/components/ds/TiltCard.tsx
-// v2 "Midnight Glass": 3D 틸트 + 커서 추종 빛 반사(specular highlight) 카드.
-// MetalCard의 글래스 표면(동일 토큰)에 마우스 추적 3D 기울임 + 커서 위치에서
-// 빛이 반사되는 듯한 스페큘러 하이라이트를 더한다. 라이브러리 없이 네이티브
-// pointer 이벤트 + CSS 변수로 구현(리렌더 0). prefers-reduced-motion 완전 존중.
-//
-// 구조: 루트 Box(transform/perspective/표면/blur/링/시인/overflow) +
-//   ::before(앰비언트 시인) + ::after(그라디언트 헤어라인 링) +
-//   자식 span.d3-tilt-spotlight(커서 추종 스페큘러, z1) + 자식 콘텐츠(z2).
+// v4 "조용한 계기": 3D 틸트·커서 반사를 걷어냈다. 이름과 props 는 호환용 — 평평한 MetalCard 로 렌더한다.
+// 근거: 하루 종일 켜 두는 도구에서 커서를 따라 기우는 카드는 정보가 아니라 소음이다(design.md 2026-09-28).
 
-import { useCallback, useEffect, useRef } from 'react'
-import { Box, type BoxProps } from '@mui/material'
-import { d3roPalette, d3roShadow, d3roRadius } from '../../theme'
+import { type BoxProps } from '@mui/material'
+import { MetalCard } from './MetalCard'
 
 interface TiltCardProps extends Omit<BoxProps, 'component'> {
-  /** 최대 기울기 각도(deg). 히어로 8, 작은 타일 6 권장. */
+  /** @deprecated v4: 틸트 없음 */
   maxTilt?: number
-  /** 커서 추종 스페큘러 하이라이트(빛 반사) 표시 여부. */
+  /** @deprecated v4: 반사 없음 */
   spotlight?: boolean
-  /** 카드 콘텐츠 */
   children?: React.ReactNode
 }
 
-/**
- * 3D 틸트 + 스페큘러 상호작용 엔진.
- * React state를 쓰지 않고 ref의 CSS 변수를 직접 갱신해 60fps 합성.
- * prefers-reduced-motion 시 틸트/추종을 모두 비활성화한다.
- */
-function useTiltCard(maxTilt: number) {
-  const ref = useRef<HTMLDivElement>(null)
-  const reduceRef = useRef(false)
-
-  // OS 설정 변경(런타임 토글)에도 즉시 반응하도록 구독.
-  useEffect(() => {
-    if (typeof window === 'undefined' || !('matchMedia' in window)) return
-    const mq = window.matchMedia('(prefers-reduced-motion: reduce)')
-    reduceRef.current = mq.matches
-    const handler = (e: MediaQueryListEvent): void => {
-      reduceRef.current = e.matches
-    }
-    mq.addEventListener('change', handler)
-    return () => mq.removeEventListener('change', handler)
-  }, [])
-
-  const onPointerMove = useCallback(
-    (e: React.PointerEvent<HTMLDivElement>): void => {
-      if (reduceRef.current) return
-      const el = ref.current
-      if (!el) return
-      const rect = el.getBoundingClientRect()
-      const px = (e.clientX - rect.left) / rect.width // 0..1
-      const py = (e.clientY - rect.top) / rect.height // 0..1
-      // rotateY: 좌우 / rotateX: 상하(반전 → 커서 쪽으로 기울임)
-      el.style.setProperty('--d3-tilt-ry', `${((px - 0.5) * 2 * maxTilt).toFixed(2)}deg`)
-      el.style.setProperty('--d3-tilt-rx', `${(-(py - 0.5) * 2 * maxTilt).toFixed(2)}deg`)
-      el.style.setProperty('--d3-tilt-mx', `${(px * 100).toFixed(1)}%`)
-      el.style.setProperty('--d3-tilt-my', `${(py * 100).toFixed(1)}%`)
-      el.setAttribute('data-tilting', 'true')
-    },
-    [maxTilt],
-  )
-
-  const onPointerLeave = useCallback((): void => {
-    const el = ref.current
-    if (!el) return
-    // 변수를 중립으로 리셋한 뒤 data 속성 제거 → 복귀 트랜지션 동작.
-    // (리셋하지 않으면 마지막 각도에 고정됨)
-    el.style.setProperty('--d3-tilt-rx', '0deg')
-    el.style.setProperty('--d3-tilt-ry', '0deg')
-    el.style.setProperty('--d3-tilt-mx', '50%')
-    el.style.setProperty('--d3-tilt-my', '50%')
-    el.removeAttribute('data-tilting')
-  }, [])
-
-  return { ref, onPointerMove, onPointerLeave }
-}
-
-export function TiltCard({
-  children,
-  maxTilt = 8,
-  spotlight = true,
-  onPointerMove,
-  onPointerLeave,
-  sx,
-  ...boxProps
-}: TiltCardProps): React.ReactElement {
-  const tilt = useTiltCard(maxTilt)
-
-  return (
-    <Box
-      ref={tilt.ref}
-      {...boxProps}
-      onPointerMove={(e) => {
-        onPointerMove?.(e)
-        tilt.onPointerMove(e)
-      }}
-      onPointerLeave={(e) => {
-        onPointerLeave?.(e)
-        tilt.onPointerLeave()
-      }}
-      sx={{
-        position: 'relative',
-        bgcolor: d3roPalette.glass.surface,
-        backdropFilter: `blur(${d3roPalette.glass.blur})`,
-        borderRadius: d3roRadius.card,
-        boxShadow: d3roShadow.glowCard,
-        p: 3,
-        overflow: 'hidden',
-        // perspective() 단일 요소 틸트. 항상 non-none → 안정적 스태킹 컨텍스트.
-        transform:
-          'perspective(900px) rotateX(var(--d3-tilt-rx,0deg)) rotateY(var(--d3-tilt-ry,0deg))',
-        transition: 'transform 0.5s cubic-bezier(0.16,1,0.3,1), box-shadow 0.25s ease',
-        // 앰비언트 시인 (정적) — MetalCard와 동일
-        '&::before': {
-          content: '""',
-          position: 'absolute',
-          inset: 0,
-          borderRadius: 'inherit',
-          background: d3roPalette.glass.sheen,
-          pointerEvents: 'none',
-        },
-        // 그라디언트 헤어라인 링 (mask 링 기법) — MetalCard와 동일
-        '&::after': {
-          content: '""',
-          position: 'absolute',
-          inset: 0,
-          borderRadius: 'inherit',
-          padding: '1px',
-          background: d3roPalette.glass.borderGradient,
-          WebkitMask: 'linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0)',
-          WebkitMaskComposite: 'xor',
-          maskComposite: 'exclude',
-          pointerEvents: 'none',
-        },
-        '&:hover': { boxShadow: d3roShadow.glowCardHover },
-        // 트래킹 중: transform 트랜지션 제거(즉시 반응) + 합성 레이어 승격
-        '&[data-tilting="true"]': {
-          transition: 'box-shadow 0.25s ease',
-          willChange: 'transform',
-        },
-        // 스페큘러 reveal (Emotion이 plain class를 리라이트하지 않으므로 리터럴 className 사용)
-        '&:hover .d3-tilt-spotlight': { opacity: 1 },
-        // reduced-motion: 틸트·트랜지션·추종 모두 정지
-        '@media (prefers-reduced-motion: reduce)': {
-          transition: 'none',
-          transform: 'none',
-          '& .d3-tilt-spotlight': { transition: 'none' },
-        },
-        ...sx,
-      }}
-    >
-      {spotlight && (
-        <Box
-          component="span"
-          className="d3-tilt-spotlight"
-          aria-hidden
-          sx={{
-            position: 'absolute',
-            inset: 0,
-            borderRadius: 'inherit',
-            pointerEvents: 'none',
-            zIndex: 1,
-            opacity: 0,
-            transition: 'opacity 0.25s ease',
-            mixBlendMode: 'screen',
-            background: `radial-gradient(circle 200px at var(--d3-tilt-mx,50%) var(--d3-tilt-my,50%), ${d3roPalette.glass.specular}, transparent 70%)`,
-          }}
-        />
-      )}
-      <Box sx={{ position: 'relative', zIndex: 2 }}>{children}</Box>
-    </Box>
-  )
+export function TiltCard({ maxTilt: _maxTilt, spotlight: _spotlight, children, ...rest }: TiltCardProps): React.ReactElement {
+  return <MetalCard {...rest}>{children}</MetalCard>
 }
diff --git a/packages/ui/src/theme-raw.ts b/packages/ui/src/theme-raw.ts
new file mode 100644
index 0000000..0eb7654
--- /dev/null
+++ b/packages/ui/src/theme-raw.ts
@@ -0,0 +1,448 @@
+// packages/ui/src/theme-raw.ts
+// D3RO 디자인 토큰 원시값 SSOT — v4 "조용한 계기" (2026-09-28).
+// MUI·DOM 의존이 없다. 렌더러 theme.ts 와 팝업/main 의 theme-vars.ts 가 모두 여기서 값을 받는다.
+//
+// v4 원칙 (루트 design.md "2026-09-28 전면 개편"):
+//  - 표면은 평평하다. 위계는 크기·명도·1px 선으로 만든다. 글래스·글로우·그라디언트는 쓰지 않는다.
+//  - 테마마다 적는 것은 기본값(표면·텍스트 3단·경계·액센트)뿐이다. v2 의 glass/gradient/glow 키는
+//    하위 호환을 위해 남기되 deriveRaw() 가 평면 값으로 파생한다 — 컴포넌트 수백 곳을 고치지 않고 이펙트를 끈다.
+//  - 텍스트 3단(primary/secondary/tertiary)은 모든 표면(app/card/elevated/sidebar)에서 4.5:1 이상.
+//    v2 의 label/inactive/dimLabel/muted 는 tertiary 의 별칭이다. disabled 만 대비 예외.
+//  - accent.solid 는 채운 버튼 배경, accent.ink 는 그 위 글자 — 두 값의 대비 4.5:1 이상.
+
+export type ThemeKey = 'dark' | 'light' | 'nord' | 'solarized' | 'catppuccin' | 'dracula'
+
+/** 테마가 직접 정하는 값. 이것만 테마별로 적는다. */
+interface ThemeBase {
+  bg: { app: string; card: string; cardHover: string; elevated: string; input: string; sidebar: string; inset: string }
+  text: { primary: string; secondary: string; tertiary: string; disabled: string; hover: string }
+  border: { subtle: string; default: string; strong: string }
+  accent: {
+    main: string
+    /** 어두운 표면 위 강조 글자 (라이트 테마에서는 더 진한 값) */
+    light: string
+    dark: string
+    dim: string
+    /** 채운 버튼 배경 — ink 와 4.5:1 이상 */
+    solid: string
+    solidHover: string
+    ink: string
+  }
+  elevation: { overlay: string; tooltip: string }
+}
+
+/** v2 호환 전체 구조 — CSS 변수 이름이 이 구조에서 나온다. */
+export interface RawTheme {
+  bg: ThemeBase['bg'] & { chassis: string; crtBezel: string; crtGlass: string }
+  text: {
+    primary: string
+    secondary: string
+    tertiary: string
+    label: string
+    disabled: string
+    engraving: string
+    inactive: string
+    dimLabel: string
+    muted: string
+    hover: string
+  }
+  border: ThemeBase['border']
+  shadow: {
+    card: string
+    buttonBase: string
+    chassis: string
+    inset: string
+    insetDeep: string
+    buttonRaised: string
+    buttonPressed: string
+    screenGlow: string
+    tooltip: string
+    overlay: string
+  }
+  accent: ThemeBase['accent'] & { glow: string; crtPhosphor: string; crtPhosphorDim: string }
+  glass: {
+    surface: string
+    raised: string
+    hairline: string
+    hairlineStrong: string
+    sheen: string
+    borderGradient: string
+    blur: string
+    specular: string
+  }
+  gradient: {
+    accent: string
+    logo: string
+    bar: string
+    barAlt: string
+    wave1: string
+    wave2: string
+    wave3: string
+    wave4: string
+  }
+  glow: { accent: string; soft: string; card: string; cardHover: string }
+}
+
+const solidFill = (color: string): string => `linear-gradient(${color}, ${color})`
+
+/** 기본값 → v2 호환 구조. 이펙트 키는 전부 평면 값으로 떨어진다. */
+function deriveRaw(b: ThemeBase): RawTheme {
+  const none = 'none'
+  return {
+    bg: { ...b.bg, chassis: b.bg.card, crtBezel: b.bg.inset, crtGlass: b.bg.inset },
+    text: {
+      primary: b.text.primary,
+      secondary: b.text.secondary,
+      tertiary: b.text.tertiary,
+      label: b.text.tertiary,
+      inactive: b.text.tertiary,
+      dimLabel: b.text.tertiary,
+      muted: b.text.tertiary,
+      disabled: b.text.disabled,
+      engraving: b.bg.app,
+      hover: b.text.hover,
+    },
+    border: b.border,
+    shadow: {
+      card: none,
+      buttonBase: none,
+      chassis: none,
+      inset: none,
+      insetDeep: none,
+      buttonRaised: none,
+      buttonPressed: none,
+      screenGlow: none,
+      tooltip: b.elevation.tooltip,
+      overlay: b.elevation.overlay,
+    },
+    accent: { ...b.accent, glow: b.accent.dim, crtPhosphor: b.accent.light, crtPhosphorDim: b.accent.dark },
+    glass: {
+      surface: b.bg.card,
+      raised: b.bg.elevated,
+      hairline: b.border.default,
+      hairlineStrong: b.border.strong,
+      sheen: none,
+      borderGradient: solidFill(b.border.default),
+      blur: '0px',
+      specular: 'transparent',
+    },
+    gradient: {
+      accent: solidFill(b.accent.solid),
+      logo: solidFill(b.text.primary),
+      bar: solidFill(b.accent.main),
+      barAlt: solidFill(b.accent.light),
+      wave1: b.accent.light,
+      wave2: b.accent.main,
+      wave3: b.accent.main,
+      wave4: b.accent.light,
+    },
+    glow: { accent: none, soft: none, card: none, cardHover: none },
+  }
+}
+
+const BASE: Record<ThemeKey, ThemeBase> = {
+  dark: {
+    bg: { app: '#0a0e1c', card: '#111a30', cardHover: '#152039', elevated: '#1a2540', input: '#0d1526', sidebar: '#080b17', inset: '#0a111f' },
+    text: { primary: '#eef2fb', secondary: '#93a4c8', tertiary: '#7e8eb0', disabled: '#3c4763', hover: '#c9d5f2' },
+    border: { subtle: 'rgba(148,180,255,0.07)', default: 'rgba(148,180,255,0.12)', strong: 'rgba(148,180,255,0.20)' },
+    accent: { main: '#3b82f6', light: '#60a5fa', dark: '#2563eb', dim: 'rgba(59,130,246,0.14)', solid: '#2563eb', solidHover: '#1d4ed8', ink: '#ffffff' },
+    elevation: { overlay: '0 12px 32px rgba(3,7,18,0.55)', tooltip: '0 8px 24px rgba(3,7,18,0.5)' },
+  },
+  light: {
+    bg: { app: '#f2f5fb', card: '#ffffff', cardHover: '#f7f9fd', elevated: '#eef2f9', input: '#ffffff', sidebar: '#e9eef7', inset: '#e4e9f2' },
+    text: { primary: '#111827', secondary: '#4b5a75', tertiary: '#56647c', disabled: '#b5bfd1', hover: '#2b3a55' },
+    border: { subtle: 'rgba(30,58,138,0.07)', default: 'rgba(30,58,138,0.12)', strong: 'rgba(30,58,138,0.22)' },
+    accent: { main: '#2563eb', light: '#1d4ed8', dark: '#1e40af', dim: 'rgba(37,99,235,0.10)', solid: '#2563eb', solidHover: '#1d4ed8', ink: '#ffffff' },
+    elevation: { overlay: '0 12px 32px rgba(30,58,138,0.14)', tooltip: '0 8px 24px rgba(30,58,138,0.10)' },
+  },
+  // https://www.nordtheme.com/
+  nord: {
+    bg: { app: '#242933', card: '#2e3440', cardHover: '#343b49', elevated: '#3b4252', input: '#2a303c', sidebar: '#20242d', inset: '#232830' },
+    text: { primary: '#eceff4', secondary: '#c2cad8', tertiary: '#a6b0c4', disabled: '#4c566a', hover: '#e5e9f0' },
+    border: { subtle: 'rgba(216,222,233,0.06)', default: 'rgba(216,222,233,0.11)', strong: 'rgba(216,222,233,0.18)' },
+    accent: { main: '#88c0d0', light: '#a3d0de', dark: '#6aacbe', dim: 'rgba(136,192,208,0.14)', solid: '#88c0d0', solidHover: '#9ccbd8', ink: '#2e3440' },
+    elevation: { overlay: '0 12px 32px rgba(10,13,18,0.5)', tooltip: '0 8px 24px rgba(10,13,18,0.45)' },
+  },
+  // https://ethanschoonover.com/solarized/
+  solarized: {
+    bg: { app: '#00212b', card: '#073642', cardHover: '#0a3e4c', elevated: '#0d4250', input: '#03303c', sidebar: '#001c25', inset: '#001f28' },
+    text: { primary: '#eee8d5', secondary: '#b7bdb6', tertiary: '#a1aca9', disabled: '#586e75', hover: '#d6d9cf' },
+    border: { subtle: 'rgba(131,148,150,0.08)', default: 'rgba(131,148,150,0.14)', strong: 'rgba(131,148,150,0.22)' },
+    accent: { main: '#b58900', light: '#d4a017', dark: '#8a6800', dim: 'rgba(181,137,0,0.14)', solid: '#8a6800', solidHover: '#7a5c00', ink: '#ffffff' },
+    elevation: { overlay: '0 12px 32px rgba(0,10,13,0.55)', tooltip: '0 8px 24px rgba(0,10,13,0.5)' },
+  },
+  // https://catppuccin.com/ (Mocha)
+  catppuccin: {
+    bg: { app: '#181825', card: '#1e1e2e', cardHover: '#242438', elevated: '#313244', input: '#191926', sidebar: '#14141f', inset: '#11111b' },
+    text: { primary: '#cdd6f4', secondary: '#a8b2d8', tertiary: '#939cbf', disabled: '#585b70', hover: '#e6e9f8' },
+    border: { subtle: 'rgba(205,214,244,0.05)', default: 'rgba(205,214,244,0.10)', strong: 'rgba(205,214,244,0.17)' },
+    accent: { main: '#cba6f7', light: '#dfc0ff', dark: '#a67fd4', dim: 'rgba(203,166,247,0.14)', solid: '#cba6f7', solidHover: '#d7b9fa', ink: '#11111b' },
+    elevation: { overlay: '0 12px 32px rgba(5,5,12,0.55)', tooltip: '0 8px 24px rgba(5,5,12,0.5)' },
+  },
+  // https://draculatheme.com/
+  dracula: {
+    bg: { app: '#1e2029', card: '#282a36', cardHover: '#2e3040', elevated: '#383a4a', input: '#232530', sidebar: '#1a1c24', inset: '#1b1c25' },
+    text: { primary: '#f8f8f2', secondary: '#b6bdd9', tertiary: '#a1a7c1', disabled: '#6272a4', hover: '#ffffff' },
+    border: { subtle: 'rgba(248,248,242,0.05)', default: 'rgba(248,248,242,0.10)', strong: 'rgba(248,248,242,0.17)' },
+    accent: { main: '#bd93f9', light: '#d4b8ff', dark: '#9a70e0', dim: 'rgba(189,147,249,0.14)', solid: '#bd93f9', solidHover: '#caa6fa', ink: '#1e2029' },
+    elevation: { overlay: '0 12px 32px rgba(8,9,13,0.55)', tooltip: '0 8px 24px rgba(8,9,13,0.5)' },
+  },
+}
+
+export const RAW: Record<ThemeKey, RawTheme> = {
+  dark: deriveRaw(BASE.dark),
+  light: deriveRaw(BASE.light),
+  nord: deriveRaw(BASE.nord),
+  solarized: deriveRaw(BASE.solarized),
+  catppuccin: deriveRaw(BASE.catppuccin),
+  dracula: deriveRaw(BASE.dracula),
+}
+
+export const THEME_KEYS = Object.keys(RAW) as ThemeKey[]
+
+export function isThemeKey(value: string): value is ThemeKey {
+  return (THEME_KEYS as string[]).includes(value)
+}
+
+// ── 시맨틱 상태 역할 (액센트와 분리 — 기능 우선) ─────────────
+// 다크는 밝은 상태색, 라이트는 어두운 상태색. 텍스트로 쓸 수 있는 대비를 유지한다.
+export interface StatusRole {
+  success: string
+  successBg: string
+  warning: string
+  warningBg: string
+  danger: string
+  dangerBg: string
+  info: string
+  infoBg: string
+}
+
+export const STATUS: Record<ThemeKey, StatusRole> = {
+  dark: {
+    success: '#34d399', successBg: 'rgba(52,211,153,0.12)',
+    warning: '#fbbf24', warningBg: 'rgba(251,191,36,0.12)',
+    danger: '#f87171', dangerBg: 'rgba(248,113,113,0.12)',
+    info: '#60a5fa', infoBg: 'rgba(96,165,250,0.12)',
+  },
+  light: {
+    success: '#047857', successBg: 'rgba(4,120,87,0.10)',
+    warning: '#b45309', warningBg: 'rgba(180,83,9,0.10)',
+    danger: '#b91c1c', dangerBg: 'rgba(185,28,28,0.10)',
+    info: '#1d4ed8', infoBg: 'rgba(29,78,216,0.10)',
+  },
+  nord: {
+    success: '#a3be8c', successBg: 'rgba(163,190,140,0.14)',
+    warning: '#ebcb8b', warningBg: 'rgba(235,203,139,0.14)',
+    danger: '#d08770', dangerBg: 'rgba(208,135,112,0.14)',
+    info: '#88c0d0', infoBg: 'rgba(136,192,208,0.14)',
+  },
+  solarized: {
+    success: '#a4b82a', successBg: 'rgba(133,153,0,0.16)',
+    warning: '#d4a017', warningBg: 'rgba(181,137,0,0.16)',
+    danger: '#ef6461', dangerBg: 'rgba(220,50,47,0.16)',
+    info: '#4ea3de', infoBg: 'rgba(38,139,210,0.16)',
+  },
+  catppuccin: {
+    success: '#a6e3a1', successBg: 'rgba(166,227,161,0.14)',
+    warning: '#f9e2af', warningBg: 'rgba(249,226,175,0.14)',
+    danger: '#f38ba8', dangerBg: 'rgba(243,139,168,0.14)',
+    info: '#89b4fa', infoBg: 'rgba(137,180,250,0.14)',
+  },
+  dracula: {
+    success: '#50fa7b', successBg: 'rgba(80,250,123,0.14)',
+    warning: '#f1fa8c', warningBg: 'rgba(241,250,140,0.14)',
+    danger: '#ff6e6e', dangerBg: 'rgba(255,85,85,0.14)',
+    info: '#8be9fd', infoBg: 'rgba(139,233,253,0.14)',
+  },
+}
+
+// ── 테마 불변 태그색 (카테고리 구분용 — 텍스트 대비를 보장하지 않는다) ──
+// 상태를 말할 때는 STATUS 를 쓴다. tag 는 아이콘·점·범례처럼 글자가 아닌 곳에만.
+export const TAG = {
+  purple: '#8b5cf6',
+  purpleBg: 'rgba(139, 92, 246, 0.12)',
+  orange: '#f59e0b',
+  orangeBg: 'rgba(245, 158, 11, 0.12)',
+  red: '#ef4444',
+  redBg: 'rgba(239, 68, 68, 0.12)',
+  green: '#10b981',
+  greenBg: 'rgba(16, 185, 129, 0.12)',
+  blue: '#3b82f6',
+  blueBg: 'rgba(59, 130, 246, 0.12)',
+  greenGlow: 'rgba(16, 185, 129, 0.35)',
+  redGlow: 'rgba(239, 68, 68, 0.35)',
+  orangeGlow: 'rgba(245, 158, 11, 0.35)',
+  purpleGlow: 'rgba(139, 92, 246, 0.35)',
+  blueGlow: 'rgba(59, 130, 246, 0.35)',
+  cyan: '#06b6d4',
+  cyanBg: 'rgba(6, 182, 212, 0.12)',
+  cyanGlow: 'rgba(6, 182, 212, 0.35)',
+} as const
+
+// ── 간격 리듬 (4px 그리드) ─────────────────────────────────
+export const SPACE = { s1: '4px', s2: '8px', s3: '12px', s4: '16px', s5: '24px', s6: '40px', s7: '64px', s8: '96px' } as const
+
+// ── 컨트롤 치수 (버튼처럼 생긴 것은 전부 같은 치수) ──────────
+export const CONTROL = { h: '36px', hSm: '28px', padX: '14px', padXSm: '10px' } as const
+
+// ── 웨이트는 세 개 ─────────────────────────────────────────
+export const WEIGHT = { body: 400, medium: 500, strong: 600 } as const
+
+// ── 모션 문법 — 상태 변화 피드백만. 등장 연출은 쓰지 않는다 ──
+export const MOTION = {
+  instant: '100ms',
+  quick: '160ms',
+  normal: '240ms',
+  slow: '400ms',
+  easeOut: 'cubic-bezier(0.22, 1, 0.36, 1)',
+  easeIn: 'cubic-bezier(0.64, 0, 0.78, 0)',
+  easeSoft: 'cubic-bezier(0.4, 0, 0.2, 1)',
+} as const
+
+// ── 반경 — 정밀 도구: 작고 일정하게 ──────────────────────────
+export const RADIUS = {
+  doubleBezelOuter: '12px',
+  doubleBezelInner: '10px',
+  outer: '12px',
+  card: '10px',
+  inner: '8px',
+  button: '8px',
+  small: '6px',
+  xs: '4px',
+  badge: '999px',
+  pill: '999px',
+} as const
+
+// 한글 우선 폰트 스택 — Pretendard(한/영 조화) → 플랫폼 한글 시스템 폰트 폴백.
+export const FONT_SANS = [
+  '"Pretendard Variable"', 'Pretendard', '-apple-system', 'BlinkMacSystemFont',
+  '"Apple SD Gothic Neo"', '"Noto Sans KR"', '"Segoe UI"', 'Roboto',
+  '"Helvetica Neue"', 'Arial', '"Malgun Gothic"', 'sans-serif',
+].join(',')
+
+/** 숫자·코드·키 이름(라틴) 전용. 한글이 섞일 수 있는 문자열에는 쓰지 않는다 — 한글 글리프가 없어 자간이 벌어진다. */
+export const FONT_MONO = [
+  'ui-monospace', 'SFMono-Regular', '"SF Mono"', 'Menlo', 'Consolas',
+  '"Liberation Mono"', 'monospace',
+].join(',')
+
+// ── CSS Custom Properties ────────────────────────────────────
+export function buildCssVars(key: ThemeKey): Record<string, string> {
+  const r = RAW[key]
+  const st = STATUS[key]
+  return {
+    '--d3-bg-app': r.bg.app,
+    '--d3-bg-card': r.bg.card,
+    '--d3-bg-cardHover': r.bg.cardHover,
+    '--d3-bg-elevated': r.bg.elevated,
+    '--d3-bg-input': r.bg.input,
+    '--d3-bg-sidebar': r.bg.sidebar,
+    '--d3-bg-inset': r.bg.inset,
+    '--d3-bg-chassis': r.bg.chassis,
+    '--d3-bg-crtBezel': r.bg.crtBezel,
+    '--d3-bg-crtGlass': r.bg.crtGlass,
+    '--d3-text-primary': r.text.primary,
+    '--d3-text-secondary': r.text.secondary,
+    '--d3-text-tertiary': r.text.tertiary,
+    '--d3-text-label': r.text.label,
+    '--d3-text-disabled': r.text.disabled,
+    '--d3-text-engraving': r.text.engraving,
+    '--d3-text-inactive': r.text.inactive,
+    '--d3-text-dimLabel': r.text.dimLabel,
+    '--d3-text-muted': r.text.muted,
+    '--d3-text-hover': r.text.hover,
+    '--d3-border-subtle': r.border.subtle,
+    '--d3-border-default': r.border.default,
+    '--d3-border-strong': r.border.strong,
+    '--d3-shadow-card': r.shadow.card,
+    '--d3-shadow-buttonBase': r.shadow.buttonBase,
+    '--d3-shadow-chassis': r.shadow.chassis,
+    '--d3-shadow-inset': r.shadow.inset,
+    '--d3-shadow-insetDeep': r.shadow.insetDeep,
+    '--d3-shadow-buttonRaised': r.shadow.buttonRaised,
+    '--d3-shadow-buttonPressed': r.shadow.buttonPressed,
+    '--d3-shadow-screenGlow': r.shadow.screenGlow,
+    '--d3-shadow-tooltip': r.shadow.tooltip,
+    '--d3-shadow-overlay': r.shadow.overlay,
+    '--d3-accent-main': r.accent.main,
+    '--d3-accent-dim': r.accent.dim,
+    '--d3-accent-glow': r.accent.glow,
+    '--d3-accent-light': r.accent.light,
+    '--d3-accent-dark': r.accent.dark,
+    '--d3-accent-solid': r.accent.solid,
+    '--d3-accent-solidHover': r.accent.solidHover,
+    '--d3-accent-crtPhosphor': r.accent.crtPhosphor,
+    '--d3-accent-crtPhosphorDim': r.accent.crtPhosphorDim,
+    '--d3-accent-ink': r.accent.ink,
+    '--d3-glass-surface': r.glass.surface,
+    '--d3-glass-raised': r.glass.raised,
+    '--d3-glass-hairline': r.glass.hairline,
+    '--d3-glass-hairlineStrong': r.glass.hairlineStrong,
+    '--d3-glass-sheen': r.glass.sheen,
+    '--d3-glass-borderGradient': r.glass.borderGradient,
+    '--d3-glass-blur': r.glass.blur,
+    '--d3-glass-specular': r.glass.specular,
+    '--d3-gradient-accent': r.gradient.accent,
+    '--d3-gradient-logo': r.gradient.logo,
+    '--d3-gradient-bar': r.gradient.bar,
+    '--d3-gradient-barAlt': r.gradient.barAlt,
+    '--d3-gradient-wave1': r.gradient.wave1,
+    '--d3-gradient-wave2': r.gradient.wave2,
+    '--d3-gradient-wave3': r.gradient.wave3,
+    '--d3-gradient-wave4': r.gradient.wave4,
+    '--d3-glow-accent': r.glow.accent,
+    '--d3-glow-soft': r.glow.soft,
+    '--d3-glow-card': r.glow.card,
+    '--d3-glow-cardHover': r.glow.cardHover,
+    '--d3-status-success': st.success,
+    '--d3-status-successBg': st.successBg,
+    '--d3-status-warning': st.warning,
+    '--d3-status-warningBg': st.warningBg,
+    '--d3-status-danger': st.danger,
+    '--d3-status-dangerBg': st.dangerBg,
+    '--d3-status-info': st.info,
+    '--d3-status-infoBg': st.infoBg,
+    '--d3-space-1': SPACE.s1,
+    '--d3-space-2': SPACE.s2,
+    '--d3-space-3': SPACE.s3,
+    '--d3-space-4': SPACE.s4,
+    '--d3-space-5': SPACE.s5,
+    '--d3-space-6': SPACE.s6,
+    '--d3-space-7': SPACE.s7,
+    '--d3-space-8': SPACE.s8,
+    '--d3-control-h': CONTROL.h,
+    '--d3-control-h-sm': CONTROL.hSm,
+    '--d3-control-pad-x': CONTROL.padX,
+    '--d3-control-pad-x-sm': CONTROL.padXSm,
+    '--d3-weight-body': String(WEIGHT.body),
+    '--d3-weight-medium': String(WEIGHT.medium),
+    '--d3-weight-strong': String(WEIGHT.strong),
+    '--d3-dur-instant': MOTION.instant,
+    '--d3-dur-quick': MOTION.quick,
+    '--d3-dur-normal': MOTION.normal,
+    '--d3-dur-slow': MOTION.slow,
+    '--d3-ease-out': MOTION.easeOut,
+    '--d3-ease-in': MOTION.easeIn,
+    '--d3-ease-soft': MOTION.easeSoft,
+    '--d3-radius-card': RADIUS.card,
+    '--d3-radius-inner': RADIUS.inner,
+    '--d3-radius-button': RADIUS.button,
+    '--d3-radius-small': RADIUS.small,
+    '--d3-tag-purple': TAG.purple,
+    '--d3-tag-orange': TAG.orange,
+    '--d3-tag-red': TAG.red,
+    '--d3-tag-green': TAG.green,
+    '--d3-tag-blue': TAG.blue,
+    '--d3-tag-cyan': TAG.cyan,
+    '--d3-tag-cyanBg': TAG.cyanBg,
+    '--d3-bg-inset-soft': 'color-mix(in srgb, var(--d3-bg-inset) 70%, transparent)',
+    '--d3-bg-card-soft': 'color-mix(in srgb, var(--d3-bg-card) 70%, transparent)',
+    '--d3-bg-raised-soft': 'color-mix(in srgb, var(--d3-bg-elevated) 80%, transparent)',
+    '--d3-scrim': key === 'light' ? 'rgba(17,24,39,0.32)' : 'rgba(0,0,0,0.6)',
+    // 표면 위 옅은 오버레이(hover·선택) — 텍스트 색에서 파생해 라이트 테마에서도 보인다
+    '--d3-overlay-soft': 'color-mix(in srgb, var(--d3-text-primary) 6%, transparent)',
+    '--d3-overlay-strong': 'color-mix(in srgb, var(--d3-text-primary) 12%, transparent)',
+    '--d3-font-sans': FONT_SANS,
+    '--d3-font-mono': FONT_MONO,
+  }
+}
diff --git a/packages/ui/src/theme-vars.ts b/packages/ui/src/theme-vars.ts
index 55fc66e..27f85ff 100644
--- a/packages/ui/src/theme-vars.ts
+++ b/packages/ui/src/theme-vars.ts
@@ -1,283 +1,56 @@
-// src/shared/theme-vars.ts
+// packages/ui/src/theme-vars.ts
 // 팝업 윈도우용 CSS 변수 맵.
 // main process (WindowManager)에서 insertCSS로 팝업에 테마를 주입할 때 사용.
-// renderer의 theme.ts RAW와 동기화 유지 필요.
-// Node.js/Electron main 환경에서 import 가능 (DOM API 없음).
+// 값은 theme-raw.ts(렌더러와 같은 원시값)에서 파생한다 — 손으로 복제하지 않는다.
+// Node.js/Electron main 환경에서 import 가능 (MUI·DOM 의존 없음).
 
-export type PopupThemeKey = 'dark' | 'light' | 'nord' | 'solarized' | 'catppuccin' | 'dracula'
+import { RAW, STATUS, buildCssVars, isThemeKey, type ThemeKey } from './theme-raw'
 
-interface PopupThemeVars {
-  /** 카드 배경 (팝업 본체) */
-  '--d3-bg-card': string
-  /** 앱 배경 (recording-tip 반투명 배경) */
-  '--d3-bg-tip': string
-  /** 주요 텍스트 */
-  '--d3-text-primary': string
-  /** 보조 텍스트 */
-  '--d3-text-secondary': string
-  /** 비활성 텍스트 (번호, 시간 등) */
-  '--d3-text-inactive': string
-  /** 힌트/최약 텍스트 */
-  '--d3-text-muted': string
-  /** dimLabel 텍스트 (command-popup 제목) */
-  '--d3-text-dimLabel': string
-  /** 기본 테두리 */
-  '--d3-border-default': string
-  /** 미묘한 테두리 (구분선, hover) */
-  '--d3-border-subtle': string
-  /** 강한 테두리 (progress background) */
-  '--d3-border-strong': string
-  /** 악센트 색상 (웨이브바, 선택 바) */
-  '--d3-accent-main': string
-  /** 악센트 dim (active 배경) */
-  '--d3-accent-dim': string
-  /** 팝업 박스 섀도 */
-  '--d3-shadow-popup': string
-  /** 결과 팝업 배경 (불투명) */
-  '--d3-bg-result': string
-  /** 결과 팝업 테두리 */
-  '--d3-border-result': string
-  /** 결과 팝업 텍스트 */
-  '--d3-text-result': string
-  /** 결과 팝업 버튼 색상 */
-  '--d3-action-btn': string
-  /** 결과 팝업 버튼 hover 배경 */
-  '--d3-action-btn-hover-bg': string
-  /** 결과 팝업 버튼 hover 색상 */
-  '--d3-action-btn-hover': string
-  /** recording-tip 9단계 wave-bar 색상 (wave1~4 보간) */
-  '--d3-wave-1': string
-  '--d3-wave-2': string
-  '--d3-wave-3': string
-  '--d3-wave-4': string
-  '--d3-wave-5': string
-  '--d3-wave-6': string
-  '--d3-wave-7': string
-  '--d3-wave-8': string
-  '--d3-wave-9': string
-  /** 에러 상태 색상 (recording-tip error-icon) */
-  '--d3-status-error': string
-  /** 성공 상태 색상 (result-popup copied 상태) */
-  '--d3-status-success': string
-}
-
-const POPUP_THEME_VARS: Record<PopupThemeKey, PopupThemeVars> = {
-  dark: {
-    '--d3-bg-card': '#111a30',
-    '--d3-bg-tip': 'rgba(10,14,28,0.85)',
-    '--d3-text-primary': '#eef2fb',
-    '--d3-text-secondary': '#93a4c8',
-    '--d3-text-inactive': '#7385ab',
-    '--d3-text-muted': '#2b3550',
-    '--d3-text-dimLabel': '#4e5f85',
-    '--d3-border-default': 'rgba(148,180,255,0.12)',
-    '--d3-border-subtle': 'rgba(148,180,255,0.07)',
-    '--d3-border-strong': 'rgba(148,180,255,0.20)',
-    '--d3-accent-main': '#3b82f6',
-    '--d3-accent-dim': 'rgba(59,130,246,0.14)',
-    '--d3-shadow-popup': '0 8px 32px rgba(3,7,18,0.5)',
-    '--d3-bg-result': '#111a30',
-    '--d3-border-result': 'rgba(148,180,255,0.12)',
-    '--d3-text-result': '#eef2fb',
-    '--d3-action-btn': '#60a5fa',
-    '--d3-action-btn-hover-bg': 'rgba(59,130,246,0.14)',
-    '--d3-action-btn-hover': '#93a4c8',
-    // wave-bar 9단계: theme.ts RAW.dark.gradient.wave1-4 보간
-    '--d3-wave-1': '#93c5fd',
-    '--d3-wave-2': '#60a5fa',
-    '--d3-wave-3': '#4f8dfa',
-    '--d3-wave-4': '#3b82f6',
-    '--d3-wave-5': '#3b82f6',
-    '--d3-wave-6': '#5b75f7',
-    '--d3-wave-7': '#6e71f7',
-    '--d3-wave-8': '#818cf8',
-    '--d3-wave-9': '#a78bfa',
-    '--d3-status-error': '#ef4444',
-    '--d3-status-success': '#10b981',
-  },
-  light: {
-    '--d3-bg-card': '#ffffff',
-    '--d3-bg-tip': 'rgba(242,245,251,0.92)',
-    '--d3-text-primary': '#111827',
-    '--d3-text-secondary': '#4b5a75',
-    '--d3-text-inactive': '#8593ab',
-    '--d3-text-muted': '#c3cddd',
-    '--d3-text-dimLabel': '#5a6f96',
-    '--d3-border-default': 'rgba(30,58,138,0.12)',
-    '--d3-border-subtle': 'rgba(30,58,138,0.07)',
-    '--d3-border-strong': 'rgba(30,58,138,0.20)',
-    '--d3-accent-main': '#2563eb',
-    '--d3-accent-dim': 'rgba(37,99,235,0.10)',
-    '--d3-shadow-popup': '0 8px 32px rgba(30,58,138,0.12)',
-    '--d3-bg-result': '#ffffff',
-    '--d3-border-result': 'rgba(30,58,138,0.12)',
-    '--d3-text-result': '#111827',
-    '--d3-action-btn': '#3b82f6',
-    '--d3-action-btn-hover-bg': 'rgba(37,99,235,0.10)',
-    '--d3-action-btn-hover': '#4b5a75',
-    // theme.ts RAW.light.gradient.wave1-4 보간
-    '--d3-wave-1': '#06b6d4',
-    '--d3-wave-2': '#1cbff8',
-    '--d3-wave-3': '#32bbfc',
-    '--d3-wave-4': '#3b82f6',
-    '--d3-wave-5': '#4966eb',
-    '--d3-wave-6': '#574ae0',
-    '--d3-wave-7': '#6c2edd',
-    '--d3-wave-8': '#8112da',
-    '--d3-wave-9': '#d946ef',
-    '--d3-status-error': '#ef4444',
-    '--d3-status-success': '#34d399',
-  },
-  nord: {
-    '--d3-bg-card': '#3b4252',
-    '--d3-bg-tip': 'rgba(46,52,64,0.92)',
-    '--d3-text-primary': 'rgba(236,239,244,0.87)',
-    '--d3-text-secondary': 'rgba(216,222,233,0.6)',
-    '--d3-text-inactive': 'rgba(216,222,233,0.35)',
-    '--d3-text-muted': 'rgba(216,222,233,0.25)',
-    '--d3-text-dimLabel': '#5e81ac',
-    '--d3-border-default': 'rgba(216,222,233,0.10)',
-    '--d3-border-subtle': 'rgba(216,222,233,0.06)',
-    '--d3-border-strong': 'rgba(216,222,233,0.16)',
-    '--d3-accent-main': '#88c0d0',
-    '--d3-accent-dim': 'rgba(136,192,208,0.08)',
-    '--d3-shadow-popup': '0 8px 32px rgba(0,0,0,0.5)',
-    '--d3-bg-result': '#434c5e',
-    '--d3-border-result': 'rgba(216,222,233,0.10)',
-    '--d3-text-result': 'rgba(236,239,244,0.87)',
-    '--d3-action-btn': 'rgba(216,222,233,0.4)',
-    '--d3-action-btn-hover-bg': 'rgba(216,222,233,0.08)',
-    '--d3-action-btn-hover': 'rgba(216,222,233,0.7)',
-    // theme.ts RAW.nord.gradient.wave1-4 보간
-    '--d3-wave-1': '#8fbcbb',
-    '--d3-wave-2': '#8dbdcd',
-    '--d3-wave-3': '#8bbea0',
-    '--d3-wave-4': '#88c0d0',
-    '--d3-wave-5': '#85c6d0',
-    '--d3-wave-6': '#a3be8c',
-    '--d3-wave-7': '#b48ead',
-    '--d3-wave-8': '#bf88a8',
-    '--d3-wave-9': '#d08770',
-    '--d3-status-error': '#bf616a',
-    '--d3-status-success': '#a3be8c',
-  },
-  solarized: {
-    '--d3-bg-card': '#073642',
-    '--d3-bg-tip': 'rgba(0,43,54,0.92)',
-    '--d3-text-primary': 'rgba(238,232,213,0.87)',
-    '--d3-text-secondary': 'rgba(147,161,161,0.7)',
-    '--d3-text-inactive': 'rgba(147,161,161,0.4)',
-    '--d3-text-muted': 'rgba(147,161,161,0.25)',
-    '--d3-text-dimLabel': '#7a6c2e',
-    '--d3-border-default': 'rgba(131,148,150,0.13)',
-    '--d3-border-subtle': 'rgba(131,148,150,0.08)',
-    '--d3-border-strong': 'rgba(131,148,150,0.20)',
-    '--d3-accent-main': '#b58900',
-    '--d3-accent-dim': 'rgba(181,137,0,0.08)',
-    '--d3-shadow-popup': '0 8px 32px rgba(0,0,0,0.5)',
-    '--d3-bg-result': '#0d4250',
-    '--d3-border-result': 'rgba(131,148,150,0.13)',
-    '--d3-text-result': 'rgba(238,232,213,0.87)',
-    '--d3-action-btn': 'rgba(147,161,161,0.4)',
-    '--d3-action-btn-hover-bg': 'rgba(131,148,150,0.10)',
-    '--d3-action-btn-hover': 'rgba(147,161,161,0.7)',
-    // theme.ts RAW.solarized.gradient.wave1-4 보간
-    '--d3-wave-1': '#2aa198',
-    '--d3-wave-2': '#2693cb',
-    '--d3-wave-3': '#268bd2',
-    '--d3-wave-4': '#268bd2',
-    '--d3-wave-5': '#4676d9',
-    '--d3-wave-6': '#6c71c4',
-    '--d3-wave-7': '#6c71c4',
-    '--d3-wave-8': '#9a33d3',
-    '--d3-wave-9': '#d33682',
-    '--d3-status-error': '#dc322f',
-    '--d3-status-success': '#859900',
-  },
-  catppuccin: {
-    '--d3-bg-card': '#313244',
-    '--d3-bg-tip': 'rgba(30,30,46,0.92)',
-    '--d3-text-primary': 'rgba(205,214,244,0.87)',
-    '--d3-text-secondary': 'rgba(186,194,222,0.7)',
-    '--d3-text-inactive': 'rgba(166,173,200,0.4)',
-    '--d3-text-muted': 'rgba(166,173,200,0.25)',
-    '--d3-text-dimLabel': '#585b70',
-    '--d3-border-default': 'rgba(205,214,244,0.08)',
-    '--d3-border-subtle': 'rgba(205,214,244,0.04)',
-    '--d3-border-strong': 'rgba(205,214,244,0.14)',
-    '--d3-accent-main': '#cba6f7',
-    '--d3-accent-dim': 'rgba(203,166,247,0.08)',
-    '--d3-shadow-popup': '0 8px 32px rgba(0,0,0,0.5)',
-    '--d3-bg-result': '#3a3a54',
-    '--d3-border-result': 'rgba(205,214,244,0.08)',
-    '--d3-text-result': 'rgba(205,214,244,0.87)',
-    '--d3-action-btn': 'rgba(166,173,200,0.4)',
-    '--d3-action-btn-hover-bg': 'rgba(205,214,244,0.06)',
-    '--d3-action-btn-hover': 'rgba(205,214,244,0.7)',
-    // theme.ts RAW.catppuccin.gradient.wave1-4 보간
-    '--d3-wave-1': '#89dceb',
-    '--d3-wave-2': '#89cff4',
-    '--d3-wave-3': '#89c2f9',
-    '--d3-wave-4': '#89b4fa',
-    '--d3-wave-5': '#b4a9f2',
-    '--d3-wave-6': '#df9eea',
-    '--d3-wave-7': '#cba6f7',
-    '--d3-wave-8': '#e5b6f6',
-    '--d3-wave-9': '#f5c2e7',
-    '--d3-status-error': '#f38ba8',
-    '--d3-status-success': '#a6e3a1',
-  },
-  dracula: {
-    '--d3-bg-card': '#44475a',
-    '--d3-bg-tip': 'rgba(40,42,54,0.92)',
-    '--d3-text-primary': 'rgba(248,248,242,0.87)',
-    '--d3-text-secondary': 'rgba(169,176,208,0.7)',
-    '--d3-text-inactive': 'rgba(169,176,208,0.4)',
-    '--d3-text-muted': 'rgba(169,176,208,0.25)',
-    '--d3-text-dimLabel': '#6272a4',
-    '--d3-border-default': 'rgba(248,248,242,0.08)',
-    '--d3-border-subtle': 'rgba(248,248,242,0.04)',
-    '--d3-border-strong': 'rgba(248,248,242,0.14)',
-    '--d3-accent-main': '#bd93f9',
-    '--d3-accent-dim': 'rgba(189,147,249,0.08)',
-    '--d3-shadow-popup': '0 8px 32px rgba(0,0,0,0.5)',
-    '--d3-bg-result': '#4f5266',
-    '--d3-border-result': 'rgba(248,248,242,0.08)',
-    '--d3-text-result': 'rgba(248,248,242,0.87)',
-    '--d3-action-btn': 'rgba(169,176,208,0.4)',
-    '--d3-action-btn-hover-bg': 'rgba(248,248,242,0.06)',
-    '--d3-action-btn-hover': 'rgba(248,248,242,0.7)',
-    // theme.ts RAW.dracula.gradient.wave1-4 보간
-    '--d3-wave-1': '#8be9fd',
-    '--d3-wave-2': '#a6fbff',
-    '--d3-wave-3': '#c1fdff',
-    '--d3-wave-4': '#bd93f9',
-    '--d3-wave-5': '#d485ff',
-    '--d3-wave-6': '#eb77ff',
-    '--d3-wave-7': '#ff79c6',
-    '--d3-wave-8': '#ff88c4',
-    '--d3-wave-9': '#ffb86c',
-    '--d3-status-error': '#ff5555',
-    '--d3-status-success': '#50fa7b',
-  },
-}
+export type PopupThemeKey = ThemeKey
 
 /**
- * 팝업용 CSS 변수 맵 조회.
- * ThemeMode('system' | 'light' | 'dark') 또는 테마 키를 받아 해당 변수 맵 반환.
- * 'system' 또는 알 수 없는 값은 'dark'로 폴백.
+ * 팝업 CSS 가 쓰는 전용 별칭. 렌더러 공통 변수(buildCssVars) 위에 얹는다.
+ * v4: 팝업도 평면 — 반투명 배경·다색 파형을 쓰지 않는다.
  */
-export function getPopupThemeVars(themeKey: string): PopupThemeVars {
-  const key = themeKey as PopupThemeKey
-  return POPUP_THEME_VARS[key] ?? POPUP_THEME_VARS.dark
+function popupAliases(key: ThemeKey): Record<string, string> {
+  const r = RAW[key]
+  const st = STATUS[key]
+  const wave: Record<string, string> = {}
+  for (let i = 1; i <= 9; i++) wave[`--d3-wave-${i}`] = r.accent.main
+  return {
+    '--d3-bg-tip': r.bg.card,
+    '--d3-shadow-popup': r.shadow.overlay,
+    '--d3-bg-result': r.bg.card,
+    '--d3-border-result': r.border.default,
+    '--d3-text-result': r.text.primary,
+    '--d3-action-btn': r.text.secondary,
+    '--d3-action-btn-hover-bg': 'var(--d3-overlay-soft)',
+    '--d3-action-btn-hover': r.text.primary,
+    '--d3-accent-glow-dim': r.accent.dim,
+    '--d3-status-error': st.danger,
+    ...wave,
+  }
+}
+
+/** ThemeMode('system' | 'auto' | 테마 키)를 팝업 테마 키로. 시스템 모드는 호출자가 prefersDark 를 넘긴다. */
+export function resolvePopupThemeKey(themeKey: string, prefersDark = true): PopupThemeKey {
+  if (isThemeKey(themeKey)) return themeKey
+  if (themeKey === 'system' || themeKey === 'auto') return prefersDark ? 'dark' : 'light'
+  return 'dark'
+}
+
+/** 팝업용 CSS 변수 맵 조회. 알 수 없는 값은 'dark'. */
+export function getPopupThemeVars(themeKey: string, prefersDark = true): Record<string, string> {
+  const key = resolvePopupThemeKey(themeKey, prefersDark)
+  return { ...buildCssVars(key), ...popupAliases(key) }
 }
 
 /**
  * 팝업 BrowserWindow에 insertCSS로 주입할 CSS 문자열 반환.
- * `:root { --d3-bg-card: #242427; ... }`
+ * `:root { --d3-bg-card: #111a30; ... }`
  */
-export function buildPopupThemeCss(themeKey: string): string {
-  const vars = getPopupThemeVars(themeKey)
+export function buildPopupThemeCss(themeKey: string, prefersDark = true): string {
+  const vars = getPopupThemeVars(themeKey, prefersDark)
   const declarations = Object.entries(vars)
     .map(([prop, value]) => `  ${prop}: ${value};`)
     .join('\n')
diff --git a/packages/ui/src/theme.ts b/packages/ui/src/theme.ts
index 088d0c8..ae06ae4 100644
--- a/packages/ui/src/theme.ts
+++ b/packages/ui/src/theme.ts
@@ -1,366 +1,32 @@
-// src/renderer/theme.ts
-// D3RO 디자인 시스템 SSOT — "Midnight Glass" v2.
-// CSS Custom Properties 기반: d3roPalette가 var()를 사용하여 테마 전환 시 자동 반응.
+// packages/ui/src/theme.ts
+// D3RO 디자인 시스템 SSOT — v4 "조용한 계기" (2026-09-28).
+// 원시값은 theme-raw.ts 한 곳에 있다. 이 파일은 그 값을 CSS 변수 참조(d3roPalette)와 MUI 테마로 노출한다.
+// d3roPalette 가 var() 를 쓰므로 테마를 바꾸면 컴포넌트가 자동으로 따라간다.
 //
-// v2 디자인 언어 (레퍼런스: 미드나이트 네이비 + 글래스모피즘):
-//  - 딥 네이비 베이스 + 반투명 글래스 카드 + 옅은 헤어라인
-//  - 시안→블루→퍼플→마젠타 그라디언트 (웨이브/프로그레스/로고)
-//  - 컬러 링 스탯 타일, 소프트 글로우, 보더리스 UI
-// 테마 시스템: 6종(dark/light/nord/solarized/catppuccin/dracula) 전부
-// 동일 토큰 구조를 가지며 glass/gradient/glow도 테마별로 파생된다.
+// v4 디자인 언어 (루트 design.md "2026-09-28 전면 개편"):
+//  - 평평한 표면 + 1px 선. 글래스·글로우·그라디언트는 쓰지 않는다(키는 호환용으로 남고 평면 값이 들어 있다).
+//  - 텍스트 3단(primary/secondary/tertiary). label/inactive/dimLabel/muted 는 tertiary 의 별칭.
+//  - 강조색은 주 행동·현재 위치·포커스·녹음 상태에만.
 
 import { createTheme, type Theme } from '@mui/material/styles'
 import type { ThemeMode } from '@d3ro/core/types'
+import {
+  RAW,
+  STATUS,
+  TAG,
+  SPACE,
+  CONTROL,
+  WEIGHT,
+  MOTION,
+  RADIUS,
+  FONT_SANS,
+  FONT_MONO,
+  buildCssVars,
+  type ThemeKey,
+  type RawTheme,
+} from './theme-raw'
 
-// ── 테마 키 타입 ────────────────────────────────────────────
-type ThemeKey = 'dark' | 'light' | 'nord' | 'solarized' | 'catppuccin' | 'dracula'
-
-// ── 원시 색상값 구조 타입 ────────────────────────────────────
-interface RawTheme {
-  bg: {
-    app: string
-    card: string
-    cardHover: string
-    elevated: string
-    input: string
-    sidebar: string
-    inset: string
-    chassis: string
-    crtBezel: string
-    crtGlass: string
-  }
-  text: {
-    primary: string
-    secondary: string
-    label: string
-    disabled: string
-    engraving: string
-    inactive: string
-    dimLabel: string
-    muted: string
-    hover: string
-  }
-  border: {
-    subtle: string
-    default: string
-    strong: string
-  }
-  shadow: {
-    card: string
-    buttonBase: string
-    chassis: string
-    inset: string
-    insetDeep: string
-    buttonRaised: string
-    buttonPressed: string
-    screenGlow: string
-    tooltip: string
-  }
-  accent: {
-    main: string
-    dim: string
-    glow: string
-    light: string
-    dark: string
-    crtPhosphor: string
-    crtPhosphorDim: string
-  }
-  /** v2: 글래스모피즘 표면 */
-  glass: {
-    /** 카드 표면 (반투명) */
-    surface: string
-    /** 카드 내부 상승 표면 */
-    raised: string
-    /** 헤어라인 보더 */
-    hairline: string
-    hairlineStrong: string
-    /** 카드 상단 시인(광택) 오버레이 — 앰비언트 라디얼 + 수직 시인 레이어 */
-    sheen: string
-    /** 그라디언트 헤어라인 보더 — 좌상단이 밝고 우하단으로 소멸 (mask 링에 사용) */
-    borderGradient: string
-    /** backdrop-filter blur 반경 */
-    blur: string
-    /** 커서 추종 반사 하이라이트 색 (rgba) — 컴포넌트가 그라디언트 geometry 생성 */
-    specular: string
-  }
-  /** v2: 그라디언트 */
-  gradient: {
-    /** 프라이머리 버튼/액티브 요소 */
-    accent: string
-    /** 로고/브랜드 텍스트 */
-    logo: string
-    /** 프로그레스 바 (시안→블루) */
-    bar: string
-    /** 프로그레스 바 대체 (퍼플→마젠타) */
-    barAlt: string
-    /** 웨이브폼 컬러 스톱 4개 (canvas에서 getComputedStyle로 읽음) */
-    wave1: string
-    wave2: string
-    wave3: string
-    wave4: string
-  }
-  /** v2: 글로우 */
-  glow: {
-    /** 프라이머리 버튼/액티브 글로우 */
-    accent: string
-    soft: string
-    /** 카드 외곽 앰비언트 글로우 (+깊이 그림자 결합) */
-    card: string
-    /** 카드 hover 시 강화 글로우 */
-    cardHover: string
-  }
-}
-
-// ── 원시 색상값 (raw values) ────────────────────────────────────
-// CSS 변수에 주입되는 실제 색상값. 컴포넌트에서 직접 사용하지 않는다.
-const RAW: Record<ThemeKey, RawTheme> = {
-  // ── Midnight (기본 다크) — 레퍼런스 시안 ────────────────────
-  dark: {
-    bg: { app: '#0a0e1c', card: '#111a30', cardHover: '#152039', elevated: '#1a2540', input: '#0d1526', sidebar: '#0b101f', inset: '#0a111f', chassis: '#111a30', crtBezel: '#0d1424', crtGlass: '#070b16' },
-    text: { primary: '#eef2fb', secondary: '#93a4c8', label: '#67789e', disabled: '#3c4763', engraving: '#0a0e1c', inactive: '#7385ab', dimLabel: '#4e5f85', muted: '#2b3550', hover: '#c9d5f2' },
-    border: { subtle: 'rgba(148,180,255,0.07)', default: 'rgba(148,180,255,0.12)', strong: 'rgba(148,180,255,0.20)' },
-    shadow: {
-      card: '0 12px 40px rgba(3,7,18,0.5)',
-      buttonBase: '0 1px 2px rgba(3,7,18,0.4)',
-      chassis: '0 24px 80px rgba(3,7,18,0.6)',
-      inset: 'inset 0 1px 4px rgba(3,7,18,0.5)',
-      insetDeep: 'inset 0 2px 8px rgba(3,7,18,0.7)',
-      buttonRaised: '0 2px 8px rgba(3,7,18,0.35), inset 0 1px 0 rgba(148,180,255,0.06)',
-      buttonPressed: 'inset 0 2px 6px rgba(3,7,18,0.6)',
-      screenGlow: 'inset 0 0 24px rgba(3,7,18,0.6)',
-      tooltip: '0 8px 24px rgba(3,7,18,0.5)',
-    },
-    accent: { main: '#3b82f6', dim: 'rgba(59,130,246,0.14)', glow: 'rgba(59,130,246,0.5)', light: '#60a5fa', dark: '#2563eb', crtPhosphor: '#60a5fa', crtPhosphorDim: '#3564b4' },
-    glass: {
-      surface: 'rgba(17,26,48,0.62)',
-      raised: 'rgba(26,38,68,0.55)',
-      hairline: 'rgba(148,180,255,0.10)',
-      hairlineStrong: 'rgba(148,180,255,0.18)',
-      sheen: 'radial-gradient(ellipse 70% 55% at 18% -8%, rgba(59,130,246,0.14) 0%, transparent 55%), linear-gradient(180deg, rgba(148,180,255,0.05) 0%, rgba(148,180,255,0) 40%)',
-      borderGradient: 'linear-gradient(135deg, rgba(125,180,255,0.55) 0%, rgba(148,180,255,0.14) 32%, rgba(148,180,255,0.06) 58%, rgba(59,130,246,0.22) 100%)',
-      blur: '24px',
-      specular: 'rgba(180,205,255,0.22)',
-    },
-    gradient: {
-      accent: 'linear-gradient(135deg, #1e3a8a 0%, #1d4ed8 55%, #2563eb 100%)',
-      logo: 'linear-gradient(90deg, #60a5fa 0%, #818cf8 100%)',
-      bar: 'linear-gradient(90deg, #60a5fa 0%, #3b82f6 100%)',
-      barAlt: 'linear-gradient(90deg, #818cf8 0%, #a78bfa 100%)',
-      wave1: '#60a5fa', wave2: '#3b82f6', wave3: '#818cf8', wave4: '#a78bfa',
-    },
-    glow: {
-      accent: '0 0 0 1px rgba(59,130,246,0.35), 0 8px 24px rgba(37,99,235,0.35)',
-      soft: '0 0 16px rgba(59,130,246,0.25)',
-      card: '0 -8px 32px -12px rgba(59,130,246,0.22), 0 12px 40px rgba(3,7,18,0.45)',
-      cardHover: '0 -10px 40px -10px rgba(59,130,246,0.34), 0 12px 40px rgba(3,7,18,0.5)',
-    },
-  },
-  // ── Light — 블루 액센트 유지, 밝은 글래스 ────────────────────
-  light: {
-    bg: { app: '#f2f5fb', card: '#ffffff', cardHover: '#f7f9fd', elevated: '#eef2f9', input: '#ffffff', sidebar: '#e9eef7', inset: '#e4e9f2', chassis: '#ffffff', crtBezel: '#dde3ee', crtGlass: '#eef2f9' },
-    text: { primary: '#111827', secondary: '#4b5a75', label: '#6b7a95', disabled: '#b5bfd1', engraving: '#dde3ee', inactive: '#8593ab', dimLabel: '#5a6f96', muted: '#c3cddd', hover: '#2b3a55' },
-    border: { subtle: 'rgba(30,58,138,0.07)', default: 'rgba(30,58,138,0.12)', strong: 'rgba(30,58,138,0.20)' },
-    shadow: {
-      card: '0 8px 30px rgba(30,58,138,0.08)',
-      buttonBase: '0 1px 2px rgba(30,58,138,0.08)',
-      chassis: '0 24px 80px rgba(30,58,138,0.10)',
-      inset: 'inset 0 1px 4px rgba(30,58,138,0.06)',
-      insetDeep: 'inset 0 2px 8px rgba(30,58,138,0.10)',
-      buttonRaised: '0 2px 8px rgba(30,58,138,0.08), inset 0 1px 0 rgba(255,255,255,0.8)',
-      buttonPressed: 'inset 0 2px 6px rgba(30,58,138,0.10)',
-      screenGlow: 'inset 0 0 24px rgba(30,58,138,0.05)',
-      tooltip: '0 8px 24px rgba(30,58,138,0.10)',
-    },
-    accent: { main: '#2563eb', dim: 'rgba(37,99,235,0.10)', glow: 'rgba(37,99,235,0.35)', light: '#3b82f6', dark: '#1d4ed8', crtPhosphor: '#2563eb', crtPhosphorDim: '#6f96e8' },
-    glass: {
-      surface: 'rgba(255,255,255,0.72)',
-      raised: 'rgba(255,255,255,0.85)',
-      hairline: 'rgba(30,58,138,0.10)',
-      hairlineStrong: 'rgba(30,58,138,0.18)',
-      sheen: 'radial-gradient(ellipse 70% 55% at 18% -8%, rgba(37,99,235,0.08) 0%, transparent 55%), linear-gradient(180deg, rgba(255,255,255,0.6) 0%, rgba(255,255,255,0) 42%)',
-      borderGradient: 'linear-gradient(135deg, rgba(37,99,235,0.45) 0%, rgba(30,58,138,0.14) 32%, rgba(30,58,138,0.08) 58%, rgba(37,99,235,0.18) 100%)',
-      blur: '24px',
-      specular: 'rgba(255,255,255,0.50)',
-    },
-    gradient: {
-      accent: 'linear-gradient(135deg, #1e40af 0%, #1d4ed8 55%, #2563eb 100%)',
-      logo: 'linear-gradient(90deg, #2563eb 0%, #6366f1 100%)',
-      bar: 'linear-gradient(90deg, #06b6d4 0%, #2563eb 100%)',
-      barAlt: 'linear-gradient(90deg, #7c3aed 0%, #c026d3 100%)',
-      wave1: '#06b6d4', wave2: '#2563eb', wave3: '#7c3aed', wave4: '#d946ef',
-    },
-    glow: {
-      accent: '0 0 0 1px rgba(37,99,235,0.25), 0 8px 24px rgba(37,99,235,0.25)',
-      soft: '0 0 16px rgba(37,99,235,0.18)',
-      card: '0 -6px 28px -12px rgba(37,99,235,0.18), 0 8px 30px rgba(30,58,138,0.08)',
-      cardHover: '0 -8px 36px -10px rgba(37,99,235,0.28), 0 8px 30px rgba(30,58,138,0.10)',
-    },
-  },
-  // ── Nord (https://www.nordtheme.com/) ──────────────────────
-  nord: {
-    bg: { app: '#242933', card: '#2e3440', cardHover: '#343b49', elevated: '#3b4252', input: '#2a303c', sidebar: '#272c37', inset: '#232830', chassis: '#2e3440', crtBezel: '#272c37', crtGlass: '#1f242d' },
-    text: { primary: '#eceff4', secondary: '#aeb8cc', label: '#8b96ad', disabled: '#4c566a', engraving: '#242933', inactive: '#7b88a1', dimLabel: '#5e81ac', muted: '#434c5e', hover: '#e5e9f0' },
-    border: { subtle: 'rgba(216,222,233,0.06)', default: 'rgba(216,222,233,0.10)', strong: 'rgba(216,222,233,0.16)' },
-    shadow: {
-      card: '0 12px 40px rgba(10,13,18,0.45)',
-      buttonBase: '0 1px 2px rgba(10,13,18,0.4)',
-      chassis: '0 24px 80px rgba(10,13,18,0.55)',
-      inset: 'inset 0 1px 4px rgba(10,13,18,0.45)',
-      insetDeep: 'inset 0 2px 8px rgba(10,13,18,0.65)',
-      buttonRaised: '0 2px 8px rgba(10,13,18,0.3), inset 0 1px 0 rgba(216,222,233,0.06)',
-      buttonPressed: 'inset 0 2px 6px rgba(10,13,18,0.55)',
-      screenGlow: 'inset 0 0 24px rgba(10,13,18,0.5)',
-      tooltip: '0 8px 24px rgba(10,13,18,0.45)',
-    },
-    accent: { main: '#88c0d0', dim: 'rgba(136,192,208,0.14)', glow: 'rgba(136,192,208,0.5)', light: '#a3d0de', dark: '#6aacbe', crtPhosphor: '#88c0d0', crtPhosphorDim: '#5e9daf' },
-    glass: {
-      surface: 'rgba(46,52,64,0.62)',
-      raised: 'rgba(59,66,82,0.55)',
-      hairline: 'rgba(216,222,233,0.09)',
-      hairlineStrong: 'rgba(216,222,233,0.16)',
-      sheen: 'radial-gradient(ellipse 70% 55% at 18% -8%, rgba(136,192,208,0.14) 0%, transparent 55%), linear-gradient(180deg, rgba(216,222,233,0.05) 0%, rgba(216,222,233,0) 40%)',
-      borderGradient: 'linear-gradient(135deg, rgba(160,205,220,0.55) 0%, rgba(216,222,233,0.14) 32%, rgba(216,222,233,0.06) 58%, rgba(136,192,208,0.22) 100%)',
-      blur: '24px',
-      specular: 'rgba(200,225,235,0.22)',
-    },
-    gradient: {
-      accent: 'linear-gradient(135deg, #5e81ac 0%, #81a1c1 55%, #88c0d0 100%)',
-      logo: 'linear-gradient(90deg, #88c0d0 0%, #81a1c1 100%)',
-      bar: 'linear-gradient(90deg, #8fbcbb 0%, #5e81ac 100%)',
-      barAlt: 'linear-gradient(90deg, #b48ead 0%, #d08770 100%)',
-      wave1: '#8fbcbb', wave2: '#88c0d0', wave3: '#81a1c1', wave4: '#b48ead',
-    },
-    glow: {
-      accent: '0 0 0 1px rgba(136,192,208,0.3), 0 8px 24px rgba(94,129,172,0.35)',
-      soft: '0 0 16px rgba(136,192,208,0.22)',
-      card: '0 -8px 32px -12px rgba(136,192,208,0.22), 0 12px 40px rgba(3,7,18,0.45)',
-      cardHover: '0 -10px 40px -10px rgba(136,192,208,0.34), 0 12px 40px rgba(3,7,18,0.5)',
-    },
-  },
-  // ── Solarized Dark (https://ethanschoonover.com/solarized/) ─
-  solarized: {
-    bg: { app: '#00212b', card: '#073642', cardHover: '#0a3e4c', elevated: '#0d4250', input: '#03303c', sidebar: '#012731', inset: '#001f28', chassis: '#073642', crtBezel: '#012731', crtGlass: '#001b22' },
-    text: { primary: '#eee8d5', secondary: '#93a1a1', label: '#839496', disabled: '#586e75', engraving: '#00212b', inactive: '#657b83', dimLabel: '#7a6c2e', muted: '#073642', hover: '#b2c0bf' },
-    border: { subtle: 'rgba(131,148,150,0.08)', default: 'rgba(131,148,150,0.13)', strong: 'rgba(131,148,150,0.20)' },
-    shadow: {
-      card: '0 12px 40px rgba(0,10,13,0.5)',
-      buttonBase: '0 1px 2px rgba(0,10,13,0.45)',
-      chassis: '0 24px 80px rgba(0,10,13,0.6)',
-      inset: 'inset 0 1px 4px rgba(0,10,13,0.5)',
-      insetDeep: 'inset 0 2px 8px rgba(0,10,13,0.7)',
-      buttonRaised: '0 2px 8px rgba(0,10,13,0.35), inset 0 1px 0 rgba(238,232,213,0.05)',
-      buttonPressed: 'inset 0 2px 6px rgba(0,10,13,0.6)',
-      screenGlow: 'inset 0 0 24px rgba(0,10,13,0.55)',
-      tooltip: '0 8px 24px rgba(0,10,13,0.5)',
-    },
-    accent: { main: '#b58900', dim: 'rgba(181,137,0,0.14)', glow: 'rgba(181,137,0,0.5)', light: '#d4a017', dark: '#8a6800', crtPhosphor: '#b58900', crtPhosphorDim: '#8a6800' },
-    glass: {
-      surface: 'rgba(7,54,66,0.62)',
-      raised: 'rgba(13,66,80,0.55)',
-      hairline: 'rgba(131,148,150,0.11)',
-      hairlineStrong: 'rgba(131,148,150,0.19)',
-      sheen: 'radial-gradient(ellipse 70% 55% at 18% -8%, rgba(181,137,0,0.14) 0%, transparent 55%), linear-gradient(180deg, rgba(131,148,150,0.05) 0%, rgba(131,148,150,0) 40%)',
-      borderGradient: 'linear-gradient(135deg, rgba(212,160,23,0.55) 0%, rgba(131,148,150,0.14) 32%, rgba(131,148,150,0.06) 58%, rgba(181,137,0,0.22) 100%)',
-      blur: '24px',
-      specular: 'rgba(238,232,213,0.22)',
-    },
-    gradient: {
-      accent: 'linear-gradient(135deg, #8a6800 0%, #9c7600 55%, #b58900 100%)',
-      logo: 'linear-gradient(90deg, #d4a017 0%, #cb4b16 100%)',
-      bar: 'linear-gradient(90deg, #2aa198 0%, #268bd2 100%)',
-      barAlt: 'linear-gradient(90deg, #6c71c4 0%, #d33682 100%)',
-      wave1: '#2aa198', wave2: '#268bd2', wave3: '#6c71c4', wave4: '#d33682',
-    },
-    glow: {
-      accent: '0 0 0 1px rgba(181,137,0,0.3), 0 8px 24px rgba(181,137,0,0.3)',
-      soft: '0 0 16px rgba(181,137,0,0.22)',
-      card: '0 -8px 32px -12px rgba(181,137,0,0.22), 0 12px 40px rgba(3,7,18,0.45)',
-      cardHover: '0 -10px 40px -10px rgba(181,137,0,0.34), 0 12px 40px rgba(3,7,18,0.5)',
-    },
-  },
-  // ── Catppuccin Mocha (https://catppuccin.com/) ──────────────
-  catppuccin: {
-    bg: { app: '#181825', card: '#1e1e2e', cardHover: '#242438', elevated: '#313244', input: '#191926', sidebar: '#161622', inset: '#11111b', chassis: '#1e1e2e', crtBezel: '#181825', crtGlass: '#0f0f18' },
-    text: { primary: '#cdd6f4', secondary: '#a8b2d8', label: '#8a94bc', disabled: '#585b70', engraving: '#11111b', inactive: '#7f849c', dimLabel: '#585b70', muted: '#313244', hover: '#e6e9f8' },
-    border: { subtle: 'rgba(205,214,244,0.05)', default: 'rgba(205,214,244,0.09)', strong: 'rgba(205,214,244,0.15)' },
-    shadow: {
-      card: '0 12px 40px rgba(5,5,12,0.5)',
-      buttonBase: '0 1px 2px rgba(5,5,12,0.45)',
-      chassis: '0 24px 80px rgba(5,5,12,0.6)',
-      inset: 'inset 0 1px 4px rgba(5,5,12,0.5)',
-      insetDeep: 'inset 0 2px 8px rgba(5,5,12,0.7)',
-      buttonRaised: '0 2px 8px rgba(5,5,12,0.35), inset 0 1px 0 rgba(205,214,244,0.05)',
-      buttonPressed: 'inset 0 2px 6px rgba(5,5,12,0.6)',
-      screenGlow: 'inset 0 0 24px rgba(5,5,12,0.55)',
-      tooltip: '0 8px 24px rgba(5,5,12,0.5)',
-    },
-    accent: { main: '#cba6f7', dim: 'rgba(203,166,247,0.14)', glow: 'rgba(203,166,247,0.5)', light: '#dfc0ff', dark: '#a67fd4', crtPhosphor: '#cba6f7', crtPhosphorDim: '#a67fd4' },
-    glass: {
-      surface: 'rgba(30,30,46,0.62)',
-      raised: 'rgba(49,50,68,0.55)',
-      hairline: 'rgba(205,214,244,0.08)',
-      hairlineStrong: 'rgba(205,214,244,0.15)',
-      sheen: 'radial-gradient(ellipse 70% 55% at 18% -8%, rgba(203,166,247,0.14) 0%, transparent 55%), linear-gradient(180deg, rgba(205,214,244,0.05) 0%, rgba(205,214,244,0) 40%)',
-      borderGradient: 'linear-gradient(135deg, rgba(215,185,255,0.55) 0%, rgba(205,214,244,0.14) 32%, rgba(205,214,244,0.06) 58%, rgba(203,166,247,0.22) 100%)',
-      blur: '24px',
-      specular: 'rgba(205,214,244,0.22)',
-    },
-    gradient: {
-      accent: 'linear-gradient(135deg, #a67fd4 0%, #cba6f7 55%, #f5c2e7 100%)',
-      logo: 'linear-gradient(90deg, #89b4fa 0%, #cba6f7 100%)',
-      bar: 'linear-gradient(90deg, #89dceb 0%, #89b4fa 100%)',
-      barAlt: 'linear-gradient(90deg, #cba6f7 0%, #f5c2e7 100%)',
-      wave1: '#89dceb', wave2: '#89b4fa', wave3: '#cba6f7', wave4: '#f5c2e7',
-    },
-    glow: {
-      accent: '0 0 0 1px rgba(203,166,247,0.3), 0 8px 24px rgba(203,166,247,0.3)',
-      soft: '0 0 16px rgba(203,166,247,0.22)',
-      card: '0 -8px 32px -12px rgba(203,166,247,0.22), 0 12px 40px rgba(3,7,18,0.45)',
-      cardHover: '0 -10px 40px -10px rgba(203,166,247,0.34), 0 12px 40px rgba(3,7,18,0.5)',
-    },
-  },
-  // ── Dracula (https://draculatheme.com/) ─────────────────────
-  dracula: {
-    bg: { app: '#1e2029', card: '#282a36', cardHover: '#2e3040', elevated: '#383a4a', input: '#232530', sidebar: '#21222c', inset: '#1b1c25', chassis: '#282a36', crtBezel: '#21222c', crtGlass: '#181a21' },
-    text: { primary: '#f8f8f2', secondary: '#b6bdd9', label: '#8891b5', disabled: '#6272a4', engraving: '#21222c', inactive: '#6272a4', dimLabel: '#6272a4', muted: '#44475a', hover: '#ffffff' },
-    border: { subtle: 'rgba(248,248,242,0.05)', default: 'rgba(248,248,242,0.09)', strong: 'rgba(248,248,242,0.15)' },
-    shadow: {
-      card: '0 12px 40px rgba(8,9,13,0.5)',
-      buttonBase: '0 1px 2px rgba(8,9,13,0.45)',
-      chassis: '0 24px 80px rgba(8,9,13,0.6)',
-      inset: 'inset 0 1px 4px rgba(8,9,13,0.5)',
-      insetDeep: 'inset 0 2px 8px rgba(8,9,13,0.7)',
-      buttonRaised: '0 2px 8px rgba(8,9,13,0.35), inset 0 1px 0 rgba(248,248,242,0.06)',
-      buttonPressed: 'inset 0 2px 6px rgba(8,9,13,0.6)',
-      screenGlow: 'inset 0 0 24px rgba(8,9,13,0.55)',
-      tooltip: '0 8px 24px rgba(8,9,13,0.5)',
-    },
-    accent: { main: '#bd93f9', dim: 'rgba(189,147,249,0.14)', glow: 'rgba(189,147,249,0.5)', light: '#d4b8ff', dark: '#9a70e0', crtPhosphor: '#bd93f9', crtPhosphorDim: '#9a70e0' },
-    glass: {
-      surface: 'rgba(40,42,54,0.62)',
-      raised: 'rgba(56,58,74,0.55)',
-      hairline: 'rgba(248,248,242,0.08)',
-      hairlineStrong: 'rgba(248,248,242,0.15)',
-      sheen: 'radial-gradient(ellipse 70% 55% at 18% -8%, rgba(189,147,249,0.14) 0%, transparent 55%), linear-gradient(180deg, rgba(248,248,242,0.05) 0%, rgba(248,248,242,0) 40%)',
-      borderGradient: 'linear-gradient(135deg, rgba(205,170,255,0.55) 0%, rgba(248,248,242,0.14) 32%, rgba(248,248,242,0.06) 58%, rgba(189,147,249,0.22) 100%)',
-      blur: '24px',
-      specular: 'rgba(248,248,242,0.22)',
-    },
-    gradient: {
-      accent: 'linear-gradient(135deg, #9a70e0 0%, #bd93f9 55%, #ff79c6 100%)',
-      logo: 'linear-gradient(90deg, #8be9fd 0%, #bd93f9 100%)',
-      bar: 'linear-gradient(90deg, #8be9fd 0%, #bd93f9 100%)',
-      barAlt: 'linear-gradient(90deg, #ff79c6 0%, #ffb86c 100%)',
-      wave1: '#8be9fd', wave2: '#bd93f9', wave3: '#ff79c6', wave4: '#ffb86c',
-    },
-    glow: {
-      accent: '0 0 0 1px rgba(189,147,249,0.3), 0 8px 24px rgba(189,147,249,0.3)',
-      soft: '0 0 16px rgba(189,147,249,0.22)',
-      card: '0 -8px 32px -12px rgba(189,147,249,0.22), 0 12px 40px rgba(3,7,18,0.45)',
-      cardHover: '0 -10px 40px -10px rgba(189,147,249,0.34), 0 12px 40px rgba(3,7,18,0.5)',
-    },
-  },
-}
+export type { ThemeKey, RawTheme } from './theme-raw'
 
 // ── SSOT: d3roPalette — CSS Custom Properties로 테마 반응형 ──
 // 컴포넌트에서 이 객체만 import하면 테마 자동 전환.
@@ -373,21 +39,27 @@ export const d3roPalette = {
     input: 'var(--d3-bg-input)',
     sidebar: 'var(--d3-bg-sidebar)',
     inset: 'var(--d3-bg-inset)',
+    /** @deprecated v4: bg.card 와 같다 */
     chassis: 'var(--d3-bg-chassis)',
+    /** @deprecated v4: bg.inset 와 같다 */
     crtBezel: 'var(--d3-bg-crtBezel)',
+    /** @deprecated v4: bg.inset 와 같다 */
     crtGlass: 'var(--d3-bg-crtGlass)',
   },
   accent: {
-    /** 프라이머리 액센트 (v2 별칭 — amber와 동일 var) */
     main: 'var(--d3-accent-main)',
+    /** 표면 위 강조 글자·아이콘 (모든 테마에서 4.5:1 이상) */
     light: 'var(--d3-accent-light)',
     dark: 'var(--d3-accent-dark)',
     dim: 'var(--d3-accent-dim)',
     glow: 'var(--d3-accent-glow)',
-    /** v3: 액센트 배경 위 글자색 */
+    /** 채운 버튼 배경 */
+    solid: 'var(--d3-accent-solid)',
+    solidHover: 'var(--d3-accent-solidHover)',
+    /** accent.solid 위 글자색 */
     ink: 'var(--d3-accent-ink)',
   },
-  /** v2: 글래스 표면 토큰 */
+  /** @deprecated v4: 평면 값이 들어 있다. 새 코드는 bg/border 를 쓴다 */
   glass: {
     surface: 'var(--d3-glass-surface)',
     raised: 'var(--d3-glass-raised)',
@@ -398,7 +70,7 @@ export const d3roPalette = {
     blur: 'var(--d3-glass-blur)',
     specular: 'var(--d3-glass-specular)',
   },
-  /** v2: 그라디언트 토큰 */
+  /** @deprecated v4: 단색으로 파생된다. 새 코드는 accent 를 쓴다 */
   gradient: {
     accent: 'var(--d3-gradient-accent)',
     logo: 'var(--d3-gradient-logo)',
@@ -409,14 +81,14 @@ export const d3roPalette = {
     wave3: 'var(--d3-gradient-wave3)',
     wave4: 'var(--d3-gradient-wave4)',
   },
-  /** v2: 글로우 토큰 */
+  /** @deprecated v4: 전부 none */
   glow: {
     accent: 'var(--d3-glow-accent)',
     soft: 'var(--d3-glow-soft)',
     card: 'var(--d3-glow-card)',
     cardHover: 'var(--d3-glow-cardHover)',
   },
-  /** v3: 시맨틱 상태 역할 (테마 반응) */
+  /** 시맨틱 상태 역할 (테마 반응, 텍스트로 써도 대비 유지) */
   status: {
     success: 'var(--d3-status-success)',
     successBg: 'var(--d3-status-successBg)',
@@ -427,7 +99,7 @@ export const d3roPalette = {
     info: 'var(--d3-status-info)',
     infoBg: 'var(--d3-status-infoBg)',
   },
-  /** v3: 반투명 표면·오버레이·스크림 역할 */
+  /** 반투명 표면·오버레이·스크림 역할 */
   surface: {
     insetSoft: 'var(--d3-bg-inset-soft)',
     cardSoft: 'var(--d3-bg-card-soft)',
@@ -436,35 +108,24 @@ export const d3roPalette = {
     overlaySoft: 'var(--d3-overlay-soft)',
     overlayStrong: 'var(--d3-overlay-strong)',
   },
-  tag: {
-    purple: '#8b5cf6',
-    purpleBg: 'rgba(139, 92, 246, 0.12)',
-    orange: '#f59e0b',
-    orangeBg: 'rgba(245, 158, 11, 0.12)',
-    red: '#ef4444',
-    redBg: 'rgba(239, 68, 68, 0.12)',
-    green: '#10b981',
-    greenBg: 'rgba(16, 185, 129, 0.12)',
-    blue: '#3b82f6',
-    blueBg: 'rgba(59, 130, 246, 0.12)',
-    greenGlow: 'rgba(16, 185, 129, 0.35)',
-    redGlow: 'rgba(239, 68, 68, 0.35)',
-    orangeGlow: 'rgba(245, 158, 11, 0.35)',
-    purpleGlow: 'rgba(139, 92, 246, 0.35)',
-    blueGlow: 'rgba(59, 130, 246, 0.35)',
-    cyan: '#06b6d4',
-    cyanBg: 'rgba(6, 182, 212, 0.12)',
-    cyanGlow: 'rgba(6, 182, 212, 0.35)',
-  },
+  /** 테마 불변 카테고리색 — 글자가 아닌 점·아이콘·범례용. 상태 글자는 status 를 쓴다 */
+  tag: TAG,
   text: {
     primary: 'var(--d3-text-primary)',
     secondary: 'var(--d3-text-secondary)',
+    /** 3차 텍스트 — 메타·라벨·힌트 (모든 표면에서 4.5:1 이상) */
+    tertiary: 'var(--d3-text-tertiary)',
     inverse: 'var(--d3-text-inverse, #ffffff)',
+    /** @deprecated v4: tertiary 별칭 */
     label: 'var(--d3-text-label)',
     disabled: 'var(--d3-text-disabled)',
+    /** @deprecated v4 */
     engraving: 'var(--d3-text-engraving)',
+    /** @deprecated v4: tertiary 별칭 */
     inactive: 'var(--d3-text-inactive)',
+    /** @deprecated v4: tertiary 별칭 */
     dimLabel: 'var(--d3-text-dimLabel)',
+    /** @deprecated v4: tertiary 별칭 */
     muted: 'var(--d3-text-muted)',
     hover: 'var(--d3-text-hover)',
   },
@@ -473,53 +134,41 @@ export const d3roPalette = {
     default: 'var(--d3-border-default)',
     strong: 'var(--d3-border-strong)',
   },
+  /** @deprecated v4 */
   crt: {
     phosphor: 'var(--d3-accent-crtPhosphor)',
     phosphorDim: 'var(--d3-accent-crtPhosphorDim)',
-    scanline: 'rgba(0, 0, 0, 0.15)',
+    scanline: 'transparent',
     bg: 'var(--d3-bg-chassis)',
   },
   led: {
-    off: '#1c2336',
+    off: 'var(--d3-border-strong)',
   },
 } as const
 
-// 한글 우선 폰트 스택 — Pretendard(한/영 조화) → 플랫폼 한글 시스템 폰트 폴백.
-// 웨이트는 Pretendard Variable(45-920) 기준. 폴백 시스템 폰트에 없는 굵기는
-// 브라우저가 합성하므로 400/500/600 범위로만 사용한다 (W3C klreq 권장 범위).
-export const d3roFontSans = [
-  '"Pretendard Variable"', 'Pretendard', '-apple-system', 'BlinkMacSystemFont',
-  '"Apple SD Gothic Neo"', '"Noto Sans KR"', '"Segoe UI"', 'Roboto',
-  '"Helvetica Neue"', 'Arial', '"Malgun Gothic"', 'sans-serif',
-].join(',')
+export const d3roFontSans = FONT_SANS
 
-export const d3roFontMono = [
-  'ui-monospace', 'SFMono-Regular', '"SF Mono"', 'Menlo', 'Consolas',
-  '"Liberation Mono"', 'monospace',
-].join(',')
+/** 숫자·코드·키 이름(라틴) 전용. 한글이 섞일 수 있는 문자열에는 쓰지 않는다. */
+export const d3roFontMono = FONT_MONO
 
 // ── SSOT: 타이포그래피 토큰 ─────────────────────────────
-// v3 "타이포그래피 퍼스트": 볼드(700+)를 제거하고 크기·행간·명도로 위계를 만든다.
-// 근거 (W3C klreq / 요즘IT DS / KRDS):
-//  - 한글은 낱글자가 사각 블록이라 라틴보다 시각 밀도가 높다 → 600 이상은 과중.
-//    헤드라인은 500, 몸통 400, 라벨 500으로 충분하다.
-//  - 한글 행간은 1.5~1.7 (블록 글자의 숨 쉬는 공간). 헤드라인도 1.2 이상.
-//  - 한글 자간 0 근처. 음수 트래킹은 대형 라틴 헤드라인에만 -0.01~-0.02em.
-//  - 양수 트래킹(+0.02~0.04em)은 라틴 대문자 라벨에만. 한글엔 적용하지 않는다.
-//  - 한글 최소 11px (획이 뭉개지는 하한). 8-9px 토큰은 폐기하고 상향.
+// v3 "타이포그래피 퍼스트" 유지 + v4 보정:
+//  - 볼드(700+) 없음. 헤드라인 500, 몸통 400, 라벨 500.
+//  - 한글 행간 1.5~1.7, 헤드라인도 1.2 이상. 한글 자간 0 — 라벨의 양수 트래킹을 걷어냈다(v4).
+//  - 한글 최소 11px. engrave/micro 는 한글 라벨로 쓰이므로 11px 로 올렸다(v4). nano(10px)는 라틴 수치 전용.
 export const d3roTypo = {
-  hero:    { size: '32px', weight: 500, spacing: '-0.02em', line: 1.3 },
-  title:   { size: '24px', weight: 500, spacing: '-0.01em', line: 1.35 },
-  value:   { size: '20px', weight: 500, spacing: '0',       line: 1.2 },
-  heading: { size: '16px', weight: 500, spacing: '0',       line: 1.5 },
-  body:    { size: '14px', weight: 400, spacing: '0',       line: 1.6 },
-  compact: { size: '13px', weight: 400, spacing: '0',       line: 1.55 },
-  small:   { size: '12px', weight: 400, spacing: '0',       line: 1.45 },
-  meta:    { size: '11px', weight: 500, spacing: '0.02em',  line: 1.35 },
-  label:   { size: '11px', weight: 500, spacing: '0.04em',  line: 1.3 },
-  engrave: { size: '10px', weight: 500, spacing: '0.06em',  line: 1.2 },
-  micro:   { size: '10px', weight: 500, spacing: '0.04em',  line: 1.2 },
-  nano:    { size: '9px',  weight: 500, spacing: '0.03em',  line: 1.15 },
+  hero:    { size: '28px', weight: 500, spacing: '-0.015em', line: 1.3 },
+  title:   { size: '22px', weight: 500, spacing: '-0.01em',  line: 1.35 },
+  value:   { size: '20px', weight: 500, spacing: '0',        line: 1.2 },
+  heading: { size: '16px', weight: 500, spacing: '0',        line: 1.5 },
+  body:    { size: '14px', weight: 400, spacing: '0',        line: 1.6 },
+  compact: { size: '13px', weight: 400, spacing: '0',        line: 1.55 },
+  small:   { size: '12px', weight: 400, spacing: '0',        line: 1.5 },
+  meta:    { size: '12px', weight: 400, spacing: '0',        line: 1.45 },
+  label:   { size: '11px', weight: 500, spacing: '0',        line: 1.4 },
+  engrave: { size: '11px', weight: 500, spacing: '0',        line: 1.4 },
+  micro:   { size: '11px', weight: 500, spacing: '0',        line: 1.4 },
+  nano:    { size: '10px', weight: 500, spacing: '0.02em',   line: 1.2 },
 } as const
 
 /**
@@ -537,423 +186,225 @@ export function typoSx(key: keyof typeof d3roTypo): {
     fontSize: v.size,
     fontWeight: v.weight,
     letterSpacing: v.spacing,
-    lineHeight: v.line
+    lineHeight: v.line,
   }
 }
 
-// ── SSOT: 그림자 토큰 (CSS Custom Properties 기반, 테마 자동 전환) ───
+// ── SSOT: 그림자 토큰 ───────────────────────────────────
+// v4: 표면에는 그림자가 없다. 그림자는 떠 있는 층(메뉴·다이얼로그·툴팁·플로팅 버튼)에만 — overlay/tooltip.
 export const d3roShadow = {
-  chassis: 'var(--d3-shadow-chassis)',
-  card: 'var(--d3-shadow-card)',
-  inset: 'var(--d3-shadow-inset)',
-  insetDeep: 'var(--d3-shadow-insetDeep)',
-  buttonRaised: 'var(--d3-shadow-buttonRaised)',
-  buttonPressed: 'var(--d3-shadow-buttonPressed)',
-  buttonActive: 'var(--d3-shadow-buttonPressed)',
-  dialog: 'var(--d3-shadow-card)',
+  /** 떠 있는 층: 다이얼로그·메뉴·팝오버·플로팅 버튼 */
+  overlay: 'var(--d3-shadow-overlay)',
   tooltip: 'var(--d3-shadow-tooltip)',
+  /** @deprecated v4: none */
+  chassis: 'var(--d3-shadow-chassis)',
+  /** @deprecated v4: none — 카드는 1px 선으로 구분한다 */
+  card: 'var(--d3-shadow-card)',
+  /** @deprecated v4: none */
+  inset: 'var(--d3-shadow-inset)',
+  /** @deprecated v4: none */
+  insetDeep: 'var(--d3-shadow-insetDeep)',
+  /** @deprecated v4: none */
+  buttonRaised: 'var(--d3-shadow-buttonRaised)',
+  /** @deprecated v4: none */
+  buttonPressed: 'var(--d3-shadow-buttonPressed)',
+  /** @deprecated v4: none */
+  buttonActive: 'var(--d3-shadow-buttonPressed)',
+  dialog: 'var(--d3-shadow-overlay)',
+  /** @deprecated v4: none */
   screenGlow: 'var(--d3-shadow-screenGlow)',
-  /** v2/v3: 액센트 글로우 및 아일랜드 플로트 */
+  /** @deprecated v4: none */
   glowAccent: 'var(--d3-glow-accent)',
+  /** @deprecated v4: none */
   glowSoft: 'var(--d3-glow-soft)',
+  /** @deprecated v4: none */
   glowCard: 'var(--d3-glow-card)',
+  /** @deprecated v4: none */
   glowCardHover: 'var(--d3-glow-cardHover)',
-  islandFloat: '0 16px 36px -8px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.1)',
+  islandFloat: 'var(--d3-shadow-overlay)',
 } as const
 
-// ── SSOT: 반경 토큰 ────────────────────────────────────
-export const d3roRadius = {
-  doubleBezelOuter: '22px',
-  doubleBezelInner: '14px',
-  outer: '20px',
-  card: '16px',
-  inner: '12px',
-  button: '10px',
-  small: '8px',
-  xs: '6px',
-  badge: '999px',
-  pill: '999px',
-} as const
+// ── SSOT: 반경 · 간격 · 컨트롤 · 웨이트 · 모션 ─────────────────
+export const d3roRadius = RADIUS
+export const d3roSpace = SPACE
+export const d3roControl = CONTROL
+export const d3roWeight = WEIGHT
+export const d3roMotion = MOTION
 
-// ── SSOT: 간격 리듬 (4px 그리드) ─────────────────────────
-// dark-instrument: 밀도를 높이되 정렬을 완벽하게. 중간값을 즉석 생성하지 않는다.
-export const d3roSpace = {
-  s1: '4px',
-  s2: '8px',
-  s3: '12px',
-  s4: '16px',
-  s5: '24px',
-  s6: '40px',
-  s7: '64px',
-  s8: '96px',
-} as const
-
-// ── SSOT: 컨트롤 치수 (버튼처럼 생긴 것은 전부 같은 치수) ──
-// 같은 역할의 컴포넌트는 이 값을 공유한다. 다른 밀도·위험도는 별도 역할로 설명.
-export const d3roControl = {
-  h: '40px',
-  hSm: '32px',
-  padX: '16px',
-  padXSm: '10px',
-} as const
-
-// ── SSOT: 웨이트는 세 개 ─────────────────────────────────
-// 가변폰트 중간값(560/620…)을 쓰기 시작하면 폴백 폰트에서 힌팅이 흐려진다.
-// 위계는 웨이트가 아니라 크기·명도가 만든다.
-export const d3roWeight = {
-  body: 400,
-  medium: 500,
-  strong: 600,
-} as const
-
-// ── SSOT: 모션 문법 (컴포넌트마다 다른 duration 금지) ──
-// transform·opacity를 기본으로. 실시간 수치 변화는 위치 이동이 아니라 색·굵기로.
-export const d3roMotion = {
-  instant: '100ms',
-  quick: '200ms',
-  normal: '350ms',
-  slow: '600ms',
-  easeOut: 'cubic-bezier(0.22, 1, 0.36, 1)',
-  easeIn: 'cubic-bezier(0.64, 0, 0.78, 0)',
-  easeSoft: 'cubic-bezier(0.4, 0, 0.2, 1)',
-} as const
+/** 상태 변화 트랜지션 한 줄 — 컴포넌트마다 duration/easing 을 새로 적지 않는다. */
+export function d3roTransition(...props: string[]): string {
+  return props.map((p) => `${p} ${MOTION.quick} ${MOTION.easeOut}`).join(', ')
+}
 
 /** 숫자 정렬 계약 — 수치가 흔들리면 계기판이 아니다. */
 export const d3roNumeralSx = {
   fontVariantNumeric: 'tabular-nums' as const,
 } as const
 
-// ── SSOT: 시맨틱 상태 역할 (액센트와 분리 — 기능 우선) ──
-// 상태색은 액센트에서 파생하지 않는다. 다크는 밝은 상태색, 라이트는 어두운 상태색.
-interface StatusRole {
-  success: string
-  successBg: string
-  warning: string
-  warningBg: string
-  danger: string
-  dangerBg: string
-  info: string
-  infoBg: string
-}
-const STATUS: Record<ThemeKey, StatusRole> = {
-  dark: {
-    success: '#34d399', successBg: 'rgba(52,211,153,0.12)',
-    warning: '#fbbf24', warningBg: 'rgba(251,191,36,0.12)',
-    danger: '#f87171', dangerBg: 'rgba(248,113,113,0.12)',
-    info: '#60a5fa', infoBg: 'rgba(96,165,250,0.12)',
-  },
-  light: {
-    success: '#047857', successBg: 'rgba(4,120,87,0.10)',
-    warning: '#b45309', warningBg: 'rgba(180,83,9,0.10)',
-    danger: '#b91c1c', dangerBg: 'rgba(185,28,28,0.10)',
-    info: '#1d4ed8', infoBg: 'rgba(29,78,216,0.10)',
-  },
-  nord: {
-    success: '#a3be8c', successBg: 'rgba(163,190,140,0.14)',
-    warning: '#ebcb8b', warningBg: 'rgba(235,203,139,0.14)',
-    danger: '#bf616a', dangerBg: 'rgba(191,97,106,0.14)',
-    info: '#88c0d0', infoBg: 'rgba(136,192,208,0.14)',
-  },
-  solarized: {
-    success: '#859900', successBg: 'rgba(133,153,0,0.16)',
-    warning: '#b58900', warningBg: 'rgba(181,137,0,0.16)',
-    danger: '#dc322f', dangerBg: 'rgba(220,50,47,0.16)',
-    info: '#268bd2', infoBg: 'rgba(38,139,210,0.16)',
-  },
-  catppuccin: {
-    success: '#a6e3a1', successBg: 'rgba(166,227,161,0.14)',
-    warning: '#f9e2af', warningBg: 'rgba(249,226,175,0.14)',
-    danger: '#f38ba8', dangerBg: 'rgba(243,139,168,0.14)',
-    info: '#89b4fa', infoBg: 'rgba(137,180,250,0.14)',
-  },
-  dracula: {
-    success: '#50fa7b', successBg: 'rgba(80,250,123,0.14)',
-    warning: '#f1fa8c', warningBg: 'rgba(241,250,140,0.14)',
-    danger: '#ff5555', dangerBg: 'rgba(255,85,85,0.14)',
-    info: '#8be9fd', infoBg: 'rgba(139,233,253,0.14)',
-  },
-}
-
-// ── SSOT: 액센트 위 글자색 ──────────────────────────────
-// 액센트 배경(버튼/배지) 위 텍스트. 테마의 액센트 명도에 따라 흰/검을 정한다.
-// 밝은 액센트(nord/catppuccin/dracula)에는 어두운 잉크, 어두운 액센트에는 흰 잉크.
-const ACCENT_INK: Record<ThemeKey, string> = {
-  dark: '#ffffff',
-  light: '#ffffff',
-  nord: '#2e3440',
-  solarized: '#ffffff',
-  catppuccin: '#11111b',
-  dracula: '#1e2029',
-}
-
-// ── CSS Custom Properties 생성 ──────────────────────────
-function buildCssVars(key: ThemeKey): Record<string, string> {
-  const r = RAW[key]
-  const st = STATUS[key]
-  return {
-    '--d3-bg-app': r.bg.app,
-    '--d3-bg-card': r.bg.card,
-    '--d3-bg-cardHover': r.bg.cardHover,
-    '--d3-bg-elevated': r.bg.elevated,
-    '--d3-bg-input': r.bg.input,
-    '--d3-bg-sidebar': r.bg.sidebar,
-    '--d3-bg-inset': r.bg.inset,
-    '--d3-bg-chassis': r.bg.chassis,
-    '--d3-bg-crtBezel': r.bg.crtBezel,
-    '--d3-bg-crtGlass': r.bg.crtGlass,
-    '--d3-text-primary': r.text.primary,
-    '--d3-text-secondary': r.text.secondary,
-    '--d3-text-label': r.text.label,
-    '--d3-text-disabled': r.text.disabled,
-    '--d3-text-engraving': r.text.engraving,
-    '--d3-text-inactive': r.text.inactive,
-    '--d3-text-dimLabel': r.text.dimLabel,
-    '--d3-text-muted': r.text.muted,
-    '--d3-text-hover': r.text.hover,
-    '--d3-border-subtle': r.border.subtle,
-    '--d3-border-default': r.border.default,
-    '--d3-border-strong': r.border.strong,
-    '--d3-shadow-card': r.shadow.card,
-    '--d3-shadow-buttonBase': r.shadow.buttonBase,
-    '--d3-shadow-chassis': r.shadow.chassis,
-    '--d3-shadow-inset': r.shadow.inset,
-    '--d3-shadow-insetDeep': r.shadow.insetDeep,
-    '--d3-shadow-buttonRaised': r.shadow.buttonRaised,
-    '--d3-shadow-buttonPressed': r.shadow.buttonPressed,
-    '--d3-shadow-screenGlow': r.shadow.screenGlow,
-    '--d3-shadow-tooltip': r.shadow.tooltip,
-    '--d3-accent-main': r.accent.main,
-    '--d3-accent-dim': r.accent.dim,
-    '--d3-accent-glow': r.accent.glow,
-    '--d3-accent-light': r.accent.light,
-    '--d3-accent-dark': r.accent.dark,
-    '--d3-accent-crtPhosphor': r.accent.crtPhosphor,
-    '--d3-accent-crtPhosphorDim': r.accent.crtPhosphorDim,
-    '--d3-glass-surface': r.glass.surface,
-    '--d3-glass-raised': r.glass.raised,
-    '--d3-glass-hairline': r.glass.hairline,
-    '--d3-glass-hairlineStrong': r.glass.hairlineStrong,
-    '--d3-glass-sheen': r.glass.sheen,
-    '--d3-glass-borderGradient': r.glass.borderGradient,
-    '--d3-glass-blur': r.glass.blur,
-    '--d3-glass-specular': r.glass.specular,
-    '--d3-gradient-accent': r.gradient.accent,
-    '--d3-gradient-logo': r.gradient.logo,
-    '--d3-gradient-bar': r.gradient.bar,
-    '--d3-gradient-barAlt': r.gradient.barAlt,
-    '--d3-gradient-wave1': r.gradient.wave1,
-    '--d3-gradient-wave2': r.gradient.wave2,
-    '--d3-gradient-wave3': r.gradient.wave3,
-    '--d3-gradient-wave4': r.gradient.wave4,
-    '--d3-glow-accent': r.glow.accent,
-    '--d3-glow-soft': r.glow.soft,
-    '--d3-glow-card': r.glow.card,
-    '--d3-glow-cardHover': r.glow.cardHover,
-    // v3: 시맨틱 상태 역할 (액센트와 분리)
-    '--d3-status-success': st.success,
-    '--d3-status-successBg': st.successBg,
-    '--d3-status-warning': st.warning,
-    '--d3-status-warningBg': st.warningBg,
-    '--d3-status-danger': st.danger,
-    '--d3-status-dangerBg': st.dangerBg,
-    '--d3-status-info': st.info,
-    '--d3-status-infoBg': st.infoBg,
-    // v3: 간격·컨트롤·웨이트·모션
-    '--d3-space-1': d3roSpace.s1,
-    '--d3-space-2': d3roSpace.s2,
-    '--d3-space-3': d3roSpace.s3,
-    '--d3-space-4': d3roSpace.s4,
-    '--d3-space-5': d3roSpace.s5,
-    '--d3-space-6': d3roSpace.s6,
-    '--d3-space-7': d3roSpace.s7,
-    '--d3-space-8': d3roSpace.s8,
-    '--d3-control-h': d3roControl.h,
-    '--d3-control-h-sm': d3roControl.hSm,
-    '--d3-control-pad-x': d3roControl.padX,
-    '--d3-weight-body': String(d3roWeight.body),
-    '--d3-weight-medium': String(d3roWeight.medium),
-    '--d3-weight-strong': String(d3roWeight.strong),
-    '--d3-dur-instant': d3roMotion.instant,
-    '--d3-dur-quick': d3roMotion.quick,
-    '--d3-dur-normal': d3roMotion.normal,
-    '--d3-dur-slow': d3roMotion.slow,
-    '--d3-ease-out': d3roMotion.easeOut,
-    '--d3-ease-in': d3roMotion.easeIn,
-    '--d3-ease-soft': d3roMotion.easeSoft,
-    // 시맨틱 태그색 (테마 불변) — color-mix 틴트 파생용
-    '--d3-tag-purple': d3roPalette.tag.purple,
-    '--d3-tag-orange': d3roPalette.tag.orange,
-    '--d3-tag-red': d3roPalette.tag.red,
-    '--d3-tag-green': d3roPalette.tag.green,
-    '--d3-tag-blue': d3roPalette.tag.blue,
-    '--d3-tag-cyan': d3roPalette.tag.cyan,
-    '--d3-tag-cyanBg': d3roPalette.tag.cyanBg,
-    '--d3-accent-ink': ACCENT_INK[key],
-    // v3: 반투명 표면·오버레이·스크림 (테마 파생)
-    '--d3-bg-inset-soft': 'color-mix(in srgb, var(--d3-bg-inset) 70%, transparent)',
-    '--d3-bg-card-soft': 'color-mix(in srgb, var(--d3-bg-card) 70%, transparent)',
-    '--d3-bg-raised-soft': 'color-mix(in srgb, var(--d3-bg-elevated) 80%, transparent)',
-    '--d3-scrim': 'rgba(0,0,0,0.6)',
-    '--d3-overlay-soft': 'rgba(255,255,255,0.06)',
-    '--d3-overlay-strong': 'rgba(255,255,255,0.12)',
-  }
-}
+/** 키보드 포커스 링 — 모든 상호작용 요소에 같은 모양. */
+export const d3roFocusRing = {
+  outline: `2px solid ${d3roPalette.accent.main}`,
+  outlineOffset: '2px',
+} as const
 
 // ── 테마 팩토리 ───────────────────────────────────────────
 function createD3ROTheme(key: ThemeKey): Theme {
   // MUI palette.mode는 'dark' | 'light'만 허용. light 외 모두 dark 기반.
   const muiMode: 'dark' | 'light' = key === 'light' ? 'light' : 'dark'
   const r = RAW[key]
+  const st = STATUS[key]
   const cssVars = buildCssVars(key)
-
-  // 동적 accent 색상 (CSS 변수가 아직 주입되기 전이므로 RAW 값 직접 사용)
-  const accentMain = r.accent.main
-  const accentDim = r.accent.dim
-  const accentLight = r.accent.light
-  const accentDark = r.accent.dark
-  const accentInk = ACCENT_INK[key]
+  const quick = `${MOTION.quick} ${MOTION.easeOut}`
 
   return createTheme({
     palette: {
       mode: muiMode,
-      primary: { main: accentMain, light: accentLight, dark: accentDark, contrastText: accentInk },
-      secondary: { main: d3roPalette.tag.purple, light: '#c4b5fd', dark: '#8b5cf6' },
-      error: { main: d3roPalette.tag.red },
-      warning: { main: d3roPalette.tag.orange },
-      success: { main: d3roPalette.tag.green },
+      primary: { main: r.accent.solid, light: r.accent.light, dark: r.accent.solidHover, contrastText: r.accent.ink },
+      secondary: { main: r.text.secondary, contrastText: r.bg.app },
+      error: { main: st.danger },
+      warning: { main: st.warning },
+      success: { main: st.success },
+      info: { main: st.info },
       background: { default: r.bg.app, paper: r.bg.card },
       text: { primary: r.text.primary, secondary: r.text.secondary, disabled: r.text.disabled },
       divider: r.border.default,
+      action: { hover: 'var(--d3-overlay-soft)', selected: r.accent.dim },
     },
     typography: {
-      fontFamily: d3roFontSans,
-      // v3: 헤드라인 500 — 볼드가 아닌 크기와 명도로 위계 (한글 과중 방지)
+      fontFamily: FONT_SANS,
       h4: { fontWeight: 500, fontSize: '22px', lineHeight: 1.35 },
       h5: { fontWeight: 500, fontSize: '18px', lineHeight: 1.45 },
-      h6: { fontWeight: 500, fontSize: '14px', lineHeight: 1.5 },
-      subtitle1: { fontWeight: 500, fontSize: '18px', lineHeight: 1.45 },
+      h6: { fontWeight: 500, fontSize: '16px', lineHeight: 1.5 },
+      subtitle1: { fontWeight: 500, fontSize: '16px', lineHeight: 1.5 },
       body1: { fontSize: '14px', lineHeight: 1.6 },
-      body2: { fontSize: '12px', lineHeight: 1.5 },
-      button: { textTransform: 'none' as const, fontWeight: 500, fontSize: '14px' },
-      caption: { fontSize: '11px', fontWeight: 500, letterSpacing: '0.02em', color: r.text.label },
-      overline: { fontSize: '11px', fontWeight: 500, letterSpacing: '0.04em', textTransform: 'uppercase' as const, lineHeight: 1.3 },
+      body2: { fontSize: '13px', lineHeight: 1.55 },
+      button: { textTransform: 'none' as const, fontWeight: 500, fontSize: '13px' },
+      caption: { fontSize: '12px', fontWeight: 400, letterSpacing: 0, color: r.text.tertiary },
+      overline: { fontSize: '11px', fontWeight: 500, letterSpacing: 0, textTransform: 'none' as const, lineHeight: 1.4 },
     },
-    shape: { borderRadius: 16 },
+    // sx 의 borderRadius 숫자 배수 기준. 1 = 6px.
+    shape: { borderRadius: 6 },
     components: {
       MuiCssBaseline: {
         styleOverrides: {
           ':root': cssVars,
           body: { backgroundColor: r.bg.app, color: r.text.primary },
-          // 보더리스 UI: 네이티브 스크롤바 제거 (레이아웃 폭 불변).
-          // 시각적 스크롤 인디케이터는 OverlayScrollbars(고유 스타일)가 담당.
+          // 네이티브 스크롤바 제거 (레이아웃 폭 불변). 시각적 인디케이터는 OverlayScrollbars 가 담당.
           '*::-webkit-scrollbar': { width: 0, height: 0, background: 'transparent' },
+          ':focus-visible': { outline: `2px solid ${r.accent.main}`, outlineOffset: '2px' },
+          '@media (prefers-reduced-motion: reduce)': {
+            '*, *::before, *::after': {
+              animationDuration: '0.01ms !important',
+              animationIterationCount: '1 !important',
+              transitionDuration: '0.01ms !important',
+              scrollBehavior: 'auto !important',
+            },
+          },
         },
       },
+      MuiButtonBase: { defaultProps: { disableRipple: true } },
       MuiButton: {
         defaultProps: { disableElevation: true },
         styleOverrides: {
           root: {
-            textTransform: 'none', fontWeight: 500, borderRadius: 10, padding: '10px 20px',
-            transition: 'filter 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease',
+            textTransform: 'none', fontWeight: 500, borderRadius: RADIUS.button,
+            minHeight: CONTROL.h, padding: `0 ${CONTROL.padX}`,
+            transition: `background-color ${quick}, border-color ${quick}, color ${quick}`,
           },
+          sizeSmall: { minHeight: CONTROL.hSm, padding: `0 ${CONTROL.padXSm}` },
           containedPrimary: {
-            color: accentInk,
-            backgroundImage: 'var(--d3-gradient-accent)',
-            boxShadow: 'var(--d3-glow-accent)',
-            '&:hover': { filter: 'brightness(1.1)', boxShadow: 'var(--d3-glow-accent)' },
-            '&:active': { filter: 'brightness(0.95)' },
-            '&.Mui-disabled': { backgroundImage: 'none' },
+            color: r.accent.ink,
+            backgroundColor: r.accent.solid,
+            '&:hover': { backgroundColor: r.accent.solidHover },
           },
           outlined: {
-            borderColor: 'var(--d3-glass-hairlineStrong)',
-            backgroundColor: 'var(--d3-glass-raised)',
+            borderColor: r.border.strong,
+            backgroundColor: 'transparent',
             color: r.text.primary,
-            '&:hover': { borderColor: accentMain, color: accentLight, backgroundColor: 'var(--d3-glass-raised)' },
+            '&:hover': { borderColor: r.border.strong, backgroundColor: 'var(--d3-overlay-soft)' },
+          },
+          text: {
+            color: r.text.secondary,
+            '&:hover': { color: r.text.primary, backgroundColor: 'var(--d3-overlay-soft)' },
           },
           containedSecondary: {
             backgroundColor: r.bg.elevated,
             color: r.text.primary,
-            border: `1px solid ${r.glass.hairline}`,
+            border: `1px solid ${r.border.default}`,
             '&:hover': { backgroundColor: r.bg.cardHover },
           },
         },
       },
+      MuiIconButton: {
+        styleOverrides: {
+          root: {
+            borderRadius: RADIUS.button,
+            color: r.text.secondary,
+            '&:hover': { color: r.text.primary, backgroundColor: 'var(--d3-overlay-soft)' },
+          },
+        },
+      },
       MuiCard: {
         defaultProps: { elevation: 0 },
         styleOverrides: {
           root: {
-            position: 'relative',
-            backgroundColor: 'var(--d3-glass-surface)',
-            backdropFilter: 'blur(var(--d3-glass-blur))',
-            borderRadius: 16,
-            boxShadow: 'var(--d3-glow-card)',
-            transition: 'box-shadow 0.25s ease',
-            overflow: 'hidden',
-            // 그라디언트 헤어라인 링 (MetalCard와 동일 기법)
-            '&::after': {
-              content: '""',
-              position: 'absolute',
-              inset: 0,
-              borderRadius: 'inherit',
-              padding: '1px',
-              background: 'var(--d3-glass-borderGradient)',
-              WebkitMask: 'linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0)',
-              WebkitMaskComposite: 'xor',
-              maskComposite: 'exclude',
-              pointerEvents: 'none',
-            },
-            '&:hover': { boxShadow: 'var(--d3-glow-cardHover)' },
+            backgroundColor: r.bg.card,
+            border: `1px solid ${r.border.default}`,
+            borderRadius: RADIUS.card,
+            boxShadow: 'none',
           },
         },
       },
       MuiChip: {
         styleOverrides: {
-          root: { borderRadius: 999, fontWeight: 500, fontSize: '11px', letterSpacing: '0.02em', height: 24 },
-          colorPrimary: { backgroundColor: accentDim, color: accentLight },
-          colorSecondary: { backgroundColor: d3roPalette.tag.purpleBg, color: d3roPalette.tag.purple },
-          colorSuccess: { backgroundColor: d3roPalette.tag.greenBg, color: d3roPalette.tag.green },
-          colorError: { backgroundColor: d3roPalette.tag.redBg, color: d3roPalette.tag.red },
-          colorWarning: { backgroundColor: d3roPalette.tag.orangeBg, color: d3roPalette.tag.orange },
+          root: { borderRadius: RADIUS.small, fontWeight: 500, fontSize: '12px', letterSpacing: 0, height: 24 },
+          colorPrimary: { backgroundColor: r.accent.dim, color: r.accent.light },
+          colorSecondary: { backgroundColor: 'var(--d3-overlay-soft)', color: r.text.secondary },
+          colorSuccess: { backgroundColor: st.successBg, color: st.success },
+          colorError: { backgroundColor: st.dangerBg, color: st.danger },
+          colorWarning: { backgroundColor: st.warningBg, color: st.warning },
+          colorInfo: { backgroundColor: st.infoBg, color: st.info },
         },
       },
-      MuiDrawer: { styleOverrides: { paper: { width: 240, backgroundColor: r.bg.sidebar, borderRight: `1px solid ${r.glass.hairline}` } } },
+      MuiDrawer: { styleOverrides: { paper: { width: 240, backgroundColor: r.bg.sidebar, borderRight: `1px solid ${r.border.default}` } } },
       MuiListItemButton: {
         styleOverrides: {
           root: {
-            borderRadius: 12, marginLeft: 8, marginRight: 8,
-            '&.Mui-selected': { backgroundColor: accentDim, color: accentLight, fontWeight: 500, '&:hover': { backgroundColor: accentDim } },
+            borderRadius: RADIUS.button, marginLeft: 8, marginRight: 8,
+            '&.Mui-selected': { backgroundColor: r.accent.dim, color: r.accent.light, fontWeight: 500, '&:hover': { backgroundColor: r.accent.dim } },
           },
         },
       },
       MuiDialog: {
         styleOverrides: {
           paper: {
-            backgroundColor: r.bg.card, borderRadius: 20,
-            backgroundImage: 'var(--d3-glass-sheen)',
-            border: `1px solid ${r.glass.hairline}`,
-            boxShadow: 'var(--d3-shadow-card)',
+            backgroundColor: r.bg.card, borderRadius: RADIUS.outer,
+            backgroundImage: 'none',
+            border: `1px solid ${r.border.default}`,
+            boxShadow: r.shadow.overlay,
           },
         },
       },
       MuiBackdrop: {
         styleOverrides: {
           root: {
-            backgroundColor: muiMode === 'dark' ? 'rgba(4,8,20,0.6)' : 'rgba(30,58,138,0.18)',
-            backdropFilter: 'blur(8px)',
-            '&.MuiBackdrop-invisible': { backgroundColor: 'transparent', backdropFilter: 'none' },
+            backgroundColor: muiMode === 'dark' ? 'rgba(4,8,20,0.6)' : 'rgba(17,24,39,0.32)',
+            '&.MuiBackdrop-invisible': { backgroundColor: 'transparent' },
           },
         },
       },
+      MuiPopover: { styleOverrides: { paper: { border: `1px solid ${r.border.default}`, boxShadow: r.shadow.overlay, borderRadius: RADIUS.inner } } },
+      MuiMenu: { styleOverrides: { paper: { border: `1px solid ${r.border.default}`, boxShadow: r.shadow.overlay, borderRadius: RADIUS.inner } } },
       MuiTextField: {
         defaultProps: { size: 'small', variant: 'outlined' },
         styleOverrides: {
           root: {
             '& .MuiOutlinedInput-root': {
-              backgroundColor: r.bg.input, borderRadius: 10,
+              backgroundColor: r.bg.input, borderRadius: RADIUS.button,
               color: r.text.primary,
-              '& fieldset': { borderColor: r.glass.hairline },
-              '&:hover fieldset': { borderColor: r.glass.hairlineStrong },
-              '&.Mui-focused fieldset': { borderColor: accentMain },
+              '& fieldset': { borderColor: r.border.default },
+              '&:hover fieldset': { borderColor: r.border.strong },
+              '&.Mui-focused fieldset': { borderColor: r.accent.main, borderWidth: 1 },
             },
           },
         },
@@ -966,7 +417,7 @@ function createD3ROTheme(key: ThemeKey): Theme {
       },
       MuiInputLabel: {
         styleOverrides: {
-          root: { color: r.text.secondary, '&.Mui-focused': { color: accentMain } },
+          root: { color: r.text.secondary, '&.Mui-focused': { color: r.accent.light } },
         },
       },
       MuiFormControlLabel: {
@@ -977,28 +428,30 @@ function createD3ROTheme(key: ThemeKey): Theme {
       MuiSwitch: {
         styleOverrides: {
           switchBase: {
-            '&.Mui-checked': { color: accentMain },
-            '&.Mui-checked + .MuiSwitch-track': { backgroundColor: accentMain },
+            '&.Mui-checked': { color: r.accent.ink },
+            '&.Mui-checked + .MuiSwitch-track': { backgroundColor: r.accent.solid, opacity: 1 },
           },
-          track: { backgroundColor: r.text.disabled },
+          track: { backgroundColor: r.text.tertiary },
         },
       },
       MuiMenuItem: {
         styleOverrides: {
           root: {
             color: r.text.primary,
-            '&.Mui-selected': { backgroundColor: accentDim },
+            fontSize: '13px',
+            '&.Mui-selected': { backgroundColor: r.accent.dim },
           },
         },
       },
       MuiTooltip: {
-        defaultProps: { arrow: true },
+        defaultProps: { arrow: false, enterDelay: 400 },
         styleOverrides: {
-          tooltip: { backgroundColor: r.bg.elevated, color: r.text.primary, fontSize: '12px', borderRadius: 8, border: `1px solid ${r.glass.hairline}` },
+          tooltip: { backgroundColor: r.bg.elevated, color: r.text.primary, fontSize: '12px', fontWeight: 400, borderRadius: RADIUS.small, border: `1px solid ${r.border.default}`, boxShadow: r.shadow.tooltip },
         },
       },
-      MuiTabs: { styleOverrides: { indicator: { backgroundColor: accentMain, height: 2, borderRadius: 2 } } },
-      MuiTab: { styleOverrides: { root: { textTransform: 'none', fontWeight: 500, fontSize: '14px', '&.Mui-selected': { color: accentLight, fontWeight: 500 } } } },
+      MuiTabs: { styleOverrides: { indicator: { backgroundColor: r.accent.main, height: 2, borderRadius: 0 } } },
+      MuiTab: { styleOverrides: { root: { textTransform: 'none', fontWeight: 400, fontSize: '13px', minHeight: 40, color: r.text.secondary, '&.Mui-selected': { color: r.text.primary, fontWeight: 500 } } } },
+      MuiAlert: { styleOverrides: { root: { borderRadius: RADIUS.inner, fontSize: '13px' } } },
       MuiPaper: {
         styleOverrides: {
           root: { backgroundImage: 'none' },