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


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

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

body.map-body{overflow:hidden;}
/* 
.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;
  left: 0;
  top: 0;
  width: 300px;
  height: 100%;
  background: white;
  border-right: 1px solid #ccc;
  overflow-y: auto;
  z-index: 10;
  padding: 10px;
}
#listingPanel.hidden { display: none; }

/* .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;
}
.close-button {
  background: transparent;
  border: none;
  padding: 5px;
  cursor: pointer;
  position: absolute;
  top: 10px;
  right: 10px;
}

/* 지도 위 필터 패널 */
.map-filter-panel {
    position: absolute;
    top: 100px;
    left: 20px;
    z-index: 8;
    background: rgba(255, 255, 255, 0.95);
    padding: 15px;
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.2);
    width: 380px;
    max-height: 90vh;
    overflow: hidden;
    transition: max-height 0.3s ease;
  }
  
  /* 토글 버튼 */
  .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{
    background:white;
    color:#333;
    line-height:1.6em;
  }

  
  .filter-btn img{
    width:1.6em;
  }

  .filter-btn span{
    vertical-align: text-bottom;
    line-height:1.6em;
  }
  
  /* 숨겨진 상태 */
  .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;
    padding: 12px;
    background: white;
    border-bottom: 1px solid #eee;
  }
  
  .search-bar input, .search-bar > span {
    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;
  }
  
  .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.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: #333;
    color: #fff;
    border-color: #333;
  }


  .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: 80px;
      left: 20px;
      width: 320px;
    }
  
    .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;overflow:hidden;}
	
	#listingPanel{
		
		width: 100%;
		box-sizing: border-box;
	}
  }