/* style.css */

.flip-book {
    box-shadow: 0 0 20px 0 rgba(0,0,0,0.5);
    margin: 0 auto;
    display: none; /* script.js에서 로드 후 보이도록 처리 */
    z-index: 100;
}

.html-book {
    background-size: cover;
}

.page {
    padding: 20px;
    background-color: #fdfaf7;
    color: #785e3a;
    border: solid 1px #c2b5a3;
    overflow: hidden;
    /* 기본 폰트는 body에서 상속받지만, 언어별로 구체적으로 지정합니다. */
}

/* 언어별 폰트 적용 (body에서 이미 지정했지만, 명시적으로 다시 선언하여 우선순위 확보 가능) */
html[lang="ko"] .page {
    font-family: 'Noto Sans KR', sans-serif;
}

html[lang="en"] .page {
    font-family: 'Nunito', sans-serif;
}


.page .page-content {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: stretch;
}

.page .page-content .page-header {
    height: auto; /* 내용에 맞게 자동 조절 */
    min-height: 30px; /* 최소 높이 보장 */
    font-size: clamp(1rem, 5vw, 1.45rem); /* 반응형 폰트 크기 */
    text-transform: uppercase;
    text-align: center;
    font-weight: 700; /* 제목 굵게 */
    padding-bottom: 8px; /* 헤더와 내용 간 간격 */
    color: #6a5acd; /* 제목 색상 변경 (예시: SlateBlue) 또는 기존 #785e3a 유지 */
}

.page .page-content .page-image {
    height: 100%; /* 이미지는 가변 높이 컨텐츠 영역에서 남은 공간을 채우도록 */
    background-size: contain;
    background-position: center center;
    background-repeat: no-repeat;
    margin-bottom: 10px; /* 이미지와 텍스트 사이 간격 */
}

.page .page-content .page-text {
    flex-grow: 1; /* 사용 가능한 공간을 채우도록 */
    font-size: clamp(0.85rem, 2.6vw, 1.1rem); /* 반응형 폰트 크기, 어린이 가독성 고려 */
    line-height: 1.7; /* 줄 간격 넓게 */
    text-align: justify;
    margin-top: 10px; /* 이미지/비디오 아래 또는 헤더 아래 간격 */
    padding-top: 10px; 
    box-sizing: border-box;
    border-top: solid 1px #f4e8d7;
    font-weight: 400; /* 본문 기본 두께 */
}

.page .page-content .page-footer {
    height: auto; /* 내용에 맞게 자동 조절 */
    min-height: 25px; /* 최소 높이 보장 */
    border-top: solid 1px #f4e8d7;
    font-size: clamp(0.7rem, 2vw, 0.8rem); /* 반응형 폰트 크기 */
    color: #998466;
    padding-top: 5px; /* 푸터 위쪽 내부 간격 */
    font-weight: 500;
}

.page.--left {
    border-right: 0;
    box-shadow: inset -7px 0 30px -7px rgba(0,0,0,0.4);
}

.page.--right {
    border-left: 0;
    box-shadow: inset 7px 0 30px -7px rgba(0,0,0,0.4);
}

.page.--right .page-footer {
    text-align: right;
}

.page.hard {
    background-color: #f2e8d9;
    border: solid 1px #998466;
}

.page.page-cover {
    background-color: #e3d0b5;
    color: #785e3a; /* 커버 텍스트 색상 */
    border: solid 1px #998466;
}

.page.page-cover h2 {
    text-align: center;
    padding-top: clamp(25%, 1vh, 40%); /* 반응형 패딩 */
    font-size: clamp(1.8rem, 5.5vw, 2.8rem); /* 반응형 폰트 크기 */
    font-weight: 700; /* 커버 제목 굵게 */
}

.page.page-cover.page-cover-top {
    box-shadow: inset 0px 0 30px 0px rgba(36,10,3,0.5),-2px 0 5px 2px rgba(0,0,0,0.4);
}

.page.page-cover.page-cover-bottom {
    box-shadow: inset 0px 0 30px 0px rgba(36,10,3,0.5),10px 0 8px 0px rgba(0,0,0,0.4);
}