/* 로그인 직후 1회 — PC #mallWrap · 모바일 #mApp 공통 (scripts/boot-intro.js) */

.boot-intro {

  position: fixed;

  inset: 0;

  z-index: 99999;

  display: grid;

  place-items: center;

  isolation: isolate;

  overflow: hidden;

  background: #ffffff;

  pointer-events: none;

  opacity: 0;

  transition: opacity 0.25s ease;

}

.boot-intro.hidden {

  display: none;

}

body.boot-intro-active .boot-intro {

  opacity: 1;

  pointer-events: auto;

}



/* GIF 로드 대기 — #mApp/#mallWrap 만 숨기고 오버레이는 즉시 표시 (모바일 흰 빈 화면 방지) */

body.boot-intro-ready .boot-intro.boot-intro--awaiting {

  display: grid !important;

  opacity: 1;

  pointer-events: auto;

}



.boot-intro--awaiting .boot-intro__core {

  opacity: 1;

  animation: none;

}



.boot-intro--awaiting .boot-intro__logo {

  /* preload 된 GIF 끝 프레임 노출 방지 — 재생은 JS restartBootGifPlayback 직후 */

  opacity: 0;

  animation: none;

  visibility: hidden;

  transform: none;

}

/* 모바일 — 정적 meta 로고(GIF 대신). awaiting 중에도 숨기지 않음 */
.boot-intro--static.boot-intro--awaiting .boot-intro__logo--static,
.boot-intro--static .boot-intro__logo--static {
  visibility: visible;
  opacity: 1;
  transform: none;
  animation: none;
}

.boot-intro__logo--static {
  width: min(68vw, 240px);
  max-width: min(68vw, 240px);
  max-height: none;
}



.boot-intro--awaiting .boot-intro__core::after {

  display: none;

  content: none;

}



@keyframes boot-intro-await-spin {

  to {

    transform: rotate(360deg);

  }

}



/* Auth 복원 중 — 저장 세션·handoff 시 로그인 게이트 깜빡임 방지 (scripts/auth-boot-pending.js) */

html.auth-boot-resolving #authGate {
  display: none !important;
}

html.auth-boot-resolving,
html.auth-boot-resolving body {
  background: #ffffff;
}

html.auth-boot-resolving body {
  overflow-y: auto !important;
}

/* JS 로드 전 — 몰 셸만 미리 깔아두고(로그인 100vh 영역 대신) 첫 paint 깜빡임 완화 */
html.auth-boot-resolving.auth-boot-has-session #mallWrap.hidden {
  display: block !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

html.auth-boot-resolving.auth-boot-has-session #mApp {
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}



/* 인트로가 끝나기 전까지 몰·모바일 본문 완전 비노출 */

body.boot-intro-ready #mallWrap,

body.boot-intro-active #mallWrap,

body.boot-intro-pending-mall #mallWrap,

body.boot-intro-ready #mApp,

body.boot-intro-active #mApp,

body.boot-intro-pending-mall #mApp {

  visibility: hidden !important;

  opacity: 0 !important;

  pointer-events: none !important;

}



.boot-intro__bg {

  position: absolute;

  inset: 0;

  z-index: 0;

  background: #ffffff;

}



.boot-intro__core {

  position: relative;

  z-index: 1;

  display: grid;

  justify-items: center;

  width: 100%;

  max-width: 100%;

  gap: 0;

  padding: 0 clamp(8px, 2vw, 20px);

  text-align: center;

  opacity: 0;

  animation: boot-intro-core-in 0.55s 0.18s ease-out forwards;

}



.boot-intro__logo {

  width: min(96vw, 1120px);

  max-width: 96vw;

  max-height: min(86vh, 920px);

  height: auto;

  object-fit: contain;

  opacity: 0;

  transform: scale(0.92);

  /* fade-in ~0.75s → 유지 → fade-out — delay 는 JS --boot-logo-out-delay (기본 5.25s) */

  animation:

    boot-intro-logo-in 0.55s 0.2s cubic-bezier(0.22, 1, 0.36, 1) forwards,

    boot-intro-logo-out 0.45s var(--boot-logo-out-delay, 5.25s) cubic-bezier(0.55, 0.06, 0.68, 0.19)

      forwards;

}



@keyframes boot-intro-core-in {

  from {

    opacity: 0;

    transform: translateY(8px);

  }

  to {

    opacity: 1;

    transform: translateY(0);

  }

}

@keyframes boot-intro-logo-in {

  from {

    opacity: 0;

    transform: scale(0.92);

  }

  to {

    opacity: 1;

    transform: scale(1);

  }

}

@keyframes boot-intro-logo-out {

  from {

    opacity: 1;

    transform: translateY(0) scale(1);

  }

  to {

    opacity: 0;

    transform: translateY(-12px) scale(0.99);

  }

}



/* GIF 종료 후 — 본문 첫 노출 (히어로·그리드가 GIF와 겹치지 않음) */

body.boot-mall-enter #mallWrap:not(.hidden),

body.boot-mall-enter #mApp {

  visibility: visible !important;

  pointer-events: auto !important;

  animation: boot-mall-reveal 0.58s ease-out both;

}



body.boot-intro-active .boot-intro__logo--primed {

  opacity: 1;

  transform: scale(1);

  animation:

    boot-intro-logo-out 0.45s var(--boot-logo-out-delay, 5.25s) cubic-bezier(0.55, 0.06, 0.68, 0.19)

      forwards;

}



body.boot-intro-active .boot-intro__core:has(.boot-intro__logo--primed) {

  opacity: 1;

  animation: none;

}



@keyframes boot-mall-reveal {

  from {

    opacity: 0;

  }

  to {

    opacity: 1;

  }

}



/* 전환 중 카드·구분선·그리드 밴드가 먼저 보이지 않게 */

body.boot-intro-reveal #mallWrap .product-grid__row-band,

body.boot-intro-reveal #mallWrap .product-card--commerce:not(.is-revealed) {

  opacity: 0 !important;

  border-color: transparent !important;

}



body.boot-intro-reveal #mallWrap.reveal-ready .product-card--commerce.is-revealed,

body.boot-intro-reveal #mallWrap .product-card--skeleton {

  opacity: 1 !important;

  translate: none !important;

}



/* —— 모바일 `/m/` — #mApp 형제 UI·뷰 슬라이드·카드 테두리 플래시 방지 —— */

body.boot-intro-ready #mCtaDock,

body.boot-intro-active #mCtaDock,

body.boot-intro-reveal #mCtaDock,

body.boot-intro-ready #mBottomNav,

body.boot-intro-active #mBottomNav,

body.boot-intro-reveal #mBottomNav,

body.boot-intro-ready #mBackToTop,

body.boot-intro-active #mBackToTop,

body.boot-intro-reveal #mBackToTop {

  visibility: hidden !important;

  opacity: 0 !important;

  pointer-events: none !important;

}



html.m-app-root:has(body.boot-intro-ready),

html.m-app-root:has(body.boot-intro-active) {

  background: #ffffff !important;

}



body.boot-intro-ready .m-view,

body.boot-intro-active .m-view,

body.boot-intro-reveal .m-view {

  transition: none !important;

}



body.boot-intro-ready .m-view.is-active,

body.boot-intro-active .m-view.is-active {

  transform: translateX(100%) !important;

  opacity: 0 !important;

  pointer-events: none !important;

}



body.boot-intro-reveal #mApp .m-view.is-active {

  transform: translateX(0) !important;

  opacity: 1 !important;

  pointer-events: auto !important;

}



body.boot-intro-ready #viewCatalog .m-product-card,

body.boot-intro-active #viewCatalog .m-product-card,

body.boot-intro-reveal #viewCatalog.m-reveal-ready .m-product-card {

  opacity: 0 !important;

  translate: none !important;

  transition: none !important;

  border-color: transparent !important;

  box-shadow: none !important;

}



body.boot-intro-reveal #viewCatalog .m-product-card__visual {

  border-bottom-color: transparent !important;

}



html:has(body.boot-intro-ready),

html:has(body.boot-intro-active),

html:has(body.boot-intro-reveal) {

  overflow: hidden !important;

}

body.boot-intro-ready,

body.boot-intro-active,

body.boot-intro-reveal {

  overflow: hidden !important;

}



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

  .boot-intro,

  .boot-intro__core,

  .boot-intro__logo {

    animation: none !important;

    transition: none !important;

  }

  body.boot-intro-active .boot-intro {

    opacity: 0;

    pointer-events: none;

  }

  body.boot-intro-reveal #mallWrap:not(.hidden),

  body.boot-intro-reveal #mApp {

    animation: none !important;

    opacity: 1 !important;

  }

}