From 6c5e661a6dda4d15c98088fc3b66fb684459cad6 Mon Sep 17 00:00:00 2001
From: gahusb <bgg8988@gmail.com>
Date: Thu, 2 Apr 2026 00:46:16 +0900
Subject: [PATCH] =?UTF-8?q?design:=20AI=20=ED=85=9C=ED=94=8C=EB=A6=BF=20?=
 =?UTF-8?q?=ED=8C=A8=ED=84=B4=20=EC=A0=84=EB=A9=B4=20=EC=A0=9C=EA=B1=B0=20?=
 =?UTF-8?q?=E2=80=94=20=EC=82=AC=EC=9D=B4=EB=93=9C=EB=B0=94=20+=20?=
 =?UTF-8?q?=EC=84=9C=EB=B9=84=EC=8A=A4=20=ED=8E=98=EC=9D=B4=EC=A7=80=20her?=
 =?UTF-8?q?o=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

- Sidebar: 그래디언트 active 상태 → border-l 얇은 선, desc 서브라벨 제거,
  "Premium Dev Services" 제거 → font-mono 개인 태그라인, 로그인 버튼 단색
- website: hero 오브·애니메이션 그리드 제거, 마퀴 → 정적 태그 행,
  그래디언트 텍스트 → 흰색, trust badge 이모지 → SVG 아이콘, step 이모지 → 번호
- automation: 배경 그래디언트·회로 SVG 제거, 그래디언트 텍스트 단색화
- prompt: 우측 장식용 코드 블록 제거, 그래디언트 텍스트 단색화
- ai-kit: 배경 그리드·오브 제거, 그래디언트 텍스트·버튼 단색화

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 app/components/Sidebar.tsx       | 177 +++++++++++++------------------
 app/services/ai-kit/page.tsx     |  36 ++-----
 app/services/automation/page.tsx |  32 +-----
 app/services/prompt/page.tsx     |  28 +----
 app/services/website/page.tsx    |  93 +++++++---------
 5 files changed, 135 insertions(+), 231 deletions(-)

diff --git a/app/components/Sidebar.tsx b/app/components/Sidebar.tsx
index 428971d..44ad0ba 100644
--- a/app/components/Sidebar.tsx
+++ b/app/components/Sidebar.tsx
@@ -8,66 +8,60 @@ import { createClient } from '@/lib/supabase/client';
 const navItems = [
   {
     href: '/',
+    label: '홈',
     icon: (
-      <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6" />
+      <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6" />
       </svg>
     ),
-    label: '홈',
-    desc: '대시보드 홈',
   },
   {
     href: '/services/website',
+    label: '홈페이지 제작',
+    badge: 'NEW',
     icon: (
-      <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
+      <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
       </svg>
     ),
-    label: '홈페이지 제작',
-    desc: '외주 웹 개발',
-    badge: 'NEW',
   },
   {
     href: '/services/automation',
+    label: '업무 자동화',
     icon: (
-      <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z" />
-        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
+      <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z" />
+        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
       </svg>
     ),
-    label: '업무 자동화',
-    desc: 'RPA 개발',
   },
   {
     href: '/services/prompt',
+    label: '프롬프트 엔지니어링',
     icon: (
-      <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z" />
+      <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z" />
       </svg>
     ),
-    label: '프롬프트 엔지니어링',
-    desc: 'AI 최적화',
   },
   {
     href: '/services/ai-kit',
+    label: 'AI 자동화 키트',
+    badge: 'NEW',
     icon: (
-      <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 10V3L4 14h7v7l9-11h-7z" />
+      <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M13 10V3L4 14h7v7l9-11h-7z" />
       </svg>
     ),
-    label: 'AI 자동화 키트',
-    desc: '월 구독 자동화 도구',
-    badge: 'NEW',
   },
   {
     href: '/saju',
+    label: 'AI 사주 분석',
     icon: (
-      <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 3v4M3 5h4M6 17v4m-2-2h4m5-16l2.286 6.857L21 12l-5.714 2.143L13 21l-2.286-6.857L5 12l5.714-2.143L13 3z" />
+      <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M5 3v4M3 5h4M6 17v4m-2-2h4m5-16l2.286 6.857L21 12l-5.714 2.143L13 21l-2.286-6.857L5 12l5.714-2.143L13 3z" />
       </svg>
     ),
-    label: 'AI 사주 분석',
-    desc: '사주팔자 + AI 해석',
   },
 ];
 
@@ -114,31 +108,29 @@ export default function Sidebar({ isOpen, onClose }: SidebarProps) {
       {/* Sidebar */}
       <aside
         className={`
-          fixed top-0 left-0 h-full w-64 z-30 flex flex-col
-          bg-[#04102b] border-r border-[#1a3a7a]/50
+          fixed top-0 left-0 h-full w-60 z-30 flex flex-col
+          bg-[#04102b]
           transition-transform duration-300 ease-in-out
           lg:translate-x-0 lg:static lg:flex
           ${isOpen ? 'translate-x-0' : '-translate-x-full'}
         `}
       >
-        {/* Logo */}
-        <div className="p-5 border-b border-[#1a3a7a]/50 flex-shrink-0">
-          <Link href="/" onClick={onClose} className="flex items-center gap-3 group">
-            <div className="w-10 h-10 rounded-xl bg-gradient-to-br from-blue-500 to-violet-600 flex items-center justify-center text-white font-bold text-base shadow-lg shadow-blue-500/25 flex-shrink-0">
-              쟁
-            </div>
-            <div>
-              <div className="text-white font-bold text-base leading-tight">쟁승메이드</div>
-              <div className="text-blue-400 text-xs font-medium">Premium Dev Services</div>
+        {/* Brand */}
+        <div className="px-5 pt-6 pb-5 flex-shrink-0">
+          <Link href="/" onClick={onClose} className="block group">
+            <div className="flex items-baseline gap-2">
+              <span className="text-white font-bold text-lg tracking-tight leading-none">쟁승메이드</span>
+              <span className="text-slate-600 text-xs font-mono">v2</span>
             </div>
+            <p className="text-slate-500 text-xs mt-1 font-mono tracking-tight">박재오 · 백엔드 7년</p>
           </Link>
         </div>
 
+        {/* Divider */}
+        <div className="mx-5 h-px bg-white/5 flex-shrink-0" />
+
         {/* Navigation */}
-        <nav className="flex-1 p-3 space-y-0.5 overflow-y-auto">
-          <div className="px-3 pt-2 pb-1">
-            <span className="text-slate-500 text-xs font-semibold uppercase tracking-wider">메뉴</span>
-          </div>
+        <nav className="flex-1 px-3 py-4 space-y-0.5 overflow-y-auto">
           {navItems.map((item) => {
             const isActive = pathname === item.href || (item.href !== '/' && pathname.startsWith(item.href));
             return (
@@ -147,103 +139,82 @@ export default function Sidebar({ isOpen, onClose }: SidebarProps) {
                 href={item.href}
                 onClick={onClose}
                 className={`
-                  flex items-center gap-3 px-3 py-2.5 rounded-xl transition-all duration-150 group relative
+                  flex items-center gap-3 px-3 py-2.5 rounded-lg transition-all duration-150 group relative
                   ${isActive
-                    ? 'bg-gradient-to-r from-blue-600 to-violet-600 text-white shadow-lg shadow-blue-600/20'
-                    : 'text-slate-400 hover:bg-[#0a1f5c] hover:text-slate-100'
+                    ? 'bg-white/8 text-white border-l-2 border-blue-500 pl-[10px]'
+                    : 'text-slate-500 hover:text-slate-200 hover:bg-white/5 border-l-2 border-transparent pl-[10px]'
                   }
                 `}
               >
-                <span className={`flex-shrink-0 ${isActive ? 'text-white' : 'text-slate-500 group-hover:text-slate-300'}`}>
+                <span className={`flex-shrink-0 transition-colors ${isActive ? 'text-blue-400' : 'text-slate-600 group-hover:text-slate-400'}`}>
                   {item.icon}
                 </span>
-                <div className="flex-1 min-w-0">
-                  <div className={`text-sm font-semibold truncate ${isActive ? 'text-white' : ''}`}>
-                    {item.label}
-                  </div>
-                  <div className={`text-xs truncate ${isActive ? 'text-blue-200' : 'text-slate-600 group-hover:text-slate-500'}`}>
-                    {item.desc}
-                  </div>
-                </div>
+                <span className={`text-sm font-medium flex-1 truncate ${isActive ? 'text-white' : ''}`}>
+                  {item.label}
+                </span>
                 {item.badge && (
-                  <span className={`
-                    text-xs font-bold px-1.5 py-0.5 rounded-md flex-shrink-0
-                    ${item.badge === 'HOT' ? 'bg-red-500/20 text-red-400' : 'bg-emerald-500/20 text-emerald-400'}
-                  `}>
+                  <span className="text-[10px] font-bold px-1.5 py-0.5 rounded bg-emerald-500/15 text-emerald-400 flex-shrink-0">
                     {item.badge}
                   </span>
                 )}
-                {isActive && (
-                  <div className="absolute right-2 w-1 h-5 bg-white/40 rounded-full" />
-                )}
               </Link>
             );
           })}
         </nav>
 
-        {/* 상호명 / 사업자 정보 — 토스페이먼츠 심사 필수 표기 */}
-        <div className="px-4 pt-3 pb-1 border-t border-[#1a3a7a]/30 flex-shrink-0">
-          <p className="text-slate-600 text-[10px] leading-relaxed">
-            <span className="block font-semibold text-slate-500 mb-0.5">상호명 : 쟁승메이드</span>
-            <span className="block">대표 : 박재오</span>
-            <span className="block">이메일 : bgg8988@gmail.com</span>
-            <span className="block">문의 : 010-3907-1392</span>
-            <span className="block mt-1 text-slate-700">© 2025 쟁승메이드</span>
-          </p>
+        {/* Business info */}
+        <div className="mx-5 h-px bg-white/5 flex-shrink-0" />
+        <div className="px-5 py-4 flex-shrink-0">
+          <dl className="space-y-0.5">
+            <dd className="text-slate-600 text-[10px] font-mono">상호 쟁승메이드 · 대표 박재오</dd>
+            <dd className="text-slate-600 text-[10px] font-mono">010-3907-1392 · bgg8988@gmail.com</dd>
+            <dd className="text-slate-700 text-[10px] font-mono mt-1">© 2025 쟁승메이드</dd>
+          </dl>
         </div>
 
-        {/* Bottom: 로그인 상태 */}
-        <div className="p-4 border-t border-[#1a3a7a]/50 flex-shrink-0">
+        {/* Divider */}
+        <div className="mx-5 h-px bg-white/5 flex-shrink-0" />
+
+        {/* Login section */}
+        <div className="px-4 py-4 flex-shrink-0">
           {userEmail ? (
-            /* 로그인 상태 */
-            <div className="space-y-2">
+            <div className="space-y-1">
               <Link
                 href="/mypage"
                 onClick={onClose}
-                className={`flex items-center gap-3 px-3 py-2 rounded-xl transition-all ${
+                className={`flex items-center gap-3 px-3 py-2 rounded-lg transition-all group ${
                   pathname.startsWith('/mypage')
-                    ? 'bg-gradient-to-r from-blue-600 to-violet-600'
-                    : 'hover:bg-[#0a1f5c]'
+                    ? 'bg-white/8 text-white border-l-2 border-blue-500 pl-[10px]'
+                    : 'text-slate-500 hover:text-slate-200 hover:bg-white/5 border-l-2 border-transparent pl-[10px]'
                 }`}
               >
-                <div className="w-9 h-9 rounded-full bg-gradient-to-br from-blue-400 to-violet-500 flex items-center justify-center text-white text-sm font-bold flex-shrink-0 shadow">
+                <div className="w-7 h-7 rounded-full bg-slate-700 border border-slate-600 flex items-center justify-center text-white text-xs font-bold flex-shrink-0">
                   {userEmail[0].toUpperCase()}
                 </div>
                 <div className="flex-1 min-w-0">
-                  <div className="text-white text-sm font-semibold truncate">{userEmail}</div>
-                  <div className="text-blue-400 text-xs">마이페이지</div>
+                  <div className="text-xs font-medium truncate text-slate-300">{userEmail}</div>
+                  <div className="text-slate-600 text-[10px]">마이페이지</div>
                 </div>
-                <div className="w-2 h-2 rounded-full bg-emerald-400 flex-shrink-0" />
+                <div className="w-1.5 h-1.5 rounded-full bg-emerald-400 flex-shrink-0" />
               </Link>
               <button
                 onClick={handleLogout}
-                className="w-full text-left px-3 py-1.5 rounded-lg text-slate-500 hover:text-slate-300 hover:bg-[#0a1f5c] text-xs transition-all"
+                className="w-full text-left px-3 py-1.5 text-slate-600 hover:text-slate-400 text-xs transition-colors font-mono"
               >
                 로그아웃
               </button>
             </div>
           ) : (
-            /* 비로그인 상태 */
-            <div className="space-y-2">
-              <div className="flex items-center gap-3 px-1 mb-2">
-                <div className="w-9 h-9 rounded-full bg-slate-800 border border-slate-700 flex items-center justify-center text-slate-500 flex-shrink-0">
-                  <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" />
-                  </svg>
-                </div>
-                <div className="flex-1 min-w-0">
-                  <div className="text-slate-400 text-sm font-medium">비로그인</div>
-                  <div className="text-slate-600 text-xs">로그인하면 더 많은 기능</div>
-                </div>
-              </div>
-              <Link
-                href="/login"
-                onClick={onClose}
-                className="block w-full text-center bg-gradient-to-r from-blue-600 to-violet-600 text-white text-sm font-semibold px-3 py-2 rounded-xl hover:opacity-90 transition-all"
-              >
-                로그인 / 회원가입
-              </Link>
-            </div>
+            <Link
+              href="/login"
+              onClick={onClose}
+              className="flex items-center gap-2 px-3 py-2 rounded-lg text-slate-500 hover:text-slate-200 hover:bg-white/5 transition-all text-sm group"
+            >
+              <svg className="w-4 h-4 text-slate-600 group-hover:text-slate-400 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M11 16l-4-4m0 0l4-4m-4 4h14m-5 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h7a3 3 0 013 3v1" />
+              </svg>
+              <span className="font-medium">로그인 / 회원가입</span>
+            </Link>
           )}
         </div>
       </aside>
diff --git a/app/services/ai-kit/page.tsx b/app/services/ai-kit/page.tsx
index 3148320..3f85f99 100644
--- a/app/services/ai-kit/page.tsx
+++ b/app/services/ai-kit/page.tsx
@@ -159,45 +159,31 @@ export default function AiKitPage() {
     <div className="min-h-full bg-[#f0f4ff]">
 
       {/* ─── Hero ─── */}
-      <div className="relative overflow-hidden bg-gradient-to-br from-[#0a0f2e] via-[#0f1a5c] to-[#0a0f2e] px-6 py-14 lg:px-12">
-        {/* 배경 그리드 */}
-        <div className="absolute inset-0 opacity-5 pointer-events-none" style={{
-          backgroundImage: 'linear-gradient(rgba(99,102,241,0.5) 1px, transparent 1px), linear-gradient(90deg, rgba(99,102,241,0.5) 1px, transparent 1px)',
-          backgroundSize: '40px 40px',
-        }} />
-        <div className="absolute top-0 left-1/2 -translate-x-1/2 w-[600px] h-[300px] opacity-20 pointer-events-none"
-          style={{ background: 'radial-gradient(ellipse, #6366f1, transparent 70%)' }} />
+      <div className="relative overflow-hidden bg-[#0a0f2e] px-6 py-14 lg:px-12" style={{ backgroundImage: 'repeating-linear-gradient(135deg, rgba(255,255,255,0.015) 0px, rgba(255,255,255,0.015) 1px, transparent 1px, transparent 40px)' }}>
 
-        <div className="relative max-w-3xl mx-auto text-center">
-          <Link href="/" className="inline-flex items-center gap-1.5 text-indigo-300/60 hover:text-indigo-300 text-sm mb-6 transition">
+        <div className="relative max-w-3xl mx-auto">
+          <Link href="/" className="inline-flex items-center gap-1.5 text-indigo-300/60 hover:text-indigo-300 text-sm mb-8 transition">
             <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 19l-7-7 7-7" /></svg>
             홈으로
           </Link>
 
-          <div className="inline-flex items-center gap-2 bg-indigo-400/10 border border-indigo-400/25 text-indigo-300 text-xs font-extrabold px-4 py-1.5 rounded-full uppercase tracking-widest mb-5">
-            <svg className="w-3.5 h-3.5" fill="currentColor" viewBox="0 0 24 24">
-              <path d="M13 10V3L4 14h7v7l9-11h-7z" />
-            </svg>
-            AI AUTOMATION KIT · 월 구독
-          </div>
+          <p className="text-indigo-400 text-xs font-bold uppercase tracking-widest mb-4 font-mono">AI 자동화 키트 · 월 구독</p>
 
-          {/* 핵심 카피: "낭비되는 시간"으로 시작 */}
+          {/* 핵심 카피 */}
           <h1 className="text-4xl md:text-5xl font-extrabold text-white mb-4 tracking-tight leading-tight">
             오늘도 반복 업무에<br />
-            <span className="text-transparent bg-clip-text bg-gradient-to-r from-red-400 to-orange-400">
-              {totalMonthlySaving}시간을 낭비하고 있습니다
-            </span>
+            <span className="text-red-400">{totalMonthlySaving}시간을 낭비하고 있습니다</span>
           </h1>
 
-          <p className="text-indigo-100/60 text-base md:text-lg leading-relaxed max-w-2xl mx-auto mb-6">
+          <p className="text-indigo-100/60 text-base md:text-lg leading-relaxed max-w-2xl mb-8">
             일지 작성, 이메일 답장, 보고서, SNS 기획…<br />
             <strong className="text-white">혼자 하면 월 {totalMonthlySaving}시간 이상 소비되는 일들,</strong> AI로 90% 줄일 수 있습니다.
           </p>
 
           {/* 가격 카드 */}
-          <div className="inline-flex flex-col items-center bg-white/5 border border-white/10 rounded-2xl px-8 py-5 backdrop-blur-sm mb-6">
+          <div className="inline-flex flex-col bg-white/5 border border-white/10 rounded-xl px-8 py-5 mb-6">
             <div className="flex items-center gap-2 mb-1">
-              <span className="text-xs font-extrabold bg-red-500 text-white px-2 py-0.5 rounded-md">런칭 특가</span>
+              <span className="text-xs font-bold bg-red-500 text-white px-2 py-0.5 rounded">런칭 특가</span>
               <span className="text-sm line-through text-white/30">월 39,900원</span>
             </div>
             <div className="text-4xl font-extrabold text-white">
@@ -207,10 +193,10 @@ export default function AiKitPage() {
             <p className="text-indigo-300/60 text-xs mt-1">언제든 해지 가능 · 해지 후 월말까지 이용</p>
           </div>
 
-          <div className="flex flex-col items-center gap-3">
+          <div className="flex flex-col gap-3">
             <PaymentButton
               productId="ai_kit_monthly"
-              className="bg-gradient-to-r from-indigo-500 to-cyan-500 text-white text-base font-extrabold px-8 py-4 rounded-xl hover:opacity-90 hover:scale-[1.02] transition-all shadow-lg shadow-indigo-500/25 w-full max-w-xs"
+              className="bg-blue-600 hover:bg-blue-500 text-white text-base font-bold px-8 py-4 rounded-xl transition-colors w-full max-w-xs"
               returnUrl="/services/ai-kit"
             >
               월 {totalMonthlySaving}시간 되찾기 →
diff --git a/app/services/automation/page.tsx b/app/services/automation/page.tsx
index 3400e94..2412d9f 100644
--- a/app/services/automation/page.tsx
+++ b/app/services/automation/page.tsx
@@ -152,39 +152,17 @@ export default function AutomationPage() {
       />
 
       {/* ─── Hero ─── */}
-      <div className="relative overflow-hidden bg-gradient-to-br from-[#012030] via-[#013d50] to-[#012030] px-6 py-14 lg:px-12">
-        <svg className="absolute inset-0 w-full h-full opacity-[0.06]" viewBox="0 0 800 300" preserveAspectRatio="xMidYMid slice">
-          <line x1="0" y1="150" x2="150" y2="150" stroke="#22d3ee" strokeWidth="1.5"/>
-          <circle cx="150" cy="150" r="5" fill="none" stroke="#22d3ee" strokeWidth="1.5"/>
-          <line x1="150" y1="150" x2="150" y2="80" stroke="#22d3ee" strokeWidth="1.5"/>
-          <rect x="130" y="60" width="40" height="20" rx="3" fill="none" stroke="#22d3ee" strokeWidth="1.5"/>
-          <line x1="150" y1="60" x2="150" y2="20" stroke="#22d3ee" strokeWidth="1.5"/>
-          <line x1="150" y1="150" x2="350" y2="150" stroke="#22d3ee" strokeWidth="1.5"/>
-          <circle cx="350" cy="150" r="5" fill="none" stroke="#22d3ee" strokeWidth="1.5"/>
-          <line x1="350" y1="150" x2="350" y2="220" stroke="#22d3ee" strokeWidth="1.5"/>
-          <rect x="330" y="220" width="40" height="20" rx="3" fill="none" stroke="#22d3ee" strokeWidth="1.5"/>
-          <line x1="350" y1="150" x2="550" y2="150" stroke="#22d3ee" strokeWidth="1.5"/>
-          <circle cx="550" cy="150" r="5" fill="none" stroke="#22d3ee" strokeWidth="1.5"/>
-          <line x1="550" y1="150" x2="550" y2="80" stroke="#22d3ee" strokeWidth="1.5"/>
-          <rect x="530" y="60" width="40" height="20" rx="3" fill="none" stroke="#22d3ee" strokeWidth="1.5"/>
-          <line x1="550" y1="150" x2="800" y2="150" stroke="#22d3ee" strokeWidth="1.5"/>
-        </svg>
+      <div className="relative overflow-hidden bg-[#012030] px-6 py-14 lg:px-12" style={{ backgroundImage: 'repeating-linear-gradient(135deg, rgba(255,255,255,0.015) 0px, rgba(255,255,255,0.015) 1px, transparent 1px, transparent 40px)' }}>
 
-        <div className="relative max-w-3xl mx-auto text-center">
-          <Link href="/" className="inline-flex items-center gap-1.5 text-cyan-300/60 hover:text-cyan-300 text-sm mb-6 transition">
+        <div className="relative max-w-3xl mx-auto">
+          <Link href="/" className="inline-flex items-center gap-1.5 text-cyan-300/60 hover:text-cyan-300 text-sm mb-8 transition">
             <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 19l-7-7 7-7" /></svg>
             홈으로
           </Link>
-          <div className="w-16 h-16 mx-auto rounded-2xl bg-cyan-400/15 border border-cyan-400/25 flex items-center justify-center mb-5">
-            <svg className="w-9 h-9 text-cyan-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z" />
-              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
-            </svg>
-          </div>
-          <p className="text-cyan-400/70 text-xs font-bold uppercase tracking-widest mb-2">RPA AUTOMATION · 업무 자동화 개발</p>
+          <p className="text-cyan-400 text-xs font-bold uppercase tracking-widest mb-4 font-mono">RPA · 업무 자동화 개발</p>
           <h1 className="text-4xl md:text-5xl font-extrabold text-white mb-4 tracking-tight leading-tight">
             반복 업무를<br />
-            <span className="text-transparent bg-clip-text bg-gradient-to-r from-cyan-400 to-teal-400">완전 자동화</span>
+            완전 자동화
           </h1>
           <p className="text-cyan-100/50 text-base md:text-lg leading-relaxed max-w-xl mx-auto mb-6">
             &ldquo;이 작업 매일 하기 너무 귀찮다&rdquo;는 생각이 드는 순간, 자동화할 수 있습니다.<br />
diff --git a/app/services/prompt/page.tsx b/app/services/prompt/page.tsx
index 29bc87a..6fb72aa 100644
--- a/app/services/prompt/page.tsx
+++ b/app/services/prompt/page.tsx
@@ -366,35 +366,17 @@ export default function PromptPage() {
       />
 
       {/* ─── Hero ─── */}
-      <div className="relative overflow-hidden bg-gradient-to-br from-[#0d0a2e] via-[#1a0f5c] to-[#0d0a2e] px-6 py-14 lg:px-12">
-        <div className="absolute top-0 right-0 w-[480px] h-full opacity-10 pointer-events-none hidden lg:block">
-          <div className="font-mono text-xs text-violet-300 p-8 leading-7">
-            <div><span className="text-pink-400">const</span> <span className="text-blue-300">optimizePrompt</span> <span className="text-white">=</span> <span className="text-yellow-300">(task)</span> <span className="text-white">{'=> {'}</span></div>
-            <div className="ml-4"><span className="text-pink-400">return</span> <span className="text-white">{'{'}</span></div>
-            <div className="ml-8"><span className="text-green-300">role</span><span className="text-white">:</span> <span className="text-orange-300">&apos;expert analyst&apos;</span><span className="text-white">,</span></div>
-            <div className="ml-8"><span className="text-green-300">context</span><span className="text-white">:</span> <span className="text-orange-300">`{'{task.context}'}`</span><span className="text-white">,</span></div>
-            <div className="ml-8"><span className="text-green-300">format</span><span className="text-white">:</span> <span className="text-orange-300">&apos;structured&apos;</span><span className="text-white">,</span></div>
-            <div className="ml-8"><span className="text-green-300">output</span><span className="text-white">:</span> <span className="text-orange-300">&apos;actionable&apos;</span></div>
-            <div className="ml-4"><span className="text-white">{'}'}</span></div>
-            <div><span className="text-white">{'};'}</span></div>
-            <div className="mt-4"><span className="text-slate-500">// efficiency: 94% ↑</span></div>
-          </div>
-        </div>
+      <div className="relative overflow-hidden bg-[#0d0a2e] px-6 py-14 lg:px-12" style={{ backgroundImage: 'repeating-linear-gradient(135deg, rgba(255,255,255,0.015) 0px, rgba(255,255,255,0.015) 1px, transparent 1px, transparent 40px)' }}>
 
-        <div className="relative max-w-3xl mx-auto text-center">
-          <Link href="/" className="inline-flex items-center gap-1.5 text-violet-300/60 hover:text-violet-300 text-sm mb-6 transition">
+        <div className="relative max-w-3xl mx-auto">
+          <Link href="/" className="inline-flex items-center gap-1.5 text-violet-300/60 hover:text-violet-300 text-sm mb-8 transition">
             <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 19l-7-7 7-7" /></svg>
             홈으로
           </Link>
-          <div className="w-16 h-16 mx-auto rounded-2xl bg-violet-400/15 border border-violet-400/25 flex items-center justify-center mb-5">
-            <svg className="w-9 h-9 text-violet-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z" />
-            </svg>
-          </div>
-          <p className="text-violet-400/70 text-xs font-bold uppercase tracking-widest mb-2">PROMPT ENGINEERING · AI 활용 극대화</p>
+          <p className="text-violet-400 text-xs font-bold uppercase tracking-widest mb-4 font-mono">프롬프트 엔지니어링 · AI 활용 극대화</p>
           <h1 className="text-4xl md:text-5xl font-extrabold text-white mb-4 tracking-tight leading-tight">
             AI를 제대로<br />
-            <span className="text-transparent bg-clip-text bg-gradient-to-r from-violet-400 to-blue-400">100% 활용하기</span>
+            100% 활용하기
           </h1>
           <p className="text-violet-100/50 text-base md:text-lg leading-relaxed max-w-xl mx-auto mb-6">
             ChatGPT·Claude를 쓰는데 결과가 항상 애매하신가요?<br />
diff --git a/app/services/website/page.tsx b/app/services/website/page.tsx
index d0643e8..5bedc65 100644
--- a/app/services/website/page.tsx
+++ b/app/services/website/page.tsx
@@ -557,46 +557,27 @@ export default function WebsiteServicePage() {
       `}} />
 
       {/* ── Hero ── */}
-      <section style={{ padding: '80px 24px 60px', textAlign: 'center', position: 'relative', overflow: 'hidden' }}>
-        {/* Animated grid */}
+      <section style={{ padding: '80px 24px 60px', position: 'relative', overflow: 'hidden' }}>
+        {/* Diagonal pattern */}
         <div style={{
           position: 'absolute', inset: 0, pointerEvents: 'none',
-          backgroundImage: 'linear-gradient(rgba(99,102,241,0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(99,102,241,0.05) 1px, transparent 1px)',
-          backgroundSize: '48px 48px',
-          animation: 'ws-gridScroll 10s linear infinite',
-        }} />
-        {/* Radial glow */}
-        <div style={{
-          position: 'absolute', inset: 0, pointerEvents: 'none',
-          background: 'radial-gradient(ellipse 75% 55% at 50% 0%, rgba(99,102,241,0.15) 0%, transparent 70%)',
-        }} />
-        {/* Ambient dot */}
-        <div style={{
-          position: 'absolute', top: '60%', left: '15%', width: 300, height: 300,
-          background: 'radial-gradient(circle, rgba(129,140,248,0.06) 0%, transparent 70%)',
-          borderRadius: '50%', pointerEvents: 'none', animation: 'ws-glow 5s ease-in-out infinite',
-        }} />
-        <div style={{
-          position: 'absolute', top: '30%', right: '10%', width: 200, height: 200,
-          background: 'radial-gradient(circle, rgba(244,114,182,0.05) 0%, transparent 70%)',
-          borderRadius: '50%', pointerEvents: 'none', animation: 'ws-glow 7s ease-in-out infinite 2s',
+          backgroundImage: 'repeating-linear-gradient(135deg, rgba(255,255,255,0.015) 0px, rgba(255,255,255,0.015) 1px, transparent 1px, transparent 40px)',
         }} />
 
         <div style={{ maxWidth: 820, margin: '0 auto', position: 'relative', animation: 'ws-fadeUp 0.9s cubic-bezier(0.16,1,0.3,1) both' }}>
-          <span style={{
-            display: 'inline-block', fontSize: 11, fontWeight: 700, letterSpacing: '0.2em',
-            color: '#818cf8', textTransform: 'uppercase',
-            border: '1px solid rgba(129,140,248,0.3)', padding: '5px 16px', borderRadius: 100,
-            marginBottom: 32,
+          <p style={{
+            fontSize: 11, fontWeight: 700, letterSpacing: '0.18em',
+            color: '#6366f1', textTransform: 'uppercase',
+            fontFamily: 'monospace',
+            marginBottom: 24,
           }}>
-            Homepage Development Service
-          </span>
+            홈페이지 제작 서비스
+          </p>
           <h1 style={{
             fontSize: 'clamp(28px, 4.5vw, 54px)', fontWeight: 800,
             lineHeight: 1.2, marginBottom: 20,
             letterSpacing: '-0.02em',
-            background: 'linear-gradient(135deg, #ffffff 0%, #c7d2fe 50%, #818cf8 100%)',
-            WebkitBackgroundClip: 'text', WebkitTextFillColor: 'transparent',
+            color: '#ffffff',
             wordBreak: 'keep-all',
           }}>
             홈페이지 맡겼다가<br/>연락 끊긴 경험, 여기선 없습니다
@@ -655,39 +636,46 @@ export default function WebsiteServicePage() {
         </div>
       </section>
 
-      {/* ── Marquee ── */}
-      <div style={{ borderTop: '1px solid rgba(255,255,255,0.04)', borderBottom: '1px solid rgba(255,255,255,0.04)', overflow: 'hidden', padding: '12px 0' }}>
-        <div className="ws-marquee-track" style={{ gap: 0 }}>
-          {[...Array(2)].map((_, i) => (
-            <div key={i} style={{ display: 'flex', gap: 0, whiteSpace: 'nowrap', flexShrink: 0 }}>
-              {['반응형 디자인', 'SEO 최적화', '빠른 납품', '계약서 작성', '소스코드 제공', '1년 AS 보장', '도메인 배포'].map((t, j) => (
-                <span key={j} style={{ padding: '0 2rem', fontSize: '0.75rem', color: '#1e293b', letterSpacing: '0.12em', textTransform: 'uppercase' }}>
-                  {t} <span style={{ color: 'rgba(99,102,241,0.3)', margin: '0 0.5rem' }}>·</span>
-                </span>
-              ))}
-            </div>
+      {/* ── Feature tags ── */}
+      <div style={{ borderTop: '1px solid rgba(255,255,255,0.05)', borderBottom: '1px solid rgba(255,255,255,0.05)', padding: '14px 24px' }}>
+        <div style={{ maxWidth: 1000, margin: '0 auto', display: 'flex', gap: 8, flexWrap: 'wrap', justifyContent: 'center' }}>
+          {['반응형 디자인', 'SEO 최적화', '빠른 납품', '계약서 작성', '소스코드 제공', '1년 AS 보장', '도메인 배포'].map((t) => (
+            <span key={t} style={{ padding: '4px 12px', fontSize: '11px', color: '#475569', letterSpacing: '0.06em', border: '1px solid rgba(255,255,255,0.07)', borderRadius: 4, fontFamily: 'monospace' }}>
+              {t}
+            </span>
           ))}
         </div>
       </div>
 
       {/* ── Trust badges ── */}
       <section style={{ padding: '48px 24px', maxWidth: 1000, margin: '0 auto' }}>
-        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(200px, 1fr))', gap: 16 }}>
+        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(200px, 1fr))', gap: 1, border: '1px solid rgba(255,255,255,0.06)', borderRadius: 12, overflow: 'hidden' }}>
           {[
-            { icon: '📋', title: '계약서 필수 작성', desc: '모든 프로젝트 계약서 체결 후 진행' },
-            { icon: '📊', title: '주간 진행 보고', desc: '매주 작업 현황 공유, 연락 두절 없음' },
-            { icon: '💾', title: '소스코드 전액 제공', desc: '완성 후 전체 소스코드 인도' },
-            { icon: '🔒', title: '납기 지연 패널티', desc: '지연 1일당 10만원 자동 감면' },
+            {
+              title: '계약서 필수 작성', desc: '모든 프로젝트 계약서 체결 후 진행',
+              icon: <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={1.5} style={{ width: 20, height: 20 }}><path strokeLinecap="round" strokeLinejoin="round" d="M9 12h3.75M9 15h3.75M9 18h3.75m3 .75H18a2.25 2.25 0 002.25-2.25V6.108c0-1.135-.845-2.098-1.976-2.192a48.424 48.424 0 00-1.123-.08m-5.801 0c-.065.21-.1.433-.1.664 0 .414.336.75.75.75h4.5a.75.75 0 00.75-.75 2.25 2.25 0 00-.1-.664m-5.8 0A2.251 2.251 0 0113.5 2.25H15c1.012 0 1.867.668 2.15 1.586m-5.8 0c-.376.023-.75.05-1.124.08C9.095 4.01 8.25 4.973 8.25 6.108V8.25m0 0H4.875c-.621 0-1.125.504-1.125 1.125v11.25c0 .621.504 1.125 1.125 1.125h9.75c.621 0 1.125-.504 1.125-1.125V9.375c0-.621-.504-1.125-1.125-1.125H8.25zM6.75 12h.008v.008H6.75V12zm0 3h.008v.008H6.75V15zm0 3h.008v.008H6.75V18z" /></svg>,
+            },
+            {
+              title: '주간 진행 보고', desc: '매주 작업 현황 공유, 연락 두절 없음',
+              icon: <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={1.5} style={{ width: 20, height: 20 }}><path strokeLinecap="round" strokeLinejoin="round" d="M3 13.125C3 12.504 3.504 12 4.125 12h2.25c.621 0 1.125.504 1.125 1.125v6.75C7.5 20.496 6.996 21 6.375 21h-2.25A1.125 1.125 0 013 19.875v-6.75zM9.75 8.625c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125v11.25c0 .621-.504 1.125-1.125 1.125h-2.25a1.125 1.125 0 01-1.125-1.125V8.625zM16.5 4.125c0-.621.504-1.125 1.125-1.125h2.25C20.496 3 21 3.504 21 4.125v15.75c0 .621-.504 1.125-1.125 1.125h-2.25a1.125 1.125 0 01-1.125-1.125V4.125z" /></svg>,
+            },
+            {
+              title: '소스코드 전액 제공', desc: '완성 후 전체 소스코드 인도',
+              icon: <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={1.5} style={{ width: 20, height: 20 }}><path strokeLinecap="round" strokeLinejoin="round" d="M17.25 6.75L22.5 12l-5.25 5.25m-10.5 0L1.5 12l5.25-5.25m7.5-3l-4.5 16.5" /></svg>,
+            },
+            {
+              title: '납기 지연 패널티', desc: '지연 1일당 10만원 자동 감면',
+              icon: <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={1.5} style={{ width: 20, height: 20 }}><path strokeLinecap="round" strokeLinejoin="round" d="M9 12.75L11.25 15 15 9.75m-3-7.036A11.959 11.959 0 013.598 6 11.99 11.99 0 003 9.749c0 5.592 3.824 10.29 9 11.623 5.176-1.332 9-6.03 9-11.622 0-1.31-.21-2.571-.598-3.751h-.152c-3.196 0-6.1-1.248-8.25-3.285z" /></svg>,
+            },
           ].map((b) => (
             <div key={b.title} style={{
-              padding: '20px 22px', borderRadius: 14,
+              padding: '20px 22px',
               background: 'rgba(255,255,255,0.02)',
-              border: '1px solid rgba(255,255,255,0.05)',
               display: 'flex', gap: 14, alignItems: 'flex-start',
             }}>
-              <span style={{ fontSize: 24, flexShrink: 0 }}>{b.icon}</span>
+              <span style={{ color: '#6366f1', flexShrink: 0, marginTop: 2 }}>{b.icon}</span>
               <div>
-                <div style={{ fontSize: 13, fontWeight: 700, color: '#e2e8f0', marginBottom: 4, wordBreak: 'keep-all' }}>{b.title}</div>
+                <div style={{ fontSize: 13, fontWeight: 600, color: '#e2e8f0', marginBottom: 4, wordBreak: 'keep-all' }}>{b.title}</div>
                 <div style={{ fontSize: 12, color: '#475569', lineHeight: 1.6, wordBreak: 'keep-all' }}>{b.desc}</div>
               </div>
             </div>
@@ -769,9 +757,8 @@ export default function WebsiteServicePage() {
                   background: '#080d1a', borderRadius: 16,
                   border: '1px solid rgba(255,255,255,0.05)',
                 }}>
-                  <div style={{ fontSize: 28, marginBottom: 12 }}>{p.icon}</div>
-                  <div style={{ fontSize: 10, color: '#6366f1', fontWeight: 700, letterSpacing: '0.12em', marginBottom: 7 }}>
-                    STEP {p.step}
+                  <div style={{ fontSize: 22, fontWeight: 800, color: '#6366f1', fontFamily: 'monospace', marginBottom: 12, letterSpacing: '-0.02em' }}>
+                    {p.step}
                   </div>
                   <div style={{ fontSize: 14, fontWeight: 700, color: 'white', marginBottom: 6, wordBreak: 'keep-all' }}>
                     {p.title}