href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;700;800&family=Noto+Sans+KR:wght@400;700;900&family=Space+Grotesk:wght@500;700&display=swap"
rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1"
    rel="stylesheet" />

<link rel="stylesheet" href="/output.css">

<style type="text/tailwindcss">
    @layer utilities {
          .text-glow {
            text-shadow: 0 0 8px rgba(255, 255, 255, 0.7), 0 0 12px rgba(59, 130, 246, 0.5), 0 0 20px rgba(59, 130, 246, 0.5);
          }
          .btn-portal {
            background-color: #3b0764;
            background-image: radial-gradient(circle at center, #7e22ce 0%, #4c1d95 40%, #2e1065 80%);
            border: 2px solid #a78bfa;
            box-shadow: 0 0 15px #a78bfa, 0 0 25px #a78bfa inset;
          }
        }
    </style>
<style>
    .material-symbols-outlined {
        font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
    }

    ::-webkit-scrollbar {
        width: 6px;
    }

    ::-webkit-scrollbar-track {
        background: #1A237E;
    }

    ::-webkit-scrollbar-thumb {
        background: #D81B60;
        border-radius: 3px;
    }

    .hover-bounce:hover {
        transform: scale(1.02) rotate(-1deg);
        href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;700;800&family=Noto+Sans+KR:wght@400;700;900&family=Space+Grotesk:wght@500;700&display=swap"
        rel="stylesheet"><link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1"

        rel="stylesheet" /><link rel="stylesheet" href="/output.css"><script>tailwind.config= {

            darkMode: "class",
            theme: {
                extend: {
                    colors: {
                        "primary": "#FFD600",
                            "background-light": "#FFF8E1",
                            "background-dark": "#1A237E",
                            "accent": "#D81B60",
                            "dark-text": "#FFF8E1",
                            "light-text": "#4A148C",
                            "dark-subtext": "#A7FFEB",
                            "light-subtext": "#4A148C",
                            "nav-surface": "#121212",
                    }

                    ,
                    fontFamily: {
                        "display": ["Plus Jakarta Sans", "Noto Sans KR", "sans-serif"],
                            "mono": ["Space Grotesk", "monospace"],
                    }

                    ,
                    borderRadius: {
                        "DEFAULT": "1rem", "lg": "2rem", "xl": "3rem", "full": "9999px"
                    }

                    ,
                }

                ,
            }

            ,
        }

        ;

        </script><style type="text/tailwindcss">@layer utilities {
            .text-glow {
                text-shadow: 0 0 8px rgba(255, 255, 255, 0.7), 0 0 12px rgba(59, 130, 246, 0.5), 0 0 20px rgba(59, 130, 246, 0.5);
            }

            .btn-portal {
                background-color: #3b0764;
                background-image: radial-gradient(circle at center, #7e22ce 0%, #4c1d95 40%, #2e1065 80%);
                border: 2px solid #a78bfa;
                box-shadow: 0 0 15px #a78bfa, 0 0 25px #a78bfa inset;
            }
        }
</style>
<style>
    .material-symbols-outlined {
        font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
    }

    ::-webkit-scrollbar {
        width: 6px;
    }

    ::-webkit-scrollbar-track {
        background: #1A237E;
    }

    ::-webkit-scrollbar-thumb {
        background: #D81B60;
        border-radius: 3px;
    }

    .hover-bounce:hover {
        transform: scale(1.02) rotate(-1deg);
        z-index: 10;
        box-shadow: 0 20px 40px -10px rgba(216, 27, 96, 0.3);
        border-color: #FFD600;
    }

    /* List View Styles */
    .list-view {
        display: flex;
        flex-direction: column;
        gap: 1rem;
    }

    .list-item {
        display: flex;
        gap: 1.5rem;
        background: rgba(255, 255, 255, 0.05);
        backdrop-filter: blur(10px);
        border: 1px solid rgba(255, 255, 255, 0.1);
        border-radius: 1rem;
        overflow: hidden;
        transition: all 0.3s ease;
        cursor: pointer;
    }

    .list-item:hover {
        border-color: #FFD600;
        /* primary */
        transform: translateX(4px);
    }

    .list-item-img {
        width: 240px;
        aspect-ratio: 16/9;
        flex-shrink: 0;
        position: relative;
    }

    .list-item-content {
        padding: 1.5rem;
        display: flex;
        flex-direction: column;
        justify-content: center;
        flex-grow: 1;
    }

    @media (max-width: 768px) {
        .list-item {
            flex-direction: column;
            gap: 0;
        }

        .list-item-img {
            width: 100%;
        }
    }
</style>

<!-- Analytics & Scripts -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-R96NX2MK78"></script>
<script src="../analytics.js"></script>
</head>

<body
    class="bg-background-light dark:bg-background-dark font-display text-dark-text antialiased selection:bg-accent selection:text-white">

    <!-- Floating Header -->
    <nav class="fixed top-6 left-1/2 -translate-x-1/2 z-50 w-[90%] max-w-5xl">
        <div
            class="bg-black/40 backdrop-blur-xl border border-white/10 rounded-full px-6 py-3 flex items-center justify-between shadow-2xl">
            <a class='font-display font-black text-xl tracking-tighter hover:text-primary transition-colors text-white' href='/app'>
                MUMULAB<span class="text-primary">.ENT</span>
            </a>

            <div class="hidden md:flex items-center gap-8 font-mono text-sm font-medium text-white/70">
                <a class='hover:text-white transition-colors' href='/blog/'>Blog</a>
                <a class='hover:text-white transition-colors' href='/tools/'>Tools</a>
                <a class='hover:text-white transition-colors' href='/youtube/'>YouTube</a>
                <a href="#" class="text-primary font-bold">Entertainment</a>
                <a class='hover:text-white transition-colors' href='/support/'>Sponsorship</a>
                <a class='hover:text-white transition-colors' href='/info/'>Info</a>
            </div>

            <button
                class="bg-white text-black px-5 py-2 rounded-full font-bold text-sm hover:bg-primary hover:text-black transition-colors flex items-center gap-2">
                <span class="material-symbols-outlined text-lg">stadia_controller</span>
                <span>PLAY NOW</span>
            </button>
        </div>
    </nav>

    <div class="relative flex min-h-screen w-full flex-col overflow-x-hidden">

        <!-- Hero Section -->
        <div class="relative flex min-h-[85vh] flex-col gap-6 bg-cover bg-center bg-no-repeat items-center justify-center p-4"
            style="background-image: linear-gradient(rgba(10, 5, 20, 0.4) 0%, rgba(26, 35, 126, 0.8) 100%), url('https://lh3.googleusercontent.com/aida-public/AB6AXuAgpJcvfwYqy4mINSsS28x9CSSujHr-fMRwQ1E60XEcIzP_7Jj7zvvPpklYH93Zaz7uFZpfI3jRST0p3AMuQPISak7KDi2H3ObXOcMNHHrhCJizMUQt1WPFGMBZqJa6gQqLQw6fGuq1SICLe057HWdDxGzua6EbiuXJSEE3yUqnkZ_oTpyeIKxYFLT8qu6n4KwkMLzcIvtbWugIuAMHcRwokPnU8z0yYKo1pLqj315pqKHuUQdtaet5RBDTS_Hf2j_dsuu1XKQJV_Mm');">

            <div class="flex flex-col gap-4 text-center z-10 mt-20">
                <h1
                    class="text-white text-glow text-5xl font-black leading-tight tracking-[-0.033em] md:text-7xl md:leading-tight">
                    신비한 성격의 세계
                </h1>
                <h2 class="text-dark-subtext text-lg font-medium leading-normal md:text-2xl">
                    차원을 넘어 당신의 진짜 모습을 발견하세요!
                </h2>
            </div>

            <button
                class="relative flex min-w-[160px] cursor-pointer items-center justify-center overflow-hidden rounded-lg h-16 px-10 btn-portal text-white text-xl font-bold leading-normal tracking-[0.015em] transition-transform hover:scale-105 z-10 mt-8 shadow-lg shadow-purple-500/50">
                <span class="truncate">포탈 열기</span>
            </button>
        </div>

        <!-- Content Section (Bento Grid) -->
        <main class="max-w-7xl mx-auto px-6 py-20 w-full">
            <div class="flex items-end justify-between mb-12">
                <h2 class="font-display font-bold text-4xl md:text-5xl text-white">COMING<br><span
                        class="text-primary">SOON</span></h2>

                <!-- View Toggle -->
                <div class="bg-black/40 backdrop-blur border border-white/10 rounded-full p-1 flex items-center gap-1">
                    <button onclick="setViewMode('grid')" id="btn-grid"
                        class="w-10 h-10 rounded-full flex items-center justify-center transition-colors text-white/50 hover:text-white">
                        <span class="material-symbols-outlined">grid_view</span>
                    </button>
                    <button onclick="setViewMode('list')" id="btn-list"
                        class="w-10 h-10 rounded-full flex items-center justify-center transition-colors text-white/50 hover:text-white">
                        <span class="material-symbols-outlined">view_list</span>
                    </button>
                </div>
            </div>

            <!-- Grid Container -->
            <div id="content-grid" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 auto-dense">
                <!-- Items injected by JS -->
            </div>
        </main>

        <!-- Footer -->
        <footer class="border-t border-white/10 bg-black/20 py-20 backdrop-blur-sm">
            <div class="max-w-7xl mx-auto px-6 flex flex-col md:flex-row justify-between items-start gap-12">
                <div>
                    <a href="#" class="font-display font-black text-3xl tracking-tighter text-white">MUMULAB.ENT</a>
                    <p class="font-mono text-white/50 mt-4 text-sm">Seoul, Korea<br>&copy; 2025 MUMULAB</p>
                </div>
                <div class="flex gap-12 font-mono text-sm text-white/70">
                    <div class="flex flex-col gap-4">
                        <span class="text-white/40">SOCIAL</span>
                        <a href="#" class="hover:text-primary transition-colors">YOUTUBE</a>
                        <a href="#" class="hover:text-primary transition-colors">INSTAGRAM</a>
                        <a href="#" class="hover:text-primary transition-colors">TWITTER</a>
                    </div>
                    <div class="flex flex-col gap-4">
                        <span class="text-white/40">LEGAL</span>
                        <a href="#" class="hover:text-primary transition-colors">TERMS</a>
                        <a href="#" class="hover:text-primary transition-colors">PRIVACY</a>
                    </div>
                </div>
            </div>
        </footer>
    </div>

    <script>
        // Entertainment Items Data
        const items = [
            {
                id: "kim_story",
                title: "김부장 유니버스",
                subtitle: "직장인 생존 유형 테스트",
                type: "test",
                image: "01_kim_story/image/꼰대력테스트.png",
                link: "01_kim_story/index.html",
                icon: "badge",
                featured: true,
                desc: "당신은 어떤 직장인인가요? 김부장 유니버스에서 당신의 직장인 유형을 알아보세요."
            },
            {
                id: "psychology_test",
                title: "Psychology Test",
                subtitle: "Coming Soon",
                type: "placeholder",
                image: "",
                link: "#",
                icon: "psychology",
                featured: false,
                desc: "새로운 심리 테스트가 곧 공개됩니다."
            },
            {
                id: "fun_quiz",
                title: "Fun Quiz",
                subtitle: "Coming Soon",
                type: "placeholder",
                image: "",
                link: "#",
                icon: "quiz",
                featured: false,
                desc: "재미있는 퀴즈가 곧 공개됩니다."
            }
        ];

        let currentViewMode = localStorage.getItem('entViewMode') || 'grid';

        function setViewMode(mode) {
            currentViewMode = mode;
            localStorage.setItem('entViewMode', mode);
            updateViewToggleUI();
            renderItems();
        }

        function updateViewToggleUI() {
            const btnGrid = document.getElementById('btn-grid');
            const btnList = document.getElementById('btn-list');

            if (currentViewMode === 'grid') {
                btnGrid.classList.add('bg-white', 'text-black');
                btnGrid.classList.remove('text-white/50', 'hover:text-white');

                btnList.classList.remove('bg-white', 'text-black');
                btnList.classList.add('text-white/50', 'hover:text-white');
            } else {
                btnList.classList.add('bg-white', 'text-black');
                btnList.classList.remove('text-white/50', 'hover:text-white');

                btnGrid.classList.remove('bg-white', 'text-black');
                btnGrid.classList.add('text-white/50', 'hover:text-white');
            }
        }

        function renderItems() {
            const container = document.getElementById('content-grid');

            if (currentViewMode === 'grid') {
                container.className = 'grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 auto-dense';
                container.innerHTML = items.map(item => {
                    if (item.type === 'test') {
                        return `
                            <a href="${item.link}"
                                class="group relative bg-white/5 backdrop-blur-md rounded-3xl overflow-hidden border border-white/10 hover-bounce cursor-pointer col-span-1 lg:col-span-2 lg:row-span-2 aspect-[16/9] flex items-center justify-center">
                                <div class="absolute inset-0 z-0">
                                    <img src="${item.image}" alt="${item.title}"
                                        class="w-full h-full object-cover opacity-60 group-hover:scale-105 transition-transform duration-500">
                                    <div class="absolute inset-0 bg-gradient-to-t from-black/90 via-black/50 to-transparent"></div>
                                </div>
                                <div class="relative z-10 text-center p-8">
                                    <span class="material-symbols-outlined text-6xl text-primary mb-4 drop-shadow-lg">${item.icon}</span>
                                    <h3 class="font-display font-bold text-3xl text-white mb-2 drop-shadow-md">${item.title}</h3>
                                    <p class="font-mono text-lg text-dark-subtext drop-shadow-md">${item.subtitle}</p>
                                    <div class="mt-6 px-6 py-2 rounded-full border border-primary/30 bg-primary/20 text-primary font-bold text-sm inline-block backdrop-blur-sm">
                                        START TEST
                                    </div>
                                </div>
                            </a>
                        `;
                    } else {
                        return `
                            <div class="group relative bg-white/5 backdrop-blur-md rounded-3xl overflow-hidden border border-white/10 hover-bounce cursor-pointer aspect-[4/3] flex items-center justify-center">
                                <div class="text-center p-8">
                                    <span class="material-symbols-outlined text-4xl text-white/50 mb-4">${item.icon}</span>
                                    <h3 class="font-display font-bold text-xl text-white/50 mb-2">${item.title}</h3>
                                    <p class="font-mono text-xs text-white/30">${item.subtitle}</p>
                                </div>
                            </div>
                        `;
                    }
                }).join('');
            } else {
                // List View
                container.className = 'list-view';
                container.innerHTML = items.map(item => {
                    if (item.type === 'test') {
                        return `
                            <a href="${item.link}" class="list-item group">
                                <div class="list-item-img">
                                    <img src="${item.image}" alt="${item.title}" class="w-full h-full object-cover opacity-80 group-hover:opacity-100 transition-opacity">
                                </div>
                                <div class="list-item-content">
                                    <h3 class="font-display font-bold text-xl text-white mb-2 group-hover:text-primary transition-colors">${item.title}</h3>
                                    <p class="text-white/70 text-sm mb-4">${item.desc}</p>
                                    <div class="flex items-center gap-2 text-primary text-sm font-bold">
                                        <span class="material-symbols-outlined text-lg">play_arrow</span>
                                        START TEST
                                    </div>
                                </div>
                            </a>
                        `;
                    } else {
                        return `
                            <div class="list-item group opacity-50 cursor-not-allowed">
                                <div class="list-item-img bg-white/5 flex items-center justify-center">
                                    <span class="material-symbols-outlined text-4xl text-white/30">${item.icon}</span>
                                </div>
                                <div class="list-item-content">
                                    <h3 class="font-display font-bold text-xl text-white/50 mb-2">${item.title}</h3>
                                    <p class="text-white/30 text-sm mb-4">${item.desc}</p>
                                    <div class="text-white/30 text-xs font-mono">COMING SOON</div>
                                </div>
                            </div>
                        `;
                    }
                }).join('');
            }
        }

        document.addEventListener('DOMContentLoaded', () => {
            updateViewToggleUI();
            renderItems();
            if (window.Analytics) {
                Analytics.trackPageView('MUMULAB Entertainment', 'entertainment');
            }
        });
    </script>
</body>

</html>