From 6675b5301ff4d4691368153d37e915e3f2b86033 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EA=B9=80=EC=84=B1=EA=B2=BD?= <skkim@o2o.kr>
Date: Tue, 21 Apr 2026 15:24:26 +0900
Subject: [PATCH] =?UTF-8?q?=ED=8A=9C=ED=86=A0=EB=A6=AC=EC=96=BC=20?=
 =?UTF-8?q?=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 index.css                                   |  2 +-
 src/components/Tutorial/TutorialOverlay.tsx | 10 +++++++++-
 2 files changed, 10 insertions(+), 2 deletions(-)

diff --git a/index.css b/index.css
index c3d9b51..6916a1d 100644
--- a/index.css
+++ b/index.css
@@ -7304,7 +7304,7 @@
   top: 16px;
   left: 50%;
   transform: translateX(-50%);
-  z-index: 100;
+  z-index: 10100;
   background: rgba(0, 34, 36, 0.3);
   border: 1px solid rgba(229, 241, 242, 0.2);
   border-radius: 999px;
diff --git a/src/components/Tutorial/TutorialOverlay.tsx b/src/components/Tutorial/TutorialOverlay.tsx
index ba41803..7c4770c 100644
--- a/src/components/Tutorial/TutorialOverlay.tsx
+++ b/src/components/Tutorial/TutorialOverlay.tsx
@@ -7,6 +7,7 @@ interface Rect {
   left: number;
   width: number;
   height: number;
+  bottom: number;
 }
 
 interface TooltipPos {
@@ -29,7 +30,7 @@ function getTargetRect(selector: string): Rect | null {
   const el = document.querySelector(selector);
   if (!el) return null;
   const r = el.getBoundingClientRect();
-  return { top: r.top, left: r.left, width: r.width, height: r.height };
+  return { top: r.top, left: r.left, width: r.width, height: r.height, bottom: r.bottom };
 }
 
 function getSpotlightRect(
@@ -48,6 +49,7 @@ function getSpotlightRect(
 
   return {
     top,
+    bottom,
     left,
     width: Math.max(0, right - left),
     height: Math.max(0, bottom - top),
@@ -175,6 +177,12 @@ const TutorialOverlay: React.FC<TutorialOverlayProps> = ({
 
   if (!hint) return null;
 
+  const isTargetVisible = targetRect
+    ? targetRect.top + 60 < window.innerHeight && targetRect.bottom > 60
+    : true;
+
+  if (!isTargetVisible) return null;
+
   const spotlightPadding = hint.spotlightPadding ?? PADDING;
   const spotlightRect = (targetRect && !hint.noSpotlight) ? getSpotlightRect(targetRect, spotlightPadding, hint.spotlightPaddingOverride) : null;