/* CSS */
body {
  font-family: sans-serif;
  background-color: #111;
  min-height: 100vh; /* 최소 높이를 100vh로 설정 */
  display: flex;
  margin: 0;
  flex-direction: column;
  justify-content: space-between; /* 세로 방향으로 space-between 적용 */
  word-break: keep-all; /* 단어를 분리하지 않고 띄어쓰기를 기준으로 줄바꿈 */
}

.content {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* Hero Section */
.hero {
  background-color: #111;
}

/* .hero-title {
  word-wrap: normal;
  font-size: 6rem;
  font-weight: bolder;
  margin-bottom: 0.5rem;
  letter-spacing: 0em;
  color: transparent;
  background-color: whitesmoke;
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
 */
/* Leaflet 지도 스타일 */
.demo-title-text-responsive {
  font-size: calc(
    1.5rem + 1vw
  ); /* 1.5rem은 기본 크기, 1vw는 뷰포트 너비의 1% */
}

.map-container {
  /* 필요에 따라 추가 스타일 정의 */
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1;
  width: 100%; /* 지도의 너비를 컨테이너에 맞춤 */
  aspect-ratio: 16 / 9; /* 16:9 비율을 유지 */
}

#map {
  width: 94%; /* 지도의 너비를 컨테이너에 맞춤 */
  height: 94%; /* 지도의 높이를 컨테이너에 맞춤 */
  min-height: 300px;
}

/* Scroll Change Text */
.scroll-change {
  color: #fff;
  transition: none; /* GSAP가 제어하므로 transition 제거 */
  opacity: 0; /* 초기 투명도 0 */
}

.scroll-change.active {
  opacity: 1;
  transition: opacity 0.3s ease;
}

/* Goto Demo Buttons */

/* 태블릿 사이즈 (최대 768px) */
@media (max-width: 768px) {
  .hero-title {
    font-size: 3.2rem; /* 글꼴 크기 줄임 */
  }
  .hero-subtitle {
    font-size: 1.1rem;
  }
}

/* 모바일 사이즈 (최대 576px) */
@media (max-width: 576px) {
  .hero-title {
    font-size: 2.4rem; /* 글꼴 크기 더 줄임 */
  }
  .hero-subtitle {
    font-size: 1rem;
  }
}