/* 3D 전용 스타일 — 3D 가 있는 페이지에서만 불러와요.
   색은 아래 --3d-* 토큰만 바꾸면 3D 도(캔버스 안 색까지) 따라가요. 3d/*.js 는 색 값을 갖지 않아요.
   배치: 검은 히어로 블록(.hero-stage) 안에서 오른쪽 열을 차지하고, 좁은 화면에서는 제목 아래 띠가 돼요. */
:root {
  --3d-accent: var(--hi, #C6F432);   /* 라임 점 */
  --3d-ink: var(--on-blk, #FFFFFF);  /* 흰 점 */
  --3d-muted: #8C8C8C;               /* 회색 점 */
  --3d-hero-w: 44%;
  --3d-hero-shift: 0.1;              /* 구름을 좌우로 밀기(-1~1) */
  --3d-hero-mask: linear-gradient(90deg, transparent 0, #000 40%);
}
.hero-3d { position: absolute; z-index: 0; top: 0; right: 0; bottom: 0; width: var(--3d-hero-w); pointer-events: none; -webkit-mask-image: var(--3d-hero-mask); mask-image: var(--3d-hero-mask); }
.hero-3d canvas { display: block; width: 100%; height: 100%; touch-action: pan-y; }
.hero-3d-fb { display: none; width: 100%; height: 100%; }
.hero-3d.is-fallback .hero-3d-fb { display: block; }
.hero-3d-fb .k0 { fill: var(--3d-accent); } .hero-3d-fb .k1 { fill: var(--3d-ink); } .hero-3d-fb .k2 { fill: var(--3d-muted); }
@media (max-width: 1100px) {  /* 제목을 가리지 않게: 글 아래 띠(제목과 겹치지 않음) */
  .hero-stage { min-height: 0; }
  .hero-3d { position: relative; width: 100%; height: 240px; order: 1; --3d-hero-shift: 0; --3d-hero-mask: none; margin-top: -12px; }
  .hero-stage .blk-foot { order: 2; }
}