diff --git a/backend/routes/albums.js b/backend/routes/albums.js
index a58440a..f3929dc 100644
--- a/backend/routes/albums.js
+++ b/backend/routes/albums.js
@@ -62,7 +62,7 @@ async function getAlbumDetails(album) {
 router.get("/", async (req, res) => {
   try {
     const [albums] = await pool.query(
-      "SELECT id, title, album_type, album_type_short, release_date, cover_original_url, cover_medium_url, cover_thumb_url FROM albums ORDER BY release_date DESC"
+      "SELECT id, title, folder_name, album_type, album_type_short, release_date, cover_original_url, cover_medium_url, cover_thumb_url FROM albums ORDER BY release_date DESC"
     );
 
     // 각 앨범에 트랙 정보 추가
diff --git a/frontend/src/pages/mobile/public/AlbumDetail.jsx b/frontend/src/pages/mobile/public/AlbumDetail.jsx
index f62105c..b9adc57 100644
--- a/frontend/src/pages/mobile/public/AlbumDetail.jsx
+++ b/frontend/src/pages/mobile/public/AlbumDetail.jsx
@@ -1,34 +1,100 @@
-import { motion } from 'framer-motion';
-import { useState, useEffect } from 'react';
+import { motion, AnimatePresence } from 'framer-motion';
+import { useState, useEffect, useCallback } from 'react';
 import { useParams, useNavigate } from 'react-router-dom';
-import { ArrowLeft, Play } from 'lucide-react';
-import { getAlbums, getAlbumTracks } from '../../../api/public/albums';
+import { ArrowLeft, Play, Calendar, Music2, Clock, X, ChevronLeft, ChevronRight, Download } from 'lucide-react';
+import { getAlbumByName } from '../../../api/public/albums';
+import { formatDate } from '../../../utils/date';
 
 // 모바일 앨범 상세 페이지
 function MobileAlbumDetail() {
     const { name } = useParams();
     const navigate = useNavigate();
     const [album, setAlbum] = useState(null);
-    const [tracks, setTracks] = useState([]);
     const [loading, setLoading] = useState(true);
+    const [lightbox, setLightbox] = useState({ open: false, images: [], index: 0 });
+    const [imageLoaded, setImageLoaded] = useState(false);
+
+    // 라이트박스 네비게이션
+    const goToPrev = useCallback(() => {
+        if (lightbox.images.length <= 1) return;
+        setImageLoaded(false);
+        setLightbox(prev => ({
+            ...prev,
+            index: (prev.index - 1 + prev.images.length) % prev.images.length
+        }));
+    }, [lightbox.images.length]);
+
+    const goToNext = useCallback(() => {
+        if (lightbox.images.length <= 1) return;
+        setImageLoaded(false);
+        setLightbox(prev => ({
+            ...prev,
+            index: (prev.index + 1) % prev.images.length
+        }));
+    }, [lightbox.images.length]);
+
+    const closeLightbox = useCallback(() => {
+        setLightbox(prev => ({ ...prev, open: false }));
+    }, []);
+
+    // 이미지 다운로드
+    const downloadImage = useCallback(async () => {
+        const imageUrl = lightbox.images[lightbox.index];
+        if (!imageUrl) return;
+        
+        try {
+            const response = await fetch(imageUrl);
+            const blob = await response.blob();
+            const url = window.URL.createObjectURL(blob);
+            const link = document.createElement('a');
+            link.href = url;
+            link.download = `fromis9_photo_${String(lightbox.index + 1).padStart(2, '0')}.webp`;
+            document.body.appendChild(link);
+            link.click();
+            document.body.removeChild(link);
+            window.URL.revokeObjectURL(url);
+        } catch (error) {
+            console.error('다운로드 오류:', error);
+        }
+    }, [lightbox.images, lightbox.index]);
+
+    // 라이트박스 body 스크롤 방지
+    useEffect(() => {
+        if (lightbox.open) {
+            document.body.style.overflow = 'hidden';
+        } else {
+            document.body.style.overflow = '';
+        }
+        return () => { document.body.style.overflow = ''; };
+    }, [lightbox.open]);
 
     useEffect(() => {
-        // 앨범 정보 로드
-        getAlbums()
+        getAlbumByName(name)
             .then(data => {
-                const found = data.find(a => a.folder_name === name);
-                if (found) {
-                    setAlbum(found);
-                    // 트랙 정보 로드
-                    getAlbumTracks(found.id)
-                        .then(setTracks)
-                        .catch(console.error);
-                }
+                setAlbum(data);
                 setLoading(false);
             })
-            .catch(console.error);
+            .catch(error => {
+                console.error('앨범 로드 오류:', error);
+                setLoading(false);
+            });
     }, [name]);
 
+    // 총 재생 시간 계산
+    const getTotalDuration = () => {
+        if (!album?.tracks) return '';
+        let totalSeconds = 0;
+        album.tracks.forEach(track => {
+            if (track.duration) {
+                const parts = track.duration.split(':');
+                totalSeconds += parseInt(parts[0]) * 60 + parseInt(parts[1]);
+            }
+        });
+        const mins = Math.floor(totalSeconds / 60);
+        const secs = totalSeconds % 60;
+        return `${mins}:${String(secs).padStart(2, '0')}`;
+    };
+
     if (loading) {
         return (
             <div className="flex items-center justify-center h-64">
@@ -45,96 +111,325 @@ function MobileAlbumDetail() {
         );
     }
 
+    // 모든 컨셉 포토를 하나의 배열로
+    const allPhotos = album.conceptPhotos ? Object.values(album.conceptPhotos).flat() : [];
+
     return (
-        <div className="pb-6">
-            {/* 헤더 */}
-            <div className="sticky top-14 z-40 bg-white/80 backdrop-blur-sm px-4 py-3 flex items-center gap-3 border-b">
-                <button onClick={() => navigate(-1)} className="p-1">
-                    <ArrowLeft size={24} />
-                </button>
-                <span className="font-semibold truncate">{album.title}</span>
+        <>
+            <div className="pb-6">
+                {/* 헤더 */}
+                <div className="sticky top-14 z-40 bg-white/95 backdrop-blur-sm px-4 py-3 flex items-center gap-3 border-b border-gray-100">
+                    <button onClick={() => navigate(-1)} className="p-1 -ml-1">
+                        <ArrowLeft size={22} />
+                    </button>
+                    <span className="font-semibold truncate">{album.title}</span>
+                </div>
+
+                {/* 앨범 정보 섹션 */}
+                <div className="px-4 pt-5 pb-4">
+                    <div className="flex gap-4">
+                        {/* 앨범 커버 */}
+                        <motion.div 
+                            initial={{ opacity: 0, scale: 0.9 }}
+                            animate={{ opacity: 1, scale: 1 }}
+                            className="w-32 h-32 flex-shrink-0 rounded-2xl overflow-hidden shadow-lg"
+                            onClick={() => setLightbox({ 
+                                open: true, 
+                                images: [album.cover_original_url || album.cover_medium_url], 
+                                index: 0 
+                            })}
+                        >
+                            {album.cover_medium_url && (
+                                <img 
+                                    src={album.cover_medium_url} 
+                                    alt={album.title}
+                                    className="w-full h-full object-cover"
+                                />
+                            )}
+                        </motion.div>
+
+                        {/* 앨범 정보 */}
+                        <motion.div 
+                            initial={{ opacity: 0, x: 10 }}
+                            animate={{ opacity: 1, x: 0 }}
+                            className="flex-1 min-w-0"
+                        >
+                            <span className="inline-block px-2.5 py-1 bg-primary/10 text-primary text-xs font-medium rounded-full mb-2">
+                                {album.album_type}
+                            </span>
+                            <h1 className="text-xl font-bold mb-2 truncate">{album.title}</h1>
+                            
+                            {/* 메타 정보 */}
+                            <div className="flex flex-wrap items-center gap-x-3 gap-y-1 text-xs text-gray-500">
+                                <div className="flex items-center gap-1">
+                                    <Calendar size={12} />
+                                    <span>{formatDate(album.release_date, 'YYYY.MM.DD')}</span>
+                                </div>
+                                <div className="flex items-center gap-1">
+                                    <Music2 size={12} />
+                                    <span>{album.tracks?.length || 0}곡</span>
+                                </div>
+                                <div className="flex items-center gap-1">
+                                    <Clock size={12} />
+                                    <span>{getTotalDuration()}</span>
+                                </div>
+                            </div>
+                        </motion.div>
+                    </div>
+                </div>
+
+                {/* 티저 포토 */}
+                {album.teasers && album.teasers.length > 0 && (
+                    <motion.div 
+                        initial={{ opacity: 0 }}
+                        animate={{ opacity: 1 }}
+                        className="px-4 mb-5"
+                    >
+                        <p className="text-xs text-gray-400 mb-2">티저 포토</p>
+                        <div className="flex gap-2 overflow-x-auto pb-1 -mx-4 px-4">
+                            {album.teasers.map((teaser, index) => (
+                                <div 
+                                    key={index}
+                                    onClick={() => setLightbox({ 
+                                        open: true, 
+                                        images: album.teasers.map(t => t.original_url), 
+                                        index,
+                                        teasers: album.teasers
+                                    })}
+                                    className="w-20 h-20 flex-shrink-0 bg-gray-200 rounded-xl overflow-hidden relative"
+                                >
+                                    {teaser.media_type === 'video' ? (
+                                        <>
+                                            <video 
+                                                src={teaser.original_url}
+                                                className="w-full h-full object-cover"
+                                                muted
+                                            />
+                                            <div className="absolute inset-0 flex items-center justify-center bg-black/30">
+                                                <div className="w-7 h-7 bg-white/90 rounded-full flex items-center justify-center">
+                                                    <Play size={12} fill="currentColor" className="ml-0.5 text-gray-800" />
+                                                </div>
+                                            </div>
+                                        </>
+                                    ) : (
+                                        <img 
+                                            src={teaser.thumb_url || teaser.original_url}
+                                            alt={`Teaser ${index + 1}`}
+                                            className="w-full h-full object-cover"
+                                        />
+                                    )}
+                                </div>
+                            ))}
+                        </div>
+                    </motion.div>
+                )}
+
+                {/* 수록곡 */}
+                {album.tracks && album.tracks.length > 0 && (
+                    <motion.div 
+                        initial={{ opacity: 0, y: 20 }}
+                        animate={{ opacity: 1, y: 0 }}
+                        className="px-4 mb-5"
+                    >
+                        <h2 className="text-base font-bold mb-3">수록곡</h2>
+                        <div className="bg-white rounded-2xl shadow-sm overflow-hidden">
+                            {album.tracks.map((track, index) => (
+                                <div
+                                    key={track.id}
+                                    className={`flex items-center gap-3 px-4 py-3 ${
+                                        index !== album.tracks.length - 1 ? 'border-b border-gray-100' : ''
+                                    }`}
+                                >
+                                    <div className="w-8 h-8 flex items-center justify-center rounded-full bg-gray-100">
+                                        <span className="text-xs text-gray-500">
+                                            {String(track.track_number).padStart(2, '0')}
+                                        </span>
+                                    </div>
+                                    <div className="flex-1 min-w-0">
+                                        <div className="flex items-center gap-2">
+                                            <p className={`text-sm font-medium truncate ${track.is_title_track ? 'text-primary' : ''}`}>
+                                                {track.title}
+                                            </p>
+                                            {track.is_title_track === 1 && (
+                                                <span className="px-1.5 py-0.5 bg-primary text-white text-[10px] font-medium rounded">
+                                                    TITLE
+                                                </span>
+                                            )}
+                                        </div>
+                                    </div>
+                                    <span className="text-xs text-gray-400 tabular-nums">
+                                        {track.duration || '-'}
+                                    </span>
+                                    {track.music_video_url && (
+                                        <a 
+                                            href={track.music_video_url}
+                                            target="_blank"
+                                            rel="noopener noreferrer"
+                                            className="p-1.5 text-red-500"
+                                        >
+                                            <Play size={16} fill="currentColor" />
+                                        </a>
+                                    )}
+                                </div>
+                            ))}
+                        </div>
+                    </motion.div>
+                )}
+
+                {/* 컨셉 포토 */}
+                {allPhotos.length > 0 && (
+                    <motion.div 
+                        initial={{ opacity: 0, y: 20 }}
+                        animate={{ opacity: 1, y: 0 }}
+                        transition={{ delay: 0.1 }}
+                        className="px-4"
+                    >
+                        <div className="flex items-center justify-between mb-3">
+                            <h2 className="text-base font-bold">컨셉 포토</h2>
+                            <button 
+                                onClick={() => navigate(`/album/${name}/gallery`)}
+                                className="text-xs text-primary"
+                            >
+                                전체보기 ({allPhotos.length}장)
+                            </button>
+                        </div>
+                        <div className="grid grid-cols-3 gap-2">
+                            {allPhotos.slice(0, 6).map((photo, idx) => (
+                                <div 
+                                    key={photo.id}
+                                    onClick={() => setLightbox({ 
+                                        open: true, 
+                                        images: allPhotos.map(p => p.original_url), 
+                                        index: idx 
+                                    })}
+                                    className="aspect-square bg-gray-200 rounded-xl overflow-hidden"
+                                >
+                                    <img 
+                                        src={photo.thumb_url || photo.medium_url} 
+                                        alt={`컨셉 포토 ${idx + 1}`}
+                                        loading="lazy"
+                                        className="w-full h-full object-cover"
+                                    />
+                                </div>
+                            ))}
+                        </div>
+                    </motion.div>
+                )}
+
+                {/* 설명 */}
+                {album.description && (
+                    <motion.div 
+                        initial={{ opacity: 0 }}
+                        animate={{ opacity: 1 }}
+                        className="px-4 mt-5"
+                    >
+                        <h2 className="text-base font-bold mb-3">소개</h2>
+                        <p className="text-sm text-gray-600 leading-relaxed bg-white p-4 rounded-2xl shadow-sm">
+                            {album.description}
+                        </p>
+                    </motion.div>
+                )}
             </div>
 
-            {/* 앨범 정보 */}
-            <div className="px-4 py-6">
-                <div className="flex gap-4">
-                    <div className="w-32 h-32 rounded-2xl overflow-hidden bg-gray-200 shadow-lg flex-shrink-0">
-                        {album.cover_medium_url && (
+            {/* 라이트박스 */}
+            <AnimatePresence>
+                {lightbox.open && (
+                    <motion.div 
+                        initial={{ opacity: 0 }}
+                        animate={{ opacity: 1 }}
+                        exit={{ opacity: 0 }}
+                        className="fixed inset-0 bg-black z-50 flex items-center justify-center"
+                        onClick={closeLightbox}
+                    >
+                        {/* 상단 버튼 */}
+                        <div className="absolute top-4 right-4 flex gap-3 z-10">
+                            <button 
+                                className="text-white/70 p-2"
+                                onClick={(e) => {
+                                    e.stopPropagation();
+                                    downloadImage();
+                                }}
+                            >
+                                <Download size={22} />
+                            </button>
+                            <button 
+                                className="text-white/70 p-2"
+                                onClick={closeLightbox}
+                            >
+                                <X size={24} />
+                            </button>
+                        </div>
+
+                        {/* 이전 버튼 */}
+                        {lightbox.images.length > 1 && (
+                            <button 
+                                className="absolute left-2 p-2 text-white/70 z-10"
+                                onClick={(e) => {
+                                    e.stopPropagation();
+                                    goToPrev();
+                                }}
+                            >
+                                <ChevronLeft size={32} />
+                            </button>
+                        )}
+
+                        {/* 로딩 스피너 */}
+                        {!imageLoaded && (
+                            <div className="absolute inset-0 flex items-center justify-center">
+                                <div className="w-8 h-8 border-2 border-white border-t-transparent rounded-full animate-spin" />
+                            </div>
+                        )}
+
+                        {/* 이미지/비디오 */}
+                        {lightbox.teasers?.[lightbox.index]?.media_type === 'video' ? (
+                            <video
+                                src={lightbox.images[lightbox.index]}
+                                className={`max-w-full max-h-full object-contain transition-opacity ${imageLoaded ? 'opacity-100' : 'opacity-0'}`}
+                                onClick={(e) => e.stopPropagation()}
+                                onCanPlay={() => setImageLoaded(true)}
+                                controls
+                                autoPlay
+                            />
+                        ) : (
                             <img 
-                                src={album.cover_medium_url} 
-                                alt={album.title}
-                                className="w-full h-full object-cover"
+                                src={lightbox.images[lightbox.index]}
+                                alt="확대 이미지"
+                                className={`max-w-full max-h-full object-contain transition-opacity ${imageLoaded ? 'opacity-100' : 'opacity-0'}`}
+                                onClick={(e) => e.stopPropagation()}
+                                onLoad={() => setImageLoaded(true)}
                             />
                         )}
-                    </div>
-                    <div className="flex-1">
-                        <h1 className="text-xl font-bold">{album.title}</h1>
-                        <p className="text-gray-500 text-sm mt-1">{album.album_type}</p>
-                        <p className="text-gray-400 text-sm">{album.release_date}</p>
-                        
-                        <button
-                            onClick={() => navigate(`/album/${name}/gallery`)}
-                            className="mt-4 px-4 py-2 bg-primary text-white rounded-full text-sm font-medium"
-                        >
-                            갤러리 보기
-                        </button>
-                    </div>
-                </div>
-            </div>
 
-            {/* 트랙 리스트 */}
-            {tracks.length > 0 && (
-                <div className="px-4">
-                    <h2 className="text-lg font-bold mb-3">수록곡</h2>
-                    <div className="bg-white rounded-2xl overflow-hidden shadow-sm">
-                        {tracks.map((track, index) => (
-                            <motion.div
-                                key={track.id}
-                                initial={{ opacity: 0 }}
-                                animate={{ opacity: 1 }}
-                                transition={{ delay: index * 0.05 }}
-                                className="flex items-center gap-3 p-4 border-b border-gray-100 last:border-none"
+                        {/* 다음 버튼 */}
+                        {lightbox.images.length > 1 && (
+                            <button 
+                                className="absolute right-2 p-2 text-white/70 z-10"
+                                onClick={(e) => {
+                                    e.stopPropagation();
+                                    goToNext();
+                                }}
                             >
-                                <span className="w-6 text-center text-gray-400 text-sm">
-                                    {track.track_number}
-                                </span>
-                                <div className="flex-1 min-w-0">
-                                    <p className={`font-medium text-sm truncate ${track.is_title_track ? 'text-primary' : ''}`}>
-                                        {track.title}
-                                        {track.is_title_track && (
-                                            <span className="ml-2 text-xs bg-primary/10 text-primary px-2 py-0.5 rounded-full">
-                                                타이틀
-                                            </span>
-                                        )}
-                                    </p>
-                                    <p className="text-xs text-gray-400 truncate">{track.duration}</p>
-                                </div>
-                                {track.music_video_url && (
-                                    <a 
-                                        href={track.music_video_url}
-                                        target="_blank"
-                                        rel="noopener noreferrer"
-                                        className="p-2 text-red-500"
-                                    >
-                                        <Play size={18} fill="currentColor" />
-                                    </a>
-                                )}
-                            </motion.div>
-                        ))}
-                    </div>
-                </div>
-            )}
+                                <ChevronRight size={32} />
+                            </button>
+                        )}
 
-            {/* 설명 */}
-            {album.description && (
-                <div className="px-4 mt-6">
-                    <h2 className="text-lg font-bold mb-3">소개</h2>
-                    <p className="text-gray-600 text-sm leading-relaxed bg-white p-4 rounded-2xl">
-                        {album.description}
-                    </p>
-                </div>
-            )}
-        </div>
+                        {/* 인디케이터 */}
+                        {lightbox.images.length > 1 && (
+                            <div className="absolute bottom-6 left-0 right-0 flex justify-center gap-1.5">
+                                {lightbox.images.map((_, i) => (
+                                    <div 
+                                        key={i}
+                                        className={`w-1.5 h-1.5 rounded-full transition-colors ${
+                                            i === lightbox.index ? 'bg-white' : 'bg-white/40'
+                                        }`}
+                                    />
+                                ))}
+                            </div>
+                        )}
+                    </motion.div>
+                )}
+            </AnimatePresence>
+        </>
     );
 }
 
diff --git a/frontend/src/pages/pc/public/AlbumDetail.jsx b/frontend/src/pages/pc/public/AlbumDetail.jsx
index e884dd3..c0957d9 100644
--- a/frontend/src/pages/pc/public/AlbumDetail.jsx
+++ b/frontend/src/pages/pc/public/AlbumDetail.jsx
@@ -289,10 +289,6 @@ function AlbumDetail() {
                                     <span>{getTotalDuration()}</span>
                                 </div>
                             </div>
-
-                            <p className="text-sm text-primary font-medium mb-4">
-                                타이틀곡: {album.tracks?.find(t => t.is_title_track === 1)?.title || album.tracks?.[0]?.title}
-                            </p>
                         </div>
 
                         {/* 앨범 티저 이미지/영상 */}