/* recommended-area */
.recommended-area{position: relative; padding: 180px 0;background: #fff;color: #131313;}
.ra-container{max-width: 1400px;margin: 0 auto;}

/* ra-head */
.ra-head{text-align: center;margin-bottom: 60px;}
.ra-head-title{font-size: 75px;font-weight: 800;line-height: 1.1;letter-spacing: -3.75px;color: #131313;margin: 0 0 40px;}
.ra-head-desc{font-size: 30px;font-weight: 400;line-height: 1.33;letter-spacing: -2.4px;color: #131313;margin: 0;}

/* ra-inner */
.ra-inner{display: flex;width: 1200px;margin: 0 auto;justify-content: space-between;align-items: center;}

/* ra-map */
.ra-area01{position: relative;}
.ra-map{position: relative;}
.ra-map-figure img{width: 558px;height: 772px;}
.ra-map-list{margin: 0;padding: 0;}
.ra-map-list .list-item{position: absolute;display: flex;width: 76px;height: 76px;border-radius: 50%;flex-direction: column;justify-content: center;background: #BB0000;border: 1px solid #BB0000;text-align: center;cursor: pointer;color: #fff;box-sizing: border-box;transition: transform 0.3s ease;}
.ra-map-list .list-item.is-active{background: #F8E5E5;border-color: #F8E5E5;color: #000;}
.ra-map-list .list-item:hover{transform: scale(1.08);}
.ra-map-list .list-content{padding: 0;}
.ra-map-list .list-title{font-size: 16px;font-weight: 400;line-height: 1;margin: 0;}
.ra-map-list .list-value{font-size: 30px;font-weight: 800;line-height: 1;letter-spacing: -1.5px;margin: 4px 0 0;}
.ra-map-list .list-item01{top: 16.10%;left: 20.14%;}
.ra-map-list .list-item02{top: 22.72%;left: 32.55%;}
.ra-map-list .list-item03{top: 13.76%;left: 51.25%;}
.ra-map-list .list-item04{top: 33.63%;left: 39.20%;}
.ra-map-list .list-item05{top: 40.51%;left: 12.05%;}
.ra-map-list .list-item06{top: 44.93%;left: 28.23%;}
.ra-map-list .list-item07{top: 40%;left: 64.02%;}
.ra-map-list .list-item08{top: 61.81%;left: 44.60%;}
.ra-map-list .list-item09{top: 52.46%;left: 57.01%;}
.ra-map-list .list-item10{top: 55.97%;left: 72.30%;}
.ra-map-list .list-item11{top: 67.14%;left: 66.72%;}
.ra-map-list .list-item12{top: 55.45%;left: 23.02%;}
.ra-map-list .list-item13{top: 70.38%;left: 25.89%;}
.ra-map-list .list-item14{top: 66.23%;left: 9.71%;}
.ra-map-list .list-item15{top: 91.42%;left: 20.14%;}
.ra-map-list .list-item16{top: 21.29%;left: 7.19%;}
.ra-map-list .list-item17{top: 33.76%;left: 25.17%;}

/* ra-box */
.ra-box{width: 360px;border-radius: 20px;overflow: hidden;box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);}
.ra-box .box-head{display: flex;height: 120px;padding: 0 20px;flex-direction: column;justify-content: center;background: #c3272e;color: #fff;text-align: center;box-sizing: border-box;}
.ra-box .box-title{font-size: 30px;font-weight: 700;line-height: 1.17;letter-spacing: -1.5px;margin: 0 0 5px;}
.ra-box .box-desc{font-size: 20px;font-weight: 400;line-height: 1.75;letter-spacing: -1px;margin: 0;}
.ra-box .box-body{height: 420px;overflow-y: auto;background: #fff;color: #131313;}
.ra-box .box-body::-webkit-scrollbar{width: 15px;background-color: #f0f0f0;}
.ra-box .box-body::-webkit-scrollbar-thumb{background-color: #c3272e;border-radius: 100px;border: 4px solid #f0f0f0;}
.ra-box-no-list{display: none;height: 100%;justify-content: center;align-items: center;color: #9f9f9f;font-size: 20px;}
.ra-box-no-list.is-active{display: flex;}
.ra-box-no-list p{margin: 0;}
.ra-box-list{display: none;flex-direction: column;margin: 0;padding: 0;}
.ra-box-list.is-active{display: flex;}
.ra-box-list .list-item{display: flex;height: 70px;padding: 0 32px;border-bottom: 1px solid #cfcfcf;justify-content: space-between;align-items: center;cursor: pointer;background: #F8E5E5;transition: background 0.3s ease;}
.ra-box-list .list-item.is-head{background: #f8e5e5;cursor: default;}
.ra-box-list .list-item:hover:not(.is-head){background: #f8e5e5;}
.ra-box-list .list-item:last-child{border-bottom: none;}
.ra-box-list .list-title{font-size: 20px;font-weight: 700;line-height: 1;letter-spacing: -1px;color: #131313;margin: 0;}
.ra-box-list .list-desc{font-size: 30px;font-weight: 700;line-height: 1;letter-spacing: -1.5px;color: #c3272e;margin: 0;}
.ra-box-list .list-item.is-head .list-desc{color: #131313;}

/* ra-foot */
.ra-foot{margin-top: 50px;display: flex;flex-direction: column;align-items: center;}
.ra-foot-text01{font-size: 40px;font-weight: 800;line-height: 1.75;letter-spacing: -2px;color: #131313;margin: 0;}
.ra-foot-line{width: 681px;max-width: 100%;height: 1px;background: #BB0000;}
.ra-foot-text02{font-size: 40px;font-weight: 800;line-height: 1.75;letter-spacing: -2px;color: #b00;margin: 0;padding: 22px 0 0;}

/* recommended-area-modal */
.recommended-area-modal{position: fixed;z-index: 1000;display: none;justify-content: center;align-items: center;inset: 0;}
.recommended-area-modal.is-active{display: flex;}
.ra-modal-backdrop{position: absolute;background: rgba(0, 0, 0, 0.5);inset: 0;backdrop-filter: blur(3px);}
.ra-modal-container{position: relative;}
.ra-modal-close{position: absolute;top: -40px;right: 0;width: 40px;height: 40px;}
.ra-modal-close button{width: 100%;height: 100%;background: none;cursor: pointer;}
.ra-modal-content{width: 800px;height: 500px;padding: 30px;box-sizing: border-box;overflow-y: auto;background: #fff;color: #131313;border-radius: 16px;}
.ra-modal-list{display: flex;flex-direction: column;gap: 20px;margin: 0;padding: 0;}
.ra-modal-table{width: 100%;border-collapse: collapse;}
.ra-modal-table td,
.ra-modal-table th{text-align: center;vertical-align: middle;}
.ra-modal-table thead th{height: 60px;background: #c3272e;color: #fff;font-size: 22px;font-weight: 700;}
.ra-modal-table tbody th,
.ra-modal-table tbody td{height: 50px;border-bottom: 1px solid #e5e5e5;font-size: 18px;}
.ra-modal-table tbody th{background: #f8e5e5;color: #c3272e;font-weight: 700;}
.ra-modal-table tbody tr:last-child th,
.ra-modal-table tbody tr:last-child td{border-bottom: none;}

/* 모바일 — .wrap-mobiler 안쪽에서 */
.wrap-mobiler .recommended-area{padding: 22vw 0;}
.wrap-mobiler .ra-container{padding: 12vw 4vw;margin: 0 4vw;border-radius: 16px;}
.wrap-mobiler .ra-head{margin-bottom: 8vw;}
.wrap-mobiler .ra-head-title{font-size: 9vw;letter-spacing: -0.3vw;margin: 0 0 4vw;}
.wrap-mobiler .ra-head-desc{font-size: 4vw;letter-spacing: -0.2vw;}
.wrap-mobiler .ra-inner{flex-direction: column;width: 100%;gap: 8vw;}
.wrap-mobiler .ra-map-figure img{width: 80vw;height: auto;}
.wrap-mobiler .ra-map-list .list-item{width: 11vw;height: 11vw;}
.wrap-mobiler .ra-map-list .list-title{font-size: 2.6vw;}
.wrap-mobiler .ra-map-list .list-value{font-size: 4.5vw;}
.wrap-mobiler .ra-box{width: 90%;}
.wrap-mobiler .ra-box .box-head{height: 24vw;}
.wrap-mobiler .ra-box .box-title{font-size: 5.5vw;}
.wrap-mobiler .ra-box .box-desc{font-size: 3.6vw;}
.wrap-mobiler .ra-box .box-body{height: 80vw;}
.wrap-mobiler .ra-box-list .list-item{height: 14vw;padding: 0 5vw;}
.wrap-mobiler .ra-box-list .list-title{font-size: 4vw;}
.wrap-mobiler .ra-box-list .list-desc{font-size: 5.5vw;}
.wrap-mobiler .ra-foot{margin-top: 8vw;}
.wrap-mobiler .ra-foot-text01,
.wrap-mobiler .ra-foot-text02{font-size: 5vw;letter-spacing: -0.2vw;padding: 2vw 0;}
.wrap-mobiler .ra-foot-line{width: 80vw;}
.wrap-mobiler .ra-modal-content{width: 90vw;max-width: 800px;height: auto;max-height: 80vh;}
.wrap-mobiler .ra-modal-table thead th{font-size: 4vw;height: 12vw;}
.wrap-mobiler .ra-modal-table tbody th,
.wrap-mobiler .ra-modal-table tbody td{font-size: 3.5vw;height: 10vw;}

/* ===== 상세 모달 ===== */
.ra-detail-modal{position: fixed;z-index: 1000;display: none;justify-content: center;align-items: center;inset: 0;}
.ra-detail-modal.is-active{display: flex;}
.ra-detail-modal-backdrop{position: absolute;background: rgba(0, 0, 0, 0.5);inset: 0;backdrop-filter: blur(3px);}
.ra-detail-modal-container{position: relative;width: 920px;max-width: 92vw;max-height: 85vh;overflow-y: auto;background: transparent;border-radius: 30px;}
.ra-detail-modal-close{position: absolute;top: -50px;right: 0;width: 40px;height: 40px;z-index: 10;}
.ra-detail-modal-close button{width: 100%;height: 100%;background: none;cursor: pointer;}
.ra-detail-modal-content{background: transparent;}
.ra-detail-list{margin: 0;padding: 0;background:#fff}

/* 상권 카드 (반복 단위) */
.ra-detail-item{background: #fff;overflow: hidden;margin-bottom: 20px;}
.ra-detail-item:last-child{margin-bottom: 0;}

/* 카드 헤더 (첫번째 카드에서만 표시) */
.ra-detail-head{display: flex;height: 60px;padding: 0 30px;background: #c3272e;color: #fff;justify-content: space-between;align-items: center;}
.ra-detail-head-title{font-size: 25px;font-weight: 700;letter-spacing: -2.5px;color: #fff;margin: 0;}
.ra-detail-head-select{display: flex;gap: 5px;}
.ra-detail-select-item{display: flex;align-items: center;width: 167px;height: 38px;padding: 0 12px;box-sizing: border-box;background: #fff;border: 1px solid rgba(187, 0, 0, 0.4);border-radius: 3px;}
.ra-detail-select-item span{flex: 1;font-size: 20px;font-weight: 400;letter-spacing: -2px;color: #c3272e;}
.ra-detail-select-item::after{content: '';display: block;width: 12px;height: 12px;border-right: 2px solid #c3272e;border-bottom: 2px solid #c3272e;transform: rotate(45deg) translateY(-3px);margin-left: 8px;}

/* 카드 본문 */
.ra-detail-body{display: flex;gap: 80px;padding: 58px 80px;align-items: center;}
.ra-detail-map{flex-shrink: 0;width: 526px;height: 380px;border-radius: 30px;background: #d9d9d9;overflow: hidden;}
.ra-detail-info{display: flex;flex-direction: column;gap: 30px;width: 200px;flex-shrink: 0;}
.ra-detail-info-content{display: flex;flex-direction: column;gap: 30px;}
.ra-detail-info-title{font-size: 24px;font-weight: 700;line-height: 1.33;letter-spacing: -1.2px;color: #131313;margin: 0;}
.ra-detail-info-list{margin: 0;padding: 0;}
.ra-detail-info-list li{font-size: 18px;font-weight: 400;line-height: 1.78;letter-spacing: -0.9px;color: #131313;opacity: 0.6;}
.ra-detail-btn{display: inline-flex;align-items: center;justify-content: center;padding: 12px 20px;background: #c3272e;color: #fff;font-size: 20px;font-weight: 700;line-height: 1;letter-spacing: -2px;border: none;border-radius: 8px;cursor: pointer;transition: background 0.3s ease;}
.ra-detail-btn:hover{background: #a01f25;}

/* 빈 결과 */
.ra-detail-empty{background: #fff;border-radius: 30px;padding: 80px 30px;text-align: center;color: #9f9f9f;font-size: 20px;}
.ra-detail-empty p{margin: 0;}

/* 모바일 */
.wrap-mobiler .ra-detail-modal-container{width: 92vw;border-radius: 20px;}
.wrap-mobiler .ra-detail-item{border-radius: 20px;}
.wrap-mobiler .ra-detail-head{height: auto;padding: 4vw 5vw;flex-direction: column;gap: 3vw;align-items: stretch;}
.wrap-mobiler .ra-detail-head-title{font-size: 5vw;text-align: center;}
.wrap-mobiler .ra-detail-head-select{justify-content: center;}
.wrap-mobiler .ra-detail-select-item{width: 40vw;height: 9vw;}
.wrap-mobiler .ra-detail-select-item span{font-size: 4vw;}
.wrap-mobiler .ra-detail-body{flex-direction: column;gap: 5vw;padding: 5vw;}
.wrap-mobiler .ra-detail-map{width: 100%;height: 60vw;border-radius: 16px;}
.wrap-mobiler .ra-detail-info{width: 100%;align-items: center;text-align: center;}
.wrap-mobiler .ra-detail-info-title{font-size: 5vw;}
.wrap-mobiler .ra-detail-info-list{text-align: left;}
.wrap-mobiler .ra-detail-info-list li{font-size: 3.8vw;}
.wrap-mobiler .ra-detail-btn{font-size: 4.5vw;padding: 3vw 6vw;}

/* ===== 추가/수정: select로 변경된 헤더 ===== */

/* 헤더 래퍼 — 카드와 분리된 첫 번째 li */
.ra-detail-head-wrap{margin-bottom: 20px;list-style: none;}
.ra-detail-head-wrap .ra-detail-head{border-radius: 30px 30px 0 0;border: 1px solid rgba(187, 0, 0, 0.4);border-bottom: none;}

/* 헤더 안의 select 박스 컨테이너 */
.ra-detail-select-item{position: relative;width: 167px;height: 38px;padding: 0;box-sizing: border-box;background: #fff;border: 1px solid rgba(187, 0, 0, 0.4);border-radius: 3px;overflow: hidden;}
.ra-detail-select-item::after{content: '';position: absolute;top: 50%;right: 12px;width: 8px;height: 8px;border-right: 2px solid #c3272e;border-bottom: 2px solid #c3272e;transform: translateY(-70%) rotate(45deg);pointer-events: none;}

/* 실제 select 엘리먼트 */
.ra-detail-select{width: 100%;height: 100%;padding: 0 30px 0 12px;font-size: 20px;font-weight: 400;line-height: 1;letter-spacing: -2px;color: #c3272e;background: transparent;border: none;outline: none;cursor: pointer;font-family: inherit;appearance: none;-webkit-appearance: none;-moz-appearance: none;}
.ra-detail-select::-ms-expand{display: none;}
.ra-detail-select option{color: #131313;font-size: 16px;}

/* ===== 수정: 카드는 헤더가 빠졌으니 위쪽도 둥글게 ===== */
.ra-detail-item{background: #fff;overflow: hidden;margin-bottom: 20px;}

/* ===== 모바일 추가 ===== */
.wrap-mobiler .ra-detail-head-wrap{margin-bottom: 3vw;}
.wrap-mobiler .ra-detail-head-wrap .ra-detail-head{border-radius: 16px 16px 0 0;}
.wrap-mobiler .ra-detail-select-item{width: 40vw;height: 9vw;}
.wrap-mobiler .ra-detail-select{font-size: 4vw;padding: 0 6vw 0 3vw;}
.wrap-mobiler .ra-detail-select-item::after{right: 2vw;width: 2vw;height: 2vw;}



/* ========================================
   추천 상권 카드
======================================== */

.ra-detail-item {
    background: #fff;
    border-radius: 30px;
    overflow: hidden;
}


/* ========================================
   카드 본문
======================================== */

.ra-detail-body {
    display: flex;
    gap: 50px;
    padding: 30px 50px;
    align-items: flex-start;
}


/* ========================================
   지도
======================================== */

.ra-detail-map {
    flex: 0 0 480px;
    width: 480px;
    height: 400px;
    border-radius: 20px;
    background: #d9d9d9;
    overflow: hidden;
}

.ra-detail-map.no-coords {
    display: flex;
    align-items: center;
    justify-content: center;
}

.ra-detail-map-empty {
    color: #999;
    font-size: 16px;
}


/* ========================================
   정보 영역
======================================== */

.ra-detail-info {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
    gap: 15px;
}

.ra-detail-info-content {
    display: flex;
    flex-direction: column;
    gap: 0px;
}


/* ========================================
   상권명
======================================== */

.ra-detail-info-title {
    margin: 0 0 8px;
    font-size: 26px;
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: -1px;
    color: #131313;
}


/* ========================================
   정보 리스트
   테이블 형태
======================================== */

.ra-detail-info-list {
    width: 100%;
    margin: 0;
    padding: 0;
    list-style: none;
    border-top: 1px solid #e5e5e5;
}


/* 테이블 행 */
.ra-detail-info-list li {
    display: flex;
    align-items: center;
    min-height: 30px;
    margin: 0;
    padding: 0;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.5;
    letter-spacing: -0.5px;
    color: #131313;
}


/* ========================================
   리스트별 행 간격
======================================== */

/* 임대조건 제목 */
.ra-detail-info-content > p:not(.ra-detail-info-title) {
    margin: 8px 0 0;
    padding: 0;
}


/* 임대조건 */
.ra-detail-info-content > p:nth-of-type(2) {
    font-size: 17px;
    font-weight: 700;
    line-height: 1.5;
    color: #131313;
}


/* ========================================
   문의 연락처
======================================== */

.ra-detail-info-content > p:last-child {
    margin: 12px 0 0;
    padding: 0;
    font-size: 17px;
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: -0.5px;
    color: #131313;
}


/* ========================================
   상담 버튼
======================================== */

.ra-detail-btn {
    width: 100%;
    height: 52px;
    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 0 20px;

    background: #c3272e;
    color: #fff;

    font-size: 18px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.8px;

    border: none;
    border-radius: 8px;

    cursor: pointer;
    transition: background 0.3s ease;
}

.ra-detail-btn:hover {
    background: #a01f25;
}
.ra-detail-info-content > p a {
    color: #c3272e;
    text-decoration: none;
    font-weight: 700;
}

/* ========================================
   빈 결과
======================================== */

.ra-detail-empty {
    background: #fff;
    border-radius: 30px;
    padding: 80px 30px;

    text-align: center;

    color: #9f9f9f;
    font-size: 20px;
}

.ra-detail-empty p {
    margin: 0;
}


/* ========================================
   태블릿
======================================== */

@media (max-width: 1100px) {

    .ra-detail-body {
        gap: 35px;
        padding: 30px 35px;
    }

    .ra-detail-map {
        flex: 0 0 420px;
        width: 420px;
    }

    .ra-detail-info-list li {
        font-size: 15px;
    }
}


/* ========================================
   모바일
======================================== */

@media (max-width: 767px) {

    .ra-detail-item {
        border-radius: 20px;
    }

    .ra-detail-body {
        flex-direction: column;
        gap: 25px;
        padding: 25px 20px;
    }

    .ra-detail-map {
        width: 100%;
        height: 280px;
        flex: none;
        border-radius: 15px;
    }

    .ra-detail-info {
        width: 100%;
        gap: 15px;
    }

    .ra-detail-info-content {
        gap: 5px;
    }

    .ra-detail-info-title {
        margin-bottom: 5px;
        font-size: 22px;
    }

    .ra-detail-info-list li {
        min-height: 40px;
        font-size: 15px;
    }

    .ra-detail-info-content > p:not(.ra-detail-info-title) {
        margin-top: 8px;
    }

    .ra-detail-info-content > p:last-child {
        margin-top: 10px;
        font-size: 16px;
    }

    .ra-detail-btn {
        height: 50px;
        font-size: 17px;
    }
}