/* ==========================================================================
   NINECONCEPT — Home Hero 3D (Design Revision 008)
   Hero stays pinned (position: fixed) behind the page; everything after it scrolls over.
   Scoped under .nc-h3d
   ========================================================================== */
/* fixed (not sticky): .public-app-container / body are overflow scroll containers, which breaks sticky */
.nc-h3d { position:fixed; top:0; left:0; right:0; z-index:0; height:100vh; height:100svh; min-height:560px; overflow:hidden; background:#060608; color:#F2F2F4; }
.nc-h3d ~ *,
.public-main-content:has(.nc-h3d) ~ *,
.public-app-container:has(.nc-h3d) .pub-footer { position:relative; z-index:1; }
/* reserve the hero's space in the flow */
.nc-h3d + * { margin-top:100vh; margin-top:max(560px, 100svh); }
.nc-h3d-gl { position:absolute; inset:0; width:100%; height:100%; display:block; }
.nc-h3d-vignette { position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(120% 90% at 50% 55%, transparent 40%, rgba(6,6,8,.85) 100%); }

.nc-h3d-reel { position:absolute; top:calc(76px + 24px); right:clamp(20px,4vw,48px); z-index:4; }

.nc-h3d-title { position:absolute; left:0; right:0; bottom:clamp(56px,11vh,130px); z-index:2; pointer-events:none; }
.nc-h3d-title h1 { font-family:var(--pub-font-display,'Outfit',sans-serif); font-weight:800;
  font-size:calc(clamp(88px,17.5vw,360px) * var(--fs,1)); line-height:.8; letter-spacing:-.045em;
  white-space:nowrap; margin:0 0 0 -.06em; color:#F2F2F4; transform:translateX(var(--tx,0px)); will-change:transform; }
.nc-h3d-o { color:transparent; -webkit-text-stroke:1px rgba(242,242,244,.55); }

.nc-h3d-center { position:absolute; top:55%; left:50%; transform:translate(-50%,-50%); z-index:2; text-align:center;
  display:flex; flex-direction:column; align-items:center; gap:18px; will-change:transform,opacity; }
.nc-h3d-kicker { font:500 11px/1 var(--pub-font-mono,'JetBrains Mono',monospace); letter-spacing:.32em; color:var(--pub-lime,#CCFF00); }
.nc-h3d-lead { font-family:var(--pub-font-display,'Outfit',sans-serif); font-weight:300; font-size:clamp(15px,1.4vw,19px); letter-spacing:.24em; white-space:nowrap; margin:0; color:#F2F2F4; }
.nc-h3d-rule { width:1px; height:48px; background:linear-gradient(#8A8A93,transparent); }

.nc-h3d-meta { position:absolute; bottom:28px; left:clamp(20px,4vw,48px); right:clamp(20px,4vw,48px); z-index:3;
  display:flex; justify-content:space-between; align-items:center;
  font:400 10px/1 var(--pub-font-mono,'JetBrains Mono',monospace); letter-spacing:.22em; color:#8A8A93; text-transform:uppercase; }
.nc-h3d-scroll { display:inline-flex; align-items:center; gap:12px; cursor:pointer; color:#8A8A93; transition:color .3s; }
.nc-h3d-scroll:hover { color:#F2F2F4; }
.nc-h3d-scroll i { display:block; width:40px; height:1px; background:var(--pub-lime,#CCFF00); }

@media (max-width: 700px) {
  .nc-h3d-reel { top:calc(68px + 16px); right:20px; }
  .nc-h3d-reel .pub-play-label { display:none; }
  .nc-h3d-title { bottom:auto; top:66%; }
  /* 2줄: STORY / FRAME (외곽선 단어가 마지막일 때 줄바꿈) */
  .nc-h3d-title h1 .nc-h3d-o:last-child { display:block; }
  .nc-h3d-title h1 { text-align:center; margin-left:0; }
  .nc-h3d-title h1 { font-size:calc(18.9vw * var(--fs,1)); line-height:.84; }
  .nc-h3d-center { top:57%; gap:22px; }
  .nc-h3d-lead { font-size:13px; letter-spacing:.2em; }
  .nc-h3d-meta { bottom:20px; left:20px; right:20px; }
}

/* --------------------------------------------------------------------------
   VOUCHER hero — 3D dots + symbol as background only (Design Revision 009)
   -------------------------------------------------------------------------- */
.nc-vch-3d { position:relative; overflow:hidden; background:#060608; }
.nc-vch-3d-gl { position:absolute; inset:0; width:100%; height:100%; display:block; z-index:0; pointer-events:none; }
.nc-vch-3d > :not(canvas) { position:relative; z-index:1; }
.nc-vch-3d .pub-vch-hero-left,
.nc-vch-3d .pub-vch-hero-right { background:transparent; }
.nc-vch-3d .pub-vch-hero-right-bg { display:none; }
/* keep copy legible over the dots */
.nc-vch-3d .pub-vch-hero-left { background:linear-gradient(90deg, rgba(6,6,8,.72) 0%, rgba(6,6,8,.35) 70%, transparent 100%); }
@media (max-width: 1100px) {
  .nc-vch-3d .pub-vch-hero-left { background:linear-gradient(180deg, rgba(6,6,8,.25), rgba(6,6,8,.6)); }
}