/* 리치 텍스트 뷰어 스타일 */
.rich-text-viewer {
    width: 100%;
    min-height: 200px;
    border: none;
    background: transparent;
}

.viewer-content {
    width: 100%;
    min-height: auto;
    padding: 0 !important;
    background: transparent;
    font-family: 'Pretendard', sans-serif !important;
    font-size: 16px !important;
    line-height: 1.6 !important;
    color: #333 !important;
}

/* Tiptap 렌더링된 내용 스타일 */
/* reset.css의 영향을 받지 않도록 !important 사용 */
.viewer-content .tiptap-paragraph {
    margin: 0 0 16px 0 !important;
    padding: 0 !important;
    line-height: 1.6 !important;
    color: #333 !important;
    font-size: 16px !important;
    font-family: 'Pretendard', sans-serif !important;
}

.viewer-content .tiptap-paragraph:last-child {
    margin-bottom: 0 !important;
}

.viewer-content .tiptap-heading {
    margin: 24px 0 16px 0 !important;
    padding: 0 !important;
    font-weight: 600 !important;
    color: #121212 !important;
    font-family: 'Pretendard', sans-serif !important;
}

.viewer-content .tiptap-heading:first-child {
    margin-top: 0 !important;
}

/* h1, h2, h3 등 실제 태그에 대한 스타일 추가 (reset.css 오버라이드) */
/* 공통 스타일은 rich_text_editor.css에서 가져옴 */

.viewer-content img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    margin: 8px 0;
    display: block;
}

/* width 속성이 명시적으로 설정된 이미지는 JavaScript에서 max-width를 해당 값으로 설정하므로 
   CSS에서는 기본 반응형만 적용 (JavaScript가 !important로 우선 적용됨) */

/* 이미지 정렬 스타일 - rich_text_editor.html과 동일하게 적용 */
.viewer-content img[style*="text-align: left"] {
    display: block !important;
    margin-left: 0 !important;
    margin-right: auto !important;
    margin-top: 1em !important;
    margin-bottom: 1em !important;
}

.viewer-content img[style*="text-align: center"] {
    display: block !important;
    margin-left: auto !important;
    margin-right: auto !important;
    margin-top: 1em !important;
    margin-bottom: 1em !important;
}

.viewer-content img[style*="text-align: right"] {
    display: block !important;
    margin-left: auto !important;
    margin-right: 0 !important;
    margin-top: 1em !important;
    margin-bottom: 1em !important;
}

.viewer-content ul,
.viewer-content ol {
    margin: 0 0 16px 0 !important;
    padding: 0 0 0 24px !important;
    list-style: disc !important;
}

.viewer-content ol {
    list-style: decimal !important;
}

.viewer-content li {
    margin: 4px 0 !important;
    padding: 0 !important;
    line-height: 1.6 !important;
    list-style: inherit !important;
}

/* p 태그에 대한 스타일 추가 (reset.css 오버라이드) */
.viewer-content p {
    margin: 0.75em 0 !important;
    padding: 0 !important;
    line-height: 1.6 !important;
    color: #333 !important;
    font-size: 16px !important;
    font-family: 'Pretendard', sans-serif !important;
}

.viewer-content a {
    color: #03C124 !important;
    text-decoration: none !important;
}

.viewer-content a:hover {
    text-decoration: underline;
}

.viewer-content strong,
.viewer-content b {
    font-weight: 600;
}

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

.viewer-content u {
    text-decoration: underline;
}

.viewer-content s {
    text-decoration: line-through;
}

/* 텍스트 정렬 */
.viewer-content [style*="text-align: center"] {
    text-align: center;
}

.viewer-content [style*="text-align: right"] {
    text-align: right;
}

.viewer-content [style*="text-align: justify"] {
    text-align: justify;
}

/* 빈 내용 처리 */
.viewer-content:empty::before {
    content: "내용이 없습니다.";
    color: #8F8F8F;
    font-style: italic;
}

/* 텍스트 색상 스타일 - Tiptap Color extension */
/* 인라인 스타일로 적용된 색상은 그대로 표시됨 (별도 CSS 불필요) */

/* 형광펜 스타일 - Tiptap Highlight extension */
.viewer-content mark {
    padding: 2px 0 !important;
    border-radius: 2px !important;
    /* 인라인 스타일의 background-color가 우선 적용됨 */
}

/* 형광펜이 없는 경우 기본 스타일 제거 */
.viewer-content mark:not([style*="background-color"]) {
    background-color: transparent !important;
}

/* 작업 목록 스타일 - Tiptap TaskList extension */
.viewer-content ul[data-type="taskList"] {
    list-style: none !important;
    padding-left: 0 !important;
}

.viewer-content ul[data-type="taskList"] li {
    display: flex !important;
    align-items: flex-start !important;
    margin: 4px 0 !important;
}

.viewer-content ul[data-type="taskList"] li > label {
    display: flex !important;
    align-items: center !important;
    margin-right: 8px !important;
    cursor: pointer !important;
}

.viewer-content ul[data-type="taskList"] li > label > input[type="checkbox"] {
    margin: 0 !important;
    cursor: pointer !important;
    width: 16px !important;
    height: 16px !important;
}

.viewer-content ul[data-type="taskList"] li[data-checked="true"] {
    opacity: 0.6 !important;
    text-decoration: line-through !important;
}

/* 인용구 스타일 */
.viewer-content blockquote {
    border-left: 4px solid #e5e7eb !important;
    padding-left: 1em !important;
    margin: 1em 0 !important;
    font-style: italic !important;
    color: #6b7280 !important;
}

/* 구분선 스타일 */
.viewer-content hr {
    border: none !important;
    border-top: 2px solid var(--gray-300) !important;
    margin: 2em 0 !important;
}