@charset "UTF-8";

/*
┌─────────────────────────────────────────────────────────────────────────┐
│  DESIGNER QUICK BOX — Webflow (CSS-only · 코드 근거만)                  │
└─────────────────────────────────────────────────────────────────────────┘

1) Container Attribute (from CSS selector)
┌──────────────────────────────────────┐
│ Name:  data-satz                    │
│ Value: auto-hide-navbar             │
└──────────────────────────────────────┘

2) Recognized Options (CSS selectors · optional)
   ※ CSS가 실제로 참조하는 [data-satz-*] 속성만 나열 (기본값 표기 생략).

┌─────────────────────────────────────────────────────────────────────────┐
│ (none — CSS는 data-satz-* 변형을 직접 참조하지 않음)                     │
└─────────────────────────────────────────────────────────────────────────┘

3) Style Panel 체크(필수 3 · 레이아웃 안정화)
• Layout → Position: Sticky(top=0) 유지
• Layout → Overflow: Visible (드롭다운 등 UI 노출)
• Effects → Will-change: transform·opacity 최소화

※ 이 블록의 정본 옵션/기본값은 index.js 주석(Designer Quick Box)을 참조하세요.
*/

/* Satz Gate (minimal) */
html.satz-pending [data-satz] {
  opacity: 0;
  visibility: hidden;
}

html.satz-ready [data-satz] {
  opacity: 1;
  visibility: visible;
}

html.satz-pending [data-satz="auto-hide-navbar"],
html.satz-pending [data-auto-hide-nav] {
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
}

[data-satz="auto-hide-navbar"],
[data-auto-hide-nav] {
  position: sticky;
  top: 0;
  z-index: 999;
  will-change: transform, opacity;
  /* 초기 상태: 화면 밖 위쪽에서 대기 (페이지 로드 후 등장) */
  transform: translate3d(0, -100%, 0);
  opacity: 0;
  pointer-events: auto;
  overflow: visible;
  /* Motion tokens keep hide/show timings consistent with grid rhythm */
  --auto-hide-navbar-duration-show: 2000ms;
  --auto-hide-navbar-duration-hide: 360ms;
  --auto-hide-navbar-ease-show: cubic-bezier(0.22, 1, 0.36, 1);
  --auto-hide-navbar-ease-hide: cubic-bezier(0.7, 0, 0.3, 1);
  /* 기본 상태에도 transition 필요 (초기 등장 애니메이션용) */
  transition: transform var(--auto-hide-navbar-duration-show) var(--auto-hide-navbar-ease-show),
    opacity var(--auto-hide-navbar-duration-show) var(--auto-hide-navbar-ease-show);
}

/* Sticky는 transform/perspective 부모가 있으면 무력화되니 그 경우 position: fixed로 전환하라. */

[data-satz="auto-hide-navbar"].is-hidden,
[data-auto-hide-nav].is-hidden {
  transform: translate3d(0, -100%, 0);
  opacity: 0;
  pointer-events: none;
  transition: transform var(--auto-hide-navbar-duration-hide) var(--auto-hide-navbar-ease-hide),
    opacity var(--auto-hide-navbar-duration-hide) var(--auto-hide-navbar-ease-hide);
}

[data-satz="auto-hide-navbar"].is-visible,
[data-auto-hide-nav].is-visible {
  transform: translate3d(0, 0, 0);
  opacity: 1;
  pointer-events: auto;
  transition: transform var(--auto-hide-navbar-duration-show) var(--auto-hide-navbar-ease-show),
    opacity var(--auto-hide-navbar-duration-show) var(--auto-hide-navbar-ease-show);
}

@media (prefers-reduced-motion: reduce) {

  [data-satz="auto-hide-navbar"],
  [data-auto-hide-nav] {
    transition-duration: 0s !important;
  }
}

/* Studio page: nav overlays hero */
body[data-page="studio"] [data-satz="auto-hide-navbar"],
body[data-page="studio"] [data-auto-hide-nav] {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 999;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  padding-left: var(--wf-grid-active-gutter);
  padding-right: var(--wf-grid-active-gutter);
  background: linear-gradient(180deg,
      rgba(0, 0, 0, 0.5) 0%,
      rgba(0, 0, 0, 0) 100%);
  /* 필요 없으면 제거 */
}

@supports (width: 100dvw) {

  body[data-page="studio"] [data-satz="auto-hide-navbar"],
  body[data-page="studio"] [data-auto-hide-nav] {
    width: 100dvw;
    margin-left: calc(50dvw - 50%);
    margin-right: calc(50dvw - 50%);
  }
}