/**
 * 2뎁스 공통 CSS - 배경 투명도 + 블러
 * 모든 dep2 스킨에서 로드 (in_1 제외)
 *
 * 사용법: 배경 컨테이너에 data-dep2-bg 속성 추가
 * CSS 변수: --dep2-bg-opacity (0~1), --dep2-bg-blur (0~30px)
 */

/* 배경 컨테이너: 상대 위치 + 블러 */
[data-dep2-bg] {
    position: relative;
    backdrop-filter: blur(var(--dep2-bg-blur, 0px));
    -webkit-backdrop-filter: blur(var(--dep2-bg-blur, 0px));
}

/* ::before로 배경색 + 투명도 (자식에 영향 없음) */
[data-dep2-bg]::before {
    content: "";
    position: absolute;
    inset: 0;
    background-color: var(--dep2-bg-base-color, var(--dynamic-bg-color, var(--primary)));
    opacity: var(--dep2-bg-opacity, 1);
    z-index: 0;
    pointer-events: none;
    border-radius: inherit;
}

/* 자식 요소를 ::before 위에 표시 */
[data-dep2-bg] > * {
    position: relative;
    z-index: 1;
}

/* ★ 2뎁스 스크롤 고정 (dep2_sticky) */
.dep2_fixed {
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    bottom: auto !important;
    transform: none !important;
    width: 100% !important;
    max-width: 100% !important;
    z-index: 999 !important;
    transition: none !important;
}
.dep2_fixed_placeholder {
    pointer-events: none;
}