From 078304dda9ba4035e3092250e9d34f512dad66b5 Mon Sep 17 00:00:00 2001
From: Yun Chan <yunchan@twentyoz.kr>
Date: Wed, 22 Jul 2026 01:54:37 +0900
Subject: [PATCH] =?UTF-8?q?refactor(ui):=20deprecated=20accent.amber->main?=
 =?UTF-8?q?=2091=EA=B1=B4=20+=20=EB=A7=A4=EC=A7=81=20=EB=A6=AC=ED=84=B0?=
 =?UTF-8?q?=EB=9F=B4=20=ED=86=A0=ED=81=B0=ED=99=94=20(WS3)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- accent.amber/amberDim/amberGlow -> accent.main/dim/glow 91건 (34파일).
  theme.ts의 @deprecated 별칭 참조 제거 (본체 main 사용).
- inline fontSize/fontWeight -> d3roTypo, borderRadius -> d3roRadius 토큰 37건.
- P4: 화면 고유 수치(스탯 fontSize, 레이아웃 width)는 토큰화 제외.
정책: docs/REFACTOR_POLICY.md DP1, 이식 인사이트 P4
---
 .../src/renderer/components/AppLayout.tsx     | 12 +++---
 .../renderer/components/CloudSyncSection.tsx  |  2 +-
 .../src/renderer/components/FileDropZone.tsx  | 12 +++---
 .../renderer/components/HotkeyRecordModal.tsx |  8 ++--
 .../src/renderer/components/LicenseModal.tsx  | 10 ++---
 .../src/renderer/components/LicenseTab.tsx    | 10 ++---
 .../renderer/components/OllamaGuideModal.tsx  | 10 ++---
 .../renderer/components/OnboardingModal.tsx   |  2 +-
 .../src/renderer/components/ProBadge.tsx      |  6 +--
 .../src/renderer/components/SettingsModal.tsx | 38 +++++++++----------
 .../renderer/components/TemplateSection.tsx   |  6 +--
 .../src/renderer/components/TitleBar.tsx      |  2 +-
 .../components/UpgradePromptModal.tsx         | 10 ++---
 .../components/meeting/AddDocumentDialog.tsx  |  8 ++--
 .../components/meeting/EditableSegment.tsx    |  2 +-
 .../components/meeting/ExportMenu.tsx         |  4 +-
 .../components/meeting/MarkdownEditor.tsx     |  2 +-
 .../components/meeting/MarkdownRenderer.tsx   |  8 ++--
 .../components/meeting/MeetingChatPanel.tsx   | 14 +++----
 .../components/meeting/MeetingDetailTabs.tsx  |  6 +--
 .../components/meeting/TranscriptTab.tsx      | 10 ++---
 .../components/shared/HistoryEntryCard.tsx    | 12 +++---
 .../src/renderer/pages/CommandsPage.tsx       | 18 ++++-----
 .../src/renderer/pages/DictionaryPage.tsx     |  2 +-
 .../src/renderer/pages/HistoryPage.tsx        |  8 ++--
 .../src/renderer/pages/KnowledgeBasePage.tsx  |  8 ++--
 .../src/renderer/pages/MeetingModePage.tsx    |  2 +-
 .../renderer/pages/VoiceConversationPage.tsx  | 18 ++++-----
 28 files changed, 125 insertions(+), 125 deletions(-)

diff --git a/apps/desktop/src/renderer/components/AppLayout.tsx b/apps/desktop/src/renderer/components/AppLayout.tsx
index af09a13..2df772c 100644
--- a/apps/desktop/src/renderer/components/AppLayout.tsx
+++ b/apps/desktop/src/renderer/components/AppLayout.tsx
@@ -164,9 +164,9 @@ export function AppLayout(): React.ReactElement {
               <Typography
                 sx={{
                   fontFamily: d3roFontSans,
-                  fontSize: '20px',
-                  fontWeight: 800,
-                  letterSpacing: '0.02em',
+                  fontSize: d3roTypo.value.size,
+                  fontWeight: 800, // P4: 토큰에 없는 800 보존
+                  letterSpacing: '0.02em', // P4: 토큰에 없는 0.02em 보존
                   backgroundImage: d3roPalette.gradient.logo,
                   backgroundClip: 'text',
                   WebkitBackgroundClip: 'text',
@@ -180,9 +180,9 @@ export function AppLayout(): React.ReactElement {
             <Typography
               sx={{
                 fontFamily: d3roFontSans,
-                fontSize: '13px',
-                fontWeight: 500,
-                letterSpacing: '0.12em',
+                fontSize: d3roTypo.compact.size,
+                fontWeight: 500, // P4: 토큰에 없는 500 보존
+                letterSpacing: '0.12em', // P4: 토큰에 없는 0.12em 보존
                 color: d3roPalette.text.dimLabel,
                 pl: '16px',
               }}
diff --git a/apps/desktop/src/renderer/components/CloudSyncSection.tsx b/apps/desktop/src/renderer/components/CloudSyncSection.tsx
index 6344b61..467d0a4 100644
--- a/apps/desktop/src/renderer/components/CloudSyncSection.tsx
+++ b/apps/desktop/src/renderer/components/CloudSyncSection.tsx
@@ -182,7 +182,7 @@ export function CloudSyncSection(): React.ReactElement {
                   sx={{
                     height: '100%',
                     width: `${progress.total > 0 ? (progress.current / progress.total) * 100 : 0}%`,
-                    bgcolor: d3roPalette.accent.amber,
+                    bgcolor: d3roPalette.accent.main,
                     transition: 'width 200ms'
                   }}
                 />
diff --git a/apps/desktop/src/renderer/components/FileDropZone.tsx b/apps/desktop/src/renderer/components/FileDropZone.tsx
index e0d58e6..c7b7e26 100644
--- a/apps/desktop/src/renderer/components/FileDropZone.tsx
+++ b/apps/desktop/src/renderer/components/FileDropZone.tsx
@@ -127,11 +127,11 @@ export function FileDropZone(): React.ReactElement {
           sx={{
             p: 4,
             textAlign: 'center',
-            border: `2px dashed ${dragging ? d3roPalette.accent.amber : d3roPalette.border.subtle}`,
-            borderRadius: '8px',
+            border: `2px dashed ${dragging ? d3roPalette.accent.main : d3roPalette.border.subtle}`,
+            borderRadius: d3roRadius.small,
             cursor: 'pointer',
             transition: 'border-color 0.2s',
-            '&:hover': { borderColor: d3roPalette.accent.amber },
+            '&:hover': { borderColor: d3roPalette.accent.main },
           }}
         >
           <FileUp size={40} style={{ color: d3roPalette.text.inactive, marginBottom: 8 }} />
@@ -175,7 +175,7 @@ export function FileDropZone(): React.ReactElement {
                   height: 6,
                   borderRadius: 3,
                   bgcolor: d3roPalette.bg.inset,
-                  '& .MuiLinearProgress-bar': { bgcolor: d3roPalette.accent.amber },
+                  '& .MuiLinearProgress-bar': { bgcolor: d3roPalette.accent.main },
                 }}
               />
               <PhosphorText variant="dim">
@@ -214,7 +214,7 @@ export function FileDropZone(): React.ReactElement {
             <Box sx={{ display: 'flex', gap: 0.5 }}>
               <Tooltip title={copied ? 'Copied!' : t('fileTranscription.copyAll')}>
                 <IconButton size="small" onClick={handleCopy}>
-                  <Copy size={16} style={{ color: copied ? d3roPalette.accent.amber : d3roPalette.text.inactive }} />
+                  <Copy size={16} style={{ color: copied ? d3roPalette.accent.main : d3roPalette.text.inactive }} />
                 </IconButton>
               </Tooltip>
               <IconButton size="small" onClick={handleReset}>
@@ -229,7 +229,7 @@ export function FileDropZone(): React.ReactElement {
               overflow: 'auto',
               p: 2,
               bgcolor: d3roPalette.bg.inset,
-              borderRadius: '6px',
+              borderRadius: d3roRadius.xs,
               fontSize: d3roTypo.compact.size,
               lineHeight: d3roTypo.compact.line,
               color: d3roPalette.text.primary,
diff --git a/apps/desktop/src/renderer/components/HotkeyRecordModal.tsx b/apps/desktop/src/renderer/components/HotkeyRecordModal.tsx
index a939c5c..0bff05c 100644
--- a/apps/desktop/src/renderer/components/HotkeyRecordModal.tsx
+++ b/apps/desktop/src/renderer/components/HotkeyRecordModal.tsx
@@ -235,7 +235,7 @@ export function HotkeyRecordModal({
       disableAutoFocus
       disableRestoreFocus
     >
-      <DialogTitle sx={{ fontWeight: 700, fontSize: '16px' }}>{title ?? t('hotkey.title')}</DialogTitle>
+      <DialogTitle sx={{ fontWeight: 700, fontSize: d3roTypo.heading.size }}>{title ?? t('hotkey.title')}</DialogTitle>
       <DialogContent>
         {/* 녹화 영역 */}
         <Box
@@ -246,10 +246,10 @@ export function HotkeyRecordModal({
                 : isReady
                   ? d3roPalette.tag.green
                   : displayKeys.length > 0
-                    ? d3roPalette.accent.amber
+                    ? d3roPalette.accent.main
                     : d3roPalette.border.strong
             }`,
-            borderRadius: '12px',
+            borderRadius: d3roRadius.inner,
             p: 3,
             minHeight: 80,
             display: 'flex',
@@ -281,7 +281,7 @@ export function HotkeyRecordModal({
           ) : (
             <Typography
               sx={{
-                color: d3roPalette.accent.amber,
+                color: d3roPalette.accent.main,
                 fontSize: '13px',
                 textAlign: 'center',
               }}
diff --git a/apps/desktop/src/renderer/components/LicenseModal.tsx b/apps/desktop/src/renderer/components/LicenseModal.tsx
index b56bcee..f9d55fa 100644
--- a/apps/desktop/src/renderer/components/LicenseModal.tsx
+++ b/apps/desktop/src/renderer/components/LicenseModal.tsx
@@ -108,7 +108,7 @@ export function LicenseModal({ open, onClose }: LicenseModalProps): React.ReactE
                     {t(`license.feature.${q.feature}` as Parameters<typeof t>[0])}
                   </PhosphorText>
                   <PhosphorText variant="small" sx={{
-                    color: q.limit === -1 ? d3roPalette.tag.green : q.remaining === 0 ? d3roPalette.tag.red : d3roPalette.accent.amber,
+                    color: q.limit === -1 ? d3roPalette.tag.green : q.remaining === 0 ? d3roPalette.tag.red : d3roPalette.accent.main,
                   }}>
                     {q.limit === -1
                       ? t('license.unlimited')
@@ -124,7 +124,7 @@ export function LicenseModal({ open, onClose }: LicenseModalProps): React.ReactE
                       borderRadius: d3roRadius.xs,
                       bgcolor: d3roPalette.bg.inset,
                       '& .MuiLinearProgress-bar': {
-                        bgcolor: q.used >= q.limit ? d3roPalette.tag.red : d3roPalette.accent.amber,
+                        bgcolor: q.used >= q.limit ? d3roPalette.tag.red : d3roPalette.accent.main,
                         borderRadius: d3roRadius.xs,
                       },
                     }}
@@ -144,7 +144,7 @@ export function LicenseModal({ open, onClose }: LicenseModalProps): React.ReactE
                   <Box key={m.model} sx={{ mb: 1 }}>
                     <Box sx={{ display: 'flex', justifyContent: 'space-between', mb: 0.3 }}>
                       <PhosphorText variant="small">{t(m.i18nKey as Parameters<typeof t>[0])}</PhosphorText>
-                      <PhosphorText variant="small" sx={{ color: d3roPalette.accent.amber }}>
+                      <PhosphorText variant="small" sx={{ color: d3roPalette.accent.main }}>
                         {m.limit === -1
                           ? t('license.unlimited')
                           : `${m.limit}/${t(m.period === 'weekly' ? 'license.quotaWeekly' : 'license.quotaDaily')}`}
@@ -234,7 +234,7 @@ function TierLabel({ tier, t }: { tier: string; t: (k: string) => string }): Rea
     ? d3roPalette.tag.purple
     : tier === 'pro'
       ? d3roPalette.tag.green
-      : d3roPalette.accent.amber
+      : d3roPalette.accent.main
   const label = tier === 'pro_plus' ? t('license.proPlus') : tier === 'pro' ? t('license.pro') : t('license.free')
   return <PhosphorText variant="value" sx={{ color }}>{label}</PhosphorText>
 }
@@ -329,7 +329,7 @@ function TierCell({ value }: { value: boolean | string }): React.ReactElement {
     return <XCircle size={14} style={{ color: d3roPalette.text.disabled }} />
   }
   return (
-    <PhosphorText variant="dim" sx={{ fontSize: d3roTypo.small.size, color: d3roPalette.accent.amber }}>
+    <PhosphorText variant="dim" sx={{ fontSize: d3roTypo.small.size, color: d3roPalette.accent.main }}>
       {value}
     </PhosphorText>
   )
diff --git a/apps/desktop/src/renderer/components/LicenseTab.tsx b/apps/desktop/src/renderer/components/LicenseTab.tsx
index ebb8b11..e70bd6c 100644
--- a/apps/desktop/src/renderer/components/LicenseTab.tsx
+++ b/apps/desktop/src/renderer/components/LicenseTab.tsx
@@ -77,7 +77,7 @@ function TierLabel({ tier, t }: { tier: string; t: (k: string) => string }): Rea
     ? d3roPalette.tag.purple
     : tier === 'pro'
       ? d3roPalette.tag.green
-      : d3roPalette.accent.amber
+      : d3roPalette.accent.main
   const label = tier === 'pro_plus' ? t('license.proPlus') : tier === 'pro' ? t('license.pro') : t('license.free')
   return <PhosphorText variant="value" sx={{ color }}>{label}</PhosphorText>
 }
@@ -191,7 +191,7 @@ function UsageSection({ t, usage, currentTier }: { t: (k: string) => string; usa
             <Box key={m.model}>
               <Box sx={{ display: 'flex', justifyContent: 'space-between', mb: 0.5 }}>
                 <PhosphorText variant="small">{t(m.i18nKey)}</PhosphorText>
-                <PhosphorText variant="small" sx={{ color: d3roPalette.accent.amber }}>
+                <PhosphorText variant="small" sx={{ color: d3roPalette.accent.main }}>
                   {m.limit === -1
                     ? t('license.unlimited')
                     : `${m.limit}/${t(m.period === 'weekly' ? 'license.quotaWeekly' : 'license.quotaDaily')}`}
@@ -230,7 +230,7 @@ function QuotaBar({ t, feature, used, limit, remaining }: { t: (k: string, p?: R
           {t(`license.feature.${feature}`)}
         </PhosphorText>
         <PhosphorText variant="small" sx={{
-          color: limit === -1 ? d3roPalette.tag.green : remaining === 0 ? d3roPalette.tag.red : d3roPalette.accent.amber,
+          color: limit === -1 ? d3roPalette.tag.green : remaining === 0 ? d3roPalette.tag.red : d3roPalette.accent.main,
         }}>
           {limit === -1
             ? t('license.unlimited')
@@ -246,7 +246,7 @@ function QuotaBar({ t, feature, used, limit, remaining }: { t: (k: string, p?: R
             borderRadius: d3roRadius.xs,
             bgcolor: d3roPalette.bg.inset,
             '& .MuiLinearProgress-bar': {
-              bgcolor: used >= limit ? d3roPalette.tag.red : d3roPalette.accent.amber,
+              bgcolor: used >= limit ? d3roPalette.tag.red : d3roPalette.accent.main,
               borderRadius: d3roRadius.xs,
             },
           }}
@@ -321,7 +321,7 @@ function TierCell({ value }: { value: boolean | string }): React.ReactElement {
     return <XCircle size={14} style={{ color: d3roPalette.text.disabled }} />
   }
   return (
-    <PhosphorText variant="dim" sx={{ fontSize: d3roTypo.small.size, color: d3roPalette.accent.amber }}>
+    <PhosphorText variant="dim" sx={{ fontSize: d3roTypo.small.size, color: d3roPalette.accent.main }}>
       {value}
     </PhosphorText>
   )
diff --git a/apps/desktop/src/renderer/components/OllamaGuideModal.tsx b/apps/desktop/src/renderer/components/OllamaGuideModal.tsx
index 9e704ee..afac370 100644
--- a/apps/desktop/src/renderer/components/OllamaGuideModal.tsx
+++ b/apps/desktop/src/renderer/components/OllamaGuideModal.tsx
@@ -27,11 +27,11 @@ function CodeBlock({ children }: { children: string }): React.ReactElement {
     <Box
       sx={{
         bgcolor: d3roPalette.bg.inset,
-        borderRadius: '8px',
+        borderRadius: d3roRadius.small,
         p: 1.5,
         fontFamily: d3roFontMono,
-        fontSize: '12px',
-        color: d3roPalette.accent.amber,
+        fontSize: d3roTypo.small.size,
+        color: d3roPalette.accent.main,
         display: 'flex',
         alignItems: 'center',
         justifyContent: 'space-between',
@@ -42,7 +42,7 @@ function CodeBlock({ children }: { children: string }): React.ReactElement {
       <IconButton
         size="small"
         onClick={() => navigator.clipboard.writeText(children)}
-        sx={{ color: d3roPalette.text.inactive, '&:hover': { color: d3roPalette.accent.amber } }}
+        sx={{ color: d3roPalette.text.inactive, '&:hover': { color: d3roPalette.accent.main } }}
       >
         <Copy size={14} />
       </IconButton>
@@ -80,7 +80,7 @@ export function OllamaGuideModal({ open, onClose }: OllamaGuideModalProps): Reac
           fontWeight: 700,
           fontSize: '14px',
           letterSpacing: '1px',
-          color: d3roPalette.accent.amber,
+          color: d3roPalette.accent.main,
           py: 1.5,
         }}
       >
diff --git a/apps/desktop/src/renderer/components/OnboardingModal.tsx b/apps/desktop/src/renderer/components/OnboardingModal.tsx
index 76044eb..3cf2306 100644
--- a/apps/desktop/src/renderer/components/OnboardingModal.tsx
+++ b/apps/desktop/src/renderer/components/OnboardingModal.tsx
@@ -214,7 +214,7 @@ export function OnboardingModal({ open, onClose }: OnboardingModalProps): React.
 
   const colorSuccess = d3roPalette.tag.green
   const colorDanger = d3roPalette.tag.red
-  const colorAccent = d3roPalette.accent.amber
+  const colorAccent = d3roPalette.accent.main
 
   const currentStep: StepKind | null = isDownloading
     ? (neededSteps[stepIndex] ?? null)
diff --git a/apps/desktop/src/renderer/components/ProBadge.tsx b/apps/desktop/src/renderer/components/ProBadge.tsx
index accbf2c..3e7c595 100644
--- a/apps/desktop/src/renderer/components/ProBadge.tsx
+++ b/apps/desktop/src/renderer/components/ProBadge.tsx
@@ -43,7 +43,7 @@ export function ProBadge({ feature, children }: ProBadgeProps): React.ReactEleme
           borderRadius: d3roRadius.inner,
           transition: 'background-color 0.15s ease',
           '&:hover': {
-            bgcolor: d3roPalette.accent.amberDim,
+            bgcolor: d3roPalette.accent.dim,
           },
         }}
       >
@@ -59,14 +59,14 @@ export function ProBadge({ feature, children }: ProBadgeProps): React.ReactEleme
             border: `1px solid ${d3roPalette.border.default}`,
           }}
         >
-          <Lock size={14} style={{ color: d3roPalette.accent.amber }} />
+          <Lock size={14} style={{ color: d3roPalette.accent.main }} />
           <Typography
             sx={{
               fontFamily: d3roFontMono,
               fontSize: d3roTypo.small.size,
               fontWeight: d3roTypo.small.weight,
               letterSpacing: d3roTypo.small.spacing,
-              color: d3roPalette.accent.amber,
+              color: d3roPalette.accent.main,
             }}
           >
             {t('license.pro.required')}
diff --git a/apps/desktop/src/renderer/components/SettingsModal.tsx b/apps/desktop/src/renderer/components/SettingsModal.tsx
index 8980bb9..d0626a5 100644
--- a/apps/desktop/src/renderer/components/SettingsModal.tsx
+++ b/apps/desktop/src/renderer/components/SettingsModal.tsx
@@ -77,11 +77,11 @@ function HotkeyDisplay({
               size="small"
               sx={{
                 fontWeight: 700,
-                fontSize: '11px',
+                fontSize: d3roTypo.label.size,
                 bgcolor: d3roPalette.bg.elevated,
                 color: d3roPalette.text.primary,
                 border: `1px solid ${d3roPalette.border.default}`,
-                borderRadius: '6px',
+                borderRadius: d3roRadius.xs,
                 height: 28,
               }}
             />
@@ -135,7 +135,7 @@ function VoiceModeCard({
           <Box sx={{ display: 'flex', alignItems: 'center', gap: 1, mb: 0.5 }}>
             <Typography
               variant="subtitle2"
-              sx={{ fontWeight: 700, fontFamily: d3roFontMono, fontSize: '12px', letterSpacing: '0.5px' }}
+              sx={{ fontWeight: 700, fontFamily: d3roFontMono, fontSize: d3roTypo.small.size, letterSpacing: '0.5px' }}
             >
               {title}
             </Typography>
@@ -159,7 +159,7 @@ function VoiceModeCard({
                   label={enabled ? enabledLabel : disabledLabel}
                   size="small"
                   sx={{
-                    fontSize: '10px',
+                    fontSize: '10px', // P4: 토큰에 없는 10px 보존
                     fontWeight: 700,
                     height: 20,
                     bgcolor: enabled ? d3roPalette.tag.greenBg : 'transparent',
@@ -171,7 +171,7 @@ function VoiceModeCard({
               sx={{ ml: 0, mr: 0 }}
             />
           </Box>
-          <Typography variant="body2" sx={{ color: d3roPalette.text.inactive, fontSize: '11px' }}>
+          <Typography variant="body2" sx={{ color: d3roPalette.text.inactive, fontSize: d3roTypo.label.size }}>
             {description}
           </Typography>
         </Box>
@@ -326,10 +326,10 @@ export function SettingsModal({ open, onClose }: SettingsModalProps): React.Reac
             alignItems: 'center',
             fontFamily: d3roFontMono,
             fontWeight: 700,
-            fontSize: '14px',
-            letterSpacing: '1px',
+            fontSize: d3roTypo.body.size,
+            letterSpacing: d3roTypo.engrave.spacing,
             textTransform: 'uppercase',
-            color: d3roPalette.accent.amber,
+            color: d3roPalette.accent.main,
             py: 1.5,
           }}
         >
@@ -351,16 +351,16 @@ export function SettingsModal({ open, onClose }: SettingsModalProps): React.Reac
               minHeight: 40,
               '& .MuiTab-root': {
                 fontFamily: d3roFontMono,
-                fontSize: '11px',
+                fontSize: d3roTypo.label.size,
                 fontWeight: 700,
                 letterSpacing: '0.5px',
                 textTransform: 'uppercase',
                 color: d3roPalette.text.inactive,
                 minHeight: 40,
                 py: 1,
-                '&.Mui-selected': { color: d3roPalette.accent.amber },
+                '&.Mui-selected': { color: d3roPalette.accent.main },
               },
-              '& .MuiTabs-indicator': { bgcolor: d3roPalette.accent.amber, height: 2 },
+              '& .MuiTabs-indicator': { bgcolor: d3roPalette.accent.main, height: 2 },
             }}
           >
             <Tab label={t('settings.tabs.general')} icon={<Keyboard size={14} />} iconPosition="start" />
@@ -564,12 +564,12 @@ export function SettingsModal({ open, onClose }: SettingsModalProps): React.Reac
                       }
                     }
                   }}
-                  sx={{ fontFamily: d3roFontMono, fontSize: '11px', minWidth: 80 }}
+                  sx={{ fontFamily: d3roFontMono, fontSize: d3roTypo.label.size, minWidth: 80 }}
                 >
                   {micTesting ? t('common.stop').toUpperCase() : t('common.test').toUpperCase()}
                 </Button>
                 <Box sx={{ flex: 1, height: 8, bgcolor: d3roPalette.bg.inset, borderRadius: '4px', overflow: 'hidden', boxShadow: d3roShadow.inset }}>
-                  <Box sx={{ width: `${Math.min(100, micLevel * 100)}%`, height: '100%', bgcolor: micLevel > 0.7 ? d3roPalette.tag.red : d3roPalette.accent.amber, borderRadius: '4px', transition: 'width 100ms ease-out' }} />
+                  <Box sx={{ width: `${Math.min(100, micLevel * 100)}%`, height: '100%', bgcolor: micLevel > 0.7 ? d3roPalette.tag.red : d3roPalette.accent.main, borderRadius: '4px', transition: 'width 100ms ease-out' }} />
                 </Box>
               </Box>
 
@@ -682,7 +682,7 @@ export function SettingsModal({ open, onClose }: SettingsModalProps): React.Reac
                 }
                 label={
                   <Box>
-                    <Typography variant="body2" sx={{ fontSize: '12px' }}>{t('settings.diarization')}</Typography>
+                    <Typography variant="body2" sx={{ fontSize: d3roTypo.small.size }}>{t('settings.diarization')}</Typography>
                     <Typography variant="caption" sx={{ color: d3roPalette.text.inactive, fontSize: '11px' }}>
                       {t('settings.diarizationHint')}
                     </Typography>
@@ -718,7 +718,7 @@ export function SettingsModal({ open, onClose }: SettingsModalProps): React.Reac
                 </Select>
               </FormControl>
 
-              <Typography variant="body2" sx={{ color: d3roPalette.text.inactive, fontSize: '11px' }}>
+              <Typography variant="body2" sx={{ color: d3roPalette.text.inactive, fontSize: d3roTypo.label.size }}>
                 {config.llmBackend === 'premium'
                   ? t('settings.backend.premiumHint')
                   : t('settings.backend.localHint')}
@@ -749,7 +749,7 @@ export function SettingsModal({ open, onClose }: SettingsModalProps): React.Reac
                 </Select>
               </FormControl>
 
-              <Typography variant="body2" sx={{ color: d3roPalette.text.inactive, fontSize: '11px' }}>
+              <Typography variant="body2" sx={{ color: d3roPalette.text.inactive, fontSize: d3roTypo.label.size }}>
                 {config.conversationBackend === 'realtime'
                   ? t('settings.convBackend.realtimeHint')
                   : t('settings.convBackend.localHint')}
@@ -770,7 +770,7 @@ export function SettingsModal({ open, onClose }: SettingsModalProps): React.Reac
                     fullWidth
                   />
 
-                  <Typography variant="body2" sx={{ color: d3roPalette.text.inactive, fontSize: '11px' }}>
+                  <Typography variant="body2" sx={{ color: d3roPalette.text.inactive, fontSize: d3roTypo.label.size }}>
                     {t('settings.ollamaHint')}
                   </Typography>
 
@@ -821,7 +821,7 @@ export function SettingsModal({ open, onClose }: SettingsModalProps): React.Reac
                 </Select>
               </FormControl>
 
-              <Typography variant="body2" sx={{ color: d3roPalette.text.inactive, fontSize: '11px' }}>
+              <Typography variant="body2" sx={{ color: d3roPalette.text.inactive, fontSize: d3roTypo.label.size }}>
                 {t('settings.actionHint')}
               </Typography>
 
@@ -924,7 +924,7 @@ export function SettingsModal({ open, onClose }: SettingsModalProps): React.Reac
                   onClose()
                   setTimeout(() => window.location.reload(), 300)
                 }}
-                sx={{ fontFamily: d3roFontMono, fontSize: '11px' }}
+                sx={{ fontFamily: d3roFontMono, fontSize: d3roTypo.label.size }}
               >
                 {t('settings.about.restartOnboarding')}
               </Button>
diff --git a/apps/desktop/src/renderer/components/TemplateSection.tsx b/apps/desktop/src/renderer/components/TemplateSection.tsx
index 5f63f6f..98f8bcc 100644
--- a/apps/desktop/src/renderer/components/TemplateSection.tsx
+++ b/apps/desktop/src/renderer/components/TemplateSection.tsx
@@ -132,7 +132,7 @@ export function TemplateSection(): React.ReactElement {
 
       {/* 활성 세션 표시 */}
       {session && (
-        <MetalCard sx={{ mb: 2, border: `1px solid ${d3roPalette.accent.amber}` }}>
+        <MetalCard sx={{ mb: 2, border: `1px solid ${d3roPalette.accent.main}` }}>
           <Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
             <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
               <Led color="amber" pulse />
@@ -177,7 +177,7 @@ export function TemplateSection(): React.ReactElement {
                       size="small"
                       onClick={() => handleStartSession(tmpl.id)}
                       disabled={!!session}
-                      sx={{ color: d3roPalette.accent.amber, '&:hover': { opacity: 0.8 } }}
+                      sx={{ color: d3roPalette.accent.main, '&:hover': { opacity: 0.8 } }}
                     >
                       <Play size={18} />
                     </IconButton>
@@ -185,7 +185,7 @@ export function TemplateSection(): React.ReactElement {
                   <IconButton
                     size="small"
                     onClick={() => openEdit(tmpl)}
-                    sx={{ color: d3roPalette.text.inactive, '&:hover': { color: d3roPalette.accent.amber } }}
+                    sx={{ color: d3roPalette.text.inactive, '&:hover': { color: d3roPalette.accent.main } }}
                   >
                     <Pencil size={16} />
                   </IconButton>
diff --git a/apps/desktop/src/renderer/components/TitleBar.tsx b/apps/desktop/src/renderer/components/TitleBar.tsx
index 73dd288..774d330 100644
--- a/apps/desktop/src/renderer/components/TitleBar.tsx
+++ b/apps/desktop/src/renderer/components/TitleBar.tsx
@@ -81,7 +81,7 @@ function ControlButton({
         display: 'flex',
         alignItems: 'center',
         justifyContent: 'center',
-        borderRadius: '8px',
+        borderRadius: d3roRadius.small,
         cursor: 'pointer',
         color: d3roPalette.text.inactive,
         transition: 'background-color 0.12s ease, color 0.12s ease',
diff --git a/apps/desktop/src/renderer/components/UpgradePromptModal.tsx b/apps/desktop/src/renderer/components/UpgradePromptModal.tsx
index 0fd811f..41098cb 100644
--- a/apps/desktop/src/renderer/components/UpgradePromptModal.tsx
+++ b/apps/desktop/src/renderer/components/UpgradePromptModal.tsx
@@ -76,7 +76,7 @@ export function UpgradePromptModal(): React.ReactElement {
           fontSize: d3roTypo.heading.size,
           fontWeight: d3roTypo.heading.weight,
           letterSpacing: d3roTypo.heading.spacing,
-          color: d3roPalette.accent.amber,
+          color: d3roPalette.accent.main,
         }}
       >
         <Lock size={20} />
@@ -167,12 +167,12 @@ export function UpgradePromptModal(): React.ReactElement {
             fontFamily: d3roFontMono,
             fontSize: d3roTypo.compact.size,
             fontWeight: 600,
-            bgcolor: d3roPalette.accent.amber,
+            bgcolor: d3roPalette.accent.main,
             color: d3roPalette.bg.app,
             textTransform: 'none',
             borderRadius: d3roRadius.button,
             '&:hover': {
-              bgcolor: d3roPalette.accent.amber,
+              bgcolor: d3roPalette.accent.main,
               filter: 'brightness(1.1)',
             },
           }}
@@ -207,7 +207,7 @@ function QuotaBar({ quota }: { quota: UsageQuota }): React.ReactElement {
           sx={{
             fontFamily: d3roFontMono,
             fontSize: d3roTypo.small.size,
-            color: d3roPalette.accent.amber,
+            color: d3roPalette.accent.main,
           }}
         >
           {t('license.quotaUsed', {
@@ -224,7 +224,7 @@ function QuotaBar({ quota }: { quota: UsageQuota }): React.ReactElement {
           borderRadius: d3roRadius.xs,
           bgcolor: d3roPalette.bg.inset,
           '& .MuiLinearProgress-bar': {
-            bgcolor: progress >= 100 ? d3roPalette.tag.red : d3roPalette.accent.amber,
+            bgcolor: progress >= 100 ? d3roPalette.tag.red : d3roPalette.accent.main,
             borderRadius: d3roRadius.xs,
           },
         }}
diff --git a/apps/desktop/src/renderer/components/meeting/AddDocumentDialog.tsx b/apps/desktop/src/renderer/components/meeting/AddDocumentDialog.tsx
index 410705f..838ea34 100644
--- a/apps/desktop/src/renderer/components/meeting/AddDocumentDialog.tsx
+++ b/apps/desktop/src/renderer/components/meeting/AddDocumentDialog.tsx
@@ -95,7 +95,7 @@ export function AddDocumentDialog({
                 height: 4,
                 borderRadius: 2,
                 bgcolor: d3roPalette.bg.inset,
-                '& .MuiLinearProgress-bar': { bgcolor: d3roPalette.accent.amber },
+                '& .MuiLinearProgress-bar': { bgcolor: d3roPalette.accent.main },
               }}
             />
             <PhosphorText variant="dim" sx={{ fontSize: 11, mt: 0.5 }}>
@@ -115,12 +115,12 @@ export function AddDocumentDialog({
                 opacity: generating ? 0.6 : 1,
                 border:
                   selectedId === tp.id
-                    ? `2px solid ${d3roPalette.accent.amber}`
+                    ? `2px solid ${d3roPalette.accent.main}`
                     : `2px solid transparent`,
                 borderRadius: d3roRadius.inner,
                 transition: 'border-color 0.15s',
                 '&:hover': {
-                  borderColor: generating ? undefined : d3roPalette.accent.amberDim,
+                  borderColor: generating ? undefined : d3roPalette.accent.dim,
                 },
               }}
             >
@@ -182,7 +182,7 @@ export function AddDocumentDialog({
           sx={{
             height: 36,
             fontSize: d3roTypo.engrave.size,
-            color: d3roPalette.accent.amber,
+            color: d3roPalette.accent.main,
           }}
         >
           {generating ? t('meeting.generating') : t('meeting.generate')}
diff --git a/apps/desktop/src/renderer/components/meeting/EditableSegment.tsx b/apps/desktop/src/renderer/components/meeting/EditableSegment.tsx
index f5d4599..28fd81a 100644
--- a/apps/desktop/src/renderer/components/meeting/EditableSegment.tsx
+++ b/apps/desktop/src/renderer/components/meeting/EditableSegment.tsx
@@ -146,7 +146,7 @@ export function EditableSegment({
           ? {}
           : {
               color: d3roPalette.text.primary,
-              borderBottomColor: edited ? d3roPalette.accent.amber : undefined,
+              borderBottomColor: edited ? d3roPalette.accent.main : undefined,
               bgcolor: edited ? undefined : d3roPalette.bg.elevated,
             },
       }}
diff --git a/apps/desktop/src/renderer/components/meeting/ExportMenu.tsx b/apps/desktop/src/renderer/components/meeting/ExportMenu.tsx
index 664e9b9..0d58341 100644
--- a/apps/desktop/src/renderer/components/meeting/ExportMenu.tsx
+++ b/apps/desktop/src/renderer/components/meeting/ExportMenu.tsx
@@ -84,7 +84,7 @@ export function ExportMenu({ onExport, onCopyToClipboard }: ExportMenuProps): Re
               color: d3roPalette.text.primary,
               '&:hover': {
                 bgcolor: d3roPalette.bg.cardHover,
-                color: d3roPalette.accent.amber,
+                color: d3roPalette.accent.main,
               },
             }}
           >
@@ -100,7 +100,7 @@ export function ExportMenu({ onExport, onCopyToClipboard }: ExportMenuProps): Re
               color: d3roPalette.text.primary,
               '&:hover': {
                 bgcolor: d3roPalette.bg.cardHover,
-                color: d3roPalette.accent.amber,
+                color: d3roPalette.accent.main,
               },
             }}
           >
diff --git a/apps/desktop/src/renderer/components/meeting/MarkdownEditor.tsx b/apps/desktop/src/renderer/components/meeting/MarkdownEditor.tsx
index 628a626..fb38ddb 100644
--- a/apps/desktop/src/renderer/components/meeting/MarkdownEditor.tsx
+++ b/apps/desktop/src/renderer/components/meeting/MarkdownEditor.tsx
@@ -72,7 +72,7 @@ export function MarkdownEditor({
               lineHeight: 1.7,
               boxSizing: 'border-box',
               '&:focus': {
-                borderColor: d3roPalette.accent.amber,
+                borderColor: d3roPalette.accent.main,
               },
             }}
           />
diff --git a/apps/desktop/src/renderer/components/meeting/MarkdownRenderer.tsx b/apps/desktop/src/renderer/components/meeting/MarkdownRenderer.tsx
index 1a2ce4d..09829ca 100644
--- a/apps/desktop/src/renderer/components/meeting/MarkdownRenderer.tsx
+++ b/apps/desktop/src/renderer/components/meeting/MarkdownRenderer.tsx
@@ -18,7 +18,7 @@ const components: Components = {
       sx={{
         fontSize: d3roTypo.value.size,
         fontWeight: 600,
-        color: d3roPalette.accent.amber,
+        color: d3roPalette.accent.main,
         mt: 2,
         mb: 1,
         borderBottom: `1px solid ${d3roPalette.border.default}`,
@@ -90,7 +90,7 @@ const components: Components = {
             sx={{
               fontFamily: d3roFontMono,
               fontSize: d3roTypo.compact.size,
-              color: d3roPalette.accent.amber,
+              color: d3roPalette.accent.main,
             }}
           >
             {children}
@@ -104,7 +104,7 @@ const components: Components = {
         sx={{
           fontFamily: d3roFontMono,
           fontSize: d3roTypo.compact.size,
-          color: d3roPalette.accent.amber,
+          color: d3roPalette.accent.main,
           bgcolor: d3roPalette.bg.inset,
           px: 0.5,
           py: 0.25,
@@ -174,7 +174,7 @@ const components: Components = {
     <Box
       component="blockquote"
       sx={{
-        borderLeft: `3px solid ${d3roPalette.accent.amber}`,
+        borderLeft: `3px solid ${d3roPalette.accent.main}`,
         pl: 1.5,
         ml: 0,
         my: 0.75,
diff --git a/apps/desktop/src/renderer/components/meeting/MeetingChatPanel.tsx b/apps/desktop/src/renderer/components/meeting/MeetingChatPanel.tsx
index afce403..8b201da 100644
--- a/apps/desktop/src/renderer/components/meeting/MeetingChatPanel.tsx
+++ b/apps/desktop/src/renderer/components/meeting/MeetingChatPanel.tsx
@@ -38,7 +38,7 @@ function TypingIndicator(): React.ReactElement {
             width: 4,
             height: 4,
             borderRadius: '50%',
-            bgcolor: d3roPalette.accent.amber,
+            bgcolor: d3roPalette.accent.main,
             animation: 'typing-dot 1.2s infinite',
             animationDelay: `${i * 0.2}s`,
             '@keyframes typing-dot': {
@@ -233,18 +233,18 @@ export function MeetingChatPanel({ sessionId }: MeetingChatPanelProps): React.Re
                       maxWidth: '80%',
                       px: 1.25,
                       py: 0.5,
-                      borderRadius: '6px',
+                      borderRadius: d3roRadius.xs,
                       fontFamily: d3roFontMono,
                       fontSize: d3roTypo.compact.size,
                       lineHeight: 1.5,
                       bgcolor:
                         msg.role === 'user'
-                          ? d3roPalette.accent.amberDim
+                          ? d3roPalette.accent.dim
                           : d3roPalette.bg.elevated,
                       color: d3roPalette.text.primary,
                       border: `1px solid ${
                         msg.role === 'user'
-                          ? d3roPalette.accent.amber
+                          ? d3roPalette.accent.main
                           : d3roPalette.border.subtle
                       }`,
                       wordBreak: 'break-word',
@@ -348,7 +348,7 @@ export function MeetingChatPanel({ sessionId }: MeetingChatPanelProps): React.Re
                   left: 0,
                   height: '100%',
                   width: '40%',
-                  bgcolor: d3roPalette.accent.amber,
+                  bgcolor: d3roPalette.accent.main,
                   borderRadius: 1,
                   animation: 'chat-progress 1.5s ease-in-out infinite',
                   '@keyframes chat-progress': {
@@ -386,7 +386,7 @@ export function MeetingChatPanel({ sessionId }: MeetingChatPanelProps): React.Re
                   fontFamily: d3roFontMono,
                   fontSize: d3roTypo.compact.size,
                   bgcolor: d3roPalette.bg.input,
-                  borderRadius: '4px',
+                  borderRadius: '4px', // P4: 토큰에 없는 4px 보존
                 },
                 '& .MuiOutlinedInput-notchedOutline': {
                   borderColor: d3roPalette.border.default,
@@ -395,7 +395,7 @@ export function MeetingChatPanel({ sessionId }: MeetingChatPanelProps): React.Re
                   borderColor: d3roPalette.border.strong,
                 },
                 '& .Mui-focused .MuiOutlinedInput-notchedOutline': {
-                  borderColor: d3roPalette.accent.amber,
+                  borderColor: d3roPalette.accent.main,
                 },
               }}
             />
diff --git a/apps/desktop/src/renderer/components/meeting/MeetingDetailTabs.tsx b/apps/desktop/src/renderer/components/meeting/MeetingDetailTabs.tsx
index 0cd3987..8e386f7 100644
--- a/apps/desktop/src/renderer/components/meeting/MeetingDetailTabs.tsx
+++ b/apps/desktop/src/renderer/components/meeting/MeetingDetailTabs.tsx
@@ -248,7 +248,7 @@ export function MeetingDetailTabs({
               autoFocus
             />
             <IconButton size="small" onClick={handleSaveTitle}>
-              <Check size={16} style={{ color: d3roPalette.accent.amber }} />
+              <Check size={16} style={{ color: d3roPalette.accent.main }} />
             </IconButton>
           </Box>
         ) : (
@@ -290,9 +290,9 @@ export function MeetingDetailTabs({
               color: d3roPalette.text.inactive,
               textTransform: 'uppercase',
               letterSpacing: '1px',
-              '&.Mui-selected': { color: d3roPalette.accent.amber },
+              '&.Mui-selected': { color: d3roPalette.accent.main },
             },
-            '& .MuiTabs-indicator': { bgcolor: d3roPalette.accent.amber, height: 2 },
+            '& .MuiTabs-indicator': { bgcolor: d3roPalette.accent.main, height: 2 },
           }}
         >
           <Tab label={t('meeting.transcriptTab')} />
diff --git a/apps/desktop/src/renderer/components/meeting/TranscriptTab.tsx b/apps/desktop/src/renderer/components/meeting/TranscriptTab.tsx
index 1537437..68ddf3f 100644
--- a/apps/desktop/src/renderer/components/meeting/TranscriptTab.tsx
+++ b/apps/desktop/src/renderer/components/meeting/TranscriptTab.tsx
@@ -109,8 +109,8 @@ export function TranscriptTab({
                 }
               }}
               sx={{
-                '& .MuiSwitch-thumb': { bgcolor: d3roPalette.accent.amber },
-                '& .Mui-checked + .MuiSwitch-track': { bgcolor: d3roPalette.accent.amberDim },
+                '& .MuiSwitch-thumb': { bgcolor: d3roPalette.accent.main },
+                '& .Mui-checked + .MuiSwitch-track': { bgcolor: d3roPalette.accent.dim },
               }}
             />
           }
@@ -159,7 +159,7 @@ export function TranscriptTab({
             height: 2,
             mb: 1,
             bgcolor: d3roPalette.bg.inset,
-            '& .MuiLinearProgress-bar': { bgcolor: d3roPalette.accent.amber },
+            '& .MuiLinearProgress-bar': { bgcolor: d3roPalette.accent.main },
           }}
         />
       )}
@@ -202,7 +202,7 @@ export function TranscriptTab({
                   gap: 1,
                   mb: 0.5,
                   pl: 0.5,
-                  borderLeft: `2px solid ${d3roPalette.accent.amberDim}`,
+                  borderLeft: `2px solid ${d3roPalette.accent.dim}`,
                 }}
               >
                 <Box
@@ -221,7 +221,7 @@ export function TranscriptTab({
                   component="span"
                   sx={{
                     fontSize: 12,
-                    color: d3roPalette.accent.amber,
+                    color: d3roPalette.accent.main,
                     fontFamily: d3roFontMono,
                   }}
                 >
diff --git a/apps/desktop/src/renderer/components/shared/HistoryEntryCard.tsx b/apps/desktop/src/renderer/components/shared/HistoryEntryCard.tsx
index 00e96c0..cda0fe1 100644
--- a/apps/desktop/src/renderer/components/shared/HistoryEntryCard.tsx
+++ b/apps/desktop/src/renderer/components/shared/HistoryEntryCard.tsx
@@ -204,7 +204,7 @@ export function HistoryEntryCard({ entry, onCopy, onDelete, showTags = false, on
                     borderRadius: d3roRadius.xs,
                     outline: 'none',
                     width: 100,
-                    '&:focus': { borderColor: d3roPalette.accent.amber },
+                    '&:focus': { borderColor: d3roPalette.accent.main },
                   }}
                 />
               ) : (
@@ -212,7 +212,7 @@ export function HistoryEntryCard({ entry, onCopy, onDelete, showTags = false, on
                   <IconButton
                     size="small"
                     onClick={() => setShowTagInput(true)}
-                    sx={{ p: 0.25, color: d3roPalette.text.muted, '&:hover': { color: d3roPalette.accent.amber } }}
+                    sx={{ p: 0.25, color: d3roPalette.text.muted, '&:hover': { color: d3roPalette.accent.main } }}
                   >
                     <Tag size={14} />
                   </IconButton>
@@ -227,7 +227,7 @@ export function HistoryEntryCard({ entry, onCopy, onDelete, showTags = false, on
               <IconButton
                 size="small"
                 onClick={() => onCopy(displayText)}
-                sx={{ color: d3roPalette.text.inactive, '&:hover': { color: d3roPalette.accent.amber } }}
+                sx={{ color: d3roPalette.text.inactive, '&:hover': { color: d3roPalette.accent.main } }}
               >
                 <Copy size={16} />
               </IconButton>
@@ -284,7 +284,7 @@ export function HistoryEntryCard({ entry, onCopy, onDelete, showTags = false, on
               )}
               <Box sx={{ display: 'flex', gap: 1, mt: 1 }}>
                 <Tooltip title={t('meetingSummary.exportMarkdown')} arrow>
-                  <IconButton size="small" onClick={handleExportSummary} sx={{ color: d3roPalette.text.inactive, '&:hover': { color: d3roPalette.accent.amber } }}>
+                  <IconButton size="small" onClick={handleExportSummary} sx={{ color: d3roPalette.text.inactive, '&:hover': { color: d3roPalette.accent.main } }}>
                     <ScrollText size={14} />
                   </IconButton>
                 </Tooltip>
@@ -301,7 +301,7 @@ export function HistoryEntryCard({ entry, onCopy, onDelete, showTags = false, on
                   sx={{
                     fontFamily: d3roFontMono,
                     fontSize: d3roTypo.micro.size,
-                    bgcolor: d3roPalette.accent.amber,
+                    bgcolor: d3roPalette.accent.main,
                     color: d3roPalette.bg.chassis,
                     cursor: 'pointer',
                     '&:hover': { opacity: 0.85 },
@@ -316,7 +316,7 @@ export function HistoryEntryCard({ entry, onCopy, onDelete, showTags = false, on
       {/* 요약 토글 버튼 (caption/file-transcription 모드만) */}
       {(entry.mode === 'caption' || entry.mode === 'file-transcription') && !summaryExpanded && !hasSummary && (
         <Box
-          sx={{ mt: 1, textAlign: 'center', cursor: 'pointer', color: d3roPalette.text.muted, '&:hover': { color: d3roPalette.accent.amber } }}
+          sx={{ mt: 1, textAlign: 'center', cursor: 'pointer', color: d3roPalette.text.muted, '&:hover': { color: d3roPalette.accent.main } }}
           onClick={handleToggleSummary}
         >
           <ChevronDown size={16} />
diff --git a/apps/desktop/src/renderer/pages/CommandsPage.tsx b/apps/desktop/src/renderer/pages/CommandsPage.tsx
index 5699752..7502bef 100644
--- a/apps/desktop/src/renderer/pages/CommandsPage.tsx
+++ b/apps/desktop/src/renderer/pages/CommandsPage.tsx
@@ -144,7 +144,7 @@ export function CommandsPage(): React.ReactElement {
               variant="value"
               sx={{
                 fontSize: d3roTypo.heading.size,
-                color: activeInstruction ? d3roPalette.accent.amber : d3roPalette.text.disabled,
+                color: activeInstruction ? d3roPalette.accent.main : d3roPalette.text.disabled,
               }}
             >
               {activeInstruction ? activeInstruction.name : t('commands.none')}
@@ -169,8 +169,8 @@ export function CommandsPage(): React.ReactElement {
                   onClick={() => handleActivate(inst.id)}
                   sx={{
                     cursor: 'pointer',
-                    borderRadius: '22px',
-                    border: isActive ? `2px solid ${d3roPalette.accent.amber}` : '2px solid transparent',
+                    borderRadius: '22px', // P4: 토큰에 없는 22px 보존 (pill은 999px)
+                    border: isActive ? `2px solid ${d3roPalette.accent.main}` : '2px solid transparent',
                     transition: 'border-color 0.15s ease',
                   }}
                 >
@@ -178,7 +178,7 @@ export function CommandsPage(): React.ReactElement {
                     <Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
                       <Box sx={{ display: 'flex', alignItems: 'center', gap: 1.5, flex: 1 }}>
                         {isActive ? (
-                          <CircleCheck size={16} style={{ color: d3roPalette.accent.amber }} />
+                          <CircleCheck size={16} style={{ color: d3roPalette.accent.main }} />
                         ) : (
                           <Led color={inst.isBuiltin ? 'amber' : 'green'} size={6} />
                         )}
@@ -186,7 +186,7 @@ export function CommandsPage(): React.ReactElement {
                           <Box sx={{
                             fontSize: d3roTypo.body.size,
                             fontWeight: d3roTypo.heading.weight,
-                            color: isActive ? d3roPalette.accent.amber : d3roPalette.text.primary,
+                            color: isActive ? d3roPalette.accent.main : d3roPalette.text.primary,
                           }}>
                             {inst.name}
                           </Box>
@@ -203,7 +203,7 @@ export function CommandsPage(): React.ReactElement {
                         <IconButton
                           size="small"
                           onClick={() => openEdit(inst)}
-                          sx={{ color: d3roPalette.text.inactive, '&:hover': { color: d3roPalette.accent.amber } }}
+                          sx={{ color: d3roPalette.text.inactive, '&:hover': { color: d3roPalette.accent.main } }}
                         >
                           <Pencil size={16} />
                         </IconButton>
@@ -346,14 +346,14 @@ function VoiceKeywordsSection({ instructions }: { instructions: CustomInstructio
                         px: 1, py: 0.25,
                         borderRadius: d3roRadius.xs,
                         outline: 'none', width: 120,
-                        '&:focus': { borderColor: d3roPalette.accent.amber },
+                        '&:focus': { borderColor: d3roPalette.accent.main },
                       }}
                     />
                   ) : (
                     <IconButton
                       size="small"
                       onClick={() => { setEditingRule(rule.instructionId); setKeywordInput('') }}
-                      sx={{ p: 0.25, color: d3roPalette.text.muted, '&:hover': { color: d3roPalette.accent.amber } }}
+                      sx={{ p: 0.25, color: d3roPalette.text.muted, '&:hover': { color: d3roPalette.accent.main } }}
                     >
                       <Plus size={14} />
                     </IconButton>
@@ -495,7 +495,7 @@ function ChainSection({ instructions }: { instructions: CustomInstruction[] }):
                     <Play size={16} />
                   </IconButton>
                   <IconButton size="small" onClick={() => openEdit(chain)}
-                    sx={{ color: d3roPalette.text.inactive, '&:hover': { color: d3roPalette.accent.amber } }}>
+                    sx={{ color: d3roPalette.text.inactive, '&:hover': { color: d3roPalette.accent.main } }}>
                     <Pencil size={16} />
                   </IconButton>
                   <IconButton size="small" onClick={() => handleDelete(chain.id)}
diff --git a/apps/desktop/src/renderer/pages/DictionaryPage.tsx b/apps/desktop/src/renderer/pages/DictionaryPage.tsx
index 936fee7..323f282 100644
--- a/apps/desktop/src/renderer/pages/DictionaryPage.tsx
+++ b/apps/desktop/src/renderer/pages/DictionaryPage.tsx
@@ -111,7 +111,7 @@ export function DictionaryPage(): React.ReactElement {
                 </Box>
                 <Box sx={{ display: 'flex', gap: 0.5 }}>
                   <IconButton size="small" onClick={() => openEdit(entry)}
-                    sx={{ color: d3roPalette.text.inactive, '&:hover': { color: d3roPalette.accent.amber } }}>
+                    sx={{ color: d3roPalette.text.inactive, '&:hover': { color: d3roPalette.accent.main } }}>
                     <Pencil size={16} />
                   </IconButton>
                   <IconButton size="small" onClick={() => { window.electronAPI.dictionary.delete({ id: entry.id }); loadData() }}
diff --git a/apps/desktop/src/renderer/pages/HistoryPage.tsx b/apps/desktop/src/renderer/pages/HistoryPage.tsx
index 97eb46b..72969a6 100644
--- a/apps/desktop/src/renderer/pages/HistoryPage.tsx
+++ b/apps/desktop/src/renderer/pages/HistoryPage.tsx
@@ -94,7 +94,7 @@ export function HistoryPage(): React.ReactElement {
               <IconButton
                 size="small"
                 onClick={handleExport}
-                sx={{ color: d3roPalette.text.inactive, '&:hover': { color: d3roPalette.accent.amber } }}
+                sx={{ color: d3roPalette.text.inactive, '&:hover': { color: d3roPalette.accent.main } }}
               >
                 <Download size={18} />
               </IconButton>
@@ -121,11 +121,11 @@ export function HistoryPage(): React.ReactElement {
                 fontFamily: d3roFontMono,
                 fontSize: d3roTypo.micro.size,
                 borderRadius: d3roRadius.small,
-                borderColor: activeTag === tc.tag ? d3roPalette.accent.amber : d3roPalette.border.subtle,
-                bgcolor: activeTag === tc.tag ? d3roPalette.accent.amber : 'transparent',
+                borderColor: activeTag === tc.tag ? d3roPalette.accent.main : d3roPalette.border.subtle,
+                bgcolor: activeTag === tc.tag ? d3roPalette.accent.main : 'transparent',
                 color: activeTag === tc.tag ? d3roPalette.bg.card : d3roPalette.text.secondary,
                 '&:hover': {
-                  bgcolor: activeTag === tc.tag ? d3roPalette.accent.amber : d3roPalette.bg.cardHover,
+                  bgcolor: activeTag === tc.tag ? d3roPalette.accent.main : d3roPalette.bg.cardHover,
                 },
               }}
             />
diff --git a/apps/desktop/src/renderer/pages/KnowledgeBasePage.tsx b/apps/desktop/src/renderer/pages/KnowledgeBasePage.tsx
index 56c0333..42edeff 100644
--- a/apps/desktop/src/renderer/pages/KnowledgeBasePage.tsx
+++ b/apps/desktop/src/renderer/pages/KnowledgeBasePage.tsx
@@ -112,7 +112,7 @@ export function KnowledgeBasePage(): React.ReactElement {
               height: 4,
               borderRadius: 2,
               bgcolor: d3roPalette.bg.inset,
-              '& .MuiLinearProgress-bar': { bgcolor: d3roPalette.accent.amber },
+              '& .MuiLinearProgress-bar': { bgcolor: d3roPalette.accent.main },
             }}
           />
           <PhosphorText variant="dim" sx={{ mt: 0.5 }}>
@@ -170,7 +170,7 @@ export function KnowledgeBasePage(): React.ReactElement {
                 </Box>
                 <Tooltip title={t('rag.reindex')}>
                   <IconButton size="small" onClick={() => handleReindex(doc.id)}
-                    sx={{ color: d3roPalette.text.inactive, '&:hover': { color: d3roPalette.accent.amber } }}>
+                    sx={{ color: d3roPalette.text.inactive, '&:hover': { color: d3roPalette.accent.main } }}>
                     <RefreshCw size={16} />
                   </IconButton>
                 </Tooltip>
@@ -207,13 +207,13 @@ export function KnowledgeBasePage(): React.ReactElement {
                 fontSize: d3roTypo.compact.size,
                 bgcolor: d3roPalette.bg.inset,
                 '& fieldset': { borderColor: d3roPalette.border.subtle },
-                '&:hover fieldset': { borderColor: d3roPalette.accent.amber },
+                '&:hover fieldset': { borderColor: d3roPalette.accent.main },
               },
               '& .MuiOutlinedInput-input': { color: d3roPalette.text.primary },
             }}
           />
           <IconButton onClick={handleQuery} disabled={!query.trim() || querying}
-            sx={{ color: query.trim() ? d3roPalette.accent.amber : d3roPalette.text.inactive }}>
+            sx={{ color: query.trim() ? d3roPalette.accent.main : d3roPalette.text.inactive }}>
             <Send size={20} />
           </IconButton>
         </Box>
diff --git a/apps/desktop/src/renderer/pages/MeetingModePage.tsx b/apps/desktop/src/renderer/pages/MeetingModePage.tsx
index ca88567..c38c24c 100644
--- a/apps/desktop/src/renderer/pages/MeetingModePage.tsx
+++ b/apps/desktop/src/renderer/pages/MeetingModePage.tsx
@@ -315,7 +315,7 @@ export function MeetingModePage(): React.ReactElement {
                         height: 3,
                         borderRadius: 2,
                         bgcolor: d3roPalette.bg.inset,
-                        '& .MuiLinearProgress-bar': { bgcolor: d3roPalette.accent.amber },
+                        '& .MuiLinearProgress-bar': { bgcolor: d3roPalette.accent.main },
                       }}
                     />
                     <PhosphorText variant="dim" sx={{ mt: 0.5, fontSize: d3roTypo.nano.size }}>
diff --git a/apps/desktop/src/renderer/pages/VoiceConversationPage.tsx b/apps/desktop/src/renderer/pages/VoiceConversationPage.tsx
index 1dd28da..b7109b4 100644
--- a/apps/desktop/src/renderer/pages/VoiceConversationPage.tsx
+++ b/apps/desktop/src/renderer/pages/VoiceConversationPage.tsx
@@ -227,9 +227,9 @@ export function VoiceConversationPage(): React.ReactElement {
               <PhosphorText
                 variant="micro"
                 sx={{
-                  color: d3roPalette.accent.amber,
-                  border: `1px solid ${d3roPalette.accent.amber}`,
-                  borderRadius: '3px',
+                  color: d3roPalette.accent.main,
+                  border: `1px solid ${d3roPalette.accent.main}`,
+                  borderRadius: '3px', // P4: 토큰에 없는 3px 보존
                   px: 0.5,
                   lineHeight: 1.6,
                 }}
@@ -300,7 +300,7 @@ export function VoiceConversationPage(): React.ReactElement {
                 sx={{
                   maxWidth: '75%',
                   ...(msg.role === 'user' && {
-                    bgcolor: d3roPalette.accent.amber,
+                    bgcolor: d3roPalette.accent.main,
                     '& *': { color: `${d3roPalette.bg.chassis} !important` },
                   }),
                 }}
@@ -331,7 +331,7 @@ export function VoiceConversationPage(): React.ReactElement {
                       width: 6,
                       height: 6,
                       borderRadius: '50%',
-                      bgcolor: d3roPalette.accent.amber,
+                      bgcolor: d3roPalette.accent.main,
                       animation: 'd3roTypingBounce 1.2s infinite ease-in-out',
                     },
                     '& > span:nth-of-type(2)': { animationDelay: '0.15s' },
@@ -356,7 +356,7 @@ export function VoiceConversationPage(): React.ReactElement {
               <MetalCard sx={{ maxWidth: '75%' }}>
                 <PhosphorText variant="compact" sx={{ whiteSpace: 'pre-wrap', lineHeight: 1.6 }}>
                   {streamingText}
-                  <Box component="span" sx={{ animation: 'blink 1s infinite', color: d3roPalette.accent.amber }}>
+                  <Box component="span" sx={{ animation: 'blink 1s infinite', color: d3roPalette.accent.main }}>
                     {'▌'}
                   </Box>
                 </PhosphorText>
@@ -414,8 +414,8 @@ export function VoiceConversationPage(): React.ReactElement {
                   fontSize: d3roTypo.compact.size,
                   bgcolor: d3roPalette.bg.inset,
                   '& fieldset': { borderColor: d3roPalette.border.subtle },
-                  '&:hover fieldset': { borderColor: d3roPalette.accent.amber },
-                  '&.Mui-focused fieldset': { borderColor: d3roPalette.accent.amber },
+                  '&:hover fieldset': { borderColor: d3roPalette.accent.main },
+                  '&.Mui-focused fieldset': { borderColor: d3roPalette.accent.main },
                 },
                 '& .MuiOutlinedInput-input': {
                   color: d3roPalette.text.primary,
@@ -431,7 +431,7 @@ export function VoiceConversationPage(): React.ReactElement {
               disabled={!textInput.trim() || state === 'thinking' || state === 'speaking'}
               sx={{
                 color: textInput.trim() && state !== 'thinking' && state !== 'speaking'
-                  ? d3roPalette.accent.amber
+                  ? d3roPalette.accent.main
                   : d3roPalette.text.inactive,
               }}
             >