fix: 모바일 조정

doc/모바일-검수.md

@@ -0,0 +1,109 @@
+# 모바일 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 불변 + 모바일 값 일치를 확인했습니다.
+

src/index.html

@@ -14,7 +14,8 @@
     <header class="gnb" id="gnb">
       <div class="gnb__inner">
         <a href="#intro" class="gnb__logo">
-          <img class="gnb__logoImg" src="images/logo.png" alt="BODA LAB" />
+          <img class="gnb__logoImg gnb__logoImg--desktop" src="images/logo.png" 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">
@@ -672,7 +673,7 @@
           <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>
-            &nbsp;&nbsp;&nbsp;&nbsp;<strong class="footer__contactLabel">Tel</strong>
+            <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>

src/scss/index.scss

@@ -60,8 +60,6 @@
 
 @include mo {
   .scrollDown {
-    width: 52px;
+    bottom: 20px;
-    height: 52px;
-    bottom: 24px;
   }
 }

src/scss/page/_about.scss

@@ -284,18 +284,33 @@
   .about {
     height: auto;
     min-height: auto;
-    padding: calc(#{$gnb-height-mo} + 40px) 24px 60px;
+    padding: calc(#{$gnb-height-mo} + 40px) 20px 80px;
   }
 
+  // Figma 모바일: 헤드(타이틀+데스크+쿼트)→expertise 리스트 간격 160(PC base clamp는 그대로 둠)
+  .about__inner {
+    gap: 160px;
+  }
+
+  // Figma 모바일: title→desc 간격 30(PC는 60, 기존 base 57px는 손대지 않음)
+  .about__head .sectionTitle {
+    margin-bottom: 30px;
+  }
+
+  // Figma 모바일: desc→quote 간격 120(PC base 70px는 그대로 둠)
+  .about__desc {
+    margin-bottom: 120px;
+  }
+
+  // Figma 모바일도 인용부호+텍스트가 PC와 동일하게 가로 배치 — 세로 스택 오버라이드 제거하고 좌우 인셋(30px)만 추가
   .about__quote {
-    flex-direction: column;
+    padding: 0 30px;
-    align-items: flex-start;
-    gap: 4px;
   }
 
   .about__expertiseList {
     flex-direction: column;
-    gap: 32px;
+    gap: 64px;
+    padding: 0 30px;
   }
 
   .breakLine {
@@ -303,12 +318,12 @@
   }
 
   .history {
-    padding: 60px 24px;
+    padding: 80px 20px;
   }
 
   .history__title {
     position: static;
-    margin-bottom: 32px;
+    margin-bottom: 40px;
     color: #0d0d0d;
   }
 
@@ -330,10 +345,16 @@
 
   .history__listItem {
     flex-direction: column;
+    align-items: flex-start;
     gap: 6px;
 
     .sub {
       font-size: 12px;
     }
   }
+
+  // Figma 모바일/PC 공통으로 padding이 4px 6px인데 base는 2px 8px로 틀려있음 — PC base는 그대로 두고 모바일만 보정
+  .history__listItem .badge {
+    padding: 4px 6px;
+  }
 }

src/scss/page/_contact.scss

@@ -399,13 +399,31 @@
 }
 
 @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-bottom: 32px;
+    margin-top: 30px;
+    margin-bottom: 80px;
+  }
+
+  // Figma 모바일: Head Office 블록 → 아코디언 블록 간격 80 (PC base 88px는 그대로 둠)
+  .contact__inner {
+    margin-bottom: 80px;
+  }
+
+  // Figma 공통값(label→list 16)인데 base(20px)가 PC에서도 어긋나 있음 — 모바일만 보정
+  .contact__label {
+    margin-bottom: 16px;
   }
 
   .contact__infoList {
     flex-direction: column;
-    gap: 24px;
+    gap: 20px;
   }
 
   .contactAccordion__header {
@@ -413,6 +431,17 @@
     padding-bottom: 22px;
   }
 
+  // Figma 공통값(32x32)인데 base(24px)가 PC에서도 어긋나 있음 — 모바일만 보정
+  .contactAccordion__icon {
+    width: 32px;
+    height: 32px;
+  }
+
+  // Figma 공통값(80, PC는 120 — 둘 다 base 32px와 다름)인데 두 아코디언 블록 사이 간격이 좁음. PC는 두고 두 번째 항목만 보정
+  .contactAccordion__item:not(:first-child) .contactAccordion__header {
+    margin-top: 80px;
+  }
+
   .contactForm {
     padding-bottom: 40px;
   }
@@ -421,15 +450,47 @@
     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-bottom: 40px;
   }
 
+  .careerTag {
+    gap: 8px;
+  }
+
+  // Figma 모바일: 모달이 화면 상단에 풀블리드(가로 전체, 모서리 각짐)로 붙는 시트 형태 — PC의 중앙 카드형 모달과 다름
+  .privacyModal {
+    align-items: flex-start;
+    padding: 0;
+  }
+
   .privacyModal__panel {
-    padding: 28px 24px;
+    max-width: none;
+    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;
   }
 }

src/scss/page/_footer.scss

@@ -51,14 +51,29 @@
   letter-spacing: 0.03em;
 }
 
+// 모바일에서만 Mail/Tel을 줄바꿈 — PC는 한 줄(인라인)로 유지
+.footer__contactBreak {
+  display: none;
+}
+
 @include mo {
   .footer {
-    padding: 24px 20px;
+    padding: 24px 0 0;
   }
 
   .footer__inner {
     flex-direction: column;
     align-items: flex-start;
-    gap: 20px;
+    gap: 46px;
+    padding: 40px;
+  }
+
+  .footer__contactBreak {
+    display: block;
+    margin-top: 6px;
+  }
+
+  .footer__contactGap {
+    display: none;
   }
 }

src/scss/page/_gnb.scss

@@ -1,5 +1,10 @@
 @use "../base/mixin" as *;
 
+// 모바일 전용 로고(정사각 마크) — PC 로고는 그대로 두고, 모바일에서만 노출
+.gnb__logoImg--mobile {
+  display: none;
+}
+
 // GNB
 .gnb {
   position: fixed;
@@ -195,3 +200,44 @@
 .gnb__mobileNavLink.isActive {
   color: #7796ff;
 }
+
+@include mo {
+  // 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);
+  }
+}

src/scss/page/_intro.scss

@@ -48,10 +48,6 @@
     height: 60px;
   }
 
-  .gnb__logoImg {
-    width: 90px;
-  }
-
   .gnb__nav {
     display: none;
   }

src/scss/page/_project.scss

@@ -131,36 +131,54 @@
 
 @include mo {
   .project {
-    padding: 60px 20px;
+    padding: 80px 20px;
   }
 
   .project__heading {
-    margin-bottom: 36px;
+    margin-bottom: 40px;
   }
 
+  // Figma 모바일: 카드 사이 간격 56(고정) — PC base(40px)는 그대로 둠
   .project__grid {
-    gap: 32px;
+    gap: 56px;
   }
 
   .project__row {
     flex-direction: column;
-    gap: 32px;
+    gap: 56px;
   }
 
   .project__card {
     flex-basis: 100%;
+    // Figma 모바일/PC 공통으로 thumb↔info 간격이 24인데 base(16px)가 어긋나 있음 — PC는 그대로 두고 모바일만 보정
+    gap: 24px;
 
     &:hover {
       flex-basis: 100%;
     }
   }
 
-  .project__more {
+  // Figma 모바일 전용 썸네일 크롭 비율(335:200) — PC(624:396)는 그대로 둠
-    margin-top: 48px;
+  .project__thumb {
+    aspect-ratio: 335 / 200;
   }
 
+  // Figma 모바일/PC 공통값(name→company 18, company→tags 24)인데 base(15px/20px)가 어긋나 있음 — 모바일만 보정
+  .project__company {
+    margin-top: 18px;
+  }
+
+  .project__stack {
+    margin-top: 24px;
+  }
+
+  .project__more {
+    margin-top: 56px;
+  }
+
+  // Figma 모바일 버튼 규격 139x48에 맞춤
   .btnMore {
-    padding: 16px 32px;
+    padding: 13px 32px;
     font-size: 16px;
   }
 }

src/scss/page/_vision.scss

@@ -99,16 +99,28 @@
 
 @include mo {
   .vision {
-    padding: 60px 24px;
+    padding: 80px 20px;
+  }
+
+  // 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 {
     align-self: stretch;
     max-width: none;
+    padding: 0 30px;
   }
 
   .vision__keywordList {
     flex-direction: column;
-    gap: 40px;
+    gap: 64px;
+    padding: 0 30px;
   }
 }