/* ------------------------------------------------------------------------------------------- */
/* Main */
.dMas {    
    width: 100%;
    height: 100%;
}

.dMas_out {
    margin: 10px;
    width: calc(100% - 20px);
    height: 95%;
}

/* ------------------------------------------------------------------------------------------- */
/* Header */
.dMas_head {
    margin: 10px;

    width: calc(100% - 20px);
    height: 50px;

    background-color: var(--color-back-box1);

    border: 1px solid var(--color-bord1);
    border-radius: 5px;
}

.dMas_head_grd1 {
    display: grid;
    grid-template-columns: 
        10px 80px 10px  /* Refresh */
        50px 80px 10px  /* Code */
        10px 10px 30px  /* Fold col 1 */
        10px 10px 30px  /* Fold col 2 */
        10px 10px 30px  /* Fold col 3 */
        80px 50px 50px  /* Cnt */
        80px 10px 0px   /* chk Chart */
        0px  80px 10px  /* Chart */
        100px 30px;     /* Excel */
        ;

    column-gap: 10px;
}

#id_excel_dMas {
    margin-top: 10px;
}


/* ------------------------------------------------------------------------------------------- */
/* Main */
.dMas_main {
    margin: 10px;

    width: calc(100% - 20px);
    height: calc(100% - 20px);

    display: grid;

    /* row-gap: 10px; */

    /* grid-template-rows: 890px 450px; */
    /* grid-template-rows: 420px 425px; */
    grid-template-rows: 1fr 1fr;
}

.dMas_main_grd1 { 
    margin-bottom: 10px;

    /* width: 100%; */

    height: calc(100% - 10px);

    background-color: var(--color-back-box1);

    border: 1px solid var(--color-bord1);
    border-radius: 5px;

    overflow-x: auto; /* 위 아래 모두 있어야 함 */
    overflow-y: auto; /* 위 아래 모두 있어야 함 */
}

.dMas_main_grd2 {
    height: calc(100% - 10px);

    background-color: var(--color-back-box1);

    border: 1px solid var(--color-bord1);
    border-radius: 5px;

    /* display: grid;
    grid-template-rows: 50px 400px; */
}

/* .dMas_main_grd2_head {
    height: 50px;

    display: grid;
    grid-template-columns:
    10px 80px 10px
    40px 80px 40px
    50px
    20px 40px
    ;
} */

.dMas_main_grd2_chart {
    /* height: 425px; */
    height: calc(100% - 10px);
}

.dMas_main_tbl_out {
    margin: 10px;

    width: calc(100% - 20px);
    height: calc(100% - 20px);

    background-color: var(--color-back-box1);

    overflow-x: auto; /* 위 아래 모두 있어야 함 */
    overflow-y: auto; /* 위 아래 모두 있어야 함 */
}

/* .dMas_main_tbl tbody tr td {
    cursor: none;
} */

/* .dMas_main_tbl .con_E {
    cursor: pointer;
} */

/* ---------------------------------------------- */

.dMas_main_tbl thead tr th svg {
    position: absolute;
    
    cursor: pointer;
    fill : var(--color-updown);
    
    width: 10px;
    margin-left: 3px;    

    border: none;
}

.dMas_main_tbl thead tr th .search-input {      
    margin: auto;
    width: 90%;
    font-size: 12px;
    font-weight: 700;

    text-align: left;    
    
    background-color: var(--color-back-search);

    /* padding-left: 14px;     */
    padding-left: 1px;    
    border: none;
    outline: none;
}

.dMas_main_tbl thead tr th input::placeholder {    
    color: var(--color-font-search2);
}

.dMas_main_tbl thead .col_Chk,
.dMas_main_tbl thead .col_No {
    text-align: left;
    padding-left: 5px;
}

.dMas_main_tbl thead .col_YN {
    text-align: center;
}

.dMas_main_tbl thead .sortStr {
    text-align: left;
    padding-left: 7px;
}

.dMas_main_tbl .col_Name {
    width: 150px;
}

.dMas_main_tbl thead tr .col_Chk svg {
    margin-top: 4px;
}

.dMas_main_tbl thead tr .col_Name .search-input,
.dMas_main_tbl thead tr .col_DT .search-input {
    width: 80%;
}

.dMas_main_tbl thead tr .col_Name svg,
.dMas_main_tbl thead tr .col_DT svg {
    margin-top: 7px;
}

.dMas_main_tbl tbody .col_Dept {
    font-size: 9px;
    padding-left: 5px;
}

/* ------------------------------------------------------------------------------------------- */
#id_spn_dMas_exg01 {
    text-align: right;
}

.dMas_main_tbl tbody .col_080 {
    text-align: center;
}

.dMas_main_tbl tbody .col_No {
    font-size: 12px;
    font-weight: 700;
}

.dMas_main_tbl tbody .col_DT {
    font-size: 12px;
    font-weight: 700;
}

.dMas_main_tbl tbody .col_Cha {
    font-size: 11px;
    font-weight: 700;
}

.dMas_main_tbl tbody .col_PM {
    font-size: 11px;
    font-weight: 700;
}

.dMas_main_tbl tbody .col_Numbs {
    font-size: 11px;
    font-weight: 600;
}


/* ------------------------------------------------------------------------------------------- */
.dMas_main_tbl tbody .col_blue {
    color: var(--color-blue1);
}

.dMas_main_tbl tbody .col_yellow {
    color: var(--color-yellow1);
}

.dMas_main_tbl tbody .col_red {
    color: var(--color-red3);
}

.dMas_main_tbl tbody .col_purple {
    color: var(--color-purple2);
}

.dMas_main_tbl tbody .col_purple3 {
    color: var(--color-purple3);
}

.dMas_main_tbl tbody .col_white2 {
    color: var(--color-white2);
}

.dMas_main_tbl tbody .col_pink {
    color: var(--color-pink1);
}

.dMas_main_tbl tbody .col_blue1 {
    color: var(--color-blue1);
}

.dMas_main_tbl tbody .col_blue2 {
    color: var(--color-blue2);
}

.dMas_main_tbl tbody .col_blue3 {
    color: var(--color-blue3);
}

.dMas_main_tbl tbody .col_red1 {
    color: var(--color-red1);
}

.dMas_main_tbl tbody .col_red2 {
    color: var(--color-red3);
}

.dMas_main_tbl tbody .col_red3 {
    color: var(--color-red2);
}
/* ------------------------------------------------------------------------------------------- */

.tMas_main_tbl tbody .col_Costs {
    font-size: 10px;
    color: var(--color-gray1);
}

#id_spn_dMas_cnt02 {
    text-align: right;
}

#id_spn_dMas_cnt02 {
    text-align: left;
}

#id_txt_dMas_01 {
    margin-top: 12px;
    height: 25px;

    font-size: 13px;
    font-weight: 700;
    text-align: center;
}

/* ------------------------------------------------------------------------------------------- */
/* 1. 툴팁 전체 컨테이너 조절 */
.apexcharts-tooltip {
    display: flex !important;
    flex-direction: column;
    width: 160px;
    height: 220px;
    /* min-width: 180px !important; */
    /* max-height: none !important; */
    padding: 0 !important;      /* 내부 여백 초기화 후 아래에서 재설정 */
    background: #333333 !important;
    border: 1px solid #555 !important;
    box-shadow: none !important;
}

/* 2. 각 데이터 줄(Row)의 높이 축소 및 정렬 */
.apexcharts-tooltip-series-group {
    padding: 2px 8px !important; /* 위아래 2px로 높이 최소화, 좌우 8px로 폭 확보 */
    display: flex !important;
    align-items: center !important; /* 마커와 글자 높이 정렬 핵심! */
    justify-content: flex-start !important;
    min-height: 18px !important; /* 줄 간격 높이 고정 */
}

/* 3. 마커(색상 점) 위치 교정 */
.apexcharts-tooltip-marker {
    width: 8px !important;
    height: 8px !important;
    position: relative !important;
    top: -7px !important; /* 강제 위치 수정 제거 */
    margin-right: 10px !important;
    flex-shrink: 0; /* 마커가 찌그러지지 않게 */
}

/* 4. 텍스트 선명도 및 가로 배치 최적화 */
.apexcharts-tooltip-text {    
    font-size: 11px !important;
    display: flex !important;
    width: 100%; /* 전체 폭 활용 */
    justify-content: space-between; /* 이름은 왼쪽, 값은 오른쪽 정렬 (선택사항) */
}

.apexcharts-tooltip-y-group {
    padding: 0 !important;
}

/* 5. 상단 날짜(Title) 영역 높이 축소 */
.apexcharts-tooltip-title {
    margin-bottom: 0 !important;
    padding: 3px 8px !important;
    font-size: 12px !important;
    background: #444 !important;
}
/* ------------------------------------------------------------------------------------------- */
.dMas_main_tbl th:first-child { 
    position: sticky; 
    left: 0px;
    background-color: var(--color-back-tbl2);
    /* z-index: 2; */
}

.dMas_main_tbl td:first-child { 
    position: sticky; 
    left: 0px;
    background-color: var(--color-back-tbl1);
    /* z-index: 2; */
}

.dMas_main_tbl th:nth-child(2) { 
    position: sticky; 
    left: 35px;
    background-color: var(--color-back-tbl2);
    /* z-index: 2; */
}

.dMas_main_tbl td:nth-child(2) { 
    position: sticky; 
    left: 35px;
    background-color: var(--color-back-tbl1);
    /* z-index: 2; */
}

.dMas_main_tbl th:nth-child(3) { 
    position: sticky; 
    left: 80px;
    background-color: var(--color-back-tbl2);
    /* z-index: 2; */
}

.dMas_main_tbl td:nth-child(3) { 
    position: sticky; 
    left: 80px;
    background-color: var(--color-back-tbl1);
    /* z-index: 2; */
}

.dMas_main_tbl th:nth-child(4) { 
    position: sticky; 
    left: 160px;
    background-color: var(--color-back-tbl3);
    /* z-index: 2; */
}

.dMas_main_tbl td:nth-child(4) { 
    position: sticky; 
    left: 160px;
    background-color: var(--color-back-tbl3);
    /* z-index: 2; */
}




.dMas_main_tbl th:nth-child(5) { 
    position: sticky; 
    left: 167px;
    background-color: var(--color-back-tbl2);
}

.dMas_main_tbl td:nth-child(5) { 
    position: sticky; 
    left: 167px;
    background-color: var(--color-back-tbl1);
}

.dMas_main_tbl th:nth-child(6) { 
    position: sticky; 
    left: 202px;
    background-color: var(--color-back-tbl2);
}

.dMas_main_tbl td:nth-child(6) { 
    position: sticky; 
    left: 202px;
    background-color: var(--color-back-tbl1);
}

.dMas_main_tbl th:nth-child(7) { 
    position: sticky; 
    left: 237px;
    background-color: var(--color-back-tbl2);
}

.dMas_main_tbl td:nth-child(7) { 
    position: sticky; 
    left: 237px;
    background-color: var(--color-back-tbl1);
}

.dMas_main_tbl th:nth-child(8) { 
    position: sticky; 
    left: 272px;
    background-color: var(--color-back-tbl2);
}

.dMas_main_tbl td:nth-child(8) { 
    position: sticky; 
    left: 272px;
    background-color: var(--color-back-tbl1);
}




.dMas_main_tbl th:nth-child(9) { 
    position: sticky; 
    left: 307px;
    background-color: var(--color-back-tbl3);
}

.dMas_main_tbl td:nth-child(9) { 
    position: sticky; 
    left: 307Px;
    background-color: var(--color-back-tbl3);
}

.dMas_main_tbl th:nth-child(10) { 
    position: sticky; 
    left: 314px;
    background-color: var(--color-back-tbl2);
}

.dMas_main_tbl td:nth-child(10) { 
    position: sticky; 
    left: 314px;
    background-color: var(--color-back-tbl1);
}

.dMas_main_tbl th:nth-child(11) { 
    position: sticky; 
    left: 349px;
    background-color: var(--color-back-tbl2);
}

.dMas_main_tbl td:nth-child(11) { 
    position: sticky; 
    left: 349px;
    background-color: var(--color-back-tbl1);
}

.dMas_main_tbl th:nth-child(12) { 
    position: sticky;
    left: 384px;
    background-color: var(--color-back-tbl2);
}

.dMas_main_tbl td:nth-child(12) { 
    position: sticky;
    left: 384px;
    background-color: var(--color-back-tbl1);
}

.dMas_main_tbl th:nth-child(13) { 
    position: sticky;    
    left: 419px;
    background-color: var(--color-back-tbl3);
}

.dMas_main_tbl td:nth-child(13) { 
    position: sticky;    
    left: 419px;
    background-color: var(--color-back-tbl3);
}





/* .dMas_main_tbl th {
    z-index: 3;
}

.dMas_main_tbl td {
    z-index: 3;
} */
/* ------------------------------------------------------------------------------------------- */