/* css/canvas.css */

/* 1. 캔버스 작업 영역 래퍼 */
.canvas-wrapper {
  flex: 1;
  display: flex;
  flex-direction: column;
  background-color: #f1f5f9;
  position: relative;
  overflow: hidden;
}

/* 2. 상단 서브 툴바 */
.sub-toolbar {
  height: 48px;
  background-color: #ffffff;
  border-bottom: 1px solid var(--border-color, #e2e8f0);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
  z-index: 10;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
}

.tool-group {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* 툴바 기본 버튼 */
.tool-icon-btn,
.btn-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 32px;
  padding: 0 12px;
  border-radius: 6px;
  border: 1px solid var(--border-color, #e2e8f0);
  background-color: #ffffff;
  color: var(--text-main, #1e293b);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s ease;
  user-select: none;
}

.tool-icon-btn:hover,
.btn-action:hover {
  background-color: #f8fafc;
  border-color: #cbd5e1;
}

.tool-icon-btn:active,
.btn-action:active {
  background-color: #f1f5f9;
}

/* 툴바 강조 및 상태 버튼 */
.btn-highlight {
  background-color: var(--primary, #4f46e5);
  color: #ffffff;
  border-color: var(--primary, #4f46e5);
}

.btn-highlight:hover {
  background-color: #4338ca;
  border-color: #4338ca;
}

.btn-danger {
  color: #ef4444;
  border-color: #fecaca;
}

.btn-danger:hover {
  background-color: #fef2f2;
  border-color: #fca5a5;
  color: #dc2626;
}

/* 3. 캔버스 뷰포트 컨테이너 (스크롤 및 중앙 정렬) */
.canvas-container-outer {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: auto;
  padding: 32px;
  position: relative;
}

/* Fabric.js 래퍼 및 순백색 캔버스 스타일 */
.canvas-container {
  margin: auto !important;
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.08), 0 8px 10px -6px rgba(0, 0, 0, 0.04);
  border-radius: 4px;
}

#floorCanvas {
  background-color: #ffffff !important;
  border-radius: 4px;
}

/* 4. Fabric.js 선택 컨트롤러 및 바운딩 박스 커스텀 (옵션) */
.canvas-container .canvas-box-selected {
  outline: 1.5px solid var(--primary, #4f46e5);
}