body, html {
    margin: 0; padding: 0;
    width: 100%; height: 100%;
    overflow: hidden;
    background-color: #000;
    cursor: url('Angled - Black - Normal.cur'), auto;
}

#bg-video {
    position: fixed; top: 50%; left: 50%;
    min-width: 100%; min-height: 100%;
    z-index: -100; transform: translate(-50%, -50%);
    filter: brightness(0.4);
}

#main-container {
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    height: 100vh;
    animation: fadeInPage 2s ease-out;
}

@keyframes fadeInPage { from { opacity: 0; } to { opacity: 1; } }

#book-frame {
    width: 90vw; /* 너비 확장 */
    height: 80vh; /* 높이 확장 */
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 10px;
    overflow: hidden;
    display: flex;
}

#image-viewport {
    width: 100%;
    height: 100%;
    overflow: auto; /* 확대 시 스크롤 발생 */
    display: block; /* 중앙 정렬 해제 (드래그 자유도 상향) */
    cursor: grab;
}

#image-viewport.active {
    cursor: grabbing;
}

/* 확대 시 실제로 크기가 커지는 컨테이너 */
#zoom-container {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: width 0.2s ease, height 0.2s ease;
}

#book-page {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    user-select: none;
    -webkit-user-drag: none;
}

.controls { margin-top: 25px; z-index: 10; }

button {
    padding: 12px 25px; margin: 0 8px;
    background: rgba(60, 20, 100, 0.7);
    color: #e0d0ff; border: 1px solid #a200ff;
    border-radius: 4px;
    cursor: url('Angled - Busy.cur'), pointer;
}

button:active { cursor: url('Angled Black Purple Shadow.cur'), pointer; }

#page-number { color: #fff; margin-top: 15px; text-shadow: 0 0 10px #a200ff; }

.particle {
    position: absolute; width: 5px; height: 5px;
    background: #d4a0ff; border-radius: 50%;
    pointer-events: none;
    box-shadow: 0 0 8px #a200ff;
    animation: particleFade 0.8s forwards;
}

@keyframes particleFade {
    0% { transform: scale(1); opacity: 1; }
    100% { transform: scale(0); opacity: 0; }
}

/* 스크롤바 숨기기 */
#image-viewport::-webkit-scrollbar { display: none; }