From 32911f244a2a0afbdb6e8d507da0abf42998d860 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EC=BB=A8=ED=8A=B8=EB=A1=A4DELTA?= <controld3785@gmail.com>
Date: Wed, 1 Apr 2026 12:06:54 +0900
Subject: [PATCH] Improve UI Focus Consistency

---
 src/app/components/dropdown/dropdown.scss     | 11 ++---------
 src/app/components/switch/switch.scss         |  8 +-------
 src/app/features/header-menu/header-menu.scss |  7 ++++---
 src/styles.scss                               |  8 ++++++++
 src/styles/_library.scss                      | 15 +++++++++++++++
 5 files changed, 30 insertions(+), 19 deletions(-)

diff --git a/src/app/components/dropdown/dropdown.scss b/src/app/components/dropdown/dropdown.scss
index 25999cd..55e3242 100644
--- a/src/app/components/dropdown/dropdown.scss
+++ b/src/app/components/dropdown/dropdown.scss
@@ -5,8 +5,6 @@
 $dropdown_bg: oklch(1 0 0); // #FFFFFF
 $dropdown_border_color: oklch(0 0 0 / 20%);
 $dropdown_hover: oklch(0.9702 0 0); // #F5F5F5
-$dropdown_selected: oklch(0.9738 0.0151 54.93); // #FFF4ED
-$dropdown_accent: oklch(0.7086 0.1896 39.86); // #FF6E37
 
 $dropdown_height: 40px;
 $dropdown_border_radius: 8px;
@@ -23,7 +21,6 @@ $dropdown_animation_duration: 0.2s;
   background-color: $dropdown_bg;
   border-radius: $dropdown_border_radius;
   box-shadow: 0 0 0 1px $dropdown_border_color inset;
-  outline: none;
   cursor: pointer;
 
   max-width: 100%;
@@ -32,10 +29,6 @@ $dropdown_animation_duration: 0.2s;
   &.reduce-motion {
     --dropdown-duration: 0s;
   }
-
-  &:focus-visible {
-    box-shadow: 0 0 0 1px $dropdown_border_color inset, 0 0 0 2px white, 0 0 0 4px $dropdown_accent;
-  }
 }
 
 .dropdown-box {
@@ -122,8 +115,8 @@ $dropdown_animation_duration: 0.2s;
   }
 
   &.selected {
-    background-color: $dropdown_selected;
-    color: $dropdown_accent;
+    background-color: list.nth(library.$brand_palette, 1);
+    color: list.nth(library.$brand_palette, 5);
     font-weight: 600;
   }
 }
diff --git a/src/app/components/switch/switch.scss b/src/app/components/switch/switch.scss
index 0c6a4b7..404ca94 100644
--- a/src/app/components/switch/switch.scss
+++ b/src/app/components/switch/switch.scss
@@ -2,7 +2,6 @@
 @use "sass:list";
 @use "styles/library" as library;
 
-$switch_on_bg: oklch(0.7086 0.1896 39.86); // #FF6E37
 $switch_off_bg: oklch(0.683 0 0); // #999999
 
 $switch_dimension: (57px, 30px);
@@ -23,7 +22,6 @@ $switch_animation_duration: 0.2s;
   position: relative;
   overflow: hidden;
   box-shadow: 0 0 0 1px $switch_border_color inset;
-  outline: none;
 
   --switch-duration: #{$switch_animation_duration};
   transition: background-color var(--switch-duration) $switch_animation_timing;
@@ -38,12 +36,8 @@ $switch_animation_duration: 0.2s;
     }
   }
 
-  &:focus-visible {
-    box-shadow: 0 0 0 1px $switch_border_color inset, 0 0 0 2px white, 0 0 0 4px $switch_on_bg;
-  }
-
   &.active {
-    background-color: $switch_on_bg;
+    background-color: list.nth(library.$brand_palette, 5);
 
     .switch-knob {
       transform: translate(
diff --git a/src/app/features/header-menu/header-menu.scss b/src/app/features/header-menu/header-menu.scss
index b2ce103..a752ba5 100644
--- a/src/app/features/header-menu/header-menu.scss
+++ b/src/app/features/header-menu/header-menu.scss
@@ -25,7 +25,7 @@
     gap: 48px;
 
     .menu-item, a:not(.settings) {
-      all: unset; /* 기본 스타일 제거 */
+      text-decoration: none;
       font-size: 18px;
       height: 40px;
       align-content: center;
@@ -73,6 +73,7 @@
       justify-content: start;
       gap: 0;
       cursor: pointer;
+      margin-left: 10px;
 
       &:hover {
         opacity: 0.7;
@@ -81,7 +82,7 @@
       img {
         display: inline-block;
         height: 20px;
-        padding: 10px;
+        padding: 10px 10px 10px 0;
       }
 
       strong {
@@ -102,7 +103,7 @@
 
     .settings {
       border: none;
-      outline: none;
+      border-radius: 100%;
       background-color: inherit;
       padding: 0;
 
diff --git a/src/styles.scss b/src/styles.scss
index 635fdcc..d250271 100644
--- a/src/styles.scss
+++ b/src/styles.scss
@@ -1,3 +1,6 @@
+@use "sass:list";
+@use "styles/library" as library;
+
 @import url('https://cdn.jsdelivr.net/npm/nanumsquareneo@0.0.5/nanumsquareneo.css');
 @import url('https://cdn.jsdelivr.net/gh/wanteddev/wanted-sans@v1.0.1/packages/wanted-sans/fonts/webfonts/variable/split/WantedSansVariable.min.css');
 @import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard-jp-dynamic-subset.min.css");
@@ -76,3 +79,8 @@ section.feature-block {
   max-width: 600px;
   margin: 0 auto;
 }
+
+*:focus-visible {
+  outline: 2px solid list.nth(library.$brand_palette, 5);
+  outline-offset: 2px;
+}
diff --git a/src/styles/_library.scss b/src/styles/_library.scss
index ccb8914..06e4420 100644
--- a/src/styles/_library.scss
+++ b/src/styles/_library.scss
@@ -1 +1,16 @@
 @forward 'functions';
+
+$brand_palette: [
+  oklch(0.9738 0.0151 54.93), // #FFF4ED
+  oklch(0.9386 0.0366 55.36), // #FFE5D4
+  oklch(0.8738 0.0761 51.59), // #FFC8A8
+  oklch(0.7938 0.1292 47.77), // #FFA170
+  oklch(0.7086 0.1896 39.86), // #FF6E37
+  oklch(0.6662 0.2237 35.33), // #FF4B14
+  oklch(0.6159 0.2311 31.93), // #F02D06
+  oklch(0.5313 0.2041 30.75), // #C71D07
+  oklch(0.4509 0.1688 29.86), // #9E190E
+  oklch(0.3897 0.1391 29.75), // #7F180F
+  oklch(0.2547 0.0913 29.02), // #450805
+];
+