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

/* 인라인 수식 스타일 */
.MathJax_Display {
    margin: 1em 0 !important;
}

/* 수식 블록 스타일 */
.math-container {
    margin: 1.5em 0;
    padding: 1em;
    background: #f8f9fa;
    border-radius: 8px;
    border-left: 4px solid #007bff;
    overflow-x: auto;
}

/* 수식 에러 스타일 */
.MathJax_Error {
    color: #dc3545 !important;
    background-color: #f8d7da !important;
    padding: 0.25em 0.5em;
    border-radius: 0.25em;
}

/* 수식 로딩 스타일 */
.MathJax_Processing {
    color: #6c757d;
    font-style: italic;
}

/* 다크 모드에서 수식 스타일 */
@media (prefers-color-scheme: dark) {
    .math-container {
        background: #2d3748;
        border-left-color: #4299e1;
    }
}

.document-tags {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.tag {
    background: #e9ecef;
    color: #495057;
    padding: 0.25rem 0.75rem;
    border-radius: 15px;
    font-size: 0.8rem;
    font-weight: 500;
    transition: all 0.2s ease;
}

.tag {
    background-color: #e3f2fd;
    color: #1976d2;
    padding: 0.25rem 0.5rem;
    border-radius: 12px;
    font-size: 0.8rem;
    font-weight: 500;
}


.tag:hover {
    background: #667eea;
    color: white;
}

.tag-more {
    background: #6c757d;
    color: white;
    padding: 0.25rem 0.75rem;
    border-radius: 15px;
    font-size: 0.8rem;
    font-weight: 500;
}

.document-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.tags-container {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.25rem;
}

.modern-tag {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    padding: 0.25rem 0.6rem;
    border-radius: 12px;
    text-decoration: none;
    font-size: 0.75rem;
    font-weight: 500;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
}

.modern-tag:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(102, 126, 234, 0.3);
    color: white;
    text-decoration: none;
}

.popular-documents .document-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.popular-documents .document-tags .tag {
    background: linear-gradient(135deg, #e3f2fd 0%, #bbdefb 100%);
    color: #1976d2;
    padding: 0.25rem 0.75rem;
    border-radius: 15px;
    font-size: 0.8rem;
    font-weight: 500;
    text-decoration: none;
    transition: all 0.2s ease;
}

.popular-documents .document-tags .tag:hover {
    background: linear-gradient(135deg, #bbdefb 0%, #90caf9 100%);
    transform: translateY(-1px);
}

/* 인기 문서 섹션 스타일 */
.popular-documents {
    margin: 2rem 0;
}

.popular-documents h2 {
    color: #2c3e50;
    font-size: 1.8rem;
    font-weight: 700;
    margin-bottom: 1.5rem;
    text-align: center;
}

.popular-documents .document-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1.5rem;
    margin-top: 1.5rem;
}

.popular-documents .document-card {
    background: linear-gradient(135deg, #fff 0%, #f8f9fa 100%);
    border-radius: 12px;
    padding: 1.5rem;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    border: 1px solid #e9ecef;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.popular-documents .document-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.popular-documents .document-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(0,0,0,0.15);
}

.popular-documents .document-card h3 {
    color: #2c3e50;
    font-size: 1.2rem;
    font-weight: 600;
    margin-bottom: 0.8rem;
    line-height: 1.3;
}

.popular-documents .document-card h3 a {
    color: #2c3e50;
    text-decoration: none;
    transition: color 0.2s ease;
}

.popular-documents .document-card h3 a:hover {
    color: #667eea;
}

.popular-documents .document-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
    color: #6c757d;
    font-size: 0.85rem;
}

.popular-documents .document-excerpt {
    color: #495057;
    line-height: 1.6;
    margin-bottom: 1rem;
    font-size: 0.9rem;
}

/* 렌더링된 콘텐츠 */
.rendered-content {
    /* 기존 .document-body의 내용 스타일을 유지 */
}

/* 마크다운 원본 표시 */
.markdown-source {
    background: #f8f9fa;
    border: 1px solid #e9ecef;
    border-radius: 8px;
    padding: 1.5rem;
    margin-top: 1rem;
}

.markdown-header {
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid #dee2e6;
}

.markdown-header h4 {
    margin: 0;
    color: #495057;
    font-size: 1.1rem;
}

.markdown-description {
    margin: 0.5rem 0 0 0;
    color: #6c757d;
    font-size: 0.9rem;
}

.markdown-content {
    background: #2d3748;
    color: #f7fafc;
    padding: 1.5rem;
    border-radius: 6px;
    font-family: 'Fira Code', 'Monaco', 'Consolas', monospace;
    font-size: 0.9rem;
    line-height: 1.5;
    overflow-x: auto;
    white-space: pre-wrap;
    word-wrap: break-word;
    margin: 0;
}

.markdown-content code {
    background: transparent;
    padding: 0;
    border-radius: 0;
    font-family: inherit;
    color: inherit;
}

/* =========================
   코드 스타일 (정리됨)
   ========================= */

/* 인라인 코드 스타일 */
.document-body code {
    background: #f8f9fa;
    padding: 0.2rem 0.5rem;
    border-radius: 4px;
    font-family: 'Fira Code', 'Consolas', 'Monaco', monospace;
    font-size: 0.85rem;
    color: #e74c3c;
    border: 1px solid #dee2e6;
    font-weight: 500;
}

/* 코드 블록 컨테이너 (.highlight 우선 사용) */
.document-body .highlight {
    background: linear-gradient(135deg, #2c3e50 0%, #34495e 100%);
    border-radius: 12px;
    padding: 1.5rem;
    margin: 2rem 0;
    overflow-x: auto;
    position: relative;
    border: 1px solid #34495e;
    box-shadow: 0 4px 16px rgba(0,0,0,0.15);
}

/* .highlight 내부의 pre 태그 */
.document-body .highlight pre {
    background: transparent;
    padding: 0;
    margin: 0;
    box-shadow: none;
    border: none;
    color: #f8f8f2;
}

/* .highlight 내부의 code 태그 */
.document-body .highlight code {
    background-color: transparent !important;
    color: #ffffff !important;
    padding: 0 !important;
    border: none !important;
    font-family: 'Fira Code', 'Consolas', 'Monaco', monospace;
    font-size: 0.9rem;
    line-height: 1.6;
    display: block;
    white-space: pre-wrap;
    word-wrap: break-word;
}

/* 일반 pre 태그 (백업용, .highlight가 없을 때) */
.document-body pre:not(.highlight pre) {
    background: linear-gradient(135deg, #2c3e50 0%, #34495e 100%);
    padding: 1.5rem;
    border-radius: 12px;
    overflow-x: auto;
    margin: 2rem 0;
    box-shadow: 0 4px 16px rgba(0,0,0,0.15);
    position: relative;
    border: 1px solid #34495e;
}

/* 일반 pre 내부 code (백업용) */
.document-body pre:not(.highlight pre) code {
    background-color: transparent !important;
    color: #ffffff !important;
    padding: 0 !important;
    border: none !important;
    font-family: 'Fira Code', 'Consolas', 'Monaco', monospace;
    font-size: 0.9rem;
    line-height: 1.6;
}

/* =========================
   Pygments 구문 강조 색상 (Monokai 스타일)
   ========================= */

/* 기본 토큰 */
.document-body .highlight .hll { background-color: #49483e; }
.document-body .highlight .c { color: #75715e; } /* Comment */
.document-body .highlight .err { color: #960050; background-color: #1e0010; } /* Error */
.document-body .highlight .k { color: #66d9ef; } /* Keyword */
.document-body .highlight .l { color: #ae81ff; } /* Literal */
.document-body .highlight .n { color: #f8f8f2; } /* Name */
.document-body .highlight .o { color: #f92672; } /* Operator */
.document-body .highlight .p { color: #f8f8f2; } /* Punctuation */
.document-body .highlight .ch { color: #75715e; } /* Comment.Hashbang */
.document-body .highlight .cm { color: #75715e; } /* Comment.Multiline */
.document-body .highlight .cp { color: #75715e; } /* Comment.Preproc */
.document-body .highlight .cpf { color: #75715e; } /* Comment.PreprocFile */
.document-body .highlight .c1 { color: #75715e; } /* Comment.Single */
.document-body .highlight .cs { color: #75715e; } /* Comment.Special */

/* Generic */
.document-body .highlight .gd { color: #f92672; } /* Generic.Deleted */
.document-body .highlight .ge { font-style: italic; } /* Generic.Emph */
.document-body .highlight .gi { color: #a6e22e; } /* Generic.Inserted */
.document-body .highlight .gs { font-weight: bold; } /* Generic.Strong */
.document-body .highlight .gu { color: #75715e; } /* Generic.Subheading */

/* Keywords */
.document-body .highlight .kc { color: #66d9ef; } /* Keyword.Constant */
.document-body .highlight .kd { color: #66d9ef; } /* Keyword.Declaration */
.document-body .highlight .kn { color: #f92672; } /* Keyword.Namespace */
.document-body .highlight .kp { color: #66d9ef; } /* Keyword.Pseudo */
.document-body .highlight .kr { color: #66d9ef; } /* Keyword.Reserved */
.document-body .highlight .kt { color: #66d9ef; } /* Keyword.Type */

/* Literals */
.document-body .highlight .ld { color: #e6db74; } /* Literal.Date */
.document-body .highlight .m { color: #ae81ff; } /* Literal.Number */
.document-body .highlight .s { color: #e6db74; } /* Literal.String */

/* Names */
.document-body .highlight .na { color: #a6e22e; } /* Name.Attribute */
.document-body .highlight .nb { color: #f8f8f2; } /* Name.Builtin */
.document-body .highlight .nc { color: #a6e22e; } /* Name.Class */
.document-body .highlight .no { color: #66d9ef; } /* Name.Constant */
.document-body .highlight .nd { color: #a6e22e; } /* Name.Decorator */
.document-body .highlight .ni { color: #f8f8f2; } /* Name.Entity */
.document-body .highlight .ne { color: #a6e22e; } /* Name.Exception */
.document-body .highlight .nf { color: #a6e22e; } /* Name.Function */
.document-body .highlight .nl { color: #f8f8f2; } /* Name.Label */
.document-body .highlight .nn { color: #f8f8f2; } /* Name.Namespace */
.document-body .highlight .nx { color: #a6e22e; } /* Name.Other */
.document-body .highlight .py { color: #f8f8f2; } /* Name.Property */
.document-body .highlight .nt { color: #f92672; } /* Name.Tag */
.document-body .highlight .nv { color: #f8f8f2; } /* Name.Variable */
.document-body .highlight .ow { color: #f92672; } /* Operator.Word */

/* Strings */
.document-body .highlight .mb { color: #ae81ff; } /* Literal.Number.Bin */
.document-body .highlight .mf { color: #ae81ff; } /* Literal.Number.Float */
.document-body .highlight .mh { color: #ae81ff; } /* Literal.Number.Hex */
.document-body .highlight .mi { color: #ae81ff; } /* Literal.Number.Integer */
.document-body .highlight .mo { color: #ae81ff; } /* Literal.Number.Oct */
.document-body .highlight .sa { color: #e6db74; } /* Literal.String.Affix */
.document-body .highlight .sb { color: #e6db74; } /* Literal.String.Backtick */
.document-body .highlight .sc { color: #e6db74; } /* Literal.String.Char */
.document-body .highlight .dl { color: #e6db74; } /* Literal.String.Delimiter */
.document-body .highlight .sd { color: #e6db74; } /* Literal.String.Doc */
.document-body .highlight .s2 { color: #e6db74; } /* Literal.String.Double */
.document-body .highlight .se { color: #ae81ff; } /* Literal.String.Escape */
.document-body .highlight .sh { color: #e6db74; } /* Literal.String.Heredoc */
.document-body .highlight .si { color: #e6db74; } /* Literal.String.Interpol */
.document-body .highlight .sx { color: #e6db74; } /* Literal.String.Other */
.document-body .highlight .sr { color: #e6db74; } /* Literal.String.Regex */
.document-body .highlight .s1 { color: #e6db74; } /* Literal.String.Single */
.document-body .highlight .ss { color: #e6db74; } /* Literal.String.Symbol */

/* 추가 토큰 */
.document-body .highlight .bp { color: #f8f8f2; } /* Name.Builtin.Pseudo */
.document-body .highlight .fm { color: #a6e22e; } /* Name.Function.Magic */
.document-body .highlight .vc { color: #f8f8f2; } /* Name.Variable.Class */
.document-body .highlight .vg { color: #f8f8f2; } /* Name.Variable.Global */
.document-body .highlight .vi { color: #f8f8f2; } /* Name.Variable.Instance */
.document-body .highlight .vm { color: #f8f8f2; } /* Name.Variable.Magic */
.document-body .highlight .il { color: #ae81ff; } /* Literal.Number.Integer.Long */
.document-body .highlight .w { color: #f8f8f2; } /* Text.Whitespace */

/* =========================
   언어별 라벨 및 테두리
   ========================= */

/* 언어별 코드 블록 스타일 - 심플한 언어 라벨 */
.document-body .highlight::before {
    content: attr(data-language);
    position: absolute;
    top: 0.75rem;
    right: 1rem;
    color: #ecf0f1;
    font-size: 0.7rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    background: rgba(0,0,0,0.6);
    padding: 0.3rem 0.6rem;
    border-radius: 6px;
    font-family: 'Fira Code', monospace;
    border: 1px solid rgba(255,255,255,0.1);
}

/* 언어별 심플한 테마 색상 - data 속성 기반 */
.document-body .highlight[data-language="python"]::before {
    background: #3776ab;
    content: "Python";
    color: #ffffff;
}

.document-body .highlight[data-language="javascript"]::before {
    background: #f7df1e;
    content: "JS";
    color: #000000;
}

.document-body .highlight[data-language="html"]::before {
    background: #e34f26;
    content: "HTML";
    color: #ffffff;
}

.document-body .highlight[data-language="css"]::before {
    background: #1572b6;
    content: "CSS";
    color: #ffffff;
}

.document-body .highlight[data-language="json"]::before {
    background: #333333;
    content: "JSON";
    color: #ffffff;
}

.document-body .highlight[data-language="sql"]::before {
    background: #336791;
    content: "SQL";
    color: #ffffff;
}

.document-body .highlight[data-language="bash"]::before,
.document-body .highlight[data-language="shell"]::before {
    background: #4eaa25;
    content: "Bash";
    color: #ffffff;
}

.document-body .highlight[data-language="java"]::before {
    background: #ed8b00;
    content: "Java";
    color: #ffffff;
}

.document-body .highlight[data-language="c"]::before {
    background: #00599c;
    content: "C";
    color: #ffffff;
}

.document-body .highlight[data-language="cpp"]::before,
.document-body .highlight[data-language="c++"]::before {
    background: #00599c;
    content: "C++";
    color: #ffffff;
}

.document-body .highlight[data-language="php"]::before {
    background: #777bb4;
    content: "PHP";
    color: #ffffff;
}

.document-body .highlight[data-language="go"]::before {
    background: #00add8;
    content: "Go";
    color: #ffffff;
}

.document-body .highlight[data-language="rust"]::before {
    background: #ce6b35;
    content: "Rust";
    color: #ffffff;
}

.document-body .highlight[data-language="typescript"]::before {
    background: #3178c6;
    content: "TS";
    color: #ffffff;
}

.document-body .highlight[data-language="yaml"]::before,
.document-body .highlight[data-language="yml"]::before {
    background: #cb171e;
    content: "YAML";
    color: #ffffff;
}

.document-body .highlight[data-language="xml"]::before {
    background: #e37400;
    content: "XML";
    color: #ffffff;
}

.document-body .highlight[data-language="markdown"]::before,
.document-body .highlight[data-language="md"]::before {
    background: #083fa1;
    content: "MD";
    color: #ffffff;
}

/* 언어별 좌측 테두리 색상 - data 속성 기반 */
.document-body .highlight[data-language="python"] {
    border-left: 3px solid #3776ab;
}

.document-body .highlight[data-language="javascript"] {
    border-left: 3px solid #f7df1e;
}

.document-body .highlight[data-language="html"] {
    border-left: 3px solid #e34f26;
}

.document-body .highlight[data-language="css"] {
    border-left: 3px solid #1572b6;
}

.document-body .highlight[data-language="json"] {
    border-left: 3px solid #333333;
}

.document-body .highlight[data-language="sql"] {
    border-left: 3px solid #336791;
}

.document-body .highlight[data-language="bash"],
.document-body .highlight[data-language="shell"] {
    border-left: 3px solid #4eaa25;
}

.document-body .highlight[data-language="java"] {
    border-left: 3px solid #ed8b00;
}

.document-body .highlight[data-language="c"] {
    border-left: 3px solid #00599c;
}

.document-body .highlight[data-language="cpp"],
.document-body .highlight[data-language="c++"] {
    border-left: 3px solid #00599c;
}

.document-body .highlight[data-language="php"] {
    border-left: 3px solid #777bb4;
}

.document-body .highlight[data-language="go"] {
    border-left: 3px solid #00add8;
}

.document-body .highlight[data-language="rust"] {
    border-left: 3px solid #ce6b35;
}

.document-body .highlight[data-language="typescript"] {
    border-left: 3px solid #3178c6;
}