/* =================================================================
           cards.css - 와이드 4MAT 서사 분석 카드, 위젯 제어 및 계측 계판(Metrics)
           ================================================================= */
.wide-card-container {
    display: flex;
    flex-direction: column;
    gap: 15px; /* 🌟 카드 사이 간격을 타이트하게 압축 (IFrame 최적화) */
    margin-top: 15px;
    margin-bottom: 20px;
    overflow: visible !important;
    height: auto !important;
}

.wide-card {
    background: #ffffff !important;
    border: none !important;
    box-shadow: 0 10px 35px rgba(15, 23, 42, 0.05), 0 2px 10px rgba(15, 23, 42, 0.02) !important;
    border-radius: 16px !important;
    margin: 0 auto !important; /* 🌟 모든 카드 쏠림 방지 중앙 정렬 강제 */
    padding-bottom: 0 !important;
    overflow: hidden !important;
    width: 100% !important;
    max-width: 100% !important;
    display: block !important;
    box-sizing: border-box !important;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.wide-card:hover {
    box-shadow: 0 12px 28px rgba(31, 72, 110, 0.08), 0 4px 8px rgba(31, 72, 110, 0.04) !important;
}

.wide-card-header {
    background: #ffffff !important;
    border-bottom: 1px solid #f1f5f9 !important; /* 아주 부드러운 구분선만 유지 */
    padding: 14px 18px !important;
    font-size: 1.3em !important;
    font-weight: 800 !important;
    color: #1a252f !important;
    letter-spacing: -0.02em;
    display: flex;
    align-items: center;
    justify-content: space-between;
    user-select: none;
    transition: all 0.2s ease;
}

.wide-card-header[contenteditable="true"]:focus {
    border-bottom: 2px solid #3b82f6 !important;
    border-bottom: 2px solid #e67e22 !important;
    color: #e67e22 !important;
}

.wide-card-header .step-badge {
    background: #2c3e50 !important; /* 다크 네이비로 통일하여 격조 부여 */
    color: #ffffff !important;
    border: none !important;
    padding: 4px 14px !important;
    border-radius: 6px !important;
    font-size: 0.75em !important;
    font-weight: 700;
    margin-right: 12px !important;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    flex-shrink: 0 !important;
    white-space: nowrap !important;
}

.wide-card-body { display: block !important; height: auto !important; padding: 0 !important; box-sizing: border-box; }
.wide-card-visual { display: none !important; }

/* 🔮 에디터 박스 크기 및 동적 포커스 가시성 조율 */
.wide-card-text {
    resize: vertical !important;
    overflow-y: auto !important;
    min-height: 120px !important;
    max-height: 2000px !important;
    padding: 18px !important;
    box-sizing: border-box;
    transition: background-color 0.2s ease, border-color 0.2s ease;
    border: 1px solid #cbd5e1 !important;
    border-radius: 8px;
    font-size: 1.05em;
    line-height: 1.8;
    background-color: #f8fafc !important;
}

.wide-card-text[contenteditable="true"]:focus {
    outline: none !important;
    background-color: #ffffff !important;
    box-shadow: inset 0 0 0 2px #3b82f6, 0 4px 15px rgba(59, 130, 246, 0.1) !important;
}

/* 스크롤바 커스텀 (모던 화이트 그라데이션) */
.wide-card-text::-webkit-scrollbar { width: 12px; }
.wide-card-text::-webkit-scrollbar-track { background: transparent; }
.wide-card-text::-webkit-scrollbar-thumb { background: linear-gradient(145deg, #ffffff 0%, #cbd5e1 100%); border: 3px solid transparent; background-clip: padding-box; border-radius: 10px; box-shadow: inset 0 1px 4px rgba(15,23,42,0.1); }
.wide-card-text::-webkit-scrollbar-thumb:hover { background: linear-gradient(145deg, #ffffff 0%, #94a3b8 100%); }

/* =================================================================
   🌟 분석 텍스트 블록 (4MAT 및 상세 진단) - CSS 양식화 완료
   ================================================================= */
.analysis-box { margin-bottom: 20px; background: #ffffff; border: none; border-radius: 12px; box-shadow: 0 6px 20px rgba(15, 23, 42, 0.04); overflow: hidden; }
.analysis-header { background: #f8fafc; border-bottom: 1px solid transparent; padding: 12px 18px; }
.analysis-header h4 { margin: 0; font-size: 1.15rem; font-weight: 800; color: #1e3a8a; display: flex; align-items: center; gap: 8px; outline: none; }
.analysis-header h4 span { width: 4px; height: 18px; background: #2563eb !important; display: inline-block; border-radius: 2px; flex-shrink: 0 !important; }
.analysis-header h4 span.detail-mark { background: #64748b !important; }
.analysis-body { padding: 20px; display: flex; flex-direction: column; gap: 16px; }

.analysis-why { font-size: 0.95rem; line-height: 1.7; color: #52525b; border-left: 3px solid #cbd5e1; padding-left: 12px; outline: none; }
.analysis-what { font-size: 1.05rem; line-height: 1.7; color: #0f172a; font-weight: 700; outline: none; }

.analysis-how { background: #f8fafc; border: none; box-shadow: inset 0 2px 8px rgba(0,0,0,0.02); padding: 16px; border-radius: 10px; margin-top: 4px; }
.analysis-how > div:first-child { font-size: 0.9rem; font-weight: 800; color: #334155; margin-bottom: 10px; display: flex; align-items: center; gap: 6px; }
.analysis-how > div:first-child span { background:#475569 !important; color:white !important; border-radius:4px; padding:3px 6px; display:inline-flex; align-items:center; justify-content:center; font-size:11px; flex-shrink: 0 !important; white-space: nowrap !important; line-height: 1.2; letter-spacing: 0.5px; }
.analysis-how > div:last-child { font-size: 0.95rem; line-height: 1.7; color: #1e293b; white-space: pre-wrap; outline: none; }

.analysis-what-if { background: #f1f5f9; border: none; box-shadow: inset 0 2px 8px rgba(0,0,0,0.02); padding: 16px; border-radius: 10px; margin-top: 4px; }
.analysis-what-if > div:first-child { font-size: 0.9rem; font-weight: 800; color: #1e293b; margin-bottom: 10px; display: flex; align-items: center; gap: 6px; }
.analysis-what-if > div:first-child span { background:#1e293b !important; color:white !important; border-radius:4px; padding:3px 6px; display:inline-flex; align-items:center; justify-content:center; font-size:11px; flex-shrink: 0 !important; white-space: nowrap !important; line-height: 1.2; letter-spacing: 0.5px; }
.analysis-what-if > div:last-child { font-size: 0.95rem; line-height: 1.7; color: #0f172a; outline: none; }

.analysis-guide { background: #f8fafc; border: none; box-shadow: inset 0 2px 8px rgba(0,0,0,0.04); padding: 16px; border-radius: 10px; position: relative; margin-top: 4px; }
.analysis-guide .guide-tag { position: absolute; top: -10px; right: 10px; background: #94a3b8 !important; color: white !important; font-size: 0.7rem; font-weight: bold; padding: 3px 8px; border-radius: 4px; flex-shrink: 0 !important; white-space: nowrap !important; line-height: 1; }
.analysis-guide .guide-title { font-size: 0.85rem; font-weight: 800; color: #475569; margin-bottom: 8px; }
.analysis-guide > div:last-child { font-size: 0.9rem; line-height: 1.7; color: #334155; white-space: pre-wrap; outline: none; }

.analysis-diagnosis { background: #f8fafc; border-left: 3px solid #94a3b8; padding: 12px 16px; border-radius: 4px; color: #334155; outline: none; }
.analysis-explanation { background: #f1f5f9; border-left: 3px solid #64748b; padding: 12px 16px; border-radius: 4px; color: #1e293b; outline: none; }

/* =================================================================
   🌟 정량 지표 메트릭스 (Left Content) - CSS 양식화 완료
   ================================================================= */
.metrics-container { display: flex; flex-direction: column; gap: 14px; height: 100%; box-sizing: border-box; }
.metrics-title { font-size: 0.8rem; font-weight: 800; color: #3b82f6; margin-bottom: 2px; padding-left: 2px; }

.metrics-pillar-anatomy { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; gap: 12px; padding: 15px; background: #f8fafc; border-radius: 12px; border: none; box-shadow: inset 0 2px 8px rgba(0,0,0,0.02); }
.anatomy-title { font-size: 0.85rem; font-weight: 800; color: #475569; }
.anatomy-grid { display: flex; gap: 20px; }
.anatomy-label { font-size: 0.75rem; color: #64748b; font-weight: bold; margin-bottom: 4px; text-align: center; }
.anatomy-char { font-size: 2.5rem; font-weight: 900; line-height: 1; padding: 15px; background: white; border-radius: 10px; border: none; box-shadow: 0 6px 15px rgba(15, 23, 42, 0.05); width: 60px; text-align: center; }

.metrics-core-profile-list { display: flex; flex-direction: column; gap: 8px; }
.metrics-core-item { display: flex; justify-content: space-between; align-items: center; padding: 12px 16px; background: #ffffff; border: none; border-left: 4px solid #3b82f6; border-radius: 8px; box-shadow: 0 2px 8px rgba(15, 23, 42, 0.03); }
.metrics-key { font-size: 0.85rem; color: #475569; font-weight: 700; }
.metrics-val { font-size: 0.95rem; color: #0f172a; font-weight: 800; text-align: right; flex-shrink: 0 !important; white-space: nowrap !important; }

.metrics-badge-list { display: flex; flex-direction: column; gap: 8px; }
.metrics-empty { padding: 10px; text-align: center; color: #94a3b8; font-size: 0.8rem; border: none; box-shadow: inset 0 2px 6px rgba(0,0,0,0.02); border-radius: 8px; }
.metrics-badge-item { display: flex; justify-content: space-between; align-items: center; padding: 12px 16px; background: #ffffff; border: none; border-radius: 8px; box-shadow: 0 2px 8px rgba(15, 23, 42, 0.03); }
.badge-key { font-size: 0.8rem; color: #64748b; font-weight: 600; }
.badge-val { font-size: 0.9rem; padding: 2px 8px; border-radius: 4px; font-weight: 700; text-align: right; flex-shrink: 0 !important; white-space: nowrap !important; }
.badge-val .icon { font-weight: 900; opacity: 0.7; margin-right: 4px; }

.md-blockquote { margin: 16px 0; padding: 16px 20px; background-color: #f8fafc; border-left: 3px solid #94a3b8; border-radius: 0 8px 8px 0; font-size: 0.92em; color: #475569; width: 100%; box-sizing: border-box; font-style: normal; }
.md-blockquote code { background: #edf2f7; padding: 2px 4px; border-radius: 3px; font-weight: bold; color: #1a1a1a; }

/* 명리 정량 지표 계측 계판 박스 */
.metrics-box { background: #ffffff; border-radius: 8px; padding: 20px 24px; margin-top: 12px !important; border: 1px solid #cbd5e1; box-shadow: 0 2px 6px rgba(0,0,0,0.03); width: 100%; box-sizing: border-box; font-size: 0.95em; }
.core-list { list-style: none; padding: 0; margin: 0; font-size: 0.95em; flex-grow: 1; }
.core-list li { margin-bottom: 10px; border-bottom: 1px dashed #f1f5f9; padding-bottom: 6px; display: flex; justify-content: space-between; align-items: center; }
.core-list li:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }
.core-badge { padding: 3px 10px; border-radius: 6px; font-weight: 500; font-size: 0.9em; }

.badge-true { background: #f0fdfa; color: #0d9488; border: 1px solid #ccfbf1; }
.badge-false { background: #f8fafc; color: #64748b; border: 1px solid #e2e8f0; }
.badge-good { background: #eff6ff; color: #2563eb; border: 1px solid #bfdbfe; }
.badge-bad { background: #fef2f2; color: #e11d48; border: 1px solid #fecdd3; }
.badge-info { background: #f8fafc; color: #475569; border: 1px solid #e2e8f0; }

/* 오행 밀도 막대바 및 구궁명괘 격자 */
.yy-bar-container { width: 100%; display: flex; height: 8px; border-radius: 4px; overflow: hidden; margin-top: 8px; background: #f1f5f9; }
.yy-yang { background: linear-gradient(90deg, #fda4af, #f43f5e); transition: width 0.5s ease; }
.yy-yin { background: linear-gradient(90deg, #93c5fd, #3b82f6); transition: width 0.5s ease; }
.gugung-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: #e2e8f0; border: 1px solid #cbd5e1; padding: 0; border-radius: 6px; width: 120px; height: 120px; margin: 0 auto; overflow: hidden; }
.gugung-cell { background: #ffffff; color: #64748b; display: flex; flex-direction: column; align-items: center; justify-content: center; font-size: 1.1em; font-weight: 500; }
.gugung-cell.active { background: #fffbeb; color: #b45309; font-weight: 700; box-shadow: none; }

/* 위젯 컨트롤 마스터 소트 고스트 */
.widget-controls { display: flex; gap: 6px; opacity: 0.3; transition: opacity 0.2s; margin-left: auto; }
.wide-card:hover .widget-controls { opacity: 1; }
.widget-btn { cursor: pointer; background: #f1f2f6; border-radius: 4px; padding: 2px 8px; font-size: 0.85em; color: #576574; border: 1px solid #dcdde1; }
.sortable-ghost { opacity: 0.4; background-color: #f4f8ff; border: 2px dashed #2c3e50; }
.widget-hidden { display: none !important; }
#sortable-dashboard:not(.collapsed) { max-height: none !important; }

/* =================================================================
   🌟 명리 백과사전 스마트 툴팁 오토태깅 텍스트 하이라이트
   ================================================================= */
.glossary-term {
    border-bottom: 1px dashed #3b82f6;
    color: #1d4ed8;
    cursor: help;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    font-weight: 700;
    padding-bottom: 1px;
}
.glossary-term:hover {
    background: rgba(59, 130, 246, 0.1);
    border-bottom: 1px solid #2563eb;
}

/* =================================================================
   🌟 실전 모의 간명 모드 (블라인드 처리)
   ================================================================= */
.practice-blind {
    filter: blur(8px) grayscale(0.2);
    opacity: 0.5;
    pointer-events: none;
    user-select: none;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}