@charset "UTF-8";
/* =================================================================
           base.css - 글로벌 리셋, 변수, 유틸리티, 프린트 스타일
           ================================================================= */
body {
    font-family: 'Pretendard', 'Malgun Gothic', 'Apple SD Gothic Neo', sans-serif;
    background-color: #f4f6f9;
    color: #2c3e50;
    line-height: 1.6;
    margin: 0;
    padding: 0;
}

/* 시스템 로딩 오버레이 & 스피너 */
.loading-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.8);
    z-index: 9999;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.spinner {
    border: 5px solid #f3f3f3;
    border-top: 5px solid #2c3e50;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* 시스템 유틸리티 인프라 */
.clickable { transition: background-color 0.2s; cursor: pointer; }
.clickable:hover { background-color: #d1ecf1 !important; }
.current-time { border: 2px solid #3498db !important; }

/* 공통 애니메이션 효과 */
@keyframes blink {
    0% { opacity: 1; }
    50% { opacity: 0.3; }
    100% { opacity: 1; }
}

/* 미디어 쿼리 반응형 브레이크포인트 */
@media (max-width: 768px) {
    .wide-card-body { flex-direction: column; }
    .wide-card-visual, .wide-card-text { min-width: 100% !important; flex: 1 1 100% !important; }
}

/* 인쇄 모드 전용 하드웨어 가속 미디어 쿼리 */
@media print {
    /* 🌟 1. 인쇄 기본 여백 및 컬러 출력 강제 */
    @page { size: A4 portrait; margin: 15mm 10mm; }
    
    html, body {
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        min-height: auto !important;
        overflow: visible !important;
        background-color: white !important;
        margin: 0 !important;
        padding: 0 !important;
        font-size: 11pt !important; /* 기본 폰트 크기를 인쇄 환경에 맞춰 고정 */
        box-sizing: border-box !important;
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
        zoom: normal !important; /* 브라우저별 호환성이 떨어지는 zoom 속성 대신 폰트 크기로 대응 */
    }

    /* 🌟 2. 화면 전용 높이 제한(100vh) 박살내기 */
    .page-shell, #main-content {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        overflow: visible !important;
        margin: 0 !important;
        padding: 0 !important;
        border: none !important;
        box-shadow: none !important;
        box-sizing: border-box !important;
    }

    /* 🌟 3. 불필요한 UI 숨김 */
    #sidebar, #sidebar-resizer { display: none !important; }
    .no-print { display: none !important; }
    .btn-print { display: none !important; }
    .widget-controls { display: none !important; }
    
    /* 🌟 인쇄 시 화면 밖 요소나 플로팅 UI가 좌측 상단에 깨져서 나오는 잔상 현상 완벽 방어 */
    #loading, .loading-overlay, #wonguk-modal, #fab-container { display: none !important; opacity: 0 !important; visibility: hidden !important; z-index: -9999 !important; height: 0 !important; overflow: hidden !important; }
    
    .sticky-saju-container { position: relative !important; top: auto !important; box-shadow: none !important; margin: 0 0 20px 0 !important; padding: 0 !important; border: none !important; width: 100% !important; max-width: 100% !important; }
    
    /* 🌟 넓은 만세력 테이블이 A4 폭을 넘어가지 않도록 강제 방어 */
    .table-wrapper { overflow: visible !important; width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; border: none !important; }
    table { max-width: 100% !important; width: 100% !important; font-size: 9.5pt !important; }
    th, td { padding: 4px 2px !important; }
    
    * { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; } /* 파스텔톤 배경색 강제 출력 유지 */
    
    /* 🌟 4. 페이지 넘어갈 때 컴포넌트 허리 잘림 방지 (Page Break) 및 높이 제한 해제 */
    /* max-height 6000px 제한으로 인해 뒷 페이지가 통째로 증발하는 버그 완벽 차단 */
    .collapsible-content, .wide-card-container, #sortable-dashboard { 
        display: block !important; /* 🌟 Flex 레이아웃을 Block으로 강제 전환하여 페이지 잘림 현상 해결 */
        height: auto !important;
        max-height: none !important; 
        overflow: visible !important; 
    }

    .wide-card { 
        page-break-inside: avoid !important; 
        break-inside: avoid !important; 
        border: 1px solid #cbd5e1 !important; 
        box-shadow: none !important; 
        margin-bottom: 20px !important; 
        width: 100% !important; 
        max-width: 100% !important; 
    }

    .wide-card-body { flex-direction: column !important; }
    .panel-left-visualization { width: 100% !important; border-right: none !important; border-bottom: 1px solid #e2e8f0 !important; height: auto !important; }
    .panel-right-narrative { width: 100% !important; }
    
    .profile-card { page-break-inside: avoid !important; break-inside: avoid !important; border: 1px solid #cbd5e1 !important; box-shadow: none !important; background: #f8fafc !important; padding: 15px !important; }
    .table-wrapper { page-break-inside: avoid !important; break-inside: avoid !important; margin-bottom: 15px !important; }
    
    h1, h2, h3, h4, .section-header { page-break-after: avoid !important; break-after: avoid !important; }
    
    /* 스크롤바 숨김 */
    ::-webkit-scrollbar { display: none !important; }
    
    /* 🌟 메모장 및 긴 텍스트 영역 전체 출력 강제 (내용 잘림 방지) */
    .markdown-preview, .wide-card-text {
        max-height: none !important;
        height: auto !important;
        overflow: visible !important;
    }

    /* 🌟 프린트 시 뱃지(Badge)류 크기 과대화 방지 및 비율 최적화 */
    .saju-badge { font-size: 0.35em !important; padding: 1px 2px !important; transform: scale(0.9) !important; }
    .timeline-badge-container .saju-badge { font-size: 0.28em !important; padding: 1px 2px !important; transform: scale(0.85) !important; transform-origin: top right; margin-bottom: 1px !important; } /* 운세 타임라인 뱃지 강제 축소 */
    .badge-val { font-size: 0.8rem !important; padding: 1px 4px !important; }
    .badge-val .icon { font-size: 0.85em !important; }
    .step-badge { font-size: 0.65rem !important; padding: 2px 8px !important; margin-right: 8px !important; }
    .analysis-how > div:first-child span, 
    .analysis-what-if > div:first-child span { font-size: 9px !important; padding: 1px 4px !important; }
    .gyoun-badge { font-size: 0.75em !important; padding: 1px 4px !important; }
}