/* 
KAICE 신문 빌더 - 미리보기 및 PDF 전용 CSS
테마 스타일의 영향을 받지 않도록 격리된 스타일
*/

/* 한국 전통 신문 폰트 */
@font-face {
    font-family: 'ChosunBg';
    src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_20-04@1.0/ChosunBg.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'ChosunLo';
    src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_20-04@1.0/ChosunLo.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'ChosunKm';
    src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_20-04@1.0/ChosunKm.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Chosunilbo_myungjo';
    src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_one@1.0/Chosunilbo_myungjo.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

/* 미리보기 컨테이너 CSS 리셋 및 격리 */
.kaice-newspaper-preview-wrapper {
    /* CSS 리셋 - 테마 스타일 무효화 */
    all: initial;
    font-family: 'Chosunilbo_myungjo', serif !important;
    
    /* 배경과 테두리 */
    background: #ffffff !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 12px !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) !important;
    overflow: hidden !important;
    display: block !important;
    width: 100% !important;
}

.kaice-newspaper-preview-header {
    all: initial;
    display: block !important;
    padding: 16px 20px !important;
    background: #f8fafc !important;
    border-bottom: 1px solid #e5e7eb !important;
    font-family: 'Chosunilbo_myungjo', serif !important;
}

.kaice-newspaper-preview-title {
    all: initial;
    display: block !important;
    font-family: 'ChosunKm', serif !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    color: #1e293b !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1.4 !important;
}

.kaice-newspaper-preview-content {
    all: initial;
    display: block !important;
    height: auto !important;
    max-height: calc(100vh - 140px) !important;
    overflow-y: auto !important;
    padding: 0 !important;
    font-family: 'Chosunilbo_myungjo', serif !important;
}

/* 스크롤바 스타일링 */
.kaice-newspaper-preview-content::-webkit-scrollbar {
    width: 6px !important;
}

.kaice-newspaper-preview-content::-webkit-scrollbar-track {
    background: #f1f5f9 !important;
    border-radius: 3px !important;
}

.kaice-newspaper-preview-content::-webkit-scrollbar-thumb {
    background: #cbd5e1 !important;
    border-radius: 3px !important;
}

.kaice-newspaper-preview-content::-webkit-scrollbar-thumb:hover {
    background: #94a3b8 !important;
}

/* 신문 페이지 스타일 - 실제 PDF 출력 크기에 맞게 조정 */
.kaice-newspaper-page {
    all: initial;
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    min-height: 100% !important;
    padding: 15px !important;
    background: #ffffff url('../newspaper_texture.png') repeat !important;
    background-size: auto !important;
    font-family: 'Chosunilbo_myungjo', serif !important;
    font-size: 13px !important;
    line-height: 1.6 !important;
    color: #000000 !important;
    box-sizing: border-box !important;
    justify-content: space-between !important;
}

/* 신문 헤더 */
.kaice-newspaper-header {
    all: initial;
    display: block !important;
    text-align: center !important;
    margin-bottom: 15px !important;
    padding-bottom: 12px !important;
    border-bottom: 2px solid #000000 !important;
    font-family: 'ChosunBg', serif !important;
    flex-shrink: 0 !important;
}

/* 신문 제목 전용 스타일 - 최고 우선순위 */
.kaice-newspaper-page .kaice-newspaper-header .kaice-newspaper-title,
.kaice-newspaper-title {
    all: initial;
    display: block !important;
    font-family: 'ChosunLo', serif !important;
    font-size: 24px !important;
    font-weight: bold !important;
    color: #000000 !important;
    margin: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding: 0 !important;
    line-height: 1.2 !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
}

.kaice-newspaper-meta {
    all: initial;
    display: flex !important;
    justify-content: space-between !important;
    font-family: 'Chosunilbo_myungjo', serif !important;
    font-size: 11px !important;
    color: #333333 !important;
    margin-top: 6px !important;
}

.kaice-newspaper-date,
.kaice-newspaper-reporter {
    all: initial;
    display: block !important;
    font-family: 'Chosunilbo_myungjo', serif !important;
    font-size: 11px !important;
    color: #333333 !important;
    margin: 0 !important;
    padding: 0 !important;
}

.kaice-newspaper-divider {
    all: initial;
    display: block !important;
    height: 1px !important;
    background: #000000 !important;
    margin: 8px 0 !important;
    border: none !important;
}

.kaice-newspaper-content {
    all: initial;
    display: flex !important;
    flex-direction: column !important;
    flex: 1 !important;
    min-height: 0 !important;
}

/* 기사 제목 스타일 */
.kaice-article-title,
.kaice-main-title,
.kaice-sub-title,
.kaice-quarter-title {
    all: initial;
    display: block !important;
    font-family: 'ChosunBg', serif !important;
    font-weight: bold !important;
    color: #000000 !important;
    margin: 0 0 8px 0 !important;
    padding: 0 !important;
    line-height: 1.3 !important;
}

.kaice-main-title {
    font-size: 23px !important; /* 22px에서 23px로 증가 */
}

.kaice-sub-title {
    font-family: 'ChosunKm', serif !important;
    font-size: 22px !important; /* PDF와 동일하게 22px로 통일 */
}

.kaice-quarter-title {
    font-size: 19px !important; /* 16px에서 19px로 증가 */
}

/* 기사 본문 스타일 */
.kaice-article-content,
.kaice-main-content,
.kaice-sub-content,
.kaice-quarter-content,
.kaice-main-text,
.kaice-sub-text,
.kaice-quarter-text {
    all: initial;
    display: block !important;
    font-family: 'Chosunilbo_myungjo', serif !important;
    font-size: 13px !important; /* article-text, sub-text, quarter-text 동일한 크기 */
    line-height: 1.6 !important;
    color: #000000 !important;
    margin: 0 !important;
    padding: 0 !important;
    text-align: justify !important;
    text-indent: 1.5em !important; /* 1.5글자 들여쓰기 추가 */
}

.kaice-main-text {
    font-size: 15px !important; /* 메인 기사는 약간 더 크게 */
    text-indent: 1.5em !important; /* 메인 기사도 들여쓰기 적용 */
}

.kaice-article-text p {
    text-indent: 0.5em;
}

/* 이미지 스타일 */
.kaice-article-image,
.kaice-main-image,
.kaice-sub-image,
.kaice-quarter-image {
    all: initial;
    display: block !important;
    width: 100% !important;
    height: auto !important;
    margin-bottom: 8px !important;
    border: none !important;
    padding: 0 !important;
}

/* 이미지 플레이스홀더 - 인쇄용 비율 강제 적용 */
.kaice-image-placeholder {
    all: initial;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: #f3f4f6 !important;
    color: #9ca3af !important;
    font-family: 'Chosunilbo_myungjo', serif !important;
    font-size: 12px !important;
    border: 1px dashed #d1d5db !important;
    margin-bottom: 8px !important;
    padding: 20px !important;
    text-align: center !important;
    min-height: 80px !important;
    box-sizing: border-box !important;
}

/* 16:9 비율 강제 적용 */
.kaice-image-placeholder {
    aspect-ratio: 16/9 !important;
}

/* 1:1 비율 강제 적용 (필요시) */
.kaice-image-placeholder.square {
    aspect-ratio: 1/1 !important;
}

.kaice-image-placeholder.small {
    font-size: 10px !important;
    min-height: 60px !important;
    padding: 20px !important;
    aspect-ratio: 16/9 !important;
}

/* Layout 1 - 믹스 레이아웃 */
.layout-1-preview {
    all: initial;
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    font-family: 'Chosunilbo_myungjo', serif !important;
}

.layout-1-preview .main-article-preview {
    all: initial;
    display: block !important;
    margin-bottom: 12px !important;
    padding-bottom: 10px !important;
    border-bottom: 1px solid #cccccc !important;
    flex: 1 !important;
    min-height: 0 !important;
}

.layout-1-preview .article-row {
    all: initial;
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
    height: 100% !important;
}

.layout-1-preview .article-image-col {
    all: initial;
    display: block !important;
}

.layout-1-preview .article-content-col {
    all: initial;
    display: flex !important;
    flex-direction: column !important;
}

.layout-1-preview .sub-articles-preview {
    all: initial;
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
    flex: 1 !important;
    min-height: 0 !important;
}

.layout-1-preview .sub-article {
    all: initial;
    display: flex !important;
    flex-direction: column !important;
}

/* Layout 2 - 잡지형 레이아웃 */
.layout-2-preview {
    all: initial;
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    font-family: 'Chosunilbo_myungjo', serif !important;
}

.layout-2-preview .main-section-preview {
    all: initial;
    display: block !important;
    margin-bottom: 12px !important;
    padding-bottom: 10px !important;
    border-bottom: 1px solid #cccccc !important;
    flex: 2 !important;
    min-height: 0 !important;
}

.layout-2-preview .main-content-row {
    all: initial;
    display: grid !important;
    grid-template-columns: 2fr 1fr !important;
    gap: 10px !important;
    height: 100% !important;
}

.layout-2-preview .main-text {
    all: initial;
    display: block !important;
}

.layout-2-preview .main-image {
    all: initial;
    display: block !important;
}

.layout-2-preview .sub-sections-preview {
    all: initial;
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 6px !important;
    flex: 1 !important;
    min-height: 0 !important;
}

.layout-2-preview .sub-section {
    all: initial;
    display: flex !important;
    flex-direction: column !important;
    border-right: 1px solid #dddddd !important;
    padding-right: 5px !important;
}

.layout-2-preview .sub-section:last-child {
    border-right: none !important;
    padding-right: 0 !important;
}

/* Layout 3 - 4분할 레이아웃 */
.layout-3-preview {
    all: initial;
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    font-family: 'Chosunilbo_myungjo', serif !important;
}

.layout-3-preview .top-articles-preview,
.layout-3-preview .bottom-articles-preview {
    all: initial;
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
    margin-bottom: 10px !important;
    flex: 1 !important;
    min-height: 0 !important;
}

.layout-3-preview .quarter-article {
    all: initial;
    display: flex !important;
    flex-direction: column !important;
    border-right: 1px solid #dddddd !important;
    padding-right: 6px !important;
}

.layout-3-preview .quarter-article:nth-child(even) {
    border-right: none !important;
    padding-right: 0 !important;
}

/* 단락 및 텍스트 요소 리셋 */
.kaice-newspaper-page p {
    all: initial;
    display: block !important;
    font-family: 'Chosunilbo_myungjo', serif !important;
    font-size: 13px !important;
    line-height: 1.6 !important;
    color: #000000 !important;
    margin: 0 0 8px 0 !important;
    padding: 0 !important;
    text-align: justify !important;
    text-indent: 1.5em !important; /* 1.5글자 들여쓰기 추가 */
}

.kaice-newspaper-page h1,
.kaice-newspaper-page h2,
.kaice-newspaper-page h3,
.kaice-newspaper-page h4,
.kaice-newspaper-page h5,
.kaice-newspaper-page h6 {
    all: initial;
    display: block !important;
    font-family: 'ChosunBg', serif !important;
    font-weight: bold !important;
    color: #000000 !important;
    margin: 0 0 8px 0 !important;
    padding: 0 !important;
    line-height: 1.3 !important;
}

.kaice-newspaper-page img {
    all: initial;
    display: block !important;
    max-width: 100% !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
}

/* 미리보기 플레이스홀더 */
.kaice-preview-placeholder {
    all: initial;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    height: 300px !important;
    text-align: center !important;
    color: #6b7280 !important;
    font-family: 'Chosunilbo_myungjo', serif !important;
    padding: 40px 20px !important;
}

.kaice-preview-icon {
    all: initial;
    display: block !important;
    font-size: 48px !important;
    margin-bottom: 16px !important;
    opacity: 0.5 !important;
}

.kaice-preview-placeholder p {
    all: initial;
    display: block !important;
    font-family: 'Chosunilbo_myungjo', serif !important;
    font-size: 14px !important;
    color: #6b7280 !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* 모바일 반응형 (작은 화면에서 미리보기 크기 조정) */
@media (max-width: 1024px) {
    .kaice-newspaper-preview-wrapper {
        margin-bottom: 20px !important;
    }
    
    .kaice-newspaper-preview-content {
        max-height: 350px !important;
    }
    
    /* 모바일에서 정사각형 이미지 너비 100% */
    .kaice-article-image img,
    .kaice-main-image img {
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        aspect-ratio: 1 / 1 !important;
        object-fit: cover !important;
    }
    
    .kaice-image-placeholder.square {
        width: 100% !important;
        max-width: 100% !important;
        aspect-ratio: 1 / 1 !important;
    }
}

@media (max-width: 768px) {
    .layout-1-preview .article-row,
    .layout-1-preview .sub-articles-preview,
    .layout-2-preview .main-content-row,
    .layout-2-preview .sub-sections-preview,
    .layout-3-preview .top-articles-preview,
    .layout-3-preview .bottom-articles-preview {
        grid-template-columns: 1fr !important;
        gap: 8px !important;
    }
    
    .layout-2-preview .sub-section,
    .layout-3-preview .quarter-article {
        border-right: none !important;
        border-bottom: 1px solid #dddddd !important;
        padding-right: 0 !important;
        padding-bottom: 8px !important;
        margin-bottom: 8px !important;
    }
    
    .layout-2-preview .sub-section:last-child,
    .layout-3-preview .quarter-article:last-child {
        border-bottom: none !important;
        padding-bottom: 0 !important;
        margin-bottom: 0 !important;
    }
    
    /* 모바일에서 정사각형 이미지 너비 100% */
    .kaice-article-image img,
    .kaice-main-image img {
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        aspect-ratio: 1 / 1 !important;
        object-fit: cover !important;
    }
    
    .kaice-image-placeholder.square {
        width: 100% !important;
        max-width: 100% !important;
        aspect-ratio: 1 / 1 !important;
    }
}

/* PDF 인쇄용 스타일 - 완전한 여백 제거 */
@media print {
    @page {
        size: A4;
        margin: 0 !important;
        orphans: 1;
        widows: 1;
    }
    
    * {
        -webkit-print-color-adjust: exact !important;
        color-adjust: exact !important;
        page-break-inside: avoid !important;
        box-sizing: border-box !important;
    }
    
    html {
        margin: 0 !important;
        padding: 0 !important;
        width: 210mm !important;
        height: 297mm !important;
        overflow: visible !important;
        font-size: 16px !important;
        zoom: 1 !important;
        transform: none !important;
        -webkit-transform: none !important;
    }
    
    body {
        margin: 0 !important;
        padding: 0 !important;
        width: 210mm !important;
        height: 297mm !important;
        overflow: visible !important;
        font-size: 16px !important;
        line-height: 1.6 !important;
        zoom: 1 !important;
        transform: none !important;
        -webkit-transform: none !important;
    }
    
    .kaice-newspaper-preview-wrapper {
        all: initial !important;
        position: static !important;
        width: 210mm !important;
        height: 297mm !important;
        max-height: 297mm !important;
        margin: 0 !important;
        padding: 0 !important;
        box-shadow: none !important;
        border: none !important;
        border-radius: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        page-break-before: auto !important;
        page-break-after: avoid !important;
        page-break-inside: avoid !important;
        overflow: hidden !important;
        background: url('../newspaper_texture.png') repeat !important;
        background-size: auto !important;
    }
    
    .kaice-newspaper-preview-header {
        display: none !important;
    }
    
    .kaice-newspaper-preview-content {
        height: 297mm !important;
        max-height: 297mm !important;
        overflow: hidden !important;
        padding: 0 !important;
        flex: 1 !important;
        display: flex !important;
        flex-direction: column !important;
        page-break-inside: avoid !important;
    }
    
    .kaice-newspaper-page {
        padding: 12mm 15mm 10mm 15mm !important;
        font-size: 16px !important;
        height: 297mm !important;
        max-height: 297mm !important;
        min-height: 297mm !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: flex-start !important;
        page-break-before: auto !important;
        page-break-after: avoid !important;
        page-break-inside: avoid !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
        background: url('../newspaper_texture.png') repeat !important;
        background-size: auto !important;
        -webkit-print-color-adjust: exact !important;
        color-adjust: exact !important;
        margin: 0 !important;
        zoom: 1 !important;
        transform: none !important;
        -webkit-transform: none !important;
    }
    
    /* 신문 제목 인쇄용 스타일 - 최고 우선순위 */
    .kaice-newspaper-page .kaice-newspaper-header .kaice-newspaper-title,
    .kaice-newspaper-title {
        font-size: 42px !important;
        margin: 0 !important;
        margin-top: 0 !important;
        margin-bottom: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        line-height: 1.2 !important;
    }
    
    .kaice-main-title {
        font-size: 28px !important;
    }
    
    .kaice-sub-title {
        font-family: 'ChosunKm', serif !important;
        font-size: 22px !important;
    }
    
    .kaice-quarter-title {
        font-size: 16px !important;
    }
    
    .kaice-main-text {
        font-size: 18px !important;
        text-indent: 1.2em !important;
    }
    
    .kaice-article-content,
    .kaice-main-content,
    .kaice-sub-content,
    .kaice-quarter-content,
    .kaice-article-text,
    .kaice-sub-text,
    .kaice-quarter-text {
        font-size: 16px !important;
        text-indent: 1.2em !important;
    }
    
    .kaice-newspaper-content {
        flex: 1 !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: flex-start !important;
        height: calc(297mm - 16mm - 50px) !important;
        max-height: calc(297mm - 16mm - 50px) !important;
        overflow: hidden !important;
    }
    
    /* 레이아웃별 구조 강제 적용 */
    .layout-1-preview {
        height: auto !important;
        display: flex !important;
        flex-direction: column !important;
    }
    
    .layout-2-preview {
        height: auto !important;
        display: flex !important;
        flex-direction: column !important;
    }
    
    .layout-3-preview {
        height: auto !important;
        display: flex !important;
        flex-direction: column !important;
    }
    
    /* 잡지형 레이아웃 특별 제어 */
    .layout-2-preview .main-section-preview {
        max-height: 60% !important;
        overflow: hidden !important;
    }
    
    .layout-2-preview .sub-sections-preview {
        max-height: 35% !important;
        overflow: hidden !important;
    }
    
    .layout-2-preview .main-content-row {
        height: 100% !important;
        max-height: 100% !important;
        overflow: hidden !important;
    }
    
    .layout-2-preview .main-text {
        max-height: calc(100% - 60px) !important;
        overflow: hidden !important;
        display: -webkit-box !important;
        -webkit-line-clamp: 15 !important;
        -webkit-box-orient: vertical !important;
    }
    
    .layout-2-preview .sub-text {
        max-height: 80px !important;
        overflow: hidden !important;
        display: -webkit-box !important;
        -webkit-line-clamp: 6 !important;
        -webkit-box-orient: vertical !important;
    }
    
    /* 다른 레이아웃도 비슷하게 제어 */
    .layout-1-preview .main-text {
        overflow: hidden !important;
        display: -webkit-box !important;
        -webkit-line-clamp: 12 !important;
        -webkit-box-orient: vertical !important;
    }
    
    .layout-1-preview .sub-text {
        overflow: hidden !important;
        display: -webkit-box !important;
        -webkit-line-clamp: 8 !important;
        -webkit-box-orient: vertical !important;
    }
    
    .layout-3-preview .quarter-text {
        overflow: hidden !important;
        display: -webkit-box !important;
        -webkit-line-clamp: 10 !important;
        -webkit-box-orient: vertical !important;
    }
}