/**
 * Editor Content Styles (editor-content.css)
 *
 * Summernote 에디터로 작성된 HTML 콘텐츠의 공통 스타일
 * 관리자포탈/개발자포탈 양쪽에서 동일하게 사용
 *
 * 사용법:
 * - 관리자포탈: Summernote .note-editable에 .editor-content 클래스 추가
 * - 개발자포탈: 콘텐츠 wrapper에 .editor-content 클래스 추가
 *
 * @version 1.0.0
 * @date 2025-12-30
 */

/* ==========================================================================
   CSS Reset + 기본 설정
   ========================================================================== */

.editor-content {
    all: revert;
    font-family: 'Noto Sans KR', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
    font-size: 16px !important;
    font-weight: 400 !important;
    line-height: 1.8 !important;
    color: #1A1A2E !important;
    word-wrap: break-word;
    text-align: left !important;
}

/* ==========================================================================
   헤딩 (Headings)
   ========================================================================== */

.editor-content h1 {
    font-size: 20px !important;
    font-weight: 700 !important;
    margin: 32px 0 16px !important;
    line-height: 1.4 !important;
    color: #1A1A2E !important;
}

.editor-content h1:first-child {
    margin-top: 0 !important;
}

.editor-content h2 {
    font-size: 18px !important;
    font-weight: 700 !important;
    margin: 24px 0 8px !important;
    line-height: 1.4 !important;
    color: #1A1A2E !important;
}

.editor-content h3 {
    font-size: 16px !important;
    font-weight: 600 !important;
    margin: 16px 0 8px !important;
    line-height: 1.4 !important;
    color: #1A1A2E !important;
}

.editor-content h4,
.editor-content h5,
.editor-content h6 {
    font-size: 16px !important;
    font-weight: 600 !important;
    margin: 16px 0 8px !important;
    line-height: 1.4 !important;
    color: #1A1A2E !important;
}

/* ==========================================================================
   단락 (Paragraphs)
   ========================================================================== */

.editor-content p {
    margin-bottom: 16px !important;
    line-height: 1.8 !important;
    font-size: 16px !important;
}

.editor-content p:last-child {
    margin-bottom: 0 !important;
}

/* ==========================================================================
   리스트 (Lists) - 글로벌 reset 대응
   ========================================================================== */

.editor-content ul {
    list-style-type: disc !important;
    padding-left: 32px !important;
    margin: 16px 0 !important;
}

.editor-content ol {
    list-style-type: decimal !important;
    padding-left: 32px !important;
    margin: 16px 0 !important;
}

.editor-content li {
    margin-bottom: 8px !important;
    line-height: 1.8 !important;
    font-size: 16px !important;
}

.editor-content li:last-child {
    margin-bottom: 0 !important;
}

/* 중첩 리스트 */
.editor-content ul ul {
    list-style-type: circle !important;
    margin: 8px 0 !important;
}

.editor-content ul ul ul {
    list-style-type: square !important;
}

.editor-content ol ol {
    list-style-type: lower-alpha !important;
    margin: 8px 0 !important;
}

.editor-content ol ol ol {
    list-style-type: lower-roman !important;
}

/* ==========================================================================
   테이블 (Tables)
   ========================================================================== */

.editor-content table {
    width: 100% !important;
    border-collapse: collapse !important;
    margin: 24px 0 !important;
    border: 1px solid #E2E8F0 !important;
    border-radius: 8px !important;
    overflow: hidden !important;
    font-size: 14px !important;
}

.editor-content th,
.editor-content td {
    border: 1px solid #E2E8F0 !important;
    padding: 8px 16px !important;
    text-align: left !important;
    vertical-align: top !important;
}

.editor-content th {
    background: #EFF6FF !important;
    font-weight: 600 !important;
    color: #1A1A2E !important;
}

.editor-content tr:hover {
    background: #F8FAFC !important;
}

/* ==========================================================================
   링크 (Links)
   ========================================================================== */

.editor-content a {
    color: #0049b4 !important;
    text-decoration: underline !important;
    transition: color 0.3s ease !important;
}

.editor-content a:hover {
    color: #003080 !important;
}

/* ==========================================================================
   인용문 (Blockquote)
   ========================================================================== */

.editor-content blockquote {
    border-left: 4px solid #0049b4 !important;
    padding: 16px 24px !important;
    margin: 24px 0 !important;
    background: #F8FAFC !important;
    font-style: italic !important;
    color: #64748B !important;
    border-radius: 0 8px 8px 0 !important;
}

.editor-content blockquote p {
    margin-bottom: 0 !important;
}

/* ==========================================================================
   이미지 (Images)
   ========================================================================== */

.editor-content img {
    max-width: 100% !important;
    height: auto !important;
    border-radius: 8px !important;
    margin-top: 16px !important;
    margin-bottom: 16px !important;
    /* margin-left, margin-right는 인라인 스타일로 정렬 제어 */
}

/* ==========================================================================
   코드 (Code)
   ========================================================================== */

.editor-content code {
    background: #F8FAFC !important;
    padding: 2px 6px !important;
    border-radius: 4px !important;
    font-family: 'Fira Code', 'Courier New', monospace !important;
    font-size: 0.9em !important;
    color: #0049b4 !important;
}

.editor-content pre {
    background: #F8FAFC !important;
    border: 1px solid #E2E8F0 !important;
    border-radius: 8px !important;
    padding: 16px !important;
    overflow-x: auto !important;
    margin: 16px 0 !important;
}

.editor-content pre code {
    background: transparent !important;
    padding: 0 !important;
    color: #1A1A2E !important;
}

/* ==========================================================================
   구분선 (Horizontal Rule)
   ========================================================================== */

.editor-content hr {
    border: none !important;
    border-top: 1px solid #E2E8F0 !important;
    margin: 32px 0 !important;
}

/* ==========================================================================
   텍스트 강조 (Text Emphasis)
   ========================================================================== */

.editor-content strong,
.editor-content b {
    font-weight: 700 !important;
}

.editor-content em,
.editor-content i {
    font-style: italic !important;
}

.editor-content u {
    text-decoration: underline !important;
}

.editor-content s,
.editor-content strike,
.editor-content del {
    text-decoration: line-through !important;
}

.editor-content mark {
    background-color: #FEF3C7 !important;
    padding: 0 2px !important;
}

.editor-content sub {
    vertical-align: sub !important;
    font-size: 0.8em !important;
}

.editor-content sup {
    vertical-align: super !important;
    font-size: 0.8em !important;
}

/* ==========================================================================
   반응형 (Responsive)
   ========================================================================== */

@media (max-width: 768px) {
    .editor-content {
        font-size: 14px !important;
    }

    .editor-content h1 {
        font-size: 18px !important;
    }

    .editor-content h2 {
        font-size: 16px !important;
    }

    .editor-content h3,
    .editor-content h4,
    .editor-content h5,
    .editor-content h6 {
        font-size: 14px !important;
    }

    .editor-content p,
    .editor-content li {
        font-size: 14px !important;
    }

    .editor-content table {
        font-size: 12px !important;
    }

    .editor-content th,
    .editor-content td {
        padding: 4px 8px !important;
    }

    .editor-content ul,
    .editor-content ol {
        padding-left: 24px !important;
    }

    .editor-content blockquote {
        padding: 8px 16px !important;
    }

    .editor-content pre {
        padding: 8px !important;
    }
}

/* ==========================================================================
   Summernote 이미지 업로드 UI
   ========================================================================== */

/* 이미지 업로드 로딩 인디케이터 */
.image-upload-loading {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(0, 73, 180, 0.9);
    color: #fff;
    padding: 12px 24px;
    border-radius: 8px;
    font-size: 14px;
    z-index: 1000;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    animation: pulse 1.5s infinite;
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}

/* 이미지 다이얼로그 업로드 안내 */
.image-upload-guide {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    background: #EFF6FF;
    border: 1px solid #BFDBFE;
    border-radius: 8px;
    margin-bottom: 16px;
    font-size: 13px;
    color: #1E40AF;
}

.image-upload-guide .material-icons {
    font-size: 18px;
    color: #3B82F6;
}

.image-upload-guide strong {
    font-weight: 600;
}