fix: 일부 디자인 수정

src/index.html

@@ -278,6 +278,7 @@
 
       <!-- 04. VISION -->
       <section id="vision" class="vision">
+        <div class="vision__bg" aria-hidden="true"></div>
         <div class="vision__inner">
           <div class="vision__head">
             <h2 class="sectionTitle">VISION</h2>

src/scss/page/_about.scss

@@ -136,8 +136,18 @@
 .history__yearGroup {
   border-top: 1px solid #000;
 
-  &:last-child {
-    border-bottom: 1px solid #000;
+  &.isOpen {
+    .history__yearToggle {
+      .icon::after {
+        opacity: 0;
+      }
+    }
+  }
+
+  &:has(.history__list:empty) {
+    .icon {
+      display: none;
+    }
   }
 }
 
@@ -192,10 +202,6 @@
   }
 }
 
-.history__yearGroup.isOpen .history__yearToggle .icon::after {
-  opacity: 0;
-}
-
 .history__year {
   font-size: clamp(24px, 2vw, 32px);
   font-weight: 500;
@@ -204,7 +210,6 @@
 }
 
 .history__list {
-  margin-top: -14px;
   display: flex;
   flex-direction: column;
   gap: 16px;
@@ -222,6 +227,14 @@
   justify-content: space-between;
   gap: 24px;
 
+  &:first-child {
+    margin-top: -14px;
+  }
+
+  &:last-child {
+    margin-bottom: 30px;
+  }
+
   .main {
     display: flex;
     flex-direction: column;

src/scss/page/_vision.scss

@@ -2,14 +2,29 @@
 
 // Vision
 .vision {
+  position: relative;
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
   background: #0d0d0d;
   padding: clamp(80px, 6.25vw, 120px) clamp(24px, 6.25vw, 120px);
+  overflow: hidden;
+}
+
+.vision__bg {
+  position: absolute;
+  inset: 0;
+  background: url("../../images/unsplash_Cq5NaI0yKBE.png") center / cover no-repeat;
+  pointer-events: none;
 }
 
 .vision__inner {
+  position: relative;
+  z-index: 1;
   display: flex;
   flex-direction: column;
-  gap: clamp(60px, 8vw, 140px);
+  gap: clamp(80px, 6.25vw, 120px);
 }
 
 .vision__head {
@@ -24,31 +39,31 @@
 
 .vision__desc {
   max-width: 560px;
-  font-size: clamp(13px, 1.1vw, 16px);
+  font-size: clamp(13px, 0.73vw, 14px);
   font-weight: 300;
   line-height: 1.8;
   color: #ffffff;
-  opacity: 0.9;
 }
 
 .vision__quote {
   display: flex;
   align-items: flex-start;
-  gap: 12px;
+  gap: 0;
   align-self: flex-end;
-  max-width: 640px;
+  max-width: 740px;
 
   .mark {
-    font-size: clamp(40px, 4.2vw, 80px);
-    font-weight: 700;
+    font-size: clamp(60px, 7.6vw, 146px);
+    font-weight: 600;
     line-height: 1;
+    margin-top: -0.34em;
     color: #ffffff;
   }
 
   .text {
-    font-size: clamp(18px, 1.9vw, 32px);
-    font-weight: 300;
-    line-height: 1.4;
+    font-size: clamp(22px, 2.4vw, 46px);
+    font-weight: 100;
+    line-height: 1.2;
     color: #ffffff;
   }
 }
@@ -67,7 +82,7 @@
   gap: 12px;
 
   .keyword {
-    font-size: clamp(28px, 3.1vw, 60px);
+    font-size: clamp(28px, 3.33vw, 64px);
     font-weight: 800;
     letter-spacing: 0.01em;
     color: #ffffff;
@@ -75,9 +90,9 @@
   }
 
   .desc {
-    font-size: clamp(12px, 0.8vw, 14px);
+    font-size: clamp(12px, 0.73vw, 14px);
     font-weight: 300;
-    color: rgba(255, 255, 255, 0.75);
+    color: #ffffff;
   }
 }