:root {
  --b: 10,100,155;
  --c: 255, 255, 255;
  --t: 204, 204, 204;
  --f: 255,255,255;
}


.line {
width: 100%;
height: 1px;
position: relative;
background-color: rgb(var(--t), 0.2);
}

.top {
top: 5rem;
}

.bottom {
bottom: 5rem;
}



.ruler {
  z-index: 100;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 2rem;
  height: 100%;
  position: fixed;
  right: 4%;
  display: flex;
  flex-direction: column;
  align-items: center;
  opacity: 0;

}

.rulerLines {
  transform: translateY(-50%);
  top: 50%;
  width: 1px;
  height: 33%;
  background-color: rgb(var(--c), 0.2);
  display: flex;
  flex-direction: column;
  align-items: center;
  position: absolute;
}

.rulerLines span {
width: 1rem;
background-color: rgb(var(--c), 0.4);
height: 1px;
position: absolute;
}

.mask {
  position: fixed;
  height: 33.5%;
  width: 2.5rem;
  /* background-color: #000; */
  z-index: 500;
  display: flex;
  flex-direction: column;
  justify-content: end;
  align-items: center;
  font-size: 0.8rem;
  color: rgb(var(--c));
}

.one {
top: 0;
border-width: 0 0 1px 0;
border-color: rgb(var(--c));
border-style: solid;

}
.two {
bottom: 0;
border-width: 1px 0 0px 0;
border-color: rgb(var(--c));
border-style: solid;
justify-content: start;
}

.psi,.miusM{
  margin: 10px;
  text-wrap: nowrap;
}



.scroll-indicator {
  height: 35px;
  width: 35px;

  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 0; /* 초기 위치는 위 */
  transition: top 0.2s ease;
}

.scroll-indicator svg {
  width: 100%;
  height: 100%;
  transition: top 0.2s ease; 
}

.scroll-indicator svg path{ animation: glow 2s infinite ease-in-out;}

/* 잠수함 불빛처럼 천천히 반짝이는 애니메이션 */
@keyframes glow {
  0%, 100% {
    box-shadow: 0 0 5px rgba(var(--c), 0.6), 0 0 10px rgba(var(--c), 0.2);
    opacity: 0.7;
  }
  50% {
    box-shadow: 0 0 10px rgba(var(--c), 0.85), 0 0 20px rgba(var(--c), 0.55);
    opacity: 1;
  }
}

  /* 둥둥 뜨는 애니메이션 */
  .scroll-indicator svg {
    animation: float 2s ease-in-out infinite;
  }

  /* 애니메이션 키프레임 설정 */
  @keyframes float {
    0% {
      transform: translateY(0);
    }
    50% {
      transform: translateY(-10px); /* 위로 10px 이동 */
    }
    100% {
      transform: translateY(0); /* 원래 위치로 돌아옴 */
    }
  }

.rulerLines span:nth-child(1) {
top:10%;
}

.rulerLines span:nth-child(2) {
top: 20%;
}

.rulerLines span:nth-child(3) {
top: 30%;
}

.rulerLines span:nth-child(4) {
top: 40%;
}

.rulerLines span:nth-child(5) {
top: 50%;
}

.rulerLines span:nth-child(6) {
top: 60%;
}

.rulerLines span:nth-child(7) {
top: 70%;
}

.rulerLines span:nth-child(8) {
top:80%;
}

.rulerLines span:nth-child(9) {
top:90%;
}

@media (max-width:768px){
.ruler{display: none;}

}