From 192c8a8c8cfe105b43badb6070e037e7f5164d91 Mon Sep 17 00:00:00 2001
From: gahusb <bgg8988@gmail.com>
Date: Sun, 24 May 2026 14:56:35 +0900
Subject: [PATCH] =?UTF-8?q?fix(tarot):=20=EB=9E=9C=EB=94=A9=20=EC=98=81?=
 =?UTF-8?q?=EC=83=81=20element=20=EB=B3=B5=EC=9B=90=20+=20scroll-cue=20?=
 =?UTF-8?q?=EC=A0=9C=EA=B1=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- codex UI 재구성 시 <video> element 자체와 .tarot__hero-video CSS가
  누락되어 영상 재생 불가 (poster img만 정적 표시).
- <video> 복원 (autoplay, loop, muted, playsInline) + poster fallback.
- CSS z-index 0으로 poster 위, overlay(1) 아래에 stack.
- prefers-reduced-motion @media display:none 동작 복원.
- 사용자 요청에 따라 tarot__scroll-cue 제거.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 src/pages/tarot/Tarot.css | 14 ++++++++++++++
 src/pages/tarot/Tarot.jsx | 15 +++++++++++----
 2 files changed, 25 insertions(+), 4 deletions(-)

diff --git a/src/pages/tarot/Tarot.css b/src/pages/tarot/Tarot.css
index 7c90115..9d8f9dd 100644
--- a/src/pages/tarot/Tarot.css
+++ b/src/pages/tarot/Tarot.css
@@ -40,6 +40,20 @@
   z-index: 0;
 }
 
+.tarot__hero-video {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  z-index: 0;
+  pointer-events: none;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .tarot__hero-video { display: none; }
+}
+
 .tarot__hero-overlay {
   position: absolute;
   inset: 0;
diff --git a/src/pages/tarot/Tarot.jsx b/src/pages/tarot/Tarot.jsx
index 3384bb3..40f2dfb 100644
--- a/src/pages/tarot/Tarot.jsx
+++ b/src/pages/tarot/Tarot.jsx
@@ -6,6 +6,17 @@ export default function Tarot() {
   return (
     <div className="tarot tarot--landing">
       <img className="tarot__hero-poster" src="/images/tarot_background.png" alt="" aria-hidden />
+      <video
+        className="tarot__hero-video"
+        src="/videos/tarot_hero.mp4"
+        autoPlay
+        loop
+        muted
+        playsInline
+        preload="metadata"
+        poster="/images/tarot_background.png"
+        aria-hidden
+      />
       <div className="tarot__hero-overlay" />
       <div className="tarot__corner tarot__corner--left" aria-hidden />
       <div className="tarot__corner tarot__corner--right" aria-hidden />
@@ -64,10 +75,6 @@ export default function Tarot() {
           </article>
         </div>
 
-        <div className="tarot__scroll-cue" aria-hidden>
-          <span>SCROLL TO DISCOVER</span>
-          <b>⌄</b>
-        </div>
       </div>
     </div>
   );