@charset "utf-8";

@media only screen and (max-width:1400px){
    .paycheckViewBox{flex-direction: column;}
    .thumbnail{width:100%}
    .thumbnailTxt{padding:40px 40px; width:100%}
    .statementTable{ overflow-x:auto;}
#editableTable { min-width:1515px; }
}

/********************
// tablet 분기점
********************/
@media only screen and (max-width: 1200px) {
    html{background: linear-gradient(to bottom, #174591, #26272B);  min-height: 100vh;}
    section{margin-left:0;}
    .inner{width:90dvw; margin: 0 auto}
    .small_inner{width:calc(100dvw - 120px); margin:0 auto;}
    /** 로그인 **/
    .custom_checkbox .checkbox_icon {width: 14px;height: 14px;}
    .custom_checkbox input[type="checkbox"]:checked + .checkbox_icon::after {width: 7px;height: 7px;}
    /** 메인 **/
    .mainBannerBg{background:url('/img/missionBanner_m.jpg'); background-size:cover; background-position:center;}
    .mainBannerBg p, .mainBannerBg span{color:#fff; font-weight:500}
    .mainBannerBgImg{background:#26272B;}
    .mainReturnBox1{width:100%; border-radius: 8px 8px 0 0;}
    .mainReturnBox2_1{background:#174591; width:50%;}
    .mainReturnBox2_1 p {color:#fff;}
    .mainReturnBox2_2{width:50%}
    .mainProfitLink{display:grid;grid-template-columns: repeat(1 ,1fr);}
    .mobileMainLink{border-radius: 0 0 8px 8px;}
    .mainLinkList{display:grid;grid-template-columns: repeat(1, 1fr);}
    /** 계산기 **/
    .calculationTIt p{color:#fff;}
    .slider-container {height:60px;}
    .icon-item{height:60px; margin-right:16px; flex:0 0 45px;}
    .icon-item img{width:65px;}
    .calculationCard{border:none; background: linear-gradient(to bottom right, rgba(247, 248, 248, 0), rgba(247, 248, 248, 0.25)); box-shadow: inset 1px 1px 1px rgba(255, 255, 255, 0.25),        0 0 8px rgba(0, 0, 0, 0.1);}
    .calculationCard p{ color:#fff;}
    .radio-group input[type="radio"] {  width: 14px;    height: 14px; }
    .radio-group input[type="radio"]:checked {    border-color: #fff;  }
    .radio-group input[type="radio"]:checked::before {    content: '';    width: 6px;    height: 6px;    background-color: #fff;    border-radius: 50%;    position: absolute;    top: 50%;    left: 50%;    transform: translate(-50%, -50%); }
    .calculationCard label{color:#fff;}
    /** ai글쓰기 **/
    .aiwrite p{color:#fff;}
    .modal-content{background:#EEEEF0}
    .modal-close-btn{color:#26272B;}
    .modalList p{color:#26272B;}
    .modalItem{grid-template-columns: repeat(3, 1fr);}
    .modal-btnBtn{position:fixed; bottom:14svh; left:0; background: rgba(255, 255, 255, 0.4);   backdrop-filter: blur(12px);  -webkit-backdrop-filter: blur(12px); }
    .aiTxt{color:#26272B}
    /** 시이오 플로그램 **/
    .ceoprogram_slider_container {        /* 양 옆이 흐릿해지는 그라데이션 마스크 효과 */        -webkit-mask-image: linear-gradient(to right, transparent, black 0%, black 80%, transparent);        mask-image: linear-gradient(to right, transparent, black 20%, black 80%, transparent);    }
    .ceoprogram_slide_item {  opacity: 1 !important;   width: 33vw;       margin: 0 2vw;    }
    .ceoprogramLinkBox{ grid-template-columns: repeat(1, 1fr);}
    .ceoprogramLinkBox a{background:#fff;}
    .ceoprogramLinkBox p{color:#26272B}
    /** 맴버쉽결제 **/
    .membershipBox{margin-top:-20px;}
    .backImg{z-index: -1;}
    .membershipTit{border:none;}

    /** 디비 **/
    .whiteFont{color:#fff;}
    .mobileTit{color:#fff; opacity:0.4 ;}
    .date-range-wrapper{background:rgba(255, 255, 255, 0.1)}
    .search-input{background:none; border:none; border-radius: 0; border-bottom:1px solid #fff;}
    .search-input::placeholder{color:#fff;}
    .dbList{ grid-template-columns: repeat(1, 1fr);}
    .contactList select{background:transparent !important}

    /** 엑셀다운로드 **/
    .excelBtn{margin-top:-20px; }

    /** 구성원관리 **/
    .status-table th { line-height: 100%; padding: 10px 12px; font-size:12px; font-weight:700}
    .status-table td { line-height: 100%; padding: 12px 16px; font-size:14px; font-weight:400; background:#fff;}

    /** 영업자관리 **/
    .businessFixBox{grid-template-columns: repeat(1, 1fr); }
    .tab-btn{background:rgba(255, 255, 255, 0.2)}



    /** 페이징 **/
    /* 페이지네이션 스타일 */
    .pagination {margin-top: 16px;}
    .pagination a {padding: 0px; width:24px; height:24px; display:flex; align-items:center; justify-content: center; font-size: 14px; border-radius: 2px;;}
    .pagination a.active {background:#144FB9; color: #fff;}
    .pagination a:hover:not(.active) {color: #000;}

    /** 영업자추가 **/
    .addMemberBox{margin-top:-20px}

    /** 제휴사 관리 **/
    .partnerList{grid-template-columns: repeat(1, 1fr); margin-top:-20px;}

    /** 명세서 **/
    .statement_tabs{background:none;}
    .statement_tab_btn{background:rgba(255, 255, 255, 0.2)}
    .statement_tab_btn{color:#fff;}
    .statement_month_selector {display:grid; grid-template-columns: repeat(6, 1fr);}
    .statement_month_btn{width:auto; height:auto; aspect-ratio: 1 / 1; background:rgba(255, 255, 255, 0.2); border:none; color:#fff; }
    .statementList{grid-template-columns: repeat(1, 1fr);}
    .date_input{background: none; border:none; border-bottom:1px solid #fff; border-radius: 0; color:#fff;}
    .statement_table thead th:first-child,    .statement_table tbody td:first-child {     display: none;    }
    
    /** 단골 **/
    .regular_table thead th:first-child, .regular_table tbody td:first-child{     display: none;    }
    
    /** 교육영상 **/
    .studyList{grid-template-columns: repeat(1, 1fr);}
    .contentsStudyList{grid-template-columns: repeat(2, 1fr);}
    .tabHidden{display:none;}
    .chapter-container {  max-width: 1400px;  }
    .videoImg{ filter: invert(1);}

    .text-ellipsis {        display: block; /* 또는 inline-block */        white-space: nowrap;        overflow: hidden;        text-overflow: ellipsis;      }

    /** 영업스토리 **/
    .storyList{grid-template-columns: repeat(1, 1fr);}
    .storyTag p{background:#132B58; color:#fff;}
    .storyViewTxt {border:none;}

    /** 판촉물 **/
    .promotionBox{grid-template-columns: repeat(1, 1fr);}
    .imgView{bottom:12px; right:8px;}
    .promotion_tab{background:rgba(255, 255, 255, 0.2); border:none; color:#fff;}
    .promotion_tab.active{border:none;}
    .poromotionImg {object-fit: cover;}
    .promotionMobileBtn{bottom:100px;}
    .promotion_tab_content{border-radius: 0 0 0 0;}
    .flyer_filters {flex-wrap: nowrap;  border-radius:0px; overflow-x: auto; -webkit-overflow-scrolling: touch;}
    .flyer_filters::-webkit-scrollbar {display: none; }
    .promotionBoxList{flex:1; min-width: 0; align-items: flex-start; }


    /* 판촉물 신청 결제창 모달 스타일 */
    .promotionBoxPay {    position: fixed;    top: 100%; /* 화면 아래쪽으로 위치 */    left: 0;    width: 100%;    height: 100dvh;     background-color: #fff;    z-index: 2000;     transition: top 0.5s ease-in-out;    overflow-y: auto;    padding-bottom: 50px;     box-sizing: border-box;}
    .promotionBoxPay.show {    top: 0; }
    .pay-modal-close-btn {    position: absolute;    top: 15px;    right: 20px;    font-size: 40px;    font-weight: 300;    color: #000;    background: none;    border: none;    cursor: pointer;    line-height: 1;    padding: 0;    z-index: 2010;}
    body.modal-open {    overflow: hidden;}
    .pay-modal-close-btn {    display: block;  }
    .m_modalBtn{bottom:110px;}

    /** paycheck **/
    .contentPayBox hr{border:1px solid #fefefe;}
    .list_Object{ grid-template-columns: repeat(2, 1fr); /* 한 줄에 4개 */ }

    /********************
    ** 디비뷰 추가본
    ********************/
    .c-modal-content { max-height:80svh; overflow-y:auto}
    
  

}    

/********************
// 모바일 분기점
********************/
@media only screen and (max-width: 768px) {     
    .small_inner{width:calc(100dvw - 40px); margin:0 auto;}
    .dbInfo p.wmbp12{max-width:120px; text-overflow: ellipsis; overflow: hidden; white-space: nowrap;}
    .dbImg{min-width:40px; max-width:40px}
    .mainBannerBg{background:url('/img/missionBanner_m.jpg'); background-size:cover; background-position:center;}

    /** paycheckView **/
    .thumbnailTxtBox{ grid-template-columns: repeat(1, 1fr); gap:8px; /* 한 줄에 1개 */ }
    .calculatorBox{ grid-template-columns: repeat(1, 1fr);  /* 한 줄에 1개 */ }
    .countBox{ grid-template-columns: repeat(1, 1fr); gap:12px; /* 한 줄에 1개 */ }
    .flyer_filter_btn{padding:8px 12px; font-size:12px; }
    .flyer_filters{padding:12px; gap:6px;}
    .promotion_tab_content.active { display: grid; grid-template-columns: repeat(2, 1fr); gap:8px;  }

    .chart-container {   height: 400px;}
    .makeTxt{max-height: 200px;}



        
    /********************
    ** 하위조직관리
    ********************/
    .subsystem_org_group::before {    content: '';    position: absolute;    top: 0;    bottom: 0;    left: 0;    width: 1px;    background-color: #ccc;}
    .subsystem_org_chart li::before{    content: '';    position: absolute;    top: 21px;  left: -21px;    width: 21px;    height: 1px;    background-color: #ccc;}
    .subsystem_org_item::before {    content: '';    position: absolute;    top: 21px;     left: -30px;     width: 30px;    height: 1px;    background-color: #ccc;}
    .subsystem_org_chart li:last-child::after,
    .subsystem_org_item:last-child::after {    content: '';    position: absolute;    top: 22px;    bottom: 0;    left: -21px;     width: 15px;    background-color: #f8f9fa; }
    .subsystem_org_chart > ul > li:first-child::before {    top: 21px; left:84px;}
    .subsystem_org_chart > ul > li:first-child ul::before {    top: 21px;}

    .member_org_group::before {     content: '';     position: absolute;     top: 0;     bottom: 0;     left: 0;     width: 1px;     background-color: #D9DADE; }
    .member_org_item::before {     content: '';     position: absolute;     top: 21px;          left: -21px;       width: 21px;     height: 1px;     background-color: #D9DADE;}
    .member_node.wpR::after {    content: '';    position: absolute;    top: 20px;      left: 100%;       width: 28px;      height: 1px;    background-color: #D9DADE;}
    .member_org_item:last-child::after {     content: '';     position: absolute;     top: 22px;          bottom: 0;     left:-21px ;        width: 15px;     background-color: #f8f9fa; }
    .member_org_item > .member_org_group::before {    top: 21px; }
    
    .subsystem_search_button img{ filter: invert(1)}
    .subsystem_search_container{border-right:none; border-left:none; border-top:none;}
    
    
    .subsystem_modal.show {    display: flex;  }
    .subsystem_modalBox{overflow-y: scroll; background:#EEEEF0;}
    .subsystem_Txt{color:#26272B}


    /********************
    ** 디비뷰 추가본
    ********************/
    .c-modal-content {   border-radius: 8px;    padding:40px 24px 24px 24px; }
    .c-modal-close { font-size: 32px;}
    .custom-modal-tableBox{max-height: 200px; overflow-y: auto; }
}