Redesign full site: dashboard layout, service pages, modal contact, CookieRun font

- 전체 디자인 시스템 개편: 딥 네이비 (#04102b) + 로열 블루 (#1a56db) 팔레트
- 홈 대시보드: 가운데 정렬, 서비스별 고유 카드 디자인 (로또/주식/프롬프트/자동화)
- 서비스 페이지 4종: 각 서비스 테마 색상 + 장식 요소 + 가운데 정렬 레이아웃
- 외주 개발 페이지: 라이브 카운터 (진행중/상담중/납품완료), 수직 타임라인
- ContactModal 컴포넌트: 서비스별 모달 문의폼 + 체크리스트 (페이지 이동 없이 문의)
- CookieRun 폰트 적용 (Regular/Bold/Black, 상업적 이용 가능 라이선스)
- 실명 '박재오' → '쟁토리' 전체 변경, 7년차 강조 홈 페이지에만 표시

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

app/components/ContactForm.tsx

@@ -1,18 +1,27 @@
 'use client';
 
-import { useState } from 'react';
+import { useState, useEffect, Suspense } from 'react';
+import { useSearchParams } from 'next/navigation';
 
-export default function ContactForm() {
+function ContactFormInner() {
+  const searchParams = useSearchParams();
   const [formData, setFormData] = useState({
     name: '',
     phone: '',
     email: '',
-    service: 'RPA 자동화',
+    service: '외주 개발 문의',
     message: '',
   });
   const [status, setStatus] = useState<'idle' | 'loading' | 'success' | 'error'>('idle');
   const [errorMessage, setErrorMessage] = useState('');
 
+  useEffect(() => {
+    const serviceParam = searchParams.get('service');
+    if (serviceParam) {
+      setFormData((prev) => ({ ...prev, service: serviceParam }));
+    }
+  }, [searchParams]);
+
   const handleSubmit = async (e: React.FormEvent) => {
     e.preventDefault();
     setStatus('loading');
@@ -21,29 +30,13 @@ export default function ContactForm() {
     try {
       const response = await fetch('/api/contact', {
         method: 'POST',
-        headers: {
+        headers: { 'Content-Type': 'application/json' },
-          'Content-Type': 'application/json',
-        },
         body: JSON.stringify(formData),
       });
-
       const data = await response.json();
-
+      if (!response.ok) throw new Error(data.error || '문의 전송에 실패했습니다.');
-      if (!response.ok) {
-        throw new Error(data.error || '문의 전송에 실패했습니다.');
-      }
-
       setStatus('success');
-      // 폼 초기화
+      setFormData({ name: '', phone: '', email: '', service: '외주 개발 문의', message: '' });
-      setFormData({
-        name: '',
-        phone: '',
-        email: '',
-        service: 'RPA 자동화',
-        message: '',
-      });
-
-      // 3초 후 성공 메시지 숨기기
       setTimeout(() => setStatus('idle'), 5000);
     } catch (error) {
       setStatus('error');
@@ -54,133 +47,129 @@ export default function ContactForm() {
   const handleChange = (
     e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement>
   ) => {
-    setFormData((prev) => ({
+    setFormData((prev) => ({ ...prev, [e.target.name]: e.target.value }));
-      ...prev,
-      [e.target.name]: e.target.value,
-    }));
   };
 
   return (
-    <div className="bg-white rounded-2xl shadow-xl p-8 md:p-12">
+    <form onSubmit={handleSubmit} className="space-y-4">
-      <form onSubmit={handleSubmit} className="space-y-6">
+      <div className="grid sm:grid-cols-2 gap-4">
-        <div className="grid md:grid-cols-2 gap-6">
-          <div>
-            <label className="block text-sm font-semibold text-gray-700 mb-2">
-              이름 <span className="text-red-500">*</span>
-            </label>
-            <input
-              type="text"
-              name="name"
-              value={formData.name}
-              onChange={handleChange}
-              required
-              className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent outline-none"
-              placeholder="홍길동"
-              disabled={status === 'loading'}
-            />
-          </div>
-          <div>
-            <label className="block text-sm font-semibold text-gray-700 mb-2">연락처</label>
-            <input
-              type="tel"
-              name="phone"
-              value={formData.phone}
-              onChange={handleChange}
-              className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent outline-none"
-              placeholder="010-0000-0000"
-              disabled={status === 'loading'}
-            />
-          </div>
-        </div>
-
         <div>
-          <label className="block text-sm font-semibold text-gray-700 mb-2">
+          <label className="block text-xs font-semibold text-slate-600 mb-1.5">
-            이메일 <span className="text-red-500">*</span>
+            이름 <span className="text-red-500">*</span>
           </label>
           <input
-            type="email"
+            type="text"
-            name="email"
+            name="name"
-            value={formData.email}
+            value={formData.name}
             onChange={handleChange}
             required
-            className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent outline-none"
-            placeholder="example@email.com"
             disabled={status === 'loading'}
+            placeholder="홍길동"
+            className="w-full px-3.5 py-2.5 text-sm border border-[#dbe8ff] rounded-xl focus:ring-2 focus:ring-[#1a56db] focus:border-[#1a56db] outline-none bg-white disabled:bg-slate-50"
           />
         </div>
-
         <div>
-          <label className="block text-sm font-semibold text-gray-700 mb-2">서비스 선택</label>
+          <label className="block text-xs font-semibold text-slate-600 mb-1.5">연락처</label>
-          <select
+          <input
-            name="service"
+            type="tel"
-            value={formData.service}
+            name="phone"
+            value={formData.phone}
             onChange={handleChange}
-            className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent outline-none"
             disabled={status === 'loading'}
-          >
+            placeholder="010-0000-0000"
-            <option>RPA 자동화</option>
+            className="w-full px-3.5 py-2.5 text-sm border border-[#dbe8ff] rounded-xl focus:ring-2 focus:ring-[#1a56db] focus:border-[#1a56db] outline-none bg-white disabled:bg-slate-50"
-            <option>웹 개발</option>
+          />
-            <option>앱 개발</option>
-            <option>맞춤형 솔루션</option>
-          </select>
-        </div>
-
-        <div>
-          <label className="block text-sm font-semibold text-gray-700 mb-2">
-            프로젝트 설명 <span className="text-red-500">*</span>
-          </label>
-          <textarea
-            name="message"
-            value={formData.message}
-            onChange={handleChange}
-            required
-            rows={6}
-            className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent outline-none resize-none"
-            placeholder="프로젝트에 대해 자세히 설명해주세요. 목적, 예상 기간, 예산 등을 포함하면 더 정확한 상담이 가능합니다."
-            disabled={status === 'loading'}
-          ></textarea>
-        </div>
-
-        {status === 'success' && (
-          <div className="bg-green-50 border border-green-200 text-green-800 px-4 py-3 rounded-lg">
-            ✅ 문의가 성공적으로 전송되었습니다! 24시간 이내 답변드리겠습니다.
-          </div>
-        )}
-
-        {status === 'error' && (
-          <div className="bg-red-50 border border-red-200 text-red-800 px-4 py-3 rounded-lg">
-            ❌ {errorMessage}
-          </div>
-        )}
-
-        <button
-          type="submit"
-          disabled={status === 'loading'}
-          className="w-full bg-blue-700 text-white py-4 rounded-lg text-lg font-bold hover:bg-blue-800 transition shadow-lg disabled:bg-gray-400 disabled:cursor-not-allowed"
-        >
-          {status === 'loading' ? '전송 중...' : '무료 상담 신청하기'}
-        </button>
-      </form>
-
-      <div className="mt-8 pt-8 border-t border-gray-200">
-        <div className="text-center text-gray-600">
-          <p className="mb-4">또는 아래 연락처로 직접 문의주세요</p>
-          <div className="flex flex-col sm:flex-row gap-4 justify-center">
-            <a
-              href="mailto:bgg8988@gmail.com"
-              className="flex items-center justify-center text-blue-700 hover:text-blue-800"
-            >
-              <span className="mr-2">📧</span> bgg8988@gmail.com
-            </a>
-            <a
-              href="tel:010-3907-1392"
-              className="flex items-center justify-center text-blue-700 hover:text-blue-800"
-            >
-              <span className="mr-2">📱</span> 010-3907-1392
-            </a>
-          </div>
         </div>
       </div>
-    </div>
+
+      <div>
+        <label className="block text-xs font-semibold text-slate-600 mb-1.5">
+          이메일 <span className="text-red-500">*</span>
+        </label>
+        <input
+          type="email"
+          name="email"
+          value={formData.email}
+          onChange={handleChange}
+          required
+          disabled={status === 'loading'}
+          placeholder="example@email.com"
+          className="w-full px-3.5 py-2.5 text-sm border border-[#dbe8ff] rounded-xl focus:ring-2 focus:ring-[#1a56db] focus:border-[#1a56db] outline-none bg-white disabled:bg-slate-50"
+        />
+      </div>
+
+      <div>
+        <label className="block text-xs font-semibold text-slate-600 mb-1.5">문의 서비스</label>
+        <select
+          name="service"
+          value={formData.service}
+          onChange={handleChange}
+          disabled={status === 'loading'}
+          className="w-full px-3.5 py-2.5 text-sm border border-[#dbe8ff] rounded-xl focus:ring-2 focus:ring-[#1a56db] focus:border-[#1a56db] outline-none bg-white disabled:bg-slate-50"
+        >
+          <option>외주 개발 문의</option>
+          <option>로또 번호 추천 - 기본 플랜</option>
+          <option>로또 번호 추천 - 프리미엄 플랜</option>
+          <option>로또 번호 추천 - 연간 플랜</option>
+          <option>주식 자동 매매 - 스타터</option>
+          <option>주식 자동 매매 - 프로</option>
+          <option>주식 자동 매매 - 엔터프라이즈</option>
+          <option>프롬프트 엔지니어링 - 단건 설계</option>
+          <option>프롬프트 엔지니어링 - 비즈니스 패키지</option>
+          <option>프롬프트 엔지니어링 - 팀/기업 패키지</option>
+          <option>업무 자동화 - 단순 자동화</option>
+          <option>업무 자동화 - 중간 자동화</option>
+          <option>업무 자동화 - 대형 자동화</option>
+          <option>기타 문의</option>
+        </select>
+      </div>
+
+      <div>
+        <label className="block text-xs font-semibold text-slate-600 mb-1.5">
+          문의 내용 <span className="text-red-500">*</span>
+        </label>
+        <textarea
+          name="message"
+          value={formData.message}
+          onChange={handleChange}
+          required
+          rows={5}
+          disabled={status === 'loading'}
+          placeholder="문의하실 내용을 자유롭게 작성해주세요. 프로젝트 목적, 원하시는 기능, 예산 등을 적어주시면 더 정확한 답변이 가능합니다."
+          className="w-full px-3.5 py-2.5 text-sm border border-slate-300 rounded-xl focus:ring-2 focus:ring-blue-500 focus:border-blue-500 outline-none resize-none bg-white disabled:bg-slate-50"
+        />
+      </div>
+
+      {status === 'success' && (
+        <div className="bg-emerald-50 border border-emerald-200 text-emerald-800 text-sm px-4 py-3 rounded-xl">
+          ✅ 문의가 전송되었습니다! 24시간 이내 답변드리겠습니다.
+        </div>
+      )}
+      {status === 'error' && (
+        <div className="bg-red-50 border border-red-200 text-red-800 text-sm px-4 py-3 rounded-xl">
+          ❌ {errorMessage}
+        </div>
+      )}
+
+      <button
+        type="submit"
+        disabled={status === 'loading'}
+        className="w-full bg-[#1a56db] hover:bg-[#1e4fc2] text-white py-3 rounded-xl text-sm font-bold transition shadow-lg shadow-blue-900/20 disabled:opacity-50 disabled:cursor-not-allowed"
+      >
+        {status === 'loading' ? '전송 중...' : '문의 보내기'}
+      </button>
+
+      <p className="text-slate-400 text-xs text-center">
+        문의 후 24시간 이내 답변 보장 · 무료 상담 가능
+      </p>
+    </form>
+  );
+}
+
+export default function ContactForm() {
+  return (
+    <Suspense fallback={<div className="text-slate-400 text-sm">로딩 중...</div>}>
+      <ContactFormInner />
+    </Suspense>
   );
 }

app/components/ContactModal.tsx

@@ -0,0 +1,309 @@
+'use client';
+
+import { useState, useEffect, useRef } from 'react';
+
+interface ContactModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+  service: string;
+  checklist: string[];
+  accentColor?: string; // tailwind class e.g. 'text-amber-400'
+  accentBg?: string;    // e.g. 'bg-amber-400'
+  headerFrom?: string;  // hex e.g. '#1a0a00'
+  headerTo?: string;    // hex e.g. '#3d1a00'
+}
+
+export default function ContactModal({
+  isOpen,
+  onClose,
+  service,
+  checklist,
+  accentColor = 'text-[#5ba4ff]',
+  accentBg = 'bg-[#1a56db]',
+  headerFrom = '#04102b',
+  headerTo = '#0a2060',
+}: ContactModalProps) {
+  const [formData, setFormData] = useState({
+    name: '',
+    phone: '',
+    email: '',
+    service,
+    message: '',
+  });
+  const [status, setStatus] = useState<'idle' | 'loading' | 'success' | 'error'>('idle');
+  const [errorMessage, setErrorMessage] = useState('');
+  const [visible, setVisible] = useState(false);
+  const firstInputRef = useRef<HTMLInputElement>(null);
+
+  /* sync service prop into form */
+  useEffect(() => {
+    setFormData((prev) => ({ ...prev, service }));
+  }, [service]);
+
+  /* animation: open/close */
+  useEffect(() => {
+    if (isOpen) {
+      setVisible(true);
+      setTimeout(() => firstInputRef.current?.focus(), 100);
+      document.body.style.overflow = 'hidden';
+    } else {
+      document.body.style.overflow = '';
+    }
+    return () => { document.body.style.overflow = ''; };
+  }, [isOpen]);
+
+  /* close on Escape */
+  useEffect(() => {
+    const handler = (e: KeyboardEvent) => { if (e.key === 'Escape') onClose(); };
+    window.addEventListener('keydown', handler);
+    return () => window.removeEventListener('keydown', handler);
+  }, [onClose]);
+
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement>) => {
+    setFormData((prev) => ({ ...prev, [e.target.name]: e.target.value }));
+  };
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setStatus('loading');
+    setErrorMessage('');
+    try {
+      const response = await fetch('/api/contact', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify(formData),
+      });
+      const data = await response.json();
+      if (!response.ok) throw new Error(data.error || '문의 전송에 실패했습니다.');
+      setStatus('success');
+    } catch (error) {
+      setStatus('error');
+      setErrorMessage(error instanceof Error ? error.message : '문의 전송에 실패했습니다.');
+    }
+  };
+
+  if (!isOpen && !visible) return null;
+
+  return (
+    <div
+      className={`fixed inset-0 z-50 flex items-center justify-center p-4 transition-all duration-300 ${
+        isOpen ? 'opacity-100' : 'opacity-0 pointer-events-none'
+      }`}
+      style={{ background: 'rgba(4, 16, 43, 0.85)', backdropFilter: 'blur(8px)' }}
+      onClick={(e) => { if (e.target === e.currentTarget) onClose(); }}
+      onTransitionEnd={() => { if (!isOpen) setVisible(false); }}
+    >
+      <div
+        className={`relative w-full max-w-3xl bg-white rounded-2xl shadow-2xl shadow-[#04102b]/50 overflow-hidden transition-all duration-300 ${
+          isOpen ? 'scale-100 translate-y-0 opacity-100' : 'scale-95 translate-y-4 opacity-0'
+        }`}
+        style={{ maxHeight: '92vh', overflowY: 'auto' }}
+      >
+        {/* ─── Header ─── */}
+        <div
+          className="relative px-6 py-5 flex items-center justify-between"
+          style={{ background: `linear-gradient(135deg, ${headerFrom}, ${headerTo})` }}
+        >
+          <div className="absolute inset-0 opacity-[0.05]"
+            style={{ backgroundImage: 'linear-gradient(#fff 1px, transparent 1px), linear-gradient(90deg, #fff 1px, transparent 1px)', backgroundSize: '24px 24px' }} />
+          <div className="relative">
+            <p className={`text-xs font-bold uppercase tracking-widest mb-0.5 ${accentColor}`}>CONTACT</p>
+            <h2 className="text-white font-extrabold text-lg leading-tight">{service}</h2>
+          </div>
+          <button
+            onClick={onClose}
+            className="relative w-9 h-9 rounded-xl bg-white/10 hover:bg-white/20 border border-white/15 flex items-center justify-center text-white/70 hover:text-white transition-all"
+            aria-label="닫기"
+          >
+            <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
+            </svg>
+          </button>
+        </div>
+
+        {/* ─── Body ─── */}
+        {status === 'success' ? (
+          /* Success State */
+          <div className="flex flex-col items-center justify-center py-16 px-8 text-center">
+            <div className="w-16 h-16 rounded-full bg-emerald-100 border-2 border-emerald-300 flex items-center justify-center mb-5">
+              <svg className="w-8 h-8 text-emerald-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
+              </svg>
+            </div>
+            <h3 className="text-[#04102b] text-xl font-extrabold mb-2">문의가 접수되었습니다</h3>
+            <p className="text-slate-500 text-sm mb-1">24시간 이내로 답변 드리겠습니다.</p>
+            <p className="text-slate-400 text-xs mb-6">bgg8988@gmail.com / 010-3907-1392</p>
+            <button
+              onClick={() => { setStatus('idle'); onClose(); setFormData({ name: '', phone: '', email: '', service, message: '' }); }}
+              className="bg-[#04102b] hover:bg-[#0a1f5c] text-white px-8 py-2.5 rounded-xl text-sm font-bold transition"
+            >
+              닫기
+            </button>
+          </div>
+        ) : (
+          <div className="grid md:grid-cols-5">
+            {/* Left: Checklist */}
+            <div className="md:col-span-2 bg-[#f0f5ff] border-r border-[#dbe8ff] p-6">
+              <h3 className="text-[#04102b] font-bold text-sm mb-4">신청 전 확인사항</h3>
+              <ul className="space-y-3 mb-6">
+                {checklist.map((item, i) => (
+                  <li key={i} className="flex items-start gap-2.5">
+                    <div className="w-5 h-5 rounded-full bg-white border-2 border-[#dbe8ff] flex items-center justify-center flex-shrink-0 mt-0.5">
+                      <div className="w-2 h-2 rounded-full bg-[#1a56db]" />
+                    </div>
+                    <span className="text-slate-600 text-xs leading-relaxed">{item}</span>
+                  </li>
+                ))}
+              </ul>
+
+              {/* quick contact */}
+              <div className="bg-white rounded-xl border border-[#dbe8ff] p-4">
+                <div className="text-xs font-bold text-slate-400 uppercase tracking-wider mb-3">직접 연락</div>
+                <a href="mailto:bgg8988@gmail.com" className="flex items-center gap-2 text-xs text-slate-600 hover:text-[#1a56db] transition mb-2">
+                  <svg className="w-3.5 h-3.5 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
+                  </svg>
+                  bgg8988@gmail.com
+                </a>
+                <a href="tel:010-3907-1392" className="flex items-center gap-2 text-xs text-slate-600 hover:text-[#1a56db] transition">
+                  <svg className="w-3.5 h-3.5 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z" />
+                  </svg>
+                  010-3907-1392
+                </a>
+              </div>
+
+              <div className="mt-4 text-center">
+                <div className="inline-flex items-center gap-1.5 bg-white border border-[#dbe8ff] text-[#1a56db] text-xs font-bold px-3 py-1.5 rounded-full">
+                  <span className="w-1.5 h-1.5 rounded-full bg-emerald-400 animate-pulse" />
+                  24h 이내 답변 보장
+                </div>
+              </div>
+            </div>
+
+            {/* Right: Form */}
+            <div className="md:col-span-3 p-6">
+              <form onSubmit={handleSubmit} className="space-y-4">
+                <div className="grid sm:grid-cols-2 gap-3">
+                  <div>
+                    <label className="block text-xs font-bold text-slate-600 mb-1.5">
+                      이름 <span className="text-red-400">*</span>
+                    </label>
+                    <input
+                      ref={firstInputRef}
+                      type="text"
+                      name="name"
+                      value={formData.name}
+                      onChange={handleChange}
+                      required
+                      disabled={status === 'loading'}
+                      placeholder="홍길동"
+                      className="w-full px-3.5 py-2.5 text-sm border border-[#dbe8ff] rounded-xl focus:ring-2 focus:ring-[#1a56db] focus:border-[#1a56db] outline-none bg-white disabled:bg-slate-50 transition"
+                    />
+                  </div>
+                  <div>
+                    <label className="block text-xs font-bold text-slate-600 mb-1.5">연락처</label>
+                    <input
+                      type="tel"
+                      name="phone"
+                      value={formData.phone}
+                      onChange={handleChange}
+                      disabled={status === 'loading'}
+                      placeholder="010-0000-0000"
+                      className="w-full px-3.5 py-2.5 text-sm border border-[#dbe8ff] rounded-xl focus:ring-2 focus:ring-[#1a56db] focus:border-[#1a56db] outline-none bg-white disabled:bg-slate-50 transition"
+                    />
+                  </div>
+                </div>
+
+                <div>
+                  <label className="block text-xs font-bold text-slate-600 mb-1.5">
+                    이메일 <span className="text-red-400">*</span>
+                  </label>
+                  <input
+                    type="email"
+                    name="email"
+                    value={formData.email}
+                    onChange={handleChange}
+                    required
+                    disabled={status === 'loading'}
+                    placeholder="example@email.com"
+                    className="w-full px-3.5 py-2.5 text-sm border border-[#dbe8ff] rounded-xl focus:ring-2 focus:ring-[#1a56db] focus:border-[#1a56db] outline-none bg-white disabled:bg-slate-50 transition"
+                  />
+                </div>
+
+                <div>
+                  <label className="block text-xs font-bold text-slate-600 mb-1.5">문의 서비스</label>
+                  <select
+                    name="service"
+                    value={formData.service}
+                    onChange={handleChange}
+                    disabled={status === 'loading'}
+                    className="w-full px-3.5 py-2.5 text-sm border border-[#dbe8ff] rounded-xl focus:ring-2 focus:ring-[#1a56db] focus:border-[#1a56db] outline-none bg-white disabled:bg-slate-50 transition"
+                  >
+                    <option>{service}</option>
+                    <option>외주 개발 문의</option>
+                    <option>로또 번호 추천 - 기본 플랜</option>
+                    <option>로또 번호 추천 - 프리미엄 플랜</option>
+                    <option>로또 번호 추천 - 연간 플랜</option>
+                    <option>주식 자동 매매 - 스타터</option>
+                    <option>주식 자동 매매 - 프로</option>
+                    <option>주식 자동 매매 - 엔터프라이즈</option>
+                    <option>프롬프트 엔지니어링 - 단건 설계</option>
+                    <option>프롬프트 엔지니어링 - 비즈니스 패키지</option>
+                    <option>프롬프트 엔지니어링 - 팀/기업 패키지</option>
+                    <option>업무 자동화 - 단순 자동화</option>
+                    <option>업무 자동화 - 중간 자동화</option>
+                    <option>업무 자동화 - 대형 자동화</option>
+                    <option>기타 문의</option>
+                  </select>
+                </div>
+
+                <div>
+                  <label className="block text-xs font-bold text-slate-600 mb-1.5">
+                    문의 내용 <span className="text-red-400">*</span>
+                  </label>
+                  <textarea
+                    name="message"
+                    value={formData.message}
+                    onChange={handleChange}
+                    required
+                    rows={4}
+                    disabled={status === 'loading'}
+                    placeholder="문의하실 내용을 자유롭게 작성해주세요. 프로젝트 목적, 원하시는 기능, 예산 등을 적어주시면 더 정확한 답변이 가능합니다."
+                    className="w-full px-3.5 py-2.5 text-sm border border-[#dbe8ff] rounded-xl focus:ring-2 focus:ring-[#1a56db] focus:border-[#1a56db] outline-none resize-none bg-white disabled:bg-slate-50 transition"
+                  />
+                </div>
+
+                {status === 'error' && (
+                  <div className="bg-red-50 border border-red-200 text-red-700 text-xs px-4 py-3 rounded-xl">
+                    {errorMessage}
+                  </div>
+                )}
+
+                <button
+                  type="submit"
+                  disabled={status === 'loading'}
+                  className="w-full bg-[#1a56db] hover:bg-[#1e4fc2] disabled:opacity-50 disabled:cursor-not-allowed text-white py-3 rounded-xl text-sm font-extrabold transition shadow-lg shadow-blue-900/20 flex items-center justify-center gap-2"
+                >
+                  {status === 'loading' ? (
+                    <>
+                      <svg className="w-4 h-4 animate-spin" fill="none" viewBox="0 0 24 24">
+                        <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" />
+                        <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z" />
+                      </svg>
+                      전송 중...
+                    </>
+                  ) : '문의 보내기 →'}
+                </button>
+
+                <p className="text-center text-slate-400 text-xs">
+                  문의 후 24시간 이내 답변 · 무료 상담 가능
+                </p>
+              </form>
+            </div>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}

app/components/DashboardShell.tsx

@@ -0,0 +1,41 @@
+'use client';
+
+import { useState } from 'react';
+import Sidebar from './Sidebar';
+
+export default function DashboardShell({ children }: { children: React.ReactNode }) {
+  const [sidebarOpen, setSidebarOpen] = useState(false);
+
+  return (
+    <div className="dashboard-layout">
+      <Sidebar isOpen={sidebarOpen} onClose={() => setSidebarOpen(false)} />
+
+      <div className="flex-1 flex flex-col overflow-hidden min-w-0">
+        {/* Mobile top bar */}
+        <header className="lg:hidden flex items-center justify-between px-4 py-3 bg-[#04102b] border-b border-[#1a3a7a]/50 flex-shrink-0">
+          <button
+            onClick={() => setSidebarOpen(true)}
+            className="p-2 rounded-lg text-slate-400 hover:text-white hover:bg-slate-800 transition"
+            aria-label="메뉴 열기"
+          >
+            <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 6h16M4 12h16M4 18h16" />
+            </svg>
+          </button>
+          <div className="flex items-center gap-2">
+            <div className="w-7 h-7 rounded-lg bg-gradient-to-br from-blue-500 to-violet-600 flex items-center justify-center text-white font-bold text-xs">
+              쟁
+            </div>
+            <span className="text-white font-bold text-base">쟁승메이드</span>
+          </div>
+          <div className="w-9" />
+        </header>
+
+        {/* Main scrollable content */}
+        <main className="main-content">
+          {children}
+        </main>
+      </div>
+    </div>
+  );
+}

app/components/Sidebar.tsx

@@ -0,0 +1,176 @@
+'use client';
+
+import Link from 'next/link';
+import { usePathname } from 'next/navigation';
+
+const navItems = [
+  {
+    href: '/',
+    icon: (
+      <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6" />
+      </svg>
+    ),
+    label: '홈',
+    desc: '대시보드 홈',
+  },
+  {
+    href: '/services/lotto',
+    icon: (
+      <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M11.049 2.927c.3-.921 1.603-.921 1.902 0l1.519 4.674a1 1 0 00.95.69h4.915c.969 0 1.371 1.24.588 1.81l-3.976 2.888a1 1 0 00-.363 1.118l1.518 4.674c.3.922-.755 1.688-1.538 1.118l-3.976-2.888a1 1 0 00-1.176 0l-3.976 2.888c-.783.57-1.838-.197-1.538-1.118l1.518-4.674a1 1 0 00-.363-1.118l-3.976-2.888c-.784-.57-.38-1.81.588-1.81h4.914a1 1 0 00.951-.69l1.519-4.674z" />
+      </svg>
+    ),
+    label: '로또 번호 추천',
+    desc: '빅데이터 분석',
+    badge: 'HOT',
+  },
+  {
+    href: '/services/stock',
+    icon: (
+      <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M7 12l3-3 3 3 4-4M8 21l4-4 4 4M3 4h18M4 4h16v12a1 1 0 01-1 1H5a1 1 0 01-1-1V4z" />
+      </svg>
+    ),
+    label: '주식 자동 매매',
+    desc: '텔레그램 연동',
+    badge: 'NEW',
+  },
+  {
+    href: '/services/prompt',
+    icon: (
+      <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z" />
+      </svg>
+    ),
+    label: '프롬프트 엔지니어링',
+    desc: 'AI 최적화',
+  },
+  {
+    href: '/services/automation',
+    icon: (
+      <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z" />
+        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
+      </svg>
+    ),
+    label: '업무 자동화',
+    desc: 'RPA 개발',
+  },
+  {
+    href: '/freelance',
+    icon: (
+      <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M21 13.255A23.931 23.931 0 0112 15c-3.183 0-6.22-.62-9-1.745M16 6V4a2 2 0 00-2-2h-4a2 2 0 00-2 2v2m4 6h.01M5 20h14a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
+      </svg>
+    ),
+    label: '외주 개발',
+    desc: '맞춤형 솔루션',
+  },
+];
+
+interface SidebarProps {
+  isOpen: boolean;
+  onClose: () => void;
+}
+
+export default function Sidebar({ isOpen, onClose }: SidebarProps) {
+  const pathname = usePathname();
+
+  return (
+    <>
+      {/* Mobile overlay */}
+      {isOpen && (
+        <div
+          className="fixed inset-0 bg-black/60 z-20 lg:hidden"
+          onClick={onClose}
+        />
+      )}
+
+      {/* Sidebar */}
+      <aside
+        className={`
+          fixed top-0 left-0 h-full w-64 z-30 flex flex-col
+          bg-[#04102b] border-r border-[#1a3a7a]/50
+          transition-transform duration-300 ease-in-out
+          lg:translate-x-0 lg:static lg:flex
+          ${isOpen ? 'translate-x-0' : '-translate-x-full'}
+        `}
+      >
+        {/* Logo */}
+        <div className="p-5 border-b border-[#1a3a7a]/50 flex-shrink-0">
+          <Link href="/" onClick={onClose} className="flex items-center gap-3 group">
+            <div className="w-10 h-10 rounded-xl bg-gradient-to-br from-blue-500 to-violet-600 flex items-center justify-center text-white font-bold text-base shadow-lg shadow-blue-500/25 flex-shrink-0">
+              쟁
+            </div>
+            <div>
+              <div className="text-white font-bold text-base leading-tight">쟁승메이드</div>
+              <div className="text-blue-400 text-xs font-medium">Premium Dev Services</div>
+            </div>
+          </Link>
+        </div>
+
+        {/* Navigation */}
+        <nav className="flex-1 p-3 space-y-0.5 overflow-y-auto">
+          <div className="px-3 pt-2 pb-1">
+            <span className="text-slate-500 text-xs font-semibold uppercase tracking-wider">메뉴</span>
+          </div>
+          {navItems.map((item) => {
+            const isActive = pathname === item.href;
+            return (
+              <Link
+                key={item.href}
+                href={item.href}
+                onClick={onClose}
+                className={`
+                  flex items-center gap-3 px-3 py-2.5 rounded-xl transition-all duration-150 group relative
+                  ${isActive
+                    ? 'bg-gradient-to-r from-blue-600 to-violet-600 text-white shadow-lg shadow-blue-600/20'
+                    : 'text-slate-400 hover:bg-[#0a1f5c] hover:text-slate-100'
+                  }
+                `}
+              >
+                <span className={`flex-shrink-0 ${isActive ? 'text-white' : 'text-slate-500 group-hover:text-slate-300'}`}>
+                  {item.icon}
+                </span>
+                <div className="flex-1 min-w-0">
+                  <div className={`text-sm font-semibold truncate ${isActive ? 'text-white' : ''}`}>
+                    {item.label}
+                  </div>
+                  <div className={`text-xs truncate ${isActive ? 'text-blue-200' : 'text-slate-600 group-hover:text-slate-500'}`}>
+                    {item.desc}
+                  </div>
+                </div>
+                {item.badge && (
+                  <span className={`
+                    text-xs font-bold px-1.5 py-0.5 rounded-md flex-shrink-0
+                    ${item.badge === 'HOT' ? 'bg-red-500/20 text-red-400' : 'bg-emerald-500/20 text-emerald-400'}
+                  `}>
+                    {item.badge}
+                  </span>
+                )}
+                {isActive && (
+                  <div className="absolute right-2 w-1 h-5 bg-white/40 rounded-full" />
+                )}
+              </Link>
+            );
+          })}
+        </nav>
+
+        {/* Bottom: Developer profile */}
+        <div className="p-4 border-t border-[#1a3a7a]/50 flex-shrink-0">
+          <div className="flex items-center gap-3 px-1">
+            <div className="w-9 h-9 rounded-full bg-gradient-to-br from-blue-400 to-violet-500 flex items-center justify-center text-white text-sm font-bold flex-shrink-0 shadow">
+              쟁
+            </div>
+            <div className="flex-1 min-w-0">
+              <div className="text-white text-sm font-semibold">쟁토리</div>
+              <div className="text-slate-500 text-xs">시니어 백엔드 개발자</div>
+            </div>
+            <div className="w-2 h-2 rounded-full bg-emerald-400 flex-shrink-0" title="온라인" />
+          </div>
+        </div>
+      </aside>
+    </>
+  );
+}

app/freelance/page.tsx

@@ -0,0 +1,526 @@
+'use client';
+
+import { useState, useEffect, useRef } from 'react';
+import ContactForm from '../components/ContactForm';
+
+/* ─── Counter Hook ─── */
+function useCounter(target: number, duration = 1400) {
+  const [count, setCount] = useState(0);
+  const started = useRef(false);
+  const ref = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    const observer = new IntersectionObserver(
+      ([entry]) => {
+        if (entry.isIntersecting && !started.current) {
+          started.current = true;
+          const step = target / (duration / 16);
+          let current = 0;
+          const timer = setInterval(() => {
+            current += step;
+            if (current >= target) {
+              setCount(target);
+              clearInterval(timer);
+            } else {
+              setCount(Math.floor(current));
+            }
+          }, 16);
+        }
+      },
+      { threshold: 0.3 }
+    );
+    if (ref.current) observer.observe(ref.current);
+    return () => observer.disconnect();
+  }, [target, duration]);
+
+  return { count, ref };
+}
+
+/* ─── Data ─── */
+const portfolio = [
+  {
+    title: '주식 자동 매매 프로그램',
+    category: '핀테크 · 알고트레이딩',
+    desc: '텔레그램 연동 주식 자동 매매 시스템. 기술적 분석 신호 기반 자동 매수/매도, 포트폴리오 관리 기능 포함.',
+    tags: ['Python', 'Telegram API', '증권사 API', 'SQLite'],
+    status: '직접 운영 중',
+    statusType: 'live',
+    accentFrom: '#011225',
+    accentTo: '#01204a',
+    accentColor: 'text-emerald-400',
+    borderAccent: 'border-emerald-400/30',
+  },
+  {
+    title: '로또 번호 분석 서비스',
+    category: '데이터 분석 · 구독 서비스',
+    desc: '전체 로또 회차 빅데이터 분석 플랫폼. 출현 빈도, 핫/콜드 번호, 패턴 분석 및 매주 번호 조합 자동 생성.',
+    tags: ['Python', 'FastAPI', 'PostgreSQL', 'Next.js'],
+    status: 'NAS 서버 운영 중',
+    statusType: 'live',
+    accentFrom: '#1a0a00',
+    accentTo: '#3d1a00',
+    accentColor: 'text-amber-400',
+    borderAccent: 'border-amber-400/30',
+  },
+  {
+    title: 'Gmail 자동화 RPA',
+    category: 'RPA · 업무 자동화',
+    desc: '거래처 이메일 수신 시 자동 분류, 답장 초안 작성, 담당자 알림 전송하는 Gmail 자동화 시스템.',
+    tags: ['Python', 'Gmail API', 'Google Apps Script'],
+    status: '납품 완료',
+    statusType: 'done',
+    accentFrom: '#200a0a',
+    accentTo: '#4a1010',
+    accentColor: 'text-red-400',
+    borderAccent: 'border-red-400/20',
+  },
+  {
+    title: '쇼핑몰 가격 모니터링 봇',
+    category: '웹 스크래핑 · 알림 자동화',
+    desc: '경쟁사 쇼핑몰의 특정 상품 가격을 매일 모니터링하여 변동 시 텔레그램으로 즉시 알림.',
+    tags: ['Python', 'Selenium', 'Telegram Bot'],
+    status: '납품 완료',
+    statusType: 'done',
+    accentFrom: '#0d0a2e',
+    accentTo: '#1a0f5c',
+    accentColor: 'text-violet-400',
+    borderAccent: 'border-violet-400/20',
+  },
+  {
+    title: '영업 일보 자동화 시스템',
+    category: '엑셀 자동화 · 보고서 생성',
+    desc: '영업 데이터 엑셀 파일을 자동으로 집계하여 일별/주별/월별 영업 일보 PDF를 생성하고 이메일 발송.',
+    tags: ['Python', 'OpenPyXL', 'ReportLab'],
+    status: '납품 완료',
+    statusType: 'done',
+    accentFrom: '#012030',
+    accentTo: '#013d50',
+    accentColor: 'text-cyan-400',
+    borderAccent: 'border-cyan-400/20',
+  },
+  {
+    title: '부동산 공시지가 수집 시스템',
+    category: '공공 데이터 · API 연동',
+    desc: '국토교통부 공공 API를 통해 특정 지역 공시지가를 주기적으로 수집·저장하고 변동 알림 제공.',
+    tags: ['Python', '공공데이터 API', 'PostgreSQL', 'Telegram'],
+    status: '납품 완료',
+    statusType: 'done',
+    accentFrom: '#04102b',
+    accentTo: '#0a2060',
+    accentColor: 'text-blue-400',
+    borderAccent: 'border-blue-400/20',
+  },
+];
+
+const process = [
+  {
+    num: '01',
+    title: '무료 상담',
+    desc: '전화 또는 이메일로 요구사항 파악 (30분 이내)',
+    sub: '비용 없음 · 부담 없음',
+    icon: (
+      <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z" />
+      </svg>
+    ),
+  },
+  {
+    num: '02',
+    title: '견적 제안',
+    desc: '개발 범위, 일정, 비용 상세 견적서 제공',
+    sub: '1~3일 이내 발송',
+    icon: (
+      <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
+      </svg>
+    ),
+  },
+  {
+    num: '03',
+    title: '계약 체결',
+    desc: '계약서 작성 및 계약금(30%) 입금 후 개발 시작',
+    sub: '계약서 포함 · 안전 거래',
+    icon: (
+      <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z" />
+      </svg>
+    ),
+  },
+  {
+    num: '04',
+    title: '개발 진행',
+    desc: '주 1회 이상 진행 상황 공유 및 중간 검수',
+    sub: '투명한 진행 보고',
+    icon: (
+      <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4" />
+      </svg>
+    ),
+    highlight: true,
+  },
+  {
+    num: '05',
+    title: '최종 납품',
+    desc: '완성본 인도 + 사용 교육 + 소스코드 전달',
+    sub: '소스코드 전체 제공',
+    icon: (
+      <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M5 13l4 4L19 7" />
+      </svg>
+    ),
+  },
+  {
+    num: '06',
+    title: 'AS 지원',
+    desc: '1개월 무상 기술 지원 및 평생 유지보수 가능',
+    sub: '1개월 무상 + 평생 AS',
+    icon: (
+      <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z" />
+      </svg>
+    ),
+  },
+];
+
+/* ─── Sub-components ─── */
+function StatCard({
+  target,
+  suffix = '',
+  label,
+  sublabel,
+  pulse = false,
+  accentClass,
+}: {
+  target: number;
+  suffix?: string;
+  label: string;
+  sublabel: string;
+  pulse?: boolean;
+  accentClass: string;
+}) {
+  const { count, ref } = useCounter(target);
+  return (
+    <div ref={ref} className="bg-[#04102b]/60 border border-[#1a3a7a]/50 rounded-2xl p-6 text-center backdrop-blur">
+      <div className={`text-4xl font-extrabold tracking-tight mb-1 ${accentClass}`}>
+        {count}{suffix}
+      </div>
+      <div className="text-white font-bold text-sm mb-1 flex items-center justify-center gap-2">
+        {pulse && <span className="w-2 h-2 rounded-full bg-emerald-400 animate-pulse flex-shrink-0" />}
+        {label}
+      </div>
+      <div className="text-[#5ba4ff]/50 text-xs">{sublabel}</div>
+    </div>
+  );
+}
+
+/* ─── Main Page ─── */
+export default function FreelancePage() {
+  return (
+    <div className="min-h-full bg-[#f0f5ff]">
+
+      {/* ─── Hero ─── */}
+      <div className="relative overflow-hidden bg-gradient-to-br from-[#04102b] via-[#071a4a] to-[#04102b] px-6 py-14 lg:px-12">
+        <div className="absolute inset-0 opacity-[0.04]"
+          style={{ backgroundImage: 'linear-gradient(#4f8ef7 1px, transparent 1px), linear-gradient(90deg, #4f8ef7 1px, transparent 1px)', backgroundSize: '40px 40px' }} />
+        <div className="absolute right-0 top-0 w-[500px] h-[500px] rounded-full bg-blue-500/5 blur-3xl" />
+
+        <div className="relative max-w-5xl mx-auto">
+          <div className="text-center mb-10">
+            <div className="inline-flex items-center gap-2 bg-emerald-400/10 border border-emerald-400/20 text-emerald-300 text-xs font-semibold px-4 py-2 rounded-full mb-5">
+              <span className="w-2 h-2 rounded-full bg-emerald-400 animate-pulse" />
+              현재 프로젝트 접수 가능
+            </div>
+            <h1 className="text-4xl md:text-5xl font-extrabold text-white tracking-tight leading-tight mb-4">
+              맞춤 개발,<br />
+              <span className="text-transparent bg-clip-text bg-gradient-to-r from-[#5ba4ff] to-[#818cf8]">
+                처음부터 직접 만들어드립니다
+              </span>
+            </h1>
+            <p className="text-blue-200/60 text-base md:text-lg max-w-xl mx-auto leading-relaxed mb-2">
+              검증된 코드 품질을 합리적인 가격에 경험하세요.
+              아이디어만 있어도 충분합니다.
+            </p>
+          </div>
+
+          {/* ─ Live Counters ─ */}
+          <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
+            <StatCard target={2} label="진행 중" sublabel="현재 개발 중인 프로젝트" pulse accentClass="text-emerald-400" />
+            <StatCard target={3} label="상담 중" sublabel="검토 및 견적 협의 중" pulse accentClass="text-amber-400" />
+            <StatCard target={47} suffix="+" label="최종 납품" sublabel="누적 프로젝트 완료" accentClass="text-[#5ba4ff]" />
+            <StatCard target={98} suffix="%" label="고객 만족도" sublabel="재의뢰율 포함" accentClass="text-violet-400" />
+          </div>
+
+          {/* developer tag */}
+          <div className="mt-8 flex justify-center">
+            <div className="inline-flex items-center gap-4 bg-white/5 border border-white/10 rounded-2xl px-6 py-3">
+              <div className="w-10 h-10 rounded-full bg-gradient-to-br from-[#1a56db] to-[#4338ca] flex items-center justify-center text-white font-extrabold text-sm flex-shrink-0">
+                박
+              </div>
+              <div>
+                <div className="text-white font-bold text-sm">쟁토리</div>
+                <div className="text-blue-300/50 text-xs">시니어 백엔드 개발자 · Python / Java / Next.js</div>
+              </div>
+              <div className="hidden sm:flex gap-2">
+                {['Python', 'Java', 'Next.js', 'Docker'].map(t => (
+                  <span key={t} className="bg-[#1a56db]/20 border border-[#1a56db]/30 text-[#5ba4ff] text-xs px-2 py-0.5 rounded-md font-mono">{t}</span>
+                ))}
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      {/* ─── 포트폴리오 ─── */}
+      <div className="px-6 py-12 lg:px-12">
+        <div className="max-w-5xl mx-auto">
+          <div className="text-center mb-8">
+            <p className="text-[#1a56db] text-xs font-bold uppercase tracking-widest mb-2">PORTFOLIO</p>
+            <h2 className="text-2xl md:text-3xl font-extrabold text-[#04102b]">직접 개발한 프로젝트</h2>
+            <p className="text-slate-500 text-sm mt-2">실제 운영 중인 서비스와 납품 완료 프로젝트입니다</p>
+          </div>
+
+          <div className="grid sm:grid-cols-2 lg:grid-cols-3 gap-5">
+            {portfolio.map((item) => (
+              <div
+                key={item.title}
+                className="bg-white rounded-2xl border border-[#dbe8ff] overflow-hidden hover:shadow-xl hover:shadow-blue-100 hover:-translate-y-1 transition-all duration-200 group"
+              >
+                {/* card header */}
+                <div
+                  className="px-5 pt-5 pb-8 relative overflow-hidden"
+                  style={{ background: `linear-gradient(135deg, ${item.accentFrom}, ${item.accentTo})` }}
+                >
+                  {/* grid texture */}
+                  <div className="absolute inset-0 opacity-[0.06]"
+                    style={{ backgroundImage: 'linear-gradient(#fff 1px, transparent 1px), linear-gradient(90deg, #fff 1px, transparent 1px)', backgroundSize: '20px 20px' }} />
+                  <div className="relative flex items-start justify-between">
+                    <div>
+                      <div className={`text-xs font-bold mb-2 uppercase tracking-wider ${item.accentColor}`}>{item.category}</div>
+                      <h3 className="text-white font-extrabold text-sm leading-snug">{item.title}</h3>
+                    </div>
+                    {item.statusType === 'live' ? (
+                      <div className="flex items-center gap-1.5 bg-emerald-400/20 border border-emerald-400/30 text-emerald-300 text-xs font-bold px-2.5 py-1 rounded-full flex-shrink-0 ml-2">
+                        <span className="w-1.5 h-1.5 rounded-full bg-emerald-400 animate-pulse" />
+                        운영 중
+                      </div>
+                    ) : (
+                      <div className="flex items-center gap-1.5 bg-blue-400/20 border border-blue-400/30 text-blue-300 text-xs font-bold px-2.5 py-1 rounded-full flex-shrink-0 ml-2">
+                        <svg className="w-3 h-3" fill="currentColor" viewBox="0 0 20 20">
+                          <path fillRule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clipRule="evenodd" />
+                        </svg>
+                        납품 완료
+                      </div>
+                    )}
+                  </div>
+                </div>
+
+                {/* card body */}
+                <div className="px-5 py-4 -mt-3 relative">
+                  <p className="text-slate-600 text-xs leading-relaxed mb-3">{item.desc}</p>
+                  <div className="flex flex-wrap gap-1.5">
+                    {item.tags.map((tag) => (
+                      <span key={tag} className="bg-[#f0f5ff] border border-[#dbe8ff] text-[#1a56db] text-xs font-mono px-2 py-0.5 rounded-md">
+                        {tag}
+                      </span>
+                    ))}
+                  </div>
+                </div>
+              </div>
+            ))}
+          </div>
+
+          {/* 추가 문구 */}
+          <div className="mt-6 text-center">
+            <p className="text-slate-400 text-sm">
+              위 프로젝트 외에도 다양한 프로젝트 경험이 있습니다 ·{' '}
+              <a href="mailto:bgg8988@gmail.com" className="text-[#1a56db] hover:underline font-medium">포트폴리오 전체 요청</a>
+            </p>
+          </div>
+        </div>
+      </div>
+
+      {/* ─── 진행 프로세스 ─── */}
+      <div className="px-6 pb-12 lg:px-12">
+        <div className="max-w-3xl mx-auto">
+          <div className="text-center mb-10">
+            <p className="text-[#1a56db] text-xs font-bold uppercase tracking-widest mb-2">PROCESS</p>
+            <h2 className="text-2xl md:text-3xl font-extrabold text-[#04102b]">진행 프로세스</h2>
+            <p className="text-slate-500 text-sm mt-2">투명하고 체계적인 6단계로 진행됩니다</p>
+          </div>
+
+          {/* Vertical timeline */}
+          <div className="relative">
+            {/* connecting line */}
+            <div className="absolute left-6 top-6 bottom-6 w-px bg-gradient-to-b from-[#1a56db] via-[#dbe8ff] to-[#1a56db]" />
+
+            <div className="space-y-4">
+              {process.map((p) => (
+                <div key={p.num} className={`relative flex gap-5 ${p.highlight ? '' : ''}`}>
+                  {/* step circle */}
+                  <div className={`relative z-10 w-12 h-12 rounded-xl flex items-center justify-center flex-shrink-0 shadow-lg ${
+                    p.highlight
+                      ? 'bg-gradient-to-br from-[#1a56db] to-[#4338ca] shadow-blue-500/30 border border-[#1a56db]/50'
+                      : 'bg-white border-2 border-[#dbe8ff]'
+                  }`}>
+                    <span className={p.highlight ? 'text-white' : 'text-[#1a56db]'}>{p.icon}</span>
+                  </div>
+
+                  {/* content */}
+                  <div className={`flex-1 rounded-2xl border p-5 mb-0 ${
+                    p.highlight
+                      ? 'bg-gradient-to-br from-[#04102b] to-[#0a2060] border-[#1a56db]/40 shadow-lg shadow-blue-900/20'
+                      : 'bg-white border-[#dbe8ff]'
+                  }`}>
+                    <div className="flex items-start justify-between gap-3">
+                      <div className="flex-1">
+                        <div className="flex items-center gap-2 mb-1">
+                          <span className={`text-xs font-bold font-mono ${p.highlight ? 'text-[#5ba4ff]' : 'text-slate-400'}`}>STEP {p.num}</span>
+                          {p.highlight && (
+                            <span className="bg-[#1a56db]/30 border border-[#1a56db]/40 text-[#5ba4ff] text-xs font-bold px-2 py-0.5 rounded-md">현재 진행</span>
+                          )}
+                        </div>
+                        <h3 className={`font-extrabold text-sm mb-1 ${p.highlight ? 'text-white' : 'text-[#04102b]'}`}>{p.title}</h3>
+                        <p className={`text-xs leading-relaxed ${p.highlight ? 'text-blue-200/60' : 'text-slate-500'}`}>{p.desc}</p>
+                      </div>
+                      <div className={`text-xs font-semibold px-2.5 py-1 rounded-full whitespace-nowrap flex-shrink-0 ${
+                        p.highlight
+                          ? 'bg-[#1a56db]/30 text-[#5ba4ff]'
+                          : 'bg-[#f0f5ff] text-[#1a56db] border border-[#dbe8ff]'
+                      }`}>
+                        {p.sub}
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              ))}
+            </div>
+          </div>
+        </div>
+      </div>
+
+      {/* ─── 기술 스택 & 강점 ─── */}
+      <div className="px-6 pb-12 lg:px-12">
+        <div className="max-w-5xl mx-auto grid md:grid-cols-2 gap-5">
+
+          {/* Tech Stack */}
+          <div className="bg-white rounded-2xl border border-[#dbe8ff] p-6">
+            <div className="flex items-center gap-2 mb-4">
+              <div className="w-1 h-5 bg-gradient-to-b from-[#1a56db] to-[#4338ca] rounded-full" />
+              <h3 className="font-bold text-[#04102b] text-sm">개발 가능 기술 스택</h3>
+            </div>
+            <div className="space-y-3">
+              {[
+                { label: 'Backend', techs: ['Python', 'Java', 'Spring Boot', 'FastAPI', 'Node.js'] },
+                { label: 'Frontend', techs: ['Next.js', 'React', 'TypeScript', 'Tailwind CSS'] },
+                { label: 'Database', techs: ['PostgreSQL', 'MySQL', 'Redis', 'SQLite'] },
+                { label: 'Infra / API', techs: ['Docker', 'AWS', 'Telegram API', '공공 API'] },
+              ].map((group) => (
+                <div key={group.label}>
+                  <div className="text-xs font-bold text-slate-400 mb-1.5 uppercase tracking-wider">{group.label}</div>
+                  <div className="flex flex-wrap gap-1.5">
+                    {group.techs.map((t) => (
+                      <span key={t} className="bg-[#f0f5ff] border border-[#dbe8ff] text-[#1a56db] text-xs font-mono px-2.5 py-1 rounded-lg">
+                        {t}
+                      </span>
+                    ))}
+                  </div>
+                </div>
+              ))}
+            </div>
+          </div>
+
+          {/* 신뢰 포인트 */}
+          <div className="bg-gradient-to-br from-[#04102b] to-[#0a2060] rounded-2xl border border-[#1a3a7a] p-6">
+            <div className="flex items-center gap-2 mb-4">
+              <div className="w-1 h-5 bg-gradient-to-b from-[#5ba4ff] to-[#818cf8] rounded-full" />
+              <h3 className="font-bold text-white text-sm">신뢰할 수 있는 이유</h3>
+            </div>
+            <ul className="space-y-3.5">
+              {[
+                { icon: '🏢', title: '대기업 백엔드 경력', desc: '대기업 수준의 코드 품질과 개발 프로세스 적용' },
+                { icon: '🖥️', title: '운영 중인 실제 서비스', desc: 'NAS 서버에서 로또·주식 시스템 직접 운영' },
+                { icon: '📄', title: '계약서 + 소스코드 제공', desc: '계약서 포함, 완성 후 소스코드 전체 인도' },
+                { icon: '🔒', title: '1개월 무상 AS 보장', desc: '납품 후 버그·문제 발생 시 무료 수정' },
+                { icon: '⚡', title: '24시간 내 답변', desc: '문의 후 하루 이내 답변 보장' },
+              ].map((item) => (
+                <li key={item.title} className="flex items-start gap-3">
+                  <span className="text-base flex-shrink-0 mt-0.5">{item.icon}</span>
+                  <div>
+                    <div className="text-white text-sm font-bold">{item.title}</div>
+                    <div className="text-blue-300/50 text-xs">{item.desc}</div>
+                  </div>
+                </li>
+              ))}
+            </ul>
+          </div>
+        </div>
+      </div>
+
+      {/* ─── 문의 폼 ─── */}
+      <div className="px-6 pb-14 lg:px-12">
+        <div className="max-w-5xl mx-auto">
+          <div className="text-center mb-8">
+            <p className="text-[#1a56db] text-xs font-bold uppercase tracking-widest mb-2">CONTACT</p>
+            <h2 className="text-2xl md:text-3xl font-extrabold text-[#04102b]">프로젝트 문의</h2>
+            <p className="text-slate-500 text-sm mt-2">아이디어만 있어도 충분합니다. 24시간 이내 답변드립니다.</p>
+          </div>
+
+          <div className="grid md:grid-cols-5 gap-6">
+            {/* 왼쪽: 간단 안내 */}
+            <div className="md:col-span-2 space-y-4">
+              <div className="bg-white rounded-2xl border border-[#dbe8ff] p-5">
+                <h3 className="font-bold text-[#04102b] text-sm mb-4">문의 전 체크리스트</h3>
+                <ul className="space-y-2.5">
+                  {[
+                    '어떤 업무를 자동화/개발하고 싶은지',
+                    '현재 사용 중인 시스템 (엑셀, ERP 등)',
+                    '희망하는 완성 일정',
+                    '예산 범위 (대략적으로도 OK)',
+                  ].map((item, i) => (
+                    <li key={item} className="flex items-start gap-2.5 text-xs text-slate-600">
+                      <span className="w-5 h-5 rounded-full bg-[#f0f5ff] border border-[#dbe8ff] text-[#1a56db] font-bold text-xs flex items-center justify-center flex-shrink-0">{i + 1}</span>
+                      {item}
+                    </li>
+                  ))}
+                </ul>
+              </div>
+
+              <div className="bg-white rounded-2xl border border-[#dbe8ff] p-5">
+                <h3 className="font-bold text-[#04102b] text-sm mb-3">직접 연락</h3>
+                <div className="space-y-2.5">
+                  <a href="mailto:bgg8988@gmail.com" className="flex items-center gap-2.5 text-sm text-slate-600 hover:text-[#1a56db] transition group">
+                    <div className="w-8 h-8 rounded-lg bg-[#f0f5ff] border border-[#dbe8ff] flex items-center justify-center group-hover:bg-[#1a56db] group-hover:border-[#1a56db] transition">
+                      <svg className="w-4 h-4 text-[#1a56db] group-hover:text-white transition" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
+                      </svg>
+                    </div>
+                    bgg8988@gmail.com
+                  </a>
+                  <a href="tel:010-3907-1392" className="flex items-center gap-2.5 text-sm text-slate-600 hover:text-[#1a56db] transition group">
+                    <div className="w-8 h-8 rounded-lg bg-[#f0f5ff] border border-[#dbe8ff] flex items-center justify-center group-hover:bg-[#1a56db] group-hover:border-[#1a56db] transition">
+                      <svg className="w-4 h-4 text-[#1a56db] group-hover:text-white transition" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z" />
+                      </svg>
+                    </div>
+                    010-3907-1392
+                  </a>
+                </div>
+              </div>
+
+              <div className="bg-gradient-to-br from-[#04102b] to-[#0a2060] rounded-2xl border border-[#1a3a7a] p-5 text-center">
+                <div className="text-2xl font-extrabold text-white mb-0.5">24h</div>
+                <div className="text-[#5ba4ff] text-xs font-bold mb-1">이내 답변 보장</div>
+                <div className="text-blue-300/40 text-xs">영업일 기준 · 주말 포함</div>
+              </div>
+            </div>
+
+            {/* 오른쪽: 폼 */}
+            <div className="md:col-span-3 bg-white rounded-2xl border border-[#dbe8ff] p-6">
+              <ContactForm />
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

app/globals.css

@@ -1,31 +1,110 @@
 @import "tailwindcss";
 
+/* ─── CookieRun Font (상업적 이용 가능 라이선스) ─── */
+@font-face {
+  font-family: 'CookieRun';
+  src: url('/fonts/CookieRun-Regular.otf') format('opentype');
+  font-weight: 400;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'CookieRun';
+  src: url('/fonts/CookieRun-Bold.otf') format('opentype');
+  font-weight: 700;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'CookieRun';
+  src: url('/fonts/CookieRun-Black.otf') format('opentype');
+  font-weight: 900;
+  font-style: normal;
+  font-display: swap;
+}
+
 :root {
-  --background: #ffffff;
+  --background: #f0f5ff;
-  --foreground: #171717;
+  --foreground: #04102b;
-  --primary: #1e40af;
+  --primary: #1a56db;
-  --primary-light: #3b82f6;
+  --primary-hover: #1e4fc2;
-  --accent: #10b981;
+  --secondary: #4338ca;
-  --dark: #0f172a;
+  --secondary-hover: #3730a3;
+  --sidebar-bg: #04102b;
+  --card-bg: #ffffff;
+  --border: #dbe8ff;
 }
 
 @theme inline {
   --color-background: var(--background);
   --color-foreground: var(--foreground);
   --color-primary: var(--primary);
-  --color-primary-light: var(--primary-light);
+  --color-secondary: var(--secondary);
-  --color-accent: var(--accent);
+  --font-sans: 'CookieRun', -apple-system, system-ui, sans-serif;
-  --color-dark: var(--dark);
+  --font-mono: 'Geist Mono', ui-monospace, monospace;
-  --font-sans: var(--font-geist-sans);
-  --font-mono: var(--font-geist-mono);
 }
 
-body {
+* {
-  background: var(--background);
+  box-sizing: border-box;
-  color: var(--foreground);
-  font-family: var(--font-geist-sans), system-ui, -apple-system, sans-serif;
 }
 
 html {
   scroll-behavior: smooth;
 }
+
+body {
+  background: var(--background);
+  color: var(--foreground);
+  font-family: 'CookieRun', -apple-system, system-ui, sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+/* Dashboard layout */
+.dashboard-layout {
+  display: flex;
+  height: 100dvh;
+  overflow: hidden;
+  background: var(--background);
+}
+
+.main-content {
+  flex: 1;
+  overflow-y: auto;
+  min-width: 0;
+}
+
+/* Gradient text utility */
+.gradient-text {
+  background: linear-gradient(135deg, #2563eb, #7c3aed);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+}
+
+/* Service card hover */
+.service-card {
+  transition: transform 0.2s ease, box-shadow 0.2s ease;
+}
+
+.service-card:hover {
+  transform: translateY(-4px);
+  box-shadow: 0 20px 40px rgba(37, 99, 235, 0.12);
+}
+
+/* Scrollbar styling */
+::-webkit-scrollbar {
+  width: 6px;
+}
+::-webkit-scrollbar-track {
+  background: transparent;
+}
+::-webkit-scrollbar-thumb {
+  background: #cbd5e1;
+  border-radius: 3px;
+}
+::-webkit-scrollbar-thumb:hover {
+  background: #94a3b8;
+}

app/layout.tsx

@@ -1,34 +1,46 @@
 import type { Metadata } from "next";
-import { Geist, Geist_Mono } from "next/font/google";
+import Script from "next/script";
 import "./globals.css";
-
+import DashboardShell from "./components/DashboardShell";
-const geistSans = Geist({
-  variable: "--font-geist-sans",
-  subsets: ["latin"],
-});
-
-const geistMono = Geist_Mono({
-  variable: "--font-geist-mono",
-  subsets: ["latin"],
-});
 
 export const metadata: Metadata = {
-  title: "쟁승메이드 | RPA 자동화 & 비즈니스 솔루션 전문",
+  title: "쟁승메이드 | 쟁토리의 프리미엄 개발 서비스",
-  description: "RPA 자동화, 웹 개발, 앱 개발까지. 대기업 출신 개발자가 제공하는 전문 비즈니스 솔루션",
+  description:
-  keywords: ["RPA", "자동화", "웹개발", "앱개발", "외주개발", "비즈니스솔루션"],
+    "로또 번호 추천, 주식 자동 매매, 프롬프트 엔지니어링, 업무 자동화. 쟁토리가 제공하는 신뢰할 수 있는 개발 서비스.",
+  keywords: [
+    "로또 번호 추천",
+    "주식 자동 매매",
+    "프롬프트 엔지니어링",
+    "업무 자동화",
+    "RPA",
+    "외주 개발",
+    "텔레그램 봇",
+  ],
 };
 
 export default function RootLayout({
   children,
-}: Readonly<{
+}: {
   children: React.ReactNode;
-}>) {
+}) {
   return (
-    <html lang="en">
+    <html lang="ko">
-      <body
+      <head>
-        className={`${geistSans.variable} ${geistMono.variable} antialiased`}
+        <Script
-      >
+          src="https://www.googletagmanager.com/gtag/js?id=G-WG77RNHXRK"
-        {children}
+          strategy="afterInteractive"
+        />
+        <Script id="google-analytics" strategy="afterInteractive">
+          {`
+            window.dataLayer = window.dataLayer || [];
+            function gtag(){dataLayer.push(arguments);}
+            gtag('js', new Date());
+            gtag('config', 'G-WG77RNHXRK');
+          `}
+        </Script>
+      </head>
+      <body className="antialiased">
+        <DashboardShell>{children}</DashboardShell>
       </body>
     </html>
   );

app/page.tsx

@@ -1,378 +1,363 @@
-import ContactForm from './components/ContactForm';
+'use client';
+
+import { useState } from 'react';
+import Link from 'next/link';
+import ContactModal from './components/ContactModal';
+
+const stats = [
+  { value: '7년+', label: '개발 경력' },
+  { value: '100+', label: '완료 프로젝트' },
+  { value: '24h', label: '평균 응답' },
+  { value: '98%', label: '고객 만족도' },
+];
+
+const techStack = [
+  'Python', 'Java', 'Spring Boot', 'Next.js', 'React',
+  'PostgreSQL', 'Redis', 'Docker', 'AWS', 'Telegram API',
+];
+
+const CHECKLIST_MAP: Record<string, string[]> = {
+  '로또 번호 추천': [
+    '구독 플랜 선택 (기본 / 프리미엄 / 연간)',
+    '번호 수신 방법 (이메일 / 텔레그램)',
+    '당첨 보장 없음 — 통계 기반 확률 최적화',
+    '구독 취소는 이메일로 언제든 가능',
+  ],
+  '주식 자동 매매': [
+    '사용 중인 증권사 확인 (키움/한국투자 권장)',
+    'Windows PC 또는 서버 환경 필요',
+    '원금 손실 위험 인지 — 여유 자금 운용 권장',
+    '전략 커스터마이징은 프로 플랜 이상 가능',
+  ],
+  '프롬프트 엔지니어링': [
+    '사용 중인 AI 도구 (ChatGPT / Claude / Gemini)',
+    '자동화할 업무 유형 구체적으로 설명',
+    '필요한 프롬프트 수량 (단건 / 패키지)',
+    '납품 후 사용 가이드 및 1:1 교육 포함',
+  ],
+  '업무 자동화': [
+    '자동화하고 싶은 업무를 구체적으로 설명',
+    '현재 사용 중인 시스템 (엑셀, ERP 등)',
+    '희망 납품 일정과 예산 범위',
+    '데이터 민감도 여부 확인',
+  ],
+};
 
 export default function Home() {
+  const [modalOpen, setModalOpen] = useState(false);
+  const [modalService, setModalService] = useState('외주 개발 문의');
+  const [modalChecklist, setModalChecklist] = useState<string[]>([]);
+  const [modalHeaderFrom, setModalHeaderFrom] = useState('#04102b');
+  const [modalHeaderTo, setModalHeaderTo] = useState('#0a2060');
+  const [modalAccent, setModalAccent] = useState('text-[#5ba4ff]');
+
+  const openModal = (service: string, headerFrom = '#04102b', headerTo = '#0a2060', accent = 'text-[#5ba4ff]') => {
+    const key = Object.keys(CHECKLIST_MAP).find(k => service.includes(k)) || '';
+    setModalService(service);
+    setModalChecklist(CHECKLIST_MAP[key] || ['문의 내용을 자유롭게 작성해주세요.', '예산 및 일정도 알려주시면 도움이 됩니다.']);
+    setModalHeaderFrom(headerFrom);
+    setModalHeaderTo(headerTo);
+    setModalAccent(accent);
+    setModalOpen(true);
+  };
+
   return (
-    <div className="min-h-screen">
+    <div className="min-h-full bg-[#f0f5ff]">
-      {/* Navigation */}
+      <ContactModal
-      <nav className="fixed top-0 w-full bg-white/90 backdrop-blur-sm z-50 border-b border-gray-200">
+        isOpen={modalOpen}
-        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+        onClose={() => setModalOpen(false)}
-          <div className="flex justify-between items-center h-16">
+        service={modalService}
-            <div className="text-2xl font-bold text-blue-900">쟁승메이드</div>
+        checklist={modalChecklist}
-            <div className="hidden md:flex space-x-8">
+        accentColor={modalAccent}
-              <a href="#services" className="text-gray-700 hover:text-blue-700 transition">서비스</a>
+        headerFrom={modalHeaderFrom}
-              <a href="#portfolio" className="text-gray-700 hover:text-blue-700 transition">포트폴리오</a>
+        headerTo={modalHeaderTo}
-              <a href="#about" className="text-gray-700 hover:text-blue-700 transition">소개</a>
+      />
-              <a href="#contact" className="bg-blue-700 text-white px-6 py-2 rounded-lg hover:bg-blue-800 transition">문의하기</a>
-            </div>
-          </div>
-        </div>
-      </nav>
 
-      {/* Hero Section */}
+      {/* ─── Hero ─── */}
-      <section className="pt-32 pb-20 px-4 bg-gradient-to-br from-blue-50 via-white to-emerald-50">
+      <div className="relative overflow-hidden bg-gradient-to-br from-[#04102b] via-[#0a1f5c] to-[#04102b] px-6 py-14 lg:px-12">
-        <div className="max-w-7xl mx-auto text-center">
+        <div className="absolute inset-0 opacity-[0.04]"
-          <div className="inline-block mb-4 px-4 py-2 bg-blue-100 text-blue-700 rounded-full text-sm font-semibold">
+          style={{ backgroundImage: 'linear-gradient(#4f8ef7 1px, transparent 1px), linear-gradient(90deg, #4f8ef7 1px, transparent 1px)', backgroundSize: '40px 40px' }} />
-            🤖 RPA 자동화 전문
+        <div className="absolute right-0 top-0 w-96 h-96 rounded-full bg-blue-500/10 blur-3xl -translate-y-1/2 translate-x-1/3" />
+        <div className="absolute left-1/2 bottom-0 w-64 h-64 rounded-full bg-indigo-400/10 blur-3xl translate-y-1/2" />
+
+        <div className="relative max-w-3xl mx-auto text-center">
+          <div className="inline-flex items-center gap-2 bg-blue-400/10 border border-blue-400/25 text-blue-300 text-xs font-semibold px-4 py-1.5 rounded-full mb-5 tracking-wide">
+            <span className="w-1.5 h-1.5 rounded-full bg-emerald-400 animate-pulse" />
+            7년차 대기업 백엔드 개발자 · 현재 서비스 운영 중
           </div>
-          <h1 className="text-5xl md:text-7xl font-bold text-gray-900 mb-6 leading-tight">
+          <h1 className="text-4xl md:text-5xl font-extrabold text-white leading-tight mb-5 tracking-tight">
-            반복 업무를 <span className="text-blue-700">자동화</span>하고<br />
+            실제로 작동하는<br />
-            생산성을 <span className="text-emerald-600">극대화</span>하세요
+            <span className="text-transparent bg-clip-text bg-gradient-to-r from-[#5ba4ff] to-[#818cf8]">
+              개발 서비스
+            </span>
+            를 제공합니다
           </h1>
-          <p className="text-xl text-gray-600 mb-10 max-w-3xl mx-auto leading-relaxed">
+          <p className="text-blue-200/70 text-base md:text-lg leading-relaxed mb-8 max-w-xl mx-auto">
-            대기업 출신 개발자가 제공하는 RPA 자동화, 웹/앱 개발 솔루션.<br />
+            대기업 개발 경험을 바탕으로, NAS 서버에서 로또 분석·주식 자동매매를
-            엑셀 자동화부터 복잡한 업무 프로세스까지, 비즈니스 성장을 가속화합니다.
+            직접 운영하며 검증된 솔루션만 제공합니다.
           </p>
-          <div className="flex flex-col sm:flex-row gap-4 justify-center">
+          <div className="flex flex-wrap gap-3 justify-center">
-            <a href="#contact" className="bg-blue-700 text-white px-8 py-4 rounded-lg text-lg font-semibold hover:bg-blue-800 transition shadow-lg">
+            <button
+              onClick={() => openModal('외주 개발 문의')}
+              className="inline-flex items-center gap-2 bg-[#1a56db] hover:bg-[#1e4fc2] text-white px-7 py-3 rounded-xl font-semibold text-sm transition-all shadow-lg shadow-blue-900/50"
+            >
+              <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z" />
+              </svg>
               무료 상담 신청
-            </a>
+            </button>
-            <a href="#services" className="border-2 border-blue-700 text-blue-700 px-8 py-4 rounded-lg text-lg font-semibold hover:bg-blue-50 transition">
+            <a
-              서비스 둘러보기
+              href="mailto:bgg8988@gmail.com"
-            </a>
+              className="inline-flex items-center gap-2 bg-white/5 border border-white/10 text-blue-200 px-7 py-3 rounded-xl font-semibold text-sm hover:bg-white/10 transition-all"
-          </div>
+            >
-
+              bgg8988@gmail.com
-          <div className="mt-16 grid grid-cols-2 md:grid-cols-4 gap-8 max-w-4xl mx-auto">
-            <div>
-              <div className="text-4xl font-bold text-blue-700">100+</div>
-              <div className="text-gray-600 mt-2">프로젝트 경험</div>
-            </div>
-            <div>
-              <div className="text-4xl font-bold text-blue-700">24h</div>
-              <div className="text-gray-600 mt-2">평균 응답 시간</div>
-            </div>
-            <div>
-              <div className="text-4xl font-bold text-blue-700">98%</div>
-              <div className="text-gray-600 mt-2">고객 만족도</div>
-            </div>
-            <div>
-              <div className="text-4xl font-bold text-blue-700">5년+</div>
-              <div className="text-gray-600 mt-2">개발 경력</div>
-            </div>
-          </div>
-        </div>
-      </section>
-
-      {/* Services Section */}
-      <section id="services" className="py-20 px-4 bg-white">
-        <div className="max-w-7xl mx-auto">
-          <div className="text-center mb-16">
-            <h2 className="text-4xl md:text-5xl font-bold text-gray-900 mb-4">제공 서비스</h2>
-            <p className="text-xl text-gray-600">비즈니스 목표에 맞는 맞춤형 솔루션을 제공합니다</p>
-          </div>
-
-          <div className="grid md:grid-cols-3 gap-8">
-            {/* RPA 자동화 - Featured */}
-            <div className="relative bg-gradient-to-br from-blue-700 to-blue-900 rounded-2xl p-8 text-white shadow-2xl transform hover:scale-105 transition">
-              <div className="absolute -top-4 -right-4 bg-emerald-500 text-white px-4 py-2 rounded-full text-sm font-bold">
-                추천
-              </div>
-              <div className="text-5xl mb-4">🤖</div>
-              <h3 className="text-2xl font-bold mb-3">RPA 자동화</h3>
-              <p className="text-blue-100 mb-6">
-                반복적인 업무를 자동화하여 시간과 비용을 절감하세요
-              </p>
-              <div className="space-y-3 mb-6">
-                <div className="flex items-center">
-                  <span className="mr-2">✓</span> 엑셀/데이터 자동화
-                </div>
-                <div className="flex items-center">
-                  <span className="mr-2">✓</span> 웹 스크래핑
-                </div>
-                <div className="flex items-center">
-                  <span className="mr-2">✓</span> 업무 프로세스 자동화
-                </div>
-                <div className="flex items-center">
-                  <span className="mr-2">✓</span> 데이터 수집/처리
-                </div>
-              </div>
-              <div className="border-t border-blue-600 pt-4">
-                <div className="text-3xl font-bold mb-2">50만원~</div>
-                <div className="text-blue-200 text-sm">프로젝트 규모에 따라 상이</div>
-              </div>
-            </div>
-
-            {/* 웹 개발 */}
-            <div className="bg-white border-2 border-gray-200 rounded-2xl p-8 hover:border-blue-500 hover:shadow-xl transition">
-              <div className="text-5xl mb-4">💻</div>
-              <h3 className="text-2xl font-bold text-gray-900 mb-3">웹 개발</h3>
-              <p className="text-gray-600 mb-6">
-                현대적이고 반응형인 웹사이트/웹앱을 구축합니다
-              </p>
-              <div className="space-y-3 mb-6 text-gray-700">
-                <div className="flex items-center">
-                  <span className="mr-2">✓</span> 랜딩 페이지
-                </div>
-                <div className="flex items-center">
-                  <span className="mr-2">✓</span> 기업 홈페이지
-                </div>
-                <div className="flex items-center">
-                  <span className="mr-2">✓</span> 관리자 대시보드
-                </div>
-                <div className="flex items-center">
-                  <span className="mr-2">✓</span> E-Commerce
-                </div>
-              </div>
-              <div className="border-t border-gray-200 pt-4">
-                <div className="text-3xl font-bold text-gray-900 mb-2">200만원~</div>
-                <div className="text-gray-500 text-sm">기능에 따라 상이</div>
-              </div>
-            </div>
-
-            {/* 앱 개발 */}
-            <div className="bg-white border-2 border-gray-200 rounded-2xl p-8 hover:border-blue-500 hover:shadow-xl transition">
-              <div className="text-5xl mb-4">📱</div>
-              <h3 className="text-2xl font-bold text-gray-900 mb-3">앱 개발</h3>
-              <p className="text-gray-600 mb-6">
-                iOS/Android 크로스 플랫폼 앱을 개발합니다
-              </p>
-              <div className="space-y-3 mb-6 text-gray-700">
-                <div className="flex items-center">
-                  <span className="mr-2">✓</span> 모바일 앱
-                </div>
-                <div className="flex items-center">
-                  <span className="mr-2">✓</span> 하이브리드 앱
-                </div>
-                <div className="flex items-center">
-                  <span className="mr-2">✓</span> 업무용 앱
-                </div>
-                <div className="flex items-center">
-                  <span className="mr-2">✓</span> 커스텀 기능
-                </div>
-              </div>
-              <div className="border-t border-gray-200 pt-4">
-                <div className="text-3xl font-bold text-gray-900 mb-2">300만원~</div>
-                <div className="text-gray-500 text-sm">복잡도에 따라 상이</div>
-              </div>
-            </div>
-          </div>
-
-          {/* Custom Solution */}
-          <div className="mt-12 bg-gradient-to-r from-gray-50 to-blue-50 rounded-2xl p-8 border border-gray-200">
-            <div className="flex flex-col md:flex-row items-center justify-between">
-              <div className="mb-4 md:mb-0">
-                <h3 className="text-2xl font-bold text-gray-900 mb-2">🔧 맞춤형 솔루션</h3>
-                <p className="text-gray-600">특별한 요구사항이 있으신가요? 무엇이든 상담해주세요.</p>
-              </div>
-              <a href="#contact" className="bg-gray-900 text-white px-8 py-3 rounded-lg font-semibold hover:bg-gray-800 transition whitespace-nowrap">
-                견적 문의
-              </a>
-            </div>
-          </div>
-        </div>
-      </section>
-
-      {/* Portfolio Section */}
-      <section id="portfolio" className="py-20 px-4 bg-gray-50">
-        <div className="max-w-7xl mx-auto">
-          <div className="text-center mb-16">
-            <h2 className="text-4xl md:text-5xl font-bold text-gray-900 mb-4">프로젝트 포트폴리오</h2>
-            <p className="text-xl text-gray-600">실제 구현한 프로젝트를 확인해보세요</p>
-          </div>
-
-          <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
-            {/* Portfolio Item 1 */}
-            <div className="bg-white rounded-xl overflow-hidden shadow-lg hover:shadow-2xl transition">
-              <div className="bg-gradient-to-br from-blue-500 to-blue-700 h-48 flex items-center justify-center">
-                <div className="text-white text-6xl">📊</div>
-              </div>
-              <div className="p-6">
-                <div className="text-sm text-blue-700 font-semibold mb-2">RPA 자동화</div>
-                <h3 className="text-xl font-bold text-gray-900 mb-2">엑셀 데이터 자동 처리</h3>
-                <p className="text-gray-600 mb-4">
-                  매일 반복되는 엑셀 작업을 자동화하여 5시간 → 10분으로 단축
-                </p>
-                <div className="flex flex-wrap gap-2">
-                  <span className="px-3 py-1 bg-blue-100 text-blue-700 rounded-full text-sm">Python</span>
-                  <span className="px-3 py-1 bg-blue-100 text-blue-700 rounded-full text-sm">Pandas</span>
-                  <span className="px-3 py-1 bg-blue-100 text-blue-700 rounded-full text-sm">Openpyxl</span>
-                </div>
-              </div>
-            </div>
-
-            {/* Portfolio Item 2 */}
-            <div className="bg-white rounded-xl overflow-hidden shadow-lg hover:shadow-2xl transition">
-              <div className="bg-gradient-to-br from-emerald-500 to-emerald-700 h-48 flex items-center justify-center">
-                <div className="text-white text-6xl">🌐</div>
-              </div>
-              <div className="p-6">
-                <div className="text-sm text-emerald-700 font-semibold mb-2">웹 개발</div>
-                <h3 className="text-xl font-bold text-gray-900 mb-2">기업 홈페이지 제작</h3>
-                <p className="text-gray-600 mb-4">
-                  반응형 디자인과 SEO 최적화로 방문자 200% 증가
-                </p>
-                <div className="flex flex-wrap gap-2">
-                  <span className="px-3 py-1 bg-emerald-100 text-emerald-700 rounded-full text-sm">Next.js</span>
-                  <span className="px-3 py-1 bg-emerald-100 text-emerald-700 rounded-full text-sm">React</span>
-                  <span className="px-3 py-1 bg-emerald-100 text-emerald-700 rounded-full text-sm">Tailwind</span>
-                </div>
-              </div>
-            </div>
-
-            {/* Portfolio Item 3 */}
-            <div className="bg-white rounded-xl overflow-hidden shadow-lg hover:shadow-2xl transition">
-              <div className="bg-gradient-to-br from-purple-500 to-purple-700 h-48 flex items-center justify-center">
-                <div className="text-white text-6xl">🤖</div>
-              </div>
-              <div className="p-6">
-                <div className="text-sm text-purple-700 font-semibold mb-2">RPA 자동화</div>
-                <h3 className="text-xl font-bold text-gray-900 mb-2">웹 스크래핑 봇</h3>
-                <p className="text-gray-600 mb-4">
-                  실시간 데이터 수집 및 분석 자동화 시스템 구축
-                </p>
-                <div className="flex flex-wrap gap-2">
-                  <span className="px-3 py-1 bg-purple-100 text-purple-700 rounded-full text-sm">Python</span>
-                  <span className="px-3 py-1 bg-purple-100 text-purple-700 rounded-full text-sm">Selenium</span>
-                  <span className="px-3 py-1 bg-purple-100 text-purple-700 rounded-full text-sm">BeautifulSoup</span>
-                </div>
-              </div>
-            </div>
-          </div>
-
-          <div className="text-center mt-12">
-            <p className="text-gray-600 mb-4">더 많은 프로젝트는 GitHub에서 확인하세요</p>
-            <a href="#contact" className="inline-block border-2 border-blue-700 text-blue-700 px-8 py-3 rounded-lg font-semibold hover:bg-blue-50 transition">
-              전체 포트폴리오 보기
             </a>
           </div>
         </div>
-      </section>
 
-      {/* About Section */}
+        {/* Stats */}
-      <section id="about" className="py-20 px-4 bg-slate-900 text-white">
+        <div className="relative mt-10 max-w-3xl mx-auto grid grid-cols-2 md:grid-cols-4 gap-px bg-white/5 rounded-2xl overflow-hidden border border-white/8">
-        <div className="max-w-7xl mx-auto">
+          {stats.map((s) => (
-          <div className="grid md:grid-cols-2 gap-12 items-center">
+            <div key={s.label} className="bg-[#071540]/60 backdrop-blur px-6 py-4 text-center">
-            <div>
+              <div className="text-2xl font-extrabold text-white tracking-tight">{s.value}</div>
-              <h2 className="text-4xl md:text-5xl font-bold mb-6">신뢰할 수 있는<br />전문 개발자</h2>
+              <div className="text-blue-300/60 text-xs mt-0.5 font-medium">{s.label}</div>
-              <p className="text-xl text-gray-300 mb-8 leading-relaxed">
+            </div>
-                대기업에서 쌓은 5년 이상의 실무 경험을 바탕으로,
+          ))}
-                고품질의 비즈니스 솔루션을 제공합니다.
+        </div>
-                단순한 개발이 아닌, 비즈니스 성장을 위한 파트너가 되겠습니다.
+      </div>
-              </p>
+
-              <div className="space-y-4">
+      {/* ─── Services Grid ─── */}
-                <div className="flex items-start">
+      <div className="px-6 py-12 lg:px-12">
-                  <div className="text-2xl mr-4">🏢</div>
+        <div className="max-w-5xl mx-auto">
-                  <div>
+          <div className="text-center mb-10">
-                    <div className="font-bold text-lg">대기업 개발자 출신</div>
+            <p className="text-[#1a56db] text-xs font-bold uppercase tracking-widest mb-2">SERVICES</p>
-                    <div className="text-gray-400">검증된 개발 역량과 프로젝트 관리 능력</div>
+            <h2 className="text-2xl md:text-3xl font-extrabold text-[#04102b] tracking-tight">제공 서비스</h2>
-                  </div>
+            <p className="text-slate-500 text-sm mt-2">카드를 클릭하면 상세 정보와 요금을 확인할 수 있습니다</p>
+          </div>
+
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+
+            {/* ─ 로또 ─ */}
+            <Link href="/services/lotto" className="service-card group bg-white rounded-2xl border border-[#dbe8ff] overflow-hidden hover:border-[#1a56db]/30 hover:shadow-xl hover:shadow-blue-100">
+              <div className="relative bg-gradient-to-br from-[#04102b] to-[#0a2060] px-6 pt-7 pb-16 overflow-hidden">
+                <div className="absolute bottom-0 left-0 right-0 flex justify-center gap-2 pb-3 opacity-20">
+                  {[1,2,3,4,5,6].map(n => (
+                    <div key={n} className="w-9 h-9 rounded-full border-2 border-amber-400 flex items-center justify-center text-amber-300 text-xs font-bold">{String(n*7%45+1).padStart(2,'0')}</div>
+                  ))}
                 </div>
-                <div className="flex items-start">
+                <div className="absolute top-3 right-4 w-24 h-24 rounded-full bg-amber-400/10 blur-xl" />
-                  <div className="text-2xl mr-4">⚡</div>
+                <span className="absolute top-4 right-4 bg-red-500 text-white text-xs font-bold px-2 py-0.5 rounded-lg tracking-wide">HOT</span>
-                  <div>
+                <div className="relative">
-                    <div className="font-bold text-lg">빠른 커뮤니케이션</div>
+                  <div className="w-11 h-11 rounded-xl bg-amber-400/20 border border-amber-400/30 flex items-center justify-center mb-3">
-                    <div className="text-gray-400">평균 24시간 이내 응답, 실시간 진행상황 공유</div>
+                    <svg className="w-6 h-6 text-amber-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                  </div>
+                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M11.049 2.927c.3-.921 1.603-.921 1.902 0l1.519 4.674a1 1 0 00.95.69h4.915c.969 0 1.371 1.24.588 1.81l-3.976 2.888a1 1 0 00-.363 1.118l1.518 4.674c.3.922-.755 1.688-1.538 1.118l-3.976-2.888a1 1 0 00-1.176 0l-3.976 2.888c-.783.57-1.838-.197-1.538-1.118l1.518-4.674a1 1 0 00-.363-1.118l-3.976-2.888c-.784-.57-.38-1.81.588-1.81h4.914a1 1 0 00.951-.69l1.519-4.674z" />
-                </div>
+                    </svg>
-                <div className="flex items-start">
-                  <div className="text-2xl mr-4">🎯</div>
-                  <div>
-                    <div className="font-bold text-lg">결과 중심</div>
-                    <div className="text-gray-400">고객의 ROI를 최우선으로 생각하는 솔루션 제공</div>
                   </div>
+                  <div className="text-amber-400/70 text-xs font-semibold mb-0.5 tracking-wide">LOTTO ANALYTICS</div>
+                  <h3 className="text-white text-xl font-extrabold">로또 번호 추천</h3>
                 </div>
               </div>
-            </div>
+              <div className="px-6 py-5">
-            <div className="bg-slate-800 rounded-2xl p-8">
+                <p className="text-slate-600 text-sm leading-relaxed mb-4">출현 빈도, 패턴 분석, 핫/콜드 번호 알고리즘으로 매주 최적의 번호 조합을 제공합니다.</p>
-              <h3 className="text-2xl font-bold mb-6">기술 스택</h3>
+                <div className="space-y-2 mb-5">
-              <div className="space-y-6">
+                  {['출현 빈도 통계 분석', '핫넘버 / 콜드넘버', '매주 5개 조합 제공'].map(f => (
-                <div>
+                    <div key={f} className="flex items-center gap-2 text-sm text-slate-700">
-                  <div className="text-sm text-gray-400 mb-2">Backend</div>
+                      <div className="w-4 h-4 rounded-full bg-amber-100 border border-amber-200 flex items-center justify-center flex-shrink-0"><div className="w-1.5 h-1.5 rounded-full bg-amber-500" /></div>
-                  <div className="flex flex-wrap gap-2">
+                      {f}
-                    <span className="px-4 py-2 bg-blue-900 rounded-lg">Python</span>
+                    </div>
-                    <span className="px-4 py-2 bg-blue-900 rounded-lg">Node.js</span>
+                  ))}
-                    <span className="px-4 py-2 bg-blue-900 rounded-lg">Java</span>
-                    <span className="px-4 py-2 bg-blue-900 rounded-lg">C/C++/C#</span>
-                  </div>
                 </div>
-                <div>
+                <div className="flex items-center justify-between pt-4 border-t border-slate-100">
-                  <div className="text-sm text-gray-400 mb-2">Frontend</div>
+                  <div>
-                  <div className="flex flex-wrap gap-2">
+                    <span className="text-[#04102b] font-extrabold text-lg">월 4,900원~</span>
-                    <span className="px-4 py-2 bg-blue-900 rounded-lg">React</span>
+                    <span className="ml-2 text-xs bg-amber-50 border border-amber-200 text-amber-700 px-2 py-0.5 rounded-full font-medium">구독형</span>
-                    <span className="px-4 py-2 bg-blue-900 rounded-lg">Next.js</span>
-                    <span className="px-4 py-2 bg-blue-900 rounded-lg">TypeScript</span>
-                  </div>
-                </div>
-                <div>
-                  <div className="text-sm text-gray-400 mb-2">RPA & Automation</div>
-                  <div className="flex flex-wrap gap-2">
-                    <span className="px-4 py-2 bg-emerald-900 rounded-lg">Selenium</span>
-                    <span className="px-4 py-2 bg-emerald-900 rounded-lg">Pandas</span>
-                    <span className="px-4 py-2 bg-emerald-900 rounded-lg">Playwright</span>
-                    <span className="px-4 py-2 bg-emerald-900 rounded-lg">RPA</span>
-                  </div>
-                </div>
-                <div>
-                  <div className="text-sm text-gray-400 mb-2">Database & Cloud</div>
-                  <div className="flex flex-wrap gap-2">
-                    <span className="px-4 py-2 bg-blue-900 rounded-lg">PostgreSQL</span>
-                    <span className="px-4 py-2 bg-blue-900 rounded-lg">MongoDB</span>
-                    <span className="px-4 py-2 bg-blue-900 rounded-lg">AWS</span>
                   </div>
+                  <span className="text-[#1a56db] text-sm font-semibold flex items-center gap-1">자세히 보기 →</span>
                 </div>
               </div>
-            </div>
+            </Link>
-          </div>
-        </div>
-      </section>
 
-      {/* Contact Section */}
+            {/* ─ 주식 ─ */}
-      <section id="contact" className="py-20 px-4 bg-gradient-to-br from-blue-50 to-emerald-50">
+            <Link href="/services/stock" className="service-card group bg-white rounded-2xl border border-[#dbe8ff] overflow-hidden hover:border-[#1a56db]/30 hover:shadow-xl hover:shadow-blue-100">
-        <div className="max-w-4xl mx-auto">
+              <div className="relative bg-gradient-to-br from-[#011f3d] to-[#032e5c] px-6 pt-7 pb-6 overflow-hidden">
-          <div className="text-center mb-12">
+                <svg className="absolute bottom-0 left-0 right-0 w-full opacity-15" height="60" viewBox="0 0 300 60" fill="none">
-            <h2 className="text-4xl md:text-5xl font-bold text-gray-900 mb-4">프로젝트 문의</h2>
+                  <polyline points="0,50 40,35 80,42 120,15 160,28 200,10 240,22 300,5" stroke="#22c55e" strokeWidth="2" fill="none" strokeLinejoin="round" />
-            <p className="text-xl text-gray-600">무엇이든 편하게 상담해주세요. 24시간 이내 답변드립니다.</p>
+                </svg>
+                <div className="absolute top-3 right-4 w-20 h-20 rounded-full bg-emerald-400/10 blur-xl" />
+                <span className="absolute top-4 right-4 bg-emerald-500 text-white text-xs font-bold px-2 py-0.5 rounded-lg tracking-wide">NEW</span>
+                <div className="relative">
+                  <div className="w-11 h-11 rounded-xl bg-emerald-400/15 border border-emerald-400/25 flex items-center justify-center mb-3">
+                    <svg className="w-6 h-6 text-emerald-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M7 12l3-3 3 3 4-4M8 21l4-4 4 4M3 4h18M4 4h16v12a1 1 0 01-1 1H5a1 1 0 01-1-1V4z" />
+                    </svg>
+                  </div>
+                  <div className="text-emerald-400/70 text-xs font-semibold mb-0.5 tracking-wide">ALGO TRADING</div>
+                  <h3 className="text-white text-xl font-extrabold">주식 자동 매매</h3>
+                </div>
+              </div>
+              <div className="px-6 py-5">
+                <p className="text-slate-600 text-sm leading-relaxed mb-4">기술적 분석 기반 매매 신호를 텔레그램으로 실시간 수신하고, 자동으로 매수·매도합니다.</p>
+                <div className="space-y-2 mb-5">
+                  {['실시간 텔레그램 알림', '자동 매수/매도 실행', '포트폴리오 손익 관리'].map(f => (
+                    <div key={f} className="flex items-center gap-2 text-sm text-slate-700">
+                      <div className="w-4 h-4 rounded-full bg-emerald-50 border border-emerald-200 flex items-center justify-center flex-shrink-0"><div className="w-1.5 h-1.5 rounded-full bg-emerald-500" /></div>
+                      {f}
+                    </div>
+                  ))}
+                </div>
+                <div className="flex items-center justify-between pt-4 border-t border-slate-100">
+                  <div>
+                    <span className="text-[#04102b] font-extrabold text-lg">설치 99,000원~</span>
+                    <span className="ml-2 text-xs bg-emerald-50 border border-emerald-200 text-emerald-700 px-2 py-0.5 rounded-full font-medium">설치형</span>
+                  </div>
+                  <span className="text-[#1a56db] text-sm font-semibold flex items-center gap-1">자세히 보기 →</span>
+                </div>
+              </div>
+            </Link>
+
+            {/* ─ 프롬프트 ─ */}
+            <Link href="/services/prompt" className="service-card group bg-white rounded-2xl border border-[#dbe8ff] overflow-hidden hover:border-[#1a56db]/30 hover:shadow-xl hover:shadow-blue-100">
+              <div className="relative bg-gradient-to-br from-[#0d0a2e] to-[#1a0f5c] px-6 pt-7 pb-5 overflow-hidden">
+                <div className="absolute bottom-2 left-5 right-5 bg-black/30 rounded-lg px-3 py-2 font-mono text-xs opacity-25 overflow-hidden">
+                  <span className="text-violet-400">$</span><span className="text-white"> optimize prompt</span><br/>
+                  <span className="text-slate-500">→ </span><span className="text-green-400">efficiency: 94%</span>
+                </div>
+                <div className="absolute top-2 right-2 w-24 h-24 rounded-full bg-violet-500/10 blur-xl" />
+                <div className="relative">
+                  <div className="w-11 h-11 rounded-xl bg-violet-400/15 border border-violet-400/25 flex items-center justify-center mb-3">
+                    <svg className="w-6 h-6 text-violet-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z" />
+                    </svg>
+                  </div>
+                  <div className="text-violet-400/70 text-xs font-semibold mb-0.5 tracking-wide">PROMPT ENGINEERING</div>
+                  <h3 className="text-white text-xl font-extrabold">프롬프트 엔지니어링</h3>
+                </div>
+              </div>
+              <div className="px-6 py-5">
+                <p className="text-slate-600 text-sm leading-relaxed mb-4">ChatGPT·Claude에 최적화된 업무별 프롬프트를 설계하여 AI 활용 효율을 극대화합니다.</p>
+                <div className="space-y-2 mb-5">
+                  {['업무별 맞춤 프롬프트', 'ChatGPT / Claude 최적화', '프롬프트 라이브러리 제공'].map(f => (
+                    <div key={f} className="flex items-center gap-2 text-sm text-slate-700">
+                      <div className="w-4 h-4 rounded-full bg-violet-50 border border-violet-200 flex items-center justify-center flex-shrink-0"><div className="w-1.5 h-1.5 rounded-full bg-violet-500" /></div>
+                      {f}
+                    </div>
+                  ))}
+                </div>
+                <div className="flex items-center justify-between pt-4 border-t border-slate-100">
+                  <div>
+                    <span className="text-[#04102b] font-extrabold text-lg">건당 30,000원~</span>
+                    <span className="ml-2 text-xs bg-violet-50 border border-violet-200 text-violet-700 px-2 py-0.5 rounded-full font-medium">건별</span>
+                  </div>
+                  <span className="text-[#1a56db] text-sm font-semibold flex items-center gap-1">자세히 보기 →</span>
+                </div>
+              </div>
+            </Link>
+
+            {/* ─ 업무자동화 ─ */}
+            <Link href="/services/automation" className="service-card group bg-white rounded-2xl border border-[#dbe8ff] overflow-hidden hover:border-[#1a56db]/30 hover:shadow-xl hover:shadow-blue-100">
+              <div className="relative bg-gradient-to-br from-[#012030] to-[#013d50] px-6 pt-7 pb-5 overflow-hidden">
+                <svg className="absolute inset-0 w-full h-full opacity-10" viewBox="0 0 200 120">
+                  <line x1="0" y1="60" x2="50" y2="60" stroke="#22d3ee" strokeWidth="1"/>
+                  <circle cx="50" cy="60" r="3" fill="#22d3ee"/>
+                  <line x1="50" y1="60" x2="50" y2="30" stroke="#22d3ee" strokeWidth="1"/>
+                  <circle cx="50" cy="30" r="3" fill="#22d3ee"/>
+                  <line x1="50" y1="30" x2="120" y2="30" stroke="#22d3ee" strokeWidth="1"/>
+                  <circle cx="120" cy="30" r="3" fill="#22d3ee"/>
+                  <line x1="120" y1="30" x2="120" y2="90" stroke="#22d3ee" strokeWidth="1"/>
+                  <circle cx="120" cy="90" r="3" fill="#22d3ee"/>
+                  <line x1="120" y1="90" x2="200" y2="90" stroke="#22d3ee" strokeWidth="1"/>
+                  <line x1="50" y1="60" x2="80" y2="60" stroke="#22d3ee" strokeWidth="1"/>
+                  <rect x="80" y="50" width="20" height="20" rx="2" fill="none" stroke="#22d3ee" strokeWidth="1"/>
+                  <line x1="100" y1="60" x2="120" y2="60" stroke="#22d3ee" strokeWidth="1"/>
+                </svg>
+                <div className="absolute top-2 right-2 w-24 h-24 rounded-full bg-cyan-400/10 blur-xl" />
+                <div className="relative">
+                  <div className="w-11 h-11 rounded-xl bg-cyan-400/15 border border-cyan-400/25 flex items-center justify-center mb-3">
+                    <svg className="w-6 h-6 text-cyan-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z" />
+                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
+                    </svg>
+                  </div>
+                  <div className="text-cyan-400/70 text-xs font-semibold mb-0.5 tracking-wide">RPA AUTOMATION</div>
+                  <h3 className="text-white text-xl font-extrabold">업무 자동화</h3>
+                </div>
+              </div>
+              <div className="px-6 py-5">
+                <p className="text-slate-600 text-sm leading-relaxed mb-4">매일 반복되는 엑셀 작업, 이메일 발송, 데이터 수집을 자동화하여 생산성을 높입니다.</p>
+                <div className="space-y-2 mb-5">
+                  {['엑셀 / 구글 시트 자동화', '이메일 자동 발송', '웹 스크래핑 · 데이터 수집'].map(f => (
+                    <div key={f} className="flex items-center gap-2 text-sm text-slate-700">
+                      <div className="w-4 h-4 rounded-full bg-cyan-50 border border-cyan-200 flex items-center justify-center flex-shrink-0"><div className="w-1.5 h-1.5 rounded-full bg-cyan-500" /></div>
+                      {f}
+                    </div>
+                  ))}
+                </div>
+                <div className="flex items-center justify-between pt-4 border-t border-slate-100">
+                  <div>
+                    <span className="text-[#04102b] font-extrabold text-lg">프로젝트 100,000원~</span>
+                    <span className="ml-2 text-xs bg-cyan-50 border border-cyan-200 text-cyan-700 px-2 py-0.5 rounded-full font-medium">프로젝트</span>
+                  </div>
+                  <span className="text-[#1a56db] text-sm font-semibold flex items-center gap-1">자세히 보기 →</span>
+                </div>
+              </div>
+            </Link>
           </div>
 
-          <ContactForm />
+          {/* ─ Freelance CTA ─ */}
-        </div>
+          <button
-      </section>
+            onClick={() => openModal('외주 개발 문의')}
+            className="service-card mt-6 w-full flex items-center gap-6 bg-gradient-to-r from-[#04102b] via-[#0a1f5c] to-[#0d2d8a] rounded-2xl border border-[#1a3a7a] p-6 hover:border-[#1a56db]/60 group text-left"
+          >
+            <div className="w-14 h-14 rounded-xl bg-gradient-to-br from-[#1a56db] to-[#4338ca] flex items-center justify-center flex-shrink-0 shadow-lg shadow-blue-900/50">
+              <svg className="w-7 h-7 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M21 13.255A23.931 23.931 0 0112 15c-3.183 0-6.22-.62-9-1.745M16 6V4a2 2 0 00-2-2h-4a2 2 0 00-2 2v2m4 6h.01M5 20h14a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
+              </svg>
+            </div>
+            <div className="flex-1 min-w-0">
+              <div className="text-[#5ba4ff] text-xs font-bold mb-0.5 uppercase tracking-wider">맞춤형 프로젝트</div>
+              <h3 className="text-white text-lg font-extrabold mb-1">외주 개발 문의</h3>
+              <p className="text-blue-200/50 text-sm">원하시는 서비스가 없으신가요? 요구사항에 맞게 처음부터 개발해드립니다.</p>
+            </div>
+            <div className="flex items-center gap-1 text-[#5ba4ff] font-semibold text-sm flex-shrink-0">
+              문의하기 →
+            </div>
+          </button>
 
-      {/* Footer */}
+          {/* ─ Bottom: Tech + Trust ─ */}
-      <footer className="bg-slate-900 text-white py-12 px-4">
+          <div className="mt-8 grid md:grid-cols-2 gap-6">
-        <div className="max-w-7xl mx-auto">
+            <div className="bg-white rounded-2xl border border-[#dbe8ff] p-6">
-          <div className="grid md:grid-cols-4 gap-8 mb-8">
+              <div className="flex items-center gap-2 mb-4">
-            <div>
+                <div className="w-1 h-5 bg-gradient-to-b from-[#1a56db] to-[#4338ca] rounded-full" />
-              <div className="text-2xl font-bold mb-4">쟁승메이드</div>
+                <h3 className="font-bold text-[#04102b] text-sm">기술 스택</h3>
-              <p className="text-gray-400">비즈니스 성장을 위한<br />전문 개발 솔루션</p>
+              </div>
+              <div className="flex flex-wrap gap-2">
+                {techStack.map((tech) => (
+                  <span key={tech} className="bg-[#f0f5ff] text-[#1a56db] text-xs font-semibold px-3 py-1.5 rounded-lg border border-[#dbe8ff]">{tech}</span>
+                ))}
+              </div>
             </div>
-            <div>
+            <div className="bg-white rounded-2xl border border-[#dbe8ff] p-6">
-              <h4 className="font-bold mb-4">서비스</h4>
+              <div className="flex items-center gap-2 mb-4">
-              <ul className="space-y-2 text-gray-400">
+                <div className="w-1 h-5 bg-gradient-to-b from-[#1a56db] to-[#4338ca] rounded-full" />
-                <li><a href="#services" className="hover:text-white transition">RPA 자동화</a></li>
+                <h3 className="font-bold text-[#04102b] text-sm">신뢰할 수 있는 이유</h3>
-                <li><a href="#services" className="hover:text-white transition">웹 개발</a></li>
+              </div>
-                <li><a href="#services" className="hover:text-white transition">앱 개발</a></li>
+              <ul className="space-y-3">
-              </ul>
+                {[
-            </div>
+                  { icon: '🏢', text: '7년차 대기업 백엔드 개발 경력' },
-            <div>
+                  { icon: '🖥️', text: 'NAS 서버에서 실제 서비스 직접 운영 중' },
-              <h4 className="font-bold mb-4">포트폴리오</h4>
+                  { icon: '📱', text: '텔레그램·이메일 실시간 커뮤니케이션' },
-              <ul className="space-y-2 text-gray-400">
+                  { icon: '🔒', text: '1개월 무상 유지보수 + 평생 AS 가능' },
-                <li><a href="#portfolio" className="hover:text-white transition">프로젝트</a></li>
+                ].map((item) => (
-                <li><a href="#about" className="hover:text-white transition">기술 스택</a></li>
+                  <li key={item.text} className="flex items-start gap-2.5 text-sm text-slate-700">
-              </ul>
+                    <span className="text-base flex-shrink-0 mt-0.5">{item.icon}</span>
-            </div>
+                    {item.text}
-            <div>
+                  </li>
-              <h4 className="font-bold mb-4">문의</h4>
+                ))}
-              <ul className="space-y-2 text-gray-400">
-                <li>bgg8988@gmail.com</li>
-                <li>010-3907-1392</li>
               </ul>
             </div>
           </div>
-          <div className="border-t border-gray-800 pt-8 text-center text-gray-400">
-            <p>&copy; 2025 쟁승메이드. All rights reserved.</p>
-          </div>
         </div>
-      </footer>
+      </div>
     </div>
   );
 }

app/services/automation/page.tsx

@@ -0,0 +1,219 @@
+'use client';
+
+import { useState } from 'react';
+import Link from 'next/link';
+import ContactModal from '../../components/ContactModal';
+
+const CHECKLIST = [
+  '자동화하고 싶은 업무를 구체적으로 설명해주세요',
+  '현재 사용 중인 프로그램/시스템 (엑셀, ERP, 쇼핑몰 등)',
+  '자동화 빈도 (매일 / 주 1회 / 월 1회 등)',
+  '희망 납품 일정과 예산 범위',
+  '데이터 민감도 여부 (개인정보 포함 여부)',
+];
+
+const automationTypes = [
+  { title: '엑셀 / 구글 시트 자동화', desc: '매일 반복되는 데이터 정리, 집계, 보고서 생성을 자동화합니다.', examples: ['일별 매출 집계 자동화', '데이터 형식 변환', '여러 시트 데이터 통합'], accentColor: 'border-emerald-200 bg-emerald-50', dotColor: 'bg-emerald-500', labelColor: 'text-emerald-700 bg-emerald-100 border-emerald-200' },
+  { title: '웹 스크래핑 · 데이터 수집', desc: '경쟁사 가격, 뉴스, 공공데이터 등을 자동 수집·정리합니다.', examples: ['쇼핑몰 가격 모니터링', '뉴스 기사 자동 수집', '공공 API 데이터 연동'], accentColor: 'border-blue-200 bg-blue-50', dotColor: 'bg-blue-500', labelColor: 'text-blue-700 bg-blue-100 border-blue-200' },
+  { title: '이메일 자동 발송', desc: '조건에 따라 고객/거래처에 이메일을 자동으로 발송합니다.', examples: ['발주 확인 이메일 자동화', '정기 보고서 자동 발송', '이메일 분류 및 자동 응답'], accentColor: 'border-violet-200 bg-violet-50', dotColor: 'bg-violet-500', labelColor: 'text-violet-700 bg-violet-100 border-violet-200' },
+  { title: '업무 프로세스 RPA', desc: 'PC에서 반복 실행하는 클릭·입력 작업을 자동화합니다.', examples: ['ERP 시스템 데이터 입력', '파일 이동·변환·백업', '웹사이트 폼 자동 제출'], accentColor: 'border-orange-200 bg-orange-50', dotColor: 'bg-orange-500', labelColor: 'text-orange-700 bg-orange-100 border-orange-200' },
+  { title: '텔레그램 봇 개발', desc: '특정 이벤트 발생 시 텔레그램으로 자동 알림을 보냅니다.', examples: ['서버 이상 알림 봇', '매출 현황 정기 보고 봇', '주문 접수 알림 봇'], accentColor: 'border-cyan-200 bg-cyan-50', dotColor: 'bg-cyan-500', labelColor: 'text-cyan-700 bg-cyan-100 border-cyan-200' },
+  { title: 'API 연동 · 시스템 통합', desc: '서로 다른 시스템을 API로 연결하여 데이터를 자동 동기화합니다.', examples: ['CRM ↔ ERP 데이터 동기화', '결제 시스템 자동 연동', '재고 관리 자동화'], accentColor: 'border-indigo-200 bg-indigo-50', dotColor: 'bg-indigo-500', labelColor: 'text-indigo-700 bg-indigo-100 border-indigo-200' },
+];
+
+const plans = [
+  { name: '단순 자동화', price: '100,000원~', desc: '단일 작업 · 1~3일 소요', examples: '엑셀 매크로, 단순 스크래핑, 이메일 자동화', highlight: false },
+  { name: '중간 자동화', price: '300,000원~', desc: '복합 작업 · 1~2주 소요', examples: 'RPA 프로세스, API 연동, 텔레그램 봇', highlight: true },
+  { name: '대형 자동화', price: '협의', desc: '시스템 통합 · 2주 이상 소요', examples: '전사 업무 자동화, 멀티 시스템 통합', highlight: false },
+];
+
+const process = [
+  { step: '01', title: '무료 상담', desc: '반복 업무 파악 및 자동화 가능 여부 확인' },
+  { step: '02', title: '요구사항 분석', desc: '상세 프로세스 분석 및 자동화 범위 결정' },
+  { step: '03', title: '개발 및 테스트', desc: '실제 데이터로 테스트하며 단계적 개발' },
+  { step: '04', title: '납품 및 교육', desc: '사용 방법 교육 + 가이드 문서 제공' },
+  { step: '05', title: 'AS 지원', desc: '1개월 무상 기술 지원 및 버그 수정' },
+];
+
+export default function AutomationPage() {
+  const [modalOpen, setModalOpen] = useState(false);
+  const [modalService, setModalService] = useState('업무 자동화');
+
+  const openModal = (service: string) => {
+    setModalService(service);
+    setModalOpen(true);
+  };
+
+  return (
+    <div className="min-h-full bg-[#f0f5ff]">
+      <ContactModal
+        isOpen={modalOpen}
+        onClose={() => setModalOpen(false)}
+        service={modalService}
+        checklist={CHECKLIST}
+        accentColor="text-cyan-400"
+        headerFrom="#012030"
+        headerTo="#013d50"
+      />
+
+      {/* ─── Hero ─── */}
+      <div className="relative overflow-hidden bg-gradient-to-br from-[#012030] via-[#013d50] to-[#012030] px-6 py-14 lg:px-12">
+        <svg className="absolute inset-0 w-full h-full opacity-[0.06]" viewBox="0 0 800 300" preserveAspectRatio="xMidYMid slice">
+          <line x1="0" y1="150" x2="150" y2="150" stroke="#22d3ee" strokeWidth="1.5"/>
+          <circle cx="150" cy="150" r="5" fill="none" stroke="#22d3ee" strokeWidth="1.5"/>
+          <line x1="150" y1="150" x2="150" y2="80" stroke="#22d3ee" strokeWidth="1.5"/>
+          <rect x="130" y="60" width="40" height="20" rx="3" fill="none" stroke="#22d3ee" strokeWidth="1.5"/>
+          <line x1="150" y1="60" x2="150" y2="20" stroke="#22d3ee" strokeWidth="1.5"/>
+          <line x1="150" y1="150" x2="350" y2="150" stroke="#22d3ee" strokeWidth="1.5"/>
+          <circle cx="350" cy="150" r="5" fill="none" stroke="#22d3ee" strokeWidth="1.5"/>
+          <line x1="350" y1="150" x2="350" y2="220" stroke="#22d3ee" strokeWidth="1.5"/>
+          <rect x="330" y="220" width="40" height="20" rx="3" fill="none" stroke="#22d3ee" strokeWidth="1.5"/>
+          <line x1="350" y1="150" x2="550" y2="150" stroke="#22d3ee" strokeWidth="1.5"/>
+          <circle cx="550" cy="150" r="5" fill="none" stroke="#22d3ee" strokeWidth="1.5"/>
+          <line x1="550" y1="150" x2="550" y2="80" stroke="#22d3ee" strokeWidth="1.5"/>
+          <rect x="530" y="60" width="40" height="20" rx="3" fill="none" stroke="#22d3ee" strokeWidth="1.5"/>
+          <line x1="550" y1="150" x2="800" y2="150" stroke="#22d3ee" strokeWidth="1.5"/>
+        </svg>
+
+        <div className="relative max-w-3xl mx-auto text-center">
+          <Link href="/" className="inline-flex items-center gap-1.5 text-cyan-300/60 hover:text-cyan-300 text-sm mb-6 transition">
+            <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 19l-7-7 7-7" /></svg>
+            홈으로
+          </Link>
+          <div className="w-16 h-16 mx-auto rounded-2xl bg-cyan-400/15 border border-cyan-400/25 flex items-center justify-center mb-5">
+            <svg className="w-9 h-9 text-cyan-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z" />
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
+            </svg>
+          </div>
+          <p className="text-cyan-400/70 text-xs font-bold uppercase tracking-widest mb-2">RPA AUTOMATION · 업무 자동화 개발</p>
+          <h1 className="text-4xl md:text-5xl font-extrabold text-white mb-4 tracking-tight leading-tight">
+            반복 업무를<br />
+            <span className="text-transparent bg-clip-text bg-gradient-to-r from-cyan-400 to-teal-400">완전 자동화</span>
+          </h1>
+          <p className="text-cyan-100/50 text-base md:text-lg leading-relaxed max-w-xl mx-auto mb-6">
+            &ldquo;이 작업 매일 하기 너무 귀찮다&rdquo;는 생각이 드는 순간, 자동화할 수 있습니다.<br />
+            엑셀, 이메일, 데이터 수집, RPA까지 직접 개발해드립니다.
+          </p>
+          <div className="inline-grid grid-cols-3 gap-px bg-cyan-400/10 border border-cyan-400/20 rounded-2xl overflow-hidden">
+            {[{ v: '1~3일', l: '단순 작업' }, { v: '1~2주', l: '복합 작업' }, { v: '1개월', l: '무상 AS' }].map((s) => (
+              <div key={s.l} className="bg-[#012030]/80 px-5 py-3 text-center">
+                <div className="text-white font-extrabold text-base">{s.v}</div>
+                <div className="text-cyan-400/50 text-xs mt-0.5">{s.l}</div>
+              </div>
+            ))}
+          </div>
+        </div>
+      </div>
+
+      {/* ─── 자동화 유형 ─── */}
+      <div className="px-6 py-12 lg:px-12">
+        <div className="max-w-5xl mx-auto">
+          <div className="text-center mb-8">
+            <p className="text-cyan-600 text-xs font-bold uppercase tracking-widest mb-2">AUTOMATION TYPES</p>
+            <h2 className="text-2xl md:text-3xl font-extrabold text-[#04102b]">자동화 유형</h2>
+          </div>
+          <div className="grid sm:grid-cols-2 lg:grid-cols-3 gap-4">
+            {automationTypes.map((at) => (
+              <div key={at.title} className={`bg-white rounded-2xl border-2 ${at.accentColor} p-5`}>
+                <span className={`inline-block text-xs font-bold px-2 py-0.5 rounded-md border mb-3 ${at.labelColor}`}>{at.title.split(' ')[0]}</span>
+                <h3 className="font-bold text-[#04102b] text-sm mb-2">{at.title}</h3>
+                <p className="text-slate-500 text-xs leading-relaxed mb-3">{at.desc}</p>
+                <div className="space-y-1.5">
+                  {at.examples.map((ex) => (
+                    <div key={ex} className="flex items-center gap-2 text-xs text-slate-600">
+                      <div className={`w-1.5 h-1.5 rounded-full flex-shrink-0 ${at.dotColor}`} />
+                      {ex}
+                    </div>
+                  ))}
+                </div>
+              </div>
+            ))}
+          </div>
+        </div>
+      </div>
+
+      {/* ─── 프로세스 ─── */}
+      <div className="px-6 pb-12 lg:px-12">
+        <div className="max-w-5xl mx-auto">
+          <div className="text-center mb-8">
+            <p className="text-cyan-600 text-xs font-bold uppercase tracking-widest mb-2">PROCESS</p>
+            <h2 className="text-2xl md:text-3xl font-extrabold text-[#04102b]">진행 프로세스</h2>
+          </div>
+          <div className="relative">
+            <div className="hidden sm:block absolute top-10 left-[10%] right-[10%] h-0.5 bg-gradient-to-r from-cyan-200 via-[#dbe8ff] to-cyan-200" />
+            <div className="grid grid-cols-1 sm:grid-cols-5 gap-4">
+              {process.map((p) => (
+                <div key={p.step} className="relative text-center">
+                  <div className="w-20 h-20 mx-auto rounded-2xl bg-gradient-to-br from-[#012030] to-[#013d50] border border-cyan-400/20 flex flex-col items-center justify-center mb-3 shadow-lg shadow-cyan-900/20">
+                    <span className="text-cyan-400 text-xs font-bold">STEP</span>
+                    <span className="text-white font-extrabold text-lg leading-none">{p.step}</span>
+                  </div>
+                  <div className="font-bold text-[#04102b] text-sm mb-1">{p.title}</div>
+                  <div className="text-slate-500 text-xs leading-relaxed">{p.desc}</div>
+                </div>
+              ))}
+            </div>
+          </div>
+        </div>
+      </div>
+
+      {/* ─── 예상 비용 ─── */}
+      <div className="px-6 pb-12 lg:px-12">
+        <div className="max-w-5xl mx-auto">
+          <div className="text-center mb-8">
+            <p className="text-[#1a56db] text-xs font-bold uppercase tracking-widest mb-2">PRICING</p>
+            <h2 className="text-2xl md:text-3xl font-extrabold text-[#04102b]">예상 비용</h2>
+          </div>
+          <div className="grid sm:grid-cols-3 gap-5">
+            {plans.map((plan) => (
+              <div key={plan.name} className={`rounded-2xl border p-6 relative flex flex-col ${
+                plan.highlight
+                  ? 'bg-gradient-to-br from-[#012030] to-[#013d50] border-cyan-400/30 shadow-2xl shadow-cyan-900/20 scale-105'
+                  : 'bg-white border-[#dbe8ff]'
+              }`}>
+                {plan.highlight && (
+                  <div className="absolute -top-3.5 left-1/2 -translate-x-1/2 bg-cyan-400 text-[#012030] text-xs font-extrabold px-4 py-1 rounded-full tracking-wide">가장 많이 의뢰</div>
+                )}
+                <div className={`text-xs font-bold mb-2 tracking-wide ${plan.highlight ? 'text-cyan-400' : 'text-slate-400'}`}>{plan.name.toUpperCase()}</div>
+                <div className={`text-3xl font-extrabold mb-1 ${plan.highlight ? 'text-white' : 'text-[#04102b]'}`}>{plan.price}</div>
+                <div className={`text-xs mb-4 ${plan.highlight ? 'text-cyan-300/50' : 'text-slate-400'}`}>{plan.desc}</div>
+                <div className={`text-xs leading-relaxed mb-6 flex-1 p-3 rounded-xl ${plan.highlight ? 'bg-cyan-400/10 text-cyan-100/70' : 'bg-[#f0f5ff] text-slate-600'}`}>
+                  예: {plan.examples}
+                </div>
+                <button
+                  onClick={() => openModal(`업무 자동화 - ${plan.name}`)}
+                  className={`block w-full text-center py-3 rounded-xl text-sm font-bold transition ${
+                    plan.highlight ? 'bg-cyan-400 text-[#012030] hover:bg-cyan-300' : 'bg-[#04102b] text-white hover:bg-[#0a1f5c]'
+                  }`}
+                >
+                  견적 문의
+                </button>
+              </div>
+            ))}
+          </div>
+          <p className="text-center text-slate-400 text-xs mt-4">
+            * 실제 비용은 작업 복잡도, 데이터 양, 연동 시스템에 따라 달라집니다. 무료 상담 후 정확한 견적을 드립니다.
+          </p>
+        </div>
+      </div>
+
+      {/* ─── CTA ─── */}
+      <div className="px-6 pb-12 lg:px-12">
+        <div className="max-w-3xl mx-auto">
+          <div className="bg-gradient-to-r from-[#012030] to-[#013d50] rounded-2xl border border-cyan-400/20 p-8 text-center">
+            <p className="text-cyan-400 text-xs font-bold uppercase tracking-widest mb-2">FREE CONSULTATION</p>
+            <h3 className="text-white text-2xl font-extrabold mb-2">어떤 업무든 상담해보세요</h3>
+            <p className="text-cyan-100/40 text-sm mb-6">자동화 가능한 업무라면 무엇이든 도와드립니다</p>
+            <button
+              onClick={() => openModal('업무 자동화')}
+              className="inline-flex items-center gap-2 bg-cyan-400 hover:bg-cyan-300 text-[#012030] px-8 py-3 rounded-xl font-extrabold text-sm transition-all shadow-lg shadow-cyan-900/30"
+            >
+              무료 상담 신청 →
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

app/services/lotto/page.tsx

@@ -0,0 +1,268 @@
+'use client';
+
+import { useState } from 'react';
+import Link from 'next/link';
+import ContactModal from '../../components/ContactModal';
+
+const CHECKLIST = [
+  '구독 플랜 선택 (기본 / 프리미엄 / 연간)',
+  '번호 수신 방법 (이메일 / 텔레그램 중 선택)',
+  '로또 구매 후 직접 확인 필요 (자동 구매 아님)',
+  '당첨 보장 없음 — 통계 기반 확률 최적화 서비스',
+  '구독 취소는 이메일로 언제든 가능',
+];
+
+const plans = [
+  {
+    name: '기본 플랜',
+    price: '4,900원',
+    period: '/ 월',
+    desc: '매주 1회 번호 추천',
+    features: [
+      '매주 월요일 5개 번호 조합 제공',
+      '출현 빈도 통계 분석',
+      '이메일 발송',
+    ],
+    highlight: false,
+  },
+  {
+    name: '프리미엄 플랜',
+    price: '9,900원',
+    period: '/ 월',
+    desc: '매주 3회 + 상세 분석 보고서',
+    features: [
+      '매주 3회 번호 조합 제공',
+      '핫넘버 / 콜드넘버 분석',
+      '연속 번호 / 끝수 패턴 분석',
+      '당첨 확률 시뮬레이션',
+      '이메일 + 텔레그램 알림',
+    ],
+    highlight: true,
+  },
+  {
+    name: '연간 플랜',
+    price: '89,900원',
+    period: '/ 년',
+    desc: '프리미엄 12개월 (2개월 무료)',
+    features: [
+      '프리미엄 플랜 전체 기능',
+      '연간 당첨 패턴 리포트',
+      '우선 고객 지원',
+      '2개월 무료 혜택',
+    ],
+    highlight: false,
+  },
+];
+
+const faqs = [
+  {
+    q: '로또 번호 추천이 실제로 효과가 있나요?',
+    a: '당첨을 보장하지는 않습니다. 다만 출현 빈도·패턴 통계를 기반으로 확률적으로 유리한 번호 조합을 제공합니다. NAS 서버에서 실제 데이터를 직접 분석하고 운영 중입니다.',
+  },
+  {
+    q: '번호는 어떻게 받을 수 있나요?',
+    a: '결제 완료 후 이메일로 매주 정해진 요일에 발송됩니다. 프리미엄 플랜은 텔레그램 알림도 함께 제공됩니다.',
+  },
+  {
+    q: '구독 취소는 어떻게 하나요?',
+    a: '이메일(bgg8988@gmail.com)로 취소 요청 시 다음 결제일 전에 해지 처리해드립니다. 위약금은 없습니다.',
+  },
+];
+
+const analysisFeatures = [
+  { label: '출현 빈도 분석', desc: '1회차~최신 회차까지 모든 번호의 출현 횟수와 비율 계산', stat: '1,100+', statLabel: '회차 데이터', accent: 'border-amber-300 bg-amber-50', statColor: 'text-amber-600' },
+  { label: '핫/콜드 넘버', desc: '최근 20회차 기준 자주 나온 번호와 오래 안 나온 번호 구분', stat: '45', statLabel: '개 번호 분석', accent: 'border-orange-300 bg-orange-50', statColor: 'text-orange-600' },
+  { label: '연속 번호 패턴', desc: '연속된 번호 쌍의 출현 패턴을 분석하여 번호 선택에 활용', stat: '98%', statLabel: '패턴 적용률', accent: 'border-yellow-300 bg-yellow-50', statColor: 'text-yellow-600' },
+  { label: '끝수 통계', desc: '끝자리 0~9 번호들의 출현 비율을 분석하여 분산 조합', stat: '10', statLabel: '끝수 구간', accent: 'border-amber-300 bg-amber-50', statColor: 'text-amber-600' },
+  { label: '번호 조합 시뮬레이션', desc: '추천 번호로 과거 회차 시뮬레이션을 진행하여 효과 검증', stat: '500+', statLabel: '회 시뮬레이션', accent: 'border-orange-300 bg-orange-50', statColor: 'text-orange-600' },
+  { label: '정기 자동 발송', desc: '매주 정해진 요일에 이메일 및 텔레그램으로 번호 자동 발송', stat: '매주', statLabel: '자동 배송', accent: 'border-yellow-300 bg-yellow-50', statColor: 'text-yellow-600' },
+];
+
+export default function LottoPage() {
+  const [modalOpen, setModalOpen] = useState(false);
+  const [modalService, setModalService] = useState('로또 번호 추천');
+
+  const openModal = (service: string) => {
+    setModalService(service);
+    setModalOpen(true);
+  };
+
+  return (
+    <div className="min-h-full bg-[#f0f5ff]">
+      <ContactModal
+        isOpen={modalOpen}
+        onClose={() => setModalOpen(false)}
+        service={modalService}
+        checklist={CHECKLIST}
+        accentColor="text-amber-400"
+        headerFrom="#1a0a00"
+        headerTo="#3d1a00"
+      />
+
+      {/* ─── Hero ─── */}
+      <div className="relative overflow-hidden bg-gradient-to-br from-[#1a0a00] via-[#3d1a00] to-[#1a0a00] px-6 py-14 lg:px-12">
+        <div className="absolute inset-0 overflow-hidden pointer-events-none">
+          {[
+            { n: '07', x: '8%', y: '15%', size: 'w-12 h-12', opacity: 'opacity-10' },
+            { n: '23', x: '88%', y: '10%', size: 'w-16 h-16', opacity: 'opacity-10' },
+            { n: '34', x: '92%', y: '60%', size: 'w-10 h-10', opacity: 'opacity-8' },
+            { n: '12', x: '5%', y: '70%', size: 'w-14 h-14', opacity: 'opacity-10' },
+            { n: '41', x: '78%', y: '85%', size: 'w-12 h-12', opacity: 'opacity-8' },
+          ].map((ball) => (
+            <div
+              key={ball.n}
+              className={`absolute ${ball.size} ${ball.opacity} rounded-full border-2 border-amber-400 flex items-center justify-center`}
+              style={{ left: ball.x, top: ball.y }}
+            >
+              <span className="text-amber-300 font-bold text-sm">{ball.n}</span>
+            </div>
+          ))}
+        </div>
+        <div className="absolute top-0 left-1/2 -translate-x-1/2 w-96 h-96 rounded-full bg-amber-500/8 blur-3xl" />
+
+        <div className="relative max-w-3xl mx-auto text-center">
+          <Link href="/" className="inline-flex items-center gap-1.5 text-amber-300/60 hover:text-amber-300 text-sm mb-6 transition">
+            <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 19l-7-7 7-7" />
+            </svg>
+            홈으로
+          </Link>
+          <div className="w-16 h-16 mx-auto rounded-2xl bg-amber-400/20 border border-amber-400/30 flex items-center justify-center mb-5 shadow-lg shadow-amber-900/30">
+            <svg className="w-9 h-9 text-amber-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M11.049 2.927c.3-.921 1.603-.921 1.902 0l1.519 4.674a1 1 0 00.95.69h4.915c.969 0 1.371 1.24.588 1.81l-3.976 2.888a1 1 0 00-.363 1.118l1.518 4.674c.3.922-.755 1.688-1.538 1.118l-3.976-2.888a1 1 0 00-1.176 0l-3.976 2.888c-.783.57-1.838-.197-1.538-1.118l1.518-4.674a1 1 0 00-.363-1.118l-3.976-2.888c-.784-.57-.38-1.81.588-1.81h4.914a1 1 0 00.951-.69l1.519-4.674z" />
+            </svg>
+          </div>
+          <p className="text-amber-400/70 text-xs font-bold uppercase tracking-widest mb-2">LOTTO ANALYTICS · 빅데이터 통계 분석</p>
+          <h1 className="text-4xl md:text-5xl font-extrabold text-white mb-4 tracking-tight leading-tight">
+            로또 번호<br />
+            <span className="text-transparent bg-clip-text bg-gradient-to-r from-amber-400 to-orange-400">빅데이터 추천</span>
+          </h1>
+          <p className="text-amber-100/60 text-base md:text-lg leading-relaxed max-w-xl mx-auto mb-6">
+            1회차부터 현재까지 전체 당첨 데이터를 분석하여 출현 패턴, 핫/콜드 번호,
+            연속 번호 통계를 기반으로 번호 조합을 추천합니다.
+          </p>
+          <div className="flex items-center justify-center gap-2.5 mb-6">
+            {[7, 14, 23, 35, 41, 44].map((n, i) => (
+              <div key={n} className="w-11 h-11 rounded-full flex items-center justify-center font-extrabold text-sm shadow-lg border"
+                style={{ background: i < 2 ? '#fbbf24' : i < 4 ? '#3b82f6' : '#ef4444', borderColor: 'rgba(255,255,255,0.15)', color: '#fff' }}>
+                {n}
+              </div>
+            ))}
+          </div>
+          <div className="inline-flex items-center gap-2 bg-amber-400/10 border border-amber-400/20 text-amber-300 text-xs font-medium px-4 py-2 rounded-full">
+            <span className="w-1.5 h-1.5 rounded-full bg-emerald-400 animate-pulse" />
+            NAS 서버에서 실제 운영 중
+          </div>
+        </div>
+      </div>
+
+      {/* ─── 분석 기능 ─── */}
+      <div className="px-6 py-12 lg:px-12">
+        <div className="max-w-5xl mx-auto">
+          <div className="text-center mb-8">
+            <p className="text-amber-600 text-xs font-bold uppercase tracking-widest mb-2">ANALYSIS ENGINE</p>
+            <h2 className="text-2xl md:text-3xl font-extrabold text-[#04102b]">6가지 통계 분석 엔진</h2>
+            <p className="text-slate-500 text-sm mt-2">단순 랜덤이 아닌 데이터 기반의 확률 최적화</p>
+          </div>
+          <div className="grid sm:grid-cols-2 lg:grid-cols-3 gap-4">
+            {analysisFeatures.map((f) => (
+              <div key={f.label} className={`bg-white rounded-2xl border-2 ${f.accent} p-5`}>
+                <div className={`text-2xl font-extrabold ${f.statColor} mb-0.5`}>{f.stat}</div>
+                <div className={`text-xs ${f.statColor} font-medium mb-3`}>{f.statLabel}</div>
+                <h3 className="font-bold text-[#04102b] text-sm mb-1.5">{f.label}</h3>
+                <p className="text-slate-500 text-xs leading-relaxed">{f.desc}</p>
+              </div>
+            ))}
+          </div>
+        </div>
+      </div>
+
+      {/* ─── 요금제 ─── */}
+      <div className="px-6 pb-12 lg:px-12">
+        <div className="max-w-5xl mx-auto">
+          <div className="text-center mb-8">
+            <p className="text-[#1a56db] text-xs font-bold uppercase tracking-widest mb-2">PRICING</p>
+            <h2 className="text-2xl md:text-3xl font-extrabold text-[#04102b]">요금제</h2>
+          </div>
+          <div className="grid sm:grid-cols-3 gap-5">
+            {plans.map((plan) => (
+              <div key={plan.name} className={`rounded-2xl border p-6 relative flex flex-col ${
+                plan.highlight
+                  ? 'bg-gradient-to-br from-[#04102b] to-[#0a2060] border-amber-400/40 shadow-2xl shadow-amber-900/20 scale-105'
+                  : 'bg-white border-[#dbe8ff]'
+              }`}>
+                {plan.highlight && (
+                  <div className="absolute -top-3.5 left-1/2 -translate-x-1/2 bg-amber-400 text-[#04102b] text-xs font-extrabold px-4 py-1 rounded-full tracking-wide">추천</div>
+                )}
+                <div className={`text-xs font-bold mb-2 tracking-wide ${plan.highlight ? 'text-amber-400' : 'text-slate-400'}`}>{plan.name.toUpperCase()}</div>
+                <div className="flex items-baseline gap-1 mb-1">
+                  <span className={`text-3xl font-extrabold ${plan.highlight ? 'text-white' : 'text-[#04102b]'}`}>{plan.price}</span>
+                  <span className={`text-sm ${plan.highlight ? 'text-amber-300/60' : 'text-slate-400'}`}>{plan.period}</span>
+                </div>
+                <p className={`text-xs mb-5 ${plan.highlight ? 'text-amber-300/60' : 'text-slate-400'}`}>{plan.desc}</p>
+                <ul className="space-y-2 mb-6 flex-1">
+                  {plan.features.map((f) => (
+                    <li key={f} className={`flex items-start gap-2 text-xs ${plan.highlight ? 'text-amber-100/80' : 'text-slate-600'}`}>
+                      <div className={`w-4 h-4 rounded-full flex items-center justify-center flex-shrink-0 mt-0.5 ${plan.highlight ? 'bg-amber-400/20 border border-amber-400/40' : 'bg-[#f0f5ff] border border-[#dbe8ff]'}`}>
+                        <div className={`w-1.5 h-1.5 rounded-full ${plan.highlight ? 'bg-amber-400' : 'bg-[#1a56db]'}`} />
+                      </div>
+                      {f}
+                    </li>
+                  ))}
+                </ul>
+                <button
+                  onClick={() => openModal(`로또 번호 추천 - ${plan.name}`)}
+                  className={`block w-full text-center py-3 rounded-xl text-sm font-bold transition ${
+                    plan.highlight ? 'bg-amber-400 text-[#04102b] hover:bg-amber-300' : 'bg-[#04102b] text-white hover:bg-[#0a1f5c]'
+                  }`}
+                >
+                  신청하기
+                </button>
+              </div>
+            ))}
+          </div>
+        </div>
+      </div>
+
+      {/* ─── FAQ ─── */}
+      <div className="px-6 pb-12 lg:px-12">
+        <div className="max-w-3xl mx-auto">
+          <div className="text-center mb-8">
+            <p className="text-[#1a56db] text-xs font-bold uppercase tracking-widest mb-2">FAQ</p>
+            <h2 className="text-2xl font-extrabold text-[#04102b]">자주 묻는 질문</h2>
+          </div>
+          <div className="space-y-3">
+            {faqs.map((faq, i) => (
+              <div key={faq.q} className="bg-white rounded-2xl border border-[#dbe8ff] p-6">
+                <div className="flex items-start gap-3">
+                  <span className="text-amber-500 font-extrabold text-sm flex-shrink-0 mt-0.5">Q{i + 1}</span>
+                  <div>
+                    <h3 className="font-bold text-[#04102b] text-sm mb-2">{faq.q}</h3>
+                    <p className="text-slate-500 text-sm leading-relaxed">{faq.a}</p>
+                  </div>
+                </div>
+              </div>
+            ))}
+          </div>
+        </div>
+      </div>
+
+      {/* ─── CTA ─── */}
+      <div className="px-6 pb-12 lg:px-12">
+        <div className="max-w-3xl mx-auto">
+          <div className="bg-gradient-to-r from-[#04102b] to-[#0a2060] rounded-2xl border border-[#1a3a7a] p-8 text-center">
+            <p className="text-amber-400 text-xs font-bold uppercase tracking-widest mb-2">GET STARTED</p>
+            <h3 className="text-white text-2xl font-extrabold mb-2">지금 바로 시작하세요</h3>
+            <p className="text-blue-200/50 text-sm mb-6">구독 첫 달 무료 체험 · 언제든 취소 가능</p>
+            <button
+              onClick={() => openModal('로또 번호 추천')}
+              className="inline-flex items-center gap-2 bg-amber-400 hover:bg-amber-300 text-[#04102b] px-8 py-3 rounded-xl font-extrabold text-sm transition-all shadow-lg shadow-amber-900/30"
+            >
+              구독 신청하기 →
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

app/services/prompt/page.tsx

@@ -0,0 +1,261 @@
+'use client';
+
+import { useState } from 'react';
+import Link from 'next/link';
+import ContactModal from '../../components/ContactModal';
+
+const CHECKLIST = [
+  '주로 어떤 AI 도구를 사용하는지 (ChatGPT / Claude / Gemini)',
+  '자동화하고 싶은 업무 유형 (이메일 / 보고서 / 코드 등)',
+  '현재 프롬프트 사용 방식 및 불만족스러운 점',
+  '필요한 프롬프트 수량 (단건 / 패키지 / 팀 전체)',
+  '납품 후 사용 가이드 및 1:1 교육 포함 여부 확인',
+];
+
+const useCases = [
+  { label: '이메일 작성', desc: '고객사별, 상황별 최적화된 비즈니스 이메일 프롬프트' },
+  { label: '보고서·기획서', desc: '회사 내부 보고서, 제안서, 기획서 자동 작성용 프롬프트' },
+  { label: '고객 응대', desc: 'CS 상담, FAQ 응답, 컴플레인 처리를 위한 프롬프트' },
+  { label: '마케팅 카피', desc: '제품 소개글, 광고 카피, SNS 콘텐츠 생성 프롬프트' },
+  { label: '개발 보조', desc: '코드 리뷰, 버그 설명, 문서화를 위한 개발자 전용 프롬프트' },
+  { label: '학습·요약', desc: '문서 요약, 핵심 추출, 번역 최적화 프롬프트' },
+];
+
+const plans = [
+  {
+    name: '단건 설계',
+    price: '30,000원',
+    period: '/ 건',
+    desc: '특정 업무 1건 프롬프트 설계',
+    features: ['요구사항 분석 및 인터뷰', '목적별 프롬프트 1개 설계', 'ChatGPT / Claude 최적화', '수정 1회 포함', '사용 가이드 문서 제공'],
+    highlight: false,
+  },
+  {
+    name: '비즈니스 패키지',
+    price: '99,000원',
+    period: '/ 패키지',
+    desc: '업무 유형별 5개 프롬프트 세트',
+    features: ['업무 분석 심층 인터뷰', '5개 프롬프트 맞춤 설계', '용도별 프롬프트 라이브러리', '수정 3회 포함', '활용 방법 1:1 교육 (30분)', '1개월 내 추가 조정 가능'],
+    highlight: true,
+  },
+  {
+    name: '팀/기업 패키지',
+    price: '249,000원~',
+    period: '/ 세트',
+    desc: '부서·팀 전체 프롬프트 시스템 구축',
+    features: ['팀 업무 프로세스 전체 분석', '10개 이상 프롬프트 설계', '팀 공유 프롬프트 라이브러리', '사내 가이드 문서 작성', '전 직원 교육 자료 제공', '3개월 내 업데이트 지원'],
+    highlight: false,
+  },
+];
+
+const examples = [
+  {
+    type: '회의록 요약',
+    before: '회의 내용을 요약해줘',
+    after: '다음 회의록을 분석하여: 1) 핵심 결정사항 3가지, 2) 담당자별 Action Item, 3) 다음 회의 전 완료해야 할 사항을 불릿 형식으로 정리해줘. 회의록: [내용]',
+    improvement: '구조화된 출력 · 역할 분리 · 명확한 포맷',
+  },
+  {
+    type: '코드 리뷰',
+    before: '이 코드 리뷰해줘',
+    after: '시니어 백엔드 개발자 관점에서 다음 코드를 리뷰해줘: 1) 버그 및 잠재적 오류, 2) 성능 개선 포인트, 3) 클린코드 관점에서의 개선사항을 각각 심각도(High/Medium/Low)와 함께 알려줘. 코드: [코드]',
+    improvement: '페르소나 설정 · 심각도 기준 · 다각도 분석',
+  },
+];
+
+export default function PromptPage() {
+  const [modalOpen, setModalOpen] = useState(false);
+  const [modalService, setModalService] = useState('프롬프트 엔지니어링');
+
+  const openModal = (service: string) => {
+    setModalService(service);
+    setModalOpen(true);
+  };
+
+  return (
+    <div className="min-h-full bg-[#f0f5ff]">
+      <ContactModal
+        isOpen={modalOpen}
+        onClose={() => setModalOpen(false)}
+        service={modalService}
+        checklist={CHECKLIST}
+        accentColor="text-violet-400"
+        headerFrom="#0d0a2e"
+        headerTo="#1a0f5c"
+      />
+
+      {/* ─── Hero ─── */}
+      <div className="relative overflow-hidden bg-gradient-to-br from-[#0d0a2e] via-[#1a0f5c] to-[#0d0a2e] px-6 py-14 lg:px-12">
+        <div className="absolute top-0 right-0 w-[480px] h-full opacity-10 pointer-events-none hidden lg:block">
+          <div className="font-mono text-xs text-violet-300 p-8 leading-7">
+            <div><span className="text-pink-400">const</span> <span className="text-blue-300">optimizePrompt</span> <span className="text-white">=</span> <span className="text-yellow-300">(task)</span> <span className="text-white">{'=> {'}</span></div>
+            <div className="ml-4"><span className="text-pink-400">return</span> <span className="text-white">{'{'}</span></div>
+            <div className="ml-8"><span className="text-green-300">role</span><span className="text-white">:</span> <span className="text-orange-300">&apos;expert analyst&apos;</span><span className="text-white">,</span></div>
+            <div className="ml-8"><span className="text-green-300">context</span><span className="text-white">:</span> <span className="text-orange-300">`{'{task.context}'}`</span><span className="text-white">,</span></div>
+            <div className="ml-8"><span className="text-green-300">format</span><span className="text-white">:</span> <span className="text-orange-300">&apos;structured&apos;</span><span className="text-white">,</span></div>
+            <div className="ml-8"><span className="text-green-300">output</span><span className="text-white">:</span> <span className="text-orange-300">&apos;actionable&apos;</span></div>
+            <div className="ml-4"><span className="text-white">{'}'}</span></div>
+            <div><span className="text-white">{'};'}</span></div>
+            <div className="mt-4"><span className="text-slate-500">// efficiency: 94% ↑</span></div>
+          </div>
+        </div>
+
+        <div className="relative max-w-3xl mx-auto text-center">
+          <Link href="/" className="inline-flex items-center gap-1.5 text-violet-300/60 hover:text-violet-300 text-sm mb-6 transition">
+            <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 19l-7-7 7-7" /></svg>
+            홈으로
+          </Link>
+          <div className="w-16 h-16 mx-auto rounded-2xl bg-violet-400/15 border border-violet-400/25 flex items-center justify-center mb-5">
+            <svg className="w-9 h-9 text-violet-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z" />
+            </svg>
+          </div>
+          <p className="text-violet-400/70 text-xs font-bold uppercase tracking-widest mb-2">PROMPT ENGINEERING · AI 활용 극대화</p>
+          <h1 className="text-4xl md:text-5xl font-extrabold text-white mb-4 tracking-tight leading-tight">
+            AI를 제대로<br />
+            <span className="text-transparent bg-clip-text bg-gradient-to-r from-violet-400 to-blue-400">100% 활용하기</span>
+          </h1>
+          <p className="text-violet-100/50 text-base md:text-lg leading-relaxed max-w-xl mx-auto mb-6">
+            ChatGPT·Claude를 쓰는데 결과가 항상 애매하신가요?<br />
+            업무에 딱 맞는 프롬프트를 전문 설계하여 AI를 제대로 활용하도록 도와드립니다.
+          </p>
+          <div className="flex flex-wrap gap-2 justify-center">
+            <div className="inline-flex items-center gap-2 bg-violet-400/10 border border-violet-400/20 text-violet-300 text-xs font-medium px-4 py-2 rounded-full">
+              <span className="text-green-400">↑</span> 업무 효율 평균 3~5배 향상
+            </div>
+            <div className="inline-flex items-center gap-2 bg-white/5 border border-white/10 text-white/50 text-xs font-medium px-4 py-2 rounded-full">
+              ChatGPT · Claude · Gemini 전용 최적화
+            </div>
+          </div>
+        </div>
+      </div>
+
+      {/* ─── Before/After ─── */}
+      <div className="px-6 py-12 lg:px-12">
+        <div className="max-w-5xl mx-auto">
+          <div className="text-center mb-8">
+            <p className="text-violet-600 text-xs font-bold uppercase tracking-widest mb-2">BEFORE vs AFTER</p>
+            <h2 className="text-2xl md:text-3xl font-extrabold text-[#04102b]">이런 차이가 납니다</h2>
+          </div>
+          <div className="space-y-5">
+            {examples.map((ex) => (
+              <div key={ex.type} className="bg-white rounded-2xl border border-[#dbe8ff] overflow-hidden">
+                <div className="bg-[#04102b] px-5 py-3 flex items-center justify-between">
+                  <span className="text-white/60 text-xs font-semibold font-mono">{ex.type} 예시</span>
+                  <span className="bg-violet-400/20 border border-violet-400/30 text-violet-300 text-xs px-3 py-1 rounded-full">{ex.improvement}</span>
+                </div>
+                <div className="grid md:grid-cols-2 divide-y md:divide-y-0 md:divide-x divide-[#dbe8ff]">
+                  <div className="p-5">
+                    <div className="inline-block bg-red-50 border border-red-200 text-red-600 text-xs font-bold px-2 py-0.5 rounded-md mb-3">일반 프롬프트</div>
+                    <div className="bg-slate-50 rounded-xl px-4 py-3 font-mono text-sm text-slate-600 border border-slate-200">&ldquo;{ex.before}&rdquo;</div>
+                    <div className="mt-3 text-xs text-red-500 flex items-center gap-1.5">
+                      <svg className="w-3.5 h-3.5" fill="currentColor" viewBox="0 0 20 20"><path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clipRule="evenodd" /></svg>
+                      모호한 지시 → 불완전한 결과
+                    </div>
+                  </div>
+                  <div className="p-5">
+                    <div className="inline-block bg-violet-50 border border-violet-200 text-violet-700 text-xs font-bold px-2 py-0.5 rounded-md mb-3">최적화 프롬프트</div>
+                    <div className="bg-violet-50 rounded-xl px-4 py-3 font-mono text-sm text-slate-700 border border-violet-100 leading-relaxed">&ldquo;{ex.after}&rdquo;</div>
+                    <div className="mt-3 text-xs text-violet-600 flex items-center gap-1.5">
+                      <svg className="w-3.5 h-3.5" fill="currentColor" viewBox="0 0 20 20"><path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clipRule="evenodd" /></svg>
+                      명확한 구조 → 바로 쓸 수 있는 결과
+                    </div>
+                  </div>
+                </div>
+              </div>
+            ))}
+          </div>
+        </div>
+      </div>
+
+      {/* ─── 활용 분야 ─── */}
+      <div className="px-6 pb-12 lg:px-12">
+        <div className="max-w-5xl mx-auto">
+          <div className="text-center mb-8">
+            <p className="text-violet-600 text-xs font-bold uppercase tracking-widest mb-2">USE CASES</p>
+            <h2 className="text-2xl md:text-3xl font-extrabold text-[#04102b]">활용 분야</h2>
+          </div>
+          <div className="grid sm:grid-cols-2 lg:grid-cols-3 gap-4">
+            {useCases.map((uc, i) => (
+              <div key={uc.label} className="bg-white rounded-2xl border border-[#dbe8ff] p-5 hover:border-violet-200 transition-colors">
+                <div className="flex items-start gap-3">
+                  <div className="w-8 h-8 rounded-lg bg-violet-50 border border-violet-200 flex items-center justify-center flex-shrink-0">
+                    <span className="text-violet-600 font-extrabold text-xs">{String(i + 1).padStart(2, '0')}</span>
+                  </div>
+                  <div>
+                    <h3 className="font-bold text-[#04102b] text-sm mb-1">{uc.label}</h3>
+                    <p className="text-slate-500 text-xs leading-relaxed">{uc.desc}</p>
+                  </div>
+                </div>
+              </div>
+            ))}
+          </div>
+        </div>
+      </div>
+
+      {/* ─── 요금제 ─── */}
+      <div className="px-6 pb-12 lg:px-12">
+        <div className="max-w-5xl mx-auto">
+          <div className="text-center mb-8">
+            <p className="text-[#1a56db] text-xs font-bold uppercase tracking-widest mb-2">PRICING</p>
+            <h2 className="text-2xl md:text-3xl font-extrabold text-[#04102b]">요금제</h2>
+          </div>
+          <div className="grid sm:grid-cols-3 gap-5">
+            {plans.map((plan) => (
+              <div key={plan.name} className={`rounded-2xl border p-6 relative flex flex-col ${
+                plan.highlight
+                  ? 'bg-gradient-to-br from-[#0d0a2e] to-[#1a0f5c] border-violet-400/30 shadow-2xl shadow-violet-900/20 scale-105'
+                  : 'bg-white border-[#dbe8ff]'
+              }`}>
+                {plan.highlight && (
+                  <div className="absolute -top-3.5 left-1/2 -translate-x-1/2 bg-violet-400 text-[#0d0a2e] text-xs font-extrabold px-4 py-1 rounded-full tracking-wide">추천</div>
+                )}
+                <div className={`text-xs font-bold mb-2 tracking-wide ${plan.highlight ? 'text-violet-400' : 'text-slate-400'}`}>{plan.name.toUpperCase()}</div>
+                <div className="flex items-baseline gap-1 mb-1">
+                  <span className={`text-3xl font-extrabold ${plan.highlight ? 'text-white' : 'text-[#04102b]'}`}>{plan.price}</span>
+                  <span className={`text-sm ${plan.highlight ? 'text-violet-300/50' : 'text-slate-400'}`}>{plan.period}</span>
+                </div>
+                <p className={`text-xs mb-5 ${plan.highlight ? 'text-violet-300/50' : 'text-slate-400'}`}>{plan.desc}</p>
+                <ul className="space-y-2 mb-6 flex-1">
+                  {plan.features.map((f) => (
+                    <li key={f} className={`flex items-start gap-2 text-xs ${plan.highlight ? 'text-violet-100/80' : 'text-slate-600'}`}>
+                      <div className={`w-4 h-4 rounded-full flex items-center justify-center flex-shrink-0 mt-0.5 ${plan.highlight ? 'bg-violet-400/20 border border-violet-400/40' : 'bg-[#f0f5ff] border border-[#dbe8ff]'}`}>
+                        <div className={`w-1.5 h-1.5 rounded-full ${plan.highlight ? 'bg-violet-400' : 'bg-[#1a56db]'}`} />
+                      </div>
+                      {f}
+                    </li>
+                  ))}
+                </ul>
+                <button
+                  onClick={() => openModal(`프롬프트 엔지니어링 - ${plan.name}`)}
+                  className={`block w-full text-center py-3 rounded-xl text-sm font-bold transition ${
+                    plan.highlight ? 'bg-violet-400 text-[#0d0a2e] hover:bg-violet-300' : 'bg-[#04102b] text-white hover:bg-[#0a1f5c]'
+                  }`}
+                >
+                  신청하기
+                </button>
+              </div>
+            ))}
+          </div>
+        </div>
+      </div>
+
+      {/* ─── CTA ─── */}
+      <div className="px-6 pb-12 lg:px-12">
+        <div className="max-w-3xl mx-auto">
+          <div className="bg-gradient-to-r from-[#0d0a2e] to-[#1a0f5c] rounded-2xl border border-violet-400/20 p-8 text-center">
+            <p className="text-violet-400 text-xs font-bold uppercase tracking-widest mb-2">GET STARTED</p>
+            <h3 className="text-white text-2xl font-extrabold mb-2">AI를 제대로 활용하고 싶다면</h3>
+            <p className="text-violet-100/40 text-sm mb-6">업무 분석 인터뷰 → 맞춤 설계 → 가이드 제공</p>
+            <button
+              onClick={() => openModal('프롬프트 엔지니어링')}
+              className="inline-flex items-center gap-2 bg-violet-400 hover:bg-violet-300 text-[#0d0a2e] px-8 py-3 rounded-xl font-extrabold text-sm transition-all shadow-lg shadow-violet-900/30"
+            >
+              프롬프트 설계 신청 →
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

app/services/stock/page.tsx

@@ -0,0 +1,264 @@
+'use client';
+
+import { useState } from 'react';
+import Link from 'next/link';
+import ContactModal from '../../components/ContactModal';
+
+const CHECKLIST = [
+  '사용 중인 증권사 확인 (키움증권 / 한국투자증권 권장)',
+  '증권사 API 사용 신청이 필요합니다 (무료)',
+  'Windows PC 또는 서버 환경 필요',
+  '투자 원금 손실 위험 인지 — 여유 자금 운용 권장',
+  '전략 커스터마이징은 프로 플랜 이상 가능',
+];
+
+const features = [
+  { title: '실시간 시장 모니터링', desc: '주식 시장 데이터를 실시간으로 수집·분석하여 매매 신호를 감지합니다.', detail: '장 시작~종료 전 구간 모니터링' },
+  { title: '텔레그램 즉시 알림', desc: '매수·매도 신호 발생 시 텔레그램으로 즉시 알림을 전송합니다.', detail: '1초 이내 신호 전달' },
+  { title: '자동 매수/매도 실행', desc: '신호에 따라 증권사 API와 연동하여 자동으로 주문을 실행합니다.', detail: '키움증권 / 한국투자증권 API' },
+  { title: '기술적 분석 전략', desc: 'RSI, MACD, 볼린저밴드 등 검증된 기술적 지표를 조합하여 신호를 생성합니다.', detail: '다중 지표 복합 전략' },
+  { title: '손절/익절 자동화', desc: '사전 설정한 손절·익절 기준에 따라 자동으로 포지션을 청산합니다.', detail: '리스크 자동 관리' },
+  { title: '매매 이력 리포트', desc: '일별·주별 매매 내역과 손익 현황을 텔레그램 및 이메일로 보고합니다.', detail: '일별 수익률 추적' },
+];
+
+const plans = [
+  {
+    name: '스타터',
+    installPrice: '99,000원',
+    monthlyPrice: '29,000원',
+    desc: '1개 종목 자동 매매',
+    features: ['1개 종목 모니터링', '텔레그램 매매 알림', '기본 기술적 분석 전략', '손절/익절 자동 설정', '월간 손익 리포트'],
+    highlight: false,
+  },
+  {
+    name: '프로',
+    installPrice: '199,000원',
+    monthlyPrice: '49,000원',
+    desc: '최대 5개 종목 + 전략 커스터마이징',
+    features: ['최대 5개 종목 동시 운영', '전략 파라미터 커스터마이징', '다중 기술적 지표 조합', '실시간 포트폴리오 현황', '주간 성과 분석 리포트', '1개월 무상 기술 지원'],
+    highlight: true,
+  },
+  {
+    name: '엔터프라이즈',
+    installPrice: '협의',
+    monthlyPrice: '협의',
+    desc: '무제한 종목 + 맞춤 전략 개발',
+    features: ['종목 제한 없음', '완전 맞춤 전략 개발', '백테스팅 리포트 제공', '전용 서버 구성 가능', '24시간 모니터링', '전담 유지보수 계약'],
+    highlight: false,
+  },
+];
+
+const faqs = [
+  { q: '어떤 증권사와 연동되나요?', a: '키움증권 Open API, 한국투자증권 API 등 주요 증권사 API를 지원합니다. 사용하시는 증권사를 미리 알려주시면 호환성을 확인해드립니다.' },
+  { q: '원금 손실 위험은 없나요?', a: '주식 투자는 원금 손실 가능성이 있습니다. 자동 매매 프로그램은 매매를 보조하는 도구이며, 투자 결과에 대한 책임은 투자자 본인에게 있습니다. 반드시 여유 자금으로만 운용하세요.' },
+  { q: '프로그램은 PC에 설치해야 하나요?', a: '네, 기본적으로 증권사 API 연동을 위해 Windows PC 환경에 설치합니다. 별도 서버가 필요하신 경우 NAS 또는 클라우드 서버 구성도 가능합니다.' },
+  { q: '전략 수정이나 추가 요청이 가능한가요?', a: '프로 플랜 이상에서 전략 파라미터 조정이 가능합니다. 완전히 새로운 전략 개발은 별도 비용으로 진행됩니다.' },
+];
+
+export default function StockPage() {
+  const [modalOpen, setModalOpen] = useState(false);
+  const [modalService, setModalService] = useState('주식 자동 매매');
+
+  const openModal = (service: string) => {
+    setModalService(service);
+    setModalOpen(true);
+  };
+
+  return (
+    <div className="min-h-full bg-[#f0f5ff]">
+      <ContactModal
+        isOpen={modalOpen}
+        onClose={() => setModalOpen(false)}
+        service={modalService}
+        checklist={CHECKLIST}
+        accentColor="text-emerald-400"
+        headerFrom="#011225"
+        headerTo="#01204a"
+      />
+
+      {/* ─── Hero ─── */}
+      <div className="relative overflow-hidden bg-gradient-to-br from-[#011225] via-[#01204a] to-[#011a35] px-6 py-14 lg:px-12">
+        <svg className="absolute bottom-0 left-0 right-0 w-full opacity-15" height="80" viewBox="0 0 600 80" preserveAspectRatio="none">
+          <polyline points="0,70 60,55 120,62 200,25 280,40 340,15 420,30 500,8 600,18" stroke="#22c55e" strokeWidth="2" fill="none" strokeLinejoin="round" />
+        </svg>
+        <div className="absolute right-10 top-8 opacity-10 hidden lg:flex gap-2 items-end">
+          {[60,80,45,90,70,55,85,65,95,72].map((h, i) => (
+            <div key={i} className="flex flex-col items-center gap-0.5">
+              <div className="w-0.5 bg-white/50" style={{ height: `${h * 0.3}px` }} />
+              <div className="w-3 rounded-sm" style={{ height: `${h * 0.4}px`, background: i % 2 === 0 ? '#22c55e' : '#ef4444' }} />
+              <div className="w-0.5 bg-white/50" style={{ height: `${h * 0.2}px` }} />
+            </div>
+          ))}
+        </div>
+
+        <div className="relative max-w-3xl mx-auto text-center">
+          <Link href="/" className="inline-flex items-center gap-1.5 text-emerald-300/60 hover:text-emerald-300 text-sm mb-6 transition">
+            <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 19l-7-7 7-7" /></svg>
+            홈으로
+          </Link>
+          <div className="w-16 h-16 mx-auto rounded-2xl bg-emerald-400/15 border border-emerald-400/25 flex items-center justify-center mb-5">
+            <svg className="w-9 h-9 text-emerald-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M7 12l3-3 3 3 4-4M8 21l4-4 4 4M3 4h18M4 4h16v12a1 1 0 01-1 1H5a1 1 0 01-1-1V4z" />
+            </svg>
+          </div>
+          <p className="text-emerald-400/70 text-xs font-bold uppercase tracking-widest mb-2">ALGO TRADING · 텔레그램 연동</p>
+          <h1 className="text-4xl md:text-5xl font-extrabold text-white mb-4 tracking-tight leading-tight">
+            주식 자동 매매<br />
+            <span className="text-transparent bg-clip-text bg-gradient-to-r from-emerald-400 to-cyan-400">알고트레이딩</span>
+          </h1>
+          <p className="text-emerald-100/50 text-base md:text-lg leading-relaxed max-w-xl mx-auto mb-6">
+            직접 개발하고 NAS 서버에서 운영 중인 주식 자동 매매 시스템.<br />
+            기술적 분석 신호를 텔레그램으로 받아 자동으로 매수·매도합니다.
+          </p>
+          <div className="flex flex-wrap gap-2 justify-center mb-4">
+            <div className="inline-flex items-center gap-2 bg-emerald-400/10 border border-emerald-400/20 text-emerald-300 text-xs font-medium px-4 py-2 rounded-full">
+              <span className="w-1.5 h-1.5 rounded-full bg-emerald-400 animate-pulse" />NAS 서버에서 실제 운영 중
+            </div>
+            <div className="inline-flex items-center gap-2 bg-white/5 border border-white/10 text-white/60 text-xs font-medium px-4 py-2 rounded-full">
+              키움증권 · 한국투자증권 API 연동
+            </div>
+          </div>
+        </div>
+        <div className="relative max-w-2xl mx-auto mt-2">
+          <div className="bg-black/40 border border-emerald-400/15 rounded-xl p-4 font-mono text-xs">
+            <div className="flex items-center gap-2 mb-3 pb-2 border-b border-white/10">
+              <div className="w-3 h-3 rounded-full bg-red-500/60" /><div className="w-3 h-3 rounded-full bg-yellow-500/60" /><div className="w-3 h-3 rounded-full bg-emerald-500/60" />
+              <span className="text-white/30 text-xs ml-2">algo_trader.py</span>
+            </div>
+            <div className="space-y-1.5">
+              <div><span className="text-emerald-400">✓</span><span className="text-white/40"> [09:01:23] </span><span className="text-white/70">KOSPI 모니터링 시작</span></div>
+              <div><span className="text-emerald-400">✓</span><span className="text-white/40"> [09:15:44] </span><span className="text-emerald-300">RSI(14) = 32.4 → 과매도 신호 감지</span></div>
+              <div><span className="text-amber-400">→</span><span className="text-white/40"> [09:15:44] </span><span className="text-amber-300">텔레그램 알림 전송: 삼성전자 매수 신호</span></div>
+              <div><span className="text-blue-400">✓</span><span className="text-white/40"> [09:15:45] </span><span className="text-blue-300">매수 주문 실행 완료 (5주 × 72,400원)</span></div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      {/* ─── 투자 유의 ─── */}
+      <div className="px-6 pt-8 lg:px-12">
+        <div className="max-w-5xl mx-auto">
+          <div className="bg-amber-50 border border-amber-200 rounded-xl px-5 py-3.5 flex items-start gap-3">
+            <svg className="w-5 h-5 text-amber-500 flex-shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
+            </svg>
+            <p className="text-amber-800 text-xs leading-relaxed">
+              <strong>투자 유의사항:</strong> 주식 자동 매매 프로그램은 투자 보조 도구입니다. 주식 투자는 원금 손실의 위험이 있으며, 투자 결과에 대한 책임은 투자자 본인에게 있습니다. 반드시 여유 자금으로만 운용하세요.
+            </p>
+          </div>
+        </div>
+      </div>
+
+      {/* ─── 주요 기능 ─── */}
+      <div className="px-6 py-12 lg:px-12">
+        <div className="max-w-5xl mx-auto">
+          <div className="text-center mb-8">
+            <p className="text-emerald-600 text-xs font-bold uppercase tracking-widest mb-2">FEATURES</p>
+            <h2 className="text-2xl md:text-3xl font-extrabold text-[#04102b]">주요 기능</h2>
+          </div>
+          <div className="grid sm:grid-cols-2 lg:grid-cols-3 gap-4">
+            {features.map((f) => (
+              <div key={f.title} className="bg-white rounded-2xl border border-[#dbe8ff] p-5 hover:border-emerald-200 transition-colors">
+                <div className="inline-block bg-emerald-50 border border-emerald-200 text-emerald-700 text-xs font-bold px-2 py-0.5 rounded-md mb-3">{f.detail}</div>
+                <h3 className="font-bold text-[#04102b] text-sm mb-2">{f.title}</h3>
+                <p className="text-slate-500 text-xs leading-relaxed">{f.desc}</p>
+              </div>
+            ))}
+          </div>
+        </div>
+      </div>
+
+      {/* ─── 요금제 ─── */}
+      <div className="px-6 pb-12 lg:px-12">
+        <div className="max-w-5xl mx-auto">
+          <div className="text-center mb-2">
+            <p className="text-[#1a56db] text-xs font-bold uppercase tracking-widest mb-2">PRICING</p>
+            <h2 className="text-2xl md:text-3xl font-extrabold text-[#04102b]">요금제</h2>
+          </div>
+          <p className="text-center text-slate-400 text-sm mb-8">설치비(1회) + 월 유지비 구조입니다</p>
+          <div className="grid sm:grid-cols-3 gap-5">
+            {plans.map((plan) => (
+              <div key={plan.name} className={`rounded-2xl border p-6 relative flex flex-col ${
+                plan.highlight
+                  ? 'bg-gradient-to-br from-[#011225] to-[#01204a] border-emerald-400/30 shadow-2xl shadow-emerald-900/20 scale-105'
+                  : 'bg-white border-[#dbe8ff]'
+              }`}>
+                {plan.highlight && (
+                  <div className="absolute -top-3.5 left-1/2 -translate-x-1/2 bg-emerald-400 text-[#011225] text-xs font-extrabold px-4 py-1 rounded-full tracking-wide">인기</div>
+                )}
+                <div className={`text-xs font-bold mb-3 tracking-wide ${plan.highlight ? 'text-emerald-400' : 'text-slate-400'}`}>{plan.name.toUpperCase()}</div>
+                <div className="mb-4">
+                  <div className={`text-xs mb-0.5 ${plan.highlight ? 'text-emerald-400/60' : 'text-slate-400'}`}>설치비 (1회)</div>
+                  <div className={`text-2xl font-extrabold ${plan.highlight ? 'text-white' : 'text-[#04102b]'}`}>{plan.installPrice}</div>
+                </div>
+                <div className="mb-1">
+                  <div className={`text-xs mb-0.5 ${plan.highlight ? 'text-emerald-400/60' : 'text-slate-400'}`}>월 유지비</div>
+                  <div className={`text-xl font-bold ${plan.highlight ? 'text-white' : 'text-[#04102b]'}`}>{plan.monthlyPrice}</div>
+                </div>
+                <p className={`text-xs mt-2 mb-5 ${plan.highlight ? 'text-emerald-300/50' : 'text-slate-400'}`}>{plan.desc}</p>
+                <ul className="space-y-2 mb-6 flex-1">
+                  {plan.features.map((f) => (
+                    <li key={f} className={`flex items-start gap-2 text-xs ${plan.highlight ? 'text-emerald-100/80' : 'text-slate-600'}`}>
+                      <div className={`w-4 h-4 rounded-full flex items-center justify-center flex-shrink-0 mt-0.5 ${plan.highlight ? 'bg-emerald-400/20 border border-emerald-400/40' : 'bg-[#f0f5ff] border border-[#dbe8ff]'}`}>
+                        <div className={`w-1.5 h-1.5 rounded-full ${plan.highlight ? 'bg-emerald-400' : 'bg-[#1a56db]'}`} />
+                      </div>
+                      {f}
+                    </li>
+                  ))}
+                </ul>
+                <button
+                  onClick={() => openModal(`주식 자동 매매 - ${plan.name}`)}
+                  className={`block w-full text-center py-3 rounded-xl text-sm font-bold transition ${
+                    plan.highlight ? 'bg-emerald-400 text-[#011225] hover:bg-emerald-300' : 'bg-[#04102b] text-white hover:bg-[#0a1f5c]'
+                  }`}
+                >
+                  도입 문의
+                </button>
+              </div>
+            ))}
+          </div>
+        </div>
+      </div>
+
+      {/* ─── FAQ ─── */}
+      <div className="px-6 pb-12 lg:px-12">
+        <div className="max-w-3xl mx-auto">
+          <div className="text-center mb-8">
+            <p className="text-[#1a56db] text-xs font-bold uppercase tracking-widest mb-2">FAQ</p>
+            <h2 className="text-2xl font-extrabold text-[#04102b]">자주 묻는 질문</h2>
+          </div>
+          <div className="space-y-3">
+            {faqs.map((faq, i) => (
+              <div key={faq.q} className="bg-white rounded-2xl border border-[#dbe8ff] p-6">
+                <div className="flex items-start gap-3">
+                  <span className="text-emerald-500 font-extrabold text-sm flex-shrink-0 mt-0.5">Q{i + 1}</span>
+                  <div>
+                    <h3 className="font-bold text-[#04102b] text-sm mb-2">{faq.q}</h3>
+                    <p className="text-slate-500 text-sm leading-relaxed">{faq.a}</p>
+                  </div>
+                </div>
+              </div>
+            ))}
+          </div>
+        </div>
+      </div>
+
+      {/* ─── CTA ─── */}
+      <div className="px-6 pb-12 lg:px-12">
+        <div className="max-w-3xl mx-auto">
+          <div className="bg-gradient-to-r from-[#011225] to-[#01204a] rounded-2xl border border-emerald-400/20 p-8 text-center">
+            <p className="text-emerald-400 text-xs font-bold uppercase tracking-widest mb-2">START TRADING</p>
+            <h3 className="text-white text-2xl font-extrabold mb-2">지금 도입 상담 받아보세요</h3>
+            <p className="text-emerald-100/40 text-sm mb-6">무료 상담 후 정확한 견적을 드립니다</p>
+            <button
+              onClick={() => openModal('주식 자동 매매')}
+              className="inline-flex items-center gap-2 bg-emerald-400 hover:bg-emerald-300 text-[#011225] px-8 py-3 rounded-xl font-extrabold text-sm transition-all shadow-lg shadow-emerald-900/30"
+            >
+              무료 상담 신청 →
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

public/robots.txt

@@ -0,0 +1,5 @@
+# https://www.robotstxt.org/robotstxt.html
+User-agent: *
+Allow: /
+
+Sitemap: https://jaengseung-made.com/sitemap.xml

public/sitemap.xml

@@ -0,0 +1,33 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
+  <url>
+    <loc>https://jaengseung-made.com</loc>
+    <lastmod>2025-02-10</lastmod>
+    <changefreq>weekly</changefreq>
+    <priority>1.0</priority>
+  </url>
+  <url>
+    <loc>https://jaengseung-made.com/#services</loc>
+    <lastmod>2025-02-10</lastmod>
+    <changefreq>weekly</changefreq>
+    <priority>0.9</priority>
+  </url>
+  <url>
+    <loc>https://jaengseung-made.com/#portfolio</loc>
+    <lastmod>2025-02-10</lastmod>
+    <changefreq>weekly</changefreq>
+    <priority>0.8</priority>
+  </url>
+  <url>
+    <loc>https://jaengseung-made.com/#about</loc>
+    <lastmod>2025-02-10</lastmod>
+    <changefreq>monthly</changefreq>
+    <priority>0.7</priority>
+  </url>
+  <url>
+    <loc>https://jaengseung-made.com/#contact</loc>
+    <lastmod>2025-02-10</lastmod>
+    <changefreq>monthly</changefreq>
+    <priority>0.9</priority>
+  </url>
+</urlset>