diff --git a/Dockerfile b/Dockerfile
index 49301e37..54451b68 100644
--- a/Dockerfile
+++ b/Dockerfile
@@ -39,6 +39,10 @@ ENV NODE_ENV=production \
     PORT=3000 \
     HOSTNAME=0.0.0.0
 
+# yt-dlp
+ADD https://github.com/yt-dlp/yt-dlp/releases/latest/download/yt-dlp_linux /usr/local/bin/yt-dlp
+RUN chmod a+rx /usr/local/bin/yt-dlp
+
 RUN groupadd -r nodejs && useradd -r -g nodejs nextjs
 
 # public assets + standalone server + static chunks
diff --git a/app/(main)/layout.tsx b/app/(main)/layout.tsx
index 729e06d3..488cb3ab 100644
--- a/app/(main)/layout.tsx
+++ b/app/(main)/layout.tsx
@@ -7,7 +7,7 @@ import { Header } from "@/widgets/header/ui/header";
 import { AiChatButton } from "@/features/ai-chat/ui/AiChatButton";
 import { AiChatModal } from "@/features/ai-chat/ui/AiChatModal";
 import { useAiChatPanel } from "@/features/ai-chat/model/useAiChatPanel";
-import { WakeUpMusicRecommend } from "@/features/wake-up-music/ui/WakeUpMusicRecommend";
+import { WakeUpMusicRecommend } from "@/features/wake-up-music-recommend/ui/WakeUpMusicRecommend";
 import { RealtimeSubscriptions } from "@/widgets/realtime-subscription/ui/RealtimeSubscriptions";
 
 export default function MainLayout({
diff --git a/app/api/youtube/transcript/route.ts b/app/api/youtube/transcript/route.ts
new file mode 100644
index 00000000..1dd8c5d6
--- /dev/null
+++ b/app/api/youtube/transcript/route.ts
@@ -0,0 +1,42 @@
+import { HttpStatusCode } from "axios";
+import { NextRequest, NextResponse } from "next/server";
+import { extractYoutubeVideoId } from "@/entities/music/lib/youtube";
+import { getYoutubeTranscript } from "@/entities/music/lib/transcript";
+
+export const runtime = "nodejs";
+
+export async function GET(request: NextRequest) {
+  const authorization = request.headers.get("authorization");
+  const accessToken = authorization?.startsWith("Bearer ")
+    ? authorization.slice("Bearer ".length)
+    : null;
+
+  if (!accessToken) {
+    return NextResponse.json(
+      { error: "access token 없음" },
+      { status: HttpStatusCode.Unauthorized },
+    );
+  }
+
+  const params = request.nextUrl.searchParams;
+  const urlParam = params.get("url");
+  const idParam = params.get("id");
+  const videoId =
+    idParam ?? (urlParam ? extractYoutubeVideoId(urlParam) : null);
+
+  const youtubeIdRegex = /^[a-zA-Z0-9_-]{11}$/;
+  if (!videoId || !youtubeIdRegex.test(videoId)) {
+    return NextResponse.json(
+      { error: "올바른 형식의 videoId(id) 또는 url이 필요합니다." },
+      { status: HttpStatusCode.BadRequest },
+    );
+  }
+
+  const result = await getYoutubeTranscript(videoId);
+
+  if ("error" in result) {
+    return NextResponse.json(result, { status: HttpStatusCode.NotFound });
+  }
+
+  return NextResponse.json(result);
+}
diff --git a/package-lock.json b/package-lock.json
index a776db28..b646c181 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,6 +8,7 @@
       "name": "flooding-v2",
       "version": "0.2.2",
       "dependencies": {
+        "@mlc-ai/web-llm": "^0.2.84",
         "@sentry/nextjs": "^10.53.1",
         "@sun-typeface/suit": "^2.0.5",
         "@tanstack/react-query": "^5.90.20",
@@ -1134,6 +1135,15 @@
         "@jridgewell/sourcemap-codec": "^1.4.14"
       }
     },
+    "node_modules/@mlc-ai/web-llm": {
+      "version": "0.2.84",
+      "resolved": "https://registry.npmjs.org/@mlc-ai/web-llm/-/web-llm-0.2.84.tgz",
+      "integrity": "sha512-hrOWzK4/nGNmgoRKT8pgVmZZ2oEPpbblIWQOwpqNyvK2dysHw3KVB1gNJOuRcQfKOPhucEhX1NJzXzgMDnwSCQ==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "loglevel": "^1.9.1"
+      }
+    },
     "node_modules/@mswjs/interceptors": {
       "version": "0.41.3",
       "resolved": "https://registry.npmjs.org/@mswjs/interceptors/-/interceptors-0.41.3.tgz",
@@ -6801,6 +6811,19 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/loglevel": {
+      "version": "1.9.2",
+      "resolved": "https://registry.npmjs.org/loglevel/-/loglevel-1.9.2.tgz",
+      "integrity": "sha512-HgMmCqIJSAKqo68l0rS2AanEWfkxaZ5wNiEFb5ggm08lDs9Xl2KxBlX3PTcaD2chBM1gXAYf491/M2Rv8Jwayg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.6.0"
+      },
+      "funding": {
+        "type": "tidelift",
+        "url": "https://tidelift.com/funding/github/npm/loglevel"
+      }
+    },
     "node_modules/loose-envify": {
       "version": "1.4.0",
       "license": "MIT",
diff --git a/package.json b/package.json
index c75436e7..61b924cf 100644
--- a/package.json
+++ b/package.json
@@ -12,6 +12,7 @@
     "format:check": "prettier --check --ignore-unknown ."
   },
   "dependencies": {
+    "@mlc-ai/web-llm": "^0.2.84",
     "@sentry/nextjs": "^10.53.1",
     "@sun-typeface/suit": "^2.0.5",
     "@tanstack/react-query": "^5.90.20",
diff --git a/src/entities/ai/lib/webllm.worker.ts b/src/entities/ai/lib/webllm.worker.ts
new file mode 100644
index 00000000..e4798202
--- /dev/null
+++ b/src/entities/ai/lib/webllm.worker.ts
@@ -0,0 +1,7 @@
+import { WebWorkerMLCEngineHandler } from "@mlc-ai/web-llm";
+
+const handler = new WebWorkerMLCEngineHandler();
+
+self.onmessage = (event: MessageEvent) => {
+  handler.onmessage(event);
+};
diff --git a/src/entities/ai/lib/webllmEngine.ts b/src/entities/ai/lib/webllmEngine.ts
new file mode 100644
index 00000000..8628f2b4
--- /dev/null
+++ b/src/entities/ai/lib/webllmEngine.ts
@@ -0,0 +1,94 @@
+import type { WebWorkerMLCEngine } from "@mlc-ai/web-llm";
+
+export const MUSIC_LLM_MODEL_ID = "gemma-2-2b-it-q4f16_1-MLC";
+
+export type ModelState =
+  | { status: "idle" }
+  | { status: "loading"; progress: number }
+  | { status: "ready" }
+  | { status: "error"; message: string };
+
+const WEBGPU_UNSUPPORTED_MESSAGE =
+  "이 브라우저/기기에서 WebGPU를 사용할 수 없습니다.";
+
+let enginePromise: Promise<WebWorkerMLCEngine> | null = null;
+let modelState: ModelState = { status: "idle" };
+const listeners = new Set<() => void>();
+
+function setModelState(next: ModelState) {
+  modelState = next;
+  listeners.forEach((listener) => listener());
+}
+
+export function subscribeModelState(listener: () => void): () => void {
+  listeners.add(listener);
+  return () => {
+    listeners.delete(listener);
+  };
+}
+
+export function getModelStateSnapshot(): ModelState {
+  return modelState;
+}
+
+export async function ensureWebGpuSupport(): Promise<void> {
+  if (modelState.status !== "idle") return;
+
+  const gpu = (
+    navigator as Navigator & {
+      gpu?: { requestAdapter: () => Promise<unknown> };
+    }
+  ).gpu;
+
+  if (!gpu) {
+    setModelState({ status: "error", message: WEBGPU_UNSUPPORTED_MESSAGE });
+    return;
+  }
+
+  try {
+    const adapter = await gpu.requestAdapter();
+    if (!adapter) {
+      setModelState({ status: "error", message: WEBGPU_UNSUPPORTED_MESSAGE });
+    }
+  } catch {
+    setModelState({ status: "error", message: WEBGPU_UNSUPPORTED_MESSAGE });
+  }
+}
+
+export function getMusicLlmEngine(): Promise<WebWorkerMLCEngine> {
+  if (!enginePromise) {
+    setModelState({ status: "loading", progress: 0 });
+    enginePromise = (async () => {
+      const { CreateWebWorkerMLCEngine } = await import("@mlc-ai/web-llm");
+      const worker = new Worker(
+        new URL("./webllm.worker.ts", import.meta.url),
+        {
+          type: "module",
+        },
+      );
+
+      const engine = await CreateWebWorkerMLCEngine(
+        worker,
+        MUSIC_LLM_MODEL_ID,
+        {
+          initProgressCallback: (report) =>
+            setModelState({ status: "loading", progress: report.progress }),
+        },
+      );
+      setModelState({ status: "ready" });
+      return engine;
+    })().catch((error) => {
+      enginePromise = null;
+      const reason = error instanceof Error ? error.message : String(error);
+      setModelState({
+        status: "error",
+        message: reason.includes("WebGPU")
+          ? WEBGPU_UNSUPPORTED_MESSAGE
+          : "AI 모델을 불러오지 못했습니다.",
+      });
+      throw error;
+    });
+  }
+
+  return enginePromise;
+}
diff --git a/src/entities/ai/model/useModelState.ts b/src/entities/ai/model/useModelState.ts
new file mode 100644
index 00000000..bd51d527
--- /dev/null
+++ b/src/entities/ai/model/useModelState.ts
@@ -0,0 +1,16 @@
+"use client";
+
+import { useSyncExternalStore } from "react";
+import {
+  getModelStateSnapshot,
+  subscribeModelState,
+  type ModelState,
+} from "@/entities/ai/lib/webllmEngine";
+
+export function useModelState(): ModelState {
+  return useSyncExternalStore(
+    subscribeModelState,
+    getModelStateSnapshot,
+    getModelStateSnapshot,
+  );
+}
diff --git a/src/entities/dormitory/lib/musicPermission.ts b/src/entities/dormitory/lib/musicPermission.ts
index a6a6a16e..6bf0fe19 100644
--- a/src/entities/dormitory/lib/musicPermission.ts
+++ b/src/entities/dormitory/lib/musicPermission.ts
@@ -1,11 +1,23 @@
 import type { UserRole } from "@/entities/user/model/user";
 
+// 기자위(DORMITORY_MANAGER) 중 AI 분석을 쓸 수 있는 사감 계정 이름
+const DORM_SUPERVISOR_NAME = "사감선생님";
+
 interface CreateMusicPermissionParams {
   role?: UserRole;
+  name?: string;
 }
 
-export function createMusicPermission({ role }: CreateMusicPermissionParams) {
+export function createMusicPermission({
+  role,
+  name,
+}: CreateMusicPermissionParams) {
+  const isDormManager = role === "DORMITORY_MANAGER";
+
   return {
-    canDeleteAnyMusic: role === "ADMIN" || role === "DORMITORY_MANAGER",
+    canDeleteAnyMusic: role === "ADMIN" || isDormManager,
+    // 어드민은 모두 가능, 기자위는 사감선생님만 가능
+    canUseAiAnalysis:
+      role === "ADMIN" || (isDormManager && name === DORM_SUPERVISOR_NAME),
   };
 }
diff --git a/src/entities/music/api/youtubeQueries.ts b/src/entities/music/api/youtubeQueries.ts
index b5cc797f..8c988d52 100644
--- a/src/entities/music/api/youtubeQueries.ts
+++ b/src/entities/music/api/youtubeQueries.ts
@@ -13,6 +13,10 @@ interface YoutubeVideosResponse {
   videos: YoutubeVideoMetadata[];
 }
 
+export interface YoutubeTranscript {
+  text: string;
+}
+
 export async function getYoutubeVideos(
   videoIds: string[],
   signal?: AbortSignal,
@@ -35,6 +39,25 @@ export async function getYoutubeVideos(
   return Object.fromEntries(data.videos.map((video) => [video.id, video]));
 }
 
+const TRANSCRIPT_TIMEOUT_MS = 65_000;
+
+export async function getYoutubeTranscript(
+  videoId: string,
+  signal?: AbortSignal,
+): Promise<YoutubeTranscript> {
+  const { data } = await instance.get<YoutubeTranscript>(
+    "/api/youtube/transcript",
+    {
+      baseURL: undefined,
+      params: { id: videoId },
+      timeout: TRANSCRIPT_TIMEOUT_MS,
+      signal,
+    },
+  );
+
+  return data;
+}
+
 export const youtubeQueries = {
   videos: (videoIds: string[]) => {
     const ids = Array.from(new Set(videoIds)).sort();
@@ -45,4 +68,13 @@ export const youtubeQueries = {
       enabled: ids.length > 0,
     });
   },
+
+  transcript: (videoId: string) =>
+    queryOptions({
+      queryKey: ["music", "youtube-transcript", videoId],
+      queryFn: ({ signal }) => getYoutubeTranscript(videoId, signal),
+      enabled: Boolean(videoId),
+      staleTime: Infinity,
+      gcTime: Infinity,
+    }),
 } as const;
diff --git a/src/entities/music/lib/transcript.ts b/src/entities/music/lib/transcript.ts
new file mode 100644
index 00000000..1ce96ac5
--- /dev/null
+++ b/src/entities/music/lib/transcript.ts
@@ -0,0 +1,164 @@
+import { execFile } from "node:child_process";
+import { mkdtemp, readdir, readFile, rm } from "node:fs/promises";
+import { tmpdir } from "node:os";
+import path from "node:path";
+import { promisify } from "node:util";
+
+const execFileAsync = promisify(execFile);
+
+export interface YoutubeTranscriptSuccess {
+  text: string;
+}
+
+export interface YoutubeTranscriptFailure {
+  error: string;
+}
+
+export type YoutubeTranscriptResult =
+  | YoutubeTranscriptSuccess
+  | YoutubeTranscriptFailure;
+
+const PREFERRED_LANGS = ["ko", "en"];
+const YT_DLP_CONCURRENCY = Number(process.env.YT_DLP_CONCURRENCY ?? 20);
+const YT_DLP_BIN = process.env.YT_DLP_PATH ?? "yt-dlp";
+const YT_DLP_TIMEOUT_MS = 60_000;
+
+const transcriptCache = new Map<string, string>();
+
+let activeYtDlp = 0;
+const ytDlpWaiters: Array<() => void> = [];
+
+async function withYtDlpLimit<T>(task: () => Promise<T>): Promise<T> {
+  if (activeYtDlp >= YT_DLP_CONCURRENCY) {
+    await new Promise<void>((resolve) => ytDlpWaiters.push(resolve));
+  }
+  activeYtDlp += 1;
+  try {
+    return await task();
+  } finally {
+    activeYtDlp -= 1;
+    ytDlpWaiters.shift()?.();
+  }
+}
+
+function toTimestamp(h: number, m: number, s: number): string {
+  const total = h * 3600 + m * 60 + s;
+  const sec = String(total % 60).padStart(2, "0");
+  const min = Math.floor(total / 60) % 60;
+  const hr = Math.floor(total / 3600);
+  return hr > 0
+    ? `${hr}:${String(min).padStart(2, "0")}:${sec}`
+    : `${min}:${sec}`;
+}
+
+function cleanVtt(vtt: string): string {
+  const entries: string[] = [];
+  let time = "0:00";
+  let previous: string | null = null;
+
+  for (const rawLine of vtt.split(/\r?\n/)) {
+    const line = rawLine.trim();
+    if (
+      !line ||
+      line.startsWith("WEBVTT") ||
+      line.startsWith("Kind:") ||
+      line.startsWith("Language:") ||
+      /^\d+$/.test(line)
+    ) {
+      continue;
+    }
+
+    const cue = line.match(/^(\d{2}):(\d{2}):(\d{2})[.,]\d+\s*-->/);
+    if (cue) {
+      time = toTimestamp(Number(cue[1]), Number(cue[2]), Number(cue[3]));
+      continue;
+    }
+
+    const text = line.replace(/<[^>]+>/g, "").trim();
+    if (!text || text === previous) continue;
+    entries.push(`[${time}] ${text}`);
+    previous = text;
+  }
+
+  return entries.join("\n");
+}
+
+function langOf(fileName: string): string {
+  return fileName.split(".").at(-2) ?? "";
+}
+
+async function extractViaYtDlp(
+  videoId: string,
+): Promise<YoutubeTranscriptResult> {
+  let workDir: string | null = null;
+  try {
+    workDir = await mkdtemp(path.join(tmpdir(), "yt-transcript-"));
+
+    const args = [
+      "--skip-download",
+      "--write-sub",
+      "--write-auto-sub",
+      "--sub-lang",
+      PREFERRED_LANGS.join(","),
+      "--sub-format",
+      "vtt",
+      "--retries",
+      "3",
+      "--retry-sleep",
+      "5",
+      "--ignore-errors",
+      "--no-abort-on-error",
+      "--sleep-subtitles",
+      "1",
+      "--no-warnings",
+      "-o",
+      path.join(workDir, `${videoId}.%(ext)s`),
+      `https://www.youtube.com/watch?v=${videoId}`,
+    ];
+
+    let rawStderr = "";
+    try {
+      const { stderr } = await execFileAsync(YT_DLP_BIN, args, {
+        timeout: YT_DLP_TIMEOUT_MS,
+      });
+      rawStderr = stderr ?? "";
+    } catch (execError) {
+      const err = execError as { stderr?: string; message?: string };
+      rawStderr = err.stderr ?? err.message ?? String(execError);
+    }
+
+    const files = (await readdir(workDir)).filter((f) => f.endsWith(".vtt"));
+    if (files.length === 0) {
+      return { error: rawStderr.trim() || "자막 파일 없음(원인 미상)" };
+    }
+
+    const preferredFile =
+      PREFERRED_LANGS.map((code) => files.find((f) => langOf(f) === code)).find(
+        Boolean,
+      ) ?? files[0];
+
+    const text = cleanVtt(
+      await readFile(path.join(workDir, preferredFile), "utf-8"),
+    );
+    if (!text) return { error: "yt-dlp: 자막 텍스트가 비어 있습니다." };
+
+    return { text };
+  } catch (error) {
+    return { error: error instanceof Error ? error.message : String(error) };
+  } finally {
+    if (workDir) {
+      await rm(workDir, { recursive: true, force: true }).catch(() => {});
+    }
+  }
+}
+
+export async function getYoutubeTranscript(
+  videoId: string,
+): Promise<YoutubeTranscriptResult> {
+  const cached = transcriptCache.get(videoId);
+  if (cached) return { text: cached };
+
+  const result = await withYtDlpLimit(() => extractViaYtDlp(videoId));
+  if (!("error" in result)) transcriptCache.set(videoId, result.text);
+  return result;
+}
diff --git a/src/entities/music/ui/MusicListItem.tsx b/src/entities/music/ui/MusicListItem.tsx
index 85535508..e467a5ff 100644
--- a/src/entities/music/ui/MusicListItem.tsx
+++ b/src/entities/music/ui/MusicListItem.tsx
@@ -1,3 +1,4 @@
+import type { ReactNode } from "react";
 import type { Music } from "@/entities/music/model/music";
 import { getYoutubeThumbnailUrl } from "@/entities/music/lib/youtube";
 import Heart from "@/shared/asset/svg/Heart";
@@ -11,61 +12,91 @@ interface MusicListItemProps {
   isLikePending?: boolean;
   onDelete?: () => void;
   isDeletePending?: boolean;
+  thumbnailOverlay?: ReactNode;
+  aiStatus?: ReactNode;
+  onSelect?: () => void;
+  isSelected?: boolean;
 }
 
 function formatAppliedDate(appliedAt: string) {
   return formatTime(appliedAt);
 }
 
+const THUMBNAIL_CLASS =
+  "bg-sub-4 relative h-14 w-24 shrink-0 overflow-hidden rounded-lg sm:h-17 sm:w-30 2xl:h-22 2xl:w-39";
+
 export function MusicListItem({
   music,
   onToggleLike,
   isLikePending = false,
   onDelete,
   isDeletePending = false,
+  thumbnailOverlay,
+  aiStatus,
+  onSelect,
+  isSelected = false,
 }: MusicListItemProps) {
   const thumbnailUrl =
     music.thumbnailUrl ?? getYoutubeThumbnailUrl(music.musicUrl);
   const title = music.title ?? music.musicUrl;
 
+  const thumbnailInner = (
+    <>
+      {thumbnailUrl && (
+        <Image src={thumbnailUrl} alt={title} fill className="object-cover" />
+      )}
+      {music.durationText && (
+        <span className="text-caption-3 absolute right-1.5 bottom-1.5 line-clamp-1 rounded bg-black/70 px-1.5 py-0.5 text-white">
+          {music.durationText}
+        </span>
+      )}
+      {thumbnailOverlay}
+    </>
+  );
+
+  const info = (
+    <div className="flex flex-col gap-2">
+      <p
+        className={`text-text-1 font-semibold whitespace-nowrap ${isSelected ? "text-p-1" : "text-main-text"}`}
+      >
+        {title}
+      </p>
+      <div className="flex items-center gap-3">
+        <span className="text-caption-2 text-sub-1 whitespace-nowrap">
+          {music.studentNumber} {music.userName}
+        </span>
+        <span className="text-caption-2 text-sub-2 whitespace-nowrap">
+          {formatAppliedDate(music.appliedAt)}
+        </span>
+      </div>
+      {aiStatus}
+    </div>
+  );
+
   return (
     <div className="border-sub-3 flex items-center justify-between gap-2 overflow-hidden border-b py-3 pr-2 last:border-b-0 sm:gap-4 sm:pr-6">
-      <div className="scrollbar-hide flex flex-1 items-center gap-2 overflow-x-auto sm:gap-4">
-        <a
-          href={music.videoUrl ?? music.musicUrl}
-          target="_blank"
-          rel="noopener noreferrer"
-          className="bg-sub-4 relative h-14 w-24 shrink-0 overflow-hidden rounded-lg sm:h-17 sm:w-30 2xl:h-22 2xl:w-39"
+      {onSelect ? (
+        <button
+          type="button"
+          onClick={onSelect}
+          className="scrollbar-hide flex flex-1 cursor-pointer items-center gap-2 overflow-x-auto text-left sm:gap-4"
         >
-          {thumbnailUrl && (
-            <Image
-              src={thumbnailUrl}
-              alt={title}
-              fill
-              className="object-cover"
-            />
-          )}
-          {music.durationText && (
-            <span className="text-caption-3 absolute right-1.5 bottom-1.5 line-clamp-1 rounded bg-black/70 px-1.5 py-0.5 text-white">
-              {music.durationText}
-            </span>
-          )}
-        </a>
-
-        <div className="flex flex-col gap-3">
-          <p className="text-text-1 text-main-text font-semibold whitespace-nowrap">
-            {title}
-          </p>
-          <div className="flex items-center gap-3">
-            <span className="text-caption-2 text-sub-1 whitespace-nowrap">
-              {music.studentNumber} {music.userName}
-            </span>
-            <span className="text-caption-2 text-sub-2 whitespace-nowrap">
-              {formatAppliedDate(music.appliedAt)}
-            </span>
-          </div>
+          <span className={THUMBNAIL_CLASS}>{thumbnailInner}</span>
+          {info}
+        </button>
+      ) : (
+        <div className="scrollbar-hide flex flex-1 items-center gap-2 overflow-x-auto sm:gap-4">
+          <a
+            href={music.videoUrl ?? music.musicUrl}
+            target="_blank"
+            rel="noopener noreferrer"
+            className={THUMBNAIL_CLASS}
+          >
+            {thumbnailInner}
+          </a>
+          {info}
         </div>
-      </div>
+      )}
 
       <div className="flex shrink-0 items-center gap-2">
         {onDelete && (
diff --git a/src/entities/music/ui/YoutubeEmbed.tsx b/src/entities/music/ui/YoutubeEmbed.tsx
new file mode 100644
index 00000000..ea1ca703
--- /dev/null
+++ b/src/entities/music/ui/YoutubeEmbed.tsx
@@ -0,0 +1,25 @@
+interface YoutubeEmbedProps {
+  videoId: string;
+  start?: number;
+  autoPlay?: boolean;
+}
+
+export function YoutubeEmbed({
+  videoId,
+  start = 0,
+  autoPlay = false,
+}: YoutubeEmbedProps) {
+  return (
+    <div className="flex aspect-video w-full items-center justify-center overflow-hidden rounded-xl bg-black">
+      <iframe
+        key={`${videoId}-${start}-${autoPlay ? 1 : 0}`}
+        src={`https://www.youtube.com/embed/${videoId}?start=${start}&autoplay=${autoPlay ? 1 : 0}`}
+        title="YouTube video player"
+        className="size-full border-0"
+        allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
+        referrerPolicy="strict-origin-when-cross-origin"
+        allowFullScreen
+      />
+    </div>
+  );
+}
diff --git a/src/features/wake-up-music-analysis/lib/analysisCache.ts b/src/features/wake-up-music-analysis/lib/analysisCache.ts
new file mode 100644
index 00000000..872d0ffa
--- /dev/null
+++ b/src/features/wake-up-music-analysis/lib/analysisCache.ts
@@ -0,0 +1,62 @@
+import type { SongAnalysis } from "@/features/wake-up-music-analysis/lib/songAnalysis";
+
+const CACHE_NAME = "wake-up-music";
+
+function key(kind: string, videoId: string): string {
+  return `https://wum.cache/${kind}/${encodeURIComponent(videoId)}`;
+}
+
+export async function getCachedTranscript(
+  videoId: string,
+): Promise<string | null> {
+  if (typeof caches === "undefined") return null;
+  try {
+    const cache = await caches.open(CACHE_NAME);
+    const res = await cache.match(key("transcript", videoId));
+    return res ? res.text() : null;
+  } catch {
+    return null;
+  }
+}
+
+export async function cacheTranscript(
+  videoId: string,
+  text: string,
+): Promise<void> {
+  if (typeof caches === "undefined") return;
+  try {
+    const cache = await caches.open(CACHE_NAME);
+    await cache.put(key("transcript", videoId), new Response(text));
+  } catch {
+    // 캐시 저장 실패는 무시
+  }
+}
+
+export async function getCachedAnalysis(
+  videoId: string,
+): Promise<SongAnalysis | null> {
+  if (typeof caches === "undefined") return null;
+  try {
+    const cache = await caches.open(CACHE_NAME);
+    const res = await cache.match(key("analysis", videoId));
+    return res ? res.json() : null;
+  } catch {
+    return null;
+  }
+}
+
+export async function cacheAnalysis(
+  videoId: string,
+  analysis: SongAnalysis,
+): Promise<void> {
+  if (typeof caches === "undefined") return;
+  try {
+    const cache = await caches.open(CACHE_NAME);
+    await cache.put(
+      key("analysis", videoId),
+      new Response(JSON.stringify(analysis)),
+    );
+  } catch {
+    // 캐시 저장 실패는 무시
+  }
+}
diff --git a/src/features/wake-up-music-analysis/lib/songAnalysis.ts b/src/features/wake-up-music-analysis/lib/songAnalysis.ts
new file mode 100644
index 00000000..c4b169e4
--- /dev/null
+++ b/src/features/wake-up-music-analysis/lib/songAnalysis.ts
@@ -0,0 +1,79 @@
+import type { ChatCompletionMessageParam } from "@mlc-ai/web-llm";
+
+export type SongRating = "적합" | "주의" | "부적합";
+
+export interface SongAnalysis {
+  summary: string;
+  rating: SongRating;
+  issues: string[];
+  autoCaption?: boolean;
+}
+
+const MAX_TRANSCRIPT_CHARS = 3000;
+
+const AUTO_CAPTION_MARKER =
+  /\[(music|음악|박수|applause|laughter|웃음|박수 소리)\]|[♪♫]/i;
+
+export function isAutoGeneratedCaption(transcript: string): boolean {
+  return AUTO_CAPTION_MARKER.test(transcript);
+}
+
+export const SONG_ANALYSIS_SCHEMA = JSON.stringify({
+  type: "object",
+  properties: {
+    summary: { type: "string" },
+    rating: { type: "string", enum: ["적합", "주의", "부적합"] },
+    issues: { type: "array", items: { type: "string" } },
+  },
+  required: ["summary", "rating", "issues"],
+});
+
+export function buildSongAnalysisMessages(
+  title: string,
+  transcript: string,
+): ChatCompletionMessageParam[] {
+  const clipped = transcript.slice(0, MAX_TRANSCRIPT_CHARS);
+
+  return [
+    {
+      role: "system",
+      content:
+        "당신은 기숙사 사감을 돕는 음악 검토 도우미입니다. 학생 기상음악으로 적합한지 자막(가사)을 보고 판단합니다.\n" +
+        "자막의 각 줄은 '[시간] 가사' 형식이며, [시간]은 그 가사가 나오는 영상 시점입니다.\n" +
+        "규칙:\n" +
+        "- 설명·요약은 한국어로 쓴다. 단, issues에서 인용하는 가사 원문은 자막에 적힌 언어 그대로 둔다. 그 외에 중국어 등 의미 없는 언어를 섞지 않는다.\n" +
+        "- JSON 객체 하나만 출력한다. 설명·코드펜스·다른 텍스트를 덧붙이지 않는다.\n" +
+        '- 출력 형식: {"summary": string, "rating": "적합"|"주의"|"부적합", "issues": string[]}\n' +
+        "- summary: 곡의 분위기와 내용을 한국어 한 줄로 요약한다.\n" +
+        '- rating: "적합"=밝고 무난, "주의"=다소 부적절하여 사감 확인 필요, "부적합"=욕설·선정성·폭력 등 명백히 부적절.\n' +
+        "- issues: 부적절한 표현이 나온 부분을 '[시간] \"자막 원문 그대로\" 사유' 형식으로 적는다. [시간]과 큰따옴표 안 가사는 자막 줄을 글자 그대로(번역·요약·수정 금지) 옮겨 음성과 일치시킨다. 사유만 한국어로 짧게 덧붙인다. 자막에 실제로 있는 표현만, 없으면 빈 배열 []. 지어내지 않는다.",
+    },
+    {
+      role: "user",
+      content: `제목: ${title}\n\n자막:\n${clipped}`,
+    },
+  ];
+}
+
+export function parseSongAnalysis(content: string): SongAnalysis {
+  return JSON.parse(content) as SongAnalysis;
+}
+
+export interface IssueTimestamp {
+  seconds: number;
+  time: string;
+  rest: string;
+}
+
+export function parseLeadingTimestamp(issue: string): IssueTimestamp | null {
+  const match = issue.match(/^\[(\d+):(\d{2})(?::(\d{2}))?\]\s*(.*)$/);
+  if (!match) return null;
+
+  const [, a, b, c, rest] = match;
+  const seconds = c
+    ? Number(a) * 3600 + Number(b) * 60 + Number(c)
+    : Number(a) * 60 + Number(b);
+  const time = c ? `${a}:${b}:${c}` : `${a}:${b}`;
+
+  return { seconds, time, rest };
+}
diff --git a/src/features/wake-up-music-analysis/model/useWakeUpMusicAiAnalysis.ts b/src/features/wake-up-music-analysis/model/useWakeUpMusicAiAnalysis.ts
new file mode 100644
index 00000000..eb45b306
--- /dev/null
+++ b/src/features/wake-up-music-analysis/model/useWakeUpMusicAiAnalysis.ts
@@ -0,0 +1,227 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import { useQueryClient } from "@tanstack/react-query";
+import { toast } from "sonner";
+import type { Music } from "@/entities/music/model/music";
+import { extractYoutubeVideoId } from "@/entities/music/lib/youtube";
+import { youtubeQueries } from "@/entities/music/api/youtubeQueries";
+import {
+  ensureWebGpuSupport,
+  getModelStateSnapshot,
+  getMusicLlmEngine,
+} from "@/entities/ai/lib/webllmEngine";
+import {
+  buildSongAnalysisMessages,
+  isAutoGeneratedCaption,
+  parseSongAnalysis,
+  SONG_ANALYSIS_SCHEMA,
+  type SongAnalysis,
+} from "@/features/wake-up-music-analysis/lib/songAnalysis";
+import {
+  cacheAnalysis,
+  cacheTranscript,
+  getCachedAnalysis,
+  getCachedTranscript,
+} from "@/features/wake-up-music-analysis/lib/analysisCache";
+
+const MAX_ANALYSIS_SONGS = 20;
+
+export type AnalysisStage = "idle" | "transcript" | "analyze";
+
+export type AiSongState =
+  | { status: "transcript" }
+  | { status: "analyzing" }
+  | { status: "analyzed"; analysis: SongAnalysis }
+  | { status: "error"; message: string };
+
+export interface AiAnalysisController {
+  stage: AnalysisStage;
+  isAnalyzing: boolean;
+  songStates: Record<string, AiSongState>;
+  handleAnalyze: () => void;
+  loadCachedAnalyses: () => void;
+}
+
+export function useWakeUpMusicAiAnalysis(songs: Music[]): AiAnalysisController {
+  const queryClient = useQueryClient();
+  const [stage, setStage] = useState<AnalysisStage>("idle");
+  const [songStates, setSongStates] = useState<Record<string, AiSongState>>({});
+
+  useEffect(() => {
+    ensureWebGpuSupport();
+  }, []);
+
+  const isAnalyzing = stage !== "idle";
+
+  const setSongState = (videoId: string, state: AiSongState) => {
+    setSongStates((prev) => ({ ...prev, [videoId]: state }));
+  };
+
+  const loadCachedAnalyses = async () => {
+    const ids: string[] = [];
+    for (const music of songs) {
+      const id = extractYoutubeVideoId(music.videoUrl ?? music.musicUrl);
+      if (id) ids.push(id);
+    }
+
+    const analyses = await Promise.all(ids.map((id) => getCachedAnalysis(id)));
+    setSongStates((prev) => {
+      const next = { ...prev };
+      ids.forEach((id, index) => {
+        const analysis = analyses[index];
+        if (analysis && !next[id]) {
+          next[id] = { status: "analyzed", analysis };
+        }
+      });
+      return next;
+    });
+  };
+
+  const handleAnalyze = async () => {
+    if (isAnalyzing) return;
+
+    const targets: { videoId: string; title: string }[] = [];
+    for (const music of songs) {
+      if (targets.length >= MAX_ANALYSIS_SONGS) break;
+      const videoId = extractYoutubeVideoId(music.videoUrl ?? music.musicUrl);
+      if (videoId) {
+        targets.push({ videoId, title: music.title ?? music.musicUrl });
+      }
+    }
+
+    if (targets.length === 0) {
+      toast.error("분석할 음악이 없습니다.");
+      return;
+    }
+
+    try {
+      setStage("transcript");
+
+      // 분석 캐시가 있으면 즉시 복원하고, 나머지만 새로 분석한다.
+      const cachedAnalyses = await Promise.all(
+        targets.map((target) => getCachedAnalysis(target.videoId)),
+      );
+      let analyzedCount = 0;
+      const pending: typeof targets = [];
+      const initialStates: Record<string, AiSongState> = {};
+      targets.forEach((target, index) => {
+        const cached = cachedAnalyses[index];
+        if (cached) {
+          initialStates[target.videoId] = {
+            status: "analyzed",
+            analysis: cached,
+          };
+          analyzedCount += 1;
+        } else {
+          initialStates[target.videoId] = { status: "transcript" };
+          pending.push(target);
+        }
+      });
+      setSongStates(initialStates);
+
+      if (pending.length === 0) {
+        setStage("idle");
+        toast.success(`${analyzedCount}곡 AI 분석 완료`);
+        return;
+      }
+
+      const collected = await Promise.all(
+        pending.map(async (target) => {
+          try {
+            let text = await getCachedTranscript(target.videoId);
+            if (text === null) {
+              const transcript = await queryClient.fetchQuery(
+                youtubeQueries.transcript(target.videoId),
+              );
+              text = transcript.text;
+              await cacheTranscript(target.videoId, text);
+            }
+            setSongState(target.videoId, { status: "analyzing" });
+            return { ...target, text };
+          } catch {
+            setSongState(target.videoId, {
+              status: "error",
+              message: "가사를 가져오지 못했습니다",
+            });
+            return null;
+          }
+        }),
+      );
+
+      const withTranscript = collected.filter((item) => item !== null);
+
+      if (withTranscript.length === 0) {
+        setStage("idle");
+        if (analyzedCount > 0) {
+          toast.success(`${analyzedCount}곡 AI 분석 완료`);
+        } else {
+          toast.error("자막을 가져오지 못해 분석을 진행할 수 없습니다.");
+        }
+        return;
+      }
+
+      setStage("analyze");
+      const engine = await getMusicLlmEngine();
+      for (const item of withTranscript) {
+        try {
+          const completion = await engine.chat.completions.create({
+            messages: buildSongAnalysisMessages(item.title, item.text),
+            response_format: {
+              type: "json_object",
+              schema: SONG_ANALYSIS_SCHEMA,
+            },
+            temperature: 0.3,
+          });
+          const analysis = parseSongAnalysis(
+            completion.choices[0]?.message?.content ?? "",
+          );
+          analysis.autoCaption = isAutoGeneratedCaption(item.text);
+          setSongState(item.videoId, { status: "analyzed", analysis });
+          await cacheAnalysis(item.videoId, analysis);
+          analyzedCount += 1;
+        } catch (error) {
+          const reason = error instanceof Error ? error.message : String(error);
+          setSongState(item.videoId, {
+            status: "error",
+            message: `AI 분석에 실패했습니다 (${reason.slice(0, 80)})`,
+          });
+        }
+      }
+
+      setStage("idle");
+      toast.success(`${analyzedCount}곡 AI 분석 완료`);
+    } catch {
+      const modelState = getModelStateSnapshot();
+      toast.error(
+        modelState.status === "error"
+          ? modelState.message
+          : "AI 분석 중 오류가 발생했습니다.",
+      );
+      setStage("idle");
+      setSongStates((prev) => {
+        const next = { ...prev };
+        for (const id of Object.keys(next)) {
+          if (
+            next[id].status === "transcript" ||
+            next[id].status === "analyzing"
+          ) {
+            next[id] = {
+              status: "error",
+              message: "AI 분석을 진행할 수 없습니다.",
+            };
+          }
+        }
+        return next;
+      });
+    }
+  };
+
+  return {
+    stage,
+    isAnalyzing,
+    songStates,
+    handleAnalyze,
+    loadCachedAnalyses,
+  };
+}
diff --git a/src/features/wake-up-music-analysis/ui/AiIssuesPanel.tsx b/src/features/wake-up-music-analysis/ui/AiIssuesPanel.tsx
new file mode 100644
index 00000000..f5ccd18e
--- /dev/null
+++ b/src/features/wake-up-music-analysis/ui/AiIssuesPanel.tsx
@@ -0,0 +1,109 @@
+import { Skeleton } from "@/shared/ui/Skeleton";
+import { parseLeadingTimestamp } from "@/features/wake-up-music-analysis/lib/songAnalysis";
+import type { SongAnalysis } from "@/features/wake-up-music-analysis/lib/songAnalysis";
+import type { AiSongState } from "@/features/wake-up-music-analysis/model/useWakeUpMusicAiAnalysis";
+
+interface AiIssuesPanelProps {
+  state?: AiSongState;
+  onSeek: (seconds: number) => void;
+}
+
+function AiIssuesPanelEmpty() {
+  return (
+    <div className="flex flex-1 items-center justify-center px-4">
+      <span className="text-text-3 text-sub-1 line-clamp-2 max-w-full text-center font-medium break-all">
+        AI 분석 결과가 없습니다.
+      </span>
+    </div>
+  );
+}
+
+function AiIssuesPanelLoading() {
+  return (
+    <div className="flex min-h-0 flex-1 flex-col gap-3 overflow-hidden">
+      <Skeleton className="h-4 w-2/3 rounded" />
+      {Array.from({ length: 4 }).map((_, index) => (
+        <Skeleton key={index} className="h-12 w-full rounded-xl" />
+      ))}
+    </div>
+  );
+}
+
+function AiIssuesPanelError({ message }: { message: string }) {
+  return (
+    <div className="flex flex-1 items-center justify-center px-4">
+      <span className="text-text-3 text-negative line-clamp-2 max-w-full text-center font-medium break-all">
+        {message}
+      </span>
+    </div>
+  );
+}
+
+function AiIssuesPanelResult({
+  analysis,
+  onSeek,
+}: {
+  analysis: SongAnalysis;
+  onSeek: (seconds: number) => void;
+}) {
+  return (
+    <div className="flex min-h-0 flex-1 flex-col gap-3 overflow-y-auto">
+      {analysis.summary && (
+        <p className="text-sub-1 text-caption-1">{analysis.summary}</p>
+      )}
+      {analysis.issues.length > 0 ? (
+        <ul className="flex flex-col gap-2">
+          {analysis.issues.map((issue, index) => {
+            const timestamp = parseLeadingTimestamp(issue);
+
+            return (
+              <li
+                key={index}
+                className="border-sub-4 bg-background-surface text-caption-1 text-main-text rounded-xl border px-4 py-3"
+              >
+                {timestamp ? (
+                  <>
+                    <button
+                      type="button"
+                      onClick={() => onSeek(timestamp.seconds)}
+                      className="text-p-1 cursor-pointer font-medium underline"
+                    >
+                      [{timestamp.time}]
+                    </button>{" "}
+                    {timestamp.rest}
+                  </>
+                ) : (
+                  issue
+                )}
+              </li>
+            );
+          })}
+        </ul>
+      ) : (
+        <AiIssuesPanel.Empty />
+      )}
+    </div>
+  );
+}
+
+function AiIssuesPanel({ state, onSeek }: AiIssuesPanelProps) {
+  if (!state) {
+    return <AiIssuesPanel.Empty />;
+  }
+
+  if (state.status === "transcript" || state.status === "analyzing") {
+    return <AiIssuesPanel.Loading />;
+  }
+
+  if (state.status === "error") {
+    return <AiIssuesPanel.Error message={state.message} />;
+  }
+
+  return <AiIssuesPanelResult analysis={state.analysis} onSeek={onSeek} />;
+}
+
+AiIssuesPanel.Empty = AiIssuesPanelEmpty;
+AiIssuesPanel.Loading = AiIssuesPanelLoading;
+AiIssuesPanel.Error = AiIssuesPanelError;
+
+export { AiIssuesPanel };
diff --git a/src/features/wake-up-music-analysis/ui/AiModelIndicator.tsx b/src/features/wake-up-music-analysis/ui/AiModelIndicator.tsx
new file mode 100644
index 00000000..ead2d335
--- /dev/null
+++ b/src/features/wake-up-music-analysis/ui/AiModelIndicator.tsx
@@ -0,0 +1,31 @@
+"use client";
+
+import { useModelState } from "@/entities/ai/model/useModelState";
+
+export function AiModelIndicator() {
+  const modelState = useModelState();
+
+  if (modelState.status === "idle") return null;
+
+  const variantStyles = {
+    loading: "text-sub-1",
+    ready: "text-p-1",
+    error: "text-negative",
+  } as const;
+
+  const label =
+    modelState.status === "loading"
+      ? `모델 로드 ${Math.round(modelState.progress * 100)}%`
+      : modelState.status === "ready"
+        ? "준비됨"
+        : "미지원";
+
+  return (
+    <span
+      className={`text-caption-2 whitespace-nowrap ${variantStyles[modelState.status]}`}
+      title={modelState.status === "error" ? modelState.message : undefined}
+    >
+      {label}
+    </span>
+  );
+}
diff --git a/src/features/wake-up-music-analysis/ui/AiRatingBadge.tsx b/src/features/wake-up-music-analysis/ui/AiRatingBadge.tsx
new file mode 100644
index 00000000..d26dee7c
--- /dev/null
+++ b/src/features/wake-up-music-analysis/ui/AiRatingBadge.tsx
@@ -0,0 +1,45 @@
+import type { AiSongState } from "@/features/wake-up-music-analysis/model/useWakeUpMusicAiAnalysis";
+import type { SongRating } from "@/features/wake-up-music-analysis/lib/songAnalysis";
+
+const ratingStyles: Record<SongRating, string> = {
+  적합: "text-p-1 bg-p-3",
+  주의: "text-orange-300 bg-sub-3",
+  부적합: "text-negative bg-sub-3",
+};
+
+interface AiRatingBadgeProps {
+  state?: AiSongState;
+}
+
+export function AiRatingBadge({ state }: AiRatingBadgeProps) {
+  if (!state) return null;
+
+  if (state.status === "transcript" || state.status === "analyzing") {
+    return (
+      <span className="text-sub-1 text-caption-2">
+        {state.status === "transcript" ? "자막 수집 중…" : "분석 중…"}
+      </span>
+    );
+  }
+
+  if (state.status === "error") {
+    return <span className="text-negative text-caption-2">분석 실패</span>;
+  }
+
+  return (
+    <div className="flex gap-2">
+      <span
+        className={`text-caption-2 w-fit rounded-full px-2 py-0.5 ${ratingStyles[state.analysis.rating]}`}
+      >
+        {state.analysis.rating}
+      </span>
+      {state.analysis.autoCaption && (
+        <span
+          className={`text-caption-2 w-fit rounded-full px-2 py-0.5 ${ratingStyles["주의"]}`}
+        >
+          자동 생성
+        </span>
+      )}
+    </div>
+  );
+}
diff --git a/src/features/wake-up-music-analysis/ui/AiSongThumbnailLoading.tsx b/src/features/wake-up-music-analysis/ui/AiSongThumbnailLoading.tsx
new file mode 100644
index 00000000..d52b9818
--- /dev/null
+++ b/src/features/wake-up-music-analysis/ui/AiSongThumbnailLoading.tsx
@@ -0,0 +1,27 @@
+"use client";
+
+import VinylRecord from "@/shared/asset/svg/VinylRecord";
+import Chatbot from "@/shared/asset/svg/Chatbot";
+
+interface AiSongThumbnailLoadingProps {
+  variant: "transcript" | "analyzing";
+}
+
+export function AiSongThumbnailLoading({
+  variant,
+}: AiSongThumbnailLoadingProps) {
+  return (
+    <span className="bg-background/70 pointer-events-none absolute inset-0 z-10 flex items-center justify-center rounded-lg">
+      {variant === "analyzing" ? (
+        <span className="relative grid animate-spin place-items-center motion-reduce:animate-none">
+          <VinylRecord size={36} />
+          <span className="pointer-events-none absolute block size-3">
+            <Chatbot />
+          </span>
+        </span>
+      ) : (
+        <span className="border-sub-3 border-t-p-1 size-7 animate-spin rounded-full border-[3px] motion-reduce:animate-none" />
+      )}
+    </span>
+  );
+}
diff --git a/src/features/wake-up-music-analysis/ui/MusicPlayerPanel.tsx b/src/features/wake-up-music-analysis/ui/MusicPlayerPanel.tsx
new file mode 100644
index 00000000..2af400e0
--- /dev/null
+++ b/src/features/wake-up-music-analysis/ui/MusicPlayerPanel.tsx
@@ -0,0 +1,101 @@
+import Back from "@/shared/asset/svg/Back";
+import { YoutubeEmbed } from "@/entities/music/ui/YoutubeEmbed";
+import { NoteText } from "@/shared/ui/NoteText";
+import { NoteTooltip } from "@/shared/ui/NoteTooltip";
+import { AiRatingBadge } from "@/features/wake-up-music-analysis/ui/AiRatingBadge";
+import { AiIssuesPanel } from "@/features/wake-up-music-analysis/ui/AiIssuesPanel";
+import type { AiSongState } from "@/features/wake-up-music-analysis/model/useWakeUpMusicAiAnalysis";
+
+interface MusicPlayerPanelProps {
+  videoId: string | null;
+  start: number;
+  autoPlay: boolean;
+  title: string;
+  canPrev: boolean;
+  canNext: boolean;
+  onPrev: () => void;
+  onNext: () => void;
+  showAi: boolean;
+  aiState?: AiSongState;
+  onSeek: (seconds: number) => void;
+}
+
+export function MusicPlayerPanel({
+  videoId,
+  start,
+  autoPlay,
+  title,
+  canPrev,
+  canNext,
+  onPrev,
+  onNext,
+  showAi,
+  aiState,
+  onSeek,
+}: MusicPlayerPanelProps) {
+  return (
+    <div data-tooltip-card className="flex min-w-0 flex-1 flex-col gap-4">
+      <div className="bg-sub-4 rounded-2xl">
+        {videoId ? (
+          <YoutubeEmbed videoId={videoId} start={start} autoPlay={autoPlay} />
+        ) : (
+          <div className="text-sub-1 text-caption-1 flex aspect-video items-center justify-center">
+            재생할 수 있는 영상이 없습니다.
+          </div>
+        )}
+      </div>
+
+      <div className="flex items-center justify-between gap-3 py-2">
+        <button
+          type="button"
+          onClick={onPrev}
+          disabled={!canPrev}
+          className="text-caption-2 text-sub-1 hover:text-p-1 disabled:text-sub-3 inline-flex cursor-pointer items-center gap-1 transition-colors disabled:cursor-default"
+        >
+          <Back direction="left" size={16} />
+          이전곡
+        </button>
+        <span className="text-title-4 text-main-text min-w-0 flex-1 truncate text-center font-semibold">
+          {title}
+        </span>
+        <button
+          type="button"
+          onClick={onNext}
+          disabled={!canNext}
+          className="text-caption-2 text-sub-1 hover:text-p-1 disabled:text-sub-3 inline-flex cursor-pointer items-center gap-1 transition-colors disabled:cursor-default"
+        >
+          다음곡
+          <Back direction="right" size={16} />
+        </button>
+      </div>
+
+      {showAi && (
+        <div className="flex min-h-0 flex-col gap-4 max-lg:h-80 lg:flex-1">
+          <div className="flex flex-col gap-2">
+            <div className="flex items-center justify-between gap-2">
+              <div className="flex items-center gap-1.5">
+                <span className="text-text-2 text-main-text font-semibold">
+                  AI 분석
+                </span>
+                <NoteTooltip
+                  className=""
+                  ariaLabel="AI 분석 안내 보기"
+                  notes={[
+                    "분석에는 수 분이 걸릴 수 있으며, 너무 자주 실행하면 자막 추출이 차단될 수 있으니 하루 5회 이하 사용을 권장드립니다.",
+                    "※ 동일한 영상일 경우 다시 분석되지 않지만 브라우저 캐시를 초기화할 경우 다시 분석됩니다.",
+                  ]}
+                />
+              </div>
+              <AiRatingBadge state={aiState} />
+            </div>
+            <NoteText multiline>
+              ※ 해당 분석 결과는 AI로 생성되었으며 실수할 수 있습니다. 응답을
+              다시 한번 확인해 주세요.
+            </NoteText>
+          </div>
+          <AiIssuesPanel state={aiState} onSeek={onSeek} />
+        </div>
+      )}
+    </div>
+  );
+}
diff --git a/src/features/wake-up-music/model/useAiMusicRecommend.ts b/src/features/wake-up-music-recommend/model/useAiMusicRecommend.ts
similarity index 100%
rename from src/features/wake-up-music/model/useAiMusicRecommend.ts
rename to src/features/wake-up-music-recommend/model/useAiMusicRecommend.ts
diff --git a/src/features/wake-up-music/model/useApplyRecommendedMusic.ts b/src/features/wake-up-music-recommend/model/useApplyRecommendedMusic.ts
similarity index 100%
rename from src/features/wake-up-music/model/useApplyRecommendedMusic.ts
rename to src/features/wake-up-music-recommend/model/useApplyRecommendedMusic.ts
diff --git a/src/features/wake-up-music/ui/MusicRecommendButton.tsx b/src/features/wake-up-music-recommend/ui/MusicRecommendButton.tsx
similarity index 100%
rename from src/features/wake-up-music/ui/MusicRecommendButton.tsx
rename to src/features/wake-up-music-recommend/ui/MusicRecommendButton.tsx
diff --git a/src/features/wake-up-music/ui/MusicRecommendCard.tsx b/src/features/wake-up-music-recommend/ui/MusicRecommendCard.tsx
similarity index 100%
rename from src/features/wake-up-music/ui/MusicRecommendCard.tsx
rename to src/features/wake-up-music-recommend/ui/MusicRecommendCard.tsx
diff --git a/src/features/wake-up-music/ui/MusicRecommendLoading.tsx b/src/features/wake-up-music-recommend/ui/MusicRecommendLoading.tsx
similarity index 100%
rename from src/features/wake-up-music/ui/MusicRecommendLoading.tsx
rename to src/features/wake-up-music-recommend/ui/MusicRecommendLoading.tsx
diff --git a/src/features/wake-up-music/ui/MusicRecommendModal.tsx b/src/features/wake-up-music-recommend/ui/MusicRecommendModal.tsx
similarity index 93%
rename from src/features/wake-up-music/ui/MusicRecommendModal.tsx
rename to src/features/wake-up-music-recommend/ui/MusicRecommendModal.tsx
index 7e3a0ac6..c49492bf 100644
--- a/src/features/wake-up-music/ui/MusicRecommendModal.tsx
+++ b/src/features/wake-up-music-recommend/ui/MusicRecommendModal.tsx
@@ -2,12 +2,12 @@
 
 import SmallStar from "@/shared/asset/svg/SmallStar";
 import Cancel from "@/shared/asset/svg/Cancel";
-import MusicRecommendCard from "@/features/wake-up-music/ui/MusicRecommendCard";
+import MusicRecommendCard from "@/features/wake-up-music-recommend/ui/MusicRecommendCard";
 import { TextButton } from "@/shared/ui/Button/TextButton";
 import RetryButton from "@/shared/ui/Button/RetryButton";
-import { useAiMusicRecommend } from "@/features/wake-up-music/model/useAiMusicRecommend";
+import { useAiMusicRecommend } from "@/features/wake-up-music-recommend/model/useAiMusicRecommend";
 import { NoteText } from "@/shared/ui/NoteText";
-import { MusicRecommendLoading } from "@/features/wake-up-music/ui/MusicRecommendLoading";
+import { MusicRecommendLoading } from "@/features/wake-up-music-recommend/ui/MusicRecommendLoading";
 
 interface MusicRecommendModalProps {
   open: boolean;
diff --git a/src/features/wake-up-music/ui/WakeUpMusicRecommend.tsx b/src/features/wake-up-music-recommend/ui/WakeUpMusicRecommend.tsx
similarity index 75%
rename from src/features/wake-up-music/ui/WakeUpMusicRecommend.tsx
rename to src/features/wake-up-music-recommend/ui/WakeUpMusicRecommend.tsx
index 9b20b544..0070e234 100644
--- a/src/features/wake-up-music/ui/WakeUpMusicRecommend.tsx
+++ b/src/features/wake-up-music-recommend/ui/WakeUpMusicRecommend.tsx
@@ -1,9 +1,9 @@
 "use client";
 
 import { useState } from "react";
-import { MusicRecommendButton } from "@/features/wake-up-music/ui/MusicRecommendButton";
-import { MusicRecommendModal } from "@/features/wake-up-music/ui/MusicRecommendModal";
-import { useApplyRecommendedMusic } from "@/features/wake-up-music/model/useApplyRecommendedMusic";
+import { MusicRecommendButton } from "@/features/wake-up-music-recommend/ui/MusicRecommendButton";
+import { MusicRecommendModal } from "@/features/wake-up-music-recommend/ui/MusicRecommendModal";
+import { useApplyRecommendedMusic } from "@/features/wake-up-music-recommend/model/useApplyRecommendedMusic";
 
 interface WakeUpMusicRecommendProps {
   className?: string;
diff --git a/src/features/wake-up-music/lib/date.ts b/src/features/wake-up-music/lib/date.ts
deleted file mode 100644
index b941c92c..00000000
--- a/src/features/wake-up-music/lib/date.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-import type { Temporal } from "temporal-polyfill";
-import { todayKst } from "@/shared/lib/kst";
-
-export function getInitialMusicDate(): Temporal.PlainDate {
-  return todayKst();
-}
diff --git a/src/features/wake-up-music/model/useWakeUpMusic.ts b/src/features/wake-up-music/model/useWakeUpMusic.ts
index 5a20f64b..35af430a 100644
--- a/src/features/wake-up-music/model/useWakeUpMusic.ts
+++ b/src/features/wake-up-music/model/useWakeUpMusic.ts
@@ -15,7 +15,6 @@ import { userQueries } from "@/entities/user/api/userQueries";
 import { formatDateParam } from "@/shared/lib/date";
 import { todayKst } from "@/shared/lib/kst";
 import { createMusicPermission } from "@/entities/dormitory/lib/musicPermission";
-import { getInitialMusicDate } from "@/features/wake-up-music/lib/date";
 import { musicUrlSchema } from "@/features/wake-up-music/lib/wakeUpMusicSchema";
 import { extractYoutubeVideoId } from "@/entities/music/lib/youtube";
 import { youtubeQueries } from "@/entities/music/api/youtubeQueries";
@@ -23,7 +22,7 @@ import { youtubeQueries } from "@/entities/music/api/youtubeQueries";
 export function useWakeUpMusic(filterParams?: DormitoryMusicQueryParams) {
   const queryClient = useQueryClient();
   const [urlInput, setUrlInput] = useState("");
-  const [selectedDate, setSelectedDate] = useState(getInitialMusicDate);
+  const [selectedDate, setSelectedDate] = useState(todayKst);
 
   const canApply = musicUrlSchema.safeParse(urlInput).success;
 
@@ -153,7 +152,10 @@ export function useWakeUpMusic(filterParams?: DormitoryMusicQueryParams) {
     },
   });
 
-  const { canDeleteAnyMusic } = createMusicPermission({ role: me?.role });
+  const { canDeleteAnyMusic, canUseAiAnalysis } = createMusicPermission({
+    role: me?.role,
+    name: me?.name,
+  });
 
   return {
     urlInput,
@@ -165,6 +167,7 @@ export function useWakeUpMusic(filterParams?: DormitoryMusicQueryParams) {
     songs: enrichedSongs,
     me,
     canDeleteAnyMusic,
+    canUseAiAnalysis,
     applyMutation,
     handleApplyMusic,
     likeMutation,
diff --git a/src/features/wake-up-music/ui/MusicListModal.tsx b/src/features/wake-up-music/ui/MusicListModal.tsx
index b2c99727..1f0057e5 100644
--- a/src/features/wake-up-music/ui/MusicListModal.tsx
+++ b/src/features/wake-up-music/ui/MusicListModal.tsx
@@ -1,16 +1,37 @@
 "use no memo";
 "use client";
 
+import { useState } from "react";
 import { MusicListItem } from "@/entities/music/ui/MusicListItem";
 import type { DormitoryMusic } from "@/entities/dormitory/model/dormitory";
+import { extractYoutubeVideoId } from "@/entities/music/lib/youtube";
 import { MusicFilterDropdown } from "@/features/wake-up-music/ui/MusicFilterDropdown";
+import { NoteText } from "@/shared/ui/NoteText";
 import type { WakeUpMusicSort } from "@/features/wake-up-music/model/useMusicFilter";
+import type {
+  AiAnalysisController,
+  AnalysisStage,
+} from "@/features/wake-up-music-analysis/model/useWakeUpMusicAiAnalysis";
+import { AiSongThumbnailLoading } from "@/features/wake-up-music-analysis/ui/AiSongThumbnailLoading";
+import { AiRatingBadge } from "@/features/wake-up-music-analysis/ui/AiRatingBadge";
+import { AiModelIndicator } from "@/features/wake-up-music-analysis/ui/AiModelIndicator";
+import { MusicPlayerPanel } from "@/features/wake-up-music-analysis/ui/MusicPlayerPanel";
+import { useModelState } from "@/entities/ai/model/useModelState";
+import Sidebar from "@/shared/asset/svg/Sidebar";
+
+const AI_BUTTON_LABELS = {
+  idle: "AI 분석",
+  transcript: "자막 수집 중…",
+  analyze: "분석 중…",
+} as const satisfies Record<AnalysisStage, string>;
 
 interface MusicListModalProps {
   isOpen: boolean;
   songs: DormitoryMusic[];
   meId?: number | null;
   canDeleteAnyMusic?: boolean;
+  canUseAiAnalysis?: boolean;
+  aiAnalysis?: AiAnalysisController;
   sort: WakeUpMusicSort;
   onSortChange: (sort: WakeUpMusicSort) => void;
   filterButtonLabel: string;
@@ -33,6 +54,8 @@ export function MusicListModal({
   songs,
   meId,
   canDeleteAnyMusic = false,
+  canUseAiAnalysis = false,
+  aiAnalysis,
   sort,
   onSortChange,
   filterButtonLabel,
@@ -43,8 +66,62 @@ export function MusicListModal({
   likeMutation,
   cancelMutation,
 }: MusicListModalProps) {
+  const [selectedMusicId, setSelectedMusicId] = useState<number | null>(
+    () => songs[0]?.id ?? null,
+  );
+  const [seekStart, setSeekStart] = useState(0);
+  const [seekAutoplay, setSeekAutoplay] = useState(false);
+  const [isPlayerOpen, setIsPlayerOpen] = useState(false);
+  const modelState = useModelState();
+
   if (!isOpen) return null;
 
+  const selectedIndex = songs.findIndex((song) => song.id === selectedMusicId);
+  const resolvedIndex = selectedIndex >= 0 ? selectedIndex : 0;
+
+  const showAi = canUseAiAnalysis && Boolean(aiAnalysis);
+  const selectedSong = songs[resolvedIndex];
+  const selectedVideoId = selectedSong
+    ? extractYoutubeVideoId(selectedSong.videoUrl ?? selectedSong.musicUrl)
+    : null;
+  const selectedAiState = selectedVideoId
+    ? aiAnalysis?.songStates[selectedVideoId]
+    : undefined;
+  const selectedTitle = selectedSong?.title ?? selectedSong?.musicUrl ?? "";
+
+  const handleSeek = (seconds: number) => {
+    setSeekStart(seconds);
+    setSeekAutoplay(true);
+  };
+
+  const goToSong = (musicId: number) => {
+    setSelectedMusicId(musicId);
+    setSeekStart(0);
+    setSeekAutoplay(false);
+    setIsPlayerOpen(true);
+  };
+
+  const togglePlayer = () => {
+    if (!isPlayerOpen) setSeekAutoplay(false);
+    setIsPlayerOpen((prev) => !prev);
+  };
+
+  const goPrev = () => {
+    if (resolvedIndex > 0) {
+      setSelectedMusicId(songs[resolvedIndex - 1].id);
+      setSeekStart(0);
+      setSeekAutoplay(false);
+    }
+  };
+
+  const goNext = () => {
+    if (resolvedIndex < songs.length - 1) {
+      setSelectedMusicId(songs[resolvedIndex + 1].id);
+      setSeekStart(0);
+      setSeekAutoplay(false);
+    }
+  };
+
   return (
     <div
       className="bg-background/50 fixed inset-0 z-50 flex cursor-default items-center justify-center overflow-y-auto px-5 py-10"
@@ -53,19 +130,47 @@ export function MusicListModal({
       }}
     >
       <div
-        className="bg-background-surface mx-auto flex max-h-[calc(100vh-120px)] w-full max-w-[1400px] flex-col gap-6 overflow-hidden rounded-3xl p-8 shadow-[0_16px_80px_rgba(0,0,0,0.18)] sm:my-6"
+        className="bg-background-surface mx-auto flex h-[calc(100vh-120px)] w-full max-w-[1400px] flex-col gap-6 overflow-hidden rounded-3xl p-8 shadow-[0_16px_80px_rgba(0,0,0,0.18)]"
         onClick={(event) => event.stopPropagation()}
       >
         <div className="flex flex-col gap-2 sm:flex-row sm:items-end sm:justify-between">
-          <div>
-            <span className="text-main-text text-text-1 font-semibold">
-              기상음악 신청 목록
-            </span>
-            <div className="text-sub-1 text-caption-1 mt-1">
-              현재 {songs.length}개의 신청 곡을 한꺼번에 확인할 수 있습니다.
+          <div className="flex min-w-0 items-start gap-3">
+            {songs.length > 0 && (
+              <button
+                type="button"
+                onClick={togglePlayer}
+                className="border-sub-4 bg-background hover:bg-sub-4 mt-0.5 flex size-8 shrink-0 cursor-pointer items-center justify-center rounded-lg border transition-colors"
+                aria-label={isPlayerOpen ? "플레이어 닫기" : "플레이어 열기"}
+              >
+                <Sidebar isActive={isPlayerOpen} size={16} />
+              </button>
+            )}
+            <div className="min-w-0">
+              <span className="text-main-text text-text-1 font-semibold">
+                기상음악 신청 목록
+              </span>
+              <NoteText multiline>
+                현재 {songs.length}개의 신청 곡을 한꺼번에 확인할 수 있습니다.
+              </NoteText>
             </div>
           </div>
+
           <div className="flex items-center gap-3">
+            {showAi && aiAnalysis && (
+              <div className="flex items-center gap-2">
+                <AiModelIndicator />
+                <button
+                  type="button"
+                  onClick={aiAnalysis.handleAnalyze}
+                  disabled={
+                    aiAnalysis.isAnalyzing || modelState.status === "error"
+                  }
+                  className="text-caption-1 text-p-1 hover:bg-surface disabled:text-sub-3 cursor-pointer rounded px-2 py-1 transition-colors disabled:cursor-default disabled:hover:bg-transparent"
+                >
+                  {AI_BUTTON_LABELS[aiAnalysis.stage]}
+                </button>
+              </div>
+            )}
             <MusicFilterDropdown
               sort={sort}
               onSortChange={onSortChange}
@@ -82,33 +187,80 @@ export function MusicListModal({
           </div>
         </div>
 
-        <div className="border-sub-4 bg-background flex min-h-0 flex-1 flex-col overflow-hidden rounded-3xl border p-6 shadow-inner">
+        <div className="border-sub-4 bg-background flex min-h-0 flex-1 flex-col rounded-3xl border p-6 shadow-inner max-lg:overflow-y-auto">
           {songs.length === 0 ? (
             <div className="text-sub-1 text-caption-1 py-16 text-center">
               신청된 음악이 없습니다.
             </div>
           ) : (
-            <div className="min-h-0 min-w-0 flex-1 overflow-x-hidden overflow-y-auto">
-              {songs.map((music) => (
-                <MusicListItem
-                  key={music.id}
-                  music={music}
-                  isLikePending={
-                    likeMutation.isPending &&
-                    likeMutation.variables?.id === music.id
-                  }
-                  onToggleLike={() => onToggleLike(music)}
-                  onDelete={
-                    meId && (meId === music.userId || canDeleteAnyMusic)
-                      ? () => onDelete(music.id)
-                      : undefined
-                  }
-                  isDeletePending={
-                    cancelMutation.isPending &&
-                    cancelMutation.variables === music.id
-                  }
+            <div
+              className={`flex h-full min-w-0 flex-1 lg:min-h-0 ${
+                isPlayerOpen ? "flex-col gap-6 lg:flex-row" : "flex-col"
+              }`}
+            >
+              {isPlayerOpen && (
+                <MusicPlayerPanel
+                  videoId={selectedVideoId}
+                  start={seekStart}
+                  autoPlay={seekAutoplay}
+                  title={selectedTitle}
+                  canPrev={resolvedIndex > 0}
+                  canNext={resolvedIndex < songs.length - 1}
+                  onPrev={goPrev}
+                  onNext={goNext}
+                  showAi={showAi}
+                  aiState={selectedAiState}
+                  onSeek={handleSeek}
                 />
-              ))}
+              )}
+
+              <aside className="flex min-h-0 flex-1 flex-col overflow-hidden max-lg:min-h-40">
+                <div className="border-sub-4 min-h-0 min-w-0 flex-1 overflow-x-hidden overflow-y-auto rounded-2xl border">
+                  {songs.map((music) => {
+                    const videoId = extractYoutubeVideoId(
+                      music.videoUrl ?? music.musicUrl,
+                    );
+                    const aiState = videoId
+                      ? aiAnalysis?.songStates[videoId]
+                      : undefined;
+
+                    return (
+                      <MusicListItem
+                        key={music.id}
+                        music={music}
+                        isSelected={music.id === selectedSong?.id}
+                        onSelect={() => goToSong(music.id)}
+                        aiStatus={
+                          showAi && aiState ? (
+                            <AiRatingBadge state={aiState} />
+                          ) : undefined
+                        }
+                        thumbnailOverlay={
+                          showAi &&
+                          (aiState?.status === "transcript" ||
+                            aiState?.status === "analyzing") ? (
+                            <AiSongThumbnailLoading variant={aiState.status} />
+                          ) : undefined
+                        }
+                        onToggleLike={() => onToggleLike(music)}
+                        isLikePending={
+                          likeMutation.isPending &&
+                          likeMutation.variables?.id === music.id
+                        }
+                        onDelete={
+                          meId && (meId === music.userId || canDeleteAnyMusic)
+                            ? () => onDelete(music.id)
+                            : undefined
+                        }
+                        isDeletePending={
+                          cancelMutation.isPending &&
+                          cancelMutation.variables === music.id
+                        }
+                      />
+                    );
+                  })}
+                </div>
+              </aside>
             </div>
           )}
         </div>
diff --git a/src/features/wake-up-music/ui/WakeUpMusicSection.tsx b/src/features/wake-up-music/ui/WakeUpMusicSection.tsx
index e2c86008..0a96cdde 100644
--- a/src/features/wake-up-music/ui/WakeUpMusicSection.tsx
+++ b/src/features/wake-up-music/ui/WakeUpMusicSection.tsx
@@ -9,8 +9,9 @@ import { NoteText } from "@/shared/ui/NoteText";
 import TextField from "@/shared/ui/textField";
 import Music from "@/shared/asset/svg/Music";
 import { MusicListModal } from "@/features/wake-up-music/ui/MusicListModal";
-import { WakeUpMusicRecommend } from "@/features/wake-up-music/ui/WakeUpMusicRecommend";
+import { WakeUpMusicRecommend } from "@/features/wake-up-music-recommend/ui/WakeUpMusicRecommend";
 import { useWakeUpMusic } from "@/features/wake-up-music/model/useWakeUpMusic";
+import { useWakeUpMusicAiAnalysis } from "@/features/wake-up-music-analysis/model/useWakeUpMusicAiAnalysis";
 import { MusicFilterDropdown } from "@/features/wake-up-music/ui/MusicFilterDropdown";
 import { useMusicFilter } from "@/features/wake-up-music/model/useMusicFilter";
 
@@ -41,16 +42,23 @@ export function WakeUpMusicSection({
     songs,
     me,
     canDeleteAnyMusic,
+    canUseAiAnalysis,
     applyMutation,
     handleApplyMusic,
     likeMutation,
     cancelMutation,
   } = useWakeUpMusic(filterParams);
 
+  const aiAnalysis = useWakeUpMusicAiAnalysis(songs);
   const [isListModalOpen, setIsListModalOpen] = useState(false);
 
   const isApplyDisabled = !isToday || !canApply || applyMutation.isPending;
 
+  const handleOpenList = () => {
+    setIsListModalOpen(true);
+    if (canUseAiAnalysis) aiAnalysis.loadCachedAnalyses();
+  };
+
   return (
     <section
       className={`bg-background-surface relative flex h-auto flex-col gap-6 rounded-2xl p-5 sm:p-6 lg:h-[424px] 2xl:h-[520px] ${className ?? ""}`}
@@ -69,7 +77,7 @@ export function WakeUpMusicSection({
         <div className="flex shrink-0 items-center gap-2">
           <button
             type="button"
-            onClick={() => setIsListModalOpen(true)}
+            onClick={handleOpenList}
             className="text-caption-1 text-sub-1 hover:bg-surface cursor-pointer rounded px-2 py-1 transition-colors"
           >
             크게 보기
@@ -155,6 +163,8 @@ export function WakeUpMusicSection({
           songs={songs}
           meId={me?.id}
           canDeleteAnyMusic={canDeleteAnyMusic}
+          canUseAiAnalysis={canUseAiAnalysis}
+          aiAnalysis={aiAnalysis}
           sort={sort}
           onSortChange={setSort}
           filterButtonLabel={filterButtonLabel}
diff --git a/src/shared/asset/svg/Sidebar.tsx b/src/shared/asset/svg/Sidebar.tsx
new file mode 100644
index 00000000..ffa450be
--- /dev/null
+++ b/src/shared/asset/svg/Sidebar.tsx
@@ -0,0 +1,50 @@
+import type { SvgProps } from "@/shared/model/svg";
+
+export default function Sidebar({
+  isActive = false,
+  size = 24,
+  className,
+}: SvgProps) {
+  const color = isActive ? "var(--color-p-1)" : "var(--color-sub-2)";
+
+  return (
+    <svg
+      width={size}
+      height={size}
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      className={className}
+    >
+      <rect
+        x="3.5"
+        y="3.5"
+        width="17"
+        height="17"
+        rx="3"
+        stroke={color}
+        strokeWidth="1.6"
+      />
+      <path d="M11 3.5V20.5" stroke={color} strokeWidth="1.6" />
+      <path d="M6 8H9" stroke={color} strokeWidth="1.4" strokeLinecap="round" />
+      <path
+        d="M6 10.6H9"
+        stroke={color}
+        strokeWidth="1.4"
+        strokeLinecap="round"
+      />
+      <path
+        d="M6 13.2H9"
+        stroke={color}
+        strokeWidth="1.4"
+        strokeLinecap="round"
+      />
+      <path
+        d="M6 15.8H7.8"
+        stroke={color}
+        strokeWidth="1.4"
+        strokeLinecap="round"
+      />
+    </svg>
+  );
+}
diff --git a/src/shared/ui/NoteText.tsx b/src/shared/ui/NoteText.tsx
index 7b5186a7..94612ffd 100644
--- a/src/shared/ui/NoteText.tsx
+++ b/src/shared/ui/NoteText.tsx
@@ -3,13 +3,14 @@ import type { ReactNode } from "react";
 interface NoteTextProps {
   size?: "sm" | "md";
   tone?: "default" | "negative" | "primary";
+  multiline?: boolean;
   children: ReactNode;
   className?: string;
 }
 
 const sizeStyles = {
-  sm: "text-caption-2 min-w-0 truncate",
-  md: "min-w-0 truncate text-[15px] font-medium",
+  sm: "text-caption-2",
+  md: "text-[15px] font-medium",
 };
 
 const toneStyles = {
@@ -21,12 +22,15 @@ const toneStyles = {
 export function NoteText({
   size = "sm",
   tone = "default",
+  multiline = false,
   children,
   className,
 }: NoteTextProps) {
+  const wrapStyle = multiline ? "" : "min-w-0 truncate";
+
   return (
     <p
-      className={`${toneStyles[tone]} ${sizeStyles[size]}${className ? ` ${className}` : ""}`}
+      className={`${toneStyles[tone]} ${sizeStyles[size]}${wrapStyle ? ` ${wrapStyle}` : ""}${className ? ` ${className}` : ""}`}
     >
       {children}
     </p>