fix: gnb 활성문제

src/index.html

@@ -33,7 +33,8 @@
           <span class="gnb__hamburgerLine"></span>
         </button>
       </div>
-      <!-- 모바일 메뉴 -->
+    </header>
+    <!-- 모바일 메뉴 — header 밖에 위치해야 backdrop-filter containing block 이슈 방지 -->
     <nav class="gnb__mobileNav">
       <button class="gnb__mobileNavClose" aria-label="메뉴 닫기">
         <span class="gnb__mobileNavCloseLine"></span>
@@ -48,7 +49,6 @@
         <li class="gnb__mobileNavItem"><a class="gnb__mobileNavLink" href="#contact">CONTACT US</a></li>
       </ul>
     </nav>
-    </header>
 
     <main>
       <!-- 01. INTRO -->
@@ -79,7 +79,7 @@
             </p>
             <div class="about__quote">
               <span class="about__quoteMark" aria-hidden="true">“</span>
-              <p class="about__quoteText">Creative Development Company<br />BODA.Lab</p>
+              <p class="about__quoteText">Creative Development<br class="divide mobile" />Company <br class="divide pc" />BODA.Lab</p>
             </div>
           </div>
           <ul class="about__expertiseList">

src/js/main.js

@@ -39,7 +39,7 @@ $(function () {
   });
 
   // 현재 섹션에 따라 GNB 활성화
-  const $navLinks = $(".gnb__navLink");
+  const $navLinks = $(".gnb__navLink, .gnb__mobileNavLink");
   const sections = $("section[id]").toArray();
   // 흰 배경 섹션 — 이 구간에서는 GNB를 다크 텍스트로 전환(흰 텍스트가 흰 배경에 묻히는 것 방지)
   const lightSections = ["history", "contact"];
@@ -76,27 +76,28 @@ $(function () {
   updateActiveNav();
 
   // 섹션 이동 링크 클릭 시 Lenis로 부드럽게 스크롤
-  $(".gnb__navLink, .gnb__mobileNavLink, .gnb__logo, .scrollDown").on("click", function (e) {
+  $(".gnb__navLink, .gnb__mobileNavLink, .scrollDown").on("click", function (e) {
     e.preventDefault();
     lenis.scrollTo($(this).attr("href"));
   });
 
-  // 햄버거 메뉴
+  // 로고 클릭: 모바일에선 메뉴 토글, 데스크탑에선 intro로 스크롤
-  $hamburger.on("click", function () {
+  $(".gnb__logo").on("click", function (e) {
-    const isOpen = $hamburger.toggleClass("isOpen").hasClass("isOpen");
+    e.preventDefault();
-    $hamburger.attr("aria-expanded", isOpen);
+    if (window.matchMedia("(max-width: 768px)").matches) {
-    $mobileNav.toggleClass("isOpen", isOpen);
+      $mobileNav.toggleClass("isOpen");
+    } else {
+      lenis.scrollTo($(this).attr("href"));
+    }
   });
 
   // 모바일 메뉴 링크 클릭 시 닫기
   $(".gnb__mobileNavLink").on("click", function () {
-    $hamburger.removeClass("isOpen").attr("aria-expanded", false);
     $mobileNav.removeClass("isOpen");
   });
 
   // 모바일 메뉴 닫기 버튼
   $mobileNavClose.on("click", function () {
-    $hamburger.removeClass("isOpen").attr("aria-expanded", false);
     $mobileNav.removeClass("isOpen");
   });
 

src/scss/page/_about.scss

@@ -63,6 +63,18 @@
   font-weight: 100;
   line-height: 1.2;
   color: #ffffff;
+
+  &.divide {
+    display: none;
+
+    &.mobile {
+      display: none;
+    }
+
+    &.pc {
+      display: block;
+    }
+  }
 }
 
 .about__expertiseList {
@@ -288,24 +300,41 @@
     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 {
-    padding: 0 30px;
+    position: relative;
+    display: block;
+    padding: 0 0 0 30px;
+  }
+
+  .about__quoteMark {
+    margin-top: -0.34em;
+    position: absolute;
+    top: 0;
+    left: 0;
+  }
+
+  .about__quoteText {
+    .divide {
+      &.mobile {
+        display: block;
+      }
+
+      &.pc {
+        display: none;
+      }
+    }
   }
 
   .about__expertiseList {

src/scss/page/_contact.scss

@@ -334,7 +334,7 @@
 
 .privacyModal__head {
   display: flex;
-  align-items: flex-start;
+  align-items: center;
   justify-content: space-between;
   gap: 16px;
   padding-bottom: 24px;

src/scss/page/_gnb.scss

@@ -53,6 +53,10 @@
   }
 }
 
+.gnb__mobileNav {
+  display: none;
+}
+
 .gnb__inner {
   display: flex;
   align-items: center;
@@ -136,10 +140,30 @@
   transform: translateY(-6px) rotate(-45deg);
 }
 
-.gnb__mobileNav {
+@include mo {
+  .gnb {
+    top: 0;
+  }
+  .gnb__inner {
+    padding: 0 20px;
+    height: 80px;
+  }
+
+  .gnb__nav {
     display: none;
+  }
+
+  .gnb__hamburger {
+    display: none;
+  }
+
+  .gnb__mobileNav {
+    display: block;
     position: fixed;
-  inset: 0;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
     z-index: 200;
     background: #0d0d0d;
     padding: 32px 32px 40px;
@@ -201,11 +225,6 @@
     color: #7796ff;
   }
 
-@include mo {
-  .gnb {
-    top: 0;
-  }
-
   // Figma 모바일 전용 정사각 로고 마크(40x40)로 교체 — PC 워드마크는 숨김
   .gnb__logoImg--desktop {
     display: none;

src/scss/page/_intro.scss

@@ -41,22 +41,3 @@
   color: #ffffff;
   line-height: 0.8;
 }
-
-@include mo {
-  .gnb__inner {
-    padding: 0 20px;
-    height: 60px;
-  }
-
-  .gnb__nav {
-    display: none;
-  }
-
-  .gnb__hamburger {
-    display: flex;
-  }
-
-  .gnb__mobileNav {
-    display: block;
-  }
-}