.manager {display: flex; width: 100%;}
.manager main {padding: 2.5rem 0 5rem 0; width: 100%; }
.manager main h2 {position: relative; z-index: 1; font-size: 1.875rem; font-weight: 700; line-height: 138%; padding: 0.75rem 0; color: var(--color-bl1); } 

.mangerTitle {width: 100%; display: flex; gap: 0.875rem; align-items: center; padding-bottom: 1.5rem;} 

.managerSection div[data-step="1"] .step > b::after {content: '인증대기'; }
.managerSection div[data-step="2"] .step > b::after {content: '수강대기'; }
.managerSection div[data-step="3"] .step > b::after {content: '수강중'; }
.managerSection div[data-step="4"] .step > b::after {content: '수료대기'; }
.managerSection div[data-step="5"] .step > b::after {content: '수료완료'; }
.managerSection div[data-step="-5"] .step > b::after {content: '미수료'; }
.managerSection div[data-step="-1"] .step > b::after {content: '취소상태'; }
.managerSection div[data-step="-2"] .step > b::after {content: '수강중지'; }

.managerSection div .step::after {display: none;}

.managerSection div[data-type="3"] .type::after,
.managerSection div[data-type="zoom"] .type::after {content: '비대면 ZOOM교육'; color: var(--data-type3); }
.managerSection div[data-type="1"] .type::after,
.managerSection div[data-type="online"] .type::after {content: '온라인교육'; color: var(--data-type1); }
.managerSection div[data-type="4"] .type::after,
.managerSection div[data-type="book"] .type::after {content: '우편교육'; color: var(--data-type4); }
.managerSection div[data-join="ok"] .join::after {content: 'Y'; color: var(--color-blue); font-weight: 800;}
.managerSection div[data-join="no"] .join::after {content: 'N'; color: var(--color-gy3); opacity: 0.6;  font-weight: 800;}

.manager select {  width: 100%; max-width: 8rem; height: 2.5rem; font-size: 0.875rem; padding: 0 0.875rem;  color: var(--color-bl1); border: 1px solid #e4e7e9;  border-radius: 0.25rem; font-weight: 600; }
.manager button {font-size: 0.875rem; padding: 0.75rem 1rem; border-radius: 0.25rem;}
.manager button.off { background: #F8F9FC; color:#9da4b7; font-weight: 500;}
.manager button.on { background: var(--color-primary-1-dk); color: var(--color-white); font-weight: 500;}

.sortingCon {display: flex; align-items: flex-end; padding: 1rem 0;}
.sortingCon .sortingL { flex: 1; display: flex; gap: 0.375rem 0;}
#mobRadioSelect {display: none;}
.sortingCon .sortingL > div {display: flex; gap: 0.375rem;}
.sortingCon .sortingL {display: flex; gap: 0.375rem; align-items: center;}
.sortingCon .sortingL {min-width: 5rem; font-weight: 700; color: var(--color-bl1);}

.stepSelectWrap  {position: relative; display: flex; justify-content: center; align-items: center; border: 1px solid var(--color-line-w); border-radius: 0.375rem; height: 2.625rem; gap:0.375rem; }


#yearSelect { border: 1px solid #ddd; border-radius: 0.375rem; position: relative;}
#yearSelectBtn  {font-weight: 500; min-width: 8.125rem; color: var(--color-gy1); display: inline-flex; align-items: center; justify-content: space-between; padding: 0.675rem 1rem;}
#yearSelectBtn > span {font-size: 1rem; font-weight: 700; color: var(--color-bl1);}
#yearSelectBtn > i {display: inline-flex; font-size: 0.625rem; width: 1.25rem; height:  1.25rem;  border-radius: 50%;  position: relative;  transition: 0.3s;}
#yearSelectBtn > i::before {content: '\f078'; font: var(--fa-font-solid);  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);  transition: 0.3s; color: #676767;}
#yearSelectBtn:hover > i,
.has #yearSelectBtn > i {background: #F8F9FC; }
.has #yearSelectBtn > i::before {transform: translate(-50%, -50%) rotate(180deg); color: #121212; }

#yearSelect .yearsStepOpList {position: absolute; display: flex; z-index: 1001; flex-direction: column; background: var(--color-white); border-radius: 0.625rem ; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); bottom: 0; right: 0; transform: translateY(100%); min-width: 8.125rem; padding:0; overflow: hidden;  opacity: 0; visibility: hidden; transition: all 0.4s ease;}
#yearSelect .yearsStepOpList > button { all:unset; cursor: pointer; padding: 0.87rem 1rem; border-bottom: 1px solid var(--color-line-w); font-weight: 500; font-size: 0.9375rem; color: var(--color-gy2);}
#yearSelect .yearsStepOpList > button:last-of-type {border-bottom: 0;}
#yearSelect .yearsStepOpList > button:hover {background: var(--color-bg-1); color: var(--color-primary-1);}
#yearSelect.has .yearsStepOpList { opacity: 1; visibility: visible; transform: translateY(102%);}

#stStepOpBtn  {font-weight: 500; min-width: 8.125rem; color: var(--color-gy1); display: inline-flex; align-items: center; justify-content: space-between;  }
#stStepOpBtn > span {font-size: 0.875rem; font-weight: 700; color: var(--color-gy1);}
#stStepOpBtn > span::before { content: '✓'; font-size: 0.875rem; width: 1.125rem; color: var(--color-gy3); height: 1.125rem; display: inline-flex;    justify-content: center; align-items: center; border: 1px solid #ddd;  border-radius: 50%; margin-right: 0.375rem;}

#mobRadioSelect.update > span,
#stStepOpBtn.update > span {color: var(--color-primary-1);}
#mobRadioSelect.update > span::before,
#stStepOpBtn.update > span::before {background: var(--color-primary-1); color: var(--color-white); }

#stStepOpBtn > i {display: inline-flex; font-size: 0.625rem; width: 1.25rem; height:  1.25rem;  border-radius: 50%;  position: relative;  transition: 0.3s;}
#stStepOpBtn > i::before {content: '\f078'; font: var(--fa-font-solid);  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);  transition: 0.3s; color: #676767;}
#stStepOpBtn:hover > i,
.has #stStepOpBtn > i {background: #F8F9FC; }
.has #stStepOpBtn > i::before {transform: translate(-50%, -50%) rotate(180deg); color: #121212; }

.sortingR {display: flex; gap: 0.25rem;}
#viewMemberMenu > span {display: flex; justify-content: center; align-items: center; background: #f1f1f1; border: 1px solid var(--color-line-w); width: 2.125rem; height: 2.125rem; border-radius: 50%; font-size: 0.8125rem; font-weight: 700; color: #5f5f5f;  transition: 0.3s; display: none;}

.stepSelectWrap .stStepOpList {position: absolute; display: flex; z-index: 1001; flex-direction: column; background: var(--color-white); border-radius: 0.625rem ; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); bottom: 0; right: 0; transform: translateY(100%); min-width: 8.125rem; padding: 1rem; overflow: hidden;  opacity: 0; visibility: hidden; transition: all 0.4s ease; gap: 0.875rem;}
.stepSelectWrap .stStepOpList > input[type="radio"] {display: none;}
.stepSelectWrap .stStepOpList label {cursor: pointer; font-weight: 500; font-size: 0.875rem;}
.stepSelectWrap .stStepOpList label::before {content: '✓'; font-size: 0.875rem; width: 1.125rem; color: var(--color-gy3); height: 1.125rem; display: inline-flex; justify-content: center; align-items: center; border: 1px solid #ddd; border-radius: 50%;}
.stepSelectWrap .stStepOpList > input[type="radio"]:checked + label {color: var(--color-primary-1); font-weight: 500;}
.stepSelectWrap .stStepOpList > input[type="radio"]:checked + label::before { background: var(--color-primary-1); color: var(--color-white);}
.stepSelectWrap.has .stStepOpList { opacity: 1; visibility: visible; transform: translateY(102%);}

.tableWrap {width: 100%; display: grid; grid-template-columns: 8rem 9rem 10rem auto auto auto auto auto 10rem 7rem;}
.tableWrap.sorting .row.td { display: none; }
.tableWrap.sorting .row.td.on { display: contents; }

.tableWrap .row {display: contents;}
.tableWrap .row > span {border-bottom: 1px solid var(--color-line-w); color: var(--color-gy1); padding: 0.875rem 1.25rem; font-size: 0.875rem; text-align: center; font-weight: 500; display: flex; align-items: center;  align-content: center; justify-content: center;}
.tableWrap .row.noList > span {grid-column: 1/10 span; padding: 1.5rem 0; font-size: 1rem;}
.tableWrap .row.th > span {background: #F8F9FC; border-bottom: 0; color:#9da4b7; font-weight: 600;} 
.tableWrap .row.th > span:first-of-type {border-radius: 0.375rem 0 0 0.375rem ;}
.tableWrap .row.th > span:last-of-type {border-radius: 0 0.375rem 0.375rem 0;}
.tableWrap .row.th > span:last-of-type {border-right: 0;}

.tableWrap .row.td > .step b {display: inline-flex; align-items: center; justify-content: center;  border-radius: 0.375rem; padding: 0.5rem 0.875rem; background: #dedfdf; color: #6b6e76; gap: 0.375rem; min-width: 6rem;}
.tableWrap .row.td > .type::before,
.tableWrap .row.td > .step b::before {content: ''; display: inline-flex; width: 0.375rem; height: 0.375rem; background: #8f8f8f; border-radius: 50%; opacity: 0.9;}
.tableWrap .row.td[data-step="3"] .step > b {background: var(--product-biz3);}
.tableWrap .row.td[data-step="3"] .step > b::before {background: #185515;}
.tableWrap .row.td[data-step="3"] .step > b::after {color: #185515;  }
.tableWrap .row.td[data-step="4"] .step > b {background: var(--product-biz2);}
.tableWrap .row.td[data-step="4"] .step > b::before {background: #854e07;}
.tableWrap .row.td[data-step="4"] .step > b::after {color: #854e07;  }
.tableWrap .row.td[data-step="5"] .step > b {background: var(--product-biz1);}
.tableWrap .row.td[data-step="5"] .step > b::before {background: #1730a1;}
.tableWrap .row.td[data-step="5"] .step > b::after {color: #1730a1;  }
.tableWrap .row.td[data-step="-2"] .step > b, 
.tableWrap .row.td[data-step="-5"] .step > b, 
.tableWrap .row.td[data-step="-1"] .step > b {background: #ffd0d0;}
.tableWrap .row.td[data-step="-5"] .step > b::before,
.tableWrap .row.td[data-step="-1"] .step > b::before {background: #e50000;}
.tableWrap .row.td[data-step="-2"] .step > b, 
.tableWrap .row.td[data-step="-5"] .step > b::after,
.tableWrap .row.td[data-step="-1"] .step > b::after {color: #e50000;}

.tableWrap .row.td > span.stName { color: var(--color-bl1); font-weight: 600;}
.tableWrap .row.td > span.type { justify-content: flex-start; gap: 0.375rem;}
.tableWrap .row.td[data-type="zoom"] .type::before { background: var(--data-type3); }
.tableWrap .row.td[data-type="online"] .type::before { background: var(--data-type1); }
.tableWrap .row.td[data-type="book"] .type::before { background: var(--data-type4); }
.tableWrap .row.td .date {font-weight: 600; color: var(--color-gy2);}
.tableWrap .row.td button {font-size: 0.8125rem; padding: 0.5rem 0.875rem;}
.tableWrap .row.td .resend button {border: 1px solid #7163ba82; color: var(--color-primary-1);}
.tableWrap .row.td .certificate {color: var(--color-gy3);}
.tableWrap .row.td .certificate button {background: var(--color-primary-1); color: var(--color-white); display: none;}
.tableWrap .row.td .resend button:hover,
.tableWrap .row.td .certificate button:hover {background: var(--color-primary-1-li); color: var(--color-white);}
.tableWrap .row.td[data-step="5"] .certificate button {display: inline-flex;}

@media (max-width:1440px) {
    .tableWrap {grid-template-columns: auto auto auto auto auto auto auto auto auto 6rem;}
}
@media (max-width:1280px) {
    .tableWrap .row > span {padding: 0.875rem ;}     
    .sortingR {display: none;}
    .tableWrap .row.td > .type::before,
    .tableWrap .row.td > .step b::before {display: none;}
    .tableWrap .row.td > .step b {min-width: 5rem;}
}
@media (min-width:991px) { 
    .radioBox > input[type="radio"] {display: none;}
    .radioBox label {display: flex; align-items: center; justify-content: center; gap: 0.5rem;  height: 2.625rem;  border: 1px solid var(--color-line-w); cursor: pointer; border-radius: 0.375rem; transition: 0.3s; padding: 0 1rem; font-size: 0.875rem; font-weight: 500; color: var(--color-gy1);}
    .radioBox label::before  {content: '✓'; font-size: 0.875rem; width: 1.125rem; color: var(--color-gy3); height: 1.125rem; display: inline-flex; justify-content: center; align-items: center; border: 1px solid #ddd; border-radius: 50%;}
    .radioBox > input[type="radio"]:checked + label {background: var(--color-primary-1); color: var(--color-white);}
    .radioBox > input[type="radio"]:checked + label::before { background: var(--color-white); border-color: transparent; color: var(--color-primary-1-dk);}
}

@media (max-width:990px) {    
    #stStepOpBtn,
    #mobRadioSelect {display: flex; min-width: 7.5rem; padding: 0.75rem; font-size: 0.875rem;}
    #mobRadioSelect { align-items: center; border: 1px solid var(--color-line-w); justify-content: space-between;}
    #stStepOpBtn > span,
    #mobRadioSelect > span {display: flex; align-items: center; color: var(--color-bl2); font-weight: 500;}
    #stStepOpBtn > span::before ,
    #mobRadioSelect > span::before { content: '✓'; width: 1rem; color: var(--color-gy3); height: 1rem; display: inline-flex;  justify-content: center; align-items: center; border: 1px solid #ddd;  border-radius: 50%; margin-right: 0.25rem; font-size:0.6875rem ;}
    .stepSelectWrap .stStepOpList {right: auto; left: 0;}

    #mobRadioSelect > i {display: inline-flex; font-size: 0.625rem; width: 1.25rem; height:  1.25rem;  border-radius: 50%;  position: relative;  transition: 0.3s;}
    #mobRadioSelect > i::before {content: '\f078'; font: var(--fa-font-solid);  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);  transition: 0.3s; color: #676767;}
    .has #mobRadioSelect > i {background: #F8F9FC; }
    .has #mobRadioSelect > i::before {transform: translate(-50%, -50%) rotate(180deg); color: #121212; }

    .sortingCon .sortingL{ position: relative;}
    .sortingCon .sortingL > .radioBoxWrap {position: absolute; display: flex; z-index: 1001; flex-direction: column; background: var(--color-white); border-radius: 0.625rem ; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); bottom: 0; left: 0; transform: translateY(100%); min-width: 8.125rem; padding: 1rem; overflow: hidden;  opacity: 0; visibility: hidden; transition: all 0.4s ease; gap: 0.875rem; gap: 0.875rem;}
    .sortingCon .sortingL > .radioBoxWrap.has { opacity: 1; visibility: visible; transform: translateY(102%);}

    .radioBoxWrap .radioBox > input[type="radio"] {display: none;}
    .radioBoxWrap .radioBox label {cursor: pointer; font-weight: 500; font-size: 0.875rem;}
    .radioBoxWrap .radioBox label::before {content: '✓'; font-size: 0.875rem; width: 1.125rem; color: var(--color-gy3); height: 1.125rem; display: inline-flex; justify-content: center; align-items: center; border: 1px solid #ddd; border-radius: 50%;}
    .radioBoxWrap .radioBox > input[type="radio"]:checked + label {color: var(--color-primary-1); font-weight: 500;}
    .radioBoxWrap .radioBox > input[type="radio"]:checked + label::before { background: var(--color-primary-1); color: var(--color-white);}

    .tableWrap .row.td button {padding: 0.5rem; font-size: 0.75rem;}
    .tableWrap {grid-template-columns: repeat(8, auto);}
    .tableWrap .row > span:first-of-type,
    .tableWrap .row > span:last-of-type {display: none;}
    .tableWrap .row > .stName {justify-content: flex-start; gap: 0.375rem;}
    .tableWrap .row > .stName::before {font-size: 0.75rem ; display: inline-flex; justify-content: center; align-items: center; width: 3rem; height:1.375rem; border-radius: 0.25rem;}
    div[data-join="ok"] .stName::before {content: '회원';  background: #e8e4ff; color: #5130a1;}
    div[data-join="no"] .stName::before {content: '비회원';  background: #f8f9fc; color: #ababab; }
    .tableWrap .row.td > .step b { padding: 0.5rem; min-width: 3.5rem; font-size: 0.75rem;}
    .tableWrap .row.noList > span {grid-column: 1/8 span; padding: 1.5rem 0; display: block;}
}
@media (max-width:786px) {
    .mangerTitle { padding-bottom: 0 ;}
    .tableWrap {display: flex; flex-direction: column; gap: 0.5rem; }
    .tableWrap .row.th {display: none;}
    .tableWrap .row {display: flex; flex-wrap: wrap; border: 1px solid var(--color-line-w); padding: 1rem; position: relative; border-radius: 0.5rem; padding-right: 1rem; }
    .tableWrap .row.td > span {border: 0; padding: 0; flex: 0 0 auto;}    
    .tableWrap .row.td .date {font-weight: 500; color: var(--color-bl2); padding: 0.875rem 0 1rem 0 ;}
    .tableWrap .row.td .date.start::after {content: '~'; padding: 0 2px;}   
    .tableWrap .row.td .date.complete {display: none;}
    .tableWrap .row.td[data-step="5"] .date.complete {display: flex;}
    .tableWrap .row.td .date.start::before {content: '수강기간'; color: var(--color-gy2); padding-right: 3px;}
    .tableWrap .row.td .date.complete::before {content: ' / 수료일'; padding-left: 4px; padding-right: 3px; color: var(--color-gy2);}
    .tableWrap .row.td > .join {order: 1; flex-basis: 100%; display: flex; }      
    .tableWrap .row.td > .join::after {display: none;} 
    .tableWrap .row.noList > span {width: 100%; border: 0; font-size: 1rem; }
    
    .tableWrap .row.td > span.type {order: 3; flex-basis: auto; padding-left: 0; padding-bottom: 0; font-size: 0.875rem;  padding-right: 4rem;}
    .tableWrap .row.td .step {order: 2; flex-basis: auto; padding: 0;}
    .tableWrap .row.td .step > b {position: relative; top:0; right: 0; transform: translateY(0); padding: 3px 6px; border-radius: 2px; min-width: auto; height: auto; margin-right: 0.5rem;}
    .tableWrap .row.td .resend  {order: 1; flex-basis: 100%; }
    .tableWrap .row.td .resend > button { position: absolute; top: auto; bottom: 1rem; right: 1rem; transform: translateY(0); padding: 0; border: 0; border-bottom: 1px solid var(--color-primary-1); padding-bottom: 0.25rem; border-radius: 0;}
    .tableWrap .row.td .stName, 
    .tableWrap .row.td .stPhone {padding: 0; font-size: 0.9375rem; gap: 0.5rem; order: -10; height: 1.375rem; line-height: 1.375rem; }
    .tableWrap .row.td .stName {padding-right: 0.5rem;}
    .tableWrap .row.td > .join {order: -8;}   
}