/**
 * Markdown & LaTeX 공통 렌더링 스타일
 * base_ts.html에서 로드되어 모든 페이지에 적용
 * marked.js v17 + KaTeX v0.16.28 호환
 */

/* ========== 헤딩 접기/펼치기 스타일 (옵시디언 스타일) ========== */

/* 접기 아이콘 스타일 */
.fold-icon {
    display: inline-block;
    margin-right: 8px;
    cursor: pointer;
    font-size: 0.8em;
    user-select: none;
    transition: transform 0.2s ease;
    color: inherit;
}

.fold-icon:hover {
    opacity: 0.7;
}

/* 접혀진 헤딩 상태 */
h1.folded, h2.folded, h3.folded, h4.folded, h5.folded, h6.folded {
    opacity: 0.7;
}

/* 접혀진 컨텐츠 숨기기 - !important와 더 구체적인 선택자로 우선순위 강화 */
.heading-folded-content,
.heading-folded-content.markdown-content,
#question-text .heading-folded-content, 
#answer-text .heading-folded-content, 
#content-text .heading-folded-content,
h1.heading-folded-content,
h2.heading-folded-content,
h3.heading-folded-content,
h4.heading-folded-content,
h5.heading-folded-content,
h6.heading-folded-content,
ul.heading-folded-content,
ol.heading-folded-content,
li.heading-folded-content {
    display: none !important;
}

/* 헤딩 접힘 상태일 때 내부의 리스트 접기 아이콘도 숨기기 */
.heading-folded-content .list-fold-icon,
.heading-folded-content .fold-icon {
    display: none !important;
}

/* 리스트 접기용 독립 클래스 */
.list-folded-content {
    display: none !important;
}

/* ========== 헤딩 스타일 (H1-H6) - 좌측 보더 바 + 그라데이션 ========== */

/* H1 - 메인 타이틀 (파란색 굵은 바 + 배경 + 그림자) */
.markdown-content h1,
#question-text h1, #answer-text h1, #content-text h1,
#preview-question-md h1, #preview-answer-md h1, #preview-content-md h1,
#rendered-preview h1,
.doc-preview h1 {
    font-size: 1.75rem !important;
    font-weight: 800 !important;
    color: #1e3a8a !important;
    margin-top: 0.75rem !important;
    margin-bottom: 0.5rem !important;
    line-height: 1.2 !important;
    display: block !important;
    padding: 0.75rem 1rem !important;
    padding-left: 1.25rem !important;
    border-left: 5px solid #2563eb !important;
    background: linear-gradient(to right, #eff6ff, #ffffff) !important;
    border-radius: 0 4px 4px 0 !important;
    box-shadow: 0 2px 4px rgba(37, 99, 235, 0.1) !important;
    transition: all 0.2s ease !important;
}

.markdown-content h1:hover,
#question-text h1:hover, #answer-text h1:hover, #content-text h1:hover,
#preview-question-md h1:hover, #preview-answer-md h1:hover, #preview-content-md h1:hover,
#rendered-preview h1:hover,
.doc-preview h1:hover {
    border-left-color: #1d4ed8 !important;
    box-shadow: 0 4px 6px rgba(37, 99, 235, 0.15) !important;
}

/* H2 - 서브 타이틀 (청록색 중간 바 + 배경) */
.markdown-content h2,
#question-text h2, #answer-text h2, #content-text h2,
#preview-question-md h2, #preview-answer-md h2, #preview-content-md h2,
#rendered-preview h2,
.doc-preview h2 {
    font-size: 1.5rem !important;
    font-weight: 700 !important;
    color: #0e7490 !important;
    margin-top: 0.65rem !important;
    margin-bottom: 0.4rem !important;
    line-height: 1.3 !important;
    display: block !important;
    padding: 0.6rem 1rem !important;
    padding-left: 1.1rem !important;
    border-left: 4px solid #06b6d4 !important;
    background: linear-gradient(to right, #ecfeff, #ffffff) !important;
    border-radius: 0 4px 4px 0 !important;
    box-shadow: 0 1px 3px rgba(6, 182, 212, 0.1) !important;
    transition: all 0.2s ease !important;
}

.markdown-content h2:hover,
#question-text h2:hover, #answer-text h2:hover, #content-text h2:hover,
#preview-question-md h2:hover, #preview-answer-md h2:hover, #preview-content-md h2:hover,
#rendered-preview h2:hover,
.doc-preview h2:hover {
    border-left-color: #0891b2 !important;
}

/* H3 - 섹션 (초록색 얇은 바 + 연한 배경) */
.markdown-content h3,
#question-text h3, #answer-text h3, #content-text h3,
#preview-question-md h3, #preview-answer-md h3, #preview-content-md h3,
#rendered-preview h3,
.doc-preview h3 {
    font-size: 1.25rem !important;
    font-weight: 600 !important;
    color: #15803d !important;
    margin-top: 0.6rem !important;
    margin-bottom: 0.35rem !important;
    line-height: 1.35 !important;
    display: block !important;
    padding: 0.5rem 0.75rem !important;
    padding-left: 1rem !important;
    border-left: 3px solid #22c55e !important;
    background: linear-gradient(to right, #f0fdf4, #ffffff) !important;
    border-radius: 0 3px 3px 0 !important;
    transition: all 0.2s ease !important;
}

.markdown-content h3:hover,
#question-text h3:hover, #answer-text h3:hover, #content-text h3:hover,
#preview-question-md h3:hover, #preview-answer-md h3:hover, #preview-content-md h3:hover,
#rendered-preview h3:hover,
.doc-preview h3:hover {
    border-left-color: #16a34a !important;
}

/* H4 - 서브섹션 (회색 얇은 바) */
.markdown-content h4,
#question-text h4, #answer-text h4, #content-text h4,
#preview-question-md h4, #preview-answer-md h4, #preview-content-md h4,
#rendered-preview h4,
.doc-preview h4 {
    font-size: 1.1rem !important;
    font-weight: 600 !important;
    color: #374151 !important;
    margin-top: 0.9rem !important;
    margin-bottom: 0.5rem !important;
    line-height: 1.4 !important;
    display: block !important;
    padding-left: 0.75rem !important;
    border-left: 2px solid #9ca3af !important;
    transition: all 0.2s ease !important;
}

.markdown-content h4:hover,
#question-text h4:hover, #answer-text h4:hover, #content-text h4:hover,
#preview-question-md h4:hover, #preview-answer-md h4:hover, #preview-content-md h4:hover,
#rendered-preview h4:hover,
.doc-preview h4:hover {
    border-left-color: #6b7280 !important;
}

/* H5 - 세부항목 (연한 회색) */
.markdown-content h5,
#question-text h5, #answer-text h5, #content-text h5,
#rendered-preview h5,
#preview-question-md h5, #preview-answer-md h5, #preview-content-md h5,
.doc-preview h5 {
    font-size: 1.05rem !important;
    font-weight: 600 !important;
    color: #4b5563 !important;
    margin-top: 0.75rem !important;
    margin-bottom: 0.4rem !important;
    line-height: 1.45 !important;
    display: block !important;
    padding-left: 0.5rem !important;
    border-left: 2px solid #d1d5db !important;
}

/* H6 - 최소항목 (가장 연한 회색) */
.markdown-content h6,
#question-text h6, #answer-text h6, #content-text h6,
#rendered-preview h6,
#preview-question-md h6, #preview-answer-md h6, #preview-content-md h6,
.doc-preview h6 {
    font-size: 1rem !important;
    font-weight: 600 !important;
    color: #6b7280 !important;
    margin-top: 0.6rem !important;
    margin-bottom: 0.3rem !important;
    line-height: 1.5 !important;
    display: block !important;
    padding-left: 0.5rem !important;
    border-left: 1px solid #e5e7eb !important;
}


/* ========== 링크 스타일 ========== */
.markdown-content a,
#question-text a, #answer-text a, #content-text a,
#preview-question-md a, #preview-answer-md a, #preview-content-md a,
.doc-preview a {
    color: #2563eb !important;
    text-decoration: underline !important;
    font-weight: 600;
}

.markdown-content a:hover,
#question-text a:hover, #answer-text a:hover, #content-text a:hover,
#preview-question-md a:hover, #preview-answer-md a:hover, #preview-content-md a:hover,
.doc-preview a:hover {
    color: #1d4ed8 !important;
}

/* ========== 표 스타일 (GFM Tables) ========== */
.markdown-content table,
#question-text table, #answer-text table, #content-text table,
#preview-question-md table, #preview-answer-md table, #preview-content-md table,
.doc-preview table {
    border-collapse: collapse !important;
    width: 100% !important;
    margin: 1em 0 !important;
    border: 2px solid #9ca3af !important;
    background-color: #ffffff !important;
}

.markdown-content th,
#question-text th, #answer-text th, #content-text th,
#preview-question-md th, #preview-answer-md th, #preview-content-md th,
.doc-preview th {
    border: 1px solid #d1d5db !important;
    padding: 0.6em 0.8em !important;
    background-color: #e5e7eb !important;
    font-weight: 700 !important;
    color: #374151 !important;
    text-align: left !important;
}

.markdown-content td,
#question-text td, #answer-text td, #content-text td,
#preview-question-md td, #preview-answer-md td, #preview-content-md td,
.doc-preview td {
    border: 1px solid #d1d5db !important;
    padding: 0.5em 0.8em !important;
}

/* ========== 코드 블록 스타일 ========== */
.markdown-content pre,
#question-text pre, #answer-text pre, #content-text pre,
#preview-question-md pre, #preview-answer-md pre, #preview-content-md pre,
.doc-preview pre {
    background-color: #f3f4f6 !important;
    border-radius: 0.5rem !important;
    padding: 1rem !important;
    overflow-x: auto !important;
    margin: 1em 0 !important;
    border: 1px solid #d1d5db !important;
}

.markdown-content code,
#question-text code, #answer-text code, #content-text code,
#preview-question-md code, #preview-answer-md code, #preview-content-md code,
.doc-preview code {
    background-color: #f3f4f6 !important;
    padding: 0.2em 0.4em !important;
    border-radius: 0.25rem !important;
    font-family: 'Courier New', Courier, monospace !important;
    font-size: 0.9em !important;
    color: #e11d48 !important;
}

.markdown-content pre code,
#question-text pre code:not(.mermaid *), 
#answer-text pre code:not(.mermaid *), 
#content-text pre code:not(.mermaid *),
#preview-question-md pre code:not(.mermaid *), 
#preview-answer-md pre code:not(.mermaid *), 
#preview-content-md pre code:not(.mermaid *),
.doc-preview pre code:not(.mermaid *) {
    background-color: transparent !important;
    padding: 0 !important;
    color: #1f2937 !important;
}

/* ========== 목록 스타일 ========== */
.markdown-content ul, .markdown-content ol,
#question-text ul, #answer-text ul, #content-text ul,
#question-text ol, #answer-text ol, #content-text ol,
#preview-question-md ul, #preview-answer-md ul, #preview-content-md ul,
#preview-question-md ol, #preview-answer-md ol, #preview-content-md ol,
.doc-preview ul, .doc-preview ol {
    margin: 0.75em 0 !important;
    padding-left: 2.2em !important;
}

.markdown-content li,
#question-text li, #answer-text li, #content-text li,
#preview-question-md li, #preview-answer-md li, #preview-content-md li,
.doc-preview li {
    margin: 0.25em 0 !important;
    position: relative; /* 수직선 표시를 위한 위치 기준 */
}

/* 원문자 리스트: 기본 bullet(•) 숨김 + 기본 리스트와 동일한 hanging indent */
.markdown-content li.circled-marker,
#question-text li.circled-marker, 
#answer-text li.circled-marker, 
#content-text li.circled-marker,
#preview-question-md li.circled-marker, 
#preview-answer-md li.circled-marker, 
#preview-content-md li.circled-marker,
.doc-preview li.circled-marker {
    list-style: none !important;
    text-indent: -1.4em !important;
    padding-left: 0 !important;
}

/* 원문자 리스트 내부 <p> 마진 제거 (loose list 구조에서 간격을 tight list와 동일하게) */
.markdown-content li.circled-marker > p,
#question-text li.circled-marker > p,
#answer-text li.circled-marker > p,
#content-text li.circled-marker > p,
#preview-question-md li.circled-marker > p,
#preview-answer-md li.circled-marker > p,
#preview-content-md li.circled-marker > p,
.doc-preview li.circled-marker > p {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

/* 중첩 리스트 계층 표현: VS Code 스타일 수직선 (Tree Line) */
.markdown-content li ul, .markdown-content li ol,
#question-text li ul, #answer-text li ul, #content-text li ul,
#question-text li ol, #answer-text li ol, #content-text li ol,
#preview-question-md li ul, #preview-answer-md li ul, #preview-content-md li ul,
#preview-question-md li ol, #preview-answer-md li ol, #preview-content-md li ol,
.doc-preview li ul, .doc-preview li ol {
    position: relative;
    border-left: 2px solid #e5e7eb; /* 회색 수직선 */
    margin-left: 0.5em !important;
    padding-left: 1.5em !important;
    margin-top: 0.5em !important;
}

/* 중첩 레벨에 따라 색상 변화 (깊이 표현) */
.markdown-content li li ul, .markdown-content li li ol,
#question-text li li ul, #answer-text li li ul, #content-text li li ul,
#question-text li li ol, #answer-text li li ol, #content-text li li ol,
#preview-question-md li li ul, #preview-answer-md li li ul, #preview-content-md li li ul,
#preview-question-md li li ol, #preview-answer-md li li ol, #preview-content-md li li ol,
.doc-preview li li ul, .doc-preview li li ol {
    border-left-color: #d1d5db; /* 2단계: 좀 더 진한 회색 */
}

.markdown-content li li li ul, .markdown-content li li li ol,
#question-text li li li ul, #answer-text li li li ul, #content-text li li li ul,
#question-text li li li ol, #answer-text li li li ol, #content-text li li li ol,
#preview-question-md li li li ul, #preview-answer-md li li li ul, #preview-content-md li li li ul,
#preview-question-md li li li ol, #preview-answer-md li li li ol, #preview-content-md li li li ol,
.doc-preview li li li ul, .doc-preview li li li ol {
    border-left-color: #9ca3af; /* 3단계: 더 진한 회색 */
}

/* 호버 시 연결된 수직선 강조 (VS Code 스타일) */
.markdown-content li:hover > ul, .markdown-content li:hover > ol,
#question-text li:hover > ul, #answer-text li:hover > ul, #content-text li:hover > ul,
#question-text li:hover > ol, #answer-text li:hover > ol, #content-text li:hover > ol,
#preview-question-md li:hover > ul, #preview-answer-md li:hover > ul, #preview-content-md li:hover > ul,
#preview-question-md li:hover > ol, #preview-answer-md li:hover > ol, #preview-content-md li:hover > ol,
.doc-preview li:hover > ul, .doc-preview li:hover > ol {
    border-left-color: #3b82f6; /* 호버 시 파란색으로 강조 */
}

/* ========== 인용문 스타일 ========== */
.markdown-content blockquote,
#question-text blockquote, #answer-text blockquote, #content-text blockquote,
#preview-question-md blockquote, #preview-answer-md blockquote, #preview-content-md blockquote,
.doc-preview blockquote {
    border-left: 4px solid #3b82f6 !important;
    padding-left: 1em !important;
    margin: 1em 0 !important;
    color: #6b7280 !important;
    background-color: #f9fafb !important;
    padding: 0.4em 1em !important;
    border-radius: 0.25rem !important;
    text-indent: 0 !important;
}

.markdown-content blockquote p,
#question-text blockquote p, #answer-text blockquote p, #content-text blockquote p,
#preview-question-md blockquote p, #preview-answer-md blockquote p, #preview-content-md blockquote p,
.doc-preview blockquote p {
    margin: 0.35em 0 !important;
    line-height: 1.5 !important;
}

.markdown-content blockquote p:first-child,
#question-text blockquote p:first-child, #answer-text blockquote p:first-child, #content-text blockquote p:first-child,
#preview-question-md blockquote p:first-child, #preview-answer-md blockquote p:first-child, #preview-content-md blockquote p:first-child,
.doc-preview blockquote p:first-child {
    margin-top: 0 !important;
}

.markdown-content blockquote p:last-child,
#question-text blockquote p:last-child, #answer-text blockquote p:last-child, #content-text blockquote p:last-child,
#preview-question-md blockquote p:last-child, #preview-answer-md blockquote p:last-child, #preview-content-md blockquote p:last-child,
.doc-preview blockquote p:last-child {
    margin-bottom: 0 !important;
}

/* ========== 수평선 스타일 ========== */
.markdown-content hr,
#question-text hr, #answer-text hr, #content-text hr,
#preview-question-md hr, #preview-answer-md hr, #preview-content-md hr,
.doc-preview hr {
    border: none !important;
    border-top: 2px solid #e5e7eb !important;
    margin: 1.5em 0 !important;
}

/* ========== KaTeX 수식 스타일 ========== */
.katex {
    font-size: 1.1em !important;
}

.katex-display {
    text-align: left !important;
    margin: 1em 0 !important;
    padding: 0.5em 0 !important;
}

.katex-display > .katex {
    text-align: left !important;
}

/* ========== 이미지 스타일 ========== */
.markdown-content img,
#question-text img, #answer-text img, #content-text img,
#preview-question-md img, #preview-answer-md img, #preview-content-md img,
.doc-preview img {
    max-width: 100% !important;
    height: auto !important;
    border-radius: 0.5rem !important;
    margin: 1em 0 !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
}

/* ========== 단락 스타일 ========== */
.markdown-content p,
#question-text p, #answer-text p, #content-text p,
#preview-question-md p, #preview-answer-md p, #preview-content-md p,
.doc-preview p {
    margin: 0.75em 0 !important;
    line-height: 1.6 !important;
}

/* ========== Strong/Em 스타일 ========== */
.markdown-content strong,
#question-text strong, #answer-text strong, #content-text strong,
#preview-question-md strong, #preview-answer-md strong, #preview-content-md strong,
.doc-preview strong {
    font-weight: 700 !important;
}

.markdown-content em,
#question-text em, #answer-text em, #content-text em,
#preview-question-md em, #preview-answer-md em, #preview-content-md em,
.doc-preview em {
    font-style: italic !important;
}

/* ========== 체크박스 (Task Lists) ========== */
.markdown-content input[type="checkbox"],
#question-text input[type="checkbox"], #answer-text input[type="checkbox"], #content-text input[type="checkbox"],
#preview-question-md input[type="checkbox"], #preview-answer-md input[type="checkbox"], #preview-content-md input[type="checkbox"],
.doc-preview input[type="checkbox"] {
    margin-right: 0.5em !important;
    vertical-align: middle !important;
    cursor: pointer !important;
    width: 16px !important;
    height: 16px !important;
    accent-color: #2563eb !important; /* 파란색 체크 */
}

/* 체크박스가 disabled인 경우 (미리보기 전용) */
.markdown-content input[type="checkbox"]:disabled,
#preview-question-md input[type="checkbox"]:disabled, 
#preview-answer-md input[type="checkbox"]:disabled, 
#preview-content-md input[type="checkbox"]:disabled,
.doc-preview input[type="checkbox"]:disabled {
    cursor: not-allowed !important;
    opacity: 0.6 !important;
}

/* Task list 항목 스타일 */
.markdown-content li:has(> input[type="checkbox"]),
#question-text li:has(> input[type="checkbox"]), 
#answer-text li:has(> input[type="checkbox"]), 
#content-text li:has(> input[type="checkbox"]),
#preview-question-md li:has(> input[type="checkbox"]), 
#preview-answer-md li:has(> input[type="checkbox"]), 
#preview-content-md li:has(> input[type="checkbox"]),
.doc-preview li:has(> input[type="checkbox"]) {
    list-style: none !important;
    margin-left: -1.5em !important;
}

/* 체크된 항목은 줄 긋기 */
.markdown-content li:has(> input[type="checkbox"]:checked),
#question-text li:has(> input[type="checkbox"]:checked), 
#answer-text li:has(> input[type="checkbox"]:checked), 
#content-text li:has(> input[type="checkbox"]:checked),
#preview-question-md li:has(> input[type="checkbox"]:checked), 
#preview-answer-md li:has(> input[type="checkbox"]:checked), 
#preview-content-md li:has(> input[type="checkbox"]:checked),
.doc-preview li:has(> input[type="checkbox"]:checked) {
    text-decoration: line-through !important;
    color: #9ca3af !important;
}


/* ========== 헤딩 접기/펼치기 (Obsidian Style) ========== */

/* 접기 아이콘 기본 스타일 */
.fold-icon {
    display: inline-block;
    width: 20px;
    min-width: 20px;
    height: 20px;
    line-height: 20px;
    text-align: center;
    margin-right: 8px;
    cursor: pointer;
    user-select: none;
    color: #6b7280;
    font-size: 12px;
    transition: all 0.2s ease;
    vertical-align: middle;
}

/* 모바일 터치 최적화 */
@media (max-width: 768px) {
    .fold-icon {
        width: 24px;
        min-width: 24px;
        height: 24px;
        line-height: 24px;
        font-size: 14px;
        margin-right: 6px;
    }
}

/* 아이콘 호버 효과 */
.fold-icon:hover {
    color: #2563eb;
    transform: scale(1.1);
}

/* 접힌 상태 아이콘 - 주황색 + 펄스 애니메이션으로 강조 */
.fold-icon.folded {
    color: #f97316 !important; /* 주황색 (숨겨진 콘텐츠 알림) */
    animation: foldPulse 2s ease-in-out infinite;
}

/* 호버 시 펄스 중지 (사용자가 인지함) */
.fold-icon.folded:hover {
    animation: none;
    color: #ea580c !important; /* 진한 주황색 */
}

/* 부드러운 펄스 애니메이션 (깜빡임보다 덜 산만함) */
@keyframes foldPulse {
    0%, 100% {
        transform: scale(1);
        opacity: 0.9;
    }
    50% {
        transform: scale(1.15);
        opacity: 1;
    }
}

/* 헤딩에 커서 표시 */
h1:has(.fold-icon), 
h2:has(.fold-icon), 
h3:has(.fold-icon), 
h4:has(.fold-icon), 
h5:has(.fold-icon), 
h6:has(.fold-icon) {
    cursor: pointer;
    transition: background-color 0.15s ease;
}

/* 헤딩 호버 효과 */
h1:has(.fold-icon):hover, 
h2:has(.fold-icon):hover, 
h3:has(.fold-icon):hover, 
h4:has(.fold-icon):hover, 
h5:has(.fold-icon):hover, 
h6:has(.fold-icon):hover {
    background-color: rgba(37, 99, 235, 0.05);
    border-radius: 4px;
    padding-left: 4px;
    margin-left: -4px;
}

/* 접힌 헤딩 스타일 */
h1.folded, h2.folded, h3.folded, h4.folded, h5.folded, h6.folded {
    margin-bottom: 0.75em;
}

/* 터치 하이라이트 제거 (모바일) */
.fold-icon,
h1:has(.fold-icon), 
h2:has(.fold-icon), 
h3:has(.fold-icon), 
h4:has(.fold-icon), 
h5:has(.fold-icon), 
h6:has(.fold-icon) {
    -webkit-tap-highlight-color: transparent;
}

/* 포커스 스타일 (접근성) */
.fold-icon:focus {
    outline: 2px solid #2563eb;
    outline-offset: 2px;
    border-radius: 2px;
}

/* 애니메이션 효과 */
@keyframes fadeOut {
    from { opacity: 1; max-height: 1000px; }
    to { opacity: 0; max-height: 0; overflow: hidden; }
}

@keyframes fadeIn {
    from { opacity: 0; max-height: 0; }
    to { opacity: 1; max-height: 1000px; }
}