From aa396739bc93176246c406355390595804088cc1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EC=9D=B4=ED=9D=AC=EC=9B=90?= <richready2011@gmail.com>
Date: Sun, 28 Jun 2026 18:38:01 +0900
Subject: [PATCH] =?UTF-8?q?fix:=20=EC=9D=BC=EB=B6=80=20=EB=94=94=EC=9E=90?=
 =?UTF-8?q?=EC=9D=B8=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/index.html             |  1 +
 src/scss/page/_about.scss  | 27 ++++++++++++++++++-------
 src/scss/page/_vision.scss | 41 ++++++++++++++++++++++++++------------
 3 files changed, 49 insertions(+), 20 deletions(-)

diff --git a/src/index.html b/src/index.html
index 2213731..7675447 100644
--- a/src/index.html
+++ b/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>
diff --git a/src/scss/page/_about.scss b/src/scss/page/_about.scss
index 098b61d..d92bbf1 100644
--- a/src/scss/page/_about.scss
+++ b/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;
diff --git a/src/scss/page/_vision.scss b/src/scss/page/_vision.scss
index 5f6134b..63da1cb 100644
--- a/src/scss/page/_vision.scss
+++ b/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;
   }
 }