@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@400;500;700&display=swap');

/* ============================================================
 * /css/admin_new/notice-content.css
 *
 * 어드민 Summernote 에디터(.notice-body)와 front-end 보기 페이지(.notice-view-body)가
 * 공유하는 본문 typography & layout.
 *
 * → typography/layout 100% 동일 (어드민에서 쓰는 그대로 사이트에 게시됨)
 * → 색상만 다름 (admin: 다크 테마, front: 라이트 테마)
 * ============================================================ */


/* ============================================================
 * 1. 공유 typography & layout (admin + front 동일)
 * ============================================================ */

.notice-body,
.notice-view-body {
    font-family: 'Noto Sans KR', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 16px;
    line-height: 1.9;
    font-weight: 400;
    letter-spacing: -0.2px;
    word-break: break-word;
}

/* 단락 */
.notice-body p,
.notice-view-body p {
    margin: 0 0 10px 0;
}

/* 이미지 */
.notice-body img,
.notice-view-body img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 15px auto;
    border-radius: 4px;
}

/* 표 - 구조 */
.notice-body table,
.notice-view-body table {
    width: 100%;
    border-collapse: collapse;
    margin: 15px 0;
    font-size: 15px;
    table-layout: fixed;
    max-width: 100%;
}

.notice-body table th,
.notice-body table td,
.notice-view-body table th,
.notice-view-body table td {
    padding: 10px 12px;
    text-align: left;
    vertical-align: middle;
    word-wrap: break-word;
    min-width: 40px;
}

.notice-body table th,
.notice-view-body table th {
    font-weight: 700;
}

/* 표 내 이미지 */
.notice-body table img,
.notice-view-body table img {
    max-width: 100% !important;
    height: auto !important;
}

/* 리스트 */
.notice-body ul,
.notice-body ol,
.notice-view-body ul,
.notice-view-body ol {
    padding-left: 25px;
    margin: 10px 0;
}

.notice-body ul li,
.notice-view-body ul li {
    list-style: disc;
}

.notice-body ol li,
.notice-view-body ol li {
    list-style: decimal;
}

.notice-body li,
.notice-view-body li {
    margin-bottom: 5px;
    line-height: 1.8;
}

/* 링크 - 밑줄 공통 */
.notice-body a,
.notice-view-body a {
    text-decoration: underline;
}


/* ============================================================
 * 2. 색상 - admin 다크 테마
 * ============================================================ */

.notice-body {
    color: #e5e7eb;
}

.notice-body table th,
.notice-body table td {
    border: 1px solid #4b5563;
    color: #e5e7eb;
}

.notice-body table th {
    background: #2b303a;
}

.notice-body a {
    color: #60a5fa;
}

.notice-body a:hover {
    color: #93c5fd;
}


/* ============================================================
 * 3. 색상 - front 라이트 테마
 * ============================================================ */

.notice-view-body {
    color: #333;
}

.notice-view-body table th,
.notice-view-body table td {
    border: 1px solid #ddd;
    color: #333;
    background: #ffffff;
}

.notice-view-body table th {
    background: #f5f1ed;
    color: #222;
}

.notice-view-body a {
    color: #4a6fa5;
}

.notice-view-body a:hover {
    color: #fb7730;
}


/* ============================================================
 * 4. 안전망 - 흰색 텍스트 보정 (front)
 *    어두운 배경에 쓰던 흰글자가 라이트 배경에 와도 안 보이지 않게
 * ============================================================ */

.notice-view-body font[color="#ffffff"],
.notice-view-body font[color="#FFFFFF"],
.notice-view-body font[color="white"],
.notice-view-body font[color="#fff"],
.notice-view-body font[color="#FFF"] {
    color: #333 !important;
}

.notice-view-body [style*="color: #ffffff"],
.notice-view-body [style*="color:#ffffff"],
.notice-view-body [style*="color: #FFFFFF"],
.notice-view-body [style*="color:#FFFFFF"],
.notice-view-body [style*="color: white"],
.notice-view-body [style*="color:white"],
.notice-view-body [style*="color: #fff"],
.notice-view-body [style*="color:#fff"] {
    color: #333 !important;
}


/* ============================================================
 * 5. 잔재물 처리 (양쪽 동일)
 * ============================================================ */

/* colResizable 라이브러리 잔재물 - 보이지 않게 */
.notice-body .JCLRgrips,
.notice-body .JCLRgrip,
.notice-body .JColResizer,
.notice-view-body .JCLRgrips,
.notice-view-body .JCLRgrip,
.notice-view-body .JColResizer {
    display: none !important;
}

/* SmartEditor 잔재물 */
.notice-body .se-drop-indicator,
.notice-body .se-section:empty,
.notice-view-body .se-drop-indicator,
.notice-view-body .se-section:empty {
    display: none !important;
}

/* admin colResizable 세로 구분선 (admin 에디터 안에서는 보이게) */
.note-editor .JCLRgrips .JCLRgripContainer .JCLRgrip .JCLRdragLine {
    background: #3b82f6 !important;
    width: 2px !important;
}

.note-editor .JCLRgrips .JCLRgripContainer .JCLRgrip:hover {
    cursor: col-resize;
}


/* ============================================================
 * 6. 모바일 대응 (front)
 *    .notice-view-body 만 - admin 에디터는 PC 기준이므로 미적용
 * ============================================================ */
@media screen and (max-width: 768px) {
    .notice-view-body {
        font-size: 15px;
        line-height: 1.8;
    }
    .notice-view-body table {
        font-size: 13px;
        display: block;
        overflow-x: auto;
        white-space: nowrap;
    }
}