@su-record/vibe 2.8.25 → 2.8.27

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@su-record/vibe",
-  "version": "2.8.25",
+  "version": "2.8.27",
   "description": "AI Coding Framework for Claude Code — 49 agents, 41+ tools, multi-LLM orchestration",
   "type": "module",
   "main": "dist/cli/index.js",

package/skills/vibe-figma/SKILL.md

@@ -13,22 +13,11 @@ tier: standard
 ❌ CSS로 이미지 재현 (삼각형/원/gradient로 나무/눈사람/배경 그리기)
 ❌ 이미지 다운로드 없이 코드 생성 진행
 ❌ placeholder / 빈 template / 빈 src="" 남기기
-❌ CSS 값을 추정 (참조 코드에 정확한 값이 있음)
+❌ CSS 값을 추정 (참조 코드의 Tailwind 클래스에 정확한 값이 있음)
 ❌ 브라우저 기본 스타일(검은색 16px)로 보이는 텍스트
-❌ 핵심 에셋만 다운로드 (참조 코드의 모든 에셋을 빠짐없이 다운로드)
-```
-
-### 스타일 배치 규칙 (모드별)
-
-```
-일반 모드:
-  ❌ 컴포넌트 파일 안에 <style> 블록 / 인라인 style=""
-  ✅ 외부 SCSS 파일에만 스타일 작성
-
-직역 모드:
-  ✅ <style scoped> 블록 허용 (Tailwind→CSS 1:1 변환)
-  ✅ 인라인 :style="" 허용 (maskImage 등 동적 값)
-  ❌ 외부 SCSS 파일에 추상화된 스타일 작성 (원본 좌표 손실)
+❌ 핵심 에셋만 다운로드 (const img... 전부 다운로드)
+❌ 컴포넌트 파일 안에 <style> 블록 / 인라인 style=""
+✅ 외부 SCSS 파일에만 스타일 작성
 ```
 
 ## 전체 플로우
@@ -62,7 +51,7 @@ tier: standard
 4. 디렉토리 생성:
    - components/{feature}/
    - public/images/{feature}/ (또는 static/images/{feature}/)
-   - styles/{feature}/ (layout/, components/ 하위) — Phase 2에서 일반 모드 섹션이 있을 때만
+   - styles/{feature}/ (layout/, components/ 하위)
 ```
 
 ---
@@ -189,225 +178,193 @@ Phase 1 완료 조건:
 
 ---
 
-## Phase 2: Design (핵심)
-
-Phase 1에서 컴포넌트가 이미 존재 (레이아웃 + 기능 주석 + 목 데이터).
-Phase 2에서는 이 컴포넌트에 **디자인(이미지 + 스타일)**을 입힌다.
+## Phase 2: Design
 
-모바일 퍼스트 강제. CSS base = 최소 뷰포트, @media (min-width:)로 확장.
+Phase 1 컴포넌트에 **이미지 + 스타일**을 입힌다.
+모바일 퍼스트. base = 최소 뷰포트, @media (min-width:)로 확장.
 
 사용자에게 질문한다:
 - question: "베이스 디자인(모바일) Figma URL을 입력해주세요."
 - options 제공 금지 — 자유 텍스트 입력만 허용
 
-→ base 스타일로 처리 (2-1, 2-2 실행).
+→ 2-1 → 2-2 섹션 루프 실행.
 
-처리 완료 후 다시 질문한다:
+완료 후 다시 질문:
 - question: "다음 브레이크포인트 디자인 URL을 입력해주세요. (없으면 '없음')"
-- options 제공 금지
-
-→ URL 입력 시: @media (min-width:) 레이어 추가 후 다시 질문
+→ URL 입력 시: 2-3 반응형 추가 후 다시 질문
 → "없음" 응답 시: Phase 3으로
 
-브레이크포인트는 프레임 width에서 자동 산출.
-예: 720px → 480px(스케일), 2560px → 1920px(스케일) → @media (min-width: 1024px)
-
-### 2-1. 스타일 파일 내용 작성 (첫 섹션 전)
+### 2-1. SCSS Setup + 등록 (첫 섹션 전)
 
 ```
-Phase 1에서 빈 파일로 만든 스타일 구조에 기본 내용 Write:
-  styles/{feature}/index.scss      ← @use 진입점
-  styles/{feature}/_tokens.scss    ← 빈 파일 (섹션 처리하며 채움)
+SCSS 파일 기본 내용 Write:
+  styles/{feature}/index.scss      ← @import 진입점
+  styles/{feature}/_tokens.scss    ← 빈 파일 (섹션마다 채움)
   styles/{feature}/_mixins.scss    ← breakpoint mixin
-  styles/{feature}/_base.scss      ← reset, font-face
+  styles/{feature}/_base.scss      ← 루트 클래스 (.winterPcbang 등)
   styles/{feature}/layout/         ← 디렉토리
   styles/{feature}/components/     ← 디렉토리
-```
 
-### 2-2. 비정형 레이어 감지 (섹션별)
+스타일 등록 (BLOCKING — 미등록 시 섹션 루프 진행 금지):
+  Grep "{feature}/index.scss" → 이미 등록되어 있으면 건너뜀.
 
+  ■ 신규 프로젝트 (--new):
+    루트 페이지 파일에서 직접 로드:
+    pages/{feature}.vue → <style lang="scss" src="~/assets/scss/{feature}/index.scss" />
+    app/{feature}/page.tsx → import '~/styles/{feature}/index.scss'
+
+  ■ 기존 프로젝트 (업데이트):
+    Grep "\.scss\|\.css" in nuxt.config.*/next.config.*/vite.config.*/main.ts
+    → 기존 방식과 동일하게 등록
+
+  검증: Grep "{feature}/index.scss" in 프로젝트 전체 → 0건이면 실패
 ```
-각 섹션의 get_design_context 응답을 받을 때마다 개별 판정.
-한 페이지 내에서 섹션마다 모드가 다를 수 있음.
 
-비정형 지표 (하나라도 해당 → 해당 섹션 직역 모드):
-  □ 에셋 URL 15개 이상
-  □ 소수점 좌표 사용 (left-[117.13px], top-[373.65px])
-  □ mix-blend-mode 사용 (mix-blend-lighten, mix-blend-multiply, mix-blend-hue)
-  □ rotate/scale 변환 사용 (rotate-[149.7deg], -scale-y-100)
-  □ mask-image 사용
-  □ blur 필터 사용 (blur-[3.5px])
-  □ 2560px 이상 원본 해상도에서 트리밍된 BG 구조
+### 2-2. 섹션 루프
 
-정형 지표 (전부 해당 → 해당 섹션 일반 모드):
-  □ flex/grid 기반 정형 레이아웃
-  □ 에셋 URL 10개 미만
-  □ absolute 좌표 없거나 정수값만
-  □ mix-blend/rotate/mask/blur 미사용
+**각 섹션을 순서대로, 한 섹션을 완전히 완료한 후 다음으로.**
 
-섹션별 판정 결과 테이블 출력:
-  ┌──────────┬──────────┐
-  │   섹션   │   모드   │
-  ├──────────┼──────────┤
-  │ Hero     │ 직역     │
-  │ KID      │ 직역     │
-  │ Daily    │ 직역     │
-  │ Caution  │ 일반     │
-  │ ...      │ ...      │
-  └──────────┴──────────┘
+#### a. 참조 코드 획득
 
-혼합 섹션 (배경=비정형, 콘텐츠=정형):
-  → 직역 모드 적용 (비정형이 하나라도 있으면 직역)
-  → 콘텐츠 영역의 반복 패턴(v-for 등)은 직역 내에서 유지
 ```
+get_design_context(fileKey, 섹션.nodeId)
 
-### 2-3. 큰 섹션 분할
+반환:
+  - const img변수명 = 'URL' (이미지 에셋)
+  - React+Tailwind JSX (HTML 구조 + CSS 값)
+  - 스크린샷 (시각 기준점)
+  - data-name 속성 (레이어 이름: "BG", "Title" 등)
 
+큰 섹션 (높이 1500px+):
+  get_metadata로 하위 노드 목록 → 하위 단위로 get_design_context 분할 호출
+  타임아웃 시: 1회 재시도 (excludeScreenshot: true) → 실패 시 분할
 ```
-get_design_context 타임아웃 방지:
 
-섹션 높이가 1500px 이상이면 (모바일/PC 무관):
-  사전 분할: get_design_context 호출 전에 먼저 분할
-  1. get_metadata(섹션 nodeId)로 하위 노드 목록 확보
-  2. 하위 노드별로 get_design_context 호출 (분할)
-  3. 결과를 합쳐서 하나의 섹션으로 처리
+#### b. 이미지 다운로드 (BLOCKING)
 
-타임아웃 발생 시 (분할 없이 호출한 경우):
-  1회 재시도 (excludeScreenshot: true)
-  → 실패 시 즉시 분할 전략으로 전환 (3회 반복 금지)
-  → 분할도 불가하면 get_screenshot + 스크린샷 기반 구현
-     (이 경우 CSS 값은 스크린샷에서 추정 — 품질 하락 감수)
-
-실전 데이터 (PUBG 겨울 PC방 기준):
-  정상 응답: ~900px 이하 (KID 238px, Caution 880px, Anchor 652px)
-  타임아웃: 2000px+ (Daily 2372~3604, PlayTime 2000~2613, Exchange 2832~4342)
-  파일 저장: Hero 1280px (92K~130K chars — 에셋 40개로 크기 큼)
 ```
+참조 코드의 모든 const img... URL을 추출 → 다운로드 → 검증.
 
-### 2-4. 섹션별 루프
-
-**각 섹션에 대해 순서대로, 한 섹션을 완전히 완료한 후 다음으로:**
+변수명 → 파일명: imgSnowParticle12 → snow-particle-12.webp
+다운로드: curl -sL "{url}" -o images/{feature}/{파일명}
+검증: ls -la → 모든 파일 존재 + 0byte 아닌지
 
-#### a. get_design_context 호출
+이미지 매핑 생성:
+  imageMap = { imgTitle: '/images/{feature}/title.webp', ... }
 
+전부 완료해야 c 단계로 진행. 하나라도 실패 → 코드 생성 금지.
 ```
-get_design_context(fileKey, 섹션.nodeId)
 
-반환되는 것:
-  - const img변수명 = 'https://figma.com/api/mcp/asset/...' (이미지 에셋 URL들)
-  - React+Tailwind JSX 코드 (HTML 구조 + CSS 값)
-  - 스크린샷 (원본 디자인 이미지)
-  - data-name 속성 (레이어 이름: "BG", "Title", "Period" 등)
+#### c. 클래스 매핑 테이블 생성
 
-이 참조 코드가 모든 작업의 기반.
 ```
+SCSS 작성 전에 반드시 매핑 테이블을 먼저 출력한다.
+이 테이블 없이 SCSS를 작성하지 않는다.
 
-#### b. 이미지 전부 다운로드 (BLOCKING)
+1. Phase 1 컴포넌트의 클래스 목록을 Read로 수집
+2. 참조 코드의 data-name + HTML 구조를 분석
+3. 매핑 테이블 출력:
 
-```
-vibe-figma-extract 스킬 참조.
+  ┌─────────────────────┬──────────────────┬────────────────────────────┐
+  │ Phase 1 클래스       │ 참조 data-name   │ 핵심 Tailwind 값            │
+  ├─────────────────────┼──────────────────┼────────────────────────────┤
+  │ .kidSection         │ (root)           │ flex flex-col gap-[32px]   │
+  │ .kidBg              │ BG               │ absolute mix-blend-multiply│
+  │ .kidLoginBtn        │ Btn_Login        │ border shadow h-[120px]    │
+  │ .kidLoginBtnText    │ (텍스트 노드)     │ text-[36px] text-white     │
+  │ .kidDivider         │ Divider          │ h-px w-full                │
+  │ .kidSteamLink       │ steam_account    │ text-[24px] font-semibold  │
+  │ .kidSteamNote       │ (하위 텍스트)     │ text-[20px] #dadce3        │
+  └─────────────────────┴──────────────────┴────────────────────────────┘
 
-참조 코드에서 모든 에셋 URL을 빠짐없이 추출 → 다운로드 → 검증.
-"핵심 에셋만" 금지. const img... 로 시작하는 모든 URL을 다운로드.
-이미지가 모두 로컬에 있어야 c 단계로 진행.
-하나라도 실패하면 코드 생성하지 않음.
+매핑 기준:
+  data-name 일치 → 직접 매핑
+  data-name 없음 → HTML 위치/텍스트 내용으로 판단
+  Phase 1에 없는 요소 → 클래스 신규 추가 (template에도 반영)
+  참조 코드에 없는 클래스 → 스타일 없이 유지
 ```
 
-#### c. 코드 변환 (모드별 분기)
+#### d. SCSS 작성
 
 ```
-■ 직역 모드 (비정형 레이어):
-  vibe-figma-convert 스킬의 "직역 모드" 참조.
+매핑 테이블의 각 행을 순서대로 CSS로 변환하여 SCSS에 작성.
+vibe-figma-extract의 Tailwind→CSS 변환표 참조.
+
+CSS 변수 패턴 처리:
+  font-[family-name:var(--font/family/pretendard,...)] → fallback 값 사용
+  text-[length:var(--font/size/heading/24,24px)]      → 24px
+  text-[color:var(--color/grayscale/300,#dadce3)]      → #dadce3
 
-  참조 코드의 JSX 구조 + Tailwind 클래스를 1:1로 변환:
-    - React JSX → Vue/Nuxt template (className→class 등)
-    - Tailwind 클래스 → <style scoped> 내 CSS 클래스 (값 그대로 유지)
-    - src={변수} → 로컬 이미지 경로
-    - style={{ maskImage: ... }} → :style="{ maskImage: ... }"
-    - 소수점 좌표, rotate, mix-blend-mode 전부 보존
-    - scaleFactor 적용: px 값만 스케일링, 나머지(색상, opacity, blend) 유지
-  
-  외부 SCSS 파일 생성하지 않음.
-  컴포넌트에 <style scoped> 블록으로 스타일 포함.
+scaleFactor 적용:
+  px 값 → × scaleFactor (font-size, padding, margin, gap, width, height, border-radius)
+  적용 안 함 → color, opacity, font-weight, z-index, line-height(단위 없음), % 값
 
-■ 일반 모드 (정형 레이어):
-  vibe-figma-convert 스킬의 기존 방식 참조.
+출력 파일:
+  styles/{feature}/layout/_{section}.scss
+    → position, display, flex, width, height, padding, overflow, z-index, background-image
+  styles/{feature}/components/_{section}.scss
+    → font-size, font-weight, color, line-height, letter-spacing, text-align,
+      border, border-radius, box-shadow, opacity
+  styles/{feature}/_tokens.scss
+    → 새로 발견된 색상/폰트/스페이싱 토큰 추가
 
-  참조 코드의 Tailwind 클래스에서 CSS 값 추출:
-    text-[48px] → font-size: 36px (48 × 0.75)
-    text-[#1B3A1D] → color: #1B3A1D
-    bg-[#0A1628] → background-color: #0A1628
-    pt-[120px] → padding-top: 90px (120 × 0.75)
+BG 레이어 패턴 (참조 코드에서 absolute + inset-0 + object-cover):
+  .{section}Bg   → position: absolute; inset: 0; z-index: 0;
+  .{section}Content → position: relative; z-index: 1;
 
-  Write/Edit:
-    styles/{feature}/layout/_{section}.scss   ← 배치/구조/배경이미지
-    styles/{feature}/components/_{section}.scss ← 텍스트/버튼/카드 스타일
-    styles/{feature}/_tokens.scss             ← 새 토큰 추가
+index.scss에 새 섹션 @import 추가.
 ```
 
-#### d. Phase 1 컴포넌트 template 리팩토링
+#### e. template 업데이트
 
 ```
-■ 직역 모드:
-  Phase 1 컴포넌트의 template을 참조 코드의 HTML 구조로 교체.
-  script(JSDoc, 인터페이스, 목 데이터, 핸들러)는 보존.
-  
-  변환 핵심:
-    - 참조 코드의 div/img 구조를 거의 그대로 유지
-    - 모든 이미지 경로를 로컬 경로로 교체
-    - Phase 1의 기능 요소(v-for, @click, v-if)를 적절한 위치에 재배치
-    - <style scoped>에 Tailwind→CSS 변환 결과 포함
-    - 장식 이미지에 alt="" aria-hidden="true"
+Phase 1 컴포넌트의 template을 참조 코드 기반으로 리팩토링.
+script(JSDoc, 인터페이스, 목 데이터, 핸들러)는 보존.
 
-■ 일반 모드:
-  vibe-figma-convert 스킬 참조.
+1. 참조 코드의 HTML 구조를 프로젝트 스택으로 변환:
+   className → class, onClick → @click, {조건 && <X/>} → v-if 등
 
-  Phase 1에서 만든 컴포넌트의 template을 참조 코드 기반으로 리팩토링.
-  script(JSDoc 주석, 인터페이스, 목 데이터, 핸들러)는 보존.
+2. 이미지 경로를 imageMap으로 교체:
+   src={imgTitle} → src="/images/{feature}/title.webp"
 
-  template 변경 사항:
-    - 참조 코드의 HTML 구조를 프로젝트 스택으로 변환
-    - 이미지 경로를 다운로드된 로컬 경로로 설정
-    - 배경 이미지 섹션은 Multi-Layer 구조 (.{section}Bg + .{section}Content)
-    - 클래스명을 외부 스타일 파일의 셀렉터와 매칭
-    - Phase 1의 기능 요소(v-for, @click, v-if)를 새 구조에 재배치
-  
-  컴포넌트에 <style> 블록 없음. 스타일은 전부 외부 파일.
-```
+3. BG 레이어 구조 적용:
+   .{section}Bg div (배경) + .{section}Content div (콘텐츠)
 
-#### e. 섹션 검증
+4. Phase 1 기능 요소 재배치:
+   v-for, @click, v-if, $emit 등을 새 구조의 적절한 위치에 배치
 
+5. 접근성:
+   장식 이미지 → alt="" aria-hidden="true"
+   콘텐츠 이미지 → alt="설명적 텍스트"
+
+컴포넌트에 <style> 블록 없음. 스타일은 전부 외부 SCSS.
 ```
-공통 체크:
-  □ Grep: "figma.com/api" in 생성 파일 → 0건
-  □ Grep: "placeholder" in 컴포넌트 파일 → 0건
-  □ Grep: 'src=""' in 컴포넌트 파일 → 0건
-  □ Glob: images/{feature}/*.webp → 이미지 파일 존재
-  □ Read: 컴포넌트 template에 실제 HTML 태그 존재 (빈 template 아님)
 
-일반 모드 추가 체크:
-  □ Grep: "<style" in 컴포넌트 파일 → 0건
-  □ Grep: 'style="' in 컴포넌트 파일 → 0건
-  □ Read: 외부 스타일 파일에 font-size, color, background-image 존재
+#### f. 섹션 검증
+
+```
+Grep 체크:
+  □ "figma.com/api" in 생성 파일 → 0건
+  □ 'src=""' in 컴포넌트 파일 → 0건
+  □ "<style" in 컴포넌트 파일 → 0건
 
-직역 모드 추가 체크:
-  □ Read: <style scoped> 블록에 position, transform, mix-blend-mode 존재
-  □ 에셋 수 = 다운로드된 이미지 수 (누락 0)
+Read 체크:
+  □ 외부 SCSS 파일에 font-size, color 존재 (브라우저 기본 스타일 방지)
+  □ 이미지 파일 수 = const img... 수 (누락 0)
 
-실패 시 → 해당 항목 수정 → 재검증
+실패 → 수정 → 재검증
 ```
 
-### 2-3. 두 번째 URL부터: 반응형 레이어 추가
+### 2-3. 반응형 (두 번째 URL부터)
 
 ```
-두 번째 이후 URL 처리 시, 이미 스타일이 존재하므로:
-  기존 스타일은 유지하고 반응형만 추가.
+두 번째 이후 URL: 기존 스타일 유지 + @media 추가만.
 
-  같은 값 → 유지
-  다른 px 값 → clamp() 또는 @media 오버라이드
-  다른 레이아웃 → @media (min-width: $breakpoint) 추가
-  다른 배경 이미지 → @media 이미지 분기
-  기존 코드/스타일 삭제 금지
+같은 값 → 유지
+다른 px 값 → @media (min-width: $bp-desktop) 오버라이드
+다른 레이아웃 → @media 블록 추가
+다른 배경 이미지 → @media 이미지 분기
+기존 코드/스타일 삭제 금지
 ```
 
 ---
@@ -415,27 +372,15 @@ vibe-figma-extract 스킬 참조.
 ## Phase 3: Verification
 
 ```
-자동 Grep 체크:
-  □ Grep: "figma.com/api" in 모든 생성 파일 → 0건
-  □ Grep: "<style" in components/{feature}/ → 0건
-  □ Grep: 'style="' in components/{feature}/ → 0건
-  □ Grep: "placeholder" in components/{feature}/ → 0건
-  □ Grep: 'src=""' in components/{feature}/ → 0건
-  □ Glob: images/{feature}/*.webp → 이미지 파일 존재
+Grep 체크:
+  □ "figma.com/api" in 모든 생성 파일 → 0건
+  □ "<style" in components/{feature}/ → 0건
+  □ 'src=""' in components/{feature}/ → 0건
+  □ Glob: images/{feature}/ → 이미지 파일 존재
 
 시각 검증:
-  각 섹션에 대해:
-    get_screenshot(섹션 nodeId) → 원본
-    /vibe.utils --preview 또는 dev 서버 → 생성 결과
-    → 비교, P1/P2 분류
-
-  P1 (필수 수정): 이미지 누락, 레이아웃 구조 다름, 텍스트 스타일 미적용
-  P2 (권장 수정): 미세 간격 차이, 미세 색상 차이
-
-  P1 → 수정 → 재검증 (P1=0 될 때까지, 제한 없음)
-
-완료 후:
-  Design Quality Pipeline 안내:
-    /design-normalize → /design-audit (quick)
-    + /design-critique → /design-polish (thorough)
+  각 섹션: get_screenshot(nodeId) vs dev 서버/preview 비교
+  P1 (필수): 이미지 누락, 레이아웃 구조 다름, 텍스트 스타일 미적용
+  P2 (권장): 미세 간격, 미세 색상 차이
+  → P1 수정 → 재검증 (P1=0 될 때까지)
 ```

package/skills/vibe-figma-convert/SKILL.md

@@ -8,181 +8,7 @@ tier: standard
 # vibe-figma-convert — 코드 변환
 
 `get_design_context` 참조 코드를 프로젝트 스택 코드로 변환.
-**두 가지 모드**: 일반 모드(외부 SCSS) / 직역 모드(scoped CSS).
-
----
-
-## 0. 직역 모드 (비정형 레이어)
-
-비정형 레이어 감지 시 사용. 참조 코드의 구조와 좌표를 **거의 그대로** 보존.
-
-### 핵심 원칙
-
-```
-1. 참조 코드의 HTML 중첩 구조를 1:1로 유지
-2. absolute 좌표, rotate, mix-blend-mode, blur 등 시각 속성 전부 보존
-3. scaleFactor는 px 값에만 적용 (색상, opacity, blend-mode, z-index 미적용)
-4. 에셋 URL → 로컬 경로로만 교체
-5. 의미론적 재구성(BG+Content 분리) 시도하지 않음
-```
-
-### Tailwind → CSS 클래스 직역
-
-```
-참조 코드의 각 요소에 고유 클래스명을 부여하고,
-Tailwind 클래스를 CSS로 1:1 변환하여 <style scoped>에 작성.
-
-클래스명 규칙: data-name 또는 data-node-id 기반
-  data-name="BG"           → .bg
-  data-name="Period"       → .period
-  data-name="Title"        → .title
-  data-name="Light"        → .light
-  이름 없으면              → .node-{nodeId} (콜론→하이픈)
-
-변환 예시:
-  className="absolute h-[1280px] left-0 overflow-clip top-0 w-[720px]"
-  →
-  .bg {
-    position: absolute;
-    height: 853px;       /* 1280 × 0.667 */
-    left: 0;
-    overflow: clip;
-    top: 0;
-    width: 100%;         /* 720px = 뷰포트 전체폭 → 100% */
-  }
-
-  className="-translate-x-1/2 absolute h-[174px] left-1/2 top-1/2 w-[620px]"
-  →
-  .title-img {
-    position: absolute;
-    height: 116px;       /* 174 × 0.667 */
-    left: 50%;
-    top: 50%;
-    transform: translateX(-50%);
-    width: 413px;        /* 620 × 0.667 */
-  }
-```
-
-### 특수 패턴 직역
-
-```
-mix-blend:
-  className="mix-blend-lighten"
-  → mix-blend-mode: lighten;
-
-rotate + scale:
-  className="-scale-y-100 rotate-[149.7deg]"
-  → transform: scaleY(-1) rotate(149.7deg);
-
-mask-image:
-  style={{ maskImage: `url('${imgVar}')` }}
-  → :style="{ maskImage: `url('/images/{feature}/파일.webp')` }"
-  (Vue 동적 바인딩으로 변환)
-
-blur:
-  className="blur-[3.5px]"
-  → filter: blur(3.5px);
-
-소수점 좌표:
-  className="absolute h-[141.67px] left-[380.52px] top-[528.95px]"
-  → position: absolute;
-    height: 94px;        /* 141.67 × 0.667 반올림 */
-    left: 254px;         /* 380.52 × 0.667 반올림 */
-    top: 353px;          /* 528.95 × 0.667 반올림 */
-
-inset-[-18.13%]:
-  → inset: -18.13%; (% 값은 스케일링 안 함)
-
-overflow-hidden + 스프라이트:
-  className="absolute h-full left-[-129.09%] max-w-none top-0 w-[229.09%]"
-  → position: absolute;
-    height: 100%;
-    left: -129.09%;      /* % 값 그대로 */
-    max-width: none;
-    top: 0;
-    width: 229.09%;      /* % 값 그대로 */
-```
-
-### Vue SFC 출력 형태
-
-```vue
-<template>
-  <section class="heroSection">
-    <!-- 참조 코드의 HTML 구조를 1:1 유지 -->
-    <div class="bg">
-      <div class="bgInner">
-        <div class="bgImage1">
-          <img src="/images/{feature}/bg.webp" alt="" aria-hidden="true" />
-        </div>
-        <div class="tree4">
-          <img src="/images/{feature}/tree-4.webp" alt="" aria-hidden="true" />
-        </div>
-        <!-- ... 모든 서브 레이어 유지 -->
-      </div>
-      <!-- ... -->
-    </div>
-
-    <!-- 콘텐츠 영역 (참조 코드의 Title, Period 등) -->
-    <div class="titleArea">
-      <div class="titleImg">
-        <img src="/images/{feature}/title.webp" alt="추운 겨울, 따뜻한 보상이 펑펑" />
-      </div>
-    </div>
-  </section>
-</template>
-
-<script setup lang="ts">
-// Phase 1의 script 보존
-</script>
-
-<style scoped>
-.heroSection {
-  position: relative;
-  width: 100%;
-  height: 853px; /* 1280 × 0.667 */
-  overflow: hidden;
-}
-.bg {
-  position: absolute;
-  height: 853px;
-  left: 0;
-  overflow: clip;
-  top: 0;
-  width: 100%;
-}
-.tree4 {
-  position: absolute;
-  bottom: 215px;
-  height: 453px;
-  left: 50%;
-  transform: translateX(calc(-50% + 599px));
-  opacity: 0.4;
-  width: 1727px;
-}
-.tree4 img {
-  position: absolute;
-  inset: 0;
-  max-width: none;
-  object-fit: cover;
-  pointer-events: none;
-  width: 100%;
-  height: 100%;
-}
-/* ... 모든 레이어의 CSS */
-</style>
-```
-
-### 직역 모드에서의 반응형
-
-```
-첫 번째 URL → <style scoped>에 base 스타일
-두 번째 URL → 같은 <style scoped> 안에 @media (min-width:) 추가
-기존 스타일 삭제 금지
-```
-
----
-
-## 이하: 일반 모드 (정형 레이어)
+항상 외부 SCSS 파일에 스타일 작성.
 
 ---
 
@@ -296,6 +122,18 @@ $space-content: 18px;        // 24 × 0.75
 $bp-pc: 1024px;
 ```
 
+### CSS 변수 패턴 처리
+
+```
+참조 코드에 Figma 디자인 토큰이 CSS 변수로 포함될 수 있음:
+  font-[family-name:var(--font/family/pretendard,...)]
+  text-[length:var(--font/size/heading/24,24px)]
+  text-[color:var(--color/grayscale/950,#171716)]
+
+→ var() 안의 fallback 값(24px, #171716)을 사용.
+→ CSS 변수명은 프로젝트 토큰 네이밍에 참고.
+```
+
 ---
 
 ## 2. 컴포넌트 파일 변환