/* 텍스트 옵션바 */
.text-toggle {
  background: none; border: 1px solid var(--line); border-radius: 4px;
  color: var(--text); cursor: pointer; padding: 2px 8px; font: inherit; font-size: 12px;
}
.text-toggle.on { background: var(--blue); border-color: var(--blue); color: #fff; }
.text-align-group { display: inline-flex; gap: 2px; }
.text-color-chip {
  width: 20px; height: 20px; border: 1px solid var(--line); border-radius: 3px;
  cursor: pointer; padding: 0; background: #ffffff;
}

/* 텍스트 입력 오버레이 */
/* 글 쓰는 칸은 확정된 글자와 자리가 딱 맞아야 한다 — 어긋나면 Enter 를 누르는 순간
   글자가 툭 움직인다. 그래서 자리를 차지하는 테두리·안여백을 두지 않는다.
   점선은 outline 으로 그린다 (자리를 안 차지한다). */
.text-overlay {
  position: absolute; z-index: 30;
  min-width: 120px; box-sizing: border-box;
  background: transparent; border: none; padding: 0;
  resize: none; overflow: hidden; line-height: 1.25; white-space: pre;
  /* 브라우저가 넣는 포커스 테 — 우리가 틀을 직접 그리므로 끈다.
     안 끄면 점 글자에도 네모가 남는다 (사용자 지적 2026-08-26) */
  outline: none;
}
/* 점 글자(눌러서 바로 치는 글)는 Photoshop 처럼 **글자 밑줄**만 보여 준다.
   점선 상자를 두르면 아직 없는 글 상자가 있는 것처럼 보인다 (사용자 지적 2026-08-26).
   상자를 끌어 만든 단락 글은 .text-box-frame 이 따로 점선 상자를 그린다. */
.text-overlay.point-text { border-bottom: 1px solid var(--blue); }
.text-overlay.canvas-text-preview { -webkit-text-fill-color: transparent; }
.text-overlay.canvas-text-preview::selection { color: transparent; background: transparent; }
/* 뒤틀기 창을 편집 중이 아닌 글자 레이어에서 열었을 때의 같은 밑줄 (syncWarpBaselineGuide) */
svg.text-baseline-guide {
  position: absolute; left: 0; top: 0; overflow: visible;
  z-index: 31; pointer-events: none;
}
svg.text-baseline-guide path { stroke: var(--blue); stroke-width: 1px; }

/* 깜빡이는 글 커서 — 색은 JS 가 뒤 화면의 밝기를 뒤집어 넣는다 (syncTextCaret).
   브라우저 기본 커서는 글자 색을 물려받아 흰 글자·흰 바탕에서 안 보였다. */
.text-caret {
  position: absolute; z-index: 32; width: 1px; pointer-events: none;
  animation: text-caret-blink 1.06s steps(1, end) infinite;
}
.text-caret[hidden] { display: none; }
@keyframes text-caret-blink { 0%, 50% { opacity: 1; } 50.01%, 100% { opacity: 0; } }

/* 단락 글 상자의 테두리와 손잡이 (Photoshop 의 텍스트 상자와 같은 모양).
   가운데는 마우스를 통과시켜야 글자를 누를 수 있다 — 손잡이만 받는다. */
.text-box-frame {
  position: absolute; z-index: 31; pointer-events: none;
  outline: 1px dashed var(--blue);
}
.text-box-handle {
  position: absolute; width: 8px; height: 8px; margin: -4px 0 0 -4px;
  background: #fff; border: 1px solid #333; pointer-events: auto;
}
.tbh-nw { left: 0; top: 0; cursor: nwse-resize; }
.tbh-n { left: 50%; top: 0; cursor: ns-resize; }
.tbh-ne { left: 100%; top: 0; cursor: nesw-resize; }
.tbh-w { left: 0; top: 50%; cursor: ew-resize; }
.tbh-e { left: 100%; top: 50%; cursor: ew-resize; }
.tbh-sw { left: 0; top: 100%; cursor: nesw-resize; }
.tbh-s { left: 50%; top: 100%; cursor: ns-resize; }
.tbh-se { left: 100%; top: 100%; cursor: nwse-resize; }
/* 상자에 다 안 들어간 글이 있으면 오른쪽 아래 손잡이에 ＋ 가 뜬다 (Photoshop 과 같다).
   넘친 줄은 그려지지 않으므로, 글이 잘렸다는 것을 알 방법이 이것뿐이다. */
.text-box-frame.overflow .tbh-se {
  width: 16px; height: 16px; margin: -8px 0 0 -8px;
  border-width: 2px;
}
.text-box-frame.overflow .tbh-se::after {
  content: "+"; position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; line-height: 1; color: #333;
}

.drop-hint[hidden] { display: none; }
.drop-hint {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  color: var(--text-dim); font-size: 15px;
}
.drop-sub { font-size: 12px; color: var(--text-dim); }