76 changed files with 531 additions and 1088 deletions
--- a/doc/figma-specs-0624/08-footer-instance-mobile.json
+++ b/doc/figma-specs-0624/08-footer-instance-mobile.json
--- a/doc/figma-specs.md
+++ b/doc/figma-specs.md
@ -1,21 +0,0 @@
 # 참고: Figma 노드 ID 모음 (file_key: `MnwN1Uzg5F6ks9Clr1brLW`)
 - PC 전체 페이지(컴포지트): `2247:2093` / 모바일 전체 페이지(컴포지트): `2319:5243`
 - 01_HOME PC `2247:2094` / Mobile `2319:2232`
 - 02_ABOUT US PC `2247:2230` / Mobile `2319:2288`
 - 03_HISTORY PC `2247:2121` / Mobile `2319:2433`
 - 04_VISION PC `2247:2183` / Mobile `2319:4183`
 - 05_PROJECT PC `2247:2202` / Mobile `2319:4231`
 - 06_CONTACT/FOOTER(문서상 라벨은 "Expertise") PC `2247:2253` / Mobile `2319:5082`
 - 모바일 GNB 드로어(열린 상태): `2319:5998`
 - footer 전용 인스턴스: PC `2247:2294` / Mobile `2319:4996`
 - 개인정보 동의 모달: PC `2319:2118` / Mobile `2376:2184`
 상세 스펙 데이터는 `doc/figma-specs-0624/` 폴더 참고(섹션별 JSON/txt, README에 사용법 정리됨).
 # 참고: Figma 데이터 가져오는 법
 - Figma REST API를 직접 호출하는 게 가장 안정적: `.mcp.json`의 `FIGMA_API_KEY`로 `GET https://api.figma.com/v1/files/{file_key}/nodes?ids={node_id}` (특정 노드 JSON), `GET https://api.figma.com/v1/images/{file_key}?ids={node_id}&format=jpg&scale=2` (이미지로 export). 노드 ID만 알면 토큰 한도·이미지 export 제약 둘 다 우회됨.
 - `mcp__figma__add_figma_file(url)`은 문서 전체를 한 번에 덤프해서 토큰 한도에 걸리고, `mcp__figma__view_node(file_key, node_id)`는 PNG 렌더만 보여주고 파일로 저장은 안 됨 — 둘 다 REST API 직접 호출보다 제약이 많음.
 - 컴포넌트(버튼/인풋/체크박스 등) 비교 시 주의: Components 캔버스의 **추상 컴포넌트 정의**에 있는 배경색 등은 실제로 배치된 인스턴스에서 `visible:false`로 꺼져있는 placeholder일 수 있음(예: PROJECT의 `btn/large` 컴포넌트 정의는 회색 배경이 있지만 실제 인스턴스는 그 fill이 꺼져있어서 투명이 맞음). **항상 실제 페이지에 배치된 인스턴스를 raw JSON에서 직접 찾아 그 값(fills/cornerRadius/padding)을 써야 하고, 추상 컴포넌트 스와치만 보고 판단하면 안 됨.**
 - `.txt` 요약 파일은 `visible:false` 숨김 노드도 같이 추출하므로, 의심되는 텍스트는 raw JSON에서 `visible` 플래그를 직접 확인해야 함.
--- a/doc/figma-specs-0624/01-home-mobile.json
+++ b/doc/figma-specs-0624/01-home-mobile.json
--- a/doc/figma-specs-0624/01-home-mobile.txt
+++ b/doc/figma-specs-0624/01-home-mobile.txt
--- a/doc/figma-specs-0624/01-home-pc.json
+++ b/doc/figma-specs-0624/01-home-pc.json
--- a/doc/figma-specs-0624/01-home-pc.txt
+++ b/doc/figma-specs-0624/01-home-pc.txt
--- a/doc/figma-specs-0624/02-about-mobile.json
+++ b/doc/figma-specs-0624/02-about-mobile.json
--- a/doc/figma-specs-0624/02-about-mobile.txt
+++ b/doc/figma-specs-0624/02-about-mobile.txt
--- a/doc/figma-specs-0624/02-about-pc.json
+++ b/doc/figma-specs-0624/02-about-pc.json
--- a/doc/figma-specs-0624/02-about-pc.txt
+++ b/doc/figma-specs-0624/02-about-pc.txt
--- a/doc/figma-specs-0624/03-history-mobile.json
+++ b/doc/figma-specs-0624/03-history-mobile.json
--- a/doc/figma-specs-0624/03-history-mobile.txt
+++ b/doc/figma-specs-0624/03-history-mobile.txt
--- a/doc/figma-specs-0624/03-history-pc.json
+++ b/doc/figma-specs-0624/03-history-pc.json
--- a/doc/figma-specs-0624/03-history-pc.txt
+++ b/doc/figma-specs-0624/03-history-pc.txt
--- a/doc/figma-specs-0624/04-vision-mobile.json
+++ b/doc/figma-specs-0624/04-vision-mobile.json
--- a/doc/figma-specs-0624/04-vision-mobile.txt
+++ b/doc/figma-specs-0624/04-vision-mobile.txt
--- a/doc/figma-specs-0624/04-vision-pc.json
+++ b/doc/figma-specs-0624/04-vision-pc.json
--- a/doc/figma-specs-0624/04-vision-pc.txt
+++ b/doc/figma-specs-0624/04-vision-pc.txt
--- a/doc/figma-specs-0624/05-project-mobile.json
+++ b/doc/figma-specs-0624/05-project-mobile.json
--- a/doc/figma-specs-0624/05-project-mobile.txt
+++ b/doc/figma-specs-0624/05-project-mobile.txt
--- a/doc/figma-specs-0624/05-project-pc.json
+++ b/doc/figma-specs-0624/05-project-pc.json
--- a/doc/figma-specs-0624/05-project-pc.txt
+++ b/doc/figma-specs-0624/05-project-pc.txt
--- a/doc/figma-specs-0624/06-contact-mobile.json
+++ b/doc/figma-specs-0624/06-contact-mobile.json
--- a/doc/figma-specs-0624/06-contact-mobile.txt
+++ b/doc/figma-specs-0624/06-contact-mobile.txt
--- a/doc/figma-specs-0624/06-contact-pc.json
+++ b/doc/figma-specs-0624/06-contact-pc.json
--- a/doc/figma-specs-0624/06-contact-pc.txt
+++ b/doc/figma-specs-0624/06-contact-pc.txt
--- a/doc/figma-specs-0624/07-components.json
+++ b/doc/figma-specs-0624/07-components.json
--- a/doc/figma-specs-0624/07-components.txt
+++ b/doc/figma-specs-0624/07-components.txt
--- a/doc/figma-specs-0624/08-footer-instance-pc.json
+++ b/doc/figma-specs-0624/08-footer-instance-pc.json
--- a/doc/figma-specs-0624/09-privacy-modal-mobile.json
+++ b/doc/figma-specs-0624/09-privacy-modal-mobile.json
--- a/doc/figma-specs-0624/09-privacy-modal-pc.json
+++ b/doc/figma-specs-0624/09-privacy-modal-pc.json
--- a/doc/figma-specs-0624/10-history-duplicate-ref.json
+++ b/doc/figma-specs-0624/10-history-duplicate-ref.json
--- a/doc/figma-specs-0624/11-interaction-notes.md
+++ b/doc/figma-specs-0624/11-interaction-notes.md
--- a/doc/figma-specs-0624/README.md
+++ b/doc/figma-specs-0624/README.md
@ -81,7 +81,7 @@ File key: `MnwN1Uzg5F6ks9Clr1brLW`
 `MAIN_NEW_PC`, `MAIN_NEW_MO` 프레임 말고도 `NEW` 섹션 바로 아래에 화면에는 안 보이는 노드들이 더 있었다 (문서 전체를 `depth=4`로 한 번 훑어서 발견함). 자세한 내용과 구현 영향은 **[11-interaction-notes.md](11-interaction-notes.md)** 참고.
- [08-footer-instance-pc.json](08-footer-instance-pc.json) / [08-footer-instance-mobile.json](08-footer-instance-mobile.json) — footer 전용 인스턴스 PC(`2247:2294`) / Mobile(`2319:4996`, 2026-06-29 누락 발견 후 추가 수집). 둘 다 내용(THE BODA LAB / Mail `koji@bodalab.co.kr` / Tel `010-4169-4728` / © 2026 BODA LAB)이 기존 구현과 일치, 수정 불필요.
+- [08-footer-instance-pc.json](08-footer-instance-pc.json) — footer 전용 인스턴스 (`2247:2294`). 예전 기록엔 "footer 전용 노드 없음"이라 되어있었는데 실제로는 있었음 (내용은 기존 구현과 일치, 수정 불필요).
 - [09-privacy-modal-pc.json](09-privacy-modal-pc.json) / [09-privacy-modal-mobile.json](09-privacy-modal-mobile.json) — 개인정보 수집·이용 동의 모달 (`2319:2118` / `2376:2184`). **현재 코드에 미구현.**
 - [10-history-duplicate-ref.json](10-history-duplicate-ref.json) — HISTORY 중복 프레임(`2301:1896`, 참고용 사본으로 추정, 내용은 03-history-pc와 동일).
 - [11-interaction-notes.md](11-interaction-notes.md) — 디자이너가 텍스트 노트로 남긴 동작 스펙 모음 (아코디언 단일열림, PROJECT/태그 더보기 페이지네이션, SEND 버튼 유효성 검증 등). **다수가 현재 코드에 미구현 상태.**
@ -92,12 +92,6 @@ File key: `MnwN1Uzg5F6ks9Clr1brLW`
 - 이미 받은 13개 섹션 `.txt` 안에 동작 주석이 섞여있는지 `grep`으로 재검색함 → 없음 (06-contact의 "동의" 매칭은 이미 아는 체크박스 라벨 텍스트).
 - 즉 **스타일(폰트/색상/간격/보더) 스펙은 사실상 전부 확보**, **동작(behavior) 스펙도 이번에 전부 찾아서 11-interaction-notes.md에 정리**. 단, 이미지/비트맵 자산은 여전히 미포함(사용자가 직접 export), 이 모든 건 캡처 시점 스냅샷이라 Figma 원본이 바뀌면 재동기화 필요.
 ## 재검증 (2026-06-29)
 - `depth=4` 구조를 다시 받아 위 매핑표·컴포넌트 개수(32개)와 노드 단위로 대조함. PC/모바일 6섹션, 컴포넌트 캔버스, 모달, HISTORY 중복 프레임, 인터랙션 노트 텍스트는 전부 일치 확인.
 - **누락 발견 및 보완**: `NEW` 섹션 형제 노드 중 모바일 footer 인스턴스(`2319:4996`)가 그동안 한 번도 수집되지 않았었음(PC footer `2247:2294`만 받아뒀었음). REST API로 추가 수집해서 `08-footer-instance-mobile.json`으로 저장. 내용은 PC와 동일(`koji@bodalab.co.kr` / `010-4169-4728`)하고 현재 구현과도 일치 — 추가 수정 불필요.
 - 그 외 `visible: false`로 꺼진 미사용 초안 프레임(`2319:2392`, "Expertise" 텍스트, ABOUT US 섹션 내용과 중복) 하나를 발견했으나 비활성 상태라 무시함.
 ## 사용 시 주의
 - 좌표는 모두 Figma 캔버스 절대좌표(`absoluteBoundingBox`)다. CSS 값으로 옮길 때는 같은 프레임 안의 다른 좌표와의 **차이**(간격, 오프셋)로 환산해서 써야 한다 — 절대값 자체를 그대로 px로 쓰면 안 된다.
--- a/doc/figma-specs-0624/gnb-drawer-mobile.json
+++ b/doc/figma-specs-0624/gnb-drawer-mobile.json
--- a/doc/figma-specs-0624/gnb-drawer-mobile.txt
+++ b/doc/figma-specs-0624/gnb-drawer-mobile.txt
--- a/doc/디자인0624.fig
+++ b/doc/디자인0624.fig
--- a/doc/모바일-검수.md
+++ b/doc/모바일-검수.md
@ -1,109 +0,0 @@
 # 모바일 Figma 검수 기록 (완료)
 ## 작업 원칙
 - **PC는 검수 완료 상태 — 절대 건드리지 않음.** 모든 수정은 `@include mo { ... }` 미디어쿼리 블록 안에서만 진행.
 - Figma 기준값이 PC에서도 어긋나 보이는 경우가 있어도, base(공유) 규칙은 수정하지 않고 모바일 블록 안에서 모바일 전용 값으로 덮어씀(PC 재검수 유발 방지).
 - 새 마크업(예: 모바일 전용 이미지 `<img>`)을 추가할 때도 기본 상태는 `display:none`으로 두고 `@include mo`에서만 노출 — PC 렌더링에 영향 없음.
 - `doc/figma-specs-0624/*-mobile.json`을 기준으로 섹션별 전수 비교.
 ## 진행 계획
 1. GNB 모바일 드로어 (`gnb-drawer-mobile.json`)
 2. 01 HOME/INTRO (`01-home-mobile.json`)
 3. 02 ABOUT (`02-about-mobile.json`)
 4. 03 HISTORY (`03-history-mobile.json`)
 5. 04 VISION (`04-vision-mobile.json`)
 6. 05 PROJECT (`05-project-mobile.json`)
 7. 06 CONTACT/FOOTER (`06-contact-mobile.json`, `08-footer-instance-mobile.json`)
 8. 개인정보 동의 모달 (`09-privacy-modal-mobile.json`)
 각 섹션은 발견 즉시 아래에 기록하고, 수정 완료되면 체크합니다.
 ---
 ## 발견 사항
 ### 1. GNB 모바일 (gnb-drawer-mobile.json, 01-home-mobile.json) — 완료
 - [x] **모바일 전용 정사각 로고 마크 적용** — Figma는 모바일에서 PC 워드마크가 아니라 정사각 "B" 마크(40×40, 노드 `2319:2241`)를 따로 씀. REST API로 추출(`src/images/logo-mobile.png`), `index.html`에 `.gnb__logoImg--desktop`/`--mobile` 두 개의 `<img>`를 두고 `@include mo`에서 토글. PC는 `--mobile`이 base 규칙에서 `display:none`이라 영향 없음.
 - [x] **`.gnb__mobileNavClose`(닫기 X)** 48×48, top/right 20px로 — Figma "Navigation icon"(menu-close) 컴포넌트 규격.
 - [x] **`.gnb__hamburger`** 48×48로 — 동일 컴포넌트(menu-open) 규격.
 - [x] **`.gnb__mobileNavList` gap** 24px(고정) — Figma "menu" 컨테이너 itemSpacing.
 - [x] **`.gnb__mobileNavLink`** padding 24px 32px 추가, font-size `clamp(24px,8.5vw,32px)`(375px 기준 32px) — Figma "GNB" 아이템 규격.
 - [x] **`.gnb__mobileNav` overflow-y:auto 추가** — 패딩이 늘어 6개 항목이 작은 화면에서 넘칠 수 있어 안전장치.
 - [x] **`.scrollDown` 모바일** 72→52px 축소하던 것을 되돌림(데스크톱과 동일 72×72가 정답), bottom 24→20px.
 - 모두 `@include mo` 블록 안에서만 수정 / 새 `<img>`는 base에서 `display:none`으로 기본 차단 — PC 스크린샷 대조로 무영향 확인.
 ### 2. HOME/INTRO 모바일 (01-home-mobile.json) — 완료, 수정 불필요
 - 확인 결과: `.intro__sub`(clamp 최소 24px), `.intro__title`(clamp 최소 42px), `.intro__content` center 정렬 모두 Figma 모바일 실측값과 정확히 일치. 수정 사항 없음.
 ### 3. ABOUT 모바일 (02-about-mobile.json) — 완료
 - [x] `.about` 모바일 padding 가로 24→20px, 하단 60→80px (Figma `pad=[t80,r20,b80,l20]`, 상단은 고정 GNB 높이 보정값 유지)
 - [x] `.about__inner` gap 모바일 160px(고정) — head+quote 블록과 expertise 리스트 사이 간격(PC clamp는 그대로 둠)
 - [x] `.about__head .sectionTitle` margin-bottom 모바일 30px — title→desc 간격(PC base 57px는 그대로 둠, Figma 기준 PC60/모바일30)
 - [x] `.about__desc` margin-bottom 모바일 120px — desc→quote 간격(PC base 70px는 그대로 둠)
 - [x] `.about__quote` 모바일에서 세로 스택으로 바꾸던 오버라이드 제거 — Figma 모바일도 PC와 동일하게 가로 배치. 좌우 30px 인셋만 추가
 - [x] `.about__expertiseList` 모바일 gap 32→64px, 좌우 30px 인셋 추가
 - 모두 `@include mo` 안에서만 수정, PC 값(70px/57px/clamp)은 그대로 — Playwright로 PC `marginBottom:70px` 불변 확인.
 ### 4. HISTORY 모바일 (03-history-mobile.json) — 완료
 - [x] `.history` 모바일 padding 60px 24px → 80px 20px (Figma `pad=[t80,r20,b80,l20]`)
 - [x] `.history__title` margin-bottom 32px → 40px (Figma: 헤딩↔타임라인 간격 40, root gap)
 - [x] `.history__listItem .badge` padding 모바일 4px 6px로 보정 — Figma 기준 PC도 4/6이 맞고 base(2px 8px)가 PC에서도 틀려있었지만, PC는 손대지 않고 모바일만 동일 셀렉터로 덮어씀.
 - [x] **(검수 중 발견)** `.history__listItem`을 모바일에서 `flex-direction:column`으로 바꾸면서 PC의 `align-items:center`가 그대로 적용돼 날짜가 가운데로 쏠리는 버그 — `align-items:flex-start` 추가로 좌측 정렬 복구.
 - 확인 결과 변경 불필요: `.history__year`(24px), `.title`(14px), `.sub`(12px, 이미 모바일 오버라이드 있었음), `.date`(12px) 폰트 모두 Figma와 일치.
 - 변경 보류: `.history__listItem`이 모바일에서 세로 스택인 것 자체는 유지 — Figma raw 데이터상으론 가로 배치(`layout=HORIZONTAL`)이지만 실제 텍스트 폭이 컨테이너보다 넓게 오버플로우하는 항목이 다수라(예: 폭307 vs 컨테이너297) Figma 목업 자체의 정합성이 낮음. 세로 스택이 376px 폭에서 더 안전한 실무적 선택이라 판단해 유지.
 ### 5. VISION 모바일 (04-vision-mobile.json, 04-vision-pc.json 대조) — 완료
 - ABOUT과 구조가 동일(헤드+쿼트+키워드리스트 3블록을 `.vision__inner` 하나의 gap으로 묶음). PC도 Figma상 root gap이 균일하게 120(우연히 base clamp가 PC에서 정확히 120에 도달 — 그대로 둠)이라 같은 패턴으로 모바일만 오버라이드.
 - [x] `.vision` 모바일 padding 60px 24px → 80px 20px
 - [x] `.vision__inner` gap 모바일 160px — head/quote/keywordList 사이(PC clamp 그대로)
 - [x] `.vision__head` gap 모바일 30px — title→desc 간격(PC clamp 그대로)
 - [x] `.vision__quote`, `.vision__keywordList` 모바일 좌우 30px 인셋 추가
 - [x] `.vision__keywordList` gap 모바일 40px → 64px
 - 확인 결과 변경 불필요: `.mark`(86px)/`.text`(22px)/`.keyword`(32px)/`.desc`(14px) 폰트, `.vision__quote` 가로 배치 모두 이미 일치.
 ### 6. PROJECT 모바일 (05-project-mobile.json, 05-project-pc.json 대조) — 완료
 - 모바일은 1열 고정(페어링 없음) — Figma도 row 구조 없이 카드가 그냥 56px gap으로 쌓임.
 - [x] `.project` 모바일 padding 60px 20px → 80px 20px
 - [x] `.project__heading` margin-bottom 36px → 40px
 - [x] `.project__grid`, `.project__row` 모바일 gap 32px → 56px(카드 사이 간격, Figma 고정값)
 - [x] `.project__card` 모바일 gap 16px → 24px(썸네일↔정보 간격) — Figma 기준 PC도 24가 맞고 base(16px)가 PC에서도 틀려있었지만 PC는 두고 모바일만 보정
 - [x] `.project__thumb` 모바일 전용 썸네일 비율 335:200 추가(PC 624:396은 그대로)
 - [x] `.project__company` margin-top 모바일 18px, `.project__stack` margin-top 모바일 24px — Figma 고정값(name→company 18, company→tags 24), PC base(15px/20px)는 그대로 둠
 - [x] `.project__more` margin-top 48px → 56px
 - [x] `.btnMore` 모바일 padding 16px→13px(세로) — Figma 버튼 규격 139×48에 맞춤(실측 137.8×54 → 보정)
 - 확인 결과 변경 불필요: `.project__name`(18/700), `.project__company`(14/400), `.project__tag`(padding 4·14·6·14, 12px/300) 폰트·패딩 모두 고정값이라 이미 일치. 날짜 텍스트는 Figma에서도 `visible:false`라 마크업에서 의도적으로 제외된 것 확인(기존 PC 검수 결론과 동일).
 ### 7. CONTACT/FOOTER 모바일 (06-contact-mobile.json, 08-footer-instance-mobile.json, PC 대조) — 완료
 - [x] `.contact` 모바일 좌우 padding 20px(PC clamp 그대로)
 - [x] `.contact__desc` 모바일 margin-top 30px / margin-bottom 80px — PC(60px/120px)는 Figma와 이미 정확히 일치해서 그대로 둠(돌파구: PC가 이미 맞는 값이라 mo 오버라이드로만 모바일을 따로 보정).
 - [x] `.contact__inner` margin-bottom 모바일 80px(PC base 88px는 그대로 둠)
 - [x] `.contact__label` margin-bottom 모바일 16px, `.contact__infoList` gap 모바일 20px — Figma 공통값인데 base가 PC에서도 어긋나 있어 모바일만 보정
 - [x] `.contactAccordion__icon` 모바일 32×32 — Figma 공통값(PC도 32, base 24px는 PC에서도 틀림) → 모바일만 보정
 - [x] `.contactAccordion__item:not(:first-child) .contactAccordion__header` margin-top 모바일 80px — 두 아코디언 블록(Contact Us/Recruitment) 사이 간격
 - [x] `.contactForm__input/.textarea` font-weight 모바일 400 — Figma 공통값(PC도 400, base 300은 PC에서도 틀림) → 모바일만 보정
 - [x] `.careerTags` gap 모바일 16px, `.careerTag` gap 모바일 8px — Figma 공통값, base가 PC에서도 어긋나 있어 모바일만 보정
 - [x] **FOOTER**: `.footer` 모바일 padding 풀블리드로 변경(가로 패딩 제거, 다크 박스가 화면 끝까지), `.footer__inner` padding 40px 전체/gap 46px로 — Figma 모바일 footer 인스턴스 규격
 - [x] **FOOTER**: Mail/Tel을 모바일에서 줄바꿈 — `<br class="footer__contactBreak">` 추가(PC에선 `display:none`으로 숨겨 기존 한 줄 레이아웃 유지, 모바일에서만 노출). 기존 `&nbsp;` 간격은 `.footer__contactGap`으로 감싸 모바일에서 숨김.
 - 확인 결과 변경 불필요: input padding(16px 전체)/체크박스 크기(26px)·gap(14px)/SEND 버튼 padding·폭(107×44 상당) 모두 이미 일치.
 ### 8. 개인정보 동의 모달 모바일 (09-privacy-modal-mobile.json, PC 대조) — 완료
 - 참고: 처음 받은 `09-privacy-modal-mobile.json`은 실제로는 06_Expertise(Contact) 콘텐츠만 들어있었음 — 같은 프레임 안에 모달이 오버레이로 같이 배치돼 있어서, 6번째 자식 노드(`MODAL`)까지 내려가야 실제 모달 스펙이 나옴. 이번에 raw JSON을 더 깊게 파봐서 확인.
 - [x] **모바일은 PC의 중앙 카드형 모달이 아니라 화면 상단에 붙는 풀블리드 시트** — `MODAL` 노드 자체가 x/y가 화면 좌상단과 동일, width=375(화면 전체), cornerRadius 없음(완전 각짐). `.privacyModal{align-items:flex-start;padding:0}`, `.privacyModal__panel{max-width:none;border-radius:0;padding:24px}`로 변경(PC는 중앙정렬/720px/16px 라운드 그대로 유지).
 - [x] `.privacyModal__title` 모바일 22px(PC base 32px는 Figma와 이미 일치해서 그대로 둠)
 - [x] `.privacyModal__close` 모바일 48×48 — Figma 공통값(PC도 48이 맞고 base 24px가 PC에서도 틀려있었음, GNB 드로어 닫기버튼과 동일한 "Navigation icon" 컴포넌트) → 모바일만 보정
 - 확인 결과 변경 불필요: body 텍스트(14px/400), 체크박스(26px·gap14, contactForm 체크박스 스타일 재사용)는 이미 일치.
 ## 결론
 PC 화면은 어떤 base 규칙도 직접 수정하지 않았고, 모든 보정은 `@include mo` 블록 안에서만 이루어졌습니다(예외: 새로 추가한 모바일 전용 마크업 2건은 base에서 `display:none`으로 기본 차단 — `.gnb__logoImg--mobile`, `.footer__contactBreak`). Figma 데이터상 PC에서도 틀려있던 값들(badge padding, contactAccordion 아이콘 크기, input font-weight, careerTag 간격, privacyModal 닫기버튼 크기 등)은 PC base는 그대로 두고 모바일 셀렉터에만 동일/보정값을 다시 선언하는 방식으로 처리했습니다. 모든 변경은 Playwright로 PC computed style 불변 + 모바일 값 일치를 확인했습니다.
--- a/doc/미완료.md
+++ b/doc/미완료.md
@ -0,0 +1,158 @@
 # 디자인 링크
 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
 ---
 # 전체검수 결과 (2026-06-26)
 `.mcp.json` figma 연결 정상 동작 확인 후 재검수함.
 - **GNB 모바일 폰트** — 어제 "업라이트 세리프 vs 산세리프" 의문으로 남겨뒀던 건, 사용자가 Figma 인스펙터에서 실측값(`font-family: SUIT, font-style: normal, font-weight: 400`)을 직접 확인해줌. 세리프 추측이 틀렸던 것으로 확인. `_gnb.scss`의 `.gnb__mobileNavLink`에서 `font-family: $font-serif; font-style: italic;` 제거(기본 SUIT 상속). → **해결**
 - **VISION 인용구 폰트** — 마찬가지로 사용자가 Figma에서 별도 지정 폰트가 없음(SUIT)을 확인해줌. 기존 코드가 이미 SUIT를 쓰고 있어서 코드 변경 불필요. → **해결**
 - **DM Serif Display Italic 폰트 완전 삭제** — 위 GNB 수정으로 코드 전체에서 더 이상 안 쓰이게 되어 사용자 확인 후 정리함: `_font.scss`의 `@font-face`(Italic latin/latin-ext) 삭제, `_variable.scss`의 `$font-serif` 변수 삭제, `src/font/DMSerifDisplay/` 폴더(woff2 2개) 삭제, `doc/개발환경.md`의 디렉터리 구조·웹폰트 표에서도 제거.
 - **HISTORY 모바일 레이아웃** — 어제 "별도 크롭 못 받아서 추정 구현"이라 남겨뒀던 항목, 사용자가 알려준 모바일 링크(`node-id 2319-2433`)로 직접 확인함. 모바일 디자인엔 좌측 사진 영역 자체가 없고 타임라인만 존재 — 현재 `.history__photo { display: none; }` 구현이 추측이 아니라 실제 디자인과 정확히 일치함을 확인. → **해결(추측 아니었음, 확인 완료)**
 - **빌드 회귀(이미지 압축 깨짐) 발견 및 수정** — 이 검수 도중 `npm run build`에서 거의 모든 jpg/png가 압축 없이 원본 그대로 나가는 걸 발견(`project-4.jpg` 2.2MB 등). 원인은 같은 세션에서 별도 작업(pnpm 권한 이슈 해결)으로 `pnpm install`을 실행했다가 `node_modules`가 pnpm 구조로 바뀌면서 pnpm이 기본 정책상 `mozjpeg`/`optipng-bin`/`gifsicle` 등 이미지 압축 바이너리의 postinstall 빌드 스크립트를 건너뛴 것. `node_modules`, `pnpm-lock.yaml` 삭제 후 `npm ci` 재설치로 복구, 압축률 64~94% 정상 확인. (CI는 `npm ci`만 쓰므로 pnpm으로 설치하면 안 됨 — 어제 메모 그대로 재확인됨.)
 - **HISTORY 섹션 타이틀 색상 버그 발견 및 수정** — 사용자가 "타이틀과 배경이미지가 잘못 코딩됨"이라고 지적. 확인해보니 `index.html`의 `<h2>`에 `sectionTitle sectionTitleDark history__title` 3개 클래스가 같이 붙어있었는데, `_about.scss`의 `.history__title { color: $color-white; }`보다 `index.scss`의 `.sectionTitleDark { color: $color-dark; }`가 컴파일 순서상 나중에 와서 이겨버림 — 결과적으로 다크 사진 배경 위에 거의 같은 색(다크) 텍스트가 깔려 "HISTORY" 글자가 안 보이는 상태였음. `sectionTitleDark` 클래스를 제거해서 해결(모바일은 별도 미디어쿼리에서 이미 다크 컬러를 주고 있어서 영향 없음). 배경 이미지(`history-1.jpg`)는 기존에 기록된 임시 placeholder 이슈 그대로(자산 미전달, 새 버그 아님).
 - **FOOTER 글씨 배치 차이 수정** — 사용자가 "footer 글씨 배치가 디자인과 다르다"고 지적. footer 전용 Figma 노드가 없어서 사용자에게 "Copy link to selection" 링크(`node-id=2247-2294`)를 요청해 직접 확인함. 큰 구조(좌측 브랜드 2줄 / 중앙 연락처 / 우측 카피라이트, `space-between`)는 이미 일치했고, 차이는 두 가지: (1) "Mail"/"Tel" 라벨이 디자인엔 bold인데 코드는 전체 regular weight였음 → `<strong class="footer__contactLabel">`로 감싸고 `font-weight: 700` 추가. (2) 카피라이트가 디자인엔 "© 2026 BODA LAB"인데 코드엔 "© 2024 BODA LAB"로 오래된 값이 남아있었음 → 2026으로 수정. (연락처 값 자체는 2026-06-24에 사용자가 "현행 유지"로 이미 결정한 사항이라 손대지 않음.)
 - **HISTORY 좌측 사진 레이아웃 — 풀블리드 구조로 재수정** — 위 색상 버그를 고친 후에도 사용자가 "여전히 디자인과 다르다"고 지적. Figma(`node-id 2247:2121`)를 다시 정밀 비교해보니, 좌측 사진이 섹션의 좌/상/하 끝(뷰포트 가장자리)까지 풀블리드로 깔리고 텍스트(타이틀/타임라인)만 일반 패딩을 따르는 구조인데, 기존 코드는 `.history__inner`가 photo까지 포함해서 flex로 묶고 섹션 패딩을 photo에도 동일하게 적용하고 있어 photo가 좌측 패딩만큼 안으로 들어가 있었음(풀블리드가 아니었음). `.history__inner` 래퍼를 없애고 `.history__photo`를 `.history`(position:relative, padding-left:0)에 대해 `position:absolute; top:0; left:0; bottom:0`으로 풀블리드시키고, `.history__title`은 `left/top`을 일반 섹션 패딩값(`clamp(24px,6.25vw,120px)`/`clamp(60px,6.25vw,120px)`)으로 키우고, `.history__timeline`은 `margin-left: photo폭+gap`으로 밀어내는 구조로 변경(`_about.scss`, `index.html`). 모바일은 영향 없음(`.history__timeline { margin-left: 0; }` 추가, photo는 기존처럼 숨김).
 ---
 # 전체검수 결과 (2026-06-25)
 이전 세션(어제) 작업물을 전체 점검함. 6개 섹션 모두 마크업/스타일/JS 반영되어 있고 `npm run build` 통과 확인.
 발견해서 바로 고친 것:
 - **포맷 불일치** — "포맷 완료"로 기록돼 있었지만 실제로는 7개 파일이 Prettier 규칙(CRLF 줄바꿈)을 안 지키고 있었음. `npm run format`으로 재정리.
 - **PROJECT 카드 날짜 표시** — Figma 새 디자인엔 날짜가 없는데 `project__date`(예: "2023.12")가 마크업/CSS에 남아있던 걸 발견. 사용자 확인 후 전부 제거(`project__meta` 래퍼도 함께 정리, `_project.scss`의 `.project__meta`/`.project__date` 규칙 삭제).
 - **안 쓰는 파일 정리** — `history-2.jpg`, `history-3.jpg`(미참조), `pnpm-lock.yaml`, `pnpm-workspace.yaml`(npm 단일 워크플로우와 혼용되던 흔적, CI는 `npm ci`만 사용) 삭제. 사용자 확인 후 진행.
 검수 후에도 남아있는 미해결 항목은 아래 그대로.
 ---
 # 미완료 / 확인 필요 항목 (위에서부터 확인)
 추측해서 임의로 채운 값이 아니라, 실제로 막힌 지점만 기록한다. 아래 항목들은 자산(이미지/폰트) 전달이나 사용자 결정이 필요해서 남아있다.
 ## PROJECT
 - **이미지 9~13번 누락** — 9(프로스펙스)·10(중소기업창업)·11(롯데 GA2ck)·12(국민은행)·13(코나아이 PC) 카드는 Figma 새 디자인엔 실제 목업 이미지가 있는데, figma-mcp로는 이미지 export가 안 돼서 빈 박스(`project__thumbEmpty`)로 남아있음. **사용자가 Figma에서 직접 5개 이미지를 export 해서 `src/images/project-9.jpg` ~ `project-13.jpg`로 전달해야 적용 가능.**
 ## HISTORY
 - 2024/2023/2022/2021년 그룹은 Figma 렌더에서 아코디언이 collapsed 상태로 보여서 항목이 1개씩만 보인다(2024: 우리은행 로보어드바이저 구축, 2023: 신한은행 슈퍼SOL 운영 계약, 2022: 한화금융 서비스앱 플러스 리뉴얼 2차 계약, 2021: 롯데 렌터카 차세대 구축 계약). 펼쳤을 때 추가 항목이 더 있는지 정적 렌더로는 확인이 안 돼서 일단 보이는 1개씩만 반영함. 펼침 상태의 전체 목록 확인 필요.
 ## VISION
 - 배경의 별빛/우주 텍스처 이미지는 ABOUT US와 마찬가지로 에셋 추출이 안 돼서 단색 `$color-bg`로 대체함. **(사용자가 직접 이미지 전달 예정)**
 ---
 # 완료된 항목 (참고용, 더 손댈 필요 없음)
 ## HOME
 - **배경 패턴** — 동심원 패턴이 아니라 Unsplash 무료 사진(`A star trail over a body of water`, 작가 Reign Abarintos, id `-cKXtsJWU-I`)으로 확인됨. 순수 CSS로는 재현 불가 판단(불규칙한 별빛 줄무늬·노이즈가 있는 실제 사진). 사용자가 Figma에서 export해서 `src/images/bg_home.png`로 전달 → 적용 완료(2026-06-24). 자리채움으로 쓰던 GSAP blob 애니메이션(컬러 블러 도형)은 Figma에 없는 요소라 사용자 확인받고 완전히 제거(`.intro__blobs`/`.blob*` 마크업·SCSS·JS), `.intro__bg`(배경 이미지, opacity 0.2, GSAP 0→0.2 페이드인)로 교체. 텍스트 순차 등장 애니메이션은 유지.
 ## PROJECT
 - 카드 레이아웃을 고정 `aspect-ratio: 16/10` 크롭 방식에서 이미지 원본 비율 그대로 쌓는 매스너리 방식으로 변경(`_projects.scss`).
 - 11번째 카드 내용을 "한화 GAsk 구축 프로젝트(한화)" → "롯데 GA2ck 구축 프로젝트 (롯데 렌터카)(롯데)"로 수정 — 사용자 확인받고 반영함. 날짜(`2021.11`)는 기존 값 유지, 재확인 안 함.
 ## 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`.
 - **색상 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 연락처가 옛 값(`bodalab@bodalab.com`, `010-1234-5678`)으로 Head Office의 새 연락처와 다른 문제 — **사용자가 현행 유지로 결정함(2026-06-24)**. footer 전용 Figma 노드가 없어서 더 손대지 않음.
 - `npm run build` 통과, playwright로 PC(1440px)/모바일(390px) 스크린샷 확인하여 Figma 렌더와 색상·레이아웃 일치 확인함.
 ## GNB
 - **점검 완료(2026-06-24)** — playwright로 769px~1440px 전 구간 데스크톱 nav 줄바꿈/overflow 없음 확인, 스크롤에 따른 `isActive` 전환(섹션 진입 시 해당 메뉴로 자동 전환) 정상 동작 확인, 모바일 풀스크린 드로어도 정상.
 - 모바일 드로어 메뉴 라벨 "PROJECTS"(복수형)가 데스크톱 nav·PROJECT 섹션 타이틀("PROJECT", 단수형)과 다른 것처럼 보였으나, Figma 모바일 드로어 렌더(`2319:5998`)에도 "PROJECTS"로 되어 있어서 **현행 유지**(불일치 아니라 Figma 의도).
 - **모바일 드로어 폰트 → 완료(2026-06-26)**. 사용자가 Figma 인스펙터로 실측한 값(`font-family: SUIT, normal, 400`)을 확인해줌 — 세리프 추측 틀렸음. `.gnb__mobileNavLink`의 `font-family: $font-serif; font-style: italic;` 제거, 기본 SUIT 상속. 더 안 쓰게 된 `DM Serif Display Italic` 폰트(@font-face, woff2 파일, `$font-serif` 변수)는 전체 삭제함.
 ## HISTORY (모바일)
 - **모바일 레이아웃 → 완료(2026-06-26)**. 사용자가 알려준 모바일 링크(`node-id 2319-2433`)로 확인 — 모바일 디자인엔 좌측 사진 영역이 원래 없고 타임라인만 존재. 기존 `.history__photo { display: none; }` 구현이 추측이 아니라 실제 디자인과 일치했음.
 ## CONTACT (Contact Us/Recruitment 너비·구분선)
 - **완료(2026-06-26)**. 사용자가 "선이 전체를 차지한다", "입력창 스타일이 디자인과 다르다"고 지적. 원인은 두 가지였음. (1) `.contactAccordion__header`에 `border-bottom`이 없어서 "Contact Us" 펼침 상태일 때 헤딩-폼 사이 구분선이 비어있었음(닫힌 Recruitment는 우연히 같은 위치에 `.contactAccordion__item`의 border-bottom이 겹쳐서 괜찮아 보였던 것) → `border-bottom: 1px solid rgba($color-dark,0.08)` 추가. (2) 더 큰 원인: `.contactAccordion`이 `.contact__inner`(max-width:1200px, margin:auto로 가운데 정렬)의 형제 요소라서 그 제한을 안 받고 뷰포트 전체 너비(패딩 48px만 제외)로 퍼져 있었음 — 와이드 화면(1440px+)에서 "WELCOME BODA LAB" 컬럼보다 Contact Us/입력폼/구분선이 훨씬 넓게 늘어나 보인 것. `.contactAccordion`에도 동일하게 `max-width:1200px; margin:0 auto; width:100%;`를 추가해서 헤딩 섹션과 같은 컬럼 너비로 정렬함. `npm run build` 통과, 1920px/모바일(390px) 스크린샷으로 Figma 렌더와 일치 확인.
 ## HISTORY (좌측 사진 — 실제 에셋 교체)
 - **완료(2026-06-26)**. 사용자가 "배경이미지가 왜 이렇게 나와?"라고 지적(레이아웃 수정 후 사진 영역이 텍스처 없이 거의 단색 검정으로 보임). 원인 조사 중 `git log -p`로 확인해보니, 기존 `history-1.jpg`는 git 히스토리상 원래 3504×2336(코드 에디터 화면 사진)이었다가 `57aac80 fix: about`(2026-06-19) 커밋에서 완전히 다른 사진(손으로 폰 만지는 사진)으로 통째로 교체되면서 320×190(겨우 25KB)짜리 초소형 파일로 들어간 것 — "다운스케일 회귀"가 아니라 처음부터 이 레이아웃에 쓰기엔 너무 작은 placeholder였음. 세로로 긴 사진 칸(약 374×1800px)에 `object-fit: cover`로 늘리면서 ~10배 확대돼 뭉개진 단색처럼 보인 것. 사용자가 실제 Figma 에셋(나선형 건축물 텍스처, `unsplash_BSDebo0-UAo.png`, 919×1424)을 전달해줘서 `index.html`의 `<img>` `src`를 교체하고 기존 `history-1.jpg`는 삭제함. `npm run build` 통과, PC/모바일 스크린샷으로 Figma 렌더와 일치 확인.
 ## VISION (인용구 폰트)
 - **인용구 폰트 → 완료(2026-06-26)**. 사용자가 Figma에서 별도 지정 폰트 없음(SUIT)을 확인해줌. 기존 코드가 이미 SUIT라 변경 불필요.
 ## 최종 정리
 - ~~파일명 정리~~ → **완료(2026-06-24)**. `_projects.scss` → `_project.scss`로 리네임, `index.scss`의 `@use "page/projects"`도 `@use "page/project"`로 수정. 빌드 재확인 통과.
 - ~~안 쓰는 이미지 정리~~ → **완료(2026-06-24)**. `about-hand.jpg`(7.4MB), `vision-1/2/3.jpg`, `map.svg` 전부 코드 내 참조 없음을 grep으로 재확인 후 삭제함. `history-1.jpg`는 재사용 중이라 유지.
 - ~~`npm run format`~~ → **완료(2026-06-24)**. `introAnimation.js` 포맷팅 외 변경 없음. `npm run build`도 재확인 통과.
 ---
 # 참고: 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` — 렌더 확인 완료, 반영 완료(이미지 9~13 제외)
 - CONTACT/FOOTER (문서 상단 "06_Expertise" 링크가 실제 이 내용임) PC: `2247:2253` / 모바일: `2319:5082` — 렌더 확인·반영 완료(footer 영역 제외)
 - 모바일 전체 페이지(컴포지트): `2319:5243`
 - 모바일 GNB 드로어(열린 상태): `2319:5998`
 # 참고: Figma MCP 연결 관련 메모 (재현/트러블슈팅용)
 - **환경이 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로 렌더해서 보여줌(파일로 저장은 안 됨, 대화창에만 표시). 섹션별 정밀 확인에 주력 도구로 사용 중. 429(Rate Limit)가 났던 적이 있었으나 환경이 바뀐 뒤로는 재현 안 됨.
 - 이미지 에셋(사진/목업) 자체는 이 MCP로 export/저장이 안 됨 — 필요한 이미지는 Figma에서 사용자가 직접 Export 해서 `src/images/`에 넣어줘야 함.
 # 참고: 공통 / 도구 제약
 - `add_figma_file`이 파일 전체를 한 번에 JSON 덤프하는 방식이라 토큰 한도에 걸려 `01_HOME` ~ `03_HISTORY` 중반 이후 노드는 JSON으로 못 받았다. `view_node(file_key, node_id)`로 노드 ID를 알 때만 PNG 렌더로 확인 가능. VISION/PROJECT/CONTACT 등 이후 섹션은 작업 시점에 사용자에게 "Copy link to selection" 링크를 요청해서 진행한다.
 - `view_node`는 이미지를 대화창에 렌더만 해줄 뿐, 파일로 저장(export)하는 기능이 없다. 따라서 Figma 안의 사진/목업 이미지 에셋(배경 텍스처, 프로젝트 카드 스크린샷 등)은 이 MCP로 직접 추출이 불가능하다. 실제 자산은 Figma에서 직접 "Export" 해서 `src/images/`에 받아와야 한다.
--- a/package-lock.json
+++ b/package-lock.json
@ -11,7 +11,6 @@
      "dependencies": {
        "gsap": "^3.15.0",
        "jquery": "^4.0.0",
        "lenis": "^1.3.25",
        "sharp": "^0.35.1"
      },
      "devDependencies": {
@ -4945,37 +4944,6 @@
        "json-buffer": "3.0.0"
      }
    },
    "node_modules/lenis": {
      "version": "1.3.25",
      "resolved": "https://registry.npmjs.org/lenis/-/lenis-1.3.25.tgz",
      "integrity": "sha512-mOKxayErlaONK8fm4LN3XNd99Qu4plTpn9h9qf8wxzjGrJDzuD84FYzZ81HCd6ZsWp++VWVwOzL286Pf2s2u4A==",
      "license": "MIT",
      "workspaces": [
        "packages/*",
        "playground",
        "playground/*"
      ],
      "funding": {
        "type": "github",
        "url": "https://github.com/sponsors/darkroomengineering"
      },
      "peerDependencies": {
        "@nuxt/kit": ">=3.0.0",
        "react": ">=17.0.0",
        "vue": ">=3.0.0"
      },
      "peerDependenciesMeta": {
        "@nuxt/kit": {
          "optional": true
        },
        "react": {
          "optional": true
        },
        "vue": {
          "optional": true
        }
      }
    },
    "node_modules/lightningcss": {
      "version": "1.32.0",
      "resolved": "https://registry.npmjs.org/lightningcss/-/lightningcss-1.32.0.tgz",
--- a/package.json
+++ b/package.json
@ -21,7 +21,6 @@
  "dependencies": {
    "gsap": "^3.15.0",
    "jquery": "^4.0.0",
    "lenis": "^1.3.25",
    "sharp": "^0.35.1"
  }
 }
--- a/src/images/logo-mobile.png
+++ b/src/images/logo-mobile.png
--- a/src/images/logo.png
+++ b/src/images/logo.png
--- a/src/images/logo.svg
+++ b/src/images/logo.svg
@ -0,0 +1,17 @@
 <svg width="140" height="64" viewBox="0 0 140 64" fill="none" xmlns="http://www.w3.org/2000/svg">
 <path d="M105.558 1.6094L114.28 10.0894V27.3882H131.855L139.158 36.8565V62.1082H61.6378L53.1149 53.8541V36.1788H8.98649L0.671622 27.6988V1.6094H105.558ZM105.823 0.941162H0V27.9718L8.7027 36.8376H52.4432V54.1271L61.3635 62.7671H139.82V36.6212L132.177 26.72H114.942V9.80705L105.823 0.941162Z" fill="white"/>
 <path d="M26.2216 1.88234V27.0306H0.945946V1.88234H26.2216ZM27.1676 0.941162H0V27.9717H27.1676V0.941162Z" fill="white"/>
 <path d="M8.02161 7.30347H13.65C14.3689 7.30347 15.0311 7.38817 15.627 7.54817C16.223 7.71758 16.7338 7.95288 17.1594 8.28229C17.5851 8.60229 17.9162 9.007 18.1527 9.487C18.3892 9.967 18.5121 10.5317 18.5121 11.1717C18.5121 11.6329 18.4554 12.0188 18.3419 12.3388C18.2284 12.6588 18.1054 12.9317 17.973 13.1388C17.8121 13.3929 17.6324 13.6093 17.4338 13.7788C17.7459 13.9764 18.0392 14.2399 18.2946 14.5505C18.5121 14.8235 18.7108 15.1623 18.8905 15.5764C19.0703 15.9905 19.1649 16.4988 19.1649 17.1011C19.1649 17.7882 19.0419 18.4093 18.7959 18.9646C18.55 19.5199 18.2 19.9999 17.7459 20.3952C17.2919 20.7905 16.7432 21.0917 16.0811 21.2988C15.4284 21.5058 14.7 21.6093 13.8959 21.6093H8.03107V7.30347H8.02161ZM13.2811 19.8964C14.5486 19.8964 15.4851 19.6235 16.0811 19.0776C16.6865 18.5317 16.9892 17.8164 16.9892 16.9129C16.9892 16.3293 16.8662 15.8588 16.6108 15.5105C16.3554 15.1623 16.0905 14.8893 15.8067 14.6823C15.4473 14.4564 15.05 14.2964 14.6243 14.2117C14.9648 14.1082 15.277 13.9576 15.5513 13.7411C15.7973 13.5529 16.0148 13.2988 16.2135 12.9788C16.4121 12.6588 16.5067 12.2446 16.5067 11.7458C16.5067 10.8423 16.223 10.1646 15.6459 9.70347C15.0689 9.24229 14.2838 9.01641 13.3 9.01641H10.1973V19.8964H13.3H13.2811ZM10.7365 13.9576V9.53405H13.2811C14.2176 9.53405 14.8892 9.74111 15.2959 10.1458C15.7027 10.5505 15.9108 11.087 15.9108 11.7458C15.9108 12.4046 15.7027 12.9411 15.2959 13.3458C14.8892 13.7505 14.2176 13.9576 13.2811 13.9576H10.7365ZM10.7365 19.3788V14.4658H13.2621C13.7067 14.4658 14.123 14.5129 14.5013 14.607C14.8797 14.7011 15.2203 14.8423 15.504 15.0399C15.7878 15.2376 16.0149 15.4917 16.1851 15.8023C16.3459 16.1129 16.4311 16.4893 16.4311 16.9223C16.4311 17.7976 16.1378 18.4282 15.5608 18.8141C14.9743 19.1999 14.2176 19.3976 13.2621 19.3976H10.7365V19.3788ZM14.0567 11.6611C14.0567 11.0023 13.6973 10.6729 12.9784 10.6729H12.4581V12.6493H12.9784C13.6973 12.6493 14.0567 12.3199 14.0567 11.6611ZM12.9784 18.2493C14.0662 18.2493 14.6148 17.8352 14.6148 17.007C14.6148 16.1788 14.0662 15.7646 12.9784 15.7646H12.4581V18.2493H12.9784Z" fill="white"/>
 <path d="M52.4432 1.88234V27.0306H27.1675V1.88234H52.4432ZM53.3891 0.941162H26.2216V27.9717H53.3891V0.941162Z" fill="white"/>
 <path d="M104.877 1.88234V27.0306H79.6109V1.88234H104.877ZM105.823 0.941162H78.6555V27.9717H105.832V0.941162H105.823Z" fill="white"/>
 <path d="M78.6554 1.88234V27.0306H53.3797V1.88234H78.6554ZM79.6013 0.941162H52.4338V27.9717H79.6013V0.941162Z" fill="white"/>
 <path d="M32.2567 14.4564C32.2567 13.4305 32.4554 12.4517 32.8527 11.5387C33.25 10.6258 33.7891 9.8258 34.4702 9.14815C35.1513 8.47051 35.9554 7.93404 36.8729 7.53874C37.7905 7.14345 38.7743 6.9458 39.8054 6.9458C40.8364 6.9458 41.8202 7.14345 42.7378 7.53874C43.6554 7.93404 44.4594 8.47051 45.1405 9.14815C45.8216 9.8258 46.3608 10.6258 46.7581 11.5387C47.1554 12.4517 47.354 13.4305 47.354 14.4564C47.354 15.4823 47.1554 16.4611 46.7581 17.374C46.3608 18.287 45.8216 19.087 45.1405 19.7646C44.4594 20.4423 43.6554 20.9787 42.7378 21.374C41.8202 21.7693 40.8364 21.967 39.8054 21.967C38.7743 21.967 37.7905 21.7693 36.8729 21.374C35.9554 20.9787 35.1513 20.4423 34.4702 19.7646C33.7891 19.087 33.25 18.287 32.8527 17.374C32.4554 16.4611 32.2567 15.4823 32.2567 14.4564ZM34.281 14.4564C34.281 15.2187 34.4229 15.9246 34.7162 16.5929C35 17.2611 35.3973 17.8446 35.8986 18.3434C36.4 18.8423 36.9864 19.2376 37.6581 19.5199C38.3297 19.8023 39.0392 19.9529 39.8054 19.9529C40.5716 19.9529 41.281 19.8117 41.9527 19.5199C42.6243 19.2376 43.2108 18.8423 43.7121 18.3434C44.2135 17.8446 44.6108 17.2611 44.8946 16.5929C45.1783 15.9246 45.3297 15.2187 45.3297 14.4564C45.3297 13.694 45.1878 12.9882 44.8946 12.3199C44.6108 11.6517 44.2135 11.0682 43.7121 10.5693C43.2108 10.0705 42.6243 9.67521 41.9527 9.39286C41.281 9.11051 40.5716 8.95992 39.8054 8.95992C39.0392 8.95992 38.3297 9.10109 37.6581 9.39286C36.9864 9.67521 36.4 10.0705 35.8986 10.5693C35.3973 11.0682 35 11.6517 34.7162 12.3199C34.4324 12.9882 34.281 13.694 34.281 14.4564ZM39.8054 19.3976C39.1148 19.3976 38.4716 19.2658 37.8756 19.0117C37.2797 18.7576 36.75 18.3999 36.3054 17.9482C35.8513 17.4964 35.5013 16.9787 35.2364 16.3858C34.981 15.7929 34.8486 15.1529 34.8486 14.4658C34.8486 13.7787 34.981 13.1387 35.2364 12.5458C35.4919 11.9529 35.8513 11.4258 36.3054 10.9834C36.7594 10.5317 37.2797 10.1834 37.8756 9.91992C38.4716 9.6658 39.1148 9.53404 39.8054 9.53404C40.4959 9.53404 41.1391 9.6658 41.7351 9.91992C42.331 10.174 42.8608 10.5317 43.3054 10.9834C43.7594 11.4352 44.1094 11.9529 44.3743 12.5458C44.6297 13.1387 44.7621 13.7787 44.7621 14.4658C44.7621 15.1529 44.6297 15.7929 44.3743 16.3858C44.1189 16.9787 43.7594 17.5058 43.3054 17.9482C42.8513 18.3999 42.331 18.7482 41.7351 19.0117C41.1391 19.2658 40.4959 19.3976 39.8054 19.3976ZM36.7878 14.4564C36.7878 14.8705 36.8635 15.2564 37.0243 15.6234C37.1851 15.9905 37.4027 16.3105 37.6675 16.574C37.9419 16.847 38.2635 17.0634 38.6229 17.214C38.9919 17.374 39.3797 17.4493 39.7959 17.4493C40.2121 17.4493 40.6 17.374 40.9689 17.214C41.3378 17.054 41.6594 16.8376 41.9243 16.574C42.1986 16.3011 42.4162 15.9811 42.5675 15.6234C42.7283 15.2564 42.804 14.8705 42.804 14.4564C42.804 14.0423 42.7283 13.6564 42.5675 13.2893C42.4067 12.9223 42.1891 12.6023 41.9243 12.3387C41.65 12.0658 41.3283 11.8493 40.9689 11.6987C40.6 11.5387 40.2121 11.4634 39.7959 11.4634C39.3797 11.4634 38.9919 11.5387 38.6229 11.6987C38.254 11.8587 37.9324 12.0752 37.6675 12.3387C37.3932 12.6117 37.1756 12.9317 37.0243 13.2893C36.8635 13.6564 36.7878 14.0423 36.7878 14.4564Z" fill="white"/>
 <path d="M59.7649 21.6188V7.30347H63.7568C65.1095 7.30347 66.3108 7.45405 67.3703 7.75523C68.4298 8.05641 69.319 8.50817 70.0473 9.11053C70.7757 9.71288 71.3244 10.4564 71.7122 11.3505C72.0906 12.2446 72.2798 13.2799 72.2798 14.447C72.2798 15.6141 72.0906 16.6493 71.7122 17.5435C71.3338 18.4376 70.7757 19.1811 70.0473 19.7835C69.319 20.3858 68.4298 20.8376 67.3703 21.1482C66.3108 21.4588 65.1095 21.6093 63.7568 21.6093H59.7649V21.6188ZM61.9216 19.8964H63.7568C65.8568 19.8964 67.4365 19.4164 68.5149 18.4658C69.5838 17.5152 70.123 16.1693 70.123 14.447C70.123 12.7246 69.5838 11.3788 68.5149 10.4376C67.446 9.49641 65.8568 9.02582 63.7568 9.02582H61.9216V19.9058V19.8964ZM62.4892 19.3788V9.53405H63.7568C65.5825 9.53405 67.0014 9.94817 68.0135 10.767C69.0257 11.5858 69.5365 12.8188 69.5365 14.447C69.5365 16.0752 69.0257 17.3082 68.0135 18.1364C67.0014 18.9646 65.5825 19.3788 63.7568 19.3788H62.4892ZM64.3622 17.5341C65.4406 17.5341 66.273 17.2799 66.8595 16.7717C67.446 16.2635 67.7392 15.4917 67.7392 14.447C67.7392 13.4023 67.446 12.6305 66.8595 12.1317C66.273 11.6329 65.4406 11.3788 64.3622 11.3788V17.5341Z" fill="white"/>
 <path d="M90.5176 7.30347H93.9703L99.4284 21.6188H85.0689L90.527 7.30347H90.5176ZM88.2567 19.9152L92.2392 9.53405L96.1932 19.9152H88.2662H88.2567ZM96.4392 20.6023L96.8081 21.6188H97.4135L96.3824 18.7858L92.6459 9.02582H91.823L88.077 18.8235L86.9892 21.6282H87.5946L87.9919 20.6117L88.0676 20.4141H96.3635L96.4297 20.6117L96.4392 20.6023ZM93.7338 18.5317L92.2392 14.6635L90.8297 18.5317H93.7338Z" fill="white"/>
 <path d="M104.877 27.9812V53.1294H79.6014V27.9812H104.877ZM105.823 27.04H78.6555V54.0706H105.823V27.04Z" fill="white"/>
 <path d="M131.108 27.9812V53.1294H105.832V27.9812H131.108ZM132.054 27.04H104.886V54.0706H132.054V27.04Z" fill="white"/>
 <path d="M78.6649 27.9812V53.1294H53.3892V27.9812H78.6649ZM79.6108 27.04H52.4432V54.0706H79.6108V27.04Z" fill="white"/>
 <path d="M95.4176 44.3481H89.4581L87.9067 47.7081H85.6459L92.5324 32.9976L99.173 47.7081H96.8743L95.4176 44.3481ZM94.5662 42.3811L92.504 37.6752L90.3378 42.3811H94.5662Z" fill="white"/>
 <path d="M114.251 47.2848V33.4495H116.342C117.269 33.4495 118.016 33.5248 118.565 33.6659C119.123 33.8071 119.596 34.0518 119.984 34.3906C120.372 34.7389 120.684 35.1812 120.911 35.7083C121.147 36.2448 121.261 36.7812 121.261 37.3177C121.261 38.3059 120.882 39.153 120.116 39.8401C120.854 40.0942 121.441 40.5271 121.866 41.1577C122.301 41.7789 122.519 42.5036 122.519 43.3224C122.519 44.4048 122.131 45.3177 121.365 46.0612C120.901 46.5224 120.381 46.8424 119.804 47.0212C119.17 47.1906 118.385 47.2848 117.439 47.2848H114.261H114.251ZM116.351 39.3883H117.014C117.799 39.3883 118.366 39.2189 118.726 38.8706C119.085 38.5224 119.274 38.0236 119.274 37.3553C119.274 36.6871 119.085 36.2071 118.716 35.8683C118.347 35.5295 117.799 35.36 117.099 35.36H116.361V39.3883H116.351ZM116.351 45.3177H117.647C118.593 45.3177 119.293 45.1295 119.738 44.7624C120.211 44.3577 120.438 43.8589 120.438 43.2377C120.438 42.6165 120.211 42.1365 119.766 41.7318C119.331 41.3271 118.546 41.1295 117.411 41.1295H116.351V45.3177Z" fill="white"/>
 <path d="M65.1946 33.4307V45.3083H69.2811V47.2754H63.0946V33.4401H65.1946V33.4307Z" fill="white"/>
 </svg>
--- a/src/images/project-1.jpg
+++ b/src/images/project-1.jpg
--- a/src/images/project-1.png
+++ b/src/images/project-1.png
--- a/src/images/project-10.png
+++ b/src/images/project-10.png
--- a/src/images/project-11.png
+++ b/src/images/project-11.png
--- a/src/images/project-12.png
+++ b/src/images/project-12.png
--- a/src/images/project-13.png
+++ b/src/images/project-13.png
--- a/src/images/project-2.jpg
+++ b/src/images/project-2.jpg
--- a/src/images/project-2.png
+++ b/src/images/project-2.png
--- a/src/images/project-3.jpg
+++ b/src/images/project-3.jpg
--- a/src/images/project-3.png
+++ b/src/images/project-3.png
--- a/src/images/project-4.jpg
+++ b/src/images/project-4.jpg
--- a/src/images/project-4.png
+++ b/src/images/project-4.png
--- a/src/images/project-5.jpg
+++ b/src/images/project-5.jpg
--- a/src/images/project-5.png
+++ b/src/images/project-5.png
--- a/src/images/project-6.jpg
+++ b/src/images/project-6.jpg
--- a/src/images/project-6.png
+++ b/src/images/project-6.png
--- a/src/images/project-7.jpg
+++ b/src/images/project-7.jpg
--- a/src/images/project-7.png
+++ b/src/images/project-7.png
--- a/src/images/project-8.jpg
+++ b/src/images/project-8.jpg
--- a/src/images/project-8.png
+++ b/src/images/project-8.png
--- a/src/images/project-9.png
+++ b/src/images/project-9.png
--- a/src/index.html
+++ b/src/index.html
@ -14,8 +14,7 @@
    <header class="gnb" id="gnb">
      <div class="gnb__inner">
        <a href="#intro" class="gnb__logo">
-          <img class="gnb__logoImg gnb__logoImg--desktop" src="images/logo.png" alt="BODA LAB" />
+          <img class="gnb__logoImg" src="images/logo.svg" alt="BODA LAB" />
          <img class="gnb__logoImg gnb__logoImg--mobile" src="images/logo-mobile.png" alt="BODA LAB" />
        </a>
        <nav class="gnb__nav">
          <ul class="gnb__navList">
@ -33,22 +32,22 @@
          <span class="gnb__hamburgerLine"></span>
        </button>
      </div>
      <!-- 모바일 메뉴 -->
      <nav class="gnb__mobileNav">
        <button class="gnb__mobileNavClose" aria-label="메뉴 닫기">
          <span class="gnb__mobileNavCloseLine"></span>
          <span class="gnb__mobileNavCloseLine"></span>
        </button>
        <ul class="gnb__mobileNavList">
          <li class="gnb__mobileNavItem"><a class="gnb__mobileNavLink isActive" href="#intro">HOME</a></li>
          <li class="gnb__mobileNavItem"><a class="gnb__mobileNavLink" href="#about">ABOUT US</a></li>
          <li class="gnb__mobileNavItem"><a class="gnb__mobileNavLink" href="#history">HISTORY</a></li>
          <li class="gnb__mobileNavItem"><a class="gnb__mobileNavLink" href="#vision">VISION</a></li>
          <li class="gnb__mobileNavItem"><a class="gnb__mobileNavLink" href="#project">PROJECTS</a></li>
          <li class="gnb__mobileNavItem"><a class="gnb__mobileNavLink" href="#contact">CONTACT US</a></li>
        </ul>
      </nav>
    </header>
    <!-- 모바일 메뉴 — header 밖에 위치해야 backdrop-filter containing block 이슈 방지 -->
    <nav class="gnb__mobileNav">
      <button class="gnb__mobileNavClose" aria-label="메뉴 닫기">
        <span class="gnb__mobileNavCloseLine"></span>
        <span class="gnb__mobileNavCloseLine"></span>
      </button>
      <ul class="gnb__mobileNavList">
        <li class="gnb__mobileNavItem"><a class="gnb__mobileNavLink isActive" href="#intro">HOME</a></li>
        <li class="gnb__mobileNavItem"><a class="gnb__mobileNavLink" href="#about">ABOUT US</a></li>
        <li class="gnb__mobileNavItem"><a class="gnb__mobileNavLink" href="#history">HISTORY</a></li>
        <li class="gnb__mobileNavItem"><a class="gnb__mobileNavLink" href="#vision">VISION</a></li>
        <li class="gnb__mobileNavItem"><a class="gnb__mobileNavLink" href="#project">PROJECTS</a></li>
        <li class="gnb__mobileNavItem"><a class="gnb__mobileNavLink" href="#contact">CONTACT US</a></li>
      </ul>
    </nav>
    <main>
      <!-- 01. INTRO -->
@ -79,7 +78,7 @@
            </p>
            <div class="about__quote">
              <span class="about__quoteMark" aria-hidden="true">“</span>
-              <p class="about__quoteText">Creative Development<br class="divide mobile" />Company <br class="divide pc" />BODA.Lab</p>
+              <p class="about__quoteText">Creative Development Company<br />BODA.Lab</p>
            </div>
          </div>
          <ul class="about__expertiseList">
@ -311,10 +310,9 @@
        <div class="project__inner">
          <h2 class="sectionTitle project__heading">PROJECT</h2>
          <div class="project__grid">
            <div class="project__row">
            <article class="project__card">
              <div class="project__thumb">
-                <img class="project__thumbImg" src="images/project-1.png" alt="신한유니버설앱 구축" />
+                <img class="project__thumbImg" src="images/project-1.jpg" alt="신한유니버설앱 구축" />
              </div>
              <div class="project__info">
                <h3 class="project__name">신한유니버설앱 구축</h3>
@ -329,7 +327,7 @@
            </article>
            <article class="project__card">
              <div class="project__thumb">
-                <img class="project__thumbImg" src="images/project-2.png" alt="SK그룹 공식앱 내부 모바일" />
+                <img class="project__thumbImg" src="images/project-2.jpg" alt="SK그룹 공식앱 내부 모바일" />
              </div>
              <div class="project__info">
                <h3 class="project__name">SK그룹 공식앱 내부 모바일</h3>
@ -341,11 +339,9 @@
                </div>
              </div>
            </article>
            </div>
            <div class="project__row">
            <article class="project__card">
              <div class="project__thumb">
-                <img class="project__thumbImg" src="images/project-3.png" alt="PNS네트웍스 디지털 플랫폼 구축" />
+                <img class="project__thumbImg" src="images/project-3.jpg" alt="PNS네트웍스 디지털 플랫폼 구축" />
              </div>
              <div class="project__info">
                <h3 class="project__name">PNS네트웍스 디지털 플랫폼 구축</h3>
@ -359,7 +355,7 @@
            </article>
            <article class="project__card">
              <div class="project__thumb">
-                <img class="project__thumbImg" src="images/project-4.png" alt="롯데렌터카 차세대" />
+                <img class="project__thumbImg" src="images/project-4.jpg" alt="롯데렌터카 차세대" />
              </div>
              <div class="project__info">
                <h3 class="project__name">롯데렌터카 차세대</h3>
@ -370,11 +366,9 @@
                </div>
              </div>
            </article>
            </div>
            <div class="project__row">
            <article class="project__card">
              <div class="project__thumb">
-                <img class="project__thumbImg" src="images/project-5.png" alt="오뚜기 쇼핑몰 구축" />
+                <img class="project__thumbImg" src="images/project-5.jpg" alt="오뚜기 쇼핑몰 구축" />
              </div>
              <div class="project__info">
                <h3 class="project__name">오뚜기 쇼핑몰 구축</h3>
@ -389,7 +383,7 @@
            </article>
            <article class="project__card">
              <div class="project__thumb">
-                <img class="project__thumbImg" src="images/project-6.png" alt="캐나다구스 구축" />
+                <img class="project__thumbImg" src="images/project-6.jpg" alt="캐나다구스 구축" />
              </div>
              <div class="project__info">
                <h3 class="project__name">캐나다구스 구축</h3>
@ -401,11 +395,9 @@
                </div>
              </div>
            </article>
            </div>
            <div class="project__row">
            <article class="project__card">
              <div class="project__thumb">
-                <img class="project__thumbImg" src="images/project-7.png" alt="한옥홈페이지 서버 이관" />
+                <img class="project__thumbImg" src="images/project-7.jpg" alt="한옥홈페이지 서버 이관" />
              </div>
              <div class="project__info">
                <h3 class="project__name">한옥홈페이지 서버 이관</h3>
@ -421,7 +413,7 @@
            </article>
            <article class="project__card">
              <div class="project__thumb">
-                <img class="project__thumbImg" src="images/project-8.png" alt="그린카 차세대" />
+                <img class="project__thumbImg" src="images/project-8.jpg" alt="그린카 차세대" />
              </div>
              <div class="project__info">
                <h3 class="project__name">그린카 차세대</h3>
@ -435,12 +427,8 @@
                </div>
              </div>
            </article>
            </div>
            <div class="project__row">
            <article class="project__card">
-              <div class="project__thumb">
+              <div class="project__thumb project__thumbEmpty"></div>
                <img class="project__thumbImg" src="images/project-9.png" alt="그린카 차세대" />
              </div>
              <div class="project__info">
                <h3 class="project__name">프로스펙스 구축</h3>
                <p class="project__company">(주)LS네트웍스</p>
@ -452,10 +440,7 @@
              </div>
            </article>
            <article class="project__card">
-              <div class="project__thumb">
+              <div class="project__thumb project__thumbEmpty"></div>
                <img class="project__thumbImg" src="images/project-10.png" alt="그린카 차세대" />
              </div>
              <div class="project__info">
                <h3 class="project__name">중소기업창업</h3>
                <p class="project__company">중소벤처기업부</p>
@ -466,13 +451,8 @@
                </div>
              </div>
            </article>
-            </div>
+            <article class="project__card">
-            <div class="project__row">
+              <div class="project__thumb project__thumbEmpty"></div>
            <article class="project__card" hidden>
              <div class="project__thumb">
                <img class="project__thumbImg" src="images/project-11.png" alt="그린카 차세대" />
              </div>
              <div class="project__info">
                <h3 class="project__name">롯데 GA2ck 구축 프로젝트 (롯데 렌터카)</h3>
                <p class="project__company">롯데</p>
@ -484,11 +464,8 @@
                </div>
              </div>
            </article>
-            <article class="project__card" hidden>
+            <article class="project__card">
-              <div class="project__thumb">
+              <div class="project__thumb project__thumbEmpty"></div>
                <img class="project__thumbImg" src="images/project-12.png" alt="그린카 차세대" />
              </div>
              <div class="project__info">
                <h3 class="project__name">
                    (주)국민은행_KB국민은행
@ -504,13 +481,8 @@
                </div>
              </div>
            </article>
-            </div>
+            <article class="project__card">
-            <div class="project__row project__row--single">
+              <div class="project__thumb project__thumbEmpty"></div>
            <article class="project__card" hidden>
              <div class="project__thumb">
                <img class="project__thumbImg" src="images/project-13.png" alt="그린카 차세대" />
              </div>
              <div class="project__info">
                <h3 class="project__name">코나아이 PC</h3>
                <p class="project__company">코나아이</p>
@ -520,10 +492,9 @@
                </div>
              </div>
            </article>
            </div>
          </div>
          <div class="project__more">
-            <a href="#" class="btnMore">+ MORE</a>
+            <a href="#" class="btnMore">+ VIEW MORE</a>
          </div>
        </div>
      </section>
@ -534,7 +505,7 @@
          <h2 class="contact__heading">WELCOME BODA LAB</h2>
          <p class="contact__desc">
            The BODA LAB은 서비스와 사용자를 고려하여 다양한 경험을 제공하며,
-            <br class="divide" />
+            <br />
            거쳐간 모든 곳에서 지속적인 성장이 이루어질 수 있도록 함께합니다.
          </p>
          <address class="contact__office">
@ -542,7 +513,7 @@
            <dl class="contact__infoList">
              <div class="contact__infoItem">
                <dt class="contact__infoLabel">Address</dt>
-                <dd class="contact__infoValue"><a href="https://map.naver.com/p/search/%EC%84%9C%EC%9A%B8%EC%8B%9C%20%EA%B0%95%EC%84%9C%EA%B5%AC%20%EB%A7%88%EA%B3%A1%EC%A4%91%EC%95%99%EB%A1%9C%20161-8%2C%20%EB%91%90%EC%82%B0%EB%8D%94%EB%9E%9C%EB%93%9C%ED%8C%8C%ED%81%AC%20C%EB%8F%99%20618%ED%98%B8/address/3zblcS,2AM96G,%EC%84%9C%EC%9A%B8%ED%8A%B9%EB%B3%84%EC%8B%9C%20%EA%B0%95%EC%84%9C%EA%B5%AC%20%EB%A7%88%EA%B3%A1%EC%A4%91%EC%95%99%EB%A1%9C%20161-8?c=15.00,0,0,0,dh&isCorrectAnswer=true" target="_blank">서울시 강서구 마곡중앙로 161-8, 두산더랜드파크 C동 618호</a></dd>
+                <dd class="contact__infoValue">서울시 강서구 마곡중앙로 161-8, 두산더랜드파크 C동 618호</dd>
              </div>
              <div class="contact__infoItem">
                <dt class="contact__infoLabel">e-mail</dt>
@ -552,7 +523,7 @@
              </div>
              <div class="contact__infoItem">
                <dt class="contact__infoLabel">tel</dt>
-                <dd class="contact__infoValue"><a href="tel:010-4169-4728">010-4169-4728</a></dd>
+                <dd class="contact__infoValue">010-4169-4728</dd>
              </div>
            </dl>
          </address>
@ -565,7 +536,7 @@
              <img class="contactAccordion__icon" src="images/icon-chevron.svg" alt="" />
            </button>
            <div class="contactAccordion__body" id="acc-project-body">
-              <form class="contactForm">
+              <form class="contactForm" onsubmit="return false;">
                <div class="contactForm__cols">
                  <div class="contactForm__fields">
                    <input type="text" class="contactForm__input" placeholder="회사명*" />
@ -579,7 +550,7 @@
                  <label class="contactForm__checkbox">
                    <input class="contactForm__checkboxInput" type="checkbox" />
                    <span class="contactForm__checkboxBox"></span>
-                    <button type="button" class="contactForm__termsTrigger" data-modal-open="privacyModal">[필수] 개인정보 수집 및 이용 동의</button>
+                    <span>[필수] 개인정보 수집 및 이용 동의</span>
                  </label>
                </div>
                <div class="contactForm__submit">
@ -590,32 +561,32 @@
          </div>
          <!-- Recruitment -->
-          <div class="contactAccordion__item isOpen" id="acc-career">
+          <div class="contactAccordion__item" id="acc-career">
-            <button class="contactAccordion__header" aria-expanded="true" aria-controls="acc-career-body">
+            <button class="contactAccordion__header" aria-expanded="false" aria-controls="acc-career-body">
              <span>Recruitment</span>
              <img class="contactAccordion__icon" src="images/icon-chevron.svg" alt="" />
            </button>
-            <div class="contactAccordion__body" id="acc-career-body">
+            <div class="contactAccordion__body" id="acc-career-body" hidden>
              <div class="careerTags">
-                <a href="#" target="_blank" class="careerTag">
+                <a href="#" class="careerTag">
                  Planner &amp; Consulting
                  <svg class="careerTag__icon" viewBox="0 0 16 16" fill="none">
                    <path d="M4 12L12 4M12 4H6M12 4V10" stroke="currentColor" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round" />
                  </svg>
                </a>
-                <a href="#" target="_blank" class="careerTag">
+                <a href="#" class="careerTag">
                  Designer
                  <svg class="careerTag__icon" viewBox="0 0 16 16" fill="none">
                    <path d="M4 12L12 4M12 4H6M12 4V10" stroke="currentColor" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round" />
                  </svg>
                </a>
-                <a href="#" target="_blank" class="careerTag">
+                <a href="#" class="careerTag">
                  Publisher
                  <svg class="careerTag__icon" viewBox="0 0 16 16" fill="none">
                    <path d="M4 12L12 4M12 4H6M12 4V10" stroke="currentColor" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round" />
                  </svg>
                </a>
-                <a href="#" target="_blank" class="careerTag">
+                <a href="#" class="careerTag">
                  Scripter
                  <svg class="careerTag__icon" viewBox="0 0 16 16" fill="none">
                    <path d="M4 12L12 4M12 4H6M12 4V10" stroke="currentColor" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round" />
@ -626,60 +597,23 @@
          </div>
        </div>
-        <!-- 개인정보 수집·이용 동의 모달 -->
+        <footer class="footer">
-        <div class="privacyModal" id="privacyModal" hidden>
+          <div class="footer__inner">
-          <div class="privacyModal__overlay" data-modal-close></div>
+            <p class="footer__brand">
-          <div class="privacyModal__panel" role="dialog" aria-modal="true" aria-labelledby="privacyModalTitle">
+              THE
-            <div class="privacyModal__head">
+              <br />
-              <h3 id="privacyModalTitle" class="privacyModal__title">개인정보 수집 및 이용 동의</h3>
+              BODA LAB
-              <button type="button" class="privacyModal__close" data-modal-close aria-label="닫기">
+            </p>
-                <span class="privacyModal__closeLine"></span>
+            <p class="footer__contact">
-                <span class="privacyModal__closeLine"></span>
+              <strong class="footer__contactLabel">Mail</strong>
-              </button>
+              <a class="footer__contactLink" href="mailto:koji@bodalab.co.kr">koji@bodalab.co.kr</a>
-            </div>
+              &nbsp;&nbsp;<strong class="footer__contactLabel">Tel</strong>
-            <div class="privacyModal__body">
+              <a class="footer__contactLink" href="tel:010-4169-4728">010-4169-4728</a>
-              <p>1. 개인정보의 수집 및 이용 목적 회사는 고객 문의에 대한 답변 제공 및 원활한 의사소통 경로 확보를 목적으로 개인정보를 수집 및 이용합니다.</p>
+            </p>
-              <p>
+            <p class="footer__copy">© 2026 BODA LAB</p>
                2. 수집하는 개인정보의 항목
                <ul>
                  <li>필수항목: 회사명, 담당자 이름, 연락처, 이메일</li>
                </ul>
              </p>
              <p>
                3. 개인정보의 보유 및 이용 기간 원칙적으로 개인정보 수집 및 이용목적이 달성된 후에는 해당 정보를 지체 없이 파기합니다. 단, 관계법령의 규정에 의하여 보존할 필요가 있는 경우 아래와 같이 관계법령에서 정한 일정 기간 동안 개인정보를 보존합니다.
                <ul>
                  <li>소비자의 불만 또는 분쟁처리에 관한 기록: 3년 (전자상거래등에서의 소비자보호에 관한 법률)</li>
                  <li>기타 문의 사항: 문의 접수 및 처리 완료 후 6개월 (또는 1년)</li>
                </ul>
              </p>
              <p>4. 동의를 거부할 권리 및 동의 거부에 따른 불이익 귀하는 본 개인정보 수집 및 이용 동의를 거부할 권리가 있습니다. 다만, 동의를 거부하시는 경우 문의 접수 및 답변 서비스 이용이 제한될 수 있습니다.</p>
            </div>
            <label class="contactForm__checkbox">
              <input class="contactForm__checkboxInput" id="privacyModalAgree" type="checkbox" />
              <span class="contactForm__checkboxBox"></span>
              <span>동의합니다.</span>
            </label>
          </div>
-        </div>
+        </footer>
      </section>
      <footer class="footer">
        <div class="footer__inner">
          <p class="footer__brand">
            THE
            <br />
            BODA LAB
          </p>
          <p class="footer__contact">
            <strong class="footer__contactLabel">Mail</strong>
            <a class="footer__contactLink" href="mailto:koji@bodalab.co.kr">koji@bodalab.co.kr</a>
            <br class="footer__contactBreak" /><span class="footer__contactGap">&nbsp;&nbsp;&nbsp;&nbsp;</span><strong class="footer__contactLabel">Tel</strong>
            <a class="footer__contactLink" href="tel:010-4169-4728">010-4169-4728</a>
          </p>
          <p class="footer__copy">© 2026 BODA LAB</p>
        </div>
      </footer>
    </main>
  </body>
 </html>
--- a/src/js/main.js
+++ b/src/js/main.js
@ -1,19 +1,10 @@
 import $ from "jquery";
 import { gsap } from "gsap";
 import { ScrollTrigger } from "gsap/ScrollTrigger";
 import Lenis from "lenis";
 import { initIntroAnimation } from "./introAnimation.js";
 gsap.registerPlugin(ScrollTrigger);
 // 스무스 스크롤 (Lenis) ↔ ScrollTrigger 연동
 const lenis = new Lenis();
 lenis.on("scroll", ScrollTrigger.update);
 gsap.ticker.add((time) => {
  lenis.raf(time * 1000);
 });
 gsap.ticker.lagSmoothing(0);
 $(function () {
  initIntroAnimation();
  const $gnb = $("#gnb");
@ -39,10 +30,8 @@ $(function () {
  });
  // 현재 섹션에 따라 GNB 활성화
-  const $navLinks = $(".gnb__navLink, .gnb__mobileNavLink");
+  const $navLinks = $(".gnb__navLink");
  const sections = $("section[id]").toArray();
  // 흰 배경 섹션 — 이 구간에서는 GNB를 다크 텍스트로 전환(흰 텍스트가 흰 배경에 묻히는 것 방지)
  const lightSections = ["history", "contact"];
  function setActiveNav(navId) {
    $navLinks.each(function () {
@ -62,8 +51,6 @@ $(function () {
    });
    setActiveNav(current);
    $gnb.toggleClass("isLight", lightSections.includes(current));
    $gnb.toggleClass("isPastHome", current !== "intro");
  }
  ScrollTrigger.create({
@ -75,47 +62,31 @@ $(function () {
  updateActiveNav();
-  // 섹션 이동 링크 클릭 시 Lenis로 부드럽게 스크롤
+  // 햄버거 메뉴
-  $(".gnb__navLink, .gnb__mobileNavLink, .scrollDown").on("click", function (e) {
+  $hamburger.on("click", function () {
-    e.preventDefault();
+    const isOpen = $hamburger.toggleClass("isOpen").hasClass("isOpen");
-    lenis.scrollTo($(this).attr("href"));
+    $hamburger.attr("aria-expanded", isOpen);
-  });
+    $mobileNav.toggleClass("isOpen", isOpen);
  // 로고 클릭: 모바일에선 메뉴 토글, 데스크탑에선 intro로 스크롤
  $(".gnb__logo").on("click", function (e) {
    e.preventDefault();
    if (window.matchMedia("(max-width: 768px)").matches) {
      $mobileNav.toggleClass("isOpen");
    } else {
      lenis.scrollTo($(this).attr("href"));
    }
  });
  // 모바일 메뉴 링크 클릭 시 닫기
  $(".gnb__mobileNavLink").on("click", function () {
    $hamburger.removeClass("isOpen").attr("aria-expanded", false);
    $mobileNav.removeClass("isOpen");
  });
  // 모바일 메뉴 닫기 버튼
  $mobileNavClose.on("click", function () {
    $hamburger.removeClass("isOpen").attr("aria-expanded", false);
    $mobileNav.removeClass("isOpen");
  });
-  // History 아코디언 (단일 열림 — 한 그룹을 열면 나머지는 닫힘)
+  // History 아코디언
  $(".history__yearToggle").on("click", function () {
    const $group = $(this).closest(".history__yearGroup");
    const $list = $("#" + $(this).attr("aria-controls"));
    const isOpen = $group.hasClass("isOpen");
    $(".history__yearGroup")
      .not($group)
      .each(function () {
        const $otherToggle = $(this).find(".history__yearToggle");
        $(this).removeClass("isOpen");
        $otherToggle.attr("aria-expanded", false);
        $("#" + $otherToggle.attr("aria-controls")).attr("hidden", "");
      });
    $group.toggleClass("isOpen", !isOpen);
    $(this).attr("aria-expanded", !isOpen);
@ -126,57 +97,6 @@ $(function () {
    }
  });
  // PROJECT 더보기 (처음 10개 노출, 클릭 시 나머지 노출)
  $(".btnMore").on("click", function (e) {
    e.preventDefault();
    $(".project__card[hidden]").removeAttr("hidden");
    $(this).closest(".project__more").hide();
  });
  // 개인정보 수집·이용 동의 모달
  $("[data-modal-open]").on("click", function () {
    $("#" + $(this).data("modal-open")).removeAttr("hidden");
  });
  $("[data-modal-close]").on("click", function () {
    $(this).closest(".privacyModal").attr("hidden", "");
  });
  // 모달 안의 동의 체크박스를 체크하면 문의 폼의 동의 체크박스도 같이 체크되고, 모달은 닫힘
  $("#privacyModalAgree").on("change", function () {
    $(".contactForm__checkboxInput").not(this).prop("checked", this.checked);
    if (this.checked) {
      $(this).closest(".privacyModal").attr("hidden", "");
    }
  });
  $(document).on("keydown", function (e) {
    if (e.key === "Escape") {
      $(".privacyModal:not([hidden])").attr("hidden", "");
    }
  });
  // SEND 유효성 검증
  $(".contactForm").on("submit", function (e) {
    e.preventDefault();
    const $form = $(this);
    let isValid = true;
    $form.find(".contactForm__input").each(function () {
      if (!$(this).val().trim()) isValid = false;
    });
    if (!$form.find(".contactForm__checkboxInput").prop("checked")) isValid = false;
    if (!isValid) {
      alert("필수 항목을 확인해 주세요");
      return;
    }
    alert("전송 완료");
    $form.trigger("reset");
  });
  // Contact 아코디언
  $(".contactAccordion__header").on("click", function () {
    const $item = $(this).closest(".contactAccordion__item");
--- a/src/scss/base/_reset.scss
+++ b/src/scss/base/_reset.scss
@ -10,6 +10,7 @@
 }
 html {
  scroll-behavior: smooth;
  font-size: 16px;
 }
--- a/src/scss/index.scss
+++ b/src/scss/index.scss
@ -12,11 +12,10 @@
@use "page/vision";
@use "page/project";
@use "page/contact";
@use "page/footer";
 .sectionTitle {
  font-family: $기본글꼴;
-  font-size: clamp(30px, 3vw, 48px);
+  font-size: clamp(28px, 3vw, 48px);
  font-weight: 600;
  letter-spacing: 0.02em;
  color: #ffffff;
@ -60,6 +59,8 @@
@include mo {
  .scrollDown {
-    bottom: 20px;
+    width: 52px;
    height: 52px;
    bottom: 24px;
  }
 }
--- a/src/scss/page/_about.scss
+++ b/src/scss/page/_about.scss
@ -37,7 +37,7 @@
 .about__desc {
  margin: 0 0 70px;
-  font-size: 14px;
+  font-size: clamp(13px, 1.1vw, 16px);
  font-weight: 300;
  line-height: 150%;
  color: #ffffff;
@ -52,29 +52,17 @@
 }
 .about__quoteMark {
-  font-size: clamp(86px, 7.6vw, 146px);
+  font-size: clamp(60px, 7.6vw, 146px);
  font-weight: 600;
  line-height: 1;
  color: #ffffff;
 }
 .about__quoteText {
-  font-size: clamp(30px, 2.4vw, 46px);
+  font-size: clamp(22px, 2.4vw, 46px);
  font-weight: 100;
  line-height: 1.2;
  color: #ffffff;
  &.divide {
    display: none;
    &.mobile {
      display: none;
    }
    &.pc {
      display: block;
    }
  }
 }
 .about__expertiseList {
@ -91,7 +79,7 @@
  gap: 8px;
  .num {
-    font-size: 16px;
+    font-size: clamp(14px, 0.85vw, 16px);
    font-weight: 800;
    color: #7796ff;
  }
@ -105,7 +93,7 @@
  }
  .text {
-    font-size: 14px;
+    font-size: clamp(12px, 0.75vw, 14px);
    font-weight: 300;
    color: #ffffff;
  }
@ -123,7 +111,7 @@
  top: 0;
  left: 0;
  bottom: 0;
-  width: clamp(220px, 47vw, 900px);
+  width: clamp(220px, 34vw, 500px);
  .img {
    position: sticky;
@ -134,16 +122,15 @@
 }
 .history__title {
-  position: absolute;
+  position: sticky;
-  top: 120px;
+  top: 180px;
-  left: clamp(24px, 6vw, 120px);
+  margin-left: clamp(24px, 6vw, 120px);
  z-index: 1;
  color: #ffffff;
 }
 .history__timeline {
-  margin-left: clamp(220px, 38vw, 726px);
+  margin-left: clamp(220px, 34vw, 500px);
  border-bottom: 1px solid #000;
 }
 .history__yearGroup {
@ -167,7 +154,7 @@
 .history__yearToggle {
  position: relative;
  display: flex;
-  align-items: center;
+  align-items: flex-start;
  gap: 24px;
  width: 100%;
  padding: 30px 100px 30px 0;
@ -183,12 +170,6 @@
  .history__listItem {
    flex: 1;
    .main {
      .badge {
        margin: 6px 0 0 5px;
      }
    }
  }
  .icon {
@ -269,13 +250,14 @@
  .badge {
    display: inline-block;
    vertical-align: top;
-    margin: 3px 0 0 5px;
+    margin-left: 5px;
    padding: 2px 8px;
-    font-size: 8px;
+    font-size: 10px;
    font-weight: 700;
    color: #0071f2;
    border: 1px solid #0071f2;
    border-radius: 4px;
    vertical-align: middle;
  }
  .sub {
@ -297,50 +279,18 @@
  .about {
    height: auto;
    min-height: auto;
-    padding: calc(#{$gnb-height-mo} + 40px) 20px 80px;
+    padding: calc(#{$gnb-height-mo} + 40px) 24px 60px;
  }
  .about__inner {
    gap: 160px;
  }
  .about__head .sectionTitle {
    margin-bottom: 30px;
  }
  .about__desc {
    margin-bottom: 120px;
  }
  .about__quote {
-    position: relative;
+    flex-direction: column;
-    display: block;
+    align-items: flex-start;
-    padding: 0 0 0 30px;
+    gap: 4px;
  }
  .about__quoteMark {
    margin-top: -0.34em;
    position: absolute;
    top: 0;
    left: 0;
  }
  .about__quoteText {
    .divide {
      &.mobile {
        display: block;
      }
      &.pc {
        display: none;
      }
    }
  }
  .about__expertiseList {
    flex-direction: column;
-    gap: 64px;
+    gap: 32px;
    padding: 0 30px;
  }
  .breakLine {
@ -348,12 +298,12 @@
  }
  .history {
-    padding: 80px 20px;
+    padding: 60px 24px;
  }
-  .history__title.sectionTitle {
+  .history__title {
    position: static;
-    margin-bottom: 40px;
+    margin-bottom: 32px;
    color: #0d0d0d;
  }
@ -366,50 +316,15 @@
  }
  .history__yearToggle {
-    display: block;
+    flex-wrap: wrap;
    .history__year {
      display: block;
      margin: 0 0 10px;
    }
    .icon {
      top: 30px;
      transform: none;
    }
    .history__listItem {
      .main {
        .badge {
          margin: 3px 0 0 5px;
        }
      }
    }
  }
  .history__list {
    margin-left: 0;
    margin-right: 30px;
  }
  .history__listItem {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    .sub {
      font-size: 12px;
    }
    .date {
      display: none;
    }
  }
  .history__listItem {
    .badge {
      padding: 3px 4px;
      margin: 0 0 0 5px;
    }
  }
 }
--- a/src/scss/page/_contact.scss
+++ b/src/scss/page/_contact.scss
@ -8,16 +8,18 @@
  display: flex;
  flex-direction: column;
  border-top: 1px solid rgba(13, 13, 13, 0.08);
  padding: clamp(80px, 6.25vw, 120px) clamp(24px, 6.25vw, 120px) 0;
 }
 .contact__inner {
-  margin-bottom: 88px;
+  max-width: 1200px;
  margin: 0 auto;
  width: 100%;
  padding: 100px 48px 64px;
 }
 .contact__heading {
  font-family: $기본글꼴;
-  font-size: clamp(30px, 3vw, 48px);
+  font-size: clamp(28px, 3vw, 40px);
  font-weight: 600;
  letter-spacing: 0.02em;
  color: #0d0d0d;
@ -25,17 +27,19 @@
 }
 .contact__desc {
-  margin-top: 60px;
+  margin-top: 20px;
-  margin-bottom: 120px;
+  margin-bottom: 48px;
-  font-size: 14px;
+  font-size: 15px;
  font-weight: 300;
-  color: #0d0d0d;
+  color: rgba(13, 13, 13, 0.6);
 }
 .contact__label {
-  font-size: 32px;
+  font-size: 12px;
-  font-weight: 400;
+  font-weight: 600;
-  color: #0d0d0d;
+  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(13, 13, 13, 0.5);
  margin-bottom: 20px;
 }
@ -52,17 +56,17 @@
 }
 .contact__infoLabel {
-  font-size: 18px;
+  font-size: 12px;
-  font-weight: 700;
+  font-weight: 600;
  letter-spacing: 0.08em;
  color: #7796ff;
 }
 .contact__infoValue {
-  font-size: 16px;
+  font-size: 14px;
  font-weight: 300;
-  line-height: 26px;
+  line-height: 1.7;
-  color: #0d0d0d;
+  color: rgba(13, 13, 13, 0.85);
 }
 .contact__infoLink {
@ -76,7 +80,14 @@
 // Contact accordion
 .contactAccordion {
  max-width: 1200px;
  width: 100%;
  margin: 0 auto;
  border-top: 1px solid rgba(13, 13, 13, 0.08);
 }
 .contactAccordion__item {
  border-bottom: 1px solid rgba(13, 13, 13, 0.08);
 }
 .contactAccordion__header {
@ -84,14 +95,13 @@
  align-items: center;
  justify-content: space-between;
  width: 100%;
-  padding: 0 0 24px;
+  padding: 28px 48px;
  margin: 32px 0 0;
  background: none;
  border: none;
-  border-bottom: 1px solid #0d0d0d;
+  border-bottom: 1px solid rgba(13, 13, 13, 0.08);
  cursor: pointer;
  color: #0d0d0d;
-  font-size: 32px;
+  font-size: clamp(16px, 1.4vw, 20px);
  font-weight: 400;
  font-family: $기본글꼴;
  text-align: left;
@ -132,7 +142,10 @@
 // 문의 폼
 .contactForm {
-  margin: 32px 0 0;
+  padding: 8px 48px 48px;
  display: flex;
  flex-direction: column;
  gap: 12px;
 }
 .contactForm__cols {
@ -151,18 +164,20 @@
 .contactForm__textarea {
  width: 100%;
  background: #ffffff;
-  border: 1px solid #0d0d0d;
+  border: 1px solid rgba(13, 13, 13, 0.2);
  border-radius: 8px;
  color: #0d0d0d;
  font-family: $기본글꼴;
  font-size: 14px;
  font-weight: 300;
-  padding: 16px;
+  padding: 14px 16px;
  outline: none;
  transition: border-color 0.2s;
  &::placeholder {
-    color: #737373;
+    color: rgba(13, 13, 13, 0.35);
  }
  &:focus {
    border-color: rgba(13, 13, 13, 0.4);
  }
 }
@ -173,34 +188,17 @@
 }
 .contactForm__agree {
-  display: flex;
+  margin-top: 4px;
  align-items: center;
  gap: 10px;
  margin-top: 12px;
 }
 .contactForm__termsTrigger {
  background: none;
  border: none;
  padding: 0;
  font-family: $기본글꼴;
  font-size: 16px;
  color: #0d0d0d;
  text-decoration: underline;
  cursor: pointer;
  &:hover {
    color: #7796ff;
  }
 }
 .contactForm__checkbox {
  display: inline-flex;
  align-items: center;
-  gap: 14px;
+  gap: 10px;
  cursor: pointer;
-  font-size: 16px;
+  font-size: 13px;
-  color: #0d0d0d;
+  font-weight: 300;
  color: rgba(13, 13, 13, 0.6);
 }
 .contactForm__checkboxInput {
@ -217,22 +215,19 @@
  display: block;
  width: 10px;
  height: 6px;
-  border-left: 1.5px solid #0d0d0d;
+  border-left: 1.5px solid #ffffff;
-  border-bottom: 1.5px solid #0d0d0d;
+  border-bottom: 1.5px solid #ffffff;
  transform: rotate(-45deg) translateY(-2px);
 }
 .contactForm__checkboxBox {
-  width: 26px;
+  width: 18px;
-  height: 26px;
+  height: 18px;
  border: 1px solid rgba(13, 13, 13, 0.3);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  border: 1px solid #0d0d0d;
  transition:
    background 0.2s,
    border-color 0.2s;
@ -241,18 +236,18 @@
 .contactForm__submit {
  display: flex;
  justify-content: center;
-  margin-top: 24px;
+  margin-top: 8px;
 }
 .btnSend {
-  padding: 16px 32px;
+  padding: 12px 48px;
  background: #7796ff;
  border: none;
  border-radius: 100px;
-  color: #000000;
+  color: #ffffff;
  font-family: $기본글꼴;
-  font-size: 16px;
+  font-size: 14px;
-  font-weight: 400;
+  font-weight: 700;
  letter-spacing: 0.1em;
  cursor: pointer;
  transition: opacity 0.2s;
@ -267,18 +262,18 @@
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
-  margin: 32px 0 0;
+  padding: 8px 48px 48px;
 }
 .careerTag {
  display: inline-flex;
  align-items: center;
-  gap: 10px;
+  gap: 8px;
-  padding: 8px 24px;
+  padding: 10px 20px;
-  border: 1px solid #0d0d0d;
+  border: 1px solid rgba(13, 13, 13, 0.25);
-  border-radius: 40px;
+  border-radius: 100px;
-  font-size: 16px;
+  font-size: 14px;
-  font-weight: 400;
+  font-weight: 300;
  color: #0d0d0d;
  transition:
    border-color 0.2s,
@ -291,206 +286,106 @@
 }
 .careerTag__icon {
-  width: 24px;
+  width: 14px;
-  height: 24px;
+  height: 14px;
  flex-shrink: 0;
 }
-// 개인정보 수집·이용 동의 모달
+// Footer
-.privacyModal {
+.footer {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  &[hidden] {
    display: none;
  }
 }
 .privacyModal__overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
 }
 .privacyModal__panel {
  position: relative;
  z-index: 1;
  max-width: 720px;
  width: 100%;
  max-height: 80vh;
  overflow-y: auto;
  background: #ffffff;
  border-radius: 16px;
  padding: 32px 40px;
  display: flex;
  flex-direction: column;
  gap: 24px;
 }
 .privacyModal__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 24px;
  border-bottom: 1px solid #0d0d0d;
 }
 .privacyModal__title {
  font-family: $기본글꼴;
  font-size: 32px;
  font-weight: 400;
  color: #0d0d0d;
 }
 .privacyModal__close {
  position: relative;
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
 }
 .privacyModal__closeLine {
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 1.5px;
  background: #0d0d0d;
  padding: 32px 48px;
 }
-  &:nth-child(1) {
+.footer__inner {
-    transform: rotate(45deg);
+  display: flex;
-  }
+  align-items: center;
-  &:nth-child(2) {
+  align-items: flex-end;
-    transform: rotate(-45deg);
+  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
 }
 .footer__brand {
  font-size: clamp(18px, 2vw, 28px);
  font-weight: 700;
  letter-spacing: 0.08em;
  color: #fff;
  line-height: 1.2;
  text-transform: uppercase;
 }
 .footer__contact {
  font-size: 13px;
  // font-weight: 300;
  color: #fff;
 }
 .footer__contactLabel {
  font-weight: 700;
 }
 .footer__contactLink {
  color: #fff;
  transition: color 0.2s;
  &:hover {
    color: #0d0d0d;
  }
 }
-.privacyModal__body {
+.footer__copy {
-  padding-bottom: 24px;
+  font-size: 12px;
-  border-bottom: 1px solid #0d0d0d;
+  color: #fff;
-  font-family: $기본글꼴;
+  letter-spacing: 0.03em;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.6;
  color: #0d0d0d;
  p {
    margin-bottom: 12px;
  }
  ul {
    margin-top: 4px;
    padding-left: 1em;
  }
  li {
    list-style: disc;
  }
 }
@include mo {
  // Figma 모바일: 좌우 인셋 20(PC base clamp는 그대로 둠)
  .contact {
    padding-left: 20px;
    padding-right: 20px;
  }
  // Figma 모바일: title→desc 30, desc→Head Office 80 (PC base 60px/120px는 그대로 둠 — PC는 이미 정확히 일치)
  .contact__desc {
    margin-top: 30px;
    margin-bottom: 80px;
    .divide {
      display: none;
    }
  }
  // Figma 모바일: Head Office 블록 → 아코디언 블록 간격 80 (PC base 88px는 그대로 둠)
  .contact__inner {
-    margin-bottom: 0px;
+    padding: 60px 24px 40px;
  }
-  // Figma 공통값(label→list 16)인데 base(20px)가 PC에서도 어긋나 있음 — 모바일만 보정
+  .contact__desc {
-  .contact__label {
+    margin-bottom: 32px;
-    margin-bottom: 16px;
+    font-size: 14px;
  }
  .contact__infoList {
    flex-direction: column;
-    gap: 20px;
+    gap: 24px;
  }
  .contactAccordion__header {
-    margin-top: 60px;
+    padding: 22px 24px;
    padding-top: 22px;
    padding-bottom: 22px;
  }
  // Figma 공통값(32x32)인데 base(24px)가 PC에서도 어긋나 있음 — 모바일만 보정
  .contactAccordion__icon {
    width: 32px;
    height: 32px;
  }
  .contactForm {
-    // padding-bottom: 40px;
+    padding: 8px 24px 40px;
  }
  .contactForm__cols {
    grid-template-columns: 1fr;
  }
  // Figma 공통값(400)인데 base(300)가 PC에서도 어긋나 있음 — 모바일만 보정
  .contactForm__input,
  .contactForm__textarea {
    font-weight: 400;
  }
  .contactForm__textarea {
    height: auto;
  }
  // Figma 공통값(16, 아이콘+텍스트 8)인데 base(12px/10px)가 PC에서도 어긋나 있음 — 모바일만 보정
  .careerTags {
-    gap: 16px;
+    padding: 8px 24px 40px;
    padding-bottom: 40px;
  }
-  .careerTag {
+  .footer {
-    gap: 8px;
+    padding: 24px 20px;
  }
-  // Figma 모바일: 모달이 화면 상단에 풀블리드(가로 전체, 모서리 각짐)로 붙는 시트 형태 — PC의 중앙 카드형 모달과 다름
+  .footer__inner {
-  .privacyModal {
+    flex-direction: column;
    align-items: flex-start;
-    padding: 0;
+    gap: 20px;
  }
-  .privacyModal__panel {
+  .footer__contact {
-    max-width: none;
+    font-size: 12px;
    max-height: 100vh;
    border-radius: 0;
    padding: 24px;
  }
  // Figma 모바일 타이틀 22px(PC base 32px는 그대로 둠)
  .privacyModal__title {
    font-size: 22px;
  }
  // Figma 공통값(48x48)인데 base(24px)가 PC에서도 어긋나 있음 — 모바일만 보정
  .privacyModal__close {
    width: 48px;
    height: 48px;
  }
 }
--- a/src/scss/page/_footer.scss
+++ b/src/scss/page/_footer.scss
@ -1,79 +0,0 @@
@use "../base/mixin" as *;
 // Footer
 .footer {
  background: #fff;
  padding: 120px 0 0;
 }
 .footer__inner {
  background: #0d0d0d;
  padding: 60px 120px;
  display: flex;
  align-items: center;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
 }
 .footer__brand {
  font-size: 32px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: #fff;
  line-height: 1.2;
  text-transform: uppercase;
 }
 .footer__contact {
  font-size: 14px;
  color: #fff;
 }
 .footer__contactLabel {
  font-weight: 700;
 }
 .footer__contactLink {
  color: #fff;
  transition: color 0.2s;
  margin: 0 0 0 5px;
  &:hover {
    color: #7796ff;
  }
 }
 .footer__copy {
  font-size: 14px;
  color: #fff;
  letter-spacing: 0.03em;
 }
 // 모바일에서만 Mail/Tel을 줄바꿈 — PC는 한 줄(인라인)로 유지
 .footer__contactBreak {
  display: none;
 }
@include mo {
  .footer {
    padding: 40px 0 0;
  }
  .footer__inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 46px;
    padding: 40px;
  }
  .footer__contactBreak {
    display: block;
    margin-top: 6px;
  }
  .footer__contactGap {
    display: none;
  }
 }
--- a/src/scss/page/_gnb.scss
+++ b/src/scss/page/_gnb.scss
@ -1,67 +1,25 @@
@use "../base/mixin" as *;
 // 모바일 전용 로고(정사각 마크) — PC 로고는 그대로 두고, 모바일에서만 노출
 .gnb__logoImg--mobile {
  display: none;
 }
 // GNB
 .gnb {
  position: fixed;
-  top: 70px;
+  top: 0;
  left: 0;
  width: 100%;
  z-index: 100;
-  transition:
+  transition: background 0.4s;
    background 0.3s,
    top 0.3s;
  &.isScrolled {
-    background: rgba(13, 13, 13, 0.75);
+    // background: rgba(13, 13, 13, 0.92);
-    backdrop-filter: blur(12px);
+    // backdrop-filter: blur(12px);
  }
  // HOME(intro)을 벗어났을 때 — 위치/크기 조정용 (배경·텍스트 색은 isLight가 별도로 담당)
  &.isPastHome {
    top: 0;
  }
  // HISTORY/CONTACT처럼 흰 배경 섹션을 지나는 동안 — 텍스트가 묻히는 것 + 아래 콘텐츠가 비쳐서 겹쳐 보이는 것 둘 다 방지
  &.isLight {
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(12px);
    .gnb__logoImg {
      filter: invert(1);
    }
    .gnb__navLink {
      color: #0d0d0d;
      &:hover {
        color: #7796ff;
      }
      &.isActive {
        color: #7796ff;
      }
    }
    .gnb__hamburgerLine {
      background: #0d0d0d;
    }
  }
 }
 .gnb__mobileNav {
  display: none;
 }
 .gnb__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
-  padding: 10px clamp(24px, 5.2vw, 100px) 10px;
+  padding: 80px clamp(24px, 5.2vw, 100px) 10px;
 }
 .gnb__logo {
@ -140,127 +98,67 @@
  transform: translateY(-6px) rotate(-45deg);
 }
-@include mo {
+.gnb__mobileNav {
-  .gnb {
+  display: none;
-    top: 0;
+  position: fixed;
-  }
+  inset: 0;
-  .gnb__inner {
+  z-index: 200;
-    padding: 0 20px;
+  background: #0d0d0d;
-    height: 80px;
+  padding: 32px 32px 40px;
-  }
+  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s ease;
-  .gnb__nav {
+  &.isOpen {
-    display: none;
+    opacity: 1;
-  }
+    pointer-events: auto;
  .gnb__hamburger {
    display: none;
  }
  .gnb__mobileNav {
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 200;
    background: #0d0d0d;
    padding: 32px 32px 40px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.35s ease;
    &.isOpen {
      opacity: 1;
      pointer-events: auto;
    }
  }
  .gnb__mobileNavClose {
    position: absolute;
    top: 28px;
    right: 28px;
    width: 28px;
    height: 28px;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
  }
  .gnb__mobileNavCloseLine {
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    height: 1px;
    background: #ffffff;
    &:nth-child(1) {
      transform: rotate(45deg);
    }
    &:nth-child(2) {
      transform: rotate(-45deg);
    }
  }
  .gnb__mobileNavList {
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100%;
    gap: clamp(20px, 6vh, 36px);
  }
  .gnb__mobileNavLink {
    display: block;
    font-size: clamp(28px, 8vw, 36px);
    font-weight: 400;
    letter-spacing: 0.02em;
    color: #ffffff;
  }
  .gnb__mobileNavLink.isActive {
    color: #7796ff;
  }
  // Figma 모바일 전용 정사각 로고 마크(40x40)로 교체 — PC 워드마크는 숨김
  .gnb__logoImg--desktop {
    display: none;
  }
  .gnb__logoImg--mobile {
    display: block;
    width: 40px;
    height: 40px;
  }
  // 컴포넌트 사양(48x48)에 맞춤
  .gnb__hamburger {
    width: 48px;
    height: 48px;
  }
  .gnb__mobileNav {
    overflow-y: auto;
  }
  // 드로어 닫기(X) 버튼: Figma "Navigation icon"(menu-close) 48x48, top/right 20px
  .gnb__mobileNavClose {
    top: 20px;
    right: 20px;
    width: 48px;
    height: 48px;
  }
  // 드로어 메뉴 아이템: Figma "menu" 컨테이너 gap 24, 아이템 padding 24px 32px
  .gnb__mobileNavList {
    gap: 24px;
  }
  .gnb__mobileNavLink {
    padding: 24px 32px;
    font-size: clamp(24px, 8.5vw, 32px);
  }
 }
 .gnb__mobileNavClose {
  position: absolute;
  top: 28px;
  right: 28px;
  width: 28px;
  height: 28px;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
 }
 .gnb__mobileNavCloseLine {
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 1px;
  background: #ffffff;
  &:nth-child(1) {
    transform: rotate(45deg);
  }
  &:nth-child(2) {
    transform: rotate(-45deg);
  }
 }
 .gnb__mobileNavList {
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100%;
  gap: clamp(20px, 6vh, 36px);
 }
 .gnb__mobileNavLink {
  display: block;
  font-size: clamp(28px, 8vw, 36px);
  font-weight: 400;
  letter-spacing: 0.02em;
  color: #ffffff;
 }
 .gnb__mobileNavLink.isActive {
  color: #7796ff;
 }
--- a/src/scss/page/_intro.scss
+++ b/src/scss/page/_intro.scss
@ -25,7 +25,7 @@
 }
 .intro__sub {
-  font-size: clamp(24px, 2.6vw, 50px);
+  font-size: clamp(18px, 2.6vw, 50px);
  font-weight: 100;
  letter-spacing: 0.02em;
  color: #ffffff;
@ -34,10 +34,33 @@
 }
 .intro__title {
-  font-size: clamp(42px, 5.2vw, 100px);
+  font-size: clamp(32px, 5.2vw, 100px);
  font-weight: 700;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: #ffffff;
  line-height: 0.8;
 }
@include mo {
  .gnb__inner {
    padding: 0 20px;
    height: 60px;
  }
  .gnb__logoImg {
    width: 90px;
  }
  .gnb__nav {
    display: none;
  }
  .gnb__hamburger {
    display: flex;
  }
  .gnb__mobileNav {
    display: block;
  }
 }
--- a/src/scss/page/_project.scss
+++ b/src/scss/page/_project.scss
@ -2,46 +2,29 @@
 .project {
  background: #0d0d0d;
-  padding: 120px;
+  padding: 100px 48px;
 }
 .project__inner {
 }
 .project__heading {
  margin-bottom: 120px;
 }
 .project__grid {
  display: flex;
  flex-direction: column;
  gap: 40px;
  max-width: 1200px;
  margin: 0 auto;
 }
-.project__row {
+.project__heading {
-  display: flex;
+  margin-bottom: 60px;
-  align-items: flex-start;
+}
-  gap: 40px;
+
 .project__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 40px 40px;
 }
 .project__card {
  display: flex;
  flex-direction: column;
  flex: 0 1 calc(50% - 20px);
  gap: 16px;
  cursor: pointer;
  transition: flex 0.45s ease;
  // 호버 시 624px → 738px(같은 비율)로 확장, 같은 행의 옆 카드는 자동으로 줄어듦
  &:hover {
    flex: 0 0 calc(59.135% - 20px);
  }
  &[hidden] {
    display: none;
  }
 }
 .project__card:hover .project__thumbImg {
@ -50,52 +33,55 @@
 .project__thumb {
  width: 100%;
  aspect-ratio: 624 / 396;
  overflow: hidden;
  background: #1a1a1a;
  border-radius: 8px;
 }
 .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;
 }
 .project__info {
  display: flex;
  flex-direction: column;
  gap: 8px;
 }
 .project__name {
-  font-size: 18px;
+  font-size: clamp(14px, 1.1vw, 16px);
-  font-weight: 700;
+  font-weight: 500;
  color: #ffffff;
  line-height: 1.4;
 }
 .project__company {
-  margin: 15px 0 0;
+  font-size: 13px;
-  font-size: 14px;
+  font-weight: 300;
-  font-weight: 400;
+  color: rgba(255, 255, 255, 0.5);
  color: #b0b0b0;
 }
 .project__stack {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
-  margin: 20px 0 0;
+  margin-top: 4px;
 }
 .project__tag {
  display: inline-block;
-  padding: 4px 14px 6px 14px;
+  padding: 3px 10px;
-  background: #2d2d2d;
+  border: 1px solid rgba(255, 255, 255, 0.2);
-  border-radius: 20px;
+  font-size: 11px;
  font-size: 12px;
  font-weight: 300;
-  color: #ffffff;
+  color: rgba(255, 255, 255, 0.55);
  letter-spacing: 0.03em;
 }
@ -110,10 +96,10 @@
  align-items: center;
  justify-content: center;
  gap: 6px;
-  padding: 24px 32px;
+  padding: 14px 40px;
-  border: 1px solid #ffffff;
+  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 100px;
-  font-size: 24px;
+  font-size: 14px;
  font-weight: 400;
  letter-spacing: 0.1em;
  color: #ffffff;
@ -131,54 +117,19 @@
@include mo {
  .project {
-    padding: 80px 20px;
+    padding: 60px 20px;
  }
  .project__heading {
-    margin-bottom: 40px;
+    margin-bottom: 36px;
  }
  // Figma 모바일: 카드 사이 간격 56(고정) — PC base(40px)는 그대로 둠
  .project__grid {
-    gap: 56px;
+    grid-template-columns: 1fr;
-  }
+    gap: 32px;
  .project__row {
    flex-direction: column;
    gap: 56px;
  }
  .project__card {
    flex-basis: 100%;
    // Figma 모바일/PC 공통으로 thumb↔info 간격이 24인데 base(16px)가 어긋나 있음 — PC는 그대로 두고 모바일만 보정
    gap: 24px;
    &:hover {
      flex-basis: 100%;
    }
  }
  // Figma 모바일 전용 썸네일 크롭 비율(335:200) — PC(624:396)는 그대로 둠
  .project__thumb {
    aspect-ratio: 335 / 200;
  }
  // Figma 모바일/PC 공통값(name→company 18, company→tags 24)인데 base(15px/20px)가 어긋나 있음 — 모바일만 보정
  .project__company {
    margin-top: 14px;
  }
  .project__stack {
    margin-top: 22px;
  }
  .project__more {
-    margin-top: 56px;
+    margin-top: 48px;
  }
  // Figma 모바일 버튼 규격 139x48에 맞춤
  .btnMore {
    padding: 13px 32px;
    font-size: 16px;
  }
 }
--- a/src/scss/page/_vision.scss
+++ b/src/scss/page/_vision.scss
@ -16,7 +16,6 @@
  position: absolute;
  inset: 0;
  background: url("../../images/unsplash_Cq5NaI0yKBE.png") center / cover no-repeat;
  opacity: 0.5;
  pointer-events: none;
 }
@ -40,7 +39,7 @@
 .vision__desc {
  max-width: 560px;
-  font-size: 14px;
+  font-size: clamp(13px, 0.73vw, 14px);
  font-weight: 300;
  line-height: 1.8;
  color: #ffffff;
@ -54,7 +53,7 @@
  max-width: 740px;
  .mark {
-    font-size: clamp(86px, 7.6vw, 146px);
+    font-size: clamp(60px, 7.6vw, 146px);
    font-weight: 600;
    line-height: 1;
    margin-top: -0.34em;
@ -83,7 +82,7 @@
  gap: 12px;
  .keyword {
-    font-size: clamp(32px, 3.33vw, 64px);
+    font-size: clamp(28px, 3.33vw, 64px);
    font-weight: 800;
    letter-spacing: 0.01em;
    color: #ffffff;
@ -91,44 +90,24 @@
  }
  .desc {
-    font-size: 14px;
+    font-size: clamp(12px, 0.73vw, 14px);
    font-weight: 300;
    color: #ffffff;
    letter-spacing: -0.1px;
  }
 }
@include mo {
  .vision {
-    padding: 80px 20px;
+    padding: 60px 24px;
  }
  // Figma 모바일: head/quote/keywordList 사이 간격 160(PC base clamp는 그대로 둠)
  .vision__inner {
    gap: 160px;
  }
  // Figma 모바일: title→desc 간격 30(PC base clamp는 그대로 둠)
  .vision__head {
    gap: 30px;
  }
  .vision__quote {
    position: relative;
    align-self: stretch;
    max-width: none;
    padding: 0 30px;
    .mark {
      top: 0;
      left: 0;
      position: absolute;
    }
  }
  .vision__keywordList {
    flex-direction: column;
-    gap: 64px;
+    gap: 40px;
    padding: 0 30px;
  }
 }