html, body, #map { height: 100%; margin: 0; }

#status{
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 13px;
  margin-bottom: 8px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 220px;
}

.controls{
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.controls button{
  border: 0;
  padding: 10px 12px;
  border-radius: 10px;
  background: rgba(255,255,255,0.92);
  box-shadow: 0 6px 16px rgba(0,0,0,0.12);
  font-size: 13px;
  cursor: pointer;
}
.controls button:active{ transform: translateY(1px); }

.leaflet-control-locate-btn{
  width: 30px;
  height: 30px;
  display: flex !important;
  align-items: center;
  justify-content: center;
}
.leaflet-control-locate-btn svg{
  display: block;
}
.leaflet-control-jiri-btn{
  width: 30px;
  height: 30px;
  display: flex !important;
  align-items: center;
  justify-content: center;
}
.leaflet-control-jiri-btn svg{
  display: block;
}

a.leaflet-control-locate-btn.is-active{
  background: #2b7cff !important;
  color: #ffffff !important;
}
a.leaflet-control-locate-btn.is-active svg{
  color: #ffffff !important;
}

a.leaflet-control-locate-btn.is-active{
  background:#2b7cff !important;
  color:#fff !important;
}
a.leaflet-control-locate-btn.is-active svg{
  color:#fff !important;
}

#compass{
  position: fixed;
  right: 5px;
  bottom: 205px;
  width: 46px;
  height: 46px;
  border-radius: 999px;
  background: rgba(255,255,255,0.92);
  box-shadow: 0 6px 16px rgba(0,0,0,0.15);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
}

#compass-needle{
  position: relative;
  width: 46px;
  height: 46px;
  transform-origin: 50% 50%;
}

/* 공통 바늘 삼각형 */
#compass-needle .needle{
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 0;
  height: 0;
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
}

/* ✅ 빨강: 위쪽(북) */
#compass-needle .needle.red{
  border-bottom: 18px solid #e11d48;  /* 빨강 */
  transform: translate(-50%, calc(-50% - 10px)); /* 위로 살짝 */
}

/* ✅ 파랑: 아래쪽(남) */
#compass-needle .needle.blue{
  border-top: 18px solid #2563eb;     /* 파랑 */
  transform: translate(-50%, calc(-50% + 10px)); /* 아래로 살짝 */
}



/* 나침반을 Leaflet 컨트롤처럼 */
.leaflet-control-compass{
  width: 46px;
  height: 46px;
  border-radius: 999px;
  background: rgba(255,255,255,0.92);
  box-shadow: 0 6px 16px rgba(0,0,0,0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 8px;
}

.leaflet-control-compass .needle{
  width: 0;
  height: 0;
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
  border-bottom: 18px solid #e11d48;
  transform-origin: 50% 80%;
}

/* (선택) 작은 텍스트 표시하고 싶으면 */
.leaflet-control-compass .label{
  position: absolute;
  bottom: -22px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 11px;
  background: rgba(255,255,255,0.92);
  padding: 2px 6px;
  border-radius: 8px;
  box-shadow: 0 6px 16px rgba(0,0,0,0.12);
  white-space: nowrap;
}

.my-heading-icon .arrow-wrap{
  width: 26px;
  height: 26px;
  transform-origin: 50% 50%;
}

    /* 내 위치(조준) 버튼 활성화(파란색) */
a.leaflet-control-locate-btn.is-active{
  background:#2b7cff !important;
  color:#fff !important;
}
a.leaflet-control-locate-btn.is-active svg{
  color:#fff !important;
}

/* 내 위치 원형 마커 */
.my-heading-icon .dot{
  width: 28px;
  height: 28px;
  border-radius: 999px;
  background: rgba(43,124,255,0.22);
  border: 2px solid #2b7cff;
  box-shadow: 0 6px 16px rgba(0,0,0,0.18);
  position: relative;
  transform-origin: 50% 50%;
}

/* 원 안의 방향 화살표(삼각형) */
/* .my-heading-icon .arrow{
  display: block;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 0;
  height: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-bottom: 18px solid #2b7cff;
} */

/* 원 안의 방향 화살표(삼각형) - 위(북) 향하게 */
/* .my-heading-icon .arrow{
  display: block;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%); 
  width: 0;
  height: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;

  border-top: 18px solid #2b7cff; 
  border-bottom: 0;
} */

.my-heading-icon .dot{
  position: relative;
  width: 48px;   /* 네가 쓰는 아이콘 크기 */
  height: 48px;  /* 네가 쓰는 아이콘 크기 */
  transform-origin: 50% 50%;
  background: transparent; /* ✅ 원 배경 제거 */
  border: 0;               /* ✅ 원 테두리 제거 */
  border-radius: 0;        /* ✅ 원 형태 제거 */
  box-shadow: none;        /* ✅ 그림자 제거 */
}
.my-heading-icon .dir{ display:block; }

/* ========== Leaflet 커스텀 스타일 ========== */

/* 곰 마커 툴팁(라벨) */
.leaflet-tooltip.bear-label {
  background: rgba(43, 124, 255, 0.95);
  color: #ffffff;
  border: none;
  border-radius: 6px;
  padding: 4px 8px;
  font-size: 11px;
  font-weight: 600;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.leaflet-tooltip.bear-label::before {
  border-top-color: rgba(43, 124, 255, 0.95);
}

/* 곰 마커 팝업(말풍선) */
.leaflet-popup.bear-popup .leaflet-popup-content-wrapper {
  background: rgba(255, 255, 255, 0.98);
  border-radius: 12px;
  padding: 8px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
  font-size: 13px;
  line-height: 1.6;
}

.leaflet-popup.bear-popup .leaflet-popup-tip {
  background: rgba(255, 255, 255, 0.98);
}

.leaflet-popup.bear-popup .leaflet-popup-content {
  margin: 8px 10px;
  min-width: 120px;
}

.leaflet-popup.bear-popup .leaflet-popup-close-button {
  font-size: 20px;
  color: rgba(0, 0, 0, 0.4);
  padding: 4px 8px;
}

.leaflet-popup.bear-popup .leaflet-popup-close-button:hover {
  color: rgba(0, 0, 0, 0.7);
}