:root {
            --theme-primary: #2563eb; /* blue-600 */
            --theme-primary-hover: #1d4ed8; /* blue-700 */
            --theme-primary-dark: #1e40af; /* blue-800 */
            --theme-accent: #2563eb; /* blue-600 */
            --blog-color: #03C75A; /* 네이버 블로그 색상 (블루 테마) */
            --blog-color-hover: #02B350; /* 네이버 블로그 호버 색상 (블루 테마) */
        }

        [data-theme="green"] {
            --theme-primary: #006E4F; /* Dark Green */
            --theme-primary-hover: #005a3f; /* Darker Green */
            --theme-primary-dark: #1A2D4D; /* Deep Navy */
            --theme-accent: #1A2D4D; /* Deep Navy */
            --blog-color: #006E4F; /* 탁한 녹색 (그린 테마) */
            --blog-color-hover: #005a3f; /* 탁한 녹색 호버 (그린 테마) */
        }

        .blog-link {
            color: var(--blog-color);
        }

        .blog-link:hover {
            color: var(--blog-color-hover);
        }

        body {
            font-family: 'Noto Sans KR', sans-serif;
        }

        /* Smooth scroll */
        html {
            scroll-behavior: smooth;
        }

        /* Theme color classes */
        .theme-primary {
            background-color: var(--theme-primary);
        }
        .theme-primary-hover:hover {
            background-color: var(--theme-primary-hover);
        }

        .theme-primary-dark {
            background-color: var(--theme-primary-dark);
        }
        .theme-primary-dark-hover:hover {
            background-color: var(--theme-primary-hover);
        }
        .theme-text-primary {
            color: var(--theme-primary);
        }
        .theme-text-primary-hover:hover {
            color: var(--theme-primary);
        }

        .theme-border-primary {
            border-color: var(--theme-primary);
        }

        .theme-border-primary-dark {
            border-color: var(--theme-primary-dark);
        }
        .theme-border-primary-hover:hover {
            border-color: var(--theme-primary);
        }
        .theme-accent {
            background-color: var(--theme-accent);
        }
        .theme-focus-ring {
            --tw-ring-color: var(--theme-primary);
        }

        /* Custom animations */
        @keyframes fadeInUp {
            from {
                opacity: 0;
                transform: translateY(30px);
            }

            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        .fade-in-up {
            animation: fadeInUp 0.6s ease-out;
        }

        /* Hero image overlay */
        .hero-overlay {
            background: linear-gradient(to right, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.3));
        }

        /* Scroll animation */
        .scroll-animate {
            opacity: 0;
            transform: translateY(80px) scale(0.9);
            transition: all 1.2s cubic-bezier(0.16, 1, 0.3, 1);
            will-change: opacity, transform;
        }

        .scroll-animate.animate-in {
            opacity: 1;
            transform: translateY(0) scale(1);
        }

        /* Alpine.js cloak - hide elements until Alpine is initialized */
        [x-cloak] {
            display: none !important;
        }

    /* Custom Hero Transition */
        .hero-transition-enter {
            transition: opacity 3s ease-out, filter 4s ease-out;
        }
        .hero-transition-leave {
            transition: opacity 3s ease-in, filter 3s ease-in;
        }

        /* 그린 테마일 때 히어로 배경 이미지만 그레이스케일 유지 */
        [data-theme="green"] .hero-slide-bg {
            filter: grayscale(100%) brightness(0.9) !important;
        }
        
        /* 그린 테마일 때 트랜지션 후에도 그레이스케일 유지 */
        [data-theme="green"] .hero-slide-bg.grayscale-0 {
            filter: grayscale(100%) brightness(0.9) !important;
        }
        
        /* 그린 테마일 때 섹션 이미지 그레이스케일 (로고, 헤더, 푸터, 히어로 제외) */
        [data-theme="green"] section img:not(nav img):not(footer img):not(.hero-slide-bg) {
            filter: grayscale(100%) brightness(0.9);
            transition: filter 0.3s ease;
        }
        
        /* 그린 테마일 때 섹션 카드에 transition 추가 */
        [data-theme="green"] section .scroll-animate {
            transition: transform 0.3s ease;
        }
        
        /* 그린 테마일 때 섹션 카드 전체 호버 시 카드 스케일업 + 이미지 컬러 */
        [data-theme="green"] section .scroll-animate:hover {
            transform: scale(1.05);
        }
        
        /* 그린 테마일 때 섹션 카드 호버 시 이미지 컬러로 변경 */
        [data-theme="green"] section .scroll-animate:hover img:not(nav img):not(footer img):not(.hero-slide-bg),
        [data-theme="green"] section .bg-white:hover img:not(nav img):not(footer img):not(.hero-slide-bg),
        [data-theme="green"] section .grid:hover img:not(nav img):not(footer img):not(.hero-slide-bg) {
            filter: grayscale(0%) brightness(1);
        }
        
        /* 그린 테마일 때 섹션 이미지 직접 호버 시도 컬러로 변경 */
        [data-theme="green"] section img:not(nav img):not(footer img):not(.hero-slide-bg):hover {
            filter: grayscale(0%) brightness(1);
        }

        /* Hero Text Bounce Animation */
        @keyframes textBounce {
            0%, 35% {
                opacity: 0;
                transform: translateY(-60px) scale(0.9); /* Start higher */
            }
            40% {
                opacity: 1;
                transform: translateY(0) scale(1.05); /* SLAM! Fast drop */
            }
            45% {
                transform: translateY(-15px) scale(1.02); /* First Bounce up (Fast) */
            }
            50% {
                transform: translateY(0) scale(1); /* Land */
            }
            53% {
                transform: translateY(-5px) scale(1.01); /* Second Bounce up (Fast) */
            }
            55%, 100% {
                opacity: 1;
                transform: translateY(0) scale(1); /* Settle */
            }
        }

        .hero-text-animate {
            animation: textBounce 2s ease-out forwards;
        }