fix: 디자인변경 초반작업

.gitignore

@@ -2,3 +2,4 @@ node_modules/
 dist/
 .DS_Store
 *.local
+.mcp.json

doc/미완료.md

@@ -0,0 +1,69 @@
+# 미완료 / 확인 필요 항목
+
+Figma MCP(`figma-mcp`)로 확인이 안 되거나 추출이 안 되는 항목을 섹션별로 기록한다. 추측해서 임의로 채운 값이 아니라, 실제로 막힌 지점만 기록한다.
+
+---
+
+## 다음 세션 인수인계 (작업 중단 시점 기록)
+
+사용자가 자리를 비워야 해서 PROJECT 섹션 작업 중 중단됨. 아래 순서대로 이어서 진행하면 된다.
+
+### 완료된 섹션
+- HOME, ABOUT US(+EXPERTISE), HISTORY, VISION — 마크업(`src/index.html`)·스타일(`src/scss/page/*.scss`)·필요 JS(`src/js/main.js`) 모두 반영, `npm run build` 통과 확인됨.
+
+### 남은 작업 (순서대로)
+1. **PROJECT 섹션** — 작업 중 Figma 이미지 렌더 API가 429(Rate Limit)를 계속 반환해서 멈춤. 노드 ID는 이미 확보됨 (아래 "Figma 노드 ID 모음" 참고). `mcp__figma__view_node`로 PC(`2247:2202`)와 모바일(`2319:4231`) 다시 렌더 시도부터 시작. 429가 계속되면 5~10분 정도 기다린 후 재시도하거나, 이미 위에서 확보한 PC 전체 컴포지트 이미지(`2247:2093` 렌더 결과, 이 문서/대화 로그에는 없고 이전 대화 컨텍스트에만 있었음 — 새 세션이면 `2247:2093`을 다시 view_node로 떠야 함)로 대략적인 카피/태그만 추정하고 정확한 카피는 "확인 필요"로 명시.
+2. **CONTACT/FOOTER 섹션** — 아직 Figma 노드 ID조차 확보 못함. 사용자에게 PC/모바일 프레임 "Copy link to selection" 링크 요청부터 시작해야 함. 옛 디자인(`src/index.html`에 남아있던 구버전 구조 참고용으로 git log/old commit에서 확인 가능)에는 Head Office 주소, Contact 폼(회사명/담당자/연락처/이메일/문의내용/개인정보동의/SEND), Recruitment 태그(Planner & Consulting/Designer/Publisher/Scripter), footer(브랜드/연락처/copyright)가 있었음 — 새 디자인 렌더(PC 전체 컴포지트, `2247:2093`)에서도 "WELCOME BODA LAB", Head Office, Contact Us 폼, Recruitment 태그, footer가 보였으므로 큰 구조는 유사할 것으로 추정되나 정확한 카피/배치는 미확인.
+3. **GNB 마무리** — HOME 작업 때 1차로 완성했음(데스크톱 6개 메뉴, 모바일 풀스크린 드로어 + 닫기 X). 전체 섹션이 다 만들어진 뒤 스크롤 시 활성 메뉴(`isActive`) 동작, 반응형 폭(좁은 노트북 화면에서 6개 메뉴 안 깨지는지) 최종 점검 필요.
+4. **최종 정리**
+   - `src/scss/index.scss`의 `@use "page/..."` 목록은 이미 `gnb, intro, about, vision, projects, contact` 로 되어 있음. PROJECT/CONTACT 작업 후 파일명을 새 섹션에 맞게 정리할지 결정(`_projects.scss`→`_project.scss` 등 네이밍 통일 여부는 미정).
+   - 안 쓰는 이미지 정리: `about-hand.jpg`는 이미 HTML에서 참조 제거됨(파일 자체는 아직 디스크에 남아있을 수 있음, 삭제 필요). `vision-1/2/3.jpg`도 더 이상 참조 안 됨 — 삭제 검토. `history-1.jpg`는 HISTORY 좌측 사진 placeholder로 재사용 중(삭제하면 안 됨).
+   - `npm run build`, `npm run format` 최종 실행.
+
+### Figma 노드 ID 모음 (file_key: `MnwN1Uzg5F6ks9Clr1brLW`)
+- PC 전체 페이지(컴포지트, 모든 섹션 한눈에 보임): `2247:2093`
+- 01_HOME (PC): `2247:2094`
+- 02_ABOUT US (PC, EXPERTISE 포함): `2247:2230`
+- 03_HISTORY (PC): `2247:2121`
+- VISION PC: `2247:2183` / VISION 모바일: `2319:4183`
+- PROJECT PC: `2247:2202` / PROJECT 모바일: `2319:4231` — **아직 렌더 못 받음(429)**
+- CONTACT/FOOTER — **노드 ID 미확보**, 사용자에게 요청 필요
+- 모바일 전체 페이지(컴포지트): `2319:5243`
+- 모바일 GNB 드로어(열린 상태): `2319:5998`
+
+### Figma MCP 연결 관련 메모 (재현/트러블슈팅용)
+- 이 프로젝트(`d:/repository/boda-lab`)의 figma MCP 서버는 프로젝트 루트 `.mcp.json`에 등록되어 있음 (전역 `~/.claude.json`이 아니라 **프로젝트 단위 `.mcp.json` 파일** 방식).
+- 서버 설정: stdio 방식, `command`는 nvm4w 심볼릭링크(`C:\nvm4w\nodejs\npx.cmd`)가 아니라 **실제 경로**(`C:\Users\HeeDesktop\AppData\Local\nvm\v24.16.0\npx.cmd`)로 지정해야 동작함 — Windows에서 VSCode 확장이 스폰하는 프로세스는 심볼릭링크/PATH를 못 찾는 경우가 있어서 절대경로로 우회한 것. `args: ["-y", "figma-mcp"]`, `env.FIGMA_API_KEY`로 키 전달.
+- 도구: `mcp__figma__add_figma_file(url)` — 파일 전체를 JSON으로 덤프하는데, 파일이 커서 약 25k 토큰 근처(`01_HOME`~`03_HISTORY` 중반)에서 항상 잘림. `node-id` 쿼리 파라미터를 URL에 넣어도 무시되고 항상 전체 문서 기준으로 덤프됨 — 범위 제한 불가.
+- 도구: `mcp__figma__view_node(file_key, node_id)` — 특정 노드를 PNG로 렌더해서 보여줌(파일로 저장은 안 됨, 대화창에만 표시). 섹션별 정밀 확인에 주력 도구로 사용 중. **오늘 PROJECT 섹션 작업 중 이 API가 429를 반환하기 시작했고, 5분+ 대기해도 풀리지 않았음.** 다음 세션에서도 재현되면 더 오래(10분+) 기다리거나, 사용자에게 Figma API 키/요금제 쪽 rate limit 상태를 확인해달라고 요청할 것.
+- 이미지 에셋(사진/목업) 자체는 이 MCP로 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/`에 받아와야 한다.
+
+## HOME
+
+- 배경의 원형 동심원 패턴 이미지(`unsplash:-cKXtsJWU-I`, opacity 0.2)는 에셋 추출이 안 돼서 반영하지 못했다. 사용자 결정에 따라 기존 GSAP blob 애니메이션(`introAnimation.js`)을 그대로 유지하기로 함 — 동심원 패턴 이미지를 쓰고 싶다면 Figma에서 해당 이미지를 export해서 전달 필요.
+
+## GNB (모바일 드로어)
+
+- 모바일 메뉴 항목 폰트가 Figma 렌더에서는 업라이트(정체) 세리프로 보이는데, 프로젝트에 있는 폰트 파일은 `DM Serif Display Italic`(이탤릭)뿐이라 정확히 매칭되는 폰트가 없다. 일단 이탤릭으로 대체 적용했다. 업라이트 세리프 폰트 파일을 구해서 교체할지 확인 필요.
+
+## HISTORY
+
+- 좌측 세로 사진(나선형 건축물 텍스처)은 에셋 추출이 안 돼서 기존 `images/history-1.jpg`를 임시로 대체 사용했다. 실제 Figma 이미지로 교체 필요.
+- 2024/2023/2022/2021년 그룹은 Figma 렌더에서 아코디언이 collapsed 상태로 보여서 항목이 1개씩만 보인다(2024: 우리은행 로보어드바이저 구축, 2023: 신한은행 슈퍼SOL 운영 계약, 2022: 한화금융 서비스앱 플러스 리뉴얼 2차 계약, 2021: 롯데 렌터카 차세대 구축 계약). 펼쳤을 때 추가 항목이 더 있는지는 정적 렌더로 확인이 안 돼서, 일단 보이는 1개씩만 반영했다. 펼침 상태의 전체 목록 확인 필요.
+- HISTORY 섹션의 모바일 레이아웃은 별도 figma 크롭을 못 받아서, 좌측 사진을 숨기고 타임라인만 세로로 쌓는 형태로 추정 구현했다. 실제 모바일 디자인 확인 필요.
+
+## VISION
+
+- 배경의 별빛/우주 텍스처 이미지는 ABOUT US와 마찬가지로 에셋 추출이 안 돼서 단색 `$color-bg`로 대체했다.
+- 인용구("Flawless execution...") 텍스트의 Figma 렌더 폰트가 라운드체 산세리프로 보이는데, 프로젝트에 등록된 폰트(SUIT, DM Serif Display Italic) 중 일치하는 게 없다. Figma 쪽에서 폰트가 누락되어 대체 렌더링된 것일 수도 있어 원래 의도된 폰트를 특정하기 어렵다. 일단 기본 폰트(SUIT)로 대체했다.
+
+---
+
+## (이후 섹션 작업하면서 추가)

src/index.html

@@ -18,10 +18,12 @@
         </a>
         <nav class="gnb__nav">
           <ul class="gnb__navList">
-            <li class="gnb__navItem"><a class="gnb__navLink" href="#intro">HOME</a></li>
+            <li class="gnb__navItem"><a class="gnb__navLink isActive" href="#intro">HOME</a></li>
-            <li class="gnb__navItem"><a class="gnb__navLink" href="#about">ABOUT</a></li>
+            <li class="gnb__navItem"><a class="gnb__navLink" href="#about">ABOUT US</a></li>
-            <li class="gnb__navItem"><a class="gnb__navLink" href="#project">PROJECTS</a></li>
+            <li class="gnb__navItem"><a class="gnb__navLink" href="#history">HISTORY</a></li>
-            <li class="gnb__navItem"><a class="gnb__navLink" href="#contact">CONTACT</a></li>
+            <li class="gnb__navItem"><a class="gnb__navLink" href="#vision">VISION</a></li>
+            <li class="gnb__navItem"><a class="gnb__navLink" href="#project">PROJECT</a></li>
+            <li class="gnb__navItem"><a class="gnb__navLink" href="#contact">CONTACT US</a></li>
           </ul>
         </nav>
         <button class="gnb__hamburger" aria-label="메뉴 열기" aria-expanded="false">
@@ -32,11 +34,17 @@
       </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" href="#intro">HOME</a></li>
+          <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</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</a></li>
+          <li class="gnb__mobileNavItem"><a class="gnb__mobileNavLink" href="#contact">CONTACT US</a></li>
         </ul>
       </nav>
     </header>
@@ -52,7 +60,7 @@
         </div>
 
         <div class="intro__content">
-          <p class="intro__sub">Creative Development Company</p>
+          <p class="intro__sub">Our Company</p>
           <h1 class="intro__title">THE BODA LAB</h1>
         </div>
         
@@ -62,269 +70,246 @@
 
       </section>
 
-      <!-- 02. ABOUT -->
+      <!-- 02. ABOUT US -->
       <section id="about" class="about">
         <div class="about__inner">
-          <div class="about__text">
+          <div class="about__head">
             <h2 class="sectionTitle">ABOUT US</h2>
-            <p class="desc">
+            <p class="about__desc">
-              The BODA LAB은 디지털시대에 발맞춰 클라이언트의 비즈니스를 위한<br class="breakLine" />
+              디지털 시대에 발맞춰, 차별화된 기술적 노하우로 클라이언트의 비즈니스에 완벽한 디지털 경험을 선사합니다.<br class="breakLine" />
-              다양한 기술적 노하우로 완성된 경험을 제공합니다.<br class="breakLine" />
+              우리의 스펙트럼은 웹과 앱을 넘어 세상의 모든 비즈니스에 강력한 영향력을 전합니다.
-              우리의 활동은 웹, 앱, 모바일을 넘나들며 세상의 모든 비즈니스 활동에 강한 영향력을 전달합니다.
             </p>
-          </div>
+            <div class="about__quote">
-          <div class="about__image">
+              <span class="about__quoteMark" aria-hidden="true">“</span>
-            <img class="about__imageThumb" src="images/about-hand.jpg" alt="스케치하는 손" />
+              <p class="about__quoteText">Creative Development Company<br />BODA.Lab</p>
-          </div>
-          <div class="about__caption">
-            <div class="about__captionTrack">
-              <span class="about__captionText">Creative Development Company BODA.Lab</span>
-              <span class="about__captionText">Creative Development Company BODA.Lab</span>
-              <span class="about__captionText">Creative Development Company BODA.Lab</span>
-              <span class="about__captionText">Creative Development Company BODA.Lab</span>
             </div>
           </div>
+          <ul class="about__expertiseList">
+            <li class="about__expertiseItem">
+              <span class="num">01</span>
+              <h3 class="name">UX<br />Consulting</h3>
+              <p class="text">UX 컨설팅</p>
+            </li>
+            <li class="about__expertiseItem">
+              <span class="num">02</span>
+              <h3 class="name">Plarform<br />Building</h3>
+              <p class="text">웹사이트 구축</p>
+            </li>
+            <li class="about__expertiseItem">
+              <span class="num">03</span>
+              <h3 class="name">Mobile<br />App &amp; Web</h3>
+              <p class="text">모바일 앱 &amp; 웹</p>
+            </li>
+            <li class="about__expertiseItem">
+              <span class="num">04</span>
+              <h3 class="name">Service<br />Management</h3>
+              <p class="text">서비스 운영</p>
+            </li>
+          </ul>
         </div>
       </section>
 
       <!-- 03. HISTORY -->
       <section id="history" class="history">
-        <div class="history__top">
+        <div class="history__inner">
-          <h2 class="sectionTitle sectionTitleDark">HISTORY</h2>
+          <h2 class="sectionTitle sectionTitleDark history__title">HISTORY</h2>
+          <div class="history__photo">
+            <img class="img" src="images/history-1.jpg" alt="" />
+          </div>
           <div class="history__timeline">
-            
+            <div class="history__yearGroup isOpen">
-            <div class="history__yearGroup">
+              <button class="history__yearToggle" aria-expanded="true" aria-controls="history2025">
-              <span class="history__year">2024</span>
+                <span class="history__year">2025</span>
-              <ul class="history__list">
+                <span class="icon" aria-hidden="true"></span>
+              </button>
+              <ul class="history__list" id="history2025">
                 <li class="history__listItem">
-                  <strong class="history__listDate">12.01</strong>
+                  <div class="main">
-                  <span class="history__listText">신한은행 슈퍼소울 운영 계약</span>
+                    <h3 class="title">한국전자기술연구원 대쉬보드 구축</h3>
+                    <p class="sub">
+                      유체기기 위험 운전 알고리즘 모니터링 프로그램 / 송풍 제어 모듈 비정상 운전 상태 진단 프로그램<br />
+                      윈도우 프로그래밍 개발, 대시보드 UX UI 기획/디자인
+                    </p>
+                  </div>
+                  <span class="date">25.12 - 26.02</span>
                 </li>
                 <li class="history__listItem">
-                  <strong class="history__listDate">09.01</strong>
+                  <div class="main">
-                  <span class="history__listText">한화금융통합 서비스 구축 계약</span>
+                    <h3 class="title">현대차 판매시스템 구축</h3>
+                    <p class="sub">React.Js, F/E, B/E 개발</p>
+                  </div>
+                  <span class="date">25.08 - 26.06</span>
                 </li>
                 <li class="history__listItem">
-                  <strong class="history__listDate">05.30</strong>
+                  <div class="main">
-                  <span class="history__listText">신한은행 슈퍼소울 구축 계약</span>
+                    <h3 class="title">LG 개인정보삭제 프로그램개발</h3>
+                    <p class="sub">React.Js, F/E, B/E 개발</p>
+                  </div>
+                  <span class="date">25.08 - 25.12</span>
                 </li>
                 <li class="history__listItem">
-                  <strong class="history__listDate">05.01</strong>
+                  <div class="main">
-                  <span class="history__listText">롯데 렌터카 오토리스 구축 계약</span>
+                    <h3 class="title">신한투자증권_New 슈퍼SOL 통합 프로젝트 <span class="badge">Finance</span></h3>
+                    <p class="sub">Vue.Js, Publishing</p>
+                  </div>
+                  <span class="date">25.07 - 26.07</span>
+                </li>
+                <li class="history__listItem">
+                  <div class="main">
+                    <h3 class="title">신한은행_New 슈퍼SOL 통합 프로젝트 <span class="badge">Finance</span></h3>
+                    <p class="sub">React.Js, Purescript, Publishing</p>
+                  </div>
+                  <span class="date">25.07 - 26.06</span>
+                </li>
+                <li class="history__listItem">
+                  <div class="main">
+                    <h3 class="title">한화생명 신탁시스템 재구축 <span class="badge">Finance</span></h3>
+                    <p class="sub">React.Js, Pblishing, UX UI 기획, F/E 개발</p>
+                  </div>
+                  <span class="date">25.06 - 26.06</span>
+                </li>
+                <li class="history__listItem">
+                  <div class="main">
+                    <h3 class="title">SK매직 운영 개발</h3>
+                    <p class="sub">React.Js, Vue.Js, F/E, B/E 개발</p>
+                  </div>
+                  <span class="date">25.07 - 25.12</span>
+                </li>
+                <li class="history__listItem">
+                  <div class="main">
+                    <h3 class="title">롯데카드 외국인 선불카드 연계플랫폼 구축대행 <span class="badge">Finance</span></h3>
+                    <p class="sub">Vue.Js, Next.Js, Publishing, F/E 개발</p>
+                  </div>
+                  <span class="date">25.04 - 25.11</span>
+                </li>
+                <li class="history__listItem">
+                  <div class="main">
+                    <h3 class="title">LG전자 홈스타일(리빙) 서비스 구축 프로젝트</h3>
+                    <p class="sub">UX UI 기획</p>
+                  </div>
+                  <span class="date">25.04 - 25.08</span>
+                </li>
+                <li class="history__listItem">
+                  <div class="main">
+                    <h3 class="title">에어인천 ERP 구축 프로젝트</h3>
+                    <p class="sub">UX UI 디자인, Publishing</p>
+                  </div>
+                  <span class="date">25.03 - 25.04</span>
+                </li>
+                <li class="history__listItem">
+                  <div class="main">
+                    <h3 class="title">하나캐피탈 자산관리시스템 재구축 프로젝트 <span class="badge">Finance</span></h3>
+                    <p class="sub">Vue.Js, Nuxt.Js, Publishing, F/E 개발</p>
+                  </div>
+                  <span class="date">25.03 - 25.08</span>
+                </li>
+                <li class="history__listItem">
+                  <div class="main">
+                    <h3 class="title">현대해상 고도화 구축 <span class="badge">Finance</span></h3>
+                    <p class="sub">React, Typescript, Scss</p>
+                  </div>
+                  <span class="date">25.02 - 26.01</span>
+                </li>
+                <li class="history__listItem">
+                  <div class="main">
+                    <h3 class="title">우리은행 전자지갑 구축 <span class="badge">Finance</span></h3>
+                    <p class="sub">React, Typescript, Recoil, Spring Boot</p>
+                  </div>
+                  <span class="date">25.01 - 25.07</span>
                 </li>
               </ul>
             </div>
 
             <div class="history__yearGroup">
-              <span class="history__year">2023</span>
+              <button class="history__yearToggle" aria-expanded="false" aria-controls="history2024">
-              <ul class="history__list">
+                <span class="history__year">2024</span>
+                <span class="icon" aria-hidden="true"></span>
+              </button>
+              <ul class="history__list" id="history2024" hidden>
                 <li class="history__listItem">
-                  <strong class="history__listDate">12.01</strong>
+                  <div class="main">
-                  <span class="history__listText">신한은행 슈퍼소울 운영 계약</span>
+                    <h3 class="title">우리은행 로보어드바이저 구축 <span class="badge">Finance</span></h3>
-                </li>
+                    <p class="sub">React, Typescript, Recoil</p>
-                <li class="history__listItem">
+                  </div>
-                  <strong class="history__listDate">11.01</strong>
+                  <span class="date">24.11 - 25.07</span>
-                  <span class="history__listText">한화금융 라이프 플러스 아카데미 구축 계약</span>
-                </li>
-                <li class="history__listItem">
-                  <strong class="history__listDate">10.01</strong>
-                  <span class="history__listText">대교 차세대 구축 계약</span>
-                </li>
-                <li class="history__listItem">
-                  <strong class="history__listDate">09.01</strong>
-                  <span class="history__listText">한화금융통합 서비스 구축 계약</span>
-                </li>
-                <li class="history__listItem">
-                  <strong class="history__listDate">05.30</strong>
-                  <span class="history__listText">신한은행 슈퍼소울 구축 계약</span>
-                </li>
-                <li class="history__listItem">
-                  <strong class="history__listDate">05.01</strong>
-                  <span class="history__listText">롯데 렌터카 오토리스 구축 계약</span>
                 </li>
               </ul>
             </div>
 
             <div class="history__yearGroup">
-              <span class="history__year">2022</span>
+              <button class="history__yearToggle" aria-expanded="false" aria-controls="history2023">
-              <ul class="history__list">
+                <span class="history__year">2023</span>
+                <span class="icon" aria-hidden="true"></span>
+              </button>
+              <ul class="history__list" id="history2023" hidden>
                 <li class="history__listItem">
-                  <strong class="history__listDate">11.01</strong>
+                  <div class="main">
-                  <span class="history__listText">한화금융 서비스앱 플러스 리뉴얼 2차 계약</span>
+                    <h3 class="title">신한은행 슈퍼SOL 운영 계약 <span class="badge">Finance</span></h3>
-                </li>
+                    <p class="sub">Vue</p>
-                <li class="history__listItem">
+                  </div>
-                  <strong class="history__listDate">09.01</strong>
+                  <span class="date">23.12</span>
-                  <span class="history__listText">한화금융 서비스앱 플러스 리뉴얼 1차 계약</span>
-                </li>
-                <li class="history__listItem">
-                  <strong class="history__listDate">08.01</strong>
-                  <span class="history__listText">밀레 쇼핑몰 리뉴얼 구축 계약</span>
-                </li>
-                <li class="history__listItem">
-                  <strong class="history__listDate">07.01</strong>
-                  <span class="history__listText">오뚜기 쇼핑몰 리뉴얼 구축 계약</span>
-                </li>
-                <li class="history__listItem">
-                  <strong class="history__listDate">05.01</strong>
-                  <span class="history__listText">캐나다구스 코리아 쇼핑몰 구축 계약</span>
                 </li>
               </ul>
             </div>
 
             <div class="history__yearGroup">
-              <span class="history__year">2023</span>
+              <button class="history__yearToggle" aria-expanded="false" aria-controls="history2022">
-              <ul class="history__list">
+                <span class="history__year">2022</span>
+                <span class="icon" aria-hidden="true"></span>
+              </button>
+              <ul class="history__list" id="history2022" hidden>
                 <li class="history__listItem">
-                  <strong class="history__listDate">12.01</strong>
+                  <div class="main">
-                  <span class="history__listText">신한은행 슈퍼소울 운영 계약</span>
+                    <h3 class="title">한화금융 서비스앱 플러스 리뉴얼 2차 계약 <span class="badge">Finance</span></h3>
-                </li>
+                  </div>
-                <li class="history__listItem">
+                  <span class="date">22.11</span>
-                  <strong class="history__listDate">11.01</strong>
-                  <span class="history__listText">한화금융 라이프 플러스 아카데미 구축 계약</span>
-                </li>
-                <li class="history__listItem">
-                  <strong class="history__listDate">10.01</strong>
-                  <span class="history__listText">대교 차세대 구축 계약</span>
-                </li>
-                <li class="history__listItem">
-                  <strong class="history__listDate">09.01</strong>
-                  <span class="history__listText">한화금융통합 서비스 구축 계약</span>
-                </li>
-                <li class="history__listItem">
-                  <strong class="history__listDate">05.30</strong>
-                  <span class="history__listText">신한은행 슈퍼소울 구축 계약</span>
-                </li>
-                <li class="history__listItem">
-                  <strong class="history__listDate">05.01</strong>
-                  <span class="history__listText">롯데 렌터카 오토리스 구축 계약</span>
                 </li>
               </ul>
             </div>
 
             <div class="history__yearGroup">
-              <span class="history__year">2022</span>
+              <button class="history__yearToggle" aria-expanded="false" aria-controls="history2021">
-              <ul class="history__list">
+                <span class="history__year">2021</span>
+                <span class="icon" aria-hidden="true"></span>
+              </button>
+              <ul class="history__list" id="history2021" hidden>
                 <li class="history__listItem">
-                  <strong class="history__listDate">11.01</strong>
+                  <div class="main">
-                  <span class="history__listText">한화금융 서비스앱 플러스 리뉴얼 2차 계약</span>
+                    <h3 class="title">롯데 렌터카 차세대 구축 계약</h3>
-                </li>
+                  </div>
-                <li class="history__listItem">
+                  <span class="date">21.11</span>
-                  <strong class="history__listDate">09.01</strong>
-                  <span class="history__listText">한화금융 서비스앱 플러스 리뉴얼 1차 계약</span>
-                </li>
-                <li class="history__listItem">
-                  <strong class="history__listDate">08.01</strong>
-                  <span class="history__listText">밀레 쇼핑몰 리뉴얼 구축 계약</span>
-                </li>
-                <li class="history__listItem">
-                  <strong class="history__listDate">07.01</strong>
-                  <span class="history__listText">오뚜기 쇼핑몰 리뉴얼 구축 계약</span>
-                </li>
-                <li class="history__listItem">
-                  <strong class="history__listDate">05.01</strong>
-                  <span class="history__listText">케나다구스 코리아 쇼핑몰 구축 계약</span>
                 </li>
               </ul>
             </div>
-            
-            <div class="history__yearGroup">
-              <span class="history__year">2021</span>
-              <ul class="history__list">
-                <li class="history__listItem">
-                  <strong class="history__listDate">11.22</strong>
-                  <span class="history__listText">롯데 렌터카 차세대 구축 계약</span>
-                </li>
-                <li class="history__listItem">
-                  <strong class="history__listDate">11.01</strong>
-                  <span class="history__listText">LSN MALL 구축 계약</span>
-                </li>
-                <li class="history__listItem">
-                  <strong class="history__listDate">7.29</strong>
-                  <span class="history__listText">(주)보다랩 설립</span>
-                </li>
-                <li class="history__listItem">
-                  <strong class="history__listDate">5.15</strong>
-                  <span class="history__listText">현대홈쇼핑 리뉴얼 구축 계약</span>
-                </li>
-                <li class="history__listItem">
-                  <strong class="history__listDate">01.11</strong>
-                  <span class="history__listText">KONA I 헬스케어 구축 계약</span>
-                </li>
-                <li class="history__listItem">
-                  <strong class="history__listDate">01.11</strong>
-                  <span class="history__listText">유아이팩토리 설립</span>
-                </li>
-              </ul>
-            </div>
-
           </div>
         </div>
-        <div class="history__bottom">
-          <img class="history__img history__img--1" src="images/history-1.jpg" alt="" />
-          <img class="history__img history__img--2" src="images/history-2.jpg" alt="" />
-          <img class="history__img history__img--3" src="images/history-3.jpg" alt="" />
-        </div>
       </section>
 
-      <!-- 04. BODA INTRO -->
+      <!-- 04. VISION -->
-      <section id="boda-intro" class="bodaIntro">
-        <div class="bodaIntro__content">
-        
-          <h2 class="bodaIntro__title">BODA Lab Co., Ltd.</h2>
-          <p class="bodaIntro__desc">
-            accurately identifies customer needs to<br class="breakLine" />
-            achieve the best completeness and satisfaction.<br class="breakLine" />
-            We are working on a project with talented<br class="breakLine" />
-            people with high technology.
-          </p>
-          
-        </div>
-        <a href="#vision" class="scrollDown scrollDownSm" aria-label="아래로 스크롤"><img src="images/icon-scroll-down.svg" alt="" /></a>
-
-      </section>
-
-      <!-- 05. VISION -->
       <section id="vision" class="vision">
         <div class="vision__inner">
-          <div class="vision__item">
+          <div class="vision__head">
-            <div class="vision__text">
+            <h2 class="sectionTitle">VISION</h2>
-              <em class="vision__keyword">Perspective</em>
+            <p class="vision__desc">우리는 고객사의 니즈를 정확히 파악하고, 우수한 기술력을 가진 인재들을 투입하여 프로젝트의 완성도와 만족도를 극대화합니다.</p>
-              <p class="vision__textDesc">
-                클라이언트의 고유한 가치를 발견하고
-                <br class="breakLine" />
-                차별화된 디지털 경험을 설계합니다.
-              </p>
-            </div>
-            <div class="vision__image">
-              <img class="vision__imageThumb" src="images/vision-1.jpg" alt="Uniqueness" />
-            </div>
           </div>
-          <div class="vision__item vision__itemReverse">
+          <div class="vision__quote">
-            <div class="vision__image">
+            <span class="mark" aria-hidden="true">”</span>
-              <img class="vision__imageThumb" src="images/vision-2.jpg" alt="Expertise" />
+            <p class="text">Flawless execution, absolute satisfaction. BODA Lab delivers excellence through advanced tech talent.</p>
-            </div>
-            <div class="vision__text">
-              <em class="vision__keyword">Expertise</em>
-              <p class="vision__textDesc">
-                10년 이상의 기술 노하우를 기반으로
-                <br class="breakLine" />
-                최적의 솔루션을 제공합니다.
-              </p>
-            </div>
-          </div>
-          <div class="vision__item">
-            <div class="vision__text">
-              <em class="vision__keyword">Satisfaction</em>
-              <p class="vision__textDesc">
-                고객의 만족을 최우선 가치로 삼아
-                <br class="breakLine" />
-                완성도 높은 결과물을 만듭니다.
-              </p>
-            </div>
-            <div class="vision__image">
-              <img class="vision__imageThumb" src="images/vision-3.jpg" alt="Satisfaction" />
-            </div>
           </div>
+          <ul class="vision__keywordList">
+            <li class="vision__keywordItem">
+              <h3 class="keyword">PERSPECTIVE</h3>
+              <p class="desc">고객사의 눈으로 관점을 바라봅니다.</p>
+            </li>
+            <li class="vision__keywordItem">
+              <h3 class="keyword">EXPERTISE</h3>
+              <p class="desc">다양한 기술력을 가진 인재들을 보유하고 있습니다.</p>
+            </li>
+            <li class="vision__keywordItem">
+              <h3 class="keyword">SATISFACTION</h3>
+              <p class="desc">타사보다 높은 만족도와 완성도를 갖추고 있습니다.</p>
+            </li>
+          </ul>
         </div>
       </section>
 

src/js/main.js

@@ -10,16 +10,15 @@ $(function () {
   const $gnb = $("#gnb");
   const $hamburger = $(".gnb__hamburger");
   const $mobileNav = $(".gnb__mobileNav");
+  const $mobileNavClose = $(".gnb__mobileNavClose");
 
   // 섹션 → nav 귀속 맵
   const sectionToNav = {
     intro: "intro",
     about: "about",
-    history: "about",
+    history: "history",
-    "boda-intro": "about",
+    vision: "vision",
-    vision: "about",
     project: "project",
-    expertise: "project",
     contact: "contact",
   };
 
@@ -76,6 +75,28 @@ $(function () {
     $mobileNav.removeClass("isOpen");
   });
 
+  // 모바일 메뉴 닫기 버튼
+  $mobileNavClose.on("click", function () {
+    $hamburger.removeClass("isOpen").attr("aria-expanded", false);
+    $mobileNav.removeClass("isOpen");
+  });
+
+  // History 아코디언
+  $(".history__yearToggle").on("click", function () {
+    const $group = $(this).closest(".history__yearGroup");
+    const $list = $("#" + $(this).attr("aria-controls"));
+    const isOpen = $group.hasClass("isOpen");
+
+    $group.toggleClass("isOpen", !isOpen);
+    $(this).attr("aria-expanded", !isOpen);
+
+    if (isOpen) {
+      $list.attr("hidden", "");
+    } else {
+      $list.removeAttr("hidden");
+    }
+  });
+
   // Contact 아코디언
   $(".contactAccordion__header").on("click", function () {
     const $item = $(this).closest(".contactAccordion__item");

src/scss/base/_variable.scss

@@ -3,6 +3,7 @@ $color-bg-light: #e5e5e5;
 $color-cyan: #00f0ff;
 $color-purple: #8f00ff;
 $color-blue: #7796ff;
+$color-badge-blue: #0071f2;
 $color-white: #ffffff;
 $color-dark: #0d0d0d;
 $color-gray: #999;

src/scss/index.scss

@@ -9,6 +9,7 @@
 @use "page/gnb";
 @use "page/intro";
 @use "page/about";
+@use "page/vision";
 @use "page/projects";
 @use "page/contact";
 

src/scss/page/_about.scss

@@ -1,360 +1,290 @@
 @use "../base/variable" as *;
 @use "../base/mixin" as *;
 
-// About
+// About + Expertise
 .about {
-  height: 956px;
+  min-height: 100vh;
   background: $color-bg;
-  align-items: stretch;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  padding: clamp(80px, 6.25vw, 120px) clamp(24px, 6.25vw, 120px);
 }
 
 .about__inner {
-  position: relative;
+  display: flex;
-  height: 100%;
+  flex-direction: column;
+  gap: clamp(60px, 10.4vw, 200px);
 }
 
-.about__text {
+.about__head {
-  padding: 120px 16.7% 60px;
+  display: flex;
+  flex-direction: column;
+  gap: clamp(30px, 3.1vw, 60px);
 
   .sectionTitle {
-    margin: 0 0 70px;
+    margin: 0;
-  }
-
-  .desc {
-    padding: 0 0 0 80px;
-    font-size: clamp(13px, 1.1vw, 16px);
-    font-weight: 300;
-    line-height: 1.8;
-    color: $color-white;
-    opacity: 0.9;
   }
 }
 
-.about__image {
+.about__desc {
-  position: absolute;
+  font-size: clamp(13px, 1.1vw, 16px);
-  top: 229px;
+  font-weight: 300;
-  right: 0;
+  line-height: 1.8;
-  width: 42%;
-}
-
-.about__imageThumb {
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-  object-position: center;
-}
-
-.about__caption {
-  position: absolute;
-  bottom: 120px;
-  left: 0;
-  right: 0;
-  padding: 0;
-  background: linear-gradient(to top, rgba($color-bg, 0.7) 0%, transparent 100%);
-  overflow: hidden;
-}
-
-.about__captionTrack {
-  display: flex;
-  width: max-content;
-  animation: marquee 18s linear infinite;
-}
-
-.about__captionText {
-  font-size: clamp(18px, 2.5vw, 36px);
-  font-weight: 400;
   color: $color-white;
-  white-space: nowrap;
+  opacity: 0.9;
-  padding-right: 80px;
 }
 
-@keyframes marquee {
+.about__quote {
-  from {
+  display: flex;
-    transform: translateX(0);
+  align-items: flex-end;
+  gap: 10px;
+}
+
+.about__quoteMark {
+  font-size: clamp(60px, 7.6vw, 146px);
+  font-weight: 600;
+  line-height: 1;
+  color: $color-white;
+}
+
+.about__quoteText {
+  font-size: clamp(22px, 2.4vw, 46px);
+  font-weight: 100;
+  line-height: 1.2;
+  color: $color-white;
+}
+
+.about__expertiseList {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
+  gap: clamp(24px, 3vw, 60px);
+  list-style: none;
+}
+
+.about__expertiseItem {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+
+  .num {
+    font-size: clamp(14px, 0.85vw, 16px);
+    font-weight: 800;
+    color: $color-blue;
   }
-  to {
+
-    transform: translateX(-25%);
+  .name {
+    font-size: clamp(24px, 2.1vw, 40px);
+    font-weight: 800;
+    text-transform: uppercase;
+    line-height: 1.2;
+    color: $color-white;
+  }
+
+  .text {
+    font-size: clamp(12px, 0.75vw, 14px);
+    font-weight: 300;
+    color: $color-white;
   }
 }
 
 // History
 .history {
   background: $color-bg-light;
-  padding: 0 0 0;
+  padding: clamp(60px, 6.25vw, 120px) clamp(24px, 6.25vw, 120px);
 }
 
-.history__top {
+.history__inner {
-  max-width: 1280px;
+  position: relative;
-  padding: 120px 40px 120px;
+  display: flex;
-  margin: 0 auto;
+  align-items: flex-start;
+  gap: clamp(40px, 6.25vw, 120px);
 }
 
-.history__top .sectionTitleDark {
+.history__photo {
-  margin-bottom: 88px;
+  position: relative;
+  flex: 0 0 clamp(220px, 26vw, 500px);
+  align-self: stretch;
+  overflow: hidden;
+  background: $color-dark;
+
+  .img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+  }
+}
+
+.history__title {
+  position: absolute;
+  top: clamp(16px, 2vw, 32px);
+  left: clamp(16px, 2vw, 32px);
+  z-index: 1;
+  color: $color-white;
 }
 
 .history__timeline {
-  display: grid;
+  flex: 1;
-  grid-template-columns: repeat(3, 1fr);
+  min-width: 0;
-  gap: 60px 24px;
 }
 
 .history__yearGroup {
+  border-top: 1px solid rgba($color-dark, 0.15);
+
+  &:last-child {
+    border-bottom: 1px solid rgba($color-dark, 0.15);
+  }
+}
+
+.history__yearToggle {
   display: flex;
-  flex-direction: column;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  padding: clamp(16px, 1.8vw, 24px) 0;
+  background: none;
+  border: none;
+  cursor: pointer;
+
+  .icon {
+    position: relative;
+    width: 28px;
+    height: 28px;
+    border: 1px solid $color-dark;
+    border-radius: 50%;
+    flex-shrink: 0;
+
+    &::before,
+    &::after {
+      content: "";
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      width: 10px;
+      height: 1px;
+      background: $color-dark;
+      transform: translate(-50%, -50%);
+    }
+
+    &::after {
+      transform: translate(-50%, -50%) rotate(90deg);
+      transition: opacity 0.2s;
+    }
+  }
+}
+
+.history__yearGroup.isOpen .history__yearToggle .icon::after {
+  opacity: 0;
 }
 
 .history__year {
-  font-size: clamp(24px, 2.5vw, 32px);
+  font-size: clamp(28px, 2.5vw, 40px);
   font-weight: 100;
   color: $color-dark;
-  margin-bottom: 32px;
   line-height: 1;
 }
 
 .history__list {
   display: flex;
   flex-direction: column;
-  gap: 12px;
-  border-left: 1px solid #0d0d0d;
-  padding: 0 0 0 23px;
 }
 
 .history__listItem {
   display: flex;
-  flex-direction: column;
+  align-items: flex-start;
-  gap: 4px;
+  justify-content: space-between;
-}
+  gap: 24px;
+  padding: clamp(12px, 1.2vw, 16px) 0;
+  border-top: 1px solid rgba($color-dark, 0.08);
 
-.history__listDate {
+  &:first-child {
-  font-size: 14px;
+    border-top: none;
-  font-weight: 700;
-  color: $color-dark;
-  line-height: 1.6;
-}
-
-.history__listText {
-  font-size: clamp(12px, 1vw, 16px);
-  font-weight: 300;
-  color: $color-dark;
-  line-height: 1.6;
-}
-
-.history__bottom {
-  position: relative;
-  background: $color-bg;
-  height: 480px;
-}
-
-.history__img {
-  position: absolute;
-  object-fit: cover;
-
-  &.history__img--1 {
-    width: 16.67%;
-    top: 0px;
-    left: 0;
   }
 
-  &.history__img--2 {
+  .main {
-    width: 27.1%;
+    display: flex;
-    left: 50%;
+    flex-direction: column;
-    transform: translateX(-50%);
+    gap: 4px;
-    top: -60px;
   }
 
-  &.history__img--3 {
+  .title {
-    width: 18.23%;
+    font-size: clamp(14px, 1vw, 16px);
-    top: 0px;
+    font-weight: 400;
-    left: 0;
+    color: $color-dark;
   }
-}
 
-// Boda Intro
+  .badge {
-.bodaIntro {
+    display: inline-block;
-  position: relative;
+    margin-left: 6px;
-  padding: 120px 0 210px;
+    padding: 2px 8px;
-  background: $color-bg;
+    font-size: 10px;
-  display: flex;
+    font-weight: 700;
-  align-items: center;
+    color: $color-badge-blue;
-  justify-content: center;
+    border: 1px solid $color-badge-blue;
-  text-align: center;
+    border-radius: 4px;
-
+    vertical-align: middle;
-  .scrollDown {
-    position: absolute;
-    left: 50%;
-    bottom: 0;
-    transform: translateX(-50%);
   }
-}
 
-.bodaIntro__content {
+  .sub {
-  display: flex;
+    font-size: clamp(11px, 0.8vw, 13px);
-  flex-direction: column;
+    font-weight: 300;
-  align-items: center;
+    color: rgba($color-dark, 0.55);
-  text-align: center;
+    line-height: 1.6;
+  }
 
-  font-size: clamp(20px, 3vw, 56px);
+  .date {
-  line-height: 1.5;
+    flex-shrink: 0;
-  font-weight: 600;
+    font-size: clamp(12px, 0.85vw, 14px);
-}
+    font-weight: 400;
-
+    color: rgba($color-dark, 0.65);
-.bodaIntro__desc {
+    white-space: nowrap;
-  color: rgba($color-white, 0.3);
+  }
-}
-
-// Vision
-.vision {
-  background: $color-bg;
-}
-
-.vision__inner {
-  display: flex;
-  flex-direction: column;
-}
-
-.vision__item {
-  display: flex;
-  align-items: stretch;
-  height: 33.333vh;
-  min-height: 280px;
-}
-
-.vision__itemReverse {
-  flex-direction: row-reverse;
-}
-
-.vision__text {
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  width: 50%;
-  padding: 40px 80px;
-  gap: 20px;
-}
-
-.vision__keyword {
-  font-family: $font-serif;
-  font-style: italic;
-  font-size: clamp(32px, 4vw, 56px);
-  color: $color-white;
-  line-height: 1;
-}
-
-.vision__textDesc {
-  font-size: clamp(13px, 1vw, 15px);
-  font-weight: 300;
-  line-height: 1.8;
-  color: rgba($color-white, 0.75);
-}
-
-.vision__image {
-  width: 50%;
-  overflow: hidden;
-}
-
-.vision__imageThumb {
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-  transition: transform 0.6s ease;
-}
-
-.vision__image:hover .vision__imageThumb {
-  transform: scale(1.04);
 }
 
 @include mo {
   .about {
     height: auto;
-    min-height: 100vh;
+    min-height: auto;
+    padding: calc(#{$gnb-height-mo} + 40px) 24px 60px;
+  }
+
+  .about__quote {
     flex-direction: column;
+    align-items: flex-start;
+    gap: 4px;
   }
 
-  .about__inner {
+  .about__expertiseList {
     flex-direction: column;
-  }
+    gap: 32px;
-
-  .about__text {
-    width: 100%;
-    padding: calc(#{$gnb-height-mo} + 40px) 24px 40px;
-    gap: 40px;
-  }
-
-  .about__image {
-    width: 100%;
-    height: 56vw;
-    min-height: 260px;
-  }
-
-  .about__caption {
-    font-size: 16px;
-    padding: 16px;
   }
 
   .breakLine {
     display: none;
   }
 
-  .history__top {
+  .history {
-    padding: 60px 24px 40px;
+    padding: 60px 24px;
   }
 
-  .history__top .sectionTitleDark {
+  .history__inner {
+    flex-direction: column;
+  }
+
+  .history__title {
+    position: static;
     margin-bottom: 32px;
+    color: $color-dark;
   }
 
-  .history__timeline {
+  .history__photo {
-    grid-template-columns: 1fr 1fr;
+    display: none;
-    gap: 40px 20px;
   }
 
-  .history__bottom {
+  .history__listItem {
-    padding: 0 24px 60px;
+    flex-direction: column;
+    gap: 6px;
   }
 
-  .history__images {
-    height: 260px;
-    margin-top: -40px;
-  }
-
-  .history__img1 {
-    width: 120px;
-    height: 80px;
-  }
-
-  .history__img2 {
-    width: 180px;
-    height: 200px;
-    left: 50%;
-  }
-
-  .history__img3 {
-    width: 130px;
-    height: 90px;
-    bottom: 20px;
-  }
-
-  .bodaIntro {
-    min-height: 100vh;
-    height: auto;
-    padding: 80px 24px;
-  }
-
-  .vision__item {
-    flex-direction: column !important;
-    height: auto;
-    min-height: unset;
-  }
-
-  .vision__text {
-    width: 100%;
-    padding: 32px 24px;
-  }
-
-  .vision__image {
-    width: 100%;
-    height: 56vw;
-    min-height: 220px;
-  }
 }

src/scss/page/_gnb.scss

@@ -51,20 +51,20 @@
 
 .gnb__navLink {
   display: block;
-  padding: 24px 32px;
+  padding: 24px clamp(14px, 1.7vw, 32px);
-  font-size: 16px;
+  font-size: clamp(13px, 0.85vw, 16px);
   font-weight: 400;
   letter-spacing: 0.05em;
   color: $color-white;
   transition: color 0.2s;
 
   &:hover {
-    color: $color-cyan;
+    color: $color-blue;
   }
 }
 
 .gnb__navLink.isActive {
-  color: $color-cyan;
+  color: $color-blue;
 }
 
 .gnb__hamburger {
@@ -102,37 +102,67 @@
 
 .gnb__mobileNav {
   display: none;
-  position: absolute;
+  position: fixed;
-  top: $gnb-height-mo;
+  inset: 0;
-  left: 0;
+  z-index: 200;
-  width: 100%;
+  background: $color-bg;
-  background: rgba($color-bg, 0.97);
+  padding: 32px 32px 40px;
-  backdrop-filter: blur(16px);
-  padding: 16px 0 24px;
-  transform: translateY(-100%);
   opacity: 0;
-  transition:
-    transform 0.35s ease,
-    opacity 0.35s ease;
   pointer-events: none;
+  transition: opacity 0.35s ease;
 
   &.isOpen {
-    transform: translateY(0);
     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: $color-white;
+
+  &: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;
-  padding: 14px 24px;
+  font-family: $font-serif;
-  font-size: 18px;
+  font-style: italic;
+  font-size: clamp(28px, 8vw, 36px);
   font-weight: 400;
-  letter-spacing: 0.05em;
+  letter-spacing: 0.02em;
   color: $color-white;
 }
+
+.gnb__mobileNavLink.isActive {
+  color: $color-blue;
+}

src/scss/page/_intro.scss

@@ -58,7 +58,7 @@
 }
 
 .intro__sub {
-  font-size: clamp(16px, 2.5vw, 36px);
+  font-size: clamp(18px, 2.6vw, 50px);
   font-weight: 100;
   letter-spacing: 0.02em;
   color: $color-white;
@@ -67,11 +67,12 @@
 }
 
 .intro__title {
-  font-size: clamp(12px, 1.5vw, 20px);
+  font-size: clamp(32px, 5.2vw, 100px);
   font-weight: 700;
-  letter-spacing: 0.03em;
+  letter-spacing: 0.01em;
   text-transform: uppercase;
   color: $color-white;
+  line-height: 1.2;
 }
 
 @include mo {

src/scss/page/_vision.scss

@@ -0,0 +1,99 @@
+@use "../base/variable" as *;
+@use "../base/mixin" as *;
+
+// Vision
+.vision {
+  background: $color-bg;
+  padding: clamp(80px, 6.25vw, 120px) clamp(24px, 6.25vw, 120px);
+}
+
+.vision__inner {
+  display: flex;
+  flex-direction: column;
+  gap: clamp(60px, 8vw, 140px);
+}
+
+.vision__head {
+  display: flex;
+  flex-direction: column;
+  gap: clamp(16px, 1.5vw, 24px);
+
+  .sectionTitle {
+    margin: 0;
+  }
+}
+
+.vision__desc {
+  max-width: 560px;
+  font-size: clamp(13px, 1.1vw, 16px);
+  font-weight: 300;
+  line-height: 1.8;
+  color: $color-white;
+  opacity: 0.9;
+}
+
+.vision__quote {
+  display: flex;
+  align-items: flex-start;
+  gap: 12px;
+  align-self: flex-end;
+  max-width: 640px;
+
+  .mark {
+    font-size: clamp(40px, 4.2vw, 80px);
+    font-weight: 700;
+    line-height: 1;
+    color: $color-white;
+  }
+
+  .text {
+    font-size: clamp(18px, 1.9vw, 32px);
+    font-weight: 300;
+    line-height: 1.4;
+    color: $color-white;
+  }
+}
+
+.vision__keywordList {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
+  gap: clamp(24px, 3vw, 60px);
+  list-style: none;
+}
+
+.vision__keywordItem {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+
+  .keyword {
+    font-size: clamp(28px, 3.1vw, 60px);
+    font-weight: 800;
+    letter-spacing: 0.01em;
+    color: $color-white;
+    line-height: 1;
+  }
+
+  .desc {
+    font-size: clamp(12px, 0.8vw, 14px);
+    font-weight: 300;
+    color: rgba($color-white, 0.75);
+  }
+}
+
+@include mo {
+  .vision {
+    padding: 60px 24px;
+  }
+
+  .vision__quote {
+    align-self: stretch;
+    max-width: none;
+  }
+
+  .vision__keywordList {
+    flex-direction: column;
+    gap: 40px;
+  }
+}