@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Nanum+Gothic&family=Noto+Sans+KR:wght@100..900&display=swap');


html, body, div, span,
h1, h2, h3, p,
a,
img, strong,
ol, ul, li,dl, dt, dd
{
	margin: 0;
	padding: 0;
	line-height:1.3;
	outline:none;
	color:#333;
}
body {
	font-family:'Noto Sans KR', 'Nanum Gothic', "Lucida Grande", Tahoma, Verdana, AppleGothic, UnDotum, sans-serif;/*★*/
	position:relative;
	background:url(../images/main/intro_bg.jpg) no-repeat center 0;
	margin: 0;
  display: flex;
  justify-content: center; /* 가로 정렬 */
  align-items: center;     /* 세로 정렬 */
  min-height: 100vh;       /* 뷰포트 전체 높이 기준 */
}

p,a{
	color:#fff;
}
ol, ul {
	list-style: none;
}
img{
	display:block;
	outline:none;
	border-width:0;
	margin:0;
	padding:0;
}

/* --- 상단 중앙 로고 --- */
.logo-container {
  position: absolute;
  top: 80px; /* 화면 상단에서의 거리 (필요시 조절) */
  left: 50%;
  transform: translateX(-50%);
  z-index: 100;
}
.logo-container img {
  max-height: 150px; /* 로고 이미지 크기에 맞춰 조절 */
}


/* 50:50 분할 컨테이너 */
.split-container {
  display: flex;
  width: 100vw; height: 100vh;
}

/* 각 섹션 공통 스타일 */
.split-section {
  position: relative;
  flex: 1;
  text-decoration: none;
  overflow: hidden;
  color: #fff;
}

/* 배경 이미지 */
.bg-image {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background-size: cover;
  background-position: center;
  z-index: 1;
  transition: transform 0.5s ease;
}
.split-section:hover .bg-image {
  transform: scale(1.05); /* 마우스 오버 시 배경 확대 효과 */
}

/* 배경 이미지 경로 세팅 */
.derma-section .bg-image { background-image: url('../images/main/intro_bg_theme.jpg'); }
.hair-section .bg-image { background-image: url('../images/main/intro_bg_root2.jpg'); }

/* --- 텍스트 및 화살표 위치 정렬 (핵심 수정 부분) --- */
.content-wrapper {
  position: absolute;
  top: 55%; /* 화면 중앙보다 살짝 아래로 배치 */
  z-index: 2;
}

/* 피부과 (왼쪽 영역) : 우측 정렬, 중앙 기준 130px 여백 */
.derma-section .content-wrapper {
  right: 130px;
  text-align: right;
}

/* 모발이식 (오른쪽 영역) : 좌측 정렬, 중앙 기준 130px 여백 */
.hair-section .content-wrapper {
  left: 130px;
  text-align: left;
}


/* --- 애니메이션 초기 상태 --- */
.title {
  font-size: 3.5rem; font-weight: bold; margin: 0 0 15px 0;
  opacity: 0; transform: translateY(30px);
  color: #fff;
}
.sub {
  font-size: 1.1rem; margin: 0; color: #fff;
  opacity: 0; transform: translateY(30px);
}

.arrow {
  width: 332px; /* 화살표 크기 조절 */
  display: inline-block;
  margin-bottom: 20px; /* 서브 텍스트와의 간격 */
  opacity: 0;
}

/* 피부과 화살표: 오른쪽에서 왼쪽으로 오면서 나타남 */
.arrow-left {
  transform: translate(30px, 20px); 
}

/* 모발이식 화살표: 왼쪽에서 오른쪽으로 오면서 나타남 */
.arrow-right {
  transform: translate(-30px, 20px);
}


/* --- is-active 클래스가 붙었을 때 애니메이션 실행 (순차 딜레이) --- */

/* 1. 타이틀 나타남 */
.split-section.is-active .title {
  opacity: 1; transform: translateY(0);
  transition: all 0.6s ease-out;
}

/* 2. 화살표 나타남 (0.2초 딜레이) */
.split-section.is-active .arrow-left,
.split-section.is-active .arrow-right {
  opacity: 1; transform: translate(0, 0);
  transition: all 0.6s ease-out 0.2s;
}

/* 3. 서브 텍스트 나타남 (0.4초 딜레이) */
.split-section.is-active .sub {
  opacity: 1; transform: translateY(0);
  transition: all 0.6s ease-out 0.4s;
}



/* =========================================
   모바일 최적화 (반응형 미디어 쿼리) 
   화면 가로폭이 768px 이하일 때 아래 스타일이 덮어씌워집니다.
========================================= */
@media screen and (max-width: 768px) {
  
  /* 1. 화면을 좌우 분할에서 상하(위아래) 분할로 변경 */
  .split-container {
    flex-direction: column;
  }

  /* 2. 상단 로고 크기 및 위치 축소 */
  .logo-container {
    top: 20px;
  }
  .logo-container img {
    max-height: 80px; 
  }

 /* 3. 텍스트 컨테이너를 각 영역의 정중앙으로 배치 (수정된 부분) */
  .content-wrapper {
    position: absolute; /* 다시 absolute를 주어 화면 비율에 관계없이 고정 */
    top: 50%;
    left: 50%;
  }

  /* 130px 여백을 없애고 수직/수평 정중앙을 완벽히 맞춤 */
  .derma-section .content-wrapper,
  .hair-section .content-wrapper {
    right: auto;
    left: 50%;
    /* top 50%, left 50%에서 자신의 크기 절반만큼 당겨와 정확한 중앙을 맞추는 핵심 코드 */
    transform: translate(-50%, -50%); 
    text-align: center;
    width: 90%; 
  }

  /* 4. 모바일 화면에 맞게 폰트 크기 축소 */
  .title {
    font-size: 2.2rem;
  }
  .sub {
    font-size: 0.95rem;
    word-break: keep-all; /* 줄바꿈 시 단어가 안 끊어지게 처리 */
  }

  /* 5. 화살표 모션 단순화 (좌우에서 오는 대신, 아래에서 위로 자연스럽게 등장) */
  .arrow {
    width:150px; 
    margin-bottom: 15px;
  }
  .arrow-left, 
  .arrow-right {
    transform: translateY(20px); 
  }
}