/* ==========================================================================
   COMPONENTS.CSS - 범용 컴포넌트 스타일
   ========================================================================== */

/* ==========================================================================
   1. BASE STYLES (기본 스타일)
   ========================================================================== */

/* ==========================================================================
   2. LAYOUT COMPONENTS (레이아웃 컴포넌트)
   ========================================================================== */

/* ==========================================================================
   3. FORM COMPONENTS (폼 컴포넌트)
   ========================================================================== */

/* ==========================================================================
   4. MEDIA (범용!)
   ========================================================================== */

/* --------------------------------------------------------------------------
   Video / Audio Player (기본 스타일)
   -------------------------------------------------------------------------- */

/* 오디오 플레이어 좌우 패딩은 여기서 주는 게 아니라, media.css의 .video-figure,.audio-figure에서 줄 것 */
.video-player,
.audio-player {
    width: 100%;
    box-sizing: border-box;
    border-radius: var(--st-radius-md);
    /* background: hsl(var(--st-card)); */
}

/* 다크 모드에서 오디오 플레이어 기본 컨트롤 색감을 어둡게 맞추기 */
.dark .audio-player {
    color-scheme: dark;
    /* background: hsl(var(--st-card)); */
}

/* 영상이 세로로 긴 경우 가로폭을 줄여서 세로를 꽉 차게 */
.video-figure > .video-player,
.video-figure > video {
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    flex-shrink: 0;
    /* flex 컨테이너 내에서 버튼이 있으면 자동으로 공간 확보됨 */
}

/* ==========================================================================
   5. AUDIO SYNC (오디오-텍스트 동기화)
   ========================================================================== */

/* 자막 컨테이너 스타일 */
#video-full-content,
#audio-full-content {
    margin: 16px 0;
}

.transcript-segment {
    padding: 12px 16px;
    margin: 6px 0;
    border-radius: var(--st-radius-md);
    cursor: pointer;
    transition: all 0.2s ease;
    border: 1px solid hsl(var(--st-line) / 0.5);
    background: hsl(var(--st-bg));
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    position: relative;
    box-shadow: 0 1px 2px hsl(var(--st-shadow) / 0.05);
}

.transcript-segment:hover {
    background: hsl(var(--st-muted) / 0.4);
    border-color: hsl(var(--st-brand) / 0.3);
    box-shadow: 0 2px 4px hsl(var(--st-shadow) / 0.1);
    transform: translateY(-1px);
}

.transcript-segment.active {
    background: hsl(var(--st-brand) / 0.1);
    border-color: hsl(var(--st-brand));
    border-width: 0.5px;
    color: hsl(var(--st-brand));
    box-shadow: 0 2px 8px hsl(var(--st-brand) / 0.2);
}

/* 활성 자막에 왼쪽 강조선 추가 */
.transcript-segment.active::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: hsl(var(--st-brand));
    border-radius: var(--st-radius-sm) 0 0 var(--st-radius-sm);
}

.transcript-time {
    font-size: var(--st-text-sm);
    color: hsl(var(--st-muted-foreground));
    font-weight: 500;
    min-width: 70px;
    flex-shrink: 0;
    margin-right: 12px;
    font-variant-numeric: tabular-nums;
}

.transcript-segment.active .transcript-time {
    color: hsl(var(--st-brand));
}

.transcript-content {
    font-size: 0.875rem; /* 14px - 기본 크기보다 약간 작게 */
    line-height: 1.6;
    color: hsl(var(--st-fg));
    flex: 1;
}

.transcript-segment.active .transcript-content {
    color: hsl(var(--st-brand));
    font-weight: 500;
}

/* ==========================================================================
   6. PDF VIEWER (pdf-viewer.js 사용, 범용!)
   ========================================================================== */

.pdf-container {
    width: 100%;
    height: 100%;
    position: relative;
    overflow: visible;
}

.pdf-viewer {
    width: 100%;
    height: 100%;
    border: none;
    border-radius: var(--st-radius-md);
    background: hsl(var(--st-bg));
}

.pdf-controls {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    background: hsl(var(--st-card));
    border-radius: var(--st-radius-md);
    margin-bottom: 12px;
}

.pdf-controls button {
    padding: 8px 12px;
    border: 1px solid hsl(var(--st-line));
    background: hsl(var(--st-bg));
    color: hsl(var(--st-fg));
    border-radius: var(--st-radius-sm);
    cursor: pointer;
    transition: var(--st-transition-fast);
    font-size: 14px;
}

.pdf-controls button:hover {
    background: hsl(var(--st-muted));
    border-color: hsl(var(--st-brand));
}

.pdf-controls button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.pdf-page-info {
    font-size: 14px;
    color: hsl(var(--st-fg) / 0.7);
    margin-left: auto;
}

/* ==========================================================================
   6. CODE HIGHLIGHTING (코드 하이라이팅)
   ========================================================================== */

.hljs {
    background: hsl(var(--st-muted)) !important;
    color: hsl(var(--st-fg)) !important;
    padding: 16px;
    border-radius: var(--st-radius-md);
    font-family: 'Fira Code', 'Monaco', 'Consolas', monospace;
    font-size: 14px;
    line-height: 1.5;
    overflow-x: auto;
    border: 1px solid hsl(var(--st-line) / 0.3);
}

.hljs-comment,
.hljs-quote {
    color: hsl(var(--st-fg) / 0.6) !important;
}

.hljs-keyword,
.hljs-selector-tag,
.hljs-subst {
    color: hsl(var(--st-brand)) !important;
}

.hljs-number,
.hljs-literal,
.hljs-variable,
.hljs-template-variable,
.hljs-tag .hljs-attr {
    color: hsl(var(--st-accent)) !important;
}

.hljs-string,
.hljs-doctag {
    color: hsl(var(--st-success)) !important;
}

.hljs-title,
.hljs-section,
.hljs-selector-id {
    color: hsl(var(--st-warning)) !important;
}

.hljs-type,
.hljs-class .hljs-title {
    color: hsl(var(--st-error)) !important;
}

/* ==========================================================================
   7. FILE SUMMARY CONTENT (파일 요약 콘텐츠)
   ========================================================================== */

/* 공통 콘텐츠 스타일 - 뷰어와 편집기 공유 */
.file-summary-content,
.coach-content-text,
.content-text,
.html-content,
.ql-editor,
.summary-content {
    font-size: var(--st-text-base);
    /* 16px - 기본 텍스트 크기 */
    line-height: 1.6 !important;
    color: hsl(var(--st-fg) / 0.8);
}


.file-summary-content h1,
.coach-content-text h1,
.content-text h1,
.html-content h1,
.ql-editor h1,
.summary-content h1 {
    font-size: 1.875rem !important;
    /* 30px */
    font-weight: 700 !important;
    margin: var(--content-h1-margin-top) 0 var(--content-h1-margin-bottom) 0 !important;
    color: hsl(var(--st-fg)) !important;
    line-height: 1.2 !important;
}

.file-summary-content h2,
.coach-content-text h2,
.content-text h2,
.html-content h2,
.ql-editor h2,
.summary-content h2 {
    font-size: 1.5rem !important;
    /* 24px */
    font-weight: 600 !important;
    margin: var(--content-h2-margin-top) 0 var(--content-h2-margin-bottom) 0 !important;
    color: hsl(var(--st-fg)) !important;
    line-height: 1.3 !important;
}

.file-summary-content h3,
.coach-content-text h3,
.content-text h3,
.html-content h3,
.ql-editor h3,
.summary-content h3 {
    font-size: var(--content-h3-font-size) !important;
    font-weight: 600 !important;
    margin: var(--content-h3-margin-top) 0 var(--content-h3-margin-bottom) 0 !important;
    color: hsl(var(--st-fg)) !important;
    line-height: var(--content-h3-line-height) !important;
}

/* --------------------------------------------------------------------------
   Section Header with Coach Button (섹션 제목과 AI 코치 버튼)
   -------------------------------------------------------------------------- */
.section-header-with-coach {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: var(--spacing-md);
    /* 제목과 버튼 간격 증가 */
    margin: var(--content-h3-margin-top) 0 var(--content-h3-margin-bottom) 0 !important;
}

.section-header-with-coach h3 {
    flex: 0 1 auto;
    margin: 0 !important;
}

.section-header-with-coach .ai-coach-section-btn {
    flex-shrink: 0;
    margin: 0;
}

/* AI 코치 버튼 스타일 */
.section-header-with-coach .message-button {
    padding: 5px 7px;
    margin-left: 5px;
    border-radius: var(--st-radius-md);
    background: hsl(var(--st-brand) / 0.08);
    /* 브랜드색을 은은하게 */
    border: 1px solid hsl(var(--st-brand) / 0.3);
    /* 브랜드색 테두리 */
    color: hsl(var(--st-brand));
    /* font-size: 0.875rem; */
    font-size: 12px;
    font-weight: 500;
    transition: all var(--st-transition-base);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    line-height: 1.2;
    height: auto;
}

/* AI 코치 버튼 내 아이콘 세로 정렬 */
.section-header-with-coach .message-button i {
    display: inline-flex;
    align-items: center;
    vertical-align: text-bottom;
    line-height: 1;
    font-size: 12px;
    margin-top: -2px;
    /* 텍스트와 정렬 조정 */
    position: relative;
    top: 0.5px;
    /* 추가 미세 조정 */
}

.section-header-with-coach .message-button:hover {
    background: hsl(var(--st-brand) / 0.15);
    /* 호버 시 조금 더 진하게 */
    border-color: hsl(var(--st-brand) / 0.5);
    color: hsl(var(--st-brand));
}

.section-header-with-coach .message-button:active {
    background: hsl(var(--st-brand) / 0.2);
    transform: scale(0.98);
}

/* 반응형: 모바일에서도 제목 바로 옆에 버튼 표시 (간격만 조정) */
@media (max-width: 768px) {
    .section-header-with-coach {
        gap: var(--spacing-sm);
        /* 모바일에서 간격만 줄임, flex-direction은 row 유지 */
    }
}

/* --------------------------------------------------------------------------
   Statistics Card with Brand Style (통계 카드 브랜드 스타일)
   ai-coach-section-btn의 스타일을 카드에 적용
   -------------------------------------------------------------------------- */
.statistics-card-brand {
    background: hsl(var(--st-card));
    border: 1px solid hsl(var(--st-brand) / 0.4);
    /* 브랜드색 테두리 */
    border-radius: var(--st-radius-lg);
    transition: all var(--st-transition-base);
}

.statistics-card-brand:hover {
    background: hsl(var(--st-muted) / 0.2);
    /* 호버 시 배경 변경 */
    border-color: hsl(var(--st-brand) / 0.5);
    /* 호버 시 테두리 조금 더 진하게 */
}

.file-summary-content h4,
.coach-content-text h4,
.content-text h4,
.html-content h4,
.ql-editor h4,
.summary-content h4 {
    font-size: 1.125rem !important;
    /* 18px */
    font-weight: 600 !important;
    margin: 1.25rem 0 0.6rem 0 !important;
    color: hsl(var(--st-fg)) !important;
    line-height: 1.4 !important;
}

.file-summary-content h5,
.coach-content-text h5,
.content-text h5,
.html-content h5,
.ql-editor h5,
.summary-content h5 {
    font-size: 1rem !important;
    /* 16px */
    font-weight: 600 !important;
    margin: 0.5rem 0 0.25rem 0 !important;
    color: hsl(var(--st-fg)) !important;
    line-height: 1.5 !important;
}

.file-summary-content h6,
.coach-content-text h6,
.content-text h6,
.html-content h6,
.ql-editor h6,
.summary-content h6 {
    font-size: 0.875rem !important;
    /* 14px */
    font-weight: 600 !important;
    margin: 0.5rem 0 0.25rem 0 !important;
    color: hsl(var(--st-fg)) !important;
    line-height: 1.5 !important;
}

.file-summary-content p,
.coach-content-text p,
.content-text p,
.html-content p,
/* .ql-editor p, */
.summary-content p {
    margin: var(--content-p-margin-top) 0 var(--content-p-margin-bottom) 0 !important;
    line-height: var(--content-line-height) !important;
}

/* 빈 paragraph의 margin 제거 (줄간격 문제 해결) - 편집창과 뷰어 모두 적용 */
.file-summary-content p:empty,
.coach-content-text p:empty,
.content-text p:empty,
.html-content p:empty,
.ql-editor p:empty,
.summary-content p:empty {
    margin-top: var(--content-empty-p-margin) !important;
    margin-bottom: var(--content-empty-p-margin) !important;
    min-height: var(--content-empty-p-height) !important;
    height: var(--content-empty-p-height) !important;
}

/* 줄바꿈만 있는 paragraph의 margin 제거 - 편집창과 뷰어 모두 적용 */
.file-summary-content p:has(> br:only-child),
.coach-content-text p:has(> br:only-child),
.content-text p:has(> br:only-child),
.html-content p:has(> br:only-child),
.ql-editor p:has(> br:only-child),
.summary-content p:has(> br:only-child) {
    margin-top: var(--content-empty-p-margin) !important;
    margin-bottom: var(--content-empty-p-margin) !important;
    min-height: var(--content-empty-p-height) !important;
    height: var(--content-empty-p-height) !important;
}

/* 리스트 들여쓰기 - 모든 뷰어와 편집기 공유 */
.file-summary-content ul,
.coach-content-text ul,
.content-text ul,
.html-content ul,
.ql-editor ul,
.summary-content ul,
.file-summary-content ol,
.coach-content-text ol,
.content-text ol,
.html-content ol,
.ql-editor ol,
.summary-content ol {
    margin: 0.75rem 0 0.75rem 0.75rem !important;
    padding-left: 1.0rem !important;
    padding-inline-start: 1.0rem !important;
    list-style-position: outside !important;
}

/* RTL 환경에서 리스트 마진과 패딩 조정 */
[dir="rtl"] .file-summary-content ul,
[dir="rtl"] .coach-content-text ul,
[dir="rtl"] .content-text ul,
[dir="rtl"] .html-content ul,
[dir="rtl"] .ql-editor ul,
[dir="rtl"] .summary-content ul,
[dir="rtl"] .file-summary-content ol,
[dir="rtl"] .coach-content-text ol,
[dir="rtl"] .content-text ol,
[dir="rtl"] .html-content ol,
[dir="rtl"] .ql-editor ol,
[dir="rtl"] .summary-content ol {
    margin: 0.75rem 0.75rem 0.75rem 0 !important;
    padding-left: 0 !important;
    padding-right: 1.5rem !important;
    padding-inline-start: 0 !important;
    direction: rtl;
    /* RTL 환경에서 불릿/번호가 오른쪽에 표시되도록 */
}

/* list-style 오버라이드 (style.min.css의 list-style: none 때문에 필요) */
.file-summary-content ul,
.coach-content-text ul,
.content-text ul,
.html-content ul,
.ql-editor ul,
.summary-content ul {
    list-style: disc !important;
}

.file-summary-content ol,
.coach-content-text ol,
.content-text ol,
.html-content ol,
.ql-editor ol,
.summary-content ol {
    list-style: decimal !important;
}

/* Quill 에디터에서 연속된 <ol> 태그에 대한 연속 번호 매기기 */
/* .ql-editor 레벨에서 카운터를 초기화하고, 모든 하위 <ol>에서 연속 번호 사용 */
.ql-editor {
    counter-reset: list-counter 0 !important;
}

.ql-editor ol {
    counter-reset: none !important;
}

.ql-editor ol li {
    counter-increment: list-counter !important;
    list-style: none !important;
    position: relative !important;
}

.ql-editor ol li::before {
    content: counter(list-counter) ". " !important;
    position: absolute !important;
    left: -1.5em !important;
    text-align: right !important;
    min-width: 1.5em !important;
}

.file-summary-content li,
.coach-content-text li,
.content-text li,
.html-content li,
.ql-editor li,
.summary-content li {
    display: list-item;
    list-style-position: outside;
    margin: var(--content-list-item-margin) 0 !important;
    line-height: 1.6;
    padding-left: 0.25rem !important;
}

/* Quill 에디터에서 기본 li는 padding-left를 0으로 설정 (indent 클래스가 있는 경우에만 들여쓰기) */
.ql-editor li:not([class*="ql-indent-"]) {
    padding-left: 0 !important;
}

/* RTL 환경에서 리스트 아이템: 
   - li 자체는 direction을 명시하지 않아 부모 ul/ol의 RTL direction을 따름
   - 이렇게 하면 불릿/번호가 오른쪽에 표시됨
   - list-style-position: outside로 불릿/번호가 텍스트 밖에 표시되도록 보장 */
[dir="rtl"] .file-summary-content li,
[dir="rtl"] .coach-content-text li,
[dir="rtl"] .content-text li,
[dir="rtl"] .html-content li,
[dir="rtl"] .ql-editor li,
[dir="rtl"] .summary-content li {
    padding-left: 0;
    padding-right: 0;
    text-align: right;
    list-style-position: outside !important;
    /* direction을 명시하지 않아 부모의 RTL을 따름 */
    /* 불릿/번호를 위한 공간은 ul/ol의 padding-right로 확보 */
}

/* RTL 환경에서 li 내부의 텍스트 요소만 LTR로 처리하여 문장부호 문제 방지
   하지만 li 자체의 direction은 변경하지 않아 불릿 위치에 영향 없음 */
[dir="rtl"] .file-summary-content li p,
[dir="rtl"] .file-summary-content li div:not(ul):not(ol),
[dir="rtl"] .file-summary-content li span,
[dir="rtl"] .coach-content-text li p,
[dir="rtl"] .coach-content-text li div:not(ul):not(ol),
[dir="rtl"] .coach-content-text li span,
[dir="rtl"] .content-text li p,
[dir="rtl"] .content-text li div:not(ul):not(ol),
[dir="rtl"] .content-text li span,
[dir="rtl"] .html-content li p,
[dir="rtl"] .html-content li div:not(ul):not(ol),
[dir="rtl"] .html-content li span,
[dir="rtl"] .ql-editor li p,
[dir="rtl"] .ql-editor li div:not(ul):not(ol),
[dir="rtl"] .ql-editor li span,
[dir="rtl"] .summary-content li p,
[dir="rtl"] .summary-content li div:not(ul):not(ol),
[dir="rtl"] .summary-content li span {
    direction: ltr !important;
    unicode-bidi: isolate !important;
}

/* 중첩된 목록 들여쓰기 - 모든 뷰어와 편집기 공유 */
/* 중첩된 목록은 padding-left를 재설정하여 누적되지 않도록 함 */
.file-summary-content ul ul,
.file-summary-content ul ol,
.file-summary-content ol ul,
.file-summary-content ol ol,
.coach-content-text ul ul,
.coach-content-text ul ol,
.coach-content-text ol ul,
.coach-content-text ol ol,
.content-text ul ul,
.content-text ul ol,
.content-text ol ul,
.content-text ol ol,
.html-content ul ul,
.html-content ul ol,
.html-content ol ul,
.html-content ol ol,
.ql-editor ul ul,
.ql-editor ul ol,
.ql-editor ol ul,
.ql-editor ol ol,
.summary-content ul ul,
.summary-content ul ol,
.summary-content ol ul,
.summary-content ol ol {
    margin-top: 0.5rem !important;
    margin-bottom: 0.5rem !important;
    margin-left: 0.5rem !important;
    /* 중첩된 목록의 padding-left를 재설정하여 부모의 padding이 누적되지 않도록 함 */
    padding-left: 1.0rem !important;
    padding-inline-start: 1.0rem !important;
    /* 중첩된 목록 들여쓰기 추가 */
}

/* RTL 환경에서 중첩된 목록 들여쓰기 */
[dir="rtl"] .file-summary-content ul ul,
[dir="rtl"] .file-summary-content ul ol,
[dir="rtl"] .file-summary-content ol ul,
[dir="rtl"] .file-summary-content ol ol,
[dir="rtl"] .coach-content-text ul ul,
[dir="rtl"] .coach-content-text ul ol,
[dir="rtl"] .coach-content-text ol ul,
[dir="rtl"] .coach-content-text ol ol,
[dir="rtl"] .content-text ul ul,
[dir="rtl"] .content-text ul ol,
[dir="rtl"] .content-text ol ul,
[dir="rtl"] .content-text ol ol,
[dir="rtl"] .html-content ul ul,
[dir="rtl"] .html-content ul ol,
[dir="rtl"] .html-content ol ul,
[dir="rtl"] .html-content ol ol,
[dir="rtl"] .ql-editor ul ul,
[dir="rtl"] .ql-editor ul ol,
[dir="rtl"] .ql-editor ol ul,
[dir="rtl"] .ql-editor ol ol,
[dir="rtl"] .summary-content ul ul,
[dir="rtl"] .summary-content ul ol,
[dir="rtl"] .summary-content ol ul,
[dir="rtl"] .summary-content ol ol {
    margin-left: 0 !important;
    margin-right: 0.5rem !important;
    /* RTL 환경에서 중첩된 목록의 padding을 재설정하여 누적 방지 */
    padding-left: 0 !important;
    padding-right: 1.5rem !important;
    padding-inline-start: 0 !important;
    /* RTL 환경에서 중첩된 목록 들여쓰기 */
}

/* 3단계 이상 중첩된 목록도 동일하게 처리 (누적 방지) */
.file-summary-content ul ul ul,
.file-summary-content ul ul ol,
.file-summary-content ul ol ul,
.file-summary-content ul ol ol,
.file-summary-content ol ul ul,
.file-summary-content ol ul ol,
.file-summary-content ol ol ul,
.file-summary-content ol ol ol,
.coach-content-text ul ul ul,
.coach-content-text ul ul ol,
.coach-content-text ul ol ul,
.coach-content-text ul ol ol,
.coach-content-text ol ul ul,
.coach-content-text ol ul ol,
.coach-content-text ol ol ul,
.coach-content-text ol ol ol,
.content-text ul ul ul,
.content-text ul ul ol,
.content-text ul ol ul,
.content-text ul ol ol,
.content-text ol ul ul,
.content-text ol ul ol,
.content-text ol ol ul,
.content-text ol ol ol,
.html-content ul ul ul,
.html-content ul ul ol,
.html-content ul ol ul,
.html-content ul ol ol,
.html-content ol ul ul,
.html-content ol ul ol,
.html-content ol ol ul,
.html-content ol ol ol,
.ql-editor ul ul ul,
.ql-editor ul ul ol,
.ql-editor ul ol ul,
.ql-editor ul ol ol,
.ql-editor ol ul ul,
.ql-editor ol ul ol,
.ql-editor ol ol ul,
.ql-editor ol ol ol,
.summary-content ul ul ul,
.summary-content ul ul ol,
.summary-content ul ol ul,
.summary-content ul ol ol,
.summary-content ol ul ul,
.summary-content ol ul ol,
.summary-content ol ol ul,
.summary-content ol ol ol {
    margin-left: 0.5rem !important;
    padding-left: 1.0rem !important;
    padding-inline-start: 1.0rem !important;
    /* 3단계 이상 중첩도 고정된 들여쓰기 유지 */
}

[dir="rtl"] .file-summary-content ul ul ul,
[dir="rtl"] .file-summary-content ul ul ol,
[dir="rtl"] .file-summary-content ul ol ul,
[dir="rtl"] .file-summary-content ul ol ol,
[dir="rtl"] .file-summary-content ol ul ul,
[dir="rtl"] .file-summary-content ol ul ol,
[dir="rtl"] .file-summary-content ol ol ul,
[dir="rtl"] .file-summary-content ol ol ol,
[dir="rtl"] .coach-content-text ul ul ul,
[dir="rtl"] .coach-content-text ul ul ol,
[dir="rtl"] .coach-content-text ul ol ul,
[dir="rtl"] .coach-content-text ul ol ol,
[dir="rtl"] .coach-content-text ol ul ul,
[dir="rtl"] .coach-content-text ol ul ol,
[dir="rtl"] .coach-content-text ol ol ul,
[dir="rtl"] .coach-content-text ol ol ol,
[dir="rtl"] .content-text ul ul ul,
[dir="rtl"] .content-text ul ul ol,
[dir="rtl"] .content-text ul ol ul,
[dir="rtl"] .content-text ul ol ol,
[dir="rtl"] .content-text ol ul ul,
[dir="rtl"] .content-text ol ul ol,
[dir="rtl"] .content-text ol ol ul,
[dir="rtl"] .content-text ol ol ol,
[dir="rtl"] .html-content ul ul ul,
[dir="rtl"] .html-content ul ul ol,
[dir="rtl"] .html-content ul ol ul,
[dir="rtl"] .html-content ul ol ol,
[dir="rtl"] .html-content ol ul ul,
[dir="rtl"] .html-content ol ul ol,
[dir="rtl"] .html-content ol ol ul,
[dir="rtl"] .html-content ol ol ol,
[dir="rtl"] .ql-editor ul ul ul,
[dir="rtl"] .ql-editor ul ul ol,
[dir="rtl"] .ql-editor ul ol ul,
[dir="rtl"] .ql-editor ul ol ol,
[dir="rtl"] .ql-editor ol ul ul,
[dir="rtl"] .ql-editor ol ul ol,
[dir="rtl"] .ql-editor ol ol ul,
[dir="rtl"] .ql-editor ol ol ol,
[dir="rtl"] .summary-content ul ul ul,
[dir="rtl"] .summary-content ul ul ol,
[dir="rtl"] .summary-content ul ol ul,
[dir="rtl"] .summary-content ul ol ol,
[dir="rtl"] .summary-content ol ul ul,
[dir="rtl"] .summary-content ol ul ol,
[dir="rtl"] .summary-content ol ol ul,
[dir="rtl"] .summary-content ol ol ol {
    margin-left: 0 !important;
    margin-right: 0.5rem !important;
    padding-left: 0 !important;
    padding-right: 1.5rem !important;
    padding-inline-start: 0 !important;
    /* RTL 환경에서 3단계 이상 중첩도 고정된 들여쓰기 유지 */
}

/* Ensure list marker color matches text color exactly */
.file-summary-content li::marker,
.coach-content-text li::marker,
.content-text li::marker,
.html-content li::marker,
.summary-content li::marker {
    color: currentColor !important;
}

.file-summary-content .ql-size-small,
.coach-content-text .ql-size-small,
.content-text .ql-size-small,
.html-content .ql-size-small,
.ql-editor .ql-size-small {
    font-size: 0.9em !important;
}

.file-summary-content .ql-size-large,
.coach-content-text .ql-size-large,
.content-text .ql-size-large,
.html-content .ql-size-large,
.ql-editor .ql-size-large {
    font-size: 1.8em !important;
}

.file-summary-content .ql-size-huge,
.coach-content-text .ql-size-huge,
.content-text .ql-size-huge,
.html-content .ql-size-huge,
.ql-editor .ql-size-huge {
    font-size: 2.5em !important;
    font-weight: bold !important;
}

.file-summary-content .ql-align-center,
.coach-content-text .ql-align-center,
.content-text .ql-align-center,
.html-content .ql-align-center,
.ql-editor .ql-align-center {
    text-align: center !important;
}

.file-summary-content .ql-align-right,
.coach-content-text .ql-align-right,
.content-text .ql-align-right,
.html-content .ql-align-right,
.ql-editor .ql-align-right {
    text-align: right !important;
}

/* 기본 indent 스타일 - indent-3, 4, 5에만 적용 */
.file-summary-content [class*="ql-indent-"]:not(.ql-indent-1):not(.ql-indent-2):not(.ql-indent-3):not(.ql-indent-4):not(.ql-indent-5),
.coach-content-text [class*="ql-indent-"]:not(.ql-indent-1):not(.ql-indent-2):not(.ql-indent-3):not(.ql-indent-4):not(.ql-indent-5),
.content-text [class*="ql-indent-"]:not(.ql-indent-1):not(.ql-indent-2):not(.ql-indent-3):not(.ql-indent-4):not(.ql-indent-5),
.html-content [class*="ql-indent-"]:not(.ql-indent-1):not(.ql-indent-2):not(.ql-indent-3):not(.ql-indent-4):not(.ql-indent-5),
.ql-editor [class*="ql-indent-"]:not(.ql-indent-1):not(.ql-indent-2):not(.ql-indent-3):not(.ql-indent-4):not(.ql-indent-5) {
    margin-left: 0px !important;
    padding-left: 1.5em !important;
}

/* indent-1: 가장 작은 들여쓰기 */
.file-summary-content li.ql-indent-1,
.coach-content-text li.ql-indent-1,
.content-text li.ql-indent-1,
.html-content li.ql-indent-1,
.ql-editor li.ql-indent-1,
.file-summary-content .ql-indent-1,
.coach-content-text .ql-indent-1,
.content-text .ql-indent-1,
.html-content .ql-indent-1,
.ql-editor .ql-indent-1 {
    margin-left: 0px !important;
    padding-left: 1em !important;
}

/* indent-2: indent-1보다 큰 들여쓰기 */
.file-summary-content li.ql-indent-2,
.coach-content-text li.ql-indent-2,
.content-text li.ql-indent-2,
.html-content li.ql-indent-2,
.ql-editor li.ql-indent-2,
.file-summary-content .ql-indent-2,
.coach-content-text .ql-indent-2,
.content-text .ql-indent-2,
.html-content .ql-indent-2,
.ql-editor .ql-indent-2 {
    margin-left: 0px !important;
    padding-left: 2em !important;
}

.file-summary-content .ql-indent-3,
.coach-content-text .ql-indent-3,
.content-text .ql-indent-3,
.html-content .ql-indent-3,
.ql-editor .ql-indent-3 {
    padding-left: 4em !important;
}

.file-summary-content .ql-indent-4,
.coach-content-text .ql-indent-4,
.content-text .ql-indent-4,
.html-content .ql-indent-4,
.ql-editor .ql-indent-4 {
    padding-left: 5em !important;
}

.file-summary-content .ql-indent-5,
.coach-content-text .ql-indent-5,
.content-text .ql-indent-5,
.html-content .ql-indent-5,
.ql-editor .ql-indent-5 {
    padding-left: 6em !important;
}

.file-summary-content .ql-direction-rtl,
.coach-content-text .ql-direction-rtl,
.content-text .ql-direction-rtl,
.html-content .ql-direction-rtl,
.ql-editor .ql-direction-rtl {
    direction: rtl !important;
}

.file-summary-content i.bi,
.file-summary-content i[class*="bi-"],
.coach-content-text i.bi,
.coach-content-text i[class*="bi-"],
.content-text i.bi,
.content-text i[class*="bi-"],
.html-content i.bi,
.html-content i[class*="bi-"],
.ql-editor i.bi,
.ql-editor i[class*="bi-"],
.ql-editor .q-icon {
    display: inline-block !important;
    height: 1em !important;
    width: 1em !important;
    line-height: 1 !important;
    vertical-align: -0.05em !important;
    font-family: "bootstrap-icons" !important;
    font-style: normal !important;
    font-weight: normal !important;
    font-variant: normal !important;
    text-transform: none !important;
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
}

.file-summary-content p i.bi,
.file-summary-content p i[class*="bi-"],
.file-summary-content h1 i.bi,
.file-summary-content h1 i[class*="bi-"],
.file-summary-content h2 i.bi,
.file-summary-content h2 i[class*="bi-"],
.file-summary-content h3 i.bi,
.file-summary-content h3 i[class*="bi-"],
.file-summary-content h4 i.bi,
.file-summary-content h4 i[class*="bi-"],
.file-summary-content h5 i.bi,
.file-summary-content h5 i[class*="bi-"],
.file-summary-content h6 i.bi,
.file-summary-content h6 i[class*="bi-"],
.file-summary-content li i.bi,
.file-summary-content li i[class*="bi-"],
.file-summary-content span i.bi,
.file-summary-content span i[class*="bi-"],
.coach-content-text p i.bi,
.coach-content-text p i[class*="bi-"],
.coach-content-text h1 i.bi,
.coach-content-text h1 i[class*="bi-"],
.coach-content-text h2 i.bi,
.coach-content-text h2 i[class*="bi-"],
.coach-content-text h3 i.bi,
.coach-content-text h3 i[class*="bi-"],
.coach-content-text h4 i.bi,
.coach-content-text h4 i[class*="bi-"],
.coach-content-text h5 i.bi,
.coach-content-text h5 i[class*="bi-"],
.coach-content-text h6 i.bi,
.coach-content-text h6 i[class*="bi-"],
.coach-content-text li i.bi,
.coach-content-text li i[class*="bi-"],
.coach-content-text span i.bi,
.coach-content-text span i[class*="bi-"],
.content-text p i.bi,
.content-text p i[class*="bi-"],
.content-text h1 i.bi,
.content-text h1 i[class*="bi-"],
.content-text h2 i.bi,
.content-text h2 i[class*="bi-"],
.content-text h3 i.bi,
.content-text h3 i[class*="bi-"],
.content-text h4 i.bi,
.content-text h4 i[class*="bi-"],
.content-text h5 i.bi,
.content-text h5 i[class*="bi-"],
.content-text h6 i.bi,
.content-text h6 i[class*="bi-"],
.content-text li i.bi,
.content-text li i[class*="bi-"],
.content-text span i.bi,
.content-text span i[class*="bi-"],
.html-content p i.bi,
.html-content p i[class*="bi-"],
.html-content h1 i.bi,
.html-content h1 i[class*="bi-"],
.html-content h2 i.bi,
.html-content h2 i[class*="bi-"],
.html-content h3 i.bi,
.html-content h3 i[class*="bi-"],
.html-content h4 i.bi,
.html-content h4 i[class*="bi-"],
.html-content h5 i.bi,
.html-content h5 i[class*="bi-"],
.html-content h6 i.bi,
.html-content h6 i[class*="bi-"],
.html-content li i.bi,
.html-content li i[class*="bi-"],
.html-content span i.bi,
.html-content span i[class*="bi-"],
.ql-editor p i.bi,
.ql-editor p i[class*="bi-"],
.ql-editor h1 i.bi,
.ql-editor h1 i[class*="bi-"],
.ql-editor h2 i.bi,
.ql-editor h2 i[class*="bi-"],
.ql-editor h3 i.bi,
.ql-editor h3 i[class*="bi-"],
.ql-editor h4 i.bi,
.ql-editor h4 i[class*="bi-"],
.ql-editor h5 i.bi,
.ql-editor h5 i[class*="bi-"],
.ql-editor h6 i.bi,
.ql-editor h6 i[class*="bi-"],
.ql-editor li i.bi,
.ql-editor li i[class*="bi-"],
.ql-editor span i.bi,
.ql-editor span i[class*="bi-"] {
    height: 1em !important;
    width: 1em !important;
    line-height: 1 !important;
    vertical-align: -0.05em !important;
}

.file-summary-content strong,
.coach-content-text strong,
.content-text strong,
.html-content strong,
.ql-editor strong,
.summary-content strong,
.file-summary-content li strong,
.coach-content-text li strong,
.content-text li strong,
.html-content li strong,
.ql-editor li strong,
.summary-content li strong {
    font-weight: 600;
    color: hsl(var(--st-fg)) !important;
}

.file-summary-content em,
.coach-content-text em,
.content-text em,
.html-content em,
.ql-editor em,
.summary-content em {
    font-style: italic;
}

/* 가로선(hr) - 뷰어와 편집기 공유 */
.file-summary-content hr,
.coach-content-text hr,
.content-text hr,
.html-content hr,
.ql-editor hr {
    display: block;
    border: none;
    border-top: 1px solid hsl(var(--st-line));
    margin: 1.5rem 0;
    height: 1px;
    padding: 0;
    opacity: 1;
}

/* 다크모드 가로선 */
.dark .file-summary-content hr,
.dark .coach-content-text hr,
.dark .content-text hr,
.dark .html-content hr,
.dark .ql-editor hr,
[data-theme="dark"] .file-summary-content hr,
[data-theme="dark"] .coach-content-text hr,
[data-theme="dark"] .content-text hr,
[data-theme="dark"] .html-content hr,
[data-theme="dark"] .ql-editor hr {
    border-top-color: rgba(255, 255, 255, 0.2);
}

/* 링크 - 뷰어와 편집기 공유 */
.file-summary-content a,
.coach-content-text a,
.content-text a,
.html-content a,
.ql-editor a {
    color: #0066cc;
    text-decoration: underline;
}

.file-summary-content a:hover,
.coach-content-text a:hover,
.content-text a:hover,
.html-content a:hover,
.ql-editor a:hover {
    color: #0052a3;
    text-decoration: underline;
}

/* 인용구(blockquote) - 뷰어와 편집기 공유 */
.file-summary-content blockquote,
.coach-content-text blockquote,
.content-text blockquote,
.html-content blockquote,
.ql-editor blockquote {
    border-left: 4px solid hsl(var(--st-line));
    padding-left: 1rem;
    margin: 1rem 0;
    color: hsl(var(--st-fg) / 0.7);
    font-style: italic;
}

.dark .file-summary-content blockquote,
.dark .coach-content-text blockquote,
.dark .content-text blockquote,
.dark .html-content blockquote,
.dark .ql-editor blockquote,
[data-theme="dark"] .file-summary-content blockquote,
[data-theme="dark"] .coach-content-text blockquote,
[data-theme="dark"] .content-text blockquote,
[data-theme="dark"] .html-content blockquote,
[data-theme="dark"] .ql-editor blockquote {
    border-left-color: rgba(255, 255, 255, 0.2);
}

/* 코드 블록(pre) - 뷰어와 편집기 공유 */
.file-summary-content pre,
.coach-content-text pre,
.content-text pre,
.html-content pre,
.ql-editor pre {
    background: hsl(var(--st-muted) / 0.18);
    border: 1px solid hsl(var(--st-line));
    border-radius: 4px;
    padding: 1rem;
    margin: 1rem 0;
    overflow-x: auto;
    font-family: 'Fira Code', 'Consolas', 'Monaco', monospace;
    font-size: 0.9rem;
    line-height: 1.6;
    color: hsl(var(--st-fg));
}

.dark .file-summary-content pre,
.dark .coach-content-text pre,
.dark .content-text pre,
.dark .html-content pre,
.dark .ql-editor pre,
[data-theme="dark"] .file-summary-content pre,
[data-theme="dark"] .coach-content-text pre,
[data-theme="dark"] .content-text pre,
[data-theme="dark"] .html-content pre,
[data-theme="dark"] .ql-editor pre {
    background: hsl(var(--st-muted) / 0.3);
    border-color: rgba(255, 255, 255, 0.1);
    color: hsl(var(--st-fg));
}

.file-summary-content code,
.coach-content-text code,
.content-text code,
.html-content code,
.ql-editor code {
    background: hsl(var(--st-card));
    border: 1px solid hsl(var(--st-line));
    border-radius: 3px;
    padding: 0.125rem 0.35rem;
    font-family: 'Fira Code', 'Consolas', 'Monaco', monospace;
    font-size: 0.85rem;
    color: hsl(var(--st-fg));
}

.dark .file-summary-content code,
.dark .coach-content-text code,
.dark .content-text code,
.dark .html-content code,
.dark .ql-editor code,
[data-theme="dark"] .file-summary-content code,
[data-theme="dark"] .coach-content-text code,
[data-theme="dark"] .content-text code,
[data-theme="dark"] .html-content code,
[data-theme="dark"] .ql-editor code {
    background: hsl(var(--st-muted) / 0.35) !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
    color: hsl(var(--st-fg)) !important;
}

/* 인라인 코드(code) - 뷰어와 편집기 공유 */
.file-summary-content code,
.coach-content-text code,
.content-text code,
.html-content code,
.ql-editor code {
    background: hsl(var(--st-card));
    border: 1px solid hsl(var(--st-line));
    border-radius: 3px;
    padding: 0.125rem 0.25rem;
    font-family: 'Courier New', monospace;
    font-size: 0.875rem;
}

.dark .file-summary-content code,
.dark .coach-content-text code,
.dark .content-text code,
.dark .html-content code,
.dark .ql-editor code,
[data-theme="dark"] .file-summary-content code,
[data-theme="dark"] .coach-content-text code,
[data-theme="dark"] .content-text code,
[data-theme="dark"] .html-content code,
[data-theme="dark"] .ql-editor code {
    background: hsl(var(--st-muted) / 0.35) !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
    color: hsl(var(--st-fg)) !important;
}

/* ==========================================================================
   8. RESPONSIVE DESIGN (반응형 디자인)
   ========================================================================== */

@media (max-width: 480px) {
    .hljs {
        padding: 10px 12px;
        font-size: 11px;
    }

    .file-summary-content h1,
    .coach-content-text h1,
    .html-content h1 {
        font-size: 1.5rem;
        /* 24px */
    }

    .file-summary-content h2,
    .coach-content-text h2,
    .html-content h2 {
        font-size: 1.25rem;
        /* 20px */
    }

    .file-summary-content h3,
    .coach-content-text h3,
    .html-content h3 {
        font-size: 1.125rem;
        /* 18px */
    }

    .file-summary-content h4,
    .coach-content-text h4,
    .html-content h4 {
        font-size: 1rem;
        /* 16px */
    }
}

/* ==========================================================================
   9. CODE BLOCK STYLES (코드 블록 스타일)
   ========================================================================== */

.code-block {
    background: hsl(var(--st-card));
    border: 1px solid hsl(var(--st-line));
    border-radius: 8px;
    margin: 8px 0;
    overflow: hidden;
}

.code-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 4px 14px;
    background: hsl(var(--st-muted) / 0.3);
    border-bottom: 1px solid hsl(var(--st-line));
}

.code-language {
    font-size: 8px;
    font-weight: 600;
    color: hsl(var(--st-fg) / 0.7);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.code-copy-btn {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 6px 6px;
    background: transparent;
    /* border: 1px solid hsl(var(--st-line)); */
    /* border-radius: 4px; */
    color: hsl(var(--st-fg) / 0.7);
    font-size: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.code-copy-btn:hover {
    background: hsl(var(--st-brand) / 0.1);
    border-color: hsl(var(--st-brand));
    color: hsl(var(--st-brand));
}

.code-copy-btn.copied {
    background: hsl(var(--st-success) / 0.1);
    border-color: hsl(var(--st-success));
    color: hsl(var(--st-success));
}

.code-block pre {
    margin: 0;
    padding: 8px;
    background: transparent !important;
    border: none;
    border-radius: 0;
    overflow-x: auto;
}

.code-block pre code {
    background: transparent !important;
    padding: 0;
    border-radius: 0;
    font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
    font-size: 12px;
    line-height: 1.5;
}

/* Highlight.js 오버라이드 */
.code-block pre code.hljs {
    background: transparent !important;
}

.code-block pre code.language-python {
    background: transparent !important;
}

/* 인라인 코드 스타일 오버라이드 */
.html-content code,
.file-summary-content code {
    background-color: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 0.125rem 0.25rem;
    font-family: 'Courier New', monospace;
    font-size: 0.875rem;
}

/* coach-content-text code는 Quill 에디터와 동일한 스타일 유지 (배경색, 테두리 포함) */