fix: ai검수

doc/미완료.md

@@ -1,158 +1,62 @@
-# 디자인 링크
+# 미완료 / 확인 필요 항목
+
+추측해서 임의로 채운 값이 아니라, 실제로 막힌 지점만 기록한다. (2026-06-29 기준, figma-specs 전체 재검수 후 정리 — 완료된 항목은 모두 제거하고 현재 남아있는 것만 유지)
+
+## 인터랙션(behavior) — 남은 1건 (Recruitment 더보기는 구현 보류)
+
+`doc/figma-specs/11-interaction-notes.md` 기준 5개 중 4개(HISTORY 아코디언 단일 열림, PROJECT 더보기 페이지네이션, 개인정보 동의 모달, SEND 유효성 검증)는 구현하고 playwright로 직접 클릭해서 동작·콘솔 에러 없음까지 확인함.
+
+- **Recruitment 태그 더보기 페이지네이션 — 구현 보류.** 스펙은 "처음 6개 노출, 더보기 시 6개"인데 Figma에도 태그가 4개(Planner & Consulting/Designer/Publisher/Scripter)뿐이라 6개 임계값에 도달하지 않음 — 페이지네이션이 트리거될 일이 없어서 구현 안 함. 태그가 6개 이상으로 늘어나면 그때 PROJECT 더보기와 같은 패턴으로 추가하면 됨.
+
+## HISTORY — 확인 필요 2건 (Figma 쪽 추가 확인 필요, 코드로 해결 불가)
+
+- **2024/2023/2022/2021년 그룹 펼친 상태 전체 목록 미확인** — Figma 정적 렌더에서 이 그룹들이 collapsed 상태로 보여서 프리뷰 항목 1개씩만 반영함(2024: 우리은행 로보어드바이저 구축 / 2023: 신한은행 슈퍼SOL 운영 계약 / 2022: 한화금융 서비스앱 플러스 리뉴얼 2차 계약 / 2021: 롯데 렌터카 차세대 구축 계약). 펼쳤을 때 추가 항목이 더 있는지 정적 JSON만으론 확인 불가 — Figma에서 직접 펼쳐서 알려주시거나 node를 펼친 상태로 다시 캡처해주셔야 함.
+- **(낮은 확신) 닫힌 연도그룹 프리뷰의 모바일 폰트 크기** — `03-history-mobile.json` 기준 닫힌 그룹(2024~2021) 프리뷰 1건의 텍스트가 16px로 보이는데, 펼쳐진 2025 리스트 내부 항목들은 14px로 다름. Figma 저자가 프리뷰/리스트에 의도적으로 다른 스타일을 쓴 건지, 단순 작업 누락인지 불확실해서 현재 코드(14px 통일)는 그대로 둠 — 필요하면 알려주시면 반영.
+
+---
+
+# 참고: 디자인 링크
 
 https://www.figma.com/design/MnwN1Uzg5F6ks9Clr1brLW/%EB%94%94%EC%9E%90%EC%9D%B80624?m=auto&t=Y5wF3r0wUkUFeBIV-6
 
-# 섹션별 링크
+## 섹션별 링크 (PC)
 
-## 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(=CONTACT/FOOTER): https://www.figma.com/design/MnwN1Uzg5F6ks9Clr1brLW/%EB%94%94%EC%9E%90%EC%9D%B80624?node-id=2247-2253&t=XSGOQmdNzIB99Zh5-4
 
-01_HOME:
+## 섹션별 링크 (Mobile)
-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
-01_HOME:
+03_HISTORY: https://www.figma.com/design/MnwN1Uzg5F6ks9Clr1brLW/%EB%94%94%EC%9E%90%EC%9D%B80624?node-id=2319-2433&t=XSGOQmdNzIB99Zh5-4
-https://www.figma.com/design/MnwN1Uzg5F6ks9Clr1brLW/%EB%94%94%EC%9E%90%EC%9D%B80624?node-id=2319-2232&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
-02_ABOUT:
+05_PROJECT: https://www.figma.com/design/MnwN1Uzg5F6ks9Clr1brLW/%EB%94%94%EC%9E%90%EC%9D%B80624?node-id=2319-4231&t=XSGOQmdNzIB99Zh5-4
-https://www.figma.com/design/MnwN1Uzg5F6ks9Clr1brLW/%EB%94%94%EC%9E%90%EC%9D%B80624?node-id=2319-2288&t=XSGOQmdNzIB99Zh5-4
+06_Expertise(=CONTACT/FOOTER): https://www.figma.com/design/MnwN1Uzg5F6ks9Clr1brLW/%EB%94%94%EC%9E%90%EC%9D%B80624?node-id=2319-5082&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`
+- PC 전체 페이지(컴포지트): `2247:2093` / 모바일 전체 페이지(컴포지트): `2319:5243`
-- 01_HOME (PC): `2247:2094`
+- 01_HOME PC `2247:2094` / Mobile `2319:2232`
-- 02_ABOUT US (PC, EXPERTISE 포함): `2247:2230`
+- 02_ABOUT US PC `2247:2230` / Mobile `2319:2288`
-- 03_HISTORY (PC): `2247:2121`
+- 03_HISTORY PC `2247:2121` / Mobile `2319:2433`
-- VISION PC: `2247:2183` / VISION 모바일: `2319:4183`
+- 04_VISION PC `2247:2183` / Mobile `2319:4183`
-- PROJECT PC: `2247:2202` / PROJECT 모바일: `2319:4231` — 렌더 확인 완료, 반영 완료(이미지 9~13 제외)
+- 05_PROJECT PC `2247:2202` / Mobile `2319:4231`
-- CONTACT/FOOTER (문서 상단 "06_Expertise" 링크가 실제 이 내용임) PC: `2247:2253` / 모바일: `2319:5082` — 렌더 확인·반영 완료(footer 영역 제외)
+- 06_CONTACT/FOOTER(문서상 라벨은 "Expertise") PC `2247:2253` / Mobile `2319:5082`
-- 모바일 전체 페이지(컴포지트): `2319:5243`
 - 모바일 GNB 드로어(열린 상태): `2319:5998`
+- footer 전용 인스턴스: PC `2247:2294` / Mobile `2319:4996`
+- 개인정보 동의 모달: PC `2319:2118` / Mobile `2376:2184`
 
-# 참고: Figma MCP 연결 관련 메모 (재현/트러블슈팅용)
+상세 스펙 데이터는 `doc/figma-specs/` 폴더 참고(섹션별 JSON/txt, README에 사용법 정리됨).
 
-- **환경이 Windows(`d:/repository/boda-lab`)에서 이 Mac(`/Users/heemac/repository/project-bodalab`)으로 바뀜.** Windows 때 설정(`.mcp.json`에 nvm4w 절대경로 `npx.cmd` 지정)은 이 머신에 적용 안 됨 — npx/node 자체가 새로 깔린 환경이라 처음엔 figma-mcp가 전혀 연결 안 되어 있었음.
+# 참고: Figma 데이터 가져오는 법
-- 이 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/`에 넣어줘야 함.
 
-# 참고: 공통 / 도구 제약
+- 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 직접 호출보다 제약이 많음.
-- `add_figma_file`이 파일 전체를 한 번에 JSON 덤프하는 방식이라 토큰 한도에 걸려 `01_HOME` ~ `03_HISTORY` 중반 이후 노드는 JSON으로 못 받았다. `view_node(file_key, node_id)`로 노드 ID를 알 때만 PNG 렌더로 확인 가능. VISION/PROJECT/CONTACT 등 이후 섹션은 작업 시점에 사용자에게 "Copy link to selection" 링크를 요청해서 진행한다.
+- 컴포넌트(버튼/인풋/체크박스 등) 비교 시 주의: Components 캔버스의 **추상 컴포넌트 정의**에 있는 배경색 등은 실제로 배치된 인스턴스에서 `visible:false`로 꺼져있는 placeholder일 수 있음(예: PROJECT의 `btn/large` 컴포넌트 정의는 회색 배경이 있지만 실제 인스턴스는 그 fill이 꺼져있어서 투명이 맞음). **항상 실제 페이지에 배치된 인스턴스를 raw JSON에서 직접 찾아 그 값(fills/cornerRadius/padding)을 써야 하고, 추상 컴포넌트 스와치만 보고 판단하면 안 됨.**
-- `view_node`는 이미지를 대화창에 렌더만 해줄 뿐, 파일로 저장(export)하는 기능이 없다. 따라서 Figma 안의 사진/목업 이미지 에셋(배경 텍스처, 프로젝트 카드 스크린샷 등)은 이 MCP로 직접 추출이 불가능하다. 실제 자산은 Figma에서 직접 "Export" 해서 `src/images/`에 받아와야 한다.
+- `.txt` 요약 파일은 `visible:false` 숨김 노드도 같이 추출하므로, 의심되는 텍스트는 raw JSON에서 `visible` 플래그를 직접 확인해야 함.

src/index.html

@@ -14,7 +14,7 @@
     <header class="gnb" id="gnb">
       <div class="gnb__inner">
         <a href="#intro" class="gnb__logo">
-          <img class="gnb__logoImg" src="images/logo.svg" alt="BODA LAB" />
+          <img class="gnb__logoImg" src="images/logo.png" alt="BODA LAB" />
         </a>
         <nav class="gnb__nav">
           <ul class="gnb__navList">
@@ -451,7 +451,7 @@
                 </div>
               </div>
             </article>
-            <article class="project__card">
+            <article class="project__card" hidden>
               <div class="project__thumb project__thumbEmpty"></div>
               <div class="project__info">
                 <h3 class="project__name">롯데 GA2ck 구축 프로젝트 (롯데 렌터카)</h3>
@@ -464,7 +464,7 @@
                 </div>
               </div>
             </article>
-            <article class="project__card">
+            <article class="project__card" hidden>
               <div class="project__thumb project__thumbEmpty"></div>
               <div class="project__info">
                 <h3 class="project__name">
@@ -481,7 +481,7 @@
                 </div>
               </div>
             </article>
-            <article class="project__card">
+            <article class="project__card" hidden>
               <div class="project__thumb project__thumbEmpty"></div>
               <div class="project__info">
                 <h3 class="project__name">코나아이 PC</h3>
@@ -494,7 +494,7 @@
             </article>
           </div>
           <div class="project__more">
-            <a href="#" class="btnMore">+ VIEW MORE</a>
+            <a href="#" class="btnMore">+ MORE</a>
           </div>
         </div>
       </section>
@@ -536,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" onsubmit="return false;">
+              <form class="contactForm">
                 <div class="contactForm__cols">
                   <div class="contactForm__fields">
                     <input type="text" class="contactForm__input" placeholder="회사명*" />
@@ -552,6 +552,7 @@
                     <span class="contactForm__checkboxBox"></span>
                     <span>[필수] 개인정보 수집 및 이용 동의</span>
                   </label>
+                  <button type="button" class="contactForm__termsTrigger" data-modal-open="privacyModal">보기</button>
                 </div>
                 <div class="contactForm__submit">
                   <button type="submit" class="btnSend">SEND</button>
@@ -613,6 +614,33 @@
             <p class="footer__copy">© 2026 BODA LAB</p>
           </div>
         </footer>
+
+        <!-- 개인정보 수집·이용 동의 모달 -->
+        <div class="privacyModal" id="privacyModal" hidden>
+          <div class="privacyModal__overlay" data-modal-close></div>
+          <div class="privacyModal__panel" role="dialog" aria-modal="true" aria-labelledby="privacyModalTitle">
+            <h3 id="privacyModalTitle" class="privacyModal__title">개인정보 수집 및 이용 동의</h3>
+            <div class="privacyModal__body">
+              <p>
+                <strong>1. 개인정보의 수집 및 이용 목적</strong>
+                회사는 고객 문의에 대한 답변 제공 및 원활한 의사소통 경로 확보를 목적으로 개인정보를 수집 및 이용합니다.
+              </p>
+              <p>
+                <strong>2. 수집하는 개인정보의 항목</strong>
+                필수항목: 회사명, 담당자 이름, 연락처, 이메일
+              </p>
+              <p>
+                <strong>3. 개인정보의 보유 및 이용 기간</strong>
+                원칙적으로 개인정보 수집 및 이용목적이 달성된 후에는 해당 정보를 지체 없이 파기합니다. 소비자 불만 또는 분쟁처리에 관한 기록은 3년, 기타 문의사항은 처리완료 후 6개월(또는 1년)간 보관합니다.
+              </p>
+              <p>
+                <strong>4. 동의를 거부할 권리 및 동의 거부에 따른 불이익</strong>
+                귀하는 개인정보 수집·이용에 동의하지 않을 권리가 있으며, 동의를 거부할 경우 문의 접수 및 답변 서비스 이용이 제한될 수 있습니다.
+              </p>
+            </div>
+            <button type="button" class="privacyModal__agree" data-modal-close>동의합니다</button>
+          </div>
+        </div>
       </section>
     </main>
   </body>

src/js/main.js

@@ -32,6 +32,8 @@ $(function () {
   // 현재 섹션에 따라 GNB 활성화
   const $navLinks = $(".gnb__navLink");
   const sections = $("section[id]").toArray();
+  // 흰 배경 섹션 — 이 구간에서는 GNB를 다크 텍스트로 전환(흰 텍스트가 흰 배경에 묻히는 것 방지)
+  const lightSections = ["history", "contact"];
 
   function setActiveNav(navId) {
     $navLinks.each(function () {
@@ -51,6 +53,8 @@ $(function () {
     });
 
     setActiveNav(current);
+    $gnb.toggleClass("isLight", lightSections.includes(current));
+    $gnb.toggleClass("isPastHome", current !== "intro");
   }
 
   ScrollTrigger.create({
@@ -81,12 +85,21 @@ $(function () {
     $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);
 
@@ -97,6 +110,48 @@ $(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", "");
+  });
+
+  $(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");

src/scss/index.scss

@@ -15,7 +15,7 @@
 
 .sectionTitle {
   font-family: $기본글꼴;
-  font-size: clamp(28px, 3vw, 48px);
+  font-size: clamp(30px, 3vw, 48px);
   font-weight: 600;
   letter-spacing: 0.02em;
   color: #ffffff;

src/scss/page/_about.scss

@@ -37,7 +37,7 @@
 
 .about__desc {
   margin: 0 0 70px;
-  font-size: clamp(13px, 1.1vw, 16px);
+  font-size: 14px;
   font-weight: 300;
   line-height: 150%;
   color: #ffffff;
@@ -52,14 +52,14 @@
 }
 
 .about__quoteMark {
-  font-size: clamp(60px, 7.6vw, 146px);
+  font-size: clamp(86px, 7.6vw, 146px);
   font-weight: 600;
   line-height: 1;
   color: #ffffff;
 }
 
 .about__quoteText {
-  font-size: clamp(22px, 2.4vw, 46px);
+  font-size: clamp(30px, 2.4vw, 46px);
   font-weight: 100;
   line-height: 1.2;
   color: #ffffff;
@@ -79,7 +79,7 @@
   gap: 8px;
 
   .num {
-    font-size: clamp(14px, 0.85vw, 16px);
+    font-size: 16px;
     font-weight: 800;
     color: #7796ff;
   }
@@ -93,7 +93,7 @@
   }
 
   .text {
-    font-size: clamp(12px, 0.75vw, 14px);
+    font-size: 14px;
     font-weight: 300;
     color: #ffffff;
   }
@@ -252,7 +252,7 @@
     vertical-align: top;
     margin-left: 5px;
     padding: 2px 8px;
-    font-size: 10px;
+    font-size: 8px;
     font-weight: 700;
     color: #0071f2;
     border: 1px solid #0071f2;
@@ -326,5 +326,9 @@
   .history__listItem {
     flex-direction: column;
     gap: 6px;
+
+    .sub {
+      font-size: 12px;
+    }
   }
 }

src/scss/page/_contact.scss

@@ -19,7 +19,7 @@
 
 .contact__heading {
   font-family: $기본글꼴;
-  font-size: clamp(28px, 3vw, 40px);
+  font-size: clamp(30px, 3vw, 48px);
   font-weight: 600;
   letter-spacing: 0.02em;
   color: #0d0d0d;
@@ -29,17 +29,15 @@
 .contact__desc {
   margin-top: 20px;
   margin-bottom: 48px;
-  font-size: 15px;
+  font-size: 14px;
   font-weight: 300;
   color: rgba(13, 13, 13, 0.6);
 }
 
 .contact__label {
-  font-size: 12px;
+  font-size: 32px;
-  font-weight: 600;
+  font-weight: 400;
-  letter-spacing: 0.1em;
+  color: #0d0d0d;
-  text-transform: uppercase;
-  color: rgba(13, 13, 13, 0.5);
   margin-bottom: 20px;
 }
 
@@ -56,8 +54,8 @@
 }
 
 .contact__infoLabel {
-  font-size: 12px;
+  font-size: 18px;
-  font-weight: 600;
+  font-weight: 700;
   letter-spacing: 0.08em;
   color: #7796ff;
 }
@@ -101,7 +99,7 @@
   border-bottom: 1px solid rgba(13, 13, 13, 0.08);
   cursor: pointer;
   color: #0d0d0d;
-  font-size: clamp(16px, 1.4vw, 20px);
+  font-size: 32px;
   font-weight: 400;
   font-family: $기본글꼴;
   text-align: left;
@@ -164,12 +162,13 @@
 .contactForm__textarea {
   width: 100%;
   background: #ffffff;
-  border: 1px solid rgba(13, 13, 13, 0.2);
+  border: 1px solid #0d0d0d;
+  border-radius: 8px;
   color: #0d0d0d;
   font-family: $기본글꼴;
   font-size: 14px;
   font-weight: 300;
-  padding: 14px 16px;
+  padding: 16px;
   outline: none;
   transition: border-color 0.2s;
 
@@ -188,9 +187,28 @@
 }
 
 .contactForm__agree {
+  display: flex;
+  align-items: center;
+  gap: 10px;
   margin-top: 4px;
 }
 
+.contactForm__termsTrigger {
+  background: none;
+  border: none;
+  padding: 0;
+  font-family: $기본글꼴;
+  font-size: 13px;
+  font-weight: 300;
+  color: rgba(13, 13, 13, 0.45);
+  text-decoration: underline;
+  cursor: pointer;
+
+  &:hover {
+    color: #7796ff;
+  }
+}
+
 .contactForm__checkbox {
   display: inline-flex;
   align-items: center;
@@ -215,15 +233,15 @@
   display: block;
   width: 10px;
   height: 6px;
-  border-left: 1.5px solid #ffffff;
+  border-left: 1.5px solid #0d0d0d;
-  border-bottom: 1.5px solid #ffffff;
+  border-bottom: 1.5px solid #0d0d0d;
   transform: rotate(-45deg) translateY(-2px);
 }
 
 .contactForm__checkboxBox {
   width: 18px;
   height: 18px;
-  border: 1px solid rgba(13, 13, 13, 0.3);
+  border: 1px solid #0d0d0d;
   flex-shrink: 0;
   display: flex;
   align-items: center;
@@ -240,14 +258,14 @@
 }
 
 .btnSend {
-  padding: 12px 48px;
+  padding: 16px 32px;
   background: #7796ff;
   border: none;
   border-radius: 100px;
-  color: #ffffff;
+  color: #000000;
   font-family: $기본글꼴;
-  font-size: 14px;
+  font-size: 16px;
-  font-weight: 700;
+  font-weight: 400;
   letter-spacing: 0.1em;
   cursor: pointer;
   transition: opacity 0.2s;
@@ -272,8 +290,8 @@
   padding: 10px 20px;
   border: 1px solid rgba(13, 13, 13, 0.25);
   border-radius: 100px;
-  font-size: 14px;
+  font-size: 16px;
-  font-weight: 300;
+  font-weight: 400;
   color: #0d0d0d;
   transition:
     border-color 0.2s,
@@ -307,7 +325,7 @@
 }
 
 .footer__brand {
-  font-size: clamp(18px, 2vw, 28px);
+  font-size: 32px;
   font-weight: 700;
   letter-spacing: 0.08em;
   color: #fff;
@@ -316,8 +334,7 @@
 }
 
 .footer__contact {
-  font-size: 13px;
+  font-size: 14px;
-  // font-weight: 300;
   color: #fff;
 }
 
@@ -335,11 +352,90 @@
 }
 
 .footer__copy {
-  font-size: 12px;
+  font-size: 14px;
   color: #fff;
   letter-spacing: 0.03em;
 }
 
+// 개인정보 수집·이용 동의 모달
+.privacyModal {
+  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(13, 13, 13, 0.6);
+}
+
+.privacyModal__panel {
+  position: relative;
+  z-index: 1;
+  max-width: 560px;
+  width: 100%;
+  max-height: 80vh;
+  overflow-y: auto;
+  background: #ffffff;
+  border-radius: 16px;
+  padding: 40px;
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+}
+
+.privacyModal__title {
+  font-family: $기본글꼴;
+  font-size: 20px;
+  font-weight: 600;
+  color: #0d0d0d;
+}
+
+.privacyModal__body {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  font-family: $기본글꼴;
+  font-size: 13px;
+  font-weight: 300;
+  line-height: 1.6;
+  color: rgba(13, 13, 13, 0.75);
+
+  strong {
+    display: block;
+    margin-bottom: 4px;
+    font-weight: 600;
+    color: #0d0d0d;
+  }
+}
+
+.privacyModal__agree {
+  align-self: flex-end;
+  padding: 12px 28px;
+  background: #7796ff;
+  color: #000000;
+  border: none;
+  border-radius: 100px;
+  font-family: $기본글꼴;
+  font-size: 14px;
+  font-weight: 400;
+  cursor: pointer;
+  transition: opacity 0.2s;
+
+  &:hover {
+    opacity: 0.85;
+  }
+}
+
 @include mo {
   .contact__inner {
     padding: 60px 24px 40px;
@@ -347,7 +443,6 @@
 
   .contact__desc {
     margin-bottom: 32px;
-    font-size: 14px;
   }
 
   .contact__infoList {
@@ -385,7 +480,7 @@
     gap: 20px;
   }
 
-  .footer__contact {
+  .privacyModal__panel {
-    font-size: 12px;
+    padding: 28px 24px;
   }
 }

src/scss/page/_gnb.scss

@@ -10,8 +10,38 @@
   transition: background 0.4s;
 
   &.isScrolled {
-    // background: rgba(13, 13, 13, 0.92);
+    background: rgba(13, 13, 13, 0.75);
-    // backdrop-filter: blur(12px);
+    backdrop-filter: blur(12px);
+  }
+
+  // HOME(intro)을 벗어났을 때 — 위치/크기 조정용 (배경·텍스트 색은 isLight가 별도로 담당)
+  &.isPastHome {
+  }
+
+  // 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;
+    }
   }
 }
 

src/scss/page/_intro.scss

@@ -25,7 +25,7 @@
 }
 
 .intro__sub {
-  font-size: clamp(18px, 2.6vw, 50px);
+  font-size: clamp(24px, 2.6vw, 50px);
   font-weight: 100;
   letter-spacing: 0.02em;
   color: #ffffff;
@@ -34,7 +34,7 @@
 }
 
 .intro__title {
-  font-size: clamp(32px, 5.2vw, 100px);
+  font-size: clamp(42px, 5.2vw, 100px);
   font-weight: 700;
   letter-spacing: 0.01em;
   text-transform: uppercase;

src/scss/page/_project.scss

@@ -51,16 +51,16 @@
 }
 
 .project__name {
-  font-size: clamp(14px, 1.1vw, 16px);
+  font-size: 18px;
-  font-weight: 500;
+  font-weight: 700;
   color: #ffffff;
   line-height: 1.4;
 }
 
 .project__company {
-  font-size: 13px;
+  font-size: 14px;
-  font-weight: 300;
+  font-weight: 400;
-  color: rgba(255, 255, 255, 0.5);
+  color: #b0b0b0;
 }
 
 .project__stack {
@@ -72,11 +72,13 @@
 
 .project__tag {
   display: inline-block;
-  padding: 3px 10px;
+  padding: 4px 14px 6px;
-  border: 1px solid rgba(255, 255, 255, 0.2);
+  background: #2d2d2d;
-  font-size: 11px;
+  border: 0.5px solid rgba(255, 255, 255, 0.5);
+  border-radius: 20px;
+  font-size: 12px;
   font-weight: 300;
-  color: rgba(255, 255, 255, 0.55);
+  color: #ffffff;
   letter-spacing: 0.03em;
 }
 
@@ -91,10 +93,10 @@
   align-items: center;
   justify-content: center;
   gap: 6px;
-  padding: 14px 40px;
+  padding: 24px 32px;
-  border: 1px solid rgba(255, 255, 255, 0.4);
+  border: 1px solid #ffffff;
   border-radius: 100px;
-  font-size: 14px;
+  font-size: 24px;
   font-weight: 400;
   letter-spacing: 0.1em;
   color: #ffffff;
@@ -127,4 +129,9 @@
   .project__more {
     margin-top: 48px;
   }
+
+  .btnMore {
+    padding: 16px 32px;
+    font-size: 16px;
+  }
 }

src/scss/page/_vision.scss

@@ -16,6 +16,7 @@
   position: absolute;
   inset: 0;
   background: url("../../images/unsplash_Cq5NaI0yKBE.png") center / cover no-repeat;
+  opacity: 0.5;
   pointer-events: none;
 }
 
@@ -39,7 +40,7 @@
 
 .vision__desc {
   max-width: 560px;
-  font-size: clamp(13px, 0.73vw, 14px);
+  font-size: 14px;
   font-weight: 300;
   line-height: 1.8;
   color: #ffffff;
@@ -53,7 +54,7 @@
   max-width: 740px;
 
   .mark {
-    font-size: clamp(60px, 7.6vw, 146px);
+    font-size: clamp(86px, 7.6vw, 146px);
     font-weight: 600;
     line-height: 1;
     margin-top: -0.34em;
@@ -82,7 +83,7 @@
   gap: 12px;
 
   .keyword {
-    font-size: clamp(28px, 3.33vw, 64px);
+    font-size: clamp(32px, 3.33vw, 64px);
     font-weight: 800;
     letter-spacing: 0.01em;
     color: #ffffff;
@@ -90,7 +91,7 @@
   }
 
   .desc {
-    font-size: clamp(12px, 0.73vw, 14px);
+    font-size: 14px;
     font-weight: 300;
     color: #ffffff;
   }