@charset "utf-8";

:root{
  --vh:1vh;
  --header-h:0px;
  --sns-h:0px;
  --footer-h:0px;
  --footer-reserve:0px;
  --safe-bottom:0px;
  --last-safe:0px;
  --top-stack:0px;
  --bottom-stack:0px;
  --bottom-stack-last:0px;
  --last-extra-pad:0px;
  --brand-main:#3651E0;
  --brand-accent:#3e9dff;
  --brand-highlight:#3e9dff;
  --brand-text:#000;
  --brand-muted:#666;
  --dot-size:14px;
  --dot-border:1px;
  --main-font:'Paperlogy';
  --eng-font:'Lexend Deca';
}

*{margin:0;padding:0;box-sizing:border-box}

html,body{
  width:100%;
  height:100%;
  color:var(--brand-text);
  overflow-x:hidden;
}

#scrollContainer{
  height:calc(var(--vh, 1vh) * 100);
  width:100%;
  overflow:hidden;
}

#scrollContent{
  position:relative;
  height:100%;
  overflow-y:auto;
  scroll-snap-type:none;
  overscroll-behavior-y:contain;
}

@media (min-width:1024px){
  /*
    PC에서 스냅 모드일 때만 스크롤바를 숨김
    (PC에서 스크롤 모드일 때는 스크롤바를 보여야 함)
  */
  html.is-snap #scrollContent{
    scrollbar-width:none;
    -ms-overflow-style:none;
  }
  html.is-snap #scrollContent::-webkit-scrollbar{width:0;height:0}

  /* PC 스크롤 모드 스크롤바 스타일 */
  html:not(.is-snap) #scrollContent{
    scrollbar-width:thin;
    scrollbar-color:#ff6f1f transparent;
  }
  html:not(.is-snap) #scrollContent::-webkit-scrollbar{width:10px;height:10px}
  html:not(.is-snap) #scrollContent::-webkit-scrollbar-track{background:transparent}
  html:not(.is-snap) #scrollContent::-webkit-scrollbar-thumb{
    background:#ff6f1f;
    border-radius:999px;
  }
  html:not(.is-snap) #scrollContent::-webkit-scrollbar-thumb:hover{background:#ff6f1f}
}

/*
  SECTION LAYOUT
  - 기본: padding-top/bottom은 JS가 계산한 --top-stack / --bottom-stack 사용
  - 스냅 모드: 각 섹션은 1페이지(스크롤포트) 기준으로 고정
  - 스크롤 모드: 섹션은 콘텐츠 높이에 따라 자연스럽게 늘어날 수 있음
*/
#scrollContent > section{
  scroll-snap-align:start;
  display:flex;
  justify-content:center;
  align-items:center;
  padding-top:var(--top-stack);
  padding-bottom:var(--bottom-stack);
  opacity:0;
  transform:translateY(20px);
  transition:opacity .6s ease, transform .6s ease;
  min-height:auto;
}


@media (min-width:1024px){
  html.is-snap #scrollContent{
    scroll-snap-type:y mandatory;
  }
  html.is-snap #scrollContent > section{
    min-height:calc(var(--vh, 1vh) * 100);
  }
}

#scrollContent > section.active{
  opacity:1;
  transform:translateY(0);
}

/*
  스크롤 모드(폭 < 1024 또는 높이 조건으로 스냅 해제):
  - 섹션을 숨기지 않음(하얀 화면 방지)
  - 불필요한 페이드/트랜지션 비활성
*/
html:not(.is-snap) #scrollContent > section{
  opacity:1;
  transform:none;
  transition:none;
}

/* 마지막 섹션은 footer(및 모바일 추가 여백)까지 감안한 바닥 패딩 적용 */
#scrollContent > section:last-child{
  padding-bottom:var(--bottom-stack-last, var(--bottom-stack));
}

/* 스냅 가능 여부(높이 계산)를 위해 섹션의 min-height를 일시적으로 해제하는 모드 */
html.measure-mode #scrollContent > section{
  min-height:auto !important;
}

#dotNav{
  position:fixed;
  right:20px;
  top:50%;
  transform:translateY(-50%);
  z-index:130;
  display:flex;
  flex-direction:column;
  gap:12px;
}

@media (max-width:1023px){
  #dotNav{display:none!important}
}

/* PC에서 스냅이 아닌 스크롤 모드일 때 도트 네비는 숨김 */
html:not(.is-snap) #dotNav{display:none!important}

#dotNav button{
  width:var(--dot-size);
  height:var(--dot-size);
  border-radius:50%;
  border:var(--dot-border) solid #aaa;
  background:#fff;
  cursor:pointer;
  transition:transform .25s, background .25s, border-color .25s;
}

#dotNav button.active{
  background:#ff8a24;
  border-color:#fff;
  transform:scale(1.15);
}

/*
  FIXED UI STACK
  - footer는 마지막 섹션 진입 시에만 노출
  - snsLayer는 footer가 보일 때 footer 높이만큼 위로 이동
*/
#pageFooter{
  position:fixed;
  left:0;
  right:0;
  bottom:0;
  background:#111;
  color:#fff;
  padding:18px 16px;
  z-index:110;
  opacity:1;
  visibility:visible;
}

#snsLayer{
  position:fixed;
  left:0;
  right:0;
  bottom:var(--footer-h);
  backdrop-filter:blur(6px);
  z-index:120;
  opacity:1;
  visibility:visible;
}

body,input,textarea,select,button,table{
  font-family:
    var(--eng-font, 'Lexend Deca'),
    var(--main-font, 'Paperlogy'),
    'Noto Sans KR','맑은 고딕','Malgun Gothic','Dotum','Arial',sans-serif;
  font-size:12px;
  line-height:1.45;
}


h1,h2,h3,h4,h5,h6,p,span,li,a,em,i{
  font-family:
    var(--eng-font, 'Lexend Deca'),
    var(--main-font, 'Paperlogy'),
    sans-serif;
  line-height:1.5;
}


strong{font-weight:600}

a:hover{color:var(--brand-main)}

#weddingNav,
#fixedMenu{
  display:none!important;
}

#scrollTopBtn{
  bottom:calc(var(--footer-h) + 16px);
  z-index:140;
}