/* 전용 슬롯 내부만 스타일링한다. 호스트는 슬롯 높이를 명시해야 한다. */
.heaven-map {
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) 44px;
  color: #e2e8f0;
  background: #0a0c10;
  border: 1px solid #303746;
  border-radius: 8px;
  box-sizing: border-box;
  container-type: inline-size;
}
.heaven-map *, .heaven-map *::before, .heaven-map *::after { box-sizing: border-box; }
.heaven-map-toolbar, .heaven-map-footer {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  overflow: hidden;
  padding: 0 14px;
  background: #11151e;
}
.heaven-map-toolbar { border-bottom: 1px solid #303746; min-height: 52px; }
.heaven-map-toolbar strong { color: #e6c887; flex: 0 0 auto; }
.heaven-map-toolbar select {
  width: 130px;
  min-width: 60px;
  margin-right: auto;
}
.heaven-map-toolbar button, .heaven-map-footer button, .heaven-map-toolbar select {
  color: #e2e8f0;
  background: #1a2331;
  border: 1px solid #46536b;
  border-radius: 4px;
  height: 32px;
  padding: 0 10px;
  font: inherit;
}
.heaven-map button { cursor: pointer; }
.heaven-map button:focus-visible, .heaven-map select:focus-visible {
  outline: 2px solid #7dd3fc;
  outline-offset: 2px;
}
.heaven-map-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  grid-template-rows: minmax(0, 1fr);
  min-height: 0;
  min-width: 0;
  overflow: hidden;
}
.heaven-map-viewport {
  min-width: 0;
  min-height: 0;
  overflow: auto;
  scrollbar-gutter: stable;
  background: radial-gradient(ellipse at center, #1a2430, #090d13 80%);
  overscroll-behavior: contain;
  touch-action: none;
  user-select: none;
  cursor: grab;
}
.heaven-map-viewport.is-panning, .heaven-map-viewport.is-panning * { cursor: grabbing; }
.heaven-map-spacer { position: relative; overflow: hidden; }
.heaven-map-canvas {
  position: absolute;
  transform-origin: 0 0;
}
.heaven-map-zoom { display: flex; align-items: center; gap: 4px; flex: 0 0 auto; }
.heaven-map-zoom output { width: 42px; text-align: center; font-size: 12px; }
.heaven-map-zoom button { width: 30px; padding: 0; }
.heaven-map-zoom button:disabled { opacity: 0.4; cursor: default; }
.heaven-map-canvas svg {
  position: absolute;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.heaven-map-canvas line { stroke: #526378; stroke-width: 2; stroke-dasharray: 5 5; }
.heaven-map-canvas line.is-unknown { stroke: #303b4d; opacity: 0.45; }
.heaven-map-node {
  position: absolute;
  transform: translate(-50%, -50%);
  width: 136px;
  height: 38px;
  padding: 0 6px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: #e2e8f0;
  background: #141e2c;
  border: 1px solid #526378;
  border-radius: 5px;
  font-size: 12px;
}
.heaven-map-node:hover { background: #24334a; }
.heaven-map-node.is-rumored { border-style: dashed; color: #b6c6dc; }
.heaven-map-node.is-unknown { color: #748196; background: #10161f; }
.heaven-map-node.is-current { color: #f6d58e; border-color: #d6aa59; background: #302a1d; }
.heaven-map-node.is-selected { outline: 2px solid #70c8eb; outline-offset: 2px; }
.heaven-map-inspector.node-inspector-box {
  min-width: 0;
  min-height: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  overflow-wrap: anywhere;
  scrollbar-gutter: stable;
  border-left: 1px solid #303746;
  padding: 16px;
}
.heaven-map-inspector > * { flex-shrink: 0; }
.heaven-map-footer { border-top: 1px solid #303746; font-size: 12px; }
.heaven-map-footer [data-message] {
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.heaven-map-footer button { flex: 0 0 auto; }
.heaven-map [hidden] { display: none; }
@container (max-width: 720px) {
  .heaven-map-body {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr) 230px;
  }
  .heaven-map-inspector.node-inspector-box { border-left: 0; border-top: 1px solid #303746; }
  .heaven-map-toolbar { gap: 8px; padding: 0 8px; }
  .heaven-map-toolbar select { width: 100px; }
}
@container (max-width: 430px) {
  .heaven-map-toolbar { min-height: 86px; flex-wrap: wrap; gap: 4px 8px; padding: 6px 8px; }
  .heaven-map-toolbar strong { font-size: 13px; }
  .heaven-map-toolbar select { width: 90px; }
  .heaven-map-toolbar [data-focus] { padding: 0 6px; }
  .heaven-map-zoom { margin-left: auto; }
}