/* ======================================================
   Mobile
====================================================== */

@media (max-width:767px){
    /* -------------------------
       산 정보 팝업
    ------------------------- */
    #mountain-popup{

        width:80vw;
        max-width:300px;

        max-height:70vh;
        overflow:auto;
    }
    
    .mainpage-layout .card-title{
    padding:12px 12px;
    font-size:15px;
    }
    


    /* --- 정보 한 줄 --- */
    .mainpage-layout .info-row{

        padding:2px 6px;
        font-size:14px;

    }
    /* --- 항목명 / 값 --- */
    .mainpage-layout .info-label{
        padding:2px 15px;
        font-size:14px;
    }

    .mainpage-layout .info-value{
        padding:2px 15px;
        font-size:14px;
    }
    .mainpage-layout .popup-posts-title{
        padding:2px 15px;        
        font-size:13px;
    }
    /* --- 팝업 닫기 --- */
    .mainpage-layout .popup-close{
        font-size:13px;
    }
    /* --- 팝업 버튼 사이즈 --- */
    .mainpage-layout .btn-trail{
        padding:10px, 0, 0, 10px;
        height:34px;
        font-size:13px;
    } 
    .popup-more-btn{
        padding:10px, 0, 0, 10px;
        height:34px;
        font-size:13px;
    }
    /* -------------------------
       인덱스 지도
    ------------------------- */
     #trailModal .modal-dialog{

        width:95vw;
        max-width:none;
        margin:5vh auto;    /* ← 가운데 정렬 */

    }

    #trailModal .modal-content{

        height:80vh;
        border-radius:0;

    }  
    
    
/* ====  Header ======= */

.app-header{
    padding:5px 0;
    margin-bottom: 10px;

}

    .app-logo{

        gap:8px;
        font-size:25px;
        font-weight:700;
    }

    .app-logo span{
        margin-top: 13px;
        color:#2f6b3f;

    }

    .app-logo img{
        width:40px;
        height:auto;
        filter: drop-shadow(0 4px 5px rgba(0,0,0,.25));
    }


    .app-header-actions{
        display:flex;
        justify-content:flex-end;
        align-items:center;
    }
    .header-icon{
        width:30px;
        height:30px;
        font-size:20px;
    }

    .header-icon:hover{    
        background:#e8e8e8;
    }
    
    .search-wrap{

        display:flex;
        align-items:center;
        gap:8px;
        position:relative;
    }   
    
    .search-wrap input{
        width:140px; 
        height:30px; 
        font-size:13px; 
    }
         



    .table-app{

        width:100%;

        font-size:14px;

    }

    .table-app th:first-child,
    .table-app td:first-child{

        display:none;

    }

    .table-app th,
    .table-app td{

        padding:8px 6px;

        vertical-align:top;

    }

    .table-app th:nth-child(2),
    .table-app td:nth-child(2){

        white-space:nowrap;
        width:15%;

    }

    .table-app th:nth-child(3),
    .table-app td:nth-child(3){

        white-space:nowrap;
        width:20%;

    }

    .title-box{

        display:-webkit-box;

  
        -webkit-box-orient:vertical;

        overflow:hidden;

        line-height:1.4;

        white-space:normal;

    }    
    
    .record-info,
    .record-header{

        display:none;

    }  
/*--------- 지도에 정보띄우기 ---------*/    
    .track-info{
        display:none;
        width:120px;
        padding:0px;
        margin-top:55px !important;
        margin-right:20px !important;
        background:rgba(255,255,255,.30)!important;
        backdrop-filter:blur(8px);
        -webkit-backdrop-filter:blur(8px);
        font-size:14px;
        border-radius:15px;
        box-shadow:0 2px 8px rgba(0,0,0,.25)
    }  

    .track-info.show{

        display:block;




    }      
    #map{
        height:300px;
    }   
    
    #photoViewerModal .modal-dialog{
        margin:0;
        max-width:none;
        width:100vw;
        height:100vh;
    }
    
    
/*--------- 모바일 사진 팝업 ---------*/   
    #photoViewerModal .modal-content{
        width:100%;
        height:100%;
        border-radius:0;
        border:0;
        background:#000;
    }
    
    #photoViewerModal .modal-dialog{
        width:auto;
        max-width:100vw;
        margin:0 auto;
    }
    
    #photoViewerModal .modal-body{
        padding:0;
        display:flex;
        justify-content:center;
        align-items:center;
        overflow:hidden;
    }

    #photoViewerModal img{
        max-width:100%;
        max-height:100%;
        object-fit:contain;
        user-select:none;
        -webkit-user-drag:none;
        touch-action:none;
    } 
    .photo-prev,
    .photo-next{

        display:none;

    }    

    
    .photo-viewer{

        display:flex;
        justify-content:center;
        align-items:center;
        width:100%;
        height:100vh;

    }

    #photoViewerImage{

        max-width:100%;
        max-height:100%;
        width:auto;
        height:auto;
        margin:auto;
        object-fit:contain;

    }   
/* ===========================================================
   버튼
=========================================================== */    

    .btn-app {
        min-width:60px;
        height:25px;
        padding:0 10px;
        gap:2px;
        font-size:13px;
        font-weight:600;
    }




/* ==========================================
   Login 
========================================== */



.login-box{
    width:300px;
    padding:30px;
}


    .login-logo img{

        width:80px;

    }

    .login-title{
        font-size:35px;
    }


    .login-subtitle{

        font-size:15px;

        margin-bottom:20px;

    }

    .login-divider{

        margin:10px 0;

    }

    .login-input input{

        height:35px;

        font-size:15px;

    }

    .login-btn{

        height:35px;

        font-size:15px;

    }

    .login-footer{

        font: size 15px;

    }

/* -------------------------
    겔러리 카운터
------------------------- */

    .gallery-count{
        display:none;
    }
/* -------------------------
    겔러리 다운로드 버튼
------------------------- */
.gallery-actions .btn{
    height:25px;
    padding:0 5px;
    font-size:10px;
}

.download-count{
    font-size:10px;

}

}




/* ======================================================
   Tablet (iPad, Galaxy Tab, Fold 펼침)
====================================================== */

@media (min-width:768px) and (max-width:1199px){

    /* -------------------------
       산 정보 팝업
    ------------------------- */
    #mountain-popup{

        width:80vw;
        max-width:380px;

        max-height:65vh;
        overflow:auto;

    }

    .mainpage-layout .card-title{
    padding:8px 12px;
    font-size:15px;
    }

    /* --- 정보 한 줄 --- */
    .mainpage-layout .info-row{

        padding:5px 5px;
        font-size:14px;

    }
    /* --- 항목명 / 값 --- */
    .mainpage-layout .info-label{
        padding:0 30px;
        font-size:14px;
    }

    .mainpage-layout .info-value{
        padding:0 30px;
        font-size:14px;
    }



    .mainpage-layout .popup-posts-title{
        padding:4px 15px;        
        font-size:15px;
    }
    /* --- 팝업 닫기 --- */
    .mainpage-layout .popup-close{
        font-size:15px;
    }
    /* --- 팝업 버튼 사이즈 --- */
    .mainpage-layout .btn-trail{

        height:30px;
        font-size:13px;
    } 
    .popup-more-btn{
        height:30px;
        font-size:13px;
    }





    
    /* -------------------------
       등산로 모달
    ------------------------- */
    #trailModal .modal-dialog{

        width:80vw;
        max-width:none;
        height:60vh;

        margin:5vh auto;    /* ← 가운데 정렬 */

    }

    #trailModal .modal-content{

        height:80vh;
        border-radius:16px;

    }

    

    
/* ====  Header ======= */

.app-header{
    padding:12px 0;
    margin-bottom:10px;
}

    .app-logo{
        gap:8px;
        font-size:30px;
        

    }

    .app-logo span{
        margin-top:15px;
        color:#2f6b3f;

    }

    .app-logo img{
        width:50px;
        height:auto;
        filter: drop-shadow(0 4px 8px rgba(0,0,0,.25));
    }
    .app-header-actions{

        display:flex;
        justify-content:flex-end;
        align-items:center;
        gap:4px;

        margin-top:10px;

    }
    .header-icon{
        width:30px;
        height:30px;
        font-size:20px;
    }

    .header-icon:hover{    
        background:#e8e8e8;
    }
    
    .search-wrap{

        display:flex;
        align-items:center;
        gap:8px;
        position:relative;
    }   
    
    .search-wrap input{
        width:230px; 
        height:35px; 
        font-size:14px; 
    }
     
    
    .table-app{
        width:95%;
        margin:0 auto;
        table-layout:fixed;

    }

    .table-app th:first-child,
    .table-app td:first-child{

        display:none;


    }

    .table-app th:nth-child(2),
    .table-app td:nth-child(2){

        width:20%px;

    }

    .table-app th:nth-child(3),
    .table-app td:nth-child(3){

        width:15%;

    }

    .table-app th:nth-child(4),
    .table-app td:nth-child(4){

        width:auto;

    }

    .title-box{

        display:block;

        white-space:nowrap;
        overflow:hidden;
        text-overflow:ellipsis;
    } 
    
    .record-info,
    .record-header{

        display:none;

    }     
    
/*--------- 지도에 정보띄우기 ---------*/    
    .track-info{
        display:none;
        width:150px;
        padding:0;
        margin-top:55px !important;
        margin-right:20px !important;
        background:rgba(255,255,255,.30)!important;
        backdrop-filter:blur(8px);
        -webkit-backdrop-filter:blur(8px);
        font-size:14px;
        border-radius:15px;

        box-shadow:0 2px 8px rgba(0,0,0,.25)
    }  

    .track-info.show{

        display:block;

    }    

    
    #map{
        height:500px;
    }
    

/*--------- 모바일 사진 팝업 ---------*/   
    #photoViewerModal .modal-content{
        width:100%;
        height:100%;
        border-radius:0;
        border:0;
        background:#000;
    }
    
    #photoViewerModal .modal-dialog{
        width:auto;
        max-width:100vw;
        margin:0 auto;
    }
    
    #photoViewerModal .modal-body{
        padding:0;
        display:flex;
        justify-content:center;
        align-items:center;
        overflow:hidden;
    }

    #photoViewerModal img{
        max-width:100%;
        max-height:100%;
        object-fit:contain;
        user-select:none;
        -webkit-user-drag:none;
        touch-action:none;
    } 
    .photo-prev,
    .photo-next{

        display:none;

    }    

    
    .photo-viewer{

        display:flex;
        justify-content:center;
        align-items:center;
        width:100%;
        height:100vh;

    }

    #photoViewerImage{

        max-width:100%;
        max-height:100%;
        width:auto;
        height:auto;
        margin:auto;
        object-fit:contain;

    }   
    
/* ===========================================================
   버튼
=========================================================== */       
    .btn-app {
        min-width:80px;
        height:32px;
        padding:0 10px;
        gap:2px;
        font-size:13px;
    }   


/* ==========================================
   Login 
========================================== */



    .login-box{
        width:300px;
        padding:30px;
    }


    .login-logo img{

        width:80px;

    }

    .login-title{
        font-size:35px;
    }


    .login-subtitle{

        font-size:15px;

        margin-bottom:10px;

    }

    .login-divider{

        margin:20px 0;

    }

    .login-input input{

        height:35px;

        font-size:15px;

    }

    .login-btn{

        height:35px;

        font-size:17px;

    }

    .login-footer{

        font-size: 15px;

    }



/* -------------------------
    겔러리 다운로드 버튼
------------------------- */
.gallery-actions .btn{
    height:30px;
    padding:0 12px;
    font-size:12px;
}

.download-count{
    font-size:12px;
}


}










/* ======================================================
   PC
====================================================== */
@media (min-width:1200px){
    .container-fluid{

        max-width:1200px;
        margin:0 auto;
    } 
    
/* ====  Header ======= */

    .app-header{

        padding:12px 0;
        margin-bottom:10px;
    }

    .app-logo{

        gap:8px;
        font-size:50px;
        margin-top:40px;

    }

    .app-logo span{

        margin-top:15px;

        color:color:#2f6b3f;

    }

    .app-logo img{
        width:70px;
        height:auto;
        filter: drop-shadow(0 4px 10px rgba(0,0,0,.25));    
    }

    .app-header-actions{
        margin-top:70px;
        display:flex;
        gap:10px;
    }

    .header-icon{
        width:42px;
        height:42px;
        font-size:20px;
    }

    .header-icon:hover{
        background:#e8e8e8;

    }
        
    .search-wrap input{
        width:250px;
    }
    
    .table-app{
        width:90%;
        margin:0 auto;
        table-layout:fixed;
    }

    .table-app th:nth-child(1),
    .table-app td:nth-child(1){
        width:70px;
        text-align:center;
    }

    .table-app th:nth-child(2),
    .table-app td:nth-child(2){
        width:150px;
    }

    .table-app th:nth-child(3),
    .table-app td:nth-child(3){
        width:140px;
    }

    .table-app th:nth-child(4),
    .table-app td:nth-child(4){
        width:auto;
    }

    .title-box{
        display:block;
        white-space:nowrap;
        overflow:hidden;
        text-overflow:ellipsis;
    }
    
/*--------- 지도에 정보띄우기 ---------*/    
    .track-info{
        display:none;
        width:150px;
        padding:0;
        margin-top:55px !important;
        margin-right:20px !important;
        background:rgba(255,255,255,.30)!important;
        backdrop-filter:blur(8px);
        -webkit-backdrop-filter:blur(8px);
        font-size:14px;
        border-radius:15px;
        box-shadow:0 2px 8px rgba(0,0,0,.25)
    }  
    
    
    #map{
        height:650px;
    }    

/* ---------------- 헤더 ---------------- */

.track-info-header{
    padding:14px 16px;
    background:#6ccf73;
    color:#fff;
    border-radius:15px 15px 0 0;
    font-size:18px;
    font-weight:700;
    text-align:center;
}

/* ---------------- 내용 ---------------- */

.track-info-content{

    padding:8px 0;

    background:rgba(255,255,255,.15);

    border-radius:0 0 15px 15px;

}

.track-info-row{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:10px 16px;

    border-bottom:1px solid rgba(0,0,0,.08);

}

.track-info-row:last-child{

    border-bottom:none;

}

.track-label{

    color:#555;

    font-weight:600;

}

.track-value{

    color:#222;

    font-weight:700;

}




/* ===========================================================
   사진 뷰어
=========================================================== */

    #photoViewerModal .modal-dialog{
        width:auto;
        max-width:95vw;
        margin:0 auto;
    }

    #photoViewerModal .modal-content{
        display:flex;
        justify-content:center;
        align-items:center;
        background:transparent;
        border:none;
        box-shadow:none;
    }

    .photo-viewer{
        position:relative;
        display:inline-flex;
        justify-content:center;
        align-items:center;
        width:auto;
        height:auto;
    }

    #photoViewerModal .modal-body{
        display:flex;
        justify-content:center;
        align-items:center;
        width:90vw;
        overflow:hidden;
    }

    #photoViewerImage{
        display:block;
        width:auto;
        height:auto;
        max-width:100%;
        max-height:100%;
        object-fit:contain;
    }

/* ===========================================================
   버튼
=========================================================== */    
    
    .btn-app {

        min-width:110px;
        height:42px;
        padding:0 22px;
        gap:4px;
        font-size:15px;
        font-weight:600;
    }

/* ==========================================
   Login 
========================================== */



    .login-box{
        width:360px;
        padding:30px;
    }


    .login-logo img{

        width:100px;

    }

    .login-title{
        font-size:40px;
    }


    .login-subtitle{

        font-size:15px;

        margin-bottom:10px;

    }

    .login-divider{

        margin:20px 0;

    }

    .login-input input{

        height:50px;

        font-size:15px;

    }

    .login-btn{

        height:50px;

        font-size:17px;

    }

    .login-footer{

        font-size: 15px;

    }




    /* -------------------------
       산 정보 팝업
    ------------------------- */
    #mountain-popup{

        width:90vw;
        max-width:380px;

        max-height:70vh;
        overflow:auto;
    }
    
        
    .mainpage-layout .card-title{
    padding:14px;
    font-size:18px;
    }
    
    /* --- 정보 한 줄 --- */
    .mainpage-layout .info-row{

        padding:5px 6px;
        font-size:15px;

    }
    /* --- 항목명 / 값 --- */
    .mainpage-layout .info-label{
        padding:5px 15px;
        font-size:15px;
    }

    .mainpage-layout .info-value{
        padding:5px 15px;
        font-size:15px;
    }
    .mainpage-layout .popup-posts-title{
        padding:5px 15px;        
        font-size:15px;
    }
    /* --- 팝업 닫기 --- */
    .mainpage-layout .popup-close{
        font-size:15px;
    }
    /* --- 팝업 버튼 사이즈 --- */
    .mainpage-layout .btn-trail{

        height:48px;
        font-size:15px;
    } 
    .popup-more-btn{
        height:48px;
        font-size:15px;
    }  
 /* -------------------------
    겔러리 다운로드 버튼
------------------------- */
    .gallery-actions .btn{
        height:35px;
        padding:0 15px;
        font-size:14px;
    }   

    .download-count{
        font-size:14px;

    }
    
}