/* ==========================================================================
   Hero Background Image Fix
   전체 히어로 섹션의 빨간색 배경을 haikei.png로 교체
   ========================================================================== */

/* 히어로 섹션 전체 배경을 haikei.png로 교체 */
.hero {
    position: relative !important;
    min-height: 75vh !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
    
    /* 기존 빨간색 그라디언트를 haikei.png 이미지로 교체 */
    background: url('../images/haikei.png') center center/cover no-repeat !important;
    background-attachment: fixed !important;
    
    /* 이미지 위에 약간의 오버레이로 텍스트 가독성 향상 */
    background-blend-mode: multiply !important;
    background-color: rgba(239, 105, 90, 0.3) !important;
}

/* 배경 애니메이션 요소는 유지하되 투명도 조정 */
.hero-bg-animation {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    z-index: 1 !important;
    opacity: 0.1 !important;
}

/* 히어로 콘텐츠의 z-index 조정으로 텍스트가 이미지 위에 표시되도록 */
.hero-content {
    position: relative !important;
    z-index: 10 !important;
    text-align: center !important;
}

/* 텍스트 가독성을 위한 텍스트 쉐도우 강화 */
.hero-title {
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.7) !important;
    color: white !important;
}

.hero-subtitle {
    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.6) !important;
    color: rgba(255, 255, 255, 0.95) !important;
}

.hero-badge {
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.3) !important;
    box-shadow: 
        0 4px 12px rgba(0, 0, 0, 0.4),
        0 2px 6px rgba(0, 0, 0, 0.3) !important;
}

/* 통계 수치 섹션 가독성 향상 */
.hero-stats {
    background: rgba(255, 255, 255, 0.1) !important;
    backdrop-filter: blur(10px) !important;
    border-radius: var(--radius-lg) !important;
    padding: var(--space-4) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
}

.stat-number {
    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.8) !important;
    color: white !important;
}

.stat-label {
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6) !important;
    color: rgba(255, 255, 255, 0.9) !important;
}

/* CTA 버튼 가독성 향상 */
.btn-primary {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3) !important;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3) !important;
}

.btn-secondary {
    background: rgba(255, 255, 255, 0.15) !important;
    backdrop-filter: blur(10px) !important;
    border: 2px solid rgba(255, 255, 255, 0.3) !important;
    color: white !important;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3) !important;
}

.btn-secondary:hover {
    background: rgba(255, 255, 255, 0.25) !important;
    border-color: rgba(255, 255, 255, 0.5) !important;
}

/* 반응형 조정 */
@media (max-width: 768px) {
    .hero {
        background-size: cover !important;
        background-position: center center !important;
        background-attachment: scroll !important; /* 모바일에서는 fixed 대신 scroll 사용 */
    }
}

@media (max-width: 480px) {
    .hero {
        min-height: 60vh !important;
        background-size: cover !important;
        background-position: center center !important;
    }
    
    .hero-stats {
        margin: 0 var(--space-2) !important;
        padding: var(--space-3) !important;
    }
}

/* 다크 모드에서의 대응 */
@media (prefers-color-scheme: dark) {
    .hero {
        background-color: rgba(26, 32, 44, 0.4) !important;
    }
}

/* 고대비 모드에서의 대응 */
@media (prefers-contrast: high) {
    .hero {
        background-color: rgba(239, 105, 90, 0.6) !important;
    }
    
    .hero-title,
    .hero-subtitle,
    .stat-number,
    .stat-label {
        text-shadow: 0 0 4px rgba(0, 0, 0, 1) !important;
    }
}

/* 인쇄 시에는 간단한 배경으로 대체 */
@media print {
    .hero {
        background: var(--primary-color) !important;
        background-image: none !important;
    }
}

/* 애니메이션 최적화 */
@media (prefers-reduced-motion: reduce) {
    .hero {
        background-attachment: scroll !important;
    }
}