@font-face {
    font-family: 'Pretendard-Regular';
    src: url('https://cdn.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Regular.woff') format('woff');
    font-weight: 400;
    font-style: normal;
}
body		{ font-family: 'Pretendard-Regular', sans-serif }
.normal		{ font-weight: 400 }
.bold		{ font-weight: 700 }
.bolder		{ font-weight: 800 }
.light		{ font-weight: 300 }




/* Body 전체 */
body {
    margin: 0px;
    overflow-x: hidden;
}
.bodyLayer1.marketOppList {
    box-sizing: border-box;

    /* background-color: #f5f5f5; */
    background-color: white;
    display: flex;
    justify-content: center;
    align-items: center;

    overflow-x: hidden;
}
.bodyLayer2.marketOppList {
    background-color: white;
    /* width: 1366px; */
    width: 1280px;
    /* 화면 전체 - 상단 로고영역 - 메뉴 높이 */
    min-height: calc(100vh - 100px - 60px);

    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;

    box-sizing: border-box;
}

/* 준회원이거나 로그인 상태가 아닌 경우 Blur 처리 */
.makeBlur {
    position: relative;
    /* filter: blur(3px); */
    filter: blur(10px);
}
.makeBlur::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.1); /* Adjust the color and transparency as needed */
    z-index: 999; /* Ensure the overlay is on top of the content */
}
.makeBlur * {
    will-change: filter;
    /* 컨텐츠 클릭 방지 */
    pointer-events: none;
}



/* 페이지 스크롤바 커스텀 */
body::-webkit-scrollbar {
    width: 10px;
}
body::-webkit-scrollbar-thumb {
    border-radius: 5px;
    background-color: #bebebe;
}
body::-webkit-scrollbar-track {
    border-radius: 5px;
    background-color: #f1f1f1;
}
body::-webkit-scrollbar-corner {        /* Optionally, you can style the scrollbar corner */
    background-color: #888; /* Set the background color of the corner */
}

/* 공통 */
table tr td {
    box-sizing: border-box;
    padding: 0;
    margin: 0;

    border: 0;
    border-spacing: 0;
    border-collapse: collapse;
}





/* Main Title */
#mainTitle.oppListTitle {
    /* width: 100%;
    box-sizing: border-box;
    margin-top: 30px;
    margin-bottom: 25px;
    border: 0px solid;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center; */

    margin-top: 30px;
    margin-bottom: 30px;
    width: 100%;
    display: flex;
    flex-direction: row;
}
#titleBullet {      /* TD */
    /* width: 10px;
    min-height: 37px;
    background-color: #333;
    border-radius: 5px; */

    width: 15px;
    background-color: #333;
    border-radius: 7px;
}
#titleText {
    box-sizing: border-box;
    padding-left: 12px;

    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    font-size: 22px;
    font-weight: 900;
}



#titleTextTD {
    box-sizing: border-box;
    padding-left: 10px;

    font-size: 26px;
    font-weight: 900;
}
    .titleTextCover {
        width: auto;
        height: 100%;

        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        align-items: center;
    }
        .verticalTitleDevider {
            margin: 0 10px;
        }
        .titleText{
            line-height: 1;
        }

/* 반응형으로 화면이 작아지면 영역명 수직 구성 */
@media screen and (max-width: 999px) {
    .titleTextCover {
        width: auto;
        height: 52px;

        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
    }
        .verticalTitleDevider.under1000 {
            display: none;
        }
        .titleText.under1000 {
            margin-top: 7px;

            font-size: 14px;
            font-weight: 500;
        }
    }



/* marketOppList의 Search_box */
#search_box {
    width: 100%;

    display: flex;
    justify-content: center;
    align-items: center;
    gap: 7px; /* Adjust the value to increase or decrease the spacing */

    box-sizing: border-box;
    padding: 0;
    margin-bottom: 30px;
}
/* 업종코드 조회결과 및 선택 Search_box */
#industrySearchBox {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

/* marketOppList의 input */
#keyword_input {
    box-sizing: border-box;     /* 박스 외부로 컨텐츠 넘치는 것 방지 */

    /* 패딩 설정 */
    padding-top: 10px;
    padding-left: 5px;
    padding-right: 5px;
    padding-bottom: 10px;

    border: 1px solid;
    border-color: lightgray;

    border-radius: 5px;    /* 모서리 다듬기 */

    width: 480px;
    height: 40px;
    font-size: 1rem;
    line-height: 1.2rem;
}
/* 업종코드 조회결과 및 선택 input */
.keyword_input {
    box-sizing: border-box;     /* 박스 외부로 컨텐츠 넘치는 것 방지 */

    /* 패딩 설정 */
    padding-top: 10px;
    padding-left: 5px;
    padding-right: 5px;
    padding-bottom: 10px;

    border: 1px solid;
    border-color: lightgray;

    border-radius: 5px;    /* 모서리 다듬기 */

    height: 40px;
    font-size: 1rem;
    line-height: 1.2rem;
}
/* 업종명으로 검색, 업종코드로 검색 */
.searchTitle {
    font-size: 1.1rem;
}


/* 드랍다운 영역 설정 */
select#searchOptions {
    /* width: 100%; */
    max-width: 220px;
    box-sizing: border-box;     /* 박스 외부로 컨텐츠 넘치는 것 방지 */

    /* 디폴트 스타일 제거 */
    -moz-appearance: none;
    -webkit-appearance: none;
    appearance: none;

    border: 1px solid;
    border-color: lightgray;

    height: 40px;
    font-size: 1rem;
    line-height: 1.2rem;

    padding: 3px 10px 3px 10px;    /* Top Right Bottom Left */
    border-radius: 5px;    /* 모서리 다듬기 */
    border-color: lightgray;
}

button.searchButton {
    width: 80px;
    height: 40px;

    border: 1px solid;
    border-radius: 5px;
    background-color: #333;
    transition: background-color 0.3s ease;

    color: #FFF;
    /* font-size: 1rem; */
    cursor: pointer;
}

button:hover {
    border: 1px solid;
    background-color: gray;
}

button:focus {
    /* outline: none; */
    border: 1px solid;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
}



/* 업종 메뉴트리 및 매물 리스트 설정 */
#oppListOuterTable {
    /* width: 1366px; */
    width: 1280px;
    min-height: 1350px;

    box-sizing: border-box;
    border-collapse: collapse;
    border-spacing: 0;
    border: 0;

    display: flex;
    flex-direction: row;


    position: relative;
}

/* 업종 메뉴트리 설정 */
#industryHierarchy {
    /* width: 266px; */
    /* width: 220px; */
    width: 260px;
    vertical-align: top;
    overflow: auto;

    box-sizing: border-box;
    padding: 15px 0;
    border: 0;

    border-collapse: collapse;
}

/* 업종 메뉴트리 전체 설정 */
#industryHierarchyTable {
    /* width: 230px; */
    width: 220px;
    box-sizing: border-box;
    padding: 0;
    border: 0;

    border-collapse: collapse;
}

/* 업종 메뉴트리 내 각 업종 항목 설정 */
#industryHierarchy a {
    line-height: 23px;
    font-size: 13px;
    text-decoration: none;
    color: inherit;
}

/* 계층구조를 만들기 위해 한칸씩 들려쓰기하는 간격 */
.codeTreeEmpty {
    width: 3px;
    /* background-color: lightgray; */
}



/* 매물리스트 전체 영역 >> 3열 = 320 + 30 + 320 + 20 + 320 = 1000 */
#bodyTD {
    /* max-width: 1060px; */
    width: 100%;
    /* width: 1000px; */
    min-height: 1290px;

    box-sizing: border-box;
    /* padding-top: 30px;
    padding-right: 0px;
    padding-bottom: 0px;
    padding-left: 0px; */
    padding-top: 15px;
    /* padding-left: 30px;*/
    padding-left: 20px;
    /* padding-right: 30px; */
    padding-bottom: 15px;

    display: flex;
    flex-direction: column;
    align-items: center;

    position: relative;
    vertical-align: top;

    text-align: center;

    border-collapse: collapse;
}


    /* 리스트 테이블 */
    .contentsListTable {
        max-width: 1060px;
        width: 100%;
        /* min-height: 700px; */

        box-sizing: border-box;
        border: 0;
        border-spacing: 0;

        border-collapse: collapse;

        display: grid;
        grid-template-columns: repeat(3, 1fr);
        

        column-gap: 20px;
    }
    /* 리스트의 각 매물 박스 TD 외피 */
    .cellRow {
        width: 100%;
        /* min-height: calc((700px - 15px - 15px) / 3); */
        /* height: calc((100vh - 100px - 65px - 60px - 15px - 15px) / 3); */

        display: flex;
        /* align-items: left; */
        /* justify-content: space-between; */
        /* gap: calc((1280px - 220px - 30px - 30px) * (1 - 0.33 * 3)); */
        /* gap: auto; */
        gap: 20px;

        box-sizing: border-box;
        margin: 0;
        padding: 0;
        border: 0;
        border-spacing: 0;
        border-collapse: collapse;
    }

    /* 매물리스트의 각 매물 박스 TD 외피 */
    .oppCell {
        /* width: 340px; */
        /* width: 33.3%; */
        width: 100%;
        /* height: 400px; */

        box-sizing: border-box;
        border-collapse: collapse;
        border-spacing: 0px;

        display: flex;
        align-items: center;
        justify-content: center;

        text-align: center;
        vertical-align: top;
    }

    /* 각 매물 별 테이블 (이미지 + 내용) */
    .cellTable {
        /* width: 340px; */
        width: 320px;
        /* height: 100%; */

        box-sizing: border-box;
        padding: 0;
        margin-bottom: 25px;

        border: 0;
        border-collapse: collapse;
        border-spacing: 0;

        /* display: flex;
        justify-content: center;
        align-items: center; */
        /* text-align: center; */
    }

    .oppDetail {
        text-decoration: none;
        color: inherit;

        box-sizing: border-box;
        border-spacing: 0;
        border-collapse: collapse;
    }

    /* 각 매물의 하단 내용 */
    .trTableTitle {
        width: 320px;

        display: flex;
        align-items: center;
        justify-content: center;

        box-sizing: border-box;
        border-spacing: 0;
        border-collapse: collapse;
    }
    .trTableDetail {
        width: 320px;
        /* height: 80px; */
        /* vertical-align: top; */      /* 하단 Detail 테이블 내용을 수직으로 top align */

        display: flex;
        align-items: center;
        justify-content: center;

        box-sizing: border-box;
        border-spacing: 0;
        border-collapse: collapse;
    }
        /* 매물 제목 관련 */
        .oppTitle {
            /* width: 314px; */
            width: calc(100% - 5px);
            /* width: 100%; */

            /* display: flex;가 말줄임을 방해함
            text-overflow: ellipsis;은 display: block;, display: inline-block; 또는 display: table-cell;일 때만 제대로 작동합니다.
            display: flex;가 적용되면 자식 요소가 줄어들지 않고 전체 너비를 차지하려고 하기 때문에 말줄임이 동작하지 않습니다. */
            /* display: flex;
            justify-content: flex-start; */

            box-sizing: border-box;
            padding: 0;
            white-space: nowrap;       /* Prevents the text from wrapping */
            overflow: hidden;          /* Hides any overflowed text */
            text-overflow: ellipsis;   /* Adds ellipsis (...) to indicate overflowed text */

            text-align: left;
            font-weight: 900;    /* 폰트 굵기 */
            font-size: 17px;
            line-height: 31px;
        }

        .ellipsis {
            white-space: nowrap;         /* 텍스트를 한 줄로 표시 */
            overflow: hidden;           /* 넘치는 텍스트 숨김 */
            text-overflow: ellipsis;    /* 숨겨진 텍스트를 '...'로 표시 */
            display: inline-block;
        }


    .innerTable {
        /* width: 340px; */
        width: 314px;
        /* width: 100%; */

        box-sizing: border-box;
        /* padding-top: 0px;
        padding-right: 0px;
        padding-bottom: 0px;
        padding-left: 0px; */
        padding: 0;
        border-spacing: 0;
        border: 0;
        border-collapse: collapse;
    }
        .oppInnerTableRow {
            display: flex;
            flex-direction: row;
            justify-content: center;
            align-items: center;

            font-size: 13px;
            line-height: 1;
        }

        .innerTable td{
            font-size: small;
        }

        .oppInnerTableCol {
            /* width: 25%; */
            width: 80px;
            line-height: 21px;

            display: flex;
            flex-direction: row;
            justify-content: flex-start;
        }
        .oppInnerTableColMerged {
            width: 145px;
        }
        .indutyNameDetail {
            width: 145px;

            text-align: left;
            
            white-space: nowrap;       /* Prevents the text from wrapping */
            overflow: hidden;          /* Hides any overflowed text */
            text-overflow: ellipsis;   /* Adds ellipsis (...) to indicate overflowed text */
        }

        .oppInnerTableColSpacer {
            /* width: 10%; */
            width: 24px;
        }

        .oppInnerTableColVal {
            width: 65px;

            display: flex;
            flex-direction: row;
            justify-content: flex-end;
            align-items: center;
            gap: 3px;

            /* text-align: right; */
            line-height: 21px;
        }

        /* .tdSpacer {
            width: 20px;
        }
        .verticalSpacer {
            height: 30px;
        } */



    /* 각 매물 이미지 오버레이 영역 >> https://multifidus.tistory.com/182 */
    /* <td class="oppImageTD"><div class="oppImage"><image> */
    .oppImageTD {
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .oppImage {
        /* width: 340px; */
        width: 318px;
        /* width: 100%; */
        /* max-height: 300px; */
        height: 300px;
        overflow: hidden;

        display: flex;
        justify-content: center;
        align-items: center;

        box-sizing: border-box;
        border: 1px solid lightgray;
        /* border-radius: 5px; */
        /* border-radius: 7%; */
        border-radius: 5%;
        box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1);
        border-collapse: collapse;
        border-spacing: 0;

        position: relative;
    }

    .oppImage img {
        max-height: 300px;
        object-fit: scale-down;

        position: relative;     /* gradiation overlay 효과 */
        z-index: 1;     /* gradiation overlay 효과 */
    }

    /* gradiation overlay 효과 */
    .oppImage::after {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-image: linear-gradient(to bottom right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.6));
        z-index: 2;
    }

    /* 매물 호가 영역 >> 이미지 오버레이 */
    .mrktCap {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        color: white;
        font-size: 38px;
        font-weight: 800;

        /* Set text shadow to create outline */
        /* text-shadow: 
            -2px -2px 0 #070706c9,
            2px -2px 0 #070706c9,
            -2px 2px 0 #070706c9,
            2px 2px 0 #070706c9; */

        text-shadow: 
            -1px -1px 0 #111,
            1px -1px 0 #111,
            -1px 1px 0 #111,
            1px 1px 0 #111;

        z-index: 3;     /* gradiation overlay 효과 */
    }
    /* 비로그인 회원 좌물쇠 표시 */
    .lockedRepImage {
        /* width: 57px;
        height: 57px; */

        /* width: 47px;
        height: 47px; */

        width: 42px;
        height: 42px;
    }
    .lockedChar {
        width: 15px;
        height: 15px;
    }


/* 페이지 번호 영역 */
#pageNumAreaTD {
    /* height: 50px; */
    margin-bottom: 30px;
    display: flex;
    justify-content: center;
    align-items: center;

    color: lightgray;
}
.pageNumLink {
    color: lightgray;
    text-decoration: none;
}
.pageNumSelf {
    color: #333;
    font-weight: 900; /* Extra bold font weight */
}
.pageNavi{
    color: lightgray;
}



hr {
    background-color: #bababa;
    height: 1px;
    border: 0px;
    margin: 5px;
    padding: 0;
}



/* 업종검색 결과 테이블 */
#searchResultShowTable a {
    text-decoration: none;
    color: black;
}
.industryCodeCol {
    width: 20%;
}








/* 기본 1280 + 양쪽마진 30 = 1340 폭보다 작은 경우 */
@media screen and (max-width: 1339px) {
    .bodyLayer2.marketOppList {
        /* 내용은 폭 940 + 패딩 양쪽 30 */
        width: calc(940px + 30px + 30px);
        box-sizing: border-box;
        padding: 0 30px;
    }

    #oppListOuterTable {
        /* width: calc(100vw - 30px - 30px); */
        width: 100%;
    }

    /* 업종네비 유지. 우측 매물 리스트 2열 5행으로 전환 = 패딩 20 + 320 + 20 + 320 >> 왼쪽 업종네비가 나머지 차지 */
    #blurContainer {
        /* width: 100%; */
        width: 940px;
    }
        #industryHierarchy {
            flex-grow: 1;
        }
        #bodyTD {
            width: calc(20px + 320px + 20px + 320px);
        }
            .contentsListTable {
                grid-template-columns: repeat(2, 1fr);
            }
}

/* .bodyLayer2.marketOppList 폭이 1000보다 작은 경우 업종네비 제거 */
@media screen and (max-width: 999px) {
    #mainTitle {
        margin-bottom: 30px;
    }
    .bodyLayer2.marketOppList {
        /* 내용은 폭 660 + 패딩 양쪽 30 = 30 + 320 + 20 + 320 + 30 = 720 */
        width: calc(660px + 30px + 30px);
        box-sizing: border-box;
        padding: 0 30px;
    }
    select#searchOptions {
        width: 33%;
    }
    #blurContainer {
        width: 660px;
    }
        #keyword_input {
            /* width: 200px; */
            /* width: 100%; */
            width: auto;
            flex-grow: 1;
        }
        #industryHierarchy {
            display: none;
            flex-grow: 0;
        }

        #bodyTD {
            width: calc(320px + 20px + 320px);
            padding-left: 0;
        }
}


/* .bodyLayer2.marketOppList 폭이 700보다 작은 경우 1열로 편성 = 660 + 패딩 각 20 */
@media screen and (max-width: 699px) {
    .bodyLayer1.marketOppList {
        width: 100vw;
        box-sizing: border-box;
        padding: 0 20px;
    }
    .bodyLayer2.marketOppList {
        width: calc(100vw - 20px - 20px);
        padding: 0;
    }
    #blurContainer {
        width: 100%;
    }
        #bodyTD {
            width: 100%;
            padding-left: 0;
        }
            .contentsListTable {
                grid-template-columns: repeat(1, 1fr);
            }
                .cellTable {
                    width: calc(100vw - 20px - 20px);
                    /* margin-bottom: 33px; */
                    margin-bottom: 37px;
                }
                    .oppImage {
                        width: calc(100vw - 20px - 20px);
                        height: calc(100vw - 20px - 20px);
                    }
                    .oppImage img {
                        max-height: calc(100vw - 20px - 20px);
                    }
                
                .trTableTitle {
                    /* width: 100%; */
                    width: calc(100vw - 20px - 20px);
                }
                .trTableDetail {
                    /* width: 100%; */
                    width: calc(100vw - 20px - 20px);
                }
                    .innerTable {
                        /* width: 100%; */
                        width: calc(100vw - 20px - 20px);
                    }
                    .oppInnerTableRow {
                        /* width: 100%; */
                        width: calc(100vw - 20px - 20px);
                    }
                        .oppInnerTableCol {
                            /* width: 20%; */
                            width: calc((100vw - 20px - 20px) * 0.2);
                            min-width: 73px;
                        }
                        .oppInnerTableColVal {
                            /* width: 27%; */
                            width: calc((100vw - 20px - 20px) * 0.28);
                        }
                        .oppInnerTableColSpacer {
                            /* width: 3%; */
                            width: calc((100vw - 20px - 20px) * 0.04);
                            height: 3px;
                        }
                        .oppInnerTableColMerged {
                            width: calc((100vw - 20px - 20px) * 0.48);
                        }
                            .indutyNameDetail {
                                /* width: 100%; */
                                width: calc((100vw - 20px - 20px) * 0.48);

                                /* display: flex;
                                flex-direction: row;
                                justify-content: flex-start; */
                                text-align: left;

                                white-space: nowrap;         /* 줄바꿈 안 함 */
                                overflow: hidden;            /* 넘치는 내용 숨김 */
                                text-overflow: ellipsis;     /* 넘치는 부분을 ...으로 표시 */
                            }

}


/* 검색 영역을 수직배치 */
@media screen and (max-width: 499px) {
    #search_box {
        display: flex;
        flex-wrap: wrap;
    }
        select#searchOptions {
            width: 100%;
            max-width: none;
        }
}