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

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

.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: 190px;
  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;
}