/* =========================================================
   soje(Behind the Hands) 전용: #container 폭 제한 해제
========================================================= */
.ctt_soje #container{
  max-width:none !important;
  width:100% !important;
  padding:0 !important;
}

/* =========================================================
   Base typography / reset
========================================================= */
:root{
  --bth-font-sans: "Noto Sans KR", system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  --bth-font-serif: "Noto Serif Display", "Noto Sans KR", serif;

  --bth-bg: #ffffff;
  --bth-text: #111;
  --bth-muted: #666;
  --bth-line: #e9e9e9;

  --bth-max: 1200px;
  --bth-narrow: 820px;

  --bth-radius: 14px;
  --bth-shadow: 0 10px 30px rgba(0,0,0,.08);
  
}

#ctt{
  font-family: var(--bth-font-sans);
  color: var(--bth-text);
  background: var(--bth-bg);
  line-height: 1.7;
}

/* (공통) 그누보드 기본 요소 영향 최소화 */
#ctt *{ box-sizing:border-box; }
#ctt a{ color:inherit; text-decoration:none; }
#ctt img{
  width:100%;
  height:auto;              /* ✅ 기본은 비율 유지 */
  display:block;
  object-fit:cover;
}

/* ✅ 실제로 '높이 채움'이 필요한 케이스만 제한 적용 */
#ctt .bth-hero__video,
#ctt .bth-slide img,
#ctt .bth-split__media img,
#ctt .bth-fullimg img{
  height:100%;
}

#ctt figure{ margin:0; }
#ctt p{ margin:0; }
#ctt h1, #ctt h2{ margin:0; font-weight:600; letter-spacing:-.02em; color: #c9bca0 !important; }

/* =========================================================
   Layout helpers
========================================================= */
#ctt .bth{
  width:100%;
  overflow:hidden;
}

#ctt .bth-wrap{
  max-width: var(--bth-max);
  margin: 0 auto;
  padding: 0 18px;
}

#ctt .bth-wrap--narrow{
  max-width: var(--bth-narrow);
}

/* =========================================================
   Headings & text
========================================================= */
#ctt .bth-h1{
  font-family: var(--bth-font-serif);
  font-size: clamp(34px, 4vw, 54px);
  line-height: 1.1;
  letter-spacing: -0.04em;
  color:#fff;
  text-shadow: 0 6px 20px rgba(0,0,0,.35);
}

#ctt .bth-h2{
  font-family: var(--bth-font-serif);
  font-size: clamp(26px, 3vw, 36px);
  line-height: 1.2;
  margin-bottom: 14px;
}

#ctt .bth-p{
  font-size: 16px;
  color: var(--bth-muted);
}

/* =========================================================
   Hero
========================================================= */
#ctt .bth-hero{
  position:relative;
  height: min(76vh, 680px);
  min-height: 520px;
  overflow:hidden;
}

#ctt .bth-hero__video{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
}

#ctt .bth-hero__overlay{
  position:absolute;
  inset:0;
  background: linear-gradient(180deg, rgba(0,0,0,.45) 0%, rgba(0,0,0,.35) 35%, rgba(0,0,0,.55) 100%);
}

#ctt .bth-hero__inner{
  position:relative;
  height:100%;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  padding-bottom: 52px;
}

#ctt .bth-hero__sub{
  margin-top: 14px;
  color: rgba(255,255,255,.92);
  font-size: 16px;
  max-width: 620px;
}

/* =========================================================
   Sections
========================================================= */
#ctt .bth-sec{
  padding: 58px 0;
}



/* =========================================================
   Slider
========================================================= */
#ctt .bth-slider{
  position:relative;
  margin-top: 70px;
}

#ctt .bth-slider__track{
  display:flex;
  gap:14px;
  padding:14px;
   overflow-x: auto;   /* 가로 스크롤 */
  overflow-y: hidden; /* 세로 숨김 */
  overflow: hidden;   /* (중요) visible 제거 */
	
	
  scroll-behavior:smooth;
  scroll-snap-type:x mandatory;
  scrollbar-width:none;
}

#ctt [data-bth-slider="intro"],
#ctt [data-bth-slider="dream"],
#ctt [data-bth-slider="continuous"]{
  width: 100vw;
  max-width: none;
  margin-left: 50%;
  transform: translateX(-50%);
}

/* 2) 내부 track 패딩을 chance와 동일하게 */
#ctt [data-bth-slider="intro"] .bth-slider__track,
#ctt [data-bth-slider="dream"] .bth-slider__track,
#ctt [data-bth-slider="continuous"] .bth-slider__track{
  padding-left: 18px;
  padding-right: 18px;
}

/* 3) 좌우 네비 버튼도 전체 폭 기준으로 위치 */
#ctt [data-bth-slider="intro"] .bth-nav--prev,
#ctt [data-bth-slider="dream"] .bth-nav--prev,
#ctt [data-bth-slider="continuous"] .bth-nav--prev{
  left: 16px;
}

#ctt [data-bth-slider="intro"] .bth-nav--next,
#ctt [data-bth-slider="dream"] .bth-nav--next,
#ctt [data-bth-slider="continuous"] .bth-nav--next{
  right: 16px;
}
#ctt .bth-slider__track{
  background: #fff;
    overflow: visible;
  scroll-snap-type: none !important;
}
#ctt .bth-slide{
  background: #fff;
    overflow: hidden;
	
}
#ctt .bth-nav{
  width: 56px;          /* 기존 42px → 56px */
  height: 56px;
  font-size: 26px;      /* 화살표 아이콘 크기 */
  border-radius: 50%;
}

/* ✅ 모션 민감 사용자 배려 */
@media (prefers-reduced-motion: reduce){
  #ctt .bth-slider__track{
    scroll-behavior:auto;
  }
  #ctt .bth-hero__video{
    animation:none;
  }
}

#ctt .bth-slider__track::-webkit-scrollbar{
  display:none;
}

#ctt .bth-slide{
  flex: 0 0 calc((100% - 28px) / 3);
  border-radius: var(--bth-radius);
  overflow:hidden;
  box-shadow: var(--bth-shadow);
  background:#eee;
  scroll-snap-align:start;
}

#ctt .bth-slide img{
  width:100%;
  height:100%;
}

#ctt .bth-nav{
  position:absolute;
  top:50%;
  transform: translateY(-50%);
  width:56px;
  height:56px;
  border-radius:0;     /* 원형 제거 */
  border:none;        /* 테두리 제거 */
  background:none;   /* 배경 제거 */
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  backdrop-filter:none;
  z-index: 5;
}


#ctt .bth-nav--prev{ left: 10px; }
#ctt .bth-nav--next{ right: 10px; }

/* =========================================================
   Split layout
========================================================= */
#ctt .bth-split{
  display:grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 28px;
  align-items:center;
}

#ctt .bth-split__media{
  border-radius: var(--bth-radius);
  overflow:hidden;
  box-shadow: var(--bth-shadow);
  background:#eee;
  aspect-ratio: 4 / 5;
}

#ctt .bth-split__media img{
  width:100%;
  height:100%;
  object-fit:cover;
}

/* =========================================================
   Full image section
========================================================= */
#ctt .bth-fullimg{
  position:relative;
  overflow:hidden;
}

#ctt .bth-fullimg img{
  width:100%;
  height: min(66vh, 640px);
  object-fit:cover;
}

#ctt .bth-fullimg__overlay{
  position:absolute;
  inset:0;
  background: linear-gradient(180deg, rgba(0,0,0,.25) 0%, rgba(0,0,0,.45) 75%, rgba(0,0,0,.65) 100%);
}

#ctt .bth-fullimg__content{
  position:absolute;
  inset:0;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  text-align:center;
  padding: 0 18px;
  max-width: 920px;
  margin: 0 auto;
  color:#fff;
}

#ctt .bth-fullimg__content .bth-h2{
  color:#fff;
  margin-bottom: 14px;
  text-shadow: 0 8px 24px rgba(0,0,0,.35);
}

#ctt .bth-fullimg__content .bth-p{
  color: rgba(255,255,255,.92);
  max-width: 820px;
}

/* =========================================================
   Bleed (full width inner)
========================================================= */
#ctt .bth-bleed{
  width:100%;
  padding: 0;
}

#ctt .bth-bleed__inner{
  width:100%;
  padding: 0 0 0;
}

/* (옵션) 풀이미지 섹션 안에서도 동일하게 적용 */
#ctt .bth-fullimg__content .bth-h2{
  color: #c9bca0 !important;
}

/* 2) 모든 이미지 모서리 라운드 0 */
#ctt img{
  border-radius: 0 !important;
}

/* figure/컨테이너가 라운드로 잘라먹는 케이스도 함께 제거 */
#ctt .bth-slide,
#ctt .bth-split__media,
#ctt .bth-fullimg{
  border-radius: 0 !important;
}
/* =========================
   HERO 텍스트 가로 + 세로 중앙 정렬
========================= */
#ctt .bth-wrap.bth-hero__inner{
  justify-content: center;  /* 세로 중앙 */
  align-items: center;      /* 가로 중앙 */
  text-align: center;       /* 텍스트 중앙 */
  padding-bottom: 0;        /* 기존 하단 여백 제거 */
}



/* 서브 문구 중앙 유지 */
#ctt .bth-hero__sub{
  margin-left: auto;
  margin-right: auto;
}

#ctt .bth-nav{
  font-size: 0;
}

/* CSS 화살표 생성 */
#ctt .bth-nav::after{
  content: '';
  width: 14px;
  height: 14px;
  border-top: 2px solid #fff;
  border-right: 2px solid #fff;
  transform: rotate(45deg);
}

/* prev 버튼은 반대 방향 */
#ctt .bth-nav--prev::after{
  transform: rotate(-135deg);
}
/*/* =========================================================
   Responsive
========================================================= */

/* Tablet 이하: 1열(선택) */
@media (max-width: 960px){
  #ctt .bth-split{
    grid-template-columns: 1fr;
  }
}

/* Mobile: 1개씩 + 이미지/트랙 정리 */
@media (max-width: 560px){
  #ctt .bth-sec{
    padding: 44px 0;
  }

  /* ✅ 모바일에서 슬라이드 1개씩(=이미지도 화면폭 꽉 차 보이게) */
  #ctt .bth-slide{
    flex: 0 0 100%;
  }

  /* 선택 1) “진짜 풀폭” 원하면 좌우 패딩 제거 */
  #ctt [data-bth-slider] .bth-slider__track{
    padding-left: 0;
    padding-right: 0;
  }

  /* 이미지가 잘리는 게 싫으면(현재 height:100% 강제 때문) 모바일에서는 해제 */
  #ctt .bth-slide img{
    width: 100%;
    height: auto;
    object-fit: cover;
  }
}
/* 이 섹션만 텍스트/이미지 좌우 반전 */
#ctt .bth-split--reverse .bth-split{
  direction: rtl;   /* 그리드/플렉스 순서만 반전 */
}

#ctt .bth-split--reverse .bth-split__text,
#ctt .bth-split--reverse .bth-split__media{
  direction: ltr;   /* 내부 텍스트 방향은 정상 유지 */
}
/* PC에서 3장이 정확히 꽉 차게 (기존 18px 패딩 강제값을 덮어씀) */
@media (min-width: 981px){
  #ctt [data-bth-slider="intro"] .bth-slider__track,
  #ctt [data-bth-slider="dream"] .bth-slider__track,
  #ctt [data-bth-slider="continuous"] .bth-slider__track{
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  #ctt .bth-slide{
    flex: 0 0 calc((100% - 28px) / 3); /* gap 14px * 2 */
  }
}

/* PC에서 텍스트(.bth-p)와 나란히 있는 이미지 간격 +100px */
@media (min-width: 981px){
  #ctt .bth-split{
    gap: calc(28px + 100px);
  }
}