:root {

    /* color */
    --color-black: #3f454d;
    --color-white: #ffffff;
    --color-yellow: #fbbe28;
  
    /* size */
    --base-space: 8px;
    --size-button: 60px;
    --size-border: 4px;
    --font-size: 18px;
    --header-font-size: 15px;
    --font-size: 18px;
    --list-font-size: 12px;
    --subheader-font-size: 12px;

    /* bold */
    --header-font-weight:700;
    --midheader-font-weight:700;
    --font-weight:700;
  }
body {
    font-family: 'Malgun Gothic', 'Dotum', 'Segoe UI', 'ARIAL', 'sans-serif', 'tahoma';
    /* font-size: 14px; */
    line-height: 18px;
    /* color: #333333; */
    background-color: #ffffff;
    /* overflow-y: scroll; */
}
#topbar {
    position: fixed;
    height: 60px;
    left: 0;
    top: 0;
    z-index: 500;
    background-color: white;
    border-bottom: 1px solid #eee;
    width: 100%;
    font-family: 'Noto Sans KR', sans-serif;
    display: flex;
    justify-content: space-between;
    align-items: center;
    min-width:1350px;
}
#topbar #topbarLeft {
    position: relative;
    height: 60px;
    display: flex;
    justify-content: center;
    align-items: center;
}
#topbar #topbarLeft a {
    text-decoration: none;
    color: inherit;
}
#topbar #topbarLeft > #topbarLogo {
    width: 30px;
    height: 30px;
    margin-right: 35px;
    margin-left: 20px;
}
#auth {
    /* position: absolute;
    right: 100px; */
    margin-left:50px;
    margin-right:50px;
    font-weight: 300;
    width: 320px;
}
#topbarLogo {
  cursor:pointer;
}
.headermenu {
    margin-right: 20px;
    font-weight: var(--header-font-weight);
    font-size: var(--header-font-size);
    cursor:pointer;
}
.headermenu span {
  padding:10px;
  /* border-bottom:2px solid #000; */
}
.headermenu a {
  text-decoration: none;
  color: inherit;
}
.main {
    position: fixed;
    top:60px;
    width: 100%;
    height: 100%;
    /* background: #eee; */
}
.headermenu.active span {
    color: rgb(43, 133, 216);
}
.headermenu.menubar {
    position: relative;
}

.headermenu.menubar::after {
    content: "";
    position: absolute;
    bottom: -5px; /* 메뉴와 막대 사이의 간격 */
    left: 0;
    width: 100%;
    height: 3px; /* 막대 높이 */
    background-color: rgb(43, 133, 216);
}
.apt_body {
    display: flex;
}

.contentView {
    min-width: 680px;
    max-width: 680px;
    height: 100vh;
    border-right: 1px solid #b1adad;
}
.map {
    width: 100%;
    height: 100vh;
    background: #796bf7;
}
/* 각 매물페이지 부메뉴 */
.top_menu {
    width: 100%;
    min-width: 1100px;
    padding: 5px;
    border: 1px solid #ccc;
    font-size: 0.9em;
  }
  .top-menu-wrap {
    margin-right:50px;
  }
  .secondMenu {
    width: 100px;
    /* padding: 5px; */
    cursor: pointer;
    position: relative;
    border: 1px solid #ccc;
    border-radius: 3px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    -ms-border-radius: 3px;
    -o-border-radius: 3px;
    text-align: center;
    font-size: var(--list-font-size);
    display: flex;
    justify-content: space-around;
    align-items: center;
}
  
  .content {
    background-color: #e9e9e9;
    padding: 10px;
    padding-top:20px;
    position: absolute;
    top: 41px;
    left:0;
    z-index: 2;
    font-size: var(--subheader-font-size);
    background:#FFF;
    border:1px solid #ccc;
  }
  .memo {
    padding:10px;
  }
  .memo-and-buttons tr td {
    border:1px solid #ccc;
    height:25px;
    color:#005899;
  }
  .memo-and-buttons td div {
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
  }
  .mapSearchList-item-title {
    cursor:pointer;
  }
  /* 아파트 */
  .dataList {
    width: 656px;
    height: 40px;
    display:flex;
    align-items: center;
    justify-content: space-around;
    font-size: var(--list-font-size);
    background: #FFF;
    border-bottom: 1px solid #eee;
    cursor:pointer;
    margin: 0 auto;
    position: relative; /* position을 static이 아닌 값으로 설정 */
    /* z-index: 100; 
    pointer-events: auto;  */
  }
  .dataList:hover {
    background-color: #efefef;
  }
  .registerdate {
    width: 65px;
  }
  .maemulType {
    width: 60px;
  }
  .maemulName {
    width:50px;
    display: flex;
    align-items: center;
    flex-direction: column;
  }
  .maemulSize {
    width: 60px;
  }
  .maemulPosition {
    width: 85px;
  }
  .maemulMoney {
    width: 75px;
  }
  .maemulrealtor {
    width: 100px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
  }
  .addcontent {
    font-size: var(--list-font-size);
    background: #FFF;
  }
  .asset-btn {
    display: flex;
    align-items: center;
    justify-content: space-around;
  }
  .col-list .memo-and-buttons .asset-btn-con > div > div {
    display: table-cell;
    cursor: pointer;
    height: 100%;
    font-size: .95em;
    text-align: center;
    vertical-align: middle;
}
.addcontent {
    display: none;
}
/* wolse slide */
#slider-range{
  height:2px;
  position:relative;
}
.ui-slider-handle {
  position: absolute;
  top: 50%;
  transform: translateY(-20%); /* Center vertically */
  width: 20px; /* Adjust width if needed */
  height: 20px; /* Adjust height if needed */
  background-color: #4747fd; /* Optional: Change handle color */
  border-radius: 50%; /* Optional: Make handle circular */
  cursor: pointer;
}
.ui-slider-range {
  background: #4747fd; /* Change range color to match handles */
}
.ui-state-default, .ui-widget-content .ui-state-default {
  background-color: #ff8447;
}
#slider-values {
  text-align: center;
  font-weight: bold;
}
#price-ranges {
  display:flex;
  flex-wrap: wrap
}
.price-range {
  width: 57.5px;
  padding: 5px 10px;
  color: #333;
  border: 1px solid #f0f0f0;
  margin-left:-1px;
  text-align: center;
}
.price-range.active {
background-color: #4747fd;
color: #fff;
border: 1px solid #4747fd;
}
#slider-values {
margin: 20px 0;
}
#slider-values span {
margin-right: 10px;
font-size: 1.2em;
}

/* 조건 낮은순 높은순 */
#newlistupDown, #moneyupDown, #areaupDown{
  cursor:pointer;
  display:flex;
  align-items: center;
  /* background-image: url(../images/select_down.png);
    background-repeat: no-repeat;
    background-position: calc(100% - 5px) center; */
}

/* 모달창 스타일 */
.divide {
  /* height:1px; */
  width:90%;
  margin: 10px auto;
  border-bottom:1px solid #ccc;
}
.modal {
  display: none; /* 초기에는 숨김 */
  position: fixed; /* 화면에 고정 */
  z-index: 1; /* 다른 요소들보다 앞에 배치 */
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto; /* 컨텐츠가 모달 창 밖으로 나가면 스크롤 가능하게 */
  background-color: rgba(0, 0, 0, 0.4); /* 반투명 배경 */
}

/* 모달 컨텐츠 */
.modal-content {
  background-color: #fefefe;
  margin: auto;
  margin-top: 120px;
  /*상하15%,가운데정렬*//*padding: 20px;
  */border: 1px solid #888;
  width: 400px;
  border-radius: 15px;
  overflow: hidden;
  -webkit-border-radius: 15px;
  -moz-border-radius: 15px;
  -ms-border-radius: 15px;
  -o-border-radius: 15px;
}
.detailmodal-content {
  position:absolute;
  top: -1px;
  left:0px;
  background: #FFF;
  z-index: 10;
  width: 500px;
  height: 90%;
  overflow: hidden;
  border:1px solid #ccc;
  
  /* overflow-y: scroll;
  scrollbar-width: none;
  -ms-overflow-style: none; */
}
.detailmodal-content::-webkit-scrollbar {
  width: 0px;  /* Remove scrollbar space */
  background: transparent;  /* Optional: just make scrollbar invisible */
}
.detailModalHead {
  width: 98%;
  height: 40px;
  line-height: 40px;
  background: #1e90ff;
  color:#FFF;
  padding-left:10px;
  display: flex;
  justify-content: space-between;
  position: sticky;
  top:0;
  z-index: 10;
}
.custom-icon {
  color: tomato; /* 원하는 색상으로 변경 */
}

#resetFiltersButton {
  border: none;
  background: #1e90ff;
  color: #FFF;
  border-radius: 5px;
  cursor: pointer;
}

.close:hover,
.close:focus {
  /* color: black;
  text-decoration: none; */
  cursor: pointer;
}
.agency {
  text-align: center;
}
.ansHead {
  padding:10px;
  background: linear-gradient(135deg, #A78BFA, #60A5FA);
}
.agency-title {
  margin:0 auto;
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 10px;
  width: 130px;
  height: 25px;
  line-height: 25px;
  border-radius: 12.5px;
  background-color: #ffffff;
  color: #8b1eff;
  -webkit-border-radius: 12.5px;
  -moz-border-radius: 12.5px;
  -ms-border-radius: 12.5px;
  -o-border-radius: 12.5px;
}
.agency-info {
  color:#fff;
}
.memobtnGroup {
  display: flex;
  align-items: center;
  justify-content: space-around;
  margin-top: 10px;
}
.query {
  width: 50%;
  height: 40px;
  /* line-height: 40px; */
  color:#FFF;
  background: linear-gradient(135deg, #A78BFA, #60A5FA);
  display: flex;
  justify-content: center;
  align-items: center;
}
.query:hover {
  cursor:pointer;
}
.query-close{
  cursor: pointer;
  text-align: center;
  width: 50%;
  height: 40px;
  line-height: 40px;
  background-color: #bebebe;
}
.close {
  background: gray;
}
.agency {
  text-align: center;
}
.agency-detail, .agency-addr, .agency-name, .agency-tel {
  margin:10px 0;
}
.agency span {
    vertical-align: baseline;
    font-size:12px;
    white-space: normal; /* 텍스트가 영역을 벗어나면 줄바꿈 */
    word-wrap: break-word;
}
.agent-addr {
  width:100%;
}
.agency-subject {
  display: table-cell;
  padding-left:50px;
  width: 80px;
  text-align: left;
  color:#b1adad;
  font-size:12px;
}
.agency-subject-content {
  display: table-cell;
  padding-right:30px;
  text-align: left;
}
.sendMassage {
  text-align: left;
  padding-left:20px;
}
.message {
  width: 340px;
  height: 120px;
  padding: 10px;
  border-radius: 10px;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -ms-border-radius: 10px;
  -o-border-radius: 10px;
}
.sendMassage-input input[type='text'] {
  width: 40px;
  height: 30px;
  text-align: center;
    border:1px solid #dbdbdb;
}


.mapOnSearch {
  position: absolute;
  top: 5px;
  left:5px;
  z-index: 10;
}
.button-group {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: white;
  padding-right: 10px;
  border: 1px solid #ccc;
  border-radius: 22px;
  -webkit-border-radius: 22px;
  -moz-border-radius: 22px;
  -ms-border-radius: 22px;
  -o-border-radius: 22px;
  box-shadow: -1px 3px 8px 2px #ccc;
}

.button-group div {
  height: 30px;
  line-height: 30px;
  font-size: 14px;
  padding: 0 10px;
  cursor:pointer;
}


.button-group button {
  border: 1px solid #d1d5db;
  padding: 8px 16px;
  background-color: white;
  color: #4b5563;
  margin-right: -1px;
  cursor:pointer;
}
.button-group button:first-child {
  background-color: #f3f4f6;
}
.button-group button:last-child {
  margin-right: 0;
}

.search-container {
  width: 200px;
  background: #FFF;
  display: flex;
  align-items: center;
  border: 1px solid #ccc;
  border-radius: 5px;
  padding:5px;
  margin-top:5px;
  border-top-right-radius:25px;
  border-top-left-radius:25px;
  border-bottom-left-radius:25px;
  border-bottom-right-radius:25px;
}
.search-container input {
  border: 1px solid #d1d5db;
  padding: 8px 16px;
  width: 60%;
  
}
.search-container .move-button {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #10b981;
  color: white;
  border-radius: 50%;
  width: 48px;
  height: 48px;
  margin-left: 8px;
}
.mapSearchList {
    display: none;
    width: 360px;
    flex-wrap: wrap;
    justify-content: space-between;
    background: #FFF;
    padding:10px;
    border: 1px solid #ccc;
    border-radius: 5px;
    position: absolute;
    top: 40px;
    font-size:0.8em;
}
.mapSearchList-item {
  width: 100px;
  height: 20px;
  padding: 5px;
  border: 1px solid #f1f1f1;
  border-radius: 4px;
  margin:2px 0;
  text-align:center;
}
.mapSearchList-danjiitem {
  width: 100%;
  height: 20px;
  padding: 5px;
  border-bottom: 1px solid #f1f1f1;
  margin:2px 0;
  text-align:left;
}
.realtor-info {
    display:none;
    padding: 10px;
    background: #f1f1f1;
    justify-content: space-between;
}
.realtor-listbox {
  width: 48%;
  height: 90px;
  display:flex;
  justify-content: space-between;
  flex-wrap: wrap;
    align-content: space-between;
  background: #fff;
  border-right: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
    border-radius: 5px;
    overflow: hidden;
    cursor:pointer;
}
.realtor-infoModal {
  background-color: #fefefe;
  margin: auto;
  margin-top: 120px;
  display: none;
  width: 400px;
  padding: 20px;
  border: 1px solid #888;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
  position: fixed;
    top: 25%;
    left: 55%;
    transform: translate(-50%, -50%);
    z-index: 11;
}
.realtor-infoModal-close {
  position: absolute;
  top: 10px;
  right: 10px;
  cursor: pointer;
}

.info {
  font-size: .9em;
}
.agent-name {
  
  height: 30px;
  line-height: 30px;
  padding: 0 10px;
  min-width: 170px;
  max-width: 210px;
  background: #b34aff;
  color:#FFF;
  margin-bottom:20px;
  text-align: center;
}
.ceo, .tel {
  font-size: .9em;
  text-align: center;
}
.realtorpic {
  width:100px;
  height:90px;
  background-size: contain;
            background-repeat: no-repeat;
            background-position: 50% 50%;
}
/* 상세보기 모달 */
.detailcontainer {
  width: 90%;
  margin: 0 auto;
  padding: 20px;
  height: 85%;
  position:relative;
  overflow-y: scroll;
  scrollbar-width: none;
}


.detailimage-section {
  border: 1px solid #ccc;
  padding: 10px;
  border-radius: 8px;
  background-color: #f9f9f9;
}

.detailimage-section img {
  width: 100%;
  border-radius: 8px;
}

.detailthumbnails {
  display: flex;
  justify-content: space-between;
  margin-top: 10px;
}

.detaildetailthumbnails img {
  width: 48px;
  height: 48px;
  border-radius: 4px;
}

.detaildetails {
  margin-top: 20px;
  
}

.detaildetails h1 {
  font-size: 18px;
  margin-bottom: 10px;
}

.detaildetails p {
  margin: 5px 0;
  font-size: 14px;
}

.detaildetails .detailprice {
  color: #1e90ff;
  font-weight: bold;
  font-size:16px;
}

.detailbuttons {
  display: flex;
  justify-content: space-between;
  margin-top: 10px;
  align-items: center;
}

.detailbuttons button {
  padding: 5px 10px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.detailbuttons .detailinfo {
  background-color: #ddd;
}

.detailbuttons .detailinquire {
    background-color: #8b1eff;
    color: white;
    width: 80px;
    height: 30px;
    font-size: 14px;
    position: fixed;
    top: 180px;
    z-index: 10;
    margin-left: 370px;
    box-shadow: 3px 3px 9px 3px #b5b1b1;
    transition: transform 0.2s ease-in-out;
    -webkit-transition: transform 0.2s ease-in-out;
    -moz-transition: transform 0.2s ease-in-out;
    -ms-transition: transform 0.2s ease-in-out;
    -o-transition: transform 0.2s ease-in-out;
    display: flex;
  justify-content: center;
  align-items: center;
}
.detailinquire:hover {
  transform: scale(1.2);
}

.detailinfo-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 20px;
  font-size: 12px;
}

.detailinfo-table th, .detailinfo-table td {
  border: 1px solid #ccc;
  padding: 8px;
  text-align: left;
}

.detailinfo-table th {
  background-color: #f2f2f2;
}

/* .detailother-info {
  margin-top: 20px;
} */

.detailchart {
  margin-top: 20px;
  padding: 10px;
  background-color: #f9f9f9;
  border-radius: 8px;
}

.detailtransactions {
  width: 100%;
  border-collapse: collapse;
  margin-top: 10px;
  font-size: 12px;
}

.detailtransactions th, .detailtransactions td {
  border: 1px solid #ccc;
  padding: 8px;
  text-align: left;
}

.detailtransactions th {
  background-color: #f2f2f2;
}

/* 중간메뉴 */

.hide { display: none; }
.select-div-container {
    height: 30px;
}
.popupclose, .moneyclose {
  width: 100%;
  height: 40px;
  line-height: 40px;
  background-color: #ccc;
  text-align: center;

}
.select-div { cursor: pointer; }
.select-div-popup { 
  position: absolute;
  background: white;
  border: 1px solid #c5c5c5;
  z-index: 12;
  top: 56px;
  left: 0;
  border-radius: 5px;
  box-shadow: 0px 0px 4px 4px #dddcdc;
}
.select-div-item { padding: 5px; cursor: pointer; }
.select-div-item:hover { background-color: #f0f0f0; }
.close-btn { padding: 5px; text-align: center; cursor: pointer; background-color: #e0e0e0; margin-top: 5px; }
.close-btn:hover { background-color: #d0d0d0; }
.scroll-area {padding:10px;}
.select-div-container {
  position: relative;
    height: 50px;
    border:1px solid #ccc;
    margin-right:20px;
    border-radius: 5px;
}
.select-div {
    height: 30px;
    line-height: 30px;
    /* background-image: url('../images/select_down.png');
    background-repeat: no-repeat;
    background-position: calc(100% - 5px) center; */
    padding:0 10px;
    /* padding-right: 20px; */
    display: flex;
}

.selectedValueData {
  height:20px;
  line-height: 20px;
  color:#000;
  font-weight: bold;
}
.ui-slider-horizontal .ui-slider-handle {
  top: -.4em;
  margin-left: -.6em;
}

.ui-state-default, .ui-widget-content .ui-state-default {
  border: 1px solid #000000;
}

#slider-range, #slider-range1, #slider-range2, #slider-range3,
#area-slider-range, #deji-slider-range, #allarea-slider-range {
    margin:0 auto;
    margin-top:15px;
    width: 170px;
    height: 5px;
    padding-left: 10px;
}
.ui-slider-handle {
    position: absolute;
    top: 50%;
    transform: translateY(-15%); /* Center vertically */
    width: 15px; /* Adjust width if needed */
    height: 15px; /* Adjust height if needed */
    background-color: #7081ff; /* Optional: Change handle color */
    border-radius: 50%; /* Optional: Make handle circular */
    cursor: pointer;
}
.ui-slider-range {
    background: #ff8447; /* Change range color to match handles */
}
#price-ranges, #price-ranges1, #price-ranges2 {
    display:flex;
    flex-wrap: wrap;
    width: 100%;
}
.price-range, .price-range1, .price-range2 {
    display: inline-block;
    padding: 5px 10px;
    color: #333;
    border: 1px solid #f0f0f0;
    margin-left:-1px;
}
.price-range.active {
    background-color: #7081ff;
    color: #fff;
    border: 1px solid #7081ff;
}
.price-range1.active1 {
    background-color: #f07d1e;
    color: #fff;
    border: 1px solid #f07d1e;
}
.price-range2.active2 {
    background-color: #17a92b;
    color: #fff;
    border: 1px solid #17a92b;
}

#slider-values, #slider-values1, #slider-values2, #slider-values3, 
#area-slider-range, #deji-slider-range, #allarea-slider-range {
    margin:0 auto;
    margin: 10px 0;
    width: 100%;
    font-size: 0.8em;
}
#slider-values span {
  margin-right: 10px;
  font-size: 1.2em;
}
#slider-values1 span {
    margin-right: 10px;
    font-size: 1.2em;
}
#slider-values2 span {
  margin-right: 10px;
  font-size: 1.2em;
}
.row {
    margin:10px 0;
    cursor: pointer;
}
.info {
    color:gray;
    font-size: 0.8em;
}
.close {
    cursor: pointer;
    padding: 5px;
    text-align: center;
    /* background-color: #e0e0e0; */
    margin-top: 15px;
    height: 30px;
    line-height: 30px;
    border-top:1px solid #e0e0e0;
    color:#fff;
    font-weight: 900;
}


.checkbox {
    margin-right: 10px;
    display: none;
}
.ebangCheckbox {
    display: flex;
    align-items: center;
    cursor:pointer;
}
.checkmark {
    position: relative;
    height: 15px;
    width: 15px;
    background-color: white;
    border: 1px solid #ccc;
    border-radius: 5px;
    margin-right: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    color: rgb(0, 0, 0);
    transition: border-color 0.2s ease-in-out;
}
.ebangCheckbox input:checked + .checkmark {
    background-color: #2187f3;
    border-color: #2187f3;
}
.ebangCheckbox input:checked + .checkmark:after {
    content: "\2713";
    position: absolute;
    top: 50%;
    left: 50%;
    font-size: 12px;
    transform: translate(-50%, -50%);
    color: #fff;
}
/* 여기까지 중간메뉴 */
/* 중개사 정보 모달 */
/* .realtor-info {
  position: relative;
} */
/* .realtor-infoModal {
  position:absolute;
  top:0;
  left:0;
  display: none;
} */
.mapSearchList-item:hover {
    background: #f3f4f6;
    cursor:pointer;
}
.realtor-infoModal-img img {
    margin:0  auto;
    width:100px;
    border-radius: 50%;
}
.gijun {
  position: relative;
}
/* .show-detail {
  cursor:pointer;
  text-decoration: underline;
  color: blue;
} */
.detail-popup {
  padding:5px;
  background-color: #fff;
  cursor:pointer;
}
.detailother-info {
  font-size: 14px;
  padding: 10px;
  border-radius: 5px;
  border: 1px solid #efefef;
}
.company-info {
  text-align: center;
  font-size: 12px;
  background-color: #e9e9e9;
  padding:10px;
  margin-top:15px;
}

.detailMapContainer {
  width: 450px;
  border: 1px solid #ccc;
  border-radius: 5px;
  overflow: hidden;
}

#showSearchDongName {
  display: none;
  justify-content: space-between;
  margin-top:10px;
  width: 100px;
  height: 20px;
  padding:5px;
  border:3px solid #0093ff;
  background: #FFF;
  color: #000;
  border-radius: 20px;
}
#dongClose {
  cursor:pointer;
}

#mapAddress {
  width: 100%;
  padding: 5px;
  box-sizing: border-box;
}
.tab-container {
  display: flex;
  width:100%;
  height:40px;
}
.tab {
  flex: 1;
  padding: 10px;
  text-align: center;
  cursor: pointer;
  background-color: #e0e0e0;
  transition: background-color 0.3s;
}
.tab.active {
  background-color: #1e90ff;
  color: white;
}
#detailmap, #roadview {
  width: 100%;
  height: 300px;
}

/* 금액범위 그리드 */
.grid-container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  margin-bottom: 15px;
}
.grid-item {
  padding: 3px;
  background-color: #f0f0f0;
  outline: 1px solid #ddd; /* 보더 대신 outline 사용 */
  cursor: pointer;
  text-align: center;
  box-sizing: border-box;
}
.grid-item.selected {
  background-color: #3d8fee;
  color: white;
}
.grid-item.in-range {
  background-color: #96beec;
  color: white;
}
.moneyRange-input {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}
.moneyRange-input input {
  width: 100px;
  padding: 5px;
  margin: 0 10px;
}
/* #reset {
  padding: 10px 20px;
  background-color: #f44336;
  color: white;
  border: none;
  cursor: pointer;
} */
.price-range-selector {
  padding:10px;
}
/* 상세보기 */
table {
  width: 100%;border-collapse: collapse;margin-top: 10px;font-size: 12px;
}
table .label {
  background-color: #ebebeb;
  color:gray;
  height:30px;
}
table tr td {
  vertical-align: middle;
    padding-left: 5px;
    border: 1px solid #ddd;
    font-size: 13px;
}
#realtorDetailTitle {
  font-size:11px;
  color:gray;
  /* margin-top:10px; */
  padding:5px;
}
#realtorDetailTitle1 {
  font-size:14px;
  padding:5px;
}

.listdataWrap {
  height:86vh;
  overflow-y: scroll;
  position:relative;
}
.listdataWrap1 {
  /* overflow-y, height 등은 모두 제거 */
  position: relative;    /* 필요에 따라 유지할 수 있음 */
  /* border: 1px solid red;  디버깅용이 아닌 이상 제거 */
}
.listDataHeader {
  position: sticky;
  top: 0;
  background: white; /* 배경색을 설정하여 스크롤 시에도 헤더가 잘 보이도록 함 */
  z-index: 1;
  display:flex;
  align-items: center;
  justify-content: space-between;
  height:40px;
  font-size:var(--list-font-size);
  text-align:center;
  background: #efefef;
}

/* 클릭한 클러스터 변경 */
.clicked-cluster {
  background: rgb(0, 0, 255) !important;
  color: #fff !important;
}

/* 원룸옵션 그리드 */
.opp {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
    gap: 10px;
  /* grid-template-columns: repeat(auto-fit, minmax(50px, 1fr)); */
  /* gap: 5px; */
  /* justify-items: center;
  align-items: center; */
}
.iconwrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size:12px;
  /* padding-right:5px; */
}
.iconwrap .material-icons-outlined {
  font-size: 40px;
  font-weight: 100;
}

/* svg  */
.svg-icon {
  fill: green; /* 기본 색상 */
  font-weight: bold;
  transition: fill 0.3s ease;
}
.svg-icon:hover {
  fill: green; /* 호버 시 색상 */
}

.youtubeWrap {
  position: relative;
}
.guide {
  cursor:pointer;
}

.youtubeGuide {
  display: none;
  /*처음에는보이지않음*/position: absolute;
  top: -60px;
  left: 300px;
  margin-top: 5px;
  background: #fff;
  padding: 5px;
  border: 1px solid #ddd;
  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
  border-radius: 5px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -ms-border-radius: 5px;
  -o-border-radius: 5px;
}
.costwrap {
  position:relative;
}
.cost {
  border:1px solid #004cff;
  border-radius:5px;
  padding:5px;
  z-index:10;
  position:absolute;
  top:15px;
  background: #FFF;
  -webkit-border-radius:5px;
  -moz-border-radius:5px;
  -ms-border-radius:5px;
  -o-border-radius:5px;
  box-shadow: 0px 4px 7px 0px gray;
}

.oneroom-item {
  cursor:pointer;
}

.info-modal {
  display:none;
  background-color: white;
  width: 400px;
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  position: absolute;
  top:100px;
  z-index: 100;
  left:400px;
}
.info-modal-header {
  background-color: #17a92b;
  color: white;
  padding: 10px;
  border-radius: 10px 10px 0 0;
  font-size: 18px;
}
.info-modal-body {
  padding: 20px;
}
.info-modal-body textarea {
  width: 100%;
  height: 80px;
  padding: 10px;
  margin-top: 10px;
  border-radius: 5px;
  border: 1px solid #ccc;
  font-size: 14px;
}
.info-modal-footer {
  display: flex;
  justify-content: space-between;
  margin-top: 20px;
}
.info-modal-footer button {
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  font-size: 14px;
  cursor: pointer;
}
.confirm-button {
  background-color: #17a92b;
  color: white;
}
.cancel-button {
  background-color: #6c757d;
  color: white;
}
.realtorQ {
    width: 80px;
    height: 30px;
    line-height: 30px;
    font-size: 14px;
    z-index: 10;
    box-shadow: 3px 3px 9px 3px #b5b1b1;
    transition: transform 0.2s ease-in-out;
    -webkit-transition: transform 0.2s ease-in-out;
    -moz-transition: transform 0.2s ease-in-out;
    -ms-transition: transform 0.2s ease-in-out;
    -o-transition: transform 0.2s ease-in-out;
  background-color: #17a92b;
  color:#FFF;
  text-align:center;
  border-radius:3px;
  -webkit-border-radius:3px;
  -moz-border-radius:3px;
  -ms-border-radius:3px;
  -o-border-radius:3px;
  cursor:pointer;
}
.realtorQ:hover {
  transform: scale(1.2);
}

.searchAptNameBox {
  display:flex;
  align-items: center;
  width:240px;
  position: relative;
}
.searchAptNameListBox {
  position: absolute;
  top:57px;
  border: 1px solid #cfcfcf;
  z-index: 2;
  width: 350px;
  height: auto;
  max-height: 400px;
  overflow-y: auto;
  background-color: #FFF;
  padding:5px;
  margin:3px;
}

.svg-toggle-icon {margin-left:5px;}
.svg-toggle-icon img {
  width: 20px;
  height: 20px;
  display: flex;
}

.changeAptName {
  color:gray;
  font-size: 12px;
  cursor: pointer;
}

.registerDate {
  margin-top: 5px;
    color: gray;
    font-size: 12px;
}

input:focus {
        outline: none;
        border: 1px solid #258bff;
        box-shadow: 0px 0px 5px 1px #9ebbff;
    }

    /* 기본 화살표 제거 */ /* 빨간 화살표 */ /* 화살표 공간 */
select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;

  background: white
    url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="%23bbb" viewBox="0 0 24 24"><path d="M7 10l5 5 5-5z"/></svg>')
    no-repeat right 0.75rem center;
  background-size: 1rem;
  padding-right: 2rem;
  border: 1px solid #ccc;
  border-radius: 4px;
  height: 36px;
}

/* upload */
.uploadoverray {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #f3f3f3;
    z-index: 3;
    display: block;
    
}
.flow {
    position: absolute;
    width: 200px;
    height: 500px;
    top:0;
    left: 103%;
    background-color: #fff;
    padding: 15px;
    border-radius:10px;
    box-shadow: 0px 4px 8px 0px gray;
}


.sectionHeight {
  position: relative;
  max-width:880px;
  margin-top:70px;
  background-color: #fff;
  width: 80%;
  margin: 100px auto;
  padding: 20px;
  border-radius:10px;
  box-shadow: 0px 4px 8px 0px gray;
}

.memulUploadHeader {
      text-align:center;
      font-size:18px;
      font-weight:bolder;

    }

    .danjibasicinfo, .memulinfobox, .myinfobox, .imageinfobox {
      display:none;
      height:600px;
    }
    .zeroText, .oneText, .twoText, .threeText {
      color:#b8b8b8;
      padding:10px 0;
      font-size: 13px;
    }
    #prevStep, #nextStep {
      width: 70px;
      height: 40px;
      border: none;
      border-radius: 5px;
      -webkit-border-radius: 5px;
      -moz-border-radius: 5px;
      -ms-border-radius: 5px;
      -o-border-radius: 5px;
      background-color: #007bff;
    }

    #prevStep:hover, #nextStep:hover {
      cursor:pointer;
    }

    #exitbtn:hover {
      cursor:pointer;
    }
    .flowheader {
      font-weight: bold;
      margin-bottom: 20px;
      color: #007bff;
      font-size: x-large;
      text-align: center;
    }