fix: 모바일 조정
This commit is contained in:
이희원
parent
a7298a9cc1
commit
71f2565517
|
|
@ -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`으로 숨겨 기존 한 줄 레이아웃 유지, 모바일에서만 노출). 기존 ` ` 간격은 `.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 불변 + 모바일 값 일치를 확인했습니다.
|
||||
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 1.5 KiB |
|
|
@ -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>
|
||||
<strong class="footer__contactLabel">Tel</strong>
|
||||
<br class="footer__contactBreak" /><span class="footer__contactGap"> </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>
|
||||
|
|
|
|||
|
|
@ -60,8 +60,6 @@
|
|||
|
||||
@include mo {
|
||||
.scrollDown {
|
||||
width: 52px;
|
||||
height: 52px;
|
||||
bottom: 24px;
|
||||
bottom: 20px;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
align-items: flex-start;
|
||||
gap: 4px;
|
||||
padding: 0 30px;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -48,10 +48,6 @@
|
|||
height: 60px;
|
||||
}
|
||||
|
||||
.gnb__logoImg {
|
||||
width: 90px;
|
||||
}
|
||||
|
||||
.gnb__nav {
|
||||
display: none;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
margin-top: 48px;
|
||||
// Figma 모바일 전용 썸네일 크롭 비율(335:200) — PC(624:396)는 그대로 둠
|
||||
.project__thumb {
|
||||
aspect-ratio: 335 / 200;
|
||||
}
|
||||
|
||||
// Figma 모바일/PC 공통값(name→company 18, company→tags 24)인데 base(15px/20px)가 어긋나 있음 — 모바일만 보정
|
||||
.project__company {
|
||||
margin-top: 18px;
|
||||
}
|
||||
|
||||
.project__stack {
|
||||
margin-top: 24px;
|
||||
}
|
||||
|
||||
.project__more {
|
||||
margin-top: 56px;
|
||||
}
|
||||
|
||||
// Figma 모바일 버튼 규격 139x48에 맞춤
|
||||
.btnMore {
|
||||
padding: 16px 32px;
|
||||
padding: 13px 32px;
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue