From d7074e359d7e9e98f5d0a21b25824b816143ae0b Mon Sep 17 00:00:00 2001
From: Yun Chan <yunchan@twentyoz.kr>
Date: Sun, 5 Apr 2026 12:09:25 +0900
Subject: [PATCH] =?UTF-8?q?Settings=20UI=20=EC=A0=95=EB=B0=80=EA=B8=B0?=
 =?UTF-8?q?=EA=B8=B0=20=EB=94=94=EC=9E=90=EC=9D=B8=20=EC=A0=81=EC=9A=A9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Dialog: 메탈 섀시 배경(#242528), 인셋 그림자, amber 타이틀
- Tabs: 사이드바 배경, 모노폰트, amber indicator
- VoiceModeCard: 인셋 패널 스타일 (inset shadow), 모노폰트 라벨
- 전체: d3roPalette + d3roFontMono 일관 적용
---
 src/renderer/components/SettingsModal.tsx | 87 ++++++++++++++++++-----
 1 file changed, 71 insertions(+), 16 deletions(-)

diff --git a/src/renderer/components/SettingsModal.tsx b/src/renderer/components/SettingsModal.tsx
index fb977e8..a937d41 100644
--- a/src/renderer/components/SettingsModal.tsx
+++ b/src/renderer/components/SettingsModal.tsx
@@ -27,9 +27,9 @@ import {
 import CloseIcon from '@mui/icons-material/Close'
 import KeyboardIcon from '@mui/icons-material/Keyboard'
 import EditIcon from '@mui/icons-material/Edit'
-import { d3roPalette } from '../theme'
-import { HotkeyRecordModal } from './HotkeyRecordModal'
 import MicIcon from '@mui/icons-material/Mic'
+import { d3roPalette, d3roFontMono } from '../theme'
+import { HotkeyRecordModal } from './HotkeyRecordModal'
 import type { ThemeMode, AppConfig, HotkeyBinding, AudioDevice } from '@shared/types'
 
 interface SettingsModalProps {
@@ -115,15 +115,19 @@ function VoiceModeCard({
       elevation={0}
       sx={{
         p: 2,
-        bgcolor: d3roPalette.bg.card,
-        borderRadius: '12px',
-        border: `1px solid ${d3roPalette.border.subtle}`,
+        bgcolor: d3roPalette.bg.inset,
+        borderRadius: '10px',
+        border: 'none',
+        boxShadow: `inset 0 2px 6px rgba(0,0,0,0.4), 0 1px 1px rgba(255,255,255,0.04)`,
       }}
     >
       <Box sx={{ display: 'flex', alignItems: 'flex-start', justifyContent: 'space-between' }}>
         <Box sx={{ flex: 1 }}>
           <Box sx={{ display: 'flex', alignItems: 'center', gap: 1, mb: 0.5 }}>
-            <Typography variant="subtitle2" sx={{ fontWeight: 600 }}>
+            <Typography
+              variant="subtitle2"
+              sx={{ fontWeight: 700, fontFamily: d3roFontMono, fontSize: '12px', letterSpacing: '0.5px' }}
+            >
               {title}
             </Typography>
             <FormControlLabel
@@ -158,7 +162,7 @@ function VoiceModeCard({
               sx={{ ml: 0, mr: 0 }}
             />
           </Box>
-          <Typography variant="body2" sx={{ color: d3roPalette.text.secondary, fontSize: '12px' }}>
+          <Typography variant="body2" sx={{ color: d3roPalette.text.inactive, fontSize: '11px' }}>
             {description}
           </Typography>
         </Box>
@@ -269,22 +273,72 @@ export function SettingsModal({ open, onClose }: SettingsModalProps): React.Reac
 
   return (
     <>
-      <Dialog open={open} onClose={onClose} fullWidth maxWidth="sm" disableEnforceFocus>
-        <DialogTitle sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', fontWeight: 700 }}>
-          설정
-          <IconButton onClick={onClose} size="small" sx={{ color: d3roPalette.text.label }}>
-            <CloseIcon />
+      <Dialog
+        open={open}
+        onClose={onClose}
+        fullWidth
+        maxWidth="sm"
+        disableEnforceFocus
+        PaperProps={{
+          sx: {
+            bgcolor: d3roPalette.bg.chassis,
+            backgroundImage: 'none',
+            border: `1px solid ${d3roPalette.border.subtle}`,
+            boxShadow: `0 40px 80px -20px rgba(0,0,0,0.8), inset 0 1px 1px rgba(255,255,255,0.08)`,
+          },
+        }}
+      >
+        <DialogTitle
+          sx={{
+            display: 'flex',
+            justifyContent: 'space-between',
+            alignItems: 'center',
+            fontFamily: d3roFontMono,
+            fontWeight: 700,
+            fontSize: '14px',
+            letterSpacing: '1px',
+            textTransform: 'uppercase',
+            color: d3roPalette.accent.amber,
+            py: 1.5,
+          }}
+        >
+          Settings
+          <IconButton onClick={onClose} size="small" sx={{ color: d3roPalette.text.inactive }}>
+            <CloseIcon sx={{ fontSize: 18 }} />
           </IconButton>
         </DialogTitle>
         <Divider sx={{ borderColor: d3roPalette.border.subtle }} />
-        <DialogContent>
-          <Tabs value={activeTab} onChange={(_, v: number) => setActiveTab(v)}>
-            <Tab label="일반" icon={<KeyboardIcon sx={{ fontSize: 16 }} />} iconPosition="start" />
-            <Tab label="오디오" />
+        <DialogContent sx={{ bgcolor: d3roPalette.bg.app, p: 0 }}>
+          <Tabs
+            value={activeTab}
+            onChange={(_, v: number) => setActiveTab(v)}
+            variant="scrollable"
+            scrollButtons={false}
+            sx={{
+              bgcolor: d3roPalette.bg.sidebar,
+              borderBottom: `1px solid ${d3roPalette.border.subtle}`,
+              minHeight: 40,
+              '& .MuiTab-root': {
+                fontFamily: d3roFontMono,
+                fontSize: '11px',
+                fontWeight: 700,
+                letterSpacing: '0.5px',
+                textTransform: 'uppercase',
+                color: d3roPalette.text.inactive,
+                minHeight: 40,
+                py: 1,
+                '&.Mui-selected': { color: d3roPalette.accent.amber },
+              },
+              '& .MuiTabs-indicator': { bgcolor: d3roPalette.accent.amber, height: 2 },
+            }}
+          >
+            <Tab label="일반" icon={<KeyboardIcon sx={{ fontSize: 14 }} />} iconPosition="start" />
+            <Tab label="오디오" icon={<MicIcon sx={{ fontSize: 14 }} />} iconPosition="start" />
             <Tab label="STT" />
             <Tab label="LLM" />
             <Tab label="정보" />
           </Tabs>
+          <Box sx={{ p: 3 }}>
 
           {/* ── 일반 탭 ─────────────────────────────── */}
           <TabPanel value={activeTab} index={0}>
@@ -554,6 +608,7 @@ export function SettingsModal({ open, onClose }: SettingsModalProps): React.Reac
               </Typography>
             </Box>
           </TabPanel>
+          </Box>
         </DialogContent>
       </Dialog>