/* Freesentation (본문용) */
        @font-face {
            font-family: 'Freesentation';
            src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/2404@1.0/Freesentation-4Regular.woff2') format('woff2');
            font-weight: 400;
            font-style: normal;
        }
        @font-face {
            font-family: 'Freesentation';
            src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/2404@1.0/Freesentation-5Medium.woff2') format('woff2');
            font-weight: 500;
            font-style: normal;
        }
        @font-face {
            font-family: 'Freesentation';
            src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/2404@1.0/Freesentation-7Bold.woff2') format('woff2');
            font-weight: 700;
            font-style: normal;
        }
        @font-face {
            font-family: 'Freesentation';
            src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/2404@1.0/Freesentation-9Black.woff2') format('woff2');
            font-weight: 900;
            font-style: normal;
        }

        /* Paperlogy (제목/포인트용) */
        @font-face {
            font-family: 'Paperlogy';
            src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-8ExtraBold.woff2') format('woff2');
            font-weight: 800;
            font-style: normal;
        }
        @font-face {
            font-family: 'Paperlogy';
            src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-7Bold.woff2') format('woff2');
            font-weight: 700;
            font-style: normal;
        }
        @font-face {
            font-family: 'Paperlogy';
            src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-5Medium.woff2') format('woff2');
            font-weight: 500;
            font-style: normal;
        }

        html, body {
            overflow-x: hidden;
            width: 100%;
            max-width: 100vw;
            margin: 0;
            padding: 0;
        }
        
        html {
            scroll-behavior: smooth;
        }

        body {
            font-family: 'Freesentation', sans-serif;
            color: #222;
            padding-bottom: 65px; 
            background-color: #f4f8fb;
        }
        @media (min-width: 768px) {
            body { padding-bottom: 0; }
        }

        .font-paperlogy { font-family: 'Paperlogy', sans-serif; }
        .font-pretendard { font-family: 'Pretendard', sans-serif; }

        /* Speech Bubbles CSS (Mobile First) */
        .bubble-left { position: relative; border-radius: 12px; }
        .bubble-left::after {
            content: ''; position: absolute; bottom: -16px; left: 40px;
            border-width: 16px 16px 0 0; border-style: solid; border-color: #ffffff transparent transparent transparent;
        }
        .bubble-right { position: relative; border-radius: 12px; }
        .bubble-right::after {
            content: ''; position: absolute; bottom: -16px; right: 40px;
            border-width: 16px 0 0 16px; border-style: solid; border-color: #ffffff transparent transparent transparent;
        }

        @media (min-width: 768px) {
            .bubble-left { border-radius: 30px; }
            .bubble-left::after { bottom: -20px; left: 100px; border-width: 20px 20px 0 0; }
            .bubble-right { border-radius: 30px; }
            .bubble-right::after { bottom: -20px; right: 100px; border-width: 20px 0 0 20px; }
        }

        /* 8각형(Octagon) 클립 패스 */
        .clip-octagon {
            clip-path: polygon(24px 0, calc(100% - 24px) 0, 100% 24px, 100% calc(100% - 24px), calc(100% - 24px) 100%, 24px 100%, 0 calc(100% - 24px), 0 24px);
        }

        /* 모바일 전용 클립 패스 최적화 */
        @media (max-width: 767px) {
            .clip-octagon {
                clip-path: polygon(16px 0, calc(100% - 16px) 0, 100% 16px, 100% calc(100% - 16px), calc(100% - 16px) 100%, 16px 100%, 0 calc(100% - 16px), 0 16px);
            }
        }
        
        /* 비활성화 된 슬라이드 닷 색상 커스텀 (요청 반영) */
        .bg-custom-gray {
            background-color: #8d8e91 !important;
        }

        /* Hide Scrollbar */
        .hide-scrollbar::-webkit-scrollbar { display: none; }
        .hide-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

        /* Infinite Marquee */
        @keyframes scroll-left { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }
        @keyframes scroll-right { 0% { transform: translateX(-50%); } 100% { transform: translateX(0); } }
        .animate-scroll-left { display: flex; width: max-content; animation: scroll-left 35s linear infinite; }
        .animate-scroll-right { display: flex; width: max-content; animation: scroll-right 40s linear infinite; }
        .animate-scroll-left:hover, .animate-scroll-right:hover { animation-play-state: paused; }

        /* Custom Animations (Intersection Observer Targets) */
        .reveal { opacity: 0; transform: translateY(30px); transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94); }
        .reveal.active { opacity: 1; transform: translateY(0); }

        .slide-in-left { opacity: 0; transform: translateX(-50px); transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94); }
        .slide-in-left.active { opacity: 1; transform: translateX(0); }

        .slide-in-right { opacity: 0; transform: translateX(50px); transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94); }
        .slide-in-right.active { opacity: 1; transform: translateX(0); }
        
        .fade-in { opacity: 0; transition: opacity 1s ease-in-out; }
        .fade-in.active { opacity: 1; }

        .scale-up { opacity: 0; transform: scale(0.9); transition: all 0.6s ease-out; }
        .scale-up.active { opacity: 1; transform: scale(1); }

        /* Delays */
        .delay-100 { transition-delay: 100ms; }
        .delay-200 { transition-delay: 200ms; }
        .delay-300 { transition-delay: 300ms; }
        .delay-400 { transition-delay: 400ms; }
        .delay-500 { transition-delay: 500ms; }
        .delay-600 { transition-delay: 600ms; }
        .delay-700 { transition-delay: 700ms; }
        .delay-800 { transition-delay: 800ms; }

        /* Baseball Flying Animation */
        .baseball { opacity: 0; }
        @keyframes fly-ball {
            0% { transform: translate(250px, 120px) scale(0.6); opacity: 0; }
            20% { opacity: 1; }
            100% { transform: translate(0, 0) scale(1); opacity: 1; }
        }
        @keyframes fly-ball-mobile {
            0% { transform: translate(150px, 60px) scale(0.6); opacity: 0; }
            20% { opacity: 1; }
            100% { transform: translate(0, 0) scale(0.8); opacity: 1; }
        }

        .ball-animate.active .baseball {
            animation: fly-ball 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
            animation-delay: 300ms;
        }
        @media (max-width: 767px) {
            .ball-animate.active .baseball {
                animation: fly-ball-mobile 1.2s ease-out forwards;
            }
        }

        /* Swiper Pagination Custom (무적의 라인업 모바일 전용) */
        .lineup-pagination .swiper-pagination-bullet {
            width: 32px !important;
            height: 6px !important;
            border-radius: 3px !important;
            background: rgba(255, 255, 255, 0.3) !important;
            opacity: 1 !important;
            margin: 0 4px !important;
            transition: all 0.3s !important;
        }
        .lineup-pagination .swiper-pagination-bullet-active {
            background: #00ffea !important;
            width: 48px !important;
        }

        /* Swiper Custom Pagination for Chat */
        .chat-pagination .swiper-pagination-bullet {
            width: 32px !important;
            height: 6px !important;
            border-radius: 3px !important;
            background: rgba(255, 255, 255, 0.3) !important;
            opacity: 1 !important;
            margin: 0 4px !important;
            transition: all 0.3s !important;
        }
        .chat-pagination .swiper-pagination-bullet-active {
            background: #00ffea !important;
            width: 48px !important;
        }
		
		

        /* Mobile Menu */
        #mobileMenu { visibility: hidden; }
        #mobileMenu.active { transform: translateX(0); visibility: visible; }
        #mobileMenuOverlay.active { opacity: 1; visibility: visible; pointer-events: auto; }

        /* Floating Center Button */
        #center-floating-btn {
            pointer-events: none;
            opacity: 0;
            transform: translate(-50%, 20px);
            transition: all 0.4s ease;
        }
        #center-floating-btn.visible {
            pointer-events: auto;
            opacity: 1;
            transform: translate(-50%, 0);
        }