/* 폰트 설정 */
@import url('https://cdn.jsdelivr.net/gh/fonts-archive/Paperlogy/subsets/Paperlogy-dynamic-subset.css');

@font-face {
    font-family: 'Geist';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('../fonts/caa3a2e1cccd8315-s.p.853070df.woff2') format('woff2');
}

@font-face {
    font-family: 'Geist Mono';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('../fonts/797e433ab948586e-s.p.dbea232f.woff2') format('woff2');
}

/* 기본 설정 */
:root {
    --font-geist-sans: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-geist-mono: 'Geist Mono', monospace;
}

body {
    font-family: var(--font-geist-sans);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* 애니메이션 */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeInRight {
    from {
        opacity: 0;
        transform: translateX(20px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes scaleIn {
    from {
        opacity: 0;
        transform: scale(0.3);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes float {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-10px);
    }
}

@keyframes bounce {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-5px);
    }
}

/* 애니메이션 클래스 */
.animate-fade-in-up {
    animation: fadeInUp 0.6s ease-out forwards;
}

.animate-fade-in-right {
    animation: fadeInRight 0.6s ease-out forwards;
}

.animate-scale-in {
    animation: scaleIn 0.5s ease-out forwards;
}

.animate-float {
    animation: float 3s ease-in-out infinite;
}

.animate-bounce-slow {
    animation: bounce 2s ease-in-out infinite;
}

/* 지연 애니메이션 */
.delay-100 { animation-delay: 0.1s; }
.delay-200 { animation-delay: 0.2s; }
.delay-300 { animation-delay: 0.3s; }
.delay-400 { animation-delay: 0.4s; }
.delay-500 { animation-delay: 0.5s; }
.delay-600 { animation-delay: 0.6s; }
.delay-700 { animation-delay: 0.7s; }
.delay-800 { animation-delay: 0.8s; }

/* 초기 상태 (애니메이션 전) */
.animate-on-scroll {
    opacity: 0;
}

/* 후기 버블 - 중앙에서 바깥으로 퍼지는 애니메이션 (원본과 동일) */

/* 각 버블의 최종 위치 (원본 좌표 기반) */
.review-bubble {
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 10;
    transform: translate(-50%, -50%) scale(0.3);
    opacity: 0;
}

/* 버블 1: x:0, y:-350 (위쪽 중앙) */
.review-bubble:nth-child(1) {
    animation: bubble1 7s ease-out infinite;
    animation-delay: 0s;
}
@keyframes bubble1 {
    0% { opacity: 0; transform: translate(-50%, -50%) scale(0.3); }
    15% { opacity: 1; transform: translate(-50%, calc(-50% - 105px)) scale(1); }
    60% { opacity: 1; transform: translate(-50%, calc(-50% - 210px)) scale(1); }
    85% { opacity: 1; transform: translate(-50%, calc(-50% - 350px)) scale(1); }
    100% { opacity: 0; transform: translate(-50%, calc(-50% - 420px)) scale(0.8); }
}

/* 버블 2: x:280, y:-280 (우상단) */
.review-bubble:nth-child(2) {
    animation: bubble2 7s ease-out infinite;
    animation-delay: 0.4s;
}
@keyframes bubble2 {
    0% { opacity: 0; transform: translate(-50%, -50%) scale(0.3); }
    15% { opacity: 1; transform: translate(calc(-50% + 84px), calc(-50% - 84px)) scale(1); }
    60% { opacity: 1; transform: translate(calc(-50% + 168px), calc(-50% - 168px)) scale(1); }
    85% { opacity: 1; transform: translate(calc(-50% + 280px), calc(-50% - 280px)) scale(1); }
    100% { opacity: 0; transform: translate(calc(-50% + 336px), calc(-50% - 336px)) scale(0.8); }
}

/* 버블 3: x:400, y:0 (오른쪽) */
.review-bubble:nth-child(3) {
    animation: bubble3 7s ease-out infinite;
    animation-delay: 0.8s;
}
@keyframes bubble3 {
    0% { opacity: 0; transform: translate(-50%, -50%) scale(0.3); }
    15% { opacity: 1; transform: translate(calc(-50% + 120px), -50%) scale(1); }
    60% { opacity: 1; transform: translate(calc(-50% + 240px), -50%) scale(1); }
    85% { opacity: 1; transform: translate(calc(-50% + 400px), -50%) scale(1); }
    100% { opacity: 0; transform: translate(calc(-50% + 480px), -50%) scale(0.8); }
}

/* 버블 4: x:280, y:280 (우하단) */
.review-bubble:nth-child(4) {
    animation: bubble4 7s ease-out infinite;
    animation-delay: 1.2s;
}
@keyframes bubble4 {
    0% { opacity: 0; transform: translate(-50%, -50%) scale(0.3); }
    15% { opacity: 1; transform: translate(calc(-50% + 84px), calc(-50% + 84px)) scale(1); }
    60% { opacity: 1; transform: translate(calc(-50% + 168px), calc(-50% + 168px)) scale(1); }
    85% { opacity: 1; transform: translate(calc(-50% + 280px), calc(-50% + 280px)) scale(1); }
    100% { opacity: 0; transform: translate(calc(-50% + 336px), calc(-50% + 336px)) scale(0.8); }
}

/* 버블 5: x:0, y:350 (아래쪽 중앙) */
.review-bubble:nth-child(5) {
    animation: bubble5 7s ease-out infinite;
    animation-delay: 1.6s;
}
@keyframes bubble5 {
    0% { opacity: 0; transform: translate(-50%, -50%) scale(0.3); }
    15% { opacity: 1; transform: translate(-50%, calc(-50% + 105px)) scale(1); }
    60% { opacity: 1; transform: translate(-50%, calc(-50% + 210px)) scale(1); }
    85% { opacity: 1; transform: translate(-50%, calc(-50% + 350px)) scale(1); }
    100% { opacity: 0; transform: translate(-50%, calc(-50% + 420px)) scale(0.8); }
}

/* 버블 6: x:-280, y:280 (좌하단) */
.review-bubble:nth-child(6) {
    animation: bubble6 7s ease-out infinite;
    animation-delay: 2s;
}
@keyframes bubble6 {
    0% { opacity: 0; transform: translate(-50%, -50%) scale(0.3); }
    15% { opacity: 1; transform: translate(calc(-50% - 84px), calc(-50% + 84px)) scale(1); }
    60% { opacity: 1; transform: translate(calc(-50% - 168px), calc(-50% + 168px)) scale(1); }
    85% { opacity: 1; transform: translate(calc(-50% - 280px), calc(-50% + 280px)) scale(1); }
    100% { opacity: 0; transform: translate(calc(-50% - 336px), calc(-50% + 336px)) scale(0.8); }
}

/* 버블 7: x:-400, y:0 (왼쪽) */
.review-bubble:nth-child(7) {
    animation: bubble7 7s ease-out infinite;
    animation-delay: 2.4s;
}
@keyframes bubble7 {
    0% { opacity: 0; transform: translate(-50%, -50%) scale(0.3); }
    15% { opacity: 1; transform: translate(calc(-50% - 120px), -50%) scale(1); }
    60% { opacity: 1; transform: translate(calc(-50% - 240px), -50%) scale(1); }
    85% { opacity: 1; transform: translate(calc(-50% - 400px), -50%) scale(1); }
    100% { opacity: 0; transform: translate(calc(-50% - 480px), -50%) scale(0.8); }
}

/* 버블 8: x:-280, y:-280 (좌상단) */
.review-bubble:nth-child(8) {
    animation: bubble8 7s ease-out infinite;
    animation-delay: 2.8s;
}
@keyframes bubble8 {
    0% { opacity: 0; transform: translate(-50%, -50%) scale(0.3); }
    15% { opacity: 1; transform: translate(calc(-50% - 84px), calc(-50% - 84px)) scale(1); }
    60% { opacity: 1; transform: translate(calc(-50% - 168px), calc(-50% - 168px)) scale(1); }
    85% { opacity: 1; transform: translate(calc(-50% - 280px), calc(-50% - 280px)) scale(1); }
    100% { opacity: 0; transform: translate(calc(-50% - 336px), calc(-50% - 336px)) scale(0.8); }
}

/* 버블 9: x:180, y:-320 */
.review-bubble:nth-child(9) {
    animation: bubble9 7s ease-out infinite;
    animation-delay: 3.2s;
}
@keyframes bubble9 {
    0% { opacity: 0; transform: translate(-50%, -50%) scale(0.3); }
    15% { opacity: 1; transform: translate(calc(-50% + 54px), calc(-50% - 96px)) scale(1); }
    60% { opacity: 1; transform: translate(calc(-50% + 108px), calc(-50% - 192px)) scale(1); }
    85% { opacity: 1; transform: translate(calc(-50% + 180px), calc(-50% - 320px)) scale(1); }
    100% { opacity: 0; transform: translate(calc(-50% + 216px), calc(-50% - 384px)) scale(0.8); }
}

/* 버블 10: x:320, y:180 */
.review-bubble:nth-child(10) {
    animation: bubble10 7s ease-out infinite;
    animation-delay: 3.6s;
}
@keyframes bubble10 {
    0% { opacity: 0; transform: translate(-50%, -50%) scale(0.3); }
    15% { opacity: 1; transform: translate(calc(-50% + 96px), calc(-50% + 54px)) scale(1); }
    60% { opacity: 1; transform: translate(calc(-50% + 192px), calc(-50% + 108px)) scale(1); }
    85% { opacity: 1; transform: translate(calc(-50% + 320px), calc(-50% + 180px)) scale(1); }
    100% { opacity: 0; transform: translate(calc(-50% + 384px), calc(-50% + 216px)) scale(0.8); }
}

/* 버블 11: x:-180, y:320 */
.review-bubble:nth-child(11) {
    animation: bubble11 7s ease-out infinite;
    animation-delay: 4s;
}
@keyframes bubble11 {
    0% { opacity: 0; transform: translate(-50%, -50%) scale(0.3); }
    15% { opacity: 1; transform: translate(calc(-50% - 54px), calc(-50% + 96px)) scale(1); }
    60% { opacity: 1; transform: translate(calc(-50% - 108px), calc(-50% + 192px)) scale(1); }
    85% { opacity: 1; transform: translate(calc(-50% - 180px), calc(-50% + 320px)) scale(1); }
    100% { opacity: 0; transform: translate(calc(-50% - 216px), calc(-50% + 384px)) scale(0.8); }
}

/* 버블 12: x:-320, y:-180 */
.review-bubble:nth-child(12) {
    animation: bubble12 7s ease-out infinite;
    animation-delay: 4.4s;
}
@keyframes bubble12 {
    0% { opacity: 0; transform: translate(-50%, -50%) scale(0.3); }
    15% { opacity: 1; transform: translate(calc(-50% - 96px), calc(-50% - 54px)) scale(1); }
    60% { opacity: 1; transform: translate(calc(-50% - 192px), calc(-50% - 108px)) scale(1); }
    85% { opacity: 1; transform: translate(calc(-50% - 320px), calc(-50% - 180px)) scale(1); }
    100% { opacity: 0; transform: translate(calc(-50% - 384px), calc(-50% - 216px)) scale(0.8); }
}

/* 모바일에서 거리 축소 */
@media (max-width: 768px) {
    .review-bubble {
        font-size: 11px !important;
        padding: 6px 10px !important;
    }
}

/* 호버 효과 */
.card-hover {
    transition: all 0.3s ease;
}

.card-hover:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
}

/* 버튼 효과 */
.btn-hover {
    transition: all 0.3s ease;
}

.btn-hover:hover {
    transform: scale(1.05);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}

.btn-hover:active {
    transform: scale(0.95);
}

/* 플로팅 버튼 */
.floating-buttons {
    position: fixed;
    right: 1rem;
    bottom: 1rem;
    z-index: 50;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.75rem;
}

@media (min-width: 768px) {
    .floating-buttons {
        right: 1.5rem;
        bottom: 1.5rem;
    }
}

/* 스크롤 다운 화살표 */
.scroll-indicator {
    animation: bounce 2s ease-in-out infinite;
}

/* 그라데이션 텍스트 */
.gradient-text {
    background: linear-gradient(135deg, #3080ff 0%, #1447e6 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* 카드 그림자 */
.card-shadow {
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

.card-shadow-lg {
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}