/* WordPress Full Screen Override */
/* 워드프레스에서 전체 화면을 위한 강력한 스타일 */
html, body {
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 100vh !important;
    overflow-x: hidden !important;
    /* 스크롤바 숨김 통합 */
    -ms-overflow-style: none !important;
    scrollbar-width: none !important;
}

/* 워드프레스 컨테이너 무력화 - 강화된 버전 */
body.page, body.single, body.archive, body.home,
body.front-page, body.blog, body.category, body.tag,
.wp-site-blocks, .wp-block-group, .entry-content,
.site-main, .content-area, .site-content,
#main, #content, #primary, .container, .wrapper,
.content-wrap, .page-content, .post-content,
.elementor, .elementor-section, .elementor-container,
.et_pb_section, .et_pb_row, .et_pb_column,
.vc_row, .vc_column, .wpb_wrapper,
.fusion-fullwidth, .fusion-builder-row, .fusion-builder-column,
.wp-block-post-content, .entry-content > *,
.page > .site-main, .single > .site-main {
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    overflow: visible !important;
}

/* 워드프레스 헤더 아래 여백 완전 제거 */
.site-main::before,
.content-area::before,
#main::before,
#content::before,
#primary::before {
    display: none !important;
}

/* 워드프레스 기본 여백 스타일 무력화 */
.site-main,
.content-area,
#main,
#content,
#primary {
    padding-top: 0 !important;
    margin-top: 0 !important;
    border-top: none !important;
}

/* 워드프레스 테마의 기본 여백 제거 */
.wp-block-post-content, .wp-block-query-pagination,
.wp-block-post-navigation-link, .entry-header {
    margin: 0 !important;
    padding: 0 !important;
}

/* 추가 여백 제거 */
.entry-title,
.post-thumbnail,
.page-content::before,
.entry-content::before {
    margin: 0 !important;
    padding: 0 !important;
    display: none !important;
}

/* 워드프레스 테마별 특수 여백 제거 */
/* Twenty Twenty-X 테마 */
.site-content > *:first-child,
.wp-site-blocks > *:first-child {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* Astra 테마 */
.ast-container,
.ast-separate-container .site-content > .ast-container {
    padding-top: 0 !important;
    margin-top: 0 !important;
}

/* GeneratePress 테마 */
.site-content {
    padding-top: 0 !important;
    margin-top: 0 !important;
}

/* OceanWP 테마 */
.content-area,
#content-wrap {
    padding-top: 0 !important;
    margin-top: 0 !important;
}

/* Kadence 테마 */
.content-wrap {
    padding-top: 0 !important;
    margin-top: 0 !important;
}

/* 범용 여백 제거 - 모든 가능한 워드프레스 컨테이너 */
body[class*="page"] .site-main,
body[class*="single"] .site-main,
body[class*="archive"] .site-main,
body[class*="home"] .site-main,
div[class*="content"] > *:first-child,
div[class*="main"] > *:first-child,
section[class*="content"] > *:first-child {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* 강력한 여백 제거 - 최후의 수단 */
* + .snap-container,
*:has(.snap-container) {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* 푸터 관련 여백 완전 제거 */
.snap-container + *,
.snap-container + .site-footer,
.snap-container + footer,
.snap-container + #colophon {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* 푸터 앞 여백 제거 */
* + .site-footer,
* + footer,
* + #colophon,
* + .main-footer {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* 워드프레스 헤더와 푸터는 유지하되 z-index 조정 */
.site-header, header, #masthead, .main-header {
    position: relative !important;
    z-index: 1000000 !important;
    background: inherit !important;
    margin-bottom: 0 !important;
}

/* 푸터는 기본적으로 숨기고 마지막 섹션에서만 표시 */
.site-footer, footer, #colophon, .main-footer {
    position: relative !important;
    z-index: 1000000 !important;
    background: inherit !important;
    margin-top: 0 !important;
    padding-top: 0 !important;
    display: none !important;
    transition: all 0.3s ease !important;
}

/* 마지막 섹션이 활성화될 때 푸터 표시 */
body.last-section-active .site-footer,
body.last-section-active footer,
body.last-section-active #colophon,
body.last-section-active .main-footer {
    display: block !important;
}

/* 워드프레스에서 메인 컨텐츠 영역 전체 화면 활용 */
.wp-site-blocks > *:not(.site-header):not(.site-footer):not(header):not(footer):not(#masthead):not(#colophon) {
    position: relative !important;
    z-index: 999999 !important;
}

/* 워드프레스 Admin Bar 처리 */
#wpadminbar {
    z-index: 1000001 !important;
}

/* 로그인 상태에서 admin bar가 있는 경우 */
body.admin-bar .snap-container {
    top: 32px !important;
    height: calc(100vh - 32px) !important;
    min-height: calc(100vh - 32px) !important;
}

@media screen and (max-width: 782px) {
    body.admin-bar .snap-container {
        top: 46px !important;
        height: calc(100vh - 46px) !important;
        min-height: calc(100vh - 46px) !important;
    }
}

/* 추가 워드프레스 테마 클래스 무력화 */
.elementor, .elementor-widget, .elementor-container,
.vc_row, .vc_column, .wpb_wrapper,
.fusion-builder-column, .fusion-column-wrapper,
.et_pb_section, .et_pb_row, .et_pb_column {
    margin: 0 !important;
    padding: 0 !important;
}

/* 전체 화면 강제 적용을 위한 최종 스타일 */
body > div:first-child:has(.snap-container),
.wp-site-blocks:has(.snap-container) {
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
    height: 100% !important;
}

/* Reset and Base Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    /* Color Variables */
    --bg-primary: #000000;
    --bg-secondary: #111111;
    --bg-card: #1a1a1a;
    --text-primary: #ffffff;
    --text-secondary: #d1d5db;
    --text-muted: #9ca3af;
    --purple-400: #c084fc;
    --purple-500: #a855f7;
    --purple-600: #9333ea;
    --purple-700: #7c3aed;
    --purple-800: #6b21a8;
    --purple-900: #581c87;
    --gray-800: #1f2937;
    --gray-900: #111827;
    
    /* Spacing */
    --container-padding: 1rem;
    --section-padding: 4rem 0;
    
    /* Animation - 더 빠르고 부드러운 전환 */
    --transition: all 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    --bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
    --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
}

/* Typography */
body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
    background-color: var(--bg-primary) !important;
    color: var(--text-primary) !important;
    line-height: 1.6 !important;
    overflow-x: hidden !important;
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 100vh !important;
}

/* Smooth Scrolling */
html {
    scroll-behavior: smooth !important;
    scroll-padding-top: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 100vh !important;
}



/* 스크롤바 숨기기 - 모든 브라우저 지원 (WebKit 전용) */
::-webkit-scrollbar {
    display: none;
}

/* Snap Container 전용 스크롤바 숨김 */
.snap-container::-webkit-scrollbar {
    display: none;
}

/* Snap Container - 스크롤바 숨김 + 데스크톱과 모바일 다른 동작 */
.snap-container {
    -ms-overflow-style: none;
    scrollbar-width: none;
    scroll-snap-type: y proximity !important; /* 기본값을 proximity로 변경 */
    height: calc(100vh - var(--wp-header-height, 0px) - var(--wp-footer-height, 0px)) !important;
    min-height: calc(100vh - var(--wp-header-height, 0px) - var(--wp-footer-height, 0px)) !important;
    overflow-y: scroll !important;
    scroll-behavior: smooth !important;
    -webkit-overflow-scrolling: touch !important;
    position: relative !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    z-index: 999999 !important;
    /* 부드러운 스크롤을 위한 추가 속성 */
    scroll-padding-top: 0 !important;
    overscroll-behavior: none !important;
}

/* 워드프레스 환경에서 전체 화면 모드 - 강화된 버전 */
@media screen {
    .snap-container {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        height: 100vh !important;
        min-height: 100vh !important;
        z-index: 999999 !important;
    }
    
    /* 헤더가 있는 경우 - 헤더 바로 아래 딱 붙도록 수정 */
    body:has(.site-header) .snap-container,
    body:has(header) .snap-container,
    body:has(#masthead) .snap-container,
    body:has(.main-header) .snap-container {
        position: relative !important;
        top: 0 !important;
        margin-top: 0 !important;
        height: calc(100vh - var(--header-height, 80px)) !important;
        min-height: calc(100vh - var(--header-height, 80px)) !important;
    }
    
    /* 워드프레스에서 스크롤 컨테이너가 없는 경우 body 사용 */
    body.no-snap-container {
        scroll-behavior: smooth !important;
        scroll-snap-type: y proximity !important;
    }
    
    body.no-snap-container .snap-section {
        scroll-snap-align: start !important;
        min-height: 100vh !important;
    }
}

/* 헤더 직후 여백 완전 제거 */
.site-header + *,
header + *,
#masthead + *,
.main-header + * {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* 워드프레스 페이지 컨텐츠 여백 제거 */
.page .site-main,
.single .site-main,
.archive .site-main,
.home .site-main {
    padding-top: 0 !important;
    margin-top: 0 !important;
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
}

/* 페이지 끝부분 여백 제거 */
.site-main,
.content-area,
#main,
#content,
#primary {
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
}

/* 워드프레스 컨텐츠 끝부분 여백 제거 */
.entry-content,
.page-content,
.post-content {
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
}

/* 마지막 섹션 아래 여백 제거 - 강화된 버전 */
.snap-section:last-child,
.pricing-section,
.snap-section[data-section="4"] {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
    border-bottom: none !important;
}

/* 마지막 섹션의 마지막 요소만 하단 여백 제거 (내부 간격은 유지) */
.pricing-section > *:last-child,
.snap-section:last-child > *:last-child,
.snap-section[data-section="4"] > *:last-child {
    margin-bottom: 0 !important;
}

/* pricing 섹션의 마지막 요소만 하단 여백 제거 */
.pricing-section .cta-buttons {
    margin-bottom: 0 !important; /* CTA 버튼은 마지막 요소이므로 하단 여백 제거 */
}

.pricing-section .container {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

/* 워드프레스 테마별 푸터 앞 여백 제거 */
/* Twenty Twenty-X 테마 */
.wp-site-blocks::after,
.site-content::after {
    display: none !important;
}

/* Astra 테마 */
.ast-separate-container .site-content,
.ast-container {
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
}

/* GeneratePress 테마 */
.site-content,
.inside-article {
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
}

/* OceanWP 테마 */
#content-wrap,
.content-area {
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
}

/* Kadence 테마 */
.content-wrap,
.entry-content-wrap {
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
}

/* 범용 푸터 앞 여백 제거 */
body > *:last-of-type:not(.site-footer):not(footer):not(#colophon),
div[class*="content"] > *:last-child,
div[class*="main"] > *:last-child,
section[class*="content"] > *:last-child {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

/* 워드프레스 컨텐츠와 푸터 사이 간격 제거 */
.wp-site-blocks,
.site-content,
#content {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

/* 추가 여백 제거 요소들 */
.page-content::after,
.entry-content::after,
.post-content::after,
.site-main::after,
.content-area::after {
    display: none !important;
}

/* 마지막 섹션과 푸터 사이 여백 완전 제거 - 최강 버전 */
.snap-container::after,
.pricing-section::after,
.snap-section:last-child::after {
    display: none !important;
}

/* 워드프레스에서 자동으로 추가되는 여백 제거 */
.pricing-section + *:not(.site-footer):not(footer):not(#colophon),
.snap-section:last-child + *:not(.site-footer):not(footer):not(#colophon) {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* 마지막 섹션의 모든 자식 요소 하단 여백 강제 제거 */
.pricing-section > *:last-child,
.pricing-section .container > *:last-child,
.snap-section:last-child > *:last-child,
.snap-section:last-child .container > *:last-child {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

/* 절대적 여백 제거 - 모든 가능성 차단 */
body:last-child .pricing-section,
html:last-child body:last-child .pricing-section {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

/* 최종 여백 제거 - 강제 방법들 */
/* 마지막 섹션을 푸터에 바로 붙이기 */
.pricing-section {
    position: relative !important;
    z-index: 999998 !important;
}

/* 워드프레스 컨테이너들의 마지막 여백 강제 제거 */
body > *:has(.pricing-section),
.wp-site-blocks:has(.pricing-section),
.site-content:has(.pricing-section),
#content:has(.pricing-section),
.content-area:has(.pricing-section) {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

/* 마지막 섹션 다음에 오는 모든 빈 공간 제거 */
.pricing-section ~ *:empty,
.snap-section:last-child ~ *:empty {
    display: none !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* 최후의 수단 - negative margin으로 푸터를 위로 당기기 */
.site-footer,
footer,
#colophon {
    margin-top: -1px !important;
}

.snap-section {
    scroll-snap-align: start;
    scroll-snap-stop: normal;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    animation: fadeInUp 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94), opacity 0.3s ease;
    padding: 3rem 0; /* 상하 여백 추가 */
}

/* 2, 3, 4번째 섹션을 화면 중앙에 위치 - 뷰포트 단위 적용 */
.movement-section,
.jumprope-section,
.game-section {
    min-height: 100vh;
    align-items: center;
    justify-content: center;
    padding: clamp(1rem, 3vh, 4rem) 0;
}

/* Container */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 var(--container-padding);
    width: 100%;
}

/* 조화로운 레이아웃을 위한 섹션별 컨테이너 조정 - 뷰포트 단위 적용 */
.movement-section .container,
.jumprope-section .container,
.game-section .container,
.pricing-section .container {
    max-width: clamp(300px, 85vw, 1000px);
    padding: clamp(1rem, 3vh, 3rem) clamp(1rem, 3vw, 2rem);
}

/* 컨텐츠가 조화롭게 보이도록 조정 (위에서 이미 정의됨) */

/* Animations - 더 빠르고 부드러운 애니메이션 */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* 부드러운 섹션 전환을 위한 추가 애니메이션 */
@keyframes slideIn {
    from {
        opacity: 0;
        transform: translateY(15px) scale(0.98);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes bounce {
    0%, 20%, 50%, 80%, 100% {
        transform: translateY(0);
    }
    40% {
        transform: translateY(-10px);
    }
    60% {
        transform: translateY(-5px);
    }
}

@keyframes pulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.5;
    }
}

/* Hero Section */
.hero-section {
    background: 
        linear-gradient(135deg, rgba(17, 24, 39, 0.7) 0%, rgba(76, 29, 149, 0.9) 100%),
        url('https://www.formmarker.com/wp-content/uploads/2024/10/s_Your-movements-speak-louder-than-words.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    position: relative;
    overflow: hidden;
}

.bg-grid-pattern {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: radial-gradient(circle, var(--purple-600) 1px, transparent 1px);
    background-size: 20px 20px;
    opacity: 0.05;
}

/* AI & 스포츠 비주얼 효과 */
.ai-visual-container {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    overflow: hidden;
    z-index: 1;
}

/* AI 뉴럴 네트워크 */
.neural-network {
    position: absolute;
    top: 10%;
    right: 5%;
    width: 400px;
    height: 200px;
    opacity: 0.7;
}

.neural-layer {
    position: absolute;
    display: flex;
    flex-direction: column;
    gap: 15px;
    justify-content: center;
    height: 100%;
}

.neural-layer.input-layer {
    left: 0;
}

.neural-layer.hidden-layer {
    left: 50%;
    transform: translateX(-50%);
}

.neural-layer.output-layer {
    right: 0;
}

.neuron {
    width: 12px;
    height: 12px;
    background: radial-gradient(circle, var(--purple-400) 0%, var(--purple-600) 100%);
    border-radius: 50%;
    position: relative;
    animation: neuronPulse 2s ease-in-out infinite;
    box-shadow: 0 0 15px rgba(139, 92, 246, 0.6);
}

.neuron::after {
    content: '';
    position: absolute;
    top: -4px;
    left: -4px;
    right: -4px;
    bottom: -4px;
    border-radius: 50%;
    background: radial-gradient(circle, transparent 60%, rgba(139, 92, 246, 0.3) 70%, transparent 80%);
    animation: neuronRipple 2s ease-in-out infinite;
}

.neural-connections {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.connection {
    stroke: var(--purple-500);
    stroke-width: 1.5;
    opacity: 0.6;
    animation: connectionFlow 3s ease-in-out infinite;
}

@keyframes neuronPulse {
    0%, 100% { transform: scale(1); opacity: 0.7; }
    50% { transform: scale(1.2); opacity: 1; }
}

@keyframes neuronRipple {
    0% { transform: scale(0.8); opacity: 0; }
    50% { transform: scale(1.2); opacity: 0.5; }
    100% { transform: scale(1.5); opacity: 0; }
}

@keyframes connectionFlow {
    0% { stroke-dasharray: 0 20; stroke-dashoffset: 0; }
    50% { stroke-dasharray: 10 10; stroke-dashoffset: -10; }
    100% { stroke-dasharray: 0 20; stroke-dashoffset: -20; }
}

/* 스포츠 동작 추적 */
.motion-tracking {
    position: absolute;
    top: 20%;
    left: 2%;
    width: 300px;
    height: 400px;
    opacity: 0.6;
}

.body-skeleton {
    position: relative;
    width: 100%;
    height: 100%;
}

.joint {
    position: absolute;
    width: 8px;
    height: 8px;
    background: radial-gradient(circle, var(--cyan-400) 0%, var(--cyan-600) 100%);
    border-radius: 50%;
    box-shadow: 0 0 10px rgba(34, 211, 238, 0.8);
    animation: jointMove 4s ease-in-out infinite;
}

/* 관절 위치 */
.joint.head { top: 10%; left: 50%; transform: translateX(-50%); }
.joint.shoulder-left { top: 25%; left: 35%; }
.joint.shoulder-right { top: 25%; right: 35%; }
.joint.elbow-left { top: 40%; left: 25%; }
.joint.elbow-right { top: 40%; right: 25%; }
.joint.wrist-left { top: 55%; left: 15%; }
.joint.wrist-right { top: 55%; right: 15%; }
.joint.hip-left { top: 50%; left: 42%; }
.joint.hip-right { top: 50%; right: 42%; }
.joint.knee-left { top: 70%; left: 38%; }
.joint.knee-right { top: 70%; right: 38%; }
.joint.ankle-left { top: 87%; left: 34%; }
.joint.ankle-right { top: 87%; right: 34%; }

.skeleton-connections {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0.4;
}

.bone {
    stroke: var(--cyan-500);
    stroke-width: 2;
    opacity: 0.7;
    animation: boneGlow 3s ease-in-out infinite;
}

@keyframes jointMove {
    0%, 100% { transform: scale(1) translateX(-50%); }
    25% { transform: scale(1.1) translateX(-48%) translateY(-2px); }
    50% { transform: scale(1.05) translateX(-52%) translateY(1px); }
    75% { transform: scale(1.1) translateX(-48%) translateY(-1px); }
}

@keyframes boneGlow {
    0%, 100% { stroke-opacity: 0.4; filter: drop-shadow(0 0 3px rgba(34, 211, 238, 0.3)); }
    50% { stroke-opacity: 0.8; filter: drop-shadow(0 0 8px rgba(34, 211, 238, 0.6)); }
}



/* AI 파티클 효과 */
.ai-particles {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    z-index: 5;
    overflow: hidden;
}



.particle {
    position: absolute !important;
    width: 8px !important;
    height: 8px !important;
    background: radial-gradient(circle, #ffffff 20%, #e0e7ff 40%, #c084fc 70%, #a855f7 90%, transparent 100%) !important;
    border-radius: 50% !important;
    opacity: 0;
    transform: translateY(110vh);
    box-shadow: 
        0 0 20px rgba(255, 255, 255, 0.6), 
        0 0 15px rgba(192, 132, 252, 0.8),
        0 0 8px rgba(168, 85, 247, 0.9) !important;
    will-change: transform, opacity !important;
    z-index: 10 !important;

}

.particle:nth-child(1) { left: 12% !important; animation: bubbleFloat 6s linear 1 forwards, sparkle 6s ease-in-out 1 forwards !important; animation-delay: 0s, 0s !important; }
.particle:nth-child(2) { left: 78% !important; animation: bubbleFloat 6s linear 1 forwards, sparkle 6s ease-in-out 1 forwards !important; animation-delay: 0.2s, 0.2s !important; }
.particle:nth-child(3) { left: 35% !important; animation: bubbleFloat 6s linear 1 forwards, sparkle 6s ease-in-out 1 forwards !important; animation-delay: 0.4s, 0.4s !important; }
.particle:nth-child(4) { left: 65% !important; animation: bubbleFloat 6s linear 1 forwards, sparkle 6s ease-in-out 1 forwards !important; animation-delay: 0.6s, 0.6s !important; }
.particle:nth-child(5) { left: 25% !important; animation: bubbleFloat 6s linear 1 forwards, sparkle 6s ease-in-out 1 forwards !important; animation-delay: 0.8s, 0.8s !important; }
.particle:nth-child(6) { left: 85% !important; animation: bubbleFloat 6s linear 1 forwards, sparkle 6s ease-in-out 1 forwards !important; animation-delay: 1s, 1s !important; }
.particle:nth-child(7) { left: 45% !important; animation: bubbleFloat 6s linear 1 forwards, sparkle 6s ease-in-out 1 forwards !important; animation-delay: 1.2s, 1.2s !important; }
.particle:nth-child(8) { left: 8% !important; animation: bubbleFloat 6s linear 1 forwards, sparkle 6s ease-in-out 1 forwards !important; animation-delay: 1.4s, 1.4s !important; }
.particle:nth-child(9) { left: 92% !important; animation: bubbleFloat 6s linear 1 forwards, sparkle 6s ease-in-out 1 forwards !important; animation-delay: 1.6s, 1.6s !important; }
.particle:nth-child(10) { left: 55% !important; animation: bubbleFloat 6s linear 1 forwards, sparkle 6s ease-in-out 1 forwards !important; animation-delay: 1.8s, 1.8s !important; }
.particle:nth-child(11) { left: 18% !important; animation: bubbleFloat 6s linear 1 forwards, sparkle 6s ease-in-out 1 forwards !important; animation-delay: 2s, 2s !important; }
.particle:nth-child(12) { left: 72% !important; animation: bubbleFloat 6s linear 1 forwards, sparkle 6s ease-in-out 1 forwards !important; animation-delay: 2.2s, 2.2s !important; }
.particle:nth-child(13) { left: 38% !important; animation: bubbleFloat 6s linear 1 forwards, sparkle 6s ease-in-out 1 forwards !important; animation-delay: 2.4s, 2.4s !important; }
.particle:nth-child(14) { left: 82% !important; animation: bubbleFloat 6s linear 1 forwards, sparkle 6s ease-in-out 1 forwards !important; animation-delay: 2.6s, 2.6s !important; }
.particle:nth-child(15) { left: 28% !important; animation: bubbleFloat 6s linear 1 forwards, sparkle 6s ease-in-out 1 forwards !important; animation-delay: 2.8s, 2.8s !important; }
.particle:nth-child(16) { left: 68% !important; animation: bubbleFloat 6s linear 1 forwards, sparkle 6s ease-in-out 1 forwards !important; animation-delay: 3s, 3s !important; }
.particle:nth-child(17) { left: 15% !important; animation: bubbleFloat 6s linear 1 forwards, sparkle 6s ease-in-out 1 forwards !important; animation-delay: 3.2s, 3.2s !important; }
.particle:nth-child(18) { left: 88% !important; animation: bubbleFloat 6s linear 1 forwards, sparkle 6s ease-in-out 1 forwards !important; animation-delay: 3.4s, 3.4s !important; }
.particle:nth-child(19) { left: 22% !important; animation: bubbleFloat 6s linear 1 forwards, sparkle 6s ease-in-out 1 forwards !important; animation-delay: 3.6s, 3.6s !important; }
.particle:nth-child(20) { left: 77% !important; animation: bubbleFloat 6s linear 1 forwards, sparkle 6s ease-in-out 1 forwards !important; animation-delay: 3.8s, 3.8s !important; }
.particle:nth-child(21) { left: 41% !important; animation: bubbleFloat 6s linear 1 forwards, sparkle 6s ease-in-out 1 forwards !important; animation-delay: 4s, 4s !important; }
.particle:nth-child(22) { left: 6% !important; animation: bubbleFloat 6s linear 1 forwards, sparkle 6s ease-in-out 1 forwards !important; animation-delay: 4.2s, 4.2s !important; }
.particle:nth-child(23) { left: 93% !important; animation: bubbleFloat 6s linear 1 forwards, sparkle 6s ease-in-out 1 forwards !important; animation-delay: 4.4s, 4.4s !important; }
.particle:nth-child(24) { left: 56% !important; animation: bubbleFloat 6s linear 1 forwards, sparkle 6s ease-in-out 1 forwards !important; animation-delay: 4.6s, 4.6s !important; }
.particle:nth-child(25) { left: 19% !important; animation: bubbleFloat 6s linear 1 forwards, sparkle 6s ease-in-out 1 forwards !important; animation-delay: 4.8s, 4.8s !important; }
.particle:nth-child(26) { left: 84% !important; animation: bubbleFloat 6s linear 1 forwards, sparkle 6s ease-in-out 1 forwards !important; animation-delay: 5s, 5s !important; }
.particle:nth-child(27) { left: 31% !important; animation: bubbleFloat 6s linear 1 forwards, sparkle 6s ease-in-out 1 forwards !important; animation-delay: 5.2s, 5.2s !important; }
.particle:nth-child(28) { left: 69% !important; animation: bubbleFloat 6s linear 1 forwards, sparkle 6s ease-in-out 1 forwards !important; animation-delay: 5.4s, 5.4s !important; }
.particle:nth-child(29) { left: 13% !important; animation: bubbleFloat 6s linear 1 forwards, sparkle 6s ease-in-out 1 forwards !important; animation-delay: 5.6s, 5.6s !important; }
.particle:nth-child(30) { left: 91% !important; animation: bubbleFloat 6s linear 1 forwards, sparkle 6s ease-in-out 1 forwards !important; animation-delay: 5.8s, 5.8s !important; }
.particle:nth-child(31) { left: 47% !important; animation: bubbleFloat 6s linear 1 forwards, sparkle 6s ease-in-out 1 forwards !important; animation-delay: 6s, 6s !important; }
.particle:nth-child(32) { left: 24% !important; animation: bubbleFloat 6s linear 1 forwards, sparkle 6s ease-in-out 1 forwards !important; animation-delay: 6.2s, 6.2s !important; }
.particle:nth-child(33) { left: 76% !important; animation: bubbleFloat 6s linear 1 forwards, sparkle 6s ease-in-out 1 forwards !important; animation-delay: 6.4s, 6.4s !important; }
.particle:nth-child(34) { left: 39% !important; animation: bubbleFloat 6s linear 1 forwards, sparkle 6s ease-in-out 1 forwards !important; animation-delay: 6.6s, 6.6s !important; }
.particle:nth-child(35) { left: 86% !important; animation: bubbleFloat 6s linear 1 forwards, sparkle 6s ease-in-out 1 forwards !important; animation-delay: 6.8s, 6.8s !important; }
.particle:nth-child(36) { left: 9% !important; animation: bubbleFloat 6s linear 1 forwards, sparkle 6s ease-in-out 1 forwards !important; animation-delay: 7s, 7s !important; }
.particle:nth-child(37) { left: 52% !important; animation: bubbleFloat 6s linear 1 forwards, sparkle 6s ease-in-out 1 forwards !important; animation-delay: 7.2s, 7.2s !important; }
.particle:nth-child(38) { left: 17% !important; animation: bubbleFloat 6s linear 1 forwards, sparkle 6s ease-in-out 1 forwards !important; animation-delay: 7.4s, 7.4s !important; }
.particle:nth-child(39) { left: 79% !important; animation: bubbleFloat 6s linear 1 forwards, sparkle 6s ease-in-out 1 forwards !important; animation-delay: 7.6s, 7.6s !important; }
.particle:nth-child(40) { left: 34% !important; animation: bubbleFloat 6s linear 1 forwards, sparkle 6s ease-in-out 1 forwards !important; animation-delay: 7.8s, 7.8s !important; }
.particle:nth-child(41) { left: 67% !important; animation: bubbleFloat 6s linear 1 forwards, sparkle 6s ease-in-out 1 forwards !important; animation-delay: 8s, 8s !important; }
.particle:nth-child(42) { left: 11% !important; animation: bubbleFloat 6s linear 1 forwards, sparkle 6s ease-in-out 1 forwards !important; animation-delay: 8.2s, 8.2s !important; }
.particle:nth-child(43) { left: 89% !important; animation: bubbleFloat 6s linear 1 forwards, sparkle 6s ease-in-out 1 forwards !important; animation-delay: 8.4s, 8.4s !important; }
.particle:nth-child(44) { left: 43% !important; animation: bubbleFloat 6s linear 1 forwards, sparkle 6s ease-in-out 1 forwards !important; animation-delay: 8.6s, 8.6s !important; }
.particle:nth-child(45) { left: 26% !important; animation: bubbleFloat 6s linear 1 forwards, sparkle 6s ease-in-out 1 forwards !important; animation-delay: 8.8s, 8.8s !important; }
.particle:nth-child(46) { left: 74% !important; animation: bubbleFloat 6s linear 1 forwards, sparkle 6s ease-in-out 1 forwards !important; animation-delay: 9s, 9s !important; }
.particle:nth-child(47) { left: 58% !important; animation: bubbleFloat 6s linear 1 forwards, sparkle 6s ease-in-out 1 forwards !important; animation-delay: 9.2s, 9.2s !important; }
.particle:nth-child(48) { left: 4% !important; animation: bubbleFloat 6s linear 1 forwards, sparkle 6s ease-in-out 1 forwards !important; animation-delay: 9.4s, 9.4s !important; }
.particle:nth-child(49) { left: 81% !important; animation: bubbleFloat 6s linear 1 forwards, sparkle 6s ease-in-out 1 forwards !important; animation-delay: 9.6s, 9.6s !important; }
.particle:nth-child(50) { left: 37% !important; animation: bubbleFloat 6s linear 1 forwards, sparkle 6s ease-in-out 1 forwards !important; animation-delay: 9.8s, 9.8s !important; }

@keyframes bubbleFloat {
    0% { 
        transform: translateY(110vh) translateX(0px) scale(0.4); 
        opacity: 0; 
        filter: brightness(0.6);
    }
    8% { 
        opacity: 0.4; 
        transform: translateY(95vh) translateX(2px) scale(0.5);
        filter: brightness(0.8);
    }
    16% { 
        opacity: 0.6; 
        transform: translateY(80vh) translateX(-3px) scale(0.6);
        filter: brightness(0.9);
    }
    24% { 
        opacity: 0.8; 
        transform: translateY(65vh) translateX(4px) scale(0.7);
        filter: brightness(1.1);
    }
    32% { 
        opacity: 0.9; 
        transform: translateY(50vh) translateX(-2px) scale(0.8);
        filter: brightness(1.3);
    }
    40% { 
        opacity: 1; 
        transform: translateY(35vh) translateX(3px) scale(0.9);
        filter: brightness(1.5);
    }
    48% { 
        opacity: 1; 
        transform: translateY(20vh) translateX(-1px) scale(1.0);
        filter: brightness(1.6);
    }
    56% { 
        opacity: 1; 
        transform: translateY(10vh) translateX(1px) scale(1.1);
        filter: brightness(1.4);
    }
    64% { 
        opacity: 1; 
        transform: translateY(5vh) translateX(-1px) scale(1.0);
        filter: brightness(1.2);
    }
    72% { 
        opacity: 0.9; 
        transform: translateY(2vh) translateX(1px) scale(0.9);
        filter: brightness(1.0);
    }
    80% { 
        opacity: 0.7; 
        transform: translateY(0vh) translateX(0px) scale(0.8);
        filter: brightness(0.8);
    }
    88% { 
        opacity: 0.4; 
        transform: translateY(-2vh) translateX(0px) scale(0.6);
        filter: brightness(0.6);
    }
    96% { 
        opacity: 0.1; 
        transform: translateY(-4vh) translateX(0px) scale(0.4);
        filter: brightness(0.4);
    }
    100% { 
        transform: translateY(-5vh) translateX(0px) scale(0.2); 
        opacity: 0; 
        filter: brightness(0.3);
    }
}

/* 부드러운 반짝이는 효과 애니메이션 */
@keyframes sparkle {
    0%, 100% { 
        box-shadow: 
            0 0 20px rgba(255, 255, 255, 0.5), 
            0 0 15px rgba(192, 132, 252, 0.7),
            0 0 8px rgba(168, 85, 247, 0.9);
    }
    20% { 
        box-shadow: 
            0 0 25px rgba(255, 255, 255, 0.7), 
            0 0 20px rgba(192, 132, 252, 0.9),
            0 0 12px rgba(168, 85, 247, 1);
    }
    50% { 
        box-shadow: 
            0 0 30px rgba(255, 255, 255, 0.9), 
            0 0 25px rgba(192, 132, 252, 1),
            0 0 15px rgba(168, 85, 247, 1);
    }
    80% { 
        box-shadow: 
            0 0 25px rgba(255, 255, 255, 0.7), 
            0 0 20px rgba(192, 132, 252, 0.9),
            0 0 12px rgba(168, 85, 247, 1);
    }
}

/* 반응형 조정 */
@media (max-width: 1200px) {
    .neural-network {
        width: 300px;
        right: 2%;
    }
    
    .motion-tracking {
        width: 250px;
        height: 350px;
    }
}

@media (max-width: 768px) {
    .neural-network,
    .motion-tracking {
        display: none;
    }
    
    .ai-particles {
        opacity: 1;
        z-index: 8;
    }
    
    .particle {
        width: 6px !important;
        height: 6px !important;
        background: radial-gradient(circle, #ffffff 20%, #e0e7ff 40%, #c084fc 70%, #a855f7 90%, transparent 100%) !important;
        opacity: 0;
        transform: translateY(110vh);
        box-shadow: 
            0 0 15px rgba(255, 255, 255, 0.5), 
            0 0 10px rgba(192, 132, 252, 0.7),
            0 0 5px rgba(168, 85, 247, 0.8) !important;
    }
    
    /* Hero Section 모바일 최적화 */
    .hero-section {
        background-attachment: scroll; /* 모바일에서 fixed 제거 */
        background: 
            linear-gradient(135deg, rgba(17, 24, 39, 0.85) 0%, rgba(76, 29, 149, 0.75) 100%),
            url('https://www.formmarker.com/wp-content/uploads/2024/10/s_Your-movements-speak-louder-than-words.jpg');
        background-size: cover;
        background-position: center top;
        background-repeat: no-repeat;
    }
}

.hero-content {
    text-align: center;
    position: relative;
    z-index: 10;
    max-width: 64rem;
    margin: 0 auto;
}

.hero-title {
    font-size: 3rem;
    font-weight: 800;
    line-height: 1.1;
    margin-bottom: 1.5rem;
    color: white !important;
}

.hero-title-accent {
    color: var(--purple-400);
    display: block;
}

.hero-description {
    font-size: 1.25rem;
    color: var(--text-secondary);
    margin-bottom: 2rem;
    line-height: 1.6;
}

.hero-buttons {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    align-items: center;
}

/* Scroll Mouse */
.scroll-mouse {
    position: absolute;
    bottom: 2rem;
    left: 50%;
    transform: translateX(-50%);
    width: 24px;
    height: 40px;
    border: 2px solid var(--purple-400);
    border-radius: 12px;
    display: flex;
    justify-content: center;
    animation: bounce 2s infinite;
}

.scroll-mouse-inner {
    width: 4px;
    height: 12px;
    background: var(--purple-400);
    border-radius: 2px;
    margin-top: 8px;
    animation: pulse 2s infinite;
}

/* Buttons */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.75rem 2rem;
    border-radius: 8px;
    font-size: 1rem;
    font-weight: 600;
    text-decoration: none;
    border: none;
    cursor: pointer;
    transition: var(--transition);
    min-width: 200px;
}

.btn-icon {
    width: 20px;
    height: 20px;
    margin-right: 0.5rem;
}

.btn-primary {
    background: var(--purple-600);
    color: white;
}

.btn-primary:hover {
    background: var(--purple-700);
    transform: translateY(-2px);
}

.btn-outline {
    background: transparent;
    color: var(--purple-400);
    border: 2px solid var(--purple-400);
}

.btn-outline:hover {
    background: var(--purple-400);
    color: white;
}

.btn-large {
    padding: 1rem 2rem;
    font-size: 1.125rem;
}

/* Movement Section */
.movement-section {
    background: var(--bg-primary);
}

.section-header {
    text-align: center;
    margin-bottom: clamp(2rem, 5vh, 4rem);
    max-width: clamp(300px, 80vw, 800px);
    margin-left: auto;
    margin-right: auto;
}

.section-title {
    font-size: clamp(1.8rem, 4vw, 3rem);
    font-weight: 800;
    margin-bottom: clamp(1rem, 2vh, 2rem);
    color: white !important;
}

.section-description {
    font-size: clamp(1rem, 2vw, 1.4rem);
    color: var(--text-secondary);
    max-width: clamp(300px, 75vw, 48rem);
    margin: 0 auto;
    line-height: 1.6;
}

/* Demo Video Container - Movement Master용 넓은 크기 - 뷰포트 단위 적용 */
.demo-video-container {
    display: flex;
    justify-content: center;
    margin-bottom: clamp(1.5rem, 3vh, 3rem);
    max-width: clamp(300px, 80vw, 900px);
    margin-left: auto;
    margin-right: auto;
    width: 100%;
}

/* Movement Master 섹션의 데모 영상 특별 스타일 */
.movement-section .demo-video-container {
    max-width: clamp(350px, 85vw, 1000px);
}

.movement-section .video-frame {
    aspect-ratio: 16/9;
    box-shadow: 0 8px 25px rgba(139, 92, 246, 0.3);
    border: 2px solid rgba(139, 92, 246, 0.4);
}

.movement-section .demo-video-wrapper {
    max-width: 100%; /* 영상이 컨테이너를 가득 채우도록 */
}

/* Jump Rope Master 섹션의 demo-video-wrapper */
.jumprope-video-section .demo-video-wrapper {
    max-width: none; /* 크기 제한 제거 */
    width: auto; /* 영상 크기에 맞춰 조정 */
    display: flex;
    flex-direction: column; /* 세로 배치로 변경 */
    justify-content: center;
    align-items: center;
}

.demo-video-wrapper {
    max-width: 28rem;
    width: 100%;
    background: linear-gradient(135deg, var(--purple-900) 0%, var(--gray-900) 100%);
    border-radius: 1rem;
    padding: 1rem;
    border: 1px solid rgba(139, 92, 246, 0.2);
}

.video-frame {
    aspect-ratio: 16/9;
    border-radius: 0.5rem;
    overflow: hidden;
}

/* 세로형 비디오 (YouTube Shorts) 스타일 */
.video-frame-vertical {
    aspect-ratio: 9/16 !important;
    max-width: 600px;
    margin: 0 auto;
    box-shadow: 0 8px 25px rgba(139, 92, 246, 0.3);
    border: 2px solid rgba(139, 92, 246, 0.4);
}

/* Jump Rope Master용 큰 세로형 비디오 */
.video-frame-large {
    max-width: 600px !important; /* 1.5배 확장 (350px → 525px) */
    width: 600px !important; /* 고정 너비 */
    aspect-ratio: 9/16 !important; /* 세로형 비율 강제 적용 */
    height: auto !important; /* aspect-ratio에 따라 자동 계산 */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
    border-radius: 0.75rem !important;
}

.video-frame iframe {
    width: 100%;
    height: 100%;
    border: none;
    object-fit: cover;
}

/* 기본 화면에서 Jump Rope Master 영상 iframe 최적화 */
.video-frame-large iframe {
    width: 100% !important;
    height: 100% !important;
    border: none !important;
    object-fit: cover !important;
    border-radius: 0.75rem !important;
}

.video-info {
    text-align: center;
    margin-top: 1.5rem;
    padding: 1rem;
    width: 100%;
    max-width: 600px; /* 영상 크기와 맞춤 */
}

.video-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: white !important;
    margin-bottom: 0.5rem;
    line-height: 1.4;
}

.video-subtitle {
    color: var(--purple-300) !important;
    font-size: 1rem;
    font-weight: 500;
    margin-top: 0;
    line-height: 1.3;
}

/* Features Grid - 조화로운 크기로 조정 - 뷰포트 단위 적용 */
.features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(clamp(250px, 25vw, 320px), 1fr));
    gap: clamp(1rem, 2vw, 2rem);
    max-width: clamp(300px, 90vw, 1000px);
    margin: 0 auto;
    width: 100%;
}

/* Movement Master 섹션 - 기능카드 3개 가로 한줄 고정 */
.movement-section .features-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(1rem, 1.5vw, 1.5rem);
    max-width: clamp(600px, 95vw, 1200px);
}

.feature-card {
    background: var(--gray-900);
    border: 1px solid var(--gray-800);
    border-left: 4px solid var(--purple-500);
    border-radius: 0.5rem;
    padding: clamp(1rem, 2vw, 2rem);
    transition: var(--transition);
}

.feature-card:hover {
    box-shadow: 0 10px 25px rgba(139, 92, 246, 0.25);
    transform: translateY(-2px);
}

.feature-header {
    margin-bottom: 1rem;
}

.feature-icon {
    width: 24px;
    height: 24px;
    color: var(--purple-500);
    margin-bottom: 0.75rem;
}

.feature-title {
    font-size: clamp(1.1rem, 2vw, 1.4rem);
    font-weight: 600;
    color: white;
    margin: 0;
    margin-bottom: clamp(0.5rem, 1vh, 1rem);
}

.feature-description {
    color: var(--text-muted);
    font-size: clamp(0.9rem, 1.5vw, 1.1rem);
    line-height: 1.5;
    margin-bottom: clamp(0.5rem, 1vh, 1.5rem);
}

/* Video Preview */
.video-preview {
    margin-top: 1rem;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid rgba(139, 92, 246, 0.3);
    box-shadow: 0 4px 12px rgba(139, 92, 246, 0.2);
    transition: all 0.3s ease;
}

.video-preview:hover {
    border-color: rgba(139, 92, 246, 0.5);
    box-shadow: 0 6px 20px rgba(139, 92, 246, 0.3);
    transform: translateY(-2px);
}

.video-preview img {
    width: 100%;
    height: auto;
    display: block;
    transition: transform 0.3s ease;
}

.video-preview:hover img {
    transform: scale(1.02);
}

/* AI Demo Preview */
.ai-demo-preview {
    margin-top: 1rem;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid rgba(139, 92, 246, 0.3);
    box-shadow: 0 4px 12px rgba(139, 92, 246, 0.2);
    transition: all 0.3s ease;
}

.ai-demo-preview:hover {
    border-color: rgba(139, 92, 246, 0.5);
    box-shadow: 0 6px 20px rgba(139, 92, 246, 0.3);
    transform: translateY(-2px);
}

.ai-demo-preview img {
    width: 100%;
    height: auto;
    display: block;
    transition: transform 0.3s ease;
}

.ai-demo-preview:hover img {
    transform: scale(1.02);
}

/* Analysis Demo Preview */
.analysis-demo-preview {
    margin-top: 1rem;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid rgba(139, 92, 246, 0.3);
    box-shadow: 0 4px 12px rgba(139, 92, 246, 0.2);
    transition: all 0.3s ease;
}

.analysis-demo-preview:hover {
    border-color: rgba(139, 92, 246, 0.5);
    box-shadow: 0 6px 20px rgba(139, 92, 246, 0.3);
    transform: translateY(-2px);
}

.analysis-demo-preview img {
    width: 100%;
    height: auto;
    display: block;
    transition: transform 0.3s ease;
}

.analysis-demo-preview:hover img {
    transform: scale(1.02);
}

/* Jump Rope Section */
.jumprope-section {
    background: linear-gradient(135deg, var(--purple-900) 0%, var(--bg-primary) 100%);
}

.jumprope-features {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(clamp(220px, 25vw, 300px), 1fr));
    gap: clamp(1rem, 2vw, 2rem);
    margin-bottom: clamp(2rem, 4vh, 4rem);
    max-width: clamp(300px, 90vw, 1000px);
    margin-left: auto;
    margin-right: auto;
}

.jumprope-card {
    background: var(--gray-900);
    border: 1px solid var(--gray-800);
    border-radius: 0.5rem;
    padding: clamp(1.2rem, 3vw, 2.5rem);
    text-align: center;
    transition: var(--transition);
}

.jumprope-card:hover {
    box-shadow: 0 10px 25px rgba(139, 92, 246, 0.25);
    transform: translateY(-2px);
}

.jumprope-icon {
    width: clamp(48px, 8vw, 72px);
    height: clamp(48px, 8vw, 72px);
    background: var(--purple-600);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto clamp(0.8rem, 1.5vh, 1.5rem);
    color: white;
}

.jumprope-icon svg {
    width: 32px;
    height: 32px;
}

.jumprope-card-title {
    font-size: clamp(1.1rem, 2vw, 1.4rem);
    font-weight: 600;
    color: white;
    margin-bottom: clamp(0.5rem, 1vh, 1rem);
}

.jumprope-card-description {
    color: var(--text-muted);
    font-size: clamp(0.9rem, 1.5vw, 1.1rem);
    line-height: 1.5;
}

/* Jump Rope Master 새로운 메인 레이아웃 */
.jumprope-main-layout {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 3rem;
    margin-top: 3rem;
    align-items: start;
    max-width: 1440px; /* 20% 증가 (1200px * 1.2) */
    margin-left: auto;
    margin-right: auto;
}

.jumprope-video-section {
    display: flex;
    justify-content: center;
    align-items: flex-start;
}

.jumprope-content-section {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    width: 100%; /* 20% 줄임 */
}

/* 미사용 클래스 제거됨: jumprope-features-compact */

/* 게임 섹션 하단 이미지 */
.game-section-image {
    margin-top: 3rem;
    margin-bottom: 2rem;
    border-radius: 0.75rem;
    overflow: hidden;
    border: 1px solid rgba(139, 92, 246, 0.2);
    background: linear-gradient(135deg, var(--purple-900) 0%, var(--gray-900) 100%);
    aspect-ratio: 16/9;
    max-width: 1000px;
    margin-left: auto;
    margin-right: auto;
}

.game-section-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.game-section-image:hover img {
    transform: scale(1.05);
}

/* 오른쪽 3개 이미지 그리드 (크기 축소) */
.jumprope-images-side {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
    max-width: 1000px; /* 크기 축소 */
}

.jumprope-images-side .image-item {
    border-radius: 0.5rem;
    overflow: hidden;
    border: 1px solid rgba(139, 92, 246, 0.2);
    background: linear-gradient(135deg, var(--purple-900) 0%, var(--gray-900) 100%);
    aspect-ratio: 3/2; /* 더 컴팩트한 비율 */
}

.jumprope-images-side .image-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.jumprope-images-side .image-item:hover img {
    transform: scale(1.05);
}

/* 하단 기능 카드들 */
.jumprope-features-bottom {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    margin-top: 3rem;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
}

.jumprope-features-bottom .jumprope-card {
    background: var(--gray-900);
    border: 1px solid var(--gray-800);
    border-left: 4px solid var(--purple-500);
    border-radius: 0.5rem;
    padding: 1.5rem;
    transition: var(--transition);
}

.jumprope-features-bottom .jumprope-card:hover {
    box-shadow: 0 10px 25px rgba(139, 92, 246, 0.25);
    transform: translateY(-2px);
}

.jumprope-features-bottom .jumprope-icon {
    width: 24px;
    height: 24px;
    color: var(--purple-500);
    margin-bottom: 0.75rem;
}

.jumprope-features-bottom .jumprope-card-title {
    font-size: 1.1rem;
    font-weight: 600;
    color: white;
    margin: 0 0 0.75rem 0;
}

.jumprope-features-bottom .jumprope-card-description {
    color: var(--text-muted);
    font-size: 0.875rem;
    line-height: 1.5;
    margin: 0;
}

/* 깔끔한 정렬을 위한 추가 스타일 */
.features-grid, .jumprope-features, .jumprope-main-layout {
    align-items: stretch; /* 균등한 높이 */
}

.feature-card, .jumprope-card {
    height: 100%; /* 카드들 높이 통일 */
}

/* Game Section */
.game-section {
    background: var(--bg-primary);
}

.game-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(1.5rem, 3vw, 3rem);
    align-items: center;
    max-width: clamp(300px, 85vw, 900px);
    margin: 0 auto;
}

.game-benefits {
    display: flex;
    flex-direction: column;
    gap: clamp(1rem, 2vh, 2rem);
}

.benefit-item {
    display: flex;
    align-items: flex-start;
    gap: clamp(0.8rem, 2vw, 1.5rem);
}

.benefit-icon {
    width: clamp(40px, 6vw, 56px);
    height: clamp(40px, 6vw, 56px);
    background: var(--purple-600);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: white;
}

.benefit-icon svg {
    width: 24px;
    height: 24px;
}

.benefit-title {
    font-size: clamp(1.1rem, 2vw, 1.4rem);
    font-weight: 600;
    color: white;
    margin-bottom: clamp(0.5rem, 1vh, 1rem);
}

.benefit-description {
    color: var(--text-muted);
    font-size: clamp(0.9rem, 1.5vw, 1.1rem);
    line-height: 1.5;
}

/* Game Modes - 조화로운 크기로 조정 - 뷰포트 단위 적용 */
.game-modes {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: clamp(0.5rem, 1vw, 1rem);
    max-width: clamp(300px, 50vw, 450px);
}

.game-mode-card {
    text-align: center;
    padding: clamp(1rem, 2vw, 2rem);
    border-radius: 1rem;
    color: white;
    border: none;
    transition: var(--transition);
    font-size: clamp(0.9rem, 1.5vw, 1.1rem);
}

.game-mode-card:hover {
    transform: translateY(-2px);
}

.speed-sprint {
    background: linear-gradient(135deg, var(--purple-600) 0%, var(--purple-800) 100%);
}

.double-under {
    background: linear-gradient(135deg, var(--purple-500) 0%, var(--purple-700) 100%);
}

.endurance {
    background: linear-gradient(135deg, var(--purple-400) 0%, var(--purple-600) 100%);
}

.basic-bounce {
    background: linear-gradient(135deg, #c084fc 0%, var(--purple-500) 100%);
}

.game-icon {
    width: 48px;
    height: 48px;
    margin: 0 auto 1rem;
    color: white;
}

.game-icon svg {
    width: 48px;
    height: 48px;
}

.game-mode-title {
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.game-mode-description {
    font-size: 0.875rem;
    opacity: 0.9;
}

/* Pricing Section */
.pricing-section {
    background: linear-gradient(135deg, var(--bg-primary) 0%, var(--purple-900) 100%);
    margin-bottom: 0 !important;
    padding: 4rem 0 2rem 0 !important; /* 상단 여백을 더 크게 */
}

.pricing-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 2.5rem; /* 카드 간 간격 증가 */
    margin-bottom: 4rem; /* 하단 간격 증가 */
    max-width: 56rem;
    margin-left: auto;
    margin-right: auto;
}

.pricing-card {
    background: var(--gray-900);
    border: 1px solid rgba(139, 92, 246, 0.2);
    border-radius: 1rem;
    padding: 2.5rem; /* 카드 내부 여백 증가 */
}

.pricing-title {
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--purple-400);
    margin-bottom: 1.5rem; /* 제목 하단 간격 증가 */
}

.pricing-price {
    font-size: 2.5rem;
    font-weight: 800;
    color: white;
    margin-bottom: 1rem; /* 가격 하단 간격 증가 */
}

.pricing-period {
    font-size: 1rem;
    color: var(--text-muted);
}

.pricing-subtitle {
    color: var(--text-secondary);
    margin-bottom: 1.5rem; /* 부제목 하단 간격 증가 */
}

.pricing-features {
    list-style: none;
    color: var(--text-muted);
    font-size: 0.875rem;
}

.pricing-features li {
    margin-bottom: 0.75rem; /* 기능 목록 간격 증가 */
}

/* CTA Buttons */
.cta-buttons {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    align-items: center;
}

/* Scroll Indicator */
/* FOUC 방지 - HTML/BODY 강제 표시 */
html, body {
    opacity: 1 !important;
    visibility: visible !important;
}

/* 홈 플로팅 버튼과 동일한 방식으로 스크롤 인디케이터 표시 */
.scroll-indicator {
    position: fixed !important;
    top: 50% !important;
    right: 20px !important;
    transform: translateY(-50%) translateZ(0) !important;
    z-index: 999999 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important; /* 위쪽 정렬로 변경 */
    align-items: center !important; /* 도트들을 수평 중앙 정렬 */
    gap: 16px !important; /* 20px → 16px 적절한 간격으로 조정 */
    padding: 35px 20px 48px 20px !important; /* 상단 패딩을 늘려서 도트를 10% 아래로 (10% 축소) */
    background: rgba(17, 24, 39, 0.9) !important;
    border-radius: 40px !important; /* 더 큰 둥근 모서리 */
    backdrop-filter: blur(12px) !important;
    border: 1px solid rgba(139, 92, 246, 0.4) !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6) !important;
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    will-change: transform !important;
    backface-visibility: hidden !important;
    min-height: 270px !important; /* 최소 높이 지정으로 강제 확장 (10% 축소) */
}

.scroll-dot {
    width: 12px !important; /* 10px → 12px (도트 크기 증가) */
    height: 12px !important; /* 10px → 12px (도트 크기 증가) */
    border-radius: 50% !important;
    background: rgba(139, 92, 246, 0.5) !important;
    border: 2px solid rgba(139, 92, 246, 0.4) !important;
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
    cursor: pointer !important;
    position: relative !important;
    overflow: hidden !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
}

.scroll-dot::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    background: var(--purple-300);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.scroll-dot.active {
    background: var(--purple-600) !important;
    border-color: var(--purple-400) !important;
    transform: scale(1.3) !important;
    box-shadow: 0 0 16px rgba(139, 92, 246, 0.8) !important;
}

.scroll-dot.active::before {
    width: 4px;
    height: 4px;
}

.scroll-dot:hover:not(.active) {
    background: rgba(139, 92, 246, 0.6);
    border-color: var(--purple-500);
    transform: scale(1.15);
    box-shadow: 0 0 12px rgba(139, 92, 246, 0.4);
}

.scroll-dot:hover:not(.active)::before {
    width: 2px;
    height: 2px;
}

/* Home Floating Button */
.home-floating-btn {
    position: fixed !important;
    bottom: 2rem !important;
    right: 2rem !important;
    width: 56px !important;
    height: 56px !important;
    background: linear-gradient(135deg, var(--purple-600) 0%, var(--purple-700) 100%) !important;
    border: none !important;
    border-radius: 50% !important;
    color: white !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
    z-index: 999999 !important;
    box-shadow: 0 8px 25px rgba(139, 92, 246, 0.4) !important;
    backdrop-filter: blur(10px) !important;
    border: 2px solid rgba(255, 255, 255, 0.1) !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateZ(0) !important;
}

.home-floating-btn:hover {
    background: linear-gradient(135deg, var(--purple-700) 0%, var(--purple-800) 100%) !important;
    transform: translateY(-3px) scale(1.05) translateZ(0) !important;
    box-shadow: 0 12px 35px rgba(139, 92, 246, 0.6) !important;
}

.home-floating-btn:active {
    transform: translateY(-1px) scale(0.98) translateZ(0) !important;
}

.home-floating-btn svg {
    width: 26px !important;
    height: 26px !important;
    stroke-width: 2.5 !important;
    pointer-events: none !important;
}

/* 모바일에서 버튼 크기 조정 */
@media (max-width: 768px) {
    .home-floating-btn {
        width: 50px !important;
        height: 50px !important;
        bottom: 1.5rem !important;
        right: 1.5rem !important;
        z-index: 999999 !important;
    }
    
    .home-floating-btn svg {
        width: 22px !important;
        height: 22px !important;
    }
}

/* Responsive Design */
@media (min-width: 640px) {
    .hero-buttons {
        flex-direction: row;
        justify-content: center;
    }
    
    .cta-buttons {
        flex-direction: row;
        justify-content: center;
    }
}

@media (min-width: 768px) {
    :root {
        --container-padding: 2rem;
    }
    
    .hero-title {
        font-size: clamp(3rem, 6vw, 4.5rem);
    }
    
    .hero-description {
        font-size: clamp(1.2rem, 2.5vw, 1.8rem);
    }
    
    .section-title {
        font-size: clamp(2.5rem, 5vw, 3.5rem);
    }
    
    /* 태블릿 이상에서 스크롤 인디케이터 표시 */
    .scroll-indicator {
        display: flex !important;
        right: 12px !important;
        justify-content: flex-start !important;
        align-items: center !important;
        padding: 40px 12px 22px 12px !important;
        gap: 12px !important;
        border-radius: 30px !important;
        background: rgba(17, 24, 39, 0.95) !important;
        backdrop-filter: blur(8px) !important;
        z-index: 999999 !important;
        opacity: 1 !important;
        visibility: visible !important;
        min-height: 180px !important;
    }
    
    .scroll-dot {
        width: 8px;
        height: 8px;
        border-width: 1.5px;
    }
    
    .scroll-dot.active {
        transform: scale(1.2);
        box-shadow: 0 0 12px rgba(139, 92, 246, 0.6);
    }
    
    .scroll-dot.active::before {
        width: 3px;
        height: 3px;
    }
    
    .scroll-dot:hover:not(.active) {
        transform: scale(1.1);
        box-shadow: 0 0 8px rgba(139, 92, 246, 0.4);
    }
    
    .scroll-dot:hover:not(.active)::before {
        width: 1.5px;
        height: 1.5px;
    }
}

@media (min-width: 1024px) {
    .hero-title {
        font-size: 5rem;
    }
    
    .section-title {
        font-size: 4rem;
    }
}

/* FHD(1920x1080~3839px) 화면 최적화 - 컨텐츠 크기 40% 축소 */
@media (min-width: 1920px) and (max-width: 3839px) {
    /* 메인 컨테이너 가로폭은 4K와 동일 유지, 패딩만 40% 축소 */
    .movement-section .container,
    .jumprope-section .container,
    .game-section .container,
    .pricing-section .container {
        max-width: clamp(300px, 85vw, 1000px) !important; /* 4K와 동일한 가로폭 유지 */
        padding: clamp(0.6rem, 1.8vh, 1.8rem) clamp(0.6rem, 1.8vw, 1.2rem) !important;
    }
    
    /* 섹션 헤더 가로폭은 4K와 동일 유지, 여백만 40% 축소 */
    .section-header {
        margin-bottom: clamp(1.2rem, 3vh, 2.4rem) !important;
        max-width: clamp(300px, 80vw, 800px) !important; /* 4K와 동일한 가로폭 유지 */
    }
    
    .section-title {
        font-size: clamp(1.08rem, 2.4vw, 1.8rem) !important;
        margin-bottom: clamp(0.6rem, 1.2vh, 1.2rem) !important;
    }
    
    .section-description {
        font-size: clamp(0.6rem, 1.2vw, 0.84rem) !important;
        max-width: clamp(300px, 75vw, 48rem) !important; /* 4K와 동일한 가로폭 유지 */
    }
    
    /* 비디오 컨테이너 가로폭은 4K와 동일 유지, 여백만 40% 축소 */
    .demo-video-container {
        max-width: clamp(300px, 80vw, 900px) !important; /* 4K와 동일한 가로폭 유지 */
        margin-bottom: clamp(0.9rem, 1.8vh, 1.8rem) !important;
    }
    
    .movement-section .demo-video-container {
        max-width: clamp(252px, 61.2vw, 720px) !important; /* 총 30% 축소된 크기 (10% + 추가 20%) */
    }
    
    /* Features Grid 가로폭은 4K와 동일 유지, 간격만 40% 축소 */
    .features-grid {
        grid-template-columns: repeat(auto-fit, minmax(clamp(250px, 25vw, 320px), 1fr)) !important; /* 4K와 동일한 그리드 */
        gap: clamp(0.6rem, 1.2vw, 1.2rem) !important;
        max-width: clamp(300px, 90vw, 1000px) !important; /* 4K와 동일한 가로폭 유지 */
    }
    
    /* Movement Master 섹션 - FHD에서도 3개 가로 한줄 고정 */
    .movement-section .features-grid {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: clamp(0.6rem, 0.9vw, 0.9rem) !important;
        max-width: clamp(360px, 57vw, 720px) !important;
    }
    
    .feature-card {
        padding: clamp(0.6rem, 1.2vw, 1.2rem) !important;
    }
    
    .feature-title {
        font-size: clamp(0.66rem, 1.2vw, 0.84rem) !important;
        margin-bottom: clamp(0.3rem, 0.6vh, 0.6rem) !important;
    }
    
    .feature-description {
        font-size: clamp(0.54rem, 0.9vw, 0.66rem) !important;
        margin-bottom: clamp(0.3rem, 0.6vh, 0.9rem) !important;
    }
    
    /* Jump Rope 섹션 가로폭은 4K와 동일 유지, 간격만 40% 축소 */
    .jumprope-features {
        grid-template-columns: repeat(auto-fit, minmax(clamp(220px, 25vw, 300px), 1fr)) !important; /* 4K와 동일한 그리드 */
        gap: clamp(0.6rem, 1.2vw, 1.2rem) !important;
        margin-bottom: clamp(1.2rem, 2.4vh, 2.4rem) !important;
        max-width: clamp(300px, 90vw, 1000px) !important; /* 4K와 동일한 가로폭 유지 */
    }
    
    .jumprope-card {
        padding: clamp(0.72rem, 1.8vw, 1.5rem) !important;
    }
    
    .jumprope-icon {
        width: clamp(28.8px, 4.8vw, 43.2px) !important;
        height: clamp(28.8px, 4.8vw, 43.2px) !important;
        margin: 0 auto clamp(0.48rem, 0.9vh, 0.9rem) !important;
    }
    
    .jumprope-card-title {
        font-size: clamp(0.66rem, 1.2vw, 0.84rem) !important;
        margin-bottom: clamp(0.3rem, 0.6vh, 0.6rem) !important;
    }
    
    .jumprope-card-description {
        font-size: clamp(0.54rem, 0.9vw, 0.66rem) !important;
    }
    
    /* Game 섹션 가로폭은 4K와 동일 유지, 간격만 40% 축소 */
    .game-content {
        gap: clamp(0.9rem, 1.8vw, 1.8rem) !important;
        max-width: clamp(300px, 85vw, 900px) !important; /* 4K와 동일한 가로폭 유지 */
    }
    
    .game-benefits {
        gap: clamp(0.6rem, 1.2vh, 1.2rem) !important;
    }
    
    .benefit-item {
        gap: clamp(0.48rem, 1.2vw, 0.9rem) !important;
    }
    
    .benefit-icon {
        width: clamp(24px, 3.6vw, 33.6px) !important;
        height: clamp(24px, 3.6vw, 33.6px) !important;
    }
    
    .benefit-title {
        font-size: clamp(0.66rem, 1.2vw, 0.84rem) !important;
        margin-bottom: clamp(0.3rem, 0.6vh, 0.6rem) !important;
    }
    
    .benefit-description {
        font-size: clamp(0.54rem, 0.9vw, 0.66rem) !important;
    }
    
    /* Game Modes 가로폭은 4K와 동일 유지, 간격만 40% 축소 */
    .game-modes {
        gap: clamp(0.3rem, 0.6vw, 0.6rem) !important;
        max-width: clamp(300px, 50vw, 450px) !important; /* 4K와 동일한 가로폭 유지 */
    }
    
    .game-mode-card {
        padding: clamp(0.6rem, 1.2vw, 1.2rem) !important;
        font-size: clamp(0.54rem, 0.9vw, 0.66rem) !important;
    }
    
    /* Hero 섹션 크기 40% 축소 */
    .hero-title {
        font-size: clamp(1.8rem, 3.6vw, 2.7rem) !important;
    }
    
    .hero-description {
        font-size: clamp(0.72rem, 1.5vw, 1.08rem) !important;
    }
    
    /* 섹션 패딩 40% 축소 */
    .movement-section,
    .jumprope-section,
    .game-section {
        padding: clamp(0.6rem, 1.8vh, 2.4rem) 0 !important;
    }
    
    /* Jump Rope Master 새로운 레이아웃 - 조화로운 비율 조정 */
    .jumprope-main-layout {
        gap: clamp(1.5rem, 2.5vw, 2.5rem) !important; /* 적절한 간격 유지 */
        max-width: clamp(480px, 108vw, 1320px) !important; /* 전체 컨테이너 20% 증가 */
        grid-template-columns: 1fr 1fr !important; /* 균형잡힌 1:1 비율 */
    }
    
    .jumprope-video-section .demo-video-wrapper {
        max-width: 347px !important; /* 배경 컨테이너 10% 증가 (315px * 1.1) */
        display: flex !important;
        flex-direction: column !important; /* 세로 배치 */
        justify-content: center !important;
        align-items: center !important;
    }
    
    .video-frame-large {
        max-width: 315px !important; /* 비디오 크기 30% 축소 (450px * 0.7) */
        width: 315px !important; /* 고정 너비 30% 축소 */
        aspect-ratio: 9/16 !important; /* 세로형 비율 강제 적용 */
        height: auto !important; /* aspect-ratio에 따라 자동 계산 */
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        overflow: hidden !important;
        border-radius: 0.75rem !important;
    }
    
    /* FHD에서 Jump Rope Master 영상 iframe 최적화 */
    .video-frame-large iframe {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        border-radius: 0.75rem !important;
    }
    
    /* FHD에서 video-info 스타일 조정 */
    .video-info {
        margin-top: 1.25rem !important;
        padding: 0.875rem !important;
        max-width: 347px !important; /* 배경 컨테이너 크기에 맞춤 */
    }
    
    .video-title {
        font-size: 1.125rem !important;
        margin-bottom: 0.375rem !important;
    }
    
    .video-subtitle {
        font-size: 0.9375rem !important;
    }
    
    .jumprope-content-section {
        width: 100% !important; /* 사진 영역 전체 사용 */
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important; /* 중앙 정렬 */
    }
    
    .jumprope-images-side {
        max-width: 100% !important; /* 컨테이너에 맞춤 */
        gap: clamp(0.8rem, 1vw, 1rem) !important;
    }
    
    .jumprope-images-side .image-item {
        transform: none !important; /* 과도한 확대 제거 */
        margin: 0 !important; /* 불필요한 마진 제거 */
    }
    
    .jumprope-features-bottom {
        gap: clamp(0.48rem, 0.9vw, 0.9rem) !important;
        margin-top: clamp(0.9rem, 1.8vh, 1.8rem) !important;
        max-width: clamp(300px, 85vw, 1200px) !important; /* 4K와 동일한 가로폭 유지 */
    }
    
    /* Game Section 이미지 가로폭은 4K와 동일 유지 */
    .game-section-image {
        margin-top: clamp(0.9rem, 1.8vh, 1.8rem) !important;
        margin-bottom: clamp(0.6rem, 1.2vh, 1.2rem) !important;
        max-width: clamp(300px, 80vw, 800px) !important; /* 4K와 동일한 가로폭 유지 */
    }
    
    /* Pricing Section FHD 최적화 */
    .pricing-grid {
        gap: clamp(0.72rem, 1.5vw, 1.5rem) !important;
        margin-bottom: clamp(1.2rem, 2.4vh, 2.4rem) !important;
    }
    
    .pricing-card {
        padding: clamp(0.72rem, 1.5vw, 1.5rem) !important;
    }
    
    .pricing-title {
        margin-bottom: clamp(0.48rem, 0.9vh, 0.9rem) !important;
        font-size: clamp(0.72rem, 1.2vw, 1.2rem) !important;
    }
    
    .pricing-price {
        margin-bottom: clamp(0.3rem, 0.6vh, 0.6rem) !important;
        font-size: clamp(1.08rem, 2.4vw, 1.8rem) !important;
    }
    
    .pricing-subtitle {
        margin-bottom: clamp(0.48rem, 0.9vh, 0.9rem) !important;
        font-size: clamp(0.48rem, 1vw, 0.72rem) !important;
    }
    
    .pricing-features li {
        margin-bottom: clamp(0.24rem, 0.45vh, 0.45rem) !important;
        font-size: clamp(0.48rem, 0.9vw, 0.675rem) !important;
    }
}

/* 데스크톱에서 적절한 스크롤 스냅 */
@media (min-width: 769px) {
    .snap-container {
        scroll-snap-type: y proximity !important; /* mandatory에서 proximity로 변경 */
        scroll-behavior: smooth !important;
        overscroll-behavior: none !important;
    }
    
    .snap-section {
        scroll-snap-align: start !important;
        scroll-snap-stop: normal !important; /* always에서 normal로 변경 */
    }
}

@media (max-width: 768px) {
    /* 모바일에서 스크롤 인디케이터 숨김 */
    .scroll-indicator {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
    }
    
    .snap-container {
        scroll-snap-type: none !important; /* 모바일에서 스크롤 스냅 완전 비활성화 */
        /* 모바일에서 일반 스크롤을 위한 설정 */
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: auto; /* 일반 스크롤 동작 허용 */
        scroll-behavior: auto; /* 브라우저 기본 스크롤 */
    }
    
    .snap-section {
        scroll-snap-align: none; /* 모바일에서 스냅 정렬 비활성화 */
        scroll-snap-stop: normal;
        /* 모바일에서 더 빠른 애니메이션 */
        animation: slideIn 0.3s var(--ease-out-quart);
    }
    
    /* 미사용 클래스 제거됨: media-grid */
    
    /* Jump Rope Master 모바일 레이아웃 */
    .jumprope-main-layout {
        grid-template-columns: 1fr !important;
        gap: 2rem !important;
        max-width: 100% !important; /* 모바일에서 컨테이너 제한 제거 */
    }
    
    .jumprope-video-section {
        order: -1; /* 모바일에서 영상을 위로 */
        justify-content: center;
    }
    
    .video-frame-large {
        max-width: 250px !important; /* 모바일에 적합한 크기 */
        width: 250px !important; /* 고정 너비 */
        height: 444px !important; /* 9:16 비율에 맞는 높이 (250 * 16/9 = 444) */
        aspect-ratio: 9/16 !important; /* 세로형 비율 강제 적용 */
        margin: 1.5rem auto !important; /* 중앙 정렬과 적절한 여백 */
        overflow: hidden !important; /* 넘치는 부분 숨김 */
        border-radius: 0.75rem !important; /* 모서리 둥글게 */
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
    
    /* 모바일에서 Jump Rope Master 영상 iframe 최적화 */
    .video-frame-large iframe {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        border-radius: 0.75rem !important;
    }
    
    .jumprope-images-side {
        max-width: 100% !important;
        gap: 1rem;
    }
    
    .jumprope-features-bottom {
        grid-template-columns: 1fr !important;
        gap: 1rem;
        margin-top: 2rem;
    }
    
    /* Movement Master 섹션 모바일 조정 - 세로 배치 */
    .movement-section .features-grid {
        grid-template-columns: 1fr !important;
        gap: 1.5rem !important;
        max-width: 100% !important;
    }
    
    /* 게임 섹션 모바일 조정 */
    .game-content {
        grid-template-columns: 1fr !important;
        gap: clamp(1.5rem, 4vh, 2.5rem) !important;
        max-width: 100% !important;
        justify-items: center !important; /* 그리드 아이템들 중앙 정렬 */
    }
    
    /* 게임 혜택 카드들 중앙정렬 */
    .game-benefits {
        max-width: 100% !important;
        align-items: center !important;
        text-align: center !important;
    }
    
    .benefit-item {
        flex-direction: column !important; /* 세로 배치 */
        text-align: center !important;
        align-items: center !important;
        max-width: 300px !important; /* 적절한 너비 제한 */
        margin: 0 auto !important; /* 중앙 정렬 */
    }
    
    .benefit-icon {
        margin-bottom: 1rem !important;
    }
    
    .game-section-image {
        margin-top: 2rem;
        margin-bottom: 1rem;
        max-width: 100%;
    }
    
    /* 모바일에서 세로형 영상 조정 */
    .video-frame-vertical {
        max-width: 250px !important;
        margin: 2rem auto !important;
        aspect-ratio: 9/16 !important;
        height: auto !important;
        border-radius: 0.75rem !important;
        overflow: hidden !important;
    }
    
    /* Jump Rope Master 영상 컨테이너 모바일 최적화 */
    .jumprope-video-section {
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        padding: 1rem !important;
    }
    
    .jumprope-video-section .demo-video-wrapper {
        max-width: 280px !important;
        width: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        align-items: center !important;
    }
    
    /* 모바일에서 video-info 스타일 조정 */
    .video-info {
        margin-top: 1rem !important;
        padding: 0.75rem !important;
        max-width: 250px !important;
    }
    
    .video-title {
        font-size: 1rem !important;
        margin-bottom: 0.25rem !important;
    }
    
    .video-subtitle {
        font-size: 0.875rem !important;
    }
    

    
    .game-modes {
        grid-template-columns: 1fr !important;
        justify-items: center !important; /* 게임 모드 카드들 중앙 정렬 */
        max-width: 100% !important;
    }
    
    .game-mode-card {
        width: 100% !important;
        max-width: 280px !important; /* 모바일에 적합한 카드 너비 */
        margin: 0 auto !important; /* 개별 카드 중앙 정렬 */
        text-align: center !important;
    }
    
    .pricing-grid {
        grid-template-columns: 1fr;
    }
    
    /* 모바일에서 마지막 섹션 하단 여백 추가 */
    .pricing-section {
        padding-bottom: 8rem !important; /* 모바일에서 충분한 하단 여백 대폭 증가 */
        margin-bottom: 2rem !important; /* 추가 마진 */
        min-height: calc(100vh - 2rem) !important; /* 뷰포트 높이에 맞춰 최소 높이 설정 */
    }
    
    .pricing-section .container {
        padding-bottom: 5rem !important; /* 컨테이너 하단 여백 증가 */
        margin-bottom: 3rem !important; /* 마진 여백 증가 */
    }
    
    .pricing-section .cta-buttons {
        margin-bottom: 6rem !important; /* CTA 버튼 하단 여백 대폭 증가 */
        padding-bottom: 4rem !important; /* 추가 패딩 증가 */
    }
    
    /* 모바일에서 버튼이 뷰포트 하단에 가려지지 않도록 추가 여백 */
    .pricing-section .btn {
        margin-bottom: 2rem !important;
    }
    
    /* 모바일 브라우저 하단 UI 고려한 추가 여백 */
    body {
        padding-bottom: env(safe-area-inset-bottom, 0px) !important;
    }
}

/* 회원가입 모달 스타일 - 모던 디자인 */
.signup-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1000000;
    display: none;
    justify-content: center;
    align-items: center;
    opacity: 0;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    animation: modalFadeIn 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.signup-modal.show {
    display: flex;
    opacity: 1;
}

.modal-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgba(0, 0, 0, 0.85) 0%, rgba(17, 24, 39, 0.9) 100%);
    backdrop-filter: blur(20px) saturate(180%);
}

.modal-content {
    position: relative;
    width: 92%;
    max-width: 1000px;
    height: 95%;
    max-height: 825px;
    background: linear-gradient(145deg, #ffffff 0%, #f8fafc 100%);
    border-radius: 24px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 
        0 32px 64px rgba(0, 0, 0, 0.4),
        0 16px 32px rgba(139, 92, 246, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transform: scale(0.9) translateY(20px);
    animation: modalSlideIn 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.modal-header {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 2rem 2.5rem 1.5rem;
    background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
    border-bottom: none;
    position: relative;
}

.modal-header::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
}

.modal-title-section {
    text-align: center;
    flex: 1;
}

.modal-title-section h3 {
    color: #ffffff;
    font-size: 1.5rem;
    font-weight: 700;
    margin: 0;
    letter-spacing: -0.025em;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.modal-close {
    background: rgba(255, 255, 255, 0.15);
    border: none;
    color: #ffffff;
    cursor: pointer;
    padding: 0.75rem;
    border-radius: 12px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    position: absolute;
    right: 2.5rem;
    top: 50%;
    transform: translateY(-50%);
    flex-shrink: 0;
}

.modal-close:hover {
    background: rgba(255, 255, 255, 0.25);
    transform: translateY(-50%) scale(1.05);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.modal-close:active {
    transform: translateY(-50%) scale(0.95);
}

.modal-close svg {
    width: 18px;
    height: 18px;
    stroke-width: 2.5;
}

.modal-body {
    flex: 1;
    padding: 0;
    overflow: hidden;
    position: relative;
}

.modal-body iframe {
    width: 100%;
    height: 100%;
    border: none;
    background: #ffffff;
}

.modal-footer {
    padding: 1.5rem 2.5rem;
    background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
    border-top: 1px solid rgba(148, 163, 184, 0.2);
}

.footer-info {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    justify-content: center;
}

.info-icon {
    width: 20px;
    height: 20px;
    color: #10b981;
    stroke-width: 2;
    flex-shrink: 0;
}

.footer-info p {
    color: #64748b;
    font-size: 0.9rem;
    font-weight: 500;
    margin: 0;
    text-align: center;
}

/* 모달 애니메이션 */
@keyframes modalFadeIn {
    from {
        opacity: 0;
        backdrop-filter: blur(0px);
    }
    to {
        opacity: 1;
        backdrop-filter: blur(20px);
    }
}

@keyframes modalSlideIn {
    from {
        transform: scale(0.9) translateY(20px);
        opacity: 0;
    }
    to {
        transform: scale(1) translateY(0);
        opacity: 1;
    }
}

/* 모바일 모달 최적화 */
@media (max-width: 768px) {
    .modal-content {
        width: 95%;
        height: 95%;
        max-width: none;
        max-height: none;
        border-radius: 20px;
    }
    
    .modal-header {
        padding: 1.5rem 1.5rem 1rem;
        justify-content: center;
        align-items: center;
    }
    
    .modal-title-section {
        text-align: center;
        flex: 1;
    }
    
    .modal-title-section h3 {
        font-size: 1.25rem;
    }
    
    .modal-close {
        position: absolute;
        top: 50%;
        right: 1.5rem;
        transform: translateY(-50%);
        padding: 0.5rem;
        margin: 0;
    }
    
    .modal-close:hover {
        transform: translateY(-50%) scale(1.05);
    }
    
    .modal-close:active {
        transform: translateY(-50%) scale(0.95);
    }
    
    .modal-footer {
        padding: 1rem 1.5rem;
    }
    
    .footer-info {
        flex-direction: column;
        gap: 0.5rem;
        text-align: center;
    }
    
    .footer-info p {
        font-size: 0.8rem;
    }
}

/* 로그인된 사용자 안내 모달 */
.logged-in-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1000000;
    display: none;
    justify-content: center;
    align-items: center;
    opacity: 0;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.logged-in-modal.show {
    display: flex;
    opacity: 1;
}

.logged-in-content {
    position: relative;
    width: 90%;
    max-width: 480px;
    background: linear-gradient(145deg, #ffffff 0%, #f8fafc 100%);
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 
        0 25px 50px rgba(0, 0, 0, 0.4),
        0 10px 20px rgba(34, 197, 94, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
    padding: 3rem 2rem 2rem;
    text-align: center;
    transform: scale(0.9) translateY(20px);
    animation: loggedInSlideIn 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.logged-in-icon {
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.5rem;
    box-shadow: 0 8px 25px rgba(16, 185, 129, 0.3);
}

.logged-in-icon svg {
    width: 40px;
    height: 40px;
    color: white;
    stroke-width: 3;
}

.logged-in-content h3 {
    color: #1f2937;
    font-size: 1.75rem;
    font-weight: 700;
    margin: 0 0 1rem 0;
    letter-spacing: -0.025em;
}

.logged-in-content p {
    color: #6b7280;
    font-size: 1rem;
    line-height: 1.6;
    margin: 0 0 2rem 0;
}

.logged-in-buttons {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
}

.logged-in-buttons .btn {
    min-width: 140px;
    padding: 0.75rem 1.5rem;
    font-size: 0.95rem;
    font-weight: 600;
    border-radius: 10px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.logged-in-buttons .btn-primary {
    background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
    color: white;
    border: none;
    box-shadow: 0 4px 15px rgba(139, 92, 246, 0.3);
}

.logged-in-buttons .btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(139, 92, 246, 0.4);
}

.logged-in-buttons .btn-outline {
    background: transparent;
    color: #6b7280;
    border: 2px solid #e5e7eb;
}

.logged-in-buttons .btn-outline:hover {
    background: #f9fafb;
    border-color: #d1d5db;
    color: #374151;
}

/* 로그인 모달 애니메이션 */
@keyframes loggedInSlideIn {
    from {
        transform: scale(0.9) translateY(20px);
        opacity: 0;
    }
    to {
        transform: scale(1) translateY(0);
        opacity: 1;
    }
}

/* 모바일 로그인 모달 최적화 */
@media (max-width: 768px) {
    .logged-in-content {
        width: 95%;
        max-width: none;
        padding: 2.5rem 1.5rem 1.5rem;
        border-radius: 16px;
    }
    
    .logged-in-icon {
        width: 70px;
        height: 70px;
        margin-bottom: 1rem;
    }
    
    .logged-in-icon svg {
        width: 35px;
        height: 35px;
    }
    
    .logged-in-content h3 {
        font-size: 1.5rem;
    }
    
    .logged-in-content p {
        font-size: 0.9rem;
        margin-bottom: 1.5rem;
    }
    
    .logged-in-buttons {
        flex-direction: column;
        align-items: center;
    }
    
    .logged-in-buttons .btn {
        width: 100%;
        max-width: 280px;
    }
}

/* Performance Optimizations - 부드러운 전환을 위한 성능 최적화 */
* {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

/* 부드러운 스크롤을 위한 추가 최적화 */
.snap-container,
.snap-section {
    will-change: transform, opacity;
    contain: layout style paint;
}

/* 터치 디바이스에서 일반 스크롤 */
@media (hover: none) and (pointer: coarse) {
    .snap-container {
        scroll-snap-type: none !important; /* 터치 디바이스에서 스냅 비활성화 */
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-y: auto; /* 일반 스크롤 허용 */
        scroll-behavior: auto;
    }
    
    .snap-section {
        scroll-snap-align: none; /* 터치 디바이스에서 스냅 정렬 비활성화 */
    }
}

/* 고성능 디바이스에서 더 부드러운 애니메이션 */
@media (prefers-reduced-motion: no-preference) {
    .snap-section {
        transition: transform 0.25s var(--ease-out-quart), 
                   opacity 0.25s ease-out;
    }
}

/* 저성능 디바이스나 배터리 절약 모드에서 애니메이션 최소화 */
@media (prefers-reduced-motion: reduce) {
    .snap-section {
        animation: none;
        transition: none;
    }
    
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}