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>
    /* Global Nav */
    .gn-header {
        position: fixed;
        top: 0; left: 0; right: 0;
        height: 72px;
        background: rgba(10, 5, 20, 0.97);
        border-bottom: 1px solid rgba(255, 255, 255, 0.08);
        z-index: 100;
        display: flex;
        align-items: center;
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
    }
    .gn-inner {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 20px;
        height: 100%;
        padding: 0 24px;
        max-width: 1400px;
        margin: 0 auto;
        width: 100%;
    }
    .gn-brand {
        font-weight: 800;
        letter-spacing: 0.1em;
        font-size: 19px;
        flex-shrink: 0;
    }
    .gn-brand a {
        color: #fff;
        text-decoration: none;
        transition: opacity 0.2s;
    }
    .gn-brand a:hover { opacity: 0.75; }
    .gn-nav {
        display: flex;
        gap: 6px;
        align-items: center;
        overflow-x: auto;
        scrollbar-width: none;
    }
    .gn-nav::-webkit-scrollbar { display: none; }
    .gn-item {
        display: flex;
        align-items: center;
        gap: 6px;
        padding: 9px 14px;
        background: rgba(255,255,255,0.02);
        border: 1px solid rgba(255,255,255,0.07);
        border-radius: 10px;
        text-decoration: none;
        color: rgba(255,255,255,0.6);
        font-size: 13px;
        font-weight: 500;
        transition: all 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94);
        backdrop-filter: blur(10px);
        position: relative;
        overflow: hidden;
        white-space: nowrap;
    }
    .gn-item::before {
        content: '';
        position: absolute;
        top: 0; left: -100%;
        width: 100%; height: 100%;
        background: linear-gradient(90deg, transparent, rgba(255,255,255,0.07), transparent);
        transition: left 0.5s;
    }
    .gn-item:hover::before { left: 100%; }
    .gn-item:hover {
        transform: translateY(-1px);
        border-color: rgba(255,255,255,0.18);
        background: rgba(255,255,255,0.05);
        color: rgba(255,255,255,0.9);
        box-shadow: 0 6px 20px rgba(0,0,0,0.25);
    }
    .gn-item.active {
        background: rgba(255,214,0,0.08);
        border-color: rgba(255,214,0,0.4);
        color: #FFD600;
        font-weight: 700;
    }
    .gn-icon { font-size: 14px; line-height: 1; }
    @media (max-width: 900px) {
        .gn-inner { padding: 0 12px; gap: 12px; }
        .gn-brand { font-size: 16px; }
        .gn-item { padding: 7px 10px; font-size: 12px; }
        .gn-icon { display: none; }
    }

    .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">

    <!-- Global Nav -->
    <header class="gn-header">
        <div class="gn-inner">
            <div class="gn-brand"><a href='/app'>MUMULAB</a></div>
            <nav class="gn-nav">
                <a class='gn-item' href='/blog/'><span class="gn-icon">📰</span>Blog</a>
                <a class='gn-item' href='/tools/'><span class="gn-icon">🛠️</span>Tools</a>
                <a class='gn-item' href='/youtube/'><span class="gn-icon">📺</span>YouTube</a>
                <a href="#" class="gn-item active"><span class="gn-icon">🎮</span>Entertainment</a>
                <a class='gn-item' href='/playground/'><span class="gn-icon">🎓</span>Playground</a>
                <a class='gn-item' href='/support/'><span class="gn-icon">☕</span>Sponsorship</a>
                <a class='gn-item' href='/info/'><span class="gn-icon">ℹ️</span>Info</a>
            </nav>
        </div>
    </header>

    <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>