From 6d6d6f353a65907fbc02a8cd8e116b8cfde59546 Mon Sep 17 00:00:00 2001
From: gahusb <bgg8988@gmail.com>
Date: Thu, 11 Jun 2026 01:42:37 +0900
Subject: [PATCH] =?UTF-8?q?feat(nav):=20=EC=99=B8=EC=A3=BC=C2=B7=EC=86=8C?=
 =?UTF-8?q?=ED=94=84=ED=8A=B8=EC=9B=A8=EC=96=B4=202=EC=B6=95=20=EB=84=A4?=
 =?UTF-8?q?=EB=B9=84=EA=B2=8C=EC=9D=B4=EC=85=98=20+=20=ED=91=B8=ED=84=B0?=
 =?UTF-8?q?=20=EB=A6=AC=EB=89=B4=EC=96=BC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 app/components/PublicShell.tsx | 192 ++++++++++--------
 app/components/TopNav.tsx      | 346 ++++++++++++++++++---------------
 2 files changed, 303 insertions(+), 235 deletions(-)

diff --git a/app/components/PublicShell.tsx b/app/components/PublicShell.tsx
index 0b0c0a3..8e25a03 100644
--- a/app/components/PublicShell.tsx
+++ b/app/components/PublicShell.tsx
@@ -7,111 +7,147 @@ export default function PublicShell({ children }: { children: React.ReactNode })
     <>
       <TopNav />
       <main
-        className="min-h-screen pt-20"
+        className="min-h-screen pt-16"
         style={{
-          background: 'var(--kx-surface)',
-          color: 'var(--kx-on-surface)',
+          background: 'var(--jsm-bg)',
+          color: 'var(--jsm-ink)',
         }}
       >
         {children}
-        <footer className="bg-black text-white/70 px-6 lg:px-12 py-14 text-sm border-t border-white/10">
+        <footer
+          className="text-white/70 px-6 lg:px-12 py-14 text-sm"
+          style={{ background: 'var(--jsm-navy)' }}
+        >
           <div className="max-w-7xl mx-auto">
             <div className="flex flex-col md:flex-row md:items-start md:justify-between gap-12 md:gap-8">
-              {/* 좌 — JSM + social */}
+              {/* 좌 — JSM + 연락처 */}
               <div>
-                <p
-                  className="kx-display font-bold text-2xl mb-5 text-white tracking-tight"
-                  style={{ letterSpacing: '0.02em' }}
-                >
-                  JSM
-                </p>
-                <div className="flex items-center gap-3">
-                  <a
-                    href="https://www.youtube.com/"
-                    target="_blank"
-                    rel="noopener noreferrer"
-                    aria-label="YouTube"
-                    className="w-9 h-9 rounded-full border border-white/20 hover:border-white hover:bg-white hover:text-black text-white flex items-center justify-center transition"
+                <div className="flex items-baseline gap-2 mb-4">
+                  <span
+                    className="font-black text-2xl text-white"
+                    style={{ letterSpacing: '-0.02em' }}
                   >
-                    <svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor" aria-hidden>
-                      <path d="M23.5 6.2a3 3 0 0 0-2.1-2.1C19.5 3.6 12 3.6 12 3.6s-7.5 0-9.4.5A3 3 0 0 0 .5 6.2C0 8.1 0 12 0 12s0 3.9.5 5.8a3 3 0 0 0 2.1 2.1c1.9.5 9.4.5 9.4.5s7.5 0 9.4-.5a3 3 0 0 0 2.1-2.1c.5-1.9.5-5.8.5-5.8s0-3.9-.5-5.8zM9.6 15.6V8.4l6.2 3.6-6.2 3.6z" />
-                    </svg>
-                  </a>
-                  <a
-                    href="https://x.com/"
-                    target="_blank"
-                    rel="noopener noreferrer"
-                    aria-label="X (Twitter)"
-                    className="w-9 h-9 rounded-full border border-white/20 hover:border-white hover:bg-white hover:text-black text-white flex items-center justify-center transition"
-                  >
-                    <svg width="13" height="13" viewBox="0 0 24 24" fill="currentColor" aria-hidden>
-                      <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>
-                  </a>
-                  <a
-                    href="https://www.instagram.com/"
-                    target="_blank"
-                    rel="noopener noreferrer"
-                    aria-label="Instagram"
-                    className="w-9 h-9 rounded-full border border-white/20 hover:border-white hover:bg-white hover:text-black text-white flex items-center justify-center transition"
-                  >
-                    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" aria-hidden>
-                      <rect x="3" y="3" width="18" height="18" rx="5" />
-                      <circle cx="12" cy="12" r="4" />
-                      <circle cx="17.5" cy="6.5" r="1" fill="currentColor" stroke="none" />
-                    </svg>
-                  </a>
-                  <a
-                    href="mailto:bgg8988@gmail.com"
-                    aria-label="Email"
-                    className="w-9 h-9 rounded-full border border-white/20 hover:border-white hover:bg-white hover:text-black text-white flex items-center justify-center transition"
-                  >
-                    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" aria-hidden>
-                      <rect x="3" y="5" width="18" height="14" rx="2" />
-                      <path d="m3 7 9 6 9-6" />
-                    </svg>
-                  </a>
+                    JSM
+                  </span>
+                  <span className="text-sm text-white/50" style={{ letterSpacing: '-0.01em' }}>
+                    쟁승메이드
+                  </span>
                 </div>
+                <a
+                  href="mailto:bgg8988@gmail.com"
+                  className="flex items-center gap-2 text-white/50 hover:text-white transition-colors duration-150 text-sm"
+                  style={{ letterSpacing: '-0.01em' }}
+                >
+                  <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" aria-hidden>
+                    <rect x="3" y="5" width="18" height="14" rx="2" />
+                    <path d="m3 7 9 6 9-6" />
+                  </svg>
+                  bgg8988@gmail.com
+                </a>
               </div>
 
               {/* 우 — Link groups */}
-              <div className="grid grid-cols-2 sm:grid-cols-4 gap-10">
+              <div className="grid grid-cols-2 sm:grid-cols-3 gap-10">
                 <div>
-                  <p className="font-mono text-[11px] tracking-widest uppercase text-white/40 mb-4">SaaS 제품</p>
+                  <p
+                    className="text-[11px] tracking-widest uppercase text-white/40 mb-4 font-medium"
+                    style={{ fontFamily: 'monospace' }}
+                  >
+                    서비스
+                  </p>
                   <ul className="space-y-2.5">
-                    <li><Link href="/packages" className="hover:text-white transition">제품 카탈로그</Link></li>
-                    <li><Link href="/packages" className="hover:text-white transition">출시 알림 신청</Link></li>
+                    <li>
+                      <Link
+                        href="/outsourcing"
+                        className="hover:text-white transition-colors duration-150"
+                        style={{ letterSpacing: '-0.01em' }}
+                      >
+                        외주 개발
+                      </Link>
+                    </li>
+                    <li>
+                      <Link
+                        href="/products"
+                        className="hover:text-white transition-colors duration-150"
+                        style={{ letterSpacing: '-0.01em' }}
+                      >
+                        소프트웨어
+                      </Link>
+                    </li>
                   </ul>
                 </div>
                 <div>
-                  <p className="font-mono text-[11px] tracking-widest uppercase text-white/40 mb-4">AI 음악</p>
+                  <p
+                    className="text-[11px] tracking-widest uppercase text-white/40 mb-4 font-medium"
+                    style={{ fontFamily: 'monospace' }}
+                  >
+                    회사
+                  </p>
                   <ul className="space-y-2.5">
-                    <li><Link href="/music/packs" className="hover:text-white transition">음악 가이드 패키지</Link></li>
-                    <li><Link href="/music/samples" className="hover:text-white transition">샘플 갤러리</Link></li>
-                    <li><Link href="/music/packs#pricing" className="hover:text-white transition">가격</Link></li>
+                    <li>
+                      <a
+                        href="mailto:bgg8988@gmail.com"
+                        className="hover:text-white transition-colors duration-150"
+                        style={{ letterSpacing: '-0.01em' }}
+                      >
+                        문의하기
+                      </a>
+                    </li>
+                    <li>
+                      <Link
+                        href="/outsourcing#process"
+                        className="hover:text-white transition-colors duration-150"
+                        style={{ letterSpacing: '-0.01em' }}
+                      >
+                        진행 프로세스
+                      </Link>
+                    </li>
                   </ul>
                 </div>
                 <div>
-                  <p className="font-mono text-[11px] tracking-widest uppercase text-white/40 mb-4">커스텀 외주</p>
+                  <p
+                    className="text-[11px] tracking-widest uppercase text-white/40 mb-4 font-medium"
+                    style={{ fontFamily: 'monospace' }}
+                  >
+                    Legal
+                  </p>
                   <ul className="space-y-2.5">
-                    <li><Link href="/work/freelance" className="hover:text-white transition">외주 개발</Link></li>
-                    <li><Link href="/work/website" className="hover:text-white transition">웹사이트 제작</Link></li>
-                    <li><Link href="/work/saju" className="hover:text-white transition">AI 사주</Link></li>
-                    <li><a href="mailto:bgg8988@gmail.com" className="hover:text-white transition">문의하기</a></li>
-                  </ul>
-                </div>
-                <div>
-                  <p className="font-mono text-[11px] tracking-widest uppercase text-white/40 mb-4">Legal</p>
-                  <ul className="space-y-2.5">
-                    <li><Link href="/legal/terms" className="hover:text-white transition">이용약관</Link></li>
-                    <li><Link href="/legal/privacy" className="hover:text-white transition">개인정보처리방침</Link></li>
-                    <li><Link href="/legal/refund" className="hover:text-white transition">환불 정책</Link></li>
+                    <li>
+                      <Link
+                        href="/legal/terms"
+                        className="hover:text-white transition-colors duration-150"
+                        style={{ letterSpacing: '-0.01em' }}
+                      >
+                        이용약관
+                      </Link>
+                    </li>
+                    <li>
+                      <Link
+                        href="/legal/privacy"
+                        className="hover:text-white transition-colors duration-150"
+                        style={{ letterSpacing: '-0.01em' }}
+                      >
+                        개인정보처리방침
+                      </Link>
+                    </li>
+                    <li>
+                      <Link
+                        href="/legal/refund"
+                        className="hover:text-white transition-colors duration-150"
+                        style={{ letterSpacing: '-0.01em' }}
+                      >
+                        환불 정책
+                      </Link>
+                    </li>
                   </ul>
                 </div>
               </div>
             </div>
 
-            <div className="mt-12 pt-6 border-t border-white/10 flex flex-wrap gap-x-4 gap-y-1 text-xs text-white/40 leading-relaxed">
+            <div
+              className="mt-12 pt-6 border-t flex flex-wrap gap-x-4 gap-y-1 text-xs text-white/40 leading-relaxed"
+              style={{ borderColor: 'rgba(255,255,255,0.08)' }}
+            >
               <span>대표자: 박재오</span>
               <span>사업자등록번호: 267-53-00822</span>
               <span>서울시 동작구 여의대방로22아길 22, 1동 109호</span>
diff --git a/app/components/TopNav.tsx b/app/components/TopNav.tsx
index b720fb8..103553e 100644
--- a/app/components/TopNav.tsx
+++ b/app/components/TopNav.tsx
@@ -7,9 +7,8 @@ import { createClient } from '@/lib/supabase/client';
 import type { User } from '@supabase/supabase-js';
 
 const LINKS = [
-  { href: '/packages', label: 'SaaS 제품' },
-  { href: '/music', label: 'AI 음악' },
-  { href: '/work', label: '커스텀 외주' },
+  { href: '/outsourcing', label: '외주 개발' },
+  { href: '/products', label: '소프트웨어' },
 ];
 
 export default function TopNav() {
@@ -67,187 +66,220 @@ export default function TopNav() {
   return (
     <>
       <header
-        className={[
-          'fixed left-1/2 -translate-x-1/2 z-50 w-full border-b border-transparent',
-          'md:rounded-full md:border transition-all duration-300 ease-out',
-          scrolled
-            ? 'top-4 max-w-3xl md:shadow-[0_10px_40px_rgba(0,0,0,0.35)] md:border-white/10'
-            : 'top-0 max-w-none',
-        ].join(' ')}
+        className="fixed top-0 left-0 right-0 z-50 w-full transition-all duration-300"
         style={{
-          background: scrolled ? 'rgba(10,10,12,0.6)' : 'transparent',
-          backdropFilter: scrolled ? 'blur(18px) saturate(160%)' : 'none',
-          WebkitBackdropFilter: scrolled ? 'blur(18px) saturate(160%)' : 'none',
+          background: scrolled ? 'var(--jsm-surface)' : 'transparent',
+          borderBottom: scrolled ? '1px solid var(--jsm-line)' : '1px solid transparent',
+          boxShadow: scrolled ? '0 1px 8px rgba(15,23,42,0.06)' : 'none',
         }}
       >
-      <nav
-        className={[
-          'flex w-full items-center justify-between transition-all duration-300 ease-out',
-          scrolled ? 'h-14 px-4 md:px-3' : 'h-20 px-6 lg:px-12',
-        ].join(' ')}
-      >
-        <Link
-          href="/"
-          className="kx-display text-2xl font-black tracking-tight kx-gradient-text"
-          style={{ textDecoration: 'none', letterSpacing: '0.02em' }}
-        >
-          JSM
-        </Link>
-
-        <div className="hidden md:flex items-center gap-8">
-          {LINKS.map((l) => (
-            <Link
-              key={l.href}
-              href={l.href}
-              className="text-sm font-medium transition-colors"
-              style={{
-                color: isActive(l.href) ? '#fff' : 'var(--kx-on-variant)',
-                borderBottom: isActive(l.href) ? '2px solid var(--kx-primary)' : '2px solid transparent',
-                paddingBottom: 4,
-                textDecoration: 'none',
-              }}
-            >
-              {l.label}
-            </Link>
-          ))}
-        </div>
-
-        <div className="flex items-center gap-3">
-          {user ? (
-            <>
-              <Link
-                href="/mypage"
-                className="hidden sm:inline-block text-sm font-medium px-4 py-2 transition-colors"
-                style={{ color: 'var(--kx-on-variant)', textDecoration: 'none' }}
-              >
-                마이페이지
-              </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-3 py-2 text-sm font-medium transition-colors"
-                style={{ color: 'var(--kx-on-variant)', background: 'transparent' }}
-              >
-                로그아웃
-              </button>
-            </>
-          ) : (
-            <>
-              <Link
-                href="/login"
-                className="hidden sm:inline-block text-sm font-medium px-4 py-2 transition-colors"
-                style={{ color: 'var(--kx-on-variant)', textDecoration: 'none' }}
-              >
-                로그인
-              </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={() => setOpen(true)}
-            aria-label="메뉴 열기"
-            className="md:hidden p-2 rounded-lg"
-            style={{ color: 'var(--kx-on-surface)' }}
+        <nav className="max-w-7xl mx-auto flex w-full items-center justify-between h-16 px-6 lg:px-8">
+          {/* 로고 */}
+          <Link
+            href="/"
+            className="flex items-baseline gap-2"
+            style={{ textDecoration: 'none' }}
           >
-            <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 6h16M4 12h16M4 18h16" />
-            </svg>
-          </button>
-        </div>
-      </nav>
-      </header>
-
-      {/* 모바일 오버레이 */}
-      {open && (
-        <div
-          className="fixed inset-0 z-[60] md:hidden flex flex-col"
-          style={{ background: 'rgba(6,14,32,0.98)', backdropFilter: 'blur(16px)' }}
-        >
-          <div className="flex items-center justify-between px-6 h-20">
-            <span className="kx-display text-2xl font-black kx-gradient-text" style={{ letterSpacing: '0.02em' }}>JSM</span>
-            <button
-              onClick={() => setOpen(false)}
-              aria-label="메뉴 닫기"
-              className="p-2"
-              style={{ color: 'var(--kx-on-surface)' }}
+            <span
+              className="text-xl font-black tracking-tight"
+              style={{ color: 'var(--jsm-ink)', letterSpacing: '-0.02em' }}
             >
-              <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
-              </svg>
-            </button>
-          </div>
-          <div className="flex-1 flex flex-col gap-2 px-6 pt-6">
+              JSM
+            </span>
+            <span
+              className="hidden sm:inline text-sm font-medium"
+              style={{ color: 'var(--jsm-ink-soft)', letterSpacing: '-0.01em' }}
+            >
+              쟁승메이드
+            </span>
+          </Link>
+
+          {/* 데스크탑 링크 */}
+          <div className="hidden md:flex items-center gap-1">
             {LINKS.map((l) => (
               <Link
                 key={l.href}
                 href={l.href}
-                className="kx-display text-2xl font-bold py-3"
+                className="text-sm font-medium px-4 py-2 rounded-md transition-colors duration-150"
                 style={{
-                  color: isActive(l.href) ? 'var(--kx-primary)' : 'var(--kx-on-surface)',
+                  color: isActive(l.href) ? 'var(--jsm-accent)' : 'var(--jsm-ink-soft)',
+                  background: isActive(l.href) ? 'var(--jsm-accent-soft)' : 'transparent',
                   textDecoration: 'none',
+                  letterSpacing: '-0.01em',
                 }}
               >
                 {l.label}
               </Link>
             ))}
-            <div className="mt-6 flex flex-col gap-2">
+          </div>
+
+          {/* 데스크탑 CTA + auth */}
+          <div className="flex items-center gap-2">
+            {user ? (
+              <>
+                <Link
+                  href="/mypage"
+                  className="hidden sm:inline-block text-sm font-medium px-3 py-2 rounded-md transition-colors duration-150"
+                  style={{ color: 'var(--jsm-ink-soft)', textDecoration: 'none', letterSpacing: '-0.01em' }}
+                >
+                  마이페이지
+                </Link>
+                <button
+                  onClick={handleLogout}
+                  className="hidden sm:inline-flex items-center px-3 py-2 text-sm font-medium rounded-md transition-colors duration-150"
+                  style={{ color: 'var(--jsm-ink-soft)', background: 'transparent', letterSpacing: '-0.01em' }}
+                >
+                  로그아웃
+                </button>
+              </>
+            ) : (
+              <Link
+                href="/login"
+                className="hidden sm:inline-block text-sm font-medium px-3 py-2 rounded-md transition-colors duration-150"
+                style={{ color: 'var(--jsm-ink-soft)', textDecoration: 'none', letterSpacing: '-0.01em' }}
+              >
+                로그인
+              </Link>
+            )}
+            <Link
+              href="/outsourcing#contact"
+              className="hidden sm:inline-flex items-center px-4 py-2 rounded-lg text-sm font-semibold transition-colors duration-150"
+              style={{
+                background: 'var(--jsm-accent)',
+                color: '#ffffff',
+                textDecoration: 'none',
+                letterSpacing: '-0.01em',
+              }}
+              onMouseEnter={(e) => { (e.currentTarget as HTMLElement).style.background = 'var(--jsm-accent-hover)'; }}
+              onMouseLeave={(e) => { (e.currentTarget as HTMLElement).style.background = 'var(--jsm-accent)'; }}
+            >
+              프로젝트 문의
+            </Link>
+
+            {/* 모바일 햄버거 */}
+            <button
+              onClick={() => setOpen(true)}
+              aria-label="메뉴 열기"
+              className="md:hidden p-2 rounded-lg transition-colors duration-150"
+              style={{ color: 'var(--jsm-ink)' }}
+            >
+              <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 6h16M4 12h16M4 18h16" />
+              </svg>
+            </button>
+          </div>
+        </nav>
+      </header>
+
+      {/* 모바일 드로어 */}
+      {open && (
+        <div
+          className="fixed inset-0 z-[60] md:hidden"
+          style={{ background: 'rgba(15,23,42,0.4)' }}
+          onClick={() => setOpen(false)}
+        >
+          <div
+            className="absolute top-0 right-0 h-full w-72 flex flex-col shadow-xl"
+            style={{ background: 'var(--jsm-surface)' }}
+            onClick={(e) => e.stopPropagation()}
+          >
+            {/* 드로어 헤더 */}
+            <div
+              className="flex items-center justify-between px-6 h-16 border-b"
+              style={{ borderColor: 'var(--jsm-line)' }}
+            >
+              <div className="flex items-baseline gap-2">
+                <span
+                  className="text-lg font-black tracking-tight"
+                  style={{ color: 'var(--jsm-ink)', letterSpacing: '-0.02em' }}
+                >
+                  JSM
+                </span>
+                <span
+                  className="text-xs font-medium"
+                  style={{ color: 'var(--jsm-ink-soft)' }}
+                >
+                  쟁승메이드
+                </span>
+              </div>
+              <button
+                onClick={() => setOpen(false)}
+                aria-label="메뉴 닫기"
+                className="p-2 rounded-lg transition-colors duration-150"
+                style={{ color: 'var(--jsm-ink-soft)' }}
+              >
+                <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
+                </svg>
+              </button>
+            </div>
+
+            {/* 드로어 링크 */}
+            <div className="flex-1 flex flex-col px-4 pt-4 gap-1">
+              {LINKS.map((l) => (
+                <Link
+                  key={l.href}
+                  href={l.href}
+                  className="text-base font-semibold px-3 py-3 rounded-lg transition-colors duration-150"
+                  style={{
+                    color: isActive(l.href) ? 'var(--jsm-accent)' : 'var(--jsm-ink)',
+                    background: isActive(l.href) ? 'var(--jsm-accent-soft)' : 'transparent',
+                    textDecoration: 'none',
+                    letterSpacing: '-0.01em',
+                  }}
+                >
+                  {l.label}
+                </Link>
+              ))}
+
+              <div
+                className="my-4 border-t"
+                style={{ borderColor: 'var(--jsm-line)' }}
+              />
+
               {user ? (
                 <>
-                  <div className="flex gap-3">
-                    <Link
-                      href="/mypage"
-                      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
-                      href="/music"
-                      className="kx-btn-primary flex-1 py-3 text-center rounded-full text-sm"
-                      style={{ textDecoration: 'none' }}
-                    >
-                      Try now
-                    </Link>
-                  </div>
+                  <Link
+                    href="/mypage"
+                    className="text-sm font-medium px-3 py-3 rounded-lg transition-colors duration-150"
+                    style={{ color: 'var(--jsm-ink-soft)', textDecoration: 'none', letterSpacing: '-0.01em' }}
+                  >
+                    마이페이지
+                  </Link>
                   <button
                     onClick={handleLogout}
-                    className="w-full py-3 text-center text-sm font-medium transition-colors"
-                    style={{ color: 'var(--kx-on-variant)', background: 'transparent' }}
+                    className="text-left text-sm font-medium px-3 py-3 rounded-lg transition-colors duration-150"
+                    style={{ color: 'var(--jsm-ink-soft)', background: 'transparent', letterSpacing: '-0.01em' }}
                   >
                     로그아웃
                   </button>
                 </>
               ) : (
-                <div className="flex gap-3">
-                  <Link
-                    href="/login"
-                    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
-                    href="/music"
-                    className="kx-btn-primary flex-1 py-3 text-center rounded-full text-sm"
-                    style={{ textDecoration: 'none' }}
-                  >
-                    Try now
-                  </Link>
-                </div>
+                <Link
+                  href="/login"
+                  className="text-sm font-medium px-3 py-3 rounded-lg transition-colors duration-150"
+                  style={{ color: 'var(--jsm-ink-soft)', textDecoration: 'none', letterSpacing: '-0.01em' }}
+                >
+                  로그인
+                </Link>
               )}
             </div>
+
+            {/* 드로어 하단 CTA */}
+            <div className="px-4 pb-6">
+              <Link
+                href="/outsourcing#contact"
+                className="flex items-center justify-center w-full py-3 rounded-lg text-sm font-semibold transition-colors duration-150"
+                style={{
+                  background: 'var(--jsm-accent)',
+                  color: '#ffffff',
+                  textDecoration: 'none',
+                  letterSpacing: '-0.01em',
+                }}
+              >
+                프로젝트 문의
+              </Link>
+            </div>
           </div>
         </div>
       )}