body {
    margin: 0;
    height: 100vh;
}

#bg {
 background-color: #3A3A3A;
 height: 100%;
}

/* 로딩 화면 레이아웃 */
#loader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #3A3A3A;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  z-index: 9999; /* 다른 요소들보다 항상 위에 위치 */
}

/* 스피너 디자인 */
.spinner {
  width: 50px;
  height: 50px;
  border: 5px solid #f3f3f3;
  border-top: 5px solid #3498db;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

#page-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100vw;
    height: 90vh;
}

#left-sidebar {
    position: absolute;
    width: 10vw;
    height: 100%;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 5;
}


#right-sidebar {
    position: absolute;
    width: 10vw;
    height: 100%;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 5;
}

#masked-page {
    width: 100vw;
    height: 70%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

#page-wrap {
    max-width: 100%;
    width: max-content;
    height: 100%;
    position: absolute;
    transform: translate(-50%, -50%);
    top: 50%;
    left: 50%;
    pointer-events: none;
}

[id^="book"] {
  pointer-events: auto;
}

.center-img {
    width: 100%;
    height: 100%;
}

.book-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
/*     position: absolute;
    top: 0px;
    left: 0px;
    
    transform: translate(-50%, -50%);
    top: 50%;
    left: 50%;
*/
} 

.center-img.disabled {
  pointer-events: none;      /* 마우스 이벤트 완전 차단 */
  cursor: default;
}

#play-icon {
    display: none;
    /* cursor: pointer; */
    pointer-events: none;
    position: inherit;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    img {
        width: 100px;
    }
}

#navigator {
    z-index: 5;
    position: absolute;
    bottom: 0;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #131313;
    margin: 0 auto;
    height: 10vh;

}

#content {

    color: #e8e8e8;

    span {
        color: #e8e8e8;
    }

}

#pageSelector {
    background: rgba(0, 0, 0, 0.5);
    border: none;
    color: white;
    font-family: inherit;
    line-height: inherit;
    outline: none;
    padding: 0 0.5rem;
    text-align: center;
    width: calc(max(2, 1) * 1ch + 1px)
}

#pageNavi {
    display: flex;
    height: 100%;
}

.controller {
    height: 400px;
    display: grid;
    grid-template-rows: 100px 300px
}

#next, #prev {
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;

    img {
        height: 6rem;
    }
}

#start,#end {
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;

    img {
        height: 2rem;
    }
}

#thumbnails {
    position: absolute;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(24%, 100px));
    justify-content: center;
    gap: clamp(16px, 2vw, 28px);
    bottom: 6rem;
    width: 100%;
}



/* 모바일 환경에서는 네비 컨트롤 숨김 */
@media (max-width: 768px) {
    #next,
    #prev
     {

        img {
            height: 4rem;
        }
    }
    #start,
    #end {
        img {
            height: 2rem;
        }

    }

    #start {order: 1;}
    #prev {order: 2;}

    #next {order: 3;}
    #end {order: 4;}

    /* 1. 사이드바 자체의 영향력을 없앰 (선택 사항) */
  #left-sidebar, #right-sidebar {
    position: static;
    height: 0;
  }

  /* 2. 컨트롤러를 화면 하단에 고정 */
  .controller {
    position: fixed;
    bottom: 5vh; /* 바닥에서 띄울 간격 */
    height: 0;
    z-index: 1000; /* 다른 요소보다 위에 보이도록 */
    display: flex;
    gap: 15px;
  }

  /* 3. 왼쪽 컨트롤러(start, prev) 위치 */
  #left-sidebar .controller {
    left: 20px;
  }

  /* 4. 오른쪽 컨트롤러(end, next) 위치 */
  #right-sidebar .controller {
    right: 20px;
  }

  /* 5. 네비게이터 영역과 겹치지 않게 하려면 navigator에 여백을 줌 */
  #navigator {
    position: fixed;
    bottom: 0;
    width: 100%;
    height: 10vh; /* 네비게이터 높이 예시 */
    display: flex;
    justify-content: center;
    align-items: center;
  }


}