From 024e340e0cf561f9c29d51756fd2cddaf28743dd Mon Sep 17 00:00:00 2001
From: gahusb <bgg8988@gmail.com>
Date: Sun, 24 May 2026 01:02:28 +0900
Subject: [PATCH] =?UTF-8?q?fix(tarot):=20=ED=9E=88=EC=96=B4=EB=A1=9C=20?=
 =?UTF-8?q?=EC=98=81=EC=83=81=EC=9D=B4=20=EC=A0=95=EC=A0=81=20poster=20img?=
 =?UTF-8?q?=EC=97=90=20=EA=B0=80=EB=A0=A4=EC=A7=80=EB=8A=94=20z-index=20?=
 =?UTF-8?q?=EC=B6=A9=EB=8F=8C=20=ED=95=B4=EA=B2=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

video와 poster img가 같은 z-index:0 + position:absolute였고 DOM 순서상
poster가 늦게 와서 video를 영원히 덮음 → 영상 재생 중이지만 안 보임.

z-index 계층 명시: poster=0 (fallback) → video=1 → overlay=2 → content=3.
video display:none 처리되면 뒤의 poster img가 자동 노출되도록 stacking 정리.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 src/pages/tarot/Tarot.css | 22 +++++++++++-----------
 1 file changed, 11 insertions(+), 11 deletions(-)

diff --git a/src/pages/tarot/Tarot.css b/src/pages/tarot/Tarot.css
index 0d89cc2..d40dd57 100644
--- a/src/pages/tarot/Tarot.css
+++ b/src/pages/tarot/Tarot.css
@@ -22,15 +22,6 @@
   overflow: hidden;
 }
 
-.tarot__hero-video {
-  position: absolute;
-  inset: 0;
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-  z-index: 0;
-}
-
 .tarot__hero-poster {
   position: absolute;
   inset: 0;
@@ -40,16 +31,25 @@
   z-index: 0;
 }
 
+.tarot__hero-video {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  z-index: 1;
+}
+
 .tarot__hero-overlay {
   position: absolute;
   inset: 0;
   background: linear-gradient(180deg, rgba(15,4,40,.5), rgba(15,4,40,.85));
-  z-index: 1;
+  z-index: 2;
 }
 
 .tarot__hero-content {
   position: relative;
-  z-index: 2;
+  z-index: 3;
   padding: 60px 40px 80px;
   max-width: 1200px;
   margin: 0 auto;