/* ============================================================
   editorZ 스킨 — 라이트/다크 자체 토큰.
   포인트 색(--edz-accent)은 3단계로 정해진다:
     1) --edz-accent-set : 에디터 스킨 설정에서 지정한 색 (최우선, editor.html 인라인)
     2) --point-color / --hr-brand : 레이아웃이 심는 사이트 포인트색 (자동 상속)
     3) #2f6b4a : 어느 것도 없을 때의 기본값
   덕분에 사이트 포인트색을 바꾸면 에디터도 따라오고, 원하면 설정으로 덮어쓸 수 있다.
   --edz-accent-soft 는 accent 에서 자동 계산(color-mix)해 늘 어울린다.
   ============================================================ */
.edz{
  --edz-accent:var(--edz-accent-set, var(--point-color, var(--hr-brand, var(--zm-brand, var(--rx-point-color, #2f6b4a)))));
  --edz-accent-soft:color-mix(in srgb, var(--edz-accent) 11%, var(--edz-bg));
  --edz-bg:#fff;--edz-surface-2:#f8f9fb;--edz-border:#e8eaef;--edz-text:#15171c;--edz-sub:#5d646f;
  position:relative;border:1px solid var(--edz-border);border-radius:12px;transition:border-color .15s,box-shadow .15s;}
.edz:focus-within{border-color:var(--edz-accent);box-shadow:0 0 0 3px var(--edz-accent-soft);}
/* 다크 토큰: 중립 회색이 아니라 사이트 포인트색(--edz-accent)을 소량 섞은
   "브랜드 틴트 다크". 초록 테마면 초록빛 다크, 파랑 테마면 파랑빛 다크가 된다. */
.edz.dark{
  --edz-bg:color-mix(in srgb, var(--edz-accent) 10%, #12151b);
  --edz-surface-2:color-mix(in srgb, var(--edz-accent) 13%, #171b22);
  --edz-border:color-mix(in srgb, var(--edz-accent) 20%, #232833);
  --edz-text:#eceef3;--edz-sub:#a7aeba;
  --edz-accent-soft:color-mix(in srgb, var(--edz-accent) 26%, #12151b);}

/* 밝은 화면인지 어두운 화면인지는 JS 가 글이 놓이는 자리의 실제 글자색을 보고 data-edz-scheme 에 적는다.
   레이아웃이 밝기를 따로 정하지 않아 기기 설정만 어두운 경우에도 툴바와 본문이 어긋나지 않는다. */
.edz[data-edz-scheme="dark"]{
  --edz-bg:color-mix(in srgb, var(--edz-accent) 10%, #12151b);
  --edz-surface-2:color-mix(in srgb, var(--edz-accent) 13%, #171b22);
  --edz-border:color-mix(in srgb, var(--edz-accent) 20%, #232833);
  --edz-text:#eceef3;--edz-sub:#a7aeba;
  --edz-accent-soft:color-mix(in srgb, var(--edz-accent) 26%, #12151b);}
.edz[data-edz-scheme="light"]{
  --edz-bg:#fff;--edz-surface-2:#f8f9fb;--edz-border:#e8eaef;--edz-text:#15171c;--edz-sub:#5d646f;
  --edz-accent-soft:color-mix(in srgb, var(--edz-accent) 11%, var(--edz-bg));}

.edz__tool{display:flex;align-items:center;gap:3px;padding:8px 10px;border-bottom:1px solid var(--edz-border);flex-wrap:wrap;background:var(--edz-bg);position:sticky;top:0;z-index:25;border-radius:11px 11px 0 0;}
@media (max-width:640px){
  .edz__tool{padding:6px 8px;gap:2px;}
  .edz__btn,.edz__colorbtn,.edz__sel{min-width:38px;height:38px;}
  .edz__div{display:none;}
}
.edz__btn{min-width:32px;height:32px;padding:0 7px;border-radius:8px;display:flex;align-items:center;justify-content:center;color:var(--edz-sub);cursor:pointer;font-weight:800;font-size:14px;border:0;background:none;}
.edz__btn:hover{background:var(--edz-surface-2);color:var(--edz-text);}
.edz__btn--ins{color:var(--edz-accent);}
.edz__btn--ins:hover{background:var(--edz-accent-soft);}
.edz__btn.is-on{background:var(--edz-accent-soft);color:var(--edz-accent);}
.edz__div{width:1px;height:18px;background:var(--edz-border);margin:0 5px;}

/* 드롭다운/팝오버 공용 래퍼 */
.edz__fmt{position:relative;display:inline-flex;}

/* 본문 포맷 선택 (본문 ▼) */
.edz__sel{display:inline-flex;align-items:center;gap:4px;height:32px;padding:0 10px;border:0;background:none;border-radius:8px;font-size:13.5px;font-weight:700;color:var(--edz-text);cursor:pointer;font-family:inherit;white-space:nowrap;}
.edz__sel:hover{background:var(--edz-surface-2);}

/* 글자색 버튼 (A + 색상바) */
.edz__colorbtn{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;width:32px;height:32px;border:0;background:none;border-radius:8px;cursor:pointer;font-weight:900;font-size:14px;color:var(--edz-text);}
.edz__colorbtn:hover{background:var(--edz-surface-2);}
.edz__colorbar{display:block;width:16px;height:3px;border-radius:2px;margin-top:1px;background:var(--edz-accent);}

/* 팝오버 공통 */
.edz__pop{position:absolute;top:38px;left:0;z-index:20;display:flex;gap:6px;padding:8px;background:var(--edz-bg);border:1px solid var(--edz-border);border-radius:10px;box-shadow:0 6px 20px rgba(0,0,0,.14);}
.edz__pop[hidden]{display:none;}
.edz__pop{flex-wrap:wrap;max-width:172px;}
.edz__sw{width:20px;height:20px;border-radius:50%;cursor:pointer;border:2px solid transparent;box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;}
.edz__sw:hover{border-color:var(--edz-text);}
.edz__sw--none{background:var(--edz-surface-2);border:1px solid var(--edz-border);color:var(--edz-sub);font-size:11px;font-weight:900;line-height:1;}
.edz__sw--none:hover{border-color:var(--edz-accent);color:var(--edz-accent);}
/* 커스텀 color picker 스와치: 무지개 배경 + 안에 native input 숨김 */
.edz__sw--pick{position:relative;overflow:hidden;background:conic-gradient(#ee3b34,#f59e0b,#1c9e4b,#2563eb,#7c3aed,#ee3b34) /* 무지개 프리셋(색 선택기 스와치 장식용) */;border:1px solid var(--edz-border);}
.edz__sw--pick:hover{border-color:var(--edz-text);}
.edz__pick{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer;border:0;padding:0;}
.edz__colorbar--hi{background:#fff3b0;}
#edzHiliteBtn{flex-direction:column;gap:1px;}

/* 이모지 팝오버 */
.edz__pop--emoji{flex-direction:column;gap:8px;padding:10px;width:268px;max-width:268px;}
.edz__emoji-tabs{display:flex;gap:2px;width:100%;border-bottom:1px solid var(--edz-border);padding-bottom:6px;}
.edz__emoji-tab{flex:1;height:30px;border:0;background:none;border-radius:7px;font-size:16px;line-height:1;cursor:pointer;padding:0;}
.edz__emoji-tab:hover{background:var(--edz-surface-2);}
.edz__emoji-tab.is-on{background:var(--edz-accent-soft);}
.edz__emoji-grid{display:grid;grid-template-columns:repeat(8,1fr);gap:1px;width:100%;max-height:196px;overflow-y:auto;}
.edz__emoji{height:30px;border:0;background:none;border-radius:6px;font-size:18px;line-height:1;cursor:pointer;padding:0;display:flex;align-items:center;justify-content:center;}
.edz__emoji:hover{background:var(--edz-surface-2);}

/* 메뉴형 팝오버 (본문/대제목/소제목) */
.edz__pop--menu{flex-direction:column;gap:2px;padding:6px;min-width:118px;}
.edz__pop--menu button{display:block;width:100%;text-align:left;padding:8px 10px;border:0;background:none;border-radius:7px;font-size:13.5px;color:var(--edz-text);cursor:pointer;font-family:inherit;}
.edz__pop--menu button:hover{background:var(--edz-surface-2);}
.edz__mi-h2{font-size:16px;font-weight:800;}
.edz__mi-h3{font-size:14px;font-weight:700;}

/* 아이콘 드롭다운 버튼(정렬·목록) */
.edz__btn--menu{min-width:auto;gap:1px;padding:0 4px 0 6px;}
.edz__menu-caret{opacity:.55;}
/* 아이콘+라벨 메뉴 항목 */
.edz__pop--icons{min-width:150px;}
.edz__pop--icons button{display:flex !important;align-items:center;gap:9px;}
.edz__pop--icons button svg{flex:0 0 auto;color:var(--edz-sub);}

.edz__body{padding:16px;min-height:200px;outline:0;}
.edz .edz__body:focus,.edz .edz__body:focus-visible{outline:0;}
.edz__body:empty::before,.edz__body>p:only-child:has(>br:only-child)::before{content:attr(data-placeholder);color:var(--edz-sub);pointer-events:none;}
.edz__body>p:only-child:has(>br:only-child){position:relative;}
.edz__body>p:only-child:has(>br:only-child)::before{position:absolute;left:0;top:0;}
.edz__body p{margin:0 0 var(--edz-para,0);}
.edz__src{display:block;width:100%;box-sizing:border-box;min-height:200px;padding:16px;border:0;outline:0;resize:vertical;background:var(--edz-bg);color:var(--edz-text);font:13px/1.6 ui-monospace,SFMono-Regular,Consolas,monospace;}
.edz__src[hidden]{display:none;}
.edz.is-src .edz__body{display:none;}
.edz.is-src .edz__tool .edz__btn:not(#edzMoreBtn),.edz.is-src .edz__tool .edz__sel,.edz.is-src .edz__tool .edz__colorbtn{opacity:.4;pointer-events:none;}
.edz__foot{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:6px 14px;border-top:1px solid var(--edz-border);background:var(--edz-surface-2);font-size:12px;color:var(--edz-sub);}
.edz__count{font-variant-numeric:tabular-nums;white-space:nowrap;}
.edz__body.is-drop{background:var(--edz-accent-soft);outline:2px dashed var(--edz-accent);outline-offset:-6px;}
.edz__btn:focus-visible,.edz__sel:focus-visible,.edz__colorbtn:focus-visible,.edz__pop--menu button:focus-visible,.edz__modal-ok:focus-visible,.edz__modal-cancel:focus-visible{outline:2px solid var(--edz-accent);outline-offset:1px;}
.edz__pop:not([hidden]){animation:edz-pop .12s ease-out;}
@keyframes edz-pop{from{opacity:0;transform:translateY(-4px) scale(.98);}to{opacity:1;transform:none;}}
@media (prefers-reduced-motion:reduce){.edz__pop:not([hidden]){animation:none;}.edz{transition:none;}}
@media (max-width:640px){.edz__hint{display:none;}}
.edz__body img.edz-img-selected{outline:2px solid var(--edz-accent,#3d6bff);outline-offset:2px;border-radius:2px;}

/* 표 편집 플로팅 툴바 */
.edz__ttool{position:absolute;z-index:30;display:flex;align-items:center;gap:3px;padding:5px 7px;background:var(--edz-bg);border:1px solid var(--edz-border);border-radius:10px;box-shadow:0 6px 20px rgba(0,0,0,.16);}
.edz__ttool[hidden]{display:none;}
.edz__ttool-btn{display:inline-flex;align-items:center;gap:4px;height:28px;padding:0 9px;border:0;background:none;border-radius:7px;font-size:12.5px;font-weight:700;color:var(--edz-sub);cursor:pointer;font-family:inherit;white-space:nowrap;}
.edz__ttool-btn:hover{background:var(--edz-surface-2);color:var(--edz-text);}
.edz__ttool-ci{width:13px;height:13px;border-radius:3px;border:1px solid var(--edz-border);background:conic-gradient(#ee3b34,#f59e0b,#1c9e4b,#2563eb,#7c3aed,#ee3b34) /* 무지개 프리셋(색 선택기 스와치 장식용) */;}
.edz__ttool .edz__pop{top:34px;}

/* 에디터 레이어(모달) */
.edz__modal{position:absolute;inset:0;z-index:40;display:flex;align-items:center;justify-content:center;background:rgba(20,23,29,.4);}
.edz__modal[hidden]{display:none;}
.edz__modal-box{width:min(340px,90%);background:var(--edz-bg);border:1px solid var(--edz-border);border-radius:14px;box-shadow:0 12px 40px rgba(0,0,0,.28);padding:20px;}
.edz__modal-h{font-size:16px;font-weight:800;color:var(--edz-text);margin-bottom:16px;}
.edz__modal-fields{display:flex;gap:12px;}
.edz__field{flex:1;display:flex;align-items:center;gap:8px;font-size:13.5px;font-weight:700;color:var(--edz-sub);}
.edz__num{flex:1;width:100%;padding:9px 11px;border:1px solid var(--edz-border);border-radius:9px;background:var(--edz-surface-2);font:inherit;font-size:14px;color:var(--edz-text);outline:0;}
.edz__num:focus{border-color:var(--edz-accent);}
.edz__tgrid{display:grid;grid-template-columns:repeat(10,1fr);gap:3px;margin-bottom:8px;touch-action:none;user-select:none;-webkit-user-select:none;}
.edz__tgrid-cell{aspect-ratio:1/1;border:1px solid var(--edz-border);border-radius:3px;background:var(--edz-surface-2);cursor:pointer;}
.edz__tgrid-cell.is-on{background:var(--edz-accent);border-color:var(--edz-accent);opacity:.85;}
.edz__tgrid-label{font-size:12.5px;font-weight:700;color:var(--edz-sub);margin-bottom:14px;min-height:18px;}
.edz__modal-hint{font-size:12px;color:var(--edz-sub);margin-top:12px;line-height:1.5;}
.edz__modal-btns{display:flex;justify-content:flex-end;gap:8px;margin-top:18px;}
.edz__modal-cancel,.edz__modal-ok{font-size:13.5px;font-weight:800;padding:9px 18px;border-radius:10px;cursor:pointer;border:1px solid var(--edz-border);background:var(--edz-bg);color:var(--edz-sub);}
.edz__modal-cancel:hover{border-color:var(--edz-accent);color:var(--edz-accent);}
.edz__modal-ok{background:var(--edz-accent);border-color:var(--edz-accent);color:#fff;}
.edz__modal-ok:hover{filter:brightness(.94);}

/* 동영상 레이어 — 링크 붙여넣기 자동 인식 */
.edz__modal--video .edz__modal-box{width:min(460px,92%);}
.edz__vguide{font-size:12.5px;color:var(--edz-sub);margin:0 0 10px;line-height:1.5;}
.edz__vurl{width:100%;box-sizing:border-box;padding:10px 12px;border:1px solid var(--edz-border);border-radius:9px;background:var(--edz-surface-2);font:inherit;font-size:13.5px;color:var(--edz-text);outline:0;}
.edz__vurl:focus{border-color:var(--edz-accent);}
.edz__vplat{margin-top:8px;font-size:12px;font-weight:700;color:var(--edz-accent);}
.edz__vpreview{margin-top:12px;}
.edz__vpreview iframe{display:block;}
.edz__verr{margin-top:10px;font-size:12.5px;color:var(--edz-accent);font-weight:700;}
.edz__modal-ok[disabled]{opacity:.5;cursor:not-allowed;}
.edz__modal-ok[disabled]:hover{filter:none;}

/* 링크 레이어 — URL 입력 + 옵션 체크박스 */
.edz__modal--link .edz__modal-box{width:min(420px,92%);}
.edz__lurl{width:100%;box-sizing:border-box;padding:10px 12px;border:1px solid var(--edz-border);border-radius:9px;background:var(--edz-surface-2);font:inherit;font-size:13.5px;color:var(--edz-text);outline:0;}
.edz__lurl:focus{border-color:var(--edz-accent);}
.edz__lopt{display:flex;align-items:center;gap:7px;margin-top:11px;font-size:13px;font-weight:600;color:var(--edz-sub);cursor:pointer;user-select:none;}
.edz__lopt input{width:15px;height:15px;accent-color:var(--edz-accent);cursor:pointer;}
.edz__lerr{margin-top:10px;}


/* 파일 첨부(xeUploader)는 코어 기본 스타일(jquery.fileupload.css + ckeditor/file_upload.html)을
   그대로 사용한다. editorZ 는 별도 재스킨하지 않아 코어에 탑재된 파일첨부 UI 와 동일하게 보인다. */

/* 파일첨부 드롭존 안정화:
   코어 기본은 호버 시 안내문구(dropzone-message)를 숨기고 용량제한(upload_info)을
   대신 보여주는데, 그 display 토글 때문에 flex 아이템이 빠졌다 들어오며 칸 높이가
   흔들렸다. 용량제한을 호버와 무관하게 버튼 옆에 늘 함께 표시해 토글을 없앤다. */
.edz .xefu-dropzone p.xefu-dropzone-message,
.edz .xefu-dropzone:hover p.xefu-dropzone-message{display:inline-block !important;flex:0 1 auto !important;min-width:0 !important;}
.edz .xefu-dropzone p.upload_info,
.edz .xefu-dropzone:hover p.upload_info{display:inline-block !important;flex:0 0 auto !important;margin:0 0 0 8px !important;font-size:12px;color:var(--edz-sub);opacity:.7;white-space:nowrap;}
.edz .xefu-dropzone .allowed_filetypes_container{display:none !important;}
.edz .xefu-dropzone{padding-left:14px !important;padding-right:14px !important;}
/* 첨부영역(점선 박스)이 에디터 좌우 끝까지 꽉 차 본문(16px)보다 넓어 보이던 것 →
   컨테이너에 좌우 바깥 여백을 줘 본문 텍스트와 같은 라인에 맞춘다. */
.edz .xefu-container{margin:4px 16px 14px !important;}