[howaboutthese] 스타일수정

-  노출관련 스타일 수정

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

@@ -1,5 +1,5 @@
-@import "../../../style/CommonStyle.module.less";
-@import "../../../style/utils.module.less";
+@import '../../../style/CommonStyle.module.less';
+@import '../../../style/utils.module.less';
 .bgcontainer {
   width: 100%;
   height: calc(100vh - 210px);
@@ -10,11 +10,14 @@
     rgba(221.25, 221.25, 221.25, 0.9) 80%,
     rgba(221, 221, 221, 0.9) 100%
   );
+  position: absolute;
+  left: 0;
+  top: 0;
 }
 .container {
   width: 100%;
   height: 128px;
-  padding: 32px 60px;
+  padding: 32px 60px 0;
   background: #dddddd;
   display: inline-flex;
   justify-content: flex-start;
@@ -71,7 +74,7 @@
 .title {
   color: #272727;
   font-size: 24px;
-  font-family: "Roboto", sans-serif;
+  font-family: 'Roboto', sans-serif;
   font-weight: 700;
   white-space: nowrap; // ⭐ 1줄로 표시
   line-height: 1; // 텍스트 높이 조정
@@ -111,7 +114,7 @@
 .seeMoreText {
   color: white;
   font-size: 24px;
-  font-family: "LG Smart UI", sans-serif;
+  font-family: 'LG Smart UI', sans-serif;
   font-weight: 700;
   line-height: 24px;
   text-align: center;
@@ -121,7 +124,7 @@
 /* Bubbles Section */
 .bubblesContainer {
   width: 100%;
-  padding: 0 60px;
+  padding: 32px 60px;
 }
 
 .bubblesContainer > * + * {
@@ -136,7 +139,6 @@
   background: @COLOR_WHITE;
   border-radius: 30px;
   box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
-  border: 2px solid @COLOR_WHITE;
   text-align: left;
   line-height: 64px;
   cursor: pointer;
@@ -147,7 +149,7 @@
   &:hover {
     box-shadow: 0 0 22px rgba(0, 0, 0, 0.5);
     background: #ce1c5e;
-    border: 2px solid @PRIMARY_COLOR_RED;
+
     .bubbleText {
       color: #fff;
     }
@@ -155,7 +157,7 @@
   .bubbleText {
     color: black;
     font-size: 24px;
-    font-family: "LG Smart UI", sans-serif;
+    font-family: 'LG Smart UI', sans-serif;
     font-weight: 700;
     line-height: 24px;
     text-align: center;
@@ -175,7 +177,6 @@
   background: @COLOR_WHITE;
   border-radius: 30px;
   box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
-  border: 2px solid @COLOR_WHITE;
   text-align: left;
   line-height: 64px;
   cursor: pointer;
@@ -185,7 +186,7 @@
   &:hover {
     box-shadow: 0 0 22px rgba(0, 0, 0, 0.5);
     background: #ce1c5e;
-    border: 2px solid @PRIMARY_COLOR_RED;
+
     .bubbleText {
       color: #fff;
     }
@@ -193,7 +194,7 @@
   .bubbleText {
     color: black;
     font-size: 24px;
-    font-family: "LG Smart UI", sans-serif;
+    font-family: 'LG Smart UI', sans-serif;
     font-weight: 700;
     line-height: 24px;
     text-align: center;
@@ -208,7 +209,7 @@
 .bubbleText {
   color: black;
   font-size: 24px;
-  font-family: "LG Smart UI", sans-serif;
+  font-family: 'LG Smart UI', sans-serif;
   font-weight: 700;
   line-height: 24px;
   text-align: center;

com.twin.app.shoptime/src/views/SearchPanel/HowAboutThese/HowAboutThese.response.module.less

@@ -1,5 +1,5 @@
-@import "../../../style/CommonStyle.module.less";
-@import "../../../style/utils.module.less";
+@import '../../../style/CommonStyle.module.less';
+@import '../../../style/utils.module.less';
 
 .bgcontainer {
   width: 100%;
@@ -78,7 +78,7 @@
 .title {
   color: #272727;
   font-size: 24px;
-  font-family: "Roboto", sans-serif;
+  font-family: 'Roboto', sans-serif;
   font-weight: 700;
   white-space: nowrap;
   line-height: 1;
@@ -86,14 +86,22 @@
 
 /* Response Content Section - Loading Message with Typing Animation */
 .responseContent {
-  flex: 1;
   width: 100%;
+  height: calc(100vh - 210px);
   display: flex;
-  flex-direction: column;
   justify-content: center;
   align-items: center;
-  padding: 0 60px;
-  position: relative;
+  position: absolute;
+  left: 0;
+  top: 0;
+  z-index: 600;
+  background: linear-gradient(
+    360deg,
+    rgba(221, 221, 221, 0.15) 2%,
+    rgba(221, 221, 221, 0.85) 58%,
+    rgba(221, 221, 221, 0.92) 80%,
+    rgba(221, 221, 221, 0.95) 100%
+  );
 }
 
 /* 로딩 메시지 컨테이너 */
@@ -115,7 +123,7 @@
 .typingText {
   color: #1a1a1a;
   font-size: 46px;
-  font-family: "LG Smart UI";
+  font-family: 'LG Smart UI';
   font-weight: 400;
   line-height: 40px;
   text-align: center;
@@ -125,16 +133,18 @@
 .cursor {
   color: #1a1a1a;
   font-size: 34px;
-  font-family: "LG Smart UI";
+  font-family: 'LG Smart UI';
   font-weight: 400;
   animation: blink 1s infinite;
 }
 
 @keyframes blink {
-  0%, 49% {
+  0%,
+  49% {
     opacity: 1;
   }
-  50%, 100% {
+  50%,
+  100% {
     opacity: 0;
   }
 }

com.twin.app.shoptime/src/views/SearchPanel/SearchResults.new.v2.module.less

@@ -380,7 +380,7 @@
   // HowAboutThese Full 버전 오버레이
   .howAboutTheseOverlay {
     position: fixed;
-    inset: 0;
+    top: 210px;
     width: 100%;
     height: 100vh;
     z-index: 200;