/*
 * 고전소설 번역 블로그 - 소설 읽기 최적화 CSS
 * 폰트: Pretendard (CDN)
 * line-height: 200% (36px @ 18px)
 * 배경: 노트 느낌 (가로선 + 왼쪽 세로선)
 */

/* ========== 웹폰트: 고운바탕 (Google Fonts) ========== */

@import url('https://fonts.googleapis.com/css2?family=Gowun+Batang:wght@400;700&display=swap');

/* ========== 전역 폰트 ========== */

/* WordPress 폰트 CSS 변수 덮어쓰기 (has-body-font-family 등 클래스 대응) */
:root {
    --wp--preset--font-family--body: 'Gowun Batang', 'Batang', 'Georgia', serif;
    --wp--preset--font-family--heading: 'Gowun Batang', 'Batang', 'Georgia', serif;
    --wp--preset--font-family--system-sans-serif: 'Gowun Batang', 'Batang', 'Georgia', serif;
}

/* ========== 노트 배경 (가로선 + 왼쪽 세로선) ========== */

body {
    background-color: #fff;
    background-image:
        /* 왼쪽 빨간 마진선 */
        linear-gradient(90deg, transparent 62px, #f5b8b8 62px, #f5b8b8 64px, transparent 64px),
        /* 가로 줄선 (36px 간격 = 18px × 200%) */
        repeating-linear-gradient(
            transparent,
            transparent 35px,
            #dde8f5 35px,
            #dde8f5 36px
        );
    background-size: 100% 36px;
    background-position: 0 4px;
}

/* ========== 본문 텍스트 ========== */

.entry-content p,
.wp-block-post-content p {
    font-size: 18px !important;
    line-height: 36px !important;
    margin: 0 !important;
    padding-bottom: 36px !important;
    word-break: keep-all;
    text-align: justify;
}

.entry-content,
.wp-block-post-content {
    font-size: 18px !important;
    line-height: 36px !important;
    word-break: keep-all;
}

/* ========== 포스트 제목 ========== */

.wp-block-post-title,
h1.entry-title {
    font-size: 26px !important;
    font-weight: 700;
    line-height: 1.4 !important;
    text-align: center;
    margin-bottom: 24px;
    color: #1a1a1a;
}

/* ========== 헤딩 ========== */

.entry-content h1,
.entry-content h2,
.entry-content h3,
.entry-content h4 {
    font-weight: 700;
    line-height: 1.5 !important;
    margin-top: 36px !important;
    margin-bottom: 18px !important;
    color: #1a1a1a;
}

/* ========== 인용구 ========== */

.entry-content blockquote,
.wp-block-post-content blockquote {
    font-size: 18px !important;
    line-height: 36px !important;
    margin: 0 0 36px 0 !important;
    padding: 8px 1.5em !important;
    border-left: 4px solid #dde8f5;
    background: rgba(200, 216, 240, 0.08);
    color: #444;
}

/* ========== 리스트 ========== */

.entry-content li,
.wp-block-post-content li {
    font-size: 18px !important;
    line-height: 36px !important;
}

/* ========== 링크 ========== */

.entry-content a,
.wp-block-post-content a {
    color: #6a8fbf;
    text-decoration: underline;
    transition: color 0.2s ease;
}

.entry-content a:hover,
.wp-block-post-content a:hover {
    color: #3a5f8f;
}

/* ========== 대표이미지 ========== */

.novel-cover-image img {
    max-width: 420px !important;
    width: 100%;
    height: auto;
    border-radius: 6px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
    display: block;
    margin: 0 auto 36px;
}

/* ========== 사이드바 ========== */

.wp-block-template-part aside,
aside.wp-block-template-part {
    background: rgba(255, 255, 255, 0.85);
    border-left: 1px solid #e0e0e0;
    padding-left: 1.5rem;
}

.wp-block-template-part aside h2 {
    font-size: 1.2rem !important;
    line-height: 1.5 !important;
    border-bottom: 1px solid #e0e0e0;
    padding-bottom: 6px;
    margin-bottom: 12px;
}

/* ========== 투명 처리 ========== */

/* 헤더: 배경 투명 + 상하 패딩 10px */
header.wp-block-template-part {
    background: transparent !important;
    background-color: transparent !important;
    padding-top: 10px !important;
    padding-bottom: 10px !important;
}

/* 헤더 내부 모든 wp-block-group: 배경 투명 + 패딩 0 */
header.wp-block-template-part .wp-block-group,
header.wp-block-template-part .has-base-background-color.has-background {
    background: transparent !important;
    background-color: transparent !important;
    padding: 0 !important;
}

/* 사이드바 위젯 배경 투명 */
aside.wp-block-template-part,
aside.wp-block-template-part .has-base-background-color.has-background,
aside.wp-block-template-part .wp-block-group {
    background: transparent !important;
    background-color: transparent !important;
}

/* 홈 구독순위 배경 섹션 투명 + 상하 패딩 50px */
.has-base-2-background-color.has-background {
    background: transparent !important;
    background-color: transparent !important;
    padding-top: 50px !important;
    padding-bottom: 50px !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

/* popular-books-section: 배경 투명 + 사이드바 padding-top 20px */
.popular-books-section {
    background: transparent !important;
    background-color: transparent !important;
    padding-top: 20px !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

/* ========== 구독순위 홈페이지 카드 레이아웃 ========== */

.popular-books-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 20px;
    max-width: 1200px;
    margin: 0 auto;
}

.book-card {
    background: rgba(255,255,255,0.85);
    border: 1px solid rgba(255,255,255,0.6);
    border-radius: 12px;
    padding: 20px;
    text-align: center;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    transition: transform 0.2s, box-shadow 0.2s;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.book-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.12);
}

.rank-badge {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: #fff;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 16px;
    box-shadow: 0 2px 6px rgba(102,126,234,0.4);
    flex-shrink: 0;
}

.book-card h3 {
    font-size: 16px !important;
    font-weight: 700 !important;
    margin: 4px 0 !important;
    line-height: 1.4 !important;
    color: #1a1a1a;
}

.book-card-author {
    font-size: 13px !important;
    color: #666 !important;
    margin: 0 !important;
    padding: 0 !important;
}

.book-card-desc {
    font-size: 12px !important;
    color: #888 !important;
    font-style: italic;
    line-height: 1.4 !important;
    margin: 0 !important;
    padding: 0 !important;
}

.book-card-stats {
    display: flex;
    gap: 12px;
    font-size: 13px;
    color: #667eea;
    font-weight: 600;
    margin: 4px 0 !important;
    padding: 8px 12px !important;
    background: rgba(102,126,234,0.08);
    border-radius: 8px;
    width: 100%;
    justify-content: center;
}

.book-card-btn {
    display: inline-block;
    margin-top: 4px;
    padding: 8px 18px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: #fff !important;
    text-decoration: none !important;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 700;
    transition: opacity 0.2s;
}

.book-card-btn:hover {
    opacity: 0.85;
}

@media (max-width: 768px) {
    .popular-books-grid {
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
        gap: 14px;
    }
}

/* ========== 구독순위 사이드바 minimal 목록 ========== */
.popular-books-list {
    list-style: none;
    margin: 0 !important;
    padding: 0 !important;
}

.popular-books-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 0 !important;
    margin: 0 !important;
    border-bottom: 1px solid #edf0f5;
    line-height: 1.4 !important;
}

.popular-books-item:last-child {
    border-bottom: none;
}

.pb-rank {
    flex: 0 0 28px;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 5px rgba(102,126,234,0.35);
    flex-shrink: 0;
}

.pb-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.pb-title {
    font-size: 14px !important;
    font-weight: 700;
    color: #222;
    text-decoration: none;
    line-height: 1.4 !important;
}

.pb-title:hover {
    color: #667eea;
}

.pb-meta {
    font-size: 12px !important;
    color: #888;
    line-height: 1.3 !important;
}

.popular-books-empty {
    font-size: 13px;
    color: #999;
}

/* wpautop 빈 p 태그 숨김 */
.popular-books-section p:empty {
    display: none;
    margin: 0;
    padding: 0;
}

/* ========== 글 목록 카드 레이아웃 (아카이브 / 메인) ========== */

/* 포스트 아이템: 이미지(왼쪽) + 콘텐츠(오른쪽) flexbox */
.wp-block-post-template .wp-block-post {
    display: flex;
    flex-direction: row;
    gap: 18px;
    align-items: flex-start;
    padding: 18px 0;
    margin-top: 20px;
    border-bottom: 1px solid #e8eef5;
}

/* 책 표지 썸네일 링크 래퍼 */
.novel-list-thumb-link {
    flex: 0 0 140px;
    max-width: 140px;
    display: block;
}

/* 책 표지 이미지 */
.novel-list-thumb {
    width: 140px;
    height: 196px;
    object-fit: cover;
    border-radius: 4px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.18);
    display: block;
}

/* 오른쪽 콘텐츠 영역 (제목·요약·버튼·메타 세로 스택) */
.novel-post-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
}

/* 글 목록 포스트 제목: 왼쪽 정렬 */
.wp-block-post-template .wp-block-post-title {
    text-align: left !important;
    font-size: 24px !important;
    line-height: 1.5 !important;
    margin: 0 !important;
}

/* 요약글 (최대 3줄) */
.novel-list-excerpt {
    font-size: 14px;
    color: #555;
    line-height: 1.7;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}

/* 더 읽기 버튼 */
.novel-list-readmore {
    display: inline-block;
    align-self: flex-start;
    font-size: 13px;
    font-weight: 600;
    color: #667eea !important;
    text-decoration: none !important;
    padding: 4px 12px;
    border: 1px solid #667eea;
    border-radius: 3px;
    background: #fff !important;
    transition: background 0.2s, color 0.2s;
}

.novel-list-readmore:hover {
    background: #667eea !important;
    color: #fff !important;
    text-decoration: none !important;
}

/* 날짜 · 카테고리 메타 */
.novel-list-meta {
    display: flex;
    gap: 12px;
    font-size: 12px;
    align-items: center;
}

.novel-list-date {
    color: #aaa;
}

.novel-list-categories a {
    color: #888;
    text-decoration: none;
}

.novel-list-categories a:hover {
    color: #667eea;
}

/* 모바일: 이미지 크기 축소 */
@media (max-width: 600px) {
    .novel-list-thumb-link {
        flex: 0 0 90px;
        max-width: 90px;
    }
    .novel-list-thumb {
        width: 90px;
        height: 126px;
    }
    .wp-block-post-template .wp-block-post {
        gap: 12px;
        padding: 14px 0;
    }
}

/* ========== 글 목록 페이지 콘텐츠 영역 패딩 (홈/아카이브 main 내부에만) ========== */
/* main 내부로 한정 → header/footer 에는 영향 없음
   body:not(.single):not(.wp-singular) 으로 단일 포스트 자동 제외 */
body:not(.single):not(.wp-singular) main .wp-block-group.has-global-padding.is-layout-constrained {
    padding-top: 50px !important;
    padding-bottom: 50px !important;
}

/* ========== 부드러운 스크롤 ========== */

html {
    scroll-behavior: smooth;
}

/* ========== 모바일 반응형 ========== */

@media (max-width: 768px) {
    body {
        background-image:
            linear-gradient(90deg, transparent 24px, #f5b8b8 24px, #f5b8b8 26px, transparent 26px),
            repeating-linear-gradient(transparent, transparent 31px, #dde8f5 31px, #dde8f5 32px);
        background-size: 100% 32px;
    }

    .entry-content,
    .wp-block-post-content {
        font-size: 16px !important;
        line-height: 32px !important;
    }
}

/* ========== [chapter_navigation] 쇼트코드 ========== */

.chapter-navigation {
    margin: 24px 0;
    padding: 12px 0;
    border-top: 1px solid #e8eef5;
    border-bottom: 1px solid #e8eef5;
}

.chapter-nav-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.chapter-nav-prev,
.chapter-nav-next,
.entry-content .chapter-nav-prev,
.entry-content .chapter-nav-next,
.wp-block-post-content .chapter-nav-prev,
.wp-block-post-content .chapter-nav-next {
    display: inline-block;
    color: #667eea !important;
    text-decoration: none !important;
    font-size: 14px;
    font-weight: 600;
    padding: 6px 14px;
    border: 1px solid #667eea;
    border-radius: 4px;
    background: #fff !important;
    transition: background 0.2s, color 0.2s;
    line-height: 1.5;
}

.chapter-nav-prev:hover,
.chapter-nav-next:hover,
.entry-content .chapter-nav-prev:hover,
.entry-content .chapter-nav-next:hover,
.wp-block-post-content .chapter-nav-prev:hover,
.wp-block-post-content .chapter-nav-next:hover {
    background: #667eea !important;
    color: #fff !important;
    text-decoration: none !important;
}

.chapter-nav-next {
    margin-left: auto;
}

/* ========== [chapter_list] 쇼트코드 ========== */

.chapter-list-wrapper {
    margin: 16px 0;
}

.chapter-list-details > summary {
    cursor: pointer;
    padding: 10px 14px;
    background: #fff;
    border: 1px solid #e8eef5;
    border-radius: 6px;
    font-weight: 700;
    font-size: 15px;
    list-style: none;
    user-select: none;
}

.chapter-list-details > summary::-webkit-details-marker {
    display: none;
}

.chapter-list-details[open] > summary {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    border-bottom-color: transparent;
}

.chapter-list {
    margin: 0;
    padding: 8px 0 8px 0;
    max-height: 360px;
    overflow-y: auto;
    border: 1px solid #e8eef5;
    border-top: none;
    border-bottom-left-radius: 6px;
    border-bottom-right-radius: 6px;
    list-style: none;
}

.chapter-list-item {
    padding: 5px 14px;
    font-size: 14px;
    line-height: 1.6 !important;
    margin: 0 !important;
    padding-bottom: 5px !important;
}

.chapter-list-item.current span {
    font-weight: 700;
    color: #667eea;
}

.chapter-list-item a {
    color: #333;
    text-decoration: none;
}

.chapter-list-item a:hover {
    color: #667eea;
}

/* ========== 원문 출처 박스 (투명 배경) ========== */

/* 신규 포스트: novel-source-box 클래스 */
.novel-source-box {
    background: transparent !important;
    padding: 20px;
    border-radius: 8px;
    margin-top: 30px;
}

/* 기존 포스트: 인라인 스타일로 #f8f9fa 배경이 적용된 div 투명 처리 */
.entry-content div[style*="#f8f9fa"],
.wp-block-post-content div[style*="#f8f9fa"] {
    background: transparent !important;
}

/* ========== 글 목록 작성자 블록 숨김 ========== */

.wp-block-post-template .wp-block-post-author,
.wp-block-post-template .wp-block-post-author-name,
.wp-block-post-template .wp-block-post-author-biography {
    display: none !important;
}

/* ========== WordPress 기본 이전/다음 포스트 네비게이션 숨김 ========== */
/* (챕터 내 커스텀 네비게이션 사용) */

.wp-block-post-navigation-link {
    display: none !important;
}

/* ========== 인쇄용 ========== */

@media print {
    body {
        background: white;
    }
}

/* ===== 번역 좋아요/싫어요 ===== */
.novel-vote-box {
    text-align: center;
    padding: 28px 20px;
    margin: 40px 0 16px;
    background: #faf7f2;
    border-radius: 12px;
    border: 1px solid #e5d9c8;
}
.novel-vote-title {
    font-size: 1.05rem;
    font-weight: 600;
    margin-bottom: 16px;
    color: #4a3728;
}
.novel-vote-buttons {
    display: flex;
    gap: 16px;
    justify-content: center;
    flex-wrap: wrap;
}
.novel-vote-btn {
    padding: 11px 28px;
    border: 2px solid #c8b89a;
    border-radius: 8px;
    background: white;
    cursor: pointer;
    font-size: 1rem;
    font-family: inherit;
    color: #4a3728;
    transition: all 0.2s;
}
.novel-vote-btn:hover:not(:disabled) {
    background: #f0e8d8;
    border-color: #a08060;
}
.novel-vote-btn.voted {
    background: #4a3728;
    color: white;
    border-color: #4a3728;
}
.novel-vote-btn:disabled {
    opacity: 0.7;
    cursor: not-allowed;
}