@charset "utf-8";
body{
    min-width: 320px;
}

header.header{
    position: fixed;
}

.modalInner{
    max-width: calc(100% - (var(--container-gutter) * 2));
}

.mo,.tb{display: none;}

@media screen and (max-width: 1439px){
    .gnbW{
        width: auto;
        margin-left: 50px;
    }
    .headerRight{
        margin-left: auto;
    }

    .formRow4{
        flex: 1 1 100%;
        max-width: 100%;
        width: 100%;
    }
    .formRow8{
        flex: 1 1 100%;
        max-width: 100%;
        width: 100%;
    }
    .formRow6{
        flex: 1 1 100%;
        max-width: 100%;
        width: 100%;
    }
    .period{
        max-width: 440px;
    }
    .formRow:not(:has(.formRowContents)){
        display: none;
    }
}
@media screen and (max-width: 1200px){
    :root{
        --header-body: 50px;
        --header-height: 50px;

        --logo-width: 150px;   /* 로고도 같이 축소 */
        --logo-height: 30px;
    }
    .tb{display: block;}
    .sp{display: none !important;}

    .gnbW{
        /* display: none; */
        width: auto;
    flex: 1;
    margin-left: 16px;
    overflow-x: auto;
    }

    .gnbLink{
        font-size: 14px;
        height: 50px;        
        width: auto;
        /* min-width: 80px; */
        padding: 0 8px;
        white-space: nowrap;
    }
    .headerRight{
        gap: 0 8px;
    }
    .userInfo>p{
        font-size: 12px;
    }
    .headerRight>.btn{
        --btn-height-lg: 32px;
        font-size: 13px;
        padding: 0 10px;
    }
  
    .userInfo{
        flex-direction: column;
    }
    .tablePrimary.responsive{
        border-top: 1px solid var(--grey-darken4);
    }
    .tablePrimary.responsive caption,
    .tablePrimary.responsive colgroup,
    .tablePrimary.responsive thead{
        display: none;
    }
    .tablePrimary.responsive,    
    .tablePrimary.responsive tbody,    
    .tablePrimary.responsive tr{
        display: block;
        width: 100%;
    }    
    .tablePrimary.responsive tr{
        border-bottom: 1px solid var(--grey-darken4);
    }
    .tablePrimary.responsive td{
        display: flex;
        align-items: center;
        text-align: left;
        min-height: 48px;
        height: auto;
        padding: 10px 16px 10px 164px;
        position: relative;
    }
    .tablePrimary.responsive td + td{
        border-top: 1px solid var(--border-color);
    }
    .tablePrimary.responsive td::before{
        position: absolute;
        box-sizing: border-box;
        left: 0;
        top: 0;
        height: 100%;
        width: 148px;
        font-size: var(--txt-font-size-sm);
        font-weight: 700;
        background-color: var(--primary-lighten5);
        color: var(--grey-darken4);
        padding: 0 16px;
        display: flex;
        align-items: center;
    }
    .tablePrimary.responsive.userState tr>td:nth-child(1)::before{
        content: "NO";
    }
    .tablePrimary.responsive.userState tr>td:nth-child(2)::before{
        content: "거래일자";
    }
    .tablePrimary.responsive.userState tr>td:nth-child(3)::before{
        content: "실적유형";
    }
    .tablePrimary.responsive.userState tr>td:nth-child(4)::before{
        content: "판매방식";
    }
    .tablePrimary.responsive.userState tr>td:nth-child(5)::before{
        content: "거래처";
    }
    .tablePrimary.responsive.userState tr>td:nth-child(6)::before{
        content: "도매시장이용여부";
    }
    .tablePrimary.responsive.userState tr>td:nth-child(7)::before{
        content: "어종";
    }
    .tablePrimary.responsive.userState tr>td:nth-child(8)::before{
        content: "물량(kg)";
    }
    .tablePrimary.responsive.userState tr>td:nth-child(9)::before{
        content: "금액(원)";
    }
    .tablePrimary.responsive.userState tr>td:nth-child(10)::before{
        content: "검수상태";
    }
    .tablePrimary.responsive.userState tr>td:nth-child(11)::before{
        content: "수정/삭제";
    }


    /*관리자 실적조회 테이블*/
    .tablePrimary.responsive tr>td:nth-child(1)::before{
        content: "NO";
    }
    .tablePrimary.responsive tr>td:nth-child(2)::before{
        content: "거래일자";
    }
    .tablePrimary.responsive tr>td:nth-child(3)::before{
        content: "실적유형";
    }
    .tablePrimary.responsive tr>td:nth-child(4)::before{
        content: "구분분";
    }
    .tablePrimary.responsive tr>td:nth-child(5)::before{
        content: "수협정보";
    }
    .tablePrimary.responsive tr>td:nth-child(6)::before{
        content: "상호명";
    }
    .tablePrimary.responsive tr>td:nth-child(7)::before{
        content: "대표자";
    }
    .tablePrimary.responsive tr>td:nth-child(8)::before{
        content: "등록자";
    }
    .tablePrimary.responsive tr>td:nth-child(9)::before{
        content: "거래처";
    }
    .tablePrimary.responsive tr>td:nth-child(10)::before{
        content: "방식";
    }
    .tablePrimary.responsive tr>td:nth-child(11)::before{
        content: "이용여부";
    }
    .tablePrimary.responsive tr>td:nth-child(12)::before{
        content: "물량(Kg)";
    }
    .tablePrimary.responsive tr>td:nth-child(13)::before{
        content: "금액(원)";
    }
    .tablePrimary.responsive tr>td:nth-child(14)::before{
        content: "검수상태";
    }
    .tablePrimary.responsive tr>td:nth-child(15)::before{
        content: "수정/삭제";
    }

    /*관리자 실적조회*/
    .tablePrimary.responsive.adminState tr>td:nth-child(1)::before{
        content: "NO";
    }
    .tablePrimary.responsive.adminState tr>td:nth-child(2)::before{
        content: "거래일자";
    }
    .tablePrimary.responsive.adminState tr>td:nth-child(3)::before{
        content: "구분";
    }
    .tablePrimary.responsive.adminState tr>td:nth-child(4)::before{
        content: "수협정보";
    }
    .tablePrimary.responsive.adminState tr>td:nth-child(5)::before{
        content: "상호명";
    }
    .tablePrimary.responsive.adminState tr>td:nth-child(6)::before{
        content: "어종";
    }
    .tablePrimary.responsive.adminState tr>td:nth-child(7)::before{
        content: "구매합계 물량(kg)";
    }
    .tablePrimary.responsive.adminState tr>td:nth-child(8)::before{
        content: "구매합계 금액(원)";
    }
    .tablePrimary.responsive.adminState tr>td:nth-child(9)::before{
        content: "판매합계 물량(kg)";
    }
    .tablePrimary.responsive.adminState tr>td:nth-child(10)::before{
        content: "판매합계 금액(원)";
    }
    .tablePrimary.responsive.adminState tr>td:nth-child(11)::before{
        content: "방식";
    }
    .tablePrimary.responsive.adminState tr>td:nth-child(12)::before{
        content: "도매시장 이용여부";
    }
    .tablePrimary.responsive.adminState tr>td:nth-child(13)::before{
        content: "거래처";
    }

    .tablePrimary.tableRow caption,
    .tablePrimary.tableRow colgroup,
    .tablePrimary.tableRow thead{
        display: none;
    }
    .tablePrimary.tableRow,    
    .tablePrimary.tableRow tbody{
        display: block;
        width: 100%;
    }   
    .tablePrimary.tableRow tr{
        display: flex;
        flex-wrap: wrap;
        border: 0;
    }
    .tablePrimary.tableRow tr>th{
        display: flex;
        align-items: center;
        width: 148px;
        min-width: 148px;
        padding: 10px 16px;
        height: auto;
        border-bottom: 1px solid var(--border-color);
    }
    .tablePrimary.tableRow tr>td{
        display: block;
        width: calc(100% - 148px);
        max-width: calc(100% - 148px);
        padding: 10px 16px;
        min-height: 48px;
        height: auto;
        border-bottom: 1px solid var(--border-color);
    }
}
@media screen and (max-width: 1023px){
}
@media screen and (max-width: 767px){
    :root{
        --tit-font-size-xs: 16px;
        --tit-font-size-sm: 20px;
        --tit-font-size: 24px;
        --tit-font-size-lg: 32px;
        --tit-font-size-xl: 44px;

        --txt-font-size-xs: 12px;
        --txt-font-size-sm: 13px;
        --txt-font-size: 14px; 
        --txt-font-size-lg: 16px;

        --btn-height-sm: 30px;
        --btn-height: 32px;
        --btn-height-lg: 36px;
        --btn-height-xl: 40px;
        --btn-height-xxl: 48px;
    
        --btn-padding-sm: 0 12px;
        --btn-padding: 0 12px;
        --btn-padding-lg: 0 12px;
    }

    .mo{display: block;}
    .pc{display: none !important;}

    
    .paginationW{
        gap: 2px;
        margin-top: 20px;
    }    

    .pagination{
        max-width: calc(100% - 104px);
        flex-wrap: wrap;
        justify-content: center;
        gap: 2px 0;
    }
    .paginationControl,
    .paginationNum{
        height: 24px;
        min-width: 24px;
        width: 24px;
    }
    .paginationControl{
        background-size: 16px auto;
    }
    
    .modalHead{
        padding: 16px;
    }
    .modalHead .modalCloseBtn{
        right: 12px;
        top: 15px;
    }
    .modalTit{
        padding-right: 32px;
    }
    .modalBody{
        padding: 0 10px;
    }
    .modalBodyInner{
        padding: 0 6px;
    }
    .modalBodyInner::-webkit-scrollbar {
        width: 4px;
    }
    .modalAlert .modalBody{
        text-align: center;
    }
    .modalFoot{
        padding: 16px;
    }
    .modalFootBtnW{
        gap: 8px;
    }
    
    .card{
        padding: 20px 16px;
    }
    .card.sm{
        padding: 20px 16px;
    }
    
    .pageSection + .pageSection{
        margin-top: 30px;
    }
    .pageSection + .pageSection.sm{
        margin-top: 30px;
    }
    
    .customSelect::-webkit-scrollbar {
        width: 4px;
    }

    .pageHeadInner{
        flex-direction: column;
        padding: 30px 0;
    }
    .pageHeadInner>.tit{
        flex: 0 0 auto;
        text-align: center;
    }
    .pageHeadInner:has(.pageHeadRight>.btn.block){
        align-items: center;
    }
    .pageHeadRight{
        margin-top: 16px;
        flex: 0 0 auto;
    }
    .pageHeadRight:has(>.btn.block){
        min-width: 298px;
        width: 298px;
    }

    .stateCardTit{
        margin-bottom: 12px;
    }
    .stateCardCaption{
        margin-top: 8px;
    }

    .filter .bottomBtnW{
        margin-top: 20px;
    }
    .formRowW{
        margin: -8px;
    }
    .formRow{
        padding: 8px;
    }
    .customSelectInputArea{
        padding-right: 20px;
    }
    .customSelectInput{
        height: 36px;
        padding: 0 36px 0 10px;
    }
    .customSelectInputBtn{
        width: 28px;
        height: 28px;
        right: 4px;
    }
    .customSelectInputBtn>.icon{
        width: 20px;
        height: 20px;
    }
    .customSelectInner::-webkit-scrollbar {
        width: 4px;
    }
    .tablePrimary.responsive td{
        padding: 10px 12px 10px 142px;
    }
    .tablePrimary.responsive td::before{
        padding: 0 12px;
        width: 130px;
    }
    .tablePrimary.tableRow tr>th{
        width: 130px;
        min-width: 130px;
        padding: 0 12px;
    }
    .tablePrimary.tableRow tr>td{
        padding: 10px 12px;
        width: calc(100% - 130px);
        max-width: calc(100% - 130px);
    }
    .bottomBtnW.lg{
        margin-top: 30px;
    }
    .loginW{
        max-width: 100%;
    }
    .login{
        margin-top: 20px;
        padding: 20px 16px;
    }
    .loginForm + .loginForm{
        margin-top: 10px;
    }
    .loginForm>strong.required{
        margin-bottom: 4px;
    }
    .loginArea{
        --input-height: 40px;
        --input-padding: 12px;
    }
    .login .bottomBtnW{
        padding-top: 20px;
        margin-top: 20px;
    }
    .listCount>p:not(:last-child)::after{
        height: 12px;
    }
    .countBox{
        flex-wrap: wrap;
        justify-content: space-between;
        gap: 8px;
    }
    .countBox>h3{
        flex: 1 1 100%;
        width: 100%;
    }
    .countBox>strong{
        min-width: 0;
        white-space: nowrap;
    }
}
@media (max-width: 500px){
    .formRow{
        display: block;
    }
    .formRow>strong{
        min-height: 0;
        min-width: 0;
        width: 100%;
        margin-bottom: 4px;
    }
    .formRowContents{
        min-height: 0;
    }
    .formRowContents>.radioW{
        min-height: 0;
    }
    .formRow:has(>strong) .formRowContents{
        max-width: 100%;
    }
    .tablePrimary.tableRow tr>th{
        height: 34px;
        width: 100%;
        min-width: 0;
    }
    .tablePrimary.tableRow tr>td{
        max-width: 100%;
        width: 100%;
        min-height: 0;
    }
}
@media (max-width: 374px){
    :root{        
        --logo-width: 152px;
        --logo-height: 30px;
    }

    .headerRight{
        gap: 0 8px;
    }

    .period{
        flex-wrap: wrap;
        gap: 8px;
    }
    .period>.inputPrimary:first-child{
        min-width: calc(100% - 18px);
    }
    .period>.inputPrimary:last-child{
        min-width: 100%;
    }
    .tablePrimary.responsive td {
        display: block;
        min-height: 0;
        height: auto;
        padding: 44px 12px 10px;
    }
    .tablePrimary.responsive td::before {
        height: 34px;
        width: 100%;
    }
    .tablePrimary.responsive td .btnW:has(.txtBtn){
        justify-content: flex-start;
    }
}