/* ============================================================
   ZZAN 에디터 스킨 — 라이트/다크 자체 토큰(사이트 --accent 등이 없는 관리자/팝업 컨텍스트에서도
   동작해야 하므로 자체 변수로 정의). 템플릿·스티커 UI 없음.
   ============================================================ */
.zbed{--zbed-bg:#fff;--zbed-surface-2:#f8f9fb;--zbed-border:#e8eaef;--zbed-text:#15171c;--zbed-sub:#5d646f;--zbed-accent:#ee3b34;--zbed-accent-soft:#fdecea;
  position:relative;border:1px solid var(--zbed-border);border-radius:12px;overflow:hidden;background:var(--zbed-bg);}
.zbed.dark{--zbed-bg:#171a21;--zbed-surface-2:#1d212a;--zbed-border:#262b34;--zbed-text:#eceef3;--zbed-sub:#a4abb8;--zbed-accent:#ff5749;--zbed-accent-soft:#2a1816;}

.zbed__tool{display:flex;align-items:center;gap:3px;padding:8px 10px;border-bottom:1px solid var(--zbed-border);flex-wrap:wrap;background:var(--zbed-bg);}
.zbed__btn{min-width:32px;height:32px;padding:0 7px;border-radius:8px;display:flex;align-items:center;justify-content:center;color:var(--zbed-sub);cursor:pointer;font-weight:800;font-size:14px;border:0;background:none;}
.zbed__btn:hover{background:var(--zbed-surface-2);color:var(--zbed-text);}
.zbed__btn--ins{color:var(--zbed-accent);}
.zbed__btn--ins:hover{background:var(--zbed-accent-soft);}
.zbed__btn.is-on{background:var(--zbed-accent-soft);color:var(--zbed-accent);}
.zbed__div{width:1px;height:18px;background:var(--zbed-border);margin:0 5px;}

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

/* 본문 포맷 선택 (본문 ▼) */
.zbed__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(--zbed-text);cursor:pointer;font-family:inherit;white-space:nowrap;}
.zbed__sel:hover{background:var(--zbed-surface-2);}

/* 글자색 버튼 (A + 색상바) */
.zbed__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(--zbed-text);}
.zbed__colorbtn:hover{background:var(--zbed-surface-2);}
.zbed__colorbar{display:block;width:16px;height:3px;border-radius:2px;margin-top:1px;background:var(--zbed-accent);}

/* 팝오버 공통 */
.zbed__pop{position:absolute;top:38px;left:0;z-index:20;display:flex;gap:6px;padding:8px;background:var(--zbed-bg);border:1px solid var(--zbed-border);border-radius:10px;box-shadow:0 6px 20px rgba(0,0,0,.14);}
.zbed__pop[hidden]{display:none;}
.zbed__pop{flex-wrap:wrap;max-width:172px;}
.zbed__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;}
.zbed__sw:hover{border-color:var(--zbed-text);}
.zbed__sw--none{background:var(--zbed-surface-2);border:1px solid var(--zbed-border);color:var(--zbed-sub);font-size:11px;font-weight:900;line-height:1;}
.zbed__sw--none:hover{border-color:var(--zbed-accent);color:var(--zbed-accent);}
/* 커스텀 color picker 스와치: 무지개 배경 + 안에 native input 숨김 */
.zbed__sw--pick{position:relative;overflow:hidden;background:conic-gradient(#ee3b34,#f59e0b,#1c9e4b,#2563eb,#7c3aed,#ee3b34);border:1px solid var(--zbed-border);}
.zbed__sw--pick:hover{border-color:var(--zbed-text);}
.zbed__pick{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer;border:0;padding:0;}
.zbed__colorbar--hi{background:#fff3b0;}
#zbedHiliteBtn{flex-direction:column;gap:1px;}

/* 메뉴형 팝오버 (본문/대제목/소제목) */
.zbed__pop--menu{flex-direction:column;gap:2px;padding:6px;min-width:118px;}
.zbed__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(--zbed-text);cursor:pointer;font-family:inherit;}
.zbed__pop--menu button:hover{background:var(--zbed-surface-2);}
.zbed__mi-h2{font-size:16px;font-weight:800;}
.zbed__mi-h3{font-size:14px;font-weight:700;}

.zbed__body{padding:16px;min-height:200px;font-size:16px;line-height:1.8;color:var(--zbed-text);outline:0;}
.zbed__body:empty::before{content:'내용을 입력하세요…';color:var(--zbed-sub);}
.zbed__body h2{font-size:21px;font-weight:800;margin:8px 0 12px;}
.zbed__body h3{font-size:18px;font-weight:800;margin:6px 0 10px;}
.zbed__body p{margin:0 0 12px;}
.zbed__body blockquote{margin:12px 0;padding:10px 16px;border-left:3px solid var(--zbed-accent);background:var(--zbed-surface-2);color:var(--zbed-sub);}
.zbed__body a{color:var(--zbed-accent);text-decoration:underline;}
.zbed__body hr{border:0;border-top:1px solid var(--zbed-border);margin:18px 0;}
.zbed__body ul{padding-left:22px;margin:0 0 12px;}
.zbed__body img{max-width:100%;height:auto;}
.zbed__body img.zbed-img-selected{outline:2px solid var(--zbed-accent,#3d6bff);outline-offset:2px;border-radius:2px;}
.zbed__body table.zbed-table{border-collapse:collapse;width:100%;table-layout:fixed;margin:12px 0;}
.zbed__body table.zbed-table td{border:1px solid var(--zbed-border);padding:8px 10px;min-width:30px;vertical-align:top;word-break:break-word;}
/* 반응형 16:9 임베드 (YouTube 등) — PC/모바일 비율 유지 */
.zbed-embed{position:relative;width:100%;padding-top:56.25%;margin:12px 0;border-radius:10px;overflow:hidden;background:#000;}
.zbed-embed iframe{position:absolute;inset:0;width:100%;height:100%;border:0;}

/* 표 편집 플로팅 툴바 */
.zbed__ttool{position:absolute;z-index:30;display:flex;align-items:center;gap:3px;padding:5px 7px;background:var(--zbed-bg);border:1px solid var(--zbed-border);border-radius:10px;box-shadow:0 6px 20px rgba(0,0,0,.16);}
.zbed__ttool[hidden]{display:none;}
.zbed__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(--zbed-sub);cursor:pointer;font-family:inherit;white-space:nowrap;}
.zbed__ttool-btn:hover{background:var(--zbed-surface-2);color:var(--zbed-text);}
.zbed__ttool-ci{width:13px;height:13px;border-radius:3px;border:1px solid var(--zbed-border);background:conic-gradient(#ee3b34,#f59e0b,#1c9e4b,#2563eb,#7c3aed,#ee3b34);}
.zbed__ttool .zbed__pop{top:34px;}

/* 에디터 레이어(모달) */
.zbed__modal{position:absolute;inset:0;z-index:40;display:flex;align-items:center;justify-content:center;background:rgba(20,23,29,.4);}
.zbed__modal[hidden]{display:none;}
.zbed__modal-box{width:min(340px,90%);background:var(--zbed-bg);border:1px solid var(--zbed-border);border-radius:14px;box-shadow:0 12px 40px rgba(0,0,0,.28);padding:20px;}
.zbed__modal-h{font-size:16px;font-weight:800;color:var(--zbed-text);margin-bottom:16px;}
.zbed__modal-fields{display:flex;gap:12px;}
.zbed__field{flex:1;display:flex;align-items:center;gap:8px;font-size:13.5px;font-weight:700;color:var(--zbed-sub);}
.zbed__num{flex:1;width:100%;padding:9px 11px;border:1px solid var(--zbed-border);border-radius:9px;background:var(--zbed-surface-2);font:inherit;font-size:14px;color:var(--zbed-text);outline:0;}
.zbed__num:focus{border-color:var(--zbed-accent);}
.zbed__modal-hint{font-size:12px;color:var(--zbed-sub);margin-top:12px;line-height:1.5;}
.zbed__modal-btns{display:flex;justify-content:flex-end;gap:8px;margin-top:18px;}
.zbed__modal-cancel,.zbed__modal-ok{font-size:13.5px;font-weight:800;padding:9px 18px;border-radius:10px;cursor:pointer;border:1px solid var(--zbed-border);background:var(--zbed-bg);color:var(--zbed-sub);}
.zbed__modal-cancel:hover{border-color:var(--zbed-accent);color:var(--zbed-accent);}
.zbed__modal-ok{background:var(--zbed-accent);border-color:var(--zbed-accent);color:#fff;}
.zbed__modal-ok:hover{filter:brightness(.94);}

/* 동영상 레이어 */
.zbed__modal--video .zbed__modal-box{width:min(460px,92%);}
.zbed__vtab{display:flex;gap:6px;margin-bottom:14px;}
.zbed__vtab-btn{flex:1;padding:9px;border:1px solid var(--zbed-border);background:var(--zbed-bg);border-radius:9px;font-size:13px;font-weight:800;color:var(--zbed-sub);cursor:pointer;font-family:inherit;}
.zbed__vtab-btn.is-on{background:var(--zbed-accent);border-color:var(--zbed-accent);color:#fff;}
.zbed__vurl{width:100%;padding:10px 12px;border:1px solid var(--zbed-border);border-radius:9px;background:var(--zbed-surface-2);font:inherit;font-size:13.5px;color:var(--zbed-text);outline:0;}
.zbed__vurl:focus{border-color:var(--zbed-accent);}
.zbed__vpreview{margin-top:12px;}
.zbed__vpreview .zbed-embed{margin:0;}
.zbed__verr{margin-top:10px;font-size:12.5px;color:var(--zbed-accent);font-weight:700;}
.zbed__vfile-hint{font-size:13px;color:var(--zbed-sub);line-height:1.6;margin-bottom:14px;}
.zbed__vfile-open{width:100%;}

/* ============================================================
   하단 파일 첨부(xeUploader, modules/editor/skins/ckeditor/file_upload.html 재사용)
   — 업로드 로직/DOM은 코어 그대로, 시안(write 목업 .wdrop)에 맞춰 CSS만 재스킨.
   실제 DOM 클래스는 common/js/plugins/jquery.fileupload/js/main.js 템플릿 기준.
   ============================================================ */
/* 컨테이너/목록 감싼 기본 테두리·스크롤박스 제거 */
.zbed .xefu-container{padding:14px 16px 16px;background:var(--zbed-bg);border:0 !important;box-shadow:none !important;}
.zbed .xefu-list,.zbed .xefu-list-images,.zbed .xefu-list-files{border:0 !important;max-height:none !important;height:auto !important;overflow:visible !important;}

/* 드롭존: 고정 min-height + 세로중앙정렬 → 안내문구가 바뀌어도 높이 안 변함(에디터 확장 방지) */
.zbed .xefu-dropzone{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:108px;border:2px dashed var(--zbed-border);border-radius:12px;padding:14px 18px;text-align:center;transition:border-color .15s,background .15s;}
.zbed .xefu-dropzone:hover{border-color:var(--zbed-accent);background:var(--zbed-accent-soft);}
/* 드롭존 안의 "파일 선택" 버튼: 플러그인 기본 테두리/배경 제거(이상한 사각형 원인) */
.zbed .xefu-dropzone .xefu-btn.fileinput-button,
.zbed .xefu-dropzone .fileinput-button{position:relative;display:inline-flex;flex-direction:column;align-items:center;gap:6px;border:0 !important;background:none !important;box-shadow:none !important;padding:0 !important;cursor:pointer;width:100%;overflow:visible;}
.zbed .xefu-dropzone .xefu-btn.fileinput-button > span{font-size:14px;font-weight:800;color:var(--zbed-sub);}
.zbed .xefu-dropzone .xefu-btn.fileinput-button input[type="file"]{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer;font-size:0;}
.zbed .xefu-dropzone-message{font-size:12.5px;color:var(--zbed-sub);margin-top:4px;}
.zbed .xefu-dropzone .upload_info{font-size:11.5px;color:var(--zbed-sub);opacity:.7;margin-top:6px;}

.zbed .xefu-progress-status{font-size:12.5px;color:var(--zbed-sub);margin-top:10px;text-align:center;}
.zbed .xefu-progressbar{height:6px;border-radius:999px;background:var(--zbed-surface-2);overflow:hidden;margin-top:8px;}
.zbed .xefu-progressbar>div{height:100%;background:var(--zbed-accent);}

/* "1개 첨부 됨 … 본문 삽입 / 선택 삭제" 컨트롤 바 (정보 좌 / 버튼 우) */
.zbed .xefu-controll{display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:12px;color:var(--zbed-sub);margin-top:12px;}
.zbed .xefu-controll > div:last-child{display:flex;gap:6px;flex:0 0 auto;}
.zbed .xefu-controll input[type="button"]{font-size:12px;font-weight:700;color:var(--zbed-sub);background:var(--zbed-surface-2);border:1px solid var(--zbed-border);border-radius:8px;padding:6px 11px;cursor:pointer;}
.zbed .xefu-controll input[type="button"]:hover{border-color:var(--zbed-accent);color:var(--zbed-accent);}

/* ===== 파일 목록 ===== 실제 DOM: li.xefu-file-image > strong.name + span.info(> size + span>span.thumbnail + span>input + button.set-cover)
   중첩 wrapper span을 display:contents로 투명화해 썸네일/체크박스/표지버튼을 카드(li) 기준으로 절대배치 ===== */
.zbed .xefu-list{margin-top:14px;}
.zbed .xefu-list-images ul{list-style:none;display:grid;grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:10px;padding:0;margin:0;}

.zbed .xefu-file-image{position:relative;aspect-ratio:1/1;border:1px solid var(--zbed-border);border-radius:10px;overflow:hidden;background:var(--zbed-surface-2);}
.zbed .xefu-file-image .xefu-file-info{display:contents;}
.zbed .xefu-file-image .xefu-file-info > span{display:contents;}
.zbed .xefu-thumbnail{position:absolute;inset:0;background-size:cover;background-position:center;background-repeat:no-repeat;}
.zbed .xefu-file-size{display:none;}
.zbed .xefu-file-image .xefu-file-name{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:6px 8px;font-size:11px;font-weight:700;color:#fff;background:linear-gradient(to top,rgba(0,0,0,.8),transparent);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}

/* 동영상: 재생 오버레이 */
.zbed .xefu-file-video{position:absolute;inset:0;z-index:1;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.28);}
.zbed .xefu-file-video-play{width:34px;height:34px;border-radius:50%;background:rgba(255,255,255,.9);}
.zbed .xefu-file-video-play::after{content:"";display:block;width:0;height:0;border-style:solid;border-width:6px 0 6px 10px;border-color:transparent transparent transparent #15171c;margin:8px 0 0 12px;}

/* 선택 체크박스 (좌상단) */
.zbed .xefu-file-image input[type="checkbox"]{position:absolute;top:6px;left:6px;z-index:3;appearance:none;-webkit-appearance:none;width:18px;height:18px;border-radius:5px;border:2px solid #fff;background:rgba(0,0,0,.42);cursor:pointer;margin:0;box-shadow:0 1px 3px rgba(0,0,0,.3);}
.zbed .xefu-file-image input[type="checkbox"]:checked{background:var(--zbed-accent);border-color:var(--zbed-accent);}
.zbed .xefu-file-image input[type="checkbox"]:checked::after{content:"✓";position:absolute;inset:0;color:#fff;font-size:12px;font-weight:900;line-height:14px;text-align:center;}

/* 표지(썸네일) 지정 버튼 (우상단) — xi 아이콘 폰트 미로드 → ★ 텍스트로 대체 */
.zbed .xefu-act-set-cover{position:absolute;top:6px;right:6px;z-index:3;width:22px;height:22px;border-radius:50%;border:0;background:rgba(0,0,0,.5);cursor:pointer;font-size:0;display:grid;place-items:center;padding:0;box-shadow:0 1px 3px rgba(0,0,0,.3);}
.zbed .xefu-act-set-cover i{display:none;}
.zbed .xefu-act-set-cover::before{content:"★";font-size:12px;line-height:1;color:#fff;}
.zbed .xefu-act-set-cover:hover{background:var(--zbed-accent);}
.zbed .xefu-is-cover-image{outline:2px solid var(--zbed-accent);outline-offset:-2px;}
.zbed .xefu-is-cover-image .xefu-act-set-cover{background:var(--zbed-accent);}

/* 일반(비이미지) 파일 = 리스트 행 */
.zbed .xefu-list-files ul{list-style:none;padding:0;margin:8px 0 0;}
.zbed .xefu-list-files li.xefu-file{display:flex;align-items:center;gap:10px;padding:9px 11px;border:1px solid var(--zbed-border);border-radius:9px;background:var(--zbed-surface-2);margin-bottom:6px;}
.zbed .xefu-list-files .xefu-file-name{flex:1;font-size:13px;font-weight:600;color:var(--zbed-text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.zbed .xefu-list-files .xefu-file-info{display:flex;align-items:center;gap:8px;font-size:11px;color:var(--zbed-sub);}
.zbed .xefu-list-files .xefu-file-size{display:inline;}
.zbed .xefu-list-files input[type="checkbox"]{width:15px;height:15px;accent-color:var(--zbed-accent);cursor:pointer;}

/* ===== 모바일 파일첨부 정리 ===== */
@media (max-width:640px){
  .zbed .xefu-container{padding:10px 12px 12px;}
  .zbed .xefu-dropzone{min-height:84px;padding:12px;}
  .zbed .xefu-dropzone .xefu-btn.fileinput-button > span{font-size:13px;}
  .zbed .xefu-dropzone-message,.zbed .xefu-dropzone .upload_info{font-size:11px;}
  /* 컨트롤바: 정보 위 / 버튼 아래 꽉차게 */
  .zbed .xefu-controll{flex-direction:column;align-items:stretch;gap:8px;}
  .zbed .xefu-controll > div:first-child{font-size:11px;line-height:1.4;}
  .zbed .xefu-controll > div:last-child{width:100%;}
  .zbed .xefu-controll input[type="button"]{flex:1;text-align:center;padding:8px 6px;}
  /* 썸네일 그리드 축소 */
  .zbed .xefu-list-images ul{grid-template-columns:repeat(auto-fill,minmax(78px,1fr));gap:8px;}
}

/* 짠TV 탭 (동영상 레이어) */
.zbed__ztv-head{display:flex;align-items:center;gap:10px;margin-bottom:12px;font-size:12.5px;color:var(--zbed-sub);}
.zbed__ztv-up{margin-left:auto;flex:0 0 auto;padding:7px 12px;border-radius:999px;background:var(--zbed-accent);color:#fff;font-size:12px;font-weight:800;text-decoration:none;}
.zbed__ztv-list{max-height:232px;overflow-y:auto;display:flex;flex-direction:column;gap:6px;}
.zbed__ztv-item{display:flex;align-items:center;gap:12px;border:1px solid var(--zbed-border);border-radius:10px;background:#fff;padding:7px;cursor:pointer;text-align:left;font-family:inherit;transition:border-color .12s,background .12s;}
.zbed__ztv-item:hover{border-color:var(--zbed-accent);background:var(--zbed-bg);}
.zbed__ztv-th{flex:0 0 104px;width:104px;aspect-ratio:16/9;border-radius:7px;overflow:hidden;background:var(--zbed-bg);display:block;}
.zbed__ztv-th img{width:100%;height:100%;object-fit:cover;display:block;}
.zbed__ztv-tt{flex:1;min-width:0;font-size:13px;font-weight:700;color:var(--zbed-text,#222);line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.zbed__ztv-empty{grid-column:1/-1;text-align:center;color:var(--zbed-sub);font-size:13px;padding:28px 0;line-height:1.7;}

/* 짠TV 탭 — 모달 내 업로드 뷰 */
.zbed__ztv-up{flex:0 0 auto;margin-left:auto;padding:7px 12px;border:0;border-radius:999px;background:var(--zbed-accent);color:#fff;font-size:12px;font-weight:800;cursor:pointer;font-family:inherit;}
.zbed__ztv-drop{display:flex;align-items:center;justify-content:center;border:2px dashed var(--zbed-border);border-radius:12px;padding:26px 16px;text-align:center;background:var(--zbed-bg);cursor:pointer;transition:border-color .15s;margin-bottom:10px;}
.zbed__ztv-drop:hover,.zbed__ztv-drop.drag{border-color:var(--zbed-accent);}
.zbed__ztv-dropt{font-size:13px;font-weight:700;color:var(--zbed-sub);}
.zbed__ztv-title,.zbed__ztv-game,.zbed__ztv-vis{width:100%;box-sizing:border-box;border:1px solid var(--zbed-border);border-radius:9px;background:#fff;font:inherit;font-size:13.5px;padding:9px 12px;outline:0;margin-bottom:8px;}
.zbed__ztv-title:focus,.zbed__ztv-game:focus{border-color:var(--zbed-accent);}
.zbed__ztv-row{display:flex;gap:8px;}
.zbed__ztv-row .zbed__ztv-game{flex:1;}
.zbed__ztv-row .zbed__ztv-vis{flex:0 0 160px;}
.zbed__ztv-prog{height:7px;border-radius:999px;background:var(--zbed-bg);overflow:hidden;margin:6px 0 4px;}
.zbed__ztv-prog span{display:block;height:100%;width:0;background:var(--zbed-accent);transition:width .2s;}
.zbed__ztv-progt{font-size:12px;color:var(--zbed-sub);text-align:center;margin-bottom:6px;}
.zbed__ztv-upbtns{display:flex;justify-content:space-between;gap:8px;margin-top:6px;}
.zbed__ztv-hint{font-size:12px;color:var(--zbed-sub);margin-top:10px;line-height:1.6;}