From 9b197626aba1e2b53e7a623005c34f14c5a8e231 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:02:19 +0900
Subject: [PATCH] =?UTF-8?q?fix:=20=EA=B2=80=EC=88=98=20about?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/index.html               |  54 +++++++--------
 src/scss/base/_reset.scss    |   4 +-
 src/scss/base/_variable.scss |  11 ----
 src/scss/index.scss          |   8 +--
 src/scss/page/_about.scss    | 124 ++++++++++++++++++++---------------
 src/scss/page/_contact.scss  |  58 ++++++++--------
 src/scss/page/_gnb.scss      |  21 +++---
 src/scss/page/_intro.scss    |  13 ++--
 src/scss/page/_project.scss  |  21 +++---
 src/scss/page/_vision.scss   |  13 ++--
 10 files changed, 162 insertions(+), 165 deletions(-)

diff --git a/src/index.html b/src/index.html
index 54ca380..2213731 100644
--- a/src/index.html
+++ b/src/index.html
@@ -116,10 +116,7 @@
           <div class="history__yearGroup isOpen">
             <button class="history__yearToggle" aria-expanded="true" aria-controls="history2025">
               <span class="history__year">2025</span>
-              <span class="icon" aria-hidden="true"></span>
-            </button>
-            <ul class="history__list" id="history2025">
-              <li class="history__listItem">
+              <div class="history__listItem">
                 <div class="main">
                   <h3 class="title">한국전자기술연구원 대쉬보드 구축</h3>
                   <p class="sub">
@@ -128,7 +125,10 @@
                   </p>
                 </div>
                 <span class="date">25.12 - 26.02</span>
-              </li>
+              </div>
+              <span class="icon" aria-hidden="true"></span>
+            </button>
+            <ul class="history__list" id="history2025">
               <li class="history__listItem">
                 <div class="main">
                   <h3 class="title">현대차 판매시스템 구축</h3>
@@ -219,63 +219,59 @@
           <div class="history__yearGroup">
             <button class="history__yearToggle" aria-expanded="false" aria-controls="history2024">
               <span class="history__year">2024</span>
-              <span class="icon" aria-hidden="true"></span>
-            </button>
-            <ul class="history__list" id="history2024" hidden>
-              <li class="history__listItem">
+              <div class="history__listItem">
                 <div class="main">
                   <h3 class="title">우리은행 로보어드바이저 구축 <span class="badge">Finance</span></h3>
                   <p class="sub">React, Typescript, Recoil</p>
                 </div>
                 <span class="date">24.11 - 25.07</span>
-              </li>
-            </ul>
+              </div>
+              <span class="icon" aria-hidden="true"></span>
+            </button>
+            <ul class="history__list" id="history2024" hidden></ul>
           </div>
 
           <div class="history__yearGroup">
             <button class="history__yearToggle" aria-expanded="false" aria-controls="history2023">
               <span class="history__year">2023</span>
-              <span class="icon" aria-hidden="true"></span>
-            </button>
-            <ul class="history__list" id="history2023" hidden>
-              <li class="history__listItem">
+              <div class="history__listItem">
                 <div class="main">
                   <h3 class="title">신한은행 슈퍼SOL 운영 계약 <span class="badge">Finance</span></h3>
                   <p class="sub">Vue</p>
                 </div>
                 <span class="date">23.12</span>
-              </li>
-            </ul>
+              </div>
+              <span class="icon" aria-hidden="true"></span>
+            </button>
+            <ul class="history__list" id="history2023" hidden></ul>
           </div>
 
           <div class="history__yearGroup">
             <button class="history__yearToggle" aria-expanded="false" aria-controls="history2022">
               <span class="history__year">2022</span>
-              <span class="icon" aria-hidden="true"></span>
-            </button>
-            <ul class="history__list" id="history2022" hidden>
-              <li class="history__listItem">
+              <div class="history__listItem">
                 <div class="main">
                   <h3 class="title">한화금융 서비스앱 플러스 리뉴얼 2차 계약 <span class="badge">Finance</span></h3>
                 </div>
                 <span class="date">22.11</span>
-              </li>
-            </ul>
+              </div>
+              <span class="icon" aria-hidden="true"></span>
+            </button>
+            <ul class="history__list" id="history2022" hidden></ul>
           </div>
 
           <div class="history__yearGroup">
             <button class="history__yearToggle" aria-expanded="false" aria-controls="history2021">
               <span class="history__year">2021</span>
-              <span class="icon" aria-hidden="true"></span>
-            </button>
-            <ul class="history__list" id="history2021" hidden>
-              <li class="history__listItem">
+              <div class="history__listItem">
                 <div class="main">
                   <h3 class="title">롯데 렌터카 차세대 구축 계약</h3>
                 </div>
                 <span class="date">21.11</span>
-              </li>
-            </ul>
+              </div>
+              <span class="icon" aria-hidden="true"></span>
+            </button>
+            <ul class="history__list" id="history2021" hidden></ul>
           </div>
         </div>
       </section>
diff --git a/src/scss/base/_reset.scss b/src/scss/base/_reset.scss
index 1909ed9..5b21e42 100644
--- a/src/scss/base/_reset.scss
+++ b/src/scss/base/_reset.scss
@@ -16,8 +16,8 @@ html {
 
 body {
   font-family: $기본글꼴;
-  background-color: $color-bg;
-  color: $color-white;
+  background-color: #0d0d0d;
+  color: #ffffff;
   overflow-x: hidden;
   -webkit-font-smoothing: antialiased;
 }
diff --git a/src/scss/base/_variable.scss b/src/scss/base/_variable.scss
index 82cebec..e869d9b 100644
--- a/src/scss/base/_variable.scss
+++ b/src/scss/base/_variable.scss
@@ -1,16 +1,5 @@
-$color-bg: #0d0d0d;
-$color-bg-light: #e5e5e5;
-$color-cyan: #00f0ff;
-$color-purple: #8f00ff;
-$color-blue: #7796ff;
-$color-badge-blue: #0071f2;
-$color-white: #ffffff;
-$color-dark: #0d0d0d;
-$color-gray: #999;
-
 $기본글꼴: "SUIT Variable", "SUIT", sans-serif;
 
-$gnb-height: 60px;
 $gnb-height-mo: 60px;
 
 $bp-mo: 768px;
diff --git a/src/scss/index.scss b/src/scss/index.scss
index d2c2b85..989149f 100644
--- a/src/scss/index.scss
+++ b/src/scss/index.scss
@@ -15,15 +15,15 @@
 
 .sectionTitle {
   font-family: $기본글꼴;
-  font-size: clamp(28px, 3vw, 40px);
+  font-size: clamp(28px, 3vw, 48px);
   font-weight: 600;
   letter-spacing: 0.02em;
-  color: $color-white;
-  line-height: 1;
+  color: #ffffff;
+  line-height: 0.8;
 }
 
 .sectionTitleDark {
-  color: $color-dark;
+  color: #0d0d0d;
 }
 
 .scrollDown {
diff --git a/src/scss/page/_about.scss b/src/scss/page/_about.scss
index 552e9e5..098b61d 100644
--- a/src/scss/page/_about.scss
+++ b/src/scss/page/_about.scss
@@ -5,7 +5,7 @@
 .about {
   position: relative;
   min-height: 100vh;
-  background: $color-bg;
+  background: #0d0d0d;
   display: flex;
   flex-direction: column;
   justify-content: center;
@@ -30,20 +30,17 @@
 }
 
 .about__head {
-  display: flex;
-  flex-direction: column;
-  gap: clamp(30px, 3.1vw, 60px);
-
   .sectionTitle {
-    margin: 0;
+    margin: 0 0 57px;
   }
 }
 
 .about__desc {
+  margin: 0 0 70px;
   font-size: clamp(13px, 1.1vw, 16px);
   font-weight: 300;
-  line-height: 1.8;
-  color: $color-white;
+  line-height: 150%;
+  color: #ffffff;
   opacity: 0.9;
 }
 
@@ -58,14 +55,14 @@
   font-size: clamp(60px, 7.6vw, 146px);
   font-weight: 600;
   line-height: 1;
-  color: $color-white;
+  color: #ffffff;
 }
 
 .about__quoteText {
   font-size: clamp(22px, 2.4vw, 46px);
   font-weight: 100;
   line-height: 1.2;
-  color: $color-white;
+  color: #ffffff;
 }
 
 .about__expertiseList {
@@ -84,7 +81,7 @@
   .num {
     font-size: clamp(14px, 0.85vw, 16px);
     font-weight: 800;
-    color: $color-blue;
+    color: #7796ff;
   }
 
   .name {
@@ -92,24 +89,20 @@
     font-weight: 800;
     text-transform: uppercase;
     line-height: 1.2;
-    color: $color-white;
+    color: #ffffff;
   }
 
   .text {
     font-size: clamp(12px, 0.75vw, 14px);
     font-weight: 300;
-    color: $color-white;
+    color: #ffffff;
   }
 }
 
 // History
-// 좌측 사진은 Figma 디자인 기준 섹션 좌/상/하 끝까지 풀블리드, 텍스트만 일반 패딩을 따름
-$history-photo-w: clamp(220px, 26vw, 500px);
-$history-gap: clamp(40px, 6.25vw, 120px);
-
 .history {
   position: relative;
-  background: $color-bg-light;
+  background: #fff;
   padding: clamp(60px, 6.25vw, 120px) clamp(24px, 6.25vw, 120px) clamp(60px, 6.25vw, 120px) 0;
 }
 
@@ -118,52 +111,65 @@ $history-gap: clamp(40px, 6.25vw, 120px);
   top: 0;
   left: 0;
   bottom: 0;
-  width: $history-photo-w;
-  overflow: hidden;
-  background: $color-dark;
+  width: clamp(220px, 34vw, 500px);
 
   .img {
+    position: sticky;
+    top: 0;
     width: 100%;
-    height: 100%;
     object-fit: cover;
   }
 }
 
 .history__title {
-  position: absolute;
-  top: clamp(60px, 6.25vw, 120px);
-  left: clamp(24px, 6.25vw, 120px);
+  position: sticky;
+  top: 180px;
+  margin-left: clamp(24px, 6vw, 120px);
   z-index: 1;
-  color: $color-white;
+  color: #ffffff;
 }
 
 .history__timeline {
-  margin-left: calc(#{$history-photo-w} + #{$history-gap});
+  margin-left: clamp(220px, 34vw, 500px);
 }
 
 .history__yearGroup {
-  border-top: 1px solid rgba($color-dark, 0.15);
+  border-top: 1px solid #000;
 
   &:last-child {
-    border-bottom: 1px solid rgba($color-dark, 0.15);
+    border-bottom: 1px solid #000;
   }
 }
 
 .history__yearToggle {
+  position: relative;
   display: flex;
-  align-items: center;
-  justify-content: space-between;
+  align-items: flex-start;
+  gap: 24px;
   width: 100%;
-  padding: clamp(16px, 1.8vw, 24px) 0;
+  padding: 30px 100px 30px 0;
   background: none;
   border: none;
   cursor: pointer;
+  text-align: left;
+
+  .history__year {
+    flex-shrink: 0;
+    width: 80px;
+  }
+
+  .history__listItem {
+    flex: 1;
+  }
 
   .icon {
-    position: relative;
+    position: absolute;
+    top: 50%;
+    right: 0;
     width: 28px;
     height: 28px;
-    border: 1px solid $color-dark;
+    transform: translateY(-50%);
+    border: 1px solid #0d0d0d;
     border-radius: 50%;
     flex-shrink: 0;
 
@@ -175,7 +181,7 @@ $history-gap: clamp(40px, 6.25vw, 120px);
       left: 50%;
       width: 10px;
       height: 1px;
-      background: $color-dark;
+      background: #0d0d0d;
       transform: translate(-50%, -50%);
     }
 
@@ -191,28 +197,30 @@ $history-gap: clamp(40px, 6.25vw, 120px);
 }
 
 .history__year {
-  font-size: clamp(28px, 2.5vw, 40px);
-  font-weight: 100;
-  color: $color-dark;
+  font-size: clamp(24px, 2vw, 32px);
+  font-weight: 500;
+  color: #0d0d0d;
   line-height: 1;
 }
 
 .history__list {
+  margin-top: -14px;
   display: flex;
   flex-direction: column;
+  gap: 16px;
+  margin-left: 104px;
+  margin-right: 100px;
+
+  &[hidden] {
+    display: none;
+  }
 }
 
 .history__listItem {
   display: flex;
-  align-items: flex-start;
+  align-items: center;
   justify-content: space-between;
   gap: 24px;
-  padding: clamp(12px, 1.2vw, 16px) 0;
-  border-top: 1px solid rgba($color-dark, 0.08);
-
-  &:first-child {
-    border-top: none;
-  }
 
   .main {
     display: flex;
@@ -223,25 +231,25 @@ $history-gap: clamp(40px, 6.25vw, 120px);
   .title {
     font-size: clamp(14px, 1vw, 16px);
     font-weight: 400;
-    color: $color-dark;
+    color: #0d0d0d;
   }
 
   .badge {
     display: inline-block;
-    margin-left: 6px;
+    vertical-align: top;
+    margin-left: 5px;
     padding: 2px 8px;
     font-size: 10px;
     font-weight: 700;
-    color: $color-badge-blue;
-    border: 1px solid $color-badge-blue;
+    color: #0071f2;
+    border: 1px solid #0071f2;
     border-radius: 4px;
     vertical-align: middle;
   }
 
   .sub {
-    font-size: clamp(11px, 0.8vw, 13px);
-    font-weight: 300;
-    color: rgba($color-dark, 0.55);
+    font-size: 14px;
+    color: #7b7b7b;
     line-height: 1.6;
   }
 
@@ -249,7 +257,7 @@ $history-gap: clamp(40px, 6.25vw, 120px);
     flex-shrink: 0;
     font-size: clamp(12px, 0.85vw, 14px);
     font-weight: 400;
-    color: rgba($color-dark, 0.65);
+    color: rgba(13, 13, 13, 0.65);
     white-space: nowrap;
   }
 }
@@ -283,7 +291,7 @@ $history-gap: clamp(40px, 6.25vw, 120px);
   .history__title {
     position: static;
     margin-bottom: 32px;
-    color: $color-dark;
+    color: #0d0d0d;
   }
 
   .history__photo {
@@ -294,6 +302,14 @@ $history-gap: clamp(40px, 6.25vw, 120px);
     margin-left: 0;
   }
 
+  .history__yearToggle {
+    flex-wrap: wrap;
+  }
+
+  .history__list {
+    margin-left: 0;
+  }
+
   .history__listItem {
     flex-direction: column;
     gap: 6px;
diff --git a/src/scss/page/_contact.scss b/src/scss/page/_contact.scss
index df8597f..7034971 100644
--- a/src/scss/page/_contact.scss
+++ b/src/scss/page/_contact.scss
@@ -4,10 +4,10 @@
 // Contact
 // 이 섹션만 Figma 디자인이 라이트 테마(흰 배경/검은 텍스트)임 — 다른 섹션과 색상 반전
 .contact {
-  background: $color-white;
+  background: #ffffff;
   display: flex;
   flex-direction: column;
-  border-top: 1px solid rgba($color-dark, 0.08);
+  border-top: 1px solid rgba(13, 13, 13, 0.08);
 }
 
 .contact__inner {
@@ -22,7 +22,7 @@
   font-size: clamp(28px, 3vw, 40px);
   font-weight: 600;
   letter-spacing: 0.02em;
-  color: $color-dark;
+  color: #0d0d0d;
   line-height: 1;
 }
 
@@ -31,7 +31,7 @@
   margin-bottom: 48px;
   font-size: 15px;
   font-weight: 300;
-  color: rgba($color-dark, 0.6);
+  color: rgba(13, 13, 13, 0.6);
 }
 
 .contact__label {
@@ -39,7 +39,7 @@
   font-weight: 600;
   letter-spacing: 0.1em;
   text-transform: uppercase;
-  color: rgba($color-dark, 0.5);
+  color: rgba(13, 13, 13, 0.5);
   margin-bottom: 20px;
 }
 
@@ -59,14 +59,14 @@
   font-size: 12px;
   font-weight: 600;
   letter-spacing: 0.08em;
-  color: $color-blue;
+  color: #7796ff;
 }
 
 .contact__infoValue {
   font-size: 14px;
   font-weight: 300;
   line-height: 1.7;
-  color: rgba($color-dark, 0.85);
+  color: rgba(13, 13, 13, 0.85);
 }
 
 .contact__infoLink {
@@ -83,11 +83,11 @@
   max-width: 1200px;
   width: 100%;
   margin: 0 auto;
-  border-top: 1px solid rgba($color-dark, 0.08);
+  border-top: 1px solid rgba(13, 13, 13, 0.08);
 }
 
 .contactAccordion__item {
-  border-bottom: 1px solid rgba($color-dark, 0.08);
+  border-bottom: 1px solid rgba(13, 13, 13, 0.08);
 }
 
 .contactAccordion__header {
@@ -98,9 +98,9 @@
   padding: 28px 48px;
   background: none;
   border: none;
-  border-bottom: 1px solid rgba($color-dark, 0.08);
+  border-bottom: 1px solid rgba(13, 13, 13, 0.08);
   cursor: pointer;
-  color: $color-dark;
+  color: #0d0d0d;
   font-size: clamp(16px, 1.4vw, 20px);
   font-weight: 400;
   font-family: $기본글꼴;
@@ -163,9 +163,9 @@
 .contactForm__input,
 .contactForm__textarea {
   width: 100%;
-  background: $color-white;
-  border: 1px solid rgba($color-dark, 0.2);
-  color: $color-dark;
+  background: #ffffff;
+  border: 1px solid rgba(13, 13, 13, 0.2);
+  color: #0d0d0d;
   font-family: $기본글꼴;
   font-size: 14px;
   font-weight: 300;
@@ -174,10 +174,10 @@
   transition: border-color 0.2s;
 
   &::placeholder {
-    color: rgba($color-dark, 0.35);
+    color: rgba(13, 13, 13, 0.35);
   }
   &:focus {
-    border-color: rgba($color-dark, 0.4);
+    border-color: rgba(13, 13, 13, 0.4);
   }
 }
 
@@ -198,7 +198,7 @@
   cursor: pointer;
   font-size: 13px;
   font-weight: 300;
-  color: rgba($color-dark, 0.6);
+  color: rgba(13, 13, 13, 0.6);
 }
 
 .contactForm__checkboxInput {
@@ -206,8 +206,8 @@
 }
 
 .contactForm__checkboxInput:checked + .contactForm__checkboxBox {
-  background: $color-blue;
-  border-color: $color-blue;
+  background: #7796ff;
+  border-color: #7796ff;
 }
 
 .contactForm__checkboxInput:checked + .contactForm__checkboxBox::after {
@@ -215,15 +215,15 @@
   display: block;
   width: 10px;
   height: 6px;
-  border-left: 1.5px solid $color-white;
-  border-bottom: 1.5px solid $color-white;
+  border-left: 1.5px solid #ffffff;
+  border-bottom: 1.5px solid #ffffff;
   transform: rotate(-45deg) translateY(-2px);
 }
 
 .contactForm__checkboxBox {
   width: 18px;
   height: 18px;
-  border: 1px solid rgba($color-dark, 0.3);
+  border: 1px solid rgba(13, 13, 13, 0.3);
   flex-shrink: 0;
   display: flex;
   align-items: center;
@@ -241,10 +241,10 @@
 
 .btnSend {
   padding: 12px 48px;
-  background: $color-blue;
+  background: #7796ff;
   border: none;
   border-radius: 100px;
-  color: $color-white;
+  color: #ffffff;
   font-family: $기본글꼴;
   font-size: 14px;
   font-weight: 700;
@@ -270,18 +270,18 @@
   align-items: center;
   gap: 8px;
   padding: 10px 20px;
-  border: 1px solid rgba($color-dark, 0.25);
+  border: 1px solid rgba(13, 13, 13, 0.25);
   border-radius: 100px;
   font-size: 14px;
   font-weight: 300;
-  color: $color-dark;
+  color: #0d0d0d;
   transition:
     border-color 0.2s,
     color 0.2s;
 
   &:hover {
-    border-color: $color-blue;
-    color: $color-blue;
+    border-color: #7796ff;
+    color: #7796ff;
   }
 }
 
@@ -330,7 +330,7 @@
   transition: color 0.2s;
 
   &:hover {
-    color: $color-dark;
+    color: #0d0d0d;
   }
 }
 
diff --git a/src/scss/page/_gnb.scss b/src/scss/page/_gnb.scss
index 4609ead..62116ab 100644
--- a/src/scss/page/_gnb.scss
+++ b/src/scss/page/_gnb.scss
@@ -1,4 +1,3 @@
-@use "../base/variable" as *;
 @use "../base/mixin" as *;
 
 // GNB
@@ -11,7 +10,7 @@
   transition: background 0.4s;
 
   &.isScrolled {
-    // background: rgba($color-bg, 0.92);
+    // background: rgba(13, 13, 13, 0.92);
     // backdrop-filter: blur(12px);
   }
 }
@@ -20,7 +19,7 @@
   display: flex;
   align-items: center;
   justify-content: space-between;
-  padding: 80px clamp(24px, 5.2vw, 100px);
+  padding: 80px clamp(24px, 5.2vw, 100px) 10px;
 }
 
 .gnb__logo {
@@ -54,16 +53,16 @@
   font-size: clamp(13px, 0.85vw, 16px);
   font-weight: 400;
   letter-spacing: 0.05em;
-  color: $color-white;
+  color: #ffffff;
   transition: color 0.2s;
 
   &:hover {
-    color: $color-blue;
+    color: #7796ff;
   }
 }
 
 .gnb__navLink.isActive {
-  color: $color-blue;
+  color: #7796ff;
 }
 
 .gnb__hamburger {
@@ -83,7 +82,7 @@
   display: block;
   width: 100%;
   height: 1px;
-  background: $color-white;
+  background: #ffffff;
   transition:
     transform 0.3s,
     opacity 0.3s;
@@ -104,7 +103,7 @@
   position: fixed;
   inset: 0;
   z-index: 200;
-  background: $color-bg;
+  background: #0d0d0d;
   padding: 32px 32px 40px;
   opacity: 0;
   pointer-events: none;
@@ -134,7 +133,7 @@
   left: 0;
   width: 100%;
   height: 1px;
-  background: $color-white;
+  background: #ffffff;
 
   &:nth-child(1) {
     transform: rotate(45deg);
@@ -157,9 +156,9 @@
   font-size: clamp(28px, 8vw, 36px);
   font-weight: 400;
   letter-spacing: 0.02em;
-  color: $color-white;
+  color: #ffffff;
 }
 
 .gnb__mobileNavLink.isActive {
-  color: $color-blue;
+  color: #7796ff;
 }
diff --git a/src/scss/page/_intro.scss b/src/scss/page/_intro.scss
index fee4cce..75baf0d 100644
--- a/src/scss/page/_intro.scss
+++ b/src/scss/page/_intro.scss
@@ -1,4 +1,3 @@
-@use "../base/variable" as *;
 @use "../base/mixin" as *;
 
 // Intro
@@ -8,7 +7,7 @@
   align-items: center;
   justify-content: center;
   overflow: hidden;
-  background: $color-bg;
+  background: #0d0d0d;
 }
 
 .intro__bg {
@@ -29,9 +28,9 @@
   font-size: clamp(18px, 2.6vw, 50px);
   font-weight: 100;
   letter-spacing: 0.02em;
-  color: $color-white;
+  color: #ffffff;
   margin-bottom: clamp(16px, 2vw, 32px);
-  line-height: 1.2;
+  line-height: 0.8;
 }
 
 .intro__title {
@@ -39,14 +38,14 @@
   font-weight: 700;
   letter-spacing: 0.01em;
   text-transform: uppercase;
-  color: $color-white;
-  line-height: 1.2;
+  color: #ffffff;
+  line-height: 0.8;
 }
 
 @include mo {
   .gnb__inner {
     padding: 0 20px;
-    height: $gnb-height-mo;
+    height: 60px;
   }
 
   .gnb__logoImg {
diff --git a/src/scss/page/_project.scss b/src/scss/page/_project.scss
index 3a40a7e..be0005d 100644
--- a/src/scss/page/_project.scss
+++ b/src/scss/page/_project.scss
@@ -1,8 +1,7 @@
-@use "../base/variable" as *;
 @use "../base/mixin" as *;
 
 .project {
-  background: $color-bg;
+  background: #0d0d0d;
   padding: 100px 48px;
 }
 
@@ -59,14 +58,14 @@
 .project__name {
   font-size: clamp(14px, 1.1vw, 16px);
   font-weight: 500;
-  color: $color-white;
+  color: #ffffff;
   line-height: 1.4;
 }
 
 .project__company {
   font-size: 13px;
   font-weight: 300;
-  color: rgba($color-white, 0.5);
+  color: rgba(255, 255, 255, 0.5);
 }
 
 .project__stack {
@@ -79,10 +78,10 @@
 .project__tag {
   display: inline-block;
   padding: 3px 10px;
-  border: 1px solid rgba($color-white, 0.2);
+  border: 1px solid rgba(255, 255, 255, 0.2);
   font-size: 11px;
   font-weight: 300;
-  color: rgba($color-white, 0.55);
+  color: rgba(255, 255, 255, 0.55);
   letter-spacing: 0.03em;
 }
 
@@ -98,21 +97,21 @@
   justify-content: center;
   gap: 6px;
   padding: 14px 40px;
-  border: 1px solid rgba($color-white, 0.4);
+  border: 1px solid rgba(255, 255, 255, 0.4);
   border-radius: 100px;
   font-size: 14px;
   font-weight: 400;
   letter-spacing: 0.1em;
-  color: $color-white;
+  color: #ffffff;
   transition:
     background 0.3s,
     border-color 0.3s,
     color 0.3s;
 
   &:hover {
-    background: $color-white;
-    color: $color-dark;
-    border-color: $color-white;
+    background: #ffffff;
+    color: #0d0d0d;
+    border-color: #ffffff;
   }
 }
 
diff --git a/src/scss/page/_vision.scss b/src/scss/page/_vision.scss
index 2a4d167..5f6134b 100644
--- a/src/scss/page/_vision.scss
+++ b/src/scss/page/_vision.scss
@@ -1,9 +1,8 @@
-@use "../base/variable" as *;
 @use "../base/mixin" as *;
 
 // Vision
 .vision {
-  background: $color-bg;
+  background: #0d0d0d;
   padding: clamp(80px, 6.25vw, 120px) clamp(24px, 6.25vw, 120px);
 }
 
@@ -28,7 +27,7 @@
   font-size: clamp(13px, 1.1vw, 16px);
   font-weight: 300;
   line-height: 1.8;
-  color: $color-white;
+  color: #ffffff;
   opacity: 0.9;
 }
 
@@ -43,14 +42,14 @@
     font-size: clamp(40px, 4.2vw, 80px);
     font-weight: 700;
     line-height: 1;
-    color: $color-white;
+    color: #ffffff;
   }
 
   .text {
     font-size: clamp(18px, 1.9vw, 32px);
     font-weight: 300;
     line-height: 1.4;
-    color: $color-white;
+    color: #ffffff;
   }
 }
 
@@ -71,14 +70,14 @@
     font-size: clamp(28px, 3.1vw, 60px);
     font-weight: 800;
     letter-spacing: 0.01em;
-    color: $color-white;
+    color: #ffffff;
     line-height: 1;
   }
 
   .desc {
     font-size: clamp(12px, 0.8vw, 14px);
     font-weight: 300;
-    color: rgba($color-white, 0.75);
+    color: rgba(255, 255, 255, 0.75);
   }
 }