/* 그림판은 작업 영역 중앙을 원점으로 삼고 손 도구로 자유롭게 이동한다. */
.studio-canvas-wrap {
  display: block;
  overflow: hidden;
}

.studio-work > .tool-rail,
.studio-work > .studio-canvas-wrap,
.studio-work > .studio-inspector {
  min-height: 0;
  height: auto;
  align-self: stretch;
}

.studio-inspector {
  min-height: 0;
  height: auto;
  grid-template-rows: 38px minmax(150px, 0.8fr) minmax(0, 1.2fr);
  overflow: hidden;
}

.layers-panel,
.properties-panel {
  min-height: 0;
  overflow: auto;
}

.studio-canvas-wrap::before {
  z-index: 2;
  pointer-events: none;
}

.studio-canvas-wrap canvas {
  position: absolute;
  left: 50%;
  top: 50%;
  max-width: none;
  transform: translate(
    calc(-50% + var(--canvas-pan-x, 0px)),
    calc(-50% + var(--canvas-pan-y, 0px))
  );
}

.canvas-pan-hint {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: #77736b;
  font-size: 8px;
  white-space: nowrap;
}

.canvas-pan-hint .material-symbols-outlined {
  font-size: 14px;
}

.tool-rail button[data-tool="hand"] span:last-child {
  font-size: 6px;
}

@media (max-width: 1100px) {
  .canvas-pan-hint {
    display: none;
  }
}

@media (max-width: 760px) {
  .studio-canvas-wrap {
    overflow: hidden;
  }
}