/* ───────────────────────────────────────────
   GLOBAL THEME VARIABLES — TRAFFICMASTER (Dark Ice ver.)
   ─────────────────────────────────────────── */
:root {
  --vh: 1vh;
  --header-h: 0px;
  --sns-h: 0px;
  --footer-h: 0px;
  --safe-bottom: 0px;
  --last-safe: 0px;

  /* 🎨 브랜드 컬러 팔레트 */
  --brand-main: #000000;        /* 전체 배경 (딥 네이비 블랙) */
  --brand-accent: #ff0055;      /* 포인트 */
  --brand-highlight: #ececece3;   /* 하이라이트 */
  --brand-text: #ffffff;        /* 본문/텍스트 */
  --brand-muted: #fffb00;       /* 보조톤 */
  --dot-size: 16px;
  --dot-border: 1px;

  /* 중앙정렬 스택 */
  --top-stack: 0px;
  --bottom-stack: 0px;
}

/* ───────────────────────────────────────────
   GLOBAL BASE STYLE
   ─────────────────────────────────────────── */
html, body {
  overflow-x: hidden !important;
  width: 100% !important;
  max-width: 100% !important;
  height: 100%;
  overflow: hidden;
  color: var(--brand-text) !important;
}

/* 스냅 컨테이너 */
#scrollContent {
  height: 100%;
  overflow-y: auto;
  scroll-snap-type: y mandatory;
  scroll-behavior: smooth !important;
  -ms-overflow-style: none !important;
  scrollbar-width: none !important;
  padding-bottom: 0 !important;
}
#scrollContent::-webkit-scrollbar { display: none !important; }

@supports (height: 100dvh) {
  #scrollContent > section { min-height: 100dvh !important; }
}

/* 섹션 기본 */
#scrollContent > section {
  min-height: calc(var(--vh, 1vh) * 100) !important;
  scroll-snap-align: start !important;
  scroll-snap-stop: always !important;
  flex-shrink: 0 !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  box-sizing: border-box !important;
  opacity: 0 !important;
  transform: translateY(20px) !important;
  transition: opacity .6s ease, transform .6s ease !important;
}
#scrollContent > section.active {
  opacity: 1 !important;
  transform: translateY(0) !important;
}

/* ───────────────────────────────────────────
   PC 패딩 스택
   ─────────────────────────────────────────── */
@media (min-width: 769px) {
  #scrollContent > section,
  #weddingContent > section {
    padding-top: var(--top-stack) !important;
    padding-bottom: var(--bottom-stack) !important;
    height: auto !important;
  }
  #weddingContent > section:first-child {
    padding-top: var(--top-stack) !important;
  }
}

/* ───────────────────────────────────────────
   MOBILE ADJUSTMENT
   ─────────────────────────────────────────── */
@media (max-width: 768px) {
  #scrollContent { scroll-snap-type: none !important; }

  #scrollContent > section {
    min-height: calc(var(--vh, 1vh) * 100) !important;
    height: auto !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    opacity: 1 !important;
    transform: none !important;
    overflow: visible !important;
    z-index: 1 !important;
    padding: 0 !important;
    padding-top: var(--header-h) !important;
    padding-bottom: var(--bottom-stack) !important;
  }
  #scrollContent > section:first-child { padding-top: 0 !important; }
  html body #dotNav { display: none !important; }
  #scrollContent > section.is-last-mobile {
    justify-content: center !important;
    align-items: center !important;
    min-height: calc(var(--vh,1vh) * 100) !important;
    padding-top: var(--header-h) !important;
    padding-bottom: calc(var(--last-safe) + 6vh) !important;
  }
}

/* ───────────────────────────────────────────
   SNS & FOOTER
   ─────────────────────────────────────────── */
#snsLayer {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  width: 100%;
  backdrop-filter: blur(6px) !important;
  z-index: 120;
  opacity: 0;
  visibility: hidden;
  transition: opacity .4s ease, visibility .4s ease, bottom .3s ease;
}
#snsLayer.show { opacity: 1; visibility: visible; }

#pageFooter {
  position: fixed;
  left: 0; right: 0; bottom: var(--sns-h);
  width: 100%;
  background: var(--brand-main) !important;
  color: var(--brand-text) !important;
  text-align: center;
  padding: 18px 16px;
  line-height: 1.5;
  z-index: 110;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .6s ease, visibility .6s ease, bottom .3s ease;
}
#pageFooter.show {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}
html.swap-order #pageFooter { bottom: 0 !important; z-index: 120 !important; }
html.swap-order #snsLayer { bottom: var(--footer-h) !important; z-index: 110 !important; }

@media (max-width: 768px) {
  html.mobile-last #snsLayer, html.mobile-last #pageFooter {
    position: static !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }
}

/* ───────────────────────────────────────────
   DOT NAVIGATION
   ─────────────────────────────────────────── */
#dotNav {
  position: fixed !important;
  right: 20px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  z-index: 130 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
}
#dotNav button {
  width: var(--dot-size) !important;
  height: var(--dot-size) !important;
  border-radius: 50% !important;
  border: var(--dot-border) solid #cbcbcb !important;
  background: #fff !important;
  transition: transform .25s, background .25s, border-color .25s !important;
  cursor: pointer !important;
}
#dotNav button.active {
  background: #818181 !important;
  border-color: #858585 !important;
  transform: scale(1.15) !important;
}

/* ───────────────────────────────────────────
   TYPOGRAPHY
   ─────────────────────────────────────────── */
h1 {
  font-family: 'Times New Roman', serif !important;
  font-style: italic !important;
  font-weight: 700 !important;
  line-height: 1.25 !important;
  font-size: clamp(2rem, 3.5vw, 3.5rem) !important;
}
h2 {
  font-family: 'Times New Roman', serif !important;
  font-style: italic !important;
  font-weight: 600 !important;
  line-height: 1.25 !important;
  font-size: clamp(1.7rem, 3vw, 3rem) !important;
}
h3, h4, h5, h6 {
  font-family: 'Roboto','Pretendard','Noto Sans KR',sans-serif !important;
  letter-spacing: -0.04em !important;
  font-weight: 400 !important;
}
p, span, li, a {
  font-family: 'Roboto','Pretendard','Noto Sans KR',sans-serif !important;
  line-height: 1.4 !important;
  font-weight: 300 !important;
}
a:hover { color: var(--brand-highlight) !important; letter-spacing: 0.05em !important; }

/* ───────────────────────────────────────────
   ANIMATIONS
   ─────────────────────────────────────────── */
.soft-rise { opacity: 0; animation: softRise 1.6s ease forwards; }
@keyframes softRise { 0%{opacity:0;transform:translateY(30px);} 100%{opacity:1;transform:translateY(0);} }

.fade-subtle { opacity:0; animation:fadeSubtle 1.8s ease forwards; }
@keyframes fadeSubtle { 0%{opacity:0;transform:translateX(-20px);} 100%{opacity:1;transform:translateX(0);} }

.fade-up { opacity:0; transform:translateY(20px); animation:fadeUp 1.2s ease forwards; }
@keyframes fadeUp { 0%{opacity:0;transform:translateY(20px);} 100%{opacity:1;transform:translateY(0);} }


/* ───────────────────────────────────────────
   WEDDING NAV / LEGACY FIXED MENU
   ─────────────────────────────────────────── */
#weddingNav { display: none !important; }
#fixedMenu { display: none !important; }