<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>레벨KR</title>
    <meta property="og:image" content="https://i.ibb.co/jMVt5N0/levelKR.png">
    <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300;400;700&display=swap" rel="stylesheet">
    <style>
        :root {
            --bg-primary: #ffffff;
            --text-primary: #1d1d1f;
            --accent-color: #8A2BE2;
            --accent-glow: rgba(138, 43, 226, 0.2);
            --accent-secondary: #FF69B4;
            --accent-tertiary: #00CED1;
        }

        @media (prefers-color-scheme: dark) {
            :root {
                --bg-primary: #000000;
                --text-primary: #f5f5f7;
                --accent-color: #9370DB;
                --accent-glow: rgba(147, 112, 219, 0.2);
            }
        }

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        html, body {
            overflow: hidden;
            height: 100%;
            width: 100%;
            position: fixed;
        }

        body {
            font-family: 'Noto Sans KR', sans-serif;
            background-color: var(--bg-primary);
            color: var(--text-primary);
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .container {
            text-align: center;
            position: relative;
            z-index: 1;
        }

        h1 {
            font-size: 8rem;
            font-weight: 700;
            margin-bottom: 1rem;
            background: linear-gradient(45deg, var(--accent-color), var(--accent-secondary), var(--accent-tertiary));
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
            animation: gradient 15s ease infinite;
            background-size: 300% 300%;
        }

        p {
            font-size: 1.5rem;
            margin-bottom: 2rem;
            opacity: 0;
            min-height: 2em;
            animation: fadeIn 0.5s ease forwards;
            animation-delay: 0.5s;
        }

        .level-icon {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 800px;
            height: 800px;
            pointer-events: none;
        }

        .circle {
            position: absolute;
            border: 2px solid var(--accent-color);
            border-radius: 50%;
            animation: rotate 20s linear infinite;
        }

        .circle:nth-child(1) {
            width: 100%;
            height: 100%;
            border-color: var(--accent-color);
            opacity: 0.1;
        }

        .circle:nth-child(2) {
            width: 80%;
            height: 80%;
            border-color: var(--accent-secondary);
            animation-direction: reverse;
            opacity: 0.15;
        }

        .circle:nth-child(3) {
            width: 60%;
            height: 60%;
            border-color: var(--accent-tertiary);
            opacity: 0.2;
        }

        @keyframes rotate {
            from { transform: translate(-50%, -50%) rotate(0deg); }
            to { transform: translate(-50%, -50%) rotate(360deg); }
        }

        @keyframes gradient {
            0% { background-position: 0% 50%; }
            50% { background-position: 100% 50%; }
            100% { background-position: 0% 50%; }
        }

        @keyframes fadeIn {
            to { opacity: 0.8; }
        }

        .glow {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 600px;
            height: 600px;
            background: radial-gradient(circle, var(--accent-glow) 0%, rgba(255,255,255,0) 70%);
            opacity: 0.5;
            filter: blur(40px);
            animation: heartbeat 1.5s ease-in-out infinite;
        }

        @keyframes heartbeat {
            0% { transform: translate(-50%, -50%) scale(1); opacity: 0.5; }
            14% { transform: translate(-50%, -50%) scale(1.1); opacity: 0.7; }
            28% { transform: translate(-50%, -50%) scale(1); opacity: 0.5; }
            42% { transform: translate(-50%, -50%) scale(1.1); opacity: 0.7; }
            70% { transform: translate(-50%, -50%) scale(1); opacity: 0.5; }
            100% { transform: translate(-50%, -50%) scale(1); opacity: 0.5; }
        }
    </style>
</head>
<body>
    <div class="glow"></div>
    <div class="level-icon">
        <div class="circle"></div>
        <div class="circle"></div>
        <div class="circle"></div>
    </div>
    <div class="container">
        <h1>레벨KR</h1>
        <p id="welcome-text"></p>
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', () => {
            const welcomeText = "레벨KR에 오신 것을 환영합니다.";
            const welcomeTextEl = document.getElementById("welcome-text");
            let i = 0;
            const speed = 100;

            function typeWriter() {
                if (i < welcomeText.length) {
                    welcomeTextEl.innerHTML += welcomeText.charAt(i);
                    i++;
                    setTimeout(typeWriter, speed);
                }
            }

            typeWriter();
        });

        const darkModeMediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
        const root = document.documentElement;

        function setColorScheme(e) {
            if (e.matches) {
                root.style.setProperty('--bg-primary', '#000000');
                root.style.setProperty('--text-primary', '#f5f5f7');
                root.style.setProperty('--accent-color', '#9370DB');
                root.style.setProperty('--accent-glow', 'rgba(147, 112, 219, 0.2)');
            } else {
                root.style.setProperty('--bg-primary', '#ffffff');
                root.style.setProperty('--text-primary', '#1d1d1f');
                root.style.setProperty('--accent-color', '#8A2BE2');
                root.style.setProperty('--accent-glow', 'rgba(138, 43, 226, 0.2)');
            }
        }
        darkModeMediaQuery.addEventListener('change', setColorScheme);
        setColorScheme(darkModeMediaQuery);

        document.body.addEventListener('touchmove', function(e) {
            e.preventDefault();
        }, { passive: false });

        document.body.addEventListener('wheel', function(e) {
            e.preventDefault();
        }, { passive: false });
    </script>
</body>
</html>