/* 따로 배포하는 지도 페이지 — 화면 전체를 지도로. 공통 스타일은 base.css(입주 준비실 style.css 사본) */
html, body { height: 100%; }
body { overflow: hidden; background: var(--bg); }
.app {
  height: 100vh; height: 100dvh;
  display: flex; flex-direction: column;
  padding: env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px) env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px);
}

/* 상단 제목 줄 */
.topbar-full {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px 16px; background: var(--brand); color: #fff; flex-shrink: 0;
}
.topbar-full .title { display: flex; align-items: baseline; gap: 12px; min-width: 0; }
.topbar-full h1 { font-size: 18px; font-weight: 800; letter-spacing: -.03em; white-space: nowrap; }
.topbar-full .eyebrow { color: #a9c4b8; white-space: nowrap; }
.head-actions { display: flex; gap: 8px; flex-shrink: 0; }
.head-actions .button.secondary { background: transparent; color: #fff; border-color: rgba(255,255,255,.35); }
.head-actions .button.secondary:hover { background: rgba(255,255,255,.1); }
.head-actions .button:not(.secondary) { background: #f4f2ed; color: var(--brand); border-color: #f4f2ed; }

/* 지도 패널이 남은 높이를 전부 차지 */
#map-root { flex: 1; min-height: 0; display: flex; padding: 0; max-width: none; width: 100%; gap: 0; }   /* base.css 의 main 여백 해제 */
#map-root .map-panel {
  flex: 1; min-height: 0; display: flex; flex-direction: column;
  border: 0; border-radius: 0; box-shadow: none;
}
.controls { flex-shrink: 0; }
.controls .map-toolbar { padding: 8px 16px; }
#map-root .map-stage { flex: 1; min-height: 0; height: auto; }
#map-root .map-bottom { flex-shrink: 0; padding: 8px 16px; font-size: 13px; }
#building-info { flex: 1; min-width: 0; }

/* 안내 대화상자 */
#info { width: min(640px, calc(100vw - 24px)); max-height: calc(100dvh - 48px); }
#info .info-body { padding: 22px 24px; display: flex; flex-direction: column; gap: 10px; overflow: auto; }
#info h3 { font-size: 15px; margin-top: 6px; }
#info ul { margin: 0; padding-left: 18px; display: grid; gap: 5px; font-size: 14px; color: var(--ink-2); }
#info p { font-size: 14px; color: var(--ink-2); }

/* 태블릿 */
@media (max-width: 1024px) {
  .controls .fine { display: none; }
  #sun-slider { min-width: 120px; }
}

/* 휴대폰 */
@media (max-width: 720px) {
  .topbar-full { padding: 8px 12px; }
  .topbar-full .eyebrow { display: none; }
  .topbar-full h1 { font-size: 16px; }
  .controls { max-height: 45dvh; overflow-y: auto; }
  .controls .map-toolbar { padding: 8px 12px; gap: 8px; }
  /* 시간 줄: 날짜·시각 / 슬라이더 한 줄 / 버튼 */
  .controls .map-toolbar:first-child label { flex: 1 1 auto; }
  #sun-slider { flex: 1 1 100%; order: 3; min-width: 0; }
  .controls .map-toolbar:first-child .button { order: 4; flex: 1; }
  /* 호실 줄: 동·호·층 한 줄씩 넓게 */
  .view-bar strong { flex: 1 1 100%; }
  .view-bar label { flex: 1 1 30%; min-width: 0; }
  .view-bar select { width: 100%; }
  .view-bar .button { flex: 1; }
  #view-unit { order: -1; }
  .map-help { display: none; }
  .map-info { left: 8px; top: 8px; }
  #sun-info { font-size: 11.5px; padding: 4px 8px; }
  .map-info .badge { font-size: 11px; }
  #map-root .map-bottom { padding: 6px 12px; gap: 6px; }
  #map-root .map-bottom .button-row { gap: 4px 10px; }
  #map-root .map-bottom label { font-size: 12.5px; gap: 4px; }
  #map-root .map-bottom input[type=checkbox] { width: 16px; height: 16px; }
  #building-info { flex: 1 1 100%; font-size: 12.5px; }
}

/* 가로로 눕힌 휴대폰: 세로가 짧으니 조작 줄을 지도 위에 띄움 */
@media (max-height: 500px) and (orientation: landscape) {
  .topbar-full { padding: 6px 12px; }
  .topbar-full .eyebrow { display: none; }
  #map-root .map-panel { position: relative; }
  .controls { position: absolute; z-index: 3; left: 8px; right: 8px; top: 8px; max-height: calc(100% - 60px); overflow-y: auto;
              border-radius: 12px; background: var(--surface); box-shadow: var(--shadow); }
  .map-help { display: none; }
}