From 4e356289a305cc3ab48533e499d417b2deba12dd Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EC=BB=A8=ED=8A=B8=EB=A1=A4DELTA?= <controld3785@gmail.com>
Date: Fri, 3 Apr 2026 11:20:44 +0900
Subject: [PATCH] Fix Animation Consistency & UX

---
 src/app/components/dropdown/dropdown.scss | 15 ++++++++++++---
 src/app/components/popup/popup.scss       | 10 ++++++++--
 src/app/components/switch/switch.scss     |  4 ----
 3 files changed, 20 insertions(+), 9 deletions(-)

diff --git a/src/app/components/dropdown/dropdown.scss b/src/app/components/dropdown/dropdown.scss
index 6693107..0a5c92f 100644
--- a/src/app/components/dropdown/dropdown.scss
+++ b/src/app/components/dropdown/dropdown.scss
@@ -56,7 +56,7 @@ $default_animation_duration: 0.2s;
   .chevron {
     width: 24px; height: 24px;
     flex-shrink: 0;
-    transition: transform var(--dropdown-duration) $animation_timing;
+    transition: transform var(--animation-duration) $animation_timing;
     user-select: none;
 
     &.open {
@@ -92,8 +92,16 @@ $default_animation_duration: 0.2s;
   }
 
   @keyframes slideIn {
-    from { opacity: 0; transform: translateY(-8px); }
-    to { opacity: 1; transform: translateY(0); }
+    from {
+      transform: translateY(-8px);
+      pointer-events: none;
+      opacity: 0;
+    }
+    to {
+      transform: translateY(0);
+      pointer-events: auto;
+      opacity: 1;
+    }
   }
 }
 
@@ -105,6 +113,7 @@ $default_animation_duration: 0.2s;
   position: relative;
   align-content: center;
   transition: background-color var(--animation-duration) $animation_timing;
+  font-size: 16px;
 
   &:hover, &.focused {
     background-color: $hover_bg;
diff --git a/src/app/components/popup/popup.scss b/src/app/components/popup/popup.scss
index ed04f29..11ca8f9 100644
--- a/src/app/components/popup/popup.scss
+++ b/src/app/components/popup/popup.scss
@@ -1,5 +1,9 @@
+$animation_timing: cubic-bezier(0.16, 1, 0.3, 1);
+$default_animation_duration: 0.2s;
+
 :host {
   display: block;
+  --animation-duration: calc(#{$default_animation_duration} * var(--motion-duration-multiplier));
 }
 
 .popup-backdrop {
@@ -24,7 +28,7 @@
   display: flex;
   flex-direction: column;
   overflow: visible;
-  animation: popup-enter 0.2s cubic-bezier(0.16, 1, 0.3, 1);
+  animation: popup-enter var(--animation-duration) $animation_timing;
 
   outline: oklch(0 0 0 / 20%) 2px solid;
   gap: 16px;
@@ -46,11 +50,13 @@
 
 @keyframes popup-enter {
   from {
-    transform: scale(0.95) translateY(10px);
+    transform: scale(0.95) translateY(8px);
+    pointer-events: none;
     opacity: 0;
   }
   to {
     transform: scale(1) translateY(0);
+    pointer-events: auto;
     opacity: 1;
   }
 }
diff --git a/src/app/components/switch/switch.scss b/src/app/components/switch/switch.scss
index 506adb3..d26c1fe 100644
--- a/src/app/components/switch/switch.scss
+++ b/src/app/components/switch/switch.scss
@@ -26,10 +26,6 @@ $default_animation_duration: 0.2s;
   --animation-duration: calc(#{$default_animation_duration} * var(--motion-duration-multiplier));
   transition: background-color var(--animation-duration) $animation_timing;
 
-  &.reduce-motion {
-    --animation-duration: 0s;
-  }
-
   &:hover, &:focus-within {
     .switch-knob {
       will-change: transform;