feat(nav): TopNav 로그인 시에도 "Try now" 노출 (마케팅 컨버전 유지)

D 트랙 4/4. P1 Task 2 review M-3 후속:
- 로그인 사용자: [마이페이지] [Try now] [로그아웃] 3개 모두 노출
  → 신규 팩 구매 동기 유지 (이전: Try now가 사라져 컨버전 손실)
- 로그아웃 button을 텍스트 스타일로 가볍게 (Try now가 시각 강조)
- 모바일: flex-col로 2줄 배치 (1줄: 마이페이지+Try now, 2줄: 로그아웃 텍스트)

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

app/components/TopNav.tsx

@@ -121,14 +121,17 @@ export default function TopNav() {
               >
                 마이페이지
               </Link>
+              <Link
+                href="/music"
+                className="kx-btn-primary hidden sm:inline-flex items-center px-5 py-2 rounded-full text-sm"
+                style={{ textDecoration: 'none' }}
+              >
+                Try now
+              </Link>
               <button
                 onClick={handleLogout}
-                className="hidden sm:inline-flex items-center px-5 py-2 rounded-full text-sm font-medium transition-colors"
+                className="hidden sm:inline-flex items-center px-3 py-2 text-sm font-medium transition-colors"
-                style={{
+                style={{ color: 'var(--kx-on-variant)', background: 'transparent' }}
-                  color: 'var(--kx-on-surface)',
-                  border: '1px solid rgba(255,255,255,0.15)',
-                  background: 'transparent',
-                }}
               >
                 로그아웃
               </button>
@@ -198,26 +201,35 @@ export default function TopNav() {
                 {l.label}
               </Link>
             ))}
-            <div className="mt-6 flex gap-3">
+            <div className="mt-6 flex flex-col gap-2">
               {user ? (
                 <>
-                  <Link
+                  <div className="flex gap-3">
-                    href="/mypage"
+                    <Link
-                    className="flex-1 py-3 text-center rounded-full text-sm font-bold"
+                      href="/mypage"
-                    style={{ border: '1px solid rgba(255,255,255,0.15)', color: 'var(--kx-on-surface)', textDecoration: 'none' }}
+                      className="flex-1 py-3 text-center rounded-full text-sm font-bold"
-                  >
+                      style={{ border: '1px solid rgba(255,255,255,0.15)', color: 'var(--kx-on-surface)', textDecoration: 'none' }}
-                    마이페이지
+                    >
-                  </Link>
+                      마이페이지
+                    </Link>
+                    <Link
+                      href="/music"
+                      className="kx-btn-primary flex-1 py-3 text-center rounded-full text-sm"
+                      style={{ textDecoration: 'none' }}
+                    >
+                      Try now
+                    </Link>
+                  </div>
                   <button
                     onClick={handleLogout}
-                    className="flex-1 py-3 text-center rounded-full text-sm font-bold transition-colors"
+                    className="w-full py-3 text-center text-sm font-medium transition-colors"
-                    style={{ border: '1px solid rgba(255,255,255,0.15)', color: 'var(--kx-on-surface)', background: 'transparent' }}
+                    style={{ color: 'var(--kx-on-variant)', background: 'transparent' }}
                   >
                     로그아웃
                   </button>
                 </>
               ) : (
-                <>
+                <div className="flex gap-3">
                   <Link
                     href="/login"
                     className="flex-1 py-3 text-center rounded-full text-sm font-bold"
@@ -232,7 +244,7 @@ export default function TopNav() {
                   >
                     Try now
                   </Link>
-                </>
+                </div>
               )}
             </div>
           </div>