/* 서브페이지 레이아웃 구조 */
.sub-container {
    max-width: 1200px;
    margin: 50px auto;
    padding: 0 20px;
    display: flex;
    gap: 50px;

    align-items: flex-start; /* 💡 중요: 자식 요소들이 부모 높이를 강제 상속받지 않도록 설정 */
    height: auto; /* 고정 높이 해제 */
}

.content-area {
    flex: 3;
}

/* S : 사이드 위젯 바 */
.sidebar {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 30px;

    /* 💡 [따라다니기 핵심] 고정 좌표 대신 브라우저 스크롤 흐름에 맞춘 스티키 배치 */
    position: -webkit-sticky; /* 사파리 브라우저 호환 */
    position: sticky;
    top: 100px; /* 상단 헤더 메뉴바와 겹치지 않도록 헤더 높이만큼 여백을 두고 고정 */
    
    height: auto;
}
/* E : 사이드 위젯 바 */

/* 도서 정보 레이아웃 */
.book-meta-box {
    display: flex;
    gap: 30px;
    background-color: var(--bg-surface);
    border: 1px solid var(--border-color);
    padding: 30px;
    margin-bottom: 40px;
}

.book-cover-placeholder {
    width: 140px;
    height: 200px;
    background-color: #0B0C10;
    border: 1px solid rgba(197, 160, 89, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--gold-dim);
    font-size: 0.8rem;
}

.book-info {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.book-category {
    font-size: 0.85rem;
    color: var(--gold-bright);
    margin-bottom: 5px;
}

.book-title {
    font-size: 1.8rem;
    color: var(--text-light);
    margin-bottom: 10px;
}

.book-author {
    font-size: 0.95rem;
    color: var(--text-muted);
    margin-bottom: 15px;
}

.book-rating {
    font-size: 0.9rem;
    color: var(--text-muted);
    display: flex;
    gap: 10px;
}

.book-rating .stars {
    color: var(--gold-bright);
}

/* 아티클 본문 디자인 */
.review-article h4 {
    font-size: 1.3rem;
    color: var(--gold-bright);
    margin: 40px 0 15px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    padding-bottom: 8px;
}

.review-article p {
    font-size: 1rem;
    color: #B0B3B8;
    margin-bottom: 25px;
    text-align: justify;
    font-weight: 300;
}

/* ==========================================================================
⚜️ 사이드 메뉴 리스트 (RECENT REVIEWS) 전용 다크 골드 스크롤바 커스텀
========================================================================== */

/* 1. 리스트를 감싸는 부모 유닛의 최대 높이를 제한하고 스크롤 환경 구축 */
.side-menu-list {
    list-style: none;
    max-height: 240px;    /* 💡 중요: 글이 아무리 많아져도 약 5~6개 높이로 고정하여 화면 밖 이탈 방지 */
    overflow-y: auto;     /* 세로 스크롤 활성화 */
    padding-right: 5px;   /* 스크롤바와 글자 사이의 숨통 여백 */
}

/* 2. 웹킷 브라우저(크롬, 사파리, 엣지, 웨일 등) 전용 스크롤바 전체 규격 */
.side-menu-list::-webkit-scrollbar {
    width: 4px;           /* 매우 슬림하고 정갈한 선 형태로 두께 최소화 */
}

/* 3. 스크롤바가 지나가는 레일(트랙) 디자인 */
.side-menu-list::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.02); /* 배경 속에 자연스럽게 묻히도록 아주 어둡게 처리 */
    border-radius: 2px;
}

/* 4. 사용자가 쥐고 움직이는 스크롤 바(핸들) 디자인 */
.side-menu-list::-webkit-scrollbar-thumb {
    background-color: rgba(197, 160, 89, 0.3); /* 💡 테마와 일치하는 은은한 다크 골드 빛 */
    border-radius: 2px;
    transition: background-color 0.3s ease;
}

/* 5. 스크롤바에 마우스를 올렸을 때(Hover) 하이라이트 연출 */
.side-menu-list::-webkit-scrollbar-thumb:hover {
    background-color: var(--gold-bright); /* #C5A059 밝은 골드로 선명하게 빛남 */
    box-shadow: 0 0 8px var(--gold-bright); /* 미세한 골드 빛 번짐(Glow) 효과 추가 */
}

/* 6. 파이어폭스(Firefox) 브라우저용 스크롤바 두께 및 컬러 대응 */
.side-menu-list {
    scrollbar-width: thin;
    scrollbar-color: rgba(197, 160, 89, 0.3) rgba(255, 255, 255, 0.02);
}

/* 🌌 B안 보완: 심연 속에서 은은하게 피어나는 미스틱 페이딩 프레임 */
.sutra-fade-frame {
    position: relative;
    width: 100%;
    max-width: 720px; /* 인용구 상자 너비와 일치 */
    margin: 40px auto 45px; /* 💡 상하단 마진을 늘려 본문 명조체와의 시각적 숨통 확보 */
    overflow: hidden;
}

.fade-img {
    width: 100%;
    height: auto;
    display: block;
    
    /* 🎯 밝은 수채화 원본을 다크보라 테마의 명조체 글들과 어울리도록 미세 톤다운 */
    filter: brightness(0.85) contrast(1.05) saturate(0.88); 
    transition: all 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

/* 💡 [보완의 핵심] 이미지의 상·하·좌·우 사방 경계선을 흔적도 없이 완전히 녹여버리는 이중 안개 마스크 */
.sutra-fade-frame::after {
    content: '';
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    
    /* 🎯 1. 사방 테두리에 묵직한 안개를 주는 섀도우 (그림이 둥둥 뜨는 현상 원천 차단) */
    box-shadow: inset 0 0 35px 20px #0B0C10; 
    
    /* 🎯 2. 상하단 칼날 경계선을 완벽하게 지워버리는 수직 그라데이션 베일 추가 결합 */
    background: linear-gradient(to bottom, 
        #0B0C10 0%, 
        transparent 15%, 
        transparent 85%, 
        #0B0C10 100%
    );
    pointer-events: none; /* 클릭 간섭 차단 */
}

/* ✨ 마우스를 올렸을 때 안개 속 호수가 신비롭게 펼쳐지는 인터랙션 연출 */
.sutra-fade-frame:hover .fade-img {
transform: scale(1.02); /* 미세한 확장 */
filter: brightness(0.92) contrast(1.1) saturate(0.95); /* 안개가 투명해지듯 본연의 수채화 색감이 차분히 살아남 */
}

/* 📱 모바일 반응형 브레이크 */
@media (max-width: 950px) {
    .sub-container { flex-direction: column; gap: 40px; }
    .sidebar {
        position: static; /* 모바일에서는 플로팅 해제 */
        width: 100%;
        order: 2;
    }
    .content-area { order: 1; }
    .sutra-verse-block { padding: 25px 20px; }
    .sutra-hanja { font-size: 1.25rem; }
}

/* 반응형 모바일 대응 */
@media (max-width: 768px) {
    .book-meta-box {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
    .book-cover-placeholder {
        width: 120px;
        height: 170px;
    }
    .book-title {
        font-size: 1.5rem;
    }
}