/* sky.css — 공용 하늘/구름 배경 (메인 + 서브페이지 공유).
   짝 = /shared/sky.js (SVG 주입 + 구름 생성 + 패럴랙스).
   페이지는 <div class="backdrop" aria-hidden="true"></div> 하나만 두면 된다 — svg 는 JS 가 넣는다.

   배경 그라데이션은 --backdrop-gradient 로 오버라이드 가능(미설정 시 기본 = 하늘→노을→바다).
   .backdrop 자체는 CSS 만으로 즉시 칠해지므로 JS 지연과 무관(FOUC 없음). */
.backdrop { position:absolute; top:0; left:0; right:0; bottom:0; z-index:0; pointer-events:none; overflow:hidden;
  background:var(--backdrop-gradient, linear-gradient(180deg,
    #cfe6f7 0%, #d8e9f6 10%, #e6f0f9 26%, #eef4f9 46%,
    #f3f3f6 62%, #f7eee9 78%, #f7e2d5 90%, #f3cdb8 100%)); }

/* 구름 = 단일 SVG fractalNoise 시스템. 심볼·필터 공유(SSOT). 클라우드 요소는 JS 가 CFG 로
   생성(개수·크기·위치·간격 랜덤) + 0.5초 주기 가로 이동. 모양/질감/설정은 심볼·필터·CFG 한 곳. */
/* 높이·페이드 마스크도 페이지가 덮을 수 있다(--sky-height / --sky-mask).
   미설정 시 아래 기본값 = 메인 페이지의 기존 값과 동일한 계산결과. */
.sky { position:absolute; top:0; left:0; width:100%; height:var(--sky-height, clamp(540px,64vh,800px));
  overflow:visible; will-change:transform;
  -webkit-mask-image:var(--sky-mask, linear-gradient(180deg,#000 0%,#000 52%,transparent 92%));
          mask-image:var(--sky-mask, linear-gradient(180deg,#000 0%,#000 52%,transparent 92%)); }
.sky .far  { opacity:.8; }
.sky .near { opacity:.97; }
.sky .cd { will-change:transform; }