feat: 프롬프트 패키지 3종 추가 + 마케팅 SVG 에셋 전면 재작성

- 프롬프트 엔지니어링 페이지에 비즈니스 이메일/마케팅 카피/업무 보고서 패키지 3종 추가
- 각 상품 할인가(10,900~12,900원), 7가지 기능 설명, 프롬프트 미리보기 포함
- 마케팅 SVG 에셋 8개 전면 재작성:
  - 이모지 제거 → SVG path 기반 아이콘으로 교체
  - 배경에 유기적 bezier 곡선 블롭 형태 추가
  - 자동화 플로우 직선 연결 → 곡선 bezier path로 교체
  - 로또 공 3D 하이라이트/그림자 강화
  - 주식 차트 polyline → smooth bezier 곡선 개선
  - 말풍선 꼬리 path 추가로 자연스러운 대화 표현

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

STRATEGY.md

@@ -1,8 +1,7 @@
 # 쟁승메이드 사업 전략 플레이북
 
-> 작성일: 2026-03-24
+> 최초 작성: 2026-03-24 | 마지막 업데이트: 2026-03-24
 > 작성 방식: 마케터 · 인플루언서 · 사업가 3인 원탁 회의 기반
-> 현황: Phase 1 실행 중
 
 ---
 
@@ -15,34 +14,33 @@
 - "현직 대기업 개발자" — 프리랜서 시장에서 희소한 신뢰 신호
 - 계약서·소스코드·AS의 공포 해소(Fear Removal) 포인트 명확
 
-**약점**
+**개선 필요**
 - 전환 퍼널이 단층 구조 (방문 → 문의만 존재, 중간 단계 없음)
-- 소셜 프루프 부재 — 숫자는 있지만 실제 고객 후기·스크린샷 없음
+- 소셜 프루프 부재 — 실제 고객 후기·스크린샷 없음 → 무료 체험 배너 추가로 수집 중
-- 메타 픽셀 등 리타게팅 인프라 없음 (GA만으로는 광고 추적 불가)
+- 콘텐츠 마케팅 SEO 유입 미확보 → 블로그/유튜브 콘텐츠 자산 준비 완료, 업로드 대기
-- 콘텐츠 마케팅 없음 — SEO 유입 거의 0
 
 ### 인플루언서 관점
 
 **강점**
 - 사주·로또·AI 자동화 시연 — SNS 바이럴 소재 3종 보유
-- 저가 프롬프트 상품(9,900~12,900원) — 숏폼 "이거 사봤는데요" 포맷에 최적화
+- 저가 프롬프트 상품 (9,900~12,900원) — 숏폼 연동에 최적화
+- 브랜드 스토리 원고 완성 (CONTENT/brand-story.md)
 
-**약점**
+**개선 필요**
-- 브랜드 스토리 없음 — "왜 현직 개발자가 부업을 시작했나?"가 없으면 팔로워 성장 불가
+- 유튜브 채널 개설 및 숏츠 업로드 (스크립트 10편 준비 완료)
-- 바이럴 훅 없음 — 무료 체험판, 샘플 없이는 자발적 공유 발생 안 함
+- 네이버 블로그 계정 개설 및 글 업로드 (초안 10편 준비 완료)
-- 커뮤니티 미운영 — 카카오 오픈채팅방이 있지만 가치 발신이 없음
 
 ### 사업가 관점
 
 **강점**
 - 개발자 직접 운영 → 초기 마진 극히 높음
 - 구독형 + 단건형 + 디지털 상품의 수익 다각화 원형 존재
+- 프롬프트 패키지 5종으로 디지털 상품 라인 확장 중
 
-**약점**
+**개선 필요**
-- 수익 구조가 1인 가동에 갇혀 있음 (박재오 없으면 매출 멈춤 = 프리랜서, 사업 아님)
+- 수익 구조가 1인 가동에 갇혀 있음 → Phase 4에서 해결
-- LTV 설계 없음 — Cross-sell 흐름 미존재
+- LTV 설계 없음 → Cross-sell 흐름 미존재
-- 가격이 "저렴한 프리랜서" 포지션으로 읽힘 (현직 대기업 레벨이면 단가 높여도 됨)
+- 가격이 저렴한 프리랜서 포지션 → 점진적 단가 인상 필요
-- 서비스 범위가 너무 넓음 — "아무거나 다 합니다"는 가장 약한 포지셔닝
 
 ---
 
@@ -76,83 +74,79 @@
 
 ## 🚀 사업 로드맵
 
-### PHASE 1 — 포지셔닝 명확화 (0~3개월) ← **현재 진행 중**
+---
+
+### ✅ PHASE 1 — 포지셔닝 명확화 (완료)
 
 **전략: "AI 자동화 전문가"로 단일 포지셔닝**
 
-```
+**완료된 작업**
-✅ 집중 서비스
+- 포지셔닝 전환: "7년차 개발자" → "현직 대기업 개발자" 전체 사이트 적용
-- 업무 자동화 (RPA, 파이썬, AI 연동)
+- 홈페이지 Hero AI 자동화 포지셔닝 강화 + 배지 추가
-- 외주 개발 (AI 기능 포함 서비스)
+- 서비스 순서 재정렬 (자동화·프롬프트 → 상단)
-- 프롬프트 엔지니어링 (패키지 판매)
+- 크몽/숨고 "AI 자동화 세팅 대행" 신규 서비스 카피 작성 완료
+- 홈페이지 무료 체험 후기 수집 배너 추가
 
-🔽 보조 수익 (마케팅 자원 최소화)
+**남은 과제 (직접 수행)**
-- 로또·주식 (구독 수익은 유지)
+- [ ] 첫 고객 3명 무료 자동화 세팅 후 후기 받기 → 블라인드/커뮤니티에 모집 글
-- 사주 (트래픽 유입 도구로만 활용)
+- [ ] 크몽/숨고에 "AI 자동화 세팅 대행" 실제 서비스 등록
-```
 
-**즉시 실행 액션 체크리스트**
+**KPI 목표**
-
-- [x] "7년차 개발자" → "현직 대기업 개발자" 포지셔닝 전환
-- [x] 홈페이지 Hero에 AI 자동화 포지셔닝 강화
-- [x] 서비스 순서 재정렬 (자동화·프롬프트 → 상단)
-- [x] 크몽/숨고 "AI 자동화 세팅 대행" 신규 서비스 카피 작성
-- [x] 홈페이지에 무료 체험 후기 수집 배너 추가
-- [ ] 첫 고객 3명에게 무료 자동화 세팅 후 후기 받기 (직접 진행)
-- [ ] 크몽/숨고에 "AI 자동화 세팅 대행" 서비스 등록
-
-**KPI**
 - 첫 후기 3건 확보
 - 문의 전환율 현재 대비 1.5배 향상
 
 ---
 
-### PHASE 2 — 콘텐츠 엔진 구축 (3~6개월)
+### 🔄 PHASE 2 — 콘텐츠 엔진 구축 (진행 중)
 
 **전략: 1인 미디어로 신뢰 자산 축적**
 
-| 채널 | 형태 | 주제 예시 |
+**완료된 작업 (코드/파일)**
-|------|------|---------|
+- SEO 인프라: sitemap.xml / robots.txt / JSON-LD 구조화 데이터
-| 유튜브 숏츠 | 60초 자동화 시연 | "회사에서 매일 하는 이 작업, AI로 5초 만에 끝냈습니다" |
+- GA4 이벤트 트래킹 (문의 성공 generate_lead 이벤트)
-| 네이버 블로그 | SEO 롱폼 | "업무 자동화 외주 맡길 때 반드시 확인해야 할 5가지" |
+- 서비스 페이지 SEO 메타태그 강화 (automation·prompt·website)
-| 스레드/엑스 | 인사이트 | "대기업 개발자가 부업으로 배운 것들" |
+- 홈페이지 콘텐츠 위젯 섹션 추가
+- 콘텐츠 자산 준비 완료:
+  - 브랜드 스토리 원고 4종 (`CONTENT/brand-story.md`)
+  - 유튜브 숏츠 스크립트 10편 (`CONTENT/youtube-scripts.md`)
+  - SNS 30일 포스팅 캘린더 (`CONTENT/sns-calendar.md`)
+  - 네이버 블로그 SEO 초안 10편 (`CONTENT/blog-drafts.md`)
 
-**브랜드 스토리 (콘텐츠 핵심 축)**
+**남은 과제 (직접 수행)**
-> "현직 대기업에 다니면서 왜 부업을 시작했나? → 연락 두절 개발자에게 사기 당한 지인을 보고 → '나 같은 사람이 필요하다'는 것을 깨달음"
+- [ ] 네이버 블로그 계정 개설 + 초안 10편 업로드 (파일 준비 완료)
+- [ ] 유튜브 채널 개설 + 숏츠 촬영/업로드 (스크립트 준비 완료)
+- [ ] 스레드/엑스 계정 개설 + SNS 캘린더대로 포스팅 시작
+- [ ] 메타 픽셀 계정 생성 및 사이트에 설치
 
-**KPI**
+**KPI 목표**
 - 3개월 후 유튜브 구독자 500명
 - 블로그 월 방문자 2,000명
 - 카카오 오픈채팅 멤버 100명
 
 ---
 
-### PHASE 3 — 제품화 & 스케일 (6~12개월)
+### 🔄 PHASE 3 — 제품화 & 스케일 (진행 중)
 
 **전략: 디지털 상품 라인 확장 + 구독 신규 출시**
 
-```
+**완료된 작업**
-🛒 디지털 상품 확장
+- 프롬프트 패키지 5종으로 확장 (이미지 생성·자소서·이메일·마케팅·보고서)
-├── 프롬프트 패키지 (현재 2종 → 10종)
+- 프리미엄 자동화 툴 2종 (부동산 크롤러·회계 자동화) 상품화
-├── 자동화 스크립트 패키지 (엑셀 매크로, 파이썬)
-├── 소상공인 AI 키트 (카카오 챗봇 세팅 가이드 + 프롬프트)
-└── 자동화 강의 (크몽 클래스101 입점)
 
-🔄 신규 구독 서비스
+**남은 과제 (직접 수행)**
-└── 소상공인 AI 자동화 월 구독 (19,900원/월)
+- [ ] 소상공인 AI 자동화 월 구독 (19,900원/월) 결제 플로우 구축
-    — 매달 새 자동화 스크립트 1종 + 프롬프트 2종 제공
+- [ ] 클래스101/탈잉 강의 콘텐츠 제작 및 입점
-```
 
-**KPI**
+**KPI 목표**
 - 디지털 상품 월 판매 50건
 - 구독 서비스 가입자 100명
 - 월 매출 300만원
 
 ---
 
-### PHASE 4 — 에이전시 전환 or SaaS (12개월+)
+### ⏳ PHASE 4 — 에이전시 전환 or SaaS (12개월+)
 
-**두 갈림길**
+**두 갈림길 — Phase 3 결과 보고 결정**
 
 **A. 마이크로 에이전시화**
 - 외주 개발자 1~2명 파트타임 채용
@@ -166,18 +160,18 @@
 
 ---
 
-## 📋 우선순위 액션 플랜 전체
+## 📋 전체 액션 플랜 현황
 
-| 우선순위 | 액션 | 예상 효과 | 난이도 | 상태 |
+| 우선순위 | 액션 | 예상 효과 | 상태 |
-|---------|------|----------|--------|------|
+|---------|------|----------|------|
-| 🔴 즉시 | 첫 고객 3명 무료 → 후기 확보 | 전환율 2배 | 쉬움 | 미완 |
+| 🔴 즉시 | 첫 고객 3명 무료 → 후기 확보 | 전환율 2배 | ⬜ 진행 필요 |
-| 🔴 즉시 | 홈페이지 AI 자동화 포지셔닝 강화 | 이탈율 감소 | 쉬움 | ✅ 완료 |
+| 🔴 즉시 | 크몽/숨고 AI 자동화 세팅 대행 등록 | 즉각 수주 | ⬜ 진행 필요 |
-| 🔴 즉시 | 크몽 "AI 자동화 세팅 대행" 신규 등록 | 즉각 수주 | 쉬움 | 미완 |
+| 🟡 1개월 | 네이버 블로그 초안 10편 업로드 | SEO 유입 | ⬜ 파일 준비 완료 |
-| 🟡 1개월 | 유튜브 숏츠 10편 (자동화 시연) | 인지도 구축 | 보통 | 미착수 |
+| 🟡 1개월 | 유튜브 숏츠 10편 업로드 | 인지도 구축 | ⬜ 스크립트 준비 완료 |
-| 🟡 1개월 | 메타 픽셀 + GTM 이벤트 설치 | 리타게팅 광고 가능 | 보통 | 미착수 |
+| 🟡 1개월 | 메타 픽셀 계정 생성 및 설치 | 리타게팅 광고 | ⬜ 진행 필요 |
-| 🟡 2개월 | 네이버 블로그 SEO 글 20편 | 무료 유입 채널 | 보통 | 미착수 |
+| 🟡 2개월 | SNS 캘린더대로 30일 포스팅 | 팔로워 성장 | ⬜ 캘린더 준비 완료 |
-| 🟢 3개월 | 소상공인 AI 키트 구독 상품 론칭 | 반복 수익 | 어려움 | 미착수 |
+| 🟢 3개월 | 소상공인 AI 키트 구독 결제 연동 | 반복 수익 | ⬜ 진행 필요 |
-| 🟢 6개월 | 클래스101/탈잉 강의 입점 | 브랜드 확장 | 보통 | 미착수 |
+| 🟢 6개월 | 클래스101/탈잉 강의 입점 | 브랜드 확장 | ⬜ 진행 필요 |
 
 ---
 
@@ -191,7 +185,7 @@
 
 ---
 
-## 📌 크몽/숨고 "AI 자동화 세팅 대행" 신규 서비스 카피
+## 📌 크몽/숨고 "AI 자동화 세팅 대행" 서비스 카피
 
 ### 서비스 제목
 ```
@@ -222,51 +216,36 @@ AI 도구를 도입하고 싶은데 어떻게 세팅해야 할지 막막하신
 - 소스코드 100% 전달
 - 1개월 무상 AS 포함
 
-▶ 이런 분께 추천드립니다
-- 매일 반복하는 엑셀 작업이 있으신 분
-- 이메일을 수동으로 분류하고 답장 쓰고 계신 분
-- ChatGPT 쓰는데 결과가 항상 엉망인 분
-- 노코드 툴을 도입하고 싶은데 혼자 하기 어려우신 분
-
-▶ 진행 방식
-1. 의뢰 접수 → 당일 업무 인터뷰
-2. 자동화 범위 확정 → 견적서 발송
-3. 3일 이내 납품 → 사용 가이드 함께 전달
-4. 1개월 무상 A/S 지원
-
 납기 지연 시 하루 10만 원 패널티 적용. 연락 두절 없습니다.
 ```
 
 ---
 
-## 📌 후기 수집 전략 (Phase 1 핵심 과제)
+## 📌 후기 수집 전략
-
-### 무료 체험 → 후기 교환 프로세스
 
 ```
 1단계: 타겟 섭외
-   - 직장인 커뮤니티(블라인드, 직장인 갤러리) 글 작성
+   - 블라인드·직장인 갤러리에 모집 글 게시
    - "AI 자동화 세팅 무료 3팀 모집 (후기 작성 조건)"
    - 카카오 오픈채팅 공지에도 동일 공지
 
-2단계: 무료 세팅 진행
+2단계: 무료 세팅 진행 (팀당 최대 3시간 투자)
-   - Make.com 플로우 1개 또는 프롬프트 5종
+   - Make.com 플로우 1개 OR 맞춤 프롬프트 5종
-   - 최대 3시간 투자, 화면 녹화로 진행 과정 기록
 
 3단계: 후기 받기
    - 크몽/숨고 후기 작성 요청
-   - 카카오톡 캡처 후기 (사이트 게시 허락 받기)
+   - 카카오톡 캡처 후기 (사이트 게시 허락)
    - 영상 후기는 보너스 (유튜브 숏츠 소재 활용)
 
 4단계: 사이트 게재
-   - 실명 + 직군 + 개선 수치 포함 후기 카드 제작
+   - 직군 + 개선 수치 포함 후기 카드 제작
    - 홈페이지 소셜 프루프 섹션에 추가
 ```
 
-### 후기 템플릿 (요청 시 제공)
+### 후기 요청 템플릿
 ```
 직군: [예: 마케팅 팀장]
 사용 전: [기존 업무 방식]
-사용 후: [개선된 수치 또는 느낀 변화]
+사용 후: [개선된 수치 또는 변화]
 한 줄 추천: [자유롭게]
 ```

app/services/prompt/page.tsx

@@ -123,6 +123,170 @@ overexposed, blurry, plastic look, artificial lighting`,
     cta: '패키지 구매 문의 →',
     productId: 'prompt_resume',
   },
+  {
+    id: 'email',
+    badge: 'BUSINESS EMAIL',
+    badgeColor: '#60a5fa',
+    bgFrom: '#0c1a3a',
+    bgTo: '#1e3a6e',
+    accentColor: '#3b82f6',
+    accentBg: 'rgba(59,130,246,0.12)',
+    accentBorder: 'rgba(59,130,246,0.3)',
+    title: '비즈니스 이메일 마스터 프롬프트 패키지',
+    subtitle: 'ChatGPT · Claude 전용 · 상황별 40종 템플릿',
+    price: '32,000원',
+    salePrice: '10,900원',
+    discountRate: '66% OFF',
+    saleLabel: '런칭 기념 특가',
+    priceNote: '/ 패키지 (즉시 다운로드)',
+    desc: '신규 파트너 제안부터 거절 메일, 클레임 응대, 계약 협상까지 — 실무에서 반복 사용하는 비즈니스 이메일 상황 40가지를 AI가 전문 비서처럼 작성하도록 설계한 완성형 프롬프트 패키지입니다.',
+    features: [
+      { label: '40가지 상황별 이메일 프롬프트', desc: '제안·문의·거절·사과·팔로업·계약·협상·내부 보고 등 비즈니스 전 상황 커버' },
+      { label: '상대방 직급별 톤 자동 조정', desc: '대표·임원·실무자·외부 파트너·고객별로 적합한 경어와 표현 강도를 자동으로 조정하는 프롬프트' },
+      { label: '영어 이메일 동시 출력', desc: '한국어 초안 작성 후 비즈니스 영어 버전으로 즉시 변환하는 이중 출력 프롬프트 포함' },
+      { label: '클레임·컴플레인 전문 대응 세트', desc: '감정적 고객·거래처 이메일을 분석하고 상황별 최적 응대 메일을 생성하는 CS 전문 프롬프트 7종' },
+      { label: '이메일 후속 조치 자동화', desc: '1차 연락 후 답장 없을 때의 팔로업, 회신 독촉, 미팅 확정 등 타임라인별 후속 이메일 시리즈 프롬프트' },
+      { label: '제목 라인 A/B 테스트 생성', desc: '오픈율을 높이는 이메일 제목 5가지 변형을 자동 생성하는 헤드라인 최적화 프롬프트' },
+      { label: '실전 예시 40쌍 (Before/After)', desc: '평범한 이메일 → 임팩트 있는 전문 이메일로 변환된 실전 예시 40쌍 PDF 가이드북 포함' },
+    ],
+    promptPreview: {
+      title: '프롬프트 예시 — 신규 파트너십 제안 이메일',
+      content: `당신은 10년 경력의 B2B 영업 전문가이자 비즈니스 라이터입니다.
+아래 정보를 바탕으로 상대방이 반드시 읽고 싶어지는 파트너십 제안 이메일을 작성해주세요.
+
+[작성 원칙]
+1. 첫 문장에서 상대방의 이익/관심사를 직접 언급 (내 소개 X)
+2. 제안 핵심을 3줄 이내로 압축 (바쁜 담당자가 5초 내 파악)
+3. 구체적 수치나 레퍼런스로 신뢰도 구축
+4. 명확한 CTA 1개만 포함 (회의 일정 링크 OR 짧은 통화 요청)
+5. 전체 300자 이내, 첨부 자료는 1개 이하
+
+[제안 정보]
+- 우리 회사/서비스: [입력]
+- 제안 대상 회사: [입력]
+- 협업으로 상대방이 얻는 이익: [입력]
+- 기존 레퍼런스/실적: [입력]
+- 원하는 다음 액션: [입력]
+
+[출력 형식]
+① 이메일 제목 3가지 옵션 (각각 다른 각도)
+② 본문 이메일 (원칙 준수)
+③ 수신자가 거절할 가능성이 높은 이유와 예방 팁`,
+    },
+    cta: '패키지 구매 문의 →',
+    productId: 'prompt_email',
+  },
+  {
+    id: 'marketing',
+    badge: 'MARKETING COPY',
+    badgeColor: '#fb923c',
+    bgFrom: '#1c0a00',
+    bgTo: '#431407',
+    accentColor: '#f97316',
+    accentBg: 'rgba(249,115,22,0.12)',
+    accentBorder: 'rgba(249,115,22,0.3)',
+    title: '마케팅 카피라이팅 마스터 프롬프트',
+    subtitle: 'SNS · 광고 · 상세페이지 · 유튜브 전용 35종',
+    price: '38,000원',
+    salePrice: '12,900원',
+    discountRate: '66% OFF',
+    saleLabel: '런칭 기념 특가',
+    priceNote: '/ 패키지 (즉시 다운로드)',
+    desc: '인스타그램·유튜브·쿠팡·스마트스토어·카카오 채널까지 — 각 플랫폼의 알고리즘과 소비자 심리를 반영하여 클릭률·전환율을 극대화하는 마케팅 카피 전문 프롬프트 35종 세트입니다.',
+    features: [
+      { label: 'SNS 플랫폼별 최적화 카피 세트', desc: '인스타그램 피드/릴스·유튜브 제목·스레드·카카오 비즈메시지 각 채널 알고리즘 특성을 반영한 별도 프롬프트' },
+      { label: '감성 카피 ↔ 이성 카피 전환', desc: '같은 상품을 감성 스토리텔링 방식과 스펙·기능 중심 이성 방식으로 각각 작성하여 A/B 테스트용 카피 쌍 생성' },
+      { label: '상세페이지 전환율 최적화 구조', desc: '훅(Hook) → 문제 공감 → 해결책 제시 → 사회적 증거 → CTA의 5단계 전환 공식을 자동 적용하는 상세페이지 카피 프롬프트' },
+      { label: '제품 소개글 10초 요약 공식', desc: '핵심 USP(독보적 강점)를 10초 안에 전달하는 엘리베이터 피치형 짧은 소개글 자동 생성 프롬프트' },
+      { label: '유튜브/숏폼 썸네일 제목 생성기', desc: '조회수를 높이는 클릭베이트형 제목과 커뮤니티 공감형 제목을 구분하여 생성하는 유튜브 최적화 프롬프트' },
+      { label: '리뷰·후기 마케팅 카피 변환', desc: '고객 후기·댓글을 분석하여 그 안의 핵심 감동 포인트를 광고 카피로 변환하는 소셜 프루프 카피 프롬프트' },
+      { label: '업종별 금지 표현 자동 필터', desc: '식품·의료·금융·부동산 등 규제 업종의 법적 주의 표현을 사전에 체크하고 대안 표현을 제시하는 컴플라이언스 프롬프트' },
+    ],
+    promptPreview: {
+      title: '프롬프트 예시 — 인스타그램 상품 소개 릴스 스크립트',
+      content: `당신은 팔로워 50만 명의 인스타그램 쇼핑 인플루언서이자
+마케팅 전환율 전문가입니다.
+다음 상품 정보를 바탕으로 구매 욕구를 자극하는 릴스 스크립트를 작성해주세요.
+
+[스크립트 구조 — 60초 이내]
+00~03초: 즉각 멈추게 하는 훅 문장 (의문형 OR 공감형 OR 충격 통계)
+04~10초: "이게 뭔데?" 궁금증 유발 — 상품 첫 노출
+11~30초: 핵심 기능 3가지를 BEFORE/AFTER 방식으로 시연
+31~45초: 소셜 프루프 (실제 고객 반응 또는 수치)
+46~55초: 한정 혜택/가격 공개
+56~60초: 명확한 CTA (링크 인 바이오, DM, 댓글 단어)
+
+[상품 정보]
+- 상품명/카테고리: [입력]
+- 핵심 기능/차별점: [입력]
+- 타겟 고객: [입력]
+- 가격/혜택: [입력]
+
+[출력]
+① 릴스 스크립트 본문
+② 자막용 텍스트 (10자 이내 임팩트 문구 5개)
+③ 해시태그 20개 (도달 최적화)`,
+    },
+    cta: '패키지 구매 문의 →',
+    productId: 'prompt_marketing',
+  },
+  {
+    id: 'report',
+    badge: 'BUSINESS REPORT',
+    badgeColor: '#a78bfa',
+    bgFrom: '#13082b',
+    bgTo: '#1e1148',
+    accentColor: '#8b5cf6',
+    accentBg: 'rgba(139,92,246,0.12)',
+    accentBorder: 'rgba(139,92,246,0.3)',
+    title: '업무 보고서·기획서 자동화 프롬프트 패키지',
+    subtitle: 'ChatGPT · Claude 전용 · 직장인 필수 30종',
+    price: '30,000원',
+    salePrice: '10,900원',
+    discountRate: '64% OFF',
+    saleLabel: '런칭 기념 특가',
+    priceNote: '/ 패키지 (즉시 다운로드)',
+    desc: '주간 업무 보고부터 임원 발표용 기획서, 투자 제안서, 회의록 요약까지 — 직장인이 매주 반복 작성하는 문서를 AI가 체계적으로 작성하도록 설계한 업무 자동화 프롬프트 30종 세트입니다.',
+    features: [
+      { label: '주간·월간 업무 보고서 자동화', desc: '팀원별 진행 현황, 완료 사항, 이슈, 다음 주 계획을 표 형식으로 정리하는 구조화된 보고서 생성 프롬프트' },
+      { label: '임원 보고용 1페이지 요약 공식', desc: '"Bottom Line Up Front" 원칙으로 핵심 결론 → 근거 → 요청사항 순서의 임원 친화적 요약 프롬프트' },
+      { label: '신사업 기획서 뼈대 자동 생성', desc: '시장 분석 → 목표 설정 → 실행 방안 → 예산 계획 → KPI 설정의 5단계 기획서 프레임워크 자동 구성 프롬프트' },
+      { label: '회의록 → 액션 아이템 변환', desc: '날것의 회의 내용을 입력하면 결정사항·담당자·기한·후속 과제로 즉시 분류하는 회의록 구조화 프롬프트' },
+      { label: '데이터 분석 결과 스토리텔링', desc: '숫자·표·그래프 데이터를 경영진이 이해하기 쉬운 인사이트 내러티브로 변환하는 데이터 보고 프롬프트' },
+      { label: 'RFP·제안서 경쟁력 강화', desc: '발주사의 선정 기준에 맞춰 제안서의 차별점·강점을 부각시키고 약점을 보완하는 제안서 최적화 프롬프트' },
+      { label: '프레젠테이션 슬라이드 목차 자동 설계', desc: '보고 목적과 청중에 맞는 슬라이드 구성 순서, 각 슬라이드 핵심 메시지를 자동으로 설계해주는 프롬프트' },
+    ],
+    promptPreview: {
+      title: '프롬프트 예시 — 주간 업무 보고서 자동 작성',
+      content: `당신은 5년 경력의 기업 커뮤니케이션 전문가이자
+비즈니스 라이터입니다.
+아래 업무 내용을 바탕으로 팀장에게 보고할 주간 업무 보고서를 작성해주세요.
+
+[보고서 작성 원칙]
+1. 첫 줄에 이번 주 가장 중요한 성과 1가지를 먼저 명시
+2. 수치로 표현 가능한 모든 항목은 반드시 수치화
+3. 이슈는 "문제 상황 → 조치 내용 → 현재 상태" 3단 구조로 기술
+4. 다음 주 계획은 담당자·기한과 함께 표 형식으로 정리
+5. 전체 A4 1장 이내, 핵심 위주
+
+[업무 내용 입력]
+- 이번 주 완료 업무: [입력]
+- 진행 중인 업무: [입력]
+- 발생한 이슈/리스크: [입력]
+- 다음 주 계획: [입력]
+- 요청 사항 (상급자에게): [입력]
+
+[출력 형식]
+① 이번 주 핵심 성과 (1~2줄 요약)
+② 완료 업무 목록 (수치 포함)
+③ 진행 중 업무 + 달성률
+④ 이슈 및 대응 현황
+⑤ 다음 주 계획 (담당·기한 포함 표)
+⑥ 협조 요청 사항`,
+    },
+    cta: '패키지 구매 문의 →',
+    productId: 'prompt_report',
+  },
 ];
 
 const useCases = [

public/marketing/banner-homepage.svg

@@ -1,182 +1,231 @@
 <svg xmlns="http://www.w3.org/2000/svg" width="1200" height="400" viewBox="0 0 1200 400">
   <defs>
-    <linearGradient id="bgBn" x1="0%" y1="0%" x2="100%" y2="100%">
+    <linearGradient id="bn-bgGrad" x1="0%" y1="0%" x2="100%" y2="100%">
-      <stop offset="0%" style="stop-color:#04102b"/>
+      <stop offset="0%" stop-color="#04102b"/>
-      <stop offset="55%" style="stop-color:#0d1f4f"/>
+      <stop offset="100%" stop-color="#1e1b4b"/>
-      <stop offset="100%" style="stop-color:#1e1b4b"/>
     </linearGradient>
-    <linearGradient id="textBn" x1="0%" y1="0%" x2="100%" y2="0%">
+    <radialGradient id="bn-blueGlow" cx="30%" cy="50%" r="50%">
-      <stop offset="0%" style="stop-color:#60a5fa"/>
+      <stop offset="0%" stop-color="#2563eb" stop-opacity="0.12"/>
-      <stop offset="100%" style="stop-color:#a78bfa"/>
+      <stop offset="100%" stop-color="#2563eb" stop-opacity="0.0"/>
-    </linearGradient>
-    <linearGradient id="btnBn" x1="0%" y1="0%" x2="100%" y2="0%">
-      <stop offset="0%" style="stop-color:#2563eb"/>
-      <stop offset="100%" style="stop-color:#7c3aed"/>
-    </linearGradient>
-    <linearGradient id="priceBn" x1="0%" y1="0%" x2="100%" y2="100%">
-      <stop offset="0%" style="stop-color:#1d4ed8"/>
-      <stop offset="100%" style="stop-color:#7c3aed"/>
-    </linearGradient>
-    <radialGradient id="glowBn1" cx="25%" cy="40%" r="45%">
-      <stop offset="0%" style="stop-color:#2563eb;stop-opacity:0.2"/>
-      <stop offset="100%" style="stop-color:#2563eb;stop-opacity:0"/>
     </radialGradient>
-    <radialGradient id="glowBn2" cx="85%" cy="60%" r="35%">
+    <linearGradient id="bn-badgeGrad" x1="0%" y1="0%" x2="100%" y2="0%">
-      <stop offset="0%" style="stop-color:#7c3aed;stop-opacity:0.15"/>
+      <stop offset="0%" stop-color="#1e3a8a"/>
-      <stop offset="100%" style="stop-color:#7c3aed;stop-opacity:0"/>
+      <stop offset="100%" stop-color="#1d4ed8"/>
-    </radialGradient>
+    </linearGradient>
-    <clipPath id="brClipBn">
+    <linearGradient id="bn-priceBadge" x1="0%" y1="0%" x2="100%" y2="0%">
-      <rect x="660" y="28" width="508" height="320" rx="14"/>
+      <stop offset="0%" stop-color="#1d4ed8"/>
-    </clipPath>
+      <stop offset="100%" stop-color="#7c3aed"/>
-    <filter id="shadowBn">
+    </linearGradient>
-      <feDropShadow dx="0" dy="10" stdDeviation="18" flood-color="#000" flood-opacity="0.55"/>
+    <linearGradient id="bn-bottomBar" x1="0%" y1="0%" x2="100%" y2="0%">
-    </filter>
+      <stop offset="0%" stop-color="#1d4ed8"/>
-    <filter id="badgeShadBn">
+      <stop offset="100%" stop-color="#7c3aed"/>
-      <feDropShadow dx="0" dy="3" stdDeviation="6" flood-color="#2563eb" flood-opacity="0.4"/>
+    </linearGradient>
-    </filter>
+    <linearGradient id="bn-browserChrome" x1="0%" y1="0%" x2="0%" y2="100%">
-    <pattern id="dotsBn" width="36" height="36" patternUnits="userSpaceOnUse">
+      <stop offset="0%" stop-color="#1e2535"/>
-      <circle cx="18" cy="18" r="1" fill="#1a3a7a" opacity="0.4"/>
+      <stop offset="100%" stop-color="#141c2e"/>
-    </pattern>
+    </linearGradient>
+    <linearGradient id="bn-sidebar" x1="0%" y1="0%" x2="100%" y2="0%">
+      <stop offset="0%" stop-color="#0f172a"/>
+      <stop offset="100%" stop-color="#111827"/>
+    </linearGradient>
   </defs>
 
-  <!-- 배경 -->
+  <!-- Background -->
-  <rect width="1200" height="400" fill="url(#bgBn)"/>
+  <rect width="1200" height="400" fill="url(#bn-bgGrad)"/>
-  <rect width="1200" height="400" fill="url(#glowBn1)"/>
+  <rect width="1200" height="400" fill="url(#bn-blueGlow)"/>
-  <rect width="1200" height="400" fill="url(#glowBn2)"/>
-  <rect width="1200" height="400" fill="url(#dotsBn)"/>
 
-  <!-- 왼쪽 콘텐츠 -->
+  <!-- Organic background shapes -->
-  <!-- 뱃지 -->
+  <path d="M 0 0 C 200 -30 400 80 600 50 C 800 20 1000 100 1200 80 L 1200 0 Z" fill="rgba(37,99,235,0.05)"/>
-  <rect x="52" y="42" width="282" height="36" rx="18" fill="#1d4ed8" filter="url(#badgeShadBn)" opacity="0.9"/>
+  <path d="M 0 400 C 150 360 350 390 500 370 C 650 350 800 380 1000 360 L 1200 350 L 1200 400 Z" fill="rgba(124,58,237,0.05)"/>
-  <circle cx="74" cy="60" r="6" fill="#fbbf24"/>
-  <text x="90" y="65" font-family="'Malgun Gothic','Apple SD Gothic Neo',Arial,sans-serif" font-size="14" font-weight="700" fill="#ffffff">납기 100% · 무료 AS · 연락두절 없음</text>
 
-  <!-- 메인 헤드라인 -->
+  <!-- Dot pattern background -->
-  <text x="52" y="128" font-family="'Malgun Gothic','Apple SD Gothic Neo',Arial,sans-serif" font-size="42" font-weight="900" fill="#ffffff">납기 지키고 연락 끊지 않는</text>
+  <pattern id="bn-dots" x="0" y="0" width="36" height="36" patternUnits="userSpaceOnUse">
-  <text x="52" y="180" font-family="'Malgun Gothic','Apple SD Gothic Neo',Arial,sans-serif" font-size="42" font-weight="900" fill="url(#textBn)">개발자가 만드는 홈페이지</text>
+    <circle cx="18" cy="18" r="1.0" fill="rgba(255,255,255,0.05)"/>
+  </pattern>
+  <rect width="1200" height="400" fill="url(#bn-dots)"/>
 
-  <!-- 서브텍스트 -->
+  <!-- ===== LEFT CONTENT ===== -->
-  <text x="52" y="222" font-family="'Malgun Gothic','Apple SD Gothic Neo',Arial,sans-serif" font-size="17" fill="#94a3b8">기획 · 디자인 · 개발 · 배포 원스톱 · 납기 보장</text>
 
-  <!-- 가격 + 체크리스트 -->
+  <!-- Badge row -->
-  <rect x="52" y="245" width="194" height="50" rx="12" fill="url(#priceBn)"/>
+  <rect x="44" y="32" width="318" height="28" rx="14" fill="url(#bn-badgeGrad)" stroke="rgba(59,130,246,0.5)" stroke-width="1"/>
-  <text x="149" y="265" text-anchor="middle" font-family="'Malgun Gothic',Arial,sans-serif" font-size="12" font-weight="600" fill="#ddd6fe">스타터 시작가</text>
+  <text x="203" y="51" font-family="'Malgun Gothic','Apple SD Gothic Neo',sans-serif" font-size="11.5" fill="#93c5fd" text-anchor="middle" font-weight="600">납기 100% · 무료 AS · 연락두절 없음</text>
-  <text x="149" y="286" text-anchor="middle" font-family="'Malgun Gothic',Arial,sans-serif" font-size="22" font-weight="900" fill="#ffffff">50만원~</text>
 
-  <!-- 체크리스트 -->
+  <!-- Headline -->
-  <g font-family="'Malgun Gothic',Arial,sans-serif" font-size="14" fill="#94a3b8">
+  <text x="44" y="108" font-family="'Malgun Gothic','Apple SD Gothic Neo',sans-serif" font-size="38" fill="white" font-weight="800" letter-spacing="-0.5">납기 지키고 연락 끊지 않는</text>
-    <circle cx="62" cy="326" r="9" fill="#22c55e" opacity="0.15"/>
+  <text x="44" y="156" font-family="'Malgun Gothic','Apple SD Gothic Neo',sans-serif" font-size="38" fill="#60a5fa" font-weight="800" letter-spacing="-0.5">개발자가 만드는 홈페이지</text>
-    <text x="62" y="331" text-anchor="middle" font-family="Arial" font-size="11" font-weight="700" fill="#22c55e">✓</text>
-    <text x="80" y="331">반응형 디자인</text>
 
-    <circle cx="208" cy="326" r="9" fill="#22c55e" opacity="0.15"/>
+  <!-- Subtext -->
-    <text x="208" y="331" text-anchor="middle" font-family="Arial" font-size="11" font-weight="700" fill="#22c55e">✓</text>
+  <text x="44" y="186" font-family="'Malgun Gothic','Apple SD Gothic Neo',sans-serif" font-size="14" fill="rgba(255,255,255,0.5)">기획 · 디자인 · 개발 · 배포 원스톱 · 납기 보장</text>
-    <text x="226" y="331">SEO 최적화</text>
 
-    <circle cx="348" cy="326" r="9" fill="#22c55e" opacity="0.15"/>
+  <!-- Price badge -->
-    <text x="348" y="331" text-anchor="middle" font-family="Arial" font-size="11" font-weight="700" fill="#22c55e">✓</text>
+  <rect x="44" y="200" width="116" height="36" rx="18" fill="url(#bn-priceBadge)"/>
-    <text x="366" y="331">납기 보장</text>
+  <text x="102" y="223" font-family="'Malgun Gothic','Apple SD Gothic Neo',sans-serif" font-size="16" fill="white" text-anchor="middle" font-weight="800">50만원~</text>
 
-    <circle cx="62" cy="358" r="9" fill="#22c55e" opacity="0.15"/>
+  <!-- Checklist items (SVG check icons, no emojis) -->
-    <text x="62" y="363" text-anchor="middle" font-family="Arial" font-size="11" font-weight="700" fill="#22c55e">✓</text>
+  <g>
-    <text x="80" y="363">무료 AS</text>
+    <!-- Item 1: 반응형 디자인 -->
-
+    <g transform="translate(44, 250)">
-    <circle cx="208" cy="358" r="9" fill="#22c55e" opacity="0.15"/>
+      <rect x="0" y="0" width="16" height="16" rx="4" fill="#1d4ed8"/>
-    <text x="208" y="363" text-anchor="middle" font-family="Arial" font-size="11" font-weight="700" fill="#22c55e">✓</text>
+      <path d="M 3 8 L 6 11 L 13 4" stroke="white" stroke-width="1.8" fill="none" stroke-linecap="round" stroke-linejoin="round"/>
-    <text x="226" y="363">Next.js 풀스택</text>
-  </g>
-
-  <!-- URL -->
-  <text x="52" y="390" font-family="Arial,sans-serif" font-size="13" fill="#3b5998">jaengseung-made.com</text>
-
-  <!-- 오른쪽 브라우저 목업 -->
-  <g filter="url(#shadowBn)">
-    <rect x="660" y="28" width="508" height="320" rx="14" fill="#0f172a" stroke="#1e3a8a" stroke-width="1.5"/>
-    <!-- 탭바 -->
-    <rect x="660" y="28" width="508" height="38" rx="14" fill="#040e28"/>
-    <rect x="660" y="52" width="508" height="14" fill="#040e28"/>
-    <!-- 창 버튼 -->
-    <circle cx="684" cy="47" r="6" fill="#ef4444"/>
-    <circle cx="706" cy="47" r="6" fill="#f59e0b"/>
-    <circle cx="728" cy="47" r="6" fill="#22c55e"/>
-    <!-- URL 바 -->
-    <rect x="748" y="36" width="368" height="22" rx="11" fill="#0d1f4f" stroke="#1a3a7a" stroke-width="1"/>
-    <text x="932" y="51" text-anchor="middle" font-family="Arial,sans-serif" font-size="10" fill="#475569">jaengseung-made.com</text>
-
-    <!-- 내부 콘텐츠 -->
-    <g clip-path="url(#brClipBn)">
-      <rect x="660" y="66" width="508" height="282" fill="#f8fafc"/>
-
-      <!-- 사이드바 -->
-      <rect x="660" y="66" width="124" height="282" fill="#04102b"/>
-      <!-- 사이드바 로고 -->
-      <rect x="672" y="80" width="26" height="26" rx="7" fill="#2563eb"/>
-      <text x="685" y="98" text-anchor="middle" font-family="sans-serif" font-size="11" font-weight="800" fill="#fff">쟁</text>
-      <!-- 메뉴 항목들 -->
-      <rect x="668" y="118" width="100" height="24" rx="7" fill="#2563eb" opacity="0.9"/>
-      <rect x="676" y="124" width="8" height="10" rx="2" fill="#60a5fa" opacity="0.5"/>
-      <rect x="690" y="126" width="48" height="6" rx="3" fill="#fff" opacity="0.8"/>
-      <rect x="668" y="148" width="100" height="22" rx="6" fill="#0d1f4f"/>
-      <rect x="676" y="154" width="8" height="8" rx="2" fill="#1e3a8a"/>
-      <rect x="690" y="156" width="38" height="5" rx="2" fill="#1e3a8a"/>
-      <rect x="668" y="176" width="100" height="22" rx="6" fill="#0d1f4f"/>
-      <rect x="676" y="182" width="8" height="8" rx="2" fill="#1e3a8a"/>
-      <rect x="690" y="184" width="44" height="5" rx="2" fill="#1e3a8a"/>
-      <rect x="668" y="204" width="100" height="22" rx="6" fill="#0d1f4f"/>
-      <rect x="676" y="210" width="8" height="8" rx="2" fill="#1e3a8a"/>
-      <rect x="690" y="212" width="36" height="5" rx="2" fill="#1e3a8a"/>
-
-      <!-- 메인 콘텐츠 -->
-      <!-- 상단 네비 -->
-      <rect x="784" y="66" width="384" height="36" fill="#fff" stroke="#e2e8f0" stroke-width="0.5"/>
-      <rect x="800" y="76" width="100" height="14" rx="7" fill="#e2e8f0"/>
-      <rect x="1094" y="72" width="56" height="20" rx="10" fill="#2563eb"/>
-      <text x="1122" y="86" text-anchor="middle" font-family="sans-serif" font-size="9" font-weight="700" fill="#fff">문의하기</text>
-
-      <!-- 히어로 -->
-      <rect x="784" y="102" width="384" height="100" fill="#eff6ff"/>
-      <rect x="800" y="118" width="50" height="14" rx="7" fill="#bfdbfe"/>
-      <rect x="800" y="140" width="150" height="16" rx="8" fill="#93c5fd"/>
-      <rect x="800" y="164" width="110" height="12" rx="6" fill="#bfdbfe"/>
-      <rect x="800" y="184" width="70" height="22" rx="11" fill="#2563eb"/>
-      <text x="835" y="199" text-anchor="middle" font-family="sans-serif" font-size="8" fill="#fff">문의하기</text>
-      <rect x="1040" y="110" width="108" height="80" rx="8" fill="#dbeafe"/>
-      <rect x="1050" y="124" width="70" height="8" rx="4" fill="#93c5fd"/>
-      <rect x="1050" y="138" width="85" height="8" rx="4" fill="#bfdbfe"/>
-      <rect x="1050" y="152" width="76" height="8" rx="4" fill="#bfdbfe"/>
-
-      <!-- 서비스 카드 행 -->
-      <rect x="784" y="202" width="126" height="82" rx="8" fill="#fff" stroke="#e2e8f0" stroke-width="1"/>
-      <rect x="784" y="202" width="126" height="5" rx="2" fill="#2563eb"/>
-      <rect x="796" y="216" width="30" height="30" rx="7" fill="#eff6ff"/>
-      <text x="811" y="237" text-anchor="middle" font-size="13">🏢</text>
-      <rect x="796" y="254" width="60" height="8" rx="4" fill="#e2e8f0"/>
-      <rect x="796" y="268" width="80" height="6" rx="3" fill="#f1f5f9"/>
-
-      <rect x="918" y="202" width="126" height="82" rx="8" fill="#fff" stroke="#ede9fe" stroke-width="1.5"/>
-      <rect x="918" y="202" width="126" height="5" rx="2" fill="#7c3aed"/>
-      <rect x="930" y="216" width="30" height="30" rx="7" fill="#ede9fe"/>
-      <text x="945" y="237" text-anchor="middle" font-size="13">⚡</text>
-      <rect x="930" y="254" width="60" height="8" rx="4" fill="#ddd6fe"/>
-      <rect x="930" y="268" width="80" height="6" rx="3" fill="#ede9fe"/>
-
-      <rect x="1052" y="202" width="116" height="82" rx="8" fill="#fff" stroke="#e2e8f0" stroke-width="1"/>
-      <rect x="1052" y="202" width="116" height="5" rx="2" fill="#059669"/>
-      <rect x="1064" y="216" width="30" height="30" rx="7" fill="#ecfdf5"/>
-      <text x="1079" y="237" text-anchor="middle" font-size="13">🚀</text>
-      <rect x="1064" y="254" width="60" height="8" rx="4" fill="#d1fae5"/>
-      <rect x="1064" y="268" width="76" height="6" rx="3" fill="#ecfdf5"/>
-
-      <!-- 하단 푸터 -->
-      <rect x="784" y="284" width="384" height="64" fill="#04102b"/>
-      <rect x="800" y="296" width="60" height="10" rx="5" fill="#1e3a8a"/>
-      <rect x="800" y="312" width="90" height="7" rx="3" fill="#0d1f4f"/>
-      <rect x="1088" y="293" width="64" height="26" rx="8" fill="#2563eb"/>
-      <text x="1120" y="310" text-anchor="middle" font-family="sans-serif" font-size="9" fill="#fff">상담 신청</text>
     </g>
+    <text x="68" y="263" font-family="'Malgun Gothic','Apple SD Gothic Neo',sans-serif" font-size="13" fill="rgba(255,255,255,0.75)">반응형 디자인</text>
+
+    <!-- Item 2: SEO 최적화 -->
+    <g transform="translate(44, 278)">
+      <rect x="0" y="0" width="16" height="16" rx="4" fill="#1d4ed8"/>
+      <path d="M 3 8 L 6 11 L 13 4" stroke="white" stroke-width="1.8" fill="none" stroke-linecap="round" stroke-linejoin="round"/>
+    </g>
+    <text x="68" y="291" font-family="'Malgun Gothic','Apple SD Gothic Neo',sans-serif" font-size="13" fill="rgba(255,255,255,0.75)">SEO 최적화</text>
+
+    <!-- Item 3: 납기 보장 -->
+    <g transform="translate(196, 250)">
+      <rect x="0" y="0" width="16" height="16" rx="4" fill="#1d4ed8"/>
+      <path d="M 3 8 L 6 11 L 13 4" stroke="white" stroke-width="1.8" fill="none" stroke-linecap="round" stroke-linejoin="round"/>
+    </g>
+    <text x="220" y="263" font-family="'Malgun Gothic','Apple SD Gothic Neo',sans-serif" font-size="13" fill="rgba(255,255,255,0.75)">납기 보장</text>
+
+    <!-- Item 4: 무료 AS -->
+    <g transform="translate(196, 278)">
+      <rect x="0" y="0" width="16" height="16" rx="4" fill="#1d4ed8"/>
+      <path d="M 3 8 L 6 11 L 13 4" stroke="white" stroke-width="1.8" fill="none" stroke-linecap="round" stroke-linejoin="round"/>
+    </g>
+    <text x="220" y="291" font-family="'Malgun Gothic','Apple SD Gothic Neo',sans-serif" font-size="13" fill="rgba(255,255,255,0.75)">무료 AS</text>
+
+    <!-- Item 5: Next.js 풀스택 -->
+    <g transform="translate(44, 306)">
+      <rect x="0" y="0" width="16" height="16" rx="4" fill="#1d4ed8"/>
+      <path d="M 3 8 L 6 11 L 13 4" stroke="white" stroke-width="1.8" fill="none" stroke-linecap="round" stroke-linejoin="round"/>
+    </g>
+    <text x="68" y="319" font-family="'Malgun Gothic','Apple SD Gothic Neo',sans-serif" font-size="13" fill="rgba(255,255,255,0.75)">Next.js 풀스택</text>
   </g>
 
-  <!-- 하단 바 -->
+  <!-- URL text -->
-  <rect x="0" y="368" width="1200" height="32" fill="url(#btnBn)"/>
+  <text x="44" y="353" font-family="'Malgun Gothic','Apple SD Gothic Neo',sans-serif" font-size="12" fill="rgba(255,255,255,0.3)">jaengseungmade.vercel.app</text>
-  <text x="600" y="389" text-anchor="middle" font-family="'Malgun Gothic','Apple SD Gothic Neo',Arial,sans-serif" font-size="13" font-weight="600" fill="#ffffff">납기 100% 보장  ·  무료 AS 포함  ·  연락두절 없음  ·  jaengseung-made.com</text>
+
+  <!-- ===== RIGHT: BROWSER MOCKUP ===== -->
+
+  <!-- Browser outer frame -->
+  <rect x="636" y="24" width="524" height="330" rx="12" fill="url(#bn-browserChrome)" stroke="rgba(99,102,241,0.3)" stroke-width="1.5"/>
+
+  <!-- Browser tab bar -->
+  <rect x="636" y="24" width="524" height="36" rx="12" fill="#1a2235"/>
+  <rect x="636" y="44" width="524" height="16" fill="#1a2235"/>
+
+  <!-- Window buttons -->
+  <circle cx="660" cy="42" r="6" fill="#ef4444" fill-opacity="0.8"/>
+  <circle cx="680" cy="42" r="6" fill="#f59e0b" fill-opacity="0.8"/>
+  <circle cx="700" cy="42" r="6" fill="#22c55e" fill-opacity="0.8"/>
+
+  <!-- Tab -->
+  <rect x="720" y="30" width="140" height="24" rx="6" fill="#0f172a"/>
+  <text x="790" y="47" font-family="'Malgun Gothic','Apple SD Gothic Neo',sans-serif" font-size="10" fill="rgba(255,255,255,0.6)" text-anchor="middle">쟁승메이드</text>
+
+  <!-- URL bar -->
+  <rect x="636" y="60" width="524" height="28" fill="#141c2e"/>
+  <rect x="730" y="66" width="330" height="16" rx="8" fill="rgba(255,255,255,0.06)" stroke="rgba(255,255,255,0.1)" stroke-width="1"/>
+  <text x="895" y="78" font-family="'Malgun Gothic','Apple SD Gothic Neo',sans-serif" font-size="9" fill="rgba(255,255,255,0.35)" text-anchor="middle">jaengseungmade.vercel.app</text>
+
+  <!-- Browser body content area -->
+  <rect x="636" y="88" width="524" height="266" rx="0" fill="#0d1120"/>
+
+  <!-- Browser sidebar -->
+  <rect x="636" y="88" width="100" height="266" fill="url(#bn-sidebar)"/>
+
+  <!-- Sidebar nav items (geometric icons) -->
+  <!-- Home icon -->
+  <g transform="translate(654, 108)">
+    <path d="M 8 1 L 1 7 L 1 15 L 6 15 L 6 10 L 10 10 L 10 15 L 15 15 L 15 7 Z" stroke="rgba(255,255,255,0.5)" stroke-width="1.2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>
+  </g>
+  <text x="676" y="120" font-family="'Malgun Gothic','Apple SD Gothic Neo',sans-serif" font-size="8.5" fill="rgba(255,255,255,0.5)">홈</text>
+
+  <!-- Services icon -->
+  <g transform="translate(654, 134)">
+    <rect x="0" y="0" width="7" height="7" rx="1.5" stroke="#60a5fa" stroke-width="1.2" fill="none"/>
+    <rect x="9" y="0" width="7" height="7" rx="1.5" stroke="rgba(255,255,255,0.4)" stroke-width="1.2" fill="none"/>
+    <rect x="0" y="9" width="7" height="7" rx="1.5" stroke="rgba(255,255,255,0.4)" stroke-width="1.2" fill="none"/>
+    <rect x="9" y="9" width="7" height="7" rx="1.5" stroke="rgba(255,255,255,0.4)" stroke-width="1.2" fill="none"/>
+  </g>
+  <text x="676" y="146" font-family="'Malgun Gothic','Apple SD Gothic Neo',sans-serif" font-size="8.5" fill="#60a5fa">서비스</text>
+
+  <!-- Portfolio icon -->
+  <g transform="translate(654, 162)">
+    <rect x="0" y="0" width="16" height="12" rx="2" stroke="rgba(255,255,255,0.35)" stroke-width="1.2" fill="none"/>
+    <line x1="0" y1="4" x2="16" y2="4" stroke="rgba(255,255,255,0.25)" stroke-width="1"/>
+    <line x1="4" y1="0" x2="4" y2="12" stroke="rgba(255,255,255,0.25)" stroke-width="1"/>
+  </g>
+  <text x="676" y="173" font-family="'Malgun Gothic','Apple SD Gothic Neo',sans-serif" font-size="8.5" fill="rgba(255,255,255,0.4)">포트폴리오</text>
+
+  <!-- Contact icon -->
+  <g transform="translate(654, 188)">
+    <rect x="0" y="2" width="16" height="12" rx="2" stroke="rgba(255,255,255,0.35)" stroke-width="1.2" fill="none"/>
+    <path d="M 0 4 L 8 9 L 16 4" stroke="rgba(255,255,255,0.35)" stroke-width="1.2" fill="none"/>
+  </g>
+  <text x="676" y="199" font-family="'Malgun Gothic','Apple SD Gothic Neo',sans-serif" font-size="8.5" fill="rgba(255,255,255,0.4)">문의</text>
+
+  <!-- Active indicator bar on sidebar -->
+  <rect x="636" y="128" width="3" height="28" rx="1.5" fill="#2563eb"/>
+
+  <!-- Main content area -->
+
+  <!-- Hero section in browser -->
+  <rect x="740" y="96" width="408" height="84" rx="8" fill="rgba(37,99,235,0.12)" stroke="rgba(37,99,235,0.2)" stroke-width="1"/>
+  <text x="750" y="118" font-family="'Malgun Gothic','Apple SD Gothic Neo',sans-serif" font-size="11.5" fill="white" font-weight="700">쟁승메이드 서비스</text>
+  <text x="750" y="136" font-family="'Malgun Gothic','Apple SD Gothic Neo',sans-serif" font-size="10" fill="rgba(255,255,255,0.45)">전문 개발자가 만드는 맞춤형 솔루션</text>
+  <rect x="750" y="148" width="80" height="22" rx="11" fill="#1d4ed8"/>
+  <text x="790" y="163" font-family="'Malgun Gothic','Apple SD Gothic Neo',sans-serif" font-size="9" fill="white" text-anchor="middle" font-weight="600">서비스 보기</text>
+
+  <!-- Service cards row -->
+  <!-- Card 1 -->
+  <rect x="740" y="190" width="124" height="72" rx="8" fill="rgba(255,255,255,0.05)" stroke="rgba(255,255,255,0.1)" stroke-width="1"/>
+  <!-- Chart bar icon -->
+  <g transform="translate(752, 204)">
+    <rect x="0" y="8" width="6" height="8" rx="1" fill="#22c55e" fill-opacity="0.8"/>
+    <rect x="8" y="4" width="6" height="12" rx="1" fill="#22c55e"/>
+    <rect x="16" y="6" width="6" height="10" rx="1" fill="#22c55e" fill-opacity="0.7"/>
+  </g>
+  <text x="752" y="236" font-family="'Malgun Gothic','Apple SD Gothic Neo',sans-serif" font-size="9" fill="rgba(255,255,255,0.7)" font-weight="600">주식 자동매매</text>
+  <text x="752" y="250" font-family="'Malgun Gothic','Apple SD Gothic Neo',sans-serif" font-size="8.5" fill="rgba(255,255,255,0.4)">텔레그램 연동</text>
+
+  <!-- Card 2 (active/highlighted) -->
+  <rect x="872" y="190" width="124" height="72" rx="8" fill="rgba(37,99,235,0.15)" stroke="rgba(37,99,235,0.35)" stroke-width="1.5"/>
+  <!-- Globe/web icon -->
+  <g transform="translate(884, 204)">
+    <circle cx="10" cy="8" r="8" stroke="#60a5fa" stroke-width="1.2" fill="none"/>
+    <ellipse cx="10" cy="8" rx="4" ry="8" stroke="#60a5fa" stroke-width="1" fill="none"/>
+    <line x1="2" y1="8" x2="18" y2="8" stroke="#60a5fa" stroke-width="1"/>
+    <line x1="3" y1="4" x2="17" y2="4" stroke="#60a5fa" stroke-width="0.8" stroke-opacity="0.5"/>
+    <line x1="3" y1="12" x2="17" y2="12" stroke="#60a5fa" stroke-width="0.8" stroke-opacity="0.5"/>
+  </g>
+  <text x="884" y="236" font-family="'Malgun Gothic','Apple SD Gothic Neo',sans-serif" font-size="9" fill="white" font-weight="600">홈페이지 제작</text>
+  <text x="884" y="250" font-family="'Malgun Gothic','Apple SD Gothic Neo',sans-serif" font-size="8.5" fill="rgba(255,255,255,0.5)">Next.js 풀스택</text>
+
+  <!-- Card 3 -->
+  <rect x="1004" y="190" width="124" height="72" rx="8" fill="rgba(255,255,255,0.05)" stroke="rgba(255,255,255,0.1)" stroke-width="1"/>
+  <!-- Sparkle/AI icon -->
+  <g transform="translate(1016, 202)">
+    <circle cx="10" cy="10" r="6" stroke="#a78bfa" stroke-width="1.2" fill="none"/>
+    <line x1="10" y1="1" x2="10" y2="4" stroke="#a78bfa" stroke-width="1.2" stroke-linecap="round"/>
+    <line x1="10" y1="16" x2="10" y2="19" stroke="#a78bfa" stroke-width="1.2" stroke-linecap="round"/>
+    <line x1="1" y1="10" x2="4" y2="10" stroke="#a78bfa" stroke-width="1.2" stroke-linecap="round"/>
+    <line x1="16" y1="10" x2="19" y2="10" stroke="#a78bfa" stroke-width="1.2" stroke-linecap="round"/>
+  </g>
+  <text x="1016" y="236" font-family="'Malgun Gothic','Apple SD Gothic Neo',sans-serif" font-size="9" fill="rgba(255,255,255,0.7)" font-weight="600">AI 사주 분석</text>
+  <text x="1016" y="250" font-family="'Malgun Gothic','Apple SD Gothic Neo',sans-serif" font-size="8.5" fill="rgba(255,255,255,0.4)">Gemini 연동</text>
+
+  <!-- Bottom section in browser -->
+  <rect x="740" y="274" width="408" height="72" rx="8" fill="rgba(255,255,255,0.03)" stroke="rgba(255,255,255,0.07)" stroke-width="1"/>
+  <text x="750" y="294" font-family="'Malgun Gothic','Apple SD Gothic Neo',sans-serif" font-size="9" fill="rgba(255,255,255,0.35)">최근 완성 프로젝트</text>
+
+  <!-- Project item 1 -->
+  <circle cx="756" cy="314" r="4" fill="rgba(37,99,235,0.6)"/>
+  <text x="766" y="318" font-family="'Malgun Gothic','Apple SD Gothic Neo',sans-serif" font-size="9" fill="rgba(255,255,255,0.5)">소상공인 예약 관리 시스템</text>
+
+  <!-- Project item 2 -->
+  <circle cx="756" cy="330" r="4" fill="rgba(124,58,237,0.6)"/>
+  <text x="766" y="334" font-family="'Malgun Gothic','Apple SD Gothic Neo',sans-serif" font-size="9" fill="rgba(255,255,255,0.5)">부동산 매물 분석 대시보드</text>
+
+  <!-- ===== BOTTOM BAR ===== -->
+  <rect x="0" y="368" width="1200" height="32" fill="url(#bn-bottomBar)"/>
+  <line x1="0" y1="368" x2="1200" y2="368" stroke="rgba(99,102,241,0.5)" stroke-width="1"/>
+  <text x="600" y="389" font-family="'Malgun Gothic','Apple SD Gothic Neo',sans-serif" font-size="13" fill="rgba(255,255,255,0.85)" text-anchor="middle" font-weight="700">지금 무료 상담 받기 → jaengseungmade.vercel.app</text>
 </svg>

public/marketing/thumb-automation.svg

@@ -1,189 +1,179 @@
 <svg xmlns="http://www.w3.org/2000/svg" width="1200" height="675" viewBox="0 0 1200 675">
   <defs>
-    <linearGradient id="bgAu" x1="0%" y1="0%" x2="100%" y2="100%">
+    <linearGradient id="au-bg" x1="0%" y1="0%" x2="100%" y2="100%">
-      <stop offset="0%" style="stop-color:#04102b"/>
+      <stop offset="0%" stop-color="#04102b"/>
-      <stop offset="50%" style="stop-color:#052e1c"/>
+      <stop offset="50%" stop-color="#052e1c"/>
-      <stop offset="100%" style="stop-color:#04102b"/>
+      <stop offset="100%" stop-color="#04102b"/>
     </linearGradient>
-    <linearGradient id="headAu" x1="0%" y1="0%" x2="100%" y2="0%">
+    <radialGradient id="au-glow1" cx="20%" cy="50%" r="50%">
-      <stop offset="0%" style="stop-color:#34d399"/>
+      <stop offset="0%" stop-color="#10b981" stop-opacity="0.2"/>
-      <stop offset="100%" style="stop-color:#60a5fa"/>
+      <stop offset="100%" stop-color="#04102b" stop-opacity="0"/>
-    </linearGradient>
-    <linearGradient id="timeGradAu" x1="0%" y1="0%" x2="100%" y2="100%">
-      <stop offset="0%" style="stop-color:#059669"/>
-      <stop offset="100%" style="stop-color:#10b981"/>
-    </linearGradient>
-    <linearGradient id="barRed" x1="0%" y1="0%" x2="100%" y2="0%">
-      <stop offset="0%" style="stop-color:#dc2626"/>
-      <stop offset="100%" style="stop-color:#ef4444"/>
-    </linearGradient>
-    <radialGradient id="glowAu" cx="65%" cy="50%" r="55%">
-      <stop offset="0%" style="stop-color:#10b981;stop-opacity:0.18"/>
-      <stop offset="100%" style="stop-color:#10b981;stop-opacity:0"/>
     </radialGradient>
-    <filter id="nodeShadAu">
+    <radialGradient id="au-glow2" cx="80%" cy="50%" r="45%">
-      <feDropShadow dx="0" dy="4" stdDeviation="10" flood-color="#10b981" flood-opacity="0.35"/>
+      <stop offset="0%" stop-color="#059669" stop-opacity="0.15"/>
-    </filter>
+      <stop offset="100%" stop-color="#04102b" stop-opacity="0"/>
-    <filter id="boxShadAu">
+    </radialGradient>
+    <linearGradient id="au-bottomBar" x1="0%" y1="0%" x2="100%" y2="0%">
+      <stop offset="0%" stop-color="#059669"/>
+      <stop offset="100%" stop-color="#10b981"/>
+    </linearGradient>
+    <linearGradient id="au-headGrad" x1="0%" y1="0%" x2="100%" y2="0%">
+      <stop offset="0%" stop-color="#34d399"/>
+      <stop offset="100%" stop-color="#6ee7b7"/>
+    </linearGradient>
+    <filter id="au-panelShadow">
       <feDropShadow dx="0" dy="8" stdDeviation="20" flood-color="#000" flood-opacity="0.5"/>
     </filter>
-    <pattern id="dotsAu" width="32" height="32" patternUnits="userSpaceOnUse">
-      <circle cx="16" cy="16" r="1" fill="#0d2a1a" opacity="0.9"/>
-    </pattern>
   </defs>
 
   <!-- 배경 -->
-  <rect width="1200" height="675" fill="url(#bgAu)"/>
+  <rect width="1200" height="675" fill="url(#au-bg)"/>
-  <rect width="1200" height="675" fill="url(#glowAu)"/>
+  <rect width="1200" height="675" fill="url(#au-glow1)"/>
-  <rect width="1200" height="675" fill="url(#dotsAu)"/>
+  <rect width="1200" height="675" fill="url(#au-glow2)"/>
+
+  <!-- 유기적 배경 곡선 -->
+  <path d="M 600 0 C 800 100 1000 -20 1200 80 L 1200 0 Z" fill="rgba(16,185,129,0.04)"/>
+  <path d="M 600 675 C 750 600 950 680 1200 620 L 1200 675 Z" fill="rgba(16,185,129,0.04)"/>
+  <path d="M 0 200 C 100 160 250 230 380 200 C 460 178 520 140 580 160 L 580 0 L 0 0 Z" fill="rgba(16,185,129,0.03)"/>
+
+  <!-- ===== 왼쪽 콘텐츠 ===== -->
 
-  <!-- 왼쪽 텍스트 -->
   <!-- 뱃지 -->
-  <rect x="60" y="64" width="250" height="38" rx="19" fill="#052e1c" stroke="#10b981" stroke-width="1.5"/>
+  <rect x="48" y="68" width="210" height="32" rx="16" fill="rgba(16,185,129,0.15)" stroke="#10b981" stroke-width="1"/>
-  <text x="84" y="88" font-family="'Malgun Gothic',sans-serif" font-size="14" font-weight="700" fill="#34d399">⚡ 반복 업무 완전 자동화</text>
+  <text x="153" y="89" text-anchor="middle" font-family="'Malgun Gothic','Apple SD Gothic Neo',sans-serif" font-size="13" fill="#34d399">반복 업무 완전 자동화</text>
 
   <!-- 헤드라인 -->
-  <text x="60" y="162" font-family="'Malgun Gothic','Apple SD Gothic Neo',sans-serif" font-size="54" font-weight="900" fill="#ffffff">하루 3시간을</text>
+  <text x="48" y="168" font-family="'Malgun Gothic','Apple SD Gothic Neo',sans-serif" font-size="52" font-weight="700" fill="white">하루 3시간을</text>
-  <text x="60" y="228" font-family="'Malgun Gothic','Apple SD Gothic Neo',sans-serif" font-size="54" font-weight="900" fill="url(#headAu)">되찾아 드립니다</text>
+  <text x="48" y="233" font-family="'Malgun Gothic','Apple SD Gothic Neo',sans-serif" font-size="52" font-weight="700" fill="url(#au-headGrad)">되찾아 드립니다</text>
-  <text x="60" y="276" font-family="'Malgun Gothic','Apple SD Gothic Neo',sans-serif" font-size="19" fill="#94a3b8">납기 보장 · 계약서 필수 · 연락두절 없는 자동화 솔루션</text>
 
-  <!-- 수치 대비 패널 -->
+  <!-- 서브텍스트 -->
-  <rect x="60" y="304" width="510" height="88" rx="16" fill="#040e1c" stroke="#10b981" stroke-width="1" opacity="0.95"/>
+  <text x="48" y="276" font-family="'Malgun Gothic','Apple SD Gothic Neo',sans-serif" font-size="16" fill="#94a3b8">반복 업무를 코드로 대체, 시간과 비용을 절약하세요</text>
 
+  <!-- 수치 비교 패널 -->
+  <rect x="48" y="298" width="456" height="86" rx="14" fill="rgba(0,0,0,0.3)" stroke="rgba(16,185,129,0.2)" stroke-width="1"/>
   <!-- 수동 -->
-  <text x="95" y="332" font-family="'Malgun Gothic',sans-serif" font-size="12" fill="#64748b">수동 작업</text>
+  <rect x="64" y="314" width="190" height="54" rx="10" fill="rgba(239,68,68,0.08)" stroke="rgba(239,68,68,0.3)" stroke-width="1"/>
-  <rect x="90" y="340" width="170" height="28" rx="7" fill="url(#barRed)" opacity="0.85"/>
+  <text x="159" y="335" text-anchor="middle" font-family="'Malgun Gothic','Apple SD Gothic Neo',sans-serif" font-size="11" fill="#f87171">수동 처리</text>
-  <text x="175" y="359" text-anchor="middle" font-family="'Malgun Gothic',sans-serif" font-size="13" font-weight="800" fill="#fff">3시간 / 일</text>
+  <text x="159" y="358" text-anchor="middle" font-family="'Malgun Gothic','Apple SD Gothic Neo',sans-serif" font-size="24" font-weight="700" fill="#f87171">3시간</text>
+  <!-- 화살표 -->
+  <path d="M 265 341 C 275 341 275 341 285 341" stroke="#64748b" stroke-width="2" fill="none"/>
+  <path d="M 282 337 L 288 341 L 282 345" stroke="#64748b" stroke-width="2" fill="none" stroke-linecap="round"/>
+  <!-- 자동화 -->
+  <rect x="290" y="314" width="198" height="54" rx="10" fill="rgba(16,185,129,0.08)" stroke="rgba(16,185,129,0.3)" stroke-width="1"/>
+  <text x="389" y="335" text-anchor="middle" font-family="'Malgun Gothic','Apple SD Gothic Neo',sans-serif" font-size="11" fill="#34d399">자동화 후</text>
+  <text x="389" y="358" text-anchor="middle" font-family="'Malgun Gothic','Apple SD Gothic Neo',sans-serif" font-size="24" font-weight="700" fill="#34d399">5분</text>
 
-  <!-- 구분선 -->
+  <!-- 서비스 태그 -->
-  <line x1="278" y1="316" x2="278" y2="380" stroke="#0d2a1a" stroke-width="1.5"/>
+  <text x="48" y="416" font-family="'Malgun Gothic','Apple SD Gothic Neo',sans-serif" font-size="13" fill="#64748b">기술 스택</text>
+  <rect x="48" y="426" width="74" height="28" rx="14" fill="rgba(16,185,129,0.1)" stroke="#10b981" stroke-width="1"/>
+  <text x="85" y="444" text-anchor="middle" font-family="'Malgun Gothic','Apple SD Gothic Neo',sans-serif" font-size="12" fill="#34d399">Python</text>
+  <rect x="130" y="426" width="52" height="28" rx="14" fill="rgba(16,185,129,0.1)" stroke="#10b981" stroke-width="1"/>
+  <text x="156" y="444" text-anchor="middle" font-family="'Malgun Gothic','Apple SD Gothic Neo',sans-serif" font-size="12" fill="#34d399">VBA</text>
+  <rect x="190" y="426" width="84" height="28" rx="14" fill="rgba(16,185,129,0.1)" stroke="#10b981" stroke-width="1"/>
+  <text x="232" y="444" text-anchor="middle" font-family="'Malgun Gothic','Apple SD Gothic Neo',sans-serif" font-size="12" fill="#34d399">Selenium</text>
+  <rect x="282" y="426" width="52" height="28" rx="14" fill="rgba(16,185,129,0.1)" stroke="#10b981" stroke-width="1"/>
+  <text x="308" y="444" text-anchor="middle" font-family="'Malgun Gothic','Apple SD Gothic Neo',sans-serif" font-size="12" fill="#34d399">RPA</text>
 
-  <!-- 자동화 후 -->
+  <!-- 가격 -->
-  <text x="298" y="332" font-family="'Malgun Gothic',sans-serif" font-size="12" fill="#64748b">자동화 후</text>
+  <text x="48" y="510" font-family="'Malgun Gothic','Apple SD Gothic Neo',sans-serif" font-size="15" fill="#94a3b8">시작 가격</text>
-  <rect x="290" y="340" width="26" height="28" rx="7" fill="#10b981"/>
+  <text x="48" y="554" font-family="'Malgun Gothic','Apple SD Gothic Neo',sans-serif" font-size="44" font-weight="700" fill="url(#au-headGrad)">33만원~</text>
-  <text x="326" y="359" font-family="'Malgun Gothic',sans-serif" font-size="13" font-weight="800" fill="#34d399">5분!</text>
 
-  <!-- 절약 수치 -->
+  <!-- 특장점 요약 -->
-  <text x="430" y="340" text-anchor="middle" font-family="sans-serif" font-size="32" font-weight="900" fill="#fbbf24">97%</text>
+  <text x="48" y="598" font-family="'Malgun Gothic','Apple SD Gothic Neo',sans-serif" font-size="14" fill="#64748b">연간 약 780시간 절약 · ROI 3개월 내 회수</text>
-  <text x="430" y="362" text-anchor="middle" font-family="'Malgun Gothic',sans-serif" font-size="12" fill="#64748b">시간 단축</text>
-  <text x="510" y="340" text-anchor="middle" font-family="'Malgun Gothic',sans-serif" font-size="20" font-weight="900" fill="#34d399">0건</text>
-  <text x="510" y="362" text-anchor="middle" font-family="'Malgun Gothic',sans-serif" font-size="12" fill="#64748b">수작업 오류</text>
 
-  <!-- 서비스 종류 -->
+  <!-- ===== 오른쪽 자동화 플로우 다이어그램 ===== -->
-  <g font-family="'Malgun Gothic',sans-serif" font-size="15" fill="#94a3b8">
+  <g filter="url(#au-panelShadow)">
-    <text x="60" y="424">📊 엑셀 자동화  ·  📧 이메일 자동발송  ·  🕸️ 웹 크롤링</text>
+    <!-- 다크 패널 -->
-    <text x="60" y="455">🖥️ RPA  ·  📁 파일 자동 정리  ·  🔔 텔레그램 알림</text>
+    <rect x="590" y="48" width="462" height="578" rx="16" fill="#061a14" stroke="#10b981" stroke-width="1.5"/>
+
+    <!-- 터미널 헤더 바 -->
+    <rect x="590" y="48" width="462" height="44" rx="16" fill="#0a2a1c"/>
+    <rect x="590" y="74" width="462" height="18" fill="#0a2a1c"/>
+
+    <!-- 신호등 버튼 -->
+    <circle cx="617" cy="70" r="6" fill="#ef4444"/>
+    <circle cx="637" cy="70" r="6" fill="#f59e0b"/>
+    <circle cx="657" cy="70" r="6" fill="#22c55e"/>
+
+    <!-- 터미널 타이틀 -->
+    <text x="821" y="75" text-anchor="middle" font-family="'Malgun Gothic','Apple SD Gothic Neo',sans-serif" font-size="12" fill="#34d399">automation.py — 자동화 플로우</text>
+
+    <!-- 내부 패딩 영역 -->
+    <!-- 노드 1: 엑셀 파일 감지 -->
+    <rect x="628" y="116" width="350" height="74" rx="12" fill="#0d2e22" stroke="#34d399" stroke-width="1.5"/>
+    <!-- 아이콘: 스프레드시트 -->
+    <rect x="655" y="130" width="18" height="20" rx="2" fill="none" stroke="#34d399" stroke-width="1.5"/>
+    <line x1="660" y1="138" x2="668" y2="138" stroke="#34d399" stroke-width="1"/>
+    <line x1="660" y1="143" x2="668" y2="143" stroke="#34d399" stroke-width="1"/>
+    <line x1="660" y1="148" x2="665" y2="148" stroke="#34d399" stroke-width="1"/>
+    <text x="690" y="136" font-family="'Malgun Gothic','Apple SD Gothic Neo',sans-serif" font-size="13" font-weight="600" fill="#34d399">엑셀 파일 감지</text>
+    <text x="690" y="154" font-family="'Malgun Gothic','Apple SD Gothic Neo',sans-serif" font-size="11" fill="#6ee7b7">신규 파일 모니터링 → 트리거 발생</text>
+    <!-- 상태 표시 -->
+    <circle cx="944" cy="153" r="5" fill="#22c55e"/>
+    <text x="952" y="157" font-family="'Malgun Gothic','Apple SD Gothic Neo',sans-serif" font-size="10" fill="#22c55e">실행중</text>
+
+    <!-- 곡선 연결선 1→2 -->
+    <path d="M 803 190 C 803 207 803 215 803 236" stroke="#10b981" stroke-width="2.5" fill="none" stroke-linecap="round"/>
+    <circle cx="803" cy="236" r="4" fill="#10b981"/>
+
+    <!-- 노드 2: Python 스크립트 처리 -->
+    <rect x="628" y="240" width="350" height="74" rx="12" fill="#0d2e22" stroke="#34d399" stroke-width="1.5"/>
+    <!-- 아이콘: 코드 괄호 -->
+    <text x="663" y="284" text-anchor="middle" font-family="monospace" font-size="20" fill="#34d399">{ }</text>
+    <text x="695" y="262" font-family="'Malgun Gothic','Apple SD Gothic Neo',sans-serif" font-size="13" font-weight="600" fill="#34d399">Python 스크립트 처리</text>
+    <text x="695" y="280" font-family="'Malgun Gothic','Apple SD Gothic Neo',sans-serif" font-size="11" fill="#6ee7b7">데이터 파싱 → 분석 → 가공</text>
+    <circle cx="944" cy="277" r="5" fill="#22c55e"/>
+    <text x="952" y="281" font-family="'Malgun Gothic','Apple SD Gothic Neo',sans-serif" font-size="10" fill="#22c55e">실행중</text>
+
+    <!-- 곡선 연결선 2→3 -->
+    <path d="M 803 314 C 803 331 803 339 803 360" stroke="#10b981" stroke-width="2.5" fill="none" stroke-linecap="round"/>
+    <circle cx="803" cy="360" r="4" fill="#10b981"/>
+
+    <!-- 노드 3: 리포트 자동 생성 -->
+    <rect x="628" y="364" width="350" height="74" rx="12" fill="#0d2e22" stroke="#34d399" stroke-width="1.5"/>
+    <!-- 아이콘: 문서 -->
+    <rect x="649" y="378" width="18" height="22" rx="2" fill="none" stroke="#34d399" stroke-width="1.5"/>
+    <line x1="654" y1="385" x2="662" y2="385" stroke="#34d399" stroke-width="1"/>
+    <line x1="654" y1="390" x2="662" y2="390" stroke="#34d399" stroke-width="1"/>
+    <line x1="654" y1="395" x2="659" y2="395" stroke="#34d399" stroke-width="1"/>
+    <text x="682" y="386" font-family="'Malgun Gothic','Apple SD Gothic Neo',sans-serif" font-size="13" font-weight="600" fill="#34d399">리포트 자동 생성</text>
+    <text x="682" y="404" font-family="'Malgun Gothic','Apple SD Gothic Neo',sans-serif" font-size="11" fill="#6ee7b7">Excel/PDF 리포트 자동 작성</text>
+    <circle cx="944" cy="401" r="5" fill="#22c55e"/>
+    <text x="952" y="405" font-family="'Malgun Gothic','Apple SD Gothic Neo',sans-serif" font-size="10" fill="#22c55e">실행중</text>
+
+    <!-- 곡선 연결선 3→4 -->
+    <path d="M 803 438 C 803 455 803 463 803 484" stroke="#10b981" stroke-width="2.5" fill="none" stroke-linecap="round"/>
+    <circle cx="803" cy="484" r="4" fill="#10b981"/>
+
+    <!-- 노드 4: 텔레그램 알림 전송 -->
+    <rect x="628" y="488" width="350" height="74" rx="12" fill="#102840" stroke="#60a5fa" stroke-width="1.5"/>
+    <!-- 아이콘: 보내기 화살표 -->
+    <path d="M 644 525 L 666 516 L 644 507 Z" fill="#60a5fa"/>
+    <text x="682" y="510" font-family="'Malgun Gothic','Apple SD Gothic Neo',sans-serif" font-size="13" font-weight="600" fill="#60a5fa">텔레그램 알림 전송</text>
+    <text x="682" y="528" font-family="'Malgun Gothic','Apple SD Gothic Neo',sans-serif" font-size="11" fill="#93c5fd">완료 알림 + 리포트 첨부 전송</text>
+    <circle cx="944" cy="525" r="5" fill="#22c55e"/>
+    <text x="952" y="529" font-family="'Malgun Gothic','Apple SD Gothic Neo',sans-serif" font-size="10" fill="#22c55e">실행중</text>
+
+    <!-- 우측 통계 패널 -->
+    <rect x="628" y="578" width="350" height="30" rx="8" fill="rgba(16,185,129,0.08)" stroke="rgba(16,185,129,0.2)" stroke-width="1"/>
+    <text x="803" y="598" text-anchor="middle" font-family="'Malgun Gothic','Apple SD Gothic Neo',sans-serif" font-size="12" fill="#34d399">연간 절약 780시간 · 도입비용 3개월 내 회수</text>
   </g>
 
-  <!-- 가격 뱃지 -->
+  <!-- 오른쪽 통계 사이드 패널 -->
-  <rect x="60" y="478" width="236" height="70" rx="16" fill="url(#timeGradAu)"/>
+  <rect x="1068" y="48" width="108" height="578" rx="14" fill="rgba(0,0,0,0.4)" stroke="rgba(16,185,129,0.15)" stroke-width="1"/>
-  <text x="178" y="505" text-anchor="middle" font-family="'Malgun Gothic',sans-serif" font-size="13" fill="#d1fae5">시작 가격</text>
+  <text x="1122" y="82" text-anchor="middle" font-family="'Malgun Gothic','Apple SD Gothic Neo',sans-serif" font-size="10" fill="#64748b">도입 전</text>
-  <text x="178" y="534" text-anchor="middle" font-family="'Malgun Gothic',sans-serif" font-size="32" font-weight="900" fill="#ffffff">33만원~</text>
+  <text x="1122" y="100" text-anchor="middle" font-family="'Malgun Gothic','Apple SD Gothic Neo',sans-serif" font-size="16" font-weight="700" fill="#f87171">3h</text>
-
+  <line x1="1080" y1="112" x2="1164" y2="112" stroke="rgba(16,185,129,0.2)" stroke-width="1"/>
-  <!-- 기술 태그 -->
+  <text x="1122" y="130" text-anchor="middle" font-family="'Malgun Gothic','Apple SD Gothic Neo',sans-serif" font-size="10" fill="#64748b">도입 후</text>
-  <g font-family="sans-serif" font-size="11" font-weight="700">
+  <text x="1122" y="148" text-anchor="middle" font-family="'Malgun Gothic','Apple SD Gothic Neo',sans-serif" font-size="16" font-weight="700" fill="#34d399">5m</text>
-    <rect x="60" y="564" width="68" height="26" rx="8" fill="#1e3a8a"/>
+  <line x1="1080" y1="160" x2="1164" y2="160" stroke="rgba(16,185,129,0.2)" stroke-width="1"/>
-    <text x="94" y="581" text-anchor="middle" fill="#60a5fa">Python</text>
+  <text x="1122" y="178" text-anchor="middle" font-family="'Malgun Gothic','Apple SD Gothic Neo',sans-serif" font-size="10" fill="#64748b">연간 절약</text>
-    <rect x="138" y="564" width="46" height="26" rx="8" fill="#052e1c"/>
+  <text x="1122" y="196" text-anchor="middle" font-family="'Malgun Gothic','Apple SD Gothic Neo',sans-serif" font-size="14" font-weight="700" fill="#34d399">780h</text>
-    <text x="161" y="581" text-anchor="middle" fill="#34d399">VBA</text>
+  <line x1="1080" y1="208" x2="1164" y2="208" stroke="rgba(16,185,129,0.2)" stroke-width="1"/>
-    <rect x="194" y="564" width="76" height="26" rx="8" fill="#1c1917"/>
+  <text x="1122" y="226" text-anchor="middle" font-family="'Malgun Gothic','Apple SD Gothic Neo',sans-serif" font-size="10" fill="#64748b">오류율</text>
-    <text x="232" y="581" text-anchor="middle" fill="#d6d3d1">Selenium</text>
+  <text x="1122" y="244" text-anchor="middle" font-family="'Malgun Gothic','Apple SD Gothic Neo',sans-serif" font-size="14" font-weight="700" fill="#34d399">-98%</text>
-    <rect x="280" y="564" width="44" height="26" rx="8" fill="#1e1b4b"/>
-    <text x="302" y="581" text-anchor="middle" fill="#a78bfa">RPA</text>
-  </g>
-
-  <!-- URL -->
-  <text x="60" y="632" font-family="sans-serif" font-size="14" fill="#3b5998">jaengseung-made.com</text>
-
-  <!-- 오른쪽 자동화 플로우 다이어그램 -->
-  <rect x="614" y="52" width="558" height="552" rx="22" fill="#040e1c" stroke="#10b981" stroke-width="1.2" filter="url(#boxShadAu)"/>
-  <!-- 터미널 헤더 -->
-  <rect x="614" y="52" width="558" height="44" rx="22" fill="#030b17"/>
-  <rect x="614" y="74" width="558" height="22" fill="#030b17"/>
-  <circle cx="644" cy="74" r="7" fill="#ef4444"/>
-  <circle cx="668" cy="74" r="7" fill="#f59e0b"/>
-  <circle cx="692" cy="74" r="7" fill="#22c55e"/>
-  <text x="893" y="79" text-anchor="middle" font-family="monospace" font-size="11" fill="#475569">automation.py — 실행 중</text>
-
-  <!-- 실행 상태 표시 -->
-  <rect x="636" y="110" width="220" height="22" rx="6" fill="#052e1c"/>
-  <circle cx="650" cy="121" r="5" fill="#10b981"/>
-  <text x="664" y="125" font-family="monospace" font-size="11" fill="#34d399">● 자동화 실행 중... (9:14 AM)</text>
-
-  <!-- 노드 1: 트리거 -->
-  <rect x="712" y="148" width="178" height="72" rx="14" fill="#0a1f10" stroke="#10b981" stroke-width="1.5" filter="url(#nodeShadAu)"/>
-  <text x="801" y="172" text-anchor="middle" font-size="22">📊</text>
-  <text x="801" y="196" text-anchor="middle" font-family="'Malgun Gothic',sans-serif" font-size="13" font-weight="700" fill="#34d399">엑셀 파일 감지</text>
-  <text x="801" y="212" text-anchor="middle" font-family="'Malgun Gothic',sans-serif" font-size="10" fill="#64748b">트리거: 파일 변경 시 자동 실행</text>
-
-  <!-- 화살표 1 -->
-  <line x1="801" y1="220" x2="801" y2="254" stroke="#10b981" stroke-width="2.5"/>
-  <polygon points="791,250 801,266 811,250" fill="#10b981"/>
-
-  <!-- 노드 2: 처리 -->
-  <rect x="682" y="268" width="238" height="72" rx="14" fill="#112a1a" stroke="#34d399" stroke-width="1.5" filter="url(#nodeShadAu)"/>
-  <text x="801" y="292" text-anchor="middle" font-size="22">⚙️</text>
-  <text x="801" y="314" text-anchor="middle" font-family="'Malgun Gothic',sans-serif" font-size="13" font-weight="700" fill="#ffffff">Python 스크립트 처리</text>
-  <text x="801" y="330" text-anchor="middle" font-family="'Malgun Gothic',sans-serif" font-size="10" fill="#64748b">데이터 정제 · 계산 · 분류</text>
-
-  <!-- 화살표 2 -->
-  <line x1="801" y1="340" x2="801" y2="374" stroke="#10b981" stroke-width="2.5"/>
-  <polygon points="791,370 801,386 811,370" fill="#10b981"/>
-
-  <!-- 노드 3: 출력 -->
-  <rect x="712" y="388" width="178" height="72" rx="14" fill="#0a1f10" stroke="#10b981" stroke-width="1.5" filter="url(#nodeShadAu)"/>
-  <text x="801" y="412" text-anchor="middle" font-size="22">📋</text>
-  <text x="801" y="436" text-anchor="middle" font-family="'Malgun Gothic',sans-serif" font-size="13" font-weight="700" fill="#34d399">리포트 자동 생성</text>
-  <text x="801" y="452" text-anchor="middle" font-family="'Malgun Gothic',sans-serif" font-size="10" fill="#64748b">Excel · PDF 자동 저장</text>
-
-  <!-- 화살표 3 -->
-  <line x1="801" y1="460" x2="801" y2="494" stroke="#10b981" stroke-width="2.5"/>
-  <polygon points="791,490 801,506 811,490" fill="#10b981"/>
-
-  <!-- 노드 4: 알림 -->
-  <rect x="672" y="508" width="258" height="72" rx="14" fill="#061428" stroke="#60a5fa" stroke-width="1.5"/>
-  <text x="801" y="532" text-anchor="middle" font-size="22">📱</text>
-  <text x="801" y="556" text-anchor="middle" font-family="'Malgun Gothic',sans-serif" font-size="13" font-weight="700" fill="#60a5fa">텔레그램 알림 전송</text>
-  <text x="801" y="572" text-anchor="middle" font-family="'Malgun Gothic',sans-serif" font-size="10" fill="#64748b">담당자에게 즉시 완료 알림</text>
-
-  <!-- 우측 정보 패널 -->
-  <rect x="950" y="148" width="200" height="432" rx="16" fill="#040e1c" stroke="#0d2a1a" stroke-width="1"/>
-  <text x="1050" y="178" text-anchor="middle" font-family="'Malgun Gothic',sans-serif" font-size="13" font-weight="700" fill="#475569">절약 효과 시뮬레이션</text>
-
-  <!-- 막대 그래프 (더 세련되게) -->
-  <text x="970" y="210" font-family="'Malgun Gothic',sans-serif" font-size="11" fill="#64748b">도입 전</text>
-  <rect x="960" y="216" width="170" height="30" rx="8" fill="url(#barRed)" opacity="0.8"/>
-  <text x="1045" y="236" text-anchor="middle" font-family="'Malgun Gothic',sans-serif" font-size="13" font-weight="800" fill="#fff">3시간 / 일</text>
-
-  <text x="970" y="270" font-family="'Malgun Gothic',sans-serif" font-size="11" fill="#64748b">도입 후</text>
-  <rect x="960" y="276" width="170" height="30" rx="8" fill="#0a1f10"/>
-  <rect x="960" y="276" width="26" height="30" rx="8" fill="#10b981"/>
-  <text x="1000" y="296" font-family="'Malgun Gothic',sans-serif" font-size="13" font-weight="800" fill="#34d399">5분</text>
-
-  <!-- 절약 계산 -->
-  <rect x="960" y="324" width="170" height="60" rx="10" fill="#052e1c"/>
-  <text x="1045" y="348" text-anchor="middle" font-family="'Malgun Gothic',sans-serif" font-size="12" fill="#94a3b8">연간 절약 시간</text>
-  <text x="1045" y="372" text-anchor="middle" font-family="sans-serif" font-size="24" font-weight="900" fill="#34d399">780h</text>
-
-  <!-- 사용 기술 -->
-  <text x="1050" y="412" text-anchor="middle" font-family="'Malgun Gothic',sans-serif" font-size="12" fill="#475569">사용 기술 스택</text>
-  <g font-family="sans-serif" font-size="10" font-weight="700">
-    <rect x="966" y="420" width="60" height="24" rx="7" fill="#1e3a8a"/>
-    <text x="996" y="436" text-anchor="middle" fill="#60a5fa">Python</text>
-    <rect x="1034" y="420" width="44" height="24" rx="7" fill="#052e1c"/>
-    <text x="1056" y="436" text-anchor="middle" fill="#34d399">VBA</text>
-    <rect x="966" y="452" width="72" height="24" rx="7" fill="#1c1917"/>
-    <text x="1002" y="468" text-anchor="middle" fill="#d6d3d1">Selenium</text>
-    <rect x="1046" y="452" width="44" height="24" rx="7" fill="#1e1b4b"/>
-    <text x="1068" y="468" text-anchor="middle" fill="#a78bfa">RPA</text>
-  </g>
-
-  <!-- 전문가 배지 -->
-  <rect x="960" y="492" width="170" height="56" rx="12" fill="#1e3a8a"/>
-  <text x="1045" y="516" text-anchor="middle" font-family="'Malgun Gothic',sans-serif" font-size="13" fill="#bfdbfe">납기 보장 · AS 포함</text>
-  <text x="1045" y="538" text-anchor="middle" font-family="'Malgun Gothic',sans-serif" font-size="13" font-weight="700" fill="#ffffff">직접 분석 · 직접 구현</text>
 
   <!-- 하단 바 -->
-  <rect x="0" y="638" width="1200" height="37" fill="#052e1c"/>
+  <rect x="0" y="638" width="1200" height="37" fill="url(#au-bottomBar)"/>
-  <text x="600" y="662" text-anchor="middle" font-family="'Malgun Gothic','Apple SD Gothic Neo',sans-serif" font-size="14" font-weight="600" fill="#ffffff">엑셀 · 이메일 · RPA · 크롤링  ·  납기 보장 · 연락두절 없음  ·  jaengseung-made.com</text>
+  <text x="600" y="662" text-anchor="middle" font-family="'Malgun Gothic','Apple SD Gothic Neo',sans-serif" font-size="14" font-weight="600" fill="white">jaengseung-made.vercel.app — 업무 자동화 전문 개발</text>
 </svg>

public/marketing/thumb-homepage-A.svg

@@ -1,204 +1,175 @@
 <svg xmlns="http://www.w3.org/2000/svg" width="1200" height="675" viewBox="0 0 1200 675">
   <defs>
-    <linearGradient id="bgA" x1="0%" y1="0%" x2="100%" y2="100%">
+    <radialGradient id="hpA-bgGlow1" cx="20%" cy="50%" r="50%">
-      <stop offset="0%" style="stop-color:#04102b"/>
+      <stop offset="0%" stop-color="#1d4ed8" stop-opacity="0.35"/>
-      <stop offset="50%" style="stop-color:#0d1f4f"/>
+      <stop offset="100%" stop-color="#04102b" stop-opacity="0"/>
-      <stop offset="100%" style="stop-color:#0a1840"/>
-    </linearGradient>
-    <linearGradient id="headA" x1="0%" y1="0%" x2="100%" y2="0%">
-      <stop offset="0%" style="stop-color:#60a5fa"/>
-      <stop offset="100%" style="stop-color:#a78bfa"/>
-    </linearGradient>
-    <linearGradient id="btnA" x1="0%" y1="0%" x2="100%" y2="0%">
-      <stop offset="0%" style="stop-color:#2563eb"/>
-      <stop offset="100%" style="stop-color:#7c3aed"/>
-    </linearGradient>
-    <linearGradient id="priceA" x1="0%" y1="0%" x2="100%" y2="100%">
-      <stop offset="0%" style="stop-color:#1d4ed8"/>
-      <stop offset="100%" style="stop-color:#7c3aed"/>
-    </linearGradient>
-    <radialGradient id="glowA1" cx="20%" cy="30%" r="50%">
-      <stop offset="0%" style="stop-color:#2563eb;stop-opacity:0.18"/>
-      <stop offset="100%" style="stop-color:#2563eb;stop-opacity:0"/>
     </radialGradient>
-    <radialGradient id="glowA2" cx="80%" cy="70%" r="40%">
+    <radialGradient id="hpA-bgGlow2" cx="85%" cy="40%" r="45%">
-      <stop offset="0%" style="stop-color:#7c3aed;stop-opacity:0.15"/>
+      <stop offset="0%" stop-color="#7c3aed" stop-opacity="0.28"/>
-      <stop offset="100%" style="stop-color:#7c3aed;stop-opacity:0"/>
+      <stop offset="100%" stop-color="#04102b" stop-opacity="0"/>
     </radialGradient>
-    <filter id="shadowA">
+    <linearGradient id="hpA-headlineGrad" x1="0%" y1="0%" x2="100%" y2="0%">
-      <feDropShadow dx="0" dy="16" stdDeviation="24" flood-color="#000" flood-opacity="0.6"/>
+      <stop offset="0%" stop-color="#60a5fa"/>
+      <stop offset="100%" stop-color="#a78bfa"/>
+    </linearGradient>
+    <linearGradient id="hpA-bottomBar" x1="0%" y1="0%" x2="100%" y2="0%">
+      <stop offset="0%" stop-color="#2563eb"/>
+      <stop offset="100%" stop-color="#7c3aed"/>
+    </linearGradient>
+    <linearGradient id="hpA-browserHero" x1="0%" y1="0%" x2="100%" y2="100%">
+      <stop offset="0%" stop-color="#1e3a8a"/>
+      <stop offset="100%" stop-color="#312e81"/>
+    </linearGradient>
+    <linearGradient id="hpA-card1top" x1="0%" y1="0%" x2="100%" y2="0%">
+      <stop offset="0%" stop-color="#2563eb"/>
+      <stop offset="100%" stop-color="#3b82f6"/>
+    </linearGradient>
+    <linearGradient id="hpA-card2top" x1="0%" y1="0%" x2="100%" y2="0%">
+      <stop offset="0%" stop-color="#7c3aed"/>
+      <stop offset="100%" stop-color="#8b5cf6"/>
+    </linearGradient>
+    <linearGradient id="hpA-card3top" x1="0%" y1="0%" x2="100%" y2="0%">
+      <stop offset="0%" stop-color="#059669"/>
+      <stop offset="100%" stop-color="#10b981"/>
+    </linearGradient>
+    <filter id="hpA-shadow">
+      <feDropShadow dx="0" dy="8" stdDeviation="20" flood-color="#000" flood-opacity="0.5"/>
     </filter>
-    <filter id="glowFilterA">
-      <feGaussianBlur stdDeviation="4" result="blur"/>
-      <feMerge><feMergeNode in="blur"/><feMergeNode in="SourceGraphic"/></feMerge>
-    </filter>
-    <clipPath id="brClipA">
-      <rect x="620" y="55" width="548" height="540" rx="18"/>
-    </clipPath>
-    <pattern id="gridA" width="44" height="44" patternUnits="userSpaceOnUse">
-      <path d="M 44 0 L 0 0 0 44" fill="none" stroke="#1a3a7a" stroke-width="0.4" opacity="0.5"/>
-    </pattern>
   </defs>
 
   <!-- 배경 -->
-  <rect width="1200" height="675" fill="url(#bgA)"/>
+  <rect width="1200" height="675" fill="#04102b"/>
-  <rect width="1200" height="675" fill="url(#glowA1)"/>
+  <rect width="1200" height="675" fill="url(#hpA-bgGlow1)"/>
-  <rect width="1200" height="675" fill="url(#glowA2)"/>
+  <rect width="1200" height="675" fill="url(#hpA-bgGlow2)"/>
-  <rect width="1200" height="675" fill="url(#gridA)"/>
+
+  <!-- 유기적 배경 블롭 -->
+  <path d="M 580 0 C 700 -30 900 80 1000 150 C 1100 220 1200 350 1200 500 L 1200 0 Z" fill="rgba(37,99,235,0.05)"/>
+  <path d="M 800 675 C 900 620 1100 650 1200 600 L 1200 675 Z" fill="rgba(124,58,237,0.06)"/>
+  <path d="M 0 400 C 80 360 180 420 260 390 C 340 360 400 310 480 330 L 480 675 L 0 675 Z" fill="rgba(37,99,235,0.03)"/>
+
+  <!-- ===== 왼쪽 콘텐츠 ===== -->
 
-  <!-- 왼쪽 콘텐츠 -->
   <!-- 뱃지 -->
-  <rect x="60" y="64" width="308" height="38" rx="19" fill="#1d4ed8" opacity="0.95"/>
+  <rect x="48" y="72" width="296" height="34" rx="17" fill="rgba(37,99,235,0.2)" stroke="#2563eb" stroke-width="1"/>
-  <circle cx="84" cy="83" r="6" fill="#fbbf24"/>
+  <text x="196" y="94" text-anchor="middle" font-family="'Malgun Gothic','Apple SD Gothic Neo',sans-serif" font-size="13" fill="#93c5fd">납기 100% · 무료 AS · 연락두절 없음</text>
-  <text x="100" y="88" font-family="'Malgun Gothic','Apple SD Gothic Neo',sans-serif" font-size="15" font-weight="700" fill="#ffffff">납기 100% · 무료 AS · 연락두절 없음</text>
 
-  <!-- 메인 헤드라인 -->
+  <!-- 헤드라인 -->
-  <text x="60" y="166" font-family="'Malgun Gothic','Apple SD Gothic Neo',sans-serif" font-size="56" font-weight="900" fill="#ffffff">연락 끊기는</text>
+  <text x="48" y="175" font-family="'Malgun Gothic','Apple SD Gothic Neo',sans-serif" font-size="58" font-weight="700" fill="white">연락 끊기는</text>
-  <text x="60" y="234" font-family="'Malgun Gothic','Apple SD Gothic Neo',sans-serif" font-size="56" font-weight="900" fill="#ffffff">외주, 이제</text>
+  <text x="48" y="245" font-family="'Malgun Gothic','Apple SD Gothic Neo',sans-serif" font-size="58" font-weight="700" fill="white">외주, 이제</text>
-  <text x="60" y="302" font-family="'Malgun Gothic','Apple SD Gothic Neo',sans-serif" font-size="56" font-weight="900" fill="url(#headA)">그만하세요.</text>
+  <text x="48" y="315" font-family="'Malgun Gothic','Apple SD Gothic Neo',sans-serif" font-size="58" font-weight="700" fill="url(#hpA-headlineGrad)">그만하세요.</text>
 
   <!-- 서브텍스트 -->
-  <text x="60" y="348" font-family="'Malgun Gothic','Apple SD Gothic Neo',sans-serif" font-size="19" fill="#94a3b8">계약서로 시작 · 납기 보장 · AS까지 책임</text>
+  <text x="48" y="358" font-family="'Malgun Gothic','Apple SD Gothic Neo',sans-serif" font-size="17" fill="#94a3b8">7년차 대기업 개발자가 직접 만드는 맞춤 솔루션</text>
 
-  <!-- 구분선 -->
+  <!-- 특징 목록 -->
-  <line x1="60" y1="372" x2="280" y2="372" stroke="#1a3a7a" stroke-width="1.5"/>
+  <circle cx="62" cy="400" r="10" fill="rgba(34,197,94,0.15)" stroke="#22c55e" stroke-width="1.5"/>
+  <path d="M 57 400 L 61 404 L 68 396" stroke="#22c55e" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" fill="none"/>
+  <text x="82" y="405" font-family="'Malgun Gothic','Apple SD Gothic Neo',sans-serif" font-size="15" fill="#e2e8f0">납기일 100% 준수 보장</text>
 
-  <!-- 핵심 특징 리스트 -->
+  <circle cx="62" cy="435" r="10" fill="rgba(34,197,94,0.15)" stroke="#22c55e" stroke-width="1.5"/>
-  <g font-family="'Malgun Gothic','Apple SD Gothic Neo',sans-serif" font-size="15" fill="#e2e8f0">
+  <path d="M 57 435 L 61 439 L 68 431" stroke="#22c55e" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" fill="none"/>
-    <rect x="60" y="386" width="12" height="12" rx="3" fill="#22c55e"/>
+  <text x="82" y="440" font-family="'Malgun Gothic','Apple SD Gothic Neo',sans-serif" font-size="15" fill="#e2e8f0">납품 후 1개월 무료 AS</text>
-    <text x="82" y="398">납기일 100% 준수</text>
+
-    <rect x="60" y="414" width="12" height="12" rx="3" fill="#22c55e"/>
+  <circle cx="62" cy="470" r="10" fill="rgba(34,197,94,0.15)" stroke="#22c55e" stroke-width="1.5"/>
-    <text x="82" y="426">납품 후 무료 AS 포함</text>
+  <path d="M 57 470 L 61 474 L 68 466" stroke="#22c55e" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" fill="none"/>
-    <rect x="60" y="442" width="12" height="12" rx="3" fill="#22c55e"/>
+  <text x="82" y="475" font-family="'Malgun Gothic','Apple SD Gothic Neo',sans-serif" font-size="15" fill="#e2e8f0">24시간 내 응답 보장</text>
-    <text x="82" y="454">반응형 + SEO 최적화 기본</text>
-    <rect x="60" y="470" width="12" height="12" rx="3" fill="#22c55e"/>
-    <text x="82" y="482">Next.js 풀스택 개발</text>
-  </g>
 
   <!-- 가격 뱃지 -->
-  <rect x="60" y="506" width="260" height="68" rx="16" fill="url(#priceA)" filter="url(#glowFilterA)"/>
+  <rect x="48" y="510" width="118" height="44" rx="22" fill="rgba(96,165,250,0.12)" stroke="#60a5fa" stroke-width="1.5"/>
-  <text x="190" y="533" text-anchor="middle" font-family="'Malgun Gothic','Apple SD Gothic Neo',sans-serif" font-size="13" font-weight="600" fill="#bfdbfe">스타터 시작 가격</text>
+  <text x="107" y="537" text-anchor="middle" font-family="'Malgun Gothic','Apple SD Gothic Neo',sans-serif" font-size="20" font-weight="700" fill="#60a5fa">50만원~</text>
-  <text x="190" y="562" text-anchor="middle" font-family="'Malgun Gothic','Apple SD Gothic Neo',sans-serif" font-size="30" font-weight="900" fill="#ffffff">50만원~</text>
 
-  <!-- URL -->
+  <!-- ===== 오른쪽 브라우저 목업 ===== -->
-  <text x="60" y="632" font-family="'Malgun Gothic',sans-serif" font-size="14" fill="#3b5998">jaengseung-made.com</text>
+  <g filter="url(#hpA-shadow)">
+    <!-- 브라우저 외곽 -->
+    <rect x="562" y="50" width="608" height="540" rx="18" fill="#1e293b" stroke="#334155" stroke-width="1.5"/>
 
-  <!-- 오른쪽 브라우저 목업 -->
-  <g filter="url(#shadowA)">
-    <rect x="620" y="55" width="548" height="540" rx="18" fill="#0f172a" stroke="#1e3a8a" stroke-width="1.5"/>
     <!-- 탭바 -->
-    <rect x="620" y="55" width="548" height="46" rx="18" fill="#040e28"/>
+    <rect x="562" y="50" width="608" height="44" rx="18" fill="#0f172a"/>
-    <rect x="620" y="82" width="548" height="19" fill="#040e28"/>
+    <rect x="562" y="76" width="608" height="18" fill="#0f172a"/>
-    <!-- 창 버튼 -->
+
-    <circle cx="650" cy="78" r="7" fill="#ef4444"/>
+    <!-- 신호등 버튼 -->
-    <circle cx="675" cy="78" r="7" fill="#f59e0b"/>
+    <circle cx="591" cy="72" r="6" fill="#ef4444"/>
-    <circle cx="700" cy="78" r="7" fill="#22c55e"/>
+    <circle cx="611" cy="72" r="6" fill="#f59e0b"/>
+    <circle cx="631" cy="72" r="6" fill="#22c55e"/>
+
     <!-- URL 바 -->
-    <rect x="726" y="65" width="400" height="26" rx="13" fill="#0d1f4f" stroke="#1a3a7a" stroke-width="1"/>
+    <rect x="652" y="60" width="462" height="24" rx="12" fill="#1e293b" stroke="#334155" stroke-width="1"/>
-    <circle cx="746" cy="78" r="5" fill="#1a3a7a" opacity="0.6"/>
+    <text x="883" y="77" text-anchor="middle" font-family="'Malgun Gothic','Apple SD Gothic Neo',sans-serif" font-size="11" fill="#64748b">jaengseung-made.com</text>
-    <text x="910" y="82" text-anchor="middle" font-family="sans-serif" font-size="11" fill="#475569">jaengseung-made.com</text>
 
-    <!-- 브라우저 내부 -->
+    <!-- 브라우저 내부 배경 -->
-    <g clip-path="url(#brClipA)">
+    <rect x="562" y="94" width="608" height="496" fill="#f1f5f9"/>
-      <rect x="620" y="101" width="548" height="494" fill="#f8fafc"/>
 
-      <!-- 왼쪽 사이드바 (대시보드 스타일) -->
+    <!-- 사이드바 -->
-      <rect x="620" y="101" width="136" height="494" fill="#04102b"/>
+    <rect x="562" y="94" width="120" height="496" fill="#0f172a"/>
-      <!-- 사이드바 로고 -->
+    <!-- 사이드바 로고 -->
-      <rect x="634" y="116" width="30" height="30" rx="8" fill="#2563eb"/>
+    <rect x="568" y="106" width="108" height="30" rx="6" fill="#1e3a8a"/>
-      <text x="649" y="136" text-anchor="middle" font-family="sans-serif" font-size="13" font-weight="800" fill="#fff">쟁</text>
+    <rect x="578" y="117" width="50" height="8" rx="4" fill="rgba(255,255,255,0.7)"/>
-      <rect x="672" y="120" width="70" height="10" rx="5" fill="#1e3a8a"/>
+    <!-- 사이드바 메뉴 -->
-      <rect x="672" y="136" width="50" height="8" rx="4" fill="#0d1f4f"/>
+    <rect x="568" y="148" width="84" height="10" rx="5" fill="#334155"/>
-      <!-- 사이드바 메뉴 -->
+    <rect x="568" y="168" width="96" height="10" rx="5" fill="#1e3a8a"/>
-      <rect x="630" y="164" width="108" height="28" rx="8" fill="#2563eb" opacity="0.9"/>
+    <rect x="568" y="188" width="76" height="10" rx="5" fill="#334155"/>
-      <rect x="638" y="172" width="12" height="12" rx="3" fill="#60a5fa" opacity="0.5"/>
+    <rect x="568" y="208" width="88" height="10" rx="5" fill="#334155"/>
-      <rect x="658" y="174" width="55" height="8" rx="4" fill="#fff" opacity="0.8"/>
+    <rect x="568" y="228" width="78" height="10" rx="5" fill="#334155"/>
-      <rect x="630" y="200" width="108" height="26" rx="7" fill="#0d1f4f"/>
+    <rect x="568" y="248" width="64" height="10" rx="5" fill="#334155"/>
-      <rect x="638" y="208" width="12" height="10" rx="2" fill="#1e3a8a"/>
-      <rect x="658" y="210" width="45" height="7" rx="3" fill="#1e3a8a"/>
-      <rect x="630" y="234" width="108" height="26" rx="7" fill="#0d1f4f"/>
-      <rect x="638" y="242" width="12" height="10" rx="2" fill="#1e3a8a"/>
-      <rect x="658" y="244" width="55" height="7" rx="3" fill="#1e3a8a"/>
-      <rect x="630" y="268" width="108" height="26" rx="7" fill="#0d1f4f"/>
-      <rect x="638" y="276" width="12" height="10" rx="2" fill="#1e3a8a"/>
-      <rect x="658" y="278" width="40" height="7" rx="3" fill="#1e3a8a"/>
-      <rect x="630" y="302" width="108" height="26" rx="7" fill="#0d1f4f"/>
-      <rect x="638" y="310" width="12" height="10" rx="2" fill="#1e3a8a"/>
-      <rect x="658" y="312" width="50" height="7" rx="3" fill="#1e3a8a"/>
 
-      <!-- 메인 콘텐츠 영역 -->
+    <!-- 메인 콘텐츠 영역 -->
-      <!-- 상단 네비 -->
+    <!-- 히어로 섹션 -->
-      <rect x="756" y="101" width="412" height="44" fill="#fff" stroke="#e2e8f0" stroke-width="1"/>
+    <rect x="682" y="94" width="488" height="172" fill="url(#hpA-browserHero)"/>
-      <rect x="776" y="116" width="120" height="14" rx="7" fill="#e2e8f0"/>
+    <rect x="704" y="118" width="210" height="14" rx="7" fill="rgba(255,255,255,0.65)"/>
-      <rect x="1090" y="112" width="64" height="22" rx="11" fill="#2563eb"/>
+    <rect x="704" y="140" width="165" height="9" rx="4" fill="rgba(255,255,255,0.35)"/>
-      <text x="1122" y="127" text-anchor="middle" font-family="sans-serif" font-size="10" font-weight="700" fill="#fff">문의하기</text>
+    <rect x="704" y="156" width="180" height="9" rx="4" fill="rgba(255,255,255,0.25)"/>
+    <!-- CTA 버튼들 -->
+    <rect x="704" y="178" width="94" height="28" rx="14" fill="#2563eb"/>
+    <text x="751" y="197" text-anchor="middle" font-family="'Malgun Gothic','Apple SD Gothic Neo',sans-serif" font-size="10" fill="white">지금 문의하기</text>
+    <rect x="804" y="178" width="76" height="28" rx="14" fill="rgba(255,255,255,0.1)" stroke="rgba(255,255,255,0.3)" stroke-width="1"/>
+    <text x="842" y="197" text-anchor="middle" font-family="'Malgun Gothic','Apple SD Gothic Neo',sans-serif" font-size="10" fill="rgba(255,255,255,0.8)">서비스 보기</text>
 
-      <!-- 히어로 섹션 -->
+    <!-- 서비스 카드 3개 -->
-      <rect x="756" y="145" width="412" height="148" fill="#eff6ff"/>
+    <!-- 카드 1 -->
-      <rect x="776" y="164" width="60" height="18" rx="9" fill="#bfdbfe"/>
+    <rect x="682" y="278" width="154" height="114" rx="10" fill="white" stroke="#e2e8f0" stroke-width="1"/>
-      <text x="806" y="178" text-anchor="middle" font-family="sans-serif" font-size="9" fill="#1d4ed8">✓ 납기보장</text>
+    <rect x="682" y="278" width="154" height="5" rx="2" fill="url(#hpA-card1top)"/>
-      <rect x="776" y="190" width="180" height="20" rx="10" fill="#93c5fd"/>
+    <rect x="694" y="296" width="82" height="9" rx="4" fill="#1e293b"/>
-      <rect x="776" y="218" width="140" height="16" rx="8" fill="#bfdbfe"/>
+    <rect x="694" y="313" width="104" height="7" rx="3" fill="#94a3b8"/>
-      <rect x="776" y="242" width="80" height="28" rx="14" fill="#2563eb"/>
+    <rect x="694" y="328" width="92" height="7" rx="3" fill="#94a3b8"/>
-      <text x="816" y="261" text-anchor="middle" font-family="sans-serif" font-size="10" fill="#fff">문의하기</text>
+    <rect x="694" y="356" width="64" height="18" rx="9" fill="#eff6ff" stroke="#bfdbfe" stroke-width="1"/>
-      <!-- 히어로 이미지 placeholder -->
-      <rect x="1010" y="156" width="140" height="120" rx="10" fill="#dbeafe"/>
-      <rect x="1026" y="174" width="80" height="10" rx="5" fill="#93c5fd"/>
-      <rect x="1026" y="192" width="108" height="10" rx="5" fill="#bfdbfe"/>
-      <rect x="1026" y="210" width="90" height="10" rx="5" fill="#bfdbfe"/>
-      <rect x="1026" y="234" width="60" height="22" rx="11" fill="#2563eb"/>
 
-      <!-- 서비스 섹션 -->
+    <!-- 카드 2 -->
-      <rect x="756" y="293" width="412" height="24" fill="#f1f5f9"/>
+    <rect x="845" y="278" width="154" height="114" rx="10" fill="white" stroke="#e2e8f0" stroke-width="1"/>
-      <text x="962" y="309" text-anchor="middle" font-family="'Malgun Gothic',sans-serif" font-size="10" fill="#64748b">✦ 제공 서비스 ✦</text>
+    <rect x="845" y="278" width="154" height="5" rx="2" fill="url(#hpA-card2top)"/>
+    <rect x="857" y="296" width="82" height="9" rx="4" fill="#1e293b"/>
+    <rect x="857" y="313" width="104" height="7" rx="3" fill="#94a3b8"/>
+    <rect x="857" y="328" width="92" height="7" rx="3" fill="#94a3b8"/>
+    <rect x="857" y="356" width="64" height="18" rx="9" fill="#f5f3ff" stroke="#ddd6fe" stroke-width="1"/>
 
-      <!-- 카드 행 1 -->
+    <!-- 카드 3 -->
-      <rect x="762" y="325" width="122" height="108" rx="10" fill="#fff" stroke="#e2e8f0" stroke-width="1"/>
+    <rect x="1008" y="278" width="154" height="114" rx="10" fill="white" stroke="#e2e8f0" stroke-width="1"/>
-      <rect x="762" y="325" width="122" height="5" rx="2" fill="#2563eb"/>
+    <rect x="1008" y="278" width="154" height="5" rx="2" fill="url(#hpA-card3top)"/>
-      <rect x="776" y="342" width="36" height="36" rx="8" fill="#eff6ff"/>
+    <rect x="1020" y="296" width="82" height="9" rx="4" fill="#1e293b"/>
-      <text x="794" y="366" text-anchor="middle" font-size="16">🏢</text>
+    <rect x="1020" y="313" width="104" height="7" rx="3" fill="#94a3b8"/>
-      <rect x="776" y="386" width="72" height="10" rx="5" fill="#e2e8f0"/>
+    <rect x="1020" y="328" width="92" height="7" rx="3" fill="#94a3b8"/>
-      <rect x="776" y="404" width="90" height="8" rx="4" fill="#f1f5f9"/>
+    <rect x="1020" y="356" width="64" height="18" rx="9" fill="#ecfdf5" stroke="#a7f3d0" stroke-width="1"/>
-      <rect x="776" y="418" width="60" height="8" rx="4" fill="#f1f5f9"/>
 
-      <rect x="894" y="325" width="122" height="108" rx="10" fill="#fff" stroke="#ede9fe" stroke-width="1.5"/>
+    <!-- 통계 바 -->
-      <rect x="894" y="325" width="122" height="5" rx="2" fill="#7c3aed"/>
+    <rect x="682" y="404" width="478" height="66" rx="10" fill="white" stroke="#e2e8f0" stroke-width="1"/>
-      <rect x="910" y="342" width="36" height="36" rx="8" fill="#ede9fe"/>
+    <text x="748" y="427" text-anchor="middle" font-family="'Malgun Gothic','Apple SD Gothic Neo',sans-serif" font-size="18" font-weight="700" fill="#1d4ed8">7년</text>
-      <text x="928" y="366" text-anchor="middle" font-size="16">⚡</text>
+    <text x="748" y="444" text-anchor="middle" font-family="'Malgun Gothic','Apple SD Gothic Neo',sans-serif" font-size="10" fill="#64748b">개발 경력</text>
-      <rect x="910" y="386" width="72" height="10" rx="5" fill="#ddd6fe"/>
+    <line x1="810" y1="414" x2="810" y2="460" stroke="#e2e8f0" stroke-width="1"/>
-      <rect x="910" y="404" width="90" height="8" rx="4" fill="#ede9fe"/>
+    <text x="884" y="427" text-anchor="middle" font-family="'Malgun Gothic','Apple SD Gothic Neo',sans-serif" font-size="18" font-weight="700" fill="#1d4ed8">100%</text>
-      <rect x="910" y="418" width="60" height="8" rx="4" fill="#f5f3ff"/>
+    <text x="884" y="444" text-anchor="middle" font-family="'Malgun Gothic','Apple SD Gothic Neo',sans-serif" font-size="10" fill="#64748b">납기 준수</text>
+    <line x1="964" y1="414" x2="964" y2="460" stroke="#e2e8f0" stroke-width="1"/>
+    <text x="1034" y="427" text-anchor="middle" font-family="'Malgun Gothic','Apple SD Gothic Neo',sans-serif" font-size="18" font-weight="700" fill="#1d4ed8">무료</text>
+    <text x="1034" y="444" text-anchor="middle" font-family="'Malgun Gothic','Apple SD Gothic Neo',sans-serif" font-size="10" fill="#64748b">납품 후 AS</text>
+    <line x1="1098" y1="414" x2="1098" y2="460" stroke="#e2e8f0" stroke-width="1"/>
+    <text x="1144" y="427" text-anchor="middle" font-family="'Malgun Gothic','Apple SD Gothic Neo',sans-serif" font-size="18" font-weight="700" fill="#1d4ed8">50+</text>
+    <text x="1144" y="444" text-anchor="middle" font-family="'Malgun Gothic','Apple SD Gothic Neo',sans-serif" font-size="10" fill="#64748b">납품 실적</text>
 
-      <rect x="1026" y="325" width="122" height="108" rx="10" fill="#fff" stroke="#e2e8f0" stroke-width="1"/>
+    <!-- 실적 패널 -->
-      <rect x="1026" y="325" width="122" height="5" rx="2" fill="#059669"/>
+    <rect x="682" y="482" width="478" height="54" rx="10" fill="#1e293b"/>
-      <rect x="1042" y="342" width="36" height="36" rx="8" fill="#ecfdf5"/>
+    <text x="921" y="502" text-anchor="middle" font-family="'Malgun Gothic','Apple SD Gothic Neo',sans-serif" font-size="11" fill="#94a3b8">누적 납품 실적</text>
-      <text x="1060" y="366" text-anchor="middle" font-size="16">🚀</text>
+    <text x="921" y="522" text-anchor="middle" font-family="'Malgun Gothic','Apple SD Gothic Neo',sans-serif" font-size="16" font-weight="700" fill="white">최단 납품 7일 · 재의뢰율 94%</text>
-      <rect x="1042" y="386" width="72" height="10" rx="5" fill="#d1fae5"/>
-      <rect x="1042" y="404" width="90" height="8" rx="4" fill="#ecfdf5"/>
-      <rect x="1042" y="418" width="60" height="8" rx="4" fill="#ecfdf5"/>
-
-      <!-- 실적 수치 행 -->
-      <rect x="756" y="441" width="412" height="60" fill="#f8fafc" stroke="#e2e8f0" stroke-width="1"/>
-      <text x="840" y="476" text-anchor="middle" font-family="'Malgun Gothic',sans-serif" font-size="18" font-weight="900" fill="#0f172a">7년</text>
-      <text x="840" y="491" text-anchor="middle" font-family="'Malgun Gothic',sans-serif" font-size="9" fill="#64748b">개발 경력</text>
-      <line x1="899" y1="455" x2="899" y2="491" stroke="#e2e8f0" stroke-width="1"/>
-      <text x="962" y="476" text-anchor="middle" font-family="'Malgun Gothic',sans-serif" font-size="18" font-weight="900" fill="#2563eb">100%</text>
-      <text x="962" y="491" text-anchor="middle" font-family="'Malgun Gothic',sans-serif" font-size="9" fill="#64748b">납기 준수</text>
-      <line x1="1025" y1="455" x2="1025" y2="491" stroke="#e2e8f0" stroke-width="1"/>
-      <text x="1087" y="476" text-anchor="middle" font-family="'Malgun Gothic',sans-serif" font-size="18" font-weight="900" fill="#7c3aed">무료</text>
-      <text x="1087" y="491" text-anchor="middle" font-family="'Malgun Gothic',sans-serif" font-size="9" fill="#64748b">AS 포함</text>
-
-      <!-- 하단 푸터 -->
-      <rect x="756" y="501" width="412" height="94" fill="#04102b"/>
-      <rect x="780" y="518" width="60" height="12" rx="6" fill="#1e3a8a"/>
-      <rect x="780" y="538" width="100" height="9" rx="4" fill="#0d1f4f"/>
-      <rect x="780" y="554" width="80" height="9" rx="4" fill="#0d1f4f"/>
-      <rect x="1080" y="518" width="74" height="30" rx="8" fill="#2563eb"/>
-      <text x="1117" y="538" text-anchor="middle" font-family="sans-serif" font-size="10" fill="#fff">상담 신청</text>
-    </g>
   </g>
 
   <!-- 하단 바 -->
-  <rect x="0" y="638" width="1200" height="37" fill="url(#btnA)"/>
+  <rect x="0" y="638" width="1200" height="37" fill="url(#hpA-bottomBar)"/>
-  <text x="600" y="662" text-anchor="middle" font-family="'Malgun Gothic','Apple SD Gothic Neo',sans-serif" font-size="14" font-weight="600" fill="#ffffff">납기 100% 보장  ·  무료 AS 포함  ·  연락두절 없음  ·  jaengseung-made.com</text>
+  <text x="600" y="662" text-anchor="middle" font-family="'Malgun Gothic','Apple SD Gothic Neo',sans-serif" font-size="14" font-weight="600" fill="white">jaengseung-made.vercel.app — 지금 바로 문의하세요</text>
 </svg>

public/marketing/thumb-homepage-B.svg

@@ -1,110 +1,144 @@
 <svg xmlns="http://www.w3.org/2000/svg" width="1200" height="675" viewBox="0 0 1200 675">
   <defs>
-    <linearGradient id="bgB" x1="0%" y1="0%" x2="100%" y2="100%">
+    <linearGradient id="hpB-bgTop" x1="0%" y1="0%" x2="100%" y2="100%">
-      <stop offset="0%" style="stop-color:#04102b"/>
+      <stop offset="0%" stop-color="#04102b"/>
-      <stop offset="100%" style="stop-color:#1e1b4b"/>
+      <stop offset="100%" stop-color="#0d1f4f"/>
     </linearGradient>
-    <linearGradient id="topBarB" x1="0%" y1="0%" x2="100%" y2="0%">
+    <radialGradient id="hpB-glow1" cx="30%" cy="30%" r="50%">
-      <stop offset="0%" style="stop-color:#04102b"/>
+      <stop offset="0%" stop-color="#1d4ed8" stop-opacity="0.25"/>
-      <stop offset="100%" style="stop-color:#1e1b4b"/>
+      <stop offset="100%" stop-color="#04102b" stop-opacity="0"/>
-    </linearGradient>
-    <linearGradient id="card2GradB" x1="0%" y1="0%" x2="100%" y2="100%">
-      <stop offset="0%" style="stop-color:#eff6ff"/>
-      <stop offset="100%" style="stop-color:#ede9fe"/>
-    </linearGradient>
-    <linearGradient id="headB" x1="0%" y1="0%" x2="100%" y2="0%">
-      <stop offset="0%" style="stop-color:#60a5fa"/>
-      <stop offset="100%" style="stop-color:#a78bfa"/>
-    </linearGradient>
-    <linearGradient id="btnB" x1="0%" y1="0%" x2="100%" y2="0%">
-      <stop offset="0%" style="stop-color:#2563eb"/>
-      <stop offset="100%" style="stop-color:#7c3aed"/>
-    </linearGradient>
-    <filter id="cardShadowB">
-      <feDropShadow dx="0" dy="6" stdDeviation="14" flood-color="#000" flood-opacity="0.2"/>
-    </filter>
-    <filter id="card2ShadowB">
-      <feDropShadow dx="0" dy="12" stdDeviation="24" flood-color="#7c3aed" flood-opacity="0.3"/>
-    </filter>
-    <radialGradient id="glowB" cx="50%" cy="60%" r="60%">
-      <stop offset="0%" style="stop-color:#7c3aed;stop-opacity:0.12"/>
-      <stop offset="100%" style="stop-color:#7c3aed;stop-opacity:0"/>
     </radialGradient>
+    <radialGradient id="hpB-glow2" cx="75%" cy="25%" r="40%">
+      <stop offset="0%" stop-color="#7c3aed" stop-opacity="0.2"/>
+      <stop offset="100%" stop-color="#04102b" stop-opacity="0"/>
+    </radialGradient>
+    <linearGradient id="hpB-bottomBar" x1="0%" y1="0%" x2="100%" y2="0%">
+      <stop offset="0%" stop-color="#2563eb"/>
+      <stop offset="100%" stop-color="#7c3aed"/>
+    </linearGradient>
+    <linearGradient id="hpB-headGrad" x1="0%" y1="0%" x2="100%" y2="0%">
+      <stop offset="0%" stop-color="#60a5fa"/>
+      <stop offset="100%" stop-color="#a78bfa"/>
+    </linearGradient>
+    <linearGradient id="hpB-bizBorder" x1="0%" y1="0%" x2="0%" y2="100%">
+      <stop offset="0%" stop-color="#7c3aed"/>
+      <stop offset="100%" stop-color="#2563eb"/>
+    </linearGradient>
+    <filter id="hpB-cardShadow">
+      <feDropShadow dx="0" dy="4" stdDeviation="12" flood-color="#000" flood-opacity="0.25"/>
+    </filter>
+    <filter id="hpB-bizShadow">
+      <feDropShadow dx="0" dy="8" stdDeviation="20" flood-color="#7c3aed" flood-opacity="0.3"/>
+    </filter>
   </defs>
 
-  <!-- 배경: 상단 어두운 영역 -->
+  <!-- 배경 상단 (어두운 네이비) -->
-  <rect width="1200" height="300" fill="url(#topBarB)"/>
+  <rect width="1200" height="675" fill="url(#hpB-bgTop)"/>
-  <!-- 하단 밝은 영역 -->
+  <rect width="1200" height="675" fill="url(#hpB-glow1)"/>
-  <rect y="300" width="1200" height="375" fill="#f8fafc"/>
+  <rect width="1200" height="675" fill="url(#hpB-glow2)"/>
-  <rect width="1200" height="675" fill="url(#glowB)"/>
 
-  <!-- 상단: 브랜드 + 헤드라인 -->
+  <!-- 하단 밝은 배경 -->
-  <!-- 로고 -->
+  <rect x="0" y="300" width="1200" height="375" fill="#f8fafc"/>
-  <rect x="60" y="38" width="42" height="42" rx="12" fill="#2563eb"/>
-  <text x="81" y="65" text-anchor="middle" font-family="'Malgun Gothic',sans-serif" font-size="18" font-weight="900" fill="#fff">쟁</text>
-  <text x="114" y="52" font-family="'Malgun Gothic','Apple SD Gothic Neo',sans-serif" font-size="14" font-weight="700" fill="#60a5fa">쟁승메이드</text>
-  <text x="114" y="70" font-family="'Malgun Gothic',sans-serif" font-size="12" fill="#475569">홈페이지 제작 전문</text>
 
-  <!-- 헤드라인 -->
+  <!-- 유기적 웨이브 구분선 -->
-  <text x="600" y="130" text-anchor="middle" font-family="'Malgun Gothic','Apple SD Gothic Neo',sans-serif" font-size="50" font-weight="900" fill="#ffffff">기업급 품질, 합리적 가격</text>
+  <path d="M 0 290 C 200 270 400 320 600 300 C 800 280 1000 310 1200 295 L 1200 300 L 0 300 Z" fill="#f8fafc"/>
-  <text x="600" y="180" text-anchor="middle" font-family="'Malgun Gothic','Apple SD Gothic Neo',sans-serif" font-size="21" fill="#94a3b8">납기 보장 · Next.js 풀스택 · 계약서 필수 · SEO 최적화</text>
+  <!-- 보조 블롭 -->
+  <path d="M 0 0 C 150 40 300 -20 500 30 L 500 0 Z" fill="rgba(37,99,235,0.04)"/>
+  <path d="M 700 0 C 900 50 1100 -10 1200 40 L 1200 0 Z" fill="rgba(124,58,237,0.04)"/>
 
-  <!-- 구분선 -->
+  <!-- ===== 상단 헤드라인 영역 ===== -->
-  <line x1="380" y1="218" x2="820" y2="218" stroke="#1a3a7a" stroke-width="1"/>
+  <text x="600" y="82" text-anchor="middle" font-family="'Malgun Gothic','Apple SD Gothic Neo',sans-serif" font-size="13" fill="#93c5fd" letter-spacing="1">PREMIUM DEVELOPMENT SERVICE</text>
+  <text x="600" y="142" text-anchor="middle" font-family="'Malgun Gothic','Apple SD Gothic Neo',sans-serif" font-size="46" font-weight="700" fill="url(#hpB-headGrad)">기업급 품질, 합리적 가격</text>
+  <text x="600" y="182" text-anchor="middle" font-family="'Malgun Gothic','Apple SD Gothic Neo',sans-serif" font-size="18" fill="#94a3b8">7년차 대기업 개발자가 직접 개발하는 맞춤 솔루션</text>
 
-  <!-- 강점 3개 -->
+  <!-- 3개 특징 -->
-  <text x="330" y="255" text-anchor="middle" font-family="'Malgun Gothic',sans-serif" font-size="15" font-weight="600" fill="#60a5fa">⚡ 최단 7일 납품</text>
+  <g>
-  <text x="600" y="255" text-anchor="middle" font-family="'Malgun Gothic',sans-serif" font-size="15" font-weight="600" fill="#a78bfa">🔒 코드 품질 보증</text>
+    <!-- 특징 1 -->
-  <text x="870" y="255" text-anchor="middle" font-family="'Malgun Gothic',sans-serif" font-size="15" font-weight="600" fill="#34d399">✓ 납품 후 AS 포함</text>
+    <circle cx="280" cy="228" r="7" fill="#22c55e"/>
+    <text x="294" y="233" font-family="'Malgun Gothic','Apple SD Gothic Neo',sans-serif" font-size="14" fill="#e2e8f0">최단 7일 납품</text>
 
-  <!-- 플랜 카드 3개 -->
+    <!-- 특징 2 -->
-  <!-- 카드1: 스타터 -->
+    <circle cx="490" cy="228" r="7" fill="#60a5fa"/>
-  <rect x="50" y="308" width="330" height="326" rx="20" fill="#ffffff" stroke="#e2e8f0" stroke-width="1.5" filter="url(#cardShadowB)"/>
+    <text x="504" y="233" font-family="'Malgun Gothic','Apple SD Gothic Neo',sans-serif" font-size="14" fill="#e2e8f0">코드 품질 보증</text>
-  <rect x="50" y="308" width="330" height="8" rx="4" fill="#2563eb"/>
-  <text x="215" y="356" text-anchor="middle" font-family="'Malgun Gothic',sans-serif" font-size="13" font-weight="700" fill="#2563eb">STARTER</text>
-  <text x="215" y="422" text-anchor="middle" font-family="'Malgun Gothic',sans-serif" font-size="56" font-weight="900" fill="#0f172a">50만원</text>
-  <text x="215" y="448" text-anchor="middle" font-family="sans-serif" font-size="13" fill="#64748b">부터 시작</text>
-  <line x1="74" y1="466" x2="356" y2="466" stroke="#f1f5f9" stroke-width="1.5"/>
-  <text x="90" y="492" font-family="'Malgun Gothic',sans-serif" font-size="14" fill="#475569">✓  5페이지 이내</text>
-  <text x="90" y="516" font-family="'Malgun Gothic',sans-serif" font-size="14" fill="#475569">✓  반응형 디자인</text>
-  <text x="90" y="540" font-family="'Malgun Gothic',sans-serif" font-size="14" fill="#475569">✓  SEO 기본 설정</text>
-  <text x="90" y="564" font-family="'Malgun Gothic',sans-serif" font-size="14" fill="#475569">✓  납기 7일</text>
-  <rect x="74" y="584" width="262" height="40" rx="10" fill="#eff6ff"/>
-  <text x="205" y="609" text-anchor="middle" font-family="'Malgun Gothic',sans-serif" font-size="14" font-weight="700" fill="#2563eb">상담 신청하기</text>
 
-  <!-- 카드2: 비즈니스 (추천, 크고 돌출) -->
+    <!-- 특징 3 -->
-  <rect x="425" y="286" width="348" height="370" rx="20" fill="url(#card2GradB)" stroke="#7c3aed" stroke-width="2.5" filter="url(#card2ShadowB)"/>
+    <circle cx="700" cy="228" r="7" fill="#a78bfa"/>
-  <rect x="425" y="286" width="348" height="8" rx="4" fill="#7c3aed"/>
+    <text x="714" y="233" font-family="'Malgun Gothic','Apple SD Gothic Neo',sans-serif" font-size="14" fill="#e2e8f0">납품 후 AS 포함</text>
-  <!-- 추천 뱃지 -->
+  </g>
-  <rect x="671" y="274" width="80" height="28" rx="14" fill="#7c3aed"/>
-  <text x="711" y="293" text-anchor="middle" font-family="'Malgun Gothic',sans-serif" font-size="12" font-weight="700" fill="#fff">⭐ 추천</text>
-  <text x="599" y="338" text-anchor="middle" font-family="'Malgun Gothic',sans-serif" font-size="13" font-weight="700" fill="#7c3aed">BUSINESS</text>
-  <text x="599" y="410" text-anchor="middle" font-family="'Malgun Gothic',sans-serif" font-size="56" font-weight="900" fill="#0f172a">150만원</text>
-  <text x="599" y="436" text-anchor="middle" font-family="sans-serif" font-size="13" fill="#64748b">부터 시작</text>
-  <line x1="447" y1="454" x2="751" y2="454" stroke="#ddd6fe" stroke-width="1.5"/>
-  <text x="465" y="480" font-family="'Malgun Gothic',sans-serif" font-size="14" fill="#374151">✓  10페이지 이내</text>
-  <text x="465" y="504" font-family="'Malgun Gothic',sans-serif" font-size="14" fill="#374151">✓  커스텀 디자인</text>
-  <text x="465" y="528" font-family="'Malgun Gothic',sans-serif" font-size="14" fill="#374151">✓  관리자 페이지</text>
-  <text x="465" y="552" font-family="'Malgun Gothic',sans-serif" font-size="14" fill="#374151">✓  SEO 완전 최적화</text>
-  <text x="465" y="576" font-family="'Malgun Gothic',sans-serif" font-size="14" fill="#374151">✓  납기 14일</text>
-  <rect x="447" y="598" width="304" height="46" rx="13" fill="#7c3aed"/>
-  <text x="599" y="626" text-anchor="middle" font-family="'Malgun Gothic',sans-serif" font-size="16" font-weight="700" fill="#fff">지금 상담 신청 →</text>
 
-  <!-- 카드3: 프리미엄 -->
+  <!-- ===== 플랜 카드 3개 ===== -->
-  <rect x="820" y="308" width="330" height="326" rx="20" fill="#0f172a" stroke="#1e293b" stroke-width="1.5" filter="url(#cardShadowB)"/>
+
-  <rect x="820" y="308" width="330" height="8" rx="4" fill="#f59e0b"/>
+  <!-- 스타터 카드 -->
-  <text x="985" y="356" text-anchor="middle" font-family="'Malgun Gothic',sans-serif" font-size="13" font-weight="700" fill="#fbbf24">PREMIUM</text>
+  <g filter="url(#hpB-cardShadow)">
-  <text x="985" y="422" text-anchor="middle" font-family="'Malgun Gothic',sans-serif" font-size="56" font-weight="900" fill="#ffffff">300만원</text>
+    <rect x="78" y="296" width="290" height="310" rx="16" fill="white" stroke="#e2e8f0" stroke-width="1.5"/>
-  <text x="985" y="448" text-anchor="middle" font-family="sans-serif" font-size="13" fill="#64748b">부터 시작</text>
+    <!-- 상단 컬러 바 -->
-  <line x1="842" y1="466" x2="1128" y2="466" stroke="#1e293b" stroke-width="1.5"/>
+    <rect x="78" y="296" width="290" height="5" rx="2" fill="#22c55e"/>
-  <text x="860" y="492" font-family="'Malgun Gothic',sans-serif" font-size="14" fill="#94a3b8">✓  페이지 수 무제한</text>
+    <!-- 플랜명 -->
-  <text x="860" y="516" font-family="'Malgun Gothic',sans-serif" font-size="14" fill="#94a3b8">✓  결제/회원 시스템</text>
+    <text x="110" y="336" font-family="'Malgun Gothic','Apple SD Gothic Neo',sans-serif" font-size="13" fill="#64748b" font-weight="600" letter-spacing="1">STARTER</text>
-  <text x="860" y="540" font-family="'Malgun Gothic',sans-serif" font-size="14" fill="#94a3b8">✓  DB 연동</text>
+    <text x="110" y="362" font-family="'Malgun Gothic','Apple SD Gothic Neo',sans-serif" font-size="28" font-weight="700" fill="#1e293b">스타터</text>
-  <text x="860" y="564" font-family="'Malgun Gothic',sans-serif" font-size="14" fill="#94a3b8">✓  6개월 유지보수</text>
+    <!-- 가격 -->
-  <rect x="842" y="584" width="262" height="40" rx="10" fill="#1e293b"/>
+    <text x="110" y="398" font-family="'Malgun Gothic','Apple SD Gothic Neo',sans-serif" font-size="32" font-weight="700" fill="#22c55e">33<tspan font-size="18">만원~</tspan></text>
-  <text x="973" y="609" text-anchor="middle" font-family="'Malgun Gothic',sans-serif" font-size="14" font-weight="700" fill="#fbbf24">프리미엄 상담</text>
+    <!-- 구분선 -->
+    <line x1="110" y1="412" x2="338" y2="412" stroke="#e2e8f0" stroke-width="1"/>
+    <!-- 기능 목록 -->
+    <text x="124" y="434" font-family="'Malgun Gothic','Apple SD Gothic Neo',sans-serif" font-size="13" fill="#374151">✓  업무 자동화 스크립트</text>
+    <text x="124" y="457" font-family="'Malgun Gothic','Apple SD Gothic Neo',sans-serif" font-size="13" fill="#374151">✓  납품 후 2주 AS</text>
+    <text x="124" y="480" font-family="'Malgun Gothic','Apple SD Gothic Neo',sans-serif" font-size="13" fill="#374151">✓  코드 설명 문서 포함</text>
+    <text x="124" y="503" font-family="'Malgun Gothic','Apple SD Gothic Neo',sans-serif" font-size="13" fill="#94a3b8">—  시스템 통합 제외</text>
+    <!-- CTA -->
+    <rect x="110" y="526" width="228" height="38" rx="10" fill="#f0fdf4" stroke="#86efac" stroke-width="1.5"/>
+    <text x="224" y="550" text-anchor="middle" font-family="'Malgun Gothic','Apple SD Gothic Neo',sans-serif" font-size="14" font-weight="600" fill="#16a34a">문의하기</text>
+  </g>
+
+  <!-- 비즈니스 카드 (강조) -->
+  <g filter="url(#hpB-bizShadow)">
+    <rect x="388" y="286" width="310" height="330" rx="16" fill="white" stroke="url(#hpB-bizBorder)" stroke-width="2.5"/>
+    <!-- 상단 컬러 바 -->
+    <rect x="388" y="286" width="310" height="5" rx="2" fill="url(#hpB-bizBorder)"/>
+    <!-- 추천 배지 -->
+    <rect x="484" y="270" width="118" height="24" rx="12" fill="#7c3aed"/>
+    <text x="543" y="287" text-anchor="middle" font-family="'Malgun Gothic','Apple SD Gothic Neo',sans-serif" font-size="11" font-weight="600" fill="white">가장 인기있는 플랜</text>
+    <!-- 플랜명 -->
+    <text x="422" y="330" font-family="'Malgun Gothic','Apple SD Gothic Neo',sans-serif" font-size="13" fill="#7c3aed" font-weight="600" letter-spacing="1">BUSINESS</text>
+    <text x="422" y="358" font-family="'Malgun Gothic','Apple SD Gothic Neo',sans-serif" font-size="28" font-weight="700" fill="#1e293b">비즈니스</text>
+    <!-- 가격 -->
+    <text x="422" y="396" font-family="'Malgun Gothic','Apple SD Gothic Neo',sans-serif" font-size="32" font-weight="700" fill="#7c3aed">66<tspan font-size="18">만원~</tspan></text>
+    <!-- 구분선 -->
+    <line x1="422" y1="410" x2="668" y2="410" stroke="#e2e8f0" stroke-width="1"/>
+    <!-- 기능 목록 -->
+    <text x="436" y="432" font-family="'Malgun Gothic','Apple SD Gothic Neo',sans-serif" font-size="13" fill="#374151">✓  풀스택 웹/앱 개발</text>
+    <text x="436" y="455" font-family="'Malgun Gothic','Apple SD Gothic Neo',sans-serif" font-size="13" fill="#374151">✓  납품 후 1개월 AS</text>
+    <text x="436" y="478" font-family="'Malgun Gothic','Apple SD Gothic Neo',sans-serif" font-size="13" fill="#374151">✓  DB 설계 + API 개발</text>
+    <text x="436" y="501" font-family="'Malgun Gothic','Apple SD Gothic Neo',sans-serif" font-size="13" fill="#374151">✓  배포 환경 구성 포함</text>
+    <text x="436" y="524" font-family="'Malgun Gothic','Apple SD Gothic Neo',sans-serif" font-size="13" fill="#374151">✓  코드 인계 교육 포함</text>
+    <!-- CTA -->
+    <rect x="422" y="545" width="254" height="42" rx="12" fill="url(#hpB-headGrad)"/>
+    <text x="549" y="571" text-anchor="middle" font-family="'Malgun Gothic','Apple SD Gothic Neo',sans-serif" font-size="15" font-weight="700" fill="white">지금 문의하기</text>
+  </g>
+
+  <!-- 프리미엄 카드 -->
+  <g filter="url(#hpB-cardShadow)">
+    <rect x="728" y="296" width="290" height="310" rx="16" fill="white" stroke="#e2e8f0" stroke-width="1.5"/>
+    <!-- 상단 컬러 바 -->
+    <rect x="728" y="296" width="290" height="5" rx="2" fill="#f59e0b"/>
+    <!-- 플랜명 -->
+    <text x="760" y="336" font-family="'Malgun Gothic','Apple SD Gothic Neo',sans-serif" font-size="13" fill="#64748b" font-weight="600" letter-spacing="1">PREMIUM</text>
+    <text x="760" y="362" font-family="'Malgun Gothic','Apple SD Gothic Neo',sans-serif" font-size="28" font-weight="700" fill="#1e293b">프리미엄</text>
+    <!-- 가격 -->
+    <text x="760" y="398" font-family="'Malgun Gothic','Apple SD Gothic Neo',sans-serif" font-size="32" font-weight="700" fill="#d97706">100<tspan font-size="18">만원~</tspan></text>
+    <!-- 구분선 -->
+    <line x1="760" y1="412" x2="988" y2="412" stroke="#e2e8f0" stroke-width="1"/>
+    <!-- 기능 목록 -->
+    <text x="774" y="434" font-family="'Malgun Gothic','Apple SD Gothic Neo',sans-serif" font-size="13" fill="#374151">✓  기업용 대형 시스템</text>
+    <text x="774" y="457" font-family="'Malgun Gothic','Apple SD Gothic Neo',sans-serif" font-size="13" fill="#374151">✓  납품 후 3개월 AS</text>
+    <text x="774" y="480" font-family="'Malgun Gothic','Apple SD Gothic Neo',sans-serif" font-size="13" fill="#374151">✓  성능 최적화 포함</text>
+    <text x="774" y="503" font-family="'Malgun Gothic','Apple SD Gothic Neo',sans-serif" font-size="13" fill="#374151">✓  보안 감사 포함</text>
+    <!-- CTA -->
+    <rect x="760" y="526" width="228" height="38" rx="10" fill="#fffbeb" stroke="#fde68a" stroke-width="1.5"/>
+    <text x="874" y="550" text-anchor="middle" font-family="'Malgun Gothic','Apple SD Gothic Neo',sans-serif" font-size="14" font-weight="600" fill="#d97706">문의하기</text>
+  </g>
 
   <!-- 하단 바 -->
-  <rect x="0" y="638" width="1200" height="37" fill="url(#btnB)"/>
+  <rect x="0" y="638" width="1200" height="37" fill="url(#hpB-bottomBar)"/>
-  <text x="600" y="662" text-anchor="middle" font-family="'Malgun Gothic','Apple SD Gothic Neo',sans-serif" font-size="14" font-weight="600" fill="#ffffff">납기 100% 보장  ·  무료 AS 포함  ·  연락두절 없음  ·  jaengseung-made.com</text>
+  <text x="600" y="662" text-anchor="middle" font-family="'Malgun Gothic','Apple SD Gothic Neo',sans-serif" font-size="14" font-weight="600" fill="white">jaengseung-made.vercel.app — 지금 바로 문의하세요</text>
 </svg>

public/marketing/thumb-lotto.svg

@@ -1,206 +1,295 @@
 <svg xmlns="http://www.w3.org/2000/svg" width="1200" height="675" viewBox="0 0 1200 675">
   <defs>
-    <linearGradient id="bgLt" x1="0%" y1="0%" x2="100%" y2="100%">
+    <linearGradient id="lt-bgGrad" x1="0%" y1="0%" x2="100%" y2="100%">
-      <stop offset="0%" style="stop-color:#1c1200"/>
+      <stop offset="0%" stop-color="#1c1200"/>
-      <stop offset="50%" style="stop-color:#1a0e00"/>
+      <stop offset="100%" stop-color="#04102b"/>
-      <stop offset="100%" style="stop-color:#04102b"/>
     </linearGradient>
-    <linearGradient id="headLt" x1="0%" y1="0%" x2="100%" y2="0%">
+    <radialGradient id="lt-amberGlow" cx="70%" cy="40%" r="45%">
-      <stop offset="0%" style="stop-color:#fbbf24"/>
+      <stop offset="0%" stop-color="#f59e0b" stop-opacity="0.1"/>
-      <stop offset="100%" style="stop-color:#f59e0b"/>
+      <stop offset="100%" stop-color="#f59e0b" stop-opacity="0.0"/>
-    </linearGradient>
-    <linearGradient id="priceLt" x1="0%" y1="0%" x2="100%" y2="100%">
-      <stop offset="0%" style="stop-color:#92400e"/>
-      <stop offset="100%" style="stop-color:#b45309"/>
-    </linearGradient>
-    <linearGradient id="goldBall" x1="0%" y1="0%" x2="100%" y2="100%">
-      <stop offset="0%" style="stop-color:#fde68a"/>
-      <stop offset="100%" style="stop-color:#f59e0b"/>
-    </linearGradient>
-    <linearGradient id="redBall" x1="0%" y1="0%" x2="100%" y2="100%">
-      <stop offset="0%" style="stop-color:#fca5a5"/>
-      <stop offset="100%" style="stop-color:#ef4444"/>
-    </linearGradient>
-    <linearGradient id="blueBall" x1="0%" y1="0%" x2="100%" y2="100%">
-      <stop offset="0%" style="stop-color:#93c5fd"/>
-      <stop offset="100%" style="stop-color:#3b82f6"/>
-    </linearGradient>
-    <linearGradient id="greenBall" x1="0%" y1="0%" x2="100%" y2="100%">
-      <stop offset="0%" style="stop-color:#86efac"/>
-      <stop offset="100%" style="stop-color:#22c55e"/>
-    </linearGradient>
-    <linearGradient id="grayBall" x1="0%" y1="0%" x2="100%" y2="100%">
-      <stop offset="0%" style="stop-color:#e2e8f0"/>
-      <stop offset="100%" style="stop-color:#94a3b8"/>
-    </linearGradient>
-    <radialGradient id="glowLt" cx="70%" cy="50%" r="55%">
-      <stop offset="0%" style="stop-color:#f59e0b;stop-opacity:0.18"/>
-      <stop offset="100%" style="stop-color:#f59e0b;stop-opacity:0"/>
     </radialGradient>
-    <filter id="ballShadLt">
+    <linearGradient id="lt-badgeGrad" x1="0%" y1="0%" x2="100%" y2="0%">
-      <feDropShadow dx="0" dy="4" stdDeviation="8" flood-color="#000" flood-opacity="0.4"/>
+      <stop offset="0%" stop-color="#78350f"/>
-    </filter>
+      <stop offset="100%" stop-color="#92400e"/>
-    <filter id="panelShadLt">
+    </linearGradient>
-      <feDropShadow dx="0" dy="10" stdDeviation="20" flood-color="#000" flood-opacity="0.5"/>
+    <linearGradient id="lt-panelGrad" x1="0%" y1="0%" x2="0%" y2="100%">
-    </filter>
+      <stop offset="0%" stop-color="#1e1000"/>
+      <stop offset="100%" stop-color="#0a0a18"/>
+    </linearGradient>
+    <linearGradient id="lt-bottomBar" x1="0%" y1="0%" x2="100%" y2="0%">
+      <stop offset="0%" stop-color="#78350f"/>
+      <stop offset="100%" stop-color="#1c1200"/>
+    </linearGradient>
+    <!-- Ball gradients -->
+    <radialGradient id="lt-blueBall" cx="35%" cy="30%" r="60%">
+      <stop offset="0%" stop-color="#60a5fa"/>
+      <stop offset="50%" stop-color="#2563eb"/>
+      <stop offset="100%" stop-color="#1e3a8a"/>
+    </radialGradient>
+    <radialGradient id="lt-redBall" cx="35%" cy="30%" r="60%">
+      <stop offset="0%" stop-color="#f87171"/>
+      <stop offset="50%" stop-color="#dc2626"/>
+      <stop offset="100%" stop-color="#7f1d1d"/>
+    </radialGradient>
+    <radialGradient id="lt-goldBall" cx="35%" cy="30%" r="60%">
+      <stop offset="0%" stop-color="#fde68a"/>
+      <stop offset="50%" stop-color="#f59e0b"/>
+      <stop offset="100%" stop-color="#78350f"/>
+    </radialGradient>
+    <radialGradient id="lt-greenBall" cx="35%" cy="30%" r="60%">
+      <stop offset="0%" stop-color="#6ee7b7"/>
+      <stop offset="50%" stop-color="#10b981"/>
+      <stop offset="100%" stop-color="#064e3b"/>
+    </radialGradient>
+    <radialGradient id="lt-grayBall" cx="35%" cy="30%" r="60%">
+      <stop offset="0%" stop-color="#cbd5e1"/>
+      <stop offset="50%" stop-color="#94a3b8"/>
+      <stop offset="100%" stop-color="#334155"/>
+    </radialGradient>
+    <!-- Bar chart gradients -->
+    <linearGradient id="lt-bar1" x1="0%" y1="0%" x2="100%" y2="0%">
+      <stop offset="0%" stop-color="#2563eb"/>
+      <stop offset="100%" stop-color="#3b82f6"/>
+    </linearGradient>
+    <linearGradient id="lt-bar2" x1="0%" y1="0%" x2="100%" y2="0%">
+      <stop offset="0%" stop-color="#dc2626"/>
+      <stop offset="100%" stop-color="#f87171"/>
+    </linearGradient>
+    <linearGradient id="lt-bar3" x1="0%" y1="0%" x2="100%" y2="0%">
+      <stop offset="0%" stop-color="#d97706"/>
+      <stop offset="100%" stop-color="#fbbf24"/>
+    </linearGradient>
+    <linearGradient id="lt-bar4" x1="0%" y1="0%" x2="100%" y2="0%">
+      <stop offset="0%" stop-color="#059669"/>
+      <stop offset="100%" stop-color="#34d399"/>
+    </linearGradient>
+    <linearGradient id="lt-bar5" x1="0%" y1="0%" x2="100%" y2="0%">
+      <stop offset="0%" stop-color="#7c3aed"/>
+      <stop offset="100%" stop-color="#a78bfa"/>
+    </linearGradient>
   </defs>
 
-  <!-- 배경 -->
+  <!-- Background -->
-  <rect width="1200" height="675" fill="url(#bgLt)"/>
+  <rect width="1200" height="675" fill="url(#lt-bgGrad)"/>
-  <rect width="1200" height="675" fill="url(#glowLt)"/>
+  <rect width="1200" height="675" fill="url(#lt-amberGlow)"/>
 
-  <!-- 배경 숫자 패턴 (은은하게) -->
+  <!-- Organic arc background -->
-  <text x="620" y="88" font-family="monospace" font-size="13" fill="#2a1a00" opacity="0.7">7  12  23  34  41  45  [BONUS: 16]</text>
+  <path d="M 600 -50 C 800 0 1100 100 1300 300" stroke="rgba(245,158,11,0.06)" stroke-width="80" fill="none"/>
-  <text x="620" y="108" font-family="monospace" font-size="13" fill="#2a1a00" opacity="0.5">1  8  17  29  36  44  [BONUS: 3]</text>
-  <text x="620" y="590" font-family="monospace" font-size="13" fill="#2a1a00" opacity="0.4">FREQUENCY ANALYSIS | PATTERN: 연속번호 출현율 34.2%</text>
-  <text x="620" y="610" font-family="monospace" font-size="13" fill="#2a1a00" opacity="0.3">HOT: 3,7,14,23,32 | COLD: 5,19,28,38,42</text>
 
-  <!-- 왼쪽 콘텐츠 -->
+  <!-- Dot grid pattern -->
-  <!-- 뱃지 -->
+  <g opacity="0.06">
-  <rect x="60" y="62" width="272" height="40" rx="20" fill="#92400e" stroke="#f59e0b" stroke-width="1.5"/>
+    <pattern id="lt-dots" x="0" y="0" width="40" height="40" patternUnits="userSpaceOnUse">
-  <text x="82" y="87" font-family="'Malgun Gothic',sans-serif" font-size="14" font-weight="700" fill="#fde68a">🎯 빅데이터 통계 기반 분석</text>
+      <circle cx="20" cy="20" r="1.2" fill="#f59e0b"/>
-
+    </pattern>
-  <!-- 헤드라인 -->
+    <rect width="1200" height="675" fill="url(#lt-dots)"/>
-  <text x="60" y="162" font-family="'Malgun Gothic','Apple SD Gothic Neo',sans-serif" font-size="54" font-weight="900" fill="#ffffff">운이 아닌</text>
-  <text x="60" y="228" font-family="'Malgun Gothic','Apple SD Gothic Neo',sans-serif" font-size="54" font-weight="900" fill="url(#headLt)">데이터로 고릅니다</text>
-  <text x="60" y="276" font-family="'Malgun Gothic','Apple SD Gothic Neo',sans-serif" font-size="19" fill="#94a3b8">1~45회차 전수 분석 · 출현 패턴 · 구간별 최적화</text>
-
-  <!-- 수치 뱃지 3개 -->
-  <rect x="60" y="300" width="156" height="70" rx="14" fill="#1c1200" stroke="#f59e0b" stroke-width="1.5"/>
-  <text x="138" y="332" text-anchor="middle" font-family="sans-serif" font-size="30" font-weight="900" fill="#fbbf24">1,115</text>
-  <text x="138" y="356" text-anchor="middle" font-family="'Malgun Gothic',sans-serif" font-size="12" fill="#64748b">회차 전수 분석</text>
-
-  <rect x="228" y="300" width="156" height="70" rx="14" fill="#1c1200" stroke="#f59e0b" stroke-width="1.5"/>
-  <text x="306" y="332" text-anchor="middle" font-family="'Malgun Gothic',sans-serif" font-size="28" font-weight="900" fill="#60a5fa">매주</text>
-  <text x="306" y="356" text-anchor="middle" font-family="'Malgun Gothic',sans-serif" font-size="12" fill="#64748b">번호 업데이트</text>
-
-  <rect x="396" y="300" width="172" height="70" rx="14" fill="#1c1200" stroke="#f59e0b" stroke-width="1.5"/>
-  <text x="482" y="326" text-anchor="middle" font-family="'Malgun Gothic',sans-serif" font-size="13" fill="#94a3b8">월 구독 시작</text>
-  <text x="482" y="356" text-anchor="middle" font-family="'Malgun Gothic',sans-serif" font-size="30" font-weight="900" fill="#fbbf24">900원</text>
-
-  <!-- 플랜 설명 -->
-  <g font-family="'Malgun Gothic',sans-serif" font-size="14" fill="#e2e8f0">
-    <rect x="60" y="388" width="12" height="12" rx="3" fill="#fbbf24"/>
-    <text x="82" y="400">골드 — 매주 1회 번호 추천 · 900원/월</text>
-    <rect x="60" y="416" width="12" height="12" rx="3" fill="#94a3b8"/>
-    <text x="82" y="428">플래티넘 — 주 3회 + 텔레그램 · 2,900원/월</text>
-    <rect x="60" y="444" width="12" height="12" rx="3" fill="#fbbf24"/>
-    <text x="82" y="456">다이아 — 무제한 + 연간 리포트 · 9,900원/월</text>
   </g>
 
-  <!-- 가격 뱃지 -->
+  <!-- ===== LEFT CONTENT ===== -->
-  <rect x="60" y="476" width="248" height="72" rx="16" fill="url(#priceLt)"/>
-  <text x="184" y="503" text-anchor="middle" font-family="'Malgun Gothic',sans-serif" font-size="13" fill="#fde68a">골드 플랜 시작 가격</text>
-  <text x="184" y="534" text-anchor="middle" font-family="'Malgun Gothic',sans-serif" font-size="32" font-weight="900" fill="#ffffff">월 900원~</text>
 
-  <!-- 안내 문구 -->
+  <!-- Badge -->
-  <rect x="60" y="562" width="510" height="34" rx="8" fill="#1c1200" opacity="0.85"/>
+  <rect x="52" y="52" width="208" height="34" rx="17" fill="url(#lt-badgeGrad)" stroke="#f59e0b" stroke-width="1" stroke-opacity="0.6"/>
-  <text x="80" y="583" font-family="'Malgun Gothic',sans-serif" font-size="12" fill="#78716c">⚠️ 당첨을 보장하지 않습니다. 통계 기반 번호 추천 서비스입니다.</text>
+  <text x="156" y="74" font-family="'Malgun Gothic','Apple SD Gothic Neo',sans-serif" font-size="12.5" fill="#fcd34d" text-anchor="middle" font-weight="600">빅데이터 통계 기반 분석</text>
 
-  <!-- URL -->
+  <!-- Headline -->
-  <text x="60" y="632" font-family="sans-serif" font-size="14" fill="#3b5998">jaengseung-made.com</text>
+  <text x="52" y="142" font-family="'Malgun Gothic','Apple SD Gothic Neo',sans-serif" font-size="52" fill="white" font-weight="800" letter-spacing="-1">운이 아닌</text>
+  <text x="52" y="202" font-family="'Malgun Gothic','Apple SD Gothic Neo',sans-serif" font-size="52" fill="#fbbf24" font-weight="800" letter-spacing="-1">데이터로 고릅니다</text>
 
-  <!-- 오른쪽 로또 공 + 분석 패널 -->
+  <!-- Stats row -->
-  <rect x="614" y="52" width="558" height="558" rx="22" fill="#100a00" stroke="#2a1a00" stroke-width="1.5" filter="url(#panelShadLt)"/>
-
-  <!-- 패널 헤더 -->
-  <rect x="614" y="52" width="558" height="46" rx="22" fill="#0c0800"/>
-  <rect x="614" y="76" width="558" height="22" fill="#0c0800"/>
-  <text x="893" y="82" text-anchor="middle" font-family="'Malgun Gothic',sans-serif" font-size="13" font-weight="700" fill="#f59e0b">🎱 이번주 추천 번호</text>
-
-  <!-- 로또 공 6개 (메인) -->
-  <!-- 공 1: 7 (파랑) -->
-  <circle cx="690" cy="160" r="46" fill="url(#blueBall)" filter="url(#ballShadLt)"/>
-  <circle cx="690" cy="156" r="12" fill="rgba(255,255,255,0.35)"/>
-  <text x="690" y="168" text-anchor="middle" font-family="sans-serif" font-size="28" font-weight="900" fill="#fff">7</text>
-
-  <!-- 공 2: 14 (빨강) -->
-  <circle cx="788" cy="160" r="46" fill="url(#redBall)" filter="url(#ballShadLt)"/>
-  <circle cx="788" cy="156" r="12" fill="rgba(255,255,255,0.35)"/>
-  <text x="788" y="168" text-anchor="middle" font-family="sans-serif" font-size="28" font-weight="900" fill="#fff">14</text>
-
-  <!-- 공 3: 23 (금) -->
-  <circle cx="886" cy="160" r="46" fill="url(#goldBall)" filter="url(#ballShadLt)"/>
-  <circle cx="886" cy="156" r="12" fill="rgba(255,255,255,0.35)"/>
-  <text x="886" y="168" text-anchor="middle" font-family="sans-serif" font-size="28" font-weight="900" fill="#7c3200">23</text>
-
-  <!-- 공 4: 31 (초록) -->
-  <circle cx="984" cy="160" r="46" fill="url(#greenBall)" filter="url(#ballShadLt)"/>
-  <circle cx="984" cy="156" r="12" fill="rgba(255,255,255,0.35)"/>
-  <text x="984" y="168" text-anchor="middle" font-family="sans-serif" font-size="28" font-weight="900" fill="#fff">31</text>
-
-  <!-- 공 5: 38 (파랑) -->
-  <circle cx="1082" cy="160" r="46" fill="url(#blueBall)" filter="url(#ballShadLt)"/>
-  <circle cx="1082" cy="156" r="12" fill="rgba(255,255,255,0.35)"/>
-  <text x="1082" y="168" text-anchor="middle" font-family="sans-serif" font-size="28" font-weight="900" fill="#fff">38</text>
-
-  <!-- 보너스 공: 45 (회색) -->
-  <text x="893" y="228" text-anchor="middle" font-family="'Malgun Gothic',sans-serif" font-size="11" fill="#475569">BONUS</text>
-  <circle cx="1140" cy="218" r="30" fill="url(#grayBall)" filter="url(#ballShadLt)"/>
-  <circle cx="1140" cy="215" r="8" fill="rgba(255,255,255,0.3)"/>
-  <text x="1140" y="225" text-anchor="middle" font-family="sans-serif" font-size="20" font-weight="900" fill="#0f172a">45</text>
-
-  <!-- 구분선 -->
-  <line x1="634" y1="252" x2="1152" y2="252" stroke="#1e0e00" stroke-width="1.5"/>
-
-  <!-- 통계 그래프 영역 -->
-  <text x="893" y="280" text-anchor="middle" font-family="'Malgun Gothic',sans-serif" font-size="13" font-weight="700" fill="#94a3b8">번호별 출현 빈도 (최근 100회)</text>
-
-  <!-- 빈도 바 그래프 (간소화) -->
   <g>
-    <!-- 1~10 구간 -->
+    <rect x="52" y="226" width="148" height="70" rx="12" fill="rgba(245,158,11,0.12)" stroke="rgba(245,158,11,0.3)" stroke-width="1"/>
-    <rect x="640" y="392" width="54" height="70" rx="0" fill="#3b82f6" opacity="0.7"/>
+    <text x="126" y="252" font-family="'Malgun Gothic','Apple SD Gothic Neo',sans-serif" font-size="22" fill="#fbbf24" text-anchor="middle" font-weight="800">1,115</text>
-    <rect x="640" y="362" width="54" height="30" rx="0" fill="#3b82f6" opacity="0.9"/>
+    <text x="126" y="274" font-family="'Malgun Gothic','Apple SD Gothic Neo',sans-serif" font-size="10" fill="rgba(255,255,255,0.5)" text-anchor="middle">회차 전수 분석</text>
-    <text x="667" y="478" text-anchor="middle" font-family="sans-serif" font-size="11" fill="#64748b">1~10</text>
+
-    <!-- 11~20 구간 -->
+    <rect x="210" y="226" width="148" height="70" rx="12" fill="rgba(245,158,11,0.12)" stroke="rgba(245,158,11,0.3)" stroke-width="1"/>
-    <rect x="704" y="342" width="54" height="120" rx="0" fill="#22c55e" opacity="0.7"/>
+    <text x="284" y="252" font-family="'Malgun Gothic','Apple SD Gothic Neo',sans-serif" font-size="22" fill="#fbbf24" text-anchor="middle" font-weight="800">매주</text>
-    <rect x="704" y="302" width="54" height="40" rx="0" fill="#22c55e" opacity="0.9"/>
+    <text x="284" y="274" font-family="'Malgun Gothic','Apple SD Gothic Neo',sans-serif" font-size="10" fill="rgba(255,255,255,0.5)" text-anchor="middle">업데이트</text>
-    <text x="731" y="478" text-anchor="middle" font-family="sans-serif" font-size="11" fill="#64748b">11~20</text>
+
-    <!-- 21~30 구간 -->
+    <rect x="368" y="226" width="148" height="70" rx="12" fill="rgba(245,158,11,0.12)" stroke="rgba(245,158,11,0.3)" stroke-width="1"/>
-    <rect x="768" y="372" width="54" height="90" rx="0" fill="#f59e0b" opacity="0.7"/>
+    <text x="442" y="252" font-family="'Malgun Gothic','Apple SD Gothic Neo',sans-serif" font-size="22" fill="#fbbf24" text-anchor="middle" font-weight="800">900원</text>
-    <rect x="768" y="352" width="54" height="20" rx="0" fill="#f59e0b" opacity="0.9"/>
+    <text x="442" y="274" font-family="'Malgun Gothic','Apple SD Gothic Neo',sans-serif" font-size="10" fill="rgba(255,255,255,0.5)" text-anchor="middle">시작</text>
-    <text x="795" y="478" text-anchor="middle" font-family="sans-serif" font-size="11" fill="#64748b">21~30</text>
-    <!-- 31~40 구간 -->
-    <rect x="832" y="332" width="54" height="130" rx="0" fill="#ef4444" opacity="0.7"/>
-    <rect x="832" y="302" width="54" height="30" rx="0" fill="#ef4444" opacity="0.9"/>
-    <text x="859" y="478" text-anchor="middle" font-family="sans-serif" font-size="11" fill="#64748b">31~40</text>
-    <!-- 41~45 구간 -->
-    <rect x="896" y="382" width="54" height="80" rx="0" fill="#a78bfa" opacity="0.7"/>
-    <rect x="896" y="362" width="54" height="20" rx="0" fill="#a78bfa" opacity="0.9"/>
-    <text x="923" y="478" text-anchor="middle" font-family="sans-serif" font-size="11" fill="#64748b">41~45</text>
   </g>
-  <!-- 기준선 -->
-  <line x1="634" y1="462" x2="966" y2="462" stroke="#1e0e00" stroke-width="1"/>
 
-  <!-- 우측 통계 텍스트 -->
+  <!-- Plan list -->
-  <rect x="980" y="290" width="190" height="172" rx="14" fill="#0c0800" stroke="#2a1a00" stroke-width="1"/>
+  <rect x="52" y="316" width="350" height="120" rx="14" fill="rgba(255,255,255,0.04)" stroke="rgba(245,158,11,0.2)" stroke-width="1"/>
-  <text x="1075" y="316" text-anchor="middle" font-family="'Malgun Gothic',sans-serif" font-size="12" font-weight="700" fill="#94a3b8">HOT 번호</text>
+  <text x="72" y="344" font-family="'Malgun Gothic','Apple SD Gothic Neo',sans-serif" font-size="11.5" fill="rgba(255,255,255,0.4)" font-weight="600">구독 플랜</text>
-  <text x="1075" y="340" text-anchor="middle" font-family="sans-serif" font-size="14" font-weight="700" fill="#ef4444">3, 7, 14, 23, 32</text>
-  <line x1="990" y1="354" x2="1160" y2="354" stroke="#1e0e00" stroke-width="1"/>
-  <text x="1075" y="374" text-anchor="middle" font-family="'Malgun Gothic',sans-serif" font-size="12" font-weight="700" fill="#94a3b8">COLD 번호</text>
-  <text x="1075" y="398" text-anchor="middle" font-family="sans-serif" font-size="14" font-weight="700" fill="#60a5fa">5, 19, 28, 38, 42</text>
-  <line x1="990" y1="412" x2="1160" y2="412" stroke="#1e0e00" stroke-width="1"/>
-  <text x="1075" y="432" text-anchor="middle" font-family="'Malgun Gothic',sans-serif" font-size="12" font-weight="700" fill="#94a3b8">평균 출현 간격</text>
-  <text x="1075" y="454" text-anchor="middle" font-family="sans-serif" font-size="18" font-weight="900" fill="#fbbf24">7.8회</text>
 
-  <!-- AI 분석 태그 -->
+  <!-- Gold -->
-  <rect x="634" y="492" width="526" height="96" rx="14" fill="#1a0e00" stroke="#2a1a00" stroke-width="1"/>
+  <circle cx="78" cy="369" r="6" fill="#fbbf24"/>
-  <text x="650" y="516" font-family="'Malgun Gothic',sans-serif" font-size="12" font-weight="700" fill="#f59e0b">분석 기법</text>
+  <text x="92" y="374" font-family="'Malgun Gothic','Apple SD Gothic Neo',sans-serif" font-size="13" fill="white" font-weight="600">골드</text>
-  <g font-family="sans-serif" font-size="11" font-weight="700">
+  <text x="160" y="374" font-family="'Malgun Gothic','Apple SD Gothic Neo',sans-serif" font-size="12" fill="rgba(255,255,255,0.45)">기본 추천 5조합 · 매주 제공</text>
-    <rect x="650" y="524" width="88" height="24" rx="7" fill="#1c1200" stroke="#f59e0b" stroke-width="1"/>
+
-    <text x="694" y="540" text-anchor="middle" fill="#fbbf24">빈도 분석</text>
+  <!-- Platinum -->
-    <rect x="746" y="524" width="88" height="24" rx="7" fill="#1c1200" stroke="#f59e0b" stroke-width="1"/>
+  <circle cx="78" cy="397" r="6" fill="#94a3b8"/>
-    <text x="790" y="540" text-anchor="middle" fill="#fbbf24">구간 패턴</text>
+  <text x="92" y="402" font-family="'Malgun Gothic','Apple SD Gothic Neo',sans-serif" font-size="13" fill="white" font-weight="600">플래티넘</text>
-    <rect x="842" y="524" width="88" height="24" rx="7" fill="#1c1200" stroke="#f59e0b" stroke-width="1"/>
+  <text x="178" y="402" font-family="'Malgun Gothic','Apple SD Gothic Neo',sans-serif" font-size="12" fill="rgba(255,255,255,0.45)">통계 심층 분석 + 10조합</text>
-    <text x="886" y="540" text-anchor="middle" fill="#fbbf24">홀짝 비율</text>
+
-    <rect x="938" y="524" width="88" height="24" rx="7" fill="#1c1200" stroke="#f59e0b" stroke-width="1"/>
+  <!-- Diamond -->
-    <text x="982" y="540" text-anchor="middle" fill="#fbbf24">연속번호</text>
+  <circle cx="78" cy="425" r="6" fill="#60a5fa"/>
-    <rect x="1034" y="524" width="88" height="24" rx="7" fill="#1c1200" stroke="#f59e0b" stroke-width="1"/>
+  <text x="92" y="430" font-family="'Malgun Gothic','Apple SD Gothic Neo',sans-serif" font-size="13" fill="white" font-weight="600">다이아</text>
-    <text x="1078" y="540" text-anchor="middle" fill="#fbbf24">출현 주기</text>
+  <text x="160" y="430" font-family="'Malgun Gothic','Apple SD Gothic Neo',sans-serif" font-size="12" fill="rgba(255,255,255,0.45)">AI 패턴 분석 + 무제한 조합</text>
+
+  <!-- Price badge -->
+  <rect x="52" y="456" width="190" height="72" rx="14" fill="rgba(245,158,11,0.15)" stroke="#f59e0b" stroke-width="2"/>
+  <text x="147" y="482" font-family="'Malgun Gothic','Apple SD Gothic Neo',sans-serif" font-size="12" fill="#fcd34d" text-anchor="middle">월 구독 시작가</text>
+  <text x="147" y="513" font-family="'Malgun Gothic','Apple SD Gothic Neo',sans-serif" font-size="32" fill="white" text-anchor="middle" font-weight="800">900<tspan font-size="16" fill="#fcd34d">원~</tspan></text>
+
+  <!-- Disclaimer -->
+  <text x="52" y="556" font-family="'Malgun Gothic','Apple SD Gothic Neo',sans-serif" font-size="10.5" fill="rgba(255,255,255,0.28)">* 로또는 운의 게임이며, 당첨을 보장하지 않습니다.</text>
+  <text x="52" y="573" font-family="'Malgun Gothic','Apple SD Gothic Neo',sans-serif" font-size="10.5" fill="rgba(255,255,255,0.28)">* 통계 기반 분석이며 확률 향상을 보장하지 않습니다.</text>
+
+  <!-- ===== RIGHT: LOTTO PANEL ===== -->
+
+  <rect x="620" y="36" width="540" height="600" rx="22" fill="url(#lt-panelGrad)" stroke="rgba(245,158,11,0.3)" stroke-width="1.5"/>
+
+  <!-- Panel header -->
+  <rect x="620" y="36" width="540" height="60" rx="22" fill="rgba(245,158,11,0.15)"/>
+  <rect x="620" y="68" width="540" height="28" fill="rgba(245,158,11,0.15)"/>
+  <text x="890" y="74" font-family="'Malgun Gothic','Apple SD Gothic Neo',sans-serif" font-size="16" fill="#fbbf24" text-anchor="middle" font-weight="700">이번주 추천 번호</text>
+  <text x="890" y="92" font-family="'Malgun Gothic','Apple SD Gothic Neo',sans-serif" font-size="11" fill="rgba(255,255,255,0.4)" text-anchor="middle">1,115회차 데이터 기반 빈도 분석</text>
+
+  <!-- Lotto Balls Row -->
+  <!-- Ball 7 (blue) -->
+  <ellipse cx="686" cy="192" rx="36" ry="6" fill="rgba(0,0,0,0.3)"/>
+  <circle cx="686" cy="158" r="36" fill="url(#lt-blueBall)"/>
+  <ellipse cx="676" cy="146" rx="12" ry="7" fill="rgba(255,255,255,0.32)"/>
+  <text x="686" y="165" font-family="'Malgun Gothic','Apple SD Gothic Neo',sans-serif" font-size="20" fill="white" text-anchor="middle" font-weight="800">7</text>
+
+  <!-- Ball 14 (red) -->
+  <ellipse cx="762" cy="192" rx="36" ry="6" fill="rgba(0,0,0,0.3)"/>
+  <circle cx="762" cy="158" r="36" fill="url(#lt-redBall)"/>
+  <ellipse cx="752" cy="146" rx="12" ry="7" fill="rgba(255,255,255,0.32)"/>
+  <text x="762" y="165" font-family="'Malgun Gothic','Apple SD Gothic Neo',sans-serif" font-size="20" fill="white" text-anchor="middle" font-weight="800">14</text>
+
+  <!-- Ball 23 (gold) -->
+  <ellipse cx="838" cy="192" rx="36" ry="6" fill="rgba(0,0,0,0.3)"/>
+  <circle cx="838" cy="158" r="36" fill="url(#lt-goldBall)"/>
+  <ellipse cx="828" cy="146" rx="12" ry="7" fill="rgba(255,255,255,0.38)"/>
+  <text x="838" y="165" font-family="'Malgun Gothic','Apple SD Gothic Neo',sans-serif" font-size="20" fill="white" text-anchor="middle" font-weight="800">23</text>
+
+  <!-- Ball 31 (green) -->
+  <ellipse cx="914" cy="192" rx="36" ry="6" fill="rgba(0,0,0,0.3)"/>
+  <circle cx="914" cy="158" r="36" fill="url(#lt-greenBall)"/>
+  <ellipse cx="904" cy="146" rx="12" ry="7" fill="rgba(255,255,255,0.32)"/>
+  <text x="914" y="165" font-family="'Malgun Gothic','Apple SD Gothic Neo',sans-serif" font-size="20" fill="white" text-anchor="middle" font-weight="800">31</text>
+
+  <!-- Ball 38 (blue) -->
+  <ellipse cx="990" cy="192" rx="36" ry="6" fill="rgba(0,0,0,0.3)"/>
+  <circle cx="990" cy="158" r="36" fill="url(#lt-blueBall)"/>
+  <ellipse cx="980" cy="146" rx="12" ry="7" fill="rgba(255,255,255,0.32)"/>
+  <text x="990" y="165" font-family="'Malgun Gothic','Apple SD Gothic Neo',sans-serif" font-size="20" fill="white" text-anchor="middle" font-weight="800">38</text>
+
+  <!-- Bonus label + smaller ball -->
+  <text x="1100" y="144" font-family="'Malgun Gothic','Apple SD Gothic Neo',sans-serif" font-size="10" fill="rgba(255,255,255,0.4)" text-anchor="middle">보너스</text>
+  <ellipse cx="1100" cy="185" rx="28" ry="5" fill="rgba(0,0,0,0.28)"/>
+  <circle cx="1100" cy="158" r="28" fill="url(#lt-grayBall)"/>
+  <ellipse cx="1093" cy="148" rx="9" ry="5.5" fill="rgba(255,255,255,0.3)"/>
+  <text x="1100" y="164" font-family="'Malgun Gothic','Apple SD Gothic Neo',sans-serif" font-size="16" fill="white" text-anchor="middle" font-weight="800">45</text>
+
+  <!-- Section divider -->
+  <line x1="640" y1="212" x2="1140" y2="212" stroke="rgba(245,158,11,0.18)" stroke-width="1"/>
+
+  <!-- Bar chart section title -->
+  <text x="640" y="234" font-family="'Malgun Gothic','Apple SD Gothic Neo',sans-serif" font-size="12" fill="rgba(255,255,255,0.5)" font-weight="600">구간별 출현 빈도</text>
+
+  <!-- Bar chart (5 rounded bars) -->
+  <!-- 1~10 -->
+  <rect x="642" y="244" width="68" height="12" rx="6" fill="rgba(255,255,255,0.08)"/>
+  <rect x="642" y="244" width="48" height="12" rx="6" fill="url(#lt-bar1)"/>
+  <text x="716" y="255" font-family="'Malgun Gothic','Apple SD Gothic Neo',sans-serif" font-size="10" fill="rgba(255,255,255,0.45)">1~10</text>
+
+  <!-- 11~20 -->
+  <rect x="642" y="264" width="68" height="12" rx="6" fill="rgba(255,255,255,0.08)"/>
+  <rect x="642" y="264" width="60" height="12" rx="6" fill="url(#lt-bar2)"/>
+  <text x="716" y="275" font-family="'Malgun Gothic','Apple SD Gothic Neo',sans-serif" font-size="10" fill="rgba(255,255,255,0.45)">11~20</text>
+
+  <!-- 21~30 -->
+  <rect x="642" y="284" width="68" height="12" rx="6" fill="rgba(255,255,255,0.08)"/>
+  <rect x="642" y="284" width="55" height="12" rx="6" fill="url(#lt-bar3)"/>
+  <text x="716" y="295" font-family="'Malgun Gothic','Apple SD Gothic Neo',sans-serif" font-size="10" fill="rgba(255,255,255,0.45)">21~30</text>
+
+  <!-- 31~40 -->
+  <rect x="642" y="304" width="68" height="12" rx="6" fill="rgba(255,255,255,0.08)"/>
+  <rect x="642" y="304" width="52" height="12" rx="6" fill="url(#lt-bar4)"/>
+  <text x="716" y="315" font-family="'Malgun Gothic','Apple SD Gothic Neo',sans-serif" font-size="10" fill="rgba(255,255,255,0.45)">31~40</text>
+
+  <!-- 41~45 -->
+  <rect x="642" y="324" width="68" height="12" rx="6" fill="rgba(255,255,255,0.08)"/>
+  <rect x="642" y="324" width="36" height="12" rx="6" fill="url(#lt-bar5)"/>
+  <text x="716" y="335" font-family="'Malgun Gothic','Apple SD Gothic Neo',sans-serif" font-size="10" fill="rgba(255,255,255,0.45)">41~45</text>
+
+  <!-- HOT/COLD panel -->
+  <line x1="640" y1="352" x2="1140" y2="352" stroke="rgba(245,158,11,0.18)" stroke-width="1"/>
+
+  <text x="640" y="373" font-family="'Malgun Gothic','Apple SD Gothic Neo',sans-serif" font-size="12" fill="rgba(255,255,255,0.5)" font-weight="600">HOT 번호</text>
+  <text x="870" y="373" font-family="'Malgun Gothic','Apple SD Gothic Neo',sans-serif" font-size="12" fill="rgba(255,255,255,0.5)" font-weight="600">COLD 번호</text>
+
+  <!-- HOT numbers -->
+  <g>
+    <circle cx="660" cy="395" r="18" fill="#dc2626" fill-opacity="0.85"/>
+    <text x="660" y="401" font-family="'Malgun Gothic','Apple SD Gothic Neo',sans-serif" font-size="13" fill="white" text-anchor="middle" font-weight="700">7</text>
+    <circle cx="696" cy="395" r="18" fill="#dc2626" fill-opacity="0.75"/>
+    <text x="696" y="401" font-family="'Malgun Gothic','Apple SD Gothic Neo',sans-serif" font-size="13" fill="white" text-anchor="middle" font-weight="700">14</text>
+    <circle cx="732" cy="395" r="18" fill="#dc2626" fill-opacity="0.65"/>
+    <text x="732" y="401" font-family="'Malgun Gothic','Apple SD Gothic Neo',sans-serif" font-size="13" fill="white" text-anchor="middle" font-weight="700">23</text>
+    <circle cx="768" cy="395" r="18" fill="#dc2626" fill-opacity="0.55"/>
+    <text x="768" y="401" font-family="'Malgun Gothic','Apple SD Gothic Neo',sans-serif" font-size="13" fill="white" text-anchor="middle" font-weight="700">38</text>
+    <circle cx="804" cy="395" r="18" fill="#dc2626" fill-opacity="0.45"/>
+    <text x="804" y="401" font-family="'Malgun Gothic','Apple SD Gothic Neo',sans-serif" font-size="13" fill="white" text-anchor="middle" font-weight="700">45</text>
   </g>
-  <text x="650" y="575" font-family="'Malgun Gothic',sans-serif" font-size="12" fill="#475569">납기 보장 · 매주 업데이트되는 통계 알고리즘으로 최적 번호를 선별합니다.</text>
 
-  <!-- 하단 바 -->
+  <!-- COLD numbers -->
-  <rect x="0" y="638" width="1200" height="37" fill="#92400e"/>
+  <g>
-  <text x="600" y="662" text-anchor="middle" font-family="'Malgun Gothic','Apple SD Gothic Neo',sans-serif" font-size="14" font-weight="600" fill="#fde68a">빅데이터 통계 기반 로또 번호 추천  ·  1,115회차 전수 분석  ·  jaengseung-made.com</text>
+    <circle cx="888" cy="395" r="18" fill="#1e3a8a" fill-opacity="0.85"/>
+    <text x="888" y="401" font-family="'Malgun Gothic','Apple SD Gothic Neo',sans-serif" font-size="13" fill="white" text-anchor="middle" font-weight="700">3</text>
+    <circle cx="924" cy="395" r="18" fill="#1e3a8a" fill-opacity="0.75"/>
+    <text x="924" y="401" font-family="'Malgun Gothic','Apple SD Gothic Neo',sans-serif" font-size="13" fill="white" text-anchor="middle" font-weight="700">19</text>
+    <circle cx="960" cy="395" r="18" fill="#1e3a8a" fill-opacity="0.65"/>
+    <text x="960" y="401" font-family="'Malgun Gothic','Apple SD Gothic Neo',sans-serif" font-size="13" fill="white" text-anchor="middle" font-weight="700">27</text>
+    <circle cx="996" cy="395" r="18" fill="#1e3a8a" fill-opacity="0.55"/>
+    <text x="996" y="401" font-family="'Malgun Gothic','Apple SD Gothic Neo',sans-serif" font-size="13" fill="white" text-anchor="middle" font-weight="700">33</text>
+    <circle cx="1032" cy="395" r="18" fill="#1e3a8a" fill-opacity="0.45"/>
+    <text x="1032" y="401" font-family="'Malgun Gothic','Apple SD Gothic Neo',sans-serif" font-size="13" fill="white" text-anchor="middle" font-weight="700">41</text>
+  </g>
+
+  <!-- Analysis tags section -->
+  <line x1="640" y1="428" x2="1140" y2="428" stroke="rgba(245,158,11,0.18)" stroke-width="1"/>
+  <text x="640" y="450" font-family="'Malgun Gothic','Apple SD Gothic Neo',sans-serif" font-size="12" fill="rgba(255,255,255,0.5)" font-weight="600">분석 기법</text>
+
+  <!-- Tags -->
+  <rect x="640" y="458" width="90" height="26" rx="13" fill="rgba(245,158,11,0.15)" stroke="rgba(245,158,11,0.35)" stroke-width="1"/>
+  <text x="685" y="475" font-family="'Malgun Gothic','Apple SD Gothic Neo',sans-serif" font-size="10.5" fill="#fcd34d" text-anchor="middle">빈도 분석</text>
+
+  <rect x="738" y="458" width="90" height="26" rx="13" fill="rgba(245,158,11,0.15)" stroke="rgba(245,158,11,0.35)" stroke-width="1"/>
+  <text x="783" y="475" font-family="'Malgun Gothic','Apple SD Gothic Neo',sans-serif" font-size="10.5" fill="#fcd34d" text-anchor="middle">구간 분포</text>
+
+  <rect x="836" y="458" width="90" height="26" rx="13" fill="rgba(245,158,11,0.15)" stroke="rgba(245,158,11,0.35)" stroke-width="1"/>
+  <text x="881" y="475" font-family="'Malgun Gothic','Apple SD Gothic Neo',sans-serif" font-size="10.5" fill="#fcd34d" text-anchor="middle">연속 번호</text>
+
+  <rect x="934" y="458" width="90" height="26" rx="13" fill="rgba(245,158,11,0.15)" stroke="rgba(245,158,11,0.35)" stroke-width="1"/>
+  <text x="979" y="475" font-family="'Malgun Gothic','Apple SD Gothic Neo',sans-serif" font-size="10.5" fill="#fcd34d" text-anchor="middle">홀짝 비율</text>
+
+  <rect x="1032" y="458" width="90" height="26" rx="13" fill="rgba(245,158,11,0.15)" stroke="rgba(245,158,11,0.35)" stroke-width="1"/>
+  <text x="1077" y="475" font-family="'Malgun Gothic','Apple SD Gothic Neo',sans-serif" font-size="10.5" fill="#fcd34d" text-anchor="middle">회차 패턴</text>
+
+  <!-- Second row tags -->
+  <rect x="640" y="492" width="90" height="26" rx="13" fill="rgba(255,255,255,0.06)" stroke="rgba(255,255,255,0.12)" stroke-width="1"/>
+  <text x="685" y="509" font-family="'Malgun Gothic','Apple SD Gothic Neo',sans-serif" font-size="10.5" fill="rgba(255,255,255,0.45)" text-anchor="middle">합산 범위</text>
+
+  <rect x="738" y="492" width="90" height="26" rx="13" fill="rgba(255,255,255,0.06)" stroke="rgba(255,255,255,0.12)" stroke-width="1"/>
+  <text x="783" y="509" font-family="'Malgun Gothic','Apple SD Gothic Neo',sans-serif" font-size="10.5" fill="rgba(255,255,255,0.45)" text-anchor="middle">끝수 분석</text>
+
+  <rect x="836" y="492" width="90" height="26" rx="13" fill="rgba(255,255,255,0.06)" stroke="rgba(255,255,255,0.12)" stroke-width="1"/>
+  <text x="881" y="509" font-family="'Malgun Gothic','Apple SD Gothic Neo',sans-serif" font-size="10.5" fill="rgba(255,255,255,0.45)" text-anchor="middle">AC값</text>
+
+  <rect x="934" y="492" width="90" height="26" rx="13" fill="rgba(255,255,255,0.06)" stroke="rgba(255,255,255,0.12)" stroke-width="1"/>
+  <text x="979" y="509" font-family="'Malgun Gothic','Apple SD Gothic Neo',sans-serif" font-size="10.5" fill="rgba(255,255,255,0.45)" text-anchor="middle">소·중·고수</text>
+
+  <!-- CTA button -->
+  <rect x="640" y="534" width="480" height="58" rx="14" fill="rgba(245,158,11,0.2)" stroke="#f59e0b" stroke-width="2"/>
+  <text x="880" y="568" font-family="'Malgun Gothic','Apple SD Gothic Neo',sans-serif" font-size="16" fill="white" text-anchor="middle" font-weight="700">월 900원으로 이번주 번호 받기</text>
+
+  <!-- ===== BOTTOM BAR ===== -->
+  <rect x="0" y="638" width="1200" height="37" fill="url(#lt-bottomBar)"/>
+  <line x1="0" y1="638" x2="1200" y2="638" stroke="rgba(245,158,11,0.4)" stroke-width="1"/>
+  <text x="600" y="662" font-family="'Malgun Gothic','Apple SD Gothic Neo',sans-serif" font-size="13" fill="rgba(255,255,255,0.7)" text-anchor="middle" font-weight="600">jaengseungmade.vercel.app · 로또 번호 빅데이터 분석</text>
 </svg>

public/marketing/thumb-prompt.svg

@@ -1,122 +1,174 @@
 <svg xmlns="http://www.w3.org/2000/svg" width="1200" height="675" viewBox="0 0 1200 675">
   <defs>
-    <linearGradient id="bgPr" x1="0%" y1="0%" x2="100%" y2="100%">
+    <linearGradient id="pr-bg" x1="0%" y1="0%" x2="100%" y2="100%">
-      <stop offset="0%" style="stop-color:#1e1b4b"/>
+      <stop offset="0%" stop-color="#1e1b4b"/>
-      <stop offset="100%" style="stop-color:#04102b"/>
+      <stop offset="100%" stop-color="#04102b"/>
     </linearGradient>
-    <linearGradient id="headPr" x1="0%" y1="0%" x2="100%" y2="0%">
+    <radialGradient id="pr-glow1" cx="20%" cy="50%" r="50%">
-      <stop offset="0%" style="stop-color:#a78bfa"/>
+      <stop offset="0%" stop-color="#7c3aed" stop-opacity="0.3"/>
-      <stop offset="100%" style="stop-color:#60a5fa"/>
+      <stop offset="100%" stop-color="#04102b" stop-opacity="0"/>
-    </linearGradient>
-    <linearGradient id="badGradPr" x1="0%" y1="0%" x2="100%" y2="100%">
-      <stop offset="0%" style="stop-color:#1f2937"/>
-      <stop offset="100%" style="stop-color:#111827"/>
-    </linearGradient>
-    <linearGradient id="goodGradPr" x1="0%" y1="0%" x2="100%" y2="100%">
-      <stop offset="0%" style="stop-color:#1e1b4b"/>
-      <stop offset="100%" style="stop-color:#2d2b69"/>
-    </linearGradient>
-    <radialGradient id="glowPr" cx="50%" cy="40%" r="55%">
-      <stop offset="0%" style="stop-color:#7c3aed;stop-opacity:0.18"/>
-      <stop offset="100%" style="stop-color:#7c3aed;stop-opacity:0"/>
     </radialGradient>
-    <filter id="bubbleShadPr">
+    <radialGradient id="pr-glow2" cx="80%" cy="40%" r="45%">
-      <feDropShadow dx="0" dy="8" stdDeviation="16" flood-color="#7c3aed" flood-opacity="0.25"/>
+      <stop offset="0%" stop-color="#2563eb" stop-opacity="0.2"/>
-    </filter>
+      <stop offset="100%" stop-color="#04102b" stop-opacity="0"/>
-    <filter id="panelShadPr">
+    </radialGradient>
-      <feDropShadow dx="0" dy="10" stdDeviation="20" flood-color="#000" flood-opacity="0.45"/>
+    <linearGradient id="pr-bottomBar" x1="0%" y1="0%" x2="100%" y2="0%">
+      <stop offset="0%" stop-color="#7c3aed"/>
+      <stop offset="100%" stop-color="#2563eb"/>
+    </linearGradient>
+    <linearGradient id="pr-headGrad" x1="0%" y1="0%" x2="100%" y2="0%">
+      <stop offset="0%" stop-color="#a78bfa"/>
+      <stop offset="100%" stop-color="#60a5fa"/>
+    </linearGradient>
+    <linearGradient id="pr-afterBg" x1="0%" y1="0%" x2="0%" y2="100%">
+      <stop offset="0%" stop-color="#1e1b4b"/>
+      <stop offset="100%" stop-color="#312e81"/>
+    </linearGradient>
+    <filter id="pr-panelShadow">
+      <feDropShadow dx="0" dy="8" stdDeviation="20" flood-color="#000" flood-opacity="0.5"/>
     </filter>
   </defs>
 
   <!-- 배경 -->
-  <rect width="1200" height="675" fill="url(#bgPr)"/>
+  <rect width="1200" height="675" fill="url(#pr-bg)"/>
-  <rect width="1200" height="675" fill="url(#glowPr)"/>
+  <rect width="1200" height="675" fill="url(#pr-glow1)"/>
+  <rect width="1200" height="675" fill="url(#pr-glow2)"/>
 
-  <!-- 배경 코드 텍스트 (은은하게) -->
+  <!-- 유기적 배경 곡선 -->
-  <text x="30" y="92" font-family="monospace" font-size="12" fill="#312e81" opacity="0.55">system: You are an expert business analyst with 10 years of experience...</text>
+  <path d="M 600 675 C 700 620 900 660 1200 600 L 1200 675 Z" fill="rgba(124,58,237,0.06)"/>
-  <text x="30" y="118" font-family="monospace" font-size="12" fill="#312e81" opacity="0.4">role: assistant | temperature: 0.3 | max_tokens: 4096</text>
+  <path d="M 0 0 C 200 60 350 -10 520 40 L 520 0 Z" fill="rgba(124,58,237,0.04)"/>
-  <text x="30" y="590" font-family="monospace" font-size="12" fill="#312e81" opacity="0.35">{"output_format": "structured", "language": "ko", "tone": "professional"}</text>
+  <path d="M 650 0 C 820 80 1000 20 1200 60 L 1200 0 Z" fill="rgba(37,99,235,0.04)"/>
-  <text x="30" y="614" font-family="monospace" font-size="12" fill="#312e81" opacity="0.25">chain_of_thought: true | few_shot_examples: 3</text>
+
+  <!-- ===== 왼쪽 콘텐츠 ===== -->
 
-  <!-- 왼쪽 텍스트 -->
   <!-- 뱃지 -->
-  <rect x="60" y="60" width="290" height="40" rx="20" fill="#3b0764" stroke="#7c3aed" stroke-width="1.5"/>
+  <rect x="48" y="68" width="210" height="32" rx="16" fill="rgba(124,58,237,0.2)" stroke="#7c3aed" stroke-width="1"/>
-  <text x="84" y="86" font-family="'Malgun Gothic',sans-serif" font-size="14" font-weight="700" fill="#c4b5fd">🧠 AI 프롬프트 전문 설계</text>
+  <text x="153" y="89" text-anchor="middle" font-family="'Malgun Gothic','Apple SD Gothic Neo',sans-serif" font-size="13" fill="#a78bfa">AI 프롬프트 전문 설계</text>
 
   <!-- 헤드라인 -->
-  <text x="60" y="164" font-family="'Malgun Gothic','Apple SD Gothic Neo',sans-serif" font-size="50" font-weight="900" fill="#ffffff">AI를 제대로</text>
+  <text x="48" y="162" font-family="'Malgun Gothic','Apple SD Gothic Neo',sans-serif" font-size="48" font-weight="700" fill="white">AI를 제대로</text>
-  <text x="60" y="224" font-family="'Malgun Gothic','Apple SD Gothic Neo',sans-serif" font-size="50" font-weight="900" fill="url(#headPr)">써본 적 있으신가요?</text>
+  <text x="48" y="222" font-family="'Malgun Gothic','Apple SD Gothic Neo',sans-serif" font-size="48" font-weight="700" fill="url(#pr-headGrad)">써본 적 있으신가요?</text>
-  <text x="60" y="272" font-family="'Malgun Gothic','Apple SD Gothic Neo',sans-serif" font-size="19" fill="#94a3b8">업무 특화 프롬프트로 생산성 10배 향상</text>
 
-  <!-- 수치 뱃지 3개 -->
+  <!-- 서브텍스트 -->
-  <rect x="60" y="298" width="142" height="68" rx="14" fill="#1e1b4b" stroke="#7c3aed" stroke-width="1.5"/>
+  <text x="48" y="264" font-family="'Malgun Gothic','Apple SD Gothic Neo',sans-serif" font-size="16" fill="#94a3b8">업무 특화 AI 프롬프트 설계로 생산성을 극대화하세요</text>
-  <text x="131" y="330" text-anchor="middle" font-family="sans-serif" font-size="32" font-weight="900" fill="#a78bfa">10x</text>
-  <text x="131" y="354" text-anchor="middle" font-family="'Malgun Gothic',sans-serif" font-size="12" fill="#64748b">생산성 향상</text>
 
-  <rect x="214" y="298" width="142" height="68" rx="14" fill="#1e1b4b" stroke="#7c3aed" stroke-width="1.5"/>
+  <!-- 수치 3개 -->
-  <text x="285" y="330" text-anchor="middle" font-family="'Malgun Gothic',sans-serif" font-size="28" font-weight="900" fill="#60a5fa">3일</text>
+  <rect x="48" y="286" width="440" height="76" rx="14" fill="rgba(0,0,0,0.25)" stroke="rgba(124,58,237,0.2)" stroke-width="1"/>
-  <text x="285" y="354" text-anchor="middle" font-family="'Malgun Gothic',sans-serif" font-size="12" fill="#64748b">납품 (베이직)</text>
+  <!-- 수치 1 -->
+  <text x="116" y="318" text-anchor="middle" font-family="'Malgun Gothic','Apple SD Gothic Neo',sans-serif" font-size="28" font-weight="700" fill="url(#pr-headGrad)">10x</text>
+  <text x="116" y="340" text-anchor="middle" font-family="'Malgun Gothic','Apple SD Gothic Neo',sans-serif" font-size="11" fill="#94a3b8">생산성 향상</text>
+  <line x1="195" y1="296" x2="195" y2="352" stroke="rgba(124,58,237,0.3)" stroke-width="1"/>
+  <!-- 수치 2 -->
+  <text x="272" y="318" text-anchor="middle" font-family="'Malgun Gothic','Apple SD Gothic Neo',sans-serif" font-size="28" font-weight="700" fill="#34d399">3일</text>
+  <text x="272" y="340" text-anchor="middle" font-family="'Malgun Gothic','Apple SD Gothic Neo',sans-serif" font-size="11" fill="#94a3b8">납품</text>
+  <line x1="352" y1="296" x2="352" y2="352" stroke="rgba(124,58,237,0.3)" stroke-width="1"/>
+  <!-- 수치 3 -->
+  <text x="416" y="318" text-anchor="middle" font-family="'Malgun Gothic','Apple SD Gothic Neo',sans-serif" font-size="28" font-weight="700" fill="#fbbf24">10만<tspan font-size="16">원~</tspan></text>
+  <text x="416" y="340" text-anchor="middle" font-family="'Malgun Gothic','Apple SD Gothic Neo',sans-serif" font-size="11" fill="#94a3b8">시작 가격</text>
 
-  <rect x="368" y="298" width="156" height="68" rx="14" fill="#1e1b4b" stroke="#7c3aed" stroke-width="1.5"/>
+  <!-- AI 플랫폼 뱃지 -->
-  <text x="446" y="326" text-anchor="middle" font-family="'Malgun Gothic',sans-serif" font-size="13" fill="#94a3b8">시작 가격</text>
+  <text x="48" y="398" font-family="'Malgun Gothic','Apple SD Gothic Neo',sans-serif" font-size="13" fill="#64748b">지원 AI 플랫폼</text>
-  <text x="446" y="354" text-anchor="middle" font-family="'Malgun Gothic',sans-serif" font-size="26" font-weight="900" fill="#34d399">10만원~</text>
+  <!-- ChatGPT -->
+  <rect x="48" y="410" width="96" height="30" rx="15" fill="rgba(16,185,129,0.1)" stroke="#10b981" stroke-width="1"/>
+  <text x="96" y="429" text-anchor="middle" font-family="'Malgun Gothic','Apple SD Gothic Neo',sans-serif" font-size="12" fill="#34d399">ChatGPT</text>
+  <!-- Claude -->
+  <rect x="152" y="410" width="76" height="30" rx="15" fill="rgba(239,68,68,0.1)" stroke="#f87171" stroke-width="1"/>
+  <text x="190" y="429" text-anchor="middle" font-family="'Malgun Gothic','Apple SD Gothic Neo',sans-serif" font-size="12" fill="#f87171">Claude</text>
+  <!-- Gemini -->
+  <rect x="236" y="410" width="76" height="30" rx="15" fill="rgba(37,99,235,0.1)" stroke="#60a5fa" stroke-width="1"/>
+  <text x="274" y="429" text-anchor="middle" font-family="'Malgun Gothic','Apple SD Gothic Neo',sans-serif" font-size="12" fill="#60a5fa">Gemini</text>
 
-  <!-- 지원 AI 플랫폼 -->
+  <!-- 적용 분야 목록 -->
-  <text x="60" y="402" font-family="'Malgun Gothic',sans-serif" font-size="14" fill="#64748b">지원 AI 플랫폼 :</text>
+  <text x="48" y="474" font-family="'Malgun Gothic','Apple SD Gothic Neo',sans-serif" font-size="13" fill="#64748b">적용 분야</text>
-  <rect x="168" y="385" width="106" height="30" rx="9" fill="#10a37f" opacity="0.9"/>
+  <text x="48" y="498" font-family="'Malgun Gothic','Apple SD Gothic Neo',sans-serif" font-size="14" fill="#e2e8f0">· 임원 보고서 자동화</text>
-  <text x="221" y="404" text-anchor="middle" font-family="sans-serif" font-size="12" font-weight="700" fill="#fff">ChatGPT</text>
+  <text x="48" y="520" font-family="'Malgun Gothic','Apple SD Gothic Neo',sans-serif" font-size="14" fill="#e2e8f0">· 고객 이메일 초안 작성</text>
-  <rect x="284" y="385" width="80" height="30" rx="9" fill="#c35a38" opacity="0.9"/>
+  <text x="48" y="542" font-family="'Malgun Gothic','Apple SD Gothic Neo',sans-serif" font-size="14" fill="#e2e8f0">· 데이터 분석 리포트 생성</text>
-  <text x="324" y="404" text-anchor="middle" font-family="sans-serif" font-size="12" font-weight="700" fill="#fff">Claude</text>
+  <text x="48" y="564" font-family="'Malgun Gothic','Apple SD Gothic Neo',sans-serif" font-size="14" fill="#e2e8f0">· 코드 리뷰 및 문서화</text>
-  <rect x="374" y="385" width="84" height="30" rx="9" fill="#1a73e8" opacity="0.9"/>
-  <text x="416" y="404" text-anchor="middle" font-family="sans-serif" font-size="12" font-weight="700" fill="#fff">Gemini</text>
 
-  <!-- 적용 분야 -->
+  <!-- ===== 오른쪽 Before/After 패널 ===== -->
-  <g font-family="'Malgun Gothic',sans-serif" font-size="14" fill="#94a3b8">
+  <g filter="url(#pr-panelShadow)">
-    <text x="60" y="448">📝 보고서·기획서  ·  📊 데이터 분석  ·  📧 이메일 작성</text>
+    <!-- 패널 외곽 -->
-    <text x="60" y="476">💡 아이디어 발굴  ·  🎯 마케팅 카피  ·  💬 고객 응대</text>
+    <rect x="590" y="48" width="582" height="578" rx="16" fill="#111827" stroke="#374151" stroke-width="1.5"/>
+
+    <!-- BEFORE 영역 -->
+    <rect x="590" y="48" width="582" height="290" rx="16" fill="#1f2937"/>
+    <rect x="590" y="290" width="582" height="20" fill="#1f2937"/>
+
+    <!-- BEFORE 레이블 -->
+    <text x="618" y="82" font-family="'Malgun Gothic','Apple SD Gothic Neo',sans-serif" font-size="11" font-weight="700" fill="#ef4444" letter-spacing="1">BEFORE</text>
+    <text x="666" y="82" font-family="'Malgun Gothic','Apple SD Gothic Neo',sans-serif" font-size="11" fill="#6b7280">— 일반 프롬프트</text>
+
+    <!-- 사용자 말풍선 (오른쪽) -->
+    <rect x="1002" y="96" width="148" height="64" rx="12" fill="#374151"/>
+    <!-- 말풍선 꼬리 -->
+    <path d="M 1150 148 L 1162 154 L 1150 160 Z" fill="#374151"/>
+    <text x="1076" y="118" text-anchor="middle" font-family="'Malgun Gothic','Apple SD Gothic Neo',sans-serif" font-size="14" font-weight="600" fill="#f9fafb">보고서 써줘</text>
+    <text x="1076" y="136" text-anchor="middle" font-family="'Malgun Gothic','Apple SD Gothic Neo',sans-serif" font-size="10" fill="#9ca3af">막연한 요청</text>
+    <text x="1076" y="150" text-anchor="middle" font-family="'Malgun Gothic','Apple SD Gothic Neo',sans-serif" font-size="10" fill="#9ca3af">단 4글자</text>
+
+    <!-- AI 응답 말풍선 (왼쪽) -->
+    <rect x="618" y="180" width="360" height="90" rx="12" fill="#111827" stroke="#374151" stroke-width="1"/>
+    <!-- AI 레이블 -->
+    <text x="630" y="200" font-family="'Malgun Gothic','Apple SD Gothic Neo',sans-serif" font-size="10" fill="#6b7280">AI 응답</text>
+    <rect x="642" y="208" width="180" height="8" rx="4" fill="#374151"/>
+    <rect x="642" y="222" width="220" height="8" rx="4" fill="#374151"/>
+    <rect x="642" y="236" width="160" height="8" rx="4" fill="#374151"/>
+    <rect x="642" y="250" width="200" height="8" rx="4" fill="#374151"/>
+
+    <!-- 구분 레이블 -->
+    <text x="1050" y="196" text-anchor="middle" font-family="'Malgun Gothic','Apple SD Gothic Neo',sans-serif" font-size="11" fill="#ef4444">빈 템플릿 반환</text>
+    <text x="1050" y="214" text-anchor="middle" font-family="'Malgun Gothic','Apple SD Gothic Neo',sans-serif" font-size="10" fill="#6b7280">어색한 문체</text>
+    <text x="1050" y="230" text-anchor="middle" font-family="'Malgun Gothic','Apple SD Gothic Neo',sans-serif" font-size="10" fill="#6b7280">활용 불가</text>
+
+    <!-- 시각적 구분선 (BEFORE→AFTER) -->
+    <path d="M 626 338 C 700 332 1000 348 1172 340" stroke="#374151" stroke-width="1" fill="none"/>
+    <rect x="800" y="328" width="84" height="22" rx="11" fill="#374151"/>
+    <text x="842" y="343" text-anchor="middle" font-family="'Malgun Gothic','Apple SD Gothic Neo',sans-serif" font-size="10" font-weight="600" fill="#9ca3af">VS</text>
+
+    <!-- AFTER 영역 -->
+    <rect x="590" y="360" width="582" height="266" rx="16" fill="url(#pr-afterBg)"/>
+    <rect x="590" y="360" width="582" height="20" fill="url(#pr-afterBg)"/>
+
+    <!-- AFTER 레이블 -->
+    <text x="618" y="394" font-family="'Malgun Gothic','Apple SD Gothic Neo',sans-serif" font-size="11" font-weight="700" fill="#22c55e" letter-spacing="1">AFTER</text>
+    <text x="666" y="394" font-family="'Malgun Gothic','Apple SD Gothic Neo',sans-serif" font-size="11" fill="#94a3b8">— 최적화 프롬프트</text>
+
+    <!-- 최적화 프롬프트 박스 -->
+    <rect x="618" y="404" width="300" height="120" rx="10" fill="rgba(124,58,237,0.15)" stroke="#7c3aed" stroke-width="1"/>
+    <text x="630" y="422" font-family="'Malgun Gothic','Apple SD Gothic Neo',sans-serif" font-size="10" fill="#a78bfa" font-weight="600">[역할]</text>
+    <text x="668" y="422" font-family="'Malgun Gothic','Apple SD Gothic Neo',sans-serif" font-size="10" fill="#e2e8f0">당신은 10년 경력 기획자입니다</text>
+    <text x="630" y="440" font-family="'Malgun Gothic','Apple SD Gothic Neo',sans-serif" font-size="10" fill="#a78bfa" font-weight="600">[배경]</text>
+    <text x="668" y="440" font-family="'Malgun Gothic','Apple SD Gothic Neo',sans-serif" font-size="10" fill="#e2e8f0">Q3 매출 현황 임원 보고 목적</text>
+    <text x="630" y="458" font-family="'Malgun Gothic','Apple SD Gothic Neo',sans-serif" font-size="10" fill="#a78bfa" font-weight="600">[형식]</text>
+    <text x="668" y="458" font-family="'Malgun Gothic','Apple SD Gothic Neo',sans-serif" font-size="10" fill="#e2e8f0">3단 구조: 현황·분석·제언</text>
+    <text x="630" y="476" font-family="'Malgun Gothic','Apple SD Gothic Neo',sans-serif" font-size="10" fill="#a78bfa" font-weight="600">[제약]</text>
+    <text x="668" y="476" font-family="'Malgun Gothic','Apple SD Gothic Neo',sans-serif" font-size="10" fill="#e2e8f0">500자 이내, 전문 용어 최소화</text>
+    <text x="630" y="494" font-family="'Malgun Gothic','Apple SD Gothic Neo',sans-serif" font-size="10" fill="#a78bfa" font-weight="600">[톤]</text>
+    <text x="668" y="494" font-family="'Malgun Gothic','Apple SD Gothic Neo',sans-serif" font-size="10" fill="#e2e8f0">간결하고 데이터 중심</text>
+    <!-- 말풍선 꼬리 -->
+    <path d="M 618 462 L 606 468 L 618 474 Z" fill="rgba(124,58,237,0.15)"/>
+
+    <!-- AI 응답 말풍선 (오른쪽, 구조화된 출력) -->
+    <rect x="930" y="404" width="228" height="138" rx="12" fill="rgba(37,99,235,0.15)" stroke="#2563eb" stroke-width="1"/>
+    <!-- 말풍선 꼬리 -->
+    <path d="M 1154 504 L 1165 510 L 1154 516 Z" fill="rgba(37,99,235,0.15)"/>
+    <text x="942" y="422" font-family="'Malgun Gothic','Apple SD Gothic Neo',sans-serif" font-size="10" fill="#60a5fa" font-weight="600">AI 구조화 응답</text>
+    <!-- 구조화된 내용 시뮬레이션 -->
+    <rect x="942" y="430" width="90" height="7" rx="3" fill="rgba(96,165,250,0.6)"/>
+    <rect x="942" y="444" width="168" height="6" rx="3" fill="rgba(255,255,255,0.3)"/>
+    <rect x="942" y="456" width="148" height="6" rx="3" fill="rgba(255,255,255,0.3)"/>
+    <rect x="942" y="468" width="158" height="6" rx="3" fill="rgba(255,255,255,0.3)"/>
+    <rect x="942" y="482" width="90" height="7" rx="3" fill="rgba(96,165,250,0.6)"/>
+    <rect x="942" y="496" width="148" height="6" rx="3" fill="rgba(255,255,255,0.3)"/>
+    <rect x="942" y="508" width="120" height="6" rx="3" fill="rgba(255,255,255,0.3)"/>
+    <text x="942" y="534" font-family="'Malgun Gothic','Apple SD Gothic Neo',sans-serif" font-size="10" fill="#22c55e">즉시 활용 가능</text>
+
+    <!-- 성과 뱃지 -->
+    <rect x="618" y="560" width="530" height="40" rx="10" fill="rgba(34,197,94,0.08)" stroke="rgba(34,197,94,0.2)" stroke-width="1"/>
+    <text x="883" y="585" text-anchor="middle" font-family="'Malgun Gothic','Apple SD Gothic Neo',sans-serif" font-size="13" fill="#22c55e">업무 시간 90% 단축 · 품질 일관성 100% 확보</text>
   </g>
 
-  <!-- URL -->
-  <text x="60" y="632" font-family="sans-serif" font-size="14" fill="#3b5998">jaengseung-made.com</text>
-
-  <!-- 오른쪽 Before/After 패널 -->
-  <!-- Before 영역 -->
-  <text x="634" y="86" font-family="'Malgun Gothic',sans-serif" font-size="14" font-weight="700" fill="#ef4444">❌  BEFORE — 일반 프롬프트</text>
-  <rect x="626" y="100" width="546" height="226" rx="18" fill="url(#badGradPr)" stroke="#374151" stroke-width="1" filter="url(#panelShadPr)"/>
-
-  <!-- 사용자 메시지 (오른쪽 말풍선) -->
-  <rect x="862" y="118" width="288" height="48" rx="12" fill="#374151"/>
-  <text x="878" y="138" font-family="'Malgun Gothic',sans-serif" font-size="14" fill="#e5e7eb">보고서 써줘</text>
-  <text x="878" y="158" font-family="'Malgun Gothic',sans-serif" font-size="11" fill="#9ca3af">(프롬프트 7글자)</text>
-
-  <!-- AI 응답 (왼쪽 말풍선) -->
-  <rect x="640" y="182" width="334" height="126" rx="12" fill="#1f2937"/>
-  <text x="660" y="204" font-family="'Malgun Gothic',sans-serif" font-size="13" fill="#9ca3af">보고서를 작성해 드리겠습니다.</text>
-  <text x="660" y="226" font-family="'Malgun Gothic',sans-serif" font-size="13" fill="#9ca3af">제목: 보고서</text>
-  <text x="660" y="248" font-family="'Malgun Gothic',sans-serif" font-size="13" fill="#9ca3af">내용: [내용을 입력해주세요]</text>
-  <text x="660" y="270" font-family="'Malgun Gothic',sans-serif" font-size="13" fill="#6b7280">결론: [결론을 입력해주세요]</text>
-  <text x="660" y="294" font-family="'Malgun Gothic',sans-serif" font-size="12" fill="#ef4444">→ 쓸모없는 빈 템플릿 반환</text>
-
-  <!-- After 영역 -->
-  <text x="634" y="358" font-family="'Malgun Gothic',sans-serif" font-size="14" font-weight="700" fill="#34d399">✅  AFTER — 최적화 프롬프트</text>
-  <rect x="626" y="374" width="546" height="256" rx="18" fill="url(#goodGradPr)" stroke="#7c3aed" stroke-width="2" filter="url(#bubbleShadPr)"/>
-
-  <!-- 최적화 프롬프트 박스 -->
-  <rect x="832" y="390" width="322" height="110" rx="14" fill="#312e81"/>
-  <text x="852" y="412" font-family="'Malgun Gothic',sans-serif" font-size="12" fill="#c4b5fd">[역할] 5년 경력 경영분석가</text>
-  <text x="852" y="432" font-family="'Malgun Gothic',sans-serif" font-size="12" fill="#c4b5fd">[배경] 임원 보고용, 3분 이내</text>
-  <text x="852" y="452" font-family="'Malgun Gothic',sans-serif" font-size="12" fill="#c4b5fd">[형식] 요약→현황→제언</text>
-  <text x="852" y="472" font-family="'Malgun Gothic',sans-serif" font-size="12" fill="#c4b5fd">[제약] 불필요한 미사여구 제거</text>
-  <text x="852" y="492" font-family="'Malgun Gothic',sans-serif" font-size="11" fill="#7c3aed">← 최적화 프롬프트 (118글자)</text>
-
-  <!-- AI 응답 (좋은 버전) -->
-  <rect x="640" y="516" width="352" height="100" rx="14" fill="#1e1b4b" stroke="#7c3aed" stroke-width="1.5"/>
-  <text x="660" y="540" font-family="'Malgun Gothic',sans-serif" font-size="13" fill="#e2e8f0">📋 [임원 보고 요약]</text>
-  <text x="660" y="560" font-family="'Malgun Gothic',sans-serif" font-size="13" fill="#c4b5fd">▶ 핵심 수치: 매출 12% 성장</text>
-  <text x="660" y="580" font-family="'Malgun Gothic',sans-serif" font-size="13" fill="#c4b5fd">▶ 리스크: 원가 상승 3건 확인</text>
-  <text x="660" y="600" font-family="'Malgun Gothic',sans-serif" font-size="12" fill="#34d399">→ 즉시 활용 가능한 임원 보고서 완성!</text>
-
   <!-- 하단 바 -->
-  <rect x="0" y="638" width="1200" height="37" fill="#3b0764"/>
+  <rect x="0" y="638" width="1200" height="37" fill="url(#pr-bottomBar)"/>
-  <text x="600" y="662" text-anchor="middle" font-family="'Malgun Gothic','Apple SD Gothic Neo',sans-serif" font-size="14" font-weight="600" fill="#ffffff">ChatGPT · Claude · Gemini 업무 특화 프롬프트 설계  ·  납기 보장 · AS포함  ·  jaengseung-made.com</text>
+  <text x="600" y="662" text-anchor="middle" font-family="'Malgun Gothic','Apple SD Gothic Neo',sans-serif" font-size="14" font-weight="600" fill="white">jaengseung-made.vercel.app — AI 프롬프트 전문 설계</text>
 </svg>

public/marketing/thumb-saju.svg

@@ -1,227 +1,281 @@
 <svg xmlns="http://www.w3.org/2000/svg" width="1200" height="675" viewBox="0 0 1200 675">
   <defs>
-    <linearGradient id="bgSj" x1="0%" y1="0%" x2="100%" y2="100%">
+    <linearGradient id="sj-bgGrad" x1="0%" y1="0%" x2="100%" y2="100%">
-      <stop offset="0%" style="stop-color:#0e0720"/>
+      <stop offset="0%" stop-color="#0e0720"/>
-      <stop offset="50%" style="stop-color:#1a0a3a"/>
+      <stop offset="100%" stop-color="#04102b"/>
-      <stop offset="100%" style="stop-color:#04102b"/>
     </linearGradient>
-    <linearGradient id="headSj" x1="0%" y1="0%" x2="100%" y2="0%">
+    <radialGradient id="sj-purpleGlow" cx="72%" cy="45%" r="42%">
-      <stop offset="0%" style="stop-color:#c4b5fd"/>
+      <stop offset="0%" stop-color="#7c3aed" stop-opacity="0.14"/>
-      <stop offset="100%" style="stop-color:#a78bfa"/>
+      <stop offset="100%" stop-color="#7c3aed" stop-opacity="0.0"/>
-    </linearGradient>
-    <linearGradient id="goldSj" x1="0%" y1="0%" x2="100%" y2="0%">
-      <stop offset="0%" style="stop-color:#fde68a"/>
-      <stop offset="100%" style="stop-color:#f59e0b"/>
-    </linearGradient>
-    <linearGradient id="priceSj" x1="0%" y1="0%" x2="100%" y2="100%">
-      <stop offset="0%" style="stop-color:#4c1d95"/>
-      <stop offset="100%" style="stop-color:#7c3aed"/>
-    </linearGradient>
-    <linearGradient id="pillarGrad" x1="0%" y1="0%" x2="0%" y2="100%">
-      <stop offset="0%" style="stop-color:#1e1b4b"/>
-      <stop offset="100%" style="stop-color:#0e0720"/>
-    </linearGradient>
-    <radialGradient id="glowSj" cx="70%" cy="50%" r="55%">
-      <stop offset="0%" style="stop-color:#7c3aed;stop-opacity:0.2"/>
-      <stop offset="100%" style="stop-color:#7c3aed;stop-opacity:0"/>
     </radialGradient>
-    <radialGradient id="orb" cx="40%" cy="35%" r="60%">
+    <linearGradient id="sj-badgeGrad" x1="0%" y1="0%" x2="100%" y2="0%">
-      <stop offset="0%" style="stop-color:#312e81"/>
+      <stop offset="0%" stop-color="#3b0764"/>
-      <stop offset="100%" style="stop-color:#0e0720"/>
+      <stop offset="100%" stop-color="#4c1d95"/>
-    </radialGradient>
+    </linearGradient>
-    <filter id="glowSjF">
+    <linearGradient id="sj-panelGrad" x1="0%" y1="0%" x2="0%" y2="100%">
-      <feGaussianBlur stdDeviation="6" result="blur"/>
+      <stop offset="0%" stop-color="#1a0a30"/>
-      <feMerge><feMergeNode in="blur"/><feMergeNode in="SourceGraphic"/></feMerge>
+      <stop offset="100%" stop-color="#0a0a1e"/>
-    </filter>
+    </linearGradient>
-    <filter id="panelShadSj">
+    <linearGradient id="sj-bottomBar" x1="0%" y1="0%" x2="100%" y2="0%">
-      <feDropShadow dx="0" dy="12" stdDeviation="22" flood-color="#000" flood-opacity="0.55"/>
+      <stop offset="0%" stop-color="#3b0764"/>
-    </filter>
+      <stop offset="100%" stop-color="#04102b"/>
+    </linearGradient>
+    <!-- Pillar card gradients -->
+    <linearGradient id="sj-pillarNorm" x1="0%" y1="0%" x2="0%" y2="100%">
+      <stop offset="0%" stop-color="#1e1040"/>
+      <stop offset="100%" stop-color="#14082e"/>
+    </linearGradient>
+    <linearGradient id="sj-pillarActive" x1="0%" y1="0%" x2="0%" y2="100%">
+      <stop offset="0%" stop-color="#2d1060"/>
+      <stop offset="100%" stop-color="#1a0840"/>
+    </linearGradient>
+    <!-- Ohaeng bar gradients -->
+    <linearGradient id="sj-woodBar" x1="0%" y1="0%" x2="100%" y2="0%">
+      <stop offset="0%" stop-color="#15803d"/>
+      <stop offset="100%" stop-color="#4ade80"/>
+    </linearGradient>
+    <linearGradient id="sj-fireBar" x1="0%" y1="0%" x2="100%" y2="0%">
+      <stop offset="0%" stop-color="#b91c1c"/>
+      <stop offset="100%" stop-color="#f87171"/>
+    </linearGradient>
+    <linearGradient id="sj-earthBar" x1="0%" y1="0%" x2="100%" y2="0%">
+      <stop offset="0%" stop-color="#a16207"/>
+      <stop offset="100%" stop-color="#fbbf24"/>
+    </linearGradient>
+    <linearGradient id="sj-metalBar" x1="0%" y1="0%" x2="100%" y2="0%">
+      <stop offset="0%" stop-color="#475569"/>
+      <stop offset="100%" stop-color="#cbd5e1"/>
+    </linearGradient>
+    <linearGradient id="sj-waterBar" x1="0%" y1="0%" x2="100%" y2="0%">
+      <stop offset="0%" stop-color="#1d4ed8"/>
+      <stop offset="100%" stop-color="#60a5fa"/>
+    </linearGradient>
   </defs>
 
-  <!-- 배경 -->
+  <!-- Background -->
-  <rect width="1200" height="675" fill="url(#bgSj)"/>
+  <rect width="1200" height="675" fill="url(#sj-bgGrad)"/>
-  <rect width="1200" height="675" fill="url(#glowSj)"/>
+  <rect width="1200" height="675" fill="url(#sj-purpleGlow)"/>
 
-  <!-- 별 배경 효과 -->
+  <!-- Organic arc background -->
-  <circle cx="680" cy="120" r="1.5" fill="#c4b5fd" opacity="0.6"/>
+  <path d="M 614 0 C 700 80 800 40 900 120 C 1000 200 1100 150 1200 200 L 1200 0 Z" fill="rgba(124,58,237,0.05)"/>
-  <circle cx="720" cy="80" r="1" fill="#a78bfa" opacity="0.5"/>
-  <circle cx="760" cy="140" r="1.5" fill="#c4b5fd" opacity="0.4"/>
-  <circle cx="800" cy="100" r="1" fill="#ddd6fe" opacity="0.6"/>
-  <circle cx="840" cy="60" r="2" fill="#a78bfa" opacity="0.3"/>
-  <circle cx="900" cy="120" r="1.5" fill="#c4b5fd" opacity="0.5"/>
-  <circle cx="950" cy="70" r="1" fill="#ddd6fe" opacity="0.4"/>
-  <circle cx="1000" cy="100" r="1.5" fill="#a78bfa" opacity="0.6"/>
-  <circle cx="1050" cy="50" r="1" fill="#c4b5fd" opacity="0.5"/>
-  <circle cx="1100" cy="90" r="2" fill="#ddd6fe" opacity="0.3"/>
-  <circle cx="650" cy="200" r="1" fill="#a78bfa" opacity="0.5"/>
-  <circle cx="700" cy="240" r="1.5" fill="#c4b5fd" opacity="0.4"/>
-  <circle cx="730" cy="580" r="1" fill="#a78bfa" opacity="0.5"/>
-  <circle cx="780" cy="560" r="1.5" fill="#c4b5fd" opacity="0.4"/>
-  <circle cx="820" cy="600" r="1" fill="#ddd6fe" opacity="0.5"/>
 
-  <!-- 배경 한자 장식 (은은하게) -->
+  <!-- Stars (varied sizes and opacities) -->
-  <text x="80" y="580" font-family="'Malgun Gothic',sans-serif" font-size="80" fill="#1a0a3a" opacity="0.6">天</text>
+  <circle cx="42" cy="28" r="1.5" fill="rgba(255,255,255,0.7)"/>
-  <text x="400" y="620" font-family="'Malgun Gothic',sans-serif" font-size="60" fill="#1a0a3a" opacity="0.4">命</text>
+  <circle cx="120" cy="55" r="1.0" fill="rgba(255,255,255,0.5)"/>
+  <circle cx="198" cy="18" r="2.0" fill="rgba(255,255,255,0.8)"/>
+  <circle cx="310" cy="42" r="1.2" fill="rgba(255,255,255,0.55)"/>
+  <circle cx="420" cy="22" r="1.5" fill="rgba(255,255,255,0.6)"/>
+  <circle cx="490" cy="60" r="1.0" fill="rgba(255,255,255,0.45)"/>
+  <circle cx="540" cy="30" r="1.8" fill="rgba(255,255,255,0.7)"/>
+  <circle cx="90" cy="110" r="1.2" fill="rgba(255,255,255,0.5)"/>
+  <circle cx="170" cy="140" r="0.9" fill="rgba(255,255,255,0.4)"/>
+  <circle cx="250" cy="95" r="1.6" fill="rgba(255,255,255,0.65)"/>
+  <circle cx="360" cy="130" r="1.1" fill="rgba(255,255,255,0.5)"/>
+  <circle cx="460" cy="105" r="1.4" fill="rgba(255,255,255,0.6)"/>
+  <circle cx="30" cy="200" r="1.0" fill="rgba(255,255,255,0.45)"/>
+  <circle cx="148" cy="220" r="1.7" fill="rgba(255,255,255,0.7)"/>
+  <circle cx="330" cy="210" r="0.9" fill="rgba(255,255,255,0.4)"/>
+  <circle cx="475" cy="185" r="1.3" fill="rgba(255,255,255,0.55)"/>
+  <circle cx="68" cy="310" r="1.2" fill="rgba(255,255,255,0.5)"/>
+  <circle cx="200" cy="340" r="0.8" fill="rgba(255,255,255,0.38)"/>
+  <circle cx="390" cy="280" r="1.5" fill="rgba(255,255,255,0.6)"/>
+  <circle cx="520" cy="320" r="1.0" fill="rgba(255,255,255,0.45)"/>
+  <circle cx="140" cy="420" r="1.4" fill="rgba(255,255,255,0.55)"/>
+  <circle cx="285" cy="445" r="0.9" fill="rgba(255,255,255,0.4)"/>
+  <circle cx="440" cy="400" r="1.6" fill="rgba(255,255,255,0.65)"/>
+  <circle cx="80" cy="520" r="1.1" fill="rgba(255,255,255,0.48)"/>
+  <circle cx="240" cy="560" r="1.3" fill="rgba(255,255,255,0.52)"/>
+  <circle cx="400" cy="530" r="0.8" fill="rgba(255,255,255,0.38)"/>
 
-  <!-- 왼쪽 콘텐츠 -->
+  <!-- Background Kanji decoration -->
-  <!-- 뱃지 -->
+  <text x="80" y="390" font-family="serif" font-size="160" fill="rgba(124,58,237,0.04)" font-weight="900">天</text>
-  <rect x="60" y="62" width="290" height="40" rx="20" fill="#1e1b4b" stroke="#7c3aed" stroke-width="1.5"/>
+  <text x="380" y="480" font-family="serif" font-size="120" fill="rgba(124,58,237,0.03)" font-weight="900">命</text>
-  <text x="82" y="87" font-family="'Malgun Gothic',sans-serif" font-size="14" font-weight="700" fill="#c4b5fd">✨ 전통 사주 × AI 딥러닝 분석</text>
 
-  <!-- 헤드라인 -->
+  <!-- ===== LEFT CONTENT ===== -->
-  <text x="60" y="164" font-family="'Malgun Gothic','Apple SD Gothic Neo',sans-serif" font-size="52" font-weight="900" fill="#ffffff">타고난 운명을</text>
-  <text x="60" y="228" font-family="'Malgun Gothic','Apple SD Gothic Neo',sans-serif" font-size="52" font-weight="900" fill="url(#headSj)">AI가 읽어드립니다</text>
-  <text x="60" y="274" font-family="'Malgun Gothic','Apple SD Gothic Neo',sans-serif" font-size="19" fill="#94a3b8">사주팔자 완전 해석 · 12가지 인생 항목 분석</text>
 
-  <!-- 12항목 분석 목록 -->
+  <!-- Badge -->
-  <g font-family="'Malgun Gothic',sans-serif" font-size="14" fill="#94a3b8">
+  <rect x="52" y="52" width="232" height="34" rx="17" fill="url(#sj-badgeGrad)" stroke="#7c3aed" stroke-width="1" stroke-opacity="0.6"/>
-    <text x="60" y="310">🔮 성격·적성  ·  💼 직업운  ·  💰 재물운  ·  ❤️ 애정운</text>
+  <text x="168" y="74" font-family="'Malgun Gothic','Apple SD Gothic Neo',sans-serif" font-size="12.5" fill="#c4b5fd" text-anchor="middle" font-weight="600">전통 사주 × AI 딥러닝 분석</text>
-    <text x="60" y="340">🏠 가정운  ·  ⚕️ 건강운  ·  📅 연간운  ·  ✨ 용신·기신</text>
-    <text x="60" y="370">🌟 대운 흐름  ·  🤝 인연 분석  ·  ⚠️ 주의 시기  ·  💡 조언</text>
-  </g>
 
-  <!-- 차별화 포인트 -->
+  <!-- Headline -->
-  <rect x="60" y="392" width="520" height="80" rx="14" fill="#0e0720" stroke="#1e1b4b" stroke-width="1"/>
+  <text x="52" y="142" font-family="'Malgun Gothic','Apple SD Gothic Neo',sans-serif" font-size="50" fill="white" font-weight="800" letter-spacing="-1">타고난 운명을</text>
-  <g font-family="'Malgun Gothic',sans-serif">
+  <text x="52" y="200" font-family="'Malgun Gothic','Apple SD Gothic Neo',sans-serif" font-size="50" fill="#a78bfa" font-weight="800" letter-spacing="-1">AI가 읽어드립니다</text>
-    <circle cx="88" cy="420" r="16" fill="#1e1b4b" stroke="#7c3aed" stroke-width="1"/>
-    <text x="88" y="426" text-anchor="middle" font-size="14">🤖</text>
-    <text x="114" y="416" font-size="14" font-weight="700" fill="#e2e8f0">Gemini AI 해석 엔진</text>
-    <text x="114" y="434" font-size="12" fill="#64748b">단순 운세가 아닌 근거 있는 해석</text>
 
-    <circle cx="88" cy="460" r="16" fill="#1e1b4b" stroke="#7c3aed" stroke-width="1"/>
+  <!-- 12 analysis items text -->
-    <text x="88" y="466" text-anchor="middle" font-size="14">📜</text>
+  <rect x="52" y="222" width="490" height="86" rx="12" fill="rgba(124,58,237,0.08)" stroke="rgba(124,58,237,0.25)" stroke-width="1"/>
-    <text x="114" y="456" font-size="14" font-weight="700" fill="#e2e8f0">전통 사주 학문 기반</text>
+  <text x="297" y="248" font-family="'Malgun Gothic','Apple SD Gothic Neo',sans-serif" font-size="12.5" fill="rgba(255,255,255,0.65)" text-anchor="middle">성격·적성  ·  직업운  ·  재물운  ·  애정운</text>
-    <text x="114" y="474" font-size="12" fill="#64748b">오행·천간지지·신살 완전 적용</text>
+  <text x="297" y="272" font-family="'Malgun Gothic','Apple SD Gothic Neo',sans-serif" font-size="12.5" fill="rgba(255,255,255,0.65)" text-anchor="middle">가정운  ·  건강운  ·  연간운  ·  용신·기신</text>
-  </g>
+  <text x="297" y="296" font-family="'Malgun Gothic','Apple SD Gothic Neo',sans-serif" font-size="12.5" fill="rgba(255,255,255,0.65)" text-anchor="middle">대운 흐름  ·  인연 분석  ·  주의 시기  ·  조언</text>
 
-  <!-- 가격 뱃지 -->
+  <!-- Differentiation points -->
-  <rect x="60" y="488" width="256" height="72" rx="16" fill="url(#priceSj)"/>
+  <rect x="52" y="324" width="232" height="72" rx="12" fill="rgba(255,255,255,0.04)" stroke="rgba(124,58,237,0.25)" stroke-width="1"/>
-  <text x="188" y="515" text-anchor="middle" font-family="'Malgun Gothic',sans-serif" font-size="13" fill="#ddd6fe">AI 상세 리포트</text>
+  <!-- AI icon: circle + lines -->
-  <text x="188" y="545" text-anchor="middle" font-family="'Malgun Gothic',sans-serif" font-size="32" font-weight="900" fill="#ffffff">4,900원</text>
+  <circle cx="74" cy="354" r="10" stroke="#a78bfa" stroke-width="1.5" fill="none"/>
+  <line x1="74" y1="344" x2="74" y2="348" stroke="#a78bfa" stroke-width="1.5" stroke-linecap="round"/>
+  <line x1="84" y1="354" x2="80" y2="354" stroke="#a78bfa" stroke-width="1.5" stroke-linecap="round"/>
+  <line x1="64" y1="354" x2="68" y2="354" stroke="#a78bfa" stroke-width="1.5" stroke-linecap="round"/>
+  <line x1="74" y1="364" x2="74" y2="360" stroke="#a78bfa" stroke-width="1.5" stroke-linecap="round"/>
+  <text x="94" y="352" font-family="'Malgun Gothic','Apple SD Gothic Neo',sans-serif" font-size="12.5" fill="white" font-weight="600">Gemini AI 해석 엔진</text>
+  <text x="94" y="370" font-family="'Malgun Gothic','Apple SD Gothic Neo',sans-serif" font-size="10.5" fill="rgba(255,255,255,0.42)">최신 AI 모델 적용</text>
 
-  <!-- 무료 기본 분석 안내 -->
+  <rect x="296" y="324" width="232" height="72" rx="12" fill="rgba(255,255,255,0.04)" stroke="rgba(124,58,237,0.25)" stroke-width="1"/>
-  <rect x="60" y="574" width="520" height="36" rx="10" fill="#1e1b4b" opacity="0.85"/>
+  <!-- Book icon -->
-  <text x="80" y="597" font-family="'Malgun Gothic',sans-serif" font-size="13" fill="#a78bfa">🎁 기본 사주팔자 계산·오행 분석은 무료 제공</text>
+  <rect x="316" y="344" width="16" height="20" rx="2" stroke="#a78bfa" stroke-width="1.5" fill="none"/>
+  <line x1="316" y1="350" x2="332" y2="350" stroke="#a78bfa" stroke-width="1" stroke-opacity="0.5"/>
+  <line x1="316" y1="355" x2="332" y2="355" stroke="#a78bfa" stroke-width="1" stroke-opacity="0.5"/>
+  <line x1="316" y1="360" x2="328" y2="360" stroke="#a78bfa" stroke-width="1" stroke-opacity="0.5"/>
+  <text x="340" y="352" font-family="'Malgun Gothic','Apple SD Gothic Neo',sans-serif" font-size="12.5" fill="white" font-weight="600">전통 사주 학문 기반</text>
+  <text x="340" y="370" font-family="'Malgun Gothic','Apple SD Gothic Neo',sans-serif" font-size="10.5" fill="rgba(255,255,255,0.42)">정통 명리학 이론 적용</text>
 
-  <!-- URL -->
+  <!-- Price badge -->
-  <text x="60" y="632" font-family="sans-serif" font-size="14" fill="#3b5998">jaengseung-made.com</text>
+  <rect x="52" y="416" width="200" height="84" rx="14" fill="rgba(124,58,237,0.2)" stroke="#7c3aed" stroke-width="2"/>
+  <text x="152" y="442" font-family="'Malgun Gothic','Apple SD Gothic Neo',sans-serif" font-size="12" fill="#c4b5fd" text-anchor="middle">12항목 전체 리포트</text>
+  <text x="152" y="480" font-family="'Malgun Gothic','Apple SD Gothic Neo',sans-serif" font-size="34" fill="white" text-anchor="middle" font-weight="800">4,900<tspan font-size="16" fill="#c4b5fd">원</tspan></text>
 
-  <!-- 오른쪽 사주팔자 패널 -->
+  <text x="52" y="524" font-family="'Malgun Gothic','Apple SD Gothic Neo',sans-serif" font-size="11.5" fill="#86efac">기본 사주 분석은 무료로 제공됩니다</text>
-  <rect x="614" y="52" width="558" height="558" rx="22" fill="#0a0618" stroke="#1e1b4b" stroke-width="1.5" filter="url(#panelShadSj)"/>
-  <!-- 상단 장식선 -->
-  <line x1="634" y1="104" x2="1152" y2="104" stroke="#1e1b4b" stroke-width="1"/>
 
-  <!-- 패널 타이틀 -->
+  <!-- Disclaimer -->
-  <text x="893" y="84" text-anchor="middle" font-family="'Malgun Gothic',sans-serif" font-size="15" font-weight="700" fill="url(#goldSj)">✦ 사주 분석 결과 ✦</text>
+  <text x="52" y="558" font-family="'Malgun Gothic','Apple SD Gothic Neo',sans-serif" font-size="10.5" fill="rgba(255,255,255,0.28)">* 사주 분석은 참고용이며 실제 결과를 보장하지 않습니다.</text>
+  <text x="52" y="576" font-family="'Malgun Gothic','Apple SD Gothic Neo',sans-serif" font-size="10.5" fill="rgba(255,255,255,0.28)">* AI 해석 결과는 전문 상담을 대체하지 않습니다.</text>
 
-  <!-- 사주 팔자 표 (4기둥) -->
+  <!-- ===== RIGHT: SAJU PANEL ===== -->
-  <!-- 헤더 -->
-  <text x="680" y="132" text-anchor="middle" font-family="'Malgun Gothic',sans-serif" font-size="12" fill="#64748b">시주(時柱)</text>
-  <text x="790" y="132" text-anchor="middle" font-family="'Malgun Gothic',sans-serif" font-size="12" fill="#64748b">일주(日柱)</text>
-  <text x="900" y="132" text-anchor="middle" font-family="'Malgun Gothic',sans-serif" font-size="12" fill="#64748b">월주(月柱)</text>
-  <text x="1010" y="132" text-anchor="middle" font-family="'Malgun Gothic',sans-serif" font-size="12" fill="#64748b">년주(年柱)</text>
 
-  <!-- 기둥 1: 시주 -->
+  <rect x="610" y="30" width="552" height="610" rx="22" fill="url(#sj-panelGrad)" stroke="rgba(124,58,237,0.35)" stroke-width="1.5"/>
-  <rect x="642" y="144" width="76" height="90" rx="12" fill="url(#pillarGrad)" stroke="#1e1b4b" stroke-width="1.5"/>
-  <text x="680" y="186" text-anchor="middle" font-family="'Malgun Gothic',sans-serif" font-size="32" font-weight="700" fill="#60a5fa">庚</text>
-  <text x="680" y="210" text-anchor="middle" font-family="'Malgun Gothic',sans-serif" font-size="12" fill="#475569">경(庚)</text>
-  <rect x="642" y="248" width="76" height="90" rx="12" fill="url(#pillarGrad)" stroke="#1e1b4b" stroke-width="1.5"/>
-  <text x="680" y="290" text-anchor="middle" font-family="'Malgun Gothic',sans-serif" font-size="32" font-weight="700" fill="#60a5fa">申</text>
-  <text x="680" y="314" text-anchor="middle" font-family="'Malgun Gothic',sans-serif" font-size="12" fill="#475569">신(申) · 금(金)</text>
 
-  <!-- 기둥 2: 일주 (하이라이트) -->
+  <!-- Panel header -->
-  <rect x="752" y="144" width="76" height="90" rx="12" fill="#1e1b4b" stroke="#7c3aed" stroke-width="2"/>
+  <rect x="610" y="30" width="552" height="56" rx="22" fill="rgba(124,58,237,0.2)"/>
-  <text x="790" y="186" text-anchor="middle" font-family="'Malgun Gothic',sans-serif" font-size="32" font-weight="700" fill="#c4b5fd">癸</text>
+  <rect x="610" y="60" width="552" height="26" fill="rgba(124,58,237,0.2)"/>
-  <text x="790" y="210" text-anchor="middle" font-family="'Malgun Gothic',sans-serif" font-size="12" fill="#a78bfa">계(癸)</text>
+  <text x="886" y="64" font-family="'Malgun Gothic','Apple SD Gothic Neo',sans-serif" font-size="16" fill="#fbbf24" text-anchor="middle" font-weight="700">사주 분석 결과</text>
-  <rect x="752" y="248" width="76" height="90" rx="12" fill="#1e1b4b" stroke="#7c3aed" stroke-width="2"/>
+  <text x="886" y="82" font-family="'Malgun Gothic','Apple SD Gothic Neo',sans-serif" font-size="11" fill="rgba(255,255,255,0.4)" text-anchor="middle">1992년 12월 23일 · 오후 4시 30분 · 남성</text>
-  <text x="790" y="290" text-anchor="middle" font-family="'Malgun Gothic',sans-serif" font-size="32" font-weight="700" fill="#c4b5fd">酉</text>
-  <text x="790" y="314" text-anchor="middle" font-family="'Malgun Gothic',sans-serif" font-size="12" fill="#a78bfa">유(酉) · 금(金)</text>
-  <!-- 일주 뱃지 -->
-  <rect x="740" y="130" width="100" height="20" rx="10" fill="#7c3aed"/>
-  <text x="790" y="144" text-anchor="middle" font-family="'Malgun Gothic',sans-serif" font-size="10" font-weight="700" fill="#fff">나의 일주</text>
 
-  <!-- 기둥 3: 월주 -->
+  <!-- 4 Pillars (시주/일주/월주/년주) - right to left order display -->
-  <rect x="862" y="144" width="76" height="90" rx="12" fill="url(#pillarGrad)" stroke="#1e1b4b" stroke-width="1.5"/>
+  <!-- Year pillar (년주) -->
-  <text x="900" y="186" text-anchor="middle" font-family="'Malgun Gothic',sans-serif" font-size="32" font-weight="700" fill="#34d399">壬</text>
+  <rect x="626" y="100" width="118" height="130" rx="12" fill="url(#sj-pillarNorm)" stroke="rgba(124,58,237,0.3)" stroke-width="1"/>
-  <text x="900" y="210" text-anchor="middle" font-family="'Malgun Gothic',sans-serif" font-size="12" fill="#475569">임(壬)</text>
+  <text x="685" y="122" font-family="'Malgun Gothic','Apple SD Gothic Neo',sans-serif" font-size="11" fill="rgba(255,255,255,0.4)" text-anchor="middle">년주 年柱</text>
-  <rect x="862" y="248" width="76" height="90" rx="12" fill="url(#pillarGrad)" stroke="#1e1b4b" stroke-width="1.5"/>
+  <!-- Subtle grid micro-pattern -->
-  <text x="900" y="290" text-anchor="middle" font-family="'Malgun Gothic',sans-serif" font-size="32" font-weight="700" fill="#34d399">子</text>
+  <rect x="636" y="130" width="98" height="42" rx="8" fill="rgba(255,255,255,0.04)"/>
-  <text x="900" y="314" text-anchor="middle" font-family="'Malgun Gothic',sans-serif" font-size="12" fill="#475569">자(子) · 수(水)</text>
+  <text x="685" y="158" font-family="serif" font-size="36" fill="#60a5fa" text-anchor="middle" font-weight="700">壬</text>
+  <rect x="636" y="180" width="98" height="42" rx="8" fill="rgba(255,255,255,0.04)"/>
+  <text x="685" y="208" font-family="serif" font-size="36" fill="#60a5fa" text-anchor="middle" font-weight="700">申</text>
+  <text x="685" y="222" font-family="'Malgun Gothic','Apple SD Gothic Neo',sans-serif" font-size="9.5" fill="rgba(255,255,255,0.3)" text-anchor="middle">임 · 신</text>
 
-  <!-- 기둥 4: 년주 -->
+  <!-- Month pillar (월주) -->
-  <rect x="972" y="144" width="76" height="90" rx="12" fill="url(#pillarGrad)" stroke="#1e1b4b" stroke-width="1.5"/>
+  <rect x="754" y="100" width="118" height="130" rx="12" fill="url(#sj-pillarNorm)" stroke="rgba(124,58,237,0.3)" stroke-width="1"/>
-  <text x="1010" y="186" text-anchor="middle" font-family="'Malgun Gothic',sans-serif" font-size="32" font-weight="700" fill="#fbbf24">壬</text>
+  <text x="813" y="122" font-family="'Malgun Gothic','Apple SD Gothic Neo',sans-serif" font-size="11" fill="rgba(255,255,255,0.4)" text-anchor="middle">월주 月柱</text>
-  <text x="1010" y="210" text-anchor="middle" font-family="'Malgun Gothic',sans-serif" font-size="12" fill="#475569">임(壬)</text>
+  <rect x="764" y="130" width="98" height="42" rx="8" fill="rgba(255,255,255,0.04)"/>
-  <rect x="972" y="248" width="76" height="90" rx="12" fill="url(#pillarGrad)" stroke="#1e1b4b" stroke-width="1.5"/>
+  <text x="813" y="158" font-family="serif" font-size="36" fill="#60a5fa" text-anchor="middle" font-weight="700">壬</text>
-  <text x="1010" y="290" text-anchor="middle" font-family="'Malgun Gothic',sans-serif" font-size="32" font-weight="700" fill="#fbbf24">申</text>
+  <rect x="764" y="180" width="98" height="42" rx="8" fill="rgba(255,255,255,0.04)"/>
-  <text x="1010" y="314" text-anchor="middle" font-family="'Malgun Gothic',sans-serif" font-size="12" fill="#475569">신(申) · 금(金)</text>
+  <text x="813" y="208" font-family="serif" font-size="36" fill="#60a5fa" text-anchor="middle" font-weight="700">子</text>
+  <text x="813" y="222" font-family="'Malgun Gothic','Apple SD Gothic Neo',sans-serif" font-size="9.5" fill="rgba(255,255,255,0.3)" text-anchor="middle">임 · 자</text>
 
-  <!-- 오행 그래프 -->
+  <!-- Day pillar (일주) - ACTIVE with purple border -->
-  <line x1="634" y1="356" x2="1152" y2="356" stroke="#1e1b4b" stroke-width="1"/>
+  <rect x="882" y="96" width="122" height="138" rx="12" fill="url(#sj-pillarActive)" stroke="#7c3aed" stroke-width="2.5"/>
-  <text x="893" y="380" text-anchor="middle" font-family="'Malgun Gothic',sans-serif" font-size="13" font-weight="700" fill="#64748b">오행(五行) 분포</text>
+  <rect x="882" y="96" width="122" height="138" rx="12" fill="none" stroke="#a78bfa" stroke-width="1" stroke-opacity="0.4"/>
+  <text x="943" y="116" font-family="'Malgun Gothic','Apple SD Gothic Neo',sans-serif" font-size="11" fill="#c4b5fd" text-anchor="middle" font-weight="600">일주 日柱</text>
+  <text x="943" y="128" font-family="'Malgun Gothic','Apple SD Gothic Neo',sans-serif" font-size="9" fill="#a78bfa" text-anchor="middle">나의 일주</text>
+  <rect x="893" y="132" width="100" height="44" rx="8" fill="rgba(124,58,237,0.15)"/>
+  <text x="943" y="160" font-family="serif" font-size="36" fill="#fbbf24" text-anchor="middle" font-weight="700">癸</text>
+  <rect x="893" y="184" width="100" height="44" rx="8" fill="rgba(124,58,237,0.15)"/>
+  <text x="943" y="212" font-family="serif" font-size="36" fill="#fbbf24" text-anchor="middle" font-weight="700">酉</text>
+  <text x="943" y="226" font-family="'Malgun Gothic','Apple SD Gothic Neo',sans-serif" font-size="9.5" fill="rgba(255,255,255,0.4)" text-anchor="middle">계 · 유</text>
 
-  <g font-family="'Malgun Gothic',sans-serif" font-size="11">
+  <!-- Hour pillar (시주) -->
-    <!-- 목(木) -->
+  <rect x="1014" y="100" width="118" height="130" rx="12" fill="url(#sj-pillarNorm)" stroke="rgba(124,58,237,0.3)" stroke-width="1"/>
-    <text x="654" y="406" fill="#64748b">목(木)</text>
+  <text x="1073" y="122" font-family="'Malgun Gothic','Apple SD Gothic Neo',sans-serif" font-size="11" fill="rgba(255,255,255,0.4)" text-anchor="middle">시주 時柱</text>
-    <rect x="654" y="412" width="80" height="14" rx="4" fill="#0a2010"/>
+  <rect x="1024" y="130" width="98" height="42" rx="8" fill="rgba(255,255,255,0.04)"/>
-    <rect x="654" y="412" width="8" height="14" rx="4" fill="#22c55e"/>
+  <text x="1073" y="158" font-family="serif" font-size="36" fill="#94a3b8" text-anchor="middle" font-weight="700">庚</text>
-    <text x="666" y="424" fill="#22c55e">▪</text>
+  <rect x="1024" y="180" width="98" height="42" rx="8" fill="rgba(255,255,255,0.04)"/>
+  <text x="1073" y="208" font-family="serif" font-size="36" fill="#94a3b8" text-anchor="middle" font-weight="700">申</text>
+  <text x="1073" y="222" font-family="'Malgun Gothic','Apple SD Gothic Neo',sans-serif" font-size="9.5" fill="rgba(255,255,255,0.3)" text-anchor="middle">경 · 신</text>
 
-    <!-- 화(火) -->
+  <!-- Section: Ohaeng distribution -->
-    <text x="754" y="406" fill="#64748b">화(火)</text>
+  <line x1="626" y1="252" x2="1146" y2="252" stroke="rgba(124,58,237,0.25)" stroke-width="1"/>
-    <rect x="754" y="412" width="80" height="14" rx="4" fill="#2a0a00"/>
+  <text x="626" y="272" font-family="'Malgun Gothic','Apple SD Gothic Neo',sans-serif" font-size="12" fill="rgba(255,255,255,0.5)" font-weight="600">오행 분포</text>
-    <rect x="754" y="412" width="6" height="14" rx="4" fill="#ef4444"/>
 
-    <!-- 토(土) -->
+  <!-- Wood 목 -->
-    <text x="854" y="406" fill="#64748b">토(土)</text>
+  <text x="626" y="296" font-family="'Malgun Gothic','Apple SD Gothic Neo',sans-serif" font-size="11" fill="#4ade80">목(木)</text>
-    <rect x="854" y="412" width="80" height="14" rx="4" fill="#1c1200"/>
+  <rect x="668" y="284" width="420" height="14" rx="7" fill="rgba(255,255,255,0.06)"/>
-    <rect x="854" y="412" width="10" height="14" rx="4" fill="#f59e0b"/>
+  <rect x="668" y="284" width="50" height="14" rx="7" fill="url(#sj-woodBar)"/>
+  <text x="1096" y="296" font-family="'Malgun Gothic','Apple SD Gothic Neo',sans-serif" font-size="10" fill="rgba(255,255,255,0.4)" text-anchor="end">12%</text>
 
-    <!-- 금(金) -->
+  <!-- Fire 화 -->
-    <text x="954" y="406" fill="#64748b">금(金)</text>
+  <text x="626" y="318" font-family="'Malgun Gothic','Apple SD Gothic Neo',sans-serif" font-size="11" fill="#f87171">화(火)</text>
-    <rect x="954" y="412" width="80" height="14" rx="4" fill="#1a1800"/>
+  <rect x="668" y="306" width="420" height="14" rx="7" fill="rgba(255,255,255,0.06)"/>
-    <rect x="954" y="412" width="72" height="14" rx="4" fill="#e2e8f0"/>
+  <rect x="668" y="306" width="40" height="14" rx="7" fill="url(#sj-fireBar)"/>
-    <text x="1022" y="424" text-anchor="end" fill="#0f172a" font-weight="700">强</text>
+  <text x="1096" y="318" font-family="'Malgun Gothic','Apple SD Gothic Neo',sans-serif" font-size="10" fill="rgba(255,255,255,0.4)" text-anchor="end">10%</text>
 
-    <!-- 수(水) -->
+  <!-- Earth 토 -->
-    <text x="1054" y="406" fill="#64748b">수(水)</text>
+  <text x="626" y="340" font-family="'Malgun Gothic','Apple SD Gothic Neo',sans-serif" font-size="11" fill="#fbbf24">토(土)</text>
-    <rect x="1054" y="412" width="80" height="14" rx="4" fill="#061428"/>
+  <rect x="668" y="328" width="420" height="14" rx="7" fill="rgba(255,255,255,0.06)"/>
-    <rect x="1054" y="412" width="56" height="14" rx="4" fill="#3b82f6"/>
+  <rect x="668" y="328" width="63" height="14" rx="7" fill="url(#sj-earthBar)"/>
-  </g>
+  <text x="1096" y="340" font-family="'Malgun Gothic','Apple SD Gothic Neo',sans-serif" font-size="10" fill="rgba(255,255,255,0.4)" text-anchor="end">15%</text>
 
-  <!-- AI 분석 항목 그리드 -->
+  <!-- Metal 금 -->
-  <line x1="634" y1="444" x2="1152" y2="444" stroke="#1e1b4b" stroke-width="1"/>
+  <text x="626" y="362" font-family="'Malgun Gothic','Apple SD Gothic Neo',sans-serif" font-size="11" fill="#cbd5e1">금(金)</text>
-  <text x="893" y="466" text-anchor="middle" font-family="'Malgun Gothic',sans-serif" font-size="13" font-weight="700" fill="#64748b">AI 해석 12항목</text>
+  <rect x="668" y="350" width="420" height="14" rx="7" fill="rgba(255,255,255,0.06)"/>
+  <rect x="668" y="350" width="252" height="14" rx="7" fill="url(#sj-metalBar)"/>
+  <text x="1096" y="362" font-family="'Malgun Gothic','Apple SD Gothic Neo',sans-serif" font-size="10" fill="rgba(255,255,255,0.4)" text-anchor="end">60%</text>
 
-  <g font-family="'Malgun Gothic',sans-serif" font-size="12">
+  <!-- Water 수 -->
-    <rect x="640" y="476" width="108" height="30" rx="8" fill="#1e1b4b" stroke="#7c3aed" stroke-width="1"/>
+  <text x="626" y="384" font-family="'Malgun Gothic','Apple SD Gothic Neo',sans-serif" font-size="11" fill="#60a5fa">수(水)</text>
-    <text x="694" y="496" text-anchor="middle" fill="#c4b5fd">🎭 성격·적성</text>
+  <rect x="668" y="372" width="420" height="14" rx="7" fill="rgba(255,255,255,0.06)"/>
-    <rect x="756" y="476" width="108" height="30" rx="8" fill="#1e1b4b" stroke="#7c3aed" stroke-width="1"/>
+  <rect x="668" y="372" width="12" height="14" rx="7" fill="url(#sj-waterBar)"/>
-    <text x="810" y="496" text-anchor="middle" fill="#c4b5fd">💼 직업운</text>
+  <text x="1096" y="384" font-family="'Malgun Gothic','Apple SD Gothic Neo',sans-serif" font-size="10" fill="rgba(255,255,255,0.4)" text-anchor="end">3%</text>
-    <rect x="872" y="476" width="108" height="30" rx="8" fill="#1e1b4b" stroke="#7c3aed" stroke-width="1"/>
-    <text x="926" y="496" text-anchor="middle" fill="#c4b5fd">💰 재물운</text>
-    <rect x="988" y="476" width="108" height="30" rx="8" fill="#1e1b4b" stroke="#7c3aed" stroke-width="1"/>
-    <text x="1042" y="496" text-anchor="middle" fill="#c4b5fd">❤️ 애정운</text>
-    <rect x="1104" y="476" width="40" height="30" rx="8" fill="#1e1b4b"/>
-    <text x="1124" y="496" text-anchor="middle" fill="#475569">+8</text>
 
-    <rect x="640" y="514" width="108" height="30" rx="8" fill="#0e0720" stroke="#1e1b4b" stroke-width="1"/>
+  <!-- Section: 12 AI analysis tags -->
-    <text x="694" y="534" text-anchor="middle" fill="#64748b">📅 연간운</text>
+  <line x1="626" y1="402" x2="1146" y2="402" stroke="rgba(124,58,237,0.25)" stroke-width="1"/>
-    <rect x="756" y="514" width="108" height="30" rx="8" fill="#0e0720" stroke="#1e1b4b" stroke-width="1"/>
+  <text x="626" y="422" font-family="'Malgun Gothic','Apple SD Gothic Neo',sans-serif" font-size="12" fill="rgba(255,255,255,0.5)" font-weight="600">AI 해석 항목</text>
-    <text x="810" y="534" text-anchor="middle" fill="#64748b">⚕️ 건강운</text>
-    <rect x="872" y="514" width="108" height="30" rx="8" fill="#0e0720" stroke="#1e1b4b" stroke-width="1"/>
-    <text x="926" y="534" text-anchor="middle" fill="#64748b">✨ 용신</text>
-    <rect x="988" y="514" width="108" height="30" rx="8" fill="#0e0720" stroke="#1e1b4b" stroke-width="1"/>
-    <text x="1042" y="534" text-anchor="middle" fill="#64748b">🌟 대운</text>
-    <rect x="1104" y="514" width="40" height="30" rx="8" fill="#0e0720"/>
-    <text x="1124" y="534" text-anchor="middle" fill="#1e1b4b">...</text>
-  </g>
 
-  <!-- 결제 후 잠금 해제 표시 -->
+  <!-- Row 1: 4 active tags (purple border) -->
-  <rect x="634" y="552" width="518" height="44" rx="12" fill="url(#priceSj)" opacity="0.9"/>
+  <rect x="626" y="430" width="112" height="28" rx="14" fill="rgba(124,58,237,0.2)" stroke="#7c3aed" stroke-width="1.5"/>
-  <text x="893" y="579" text-anchor="middle" font-family="'Malgun Gothic',sans-serif" font-size="14" font-weight="700" fill="#fff">🔓 4,900원으로 12항목 전체 리포트 잠금 해제</text>
+  <text x="682" y="449" font-family="'Malgun Gothic','Apple SD Gothic Neo',sans-serif" font-size="11" fill="#c4b5fd" text-anchor="middle">성격·적성</text>
 
-  <!-- 하단 바 -->
+  <rect x="746" y="430" width="112" height="28" rx="14" fill="rgba(124,58,237,0.2)" stroke="#7c3aed" stroke-width="1.5"/>
-  <rect x="0" y="638" width="1200" height="37" fill="#4c1d95"/>
+  <text x="802" y="449" font-family="'Malgun Gothic','Apple SD Gothic Neo',sans-serif" font-size="11" fill="#c4b5fd" text-anchor="middle">직업운</text>
-  <text x="600" y="662" text-anchor="middle" font-family="'Malgun Gothic','Apple SD Gothic Neo',sans-serif" font-size="14" font-weight="600" fill="#ddd6fe">전통 사주팔자 + AI 딥러닝 해석  ·  12항목 상세 분석  ·  jaengseung-made.com</text>
+
+  <rect x="866" y="430" width="112" height="28" rx="14" fill="rgba(124,58,237,0.2)" stroke="#7c3aed" stroke-width="1.5"/>
+  <text x="922" y="449" font-family="'Malgun Gothic','Apple SD Gothic Neo',sans-serif" font-size="11" fill="#c4b5fd" text-anchor="middle">재물운</text>
+
+  <rect x="986" y="430" width="112" height="28" rx="14" fill="rgba(124,58,237,0.2)" stroke="#7c3aed" stroke-width="1.5"/>
+  <text x="1042" y="449" font-family="'Malgun Gothic','Apple SD Gothic Neo',sans-serif" font-size="11" fill="#c4b5fd" text-anchor="middle">애정운</text>
+
+  <!-- Row 2: locked (gray) -->
+  <rect x="626" y="466" width="112" height="28" rx="14" fill="rgba(255,255,255,0.05)" stroke="rgba(255,255,255,0.12)" stroke-width="1"/>
+  <text x="682" y="485" font-family="'Malgun Gothic','Apple SD Gothic Neo',sans-serif" font-size="11" fill="rgba(255,255,255,0.35)" text-anchor="middle">가정운</text>
+
+  <rect x="746" y="466" width="112" height="28" rx="14" fill="rgba(255,255,255,0.05)" stroke="rgba(255,255,255,0.12)" stroke-width="1"/>
+  <text x="802" y="485" font-family="'Malgun Gothic','Apple SD Gothic Neo',sans-serif" font-size="11" fill="rgba(255,255,255,0.35)" text-anchor="middle">건강운</text>
+
+  <rect x="866" y="466" width="112" height="28" rx="14" fill="rgba(255,255,255,0.05)" stroke="rgba(255,255,255,0.12)" stroke-width="1"/>
+  <text x="922" y="485" font-family="'Malgun Gothic','Apple SD Gothic Neo',sans-serif" font-size="11" fill="rgba(255,255,255,0.35)" text-anchor="middle">연간운</text>
+
+  <rect x="986" y="466" width="112" height="28" rx="14" fill="rgba(255,255,255,0.05)" stroke="rgba(255,255,255,0.12)" stroke-width="1"/>
+  <text x="1042" y="485" font-family="'Malgun Gothic','Apple SD Gothic Neo',sans-serif" font-size="11" fill="rgba(255,255,255,0.35)" text-anchor="middle">용신·기신</text>
+
+  <!-- Row 3: locked -->
+  <rect x="626" y="502" width="112" height="28" rx="14" fill="rgba(255,255,255,0.05)" stroke="rgba(255,255,255,0.12)" stroke-width="1"/>
+  <text x="682" y="521" font-family="'Malgun Gothic','Apple SD Gothic Neo',sans-serif" font-size="11" fill="rgba(255,255,255,0.35)" text-anchor="middle">대운 흐름</text>
+
+  <rect x="746" y="502" width="112" height="28" rx="14" fill="rgba(255,255,255,0.05)" stroke="rgba(255,255,255,0.12)" stroke-width="1"/>
+  <text x="802" y="521" font-family="'Malgun Gothic','Apple SD Gothic Neo',sans-serif" font-size="11" fill="rgba(255,255,255,0.35)" text-anchor="middle">인연 분석</text>
+
+  <rect x="866" y="502" width="112" height="28" rx="14" fill="rgba(255,255,255,0.05)" stroke="rgba(255,255,255,0.12)" stroke-width="1"/>
+  <text x="922" y="521" font-family="'Malgun Gothic','Apple SD Gothic Neo',sans-serif" font-size="11" fill="rgba(255,255,255,0.35)" text-anchor="middle">주의 시기</text>
+
+  <rect x="986" y="502" width="112" height="28" rx="14" fill="rgba(255,255,255,0.05)" stroke="rgba(255,255,255,0.12)" stroke-width="1"/>
+  <text x="1042" y="521" font-family="'Malgun Gothic','Apple SD Gothic Neo',sans-serif" font-size="11" fill="rgba(255,255,255,0.35)" text-anchor="middle">조언</text>
+
+  <!-- Lock CTA -->
+  <rect x="626" y="548" width="492" height="60" rx="14" fill="rgba(124,58,237,0.22)" stroke="#7c3aed" stroke-width="2"/>
+  <!-- Lock icon -->
+  <rect x="648" y="566" width="14" height="12" rx="2" fill="none" stroke="#c4b5fd" stroke-width="1.5"/>
+  <path d="M 651 566 C 651 561 661 561 661 566" stroke="#c4b5fd" stroke-width="1.5" fill="none"/>
+  <circle cx="655" cy="572" r="2" fill="#c4b5fd"/>
+  <text x="886" y="574" font-family="'Malgun Gothic','Apple SD Gothic Neo',sans-serif" font-size="13.5" fill="white" text-anchor="middle" font-weight="700">4,900원으로 12항목 전체 리포트 잠금 해제</text>
+  <text x="886" y="596" font-family="'Malgun Gothic','Apple SD Gothic Neo',sans-serif" font-size="11" fill="rgba(255,255,255,0.5)" text-anchor="middle">단 한번의 결제 · 평생 보관</text>
+
+  <!-- ===== BOTTOM BAR ===== -->
+  <rect x="0" y="638" width="1200" height="37" fill="url(#sj-bottomBar)"/>
+  <line x1="0" y1="638" x2="1200" y2="638" stroke="rgba(124,58,237,0.4)" stroke-width="1"/>
+  <text x="600" y="662" font-family="'Malgun Gothic','Apple SD Gothic Neo',sans-serif" font-size="13" fill="rgba(255,255,255,0.7)" text-anchor="middle" font-weight="600">jaengseungmade.vercel.app · 전통 사주 × AI 딥러닝 분석</text>
 </svg>

public/marketing/thumb-stock.svg

@@ -1,146 +1,205 @@
 <svg xmlns="http://www.w3.org/2000/svg" width="1200" height="675" viewBox="0 0 1200 675">
   <defs>
-    <linearGradient id="bgSt" x1="0%" y1="0%" x2="100%" y2="100%">
+    <linearGradient id="st-bgGrad" x1="0%" y1="0%" x2="100%" y2="100%">
-      <stop offset="0%" style="stop-color:#04102b"/>
+      <stop offset="0%" stop-color="#04102b"/>
-      <stop offset="60%" style="stop-color:#052e16"/>
+      <stop offset="100%" stop-color="#052e16"/>
-      <stop offset="100%" style="stop-color:#04102b"/>
-    </linearGradient>
-    <linearGradient id="headSt" x1="0%" y1="0%" x2="100%" y2="0%">
-      <stop offset="0%" style="stop-color:#22c55e"/>
-      <stop offset="100%" style="stop-color:#86efac"/>
-    </linearGradient>
-    <linearGradient id="chartLineSt" x1="0%" y1="0%" x2="100%" y2="0%">
-      <stop offset="0%" style="stop-color:#22c55e;stop-opacity:0.5"/>
-      <stop offset="100%" style="stop-color:#22c55e"/>
     </linearGradient>
     <linearGradient id="chartFillSt" x1="0%" y1="0%" x2="0%" y2="100%">
-      <stop offset="0%" style="stop-color:#22c55e;stop-opacity:0.3"/>
+      <stop offset="0%" stop-color="#22c55e" stop-opacity="0.35"/>
-      <stop offset="100%" style="stop-color:#22c55e;stop-opacity:0"/>
+      <stop offset="100%" stop-color="#22c55e" stop-opacity="0.0"/>
     </linearGradient>
-    <linearGradient id="priceSt" x1="0%" y1="0%" x2="100%" y2="100%">
+    <linearGradient id="st-phoneScreen" x1="0%" y1="0%" x2="0%" y2="100%">
-      <stop offset="0%" style="stop-color:#052e16"/>
+      <stop offset="0%" stop-color="#0d1f12"/>
-      <stop offset="100%" style="stop-color:#10b981"/>
+      <stop offset="100%" stop-color="#091218"/>
     </linearGradient>
-    <radialGradient id="glowSt" cx="70%" cy="50%" r="55%">
+    <radialGradient id="st-greenGlow" cx="75%" cy="50%" r="40%">
-      <stop offset="0%" style="stop-color:#22c55e;stop-opacity:0.15"/>
+      <stop offset="0%" stop-color="#22c55e" stop-opacity="0.12"/>
-      <stop offset="100%" style="stop-color:#22c55e;stop-opacity:0"/>
+      <stop offset="100%" stop-color="#22c55e" stop-opacity="0.0"/>
     </radialGradient>
-    <filter id="phoneShadSt">
+    <linearGradient id="st-badgeGrad" x1="0%" y1="0%" x2="100%" y2="0%">
-      <feDropShadow dx="0" dy="20" stdDeviation="28" flood-color="#22c55e" flood-opacity="0.22"/>
+      <stop offset="0%" stop-color="#14532d"/>
-    </filter>
+      <stop offset="100%" stop-color="#166534"/>
-    <clipPath id="phoneClipSt">
+    </linearGradient>
-      <rect x="848" y="66" width="296" height="558" rx="30"/>
+    <linearGradient id="st-buyGrad" x1="0%" y1="0%" x2="100%" y2="0%">
-    </clipPath>
+      <stop offset="0%" stop-color="#052e16"/>
-    <pattern id="gridSt" width="48" height="48" patternUnits="userSpaceOnUse">
+      <stop offset="100%" stop-color="#0f2d1a"/>
-      <path d="M 48 0 L 0 0 0 48" fill="none" stroke="#0a2a18" stroke-width="0.6"/>
+    </linearGradient>
-    </pattern>
+    <linearGradient id="st-sellGrad" x1="0%" y1="0%" x2="100%" y2="0%">
+      <stop offset="0%" stop-color="#1a0a2e"/>
+      <stop offset="100%" stop-color="#130820"/>
+    </linearGradient>
+    <linearGradient id="st-bottomBar" x1="0%" y1="0%" x2="100%" y2="0%">
+      <stop offset="0%" stop-color="#14532d"/>
+      <stop offset="100%" stop-color="#052e16"/>
+    </linearGradient>
   </defs>
 
-  <!-- 배경 -->
+  <!-- Background -->
-  <rect width="1200" height="675" fill="url(#bgSt)"/>
+  <rect width="1200" height="675" fill="url(#st-bgGrad)"/>
-  <rect width="1200" height="675" fill="url(#glowSt)"/>
+  <rect width="1200" height="675" fill="url(#st-greenGlow)"/>
-  <rect width="1200" height="675" fill="url(#gridSt)" opacity="0.6"/>
-  <!-- 배경 차트 라인 (은은하게) -->
-  <polyline points="0,520 140,440 280,470 400,390 520,410 640,310 760,350 880,270 1000,230 1200,185"
-    fill="none" stroke="#22c55e" stroke-width="1.2" opacity="0.07"/>
 
-  <!-- 왼쪽 콘텐츠 -->
+  <!-- Grid pattern -->
-  <!-- 뱃지 -->
+  <g opacity="0.05" stroke="#22c55e" stroke-width="0.8">
-  <rect x="60" y="62" width="256" height="40" rx="20" fill="#052e16" stroke="#22c55e" stroke-width="1.5"/>
+    <line x1="0" y1="90" x2="1200" y2="90"/>
-  <text x="82" y="87" font-family="'Malgun Gothic',sans-serif" font-size="14" font-weight="700" fill="#22c55e">📈 텔레그램 실시간 연동</text>
+    <line x1="0" y1="180" x2="1200" y2="180"/>
-
+    <line x1="0" y1="270" x2="1200" y2="270"/>
-  <!-- 헤드라인 -->
+    <line x1="0" y1="360" x2="1200" y2="360"/>
-  <text x="60" y="162" font-family="'Malgun Gothic','Apple SD Gothic Neo',sans-serif" font-size="52" font-weight="900" fill="#ffffff">잠자는 동안에도</text>
+    <line x1="0" y1="450" x2="1200" y2="450"/>
-  <text x="60" y="224" font-family="'Malgun Gothic','Apple SD Gothic Neo',sans-serif" font-size="52" font-weight="900" fill="url(#headSt)">자동으로 매매</text>
+    <line x1="0" y1="540" x2="1200" y2="540"/>
-  <text x="60" y="270" font-family="'Malgun Gothic','Apple SD Gothic Neo',sans-serif" font-size="18" fill="#94a3b8">백테스팅 · 실시간 매매 · 손절/익절 자동화</text>
+    <line x1="120" y1="0" x2="120" y2="675"/>
-
+    <line x1="240" y1="0" x2="240" y2="675"/>
-  <!-- 기능 패널 -->
+    <line x1="360" y1="0" x2="360" y2="675"/>
-  <rect x="60" y="295" width="510" height="108" rx="16" fill="#040e1c" stroke="#22c55e" stroke-width="1" opacity="0.95"/>
+    <line x1="480" y1="0" x2="480" y2="675"/>
-
+    <line x1="600" y1="0" x2="600" y2="675"/>
-  <!-- 기능 2×2 그리드 -->
+    <line x1="720" y1="0" x2="720" y2="675"/>
-  <circle cx="92" cy="325" r="18" fill="#052e16" stroke="#22c55e" stroke-width="1"/>
+    <line x1="840" y1="0" x2="840" y2="675"/>
-  <text x="92" y="331" text-anchor="middle" font-size="14">⚙️</text>
+    <line x1="960" y1="0" x2="960" y2="675"/>
-  <text x="122" y="321" font-family="'Malgun Gothic',sans-serif" font-size="14" font-weight="700" fill="#e2e8f0">KIS API 연동</text>
+    <line x1="1080" y1="0" x2="1080" y2="675"/>
-  <text x="122" y="339" font-family="'Malgun Gothic',sans-serif" font-size="12" fill="#64748b">한국투자증권 공식 API</text>
-
-  <circle cx="310" cy="325" r="18" fill="#052e16" stroke="#22c55e" stroke-width="1"/>
-  <text x="310" y="331" text-anchor="middle" font-size="14">📊</text>
-  <text x="340" y="321" font-family="'Malgun Gothic',sans-serif" font-size="14" font-weight="700" fill="#e2e8f0">백테스팅</text>
-  <text x="340" y="339" font-family="'Malgun Gothic',sans-serif" font-size="12" fill="#64748b">전략 사전 검증</text>
-
-  <circle cx="92" cy="374" r="18" fill="#052e16" stroke="#22c55e" stroke-width="1"/>
-  <text x="92" y="380" text-anchor="middle" font-size="14">🔔</text>
-  <text x="122" y="370" font-family="'Malgun Gothic',sans-serif" font-size="14" font-weight="700" fill="#e2e8f0">텔레그램 알림</text>
-  <text x="122" y="388" font-family="'Malgun Gothic',sans-serif" font-size="12" fill="#64748b">매수/매도 실시간 알림</text>
-
-  <circle cx="310" cy="374" r="18" fill="#052e16" stroke="#22c55e" stroke-width="1"/>
-  <text x="310" y="380" text-anchor="middle" font-size="14">🛡️</text>
-  <text x="340" y="370" font-family="'Malgun Gothic',sans-serif" font-size="14" font-weight="700" fill="#e2e8f0">리스크 관리</text>
-  <text x="340" y="388" font-family="'Malgun Gothic',sans-serif" font-size="12" fill="#64748b">손절/익절 자동 설정</text>
-
-  <!-- 가격 옵션 -->
-  <rect x="60" y="422" width="228" height="76" rx="16" fill="#052e16" stroke="#22c55e" stroke-width="1.5"/>
-  <text x="174" y="448" text-anchor="middle" font-family="'Malgun Gothic',sans-serif" font-size="12" fill="#86efac">스타터 설치 가격</text>
-  <text x="174" y="478" text-anchor="middle" font-family="'Malgun Gothic',sans-serif" font-size="34" font-weight="900" fill="#22c55e">9만9천원</text>
-
-  <rect x="300" y="422" width="228" height="76" rx="16" fill="#040e1c" stroke="#1e293b" stroke-width="1"/>
-  <text x="414" y="448" text-anchor="middle" font-family="'Malgun Gothic',sans-serif" font-size="12" fill="#64748b">프로 설치 가격</text>
-  <text x="414" y="478" text-anchor="middle" font-family="'Malgun Gothic',sans-serif" font-size="34" font-weight="900" fill="#94a3b8">19만9천원</text>
-
-  <!-- 면책 문구 -->
-  <rect x="60" y="514" width="510" height="38" rx="10" fill="#1c1917" opacity="0.85"/>
-  <text x="80" y="538" font-family="'Malgun Gothic',sans-serif" font-size="13" fill="#78716c">⚠️ 수익을 보장하지 않습니다. 자동화 도구 제공 서비스입니다.</text>
-
-  <!-- URL -->
-  <text x="60" y="632" font-family="sans-serif" font-size="14" fill="#3b5998">jaengseung-made.com</text>
-
-  <!-- 오른쪽 폰 목업 -->
-  <g filter="url(#phoneShadSt)">
-    <rect x="848" y="66" width="296" height="558" rx="30" fill="#0a0f18" stroke="#1e293b" stroke-width="2.5"/>
-    <!-- 노치 -->
-    <rect x="958" y="78" width="76" height="18" rx="9" fill="#040a12"/>
-    <!-- 화면 -->
-    <g clip-path="url(#phoneClipSt)">
-      <rect x="848" y="66" width="296" height="558" fill="#111827"/>
-
-      <!-- 텔레그램 헤더 -->
-      <rect x="848" y="108" width="296" height="60" fill="#1d4ed8"/>
-      <circle cx="882" cy="138" r="18" fill="#3b82f6"/>
-      <text x="882" y="144" text-anchor="middle" font-size="18">✈️</text>
-      <text x="914" y="130" font-family="'Malgun Gothic',sans-serif" font-size="14" font-weight="700" fill="#fff">주식 자동매매 봇</text>
-      <text x="914" y="150" font-family="'Malgun Gothic',sans-serif" font-size="12" fill="#93c5fd">● 온라인</text>
-
-      <!-- 메시지 1: 매수 -->
-      <rect x="864" y="184" width="250" height="72" rx="14" fill="#1e3a8a"/>
-      <text x="882" y="206" font-family="'Malgun Gothic',sans-serif" font-size="12" font-weight="700" fill="#22c55e">✅ 매수 체결</text>
-      <text x="882" y="226" font-family="'Malgun Gothic',sans-serif" font-size="13" fill="#e2e8f0">삼성전자 10주</text>
-      <text x="882" y="246" font-family="'Malgun Gothic',sans-serif" font-size="11" fill="#93c5fd">₩73,400 × 10 = ₩734,000</text>
-
-      <!-- 메시지 2: 목표가 도달 -->
-      <rect x="864" y="270" width="250" height="72" rx="14" fill="#0f2a20"/>
-      <text x="882" y="292" font-family="'Malgun Gothic',sans-serif" font-size="12" font-weight="700" fill="#fbbf24">💰 목표가 도달</text>
-      <text x="882" y="312" font-family="'Malgun Gothic',sans-serif" font-size="13" fill="#e2e8f0">수익률 +3.2%</text>
-      <text x="882" y="332" font-family="'Malgun Gothic',sans-serif" font-size="11" fill="#34d399">매도 주문 실행 중...</text>
-
-      <!-- 메시지 3: 매도 완료 -->
-      <rect x="864" y="356" width="250" height="72" rx="14" fill="#1e3a8a"/>
-      <text x="882" y="378" font-family="'Malgun Gothic',sans-serif" font-size="12" font-weight="700" fill="#22c55e">✅ 매도 체결 완료</text>
-      <text x="882" y="398" font-family="'Malgun Gothic',sans-serif" font-size="13" fill="#e2e8f0">실현 수익: +₩23,480</text>
-      <text x="882" y="418" font-family="'Malgun Gothic',sans-serif" font-size="11" fill="#93c5fd">09:32:14</text>
-
-      <!-- 차트 영역 -->
-      <rect x="864" y="444" width="264" height="148" rx="14" fill="#0f172a" stroke="#1e293b" stroke-width="1"/>
-      <text x="876" y="464" font-family="sans-serif" font-size="10" fill="#64748b">오늘의 누적 수익</text>
-      <text x="876" y="486" font-family="'Malgun Gothic',sans-serif" font-size="20" font-weight="800" fill="#22c55e">+₩47,250</text>
-      <!-- 차트 -->
-      <polyline points="876,572 904,558 930,562 956,546 982,550 1008,534 1034,529 1060,518 1086,508 1112,498"
-        fill="none" stroke="#22c55e" stroke-width="2.5" stroke-linecap="round"/>
-      <polygon points="876,580 876,572 904,558 930,562 956,546 982,550 1008,534 1034,529 1060,518 1086,508 1112,498 1112,580"
-        fill="url(#chartFillSt)"/>
-    </g>
   </g>
 
-  <!-- 하단 바 -->
+  <!-- Organic background chart lines -->
-  <rect x="0" y="638" width="1200" height="37" fill="#052e16"/>
+  <path d="M 0 520 C 140 440 280 470 400 390 C 520 310 640 340 760 280 C 880 220 1000 200 1200 160" stroke="#22c55e" stroke-width="1.2" fill="none" opacity="0.07"/>
-  <text x="600" y="662" text-anchor="middle" font-family="'Malgun Gothic','Apple SD Gothic Neo',sans-serif" font-size="14" font-weight="600" fill="#ffffff">텔레그램 연동 국내주식 자동매매 봇  ·  KIS API  ·  납기 보장 · AS포함  ·  jaengseung-made.com</text>
+  <path d="M 0 580 C 180 520 300 550 450 490 C 600 430 750 460 900 400 C 1050 340 1150 320 1200 310" stroke="#22c55e" stroke-width="0.8" fill="none" opacity="0.04"/>
+
+  <!-- Background blob shape -->
+  <path d="M 600 0 C 750 60 900 20 1100 80 C 1200 110 1200 0 1200 0 Z" fill="rgba(34,197,94,0.04)"/>
+
+  <!-- ===== LEFT CONTENT ===== -->
+
+  <!-- Badge -->
+  <rect x="52" y="52" width="192" height="34" rx="17" fill="url(#st-badgeGrad)" stroke="#22c55e" stroke-width="1" stroke-opacity="0.6"/>
+  <text x="148" y="74" font-family="'Malgun Gothic','Apple SD Gothic Neo',sans-serif" font-size="12.5" fill="#4ade80" text-anchor="middle" font-weight="600">텔레그램 실시간 연동</text>
+
+  <!-- Headline -->
+  <text x="52" y="142" font-family="'Malgun Gothic','Apple SD Gothic Neo',sans-serif" font-size="52" fill="white" font-weight="800" letter-spacing="-1">잠자는 동안에도</text>
+  <text x="52" y="202" font-family="'Malgun Gothic','Apple SD Gothic Neo',sans-serif" font-size="52" fill="#22c55e" font-weight="800" letter-spacing="-1">자동으로 매매</text>
+
+  <!-- Feature panel background -->
+  <rect x="52" y="232" width="490" height="190" rx="16" fill="rgba(255,255,255,0.04)" stroke="rgba(34,197,94,0.2)" stroke-width="1"/>
+
+  <!-- Feature 1: KIS API -->
+  <rect x="68" y="248" width="226" height="72" rx="10" fill="rgba(34,197,94,0.08)"/>
+  <g transform="translate(84,268)">
+    <path d="M 4 8 C 4 5.8 5.8 4 8 4 L 12 4 C 14.2 4 16 5.8 16 8 C 16 10.2 14.2 12 12 12 L 10 12" stroke="#22c55e" stroke-width="1.5" fill="none" stroke-linecap="round"/>
+    <path d="M 12 8 C 12 10.2 10.2 12 8 12 L 6 12" stroke="#22c55e" stroke-width="1.5" fill="none" stroke-linecap="round"/>
+    <line x1="6" y1="12" x2="10" y2="12" stroke="#22c55e" stroke-width="1.5" stroke-linecap="round"/>
+  </g>
+  <text x="114" y="278" font-family="'Malgun Gothic','Apple SD Gothic Neo',sans-serif" font-size="13" fill="white" font-weight="600">KIS API 연동</text>
+  <text x="114" y="298" font-family="'Malgun Gothic','Apple SD Gothic Neo',sans-serif" font-size="11" fill="#86efac">한국투자증권 공식 API</text>
+
+  <!-- Feature 2: Backtesting -->
+  <rect x="304" y="248" width="222" height="72" rx="10" fill="rgba(34,197,94,0.08)"/>
+  <g transform="translate(320,268)">
+    <rect x="0" y="0" width="16" height="16" rx="3" stroke="#22c55e" stroke-width="1.5" fill="none"/>
+    <path d="M 3 8 L 6 11 L 13 4" stroke="#22c55e" stroke-width="1.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/>
+  </g>
+  <text x="350" y="278" font-family="'Malgun Gothic','Apple SD Gothic Neo',sans-serif" font-size="13" fill="white" font-weight="600">백테스팅</text>
+  <text x="350" y="298" font-family="'Malgun Gothic','Apple SD Gothic Neo',sans-serif" font-size="11" fill="#86efac">과거 데이터 전략 검증</text>
+
+  <!-- Feature 3: Telegram Alert -->
+  <rect x="68" y="330" width="226" height="72" rx="10" fill="rgba(34,197,94,0.08)"/>
+  <g transform="translate(84,350)">
+    <path d="M 8 2 C 8 2 4 4.5 4 10 L 4 14 L 12 14 L 12 10 C 12 4.5 8 2 8 2 Z" stroke="#22c55e" stroke-width="1.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/>
+    <path d="M 6.5 14 C 6.5 15.1 7.2 16 8 16 C 8.8 16 9.5 15.1 9.5 14" stroke="#22c55e" stroke-width="1.5" fill="none" stroke-linecap="round"/>
+  </g>
+  <text x="114" y="360" font-family="'Malgun Gothic','Apple SD Gothic Neo',sans-serif" font-size="13" fill="white" font-weight="600">텔레그램 알림</text>
+  <text x="114" y="380" font-family="'Malgun Gothic','Apple SD Gothic Neo',sans-serif" font-size="11" fill="#86efac">실시간 체결 푸시 알림</text>
+
+  <!-- Feature 4: Risk Management -->
+  <rect x="304" y="330" width="222" height="72" rx="10" fill="rgba(34,197,94,0.08)"/>
+  <g transform="translate(320,350)">
+    <path d="M 8 1 L 14 4 L 14 9 C 14 12.5 8 16 8 16 C 8 16 2 12.5 2 9 L 2 4 Z" stroke="#22c55e" stroke-width="1.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/>
+    <path d="M 5 8 L 7 10 L 11 6" stroke="#22c55e" stroke-width="1.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/>
+  </g>
+  <text x="350" y="360" font-family="'Malgun Gothic','Apple SD Gothic Neo',sans-serif" font-size="13" fill="white" font-weight="600">리스크 관리</text>
+  <text x="350" y="380" font-family="'Malgun Gothic','Apple SD Gothic Neo',sans-serif" font-size="11" fill="#86efac">손절매·목표가 자동 설정</text>
+
+  <!-- Pricing -->
+  <rect x="52" y="448" width="192" height="82" rx="14" fill="rgba(34,197,94,0.1)" stroke="rgba(34,197,94,0.35)" stroke-width="1.5"/>
+  <text x="148" y="474" font-family="'Malgun Gothic','Apple SD Gothic Neo',sans-serif" font-size="11" fill="#86efac" text-anchor="middle">스타터</text>
+  <text x="148" y="508" font-family="'Malgun Gothic','Apple SD Gothic Neo',sans-serif" font-size="26" fill="white" text-anchor="middle" font-weight="800">99,000<tspan font-size="14" fill="#86efac">원</tspan></text>
+
+  <rect x="258" y="448" width="192" height="82" rx="14" fill="rgba(34,197,94,0.18)" stroke="#22c55e" stroke-width="2"/>
+  <text x="282" y="444" font-family="'Malgun Gothic','Apple SD Gothic Neo',sans-serif" font-size="10" fill="#22c55e" font-weight="700">BEST</text>
+  <text x="354" y="474" font-family="'Malgun Gothic','Apple SD Gothic Neo',sans-serif" font-size="11" fill="#86efac" text-anchor="middle">프로</text>
+  <text x="354" y="508" font-family="'Malgun Gothic','Apple SD Gothic Neo',sans-serif" font-size="26" fill="white" text-anchor="middle" font-weight="800">199,000<tspan font-size="14" fill="#86efac">원</tspan></text>
+
+  <!-- Disclaimer -->
+  <text x="52" y="558" font-family="'Malgun Gothic','Apple SD Gothic Neo',sans-serif" font-size="10.5" fill="rgba(255,255,255,0.3)">* 투자는 본인 판단과 책임 하에 이루어지며, 수익을 보장하지 않습니다.</text>
+  <text x="52" y="576" font-family="'Malgun Gothic','Apple SD Gothic Neo',sans-serif" font-size="10.5" fill="rgba(255,255,255,0.3)">* 과거 성과가 미래 수익을 보장하지 않습니다.</text>
+
+  <!-- ===== RIGHT: PHONE MOCKUP ===== -->
+
+  <!-- Phone body -->
+  <rect x="744" y="32" width="316" height="606" rx="36" fill="#080e1a" stroke="rgba(34,197,94,0.3)" stroke-width="2.5"/>
+  <rect x="752" y="40" width="300" height="590" rx="30" fill="url(#st-phoneScreen)"/>
+
+  <!-- Notch -->
+  <rect x="848" y="40" width="108" height="26" rx="13" fill="#080e1a"/>
+
+  <!-- Telegram header -->
+  <rect x="752" y="66" width="300" height="54" fill="#1d4ed8"/>
+  <circle cx="784" cy="93" r="17" fill="#2563eb"/>
+  <path d="M 776 99 L 780 93 L 784 96 L 788 87 L 792 93" stroke="white" stroke-width="1.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/>
+  <text x="812" y="89" font-family="'Malgun Gothic','Apple SD Gothic Neo',sans-serif" font-size="12" fill="white" font-weight="700">주식 자동매매 봇</text>
+  <circle cx="812" cy="101" r="4.5" fill="#22c55e"/>
+  <text x="822" y="105" font-family="'Malgun Gothic','Apple SD Gothic Neo',sans-serif" font-size="10.5" fill="#86efac">온라인</text>
+
+  <!-- Message 1: Buy -->
+  <rect x="762" y="130" width="270" height="78" rx="12" fill="url(#st-buyGrad)" stroke="rgba(34,197,94,0.3)" stroke-width="1"/>
+  <rect x="762" y="130" width="4" height="78" rx="2" fill="#22c55e"/>
+  <text x="776" y="151" font-family="'Malgun Gothic','Apple SD Gothic Neo',sans-serif" font-size="10.5" fill="#86efac" font-weight="600">매수 체결</text>
+  <text x="776" y="170" font-family="'Malgun Gothic','Apple SD Gothic Neo',sans-serif" font-size="12.5" fill="white" font-weight="700">삼성전자 10주</text>
+  <text x="776" y="190" font-family="'Malgun Gothic','Apple SD Gothic Neo',sans-serif" font-size="11" fill="rgba(255,255,255,0.55)">73,400 × 10 = 734,000원</text>
+  <text x="1024" y="202" font-family="'Malgun Gothic','Apple SD Gothic Neo',sans-serif" font-size="9.5" fill="rgba(255,255,255,0.28)" text-anchor="end">14:32</text>
+
+  <!-- Message 2: Target reached -->
+  <rect x="762" y="218" width="270" height="66" rx="12" fill="rgba(251,191,36,0.09)" stroke="rgba(251,191,36,0.32)" stroke-width="1"/>
+  <rect x="762" y="218" width="4" height="66" rx="2" fill="#fbbf24"/>
+  <text x="776" y="239" font-family="'Malgun Gothic','Apple SD Gothic Neo',sans-serif" font-size="10.5" fill="#fbbf24" font-weight="600">목표가 도달</text>
+  <text x="776" y="260" font-family="'Malgun Gothic','Apple SD Gothic Neo',sans-serif" font-size="13" fill="white" font-weight="700">수익률 +3.2%</text>
+  <text x="1024" y="278" font-family="'Malgun Gothic','Apple SD Gothic Neo',sans-serif" font-size="9.5" fill="rgba(255,255,255,0.28)" text-anchor="end">14:47</text>
+
+  <!-- Message 3: Sell complete -->
+  <rect x="762" y="294" width="270" height="76" rx="12" fill="url(#st-sellGrad)" stroke="rgba(167,139,250,0.32)" stroke-width="1"/>
+  <rect x="762" y="294" width="4" height="76" rx="2" fill="#a78bfa"/>
+  <text x="776" y="315" font-family="'Malgun Gothic','Apple SD Gothic Neo',sans-serif" font-size="10.5" fill="#c4b5fd" font-weight="600">매도 체결 완료</text>
+  <text x="776" y="334" font-family="'Malgun Gothic','Apple SD Gothic Neo',sans-serif" font-size="13" fill="white" font-weight="700">실현 수익 +23,480원</text>
+  <text x="776" y="354" font-family="'Malgun Gothic','Apple SD Gothic Neo',sans-serif" font-size="11" fill="rgba(255,255,255,0.45)">누적 수익: +1,247,800원</text>
+  <text x="1024" y="364" font-family="'Malgun Gothic','Apple SD Gothic Neo',sans-serif" font-size="9.5" fill="rgba(255,255,255,0.28)" text-anchor="end">15:12</text>
+
+  <!-- Chart area -->
+  <rect x="762" y="380" width="280" height="124" rx="12" fill="rgba(0,0,0,0.42)" stroke="rgba(34,197,94,0.15)" stroke-width="1"/>
+  <text x="774" y="400" font-family="'Malgun Gothic','Apple SD Gothic Neo',sans-serif" font-size="10" fill="rgba(255,255,255,0.38)">오늘의 수익 현황</text>
+  <text x="1034" y="400" font-family="'Malgun Gothic','Apple SD Gothic Neo',sans-serif" font-size="10" fill="#22c55e" text-anchor="end">+2.4%</text>
+
+  <!-- Chart grid lines (faint) -->
+  <line x1="762" y1="426" x2="1042" y2="426" stroke="rgba(255,255,255,0.04)" stroke-width="1"/>
+  <line x1="762" y1="452" x2="1042" y2="452" stroke="rgba(255,255,255,0.04)" stroke-width="1"/>
+  <line x1="762" y1="478" x2="1042" y2="478" stroke="rgba(255,255,255,0.04)" stroke-width="1"/>
+
+  <!-- Chart fill area -->
+  <path d="M 776 482 C 790 472 810 468 830 472 C 850 476 860 460 882 456 C 904 452 920 444 940 439 C 960 434 982 424 1008 415 L 1008 494 L 776 494 Z" fill="url(#chartFillSt)"/>
+
+  <!-- Chart line smooth bezier -->
+  <path d="M 776 482 C 790 472 810 468 830 472 C 850 476 860 460 882 456 C 904 452 920 444 940 439 C 960 434 982 424 1008 415" stroke="#22c55e" stroke-width="2.5" fill="none" stroke-linecap="round"/>
+
+  <!-- Chart end glow dot -->
+  <circle cx="1008" cy="415" r="8" fill="rgba(34,197,94,0.22)"/>
+  <circle cx="1008" cy="415" r="4" fill="#22c55e"/>
+
+  <!-- Phone bottom status -->
+  <rect x="752" y="506" width="300" height="52" fill="rgba(0,0,0,0.5)"/>
+  <rect x="762" y="516" width="92" height="32" rx="8" fill="rgba(34,197,94,0.15)" stroke="rgba(34,197,94,0.4)" stroke-width="1"/>
+  <text x="808" y="537" font-family="'Malgun Gothic','Apple SD Gothic Neo',sans-serif" font-size="10.5" fill="#22c55e" text-anchor="middle" font-weight="600">운영 중</text>
+  <text x="864" y="528" font-family="'Malgun Gothic','Apple SD Gothic Neo',sans-serif" font-size="10" fill="rgba(255,255,255,0.4)">금일 체결 7건</text>
+  <text x="864" y="544" font-family="'Malgun Gothic','Apple SD Gothic Neo',sans-serif" font-size="10" fill="rgba(255,255,255,0.4)">총 수익 +47,820원</text>
+
+  <!-- Home indicator bar -->
+  <rect x="857" y="562" width="86" height="4" rx="2" fill="rgba(255,255,255,0.28)"/>
+
+  <!-- ===== BOTTOM BAR ===== -->
+  <rect x="0" y="638" width="1200" height="37" fill="url(#st-bottomBar)"/>
+  <line x1="0" y1="638" x2="1200" y2="638" stroke="rgba(34,197,94,0.4)" stroke-width="1"/>
+  <text x="600" y="662" font-family="'Malgun Gothic','Apple SD Gothic Neo',sans-serif" font-size="13" fill="rgba(255,255,255,0.7)" text-anchor="middle" font-weight="600">jaengseungmade.vercel.app · 주식 자동 매매 솔루션</text>
 </svg>