#map {
    width: 100%;
    height: calc(100dvh - 60px);
    position: relative;
}

.ncp-map-control {
    margin-bottom: 10px !important;
}

.land_marker {
    width: 42px;
    position: relative;
    background: #3380fd;
    color: #fff;
    padding: 14px 10px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: bold;
    text-align: center;
    box-shadow: 0 3px 8px rgba(0,0,0,0.3);
}
.land_marker_arrow {
    position: absolute;
    bottom: -8px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-top: 12px solid #3380fd;
}


.land-info-panel {
    position: absolute;
    top: 84px;
    left: 10px;
    right: 20px;
    width: 380px;
    min-height: calc(100dvh - 160px);
    max-height: calc(100dvh - 160px);
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    padding: 0;
    z-index: 1500;
    font-size: 14px;
    line-height: 1.5;
    box-sizing: border-box;

    display: none; /* ✅ 마지막에 단 한 번만 선언 */
    /* → 나중에 .show 클래스 추가하면 display: flex로 전환 */
    overflow: hidden; /* ❗ 내부 넘침 방지 */


}



.land-info-panel-show {
    display: flex;
    flex-direction: column;
}

/* 스크롤 영역 분리 */
.land-info-scrollable {
    overflow-y: auto;
    padding: 16px;
    flex: 1;
    box-sizing: border-box;
    scrollbar-width: none;       /* Firefox */
    -ms-overflow-style: none;    /* IE 10+ */
}
.land-info-scrollable::-webkit-scrollbar {
    display: none;               /* Chrome, Safari, Opera */
}


/* 접힘 상태 (제목만 보임) */
/*.land-info-panel-collapsed {
    height: 50px;
}*/


/* 거래 경고 문구 */
.w_deals_info_view{
    background: #46464614;
    font-size: 11px;
    padding: 10px;
    margin-top: 10px;
    border-radius: 10px;
}


.fixed-action-buttons {
    display: flex;
    justify-content: space-between;
    padding: 12px 16px;
    background: #fff;
    border-top: 1px solid #eee;
    flex-shrink: 0; /* ✅ 스크롤에 밀리지 않게 고정 */
    gap: 12px;
}

.fixed-action-buttons .btn-buy {
    background-color: #ffaf28;
    color: #333;
    flex: 1;
    padding: 12px 0;
    border: none;
    border-radius: 6px;
    font-weight: bold;
    cursor: pointer;
}

.fixed-action-buttons .btn-sell {
    background-color: #3380fd;
    color: #fff;
    flex: 1;
    padding: 12px 0;
    border: none;
    border-radius: 6px;
    font-weight: bold;
    cursor: pointer;
}

.fixed-action-search-buttons {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 10;
}



/*파노라마 뷰 거리뷰 */
.pano-view {
    position: absolute;
    width: 400px;
    height: 300px;
    top: 10px;
    right: 10px;
    display: none;
}

.panarama_view {
    height: 100%;
    width: 100%;
    display: none;
    position: relative;
    top: 0;
    z-index: 10000;
}

#pano {
    width: 400px;
    height: 300px;
    background-color: #000;

    border-radius: 10px;

}

/* 👇 왼쪽 ↙ 하단 삼각 핸들 */
.resize-handle{
    position:absolute;           /* #pano 기준 */
    left:0;
    bottom:0;
    width:30px;
    height:30px;
    cursor:nesw-resize;          /* ↖↘ 아이콘 */
    z-index:2147483647 !important;
    pointer-events:auto;         /* 반드시 이벤트 받기 */
    background: #fff;               /* 삼각형 면 */
    clip-path: polygon(0 0, 0 100%, 100% 100%);
}
/* ▽ 모서리 안쪽 줄무늬 추가 */
.resize-handle::after {
    content: '';
    position: absolute;
    inset: 4px;                     /* 삼각형 안쪽에 여백 확보 */
    background: repeating-linear-gradient(45deg, #666 0 2px, transparent 2px 5px);
    clip-path: inherit;             /* 부모 삼각형과 동일한 잘라내기 */
    pointer-events: none;           /* 드래그 방해 X */
}

#panoClose {
    position: fixed;
    top: 80px;
    right: 20px;
    width: 35px;
    height: 35px;
    z-index: 10001;
    background: rgba(0, 0, 0, 0.7);
    border: none;
    border-radius: 50%;
    font-size: 20px;
    font-weight: bold;
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
    transition: background 0.2s ease;
    display: none;
}
#panoClose:hover {
    background: rgba(0, 0, 0, 0.9);
}

#panoClose img {
    width: 16px;
    filter: invert(1);
}


.custom-pin{
    position:relative;width:15px;height:15px;border-radius:50%;background:#ff1b1b
}
.custom-pin::before{
    content:"";position:absolute;top:-9px;left:50%;transform:translateX(-50%);
    border-left:6px solid transparent;border-right:6px solid transparent;
    border-bottom:7px solid #ff1b1b
}


/* 주소 텍스트 */
#landAddr {
    display: flex;
    align-items: center; /* ⬅︎ 세로축 가운데 정렬 */
    justify-content: space-between;
}


#landAddr h3 {
    margin: 0;
    font-size: 14px;
    font-weight: 500;
    line-height: 1;
    flex: 1;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}


.close-button {
    height: 16px;
    cursor: pointer;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}


.close-button img {
    height: 100%;
}

.mini-map-wrapper {
    width: 100%;
    padding: 0;
    margin: 0;
}


.mini-map {
    width: 100%;
    height: 200px;
    margin: 20px 0;
    border-radius: 6px;
    border: 1px solid #ccc;
    overflow: hidden;
}

/* 정보 블럭 공통 */
#landBasic,
#landFee,
#landUse,
#landOwner,
#landPlace {
    margin-bottom: 24px;
}

/* 정보 블럭 구조 - 타이틀 위, 내용 아래 */
.info-block {
    margin-bottom: 20px;
    border-top: 1px solid #e0e0e0;
    padding-top: 12px;
}

.info-title {
    font-weight: bold;
    font-size: 15px;
    color: #333;
    margin-bottom: 10px;
}

.info-content {
    font-size: 14px;
    color: #444;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.info-content-row {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    line-height: 1.6;
}

.info-content-row strong {
    flex-shrink: 0;
    color: #333;
}


/* 공시지가 테이블 */
.land-fee-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
    color: #333;
}

.land-fee-table th,
.land-fee-table td {
    padding: 6px 8px;
    border-bottom: 1px solid #ddd;
    text-align: center;
    font-size: 12px;
}

.land-fee-table th {
    background: #f8f8f8;
    font-weight: bold;
    color: #555;
}


.land-fee-table .positive {
    color: red;
}

.land-fee-table .negative {
    color: blue;
}




#chartDeals {
    width: 100%;
    height: auto; /* 또는 필요 시 min-height 설정 */
}




/* 토지이용계획 태그 스타일 */
.land-use-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.land-use-tags span {
    display: inline-block;
    background: #d9d9d9;
    color: #333;
    padding: 4px 5px;
    font-size: 11px;
    border-radius: 4px;
}

.tab-buttons {
    display: flex;
    gap: 8px;
    margin-bottom: 10px;
}


/* 주변시설 */
.tab-button {
    flex: 1;
    font-size: 10px;
    padding: 6px 0;
    cursor: pointer;
    background-color: #f0f0f0;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-weight: 900;
}

.tab-button.active {
    background-color: #3380fd;
    color: white;
}

.nearby-table {
    width: 100%;
    border-collapse: collapse;
}

.nearby-table th,
.nearby-table td {
    border-bottom: 1px solid #ccc;
    padding: 6px 8px;
    font-size: 12px;
    text-align: center;
}

.nearby-table th {
    background-color: #f9f9f9;
}

.nearby-table td.name {
    text-align: left;
}

.nearby-table td.name a {
    color: #3380fd;
    text-decoration: none;
}

.nearby-table td.name a:hover {
    text-decoration: underline;
}

/*주변 거래량*/
.deal-tabs {
    display: flex;
    /*gap: 6px;*/
    margin-bottom: 10px;
}

.deal-tab {
    padding: 5px 10px;
    /*border: 1px solid #ccc;*/
    border-top: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
    border-left: 1px solid #ccc;
    background: #fff;
    cursor: pointer;
    /*border-radius: 4px;*/
    font-size: 11px;
}
.deal-tab:last-child {
    border-right: 1px solid #ccc;
}
.deal-tab.active {
    background-color: #fb278d;
    color: white;
    border-color: #fb278d;
}


/*실거래 내역 탭*/
.deal-use-tabs {
    display: flex;
    gap: 6px;
    margin-bottom: 10px;
}

.deal-use-tab {
    padding: 5px 10px;
    border: 1px solid #ccc;
    background: #fff;
    cursor: pointer;
    border-radius: 4px;
    font-size: 11px;
}

.deal-use-tab.active {
    background-color: #3380fd;
    color: white;
    border-color: #3380fd;
}


/* 토지용도 필터 버튼 영역 */
.deal-type-filter {
    display: flex;
    gap: 0;
    margin: 10px 0;
    flex-wrap: wrap;
}

/* 각 버튼 공통 스타일 */
.deal-type-btn {
    padding: 5px 10px;
    /*border: 1px solid #ddd;*/
    border-top: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
    border-left: 1px solid #ddd;
    background: #f9f9f9;
    color: #333;
    font-size: 11px;
    /*border-radius: 4px;*/
    cursor: pointer;
    transition: all 0.2s ease;
}
.deal-type-btn:last-child {
    border-right: 1px solid #ddd;
}

.deal-type-btn:hover {
    background: #f1f1f1;
}

/* 활성화된 버튼 */
.deal-type-btn.active {
    background: #333;
    color: #fff;
    border-color: #333;
}


/*주변 매물 */

/* 인근 매물 카드 */

/* 인근 매물 블록(overflow 제거) */
#landSellView {
    position: relative;
}
#landSellView .info-block:has(.sell-card-list){
    overflow: visible;      /* 더 이상 자르지 않음 */
}
.sell-card-list{
    display: flex;
    gap: 16px;
    overflow-x: auto;           /* ↔️ 손/마우스로 스크롤 */
    padding-bottom: 8px;        /* 스크롤바 안 보이게 여유 */

    scroll-snap-type: x mandatory; /* 스냅 */
    scroll-behavior: smooth;       /* 부드럽게 이동 */
    -webkit-overflow-scrolling: touch; /* iOS 관성 스크롤 */
}
.sell-card-list::-webkit-scrollbar{display:none;}

/* 화살표 공통 */
.sell-arrow{
    position:absolute; top:50%; transform:translateY(-50%);
    width:32px; height:32px;
    border:none; border-radius:50%;
    background:#fff;           /* 단색 배경 */
    font-size:18px; line-height:32px;   /* 글자 가운데 정렬 */
    text-align:center;
    box-shadow:0 1px 4px rgba(0,0,0,.25);
    cursor:pointer; opacity:.85; transition:opacity .2s;
}
.sell-arrow:hover{opacity:1;}
.sell-arrow.prev{ left:-13px;  }   /* ← 좌측 위치만 조정 */
.sell-arrow.next{ right:-13px; }   /* → 우측 */


.sell-card{
    flex: 0 0 210px;          /* 가로 고정폭(원하는 값) */
    scroll-snap-align: start; /* 왼쪽에 딱 붙도록 */
    background:#fff;
    border:1px solid #e5e5e5;
    border-radius:8px;
    overflow:hidden;
    box-shadow:0 2px 4px rgba(0,0,0,.05);
    cursor:pointer;
}
.sell-card .thumb{
    width:100%; height:90px;
    background-size:cover;
    background-position:center;
}
.sell-card .labels{display:flex;gap:4px;padding:8px 8px}
.sell-card .label{
    font-size:11px; padding:2px 4px;
    border-radius:4px; background:#ff3060; color:#fff;
}
.sell-card .addr{font-size:12px;font-weight:500;padding:0 8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.sell-card .title{font-size:13px;font-weight:600;padding:0 8px}
.sell-card .price{font-size:12px;font-weight:400;padding:4px 8px 8px}


/* 인근 매물 없음 메시지 */
.no-sells{
    min-height:120px;                   /* ↕️ 여유 공간 */
    display:flex;align-items:center;justify-content:center;
    background:#fafafa;
    border:1px solid #e5e5e5;border-radius:8px;
    margin:16px 0;
}
.no-sell-msg{font-size:13px;color:#777;}


/* 주변 공시 */
.gosi-list           { margin:0; padding:0; list-style:none; }

/* 항목 */
.gosi-item           { display:flex; align-items:center; font-size:13px;
    padding:6px 0; border-bottom:1px solid #f0f0f0; }
.gosi-item.hidden    { display:none; }

/* 컨테이너 */
.gosi-item > a        { display:block;     width: 100%; padding:6px 0; border-bottom:1px solid #f0f0f0; }

/* 1행 : 기관·날짜 */
.gosi-meta            { display:flex; justify-content:space-between;
    font-size:12px; color:#666; line-height:1.2; }
.gosi-author          { max-width:60%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.gosi-date            { flex:none; color:#888; font-family:monospace; }

/* 2행 : 제목 */
.gosi-title-row       { display:flex; align-items:center; gap:4px;     padding-top: 10px; }
.gosi-title           { flex:1; min-width:0; font-size:13px; color:#222;
    overflow:hidden; text-overflow:ellipsis; }

/* 뱃지 */
.badge                { flex:none; color:#ff5722; font-size:10px; font-weight:600; }

/* 숨김 처리 */
.gosi-item.hidden     { display:none; }


/* 더보기 버튼 */
.show-more-btn       { display:block; width:100%; padding:8px 0; margin-top:6px;
    border:1px solid #ccc; border-radius:4px;
    background:#fafafa; font-size:13px; cursor:pointer; }

/* 공시 없음 */
.gosi-empty          { padding:10px 0; color:#999; font-size:13px; text-align:center; }



/*더보기 버튼*/
.more-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 1px 16px;
    margin: 0px auto 0;
    font-size: 12px;
    color: #3380fd;
    background-color: transparent;
    border: none;
    cursor: pointer;
    font-family: inherit;


    color: rgb(0, 0, 0);
    padding: 7px 0px;
    border: 1px solid #ccc;
    width: 100%;
    margin: 7px 0px 0px;
    border-radius: 4px;
}

.more-btn:hover {
    background-color: #f8f8f8;
}

.more-btn .arrow {
    font-size: 12px;
    transform: translateY(1px);
}

/*토지이음 버튼*/
.toji-buttons {
    display: flex;
    gap: 10px;
}

.toji-btn.full {
    max-width: 180px;
    flex: 1;
    padding: 10px 20px 10px 0;
    border: 1px solid #ccc;
    background: white;
    border-radius: 4px;
    text-decoration: none;
    font-size: 14px;
    color: #333;
    transition: background 0.2s ease;

    display: flex;
    align-items: center;
    position: relative;

    text-align: right;
    justify-content: end;
}

.toji-btn.full:hover {
    background: #f0f0f0;
}

.toji-btn.full img {
    width: 17px;
    position: absolute;
    top: 50%;
    left: 10px;
    transform: translateY(-50%);
}


#mapTypeSelector {
    position: absolute;
    top: 10px;
    right: 10px;
    display: flex;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
    z-index: 1000;
    gap: 6px; /* ✅ 버튼 간격 추가 */
}
.mapTypeButton {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 70px; /* ✅ 버튼 가로 크기 줄임 */
    cursor: pointer;
    background: white;
    border-radius: 6px;
    border: 1px solid transparent;
    transition: background 0.3s, border 0.3s;
    overflow: hidden;
}
.mapTypeButton img {
    width: 100%;
    height: 40px; /* ✅ 썸네일 높이 줄임 */
    object-fit: cover;
}
.mapTypeButton span {
    margin: 4px 0;
    font-size: 12px;
    color: #333;
}
.mapTypeButton.active {
    border: 2px solid #3380fd;
    background: #f0f8ff;
}

/*좌측 배열 버튼*/
#mapButtonGroup {
    position: absolute;
    top: 120px; /* 지도 우측 상단 기준 위치 */
    right: 10px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    z-index: 1000;
}

.map-toggle-button {
    width: 40px;
    height: 40px;
    background-color: white;
    border: 1px solid #ccc;
    border-radius: 10px;
    font-size: 10px;
    cursor: pointer;
}

.map_plus_btn, .map_minus_btn {
    font-size: 25px;
    font-weight: 100;
}

.cadastral_btn.active {
    border: 1px solid #66ff00;
    font-weight: bold;
    color: #66ff00;
}

.deals_btn.active {
    border: 1px solid #ff0026;
    font-weight: bold;
    color: #ff0026;
}



.street_btn.active {
    border: 1px solid #66ff00;
    font-weight: bold;
    color: #66ff00;
}

.area_btn.active {
    border: 1px solid #3380fd;
    font-weight: bold;
    color: #3380fd;
}

.distance_btn.active {
    border: 1px solid #fb278d;
    font-weight: bold;
    color: #fb278d;
}

.radius_btn.active {
    border: 1px solid #ff0026;
    font-weight: bold;
    color: #ff0026;
}


/**
    검색 패널
 */
.search-panel {
    position: absolute;
    top: 10px;
    left: 10px;
    width: 380px;
    height: auto;
    max-height: calc(100dvh - 40px); /* 화면 기준 최대 높이 제한 */
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    z-index: 2000;
    padding: 12px;
    box-sizing: border-box;
    overflow: hidden; /* 내부 dropdown 튀는 것 방지 */
    display: flex;
    flex-direction: column;
}


.search-input-box {
    display: flex;
    align-items: center;
    border: 1px solid #3380fd;
    border-radius: 8px;
    padding: 8px 12px;
    background: #fff;
}

.search-input-box input {
    border: none;
    outline: none;
    width: 100%;
    font-size: 14px;
    margin-left: 8px;
}

#toggleDropdownBtn {
    margin-left: 8px;
    color: #3380fd;
}


.search-dropdown {
    display: none;
    overflow-y: auto;
    height: calc(100dvh - 155px);
    margin: 12px -12px 0;
    background: #eee;
    scrollbar-width: none;          /* Firefox */
    -ms-overflow-style: none;       /* IE/Edge */
    padding-bottom: 68px;
}

.search-dropdown::-webkit-scrollbar {
    display: none;                  /* Chrome, Safari, Opera */
}



.search-icon {
    font-size: 16px;
}




/* 체크 박스 선택 검색 박스 */
.search-filter-section {
    margin-top: 12px;
    padding: 12px;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.3);
}

.filter-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: bold;
    font-size: 14px;
    margin-bottom: 10px;
}

.select-all input {
    margin-right: 4px;
}


/* 전체선택 체크박스 스타일 */
.custom-checkbox {
    display: inline-flex;
    font-size: 12px;
    align-items: center;
    gap: 6px;
    color: #888;
    cursor: pointer;
}

.custom-checkbox input[type="checkbox"] {
    display: none;
}

.custom-checkbox .box {
    width: 16px;
    height: 16px;
    border: 1px solid #bbb;
    border-radius: 6px;
    background: #fff;
    box-sizing: border-box;
    position: relative;
    flex-shrink: 0;
}

.custom-checkbox .label-text {
    padding-top: 1px;
}
.label-import {
    color: #F20000;
}

.custom-checkbox input[type="checkbox"]:checked + .box::after {
    content: "";
    position: absolute;
    top: 1px;
    left: 4px;
    width: 3px;
    height: 7px;
    border: solid #3380fd;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}
.filter-title {
    font-weight: bold;
    font-size: 14px;
    color: #222;
}
.filter-row {
    margin-bottom: 20px;
}
.filter-sub-title {
    font-size: 12px;
    margin-bottom: 10px;
}
.filter-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;

}
.filter-grid input[type="checkbox"] {
    display: none;
}

.filter-grid label {
    display: inline-block;
    cursor: pointer;
}

.filter-grid label span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 9px 0;
    width: 100%;                 /* ✅ 고정 너비 */
    border: 1px solid #ccc;      /* 기본 테두리: 회색 */
    border-radius: 8px;
    font-size: clamp(11px, 2vw, 11px);
    color: #888;                 /* 기본 글자색: 회색 */
    background: #fff;
    transition: all 0.2s ease;
    box-sizing: border-box;
}

/* ✅ 선택된 경우 */
.filter-grid input[type="checkbox"]:checked + span {
    border-color: #3380fd;
    color: #3380fd;
}


/* 슬라이더 검색 */
.search-filter-section {
    padding: 12px;
    border-radius: 0;
    margin-top: 16px;
    background: #fff;
    box-shadow: 0 1px 4px rgba(0,0,0,0.1);
}

.filter-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: bold;
    font-size: 14px;
    margin-bottom: 10px;
}




.w-range-display {
    font-size: 12px;
}

.noUi-target.w-range-slider {
    margin: 0 12px;
}
.w-range-slider .noUi-connect {
    background: #f5a020; /* 노란색 */
}
.w-range-slider .noUi-origin {
    top: 8.4px !important;
}
.w-range-slider .noUi-handle {
    border-radius: 50% !important;  /* ✅ 완전한 원 */
    background: #fff !important;
    border: 2px solid #f5a020 !important;      /* 노란색 테두리 */
    width: 20px !important;
    height: 20px !important;
    box-shadow: none !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    margin: 0 !important;
    right: -10px !important;
}

.w-range-slider .noUi-handle:after, .w-range-slider .noUi-handle:before {
    display: none;
}

.price-preset-group {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 12px;  /* 세로 10px, 가로 12px 간격 */
    margin-bottom: 10px;
}

/* 버튼 스타일 */
.price-btn {
    padding: 6px 16px;
    font-size: 11px;
    border: 1px solid #3380fd;
    color: #3380fd;
    background-color: #fff;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    line-height: 1.4;

}

.price-btn:hover {
    background-color: #eaf3ff;
}

/* 선택된 상태 */
.price-btn.active {
    background-color: #3380fd;
    color: #fff;
}





.price-direct-input button {
    padding: 6px 14px;
    font-size: 13px;
    background-color: #3380fd;
    color: white;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.price-direct-input button:hover {
    background-color: #005ecb;
}



.price-direct-input {
    display: none;
    align-items: center;
    gap: 12px;
    background-color: #f3f5f7;
    padding: 12px;
    border-radius: 8px;
    justify-content: space-between;
}

.input-unit-group {
    position: relative;
    display: inline-flex;
    align-items: center;
    width: calc(50% - 20px);
}

.input-unit-group input[type="number"] {
    width: 100%;
    padding: 8px 30px 8px 10px;
    border: 1px solid #d1d1d1;
    border-radius: 6px;
    font-size: 14px;
    background-color: #fff;
}

.unit-label {
    position: absolute;
    right: 10px;
    color: #999;
    font-size: 13px;
    pointer-events: none;
}

.range-dash {
    font-size: 14px;
    color: #444;
}




/*구해요, 팔아요 리스트 영*/
.sals-info-panel {
    position: absolute;
    top: 84px;
    left: 10px;
    right: 20px;
    width: 380px;
    min-height: calc(100dvh - 160px);
    max-height: calc(100dvh - 160px);
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    padding: 0;
    z-index: 1500;
    font-size: 14px;
    line-height: 1.5;
    box-sizing: border-box;

    display: none; /* ✅ 마지막에 단 한 번만 선언 */
    /* → 나중에 .show 클래스 추가하면 display: flex로 전환 */
    overflow: hidden; /* ❗ 내부 넘침 방지 */


}



.sals-info-panel-show {
    display: flex;
    flex-direction: column;
}

/* 스크롤 영역 분리 */
.sals-info-scrollable {
    overflow-y: auto;
    padding: 16px;
    flex: 1;
    box-sizing: border-box;
    scrollbar-width: none;       /* Firefox */
    -ms-overflow-style: none;    /* IE 10+ */
}
.sals-info-scrollable::-webkit-scrollbar {
    display: none;               /* Chrome, Safari, Opera */
}


@media screen and (max-width: 1032px) {
    .deal-use-tab,
    .deal-tab {
        flex: 1;
    }

    .deal-type-btn {
        flex: 1;
    }
}