/* ===== JJEditor: 토큰 미리보기(이미지/파일) + 컨텍스트 팝오버 ===== */

/* 공통 변수 */
.jjeditor-root .jj-editor{
  --jj-file-row: 44px; /* 파일 칩 높이(피커 리스트와 동일) */
}

/* ── 이미지 ───────────────────────────────────── */
.jjeditor-root .jj-editor .jj-img-wrap{
  display:inline-block; position:relative;
  outline:1px dashed transparent; border-radius:4px;
  vertical-align:baseline; margin:2px 0;
}
.jjeditor-root .jj-editor .jj-img-wrap.is-active{ outline-color:rgba(0,0,0,.28); }
.jjeditor-root .jj-editor .jj-img-wrap img{
  display:block; height:auto; max-width:100%;
  border-radius:3px;
}

/* 리사이즈 핸들 + 사이즈 라벨 */
.jjeditor-root .jj-editor .jj-img-wrap .jj-rz{
  position:absolute; right:-6px; bottom:-6px;
  width:12px; height:12px; border-radius:3px;
  background:#fff; border:1px solid rgba(0,0,0,.45);
  box-shadow:0 0 0 1px rgba(255,255,255,.9);
  cursor:nwse-resize;
}
.jjeditor-root .jj-editor .jj-img-wrap .jj-rz-tip{
  position:absolute; right:0; bottom:100%;
  transform:translate(2px,-8px);
  padding:2px 6px; font-size:11px; line-height:1.25;
  color:#fff; background:rgba(0,0,0,.75); border-radius:4px;
  pointer-events:none; opacity:0; transition:opacity .12s ease;
}
.jjeditor-root .jj-editor .jj-img-wrap.is-resizing .jj-rz-tip{ opacity:1; }

/* ── 파일 칩(피커 리스트와 동일 라인 높이) ───────────────── */
/* 아이콘 배경을 ::before로 그리고, 상하 테두리가 가려지지 않게 inset(1px) 처리 */
.jjeditor-root .jj-editor .jj-filechip{
  position:relative;
  display:inline-flex; align-items:center; gap:10px;
  height:var(--jj-file-row);
  padding:0 12px 0 calc(var(--jj-file-row) + 12px); /* 왼쪽은 아이콘폭만큼 확보 */
  border:1px solid rgba(0,0,0,.18);
  border-radius:8px; background:#f8f9fb; color:#333;
  font-size:13px; line-height:1; vertical-align:baseline;
  outline:1px dashed transparent;
  min-width:320px;
  width:-moz-fit-content; width:fit-content;
  overflow:hidden;
}
.jjeditor-root .jj-editor .jj-filechip.is-active{ outline-color:rgba(0,0,0,.28); }

/* 아이콘 배경(테두리 안쪽으로 1px inset → 상·하 테두리 노출) */
.jjeditor-root .jj-editor .jj-filechip::before{
  content:""; position:absolute; left:1px; top:1px; bottom:1px;
  width:calc(var(--jj-file-row) - 2px);
  background:#f0f2f5;
  border-right:1px solid rgba(0,0,0,.08);
  border-top-left-radius:7px; border-bottom-left-radius:7px;
}

/* 실제 아이콘(배경 없음, ::before 위에 얹힘) */
.jjeditor-root .jj-editor .jj-filechip .filechip{
  position:absolute; left:0; top:0; bottom:0;
  width:var(--jj-file-row);
  display:flex; align-items:center; justify-content:center;
  pointer-events:none; /* 클릭은 전체 칩으로 */
}
.jjeditor-root .jj-editor .jj-filechip .filechip i{ font-size:20px; color:#555; opacity:.85; }

.jjeditor-root .jj-editor .jj-filechip .name{
  max-width:none; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}

/* 편의: 미리보기 선택 시 커서 보정 */
.jjeditor-root .jj-editor .jj-img-wrap[contenteditable="false"],
.jjeditor-root .jj-editor .jj-filechip[contenteditable="false"]{
  -webkit-user-select: text; user-select: text;
}

/* ── 컨텍스트 팝오버(정렬/삭제) ─────────────────────────── */
#jj-attach-pop[hidden]{ display:none !important; }
#jj-attach-pop{
  position:fixed; z-index:10060;
  background:#fff; border:1px solid rgba(0,0,0,.15);
  box-shadow:0 10px 30px rgba(0,0,0,.15), 0 2px 8px rgba(0,0,0,.08);
  border-radius:10px; padding:6px;
  display:flex; align-items:center; gap:4px;
}
/* 캐럿(아래쪽, 타겟을 가리킴) */
#jj-attach-pop::after,
#jj-attach-pop::before{
  content:""; position:absolute; left:50%; transform:translateX(-50%);
  border:8px solid transparent;
}
#jj-attach-pop::after{ bottom:-16px; border-top-color:#fff; }
#jj-attach-pop::before{ bottom:-17px; border-top-color:rgba(0,0,0,.15); }

/* 버튼 */
#jj-attach-pop .jj-pop-btn{
  width:28px; height:28px; border:0; background:transparent;
  border-radius:6px; cursor:pointer; display:flex; align-items:center; justify-content:center;
}
#jj-attach-pop .jj-pop-btn:hover{ background:rgba(0,0,0,.06); }
#jj-attach-pop .jj-pop-btn.is-active{ background:rgba(0,0,0,.1); }
#jj-attach-pop .jj-pop-btn.danger{ color:#d12a2a; }
#jj-attach-pop .jj-pop-divider{ width:1px; height:20px; background:rgba(0,0,0,.12); margin:0 2px; }

/* 래퍼 고정폭 안에서 이미지를 100%로 채우기 */
.jjeditor-root .jj-editor .jj-img-wrap img{ width:100% !important; height:auto !important; max-width:none !important; }