body {
    display: flex;
    justify-content: center;
    align-items: flex-start; /* 수직 정렬을 위쪽으로 변경 */
    min-height: 100vh;
    background-color: #f0f0f0; /* 페이지 배경색 */
    margin: 0;
    font-family: 'Nanum Myeongjo', serif; /* 나눔명조로 변경 */
    font-weight: 400; /* 기본 굵기 */
    padding-top: 5vh; /* 위쪽 여백 */
    box-sizing: border-box; 
}

.book {
    width: 84vw; /* 화면 너비의 84% (기존 80vw에서 5% 증가) */
    max-width: 420px; /* 최대 너비 420px (기존 400px에서 5% 증가) */
    aspect-ratio: 5 / 9; /* 세로 크기 20% 증가 (기존 2/3 -> 5/9) */
    perspective: 1000px; /* 3D 효과를 위한 원근감 */
    position: relative; /* 자식 요소 absolute positioning 기준 */
    transform-style: preserve-3d; /* 자식 요소 3D 변환 활성화 */
}

.cover, .page {
    width: 100%;
    height: 100%;
    position: absolute; /* 겹치도록 배치 */
    top: 0;
    left: 0;
    transform-origin: left center; /* 왼쪽 모서리 기준으로 회전 */
    transition: transform 0.8s ease-out; /* 지속시간 늘리고 타이밍 함수 변경 */
    backface-visibility: hidden; /* 뒷면 숨기기 */
    border-radius: 5px 10px 10px 5px;
    overflow: hidden; /* 내용 넘침 방지 */
    will-change: transform; /* 애니메이션 성능 최적화 */
}

.cover {
    background-color: #7889aa; /* 이미지와 유사한 파란색 계열 */
    /* background-image: url('texture.png'); /* 필요하다면 표지 질감 이미지 */
    background-size: cover;
    box-shadow: 5px 5px 15px rgba(0,0,0,0.3); /* 입체감을 위한 그림자 */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 20px;
    box-sizing: border-box;
    color: #e0d6b3; /* 글자색 (금색 느낌) */
    z-index: 10; /* 커버가 가장 위에 오도록 */
}

.page {
    background-color: #FFF8DC; /* Cornsilk 색상으로 변경 */
    color: #333; /* 페이지 글자색 */
    padding: 25px 30px; /* 상하 패딩 추가 감소 (30px -> 20px) */
    box-sizing: border-box;
    box-shadow: inset -2px 0px 5px rgba(0,0,0,0.1); /* 안쪽 그림자 효과 */
    z-index: 5; /* 커버보다는 아래 */
    display: flex; /* 페이지 내용 정렬 */
    flex-direction: column;
    justify-content: flex-start; /* 상단 정렬 유지 */
    align-items: center;
}

/* 넘겨졌을 때의 스타일 */
.cover.flipped, .page.flipped {
    transform: rotateY(-180deg);
    z-index: 1; /* 넘겨진 페이지는 아래로 */
    box-shadow: -5px 5px 15px rgba(0,0,0,0.3); /* 넘겨진 후 그림자 방향 */
}

.sticker {
    position: absolute;
    top: 40%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #fff;
    color: #555;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 12px;
    font-weight: bold;
    box-shadow: 1px 1px 3px rgba(0,0,0,0.2);
}

.cover .classic {
    font-weight: 300; 
    position: absolute;
    top: 10%;
    font-size: 14px;
    letter-spacing: 1px;
    font-family: 'Nanum Myeongjo', serif; /* 나눔명조로 변경 */
}

.cover .title {
    font-family: 'Nanum Myeongjo', serif; /* 명조 폰트 사용 */
    font-weight: normal; /* 일반 굵기 */
    font-size: 28px; 
    margin: 0;
    margin-top: 20%; 
    line-height: 1.4;
}

.cover .author {
    font-family: 'Nanum Myeongjo', serif; /* 명조 폰트 사용 */
    font-weight: normal; /* 일반 굵기 */
    font-size: 16px;
    margin-top: 10px;
}

.cover .publisher-logo {
    font-family: 'Nanum Myeongjo', serif; /* 나눔명조로 변경 */
    font-weight: normal; /* 일반 굵기 */
    position: absolute;
    bottom: 5%;
    font-size: 18px;
}

.page-navigation {
    position: fixed; /* 화면에 고정 */
    bottom: 20px; /* 하단 여백 */
    left: 50%;
    transform: translateX(-50%);
    width: 80%;
    max-width: 500px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(255, 255, 255, 0.8);
    padding: 10px 15px;
    border-radius: 20px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    z-index: 1000; /* 최상단에 표시 */
}

#page-slider {
    flex-grow: 1;
    margin: 0 15px;
    cursor: pointer;
}

#page-indicator {
    font-size: 14px;
    color: #333;
    min-width: 50px; /* 숫자 변경 시 너비 유지 */
    text-align: right;
}

/* 페이지 네비게이션 화살표 스타일 */
.nav-arrow {
    position: absolute;
    bottom: 15px; /* 하단 여백 설정 */
    transform: none; /* 수직 변환 제거 */
    width: 40px; /* 크기 약간 줄임 (선택 사항) */
    height: 40px; /* 크기 약간 줄임 (선택 사항) */
    color: rgba(0, 0, 0, 0.4);
    cursor: pointer;
    z-index: 100; 
    user-select: none; 
    transition: opacity 0.2s ease-in-out, color 0.2s ease-in-out;
}

.nav-arrow:hover {
    opacity: 0.7; 
    color: #74c0fc; /* 호버 시 색상 변경 */
}

.left-arrow {
    left: 15px; /* 왼쪽 여백 */
}

.right-arrow {
    right: 15px; /* 오른쪽 여백 */
    display: none; /* 오른쪽 화살표 숨김 */
}

/* 첫 페이지의 왼쪽 화살표, 마지막 페이지의 오른쪽 화살표 숨김 처리용 클래스 */
.nav-arrow.hidden {
    display: none;
}

/* 페이지 번호 스타일 */
.page-number {
    position: absolute;
    bottom: 15px; /* 화살표와 동일한 하단 여백 */
    left: 50%;
    transform: translateX(-50%); /* 가로 중앙 정렬 */
    font-size: 14px; /* 폰트 크기 */
    color: #888; /* 폰트 색상 (회색 계열) */
    z-index: 100; /* 화살표와 동일한 z-index */
    user-select: none; /* 텍스트 선택 방지 */
}

/* 시 내용 스타일 */
.poem-content {
    text-align: center; /* 내용 중앙 정렬 (선택 사항) */
    width: 100%; /* 전체 너비 사용 */
    padding-top: 8%; /* 상단 여백 증가 (5% -> 8%) */
}

.poem-content h4 {
    font-size: 32px;
    font-weight: 700; /* Bold 유지 */
    margin-top: 0; 
    margin-bottom: 1.0em; /* 제목 아래 간격 추가로 늘림 (기존 0.8em) */
    color: #333; 
    letter-spacing: 0.05em;
    font-family: 'Nanum Myeongjo', serif; /* 시 제목에 명조체 적용 */
}

/* 시 내용 단락 스타일 */
.poem-content p {
    line-height: 1.6;
    font-size: 21px;
    margin-bottom: 1.5em;
    font-weight: 400;
    font-family: 'Nanum Myeongjo', serif; /* 나눔명조로 변경 */
}

/* 연 구분을 위한 <br> 태그 숨김 또는 영향 최소화 */
.poem-content p + br {
    display: none; /* 연 사이 <br> 태그 숨김 */
}

/* 두번째 페이지 제목 등 다른 h2 요소 폰트 */
.page h2 {
    font-weight: 600; /* SemiBold 유지 */
    font-size: 29px;
    margin-top: 6%; 
    margin-bottom: 0.2em;
    text-align: center;
    letter-spacing: 0.03em;
    font-family: 'Nanum Myeongjo', serif; /* 명조체 적용 */
}

/* 모든 페이지의 내용에 대한 공통 스타일 */
.page-content {
    width: 100%;
    max-width: 90%;
    margin: 0 auto;
    line-height: 1.6; 
    font-size: 21px;
    text-align: justify; 
    word-break: keep-all; 
    font-family: 'Nanum Myeongjo', serif; /* 나눔명조로 변경 */
}

/* 일반 페이지 콘텐츠 내 단락 스타일 */
.page-content p {
    margin-bottom: 1.2em; 
    line-height: 1.6; 
    /* font-size 는 .page-content 에서 상속받음 */
}

/* 모바일 화면 스타일 조정 */
@media (max-width: 768px) {
    .page-navigation {
        bottom: 5px; /* 모바일에서 하단 간격 더 줄이기 (10px -> 5px) */
        width: 90%; /* 모바일에서 너비 약간 늘리기 (선택 사항) */
    }

    .book {
        /* 모바일에서 책 크기 조정 필요 시 여기에 추가 */
        /* 예: width: 90vw; max-width: none; */
    }
}

/* 책갈피 버튼 스타일 */
#bookmark-button {
    position: absolute;
    top: 15px; /* 책 상단 안쪽으로 위치 조정 */
    right: 30px; /* 우측에서 조금 더 왼쪽으로 이동 (기존 15px) */
    font-size: 24px;
    color: #aaa; /* 기본 별 색상 (회색) */
    cursor: pointer;
    z-index: 1100; /* 페이지 네비게이션보다 위에 표시 */
    user-select: none;
    transition: color 0.2s ease-in-out;
}

#bookmark-button.bookmarked {
    color: gold; /* 책갈피 되었을 때 별 색상 (금색) */
}

/* 책갈피 스티커 컨테이너 */
.bookmark-stickers {
    position: absolute;
    top: 30px; /* 상단에서 약간 아래 */
    right: -15px; /* 책 오른쪽 바깥으로 약간 */
    width: 20px; /* 스티커 너비 */
    z-index: 1050; /* 페이지보다는 위, 버튼보다는 아래 */
}

/* 개별 책갈피 스티커 */
.bookmark-sticker {
    height: 40px; /* 스티커 높이 */
    margin-bottom: 5px; /* 스티커 간 간격 */
    border-radius: 0 3px 3px 0; /* 오른쪽 모서리 둥글게 */
    cursor: pointer;
    box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.2);
    transition: transform 0.2s ease-out;
}

.bookmark-sticker:hover {
    transform: translateX(-5px); /* 호버 시 왼쪽으로 약간 이동 */
}

/* 모바일 화면 스타일 조정 */
@media (max-width: 768px) {
    .page-navigation {
        bottom: 5px; /* 모바일에서 하단 간격 더 줄이기 (10px -> 5px) */
        width: 90%; /* 모바일에서 너비 약간 늘리기 (선택 사항) */
    }

    .book {
        /* 모바일에서 책 크기 조정 필요 시 여기에 추가 */
        /* 예: width: 90vw; max-width: none; */
    }
    
    #bookmark-button {
        top: 10px; /* 모바일에서 버튼 위치 조정 */
        right: 25px; /* 모바일에서 왼쪽으로 이동 (기존 10px) */
        font-size: 20px;
    }

    .bookmark-stickers {
        right: -10px; /* 모바일에서 스티커 위치 조정 */
        width: 15px;
    }

    .bookmark-sticker {
        height: 30px;
        margin-bottom: 4px;
    }
}