/* ================================================
   SUB/bg_deco — 서브페이지 배경 데코 레이어
   메인 SPECIAL/bg_deco_layer 의 서브 전용 변형
   ================================================
   ★ 핵심 안전장치 (메인과 동일):
   - position:fixed + z-index:-1 + pointer-events:none → 콘텐츠/클릭 무영향
   - aria-hidden + role=presentation → 스크린리더 무시
   - prefers-reduced-motion / forced-colors → 웹접근성 자동 대응
   ------------------------------------------------
   ★ 서브 추가분:
   - blur (레이어별 흐림)
   - 순차 등장 (fade-in delay, 데코 순서대로)
   - 상/하/좌/우 자유 배치 (top/bottom + left/right)
   ================================================ */

.sub_bg_deco_wrap {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: -1;            /* 콘텐츠 뒤 */
    pointer-events: none;
    overflow: hidden;
}

/* 데코 1개 */
.sub_bg_deco_wrap .sbd_deco {
    position: absolute;
    left: var(--d-left, auto);
    right: var(--d-right, auto);
    top: var(--d-top, auto);
    bottom: var(--d-bottom, auto);
    width: var(--d-size, 200px);
    height: var(--d-size, 200px);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;
    opacity: 0;             /* ★ 순차 등장: 초기 0 → JS/애니로 --d-opacity 까지 */
    transform: rotate(var(--d-rotate, 0deg));
    filter: blur(var(--d-blur, 0px));
    will-change: transform, opacity;
    pointer-events: none;
    animation: sbd_fade_in 0.9s ease-out forwards;
    animation-delay: var(--d-delay, 0s);
}

@keyframes sbd_fade_in {
    from { opacity: 0; }
    to   { opacity: var(--d-opacity, 0.6); }
}

/* raw HTML 데코 (SVG/lottie/iframe 등) */
.sub_bg_deco_wrap .sbd_deco_raw > img,
.sub_bg_deco_wrap .sbd_deco_raw > svg,
.sub_bg_deco_wrap .sbd_deco_raw > lottie-player,
.sub_bg_deco_wrap .sbd_deco_raw > video,
.sub_bg_deco_wrap .sbd_deco_raw > iframe,
.sub_bg_deco_wrap .sbd_deco_raw > canvas {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    pointer-events: none;
}

/* 모바일 크기 / 모바일 이미지 / PC 전용 옵션 */
@media (max-width: 768px) {
    .sub_bg_deco_wrap .sbd_deco {
        width: var(--d-size-mo, calc(var(--d-size, 200px) * 0.6));
        height: var(--d-size-mo, calc(var(--d-size, 200px) * 0.6));
        filter: blur(var(--d-blur-mo, var(--d-blur, 0px)));
    }
    .sub_bg_deco_wrap .sbd_deco[style*="--d-img-mo"] {
        background-image: var(--d-img-mo) !important;
    }
    .sub_bg_deco_wrap .sbd-deco-pc-only {
        display: none !important;
    }
}

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

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

/* 동작 줄이기: 패럴랙스/애니 무효 + 정적 표시 (즉시 최종 투명도) */
@media (prefers-reduced-motion: reduce) {
    .sub_bg_deco_wrap .sbd_deco {
        transform: rotate(var(--d-rotate, 0deg)) !important;
        transition: none !important;
        animation: none !important;
        opacity: var(--d-opacity, 0.6);
        will-change: auto;
    }
}

/* 고대비 모드: 데코 전체 숨김 */
@media (forced-colors: active) {
    .sub_bg_deco_wrap {
        display: none !important;
    }
}

/* 모바일 전체 끄기 옵션 */
@media (max-width: 768px) {
    .sub_bg_deco_wrap.sbd-mobile-off {
        display: none !important;
    }
}

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