/**
 * Summernote Custom Styles
 * - 이미지 리사이징, 레이아웃, 다이얼로그 스타일 등
 */

/* 에디터 이미지 스타일 */
.note-editable img {
    max-width: 100%;
    cursor: pointer;
}
.note-editable img.note-image-resizing {
    outline: 2px solid #007bff;
}

/* 이미지 리사이즈 핸들 스타일 */
.note-control-sizing {
    display: block !important;
}
.note-control-holder {
    position: relative;
}
.note-control-holder .note-control-sizing {
    position: absolute;
    width: 10px;
    height: 10px;
    border: 1px solid #333;
    background-color: #fff;
}

/* 코드뷰 모드 가로 사이즈 고정 */
.note-editor.note-frame {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
    display: block !important;
}
.note-editor .note-editing-area {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
}
.note-editor .note-codable {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    resize: vertical !important;
    white-space: pre-wrap !important;
    word-wrap: break-word !important;
    word-break: break-all !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overflow-wrap: break-word !important;
}

/* Summernote 부모 컨테이너 오버플로우 방지 */
.table_row td .note-editor,
td .note-editor,
div .note-editor {
    width: 100% !important;
    max-width: 100% !important;
}

/* 테이블 레이아웃 고정 - Summernote 포함 테이블 */
.table_row {
    table-layout: fixed !important;
    width: 100% !important;
}

/* Summernote가 있는 td 스타일 */
td:has(.note-editor) {
    overflow: hidden !important;
    word-break: break-all !important;
}

/* IE/구형 브라우저 대응 - summernote 래퍼 클래스 */
.summernote-wrapper {
    width: 100% !important;
    max-width: 100% !important;
    overflow: hidden !important;
}

/* 이미지 다이얼로그 버튼 overflow 수정 */
.note-image-dialog .note-modal-footer {
    padding: 10px 15px !important;
    overflow: visible !important;
}
.note-image-dialog .note-modal-content {
    overflow: visible !important;
}
.note-image-dialog .note-btn {
    margin: 0 !important;
}

/* 이미지 업로드 안내 문구 스타일 */
.image-upload-guide {
    margin: 0 0 15px 0;
    padding: 10px 12px;
    background: #e8f4fd;
    border: 1px solid #b8daff;
    border-radius: 4px;
    font-size: 12px;
    color: #004085;
    display: flex;
    align-items: center;
}
.image-upload-guide i.material-icons {
    font-size: 16px;
    margin-right: 6px;
    color: #0056b3;
}
.image-upload-guide strong {
    color: #0056b3;
}

/* 색상 팔레트 UI overflow 수정 */
.note-editor .note-toolbar {
    overflow: visible !important;
}
.note-editor .note-btn-group {
    overflow: visible !important;
}
.note-editor .note-toolbar .note-color.open .note-dropdown-menu {
    min-width: 340px !important;
    overflow: visible !important;
    display: flex !important;
    flex-wrap: nowrap !important;
}
.note-editor .note-holder {
    overflow: visible !important;
}

/* 색상 팔레트 2컬럼 레이아웃 유지 */
.note-editor .note-toolbar .note-color .note-dropdown-menu .note-palette {
    display: inline-block !important;
    vertical-align: top !important;
    width: auto !important;
    min-width: 160px !important;
    margin: 0 5px !important;
    flex-shrink: 0 !important;
}
.note-editor .note-toolbar .note-color .note-dropdown-menu .note-palette .note-palette-title {
    margin: 0 0 5px 0 !important;
    font-size: 12px !important;
    font-weight: bold !important;
}
.note-editor .note-toolbar .note-color .note-dropdown-menu .note-palette .note-color-palette {
    width: auto !important;
}

/* 드롭다운 메뉴 위치 조정 */
.note-editor .note-dropdown-menu {
    z-index: 1050 !important;
}

/* 전체화면 모드 배경색 */
.note-editor.note-frame.fullscreen,
.note-editor.note-airframe.fullscreen {
    background-color: #fff !important;
}
.note-editor.note-frame.fullscreen .note-editable,
.note-editor.note-airframe.fullscreen .note-editable {
    background-color: #fff !important;
}

/* 이미지 다이얼로그 수정 */
.note-modal .note-modal-content {
    overflow: hidden !important;
}
.note-modal .note-modal-footer {
    overflow: hidden !important;
    height: auto !important;
    padding: 10px 15px !important;
}
.note-modal .note-modal-footer .note-btn {
    float: right !important;
    margin: 0 !important;
}
.note-modal .note-modal-footer::after {
    content: "" !important;
    display: table !important;
    clear: both !important;
}