.popover-body {
  max-width: 500px;
  padding: 10px;
}

.popover {
  --bs-popover-zindex: 1070;
  --bs-popover-max-width: 500px;
  --bs-popover-font-size: 12px;
  --bs-popover-bg: #fff;
  --bs-popover-border-width: 1px;
  --bs-popover-border-color: transparent;
  --bs-popover-border-radius: 9px;
  --bs-popover-inner-border-radius: calc(9px - 1px);
  --bs-popover-box-shadow: 0 9px 18px rgba(0, 0, 0, 0.15);
  --bs-popover-header-padding-x: 18px;
  --bs-popover-header-padding-y: 9px;
  --bs-popover-header-font-size: 12px;
  --bs-popover-header-bg: #444444;
  --bs-popover-body-padding-x: 18px;
  --bs-popover-body-padding-y: 18px;
  --bs-popover-body-color: #212529;
  --bs-popover-arrow-width: 18px;
  --bs-popover-arrow-height: 9px;
  --bs-popover-arrow-border: var(--bs-popover-border-color);
  z-index: var(--bs-popover-zindex);
  display: block;
  max-width: var(--bs-popover-max-width);
  font-style: normal;
  font-weight: 400;
  line-height: 1.5;
  text-align: left;
  text-align: start;
  text-decoration: none;
  text-shadow: none;
  text-transform: none;
  letter-spacing: normal;
  word-break: normal;
  white-space: normal;
  word-spacing: normal;
  line-break: auto;
  font-size: var(--bs-popover-font-size);
  word-wrap: break-word;
  background-color: var(--bs-popover-bg);
  background-clip: padding-box;
  border: var(--bs-popover-border-width) solid var(--bs-popover-border-color);
  border-radius: var(--bs-popover-border-radius)
}

.popover .popover-arrow {
  display: block;
  width: var(--bs-popover-arrow-width);
  height: var(--bs-popover-arrow-height)
}

.popover .popover-arrow::after,.popover .popover-arrow::before {
  position: absolute;
  display: block;
  content: "";
  border-color: transparent;
  border-style: solid;
  border-width: 0
}

.bs-popover-auto[data-popper-placement^=top]>.popover-arrow,.bs-popover-top>.popover-arrow {
  bottom: calc(var(--bs-popover-arrow-height) * -1 - var(--bs-popover-border-width))
}

.bs-popover-auto[data-popper-placement^=top]>.popover-arrow::after,.bs-popover-auto[data-popper-placement^=top]>.popover-arrow::before,.bs-popover-top>.popover-arrow::after,.bs-popover-top>.popover-arrow::before {
  border-width: var(--bs-popover-arrow-height) calc(var(--bs-popover-arrow-width) * .5) 0
}

.bs-popover-auto[data-popper-placement^=top]>.popover-arrow::before,.bs-popover-top>.popover-arrow::before {
  bottom: 0;
  border-top-color: var(--bs-popover-arrow-border)
}

.bs-popover-auto[data-popper-placement^=top]>.popover-arrow::after,.bs-popover-top>.popover-arrow::after {
  bottom: var(--bs-popover-border-width);
  border-top-color: var(--bs-popover-bg)
}

.bs-popover-auto[data-popper-placement^=right]>.popover-arrow,.bs-popover-end>.popover-arrow {
  left: calc(var(--bs-popover-arrow-height) * -1 - var(--bs-popover-border-width));
  width: var(--bs-popover-arrow-height);
  height: var(--bs-popover-arrow-width)
}

.bs-popover-auto[data-popper-placement^=right]>.popover-arrow::after,.bs-popover-auto[data-popper-placement^=right]>.popover-arrow::before,.bs-popover-end>.popover-arrow::after,.bs-popover-end>.popover-arrow::before {
  border-width: calc(var(--bs-popover-arrow-width) * .5) var(--bs-popover-arrow-height) calc(var(--bs-popover-arrow-width) * .5) 0
}

.bs-popover-auto[data-popper-placement^=right]>.popover-arrow::before,.bs-popover-end>.popover-arrow::before {
  left: 0;
  border-right-color: var(--bs-popover-arrow-border)
}

.bs-popover-auto[data-popper-placement^=right]>.popover-arrow::after,.bs-popover-end>.popover-arrow::after {
  left: var(--bs-popover-border-width);
  border-right-color: var(--bs-popover-bg)
}

.bs-popover-auto[data-popper-placement^=bottom]>.popover-arrow,.bs-popover-bottom>.popover-arrow {
  top: calc(var(--bs-popover-arrow-height) * -1 - var(--bs-popover-border-width))
}

.bs-popover-auto[data-popper-placement^=bottom]>.popover-arrow::after,.bs-popover-auto[data-popper-placement^=bottom]>.popover-arrow::before,.bs-popover-bottom>.popover-arrow::after,.bs-popover-bottom>.popover-arrow::before {
  border-width: 0 calc(var(--bs-popover-arrow-width) * .5) var(--bs-popover-arrow-height)
}

.bs-popover-auto[data-popper-placement^=bottom]>.popover-arrow::before,.bs-popover-bottom>.popover-arrow::before {
  top: 0;
  border-bottom-color: var(--bs-popover-arrow-border)
}

.bs-popover-auto[data-popper-placement^=bottom]>.popover-arrow::after,.bs-popover-bottom>.popover-arrow::after {
  top: var(--bs-popover-border-width);
  border-bottom-color: var(--bs-popover-bg)
}

.bs-popover-auto[data-popper-placement^=bottom] .popover-header::before,.bs-popover-bottom .popover-header::before {
  position: absolute;
  top: 0;
  left: 50%;
  display: block;
  width: var(--bs-popover-arrow-width);
  margin-left: calc(var(--bs-popover-arrow-width) * -.5);
  content: "";
  border-bottom: var(--bs-popover-border-width) solid var(--bs-popover-header-bg)
}

.bs-popover-auto[data-popper-placement^=left]>.popover-arrow,.bs-popover-start>.popover-arrow {
  right: calc(var(--bs-popover-arrow-height) * -1 - var(--bs-popover-border-width));
  width: var(--bs-popover-arrow-height);
  height: var(--bs-popover-arrow-width)
}

.bs-popover-auto[data-popper-placement^=left]>.popover-arrow::after,.bs-popover-auto[data-popper-placement^=left]>.popover-arrow::before,.bs-popover-start>.popover-arrow::after,.bs-popover-start>.popover-arrow::before {
  border-width: calc(var(--bs-popover-arrow-width) * .5) 0 calc(var(--bs-popover-arrow-width) * .5) var(--bs-popover-arrow-height)
}

.bs-popover-auto[data-popper-placement^=left]>.popover-arrow::before,.bs-popover-start>.popover-arrow::before {
  right: 0;
  border-left-color: var(--bs-popover-arrow-border)
}

.bs-popover-auto[data-popper-placement^=left]>.popover-arrow::after,.bs-popover-start>.popover-arrow::after {
  right: var(--bs-popover-border-width);
  border-left-color: var(--bs-popover-bg)
}

.popover-header {
  padding: var(--bs-popover-header-padding-y) var(--bs-popover-header-padding-x);
  margin-bottom: 0;
  font-size: var(--bs-popover-header-font-size);
  color: #fff;
  background-color: var(--bs-popover-header-bg);
  border-bottom: var(--bs-popover-border-width) solid var(--bs-popover-border-color);
  border-top-left-radius: var(--bs-popover-inner-border-radius);
  border-top-right-radius: var(--bs-popover-inner-border-radius)
}

.popover-header:empty {
  display: none
}

.popover-header span::after {
  content: url("../../images/ol/close-wh.svg");
  margin-right: -10px;
  cursor: pointer;
}

.popover-header span {
  display: flex;
}

.popover-header {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}

#popover {
  cursor: default;
  color: #333333;
}

.map-cursor {
  cursor: url("../../cur/identify.cur") 2 2,  pointer;
}

.measure-cursor {
  cursor: url("../../cur/measure.cur") 2 2,  pointer;
}

.area-cursor {
  cursor: url("../../cur/area.cur") 2 2,  pointer;
}

.default-cursor {
  cursor: default;
}


.toolbar-wrap{
  position:absolute; left:0; right:0; bottom:50px;
  display:flex; justify-content:center;
  pointer-events:none;

}

/* 오버레이 바 */

.map-toolbar{
  pointer-events:auto;
  /* position:absolute; inset:auto 20px 50px 20px; 상단에 띄우기 */
  display:flex; align-items:center; gap:8px;
  padding:8px 10px;
  background:rgba(0,0,0,0.35);
  backdrop-filter: blur(6px);
  border-radius:12px;
  z-index:9999;
  max-width: 830px;
}
/* 좌우 화살표 */
.nav-arrow{
  min-width:34px; height:34px; border:0; border-radius:10px;
  background:#ffffff; color:#111; font-size:20px; line-height:1;
  box-shadow: 0 2px 6px rgba(0,0,0,.15);
  cursor:pointer;
}
.nav-arrow:disabled{ opacity:.4; cursor:default; }

/* 칩 트랙(가로 스크롤 영역) */
.chip-track{
  display:flex; gap:16px;
  overflow-x:auto; overscroll-behavior-inline:contain;
  scroll-snap-type: inline mandatory; /* 칩에 맞춰 스냅 */
  scrollbar-width:none;  /* Firefox */
  -ms-overflow-style:none; /* IE */
  padding:4px 0px;
  max-width:min(80vw, 900px); /* 필요시 조절 */
  background:transparent;
}
.chip-track::-webkit-scrollbar{ display:none; } /* Chrome */

/* 칩(버튼) */
.chip{
  scroll-snap-align:start;
  border:1px solid #E5ECFF;
  background:#fff; color:#222;
  padding:12px 16px;
  border-radius:14px;
  font: 600 14px/1.2 system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  white-space:nowrap;
  box-shadow: 0 1px 3px rgba(0,0,0,.08);
  cursor:pointer;
}
.chip.selected{ /*outline: 2px solid #8AB6FF; outline-offset:2px;*/
  border: 3px solid #8AB6FF;
  padding:10px 14px;
}

/* 좌우 가장자리 그라데이션(시야 힌트) */
.chip-track{
  position:relative;
  /*mask-image: linear-gradient(to right, transparent 0, black 24px, black calc(100% - 24px), transparent 100%);*/
}

.toolbar-wrap2{
  position:absolute; left:0; right:0; bottom:18px;
  display:flex; justify-content:center;
  pointer-events:none;

}

.layer-toolbar {
	pointer-events: auto;
    display: flex;
    align-items: center;
    height: 27px;
    background-color: rgba(67,136,211,0.75);
    border: 1px solid #787a84;
    border-radius: 5px;
    z-index: 9999;
}

.layer-toolbar ul {
	padding: 0px; 
	margin: 2px 10px 0px 5px;
	width: 100%;
	list-style: none;
}

.layer-toolbar li {
	float: left; 
	margin: 0px 0px 0px 5px;
	color: #000000;
	font-size: 13px;
	font-weight: bold;
}

.layer-toolbar li>span {
	color: #0000FF;
	font-size: 13px;
	font-weight: normal;
}

/* 좁은 화면 대응 */
@media (max-width:600px){
  .map-toolbar{ inset:8px 8px auto 8px; }
  .chip{ font-size:13px; padding:9px 14px; }
}

/* 닫기 버튼 */
.toolbar-close{
  margin-left: 8px;
  min-width:34px; height:34px; border:0; border-radius:10px;
  background:#fff; color:#111; font-size:20px; line-height:1;
  box-shadow: 0 2px 6px rgba(0,0,0,.15);
  cursor:pointer;
}

/* 다시 열기 버튼 (작은 pill) */
.toolbar-open{
  position:absolute; right:12px; top:12px; z-index:9998;
  border:0; border-radius:999px; padding:8px 12px;
  background:#fff; color:#111; font-weight:600;
  box-shadow: 0 2px 6px rgba(0,0,0,.15);
  cursor:pointer;
}

.layer-on {
  /* outline: 3px solid #3872DC;
  outline-offset: -2px; 음수로 주면 안쪽으로 */
  background: #3872DC;
  color: #ffffff;
}