From 34145a3a62ded25555d78653bb41276a2b078fda Mon Sep 17 00:00:00 2001
From: clkim <clkim@smilegate.com>
Date: Mon, 24 Nov 2025 13:41:40 +0900
Subject: [PATCH] =?UTF-8?q?fix.=20[=EB=94=94=EC=9E=90=EC=9D=B8=20QA]=20?=
 =?UTF-8?q?=EB=84=A4=EB=B9=84=EA=B2=8C=EC=9D=B4=EC=85=98=20=EC=9D=B8?=
 =?UTF-8?q?=EB=94=94=EC=BC=80=EC=9D=B4=ED=84=B0=EA=B0=80=20=EB=B9=84?=
 =?UTF-8?q?=ED=99=9C=EC=84=B1=20=EC=83=81=ED=83=9C=EC=9D=BC=20=EA=B2=BD?=
 =?UTF-8?q?=EC=9A=B0=20=EB=B0=B0=EA=B2=BD=EC=9D=84=20=EC=A0=9C=EC=99=B8?=
 =?UTF-8?q?=ED=95=9C=20=EC=9D=B4=EB=AF=B8=EC=A7=80=EC=97=90=20opacity:=200?=
 =?UTF-8?q?.5=20=EC=A0=81=EC=9A=A9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 layers/components/blocks/slide/Thumbnail.vue |  9 ++++++++-
 layers/templates/GrGallery01/index.vue       | 15 ++-------------
 2 files changed, 10 insertions(+), 14 deletions(-)

diff --git a/layers/components/blocks/slide/Thumbnail.vue b/layers/components/blocks/slide/Thumbnail.vue
index 61bb934..e4de38b 100644
--- a/layers/components/blocks/slide/Thumbnail.vue
+++ b/layers/components/blocks/slide/Thumbnail.vue
@@ -199,6 +199,13 @@ onBeforeUnmount(() => {
 .thumbnail-slide.is-active::after {
   @apply border-[var(--pagination-active)];
 }
+.thumbnail-slide:hover img,
+.thumbnail-slide.is-active img {
+  @apply opacity-100;
+}
+.thumbnail-slide img {
+  @apply opacity-50 transition-opacity duration-200 ease-in-out;
+}
 
 /* 기본 버전 스타일 */
 .thumbnail-carousel.thumbnail-default,
@@ -216,7 +223,7 @@ onBeforeUnmount(() => {
   @apply right-0;
 }
 .thumbnail-carousel.thumbnail-default .thumbnail-slide {
-  @apply aspect-[1/1] w-[8px] md:w-[80px] backdrop-blur-[30px]
+  @apply aspect-[1/1] w-[8px] md:w-[80px] backdrop-blur-[15px]
   after:hidden md:after:block;
 }
 .thumbnail-carousel.thumbnail-default .thumbnail-slide:hover img,
diff --git a/layers/templates/GrGallery01/index.vue b/layers/templates/GrGallery01/index.vue
index 36bf047..e1abcb6 100644
--- a/layers/templates/GrGallery01/index.vue
+++ b/layers/templates/GrGallery01/index.vue
@@ -175,22 +175,11 @@ const onArrowClick = (direction, targetIndex) => {
 .thumbnail-carousel:deep(.main-splide) {
   @apply overflow-hidden rounded-lg border border-white/10 shadow-[0_4px_20px_0_rgba(0,0,0,0.5)];
 }
-.thumbnail-carousel:deep(.thumbnail-slide) {
-  @apply opacity-50;
-}
-.thumbnail-carousel:deep(.thumbnail-slide:hover),
-.thumbnail-carousel:deep(.thumbnail-slide.is-active) {
-  @apply opacity-100;
-}
-.thumbnail-carousel:deep(.thumbnail-splide .splide__track) {
-  @apply md:max-w-[720px];
-}
-
 .main-slide {
   @apply relative aspect-[16/9];
 }
-.slide-image {
-  @apply transition-opacity duration-500 ease-in-out;
+.thumbnail-carousel:deep(.thumbnail-splide .splide__track) {
+  @apply md:max-w-[720px];
 }
 .btn-play {
   @apply absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2;