/* 공개 지형·바닥 미리보기의 화면 배치를 정의한다. */

  * { box-sizing: border-box; }
  body { margin: 0; color: #253c37; background: #eeeee7; font: 15px/1.6 system-ui, sans-serif; }
  header { padding: 18px 24px; display: flex; justify-content: space-between; align-items: center; background: #fafaf6; border-bottom: 1px solid #d1d8cb; }
  h1 { font-size: 23px; margin: 0; } header p { margin: 0; font-size: 13px; }
  .tag { font-size: 12px; letter-spacing: .08em; color: #68746b; }
  main { display: grid; grid-template-columns: minmax(0, 1fr) 310px; height: calc(100vh - 100px); min-height: 580px; }
  #map { position: relative; min-width: 0; min-height: 420px; } canvas { display: block; }
  aside { padding: 22px; background: #fafaf6; overflow: auto; }
  aside h2 { font-size: 16px; margin: 18px 0 8px; } aside h2:first-child { margin-top: 0; }
  label { display: block; padding: 5px 0; } select, button { font: inherit; padding: 5px 9px; color: inherit; background: white; border: 1px solid #b9c4b7; border-radius: 4px; }
  .controls { display: flex; flex-wrap: wrap; gap: 7px; margin: 10px 0; }
  .note { font-size: 13px; color: #68746b; } .important { color: #8c462c; }
  dl { display: grid; grid-template-columns: 1fr auto; font-size: 13px; gap: 6px; } dt, dd { margin: 0; } dd { text-align: right; }
  #caption { position: absolute; bottom: 18px; left: 18px; padding: 8px 12px; background: #fafaf6ee; font-size: 13px; pointer-events: none; }
  .legend { height: 10px; display: flex; margin-top: 12px; } .legend span { flex: 1; }
  a { color: inherit; }
  @media(max-width: 700px) { header { padding: 12px; display: block; } h1 { font-size: 19px; } main { display: block; height: auto; } #map { height: 58vh; } aside { overflow: visible; padding: 16px; } }

[hidden]{display:none!important} #floor-building{width:100%} details pre{white-space:pre-wrap}
.legend span:nth-child(1){background:#224d66}.legend span:nth-child(2){background:#608c76}.legend span:nth-child(3){background:#babd86}.legend span:nth-child(4){background:#debc75}