diff --git a/src/pages/music/MusicStudio.css b/src/pages/music/MusicStudio.css
index 89df6ed..3c7adff 100644
--- a/src/pages/music/MusicStudio.css
+++ b/src/pages/music/MusicStudio.css
@@ -2426,3 +2426,26 @@
         animation: none !important;
     }
 }
+
+/* ── Phase 1: Credits Badge ─────────────────────────────── */
+.ms-credits-badge {
+    display: inline-flex; align-items: center; gap: 6px;
+    padding: 6px 14px; border-radius: 20px;
+    background: rgba(245, 166, 35, 0.1);
+    border: 1px solid rgba(245, 166, 35, 0.25);
+    font-family: 'Courier Prime', monospace;
+    font-size: 0.85rem; color: var(--ms-accent);
+}
+.ms-credits-badge__icon { font-size: 1rem; }
+.ms-credits-badge__value { font-weight: 700; font-size: 1.1rem; }
+.ms-credits-badge__label { color: var(--ms-muted); font-size: 0.75rem; text-transform: uppercase; }
+.ms-credits-badge.is-low {
+    background: rgba(231, 76, 60, 0.15);
+    border-color: rgba(231, 76, 60, 0.4);
+    color: #e74c3c;
+    animation: pulse-badge 1.5s ease-in-out infinite;
+}
+@keyframes pulse-badge {
+    0%, 100% { opacity: 1; }
+    50% { opacity: 0.6; }
+}
diff --git a/src/pages/music/MusicStudio.jsx b/src/pages/music/MusicStudio.jsx
index fb0d61d..57ef7eb 100644
--- a/src/pages/music/MusicStudio.jsx
+++ b/src/pages/music/MusicStudio.jsx
@@ -7,15 +7,14 @@ import {
     getMusicProviders,
     getMusicStatus,
     getMusicModels,
-    getMusicCredits,
     extendMusicTrack,
     removeVocals,
-    getSavedLyrics,
-    saveLyrics,
-    updateLyrics,
-    deleteLyrics,
 } from '../../api';
 import './MusicStudio.css';
+import AudioPlayer from './components/AudioPlayer';
+import { fmtTime } from './components/AudioPlayer';
+import CreditsBadge from './components/CreditsBadge';
+import LyricsTab from './components/LyricsTab';
 
 /* ─────────────────────────────────────────────
    데이터 상수
@@ -83,12 +82,6 @@ const SIM_STEPS = [
     { msg: 'Track ready!',                   pct: 100 },
 ];
 
-/* ─────────────────────────────────────────────
-   유틸
-───────────────────────────────────────────── */
-const pad = (n) => String(Math.floor(n)).padStart(2, '0');
-const fmtTime = (s) => `${pad(s / 60)}:${pad(s % 60)}`;
-
 /* ─────────────────────────────────────────────
    Loading Skeleton
 ───────────────────────────────────────────── */
@@ -261,125 +254,6 @@ const GenerationProgress = ({ progress, stepMsg }) => (
     </div>
 );
 
-/* ─────────────────────────────────────────────
-   Audio Player (실제 <audio> 기반)
-───────────────────────────────────────────── */
-const AudioPlayer = ({ audioUrl, totalSec, accentColor }) => {
-    const audioRef   = useRef(null);
-    const [playing, setPlaying]   = useState(false);
-    const [elapsed, setElapsed]   = useState(0);
-    const [duration, setDuration] = useState(totalSec ?? 0);
-    const [volume, setVolume]     = useState(1);
-
-    /* 실제 오디오가 없으면 가짜 타이머로 폴백 */
-    const isFake = !audioUrl;
-    const timerRef = useRef(null);
-
-    const total = duration || totalSec || 60;
-
-    const togglePlay = () => {
-        if (isFake) {
-            if (playing) {
-                clearInterval(timerRef.current);
-                setPlaying(false);
-            } else {
-                setPlaying(true);
-                timerRef.current = setInterval(() => {
-                    setElapsed((e) => {
-                        if (e >= total - 1) {
-                            clearInterval(timerRef.current);
-                            setPlaying(false);
-                            return 0;
-                        }
-                        return e + 1;
-                    });
-                }, 1000);
-            }
-            return;
-        }
-        const el = audioRef.current;
-        if (!el) return;
-        playing ? el.pause() : el.play();
-    };
-
-    const handleSeek = (e) => {
-        const rect  = e.currentTarget.getBoundingClientRect();
-        const ratio = (e.clientX - rect.left) / rect.width;
-        const newTime = ratio * total;
-        if (!isFake && audioRef.current) {
-            audioRef.current.currentTime = newTime;
-        }
-        setElapsed(newTime);
-    };
-
-    const handleVolumeChange = (e) => {
-        const v = Number(e.target.value);
-        setVolume(v);
-        if (!isFake && audioRef.current) audioRef.current.volume = v;
-    };
-
-    useEffect(() => () => clearInterval(timerRef.current), []);
-
-    const progress = (elapsed / total) * 100;
-
-    return (
-        <div className="ms-audio-player" style={{ '--player-accent': accentColor }}>
-            {!isFake && (
-                <audio
-                    ref={audioRef}
-                    src={audioUrl}
-                    onLoadedMetadata={(e) => setDuration(e.target.duration)}
-                    onTimeUpdate={(e) => setElapsed(e.target.currentTime)}
-                    onPlay={() => setPlaying(true)}
-                    onPause={() => setPlaying(false)}
-                    onEnded={() => { setPlaying(false); setElapsed(0); }}
-                />
-            )}
-            <button
-                type="button"
-                className={`ms-player__play ${playing ? 'is-playing' : ''}`}
-                onClick={togglePlay}
-                aria-label={playing ? '일시정지' : '재생'}
-            >
-                {playing ? (
-                    <svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor">
-                        <rect x="3" y="2" width="4" height="12" rx="1" />
-                        <rect x="9" y="2" width="4" height="12" rx="1" />
-                    </svg>
-                ) : (
-                    <svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor">
-                        <path d="M4 2l10 6-10 6V2z" />
-                    </svg>
-                )}
-            </button>
-
-            <div className="ms-player__timeline">
-                <div className="ms-player__bar" onClick={handleSeek} role="slider"
-                     aria-label="재생 위치" aria-valuenow={Math.round(elapsed)} aria-valuemin={0} aria-valuemax={Math.round(total)}>
-                    <div className="ms-player__fill" style={{ width: `${progress}%` }} />
-                    <div className="ms-player__thumb" style={{ left: `${progress}%` }} />
-                </div>
-                <div className="ms-player__times">
-                    <span>{fmtTime(elapsed)}</span>
-                    <span>{fmtTime(total)}</span>
-                </div>
-            </div>
-
-            <div className="ms-volume">
-                <svg width="14" height="14" viewBox="0 0 14 14" fill="currentColor" aria-hidden>
-                    <path d="M2 5h2.5l3-3v10l-3-3H2V5zm8.5-1.5a4.5 4.5 0 010 7" stroke="currentColor" strokeWidth="1.2" fill="none" strokeLinecap="round"/>
-                </svg>
-                <input
-                    type="range" min={0} max={1} step={0.02} value={volume}
-                    onChange={handleVolumeChange}
-                    className="ms-volume__slider"
-                    aria-label="볼륨"
-                />
-            </div>
-        </div>
-    );
-};
-
 /* ─────────────────────────────────────────────
    Track Result Card
 ───────────────────────────────────────────── */
@@ -611,241 +485,6 @@ const Library = ({ tracks, onDelete, onRefresh, onExtend, onVocalRemoval, isGene
     );
 };
 
-/* ─────────────────────────────────────────────
-   Lyrics Tab
-───────────────────────────────────────────── */
-const LyricsTab = ({ onUseInCreate }) => {
-    const [lyrPrompt, setLyrPrompt]     = useState('');
-    const [lyrLoading, setLyrLoading]   = useState(false);
-    const [lyrError, setLyrError]       = useState(null);
-    const [copied, setCopied]           = useState(null);  // id
-    const [saved, setSaved]             = useState([]);     // DB에 저장된 가사
-    const [loadingSaved, setLoadingSaved] = useState(true);
-    const [editingId, setEditingId]     = useState(null);
-    const [editTitle, setEditTitle]     = useState('');
-    const [editText, setEditText]       = useState('');
-
-    /* ── 저장된 가사 로드 ── */
-    useEffect(() => {
-        setLoadingSaved(true);
-        getSavedLyrics()
-            .then((data) => setSaved(data.lyrics ?? []))
-            .catch(() => {})
-            .finally(() => setLoadingSaved(false));
-    }, []);
-
-    /* ── AI 생성 → 즉시 저장 ── */
-    const handleGenerate = async () => {
-        if (!lyrPrompt.trim() || lyrLoading) return;
-        setLyrLoading(true);
-        setLyrError(null);
-        try {
-            const res = await generateMusicLyrics(lyrPrompt.trim());
-            if (res?.text) {
-                const record = await saveLyrics({
-                    title: res.title || '',
-                    text: res.text,
-                    prompt: lyrPrompt.trim(),
-                });
-                setSaved((prev) => [record, ...prev]);
-            } else {
-                setLyrError('가사 생성 결과가 없습니다');
-            }
-        } catch (e) {
-            setLyrError(e.message || '가사 생성에 실패했습니다');
-        } finally {
-            setLyrLoading(false);
-        }
-    };
-
-    /* ── 복사 ── */
-    const handleCopy = (text, id) => {
-        navigator.clipboard.writeText(text).then(() => {
-            setCopied(id);
-            setTimeout(() => setCopied(null), 2000);
-        });
-    };
-
-    /* ── 삭제 ── */
-    const handleDelete = async (id) => {
-        try {
-            await deleteLyrics(id);
-            setSaved((prev) => prev.filter((l) => l.id !== id));
-        } catch {}
-    };
-
-    /* ── 수정 시작 ── */
-    const startEdit = (item) => {
-        setEditingId(item.id);
-        setEditTitle(item.title);
-        setEditText(item.text);
-    };
-
-    /* ── 수정 저장 ── */
-    const handleSaveEdit = async () => {
-        if (editingId == null) return;
-        try {
-            const updated = await updateLyrics(editingId, { title: editTitle, text: editText });
-            setSaved((prev) => prev.map((l) => l.id === editingId ? updated : l));
-            setEditingId(null);
-        } catch {}
-    };
-
-    /* ── 수정 취소 ── */
-    const cancelEdit = () => setEditingId(null);
-
-    return (
-        <div className="ms-lyrics-tab">
-            <div className="ms-lyrics-tab__form">
-                <div className="ms-lyrics-tab__head">
-                    <h2 className="ms-lyrics-tab__title">AI Lyrics Generator</h2>
-                    <p className="ms-lyrics-tab__desc">
-                        원하는 분위기, 주제, 스타일을 설명하면 AI가 가사를 작성합니다.
-                    </p>
-                </div>
-
-                <div className="ms-lyrics-tab__input-wrap">
-                    <textarea
-                        className="ms-lyrics-tab__input"
-                        placeholder="예: 비 오는 밤, 혼자 걷는 도시의 거리를 배경으로 한 감성적인 발라드 가사"
-                        value={lyrPrompt}
-                        onChange={(e) => setLyrPrompt(e.target.value)}
-                        rows={3}
-                        maxLength={200}
-                        onKeyDown={(e) => { if (e.key === 'Enter' && !e.shiftKey) { e.preventDefault(); handleGenerate(); } }}
-                    />
-                    <div className="ms-lyrics-tab__input-footer">
-                        <span className="ms-lyrics-tab__count">{lyrPrompt.length}/200</span>
-                        <button
-                            type="button"
-                            className={`ms-btn ms-btn--accent ${lyrLoading ? 'is-loading' : ''}`}
-                            onClick={handleGenerate}
-                            disabled={!lyrPrompt.trim() || lyrLoading}
-                        >
-                            {lyrLoading ? (
-                                <><span className="ms-btn__spinner" /> 생성 중...</>
-                            ) : (
-                                '✨ 가사 생성'
-                            )}
-                        </button>
-                    </div>
-                </div>
-
-                {lyrError && (
-                    <div className="ms-error-banner">
-                        <span>⚠ {lyrError}</span>
-                    </div>
-                )}
-            </div>
-
-            {lyrLoading && (
-                <div className="ms-lyrics-tab__loading">
-                    <div className="ms-lyrics-tab__loading-bar" />
-                    <p>AI가 가사를 작성하고 있습니다...</p>
-                </div>
-            )}
-
-            {/* 저장된 가사 목록 */}
-            {loadingSaved && (
-                <div className="ms-lyrics-tab__loading">
-                    <div className="ms-lyrics-tab__loading-bar" />
-                    <p>저장된 가사를 불러오는 중...</p>
-                </div>
-            )}
-
-            {!loadingSaved && saved.length === 0 && !lyrLoading && (
-                <div className="ms-lyrics-tab__empty">
-                    <span className="ms-lyrics-tab__empty-icon">🎤</span>
-                    <p>저장된 가사가 없습니다</p>
-                    <p className="ms-lyrics-tab__empty-hint">
-                        프롬프트를 입력하면 AI가 [Verse], [Chorus] 등 섹션이 포함된 가사를 작성합니다
-                    </p>
-                </div>
-            )}
-
-            <div className="ms-lyrics-tab__results">
-                {saved.map((item) => (
-                    <div key={item.id} className={`ms-lyrics-card ${editingId === item.id ? 'is-editing' : ''}`}>
-                        <div className="ms-lyrics-card__header">
-                            {editingId === item.id ? (
-                                <input
-                                    className="ms-lyrics-card__title-input"
-                                    value={editTitle}
-                                    onChange={(e) => setEditTitle(e.target.value)}
-                                    placeholder="제목"
-                                />
-                            ) : (
-                                <>
-                                    {item.title && <h3 className="ms-lyrics-card__title">{item.title}</h3>}
-                                    <span className="ms-lyrics-card__prompt">{item.prompt}</span>
-                                </>
-                            )}
-                            <span className="ms-lyrics-card__date">
-                                {item.created_at ? new Date(item.created_at).toLocaleDateString('ko-KR') : ''}
-                            </span>
-                        </div>
-
-                        {editingId === item.id ? (
-                            <textarea
-                                className="ms-lyrics-card__text-input"
-                                value={editText}
-                                onChange={(e) => setEditText(e.target.value)}
-                                rows={12}
-                            />
-                        ) : (
-                            <pre className="ms-lyrics-card__text">{item.text}</pre>
-                        )}
-
-                        <div className="ms-lyrics-card__actions">
-                            {editingId === item.id ? (
-                                <>
-                                    <button type="button" className="ms-btn ms-btn--accent ms-btn--sm" onClick={handleSaveEdit}>
-                                        ✓ 저장
-                                    </button>
-                                    <button type="button" className="ms-btn ms-btn--ghost ms-btn--sm" onClick={cancelEdit}>
-                                        취소
-                                    </button>
-                                </>
-                            ) : (
-                                <>
-                                    <button
-                                        type="button"
-                                        className="ms-btn ms-btn--ghost ms-btn--sm"
-                                        onClick={() => handleCopy(item.text, item.id)}
-                                    >
-                                        {copied === item.id ? '✓ 복사됨' : '📋 복사'}
-                                    </button>
-                                    <button
-                                        type="button"
-                                        className="ms-btn ms-btn--ghost ms-btn--sm"
-                                        onClick={() => onUseInCreate(item.text)}
-                                    >
-                                        🎵 Create에서 사용
-                                    </button>
-                                    <button
-                                        type="button"
-                                        className="ms-btn ms-btn--ghost ms-btn--sm"
-                                        onClick={() => startEdit(item)}
-                                    >
-                                        ✏️ 수정
-                                    </button>
-                                    <button
-                                        type="button"
-                                        className="ms-btn ms-btn--ghost ms-btn--sm ms-btn--danger-text"
-                                        onClick={() => handleDelete(item.id)}
-                                    >
-                                        🗑 삭제
-                                    </button>
-                                </>
-                            )}
-                        </div>
-                    </div>
-                ))}
-            </div>
-        </div>
-    );
-};
-
 /* ─────────────────────────────────────────────
    Main Page
 ───────────────────────────────────────────── */
@@ -874,7 +513,6 @@ export default function MusicStudio() {
     const [lyricsLoading, setLyricsLoading] = useState(false);
     const [model,         setModel]         = useState('V4');
     const [models,        setModels]        = useState([]);
-    const [credits,       setCredits]       = useState(null);
 
     /* ── 생성 상태 ── */
     const [isGenerating, setIsGenerating] = useState(false);
@@ -917,14 +555,11 @@ export default function MusicStudio() {
             .catch(() => setProviderError(true));
     }, []); // eslint-disable-line react-hooks/exhaustive-deps
 
-    /* ── 모델 & 크레딧 로드 ── */
+    /* ── 모델 로드 ── */
     useEffect(() => {
         getMusicModels()
             .then((data) => setModels(data.models ?? []))
             .catch(() => {});
-        getMusicCredits()
-            .then((data) => setCredits(data))
-            .catch(() => {});
     }, []);
 
     /* ── 가사 AI 생성 ── */
@@ -1188,14 +823,7 @@ export default function MusicStudio() {
                     </p>
                 </div>
                 <div className="ms-header__right">
-                    {credits && (
-                        <div className="ms-credits">
-                            <span className="ms-credits__label">Credits</span>
-                            <span className="ms-credits__value">
-                                {credits.credits_left ?? credits.remaining ?? '—'}
-                            </span>
-                        </div>
-                    )}
+                    <CreditsBadge />
                     <SonicRadar isGenerating={isGenerating} accentColor={accentColor} />
                 </div>
             </header>
diff --git a/src/pages/music/components/AudioPlayer.jsx b/src/pages/music/components/AudioPlayer.jsx
new file mode 100644
index 0000000..4c16dc6
--- /dev/null
+++ b/src/pages/music/components/AudioPlayer.jsx
@@ -0,0 +1,128 @@
+import React, { useRef, useState, useEffect } from 'react';
+
+/* ─────────────────────────────────────────────
+   유틸
+───────────────────────────────────────────── */
+const pad = (n) => String(Math.floor(n)).padStart(2, '0');
+export const fmtTime = (s) => `${pad(s / 60)}:${pad(s % 60)}`;
+
+/* ─────────────────────────────────────────────
+   Audio Player (실제 <audio> 기반)
+───────────────────────────────────────────── */
+const AudioPlayer = ({ audioUrl, totalSec, accentColor }) => {
+    const audioRef   = useRef(null);
+    const [playing, setPlaying]   = useState(false);
+    const [elapsed, setElapsed]   = useState(0);
+    const [duration, setDuration] = useState(totalSec ?? 0);
+    const [volume, setVolume]     = useState(1);
+
+    /* 실제 오디오가 없으면 가짜 타이머로 폴백 */
+    const isFake = !audioUrl;
+    const timerRef = useRef(null);
+
+    const total = duration || totalSec || 60;
+
+    const togglePlay = () => {
+        if (isFake) {
+            if (playing) {
+                clearInterval(timerRef.current);
+                setPlaying(false);
+            } else {
+                setPlaying(true);
+                timerRef.current = setInterval(() => {
+                    setElapsed((e) => {
+                        if (e >= total - 1) {
+                            clearInterval(timerRef.current);
+                            setPlaying(false);
+                            return 0;
+                        }
+                        return e + 1;
+                    });
+                }, 1000);
+            }
+            return;
+        }
+        const el = audioRef.current;
+        if (!el) return;
+        playing ? el.pause() : el.play();
+    };
+
+    const handleSeek = (e) => {
+        const rect  = e.currentTarget.getBoundingClientRect();
+        const ratio = (e.clientX - rect.left) / rect.width;
+        const newTime = ratio * total;
+        if (!isFake && audioRef.current) {
+            audioRef.current.currentTime = newTime;
+        }
+        setElapsed(newTime);
+    };
+
+    const handleVolumeChange = (e) => {
+        const v = Number(e.target.value);
+        setVolume(v);
+        if (!isFake && audioRef.current) audioRef.current.volume = v;
+    };
+
+    useEffect(() => () => clearInterval(timerRef.current), []);
+
+    const progress = (elapsed / total) * 100;
+
+    return (
+        <div className="ms-audio-player" style={{ '--player-accent': accentColor }}>
+            {!isFake && (
+                <audio
+                    ref={audioRef}
+                    src={audioUrl}
+                    onLoadedMetadata={(e) => setDuration(e.target.duration)}
+                    onTimeUpdate={(e) => setElapsed(e.target.currentTime)}
+                    onPlay={() => setPlaying(true)}
+                    onPause={() => setPlaying(false)}
+                    onEnded={() => { setPlaying(false); setElapsed(0); }}
+                />
+            )}
+            <button
+                type="button"
+                className={`ms-player__play ${playing ? 'is-playing' : ''}`}
+                onClick={togglePlay}
+                aria-label={playing ? '일시정지' : '재생'}
+            >
+                {playing ? (
+                    <svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor">
+                        <rect x="3" y="2" width="4" height="12" rx="1" />
+                        <rect x="9" y="2" width="4" height="12" rx="1" />
+                    </svg>
+                ) : (
+                    <svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor">
+                        <path d="M4 2l10 6-10 6V2z" />
+                    </svg>
+                )}
+            </button>
+
+            <div className="ms-player__timeline">
+                <div className="ms-player__bar" onClick={handleSeek} role="slider"
+                     aria-label="재생 위치" aria-valuenow={Math.round(elapsed)} aria-valuemin={0} aria-valuemax={Math.round(total)}>
+                    <div className="ms-player__fill" style={{ width: `${progress}%` }} />
+                    <div className="ms-player__thumb" style={{ left: `${progress}%` }} />
+                </div>
+                <div className="ms-player__times">
+                    <span>{fmtTime(elapsed)}</span>
+                    <span>{fmtTime(total)}</span>
+                </div>
+            </div>
+
+            <div className="ms-volume">
+                <svg width="14" height="14" viewBox="0 0 14 14" fill="currentColor" aria-hidden>
+                    <path d="M2 5h2.5l3-3v10l-3-3H2V5zm8.5-1.5a4.5 4.5 0 010 7" stroke="currentColor" strokeWidth="1.2" fill="none" strokeLinecap="round"/>
+                </svg>
+                <input
+                    type="range" min={0} max={1} step={0.02} value={volume}
+                    onChange={handleVolumeChange}
+                    className="ms-volume__slider"
+                    aria-label="볼륨"
+                />
+            </div>
+        </div>
+    );
+};
+
+export default AudioPlayer;
diff --git a/src/pages/music/components/CreditsBadge.jsx b/src/pages/music/components/CreditsBadge.jsx
new file mode 100644
index 0000000..d83e9ee
--- /dev/null
+++ b/src/pages/music/components/CreditsBadge.jsx
@@ -0,0 +1,36 @@
+import React, { useEffect, useState, useCallback } from 'react';
+import { getMusicCredits } from '../../../api';
+
+const CreditsBadge = () => {
+    const [credits, setCredits] = useState(null);
+
+    const fetchCredits = useCallback(async () => {
+        try {
+            const data = await getMusicCredits();
+            setCredits(data);
+        } catch {}
+    }, []);
+
+    useEffect(() => {
+        fetchCredits();
+        const interval = setInterval(fetchCredits, 30000);
+        return () => clearInterval(interval);
+    }, [fetchCredits]);
+
+    if (!credits) return null;
+
+    const remaining = credits.credits_left ?? credits.remaining ?? credits.data ?? null;
+    if (remaining == null) return null;
+
+    const isLow = remaining <= 10;
+
+    return (
+        <div className={`ms-credits-badge ${isLow ? 'is-low' : ''}`}>
+            <span className="ms-credits-badge__icon">⚡</span>
+            <span className="ms-credits-badge__value">{remaining}</span>
+            <span className="ms-credits-badge__label">credits</span>
+        </div>
+    );
+};
+
+export default CreditsBadge;
diff --git a/src/pages/music/components/LyricsTab.jsx b/src/pages/music/components/LyricsTab.jsx
new file mode 100644
index 0000000..e6b224c
--- /dev/null
+++ b/src/pages/music/components/LyricsTab.jsx
@@ -0,0 +1,245 @@
+import React, { useEffect, useState } from 'react';
+import {
+    generateMusicLyrics,
+    getSavedLyrics,
+    saveLyrics,
+    updateLyrics,
+    deleteLyrics,
+} from '../../../api';
+
+/* ─────────────────────────────────────────────
+   Lyrics Tab
+───────────────────────────────────────────── */
+const LyricsTab = ({ onUseInCreate }) => {
+    const [lyrPrompt, setLyrPrompt]     = useState('');
+    const [lyrLoading, setLyrLoading]   = useState(false);
+    const [lyrError, setLyrError]       = useState(null);
+    const [copied, setCopied]           = useState(null);  // id
+    const [saved, setSaved]             = useState([]);     // DB에 저장된 가사
+    const [loadingSaved, setLoadingSaved] = useState(true);
+    const [editingId, setEditingId]     = useState(null);
+    const [editTitle, setEditTitle]     = useState('');
+    const [editText, setEditText]       = useState('');
+
+    /* ── 저장된 가사 로드 ── */
+    useEffect(() => {
+        setLoadingSaved(true);
+        getSavedLyrics()
+            .then((data) => setSaved(data.lyrics ?? []))
+            .catch(() => {})
+            .finally(() => setLoadingSaved(false));
+    }, []);
+
+    /* ── AI 생성 → 즉시 저장 ── */
+    const handleGenerate = async () => {
+        if (!lyrPrompt.trim() || lyrLoading) return;
+        setLyrLoading(true);
+        setLyrError(null);
+        try {
+            const res = await generateMusicLyrics(lyrPrompt.trim());
+            if (res?.text) {
+                const record = await saveLyrics({
+                    title: res.title || '',
+                    text: res.text,
+                    prompt: lyrPrompt.trim(),
+                });
+                setSaved((prev) => [record, ...prev]);
+            } else {
+                setLyrError('가사 생성 결과가 없습니다');
+            }
+        } catch (e) {
+            setLyrError(e.message || '가사 생성에 실패했습니다');
+        } finally {
+            setLyrLoading(false);
+        }
+    };
+
+    /* ── 복사 ── */
+    const handleCopy = (text, id) => {
+        navigator.clipboard.writeText(text).then(() => {
+            setCopied(id);
+            setTimeout(() => setCopied(null), 2000);
+        });
+    };
+
+    /* ── 삭제 ── */
+    const handleDelete = async (id) => {
+        try {
+            await deleteLyrics(id);
+            setSaved((prev) => prev.filter((l) => l.id !== id));
+        } catch {}
+    };
+
+    /* ── 수정 시작 ── */
+    const startEdit = (item) => {
+        setEditingId(item.id);
+        setEditTitle(item.title);
+        setEditText(item.text);
+    };
+
+    /* ── 수정 저장 ── */
+    const handleSaveEdit = async () => {
+        if (editingId == null) return;
+        try {
+            const updated = await updateLyrics(editingId, { title: editTitle, text: editText });
+            setSaved((prev) => prev.map((l) => l.id === editingId ? updated : l));
+            setEditingId(null);
+        } catch {}
+    };
+
+    /* ── 수정 취소 ── */
+    const cancelEdit = () => setEditingId(null);
+
+    return (
+        <div className="ms-lyrics-tab">
+            <div className="ms-lyrics-tab__form">
+                <div className="ms-lyrics-tab__head">
+                    <h2 className="ms-lyrics-tab__title">AI Lyrics Generator</h2>
+                    <p className="ms-lyrics-tab__desc">
+                        원하는 분위기, 주제, 스타일을 설명하면 AI가 가사를 작성합니다.
+                    </p>
+                </div>
+
+                <div className="ms-lyrics-tab__input-wrap">
+                    <textarea
+                        className="ms-lyrics-tab__input"
+                        placeholder="예: 비 오는 밤, 혼자 걷는 도시의 거리를 배경으로 한 감성적인 발라드 가사"
+                        value={lyrPrompt}
+                        onChange={(e) => setLyrPrompt(e.target.value)}
+                        rows={3}
+                        maxLength={200}
+                        onKeyDown={(e) => { if (e.key === 'Enter' && !e.shiftKey) { e.preventDefault(); handleGenerate(); } }}
+                    />
+                    <div className="ms-lyrics-tab__input-footer">
+                        <span className="ms-lyrics-tab__count">{lyrPrompt.length}/200</span>
+                        <button
+                            type="button"
+                            className={`ms-btn ms-btn--accent ${lyrLoading ? 'is-loading' : ''}`}
+                            onClick={handleGenerate}
+                            disabled={!lyrPrompt.trim() || lyrLoading}
+                        >
+                            {lyrLoading ? (
+                                <><span className="ms-btn__spinner" /> 생성 중...</>
+                            ) : (
+                                '✨ 가사 생성'
+                            )}
+                        </button>
+                    </div>
+                </div>
+
+                {lyrError && (
+                    <div className="ms-error-banner">
+                        <span>⚠ {lyrError}</span>
+                    </div>
+                )}
+            </div>
+
+            {lyrLoading && (
+                <div className="ms-lyrics-tab__loading">
+                    <div className="ms-lyrics-tab__loading-bar" />
+                    <p>AI가 가사를 작성하고 있습니다...</p>
+                </div>
+            )}
+
+            {/* 저장된 가사 목록 */}
+            {loadingSaved && (
+                <div className="ms-lyrics-tab__loading">
+                    <div className="ms-lyrics-tab__loading-bar" />
+                    <p>저장된 가사를 불러오는 중...</p>
+                </div>
+            )}
+
+            {!loadingSaved && saved.length === 0 && !lyrLoading && (
+                <div className="ms-lyrics-tab__empty">
+                    <span className="ms-lyrics-tab__empty-icon">🎤</span>
+                    <p>저장된 가사가 없습니다</p>
+                    <p className="ms-lyrics-tab__empty-hint">
+                        프롬프트를 입력하면 AI가 [Verse], [Chorus] 등 섹션이 포함된 가사를 작성합니다
+                    </p>
+                </div>
+            )}
+
+            <div className="ms-lyrics-tab__results">
+                {saved.map((item) => (
+                    <div key={item.id} className={`ms-lyrics-card ${editingId === item.id ? 'is-editing' : ''}`}>
+                        <div className="ms-lyrics-card__header">
+                            {editingId === item.id ? (
+                                <input
+                                    className="ms-lyrics-card__title-input"
+                                    value={editTitle}
+                                    onChange={(e) => setEditTitle(e.target.value)}
+                                    placeholder="제목"
+                                />
+                            ) : (
+                                <>
+                                    {item.title && <h3 className="ms-lyrics-card__title">{item.title}</h3>}
+                                    <span className="ms-lyrics-card__prompt">{item.prompt}</span>
+                                </>
+                            )}
+                            <span className="ms-lyrics-card__date">
+                                {item.created_at ? new Date(item.created_at).toLocaleDateString('ko-KR') : ''}
+                            </span>
+                        </div>
+
+                        {editingId === item.id ? (
+                            <textarea
+                                className="ms-lyrics-card__text-input"
+                                value={editText}
+                                onChange={(e) => setEditText(e.target.value)}
+                                rows={12}
+                            />
+                        ) : (
+                            <pre className="ms-lyrics-card__text">{item.text}</pre>
+                        )}
+
+                        <div className="ms-lyrics-card__actions">
+                            {editingId === item.id ? (
+                                <>
+                                    <button type="button" className="ms-btn ms-btn--accent ms-btn--sm" onClick={handleSaveEdit}>
+                                        ✓ 저장
+                                    </button>
+                                    <button type="button" className="ms-btn ms-btn--ghost ms-btn--sm" onClick={cancelEdit}>
+                                        취소
+                                    </button>
+                                </>
+                            ) : (
+                                <>
+                                    <button
+                                        type="button"
+                                        className="ms-btn ms-btn--ghost ms-btn--sm"
+                                        onClick={() => handleCopy(item.text, item.id)}
+                                    >
+                                        {copied === item.id ? '✓ 복사됨' : '📋 복사'}
+                                    </button>
+                                    <button
+                                        type="button"
+                                        className="ms-btn ms-btn--ghost ms-btn--sm"
+                                        onClick={() => onUseInCreate(item.text)}
+                                    >
+                                        🎵 Create에서 사용
+                                    </button>
+                                    <button
+                                        type="button"
+                                        className="ms-btn ms-btn--ghost ms-btn--sm"
+                                        onClick={() => startEdit(item)}
+                                    >
+                                        ✏️ 수정
+                                    </button>
+                                    <button
+                                        type="button"
+                                        className="ms-btn ms-btn--ghost ms-btn--sm ms-btn--danger-text"
+                                        onClick={() => handleDelete(item.id)}
+                                    >
+                                        🗑 삭제
+                                    </button>
+                                </>
+                            )}
+                        </div>
+                    </div>
+                ))}
+            </div>
+        </div>
+    );
+};
+
+export default LyricsTab;