.tiptap-toolbar, .table-floating-palette, #codeBlockFloatingPalette, #lawPalette, #drawingToolsPanel {
    max-height: 300px;
    opacity: 1;
    overflow: visible; 
    transition: max-height 0.2s ease, opacity 0.15s ease, padding 0.2s ease, margin 0.2s ease;
}
.tiptap-toolbar.collapsed, .table-floating-palette.collapsed, #codeBlockFloatingPalette.collapsed, #lawPalette.collapsed, #drawingToolsPanel.collapsed {
    max-height: 0 !important;
    opacity: 0 !important;
    overflow: hidden !important; 
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    border: none !important;
}
/* [수정] 이미지 위치/정렬 컨트롤 UI 숨기기 */
div[data-resize-image-ui="position-controller"] {
    display: none !important;
}

/* Tiptap 에디터 내부 테이블 스타일 설정 */
.tiptap-editable-content table {
    border-collapse: collapse;
    table-layout: fixed;
    width: 100%;
    margin: 0;
    overflow: hidden;
}

.tiptap-editable-content table td, 
.tiptap-editable-content table th {
    min-width: 1em;
    border: 1px solid #ced4da;
    padding: 6px 8px;
    vertical-align: middle; /* top 에서 middle로 변경 */
    box-sizing: border-box;
    position: relative;
}

.tiptap-editable-content table th {
    font-weight: bold;
    background-color: #f8f9fa;
    text-align: left;
}

.tiptap-editable-content table .selectedCell:after {
    z-index: 2;
    position: absolute;
    content: "";
    left: 0; right: 0; top: 0; bottom: 0;
    background: rgba(200, 200, 255, 0.4);
    pointer-events: none;
}

.tiptap-editable-content table .column-resize-handle {
    position: absolute;
    right: -2px;
    top: 0;
    bottom: -2px;
    width: 4px;
    background-color: #adf;
    pointer-events: none;
}

/* 표 내부의 문단 태그 마진 제거 */
.tiptap-editable-content table p {
    margin-top: 0;
    margin-bottom: 0;
}

/* --- 1. 할 일 목록(TaskList) 스타일 수정 --- */
/* ul 태그로 생성되는 task-list 기본 마커(점) 제거 및 들여쓰기 정렬 */
ul[data-type="taskList"] {
    list-style: none !important;
    padding-left: 0 !important;
    margin-left: 0 !important;
}

ul[data-type="taskList"] li[data-type="taskItem"] {
    display: flex !important;
    align-items: flex-start !important;
    margin-bottom: 4px;
    list-style-type: none !important;
}

/* 체크박스와 텍스트가 어긋나거나 줄바꿈되는 현상 방지 */
ul[data-type="taskList"] li[data-type="taskItem"] > label {
    display: inline-flex !important;
    align-items: center !important;
    margin-right: 8px !important;
    user-select: none;
    flex-shrink: 0;
}

ul[data-type="taskList"] li[data-type="taskItem"] > label input[type="checkbox"] {
    margin: 0 !important;
    cursor: pointer;
}

ul[data-type="taskList"] li[data-type="taskItem"] > div {
    flex: 1;
    word-break: break-all;
}

/* 하위 뎁스(들여쓰기된) 할 일 목록 간격 조정 */
ul[data-type="taskList"] ul[data-type="taskList"] {
    margin-top: 4px;
    padding-left: 20px !important;
}







/* --- Tiptap 뎁스별 번호 형식 및 완벽 정렬 커스텀 --- */

/* 1. ol 태그 자체의 전체 들여쓰기 공백 제거 (일반 텍스트에 영향 주지 않도록 함) */
.tiptap-editable-content ol {
    list-style-type: none !important;
    padding-left: 0 !important; 
    margin: 4px 0;
}

/* 2. 일반 본문(p 태그 등)은 들여쓰기 영향 받지 않도록 강제 초기화 */
.tiptap-editable-content p {
    padding-left: 0 !important;
    margin-left: 0 !important;
}

/* 모든 뎁스 공통 li 설정 */
.tiptap-editable-content ol li {
    display: block;
    position: relative;
    margin-bottom: 4px;
}

/* 공통: 핵심 정렬 로직 및 글자 굵기 보통 설정 */
.tiptap-editable-content ol li::before {
    position: absolute;
    right: calc(100% + 6px); /* 텍스트 시작점에서 정확히 6px 떨어진 곳에 번호 배치 */
    white-space: nowrap;    /* 번호가 줄바꿈되는 현상 방지 */
    font-weight: normal;    /* 다른 문자와 동일하게 보통 굵기로 설정 */
}

/* 상위 ol 마다 각 뎁스별 카운터 리셋 및 하위 리스트(ol ol)에만 들여쓰기 부여 */
/* --- Tiptap 뎁스별 카운터 및 들여쓰기 간격 수정 버전 --- */

.tiptap-editable-content ol { 
    counter-reset: depth1; 
    padding-left: 28px !important; /* 1단계부터 왼쪽 여백(들여쓰기) 적용 */
}
.tiptap-editable-content ol ol { 
    counter-reset: depth2; 
    padding-left: 28px !important; 
}
.tiptap-editable-content ol ol ol { 
    counter-reset: depth3; 
    padding-left: 28px !important; 
}
.tiptap-editable-content ol ol ol ol { 
    counter-reset: depth4; 
    padding-left: 28px !important; 
}
.tiptap-editable-content ol ol ol ol ol { 
    counter-reset: depth5; 
    padding-left: 28px !important; 
}
.tiptap-editable-content ol ol ol ol ol ol { 
    counter-reset: depth6; 
    padding-left: 28px !important; 
}
.tiptap-editable-content ol ol ol ol ol ol ol { 
    counter-reset: depth7; 
    padding-left: 28px !important; 
}
.tiptap-editable-content ol ol ol ol ol ol ol ol { 
    counter-reset: depth8; 
    padding-left: 28px !important; 
}

/* 1단계 뎁스: 1. 2. 3. */
.tiptap-editable-content ol > li::before {
    content: counter(depth1, decimal) ".";
    counter-increment: depth1;
}

/* 2단계 뎁스: (1) (2) (3) */
.tiptap-editable-content ol ol > li::before {
    content: "(" counter(depth2, decimal) ")";
    counter-increment: depth2;
}

/* 3단계 뎁스: 1) 2) 3) */
.tiptap-editable-content ol ol ol > li::before {
    content: counter(depth3, decimal) ")";
    counter-increment: depth3;
}

/* 4단계 뎁스: (a) (b) (c) */
.tiptap-editable-content ol ol ol ol > li::before {
    content: "(" counter(depth4, lower-alpha) ")";
    counter-increment: depth4;
}

/* 5단계 뎁스: a) b) c) */
.tiptap-editable-content ol ol ol ol ol > li::before {
    content: counter(depth5, lower-alpha) ")";
    counter-increment: depth5;
}

/* 6단계 뎁스: i. ii. iii. */
.tiptap-editable-content ol ol ol ol ol ol > li::before {
    content: counter(depth6, lower-roman) ".";
    counter-increment: depth6;
}

/* 7단계 뎁스: (i) (ii) (iii) */
.tiptap-editable-content ol ol ol ol ol ol ol > li::before {
    content: "(" counter(depth7, lower-roman) ")";
    counter-increment: depth7;
}

/* 8단계 뎁스: i) ii) iii) */
.tiptap-editable-content ol ol ol ol ol ol ol ol > li::before {
    content: counter(depth8, lower-roman) ")";
    counter-increment: depth8;
}




/* =========================
   Tiptap Editor Custom Styles (Updated)
   ========================= */
.tiptap-editor-viewport {
    overflow-y: auto;
    overflow-x: auto;
    background-color: #e9ecef; /* 에디터 바깥쪽 여백 배경 (회색 톤) */
    border: 1px solid #dee2e6;
    border-radius: 8px;
    padding: 30px 16px;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.04);
    height: calc(85vh - 135px) !important;
    /* min-height: 500px; */
    display: flex;
    flex-direction: column;
    align-items: center; /* 내부 A4 용지를 가로 중앙 정렬 */
}

.tiptap-zoom-wrapper {
    transform-origin: top center;
    width: 100%;
    display: flex;
    justify-content: center;
}

/* 툴바 미니멀 UI 다듬기 */
.tiptap-toolbar, .table-floating-palette {
    background-color: #ffffff !important;
    border: 1px solid #e9ecef !important;
    border-radius: 8px !important;
    padding: 8px !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.01);
}

.tiptap-toolbar .btn, .table-floating-palette .btn {
    border-color: #dee2e6;
    color: var(--text-primary);
    font-size: 13px;
    transition: all 0.2s ease;
}

.tiptap-toolbar .btn:hover, .table-floating-palette .btn:hover {
    background-color: #f1f3f5;
    border-color: #ced4da;
}

.tiptap-toolbar .form-select {
    border-color: #dee2e6;
    color: var(--text-primary);
    border-radius: 6px;
}

/* 형광펜 드롭다운 내 색상 그리드 디자인 */
.highlight-palette-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 6px;
    padding: 4px;
}
.highlight-color-chip {
    width: 24px;
    height: 24px;
    border-radius: 4px;
    border: 1px solid #ced4da;
    cursor: pointer;
    transition: transform 0.1s ease;
}
.highlight-color-chip:hover {
    transform: scale(1.15);
}

/* 실제 A4 용지 규격 및 인쇄 여백과 동일한 비율 적용 */
.tiptap-editable-content {
    width: 210mm !important;          /* A4 표준 너비 */
    min-height: 297mm !important;     /* A4 표준 최소 높이 */
    max-width: 100%;
    margin: 0 auto !important;
    padding: 15mm !important;         /* 인쇄 시 지정한 margin: 15mm와 동일하게 설정 */
    background-color: #ffffff !important; /* 종이 색상 흰색 */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12) !important; /* 종이 입체감 그림자 */
    border: 1px solid #ced4da !important;
    box-sizing: border-box;
}

.tiptap-editable-content:focus {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12) !important;
    outline: none !important;
}
/* Tiptap 인용구 디자인 스타일 */
.tiptap-editable-content blockquote {
    border-left: 4px solid #ced4da;
    margin: 1rem 0;
    padding-left: 1rem;
    color: #212529;
    /* font-style: italic; */
}

/* =========================================
   1. 에디터용 코드 블록 스타일 (.tiptap-editable-content)
   ========================================= */
.tiptap-editable-content pre,
.tiptap-editable-content code {
    font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace !important;
    font-size: 0.95rem !important;
    line-height: 1.5 !important;
}

.tiptap-editable-content pre {
    border-radius: 0.375rem;
    padding: 0.75rem 1rem;
    margin: 0.75rem 0;
    white-space: pre-wrap;
    word-break: break-all;
}

/* 번호 매기기(ol li) 내부에 들어간 코드 블록 들여쓰기 및 폭 보정 (에디터) */
.tiptap-editable-content ol li pre {
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100% !important;
    box-sizing: border-box;
}






/* Tiptap 에디터 포커스 시 생기는 기본 아웃라인/테두리 제거 */
.tiptap-editable-content:focus,
.tiptap-editable-content.ProseMirror-focused {
    outline: none !important;
    box-shadow: none !important;
}
.ProseMirror-focused {
    outline: none !important;
}

/* 마진바텀 */
.tiptap-editable-content p {
    margin-bottom: 0.5rem !important;
}

.tiptap-editable-content table p {
    margin-bottom: 0 !important;
    margin-top: 0 !important;
}



/* 법령 조문 블록 전체 기본 스타일 (테두리는 동적 인라인 스타일에 위임) */
div[data-type="law-article-block"] {
    position: relative;
    border-radius: 0.5rem;
    background-color: transparent !important;
    margin: 1.2rem 0;
    padding: 1rem 1.2rem;
    font-size: 0.9rem;
    /* max-width: 900px;  */
    width: 100%;
}

/* 우측 상단 '법령 조문' 뱃지 */
div[data-type="law-article-block"] > .law-badge {
    position: absolute;
    top: 10px;
    right: 12px;
    font-size: 11px;
    font-weight: 500;
    color: #64748b;
    background-color: #f1f5f9;
    padding: 2px 6px;
    border-radius: 4px;
    border: 1px solid #e2e8f0;
    pointer-events: none;
}

/* 첫 번째 단락(조문 제목) 스타일 - 중복 제거 및 정리 */
div[data-type="law-article-block"] > p:first-child {
    font-weight: 600;
    font-size: 0.92rem;
    color: #1e293b;
    border-bottom: 1px solid #edf2f7;
    padding-bottom: 0.5rem;
    margin-bottom: 0.6rem;
    padding-right: 60px;
}

/* 검색 결과 하이라이트 스타일 */
mark.search-result {
    background-color: #ff9;
    padding: 2px 0;
}
mark.search-result.current {
    background-color: #ff6b6b;
    color: #fff;
}


/* 부트스트랩 드롭다운 간섭을 완전히 배제한 커스텀 아이템 스타일 */
.custom-dropdown-item {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 4px 8px;
    border: none;
    background: transparent;
    color: inherit;
    text-align: left;
    font-size: 13px;
    border-radius: 4px;
}

/* 마우스 올리거나 클릭해도 스타일 변화 없음 */
.custom-dropdown-item:hover,
.custom-dropdown-item:focus,
.custom-dropdown-item:active {
    background-color: transparent !important;
    color: inherit !important;
}

.tiptap-editable-content mark {
    border-radius: 0.25rem; /* 원하는 곡률에 따라 0.2rem ~ 0.4rem 조절 가능 */
    padding: 0.1em 0.2em;   /* 상하좌우 미세한 여백을 주면 더 자연스럽습니다 */
}

/* 이미지 팔레트 */
.table-floating-palette.collapsed { display: none !important; }

/* [추가] A4 페이지 가이드라인 기능이 켜졌을 때 (.show-page-guide 클래스가 붙을 때) */
.tiptap-editable-content.show-page-guide {
    /* 
      A4 용지 한 페이지의 높이 계산:
      - A4 전체 높이: 297mm (약 1122px)
      - 상하 패딩(15mm + 15mm = 30mm, 약 113px)을 제외한 순수 콘텐츠 영역 높이 기준 또는 
        A4 전체 주기에 맞춰 선을 그어줍니다.
      - 보통 웹상에서 A4 한 페이지 주기를 1122px(또는 패딩 포함한 전체 높이)로 잡습니다.
    */
    background-image: repeating-linear-gradient(
        to bottom,
        transparent 0px,
        transparent 1050px,          /* 한 페이지 콘텐츠 영역 끝 지점 (조절 가능) */
        #cbd5e1 1050px,              /* 옅은 회색 구분선 시작 */
        #cbd5e1 1052px,              /* 구분선 두께 (2px) */
        transparent 1052px,
        transparent 1122px           /* 다음 A4 페이지가 시작되는 주기 (1122px) */
    ) !important;
    background-size: 100% 1122px;
    background-repeat: repeat-y;
}




/* 에디터 전체 화면 모드 스타일 */
.is-fullscreen {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    z-index: 99999 !important; /* Bootstrap 모달(기본 z-index: 1050)보다 훨씬 높게 설정 */
    background-color: #ffffff;
    padding: 20px !important;
    box-sizing: border-box !important;
    display: flex !important;
    flex-direction: column !important;
    overflow-y: auto !important;
}

/* 전체 화면일 때 내부 뷰포트가 남은 높이를 채우도록 설정 */
.is-fullscreen .tiptap-editor-viewport {
    flex: 1;
    max-height: none !important;
    height: auto !important;
}

/* 2. [추가] 다크모드이면서 전체 화면 모드일 때 뒷배경을 어둡게 고정 */
.is-fullscreen.dark-mode,
#nodeContentModal.dark-mode .is-fullscreen {
    background-color: #18181b !important; /* 모달 다크모드 배경색과 동일하게 맞춤 */
}










/* =========================================
   [최종 수정] 다크모드 (Dark Mode) 스타일 정의
   ========================================= */

/* 1. 에디터 뷰포트 (바깥쪽 회색 배경 영역) 다크모드 */
#nodeContentModal.dark-mode .tiptap-editor-viewport,
.is-fullscreen.dark-mode .tiptap-editor-viewport {
    background-color: #121212 !important;
    border-color: #27272a !important;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.4) !important;
}

/* 2. 실제 A4 용지 영역 다크모드 및 기본 글자색 지정 */
#nodeContentModal.dark-mode .tiptap-editable-content,
.is-fullscreen.dark-mode .tiptap-editable-content {
    background-color: #18181b !important; /* 어두운 종이 색상 (다크 그레이) */
    color: #f4f4f5 !important;           /* 기본 일반 텍스트 색상 */
    border-color: #27272a !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5) !important;
}

/* 3. 일반 본문 요소들의 기본 텍스트 색상 상속 (mark 내부 제외) */
#nodeContentModal.dark-mode .tiptap-editable-content p:not(:has(mark)),
#nodeContentModal.dark-mode .tiptap-editable-content li:not(:has(mark)),
.is-fullscreen.dark-mode .tiptap-editable-content p:not(:has(mark)),
.is-fullscreen.dark-mode .tiptap-editable-content li:not(:has(mark)) {
    color: inherit;
}

/* 
  [요청 반영 1] 형광펜(<mark>) 내부 글자색 처리
  - 다크모드 기본 흰색 글자 적용 대상에서 제외하고, 
    사용자가 지정한 인라인 글자색이나 기존 색상이 그대로 유지되도록 허용
*/
#nodeContentModal.dark-mode .tiptap-editable-content mark,
.is-fullscreen.dark-mode .tiptap-editable-content mark {
    color: unset !important; 
}

/* 사용자가 직접 지정한 인라인 글자색(style="color: ...")이 형광펜 내부든 일반 텍스트든 무조건 반영되도록 설정 */
#nodeContentModal.dark-mode .tiptap-editable-content [style*="color"],
.is-fullscreen.dark-mode .tiptap-editable-content [style*="color"] {
    /* 인라인으로 들어간 컬러 스타일은 브라우저 기본 우선순위에 따르도록 강제 색상 오버라이드 해제 */
}

/* 다크모드일 때 형광펜(<mark>) 태그와 그 내부의 모든 글자색을 #212529로 강제 고정 */
#nodeContentModal.dark-mode .tiptap-editable-content mark,
#nodeContentModal.dark-mode .tiptap-editable-content mark *,
.is-fullscreen.dark-mode .tiptap-editable-content mark,
.is-fullscreen.dark-mode .tiptap-editable-content mark * {
    color: #212529 !important;
}

/* 
  [요청 반영 2] 링크 버튼(btn-outline-dark) 다크모드 색상 반전 처리
*/
#nodeContentModal.dark-mode .tiptap-editable-content .btn-outline-dark,
.is-fullscreen.dark-mode .tiptap-editable-content .btn-outline-dark {
    color: #f4f4f5 !important;
    border-color: #71717a !important;
    background-color: transparent !important;
}

#nodeContentModal.dark-mode .tiptap-editable-content .btn-outline-dark:hover,
.is-fullscreen.dark-mode .tiptap-editable-content .btn-outline-dark:hover {
    background-color: #3f3f46 !important;
    color: #ffffff !important;
    border-color: #a1a1aa !important;
}

/* 일반 에디터 내부 A 태그 링크 색상 반전 */
#nodeContentModal.dark-mode .tiptap-editable-content a:not(.btn),
.is-fullscreen.dark-mode .tiptap-editable-content a:not(.btn) {
    color: #60a5fa !important;            
    text-decoration: underline;
}

/* 
  [요청 반영 3] 코드 블록(pre, code) 다크모드에서 살짝 더 밝은 톤으로 조정 
*/
#nodeContentModal.dark-mode .tiptap-editable-content pre,
#nodeContentModal.dark-mode .tiptap-editable-content code,
.is-fullscreen.dark-mode .tiptap-editable-content pre,
.is-fullscreen.dark-mode .tiptap-editable-content code {
    background-color: #27272a !important; 
    color: #e4e4e7 !important;            
}

/* 4. 테이블(표) 다크모드 대응 */
#nodeContentModal.dark-mode .tiptap-editable-content table td, 
#nodeContentModal.dark-mode .tiptap-editable-content table th,
.is-fullscreen.dark-mode .tiptap-editable-content table td, 
.is-fullscreen.dark-mode .tiptap-editable-content table th {
    border-color: #3f3f46 !important;
}

#nodeContentModal.dark-mode .tiptap-editable-content table th,
.is-fullscreen.dark-mode .tiptap-editable-content table th {
    background-color: #27272a !important;
    color: #f4f4f5 !important;
}

#nodeContentModal.dark-mode .tiptap-editable-content table .selectedCell:after,
.is-fullscreen.dark-mode .tiptap-editable-content table .selectedCell:after {
    background: rgba(99, 102, 241, 0.3) !important;
}

/* 5. 인용구(Blockquote) 다크모드 대응 */
#nodeContentModal.dark-mode .tiptap-editable-content blockquote,
.is-fullscreen.dark-mode .tiptap-editable-content blockquote {
    border-left-color: #52525b !important;
    color: #a1a1aa !important;
}

/* 6. 법령 조문 블록 다크모드 대응 */
#nodeContentModal.dark-mode div[data-type="law-article-block"] > .law-badge,
.is-fullscreen.dark-mode div[data-type="law-article-block"] > .law-badge {
    color: #a1a1aa !important;
    background-color: #27272a !important;
    border-color: #3f3f46 !important;
}

#nodeContentModal.dark-mode div[data-type="law-article-block"] > p:first-child,
.is-fullscreen.dark-mode div[data-type="law-article-block"] > p:first-child {
    color: #f4f4f5 !important;
    border-bottom-color: #3f3f46 !important;
}

/* 7. 상단 툴바 및 플로팅 팔레트 다크모드 대응 */
#nodeContentModal.dark-mode .tiptap-toolbar, 
#nodeContentModal.dark-mode .table-floating-palette,
.is-fullscreen.dark-mode .tiptap-toolbar, 
.is-fullscreen.dark-mode .table-floating-palette {
    background-color: #1e1e24 !important;
    border-color: #2d2d35 !important;
}

#nodeContentModal.dark-mode .tiptap-toolbar .btn, 
#nodeContentModal.dark-mode .table-floating-palette .btn,
.is-fullscreen.dark-mode .tiptap-toolbar .btn, 
.is-fullscreen.dark-mode .table-floating-palette .btn {
    border-color: #3f3f46;
    color: #e4e4e7;
}

#nodeContentModal.dark-mode .tiptap-toolbar .btn:hover, 
#nodeContentModal.dark-mode .table-floating-palette .btn:hover,
.is-fullscreen.dark-mode .tiptap-toolbar .btn:hover, 
.is-fullscreen.dark-mode .table-floating-palette .btn:hover {
    background-color: #27272a;
    border-color: #52525b;
}

/* 8. A4 페이지 가이드라인선 색상 어둡게 조정 */
#nodeContentModal.dark-mode .tiptap-editable-content.show-page-guide,
.is-fullscreen.dark-mode .tiptap-editable-content.show-page-guide {
    background-image: repeating-linear-gradient(
        to bottom,
        transparent 0px,
        transparent 1050px,
        #3f3f46 1050px,
        #3f3f46 1052px,
        transparent 1052px,
        transparent 1122px
    ) !important;
}


/* 1. 모달 전체 컨테이너 및 배경 다크모드 대응 */
#nodeContentModal.dark-mode .modal-content {
    background-color: #18181b !important;
    color: #f4f4f5 !important;
}

/* 2. 모달 헤더 다크모드 대응 (제목 입력창, 닫기 버튼 포함) */
/* #nodeContentModal.dark-mode .modal-header {
    background-color: #1e1e22 !important;
    border-bottom: 1px solid #27272a !important;
}

#nodeContentModal.dark-mode #modal_node_title_input {
    color: #f4f4f5 !important;
    border-bottom-color: #3f3f46 !important;
}
#nodeContentModal.dark-mode #modal_node_title_input::placeholder {
    color: #71717a !important;
}

#nodeContentModal.dark-mode .chatbot-close-btn {
    color: #a1a1aa !important;
}
#nodeContentModal.dark-mode .chatbot-close-btn:hover {
    color: #ffffff !important;
} */

/* 3. 모달 푸터 다크모드 대응 (취소/적용하기 버튼 포함) */
#nodeContentModal.dark-mode .modal-footer {
    background-color: #1e1e22 !important;
    border-top: 1px solid #27272a !important;
}

#nodeContentModal.dark-mode .modal-footer .btn-outline-secondary {
    color: #d4d4d8 !important;
    border-color: #52525b !important;
    background-color: transparent !important;
}
#nodeContentModal.dark-mode .modal-footer .btn-outline-secondary:hover {
    background-color: #27272a !important;
    color: #ffffff !important;
    border-color: #71717a !important;
}

#nodeContentModal.dark-mode .modal-footer .btn-dark {
    background-color: #f4f4f5 !important;
    color: #18181b !important;
    border-color: #f4f4f5 !important;
}
#nodeContentModal.dark-mode .modal-footer .btn-dark:hover {
    background-color: #ffffff !important;
    color: #000000 !important;
}   

/* =========================================
   [수정] 모달 바디 및 푸터 + 전체화면(is-fullscreen) 다크모드 공통 대응
   ========================================= */

/* 1. 모달 전체 컨테이너 및 배경 다크모드 대응 */
#nodeContentModal.dark-mode .modal-content,
.is-fullscreen.dark-mode .modal-content {
    background-color: #18181b !important;
    color: #f4f4f5 !important;
}

/* 2. 모달 푸터 다크모드 대응 */
#nodeContentModal.dark-mode .modal-footer,
.is-fullscreen.dark-mode .modal-footer {
    background-color: #1e1e22 !important;
    border-top: 1px solid #27272a !important;
}

#nodeContentModal.dark-mode .modal-footer .btn-outline-secondary,
.is-fullscreen.dark-mode .modal-footer .btn-outline-secondary {
    color: #d4d4d8 !important;
    border-color: #52525b !important;
    background-color: transparent !important;
}
#nodeContentModal.dark-mode .modal-footer .btn-outline-secondary:hover,
.is-fullscreen.dark-mode .modal-footer .btn-outline-secondary:hover {
    background-color: #27272a !important;
    color: #ffffff !important;
    border-color: #71717a !important;
}

#nodeContentModal.dark-mode .modal-footer .btn-dark,
.is-fullscreen.dark-mode .modal-footer .btn-dark {
    background-color: #f4f4f5 !important;
    color: #18181b !important;
    border-color: #f4f4f5 !important;
}
#nodeContentModal.dark-mode .modal-footer .btn-dark:hover,
.is-fullscreen.dark-mode .modal-footer .btn-dark:hover {
    background-color: #ffffff !important;
    color: #000000 !important;
}   

/* 3. 모달 바디 및 푸터 배경/글자색 반전 */
#nodeContentModal.dark-mode .modal-body,
#nodeContentModal.dark-mode .modal-footer,
.is-fullscreen.dark-mode .modal-body,
.is-fullscreen.dark-mode .modal-footer {
    background-color: #18181b !important;
    color: #f4f4f5 !important;
}

/* 4. 바디 및 푸터 내부에 있는 인풋, 텍스트에리어, 셀렉트박스 다크모드 적용 */
#nodeContentModal.dark-mode .modal-body input:not([type="checkbox"]):not([type="radio"]),
#nodeContentModal.dark-mode .modal-body textarea,
#nodeContentModal.dark-mode .modal-body select,
#nodeContentModal.dark-mode .modal-footer input:not([type="checkbox"]):not([type="radio"]),
#nodeContentModal.dark-mode .modal-footer textarea,
#nodeContentModal.dark-mode .modal-footer select,
.is-fullscreen.dark-mode .modal-body input:not([type="checkbox"]):not([type="radio"]),
.is-fullscreen.dark-mode .modal-body textarea,
.is-fullscreen.dark-mode .modal-body select,
.is-fullscreen.dark-mode .modal-footer input:not([type="checkbox"]):not([type="radio"]),
.is-fullscreen.dark-mode .modal-footer textarea,
.is-fullscreen.dark-mode .modal-footer select {
    background-color: #27272a !important;
    color: #f4f4f5 !important;
    border-color: #3f3f46 !important;
}

/* 포커스 상태일 때 */
#nodeContentModal.dark-mode .modal-body input:not([type="checkbox"]):not([type="radio"]):focus,
#nodeContentModal.dark-mode .modal-body textarea:focus,
#nodeContentModal.dark-mode .modal-body select:focus,
#nodeContentModal.dark-mode .modal-footer input:not([type="checkbox"]):not([type="radio"]):focus,
#nodeContentModal.dark-mode .modal-footer textarea:focus,
#nodeContentModal.dark-mode .modal-footer select:focus,
.is-fullscreen.dark-mode .modal-body input:not([type="checkbox"]):not([type="radio"]):focus,
.is-fullscreen.dark-mode .modal-body textarea:focus,
.is-fullscreen.dark-mode .modal-body select:focus,
.is-fullscreen.dark-mode .modal-footer input:not([type="checkbox"]):not([type="radio"]):focus,
.is-fullscreen.dark-mode .modal-footer textarea:focus,
.is-fullscreen.dark-mode .modal-footer select:focus {
    background-color: #27272a !important;
    color: #ffffff !important;
    border-color: #818cf8 !important;
    box-shadow: 0 0 0 0.2rem rgba(129, 140, 248, 0.25) !important;
}

/* 셀렉트박스 옵션 목록 */
#nodeContentModal.dark-mode .modal-body select option,
#nodeContentModal.dark-mode .modal-footer select option,
.is-fullscreen.dark-mode .modal-body select option,
.is-fullscreen.dark-mode .modal-footer select option {
    background-color: #27272a !important;
    color: #f4f4f5 !important;
}


/* =========================================
   일반 박스 블록(Custom Box Block) 다크모드 글자색 고정
   ========================================= */
#nodeContentModal.dark-mode div[data-type="custom-box-block"],
.is-fullscreen.dark-mode div[data-type="custom-box-block"] {
    /* 다크모드에서도 사용자가 지정한 배경색이 인라인 스타일로 잘 보이도록 보정 필요 시 추가 */
    color: #212529 !important; /* 박스 내부 기본 글자색을 어두운 톤으로 고정하여 가독성 확보 */
}

/* 만약 박스 내부의 텍스트가 배경색에 따라 어두운색(기본)으로 유지되도록 하려면 아래와 같이 설정 */
#nodeContentModal.dark-mode div[data-type="custom-box-block"] p,
#nodeContentModal.dark-mode div[data-type="custom-box-block"] li,
.is-fullscreen.dark-mode div[data-type="custom-box-block"] p,
.is-fullscreen.dark-mode div[data-type="custom-box-block"] li {
    color: inherit; /* 상속받은 색상이나 인라인 컬러 유지 */
}



/* =========================================
   [최종 수정] 드로잉 모달 (tiptapDrawingModal) 다크모드 스타일
   ========================================= */

/* 1. 모달 전체 컨테이너 및 배경 다크모드 대응 */
#tiptapDrawingModal.dark-mode .modal-content,
body.dark-mode #tiptapDrawingModal .modal-content {
    background-color: #18181b !important;
    color: #f4f4f5 !important;
}

/* 2. 헤더 영역 (타이틀 입력창 및 닫기 버튼) */
#tiptapDrawingModal.dark-mode .modal-header,
body.dark-mode #tiptapDrawingModal .modal-header {
    border-bottom: none !important;
}

#tiptapDrawingModal.dark-mode #drawingTitleInput,
body.dark-mode #tiptapDrawingModal #drawingTitleInput {
    color: #f4f4f5 !important;
    border-bottom-color: #52525b !important;
}
#tiptapDrawingModal.dark-mode #drawingTitleInput::placeholder,
body.dark-mode #tiptapDrawingModal #drawingTitleInput::placeholder {
    color: #71717a !important;
}

/* 3. 상단 툴바 패널 (#drawingToolsPanel) 다크모드 대응 */
#tiptapDrawingModal.dark-mode #drawingToolsPanel,
body.dark-mode #tiptapDrawingModal #drawingToolsPanel {
    background-color: #1e1e24 !important;
    border: 1px solid #2d2d35 !important;
}

#tiptapDrawingModal.dark-mode #drawingToolsPanel .text-secondary,
body.dark-mode #tiptapDrawingModal #drawingToolsPanel .text-secondary {
    color: #a1a1aa !important;
}

/* 4. 툴바 내 버튼 및 레인지 슬라이더 다크모드 대응 */
#tiptapDrawingModal.dark-mode #drawingToolsPanel .btn-outline-secondary,
body.dark-mode #tiptapDrawingModal #drawingToolsPanel .btn-outline-secondary {
    color: #d4d4d8 !important;
    border-color: #52525b !important;
    background-color: transparent !important;
}
#tiptapDrawingModal.dark-mode #drawingToolsPanel .btn-outline-secondary:hover,
body.dark-mode #tiptapDrawingModal #drawingToolsPanel .btn-outline-secondary:hover {
    background-color: #27272a !important;
    color: #ffffff !important;
    border-color: #71717a !important;
}

#tiptapDrawingModal.dark-mode .custom-range-slider,
body.dark-mode #tiptapDrawingModal .custom-range-slider {
    accent-color: #818cf8 !important; /* 슬라이더 바 포인트 컬러 */
}

/* 
  [요청 반영] 펜 색상 버튼 중 '검정/회색 계열'(#212529, #495057)만 다크모드에서 흰색/밝은 회색으로 반전
  - 빨강(#dc3545), 파랑(#0d6efd), 초록(#198754) 등 컬러 펜들은 기존 색상 그대로 유지됨
*/
/* #tiptapDrawingModal.dark-mode .pen-color-btn[data-color="#212529"],
body.dark-mode #tiptapDrawingModal .pen-color-btn[data-color="#212529"] {
    background-color: #f4f4f5 !important;
    border-color: #18181b !important;
    box-shadow: 0 0 0 1px #52525b !important;
}
#tiptapDrawingModal.dark-mode .pen-color-btn[data-color="#495057"],
body.dark-mode #tiptapDrawingModal .pen-color-btn[data-color="#495057"] {
    background-color: #a1a1aa !important;
    border-color: #18181b !important;
    box-shadow: 0 0 0 1px #52525b !important;
} */

/* 5. 캔버스 래퍼 영역 및 로더 다크모드 대응 */
#tiptapDrawingModal.dark-mode #drawingCanvasWrapper,
body.dark-mode #tiptapDrawingModal #drawingCanvasWrapper {
    background-color: #18181b !important;
    border-color: #2d2d35 !important;
}

#tiptapDrawingModal.dark-mode #drawingLoader,
body.dark-mode #tiptapDrawingModal #drawingLoader {
    background-color: rgba(24, 24, 27, 0.85) !important;
}

#tiptapDrawingModal.dark-mode #drawingLoader .spinner-border,
body.dark-mode #tiptapDrawingModal #drawingLoader .spinner-border {
    color: #f4f4f5 !important;
}

#tiptapDrawingModal.dark-mode #drawingLoader .text-secondary,
body.dark-mode #tiptapDrawingModal #drawingLoader .text-secondary {
    color: #a1a1aa !important;
}


/* 다크모드일 때 단축키 안내 팝오버 내부 스타일 보정 */
#nodeContentModal.dark-mode .dropdown-menu,
.is-fullscreen.dark-mode .dropdown-menu {
    background-color: #1e1e24 !important;
    border-color: #2d2d35 !important;
    color: #f4f4f5 !important;
}

#nodeContentModal.dark-mode .dropdown-menu .dropdown-header,
.is-fullscreen.dark-mode .dropdown-menu .dropdown-header {
    color: #ffffff !important;
    border-bottom-color: #3f3f46 !important;
}

#nodeContentModal.dark-mode .dropdown-menu kbd,
.is-fullscreen.dark-mode .dropdown-menu kbd {
    background-color: #27272a !important;
    color: #f4f4f5 !important;
    border-color: #3f3f46 !important;
}


/* =========================================
   다크모드 인라인 컬러 보정 (커스텀 박스 내부 제외)
   ========================================= */

/* 1. 일반 본문 내 링크(<a> 태그) 색상 보정 */
#nodeContentModal.dark-mode .tiptap-editable-content :not(div[data-type="custom-box-block"] *) a,
.is-fullscreen.dark-mode .tiptap-editable-content :not(div[data-type="custom-box-block"] *) a {
    color: #0d6efd !important;
    text-decoration: underline;
}

/* 2. 일반 본문 내 인라인 컬러(style*="color")는 다크모드용 흰색으로 변경하되, 커스텀 박스 내부는 제외 */
#nodeContentModal.dark-mode .tiptap-editable-content :not(div[data-type="custom-box-block"] *) span[style*="color"],
#nodeContentModal.dark-mode .tiptap-editable-content :not(div[data-type="custom-box-block"] *) p[style*="color"],
.is-fullscreen.dark-mode .tiptap-editable-content :not(div[data-type="custom-box-block"] *) span[style*="color"],
.is-fullscreen.dark-mode .tiptap-editable-content :not(div[data-type="custom-box-block"] *) p[style*="color"] {
    color: #f4f4f5 !important;
}

/* 3. 특정 어두운 인라인 컬러 타겟팅 코드 역시 커스텀 박스 내부는 제외 */
#nodeContentModal.dark-mode .tiptap-editable-content :not(div[data-type="custom-box-block"] *) span[style*="color: rgb(51, 51, 51)"],
#nodeContentModal.dark-mode .tiptap-editable-content :not(div[data-type="custom-box-block"] *) span[style*="color: #333"],
.is-fullscreen.dark-mode .tiptap-editable-content :not(div[data-type="custom-box-block"] *) span[style*="color: rgb(51, 51, 51)"],
.is-fullscreen.dark-mode .tiptap-editable-content :not(div[data-type="custom-box-block"] *) span[style*="color: #333"] {
    color: #f4f4f5 !important;
}