:root {
            --color-1: #a78bfa;
            --color-2: #7c3aed;
            --color-3: #c084fc;
            --text-color: #ffffff;
            color-scheme: dark;
        }

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

            50% {
                background-position: 100% 50%;
            }

            100% {
                background-position: 0% 50%;
            }
        }

        * {
            box-sizing: border-box;
            -webkit-tap-highlight-color: transparent;
        }

        /* 아이폰 오버스크롤 시 끊김 없는 배경을 위한 핵심 기술 */
        html {
            scroll-behavior: smooth;
            margin: 0;
            padding: 0;
            height: 100%;
            background-color: #7c3aed;
            /* 비상용 배경색 */
            overflow: hidden;
            /* html 자체 스크롤 방지 */
        }

        html::before {
            content: '';
            position: fixed;
            /* 뷰포트보다 훨씬 크게 설정하여 어느 방향 오버스크롤에도 대응 */
            top: -50%;
            left: -50%;
            width: 200%;
            height: 200%;
            background: linear-gradient(-45deg, var(--color-1), var(--color-2), var(--color-3), var(--color-2));
            background-size: 400% 400%;
            animation: gradientBG 15s ease infinite;
            z-index: -1;
            pointer-events: none;
        }

        body {
            margin: 0;
            padding: 0;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            min-height: 100dvh;
            color: var(--text-color);
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
            overflow-x: hidden;
            overflow-y: auto;
            position: relative;
            touch-action: manipulation;
            background: transparent;
            -webkit-overflow-scrolling: touch;
            /* 부드러운 스크롤 */
        }

        .container {
            flex: 1;
            display: flex;
            justify-content: center;
            align-items: center;
            text-align: center;
            width: 100%;
            perspective: 1000px;
            z-index: 10;
            padding: 20px;
        }

        h1 {
            font-size: clamp(3rem, 15vw, 8rem);
            margin: 0;
            font-weight: 900;
            color: #ffffff;
            cursor: pointer;
            user-select: none;
            text-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
            animation: rotateLoop 6s cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite;
            display: inline-block;
            will-change: transform;
            position: relative;
        }

        @keyframes rotateLoop {
            0% {
                transform: rotate(0deg);
            }

            35% {
                transform: rotate(0deg);
            }

            50% {
                transform: rotate(180deg);
            }

            85% {
                transform: rotate(180deg);
            }

            100% {
                transform: rotate(360deg);
            }
        }

        .clone {
            position: absolute;
            pointer-events: none;
            font-weight: 900;
            color: rgba(255, 255, 255, 0.9);
            font-size: clamp(1.2rem, 6vw, 3rem);
            white-space: nowrap;
            z-index: 5;
            text-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
            will-change: transform, opacity;
        }

        .clone-inner {
            display: inline-block;
            animation: rotateLoop 6s cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite;
        }

        @keyframes spawn {
            0% {
                opacity: 0;
                transform: translate(-50%, -50%) scale(0) rotate(var(--rot-start));
            }

            30% {
                opacity: 1;
                transform: translate(calc(-50% + var(--tx)), calc(-50% + var(--ty))) scale(1.1) rotate(var(--rot-mid));
            }

            100% {
                opacity: 0;
                transform: translate(calc(-50% + var(--tx) * 1.5), calc(-50% + var(--ty) - 100px)) scale(0.6) rotate(var(--rot-end));
            }
        }

        footer {
            width: 100%;
            padding: 20px;
            padding-bottom: calc(20px + env(safe-area-inset-bottom));
            text-align: center;
            font-size: 0.85rem;
            opacity: 0.7;
            z-index: 10;
            pointer-events: none;
            letter-spacing: 0.05em;
        }