/**
 * 공통 마크다운 스타일
 * 모든 페이지에서 재사용 가능한 마크다운 렌더링 스타일
 * 
 * 사용법:
 * 1. HTML: <div class="md">{{ markdown_content }}</div>
 * 2. JS: messageRenderer.renderMarkdown(content) → 자동으로 .md 래핑
 */

/* ==================== 기본 설정 ==================== */

.md {
    font-size: var(--st-text-base);
    /* 16px - 기본 텍스트 크기 */
    color: inherit;
    line-height: 1.6;
}

/* ==================== 텍스트 스타일 ==================== */

/* 제목 */
.md h1,
.md h2,
.md h3,
.md h4,
.md h5,
.md h6 {
    margin-top: 1.5rem;
    margin-bottom: 1rem;
    font-weight: bold;
    /* 제목을 더 명확하게 */
    color: hsl(var(--st-text));
}

.md h1 {
    font-size: 1.5rem;
}

.md h2 {
    font-size: 1.25rem;
}

.md h3 {
    font-size: 1.125rem;
}

.md h4,
.md h5,
.md h6 {
    font-size: 1rem;
}

/* 단락 */
.md p {
    margin-bottom: 1rem;
}

/* 텍스트 강조 */
.md strong,
.md b {
    font-weight: bold;
}

.md em,
.md i {
    font-style: italic;
}

/* ==================== 목록 ==================== */

/* 번호 목록 */
.md ol {
    list-style: decimal !important;
    /* style.min.css의 list-style: none 오버라이드 */
    margin-left: 1.5rem !important;
    margin-bottom: 1rem;
    padding-left: 0;
    list-style-position: outside;
    /* 번호를 텍스트 밖에 표시 */
}

[dir="rtl"] .md ol {
    margin-left: 0 !important;
    margin-right: 1.5rem !important;
    padding-right: 1.5em;
    /* RTL 환경에서 번호를 위한 공간 확보 */
    padding-left: 0;
    direction: rtl;
    /* RTL 환경에서 번호가 오른쪽에 표시되도록 */
    list-style-position: outside;
}

.md ol li {
    margin-bottom: 0.5rem;
    font-weight: normal;
    font-size: 1rem;
    line-height: 1.6;
    list-style-position: outside;
}

/* RTL 환경에서 리스트 아이템: 
   - 번호는 부모 ol의 RTL direction을 따르므로 오른쪽에 표시됨
   - 텍스트 내용은 문장부호 문제 방지를 위해 LTR로 처리
   - li 자체는 direction을 명시하지 않아 번호 위치에 영향 없음 */
[dir="rtl"] .md ol li {
    /* direction을 명시하지 않아 부모의 RTL을 따르므로 번호가 오른쪽에 표시됨 */
    text-align: right;
    padding-right: 0;
    padding-left: 0;
    /* 번호를 위한 공간은 ol의 padding-right로 확보 */
}

/* RTL 환경에서 li 내부의 모든 텍스트 요소는 LTR로 처리하여 문장부호 문제 방지 */
[dir="rtl"] .md ol li > * {
    direction: ltr !important;
    unicode-bidi: isolate !important;
}

/* RTL 환경에서 li 내부의 직접 텍스트 노드도 처리하기 위해 span으로 감싸는 것을 권장하지만,
   CSS만으로는 제한적이므로, 최소한 p, div, span 등 주요 요소는 처리 */
[dir="rtl"] .md ol li p,
[dir="rtl"] .md ol li div,
[dir="rtl"] .md ol li span {
    direction: ltr !important;
    unicode-bidi: isolate !important;
}

.md ol li::marker {
    font-size: 1rem !important;
    font-weight: normal !important;
}

/* 불릿 목록 */
.md ul {
    list-style: disc !important;
    /* style.min.css의 list-style: none 오버라이드 */
    margin-left: 1.5rem;
    margin-bottom: 1rem;
    padding-left: 0;
    list-style-position: outside;
    /* 불릿을 텍스트 밖에 표시 */
}

[dir="rtl"] .md ul {
    margin-left: 0;
    margin-right: 1.5rem;
    padding-right: 1.5em;
    /* RTL 환경에서 불릿을 위한 공간 확보 */
    padding-left: 0;
    direction: rtl;
    /* RTL 환경에서 불릿이 오른쪽에 표시되도록 */
    list-style-position: outside;
}

.md ul li {
    margin-bottom: 0.5rem;
    font-weight: normal;
    font-size: 1rem;
    line-height: 1.6;
    list-style-position: outside;
}

/* RTL 환경에서 리스트 아이템: 
   - 불릿은 부모 ul의 RTL direction을 따르므로 오른쪽에 표시됨
   - 텍스트 내용은 문장부호 문제 방지를 위해 LTR로 처리
   - li 자체는 direction을 명시하지 않아 불릿 위치에 영향 없음 */
[dir="rtl"] .md ul li {
    /* direction을 명시하지 않아 부모의 RTL을 따르므로 불릿이 오른쪽에 표시됨 */
    text-align: right;
    padding-right: 0;
    padding-left: 0;
    /* 불릿을 위한 공간은 ul의 padding-right로 확보 */
}

/* RTL 환경에서 li 내부의 모든 텍스트 요소는 LTR로 처리하여 문장부호 문제 방지 */
[dir="rtl"] .md ul li > * {
    direction: ltr !important;
    unicode-bidi: isolate !important;
}

/* RTL 환경에서 li 내부의 직접 텍스트 노드도 처리하기 위해 span으로 감싸는 것을 권장하지만,
   CSS만으로는 제한적이므로, 최소한 p, div, span 등 주요 요소는 처리 */
[dir="rtl"] .md ul li p,
[dir="rtl"] .md ul li div,
[dir="rtl"] .md ul li span {
    direction: ltr !important;
    unicode-bidi: isolate !important;
}

.md ul li::marker {
    font-size: 0.75rem;
    font-weight: 300;
}

/* 중첩된 목록 */
.md ol ol,
.md ol ul,
.md ul ol,
.md ul ul {
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
    margin-left: 1.5rem;
    /* 중첩된 목록 들여쓰기 추가 */
}

[dir="rtl"] .md ol ol,
[dir="rtl"] .md ol ul,
[dir="rtl"] .md ul ol,
[dir="rtl"] .md ul ul {
    margin-left: 0;
    margin-right: 1.5rem;
    /* RTL 환경에서 중첩된 목록 들여쓰기 */
}

/* ==================== 코드 ==================== */

/* 인라인 코드 */
.md code {
    background-color: transparent !important;
    padding: 0.125rem 0.25rem;
    border-radius: 0 !important;
    border: none !important;
    box-shadow: none !important;
    font-family: 'Courier New', monospace;
    font-size: 0.875rem;
}

/* 코드 블록 */
.md pre {
    background-color: hsl(var(--st-muted));
    padding: 1rem;
    border-radius: 0.5rem;
    overflow-x: auto;
    margin-bottom: 1rem;
}

.md pre code {
    background-color: transparent;
    padding: 0;
    border-radius: 0;
    font-size: 0.875rem;
}

/* ==================== 기타 요소 ==================== */

/* 인용 */
.md blockquote {
    border-left: 4px solid hsl(var(--st-line));
    padding-left: 1rem;
    margin: 1rem 0;
    color: hsl(var(--st-text-muted));
}

/* 링크 */
.md a {
    color: hsl(var(--st-brand));
    text-decoration: none;
}

.md a:hover {
    text-decoration: underline;
}

/* 수평선 */
.md hr {
    border: none;
    border-top: 1px solid hsl(var(--st-line));
    margin: 1.5rem 0;
}

/* 이미지 */
.md img {
    max-width: 100%;
    height: auto;
    border-radius: 0.5rem;
    margin: 1rem 0;
}

/* ==================== 테이블 ==================== */

.md table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 1rem;
}

.md table th,
.md table td {
    border: 1px solid hsl(var(--st-line));
    padding: 0.5rem;
    text-align: left;
}

.md table th {
    background-color: hsl(var(--st-muted));
    font-weight: bold;
}