/* 1. 전체 컨테이너 및 레이아웃 제어 */
.pedigree-view-wrapper {
    margin: 20px auto;
    font-family: 'Malgun Gothic', dotum, sans-serif;
    color: #000;
    background: #fff;
}

/* 가로형/세로형 폭 설정 (구조는 동일, 폭만 차이) */
.pedigree-view-wrapper.h2, .pedigree-view-wrapper.h3, .pedigree-view-wrapper.h4 { max-width: 1400px; }
.pedigree-view-wrapper.v2, .pedigree-view-wrapper.v3 { max-width: 900px; }

/* 2. PDF 출력 버튼 */
.pdf-action-bar { text-align: right; margin-bottom: 10px; }
.pdf-btn { 
    background: #d32f2f; color: #fff; border: none; padding: 8px 15px; 
    cursor: pointer; font-weight: bold; border-radius: 2px; 
}

/* 3. 상단 본인(SELF) 및 상세정보 영역 */
.pedigree-header { text-align: center; margin-bottom: 0; }
.self-highlight-area {
    width: 100%;
    border: 1px solid #000;
    box-sizing: border-box;
}
.self-highlight-area .ped-view-box { border: none !important; padding: 20px; min-height: 100px; }
.self-highlight-area .p-no { font-size: 22px; color: #d32f2f; margin-bottom: 10px; }

/* 4. 그리드 메인 (트리 구조 핵심) */
#pedigree-grid-container {
    display: flex;
    width: 100%;
    min-height: 900px; /* 트리 대칭을 유지하는 최소 높이 */
    border: 1px solid #000;
    border-top: none;
    background: #fff;
}

.pedigree-col {
    display: flex;
    flex-direction: column;
    flex: 1;
    border-right: 1px solid #000;
}
.pedigree-col:last-child { border-right: none; }

/* 5. 학술적 라벨 (Paternal / Maternal) */
.col-label {
    background: #000;
    color: #fff;
    font-size: 10px;
    text-align: center;
    padding: 3px 0;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* 6. 박스 높이 고정 비율 (데이터 양과 상관없이 트리 유지) */
.ped-view-box {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    padding: 10px;
    height: 100% !important;
    box-sizing: border-box;
    border-bottom: 1px solid #000;
    text-align: center;
    overflow: hidden;
}

/* 세대별 높이 50% -> 25% -> 12.5% 고정 */
.parents .ped-view-box { height: 50%; }
.grandparents .ped-view-box { height: 25%; }
.great-grandparents .ped-view-box { height: 12.5%; }
.ggg-grandparents .ped-view-box { height: 6.25%; }

.ped-view-box:last-child { border-bottom: none; }

/* 7. 텍스트 및 상세정보 스타일 */
.p-no { font-weight: bold; font-size: 15px; margin-bottom: 5px; width: 100%; text-align: left !important; padding-left: 5px !important; }
.p-desc {
    font-size: 12px;
    color: #333;
    line-height: 1.4;
    text-align: left !important;
    padding: 0 5px !important;
    display: -webkit-box;
    /*-webkit-line-clamp: 4;  박스 높이 유지를 위한 4줄 제한 */
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* 8. 인브리딩 배경색 (BK님 설정값 유지) */
.bg-c-0 { background-color: #ffffff; }
.bg-c-1 { background-color: #ffcccc; }
.bg-c-2 { background-color: #ccffcc; }
.bg-c-3 { background-color: #ccccff; }
.bg-c-4 { background-color: #ffffcc; }
.bg-c-5 { background-color: #ffccff; }

/* 9. 하단 푸터 */
.pedigree-footer {
    margin-top: 30px;
    padding: 20px;
    text-align: center;
    border-top: 1px solid #000;
}
.copyright { font-size: 11px; color: #888; margin-top: 10px; }

@media print {
    /* 1. 사이트 푸터 숨기기 (유지) */
    .no-print, .pdf-action-bar, #adminbar, #wpadminbar, footer, .site-footer, #footer { 
        display: none !important; 
    }

    /* 2. 전체 배율 (BK님 수치 유지) */
    .pedigree-view-wrapper {
        width: 100% !important;
        zoom: 0.87; 
        margin: 0 !important;
        padding: 0 !important;
        /* overflow: hidden; 삭제 -> 잘림 방지 */
    }

    /* 3. 상단 여백 제거 (전체를 위로 끌어올림) */
    .pedigree-header {
        margin-top: -10mm !important; /* 위쪽 여백을 마이너스로 줘서 위로 바짝 붙임 */
    }

    /* 4. 그리드 높이 (살짝만 줄여서 푸터 공간 확보) */
    #pedigree-grid-container {
        display: flex !important;
        min-height: auto !important;
        height: 680px !important; /* 700에서 딱 20px만 줄여보세요. 이게 푸터를 살립니다. */
        border: 1.5px solid #000 !important;
    }

    /* 5. 로프트 푸터 (아래 잘림 방지) */
    .pedigree-footer {
        margin-top: 2px !important;
        border-top: 1.5px solid #000 !important;
        padding-bottom: 0 !important;
    }

    /* 6. 바디 설정 (배경색 강제 출력 보강) */
    body { 
        -webkit-print-color-adjust: exact !important; 
        print-color-adjust: exact !important;
        color-adjust: exact !important; /* 추가 */
        overflow: visible !important;
        height: auto !important;
    }

    /* 8. 모든 요소 및 배경색 클래스 강제 적용 (가장 중요) */
    * {
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
        color-adjust: exact !important;
    }

    /* 배경색이 들어가는 박스들을 명확하게 지정 */
    .ped-view-box, [class*="bg-c-"] {
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }

    @page {
        size: A4 portrait;
        margin: 5mm; /* 상하 여백을 최소화 */
    }
}