body {
  margin: 0; height: 110vh; 
  background: radial-gradient(circle at center, #1b2735 0%, #020617 100%);
  display: flex; flex-direction: column; justify-content: center; align-items: center;
  overflow: hidden; color: white; font-family: sans-serif; perspective: 1600px;
  position: relative;
}
#sky { position: absolute; width: 100%; height: 100%; top: 0; left: 0; z-index: 1; }
body::before, body::after {
  content: ""; position: absolute; border-radius: 50%; top: -10px; left: 0;
  animation: space-fall 20s infinite linear; z-index: 0;
}
body::before {
  width: 3px; height: 3px;
  box-shadow: 15vw 20vh #fff, 35vw 45vh rgba(255,255,255,0.7), 75vw 15vh #fff, 85vw 65vh #fff, 55vw 85vh rgba(255,255,255,0.4), 25vw 75vh #fff, 90vw 30vh #fff;
}
body::after {
  width: 1.5px; height: 1.5px;
  box-shadow: 5vw 35vh rgba(255,255,255,0.5), 20vw 15vh #fff, 45vw 60vh rgba(255,255,255,0.3), 65vw 40vh #fff, 80vw 80vh rgba(255,255,255,0.6);
  animation-duration: 35s;
}
@keyframes space-fall { from { transform: translateY(-10vh); } to { transform: translateY(100vh); } }

/* 3D 우주 궤도 공간 컨테이너 */
.orbit-container {
  position: absolute;
  width: 100%; height: 100%;
  top: 500; left: 0;
  display: flex; justify-content: center; align-items: center;
  transform-style: preserve-3d;
  z-index: 3;
}

/* 별자리 공전 시스템 */
.constellation {
  position: absolute;
  /* 🌟 실제 형태가 왜곡되지 않도록 고정 크기 제공 */
  width: 120px; height: 80px; 
  transform-style: preserve-3d;
  cursor: pointer;
  animation: orbit-ellipse 25s infinite linear;
}

/* 🌟 별자리를 이어주는 SVG 선 스타일 */
.constellation-svg {
  position: absolute;
  width: 100%; height: 100%;
  top: 0; left: 0;
  pointer-events: none;
}

/* 마우스 오버 시 하이라이트 및 선 선명화 */
.constellation:hover {
  filter: drop-shadow(0 0 15px #67e8f9) !important;
}
.constellation:hover line {
  stroke-width: 1.5px;
  opacity: 0.9;
}

/* 타원 공전 매커니즘 */
@keyframes orbit-ellipse {
  0% {
    transform: rotateX(-15deg) rotateY(0deg) translateX(360px) rotateY(0deg) scale(1.1);
    z-index: 6; opacity: 0.9;
  }
  25% {
    transform: rotateX(-15deg) rotateY(90deg) translateX(460px) rotateY(-90deg) scale(0.6);
    z-index: 1; opacity: 0.4;
  }
  50% {
    transform: rotateX(-15deg) rotateY(180deg) translateX(360px) rotateY(-180deg) scale(0.4);
    z-index: 1; opacity: 0.15;
  }
  75% {
    transform: rotateX(-15deg) rotateY(270deg) translateX(460px) rotateY(-270deg) scale(0.8);
    z-index: 6; opacity: 0.6;
  }
  100% {
    transform: rotateX(-15deg) rotateY(360deg) translateX(360px) rotateY(-360deg) scale(1.1);
    z-index: 6; opacity: 0.9;
  }
}

.zodiac-label {
  position: absolute;
  bottom: -28px; left: 50%; transform: translateX(-50%);
  font-size: 0.75rem; background: rgba(2, 6, 23, 0.85);
  padding: 4px 8px; border-radius: 4px; white-space: nowrap;
  font-weight: bold; pointer-events: none;
  border: 1px solid transparent;
  transition: all 0.3s ease;
}
.constellation:hover .zodiac-label {
  background: rgba(2, 6, 23, 1);
  box-shadow: 0 0 8px currentColor;
}

/* 별 스타일 고정 (transform 축 오차 방지를 위해 중앙 정렬 추가) */
.star { 
  position: absolute; width: 3px; height: 3px; background: #fff; border-radius: 50%; 
  pointer-events: none; transform: translate(-50%, -50%); 
}

/* 중앙 행성 및 위성 배경 */
.scene { 
  width: 60px; height: 60px; 
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  transform-style: preserve-3d; z-index: -30; pointer-events: none; 
}
.planet { width: 100%; height: 100%; position: relative; transform-style: preserve-3d; animation: spin 12s infinite linear; }
.ring { 
  position: absolute; width: 100%; height: 100%; border: 2px solid #00daff; border-radius: 50%; 
  background: rgba(0, 77, 255, 0.03);
  box-shadow: 0 0 20px rgba(0, 162, 255, 0.4), inset 0 0 15px rgba(0, 218, 255, 0.2); 
}
.r1 { transform: rotateY(0deg); border-color: #00f2fe; } 
.r2 { transform: rotateY(45deg); border-color: #004dff; } 
.r3 { transform: rotateY(90deg); border-color: #22c55e; } 
.r4 { transform: rotateY(135deg); border-color: #00a2ff; } 
.r5 { transform: rotateX(90deg); border-color: #00f2fe; }
@keyframes spin { from { transform: rotateX(15deg) rotateY(0deg); } to { transform: rotateX(15deg) rotateY(360deg); } }

.orbit-axis {
  width: 100%; height: 100%; position: absolute; top: 0; left: 0; transform-style: preserve-3d;
  transform: rotateX(0deg) rotateY(0deg); animation: orbit-rotate 10s infinite linear;
}
.moon { width: 20px; height: 20px; position: absolute; top: 0px; left: 100px; transform-style: preserve-3d; }
.moon-ring {
  position: absolute; width: 100%; height: 100%; border: 1.0px solid #d1d5db; border-radius: 50%;
  background: rgba(156, 163, 175, 0.08); box-shadow: 0 0 8px rgba(0, 0, 0, 0.05);
}
.mr1 { transform: rotateY(0deg); } .mr2 { transform: rotateY(60deg); } .mr3 { transform: rotateX(90deg); }
@keyframes orbit-rotate { from { transform: rotateX(65deg) rotateY(15deg) rotateZ(0deg); } to { transform: rotateX(65deg) rotateY(15deg) rotateZ(360deg); } }

/* 설명 텍스트 영역 상단 배치 */
.info { position: absolute; top: 45px; text-align: center; z-index: 10; pointer-events: none; }
.info h2 { margin: 0 0 6px; letter-spacing: 2px; font-size: 1.5rem; text-shadow: 0 0 10px rgba(0,242,254,0.5); }
.info p { margin: 0; opacity: 0.6; font-size: 0.85rem; }

/* style.css 맨 하단에 있던 .background-poem 스타일을 아래 내용으로 교체/추가 하세요 */

.background-poem {
  position: absolute;
  top: 25%; 
  left: 50%;
  transform: translate(-50%, -50%);
  
  max-width: 550px;
  width: 85%;
  height: 220px; /* 딱 시가 흐르는 가용 범위를 고정해 줍니다 */
  text-align: center;
  
  /* 마우스 클릭 방해 금지 및 레이어 배치 */
  pointer-events: none; 
  z-index: 2; 
  
  /* 지정된 박스 높이 바깥으로 나가는 텍스트는 깔끔하게 숨깁니다 */
  overflow: hidden; 
  
  opacity: 0;
  transition: opacity 0.8s ease-in-out;
}

/* 시의 개별 한 줄에 대한 스타일 */
.poem-line {
  height: 35px;
  margin: 10px 0;
  font-size: 1rem;
  letter-spacing: 1.5px;
  
  /* 읽지 않는 기본 상태: 우주 먼지처럼 아주 은은하게 숨겨둠 */
  color: rgba(226, 232, 240, 0.15); 
  text-shadow: none;
  
  /* 위로 미끄러지듯 흐르는 효과 부여 */
  transition: all 0.8s cubic-bezier(0.25, 1, 0.5, 1); 
}

/* ✨ 정중앙에 걸려 현재 하이라이트된 줄의 스타일 */
.poem-line.active {
  font-size: 1.15rem; /* 살짝 커지면서 */
  font-weight: bold;
  color: #ffffff; /* 하얗게 선명해지고 */
  /* 은은하게 빛나는 밤하늘 성단 효과 */
  text-shadow: 0 0 10px rgba(255, 255, 255, 0.6), 0 0 20px rgba(0, 242, 254, 0.3); 
}

/* 기본 상태의 별빛: 주변 글자(우주 먼지 색상)와 동일하게 숨김 */
.poem-line .highlight-yellow {
  color: inherit;
  text-shadow: inherit;
  font-weight: inherit;
  transition: all 0.8s ease-in-out;
}

/* ✨ 정중앙 활성화(.active)를 만났을 때 노란색 네온 사인으로 깨어나는 효과 */
.poem-line.active .highlight-yellow {
  color: #ffe600 !important;
  font-weight: bold;
  /* 우주 컨셉에 맞춘 필터형 골드/옐로우 네온 그라데이션 광원 */
  text-shadow: 0 0 10px #ffe600, 
               0 0 20px #ffcc00, 
               0 0 35px #ff9900 !important;
}

/* 링크 클릭 불가 현상 해결 */
.info a {
  position: relative;
  z-index: 999;
  pointer-events: auto !important;
  cursor: pointer !important;
}