fix: 디자인 미세조정

src/index.html

@@ -541,7 +541,7 @@
             <dl class="contact__infoList">
               <div class="contact__infoItem">
                 <dt class="contact__infoLabel">Address</dt>
-                <dd class="contact__infoValue">서울시 강서구 마곡중앙로 161-8, 두산더랜드파크 C동 618호</dd>
+                <dd class="contact__infoValue"><a href="https://map.naver.com/p/search/%EC%84%9C%EC%9A%B8%EC%8B%9C%20%EA%B0%95%EC%84%9C%EA%B5%AC%20%EB%A7%88%EA%B3%A1%EC%A4%91%EC%95%99%EB%A1%9C%20161-8%2C%20%EB%91%90%EC%82%B0%EB%8D%94%EB%9E%9C%EB%93%9C%ED%8C%8C%ED%81%AC%20C%EB%8F%99%20618%ED%98%B8/address/3zblcS,2AM96G,%EC%84%9C%EC%9A%B8%ED%8A%B9%EB%B3%84%EC%8B%9C%20%EA%B0%95%EC%84%9C%EA%B5%AC%20%EB%A7%88%EA%B3%A1%EC%A4%91%EC%95%99%EB%A1%9C%20161-8?c=15.00,0,0,0,dh&isCorrectAnswer=true" target="_blank">서울시 강서구 마곡중앙로 161-8, 두산더랜드파크 C동 618호</a></dd>
               </div>
               <div class="contact__infoItem">
                 <dt class="contact__infoLabel">e-mail</dt>
@@ -551,7 +551,7 @@
               </div>
               <div class="contact__infoItem">
                 <dt class="contact__infoLabel">tel</dt>
-                <dd class="contact__infoValue">010-4169-4728</dd>
+                <dd class="contact__infoValue"><a href="tel:010-4169-4728">010-4169-4728</a></dd>
               </div>
             </dl>
           </address>
@@ -578,9 +578,8 @@
                   <label class="contactForm__checkbox">
                     <input class="contactForm__checkboxInput" type="checkbox" />
                     <span class="contactForm__checkboxBox"></span>
-                    <span>[필수] 개인정보 수집 및 이용 동의</span>
+                    <button type="button" class="contactForm__termsTrigger" data-modal-open="privacyModal">[필수] 개인정보 수집 및 이용 동의</button>
                   </label>
-                  <button type="button" class="contactForm__termsTrigger" data-modal-open="privacyModal">보기</button>
                 </div>
                 <div class="contactForm__submit">
                   <button type="submit" class="btnSend">SEND</button>
@@ -590,36 +589,36 @@
           </div>
 
           <!-- Recruitment -->
-          <div class="contactAccordion__item" id="acc-career">
+          <div class="contactAccordion__item isOpen" id="acc-career">
-            <button class="contactAccordion__header" aria-expanded="false" aria-controls="acc-career-body">
+            <button class="contactAccordion__header" aria-expanded="true" aria-controls="acc-career-body">
               <span>Recruitment</span>
               <img class="contactAccordion__icon" src="images/icon-chevron.svg" alt="" />
             </button>
-            <div class="contactAccordion__body" id="acc-career-body" hidden>
+            <div class="contactAccordion__body" id="acc-career-body">
               <div class="careerTags">
-                <a href="#" class="careerTag">
+                <a href="#" target="_blank" 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>
+                  </svg>                  
                 </a>
-                <a href="#" class="careerTag">
+                <a href="#" target="_blank" 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>
+                  </svg>                  
                 </a>
-                <a href="#" class="careerTag">
+                <a href="#" target="_blank" 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>
+                  </svg>                  
                 </a>
-                <a href="#" class="careerTag">
+                <a href="#" target="_blank" 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>
+                  </svg>                  
                 </a>
               </div>
             </div>
@@ -673,7 +672,7 @@
           <p class="footer__contact">
             <strong class="footer__contactLabel">Mail</strong>
             <a class="footer__contactLink" href="mailto:koji@bodalab.co.kr">koji@bodalab.co.kr</a>
-            &nbsp;&nbsp;<strong class="footer__contactLabel">Tel</strong>
+            &nbsp;&nbsp;&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>

src/js/main.js

@@ -141,9 +141,13 @@ $(function () {
     $(this).closest(".privacyModal").attr("hidden", "");
   });
 
-  // 모달 안의 동의 체크박스를 체크하면 문의 폼의 동의 체크박스도 같이 체크됨
+  // 모달 안의 동의 체크박스를 체크하면 문의 폼의 동의 체크박스도 같이 체크되고, 모달은 닫힘
   $("#privacyModalAgree").on("change", function () {
     $(".contactForm__checkboxInput").not(this).prop("checked", this.checked);
+
+    if (this.checked) {
+      $(this).closest(".privacyModal").attr("hidden", "");
+    }
   });
 
   $(document).on("keydown", function (e) {

src/scss/index.scss

@@ -12,6 +12,7 @@
 @use "page/vision";
 @use "page/project";
 @use "page/contact";
+@use "page/footer";
 
 .sectionTitle {
   font-family: $기본글꼴;

src/scss/page/_contact.scss

@@ -12,7 +12,7 @@
 }
 
 .contact__inner {
-  margin-bottom: clamp(80px, 6.25vw, 120px);
+  margin-bottom: 88px;
 }
 
 .contact__heading {
@@ -85,7 +85,7 @@
   justify-content: space-between;
   width: 100%;
   padding: 0 0 24px;
-  margin: 0 0 32px;
+  margin: 32px 0 0;
   background: none;
   border: none;
   border-bottom: 1px solid #0d0d0d;
@@ -132,9 +132,7 @@
 
 // 문의 폼
 .contactForm {
-  display: flex;
+  margin: 32px 0 0;
-  flex-direction: column;
-  gap: 12px;
 }
 
 .contactForm__cols {
@@ -164,10 +162,7 @@
   transition: border-color 0.2s;
 
   &::placeholder {
-    color: rgba(13, 13, 13, 0.35);
+    color: #737373;
-  }
-  &:focus {
-    border-color: rgba(13, 13, 13, 0.4);
   }
 }
 
@@ -181,7 +176,7 @@
   display: flex;
   align-items: center;
   gap: 10px;
-  margin-top: 4px;
+  margin-top: 12px;
 }
 
 .contactForm__termsTrigger {
@@ -189,9 +184,8 @@
   border: none;
   padding: 0;
   font-family: $기본글꼴;
-  font-size: 13px;
+  font-size: 16px;
-  font-weight: 300;
+  color: #0d0d0d;
-  color: rgba(13, 13, 13, 0.45);
   text-decoration: underline;
   cursor: pointer;
 
@@ -203,11 +197,10 @@
 .contactForm__checkbox {
   display: inline-flex;
   align-items: center;
-  gap: 10px;
+  gap: 14px;
   cursor: pointer;
-  font-size: 13px;
+  font-size: 16px;
-  font-weight: 300;
+  color: #0d0d0d;
-  color: rgba(13, 13, 13, 0.6);
 }
 
 .contactForm__checkboxInput {
@@ -230,13 +223,16 @@
 }
 
 .contactForm__checkboxBox {
-  width: 18px;
+  width: 26px;
-  height: 18px;
+  height: 26px;
-  border: 1px solid #0d0d0d;
   flex-shrink: 0;
   display: flex;
   align-items: center;
   justify-content: center;
+
+  border-radius: 4px;
+  border: 1px solid #0d0d0d;
+
   transition:
     background 0.2s,
     border-color 0.2s;
@@ -245,7 +241,7 @@
 .contactForm__submit {
   display: flex;
   justify-content: center;
-  margin-top: 8px;
+  margin-top: 24px;
 }
 
 .btnSend {
@@ -271,16 +267,16 @@
   display: flex;
   flex-wrap: wrap;
   gap: 12px;
-  padding: 8px clamp(24px, 6.25vw, 120px) 48px;
+  margin: 32px 0 0;
 }
 
 .careerTag {
   display: inline-flex;
   align-items: center;
-  gap: 8px;
+  gap: 10px;
-  padding: 10px 20px;
+  padding: 8px 24px;
-  border: 1px solid rgba(13, 13, 13, 0.25);
+  border: 1px solid #0d0d0d;
-  border-radius: 100px;
+  border-radius: 40px;
   font-size: 16px;
   font-weight: 400;
   color: #0d0d0d;
@@ -295,59 +291,11 @@
 }
 
 .careerTag__icon {
-  width: 14px;
+  width: 24px;
-  height: 14px;
+  height: 24px;
   flex-shrink: 0;
 }
 
-// Footer
-.footer {
-  background: #0d0d0d;
-  padding: 32px 48px;
-}
-
-.footer__inner {
-  display: flex;
-  align-items: center;
-  align-items: flex-end;
-  justify-content: space-between;
-  gap: 24px;
-  flex-wrap: wrap;
-}
-
-.footer__brand {
-  font-size: 32px;
-  font-weight: 700;
-  letter-spacing: 0.08em;
-  color: #fff;
-  line-height: 1.2;
-  text-transform: uppercase;
-}
-
-.footer__contact {
-  font-size: 14px;
-  color: #fff;
-}
-
-.footer__contactLabel {
-  font-weight: 700;
-}
-
-.footer__contactLink {
-  color: #fff;
-  transition: color 0.2s;
-
-  &:hover {
-    color: #0d0d0d;
-  }
-}
-
-.footer__copy {
-  font-size: 14px;
-  color: #fff;
-  letter-spacing: 0.03em;
-}
-
 // 개인정보 수집·이용 동의 모달
 .privacyModal {
   position: fixed;
@@ -481,16 +429,6 @@
     padding-bottom: 40px;
   }
 
-  .footer {
-    padding: 24px 20px;
-  }
-
-  .footer__inner {
-    flex-direction: column;
-    align-items: flex-start;
-    gap: 20px;
-  }
-
   .privacyModal__panel {
     padding: 28px 24px;
   }

src/scss/page/_footer.scss

@@ -0,0 +1,64 @@
+@use "../base/mixin" as *;
+
+// Footer
+.footer {
+  background: #fff;
+  padding: 120px 0 0;
+}
+
+.footer__inner {
+  background: #0d0d0d;
+  padding: 60px 120px;
+  display: flex;
+  align-items: center;
+  align-items: flex-end;
+  justify-content: space-between;
+  gap: 24px;
+  flex-wrap: wrap;
+}
+
+.footer__brand {
+  font-size: 32px;
+  font-weight: 700;
+  letter-spacing: 0.08em;
+  color: #fff;
+  line-height: 1.2;
+  text-transform: uppercase;
+}
+
+.footer__contact {
+  font-size: 14px;
+  color: #fff;
+}
+
+.footer__contactLabel {
+  font-weight: 700;
+}
+
+.footer__contactLink {
+  color: #fff;
+  transition: color 0.2s;
+  margin: 0 0 0 5px;
+
+  &:hover {
+    color: #7796ff;
+  }
+}
+
+.footer__copy {
+  font-size: 14px;
+  color: #fff;
+  letter-spacing: 0.03em;
+}
+
+@include mo {
+  .footer {
+    padding: 24px 20px;
+  }
+
+  .footer__inner {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 20px;
+  }
+}