/**
 * 마크다운 콘텐츠 렌더링 스타일
 *
 * 이 파일은 markdown() 함수에서 생성된 HTML에 스타일을 적용합니다.
 * 모든 스타일은 .markdown 클래스 내부에만 적용되어 다른 요소에 영향을 주지 않습니다.
 *
 * 적용 대상:
 * - widgets/post/view/default-view.php (게시글 본문)
 * - Vue.js 댓글 (content_html 렌더링)
 */

/* ========================================
   기본 컨테이너 스타일
   ======================================== */
.markdown {
    line-height: 1.8;
    word-break: break-word;
}

/* ========================================
   문단 간격 (요구사항: p 태그 사이에 더 많은 간격)
   - 기본 Bootstrap: 1rem
   - 마크다운 내: 1.5rem (50% 증가)
   ======================================== */
.markdown p {
    margin-bottom: 1.5rem;
}

.markdown p:last-child {
    margin-bottom: 0;
}

/* ========================================
   헤더 스타일 (요구사항: 폰트 크기 한 단계 작게)
   - Bootstrap 기본 h1: 2.5rem → 마크다운: 2rem
   - Bootstrap 기본 h2: 2rem   → 마크다운: 1.75rem
   - Bootstrap 기본 h3: 1.75rem → 마크다운: 1.5rem
   - Bootstrap 기본 h4: 1.5rem  → 마크다운: 1.25rem
   - Bootstrap 기본 h5: 1.25rem → 마크다운: 1.125rem
   - Bootstrap 기본 h6: 1rem    → 마크다운: 1rem (최소 크기 유지)
   ======================================== */
.markdown h1 {
    font-size: 2rem;
    font-weight: 700;
    margin-top: 2rem;
    margin-bottom: 1rem;
    line-height: 1.3;
}

.markdown h2 {
    font-size: 1.75rem;
    font-weight: 600;
    margin-top: 1.75rem;
    margin-bottom: 0.875rem;
    line-height: 1.35;
    border-bottom: 1px solid #e9ecef;
    padding-bottom: 0.5rem;
}

.markdown h3 {
    font-size: 1.5rem;
    font-weight: 600;
    margin-top: 1.5rem;
    margin-bottom: 0.75rem;
    line-height: 1.4;
}

.markdown h4 {
    font-size: 1.25rem;
    font-weight: 600;
    margin-top: 1.25rem;
    margin-bottom: 0.625rem;
    line-height: 1.45;
}

.markdown h5 {
    font-size: 1.125rem;
    font-weight: 600;
    margin-top: 1.125rem;
    margin-bottom: 0.5rem;
    line-height: 1.5;
}

.markdown h6 {
    font-size: 1rem;
    font-weight: 600;
    margin-top: 1rem;
    margin-bottom: 0.5rem;
    line-height: 1.5;
    color: #6c757d;
}

/* 첫 번째 헤더는 상단 마진 제거 */
.markdown > h1:first-child,
.markdown > h2:first-child,
.markdown > h3:first-child,
.markdown > h4:first-child,
.markdown > h5:first-child,
.markdown > h6:first-child {
    margin-top: 0;
}

/* ========================================
   그라데이션 텍스트 (h1 제목용)
   - 마크다운 함수에서 h1 제목에 자동 적용
   ======================================== */
.markdown .text-gradient {
    background: linear-gradient(135deg, #1d4ed8 0%, #3b82f6 50%, #60a5fa 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* ========================================
   인용구 (blockquote) 스타일
   ======================================== */
.markdown blockquote {
    border-left: 4px solid;
    padding: 0.75rem 1rem;
    margin: 1rem 0;
    background-color: #f8f9fa;
    border-radius: 0 0.375rem 0.375rem 0;
}

.markdown blockquote.border-primary {
    border-left-color: #0d6efd;
}

.markdown blockquote.border-info {
    border-left-color: #0dcaf0;
}

.markdown blockquote.border-warning {
    border-left-color: #ffc107;
}

/* ========================================
   목록 스타일
   ======================================== */
.markdown ul,
.markdown ol {
    margin-bottom: 1.5rem;
    padding-left: 2rem;
}

.markdown li {
    margin-bottom: 0.5rem;
}

.markdown li:last-child {
    margin-bottom: 0;
}

/* 중첩 목록 */
.markdown ul ul,
.markdown ol ol,
.markdown ul ol,
.markdown ol ul {
    margin-top: 0.5rem;
    margin-bottom: 0;
}

/* ========================================
   코드 스타일 (인라인 코드)
   ======================================== */
.markdown code {
    background-color: #f1f3f4;
    color: #d63384;
    padding: 0.2rem 0.4rem;
    border-radius: 0.25rem;
    font-size: 0.875em;
    font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
}

/* 코드 블록 내부의 code 태그는 배경 제거 */
.markdown pre code {
    background-color: transparent;
    color: inherit;
    padding: 0;
    border-radius: 0;
    font-size: inherit;
}

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

/* ========================================
   링크 스타일
   ======================================== */
.markdown a {
    color: #0d6efd;
    text-decoration: none;
}

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

/* ========================================
   수평선 스타일
   ======================================== */
.markdown hr {
    margin: 2rem 0;
    border: 0;
    border-top: 1px solid #dee2e6;
}

/* ========================================
   반응형 스타일 (모바일)
   ======================================== */
@media (max-width: 767.98px) {
    .markdown h1 {
        font-size: 1.75rem;
    }

    .markdown h2 {
        font-size: 1.5rem;
    }

    .markdown h3 {
        font-size: 1.25rem;
    }

    .markdown h4 {
        font-size: 1.125rem;
    }

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

    .markdown p {
        margin-bottom: 1.25rem;
    }
}

/* ========================================
   사용자 동작 감소 설정 대응
   ======================================== */
@media (prefers-reduced-motion: reduce) {
    .markdown .text-gradient {
        animation: none;
    }
}