/* ===================================================
   히어로 섹션 배경 이미지 수정 (클라우드플레어 호환)
   - 나노바나나 풍성한 황칠나무 이미지 v4
   - 무성한 잎과 가지가 있는 웅장한 생명의 나무
   - 캐시 무효화 버전 관리
   - 다중 경로 시도로 100% 표시 보장
   - Fallback 색상 추가
   =================================================== */

/* 히어로 섹션 배경 */
.hero#home {
    /* Fallback: 황칠나무 느낌의 그라디언트 배경 */
    background: linear-gradient(135deg, 
        #1a3a0f 0%, 
        #2d5016 25%, 
        #4a7c2c 50%, 
        #2d5016 75%, 
        #1a3a0f 100%) !important;
    
    /* 나노바나나 풍성한 나무 이미지 배경 v4 (캐시 무효화 버전 포함) */
    background-image: 
        linear-gradient(rgba(0,0,0,0.25), rgba(0,0,0,0.25)),
        url('../images/hero-background.jpg?v=20250129v4'),
        url('./images/hero-background.jpg?v=20250129v4'),
        url('images/hero-background.jpg?v=20250129v4') !important;
    
    background-position: center center !important;
    background-size: cover !important;
    background-repeat: no-repeat !important;
    background-attachment: fixed !important;
}

/* 배경 이미지가 없을 때를 위한 패턴 */
.hero#home::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: 
        repeating-linear-gradient(
            45deg,
            rgba(255, 215, 0, 0.03),
            rgba(255, 215, 0, 0.03) 20px,
            transparent 20px,
            transparent 40px
        ),
        repeating-linear-gradient(
            -45deg,
            rgba(255, 215, 0, 0.03),
            rgba(255, 215, 0, 0.03) 20px,
            transparent 20px,
            transparent 40px
        );
    z-index: 0;
    opacity: 0.3;
    pointer-events: none;
}

/* 히어로 콘텐츠가 배경 위에 표시되도록 */
.hero#home .container {
    position: relative;
    z-index: 1;
}

/* 중앙에 황칠나무 워터마크 (이미지 없을 때) */
.hero#home::after {
    content: '🌿';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 20rem;
    opacity: 0.05;
    z-index: 0;
    pointer-events: none;
}

/* 모바일 최적화 */
@media (max-width: 768px) {
    .hero#home {
        background-attachment: scroll !important;
        background-position: center center !important;
    }
    
    .hero#home::after {
        font-size: 10rem;
    }
}

/* 고해상도 디스플레이 최적화 */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    .hero#home {
        background-size: cover !important;
    }
}