/* File: /plugin/editor/jjeditor/assets/css/jjeditor.css */
/* JJEditor CSS — consolidated, no-dup, right-fixed selector + tooltip + focus ring */

/* ─────────────────────────────────────────────────
   Variables
   - 코너 라운드: --jj-radius (0=직사각형)
   - 우측 스타일 셀렉트 폭: --jj-format-w (120~170px 권장)
   - 아이콘 크기: --jj-icon
────────────────────────────────────────────────── */
:root{
  --jj-radius: 0px;          /* 코너 라운드(px) */
  --jj-format-w: 120px;      /* 스타일 셀렉트 고정폭 */

  --jj-border:#e5e7eb;
  --jj-ui:#f8fafc;
  --jj-text:#111827;
  --jj-muted:#6b7280;
  --jj-accent:#2563eb;
  --jj-focus: 0 0 0 3px rgba(37,99,235,.25);
  --jj-toolbar-h:48px;
  --jj-icon:14px;
}

/* ─────────────────────────────────────────────────
   Fallback textarea
────────────────────────────────────────────────── */
.jjeditor-textarea{
  width:100%;
  min-height:220px;
  padding:16px 18px;
  border:1px solid var(--jj-border);
  border-radius:var(--jj-radius);
  line-height:1.78; font-size:16px;
  display:block; clear:both; margin:0 0 12px;
}

/* ─────────────────────────────────────────────────
   Root / Wrap
────────────────────────────────────────────────── */
.jjeditor-root{ display:block; clear:both; }
.jj-wrap{
  position:relative;
  display:block; clear:both; max-width:100%;
  border:1px solid var(--jj-border); border-radius:var(--jj-radius);
  background:#fff; color:var(--jj-text);
  overflow:visible; margin:0 0 12px;
}

/* 래퍼 포커스 링(모서리까지) */
.jj-wrap:focus-within::after{
  content:""; position:absolute; inset:-2px;
  border-radius: calc(var(--jj-radius) + 2px);
  border:2px solid rgba(37,99,235,.28); pointer-events:none;
}

/* ─────────────────────────────────────────────────
   Toolbar (1줄 고정: 좌측 가변 + 우측 고정)
────────────────────────────────────────────────── */
.jj-toolbar{
  position:relative;
  display:flex; align-items:center; gap:8px;
  flex-wrap: nowrap !important;
  padding:6px 8px; min-height:var(--jj-toolbar-h);
  background:var(--jj-ui); border-bottom:1px solid var(--jj-border);
  overflow:visible;
}

/* 좌측 가변 그룹 */
.jj-left{
  display:flex; align-items:center; gap:6px;
  flex:1 1 auto; min-width:0;
  overflow:visible;
}
.jj-left > *{ flex-shrink:0; }

/* 우측: 더보기 버튼 → 스타일 셀렉트(고정폭) */
.jj-more{
  order:998; flex:0 0 auto;
  margin-left:auto;
  position:relative; z-index:3;
}
.jj-more[hidden]{ display:none !important; }

.jj-format.jj-fixed-right{
  order:999;
  flex: 0 0 var(--jj-format-w);
  width: var(--jj-format-w) !important;
  min-width: var(--jj-format-w);
  max-width: var(--jj-format-w);
  margin-left:8px;
  display:inline-flex; align-items:center;
  position:relative; z-index:2;
}

/* 더보기 드롭다운 */
.jj-more-menu{
  position:absolute; right:8px; top:calc(100% + 6px);
  background:#fff; border:1px solid var(--jj-border); border-radius:6px; padding:6px;
  display:flex; flex-wrap:wrap; gap:6px; min-width:180px; max-width:calc(100% - 16px);
  box-shadow:0 10px 20px rgba(0,0,0,.06); z-index:500;
}
.jj-more-menu[hidden]{ display:none !important; }

/* 줄에서 접힌 원본은 숨김(더보기 메뉴에 복제됨) */
.jj-left > .jj-overflowed{ display:none !important; }

/* ─────────────────────────────────────────────────
   Controls
────────────────────────────────────────────────── */
.jj-btn, .jj-color, .jj-select{ position:relative; }
.jj-btn{
  display:inline-flex; align-items:center; justify-content:center;
  height:36px; padding:0 10px; gap:6px;
  border:1px solid transparent; background:#fff; border-radius:3px; cursor:pointer; line-height:1;
  white-space:nowrap; touch-action:manipulation;
}
/* 활성(토글) 표시 */
.jj-toolbar .jj-btn.is-active,
.jj-toolbar .jj-btn[aria-pressed="true"]{
  background:#f3f6ff;
  border-color:#9aaeff;
  box-shadow: inset 0 0 0 1px rgba(120,140,255,.25);
}

.jj-btn i{ font-size:var(--jj-icon); line-height:1; }
.jj-btn:hover{ border-color: var(--jj-border); }
.jj-btn:focus-visible{ outline:none; box-shadow: var(--jj-focus); }

.jj-divider{ width:1px; height:28px; background:var(--jj-border); display:inline-block; margin:0 2px; }

.jj-select{
  height:36px; border:1px solid var(--jj-border); border-radius:3px; background:#fff; padding:0 8px;
}
.jj-color{
  display:inline-flex; align-items:center; gap:6px; height:36px; padding:0 8px;
  border:1px solid var(--jj-border); border-radius:8px; background:#fff;
}
.jj-color input{ width:24px; height:24px; padding:0; border:none; background:transparent; }

/* ===== 툴바 색상 버튼(아이콘 소형화 + 스와치) ===== */
.jj-toolbar .jj-color-btn{ position:relative; }
.jj-toolbar .jj-color-btn i{ font-size:14px; line-height:1; }
.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;
}

/* ─────────────────────────────────────────────────
   Tooltip (data-tip)
────────────────────────────────────────────────── */
.jj-toolbar [data-tip]::after{
  content: attr(data-tip);
  position:absolute; bottom: calc(100% + 8px); left:50%; transform: translateX(-50%);
  background: rgba(17,24,39,.98); color:#fff; font-size:12px; line-height:1; padding:6px 8px;
  border-radius:6px; white-space:nowrap; opacity:0; pointer-events:none; transition:opacity .12s ease; z-index:600;
}
.jj-toolbar [data-tip]::before{
  content:""; position:absolute; bottom: calc(100% + 2px); left:50%; transform: translateX(-50%);
  border:6px solid transparent; border-top-color: rgba(17,24,39,.98); opacity:0; transition:opacity .12s ease; z-index:600;
}
.jj-toolbar [data-tip]:hover::after,
.jj-toolbar [data-tip]:hover::before{ opacity:1; }

/* ─────────────────────────────────────────────────
   Editor area
────────────────────────────────────────────────── */
.jj-editor{
  min-height:260px;
  padding:18px 20px;
  padding-bottom: 11px;
  outline:none; line-height:1.78; font-size:16px;
  box-sizing: border-box;
  overscroll-behavior: contain;
  overflow-anchor: none;
  scrollbar-gutter: stable both-edges;
  scrollbar-width: thin;
}
.jj-editor:focus, .jj-editor:focus-visible{ outline:none !important; box-shadow:none !important; }

.jj-editor p{ margin:0 0 18px; }
.jj-editor h1{ font-size:28px; margin:24px 0 12px; }
.jj-editor h2{ font-size:22px; margin:22px 0 10px; }
.jj-editor blockquote{ margin:14px 0; padding:10px 14px; background:#f6f7f9; border-left:4px solid var(--jj-accent); }
.jj-editor table{ width:100%; border-collapse:collapse; margin:14px 0; }
.jj-editor th, .jj-editor td{ border:1px solid var(--jj-border); padding:8px 10px; }

/* 커스텀 구분선(.jj-hr) */
.jj-wrap .jj-editor .jj-hr{
  height:1px; background:#d1d5db; margin:16px 0; border:0;
}

/* 이미지 정렬 */
.jj-wrap .jj-editor figure{ margin:16px 0; }
.jj-wrap .jj-editor figure.align-left  { margin:16px auto 16px 0;  text-align:left; }
.jj-wrap .jj-editor figure.align-right { margin:16px 0 16px auto;  text-align:right; }
.jj-wrap .jj-editor figure.align-center{ margin:16px auto;          text-align:center; }
.jj-wrap .jj-editor figure img{ max-width:100%; height:auto; display:inline-block; }

/* 카드(장소 등) */
.jj-wrap .jj-editor .jj-card{ border:1px dashed var(--jj-border); border-radius:10px; background:#fcfcfd; margin:12px 0; }
.jj-wrap .jj-editor .jj-card .jj-card-body{ padding:12px 14px; }
.jj-wrap .jj-editor .jj-place .jj-place-name{ font-weight:700; margin-bottom:6px; }
.jj-wrap .jj-editor .jj-place .jj-place-addr{ color:#var(--jj-muted); font-size:14px; }
.jj-wrap .jj-editor .jj-place .jj-place-link{ display:inline-block; margin-top:6px; font-size:13px; color:#2563eb; text-decoration:underline; }

/* ─────────────────────────────────────────────────
   Statusbar / Modes
────────────────────────────────────────────────── */
.jj-statusbar{
  display:flex; align-items:center; justify-content:space-between;
  border-top:1px solid var(--jj-border); background:#f8fafc; padding:8px 10px;
}
.jj-resize-handle{ width:16px; height:16px; border:1px solid var(--jj-border); border-radius:4px; background:#fff; cursor:ns-resize; }
.jj-modes{ display:flex; gap:6px; }
.jj-tab{ height:30px; padding:0 10px; border:1px solid var(--jj-border); border-radius:6px; background:#fff; cursor:pointer; }
.jj-tab.is-active{ border-color: var(--jj-accent); color:var(--jj-accent); }

.jj-htmlview, .jj-textview{
  width:100%; min-height:220px; border:none; border-top:1px solid var(--jj-border);
  padding:16px 18px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  line-height:1.6; font-size:14px;
}

/* ─────────────────────────────────────────────────
   GNUBoard write 영역 FA 충돌 보정
────────────────────────────────────────────────── */
#bo_w .bo_w_link label i,
#bo_w .bo_w_flie .lb_icon i,
#bo_w .file_wr .lb_icon i,
#bo_w .bo_w_link i.fa,
#bo_w .bo_w_flie i.fa{
  display:inline-block; vertical-align:middle; line-height:1; font-size:16px;
}

/* ─────────────────────────────────────────────────
   Kakao Postcode Layer
────────────────────────────────────────────────── */
#jj-postcode-dim{
  position:fixed; inset:0; background:rgba(0,0,0,.35);
  z-index:10000; display:none;
}
#jj-postcode-layer{
  position:fixed; top:50%; left:50%; transform:translate(-50%,-50%);
  width: 360px; height: 460px;
  max-width: calc(100% - 32px);
  max-height: calc(100% - 32px);
  background:#fff;
  border:1px solid var(--jj-border);
  border-radius: var(--jj-radius);
  z-index:10001; display:none;
  overflow:hidden;
}
#jj-postcode-embed{ width:100%; height: calc(100% - 44px); overflow:hidden; }
#jj-postcode-embed iframe{
  display:block !important; width:100% !important; height:100% !important; border:0 !important;
}
#jj-postcode-close{
  position:absolute; left:50%; bottom:6px; transform:translateX(-50%);
  z-index:2; background:#111; color:#fff; border:0;
  border-radius:6px; height:36px; padding:0 14px; cursor:pointer; font-size:14px;
}
body.jj-noscroll{ overflow:hidden; }

/* ===== EMBED (16:9) & 커버/버튼 & 버블 ===== */
.jjeditor-root { position: relative; }
.jjeditor-root .jj-editor .jj-embed{
  position: relative; display:block; width:100%; max-width:100%; margin:12px 0;
  background:#000; border-radius:6px; overflow:hidden;
}
.jjeditor-root .jj-editor .jj-embed-inner{ position:relative; width:100%; }
.jjeditor-root .jj-editor .jj-embed-inner::before{ content:""; display:block; padding-top:56.25%; }
.jjeditor-root .jj-editor .jj-embed-inner > iframe{
  position:absolute; inset:0; width:100% !important; height:100% !important; display:block; border:0;
}
.jjeditor-root .jj-editor .jj-embed::after{
  content:""; position:absolute; inset:0; border:2px solid transparent; pointer-events:none; border-radius:6px;
}
.jjeditor-root .jj-editor .jj-embed.is-selected::after{ border-color:#22c55e; }
.jjeditor-root .jj-editor .jj-embed .jj-embed-cover{ position:absolute; inset:0; background:transparent; pointer-events:auto; }
.jjeditor-root .jj-editor .jj-embed .jj-embed-playbtn{
  position:absolute; left:50%; bottom:8px; transform:translateX(-50%);
  width:36px; height:36px; border-radius:22px; display:flex; align-items:center; justify-content:center;
  border:0; cursor:pointer; outline:0; background:rgba(0,0,0,.55); color:#fff; box-shadow:0 2px 6px rgba(0,0,0,.25);
}
.jjeditor-root .jj-editor .jj-embed .jj-embed-playbtn i{ font-size:14px; }
.jjeditor-root .jj-editor .jj-embed .jj-embed-playbtn:hover{ background:rgba(0,0,0,.7); }
.jjeditor-root .jj-editor .jj-embed.is-playing .jj-embed-cover{ display:none; }

/* 버블 툴바 */
.jj-embed-bubble{
  position:absolute; z-index:9999; display:none;
  background:#fff; border:1px solid rgba(0,0,0,.12); border-radius:8px;
  box-shadow:0 8px 24px rgba(0,0,0,.12);
  padding:8px 10px; height:38px; white-space:nowrap; user-select:none; line-height:0;
}
/* (중요) 캐럿 의사요소 제거: 플러그인(#jj-embed-bubble > .arrow)만 사용 */

/* 버블 버튼 */
.jj-embed-bubble .jj-ebtn{
  display:inline-flex; align-items:center; justify-content:center;
  width:32px; height:32px; border-radius:8px; margin-right:6px;
  background:#f7f8fa; border:1px solid #e6e8ee; cursor:pointer; outline:none; padding:0; line-height:0;
}
.jj-embed-bubble .jj-ebtn:last-child{ margin-right:0; }
.jj-embed-bubble .jj-ebtn:hover{ background:#eef1f5; border-color:#d9dce3; }
.jj-embed-bubble .jj-ebtn .jj-btag{
  display:inline-block; min-width:20px; text-align:center;
  font-weight:700; font-size:12px; letter-spacing:.3px; color:#334155; line-height:1; transform:translateY(.5px);
}
.jj-embed-bubble .jj-ebtn i{ font-size:16px; color:#475569; line-height:1; display:inline-block; transform:translateY(-.5px); }
.jj-embed-bubble .jj-ebar{ display:inline-block; width:1px; height:20px; background:#e5e7eb; margin:0 6px; }

/* 지도 iframe 보이기 */
.jj-editor .jj-place .jj-place-map iframe { display:block; width:100%; height:100%; }

/* ==== JJEditor Place ribbon (map bottom meta) ==== */
.jj-card.jj-place .jj-place-map{ border-radius: 6px 6px 0 0; }
.jj-card.jj-place .jj-place-meta{
  background: #f3f4f6; border: 1px solid #e5e7eb; border-top: 0;
  border-radius: 0 0 6px 6px; padding: 6px 10px; text-align: center; margin: 0;
  color: #374151; font-weight: 400; font-size: 0.8125rem; line-height: 1.5; letter-spacing: 0.1px;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  font-variant-numeric: tabular-nums; word-break: keep-all;
}
.jj-card.jj-place .jj-place-name,
.jj-card.jj-place .jj-place-addr{ display: none !important; }

/* ─────────────────────────────────────────────────
   Scrollbar (WebKit/Firefox 일관)
────────────────────────────────────────────────── */
.jj-editor::-webkit-scrollbar{ width: 6px; height: 6px; }
.jj-editor::-webkit-scrollbar-thumb{ background: transparent; border-radius: 3px; }
.jj-editor.is-scrolling::-webkit-scrollbar-thumb{ background: rgba(0,0,0,.35); }
.jj-editor::-webkit-scrollbar-track{ background: transparent; }
.jj-editor{ scrollbar-color: transparent transparent; }
.jj-editor.is-scrolling{ scrollbar-color: rgba(0,0,0,.35) transparent; }

/* ===== 색상 팝오버(팔레트/입력) ===== */
.jj-color-pop{
  --dot:20px;
  --gap:6px;
  --cols:7;
  --grid-w: calc(var(--cols) * var(--dot) + (var(--cols) - 1) * var(--gap));
  --sel-ring: 0.5px;
  --slash-w: 1.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;
  min-width: calc(var(--grid-w) + 24px);
}
.jj-color-pop[hidden]{ display:none !important; }
.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; }
.jj-color-pop .jj-colors{
  display:grid; grid-template-columns: repeat(var(--cols), var(--dot));
  gap:var(--gap); width:var(--grid-w);
}
.jj-color-pop .dot{
  width:var(--dot); height:var(--dot); border-radius:50%;
  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;
}
.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:50%; border:1px solid rgba(0,0,0,.2); background:#000;
}
.jj-color-pop .hex-wrap{ display:flex; align-items:center; gap:6px; flex:1 1 auto; min-width:0; }
.jj-color-pop .hash{ color:#777; font-size:15px; line-height:28px; }
.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;
  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;
}

/* ─────────────────────────────────────────────────
   Simple Loading Overlay
────────────────────────────────────────────────── */
.jj-loading-overlay {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1000;
  background: transparent;
  padding: 0;
  border-radius: 0;
  box-shadow: none;
}

.jj-loading-spinner {
  width: 300px;
  height: 300px;
  display: block;
  margin: 0 auto;
}