fix: gnb 활성문제

src/index.html

@@ -33,22 +33,22 @@
           <span class="gnb__hamburgerLine"></span>
         </button>
       </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 isActive" href="#intro">HOME</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 US</a></li>
-        </ul>
-      </nav>
     </header>
+    <!-- 모바일 메뉴 — header 밖에 위치해야 backdrop-filter containing block 이슈 방지 -->
+    <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 isActive" href="#intro">HOME</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 US</a></li>
+      </ul>
+    </nav>
 
     <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,75 +140,90 @@
   transform: translateY(-6px) rotate(-45deg);
 }
 
-.gnb__mobileNav {
-  display: none;
-  position: fixed;
-  inset: 0;
-  z-index: 200;
-  background: #0d0d0d;
-  padding: 32px 32px 40px;
-  opacity: 0;
-  pointer-events: none;
-  transition: opacity 0.35s ease;
-
-  &.isOpen {
-    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: #ffffff;
-
-  &: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;
-  font-size: clamp(28px, 8vw, 36px);
-  font-weight: 400;
-  letter-spacing: 0.02em;
-  color: #ffffff;
-}
-
-.gnb__mobileNavLink.isActive {
-  color: #7796ff;
-}
-
 @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;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    z-index: 200;
+    background: #0d0d0d;
+    padding: 32px 32px 40px;
+    opacity: 0;
+    pointer-events: none;
+    transition: opacity 0.35s ease;
+
+    &.isOpen {
+      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: #ffffff;
+
+    &: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;
+    font-size: clamp(28px, 8vw, 36px);
+    font-weight: 400;
+    letter-spacing: 0.02em;
+    color: #ffffff;
+  }
+
+  .gnb__mobileNavLink.isActive {
+    color: #7796ff;
+  }
 
   // Figma 모바일 전용 정사각 로고 마크(40x40)로 교체 — PC 워드마크는 숨김
   .gnb__logoImg--desktop {

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;
-  }
-}