@charset "utf-8";
/*************************************************************************
* @ 서비스명   : main
* @ 파일명     : /css/main.css
* @ 페이지설명  : main.css
* @ 작성일     : 2025.02.26
**************************************************************************/

.map .layout{height:100%;overflow: hidden;}
.map .layout .section01{display:flex;height: 100vh;}
.map .layout .section01 .left{width:calc(100% - 380px);background:#fafafa;}
.map .layout .section01 .left .top{display:flex;justify-content:space-between;align-items:center;padding:20px;}
.map .layout .section01 .left .top .logo{width:20%;min-width:250px;cursor: pointer;}
.map .layout .section01 .left .top img{width:80%;}
.map .layout .section01 .left .top .line{display:flex;gap:15px;width:80%;}
.map .layout .section01 .left .top .line select{width:30%;border-radius:5px;border:1px solid #e1e1e1;font-size:15px;padding:15px;background:url(../images/ico/select_icon.svg) no-repeat;background-position:95% 50%;background-size:16px;background-color:#fff;}
.map .layout .section01 .left .top .line .search{width:60%;}
.map .layout .section01 .left .top .line .search input{width:100%;border-radius:5px;border:1px solid #e1e1e1;font-size:15px;padding:15px;background:#fff;}
.map .layout .section01 .left .top .line .btn{width:100px;background:#CC2225;color:#fff;font-size:15px;font-weight:600;border-radius:5px;}
.map .layout .section01 .left .map{padding:0px 20px 20px 20px;height:calc(100vh - 90px);}
.map .layout .section01 .left .gps{position:absolute;bottom:20px;left:30px;}
.map .layout .section01 .left .gps img{width:64px;}

.map .layout .section01 .right{width:380px;background:#ebe9d6;padding:20px;}
.map .layout .section01 .right .logout{display:flex;gap:8px;justify-content:flex-end;color:#666;align-items:center;}
.map .layout .section01 .right .logout a{font-size:15px;font-weight:600;}
.map .layout .section01 .right .title{margin-top:5px;display:flex;justify-content:space-between;align-items:flex-end;font-size:18px;font-weight:700;margin-bottom:17px;}
.map .layout .section01 .right .title span{font-size:14px;color:#898989;font-weight:400;}
.map .layout .section01 .right .tab{display:flex;flex-direction: column;max-height:calc(100vh - 110px);}
.map .layout .section01 .right .list{background:#fff;border-radius:10px;padding:25px 15px 15px 15px;flex-grow:1;overflow:auto;}
.map .layout .section01 .right .list .name{font-size:16px;padding:15px 15px 15px 10px;border-bottom:1px solid #e1e1e1;text-align:left;width:100%;}
.map .layout .section01 .right .info{flex-shrink:0;margin-bottom:10px;background:#fff;border-radius:10px;padding:20px 15px;}
.map .layout .section01 .right .info .top{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #e1e1e1;padding-bottom:15px;margin-bottom:10px;}
.map .layout .section01 .right .info .top .name{font-size:18px;font-weight:700;display:flex;justify-content:space-between;align-items:center;gap:8px;}
.map .layout .section01 .right .info .top .name img{width:13px;}
.map .layout .section01 .right .info .top .delate{font-size:15px;color:#CC2225;}
.map .layout .section01 .right .info .txt{display:flex;padding:7px 10px 5px 10px;}
.map .layout .section01 .right .info .txt .t1{font-size:15px;width:55px;font-weight:600;}
.map .layout .section01 .right .info .txt .t2{font-size:15px;width:calc(100% - 55px);white-space: normal;word-break: break-word;}
.map .layout .section01 .right .info .map-box{margin-top:5px;display:flex;gap:5px;padding-left:10px;}
.map .layout .section01 .right .info .map-box .naver{font-size:13px;border-radius:5px;padding:5px 10px;padding:8px 11px;border:1px solid#F0F0F0;display:flex;gap:1px;align-items:center;}
.map .layout .section01 .right .info .map-box .naver img{width:18px;}
.map .layout .section01 .right .info .map-box .kakao{font-size:13px;border-radius:5px;padding:5px 10px;padding:8px 11px;border:1px solid#F0F0F0;display:flex;gap:1px;align-items:center;}
.map .layout .section01 .right .info .map-box .kakao img{width:18px;}
.map .layout .section01 .right .info .map-box .tmap{font-size:13px;border-radius:5px;padding:5px 10px;padding:8px 11px;border:1px solid#F0F0F0;display:flex;gap:1px;align-items:center;}
.map .layout .section01 .right .info .map-box .tmap img{width:18px;}
.map .layout .section01 .right .list .distance {float: right;font-size: 12px;top: 10px;color: #808080;position: relative;}















/* tablet */
@media all and (max-width:1280px) {

.map .layout .section01 .left .top img{width:80%;}
.map .layout .section01 .left .top .line{gap:10px;}
.map .layout .section01 .right{width:310px;}
.map .layout .section01 .left{width:calc(100% - 310px)}
}


/* mobile */
@media all and (max-width:768px) {
.map .layout .section01{flex-direction:column;height:auto;}
.map .layout .section01 .left{width:100%;}
.map .layout .section01 .right{width:100%;}
.map .layout .section01 .left .top{flex-direction:column;align-items:flex-start;padding:20px 20px 10px 20px;}
.map .layout .section01 .left .top .logo{width: 100%;display: flex;align-items: center; /* 수직 중앙 정렬 */}
.map .layout .section01 .left .top img{width:180px;}
.map .layout .section01 .left .top .line{margin-top:10px;gap:5px;width:100%;}
.map .layout .section01 .left .top .line .btn{width:80px;font-size:13px;}
.map .layout .section01 .left .top .line select{font-size:13px;padding:13px 5px;width:30%;}
.map .layout .section01 .left .top .line .search input{font-size:13px;padding:13px 10px;}
.map .layout .section01 .left .map{height:450px;}
.map .layout .section01 .left .gps{position: absolute;bottom: 30px; left: 15px; z-index: 10;transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;}
.map .layout .section01 .left .gps.hidden { opacity: 0;visibility: hidden;}

.map .layout .section01 .right .title{margin-top:0px;margin-bottom:15px;padding-top:10px;}
.map .layout .section01 .right .gps{position:fixed;margin-top:-90px;z-index:999;}
.map .layout .section01 .right .gps img{width:55px;}
.map .layout .section01 .right .tab{max-height:fit-content;}

.admin-link {
    font-size: 14px;
    white-space: nowrap; /* 줄바꿈 방지 */
    margin-left: auto; /* 오른쪽 정렬 */
}

    .right {
        z-index: 9999;
        position: fixed;
        bottom: 0;
        height: 250px; /* 기본 높이 */
        max-height: 80vh; /* 최대 높이 */
        min-height: 100px; /* 최소 높이 */
        overflow: hidden; /* 스크롤이 리스트 영역에서만 동작하도록 변경 */
        display: flex;
        flex-direction: column;
    }

    .drag-handle {
        width: 30%; /* 가로 길이를 50%로 줄임 */
        height: 5px;
        background: #ccc;
        border-radius: 10px; /* 끝을 둥글게 */
        position: absolute;
        top: 15px; /* 상단에 딱 붙임 */
        left: 50%; /* 가로 중앙 정렬 */
        transform: translateX(-50%); /* 정확한 중앙 정렬 */
    }

    .tab {
        flex: 1; /* 남은 공간을 차지하도록 설정 */
        overflow-y: auto; /* 리스트 영역에서만 스크롤 가능하도록 설정 */
    }

    .map .layout .section01 .right{height:0%;transition: height 0.5s cubic-bezier(0.25, 0.1, 0.25, 1);border-radius:15px 15px 0px 0px;}
    .map .layout .section01 .left .map{height:calc(100vh - 197px) !important}
}

/* mobile */
@media all and (max-width:460px) {
}