feat(ui): Midnight Glass v2 마감 — lucide 아이콘 통일 + 몰입 패널 웨이브 + 팝업 정합

- @mui/icons-material → lucide-react 전환 (23파일, 잔여 0)
- VoiceRecordingPanel: 9바 DOM 웨이브 → GradientWave (canvas)
- Vanilla 팝업 5종 style.css v2 정합 (글래스 네이비/헤어라인/블루,
  CSS 변수 주입 구조 유지 — 테마 반응형 보존)

apps/desktop/src/renderer/components/TemplateSection.tsx

@@ -3,10 +3,7 @@
 
 import { useState, useEffect, useCallback } from 'react'
 import { Box, Button, IconButton, Dialog, DialogTitle, DialogContent, DialogActions, TextField, Tooltip } from '@mui/material'
-import AddIcon from '@mui/icons-material/Add'
-import DeleteIcon from '@mui/icons-material/Delete'
-import EditIcon from '@mui/icons-material/Edit'
-import PlayArrowIcon from '@mui/icons-material/PlayArrow'
+import { Plus, Trash2, Pencil, Play } from 'lucide-react'
 import { MetalCard, PhosphorText, Led, PhysicalButton } from '@d3ro/ui/components/ds'
 import { PageHeader, EmptyStateCard } from './shared'
 import { d3roPalette, d3roFontMono, d3roTypo, d3roRadius } from '@d3ro/ui/theme'
@@ -128,7 +125,7 @@ export function TemplateSection(): React.ReactElement {
         title={t('template.title').toUpperCase()}
         action={
           <PhysicalButton size="small" onClick={openCreate}>
-            <AddIcon sx={{ fontSize: 14, mr: 0.5 }} /> {t('template.create')}
+            <Plus size={14} style={{ marginRight: 4 }} /> {t('template.create')}
           </PhysicalButton>
         }
       />
@@ -182,7 +179,7 @@ export function TemplateSection(): React.ReactElement {
                       disabled={!!session}
                       sx={{ color: d3roPalette.accent.amber, '&:hover': { opacity: 0.8 } }}
                     >
-                      <PlayArrowIcon sx={{ fontSize: 18 }} />
+                      <Play size={18} />
                     </IconButton>
                   </Tooltip>
                   <IconButton
@@ -190,7 +187,7 @@ export function TemplateSection(): React.ReactElement {
                     onClick={() => openEdit(tmpl)}
                     sx={{ color: d3roPalette.text.inactive, '&:hover': { color: d3roPalette.accent.amber } }}
                   >
-                    <EditIcon sx={{ fontSize: 16 }} />
+                    <Pencil size={16} />
                   </IconButton>
                   {!tmpl.isBuiltin && (
                     <IconButton
@@ -198,7 +195,7 @@ export function TemplateSection(): React.ReactElement {
                       onClick={() => handleDelete(tmpl.id)}
                       sx={{ color: d3roPalette.text.inactive, '&:hover': { color: d3roPalette.tag.red } }}
                     >
-                      <DeleteIcon sx={{ fontSize: 16 }} />
+                      <Trash2 size={16} />
                     </IconButton>
                   )}
                 </Box>
@@ -260,12 +257,12 @@ export function TemplateSection(): React.ReactElement {
                 disabled={formFields.length <= 1}
                 sx={{ color: d3roPalette.text.inactive }}
               >
-                <DeleteIcon sx={{ fontSize: 16 }} />
+                <Trash2 size={16} />
               </IconButton>
             </Box>
           ))}
 
-          <Button onClick={addField} startIcon={<AddIcon />} size="small" sx={{ alignSelf: 'flex-start' }}>
+          <Button onClick={addField} startIcon={<Plus size={16} />} size="small" sx={{ alignSelf: 'flex-start' }}>
             {t('template.addField')}
           </Button>