[음성 검색] 스타일 수정

- 음성 검색 스타일 수정 버튼 / 리스닝 부분 스타일 수정

com.twin.app.shoptime/src/views/SearchPanel/VoiceInputOverlay/VoiceInputOverlay.module.less

@@ -97,11 +97,9 @@
 
   box-shadow: inset 0 0 0 1px white;
 
+  
   &:focus {
     outline: none !important; // keep wrapper focus highlight rounded
-  }
-
-  &:focus-within {
     border: 5px solid @PRIMARY_COLOR_RED;
     box-shadow: 0 0 22px 0 rgba(0, 0, 0, 0.5);
   }
@@ -199,12 +197,12 @@
     background: white;
     overflow: hidden;
     border-radius: 1000px;
-    border: 5px solid #ccc;
+    border: 6px solid #ccc;
     display: flex;
     justify-content: center;
     align-items: center;
     transition: all 0.3s ease;
-
+    box-sizing: border-box;
     .microphoneIcon {
       height: 50px;
       box-sizing: border-box;
@@ -226,7 +224,7 @@
   // active 상태 (음성 입력 모드 - 항상 빨간색)
   &.active {
     .microphoneCircle {
-      background-color: @PRIMARY_COLOR_RED;
+      background-color: rgba(229, 9, 20, 0.2);
       border-color: @PRIMARY_COLOR_RED;
       box-shadow: 0 0 22px 0 rgba(229, 9, 20, 0.5);
 
@@ -238,8 +236,8 @@
 
   &.active.focused {
     .microphoneCircle {
-      background-color: @PRIMARY_COLOR_RED;
-      border-color: white;
+      background-color: rgba(229, 9, 20, 0.2);
+      border-color: @PRIMARY_COLOR_RED;
       box-shadow: 0 0 22px 0 rgba(0, 0, 0, 0.5);
     }
   }
@@ -247,7 +245,7 @@
   // listening 상태 (배경 투명, 테두리 ripple 애니메이션)
   &.listening {
     .microphoneCircle {
-      background-color: transparent;
+      background-color: rgba(229, 9, 20, 0.2);
       border-color: transparent; // 테두리 투명
       box-shadow: none;
 

com.twin.app.shoptime/src/views/SearchPanel/VoiceInputOverlay/modes/VoiceListening.module.less

@@ -82,7 +82,7 @@
 .bar2 {
   width: 510px;
   left: 0;
-  background: #ffb3b3;
+  background: rgba(204, 0, 0, 0.2);
   animation: waveAppear 1.6s ease-in-out infinite;
   animation-delay: 1.4s; // 가장 큰 막대 - 마지막
   opacity: 0; // 애니메이션으로 제어
@@ -91,7 +91,7 @@
 .bar3 {
   width: 480px;
   left: 15px;
-  background: #ff8080;
+  background: rgba(204, 0, 0, 0.3);
   animation: waveAppear 1.6s ease-in-out infinite;
   animation-delay: 1.2s;
   opacity: 0;
@@ -100,7 +100,7 @@
 .bar4 {
   width: 390px;
   left: 60px;
-  background: #ff6666;
+  background: rgba(204, 0, 0, 0.4);
   animation: waveAppear 1.6s ease-in-out infinite;
   animation-delay: 1s;
   opacity: 0;
@@ -109,7 +109,7 @@
 .bar5 {
   width: 350px;
   left: 80px;
-  background: #ff4d4d;
+  background: rgba(204, 0, 0, 0.5);
   animation: waveAppear 1.6s ease-in-out infinite;
   animation-delay: 0.8s;
   opacity: 0;
@@ -118,7 +118,7 @@
 .bar6 {
   width: 320px;
   left: 95px;
-  background: #ff3333;
+  background: rgba(204, 0, 0, 0.6);
   animation: waveAppear 1.6s ease-in-out infinite;
   animation-delay: 0.6s;
   opacity: 0;
@@ -127,7 +127,7 @@
 .bar7 {
   width: 260px;
   left: 125px;
-  background: #ff1a1a;
+  background: rgba(204, 0, 0, 0.7);
   animation: waveAppear 1.6s ease-in-out infinite;
   animation-delay: 0.4s;
   opacity: 0;
@@ -136,7 +136,7 @@
 .bar8 {
   width: 200px;
   left: 155px;
-  background: #ff0000;
+  background: rgba(204, 0, 0, 0.8);
   animation: waveAppear 1.6s ease-in-out infinite;
   animation-delay: 0.2s;
   opacity: 0;
@@ -145,7 +145,7 @@
 .bar9 {
   width: 150px;
   left: 180px;
-  background: #e00000;
+  background: rgba(204, 0, 0, 0.9);
   animation: waveAppear 1.6s ease-in-out infinite;
   animation-delay: 0.1s;
   opacity: 0;
@@ -154,7 +154,7 @@
 .bar10 {
   width: 100px;
   left: 205px;
-  background: #cc0000;
+  background: rgba(204, 0, 0, 1);
   animation: waveAppear 1.6s ease-in-out infinite;
   animation-delay: 0s; // 가장 작은 막대 - 처음 시작
   opacity: 0;