/* M01 예제 화면 (모듈 화면 모양은 src/m01.css) */
html, body { margin: 0; height: 100%; font-family: system-ui, -apple-system, "Segoe UI", "Malgun Gothic", sans-serif; }

/* 지도를 넣을 자리: 화면 전체 */
#map-place { position: absolute; inset: 0; }

/* 예제 정보 칸: 왼쪽 위. 모듈의 아이콘 줄(오른쪽 위)과 팝업보다 아래에 깔린다 */
#panel {
  position: absolute;
  top: calc(0.5rem + env(safe-area-inset-top, 0px));
  left: calc(0.5rem + env(safe-area-inset-left, 0px));
  z-index: 900;
  width: min(22rem, calc(100% - 6rem));
  max-height: calc(100% - 7rem);
  overflow: auto;
  box-sizing: border-box;
  padding: 0.5rem 0.75rem;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.95);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
  font-size: 0.875rem;
  line-height: 1.45;
}
#panel.folded { width: auto; }
#panel h1 { margin: 0.25rem 0; font-size: 1rem; }
#panel h2 { margin: 0.5rem 0 0.25rem; font-size: 0.9375rem; }
#panel .warn { margin: 0.25rem 0; color: #b42318; font-size: 0.8125rem; }
#panel button { min-height: 48px; padding: 0 0.75rem; border: 1px solid #c9ced6; border-radius: 8px; background: #fff; font: inherit; }
#panel-toggle { float: right; margin: 0 0 0.25rem 0.5rem; }
#panel .buttons { display: flex; flex-wrap: wrap; gap: 0.375rem; margin-top: 0.375rem; }

#info { display: grid; grid-template-columns: auto 1fr; gap: 0.125rem 0.75rem; margin: 0.25rem 0; }
#info dt { color: #52606d; white-space: nowrap; }
#info dd { margin: 0; overflow-wrap: anywhere; font-weight: 600; }

#log { max-height: 10rem; overflow: auto; margin: 0; padding-left: 1.75rem; font-size: 0.8125rem; }
#log li { margin: 0.125rem 0; }