* { 
	margin: 0; 
	padding: 0; 
}
body { 
	color: #fff; 
	background-color: #111; 
}

/*//////////////////////////////////////////////////////////////////////////*/
/* ------------------------ Commonly used CSS code ------------------------ */
/*//////////////////////////////////////////////////////////////////////////*/
	/* 공통 버튼 스타일 */
.pin-spacer {
  pointer-events: none !important;
}

.section-button { 
	display: inline-block; 
	border: 1px solid #ffffff; 
	color: #ffffff !important; 
	background: transparent; 
	padding: 3px 7px; 
	font-size:1rem; 
	text-align: center; 
	text-decoration: none; 
	transition: all 0.3s ease; 
	font-weight: bold; /* 볼드 적용 */ 
    /* 클릭 가능하게 하는 핵심 속성 */
    position: relative;           /* z-index가 동작하려면 position 지정 필수 */
    z-index: 9999;                /* 매우 높은 값으로 상단에 배치 */
    pointer-events: auto;         /* 클릭 이벤트 받기 */
    transform: translateZ(0);     /* stacking context 생성으로 레이어 우선순위 분리 */
    cursor: pointer;              /* 클릭 시 커서 변경 */
}

.section-button-wrapper {
    position: relative;
    z-index: 9998;
    pointer-events: auto;
}
	/* 버튼 호버 효과 */
.section-button:hover { 
	background-color: rgba(0, 0, 0, 0.5); 
	box-shadow: 0 0 10px #ffffff; /* 글로우 효과 추가 */ 
}
#section6 .section-button, 
.section01 .section-button, 
.section02 .section-button, 
.section03 .section-button, 
.section04 .section-button, 
.section05 .section-button { 
	padding: 8px 21px; 
	font-size:1.4rem; 
}
	/* parallax__cont */
#parallax__cont { 
	overflow: hidden; 
}
.parallax__item { 
	width: 100%; 
	height: 100vh; 
	position: relative; 
	display: flex; 
	align-items: center; 
	justify-content: center; 
}
.parallax__item__img { 
	width: 10vw; 
	height: 30vw; /* margin: 1vw; */ 
	background-size: cover; 
	background-position: center; 
}
.parallax__item__imgWrap { 
	height: 70%; 
	width: 70%; 
	padding-bottom: 10px; 
	background: #222; 
	position: relative; 
	overflow: hidden; 
}

#section1,#section6,#section7 { 
	background-color: #222; 
}
#section1 .parallax__item__img { background-image: url(https://solomon9146.mycafe24.com/wp-content/uploads/2025/06/nightScean.jpg); }
#section6 .parallax__item__imgbg { background-image: url(https://solomon9146.mycafe24.com/wp-content/uploads/2025/05/s6-bg.jpg); }
#section7 .parallax__item__imgbg { background-image: url(https://solomon9146.mycafe24.com/wp-content/uploads/2025/05/section7.jpg); }
#section7 .parallax__item__img.t1{ background-image: url(https://solomon9146.mycafe24.com/wp-content/uploads/2025/06/s7-t1.jpg); }
#section7 .parallax__item__img.t2{ background-image: url(https://solomon9146.mycafe24.com/wp-content/uploads/2025/05/s7-t2.jpg); }
#section7 .parallax__item__img.t3{ background-image: url(https://solomon9146.mycafe24.com/wp-content/uploads/2025/05/s7-t3.jpg); }
#section7 .parallax__item__img.t4{ background-image: url(https://solomon9146.mycafe24.com/wp-content/uploads/2025/05/s7-t4.jpg); }

/*////////////////////////////////////////////////////////////////////////////////*/
/* ------------------------ CSS code related to section1 ------------------------ */
/*////////////////////////////////////////////////////////////////////////////////*/
#section1 .parallax__item {
    width: 100%;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.parallax__content {
    display: flex;
    width: 80%;
    max-width: 1200px;
    align-items: center;
    justify-content: space-between;
}

/* 좌측 컬럼 (이미지) */
.parallax__left {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

#section1 .parallax__item__img {
    width: 300px;
    height: 400px;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    filter: saturate(0%);
    transition: all 1s;
}

#section1 .parallax__item__img:hover {
    filter: saturate(100%);
    transform: scale(1.025);
}

/* 우측 컬럼 (텍스트 및 버튼) */
.parallax__right {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

#section1 .parallax__item__desc {
    font-size: 1.2vw;
    line-height: 1.6;
    color: #fff;
    text-align: center;
}

/* option */
.split > span { 
	display: inline-block; 
}

/* #section1 .parallax__item__img { position: absolute; left: 8%;  top: -5%; width: 70%; height: 70%; background-repeat: no-repeat; background-position: center center; background-size: cover; filter: saturate(0%); transition: all 1s; }
#section1 .parallax__item__img:hover { filter: saturate(100%); transform: scale(1.025); } */

/*///////////////////////////////////////////////////////////////////////////////////////////////////////////*/
/* ------------------------ CSS code related to horizontal pinning for section01-05 ------------------------ */
/*///////////////////////////////////////////////////////////////////////////////////////////////////////////*/
/* Section 02-05 Pinning css */
#container { 
	height: 100vh; 
	position: relative; 
	overflow: hidden; 
}
section { 
	width: 100%; 
	height: 100vh; 
	position: absolute; 
	background-size: cover; 
	background-position: center; 
}
.section01 { background-image: url(https://solomon9146.mycafe24.com/wp-content/uploads/2025/05/s1-bg.jpg); }
.section02 { background-image: url(https://solomon9146.mycafe24.com/wp-content/uploads/2025/05/s2-bg.jpg); }
.section03 { background-image: url(https://solomon9146.mycafe24.com/wp-content/uploads/2025/05/s3-bg.jpg); }
.section04 { background-image: url(https://solomon9146.mycafe24.com/wp-content/uploads/2025/05/s4-bg.jpg); }
.section05 { background-image: url(https://solomon9146.mycafe24.com/wp-content/uploads/2025/05/s5-bg.jpg); }
.parallax__item__desc { 
	font-size: 2rem; 
	max-width: 80%; 
	text-align: center; 
	color: #fff !important; 
	text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5); 
}
.parallax__item__desc span { 
	font-size: 1.5rem; 
}
.text-content { 
	display: flex; 
	justify-content: center; /* 가로 중앙 정렬 */ 
	align-items: center; /* 세로 중앙 정렬 */ 
	width: 100%; height: 100vh; /* 화면 전체 높이 */ 
	position: absolute; 
	z-index: 10; /* overlay보다 위로 */ 
}
.overlay {
    display: none;
    position: absolute;
    top: 50%;
    left: 50%;
	transform: translate(-50%, -50%);
    width: 100%;
    height: 50%;
    background: rgba(0, 0, 0, 0.5); /* 반투명 배경 */
    /* z-index: 5; /* 텍스트보다 아래로 */
	pointer-events: none !important;
}

/*////////////////////////////////////////////////////////////////////////////////*/
/* ------------------------ CSS code related to section6 ------------------------ */
/*////////////////////////////////////////////////////////////////////////////////*/
#section6 .parallax__item__imgbg, #section7 .parallax__item__imgbg { 
	position: absolute; 
	left: 0; 
	top: 0; 
	width: 100%; 
	height: 100vh; 
	background-color: #fff; 
	background-size: cover; 
	background-position: center; 
}
	/* 텍스트 및 블러 배경 컨테이너 */
#section6 .parallax__item__text { 
	font-size: 3rem; 
	position: absolute; 
	left: 50%; 
	top: 50%; 
	transform: translate(-50%, -50%); 
	width: 80%; 
	text-align: center; 
	opacity: 0; /* 처음엔 숨김 상태 */ 
	display: flex; 
	flex-direction: column; 
	align-items: center; 
	justify-content: center; 
}
	/* 텍스트 내용 */
#section6 .s6-text-content { 
	font-size: 2rem; 
	margin-bottom: 20px; 
}
#section6 .s6-text-content span { 
	font-size: 1.5rem; 
}
	/* 블러 배경 */
.blur-bg { 
	position: absolute; 
	width: 100%; 
	height: 50%; 
	top: 50%; 
	left: 50%; 
	transform: translate(-50%, -50%); 
	background-color: rgba(255, 255, 255, 0.3); 
	-webkit-backdrop-filter: blur(10px); 
	backdrop-filter: blur(10px); 
	border-radius: 10px; 
	opacity: 0; /* 처음엔 숨김 상태 */ 
}

/*////////////////////////////////////////////////////////////////////////////////*/
/* ------------------------ CSS code related to section7 ------------------------ */
/*////////////////////////////////////////////////////////////////////////////////*/
#section7 { 
	position: relative; 
	height: 100vh; /* 컨테이너가 화면 전체 높이를 차지함 */ 
	overflow: hidden; 
}

#section7 .parallax__item__text { 
	font-size: 5vw; 
	text-transform: uppercase; 
	font-weight: bold; 
}

	/* 공통 이미지 스타일 (폭 400px, 높이 300px) */
#section7 .parallax__item__img { 
	width: 400px; 
	height: 300px; 
	position: absolute; 
	opacity: 1; 
	border-radius: 10px; 
}
	/* 오른쪽 그룹: */
	/* 아래쪽 이미지 (t3): center를 calc(50% + 135px)에서, 즉 컨테이너 center보다 135px 아래 */
#section7 .parallax__item__img.t3 { 
	left: calc(50% + 30px); 
	top: calc(50% + 135px); 
	transform: translateY(-50%); 
	transform-origin: left center; 
	z-index: 1; 
}
	/* 위쪽 이미지 (t1): center를 calc(50% - 135px)에서, 즉 컨테이너 center보다 135px 위 */
#section7 .parallax__item__img.t1 { 
	left: calc(50% + 50px); 
	top: calc(50% - 135px); 
	transform: translateY(-50%); 
	transform-origin: left center; 
	z-index: 2; 
}
	/* 왼쪽 그룹: */
	/* 아래쪽 이미지 (t4) */
#section7 .parallax__item__img.t4 { 
	left: calc(50% - 430px); 
	top: calc(50% + 135px); 
	transform: translateY(-50%); 
	transform-origin: right center;
	z-index: 1; 
}
	/* 위쪽 이미지 (t2) */
#section7 .parallax__item__img.t2 { 
	left: calc(50% - 450px); 
	top: calc(50% - 135px); 
	transform: translateY(-50%); 
	transform-origin: right center; 
	z-index: 2; 
}
	/* CTA 텍스트 스타일 */
#section7 .cta-text { 
	position: absolute; 
	top: 50%; 
	left: 50%; 
	transform: translate(-50%, -50%); 
	font-size: 2rem;/* 원하는 폰트 크기로 조정하세요 */ 
	color: #fff;/* 텍스트 색상 */ 
	padding: 1rem 2rem;/* 여유 공간 */ 
	background-color: rgba(0, 0, 0, 0.2);/* 반투명 배경으로 가독성 향상 */ 
	z-index: 3;       /* 이미지 위에 표시되도록 충분히 높은 z-index */ 
	opacity: 1;/* 초기에는 숨김 처리 (GSAP에서 from() 애니메이션으로 등장) */ 
	text-align: center;/* 텍스트 중앙 정렬 */  
	border-radius: 5px;/* 부드러운 모서리 */ 
}
	/* #section7 오버레이: 이미지와 동일한 크기로 설정 */
.menu-overlay { 
	position: absolute; 
	width: 100%; /* 이미지 크기와 동일하게 설정 */ 
	height: 100%;/* 이미지 크기와 동일하게 설정 */ 
	top: 0; 
	left: 0; 
	display: flex; 
	flex-direction: column; 
	justify-content: center;/* 수직 중앙 정렬 */ 
	align-items: center;/* 수평 중앙 정렬 */ 
	background-color: rgba(0, 0, 0, 0.5);/* 반투명 배경 */ 
	border-radius: 10px; 
}
	/* 메뉴 제목 */
.menu-title { 
	font-size: 1.8rem; 
	font-weight: bold; 
	color: white; 
	margin-bottom: 10px; 
}
	/* 메뉴 설명 */
.menu-desc { 
	padding-bottom: 10px; 
	font-size: 1rem; 
	color: white; 
	max-width: 80%; 
	text-align: center; 
}

/* #section1 .parallax__item__desc { font-size: 1vw; line-height: 1.4; margin-top: -4vw; margin-left: -3vw; z-index: 100; position: relative; color: #fff !important; } */

/*///////////////////////////////////////////////////////////////////////////*/
/* ------------------------ General carousel styles ------------------------ */
/*///////////////////////////////////////////////////////////////////////////*/
	/* Swiper slide 고정 크기와 수평 스크롤 설정 */
.my-swiper, 
.my-swiper .swiper-container, 
.my-swiper .swiper-wrapper, 
.my-swiper .swiper-slide { 
	width: 100%; 
	height: 100vh; 
}
.my-swiper .swiper-wrapper { 
	display: flex; 
}
.my-swiper .swiper-slide { 
	flex-shrink: 0; 
}
.slide-title { 
	position: absolute; 
	left: 100px; 
	bottom: 120px; 
	font-size: 2rem; 
	color: white; 
	text-shadow: 0 0 5px rgba(0,0,0,0.5); 
}
.slide-title span {
    font-size: 1.6rem;
  }
	/* Swiper navigation and pagination */
.swiper-pagination { 
	position: absolute; 
	bottom: 40px !important; 
	left: 50%; 
	transform: translateX(-50%); 
	z-index: 100; 
}
.swiper-button-prev, 
.swiper-rtl .swiper-button-next { 
	left: var(--swiper-navigation-sides-offset, 10px) !important; 
	right: auto; 
	color: rgba(255, 255, 255, 0.3) !important; 
	z-index: 100; 
	}
.swiper-button-next,  
.swiper-rtl .swiper-button-prev { 
	right: var(--swiper-navigation-sides-offset, 10px) !important; 
	left: auto; 
	color: rgba(255, 255, 255, 0.3) !important; 
	z-index: 100; 
}
	/* 전체 Swiper 영역을 꽉 채우도록 */
#hero {
    width: 100%;
    height: 100vh; /* 💡 모바일에서도 꽉 차게 */
    position: relative;
    overflow: hidden;
}

	/* Swiper 이미지가 섹션을 꽉 채우게 */
.swiper-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* 💡 꽉 채우되 비율 유지 */
    display: block;
}

/*///////////////////////////////////////////////////////////////////*/
/* ------------------------ Mobile CSS code ------------------------ */
/*///////////////////////////////////////////////////////////////////*/
@media screen and (max-width: 768px) {
  body.page-id-22 .footer-widget-area {
    padding-bottom: 40px;
  }

  body.page-id-22 .site-footer {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  body.page-id-22 .site-footer .footer-widget,
  body.page-id-22 .site-footer .site-info {
    text-align: center;
    width: 100%;
  }

  body.page-id-22 .site-footer .site-info {
    padding-top: 20px;
    font-size: 0.8rem;
    line-height: 1.4;
  }

  .parallax__content {
    flex-direction: column;
    text-align: center;
  }

  .parallax__left,
  .parallax__right {
    width: 100%;
  }
  .parallax__item__desc { 
    font-size: 1.3rem; 
    font-weight: 700; 
  }
  .parallax__item__desc span { 
    font-size: 0.9rem; 
    font-weight: 300; 
  }
  .slide-title {
    font-size: 1.2rem;
    bottom: 200px;
    left: 20px;
    right: 20px;
    text-align: center;
    line-height: 1.4;
  }
  .slide-title span {
    font-size: 0.8rem !important; 
	font-weight: 300;
  }
  #section6 .section-button, 
  .section01 .section-button, 
  .section02 .section-button, 
  .section03 .section-button, 
  .section04 .section-button, 
  .section05 .section-button { 
    padding: 2px 6px; 
    font-size:0.9rem; 
  }

  #section1 .parallax__item__img {
    width: 90%;
  }

  #section1 .parallax__item__desc {
    font-size: 1rem;
  }

  .overlay {
    display: block;
  }

  #section6 .s6-text-content { 
    font-size: 1rem; 
    font-weight: 700; 
  }
  #section6 .s6-text-content span { 
    font-size: 1rem; 
    font-weight: 300; 
  }
  #section7 {
    height: 100vh; /* 전체 화면 높이 유지 */
    display: flex;
    flex-direction: column;
    justify-content: center; /* 수직 중앙 정렬 */
    align-items: center;
    overflow-y: auto;
    padding: 0.5rem 0;
  }

  #section7 .parallax__item__img {
    position: static;
    width: 90%;
    height: auto;
    margin: 0.5rem 0; /* 마진 최소화 */
    transform: none;
    border-radius: 10px;
    z-index: auto;
  }

  .menu-overlay {
    position: relative;
    width: 100%;
    height: 100%;
    padding: 0.5rem; /* 여백 최소화 */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: rgba(0, 0, 0, 0.5);
    border-radius: 10px;
  }
  .menu-title { 
    font-size: 1rem; 
  }
  /* 메뉴 설명 */
  .menu-desc { 
    font-size: 0.8rem; 
  }
  #section7 .cta-text {  
    font-size: 1.5rem; 
    padding: 10px 5px; 
    width: 90%; 
  }
}