timelabs 0.1.0 → 0.1.1

package/skills/web-design/claude-code/defs/styles/02-style-list.md

@@ -0,0 +1,421 @@
+# 스타일 목록
+
+
+### [A] 🌙 다크네온 (Dark Neon)
+- **컨셉**: 어두운 배경 + 네온 포인트
+- **Primary**: `#00f0ff` (Cyan Neon)
+- **Background**: `#0a0a1a`
+- **Accent**: `#ff00ff` (Magenta)
+- **적합**: 테크, 나이트라이프, 크리에이티브
+- **Hover**: `hover:shadow-[0_0_25px_rgba(0,240,255,0.5)]` 글로우 강화, `hover:border-cyan-400/60`, 버튼 `hover:bg-cyan-400/10`
+- **Shadow**: 네온 글로우 `shadow-[0_0_15px_rgba(0,240,255,0.3)]`, 카드 `shadow-[0_0_30px_rgba(0,240,255,0.1)]`
+- **Border**: `border border-cyan-400/30`, 호버 시 `/60`으로 밝아짐
+- **BG Pattern**: CSS 그리드 라인 `bg-[linear-gradient(rgba(0,240,255,0.03)_1px,transparent_1px),linear-gradient(90deg,rgba(0,240,255,0.03)_1px,transparent_1px)]`, 라디얼 글로우 스팟
+- **Decoration**: 네온 라인 구분선 (`h-px bg-gradient-to-r from-transparent via-cyan-400 to-transparent`), 글로잉 도트, `::after` 글로우 후광
+- **Animation**: `animate-pulse` 글로우 요소, `animate-neon-flicker` (opacity 0.8↔1 반복), 등장 `opacity-0→1 + blur-sm→blur-0`
+- **Gradient**: 텍스트 `bg-gradient-to-r from-cyan-400 to-fuchsia-500 bg-clip-text`, 배경 라디얼 `radial-gradient(circle at 30% 50%, rgba(0,240,255,0.08), transparent 60%)`
+- **Image Interaction**: `opacity-20 hover:opacity-60 scale-100 hover:scale-105` + cyan glow overlay
+- **Section Divider**: 직선 + 네온 글로우 라인 (`border-cyan-400/30 shadow-[0_0_10px_rgba(0,240,255,0.3)]`)
+
+### [B] 🔷 파랑그라데이션 (Blue Gradient)
+- **컨셉**: 블루 계열 그라데이션 중심
+- **Primary**: `#3b82f6` → `#1d4ed8`
+- **Background**: `#eff6ff`
+- **Accent**: `#06b6d4`
+- **적합**: SaaS, 기업, 금융
+- **Hover**: `hover:-translate-y-1 hover:shadow-xl`, 버튼 `hover:bg-gradient-to-r hover:from-blue-600 hover:to-indigo-700`
+- **Shadow**: 소프트 블루 틴트 `shadow-lg shadow-blue-500/10`, 호버 `shadow-xl shadow-blue-500/20`
+- **Border**: `border-0` 또는 `border border-blue-100`, 그라데이션 바텀라인 `after:bg-gradient-to-r after:from-blue-500 after:to-indigo-500`
+- **BG Pattern**: 그라데이션 메시 `bg-gradient-to-br from-blue-50 via-white to-indigo-50`, 섹션 분리 웨이브 SVG
+- **Decoration**: 그라데이션 액센트 라인 (상단 `h-1 bg-gradient-to-r`), 필(pill) 뱃지 `rounded-full bg-blue-100 text-blue-700`
+- **Animation**: `animate-gradient` (background-position 3s ease infinite), 등장 `fade-up` (translateY 20px→0 + opacity), 숫자 카운트업
+- **Gradient**: 히어로 `bg-gradient-to-r from-blue-500 to-indigo-600`, CTA `bg-gradient-to-r from-blue-600 to-cyan-500`, 오버레이 `bg-gradient-to-b from-blue-900/80 to-transparent`
+- **Image Interaction**: `opacity-90 hover:opacity-100 scale-100 hover:scale-[1.03]` + shadow lift
+- **Section Divider**: 클린 1px 라인 (`border-blue-100`)
+
+### [C] 🧊 3D카드 (3D Card)
+- **컨셉**: 입체감 있는 카드 UI, 뉴모피즘 요소
+- **Primary**: `#6366f1`
+- **Background**: `#f1f5f9`
+- **Shadow**: 레이어드 그림자
+- **적합**: 포트폴리오, 프레젠테이션
+- **Hover**: `hover:rotate-y-2 hover:rotate-x-2` 퍼스펙티브 틸트, `hover:shadow-2xl`, 마우스 트래킹 틸트 (JS)
+- **Shadow**: 뉴모픽 `shadow-[6px_6px_12px_#d1d5db,-6px_-6px_12px_#ffffff]`, 호버 `shadow-[8px_8px_16px_#c8ccd0,-8px_-8px_16px_#ffffff]`
+- **Border**: `border-0` (그림자가 경계 역할), 인셋 하이라이트 `ring-1 ring-white/50`
+- **BG Pattern**: 미세 노이즈 텍스처 SVG, `bg-slate-100` 뉴트럴
+- **Decoration**: 플로팅 레이어 (z-offset 카드 위 뱃지), 입체 카드 모서리 하이라이트, 깊이 표시 선
+- **Animation**: 틸트 `transition-transform duration-300 ease-out`, 카드 등장 `scale-95→100 + shadow deepen`, 호버 시 살짝 부유
+- **Gradient**: 카드 표면 미세 `bg-gradient-to-br from-white to-slate-50`, 뉴모픽 표면 `linear-gradient(145deg, #f0f0f3, #d9dbe2)`
+- **Image Interaction**: `hover:rotate-y-2 hover:rotate-x-2` + perspective tilt + shadow-2xl
+- **Section Divider**: 입체 그림자 라인 (`shadow-[0_1px_3px_rgba(0,0,0,0.1)]`)
+
+### [D] ⚪ 미니멀화이트 (Minimal White)
+- **컨셉**: 극단적 미니멀, 화이트 스페이스 활용
+- **Primary**: `#18181b`
+- **Background**: `#ffffff`
+- **Accent**: `#3b82f6`
+- **적합**: 블로그, 포트폴리오, 문서
+- **Hover**: 밑줄 성장 `after:w-0 hover:after:w-full after:h-px after:bg-zinc-900`, 버튼 `hover:bg-zinc-100`
+- **Shadow**: `shadow-sm` 또는 없음, 호버 시에만 `hover:shadow-md`
+- **Border**: `border border-zinc-100`, 호버 `hover:border-zinc-300`
+- **BG Pattern**: 순수 화이트, 단일 수평 액센트 라인 `h-px bg-zinc-200`
+- **Decoration**: 거의 없음 — 타이포그래피 자체가 장식, 얇은 HR `border-t border-zinc-100`, 최소 도트 `·`
+- **Animation**: 오파시티 페이드만 `transition-opacity duration-200`, `clip-path: inset(0 100% 0 0)→inset(0)` 텍스트 리빌
+- **Gradient**: 없음 (단색만 사용), 유일한 예외: 블루 액센트 CTA 배경
+- **Image Interaction**: `grayscale hover:grayscale-0 opacity-80 hover:opacity-100`
+- **Section Divider**: 극세 라인 (`border-zinc-100`) 또는 여백만
+
+### [E] 🫧 글래스모피즘 (Glassmorphism)
+- **컨셉**: 반투명 유리 효과, 블러 배경
+- **Primary**: `rgba(255,255,255,0.25)`
+- **Background**: 그라데이션 + backdrop-blur
+- **Border**: `rgba(255,255,255,0.18)`
+- **적합**: 랜딩페이지, 모던 앱
+- **Hover**: 불투명도 증가 `hover:bg-white/35`, 블러 강화 `hover:backdrop-blur-xl`, 보더 밝아짐 `hover:border-white/30`
+- **Shadow**: `shadow-lg shadow-black/5` 컬러 틴트, 글래스 패널 `shadow-[0_8px_32px_rgba(31,38,135,0.15)]`
+- **Border**: `border border-white/20`, 호버 `/30`, 인너 글로우 `ring-1 ring-inset ring-white/10`
+- **BG Pattern**: 메시 그라데이션 배경 (3~4색 blob), 블러 레이어, `bg-gradient-to-br from-violet-500/20 via-fuchsia-500/10 to-cyan-500/20`
+- **Decoration**: 프로스트 패널 오버레이, 라이트 리크 (밝은 원형 블러), 글래스 경계 하이라이트 `bg-gradient-to-b from-white/25 to-white/5`
+- **Animation**: 블러인 `backdrop-blur-0→backdrop-blur-md`, 오파시티 시프트 `opacity-0→1`, 부드러운 부유 `animate-float` (translateY ±8px, 6s ease)
+- **Gradient**: 배경 메시 `bg-[radial-gradient(at_40%_20%,rgb(139,92,246,0.3)_0,transparent_50%),radial-gradient(at_80%_80%,rgb(6,182,212,0.2)_0,transparent_50%)]`, 패널 `bg-gradient-to-b from-white/20 to-white/5`
+- **Image Interaction**: `blur-sm hover:blur-0 opacity-30 hover:opacity-50` + glass overlay
+- **Section Divider**: 반투명 라인 (`border-white/10`)
+
+### [F] 🌈 비비드컬러풀 (Vivid Colorful)
+- **컨셉**: 밝고 대담한 멀티 컬러
+- **Primary**: `#f43f5e`
+- **Secondary**: `#8b5cf6`
+- **Tertiary**: `#06b6d4`
+- **적합**: 크리에이티브, 교육, 엔터테인먼트
+- **Hover**: `hover:scale-105 hover:rotate-1`, 버튼 `hover:-translate-y-1`, 컬러 시프트 `hover:bg-violet-500` (primary→secondary)
+- **Shadow**: 컬러 섀도우 `shadow-lg shadow-rose-500/20`, 호버 `shadow-xl shadow-violet-500/25`
+- **Border**: `border-2 border-current` (요소별 컬러 다름), 레인보우 보더 `bg-gradient-to-r from-rose-500 via-violet-500 to-cyan-500 p-[2px]`
+- **BG Pattern**: 추상 컬러 블롭 (CSS blob), 그라데이션 스팟 `bg-[radial-gradient(circle_at_20%_80%,rgba(244,63,94,0.15),transparent_40%)]`
+- **Decoration**: 컬러 도트 그리드, 물결 라인 SVG, 스티커 뱃지 `rotate-[-3deg] rounded-lg`, 느낌표 아이콘
+- **Animation**: 바운스인 `animate-bounce-in` (scale 0→1.1→1), 위글 `animate-wiggle` (rotate ±3deg), 컬러 사이클 `animate-color-shift`
+- **Gradient**: 멀티스톱 `bg-gradient-to-r from-rose-500 via-violet-500 to-cyan-500`, 듀오톤 오버레이, 텍스트 레인보우
+- **Image Interaction**: `hover:scale-105 hover:rotate-1` + color shift overlay
+- **Section Divider**: 웨이브 SVG (`fill-rose-500/fill-violet-500` 멀티 컬러)
+
+### [G] 🍃 자연/오가닉 (Nature/Organic)
+- **컨셉**: 자연 색감, 유기적 형태
+- **Primary**: `#16a34a`
+- **Background**: `#f0fdf4`
+- **Accent**: `#a16207`
+- **적합**: 환경, 건강, 식품
+- **Hover**: 부드러운 `hover:scale-[1.02]`, 잎 플로트 느낌 `hover:-translate-y-0.5`, `hover:shadow-md`
+- **Shadow**: 따뜻한 소프트 `shadow-md shadow-green-900/5`, 카드 `shadow-sm shadow-emerald-100`
+- **Border**: `border border-green-200 rounded-2xl`, 유기적 둥근 모서리 `rounded-[20px]`
+- **BG Pattern**: 유기적 블롭 형태 (border-radius 30% 70% 70% 30%), 리프 패턴 SVG, 웨이브 구분선 SVG
+- **Decoration**: 잎 아이콘 장식, 덩굴 디바이더, 유기적 블롭 배경 셰이프, 어스톤 라인
+- **Animation**: 부드러운 흔들림 `animate-sway` (rotate ±2deg, 4s), 성장 `scale-0→1` (500ms), 호흡 `animate-breathe` (scale 1↔1.03, 4s)
+- **Gradient**: `bg-gradient-to-br from-green-50 to-amber-50`, 나뭇잎 `from-emerald-400 to-green-600`, 일출 `from-amber-200 to-green-200`
+- **Image Interaction**: `hover:scale-[1.02] opacity-70 hover:opacity-90` + warm overlay
+- **Section Divider**: 유기적 wave SVG (`fill-green-100`)
+
+### [H] 💜 보라그라데이션 (Purple Gradient)
+- **컨셉**: 퍼플~핑크 그라데이션
+- **Primary**: `#7c3aed` → `#db2777`
+- **Background**: `#faf5ff`
+- **Accent**: `#c084fc`
+- **적합**: 뷰티, 패션, 크리에이티브
+- **Hover**: 그라데이션 시프트 `hover:bg-[position:100%]`, 퍼플 글로우 `hover:shadow-[0_0_20px_rgba(124,58,237,0.2)]`
+- **Shadow**: `shadow-lg shadow-purple-500/10`, 호버 `shadow-xl shadow-fuchsia-500/15`
+- **Border**: `border-0` 또는 그라데이션 보더 `bg-gradient-to-r from-violet-500 to-pink-500 p-[1px]`
+- **BG Pattern**: 퍼플-핑크 메시 그라데이션, 부드러운 오브 형태 배경, `radial-gradient(circle at 70% 30%, rgba(192,132,252,0.15), transparent)`
+- **Decoration**: 그라데이션 액센트 라인, 스파클 도트 `✦`, 플로팅 오브 (퍼플 블러 원)
+- **Animation**: `animate-gradient-flow` (background-position 4s), 시머 이펙트 `animate-shimmer` (좌→우 빛 반사), 부드러운 등장 fade-up
+- **Gradient**: 히어로 `from-violet-600 via-purple-500 to-pink-500`, 텍스트 `from-violet-400 to-fuchsia-400`, 버튼 `from-purple-600 to-pink-600`
+- **Image Interaction**: `hover:bg-gradient-to-r hover:from-transparent hover:via-purple-400/10 hover:to-transparent` shine sweep
+- **Section Divider**: 그라데이션 라인 (`bg-gradient-to-r from-transparent via-purple-300 to-transparent h-px`)
+
+### [I] 🎯 포커스드미니멀 (Focused Minimal)
+- **컨셉**: 기능 중심 미니멀, 강한 CTA
+- **Primary**: `#2563eb`
+- **Background**: `#f8fafc`
+- **CTA**: `#dc2626`
+- **적합**: SaaS, 프로덕티비티, 비즈니스
+- **Hover**: CTA `hover:scale-105 hover:shadow-lg`, 일반 `hover:bg-slate-50`, 링크 `hover:text-blue-700 hover:underline`
+- **Shadow**: CTA만 강조 `shadow-md shadow-blue-500/20`, 일반 카드 `shadow-sm`
+- **Border**: `border border-slate-200`, CTA 전용 `border-2 border-blue-600`, 포커스 `ring-2 ring-blue-500`
+- **BG Pattern**: 깨끗한 화이트, 매우 미묘한 도트 그리드 (CTA 영역 배경만), `bg-slate-50` 영역 구분
+- **Decoration**: CTA 화살표 애니메이션 `→`, 포커스 링, 상태 인디케이터 도트, 최소한의 아이콘 뱃지
+- **Animation**: CTA 펄스 `animate-pulse-subtle` (scale 1↔1.02, 2s), 부드러운 포커스 트랜지션 `transition-all duration-200`, 스크롤 `fade-in`
+- **Gradient**: 없음 (단색 사용), CTA 전용 `bg-gradient-to-r from-blue-600 to-blue-700`, 히어로 미묘한 `from-slate-50 to-blue-50/50`
+- **Image Interaction**: `hover:scale-105 hover:shadow-lg` + CTA 글로우
+- **Section Divider**: 액센트 컬러 라인 (`border-b-2 border-blue-600`)
+
+### [J] 📱 모바일퍼스트 (Mobile First)
+- **컨셉**: 모바일 최적화 UI 패턴
+- **Primary**: `#0ea5e9`
+- **Background**: `#ffffff`
+- **Navigation**: 바텀 탭 중심
+- **적합**: 모바일 앱, PWA
+- **Hover**: 탭 `active:scale-95` (터치 피드백), 카드 `hover:bg-sky-50`, 버튼 `active:bg-sky-600`
+- **Shadow**: `shadow-sm` 카드, `shadow-lg` 바텀시트/드롭다운, 네비바 `shadow-[0_-2px_10px_rgba(0,0,0,0.05)]`
+- **Border**: `border border-slate-100`, 구분 `divide-y divide-slate-100`
+- **BG Pattern**: 시스템 UI 배경 `bg-slate-50`, 그룹 카드 `bg-white rounded-xl`
+- **Decoration**: 둥근 필 요소 `rounded-full`, 아이콘 하이라이트 `bg-sky-100 p-2 rounded-xl`, 인디케이터 도트
+- **Animation**: 스프링 탭 `150ms ease`, 슬라이드업 시트 `transform translateY(100%)→0`, 탭 전환 `fade + translateX`
+- **Gradient**: 없음 또는 미묘한 `from-white to-slate-50`, 진행바 `from-sky-400 to-sky-600`
+- **Image Interaction**: `active:scale-95` (터치 피드백) + subtle shadow
+- **Section Divider**: 얇은 구분선 (`border-slate-100 divide-y`)
+
+### [K] 📊 대시보드 (Dashboard)
+- **컨셉**: 데이터 중심, 정보 밀도 높음
+- **Primary**: `#3b82f6`
+- **Background**: `#0f172a` (Dark) / `#f1f5f9` (Light)
+- **Chart**: 멀티 컬러 팔레트
+- **적합**: 관리자 패널, 분석 도구
+- **Hover**: 행 `hover:bg-slate-100 dark:hover:bg-slate-800`, 카드 `hover:border-blue-400`, KPI `hover:scale-[1.02]`
+- **Shadow**: `shadow-sm` 카드, `shadow-lg` 드롭다운/팝오버, 사이드바 `shadow-[4px_0_6px_rgba(0,0,0,0.05)]`
+- **Border**: `border border-slate-200 dark:border-slate-700`, 테이블 `divide-y divide-slate-200`
+- **BG Pattern**: 차트 영역 미세 도트 그리드, 사이드바 다른 톤 `bg-slate-900`, 섹션 `bg-white dark:bg-slate-800 rounded-lg`
+- **Decoration**: 상태 인디케이터 도트 (`w-2 h-2 rounded-full bg-green-500`), 미니 스파크라인 차트, 뱃지 카운터
+- **Animation**: 숫자 카운트업 (JS), 차트 그리기 `stroke-dashoffset`, 스켈레톤 시머 `animate-shimmer`, 진행바 채움
+- **Gradient**: 차트 영역 `fill-opacity gradient`, KPI 카드 `bg-gradient-to-br from-blue-500 to-blue-600 text-white`, 사이드바 `from-slate-900 to-slate-800`
+- **Image Interaction**: `hover:border-blue-400 hover:scale-[1.02]` KPI 카드 강조
+- **Section Divider**: 서브틀 라인 (`border-slate-200 dark:border-slate-700`)
+
+### [L] 🎪 크리에이티브 (Creative)
+- **컨셉**: 비정형 레이아웃, 실험적
+- **Primary**: `#ec4899`
+- **Background**: `#fdf2f8`
+- **Accent**: `#eab308`
+- **적합**: 에이전시, 디자인 스튜디오
+- **Hover**: `hover:rotate-2 hover:scale-110`, 드라마틱 `hover:-translate-y-2 hover:shadow-[8px_8px_0_0_theme(colors.pink.500)]`
+- **Shadow**: 컬러 오프셋 `shadow-[6px_6px_0_0_#ec4899]`, 호버 `shadow-[10px_10px_0_0_#eab308]`
+- **Border**: `border-2 border-pink-400` 또는 `border-4` 굵은 변형, 불규칙 보더 (각 면 다른 색)
+- **BG Pattern**: 하프톤 도트 `radial-gradient(circle, #ec4899 1px, transparent 1px) 0 0/20px 20px`, 대각선 스트라이프, 혼합 텍스처
+- **Decoration**: 화살표 두들, 손그림 원 SVG, 스티커 뱃지 `rotate-[-5deg]`, 별표 `★`, 밑줄 강조 squiggly line
+- **Animation**: 탄력 스프링 `cubic-bezier(0.34,1.56,0.64,1)`, 엘라스틱 스냅, 위글 `animate-wiggle`, 플레이풀 바운스
+- **Gradient**: 와일드 멀티컬러 `from-pink-500 via-yellow-400 to-cyan-400`, 듀오톤 이미지 오버레이, 네온 `from-fuchsia-500 to-yellow-500`
+- **Image Interaction**: `hover:rotate-2 hover:scale-110` + 컬러 오프셋 shadow shift
+- **Section Divider**: 두꺼운 컬러 라인 (`border-4 border-pink-400`) 또는 도트 패턴
+
+### [M] 💼 엔터프라이즈 (Enterprise)
+- **컨셉**: 보수적, 신뢰감, 체계적
+- **Primary**: `#1e40af`
+- **Background**: `#f8fafc`
+- **Accent**: `#059669`
+- **적합**: B2B, 금융, 의료, 법률
+- **Hover**: 미묘한 `hover:bg-slate-50`, 밑줄 성장 `hover:underline`, 행 `hover:bg-blue-50/50`
+- **Shadow**: `shadow-sm` 일관 사용, 모달만 `shadow-xl`, 드롭다운 `shadow-md`
+- **Border**: `border border-slate-200` 균일, 테이블 `divide-y divide-slate-200`, 활성 `border-l-4 border-blue-800`
+- **BG Pattern**: 깨끗한 화이트, 헤더 미묘한 스트라이프 `bg-slate-50`, 섹션 교대 배경
+- **Decoration**: 아이콘 뱃지, 상태 필 `rounded-full px-3`, 최소한의 로고마크, 구분선 `border-t border-slate-100`
+- **Animation**: `transition-all duration-200 ease-in-out` 전체, 바운스 효과 없음, 페이드 + 슬라이드만 사용
+- **Gradient**: 헤더만 `bg-gradient-to-r from-blue-900 to-blue-800`, 본문은 단색, CTA `from-blue-800 to-blue-700`
+- **Image Interaction**: `hover:bg-slate-50 hover:shadow-sm` 미묘한 변화
+- **Section Divider**: 균일한 1px (`border-slate-200`)
+
+### [N] 🎮 게이미피케이션 (Gamification)
+- **컨셉**: 게임 요소, 인터랙티브
+- **Primary**: `#f59e0b`
+- **Background**: `#1a1a2e`
+- **Accent**: `#10b981`
+- **적합**: 교육, 피트니스, 게임
+- **Hover**: `hover:scale-105` + 글로우 `hover:shadow-[0_0_20px_rgba(245,158,11,0.4)]`, "파워업" 이펙트, 버튼 `hover:-translate-y-1`
+- **Shadow**: 네온 글로우 `shadow-[0_0_15px_rgba(245,158,11,0.3)]`, 카드 `shadow-lg shadow-amber-500/10`
+- **Border**: `border-2 border-amber-400/50`, 레벨업 보더 `border-emerald-400/50`, XP바 `rounded-full`
+- **BG Pattern**: 별밭 파티클 CSS, 헥사곤 그리드 `polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%)`, 레벨 진행 배경
+- **Decoration**: XP 바, 어치브먼트 뱃지 `🏆`, 별점 `⭐`, 레벨 넘버, 콤보 카운터, 랭킹 아이콘
+- **Animation**: 바운스인 `cubic-bezier(0.34,1.56,0.64,1)`, 에러 셰이크 `animate-shake`, 컨페티 버스트, 프로그레스 필 `width 0→100%`
+- **Gradient**: 파워 `from-amber-400 to-emerald-400`, 레벨업 `from-yellow-400 via-amber-500 to-orange-500`, 배경 `from-indigo-950 to-slate-900`
+- **Image Interaction**: `hover:scale-105 hover:shadow-[0_0_20px_rgba(245,158,11,0.4)]` 파워업 글로우
+- **Section Divider**: 레벨 프로그레스 라인 (`bg-gradient-to-r from-amber-400 via-emerald-400 to-cyan-400 h-1 rounded-full`)
+
+### [O] 🌅 선셋/웜톤 (Sunset/Warm)
+- **컨셉**: 따뜻한 오렌지~옐로우 톤
+- **Primary**: `#f97316`
+- **Background**: `#fffbeb`
+- **Accent**: `#ef4444`
+- **적합**: 여행, 푸드, 라이프스타일
+- **Hover**: 웜 글로우 강화 `hover:shadow-lg hover:shadow-orange-500/15`, `-translate-y-1`, 버튼 `hover:bg-orange-600`
+- **Shadow**: `shadow-lg shadow-orange-500/10`, 카드 `shadow-md shadow-amber-100`
+- **Border**: `border border-orange-200`, `border-amber-100`, 호버 `hover:border-orange-300`
+- **BG Pattern**: 웜 그라데이션 스카이 `bg-gradient-to-b from-amber-50 to-orange-50`, 라디얼 선라이즈 `radial-gradient(ellipse at 50% 0%, rgba(249,115,22,0.1), transparent 60%)`
+- **Decoration**: 태양/웨이브 아이콘, 웜 액센트 라인 `bg-gradient-to-r from-orange-400 to-rose-400`, 라운드 장식
+- **Animation**: 웜 페이드인 `opacity + translateY 20px→0 600ms ease`, 부드러운 라이즈, 선셋 그라데이션 시프트 `background-position 8s`
+- **Gradient**: 히어로 `from-orange-400 to-rose-500`, CTA `from-amber-500 to-orange-600`, 텍스트 `from-orange-500 to-red-500`
+- **Image Interaction**: `hover:shadow-lg hover:shadow-orange-500/15 hover:-translate-y-1` 웜 글로우
+- **Section Divider**: 따뜻한 그라데이션 라인 (`bg-gradient-to-r from-orange-200 via-amber-200 to-orange-200 h-px`)
+
+### [P] 🧊 아이스/쿨톤 (Ice/Cool)
+- **컨셉**: 차가운 블루~민트 톤
+- **Primary**: `#06b6d4`
+- **Background**: `#ecfeff`
+- **Accent**: `#8b5cf6`
+- **적합**: 의료, 핀테크, 테크
+- **Hover**: 프로스트 강화 `hover:bg-cyan-50`, 쿨 글로우 `hover:shadow-[0_0_15px_rgba(6,182,212,0.15)]`
+- **Shadow**: `shadow-lg shadow-cyan-500/10`, 프로스트 `shadow-[0_4px_24px_rgba(6,182,212,0.08)]`
+- **Border**: `border border-cyan-200`, `ring-1 ring-cyan-100`
+- **BG Pattern**: 크리스탈 패싯 패턴 (다각형 SVG), 프로스트 텍스처, 쿨 메시 `bg-gradient-to-br from-cyan-50 via-white to-violet-50`
+- **Decoration**: 눈꽃/크리스탈 요소, 쿨 액센트 도트, 얼음 라인 디바이더 `bg-gradient-to-r from-transparent via-cyan-300 to-transparent`
+- **Animation**: 쿨 시머 `animate-shimmer-cool` (좌→우 하이라이트), 크리스탈라이즈인 `clip-path polygon reveal`, 미세 부유 `translateY ±4px 5s`
+- **Gradient**: 히어로 `from-cyan-400 to-violet-400`, 프로스트 `from-sky-200 to-cyan-100`, 텍스트 `from-cyan-500 to-blue-500`
+- **Image Interaction**: `hover:bg-cyan-50 hover:shadow-[0_0_15px_rgba(6,182,212,0.15)]` 쿨 프로스트
+- **Section Divider**: 쿨 그라데이션 라인 (`bg-gradient-to-r from-transparent via-cyan-300 to-transparent h-px`)
+
+### [Q] 🖤 모노크롬 (Monochrome)
+- **컨셉**: 흑백 + 회색 톤, 강한 타이포그래피
+- **Primary**: `#171717`
+- **Background**: `#fafafa`
+- **Accent**: `#737373`
+- **적합**: 럭셔리, 패션, 포트폴리오
+- **Hover**: 인버트 `hover:bg-neutral-900 hover:text-white`, 보더 굵어짐 `hover:border-neutral-900`, 밑줄 `hover:underline underline-offset-4`
+- **Shadow**: 하드 BW `shadow-[4px_4px_0_0_#171717]`, 호버 `shadow-[6px_6px_0_0_#171717]`, 또는 없음
+- **Border**: `border-2 border-neutral-900`, 씬 변형 `border border-neutral-200`, 굵은 액센트 `border-b-4`
+- **BG Pattern**: 순수 화이트 또는 미세 도트 `bg-[radial-gradient(#d4d4d4_1px,transparent_1px)] bg-[length:20px_20px]`, 흑백 대비 섹션
+- **Decoration**: 볼드 타이포그래피가 장식 역할, 굵은 HR `h-1 bg-neutral-900`, 숫자 레이블 `font-mono text-6xl font-bold text-neutral-200`
+- **Animation**: 미니멀 (`opacity`, `clip-path inset reveal`만 사용), 드라마틱 텍스트 리빌 `overflow-hidden + translateY`
+- **Gradient**: 없음 (순수 블랙, 화이트, 그레이만), 유일 예외: 호버 시 반전 효과
+- **Image Interaction**: `hover:invert hover:bg-neutral-900 hover:text-white` 인버트 전환
+- **Section Divider**: 굵은 흑백 라인 (`border-2 border-neutral-900`)
+
+### [R] 🎭 레트로/80s (Retro/80s)
+- **컨셉**: 80년대 레트로, 그리드 패턴
+- **Primary**: `#e879f9`
+- **Background**: `#1e1b4b`
+- **Accent**: `#facc15`
+- **적합**: 엔터테인먼트, 음악, 이벤트
+- **Hover**: 네온 플리커 `hover:animate-flicker`, `hover:scale-105`, 레트로 글로우 `hover:shadow-[0_0_30px_rgba(232,121,249,0.4)]`
+- **Shadow**: `shadow-[0_0_20px_rgba(232,121,249,0.3)]`, 텍스트 `text-shadow: 0 0 10px rgba(232,121,249,0.5)`
+- **Border**: `border-2 border-fuchsia-400/50`, 네온 사인 `border-4 border-fuchsia-400 rounded-none`
+- **BG Pattern**: 퍼스펙티브 그리드 라인 `linear-gradient(transparent 95%, rgba(232,121,249,0.1) 95%)`, CRT 스캔라인 `repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(0,0,0,0.1) 2px, rgba(0,0,0,0.1) 4px)`
+- **Decoration**: 네온 사인 텍스트, 80s 셰이프 (삼각형, 지그재그, 팜 트리 실루엣), 레트로 뱃지 `RADICAL!`, 별 `✶`
+- **Animation**: VHS 글리치 `animate-glitch` (translate + clip-path 빠른 전환), 네온 블링크 `animate-neon-blink` (opacity 1→0.7→1 불규칙), 레트로 페이드
+- **Gradient**: 레트로 스펙트럼 `from-fuchsia-500 via-violet-500 to-cyan-400`, 선셋 `from-yellow-400 via-rose-500 to-purple-600`, 크롬 `from-fuchsia-400 to-yellow-300`
+- **Image Interaction**: `hover:animate-flicker hover:scale-105` 네온 플리커
+- **Section Divider**: 네온 글로우 라인 (`border-fuchsia-400/50 shadow-[0_0_10px_rgba(232,121,249,0.3)]`)
+
+### [S] 🌸 파스텔 (Pastel)
+- **컨셉**: 부드러운 파스텔 톤
+- **Primary**: `#f9a8d4`
+- **Background**: `#fdf2f8`
+- **Accent**: `#a78bfa`
+- **적합**: 뷰티, 웰니스, 키즈
+- **Hover**: 미묘한 리프트 `hover:-translate-y-0.5`, 파스텔 어둡게 `hover:bg-pink-200/50`, 부드러운 `hover:shadow-md`
+- **Shadow**: `shadow-md shadow-pink-200/40`, 카드 `shadow-sm shadow-pink-100/50`
+- **Border**: `border border-pink-200/50` 또는 `border-0` (섀도우만), 둥근 `rounded-2xl`
+- **BG Pattern**: 소프트 클라우드 형태 (큰 border-radius blob), 수채화 텍스처, 파스텔 그라데이션 `from-pink-50 via-purple-50 to-blue-50`
+- **Decoration**: 라운드 버블 셰이프, 꽃/하트 액센트, 소프트 리본, 둥근 뱃지 `rounded-full bg-pink-100`
+- **Animation**: 부드러운 부유 `animate-float-gentle` (translateY ±4px 5s), 소프트 바운스 `ease-out 500ms`, 드리미 페이드 `opacity 0→1 800ms`
+- **Gradient**: `from-pink-200 to-purple-200`, 파스텔 레인보우 `from-pink-100 via-purple-100 to-blue-100`, 텍스트 `from-pink-400 to-violet-400`
+- **Image Interaction**: `hover:-translate-y-0.5 hover:shadow-md` 미묘한 리프트
+- **Section Divider**: 파스텔 라인 (`border-pink-200/50`) 또는 없음
+
+### [T] 🔥 파이어/레드 (Fire/Red)
+- **컨셉**: 강렬한 레드~오렌지
+- **Primary**: `#dc2626`
+- **Background**: `#fef2f2`
+- **Accent**: `#f97316`
+- **적합**: 푸드, 스포츠, 이커머스
+- **Hover**: 플레임 강화 `hover:scale-105 hover:shadow-lg`, 레드 글로우 `hover:shadow-red-500/20`, 버튼 `hover:bg-red-700`
+- **Shadow**: `shadow-lg shadow-red-500/15`, 카드 `shadow-md shadow-red-100`, 호버 `shadow-xl shadow-red-500/25`
+- **Border**: `border-2 border-red-500`, 얇은 변형 `border border-red-200`, 액센트 `border-l-4 border-red-500`
+- **BG Pattern**: 엠버 파티클 (JS/CSS), 히트 시머 효과, 대각선 스트라이프 `repeating-linear-gradient(45deg, transparent, transparent 10px, rgba(220,38,38,0.03) 10px, rgba(220,38,38,0.03) 20px)`
+- **Decoration**: 플레임 아이콘 `🔥`, 슬래시 액센트, 볼드 느낌표, 컷아웃 셰이프, 스피드 라인
+- **Animation**: 플리커 `animate-flame-flicker` (opacity 0.9↔1 + scale 0.99↔1.01), 공격적 슬라이드인 `translateX -100%→0 300ms`, 호버 펄스
+- **Gradient**: 파이어 `from-red-500 to-orange-400`, CTA `from-red-600 to-red-500`, 히어로 `from-red-600 via-orange-500 to-amber-400`
+- **Image Interaction**: `hover:scale-105 hover:shadow-lg hover:shadow-red-500/20` 플레임 강화
+- **Section Divider**: 굵은 액센트 라인 (`border-b-4 border-red-500`)
+
+### [U] 🏔️ 노르딕 (Nordic)
+- **컨셉**: 스칸디나비안 미니멀, 자연 소재감
+- **Primary**: `#475569`
+- **Background**: `#f8fafc`
+- **Accent**: `#0d9488`
+- **적합**: 인테리어, 가구, 럭셔리
+- **Hover**: 매우 미묘한 `hover:scale-[1.01]`, 뮤트 배경 시프트 `hover:bg-slate-100`, `hover:shadow-sm`
+- **Shadow**: `shadow-sm shadow-slate-200/50`, 카드 `shadow-[0_1px_3px_rgba(71,85,105,0.06)]`
+- **Border**: `border border-slate-200`, 둥근 `rounded-xl`, 미묘한 `border-slate-150`
+- **BG Pattern**: 린넨 텍스처 (미세 노이즈), 우드 그레인 미묘함, 넓은 여백 `bg-slate-50` 교대
+- **Decoration**: 미니멀 (얇은 라인 디바이더만), 뮤트 아이콘 `text-slate-400`, 깨끗한 간격
+- **Animation**: 느린 `transition-all duration-400 ease`, 부드러운 오파시티 `transition-opacity duration-300`, 드라마틱 효과 없음
+- **Gradient**: 매우 미묘한 `from-slate-50 to-teal-50/30`, 거의 사용하지 않음, 대부분 단색
+- **Image Interaction**: `hover:scale-[1.01] hover:bg-slate-100` 매우 미묘한
+- **Section Divider**: 손그림 느낌 border (`border-dashed border-slate-300`) 또는 SVG 손그림 라인
+
+### [V] 🌌 코스믹 (Cosmic)
+- **컨셉**: 우주/별 테마, 딥 퍼플
+- **Primary**: `#7c3aed`
+- **Background**: `#0c0a1a`
+- **Accent**: `#06b6d4`
+- **적합**: 테크, AI, 스타트업
+- **Hover**: 별 트윙클 `hover:shadow-[0_0_25px_rgba(124,58,237,0.4)]`, 오빗 글로우, `hover:border-violet-400/60`
+- **Shadow**: 코스믹 글로우 `shadow-[0_0_20px_rgba(124,58,237,0.2)]`, 카드 `shadow-[0_0_40px_rgba(6,182,212,0.05)]`
+- **Border**: `border border-violet-500/30`, 호버 `/50`, 스타 보더 `border-violet-400/20`
+- **BG Pattern**: 별밭 CSS (`box-shadow` 다중 도트), 네뷸라 그라데이션 `radial-gradient(ellipse at 20% 50%, rgba(124,58,237,0.15), transparent 50%)`, 스페이스 더스트
+- **Decoration**: 별/행성 셰이프, 별자리 연결선 SVG, 오빗 링 `rounded-full border border-dashed border-violet-500/20`, 글로잉 오브
+- **Animation**: 트윙클 `animate-twinkle` (opacity 0.3↔1 random delay), 느린 오빗 회전 `animate-spin duration-[30s]`, 패럴렉스 부유, 줌스루 `scale-90→100 + opacity`
+- **Gradient**: 네뷸라 `from-violet-600 via-purple-500 to-cyan-400`, 스타더스트 `from-indigo-900 via-purple-900 to-slate-900`, 텍스트 `from-violet-400 to-cyan-300`
+- **Image Interaction**: `hover:shadow-[0_0_25px_rgba(124,58,237,0.3)]` 별빛 글로우
+- **Section Divider**: 스타더스트 글로우 라인 (`bg-gradient-to-r from-transparent via-violet-500/30 to-transparent h-px`)
+
+### [W] 🏖️ 트로피컬 (Tropical)
+- **컨셉**: 열대 느낌, 밝고 활기찬
+- **Primary**: `#10b981`
+- **Background**: `#f0fdfa`
+- **Accent**: `#f59e0b`
+- **적합**: 여행, 리조트, 라이프스타일
+- **Hover**: 리프 웨이브 `hover:scale-[1.02]`, `hover:-translate-y-1`, 섀도우 딥 `hover:shadow-lg`
+- **Shadow**: `shadow-lg shadow-emerald-500/10`, 카드 `shadow-md shadow-emerald-100`
+- **Border**: `border border-emerald-200`, 라운드 `rounded-2xl`, 호버 `hover:border-amber-300`
+- **BG Pattern**: 팜리프 그림자 (SVG), 트로피컬 그라데이션 `from-emerald-50 to-amber-50`, 웨이브 셰이프 구분선
+- **Decoration**: 잎/꽃 액센트, 웨이브 디바이더 SVG `<path d="M0,20 C150,60 350,0 500,20">`, 선셋 요소, 코코넛 아이콘
+- **Animation**: 웨이브 모션 `animate-wave` (translateX + rotate 미세, 3s), 트로피컬 플로트, 부드러운 흔들림 `animate-sway`
+- **Gradient**: 트로피컬 `from-emerald-400 to-amber-300`, 선셋 `from-amber-400 via-rose-400 to-purple-400`, 바다 `from-cyan-400 to-emerald-400`
+- **Image Interaction**: `hover:scale-[1.02] hover:-translate-y-1 hover:shadow-lg` 리프 웨이브
+- **Section Divider**: 트로피컬 wave SVG (`fill-emerald-100`)
+
+### [X] 🎨 아트데코 (Art Deco)
+- **컨셉**: 기하학적 패턴, 골드 포인트
+- **Primary**: `#b45309`
+- **Background**: `#1c1917`
+- **Accent**: `#fbbf24`
+- **적합**: 럭셔리, 호텔, 이벤트
+- **Hover**: 골드 샤인 스윕 `hover:bg-gradient-to-r hover:from-transparent hover:via-amber-400/10 hover:to-transparent`, 보더 골드 강화
+- **Shadow**: `shadow-xl shadow-amber-900/20`, 골드 글로우 `shadow-[0_0_15px_rgba(251,191,36,0.1)]`
+- **Border**: `border-2 border-amber-500/40` 더블라인 스타일, 골드 인셋 `ring-1 ring-amber-400/20`, 기하학적 프레임
+- **BG Pattern**: 기하학적 다이아몬드/쉐브론 `repeating-linear-gradient(45deg, transparent, transparent 20px, rgba(251,191,36,0.03) 20px, rgba(251,191,36,0.03) 21px)`, 골드 라인 그리드, 아트데코 팬 패턴
+- **Decoration**: 골드 코너 장식 (L자 코너), 기하학적 디바이더 `◆━━━◆`, 팬 셰이프 SVG, 아르데코 프레임
+- **Animation**: 골드 시머 스윕 `animate-gold-sweep` (background-position 좌→우), 우아한 페이드인 `opacity + translateY 400ms ease`, `clip-path` 기하학적 리빌
+- **Gradient**: 골드 `from-amber-700 via-amber-500 to-amber-300`, 다크골드 `from-stone-900 to-stone-800`, 텍스트 골드 `from-amber-400 to-yellow-200`
+- **Image Interaction**: `hover:bg-gradient-to-r hover:from-transparent hover:via-amber-400/10 hover:to-transparent` 골드 샤인 스윕
+- **Section Divider**: 골드 기하학 라인 (`bg-gradient-to-r from-transparent via-amber-500/40 to-transparent h-px`)
+
+### [Y] 🌿 에코/서스테이너블 (Eco/Sustainable)
+- **컨셉**: 친환경, 지속가능한 느낌
+- **Primary**: `#15803d`
+- **Background**: `#f7fee7`
+- **Accent**: `#65a30d`
+- **적합**: 환경, NGO, 오가닉
+- **Hover**: 잎 성장 `hover:scale-[1.02]`, 부드러운 그린 글로우 `hover:shadow-md hover:shadow-green-500/10`
+- **Shadow**: `shadow-md shadow-green-800/8`, 카드 `shadow-sm shadow-green-100`
+- **Border**: `border border-green-300`, `rounded-xl`, 호버 `hover:border-green-400`
+- **BG Pattern**: 유기적 잎 셰이프 SVG, 토포그래피 라인 패턴 `repeating-conic-gradient`, 재활용 종이 텍스처 (미세 노이즈)
+- **Decoration**: 에코 뱃지 `🌱`, 잎 아이콘, 덩굴 액센트 보더, 자연 라인 디바이더, 시드 도트
+- **Animation**: 씨앗→발아 `scale-0→1 + rotate(-180deg→0)`, 부드러운 부유, 자연 호흡 `animate-breathe` (scale 1↔1.02 5s)
+- **Gradient**: 어스 `from-green-600 to-lime-400`, 포레스트 `from-green-800 to-emerald-600`, 미묘한 `from-lime-50 to-green-50`
+- **Image Interaction**: `hover:scale-[1.02] hover:shadow-md hover:shadow-green-500/10` 부드러운 그린
+- **Section Divider**: 자연톤 라인 (`border-green-300`)
+
+### [Z] ⚡ 사이버펑크 (Cyberpunk)
+- **컨셉**: 하이테크 + 로우라이프, 글리치
+- **Primary**: `#eab308`
+- **Background**: `#09090b`
+- **Accent**: `#ef4444`
+- **적합**: 게임, 테크, 엔터테인먼트
+- **Hover**: 글리치 플리커 `hover:animate-glitch-hover`, 네온 강화 `hover:shadow-[0_0_20px_rgba(234,179,8,0.4)]`, 스큐 `hover:skew-x-1`
+- **Shadow**: 사이버 글로우 `shadow-[0_0_15px_rgba(234,179,8,0.2)]`, 레드 경고 `shadow-[0_0_10px_rgba(239,68,68,0.2)]`
+- **Border**: `border border-yellow-500/40`, 글리치 더블 `border-2 border-yellow-400/50 shadow-[2px_2px_0_0_rgba(239,68,68,0.5)]`
+- **BG Pattern**: 서킷보드 라인 SVG, 헥스 그리드, 데이터 레인 (matrix), `repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(234,179,8,0.02) 2px, rgba(234,179,8,0.02) 4px)` 스캔라인
+- **Decoration**: 글리치 사각형 (offset red/cyan 더블), 스캔라인 오버레이, 터미널 커서 `animate-blink`, 경고 스트라이프 `⚠`, 코드 블록 스타일 레이블
+- **Animation**: 글리치 셰이크 `animate-glitch` (translateX ±3px + clip-path random, 200ms), 네온 플리커 `animate-neon-flicker`, 디지털 디졸브 (pixel fade), 타이핑 이펙트
+- **Gradient**: 사이버 `from-yellow-400 to-red-500`, 워닝 `from-yellow-500 via-amber-500 to-red-600`, 배경 `from-zinc-950 via-zinc-900 to-zinc-950`
+- **Image Interaction**: `hover:animate-glitch-hover hover:skew-x-1` 글리치 효과
+- **Section Divider**: 글리치 더블 라인 (`border-yellow-500/40 shadow-[2px_2px_0_0_rgba(239,68,68,0.5)]`)
+
+---
+

package/skills/web-design/claude-code/defs/styles/03-custom-animation-keyframes.md

@@ -0,0 +1,39 @@
+# 커스텀 애니메이션 키프레임 레퍼런스
+
+
+아래는 스타일에서 자주 참조되는 커스텀 애니메이션입니다. `tailwind.config` 또는 CSS `@keyframes`로 정의합니다.
+
+```css
+/* 공통 */
+@keyframes fade-up { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
+@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
+@keyframes scale-in { from { opacity: 0; transform: scale(0.95); } to { opacity: 1; transform: scale(1); } }
+
+/* 네온/글로우 계열 (A, R, V, Z) */
+@keyframes neon-flicker { 0%, 100% { opacity: 1; } 50% { opacity: 0.8; } 75% { opacity: 0.95; } }
+@keyframes neon-blink { 0%, 100% { opacity: 1; } 40% { opacity: 1; } 42% { opacity: 0.6; } 44% { opacity: 1; } 80% { opacity: 1; } 82% { opacity: 0.7; } 84% { opacity: 1; } }
+@keyframes twinkle { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } }
+@keyframes glitch { 0% { transform: translate(0); } 20% { transform: translate(-3px, 1px); } 40% { transform: translate(3px, -1px); } 60% { transform: translate(-1px, 2px); } 80% { transform: translate(2px, -2px); } 100% { transform: translate(0); } }
+
+/* 부유/흔들림 계열 (E, G, S, W) */
+@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
+@keyframes float-gentle { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
+@keyframes sway { 0%, 100% { transform: rotate(0deg); } 25% { transform: rotate(2deg); } 75% { transform: rotate(-2deg); } }
+@keyframes breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.03); } }
+
+/* 그라데이션 시프트 (B, H, O) */
+@keyframes gradient-flow { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } }
+@keyframes shimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } }
+@keyframes gold-sweep { 0% { background-position: -100% 0; } 100% { background-position: 200% 0; } }
+
+/* 인터랙티브/게임 계열 (F, L, N) */
+@keyframes bounce-in { 0% { transform: scale(0); } 60% { transform: scale(1.1); } 100% { transform: scale(1); } }
+@keyframes wiggle { 0%, 100% { transform: rotate(0deg); } 25% { transform: rotate(-3deg); } 75% { transform: rotate(3deg); } }
+@keyframes shake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }
+
+/* 파이어 (T) */
+@keyframes flame-flicker { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.92; transform: scale(1.01); } }
+```
+
+---
+

package/skills/web-design/claude-code/defs/styles.md

@@ -0,0 +1,50 @@
+# 3DS 디자인 스타일 정의 (A-Z, 26종)
+
+> 참조: `stages/stage3-design.md` Q3-1에서 사용
+> Dependencies: 없음 (독립 참조 데이터)
+> Illustration Tone 매핑: defs/illustration-guide.md § 1 참조
+>
+> 각 스타일은 **색상 팔레트** + **인터랙션 패턴** + **시각 장식** 을 정의합니다.
+> 디자인 가이드 섹션 7(인터랙션 & 모션)과 토큰 생성 시 이 정의를 참조합니다.
+
+## 필드 설명
+
+| 필드 | 설명 |
+|------|------|
+| **컨셉** | 스타일 요약 (한 줄) |
+| **Primary / Background / Accent** | 핵심 색상 3종 |
+| **적합** | 적합한 프로젝트 유형 |
+| **Hover** | 카드·버튼·링크 호버 효과 (Tailwind 클래스) |
+| **Shadow** | 그림자 시스템 (엘리베이션 패턴) |
+| **Border** | 테두리 스타일 |
+| **BG Pattern** | 배경 장식 패턴 (CSS/SVG) |
+| **Decoration** | 장식 요소 (코너, 뱃지, 구분선 등) |
+| **Animation** | 핵심 애니메이션 키프레임 |
+| **Gradient** | 그라데이션 활용 패턴 |
+| **Image Interaction** | 카드/섹션의 이미지 호버 효과 (Tailwind/CSS 클래스) |
+| **Section Divider** | 섹션 간 구분 방식 (SVG/CSS) |
+
+---
+
+## 스타일 목록
+
+> 상세: `defs/styles/02-style-list.md` 참조
+
+- **컨셉**: 어두운 배경 + 네온 포인트
+## 커스텀 애니메이션 키프레임 레퍼런스
+
+> 상세: `defs/styles/03-custom-animation-keyframes.md` 참조
+
+아래는 스타일에서 자주 참조되는 커스텀 애니메이션입니다. `tailwind.config` 또는 CSS `@keyframes`로 정의합니다.
+## 스타일 선택 가이드 (Quick Reference)
+
+| 분위기 | 추천 스타일 |
+|--------|-------------|
+| 다크 + 글로우 | A, R, V, Z |
+| 그라데이션 중심 | B, H, O |
+| 투명/블러 | E, P |
+| 미니멀/클린 | D, I, Q, U |
+| 대담/그래픽 | C, F, L, N, T |
+| 자연/소프트 | G, S, W, Y |
+| 클래식/장식 | M, X |
+| 데이터/기능 | J, K |

package/skills/web-design/claude-code/defs/tokens/01-token-format.md

@@ -0,0 +1,75 @@
+# 토큰 형식 (Token Format)
+
+
+### 1. Tailwind Config (`tailwind`)
+- **용도**: 웹 프로젝트 (Tailwind CSS 사용 시)
+- **출력**: `design/tokens/tailwind.config.js`
+- **장점**: 즉시 적용, 클래스 자동완성, 트리쉐이킹
+
+```javascript
+// design/tokens/tailwind.config.js
+export default {
+  theme: {
+    extend: {
+      colors: { primary: { 50: '#eff6ff', 500: '#3b82f6', 900: '#1e3a8a' } },
+      fontFamily: { sans: ['Inter', 'sans-serif'] },
+      spacing: { /* ... */ },
+      borderRadius: { /* ... */ },
+      boxShadow: { /* ... */ },
+    },
+  },
+}
+```
+
+### 2. JSON + CSS Variables (`css_variables`)
+- **용도**: 웹/PC앱 (런타임 테마 전환)
+- **출력**: `design/tokens/base.json` + `design/tokens/variables.css`
+- **장점**: 런타임 테마 전환, 다크모드 구현 용이
+
+```json
+// design/tokens/base.json
+{
+  "color": {
+    "primary": { "value": "#3b82f6", "type": "color" },
+    "background": { "value": "#0f172a", "type": "color" }
+  }
+}
+```
+
+```css
+/* design/tokens/variables.css */
+:root {
+  --color-primary: #3b82f6;
+  --color-background: #ffffff;
+}
+[data-theme="dark"] {
+  --color-background: #0f172a;
+}
+```
+
+### 3. JSON Only (`json`)
+- **용도**: 모든 플랫폼 (빌드 도구에서 변환)
+- **출력**: `design/tokens/base.json`
+- **장점**: 최대 유연성, 커스텀 파이프라인
+
+### 4. Style Dictionary (`style_dictionary`)
+- **용도**: 멀티플랫폼 앱 (iOS/Android/웹)
+- **출력**: `design/tokens/style-dictionary/` 구조
+- **장점**: 단일 소스 → 멀티 타겟 자동 변환
+
+```
+design/tokens/style-dictionary/
+├── build/
+│   ├── css/variables.css
+│   ├── ios/StyleDictionary.swift
+│   └── android/colors.xml
+└── config.json
+```
+
+### 5. JSON + 플랫폼별 Config (`platform_config`)
+- **용도**: 멀티플랫폼 (개별 설정)
+- **출력**: `design/tokens/base.json` + 플랫폼별 파일
+- **장점**: 각 플랫폼 네이티브 형식
+
+---
+