From 6a6c73e7c9a9da35172998552019044e63a53658 Mon Sep 17 00:00:00 2001
From: gahusb <bgg8988@gmail.com>
Date: Thu, 2 Apr 2026 02:25:10 +0900
Subject: [PATCH] =?UTF-8?q?design:=20=EC=A0=84=20=EC=82=AC=EC=9D=B4?=
 =?UTF-8?q?=ED=8A=B8=20AI=20=ED=85=9C=ED=94=8C=EB=A6=BF=20=EA=B7=B8?=
 =?UTF-8?q?=EB=9D=BC=EB=94=94=EC=96=B8=ED=8A=B8=20=EC=99=84=EC=A0=84=20?=
 =?UTF-8?q?=EC=A0=9C=EA=B1=B0=20(Round=205)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- services/website: featured 가격 카드 linear-gradient → #0d1240 솔리드
- saju/input: blur-3xl orb + radial-gradient 도트 패턴 제거, bg-gradient-to-br → 솔리드+대각 패턴
- payment/fail + success: 헤더 그라디언트→#04102b, 로고 아이콘→#1a56db, 버튼→#1a56db 솔리드
- mypage: 탭 활성 상태·액센트 라인·버튼 전체 gradient → 솔리드 (#1a56db/amber-500)
  amber 알림 카드 gradient → bg-amber-50, 사주 결과 버튼 → #04102b

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 app/mypage/page.tsx           | 18 +++++++++---------
 app/payment/fail/page.tsx     |  6 +++---
 app/payment/success/page.tsx  |  8 ++++----
 app/saju/input/page.tsx       |  6 ++----
 app/services/website/page.tsx |  2 +-
 5 files changed, 19 insertions(+), 21 deletions(-)

diff --git a/app/mypage/page.tsx b/app/mypage/page.tsx
index 8465288..50a60e5 100644
--- a/app/mypage/page.tsx
+++ b/app/mypage/page.tsx
@@ -301,7 +301,7 @@ export default function MyPage() {
               onClick={() => setTab(t.key)}
               className={`flex-1 flex items-center justify-center gap-1.5 px-4 py-2 rounded-lg text-sm font-semibold transition-all ${
                 tab === t.key
-                  ? 'bg-gradient-to-r from-blue-600 to-violet-600 text-white shadow'
+                  ? 'bg-[#1a56db] text-white shadow'
                   : 'text-slate-500 hover:text-slate-700'
               }`}
             >
@@ -324,7 +324,7 @@ export default function MyPage() {
           <div className="space-y-4">
             <div className="bg-white rounded-2xl border border-[#dbe8ff] p-6">
               <h2 className="font-bold text-[#04102b] mb-4 flex items-center gap-2">
-                <div className="w-1 h-5 bg-gradient-to-b from-blue-600 to-violet-600 rounded-full" />
+                <div className="w-1 h-5 bg-[#1a56db] rounded-full" />
                 계정 정보
               </h2>
               <div className="space-y-3">
@@ -349,7 +349,7 @@ export default function MyPage() {
 
             {/* 구독 중인 서비스 - 요약 (탭으로 유도) */}
             {activeSubs.length > 0 && (
-              <div className="bg-gradient-to-br from-amber-50 to-orange-50 rounded-2xl border border-amber-200 p-5 flex items-center justify-between gap-3">
+              <div className="bg-amber-50 rounded-2xl border border-amber-200 p-5 flex items-center justify-between gap-3">
                 <div className="flex items-center gap-3">
                   <span className="text-2xl">{PLAN_LABELS[activeSubs[0].product_id]?.emoji ?? '🎟'}</span>
                   <div>
@@ -372,7 +372,7 @@ export default function MyPage() {
             {/* 텔레그램 연동 카드 */}
             <div className="bg-white rounded-2xl border border-[#dbe8ff] p-6">
               <h2 className="font-bold text-[#04102b] mb-4 flex items-center gap-2">
-                <div className="w-1 h-5 bg-gradient-to-b from-sky-500 to-blue-600 rounded-full" />
+                <div className="w-1 h-5 bg-[#1a56db] rounded-full" />
                 텔레그램 알림 연동
                 <button
                   onClick={() => setShowTelegramGuide(true)}
@@ -464,7 +464,7 @@ export default function MyPage() {
                   <button
                     onClick={handleTelegramConnect}
                     disabled={telegramLinkState === 'generating'}
-                    className="px-5 py-2.5 text-sm font-bold text-white bg-gradient-to-r from-sky-500 to-blue-600 hover:from-sky-400 hover:to-blue-500 rounded-xl shadow-sm shadow-sky-200 transition disabled:opacity-60"
+                    className="px-5 py-2.5 text-sm font-bold text-white bg-[#1a56db] hover:bg-[#1e4fc2] rounded-xl shadow-sm shadow-sky-200 transition disabled:opacity-60"
                   >
                     {telegramLinkState === 'generating' ? '생성 중...' : '텔레그램 연결하기'}
                   </button>
@@ -474,7 +474,7 @@ export default function MyPage() {
 
             <div className="bg-white rounded-2xl border border-[#dbe8ff] p-6">
               <h2 className="font-bold text-[#04102b] mb-4 flex items-center gap-2">
-                <div className="w-1 h-5 bg-gradient-to-b from-blue-600 to-violet-600 rounded-full" />
+                <div className="w-1 h-5 bg-[#1a56db] rounded-full" />
                 빠른 메뉴
               </h2>
               <div className="grid grid-cols-2 gap-3">
@@ -606,7 +606,7 @@ export default function MyPage() {
                     {/* 액션 버튼 */}
                     <div className="flex gap-2 flex-wrap">
                       <a href="/services/lotto/recommend"
-                        className="flex-1 text-center py-2 text-sm font-bold text-white bg-gradient-to-r from-amber-500 to-orange-500 hover:from-amber-400 hover:to-orange-400 rounded-xl transition shadow-sm">
+                        className="flex-1 text-center py-2 text-sm font-bold text-white bg-amber-500 hover:bg-amber-400 rounded-xl transition shadow-sm">
                         번호 추천받기
                       </a>
                       {isActive && (
@@ -721,7 +721,7 @@ export default function MyPage() {
                     )}
                     <Link
                       href={buildSajuResultUrl(rec)}
-                      className="block w-full text-center py-2 rounded-xl text-xs font-bold bg-gradient-to-r from-[#04102b] to-[#0a2060] text-white hover:from-[#0a1f5c] hover:to-[#1a3a7a] transition"
+                      className="block w-full text-center py-2 rounded-xl text-xs font-bold bg-[#04102b] hover:bg-[#0a1f5c] text-white transition"
                     >
                       {rec.is_paid && rec.interpretation ? 'AI 해석 다시 보기 →' : '결과 보기 →'}
                     </Link>
@@ -828,7 +828,7 @@ function EmptyState({
       <div className="text-slate-500 text-sm mb-6">{desc}</div>
       <Link
         href={linkHref}
-        className="inline-flex items-center gap-2 bg-gradient-to-r from-blue-600 to-violet-600 text-white px-6 py-3 rounded-xl font-semibold text-sm hover:opacity-90 transition-all shadow-lg shadow-blue-600/20"
+        className="inline-flex items-center gap-2 bg-[#1a56db] hover:bg-[#1e4fc2] text-white px-6 py-3 rounded-xl font-semibold text-sm transition-all shadow-lg shadow-blue-600/20"
       >
         {linkLabel} →
       </Link>
diff --git a/app/payment/fail/page.tsx b/app/payment/fail/page.tsx
index 970588a..0c7b519 100644
--- a/app/payment/fail/page.tsx
+++ b/app/payment/fail/page.tsx
@@ -26,7 +26,7 @@ function FailContent() {
       <div className="flex justify-center gap-3 flex-wrap">
         <button
           onClick={() => window.history.back()}
-          className="inline-flex items-center gap-2 bg-gradient-to-r from-blue-600 to-violet-600 text-white px-6 py-3 rounded-xl font-semibold text-sm shadow-lg shadow-blue-600/20"
+          className="inline-flex items-center gap-2 bg-[#1a56db] hover:bg-[#1e4fc2] text-white px-6 py-3 rounded-xl font-semibold text-sm shadow-lg shadow-blue-600/20 transition"
         >
           다시 시도하기
         </button>
@@ -45,9 +45,9 @@ export default function PaymentFailPage() {
   return (
     <div className="min-h-full bg-[#f0f5ff] flex items-center justify-center px-6 py-16">
       <div className="w-full max-w-md bg-white rounded-2xl border border-[#dbe8ff] shadow-lg overflow-hidden">
-        <div className="bg-gradient-to-r from-[#04102b] to-[#0a1f5c] px-6 py-4">
+        <div className="bg-[#04102b] px-6 py-4" style={{ backgroundImage: 'repeating-linear-gradient(135deg, rgba(255,255,255,0.012) 0px, rgba(255,255,255,0.012) 1px, transparent 1px, transparent 40px)' }}>
           <div className="flex items-center gap-2">
-            <div className="w-7 h-7 rounded-lg bg-gradient-to-br from-blue-500 to-violet-600 flex items-center justify-center text-white font-bold text-xs">
+            <div className="w-7 h-7 rounded-lg bg-[#1a56db] flex items-center justify-center text-white font-bold text-xs">
               쟁
             </div>
             <span className="text-white font-bold text-sm">쟁승메이드 결제</span>
diff --git a/app/payment/success/page.tsx b/app/payment/success/page.tsx
index 12498ef..6a157cf 100644
--- a/app/payment/success/page.tsx
+++ b/app/payment/success/page.tsx
@@ -70,7 +70,7 @@ function SuccessContent() {
           <Link href="/mypage" className="inline-flex items-center gap-2 bg-white border border-[#dbe8ff] text-slate-600 px-5 py-2.5 rounded-xl font-semibold text-sm hover:bg-slate-50 transition">
             결제 내역 확인
           </Link>
-          <Link href="/" className="inline-flex items-center gap-2 bg-gradient-to-r from-blue-600 to-violet-600 text-white px-5 py-2.5 rounded-xl font-semibold text-sm">
+          <Link href="/" className="inline-flex items-center gap-2 bg-[#1a56db] hover:bg-[#1e4fc2] text-white px-5 py-2.5 rounded-xl font-semibold text-sm transition">
             홈으로 →
           </Link>
         </div>
@@ -98,7 +98,7 @@ function SuccessContent() {
       <div className="flex justify-center gap-3 flex-wrap">
         <Link
           href="/mypage?tab=payments"
-          className="inline-flex items-center gap-2 bg-gradient-to-r from-blue-600 to-violet-600 text-white px-6 py-3 rounded-xl font-semibold text-sm shadow-lg shadow-blue-600/20"
+          className="inline-flex items-center gap-2 bg-[#1a56db] hover:bg-[#1e4fc2] text-white px-6 py-3 rounded-xl font-semibold text-sm shadow-lg shadow-blue-600/20 transition"
         >
           결제 내역 확인 →
         </Link>
@@ -117,9 +117,9 @@ export default function PaymentSuccessPage() {
   return (
     <div className="min-h-full bg-[#f0f5ff] flex items-center justify-center px-6 py-16">
       <div className="w-full max-w-md bg-white rounded-2xl border border-[#dbe8ff] shadow-lg overflow-hidden">
-        <div className="bg-gradient-to-r from-[#04102b] to-[#0a1f5c] px-6 py-4">
+        <div className="bg-[#04102b] px-6 py-4" style={{ backgroundImage: 'repeating-linear-gradient(135deg, rgba(255,255,255,0.012) 0px, rgba(255,255,255,0.012) 1px, transparent 1px, transparent 40px)' }}>
           <div className="flex items-center gap-2">
-            <div className="w-7 h-7 rounded-lg bg-gradient-to-br from-blue-500 to-violet-600 flex items-center justify-center text-white font-bold text-xs">
+            <div className="w-7 h-7 rounded-lg bg-[#1a56db] flex items-center justify-center text-white font-bold text-xs">
               쟁
             </div>
             <span className="text-white font-bold text-sm">쟁승메이드 결제</span>
diff --git a/app/saju/input/page.tsx b/app/saju/input/page.tsx
index bc782b0..20742c5 100644
--- a/app/saju/input/page.tsx
+++ b/app/saju/input/page.tsx
@@ -4,10 +4,8 @@ export default function SajuInputPage() {
   return (
     <div className="min-h-full bg-[#f0f5ff]">
       {/* Hero */}
-      <div className="relative overflow-hidden bg-gradient-to-br from-[#04102b] via-[#0a1f5c] to-[#04102b] px-6 py-12">
-        <div className="absolute inset-0 opacity-[0.05]"
-          style={{ backgroundImage: 'radial-gradient(circle, #a78bfa 1px, transparent 1px)', backgroundSize: '28px 28px' }} />
-        <div className="absolute right-0 top-0 w-72 h-72 rounded-full bg-violet-500/10 blur-3xl -translate-y-1/2 translate-x-1/3" />
+      <div className="relative overflow-hidden px-6 py-12"
+        style={{ background: '#04102b', backgroundImage: 'repeating-linear-gradient(135deg, rgba(255,255,255,0.012) 0px, rgba(255,255,255,0.012) 1px, transparent 1px, transparent 40px)' }}>
 
         <div className="relative max-w-xl mx-auto text-center">
           <div className="inline-flex items-center gap-2 bg-violet-400/10 border border-violet-400/25 text-violet-300 text-xs font-semibold px-4 py-1.5 rounded-full mb-4 tracking-wide">
diff --git a/app/services/website/page.tsx b/app/services/website/page.tsx
index b41ad73..75c3e83 100644
--- a/app/services/website/page.tsx
+++ b/app/services/website/page.tsx
@@ -798,7 +798,7 @@ export default function WebsiteServicePage() {
             {plans.map((plan) => (
               <div key={plan.name} className="ws-plan-card" style={{
                 padding: 32, borderRadius: 20,
-                background: plan.featured ? 'linear-gradient(135deg, #1e1b4b, #312e81)' : '#080d1a',
+                background: plan.featured ? '#0d1240' : '#080d1a',
                 border: `1px solid ${plan.featured ? plan.color + '40' : 'rgba(255,255,255,0.05)'}`,
                 position: 'relative', overflow: 'hidden',
                 boxShadow: plan.featured ? `0 24px 64px ${plan.color}12` : 'none',