fix: 디자인수정

package-lock.json

@@ -11,6 +11,7 @@
       "dependencies": {
         "gsap": "^3.15.0",
         "jquery": "^4.0.0",
+        "lenis": "^1.3.25",
         "sharp": "^0.35.1"
       },
       "devDependencies": {
@@ -4944,6 +4945,37 @@
         "json-buffer": "3.0.0"
       }
     },
+    "node_modules/lenis": {
+      "version": "1.3.25",
+      "resolved": "https://registry.npmjs.org/lenis/-/lenis-1.3.25.tgz",
+      "integrity": "sha512-mOKxayErlaONK8fm4LN3XNd99Qu4plTpn9h9qf8wxzjGrJDzuD84FYzZ81HCd6ZsWp++VWVwOzL286Pf2s2u4A==",
+      "license": "MIT",
+      "workspaces": [
+        "packages/*",
+        "playground",
+        "playground/*"
+      ],
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/darkroomengineering"
+      },
+      "peerDependencies": {
+        "@nuxt/kit": ">=3.0.0",
+        "react": ">=17.0.0",
+        "vue": ">=3.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@nuxt/kit": {
+          "optional": true
+        },
+        "react": {
+          "optional": true
+        },
+        "vue": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/lightningcss": {
       "version": "1.32.0",
       "resolved": "https://registry.npmjs.org/lightningcss/-/lightningcss-1.32.0.tgz",

package.json

@@ -21,6 +21,7 @@
   "dependencies": {
     "gsap": "^3.15.0",
     "jquery": "^4.0.0",
+    "lenis": "^1.3.25",
     "sharp": "^0.35.1"
   }
 }

src/index.html

@@ -310,9 +310,10 @@
         <div class="project__inner">
           <h2 class="sectionTitle project__heading">PROJECT</h2>
           <div class="project__grid">
+            <div class="project__row">
             <article class="project__card">
               <div class="project__thumb">
-                <img class="project__thumbImg" src="images/project-1.jpg" alt="신한유니버설앱 구축" />
+                <img class="project__thumbImg" src="images/project-1.png" alt="신한유니버설앱 구축" />
               </div>
               <div class="project__info">
                 <h3 class="project__name">신한유니버설앱 구축</h3>
@@ -327,7 +328,7 @@
             </article>
             <article class="project__card">
               <div class="project__thumb">
-                <img class="project__thumbImg" src="images/project-2.jpg" alt="SK그룹 공식앱 내부 모바일" />
+                <img class="project__thumbImg" src="images/project-2.png" alt="SK그룹 공식앱 내부 모바일" />
               </div>
               <div class="project__info">
                 <h3 class="project__name">SK그룹 공식앱 내부 모바일</h3>
@@ -339,9 +340,11 @@
                 </div>
               </div>
             </article>
+            </div>
+            <div class="project__row">
             <article class="project__card">
               <div class="project__thumb">
-                <img class="project__thumbImg" src="images/project-3.jpg" alt="PNS네트웍스 디지털 플랫폼 구축" />
+                <img class="project__thumbImg" src="images/project-3.png" alt="PNS네트웍스 디지털 플랫폼 구축" />
               </div>
               <div class="project__info">
                 <h3 class="project__name">PNS네트웍스 디지털 플랫폼 구축</h3>
@@ -355,7 +358,7 @@
             </article>
             <article class="project__card">
               <div class="project__thumb">
-                <img class="project__thumbImg" src="images/project-4.jpg" alt="롯데렌터카 차세대" />
+                <img class="project__thumbImg" src="images/project-4.png" alt="롯데렌터카 차세대" />
               </div>
               <div class="project__info">
                 <h3 class="project__name">롯데렌터카 차세대</h3>
@@ -366,9 +369,11 @@
                 </div>
               </div>
             </article>
+            </div>
+            <div class="project__row">
             <article class="project__card">
               <div class="project__thumb">
-                <img class="project__thumbImg" src="images/project-5.jpg" alt="오뚜기 쇼핑몰 구축" />
+                <img class="project__thumbImg" src="images/project-5.png" alt="오뚜기 쇼핑몰 구축" />
               </div>
               <div class="project__info">
                 <h3 class="project__name">오뚜기 쇼핑몰 구축</h3>
@@ -383,7 +388,7 @@
             </article>
             <article class="project__card">
               <div class="project__thumb">
-                <img class="project__thumbImg" src="images/project-6.jpg" alt="캐나다구스 구축" />
+                <img class="project__thumbImg" src="images/project-6.png" alt="캐나다구스 구축" />
               </div>
               <div class="project__info">
                 <h3 class="project__name">캐나다구스 구축</h3>
@@ -395,9 +400,11 @@
                 </div>
               </div>
             </article>
+            </div>
+            <div class="project__row">
             <article class="project__card">
               <div class="project__thumb">
-                <img class="project__thumbImg" src="images/project-7.jpg" alt="한옥홈페이지 서버 이관" />
+                <img class="project__thumbImg" src="images/project-7.png" alt="한옥홈페이지 서버 이관" />
               </div>
               <div class="project__info">
                 <h3 class="project__name">한옥홈페이지 서버 이관</h3>
@@ -413,7 +420,7 @@
             </article>
             <article class="project__card">
               <div class="project__thumb">
-                <img class="project__thumbImg" src="images/project-8.jpg" alt="그린카 차세대" />
+                <img class="project__thumbImg" src="images/project-8.png" alt="그린카 차세대" />
               </div>
               <div class="project__info">
                 <h3 class="project__name">그린카 차세대</h3>
@@ -427,8 +434,12 @@
                 </div>
               </div>
             </article>
+            </div>
+            <div class="project__row">
             <article class="project__card">
-              <div class="project__thumb project__thumbEmpty"></div>
+              <div class="project__thumb">
+                <img class="project__thumbImg" src="images/project-9.png" alt="그린카 차세대" />
+              </div>
               <div class="project__info">
                 <h3 class="project__name">프로스펙스 구축</h3>
                 <p class="project__company">(주)LS네트웍스</p>
@@ -440,7 +451,10 @@
               </div>
             </article>
             <article class="project__card">
-              <div class="project__thumb project__thumbEmpty"></div>
+              <div class="project__thumb">
+                <img class="project__thumbImg" src="images/project-10.png" alt="그린카 차세대" />
+              </div>
+
               <div class="project__info">
                 <h3 class="project__name">중소기업창업</h3>
                 <p class="project__company">중소벤처기업부</p>
@@ -451,8 +465,13 @@
                 </div>
               </div>
             </article>
+            </div>
+            <div class="project__row">
             <article class="project__card" hidden>
-              <div class="project__thumb project__thumbEmpty"></div>
+              <div class="project__thumb">
+                <img class="project__thumbImg" src="images/project-11.png" alt="그린카 차세대" />
+              </div>
+
               <div class="project__info">
                 <h3 class="project__name">롯데 GA2ck 구축 프로젝트 (롯데 렌터카)</h3>
                 <p class="project__company">롯데</p>
@@ -465,7 +484,10 @@
               </div>
             </article>
             <article class="project__card" hidden>
-              <div class="project__thumb project__thumbEmpty"></div>
+              <div class="project__thumb">
+                <img class="project__thumbImg" src="images/project-12.png" alt="그린카 차세대" />
+              </div>
+
               <div class="project__info">
                 <h3 class="project__name">
                     (주)국민은행_KB국민은행
@@ -481,8 +503,13 @@
                 </div>
               </div>
             </article>
+            </div>
+            <div class="project__row project__row--single">
             <article class="project__card" hidden>
-              <div class="project__thumb project__thumbEmpty"></div>
+              <div class="project__thumb">
+                <img class="project__thumbImg" src="images/project-13.png" alt="그린카 차세대" />
+              </div>
+
               <div class="project__info">
                 <h3 class="project__name">코나아이 PC</h3>
                 <p class="project__company">코나아이</p>
@@ -492,6 +519,7 @@
                 </div>
               </div>
             </article>
+            </div>
           </div>
           <div class="project__more">
             <a href="#" class="btnMore">+ MORE</a>
@@ -598,50 +626,60 @@
           </div>
         </div>
 
-        <footer class="footer">
-          <div class="footer__inner">
-            <p class="footer__brand">
-              THE
-              <br />
-              BODA LAB
-            </p>
-            <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;<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>
-          </div>
-        </footer>
-
         <!-- 개인정보 수집·이용 동의 모달 -->
         <div class="privacyModal" id="privacyModal" hidden>
           <div class="privacyModal__overlay" data-modal-close></div>
           <div class="privacyModal__panel" role="dialog" aria-modal="true" aria-labelledby="privacyModalTitle">
-            <h3 id="privacyModalTitle" class="privacyModal__title">개인정보 수집 및 이용 동의</h3>
+            <div class="privacyModal__head">
-            <div class="privacyModal__body">
+              <h3 id="privacyModalTitle" class="privacyModal__title">개인정보 수집 및 이용 동의</h3>
-              <p>
+              <button type="button" class="privacyModal__close" data-modal-close aria-label="닫기">
-                <strong>1. 개인정보의 수집 및 이용 목적</strong>
+                <span class="privacyModal__closeLine"></span>
-                회사는 고객 문의에 대한 답변 제공 및 원활한 의사소통 경로 확보를 목적으로 개인정보를 수집 및 이용합니다.
+                <span class="privacyModal__closeLine"></span>
-              </p>
+              </button>
-              <p>
-                <strong>2. 수집하는 개인정보의 항목</strong>
-                필수항목: 회사명, 담당자 이름, 연락처, 이메일
-              </p>
-              <p>
-                <strong>3. 개인정보의 보유 및 이용 기간</strong>
-                원칙적으로 개인정보 수집 및 이용목적이 달성된 후에는 해당 정보를 지체 없이 파기합니다. 소비자 불만 또는 분쟁처리에 관한 기록은 3년, 기타 문의사항은 처리완료 후 6개월(또는 1년)간 보관합니다.
-              </p>
-              <p>
-                <strong>4. 동의를 거부할 권리 및 동의 거부에 따른 불이익</strong>
-                귀하는 개인정보 수집·이용에 동의하지 않을 권리가 있으며, 동의를 거부할 경우 문의 접수 및 답변 서비스 이용이 제한될 수 있습니다.
-              </p>
             </div>
-            <button type="button" class="privacyModal__agree" data-modal-close>동의합니다</button>
+            <div class="privacyModal__body">
+              <p>1. 개인정보의 수집 및 이용 목적 회사는 고객 문의에 대한 답변 제공 및 원활한 의사소통 경로 확보를 목적으로 개인정보를 수집 및 이용합니다.</p>
+              <p>
+                2. 수집하는 개인정보의 항목
+                <ul>
+                  <li>필수항목: 회사명, 담당자 이름, 연락처, 이메일</li>
+                </ul>
+              </p>
+              <p>
+                3. 개인정보의 보유 및 이용 기간 원칙적으로 개인정보 수집 및 이용목적이 달성된 후에는 해당 정보를 지체 없이 파기합니다. 단, 관계법령의 규정에 의하여 보존할 필요가 있는 경우 아래와 같이 관계법령에서 정한 일정 기간 동안 개인정보를 보존합니다.
+                <ul>
+                  <li>소비자의 불만 또는 분쟁처리에 관한 기록: 3년 (전자상거래등에서의 소비자보호에 관한 법률)</li>
+                  <li>기타 문의 사항: 문의 접수 및 처리 완료 후 6개월 (또는 1년)</li>
+                </ul>
+              </p>
+              <p>4. 동의를 거부할 권리 및 동의 거부에 따른 불이익 귀하는 본 개인정보 수집 및 이용 동의를 거부할 권리가 있습니다. 다만, 동의를 거부하시는 경우 문의 접수 및 답변 서비스 이용이 제한될 수 있습니다.</p>
+            </div>
+            <label class="contactForm__checkbox">
+              <input class="contactForm__checkboxInput" id="privacyModalAgree" type="checkbox" />
+              <span class="contactForm__checkboxBox"></span>
+              <span>동의합니다.</span>
+            </label>
           </div>
         </div>
       </section>
+
+      <footer class="footer">
+        <div class="footer__inner">
+          <p class="footer__brand">
+            THE
+            <br />
+            BODA LAB
+          </p>
+          <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;<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>
+        </div>
+      </footer>
+
     </main>
   </body>
 </html>

src/js/main.js

@@ -1,10 +1,19 @@
 import $ from "jquery";
 import { gsap } from "gsap";
 import { ScrollTrigger } from "gsap/ScrollTrigger";
+import Lenis from "lenis";
 import { initIntroAnimation } from "./introAnimation.js";
 
 gsap.registerPlugin(ScrollTrigger);
 
+// 스무스 스크롤 (Lenis) ↔ ScrollTrigger 연동
+const lenis = new Lenis();
+lenis.on("scroll", ScrollTrigger.update);
+gsap.ticker.add((time) => {
+  lenis.raf(time * 1000);
+});
+gsap.ticker.lagSmoothing(0);
+
 $(function () {
   initIntroAnimation();
   const $gnb = $("#gnb");
@@ -66,6 +75,12 @@ $(function () {
 
   updateActiveNav();
 
+  // nav 링크 클릭 시 Lenis로 부드럽게 스크롤
+  $(".gnb__navLink, .gnb__mobileNavLink").on("click", function (e) {
+    e.preventDefault();
+    lenis.scrollTo($(this).attr("href"));
+  });
+
   // 햄버거 메뉴
   $hamburger.on("click", function () {
     const isOpen = $hamburger.toggleClass("isOpen").hasClass("isOpen");
@@ -126,6 +141,11 @@ $(function () {
     $(this).closest(".privacyModal").attr("hidden", "");
   });
 
+  // 모달 안의 동의 체크박스를 체크하면 문의 폼의 동의 체크박스도 같이 체크됨
+  $("#privacyModalAgree").on("change", function () {
+    $(".contactForm__checkboxInput").not(this).prop("checked", this.checked);
+  });
+
   $(document).on("keydown", function (e) {
     if (e.key === "Escape") {
       $(".privacyModal:not([hidden])").attr("hidden", "");

src/scss/base/_reset.scss

@@ -10,7 +10,6 @@
 }
 
 html {
-  scroll-behavior: smooth;
   font-size: 16px;
 }
 

src/scss/page/_about.scss

@@ -111,7 +111,7 @@
   top: 0;
   left: 0;
   bottom: 0;
-  width: clamp(220px, 34vw, 500px);
+  width: clamp(220px, 47vw, 900px);
 
   .img {
     position: sticky;
@@ -122,15 +122,15 @@
 }
 
 .history__title {
-  position: sticky;
+  position: absolute;
-  top: 180px;
+  top: 120px;
-  margin-left: clamp(24px, 6vw, 120px);
+  left: clamp(24px, 6vw, 120px);
   z-index: 1;
   color: #ffffff;
 }
 
 .history__timeline {
-  margin-left: clamp(220px, 34vw, 500px);
+  margin-left: clamp(220px, 38vw, 726px);
 }
 
 .history__yearGroup {
@@ -154,7 +154,7 @@
 .history__yearToggle {
   position: relative;
   display: flex;
-  align-items: flex-start;
+  align-items: center;
   gap: 24px;
   width: 100%;
   padding: 30px 100px 30px 0;
@@ -170,6 +170,12 @@
 
   .history__listItem {
     flex: 1;
+
+    .main {
+      .badge {
+        margin: 6px 0 0 5px;
+      }
+    }
   }
 
   .icon {
@@ -250,14 +256,13 @@
   .badge {
     display: inline-block;
     vertical-align: top;
-    margin-left: 5px;
+    margin: 3px 0 0 5px;
     padding: 2px 8px;
     font-size: 8px;
     font-weight: 700;
     color: #0071f2;
     border: 1px solid #0071f2;
     border-radius: 4px;
-    vertical-align: middle;
   }
 
   .sub {

src/scss/page/_contact.scss

@@ -8,13 +8,11 @@
   display: flex;
   flex-direction: column;
   border-top: 1px solid rgba(13, 13, 13, 0.08);
+  padding: clamp(80px, 6.25vw, 120px) clamp(24px, 6.25vw, 120px) 0;
 }
 
 .contact__inner {
-  max-width: 1200px;
+  margin-bottom: clamp(80px, 6.25vw, 120px);
-  margin: 0 auto;
-  width: 100%;
-  padding: 100px 48px 64px;
 }
 
 .contact__heading {
@@ -27,11 +25,11 @@
 }
 
 .contact__desc {
-  margin-top: 20px;
+  margin-top: 60px;
-  margin-bottom: 48px;
+  margin-bottom: 120px;
   font-size: 14px;
   font-weight: 300;
-  color: rgba(13, 13, 13, 0.6);
+  color: #0d0d0d;
 }
 
 .contact__label {
@@ -61,10 +59,10 @@
 }
 
 .contact__infoValue {
-  font-size: 14px;
+  font-size: 16px;
   font-weight: 300;
-  line-height: 1.7;
+  line-height: 26px;
-  color: rgba(13, 13, 13, 0.85);
+  color: #0d0d0d;
 }
 
 .contact__infoLink {
@@ -78,14 +76,7 @@
 
 // Contact accordion
 .contactAccordion {
-  max-width: 1200px;
   width: 100%;
-  margin: 0 auto;
-  border-top: 1px solid rgba(13, 13, 13, 0.08);
-}
-
-.contactAccordion__item {
-  border-bottom: 1px solid rgba(13, 13, 13, 0.08);
 }
 
 .contactAccordion__header {
@@ -93,10 +84,11 @@
   align-items: center;
   justify-content: space-between;
   width: 100%;
-  padding: 28px 48px;
+  padding: 0 0 24px;
+  margin: 0 0 32px;
   background: none;
   border: none;
-  border-bottom: 1px solid rgba(13, 13, 13, 0.08);
+  border-bottom: 1px solid #0d0d0d;
   cursor: pointer;
   color: #0d0d0d;
   font-size: 32px;
@@ -140,7 +132,6 @@
 
 // 문의 폼
 .contactForm {
-  padding: 8px 48px 48px;
   display: flex;
   flex-direction: column;
   gap: 12px;
@@ -280,7 +271,7 @@
   display: flex;
   flex-wrap: wrap;
   gap: 12px;
-  padding: 8px 48px 48px;
+  padding: 8px clamp(24px, 6.25vw, 120px) 48px;
 }
 
 .careerTag {
@@ -375,72 +366,91 @@
 .privacyModal__overlay {
   position: absolute;
   inset: 0;
-  background: rgba(13, 13, 13, 0.6);
+  background: rgba(0, 0, 0, 0.5);
 }
 
 .privacyModal__panel {
   position: relative;
   z-index: 1;
-  max-width: 560px;
+  max-width: 720px;
   width: 100%;
   max-height: 80vh;
   overflow-y: auto;
   background: #ffffff;
   border-radius: 16px;
-  padding: 40px;
+  padding: 32px 40px;
   display: flex;
   flex-direction: column;
-  gap: 20px;
+  gap: 24px;
+}
+
+.privacyModal__head {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 16px;
+  padding-bottom: 24px;
+  border-bottom: 1px solid #0d0d0d;
 }
 
 .privacyModal__title {
   font-family: $기본글꼴;
-  font-size: 20px;
+  font-size: 32px;
-  font-weight: 600;
+  font-weight: 400;
   color: #0d0d0d;
 }
 
-.privacyModal__body {
+.privacyModal__close {
-  display: flex;
+  position: relative;
-  flex-direction: column;
+  width: 24px;
-  gap: 16px;
+  height: 24px;
-  font-family: $기본글꼴;
+  flex-shrink: 0;
-  font-size: 13px;
+  background: none;
-  font-weight: 300;
+  border: none;
-  line-height: 1.6;
+  padding: 0;
-  color: rgba(13, 13, 13, 0.75);
+  cursor: pointer;
+}
 
-  strong {
+.privacyModal__closeLine {
-    display: block;
+  position: absolute;
-    margin-bottom: 4px;
+  top: 50%;
-    font-weight: 600;
+  left: 0;
-    color: #0d0d0d;
+  width: 100%;
+  height: 1.5px;
+  background: #0d0d0d;
+
+  &:nth-child(1) {
+    transform: rotate(45deg);
+  }
+  &:nth-child(2) {
+    transform: rotate(-45deg);
   }
 }
 
-.privacyModal__agree {
+.privacyModal__body {
-  align-self: flex-end;
+  padding-bottom: 24px;
-  padding: 12px 28px;
+  border-bottom: 1px solid #0d0d0d;
-  background: #7796ff;
-  color: #000000;
-  border: none;
-  border-radius: 100px;
   font-family: $기본글꼴;
   font-size: 14px;
   font-weight: 400;
-  cursor: pointer;
+  line-height: 1.6;
-  transition: opacity 0.2s;
+  color: #0d0d0d;
 
-  &:hover {
+  p {
-    opacity: 0.85;
+    margin-bottom: 12px;
+  }
+
+  ul {
+    margin-top: 4px;
+    padding-left: 1em;
+  }
+
+  li {
+    list-style: disc;
   }
 }
 
 @include mo {
-  .contact__inner {
-    padding: 60px 24px 40px;
-  }
-
   .contact__desc {
     margin-bottom: 32px;
   }
@@ -451,11 +461,12 @@
   }
 
   .contactAccordion__header {
-    padding: 22px 24px;
+    padding-top: 22px;
+    padding-bottom: 22px;
   }
 
   .contactForm {
-    padding: 8px 24px 40px;
+    padding-bottom: 40px;
   }
 
   .contactForm__cols {
@@ -467,7 +478,7 @@
   }
 
   .careerTags {
-    padding: 8px 24px 40px;
+    padding-bottom: 40px;
   }
 
   .footer {

src/scss/page/_gnb.scss

@@ -3,11 +3,13 @@
 // GNB
 .gnb {
   position: fixed;
-  top: 0;
+  top: 70px;
   left: 0;
   width: 100%;
   z-index: 100;
-  transition: background 0.4s;
+  transition:
+    background 0.3s,
+    top 0.3s;
 
   &.isScrolled {
     background: rgba(13, 13, 13, 0.75);
@@ -16,6 +18,7 @@
 
   // HOME(intro)을 벗어났을 때 — 위치/크기 조정용 (배경·텍스트 색은 isLight가 별도로 담당)
   &.isPastHome {
+    top: 0;
   }
 
   // HISTORY/CONTACT처럼 흰 배경 섹션을 지나는 동안 — 텍스트가 묻히는 것 + 아래 콘텐츠가 비쳐서 겹쳐 보이는 것 둘 다 방지
@@ -49,7 +52,7 @@
   display: flex;
   align-items: center;
   justify-content: space-between;
-  padding: 80px clamp(24px, 5.2vw, 100px) 10px;
+  padding: 10px clamp(24px, 5.2vw, 100px) 10px;
 }
 
 .gnb__logo {

src/scss/page/_project.scss

@@ -2,29 +2,46 @@
 
 .project {
   background: #0d0d0d;
-  padding: 100px 48px;
+  padding: 120px;
 }
 
 .project__inner {
+}
+
+.project__heading {
+  margin-bottom: 120px;
+}
+
+.project__grid {
+  display: flex;
+  flex-direction: column;
+  gap: 40px;
   max-width: 1200px;
   margin: 0 auto;
 }
 
-.project__heading {
+.project__row {
-  margin-bottom: 60px;
+  display: flex;
-}
+  align-items: flex-start;
-
+  gap: 40px;
-.project__grid {
-  display: grid;
-  grid-template-columns: repeat(2, 1fr);
-  gap: 40px 40px;
 }
 
 .project__card {
   display: flex;
   flex-direction: column;
+  flex: 0 1 calc(50% - 20px);
   gap: 16px;
   cursor: pointer;
+  transition: flex 0.45s ease;
+
+  // 호버 시 624px → 738px(같은 비율)로 확장, 같은 행의 옆 카드는 자동으로 줄어듦
+  &:hover {
+    flex: 0 0 calc(59.135% - 20px);
+  }
+
+  &[hidden] {
+    display: none;
+  }
 }
 
 .project__card:hover .project__thumbImg {
@@ -33,21 +50,21 @@
 
 .project__thumb {
   width: 100%;
+  aspect-ratio: 624 / 396;
   overflow: hidden;
   background: #1a1a1a;
+  border-radius: 8px;
 }
 
 .project__thumbImg {
   width: 100%;
-  height: auto;
+  height: 100%;
+  object-fit: cover;
   display: block;
   transition: transform 0.5s ease;
 }
 
 .project__info {
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
 }
 
 .project__name {
@@ -58,6 +75,7 @@
 }
 
 .project__company {
+  margin: 15px 0 0;
   font-size: 14px;
   font-weight: 400;
   color: #b0b0b0;
@@ -67,14 +85,13 @@
   display: flex;
   flex-wrap: wrap;
   gap: 6px;
-  margin-top: 4px;
+  margin: 20px 0 0;
 }
 
 .project__tag {
   display: inline-block;
-  padding: 4px 14px 6px;
+  padding: 4px 14px 6px 14px;
   background: #2d2d2d;
-  border: 0.5px solid rgba(255, 255, 255, 0.5);
   border-radius: 20px;
   font-size: 12px;
   font-weight: 300;
@@ -122,10 +139,22 @@
   }
 
   .project__grid {
-    grid-template-columns: 1fr;
     gap: 32px;
   }
 
+  .project__row {
+    flex-direction: column;
+    gap: 32px;
+  }
+
+  .project__card {
+    flex-basis: 100%;
+
+    &:hover {
+      flex-basis: 100%;
+    }
+  }
+
   .project__more {
     margin-top: 48px;
   }