diff --git a/src/index.html b/src/index.html
index 48a0737..ac998f8 100644
--- a/src/index.html
+++ b/src/index.html
@@ -15,29 +15,29 @@
   <header class="gnb" id="gnb">
     <div class="gnb__inner">
       <a href="#intro" class="gnb__logo">
-        <img src="images/logo.svg" alt="BODA LAB">
+        <img class="gnb__logoImg" src="images/logo.svg" alt="BODA LAB">
       </a>
       <nav class="gnb__nav">
-        <ul>
-          <li class="is-active"><a href="#intro">HOME</a></li>
-          <li><a href="#about">ABOUT</a></li>
-          <li><a href="#project">PROJECTS</a></li>
-          <li><a href="#contact">CONTACT</a></li>
+        <ul class="gnb__navList">
+          <li class="gnb__navItem is-active"><a class="gnb__navLink" 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="#project">PROJECTS</a></li>
+          <li class="gnb__navItem"><a class="gnb__navLink" href="#contact">CONTACT</a></li>
         </ul>
       </nav>
       <button class="gnb__hamburger" aria-label="메뉴 열기" aria-expanded="false">
-        <span></span>
-        <span></span>
-        <span></span>
+        <span class="gnb__hamburgerLine"></span>
+        <span class="gnb__hamburgerLine"></span>
+        <span class="gnb__hamburgerLine"></span>
       </button>
     </div>
     <!-- 모바일 메뉴 -->
-    <nav class="gnb__mobile-nav">
-      <ul>
-        <li><a href="#intro">HOME</a></li>
-        <li><a href="#about">ABOUT</a></li>
-        <li><a href="#project">PROJECTS</a></li>
-        <li><a href="#contact">CONTACT</a></li>
+    <nav class="gnb__mobileNav">
+      <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" href="#about">ABOUT</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>
       </ul>
     </nav>
   </header>
@@ -45,157 +45,157 @@
   <main>
 
     <!-- 01. INTRO -->
-    <section id="intro" class="section section--intro">
+    <section id="intro" class="intro">
       <div class="intro__blobs" aria-hidden="true">
-        <span class="blob blob--cyan"></span>
-        <span class="blob blob--purple"></span>
-        <span class="blob blob--blue"></span>
+        <span class="blob blobCyan"></span>
+        <span class="blob blobPurple"></span>
+        <span class="blob blobBlue"></span>
       </div>
       <div class="intro__content">
         <p class="intro__sub">Creative Development Company</p>
         <h1 class="intro__title">THE BODA LAB</h1>
       </div>
-      <a href="#about" class="scroll-down" aria-label="아래로 스크롤">
+      <a href="#about" class="scrollDown" aria-label="아래로 스크롤">
         <img src="images/icon-scroll-down.svg" alt="">
       </a>
     </section>
 
     <!-- 02. ABOUT -->
-    <section id="about" class="section section--about">
+    <section id="about" class="about">
       <div class="about__inner">
         <div class="about__text">
-          <h2 class="section-title">ABOUT US</h2>
+          <h2 class="sectionTitle">ABOUT US</h2>
           <p class="about__desc">
-            The BODA LAB은 디지털시대에 발맞춰 클라이언트의 비즈니스를 위한<br>
-            다양한 기술적 노하우로 완성된 경험을 제공합니다.<br>
-            우리의 활동은 웹, 앱, 모바일을 넘나들며 세상의 모든 비즈니스 활동에<br>
+            The BODA LAB은 디지털시대에 발맞춰 클라이언트의 비즈니스를 위한<br class="breakLine">
+            다양한 기술적 노하우로 완성된 경험을 제공합니다.<br class="breakLine">
+            우리의 활동은 웹, 앱, 모바일을 넘나들며 세상의 모든 비즈니스 활동에<br class="breakLine">
             강한 영향력을 전달합니다.
           </p>
         </div>
         <div class="about__image">
-          <img src="images/about-hand.jpg" alt="스케치하는 손">
+          <img class="about__imageThumb" src="images/about-hand.jpg" alt="스케치하는 손">
           <p class="about__caption">Creative Development Company BODA.Lab</p>
         </div>
       </div>
     </section>
 
     <!-- 03. HISTORY -->
-    <section id="history" class="section section--history">
+    <section id="history" class="history">
       <div class="history__top">
-        <h2 class="section-title section-title--dark">HISTORY</h2>
+        <h2 class="sectionTitle sectionTitleDark">HISTORY</h2>
         <div class="history__timeline">
-          <div class="history__year-group">
+          <div class="history__yearGroup">
             <span class="history__year">2024</span>
             <div class="history__divider"></div>
             <ul class="history__list">
-              <li><strong>12.01</strong><span>신한은행 슈퍼소울 운영 계약</span></li>
-              <li><strong>09.01</strong><span>한화금융통합 서비스 구축 계약</span></li>
-              <li><strong>05.30</strong><span>신한은행 슈퍼소울 구축 계약</span></li>
-              <li><strong>05.01</strong><span>롯데 렌터카 오토리스 구축 계약</span></li>
+              <li class="history__listItem"><strong class="history__listDate">12.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__year-group">
+          <div class="history__yearGroup">
             <span class="history__year">2023</span>
             <div class="history__divider"></div>
             <ul class="history__list">
-              <li><strong>12.01</strong><span>신한은행 슈퍼소울 운영 계약</span></li>
-              <li><strong>11.01</strong><span>한화금융 라이프 플러스 아카데미 구축 계약</span></li>
-              <li><strong>10.01</strong><span>대교 차세대 구축 계약</span></li>
-              <li><strong>09.01</strong><span>한화금융통합 서비스 구축 계약</span></li>
-              <li><strong>05.30</strong><span>신한은행 슈퍼소울 구축 계약</span></li>
-              <li><strong>05.01</strong><span>롯데 렌터카 오토리스 구축 계약</span></li>
+              <li class="history__listItem"><strong class="history__listDate">12.01</strong><span class="history__listText">신한은행 슈퍼소울 운영 계약</span></li>
+              <li class="history__listItem"><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__year-group">
+          <div class="history__yearGroup">
             <span class="history__year">2022</span>
             <div class="history__divider"></div>
             <ul class="history__list">
-              <li><strong>11.01</strong><span>한화금융 서비스앱 플러스 리뉴얼 2차 계약</span></li>
-              <li><strong>09.01</strong><span>한화금융 서비스앱 플러스 리뉴얼 1차 계약</span></li>
-              <li><strong>08.01</strong><span>밀레 쇼핑몰 리뉴얼 구축 계약</span></li>
-              <li><strong>07.01</strong><span>오뚜기 쇼핑몰 리뉴얼 구축 계약</span></li>
-              <li><strong>05.01</strong><span>캐나다구스 코리아 쇼핑몰 구축 계약</span></li>
+              <li class="history__listItem"><strong class="history__listDate">11.01</strong><span class="history__listText">한화금융 서비스앱 플러스 리뉴얼 2차 계약</span></li>
+              <li class="history__listItem"><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__year-group">
+          <div class="history__yearGroup">
             <span class="history__year">2021</span>
             <div class="history__divider"></div>
             <ul class="history__list">
-              <li><strong>11.22</strong><span>롯데 렌터카 차세대 구축 계약</span></li>
-              <li><strong>11.01</strong><span>LSN MALL 구축 계약</span></li>
-              <li><strong>7.29</strong><span>(주)보다랩 설립</span></li>
-              <li><strong>5.15</strong><span>현대홈쇼핑 리뉴얼 구축 계약</span></li>
-              <li><strong>01.11</strong><span>KONA I 헬스케어 구축 계약</span></li>
-              <li><strong>01.11</strong><span>유아이팩토리 설립</span></li>
+              <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">
         <div class="history__images">
-          <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="">
+          <img class="history__img history__img1" src="images/history-1.jpg" alt="">
+          <img class="history__img history__img2" src="images/history-2.jpg" alt="">
+          <img class="history__img history__img3" src="images/history-3.jpg" alt="">
         </div>
       </div>
     </section>
 
     <!-- 04. BODA INTRO -->
-    <section id="boda-intro" class="section section--boda-intro">
-      <div class="boda-intro__content">
-        <h2 class="boda-intro__title">BODA Lab Co., Ltd.</h2>
-        <p class="boda-intro__desc">
-          accurately identifies customer needs to<br>
-          achieve the best completeness and satisfaction.<br>
-          We are working on a project with talented<br>
+    <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>
-        <a href="#vision" class="scroll-down scroll-down--sm" aria-label="아래로 스크롤">
+        <a href="#vision" class="scrollDown scrollDownSm" aria-label="아래로 스크롤">
           <img src="images/icon-scroll-down.svg" alt="">
         </a>
       </div>
     </section>
 
     <!-- 05. VISION -->
-    <section id="vision" class="section section--vision">
+    <section id="vision" class="vision">
       <div class="vision__inner">
         <div class="vision__item">
           <div class="vision__text">
             <em class="vision__keyword">Perspective</em>
-            <p>클라이언트의 고유한 가치를 발견하고<br>차별화된 디지털 경험을 설계합니다.</p>
+            <p class="vision__textDesc">클라이언트의 고유한 가치를 발견하고<br class="breakLine">차별화된 디지털 경험을 설계합니다.</p>
           </div>
           <div class="vision__image">
-            <img src="images/vision-1.jpg" alt="Uniqueness">
+            <img class="vision__imageThumb" src="images/vision-1.jpg" alt="Uniqueness">
           </div>
         </div>
-        <div class="vision__item vision__item--reverse">
+        <div class="vision__item vision__itemReverse">
           <div class="vision__image">
-            <img src="images/vision-2.jpg" alt="Expertise">
+            <img class="vision__imageThumb" src="images/vision-2.jpg" alt="Expertise">
           </div>
           <div class="vision__text">
             <em class="vision__keyword">Expertise</em>
-            <p>10년 이상의 기술 노하우를 기반으로<br>최적의 솔루션을 제공합니다.</p>
+            <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>고객의 만족을 최우선 가치로 삼아<br>완성도 높은 결과물을 만듭니다.</p>
+            <p class="vision__textDesc">고객의 만족을 최우선 가치로 삼아<br class="breakLine">완성도 높은 결과물을 만듭니다.</p>
           </div>
           <div class="vision__image">
-            <img src="images/vision-3.jpg" alt="Satisfaction">
+            <img class="vision__imageThumb" src="images/vision-3.jpg" alt="Satisfaction">
           </div>
         </div>
       </div>
     </section>
 
     <!-- 06. PROJECT -->
-    <section id="project" class="section section--project">
+    <section id="project" class="project">
       <div class="project__inner">
-        <h2 class="section-title project__heading">PROJECT</h2>
+        <h2 class="sectionTitle project__heading">PROJECT</h2>
         <div class="project__grid">
           <article class="project__card">
-            <div class="project__thumb"><img src="images/project-1.jpg" alt="신한유니버설앱 구축"></div>
+            <div class="project__thumb"><img class="project__thumbImg" src="images/project-1.jpg" alt="신한유니버설앱 구축"></div>
             <div class="project__info">
               <div class="project__meta"><h3 class="project__name">신한유니버설앱 구축</h3><span class="project__date">2023.12</span></div>
               <p class="project__company">신한은행</p>
@@ -203,7 +203,7 @@
             </div>
           </article>
           <article class="project__card">
-            <div class="project__thumb"><img src="images/project-2.jpg" alt="SK그룹 공식앱 내부 모바일"></div>
+            <div class="project__thumb"><img class="project__thumbImg" src="images/project-2.jpg" alt="SK그룹 공식앱 내부 모바일"></div>
             <div class="project__info">
               <div class="project__meta"><h3 class="project__name">SK그룹 공식앱 내부 모바일</h3><span class="project__date">2023.12</span></div>
               <p class="project__company">SK그룹</p>
@@ -211,7 +211,7 @@
             </div>
           </article>
           <article class="project__card">
-            <div class="project__thumb"><img src="images/project-3.jpg" alt="PNS네트웍스 디지털 플랫폼 구축"></div>
+            <div class="project__thumb"><img class="project__thumbImg" src="images/project-3.jpg" alt="PNS네트웍스 디지털 플랫폼 구축"></div>
             <div class="project__info">
               <div class="project__meta"><h3 class="project__name">PNS네트웍스 디지털 플랫폼 구축</h3><span class="project__date">2023.04</span></div>
               <p class="project__company">PNS 네트웍스</p>
@@ -219,7 +219,7 @@
             </div>
           </article>
           <article class="project__card">
-            <div class="project__thumb"><img src="images/project-4.jpg" alt="롯데렌터카 차세대"></div>
+            <div class="project__thumb"><img class="project__thumbImg" src="images/project-4.jpg" alt="롯데렌터카 차세대"></div>
             <div class="project__info">
               <div class="project__meta"><h3 class="project__name">롯데렌터카 차세대</h3><span class="project__date">2022.05</span></div>
               <p class="project__company">롯데</p>
@@ -227,7 +227,7 @@
             </div>
           </article>
           <article class="project__card">
-            <div class="project__thumb"><img src="images/project-5.jpg" alt="오뚜기 쇼핑몰 구축"></div>
+            <div class="project__thumb"><img class="project__thumbImg" src="images/project-5.jpg" alt="오뚜기 쇼핑몰 구축"></div>
             <div class="project__info">
               <div class="project__meta"><h3 class="project__name">오뚜기 쇼핑몰 구축</h3><span class="project__date">2022.07</span></div>
               <p class="project__company">오뚜기</p>
@@ -235,7 +235,7 @@
             </div>
           </article>
           <article class="project__card">
-            <div class="project__thumb"><img src="images/project-6.jpg" alt="캐나다구스 구축"></div>
+            <div class="project__thumb"><img class="project__thumbImg" src="images/project-6.jpg" alt="캐나다구스 구축"></div>
             <div class="project__info">
               <div class="project__meta"><h3 class="project__name">캐나다구스 구축</h3><span class="project__date">2022.05</span></div>
               <p class="project__company">캐나다구스 코리아</p>
@@ -243,7 +243,7 @@
             </div>
           </article>
           <article class="project__card">
-            <div class="project__thumb"><img src="images/project-7.jpg" alt="한옥홈페이지 서버 이관"></div>
+            <div class="project__thumb"><img class="project__thumbImg" src="images/project-7.jpg" alt="한옥홈페이지 서버 이관"></div>
             <div class="project__info">
               <div class="project__meta"><h3 class="project__name">한옥홈페이지 서버 이관</h3><span class="project__date">2022.11</span></div>
               <p class="project__company">더한옥</p>
@@ -251,7 +251,7 @@
             </div>
           </article>
           <article class="project__card">
-            <div class="project__thumb"><img src="images/project-8.jpg" alt="그린카 차세대"></div>
+            <div class="project__thumb"><img class="project__thumbImg" src="images/project-8.jpg" alt="그린카 차세대"></div>
             <div class="project__info">
               <div class="project__meta"><h3 class="project__name">그린카 차세대</h3><span class="project__date">2022.11</span></div>
               <p class="project__company">그린카</p>
@@ -259,7 +259,7 @@
             </div>
           </article>
           <article class="project__card">
-            <div class="project__thumb project__thumb--empty"></div>
+            <div class="project__thumb project__thumbEmpty"></div>
             <div class="project__info">
               <div class="project__meta"><h3 class="project__name">프로스펙스 구축</h3><span class="project__date">2021.01</span></div>
               <p class="project__company">(주)LS네트웍스</p>
@@ -267,7 +267,7 @@
             </div>
           </article>
           <article class="project__card">
-            <div class="project__thumb project__thumb--empty"></div>
+            <div class="project__thumb project__thumbEmpty"></div>
             <div class="project__info">
               <div class="project__meta"><h3 class="project__name">중소기업창업</h3><span class="project__date">2021.11</span></div>
               <p class="project__company">중소벤처기업부</p>
@@ -275,7 +275,7 @@
             </div>
           </article>
           <article class="project__card">
-            <div class="project__thumb project__thumb--empty"></div>
+            <div class="project__thumb project__thumbEmpty"></div>
             <div class="project__info">
               <div class="project__meta"><h3 class="project__name">한화 GAsk 구축 프로젝트</h3><span class="project__date">2021.11</span></div>
               <p class="project__company">한화</p>
@@ -283,7 +283,7 @@
             </div>
           </article>
           <article class="project__card">
-            <div class="project__thumb project__thumb--empty"></div>
+            <div class="project__thumb project__thumbEmpty"></div>
             <div class="project__info">
               <div class="project__meta"><h3 class="project__name">(주)국민은행_KB국민은행<br>리브 Reboot One 구축, 프론트개발</h3><span class="project__date">2021.10</span></div>
               <p class="project__company">국민은행</p>
@@ -291,7 +291,7 @@
             </div>
           </article>
           <article class="project__card">
-            <div class="project__thumb project__thumb--empty"></div>
+            <div class="project__thumb project__thumbEmpty"></div>
             <div class="project__info">
               <div class="project__meta"><h3 class="project__name">코나아이 PC</h3><span class="project__date">2021.01</span></div>
               <p class="project__company">코나아이</p>
@@ -300,15 +300,15 @@
           </article>
         </div>
         <div class="project__more">
-          <a href="#" class="btn-more">+ VIEW MORE</a>
+          <a href="#" class="btnMore">+ VIEW MORE</a>
         </div>
       </div>
     </section>
 
     <!-- 07. EXPERTISE -->
-    <section id="expertise" class="section section--expertise">
+    <section id="expertise" class="expertise">
       <div class="expertise__inner">
-        <h2 class="section-title">EXPERTISE</h2>
+        <h2 class="sectionTitle">EXPERTISE</h2>
         <p class="expertise__desc">The BODA LAB은 서비스와 사용자를 고려하여 다양한 경험을 제공하며,<br>거쳐간 모든 곳에서 지속적인 성장이 이루어질 수 있도록 함께합니다.</p>
         <ul class="expertise__list">
           <li class="expertise__item">
@@ -336,28 +336,28 @@
     </section>
 
     <!-- 08. CONTACT / FOOTER -->
-    <section id="contact" class="section section--contact">
+    <section id="contact" class="contact">
       <div class="contact__inner">
         <div class="contact__left">
-          <h2 class="contact__greeting">Welcome!<br><span>BODA LAB</span></h2>
+          <h2 class="contact__greeting">Welcome!<br><span class="contact__greetingBrand">BODA LAB</span></h2>
           <address class="contact__address">
             <p class="contact__label">Head Office</p>
-            <dl class="contact__info-list">
-              <div class="contact__info-item">
-                <dt>Address</dt>
-                <dd>서울특별시 금천구 가산디지털2로 169-16,<br>907호 (가산하우스디퍼스타)</dd>
+            <dl class="contact__infoList">
+              <div class="contact__infoItem">
+                <dt class="contact__infoLabel">Address</dt>
+                <dd class="contact__infoValue">서울특별시 금천구 가산디지털2로 169-16,<br>907호 (가산하우스디퍼스타)</dd>
               </div>
-              <div class="contact__info-item">
-                <dt>e-mail</dt>
-                <dd><a href="mailto:bodalab@bodalab.com">bodalab@bodalab.com</a></dd>
+              <div class="contact__infoItem">
+                <dt class="contact__infoLabel">e-mail</dt>
+                <dd class="contact__infoValue"><a class="contact__infoLink" href="mailto:bodalab@bodalab.com">bodalab@bodalab.com</a></dd>
               </div>
-              <div class="contact__info-item">
-                <dt>tel</dt>
-                <dd>010-1234-5678</dd>
+              <div class="contact__infoItem">
+                <dt class="contact__infoLabel">tel</dt>
+                <dd class="contact__infoValue">010-1234-5678</dd>
               </div>
-              <div class="contact__info-item">
-                <dt>fax</dt>
-                <dd>010-1234-5678</dd>
+              <div class="contact__infoItem">
+                <dt class="contact__infoLabel">fax</dt>
+                <dd class="contact__infoValue">010-1234-5678</dd>
               </div>
             </dl>
           </address>
@@ -367,49 +367,49 @@
         </div>
       </div>
       <!-- 프로젝트 문의 -->
-      <div class="contact-accordion">
-        <div class="contact-accordion__item is-open" id="acc-project">
-          <button class="contact-accordion__header" aria-expanded="true" aria-controls="acc-project-body">
+      <div class="contactAccordion">
+        <div class="contactAccordion__item is-open" id="acc-project">
+          <button class="contactAccordion__header" aria-expanded="true" aria-controls="acc-project-body">
             <span>프로젝트 문의</span>
-            <img class="contact-accordion__icon" src="images/icon-chevron.svg" alt="">
+            <img class="contactAccordion__icon" src="images/icon-chevron.svg" alt="">
           </button>
-          <div class="contact-accordion__body" id="acc-project-body">
-            <form class="contact-form" onsubmit="return false;">
-              <div class="contact-form__row">
-                <input type="text" class="contact-form__input" placeholder="회사명">
-                <input type="text" class="contact-form__input" placeholder="담당자 이름">
+          <div class="contactAccordion__body" id="acc-project-body">
+            <form class="contactForm" onsubmit="return false;">
+              <div class="contactForm__row">
+                <input type="text" class="contactForm__input" placeholder="회사명">
+                <input type="text" class="contactForm__input" placeholder="담당자 이름">
               </div>
-              <div class="contact-form__row">
-                <input type="tel" class="contact-form__input" placeholder="연락처">
-                <input type="email" class="contact-form__input" placeholder="이메일">
+              <div class="contactForm__row">
+                <input type="tel" class="contactForm__input" placeholder="연락처">
+                <input type="email" class="contactForm__input" placeholder="이메일">
               </div>
-              <textarea class="contact-form__textarea" placeholder="문의내용"></textarea>
-              <div class="contact-form__agree">
-                <label class="contact-form__checkbox">
-                  <input type="checkbox">
-                  <span class="contact-form__checkbox-box"></span>
+              <textarea class="contactForm__textarea" placeholder="문의내용"></textarea>
+              <div class="contactForm__agree">
+                <label class="contactForm__checkbox">
+                  <input class="contactForm__checkboxInput" type="checkbox">
+                  <span class="contactForm__checkboxBox"></span>
                   <span>개인정보보호정책에 동의합니다.</span>
                 </label>
               </div>
-              <div class="contact-form__submit">
-                <button type="submit" class="btn-send">SEND</button>
+              <div class="contactForm__submit">
+                <button type="submit" class="btnSend">SEND</button>
               </div>
             </form>
           </div>
         </div>
 
         <!-- 채용 -->
-        <div class="contact-accordion__item" id="acc-career">
-          <button class="contact-accordion__header" aria-expanded="false" aria-controls="acc-career-body">
+        <div class="contactAccordion__item" id="acc-career">
+          <button class="contactAccordion__header" aria-expanded="false" aria-controls="acc-career-body">
             <span>채용</span>
-            <img class="contact-accordion__icon" src="images/icon-chevron.svg" alt="">
+            <img class="contactAccordion__icon" src="images/icon-chevron.svg" alt="">
           </button>
-          <div class="contact-accordion__body" id="acc-career-body" hidden>
-            <div class="career-tags">
-              <a href="#" class="career-tag">Planner &amp; Consulting <svg viewBox="0 0 16 16" fill="none"><path d="M4 12L12 4M12 4H6M12 4V10" stroke="currentColor" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/></svg></a>
-              <a href="#" class="career-tag">Designer <svg viewBox="0 0 16 16" fill="none"><path d="M4 12L12 4M12 4H6M12 4V10" stroke="currentColor" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/></svg></a>
-              <a href="#" class="career-tag">Publisher <svg viewBox="0 0 16 16" fill="none"><path d="M4 12L12 4M12 4H6M12 4V10" stroke="currentColor" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/></svg></a>
-              <a href="#" class="career-tag">Scripter <svg viewBox="0 0 16 16" fill="none"><path d="M4 12L12 4M12 4H6M12 4V10" stroke="currentColor" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/></svg></a>
+          <div class="contactAccordion__body" id="acc-career-body" hidden>
+            <div class="careerTags">
+              <a href="#" class="careerTag">Planner &amp; Consulting <svg class="careerTag__icon" viewBox="0 0 16 16" fill="none"><path d="M4 12L12 4M12 4H6M12 4V10" stroke="currentColor" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/></svg></a>
+              <a href="#" class="careerTag">Designer <svg class="careerTag__icon" viewBox="0 0 16 16" fill="none"><path d="M4 12L12 4M12 4H6M12 4V10" stroke="currentColor" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/></svg></a>
+              <a href="#" class="careerTag">Publisher <svg class="careerTag__icon" viewBox="0 0 16 16" fill="none"><path d="M4 12L12 4M12 4H6M12 4V10" stroke="currentColor" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/></svg></a>
+              <a href="#" class="careerTag">Scripter <svg class="careerTag__icon" viewBox="0 0 16 16" fill="none"><path d="M4 12L12 4M12 4H6M12 4V10" stroke="currentColor" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/></svg></a>
             </div>
           </div>
         </div>
@@ -419,8 +419,8 @@
         <div class="footer__inner">
           <p class="footer__brand">THE<br>BODA LAB</p>
           <p class="footer__contact">
-            Mail <a href="mailto:bodalab@bodalab.com">bodalab@bodalab.com</a>
-            &nbsp;&nbsp;Tel <a href="tel:010-1234-5678">010-1234-5678</a>
+            Mail <a class="footer__contactLink" href="mailto:bodalab@bodalab.com">bodalab@bodalab.com</a>
+            &nbsp;&nbsp;Tel <a class="footer__contactLink" href="tel:010-1234-5678">010-1234-5678</a>
           </p>
           <p class="footer__copy">© 2024 BODA LAB</p>
         </div>
diff --git a/src/js/main.js b/src/js/main.js
index 0954629..2a62cbb 100644
--- a/src/js/main.js
+++ b/src/js/main.js
@@ -4,9 +4,9 @@ $(function () {
 
   const $gnb = $('#gnb');
   const $hamburger = $('.gnb__hamburger');
-  const $mobileNav = $('.gnb__mobile-nav');
+  const $mobileNav = $('.gnb__mobileNav');
   const $sections = $('section[id]');
-  const $navLinks = $('.gnb__nav li');
+  const $navLinks = $('.gnb__navItem');
 
   // GNB 스크롤 배경
   $(window).on('scroll.gnb', { passive: true }, function () {
@@ -22,7 +22,7 @@ $(function () {
   });
 
   // 모바일 메뉴 링크 클릭 시 닫기
-  $('.gnb__mobile-nav a').on('click', function () {
+  $('.gnb__mobileNavLink').on('click', function () {
     $hamburger.removeClass('is-open').attr('aria-expanded', false);
     $mobileNav.removeClass('is-open');
   });
@@ -45,8 +45,8 @@ $(function () {
   }
 
   // Contact 아코디언
-  $('.contact-accordion__header').on('click', function () {
-    const $item = $(this).closest('.contact-accordion__item');
+  $('.contactAccordion__header').on('click', function () {
+    const $item = $(this).closest('.contactAccordion__item');
     const $body = $('#' + $(this).attr('aria-controls'));
     const isOpen = $item.hasClass('is-open');
 
diff --git a/src/scss/base/_reset.scss b/src/scss/base/_reset.scss
index 8558ada..be11da3 100644
--- a/src/scss/base/_reset.scss
+++ b/src/scss/base/_reset.scss
@@ -36,26 +36,25 @@ a {
 
 address { font-style: normal; }
 
-// Common
-.section {
+section {
   position: relative;
   width: 100%;
 }
 
-.section-title {
+.sectionTitle {
   font-family: $font-sans;
   font-size: clamp(28px, 3vw, 40px);
   font-weight: 600;
   letter-spacing: 0.02em;
   color: $color-white;
   line-height: 1;
-
-  &--dark {
-    color: $color-dark;
-  }
 }
 
-.scroll-down {
+.sectionTitleDark {
+  color: $color-dark;
+}
+
+.scrollDown {
   position: absolute;
   bottom: 40px;
   left: 50%;
@@ -69,20 +68,23 @@ address { font-style: normal; }
 
   &:hover { opacity: 0.6; }
 
-  svg {
+  img {
     width: 100%;
     height: 100%;
+    object-fit: unset;
   }
+}
 
-  &--sm {
-    position: relative;
-    bottom: auto;
-    left: auto;
-    transform: none;
-    margin-top: 40px;
-  }
+.scrollDownSm {
+  position: relative;
+  bottom: auto;
+  left: auto;
+  transform: none;
+  margin-top: 40px;
+}
 
-  @include mo {
+@include mo {
+  .scrollDown {
     width: 52px;
     height: 52px;
     bottom: 24px;
diff --git a/src/scss/page/_about.scss b/src/scss/page/_about.scss
index d991ee1..1e90ef9 100644
--- a/src/scss/page/_about.scss
+++ b/src/scss/page/_about.scss
@@ -2,27 +2,17 @@
 @use '../base/mixin' as *;
 
 // About
-.section--about {
+.about {
   height: 100vh;
   background: $color-bg;
   display: flex;
   align-items: stretch;
-
-  @include mo {
-    height: auto;
-    min-height: 100vh;
-    flex-direction: column;
-  }
 }
 
 .about__inner {
   display: flex;
   width: 100%;
   height: 100%;
-
-  @include mo {
-    flex-direction: column;
-  }
 }
 
 .about__text {
@@ -32,12 +22,6 @@
   width: 45%;
   padding: $gnb-height 48px 60px;
   gap: 80px;
-
-  @include mo {
-    width: 100%;
-    padding: calc(#{$gnb-height-mo} + 40px) 24px 40px;
-    gap: 40px;
-  }
 }
 
 .about__desc {
@@ -46,29 +30,19 @@
   line-height: 1.8;
   color: $color-white;
   opacity: 0.9;
-
-  @include mo {
-    br { display: none; }
-  }
 }
 
 .about__image {
   position: relative;
   width: 55%;
   overflow: hidden;
+}
 
-  img {
-    width: 100%;
-    height: 100%;
-    object-fit: cover;
-    object-position: center;
-  }
-
-  @include mo {
-    width: 100%;
-    height: 56vw;
-    min-height: 260px;
-  }
+.about__imageThumb {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  object-position: center;
 }
 
 .about__caption {
@@ -84,47 +58,29 @@
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
-
-  @include mo {
-    font-size: 16px;
-    padding: 16px;
-  }
 }
 
 // History
-.section--history {
+.history {
   background: $color-bg;
 }
 
 .history__top {
   background: $color-bg-light;
   padding: 80px 48px 60px;
+}
 
-  @include mo {
-    padding: 60px 24px 40px;
-  }
-
-  .section-title--dark {
-    margin-bottom: 48px;
-
-    @include mo {
-      margin-bottom: 32px;
-    }
-  }
+.history__top .sectionTitleDark {
+  margin-bottom: 48px;
 }
 
 .history__timeline {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   gap: 0 24px;
-
-  @include mo {
-    grid-template-columns: 1fr 1fr;
-    gap: 40px 20px;
-  }
 }
 
-.history__year-group {
+.history__yearGroup {
   display: flex;
   flex-direction: column;
 }
@@ -150,136 +106,100 @@
   display: flex;
   flex-direction: column;
   gap: 16px;
+}
 
-  li {
-    display: flex;
-    flex-direction: column;
-    gap: 4px;
+.history__listItem {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
 
-    strong {
-      font-size: 14px;
-      font-weight: 700;
-      color: $color-dark;
-      line-height: 1.6;
-    }
+.history__listDate {
+  font-size: 14px;
+  font-weight: 700;
+  color: $color-dark;
+  line-height: 1.6;
+}
 
-    span {
-      font-size: clamp(12px, 1vw, 14px);
-      font-weight: 300;
-      color: $color-dark;
-      line-height: 1.6;
-    }
-  }
+.history__listText {
+  font-size: clamp(12px, 1vw, 14px);
+  font-weight: 300;
+  color: $color-dark;
+  line-height: 1.6;
 }
 
 .history__bottom {
   background: $color-bg;
   padding: 0 48px 80px;
   overflow: hidden;
-
-  @include mo {
-    padding: 0 24px 60px;
-  }
 }
 
 .history__images {
   position: relative;
   height: 400px;
   margin-top: -80px;
-
-  @include mo {
-    height: 260px;
-    margin-top: -40px;
-  }
 }
 
 .history__img {
   position: absolute;
   object-fit: cover;
+}
 
-  &--1 {
-    width: 260px;
-    height: 170px;
-    left: 0;
-    bottom: 0;
+.history__img1 {
+  width: 260px;
+  height: 170px;
+  left: 0;
+  bottom: 0;
+}
 
-    @include mo {
-      width: 120px;
-      height: 80px;
-    }
-  }
+.history__img2 {
+  width: 370px;
+  height: 400px;
+  left: 50%;
+  transform: translateX(-50%);
+  top: 0;
+}
 
-  &--2 {
-    width: 370px;
-    height: 400px;
-    left: 50%;
-    transform: translateX(-50%);
-    top: 0;
-
-    @include mo {
-      width: 180px;
-      height: 200px;
-      left: 50%;
-    }
-  }
-
-  &--3 {
-    width: 300px;
-    height: 190px;
-    right: 0;
-    bottom: 40px;
-
-    @include mo {
-      width: 130px;
-      height: 90px;
-      bottom: 20px;
-    }
-  }
+.history__img3 {
+  width: 300px;
+  height: 190px;
+  right: 0;
+  bottom: 40px;
 }
 
 // Boda Intro
-.section--boda-intro {
+.bodaIntro {
   height: 100vh;
   background: $color-bg;
   display: flex;
   align-items: center;
   justify-content: center;
   text-align: center;
-
-  @include mo {
-    min-height: 100vh;
-    height: auto;
-    padding: 80px 24px;
-  }
 }
 
-.boda-intro__content {
+.bodaIntro__content {
   display: flex;
   flex-direction: column;
   align-items: center;
 }
 
-.boda-intro__title {
+.bodaIntro__title {
   font-size: clamp(20px, 2vw, 28px);
   font-weight: 600;
   letter-spacing: 0.02em;
   margin-bottom: 32px;
 }
 
-.boda-intro__desc {
+.bodaIntro__desc {
   font-size: clamp(14px, 1.3vw, 18px);
   font-weight: 300;
   line-height: 1.8;
   color: rgba($color-white, 0.8);
   text-align: center;
-
-  @include mo {
-    br { display: none; }
-  }
 }
 
 // Vision
-.section--vision {
+.vision {
   background: $color-bg;
 }
 
@@ -293,16 +213,10 @@
   align-items: stretch;
   height: 33.333vh;
   min-height: 280px;
+}
 
-  &--reverse {
-    flex-direction: row-reverse;
-  }
-
-  @include mo {
-    flex-direction: column !important;
-    height: auto;
-    min-height: unset;
-  }
+.vision__itemReverse {
+  flex-direction: row-reverse;
 }
 
 .vision__text {
@@ -312,22 +226,6 @@
   width: 50%;
   padding: 40px 80px;
   gap: 20px;
-
-  p {
-    font-size: clamp(13px, 1vw, 15px);
-    font-weight: 300;
-    line-height: 1.8;
-    color: rgba($color-white, 0.75);
-
-    @include mo {
-      br { display: none; }
-    }
-  }
-
-  @include mo {
-    width: 100%;
-    padding: 32px 24px;
-  }
 }
 
 .vision__keyword {
@@ -338,22 +236,97 @@
   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;
+}
 
-  img {
+.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;
+    flex-direction: column;
+  }
+
+  .about__inner { flex-direction: column; }
+
+  .about__text {
     width: 100%;
-    height: 100%;
-    object-fit: cover;
-    transition: transform 0.6s ease;
+    padding: calc(#{$gnb-height-mo} + 40px) 24px 40px;
+    gap: 40px;
   }
 
-  &:hover img {
-    transform: scale(1.04);
+  .about__image {
+    width: 100%;
+    height: 56vw;
+    min-height: 260px;
   }
 
-  @include mo {
+  .about__caption {
+    font-size: 16px;
+    padding: 16px;
+  }
+
+  .breakLine { display: none; }
+
+  .history__top { padding: 60px 24px 40px; }
+
+  .history__top .sectionTitleDark { margin-bottom: 32px; }
+
+  .history__timeline {
+    grid-template-columns: 1fr 1fr;
+    gap: 40px 20px;
+  }
+
+  .history__bottom { padding: 0 24px 60px; }
+
+  .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;
diff --git a/src/scss/page/_contact.scss b/src/scss/page/_contact.scss
index 5117e95..efb6e77 100644
--- a/src/scss/page/_contact.scss
+++ b/src/scss/page/_contact.scss
@@ -2,14 +2,10 @@
 @use '../base/mixin' as *;
 
 // Expertise
-.section--expertise {
+.expertise {
   background: $color-bg;
   padding: 100px 48px;
   border-top: 1px solid rgba($color-white, 0.08);
-
-  @include mo {
-    padding: 60px 24px;
-  }
 }
 
 .expertise__inner {
@@ -23,11 +19,6 @@
   font-size: 15px;
   font-weight: 300;
   color: rgba($color-white, 0.6);
-
-  @include mo {
-    margin-bottom: 40px;
-    font-size: 14px;
-  }
 }
 
 .expertise__list {
@@ -35,37 +26,13 @@
   grid-template-columns: repeat(4, 1fr);
   gap: 0;
   border-top: 1px solid rgba($color-white, 0.12);
-
-  @include mo {
-    grid-template-columns: 1fr 1fr;
-  }
 }
 
 .expertise__item {
   padding: 40px 32px 40px 0;
   border-right: 1px solid rgba($color-white, 0.12);
 
-  &:last-child {
-    border-right: none;
-
-    @include mo {
-      border-right: 1px solid rgba($color-white, 0.12);
-    }
-  }
-
-  @include mo {
-    padding: 28px 20px 28px 0;
-
-    &:nth-child(2),
-    &:nth-child(4) {
-      border-right: none;
-    }
-
-    &:nth-child(3),
-    &:nth-child(4) {
-      border-top: 1px solid rgba($color-white, 0.12);
-    }
-  }
+  &:last-child { border-right: none; }
 }
 
 .expertise__num {
@@ -93,7 +60,7 @@
 }
 
 // Contact
-.section--contact {
+.contact {
   background: $color-bg;
   display: flex;
   flex-direction: column;
@@ -105,11 +72,6 @@
   align-items: stretch;
   flex: 1;
   min-height: 60vh;
-
-  @include mo {
-    flex-direction: column;
-    min-height: unset;
-  }
 }
 
 .contact__left {
@@ -119,12 +81,6 @@
   gap: 40px;
   width: 50%;
   padding: 80px 80px 80px 48px;
-
-  @include mo {
-    width: 100%;
-    padding: 60px 24px 40px;
-    gap: 32px;
-  }
 }
 
 .contact__greeting {
@@ -134,18 +90,18 @@
   font-weight: 400;
   line-height: 1.1;
   color: $color-white;
+}
 
-  span {
-    display: block;
-    font-size: clamp(16px, 1.5vw, 22px);
-    font-family: $font-sans;
-    font-style: normal;
-    font-weight: 900;
-    letter-spacing: 0.15em;
-    text-transform: uppercase;
-    margin-top: 8px;
-    color: $color-cyan;
-  }
+.contact__greetingBrand {
+  display: block;
+  font-size: clamp(16px, 1.5vw, 22px);
+  font-family: $font-sans;
+  font-style: normal;
+  font-weight: 900;
+  letter-spacing: 0.15em;
+  text-transform: uppercase;
+  margin-top: 8px;
+  color: $color-cyan;
 }
 
 .contact__label {
@@ -157,36 +113,37 @@
   margin-bottom: 16px;
 }
 
-.contact__info-list {
+.contact__infoList {
   display: flex;
   flex-direction: column;
   gap: 16px;
 }
 
-.contact__info-item {
+.contact__infoItem {
   display: flex;
   flex-direction: column;
   gap: 4px;
+}
 
-  dt {
-    font-size: 12px;
-    font-weight: 600;
-    letter-spacing: 0.08em;
-    color: $color-cyan;
-  }
+.contact__infoLabel {
+  font-size: 12px;
+  font-weight: 600;
+  letter-spacing: 0.08em;
+  color: $color-cyan;
+}
 
-  dd {
-    font-size: 14px;
-    font-weight: 300;
-    line-height: 1.7;
-    color: rgba($color-white, 0.85);
+.contact__infoValue {
+  font-size: 14px;
+  font-weight: 300;
+  line-height: 1.7;
+  color: rgba($color-white, 0.85);
+}
 
-    a {
-      color: inherit;
-      transition: opacity 0.2s;
-      &:hover { opacity: 0.7; }
-    }
-  }
+.contact__infoLink {
+  color: inherit;
+  transition: opacity 0.2s;
+
+  &:hover { opacity: 0.7; }
 }
 
 .contact__right {
@@ -196,11 +153,6 @@
   justify-content: center;
   padding: 80px 48px 80px 0;
   gap: 24px;
-
-  @include mo {
-    width: 100%;
-    padding: 0 24px 60px;
-  }
 }
 
 .contact__map {
@@ -211,17 +163,16 @@
   overflow: hidden;
 }
 
-
-// Contact accordion — 프로젝트문의 / 채용
-.contact-accordion {
+// Contact accordion
+.contactAccordion {
   border-top: 1px solid rgba($color-white, 0.08);
 }
 
-.contact-accordion__item {
+.contactAccordion__item {
   border-bottom: 1px solid rgba($color-white, 0.08);
 }
 
-.contact-accordion__header {
+.contactAccordion__header {
   display: flex;
   align-items: center;
   justify-content: space-between;
@@ -238,31 +189,26 @@
   transition: opacity 0.2s;
 
   &:hover { opacity: 0.7; }
-
-  @include mo {
-    padding: 22px 24px;
-  }
 }
 
-.contact-accordion__icon {
+.contactAccordion__icon {
   width: 24px;
   height: 24px;
   flex-shrink: 0;
   transition: transform 0.3s ease;
+  object-fit: unset;
 }
 
-.contact-accordion__item.is-open .contact-accordion__icon {
+.contactAccordion__item.is-open .contactAccordion__icon {
   transform: rotate(180deg);
 }
 
-.contact-accordion__body {
+.contactAccordion__body {
   overflow: hidden;
   max-height: 0;
   transition: max-height 0.4s ease;
 
-  &:not([hidden]) {
-    max-height: 800px;
-  }
+  &:not([hidden]) { max-height: 800px; }
 
   &[hidden] {
     display: block !important;
@@ -271,29 +217,21 @@
 }
 
 // 문의 폼
-.contact-form {
+.contactForm {
   padding: 8px 48px 48px;
   display: flex;
   flex-direction: column;
   gap: 12px;
-
-  @include mo {
-    padding: 8px 24px 40px;
-  }
 }
 
-.contact-form__row {
+.contactForm__row {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 12px;
-
-  @include mo {
-    grid-template-columns: 1fr;
-  }
 }
 
-.contact-form__input,
-.contact-form__textarea {
+.contactForm__input,
+.contactForm__textarea {
   width: 100%;
   background: rgba($color-white, 0.04);
   border: 1px solid rgba($color-white, 0.1);
@@ -309,16 +247,16 @@
   &:focus { border-color: rgba($color-white, 0.3); }
 }
 
-.contact-form__textarea {
+.contactForm__textarea {
   resize: none;
   height: 180px;
 }
 
-.contact-form__agree {
+.contactForm__agree {
   margin-top: 4px;
 }
 
-.contact-form__checkbox {
+.contactForm__checkbox {
   display: inline-flex;
   align-items: center;
   gap: 10px;
@@ -326,43 +264,45 @@
   font-size: 13px;
   font-weight: 300;
   color: rgba($color-white, 0.6);
-
-  input[type="checkbox"] { display: none; }
-
-  &-box {
-    width: 18px;
-    height: 18px;
-    border: 1px solid rgba($color-white, 0.3);
-    flex-shrink: 0;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    transition: background 0.2s, border-color 0.2s;
-  }
-
-  input:checked + &-box {
-    background: $color-cyan;
-    border-color: $color-cyan;
-
-    &::after {
-      content: '';
-      display: block;
-      width: 10px;
-      height: 6px;
-      border-left: 1.5px solid $color-dark;
-      border-bottom: 1.5px solid $color-dark;
-      transform: rotate(-45deg) translateY(-2px);
-    }
-  }
 }
 
-.contact-form__submit {
+.contactForm__checkboxInput {
+  display: none;
+}
+
+.contactForm__checkboxInput:checked + .contactForm__checkboxBox {
+  background: $color-cyan;
+  border-color: $color-cyan;
+}
+
+.contactForm__checkboxInput:checked + .contactForm__checkboxBox::after {
+  content: '';
+  display: block;
+  width: 10px;
+  height: 6px;
+  border-left: 1.5px solid $color-dark;
+  border-bottom: 1.5px solid $color-dark;
+  transform: rotate(-45deg) translateY(-2px);
+}
+
+.contactForm__checkboxBox {
+  width: 18px;
+  height: 18px;
+  border: 1px solid rgba($color-white, 0.3);
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: background 0.2s, border-color 0.2s;
+}
+
+.contactForm__submit {
   display: flex;
   justify-content: center;
   margin-top: 8px;
 }
 
-.btn-send {
+.btnSend {
   padding: 12px 48px;
   background: $color-cyan;
   border: none;
@@ -379,18 +319,14 @@
 }
 
 // 채용 태그
-.career-tags {
+.careerTags {
   display: flex;
   flex-wrap: wrap;
   gap: 12px;
   padding: 8px 48px 48px;
-
-  @include mo {
-    padding: 8px 24px 40px;
-  }
 }
 
-.career-tag {
+.careerTag {
   display: inline-flex;
   align-items: center;
   gap: 8px;
@@ -402,26 +338,22 @@
   color: $color-white;
   transition: border-color 0.2s, color 0.2s;
 
-  svg {
-    width: 14px;
-    height: 14px;
-    flex-shrink: 0;
-  }
-
   &:hover {
     border-color: $color-cyan;
     color: $color-cyan;
   }
 }
 
+.careerTag__icon {
+  width: 14px;
+  height: 14px;
+  flex-shrink: 0;
+}
+
 // Footer
 .footer {
   border-top: 1px solid rgba($color-white, 0.08);
   padding: 32px 48px;
-
-  @include mo {
-    padding: 24px 20px;
-  }
 }
 
 .footer__inner {
@@ -430,12 +362,6 @@
   justify-content: space-between;
   gap: 24px;
   flex-wrap: wrap;
-
-  @include mo {
-    flex-direction: column;
-    align-items: flex-start;
-    gap: 20px;
-  }
 }
 
 .footer__brand {
@@ -451,16 +377,13 @@
   font-size: 13px;
   font-weight: 300;
   color: rgba($color-white, 0.5);
+}
 
-  a {
-    color: rgba($color-white, 0.5);
-    transition: color 0.2s;
-    &:hover { color: $color-white; }
-  }
+.footer__contactLink {
+  color: rgba($color-white, 0.5);
+  transition: color 0.2s;
 
-  @include mo {
-    font-size: 12px;
-  }
+  &:hover { color: $color-white; }
 }
 
 .footer__copy {
@@ -469,3 +392,60 @@
   color: rgba($color-white, 0.3);
   letter-spacing: 0.03em;
 }
+
+@include mo {
+  .expertise { padding: 60px 24px; }
+
+  .expertise__desc {
+    margin-bottom: 40px;
+    font-size: 14px;
+  }
+
+  .expertise__list { grid-template-columns: 1fr 1fr; }
+
+  .expertise__item {
+    padding: 28px 20px 28px 0;
+
+    &:last-child { border-right: 1px solid rgba($color-white, 0.12); }
+
+    &:nth-child(2),
+    &:nth-child(4) { border-right: none; }
+
+    &:nth-child(3),
+    &:nth-child(4) { border-top: 1px solid rgba($color-white, 0.12); }
+  }
+
+  .contact__inner {
+    flex-direction: column;
+    min-height: unset;
+  }
+
+  .contact__left {
+    width: 100%;
+    padding: 60px 24px 40px;
+    gap: 32px;
+  }
+
+  .contact__right {
+    width: 100%;
+    padding: 0 24px 60px;
+  }
+
+  .contactAccordion__header { padding: 22px 24px; }
+
+  .contactForm { padding: 8px 24px 40px; }
+
+  .contactForm__row { grid-template-columns: 1fr; }
+
+  .careerTags { padding: 8px 24px 40px; }
+
+  .footer { padding: 24px 20px; }
+
+  .footer__inner {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 20px;
+  }
+
+  .footer__contact { font-size: 12px; }
+}
diff --git a/src/scss/page/_home.scss b/src/scss/page/_home.scss
index a61dc71..32d3ae8 100644
--- a/src/scss/page/_home.scss
+++ b/src/scss/page/_home.scss
@@ -15,131 +15,118 @@
     background: rgba($color-bg, 0.92);
     backdrop-filter: blur(12px);
   }
+}
 
-  &__inner {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    height: 100%;
-    padding: 0 48px;
+.gnb__inner {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  height: 100%;
+  padding: 0 48px;
+}
 
-    @include mo {
-      padding: 0 20px;
-      height: $gnb-height-mo;
-    }
-  }
+.gnb__logo {
+  display: flex;
+  align-items: center;
+}
 
-  &__logo {
-    display: flex;
-    align-items: center;
+.gnb__logoImg {
+  width: 90px;
+  height: auto;
+  object-fit: unset;
+}
 
-    svg {
-      width: 90px;
-      height: auto;
-    }
-  }
+.gnb__nav {
+  // nav block — layout only
+}
 
-  &__nav {
-    ul {
-      display: flex;
-      align-items: center;
-      gap: 0;
-    }
+.gnb__navList {
+  display: flex;
+  align-items: center;
+}
 
-    li a {
-      display: block;
-      padding: 24px 32px;
-      font-size: 16px;
-      font-weight: 400;
-      letter-spacing: 0.05em;
-      color: $color-white;
-      transition: color 0.2s;
+.gnb__navItem {
+  // list item — no extra styles needed
+}
 
-      &:hover { color: $color-cyan; }
-    }
+.gnb__navLink {
+  display: block;
+  padding: 24px 32px;
+  font-size: 16px;
+  font-weight: 400;
+  letter-spacing: 0.05em;
+  color: $color-white;
+  transition: color 0.2s;
 
-    li.is-active a {
-      color: $color-cyan;
-    }
+  &:hover { color: $color-cyan; }
+}
 
-    @include mo {
-      display: none;
-    }
-  }
+.gnb__navItem.is-active .gnb__navLink {
+  color: $color-cyan;
+}
 
-  &__hamburger {
-    display: none;
-    flex-direction: column;
-    justify-content: center;
-    gap: 5px;
-    width: 32px;
-    height: 32px;
-    background: none;
-    border: none;
-    cursor: pointer;
-    padding: 0;
+.gnb__hamburger {
+  display: none;
+  flex-direction: column;
+  justify-content: center;
+  gap: 5px;
+  width: 32px;
+  height: 32px;
+  background: none;
+  border: none;
+  cursor: pointer;
+  padding: 0;
+}
 
-    span {
-      display: block;
-      width: 100%;
-      height: 1px;
-      background: $color-white;
-      transition: transform 0.3s, opacity 0.3s;
-    }
+.gnb__hamburgerLine {
+  display: block;
+  width: 100%;
+  height: 1px;
+  background: $color-white;
+  transition: transform 0.3s, opacity 0.3s;
+}
 
-    &.is-open {
-      span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
-      span:nth-child(2) { opacity: 0; }
-      span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
-    }
+.gnb__hamburger.is-open .gnb__hamburgerLine:nth-child(1) { transform: translateY(6px) rotate(45deg); }
+.gnb__hamburger.is-open .gnb__hamburgerLine:nth-child(2) { opacity: 0; }
+.gnb__hamburger.is-open .gnb__hamburgerLine:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
 
-    @include mo {
-      display: flex;
-    }
-  }
+.gnb__mobileNav {
+  display: none;
+  position: absolute;
+  top: $gnb-height-mo;
+  left: 0;
+  width: 100%;
+  background: rgba($color-bg, 0.97);
+  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;
 
-  &__mobile-nav {
-    display: none;
-    position: absolute;
-    top: $gnb-height-mo;
-    left: 0;
-    width: 100%;
-    background: rgba($color-bg, 0.97);
-    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;
-
-    ul {
-      display: flex;
-      flex-direction: column;
-    }
-
-    li a {
-      display: block;
-      padding: 14px 24px;
-      font-size: 18px;
-      font-weight: 400;
-      letter-spacing: 0.05em;
-      color: $color-white;
-    }
-
-    &.is-open {
-      transform: translateY(0);
-      opacity: 1;
-      pointer-events: auto;
-    }
-
-    @include mo {
-      display: block;
-    }
+  &.is-open {
+    transform: translateY(0);
+    opacity: 1;
+    pointer-events: auto;
   }
 }
 
+.gnb__mobileNavList {
+  display: flex;
+  flex-direction: column;
+}
+
+.gnb__mobileNavLink {
+  display: block;
+  padding: 14px 24px;
+  font-size: 18px;
+  font-weight: 400;
+  letter-spacing: 0.05em;
+  color: $color-white;
+}
+
 // Intro
-.section--intro {
+.intro {
   height: 100vh;
   display: flex;
   align-items: center;
@@ -160,51 +147,30 @@
   border-radius: 50%;
   filter: blur(120px);
   opacity: 0.55;
+}
 
-  &--cyan {
-    width: 56vw;
-    height: 56vw;
-    background: $color-cyan;
-    top: -10%;
-    right: -10%;
+.blobCyan {
+  width: 56vw;
+  height: 56vw;
+  background: $color-cyan;
+  top: -10%;
+  right: -10%;
+}
 
-    @include mo {
-      width: 90vw;
-      height: 90vw;
-      right: -20%;
-      top: -5%;
-    }
-  }
+.blobPurple {
+  width: 32vw;
+  height: 32vw;
+  background: $color-purple;
+  top: 15%;
+  left: 5%;
+}
 
-  &--purple {
-    width: 32vw;
-    height: 32vw;
-    background: $color-purple;
-    top: 15%;
-    left: 5%;
-
-    @include mo {
-      width: 60vw;
-      height: 60vw;
-      left: -15%;
-      top: 20%;
-    }
-  }
-
-  &--blue {
-    width: 24vw;
-    height: 24vw;
-    background: $color-blue;
-    bottom: 10%;
-    left: -5%;
-
-    @include mo {
-      width: 50vw;
-      height: 50vw;
-      left: -10%;
-      bottom: 5%;
-    }
-  }
+.blobBlue {
+  width: 24vw;
+  height: 24vw;
+  background: $color-blue;
+  bottom: 10%;
+  left: -5%;
 }
 
 .intro__content {
@@ -229,3 +195,37 @@
   text-transform: uppercase;
   color: $color-white;
 }
+
+@include mo {
+  .gnb__inner {
+    padding: 0 20px;
+    height: $gnb-height-mo;
+  }
+
+  .gnb__nav { display: none; }
+
+  .gnb__hamburger { display: flex; }
+
+  .gnb__mobileNav { display: block; }
+
+  .blobCyan {
+    width: 90vw;
+    height: 90vw;
+    right: -20%;
+    top: -5%;
+  }
+
+  .blobPurple {
+    width: 60vw;
+    height: 60vw;
+    left: -15%;
+    top: 20%;
+  }
+
+  .blobBlue {
+    width: 50vw;
+    height: 50vw;
+    left: -10%;
+    bottom: 5%;
+  }
+}
diff --git a/src/scss/page/_projects.scss b/src/scss/page/_projects.scss
index 31b63ef..c31f69a 100644
--- a/src/scss/page/_projects.scss
+++ b/src/scss/page/_projects.scss
@@ -1,13 +1,9 @@
 @use '../base/variable' as *;
 @use '../base/mixin' as *;
 
-.section--project {
+.project {
   background: $color-bg;
   padding: 100px 48px;
-
-  @include mo {
-    padding: 60px 20px;
-  }
 }
 
 .project__inner {
@@ -17,21 +13,12 @@
 
 .project__heading {
   margin-bottom: 60px;
-
-  @include mo {
-    margin-bottom: 36px;
-  }
 }
 
 .project__grid {
   display: grid;
   grid-template-columns: repeat(2, 1fr);
   gap: 40px 40px;
-
-  @include mo {
-    grid-template-columns: 1fr;
-    gap: 32px;
-  }
 }
 
 .project__card {
@@ -39,10 +26,10 @@
   flex-direction: column;
   gap: 16px;
   cursor: pointer;
+}
 
-  &:hover .project__thumb img {
-    transform: scale(1.04);
-  }
+.project__card:hover .project__thumbImg {
+  transform: scale(1.04);
 }
 
 .project__thumb {
@@ -50,16 +37,16 @@
   aspect-ratio: 16 / 10;
   overflow: hidden;
   background: #1a1a1a;
-
-  img {
-    width: 100%;
-    height: 100%;
-    object-fit: cover;
-    transition: transform 0.5s ease;
-  }
 }
 
-.project__thumb--empty {
+.project__thumbImg {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  transition: transform 0.5s ease;
+}
+
+.project__thumbEmpty {
   background: #1a1a1a;
 }
 
@@ -118,13 +105,9 @@
   display: flex;
   justify-content: center;
   margin-top: 64px;
-
-  @include mo {
-    margin-top: 48px;
-  }
 }
 
-.btn-more {
+.btnMore {
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -144,3 +127,16 @@
     border-color: $color-white;
   }
 }
+
+@include mo {
+  .project { padding: 60px 20px; }
+
+  .project__heading { margin-bottom: 36px; }
+
+  .project__grid {
+    grid-template-columns: 1fr;
+    gap: 32px;
+  }
+
+  .project__more { margin-top: 48px; }
+}