/* ============================================================ CKEditor 4 (moono skin) — Dark mode override - Trigger: html[data-theme="dark"] (skin_h 다크모드와 동일 메커니즘) - 다른 스킨에는 토글이 없으므로 자동으로 무시됨 ---------------------------------------------------------------- 1) iframe 콘텐츠 영역 (config.contentsCss 로 로드됨) 2) 부모창 툴바/UI (happy_wys_js 로 로드됨) 3) 아이콘 PNG 스프라이트 invert ============================================================ */ /* ------------------------------------------------------------ [1] iframe 내부 콘텐츠 — config.contentsCss 경로로 로드되며, 부모창 toggleDarkMode 시 head_common.html 의 동기화 루틴이 를 iframe 문서에 직접 설정한다. ※ dark.css 는 iframe 내부에만 로드되므로 부모창 leak 위험 없음. body 등 글로벌 셀렉터 사용해도 안전. ------------------------------------------------------------ */ html[data-theme="dark"] body { background-color: #1C1C1E !important; color: #E6E8EC !important; } html[data-theme="dark"] .cke_editable, html[data-theme="dark"] .cke_editable * { color: #E6E8EC; } html[data-theme="dark"] .cke_editable a, html[data-theme="dark"] .cke_editable a[href] { color: #6EA8FE !important; } html[data-theme="dark"] .cke_editable table, html[data-theme="dark"] .cke_editable th, html[data-theme="dark"] .cke_editable td { border-color: #1F242E !important; } html[data-theme="dark"] .cke_editable th { background: #2C2C2E !important; } html[data-theme="dark"] .cke_editable blockquote { border-left-color: #444 !important; color: #C4C9D1 !important; } html[data-theme="dark"] .cke_editable blockquote:before, html[data-theme="dark"] .cke_editable blockquote:after { color: #6A7280 !important; } html[data-theme="dark"] .cke_editable hr { border-color: #1F242E; background: #1F242E; } html[data-theme="dark"] .cke_editable figure { background: rgba(255, 255, 255, 0.04); border-color: #1F242E; } html[data-theme="dark"] .cke_editable .marker { background-color: #B58900; color: #1C1C1E; } /* 인라인 흰 배경 / 검정 텍스트 보정 (위지윅 본문 한정) */ html[data-theme="dark"] .cke_editable [style*="background:#fff"], html[data-theme="dark"] .cke_editable [style*="background-color:#fff"], html[data-theme="dark"] .cke_editable [style*="background:#FFF"], html[data-theme="dark"] .cke_editable [style*="background-color:#FFF"], html[data-theme="dark"] .cke_editable [style*="background:#fafafa"], html[data-theme="dark"] .cke_editable [style*="background:#FAFAFA"] { background-color: #1C1C1E !important; } html[data-theme="dark"] .cke_editable [style*="color:#000"], html[data-theme="dark"] .cke_editable [style*="color: #000"], html[data-theme="dark"] .cke_editable [style*="color:#333"], html[data-theme="dark"] .cke_editable [style*="color: #333"] { color: #E6E8EC !important; } /* 답변 인용글 박스 (.bbs_reply_quote_dark) — 다크에서만 시각적 보정 원본 인라인 스타일은 그대로 두고 다크 모드 표시만 변경 */ html[data-theme="dark"] .bbs_reply_quote_dark { background: transparent !important; border: 1px solid #1F242E !important; } /* ============================================================ [2] 부모창 — CKEditor 툴바/UI/모달 moono editor.css 가 광범위하게 !important 를 사용하므로 오버라이드도 모두 !important 필요 ============================================================ */ /* editor.css 의 위지윅 메뉴 모달 (.pop-editor_layer / .input_style / .cbtn) */ html[data-theme="dark"] .pop-editor_layer { background-color: #161A21 !important; border-color: #2A2F38 !important; color: #E6E8EC !important; } html[data-theme="dark"] .pop-editor_layer p.ctxt { color: #C4C9D1 !important; } html[data-theme="dark"] .pop-editor_layer .btn-r { border-top-color: #2A2F38 !important; } html[data-theme="dark"] a.cbtn { color: #E6E8EC !important; } html[data-theme="dark"] .input_style input[type="text"], html[data-theme="dark"] .input_style input[type="password"], html[data-theme="dark"] .input_style input[type="file"], html[data-theme="dark"] .input_style select, html[data-theme="dark"] .input_style textarea { background: #1C1C1E !important; border-color: #2A2F38 !important; color: #E6E8EC !important; } /* 외곽 chrome / inner / wysiwyg 백그라운드 */ html[data-theme="dark"] .cke_chrome { border-color: #1F242E !important; box-shadow: 0 0 0 1px #1F242E inset !important; } html[data-theme="dark"] .cke_inner { background: #1C1C1E !important; } html[data-theme="dark"] .cke_wysiwyg_frame, html[data-theme="dark"] .cke_wysiwyg_div { background-color: #1C1C1E !important; } /* top / bottom 툴바·상태바 */ html[data-theme="dark"] .cke_top, html[data-theme="dark"] .cke_bottom { background: #1C1C1E !important; background-image: none !important; border-color: #1F242E !important; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.02) inset !important; filter: none !important; } html[data-theme="dark"] .cke_float .cke_top { border-color: #1F242E !important; } /* 툴그룹 / 콤보 버튼 / 콜랩서 — 그라데이션 제거하고 단색 */ html[data-theme="dark"] .cke_toolgroup, html[data-theme="dark"] a.cke_combo_button, html[data-theme="dark"] a.cke_toolbox_collapser { background: #2C2C2E !important; background-image: none !important; border-color: #2A2F38 !important; border-bottom-color: #2A2F38 !important; box-shadow: none !important; filter: none !important; } html[data-theme="dark"] .cke_combo_off a.cke_combo_button:hover, html[data-theme="dark"] .cke_combo_off a.cke_combo_button:focus, html[data-theme="dark"] .cke_toolbox_collapser:hover { background: #232830 !important; background-image: none !important; filter: none !important; } html[data-theme="dark"] .cke_combo_off a.cke_combo_button:active, html[data-theme="dark"] .cke_combo_on a.cke_combo_button { background: #2A2F38 !important; background-image: none !important; border-color: #3A3F46 !important; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4) inset !important; filter: none !important; } /* 버튼 상태 */ html[data-theme="dark"] a.cke_button_on { background: #2A2F38 !important; background-image: none !important; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4) inset !important; filter: none !important; } html[data-theme="dark"] a.cke_button_off:hover, html[data-theme="dark"] a.cke_button_off:focus, html[data-theme="dark"] a.cke_button_off:active, html[data-theme="dark"] a.cke_button_disabled:hover, html[data-theme="dark"] a.cke_button_disabled:focus, html[data-theme="dark"] a.cke_button_disabled:active { background: #232830 !important; background-image: none !important; box-shadow: 0 0 1px rgba(0, 0, 0, 0.5) inset !important; filter: none !important; } /* 텍스트 색상 (콤보/경로/라벨/화살표) */ html[data-theme="dark"] .cke_combo_text, html[data-theme="dark"] .cke_button_label, html[data-theme="dark"] a.cke_path_item, html[data-theme="dark"] span.cke_path_empty { color: #C4C9D1 !important; text-shadow: none !important; } html[data-theme="dark"] a.cke_path_item:hover, html[data-theme="dark"] a.cke_path_item:focus, html[data-theme="dark"] a.cke_path_item:active { background-color: #2A2F38 !important; color: #F5F6F8 !important; text-shadow: none !important; box-shadow: none !important; } html[data-theme="dark"] .cke_combo_arrow, html[data-theme="dark"] .cke_button_arrow { border-top-color: #C4C9D1 !important; } html[data-theme="dark"] .cke_toolbox_collapser .cke_arrow { border-bottom-color: #C4C9D1 !important; } html[data-theme="dark"] .cke_toolbox_collapser.cke_toolbox_collapser_min .cke_arrow { border-top-color: #C4C9D1 !important; border-bottom-color: transparent !important; } /* 구분자 / 리사이저 */ html[data-theme="dark"] .cke_toolbar_separator { background-color: rgba(255, 255, 255, 0.08) !important; box-shadow: 1px 0 0 rgba(0, 0, 0, 0.4) !important; } html[data-theme="dark"] .cke_resizer { border-color: transparent #4A5060 transparent transparent !important; } html[data-theme="dark"] .cke_resizer_rtl { border-color: transparent transparent transparent #4A5060 !important; } /* ------------------------------------------------------------ 드롭다운 패널 / 메뉴 / 컬러팔레트 ------------------------------------------------------------ */ html[data-theme="dark"] .cke_panel, html[data-theme="dark"] .cke_menu_panel { background-color: #161A21 !important; border-color: #2A2F38 !important; box-shadow: 0 0 4px rgba(0, 0, 0, 0.6) !important; } html[data-theme="dark"] .cke_panel_grouptitle { background: #2C2C2E !important; background-image: none !important; color: #C4C9D1 !important; border-bottom-color: #2A2F38 !important; text-shadow: none !important; box-shadow: none !important; filter: none !important; } html[data-theme="dark"] .cke_panel_listItem a { color: #E6E8EC !important; border-color: transparent !important; } html[data-theme="dark"] .cke_panel_listItem.cke_selected a, html[data-theme="dark"] .cke_panel_listItem a:hover, html[data-theme="dark"] .cke_panel_listItem a:focus, html[data-theme="dark"] .cke_panel_listItem a:active { background-color: #2A2F38 !important; border-color: #3A3F46 !important; box-shadow: none !important; color: #F5F6F8 !important; } html[data-theme="dark"] .cke_menubutton:hover, html[data-theme="dark"] .cke_menubutton:focus, html[data-theme="dark"] .cke_menubutton:active { background-color: #2A2F38 !important; } html[data-theme="dark"] .cke_menubutton_icon { background-color: transparent !important; } html[data-theme="dark"] .cke_menubutton_label { color: #E6E8EC !important; } html[data-theme="dark"] .cke_menuseparator { background-color: #2A2F38 !important; } html[data-theme="dark"] .cke_colorblock, html[data-theme="dark"] .cke_colorblock a { color: #E6E8EC !important; } html[data-theme="dark"] a:hover.cke_colorbox, html[data-theme="dark"] a:focus.cke_colorbox, html[data-theme="dark"] a:active.cke_colorbox, html[data-theme="dark"] a:hover.cke_colorauto, html[data-theme="dark"] a:hover.cke_colormore, html[data-theme="dark"] a:focus.cke_colorauto, html[data-theme="dark"] a:focus.cke_colormore { border-color: #3A3F46 !important; background-color: #2A2F38 !important; } /* ------------------------------------------------------------ 다이얼로그 (Link / Image / Table / Find / SpecialChar / Color picker 등) ------------------------------------------------------------ */ html[data-theme="dark"] .cke_dialog_background_cover { background-color: #000 !important; } html[data-theme="dark"] .cke_dialog, html[data-theme="dark"] .cke_dialog_body, html[data-theme="dark"] .cke_dialog_contents, html[data-theme="dark"] .cke_dialog_contents_body, html[data-theme="dark"] .cke_dialog_page_contents, html[data-theme="dark"] .cke_dialog_ui_vbox, html[data-theme="dark"] .cke_dialog_ui_hbox { background: #161A21 !important; background-image: none !important; color: #E6E8EC !important; border-color: #2A2F38 !important; filter: none !important; } html[data-theme="dark"] .cke_dialog_title { background: #2C2C2E !important; background-image: none !important; color: #F5F6F8 !important; border-bottom-color: #2A2F38 !important; text-shadow: none !important; box-shadow: none !important; filter: none !important; } html[data-theme="dark"] .cke_dialog_footer { background: #161A21 !important; background-image: none !important; border-top-color: #2A2F38 !important; box-shadow: none !important; filter: none !important; } html[data-theme="dark"] .cke_dialog_tabs a { background: #2C2C2E !important; background-image: none !important; color: #C4C9D1 !important; border-color: #2A2F38 !important; text-shadow: none !important; filter: none !important; } html[data-theme="dark"] .cke_dialog_tabs a:hover, html[data-theme="dark"] .cke_dialog_tabs a:focus { background: #232830 !important; color: #F5F6F8 !important; } html[data-theme="dark"] a.cke_dialog_tab_selected, html[data-theme="dark"] a.cke_dialog_tab_selected:hover, html[data-theme="dark"] a.cke_dialog_tab_selected:focus { background: #1C1C1E !important; color: #F5F6F8 !important; border-bottom-color: #1C1C1E !important; } /* 다이얼로그 입력 컨트롤 */ html[data-theme="dark"] .cke_dialog input.cke_dialog_ui_input_text, html[data-theme="dark"] .cke_dialog input.cke_dialog_ui_input_password, html[data-theme="dark"] .cke_dialog input.cke_dialog_ui_input_tel, html[data-theme="dark"] .cke_dialog textarea.cke_dialog_ui_input_textarea, html[data-theme="dark"] .cke_dialog select.cke_dialog_ui_input_select, html[data-theme="dark"] .cke_dialog .cke_dialog_ui_input_text, html[data-theme="dark"] .cke_dialog .cke_dialog_ui_input_password, html[data-theme="dark"] .cke_dialog .cke_dialog_ui_input_textarea, html[data-theme="dark"] .cke_dialog .cke_dialog_ui_input_select, html[data-theme="dark"] .cke_dialog .cke_dialog_ui_input_file { background: #1C1C1E !important; color: #E6E8EC !important; border-color: #2A2F38 !important; } html[data-theme="dark"] .cke_dialog .cke_dialog_ui_labeled_label, html[data-theme="dark"] .cke_dialog label, html[data-theme="dark"] .cke_dialog .cke_dialog_ui_text, html[data-theme="dark"] .cke_dialog .cke_dialog_ui_html { color: #E6E8EC !important; } html[data-theme="dark"] .cke_dialog a.cke_dialog_ui_button { background: #2C2C2E !important; background-image: none !important; color: #E6E8EC !important; border-color: #2A2F38 !important; text-shadow: none !important; filter: none !important; } html[data-theme="dark"] .cke_dialog a.cke_dialog_ui_button:hover, html[data-theme="dark"] .cke_dialog a.cke_dialog_ui_button:focus { background: #232830 !important; border-color: #3A3F46 !important; color: #F5F6F8 !important; } html[data-theme="dark"] .cke_dialog a.cke_dialog_ui_button_ok { background: #16273C !important; border-color: #2D4A6E !important; } html[data-theme="dark"] .cke_dialog a.cke_dialog_ui_button_ok:hover, html[data-theme="dark"] .cke_dialog a.cke_dialog_ui_button_ok:focus { background: #1F3A5C !important; } /* 알림 배너 (notification) — 일부 색상만 보정 */ html[data-theme="dark"] .cke_notification_info { background: #1A4263 !important; border-color: #2D4A6E !important; } html[data-theme="dark"] .cke_notification_message a { color: #6EA8FE !important; } /* 소스 보기 textarea */ html[data-theme="dark"] textarea.cke_source { background-color: #1C1C1E !important; color: #E6E8EC !important; } /* ============================================================ [3] 아이콘 — moono PNG 스프라이트 invert icons.png / icons_hidpi.png 모두 모노톤이므로 filter 로 다크 톤에 맞춰 명도 반전 ============================================================ */ html[data-theme="dark"] .cke_button_icon, html[data-theme="dark"] .cke_menubutton_icon, html[data-theme="dark"] .cke_menuarrow, html[data-theme="dark"] .cke_dialog_close_button { filter: invert(0.92) hue-rotate(180deg) brightness(1.05) !important; -webkit-filter: invert(0.92) hue-rotate(180deg) brightness(1.05) !important; } /* 비활성 아이콘은 invert 후 더 흐리게 */ html[data-theme="dark"] .cke_button_disabled .cke_button_icon { opacity: 0.35 !important; } /* ============================================================ [4] 에디터 외부 커스텀 툴박스 (happy_editor_toolbox) board_function.php happy_wys() 가 출력하는 자체 제작 버튼바 - 옵션 B: 다크모드에서 라이트 톤 GIF 를 숨기고 의 data-tb-label (head_common.html JS 가 부여) 로 다크 텍스트 버튼 렌더 ============================================================ */ html[data-theme="dark"] .happy_editor_toolbox { background: #1C1C1E !important; background-image: none !important; border: 1px solid #2A2F38 !important; border-bottom: none !important; padding: 6px 8px !important; display: flex !important; flex-wrap: wrap !important; align-items: center !important; gap: 4px !important; box-sizing: border-box !important; } html[data-theme="dark"] .happy_editor_toolbox table, html[data-theme="dark"] .happy_editor_toolbox tbody, html[data-theme="dark"] .happy_editor_toolbox tr, html[data-theme="dark"] .happy_editor_toolbox td { background: transparent !important; } /* 실제 마크업: 태그 텍스트 버튼 (data-tb-label 구조 사용 안 함) */ html[data-theme="dark"] .happy_editor_toolbox span { display: inline-block; padding: 5px 12px; background: #2C2C2E !important; border: 1px solid #2A2F38 !important; border-radius: 4px; color: #C4C9D1 !important; font-size: 12px; line-height: 1.4; white-space: nowrap; cursor: pointer; transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease; } html[data-theme="dark"] .happy_editor_toolbox span:hover { background: #2A2F38 !important; border-color: #6EA8FE !important; color: #F5F6F8 !important; } html[data-theme="dark"] .happy_editor_toolbox span:active { background: #1F242E !important; border-color: #93C0FF !important; } /* 모든 버튼/구분선 이미지 숨김 — 다크에서는 CSS 로 새로 그림 */ html[data-theme="dark"] .happy_editor_toolbox img { display: none !important; } /* 라벨이 부여된 td 에 다크 텍스트 버튼 렌더 (JS hydrator 가 alt → data-tb-label 로 복사) */ html[data-theme="dark"] .happy_editor_toolbox td[data-tb-label] { cursor: pointer; padding: 4px 6px !important; vertical-align: middle; } html[data-theme="dark"] .happy_editor_toolbox td[data-tb-label]::before { content: attr(data-tb-label); display: inline-block; padding: 5px 12px; background: #232830; border: 1px solid #2A2F38; border-radius: 4px; color: #C4C9D1; font-size: 12px; line-height: 1.4; white-space: nowrap; transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease; } html[data-theme="dark"] .happy_editor_toolbox td[data-tb-label]:hover::before { background: #2A2F38; border-color: #6EA8FE; color: #F5F6F8; } html[data-theme="dark"] .happy_editor_toolbox td[data-tb-label]:active::before { background: #1F242E; border-color: #93C0FF; } /* 라벨 없는 td (구분선용 빈 셀) — CSS 보더로 1px 세로선 표시 */ html[data-theme="dark"] .happy_editor_toolbox td:not([data-tb-label]) { width: 1px !important; padding: 0 !important; border-left: 1px solid #2A2F38; } /* ============================================================ [5] AI 문장 도우미 플러그인 다이얼로그 (.editor_ai_wrap) aihelper_ui.html 의 인라인