.leaflet-tooltip, .leaflet-pm-action { font-size: 1.2rem; } 

#editContsPopup {
  --modal-divider: #e5e5e5;
}

@media (min-width: 1024px) {
  #editContsPopup .centerModal.xl {
    width: 110rem;
    max-width: calc(100vw - 6rem);
    max-height: 88vh;
  }

  #editContsPopup .popMapWrap,
  #editContsPopup .popMapWrap .mapCont {
    height: 60rem;
  }
}

.leaflet-pm-icon-undo {
  background-image: url('data:image/svg+xml,%3Csvg fill="%235b5b5b" xmlns="http://www.w3.org/2000/svg" viewBox="-2 -2 60 60" enable-background="new 0 0 52 52" xml:space="preserve"%3E%3Cpath d="M30.3,12.6c10.4,0,18.9,8.4,18.9,18.9s-8.5,18.9-18.9,18.9h-8.2c-0.8,0-1.3-0.6-1.3-1.4v-3.2 c0-0.8,0.6-1.5,1.4-1.5h8.1c7.1,0,12.8-5.7,12.8-12.8s-5.7-12.8-12.8-12.8H16.4c0,0-0.8,0-1.1,0.1c-0.8,0.4-0.6,1,0.1,1.7l4.9,4.9 c0.6,0.6,0.5,1.5-0.1,2.1L18,29.7c-0.6,0.6-1.3,0.6-1.9,0.1l-13-13c-0.5-0.5-0.5-1.3,0-1.8L16,2.1c0.6-0.6,1.6-0.6,2.1,0l2.1,2.1 c0.6,0.6,0.6,1.6,0,2.1l-4.9,4.9c-0.6,0.6-0.6,1.3,0.4,1.3c0.3,0,0.7,0,0.7,0L30.3,12.6z"/%3E%3C/svg%3E');
}

.leaflet-pm-icon-snapping {
  background-image: url('data:image/svg+xml,<?xml version="1.0" encoding="UTF-8"?>%0A<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">%0A    <!-- Generator: Sketch 57.1 (83088) - https://sketch.com -->%0A    <title>Atoms/Icons/Tools/Magnet</title>%0A    <desc>Created with Sketch.</desc>%0A    <defs>%0A        <path d="M21.9994759,10.9428183 L21.9999985,16.3710417 C22,16.6872007 22,17.0058278 22,17.3269411 C22,21.5646545 18.6421356,25 14.5,25 C10.3578644,25 7,21.5646545 7,17.3269411 L7.00087508,10.9907507 L11.0022808,10.9984125 C11.0017033,11.6980114 11.001247,12.4168248 11.0008992,13.1554887 L11,17.3269411 C11,19.3756809 12.5876841,21 14.5,21 C16.4123159,21 18,19.3756809 18,17.3269411 C18,15.0702032 17.9995696,12.9619668 17.998539,10.9910032 L21.9994759,10.9428183 Z M10,7 C10.5522847,7 11,7.44771525 11,8 L11,10 L7,10 L7,8 C7,7.44771525 7.44771525,7 8,7 L10,7 Z M21,7 C21.5522847,7 22,7.44771525 22,8 L22,10 L18,10 L18,8 C18,7.44771525 18.4477153,7 19,7 L21,7 Z" id="path-1"></path>%0A    </defs>%0A    <g id="Symbols" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">%0A        <g id="Atoms/Icons/Tools/Magnet" transform="translate(-3.000000, -3.000000)">%0A            <mask id="mask-2" fill="white">%0A                <use xlink:href="%23path-1"></use>%0A            </mask>%0A            <use id="Mask" fill="%235B5B5B" fill-rule="nonzero" transform="translate(14.500000, 16.000000) rotate(45.000000) translate(-14.500000, -16.000000) " xlink:href="%23path-1"></use>%0A        </g>%0A    </g>%0A</svg>');
}

.button-container.active .leaflet-buttons-control-button {
  background-color: #3447D2;
}

.button-container:has(.disabled) {
  pointer-events: none;
  opacity: 0.3;
}

.button-container.active .leaflet-buttons-control-button div {
  filter: brightness(0) invert(1);
}

.action-finish, .action-finishMode, .action-cancel, .action-removeLastVertex { display: none !important; }
.marker-icon-middle { opacity: 0.5; }

.line-endpoint-plus-wrap {
  background: transparent;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
}
.line-endpoint-plus {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background-color: rgba(52, 71, 210, 0.95);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  user-select: none;
}

.popMapWrap button.active {
    background-color: #3447D2;
    color: #fff;
}

.popMapWrap button:disabled {
    background-color: #e4e4e4 !important;
}
.popMapWrap button:disabled svg {
    color: #fff !important;
}

.popMapWrap button.active img {
    filter: invert(1);
}

/* polygon-modes 탭 스타일 */
.polygon-modes {
  display: flex;
  align-items: center;
  gap: 0;
  height: 2.1rem;
  border: 1px solid #E4E4E4;
  border-radius: 0.4rem;
  overflow: hidden;
  background-color: #fff;
  box-sizing: border-box;
}

.polygon-modes button {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.4rem 0.8rem;
  height: 100%;
  border: none;
  border-right: 1px solid #E4E4E4;
  background-color: #fff;
  cursor: pointer;
  transition: all 0.2s ease;
  color: #717171;
}

#editContsPopup .lineBreak {
  border-bottom-color: var(--modal-divider);
}

#editContsPopup .polygon-modes {
  border-color: var(--modal-divider);
}

#editContsPopup .polygon-modes button {
  border-right-color: var(--modal-divider);
}

#editContsPopup .mapDetailWrap .lineSettingWrap.styleModeWrap .contentStyleGroup {
  border-left-color: var(--modal-divider);
}

#editContsPopup .mapDetailWrap .lineSettingWrap.styleModeWrap .contentStyleGroup #btnContentStyleApply {
  border-right-color: var(--modal-divider);
}

#editContsPopup .mapDetailWrap .lineSettingWrap.styleModeWrap #btnCategoryStyleApply,
#editContsPopup .mapDetailWrap .lineSettingWrap.styleModeWrap #btnContentStyleApply {
  border-color: var(--modal-divider);
}

#editContsPopup .mapDetailWrap .lineSettingWrap.styleModeWrap #btnDefaultStyleApply.sub-action {
  border-color: var(--modal-divider);
}

.polygon-modes button:last-child {
  border-right: none;
}

.polygon-modes button svg {
  width: 1.6rem;
  height: 1.6rem;
  display: block;
}

.mapDetailWrap .lineSettingWrap.styleModeWrap {
  gap: 0.6rem;
  flex-wrap: wrap;
}

.mapDetailWrap .lineSettingWrap.styleModeWrap > #btnCategoryStyleApply,
.mapDetailWrap .lineSettingWrap.styleModeWrap .contentStyleGroup {
  flex: 0 1 auto;
  min-width: 0;
}

.mapDetailWrap .lineSettingWrap.styleModeWrap > #btnCategoryStyleApply {
  width: auto;
}

.mapDetailWrap .lineSettingWrap.styleModeWrap .contentStyleGroup {
  display: flex;
  align-items: center;
  gap: 0;
  margin-left: 0.2rem;
  padding-left: 0.6rem;
  border-left: 1px solid #e5e5e5;
}

.mapDetailWrap .lineSettingWrap.styleModeWrap .contentStyleGroup #btnContentStyleApply {
  flex: 1 1 0;
  min-width: 0;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  border-right: 1px solid #c8c8c8;
}

.mapDetailWrap .lineSettingWrap.styleModeWrap .contentStyleGroup #btnDefaultStyleApply.sub-action {
  flex: 0 0 auto;
  width: fit-content;
  min-width: unset;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  border-left: none;
}

.mapDetailWrap .lineSettingWrap.styleModeWrap .btn-basic {
  min-height: 2.8rem;
}

.mapDetailWrap .lineSettingWrap.styleModeWrap #btnCategoryStyleApply,
.mapDetailWrap .lineSettingWrap.styleModeWrap #btnContentStyleApply {
  border: 1px solid #D8D8D8;
  background-color: #fff;
  color: #4a4a4a;
}

.mapDetailWrap .lineSettingWrap.styleModeWrap #btnCategoryStyleApply.active,
.mapDetailWrap .lineSettingWrap.styleModeWrap #btnContentStyleApply.active {
  border-color: #3585ff;
  background-color: #eef5ff;
  color: #1d1d1d;
}

.mapDetailWrap .lineSettingWrap.styleModeWrap #btnDefaultStyleApply.sub-action {
  margin-left: 0;
  padding: 0 0.8rem;
  height: 2.6rem;
  border: 1px solid #E4E4E4;
}

#editContsPopup .mapDetailWrap .styleBlock {
  display: block;
}

#editContsPopup .mapDetailWrap .styleBlock + .styleBlock {
  margin-top: 1.2rem;
  padding-top: 1.2rem;
  border-top: 1px solid #e5e5e5;
}

#editContsPopup .mapDetailWrap .polygonPatternFormPair {
  display: flex;
  flex-wrap: nowrap;
  align-items: flex-start;
  gap: 1.2rem 1.6rem;
}

#editContsPopup .mapDetailWrap .polygonPatternFields {
  display: flex;
  flex-wrap: nowrap;
  align-items: flex-start;
  gap: 0.35rem 0.6rem;
  width: 100%;
  min-width: 0;
  overflow-x: auto;
}

#editContsPopup .mapDetailWrap .polygonPatternFields .polygonPatternGridTwoCol {
  margin-top: 0;
  margin-bottom: 0;
}

#editContsPopup .mapDetailWrap .polygonPatternGridTwoCol {
  display: flex;
  flex-wrap: nowrap;
  align-items: flex-start;
  gap: 0.35rem 0.6rem;
  flex: 0 1 auto;
  min-width: 0;
  width: auto;
}

#editContsPopup .mapDetailWrap .lineSettingWrap {
  width: auto;
}

#editContsPopup .mapDetailWrap .lineSettingWrap .form-group {
  display: inline-block;
  vertical-align: middle;
  margin-right: 0.4rem;
  margin-bottom: 0.4rem;
  white-space: nowrap;
}

#editContsPopup .mapDetailWrap .lineSettingWrap .form-group > label {
  display: inline-block;
  min-width: 0;
  margin-right: 0.4rem;
}

#editContsPopup .mapDetailWrap .lineSettingWrap .form-group input[type="text"],
#editContsPopup .mapDetailWrap .lineSettingWrap .form-group input[type="number"],
#editContsPopup .mapDetailWrap .lineSettingWrap .form-group select {
  min-width: 0;
  max-width: 100%;
  vertical-align: middle;
}

#editContsPopup .mapDetailWrap .lineSettingWrap .form-group select {
  padding-right: 30px;
}

#editContsPopup .mapDetailWrap .lineSettingWrap .form-group input[type="color"] {
  width: 2rem;
  vertical-align: middle;
}

#editContsPopup .mapDetailWrap .lineSettingWrap .form-group input[type="checkbox"] {
  width: auto;
  vertical-align: middle;
}

#editContsPopup .mapDetailWrap .lineSettingWrap .form-group .inputWithUnit {
  display: inline-flex;
  align-items: center;
  vertical-align: middle;
  gap: 0.35rem;
  width: 6rem;
  min-width: 0;
  max-width: 100%;
  flex: 0 1 auto;
}

#editContsPopup .mapDetailWrap .lineSettingWrap .form-group .inputWithUnit input {
  flex: 1 1 auto;
  min-width: 0;
}

/* 입력 폭 유틸 클래스 */
#editContsPopup .mapDetailWrap .lineSettingWrap .inputSize-xl {
  width: 11rem;
}

#editContsPopup .mapDetailWrap .lineSettingWrap .inputSize-lg {
  width: 9ch;
}

#editContsPopup .mapDetailWrap .lineSettingWrap .inputSize-md {
  width: 8ch;
}

#editContsPopup .mapDetailWrap .lineSettingWrap .inputSize-sm {
  width: 7ch;
}

#editContsPopup .mapDetailWrap .lineSettingWrap .inputSize-xs {
  width: 6ch;
}

#editContsPopup .mapDetailWrap .lineSettingWrap .form-group .inputWithUnit .unit {
  flex: 0 0 auto;
  white-space: nowrap;
}

#editContsPopup .mapDetailWrap .lineSettingWrap .form-group input[type="number"] {
  -moz-appearance: textfield;
  appearance: textfield;
}

#editContsPopup .mapDetailWrap .lineSettingWrap .form-group input[type="number"]::-webkit-outer-spin-button,
#editContsPopup .mapDetailWrap .lineSettingWrap .form-group input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

#editContsPopup .mapDetailWrap .lineSettingWrap .form-group input:disabled,
#editContsPopup .mapDetailWrap .lineSettingWrap .form-group select:disabled {
  background-color: #f3f4f6;
  border-color: #d8dbe2;
  color: #8b9098;
  opacity: 1;
  cursor: not-allowed;
}

#editContsPopup .mapDetailWrap .lineSettingWrap .form-group input[type="checkbox"]:disabled {
  accent-color: #b8bdc7;
}

@media (max-width: 768px) {
  .mapDetailWrap .lineSettingWrap.styleModeWrap > #btnCategoryStyleApply {
    flex: 1 1 auto;
  }

  .mapDetailWrap .lineSettingWrap.styleModeWrap .contentStyleGroup {
    flex: 1 1 100%;
    margin-left: 0;
    padding-left: 0;
    border-left: 0;
  }

  #editContsPopup .mapDetailWrap .lineSettingWrap .form-group {
    display: block;
    margin-right: 0;
    white-space: nowrap;
  }

  #editContsPopup .mapDetailWrap .styleBlock .lineSettingWrap .form-group {
    margin-bottom: 0.6rem;
  }

  #editContsPopup .mapDetailWrap .styleBlock .lineSettingWrap .form-group:last-child {
    margin-bottom: 0;
  }

  #editContsPopup .mapDetailWrap .lineSettingWrap .form-group > label {
    margin-bottom: 0;
  }

  #editContsPopup .mapDetailWrap .polygonPatternFormPair {
    flex-direction: column;
    flex-wrap: wrap;
  }

  #editContsPopup .mapDetailWrap .polygonPatternFields,
  #editContsPopup .mapDetailWrap .polygonPatternGridTwoCol {
    flex-wrap: wrap;
  }

  #editContsPopup .mapDetailWrap .polygonPatternFields {
    overflow-x: visible;
  }

  #editContsPopup .mapDetailWrap .polygonPatternFields .form-group,
  #editContsPopup .mapDetailWrap .polygonPatternGridTwoCol .form-group {
    display: inline-block;
    margin-right: 0;
    margin-bottom: 0.6rem;
    vertical-align: top;
  }

  #editContsPopup .mapDetailWrap .polygonPatternGridTwoCol .form-group:last-child {
    margin-bottom: 0;
  }
}

@media only screen and (max-width: 767px) {
  .mapDetailWrap .lineSettingWrap.styleModeWrap button.activeBtn {
    font-size: 1.4rem;
  }
}