/* css/canvas.css  —  중앙 캔버스: 삭제 버튼 · 힌트 · 3D 래퍼 · 스케치 모드 · 로딩 오버레이
   로드 순서 3/5: 캐스케이드(나중 규칙이 이긴다)가 원래 순서에 의존하므로 index.html 의 <link> 순서를 바꾸지 않는다. */

/* ── Center Canvas ── */
#center {
  position: relative; overflow: hidden;
  background: var(--bg);
  display: flex; align-items: center; justify-content: center;
}

#canvas-wrap { position: absolute; inset: 0; overflow: hidden; }
#gc { display: block; cursor: crosshair; }

/* Floating delete button */
#del-btn {
  position: absolute;
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--accent); color: #fff;
  border: 2px solid #fff; cursor: pointer;
  font-size: 12px; line-height: 1;
  display: none; align-items: center; justify-content: center;
  z-index: 20; box-shadow: 0 2px 8px rgba(0,0,0,.3);
  transform: translate(-50%, -50%);
  transition: background .1s;
}
#del-btn.on  { display: flex; }
#del-btn:hover { background: var(--red); }

/* Canvas hint */
#canvas-hint {
  position: absolute; bottom: 14px; left: 50%; transform: translateX(-50%);
  font-size: 11px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--dim); pointer-events: none; white-space: nowrap;
}

/* 3D wrap */
#three-wrap {
  position: absolute; inset: 0; display: none;
}
#three-wrap.on { display: block; }
#tc { width: 100%; height: 100%; display: block; }
#dim-canvas { position: absolute; inset: 0; pointer-events: none; display: none; }

/* Sketch mode */
#sc {
  position: absolute; inset: 0; display: none;
  cursor: crosshair; z-index: 10;
}
#sketch-bar {
  position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%);
  display: none; gap: 8px; z-index: 20; align-items: center;
  background: rgba(255,255,255,0.92); border: 1px solid var(--border);
  border-radius: 8px; padding: 8px 14px; box-shadow: 0 2px 12px rgba(0,0,0,.10);
}
#sketch-bar .sk-hint { font-size: 11px; color: var(--dim); letter-spacing:.04em; margin-right:4px; }
#sketch-bar .btn-sk-apply { background: var(--accent); color: #fff; }
#cam-hint {
  position: absolute; bottom: 14px; left: 50%; transform: translateX(-50%);
  font-size: 11px; color: var(--dim); letter-spacing: .12em; text-transform: uppercase;
  pointer-events: none;
}

/* Loading overlay */
#load-overlay {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: rgba(240,239,235,.88); z-index: 30; gap: 12px;
}
#load-overlay.hidden { display: none; }
.spinner {
  width: 24px; height: 24px; border: 2px solid var(--border);
  border-top-color: var(--accent); border-radius: 50%;
  animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.load-lbl { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }