feat: [설정] 설정 관리 전반 UI 개선

- 계정관리 상세/폼 개선 (AccountDetail, AccountDetailForm)
- 근태설정, 휴가정책 관리 개선
- 바로빌 연동 회원가입 모달 개선
- 알림설정, 결제이력, 권한관리 UI 개선
- 직급/직책 관리 UI 개선 (RankManagement, TitleManagement)
- 구독관리, 근무스케줄 관리 개선

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

src/components/settings/NotificationSettings/index.tsx

@@ -68,41 +68,43 @@ function NotificationItemRow({ label, item, onChange, disabled }: NotificationIt
         </div>
 
         {/* 알림 소리 선택 */}
-        <div className="flex items-center gap-2 pl-2">
-          <span className="text-sm text-muted-foreground min-w-[80px]">알림 소리 선택</span>
-          <Select
-            value={item.soundType}
-            onValueChange={(value: SoundType) =>
-              onChange({ ...item, soundType: value })
-            }
-            disabled={isDisabled}
-          >
-            <SelectTrigger className="min-w-[140px] w-auto h-8">
-              <SelectValue />
-            </SelectTrigger>
-            <SelectContent>
-              {SOUND_OPTIONS.map((option) => (
-                <SelectItem key={option.value} value={option.value}>
-                  {option.label}
-                </SelectItem>
-              ))}
-            </SelectContent>
-          </Select>
-          <Button
-            type="button"
-            variant="outline"
-            size="icon"
-            className="h-8 w-8"
-            onClick={() => playPreviewSound(item.soundType)}
-            disabled={isDisabled}
-          >
-            <Play className="h-3 w-3" />
-          </Button>
+        <div className="space-y-1 pl-2">
+          <span className="text-xs text-muted-foreground">알림 소리 선택</span>
+          <div className="flex items-center gap-2">
+            <Select
+              value={item.soundType}
+              onValueChange={(value: SoundType) =>
+                onChange({ ...item, soundType: value })
+              }
+              disabled={isDisabled}
+            >
+              <SelectTrigger className="flex-1 sm:w-[140px] sm:flex-none h-8">
+                <SelectValue />
+              </SelectTrigger>
+              <SelectContent>
+                {SOUND_OPTIONS.map((option) => (
+                  <SelectItem key={option.value} value={option.value}>
+                    {option.label}
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+            <Button
+              type="button"
+              variant="outline"
+              size="icon"
+              className="h-8 w-8 shrink-0"
+              onClick={() => playPreviewSound(item.soundType)}
+              disabled={isDisabled}
+            >
+              <Play className="h-3 w-3" />
+            </Button>
+          </div>
         </div>
 
         {/* 추가 알림 선택 */}
-        <div className="flex items-center gap-2 pl-2">
-          <span className="text-sm text-muted-foreground min-w-[80px]">추가 알림 선택</span>
+        <div className="space-y-1 pl-2">
+          <span className="text-xs text-muted-foreground">추가 알림 선택</span>
           <label className="flex items-center gap-2 cursor-pointer">
             <Checkbox
               checked={item.email}
@@ -131,7 +133,7 @@ function NotificationSection({ title, enabled, onEnabledChange, children }: Noti
 
   return (
     <Card>
-      <div className="flex items-center justify-between px-6 pt-6 pb-3">
+      <div className="flex items-center justify-between px-4 sm:px-6 pt-4 sm:pt-6 pb-3">
         <CardTitle className="text-base font-medium">{title}</CardTitle>
         <Switch
           checked={enabled}
@@ -140,8 +142,8 @@ function NotificationSection({ title, enabled, onEnabledChange, children }: Noti
           }}
         />
       </div>
-      <CardContent className="pt-0">
-        <div className="pl-4">
+      <CardContent className="pt-0 px-4 sm:px-6">
+        <div className="pl-0 sm:pl-4">
           {children}
         </div>
       </CardContent>