.drawing-map {
  top: max(31px, env(safe-area-inset-top));
  left: max(32px, env(safe-area-inset-left));
  width: 145px;
  padding: 11px;
  border: 1px solid #fffdf3;
  border-radius: 15px;
  background: #f9f7edee;
  box-shadow: 0 4px 18px #46523c16, inset 0 0 0 1px #74816216;
  pointer-events: auto;
  user-select: none;
  -webkit-user-select: none;
  touch-action: none;
}

.drawing-map__heading { display: flex; justify-content: space-between; align-items: center; gap: 4px; margin-bottom: 8px; color: #4a614d; }
.drawing-map__heading strong { font-size: 10px; font-weight: 650; letter-spacing: -.025em; }
.drawing-map__heading > span { font-size: 8px; color: #849079; letter-spacing: .02em; }
.drawing-map__canvas { display: block; width: 100%; height: auto; aspect-ratio: 1; border: 1px solid #73856855; border-radius: 7px; background: #cbb080; cursor: crosshair; touch-action: none; pointer-events: auto; }
.drawing-map__canvas.is-dragging { cursor: grabbing; }
.drawing-map__canvas:focus-visible { outline: 3px solid #628973; outline-offset: 3px; }
.drawing-map__legend { display: flex; align-items: center; justify-content: center; gap: 5px; margin: 8px 0 0; font-size: 9px; color: #4e6651; white-space: nowrap; }
.drawing-map__legend > span { display: block; width: 11px; height: 8px; border: 1px solid #45644e; outline: 2px solid #fffbed; border-radius: 1px; }
.drawing-map__hint { margin: 5px 0 0; color: #868975; font-size: 8px; text-align: center; letter-spacing: -.015em; white-space: nowrap; }
body.drawing-mode .field-header { display: none; }

@media (max-width: 1100px) {
  .drawing-map { top: max(23px, env(safe-area-inset-top)); left: max(23px, env(safe-area-inset-left)); }
}

@media (max-width: 760px) {
  .drawing-map { top: calc(max(19px, env(safe-area-inset-top)) + 49px); left: max(15px, env(safe-area-inset-left)); width: 124px; padding: 9px; border-radius: 12px; }
  .drawing-map__heading { margin-bottom: 7px; }
  .drawing-map__heading strong { font-size: 9px; }
  .drawing-map__hint { font-size: 8px; }
}

@media (max-height: 540px) and (orientation: landscape) {
  .drawing-map { top: max(13px, env(safe-area-inset-top)); left: max(17px, env(safe-area-inset-left)); width: 112px; padding: 8px; border-radius: 11px; }
  .drawing-map__heading { margin-bottom: 5px; }
  .drawing-map__heading strong { font-size: 9px; }
  .drawing-map__legend { margin-top: 6px; font-size: 8px; }
  .drawing-map__hint { display: none; }
}