Spaces:

dongil77
/

retro-game-master

Running

App Files Files Community

dongil77 commited on Apr 1, 2025

Commit

29175d1

verified ·

1 Parent(s): 9a56c11

Add 2 files

Browse files

Files changed (2) hide show

README.md +7 -5
index.html +1033 -18

README.md CHANGED Viewed

@@ -1,10 +1,12 @@
 ---
-title: Retro Game Master
-emoji: 🏢
-colorFrom: green
-colorTo: purple
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: retro-game-master
+emoji: 🐳
+colorFrom: blue
+colorTo: blue
 sdk: static
 pinned: false
+tags:
+  - deepsite
 ---
+Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

index.html CHANGED Viewed

@@ -1,19 +1,1034 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
 </html>

+<!DOCTYPE html>
+<html lang="ko">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>레게 마스터 클래스 | 레트로 게임 보존 기술</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
+    <link href="https://fonts.googleapis.com/css2?family=DotGothic16&family=Noto+Sans+KR:wght@300;400;500;700&display=swap" rel="stylesheet">
+    <style>
+        :root {
+            --neon-blue: #00f0ff;
+            --neon-pink: #ff00f5;
+            --deep-purple: #2a0057;
+            --neon-green: #00ff57;
+            --dark-bg: #0a0a12;
+        }
+        body {
+            font-family: 'Noto Sans KR', sans-serif;
+            background-color: var(--dark-bg);
+            color: white;
+            overflow-x: hidden;
+        }
+        .pixel-font {
+            font-family: 'DotGothic16', sans-serif;
+            letter-spacing: 1px;
+        }
+        .logo-text {
+            background: linear-gradient(45deg, var(--neon-pink), var(--neon-blue));
+            -webkit-background-clip: text;
+            background-clip: text;
+            color: transparent;
+            text-shadow: 0 0 15px rgba(255, 0, 245, 0.5);
+        }
+        .neon-border {
+            border: 2px solid var(--neon-blue);
+            box-shadow: 0 0 15px var(--neon-blue),
+                        inset 0 0 10px var(--neon-blue);
+        }
+        .glow-btn {
+            background: linear-gradient(45deg, var(--neon-pink), var(--neon-blue));
+            box-shadow: 0 0 15px var(--neon-pink);
+            transition: all 0.3s ease;
+            position: relative;
+            overflow: hidden;
+        }
+        .glow-btn:hover {
+            transform: translateY(-3px);
+            box-shadow: 0 0 25px var(--neon-pink);
+        }
+        .glow-btn::after {
+            content: '';
+            position: absolute;
+            top: -50%;
+            left: -50%;
+            width: 200%;
+            height: 200%;
+            background: linear-gradient(
+                to bottom right,
+                rgba(255,255,255,0.3) 0%,
+                rgba(255,255,255,0) 50%
+            );
+            transform: rotate(30deg);
+        }
+        .glow-btn:hover::after {
+            animation: shine 1.5s infinite;
+        }
+        @keyframes shine {
+            0% { transform: rotate(30deg) translate(-30%, -30%); }
+            100% { transform: rotate(30deg) translate(30%, 30%); }
+        }
+        .hero-section {
+            background: radial-gradient(
+                circle at 70% 30%,
+                var(--deep-purple) 0%,
+                var(--dark-bg) 60%
+            );
+        }
+        .pixel-corners {
+            clip-path: polygon(
+                0% 5px, 5px 5px, 5px 0%, calc(100% - 5px) 0%,
+                calc(100% - 5px) 5px, 100% 5px, 100% calc(100% - 5px),
+                calc(100% - 5px) calc(100% - 5px), calc(100% - 5px) 100%,
+                5px 100%, 5px calc(100% - 5px), 0% calc(100% - 5px)
+            );
+        }
+        .pixel-card {
+            background: rgba(20, 20, 30, 0.8);
+            backdrop-filter: blur(10px);
+            border: 1px solid rgba(0, 240, 255, 0.2);
+            transition: all 0.3s ease;
+        }
+        .pixel-card:hover {
+            transform: translateY(-5px);
+            border-color: var(--neon-blue);
+            box-shadow: 0 10px 30px rgba(0, 240, 255, 0.1);
+        }
+        .hover-glow:hover {
+            text-shadow: 0 0 10px var(--neon-blue);
+        }
+        .form-input {
+            background: rgba(10, 10, 20, 0.8);
+            border: 1px solid rgba(0, 240, 255, 0.3);
+            transition: all 0.3s ease;
+        }
+        .form-input:focus {
+            outline: none;
+            border-color: var(--neon-blue);
+            box-shadow: 0 0 10px var(--neon-blue);
+        }
+        /* 모바일 메뉴 */
+        .mobile-menu {
+            transform: translateX(100%);
+            transition: transform 0.3s ease;
+            background: rgba(10, 10, 20, 0.95);
+            backdrop-filter: blur(10px);
+        }
+        .mobile-menu.open {
+            transform: translateX(0);
+        }
+        /* 타이머 */
+        .timer-block {
+            background: rgba(255, 0, 245, 0.1);
+            border: 1px solid var(--neon-pink);
+        }
+        /* 데스크탑 사이드 CTA */
+        .side-cta {
+            right: -180px;
+            transition: right 0.3s ease;
+        }
+        .side-cta:hover {
+            right: -10px;
+        }
+        @media (max-width: 768px) {
+            .pixel-font {
+                font-size: 1.5rem;
+            }
+            .hero-heading {
+                font-size: 2.5rem;
+                line-height: 1.2;
+            }
+            .side-cta {
+                display: none;
+            }
+        }
+        /* Game Controller Logo */
+        .game-controller-logo {
+            display: inline-flex;
+            align-items: center;
+            justify-content: center;
+            width: 40px;
+            height: 40px;
+            border-radius: 50%;
+            background: linear-gradient(45deg, var(--neon-pink), var(--neon-blue));
+            margin-right: 10px;
+            position: relative;
+            overflow: hidden;
+        }
+        .game-controller-logo i {
+            color: #000;
+            font-size: 20px;
+            z-index: 2;
+        }
+        .game-controller-logo::after {
+            content: '';
+            position: absolute;
+            top: -50%;
+            left: -50%;
+            width: 200%;
+            height: 200%;
+            background: linear-gradient(
+                to bottom right,
+                rgba(255,255,255,0.3) 0%,
+                rgba(255,255,255,0) 50%
+            );
+            transform: rotate(30deg);
+        }
+    </style>
+</head>
+<body class="min-h-screen">
+    <!-- 상단 알림 배너 -->
+    <div class="bg-gradient-to-r from-purple-900 to-pink-800 text-white text-center py-2 px-4 flex items-center justify-center sticky top-0 z-50">
+        <span class="font-bold mr-2 animate-pulse">🎮 30명 한정!</span>
+        <span>지금 등록시 희귀 게임 에뮬레이션 가이드북 무료 증정</span>
+    </div>
+    <!-- 네비게이션 -->
+    <nav class="bg-black bg-opacity-80 backdrop-blur-md sticky top-8 z-40 border-b border-purple-900">
+        <div class="container mx-auto px-4 py-3 flex justify-between items-center">
+            <div class="flex items-center">
+                <div class="game-controller-logo">
+                    <i class="fas fa-gamepad"></i>
+                </div>
+                <div class="pixel-font logo-text text-3xl">레게</div>
+                <div class="ml-4 hidden md:flex space-x-8">
+                    <a href="#about" class="text-white hover:text-cyan-400 transition hover-glow">소개</a>
+                    <a href="#curriculum" class="text-white hover:text-cyan-400 transition hover-glow">커리큘럼</a>
+                    <a href="#instructor" class="text-white hover:text-cyan-400 transition hover-glow">강사진</a>
+                    <a href="#pricing" class="text-white hover:text-cyan-400 transition hover-glow">가격</a>
+                </div>
+            </div>
+            <div class="hidden md:block">
+                <button class="glow-btn text-black font-bold py-2 px-6 rounded-full">
+                    등록하기 <i class="fas fa-arrow-right ml-2"></i>
+                </button>
+            </div>
+            <button id="mobile-menu-button" class="md:hidden text-white focus:outline-none">
+                <i class="fas fa-bars text-2xl"></i>
+            </button>
+        </div>
+        <!-- 모바일 메뉴 -->
+        <div id="mobile-menu" class="mobile-menu fixed inset-y-0 right-0 w-64 p-6 z-50">
+            <div class="flex justify-between items-center mb-8">
+                <div class="game-controller-logo">
+                    <i class="fas fa-gamepad"></i>
+                </div>
+                <div class="pixel-font logo-text text-2xl">레게</div>
+                <button id="close-menu" class="text-white focus:outline-none">
+                    <i class="fas fa-times text-xl"></i>
+                </button>
+            </div>
+            <div class="flex flex-col space-y-6">
+                <a href="#about" class="text-white text-lg hover:text-cyan-400 transition">소개</a>
+                <a href="#curriculum" class="text-white text-lg hover:text-cyan-400 transition">커리큘럼</a>
+                <a href="#instructor" class="text-white text-lg hover:text-cyan-400 transition">강사진</a>
+                <a href="#pricing" class="text-white text-lg hover:text-cyan-400 transition"> 가격</a>
+                <button class="glow-btn text-black font-bold py-3 px-6 rounded-full mt-4">
+                    등록하기 <i class="fas fa-arrow-right ml-2"></i>
+                </button>
+            </div>
+        </div>
+    </nav>
+    <!-- 히어로 섹션 -->
+    <section class="hero-section min-h-screen flex items-center relative overflow-hidden">
+        <div class="absolute inset-0 opacity-20" style="background-image: url('https://grainy-gradients.vercel.app/noise.svg');"></div>
+        <!-- 배경 요소 -->
+        <div class="absolute -bottom-20 -left-40 w-80 h-80 bg-purple-900 rounded-full filter blur-3xl opacity-40"></div>
+        <div class="absolute -top-20 -right-40 w-80 h-80 bg-cyan-900 rounded-full filter blur-3xl opacity-40"></div>
+        <div class="container mx-auto px-4 z-10 py-20">
+            <div class="flex flex-col lg:flex-row items-center gap-12">
+                <div class="lg:w-1/2">
+                    <div class="inline-block mb-6 px-4 py-2 bg-black bg-opacity-50 rounded-full border border-cyan-400">
+                        <span class="text-cyan-400 text-sm font-bold">30명 한정 특별 혜택</span>
+                    </div>
+                    <h1 class="pixel-font text-4xl md:text-5xl font-bold mb-6 text-white hero-heading">
+                        <span class="logo-text">레트로 게임</span><br>
+                        <span class="text-cyan-400">디지털 보존의 모든 것</span>
+                    </h1>
+                    <p class="text-lg md:text-xl text-gray-300 mb-8 leading-relaxed">
+                        신회장과 함께 30년 된 게임들을 현대 기술로 보존하고,<br> 어디서나 즐길 수 있는
+                        실용적인 셋팅 기술을 단 6주 만에 마스터하세요.
+                    </p>
+                    <!-- 타이머 -->
+                    <div class="mb-8">
+                        <div class="text-gray-400 mb-2">얼리버드 할인 종료까지:</div>
+                        <div class="flex gap-2">
+                            <div class="timer-block px-4 py-2 rounded">
+                                <div id="hours" class="text-2xl font-bold text-pink-500">03</div>
+                                <div class="text-xs text-gray-400">시간</div>
+                            </div>
+                            <div class="timer-block px-4 py-2 rounded">
+                                <div id="minutes" class="text-2xl font-bold text-pink-500">00</div>
+                                <div class="text-xs text-gray-400">분</div>
+                            </div>
+                            <div class="timer-block px-4 py-2 rounded">
+                                <div id="seconds" class="text-2xl font-bold text-pink-500">00</div>
+                                <div class="text-xs text-gray-400">초</div>
+                            </div>
+                        </div>
+                    </div>
+                    <!-- 이메일 수집 폼 -->
+                    <div class="max-w-md">
+                        <form id="lead-form" class="mb-4">
+                            <div class="flex flex-col sm:flex-row gap-2">
+                                <input type="email" required placeholder="이메일 주소를 입력하세요"
+                                       class="form-input flex-grow px-4 py-3 rounded-full text-white">
+                                <button type="submit" class="glow-btn text-black font-bold px-6 py-3 rounded-full whitespace-nowrap">
+                                    무료 가이드 받기
+                                </button>
+                            </div>
+                        </form>
+                        <p class="text-xs text-gray-500">등록 시 무료 강의 샘플과 체크리스트를 보내드립니다.</p>
+                    </div>
+                </div>
+                <div class="lg:w-1/2 relative">
+                    <div class="pixel-card rounded-2xl overflow-hidden border border-cyan-400/30 shadow-xl shadow-cyan-400/10">
+                        <img src="https://images.unsplash.com/photo-1542751371-adc38448a05e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80"
+                             alt="레트로 게임 콘솔"
+                             class="w-full h-auto object-cover">
+                        <div class="absolute inset-0 flex items-center justify-center">
+                            <button class="w-16 h-16 bg-pink-500 rounded-full flex items-center justify-center shadow-lg hover:scale-110 transition">
+                                <i class="fas fa-play text-white text-xl"></i>
+                            </button>
+                        </div>
+                    </div>
+                    <!-- 픽셀 요소 -->
+                    <div class="absolute -top-5 -left-5 w-12 h-12 bg-cyan-400 pixel-corners z-10"></div>
+                    <div class="absolute -bottom-5 -right-5 w-16 h-16 bg-pink-500 pixel-corners z-10"></div>
+                </div>
+            </div>
+        </div>
+        <!-- 상단 이동 버튼 -->
+        <a href="#" class="fixed bottom-8 right-8 w-12 h-12 bg-black bg-opacity-70 border border-cyan-400 rounded-full flex items-center justify-center text-cyan-400 z-40 hover:bg-cyan-400 hover:text-black transition">
+            <i class="fas fa-arrow-up"></i>
+        </a>
+    </section>
+    <!-- 문제 해결 섹션 -->
+    <section id="about" class="py-20 bg-gradient-to-b from-black to-gray-900 relative">
+        <div class="absolute inset-0 opacity-10" style="background-image: url('https://grainy-gradients.vercel.app/noise.svg');"></div>
+        <div class="container mx-auto px-4 relative">
+            <div class="text-center mb-16">
+                <h2 class="pixel-font text-3xl md:text-4xl mb-6 text-cyan-400">
+                    레트로 게임 애호가라면<br>이런 문제를 겪어보셨죠?
+                </h2>
+                <p class="text-lg text-gray-400 max-w-2xl mx-auto">
+                    카트리지가 노후화되면서 소중한 추억이 사라질까 봐 걱정이신가요?
+                    저희가 모든 문제를 해결해드립니다.
+                </p>
+            </div>
+            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
+                <!-- 카드 1 -->
+                <div class="pixel-card p-6 rounded-xl">
+                    <div class="text-pink-500 text-3xl mb-4">
+                        <i class="fas fa-microchip"></i>
+                    </div>
+                    <h3 class="text-xl font-bold mb-4">기술적 복잡성</h3>
+                    <p class="text-gray-400 mb-4">
+                        낡은 하드웨어에서 데이터를 추출하는 과정이 너무 복잡하고 어렵습니다.
+                    </p>
+                    <div class="h-1 bg-gradient-to-r from-pink-500 to-transparent rounded-full mb-4"></div>
+                    <div class="text-sm text-cyan-400">"도저히 혼자 하기 힘들었어요"</div>
+                </div>
+                <!-- 카드 2 -->
+                <div class="pixel-card p-6 rounded-xl">
+                    <div class="text-cyan-400 text-3xl mb-4">
+                        <i class="fas fa-unlink"></i>
+                    </div>
+                    <h3 class="text-xl font-bold mb-4">호환성 문제</h3>
+                    <p class="text-gray-400 mb-4">
+                        현대 기기에서 어떻게 실행해야 할지 몰라서 포기한 적이 많습니다.
+                    </p>
+                    <div class="h-1 bg-gradient-to-r from-cyan-400 to-transparent rounded-full mb-4"></div>
+                    <div class="text-sm text-pink-500">"새 컴퓨터에서 안 돌아가서 난감했어요"</div>
+                </div>
+                <!-- 카드 3 -->
+                <div class="pixel-card p-6 rounded-xl">
+                    <div class="text-yellow-400 text-3xl mb-4">
+                        <i class="fas fa-balance-scale"></i>
+                    </div>
+                    <h3 class="text-xl font-bold mb-4">법적 우려</h3>
+                    <p class="text-gray-400 mb-4">
+                        게임 데이터를 보존하고 공유하는게 법적으로 문제가 될까 봐 걱정됩니다.
+                    </p>
+                    <div class="h-1 bg-gradient-to-r from-yellow-400 to-transparent rounded-full mb-4"></div>
+                    <div class="text-sm text-cyan-400">"법적 문제가 생길까 항상 불안했어요"</div>
+                </div>
+                <!-- 카드 4 -->
+                <div class="pixel-card p-6 rounded-xl">
+                    <div class="text-green-400 text-3xl mb-4">
+                        <i class="fas fa-share-alt"></i>
+                    </div>
+                    <h3 class="text-xl font-bold mb-4">공유 어려움</h3>
+                    <p class="text-gray-400 mb-4">
+                        소중한 컬렉션을 다른 팬들과 안전하게 공유할 방법이 마땅치 않습니다.
+                    </p>
+                    <div class="h-1 bg-gradient-to-r from-green-400 to-transparent rounded-full mb-4"></div>
+                    <div class="text-sm text-pink-500">"제 보물을 누구와 나눌 수 없었어요"</div>
+                </div>
+            </div>
+        </div>
+    </section>
+    <!-- 해결책 섹션 -->
+    <section class="py-20 relative" style="background-color: #0f0f1a;">
+        <div class="absolute inset-0 opacity-20" style="background-image: url('https://grainy-gradients.vercel.app/noise.svg');"></div>
+        <div class="container mx-auto px-4 relative">
+            <div class="flex flex-col lg:flex-row items-center gap-12 mb-20">
+                <div class="lg:w-1/2">
+                    <h2 class="pixel-font text-3xl md:text-4xl mb-6 text-pink-500">
+                        레게 마스터 클래스로<br>완벽한 해결책을 얻으세요
+                    </h2>
+                    <p class="text-lg text-gray-300 mb-8 leading-relaxed">
+                        단순히 이론만이 아닌, 실제로 적용 가능한 실용적인 기술을 단계별로 배웁니다.
+                        복잡��� 기술을 쉽게 설명하여 초보자도 쉽게 따라할 수 있습니다.
+                    </p>
+                    <div class="space-y-4 mb-8">
+                        <div class="flex items-start">
+                            <div class="w-10 h-10 bg-cyan-400 rounded-full flex items-center justify-center mr-4 flex-shrink-0">
+                                <i class="fas fa-check text-black"></i>
+                            </div>
+                            <div>
+                                <h4 class="font-bold mb-1">기술적 장벽 없는 쉬운 방법</h4>
+                                <p class="text-gray-400">초보자도 이해할 수 있는 명확한 가이드</p>
+                            </div>
+                        </div>
+                        <div class="flex items-start">
+                            <div class="w-10 h-10 bg-cyan-400 rounded-full flex items-center justify-center mr-4 flex-shrink-0">
+                                <i class="fas fa-check text-black"></i>
+                            </div>
+                            <div>
+                                <h4 class="font-bold mb-1">모든 기기 호환성 보장</h4>
+                                <p class="text-gray-400">PC, 모바일, 모든 콘솔에서 작동</p>
+                            </div>
+                        </div>
+                        <div class="flex items-start">
+                            <div class="w-10 h-10 bg-cyan-400 rounded-full flex items-center justify-center mr-4 flex-shrink-0">
+                                <i class="fas fa-check text-black"></i>
+                            </div>
+                            <div>
+                                <h4 class="font-bold mb-1">법적 문제 완벽 가이드</h4>
+                                <p class="text-gray-400">합법적인 범위에서의 보존 기술</p>
+                            </div>
+                        </div>
+                    </div>
+                    <button class="glow-btn text-black font-bold py-3 px-8 rounded-full flex items-center">
+                        커리큘럼 보기 <i class="fas fa-arrow-down ml-2"></i>
+                    </button>
+                </div>
+                <div class="lg:w-1/2 relative">
+                    <div class="pixel-card rounded-2xl overflow-hidden border border-pink-500/30 shadow-xl shadow-pink-500/10">
+                        <video poster="https://images.unsplash.com/photo-1511512578047-dfb367046420?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1471&q=80" class="w-full h-auto">
+                            <source src="#" type="video/mp4">
+                        </video>
+                    </div>
+                </div>
+            </div>
+            <!-- 성공 스토리 -->
+            <div class="bg-gradient-to-r from-purple-900/50 to-cyan-900/50 border border-cyan-400/20 rounded-2xl p-8 md:p-12 mt-12">
+                <div class="flex flex-col md:flex-row items-center gap-8">
+                    <div class="md:w-1/4 flex justify-center">
+                        <img src="https://images.unsplash.com/photo-1603415526960-f7e0328c63b1?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80"
+                             alt="수강생"
+                             class="w-32 h-32 rounded-full object-cover border-4 border-cyan-400">
+                    </div>
+                    <div class="md:w-3/4 text-center md:text-left">
+                        <p class="text-lg italic text-white mb-4">
+                            "레게 마스터 클래스를 통해 200개가 넘는 게임 콜렉션을 디지털화할 수 있었습니다.
+                            이제 어디서든 제 소중한 추억을 즐길 수 있어요. 정말 감사합니다!"
+                        </p>
+                        <div class="flex flex-col md:flex-row md:items-center justify-center md:justify-between">
+                            <div">
+                                <h4 class="font-bold text-cyan-400">박보존</h4>
+                                <p class="text-sm text-gray-400">300개 이상의 레트로 게임 소장</p>
+                            </div>
+                            <div class="flex mt-4 md:mt-0 justify-center">
+                                <i class="fas fa-star text-yellow-400"></i>
+                                <i class="fas fa-star text-yellow-400"></i>
+                                <i class="fas fa-star text-yellow-400"></i>
+                                <i class="fas fa-star text-yellow-400"></i>
+                                <i class="fas fa-star text-yellow-400"></i>
+                                <span class="ml-2 text-white">5.0</span>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+    <!-- 커리큘럼 섹션 -->
+    <section id="curriculum" class="py-20 bg-black bg-opacity-60 relative">
+        <div class="container mx-auto px-4 relative">
+            <div class="text-center mb-16">
+                <h2 class="pixel-font text-3xl md:text-4xl mb-6 text-pink-500">
+                    체계적인 6주 커리큘럼
+                </h2>
+                <p class="text-lg text-gray-400 max-w-2xl mx-auto">
+                    레트로 게임 보존부터 공유까지, 단계별로 체계적으로 배웁니다.
+                </p>
+            </div>
+            <div class="max-w-4xl mx-auto">
+                <!-- 모듈 1 -->
+                <div class="pixel-card mb-6 rounded-xl overflow-hidden">
+                    <div class="flex items-center justify-between p-6 cursor-pointer module-toggle">
+                        <div class="flex items-center">
+                            <div class="w-8 h-8 bg-cyan-400 rounded-full flex items-center justify-center mr-4 font-bold text-black">1</div>
+                            <h3 class="text-xl font-bold">기초: 레트로 게임 데이터 구조 이해</h3>
+                        </div>
+                        <i class="fas fa-chevron-down text-gray-400 transition-transform duration-300 module-arrow"></i>
+                    </div>
+                    <div class="accordion-content px-6 pb-6 hidden">
+                        <p class="text-gray-300 mb-4">
+                            게임 데이터가 어떻게 저장되고 구성되는지 이해하는 것이 보존의 첫걸음입니다.
+                        </p>
+                        <ul class="list-disc list-inside text-gray-400 space-y-2 pl-4">
+                            <li>게임 카트리지의 물리적 구성 분석</li>
+                            <li>ROM과 데이터 구조의 이해</li>
+                            <li>데이터 손상 진단 방법</li>
+                            <li>보존 가치 판단 기준</li>
+                        </ul>
+                    </div>
+                </div>
+                <!-- 모듈 2 -->
+                <div class="pixel-card mb-6 rounded-xl overflow-hidden">
+                    <div class="flex items-center justify-between p-6 cursor-pointer module-toggle">
+                        <div class="flex items-center">
+                            <div class="w-8 h-8 bg-pink-500 rounded-full flex items-center justify-center mr-4 font-bold text-black">2</div>
+                            <h3 class="text-xl font-bold">데이터 추출: 하드웨어 & 소프트웨어</h3>
+                        </div>
+                        <i class="fas fa-chevron-down text-gray-400 transition-transform duration-300 module-arrow"></i>
+                    </div>
+                    <div class="accordion-content px-6 pb-6 hidden">
+                        <p class="text-gray-300 mb-4">
+                            안전하게 게임 데이터를 추출하는 모든 방법을 학습합니다.
+                        </p>
+                        <ul class="list-disc list-inside text-gray-400 space-y-2 pl-4">
+                            <li>필요한 장비 및 도구 소개</li>
+                            <li>하드웨어 연결과 설정</li>
+                            <li>추출 소프트웨어 사용 방법</li>
+                            <li>데이터 무결성 검증</li>
+                        </ul>
+                    </div>
+                </div>
+                <!-- 모듈 3 -->
+                <div class="pixel-card mb-6 rounded-xl overflow-hidden">
+                    <div class="flex items-center justify-between p-6 cursor-pointer module-toggle">
+                        <div class="flex items-center">
+                            <div class="w-8 h-8 bg-cyan-400 rounded-full flex items-center justify-center mr-4 font-bold text-black">3</div>
+                            <h3 class="text-xl font-bold">에뮬레이션 환경 최적화</h3>
+                        </div>
+                        <i class="fas fa-chevron-down text-gray-400 transition-transform duration-300 module-arrow"></i>
+                    </div>
+                    <div class="accordion-content px-6 pb-6 hidden">
+                        <p class="text-gray-300 mb-4">
+                            다양한 기기에서 최적의 게임 환경을 구축하는 방법을 배웁니다.
+                        </p>
+                        <ul class="list-disc list-inside text-gray-400 space-y-2 pl-4">
+                            <li>주요 에뮬레이터 비교</li>
+                            <li>설정 최적화 방법</li>
+                            <li>컨트롤러 매핑</li>
+                            <li>화질 개선 기술</li>
+                        </ul>
+                    </div>
+                </div>
+                <!-- 모듈 4 -->
+                <div class="pixel-card mb-6 rounded-xl overflow-hidden">
+                    <div class="flex items-center justify-between p-6 cursor-pointer module-toggle">
+                        <div class="flex items-center">
+                            <div class="w-8 h-8 bg-pink-500 rounded-full flex items-center justify-center mr-4 font-bold text-black">4</div>
+                            <h3 class="text-xl font-bold">데이터 관리 및 큐레이션</h3>
+                        </div>
+                        <i class="fas fa-chevron-down text-gray-400 transition-transform duration-300 module-arrow"></i>
+                    </div>
+                    <div class="accordion-content px-6 pb-6 hidden">
+                        <p class="text-gray-300 mb-4">
+                            추출한 게임 데이터를 체계적으로 관리하고 편집하는 방법을 학습합니다.
+                        </p>
+                        <ul class="list-disc list-inside text-gray-400 space-y-2 pl-4">
+                            <li>메타데이터 추가 및 관리</li>
+                            <li>사용자 인터페이스 커스터마이징</li>
+                            <li>백업 및 버전 관리</li>
+                            <li>게임별 특수 설정 저장</li>
+                        </ul>
+                    </div>
+                </div>
+                <!-- 모듈 5 -->
+                <div class="pixel-card mb-6 rounded-xl overflow-hidden">
+                    <div class="flex items-center justify-between p-6 cursor-pointer module-toggle">
+                        <div class="flex items-center">
+                            <div class="w-8 h-8 bg-cyan-400 rounded-full flex items-center justify-center mr-4 font-bold text-black">5</div>
+                            <h3 class="text-xl font-bold">공유와 커뮤니티</h3>
+                        </div>
+                        <i class="fas fa-chevron-down text-gray-400 transition-transform duration-300 module-arrow"></i>
+                    </div>
+                    <div class="accordion-content px-6 pb-6 hidden">
+                        <p class="text-gray-300 mb-4">
+                            합법적이고 안전하게 게임을 공유하는 방법을 배웁니다.
+                        </p>
+                        <ul class="list-disc list-inside text-gray-400 space-y-2 pl-4">
+                            <li>법적 문제 회피 방법</li>
+                            <li>개인용 서버 구축</li>
+                            <li>커뮤니티에 기여하는 방법</li>
+                            <li>패치 및 번역 프로젝트 참여</li>
+                        </ul>
+                    </div>
+                </div>
+                <!-- 모듈 6 -->
+                <div class="pixel-card rounded-xl overflow-hidden">
+                    <div class="flex items-center justify-between p-6 cursor-pointer module-toggle">
+                        <div class="flex items-center">
+                            <div class="w-8 h-8 bg-pink-500 rounded-full flex items-center justify-center mr-4 font-bold text-black">6</div>
+                            <h3 class="text-xl font-bold">고급 하드웨어 솔루션</h3>
+                        </div>
+                        <i class="fas fa-chevron-down text-gray-400 transition-transform duration-300 module-arrow"></i>
+                    </div>
+                    <div class="accordion-content px-6 pb-6 hidden">
+                        <p class="text-gray-300 mb-4">
+                            특수한 경우에 필요한 고급 기술을 학습합니다.
+                        </p>
+                        <ul class="list-disc list-inside text-gray-400 space-y-2 pl-4">
+                            <li>커스텀 하드웨어 솔루션</li>
+                            <li>데이터 복구 기술</li>
+                            <li>희귀 하드웨어 처리</li>
+                            <li>버그 수정 및 패칭</li>
+                        </ul>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+    <!-- 강사 소개 섹션 -->
+    <section id="instructor" class="py-20 bg-black bg-opacity-80 relative">
+        <div class="absolute inset-0 opacity-10" style="background-image: url('https://grainy-gradients.vercel.app/noise.svg');"></div>
+        <div class="container mx-auto px-4 relative">
+            <div class="flex flex-col lg:flex-row items-center gap-12 max-w-6xl mx-auto">
+                <div class="lg:w-2/5 relative">
+                    <img src="https://images.unsplash.com/photo-1560250097-0b93528c311a?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=987&q=80"
+                         alt="강사 프로필"
+                         class="w-full rounded-2xl border-4 border-cyan-400 shadow-xl">
+                    <div class="absolute -bottom-4 -right-4 bg-black px-4 py-2 rounded-full border border-pink-500 shadow-lg">
+                        <span class="text-pink-500 font-bold">10년 경력</span>
+                    </div>
+                </div>
+                <div class="lg:w-3/5">
+                    <h2 class="pixel-font text-3xl md:text-4xl mb-6 text-cyan-400">
+                        전문 강사와 함께 배우는<br>레트로 게임 보존 기술
+                    </h2>
+                    <h3 class="text-2xl font-bold mb-2">김레트로</h3>
+                    <div class="text-gray-400 mb-6">게임 보존 기술 전문가</div>
+                    <p class="text-gray-300 mb-6 leading-relaxed">
+                        10년이 넘도록 레트로 게임 보존 기술을 연구해 온 전문가로, 국내외에서 500개가 넘는 희귀 게임 데이터 복원 프로젝트를 완료했습니다.
+                        복잡한 기술을 초보자도 이해하기 쉽게 설명하는 능력으로 유명하며,
+                        많은 수강생들이 그의 강의를 통해 성공적으로 게임 보존 기술을 습득했습니다.
+                    </p>
+                    <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-8">
+                        <div class="flex items-center">
+                            <div class="w-10 h-10 bg-pink-500 rounded-full flex items-center justify-center mr-4 text-black">
+                                <i class="fas fa-gamepad"></i>
+                            </div>
+                            <div>
+                                <h4 class="font-bold">500+ 게임 복원</h4>
+                                <p class="text-sm text-gray-400">국내외 희귀 게임 데이터 보존</p>
+                            </div>
+                        </div>
+                        <div class="flex items-center">
+                            <div class="w-10 h-10 bg-cyan-400 rounded-full flex items-center justify-center mr-4 text-black">
+                                <i class="fas fa-users"></i>
+                            </div>
+                            <div>
+                                <h4 class="font-bold">10년+ 경력</h4>
+                                <p class="text-sm text-gray-400">게임 보존 기술 연구</p>
+                            </div>
+                        </div>
+                        <div class="flex items-center">
+                            <div class="w-10 h-10 bg-purple-500 rounded-full flex items-center justify-center mr-4 text-black">
+                                <i class="fas fa-award"></i>
+                            </div>
+                            <div>
+                                <h4 class="font-bold">국제 인증</h4>
+                                <p class="text-sm text-gray-400">게임 보존 협회 인증 전문가</p>
+                            </div>
+                        </div>
+                        <div class="flex items-center">
+                            <div class="w-10 h-10 bg-yellow-400 rounded-full flex items-center justify-center mr-4 text-black">
+                                <i class="fas fa-graduation-cap"></i>
+                            </div>
+                            <div>
+                                <h4 class="font-bold">1,000+ 수강생</h4>
+                                <p class="text-sm text-gray-400">성공적인 기술 전수</p>
+                            </div>
+                        </div>
+                    </div>
+                    <button class="glow-btn text-black font-bold py-3 px-8 rounded-full inline-flex items-center">
+                        강사 상세 프로필 보기 <i class="fas fa-arrow-right ml-2"></i>
+                    </button>
+                </div>
+            </div>
+        </div>
+    </section>
+    <!-- 가격 섹션 -->
+    <section id="pricing" class="py-20 bg-gradient-to-b from-black to-purple-900 relative">
+        <div class="absolute inset-0 opacity-10" style="background-image: url('https://grainy-gradients.vercel.app/noise.svg');"></div>
+        <div class="container mx-auto px-4 relative">
+            <div class="text-center mb-16">
+                <h2 class="pixel-font text-3xl md:text-4xl mb-6 text-pink-500">
+                    당신의 레트로 게임 여행을<br>지금 시작하세요
+                </h2>
+                <p class="text-lg text-gray-400 max-w-2xl mx-auto">
+                    레트로 게임 보존 기술은 시간이 갈수록 가치가 올라갑니다. 지금 투자하세요!
+                </p>
+            </div>
+            <div class="grid grid-cols-1 lg:grid-cols-2 gap-8 max-w-6xl mx-auto">
+                <!-- 가격 카드 -->
+                <div class="pixel-card rounded-2xl overflow-hidden bg-gradient-to-b from-gray-900 to-black border border-cyan-400/30 relative">
+                    <div class="absolute top-4 right-4 bg-yellow-400 text-black text-xs font-bold px-3 py-1 rounded-full">
+                        베스트 초이스
+                    </div>
+                    <div class="p-8">
+                        <h3 class="text-2xl font-bold mb-2 text-cyan-400">얼리버드 할인</h3>
+                        <div class="flex items-end mb-4">
+                            <span class="text-4xl md:text-5xl font-bold">299,000</span>
+                            <span class="text-lg ml-1 text-gray-400">원</span>
+                        </div>
+                        <div class="flex items-center text-gray-400 mb-6">
+                            <span class="line-through mr-2">정가 399,000원</span>
+                            <span class="bg-green-900 text-green-400 text-xs px-2 py-1 rounded">25% 할인</span>
+                        </div>
+                        <div class="mb-8">
+                            <div class="flex items-center mb-3">
+                                <i class="fas fa-check-circle text-cyan-400 mr-2"></i>
+                                <span class="text-gray-300">6주 완성 풀 패키지</span>
+                            </div>
+                            <div class="flex items-center mb-3">
+                                <i class="fas fa-check-circle text-cyan-400 mr-2"></i>
+                                <span class="text-gray-300">평생 업데이트 지원</span>
+                            </div>
+                            <div class="flex items-center mb-3">
+                                <i class="fas fa-check-circle text-cyan-400 mr-2"></i>
+                                <span class="text-gray-300">전용 툴킷 제공</span>
+                            </div>
+                            <div class="flex items-center mb-3">
+                                <i class="fas fa-check-circle text-cyan-400 mr-2"></i>
+                                <span class="text-gray-300">커뮤니티 멤버십</span>
+                            </div>
+                            <div class="flex items-center">
+                                <i class="fas fa-check-circle text-cyan-400 mr-2"></i>
+                                <span class="text-gray-300">1:1 멘토링 2회</span>
+                            </div>
+                        </div>
+                        <button class="glow-btn text-black font-bold py-4 px-6 rounded-full w-full">
+                            지금 할인가로 등록하기
+                        </button>
+                    </div>
+                </div>
+                <!-- 할인 혜택 -->
+                <div>
+                    <div class="pixel-card p-8 rounded-2xl mb-6">
+                        <h3 class="text-xl font-bold mb-6 text-pink-500">지금 등록시 특별 혜택</h3>
+                        <div class="space-y-4">
+                            <div class="flex items-start">
+                                <div class="w-10 h-10 bg-pink-500 rounded-full flex items-center justify-center mr-4 mt-1 text-black">
+                                    <i class="fas fa-gift"></i>
+                                </div>
+                                <div>
+                                    <h4 class="font-bold mb-1">무료 보너스 1</h4>
+                                    <p class="text-gray-400 text-sm">레트로 게임 에뮬레이션 가이드북 (가치: 59,000원)</p>
+                                </div>
+                            </div>
+                            <div class="flex items-start">
+                                <div class="w-10 h-10 bg-cyan-400 rounded-full flex items-center justify-center mr-4 mt-1 text-black">
+                                    <i class="fas fa-tools"></i>
+                                </div>
+                                <div>
+                                    <h4 class="font-bold mb-1">무료 보너스 2</h4>
+                                    <p class="text-gray-400 text-sm">전용 데이터 추출 도구 세트 (가치: 89,000원)</p>
+                                </div>
+                            </div>
+                            <div class="flex items-start">
+                                <div class="w-10 h-10 bg-purple-500 rounded-full flex items-center justify-center mr-4 mt-1 text-black">
+                                    <i class="fas fa-users"></i>
+                                </div>
+                                <div>
+                                    <h4 class="font-bold mb-1">무료 보너스 3</h4>
+                                    <p class="text-gray-400 text-sm">VIP 커뮤니티 초대권 (가치: 49,000원)</p>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                    <!-- 타이머 -->
+                    <div class="pixel-card p-6 rounded-2xl text-center">
+                        <div class="text-gray-300 mb-3">할인 마감까지:</div>
+                        <div class="flex justify-center gap-3 mb-4">
+                            <div class="timer-block px-4 py-2 rounded-lg">
+                                <div id="hours2" class="text-3xl font-bold text-pink-500">03</div>
+                                <div class="text-xs text-gray-400">시간</div>
+                            </div>
+                            <div class="timer-block px-4 py-2 rounded-lg">
+                                <div id="minutes2" class="text-3xl font-bold text-pink-500">00</div>
+                                <div class="text-xs text-gray-400">분</div>
+                            </div>
+                            <div class="timer-block px-4 py-2 rounded-lg">
+                                <div id="seconds2" class="text-3xl font-bold text-pink-500">00</div>
+                                <div class="text-xs text-gray-400">초</div>
+                            </div>
+                        </div>
+                        <p class="text-sm text-gray-400">지금 등록하면 총 <span class="text-cyan-400 font-bold">197,000원</span> 상당의 혜택을 받을 수 있습니다</p>
+                    </div>
+                </div>
+            </div>
+            <!-- 환불 보장 -->
+            <div class="mt-16 max-w-4xl mx-auto">
+                <div class="pixel-card p-8 rounded-2xl text-center">
+                    <div class="flex flex-col md:flex-row items-center justify-center gap-4">
+                        <div class="w-16 h-16 bg-green-900 rounded-full flex items-center justify-center text-green-400">
+                            <i class="fas fa-shield-alt text-2xl"></i>
+                        </div>
+                        <div>
+                            <h3 class="text-xl font-bold mb-2">30일 환불 보장</h3>
+                            <p class="text-gray-400">
+                                강의가 마음에 들지 않으면 30일 이내에 전액 환불해 드립니다.
+                                리스크 없이 시작하실 수 있습니다.
+                            </p>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+    <!-- 최종 CTA 섹션 -->
+    <section class="py-20 bg-gradient-to-r from-purple-900/70 to-black/70 relative">
+        <div class="container mx-auto px-4 relative">
+            <div class="max-w-4xl mx-auto text-center">
+                <h2 class="pixel-font text-3xl md:text-4xl mb-6 text-white">
+                    소중한 게임 컬렉션이<br>사라지기 전에 보존하세요!
+                </h2>
+                <p class="text-lg text-gray-300 mb-10 max-w-2xl mx-auto leading-relaxed">
+                    시간이 갈수록 카트리지와 디스크가 손상됩니다. 지금이 보존 기술을 배우기에 가장 좋은 시기입니다.
+                </p>
+                <div class="flex flex-col sm:flex-row justify-center gap-4 max-w-sm mx-auto">
+                    <button class="glow-btn text-black font-bold py-4 px-8 rounded-full text-lg">
+                        지금 등록하기
+                    </button>
+                </div>
+                <div class="mt-6 text-sm text-gray-500">
+                    <div class="flex items-center justify-center gap-2">
+                        <i class="fas fa-lock"></i>
+                        <span>안전한 결제</span>
+                        <i class="fas fa-shield-alt ml-2"></i>
+                        <span>개인정보 보호</span>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+    <!-- 푸터 -->
+    <footer class="bg-black bg-opacity-90 py-12 border-t border-gray-800">
+        <div class="container mx-auto px-4">
+            <div class="flex flex-col md:flex-row justify-between items-center">
+                <div class="mb-6 md:mb-0">
+                    <div class="flex items-center">
+                        <div class="game-controller-logo">
+                            <i class="fas fa-gamepad"></i>
+                        </div>
+                        <div class="pixel-font logo-text text-2xl ml-2">레게</div>
+                    </div>
+                    <p class="text-gray-400 text-sm mt-4">
+                        레트로 게임 보존 기술의 모든 것<br>
+                        &copy; 2025 레게 마스터 클래스. All rights reserved.
+                    </p>
+                </div>
+                <div class="flex flex-col md:flex-row gap-8">
+                    <div>
+                        <h4 class="text-gray-300 font-bold mb-3">정보</h4>
+                        <ul class="space-y-2">
+                            <li><a href="#" class="text-gray-400 hover:text-cyan-400 transition text-sm">이용약관</a></li>
+                            <li><a href="#" class="text-gray-400 hover:text-cyan-400 transition text-sm">개인정보 처리방침</a></li>
+                            <li><a href="#" class="text-gray-400 hover:text-cyan-400 transition text-sm">환불 정책</a></li>
+                        </ul>
+                    </div>
+                    <div>
+                        <h4 class="text-gray-300 font-bold mb-3">문의하기</h4>
+                        <ul class="space-y-2">
+                            <li><a href="#" class="text-gray-400 hover:text-cyan-400 transition text-sm">고객 지원</a></li>
+                            <li><a href="#" class="text-gray-400 hover:text-cyan-400 transition text-sm">강사 초빙</a></li>
+                            <li><a href="#" class="text-gray-400 hover:text-cyan-400 transition text-sm">파트너십</a></li>
+                        </ul>
+                    </div>
+                    <div>
+                        <h4 class="text-gray-300 font-bold mb-3">소셜 미디어</h4>
+                        <div class="flex gap-4">
+                            <a href="#" class="text-gray-400 hover:text-cyan-400 transition text-xl"><i class="fab fa-youtube"></i></a>
+                            <a href="#" class="text-gray-400 hover:text-cyan-400 transition text-xl"><i class="fab fa-discord"></i></a>
+                            <a href="#" class="text-gray-400 hover:text-cyan-400 transition text-xl"><i class="fab fa-twitter"></i></a>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </footer>
+    <!-- 사이드 플로팅 CTA -->
+    <div class="side-cta fixed top-1/2 transform -translate-y-1/2 z-30">
+        <div class="bg-gradient-to-r from-pink-600 to-purple-600 text-white p-3 rounded-l-lg shadow-lg flex items-center cursor-pointer" id="side-cta">
+            <span class="whitespace-nowrap font-bold mr-2">할인 마감 임박!</span>
+            <i class="fas fa-arrow-right"></i>
+        </div>
+    </div>
+    <script>
+        // 모바일 메뉴 토글
+        const mobileMenuButton = document.getElementById('mobile-menu-button');
+        const closeMenuButton = document.getElementById('close-menu');
+        const mobileMenu = document.getElementById('mobile-menu');
+        mobileMenuButton.addEventListener('click', () => {
+            mobileMenu.classList.add('open');
+            document.body.style.overflow = 'hidden';
+        });
+        closeMenuButton.addEventListener('click', () => {
+            mobileMenu.classList.remove('open');
+            document.body.style.overflow = '';
+        });
+        // FAQ 아코디언
+        const accordionItems = document.querySelectorAll('.module-toggle');
+        accordionItems.forEach(item => {
+            item.addEventListener('click', () => {
+                const content = item.parentElement.querySelector('.accordion-content');
+                const arrow = item.querySelector('.module-arrow');
+                content.classList.toggle('hidden');
+                content.classList.toggle('block');
+                arrow.classList.toggle('rotate-180');
+            });
+        });
+        // 사이드 CTA
+        const sideCta = document.getElementById('side-cta');
+        sideCta.addEventListener('click', () => {
+            document.getElementById('pricing').scrollIntoView({
+                behavior: 'smooth'
+            });
+        });
+        // 이메일 폼 제출
+        const leadForm = document.getElementById('lead-form');
+        leadForm.addEventListener('submit', (e) => {
+            e.preventDefault();
+            const email = e.target.querySelector('input[type="email"]').value;
+            alert(`${email} 주소로 무료 가이드 링크를 보냈습니다!`);
+            e.target.reset();
+        });
+        // 카운트다운 타이머 수정
+        function updateCountdown() {
+            // 종료 시간 설정 (현재 시간 + 3시간)
+            const now = new Date();
+            const endTime = new Date(now.getTime() + 3 * 60 * 60 * 1000);
+            const timeLeft = endTime - now;
+            // 시간, 분, 초 계산
+            const hours = Math.floor((timeLeft % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
+            const minutes = Math.floor((timeLeft % (1000 * 60 * 60)) / (1000 * 60));
+            const seconds = Math.floor((timeLeft % (1000 * 60)) / 1000);
+            // 두 타이머 모두 업데이트
+            document.getElementById('hours').textContent = hours.toString().padStart(2, '0');
+            document.getElementById('minutes').textContent = minutes.toString().padStart(2, '0');
+            document.getElementById('seconds').textContent = seconds.toString().padStart(2, '0');
+            document.getElementById('hours2').textContent = hours.toString().padStart(2, '0');
+            document.getElementById('minutes2').textContent = minutes.toString().padStart(2, '0');
+            document.getElementById('seconds2').textContent = seconds.toString().padStart(2, '0');
+            if (timeLeft <= 0) {
+                clearInterval(countdownTimer);
+                document.querySelectorAll('.timer-block').forEach(el => {
+                    el.innerHTML = '<div class="text-red-500 font-bold">할인 기간이 종료되었습니다</div>';
+                });
+            }
+        }
+        // 초기 호출 및 인터벌 설정
+        updateCountdown();
+        const countdownTimer = setInterval(updateCountdown, 1000);
+    </script>
+<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - <a href="https://enzostvs-deepsite.hf.space?remix=dongil77/retro-game-master" style="color: #fff;text-decoration: underline;" target="_blank" >🧬 Remix</a></p></body>
 </html>