From 6c499ae061d280c5de009d369aa69d94b7eb235a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EA=B9=80=EC=84=B1=EA=B2=BD?= <skkim@o2o.kr>
Date: Fri, 26 Jun 2026 11:50:08 +0900
Subject: [PATCH] =?UTF-8?q?=EC=9E=A5=EB=A5=B4=20=EC=84=A0=ED=83=9D=20?=
 =?UTF-8?q?=EB=A1=9C=EC=A7=81=20=EA=B0=9C=EC=84=A0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/App.tsx                                   |  1 -
 src/components/VideoDetailContent.tsx         | 46 +++++++--------
 src/components/VideoDetailModal.tsx           |  2 +-
 src/locales/en.json                           | 46 +++++++++++----
 src/locales/ko.json                           | 28 ++++++++-
 src/pages/Dashboard/CompletionContent.tsx     |  8 +--
 .../Dashboard/ContentCalendarContent.tsx      |  6 +-
 src/pages/Dashboard/GenerationFlow.tsx        |  4 +-
 src/pages/Dashboard/SoundStudioContent.tsx    | 58 ++++++++++---------
 src/styles/business-settings.css              |  1 +
 src/styles/contents-social.css                |  6 +-
 src/styles/dashboard.css                      |  2 +-
 src/styles/generation-flow.css                | 24 +++++++-
 src/styles/landing.css                        | 43 ++++----------
 src/styles/studio-assets.css                  |  4 +-
 15 files changed, 167 insertions(+), 112 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index 2a5ad82..2e33306 100755
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -507,7 +507,6 @@ const App: React.FC = () => {
           onAnalyze={handleStartAnalysis}
           onAutocomplete={handleAutocomplete}
           onManualInput={handleManualInput}
-          onTestData={handleTestData}
           onNext={() => scrollToSection(1)}
           error={error}
           scrollProgress={scrollProgress}
diff --git a/src/components/VideoDetailContent.tsx b/src/components/VideoDetailContent.tsx
index 153a00d..3c65db4 100644
--- a/src/components/VideoDetailContent.tsx
+++ b/src/components/VideoDetailContent.tsx
@@ -94,7 +94,7 @@ const VideoDetailContent: React.FC<VideoDetailContentProps> = ({ videoId, isModa
 
   const formatDate = (dateString: string) => {
     const date = new Date(dateString);
-    return `${date.getFullYear()}년 ${date.getMonth() + 1}월 ${date.getDate()}일`;
+    return t('videoDetail.dateFormat', { year: date.getFullYear(), month: date.getMonth() + 1, day: date.getDate() });
   };
 
   const formatCommentDate = (dateString: string) => {
@@ -120,12 +120,12 @@ const VideoDetailContent: React.FC<VideoDetailContentProps> = ({ videoId, isModa
       kakao.Share.sendDefault({
         objectType: 'feed',
         content: {
-          title: video?.store_name ?? 'ADO2 영상',
-          description: `${video?.region ?? ''} · ADO2 AI 마케팅 영상`,
+          title: video?.store_name ?? t('videoDetail.kakaoDefaultTitle'),
+          description: t('videoDetail.kakaoDescription', { region: video?.region ?? '' }),
           imageUrl: 'https://demo.castad.net/favicon_48.svg',
           link: { mobileWebUrl: shareUrl, webUrl: shareUrl },
         },
-        buttons: [{ title: '영상 보기', link: { mobileWebUrl: shareUrl, webUrl: shareUrl } }],
+        buttons: [{ title: t('videoDetail.kakaoButtonTitle'), link: { mobileWebUrl: shareUrl, webUrl: shareUrl } }],
       });
     } else if (navigator.share) {
       navigator.share({ url: shareUrl }).catch(() => {});
@@ -222,7 +222,7 @@ const VideoDetailContent: React.FC<VideoDetailContentProps> = ({ videoId, isModa
   };
 
   const renderCommentContent = (content: string | null, isDeleted: boolean) => {
-    if (isDeleted) return <span style={{ color: '#6B9EA0', fontStyle: 'italic' }}>(삭제된 댓글입니다.)</span>;
+    if (isDeleted) return <span style={{ color: '#6B9EA0', fontStyle: 'italic' }}>{t('videoDetail.deletedComment')}</span>;
     return content;
   };
 
@@ -231,7 +231,7 @@ const VideoDetailContent: React.FC<VideoDetailContentProps> = ({ videoId, isModa
       {/* 헤더 */}
       <div className="video-detail-header">
         {isModal ? (
-          <button className="video-detail-close-btn" onClick={handleHeaderAction} aria-label="닫기">
+          <button className="video-detail-close-btn" onClick={handleHeaderAction} aria-label={t('videoDetail.closeAriaLabel')}>
             <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
               <line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/>
             </svg>
@@ -293,7 +293,7 @@ const VideoDetailContent: React.FC<VideoDetailContentProps> = ({ videoId, isModa
                     <circle cx="18" cy="5" r="3"/><circle cx="6" cy="12" r="3"/><circle cx="18" cy="19" r="3"/>
                     <line x1="8.59" y1="13.51" x2="15.42" y2="17.49"/><line x1="15.41" y1="6.51" x2="8.59" y2="10.49"/>
                   </svg>
-                  {copied ? '복사됨!' : '공유하기'}
+                  {copied ? t('videoDetail.copied') : t('videoDetail.share')}
                 </button>
                 {shareMenuOpen && (
                   <div className="video-detail-share-menu">
@@ -303,21 +303,21 @@ const VideoDetailContent: React.FC<VideoDetailContentProps> = ({ videoId, isModa
                         <rect width="20" height="20" rx="4" fill="#FEE500"/>
                         <path fillRule="evenodd" clipRule="evenodd" d="M10 3.5C6.134 3.5 3 6.01 3 9.1c0 1.98 1.2 3.72 3.01 4.76l-.74 2.75a.19.19 0 0 0 .28.21l3.37-2.23c.34.04.69.06 1.06.06 3.866 0 7-2.51 7-5.6S13.866 3.5 10 3.5z" fill="#3C1E1E"/>
                       </svg>
-                      카카오톡
+                      {t('videoDetail.shareKakao')}
                     </button>
                     {/* 페이스북 */}
                     <button className="video-detail-share-item" onClick={handleFacebookShare}>
                       <svg width="18" height="18" viewBox="0 0 24 24" fill="#1877F2">
                         <path d="M24 12.073C24 5.405 18.627 0 12 0S0 5.405 0 12.073C0 18.1 4.388 23.094 10.125 24v-8.437H7.078v-3.49h3.047V9.41c0-3.025 1.792-4.697 4.533-4.697 1.312 0 2.686.235 2.686.235v2.97h-1.513c-1.491 0-1.956.93-1.956 1.887v2.268h3.328l-.532 3.49h-2.796V24C19.612 23.094 24 18.1 24 12.073z"/>
                       </svg>
-                      페이스북
+                      {t('videoDetail.shareFacebook')}
                     </button>
                     {/* X (트위터) */}
                     <button className="video-detail-share-item" onClick={handleTwitterShare}>
                       <svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor">
                         <path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"/>
                       </svg>
-                      X (트위터)
+                      {t('videoDetail.shareTwitter')}
                     </button>
                     {/* URL 복사 */}
                     <button className="video-detail-share-item" onClick={() => { handleCopyLink(); setShareMenuOpen(false); }}>
@@ -325,7 +325,7 @@ const VideoDetailContent: React.FC<VideoDetailContentProps> = ({ videoId, isModa
                         <rect x="9" y="9" width="13" height="13" rx="2"/>
                         <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/>
                       </svg>
-                      {copied ? '복사됨!' : 'URL 복사'}
+                      {copied ? t('videoDetail.copied') : t('videoDetail.copyUrl')}
                     </button>
                   </div>
                 )}
@@ -335,7 +335,7 @@ const VideoDetailContent: React.FC<VideoDetailContentProps> = ({ videoId, isModa
             {/* 댓글 섹션 */}
             <div className="video-detail-comments">
               <div className="video-detail-comments-header">
-                <h3 className="video-detail-comments-title">댓글</h3>
+                <h3 className="video-detail-comments-title">{t('videoDetail.commentsTitle')}</h3>
                 <span className="video-detail-comments-count">{commentsTotal}</span>
               </div>
 
@@ -344,16 +344,16 @@ const VideoDetailContent: React.FC<VideoDetailContentProps> = ({ videoId, isModa
                 <div className="video-detail-comment-profile">
                   <img
                     src={`https://api.dicebear.com/9.x/pixel-art/svg?seed=${commentAvatarSeed}`}
-                    alt="아바타 변경"
+                    alt={t('videoDetail.changeAvatarTitle')}
                     className="video-detail-comment-avatar"
                     onClick={handleChangeAvatar}
                     style={{ cursor: 'pointer' }}
-                    title="클릭하여 아바타 변경"
+                    title={t('videoDetail.changeAvatarTitle')}
                   />
                   <input
                     className="video-detail-nickname-input"
                     type="text"
-                    placeholder="작성자 이름"
+                    placeholder={t('videoDetail.nicknamePlaceholder')}
                     value={commentNickname}
                     onChange={(e) => setCommentNickname(e.target.value)}
                     maxLength={20}
@@ -365,7 +365,7 @@ const VideoDetailContent: React.FC<VideoDetailContentProps> = ({ videoId, isModa
                 <textarea
                   ref={commentTextareaRef}
                   className="video-detail-comment-input"
-                  placeholder={authed ? '댓글을 입력하세요...' : '로그인 후 댓글을 작성할 수 있습니다'}
+                  placeholder={authed ? t('videoDetail.commentPlaceholder') : t('videoDetail.commentLoginRequired')}
                   maxLength={500}
                   rows={1}
                   value={commentInput}
@@ -388,12 +388,12 @@ const VideoDetailContent: React.FC<VideoDetailContentProps> = ({ videoId, isModa
                   onClick={handleCommentSubmit}
                   disabled={!authed || !commentInput.trim() || commentSubmitting}
                 >
-                  {commentSubmitting ? '작성 중' : '작성'}
+                  {commentSubmitting ? t('videoDetail.commentSubmitting') : t('videoDetail.commentSubmit')}
                 </button>
               </div>
 
               {comments.length === 0 && !commentsLoading ? (
-                <p className="video-detail-comments-empty">아직 댓글이 없습니다.</p>
+                <p className="video-detail-comments-empty">{t('videoDetail.noComments')}</p>
               ) : (
                 <ul className="video-detail-comment-list">
                   {comments.map((c) => (
@@ -405,7 +405,7 @@ const VideoDetailContent: React.FC<VideoDetailContentProps> = ({ videoId, isModa
                       />
                       <div className="video-detail-comment-body">
                         <span className="video-detail-comment-nickname">
-                          {c.nickname || '익명'}
+                          {c.nickname || t('videoDetail.anonymous')}
                         </span>
                         <p className="video-detail-comment-text">
                           {renderCommentContent(c.content, c.is_deleted)}
@@ -417,7 +417,7 @@ const VideoDetailContent: React.FC<VideoDetailContentProps> = ({ videoId, isModa
                               className="video-detail-comment-delete"
                               onClick={() => handleDeleteComment(c.id)}
                             >
-                              삭제
+                              {t('videoDetail.deleteComment')}
                             </button>
                           )}
                         </div>
@@ -434,7 +434,7 @@ const VideoDetailContent: React.FC<VideoDetailContentProps> = ({ videoId, isModa
                                 />
                                 <div className="video-detail-comment-body">
                                   <span className="video-detail-comment-nickname">
-                                    {r.nickname || '익명'}
+                                    {r.nickname || t('videoDetail.anonymous')}
                                   </span>
                                   <p className="video-detail-comment-text">
                                     {renderCommentContent(r.content, r.is_deleted)}
@@ -446,7 +446,7 @@ const VideoDetailContent: React.FC<VideoDetailContentProps> = ({ videoId, isModa
                                         className="video-detail-comment-delete"
                                         onClick={() => handleDeleteComment(r.id)}
                                       >
-                                        삭제
+                                        {t('videoDetail.deleteComment')}
                                       </button>
                                     )}
                                   </div>
@@ -467,7 +467,7 @@ const VideoDetailContent: React.FC<VideoDetailContentProps> = ({ videoId, isModa
                   onClick={() => fetchComments(commentsPage + 1, true)}
                   disabled={commentsLoading}
                 >
-                  {commentsLoading ? '불러오는 중...' : '댓글 더 보기'}
+                  {commentsLoading ? t('videoDetail.loadingComments') : t('videoDetail.loadMoreComments')}
                 </button>
               )}
             </div>
diff --git a/src/components/VideoDetailModal.tsx b/src/components/VideoDetailModal.tsx
index 4e3d23b..0ca1614 100644
--- a/src/components/VideoDetailModal.tsx
+++ b/src/components/VideoDetailModal.tsx
@@ -41,7 +41,7 @@ const VideoDetailModal: React.FC<VideoDetailModalProps> = ({ videoId, onClose })
           background: '#01282A',
           borderRadius: '16px',
           width: '100%',
-          maxWidth: '900px',
+          maxWidth: '800px',
           margin: 'auto',
           position: 'relative',
         }}
diff --git a/src/locales/en.json b/src/locales/en.json
index b399545..23cf1cb 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -54,7 +54,7 @@
       "video": { "title": "Generate Video", "desc": "Click the button to start generating your video." }
     },
     "completion": {
-      "contentInfo": { "title": "Content Info", "desc": "Check the title, genre, resolution, and lyrics of the generated content." },
+      "contentInfo": { "title": "Content Info", "desc": "Check the file name, genre, resolution, and lyrics of the generated content." },
       "generating": { "title": "Generating Video", "desc": "AI is creating your video.\nPlease wait a moment." },
       "completion": { "title": "Video Complete!", "desc": "Your video is ready. Want to take a look?" },
       "myInfo": { "title": "Connect Social Account", "desc": "To upload your video to YouTube, connect your social account in My Info. Click to go there." }
@@ -188,16 +188,16 @@
     "hero": {
       "searchTypeLabel": "Business Name | URL",
       "placeholderCombined": "Enter a business name or Naver Maps/Place URL",
-      "guideCombined": "Enter a business name, or paste a Naver Maps share URL (naver.me/...) to automatically retrieve information.",
+      "guideCombined": "Paste a Naver Maps share URL, or enter a business name to automatically retrieve information.",
       "errorInputRequired": "Please enter a business name or URL.",
       "errorInvalidUrl": "Invalid URL format. (e.g., https://naver.me/abcdef)",
       "analyzeButton": "Brand Analysis",
       "scrollMore": "Scroll to see more",
       "searching": "Searching...",
       "searchTypeManual": "Not on Naver? Enter manually",
-      "manualButtonDesc": "Even businesses not listed on Naver Maps/Place can get\na full brand analysis, lyrics, music, and video\njust by entering the name, region, and address.",
+      "manualButtonDesc": "Even businesses not listed on Naver Maps/Place\ncan get lyrics, music, and video production\njust by entering the name, region, and address.",
       "manualModalTitle": "Enter Business Info Directly",
-      "manualModalSubtitle": "Even businesses not on Naver can start brand analysis by filling in the details below.",
+      "manualModalSubtitle": "Even businesses not on Naver can get lyrics, music, and video production by filling in the details below.",
       "manualAnalyzeButton": "Get Started",
       "manualLabelName": "Business Name",
       "manualLabelAddress": "Address",
@@ -278,7 +278,7 @@
     "genreLabel": "Select Genre",
     "genreAuto": "Auto Select",
     "genreBallad": "Ballad",
-    "languageLabel": "Language",
+    "languageLabel": "Select Language",
     "languageKorean": "Korean",
     "lyricsColumn": "Lyrics",
     "lyricsHint": "Select the lyrics area to edit",
@@ -307,7 +307,7 @@
     "songRegenerationError": "An error occurred during music regeneration.",
     "creditsRemaining": "{{count}} left",
     "creditsExhausted": "Not enough credits.",
-    "chargeCredits": "Purchase credits"
+    "chargeCredits": "Top Up Credits"
   },
   "completion": {
     "back": "Go Back",
@@ -549,9 +549,9 @@
     "marketPositioning": "Market Positioning",
     "coreValue": "Core Value",
     "categoryDefinition": "Category Definition",
-    "targetPersona": "Target Persona",
+    "targetPersona": "Key Customer Type",
     "ageSuffix": "years old",
-    "sellingPoints": "Unique Selling Points (USP)",
+    "sellingPoints": "Key Selling Points",
     "recommendedKeywords": "Recommended Target Keywords",
     "generateContent": "Generate Content",
     "pageDescBefore": " reveals ",
@@ -592,7 +592,7 @@
     "loading": "Loading...",
     "noResults": "No recent results",
     "noResultsDesc": "Upload your content to social channels",
-    "ado2Contents": "ADO2 Contents",
+    "myContents": "My Contents",
     "cancel": "Cancel",
     "retry": "Retry",
     "cancelConfirm": "Are you sure you want to cancel this reservation?",
@@ -604,7 +604,33 @@
   },
   "loginPrompt": {
     "title": "Login Required",
-    "loginBtn": "Login with Kakao"
+    "loginBtn": "Login"
+  },
+  "videoDetail": {
+    "dateFormat": "{{month}}/{{day}}/{{year}}",
+    "kakaoDefaultTitle": "ADO2 Video",
+    "kakaoDescription": "{{region}} · ADO2 AI Marketing Video",
+    "kakaoButtonTitle": "Watch Video",
+    "deletedComment": "(This comment has been deleted.)",
+    "closeAriaLabel": "Close",
+    "share": "Share",
+    "copied": "Copied!",
+    "shareKakao": "KakaoTalk",
+    "shareFacebook": "Facebook",
+    "shareTwitter": "X (Twitter)",
+    "copyUrl": "Copy URL",
+    "commentsTitle": "Comments",
+    "changeAvatarTitle": "Click to change avatar",
+    "nicknamePlaceholder": "Author name",
+    "commentPlaceholder": "Write a comment...",
+    "commentLoginRequired": "Please log in to write a comment",
+    "commentSubmitting": "Submitting",
+    "commentSubmit": "Submit",
+    "noComments": "No comments yet.",
+    "anonymous": "Anonymous",
+    "deleteComment": "Delete",
+    "loadMoreComments": "Load more comments",
+    "loadingComments": "Loading..."
   },
   "app": {
     "loginProcessing": "Processing login...",
diff --git a/src/locales/ko.json b/src/locales/ko.json
index a205e79..10bdf02 100644
--- a/src/locales/ko.json
+++ b/src/locales/ko.json
@@ -591,7 +591,7 @@
     "loading": "불러오는 중...",
     "noResults": "최근 결과 없음",
     "noResultsDesc": "제작한 콘텐츠를 소셜 채널에 업로드해 보세요",
-    "ado2Contents": "ADO2 콘텐츠",
+    "myContents": "내 콘텐츠",
     "cancel": "취소",
     "retry": "재시도",
     "cancelConfirm": "예약을 취소하시겠습니까?",
@@ -605,6 +605,32 @@
     "title": "로그인이 필요합니다.",
     "loginBtn": "로그인"
   },
+  "videoDetail": {
+    "dateFormat": "{{year}}년 {{month}}월 {{day}}일",
+    "kakaoDefaultTitle": "ADO2 영상",
+    "kakaoDescription": "{{region}} · ADO2 AI 마케팅 영상",
+    "kakaoButtonTitle": "영상 보기",
+    "deletedComment": "(삭제된 댓글입니다.)",
+    "closeAriaLabel": "닫기",
+    "share": "공유하기",
+    "copied": "복사됨!",
+    "shareKakao": "카카오톡",
+    "shareFacebook": "페이스북",
+    "shareTwitter": "X (트위터)",
+    "copyUrl": "URL 복사",
+    "commentsTitle": "댓글",
+    "changeAvatarTitle": "클릭하여 아바타 변경",
+    "nicknamePlaceholder": "작성자 이름",
+    "commentPlaceholder": "댓글을 입력하세요...",
+    "commentLoginRequired": "로그인 후 댓글을 작성할 수 있습니다",
+    "commentSubmitting": "작성 중",
+    "commentSubmit": "작성",
+    "noComments": "아직 댓글이 없습니다.",
+    "anonymous": "익명",
+    "deleteComment": "삭제",
+    "loadMoreComments": "댓글 더 보기",
+    "loadingComments": "불러오는 중..."
+  },
   "app": {
     "loginProcessing": "로그인 처리 중...",
     "loginFailed": "로그인 처리에 실패했습니다. 다시 시도해주세요.",
diff --git a/src/pages/Dashboard/CompletionContent.tsx b/src/pages/Dashboard/CompletionContent.tsx
index 250b310..09da515 100755
--- a/src/pages/Dashboard/CompletionContent.tsx
+++ b/src/pages/Dashboard/CompletionContent.tsx
@@ -476,11 +476,11 @@ const CompletionContent: React.FC<CompletionContentProps> = ({
               <div className="comp2-info-header">
                 <span className="comp2-info-label">{t('completion.contentInfo')}</span>
               </div>
+              <div className="comp2-file-info">
+                <h3 className="comp2-filename">{getFileName()}</h3>
+                {/* <p className="comp2-filesize">19.6MB</p> */}
+              </div>
               <div className="comp2-info-content">
-                <div className="comp2-file-info">
-                  <h3 className="comp2-filename">{getFileName()}</h3>
-                  {/* <p className="comp2-filesize">19.6MB</p> */}
-                </div>
                 <div className="comp2-meta-grid">
                   <div className="comp2-meta-item">
                     <span className="comp2-meta-label">{t('completion.genre')} : {songCompletionData?.genre || 'K-POP'}</span>
diff --git a/src/pages/Dashboard/ContentCalendarContent.tsx b/src/pages/Dashboard/ContentCalendarContent.tsx
index 0a0c899..041cfd7 100644
--- a/src/pages/Dashboard/ContentCalendarContent.tsx
+++ b/src/pages/Dashboard/ContentCalendarContent.tsx
@@ -645,7 +645,7 @@ const ContentCalendarContent: React.FC<ContentCalendarContentProps> = ({ onNavig
             </p>
           </div>
           <button
-            onClick={() => onNavigate?.('ADO2 콘텐츠')}
+            onClick={() => onNavigate?.('내 콘텐츠')}
             style={{
               height: 34, padding: '0 10px', borderRadius: 8, border: 'none',
               backgroundColor: '#a65eff', cursor: 'pointer',
@@ -653,7 +653,7 @@ const ContentCalendarContent: React.FC<ContentCalendarContentProps> = ({ onNavig
               color: '#ffffff',
             }}
           >
-            {t('contentCalendar.ado2Contents')}
+            {t('contentCalendar.myContents')}
           </button>
         </div>
       );
@@ -717,7 +717,7 @@ const ContentCalendarContent: React.FC<ContentCalendarContentProps> = ({ onNavig
         </div>
 
         {/* 바텀시트 */}
-        <div style={{ position: 'fixed', bottom: 0, left: 0, right: 0, zIndex: 100, display: 'flex', flexDirection: 'column' }}>
+        <div style={{ position: 'fixed', bottom: 0, left: 0, right: 0, zIndex: 10, display: 'flex', flexDirection: 'column' }}>
           <div style={{
             backgroundColor: '#01393b',
             borderTop: '1px solid #046266',
diff --git a/src/pages/Dashboard/GenerationFlow.tsx b/src/pages/Dashboard/GenerationFlow.tsx
index 72ff05c..cad3985 100755
--- a/src/pages/Dashboard/GenerationFlow.tsx
+++ b/src/pages/Dashboard/GenerationFlow.tsx
@@ -301,7 +301,7 @@ const GenerationFlow: React.FC<GenerationFlowProps> = ({
         .then(res => res.json())
         .then((data: CrawlingResponse) => {
           // 언어 변경 시에는 기존 m_id 유지
-          const tagged = { ...data, m_id: parsed.m_id || generateRandomMId(), _isTestData: true };
+          const tagged = { ...data, m_id: parsed.m_id, _isTestData: true };
           setAnalysisData(tagged);
           localStorage.setItem(ANALYSIS_DATA_KEY, JSON.stringify(tagged));
         })
@@ -646,7 +646,7 @@ const GenerationFlow: React.FC<GenerationFlowProps> = ({
         <Sidebar activeItem={activeItem} onNavigate={handleNavigate} onHome={handleHome} userInfo={userInfo} onLogout={handleLogout} credits={credits} tutorialAvailable={!!getCurrentTutorialKey()} tutorialEnabled={tutorial.isEnabled} onToggleTutorial={() => tutorial.toggleTutorial(getCurrentTutorialKey())} />
       )}
       {tutorialUI}
-      <div className={`flex-1 relative pl-0 md:pl-0 ${needsScroll ? 'overflow-auto' : 'h-full overflow-hidden'}`}>
+      <div className={`flex-1 relative pl-0 md:pl-0 bg-[#001a1c] ${needsScroll ? 'overflow-auto' : 'h-full overflow-hidden'}`}>
         {renderContent()}
       </div>
     </div>
diff --git a/src/pages/Dashboard/SoundStudioContent.tsx b/src/pages/Dashboard/SoundStudioContent.tsx
index 616cf1f..04c5cac 100755
--- a/src/pages/Dashboard/SoundStudioContent.tsx
+++ b/src/pages/Dashboard/SoundStudioContent.tsx
@@ -31,6 +31,27 @@ const MAX_RETRY_COUNT = 3;
 // GenerationFlow의 clearAllProjectStorage가 이 키를 포함해 정리함
 const SONG_GENERATION_KEY = 'castad_song_generation';
 
+const GENRE_VALUES = ['kpop', 'pop', 'ballad', 'hip-hop', 'rnb', 'edm', 'jazz', 'rock'];
+
+const genreMap: Record<string, string> = {
+  '자동 선택': '', // 런타임에 랜덤 결정
+  'K-POP': 'kpop',
+  'POP': 'pop',
+  '발라드': 'ballad',
+  'Hip-Hop': 'hip-hop',
+  'R&B': 'rnb',
+  'EDM': 'edm',
+  'JAZZ': 'jazz',
+  'ROCK': 'rock',
+};
+
+const getEffectiveGenre = (selectedGenre: string): string => {
+  if (selectedGenre === '자동 선택') {
+    return GENRE_VALUES[Math.floor(Math.random() * GENRE_VALUES.length)];
+  }
+  return genreMap[selectedGenre] || 'pop';
+};
+
 const sanitizeError = (message: string, fallback: string): string => {
   if (
     message.includes('Traceback') ||
@@ -69,6 +90,7 @@ const SoundStudioContent: React.FC<SoundStudioContentProps> = ({
   const [selectedType, setSelectedType] = useState('보컬');
   const [selectedLang, setSelectedLang] = useState('한국어');
   const [selectedGenre, setSelectedGenre] = useState('자동 선택');
+  const [usedGenre, setUsedGenre] = useState('');
   const [progress, setProgress] = useState(0);
   const [isDragging, setIsDragging] = useState(false);
   const [status, setStatus] = useState<GenerationStatus>('idle');
@@ -88,7 +110,7 @@ const SoundStudioContent: React.FC<SoundStudioContentProps> = ({
   const saveSongCompletionData = () => {
     const completionData = {
       businessName: businessInfo?.customer_name || '알 수 없음',
-      genre: selectedGenre === '자동 선택' ? 'K-POP' : selectedGenre,
+      genre: selectedGenre,
       lyrics: lyrics,
       timestamp: Date.now(),
     };
@@ -211,20 +233,13 @@ const SoundStudioContent: React.FC<SoundStudioContentProps> = ({
 
     try {
       const language = LANGUAGE_MAP[selectedLang] || 'Korean';
-      const genreMap: Record<string, string> = {
-        '자동 선택': 'pop',
-        'K-POP': 'kpop',
-        '발라드': 'ballad',
-        'Hip-Hop': 'hip-hop',
-        'R&B': 'rnb',
-        'EDM': 'edm',
-        'JAZZ': 'jazz',
-        'ROCK': 'rock',
-      };
 
       const isInstrumental = selectedType === '배경음악';
+      const effectiveGenre = getEffectiveGenre(selectedGenre);
+      setUsedGenre(effectiveGenre);
+
       const songResponse = await generateSong(imageTaskId, {
-        genre: genreMap[selectedGenre] || 'pop',
+        genre: effectiveGenre,
         ...(isInstrumental ? { instrumental: true, lyrics: '' } : { language, lyrics: currentLyrics }),
       });
 
@@ -371,17 +386,6 @@ const SoundStudioContent: React.FC<SoundStudioContentProps> = ({
         throw new Error(lyricResponse.error_message || t('soundStudio.lyricGenerationFailed'));
       }
 
-      const genreMap: Record<string, string> = {
-        '자동 선택': 'pop',
-        'K-POP': 'kpop',
-        '발라드': 'ballad',
-        'Hip-Hop': 'hip-hop',
-        'R&B': 'rnb',
-        'EDM': 'edm',
-        'JAZZ': 'jazz',
-        'ROCK': 'rock',
-      };
-
       let songLyrics: string | undefined;
 
       if (!isInstrumental) {
@@ -412,8 +416,11 @@ const SoundStudioContent: React.FC<SoundStudioContentProps> = ({
       setStatus('generating_song');
       setStatusMessage(t('soundStudio.generatingSong'));
 
+      const effectiveGenre = getEffectiveGenre(selectedGenre);
+      setUsedGenre(effectiveGenre);
+
       const songResponse = await generateSong(imageTaskId, {
-        genre: genreMap[selectedGenre] || 'pop',
+        genre: effectiveGenre,
         ...(isInstrumental ? { instrumental: true, lyrics: '' } : { language, lyrics: songLyrics }),
       });
 
@@ -552,7 +559,7 @@ const SoundStudioContent: React.FC<SoundStudioContentProps> = ({
                   ))}
                 </div>
                 <div className="genre-row">
-                  {['JAZZ', 'ROCK'].map(genre => (
+                  {['JAZZ', 'ROCK', 'POP'].map(genre => (
                     <button
                       key={genre}
                       onClick={() => setSelectedGenre(genre)}
@@ -562,7 +569,6 @@ const SoundStudioContent: React.FC<SoundStudioContentProps> = ({
                       {genre}
                     </button>
                   ))}
-                  <div className="genre-btn-placeholder"></div>
                 </div>
               </div>
             </div>
diff --git a/src/styles/business-settings.css b/src/styles/business-settings.css
index b2cd970..c904f50 100644
--- a/src/styles/business-settings.css
+++ b/src/styles/business-settings.css
@@ -310,6 +310,7 @@
   color: #379599;
   letter-spacing: -0.006em;
   line-height: 1.19;
+  text-align: center;
 }
 
 .footer-links {
diff --git a/src/styles/contents-social.css b/src/styles/contents-social.css
index 1eea947..a35ab5b 100644
--- a/src/styles/contents-social.css
+++ b/src/styles/contents-social.css
@@ -626,7 +626,7 @@
   border: none;
   color: #9BCACC;
   cursor: pointer;
-  padding: 4px;
+  padding-bottom: 8px;
   margin-left: auto;
   transition: color 0.2s;
 }
@@ -647,7 +647,7 @@
 }
 
 .video-detail-header {
-  margin-bottom: 24px;
+  /* margin-bottom: 24px; */
 }
 
 .video-detail-back-btn {
@@ -685,7 +685,7 @@
   display: block;
   width: 100%;
   height: auto;
-  max-width: 450px;
+  max-width: 360px;
   border-radius: 12px;
   flex-shrink: 0;
 }
diff --git a/src/styles/dashboard.css b/src/styles/dashboard.css
index 9e8e60d..28cbe4f 100644
--- a/src/styles/dashboard.css
+++ b/src/styles/dashboard.css
@@ -9,7 +9,7 @@
   padding: 0.75rem;
   display: flex;
   flex-direction: column;
-  background-color: var(--color-bg-dark);
+  background-color: var(--color-bg-darker);
   color: var(--color-text-white);
 }
 
diff --git a/src/styles/generation-flow.css b/src/styles/generation-flow.css
index 3c1ca38..0e2efb1 100644
--- a/src/styles/generation-flow.css
+++ b/src/styles/generation-flow.css
@@ -563,7 +563,7 @@
 }
 
 .comp2-title-row {
-  padding: 16px;
+  padding: 10px;
   text-align: center;
   flex-shrink: 0;
 }
@@ -2389,7 +2389,7 @@
   flex-direction: column;
   align-items: center;
   justify-content: center;
-  background-color: #002224;
+  background-color: var(--color-bg-darker);
   color: var(--color-text-white);
   padding: 80px 1rem 100px;
   position: relative;
@@ -2405,6 +2405,7 @@
   position: relative;
   margin-top: 50px;
   width: 100%;
+  max-width: 375px;
 }
 
 .url-input-icon {
@@ -2418,9 +2419,28 @@
 
 .url-input-logo img {
   width: 350px;
+  max-width: 100%;
   height: auto;
 }
 
+@media (min-width: 640px) {
+  .url-input-logo img {
+    width: 400px;
+  }
+}
+
+@media (min-width: 768px) {
+  .url-input-logo img {
+    width: 500px;
+  }
+}
+
+@media (min-width: 1024px) {
+  .url-input-logo img {
+    width: 554px;
+  }
+}
+
 .url-input-title {
   font-family: 'Pretendard', sans-serif;
   font-size: 40px;
diff --git a/src/styles/landing.css b/src/styles/landing.css
index d79b41a..7f07141 100644
--- a/src/styles/landing.css
+++ b/src/styles/landing.css
@@ -63,10 +63,11 @@
   z-index: 20;
   position: relative;
   margin-top: 50px;
+  width: 100%;
 }
 
 .hero-logo {
-  width: 280px;
+  width: 350px;
   height: auto;
   margin-bottom: 1rem;
 }
@@ -396,7 +397,7 @@
 
 .hero-manual-card {
   width: 100%;
-  padding: 16px 20px;
+  padding: 10px 16px;
   border-radius: 16px;
   border: 1.5px solid var(--color-mint);
   background: rgba(15, 60, 60, 0.5);
@@ -451,7 +452,7 @@
 /* Scroll Indicator */
 .scroll-indicator {
   position: absolute;
-  bottom: 2rem;
+  bottom: 1rem;
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -466,7 +467,7 @@
 
 @media (min-width: 640px) {
   .scroll-indicator {
-    bottom: 3rem;
+    bottom: 1rem;
   }
 }
 
@@ -779,7 +780,7 @@
 }
 
 .feature-card-description {
-  font-size: 12px;
+  font-size: 14px;
   font-weight: 400;
   color: #E5F1F2;
   letter-spacing: -0.006em;
@@ -1486,24 +1487,12 @@
   max-width: 600px;
 }
 
-@media (min-width: 768px) {
-  .loading-content {
-    gap: 4rem;
-  }
-}
-
 /* Loading Logo */
 .loading-logo {
-  width: 200px;
+  width: 300px;
   height: auto;
 }
 
-@media (min-width: 768px) {
-  .loading-logo {
-    width: 308px;
-  }
-}
-
 .loading-logo img {
   width: 100%;
   height: auto;
@@ -1520,7 +1509,7 @@
 }
 
 .loading-title {
-  font-size: 1.5rem;
+  font-size: 2rem;
   font-weight: 700;
   letter-spacing: -0.006em;
   line-height: 1.19;
@@ -1528,12 +1517,6 @@
   text-align: center;
 }
 
-@media (min-width: 768px) {
-  .loading-title {
-    font-size: 2rem;
-  }
-}
-
 /* Loading Progress Bar */
 .loading-progress-wrapper {
   display: flex;
@@ -1567,19 +1550,13 @@
 
 /* Loading Spinner Wrapper */
 .loading-spinner-wrapper {
-  width: 120px;
-  height: 120px;
+  width: 200px;
+  height: 200px;
   display: flex;
   align-items: center;
   justify-content: center;
 }
 
-@media (min-width: 768px) {
-  .loading-spinner-wrapper {
-    width: 200px;
-    height: 200px;
-  }
-}
 
 .loading-spinner-icon {
   width: 100%;
diff --git a/src/styles/studio-assets.css b/src/styles/studio-assets.css
index 1d93a6b..62aad40 100644
--- a/src/styles/studio-assets.css
+++ b/src/styles/studio-assets.css
@@ -1315,7 +1315,7 @@
   }
 
   .asset-scroll-area {
-    padding: 80px 1rem 120px;
+    padding: 1rem 1rem 120px;
   }
 
   .asset-image-grid {
@@ -1330,7 +1330,7 @@
   }
 
   .asset-scroll-area {
-    padding: 80px 1.5rem 120px;
+    padding: 1.5rem 1.5rem 120px;
   }
 }