:root{
  --vh: 1vh;
  --header-h: 0px;
  --sns-h: 0px;
  --footer-h: 0px;
  --safe-bottom: 0px;
  --last-safe: 0px;
  --brand-brown: #bfa98c;
  --dot-size: 16px;
  --dot-border: 1px;

  /* 중앙정렬 패딩 변수 */
  --top-stack: 0px;      /* header + (weddingNav 등 상단 고정) */
  --bottom-stack: 0px;   /* PC: sns + nav(+ footer at last), Mobile: fixedMenu nav 등 */
}

/* 가로 스크롤 방지 */
html, body { overflow-x: hidden !important; width: 100% !important; max-width: 100% !important; height: 100%; overflow: hidden; }
#scrollContent { height: 100svh; height: calc(var(--vh, 1vh) * 100); overflow-y: auto; scroll-snap-type: y mandatory; }

/* PC 스냅 컨테이너 */
#scrollContent{
  overflow-y:auto !important;
  scroll-snap-type:y mandatory !important;
  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;
  box-sizing:border-box !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;
  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 중앙정렬 패딩
   • 기존: #scrollContent > section 에만 적용
   • 보강: #weddingContent > section 도 동일 적용
   • 1번째 섹션(인트로)만 상단 패딩 0
   ─────────────────────────────────────────── */
@media (min-width:769px){
  #scrollContent > section,
  #weddingContent > section{
    padding-top:var(--top-stack) !important;
    padding-bottom:var(--bottom-stack) !important;
    height:auto !important;
  }

  /* 💡 웨딩 래퍼의 첫 섹션(=로비)은 반드시 상단 패딩을 살린다.
     → Tailwind의 first:md:pt-0가 로비에 잘못 적용되는 상황을 무력화 */
  #weddingContent > section:first-child{ padding-top:var(--top-stack) !important; }
}

/* 모바일 — 100vh 느낌 + 헤더 보정 */
@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; position:relative !important; background-color:transparent !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; } /* 히어로는 헤더 뒤까지 배경 */

  /* dotNav 숨김 */
  html body #dotNav{ display:none !important; visibility:hidden !important; opacity:0 !important; pointer-events:none !important; }

  /* 마지막 섹션: SNS/푸터가 문서 흐름으로 내려와 연결 */
  #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 !important; right:0 !important; bottom:0 !important; width:100% !important;
  background:rgba(255,255,255,.96) !important; border-top:1px solid #e6e6e6 !important; backdrop-filter:blur(6px) !important;
  z-index:120 !important; opacity:0 !important; visibility:hidden !important; transition:opacity .4s ease, visibility .4s ease, bottom .3s ease !important; background-clip:padding-box !important;
}
#snsLayer.show{opacity:1 !important;visibility:visible !important;}

#pageFooter{
  position:fixed; left:0 !important; right:0 !important; bottom:var(--sns-h) !important; width:100% !important;
  background:#111 !important; color:#cfcfcf !important; text-align:center !important; padding:18px 16px !important; line-height:1.5 !important;
  z-index:110 !important; opacity:0 !important; visibility:hidden !important; pointer-events:none !important; transition:opacity .6s ease, visibility .6s ease, bottom .3s ease !important; background-clip:padding-box !important;
}
#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; left:auto !important; right:auto !important; bottom:auto !important; top:auto !important;
    width:100% !important; opacity:1 !important; visibility:visible !important; pointer-events:auto !important;
  }
}

/* Legacy fixed wedding menu (fixedMenu) — show 클래스 기반 토글 */
#fixedMenu{ opacity:0; visibility:hidden; pointer-events:none; transition:opacity .3s ease, visibility .3s ease; }
#fixedMenu.show{ opacity:1 !important; visibility:visible !important; pointer-events:auto !important; }
@media (min-width:769px){ #fixedMenu{ bottom: var(--sns-h) !important; position:fixed !important; left:0 !important; right:0 !important; } }  /* PC: SNS 바로 위 */
@media (max-width:768px){ #fixedMenu{ bottom: var(--safe-bottom) !important; position:fixed !important; left:0 !important; right:0 !important; } } /* Mobile: 홈바 여백 */

/* Dot nav (PC) */
#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 var(--brand-brown) !important;
  background:#fff !important; cursor:pointer !important; transition:transform .25s, background .25s, border-color .25s !important;
}
#dotNav button.active{ background:var(--brand-brown) !important; border-color:var(--brand-brown) !important; transform:scale(1.15) !important; }

/* 비메인 페이지 */
body:not(:has(#scrollContent)) #snsLayer, body:not(:has(#scrollContent)) #pageFooter{
  position:static !important; opacity:1 !important; visibility:visible !important; pointer-events:auto !important; bottom:auto !important;
}

/* 타이포/애니메이션 */
h1 { font-family:'Times New Roman', Times, serif !important; font-style:italic !important; font-weight:700 !important; line-height:1.25 !important; font-size:clamp(2rem,3.5vw,3.5rem) !important; letter-spacing:-0.04em !important; }
h2 { font-family:'Times New Roman', Times, serif !important; font-style:italic !important; font-weight:600 !important; line-height:1.25 !important; font-size:clamp(1.7rem,3vw,3rem) !important; letter-spacing:-0.04em !important; }
h3, h4, h5, h6 {  font-family:'Roboto','Pretendard','Noto Sans KR',sans-serif !important; letter-spacing:-0.04em !important; font-weight:400 !important; line-height:1.4 !important; font-size:clamp(0.8rem,1.5vw,1.2rem) !important; }
p, span { font-family:'Roboto','Pretendard','Noto Sans KR',sans-serif !important; line-height: 1.25rem!important; font-weight:300 !important; font-size:clamp(0.65rem,1.4vw,0.9rem) !important; letter-spacing:-0.04em !important; margin:0 !important; }
a { font-family:'Roboto','Pretendard','Noto Sans KR',sans-serif !important; font-weight:400 !important;  letter-spacing:-0.04em !important; text-decoration:none !important; transition:color .3s ease, letter-spacing .3s ease !important; }
h1 *, h2 *, h3 *, h4 *, h5 *, h6 * { font: inherit !important; color: inherit !important; }
/* li 전역 */
li {
  font-family:'Roboto','Pretendard','Noto Sans KR',sans-serif !important;
  font-weight:300 !important;
  font-size:clamp(0.65rem,1.4vw,0.9rem) !important;
  letter-spacing:-0.04em !important;
  line-height:1.5 !important;
  list-style:none !important;
  margin:0 !important;
  padding:0 !important;
}

@media (max-height:700px){
  h1{font-size:clamp(1.4rem,2vh,2.5rem) !important;}
  h2{font-size:clamp(1.2rem,1.7vh,2rem) !important;}
  h3,h4,h5,h6{font-size:clamp(0.7rem,1.2vh,1rem) !important;}
}
a:hover{ color:#bfa98c !important; letter-spacing:0.05em !important; }

/* 텍스트 애니메이션 */
.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);} }

/* 사운드 컨트롤: bottom-stack 회피 */
#soundControl { position: fixed !important; right: 20px !important; bottom: calc(var(--bottom-stack) + 35px) !important; left: auto !important; transform: none !important; z-index: 999 !important; }
@media (max-width:768px){
  #soundControl{ bottom:calc(var(--bottom-stack) + 3vh)!important; left:50%!important; right:auto!important; transform:translateX(-50%)!important; }
}

/* 상단 웨딩 네비(미사용 시 영향 없음) */
#weddingNav{ position:fixed !important; left:0 !important; right:0 !important; top:calc(var(--header-h)) !important; z-index:150 !important; opacity:0 !important; visibility:hidden !important; pointer-events:none !important; transition:opacity .3s ease, visibility .3s ease !important; }
#weddingNav.show{ opacity:1 !important; visibility:visible !important; pointer-events:auto !important; }
@media (max-width:768px){ #weddingNav{ display:none !important; } }

@media (max-width: 768px) {
  :root {
    --global-section-gap: 10vh;
  }

  #scrollContent > section {   
    min-height: calc(var(--vh, 1vh) * 100 + var(--global-section-gap)) !important;  
    padding-bottom: calc(var(--bottom-stack) + var(--global-section-gap)) !important;
  }
}