@charset "utf-8";
@import "initialize.css";


.logo a{text-decoration:none;color:#333;}

body { font-family: sans-serif; margin: 0; }

/* 지도 페이지는 화면 높이를 헤더·지도·푸터가 정확히 나눠 갖게 한다.
   예전에는 지도 높이를 calc(100vh - 140px)처럼 어림잡아, 남는 자리보다 푸터가 커지면
   사업자 정보 글자가 화면 밖으로 밀려 잘려 보였다. 지도를 flex로 남는 만큼만 차지하게 하면
   푸터 높이가 얼마든 항상 끝까지 보인다. */
body.map-body{
  overflow:hidden;
  display:flex;
  flex-direction:column;
  height:100vh;
}
body.map-body > header,
body.map-body > footer{ flex:0 0 auto; }
body.map-body .map-wrapper{ flex:1 1 auto; min-height:0; height:auto; }

/* 지도 페이지는 밸류맵처럼 지도가 화면을 꽉 채운다. 사업자 정보는 다른 모든 페이지의
   푸터에 그대로 있으므로, 지도를 쓰는 동안만 접어 둔다. */
body.map-body > footer{ display:none; }
/* 
.nav-bar {
    display: flex;
    justify-content: space-between;
    padding: 16px;
    background: white;
    border-bottom: 1px solid #ddd;
  }
  
  .category-nav li {
    margin: 0 8px;
    color: #333;
    list-style:none;
    display:inline;
    font-weight: 500;
  }

  .category-nav li a{
    color: #333;
    text-decoration: none;
  }


    .dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    margin-left:0;
    padding-left:0;
    background: white;
    min-width: 150px;
    border: 1px solid #ddd;
    box-shadow: 0 2px 6px rgba(38, 35, 35, 0.1);
    display: none;
    z-index: 999;
  }
  
  .dropdown-menu li {
    display: block;
    margin: 0;
  }
  
  .dropdown-menu li a {
    padding: 10px 15px;
    display: block;
    color: #333;
    white-space: nowrap;
  }
  
  .dropdown-menu li a:hover {
    background-color: #f0f0f0;
  }

  .dropdown{
    position:relative;
  }

  .dropdown:hover .dropdown-menu {
    display: block;
  } */

/* 기본 네비바 */
.nav-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px;
    background: white;
    border-bottom: 1px solid #ddd;
    position: relative;
    z-index: 1000;
  }
  
  .logo {
    font-size: 2em;
  }
  
  .menu-toggle {
    display: none;
    font-size: 2em;
    background: none;
    border: none;
    cursor: pointer;
  }
  
  /* 카테고리 네비 */
  .category-nav {
    display: flex;
    gap: 16px;
    list-style: none;
    padding: 0;
    margin: 0;
  }
  
  .category-nav li {
    position: relative;
  }
  
  .category-nav li a {
    color: #333;
    text-decoration: none;
    font-weight: 500;
    padding: 8px 12px;
    display: inline-block;
  }
  
  /* 드롭다운 메뉴 */
  .dropdown-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    list-style:none;
    padding-left:0;
    background: white;
    min-width: 150px;
    border: 1px solid #ddd;
    box-shadow: 0 2px 6px rgba(0,0,0,0.1);
    z-index: 999;
  }
  
  
  .dropdown:hover .dropdown-menu {
    display: block;
  }
  
  .dropdown-menu li a {
    display: block;
    padding: 10px 15px;
    color: #333;
    white-space: nowrap;
  }
  
  .dropdown-menu li a:hover {
    background-color: #f0f0f0;
  }

  .close-btn {
    display:none;
  }
  
  /* 모바일: 햄버거 및 오프캔버스 */
  @media (max-width: 768px) {
    .menu-toggle {
      display: block;
    }
  
    .offcanvas-menu {
      position: fixed;
      top: 0;
      left: -300px;
      width: 250px;
      height: 100%;
      background: white;
      overflow-y: auto;
      transition: left 0.3s ease;
      padding: 20px;
      z-index: 9999;
      border-right: 1px solid #ccc;
    }
  
    .offcanvas-menu.active {
      left: 0;
    }
  
    .close-btn {
    display:block;
      background: none;
      border: none;
      font-size: 2em;
      float: right;
      cursor: pointer;
      position:relative;
      z-index:3;
    }
  
    .category-nav {
      display: block;
    }
  
    .category-nav li {
      margin-bottom: 10px;
    }
  
    .dropdown-menu {
      position: static;
      border: none;
      box-shadow: none;
    }
  
    .dropdown:hover .dropdown-menu {
      display: none;
    }
	
    .dropdown-menu.on{
		display:block !important;
	}
	
  
    .dropdown > a::after {
      content: ' ▼';
    }
	
    .dropdown.on > a::after {
      content: ' ▲';
    }
  
    /*.dropdown > a:active + .dropdown-menu,
    .dropdown > a:focus + .dropdown-menu {
      display: block;
    }*/
  }


.main-nav { background: #333; color: white; padding: 10px 0; }
.main-nav .container { display: flex; justify-content: space-between; align-items: center; }
.main-nav .menu { list-style: none; display: flex; gap: 20px; }
.main-nav .menu li a { color: white; text-decoration: none; }

.page-title{
	margin-bottom:2em;
}


.search-section { padding: 0px; background: #f9f9f9; 
    /* border-bottom: 1px solid #ddd;  */
}

.filter-group { margin-bottom: 15px; }
.map-wrapper { position: relative; height: 600px; }
#map { width: 100%; height: 100%; }
/* 마커 클릭 시 뜨는 사례 목록 패널 - 좌측 필터와 겹치지 않게 우측에 넓게 */
#listingPanel {
  position: absolute;
  right: 0;
  top: 0;
  width: 420px;
  height: 100%;
  background: white;
  border-left: 1px solid #ccc;
  overflow-y: auto;
  z-index: 10;
  padding: 10px;
}
#listingPanel.hidden { display: none; }
/* 우측 상단 닫기(X) 버튼과 첫 항목 제목이 겹치지 않게 */
#listing-content { padding-top: 24px; }

/* .listing-item { border-bottom: 1px solid #eee; padding: 10px 0; } */

.listing-item {
    display: flex;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid #eee;
  }
  
 .listing-item a{
    display: flex;
    gap: 12px;
	text-decoration:none;
 }
	 
  
  .listing-thumbnail {
    flex: 0 0 100px;
    height: 80px;
    overflow: hidden;
    border-radius: 6px;
  }
  
  .listing-thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  
  .listing-info {
    flex: 1;
  }
  
  .listing-type {
    font-size: 12px;
    color: #888;
    margin-bottom: 4px;
  }
  
  .listing-title {
    font-size: 16px;
    font-weight: bold;
    color: #111;
    margin: 2px 0;
  }
  
  .listing-sub {
    font-size: 13px;
    color: #555;
    margin-bottom: 2px;
  }
  
  .listing-address {
    font-size: 13px;
    color: #777;
  }
  
  .listing-desc {
    font-size: 12px;
    color: #999;
    margin-top: 4px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  
  .badge {
    display: inline-block;
    background: rgb(22, 51, 69);
    color: #fff;
    font-size: 10px;
    font-weight: bold;
    padding: 2px 6px;
    border-radius: 4px;
    margin-right: 4px;
  }


.custom-marker {
  background-color: rgba(0, 123, 255, 0.7);
  color: white;
  border-radius: 50%;
  padding: 10px;
  min-width: 30px;
  min-height: 30px;
  display: flex;

  justify-content: center;
  align-items: center;
  font-weight: bold;
  border: 2px solid white;
  box-shadow: 0 2px 6px rgba(0,0,0,0.3);
  text-align: center;
  font-size: 14px;
}

/* 매물 1건이 단독으로 찍힐 때: 밸류맵처럼 가격/계약월을 두 줄로 보여주는 알약 모양 마커 */
.custom-marker--price {
  border-radius: 8px;
  flex-direction: column;
  padding: 5px 9px;
  min-width: 46px;
  min-height: 0;
  line-height: 1.2;
  gap: 1px;
}
.custom-marker--price .marker-price {
  font-size: 13px;
  font-weight: 800;
}
.custom-marker--price .marker-date {
  font-size: 10px;
  font-weight: 600;
  opacity: .85;
}

/* 축소 상태에서 쓰는 구/동 집계 마커. 지역명(작게) 위, 평당가(크게) 아래 순서라
   지도를 훑을 때 "어디가 얼마"가 한눈에 읽힌다. */
.custom-marker--region {
  padding: 5px 10px;
  min-width: 62px;
  cursor: pointer;
}
.custom-marker--region .marker-region {
  font-size: 10px;
  font-weight: 600;
  opacity: .8;
  letter-spacing: -0.2px;
}
.custom-marker--region .marker-price {
  font-size: 12px;
  white-space: nowrap;
}

/* 지도 우측 패널에서 이미 본 글: 제목을 죽이고 "읽음" 표시를 붙인다 */
.listing-item.is-visited .listing-title { color: #8A97A0; }
.listing-item.is-visited .listing-thumbnail img { opacity: .7; }
.listing-item.is-visited .listing-title::after {
  content: "읽음";
  display: inline-block;
  margin-left: 6px;
  padding: 0 6px;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.6;
  color: #8A97A0;
  border: 1px solid #D3D8DC;
  border-radius: 999px;
  vertical-align: middle;
}

/* 지역 단위에서는 총액/토지 선택이 의미가 없어 잠근다.
   pointer-events는 버튼에만 건다 - 컨테이너에 걸면 hover 자체가 막혀 잠금 사유 툴팁이 뜨지 않는다. */
.map-value-toggle.is-locked {
  opacity: .45;
  cursor: not-allowed;
}
.map-value-toggle.is-locked .map-value-toggle__btn {
  pointer-events: none;
}

/* 말풍선(가격/개수 배지) + 아래로 뾰족한 꼬리표를 함께 감싸는 래퍼.
   AdvancedMarkerElement는 content 요소의 하단 중앙을 좌표에 맞추므로,
   꼬리표 끝을 래퍼의 맨 아래에 두면 그 지점이 곧 실제 위치가 된다. */
.custom-marker-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  /* 마커를 붙잡고 지도를 끌 때 가격 글자가 선택(긁힘)되지 않게 한다.
     touch-action:none이라야 모바일에서도 우리가 드래그를 지도 이동으로 넘길 수 있다. */
  user-select: none;
  -webkit-user-select: none;
  touch-action: none;
}
.custom-marker-pointer {
  width: 0;
  height: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 7px solid rgb(22, 51, 69);
  margin-top: -1px;
}

/* 매매가/토지평단가 표시 전환 토글, 전체/사례분석만 콘텐츠 토글, 지적편집도 레이어 토글
   - 필터 바 안에 나란히 배치. 레이어 토글은 클래스를 따로 두어야 한다:
     .map-content-toggle__btn을 물려 쓰면 전체/사례분석만 핸들러가 같이 걸려 서로 상태를 덮어쓴다. */
.map-value-toggle,
.map-layer-toggle,
.map-content-toggle {
  display: flex;
  flex: 0 0 auto;
  border: 1px solid #E4E7EA;
  border-radius: 8px;
  overflow: hidden;
}
.map-value-toggle__btn,
.map-layer-toggle__btn,
.map-content-toggle__btn {
  border: none;
  background: #fff;
  color: #4A5560;
  font-size: 13px;
  font-weight: 700;
  padding: 10px 16px;
  cursor: pointer;
  white-space: nowrap;
}
.map-value-toggle__btn.is-active,
.map-layer-toggle__btn.is-active,
.map-content-toggle__btn.is-active {
  background: rgb(22, 51, 69);
  color: #fff;
}
/* 지도 위 우측 상단 도구 모음 - 카카오 기본 컨트롤(지도/스카이뷰) 왼쪽에 가로로 나란히.
   폭을 고정하지 않고 flex로 붙여 두면 버튼이 늘거나 줄어도 자리가 어긋나지 않는다. */
.map-float-tools {
  position: absolute;
  top: 10px;
  /* 카카오 기본 지도/스카이뷰 컨트롤(우측 끝 약 113px)을 피해 그 왼쪽에 둔다 */
  right: 130px;
  z-index: 5;
  display: flex;
  gap: 6px;
}
/* 강제 확대 중에는 카카오 컨트롤이 숨겨지므로 우측 끝까지 당겨 쓴다 */
body.is-extra-zoom .map-float-tools { right: 10px; }
/* 지적편집도 범례 - 지도 좌측 하단. 지적편집도를 켰을 때만 보인다. */
.map-legend {
  position: absolute;
  right: 12px;
  bottom: 16px;      /* 우측은 카카오 축척바·로고와 겹치지 않는다 */
  z-index: 6;
  width: 168px;
  background: rgba(255, 255, 255, .96);
  border: 1px solid #D3D8DC;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(30, 42, 51, .15);
  font-size: 12px;
  color: #1E2A33;
  overflow: hidden;
}
.map-legend[hidden] { display: none; }
.map-legend__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 7px 8px 7px 10px;
  background: #1C3F5E;
  color: #fff;
  font-weight: 700;
  font-size: 12px;
}
.map-legend__fold {
  width: 20px; height: 20px;
  border: none; border-radius: 4px;
  background: rgba(255,255,255,.18);
  color: #fff; font-size: 14px; line-height: 1; cursor: pointer;
}
.map-legend__body { padding: 8px 10px 10px; }
.map-legend__body[hidden] { display: none; }
.map-legend__group {
  margin: 6px 0 4px;
  font-weight: 700;
  font-size: 11.5px;
  color: #5B6B75;
}
.map-legend__group:first-child { margin-top: 0; }
.map-legend__group span { font-weight: 500; color: #8A97A0; }
.map-legend ul { list-style: none; margin: 0; padding: 0; }
.map-legend li {
  display: flex;
  align-items: center;
  gap: 6px;
  line-height: 1.9;
  white-space: nowrap;
}
.map-legend li i {
  flex: 0 0 auto;
  width: 14px; height: 14px;
  border: 1px solid rgba(0,0,0,.18);
  border-radius: 3px;
}
.map-legend__note {
  margin: 8px 0 0;
  padding-top: 7px;
  border-top: 1px solid #E4E7EA;
  font-size: 11px;
  line-height: 1.5;
  color: #8A97A0;
  white-space: normal;
}
/* 모바일에서는 지도를 덜 가리게 좁힌다 */
@media (max-width: 767px) {
  .map-legend { width: 146px; font-size: 11px; bottom: 12px; right: 8px; }
}

/* 자체 확대/축소 버튼 - 도구 모음 바로 아래 */
.map-zoom-control {
  position: absolute;
  top: 52px;
  right: 10px;
  z-index: 5;
  display: flex;
  flex-direction: column;
  background: #fff;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .2);
}
.map-zoom-control[hidden] { display: none; }
.map-zoom-control button {
  width: 34px;
  height: 34px;
  border: none;
  background: #fff;
  color: #1C3F5E;
  font-size: 18px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
}
.map-zoom-control button + button { border-top: 1px solid #E4E7EA; }
.map-zoom-control button:hover { background: #EAF0F5; }
.map-float-tools .map-layer-toggle {
  background: #fff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .2);
}
/* .map-layer-toggle의 display:flex가 hidden 속성(=display:none)을 이겨 버리므로 다시 눌러 준다.
   이게 없으면 "더 확대"가 최대 확대가 아닐 때도 계속 보인다. */
.map-float-tools .map-layer-toggle[hidden] { display: none; }
.map-float-tools .map-layer-toggle__btn { padding: 7px 12px; }

/* 강제 확대 중에는 지도 전체가 2배로 늘어난다. 마커까지 2배가 되면 화면을 덮으므로
   꼬리표 끝(= 실제 좌표)을 기준으로 되돌려 원래 크기로 보이게 한다. */
body.is-extra-zoom .custom-marker-wrap {
  transform: scale(0.5);
  transform-origin: bottom center;
}

/* 지도 컨트롤·축척바·카카오 로고도 같이 2배가 되어버린다. 이 층들만 따로
   "폭 200% + 0.5배 축소"로 되돌리면 크기는 원래대로, 붙는 위치(모서리)는 그대로 유지된다.
   (#map의 첫 번째 자식은 타일·마커 층이라 건드리면 안 된다) */
/* 강제 확대 중에는 브라우저 기본 제스처(스크롤·핀치)가 우리 드래그를 가로채지 않게 한다 */
body.is-extra-zoom .map-wrapper { touch-action: none; }

body.is-extra-zoom #map > div:nth-child(n+2) {
  width: 200%;
  height: 200%;
  transform: scale(0.5);
  transform-origin: top left;
}
.close-button {
  background: transparent;
  border: none;
  padding: 5px;
  cursor: pointer;
  position: absolute;
  top: 10px;
  right: 10px;
}

/* 지도 위 필터 패널 - 실제 화면 위치·너비는 부모 .search-section이 잡는다(아래 미디어쿼리) */
.map-filter-panel {
    position: static;
    z-index: 8;
    background: rgba(255, 255, 255, 0.95);
    padding: 10px 14px;
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.2);
    width: auto;
    max-height: 90vh;
    overflow: visible;
  }

  /* 총액/토지 토글, 전체/사례분석만 토글, 검색창, 필터 버튼을 한 줄로 길게 배치 */
  .map-top-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
  }
  
  /* 토글 버튼 */
  .map-filter-toggle {
    position: absolute;
    top: 20px;
    left: 20px;
    z-index: 21;
    background: #007bff;
    color: white;
    border: none;
    padding: 8px 12px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 14px;
    box-shadow: 0 1px 5px rgba(0,0,0,0.3);
  }

  .filter-btn{
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 5px;
    background: #fff;
    color: #333;
    border: 1px solid #ccc;
    border-radius: 8px;
    padding: 10px 12px;
    font-size: 13px;
    line-height: 1;
    cursor: pointer;
    white-space: nowrap;
  }

  .filter-btn img{
    width: 16px;
    height: 16px;
    display: block;
  }

  .filter-btn span{
    display: block;
    line-height: 1;
  }
  
  /* 숨겨진 상태 */
  .map-filter-panel.collapsed {
    max-height: 0;
    padding: 0;
    overflow: hidden;
    transition: max-height 0.3s ease, padding 0.3s ease;
  }

  .noUi-connect{background:rgb(255, 105, 5) !important;}
  .noUi-handle{width:34px !important;height:34px !important;border-radius:50% !important; box-shadow:none !important;}
  .noUi-handle:after, .noUi-handle:before{height:20px !important;}


  .search-bar {
    display: flex;
    flex: 1 1 200px;
    min-width: 160px;
    padding: 0;
    background: transparent;
    border-bottom: none;
  }

  .search-bar input {
    flex: 1;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 8px 0 0 8px;
    font-size:0.9em;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
  }

  #condition_summary {
    flex: 0 1 auto;
    font-size: 0.85em;
    color: var(--ink-soft, #8A97A0);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  
  .search-btn {
    padding: 10px 16px;
    background: rgb(22, 51, 69);
    border: none;
    color: white;
    border-radius: 0 8px 8px 0;
    cursor: pointer;
  }
  

  
.map-filter-detail-panel {
    padding-top: 16px;
}

/* 숨겨진 상태 */
.map-filter-detail-panel.collapsed {
    max-height: 0;
    padding: 0;
    overflow: hidden;
    transition: max-height 0.3s ease, padding 0.3s ease;
  }



  /* 기본 설정 */
    .filter-group {
    margin-bottom: 20px;
  }
  
  .filter-title {
    font-weight: bold;
    color: rgb(22, 51, 69);
    display: block;
    margin-bottom: 10px;
  }
  
  .filter-group {
    margin-bottom: 20px;
  }
  
  .filter-title {
    font-weight: bold;
    color: rgb(22, 51, 69);
    margin-bottom: 10px;
    font-size: 16px;
  }
  
  .button-checkbox-group,
  .button-radio-group {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
  }
  
  /* 기본 버튼 스타일 */
  .button-checkbox,
  .button-radio {
    display: inline-block;
    padding: 10px 18px;
    border: 1px solid #ccc;
    border-radius: 4px;
    background: #fff;
    color: #333;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s;
  }
  
  /* 체크되었을 때 스타일 변경 */
  input[type="checkbox"]:checked + .button-checkbox,
  input[type="radio"]:checked + .button-radio {
    background-color: rgb(22, 51, 69);
    color: #fff;
    border-color: rgb(22, 51, 69);
    font-weight: 700;
  }

  .filter-section-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 4px;
  }

  .filter-caption {
    display: block;
    font-weight: 400;
    font-size: 12px;
    color: var(--muted, #8A97A0);
    margin-top: 2px;
  }

  .filter-allcheck {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 13px;
    color: rgb(22, 51, 69);
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
  }

  .filter-allcheck input[type="checkbox"] {
    accent-color: rgb(22, 51, 69);
    width: 15px;
    height: 15px;
    cursor: pointer;
  }

  .filter-preset-row {
    display: flex;
    gap: 8px;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid #eee;
  }

  .filter-preset-btn {
    padding: 8px 14px;
    border: 1px solid #ccc;
    border-radius: 6px;
    background: #fff;
    color: #4A5560;
    font-size: 13px;
    cursor: pointer;
  }
  .filter-preset-btn:hover {
    border-color: rgb(22, 51, 69);
    color: rgb(22, 51, 69);
  }

  .filter-action-row {
    display: flex;
    gap: 8px;
    margin-top: 6px;
    padding-top: 14px;
    border-top: 1px solid #eee;
  }

  .filter-reset-btn,
  .filter-apply-btn {
    flex: 1;
    padding: 12px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
  }

  .filter-reset-btn {
    border: 1px solid #ccc;
    background: #fff;
    color: #4A5560;
    flex: 0 0 100px;
  }

  .filter-apply-btn {
    border: none;
    background: rgb(22, 51, 69);
    color: #fff;
  }

  .noUi-target{
    margin:1.5em 0;
  }

  .container-padding{
    padding:15px;
  }

  footer{
    padding:15px;
  }

  .blog-item {
    /* border: 1px solid #ddd;
    border-radius: 8px; */
    /* padding: 20px; */
    margin-bottom: 30px;
    background: #fff;
    /* box-shadow: 0 2px 4px rgba(0,0,0,0.05); */
  }

  .blog-item h3 {
    color: rgb(22, 51, 69);
    margin-top: 0;
    margin-bottom: 10px;
    font-size: 1.5em;
    /* color: #333; */
  }

  .blog-item .meta {
    font-size: 0.9em;
    color: #999;
    margin-bottom: 15px;
  }
  
  .blog-item .blog-content{
	  margin-top:2em;
  }

  .blog-item .content {
    color: #555;
    line-height: 1.6;
  }

  .blog-item .category_link{
    color: #888;
    text-decoration: underline;
  }

  .date{
    padding-left: 2px;
    color: #888;
  }

  .empty{
    font-size: 1.2em;
    color: #333;
    text-align: center;
  }

  .filters {
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
    flex-wrap: wrap;
  }

  .filters input, .filters select {
    padding: 8px 12px;
    font-size: 1em;
    border: 1px solid #ccc;
    border-radius: 4px;
  }

  .filters button {
    padding: 8px 16px;
    font-size: 1em;
    background: #333;
    color: #fff;
    border: none;
    border-radius: 4px;
    cursor: pointer;
  }

  .filters button:hover {
    background: #555;
  }

  .sell-container {
    max-width: 600px !important;
    margin: 50px auto;
    padding: 30px;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  }

  .sell-container h2 {
    text-align: center;
    margin-bottom: 30px;
    color: #333;
  }

  .sell-form .form-group {
    margin-bottom: 20px;
  }

  .sell-form label {
    display: block;
    margin-bottom: 6px;
    font-weight: 600;
    color: #444;
  }

  .sell-form input[type="text"],
  .sell-form input[type="number"],
  .sell-form textarea {
    width: 100%;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 6px;
    font-size: 14px;
    box-sizing: border-box;
  }

  .sell-form textarea {
    height: 120px;
    resize: vertical;
  }

  .sell-form button {
    display: block;
    width: 100%;
    padding: 12px;
    background: #007bff;
    color: white;
    font-size: 16px;
    border: none;
    border-radius: 6px;
    cursor: pointer;
  }

  .sell-form button:hover {
    background: #0056b3;
  }

  .form-note {
    font-size: 0.9em;
    color: #666;
  }
  
  .btn-group{
	  margin:1em auto;
	  text-align:center;
	  
  }
  
  .btn-type01{color:#333;font-size:1.2em;font-weight:bold;display:inline-block;}
	
	
.container{max-width:1280px;margin-left:auto;margin-right:auto;}
.flex-area{display:flex;gap:15px;justify-content:space-between;}
.flex-area .blog-area{background:#eee; padding:10px; flex:3 2 0;}
.flex-area .blog-area ul{padding:0;margin:0;width:100%;list-style:none;display:flex;justify-content:space-between;gap:10px;}
.flex-area .blog-area ul li{width:49%;}
.flex-area .blog-area ul li a{text-decoration:none;}
.flex-area .blog-area ul li .thumb{width:100%;}
.flex-area .blog-area ul li .thumb img{width:100%;}
.flex-area .blog-area ul li .info{margin-top:6px;font-size:1.1em;}
.flex-area .blog-area ul li .info h3{color:#333;font-size:1em;}
.flex-area .blog-area ul li .info .date{color:#999;display:block;margin-top:3px;font-size:0.8em;}

.flex-area .side-area {flex:1 1 0;font-size:1em;}
.flex-area .side-area .banner-unit{width:100%;}
.flex-area .side-area .banner-unit + .banner-unit{margin-top:0.1em;}
.flex-area .side-area .banner-unit img{width:100%;}

  /* PC: 지도 위에 떠 있는 필터 (좌측 상단 고정, 왼쪽 여백 없이 붙이고 카드형 필터가 들어갈 만큼 넓게) */
  @media (min-width: 768px) {
    .search-section {
      position: absolute;
      top: 94px;
      left: 0;
      width: 374px;
      z-index: 8;
    }

    .map-wrapper {
      position: relative;
      height: calc(100vh - 140px);
    }
  }
  
  @media (max-width: 1024px) {
	
	body{font-size:14px;}
  }
  
	  
  /* 모바일: GNB 밑에 고정된 필터 */
  @media (max-width: 767px) {
	body{font-size:11px;}
	
	.nav-bar{
		padding:5px 10px
	}
	.flex-area{flex-direction:column;}
	.flex-area .blog-area{flex:1;}
	.flex-area .side-area{flex:1;}
	.flex-area .blog-area ul{flex-direction:column;}
	.flex-area .blog-area ul li{width:100%;}
	
    .search-section {
      position: absolute;
      top: 57px; /* GNB 높이에 맞게 조절 */
      left: 0;
      width: 100%;
      border-radius: 0;
      border-bottom: 1px solid #ddd;
      background: white;
      z-index:11;overflow:hidden;
      
    }
    /* .search-bar{padding:0;} */

    .map-wrapper {
      margin-top: 150px; /* 필터 높이 + 여유 공간 */
      height: calc(100vh - 260px);
    }

    .map-filter-panel{position:relative;width:100%;top:0;left:0;box-shadow:none;box-sizing: border-box;max-height: calc(100vh - 57px);overflow-y: auto;-webkit-overflow-scrolling: touch;}
	
	#listingPanel{
		
		width: 100%;
		box-sizing: border-box;
	}
  }