@font-face {
  font-family: 'Alef';
  src: url('fonts/Alef-Regular.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'AlefB';
  src: url('fonts/Alef-Bold.woff') format('woff');
  font-weight: 700;
  font-style: normal;
}

html, body {
  margin: 0;
  padding: 0;
  height: 100vh;
  overflow: hidden; /* ✅ 세로 스크롤 제거 */
  font-family: 'Alef', sans-serif;
  cursor: url('https://joeunbyeoll.github.io/ForestofChara/img/cursorr.png'), auto; /* ✅ 커서 유지 */
}

#container {
  position: relative; /* 절대 위치 .circle 기준 */
  width: 100vw;
  height: 100vh;
  overflow-x: auto; /* 가로 스크롤 */
  overflow-y: hidden; /* 세로 스크롤 차단 */
  white-space: nowrap;
}

#text-wrapper {
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  white-space: nowrap;
  width: max-content;  /* 자식 요소 합산 너비만큼 */
  z-index: 10;         /* 이미지 위로 */
}

/* 스크롤 트리거 빈 공간 */
.spacer {
  flex-shrink: 0;
  height: 100vh;
}
.typing-box {
  font-family: 'Alef', sans-serif;
  flex-shrink: 0;
  position: relative;
  white-space: pre-wrap;
  overflow: hidden;
  font-size: 1.3em;
  max-width: 40vw;
  color: #000; /* 검정색 또는 원하는 글자색 지정 */
  font-weight: 700;
  text-shadow: 0 0 3px rgba(168, 255, 179, 0.7); /* 연한 네온 효과 */
  user-select: none;
  z-index: 10; /* 다른 요소보다 위에 나오도록 */
}
#text1 { 
  width: 40vw; 
  margin-top: 100px;
  margin-right: 30vw; 
  margin-left: 5vw}

#text2 { 
  width: 40vw; 
  margin-top: 120px;
  left: 670px; }

#text3 { 
  width: 40vw; 
  margin-top: 500px;
  left: 640px; }

#text4 { 
  width: 40vw; 
  margin-top: 600px;
  left: 1260px; }
 }

#text1s {
  font-family: 'IBM Plex Sans KR', sans-serif;
  top: 30%; left: 5%; transform: none;
  font-size: 1.2em;
  font-weight: 500;
}

.spacer {
  flex-shrink: 0;
  height: 100vh; /* 높이도 지정해줘야 보임 (가로 스크롤 기준) */
}




@keyframes blink {
  0%, 50% { opacity: 1; }
  50.01%, 100% { opacity: 0; }
}

.image-slider {
  position: relative; /* 반드시 있어야 자식 absolute가 기준 */
  width: 100vw;
  height: 100vh;
  overflow-x: scroll;
  overflow-y: hidden;
  white-space: nowrap;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.image-slider::-webkit-scrollbar {
  display: none;
}




.scroll-dummy {
  width: 100vw; /* ✅ 이미지 수에 맞춰서 설정 */
  height: 1px;  /* ✅ 높이를 최소화해서 세로 스크롤 안 생기게 */
}

.scroll-container {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  width: 100vw; /* 뷰포트 너비에 딱 맞게 */
  padding: 0; /* 혹시 padding 있으면 제거 */
  margin: 0; /* margin도 확인 */
  box-sizing: border-box;
}


.fade-img {
  position: absolute;
  top: 0;
  left: 0;
  height: 100vh;
  width: auto;
  opacity: 0;
  animation: fadeAnimation 36s infinite;
  animation-timing-function: ease-in-out;
  transition: opacity 2s ease-in-out;
  z-index: 1;
}

.img1 { animation-delay: 0s; }
.img2 { animation-delay: 6s; }
.img3 { animation-delay: 12s; }
.img4 { animation-delay: 18s; }
.img5 { animation-delay: 24s; }
.img6 { animation-delay: 30s; }

@keyframes fadeAnimation {
  0%     { opacity: 0; }
  10%    { opacity: 1; }
  40%    { opacity: 1; }
  50%    { opacity: 0; }
  100%   { opacity: 0; }
}


.typing-fixed {
  position: fixed;
  top: 120px;     /* 원하는 위치로 조정 */
  left: 50px;
  font-size: 35px;
  font-family: 'Alef', sans-serif;
  color: white;
  white-space: nowrap;
  z-index: 1000;
}


@keyframes blinkCursor {
  0%, 100% { border-color: transparent; }
  50% { border-color: white; }
}



/* 🔵 로딩 화면 기본 스타일 */
#loadingOverlay {
  position: fixed;
  z-index: 99999;
   background-color: rgba(255, 255, 255, 1);
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;   
  transition: background-color 0.2s linear;        /* 화면 전체 높이 */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

#introImage {
  max-width: 90%;
  max-height: 60vh;          /* 화면 너무 넘지 않게 */
  object-fit: contain;
  margin-bottom: 0px;
   transition: transform 0.3s ease;
    transform: translateY(-80px);
}

#loadingText {
  position: absolute;
  top: 65%;  /* 이미지 안에서 중앙 */
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: 'Alef', sans-serif;
  font-size: 2em;
  color: black;
  pointer-events: none;
}

#enterBtn {
position: absolute;
  top: 75%;   /* 원하는 위치에 조절 가능 */
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 1.2em;
  padding: 10px 20px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.5s ease;
  background: none;
  border: 2px solid black;
  font-family: 'Alef', sans-serif;
  font-weight: 700;
  border-radius: 8px;
  cursor: url('https://joeunbyeoll.github.io/ForestofChara/img/cursorr.png'), auto;
}

#enterBtn.show {
  opacity: 1;
  pointer-events: auto;
}

.hidden {
  display: none;
}


@keyframes blinkBackground {
  0%, 100% { background: #444; }
  50% { background: #888; }
}

.hidden {
  display: none;
}


.circle-container {
position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
}

.circle {
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background-color: white; /* 기본 원 색상 */
  position: absolute;
  cursor: url('https://joeunbyeoll.github.io/ForestofChara/img/cursorr.png'), auto;
  user-select: none;
  transition: background-color 0.3s;
  transition: transform 0.2s ease;
  z-index: 9999;
}


.circle.yellow:hover,
.circle.black:hover {
  transform: scale(1.4);
}

/* 빨간 원은 hover 시 크기 변화 없음 */
.circle.red:hover {
  transform: none !important;
}

.circle.black {
    background-color: black;
  }
  .circle.yellow {
    background-color: yellow;
  }
  .popup-container {
    position: fixed;
    top: 10px;
    right: 10px;
    width: 200px;
    padding: 10px;
    background: white;
    border: 1px solid #333;
    display: none;
  }
  .popup-container:not(.hidden) {
    display: block;
  }