/* ================================================
   SPECIAL/bg_deco_layer
   메인 배경 데코 레이어 (position:fixed + z-index:-1)
   ================================================
   ★ 핵심 안전장치:
   - pointer-events:none → 마우스/터치 이벤트 모두 통과 (다른 섹션 클릭 무영향)
   - z-index:-1 → 모든 콘텐츠 뒤에 깔림
   - aria-hidden + role=presentation → 스크린리더 무시
   - prefers-reduced-motion → 동작 줄이기 자동 대응
   - forced-colors → 고대비 모드 자동 숨김
   ================================================ */

/* ★ 구조 C (joyagdol.com 패턴): fixed로 viewport에 깔림. 데코는 viewport 안 위치 + GSAP transform */
.bg_deco_layer_wrap {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: -1; /* ★ 콘텐츠 뒤 (정상) */
    pointer-events: none;
    overflow: hidden;
}

@media (max-width: 768px) {
    .bg_deco_layer_wrap {
        -webkit-mask-image: linear-gradient(to bottom,
            transparent 0,
            transparent var(--bgd-visual-mo, 60vh),
            #000 var(--bgd-visual-mo, 60vh),
            #000 100%);
        mask-image: linear-gradient(to bottom,
            transparent 0,
            transparent var(--bgd-visual-mo, 60vh),
            #000 var(--bgd-visual-mo, 60vh),
            #000 100%);
    }
}

/* 데코 1개 (이미지 박스) */
/* ★ top은 viewport 안 좌표 (0~100vh).
   예: top:20vh = 화면 첫 화면 20% 위치 (비주얼 영역 안)
       top:80vh = 화면 거의 하단
   스크롤 시 GSAP가 추가 transform으로 위로 밀어올림 → 화면 위로 떠오르는 패럴랙스 효과 */
.bg_deco_layer_wrap .bgd_deco {
    position: absolute;
    left: var(--d-left, 0);
    right: var(--d-right, auto);
    top: var(--d-top, 50vh);
    width: var(--d-size, 200px);
    height: var(--d-size, 200px);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;
    opacity: var(--d-opacity, 0.6);
    transform: rotate(var(--d-rotate, 0deg));
    will-change: transform;
    pointer-events: none;
}

/* raw HTML 데코 (SVG/lottie/iframe 등 alt에 직접 박힌 경우) */
.bg_deco_layer_wrap .bgd_deco_raw > img,
.bg_deco_layer_wrap .bgd_deco_raw > svg,
.bg_deco_layer_wrap .bgd_deco_raw > lottie-player,
.bg_deco_layer_wrap .bgd_deco_raw > video,
.bg_deco_layer_wrap .bgd_deco_raw > iframe,
.bg_deco_layer_wrap .bgd_deco_raw > canvas {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    pointer-events: none;
}

/* 모바일 크기 / 모바일 이미지 / PC 전용 옵션 */
@media (max-width: 768px) {
    .bg_deco_layer_wrap .bgd_deco {
        width: var(--d-size-mo, calc(var(--d-size, 200px) * 0.5));
        height: var(--d-size-mo, calc(var(--d-size, 200px) * 0.5));
    }
    /* 모바일 전용 이미지가 있으면 그걸로 교체 */
    .bg_deco_layer_wrap .bgd_deco[style*="--d-img-mo"] {
        background-image: var(--d-img-mo) !important;
    }
    .bg_deco_layer_wrap .bgd-deco-pc-only {
        display: none !important;
    }
}

/* PC에서 모바일 전용 데코 숨김 */
@media (min-width: 769px) {
    .bg_deco_layer_wrap .bgd-deco-mo-only {
        display: none !important;
    }
}

/* ================================================
   웹접근성 — 동작 줄이기 / 고대비
   ================================================ */

/* 동작 줄이기: 패럴랙스 transform 무효 + 정적 표시만 */
@media (prefers-reduced-motion: reduce) {
    .bg_deco_layer_wrap .bgd_deco {
        transform: rotate(var(--d-rotate, 0deg)) !important;
        transition: none !important;
        animation: none !important;
        will-change: auto;
    }
}

/* 고대비 모드: 데코 전체 숨김 (콘텐츠 명도 보장) */
@media (forced-colors: active) {
    .bg_deco_layer_wrap {
        display: none !important;
    }
}

/* 모바일 전체 끄기 옵션 (JS에서 wrap.style.display=none 처리, CSS는 백업) */
@media (max-width: 768px) {
    .bg_deco_layer_wrap.bgd-mobile-off {
        display: none !important;
    }
}

/* 인쇄 시 숨김 */
@media print {
    .bg_deco_layer_wrap { display: none !important; }
}