/**
 * Quill 콘텐츠 뷰어 스타일 (사용자 읽기 전용)
 *
 * Quill 에디터로 작성된 HTML 콘텐츠를 사용자 페이지에서 표시할 때 사용.
 * 전역 CSS 리셋(* { margin:0; padding:0 })의 영향을 받지 않도록
 * 모든 HTML 요소에 기본 스타일을 복원합니다.
 *
 * 사용법: Quill 콘텐츠를 감싸는 컨테이너에 .ql-viewer 클래스를 추가
 *   <div class="ql-viewer">{{ quill content }}</div>
 *
 * 또는 기존 컨테이너 클래스와 함께 사용:
 *   <div class="notice-detail-body ql-viewer">{{ content }}</div>
 */

/* ============================================
   Quill 에디터 전용 UI 숨김
   ============================================ */

.ql-viewer .ql-table-delete-btn {
    display: none !important;
}

/* 편집 완전 차단 (contenteditable 잔여 대응) */
.ql-viewer [contenteditable],
.ql-viewer td,
.ql-viewer th {
    -webkit-user-modify: read-only !important;
    -moz-user-modify: read-only !important;
    cursor: default;
    outline: none;
    caret-color: transparent;
    pointer-events: auto;
}

/* ============================================
   텍스트 기본 스타일 복원
   ============================================ */

.ql-viewer {
    font-size: 1rem;
    line-height: 1.8;
    color: #1f2937;
    word-break: break-word;
    overflow-wrap: break-word;
}

.ql-viewer p {
    margin-bottom: 0.75em;
}

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

/* 제목 */
.ql-viewer h1 {
    font-size: 2em;
    font-weight: 700;
    margin: 1em 0 0.5em;
    line-height: 1.3;
}

.ql-viewer h2 {
    font-size: 1.5em;
    font-weight: 700;
    margin: 0.8em 0 0.4em;
    line-height: 1.35;
}

.ql-viewer h3 {
    font-size: 1.25em;
    font-weight: 700;
    margin: 0.6em 0 0.3em;
    line-height: 1.4;
}

.ql-viewer h4 {
    font-size: 1.1em;
    font-weight: 700;
    margin: 0.5em 0 0.25em;
    line-height: 1.4;
}

/* 리스트 */
.ql-viewer ul,
.ql-viewer ol {
    margin: 0.5em 0;
    padding-left: 1.5em;
}

.ql-viewer li {
    margin-bottom: 0.25em;
}

.ql-viewer ul li {
    list-style-type: disc;
}

.ql-viewer ol li {
    list-style-type: decimal;
}

/* Quill 들여쓰기 리스트 */
.ql-viewer .ql-indent-1 { padding-left: 3em; }
.ql-viewer .ql-indent-2 { padding-left: 6em; }
.ql-viewer .ql-indent-3 { padding-left: 9em; }

/* 인용문 */
.ql-viewer blockquote {
    border-left: 4px solid #d1d5db;
    padding: 0.5em 1em;
    margin: 0.75em 0;
    color: #6b7280;
    background: #f9fafb;
}

/* 코드 */
.ql-viewer pre {
    background: #1f2937;
    color: #e5e7eb;
    padding: 1em;
    border-radius: 6px;
    overflow-x: auto;
    font-family: 'Consolas', 'Monaco', monospace;
    font-size: 0.9em;
    margin: 0.75em 0;
    line-height: 1.5;
}

.ql-viewer code {
    background: #f3f4f6;
    padding: 0.15em 0.4em;
    border-radius: 3px;
    font-family: 'Consolas', 'Monaco', monospace;
    font-size: 0.9em;
}

.ql-viewer pre code {
    background: none;
    padding: 0;
}

/* 링크 */
.ql-viewer a {
    color: #2563eb;
    text-decoration: underline;
}

.ql-viewer a:hover {
    color: #1d4ed8;
}

/* 텍스트 서식 */
.ql-viewer strong {
    font-weight: 700;
}

.ql-viewer em {
    font-style: italic;
}

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

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

.ql-viewer sub {
    vertical-align: sub;
    font-size: 0.75em;
}

.ql-viewer sup {
    vertical-align: super;
    font-size: 0.75em;
}

/* 구분선 */
.ql-viewer hr {
    border: none;
    border-top: 1px solid #d1d5db;
    margin: 1.5em 0;
}

/* ============================================
   이미지
   ============================================ */

.ql-viewer img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0.75em 0;
    border-radius: 6px;
}

/* Quill 이미지 정렬 */
.ql-viewer .ql-align-center {
    text-align: center;
}

.ql-viewer .ql-align-right {
    text-align: right;
}

.ql-viewer .ql-align-justify {
    text-align: justify;
}

/* ============================================
   테이블 (핵심 - CSS 격리)
   ============================================ */

.ql-viewer .ql-table-embed {
    position: relative;
    margin: 1em 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.ql-viewer .ql-table-embed table,
.ql-viewer table {
    width: 100%;
    border-collapse: collapse;
    border: 1px solid #d1d5db;
    font-size: 0.95em;
    line-height: 1.6;
    table-layout: auto;
}

.ql-viewer .ql-table-embed th,
.ql-viewer .ql-table-embed td,
.ql-viewer table th,
.ql-viewer table td {
    border: 1px solid #d1d5db;
    padding: 10px 14px;
    text-align: left;
    vertical-align: top;
    color: #374151;
    cursor: default;
    -webkit-user-select: text;
    user-select: text;
}

.ql-viewer .ql-table-embed th,
.ql-viewer table th {
    background: #f3f4f6;
    font-weight: 700;
}

.ql-viewer .ql-table-embed td,
.ql-viewer table td {
    background: #ffffff;
}

/* 빈 셀 최소 높이 */
.ql-viewer .ql-table-embed td:empty::after,
.ql-viewer .ql-table-embed th:empty::after {
    content: '\00a0';
}

/* ============================================
   Quill 폰트 크기 클래스
   ============================================ */

.ql-viewer .ql-size-small { font-size: 0.75em; }
.ql-viewer .ql-size-large { font-size: 1.5em; }
.ql-viewer .ql-size-huge { font-size: 2.5em; }

/* ============================================
   Quill 폰트 패밀리 클래스
   ============================================ */

.ql-viewer .ql-font-serif { font-family: Georgia, 'Times New Roman', serif; }
.ql-viewer .ql-font-monospace { font-family: 'Consolas', 'Monaco', monospace; }

/* ============================================
   반응형
   ============================================ */

@media (max-width: 768px) {
    .ql-viewer {
        font-size: 0.95rem;
        line-height: 1.7;
    }

    .ql-viewer .ql-table-embed,
    .ql-viewer table {
        font-size: 0.85em;
    }

    .ql-viewer .ql-table-embed th,
    .ql-viewer .ql-table-embed td,
    .ql-viewer table th,
    .ql-viewer table td {
        padding: 8px 10px;
    }

    .ql-viewer img {
        border-radius: 4px;
    }
}