/*
 * sb_summernote.css
 * --------------------------------------------------------------------------
 * Summernote 위지윅 에디터 커스터마이징(프로젝트 공용).
 * wysiwyg.html 의 summernote 분기에서 summernote-lite.min.css 뒤에 로드한다.
 * (원본 CSS 보다 나중에 로드되므로 동일 특이도로도 덮어쓴다 → 컨테이너 접두 불필요.)
 *
 * 색상은 페이지 테마 토큰(var(--color-*))을 사용한다. 토큰이 :root 등 상위에
 * 정의된 페이지(프론트 news 관리 / board 작성 등)에서는 라이트·다크가 자동 대응되고,
 * 토큰이 없는 페이지(admin 등)에서는 선언이 무시되어 summernote 기본색이 유지된다.
 * 테두리 토큰은 앱마다 이름이 달라(--color-border / --border-color) 양쪽을 모두 받는다.
 * ※ SmartEditor2 는 편집영역이 iframe 이라 이 CSS 로 제어 불가(스킨 측 별도 처리).
 */


/* ── 0. 본문 기본 글꼴(Pretendard) 로드 ──
   편집영역 본문 글꼴을 프론트(base.css)와 동일한 Pretendard 로 통일한다.
   프론트가 이미 로드한 페이지에서는 브라우저가 중복 요청을 캐시로 처리하고,
   admin 등 미로드 페이지에서는 이 @import 로 폰트가 확보된다.
   ※ CSS @import 는 반드시 다른 규칙보다 앞서야 하므로 파일 최상단(주석만 허용)에 둔다.
   Noto Sans KR 은 기본값은 아니지만 글꼴 드롭다운 선택 시 렌더되도록 함께 로드한다
   (Google Fonts — admin/base.html·account 에서 이미 쓰는 방식). */
@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard-dynamic-subset.css');
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@400;500;700&display=swap');


/* ── 1. 부트스트랩 dropdown-toggle::after 중복 caret 제거 ──
   Bootstrap 이 함께 로드되는 페이지(admin 등)에서는 .dropdown-toggle::after
   가상요소가 삼각형을 덧붙여, summernote 자체 caret(.note-icon-caret)과
   중복 표시된다. 에디터 영역 내 toggle 버튼의 ::after 를 제거한다. */
.note-editor .note-btn.dropdown-toggle::after {
    content: none;
}


/* ── 2. 테마(라이트/다크) 색상 보정 ──
   summernote-lite.css 가 편집영역 글자색을 #000, 툴바를 밝은색으로 하드코딩해
   다크 배경에서 보이지 않는다. 페이지 토큰으로 덮어쓴다.
   (기존 news_manage.css / board.css 에 분산돼 있던 규칙을 여기로 통합) */

/* 에디터 프레임 */
.note-editor.note-frame {
    color: var(--color-text);
    border-color: var(--color-border, var(--border-color));
    background: var(--color-surface);
}

/* 편집 영역 */
.note-editor .note-editing-area,
.note-editor .note-editing-area .note-editable {
    background: var(--color-surface);
    color: var(--color-text);
    /* 본문 기본 글꼴 — 프론트(base.css body)와 동일하게 Pretendard 우선 */
    font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
}
.note-editor .note-editing-area .note-editable a { color: var(--color-primary); }
.note-editor .note-editing-area .note-editable[contenteditable="false"] {
    background: var(--color-surface-2);
}
.note-editor .note-placeholder { color: var(--color-muted); }

/* 코드 보기 */
.note-editor .note-editing-area .note-codable {
    background: var(--color-surface-2);
    color: var(--color-text-dim);
}

/* 도구 모음 */
.note-editor .note-toolbar {
    background: var(--color-surface-2);
    color: var(--color-text);
    border-bottom: 1px solid var(--color-border, var(--border-color));
}

/* 도구 버튼 */
.note-editor .note-btn {
    background: var(--color-surface);
    color: var(--color-text);
    border-color: var(--color-border, var(--border-color));
}
.note-editor .note-btn:hover,
.note-editor .note-btn:focus,
.note-editor .note-btn.active {
    background: var(--color-surface-2);
    color: var(--color-text);
    border-color: var(--color-primary);
}

/* 상태바 / 리사이즈바 */
.note-editor .note-statusbar,
.note-editor .note-statusbar .note-resizebar {
    background: var(--color-surface-2);
    border-top: 1px solid var(--color-border, var(--border-color));
}
.note-editor .note-status-output {
    color: var(--color-text-dim);
    background: var(--color-surface-2);
}

/* 드롭다운 메뉴(글꼴/글자크기/색상 등) */
.note-editor .note-dropdown-menu {
    background: var(--color-surface);
    color: var(--color-text);
    border-color: var(--color-border, var(--border-color));
}
/* summernote-lite 가 .note-dropdown-item 에 color:#000 을 직접 지정해 부모의
   color 상속을 막는다. 항목 자체에 명시적으로 테마 색을 부여(다크에서 안 보이는 문제). */
.note-editor .note-dropdown-menu .note-dropdown-item,
.note-editor .note-dropdown-menu a {
    color: var(--color-text);
}
.note-editor .note-dropdown-item:hover,
.note-editor .note-dropdown-menu a:hover {
    background: var(--color-surface-2);
    color: var(--color-text);
}

/* 모달(링크/이미지/동영상 삽입 등) — 기본 dialogsInBody:false 라 .note-editor 내부에 위치 */
.note-editor .note-modal .note-modal-content {
    background: var(--color-surface);
    color: var(--color-text);
    border-color: var(--color-border, var(--border-color));
}
.note-editor .note-modal .note-modal-header,
.note-editor .note-modal .note-modal-footer {
    background: var(--color-surface-2);
    border-color: var(--color-border, var(--border-color));
}
.note-editor .note-modal .note-modal-title { color: var(--color-text); }
.note-editor .note-modal .note-form-label { color: var(--color-text-dim); }
.note-editor .note-modal .note-input,
.note-editor .note-modal .note-form-control,
.note-editor .note-modal .form-control,
.note-editor .note-modal input[type="text"],
.note-editor .note-modal input[type="number"] {
    background: var(--color-bg);
    color: var(--color-text);
    border: 1px solid var(--color-border, var(--border-color));
}
.note-editor .note-modal .note-input::placeholder,
.note-editor .note-modal .form-control::placeholder { color: var(--color-muted); }