/* ═══════════════════════════════════════════════════════════════
   Label Designer Emulator  CSS
   ═══════════════════════════════════════════════════════════════ */

/* ── 디자인 편집 탭 전체 레이아웃 ──────────────────────────────── */
.ld-editor-wrap {
  display:flex; gap:0; height:100%; overflow:hidden;
}

/* ── 캔버스 영역 (좌측) ───────────────────────────────────────── */
.ld-canvas-area {
  flex:1; display:flex; flex-direction:column; overflow:hidden;
  background:#0a0f18;
}

/* 툴바 */
.ld-toolbar {
  flex-shrink:0; display:flex; gap:4px; padding:6px 10px;
  background:#0d1a2e; border-bottom:1px solid var(--border);
  flex-wrap:wrap; align-items:center;
}
.ld-toolbar button {
  height:26px; padding:0 8px; font-size:11px;
  background:var(--bg-input); border:1px solid var(--border);
  color:var(--text-primary); border-radius:3px; cursor:pointer;
  transition:background .15s;
}
.ld-toolbar button:hover { background:#1a3a5a; }
.ld-toolbar button.active { background:#1a5a3a; border-color:#2a8a5a; }
.ld-toolbar .ld-sep {
  width:1px; height:20px; background:var(--border); margin:0 4px;
}

/* 필드 버튼 바 */
.ld-field-bar {
  flex-shrink:0; display:flex; gap:4px; padding:5px 10px;
  background:#0b1525; border-bottom:1px solid var(--border);
  align-items:center; flex-wrap:wrap;
}
.ld-field-bar-label {
  font-size:11px; color:#5a7a9a; font-weight:600;
  margin-right:4px; white-space:nowrap;
}
.ld-field-btn {
  height:26px; padding:0 10px; font-size:12px; font-weight:500;
  background:#1a2a4a; border:1px solid #2a4a6a;
  color:#8ac4ff; border-radius:4px; cursor:pointer;
  transition:all .15s; white-space:nowrap;
}
.ld-field-btn:hover {
  background:#2a4a7a; border-color:#4a8aff; color:#fff;
}

/* 캔버스 뷰포트 */
.ld-viewport {
  flex:1; overflow:auto; display:flex;
  align-items:center; justify-content:center;
  padding:20px;
}

/* 라벨 캔버스 (실제 mm 크기, transform:scale로 확대) */
.ld-canvas {
  position:relative;
  background:#ffffff;
  border:0.5pt solid #999;
  box-shadow:0 4px 20px rgba(0,0,0,.6);
  box-sizing:border-box;
  overflow:hidden;
  /* width/height는 JS에서 mm 단위로 설정 */
}

/* 그리드 오버레이 */
.ld-canvas.show-grid {
  background-image:
    linear-gradient(rgba(0,120,255,.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,120,255,.08) 1px, transparent 1px);
  background-size:5mm 5mm;
}

/* ── 오브젝트 공통 ─────────────────────────────────────────────── */
.ld-obj {
  position:absolute;
  box-sizing:border-box;
  cursor:move;
  outline:1px solid transparent;
  transition:outline-color .1s;
  /* x,y,w,h는 JS에서 mm 단위로 설정 */
}
.ld-obj:hover { outline-color:rgba(0,120,255,.4); }
.ld-obj.selected {
  outline:1.5px solid #0078ff;
  z-index:999 !important;
}

/* 리사이즈 핸들 */
.ld-handle {
  position:absolute; width:6px; height:6px;
  background:#0078ff; border:1px solid #fff;
  z-index:1000; display:none;
}
.ld-obj.selected .ld-handle { display:block; }
.ld-handle.nw { top:-3px; left:-3px; cursor:nw-resize; }
.ld-handle.n  { top:-3px; left:50%; margin-left:-3px; cursor:n-resize; }
.ld-handle.ne { top:-3px; right:-3px; cursor:ne-resize; }
.ld-handle.e  { top:50%; margin-top:-3px; right:-3px; cursor:e-resize; }
.ld-handle.se { bottom:-3px; right:-3px; cursor:se-resize; }
.ld-handle.s  { bottom:-3px; left:50%; margin-left:-3px; cursor:s-resize; }
.ld-handle.sw { bottom:-3px; left:-3px; cursor:sw-resize; }
.ld-handle.w  { top:50%; margin-top:-3px; left:-3px; cursor:w-resize; }

/* ── 오브젝트 타입별 ───────────────────────────────────────────── */
.ld-obj-text {
  font-family:'Malgun Gothic','Noto Sans KR',sans-serif;
  color:#000;
  /* 박스 폭 초과해도 가시화 (사용자가 H 늘려야 한다는 걸 인지) */
  overflow:visible;
  /* 원래 wrap 동작 복원: 한글 단어 단위 wrap, 영문 긴 단어는 break-word 로 fallback.
     슬래시/괄호 경계 보호는 _wbr_html 의 <wbr> 힌트로 처리. */
  white-space:pre-wrap;
  word-break:keep-all;
  overflow-wrap:break-word;
}
/* 제목/단일행 텍스트 (props.nowrap=true) — 줄바꿈 안 함, 옆으로 overflow */
.ld-obj-text.ld-obj-text-nowrap {
  white-space:nowrap;
  overflow-wrap:normal;
}
.ld-obj-barcode {
  display:flex; align-items:center; justify-content:center;
  background:#fff;
}
.ld-obj-barcode svg { width:100%; height:100%; }
.ld-obj-table {
  overflow:hidden;
}
.ld-obj-table table {
  width:100%; height:100%;
  border-collapse:collapse; table-layout:fixed;
  font-family:'Malgun Gothic',sans-serif;
  color:#000;
}
.ld-obj-table td {
  border:0.4pt solid #000;
  padding:0 1.5mm;
  font-size:7pt;
  vertical-align:middle;
  overflow:hidden; white-space:nowrap; text-overflow:ellipsis;
}
.ld-obj-line-h {
  border-top:0.5pt solid #000;
  height:0 !important;
  min-height:0 !important;
}
.ld-obj-line-v {
  border-left:0.5pt solid #000;
  width:0 !important;
  min-width:0 !important;
}
.ld-obj-box {
  border:0.5pt solid #000;
  background:transparent;
}

/* ── 속성 패널 (우측) ─────────────────────────────────────────── */
.ld-props-panel {
  width:280px; flex-shrink:0;
  border-left:1px solid var(--border);
  background:#0b1220;
  overflow-y:auto;
  padding:10px 12px;
  font-size:13px;
}
.ld-props-panel h4 {
  font-size:12px; color:#7a9fc8; font-weight:700;
  text-transform:uppercase; letter-spacing:.5px;
  padding:8px 0 4px; margin:0;
  border-bottom:1px solid #1a2a3a;
}
.ld-prop-row {
  display:flex; align-items:center; gap:6px;
  padding:4px 0;
}
.ld-prop-row label {
  width:62px; flex-shrink:0; font-size:12px;
  color:var(--text-muted); text-align:right;
}
.ld-prop-row input, .ld-prop-row select, .ld-prop-row textarea {
  flex:1; height:30px; padding:0 8px; font-size:13px;
  background:var(--bg-input); border:1px solid var(--border);
  color:var(--text-primary); border-radius:4px;
}
.ld-prop-row textarea {
  height:90px; resize:vertical; padding:6px 8px;
  line-height:1.4;
}

/* ── (탭 제거됨 - 에디터가 미리보기 겸용) ─────────────────────── */