*{box-sizing:border-box}
:root{
  --bg:#d9d9d7;
  --white:#f2f2ef;
  --text:#111111;
  --header-height:76px;
  --radius:38px;
  --logo-width:126px;
}
body{
  margin:0;
  font-family:"Poppins","Apple SD Gothic Neo","AppleSDGothicNeo","Noto Sans KR",sans-serif;
  color:var(--text);
  background:var(--bg);
  overflow-x:hidden;
}
a{color:inherit;text-decoration:none}


.intro-scroll{
  height:620vh;
  position:relative;
}
.intro-scroll{
  position:relative;
  z-index:1;
}
.intro-sticky{
  position:sticky;
  top:0;
  height:100vh;
  overflow:hidden;
}
.hero-video-layer,
.snap-section{
  position:relative;
  width:100%;
  height:100vh;
  min-height:100vh;
  overflow:hidden;
  transform:scale(1.06);
  transform-origin:center center;
  will-change:transform;
}
.last-visual{
  position:relative;
  width:100%;
  height:100vh;
  overflow:hidden;
}

/* 마지막 섹션이 화면을 꽉 채우고 아래에 아무 공간도 남기지 않게 함 */
.last-section {
  position: relative;
  z-index: 3;
  height: 100vh !important;
  min-height: 100vh !important;
  background: #000 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden;
}
.bg-video{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  background:#bbb;
}
.intro-next-video-layer{
  position:fixed;
  inset:0;
  z-index:2;
  overflow:hidden;
  opacity:0;
  pointer-events:none;
}

.hero-video-layer{
  z-index:1;
}

.white-panel-shell{
  z-index:4;
}
.hero-video-layer::after,
.snap-section::after,
.last-visual::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(to bottom,rgba(0,0,0,.05),rgba(0,0,0,0) 38%,rgba(0,0,0,.06));
  pointer-events:none;
}

.intro-progress{
  position:fixed;
  right:28px;
  top:50%;
  transform:translateY(-50%);
  z-index:50;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:14px;
  padding:4px 0;
}

.intro-progress::before{
  content:"";
  position:absolute;
  top:8px;
  bottom:8px;
  left:50%;
  width:2px;
  transform:translateX(-50%);
  background:rgba(255,255,255,.35);
  display: none; /* 이 줄을 추가하여 선을 숨깁니다 */
}
.intro-progress{
  pointer-events:none;
}

.intro-progress .dot{
  display:block !important;
  visibility:visible !important;
  opacity:1 !important;
  mix-blend-mode: difference; /* 배경색과 대비되는 색으로 자동 반전 */
  z-index: 51; /* 배경보다 항상 위에 있도록 설정 */
}
.dot{
  position:relative;
  z-index:1;
  width:10px;
  height:10px;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.9);
  background: none;
  box-shadow: none;
  opacity:1;
  transition:transform .2s ease, background .2s ease, border-color .2s ease, opacity .2s ease;
}
.dot.is-active{
  background:#ffffff;
  border-color:#ffffff;
  transform:scale(1.35);
}

.white-panel-shell{
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  width:100%;
  height:100vh;
  z-index:4;
  transform:translateY(100%);
  will-change:transform;
  overflow:hidden;
  border-radius:0;
}
.panel-track{
  position:absolute;
  inset:0 0 auto 0;
  height:200vh;
  will-change:transform;
  backface-visibility:hidden;
  transform:translateZ(0);
  background:transparent;
}
.panel-screen{
  position:relative;
  width:100%;
  height:100vh;
  margin-bottom:-1px;
}
.panel-screen-copy{
  background:transparent;
}
.cutout-surface{
  position:absolute;
  inset:0;
  background:var(--white);
  pointer-events:none;
}
.copy-caption{
  position:absolute;
  left:50%;
  top:67%;
  transform:translateX(-50%);
  width:1300px;
  text-align:center;
  z-index:2;
}
.copy-caption p{
  margin:0;
  font-family:"Apple SD Gothic Neo","AppleSDGothicNeo","Noto Sans KR",sans-serif;
  font-size:20px;
  line-height:1.65;
  font-weight:700;
  letter-spacing:0.02em;  /* 글자 간격 */
  color:#000000;
  word-break:keep-all;
}

.copy-caption p span{
  display:block;
  white-space:nowrap;
}

.panel-screen-service{
  background:var(--white);
  display:flex;
  align-items:center;
}
.service-rail{
  width:min(1700px,calc(100% - 36px));
  margin:0 auto;
  display:grid;
  grid-template-columns:1fr minmax(820px,540px) 1fr;
  align-items:center;
}
.side-label{
  font-family:"Poppins",sans-serif;
  font-size:clamp(2.7rem,4.2vw,4.65rem);
  font-weight:500;
  letter-spacing:-.015em;
  line-height:1;
}
.side-label.left{justify-self:start}
.side-label.right{justify-self:end}

.roulette-window{
  position:relative;
  height:560px;
  overflow:hidden;
  perspective:1400px;
  perspective-origin:50% 50%;
  isolation:isolate;
}
.roulette-window::before,.roulette-window::after{
  content:"";
  position:absolute;
  left:0;right:0;
  height:82px;
  z-index:2;
  pointer-events:none;
}

.roulette-window::before{
  top:0;
  background:linear-gradient(to bottom,var(--white),rgba(242,242,239,0));
}
.roulette-window::after{
  bottom:0;
  background:linear-gradient(to top,var(--white),rgba(242,242,239,0));
}
.roulette-track{
  position:absolute;
  inset:0;
  transform-style:preserve-3d;
  will-change:transform;
  pointer-events:none;
}
.roulette-item{
  position:absolute;
  left:50%;
  top:50%;
  width:100%;
  text-align:center;
  transform-origin:50% 50%;
  backface-visibility:hidden;
  will-change:transform, opacity, filter;
  font-family:"Apple SD Gothic Neo","AppleSDGothicNeo","Noto Sans KR",sans-serif;
  font-size:70px;
  line-height:1.16;
  font-weight:700;
  letter-spacing:-.05em;
  color:#d0d0d0;
  opacity:0;
  filter:blur(0px);
}
.roulette-item.is-active{
  color:#111;
}

.snap-section{
  position:relative;
  width:100%;
  height:100vh;
  min-height:100vh;
  overflow:hidden;
  transform:scale(1.06);
  transform-origin:center center;
  will-change:transform;
}
.section-overlay{
  position:absolute;
  inset:0;
  z-index:2;
}
.section-number{
  display:none;
}

.footer-panel{
  position:relative;
  z-index:3;
  background:var(--white);
  min-height:210px;
  padding:28px 24px 18px;
}
/* 수정: 기존 .footer-top을 찾아서 아래와 같이 바꿉니다 */
.footer-top {
  display: none !important; /* START CREATIVE 문구 삭제 */
}
.footer-word{
  font-family:"Poppins",sans-serif;
  font-size:clamp(2.4rem,4.5vw,4.3rem);
  font-weight:700;
  line-height:1;
  letter-spacing:-.06em;
}
/* 푸터 전체 컨테이너 */
.footer-panel {
  display: flex;
  flex-direction: column;
  align-items: center; /* 가로 중앙 정렬 */
  justify-content: center;
  padding: 80px 0 !important; /* 상하 여백 넉넉히 */
  background: #ffffff !important;
  min-height: auto !important;
}

/* 1단: SNS 아이콘 영역 */
.footer-sns {
  display: flex;
  gap: 30px; /* 아이콘 사이 간격 키움 */
  margin-bottom: 20px; /* 아래 카피라이트와의 간격 */
}

.footer-sns a svg {
  width: 32px !important; /* 아이콘 크기 확대 */
  height: 32px !important;
  stroke-width: 1.5; /* 선 굵기 조절 */
  transition: transform 0.3s ease;
}

.footer-sns a:hover svg {
  transform: scale(1.1);
  color: #555;
}

/* 2단: 카피라이트 영역 */
.copyright {
  margin: 0 !important;
  font-size: 14px !important; /* 가독성 좋게 살짝 키움 */
  font-weight: 600;
  letter-spacing: 0.05em;
  color: #000;
  text-align: center;
}

/* 기존 불필요한 레이아웃 초기화 */
.footer-bottom {
  display: block !important;
  width: auto !important;
  border: none !important;
  padding: 0 !important;
}

/* 기존 address 등 불필요한 스타일은 무시됨 */
.address { display: none; }
.copyright,.address{
  margin:0;
  font-size:0.5rem;
  letter-spacing:.12em;
  color:#666;
}
.address{text-align:right}
.social-links{
  display:flex;
  justify-content:center;
  gap:10px;
}
.social-link{
  width:31px;height:31px;border-radius:50%;
  border:1px solid rgba(17,17,17,.18);
  display:inline-flex;align-items:center;justify-content:center;
  color:#9a9a9a;background:rgba(0,0,0,.02);
  transition:color .2s ease,border-color .2s ease,background .2s ease,transform .2s ease;
}
.social-link:hover{
  color:#111;border-color:#111;background:rgba(17,17,17,.06);transform:translateY(-1px);
}
.social-link svg{width:14px;height:14px;stroke:currentColor;stroke-width:1.8}

.blank-page{background:var(--bg)}
.blank-main{min-height:100vh;display:flex;flex-direction:column}
.blank-hero{min-height:calc(100vh - 210px)}
.blank-footer{margin-top:auto}
.force-show{display:block!important}

@media (max-width:1100px){
  .service-rail{
    grid-template-columns:1fr;
    gap:28px;
  }
  .side-label{
    display:none;
  }
}
@media (max-width:900px){
  :root{
    --header-height:68px;
    --radius:32px;
    --logo-width:98px;
  
  }
  .service-rail{width:calc(100% - 26px)}
  .roulette-window{height:208px}
  .roulette-item{font-size:1.34rem}
  .footer-panel{padding-inline:18px}
  .copyright,.address{text-align:center}
}
@media (max-width:640px){
  .gnb{gap:6px}
  .gnb a{font-size:.5rem;padding:6px 8px}
  .intro-progress{right:14px}
  .section-number{right:14px}
  .footer-word{font-size:2rem}
}
.scroll-cue{
  position:absolute;
  left:50%;
  bottom:34px;
  width:64px;
  height:32px;
  transform:translateX(-50%);
  z-index:10;
  animation:scrollCue 1.8s ease-in-out infinite;
  pointer-events:none;
}

.scroll-cue span{
  position:absolute;
  top:0;
  width:32px;
  height:3px;
  background:#fff;
  border-radius:999px;
}

.scroll-cue span:first-child{
  left:0;
  transform:rotate(45deg);
  transform-origin:right center;
}

.scroll-cue span:last-child{
  right:0;
  transform:rotate(-45deg);
  transform-origin:left center;
}

@keyframes scrollCue{
  0%{
    transform:translateX(-50%) translateY(0);
    opacity:.45;
  }
  50%{
    transform:translateX(-50%) translateY(16px);
    opacity:1;
  }
  100%{
    transform:translateX(-50%) translateY(0);
    opacity:.45;
  }
}
.intro-sticky{
  position:sticky;
  top:0;
  height:100vh;
  overflow:hidden;
  isolation:isolate;
}

.intro-next-video-layer{
  position:absolute;
  inset:0;
  z-index:1;
  overflow:hidden;
  opacity:1;
  transform:scale(1);
}

.hero-video-layer{
  z-index:3;
}

.white-panel-shell{
  z-index:4;
}

.snap-section:first-of-type{
  opacity:0;
}
/* 흰색 배경(on-light)일 때 우측 점들의 색상 */
.intro-progress.on-light .dot {
  border-color: rgba(0, 0, 0, 0.3); /* 얇은 검정 테두리 */
}

/* 흰색 배경에서 활성화된 점의 색상 */
.intro-progress.on-light .dot.is-active {
  background: #000000;             /* 선명한 검정색 */
  border-color: #000000;
}