/* ============================================================
   sub-effects.css — munbunyang 서브배너 배경 효과 30종 (공유)
   적용 방법: <div class="mun-sub-banner bg-effect-a01">
   CSS 변수: --p(팔레트 기본), --fp(포인트), --a1/--a2/--a3(액센트)
   ============================================================ */

/* ── A그룹: 정적 그라디언트 (a01~a10) ── */
body[data-pal] .mun-sub-banner.bg-effect-a01{background:linear-gradient(135deg, var(--fp) 0%, var(--a1) 100%) !important;}
body[data-pal] .mun-sub-banner.bg-effect-a02{background:radial-gradient(ellipse at center, var(--a1) 0%, var(--p) 100%) !important;}
body[data-pal] .mun-sub-banner.bg-effect-a03{background:linear-gradient(to bottom, var(--p) 0%, var(--fp) 100%) !important;}
body[data-pal] .mun-sub-banner.bg-effect-a04{background:linear-gradient(to right, var(--fp) 0%, var(--p) 50%, var(--a1) 100%) !important;}
body[data-pal] .mun-sub-banner.bg-effect-a05{background:linear-gradient(135deg, var(--p) 0%, var(--a2) 50%, var(--a1) 100%) !important;}
body[data-pal] .mun-sub-banner.bg-effect-a06{background:linear-gradient(to right, var(--p) 0%, var(--a1) 40%, var(--a2) 60%, var(--p) 100%) !important;}
body[data-pal] .mun-sub-banner.bg-effect-a07{background:radial-gradient(circle at 30% 50%, var(--a1) 0%, var(--p) 100%) !important;}
body[data-pal] .mun-sub-banner.bg-effect-a08{background:radial-gradient(ellipse at top center, color-mix(in srgb, var(--a3) 60%, var(--a1)) 0%, var(--p) 100%) !important;}
body[data-pal] .mun-sub-banner.bg-effect-a09{background:linear-gradient(135deg, var(--fp) 0%, var(--p) 40%, var(--a2) 100%) !important;}
body[data-pal] .mun-sub-banner.bg-effect-a10{background:linear-gradient(to bottom right, var(--p) 0%, var(--a1) 50%, var(--a2) 100%) !important;}

/* ── B그룹: CSS 애니메이션 (b01~b10) ── */
@keyframes wzSubShimmer { 0%,100%{background-position:0% 50%} 50%{background-position:100% 50%} }
@keyframes wzSubBreath  { 0%,100%{filter:brightness(0.85)} 50%{filter:brightness(1.15)} }
@keyframes wzSubGlow    { 0%,100%{filter:brightness(0.9) saturate(0.9)} 50%{filter:brightness(1.1) saturate(1.2)} }
@keyframes wzSubFlow    { 0%{background-position:0% 50%} 50%{background-position:100% 50%} 100%{background-position:0% 50%} }
@keyframes wzSubPulse   { 0%,100%{opacity:0.85} 50%{opacity:1} }
@keyframes wzSubDawn    { 0%{filter:hue-rotate(0deg) brightness(0.85)} 50%{filter:hue-rotate(15deg) brightness(1.1)} 100%{filter:hue-rotate(0deg) brightness(0.85)} }
@keyframes wzSubSweep   { 0%{background-position:200% 0%} 100%{background-position:-200% 0%} }
@keyframes wzSubMist    { 0%,100%{filter:brightness(0.88) saturate(0.85)} 50%{filter:brightness(1.08) saturate(1.15)} }
@keyframes wzSubWave    { 0%,100%{background-position:0% 50%} 33%{background-position:100% 50%} 66%{background-position:50% 50%} }
@keyframes wzSubZoom    { 0%,100%{filter:brightness(0.9) saturate(0.95)} 50%{filter:brightness(1.1) saturate(1.1)} }

body[data-pal] .mun-sub-banner.bg-effect-b01{background:linear-gradient(135deg, var(--p) 0%, var(--a1) 50%, var(--p) 100%) !important;background-size:200% 200% !important;animation:wzSubShimmer 14s ease infinite;}
body[data-pal] .mun-sub-banner.bg-effect-b02{background:linear-gradient(135deg, var(--fp) 0%, var(--p) 50%, var(--a1) 100%) !important;animation:wzSubBreath 9s ease-in-out infinite;}
body[data-pal] .mun-sub-banner.bg-effect-b03{background:radial-gradient(ellipse at 50% 50%, color-mix(in srgb, var(--a1) 70%, var(--p)) 0%, var(--p) 100%) !important;animation:wzSubGlow 11s ease-in-out infinite;}
body[data-pal] .mun-sub-banner.bg-effect-b04{background:linear-gradient(270deg, var(--fp), var(--p), var(--a1), var(--p), var(--fp)) !important;background-size:300% 300% !important;animation:wzSubFlow 16s ease infinite;}
body[data-pal] .mun-sub-banner.bg-effect-b05{background:linear-gradient(to bottom right, var(--p) 0%, var(--a1) 100%) !important;animation:wzSubPulse 7s ease-in-out infinite;}
body[data-pal] .mun-sub-banner.bg-effect-b06{background:linear-gradient(135deg, var(--fp) 0%, var(--p) 100%) !important;animation:wzSubDawn 10s ease-in-out infinite;}
body[data-pal] .mun-sub-banner.bg-effect-b07{background:linear-gradient(to right, var(--p), var(--a1), var(--a2), var(--a1), var(--p)) !important;background-size:300% 100% !important;animation:wzSubSweep 12s ease-in-out infinite;}
body[data-pal] .mun-sub-banner.bg-effect-b08{background:radial-gradient(ellipse at 50% 50%, color-mix(in srgb, var(--a1) 60%, var(--p)) 0%, var(--p) 100%) !important;animation:wzSubMist 9s ease-in-out infinite;}
body[data-pal] .mun-sub-banner.bg-effect-b09{background:linear-gradient(270deg, var(--p), var(--a2), var(--a1), var(--a2), var(--p)) !important;background-size:400% 400% !important;animation:wzSubWave 18s ease infinite;}
body[data-pal] .mun-sub-banner.bg-effect-b10{background:linear-gradient(135deg, var(--fp) 0%, var(--a2) 50%, var(--p) 100%) !important;animation:wzSubZoom 8s ease-in-out infinite;}

/* ── C그룹: 복합 앰비언트 (c01~c10) ── */
body[data-pal] .mun-sub-banner.bg-effect-c01{background:linear-gradient(15deg, var(--fp) 0%, var(--p) 50%, var(--a1) 100%) !important;}
body[data-pal] .mun-sub-banner.bg-effect-c02{background:linear-gradient(to bottom, color-mix(in srgb, var(--a3) 70%, var(--a1)) 0%, var(--p) 55%, var(--fp) 100%) !important;}
body[data-pal] .mun-sub-banner.bg-effect-c03{background:radial-gradient(ellipse 120% 80% at 50% 50%, color-mix(in srgb, var(--a1) 60%, var(--p)) 0%, var(--fp) 100%) !important;}
body[data-pal] .mun-sub-banner.bg-effect-c04{background:radial-gradient(circle at 5% 95%, color-mix(in srgb, var(--a2) 80%, #fff) 0%, transparent 55%), radial-gradient(circle at 95% 5%, color-mix(in srgb, var(--a1) 80%, #fff) 0%, transparent 55%), var(--p) !important;}
body[data-pal] .mun-sub-banner.bg-effect-c05{background:radial-gradient(circle at 25% 50%, color-mix(in srgb, var(--a1) 70%, var(--p)) 0%, transparent 50%), radial-gradient(circle at 75% 50%, color-mix(in srgb, var(--a2) 70%, var(--p)) 0%, transparent 50%), var(--p) !important;}
body[data-pal] .mun-sub-banner.bg-effect-c06{background:linear-gradient(to bottom, color-mix(in srgb, var(--a3) 50%, var(--p)) 0%, var(--p) 50%, var(--fp) 100%) !important;}
body[data-pal] .mun-sub-banner.bg-effect-c07{background:radial-gradient(ellipse 200% 160% at 50% 0%, color-mix(in srgb, var(--a1) 70%, #fff) 0%, var(--p) 70%) !important;}
body[data-pal] .mun-sub-banner.bg-effect-c08{background:radial-gradient(ellipse 80% 60% at 50% 50%, color-mix(in srgb, var(--a1) 60%, var(--p)) 0%, var(--fp) 100%) !important;}
body[data-pal] .mun-sub-banner.bg-effect-c09{background:linear-gradient(to bottom, color-mix(in srgb, var(--p) 70%, var(--a1)) 0%, var(--p) 55%, var(--fp) 100%) !important;}
body[data-pal] .mun-sub-banner.bg-effect-c10{background:radial-gradient(ellipse at 50% -20%, color-mix(in srgb, var(--a1) 70%, #fff) 0%, var(--p) 100%) !important;}

/* bg-effect 적용 시 이미지 숨김 (그라디언트 우선) */
body[data-pal] .mun-sub-banner[class*="bg-effect-"] .mun-sub-banner-img { opacity: 0.08; }
body[data-pal] .mun-sub-banner[class*="bg-effect-"] .mun-sub-banner-default { z-index: 2; }