/* M01 지도 모듈 화면 (docs/M01_화면기준.md) */

.m01-root {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  font-family: system-ui, -apple-system, "Segoe UI", "Malgun Gothic", sans-serif;
  font-size: 0.875rem;
  color: #1f2933;
  --m01-blue: #1d5fd6;
  --m01-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
}

/* 지도 칸에는 너비·높이를 직접 준다 (0단계 결과 6절: 엔진이 위치 방식을 바꿀 수 있다) */
.m01-map {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* ---- 우측 상단 아이콘 줄 ---- */
.m01-iconbar {
  position: absolute;
  top: calc(0.75rem + env(safe-area-inset-top, 0px));
  right: calc(0.75rem + env(safe-area-inset-right, 0px));
  z-index: 1000;
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
}

.m01-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 48px;
  min-height: 48px;
  padding: 0;
  border: none;
  border-radius: 8px;
  background: #fff;
  box-shadow: var(--m01-shadow);
  color: var(--m01-blue);
  cursor: pointer;
}
.m01-btn:focus-visible { outline: 3px solid var(--m01-blue); outline-offset: 2px; }
.m01-btn[aria-pressed="true"] { background: #e8f0fe; }
.m01-btn svg { width: 26px; height: 26px; }

/* ---- 우측 하단 확대·축소 ---- */
.m01-zoom {
  position: absolute;
  right: calc(0.75rem + env(safe-area-inset-right, 0px));
  bottom: calc(1.5rem + env(safe-area-inset-bottom, 0px));
  z-index: 1000;
  display: flex;
  flex-direction: column;
  border-radius: 8px;
  background: #fff;
  box-shadow: var(--m01-shadow);
  overflow: hidden;
}
.m01-zoom button {
  min-width: 48px;
  min-height: 48px;
  border: none;
  background: #fff;
  color: #1f2933;
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
}
.m01-zoom button + button { border-top: 1px solid #d9dde3; }
.m01-zoom button:disabled { color: #b5bcc6; cursor: default; }

/* ---- 팝업 (한 번에 하나) ---- */
.m01-popup {
  position: absolute;
  top: 0.75rem;
  right: calc(0.75rem + 48px + 0.5rem + env(safe-area-inset-right, 0px));
  overflow-y: auto; /* 화면이 낮으면(가로 화면, 글자 150%) 팝업 안에서 스크롤 */
  overscroll-behavior: contain;
  z-index: 1001;
  min-width: 160px;
  min-height: 140px;
  max-width: calc(100% - 48px - 2.5rem);
  box-sizing: border-box;
  padding: 0.25rem 0.25rem 0.75rem 0.75rem;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}
.m01-popup-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.375rem;
}
.m01-popup-title { font-weight: 700; font-size: 1rem; }
.m01-popup-close {
  min-width: 48px;
  min-height: 48px;
  margin: 0;
  border: none;
  background: none;
  font-size: 1.4rem;
  color: #52606d;
  cursor: pointer;
}
.m01-popup-label { margin: 0.375rem 0 0.25rem; color: #52606d; font-size: 0.8125rem; }
.m01-choice-row { display: flex; flex-wrap: wrap; gap: 0.375rem; }
.m01-choice {
  min-width: 48px;
  min-height: 48px;
  padding: 0.25rem 0.5rem;
  border: 2px solid #d9dde3;
  border-radius: 8px;
  background: #fff;
  color: #1f2933;
  font-size: 0.8125rem;
  cursor: pointer;
}
.m01-choice[aria-pressed="true"] { border-color: var(--m01-blue); color: var(--m01-blue); font-weight: 700; }
.m01-choice:disabled { opacity: 0.6; cursor: wait; }

/* ---- 안내 메시지 ---- */
.m01-toast {
  position: absolute;
  top: 0.75rem;
  left: 50%;
  z-index: 1002;
  max-width: calc(100% - 9rem);
  transform: translateX(-50%);
  padding: 0.625rem 0.875rem;
  border-radius: 8px;
  background: rgba(31, 41, 51, 0.92);
  color: #fff;
  line-height: 1.4;
}

/* 지도를 띄우지 못할 때 (예: 키 없음) */
.m01-fatal {
  position: absolute;
  inset: 0;
  z-index: 1003;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  background: #f4f5f7;
  text-align: center;
  line-height: 1.6;
}

/* ---- 좌측 하단 축척·출처 (Leaflet 기본 표시를 화면 기준에 맞춤) ---- */
.m01-root .leaflet-control-scale-line {
  border-color: #fff;
  background: transparent;
  color: #fff;
  font-weight: 700;
  text-shadow: 0 0 3px #000, 0 0 2px #000;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.6);
}
.m01-root .leaflet-control-attribution { font-size: 0.6875rem; }

/* ---- SHP 팝업 (docs/M01_화면기준.md 6절) ---- */
.m01-shp-load {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  min-height: 48px;
  padding: 0.375rem 0.625rem;
  border: 1px solid #c9ced6;
  border-radius: 8px;
  background: #fff;
  color: #52606d;
  text-align: left;
  cursor: pointer;
}
.m01-shp-load:disabled { opacity: 0.6; cursor: wait; }
.m01-shp-load-icon svg { width: 24px; height: 24px; color: #1f2933; display: block; }
.m01-shp-load-text { color: var(--m01-blue); font-weight: 600; }
.m01-shp-load small { font-size: 0.75rem; }
.m01-shp-note { margin-top: 0.25rem; color: #52606d; font-size: 0.75rem; }
.m01-shp-row { display: flex; align-items: center; gap: 0.5rem; min-height: 48px; margin-top: 0.25rem; }
.m01-shp-row-icon svg { width: 22px; height: 22px; display: block; color: #1f2933; }
.m01-shp-row-text { flex: 1; font-weight: 600; }
.m01-shp-status { color: #52606d; font-size: 0.75rem; }

/* 켜기/끄기 스위치 (켜짐은 파랑). 터치 영역 48dp */
.m01-switch {
  position: relative;
  width: 52px;
  min-height: 48px;
  border: none;
  background: none;
  cursor: pointer;
}
.m01-switch::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 50%;
  width: 48px;
  height: 28px;
  margin-top: -14px;
  border-radius: 14px;
  background: #c9ced6;
  transition: background 0.15s;
}
.m01-switch::after {
  content: "";
  position: absolute;
  left: 5px;
  top: 50%;
  width: 22px;
  height: 22px;
  margin-top: -11px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
  transition: transform 0.15s;
}
.m01-switch[aria-checked="true"]::before { background: var(--m01-blue); }
.m01-switch[aria-checked="true"]::after { transform: translateX(20px); }
.m01-switch:disabled { opacity: 0.45; cursor: default; }

/* 불러온 자료 지우기 (이미지에 없는 단추: 결정사항 4절에 따라 추가) */
.m01-shp-clear {
  width: 100%;
  min-height: 48px;
  margin-top: 0.25rem;
  border: 1px solid #e3b4b4;
  border-radius: 8px;
  background: #fff;
  color: #b42318;
  font-size: 0.875rem;
  cursor: pointer;
}
.m01-shp-clear:disabled { border-color: #d9dde3; color: #b5bcc6; cursor: default; }
.m01-shp-confirm { margin-top: 0.25rem; padding: 0.5rem; border-radius: 8px; background: #fdf2f2; }
.m01-shp-confirm-text { margin-bottom: 0.375rem; color: #1f2933; }
.m01-shp-confirm-btns { display: flex; gap: 0.375rem; justify-content: flex-end; }
.m01-shp-confirm-btns button { min-width: 64px; min-height: 48px; border-radius: 8px; font-size: 0.875rem; cursor: pointer; }
.m01-shp-confirm-no { border: 1px solid #c9ced6; background: #fff; color: #1f2933; }
.m01-shp-confirm-yes { border: none; background: #b42318; color: #fff; font-weight: 700; }

/* 아이콘 단추 비활성(예: 위치 확인 중, 현재 지도에서 SHP 미지원) */
.m01-btn:disabled { color: #b5bcc6; cursor: default; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2); }
.m01-btn[aria-busy="true"] { cursor: wait; }

/* 제공자 칸: 제공자마다 하나. 보이지 않는 칸도 크기는 유지한다(지도 엔진이 크기를 알아야 한다) */
.m01-pane { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
.m01-pane-hidden { visibility: hidden; pointer-events: none; }
.m01-popup-status { margin-top: 0.375rem; color: #52606d; font-size: 0.75rem; }

/* 팝업 본문은 머리 줄(닫기 단추 자리)보다 오른쪽 여백을 더 둔다 */
.m01-popup > :not(.m01-popup-head) { margin-right: 0.5rem; }
.m01-popup-head { margin-bottom: 0; }
/* 상태 표시는 한 줄 (넘치면 말줄임) */
.m01-shp-status, .m01-popup-status { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* 좌측 하단 축척·출처: 홈 막대·화면 모서리를 피한다 */
.m01-root .leaflet-bottom.leaflet-left { padding-left: env(safe-area-inset-left, 0px); padding-bottom: env(safe-area-inset-bottom, 0px); }
/* 단추 글자도 글자 크기 설정(150%)을 따르게 한다(브라우저 기본값은 고정 크기) */
.m01-root button { font-family: inherit; line-height: 1.25; }
.m01-shp-load { font-size: 0.875rem; }
.m01-btn { font-size: 1rem; }