fix: new version 작업

doc/미완료.md

@@ -1,41 +1,88 @@
+# 디자인 링크
+
+https://www.figma.com/design/MnwN1Uzg5F6ks9Clr1brLW/%EB%94%94%EC%9E%90%EC%9D%B80624?m=auto&t=Y5wF3r0wUkUFeBIV-6
+
+# 섹션별 링크
+
+## PC
+
+01_HOME:
+https://www.figma.com/design/MnwN1Uzg5F6ks9Clr1brLW/%EB%94%94%EC%9E%90%EC%9D%B80624?node-id=2247-2094&t=XSGOQmdNzIB99Zh5-4
+02_ABOUT:
+https://www.figma.com/design/MnwN1Uzg5F6ks9Clr1brLW/%EB%94%94%EC%9E%90%EC%9D%B80624?node-id=2247-2230&t=XSGOQmdNzIB99Zh5-4
+03_HISTORY:
+https://www.figma.com/design/MnwN1Uzg5F6ks9Clr1brLW/%EB%94%94%EC%9E%90%EC%9D%B80624?node-id=2247-2121&t=XSGOQmdNzIB99Zh5-4
+04_VISION:
+https://www.figma.com/design/MnwN1Uzg5F6ks9Clr1brLW/%EB%94%94%EC%9E%90%EC%9D%B80624?node-id=2247-2183&t=XSGOQmdNzIB99Zh5-4
+05_PROJECT:
+https://www.figma.com/design/MnwN1Uzg5F6ks9Clr1brLW/%EB%94%94%EC%9E%90%EC%9D%B80624?node-id=2247-2202&t=XSGOQmdNzIB99Zh5-4
+06_Expertise:
+https://www.figma.com/design/MnwN1Uzg5F6ks9Clr1brLW/%EB%94%94%EC%9E%90%EC%9D%B80624?node-id=2247-2253&t=XSGOQmdNzIB99Zh5-4
+
+## Mobile
+
+01_HOME:
+https://www.figma.com/design/MnwN1Uzg5F6ks9Clr1brLW/%EB%94%94%EC%9E%90%EC%9D%B80624?node-id=2319-2232&t=XSGOQmdNzIB99Zh5-4
+02_ABOUT:
+https://www.figma.com/design/MnwN1Uzg5F6ks9Clr1brLW/%EB%94%94%EC%9E%90%EC%9D%B80624?node-id=2319-2288&t=XSGOQmdNzIB99Zh5-4
+03_HISTORY:
+https://www.figma.com/design/MnwN1Uzg5F6ks9Clr1brLW/%EB%94%94%EC%9E%90%EC%9D%B80624?node-id=2319-2433&t=XSGOQmdNzIB99Zh5-4
+04_VISION:
+https://www.figma.com/design/MnwN1Uzg5F6ks9Clr1brLW/%EB%94%94%EC%9E%90%EC%9D%B80624?node-id=2319-4183&t=XSGOQmdNzIB99Zh5-4
+05_PROJECT:
+https://www.figma.com/design/MnwN1Uzg5F6ks9Clr1brLW/%EB%94%94%EC%9E%90%EC%9D%B80624?node-id=2319-4231&t=XSGOQmdNzIB99Zh5-4
+06_Expertise:
+https://www.figma.com/design/MnwN1Uzg5F6ks9Clr1brLW/%EB%94%94%EC%9E%90%EC%9D%B80624?node-id=2319-5082&t=XSGOQmdNzIB99Zh5-4
+
+---
+
 # 미완료 / 확인 필요 항목
 
 Figma MCP(`figma-mcp`)로 확인이 안 되거나 추출이 안 되는 항목을 섹션별로 기록한다. 추측해서 임의로 채운 값이 아니라, 실제로 막힌 지점만 기록한다.
 
 ---
 
-## 다음 세션 인수인계 (작업 중단 시점 기록)
+## 다음 세션 인수인계 (2026-06-24 작업분)
 
-사용자가 자리를 비워야 해서 PROJECT 섹션 작업 중 중단됨. 아래 순서대로 이어서 진행하면 된다.
+이 Mac(`/Users/heemac/repository/project-bodalab`)으로 환경이 바뀌면서 figma-mcp가 한 번 끊겼다가 새로 연결됨(아래 "Figma MCP 연결 관련 메모" 참고). 429는 해소됨.
 
 ### 완료된 섹션
-- HOME, ABOUT US(+EXPERTISE), HISTORY, VISION — 마크업(`src/index.html`)·스타일(`src/scss/page/*.scss`)·필요 JS(`src/js/main.js`) 모두 반영, `npm run build` 통과 확인됨.
 
-### 남은 작업 (순서대로)
+- HOME, ABOUT US(+EXPERTISE), HISTORY, VISION — 마크업·스타일·JS 반영, 빌드 통과 (이전 세션).
-1. **PROJECT 섹션** — 작업 중 Figma 이미지 렌더 API가 429(Rate Limit)를 계속 반환해서 멈춤. 노드 ID는 이미 확보됨 (아래 "Figma 노드 ID 모음" 참고). `mcp__figma__view_node`로 PC(`2247:2202`)와 모바일(`2319:4231`) 다시 렌더 시도부터 시작. 429가 계속되면 5~10분 정도 기다린 후 재시도하거나, 이미 위에서 확보한 PC 전체 컴포지트 이미지(`2247:2093` 렌더 결과, 이 문서/대화 로그에는 없고 이전 대화 컨텍스트에만 있었음 — 새 세션이면 `2247:2093`을 다시 view_node로 떠야 함)로 대략적인 카피/태그만 추정하고 정확한 카피는 "확인 필요"로 명시.
+- **PROJECT** — 카드 레이아웃을 고정 `aspect-ratio: 16/10` 크롭 방식에서 이미지 원본 비율 그대로 쌓는 매스너리 방식으로 변경(`_projects.scss`). 11번째 카드 내용을 "한화 GAsk 구축 프로젝트(한화)"→"롯데 GA2ck 구축 프로젝트 (롯데 렌터카)(롯데)"로 수정 — **사용자 확인받고 반영함**. 날짜(`2021.11`)는 기존 값 그대로 유지, 재확인은 안 함.
-2. **CONTACT/FOOTER 섹션** — 아직 Figma 노드 ID조차 확보 못함. 사용자에게 PC/모바일 프레임 "Copy link to selection" 링크 요청부터 시작해야 함. 옛 디자인(`src/index.html`에 남아있던 구버전 구조 참고용으로 git log/old commit에서 확인 가능)에는 Head Office 주소, Contact 폼(회사명/담당자/연락처/이메일/문의내용/개인정보동의/SEND), Recruitment 태그(Planner & Consulting/Designer/Publisher/Scripter), footer(브랜드/연락처/copyright)가 있었음 — 새 디자인 렌더(PC 전체 컴포지트, `2247:2093`)에서도 "WELCOME BODA LAB", Head Office, Contact Us 폼, Recruitment 태그, footer가 보였으므로 큰 구조는 유사할 것으로 추정되나 정확한 카피/배치는 미확인.
+- **CONTACT/FOOTER** — 사용자가 "06_Expertise" 라고 표기해 둔 링크(PC `2247:2253` / 모바일 `2319:5082`)가 실제로는 CONTACT/FOOTER 디자인이었음(라벨 오기로 추정). 기존에 중복으로 남아있던 옛 `<section id="expertise">`(4개 서비스 목록, 이미 ABOUT 섹션에 이전되어 있던 내용)는 삭제. CONTACT를 "WELCOME BODA LAB" 헤딩 + 설명 + Head Office(Address/e-mail/tel 3필드, fax·지도 삭제) + Contact Us 폼(2단: 입력 4개 스택 + 우측 문의내용, placeholder에 `*`, 체크박스 문구를 "[필수] 개인정보 수집 및 이용 동의"로) + Recruitment 태그 구조로 교체. 아코디언 라벨 "프로젝트 문의"→"Contact Us", "채용"→"Recruitment". Head Office 정보도 새 값으로 교체: Address "서울시 강서구 마곡중앙로 161-8, 두산더랜드파크 C동 618호" / e-mail `koji@bodalab.co.kr` / tel `010-4169-4728`.
-3. **GNB 마무리** — HOME 작업 때 1차로 완성했음(데스크톱 6개 메뉴, 모바일 풀스크린 드로어 + 닫기 X). 전체 섹션이 다 만들어진 뒤 스크롤 시 활성 메뉴(`isActive`) 동작, 반응형 폭(좁은 노트북 화면에서 6개 메뉴 안 깨지는지) 최종 점검 필요.
+  - **색상 1차 작업 누락 → 재수정함**: 처음엔 다른 섹션과 동일하게 다크 테마(검은 배경/흰 텍스트)로 만들었는데, 사용자가 Figma와 다르다고 지적함. 다시 렌더 확인해보니 이 섹션(CONTACT)만 Figma에서 **흰 배경 + 검은 텍스트**(라이트 테마)로 되어 있었음 — 다른 섹션과 의도적으로 색 반전된 구간. `_contact.scss` 전체를 라이트 테마로 재작업: 배경 `$color-white`, 텍스트 `$color-dark` 계열, 강조색(Address/e-mail/tel 라벨, SEND 버튼, 체크박스 체크 상태, Recruitment 태그 hover)은 `$color-cyan`→`$color-blue`(`#7796ff`)로 교체. 아코디언 화살표 아이콘(`icon-chevron.svg`)은 흰색 stroke라 흰 배경에서 안 보이므로 `filter: invert(1)`로 우회. `.footer`도 `.contact` 안에 있어서 같은 배경을 쓰게 되므로 footer 텍스트 색도 함께 라이트 테마로 변경함(footer 전용 Figma 노드는 없어서 이건 추정 — 색상 반전의 연쇄 효과로 어쩔 수 없이 맞춘 것, 실제 footer 디자인 의도와 다를 수 있음).
+  - `npm run build` 통과, playwright로 PC(1440px)/모바일(390px) 스크린샷 확인하여 Figma 렌더와 색상·레이아웃 일치 확인함.
+
+### 남은 작업
+
+1. **PROJECT 이미지 9~13번 누락** — 9(프로스펙스)·10(중소기업창업)·11(롯데 GA2ck)·12(국민은행)·13(코나아이 PC) 카드는 Figma 새 디자인엔 실제 목업 이미지가 있는데, 이 MCP로는 이미지 export가 안 돼서 여전히 빈 박스(`project__thumbEmpty`)로 남아있음. **사용자가 Figma에서 직접 5개 이미지를 export 해서 `src/images/project-9.jpg` ~ `project-13.jpg`로 전달해야 적용 가능.**
+2. **Footer 컨텐츠 미반영** — 이번 CONTACT 작업 대상 노드(`2247:2253`/`2319:5082`)는 Recruitment 태그까지만 보이고 그 아래 footer(브랜드/연락처/copyright) 영역은 렌더에 포함되지 않았음. 그래서 footer는 옛 값(`bodalab@bodalab.com`, `010-1234-5678`)을 그대로 두었는데, 새 Head Office 연락처(`koji@bodalab.co.kr`, `010-4169-4728`)와 불일치함. footer 전용 Figma 프레임 링크나 "이 연락처로 통일해도 되는지" 확인 필요.
+3. **GNB 마무리** — 전체 섹션이 다 만들어진 뒤 스크롤 시 활성 메뉴(`isActive`) 동작, 반응형 폭 최종 점검 필요. (아직 미착수)
 4. **최종 정리**
-   - `src/scss/index.scss`의 `@use "page/..."` 목록은 이미 `gnb, intro, about, vision, projects, contact` 로 되어 있음. PROJECT/CONTACT 작업 후 파일명을 새 섹션에 맞게 정리할지 결정(`_projects.scss`→`_project.scss` 등 네이밍 통일 여부는 미정).
+   - 파일명 정리: `_projects.scss`를 새 네이밍(`_project.scss` 등)으로 통일할지 결정 미정.
-   - 안 쓰는 이미지 정리: `about-hand.jpg`는 이미 HTML에서 참조 제거됨(파일 자체는 아직 디스크에 남아있을 수 있음, 삭제 필요). `vision-1/2/3.jpg`도 더 이상 참조 안 됨 — 삭제 검토. `history-1.jpg`는 HISTORY 좌측 사진 placeholder로 재사용 중(삭제하면 안 됨).
+   - 안 쓰는 이미지 정리: `about-hand.jpg`(참조 제거됨, 삭제 검토), `vision-1/2/3.jpg`(참조 없음, 삭제 검토). `history-1.jpg`는 재사용 중이라 삭제 금지. `map.svg`도 이번에 `.contact__map` 삭제로 참조가 없어졌으니 삭제 검토 목록에 추가.
-   - `npm run build`, `npm run format` 최종 실행.
+   - `npm run format` 최종 실행 (이번 세션에선 `npm run build`만 실행함, format은 아직 안 돌림).
 
 ### Figma 노드 ID 모음 (file_key: `MnwN1Uzg5F6ks9Clr1brLW`)
+
 - PC 전체 페이지(컴포지트, 모든 섹션 한눈에 보임): `2247:2093`
 - 01_HOME (PC): `2247:2094`
 - 02_ABOUT US (PC, EXPERTISE 포함): `2247:2230`
 - 03_HISTORY (PC): `2247:2121`
 - VISION PC: `2247:2183` / VISION 모바일: `2319:4183`
-- PROJECT PC: `2247:2202` / PROJECT 모바일: `2319:4231` — **아직 렌더 못 받음(429)**
+- PROJECT PC: `2247:2202` / PROJECT 모바일: `2319:4231` — 렌더 확인 완료, 반영 완료(이미지 9~13 제외)
-- CONTACT/FOOTER — **노드 ID 미확보**, 사용자에게 요청 필요
+- CONTACT/FOOTER (문서 상단 "06_Expertise" 링크가 실제 이 내용임) PC: `2247:2253` / 모바일: `2319:5082` — 렌더 확인·반영 완료(footer 영역 제외)
 - 모바일 전체 페이지(컴포지트): `2319:5243`
 - 모바일 GNB 드로어(열린 상태): `2319:5998`
 
 ### Figma MCP 연결 관련 메모 (재현/트러블슈팅용)
-- 이 프로젝트(`d:/repository/boda-lab`)의 figma MCP 서버는 프로젝트 루트 `.mcp.json`에 등록되어 있음 (전역 `~/.claude.json`이 아니라 **프로젝트 단위 `.mcp.json` 파일** 방식).
+
-- 서버 설정: stdio 방식, `command`는 nvm4w 심볼릭링크(`C:\nvm4w\nodejs\npx.cmd`)가 아니라 **실제 경로**(`C:\Users\HeeDesktop\AppData\Local\nvm\v24.16.0\npx.cmd`)로 지정해야 동작함 — Windows에서 VSCode 확장이 스폰하는 프로세스는 심볼릭링크/PATH를 못 찾는 경우가 있어서 절대경로로 우회한 것. `args: ["-y", "figma-mcp"]`, `env.FIGMA_API_KEY`로 키 전달.
+- **환경이 Windows(`d:/repository/boda-lab`)에서 이 Mac(`/Users/heemac/repository/project-bodalab`)으로 바뀜.** Windows 때 설정(`.mcp.json`에 nvm4w 절대경로 `npx.cmd` 지정)은 이 머신에 적용 안 됨 — npx/node 자체가 새로 깔린 환경이라 처음엔 figma-mcp가 전혀 연결 안 되어 있었음.
+- 이 Mac에서는 프로젝트 루트 `.mcp.json`(git에는 `.gitignore`로 추적 제외됨)에 `{ "mcpServers": { "figma": { "command": "npx", "args": ["-y", "figma-mcp"], "env": { "FIGMA_API_KEY": "..." } } } }` 형태로 새로 등록함. macOS는 nvm 심볼릭링크 문제가 없어서 `command: "npx"`만으로 동작함(절대경로 불필요).
+- **`.mcp.json`은 세션 시작 시점에 로드된다.** 파일을 새로 만들거나 고쳐도 같은 대화 세션에는 바로 안 먹히고, Claude Code를 재시작(새 세션)해야 도구가 인식됨.
 - 도구: `mcp__figma__add_figma_file(url)` — 파일 전체를 JSON으로 덤프하는데, 파일이 커서 약 25k 토큰 근처(`01_HOME`~`03_HISTORY` 중반)에서 항상 잘림. `node-id` 쿼리 파라미터를 URL에 넣어도 무시되고 항상 전체 문서 기준으로 덤프됨 — 범위 제한 불가.
-- 도구: `mcp__figma__view_node(file_key, node_id)` — 특정 노드를 PNG로 렌더해서 보여줌(파일로 저장은 안 됨, 대화창에만 표시). 섹션별 정밀 확인에 주력 도구로 사용 중. **오늘 PROJECT 섹션 작업 중 이 API가 429를 반환하기 시작했고, 5분+ 대기해도 풀리지 않았음.** 다음 세션에서도 재현되면 더 오래(10분+) 기다리거나, 사용자에게 Figma API 키/요금제 쪽 rate limit 상태를 확인해달라고 요청할 것.
+- 도구: `mcp__figma__view_node(file_key, node_id)` — 특정 노드를 PNG로 렌더해서 보여줌(파일로 저장은 안 됨, 대화창에만 표시). 섹션별 정밀 확인에 주력 도구로 사용 중. 이전 세션엔 이 API가 429를 반환했었는데, 이번 세션(새 환경)에서는 재현 안 되고 바로 정상 렌더됨.
 - 이미지 에셋(사진/목업) 자체는 이 MCP로 export/저장이 안 됨 — 필요한 이미지는 Figma에서 사용자가 직접 Export 해서 `src/images/`에 넣어줘야 함.
 
 ---
@@ -47,7 +94,7 @@ Figma MCP(`figma-mcp`)로 확인이 안 되거나 추출이 안 되는 항목을
 
 ## HOME
 
-- 배경의 원형 동심원 패턴 이미지(`unsplash:-cKXtsJWU-I`, opacity 0.2)는 에셋 추출이 안 돼서 반영하지 못했다. 사용자 결정에 따라 기존 GSAP blob 애니메이션(`introAnimation.js`)을 그대로 유지하기로 함 — 동심원 패턴 이미지를 쓰고 싶다면 Figma에서 해당 이미지를 export해서 전달 필요.
+- ~~배경 패턴 이미지 미반영~~ → **해결함(2026-06-24)**. 실제로는 동심원 패턴이 아니라 Unsplash 무료 사진(`A star trail over a body of water`, 작가 Reign Abarintos, id `-cKXtsJWU-I`)이었음 — 순수 CSS로는 재현 불가 판단(불규칙한 별빛 줄무늬·노이즈가 있는 실제 사진이라 `radial-gradient` 등으로 흉내내는 수준에 그침). 사용자가 Figma에서 직접 export해서 `src/images/bg_home.png`로 전달함. 적용하면서 그동안 자리채움으로 쓰던 GSAP blob 애니메이션(컬러 블러 도형, `introAnimation.js`)은 Figma 디자인에 없는 요소라 **사용자 확인받고 완전히 제거**함 — `.intro__blobs`/`.blob*` 마크업·SCSS·JS 전부 삭제, `.intro__bg`(배경 이미지, opacity 0.2, GSAP로 0→0.2 페이드인)로 교체. 텍스트 순차 등장 애니메이션(`intro__sub`→`intro__title` fade-up)은 그대로 유지.
 
 ## GNB (모바일 드로어)
 

pnpm-workspace.yaml

@@ -0,0 +1,9 @@
+allowBuilds:
+  '@parcel/watcher': true
+  cwebp-bin: true
+  esbuild: true
+  gifsicle: true
+  jpegtran-bin: true
+  mozjpeg: true
+  optipng-bin: true
+  pngquant-bin: true

src/index.html

@@ -52,12 +52,7 @@
     <main>
       <!-- 01. INTRO -->
       <section id="intro" class="intro">
-        
+        <div class="intro__bg" aria-hidden="true"></div>
-        <div class="intro__blobs" aria-hidden="true">
-          <div class="blob blobCyan"></div>
-          <div class="blob blobPurple"></div>
-          <div class="blob blobBlue"></div>
-        </div>
 
         <div class="intro__content">
           <p class="intro__sub">Our Company</p>
@@ -493,10 +488,10 @@
               <div class="project__thumb project__thumbEmpty"></div>
               <div class="project__info">
                 <div class="project__meta">
-                  <h3 class="project__name">한화 GAsk 구축 프로젝트</h3>
+                  <h3 class="project__name">롯데 GA2ck 구축 프로젝트 (롯데 렌터카)</h3>
                   <span class="project__date">2021.11</span>
                 </div>
-                <p class="project__company">한화</p>
+                <p class="project__company">롯데</p>
                 <div class="project__stack">
                   <span class="project__tag">html5</span>
                   <span class="project__tag">css3</span>
@@ -546,104 +541,58 @@
         </div>
       </section>
 
-      <!-- 07. EXPERTISE -->
+      <!-- 07. CONTACT / FOOTER -->
-      <section id="expertise" class="expertise">
+      <section id="contact" class="contact">
-        <div class="expertise__inner">
+        <div class="contact__inner">
-          <h2 class="sectionTitle">EXPERTISE</h2>
+          <h2 class="contact__heading">WELCOME BODA LAB</h2>
-          <p class="expertise__desc">
+          <p class="contact__desc">
             The BODA LAB은 서비스와 사용자를 고려하여 다양한 경험을 제공하며,
             <br />
             거쳐간 모든 곳에서 지속적인 성장이 이루어질 수 있도록 함께합니다.
           </p>
-          <ul class="expertise__list">
+          <address class="contact__office">
-            <li class="expertise__item">
-              <span class="expertise__num">01</span>
-              <h3 class="expertise__name">UX Consulting</h3>
-              <p class="expertise__text">UX 컨설팅</p>
-            </li>
-            <li class="expertise__item">
-              <span class="expertise__num">02</span>
-              <h3 class="expertise__name">Plarform Building</h3>
-              <p class="expertise__text">플랫폼 구축</p>
-            </li>
-            <li class="expertise__item">
-              <span class="expertise__num">03</span>
-              <h3 class="expertise__name">Mobile App &amp; Web</h3>
-              <p class="expertise__text">앱 &amp; 웹 개발</p>
-            </li>
-            <li class="expertise__item">
-              <span class="expertise__num">04</span>
-              <h3 class="expertise__name">Service Management</h3>
-              <p class="expertise__text">서비스 운영</p>
-            </li>
-          </ul>
-        </div>
-      </section>
-
-      <!-- 08. CONTACT / FOOTER -->
-      <section id="contact" class="contact">
-        <div class="contact__inner">
-          <div class="contact__left">
-            <h2 class="contact__greeting">
-              Welcome!
-              <br />
-              <span class="contact__greetingBrand">BODA LAB</span>
-            </h2>
-            <address class="contact__address">
             <p class="contact__label">Head Office</p>
             <dl class="contact__infoList">
               <div class="contact__infoItem">
                 <dt class="contact__infoLabel">Address</dt>
-                  <dd class="contact__infoValue">
+                <dd class="contact__infoValue">서울시 강서구 마곡중앙로 161-8, 두산더랜드파크 C동 618호</dd>
-                    서울특별시 금천구 가산디지털2로 169-16,
-                    <br />
-                    907호 (가산하우스디퍼스타)
-                  </dd>
               </div>
               <div class="contact__infoItem">
                 <dt class="contact__infoLabel">e-mail</dt>
                 <dd class="contact__infoValue">
-                    <a class="contact__infoLink" href="mailto:bodalab@bodalab.com">bodalab@bodalab.com</a>
+                  <a class="contact__infoLink" href="mailto:koji@bodalab.co.kr">koji@bodalab.co.kr</a>
                 </dd>
               </div>
               <div class="contact__infoItem">
                 <dt class="contact__infoLabel">tel</dt>
-                  <dd class="contact__infoValue">010-1234-5678</dd>
+                <dd class="contact__infoValue">010-4169-4728</dd>
-                </div>
-                <div class="contact__infoItem">
-                  <dt class="contact__infoLabel">fax</dt>
-                  <dd class="contact__infoValue">010-1234-5678</dd>
               </div>
             </dl>
           </address>
         </div>
-          <div class="contact__right">
+        <!-- Contact Us -->
-            <div class="contact__map"></div>
-          </div>
-        </div>
-        <!-- 프로젝트 문의 -->
         <div class="contactAccordion">
           <div class="contactAccordion__item isOpen" id="acc-project">
             <button class="contactAccordion__header" aria-expanded="true" aria-controls="acc-project-body">
-              <span>프로젝트 문의</span>
+              <span>Contact Us</span>
               <img class="contactAccordion__icon" src="images/icon-chevron.svg" alt="" />
             </button>
             <div class="contactAccordion__body" id="acc-project-body">
               <form class="contactForm" onsubmit="return false;">
-                <div class="contactForm__row">
+                <div class="contactForm__cols">
-                  <input type="text" class="contactForm__input" placeholder="회사명" />
+                  <div class="contactForm__fields">
-                  <input type="text" class="contactForm__input" placeholder="담당자 이름" />
+                    <input type="text" class="contactForm__input" placeholder="회사명*" />
-                </div>
+                    <input type="text" class="contactForm__input" placeholder="담당자 이름*" />
-                <div class="contactForm__row">
+                    <input type="tel" class="contactForm__input" placeholder="연락처*" />
-                  <input type="tel" class="contactForm__input" placeholder="연락처" />
+                    <input type="email" class="contactForm__input" placeholder="이메일*" />
-                  <input type="email" class="contactForm__input" placeholder="이메일" />
                   </div>
                   <textarea class="contactForm__textarea" placeholder="문의내용"></textarea>
+                </div>
                 <div class="contactForm__agree">
                   <label class="contactForm__checkbox">
                     <input class="contactForm__checkboxInput" type="checkbox" />
                     <span class="contactForm__checkboxBox"></span>
-                    <span>개인정보보호정책에 동의합니다.</span>
+                    <span>[필수] 개인정보 수집 및 이용 동의</span>
                   </label>
                 </div>
                 <div class="contactForm__submit">
@@ -653,10 +602,10 @@
             </div>
           </div>
 
-          <!-- 채용 -->
+          <!-- Recruitment -->
           <div class="contactAccordion__item" id="acc-career">
             <button class="contactAccordion__header" aria-expanded="false" aria-controls="acc-career-body">
-              <span>채용</span>
+              <span>Recruitment</span>
               <img class="contactAccordion__icon" src="images/icon-chevron.svg" alt="" />
             </button>
             <div class="contactAccordion__body" id="acc-career-body" hidden>

src/js/introAnimation.js

@@ -1,61 +1,11 @@
 import { gsap } from "gsap";
 
-const BLOB_ENTER = 2;
-
-const blobFront = { scale: 1.5, opacity: 0.65, filter: "blur(20px)", duration: 8, ease: "sine.inOut" };
-const blobBack  = { scale: 0.6, opacity: 0.25, filter: "blur(52px)", duration: 8, ease: "sine.inOut" };
-
-function randomBlob(selector, frontOverrides, delay) {
-  const rand = (min, max) => gsap.utils.random(min, max);
-  const isMo = () => window.innerWidth <= 768;
-
-  function cycle() {
-    const xRange = isMo() ? 60 : 180;
-    const yRange = isMo() ? 140 : 100;
-    const x = rand(-xRange, xRange);
-    const y = rand(-yRange, yRange);
-
-    gsap.timeline()
-      .to(selector, { ...blobFront, ...frontOverrides, x, y })
-      .to(selector, { duration: 20 })
-      .to(selector, { ...blobBack, x: 0, y: 0 })
-      .call(cycle);
-  }
-
-  gsap.delayedCall(delay, cycle);
-}
-
-function morphBlob(selector, targetRadius, duration) {
-  gsap.to(selector, {
-    borderRadius: targetRadius,
-    duration,
-    repeat: -1,
-    yoyo: true,
-    ease: "sine.inOut",
-  });
-}
-
 export function initIntroAnimation() {
-  gsap.set([".blobCyan", ".blobPurple", ".blobBlue"], {
+  gsap.set(".intro__bg", { opacity: 0 });
-    opacity: 0,
+  gsap.to(".intro__bg", { opacity: 0.2, duration: 2, ease: "power1.out" });
-    scale: 0.4,
-    filter: "blur(60px)",
-  });
-
-  gsap.to(".blobCyan",   { opacity: 0.25, scale: 0.6, filter: "blur(50px)", duration: 1.6, ease: "power2.out" });
-  gsap.to(".blobPurple", { opacity: 0.2,  scale: 0.6, filter: "blur(55px)", duration: 1.6, ease: "power2.out", delay: 0.35 });
-  gsap.to(".blobBlue",   { opacity: 0.2,  scale: 0.6, filter: "blur(55px)", duration: 1.6, ease: "power2.out", delay: 0.7 });
 
   // 텍스트 순차 등장
   gsap.set([".intro__sub", ".intro__title"], { opacity: 0, y: 30 });
   gsap.to(".intro__sub",   { opacity: 1, y: 0, duration: 0.9, ease: "power3.out", delay: 1.0 });
   gsap.to(".intro__title", { opacity: 1, y: 0, duration: 0.9, ease: "power3.out", delay: 1.3 });
-
-  randomBlob(".blobCyan",   { opacity: 0.65, filter: "blur(20px)" }, BLOB_ENTER);
-  randomBlob(".blobPurple", { opacity: 0.55, filter: "blur(22px)" }, BLOB_ENTER + 6);
-  randomBlob(".blobBlue",   { opacity: 0.55, filter: "blur(22px)" }, BLOB_ENTER + 12);
-
-  morphBlob(".blobCyan",   "60% 40% 55% 45% / 45% 60% 40% 55%", 1.8);
-  morphBlob(".blobPurple", "45% 55% 40% 60% / 60% 40% 55% 45%", 2.4);
-  morphBlob(".blobBlue",   "55% 45% 60% 40% / 40% 60% 45% 55%", 2.1);
 }

src/scss/page/_contact.scss

@@ -1,109 +1,37 @@
 @use "../base/variable" as *;
 @use "../base/mixin" as *;
 
-// Expertise
-.expertise {
-  background: $color-bg;
-  padding: 100px 48px;
-  border-top: 1px solid rgba($color-white, 0.08);
-}
-
-.expertise__inner {
-  max-width: 1200px;
-  margin: 0 auto;
-}
-
-.expertise__desc {
-  margin-top: 20px;
-  margin-bottom: 64px;
-  font-size: 15px;
-  font-weight: 300;
-  color: rgba($color-white, 0.6);
-}
-
-.expertise__list {
-  display: grid;
-  grid-template-columns: repeat(4, 1fr);
-  gap: 0;
-  border-top: 1px solid rgba($color-white, 0.12);
-}
-
-.expertise__item {
-  padding: 40px 32px 40px 0;
-  border-right: 1px solid rgba($color-white, 0.12);
-
-  &:last-child {
-    border-right: none;
-  }
-}
-
-.expertise__num {
-  display: block;
-  font-size: 12px;
-  font-weight: 400;
-  color: $color-cyan;
-  letter-spacing: 0.1em;
-  margin-bottom: 20px;
-}
-
-.expertise__name {
-  font-size: clamp(16px, 1.4vw, 20px);
-  font-weight: 400;
-  color: $color-white;
-  margin-bottom: 16px;
-  line-height: 1.3;
-}
-
-.expertise__text {
-  font-size: 13px;
-  font-weight: 300;
-  line-height: 1.7;
-  color: rgba($color-white, 0.55);
-}
-
 // Contact
+// 이 섹션만 Figma 디자인이 라이트 테마(흰 배경/검은 텍스트)임 — 다른 섹션과 색상 반전
 .contact {
-  background: $color-bg;
+  background: $color-white;
   display: flex;
   flex-direction: column;
-  border-top: 1px solid rgba($color-white, 0.08);
+  border-top: 1px solid rgba($color-dark, 0.08);
 }
 
 .contact__inner {
-  display: flex;
+  max-width: 1200px;
-  align-items: stretch;
+  margin: 0 auto;
-  flex: 1;
+  width: 100%;
-  min-height: 60vh;
+  padding: 100px 48px 64px;
 }
 
-.contact__left {
+.contact__heading {
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  gap: 40px;
-  width: 50%;
-  padding: 80px 80px 80px 48px;
-}
-
-.contact__greeting {
-  font-family: $font-serif;
-  font-style: italic;
-  font-size: clamp(36px, 5vw, 72px);
-  font-weight: 400;
-  line-height: 1.1;
-  color: $color-white;
-}
-
-.contact__greetingBrand {
-  display: block;
-  font-size: clamp(16px, 1.5vw, 22px);
   font-family: $기본글꼴;
-  font-style: normal;
+  font-size: clamp(28px, 3vw, 40px);
-  font-weight: 900;
+  font-weight: 600;
-  letter-spacing: 0.15em;
+  letter-spacing: 0.02em;
-  text-transform: uppercase;
+  color: $color-dark;
-  margin-top: 8px;
+  line-height: 1;
-  color: $color-cyan;
+}
+
+.contact__desc {
+  margin-top: 20px;
+  margin-bottom: 48px;
+  font-size: 15px;
+  font-weight: 300;
+  color: rgba($color-dark, 0.6);
 }
 
 .contact__label {
@@ -111,34 +39,34 @@
   font-weight: 600;
   letter-spacing: 0.1em;
   text-transform: uppercase;
-  color: rgba($color-white, 0.5);
+  color: rgba($color-dark, 0.5);
-  margin-bottom: 16px;
+  margin-bottom: 20px;
 }
 
 .contact__infoList {
   display: flex;
-  flex-direction: column;
+  flex-wrap: wrap;
-  gap: 16px;
+  gap: 48px;
 }
 
 .contact__infoItem {
   display: flex;
   flex-direction: column;
-  gap: 4px;
+  gap: 6px;
 }
 
 .contact__infoLabel {
   font-size: 12px;
   font-weight: 600;
   letter-spacing: 0.08em;
-  color: $color-cyan;
+  color: $color-blue;
 }
 
 .contact__infoValue {
   font-size: 14px;
   font-weight: 300;
   line-height: 1.7;
-  color: rgba($color-white, 0.85);
+  color: rgba($color-dark, 0.85);
 }
 
 .contact__infoLink {
@@ -150,30 +78,13 @@
   }
 }
 
-.contact__right {
-  width: 50%;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  padding: 80px 48px 80px 0;
-  gap: 24px;
-}
-
-.contact__map {
-  width: 100%;
-  aspect-ratio: 4 / 3;
-  background: #1a1a1a url("../../images/map.svg") center / cover no-repeat;
-  border: 1px solid rgba($color-white, 0.1);
-  overflow: hidden;
-}
-
 // Contact accordion
 .contactAccordion {
-  border-top: 1px solid rgba($color-white, 0.08);
+  border-top: 1px solid rgba($color-dark, 0.08);
 }
 
 .contactAccordion__item {
-  border-bottom: 1px solid rgba($color-white, 0.08);
+  border-bottom: 1px solid rgba($color-dark, 0.08);
 }
 
 .contactAccordion__header {
@@ -185,7 +96,7 @@
   background: none;
   border: none;
   cursor: pointer;
-  color: $color-white;
+  color: $color-dark;
   font-size: clamp(16px, 1.4vw, 20px);
   font-weight: 400;
   font-family: $기본글꼴;
@@ -203,6 +114,7 @@
   flex-shrink: 0;
   transition: transform 0.3s ease;
   object-fit: unset;
+  filter: invert(1);
 }
 
 .contactAccordion__item.isOpen .contactAccordion__icon {
@@ -232,18 +144,24 @@
   gap: 12px;
 }
 
-.contactForm__row {
+.contactForm__cols {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 12px;
 }
 
+.contactForm__fields {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
 .contactForm__input,
 .contactForm__textarea {
   width: 100%;
-  background: rgba($color-white, 0.04);
+  background: $color-white;
-  border: 1px solid rgba($color-white, 0.1);
+  border: 1px solid rgba($color-dark, 0.2);
-  color: $color-white;
+  color: $color-dark;
   font-family: $기본글꼴;
   font-size: 14px;
   font-weight: 300;
@@ -252,16 +170,17 @@
   transition: border-color 0.2s;
 
   &::placeholder {
-    color: rgba($color-white, 0.35);
+    color: rgba($color-dark, 0.35);
   }
   &:focus {
-    border-color: rgba($color-white, 0.3);
+    border-color: rgba($color-dark, 0.4);
   }
 }
 
 .contactForm__textarea {
   resize: none;
-  height: 180px;
+  min-height: 180px;
+  height: 100%;
 }
 
 .contactForm__agree {
@@ -275,7 +194,7 @@
   cursor: pointer;
   font-size: 13px;
   font-weight: 300;
-  color: rgba($color-white, 0.6);
+  color: rgba($color-dark, 0.6);
 }
 
 .contactForm__checkboxInput {
@@ -283,8 +202,8 @@
 }
 
 .contactForm__checkboxInput:checked + .contactForm__checkboxBox {
-  background: $color-cyan;
+  background: $color-blue;
-  border-color: $color-cyan;
+  border-color: $color-blue;
 }
 
 .contactForm__checkboxInput:checked + .contactForm__checkboxBox::after {
@@ -292,15 +211,15 @@
   display: block;
   width: 10px;
   height: 6px;
-  border-left: 1.5px solid $color-dark;
+  border-left: 1.5px solid $color-white;
-  border-bottom: 1.5px solid $color-dark;
+  border-bottom: 1.5px solid $color-white;
   transform: rotate(-45deg) translateY(-2px);
 }
 
 .contactForm__checkboxBox {
   width: 18px;
   height: 18px;
-  border: 1px solid rgba($color-white, 0.3);
+  border: 1px solid rgba($color-dark, 0.3);
   flex-shrink: 0;
   display: flex;
   align-items: center;
@@ -318,10 +237,10 @@
 
 .btnSend {
   padding: 12px 48px;
-  background: $color-cyan;
+  background: $color-blue;
   border: none;
   border-radius: 100px;
-  color: $color-dark;
+  color: $color-white;
   font-family: $기본글꼴;
   font-size: 14px;
   font-weight: 700;
@@ -347,18 +266,18 @@
   align-items: center;
   gap: 8px;
   padding: 10px 20px;
-  border: 1px solid rgba($color-white, 0.25);
+  border: 1px solid rgba($color-dark, 0.25);
   border-radius: 100px;
   font-size: 14px;
   font-weight: 300;
-  color: $color-white;
+  color: $color-dark;
   transition:
     border-color 0.2s,
     color 0.2s;
 
   &:hover {
-    border-color: $color-cyan;
+    border-color: $color-blue;
-    color: $color-cyan;
+    color: $color-blue;
   }
 }
 
@@ -370,7 +289,7 @@
 
 // Footer
 .footer {
-  border-top: 1px solid rgba($color-white, 0.08);
+  border-top: 1px solid rgba($color-dark, 0.08);
   padding: 32px 48px;
 }
 
@@ -386,7 +305,7 @@
   font-size: clamp(18px, 2vw, 28px);
   font-weight: 700;
   letter-spacing: 0.08em;
-  color: rgba($color-white, 0.4);
+  color: rgba($color-dark, 0.4);
   line-height: 1.2;
   text-transform: uppercase;
 }
@@ -394,71 +313,38 @@
 .footer__contact {
   font-size: 13px;
   font-weight: 300;
-  color: rgba($color-white, 0.5);
+  color: rgba($color-dark, 0.5);
 }
 
 .footer__contactLink {
-  color: rgba($color-white, 0.5);
+  color: rgba($color-dark, 0.5);
   transition: color 0.2s;
 
   &:hover {
-    color: $color-white;
+    color: $color-dark;
   }
 }
 
 .footer__copy {
   font-size: 12px;
   font-weight: 300;
-  color: rgba($color-white, 0.3);
+  color: rgba($color-dark, 0.3);
   letter-spacing: 0.03em;
 }
 
 @include mo {
-  .expertise {
+  .contact__inner {
-    padding: 60px 24px;
+    padding: 60px 24px 40px;
   }
 
-  .expertise__desc {
+  .contact__desc {
-    margin-bottom: 40px;
+    margin-bottom: 32px;
     font-size: 14px;
   }
 
-  .expertise__list {
+  .contact__infoList {
-    grid-template-columns: 1fr 1fr;
-  }
-
-  .expertise__item {
-    padding: 28px 20px 28px 0;
-
-    &:last-child {
-      border-right: 1px solid rgba($color-white, 0.12);
-    }
-
-    &:nth-child(2),
-    &:nth-child(4) {
-      border-right: none;
-    }
-
-    &:nth-child(3),
-    &:nth-child(4) {
-      border-top: 1px solid rgba($color-white, 0.12);
-    }
-  }
-
-  .contact__inner {
     flex-direction: column;
-    min-height: unset;
+    gap: 24px;
-  }
-
-  .contact__left {
-    width: 100%;
-    padding: 60px 24px 40px;
-    gap: 32px;
-  }
-
-  .contact__right {
-    width: 100%;
-    padding: 0 24px 60px;
   }
 
   .contactAccordion__header {
@@ -469,10 +355,14 @@
     padding: 8px 24px 40px;
   }
 
-  .contactForm__row {
+  .contactForm__cols {
     grid-template-columns: 1fr;
   }
 
+  .contactForm__textarea {
+    height: auto;
+  }
+
   .careerTags {
     padding: 8px 24px 40px;
   }

src/scss/page/_intro.scss

@@ -11,44 +11,12 @@
   background: $color-bg;
 }
 
-.intro__blobs {
+.intro__bg {
   position: absolute;
   inset: 0;
+  background: url("../../images/bg_home.png") center / cover no-repeat;
+  opacity: 0.2;
   pointer-events: none;
-  overflow: hidden;
-
-  .blob {
-    position: absolute;
-    border-radius: 50%;
-    opacity: 0;
-    transform: scale(0.4);
-    filter: blur(60px);
-  }
-
-  .blobCyan {
-    width: 20vw;
-    height: 20vw;
-    background: $color-cyan;
-    top: 50%;
-    right: 20%;
-    transform: translateY(-50%);
-  }
-
-  .blobPurple {
-    width: 14vw;
-    height: 14vw;
-    background: $color-purple;
-    top: 38%;
-    left: 46%;
-  }
-
-  .blobBlue {
-    width: 14vw;
-    height: 14vw;
-    background: $color-blue;
-    top: 42%;
-    left: 28%;
-  }
 }
 
 .intro__content {
@@ -92,26 +60,4 @@
   .gnb__mobileNav {
     display: block;
   }
-
-  .blobCyan {
-    width: 80vw;
-    height: 80vw;
-    right: -20%;
-    top: -5%;
-  }
-
-  .blobPurple {
-    width: 65vw;
-    height: 65vw;
-    left: -15%;
-    top: 38%;
-    transform: translateY(-50%);
-  }
-
-  .blobBlue {
-    width: 70vw;
-    height: 70vw;
-    right: -15%;
-    bottom: -5%;
-  }
 }

src/scss/page/_projects.scss

@@ -34,19 +34,19 @@
 
 .project__thumb {
   width: 100%;
-  aspect-ratio: 16 / 10;
   overflow: hidden;
   background: #1a1a1a;
 }
 
 .project__thumbImg {
   width: 100%;
-  height: 100%;
+  height: auto;
-  object-fit: cover;
+  display: block;
   transition: transform 0.5s ease;
 }
 
 .project__thumbEmpty {
+  aspect-ratio: 16 / 10;
   background: #1a1a1a;
 }