/* ===== JJEditor 토큰 피커 오버레이 ===== */
#jj-pick-overlay[hidden]{ display:none !important; }
#jj-pick-overlay{
  position:fixed; inset:0; z-index:10040;
  background:rgba(0,0,0,.35);
  display:flex; align-items:center; justify-content:center;
}

/* 패널 크기는 JS가 --panel-w / --panel-h 로 주입(에디터 폭 기준) */
#jj-pick-overlay .jj-pick{
  --panel-w: 900px;        /* JS에서 재설정 */
  --panel-h: 72vh;         /* JS에서 재설정 */
  width:min(var(--panel-w), 96vw);
  max-height:var(--panel-h);
  background:#fff; border-radius:10px;
  box-shadow:0 16px 48px rgba(0,0,0,.2), 0 4px 12px rgba(0,0,0,.1);
  display:flex; flex-direction:column; overflow:hidden;
}

.jj-pick-head{
  display:flex; align-items:center; justify-content:space-between;
  padding:10px 14px; border-bottom:1px solid rgba(0,0,0,.08);
}
.jj-pick-title{ font-weight:600; }
.jj-pick-close{
  border:1px solid rgba(0,0,0,.2); background:#fff; border-radius:6px;
  padding:6px 10px; cursor:pointer;
}

/* ===== 목록 영역: 기본은 (이미지) 가로 슬라이드 ===== */
.jj-pick-track{
  --pick-size: 84px;     /* 이미지 썸네일 크기 */
  --pick-gap: 12px;
  padding:14px;
  overflow-x:auto; overflow-y:hidden;
  display:flex; gap:var(--pick-gap);
}

/* 공통 카드(간소화) */
.jj-pick-item{
  display:flex; flex-direction:column; align-items:center;
  gap:8px; border:1px solid rgba(0,0,0,.08); border-radius:10px; background:#fff;
  padding:10px; min-width:calc(var(--pick-size) + 24px);
  cursor:pointer;
  transition:box-shadow .15s ease, transform .08s ease;
}
.jj-pick-item:hover{ box-shadow:0 2px 10px rgba(0,0,0,.08); transform:translateY(-1px); }
.jj-pick-item .meta{
  display:flex; flex-direction:column; align-items:center;
  max-width:calc(var(--pick-size) + 8px);
}
.jj-pick-item .meta .name{
  font-size:13px; line-height:1.2; text-align:center;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%;
}
.jj-pick-item .meta .sub{ font-size:11px; color:#888; }

/* 이미지 카드 */
.jj-pick-item.is-image .thumb{
  width:var(--pick-size); height:var(--pick-size);
  background:#f3f4f6 center/cover no-repeat;
  border-radius:6px;
}

/* ===== 파일 모드: 세로 리스트(상하 스크롤) ===== */
#jj-pick-overlay .jj-pick[data-kind="file"] .jj-pick-track{
  --row-icon: 44px;
  padding:10px 12px;
  display:flex; flex-direction:column; gap:10px;
  overflow-x:hidden; overflow-y:auto;
}
#jj-pick-overlay .jj-pick[data-kind="file"] .jj-pick-item{
  flex-direction:row; align-items:center;
  min-width:0; width:100%;
  padding:10px 12px;
}
#jj-pick-overlay .jj-pick[data-kind="file"] .jj-pick-item .filechip{
  width:var(--row-icon); height:var(--row-icon);
  display:flex; align-items:center; justify-content:center;
  border-radius:8px; background:#f6f6f6; margin-right:12px; flex:0 0 var(--row-icon);
}
#jj-pick-overlay .jj-pick[data-kind="file"] .jj-pick-item .filechip i{ font-size:22px; color:#555; }
#jj-pick-overlay .jj-pick[data-kind="file"] .jj-pick-item .meta{
  align-items:flex-start; max-width:none; flex:1 1 auto;
}
#jj-pick-overlay .jj-pick[data-kind="file"] .jj-pick-item .meta .name{
  text-align:left; font-size:13px; max-width:100%;
}

/* 래퍼가 반드시 폭을 가질 수 있게 */
.jjeditor-root .jj-editor .jj-img-wrap{ display:inline-block !important; }