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

.container {
    height: 100vh;
}

#map {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}
.marker-title {
    position: absolute;
    padding: 5px 10px; /* 제목 내용에 따라 패딩 조절 가능 */
    background-color: #fff; /* 배경색 */
    border: 1px solid #ccc; /* 테두리 스타일 및 색상 */
    border-radius: 10px; /* 테두리 모서리의 굴곡 정도 */
    font-size: 11px; /* 제목 글자 크기 */
    font-weight: bold; /* 제목 글자 굵기 */
    color: #333; /* 제목 글자 색상 */
    white-space: nowrap; /* 너비를 벗어나면 줄바꿈 방지 */
    text-align:center;
}
#myLocationBtn, #searchBtn {
  position: fixed;
      top: 10px;
      left: 10px;
      z-index: 10;
      background-color: #fff;
      border: 1px solid #999;
      border-radius: 3px;
      cursor: pointer;
      padding: 6px 12px;
      font-size: 14px;
      border:none;
      
      height:30px;
}
#locBtn {
  font: 14px/18px "Open Sans", "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", Sans-Serif;
  font-weight:900;
  position: fixed;
  bottom: 50px;
  left: calc(50% - 50px); /* 가로 중앙 위치로 설정 */
  z-index: 10;
  background-color: #fff;
  
  border-radius: 15px;
  cursor: pointer;
  padding: 6px 12px;
  font-size: 14px;
  border: none;
  height: 30px;
}
    #searchBtn{
        top : 50px;
    }

    /* 모달 스타일 */
    #myModal, #searchModal, #agencyListModal {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.5); /* 배경에 어둡게 표시 */
        z-index: 9999; /* 다른 요소 위로 표시 */
        overflow: auto; /* 모달 내용이 넘칠 경우 스크롤 가능하도록 설정 */
    }

    /* 모달 컨텐츠 스타일 */
    #myModal-content {
        position: relative;
        background-color: #fefefe; /* 모달 배경 */
        margin: auto; /* 모달을 화면 중앙에 위치시킵니다 */
        padding: 20px;
        border: 1px solid #888;
        width: 50vh; /* 모달 너비 */
        height: 80vh; /* 모달 높이 */
        transition: transform 0.3s; /* 애니메이션 효과 설정 */
        text-align: center; /* 내용 가운데 정렬 */
        cursor: grab; /* 드래그 커서 설정 */
        overflow-y :scroll;
    }

    /* 닫기 버튼 스타일 */
    .close {
        color: #aaa;
        float: right;
        font-size: 28px;
        font-weight: bold;
        cursor: pointer;
    }

    .close:hover,
    .close:focus {
        color: black;
        text-decoration: none;
    }

    /* 모달 내부의 화살표 스타일 */
    .modal-arrow {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        font-size: 24px;
        color: #555;
        cursor: pointer;
    }

    .modal-prev {
        left: 10px;
    }

    .modal-next {
        right: 10px;
    }

    .img{
        display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh; /* 원하는 높이 설정 */
    }

/*    .wrap {position: absolute;left: 0;bottom: -35px;width: 288px;height: 132px;margin-left: -68px;text-align: left;overflow: hidden;font-size: 12px;font-family: 'Malgun Gothic', dotum, '돋움', sans-serif;line-height: 1.5;}*/
.wrap {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 18px;
  align-items: center;
  overflow: hidden;
  font-size: 12px;
  font-family: 'Malgun Gothic', dotum, '돋움', sans-serif;
  line-height: 1.5;
  
}
    .wrap * {padding: 0;margin: 0;}
    /*.wrap .info {width: 286px;height: 120px;border-radius: 5px;border-bottom: 2px solid #ccc;border-right: 1px solid #ccc;overflow: hidden;background: #fff;}*/
    /*.wrap .info {width: 200px;height: 32px;border-radius: 20px;border-bottom: 2px solid #ccc;border-right: 1px solid #ccc;overflow: hidden;background: #fff;}*/
    /*.wrap .info:nth-child(1) {border: 0;box-shadow: 0px 1px 2px #888;}*/
    /*.info .title {padding: 5px 0 0 10px;height: 30px;background: #eee;border-bottom: 1px solid #ddd;font-size: 14px;font-weight: bold;}*/
    /*.info .close {position: absolute;top: 10px;right: 10px;color: #888;width: 17px;height: 17px;background: url('https://t1.daumcdn.net/localimg/localimages/07/mapapidoc/overlay_close.png');}*/
    /*.info .close:hover {cursor: pointer;}*/
    /*.info .body {position: relative;overflow: hidden;}*/
    /*.info .desc {position: relative;margin: 13px 0 0 90px;height: 75px;}*/
    /*.desc .ellipsis {overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}*/
    /*.desc .jibun {font-size: 11px;color: #888;margin-top: -2px;}*/
    /*.info .img {position: absolute;top: 6px;left: 5px;width: 73px;height: 71px;border: 1px solid #ddd;color: #888;overflow: hidden;}*/
    /*.info:after {content: '';position: absolute;margin-left: -12px;left: 50%;bottom: 0;width: 22px;height: 12px;background: url('https://t1.daumcdn.net/localimg/localimages/07/mapapidoc/vertex_white.png')}*/
    /*.info .link {color: #5085BB;}*/

    /*카드 */
#agency_title{
  z-index: 10;
}
.marker {
  background-color: #800000; /* Wine color */
  color: #FFFFFF; /* White color for text/icon */
  border-radius: 50%; /* Makes the marker circular */
  width: 24px; /* Adjust width and height as needed */
  height: 24px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.card {
    width: 350px;
    height: 350px;
    background: #E8EAEA;
    border-radius: 15px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: relative;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  
  .title, .more {
    padding: 10px 15px;
  }
  
  .user {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: 10px 15px;
    width:100%;
    
  }
  
  .user__content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-grow: 1;
  }
  
  .user__container , .agencyList__container{
    flex: 1; /* 내용이 채워지도록 합니다. */
    display: flex;
    flex-direction: column;
    align-items: flex-start; /* 위쪽에서부터 정렬합니다. */
    justify-content: flex-start; /* 위에서부터 정렬합니다. */
    width: 100%;
    background-color:#fff;
  }
  
  
  
  .name {
    font-weight: 800;
  }
  
  .username {
    font-size: .9em;
    color: #64696e;
  }
  
  .image {
    width: 60px;
    height: 60px;
    background: rgb(22,19,70);
    background: linear-gradient(295deg, rgba(22,19,70,1) 41%, rgba(89,177,237,1) 100%);
    border-radius: 50%;
    margin-right: 15px;
  }
  
  .follow {
    border: none;
    border-radius: 25px;
    background-color: #0f1113;
    color: white;
    padding: 8px 15px;
    font-weight: 700;
  }
  
  .more {
    display: block;
    text-decoration: none;
    color: rgb(29, 155, 240);
    font-weight: 800;
  }
  
  .user:hover {
    background-color: #b3b6b6;
  }
  
  .more:hover {
    background-color: #b3b6b6;
    border-radius: 0px 0px 15px 15px;
  }
  
  .follow:hover {
    background-color: #2c3136;
  }
  .text{
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .text .name,
.text .username {
  margin: 0;
}
.task-tooltip {
  background-color: #eef3fd;
  border: #7689fd solid 2px;
  border-radius: 50px;
  color: #505bf0;
  font-size: 12px;
  font-weight: 500;
  height: auto;
  max-height:32px;
  letter-spacing: -0.25px;
  text-align: center;
  padding: 5px 11px;
  position: relative;
  z-index: 1000;
  overflow:hidden;
  
}
#agencyTitle{
    
  font: 8px/10px "Open Sans", "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", Sans-Serif;
         font-weight:900;
         color:rgb(240, 72, 120);
         overflow:hidden;
}
.juso, .info {
  display: flex;
  align-items: center; /* 수직 가운데 정렬 */
  min-height: 35px;

  padding:10px;
}    .title {
  display: inline-block;
}

.close {
  float: right;
  padding:10px;
}.titleColumn, .jusoColumn {
  width: 50%;
}
.titleColumn{
  font-weight: 900;
  font-size: 1.1em;
}

.title {
  color:rgb(240, 72, 120);
    font-weight: 900;
    font-size: 1.1em;
    padding: 10px 15px;
  }



  /*라디오 버튼 css*/
  .agencyForm {
    --background: #ffffff;
    --text: #414856;
    --radio: #7C96B2;
    --radio-checked: #4F29F0;
    --radio-size: 20px;
    --width: 100%;
    --height: 50px;
    --border-radius: 10px;
    background: var(--background);
    width: var(--width);
    height: var(--height);
    border-radius: var(--border-radius);
    color: var(--text);
    position: relative;
    box-shadow: 0 10px 30px rgba(65, 72, 86, 0.05);
    padding: 30px 20px;
    display: grid;
    grid-template-columns: auto var(--radio-size);
    align-items: center;
  }
  
  .agencyForm label {
    cursor: pointer;
    font-weight:bold;
    
  }

  
  .agencyForm input[type="radio"] {
    -webkit-appearance: none;
    -moz-appearance: none;
    position: relative;
    height: var(--radio-size);
    width: var(--radio-size);
    outline: none;
    margin: 0;
    cursor: pointer;
    border: 2px solid var(--radio);
    background: transparent;
    border-radius: 50%;
    display: grid;
    justify-self: end;
    justify-items: center;
    align-items: center;
    overflow: hidden;
    transition: border .5s ease;
    margin-bottom:.5rem;
  }
  
  .agencyForm input[type="radio"]::before, .agencyForm input[type="radio"]::after {
    content: "";
    display: flex;
    justify-self: center;
    border-radius: 50%;
  }
  
  .agencyForm input[type="radio"]::before {
    position: absolute;
    width: 100%;
    height: 100%;
    background: var(--background);
    z-index: 1;
    opacity: var(--opacity, 1);
  }
  
  .agencyForm input[type="radio"]::after {
    position: relative;
    width: calc(100% /2);
    height: calc(100% /2);
    background: var(--radio-checked);
    top: var(--y, 100%);
    transition: top 0.5s cubic-bezier(0.48, 1.97, 0.5, 0.63);
  }
  
  .agencyForm input[type="radio"]:checked {
    --radio: var(--radio-checked);
  }
  
  .agencyForm input[type="radio"]:checked::after {
    --y: 0%;
    animation: stretch-animate .3s ease-out .17s;
  }
  
  .agencyForm input[type="radio"]:checked::before {
    --opacity: 0;
  }
  
  .agencyForm input[type="radio"]:checked ~ input[type="radio"]::after {
    --y: -100%;
  }
  
  .agencyForm input[type="radio"]:not(:checked)::before {
    --opacity: 1;
    transition: opacity 0s linear .5s;
  }
  
  @keyframes stretch-animate {
    0% {
      transform: scale(1, 1);
    }
  
    28% {
      transform: scale(1.15, 0.85);
    }
  
    50% {
      transform: scale(0.9, 1.1);
    }
  
    100% {
      transform: scale(1, 1);
    }
  }
  
  .socials {
    position: fixed;
    display: block;
    left: 20px;
    bottom: 20px;
  }
  
  .socials > a {
    display: block;
    width: 30px;
    opacity: .2;
    transform: scale(var(--scale, 0.8));
    transition: transform 0.3s cubic-bezier(0.38, -0.12, 0.24, 1.91);
  }
  
  .socials > a:hover {
    --scale: 1;
  }