/*
=========================================
TinyMCE 안목빌더 스킨 + modal-box 대체 다이얼로그 콘텐츠 스타일 (공용)
- 디자인 빌더 인라인 에디터 + 게시판 editor_tinymce / editor_tinymce_simple 공용
- tinymce_modals.js (db-rt-* 모달) 와 한 세트
=========================================
*/

/* ※ 선택자에 .tox.tox / 클래스 반복을 쓰는 이유 — TinyMCE 가 기본 oxide 스킨 CSS 를
   페이지 CSS 보다 나중에 동적 로드해서, 동률 특정성이면 기본 스킨(파란색)이 이김.
   클래스 반복으로 특정성을 한 단계 올려 항상 안목 스킨이 적용되도록 함 */
/* tox (전역) — 사이트 본문 폰트로 통일 (TinyMCE 기본 시스템 폰트 룩 제거) */
.tox.tox, .tox.tox *:not(svg):not(rect) {font-family:inherit;}
/* tox-tinymce (iframe 에디터 컨테이너) — 카드형 + 입력 중 포커스 액센트 (인라인 플로팅 헤더 제외) */
.tox.tox-tinymce:not(.tox-tinymce-inline) {border:1px solid var(--color-gray-400); border-radius:var(--radius-10); box-shadow:0 2px 10px -6px rgba(0,0,0,.08); transition:border-color .15s ease, box-shadow .15s ease;}
.tox.tox-tinymce:not(.tox-tinymce-inline):focus-within {border-color:var(--color-active); box-shadow:0 0 0 3px color-mix(in srgb, var(--color-active) 10%, transparent);}
/* tox-editor-header (floating toolbar 컨테이너 — 빌더 인라인) — 상단 대표컬러 액센트 */
.tox.tox-tinymce-inline .tox-editor-header {border:1px solid var(--color-gray-400); border-top:3px solid var(--color-active); border-radius:var(--radius-10); box-shadow:0 10px 40px -10px rgba(0,0,0,.25), 0 4px 12px -4px rgba(0,0,0,.1); overflow:hidden;}
/* tox-editor-header (iframe 에디터) — 상단 대표컬러 액센트 + 본문과 경계선, 기본 그림자 제거 */
.tox.tox:not(.tox-tinymce-inline) .tox-editor-header {box-shadow:none; border-top:3px solid var(--color-active); border-bottom:1px solid var(--color-gray-300);}
/* tox-menubar */
.tox.tox .tox-menubar {background-image:none; background-color:var(--color-white); border-bottom:1px solid var(--color-gray-200); padding:2px 6px 0;}
.tox.tox .tox-mbtn {height:30px; color:var(--color-gray-1200); font-size:var(--font-sm); border-radius:var(--radius-5);}
.tox.tox .tox-mbtn:hover:not(:disabled):not(.tox-mbtn--active) {background:color-mix(in srgb, var(--color-active) 8%, transparent); color:var(--color-active);}
.tox.tox .tox-mbtn--active {background:color-mix(in srgb, var(--color-active) 10%, transparent); color:var(--color-active);}
.tox.tox .tox-mbtn:focus-visible {outline:2px solid var(--color-active); outline-offset:-2px;}
/* tox-toolbar */
.tox.tox .tox-toolbar, .tox.tox .tox-toolbar__overflow, .tox.tox .tox-toolbar__primary {background-image:none; background-color:var(--color-white); padding:4px 4px;}
.tox.tox .tox-toolbar__group {position:relative; padding:0 6px;}
.tox.tox .tox-toolbar__group:not(:last-of-type) {border-right:0;}
.tox.tox .tox-toolbar__group:not(:last-of-type)::after {content:""; position:absolute; right:0; top:50%; transform:translateY(-50%); width:1px; height:18px; background:var(--color-gray-300);}
/* tox-tbtn — hover/활성 모두 대표컬러(var(--color-active)) 톤 */
.tox.tox .tox-tbtn {border-radius:var(--radius-5); color:var(--color-gray-1200); margin:1px; transition:background .12s ease;}
.tox.tox .tox-tbtn svg {fill:var(--color-gray-1200);}
.tox.tox .tox-tbtn:hover {background:color-mix(in srgb, var(--color-active) 8%, transparent); color:var(--color-active);}
.tox.tox .tox-tbtn:hover svg {fill:var(--color-active);}
.tox.tox .tox-tbtn:focus {background:color-mix(in srgb, var(--color-active) 8%, transparent);}
.tox.tox .tox-tbtn--enabled, .tox.tox .tox-tbtn--enabled:hover {background:color-mix(in srgb, var(--color-active) 14%, transparent); color:var(--color-active);}
.tox.tox .tox-tbtn--enabled svg, .tox.tox .tox-tbtn--enabled:hover svg {fill:var(--color-active);}
.tox.tox .tox-tbtn:focus-visible {outline:2px solid var(--color-active); outline-offset:-2px;}
.tox.tox .tox-tbtn--disabled svg, .tox.tox .tox-tbtn:disabled svg {fill:var(--color-gray-500);}
/* tox-tbtn--bespoke (서식/글꼴/크기 등 select 형 버튼) — select-box 와 같은 시각 어포던스 */
.tox.tox .tox-tbtn--bespoke {background:var(--color-white); border:1px solid var(--color-gray-300);}
.tox.tox .tox-tbtn--bespoke:hover, .tox.tox .tox-tbtn--bespoke:focus {background:var(--color-white); border-color:var(--color-active);}
.tox.tox .tox-tbtn__select-label {font-size:var(--font-sm); color:var(--color-gray-1200); cursor:pointer;}
.tox.tox .tox-tbtn__select-chevron svg {fill:var(--color-gray-900);}
/* tox-split-button (색상 등 분할 버튼) — hover 시 본체+화살표를 한 덩어리로 (내부 tbtn 개별 배경 제거) */
.tox.tox .tox-split-button {border-radius:var(--radius-5); margin:1px; overflow:hidden;}
.tox.tox .tox-split-button:hover {box-shadow:none; background:color-mix(in srgb, var(--color-active) 8%, transparent);}
.tox.tox .tox-split-button:hover .tox-tbtn {background:transparent;}
.tox.tox .tox-split-button:hover .tox-tbtn svg {fill:var(--color-active);}
.tox.tox .tox-split-button:focus-visible {outline:2px solid var(--color-active); outline-offset:-2px;}
/* tox-statusbar — 요소 경로는 유지, 외부 브랜딩 링크는 숨김 */
.tox.tox .tox-statusbar {border-top:1px solid var(--color-gray-200); background-color:var(--color-gray-100); font-size:var(--font-xs); color:var(--color-gray-900);}
.tox.tox .tox-statusbar__path-item, .tox.tox .tox-statusbar__path-divider {color:var(--color-gray-900); font-size:var(--font-xs);}
.tox.tox .tox-statusbar__path-item:hover, .tox.tox .tox-statusbar__path-item:focus {color:var(--color-active); background:transparent;}
.tox.tox .tox-statusbar__branding {display:none;}
.tox.tox .tox-statusbar__resize-handle svg {fill:var(--color-gray-700);}
.tox.tox .tox-statusbar__resize-handle:hover svg {fill:var(--color-gray-1000);}
/* tox-menu (드롭다운) — 클래스 반복으로 기본 스킨(나중 로드)보다 특정성 우위 확보 */
.tox-tinymce-aux.tox-tinymce-aux .tox-menu {border:1px solid var(--color-gray-300); border-radius:var(--radius-10); box-shadow:0 10px 40px -10px rgba(0,0,0,.25); overflow:hidden;}
/* hover(--active)/적용됨(--enabled) 항목 — 기본 스킨(파란색)이 더 강한 선택자를 쓰는 곳이 있어 !important 로 확정 */
.tox-tinymce-aux.tox-tinymce-aux .tox-collection__item--active {background:color-mix(in srgb, var(--color-active) 8%, transparent) !important;}
.tox-tinymce-aux.tox-tinymce-aux .tox-collection__item--enabled {background:color-mix(in srgb, var(--color-active) 12%, transparent) !important;}
/* hover/적용됨 항목의 글자·아이콘·단축키·캐럿 — 전부 대표컬러로 통일
   (기본 스킨이 흰색 글자를 강제해 틴트 배경에서 안 보이던 문제도 함께 차단) */
.tox-tinymce-aux .tox-collection__item--active,
.tox-tinymce-aux .tox-collection__item--enabled,
.tox-tinymce-aux .tox-collection__item--active .tox-collection__item-label,
.tox-tinymce-aux .tox-collection__item--enabled .tox-collection__item-label,
.tox-tinymce-aux .tox-collection__item--active .tox-collection__item-label *:not(svg),
.tox-tinymce-aux .tox-collection__item--enabled .tox-collection__item-label *:not(svg),
.tox-tinymce-aux .tox-collection__item--active .tox-collection__item-accessory,
.tox-tinymce-aux .tox-collection__item--enabled .tox-collection__item-accessory {color:var(--color-active) !important;}
.tox-tinymce-aux .tox-collection__item--active .tox-collection__item-icon svg,
.tox-tinymce-aux .tox-collection__item--active .tox-collection__item-checkmark svg,
.tox-tinymce-aux .tox-collection__item--active .tox-collection__item-caret svg,
.tox-tinymce-aux .tox-collection__item--enabled .tox-collection__item-icon svg,
.tox-tinymce-aux .tox-collection__item--enabled .tox-collection__item-checkmark svg,
.tox-tinymce-aux .tox-collection__item--enabled .tox-collection__item-caret svg {fill:var(--color-active) !important;}
.tox-tinymce-aux.tox-tinymce-aux .tox-collection__item-label {font-size:var(--font-sm);}
.tox-tinymce-aux.tox-tinymce-aux .tox-collection__item-accessory {font-size:var(--font-xs); color:var(--color-gray-800);}
/* 블록 메뉴(서식 > 블록 / 툴바 블록 select) 미리보기 — 실제 크기(40px 급) 렌더를 단계별 축소 프리뷰로.
   ※ 크기가 인라인 스타일(preview_styles 가 콘텐츠 CSS 에서 계산해 직접 주입)이라 !important 필수 */
.tox-tinymce-aux .tox-collection__item-label h1,
.tox-tinymce-aux .tox-collection__item-label h2,
.tox-tinymce-aux .tox-collection__item-label h3,
.tox-tinymce-aux .tox-collection__item-label h4,
.tox-tinymce-aux .tox-collection__item-label h5,
.tox-tinymce-aux .tox-collection__item-label h6,
.tox-tinymce-aux .tox-collection__item-label p,
.tox-tinymce-aux .tox-collection__item-label pre,
.tox-tinymce-aux .tox-collection__item-label blockquote {margin:0 !important; line-height:1.35 !important;}
.tox-tinymce-aux .tox-collection__item-label h1 {font-size:21px !important;}
.tox-tinymce-aux .tox-collection__item-label h2 {font-size:19px !important;}
.tox-tinymce-aux .tox-collection__item-label h3 {font-size:17px !important;}
.tox-tinymce-aux .tox-collection__item-label h4 {font-size:16px !important;}
.tox-tinymce-aux .tox-collection__item-label h5 {font-size:15px !important;}
.tox-tinymce-aux .tox-collection__item-label h6 {font-size:14px !important;}
.tox-tinymce-aux .tox-collection__item-label p {font-size:14px !important;}
.tox-tinymce-aux .tox-collection__item-label pre {font-size:13px !important; background:var(--color-gray-100); padding:2px 6px; border-radius:4px;}
.tox-tinymce-aux .tox-collection__item-label blockquote {font-size:14px !important; color:var(--color-gray-900); border-left:3px solid var(--color-gray-400); padding-left:8px;}
/* 서식 하위 메뉴 전체(인라인/블록/Align/글꼴 등) 미리보기 — 편집 중인 텍스트의 큰 font-size 가
   미리보기에 그대로 주입되어 메뉴가 비대해지는 것 차단 (위 h1~h6 단계 규칙이 더 구체적이라 우선 적용됨) */
.tox-tinymce-aux .tox-collection__item-label > * {font-size:14px !important; margin:0 !important; line-height:1.35 !important;}
.tox-tinymce-aux .tox-collection__item-label > * * {font-size:inherit !important;}
/* tox-dialog (잔여 다이얼로그 — 이미지/미디어/테이블/지도 등) */
.tox .tox-dialog-wrap__backdrop {background-color:rgba(0,0,0,0.7);}
.tox .tox-dialog {border:0; border-radius:var(--radius-15); box-shadow:0 10px 40px -10px rgba(0,0,0,.25);}
.tox .tox-dialog__header {padding:var(--padding-15) var(--padding-20); border-bottom:1px solid var(--color-gray-400);}
.tox .tox-dialog__title {font-size:var(--font-xxl); font-weight:600; font-family:inherit;}
.tox .tox-dialog__body-content {padding:var(--padding-20);}
.tox .tox-dialog__footer {padding:var(--padding-15) var(--padding-20) var(--padding-20); border-top:0;}
/* tox-button */
.tox .tox-button {font-family:inherit; font-size:var(--font-md); font-weight:500; border-radius:var(--radius-8); background-color:var(--color-active); border-color:var(--color-active);}
.tox .tox-button:hover:not(:disabled) {background-color:color-mix(in srgb, var(--color-active) 85%, var(--color-black)); border-color:color-mix(in srgb, var(--color-active) 85%, var(--color-black));}
.tox .tox-button--secondary {background-color:var(--color-gray-300); border-color:var(--color-gray-300); color:var(--color-gray-1200);}
.tox .tox-button--secondary:hover:not(:disabled) {background-color:var(--color-gray-400); border-color:var(--color-gray-400); color:var(--color-gray-1200);}
.tox .tox-button--naked {background-color:transparent; border-color:transparent; color:var(--color-gray-1000);}
.tox .tox-button--naked:hover:not(:disabled) {background-color:var(--color-gray-200); border-color:transparent; color:var(--color-gray-1200);}
/* tox-textfield */
.tox .tox-textfield, .tox .tox-selectfield select, .tox .tox-listbox--select {font-family:inherit; font-size:var(--font-md); border-color:var(--color-gray-400); border-radius:var(--radius-8); color:var(--color-gray-1200);}
.tox .tox-textfield:focus, .tox .tox-listbox--select:focus {border-color:var(--color-active); box-shadow:0 0 0 3px color-mix(in srgb, var(--color-active) 12%, transparent);}
.tox .tox-label {font-size:var(--font-sm); color:var(--color-gray-1000); font-family:inherit;}

/* modal-panel (비차단 패널 — 찾기/바꾸기 등 본문을 보면서 쓰는 모달) */
.modal-box.modal-panel {background:transparent; pointer-events:none; z-index:100000;}
.modal-box.modal-panel .box {left:50%; right:auto; top:80px; transform:translateX(-50%); width:360px; max-width:calc(100vw - 40px); pointer-events:auto; border:1px solid var(--color-gray-300); box-shadow:0 10px 40px -10px rgba(0,0,0,.25);}

/* db-rt-color-modal */
.db-rt-color-modal .sp-container {position:static; width:100%; border:0; background:transparent; box-sizing:border-box;}
.db-rt-color-modal .sp-picker-container {width:100%; border-left:0; box-sizing:border-box;}
.db-rt-color-modal .db-rt-color-native {display:block; width:100%; height:120px; padding:0; border:1px solid var(--color-gray-400); border-radius:var(--radius-8); cursor:pointer;}

/* db-rt-link-modal */
.db-rt-link-modal {display:flex; flex-direction:column; gap:var(--gap-15);}
.db-rt-link-modal .row > label {display:block; font-size:var(--font-sm); font-weight:600; color:var(--color-gray-1200); margin:0 0 var(--margin-5);}
.db-rt-link-modal .row.check-box > label {display:flex; align-items:center; margin:0; font-weight:400;}

/* db-rt-search-modal */
.db-rt-search-modal {display:flex; flex-direction:column; gap:var(--gap-10);}
.db-rt-search-modal .row > label {display:block; font-size:var(--font-sm); font-weight:600; color:var(--color-gray-1200); margin:0 0 var(--margin-5);}
.db-rt-search-modal .opts {display:flex; flex-wrap:wrap; gap:var(--gap-15);}
.db-rt-search-modal .acts {display:flex; flex-wrap:wrap; gap:var(--gap-5);}
.db-rt-search-modal .status {min-height:18px; font-size:var(--font-sm); color:var(--color-gray-1000);}

/* db-rt-anchor-modal */
.db-rt-anchor-modal {display:flex; flex-direction:column; gap:var(--gap-10);}
.db-rt-anchor-modal .row > label {display:block; font-size:var(--font-sm); font-weight:600; color:var(--color-gray-1200); margin:0 0 var(--margin-5);}
.db-rt-anchor-modal .hint {font-size:var(--font-xs); color:var(--color-gray-800);}

/* db-rt-image-modal */
.db-rt-image-modal {display:flex; flex-direction:column; gap:var(--gap-15);}
.db-rt-image-modal .row > label {display:block; font-size:var(--font-sm); font-weight:600; color:var(--color-gray-1200); margin:0 0 var(--margin-5);}
.db-rt-image-modal .row input[type="file"] {display:block; width:100%; font-size:var(--font-sm); color:var(--color-gray-1000);}
.db-rt-image-modal .status {min-height:18px; margin:var(--margin-5) 0 0; font-size:var(--font-sm); color:var(--color-active);}

/* db-rt-media-modal */
.db-rt-media-modal {display:flex; flex-direction:column; gap:var(--gap-15);}
.db-rt-media-modal .row > label {display:block; font-size:var(--font-sm); font-weight:600; color:var(--color-gray-1200); margin:0 0 var(--margin-5);}
.db-rt-media-modal textarea {display:block; width:100%; padding:var(--padding-10); border:1px solid var(--color-gray-400); border-radius:var(--radius-8); font-size:var(--font-md); color:var(--color-gray-1200); resize:vertical; min-height:80px;}
.db-rt-media-modal textarea:focus {border-color:var(--color-active); outline:0; box-shadow:0 0 0 3px color-mix(in srgb, var(--color-active) 12%, transparent);}
.db-rt-media-modal .size-row {display:flex; gap:var(--gap-10);}
.db-rt-media-modal .size-row .size-item {flex:1; min-width:0;}
.db-rt-media-modal .hint {font-size:var(--font-xs); color:var(--color-gray-800);}

/* db-rt-form-modal (표/행/셀 속성 — tox 폼 변환) */
.db-rt-form-modal {display:flex; flex-direction:column;}
.db-rt-form-modal section {margin:0; width:100%; min-height:0;}
.db-rt-form-modal section + section {margin-top:var(--margin-15); padding-top:var(--padding-15); border-top:1px solid var(--color-gray-300);}
.db-rt-form-modal section > h3 {font-size:var(--font-sm); font-weight:600; color:var(--color-gray-1000); margin:0 0 var(--margin-10);}
.db-rt-form-modal .row {margin:0 0 var(--margin-10);}
.db-rt-form-modal .row > label {display:block; font-size:var(--font-sm); font-weight:600; color:var(--color-gray-1200); margin:0 0 var(--margin-5);}
.db-rt-form-modal .form-grid {display:flex; flex-wrap:wrap; gap:var(--gap-10);}
.db-rt-form-modal .form-grid > * {flex:1; min-width:120px;}
.db-rt-form-modal .group-title {display:block; font-size:var(--font-sm); font-weight:600; color:var(--color-gray-1000); margin:0 0 var(--margin-10);}
.db-rt-form-modal .check-box {margin:0 0 var(--margin-10);}
.db-rt-form-modal .select-box select {width:100%;}
.db-rt-form-modal .textarea-box textarea {display:block; width:100%; padding:var(--padding-10); border:1px solid var(--color-gray-400); border-radius:var(--radius-8); font-size:var(--font-md); color:var(--color-gray-1200); resize:vertical;}

/* db-rt-code-modal (소스코드 편집 — CodeMirror) */
.db-rt-code-modal {display:flex; flex-direction:column; gap:var(--gap-10);}
.db-rt-code-modal .code-body {position:relative; height:60vh; min-height:300px; border:1px solid var(--color-gray-300); border-radius:var(--radius-8); overflow:hidden; contain:layout style;}
.db-rt-code-modal .code-body .cm-editor {height:100%;}
.db-rt-code-modal .code-loading {position:absolute; inset:0; display:flex; align-items:center; justify-content:center; background:var(--color-gray-100); color:var(--color-gray-800); font-size:var(--font-sm);}
.db-rt-code-modal .code-opts {display:flex; flex-wrap:wrap; align-items:center; gap:var(--gap-15);}
.db-rt-code-modal .code-opts .spacer {flex:1;}

/* db-rt-charmap-modal */
.db-rt-charmap-modal {display:flex; flex-direction:column; gap:var(--gap-20);}
.db-rt-charmap-modal section {margin:0; width:100%; min-height:0;}
.db-rt-charmap-modal section h3 {font-size:var(--font-sm); font-weight:600; color:var(--color-gray-1000); margin:0 0 var(--margin-10);}
.db-rt-charmap-modal section .grid {display:grid; grid-template-columns:repeat(auto-fill, minmax(42px, 1fr)); gap:var(--gap-5);}
.db-rt-charmap-modal section .grid button {height:42px; display:flex; align-items:center; justify-content:center; font-size:var(--font-xl); color:var(--color-gray-1200); background:var(--color-white); border:1px solid var(--color-gray-300); border-radius:var(--radius-8); cursor:pointer; transition:all ease 0.2s;}
.db-rt-charmap-modal section .grid button:hover {background:var(--color-gray-200); border-color:var(--color-gray-400);}
.db-rt-charmap-modal section .grid button:focus-visible {outline:2px solid var(--color-active); outline-offset:1px;}