/* ===== 툴바 색상 버튼(아이콘 소형화 + 스와치) ===== */
.jj-toolbar .jj-color-btn{ position:relative; }
.jj-toolbar .jj-color-btn i{ font-size:14px; }
.jj-toolbar .jj-color-btn .jj-swatch{
  position:absolute; right:3px; bottom:3px; width:9px; height:9px;
  border-radius:50%; border:1px solid rgba(0,0,0,.35); pointer-events:none;
  background:currentColor;
}
.jj-toolbar .jj-color-btn[data-color="back"] .jj-swatch{
  border-radius:2px; width:14px; height:4px; bottom:3px; right:2px;
}

/* ===== 팝오버 ===== */
.jj-color-pop{
  --dot:20px;
  --gap:6px;
  --cols:7; /* 7열 */
  --grid-w: calc(var(--cols) * var(--dot) + (var(--cols) - 1) * var(--gap));
  --sel-ring: 0.5px;   /* 팔레트 선택 링 두께(0.5px/0px 가능) */
  --slash-w: 1.5px;    /* 투명 아이콘 사선 두께(필요 시 0.5px) */

  position:absolute; z-index:10030;
  background:#fff; border:0; border-radius:8px;
  box-shadow:0 8px 24px rgba(0,0,0,.12),0 2px 6px rgba(0,0,0,.08);
  padding:12px 12px 10px;                 /* ⬅ 하단 여백 축소(기존 12px → 6px) */
  min-width: calc(var(--grid-w) + 24px);
}
.jj-color-pop[hidden]{ display:none !important; }

/* 캐럿(툴바 아이콘 중앙을 가리킴: JS가 --arrow-x(px) 설정) */
.jj-color-pop::before,
.jj-color-pop::after{
  content:""; position:absolute; top:-8px;
  left:var(--arrow-x, 50%); transform:translateX(-50%);
  border-left:8px solid transparent; border-right:8px solid transparent;
}
.jj-color-pop::before{ border-bottom:8px solid rgba(0,0,0,.08); top:-9px; }
.jj-color-pop::after { border-bottom:8px solid #fff; }

/* 팔레트: 7열 */
.jj-color-pop .jj-colors{
  display:grid; grid-template-columns: repeat(var(--cols), var(--dot));
  gap:var(--gap);
  width:var(--grid-w);
}

/* 팔레트 점: 원형 → 3px 라운드 정사각 */
.jj-color-pop .dot{
  width:var(--dot); height:var(--dot);
  border-radius:3px; /* ← 여기만 변경 */
  border:1px solid rgba(0,0,0,.18);
  display:flex; align-items:center; justify-content:center; cursor:pointer;
  box-sizing:border-box; background-clip:padding-box;
}
.jj-color-pop .dot > i{ font-size:10px; opacity:0; color:#fff; }

/* 선택 표시: 아주 얇은 안쪽 링 */
.jj-color-pop .dot.active{ box-shadow:0 0 0 var(--sel-ring) rgba(0,0,0,.85) inset; }
.jj-color-pop .dot.active > i{ opacity:1; }

/* 해제(좌상단) */
.jj-color-pop .dot.none{
  background:
    conic-gradient(from 45deg, transparent 0 25%, rgba(0,0,0,.22) 25% 30%, transparent 30% 100%),
    #fff;
}

/* ✅ 투명(우하단): 얇은 사선, 방향 우상→좌하(135deg) */
.jj-color-pop .dot.transparent{
  background:
    linear-gradient(135deg,
      transparent 0 calc(50% - var(--slash-w)/2),
      #d34a4a calc(50% - var(--slash-w)/2) calc(50% + var(--slash-w)/2),
      transparent calc(50% + var(--slash-w)/2) 100%
    ),
    #fff;
}

/* ✅ 투명 선택 시에는 체크(✓) 숨기고 링만 표시 */
.jj-color-pop .dot.transparent.active > i{ opacity:0 !important; }

/* ── 구분선(팔레트와 입력폼 사이) */
.jj-color-pop .jj-sep{
  width:var(--grid-w);
  height:0;
  border-top:1px solid rgba(0,0,0,.12);
  box-shadow:0 1px 0 rgba(255,255,255,.7) inset;
  margin:12px 0;
}

/* 하단 입력영역 — 한 줄 고정(줄바꿈 방지) + 하단 여백 제거 */
.jj-color-pop .jj-row{
  display:flex; align-items:center; gap:10px; width:var(--grid-w);
  flex-wrap: nowrap;            /* 줄바꿈 금지 */
  white-space: nowrap;          /* 텍스트 줄바꿈 억제 */
  box-sizing: border-box;
  margin:0;                     /* 행 자체 마진 제거 */
  padding:0;                    /* 행 자체 패딩 제거 */
}

/* 내부 아이템 공통: 암묵적 마진 제거 */
.jj-color-pop .jj-row > *{ margin:0; }

/* 색 미리보기 칩 */
.jj-color-pop .chip{
  flex:0 0 22px; width:22px; height:22px; display:inline-block;
  border-radius:3px; border:1px solid rgba(0,0,0,.2); background:#000;
}

/* # + HEX 입력 묶음 */
.jj-color-pop .hex-wrap{
  display:flex; align-items:center; gap:6px; flex:1 1 auto;
  min-width:0;                  /* flex 수축 허용(줄바꿈 방지 핵심) */
}

/* '#' 라벨 */
.jj-color-pop .hash{
  color:#777; font-size:15px; line-height:28px; /* 입력 높이와 정렬 */
}

/* HEX 입력 */
.jj-color-pop input[type="text"]{
  flex:1 1 auto; min-width:0;  /* 가변 폭 + 수축 허용 */
  width:100%; height:28px; border:0; outline:0; background:transparent;
  padding:0; font:inherit; font-size:15px; letter-spacing:0.5px;
  line-height:28px;             /* 잔여 하단 공간 제거 */
}

/* 체크박스(존재 시) 기본 마진 제거 */
.jj-color-pop input[type="checkbox"]{
  margin:0; vertical-align:middle;
}

/* 적용 버튼 */
.jj-color-pop button.jj-apply{
  flex:0 0 30px; width:30px; height:30px;     /* 고정폭 버튼 */
  display:flex; align-items:center; justify-content:center;
  border:1px solid rgba(0,0,0,.25); border-radius:6px; background:#fff; cursor:pointer;
  margin-left:8px; line-height:28px;          /* 텍스트/아이콘 정렬 */
}
.jj-color-pop button.jj-apply .v{ font-size:18px; }

/* 멀티라인 배경 하이라이트: 기본/오버라이드 값(컨테이너에만 선언) */
.jjeditor-root .jj-editor{
  --jj-hl-py: .21em;     /* 기본 대칭 세로패딩(폴백) */
  --jj-hl-top: .26em;    /* 위쪽 실제 적용값 */
  --jj-hl-bottom: .16em; /* 아래쪽 실제 적용값 */
}

/* 멀티라인 배경 하이라이트(단일 규칙) */
.jjeditor-root .jj-editor span[style*="background-color"],
.jjeditor-root .jj-editor font[style*="background-color"],
.jjeditor-root .jj-editor mark{
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  /* 위/아래는 각각 변수, 미선언 시 --jj-hl-py 사용 */
  padding: var(--jj-hl-top, var(--jj-hl-py)) .08em var(--jj-hl-bottom, var(--jj-hl-py));
  border-radius:3px;
  background-clip: padding-box;
}