/* ============================================================
   양쪽 특수효과 — 본문 좌우 여백 장식 레이어

   ★ 본문 폭·위치에 절대 관여하지 않습니다.
     position:fixed · pointer-events:none · aria-hidden 이라
     레이아웃(폭·x좌표·scrollWidth)에 들어가지 않습니다.
   ★ 상담 버튼·챗봇·헤더·고정 CTA 보다 항상 아래(z-index)이며,
     버튼 주변에는 assets/js/side-fx.js 가 실제 무효과 안전영역을 만듭니다.
   ★ <html data-fx="..."> 가 있을 때만 보입니다 (기본은 꺼짐).
   ============================================================ */
#sideFx{
  position:fixed;inset:0;z-index:1;                 /* 헤더(50)·고정 CTA(60~)·챗봇(200) 보다 아래 */
  pointer-events:none;overflow:clip;
  contain:strict;                                    /* 바깥 레이아웃에 영향을 주지 않는다 */
  display:none;
}
html[data-fx] #sideFx{display:block}
#sideFx .sideFx__rail{
  position:absolute;top:0;bottom:0;overflow:clip;
  opacity:var(--fx-op,.26);
  --fx-dur:30s;
}
#sideFx .sideFx__rail[hidden]{display:none}
#sideFx canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
/* 위·아래 가장자리는 부드럽게 사라지게 (섹션 경계에서 튀지 않는다) */
#sideFx .sideFx__rail::after{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg, var(--fx-edge, rgba(0,0,0,.0)) 0%, transparent 12%, transparent 88%, var(--fx-edge, rgba(0,0,0,0)) 100%);
}

/* ── CSS 흐름 레이어 ────────────────────────────────────────── */
#sideFx .fx{position:absolute;inset:-10% 0;will-change:transform}
@media (prefers-reduced-motion:no-preference){
  #sideFx .fx--move{animation:fxFlow var(--fx-dur) linear infinite}
  #sideFx .fx--move-rev{animation:fxFlow var(--fx-dur) linear infinite reverse}
  #sideFx .fx--wave{animation:fxWave calc(var(--fx-dur) * 1.4) ease-in-out infinite alternate}
  #sideFx .fx--glint{animation:fxGlint var(--fx-dur) ease-in-out infinite}
  #sideFx .fx--drift{animation:fxDrift calc(var(--fx-dur) * 1.8) ease-in-out infinite alternate}
}
@keyframes fxFlow{from{transform:translate3d(0,-20%,0)}to{transform:translate3d(0,20%,0)}}
@keyframes fxWave{from{transform:translate3d(-6%,-4%,0) rotate(-1.2deg)}to{transform:translate3d(6%,4%,0) rotate(1.2deg)}}
@keyframes fxGlint{0%,100%{opacity:.15}45%{opacity:1}55%{opacity:.35}}
@keyframes fxDrift{from{transform:translate3d(0,-6%,0) scale(1)}to{transform:translate3d(0,6%,0) scale(1.06)}}

/* 배경을 물들이던 넓은 빛무리(lumin)·오로라(aurora)는 없앴습니다 (2026-09-10).
   좌우에서 내려오는 입자와 얇은 선 무늬만 남깁니다 — assets/js/side-fx.js 의 TINT_BEAMS 참고. */





/* 실크 — 넓고 부드러운 한 줄기 */
#sideFx .fx--silk{
  background-image:linear-gradient(180deg, transparent 0%, var(--fx-c1) 42%, var(--fx-glow) 50%, var(--fx-c1) 58%, transparent 100%);
  filter:blur(.4px);
}
/* 가장자리 글린트 */
#sideFx .fx--edge{
  background-image:linear-gradient(90deg, var(--fx-c1) 0 var(--fx-w,2px), transparent var(--fx-w,2px));
  filter:drop-shadow(0 0 1px var(--fx-outline)) drop-shadow(0 0 4px var(--fx-glow));
}
#sideFx .sideFx__rail--right .fx--edge{background-image:linear-gradient(270deg, var(--fx-c1) 0 var(--fx-w,2px), transparent var(--fx-w,2px))}
/* 리본 */
#sideFx .fx--ribbon{
  background-image:linear-gradient(180deg, transparent, var(--fx-c1) 20%, var(--fx-glow) 50%, var(--fx-c1) 80%, transparent);
  -webkit-mask-image:repeating-linear-gradient(180deg, #000 0 60px, transparent 60px 120px);
  mask-image:repeating-linear-gradient(180deg, #000 0 60px, transparent 60px 120px);
}
/* 라이트 레인 (짧은 선) */
#sideFx .fx--rain{
  background-image:repeating-linear-gradient(180deg,
    var(--fx-c1) 0 14px, transparent 14px var(--fx-gap,34px));
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 40%, transparent);
  mask-image:linear-gradient(90deg, transparent, #000 40%, transparent);
}

/* 통신사 컬러 흐름 */
#sideFx .fx--carrier{
  background-image:repeating-linear-gradient(180deg,
    #3617CE 0 3px, transparent 3px 40px,
    #E6002D 40px 43px, transparent 43px 80px,
    #E6007E 80px 83px, transparent 83px 120px,
    var(--fx-glow) 120px 123px, transparent 123px 170px);
}
/* 모던 지오메트릭 */
#sideFx .fx--silk,#sideFx .fx--ribbon,#sideFx .fx--rain,#sideFx .fx--carrier,#sideFx .fx--geo{
  filter:drop-shadow(0 0 1px var(--fx-outline));
}
#sideFx .fx--geo{
  background-image:repeating-linear-gradient(135deg, var(--fx-c1) 0 1px, transparent 1px var(--fx-gap,30px)),
                   radial-gradient(circle at 50% 10%, var(--fx-c1) 0 1.2px, transparent 1.4px);
  background-size:auto, 100% 90px;
}
/* 정적 장식 (동작 감소·저사양·모바일 가장자리) — 움직이지 않고 아주 옅게
   ★ 무엇을 정적으로 둘지는 assets/js/side-fx.js 의 policy()·reduced()·lowEnd()·saveData() 가 정하고
     그 결과를 #sideFx.is-static 으로 알려 줍니다.
     예전에는 html[data-fx-rm="static"] 도 함께 잡아서, 동작 감소를 쓰지 않는 손님에게도
     효과가 항상 멈춰 있었습니다 (관리자가 고른 것은 '동작 감소일 때의 처리'일 뿐입니다). */
#sideFx.is-static .fx{animation:none !important}
#sideFx.is-static{opacity:.7}
@media (prefers-reduced-motion:reduce){
  #sideFx .fx{animation:none !important}
  html[data-fx-rm="off"] #sideFx{display:none !important}
}