feat(mobile): 예정된 YouTube 영상 상세 페이지 구현

PC와 동일하게 videoId가 없는 예정 일정에 대한 UI 추가:
- MobileScheduledPlaceholder 컴포넌트 (배너 이미지/패턴 배경)
- "예정" 배지 표시
- 예정 일정일 때 "YouTube에서 보기" 버튼 숨김

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

frontend/src/pages/mobile/schedule/ScheduleDetail.jsx

@@ -110,24 +110,59 @@ function useFullscreenOrientation(isShorts) {
   }, [isShorts]);
 }
 
+/**
+ * Mobile 예정 일정 Placeholder 컴포넌트
+ */
+function MobileScheduledPlaceholder({ bannerUrl }) {
+  return (
+    <div className="relative aspect-video bg-gradient-to-br from-gray-800 to-gray-900 rounded-xl overflow-hidden shadow-lg">
+      {/* 배경: 배너 이미지 또는 패턴 */}
+      {bannerUrl ? (
+        <div
+          className="absolute inset-0 bg-cover bg-center"
+          style={{ backgroundImage: `url(${bannerUrl})` }}
+        >
+          <div className="absolute inset-0 bg-gradient-to-t from-black/70 via-transparent to-transparent" />
+        </div>
+      ) : (
+        <div className="absolute inset-0 opacity-5">
+          <div className="absolute inset-0" style={{
+            backgroundImage: `url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='1'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E")`,
+          }} />
+        </div>
+      )}
+
+      {/* 하단 텍스트 */}
+      <div className="absolute bottom-0 left-0 right-0 p-4">
+        <div className="flex items-center gap-2 text-white/90">
+          <Clock size={16} className="text-amber-400" />
+          <span className="text-base font-medium">업로드 예정</span>
+        </div>
+      </div>
+    </div>
+  );
+}
+
 /**
  * Mobile 유튜브 섹션
  */
 function MobileYoutubeSection({ schedule }) {
   const videoId = schedule.videoId;
   const isShorts = schedule.videoType === 'shorts';
+  const isScheduled = !videoId; // videoId가 없으면 예정 일정
 
   // 숏츠가 아닐 때만 가로 회전 (숏츠는 전체화면에서 세로 유지)
   useFullscreenOrientation(isShorts);
   const members = schedule.members || [];
   const isFullGroup = members.length === 5;
 
-  if (!videoId) return null;
-
   return (
     <div className="space-y-4">
-      {/* 영상 임베드 - 숏츠도 가로 비율로 표시 (전체화면에서는 유튜브가 세로로 처리) */}
+      {/* 영상 임베드 또는 예정 Placeholder */}
       <motion.div initial={{ opacity: 0, scale: 0.98 }} animate={{ opacity: 1, scale: 1 }} transition={{ delay: 0.1 }}>
+        {isScheduled ? (
+          <MobileScheduledPlaceholder bannerUrl={schedule.bannerUrl} />
+        ) : (
           <div className="relative bg-gray-900 rounded-xl overflow-hidden shadow-lg aspect-video">
             <iframe
               src={`https://www.youtube.com/embed/${videoId}?rel=0`}
@@ -137,6 +172,7 @@ function MobileYoutubeSection({ schedule }) {
               className="absolute inset-0 w-full h-full"
             />
           </div>
+        )}
       </motion.div>
 
       {/* 영상 정보 */}
@@ -146,10 +182,17 @@ function MobileYoutubeSection({ schedule }) {
         transition={{ delay: 0.2 }}
         className="bg-gradient-to-br from-gray-100 to-gray-200/80 rounded-xl p-4"
       >
-        <h1 className="font-bold text-gray-900 text-base leading-relaxed mb-3">{decodeHtmlEntities(schedule.title)}</h1>
+        <div className="flex items-center gap-2 mb-3">
+          <h1 className="font-bold text-gray-900 text-base leading-relaxed">{decodeHtmlEntities(schedule.title)}</h1>
+          {isScheduled && (
+            <span className="flex-shrink-0 px-2 py-0.5 bg-amber-100 text-amber-700 text-xs font-semibold rounded-full">
+              예정
+            </span>
+          )}
+        </div>
 
         {/* 메타 정보 */}
-        <div className="flex flex-wrap items-center gap-3 text-xs text-gray-500 mb-3">
+        <div className={`flex flex-wrap items-center gap-3 text-xs text-gray-500 ${members.length > 0 || !isScheduled ? 'mb-3' : ''}`}>
           <div className="flex items-center gap-1">
             <Calendar size={12} />
             <span>{formatXDateTimeWithTime(schedule.date, schedule.time)}</span>
@@ -179,7 +222,8 @@ function MobileYoutubeSection({ schedule }) {
           </div>
         )}
 
-        {/* 유튜브에서 보기 버튼 */}
+        {/* 유튜브에서 보기 버튼 (예정 일정이 아닐 때만) */}
+        {!isScheduled && (
           <div className="pt-4 border-t border-gray-300/50">
             <a
               href={schedule.videoUrl}
@@ -193,6 +237,7 @@ function MobileYoutubeSection({ schedule }) {
               YouTube에서 보기
             </a>
           </div>
+        )}
       </motion.div>
     </div>
   );